/* ============================================================================
   teil-zzzzzz-gleitsicht.css — die Gleitsicht-Szene (vorlagen/teil-gleitsicht.php).

   Christopher, 23.10.2026: „Wenn irgendwas blockiert und Sticky Scroll veraltet
   ist, verwende das nicht. Ja, aber mach irgendwie neue moderne Transformationen."
   Darum: KEIN position:sticky, kein hoher Scroll-Behaelter, keine Aenderung an
   overflow. .blatt (grund.css, overflow-x:hidden) und .seitenblatt (bau.css,
   overflow:hidden) bleiben, wie sie sind — alles hier laeuft auch darin.
   Laedt nur in der Vorschau (?bv-neu=1), siehe functions.php, Teilstil-Schleife.

   EIN MARKUP, ZWEI ZUSTAENDE
   · Vorgabe = Endzustand: alle Variablen 1, nichts verschoben, nichts
     durchsichtig. So sehen es Besucher ohne JavaScript, mit „Bewegung
     reduzieren" und Suchmaschinen.
   · .gsz-an (gesetzt von der Weiche im Abschnitt): Anfangszustand 0. Dann
     schreibt gleitsicht-szene.js ueber BVTakt je Karte drei Werte 0…1:
       --gsz-g  das Glas dreht aus der Schraege in die Front, die Karte steigt
       --gsz-z  die Zone der Karte fuellt sich
       --gsz-x  der Text gleitet ein
     Einstiegsglas: --gsz-dreh, --gsz-hub (−1…1, Parallaxe), --gsz-z1/-z2/-z3,
     --gsz-rand, --gsz-kreuz, --gsz-l1/-l2/-l3/-lr (Schilder). Kopf: --gsz-k.
   Bewegt wird NUR transform und opacity. Die Klasse aendert keine Groesse und
   keine Lage im Fluss — darum kein Layout-Sprung (CLS 0).

   Nur Token aus dem Vertrag (.quelle/VERTRAG.md), keine neue Schrift, kein
   !important, kein Filter, kein backdrop-filter (teuer waehrend der Drehung).
   ========================================================================= */

.gsz{
  /* Endzustand — ohne JS, bei reduzierter Bewegung, nach der Verwandlung. */
  --gsz-k:1;
  --gsz-g:1; --gsz-z:1; --gsz-x:1;
  --gsz-dreh:1; --gsz-hub:0;
  --gsz-z1:1; --gsz-z2:1; --gsz-z3:1; --gsz-rand:1; --gsz-kreuz:1;
  --gsz-l1:1; --gsz-l2:1; --gsz-l3:1; --gsz-lr:1;

  /* Wege der Verwandlung. Telefon: kurz. Ab 900 px weiter (unten). */
  --gsz-weg:24px;          /* so weit steigt eine Karte */
  --gsz-quer:0px;          /* seitlicher Einzug, nur im Zickzack ab 900 px */
  --gsz-dy:16deg;          /* kleines Glas: Drehung um die Hochachse */
  --gsz-dx:7deg;           /* kleines Glas: Neigung */
  --gsz-hx:22deg;          /* Einstiegsglas: Neigung nach hinten */
  --gsz-hy:-6deg;          /* Einstiegsglas: Drehung */
  --gsz-hubweg:10px;       /* Einstiegsglas: Hub (Parallaxe) */
}
@media (min-width:900px){
  .gsz{
    --gsz-weg:44px; --gsz-quer:calc(var(--gasse) * .6);
    --gsz-dy:26deg; --gsz-dx:10deg;
    --gsz-hx:30deg; --gsz-hy:-9deg; --gsz-hubweg:24px;
  }
}
/* Im Raster der Kurzfassung steigen die Karten nur auf, ohne seitlichen Einzug. */
.gsz.gsz-kurz{ --gsz-quer:0px }
.gsz .gsz-links { --gsz-seite:-1 }
.gsz .gsz-rechts{ --gsz-seite:1 }

/* Anfangszustand, solange die Szene laeuft. Das Skript ueberschreibt ihn je
   Element mit seinem Fortschritt (Inline-Variable). */
