/* Hausdurchblick: Leitstand-Design. Dunkel als Standard, hell umschaltbar.
   Idee: Die Seite sieht aus wie die Bedienoberfläche einer Gebäudeleittechnik.
   Vier Systemfarben (Strom, Heizung, Luft, Smart Home) wie Leitungsfarben im Schaltplan. */
:root{
  --bg:#0C1822;--bg2:#10202C;--panel:#132836;--panel2:#193343;--line:#27495C;--line2:#356078;
  --ink:#E7EEF2;--text:#E7EEF2;--muted:#A3B6C3;--faint:#7C93A3;
  --strom:#FFB62E;--heiz:#FF6B57;--luft:#4BB3FF;--smart:#2FD6B0;
  --on:#06141C;--link:#6FE3C8;--focus:#FFFFFF;
  --t-strom:rgba(255,182,46,.16);--t-heiz:rgba(255,107,87,.16);--t-luft:rgba(75,179,255,.16);--t-smart:rgba(47,214,176,.16);
  --t-roof:#193343;--t-ground:#10202C;--t-putz:#1D3A4B;
  --grid:rgba(120,170,200,.07);--shadow:0 10px 30px rgba(0,0,0,.35);
  --sans:Bahnschrift,"DIN Alternate","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --body:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --acc:var(--smart);
}
:root[data-theme="light"]{
  --bg:#EDF2F5;--bg2:#E3EAEF;--panel:#FFFFFF;--panel2:#F4F7F9;--line:#C3D1DA;--line2:#9FB4C2;
  --ink:#10222D;--text:#10222D;--muted:#435A69;--faint:#5E7686;
  --strom:#A86300;--heiz:#C42F1B;--luft:#12639F;--smart:#0A7A66;
  --on:#FFFFFF;--link:#0A6E5C;--focus:#10222D;
  --t-strom:rgba(168,99,0,.12);--t-heiz:rgba(196,47,27,.10);--t-luft:rgba(18,99,159,.10);--t-smart:rgba(10,122,102,.11);
  --t-roof:#D5E0E7;--t-ground:#DCE5EB;--t-putz:#D5E0E7;
  --grid:rgba(30,80,110,.07);--shadow:0 8px 24px rgba(20,50,70,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px;background-attachment:fixed}
a{color:var(--link);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:12px;top:12px;background:var(--panel);color:var(--text);padding:8px 14px;z-index:99;border:2px solid var(--focus)}
h1,h2,h3,h4{font-family:var(--sans);letter-spacing:-.01em;line-height:1.12;margin:0}
.num{font-variant-numeric:tabular-nums}

/* ---------- Leitungsschiene (Systemleiste) ---------- */
.rail{display:grid;gap:2px;padding:0}
.rail i{display:block;height:3px;opacity:.28;background:var(--c)}
.rail i:nth-child(1){--c:var(--strom)}.rail i:nth-child(2){--c:var(--heiz)}.rail i:nth-child(3){--c:var(--luft)}.rail i:nth-child(4){--c:var(--smart)}
.rail[data-sys="strom"] i:nth-child(1),.rail[data-sys="heiz"] i:nth-child(2),.rail[data-sys="luft"] i:nth-child(3),.rail[data-sys="smart"] i:nth-child(4){opacity:1;height:5px;box-shadow:0 0 14px var(--c)}
.rail[data-sys="alle"] i{opacity:.9}
@keyframes lauf{from{background-position:0 0}to{background-position:-48px 0}}
@media(prefers-reduced-motion:no-preference){
  .rail[data-sys="strom"] i:nth-child(1),.rail[data-sys="heiz"] i:nth-child(2),.rail[data-sys="luft"] i:nth-child(3),.rail[data-sys="smart"] i:nth-child(4){
    background:repeating-linear-gradient(90deg,var(--c) 0 36px,transparent 36px 48px);animation:lauf 2.4s linear infinite}
}

/* ---------- Kopf, Navigation ---------- */
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:block;line-height:0}
.brand img{height:34px;width:auto}
.logo-l{display:none}
:root[data-theme="light"] .logo-d{display:none}
:root[data-theme="light"] .logo-l{display:block}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav>a,.nav>button{font:600 1rem/1 var(--sans);color:var(--text);background:none;border:0;padding:12px 12px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.nav>a:hover,.nav>button:hover{background:var(--panel)}
.nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--acc);border-radius:0}
.chev{width:10px;height:10px;transition:transform .2s}
button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.mega.open{display:block}
.mega .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding-top:26px;padding-bottom:30px}
.mega h3{font-size:1rem;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.mega h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.mega ul{list-style:none;margin:0;padding:0}
.mega li a{display:block;padding:5px 0;color:var(--text);text-decoration:none;font-size:1rem}
.mega li a:hover{color:var(--link);text-decoration:underline}
.tbtn,.mbtn{background:none;border:1px solid var(--line2);color:var(--text);width:42px;height:42px;border-radius:10px;cursor:pointer;display:inline-grid;place-items:center}
.tbtn:hover,.mbtn:hover{background:var(--panel)}
.mbtn{display:none}
.tbtn svg,.mbtn svg{width:20px;height:20px}
@media(max-width:980px){
  .tbtn{margin-left:auto}
  .mbtn{display:inline-grid;margin-left:0}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--panel);border-bottom:1px solid var(--line);padding:10px 20px 20px;max-height:calc(100vh - 70px);overflow:auto;margin:0}
  .nav.open{display:flex}
  .nav>a,.nav>button{padding:14px 4px;border-bottom:1px solid var(--line);border-radius:0;justify-content:space-between}
  .mega{position:static;box-shadow:none;border:0;background:none}
  .mega .wrap{grid-template-columns:1fr;gap:6px;padding:6px 0 10px 8px}
  .mega ul{margin-bottom:8px}
}

