/*
 * Vor Mitternacht: Layout und Komponenten. Nutzt nur Variablen aus theme.css.
 * Komponenten (vm-btn, vm-db, vm-bib, vm-split) nach brand/project/components/bundle.css.
 * Regeln: eckig (radius-0), keine Schatten, keine Verläufe, markierung höchstens einmal pro Ansicht
 * (Logo ausgenommen), Text auf Pink immer on-markierung (dunkel).
 */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:17px;line-height:26px;background:var(--papier);color:var(--teer);overflow-wrap:break-word}
img{max-width:100%;height:auto}
a{color:var(--teer);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--markierung-text)}
:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
p{margin:0 0 var(--space-4)}
strong{font-weight:600}
ul,ol{margin:0 0 var(--space-4);padding-left:var(--space-6)}
li{margin-bottom:var(--space-2)}

/* ---------- Typo: Strecke (Display), Stimme (Sans), Zeitmessung (Mono) ---------- */
h1,h2,h3,.display,.heading{font-family:var(--font-display);text-transform:uppercase;margin:0;hyphens:manual}
h1,.display{font-weight:800;font-size:48px;line-height:46px;margin-bottom:var(--space-6)}
h2,.heading{font-weight:600;font-size:26px;line-height:30px;letter-spacing:.01em;margin:var(--space-12) 0 var(--space-4)}
h3{font-weight:600;font-size:21px;line-height:26px;letter-spacing:.01em;margin:var(--space-6) 0 var(--space-2)}
.lead{font-size:21px;line-height:30px}
.eyebrow{font-family:var(--font-mono);font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teer-muted);font-variant-numeric:tabular-nums;margin:0 0 var(--space-3)}
.caption{font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:.02em;color:var(--teer-muted)}
.muted{color:var(--teer-muted)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.prose{max-width:680px}

/* ---------- Seitenrahmen ---------- */
.wrap{max-width:var(--content-width);margin:0 auto;padding:0 var(--space-6)}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.site-header{border-bottom:1px solid var(--linie);padding:var(--space-4) 0}
.site-header .logo{display:block;line-height:0;flex-shrink:0}
.site-header .logo img{height:22px;width:auto;display:block}
.site-header nav{display:flex;gap:var(--space-2) var(--space-6);flex-wrap:wrap}
.site-header nav a{font-family:var(--font-mono);font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--teer);padding:var(--space-1) 0}
.site-header nav a:hover,.site-header nav a[aria-current]{color:var(--markierung-text)}
main.wrap{padding-top:var(--space-12);padding-bottom:var(--space-16)}
section{margin-bottom:var(--space-12)}
.site-footer{background:var(--asphalt);color:var(--kreide);padding:var(--space-8) 0}
.site-footer a{color:var(--kreide)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin-bottom:var(--space-4)}
.site-footer nav a{font-family:var(--font-mono);font-size:12px;line-height:18px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.site-footer nav a:hover{text-decoration:underline}
.site-footer .caption{color:var(--kreide);opacity:.8;margin:0 0 var(--space-2)}
.site-footer .foot-mark{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
.site-footer .foot-mark img{height:18px;width:auto}

/* Band auf Asphalt (Text in Kreide) */
.band{background:var(--asphalt);color:var(--kreide);padding:var(--space-8) var(--space-8);margin:var(--space-12) 0}
.band a{color:var(--kreide)}
.band .eyebrow{color:var(--kreide);opacity:.8}
.band h2{margin-top:0}
main > section.band:last-child{margin-bottom:calc(-1 * var(--space-16))}
.band .vm-split-km,.band .vm-split-time{color:var(--kreide)}
.band .vm-split-lead{border-color:rgba(244,244,241,.35)}

/* ---------- Button ---------- */
.vm-btn,button{display:inline-block;font-family:var(--font-sans);font-size:17px;font-weight:600;line-height:24px;padding:12px var(--space-6);border-radius:var(--radius-0);border:2px solid var(--teer);background:transparent;color:var(--teer);cursor:pointer;text-decoration:none;text-align:left}
.vm-btn:hover,button:hover{background:var(--teer);border-color:var(--teer);color:var(--papier)}
.vm-btn-primary,button.vm-btn-primary{background:var(--markierung);border-color:var(--markierung);color:var(--on-markierung)}
.vm-btn-primary:hover,button.vm-btn-primary:hover{background:var(--teer);border-color:var(--teer);color:var(--papier)}
.vm-btn-kreide{border-color:var(--kreide);color:var(--kreide)}
.vm-btn-kreide:hover{background:var(--kreide);border-color:var(--kreide);color:var(--asphalt)}
.vm-btn:disabled,button:disabled{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin:var(--space-6) 0}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--teer);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-btn:hover{background:none;color:var(--markierung-text)}
.arrow-link{font-weight:600;text-decoration:none;border-bottom:2px solid currentColor}

/* ---------- Durchbruch: waagrechter Spalt pro Zeile, oberer Teil nach rechts versetzt ---------- */
.vm-db{position:relative;display:inline-block;max-width:100%;font-family:var(--font-display);font-weight:800;text-transform:uppercase;white-space:pre-line;--lh:46px;--shift:0.04em}
.vm-db-top,.vm-db-bottom{display:block;line-height:var(--lh);-webkit-mask-size:100% var(--lh);mask-size:100% var(--lh);-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y}
.vm-db-top{transform:translateX(var(--shift));-webkit-mask-image:linear-gradient(to bottom,#000 0 60%,transparent 60% 100%);mask-image:linear-gradient(to bottom,#000 0 60%,transparent 60% 100%)}
.vm-db-bottom{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0 65%,#000 65% 100%);mask-image:linear-gradient(to bottom,transparent 0 65%,#000 65% 100%)}
.vm-db-display{font-size:48px;--lh:46px}
.vm-db-xl{font-size:88px;--lh:80px;letter-spacing:-0.01em}
.vm-db-teer{color:var(--teer)}
.vm-db-kreide{color:var(--kreide)}
.vm-db-markierung{color:var(--markierung)}
.db-head{margin:0 0 var(--space-6)}
.hero-title{margin:0 0 var(--space-8)}
.hero-pre{display:block;margin-bottom:var(--space-2)}

/* ---------- Startnummer ---------- */
.vm-bib{position:relative;background:var(--papier-raised);color:var(--teer);border:1px solid var(--linie);padding:var(--space-8) var(--space-8) var(--space-6);border-radius:var(--radius-0);margin:var(--space-6) 0}
.vm-bib-dark{background:var(--asphalt);color:var(--kreide);border-color:var(--asphalt)}
.vm-bib-dark a{color:var(--kreide)}
.vm-hole{position:absolute;width:10px;height:10px;border-radius:var(--radius-loch);background:var(--papier);border:1px solid var(--linie)}
.vm-bib-dark .vm-hole{border-color:var(--asphalt)}
.vm-hole-tl{top:12px;left:12px}.vm-hole-tr{top:12px;right:12px}
.vm-hole-bl{bottom:12px;left:12px}.vm-hole-br{bottom:12px;right:12px}
.vm-bib-label{font-family:var(--font-mono);font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teer-muted)}
.vm-bib-dark .vm-bib-label{color:var(--kreide);opacity:.8}
.vm-bib-number{font-family:var(--font-display);font-weight:800;font-size:88px;line-height:80px;color:var(--markierung);margin-top:var(--space-2);font-variant-numeric:tabular-nums}
.vm-bib-title{font-family:var(--font-display);font-weight:800;font-size:40px;line-height:40px;text-transform:uppercase;margin-top:var(--space-2)}
.vm-bib-body{font-size:21px;line-height:30px;margin-top:var(--space-4)}
.vm-bib-body p{margin:0 0 var(--space-3)}
.vm-bib-body > :last-child{margin-bottom:0}
.vm-bib-body.body{font-size:17px;line-height:26px}
.bib-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4);margin:var(--space-6) 0}
.bib-grid .vm-bib{margin:0}

/* ---------- Split: Zwischenzeit-Zeile ---------- */
.splits{display:grid;gap:var(--space-3);margin:var(--space-4) 0 var(--space-8)}
.vm-split{display:grid;grid-template-columns:auto auto 1fr auto;gap:var(--space-3);align-items:baseline;font-size:17px;line-height:26px}
.vm-split-km,.vm-split-time{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--teer-muted);white-space:nowrap;text-transform:uppercase}
.vm-split-km{color:var(--markierung-text);min-width:4.5em}
.vm-split-title{min-width:0}
.vm-split-title a{text-decoration:none}
.vm-split-title a:hover{text-decoration:underline}
.vm-split-lead{border-bottom:2px dotted var(--linie);transform:translateY(-4px);min-width:var(--space-4)}
/* Erledigt: durchgestrichen (Akzent als markierung-text, damit das Pink pro Ansicht einmalig bleibt) */
.vm-split-done .vm-split-title,.vm-split-done .vm-split-title a{color:var(--teer-muted);text-decoration:line-through;text-decoration-color:var(--markierung-text);text-decoration-thickness:2px}
.split-note{font-size:15px;line-height:22px;color:var(--teer-muted);margin:calc(-1 * var(--space-2)) 0 var(--space-2) calc(4.5em + var(--space-3));font-family:var(--font-sans)}

