/* ============================================================
   VHS1 - Token-Schicht. Standard (:root) = Hell. [data-theme="dark"] = Dunkel.
   Komponenten lesen NUR semantische Tokens; das dunkle Theme ist ein reiner
   Token-Swap auf derselben Struktur (Schrift, Radien, Animationen).
   LIVE ist das dunkle Theme (data-theme="dark" am <html>, siehe BaseLayout).
   Das helle Theme bleibt als :root-Stand erhalten - siehe parked/light-theme/README.md.
   ============================================================ */
:root{
  /* fonts */
  --font-sans:"IBM Plex Sans",system-ui,sans-serif;
  --font-display:"IBM Plex Sans",system-ui,sans-serif;

  /* text */
  --ink:#0b1224;
  --slate:#3a4660;
  --muted:#6b7896;

  /* lines */
  --line:#e3e6ec;
  --line-2:#d0d5de;
  --line-3:#b4bcc9;

  /* page + surfaces */
  --bg:#ffffff;
  --bg-soft:#f5f6f8;
  --surface:#ffffff;
  --surface-2:#f1f3f6;
  --nav-bg:#ffffff;
  --hero-bg:#f5f6f8;

  /* brand / accents - abgeleitet vom Navy der Bildmarke (#143a73), eine Akzentfarbe */
  --navy:#143a73;
  --accent:#1b4f9c;
  --accent-d:#143a73;
  --accent-tint:rgba(27,79,156,.06);
  --accent-line:rgba(27,79,156,.22);
  --teal:#1b4f9c;
  --on-accent:#ffffff;

  /* dunkle Kontrast-Bänder (util / arch core / sec stat / footer) */
  --band:#0b1224;
  --band-ink:#ffffff;
  --band-bright:#dbe2ef;
  --band-soft:#aeb9cd;
  --band-muted:#9fb0cd;
  --band-dim:#7e8da8;
  --band-sep:#5a6a86;
  --band-line:rgba(255,255,255,.1);
  --band-chip-bg:rgba(255,255,255,.09);
  --band-chip-line:rgba(255,255,255,.16);

  /* misc */
  --logo-filter:grayscale(1);
  --r:4px; --r-lg:8px; --maxw:1264px;
  --shadow:0 1px 2px rgba(11,18,36,.06);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ── Dunkles Theme (LIVE, gesetzt per data-theme="dark" am <html>) ──
   Gleiche Struktur wie hell - Schrift, Radien und Abstaende sind geerbt.
   Flaechen: tiefes Blauschwarz in vier Stufen. Akzent: das Cyan der
   exitB-Bildmarke (#00cce9), flaechig nur auf dem Primaer-Button, sonst
   fuer Links, Icons und kleine Marken. Kein Glow, keine zweite Akzentfarbe. */
[data-theme="dark"]{
  color-scheme:dark;
  --ink:#e8edf5;
  --slate:#b6c1d3;
  --muted:#8591a8;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --line-3:rgba(255,255,255,.28);
  --bg:#080b14;
  --bg-soft:#0c1120;
  --surface:#101728;
  --surface-2:#151e33;
  --nav-bg:#080b14;
  --hero-bg:#0c1120;
  --navy:#00cce9;
  --accent:#00cce9;
  --accent-d:#5fdff3;
  --accent-tint:rgba(0,204,233,.09);
  --accent-line:rgba(0,204,233,.28);
  --teal:#00cce9;
  --on-accent:#04141a;
  --band:#05070d;
  --band-ink:#e8edf5;
  --band-bright:#dfe5ef;
  --band-soft:#8591a8;
  --band-muted:#8591a8;
  --band-dim:#6a7690;
  --band-sep:#4d5870;
  --band-line:rgba(255,255,255,.08);
  --band-chip-bg:rgba(255,255,255,.05);
  --band-chip-line:rgba(255,255,255,.12);
  --logo-filter:grayscale(1) brightness(0) invert(1);
  --shadow:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:90px}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4{margin:0; line-height:1.2; font-weight:600}
p{margin:0 0 1rem}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px}

/* ---------- Buttons und Textlinks ---------- */
.btn{display:inline-flex; align-items:center; gap:.5em; padding:13px 24px; border-radius:var(--r);
  font-weight:600; font-size:1rem; line-height:1.3; border:1px solid transparent; cursor:pointer; transition:background .2s, border-color .2s, color .2s}
.btn--sm{padding:10px 18px; font-size:.94rem}
.btn--primary{background:var(--accent); color:var(--on-accent)}
.btn--primary:hover{background:var(--accent-d)}
.btn--outline{border-color:var(--line-3); color:var(--ink); background:transparent}
.btn--outline:hover{border-color:var(--accent); color:var(--accent)}
.textlink{display:inline-block; padding:10px 0; color:var(--accent); font-weight:600; font-size:1rem}
.textlink:hover{color:var(--accent-d); text-decoration:underline; text-underline-offset:4px}

/* ---------- Kopf: Utility-Leiste, Navigation, Produktleiste ---------- */
.util{background:var(--band); color:var(--band-soft); font-size:.8rem; border-bottom:1px solid var(--band-line)}
.util__inner{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 24px; padding-top:9px; padding-bottom:9px}
.util__r{display:flex; flex-wrap:wrap; gap:4px 20px}
.util__r a{color:var(--band-bright)}
.util__r a:hover{color:var(--accent)}
.util__sep{display:none}

.nav{position:sticky; top:0; z-index:100; background:var(--nav-bg); border-bottom:1px solid var(--line); transition:box-shadow .25s var(--ease)}
.nav.is-stuck{box-shadow:0 10px 24px -16px rgba(0,0,0,.6)}
.nav__inner{display:flex; align-items:center; gap:28px; min-height:72px}
.brand{display:flex; align-items:center}
.brand__logo{display:block; height:40px; width:auto; max-width:220px; object-fit:contain}
.nav__links{display:flex; gap:28px; margin-left:auto}
.nav__links a{padding:12px 0; font-size:.94rem; font-weight:500; color:var(--slate); border-bottom:2px solid transparent; transition:color .15s, border-color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__links a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}
.nav__actions{display:flex; align-items:center; gap:18px}
.lang{display:flex; align-items:center; gap:5px; font-size:.85rem; color:var(--muted)}
.lang button{background:none; border:0; color:var(--muted); cursor:pointer; font:inherit; font-weight:600; padding:8px 2px}
.lang button.is-active{color:var(--ink)}
.nav__burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:12px 8px}
.nav__burger span{width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.3s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.subnav{background:var(--bg-soft); border-bottom:1px solid var(--line)}
.subnav__inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 32px; min-height:50px}
.subnav__name{display:flex; align-items:baseline; gap:10px; padding:8px 0}
.subnav__name strong{font-size:1rem; font-weight:600; color:var(--ink)}
.subnav__name small{font-size:.86rem; color:var(--muted)}
.subnav__links{display:flex; gap:26px; overflow-x:auto; scrollbar-width:none}
.subnav__links::-webkit-scrollbar{display:none}
.subnav__links a{font-size:.86rem; color:var(--muted); white-space:nowrap; padding:13px 0; transition:color .15s}
.subnav__links a:hover{color:var(--ink)}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--hero-bg); border-bottom:1px solid var(--line)}
.hero__fx{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:none}
.hero__inner{position:relative; z-index:1; padding-top:96px; padding-bottom:88px}
.hero__label{display:block; margin:0 0 22px; font-size:.9rem; font-weight:600; color:var(--accent)}
.hero__title{max-width:760px; font-size:clamp(2rem,3.8vw,3.25rem); line-height:1.1; font-weight:600; letter-spacing:-.02em; text-wrap:balance}
.hero__lead{max-width:620px; margin:24px 0 34px; font-size:1.1rem; line-height:1.55; color:var(--slate); white-space:pre-line}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
@media (min-width:981px){
  #heroCanvas{display:block; opacity:.75;
    -webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 78%);
    mask-image:linear-gradient(90deg,transparent 40%,#000 78%)}
}

