/* =========================================================================
   Die Geschichte (/design-entwicklung, englisch /en/story)
   Umbau fürs Handy vom 11.10.2026. Nur auf dieser Seite eingebunden, steht
   NACH site.css und nutzt dessen Variablen (--bg, --card, --primary, --ease ...).

   Grundsätze (Design-System Go & Grow):
   · Handy zuerst. Alles ist für 375 Pixel gebaut, ab 900 kommt eine zweite Spalte.
   · Ein Blick, eine Hauptsache: pro Abschnitt eine Anton-Zeile, der Rest leise.
   · Symbole sind inline SVG, viewBox 24, Strich 1.7, runde Enden, in primary.
   · Unter 900 Pixeln sind Flächen eine Stufe heller (surface, line-strong),
     sonst verschwindet der Unterschied im Tageslicht.
   · Bewegt wird nur transform und opacity, mit der einen Kurve --ease.
   · Fliesstext nie unter 16 Pixel (Handy-Prüfung 11.10.2026, docs/analyse-handy/).
     Kleiner sind nur Versal-Etiketten (eyebrow-Art) und die Store-Zeile «Jetzt laden».

   ‼️ Texte in den Bausteinen tragen bewusst KEINE Klassen auf inneren
   Elementen (figcaption b/span, h3, p). Der Übersetzer ersetzt den Inhalt
   eines Bausteins als Ganzes; eine Klasse darin müsste im Wörterbuch
   mitgeschrieben werden und ginge sonst auf /en/story verloren.
   ========================================================================= */

/* Die Markierung der aktuellen Seite in der Navigation stand hier bis zum
   11.10.2026 als eigene Regel. Jetzt setzt assets/js/kopfleiste.js
   aria-current auf jeder Seite, auch auf Englisch, und site.css zeichnet es. */

/* ---------- Abstände der Abschnitte ---------- */
.gs-teil{padding:clamp(40px,8vw,88px) 0}
.gs-h2{font-size:clamp(32px,8.6vw,52px);line-height:1.02;margin:0}
.gs-teil .eyebrow{margin-bottom:12px}

/* ---------- Zurück-Knopf, oben links ----------
   Steht seit dem 11.10.2026 einmal zentral in site.css (.gs-zurueck und
   .seite-zurueck sind derselbe Knopf). */

/* ---------- Kopf ---------- */
.gs-kopf{padding:18px 0 clamp(34px,7vw,72px)}
.gs-h1{font-size:clamp(46px,13vw,84px);line-height:.96;margin:0}
.gs-kopf .lead{max-width:34ch;margin-top:16px}

/* ---------- 01 · Sechs Jahre Anlauf ----------
   Jeder Absatz hat links ein Symbol, das ihn kennzeichnet. */
.gs-zwei{display:grid;gap:26px}
.gs-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:var(--primary-dim);border:1px solid var(--primary-line);color:var(--primary)}
.gs-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.gs-punkte{display:grid;gap:18px}
.gs-punkte li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.gs-punkte p{font-size:16px;line-height:1.55;color:var(--faint);padding-top:1px}
.gs-punkte p b{color:var(--text);font-weight:700;display:block;margin-bottom:2px}

/* Der Weg: eine Linie, auf der die Stationen sitzen. */
.gs-weg-box{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:20px 18px 18px}
.gs-weg-box h3{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
.gs-weg{position:relative;display:grid;gap:8px}
.gs-weg::before{content:"";position:absolute;left:18px;top:19px;bottom:19px;width:2px;
  border-radius:2px;background:linear-gradient(180deg,var(--primary-line),var(--primary))}
.gs-weg li{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);
  gap:14px;align-items:center;min-height:38px}
.gs-weg .gs-ico{width:38px;height:38px;border-radius:50%;background:var(--bg)}
.gs-weg .gs-ico svg{width:19px;height:19px}
.gs-weg p{font-size:16px;line-height:1.35;font-weight:500;color:var(--text)}

@media(min-width:900px){
  .gs-zwei{grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:56px;row-gap:26px;
    grid-template-areas:"kopf weg" "punkte weg" "ende weg";align-items:start}
  .gs-zwei__kopf{grid-area:kopf}
  .gs-zwei__punkte{grid-area:punkte}
  .gs-zwei__weg{grid-area:weg;align-self:start}
  .gs-zwei__ende{grid-area:ende}
  .gs-weg-box{background:var(--card);border-color:var(--line);padding:24px 24px 22px}
}

