/* 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}
/* ISO-VSL: die vier TÜV-Urkunden sind Hochformat, mit 64px nur ein weißer Fleck. 96px zeigt Kopf und Norm (22.09.2026). */
.siegel-reihe img[src*='siegel']{height:96px}
.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}
}

/* ==========================================================================
   FINISHING-SCHICHT (23.09.2026, Arta: "nimm das Finishing, das wir immer nutzen")
   Quelle: infrastruktur/artifacts/public/daniel-loidl/UEBERGABE-SKILL-DESIGN-COPY-MORITZ.md,
   Abschnitt 4 (Weltklasse-Schicht) und 6 (Abstände). Dort ist der Grund fast schwarz,
   hier bleibt die helle Brand aus DESIGN.md: getönt wird auf IfDQ-Blau statt auf Schwarz.
   Regeln, die aus der Übergabe übernommen sind:
     Schatten in 3 bis 5 Lagen, niedrige Deckkraft, auf den Grundton getönt, plus Licht-Oberkante.
     Knöpfe mit Dauer-Glanzstreifen, Glühen beim Zeigen, Feder beim Drücken.
     Reveals steigen mit Weichzeichner auf, eine Bewegungs-Kurve für alles.
     Abrisskante an jedem Flächenwechsel, Korn fest bei 0.03.
     Laufbänder mit weichen Maskenkanten, Zeigen hält sie an.
     Nur transform, opacity und filter. Alles hinter prefers-reduced-motion.
   ========================================================================== */
:root{
  --kurve-w:cubic-bezier(.32,.72,0,1);          /* eine Kurve für die ganze Seite */
  --licht:inset 0 1px 0 rgba(255,255,255,.7);   /* Licht-Oberkante */
  --sockel:0 1px 2px rgba(10,61,107,.06), 0 4px 10px rgba(10,61,107,.06),
           0 14px 30px rgba(10,61,107,.08), 0 30px 60px rgba(10,61,107,.06);
  --sockel-hoch:0 2px 4px rgba(10,61,107,.08), 0 8px 18px rgba(10,61,107,.10),
           0 22px 44px rgba(10,61,107,.12), 0 44px 80px rgba(10,61,107,.10);
}

/* 1. Korn: fest über der ganzen Seite, nimmt Flächen das Sterile. Klickt nicht mit. */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 2. Schatten aller Karten auf das Lagen-System heben */
.karte{box-shadow:var(--sockel-hoch), var(--licht)}
.fs-karte, .w-karte, .yt-karte, .siegel-reihe figure, .frage-kachel, .erinnerung{
  box-shadow:var(--sockel), var(--licht)}

/* 3. Abrisskante an jedem Flächenwechsel: eine hauchdünne Linie mit Verlauf nach außen */
.beleg::before, .bewerbung::before, .band-cta::before, .fuss::before,
.fallstudien[data-reveal]::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--rand) 18%,var(--rand) 82%,transparent)}
.beleg, .bewerbung, .band-cta, .fuss, .fallstudien[data-reveal]{position:relative}

/* 4. Knöpfe: Glanzstreifen alle 4,5 Sekunden, Glühen beim Zeigen, Feder beim Drücken */
.knopf{position:relative;overflow:hidden;transition:transform .25s var(--kurve-w), box-shadow .25s var(--kurve-w)}
.knopf::after{
  content:"";position:absolute;top:0;bottom:0;width:38%;left:-40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);animation:glanz 4.5s var(--kurve-w) infinite}
@keyframes glanz{0%{left:-40%}18%{left:120%}100%{left:120%}}
.knopf:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(14,81,141,.30), var(--licht)}
.knopf:active{transform:translateY(1px) scale(.985)}
.knopf.zweit::after{background:linear-gradient(100deg,transparent,rgba(14,81,141,.14),transparent)}

/* 5. Reveal: steigt mit Weichzeichner auf statt nur einzublenden */
/* Die Startlage setzt NUR das Skript (html.bewegung). Ohne Skript, ohne IntersectionObserver
   oder bei reduzierter Bewegung steht alles sichtbar da, nichts ist bei opacity 0 geparkt. */