/* Kennzahlen-Leiste unter dem Hero (VHS1) */
.facts{background:var(--hero-bg); border-bottom:1px solid var(--line)}
.facts__list{margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:0 28px}
.facts__list>div{display:flex; flex-direction:column-reverse; gap:4px; padding:26px 0}
.facts__list dt{font-size:.84rem; color:var(--muted)}
.facts__list dd{margin:0; font-size:1.2rem; line-height:1.3; font-weight:600; letter-spacing:-.01em; color:var(--ink); white-space:nowrap}
/* Breit: eine Zeile, Spalten so breit wie ihr Inhalt, damit kein Wert umbricht */
@media (min-width:1240px){
  .facts__list{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:auto; justify-content:space-between}
}
/* Schmal: wieder kompakte Spalten, lange Werte duerfen hier umbrechen */
@media (max-width:640px){
  .facts__list{grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr))}
  .facts__list dd{white-space:normal}
}

/* ---------- Sektionen ---------- */
.section{padding:104px 0; border-bottom:1px solid var(--line)}
.section--alt{background:var(--bg-soft)}
.section--tight{padding:56px 0}
.head{max-width:720px; margin:0 0 48px}
.kicker{display:block; margin:0 0 12px; font-size:.9rem; font-weight:600; color:var(--muted)}
.section__title{font-size:clamp(1.35rem,2vw,1.7rem); line-height:1.2; font-weight:600; letter-spacing:-.015em; text-wrap:balance}
.section__sub{margin:16px 0 0; font-size:1.05rem; color:var(--slate)}
/* Schmale Spalte fuer die Ueberschrift, breite Spalte fuer den Inhalt */
.split{display:flex; flex-wrap:wrap; gap:28px 64px}
.split__rail{flex:1 1 220px; display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.split__main{flex:3 1 560px; min-width:0}
.split__rail .section__title{font-size:clamp(1.3rem,1.8vw,1.55rem)}

/* ---------- Home ---------- */
.prod__h{display:block; font-size:1.3rem; line-height:1.2; letter-spacing:-.01em}
.plist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:0 40px; font-size:1rem; color:var(--slate)}
.plist li{padding:13px 0; border-top:1px solid var(--line-2)}