/* ---------- Atem-Abschnitte (nur für Atem) ---------- */
.atem{background:var(--feld-soft);color:var(--feld);padding:var(--space-6);margin:var(--space-6) 0}
.atem .eyebrow{color:var(--feld)}
.atem p{color:var(--teer)}

/* ---------- Formulare ---------- */
label{display:block;margin:var(--space-4) 0 var(--space-2);font-weight:600}
label .opt{font-weight:400;color:var(--teer-muted)}
input[type=email],input[type=text],textarea,select{width:100%;padding:12px;border:1px solid var(--linie);border-radius:var(--radius-1);font:inherit;background:var(--papier-raised);color:var(--teer)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
input[type=checkbox],input[type=radio]{accent-color:var(--teer);width:18px;height:18px;border-radius:var(--radius-1)}
label.check{display:flex;gap:var(--space-3);align-items:flex-start;font-weight:400;font-size:15px;line-height:22px}
label.check input{margin-top:2px;flex-shrink:0}
.form{background:var(--papier-raised);border:1px solid var(--linie);padding:var(--space-6);margin:var(--space-6) 0}
.form h2{margin-top:0}
.form button{margin-top:var(--space-6)}
.hint{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--teer-muted);margin-top:var(--space-2)}

/* ---------- Quiz ---------- */
.question{border:0;border-top:1px solid var(--linie);padding:var(--space-6) 0 var(--space-4);margin:0;min-width:0}
.question legend{padding:0;font-size:21px;line-height:30px;font-weight:600;margin-bottom:var(--space-3);float:left;width:100%}
.question legend .eyebrow{display:block;margin-bottom:var(--space-2)}
.question .answer:first-of-type{clear:both}
.answer{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border:1px solid var(--linie);background:var(--papier-raised);margin:var(--space-2) 0;cursor:pointer;font-weight:400}
.answer:hover{border-color:var(--teer)}
.answer input{margin-top:4px;flex-shrink:0}
.answer:has(input:checked){border-color:var(--teer);outline:1px solid var(--teer)}
.quiz-submit{border-top:1px solid var(--linie);padding-top:var(--space-6)}

