/* =========================================================================
   Fassung H — nach der Referenz nexola.framer.website.

   Was diesen Stil ausmacht und hier übernommen ist: heller neutraler Grund,
   ein sichtbares Vierspalten-Raster aus Haarlinien, das durch die ganze
   Seite läuft, eine einzige Grotesk in sehr grossen und sehr kleinen Graden,
   Inhalte in Rasterzellen gesetzt, dazwischen ein Medienband, das die
   Spalten sprengt. Die Referenz setzt Inter; hier steht Geist, weil Inter
   im Projekt gesperrt ist und Geist dieselbe neutrale Bauart hat.
   ========================================================================= */

:root {
  --font: 'Geist', system-ui, sans-serif;

  --papier: oklch(0.955 0.003 250);
  --tinte: oklch(0.16 0.006 250);
  --grau: oklch(0.53 0.006 250);
  --linie: oklch(0.87 0.004 250);
  /* Kontur für Bedienelemente: hell genug für den Stil, dunkel genug für 3:1 */
  --kontur: oklch(0.60 0.006 250);
  --punkt: oklch(0.55 0.16 35);

  --rand: clamp(16px, 2.2vw, 32px);
  --kopf-h: 76px;

  /* Bewegung, gemessen an nexola.framer.website (VORLAGE.md).
     --feder: der Spring aller Reveals (bounce 0, kritisch gedämpft, ω≈25/s).
     --feder-schwung: der Hover-/Pop-Spring mit ~1.5% Überschwingen.
     --zug: kurze Wechsel und Farben. --zug-wort: Wort-für-Wort-Fade. */
  --feder: cubic-bezier(0.19, 1, 0.22, 1);
  --feder-schwung: cubic-bezier(0.3, 1.15, 0.4, 1);
  --zug: cubic-bezier(0.44, 0, 0.56, 1);
  --zug-wort: cubic-bezier(0.35, 0, 0.65, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --feder: linear(0, 0.173 5%, 0.442 10%, 0.657 15%, 0.801 20%, 0.888 25%,
      0.939 30%, 0.967 35%, 0.983 40%, 0.995 50%, 0.999 60%, 1);
    --feder-schwung: linear(0, 0.027 3%, 0.186 8%, 0.387 13%, 0.582 18%,
      0.74 23%, 0.81 28%, 0.9 33%, 0.96 38%, 0.993 43%, 1.009 48%, 1.015 58%,
      1.011 68%, 1.006 78%, 1.002 88%, 1);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2 { margin: 0; font-weight: 800; letter-spacing: -0.035em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
.dot { color: var(--punkt); }
/* Der smedium-Punkt ist überall rund: eine Scheibe, kein Schriftzeichen. */
.dot--rund {
  display: inline-block;
  width: 0.15em; height: 0.15em;
  border-radius: 50%;
  background: var(--punkt);
  margin-left: 0.06em;
}
/* Auch der Punkt des Fragezeichens: Geist setzt ihn eckig, darum wird der
   Glyphen-Punkt abgeschnitten und eine runde Scheibe darunter gesetzt. */
.frage { position: relative; display: inline-block; }
.frage__zeichen { display: inline-block; clip-path: inset(0 0 0.24em 0); }
.frage::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0.05em;
  width: 0.16em; height: 0.16em;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--punkt);
}

.skip {
  position: fixed; top: -100px; left: 16px; z-index: 90;
  padding: 12px 18px; border-radius: 999px;
  background: var(--tinte); color: var(--papier);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 16px; }

/* --- Kopf ------------------------------------------------------------------- */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--kopf-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--rand);
  background: color-mix(in oklch, var(--papier) 84%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.wortmarke {
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em;
  text-decoration: none;
}
.stand {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; color: var(--grau);
}
.sprache {
  padding: 12px 10px;
  font-weight: 500; text-decoration: none; color: var(--grau);
  transition: color 400ms var(--zug);
}
.sprache:hover { color: var(--tinte); }
.stand a.stand__cta {
  margin-left: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--tinte); color: var(--papier);
  font-weight: 500; text-decoration: none;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.stand a.stand__cta:active { transform: scale(0.97); }

/* Label-Tausch bei Hover, die gemessene Kurve der Referenz: das Label liegt
   doppelt in einer Maske, das sichtbare schiebt nach oben hinaus, das
   Duplikat kommt von unten nach. */
.tausch {
  display: inline-grid;
  overflow: hidden;
  white-space: nowrap;
}
.tausch span { grid-area: 1 / 1; transition: transform 600ms var(--feder-schwung); }
.tausch span:last-child { transform: translateY(110%); }
@media (hover: hover) and (pointer: fine) {
  :is(.stand__cta, .pfeil--weiter, .cta):hover .tausch span:first-child { transform: translateY(-110%); }
  :is(.stand__cta, .pfeil--weiter, .cta):hover .tausch span:last-child { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tausch span { transition: none; } }

/* --- Das Raster ------------------------------------------------------------
   Vier Spalten, die Linien dazwischen sind sichtbar und laufen durch das
   ganze Band. Das Raster ist der Träger des Stils, nicht Dekoration. */
.band { border-bottom: 1px solid var(--linie); scroll-margin-top: var(--kopf-h); }
.raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Die Spaltenlinien liegen im Hintergrund und laufen durch, egal wie viele
     Spalten eine Zelle überspannt. */
  background-image: linear-gradient(to right, var(--linie) 1px, transparent 1px);
  background-size: 25% 100%;
  border-right: 1px solid var(--linie);
}
.zelle {
  padding: clamp(20px, 3vw, 40px) clamp(16px, 2vw, 28px);
  min-width: 0;
}
.zelle--weit { grid-column: span 3; }
.zelle--rechts { display: grid; align-content: space-between; gap: 24px; }

/* --- 1 + 2: Die Bühne ------------------------------------------------------
   Gemessen an nexola.framer.website: die Riesenschrift bleibt im Bild stehen,
   das Medienband steigt mit rund 40 Prozent der Scrollgeschwindigkeit, bis es
   unter dem Kopf steht, und deckt die Schrift dabei zu. Das Medium darin
   startet auf 1.1 und -50px und geht linear auf 1.0 und 0 zurück. */
/* Der Kopf ist fix, und das Schrift-Band klebt darunter. Ohne diesen
   Vorschub kennt der Fluss die Verschiebung nicht und das Fenster rückt
   um die Kopfhöhe zu weit nach oben, mitten in den Titel. */
.buehne { position: relative; padding-top: var(--kopf-h); }

.band--kopf {
  position: sticky; top: var(--kopf-h);
  z-index: 1;
  padding-top: 0;
  border-bottom: 0;
}
.band--kopf .zelle--weit {
  display: grid; align-content: center;
  min-height: calc(48svh - var(--kopf-h));
  padding-bottom: clamp(28px, 4vh, 52px);
}
.riese {
  font-size: clamp(3.25rem, 12.5vw, 12rem);
  line-height: 0.82;
  text-transform: uppercase;
}
.eckdatum { text-align: right; font-size: 0.8125rem; color: var(--grau); }
.eckdatum b {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700; letter-spacing: -0.03em;
  color: var(--tinte);
}

/* Lade-Choreografie mit den Delays der Referenz. Der Vorhang deckt die Seite,
   die weisse Marke steigt zentriert auf (0.8s), fährt bei 1.4s an ihren Platz
   in der Riesenschrift (0.6s), bei 2.1s hebt sich das Schwarz von unten weg
   und die Tinten-Schrift steht darunter schon bereit. Gleichzeitig wächst das
   Fenster in seine Lage (2.1s), die Steuerung springt bei 2.5s auf, der
   Kopf-Knopf bei 2.8s, die Eckdaten fahren vertikal aufeinander zu. */
@keyframes steigt-auf { from { opacity: 0.001; transform: translateY(200px); } }
@keyframes faellt-ein { from { opacity: 0.001; transform: translateY(-200px); } }
@keyframes waechst-hin { from { transform: translateY(100px) scale(0.8); } }
@keyframes springt-auf { from { opacity: 0.001; transform: scale(0.5); } }
@keyframes marke-hin { to { transform: none; } }
@keyframes vorhang-hebt { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

.vorhang {
  position: fixed; inset: 0; z-index: 100;
  background: var(--tinte);
  /* Solange der Vorhang die Seite deckt, fängt er Klicks ab; nach dem Heben
     ist er visibility:hidden und trifft nichts mehr. */
  clip-path: inset(0 0 0 0);
  animation: vorhang-hebt 600ms cubic-bezier(0.75, 0, 0.25, 1) 2100ms both;
}
/* Bei Anker-Einstieg oder wiederhergestellter Scrollposition wäre der Vorhang
   am falschen Ort; app.js schaltet ihn dann ganz weg. */
.ohne-vorhang .vorhang { display: none; }
/* Im Vorhang trägt die Bühnen-Kopie nur die Geometrie, keine Linien. */
.vorhang .raster { background-image: none; border-right: 0; }
.vorhang .band--kopf { position: static; border-bottom: 0; }
.vorhang__marke {
  color: var(--papier);
  font-weight: 800; letter-spacing: -0.035em;
  /* Ruhelage ist die Riesenschrift; die Startlage (zentriert, halb so gross)
     rechnet app.js in die Variablen. */
  transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.5);
  animation: marke-hin 600ms cubic-bezier(0.27, 0, 0.51, 1) 1400ms both;
}
.vorhang__heber {
  display: block;
  animation: steigt-auf 800ms cubic-bezier(0.75, 0, 0.25, 1) both;
}

.eckdatum:first-child { animation: steigt-auf 600ms var(--feder) 2100ms both; }
.eckdatum:last-child { animation: faellt-ein 600ms var(--feder) 2100ms both; }
.rahmen { animation: waechst-hin 1000ms cubic-bezier(0.5, 0, 0.5, 1) 2100ms both; }
.steuerung { animation: springt-auf 600ms var(--feder-schwung) 2500ms both; }
.stand__cta { animation: springt-auf 600ms var(--feder-schwung) 2800ms both; }

@media (prefers-reduced-motion: reduce) {
  .vorhang { display: none; }
  .eckdatum:first-child, .eckdatum:last-child,
  .rahmen, .steuerung, .stand__cta { animation: none; }
}

/* Die Arbeiten: ein Fenster, sechs Websites. Der Besucher blättert selbst,
   das Scrollen der Seite bleibt Scrollen der Seite. Die Riesenschrift darüber
   klebt am Kopf, das Fenster schiebt sich beim Scrollen darüber und deckt sie
   zu; dabei geht die Vergrösserung des Bildes von 1.1 auf 1.0 zurück, wie an
   nexola.framer.website gemessen. */
.werke {
  position: relative; z-index: 2;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
  /* Auslauf in Höhe des Aussage-Hochziehers (300px in app.js): der Zieher
     frisst beim Eintritt diesen Leerraum und nie das Fenster samt Steuerung,
     solange es im Bild steht. */
  padding-bottom: 300px;
}
.rahmen {
  --luft: clamp(14px, 2vw, 26px);
  /* Die Sitzgrösse ist die volle Rasterbreite; am Start ist das Fenster per
     Transform auf 1.1 aufgezoomt und damit etwas breiter als der Bildschirm,
     wie das Medienband der Referenz. Es ist höher als der Bildschirm; die
     Steuerung gleitet darum im Schau-Modus an den unteren Bildschirmrand
     (app.js), und der Auslauf des Werke-Bands wird aus der echten
     Fensterhöhe gerechnet. */
  position: relative;
  display: grid; place-items: start center;
  padding: var(--luft) var(--rand);
  height: calc(100svh - var(--kopf-h) - 32px);
}
/* Volle Rasterbreite; die Höhe folgt aus Leiste plus 16:10-Schirm, dem
   Format der Aufnahmen. Die Blätter liegen als Raster übereinander, so
   bestimmt der Inhalt die Höhe des Fensters. */
.fenster {
  position: relative;
  display: grid;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--papier);
  box-shadow:
    0 0 0 1px oklch(0.78 0.004 250),
    0 2px 8px oklch(0 0 0 / 0.08),
    0 26px 60px oklch(0 0 0 / 0.14);
  touch-action: pan-y;
  /* Oben verankert: der Startzoom wächst nur nach unten und seitlich, nie
     hinauf in die Riesenschrift. */
  transform-origin: 50% 0;
  will-change: transform;
}
.blatt {
  grid-area: 1 / 1;
  background: var(--papier);
  transform: translateX(100%);
  transition: transform 620ms cubic-bezier(0.7, 0, 0.2, 1);
  will-change: transform;
}
.blatt--da { transform: translateX(0); }
.blatt--weg { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) { .blatt { transition: none; } }

