/* AZAV-VSL · Richtung a-klar (Klar und ruhig) · Politur 19.09.2026 nach Artas Wahl
   Hallmark · macrostructure: Spalte (VSL-Funnel: Titel, Video, Knopf, Beleg, Bewerbung, Fallstudien, Knopf, Fuß)
   Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3

   Vier Flächen, ein Rhythmus:
     Weiß           Kopf, Titel, Video, erster Knopf
     Grund #f8f9fb  eine Bühne für Beleg, Siegel und die weiße Bewerbungskarte
     Weiß           Fallstudien, zweiter Knopf
     Hell #eaeef3   Fuß, eine Stufe dunkler
   Farben und Schrift 1:1 aus DESIGN.md (Marcel/IfDQ). Poppins ist Kunden-Vorgabe.
   Ränder sind IfDQ-Blau mit Deckkraft (rgba), keine eigene Farbe.
   Keine Verläufe, keine Glasoptik, keine seitlichen Balken. Gold genau zweimal: Linie unter dem Titel, Fortschritt in der Karte.
   Abstände auf einer Skala: 8, 16, 24, 40, 64 (4 nur zwischen Zeile und Beschriftung).
   Radien: 16 für Karte, Video und Knopf, 12 für Zeile, Feld und Kachel, 99 für Pillen.
   Bewegung: eine Kurve, nur opacity und transform, Einblenden erst wenn der Block ins Bild kommt.
   Alles ist im Ruhezustand sichtbar, nichts ist bei opacity 0 geparkt.
   Prüfung 2 (19.09., 18:10): Kopf eine Stufe enger und Video 680 statt 760, damit der erste Knopf bei
   390x700 und 1440x900 mit offener Cookie-Leiste im ersten Bild steht (vorher 728 und 961, Bild endet bei 700 und 900). */
:root{
  --blau:#0e518d; --blau-tief:#0a3d6b; --ink:#191919; --grau:#4c5557;
  --hell:#eaeef3; --grund:#f8f9fb; --weiss:#ffffff; --gold:#fcb900; --rot:#cf2e2e;
  --rand:rgba(14,81,141,.22);
  --serif:"IBM Plex Serif",Georgia,serif;
  --body:"Poppins",system-ui,sans-serif;
  --schatten:0 12px 32px rgba(10,61,107,.08);
  --schatten-klein:0 2px 8px rgba(10,61,107,.10);
  --schatten-knopf:0 8px 20px rgba(14,81,141,.22);
  --r16:16px; --r12:12px;
  --s0:4px; --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px;
  --kurve:cubic-bezier(.2,.7,.2,1);
  --dauer:.35s;
  --t-klein:14px; --t-body:16px; --t-mittel:18px; --t-h2:22px; --t-h1:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-weight:400;color:var(--ink);
  background:var(--weiss);font-size:var(--t-body);line-height:1.55;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--blau)}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:700;line-height:1.25;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
section[id]{scroll-margin-top:var(--s2)}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s2)}
.mitte{text-align:center}
.klein{font-size:var(--t-klein);color:var(--grau)}
.nobr{white-space:nowrap}
/* Beschriftung über einem Block: normale Schreibung mit Gewicht, keine Versalien */
.label{display:block;font-size:var(--t-klein);font-weight:600;color:var(--blau);margin-bottom:var(--s1)}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* Zustimmung: eine Reihe, Text links, Knöpfe rechts, verdeckt nichts */
.consent{background:var(--hell);color:var(--ink);padding:var(--s1) var(--s2);display:flex;gap:12px;
  align-items:center;justify-content:space-between;font-size:var(--t-klein);line-height:1.35}
.consent>span{flex:1 1 auto;min-width:0}
.consent .c-btns{display:flex;gap:var(--s0);flex:0 0 auto;align-items:center}
.consent button{border:0;border-radius:var(--r12);padding:0 12px;min-height:44px;cursor:pointer;
  background:var(--blau);color:#fff;font-weight:600;font-size:var(--t-klein);
  transition:background var(--dauer) var(--kurve)}