/* ---------- Brotkrumen, Seitenkopf ---------- */
.crumbs{font-size:.95rem;color:var(--muted);padding:20px 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--faint)}
.crumbs a{color:var(--muted)}
.pagehead{display:grid;gap:34px;align-items:center;padding:28px 0 52px}
@media(min-width:960px){.pagehead{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px}}
h1{font-size:clamp(2.2rem,5vw,3.9rem);font-weight:800;letter-spacing:-.025em;max-width:17ch;text-wrap:balance}
h1 em{font-style:normal;color:var(--acc)}
.lead{font-size:1.2rem;color:var(--muted);max-width:36em;margin:18px 0 0}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:26px 0 0}
.btn{display:inline-block;background:var(--acc);color:var(--on);font:700 1.02rem/1 var(--sans);text-decoration:none;padding:.95rem 1.4rem;border-radius:8px;border:2px solid var(--acc)}
.btn:hover{filter:brightness(1.1);box-shadow:0 0 22px color-mix(in srgb,var(--acc) 55%,transparent)}
.btn.sec{background:transparent;color:var(--text);border-color:var(--line2)}
.btn.sec:hover{background:var(--panel);box-shadow:none}
.textlink{color:var(--text);font-weight:600}
.note{color:var(--muted);font-size:1rem;margin:14px 0 0}

/* Systemfarbe pro Seite */
[data-sys="strom"]{--acc:var(--strom)}[data-sys="heiz"]{--acc:var(--heiz)}[data-sys="luft"]{--acc:var(--luft)}[data-sys="smart"]{--acc:var(--smart)}

/* ---------- Flächen ---------- */
.fig{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.fig svg{display:block;width:100%;height:auto}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}
section.block{padding:44px 0}
h2.titel{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;margin-bottom:12px}
.sub{color:var(--muted);max-width:40em;margin:0 0 6px}
.prose{max-width:46rem}
.prose h2{font-size:1.65rem;margin:46px 0 10px;scroll-margin-top:90px}
.prose h3{font-size:1.2rem;margin:26px 0 6px}
.prose p{margin:0 0 15px}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 15px}
.prose li{margin-bottom:7px}
.callout{border:1px solid var(--line);border-left:6px solid var(--c,var(--luft));border-radius:10px;background:var(--panel);padding:14px 18px;margin:24px 0}
.callout b.t{display:block;font:700 1.05rem var(--sans);margin-bottom:3px;color:var(--c,var(--luft))}
.callout.warn{--c:var(--heiz)}.callout.ok{--c:var(--smart)}.callout.info{--c:var(--luft)}.callout.gelb{--c:var(--strom)}
.small{font-size:.95rem;color:var(--muted)}
.tag{display:inline-block;font:600 .85rem var(--sans);border:1px solid var(--line2);border-radius:999px;padding:.12rem .65rem;margin:0 6px 6px 0;color:var(--muted)}

