/* mut.events Streaming Service – Werte siehe design.md §4 */

/* ---------- Schriften (selbst gehostet, SIL OFL 1.1) ---------- */
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  color-scheme:light dark;
  --bg:#F7F7F5; --bg-alt:#EEEEEA; --bg-alt-2:#E5E4DE;
  --fg:#1C1C1A; --fg-muted:#5C5C57; --fg-dim:#8A8A84;
  --accent:#009FE3; --accent-ink:#006A94; --rec:#E0685C;
  --border:#E2E1DA;
  --on-accent:#1C1C1A;
  --btn-active-fg:#FFFFFF;
  --focus:#1C1C1A;
  --hero-bg:#141311; --hero-fg:#EDEDEA; --hero-muted:#A5A59E; --hero-accent:#33B5EC; --hero-line:#3A3934;
  --draft-bg:#FFF1A8; --draft-fg:#1C1C1A; --mask:#000000;

  --f-head:"Archivo","Helvetica Neue",Arial,"Liberation Sans",sans-serif;
  --f-text:"IBM Plex Sans","Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:40px; --s-6:64px; --s-7:104px; --s-8:168px;
  --maxw:1180px; --pad:32px; --gap:24px;
  --rail-x:6px; --node:14px; --node-y:2px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141311; --bg-alt:#1D1C19; --bg-alt-2:#24231F;
    --fg:#EDEDEA; --fg-muted:#A5A59E; --fg-dim:#6E6D66;
    --accent-ink:#33B5EC; --border:#3A3934;
    --btn-active-fg:#141311;
    --focus:#009FE3;
  }
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.6 var(--f-text)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
h1,h2{font-family:var(--f-head);letter-spacing:-.02em}
a{color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s ease,background-color .15s ease,border-color .15s ease,text-decoration-color .15s ease}
a:hover{color:var(--fg);text-decoration-thickness:2px;text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
a:not([class]):focus-visible{background:var(--bg-alt)}
strong{font-weight:600}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--fg);color:var(--bg);padding:10px 14px;z-index:10}
.skip:focus{top:8px}

/* Kennzeile (Muster der Familie, Versalien wie bei mut.events) */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font:500 .75rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--accent);flex:none}
.ey-b{white-space:nowrap}
@media (max-width:639px){.intro .eyebrow{align-items:flex-start}.intro .eyebrow::before{margin-top:3px}.ey-s{display:none}.ey-b{display:block}}

/* ---------- Kopf ---------- */
.site-head{border-bottom:1px solid var(--border);background:var(--bg)}
.site-head .wrap{display:flex;align-items:center;gap:var(--s-5);min-height:72px}
.brand{display:flex;align-items:center;gap:14px;color:var(--fg);text-decoration:none;flex:none}
.brand:hover{color:var(--fg)}
.brand img{height:24px;width:auto}
.brand .sep{width:1px;height:22px;background:var(--border)}
.brand .add{font:700 15px/1 var(--f-head);letter-spacing:-.01em;padding-top:5px}
.jumpnav{margin-left:auto;min-width:0}
.jump{display:flex;gap:20px;list-style:none;padding:0}
.jump a{font-size:14px;color:var(--fg-muted);text-decoration:none;position:relative;white-space:nowrap}
.jump a::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;background:var(--accent);transition:width .2s ease}
.jump a:hover{color:var(--fg)}
.jump a:hover::after{width:100%}
.btn-head{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:11px 22px;background:var(--fg);color:var(--bg);font:600 13.5px/1 var(--f-text);text-decoration:none}
.btn-head:hover{background:var(--accent);color:var(--on-accent)}

/* ---------- Schaltfläche primär: Familienblau ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:15px 28px;background:var(--accent);color:var(--on-accent);font:600 15px/1 var(--f-text);text-decoration:none}
.btn::before{content:"";width:8px;height:8px;background:var(--on-accent);flex:none}
.btn:hover{background:var(--fg);color:var(--bg);text-decoration:none}
.btn:hover::before{background:var(--rec)}
.btn:active{background:var(--accent-ink);color:var(--btn-active-fg)}

/* ---------- Einstieg (immer dunkel) ---------- */
.intro{--focus:var(--accent);background:var(--hero-bg);color:var(--hero-fg);overflow:hidden;border-bottom:1px solid var(--hero-line)}
.intro .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-top:var(--s-6);padding-bottom:var(--s-5);align-items:start}
.intro-head{grid-column:1/8;grid-row:1}
.intro-text{grid-column:1/8;grid-row:2;padding-right:var(--s-5);margin-top:var(--s-4)}
.intro .eyebrow{color:var(--hero-accent)}
.intro h1{margin-top:var(--s-3);font-weight:800;font-size:clamp(2.375rem,1.5rem + 3.6vw,4.25rem);line-height:1.02;text-wrap:balance;max-width:20ch}
.intro .lead{font-size:clamp(1.125rem,1rem + .5vw,1.3125rem);line-height:1.45;max-width:40ch}
.intro .lead + p{margin-top:var(--s-3);color:var(--hero-muted);max-width:46ch}
.intro .act{margin-top:var(--s-4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4)}
.intro .btn:hover{background:var(--hero-fg);color:var(--hero-bg)}
.intro a:not(.btn){color:var(--hero-accent)}
.intro a:not(.btn):hover{color:var(--hero-fg)}
.intro a:not([class]):focus-visible{background:var(--hero-line)}
.intro .small{font-size:15px;color:var(--hero-muted)}
.intro .parent{margin-top:var(--s-4);font-size:14px;line-height:1.5;color:var(--hero-muted)}
.intro figure{grid-column:8/13;grid-row:1/3;margin-right:calc(-1 * var(--pad) - max(0px,(100vw - var(--maxw)) / 2));padding-top:4px}
.intro figure .frame{border:1px solid var(--hero-line);border-right:0;background:var(--hero-bg);width:auto}
.intro figure img{width:auto}
.intro figcaption{margin-top:var(--s-2);max-width:56ch;color:var(--hero-muted)}
.intro figcaption .nr{color:var(--hero-muted)}

