/* =====================================================================
   NACHTFAHRT — Designsystem für niwergol.de (Entwurf 27.09.2026)
   Tiefsee-Grund, biolumineszentes Türkis, Positionslicht-Amber, KI-Violett.
   Schriften lokal (DSGVO): Bricolage Grotesque, Inter Tight,
   Instrument Serif, JetBrains Mono.
   ===================================================================== */

@font-face{font-family:"Bricolage";src:url("fonts/bricolage-vf.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("fonts/inter-tight-vf.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-vf.woff2") format("woff2");font-weight:100 800;font-display:swap}

:root{
  --bg:#04070D;
  --bg-2:#070D17;
  --flaeche:#0B1422;
  --flaeche-2:#101C2E;
  --glas:rgba(16,30,46,.52);
  --glas-hell:rgba(255,255,255,.045);
  --linie:rgba(150,220,230,.13);
  --linie-stark:rgba(150,220,230,.26);
  --text:#EAF3F5;
  --text-2:#A9B8C4;
  --text-3:#7C8E9B;
  --tuerkis:#3CF0D2;
  --tuerkis-tief:#12A594;
  --amber:#FFB547;
  --violett:#8B7CFF;
  --signalblau:#4FB8FF;
  --backbord:#FF5D73;
  --akzent:var(--tuerkis);

  /* Farbnamen der alten Seite - der Capt-Chat liest sie mit */
  --ink:var(--bg); --ink-2:var(--flaeche); --horizon:var(--flaeche-2);
  --gold:var(--amber); --muted:var(--text-2);

  --f-display:"Bricolage","Inter Tight",system-ui,sans-serif;
  --f-text:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-serif:"Instrument Serif",Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --rand:clamp(18px,4vw,72px);
  --breite:1720px;
  --radius:22px;
  --radius-klein:14px;
  --kopf-h:76px;
  --funk-h:0px; /* 34px, solange der Aufbau-Streifen steht (setzt der Block zwischen CC-AUFBAU-Marken) */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-feder:cubic-bezier(.34,1.56,.64,1);
}

/* Seitenwechsel als weiche Überblendung (Chrome/Edge/Safari) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-aus .35s var(--ease) both}
::view-transition-new(root){animation:vt-ein .55s var(--ease) both}
@keyframes vt-aus{to{opacity:0;filter:blur(6px);transform:scale(.985)}}
@keyframes vt-ein{from{opacity:0;filter:blur(8px);transform:scale(1.015)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + var(--funk-h) + 24px);background:var(--bg)}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font-family:var(--f-text);font-size:clamp(16px,1.05vw,18px);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--tuerkis);color:var(--bg)}
:focus-visible{outline:2px solid var(--tuerkis);outline-offset:3px;border-radius:6px}
button{font:inherit;color:inherit}
strong{color:var(--text);font-weight:650}
em{font-family:var(--f-serif);font-style:italic;font-size:1.08em;letter-spacing:.005em}

/* Filmkorn über allem - gibt dem Dunkel Tiefe */
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.mono{font-family:var(--f-mono);font-feature-settings:"zero" 1}
.container{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.lesen{max-width:70ch}
.nur-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Funkmeldung (Aufbau-Hinweis) ---------- */
.cc-aufbau{
  position:fixed;top:0;left:0;right:0;z-index:2000;height:var(--funk-h);
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-mono);font-size:13px;letter-spacing:.03em;color:var(--text-2);
  background:rgba(4,7,13,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linie);padding:0 16px;text-align:center;
}
.cc-aufbau::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(255,181,71,.6);animation:funk 2.2s infinite;flex:none}
@keyframes funk{0%{box-shadow:0 0 0 0 rgba(255,181,71,.55)}70%{box-shadow:0 0 0 9px rgba(255,181,71,0)}100%{box-shadow:0 0 0 0 rgba(255,181,71,0)}}
.cc-aufbau .kurz{display:none}
@media (max-width:620px){.cc-aufbau .lang{display:none}.cc-aufbau .kurz{display:inline}}

.sprunglink{position:absolute;left:-9999px}
.sprunglink:focus{position:fixed;left:12px;top:44px;z-index:9999;background:var(--tuerkis);color:var(--bg);padding:12px 18px;border-radius:10px;font-weight:600;text-decoration:none}

/* ---------- Kopf: schwebende Glas-Leiste ---------- */
.kopfleiste{
  position:fixed;z-index:1500;top:calc(var(--funk-h) + 12px);left:50%;transform:translateX(-50%);
  width:min(calc(100% - 2*clamp(12px,2vw,32px)),1480px);height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 10px 0 18px;
  border-radius:999px;border:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),top .4s var(--ease);
}
.kopfleiste.ist-gescrollt{
  background:rgba(7,13,23,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-color:var(--linie);box-shadow:0 18px 50px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);
}
.kopfleiste .marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-family:var(--f-display);font-weight:650;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.kopfleiste .marke svg{width:34px;height:34px;flex:none}
.kopfleiste .marke .rose{transform-origin:50% 50%;transition:transform 1.2s var(--ease-feder)}
.kopfleiste .marke:hover .rose{transform:rotate(135deg)}

