/* finanzfride.ch – Farben aus brand/farben/tonleiter.md, Schrift GT Maru (Web-Lizenz nur für finanzfride.ch) */

@font-face {
  font-family: "GT Maru Mega";
  src: url("/assets/fonts/GT-Maru-Mega-Midi.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Maru";
  src: url("/assets/fonts/GT-Maru-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Kernfarben */
  --gruen: #152915;        /* Dunkelgrün Kern: Schrift, dunkle Fläche */
  --wald: #46521F;         /* Waldgrün Kern: zweite Textebene auf Creme */
  --braun: #613C13;        /* Braun Kern: zweite Textebene auf Creme */
  --gold: #CA9220;         /* Gold Kern: Spirale, Akzent, nie Lesetext auf Creme */
  --creme: #E1C493;        /* Creme Kern: Hauptfläche */
  /* Töne der Leiter (Tiefe, Fläche hinter Fläche, zweite Ebene) */
  --gruen-hell2: #384A38;  /* Fragen-Band: Linien */
  --gruen-tief: #0A140A;   /* zwischen Dunkelgrün tief 1 und tief 2: Fläche der drei Fragen (Andrea 8.10.: «B») */
  --gold-hell1: #DBA84C;   /* Fläche «Zum Schluss» */
  --creme-hell2: #FAE2B9;  /* Licht, Rahmen ums Video */
  --creme-tief2: #B39C76;  /* zweite Textebene auf Dunkelgrün */
  /* Schatten: Töne derselben Familie wie der Grund */
  --schatten-creme: rgb(76 44 6 / 0.34);   /* Braun tief 1 */
  --schatten-gruen: rgb(4 10 4 / 0.55);     /* Dunkelgrün tief, Schatten der Zettel auf der dunklen Wand */

  --mega: "GT Maru Mega", "GT Maru", ui-rounded, system-ui, sans-serif;
  --bold: "GT Maru", ui-rounded, system-ui, sans-serif;
  --text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Die ganze Grössenskala der Seite */
  --gr-titel: clamp(2rem, 9vw, 2.6rem);        /* Mega: Finanzfride. (am Handy unsichtbar, dort ist der FINANZÄ-Zettel der Titel; ab 760 px gross) */
  --gr-catch: clamp(1.3rem, 5.2vw, 2rem);      /* Bold: We Gäud eifach darf sy */
  --gr-fragen: clamp(2.1rem, 10.5vw, 5.25rem); /* Mega: die drei Fragen, eine Formel für alle Breiten */
  --gr-satz: clamp(1.6rem, 5.4vw, 2.8rem);     /* Bold: Zitat und Schluss-Satz */
  --gr-vorzeile: 1.125rem;                     /* Bold 18 px: Vorzeile über den Fragen */
  --gr-text: 1.0625rem;                        /* 17 px: aller Lesetext */
  --gr-klein: 0.95rem;                         /* 15,2 px: Bildzeile, Fuss, Nochmal */

  --rand: clamp(20px, 5vw, 64px);
  --breit: 1120px;
  --korn: url("/assets/bild/korn.webp");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--gruen);
  font-family: var(--text);
  font-size: var(--gr-text);
  line-height: 1.6;
  overflow-x: hidden;
  /* Papierkorn und Fasern auf der Creme-Fläche (Mittel bleibt Creme Kern, gemessen #DFC292) */
  background: var(--creme) var(--korn) repeat 0 0 / 256px 256px;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; text-wrap: pretty; }
.satz { display: inline-block; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sprung { position: absolute; left: -9999px; top: 0; background: var(--gruen); color: var(--creme); padding: 10px 16px; z-index: 10; }
.sprung:focus { left: 16px; top: 16px; }

.innen { max-width: var(--breit); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }

/* Kopf */
.kopf {
  position: relative; z-index: 3;
  max-width: var(--breit); margin: 0 auto;
  padding: 20px var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* Startseite: Kopf und Bühne dunkel, damit die Zettel wirken (Andrea 8.10.: «mach die farbe vom header schwarz oder
   dunkel, sonst haben die post-it nicht die Wirkung»). Dunkelgrün ist die dunkelste Markenfarbe; Wortmarke Creme,
   Spirale Gold (zweite Farbstellung des Logos). Der Kopf läuft über die ganze Breite, der Inhalt bleibt an der Kante. */
/* Der Kopf liegt auf der Bühne statt darüber: das erste Bild ist die ganze Bühne, nichts liegt unter der
   Fensterkante, und die Kalkwand läuft bis oben (Abnahme R1, 8.10.). Seine Höhe hält die Bühne als Polster frei. */
.startseite { --kopf-h: 68px; }
.startseite .kopf {
  position: absolute; top: 0; left: 0; right: 0;
  max-width: none; margin: 0; height: var(--kopf-h);
  padding: 0 max(var(--rand), calc((100% - var(--breit)) / 2 + var(--rand)));
  background: transparent; color: var(--creme);
}
.startseite .kopf a:focus-visible { outline-color: var(--creme); }
.marke { display: inline-flex; align-items: center; gap: 0.32em; text-decoration: none; font-size: 1.6rem; }
.marke-spirale { width: auto; height: 1.05em; }
.marke-wort { font-family: var(--mega); letter-spacing: -0.02em; line-height: 1; padding-bottom: 0.08em; }
.kopf-link { font-family: var(--bold); font-weight: 700; letter-spacing: -0.04em; font-size: var(--gr-text); }

/* Aufruf: ein Link mit Pfeil, keine Pille */
.weiter {
  display: inline-block;
  font-family: var(--bold); font-weight: 700; letter-spacing: -0.04em; font-size: var(--gr-text);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  padding: 10px 0;
}
.weiter span { display: inline-block; transition: transform 0.2s ease; }
.weiter:hover span { transform: translateX(4px); }

/* ------------------------------------------------------------------ Bühne */
/* Ein Plakat: die ganze dunkle Kalkwand ist die Bühne, die Zettel kleben gross über die Wand verteilt, der Text
   steht links (am Handy unten). Beim Scrollen sammeln sich die Zettel rechts (am Handy oben) zum Stapel. */
.buehne {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(24px + var(--kopf-h, 0px)) 0 clamp(40px, 7vh, 72px);
  color: var(--creme);
  /* Kalkwand aus dem Set (brand/hintergrund), in die Dunkelgrün-Leiter umgefärbt, fest zum Fenster (dieselbe Wand
     wie bei den Fragen, ohne Naht) */
  background-color: var(--gruen);
  background-image: url("/assets/bild/kalkwand-900.webp");
  background-image: image-set(url("/assets/bild/kalkwand-900.avif") type("image/avif"), url("/assets/bild/kalkwand-900.webp") type("image/webp"));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-attachment: fixed;
}
.buehne a:focus-visible, .buehne button:focus-visible { outline-color: var(--creme); }
/* Ein weiches Licht auf der Wand (Dunkelgrün hell 2), wird heller, wenn FINANZÄ klebt */
.buehne-licht {
  position: absolute; z-index: 0; pointer-events: none;
  left: -25%; top: -45%; width: 110%; height: 120%;
  background: radial-gradient(closest-side, rgb(56 74 56 / 0.9), rgb(56 74 56 / 0.4) 55%, rgb(56 74 56 / 0) 100%);
  opacity: 0.4;
}
.buehne-raster { position: relative; z-index: 2; width: 100%; }
.titel {
  font-family: var(--mega); font-weight: 400;
  font-size: var(--gr-titel);
  line-height: 0.95; letter-spacing: -0.02em;
  margin: 0;
}
.buehne-text { position: relative; }
/* Die Catchphrase: Berndeutsch, in Andreas Wortlaut, ohne Schlusspunkt. Gehört zum Titel wie eine zweite Zeile. */
.catch {
  font-family: var(--bold); font-weight: 700; letter-spacing: -0.04em;
  font-size: var(--gr-catch); line-height: 1.15;
  color: var(--gold-hell1);   /* Gold spricht auf Dunkelgrün (7,1 : 1) */
  margin: 8px 0 20px;
  min-height: 1.15em;   /* beim Tippen springt nichts */
  text-wrap: balance;   /* wenn es bricht, dann «We Gäud eifach / darf sy», nie «sy» allein */
}
.lead { font-size: var(--gr-text); max-width: 30em; }

/* Die Zettelwand ist das Feld der Zettel: am Handy die ganze Bühne, breiter rechts vom Text (nie Schrift über einem
   Zettel, Andrea 8.10.). Jeder Zettel steht mit seiner Mitte auf --x/--y (Prozent des Felds), ist --b Hundertstel
   der --einheit breit und um --r gedreht. Die Lage steckt in «translate» und «rotate», damit GSAP «transform» für
   die Bewegung frei hat. Platz und Reihenfolge sind getrennt: Reihenfolge im HTML (Ebene, Stapelfolge: 3a zuletzt,
   obenauf; Andrea 8.10.), Platz an der Klasse. */
.buehne { --einheit: 100vw; }
.zettelwand { position: absolute; inset: 0; z-index: 1; margin: 0; pointer-events: none; }
.zettel-los { position: absolute; inset: 0; }
.zettel {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%);
  width: calc(var(--b, 30) * var(--einheit) / 100); height: auto; max-width: none;
  translate: -50% -50%; rotate: var(--r, 0deg);
  filter: drop-shadow(4px 7px 9px var(--schatten-gruen));
}
.zettel-finanzae { --x: 50%; --y: 27%; --r: -4deg; --b: 56; z-index: 2; filter: drop-shadow(6px 11px 14px var(--schatten-gruen)); }
/* Handy: die Zettel in der oberen Hälfte, der Text darunter */
.zettel-los .z-pk           { --x: 22%; --y: 13%; --r: -9deg; --b: 30; }
.zettel-los .z-invest       { --x: 70%; --y: 11%; --r: 7deg;  --b: 32; }
.zettel-los .z-liste        { --x: 48%; --y: 25%; --r: -3deg; --b: 32; }
.zettel-los .z-beguenstigung{ --x: 80%; --y: 36%; --r: -6deg; --b: 31; }
.zettel-los .z-sparkonto    { --x: 20%; --y: 36%; --r: 11deg; --b: 32; }
.zettel-los .z-3a           { --x: 55%; --y: 45%; --r: 5deg;  --b: 30; }
.nochmal {
  position: absolute; right: var(--rand); bottom: 14px; z-index: 3;
  font-family: var(--bold); font-weight: 700; letter-spacing: -0.04em; font-size: var(--gr-klein);
  color: var(--creme-tief2); background: none; border: 0; padding: 8px 0; cursor: pointer; pointer-events: auto;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.nochmal span { display: inline-block; transition: transform 0.25s ease; }
.nochmal:hover span { transform: rotate(-60deg); }

/* ------------------------------------------------------------------ Drei Fragen */
.fragen {
  position: relative; isolation: isolate; overflow: clip;
  color: var(--creme);   /* Creme auf Dunkelgrün tief: über 12 : 1 */
  padding: 64px 0 64px;
  background: var(--gruen-tief);   /* fast Schwarz, ruhig, setzt sich von der Kalkwand der Bühne ab */
}
/* Kalkwand aus dem Set (brand/hintergrund), in die Dunkelgrün-Leiter umgefärbt: Mittel #172A17, hellste Stelle hell 1 */
.fragen-wand {
  display: none;   /* die Kalkwand hängt jetzt in der Bühne */
  position: absolute; inset: -12% 0; z-index: -1; pointer-events: none;
  background-color: var(--gruen);
  background-image: url("/assets/bild/kalkwand-900.webp");
  background-image: image-set(url("/assets/bild/kalkwand-900.avif") type("image/avif"), url("/assets/bild/kalkwand-900.webp") type("image/webp"));
  background-size: cover; background-position: 70% 50%; background-repeat: no-repeat;
}
/* Vorzeile mit kurzem Goldstrich: Gold spricht auf Dunkelgrün */
.vorzeile {
  position: relative; margin: 0 0 28px; padding-top: 16px;
  font-family: var(--bold); font-weight: 700; letter-spacing: -0.04em;
  font-size: var(--gr-vorzeile); line-height: 1.3; text-wrap: balance;
}
.vorzeile::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 3px; border-radius: 2px; background: var(--gold); }

.fragen-liste { list-style: none; padding: 0; margin: 0 0 36px; }
.frage {
  position: relative;
  font-family: var(--mega); font-weight: 400;
  font-size: var(--gr-fragen); line-height: 1.0; letter-spacing: -0.02em;
  padding: 0.2em 0;
}
.frage-linie { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gruen-hell2); transform-origin: 0 50%; }
.frage-linie-unten { top: auto; bottom: 0; }
.frage-maske { display: block; overflow: hidden; padding: 0.06em 0 0.1em; margin: -0.06em 0 -0.1em; }
.frage-text { display: block; text-wrap: balance; }
.fragen-fuss { color: var(--creme-tief2); font-size: var(--gr-text); max-width: 34em; margin: 0; }

/* ------------------------------------------------------------------ Haltung mit Video */
.haltung { position: relative; padding: 72px 0 80px; }
.haltung-raster { display: grid; gap: 28px; grid-template-areas: "zitat" "video" "text"; }
.zitat, .schluss-satz {
  font-family: var(--bold); font-weight: 700; letter-spacing: -0.04em;
  font-size: var(--gr-satz); line-height: 1.1; margin: 0;
  text-wrap: balance;
}
.zitat { grid-area: zitat; max-width: 15em; }
.haltung-text { grid-area: text; max-width: 34em; }
.haltung-text .zweite { color: var(--braun); margin-bottom: 0; }
.haltung-video { grid-area: video; position: relative; margin: 12px 0 4px; width: min(70vw, 280px); }
.video-rahmen {
  position: relative; overflow: hidden; margin-left: 6px;   /* Platz für den gedrehten Rand, die Bildzeile bleibt bündig */
  border-radius: 22px; background: var(--gruen);
  rotate: -2deg;
  box-shadow: 0 0 0 6px var(--creme-hell2), 0 28px 44px -20px var(--schatten-creme);
}
.video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--gruen); }
.video-knopf {
  position: absolute; right: 12px; bottom: 12px;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--gruen); color: var(--creme); cursor: pointer;
}
.video-knopf:focus-visible { outline-color: var(--creme-hell2); }
.video-knopf-zeichen { position: relative; width: 14px; height: 16px; }
.video-knopf-zeichen::before, .video-knopf-zeichen::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 4px; border-radius: 1px; background: currentColor;
}
.video-knopf-zeichen::before { left: 1px; }
.video-knopf-zeichen::after { right: 1px; }
.ist-angehalten .video-knopf-zeichen::before {
  left: 2px; width: 0; height: 0; background: none; border-radius: 0;
  border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor;
}
.ist-angehalten .video-knopf-zeichen::after { display: none; }
.video-zeile { margin-top: 20px; font-size: var(--gr-klein); line-height: 1.45; color: var(--braun); max-width: 21em; text-wrap: balance; }