/* Bildunterschrift */
figcaption{font-size:14px;line-height:1.55;color:var(--fg-muted)}
figcaption .nr{font:400 12px/1 var(--f-mono);color:var(--fg-muted);margin-right:.35em}

/* ---------- Abschnitts-Grundraster ---------- */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
h2.h2{font-weight:700;font-size:clamp(1.625rem,1.2rem + 1.5vw,2.25rem);line-height:1.12;text-wrap:balance}
.body p+p{margin-top:var(--s-3)}
.body{max-width:64ch}

/* ---------- Signalweg ---------- */
.path{padding-top:var(--s-6)}
.path-head{grid-column:3/13}
.path-head p{margin-top:var(--s-2);color:var(--fg-muted)}
.path .eyebrow{margin-bottom:var(--s-3)}
.chain{grid-column:3/13;list-style:none;padding:0;margin-top:var(--s-5);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:36px;align-items:start}
.chain>li{position:relative}
.blk{position:relative;display:block;padding:12px 14px 14px;background:var(--bg-alt);border:1px solid var(--fg);color:var(--fg);text-decoration:none;min-height:96px}
.blk .n{display:block;font:500 12px/1 var(--f-mono);color:var(--accent-ink);min-height:12px}
.blk .t{display:block;margin-top:8px;font:700 18px/1.15 var(--f-head);letter-spacing:-.01em}
.blk .u{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--fg-muted)}
a.blk:hover{color:var(--fg);border-bottom:2px solid var(--accent);padding-bottom:13px}
a.blk:focus-visible{background:var(--bg)}
.blk.ext{background:transparent;border-color:var(--fg-dim)}
.blk.src{border-style:dashed}
.tag{display:inline-block;margin-left:6px;padding:2px 6px;border:1px solid var(--fg-muted);font:500 11px/1.2 var(--f-mono);color:var(--fg-muted);vertical-align:1px;text-transform:none;letter-spacing:0}
/* Pfeile im Hauptzug */
.chain>li:not(:last-child)>.blk::after{content:"";position:absolute;top:47px;right:-37px;width:36px;height:1px;background:var(--fg)}
.chain>li:not(:last-child)>.blk::before{content:"";position:absolute;top:43px;right:-37px;border:4.5px solid transparent;border-left:7px solid var(--fg);border-right:0}
.live{position:absolute;top:-1px;right:12px;display:flex;align-items:center;gap:5px;font:500 11px/1 var(--f-mono);color:var(--fg);transform:translateY(-100%);padding-bottom:4px}
.live::after{content:"";width:2px;height:14px;background:var(--rec)}
/* Abzweige */
.branch{position:relative;list-style:none;margin:0 0 0 18px;padding:24px 0 0 18px;border-left:1px solid var(--fg);display:grid;gap:12px}
.branch li{position:relative}
.branch li::before{content:"";position:absolute;left:-18px;top:47px;width:18px;height:1px;background:var(--fg)}
.branch li:last-child::after{content:"";position:absolute;left:-19px;top:48px;bottom:-2px;width:1px;background:var(--bg)}
/* Zuführung der Playlist von unten in die Zuspielung */
.branch.feed::before{content:"";position:absolute;left:-5px;top:0;border:4.5px solid transparent;border-bottom:7px solid var(--fg);border-top:0}