.consent button:hover{background:var(--blau-tief)}
.consent button.grau{background:transparent;color:var(--grau);padding:0 var(--s1);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.consent button.grau:hover{background:transparent;color:var(--ink)}

/* Kopf: nur das Logo, schlank */
.kopf{height:48px;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--hell);background:var(--weiss)}
.marke{height:30px;width:auto;display:block}

/* Titel */
.hero{padding:var(--s2) 0 0}
h1{font-size:var(--t-h1);line-height:1.3;margin:0 auto;letter-spacing:-0.01em}
h1 .akzent{color:var(--blau)}
.goldlinie{width:40px;height:2px;background:var(--gold);border-radius:99px;margin:var(--s1) auto var(--s1)}
.unterzeile{font-size:var(--t-body);font-weight:500;color:var(--grau);max-width:40ch;margin:0 auto;line-height:1.45}
.filtersatz{color:var(--grau);max-width:62ch;margin:var(--s2) auto 0}

/* Video */
.vsl{padding:var(--s2) 0 0}
.video-rahmen{position:relative;max-width:680px;margin:0 auto;aspect-ratio:16/9;
  border-radius:var(--r16);overflow:hidden;background:#0a1826;box-shadow:var(--schatten)}
.video-rahmen video{width:100%;height:100%;display:block;background:#0a1826;object-fit:cover}
.ton-pille{position:absolute;top:var(--s2);left:var(--s2);z-index:2;background:var(--weiss);color:var(--ink);
  border:0;border-radius:99px;padding:0 var(--s2);min-height:44px;font-size:var(--t-klein);font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;gap:var(--s1);box-shadow:var(--schatten-klein);
  transition:background var(--dauer) var(--kurve)}
.ton-pille:hover{background:var(--grund)}
.ton-pille svg{width:18px;height:18px}
.tempo-hinweis{max-width:680px;margin:var(--s1) auto 0;text-align:center;font-size:var(--t-klein);color:var(--grau)}

/* Knöpfe: eine Primärform, Blau, weiße Schrift, 56 hoch, Radius 16, weicher Schatten. Sekundär als Rahmen. */
.knopf-zeile{padding:var(--s2) 0 0;display:flex;flex-direction:column;align-items:center;gap:var(--s1)}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:56px;width:100%;
  max-width:360px;padding:0 var(--s3);border:0;border-radius:var(--r16);color:#fff;background:var(--blau);
  box-shadow:var(--schatten-knopf);font-size:var(--t-body);font-weight:600;text-decoration:none;cursor:pointer;
  text-align:center;transition:background var(--dauer) var(--kurve),box-shadow var(--dauer) var(--kurve)}
.knopf:hover{background:var(--blau-tief);box-shadow:0 10px 24px rgba(14,81,141,.28)}
.knopf:active{background:var(--blau-tief);box-shadow:0 3px 8px rgba(14,81,141,.2)}
.knopf:disabled{background:var(--hell);color:var(--grau);box-shadow:none;cursor:default}
.knopf:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.knopf svg{width:18px;height:18px;flex:0 0 auto}
.knopf.zweit{background:transparent;color:var(--blau);border:1.5px solid var(--blau);box-shadow:none}
.knopf.zweit:hover,.knopf.zweit:active{background:var(--hell);box-shadow:none}
.band-cta{background:var(--weiss);padding:var(--s3) 0 var(--s5)}
.band-cta .knopf-zeile{padding-top:0}

/* Beleg: die Bühne beginnt, eine große Zahl, zwei ruhige Nebenangaben, dann die Siegel in weißen Kacheln */
.beleg{margin-top:var(--s4);padding:var(--s4) 0 0;background:var(--grund);border-top:1px solid var(--hell)}
.beleg-in{display:grid;grid-template-columns:1fr;gap:var(--s3);text-align:center;max-width:960px;margin:0 auto}
.b-haupt .b-zahl{font-family:var(--serif);font-weight:700;font-size:44px;color:var(--blau);line-height:1;letter-spacing:-0.01em}
.b-neben .b-zahl{font-size:var(--t-body);font-weight:600;color:var(--ink);line-height:1.3}
.b-text{font-size:var(--t-klein);color:var(--grau);margin-top:var(--s0)}
.siegel{max-width:960px;margin:var(--s3) auto 0;padding:var(--s3) 0 var(--s4);border-top:1px solid var(--hell);text-align:center}
.siegel .label{margin-bottom:var(--s2)}
.siegel-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);max-width:400px;margin:0 auto}
.siegel-reihe figure{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--s1);
  background:var(--weiss);border:1px solid var(--hell);border-radius:var(--r12);padding:var(--s2);
  box-shadow:var(--schatten-klein)}