.hauptnav{display:flex;align-items:center;gap:4px}
.nav-gruppe{position:relative}
.nav-gruppe>button,.nav-direkt{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:0;background:none;cursor:pointer;
  font-family:var(--f-text);font-size:15px;font-weight:500;color:var(--text-2);text-decoration:none;white-space:nowrap;
  transition:color .25s,background .25s;
}
.nav-gruppe>button:hover,.nav-gruppe.offen>button,.nav-gruppe.hier>button{color:var(--text);background:var(--glas-hell)}
.nav-gruppe .deg{font-family:var(--f-mono);font-size:13px;font-weight:600}
.xeye-deg{color:var(--tuerkis)} .roman-deg{color:var(--amber)} .ai-deg{color:var(--violett)} .film-deg{color:var(--signalblau)}
.nav-gruppe .pfeil{font-size:9px;opacity:.6;transition:transform .3s var(--ease)}
.nav-gruppe.offen .pfeil{transform:rotate(180deg)}
.nav-gruppe.hier>button::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:50%;background:currentColor;transform:translateX(-50%);box-shadow:0 0 10px currentColor}
.nav-gruppe.hier .deg{text-shadow:0 0 12px currentColor}
.nav-panel{
  position:absolute;top:calc(100% + 12px);left:50%;min-width:300px;padding:8px;border-radius:18px;
  background:rgba(9,17,29,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--linie-stark);box-shadow:0 30px 70px -20px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translate(-50%,-8px) scale(.98);transform-origin:top center;
  transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s .35s;
}
.nav-gruppe.offen .nav-panel{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:0s}
.nav-panel a{display:block;padding:12px 14px;border-radius:12px;text-decoration:none;color:var(--text);font-weight:600;font-size:15px;position:relative;overflow:hidden}
.nav-panel a::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--akzent) 16%,transparent),transparent 70%);opacity:0;transition:opacity .25s}
.nav-panel a:hover::before,.nav-panel a:focus-visible::before{opacity:1}
.nav-panel .unter{display:block;font-weight:400;font-size:13px;color:var(--text-2);margin-top:2px;position:relative}