/* ---------- Stationen und Signalleitung ---------- */
.stations{margin-top:var(--s-7)}
.station{position:relative;scroll-margin-top:24px;padding-bottom:var(--s-7)}
/* Leitungsstück: von der Mitte des eigenen Knotens bis zur Mitte des nächsten */
.station::before{content:"";position:absolute;top:calc(var(--node-y) + var(--node) / 2);bottom:calc(-1 * (var(--node-y) + var(--node) / 2));left:calc(var(--pad) + var(--rail-x));width:2px;background:var(--fg-dim)}
@media (min-width:1244px){.station::before{left:calc((100% - var(--maxw)) / 2 + var(--pad) + var(--rail-x))}}
.station.end{padding-bottom:0}
.station.end::before{display:none}
.station.before-big{padding-bottom:var(--s-8)}
.station.compact{padding-bottom:var(--s-6)}
.rail{grid-column:1/3;position:relative;padding-left:32px}
.node{position:absolute;left:0;top:var(--node-y);width:var(--node);height:var(--node);background:var(--accent);z-index:1}
.station.src .node{background:var(--bg);border:2px solid var(--fg)}
.station.end .node{background:var(--fg)}
.station:target .node{background:var(--rec);border-color:var(--rec)}
.rail .nr{display:block;font:500 1.5rem/1 var(--f-mono);color:var(--accent-ink)}
.rail .lbl{display:block;margin-top:6px;font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)}
.rail .tag{margin:8px 0 0}
.here{display:none;margin-top:8px;font:500 12px/1 var(--f-mono);color:var(--fg)}
.here::before{content:"";display:inline-block;width:7px;height:7px;background:var(--rec);margin-right:6px;vertical-align:1px}
.station:target .here{display:block}
.st-body{grid-column:3/9}
.st-body h2{margin-bottom:var(--s-3)}
.st-head{grid-column:3/13}
.st-head h2{max-width:24ch}
.sheet{grid-column:9/13;padding-top:6px}
.frame{border:1px solid var(--fg);background:var(--bg-alt);width:fit-content;max-width:100%}
.frame img{width:auto}
figure{min-width:0}
.fig{grid-column:3/13;margin-top:var(--s-5)}
.fig figcaption{margin-top:var(--s-2);max-width:64ch}
/* Bild links (Spalten 3–8), Unterschrift rechts daneben (9–12) */
.fig.side{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:var(--gap);align-items:end}
.fig.side .frame{grid-column:1/7}
.fig.side figcaption{grid-column:7/11;margin:0;padding-bottom:2px}
.col-r{grid-column:9/13}
.col-l{grid-column:3/9}
.col-r .fig,.col-l .fig{margin-top:0}
.col-l .fig.mt5{margin-top:var(--s-5)}
.stack>*+*{margin-top:var(--s-5)}
.mt5{margin-top:var(--s-5)}
.mt4{margin-top:var(--s-4)}

/* Datenblatt */
.dl div{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--border)}
.dl div:last-child{border-bottom:1px solid var(--border)}
.dl dt{font:500 12px/1.6 var(--f-mono);letter-spacing:.04em;color:var(--fg-muted);padding-top:1px}
.dl dd{font-size:14.5px;line-height:1.5;font-variant-numeric:tabular-nums}

/* Tastenkürzel */
.keys h3,.check h3,.keys h2,.check h2{font:600 1.0625rem/1.3 var(--f-text);margin-bottom:var(--s-3)}
.keys dl{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px}
.keys dl div{display:contents}
.keys dt,.keys dd{padding:7px 0;border-top:1px solid var(--border)}
.keys dt{white-space:nowrap}
.keys dd{font-size:14.5px}
kbd{display:inline-block;font:400 12px/1.4 var(--f-mono);padding:1px 6px;border:1px solid var(--fg-dim);border-bottom-width:2px;color:var(--fg);background:var(--bg)}

/* ---------- Fragen ---------- */
.faq{margin-top:var(--s-7)}
.faq .head{grid-column:3/13}
.faq .head h2{margin-top:var(--s-3)}
.faq dl{grid-column:3/11;margin-top:var(--s-4)}
.faq dl div{padding:var(--s-3) 0;border-top:1px solid var(--border);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--gap)}
.faq dt{font-weight:600}

/* ---------- Zugang ---------- */
.access{margin-top:var(--s-7);background:var(--bg-alt-2);border-top:1px solid var(--fg)}
.access .grid{padding-top:var(--s-6);padding-bottom:var(--s-6)}
.access .head{grid-column:3/9}
.access .head h2{margin:var(--s-3) 0}
.mail{display:inline-block;margin-top:var(--s-4);font:500 clamp(1.25rem,1rem + 1vw,1.75rem)/1.2 var(--f-mono);color:var(--fg)}
.access .tel{margin-top:var(--s-2)}
.access .btn{margin-top:var(--s-4)}
.check{grid-column:9/13}
.check ol{list-style:none;padding:0;counter-reset:c}
.check li{counter-increment:c;display:flex;gap:12px;padding:8px 0;border-top:1px solid var(--fg-dim);font-size:15px}
.check li::before{content:counter(c,decimal-leading-zero);font:500 12px/1.9 var(--f-mono);color:var(--accent-ink)}

/* ---------- Fußzeile ---------- */
.site-foot{padding:var(--s-6) 0 var(--s-5);border-top:1px solid var(--border)}
.site-foot .cols{grid-column:3/13;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:var(--gap)}
.foot-h{font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:var(--s-3)}
.site-foot address,.site-foot ul{font-style:normal;font-size:14px;line-height:1.7;color:var(--fg-muted);list-style:none;padding:0}
.site-foot a{color:var(--fg-muted)}
.site-foot a:hover{color:var(--fg)}
.foot-line{grid-column:3/13;margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--border);font-size:13px;color:var(--fg-muted)}