.siegel-reihe img{height:64px;width:auto}
.siegel-reihe figcaption{font-size:var(--t-klein);color:var(--grau);line-height:1.3}
.siegel-satz{max-width:52ch;margin:var(--s2) auto 0;font-size:var(--t-klein);color:var(--grau);line-height:1.5}

/* Bewerbung: weiße Karte auf der Bühne, Fortschritt dünn in Gold */
.bewerbung{padding:var(--s3) 0 var(--s5);background:var(--grund)}
.karte{background:var(--weiss);border:1px solid var(--hell);border-radius:var(--r16);
  box-shadow:var(--schatten);padding:var(--s3);max-width:640px;margin:0 auto}
.fort{height:3px;background:var(--hell);border-radius:99px;overflow:hidden;margin:0 0 var(--s3)}
.fort i{display:block;height:100%;width:100%;background:var(--gold);transform-origin:left center;
  transform:scaleX(0);transition:transform var(--dauer) var(--kurve)}
.schirm{display:grid;gap:var(--s2)}
.schirm h2{font-size:var(--t-h2)}
.schirm h2.gross{font-size:var(--t-h1)}
.hinweis{background:var(--grund);border:1px solid var(--hell);border-radius:var(--r12);padding:var(--s2);color:var(--grau)}
.hinweis b{color:var(--ink)}
.optionen{display:grid;gap:var(--s1)}
.option{position:relative;display:flex;align-items:flex-start;gap:var(--s2);min-height:52px;padding:14px var(--s2);
  border:1.5px solid var(--hell);border-radius:var(--r12);background:var(--grund);cursor:pointer;
  transition:border-color var(--dauer) var(--kurve),background var(--dauer) var(--kurve)}
.option:hover{border-color:var(--rand)}
.option input{position:absolute;opacity:0;width:1px;height:1px}
.option .ring{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:2px solid var(--rand);margin-top:1px;
  display:flex;align-items:center;justify-content:center;background:var(--weiss);transition:border-color var(--dauer) var(--kurve)}
.option .ring::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--blau);
  transform:scale(0);transition:transform var(--dauer) var(--kurve)}
.option input:checked ~ .ring{border-color:var(--blau)}
.option input:checked ~ .ring::after{transform:scale(1)}
.option:has(input:checked){border-color:var(--blau);background:var(--hell)}
.option input:focus-visible ~ .ring{outline:3px solid var(--blau);outline-offset:3px}
.option .o-text{display:block}
.option small{display:block;font-size:var(--t-klein);color:var(--grau);margin-top:var(--s0)}
.optionen.warn .option{border-color:var(--rot)}
textarea,.feld input{width:100%;font:inherit;font-size:var(--t-body);color:var(--ink);padding:12px var(--s2);
  border:1.5px solid var(--rand);border-radius:var(--r12);background:var(--weiss);
  transition:border-color var(--dauer) var(--kurve)}