.nav-knopf{display:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--linie-stark);background:var(--glas);cursor:pointer;position:relative}
.nav-knopf span{position:absolute;left:14px;right:14px;height:1.6px;background:var(--text);border-radius:2px;transition:transform .35s var(--ease),opacity .2s}
.nav-knopf span:nth-child(1){top:17px}.nav-knopf span:nth-child(2){top:23px}.nav-knopf span:nth-child(3){top:29px}
.nav-offen .nav-knopf span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-offen .nav-knopf span:nth-child(2){opacity:0}
.nav-offen .nav-knopf span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:980px){
  .nav-knopf{display:block}
  .kopfleiste{padding-right:8px}
  .hauptnav{
    position:fixed;inset:calc(-1 * (var(--funk-h) + 12px)) calc(-1 * clamp(12px,2vw,32px)) auto;height:100dvh;
    flex-direction:column;align-items:stretch;justify-content:center;gap:6px;padding:120px 28px 60px;
    background:radial-gradient(120% 80% at 80% 0%,rgba(60,240,210,.12),transparent 60%),rgba(4,7,13,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s;z-index:-1;overflow-y:auto;
  }
  .nav-offen .hauptnav{opacity:1;visibility:visible;transition-delay:0s}
  .nav-gruppe>button{width:100%;height:auto;padding:18px 6px;justify-content:space-between;font-family:var(--f-display);font-size:clamp(26px,7vw,40px);font-weight:600;color:var(--text);border-radius:0;border-bottom:1px solid var(--linie);background:none!important}
  .nav-gruppe>button>span:first-child{display:flex;align-items:baseline;gap:14px}
  .nav-gruppe .deg{font-size:14px}
  .nav-gruppe.hier>button::after{display:none}
  .nav-panel{position:static;transform:none!important;min-width:0;opacity:1;visibility:visible;display:none;background:none;border:0;box-shadow:none;padding:6px 0 12px 0;backdrop-filter:none}
  .nav-gruppe.offen .nav-panel{display:block}
  .nav-offen .nav-gruppe{animation:menue-ein .6s var(--ease) both}
  .nav-offen .nav-gruppe:nth-child(2){animation-delay:.06s}.nav-offen .nav-gruppe:nth-child(3){animation-delay:.12s}
}
@keyframes menue-ein{from{opacity:0;transform:translateY(24px)}}

/* ---------- Typografie ---------- */
.eyebrow{font-family:var(--f-mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.bearing{font-family:var(--f-mono);font-size:14px;letter-spacing:.12em;color:var(--text-2);display:inline-flex;align-items:baseline;gap:12px;text-transform:uppercase}
.bearing .deg{font-size:clamp(28px,2.4vw,38px);color:var(--akzent);font-weight:500;letter-spacing:0;text-shadow:0 0 24px color-mix(in srgb,var(--akzent) 55%,transparent)}
.kicker{font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent)}
.titel-xxl{font-family:var(--f-display);font-weight:700;font-size:clamp(46px,8.4vw,150px);line-height:.92;letter-spacing:-.045em;margin:0}
.titel-xl{font-family:var(--f-display);font-weight:650;font-size:clamp(38px,5.4vw,92px);line-height:.98;letter-spacing:-.035em;margin:0}
.titel-l{font-family:var(--f-display);font-weight:650;font-size:clamp(30px,3.4vw,58px);line-height:1.04;letter-spacing:-.03em;margin:0}
.titel-m{font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.1vw,34px);line-height:1.12;letter-spacing:-.02em;margin:0}
.serif-akzent{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.leuchtschrift{background:linear-gradient(100deg,var(--tuerkis) 0%,#b8fff2 38%,var(--violett) 75%,var(--tuerkis) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:schimmer 9s linear infinite}
@keyframes schimmer{to{background-position:-220% 0}}
.lead{font-size:clamp(18px,1.4vw,23px);line-height:1.6;color:var(--text-2);max-width:62ch}
.lead .hl,.hl{color:var(--text);background:linear-gradient(transparent 62%,color-mix(in srgb,var(--akzent) 30%,transparent) 62%);padding:0 .1em}

/* Buchstaben/Wörter-Einblendung */
.split-wort{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split-wort>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease)}
.ist-sichtbar .split-wort>span,.split-wort.an>span{transform:none}

/* ---------- Knöpfe ---------- */
.btn,.btn-main,.btn-outline,.btn-gold{
  --b:var(--akzent);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:999px;font-family:var(--f-text);font-weight:600;font-size:16px;text-decoration:none;
  cursor:pointer;border:1px solid transparent;isolation:isolate;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s,border-color .3s;
}
.btn-main,.btn-gold{background:var(--b);color:#03110F;box-shadow:0 0 0 0 color-mix(in srgb,var(--b) 50%,transparent),0 12px 40px -12px color-mix(in srgb,var(--b) 70%,transparent)}
.btn-gold{--b:var(--amber);color:#1B1000}
/* G-01: .fliesstext a faerbt sonst die Knopfschrift in die Hintergrundfarbe */
.fliesstext a.btn-main,.fliesstext a.btn-main:visited{color:#03110F}
.fliesstext a.btn-gold,.fliesstext a.btn-gold:visited{color:#1B1000}
.btn-main::before,.btn-gold::before{content:"";position:absolute;inset:-1px;z-index:-1;background:radial-gradient(120px circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.55),transparent 60%);opacity:0;transition:opacity .3s}
.btn-main:hover::before,.btn-gold:hover::before{opacity:1}
.btn-main:hover,.btn-gold:hover{box-shadow:0 0 0 6px color-mix(in srgb,var(--b) 18%,transparent),0 18px 50px -10px color-mix(in srgb,var(--b) 80%,transparent)}
.btn-outline{background:rgba(255,255,255,.02);color:var(--text);border-color:var(--linie-stark);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-outline:hover{border-color:var(--b);color:var(--b);background:color-mix(in srgb,var(--b) 8%,transparent)}
.btn-soon{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;border:1px dashed var(--linie-stark);color:var(--text-3);font-weight:600;cursor:not-allowed}
.soon-badge,.bald-badge,.kontakt-soon-badge{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.06em;padding:4px 10px;border-radius:999px;color:var(--amber);background:rgba(255,181,71,.12);border:1px solid rgba(255,181,71,.3);white-space:nowrap}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pfeil-ico{width:16px;height:16px;transition:transform .35s var(--ease)}
a:hover .pfeil-ico{transform:translate(3px,-3px)}

/* ---------- Glas-Kacheln mit Lichtkegel ---------- */
.glas{
  --mx:50%;--my:50%;
  position:relative;border-radius:var(--radius);background:linear-gradient(180deg,rgba(20,36,54,.55),rgba(10,18,30,.55));
  border:1px solid var(--linie);isolation:isolate;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -40px rgba(0,0,0,.9);
  transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.glas::before{ /* Lichtkegel */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx) var(--my),color-mix(in srgb,var(--akzent) 18%,transparent),transparent 45%);
  opacity:0;transition:opacity .4s;
}
.glas::after{ /* leuchtende Kante */
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx) var(--my),color-mix(in srgb,var(--akzent) 90%,transparent),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s;
}
.glas:hover::before,.glas:hover::after,.glas:focus-within::before,.glas:focus-within::after{opacity:1}
.glas:hover{border-color:color-mix(in srgb,var(--akzent) 30%,transparent)}
[data-tilt]{transform-style:preserve-3d;will-change:transform}
[data-tilt] .tilt-tief{transform:translateZ(40px)}

/* ---------- Abschnitte ---------- */
.sektion{position:relative;padding-block:clamp(80px,11vw,180px)}
.sektion-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 60px;margin-bottom:clamp(40px,5vw,80px)}
.trenner{height:1px;background:linear-gradient(90deg,transparent,var(--linie-stark),transparent);border:0;margin:0}

/* Einblenden beim Scrollen */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
[data-reveal].ist-sichtbar{opacity:1;transform:none}
[data-reveal="links"]{transform:translateX(-40px)}
[data-reveal="zoom"]{transform:scale(.94)}

/* ---------- Seiten-Hero (Unterseiten) ---------- */
.hero-seite{position:relative;min-height:min(92vh,980px);display:flex;align-items:flex-end;overflow:hidden;padding:calc(var(--funk-h) + 140px) 0 clamp(56px,7vw,110px)}
.hero-seite .stroemung{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-seite::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(90% 70% at 20% 100%,transparent,rgba(4,7,13,.2) 50%,var(--bg) 100%),linear-gradient(180deg,rgba(4,7,13,.3),transparent 30%,transparent 70%,var(--bg))}
.hero-seite .container{position:relative;z-index:2}
.hero-seite .kopfzeile{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-bottom:28px}
.hero-seite h1{max-width:18ch}
.hero-seite .lead{margin-top:28px}
.hero-raster{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--linie) 1px,transparent 1px),linear-gradient(90deg,var(--linie) 1px,transparent 1px);background-size:88px 88px;
  -webkit-mask:radial-gradient(70% 60% at 70% 40%,#000,transparent 75%);mask:radial-gradient(70% 60% at 70% 40%,#000,transparent 75%)}

/* ---------- HUD / Telemetrie ---------- */
.hud{display:flex;flex-wrap:wrap;gap:8px}
.hud-chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--text-2);background:rgba(4,7,13,.55);border:1px solid var(--linie);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap}
.hud-chip b{color:var(--text);font-weight:600}
.hud-chip i{width:6px;height:6px;border-radius:50%;background:var(--tuerkis);box-shadow:0 0 10px var(--tuerkis);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- Laufband ---------- */
.laufband{position:relative;overflow:hidden;border-block:1px solid var(--linie);padding:22px 0;background:rgba(7,13,23,.6);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.laufband-spur{display:flex;gap:48px;width:max-content;animation:laufband 38s linear infinite}
.laufband:hover .laufband-spur{animation-play-state:paused}
.laufband span{font-family:var(--f-display);font-weight:600;font-size:clamp(26px,3.4vw,54px);letter-spacing:-.03em;white-space:nowrap;display:flex;align-items:center;gap:48px;color:transparent;-webkit-text-stroke:1px rgba(234,243,245,.4)}
.laufband span:nth-child(odd){color:var(--text);-webkit-text-stroke:0}
.laufband span::after{content:"";width:12px;height:12px;border:1.5px solid var(--tuerkis);transform:rotate(45deg);flex:none}
@keyframes laufband{to{transform:translateX(-50%)}}

/* ---------- Status-Pille ---------- */
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--akzent) 12%,transparent);border:1px solid color-mix(in srgb,var(--akzent) 35%,transparent)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--akzent);box-shadow:0 0 12px var(--akzent);animation:blink 2s infinite}