/* ------------------------------------------------------------------ Zum Schluss */
.schluss {
  position: relative; overflow: clip;
  background: var(--gold-hell1) var(--korn) repeat 0 0 / 256px 256px;
  padding: 56px 0 72px;
}
.schluss-satz { max-width: 22em; margin-bottom: 8px; }

/* ------------------------------------------------------------------ Fuss */
.fuss {
  max-width: var(--breit); margin: 0 auto;
  padding: 24px var(--rand) 56px;
  font-size: var(--gr-klein); color: var(--wald);
}
.fuss p { margin: 0 0 6px; }
.fuss-marke { font-family: var(--bold); font-weight: 700; letter-spacing: -0.04em; color: var(--gruen); margin-bottom: 12px !important; }
.fuss-dunkel { max-width: none; padding: 0; background: var(--gruen); color: var(--creme-tief2); }
.fuss-dunkel .fuss-innen { max-width: var(--breit); margin: 0 auto; padding: 44px var(--rand) 56px; }
.fuss-dunkel .fuss-marke { display: flex; align-items: center; gap: 0.45em; color: var(--creme); font-size: 1.25rem; }
.fuss-spirale { width: auto; height: 1.3em; }
.fuss-dunkel a { color: var(--creme); }
.fuss-dunkel a:focus-visible { outline-color: var(--creme); }
.fuss-links { margin-top: 14px !important; }
.fuss-links a { display: inline-block; padding: 6px 0; margin-right: 22px; }