.quote{margin:0 auto}
.quote figcaption{font-size:.92rem; color:var(--muted)}
.quote figcaption b{display:block; font-size:1.05rem; font-weight:600; color:var(--ink)}
.quote blockquote{margin:0; font-size:clamp(1.15rem,1.6vw,1.4rem); line-height:1.5; font-weight:500; letter-spacing:-.01em; text-wrap:pretty; quotes:"\201E" "\201C"}
.quote blockquote::before{content:open-quote}
.quote blockquote::after{content:close-quote}
html[lang="en"] .quote blockquote{quotes:"\201C" "\201D"}

.rows{display:flex; flex-direction:column; border-bottom:1px solid var(--line-2)}
.row{display:flex; flex-wrap:wrap; gap:6px 40px; padding:24px 0; border-top:1px solid var(--line-2)}
.row h3{flex:1 1 220px; font-size:1.08rem}
.row p{flex:2 1 340px; margin:0; font-size:1rem; color:var(--slate)}

/* Kundenlogos: Zellen auf dem Seitengrund, getrennt durch Haarlinien */
.logos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); border-top:1px solid var(--line-2); border-left:1px solid var(--line-2)}
.logos__item{display:flex; align-items:center; justify-content:center; min-height:128px; padding:24px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.logos__item img{display:block; max-width:150px; max-height:52px; width:auto; height:auto; object-fit:contain}
.logos__item span{font-size:1.1rem; font-weight:600; color:var(--band-bright)}
/* volle Breite (VHS1): schmalere Zellen, damit alle Logos in eine Reihe passen */
.logos--row{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.logos--row .logos__item{min-height:112px; padding:20px}
.logos--row img{max-width:120px; max-height:44px}
/* Darstellung auf dunklem Grund, je Logo im CMS waehlbar:
   invert   = weisse Variante (fuer einfarbige Wortmarken)
   original = Originalfarben (wenn das Logo auf Dunkel funktioniert)
   plate    = Originalfarben auf heller Platte (wenn nichts anderes geht) */
[data-theme="dark"] .logo--invert{filter:brightness(0) invert(1); opacity:.88}
[data-theme="dark"] .logo--plate{background:#fff; padding:8px 12px; border-radius:var(--r); box-sizing:content-box}

/* Kontakt */
.contact{display:flex; flex-wrap:wrap; gap:40px 64px; align-items:flex-end}
.contact__main{flex:3 1 480px; min-width:0}
.contact__title{font-size:clamp(1.45rem,2.3vw,1.9rem); line-height:1.15; font-weight:600; letter-spacing:-.02em}
.contact__lead{max-width:640px; margin:24px 0 0; color:var(--slate)}
.contact__box{flex:2 1 320px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding-top:28px; border-top:2px solid var(--accent)}
.contact__phone{font-size:clamp(1.45rem,2.1vw,1.8rem); line-height:1.1; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.contact__phone:hover{color:var(--accent)}
.contact__mail{font-size:1.05rem; color:var(--accent); padding:6px 0}
.contact__mail:hover{color:var(--accent-d)}
.contact__addr{font-size:.92rem; color:var(--muted)}

/* ---------- VHS1 ---------- */
/* Hervorgehobenes Highlight (Groesse "Hero" im CMS) */
.feature{display:flex; flex-wrap:wrap; border:1px solid var(--accent-line); border-radius:var(--r-lg); overflow:hidden; margin-bottom:64px}
.feature__body{flex:3 1 460px; min-width:0; padding:44px 40px; background:var(--accent-tint)}
.feature__body h3{font-size:clamp(1.25rem,1.8vw,1.5rem); letter-spacing:-.015em}
.feature__body p{max-width:560px; margin:16px 0 28px; color:var(--slate)}
.feature__viz{flex:2 1 300px; min-height:300px; position:relative; background-color:var(--bg-soft);
  background-image:linear-gradient(var(--accent-line) 1px,transparent 1px),linear-gradient(90deg,var(--accent-line) 1px,transparent 1px); background-size:48px 48px}
.feature__viz i{position:absolute; width:14px; height:14px; border-radius:2px; background:var(--accent)}
.feature__viz i:nth-child(1){left:89px; top:41px}
.feature__viz i:nth-child(2){left:233px; top:137px}
.feature__viz i:nth-child(3){left:137px; top:233px; opacity:.6}
.feature__viz i:nth-child(4){left:179px; top:83px; width:26px; height:26px; background:none; border:1.5px solid var(--accent); border-radius:0}
.feature__viz i:nth-child(5){left:0; top:180px; width:32px; height:24px; background:none; border:1.5px solid var(--accent); border-left:0; border-radius:0 4px 4px 0}
.feature__viz--img{background:none}
.feature__viz--img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.points{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:0 32px; font-size:.94rem; color:var(--band-bright)}
.points li{padding:11px 0; border-top:1px solid var(--line-2)}

.flist{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr)); gap:0 64px}
.fitem{display:flex; gap:20px; padding:28px 0; border-top:1px solid var(--line-2)}
.fitem__ico{flex:0 0 44px; width:44px; height:44px; border-radius:var(--r-lg); display:grid; place-items:center;
  background:var(--accent-tint); border:1px solid var(--accent-line); color:var(--accent)}
.fitem__ico svg{display:block; width:22px; height:22px; stroke-width:1.9}
.fitem--accent .fitem__ico{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.fitem__body{min-width:0}
.fitem h3{margin:0 0 6px; font-size:1.08rem; line-height:1.3}
.fitem p{margin:0; font-size:.95rem; color:var(--slate)}
.fitem ul{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:.9rem; color:var(--muted)}
.fitem li{position:relative; padding-left:18px}
.fitem li::before{content:""; position:absolute; left:0; top:.7em; width:9px; height:1.5px; background:var(--accent)}
.std{margin:40px 0 0; padding-top:22px; border-top:1px solid var(--line-2); display:flex; flex-wrap:wrap; gap:6px 12px; font-size:.92rem; color:var(--muted)}
.std b{color:var(--ink); font-weight:600; margin-right:6px}
.std i{font-style:normal; color:var(--line-3)}

/* Architektur */
.arch{display:flex; flex-wrap:wrap; align-items:stretch; gap:16px; margin-bottom:72px; font-size:.92rem}
.arch__col{flex:1 1 200px; display:flex; flex-direction:column; gap:8px}
.arch__h{font-size:.8rem; font-weight:600; color:var(--muted); margin-bottom:4px}
.arch__node{padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r); color:var(--band-bright)}
.arch__core{flex:2 1 320px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:32px 24px;
  background:var(--band); color:var(--band-ink); border:1px solid var(--accent-line); border-radius:var(--r-lg); text-align:center}
.arch__corelabel{font-size:1.7rem; line-height:1; font-weight:600; letter-spacing:-.01em}
.arch__coresub{font-size:.86rem; color:var(--band-muted); margin-bottom:12px}
.arch__mods{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; font-size:.86rem}
.arch__mods span{padding:6px 12px; border:1px solid var(--band-chip-line); border-radius:var(--r); color:var(--band-bright)}

/* Module, Sicherheitspunkte: Liste mit Haarlinien statt Karten */
.mods{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:0 40px}
.mod{padding:22px 0 26px; border-top:1px solid var(--line-2)}
.mod h3{margin:0 0 8px; font-size:1.1rem; line-height:1.3}
.mod p{margin:0; font-size:.92rem; color:var(--slate)}

/* Prozess */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr)); gap:32px 0}
.steps li{position:relative; padding:18px 20px 0 0}
.steps li::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent); transform-origin:left center}
/* Aufbau beim Hineinscrollen: die Linie zieht sich von links nach rechts,
   die Schritte erscheinen nacheinander. Die Liste selbst blendet nicht ein. */