/* ---------- Bereichsfarben ---------- */
.bereich-xeye,.card.xeye{--akzent:var(--tuerkis)}
.bereich-roman,.card.roman{--akzent:var(--amber)}
.bereich-ai,.card.ai{--akzent:var(--violett)}
.bereich-film,.card.film{--akzent:var(--signalblau)}

/* ---------- Video-Boxen ---------- */
.videobox{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--flaeche);aspect-ratio:16/9;border:1px solid var(--linie);isolation:isolate}
.videobox video,.videobox img{width:100%;height:100%;object-fit:cover}
.videobox .play{
  position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(4,7,13,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:22px;cursor:pointer;z-index:2;
  display:grid;place-items:center;transition:transform .4s var(--ease-feder),background .3s;
}
.videobox .play::before,.videobox .play::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--akzent);animation:sonar 2.6s var(--ease) infinite;opacity:0}
.videobox .play::after{animation-delay:1.3s}
.videobox:hover .play{transform:scale(1.12);background:color-mix(in srgb,var(--akzent) 35%,rgba(4,7,13,.4))}
.videobox.spielt .play{opacity:0;pointer-events:none}
@keyframes sonar{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.1);opacity:0}}
.ki-badge,.ki-hinweis-hero{
  position:absolute;top:14px;right:16px;z-index:3;pointer-events:none;
  font-family:var(--f-serif);font-style:italic;font-size:15px;color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(0,0,0,.8);white-space:nowrap
}

/* ---------- Karten-Raster ---------- */
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(14px,1.4vw,24px)}
.karte{padding:clamp(24px,2.2vw,36px);display:flex;flex-direction:column;gap:12px}
.karte .nr{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.16em;color:var(--akzent)}
.karte h3{font-family:var(--f-display);font-weight:600;font-size:clamp(21px,1.6vw,26px);line-height:1.2;letter-spacing:-.015em;margin:0}
.karte p{margin:0;color:var(--text-2);font-size:16px}