/* ---------- Ergebnis ---------- */
.sentences{list-style:none;padding:0;margin:0 0 var(--space-6)}
.sentences li{font-size:21px;line-height:30px;padding:var(--space-2) 0;border-bottom:1px solid var(--linie);margin:0}
.result + .result{border-top:2px solid var(--teer);padding-top:var(--space-8);margin-top:var(--space-8)}

/* ---------- Hinweise ---------- */
.notice{padding:var(--space-3) var(--space-4);margin:var(--space-4) 0;border-left:4px solid var(--teer);background:var(--papier-raised)}
.notice-error{border-left-color:var(--markierung-text);background:var(--markierung-soft)}
.template-warning{background:var(--markierung-soft);color:var(--teer);border:2px dashed var(--markierung-text);padding:var(--space-3) var(--space-4);font-weight:600}
/* offener Platzhalter aus funnel.md, bis er in config.ts befüllt ist */
.ph{background:var(--markierung-soft);color:var(--markierung-text);font-family:var(--font-mono);font-size:.8em;padding:0 var(--space-1)}

/* ---------- Video ---------- */
.video{position:relative;padding-top:56.25%;background:var(--asphalt);margin:0 0 var(--space-6)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* HLS-Player (Videos aus R2): Asphalt-Fläche, eckig, Start-Taste in Kreide (Pink bleibt für den Haupt-Button der Seite) */
.vm-player{margin:0 0 var(--space-6)}
.vm-player-frame{position:relative;aspect-ratio:16/9;background:var(--asphalt);overflow:hidden}
.vm-player-video{position:absolute;inset:0;width:100%;height:100%;background:var(--asphalt);object-fit:contain;accent-color:var(--markierung)}
.vm-player-video::cue{font-family:var(--font-sans);background:rgba(25,26,25,.85);color:var(--kreide)}
.vm-player .vm-player-start{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:0;border:0;background:linear-gradient(to top,rgba(25,26,25,.55),rgba(25,26,25,.1));color:var(--kreide);font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1;letter-spacing:.04em;text-transform:uppercase;text-align:center}
.vm-player .vm-player-start:hover,.vm-player .vm-player-start:focus-visible{background:linear-gradient(to top,rgba(25,26,25,.7),rgba(25,26,25,.25));color:var(--kreide)}
.vm-player .vm-player-start:focus-visible{outline:3px solid var(--kreide);outline-offset:-6px}
.vm-player-icon{display:block;width:72px;height:72px;border:3px solid var(--kreide);position:relative}
.vm-player-icon::after{content:"";position:absolute;left:28px;top:20px;border-style:solid;border-width:16px 0 16px 24px;border-color:transparent transparent transparent var(--kreide)}
.vm-player-start:hover .vm-player-icon{background:var(--kreide)}
.vm-player-start:hover .vm-player-icon::after{border-left-color:var(--asphalt)}
.vm-player-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--space-4);padding:var(--space-6);background:var(--asphalt);color:var(--kreide)}
.vm-player-error[hidden],.vm-player .vm-player-start[hidden]{display:none}
.vm-player-error p{margin:0;max-width:52ch}
.vm-player .vm-player-error .vm-btn{width:auto}
.vm-player-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-2) 0;border-bottom:1px solid var(--linie);font-family:var(--font-mono);font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teer-muted)}
.vm-player-quality{display:flex;align-items:center;gap:var(--space-2);margin:0;font-weight:600}
.vm-player-quality[hidden]{display:none}
.vm-player-quality select{width:auto;padding:2px var(--space-2);font-family:var(--font-mono);font-size:13px;text-transform:none;letter-spacing:0;border-radius:var(--radius-0)}
@media (max-width:560px){.vm-player-icon{width:56px;height:56px}.vm-player-icon::after{left:21px;top:14px;border-width:13px 0 13px 19px}.vm-player .vm-player-start{font-size:18px}}