/* ---------- 02 · Gezeichnet, gebaut, verworfen ----------
   Fünf Schritte, je eine Zeile. Am Rechner nebeneinander. */
.gs-bau{display:grid;margin-top:22px;max-width:640px}
.gs-bau li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--line-strong)}
.gs-bau li:last-child{border-bottom:1px solid var(--line-strong)}
.gs-bau > li > b{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;
  font-size:22px;line-height:1;color:var(--primary);letter-spacing:.02em}
.gs-bau h3{font-size:17px;line-height:1.3;font-weight:700;margin:0}
.gs-bau p{font-size:16px;line-height:1.45;color:var(--muted);margin-top:2px}
@media(min-width:900px){
  .gs-bau{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;max-width:none;margin-top:26px}
  .gs-bau li{grid-template-columns:1fr;gap:10px;align-items:start;align-content:start;padding:16px 0 0;
    border-top:2px solid var(--line-strong);border-bottom:0}
  .gs-bau li:last-child{border-bottom:0;border-top-color:var(--primary)}
}

/* ---------- 03 · So sah sie damals aus ----------
   Vier Stände der Startseite. Auf dem Handy zwei mal zwei, am Rechner in einer Reihe.
   Die Bilder sind Aufnahmen der echten alten Fassungen und ein echtes
   Bildschirmfoto von heute, kein Nachbau. */
.gs-staende{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px;margin-top:24px}
.gs-staende figure{margin:0;min-width:0}
.gs-handy{position:relative;border-radius:24px;padding:5px;background:#05080a;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.gs-handy img{width:100%;height:auto;aspect-ratio:474/921;border-radius:19px;background:var(--bg)}
/* «Heute» gibt es als deutsches und englisches Bildschirmfoto. Sichtbar ist das
   der Seitensprache; /en/story bekommt vom Server html lang="en". */
html[lang="en"] .gs-nur-de,html:not([lang="en"]) .gs-nur-en{display:none}
.gs-staende figcaption{margin-top:12px}
.gs-staende figcaption b{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.gs-staende figcaption span{display:block;margin-top:4px;font-size:16px;line-height:1.3;
  font-weight:700;color:var(--text)}
/* «Heute» ist nur am türkisen Rand und am Etikett zu erkennen, ohne Schein:
   das Bild selbst soll nicht heller wirken als die drei alten Stände. */
.gs-staende li:last-child .gs-handy{border-color:var(--primary-line)}
.gs-staende li:last-child figcaption b{color:var(--primary)}
@media(min-width:900px){
  .gs-staende{grid-template-columns:repeat(4,minmax(0,220px));gap:34px;margin-top:30px}
}

/* ---------- 04 · So geht es weiter ----------
   Drei Schritte. Der erste ist die Hauptsache: die zwei Laden-Knöpfe
   (.stores/.store aus site.css), immer untereinander, App Store oben.
   Danach zwei leise Verweise, Mitreden und ein Text zum Weiterlesen. */
.gs-schluss .lead{max-width:34ch}
.gs-schritte{display:grid;gap:12px;margin-top:26px;max-width:560px}
.gs-schritt__nr{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--primary-line);color:var(--primary);
  font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:17px;line-height:1}
.gs-schritt__txt{min-width:0}
.gs-schritt__txt p{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 3px}
.gs-schritt__txt h3{font-size:17px;line-height:1.3;font-weight:700;margin:0;color:var(--text)}

.gs-schritt--haupt{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;
  padding:18px 16px 18px 14px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--primary-line);box-shadow:0 0 38px rgba(95,181,171,.10)}
.gs-schritt--haupt h3{font-size:19px;padding-top:6px}
.gs-laeden.stores{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:14px;max-width:330px}
.gs-laeden .store{min-height:60px;padding:12px 18px}

.gs-schritt > a{display:grid;grid-template-columns:36px minmax(0,1fr) 14px;gap:14px;align-items:center;
  min-height:64px;padding:12px 18px 12px 14px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line-strong);color:inherit;text-decoration:none;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .14s var(--ease)}