.steps.reveal{opacity:1; transform:none}
.steps.reveal li{opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .45s var(--ease)}
.steps.reveal li::before{transform:scaleX(0); transition:transform .55s var(--ease)}
.steps.reveal.in li{opacity:1; transform:none}
.steps.reveal.in li::before{transform:scaleX(1)}
.steps.reveal li:nth-child(2){transition-delay:0.22s} .steps.reveal li:nth-child(2)::before{transition-delay:0.27s}
.steps.reveal li:nth-child(3){transition-delay:0.44s} .steps.reveal li:nth-child(3)::before{transition-delay:0.49s}
.steps.reveal li:nth-child(4){transition-delay:0.66s} .steps.reveal li:nth-child(4)::before{transition-delay:0.71s}
.steps.reveal li:nth-child(5){transition-delay:0.88s} .steps.reveal li:nth-child(5)::before{transition-delay:0.93s}
.steps.reveal li:nth-child(6){transition-delay:1.10s} .steps.reveal li:nth-child(6)::before{transition-delay:1.15s}
.steps.reveal li:nth-child(7){transition-delay:1.32s} .steps.reveal li:nth-child(7)::before{transition-delay:1.37s}
.steps.reveal li:nth-child(8){transition-delay:1.54s} .steps.reveal li:nth-child(8)::before{transition-delay:1.59s}
.steps__n{font-size:.86rem; font-weight:600; color:var(--accent)}
.steps b{display:block; margin:6px 0; font-size:1.05rem; font-weight:600; color:var(--ink)}
.steps i{font-style:normal; font-size:.9rem; color:var(--slate)}