.gsz-an .gsz-kopf{ --gsz-k:0 }
.gsz-an .gsz-karte{ --gsz-g:0; --gsz-z:0; --gsz-x:0 }
.gsz-an .gsz-held{
  --gsz-dreh:0; --gsz-hub:-1;
  --gsz-z1:0; --gsz-z2:0; --gsz-z3:0; --gsz-rand:0; --gsz-kreuz:0;
  --gsz-l1:0; --gsz-l2:0; --gsz-l3:0; --gsz-lr:0;
}
/* Tastatur: Bekommt ein Link in einer Karte den Fokus, steht die Karte sofort
   fertig da — gleich, wo sie gerade im Bild ist. */
.gsz-an .gsz-karte:focus-within > .gsz-karte-innen{ --gsz-g:1; --gsz-z:1; --gsz-x:1 }


/* ── Kopf ─────────────────────────────────────────────────────────────── */
.gsz .gsz-kopf{
  max-width:62ch; margin:0 auto clamp(1.8rem,4vw,3.4rem); text-align:center;
}
.gsz .gsz-kopf .marke{ justify-content:center }
.gsz .gsz-kopf h2{ margin:0 }
.gsz .gsz-kopf p{
  margin:1.1rem auto 0; max-width:58ch;
  font-size:clamp(1rem,1.1vw,1.1rem); line-height:1.65; color:var(--text-leise);
}
/* Bewegung nur mit .gsz-an — ohne die Klasse traegt nichts hier ein transform. */
.gsz-an .gsz-kopf > *{
  opacity:var(--gsz-ki);
  transform:translateY(calc((1 - var(--gsz-ki)) * 26px));
}
.gsz-an .gsz-kopf > :nth-child(1){ --gsz-ki:clamp(0, calc(var(--gsz-k) * 1.4), 1) }
.gsz-an .gsz-kopf > :nth-child(2){ --gsz-ki:clamp(0, calc(var(--gsz-k) * 1.4 - .2), 1) }
.gsz-an .gsz-kopf > :nth-child(3){ --gsz-ki:clamp(0, calc(var(--gsz-k) * 1.4 - .4), 1) }


/* ── Glas und Brille: gemeinsame Zeichnung ────────────────────────────── */
.gsz-defs{ position:absolute; width:0; height:0; overflow:hidden }
.gsz-fassung{ fill:none; stroke:var(--blau); stroke-width:9; stroke-linejoin:round }
.gsz-steg, .gsz-buegel{ fill:none; stroke:var(--blau); stroke-width:7; stroke-linecap:round }
.gsz-backe{ fill:var(--blau) }
.gsz-pad-arm{ fill:none; stroke:var(--blau); stroke-width:2.5; stroke-linecap:round; opacity:.7 }
.gsz-pad{ fill:var(--weiss); stroke:var(--blau); stroke-width:2; opacity:.9 }
.gsz-glasgrund{ fill:var(--weiss); opacity:.74 }
.gsz-glanz{ opacity:.5 }
.gsz-zone, .gsz-kreuz, .gsz-kreuzlinie{ transform-box:fill-box }
/* Der unscharfe Rand — wie auf /augenoptik/: Flaeche in Grundfarbe, schraffiert.
   Kein Weichzeichner-Filter (teuer auf dem Telefon, in Safari anders). */
.gsz-unscharf{ fill:var(--grund); opacity:.88 }
.gsz-schraffur{ stroke:none }
.gsz-strich{ stroke:var(--text-leise); stroke-width:1.7; opacity:.55 }
.gsz-kreuz{
  fill:none; stroke:var(--blau); stroke-width:3; stroke-linecap:round;
  transform-origin:50% 50%;
}
.gsz-kreuzlinie{
  fill:none; stroke:var(--blau); stroke-width:1.6; stroke-dasharray:5 7;
  transform-origin:50% 50%;
}


/* ── Das Einstiegsglas (nur Langfassung) ──────────────────────────────── */
.gsz .gsz-held{
  margin:0 auto clamp(2.4rem,6vw,5rem); max-width:940px; min-width:0;
}
/* Ruhender Rahmen: Licht dahinter und Schatten darunter bleiben liegen, das
   Glas hebt sich davon ab. */