textarea{min-height:130px;resize:vertical;line-height:1.5}
textarea::placeholder,.feld input::placeholder{color:#7a8590}
textarea:hover,.feld input:hover{border-color:var(--blau)}
textarea:focus,.feld input:focus{outline:3px solid var(--blau);outline-offset:1px;border-color:var(--blau)}
textarea.warn,.feld input.warn{border-color:var(--rot)}
.feld-fehler{font-size:var(--t-klein);color:var(--rot);display:none;margin-top:var(--s0)}
.feld-fehler.an{display:block}
.zeile{display:flex;gap:var(--s2);justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:var(--s1)}
.zeile .knopf{width:auto;min-width:160px}
.zeile .rechts{margin-left:auto}
.zeile.stapel{flex-direction:column-reverse;align-items:stretch}
.zeile.stapel .knopf{width:100%;max-width:none;margin-left:0}
.text-knopf{background:transparent;border:0;color:var(--grau);min-height:44px;padding:0 var(--s1);cursor:pointer;
  font-size:var(--t-klein);border-radius:var(--s1);transition:color var(--dauer) var(--kurve)}
.text-knopf:hover{color:var(--blau);text-decoration:underline}
.felder{display:grid;gap:var(--s2)}
.feld label{display:block;font-size:var(--t-klein);font-weight:500;color:var(--grau);margin-bottom:var(--s0)}
.kalender-rahmen{margin-top:var(--s1);border:1px solid var(--hell);border-radius:var(--r16);overflow:hidden;
  background:var(--weiss);min-height:680px}
.kalender-rahmen iframe{width:100%;height:100%;min-height:680px;border:0;display:block}
.kalender-link{margin-top:var(--s2);font-size:var(--t-klein);color:var(--grau)}
/* Ersatz-Link als Touch-Ziel: 44 px hoch (Prüfung 2, 19.09.) */
.kalender-link a{display:inline-block;padding:12px 0;min-height:44px}

/* Fallstudien: weiße Fläche, Karten mit Standbild, Name, Firma, Zitat */
.fallstudien{padding:var(--s5) 0 0;background:var(--weiss)}
.fs-raster{display:grid;grid-template-columns:1fr;gap:var(--s3);max-width:960px;margin:var(--s3) auto 0}
.fs-karte{background:var(--weiss);border:1px solid var(--hell);border-radius:var(--r16);
  box-shadow:var(--schatten);overflow:hidden;display:flex;flex-direction:column}
.fs-video{position:relative;aspect-ratio:16/9;background:var(--hell);display:flex;align-items:center;
  justify-content:center;cursor:pointer;border:0;padding:0;width:100%;overflow:hidden}
.fs-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .6s var(--kurve)}
.fs-video img.fokus-30{object-position:center 30%}
.fs-video img.fokus-25{object-position:center 25%}
.fs-video:hover img{transform:scale(1.03)}
.fs-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
.abspiel{position:relative;z-index:1;width:60px;height:60px;border-radius:50%;background:var(--blau);display:flex;align-items:center;
  justify-content:center;box-shadow:0 0 0 4px rgba(255,255,255,.75),0 6px 16px rgba(10,24,38,.3)}