/* ---------- Artikel mit Inhaltsverzeichnis ---------- */
.artikel-raster{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(32px,6vw,120px);align-items:start}
.toc{position:sticky;top:calc(var(--funk-h) + 110px);align-self:start}
.toc-titel{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;border-left:1px solid var(--linie);position:relative}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:12px;padding:9px 0 9px 18px;text-decoration:none;color:var(--text-3);font-size:15px;line-height:1.35;margin-left:-1px;border-left:1px solid transparent;transition:color .25s,border-color .25s}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--f-mono);font-size:11px;padding-top:3px;color:var(--text-3)}
.toc a:hover{color:var(--text)}
.toc a.aktiv{color:var(--text);border-left-color:var(--akzent)}
.toc a.aktiv::before{color:var(--akzent)}
.toc-fortschritt{position:absolute;left:-1px;top:0;width:1px;background:var(--akzent);box-shadow:0 0 12px var(--akzent);height:var(--lese,0%);transition:height .2s linear}
.fliesstext{max-width:72ch}
.fliesstext>p,.fliesstext li{color:var(--text-2)}
.fliesstext>p{margin:0 0 1.2em}
.fliesstext a{color:var(--akzent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.fliesstext h2{font-family:var(--f-display);font-weight:650;font-size:clamp(28px,2.8vw,46px);line-height:1.08;letter-spacing:-.03em;margin:clamp(72px,8vw,130px) 0 28px;display:flex;align-items:flex-start;gap:16px;color:var(--text)}
.fliesstext h2:first-child{margin-top:0}
.h2sym{width:40px;height:40px;padding:8px;flex:none;border-radius:12px;color:var(--akzent);background:color-mix(in srgb,var(--akzent) 12%,transparent);border:1px solid color-mix(in srgb,var(--akzent) 30%,transparent);margin-top:2px}
.fliesstext ul{list-style:none;padding:0;margin:0 0 1.4em;display:grid;gap:14px}
.fliesstext ul li{position:relative;padding:18px 20px 18px 52px;border-radius:var(--radius-klein);background:var(--glas-hell);border:1px solid var(--linie)}
.fliesstext ul li::before{content:"";position:absolute;left:20px;top:26px;width:12px;height:12px;border:1.5px solid var(--akzent);transform:rotate(45deg)}
.box{padding:clamp(22px,2vw,32px);border-radius:var(--radius);background:var(--glas-hell);border:1px solid var(--linie);margin:28px 0}
.box p{margin:0;color:var(--text-2)}
.box.accent{background:linear-gradient(135deg,color-mix(in srgb,var(--akzent) 14%,transparent),transparent 70%);border-color:color-mix(in srgb,var(--akzent) 35%,transparent)}
.highlight{font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.3vw,36px);line-height:1.2;letter-spacing:-.02em;color:var(--text)!important;border-left:2px solid var(--akzent);padding:6px 0 6px 24px;margin:40px 0!important}

/* Fragen & Antworten */
.faq{display:grid;gap:10px;margin-top:8px}
.faq details{border-radius:var(--radius-klein);background:var(--glas-hell);border:1px solid var(--linie);transition:border-color .3s,background .3s}
.faq details[open]{border-color:color-mix(in srgb,var(--akzent) 35%,transparent);background:color-mix(in srgb,var(--akzent) 6%,transparent)}
.faq summary{list-style:none;cursor:pointer;padding:20px 60px 20px 22px;font-weight:600;color:var(--text);position:relative;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:50%;width:12px;height:12px;border-right:1.5px solid var(--akzent);border-bottom:1.5px solid var(--akzent);transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .antwort{padding:0 22px 22px;color:var(--text-2)}
.faq .antwort p{margin:0}

/* ---------- Diagramme: Knotenketten ---------- */
.dia{margin:40px 0;padding:clamp(22px,2.4vw,40px);border-radius:var(--radius);border:1px solid var(--linie);background:
  linear-gradient(var(--linie) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,var(--linie) 1px,transparent 1px) 0 0/40px 40px,var(--bg-2);position:relative;overflow:hidden}
.dia::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 80% at 50% 0%,transparent,var(--bg-2) 90%);pointer-events:none}
.dia>*{position:relative}
.dia figcaption{font-family:var(--f-display);font-weight:600;font-size:clamp(19px,1.5vw,23px);line-height:1.3;color:var(--text);margin-bottom:26px;max-width:60ch}
.dia-fuss,.grafik-fuss{margin:24px 0 0;color:var(--text-2);font-size:15.5px}
.kette{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:14px;position:relative}
.kette::before{content:"";position:absolute;left:4%;right:4%;top:28px;height:1px;background:linear-gradient(90deg,transparent,var(--linie-stark) 8%,var(--linie-stark) 92%,transparent)}
.kette::after{content:"";position:absolute;top:25px;left:4%;width:7px;height:7px;border-radius:50%;background:var(--akzent);box-shadow:0 0 14px 3px var(--akzent);animation:puls-lauf 5s linear infinite}
@keyframes puls-lauf{0%{left:4%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:96%;opacity:0}}
.kette.sechs{--n:6}.kette.vier{--n:4}
.knoten{display:flex;flex-direction:column;gap:6px;padding-top:0;position:relative}
.knoten .stufe{align-self:flex-start;display:grid;place-items:center;min-width:56px;height:56px;padding:0 10px;border-radius:16px;background:var(--flaeche);border:1px solid var(--linie-stark);font-size:12px;color:var(--akzent);margin-bottom:10px;position:relative;z-index:1;transition:transform .4s var(--ease-feder),box-shadow .3s}
.knoten:hover .stufe{transform:translateY(-4px) scale(1.06);box-shadow:0 0 0 6px color-mix(in srgb,var(--akzent) 14%,transparent)}
.knoten .stname{font-family:var(--f-display);font-weight:600;font-size:18px;color:var(--text);line-height:1.2}
.knoten .sttxt,.sttxt{font-size:14.5px;color:var(--text-2);line-height:1.5}
.knoten.mensch .stufe{color:#1B1000;background:var(--amber);border-color:var(--amber);box-shadow:0 0 30px -4px var(--amber)}
.knoten.mensch .stname{color:var(--amber)}
.kreis .knoten .stufe{min-width:0;font-size:11px;letter-spacing:.08em}
.ruecklauf{display:flex;align-items:center;gap:14px;margin-top:24px;padding:14px 18px;border-radius:var(--radius-klein);border:1px dashed var(--linie-stark)}
.rl-pfeil{font-size:22px;color:var(--akzent);animation:rueck 2.4s var(--ease) infinite}
@keyframes rueck{50%{transform:translateX(-8px)}}

.leitstand,.schutzgitter{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 20px;border-radius:var(--radius-klein);background:color-mix(in srgb,var(--akzent) 10%,transparent);border:1px solid color-mix(in srgb,var(--akzent) 30%,transparent);margin-bottom:18px}
.schutzgitter{margin:18px 0 0;background:rgba(255,93,115,.08);border-color:rgba(255,93,115,.3)}
.ls-titel,.sg-kopf{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent)}
.sg-kopf{color:var(--backbord)}
.ls-txt{color:var(--text-2);font-size:15px}
.uebergabe{display:grid;grid-template-columns:1fr 60px 1.1fr 60px 1fr;align-items:stretch;gap:0}
.ue-knoten,.ue-zettel{padding:18px;border-radius:var(--radius-klein);background:var(--flaeche);border:1px solid var(--linie-stark);display:flex;flex-direction:column;gap:6px}
.ue-zettel{background:linear-gradient(160deg,rgba(255,181,71,.12),rgba(255,181,71,.02));border-color:rgba(255,181,71,.4);transform:rotate(-1.2deg)}
.zettel-kopf{color:var(--amber);font-size:14px}
.ue-knoten .stufe{font-size:11px;color:var(--akzent);letter-spacing:.1em}
.ue-knoten .stname{font-family:var(--f-display);font-weight:600;color:var(--text)}
.ue-pfeil{position:relative;align-self:center;height:2px;margin:0 8px;background:linear-gradient(90deg,var(--linie-stark),var(--akzent))}
.ue-pfeil::after{content:"";position:absolute;right:-2px;top:-4px;border-left:8px solid var(--akzent);border-top:5px solid transparent;border-bottom:5px solid transparent}
.ue-pfeil::before{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber);animation:zettel-flug 2.8s var(--ease) infinite}
@keyframes zettel-flug{0%{left:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}

.stationen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:st}
.station-kachel,.stationen .station{padding:18px;border-radius:var(--radius-klein);background:var(--flaeche);border:1px solid var(--linie);display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.stationen .station::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,transparent,var(--akzent),transparent);transform:translateX(-100%);animation:station-lauf 8s linear infinite;animation-delay:calc(var(--nr) * 1s - 1s)}
@keyframes station-lauf{0%{transform:translateX(-100%)}12%{transform:translateX(100%)}100%{transform:translateX(100%)}}
.stationen .station:hover{border-color:color-mix(in srgb,var(--akzent) 40%,transparent);transform:translateY(-3px)}
.stationen .stufe{font-size:12px;color:var(--akzent)}
.stationen .stname{font-family:var(--f-display);font-weight:600;color:var(--text);font-size:17px}