.gsz .gsz-held-dreh{ position:relative; isolation:isolate }
.gsz .gsz-held-dreh::before{
  content:""; position:absolute; inset:-12% 6%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--weiss) 92%, transparent),
    color-mix(in srgb, var(--blau-zart) 40%, transparent) 62%, transparent);
}
.gsz .gsz-held-dreh::after{
  content:""; position:absolute; left:16%; right:16%; bottom:-7%; height:12%; z-index:-1;
  pointer-events:none; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--blau) 16%, transparent), transparent);
  opacity:calc((.35 + .65 * var(--gsz-dreh)) * (.8 - .2 * var(--gsz-hub)));
  transform:scaleX(calc(.9 - .1 * var(--gsz-hub)));
}
.gsz .gsz-held-glas{ position:relative; aspect-ratio:728 / 270 }
.gsz-an .gsz-held-glas{
  transform-origin:50% 62%;
  transform:perspective(1400px)
    translateY(calc(var(--gsz-hub) * var(--gsz-hubweg) * -1))
    rotateX(calc((1 - var(--gsz-dreh)) * var(--gsz-hx)))
    rotateY(calc((1 - var(--gsz-dreh)) * var(--gsz-hy)))
    scale(calc(.9 + .1 * var(--gsz-dreh)));
  opacity:calc(.3 + .7 * var(--gsz-dreh));
}
.gsz .gsz-brille{ display:block; width:100%; height:auto; overflow:visible }

/* Zonen bauen sich nacheinander auf: stufenlos, Verlaeufe statt Kanten. */
.gsz .gsz-held .gsz-z-ferne{
  opacity:calc(.1 + .9 * var(--gsz-z1));
  transform-origin:50% 0; transform:scaleY(calc(.84 + .16 * var(--gsz-z1)));
}
.gsz .gsz-held .gsz-z-kanal{
  opacity:calc(.08 + .92 * var(--gsz-z2));
  transform-origin:50% 0; transform:scaleY(calc(.25 + .75 * var(--gsz-z2)));
}
.gsz .gsz-held .gsz-z-nah{
  opacity:calc(.08 + .92 * var(--gsz-z3));
  transform-origin:50% 30%; transform:scale(calc(.7 + .3 * var(--gsz-z3)));
}
.gsz .gsz-held .gsz-flanke{ opacity:var(--gsz-rand) }
.gsz .gsz-held .gsz-flanke-aussen{ transform:translateX(calc((1 - var(--gsz-rand)) * -26px)) }
.gsz .gsz-held .gsz-flanke-innen{ transform:translateX(calc((1 - var(--gsz-rand)) * 26px)) }
.gsz .gsz-held .gsz-kreuz{ opacity:var(--gsz-kreuz) }
.gsz .gsz-held .gsz-kreuzlinie{ opacity:calc(.6 * var(--gsz-kreuz)); transform:scaleX(var(--gsz-kreuz)) }

/* Schilder: HTML, damit sie auf jedem Geraet lesbar bleiben. Lage in % des
   Bildes (viewBox -20 30 728 270), linkes Glas = Glaskoordinate − 18. */
.gsz .gsz-schild{
  position:absolute; z-index:1;
  display:inline-flex; align-items:baseline; gap:.35em; white-space:nowrap;
  padding:.24em .7em; border-radius:var(--r-rund);
  background:color-mix(in srgb, var(--weiss) 88%, transparent);
  box-shadow:0 2px 10px color-mix(in srgb, var(--blau) 12%, transparent);
  font-size:.7rem; line-height:1.3; color:var(--blau);
  pointer-events:none;
  transform:translate(-50%, calc(-50% + (1 - var(--gsz-li)) * 10px));
  opacity:var(--gsz-li);
}
/* Zwischen und Naehe stehen LINKS neben ihrer Zone (rechtsbuendig am Ankerpunkt),
   damit sie den schmalen Kanal nicht verdecken. */