/* ---------- Karten (Module) ---------- */
.cards{display:grid;gap:16px;margin:26px 0}
.cards.c2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cards.c3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.cards.c4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 20px 18px;display:flex;flex-direction:column;color:var(--text);text-decoration:none}
.card::before{content:"";position:absolute;left:20px;top:-1px;width:44px;height:4px;background:var(--c,var(--acc));border-radius:0 0 4px 4px;box-shadow:0 0 12px var(--c,var(--acc))}
a.card:hover{border-color:var(--c,var(--acc));transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){a.card:hover{transform:none}}
.card h3{font-size:1.2rem;margin:6px 0 6px}
.card p{margin:0 0 12px;color:var(--muted);font-size:1rem}
.card ul{margin:0 0 14px;padding-left:1.1em;font-size:1rem}
.card .more{margin-top:auto;font-weight:700;color:var(--c,var(--acc))}
.card .meta{font-size:.9rem;color:var(--faint);margin:0 0 6px}

/* ---------- Rechner und Werkzeuge ---------- */
.tool{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;margin:30px 0;position:relative}
.tool::before{content:"";position:absolute;left:24px;top:-1px;width:64px;height:4px;background:var(--acc);border-radius:0 0 4px 4px;box-shadow:0 0 14px var(--acc)}
.tool h2,.tool h3{font-size:1.4rem;margin:6px 0 4px}
.tool .sub{margin-bottom:16px}
.fields{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:.97rem;margin-bottom:5px}
.field input,.field select{width:100%;font:inherit;padding:.65rem .75rem;border:1px solid var(--line2);border-radius:8px;background:var(--bg);color:var(--text)}
.field input[type=range]{padding:0;accent-color:var(--acc);height:32px}
.field .val{float:right;font-weight:700;color:var(--acc)}
.readout{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.rd{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.rd small{display:block;color:var(--muted);font-size:.92rem;margin-bottom:2px}
.rd b{display:block;font:800 1.9rem/1.1 var(--sans);font-variant-numeric:tabular-nums;color:var(--c,var(--acc))}
.rd span{font-size:.95rem;color:var(--muted)}
.result{border-radius:10px;background:var(--bg);border:1px solid var(--line);border-left:6px solid var(--c,var(--acc));padding:14px 16px;margin-top:6px}
.result strong{font:700 1.25rem var(--sans)}
.result p{margin:6px 0 0;font-size:1rem;color:var(--muted)}
.meter{height:14px;border-radius:8px;background:var(--bg);border:1px solid var(--line);overflow:hidden;margin:12px 0 2px}
.meter i{display:block;height:100%;background:var(--c,var(--acc));width:0;transition:width .35s}
@media(prefers-reduced-motion:reduce){.meter i{transition:none}}
.choices{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.choices label{display:inline-flex;align-items:center;gap:8px;padding:.55rem .95rem;border:1px solid var(--line2);border-radius:999px;background:var(--bg);cursor:pointer;font-weight:600;font-size:1rem}
.choices input{accent-color:var(--acc);width:18px;height:18px}
.choices label:has(input:checked){border-color:var(--acc);background:color-mix(in srgb,var(--acc) 22%,var(--bg))}
fieldset{border:0;margin:0 0 14px;padding:0}
legend{font:700 1.05rem var(--sans);margin-bottom:8px;padding:0}
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.seg button{font:700 1rem var(--sans);min-width:48px;height:46px;padding:0 14px;border:1px solid var(--line2);border-radius:8px;background:var(--bg);color:var(--text);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--acc);color:var(--on);border-color:var(--acc)}
.chart{width:100%;height:auto;display:block;margin-top:14px}
.chart text{fill:var(--muted);font:600 12px var(--body)}
.chart .ax{stroke:var(--line2);stroke-width:1}
.chart .gr{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.chart .ln{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chart .pt{fill:var(--acc);stroke:var(--bg);stroke-width:3}
.chart .bar{fill:var(--acc)}
.check{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--acc);flex:none}
.check span b{display:block}
.check span small{color:var(--muted);font-size:.95rem}
.check:has(input:checked) b{text-decoration:line-through;color:var(--muted)}
.ring{width:140px;height:140px;flex:none}
.ring circle{fill:none;stroke-width:12}
.ring .bg{stroke:var(--line)}
.ring .fg{stroke:var(--acc);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .4s}
.ring text{fill:var(--text);font:800 28px var(--sans);text-anchor:middle}

/* ---------- FAQ ---------- */
details{border-top:1px solid var(--line);padding:14px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font:700 1.1rem var(--sans);list-style:none;display:flex;justify-content:space-between;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--acc)}
details[open] summary::after{content:"\2212"}
details p{margin:8px 0 0;max-width:40rem;color:var(--muted)}

/* ---------- Schritte, Zeitleiste ---------- */
.steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s;border-top:2px solid var(--line2);padding-top:12px}
.steps li::before{content:counter(s);display:block;font:800 1.7rem var(--sans);color:var(--acc)}
.steps h3{font-size:1.15rem;margin:0 0 4px}
.steps p{margin:0;color:var(--muted)}
.timeline{list-style:none;margin:0;padding:0 0 0 22px;border-left:3px solid var(--line2)}
.timeline li{position:relative;padding:0 0 22px 18px}
.timeline li::before{content:"";position:absolute;left:-31px;top:7px;width:14px;height:14px;border-radius:50%;background:var(--acc);border:3px solid var(--bg)}
.timeline b{display:block}

/* ---------- Slides ---------- */
.slides{margin:30px 0;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative}
.slides .track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.slides .track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;padding:28px 28px 22px;min-height:260px}
.slide h3{font-size:1.5rem;margin:0 0 8px}
.slide p{margin:0 0 10px;max-width:42em;color:var(--muted)}
.slide ul{margin:0;padding-left:1.2em;color:var(--muted)}
.slide .big{font:800 clamp(2.4rem,6vw,3.6rem)/1 var(--sans);color:var(--acc);margin-bottom:8px;font-variant-numeric:tabular-nums}
.slides .ctl{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--line);background:var(--bg2)}
.slides .ctl button{width:42px;height:42px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--text);cursor:pointer;font-size:1.1rem}
.slides .ctl button:hover{border-color:var(--acc)}
.slides .dots{display:flex;gap:8px;margin:0 auto}
.slides .dots button{width:14px;height:14px;padding:0;border-radius:50%;border:2px solid var(--line2);background:none}
.slides .dots button[aria-current="true"]{background:var(--acc);border-color:var(--acc)}
.slides .count{color:var(--muted);font-size:.95rem;min-width:3.5em;text-align:right}
.slides:not(.ready) .track{display:block}
.slides:not(.ready) .slide{border-bottom:1px solid var(--line)}
.slides:not(.ready) .ctl{display:none}