[data-reveal]{transition:opacity .7s var(--kurve-w), transform .7s var(--kurve-w), filter .7s var(--kurve-w)}
html.bewegung [data-reveal]:not(.einblenden){opacity:.001;transform:translateY(18px);filter:blur(6px)}
[data-reveal].einblenden{opacity:1;transform:none;filter:none}

/* 6. VSL: Doppelrand mit ruhiger Glut, federnder Ton-Knopf */
.video-rahmen{position:relative;box-shadow:var(--sockel-hoch), var(--licht)}
.video-rahmen::before{
  content:"";position:absolute;inset:-7px;border-radius:calc(var(--r16) + 7px);pointer-events:none;
  border:1px solid rgba(14,81,141,.20);animation:glut 4.5s ease-in-out infinite}
@keyframes glut{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.95;transform:scale(1.004)}}
.ton-pille{animation:feder 2.6s var(--kurve-w) infinite;transition:transform .25s var(--kurve-w)}
@keyframes feder{0%,88%,100%{transform:translateY(0)}92%{transform:translateY(-4px)}96%{transform:translateY(-1px)}}
.ton-pille:hover{transform:scale(1.04)}

/* 7. Beleg: Zahl mit Verlaufstext und Zierlinie darunter */
.b-zahl{background:linear-gradient(180deg,#2b7ac4 0%,var(--blau) 55%,var(--blau-tief) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.b-haupt{position:relative;padding-bottom:var(--s1)}
.b-haupt::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(252,185,0,0))}

/* 8. Siegel-Block nach Artas Aufbau (23.09.): ProvenExpert allein, darunter die drei DQN-Zeichen */
.pe-block{display:flex;flex-direction:column;align-items:center;gap:var(--s1);margin:0 0 var(--s3)}
.pe-block img{height:132px;width:auto;filter:drop-shadow(0 6px 16px rgba(10,61,107,.12))}
.pe-block figcaption{font-size:var(--t-klein);color:var(--grau)}
.dqn-reihe{display:flex;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:var(--s1);
  max-width:520px;margin:0 auto}
.dqn-reihe figure{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:var(--s0);background:var(--weiss);border:1px solid var(--hell);border-radius:var(--r12);
  padding:var(--s2) var(--s0);flex:1 1 0;min-width:0;max-width:160px;
  box-shadow:var(--sockel), var(--licht);transition:transform .3s var(--kurve-w)}
.dqn-reihe figure:hover{transform:translateY(-3px)}
.dqn-reihe img{height:48px;width:auto}
.dqn-reihe figcaption{font-size:13px;color:var(--grau);line-height:1.3}
@media (min-width:760px){ .dqn-reihe{gap:var(--s2)} .dqn-reihe img{height:56px} }

/* 9. Kunden-Laufband: zwei gleiche Reihen laufen endlos, Kanten weich, Zeigen hält an */
/* Die zehn Kundenlogos sind WEISS (aus dem TUEV-Quiz, dort lief das Band auf dunklem Grund).
   Auf der hellen Seite verschwinden sie, deshalb bekommt das Band eine eigene dunkle Flaeche.
   Sie ist zugleich der Farbanker, der der Seite gefehlt hat (Arta 23.09.: "trist und kahl"). */
.laufband{margin-top:var(--s4);position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--blau-tief) 0%,#0c4677 55%,var(--blau) 100%);
  border-radius:var(--r16);padding:var(--s3) 0;
  box-shadow:var(--sockel-hoch), inset 0 1px 0 rgba(255,255,255,.14)}
.lb-titel{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#a9c8e4;
  text-align:center;margin-bottom:var(--s3)}