.gsz .gsz-s-kanal, .gsz .gsz-s-nah{
  transform:translate(-100%, calc(-50% + (1 - var(--gsz-li)) * 10px));
}
.gsz .gsz-schild b{ font-weight:800 }
.gsz .gsz-schild i{ font-style:normal; color:var(--text-leise); font-weight:600 }
.gsz .gsz-s-ferne{ left:27.2%; top:25.2%; --gsz-li:var(--gsz-l1) }
.gsz .gsz-s-kanal{ left:23.9%; top:60.7%; --gsz-li:var(--gsz-l2) }
.gsz .gsz-s-nah  { left:21.7%; top:85.2%; --gsz-li:var(--gsz-l3) }
.gsz .gsz-s-rand { left:87.1%; top:77%;   --gsz-li:var(--gsz-lr) }
/* Telefon: nur die drei Namen, sonst draengt es sich im schmalen Glas. Ab
   640 px mit Entfernung und Randhinweis. (Statisch je Breite, nicht bewegt.) */
.gsz .gsz-schild i, .gsz .gsz-s-rand{ display:none }
@media (min-width:640px){
  .gsz .gsz-schild{ font-size:.76rem }
  .gsz .gsz-schild i{ display:inline }
  .gsz .gsz-s-rand{ display:inline-flex }
}

/* Die Entfernungsleiste: Massstab aus /augenoptik/ (bv_glas_leiste). */
.gsz .gsz-leiste{ display:block; width:min(100%,26rem); height:auto; margin:.9rem auto 0; overflow:visible }
.gsz .gsz-leiste .gl-leiste-wort,
.gsz .gsz-mini-leiste .gl-leiste-wort{ font-size:15px; fill:var(--text-leise) }
.gsz .gsz-leiste .gl-leiste-feld:nth-of-type(1){ fill:var(--gold-tief); opacity:calc(.16 + .84 * var(--gsz-z3)) }
.gsz .gsz-leiste .gl-leiste-feld:nth-of-type(2){ fill:var(--gold);      opacity:calc(.16 + .84 * var(--gsz-z2)) }
.gsz .gsz-leiste .gl-leiste-feld:nth-of-type(3){ fill:var(--blau-hell); opacity:calc(.16 + .84 * var(--gsz-z1)) }

.gsz .gsz-hinweis{
  margin:.55rem auto 0; max-width:44ch; text-align:center;
  font-size:.74rem; line-height:1.45; color:var(--text-leise);
}


/* ── Die Karten ───────────────────────────────────────────────────────── */
.gsz .gsz-karten{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1.1rem,3vw,2.6rem);
}
.gsz .gsz-karte{ margin:0; padding:0; min-width:0 }
/* Die Karte selbst (li) bleibt unbewegt — an ihr misst BVTakt. Bewegt wird die
   Flaeche darin. */
.gsz .gsz-karte-innen{
  position:relative; height:100%;
  padding:clamp(1rem,2.6vw,2.2rem);
  border-radius:var(--r-l);
  background:var(--glas);
  border:1px solid var(--glas-rand);
  box-shadow:var(--glas-schatten);
}
.gsz-an .gsz-karte-innen{
  transform:
    translate3d(calc((1 - var(--gsz-g)) * var(--gsz-quer) * var(--gsz-seite, 0)),
                calc((1 - var(--gsz-g)) * var(--gsz-weg)), 0)
    scale(calc(.97 + .03 * var(--gsz-g)));
  opacity:clamp(0, calc(.08 + var(--gsz-g) * 1.7), 1);
}

/* Die Glaskachel: ein heller Grund, auf dem das Glas steht. */
.gsz .gsz-mini{
  border-radius:var(--r-m);
  background:radial-gradient(130% 110% at 50% 0%, var(--weiss) 0 38%, var(--blau-zart) 100%);
  padding:clamp(.9rem,2.6vw,1.8rem) clamp(.7rem,2.2vw,1.6rem) clamp(.8rem,2.2vw,1.4rem);
  min-width:0;
}
.gsz .gsz-mini-dreh{ position:relative; max-width:300px; margin:0 auto }
/* Schatten unter dem Glas: bleibt liegen und zieht sich zusammen, wenn das
   Glas sich aufrichtet. */