/* ---------- Fortschritt ---------- */
.progress{height:6px;background:var(--linie);margin:var(--space-2) 0 var(--space-8)}
.progress>span{display:block;height:100%;background:var(--teer)}

/* ---------- Listen, FAQ ---------- */
ul.plain{list-style:none;padding:0;margin:0 0 var(--space-6)}
ul.plain li{padding:var(--space-2) 0 var(--space-2) var(--space-6);position:relative;margin:0}
ul.plain li::before{content:"→";position:absolute;left:0;color:var(--teer-muted)}
ul.plain.not li::before{content:"×"}
details{border-top:1px solid var(--linie);padding:var(--space-4) 0}
details:last-of-type{border-bottom:1px solid var(--linie)}
details summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:var(--space-4)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:var(--font-mono);color:var(--teer-muted)}
details[open] summary::after{content:"−"}
details[open] summary{margin-bottom:var(--space-3)}
details p:last-child{margin-bottom:0}

/* ---------- Angebote ---------- */
.offer{display:grid;grid-template-columns:1fr auto;gap:var(--space-2) var(--space-6);align-items:baseline;border-top:1px solid var(--linie);padding:var(--space-6) 0}
.offer:last-child{border-bottom:1px solid var(--linie)}
.offer h3{margin:0}
.offer p{margin:0;grid-column:1/-1;color:var(--teer-muted)}
.offer .price{font-family:var(--font-mono);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.offer .go{grid-column:1/-1;justify-self:start}

/* ---------- Tabellen (Admin) ---------- */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:var(--space-2);border-bottom:1px solid var(--linie);white-space:nowrap}
th{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--teer-muted)}

