/* ============================================================
   SEKUNDEN — Story-Styles (Young Mobility / HAK Bregenz)
   Schriften selbst gehostet: Onest (Headlines/Zahlen) + Lora (Lesetext)
   ============================================================ */

@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/onest-600.woff2") format("woff2")}
@font-face{font-family:"Onest";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/onest-800.woff2") format("woff2")}
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/lora-400.woff2") format("woff2")}
@font-face{font-family:"Lora";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/lora-500.woff2") format("woff2")}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/lora-400-italic.woff2") format("woff2")}

:root{
  --navy:#003E6F; --hak-blue:#0093D0; --hak-orange:#F29400;
  --display:"Onest",system-ui,sans-serif;
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --maxw:min(920px,90vw);
  --bg:#000; --fg:#fff; --fg-muted:rgba(255,255,255,.72); --fg-faint:rgba(255,255,255,.42);
  --accent:#fbbf24; --accent-soft:rgba(251,191,36,.45); --border:rgba(255,255,255,.1); --surface:rgba(255,255,255,.03);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.sekunden{margin:0;background:#000;color:#fff;font-family:var(--serif);font-weight:500;
  font-size:clamp(18px,1.15vw,20px);line-height:1.68;-webkit-font-smoothing:antialiased}
.sekunden h1,.sekunden h2,.sekunden h3,.sekunden .d{font-family:var(--display);font-weight:800;
  line-height:1.03;letter-spacing:-.015em;text-wrap:balance}