/* Einfache Unterseiten (Impressum, 404, später Landingpages) */
/* Gleiche Kante wie Kopf und Fuss, Lesetext höchstens rund 70 Zeichen breit */
.seite { max-width: var(--breit); margin: 0 auto; padding: 32px var(--rand) 72px; }
.seite > * { max-width: 30em; }
.seite h1 { font-family: var(--bold); font-weight: 700; letter-spacing: -0.04em; font-size: var(--gr-satz); line-height: 1.1; margin: 16px 0 24px; }
.seite h2 { font-family: var(--bold); font-weight: 700; letter-spacing: -0.04em; font-size: var(--gr-vorzeile); margin: 32px 0 8px; }
.seite h3 { font-family: var(--bold); font-weight: 700; letter-spacing: -0.04em; font-size: var(--gr-text); margin: 20px 0 4px; }
.seite ul { padding-left: 1.2em; margin: 0 0 1em; }
.seite li { margin-bottom: 4px; }
.seite .stand { color: var(--braun); }

/* ------------------------------------------------------------------ Bewegung: Startzustand */
/* Ohne JavaScript oder mit «Bewegung reduzieren» steht der Endzustand da: nur das FINANZÄ!-Post-it und die
   Catchphrase. frueh.js setzt .bewegt vor dem ersten Bild: dann warten die sechs Zettel und die Knäuel auf
   start.js, FINANZÄ! und Catchphrase bleiben verborgen, bis sie dran sind. Lädt start.js nicht, zeigt der
   Notnagel nach 2,5 s den Endzustand. */