@media (max-width:720px){
  .vm-db-xl{font-size:64px;--lh:60px}
}
@media (max-width:640px){
  .wrap{padding:0 var(--space-4)}
  main.wrap{padding-top:var(--space-8);padding-bottom:var(--space-12)}
  h1,.display{font-size:38px;line-height:38px}
  h2,.heading{margin-top:var(--space-8)}
  .vm-db-display{font-size:38px;--lh:38px}
  .vm-db-xl{font-size:50px;--lh:48px}
  .vm-bib-title{font-size:32px;line-height:32px}
  .vm-bib-number{font-size:64px;line-height:60px}
  .lead,.vm-bib-body{font-size:19px;line-height:28px}
  .vm-bib{padding:var(--space-8) var(--space-6) var(--space-6)}
  .band{padding:var(--space-6) var(--space-4);margin-left:calc(-1 * var(--space-4));margin-right:calc(-1 * var(--space-4))}
  .site-header .row{align-items:flex-start}
  .site-header nav{gap:var(--space-1) var(--space-4)}
  .vm-split{grid-template-columns:auto 1fr auto}
  .vm-split-lead{display:none}
  .split-note{margin-left:0}
  .vm-btn,button{width:100%;text-align:center}
  .btn-row .vm-btn{width:100%}
  .link-btn{width:auto;text-align:left}
  .btn-row form{width:100%}
  main > section.band:last-child{margin-bottom:calc(-1 * var(--space-12))}
  .sentences li{font-size:19px;line-height:28px}
}

/* ---------- Pilot-Kohorte, Live-Abend ---------- */
fieldset.bare{border:0;padding:0;margin:0;min-width:0}
fieldset.bare:disabled{opacity:.5}
fieldset.plan{border:1px solid var(--linie);padding:var(--space-2) var(--space-4) var(--space-4);margin:0 0 var(--space-4);min-width:0}
fieldset.plan legend{font-weight:600;padding:0 var(--space-2)}
.pilot-price{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--space-8);align-items:start}
.pilot-price .vm-bib{margin:0}
.live-hint{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:var(--space-4) 0 var(--space-2);margin:var(--space-8) 0 0;max-width:680px}
.live-hint .eyebrow{margin-bottom:var(--space-2)}
.live-hint .vm-split{margin-bottom:var(--space-2)}
.live-hint .vm-split-km{color:var(--teer-muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
table.attend td{vertical-align:middle}
table.attend tr.muted td{color:var(--teer-muted)}
.attend-check{margin:0;justify-content:center}
.attend-check input{width:26px;height:26px;margin:0}
@media (max-width:640px){
  .pilot-price{grid-template-columns:1fr;gap:var(--space-4)}
  .live-hint .vm-split{grid-template-columns:auto 1fr;row-gap:0}
  .live-hint .vm-split-time{grid-column:2}
}
.band .caption{color:var(--kreide);opacity:.8}
/* Durchbruch mit Umlaut in der zweiten Zeile (Live-Abend "SPÄT"): mehr Zeilenabstand, damit die Punkte frei stehen */
.hero-umlaut .vm-db-xl{--lh:100px}
@media (max-width:720px){.hero-umlaut .vm-db-xl{--lh:76px}}
@media (max-width:640px){.hero-umlaut .vm-db-xl{--lh:60px}}
.live-hint .vm-split-title a{text-decoration:underline;text-underline-offset:3px}

/* Fotos: Startseite */
.photo-band{margin:0 0 var(--space-12);position:relative}
.photo-band img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 30%;filter:saturate(.85) contrast(1.05)}
.photo-band figcaption{margin-top:var(--space-2)}
.weg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6)}
.weg-grid figure{margin:0}
.weg-grid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;filter:saturate(.85) contrast(1.05)}
.weg-grid figcaption{font-family:var(--font-mono);font-size:13px;line-height:18px;margin-top:var(--space-2)}
.weg-grid figcaption .eyebrow{color:var(--markierung-text);margin:0}
@media (max-width:640px){.weg-grid{grid-template-columns:1fr 1fr}.weg-grid figure:last-child{grid-column:1/-1}.weg-grid figure:last-child img{aspect-ratio:16/10}}

.antrieb blockquote{margin:0 0 var(--space-6);max-width:900px}
.antrieb blockquote .vm-db{text-transform:none}

/* Startseite: Bühne wie im Teaser-Reel. Nur CSS, Ablauf ca. 8 s, danach steht der Endzustand.
   0,3 s "Man sagt dir", 2,9 s "Wer sagt das", Uhr tickt bis 5,0 s, dann Pink, Blitz, Claim, Zielkanal-Satz, Button. */