.leiste {
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  height: 40px;
  background: oklch(0.925 0.003 250);
  border-bottom: 1px solid oklch(0.85 0.004 250);
}
.leiste__punkte { display: flex; gap: 6px; flex: none; }
.leiste__punkte i { width: 9px; height: 9px; border-radius: 50%; background: oklch(0.79 0.004 250); }
.leiste__adresse {
  flex: 1; max-width: 340px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--papier);
  font-size: 0.75rem; color: var(--grau);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.leiste__notiz { flex: none; font-size: 0.6875rem; color: var(--grau); }

/* Die Höhe kommt aus dem Bildschirm, nicht aus dem Aufnahmeformat: Leiste
   plus Schirm passen am Sitz auf eine Bildschirmhöhe. Die 16:10-Aufnahmen
   füllen die Breite und werden unten beschnitten; oben verankert, damit die
   Kopfzeilen der gezeigten Seiten sichtbar bleiben. */
.blatt__schirm {
  position: relative; overflow: hidden;
  height: calc(100svh - var(--kopf-h) - 32px - 2 * var(--luft) - 40px);
}
.blatt__schirm img, .blatt__schirm video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.blatt__schirm video { opacity: 0; transition: opacity 300ms var(--zug); }
.blatt__schirm video.laeuft { opacity: 1; }