/* Fensterrahmen für Bildschirmfotos */
.fensterrahmen{border-radius:16px;overflow:hidden;border:1px solid var(--linie-stark);background:var(--flaeche);box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.02)}
.fensterleiste{display:flex;gap:7px;padding:12px 14px;border-bottom:1px solid var(--linie);background:rgba(255,255,255,.02)}
.fensterleiste span{width:11px;height:11px;border-radius:50%;background:var(--linie-stark)}
.fensterleiste span:nth-child(1){background:#FF5D73}.fensterleiste span:nth-child(2){background:#FFB547}.fensterleiste span:nth-child(3){background:#3CF0D2}
.schaubild{margin:40px 0}
.schaubild figcaption{font-family:var(--f-display);font-weight:600;font-size:clamp(19px,1.5vw,23px);color:var(--text);margin-bottom:22px}

/* ---------- Fuß ---------- */
.fuss{position:relative;margin-top:clamp(60px,8vw,140px);border-top:1px solid var(--linie);padding:clamp(56px,7vw,110px) 0 36px;overflow:hidden}
.fuss-gross{font-family:var(--f-display);font-weight:700;font-size:clamp(52px,12.5vw,230px);line-height:.85;letter-spacing:-.06em;margin:0 0 clamp(36px,5vw,70px);text-align:center;
  background:linear-gradient(180deg,rgba(234,243,245,.16),rgba(234,243,245,.02));-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;white-space:nowrap}
.fuss-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 36px;font-size:14.5px;color:var(--text-2)}
.fuss-zeile .mono{font-size:13px;letter-spacing:.06em}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.footer-links a,.fuss a{color:var(--text-2);text-decoration:none;position:relative}
.footer-links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--tuerkis);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.footer-links a:hover{color:var(--text)}
.footer-links a:hover::after{transform:scaleX(1)}
.fuss-koord{font-family:var(--f-mono);font-size:12px;color:var(--text-3);letter-spacing:.1em}