body{overflow-x:clip}
.hx{position:relative;margin:calc(-1 * var(--space-12)) calc(50% - 50vw) var(--space-12);background:var(--asphalt);color:var(--kreide);overflow:hidden;isolation:isolate}
.hx-bg{position:absolute;inset:-4%;z-index:-1;background:linear-gradient(180deg,rgba(46,48,46,.82),rgba(46,48,46,.93) 60%,#2E302E),url(/img/roth-ziel.webp) 50% 30%/cover no-repeat;filter:grayscale(.6) contrast(1.1);opacity:0;animation:hx-bg 9s ease-out .2s forwards}
.hx-inner{max-width:var(--content-width);margin:0 auto;padding:var(--space-12) var(--space-6) var(--space-12);min-height:min(88svh,860px);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
.hx-eyebrow{font-family:var(--font-mono);font-size:13px;line-height:18px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--kreide);opacity:.75;margin:0 0 var(--space-2)}
.hero-clock{position:relative;align-self:flex-start;font-family:var(--font-display);font-weight:800;font-size:clamp(104px,26vw,220px);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--kreide);margin:0 0 var(--space-6);padding-bottom:.1em;animation:hc-ink .01s linear 5s forwards, hc-pop .8s cubic-bezier(.2,.8,.2,1) 5s both}
.hc-top,.hc-bot{display:block;white-space:nowrap}
.hc-top{-webkit-mask-image:linear-gradient(to bottom,#000 0 58%,transparent 58%);mask-image:linear-gradient(to bottom,#000 0 58%,transparent 58%);transform:translateX(.04em);animation:hc-shift .8s cubic-bezier(.2,.8,.2,1) 5s both}
.hc-bot{position:absolute;inset:0 0 .1em;-webkit-mask-image:linear-gradient(to bottom,transparent 0 63%,#000 63%);mask-image:linear-gradient(to bottom,transparent 0 63%,#000 63%)}
.hc-digit{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.hc-strip{display:block;animation:hc-tick 4.8s steps(7,end) .2s both}
.hc-line{position:absolute;left:0;right:0;bottom:0;height:4px;background:currentColor;opacity:.35;transform-origin:left;animation:hc-fill 4.8s linear .2s both}
.hx-slot{display:grid;min-height:2.2em}
.hx-slot>*{grid-area:1/1;margin:0}
.hx-line{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(40px,7vw,72px);line-height:.98;opacity:0}
.hx-l1{animation:hx-say 2.5s ease .3s both}
.hx-l2{animation:hx-say 2s ease 2.9s both}
.hx-title{margin:0}
.hx-pre{color:var(--kreide);opacity:0;animation:hx-in .6s ease 5.2s both}
.hx-db{display:block;opacity:0;animation:hx-in .7s cubic-bezier(.2,.8,.2,1) 5.5s both}
.hx-db .vm-db-top{animation:hc-shift .9s cubic-bezier(.2,.8,.2,1) 5.5s both}
.hx-quote{margin:var(--space-8) 0 0;max-width:640px;font-family:var(--font-sans);font-size:clamp(18px,2.2vw,22px);line-height:1.45;color:var(--kreide);opacity:0;animation:hx-in .8s ease 6.6s both;padding-left:var(--space-4);border-left:3px solid var(--markierung)}
.hx-cta{opacity:0;animation:hx-in .6s ease 7.3s both}
.hx-cta .caption{color:var(--kreide);opacity:.75}
.hx-flash{position:absolute;inset:0;background:var(--markierung);opacity:0;pointer-events:none;animation:hx-flash .5s ease-out 5s both}
@keyframes hc-tick{from{transform:translateY(0)}to{transform:translateY(-7em)}}
@keyframes hc-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hc-ink{to{color:var(--markierung)}}
@keyframes hc-pop{0%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes hc-shift{from{transform:translateX(.14em)}to{transform:translateX(.04em)}}
@keyframes hx-say{0%{opacity:0;transform:translateY(24px)}14%{opacity:1;transform:none}82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}
@keyframes hx-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hx-flash{0%{opacity:0}12%{opacity:.55}100%{opacity:0}}
@keyframes hx-bg{0%{opacity:0;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@media (max-width:640px){.hx-inner{padding:var(--space-8) var(--space-4) var(--space-12);min-height:86svh}}
@media (prefers-reduced-motion:reduce){
  .hx *,.hx-bg,.hero-clock,.hc-top,.hc-strip,.hc-line{animation:none!important}
  .hc-strip{transform:translateY(-7em)}.hero-clock{color:var(--markierung)}
  .hx-bg,.hx-pre,.hx-db,.hx-quote,.hx-cta{opacity:1}.hx-line,.hx-flash{display:none}
}