/* ---------- Preise (außerhalb der Signalleitung, vor „Kurz gefragt“) ---------- */
[hidden]{display:none!important}
.preise{margin-top:var(--s-7)}
.preise .head{grid-column:3/13}
.preise .head h2{margin-top:var(--s-3)}
.preise h3{font:600 1.0625rem/1.3 var(--f-text);margin-bottom:var(--s-3)}
.pr-text{grid-column:3/9;margin-top:var(--s-6)}
.pr-inkl{grid-column:9/13;margin-top:var(--s-6);padding-top:6px}
.pr-inkl ul{list-style:none;padding:0;font-size:14.5px;line-height:1.45}
.pr-inkl li{padding:7px 0;border-top:1px solid var(--border)}
.pr-inkl li:last-child{border-bottom:1px solid var(--border)}
.pr-inkl ul+h3{margin-top:var(--s-5)}
.mono{font-family:var(--f-mono);font-size:.86em}
/* Bausteine */
.tarif{width:100%;border-collapse:collapse;margin-top:var(--s-5);font-variant-numeric:tabular-nums}
.tarif th,.tarif td{padding:10px 0;border-top:1px solid var(--border);text-align:left;vertical-align:top;font-weight:400}
.tarif tbody tr:last-child>*{border-bottom:1px solid var(--border)}
.tarif thead th{font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);border-top:0;padding-top:0}
.tarif td,.tarif thead th+th{text-align:right;padding-left:16px;white-space:nowrap;width:5.5em}
.tarif td[colspan]{width:auto}
.tarif tbody th{font-size:15px;line-height:1.45;padding-right:8px}
.tarif tr.gx>*{border-top-style:dotted}
.tarif tr.gx th{padding-left:1.25em}
.pr-bed{margin-top:var(--s-5)}
/* Zielgruppe und Steuerausweis: gut sichtbar bei Preistabelle und Zugang */
.b2b{margin-top:var(--s-3);font-weight:600;color:var(--fg);border-left:3px solid var(--accent);padding:2px 0 2px 12px}
/* Rechner: Pult mit Fadern links, Anzeige als Datenblatt rechts */
.pr-calc{grid-column:3/13;margin-top:var(--s-4)}
.rechner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border:1px solid var(--fg);background:var(--bg-alt)}
.r-kopf{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px;padding:14px 24px;border-bottom:1px solid var(--fg)}
.preise .r-kopf h3{margin:0;font:700 1.125rem/1.2 var(--f-head);letter-spacing:-.01em}
.r-kenn{font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)}
.r-pult{padding:24px 24px 28px;display:grid;gap:26px;align-content:start}
.r-q{border:0;margin:0;padding:0;min-width:0}
.r-q legend{padding:0;font-size:15px;margin-bottom:10px}
.sw{display:grid;grid-template-columns:1fr 1fr}
.sw label{position:relative;display:block;cursor:pointer}
.sw label+label{margin-left:-1px}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sw span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 12px;border:1px solid var(--fg);background:var(--bg);font:600 15px/1.2 var(--f-text);text-align:center}
.sw input:checked+span{background:var(--accent);color:var(--on-accent);border-color:var(--fg)}
.sw input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px;position:relative;z-index:1}
.f-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.f-kopf label{font-size:15px;line-height:1.35}
.f-kopf output{flex:none;font:500 1.375rem/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--fg)}
.fader input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:4px 0 0;background:transparent;cursor:pointer}
.fader input[type=range]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.fader input[type=range]::-webkit-slider-runnable-track{box-sizing:border-box;height:8px;background:var(--bg);border:1px solid var(--fg)}
.fader input[type=range]::-moz-range-track{box-sizing:border-box;height:8px;background:var(--bg);border:1px solid var(--fg)}
.fader input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:20px;height:36px;margin-top:-15px;background:var(--accent);border:0 solid var(--fg);border-width:0 9px}
.fader input[type=range]::-moz-range-thumb{box-sizing:border-box;width:20px;height:36px;background:var(--accent);border:0 solid var(--fg);border-width:0 9px;border-radius:0}
.skala{position:relative;height:26px;margin-top:-6px}
.skala .st{position:absolute;top:0;left:calc(10px + var(--f) * (100% - 20px));width:1px;height:5px;background:var(--fg-dim)}
.skala .gr{height:9px;background:var(--fg-muted)}
.skala .gr i{position:absolute;top:11px;left:0;translate:-50% 0;font:400 11px/1.2 var(--f-mono);font-style:normal;color:var(--fg-muted);white-space:nowrap}
.f-hint{margin-top:4px;font-size:13px;line-height:1.45;color:var(--fg-muted)}
.r-kurz{display:none}
.r-anzeige{border-left:1px solid var(--fg);background:var(--bg);padding:24px}
.r-tab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.r-tab th,.r-tab td{padding:12px 0;border-top:1px solid var(--border);vertical-align:top;text-align:left}
.r-tab thead th{border-top:0;padding-top:0;font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);text-align:right}
.r-tab tbody th{font:600 15px/1.35 var(--f-text);padding-right:8px}
.r-tab td{text-align:right;white-space:nowrap;padding-left:14px;font-size:15px}
.r-tab td+td{color:var(--fg-muted)}
.r-tab .sub{display:block;margin-top:4px;font:400 13px/1.45 var(--f-text);color:var(--fg-muted)}
.r-tab th{hyphens:auto;-webkit-hyphens:auto}
.r-tab tr.v>*{padding-bottom:6px}
.r-tab tr.auf td{border-top:0;padding:0 0 12px;text-align:left;white-space:normal;color:var(--fg-muted)}
.r-tab dl.sub{margin:0;padding:6px 0 0 12px;border-left:1px solid var(--border)}
.r-tab dl.sub div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:2px 0}
.r-tab dl.sub dt{font:400 11.5px/1.6 var(--f-mono);letter-spacing:.02em}
.r-tab dl.sub dd{text-align:right;font-variant-numeric:tabular-nums}
.r-tab tfoot th,.r-tab tfoot td{border-top:2px solid var(--fg);padding-top:14px}
.r-tab tfoot th{font:600 15px/1.35 var(--f-text)}
.r-tab tfoot td[data-f=summe]{font:700 1.625rem/1 var(--f-head);letter-spacing:-.01em;color:var(--fg)}
.r-tab tfoot td+td{padding-top:20px}
.r-gut{margin-top:var(--s-3);padding-top:12px;border-top:1px solid var(--border);font-size:14.5px;line-height:1.5}
.r-gut .lab,.r-anfrage .lab{display:block;font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:4px}
.r-anfrage .big{font:700 1.625rem/1.1 var(--f-head);margin-bottom:var(--s-2)}
.r-anfrage p+p{margin-top:var(--s-2)}
.r-anfrage a{font-family:var(--f-mono)}
.preise .note{margin-top:var(--s-3);font-size:13.5px;line-height:1.5;color:var(--fg-muted)}
/* Beispiele ohne JS */
.mit-rechner .beispiele{display:none}
.bsp{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.bsp th,.bsp td{padding:12px 0;border-top:1px solid var(--border);text-align:left;vertical-align:top}
.bsp tbody tr:last-child>*{border-bottom:1px solid var(--border)}
.bsp thead th{border-top:0;padding-top:0;font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)}
.bsp thead th+th,.bsp td{text-align:right;padding-left:16px}
.bsp td{white-space:nowrap}
.bsp tbody th{font-weight:600}
.bsp .ann{display:block;margin-top:2px;font:400 12.5px/1.4 var(--f-mono);font-weight:400;color:var(--fg-muted)}
.bsp td:nth-child(4){font-weight:600}
.pr-act{margin-top:var(--s-5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4)}
.pr-act .small{font-size:15px;color:var(--fg-muted)}
@media (max-width:1023px){
  .preise .head,.pr-text,.pr-inkl,.pr-calc{grid-column:2/13}
  .preise .grid{padding-left:28px}
  .pr-inkl{margin-top:var(--s-5)}
  .rechner{grid-template-columns:minmax(0,1fr)}
  .r-anzeige{border-left:0;border-top:1px solid var(--fg)}
  .r-kurz{display:flex;justify-content:space-between;align-items:baseline;gap:12px;position:sticky;bottom:0;z-index:2;margin:0 -24px -28px;padding:12px 24px;background:var(--fg);color:var(--bg);font:500 12px/1.3 var(--f-mono);letter-spacing:.04em}
  .r-kurz b{font:700 1.25rem/1 var(--f-head);letter-spacing:0}
}
@media (max-width:639px){
  .preise .grid{padding-left:28px}
  .r-kopf{padding:12px 16px}
  .r-pult{padding:18px 16px 24px}
  .r-kurz{margin:0 -16px -24px;padding:12px 16px}
  .r-anzeige{padding:18px 16px}
  .r-tab td{padding-left:10px;font-size:14px}
  .r-tab tbody th,.r-tab tfoot th{font-size:14px}
  .r-tab tfoot td[data-f=summe]{font-size:1.3125rem}
  .r-tab dl.sub dd{white-space:nowrap}
  .skala .nb i{display:none}
  .preise{margin-top:var(--s-6)}
  .bsp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .bsp tr{display:block;padding:12px 0;border-top:1px solid var(--border)}
  .bsp tbody tr:last-child{border-bottom:1px solid var(--border)}
  .bsp th,.bsp td{display:flex;justify-content:space-between;border:0!important;padding:3px 0}
  .bsp th{display:block;padding-bottom:6px}
  .bsp td::before{content:attr(data-l);font:400 14px/1.5 var(--f-text);color:var(--fg-muted);white-space:normal;text-align:left}
}