.gs-schritt > a::after{content:"";width:8px;height:8px;border-top:2px solid var(--muted);
  border-right:2px solid var(--muted);transform:rotate(45deg);justify-self:end;
  transition:transform .14s var(--ease),border-color .18s var(--ease)}
.gs-schritt > a:hover{border-color:var(--primary-line);background:var(--primary-dim)}
.gs-schritt > a:hover::after{border-color:var(--primary);transform:translateX(2px) rotate(45deg)}
.gs-schritt > a:active{transform:scale(.985)}
@media(min-width:900px){
  .gs-schritte{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;max-width:980px;align-items:start}
  .gs-schritt--haupt{grid-row:span 2;background:var(--card)}
  .gs-schritt > a{background:var(--card);border-color:var(--line)}
}

/* ---------- Auftauchen ----------
   geschichte.js setzt .gs-warte nur auf Teile, die beim Laden noch unter dem
   Bildschirmrand liegen, und nimmt es beim ersten Sichtkontakt wieder weg.
   Ohne Skript und bei weniger Bewegung steht alles sofort da. */
.gs-rein{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.gs-rein.gs-warte{opacity:0;transform:translateY(22px)}
@media(prefers-reduced-motion:reduce){
  .gs-rein,.gs-rein.gs-warte{transition:none;opacity:1;transform:none}
  .gs-schritt > a,.gs-schritt > a::after{transition:none}
}

/* (Fusszeile: die Farbe --muted steht seit dem 11.10.2026 zentral in site.css.) */


/* =========================================================================
   V2 Runde 2 (12.10.2026): am Handy blättern, ein Bereich ein Bildschirm
   Auftrag: docs/umbau-handy/V2-HANDY-2026-10-12.md, Punkte 13 und 17. Das
   Einrasten steht in site.css 17a; Platz für den Inhalt höchstens 571 Pixel.
   Am Rechner und am Tablet bleibt jeder Pixel.
   ========================================================================= */

/* «Sechs Jahre Anlauf» hat im HTML zwei .gs-blatt (am Handy je ein
   Bildschirm). Ab 768 Pixeln sind sie ohne eigenes Kästchen, ihr Inhalt
   steht direkt im Raster wie vorher. Zwischen 768 und 899 Pixeln (eine
   Spalte) stellt order die alte Reihenfolge her: Überschrift, zwei Absätze,
   der Weg, zwei Absätze. Ab 900 Pixeln setzen die Rasterflächen alles an
   seinen Platz. */
@media(min-width:768px){
  .gs-zwei > .gs-blatt{display:contents}
  .gs-zwei__kopf,.gs-zwei__punkte{order:1}
  .gs-zwei__weg{order:2}
  .gs-zwei__ende{order:3}
}

@media(max-width:767px){
  /* Abstände im ersten .gs-blatt wie vorher im Raster (26, zwischen den
     Absätzen 18) */
  .gs-blatt .gs-zwei__punkte{margin-top:26px}
  .gs-blatt .gs-zwei__ende{margin-top:18px}

  html.blaettern main > .hair{display:none}
  html.blaettern #anfang{padding:0}
  html.blaettern #anfang .gs-zwei{gap:0}

  /* ---------- 1 · Der Kopf ----------
     Zurück oben, die grosse Zeile mittig im Platz über dem Zustimmungsband. */
  html.blaettern .gs-kopf > .wrap{display:flex;flex-direction:column;
    min-height:calc(100svh - var(--blatt-oben) - var(--blatt-unten))}
  html.blaettern .gs-kopf .gs-zurueck{align-self:flex-start}
  html.blaettern .gs-kopf .eyebrow{margin-top:auto}
  html.blaettern .gs-kopf .lead{margin-bottom:auto;padding-bottom:96px}
  html.blaettern .gs-h1{font-size:clamp(50px,15vw,62px)}

  /* ---------- 3 · Der Weg dahin ----------
     Ein Bildschirm für sich: die sieben Stationen etwas grosszügiger. */
  html.blaettern .gs-blatt--weg .gs-weg-box{padding:22px 18px 20px}
  html.blaettern .gs-blatt--weg .gs-weg{gap:10px}

  /* ---------- 5 · So sah sie damals aus ----------
     Runde 2 zeigte hier nur das Bild «Heute» neben einer Zeitleiste. Runde 4
     (13.10.2026, Punkt 40): das verwirrte. Jetzt steht die Liste am Handy
     nicht mehr (nur-rechner im HTML), dafür die Rotation weiter unten. */

  /* Die Sicherungen (Feld mit Fokus, Bereich zu hoch) gelten für alle
     Blätter-Seiten gemeinsam: site.css 17a und assets/js/blaettern.js. */
}


/* =========================================================================
   V2 Runde 4 (13.10.2026), nur unter 768 Pixeln
   Auftrag: docs/umbau-handy/V2-HANDY-2026-10-12.md, Punkte 39 und 40.
   Am Rechner und am Tablet bleibt jeder Pixel (die Rotation ist nur-handy,
   die Liste der Stände nur-rechner).
   ========================================================================= */
@media(max-width:767px){
  /* ---------- Punkt 39 · Der Weg dahin ----------
     Keine Linie mehr zwischen den Kreisen mit den Symbolen. */
  .gs-weg::before{content:none}

  /* ---------- Punkt 40 · So sah sie damals aus ----------
     Ein Handy im Format des iPhone 17: der Bildschirm ist 402 x 874 Punkte,
     hier genau so im Verhältnis, nie gestaucht. Der schwarze Rand und die
     helle Kante sind box-shadow, sie zählen nicht zur Grösse. Die Höhe
     richtet sich nach dem Platz im Bildschirm: was über und unter dem Handy
     steht (Augenbraue, Überschrift, Datum, Punkte), sind rund 210 Pixel. */
  .gs-dreh{--gs-h:clamp(240px,calc(100svh - var(--blatt-oben,72px) - var(--blatt-unten,24px) - 214px),500px);
    display:flex;flex-direction:column;align-items:center;margin-top:20px}
  .gs-dreh__handy{position:relative;display:block;flex:none;width:calc(var(--gs-h) * 402 / 874);height:var(--gs-h);
    margin:0;padding:0;border:0;border-radius:calc(var(--gs-h) * .063);overflow:hidden;background:#05080a;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    box-shadow:0 0 0 4px #05080a,0 0 0 5px rgba(255,255,255,.16),0 24px 50px rgba(0,0,0,.55);
    transition:transform .14s var(--ease)}
  .gs-dreh__handy:active{transform:scale(.985)}
  .gs-dreh__handy:focus-visible{outline:3px solid var(--primary);outline-offset:9px}
  /* Überblenden nur über opacity */
  .gs-dreh__handy img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
    transition:opacity .8s var(--ease)}
  .gs-dreh__handy img.ist-an{opacity:1}

  /* Datum und Name leise, alle vier an derselben Stelle übereinander */
  .gs-dreh__text{display:grid;margin-top:18px;text-align:center}
  .gs-dreh__text p{grid-area:1/1;margin:0;opacity:0;transition:opacity .5s var(--ease)}
  .gs-dreh__text p.ist-an{opacity:1}
  .gs-dreh__text b{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted)}
  .gs-dreh__text span{display:block;margin-top:3px;font-size:16px;line-height:1.3;color:var(--faint)}

  /* Vier kleine Punkte, je ein Knopf mit 44 Pixeln Berührfläche (die Flächen
     überlappen sich um 14 Pixel, damit die Punkte nah beieinander stehen) */
  .gs-dreh__punkte{display:flex;margin-top:2px}
  .gs-dreh__punkte button{display:grid;place-items:center;width:44px;height:44px;margin:0 -7px;padding:0;
    border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .gs-dreh__punkte i{display:block;width:6px;height:6px;border-radius:50%;background:var(--primary);opacity:.3;
    transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .gs-dreh__punkte button.ist-an i{opacity:1;transform:scale(1.35)}
  .gs-dreh__punkte button:focus-visible{outline:2px solid var(--primary);outline-offset:-8px;border-radius:50%}
}
/* ---------- Schluss «So geht es weiter» bei unbekanntem Gerät ----------
   Seit Runde 4 (Punkt 27, site.css 18a) stehen ohne Geräte-Erkennung beide
   Laden-Knöpfe untereinander, 66 Pixel mehr als einer. Bei 375 x 667 war der
   letzte Bildschirm samt Fusszeile damit 57 Pixel höher als der Schirm, und
   die Seite rastete nicht mehr fest ein. In diesem Fall fällt am Handy der
   Satz unter der Überschrift weg (die Zahlen stehen auch auf der
   Startseite), ebenso auf kleinen Handys (unter 700 Pixeln Höhe, etwa
   375 x 667): dort stand sonst der schwebende Zurück-Knopf auf der dritten
   Karte. Auf dem iPhone 17 (402 x 732) bleibt er. */
@media(max-width:767px){
  html.blaettern:not([data-geraet="apple"]):not([data-geraet="android"]) .gs-schluss .lead{display:none}
  /* Der Zurück-Knopf schwebt seit Runde 4 unten rechts (site.css 18b) und
     stand hier auf der Ecke der dritten Karte («Warum du vergisst, was du
     liest»). Der Inhalt beginnt darum oben unter der Pille statt in der
     Mitte; der freie Platz liegt unten, wo der Knopf schwebt. */
  html.blaettern .gs-schluss{align-content:start}
}
@media(max-width:767px) and (max-height:700px){
  html.blaettern .gs-schluss .lead{display:none}
}
/* Weniger Bewegung: keine Automatik (geschichte.js), Wechsel ohne Überblenden */
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  .gs-dreh__handy,.gs-dreh__handy img,.gs-dreh__text p,.gs-dreh__punkte i{transition:none}
  .gs-dreh__handy:active{transform:none}
}