.gsz .gsz-mini-dreh::before{
  content:""; position:absolute; left:18%; right:18%; bottom:-3%; height:12%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--blau) 18%, transparent), transparent);
  opacity:var(--gsz-g);
  transform:scaleX(calc(1.25 - .25 * var(--gsz-g)));
}
.gsz .gsz-mini-svg{ position:relative; display:block; width:100%; height:auto; overflow:visible }
.gsz-an .gsz-mini-svg{
  transform-origin:50% 55%;
  transform:perspective(900px)
    rotateY(calc((1 - var(--gsz-g)) * var(--gsz-dy) * var(--gsz-seite, -1)))
    rotateX(calc((1 - var(--gsz-g)) * var(--gsz-dx)))
    scale(calc(.92 + .08 * var(--gsz-g)));
}
/* Ein Lichtstreif zieht ueber das Glas, waehrend es sich dreht. */
.gsz-an .gsz-karte .gsz-glanz{
  transform:translateX(calc((1 - var(--gsz-g)) * -90px));
  opacity:calc(.5 + .3 * (1 - var(--gsz-g)));
}
.gsz .gsz-mini-leiste{ display:block; width:100%; max-width:300px; height:auto; margin:.7rem auto 0; overflow:visible }
.gsz .gsz-mini-leiste .gl-leiste-feld{
  transform-box:fill-box; transform-origin:50% 50%;
  transform:scaleX(calc(.2 + .8 * var(--gsz-z)));
  opacity:calc(.25 + .75 * var(--gsz-z));
}
.gsz .gsz-k1 .gl-leiste-feld{ fill:var(--blau-hell) }
.gsz .gsz-k2 .gl-leiste-feld{ fill:var(--gold) }
.gsz .gsz-k3 .gl-leiste-feld{ fill:var(--gold-tief) }

/* Zonen im kleinen Glas: Grund leise, die Zone der Karte tritt hervor. */
.gsz .gsz-karte .gsz-zone{ opacity:.13 }
.gsz .gsz-karte .gsz-flanke{ opacity:0 }
.gsz .gsz-karte .gsz-kreuz{ opacity:0 }

.gsz .gsz-k1 .gsz-z-ferne{
  opacity:calc(.13 + .87 * var(--gsz-z));
  transform-origin:50% 0; transform:scaleY(calc(.6 + .4 * var(--gsz-z)));
}
.gsz .gsz-k2 .gsz-z-kanal{
  opacity:calc(.13 + .87 * var(--gsz-z));
  transform-origin:50% 0; transform:scaleY(calc(.2 + .8 * var(--gsz-z)));
}
.gsz .gsz-k3 .gsz-z-nah{
  opacity:calc(.13 + .87 * var(--gsz-z));
  transform-origin:50% 35%; transform:scale(calc(.45 + .55 * var(--gsz-z)));
}
/* Karte 4: alle Zonen halb, der Rand schiebt sich von aussen herein. */
.gsz .gsz-k4 .gsz-zone{ opacity:.42 }
.gsz .gsz-k4 .gsz-flanke{ opacity:var(--gsz-z) }
.gsz .gsz-k4 .gsz-flanke-aussen{ transform:translateX(calc((1 - var(--gsz-z)) * -44px)) }
.gsz .gsz-k4 .gsz-flanke-innen{ transform:translateX(calc((1 - var(--gsz-z)) * 44px)) }
/* Karte 5: das ganze Glas, das Zentrierkreuz dreht sich ein, die Linie auf
   Pupillenhoehe zieht sich durch. */
.gsz .gsz-k5 .gsz-zone{ opacity:calc(.42 + .58 * var(--gsz-z)) }
.gsz .gsz-k5 .gsz-flanke{ opacity:.85 }
.gsz .gsz-k5 .gsz-kreuz{
  opacity:var(--gsz-z);
  transform:rotate(calc((1 - var(--gsz-z)) * 90deg)) scale(calc(1.9 - .9 * var(--gsz-z)));
}
.gsz .gsz-k5 .gsz-kreuzlinie{ opacity:calc(.6 * var(--gsz-z)); transform:scaleX(var(--gsz-z)) }