.zettel-los { display: none; }
.bewegt .zettel-los { display: block; }
.bewegt .zettel-los .zettel { opacity: 0; }
.bewegt .zettel-finanzae, .bewegt .catch { opacity: 0; }
.bewegt:not(.gsap) .zettel-finanzae, .bewegt:not(.gsap) .catch { animation: notnagel 0s linear 2.5s both; }
@keyframes notnagel { from { opacity: 0; } to { opacity: 1; } }
/* Was sich bewegt, bekommt eine eigene Ebene. Mit GSAP übernimmt «transform» Lage und Drehung der Zettel
   (xPercent/yPercent und rotation aus --r), darum hier translate und rotate aus, sonst wirkt beides doppelt. */
.gsap .zettel, .gsap .zettel-los, .gsap .haltung-video { will-change: transform; }
.gsap .zettel { translate: none; rotate: none; }


/* ------------------------------------------------------------------ Handy */
/* Am Handy ist der FINANZÄ-Zettel der Titel (Andrea 8.10.: «B»). Die Überschrift bleibt für Screenreader und
   Suchmaschinen im Dokument, nur unsichtbar; darunter steht gleich die Catchphrase, etwas grösser. */
@media (max-width: 759.98px) {
  .titel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .catch { margin-top: 14px; font-size: 1.6rem; }
  /* Das Zettelfeld ist der Platz über dem Text (auf kurzen Handys lag 3a sonst auf der Catchphrase). Es ist ein
     Grössen-Container: die Zettel richten sich nach seiner Breite, auf kurzen Handys nach seiner Höhe. */
  .zettelwand { position: relative; inset: auto; order: -1; flex: 1 0 60vw; min-height: 0; container-type: size; }
  .buehne { --einheit: min(100cqw, 100cqh); }
  .zettel-finanzae { --y: 52%; }
  .zettel-los .z-pk           { --y: 17%; }
  .zettel-los .z-invest       { --y: 16%; }
  .zettel-los .z-liste        { --y: 38%; }
  .zettel-los .z-beguenstigung{ --y: 57%; }
  .zettel-los .z-sparkonto    { --y: 57%; }
  .zettel-los .z-3a           { --y: 73%; }
}