.lb-fenster{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lb-spur{display:flex;width:max-content;animation:laufen 42s linear infinite}
.laufband:hover .lb-spur{animation-play-state:paused}
.lb-reihe{display:flex;align-items:center;gap:var(--s4);padding-right:var(--s4)}
.lb-reihe img{height:30px;width:auto;opacity:.88;
  transition:opacity .3s var(--kurve-w), transform .3s var(--kurve-w)}
.lb-reihe img:hover{opacity:1;transform:scale(1.06)}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 10. Bewerbung: der Fragebogen muss herausstechen (Arta 22.09., er ging optisch unter) */
.bewerbung{background:linear-gradient(180deg,var(--grund) 0%,#eef3f8 60%,var(--grund) 100%)}
.b-anreisser{text-align:center;max-width:560px;margin:0 auto var(--s3)}
.b-anreisser .label{display:inline-block;margin-bottom:var(--s1)}
.b-anreisser h2{font-size:var(--t-h2);margin-bottom:var(--s1)}
.b-anreisser p{color:var(--grau);margin:0}
.b-pfeil{display:block;margin:var(--s2) auto 0;width:22px;height:22px;color:var(--blau);
  animation:tippen 2.4s var(--kurve-w) infinite}
@keyframes tippen{0%,70%,100%{transform:translateY(0);opacity:.55}85%{transform:translateY(6px);opacity:1}}
.karte{position:relative;border:1px solid rgba(14,81,141,.30)}
.karte::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:5px;
  border-radius:var(--r16) var(--r16) 0 0;
  background:linear-gradient(90deg,var(--blau),#2b7ac4 45%,var(--gold))}
.karte .fort{margin-top:var(--s1)}
#los{animation:pochen 3.2s var(--kurve-w) infinite}
@keyframes pochen{0%,72%,100%{box-shadow:var(--schatten-knopf)}84%{box-shadow:0 8px 20px rgba(14,81,141,.22), 0 0 0 8px rgba(14,81,141,.10)}}

/* 10b. Der letzte Knopf steht auf dunklem Grund: zweiter Farbanker, Abschluss der Seite */
.band-cta{background:linear-gradient(135deg,var(--blau-tief) 0%,#0c4677 60%,var(--blau) 100%);
  padding:var(--s5) 0 var(--s4);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
/* Luft VOR dem dunklen Abschluss: der design-council 23.09. mass den Uebergang von den
   Fallstudien zum Band als gedraengt. Einziger Befund, der keine Vorgabe von Arta bricht. */
.fallstudien + .band-cta{margin-top:var(--s4)}
.band-cta .klein{color:#a9c8e4}
.band-cta .knopf{background:var(--weiss);color:var(--blau-tief);
  box-shadow:0 10px 26px rgba(4,26,46,.35), inset 0 1px 0 rgba(255,255,255,.9)}
.band-cta .knopf:hover{box-shadow:0 14px 32px rgba(4,26,46,.45)}
.band-cta .knopf::after{background:linear-gradient(100deg,transparent,rgba(14,81,141,.16),transparent)}
.band-cta::before{background:none}

/* 11. Fallstudien und Kacheln heben sich beim Zeigen leicht */
.fs-karte, .w-karte, .yt-karte{transition:transform .35s var(--kurve-w), box-shadow .35s var(--kurve-w)}
.fs-karte:hover, .yt-karte:hover{transform:translateY(-4px);box-shadow:var(--sockel-hoch), var(--licht)}
.frage-kachel{transition:transform .3s var(--kurve-w), box-shadow .3s var(--kurve-w)}
.frage-kachel:hover{transform:translateY(-3px);box-shadow:var(--sockel-hoch)}

/* 12. Antwort-Kacheln im Fragebogen: ruhiger Sprung beim Wählen */
.option{transition:transform .22s var(--kurve-w), border-color .22s var(--kurve-w), background .22s var(--kurve-w)}
.option:hover{transform:translateX(2px)}

/* 13. Reduzierte Bewegung: alles Laufende steht still, nichts verschwindet */
@media (prefers-reduced-motion: reduce){
  .knopf::after, .video-rahmen::before, .ton-pille, .lb-spur, #los, .b-pfeil{animation:none}
  [data-reveal]{transition:none}
  html.bewegung [data-reveal]:not(.einblenden){opacity:1;transform:none;filter:none}
  .knopf:hover, .fs-karte:hover, .yt-karte:hover, .frage-kachel:hover, .option:hover{transform:none}
}