/* Sicherheit */
.sec__intro{flex:2 1 340px; min-width:0}
.sec__list{flex:3 1 480px; min-width:0; align-content:start}
.sec__stat{margin-top:36px; padding-top:22px; border-top:2px solid var(--accent)}
.sec__stat b{display:block; font-size:clamp(2rem,3.2vw,2.75rem); line-height:1; font-weight:600; letter-spacing:-.03em}
.sec__stat span{display:block; margin-top:10px; font-size:.92rem; color:var(--muted)}

/* Integrationen */
.intab{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:32px 40px}
.intab__col h3{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:0 0 6px; padding-bottom:12px; border-bottom:1px solid var(--line-3); font-size:1.05rem}
.intab__col h3 span{font-size:.86rem; font-weight:500; color:var(--accent)}
.intab__col ul{list-style:none; margin:0; padding:0; font-size:.92rem; color:var(--slate)}
.intab__col li{padding:9px 0; border-bottom:1px solid var(--line)}

/* Referenzen: eine Zeile je Kunde */
.cases{display:flex; flex-direction:column; margin-top:56px}
.case{display:flex; flex-wrap:wrap; gap:20px 48px; padding:36px 0; border-top:1px solid var(--line-2)}
.case__id{flex:1 1 220px; display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.case__logo{height:52px; display:flex; align-items:center}
.case__logo img{display:block; max-width:170px; max-height:52px; width:auto; height:auto; object-fit:contain}
.case__id h3{font-size:1.15rem}
.case__id p{margin:2px 0 0; font-size:.9rem; color:var(--muted)}
.case__col{flex:2 1 300px; min-width:0}
.case__col h4{margin:0 0 6px; font-size:.86rem; font-weight:600; color:var(--muted)}
.case__col p{margin:0; font-size:.96rem; color:var(--slate)}
.case__col--res h4{color:var(--accent)}
.case__col--res p{color:var(--ink)}

/* ---------- Fuss ---------- */
.footer{background:var(--band); color:var(--band-muted); font-size:.9rem; border-top:1px solid var(--band-line)}
.footer__inner{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:36px 48px; padding-top:64px; padding-bottom:40px}
.footer__brand{display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.footer__brand p{margin:0}
.footer__brand .brand__logo{height:36px}
.footer__col{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.footer__col h4{color:var(--band-ink); font-size:.92rem; font-weight:600; margin-bottom:6px}
.footer__col a{padding:5px 0; transition:color .15s}
.footer__col p{margin:0}
.footer__col a:hover{color:var(--accent)}
.footer__bar{border-top:1px solid var(--band-line); padding:18px 0}
.footer__bar .container{display:flex; justify-content:space-between; gap:8px 24px; flex-wrap:wrap; font-size:.84rem}

.totop{position:fixed; right:24px; bottom:24px; z-index:90; width:44px; height:44px; border-radius:var(--r); display:grid; place-items:center;
  background:var(--surface); color:var(--ink); border:1px solid var(--line-2); font-size:1.05rem; opacity:0; pointer-events:none; transition:opacity .2s, border-color .2s}
.totop.show{opacity:1; pointer-events:auto}
.totop:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- Rechtsseiten ---------- */
.pagehead{background:var(--bg-soft); border-bottom:1px solid var(--line); padding:72px 0 56px}
.pagehead__tabs{display:flex; flex-wrap:wrap; gap:0 28px; margin-bottom:28px; font-size:.92rem; font-weight:500}
.pagehead__tabs a{padding:10px 0; color:var(--muted); border-bottom:2px solid transparent}
.pagehead__tabs a:hover{color:var(--ink)}
.pagehead__tabs a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}
.pagehead h1{font-size:clamp(1.75rem,3vw,2.4rem); line-height:1.12; font-weight:600; letter-spacing:-.02em}
.pagehead p{margin:16px 0 0; font-size:1.08rem; color:var(--slate)}
.legal{padding-top:24px; padding-bottom:96px}
.legal a{color:var(--accent)}
.legal a:hover{color:var(--accent-d); text-decoration:underline; text-underline-offset:3px}
/* Impressum: Bezeichnung links, Angabe rechts */
.deflist{margin:0; max-width:920px; display:flex; flex-direction:column}
.deflist>div{display:flex; flex-wrap:wrap; gap:4px 48px; padding:26px 0; border-bottom:1px solid var(--line-2)}
.deflist dt{flex:1 1 220px; font-size:.92rem; font-weight:600; color:var(--muted)}
.deflist dd{flex:3 1 420px; margin:0}
/* Datenschutz: Inhaltsverzeichnis links, nummerierte Abschnitte rechts */
.legal__grid{display:flex; flex-wrap:wrap; gap:40px 64px; padding-top:40px}
.toc{flex:1 1 240px; align-self:flex-start; position:sticky; top:100px}
.toc__h{margin:0 0 10px; font-size:.86rem; font-weight:600; color:var(--muted)}
.toc ol{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); font-size:.9rem}
.toc li{border-bottom:1px solid var(--line)}
.legal .toc a{display:flex; gap:12px; padding:10px 0; color:var(--slate)}
.legal .toc a:hover{color:var(--ink); text-decoration:none}
.toc a span{flex:0 0 22px; color:var(--muted)}
.legal__body{flex:3 1 560px; min-width:0; max-width:760px}
.legal__sec{display:flex; gap:20px; padding:36px 0; border-top:1px solid var(--line-2)}
.legal__sec:first-child{border-top:0; padding-top:0}
.legal__n{flex:0 0 40px; padding-top:5px; font-size:.92rem; font-weight:600; color:var(--accent)}
.legal__sec>div{min-width:0; display:flex; flex-direction:column; gap:14px}
.legal__sec h2{font-size:1.2rem; line-height:1.25; letter-spacing:-.01em}
.legal__sec p{margin:0; color:var(--slate); line-height:1.7}
.legal__p{display:flex; gap:16px}
.legal__p>span:first-child{flex:0 0 38px; color:var(--muted)}

/* ---------- Einblenden beim Scrollen: einmalig, kurz, kleiner Versatz ----------
   Die Klasse .reveal setzt main.js nur auf Bloecke, die beim Laden unterhalb
   des Sichtbereichs liegen - ohne JS bleibt alles sichtbar. */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease), transform .45s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .section{padding:72px 0}
  .hero__inner{padding-top:72px; padding-bottom:64px}
  .toc{position:static}
}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__links.open{display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; background:var(--surface); padding:8px 32px 16px; border-bottom:1px solid var(--line); box-shadow:0 16px 24px -16px rgba(0,0,0,.6)}
  .nav__links.open a{padding:14px 0; border-bottom:1px solid var(--line)}
  .nav__actions{margin-left:auto}
  .nav__burger{display:flex}
}
@media (max-width:640px){
  .container{padding:0 20px}
  .util{display:none}
  .nav__actions .btn--sm{display:none}
  .subnav__name small{display:none}
  .feature__body{padding:32px 24px}
  .feature__viz{min-height:180px}
  .legal__sec{gap:12px}
  .legal__n{flex-basis:26px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}