/* Text der Karte: Zeile fuer Zeile, leicht versetzt. */
.gsz .gsz-karte-text{ min-width:0 }
.gsz-an .gsz-karte-kopf{ --gsz-ti:clamp(0, calc(var(--gsz-x) * 1.3), 1) }
.gsz-an .gsz-karte h3{ --gsz-ti:clamp(0, calc(var(--gsz-x) * 1.3 - .15), 1) }
.gsz-an .gsz-absatz, .gsz-an .gsz-wege{ --gsz-ti:clamp(0, calc(var(--gsz-x) * 1.3 - .3), 1) }
.gsz-an .gsz-karte-kopf, .gsz-an .gsz-karte h3, .gsz-an .gsz-absatz, .gsz-an .gsz-wege{
  opacity:var(--gsz-ti);
  transform:translateY(calc((1 - var(--gsz-ti)) * 18px));
}
.gsz .gsz-karte-kopf{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem; margin:0 0 .55rem;
}
.gsz .gsz-nr{
  font-size:.74rem; font-weight:850; letter-spacing:.16em; color:var(--gold-tief);
}
.gsz .gsz-mass{
  display:inline-flex; align-items:center; padding:.2em .75em; border-radius:var(--r-rund);
  background:var(--blau-zart); color:var(--blau);
  font-size:.74rem; font-weight:800; letter-spacing:.01em;
}
.gsz .gsz-karte h3{
  margin:0 0 .55rem;
  font-size:clamp(1.25rem, 1rem + 1.2vw, 2rem); line-height:1.12; letter-spacing:-.022em;
}
.gsz .gsz-absatz{
  margin:0 0 .6em; max-width:46ch;
  font-size:clamp(.98rem, .92rem + .25vw, 1.08rem); line-height:1.6; color:var(--text-leise);
}
.gsz .gsz-absatz:last-child{ margin-bottom:0 }
.gsz .gsz-wege{
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.3rem; margin-top:1.1rem;
}
.gsz .gsz-wege .knopf{ color:var(--fg) }
.gsz .gsz-mehr{
  color:var(--blau); font-weight:800; text-decoration:none; white-space:nowrap;
  border-bottom:1.5px solid color-mix(in srgb, var(--blau) 30%, transparent);
  transition:border-color .25s;
}
.gsz .gsz-mehr:hover{ border-bottom-color:var(--blau) }
.gsz .gsz-mehr:focus-visible, .gsz .gsz-wege .knopf:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px;
}


/* ── Langfassung: Telefon eine Spalte, Glas ueber dem Text ─────────────── */
.gsz-lang .gsz-karte-innen{ display:grid; gap:clamp(1rem,2.6vw,1.6rem) }
.gsz-lang .gsz-mini-dreh{ max-width:220px }
.gsz-lang .gsz-mini-leiste{ max-width:260px }

/* Ab 640 px: Glas und Text nebeneinander, abwechselnd links und rechts. */
@media (min-width:640px){
  .gsz-lang .gsz-karte-innen{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center;
    gap:clamp(1.2rem,3.4vw,3.2rem);
  }
  .gsz-lang .gsz-rechts .gsz-mini{ order:2 }
  .gsz-lang .gsz-mini-dreh{ max-width:300px }
}
/* Ab 900 px: Zickzack — jede Karte schmaler als die Bahn, versetzt an den
   Rand, an dem ihr Glas steht. Die letzte steht in der Mitte. */
@media (min-width:900px){
  .gsz-lang .gsz-karte{ width:min(100%, 940px) }
  .gsz-lang .gsz-links { justify-self:start }
  .gsz-lang .gsz-rechts{ justify-self:end }
  .gsz-lang .gsz-k5{ width:min(100%, 1080px); justify-self:center }
  .gsz-lang .gsz-karte-innen{
    grid-template-columns:minmax(0, 23rem) minmax(0, 1fr);
    border-radius:var(--r-xl);
  }
  .gsz-lang .gsz-rechts .gsz-karte-innen{ grid-template-columns:minmax(0, 1fr) minmax(0, 23rem) }
  .gsz-lang .gsz-mini{ border-radius:var(--r-l) }
}