/* ---------- Inhaltsverzeichnis, Weiterlesen ---------- */
.toc{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px 18px;margin:0 0 30px;max-width:46rem}
.toc b{font:700 1rem var(--sans)}
.toc ol{margin:6px 0 0;padding-left:1.2em;columns:2;column-gap:28px}
@media(max-width:640px){.toc ol{columns:1}}
.toc a{color:var(--text)}
.related{padding:36px 0 56px}

/* ---------- Tabellen ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:1rem}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 .98rem var(--sans);background:var(--panel2)}
tr:last-child td{border-bottom:0}

/* ---------- Startseite: Hausquerschnitt ---------- */
.hero{display:grid;gap:36px;padding:34px 0 70px;align-items:center}
@media(min-width:960px){.hero{grid-template-columns:minmax(0,5fr) minmax(0,6.4fr);gap:56px}}
.visual{position:relative}
.cut{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.cut svg{display:block;width:100%;height:auto}
.leitung{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.l-strom{stroke:var(--strom)}.l-heiz{stroke:var(--heiz)}
.link{fill:none;stroke:var(--smart);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1 7}
.etage{font:700 15px var(--sans);fill:var(--muted)}
.hot{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border-radius:50%;border:2px solid var(--ink);background:rgba(255,255,255,.06);cursor:pointer}
.hot:hover{background:color-mix(in srgb,var(--acc) 40%,transparent)}
.hot[aria-pressed="true"]{background:color-mix(in srgb,var(--acc) 55%,transparent);box-shadow:0 0 0 3px var(--acc)}
#erklaerung{margin-top:14px;background:var(--panel);border:1px solid var(--line);border-left:8px solid var(--c,var(--line2));border-radius:12px;padding:16px 20px;min-height:11.5rem}
#erklaerung h2{margin:0 0 6px;font-size:1.25rem}
#erklaerung p{margin:0 0 10px;font-size:1.02rem;color:var(--muted)}
#erklaerung .hinweis{margin:0;font-size:.95rem;color:var(--text);font-weight:600}
@keyframes putz{from{opacity:1}to{opacity:0}}
@keyframes zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
.putz{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  .putz{animation:putz 1.5s .5s ease-in-out both}
  .run{stroke-dasharray:1;animation:zeichnen 1.3s ease-out both}
  .run.r1{animation-delay:1.3s}.run.r2{animation-delay:1.7s}
  .link,.spaet{animation:einblenden .8s 2.4s both}
  .hot{animation:einblenden .6s 2.6s both}
}
.statrow{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:10px 0 0}
.stat{border-left:3px solid var(--c);padding:2px 0 2px 14px}
.stat b{display:block;font:800 2rem/1.1 var(--sans);font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:.98rem}
.toolgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:22px}

/* ---------- Band, Fuß ---------- */
.band{margin-top:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);padding:56px 0}
.band .wrap{display:grid;gap:22px;align-items:center}
@media(min-width:860px){.band .wrap{grid-template-columns:minmax(0,1fr) auto;gap:56px}}
.band h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:10px}
.band p{margin:0;color:var(--muted);max-width:36em}
.site-foot{padding:44px 0 50px}
.fcols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.fcols h3{font-size:1rem;margin-bottom:8px}
.fcols ul{list-style:none;margin:0;padding:0}
.fcols li a{display:block;padding:3px 0;color:var(--muted);text-decoration:none}
.fcols li a:hover{color:var(--text);text-decoration:underline}
.legal{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.legal p{margin:0 0 8px;max-width:60em}
.hidden{display:none!important}
@media print{.site-head,.band,.site-foot,.slides .ctl,.rail{display:none}body{background:#fff;color:#000}}

.flow{stroke-dasharray:6 8;animation:hdflow 1.2s linear infinite}
@keyframes hdflow{to{stroke-dashoffset:-14}}
@media(prefers-reduced-motion:reduce){.flow{animation:none}}

/* Glossar */
.gloss{margin:24px 0 0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.gl{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.gl dt{font-weight:800;margin-bottom:4px}.gl dd{margin:0;color:var(--muted)}
.prose{overflow-wrap:anywhere}

/* Assistent */
.chat-fab{position:fixed;right:18px;bottom:18px;z-index:60;background:var(--smart);color:#04201A;border:0;border-radius:999px;padding:14px 22px;font:700 1rem var(--sans);cursor:pointer;box-shadow:var(--shadow)}
.chat{position:fixed;right:18px;bottom:18px;z-index:61;width:min(380px,calc(100vw - 24px));max-height:min(620px,calc(100vh - 36px));display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.chat[hidden]{display:none}
.chat-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg2)}
.chat-x{background:none;border:0;color:var(--text);font-size:1.6rem;line-height:1;cursor:pointer;width:36px;height:36px}
.chat-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:180px}
.chat-m{padding:10px 13px;border-radius:12px;max-width:92%;font-size:.98rem;overflow-wrap:anywhere}
.chat-m p{margin:0 0 8px}.chat-m.me{align-self:flex-end;background:var(--smart);color:#04201A}
.chat-m.bot{align-self:flex-start;background:var(--bg2);border:1px solid var(--line)}
.chat-l{display:block;margin:4px 0}.chat-s{color:var(--muted);font-size:.9rem;margin-top:8px!important}
.chat-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px}
.chat-c{background:none;border:1px solid var(--line2);color:var(--text);border-radius:999px;padding:6px 12px;font-size:.9rem;cursor:pointer}
.chat-c:hover{background:var(--bg2)}
.chat-f{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line)}
.chat-f input{flex:1;min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font:inherit}
.chat-n{margin:0;padding:0 14px 12px;font-size:.8rem;color:var(--muted)}
@media print{.chat,.chat-fab{display:none}}

.pagehead>*{min-width:0}
h1{overflow-wrap:break-word;hyphens:auto}

/* Flinn Funke */
.kgal{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.kfig{margin:0;text-align:center;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 10px}
.kfig img{width:100%;max-width:150px;height:auto}.kfig figcaption{margin-top:8px;font-weight:600}
.kteaser{display:flex;gap:22px;align-items:center}.kteaser img{flex:none;width:96px;height:auto}
@media (max-width:560px){.kteaser{flex-direction:column;align-items:flex-start}}
.chat-tabs{display:flex;gap:6px;padding:8px 16px 0}
.chat-tab{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:5px 14px;font:600 .9rem var(--sans);cursor:pointer}
.chat-tab[aria-pressed="true"]{background:var(--smart);color:#04201A;border-color:var(--smart)}
.chat.flinn .chat-h{border-bottom:3px solid #FF7A1A}
.chat.flinn .chat-m.bot{border-color:#FF7A1A}
.chat.flinn .chat-tab[aria-pressed="true"]{background:#FF7A1A;color:#0B1220;border-color:#FF7A1A}