.abspiel::after{content:"";border-style:solid;border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent #fff;margin-left:4px}
.fs-video .dauer{position:absolute;z-index:1;right:var(--s2);bottom:var(--s2);background:var(--weiss);color:var(--ink);
  font-size:var(--t-klein);font-weight:500;padding:4px 10px;border-radius:99px;box-shadow:var(--schatten-klein)}
.fs-text{padding:var(--s3);display:grid;gap:var(--s0)}
.fs-name{font-size:var(--t-mittel);font-weight:600;line-height:1.3}
.fs-firma{font-size:var(--t-klein);color:var(--grau)}
.fs-zitat{margin:var(--s2) 0 0;line-height:1.6}
.fs-zitat p{margin:0}
.fs-hinweis{display:none;margin-top:var(--s0)}
/* Handy: die vier Fälle rollen in ihrem eigenen Kasten (Council Runde 2: Scrollstrecke mobil), die Seite selbst nie */
@media (max-width:699px){
  .fs-raster{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s2);
    margin:var(--s3) calc(-1 * var(--s2)) 0;padding:var(--s0) var(--s2) var(--s2);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fs-raster::-webkit-scrollbar{display:none}
  .fs-karte{flex:0 0 84%;scroll-snap-align:center}
  .fs-hinweis{display:block}
}

/* Fuß: eine Stufe dunkler */
.fuss{background:var(--hell);border-top:1px solid var(--rand);padding:var(--s4) 0 0;color:var(--grau)}
.fuss-grid{display:grid;grid-template-columns:1fr;gap:var(--s3)}
.f-logo{height:32px;width:auto;margin-bottom:var(--s1)}
.f-anschrift{font-size:var(--t-klein);line-height:1.6}
.f-titel{font-size:var(--t-klein);font-weight:600;color:var(--ink);margin-bottom:var(--s0)}
.f-spalte a{color:var(--ink);text-decoration:none;font-size:var(--t-klein);padding:var(--s1) 0;min-height:44px;
  display:flex;align-items:center}
.f-spalte a:hover{color:var(--blau);text-decoration:underline}
.f-unten{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;border-top:1px solid var(--rand);
  margin-top:var(--s3);padding:var(--s2) var(--s2) var(--s3);font-size:var(--t-klein)}

/* Danke-Seite */
.d-fort{max-width:520px;margin:var(--s2) auto 0;padding:0 var(--s2)}
.d-fort .fort{margin:0 0 var(--s0)}
.d-fort .fort i{transform:scaleX(1)}
.d-fort .klein{text-align:right;display:block}
.d-hero{padding:var(--s3) 0 0}
.d-hero h1{max-width:22ch}
.d-hero .filtersatz{max-width:52ch}
.erinnerung{max-width:640px;margin:var(--s3) auto 0;background:var(--grund);border:1px solid var(--hell);
  border-radius:var(--r16);padding:var(--s2) var(--s3);display:grid;gap:var(--s0)}
.erinnerung b{color:var(--ink)}
.frage-raster{display:grid;grid-template-columns:1fr;gap:var(--s2);max-width:760px;margin:var(--s3) auto 0}
/* Fragen-Kacheln: am Handy eine Zeile mit Abspielknopf rechts, ab Tablet 16:9-Kacheln im Raster */
.frage-kachel{position:relative;min-height:88px;border-radius:var(--r12);background:var(--weiss);border:1px solid var(--hell);
  box-shadow:var(--schatten-klein);padding:var(--s2);display:flex;flex-direction:row;justify-content:space-between;
  align-items:center;gap:var(--s2);text-align:left;cursor:pointer;overflow:hidden;
  transition:border-color var(--dauer) var(--kurve),box-shadow var(--dauer) var(--kurve)}
.frage-kachel:hover{border-color:var(--rand);box-shadow:var(--schatten)}
.frage-kachel.laeuft{aspect-ratio:16/9;padding:0}
.frage-kachel .frage{font-weight:600;line-height:1.35;max-width:22ch}
.frage-kachel .abspiel{width:44px;height:44px;box-shadow:var(--schatten-klein)}
.frage-kachel .abspiel::after{border-width:8px 0 8px 13px;margin-left:3px}
.frage-kachel video{position:absolute;inset:0;width:100%;height:100%;background:#0a1826}
/* Kacheln mit Standbild (Danke-Seite, 19.09.): Bild deckend, dunkler Verlauf darüber, weiße Frage mit Schatten.
   Auf allen Breiten 2:1 (Gesicht bleibt im Bild), Frage unten links, Abspielknopf unten rechts. Läuft das Video, 16:9. */
.frage-kachel.bild{background-size:cover;background-position:center 28%;color:#fff;border-color:transparent;
  min-height:0;aspect-ratio:2/1;align-items:flex-end}
.frage-kachel.bild::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,22,38,.18) 0%,rgba(8,22,38,.42) 55%,rgba(8,22,38,.82) 100%)}
.frage-kachel.bild .frage{position:relative;z-index:1;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55);max-width:24ch}
.frage-kachel.bild .abspiel{position:relative;z-index:1;box-shadow:0 0 0 3px rgba(255,255,255,.7),0 4px 12px rgba(0,0,0,.35)}
.frage-kachel.bild:hover::before{background:linear-gradient(180deg,rgba(8,22,38,.28) 0%,rgba(8,22,38,.5) 55%,rgba(8,22,38,.86) 100%)}
.frage-kachel.bild.laeuft{aspect-ratio:16/9;background-image:none!important}
.frage-kachel.bild.laeuft::before{display:none}
.yt-raster{display:grid;grid-template-columns:1fr;gap:var(--s3);max-width:960px;margin:var(--s3) auto 0}
.yt-karte{background:var(--weiss);border:1px solid var(--hell);border-radius:var(--r16);box-shadow:var(--schatten);overflow:hidden}
.yt-kachel{position:relative;aspect-ratio:16/9;background:var(--hell) center/cover no-repeat;border:0;padding:0;width:100%;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.yt-kachel iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-text{padding:var(--s2) var(--s3) var(--s3);display:grid;gap:var(--s0)}
.wand-raster{columns:1;column-gap:var(--s2);max-width:960px;margin:var(--s3) auto 0}
.w-karte{break-inside:avoid;background:var(--weiss);border:1px solid var(--hell);border-radius:var(--r16);
  overflow:hidden;margin:0 0 var(--s2);box-shadow:var(--schatten-klein)}
.w-karte img{width:100%;display:block}
.w-karte blockquote{margin:var(--s2) var(--s2) var(--s1);line-height:1.6}
.w-karte figcaption{margin:0 var(--s2) var(--s2);font-size:var(--t-klein);color:var(--grau)}
.w-karte figcaption b{color:var(--ink)}
body[data-seite="danke"] .bewerbung{margin-top:var(--s5);padding:var(--s5) 0;border-top:1px solid var(--hell)}
body[data-seite="danke"] .fallstudien + .fallstudien{padding-top:var(--s4)}
body[data-seite="danke"] .fuss{margin-top:var(--s5)}

/* Einblenden, sobald ein Block ins Bild kommt. Ohne Skript und ohne Bewegungswunsch steht alles sichtbar da. */
@media (prefers-reduced-motion: no-preference){
  @keyframes einblenden{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .einblenden{animation:einblenden .6s var(--kurve) both}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:0s !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* Tablet */
@media (min-width:700px){
  .consent{justify-content:center;gap:var(--s3)}
  .consent>span{flex:0 1 auto}
  .consent .c-btns{gap:var(--s1)}
  .siegel-reihe{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;max-width:none}
  .siegel-reihe figure{min-width:136px}
  .beleg-in{display:flex;justify-content:center;align-items:center;gap:var(--s4);text-align:left}
  .b-neben{border-left:1px solid var(--rand);padding-left:var(--s4)}
  .b-haupt .b-zahl{font-size:56px}
  .fs-raster{grid-template-columns:1fr 1fr}
  .yt-raster{grid-template-columns:1fr 1fr}
  .frage-raster{grid-template-columns:1fr 1fr}
  .frage-kachel{aspect-ratio:16/9;flex-direction:column;align-items:flex-start;justify-content:space-between}
  .frage-kachel.bild{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .wand-raster{columns:2}
  .felder{grid-template-columns:1fr 1fr}
  .felder .voll{grid-column:1 / -1}
  .karte{padding:var(--s4)}
  .zeile.stapel{flex-direction:row;align-items:center}
  .zeile.stapel .knopf{width:auto}
  .zeile.stapel .rechts{margin-left:auto}
  .fuss-grid{grid-template-columns:1.2fr 1fr 1fr}
}
/* Desktop */
@media (min-width:1000px){
  :root{--t-h1:32px;--t-h2:28px;--t-mittel:20px}
  .kopf{height:72px}
  .marke{height:44px}
  .hero{padding:var(--s3) 0 0}
  h1{max-width:46ch;line-height:1.25}
  .goldlinie{margin:var(--s2) auto var(--s1)}
  .unterzeile{font-size:18px;max-width:44ch}
  .beleg{margin-top:var(--s5)}
  .siegel{margin-top:var(--s4);padding-top:var(--s4)}
  .fallstudien{padding-top:var(--s5)}
  .band-cta{padding:var(--s4) 0 var(--s5)}
  .fuss{padding-top:var(--s5)}
  .schirm h2{font-size:26px}
  .schirm h2.gross{font-size:30px}
}