/* =========================================================================
   RECHNER (ab 768 Pixeln), 13.10.2026: ein Bereich, ein Bildschirm
   Auftrag: docs/umbau-handy/DESKTOP-2026-10-13.md. Am Rechner erzählt die
   Geschichte dasselbe wie am Handy, in derselben Reihenfolge: der Kopf,
   Sechs Jahre Anlauf, der Weg dahin, Gezeichnet gebaut verworfen, So sah sie
   damals aus (das Handy mit den vier Ständen), So geht es weiter.
   Jeder Bereich ist genau eine Bildschirmhöhe hoch (das Fenster ohne die
   Kopfleiste), kompakt und mittig, mit einem Hauptelement.
   Runde 2 am Rechner (13.10.2026 abends): die Seite hakt ein wie am Handy.
   <html class="blaettern blaettern-rechner">, jeder .bildschirm ist eine
   Station (site.css 17e, assets/js/blaettern.js e). «Sechs Jahre Anlauf» und
   «Der Weg dahin» sind darum auch am Rechner zwei Bereiche (die zwei
   .gs-blatt), nicht mehr nebeneinander (Eluan: «sieht sehr unschön aus»).
   Der letzte Bereich und die Fusszeile sind zusammen ein Bildschirm.
   Alles hier steht in @media(min-width:768px); unter 768 Pixeln ändert sich
   kein Pixel (Pixelvergleich gegen den Stand v2c).
   ========================================================================= */