/* ── Kurzfassung (Filialseiten): kompakte Karten ──────────────────────── */
.gsz-kurz .gsz-karten{ gap:clamp(.8rem,2vw,1.4rem) }
/* Telefon und Tablet: das Glas klein links neben Nummer und Titel, der Absatz
   darunter ueber die ganze Breite. (.gsz-karte-text gibt seine Kinder dafuer
   ans Raster ab — ein schlichtes div ohne eigene Bedeutung.) */
.gsz-kurz .gsz-karte-innen{
  display:grid; grid-template-columns:clamp(96px, 30%, 168px) minmax(0,1fr);
  column-gap:.95rem; align-items:start;
  padding:clamp(.9rem,2.2vw,1.5rem);
}
.gsz-kurz .gsz-karte-text{ display:contents }
.gsz-kurz .gsz-mini{ grid-column:1; grid-row:1 / span 2; align-self:center; padding:.6rem .5rem .55rem }
.gsz-kurz .gsz-karte-kopf{ grid-column:2; grid-row:1; align-self:end }
.gsz-kurz .gsz-karte h3{ grid-column:2; grid-row:2; margin-bottom:0 }
.gsz-kurz .gsz-absatz, .gsz-kurz .gsz-wege{ grid-column:1 / -1 }
.gsz-kurz .gsz-absatz{ margin-top:.8rem }
.gsz-kurz .gsz-karte h3{ font-size:clamp(1.1rem, .98rem + .5vw, 1.4rem) }
.gsz-kurz .gsz-absatz{ font-size:clamp(.94rem, .9rem + .15vw, 1rem); line-height:1.55 }
.gsz-kurz .gsz-hinweis{ margin-top:1.1rem }

/* Ab 900 px ein Raster: drei Zonen in einer Reihe, darunter Rand und
   Zentrierung breiter. Die Karten einer Reihe verwandeln sich gestaffelt
   (Versatz rechnet gleitsicht-szene.js). */
@media (min-width:900px){
  .gsz-kurz .gsz-karten{ grid-template-columns:repeat(6, minmax(0,1fr)) }
  .gsz-kurz .gsz-karte{ grid-column:span 2 }
  .gsz-kurz .gsz-k4, .gsz-kurz .gsz-k5{ grid-column:span 3 }
  /* Drei Zonenkarten: Glas oben, Text darunter. */
  .gsz-kurz .gsz-karte-innen{ display:block }
  .gsz-kurz .gsz-mini{
    margin:0 0 1.1rem;
    padding:clamp(.9rem,1.6vw,1.3rem) clamp(.7rem,1.4vw,1.1rem) clamp(.8rem,1.4vw,1.1rem);
  }
  .gsz-kurz .gsz-mini-dreh{ max-width:230px }
  .gsz-kurz .gsz-karte-kopf{ margin-bottom:.55rem }
  .gsz-kurz .gsz-karte h3{ margin-bottom:.55rem }
  .gsz-kurz .gsz-absatz{ margin-top:0 }
  /* Rand und Zentrierung: breiter, Glas links neben dem Text. */
  .gsz-kurz .gsz-k4 .gsz-karte-innen, .gsz-kurz .gsz-k5 .gsz-karte-innen{
    display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    align-items:center; gap:clamp(1rem,2vw,1.6rem);
  }
  .gsz-kurz .gsz-k4 .gsz-karte-text, .gsz-kurz .gsz-k5 .gsz-karte-text{ display:block }
  .gsz-kurz .gsz-k4 .gsz-mini, .gsz-kurz .gsz-k5 .gsz-mini{ margin:0; grid-row:auto }
}


/* Bewegung reduziert: auch wenn eine Klasse oder ein Wert stehen geblieben
   waere — Endzustand. (Die Weiche setzt gsz-an dann gar nicht erst.) */
@media (prefers-reduced-motion:reduce){
  .gsz .gsz-kopf, .gsz .gsz-karte-innen, .gsz .gsz-held-dreh, .gsz .gsz-leiste{
    --gsz-k:1; --gsz-g:1; --gsz-z:1; --gsz-x:1; --gsz-dreh:1; --gsz-hub:0;
    --gsz-z1:1; --gsz-z2:1; --gsz-z3:1; --gsz-rand:1; --gsz-kreuz:1;
    --gsz-l1:1; --gsz-l2:1; --gsz-l3:1; --gsz-lr:1;
  }
}