/* Paletten (aus SEKUNDEN portiert) */
.pal-duskAmber{--bg:#000;--fg:#fff;--fg-muted:rgba(255,255,255,.72);--fg-faint:rgba(255,255,255,.42);--accent:#fbbf24;--accent-soft:rgba(251,191,36,.45);--border:rgba(255,255,255,.1);--surface:rgba(255,255,255,.03)}
.pal-midnightTeal{--bg:linear-gradient(180deg,#03181a 0%,#000 65%);--fg:#f2fbfa;--fg-muted:rgba(224,250,247,.72);--fg-faint:rgba(224,250,247,.42);--accent:#2dd4bf;--accent-soft:rgba(45,212,191,.45);--border:rgba(45,212,191,.16);--surface:rgba(45,212,191,.05)}
.pal-crimsonDark{--bg:linear-gradient(180deg,#210505 0%,#000 65%);--fg:#fff6f6;--fg-muted:rgba(255,235,235,.72);--fg-faint:rgba(255,235,235,.42);--accent:#f87171;--accent-soft:rgba(248,113,113,.45);--border:rgba(248,113,113,.16);--surface:rgba(248,113,113,.05)}
.pal-violetNight{--bg:linear-gradient(180deg,#150726 0%,#000 65%);--fg:#f6f1ff;--fg-muted:rgba(238,226,255,.72);--fg-faint:rgba(238,226,255,.42);--accent:#c084fc;--accent-soft:rgba(192,132,252,.45);--border:rgba(192,132,252,.16);--surface:rgba(192,132,252,.05)}
.pal-pastelMint{--bg:#eef7f0;--fg:#1c2b21;--fg-muted:rgba(28,43,33,.68);--fg-faint:rgba(28,43,33,.45);--accent:#3f9463;--accent-soft:rgba(63,148,99,.3);--border:rgba(28,43,33,.12);--surface:rgba(255,255,255,.6)}
.pal-pastelDawn{--bg:#fbf1ea;--fg:#2c2018;--fg-muted:rgba(44,32,24,.68);--fg-faint:rgba(44,32,24,.45);--accent:#c2703d;--accent-soft:rgba(194,112,61,.3);--border:rgba(44,32,24,.12);--surface:rgba(255,255,255,.6)}

/* Nav: ein Streifen, Kapitel oben, Burger am Handy */
.ym-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:10px clamp(14px,4vw,32px);background:rgba(0,4,10,.55);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08)}
.ym-nav .wordmark{font-family:var(--display);font-weight:800;letter-spacing:.26em;color:#fff;font-size:.95rem;text-decoration:none}
.ym-nav .links{display:flex;gap:4px;flex-wrap:wrap}
.ym-nav .links a{font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.02em;color:rgba(255,255,255,.72);
  text-decoration:none;padding:6px 10px;border-radius:2px}
.ym-nav .links a:hover,.ym-nav .links a.active{color:#fff;background:rgba(255,255,255,.12)}
.ym-burger{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1}
@media(max-width:820px){
  .ym-nav .links{position:fixed;top:52px;right:0;left:0;flex-direction:column;gap:0;background:rgba(0,6,12,.97);
    padding:8px 0;transform:translateY(-140%);transition:transform .3s ease;border-bottom:1px solid rgba(255,255,255,.1)}
  .ym-nav .links.open{transform:translateY(0)}
  .ym-nav .links a{padding:12px 24px;font-size:.98rem}
  .ym-burger{display:block}
}

/* Hero */
.ym-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,8vh,90px) clamp(20px,6vw,80px);
  background:radial-gradient(120% 90% at 70% 10%,#12212e 0%,#000 60%);position:relative}
.ym-hero .brand{display:flex;align-items:center;gap:14px;margin-bottom:auto;padding-top:40px}
.ym-hero .brand img{height:42px;width:auto;opacity:.95}
.ym-hero .brand span{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ym-hero h1{font-size:clamp(3.6rem,17vw,13rem);letter-spacing:.01em;margin:.1em 0 .2em;color:#fff}
.ym-hero .sub{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(1.1rem,2.2vw,1.55rem);
  max-width:26ch;color:#cfe6f4;margin:0}
.ym-hero .foot{margin-top:auto;padding-bottom:8px;font-family:var(--display);font-weight:600;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.ym-cue{margin-top:26px;font-family:var(--display);font-weight:600;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hak-orange);display:flex;align-items:center;gap:10px}
.ym-cue::after{content:"";width:1px;height:40px;background:linear-gradient(var(--hak-orange),transparent);animation:ymdrop 2.2s infinite}
@keyframes ymdrop{0%{opacity:0;transform:translateY(-8px)}40%{opacity:1}100%{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.ym-cue::after{animation:none}}

/* Kapitel */
.chapter{background:var(--bg);color:var(--fg);padding:clamp(64px,12vh,150px) 0;transition:background .6s}
.chapter .inner{width:var(--maxw);margin-inline:auto;padding-inline:20px}
.chaphead{margin-bottom:clamp(28px,3vw,40px)}
.chaphead .kick{font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:14px}
.chaphead h2{font-size:clamp(2.1rem,6vw,4.2rem);color:var(--fg);margin:0}

.block{margin:clamp(28px,5vh,56px) 0}
.prose h3{font-size:clamp(1.4rem,3vw,2rem);color:var(--fg);margin:0 0 .5em}
.prose p{color:var(--fg-muted);max-width:60ch;margin:0 0 1em}
.prose p:first-of-type{color:var(--fg)}

.pull{border-left:3px solid var(--accent);padding:6px 0 6px clamp(20px,4vw,40px);margin:clamp(40px,7vh,80px) 0}
.pull q{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,4vw,2.6rem);line-height:1.15;color:var(--fg);quotes:none;display:block}
.pull .cite{margin-top:14px;font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint)}

.stats h3{font-family:var(--display);font-weight:800;font-size:.9rem;letter-spacing:.06em;color:var(--fg-muted);margin:0 0 24px}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:720px){.statgrid{grid-template-columns:1fr;gap:28px}}
.stat .num{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,8vw,5rem);color:var(--accent);line-height:.95;font-variant-numeric:tabular-nums}
.stat .lab{color:var(--fg-muted);font-size:.98rem;margin-top:8px;max-width:26ch}

.scrolly .sh{font-family:var(--display);font-weight:800;font-size:.9rem;letter-spacing:.08em;color:var(--fg-muted);margin-bottom:8px}
.scrolly .track{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,5vw,60px)}
@media(max-width:820px){.scrolly .track{grid-template-columns:1fr}}
.scrolly .stick{position:sticky;top:52px;height:calc(100svh - 52px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.scrolly .big{font-family:var(--display);font-weight:800;font-size:clamp(4rem,15vw,9rem);color:var(--accent);line-height:.9;font-variant-numeric:tabular-nums;transition:opacity .3s}
.scrolly .biglab{font-family:var(--display);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;color:var(--fg-faint);margin-top:6px}
.scrolly .steps{display:flex;flex-direction:column}
.scrolly .step{min-height:82svh;display:flex;align-items:center}
.scrolly .step p{color:var(--fg-muted);max-width:34ch;font-size:1.15rem;border-left:2px solid var(--border);padding-left:20px;transition:color .3s,border-color .3s}
.scrolly .step.on p{color:var(--fg);border-color:var(--accent)}
@media(max-width:820px){
  .scrolly .stick{position:sticky;top:52px;height:auto;padding:18px 0;background:var(--bg);flex-direction:row;align-items:baseline;gap:14px;z-index:2;border-bottom:1px solid var(--border)}
  .scrolly .big{font-size:clamp(2.6rem,14vw,4rem)}.scrolly .biglab{margin:0}.scrolly .step{min-height:60svh}
}

.embed{border:2px dashed var(--border);border-radius:6px;background:var(--surface);padding:clamp(24px,5vw,48px);text-align:center}
.embed .tag{font-family:var(--display);font-weight:800;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:12px}
.embed h3{font-size:clamp(1.3rem,3vw,1.9rem);color:var(--fg);margin:0 0 10px}
.embed p{color:var(--fg-muted);max-width:48ch;margin:0 auto}
.embed .ph{margin-top:20px;font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.1em;color:var(--fg-faint);text-transform:uppercase}
.embed iframe{width:100%;border:0;border-radius:4px}

.ym-foot{background:#000;color:rgba(255,255,255,.55);padding:70px 20px 90px;text-align:center}
.ym-foot .fm{font-family:var(--display);font-weight:800;letter-spacing:.26em;color:#fff;font-size:1.1rem}
.ym-foot .fn{font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;margin-top:14px;color:rgba(255,255,255,.4)}

/* Asphalt-Palette (Kapitel Tempo/Bremsweg) */
.pal-asphalt{--bg:linear-gradient(180deg,#1b1f24 0%,#0a0c0f 70%);--fg:#f4f6f8;--fg-muted:rgba(244,246,248,.72);--fg-faint:rgba(244,246,248,.45);--accent:#F29400;--accent-soft:rgba(242,148,0,.4);--border:rgba(242,148,0,.18);--surface:rgba(255,255,255,.05)}

/* Bremsweg-Vergleich */
.bw-wrap{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.bw-row{display:grid;grid-template-columns:70px 1fr 66px;gap:16px;align-items:center}
@media(max-width:680px){.bw-row{grid-template-columns:54px 1fr 56px;gap:10px}}
.bw-speed{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--fg);line-height:.95;font-variant-numeric:tabular-nums}
.bw-speed span{display:block;font-size:.58rem;letter-spacing:.12em;color:var(--fg-faint);font-weight:600;margin-top:2px}
.bw-track{position:relative;height:32px;background:var(--surface);border-radius:5px;overflow:hidden}
.bw-bar{position:absolute;left:0;top:0;height:100%;display:flex;transform:scaleX(0);transform-origin:left center;transition:transform 1.1s cubic-bezier(.22,1,.36,1);border-radius:5px;overflow:hidden}
.bw-row.in .bw-bar{transform:scaleX(1)}
.bw-react{height:100%;background:rgba(255,255,255,.22)}
.bw-brake{height:100%;background:var(--accent)}
.bw-total{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--accent);text-align:right;font-variant-numeric:tabular-nums}
.bw-legend{display:flex;gap:22px;margin-top:18px;font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--fg-muted)}
.bw-legend i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:7px}
.bw-note{color:var(--fg-faint);font-size:.85rem;max-width:60ch;margin:22px 0 0}

/* Medien (Video / YouTube) */
.ym-media{margin:22px 0 6px}
.ym-media video{width:100%;max-height:72vh;border:0;border-radius:8px;display:block;background:#000}
.ym-ytwrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.ym-ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ym-cap{font-family:var(--display);font-weight:600;font-size:.8rem;color:var(--fg-faint);margin-top:9px;letter-spacing:.02em}

/* Beitragsinhalt (Gutenberg-Blöcke) im Kapitel — sieht aus wie das SEKUNDEN-Design */
.chapter .entry p{color:var(--fg-muted);max-width:64ch;margin:0 0 1em;font-size:1.02em}
.chapter .entry > p:first-of-type{color:var(--fg)}
.chapter .entry h2,.chapter .entry h3{font-family:var(--display);font-weight:800;color:var(--fg);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.chapter .entry h2{font-size:clamp(1.5rem,3.4vw,2.3rem);margin:1.3em 0 .4em}
.chapter .entry h3{font-size:clamp(1.3rem,2.6vw,1.7rem);margin:1.1em 0 .35em}
.chapter .entry a{color:var(--accent);text-underline-offset:3px}
.chapter .entry strong{color:var(--fg)}
.chapter .entry blockquote{border-left:3px solid var(--accent);padding:6px 0 6px clamp(18px,3vw,34px);margin:clamp(28px,5vh,60px) 0}
.chapter .entry blockquote p{font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,3.4vw,2.2rem);line-height:1.18;color:var(--fg);max-width:22ch;margin:0}
.chapter .entry ul,.chapter .entry ol{color:var(--fg-muted);max-width:60ch;padding-left:1.2em;margin:0 0 1em}
.chapter .entry li{margin:.3em 0}
.chapter .entry figure,.chapter .entry .wp-block-image{margin:clamp(20px,4vh,40px) 0}
.chapter .entry img{max-width:100%;height:auto;border-radius:6px}
.chapter .entry figcaption{font-family:var(--display);font-weight:600;font-size:.8rem;color:var(--fg-faint);margin-top:8px;text-align:center}
.chapter .entry iframe{max-width:100%}