/* Was sich mit dem Stand geändert hat, steht erst ab 1024 Pixeln da (unten).
   Darum ohne .nur-rechner: die Klasse heisst «ab 768 zu sehen». */
.gs-dreh__mehr{display:none}
@media(min-width:768px){
  /* Die Kopfleiste ist 57 Pixel hoch, ab 900 Pixeln 61 (site.css). */
  html.blaettern{--rz-kopf:57px;--rz-h:calc(100vh - var(--rz-kopf));--rz-rand:clamp(24px,4.6vh,52px)}
  html.blaettern main > .hair{display:none}
  html.blaettern main > section{display:flex;padding:0}
  html.blaettern main > section > .wrap{display:flex;flex-direction:column;justify-content:center;
    min-height:var(--rz-h);padding-block:var(--rz-rand)}
  html.blaettern main > section:last-child > .wrap{min-height:calc(var(--rz-h) - var(--fuss-h, 0px))}
  .gs-h2{font-size:clamp(48px,5.4vw,80px);line-height:.94}
  .gs-teil .eyebrow{margin-bottom:14px}

  /* ---------- 1 · Der Kopf ----------
     Zurück oben links wie immer, die grosse Zeile mittig im Bildschirm. */
  html.blaettern .gs-kopf > .wrap{padding-top:20px}
  html.blaettern .gs-kopf .gs-zurueck{align-self:flex-start;margin-bottom:0}
  html.blaettern .gs-kopf .eyebrow{margin-top:auto;margin-bottom:20px}
  html.blaettern .gs-h1{font-size:clamp(84px,min(10.4vw,19vh),160px);line-height:.9}
  html.blaettern .gs-kopf .lead{margin-top:clamp(18px,3.2vh,30px);margin-bottom:auto;max-width:30ch;
    font-size:clamp(19px,1.7vw,24px);line-height:1.5}

  /* ---------- 2 und 3 · Sechs Jahre Anlauf, dann der Weg dahin ----------
     Zwei Bereiche (die zwei .gs-blatt), jeder ein Bildschirm. Der Abschnitt
     selbst trägt keinen Rand mehr; das Raster mit zwei Spalten von früher
     gilt nicht mehr. */
  html.blaettern #anfang{display:block}
  html.blaettern #anfang > .wrap{display:block;min-height:0;padding-block:0}
  html.blaettern .gs-zwei > .gs-blatt{display:grid;align-content:center;min-height:var(--rz-h);padding-block:var(--rz-rand)}

  /* Sechs Jahre Anlauf: die Zeile, darunter die vier Absätze in zwei
     Spalten (Viele Tools, Alles an einem Ort / Rund 400 Stunden, Als
     Nächstes) */
  html.blaettern .gs-zwei > .gs-blatt:first-child{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5vw,80px);
    row-gap:clamp(22px,4vh,36px)}
  html.blaettern .gs-blatt:first-child .gs-zwei__kopf{grid-area:auto/1/auto/-1;order:0;margin-bottom:clamp(4px,1.4vh,14px)}
  html.blaettern .gs-blatt:first-child .gs-punkte{display:contents}
  html.blaettern .gs-blatt:first-child .gs-punkte li{grid-template-columns:48px minmax(0,1fr);gap:18px}
  html.blaettern .gs-blatt:first-child .gs-ico{width:48px;height:48px;border-radius:15px}
  html.blaettern .gs-blatt:first-child .gs-ico svg{width:24px;height:24px}
  .gs-punkte p{font-size:clamp(17px,1.35vw,19px)}
  .gs-punkte p b{font-size:clamp(18px,1.5vw,21px);margin-bottom:4px}

  /* Der Weg dahin: allein auf seinem Bildschirm, mittig, als ruhige Karte
     mit einer feinen Kante im Verlauf der App-Farben (Türkis, Blau, Gold)
     und einem leisen Schein dahinter. Wie am Handy keine Linie mehr zwischen
     den Kreisen (Punkt 39). */
  html.blaettern .gs-zwei > .gs-blatt--weg{justify-items:center;position:relative;isolation:isolate;overflow:clip}
  .gs-weg::before{content:none}
  html.blaettern .gs-blatt--weg .gs-weg-box{grid-area:auto;order:0;align-self:center;position:relative;width:min(100%,600px);
    padding:clamp(26px,4.4vh,40px) clamp(28px,3.4vw,46px) clamp(24px,4vh,36px);border-radius:30px;
    border:0;background:#151b1c;box-shadow:0 40px 90px rgba(0,0,0,.5)}
  /* Die feine Kante im Verlauf: ein Ring aus ::after (Maske), damit die
     Fläche hinter dem Text eine einfache Farbe bleibt */
  html.blaettern .gs-blatt--weg .gs-weg-box::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
    background:linear-gradient(140deg,rgba(95,181,171,.7),rgba(90,160,224,.32) 38%,rgba(255,255,255,.07) 62%,rgba(224,185,74,.42));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  html.blaettern .gs-blatt--weg .gs-weg-box::before{content:"";position:absolute;inset:-16% -24%;z-index:-1;pointer-events:none;
    background:radial-gradient(32% 38% at 30% 32%,rgba(95,181,171,.34),rgba(95,181,171,0) 72%),
      radial-gradient(30% 36% at 72% 48%,rgba(90,160,224,.24),rgba(90,160,224,0) 72%),
      radial-gradient(34% 28% at 52% 76%,rgba(224,185,74,.17),rgba(224,185,74,0) 72%)}
  html.blaettern .gs-blatt--weg .gs-weg-box h3{font-size:13px;letter-spacing:.24em;color:var(--primary);margin:0 0 clamp(14px,2.6vh,22px)}
  html.blaettern .gs-blatt--weg .gs-weg{gap:clamp(8px,1.6vh,14px)}
  html.blaettern .gs-blatt--weg .gs-weg li{grid-template-columns:44px minmax(0,1fr);gap:18px;min-height:44px}
  html.blaettern .gs-blatt--weg .gs-weg .gs-ico{width:44px;height:44px;background:#0f1415}
  html.blaettern .gs-blatt--weg .gs-weg .gs-ico svg{width:21px;height:21px}
  html.blaettern .gs-blatt--weg .gs-weg p{font-size:clamp(17px,1.4vw,19px)}

  /* ---------- 4 · Gezeichnet, gebaut, verworfen ----------
     Fünf Schritte, die Nummern gross (ab 900). Der letzte trägt die Farbe. */
  .gs-bau h3{font-size:clamp(18px,1.5vw,21px)}
  .gs-bau p{font-size:17px;line-height:1.5}

  /* ---------- 5 · So sah sie damals aus ----------
     Dasselbe Handy wie am Handy: Format des iPhone 17 (402 x 874), alle
     4 Sekunden der nächste Stand (geschichte.js), darunter vier Punkte.
     Daneben Datum und Name des Stands und was sich geändert hat, beides
     wechselt mit. Bis 1023 Pixel steht alles untereinander, ab 1024 das
     Handy rechts. */
  .gs-dreh{--gs-h:clamp(360px,calc(var(--rz-h) - 420px),620px);display:flex;flex-direction:column;align-items:center;
    margin-top:clamp(20px,3.4vh,32px)}
  .gs-dreh__handy{position:relative;display:block;flex:none;width:calc(var(--gs-h) * 402 / 874);height:var(--gs-h);
    margin:0;padding:0;border:0;border-radius:calc(var(--gs-h) * .063);overflow:hidden;background:#05080a;
    cursor:pointer;box-shadow:0 0 0 5px #05080a,0 0 0 6px rgba(255,255,255,.16),0 30px 70px rgba(0,0,0,.6);
    transition:transform .14s var(--ease)}
  .gs-dreh__handy:hover{transform:translateY(-2px)}
  .gs-dreh__handy:active{transform:scale(.99)}
  .gs-dreh__handy:focus-visible{outline:3px solid var(--primary);outline-offset:10px}
  .gs-dreh__handy img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
    transition:opacity .8s var(--ease)}
  .gs-dreh__handy img.ist-an{opacity:1}

  /* Datum und Name: alle vier an derselben Stelle übereinander */
  .gs-dreh__text{display:grid;margin-top:18px;text-align:center}
  .gs-dreh__text p{grid-area:1/1;margin:0;opacity:0;transition:opacity .5s var(--ease)}
  .gs-dreh__text p.ist-an{opacity:1}
  .gs-dreh__text b{display:block;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--primary)}
  .gs-dreh__text span{display:block;margin-top:6px;font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;
    font-size:clamp(28px,2.6vw,40px);line-height:1;text-transform:uppercase;letter-spacing:.01em;color:#fff}

  /* Was sich geändert hat: zwei Zeilen und die Farben des Stands */
  .gs-dreh__mehr > div{grid-area:1/1;opacity:0;transition:opacity .5s var(--ease)}
  .gs-dreh__mehr > div.ist-an{opacity:1}
  .gs-dreh__mehr ul{display:grid;gap:10px}
  .gs-dreh__mehr li{position:relative;padding-left:26px;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:var(--faint)}
  /* Vor jeder Zeile ein kurzer Punkt, kein Strich (Eluan: keine langen
     Striche, auch nicht als Zeichen; bis 13.10.2026 ein Balken 12 x 2) */
  .gs-dreh__mehr li::before{content:"";position:absolute;left:4px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--primary)}
  .gs-farben{display:flex;align-items:center;gap:14px;margin-top:20px}
  .gs-farben p{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .gs-farben div{display:flex;gap:8px}
  .gs-farben i{display:block;width:22px;height:22px;border-radius:50%;background:var(--f);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}

  /* Vier kleine Punkte, je ein Knopf mit 44 Pixeln Fläche */
  .gs-dreh__punkte{display:flex;margin-top:12px}
  .gs-dreh__punkte button{display:grid;place-items:center;width:44px;height:44px;margin:0 -6px;padding:0;
    border:0;background:none;cursor:pointer}
  .gs-dreh__punkte i{display:block;width:7px;height:7px;border-radius:50%;background:var(--primary);opacity:.3;
    transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .gs-dreh__punkte button:hover i{opacity:.6}
  .gs-dreh__punkte button.ist-an i{opacity:1;transform:scale(1.35)}
  .gs-dreh__punkte button:focus-visible{outline:2px solid var(--primary);outline-offset:-8px;border-radius:50%}

  /* ---------- 6 · So geht es weiter (mit der Fusszeile ein Bildschirm) ----------
     Die Überschrift gross, darunter die drei Schritte. Im ersten stehen die
     zwei Laden-Karten gleich gestaltet untereinander, App Store oben
     (Auftrag vom 11.10.2026, auf allen Seiten gleich). */
  .gs-schluss .lead{max-width:36ch;font-size:clamp(18px,1.5vw,21px);margin-top:12px}
  .gs-schritte{margin-top:clamp(20px,3.6vh,36px)}
  .gs-laeden.stores{grid-template-columns:minmax(0,1fr);max-width:340px;gap:10px;margin-top:14px}
  .gs-laeden .store{min-height:58px;padding:8px 16px;justify-content:center}
}
/* Bei wenig Höhe (unter 820 Pixeln Fenster) fällt im letzten Bereich der
   Satz unter der Überschrift weg, wie am Handy bei wenig Platz (die Zahlen
   stehen auch auf der Startseite). So passt er mit der Fusszeile auf einen
   Bildschirm. */
@media(min-width:768px) and (max-height:819px){
  html.blaettern .gs-schluss .lead{display:none}
  html.blaettern .gs-schluss .gs-schritte{margin-top:18px}
}
@supports(height:100svh){
  @media(min-width:768px){html.blaettern{--rz-h:calc(100svh - var(--rz-kopf))}}
}
@media(min-width:900px){
  html.blaettern{--rz-kopf:61px}
  .gs-bau{gap:clamp(18px,2.4vw,34px);margin-top:clamp(28px,5vh,48px)}
  .gs-bau > li > b{font-size:clamp(44px,4.4vw,64px);line-height:.9}
  .gs-bau li{gap:12px;padding-top:20px;border-top-width:3px}
  .gs-schritte{max-width:1100px;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:14px}
  .gs-schritt--haupt{padding:20px 24px 22px 20px;grid-template-columns:40px minmax(0,1fr)}
  .gs-schritt--haupt h3{font-size:22px;padding-top:5px}
  .gs-schritt > a{min-height:80px;padding:14px 24px 14px 20px;grid-template-columns:40px minmax(0,1fr) 14px}
  .gs-schritt__nr{width:40px;height:40px;font-size:19px}
  .gs-schritt__txt h3{font-size:19px}
}
@media(min-width:1024px){
  /* Text links, das Handy rechts, beide mittig im Bildschirm */
  html.blaettern #staende > .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:1fr auto auto auto auto 1fr auto;column-gap:clamp(56px,7vw,130px);align-items:start;align-content:center}
  #staende .eyebrow{grid-column:1;grid-row:2}
  #staende .gs-h2{grid-column:1;grid-row:3}
  .gs-dreh{--gs-h:clamp(380px,calc(var(--rz-h) - 170px),660px);display:contents}
  .gs-dreh__handy{grid-column:2;grid-row:1/7;align-self:center;justify-self:center}
  .gs-dreh__punkte{grid-column:2;grid-row:7;justify-self:center}
  .gs-dreh__text{grid-column:1;grid-row:4;margin-top:clamp(24px,4.4vh,40px);text-align:left}
  .gs-dreh__mehr{display:grid;margin-top:18px;grid-column:1;grid-row:5;max-width:32em}
}
@media(min-width:768px) and (prefers-reduced-motion:reduce){
  .gs-dreh__handy,.gs-dreh__handy img,.gs-dreh__text p,.gs-dreh__mehr > div,.gs-dreh__punkte i{transition:none}
  .gs-dreh__handy:hover,.gs-dreh__handy:active{transform:none}
}