/* ------------------------------------------------------------------ Breiter als Handy */
@media (min-width: 760px) {
  :root { --gr-titel: clamp(3.5rem, 9vw, 8.5rem); }
  .marke { font-size: 1.9rem; }
  /* Das Zettelfeld beginnt rechts vom Text: Textkante (wie .innen) plus Titelbreite («Finanzfride.» ist 5,1 em
     breit) plus Luft. Der Text darunter wird nie breiter als der Titel. Die Zettelgrösse richtet sich nach der
     Feldbreite, auf niedrigen Fenstern nach der Höhe, damit nichts oben oder unten abgeschnitten wird. */
  .startseite { --kopf-h: 73px; }
  .buehne {
    justify-content: center; padding: calc(40px + var(--kopf-h, 0px)) 0 64px;
    --text-links: calc(max(0px, (100vw - var(--breit)) / 2) + var(--rand));
    --feld-links: calc(var(--text-links) + 5.1 * var(--gr-titel) + clamp(24px, 3.5vw, 64px));
    --einheit: min(100cqw, 80cqh);
  }
  /* Feld unter dem Kopf und mit Luft zum rechten Rand (Parallaxe und Ankleben brauchen Platz, Abnahme R1) */
  .zettelwand { left: var(--feld-links); top: var(--kopf-h, 0px); right: clamp(16px, 2vw, 32px); container-type: size; }
  .titel { max-width: 62%; }
  .buehne-text { max-width: calc(5.1 * var(--gr-titel)); }
  .catch { margin-top: 10px; max-width: 14em; }
  .zettel-finanzae { --x: 50%; --y: 50%; --b: 68; }
  .zettel-los .z-pk           { --x: 20%; --y: 22%; --r: -9deg; --b: 38; }
  .zettel-los .z-invest       { --x: 64%; --y: 19%; --r: 7deg;  --b: 40; }
  .zettel-los .z-liste        { --x: 80%; --y: 42%; --r: -4deg; --b: 40; }
  .zettel-los .z-beguenstigung{ --x: 36%; --y: 50%; --r: -7deg; --b: 38; }
  .zettel-los .z-sparkonto    { --x: 72%; --y: 76%; --r: 10deg; --b: 40; }
  .zettel-los .z-3a           { --x: 26%; --y: 82%; --r: 5deg;  --b: 38; }
  .nochmal { bottom: 22px; }
}
/* Schmale Desktops */
@media (min-width: 760px) and (max-width: 1023.98px) {
  .lead { max-width: 24em; }
  .fragen { padding: 104px 0 96px; }
  .buehne { background-image: url("/assets/bild/kalkwand-1600.webp"); background-image: image-set(url("/assets/bild/kalkwand-1600.avif") type("image/avif"), url("/assets/bild/kalkwand-1600.webp") type("image/webp")); }
  .vorzeile { margin-bottom: 36px; }
  .fragen-liste { margin-bottom: 40px; }
  .haltung { padding: 120px 0 104px; }
  .haltung-raster {
    grid-template-columns: 280px minmax(0, 1fr); column-gap: 56px; row-gap: 40px;
    grid-template-areas: "zitat zitat" "video text";
  }
  .haltung-video { width: 100%; margin: 0; }
  .haltung-text { align-self: center; }
  .schluss { padding: 88px 0 96px; }
}

/* Haltung ab 1024 px: Zitat und Text links, Video rechts */
@media (min-width: 1024px) {
  .haltung-raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; row-gap: 32px;
    grid-template-areas: "zitat video" "text video";
  }
  .zitat { align-self: end; }
  .haltung-text { align-self: start; }
  .haltung-video { width: min(100%, 320px); justify-self: center; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .weiter span, .nochmal span { transition: none; }
}