/* Der Blätterer liegt als Leiste unten im Fenster, wie die Steuerung eines
   Players: Name links, Segmente in der Mitte, Pfeile rechts. */
.steuerung {
  position: absolute; z-index: 5;
  left: clamp(12px, 1.6vw, 20px);
  right: clamp(12px, 1.6vw, 20px);
  bottom: clamp(12px, 1.6vw, 18px);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  background: oklch(0.16 0.006 250 / 0.72);
  backdrop-filter: blur(12px);
  color: var(--papier);
  /* Im Schau-Modus schiebt app.js die Leiste an den unteren Bildschirmrand,
     weil das Fenster höher ist als der Bildschirm. */
  transition: transform 300ms var(--zug);
}
.steuerung__name {
  flex: none;
  font-size: 0.875rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 34%;
}
.punkte { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.punkt {
  position: relative;
  flex: 1; max-width: 46px;
  height: 30px;
  border: 0; background: none; cursor: pointer;
  padding: 0;
}
.punkt::after {
  /* feste Höhe statt inset: mit border-box bliebe sonst null Höhe übrig */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: oklch(0.97 0.003 250 / 0.32);
  transition: background 300ms var(--zug);
}
.punkt--da::after { background: var(--papier); }
@media (hover: hover) and (pointer: fine) { .punkt:hover::after { background: oklch(0.97 0.003 250 / 0.6); } }
.punkt:focus-visible { outline: 2px solid var(--papier); outline-offset: 2px; }

.pfeile { flex: none; display: flex; align-items: center; gap: 8px; }
.pfeil {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; min-width: 40px;
  padding: 0 16px;
  justify-content: center;
  border: 1px solid oklch(0.97 0.003 250 / 0.34); border-radius: 999px;
  background: none; color: var(--papier);
  font-family: var(--font); font-size: 0.875rem; font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.pfeil--weiter { background: var(--papier); color: var(--tinte); border-color: var(--papier); }
.pfeil:active { transform: scale(0.97); }
.pfeil[disabled] { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .pfeil:not([disabled]):hover { transform: translateY(-2px); }
}
.pfeil:focus-visible { outline: 2px solid var(--papier); outline-offset: 3px; }

/* --- Bänder ziehen sich hoch -------------------------------------------------
   Wie auf der Referenz gemessen: spätere Bänder starten 200 bis 300px höher,
   liegen über dem Vorgänger und setzen sich linear am Scrollweg in ihre Lage
   (app.js rechnet den Weg). Dafür brauchen sie einen eigenen deckenden Grund. */
.band--zieht { position: relative; background: var(--papier); will-change: transform; }
.band--aussage { z-index: 3; }
.band--kontakt { z-index: 4; }

/* --- 3: Die Aussage ---------------------------------------------------------- */
.marke {
  margin-bottom: 18px;
  font-size: 0.75rem; font-weight: 500; color: var(--grau);
}
.aussage {
  font-size: clamp(1.75rem, 4.6vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
  max-width: 18ch;
}
.aussage--klein { font-size: clamp(1.5rem, 3vw, 2.5rem); max-width: none; }
.notiz {
  font-size: 0.9375rem; color: var(--grau);
  max-width: 34ch;
}
/* Hinweis am Seitenende oder beim Verlassen: die Knappheit wohnt nur hier. */
.hinweis {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  max-width: 380px;
  padding: 22px 24px;
  border-radius: 12px;
  background: var(--tinte); color: var(--papier);
  box-shadow: 0 4px 14px oklch(0 0 0 / 0.12), 0 22px 60px oklch(0 0 0 / 0.28);
  animation: hinweis-auf 600ms var(--feder);
}
@keyframes hinweis-auf { from { opacity: 0.001; transform: translateY(16px); } }
.hinweis__zu {
  position: absolute; top: 2px; right: 2px;
  width: 44px; height: 44px;
  border: 0; background: none; color: var(--papier);
  font-size: 1.25rem; line-height: 1;
  cursor: pointer;
}
.hinweis__titel { font-weight: 700; font-size: 1.0625rem; margin-bottom: 6px; padding-right: 28px; }
.hinweis__text { font-size: 0.9375rem; color: color-mix(in oklch, var(--papier) 82%, var(--tinte)); margin-bottom: 16px; }
.hinweis .cta { background: var(--papier); color: var(--tinte); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .hinweis { animation: none; } }

/* --- 4: Drei Zahlen ---------------------------------------------------------- */
.band--zahlen .raster { grid-template-columns: repeat(4, 1fr); }
.zahl {
  font-size: 0.8125rem; color: var(--grau);
}
.zahl b {
  display: block;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 800; letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--tinte);
}

/* --- 5: Wer --------------------------------------------------------------------- */
.zelle--bild { padding: 0; display: grid; }
.zelle--bild img { width: 100%; height: 100%; object-fit: cover; }
.band--ich .zelle--weit { display: grid; align-content: center; }
.leistungen {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  margin-top: 22px;
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  font-weight: 600; letter-spacing: -0.02em;
}

/* --- 6: Kontakt ------------------------------------------------------------------ */
.band--kontakt .zelle--weit { display: grid; align-content: center; }
.formular { display: grid; gap: 14px; }
.formular label {
  display: grid; gap: 6px;
  font-size: 0.8125rem; font-weight: 500; color: var(--grau);
}
.formular input, .formular textarea {
  width: 100%; min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--kontur);
  border-radius: 0;
  background: transparent;
  color: var(--tinte);
  font-family: var(--font); font-size: 1rem;
  resize: vertical;
  transition: border-color 180ms ease;
}
.formular input:hover, .formular textarea:hover { border-color: var(--grau); }
.formular input:focus-visible, .formular textarea:focus-visible {
  outline: none; border-color: var(--tinte);
}
.feld--fehlt { border-color: var(--punkt); }
.cta {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 24px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--tinte); color: var(--papier);
  font-family: var(--font); font-size: 0.9375rem; font-weight: 500;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.cta:active { transform: scale(0.97); }
.cta[disabled] { opacity: 0.55; cursor: progress; transform: none; }
@media (hover: hover) and (pointer: fine) { .cta:hover { transform: translateY(-2px); } }
.formular__fehler { font-size: 0.875rem; font-weight: 600; color: var(--punkt); }

/* --- Fuss ------------------------------------------------------------------------ */
.fuss {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 22px var(--rand);
  font-size: 0.8125rem; color: var(--grau);
}
.fuss a { margin-left: 20px; text-underline-offset: 3px; transition: color 400ms var(--zug); }
@media (hover: hover) and (pointer: fine) { .fuss a:hover { color: var(--tinte); } }

/* --- Auftritt ---------------------------------------------------------------
   Alle Reveals laufen auf dem Arbeitspferd-Spring der Referenz (bounce 0,
   duration 1, visuell nach ~0.35s ruhig): Standard y 20→0, klein y 10→0,
   Bilder nur Fade, grosse Ziffern scale 0.3→1, Formularzeilen x −550→0,
   grosse Texte Wort für Wort mit 50ms Versatz. */
.hebt { opacity: 0.001; transform: translateY(20px); transition: opacity 600ms var(--feder), transform 600ms var(--feder); }
.hebt--klein { transform: translateY(10px); }
.hebt--fade { transform: none; }
.hebt.da { opacity: 1; transform: none; }

.zahl.hebt b { opacity: 0.001; transform: scale(0.3); transform-origin: 0 100%; transition: opacity 600ms var(--feder), transform 600ms var(--feder); }
.zahl.hebt.da b { opacity: 1; transform: none; }

.schub { opacity: 0.001; transform: translateX(-550px); transition: opacity 600ms var(--feder), transform 600ms var(--feder); }
.schub.da { opacity: 1; transform: none; }

.wortzug .wort { opacity: 0.001; transition: opacity 600ms var(--zug-wort); transition-delay: calc(var(--wi) * 50ms); }
.wortzug.da .wort { opacity: 1; }

/* --- Schmal --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .raster { grid-template-columns: repeat(2, 1fr); background-size: 50% 100%; }
  .zelle--rechts { border-top: 1px solid var(--linie); }
  /* Schmal: der Titel braucht keine Mindesthöhe, und das Fenster sitzt oben
     im Bühnenbereich, sonst klafft darüber eine grosse Leere. */
  .band--kopf .zelle--weit { min-height: auto; }
  .rahmen { place-items: start center; }
  .fenster { aspect-ratio: 4 / 3.4; }
  /* Schmal: Format der neuen 2:1-Aufnahmen statt Bildschirmhöhe */
  .blatt__schirm { height: auto; aspect-ratio: 2 / 1; }
  .leiste__notiz { display: none; }
  /* schmal: der Rahmen ist nur so hoch wie das Fenster, sonst bleibt
     darunter eine grosse Leere stehen */
  .rahmen { padding: 18px 10px; height: auto; }
  .fenster { width: 100%; }
  .steuerung__name { display: none; }
  .pfeil__text { display: none; }
  .pfeil { padding: 0 12px; }
  .steuerung { padding-left: 12px; }
  .zelle--bild { min-height: 46svh; }
  .stand__cta { margin-left: 0; }
  .hinweis { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .band--zahlen .raster { grid-template-columns: 1fr; background-image: none; }
  .band--zahlen .zelle { border-bottom: 1px solid var(--linie); }
  .band--zahlen .zelle:last-child { border-bottom: 0; }
  .fuss { flex-direction: column; align-items: flex-start; }
  .fuss a { margin: 0 20px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hebt, .schub, .zahl.hebt b, .wortzug .wort { opacity: 1; transform: none; transition: none; }
  .blatt__schirm video { display: none; }
}