/* ---------- Kontakt-Knopf (Rückfall ohne Chat) ---------- */
.kontakt-wrap{position:fixed;right:18px;bottom:18px;z-index:1400;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.kontakt-schweber{display:flex;align-items:center;gap:8px;height:52px;padding:0 20px;border-radius:999px;border:1px solid var(--linie-stark);background:rgba(9,17,29,.85);backdrop-filter:blur(14px);cursor:pointer;font-weight:600}
.kontakt-popover{display:none;flex-direction:column;min-width:240px;padding:8px;border-radius:18px;background:rgba(9,17,29,.95);border:1px solid var(--linie-stark)}
.kontakt-popover.offen{display:flex}
.kontakt-option{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;text-decoration:none;color:var(--text);background:none;border:0;cursor:pointer;text-align:left;width:100%;font-size:15px}
.kontakt-option:hover{background:var(--glas-hell)}
.kontakt-option-soon{color:var(--text-3);cursor:default}

/* ---------- Capt Chat: bewusst NICHT gestaltet ----------
   Befund 30.09.2026 von Roman: hier stand ein Block, der acht
   Selektoren aus dem Namensraum des Chats von aussen neu einkleidete,
   jeden mit hoechster Dringlichkeit. Zwei Folgen: der Kompass, den der
   Chat selbst zeichnet, war uebermalt, und sein Bereich wurde auf
   Android zu gross, sodass der Senden-Knopf abgeschnitten war.
       WER IN EINEM FREMDEN NAMENSRAUM MALT, UEBERMALT AUCH, WAS ER
       NICHT GESEHEN HAT.
   Der Chat bemisst sich selbst. Sein Namensraum gehoert ihm. Zwei
   Bilderfolgen, die nur hier benutzt wurden, sind mit entfernt.
   Der Aufbau-Streifen weiter oben ist NICHT der Chat, auch wenn sein
   Name aehnlich beginnt - der bleibt unberuehrt.
   Hier stehen absichtlich keine Selektornamen:
       EIN KOMMENTAR, DER DIE NAMEN NENNT, DIE ER VERBIETET, LAESST
       JEDE SUCHE FUENDIG WERDEN.
   Einzelheiten in meldungen/HOMEPAGE-an-CODE-nachtfahrt-befunde-30-09.md
   Bitte hier nichts wieder einsetzen. */

/* ---------- Simulations-Hinweis ---------- */
.sim-dialog{border:0;padding:0;background:transparent;max-width:min(520px,calc(100% - 32px));color:var(--text)}
.sim-dialog::backdrop{background:rgba(2,4,8,.7);backdrop-filter:blur(6px)}
.sim-box{padding:32px;border-radius:24px;background:linear-gradient(180deg,#0E1B2C,#070D17);border:1px solid var(--linie-stark);box-shadow:0 40px 100px -30px #000}
.sim-box .kicker{color:var(--amber)}
.sim-box h2{font-family:var(--f-display);font-weight:650;font-size:26px;line-height:1.15;letter-spacing:-.02em;margin:12px 0}
.sim-box p{color:var(--text-2);margin:0 0 22px}
.sim-box .cta-row{margin-top:0}
.toast{position:fixed;left:50%;bottom:28px;z-index:9500;transform:translate(-50%,30px);opacity:0;padding:14px 20px;border-radius:999px;background:rgba(9,17,29,.95);border:1px solid var(--linie-stark);font-size:14.5px;box-shadow:0 20px 50px -20px #000;transition:all .4s var(--ease);pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.an{opacity:1;transform:translate(-50%,0)}

/* ---------- Zeiger-Leuchten ---------- */
/* Als Pseudo-Element von <body>, NICHT als eigenes Element: capt-chat.js
   sucht in seiner Ecke nach festen Elementen und weicht ihnen nach oben
   aus - ein eigenes Leucht-Element unter dem Mauszeiger hat den Chat beim
   Groessenwechsel aus der Ecke geschoben (Befund 29.09.2026). Pseudo-
   Elemente sieht seine Suche nicht. */
body.mit-licht::before{content:"";position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(60,240,210,.07),transparent 60%);transform:translate3d(var(--zx,-999px),var(--zy,-999px),0)}
.sonar-ping{position:fixed;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1px solid var(--tuerkis);pointer-events:none;z-index:9400;animation:ping .9s var(--ease) forwards}
@keyframes ping{to{transform:scale(9);opacity:0}}

/* ---------- Kursanzeige (Lesefortschritt als Kompass) ---------- */
.kursanzeige{position:fixed;left:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:1300;width:58px;height:58px;border-radius:50%;background:rgba(7,13,23,.8);border:1px solid var(--linie-stark);backdrop-filter:blur(10px);display:grid;place-items:center;text-decoration:none;opacity:0;transform:scale(.8);transition:opacity .4s,transform .4s var(--ease-feder)}
.kursanzeige.an{opacity:1;transform:none}
.kursanzeige svg{position:absolute;inset:0;width:100%;height:100%}
.kursanzeige .nadel{transform-origin:29px 29px;transition:transform .2s linear}
.kursanzeige .wert{font-family:var(--f-mono);font-size:10px;color:var(--text);position:relative;margin-top:26px}

/* ---------- Tablet quer & kleiner ---------- */
@media (max-width:1180px){
  .artikel-raster{grid-template-columns:minmax(200px,240px) minmax(0,1fr);gap:40px}
  .kette.sechs{--n:3;row-gap:32px}.kette.sechs::before,.kette.sechs::after{display:none}
  .stationen{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .artikel-raster{grid-template-columns:minmax(0,1fr)}
  .artikel-raster>*,.toc,.toc>*{min-width:0;max-width:100%}
  .toc{position:relative;top:0}
  .toc ol{display:flex;gap:8px;overflow-x:auto;border:0;padding-bottom:8px;scrollbar-width:none}
  .toc li{flex:none}
  .toc a{border:1px solid var(--linie);border-radius:999px;padding:8px 14px;margin:0;white-space:nowrap;font-size:14px}
  .toc a.aktiv{border-color:var(--akzent)}
  .toc-fortschritt{display:none}
  .kette,.kette.vier{--n:2;row-gap:28px}.kette::before,.kette::after{display:none}
  .stationen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uebergabe{grid-template-columns:1fr;gap:0}
  .ue-pfeil{width:2px;height:36px;margin:0 auto;background:linear-gradient(180deg,var(--linie-stark),var(--akzent))}
  .ue-pfeil::after{right:-4px;top:auto;bottom:-2px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--akzent);border-bottom:0}
  .ue-pfeil::before{display:none}
  .kursanzeige{display:none}
}
@media (max-width:600px){
  :root{--kopf-h:64px}
  .kopfleiste{height:58px;top:calc(var(--funk-h) + 8px);padding-left:14px}
  .kopfleiste .marke{font-size:15px}.kopfleiste .marke svg{width:30px;height:30px}
  .kette,.kette.vier,.kette.sechs{--n:1}
  .stationen{grid-template-columns:1fr}
  .btn,.btn-main,.btn-outline,.btn-gold{width:100%}
  .cta-row{flex-direction:column}
  .fuss-zeile{flex-direction:column;align-items:flex-start}
  body.mit-licht::before{display:none}
}
@media (hover:none),(pointer:coarse){body.mit-licht::before{display:none}}

/* ---------- Handy-Stufe fuer die Schrift (30.09.2026) ----------
   Auf schmalen Geraeten greift bei jedem clamp() das Minimum, und die
   Minima oben sind fuer den Schreibtisch gewaehlt. Hier stehen die
   Masse fuer das Handy. Der Fliesstext bleibt bei 16px - kleiner ist
   auf einem Handy nicht mehr gut lesbar.
       EIN CLAMP MIT EINEM SCHREIBTISCH-MINIMUM IST AUF DEM HANDY
       KEINE SKALA, SONDERN EIN FESTWERT. */
@media (max-width:600px){
  .titel-xxl{font-size:clamp(34px,9.5vw,44px)}
  .titel-xl{font-size:clamp(29px,8vw,36px)}
  .titel-l{font-size:clamp(24px,6.6vw,30px)}
  .titel-m{font-size:clamp(20px,5.6vw,24px)}
  .fliesstext h2{font-size:clamp(22px,6vw,28px)}
  .highlight{font-size:clamp(20px,5.4vw,24px)}
  .laufband span{font-size:clamp(22px,6vw,26px)}
  .fuss-gross{font-size:clamp(30px,10vw,52px)}
  .karte h3{font-size:19px}
  .lead{font-size:17px}
  .dia figcaption,.schaubild figcaption{font-size:17px}
  .bearing .deg{font-size:24px}
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .split-wort>span{transform:none}
  .laufband-spur{animation:none}
}

.fuss-gross>span{display:inline-block;white-space:nowrap}