/* ---------- Unterseiten (seit Fassung 5) ---------- */
.jump a[aria-current]{color:var(--fg)}
.jump a[aria-current]::after{width:100%}
/* Wegleiste: der Signalweg als schmale Leiste, eigene Station mit roter Tally */
.weg{border-bottom:1px solid var(--border);background:var(--bg)}
.weg .wrap{display:flex;align-items:center;gap:var(--s-4);min-height:52px}
.weg-start{flex:none;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);text-decoration:none;padding:12px 0}
.weg-start:hover{color:var(--fg)}
.weg ol{flex:1;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0;position:relative;min-width:0}
.weg ol::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--fg-dim)}
.weg li{position:relative}
.weg ol a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 8px;background:var(--bg);color:var(--fg-muted);text-decoration:none;font:500 12px/1 var(--f-mono);letter-spacing:.04em}
.weg li:first-child a{padding-left:0}
.weg li:last-child a{padding-right:0}
.weg ol a:hover{color:var(--fg)}
.weg .q{width:9px;height:9px;background:var(--accent);flex:none}
.weg .src .q{background:var(--bg);border:2px solid var(--fg)}
.weg .ende .q{background:var(--fg)}
.weg .n{color:var(--accent-ink)}
.weg a[aria-current]{color:var(--fg)}
.weg a[aria-current] .q{background:var(--rec);border-color:var(--rec)}
.weg-hint{flex:none;font:400 12px/1.3 var(--f-mono);color:var(--fg-muted)}
/* Stationsseite */
.station.single{padding-top:var(--s-6);padding-bottom:var(--s-6)}
.station.single::before{display:none}
.station.cur .node{background:var(--rec);border-color:var(--rec)}
.station.cur .here{display:block}
h1.h1s{font-weight:800;font-size:clamp(2rem,1.35rem + 2.2vw,2.875rem);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.st-body h1.h1s{margin-bottom:var(--s-4)}
.st-head h1.h1s{max-width:22ch}
.keys h2,.check h2{font-family:var(--f-text);letter-spacing:0}
/* Vor/Zurück entlang des Signalwegs */
.folge{border-top:1px solid var(--fg);margin-top:var(--s-6)}
.folge .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.folge a{display:block;padding:var(--s-4) 0;text-decoration:none;color:var(--fg)}
.folge a.next{text-align:right;grid-column:2}
.folge .k{display:block;font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)}
.folge .t{display:block;margin-top:6px;font:700 clamp(1.25rem,1rem + .8vw,1.625rem)/1.15 var(--f-head);letter-spacing:-.01em}
.folge .prev .t::before{content:"← ";color:var(--accent-ink)}
.folge .next .t::after{content:" →";color:var(--accent-ink)}
.folge a:hover .t{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.folge+.site-foot{border-top:0;padding-top:var(--s-5)}
/* Startseite: Inhaltsverzeichnis entlang der Signalleitung – je Station ein Ausschnitt, jede anders angeordnet */
.st-body .geo{font-size:14px;line-height:1.55;color:var(--fg-muted)}
.toc-list .station.toc{padding-bottom:var(--s-6)}
.toc-list .station.toc.end{padding-bottom:0}
.toc-list .station.lay-auslieferung{padding-bottom:var(--s-7)}
.toc-list .station.lay-weitergabe{padding-bottom:var(--s-5)}
.toc .rail{grid-row:1/4}
.toc-h,.toc-txt,.toc-body{grid-column:3/9}
.toc-h{font:700 clamp(1.25rem,1.05rem + .7vw,1.5rem)/1.2 var(--f-head);letter-spacing:-.01em;grid-row:1}
.toc-h a{color:var(--fg);text-decoration:none}
.toc-h .pf{color:var(--accent-ink);font-weight:700}
.toc-h a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.toc-txt{grid-row:2;margin-top:var(--s-2)}
.toc-body p+p{margin-top:var(--s-2)}
.toc-fig figcaption{margin-top:var(--s-2);font-size:13.5px}
.toc-fig .frame img{display:block}
/* 00: kleines Foto rechts, unten bündig mit dem Text */
.lay-produktion .toc-h,.lay-produktion .toc-txt{grid-column:3/8}
.lay-produktion .toc-fig{grid-column:9/13;grid-row:1/4;align-self:end}
/* 01: schmaler Statusstreifen unter dem Text, Unterschrift daneben */
.lay-zuspielung .toc-fig{grid-column:3/13;grid-row:3;margin-top:var(--s-4);display:flex;align-items:flex-end;gap:var(--gap)}
.lay-zuspielung .toc-fig figcaption{margin:0 0 2px;max-width:24ch}
/* 02: Bild an der Leitung, Text rechts daneben */
.lay-auslieferung .toc-fig{grid-column:3/7;grid-row:1/4;align-self:start}
.lay-auslieferung .toc-h,.lay-auslieferung .toc-txt{grid-column:7/12}
.lay-auslieferung .toc-h{padding-top:2px}
/* 03: Überschrift über die ganze Breite, darunter Text links, Clip rechts */
.lay-schnitt .toc-h{grid-column:3/13}
.lay-schnitt .toc-txt{grid-column:3/8;grid-row:2;margin-top:var(--s-3)}
.lay-schnitt .toc-fig{grid-column:8/13;grid-row:2/4;margin-top:var(--s-3)}
/* 04: kompakt, kleines Bild rechts oben */
.lay-weitergabe .toc-fig{grid-column:9/13;grid-row:1/4;align-self:start;padding-top:4px}
/* 05: Bild sofort unter der Überschrift, Text danach */
.lay-playlist .toc-fig{grid-column:3/13;grid-row:2;margin-top:var(--s-3);display:flex;align-items:flex-end;gap:var(--gap)}
.lay-playlist .toc-fig figcaption{margin:0 0 2px;max-width:24ch}
.lay-playlist .toc-txt{grid-row:3;margin-top:var(--s-3)}
.anschluss{margin-top:var(--s-6)}
.ans-text{grid-column:3/9;padding-top:var(--s-4);border-top:1px solid var(--border)}
/* Zugang als eigene Seite */
.access.solo{margin-top:0;border-top:0}
.access .head h1{margin:var(--s-3) 0}
.pr-link{margin-top:var(--s-4)}
.preise{margin-top:0;padding-top:var(--s-6)}
.preise .head h1{margin-top:var(--s-3)}
@media (max-width:1023px){
  .toc-body,.ans-text{grid-column:2/13}
  .toc-fig{margin-top:var(--s-4)}
  .lay-zuspielung .toc-fig,.lay-playlist .toc-fig{display:block}
  .lay-zuspielung .toc-fig figcaption,.lay-playlist .toc-fig figcaption{margin-top:var(--s-2);max-width:none}
  .lay-schnitt .toc-txt,.lay-playlist .toc-txt{margin-top:var(--s-2)}
  .toc-list .station.toc,.toc-list .station.lay-auslieferung{padding-bottom:var(--s-6)}
  .anschluss .grid{padding-left:28px}
  .weg-hint{display:none}
}
@media (max-width:639px){
  .weg .wrap{gap:12px}
  .weg-start{display:none}
  .weg .nm,.weg .n{display:none}
  .weg a[aria-current] .nm,.weg a[aria-current] .n{display:inline}
  .weg ol a{padding:0 8px;min-width:26px;justify-content:center}
  .station.single{padding-top:var(--s-5);padding-bottom:var(--s-5)}
  .folge .wrap{gap:12px}
  .folge .t{font-size:1.125rem}
}

/* ---------- Kopf eng ---------- */
@media (max-width:1180px){.jump{gap:16px}.site-head .wrap{gap:var(--s-4)}}
/* acht Sprunglinks (mit „Preise“) passen auch zwischen 1024 und 1099 px in eine Zeile */
@media (min-width:1024px) and (max-width:1099px){.jump{gap:12px}.jump a{font-size:13.5px}.site-head .wrap{gap:20px}}

/* ---------- Tablet ---------- */
@media (max-width:1023px){
  .brand{margin-right:auto}
  /* Kopf auf Tablet wie auf dem Telefon: Seitenmenü als wischbare zweite Zeile (ohne JS) */
  .site-head .wrap{flex-wrap:wrap;gap:0 16px;min-height:0;padding-top:12px;padding-bottom:0}
  /* umbrechend statt wischbar: der aktive Eintrag bleibt ohne JS sichtbar */
  .jumpnav{display:block;order:3;flex:0 0 calc(100% + 2 * var(--pad));margin:12px calc(-1 * var(--pad)) 0;padding:6px var(--pad) 8px;border-top:1px solid var(--border)}
  .jump{flex-wrap:wrap;gap:0 20px}
  .jump a{display:inline-block;padding:10px 0}
  .intro-text{grid-column:1/13}
  .intro-head{grid-column:1/13}
  .intro figure{grid-row:auto}
  .intro .wrap{display:flex;flex-direction:column;align-items:stretch}
  .intro-head{order:1}
  .intro figure{order:2;margin-top:var(--s-4)}
  .intro-text{order:3;margin-top:var(--s-5)}
  .intro-text{grid-row:auto}
  .intro figure{grid-column:1/13;margin-top:var(--s-5)}
  .intro h1{max-width:14ch}
  .intro-text{margin-top:var(--s-4)}
  .path-head,.chain,.st-body,.st-head,.fig,.col-l,.col-r,.faq .head,.faq dl,.access .head,.check,.site-foot .cols,.foot-line{grid-column:2/13}
  .sheet{grid-column:2/13;margin-top:var(--s-4)}
  .col-r{margin-top:var(--s-5)}
  .fig.side{display:block}
  .fig.side figcaption{margin-top:var(--s-2)}
  .check{margin-top:var(--s-5)}
}

@media (max-width:1023px){
  .grid{display:block}
  .path-head,.chain,.faq .grid,.access .grid,.site-foot .grid{padding-left:28px}
  .station{padding-left:28px}
  .rail{padding:0;margin-bottom:var(--s-3)}
  .rail .nr{font-size:1rem;display:inline}
  .rail .lbl{display:inline;margin-left:8px}
  .rail .tag{display:inline-block;margin:0 0 0 8px}
  .node{left:-28px}
  .sheet,.fig,.col-r,.col-l,.check,.st-head+.fig{margin-top:var(--s-4)}
  /* Schaltbild: Hauptzug als durchgehende Linie links, Abzweige daneben */
  .chain{display:block}
  .chain>li+li{margin-top:28px}
  .chain>li:not(:last-child)>.blk::after,.chain>li:not(:last-child)>.blk::before{display:none!important}
  .chain>li:not(:last-child)::after{content:"";position:absolute;left:24px;top:0;bottom:-28px;width:1px;background:var(--fg);z-index:-1}
  .chain>li:not(:last-child)::before{content:"";position:absolute;left:20px;bottom:-28px;border:4.5px solid transparent;border-top:7px solid var(--fg);border-bottom:0}
  .chain>li{z-index:0}
  .chain .blk{z-index:1}
  .chain>li:nth-child(2){display:flex;flex-direction:column-reverse}
  .branch{margin:12px 0 0 48px;padding:0;border-left:0;gap:12px}
  .branch.feed{margin:0 0 28px 48px}
  .branch li::before{left:-24px;width:24px}
  .branch li:last-child::after{display:none}
  .branch.feed::before{display:none}
  .branch.feed li::after{content:"";position:absolute;left:-23px;top:43px;bottom:auto;width:0;height:0;background:none;border:4.5px solid transparent;border-right:7px solid var(--fg);border-left:0;display:block}
}
/* ---------- Telefon ---------- */
@media (max-width:639px){
  :root{--pad:16px;--rail-x:5px;--node:12px;--node-y:3px}
  body{font-size:1rem}
  .site-head .wrap{flex-wrap:wrap;gap:0 16px;min-height:0;padding-top:12px;padding-bottom:0}
  .brand img{height:20px}
  .jump{gap:0 18px}
  .btn-head{min-height:40px;padding:10px 14px}
  .grid{display:block}
  .intro .wrap{padding-top:var(--s-5);padding-bottom:var(--s-5)}
  .intro figure{margin-right:calc(-1 * var(--pad))}
  .intro h1{font-size:2.25rem}
  .path-head,.chain,.faq,.access .grid,.site-foot .grid{padding-left:28px}
  .station{padding-left:28px;padding-bottom:var(--s-6)}
  .station.before-big{padding-bottom:var(--s-7)}
  .station.compact{padding-bottom:var(--s-5)}
  .rail{padding:0;margin-bottom:var(--s-3)}
  .rail .nr{font-size:1rem;display:inline}
  .rail .lbl{display:inline;margin-left:8px}
  .rail .tag{display:inline-block;margin:0 0 0 8px}
  .node{left:-28px}
  .sheet,.fig,.col-r,.col-l,.check{margin-top:var(--s-4)}
  .faq dl div{display:block}
  .faq dd{margin-top:6px}
  .site-foot .cols{display:block}
  .site-foot .cols>*+*{margin-top:var(--s-4)}
}
@media (max-width:399px){
  .brand{display:grid;gap:4px;justify-items:start}
  .brand .sep{display:none}
  .brand .add{font:500 11px/1 var(--f-mono);letter-spacing:.04em;color:var(--fg-muted);padding:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Rechtsseiten (Impressum, Datenschutz, AGB, Erstattung): schlichte Textseiten ---------- */
@media (max-width:899px){.site-foot .cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-4)}}
.pr-vertrag{margin-top:var(--s-4)}
.pr-recht{margin-top:var(--s-3);font-size:15px}
.recht{padding:var(--s-6) 0 var(--s-7)}
.rt-kopf{grid-column:3/11}
.rt-kopf h1.h1s{margin-top:var(--s-3);max-width:24ch;hyphens:auto}
.rt-stand{margin-top:var(--s-3);font:400 .875rem/1.55 var(--f-mono);color:var(--fg-muted)}
.rt-text{grid-column:3/10;max-width:64ch;margin-top:var(--s-5);overflow-wrap:break-word;hyphens:auto}
.rt-toc{grid-column:10/13;grid-row:2;margin-top:var(--s-5);align-self:start;position:sticky;top:var(--s-4);max-height:calc(100vh - 2 * var(--s-4));overflow:auto;font-size:14px;line-height:1.45}
.rt-toc ol{list-style:none;padding:0}
.rt-toc li{padding:5px 0;border-top:1px solid var(--border)}
.rt-toc li:last-child{border-bottom:1px solid var(--border)}
.rt-toc a{color:var(--fg-muted);text-decoration:none;display:block}
.rt-toc a:hover{color:var(--fg);text-decoration:underline}
.recht:not(.mit-toc) .rt-text{grid-column:3/10}
.rt-text h2{font:700 1.375rem/1.25 var(--f-head);letter-spacing:-.01em;margin-top:var(--s-6);scroll-margin-top:var(--s-4)}
.rt-text h2:first-child{margin-top:0}
.rt-text h3{font:600 1.0625rem/1.35 var(--f-text);margin-top:var(--s-5);scroll-margin-top:var(--s-4)}
.rt-text h2+*,.rt-text h3+*{margin-top:var(--s-3)}
.rt-text p,.rt-text ol,.rt-text ul,.rt-text .rt-tabelle{margin-top:var(--s-3)}
.rt-text h2:target,.rt-text h3:target{text-decoration:underline;text-decoration-color:var(--rec);text-decoration-thickness:2px;text-underline-offset:6px}
.rt-abs{padding-left:2em}
.rt-abs>li{padding-left:.25em}
.rt-abs>li+li,.rt-ul>li+li{margin-top:var(--s-2)}
.rt-abs>li::marker{font:500 .9em var(--f-mono);color:var(--fg-muted)}
.rt-sub{padding-left:1.6em;margin-top:var(--s-2)}
.rt-sub>li+li{margin-top:var(--s-1)}
.rt-ul{padding-left:1.2em;list-style:square}
.rt-ul>li::marker{color:var(--accent)}
.rt-text code{font:400 .88em var(--f-mono)}
.rt-text a{hyphens:manual}
.rt-text a[href^="mailto:"]{white-space:nowrap}
.rt-tabelle table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.rt-tabelle th{font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);text-align:left;padding:0 12px 8px 0;vertical-align:bottom}
.rt-tabelle td{padding:10px 12px 10px 0;border-top:1px solid var(--border);vertical-align:top}
.rt-tabelle tbody tr:last-child td{border-bottom:1px solid var(--border)}
@media (max-width:1023px){
  .rt-kopf,.rt-text,.rt-toc{grid-column:auto}
  .recht .grid{padding-left:28px}
  .rt-toc{position:static;max-height:none;overflow:visible;margin-top:var(--s-5)}
  .rt-toc ol{columns:2;column-gap:var(--gap)}
  .rt-toc li{break-inside:avoid}
}
@media (max-width:639px){
  .recht{padding-top:var(--s-5)}
  .recht .grid{padding-left:0}
  .rt-toc ol{columns:1}
  .rt-text h2{font-size:1.25rem}
  .rt-abs{padding-left:1.6em}
  .rt-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rt-tabelle tr{display:block;padding:10px 0;border-top:1px solid var(--border)}
  .rt-tabelle tbody tr:last-child{border-bottom:1px solid var(--border)}
  .rt-tabelle td{display:block;padding:2px 0;border:0!important}
  .rt-tabelle td::before{content:attr(data-l) ": ";font:500 11px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted)}
}
.chainnav{display:contents}

/* ---------- Arbeitsleiste (nur Entwurf) ---------- */
#entwurf-stand{background:var(--draft-bg);color:var(--draft-fg);border-bottom:2px dashed var(--draft-fg);font:400 13px/1.5 var(--f-mono)}
#entwurf-stand .wrap{padding-top:10px;padding-bottom:10px}
#entwurf-stand b{font-weight:500}
#entwurf-stand p+p{margin-top:2px}