/* Seiten-CSS aus dem Prototyp (branche-fertigung), Entwurf B – Angreiferblick */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#FFFFFF; --text:#000000; --muted:#4A4F57; --line:#D6DCE3;
  --blue:#0070C0; --blue-dark:#005A9C; --sky:#00B0F0; --soft:#EAF4FB; --paper:#F5F7F9;
  --night:#262626; --night2:#303030; --red:#B40000; --red-hi:#FF4040;
  --font:"Segoe UI","Segoe UI Variable Text",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#15181C; --text:#F3F5F7; --muted:#AEB6C0; --line:#2E343B;
    --blue:#3A9BE0; --blue-dark:#2B86C8; --sky:#33C3F5; --soft:#1B2631; --paper:#1A1E23;
  }
}
:root[data-theme="dark"]{
  --bg:#15181C; --text:#F3F5F7; --muted:#AEB6C0; --line:#2E343B;
  --blue:#3A9BE0; --blue-dark:#2B86C8; --sky:#33C3F5; --soft:#1B2631; --paper:#1A1E23;
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 3.5rem);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
body.dark-b{background:var(--night)}
h1,h2,h3,h4{font-weight:600;line-height:1.15;margin:0}
p{margin:0 0 1em}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem}
.light{font-weight:300}
.btn{display:inline-block;background:var(--blue);color:#fff;font:inherit;font-weight:600;text-decoration:none;padding:.8rem 1.3rem;border-radius:3px;border:0;cursor:pointer}
.btn:hover{background:var(--blue-dark)}
.ghost{background:transparent;color:var(--blue);border:1.5px solid var(--blue);padding:.55rem 1rem}
.ghost:hover{background:var(--soft)}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:38rem}

/* Entwurfs-Umschalter */
.switch{position:sticky;top:0;z-index:20;background:#0B2A44;color:#fff;padding-top:env(safe-area-inset-top,0px)}
.switch .wrap{display:flex;align-items:center;gap:1rem;min-height:3.25rem;flex-wrap:wrap}
.switch .lab{font-size:.85rem;opacity:.75}
.switch [role=tablist]{display:flex;gap:.25rem;flex-wrap:wrap}
.switch button{font:inherit;font-size:.92rem;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:3px;padding:.35rem .8rem;cursor:pointer}
.switch button[aria-selected=true]{background:#fff;color:#0B2A44;border-color:#fff;font-weight:600}
@media (max-width:560px){.switch .lab{display:none}.switch button{font-size:.85rem;padding:.3rem .6rem}}

/* Fachbegriffe */
.term{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:help;border-bottom:1.5px dotted currentColor;text-align:inherit}
.term::after{content:"?";font-size:.62em;font-weight:600;color:var(--blue);margin-left:.12em;vertical-align:super}
.term[aria-expanded=true]{border-bottom-style:solid}
.def{background:var(--soft);border-left:3px solid var(--blue);padding:.1em .45em;margin:0 .2em;font-size:.9rem;font-weight:400;font-style:normal;color:var(--text);letter-spacing:0;line-height:1.5}
.def[hidden]{display:none}

/* Formular */
.form{display:grid;gap:1rem}
.form label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem}
.form input,.form select,.form textarea{font:inherit;font-weight:400;color:inherit;background:transparent;border:1px solid var(--line);border-radius:2px;padding:.7rem .8rem;width:100%}
.form select option{color:#000}
.form textarea{min-height:7rem;resize:vertical}
.form-note{font-size:.88rem;opacity:.8;margin:0}

.foot{border-top:1px solid var(--line);padding:2.5rem 0 3rem;font-size:.92rem;color:var(--muted)}
.foot .cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem}
.foot p{margin:0 0 .3rem}

/* ============ ENTWURF A – Ruhig & klar ============ */
.v-a .top{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0}
.mark{font-weight:600;font-size:1.35rem;letter-spacing:.02em;color:var(--blue);text-decoration:none}
.mark span{font-weight:300}
.v-a .hero{padding:3.5rem 0 4rem}
.for{color:var(--muted);font-size:1rem;margin-bottom:1.25rem}
.v-a h1{font-size:clamp(2.2rem,5.6vw,4.4rem);letter-spacing:-.015em;max-width:15ch}
.v-a h1 .second{display:block;font-weight:300}
.axis{position:relative;height:2.5rem;margin:2.5rem 0 2rem;max-width:40rem}
.axis::before{content:"";position:absolute;left:0;right:14%;top:50%;height:3px;background:var(--blue)}
.axis::after{content:"";position:absolute;right:14%;top:0;bottom:0;width:3px;background:var(--red-hi)}
.axis span{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:.85rem;color:var(--muted)}
.lead{font-size:1.25rem;font-weight:300;max-width:38rem;margin-bottom:2rem}
.lead strong{font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.actions small{color:var(--muted);font-size:.95rem}
.v-a .sec{padding:4.5rem 0}
.v-a .rule{border-top:1px solid var(--line)}
.v-a .head{margin-bottom:2.5rem}
.v-a .head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:.9rem;max-width:28ch}
.v-a .head p{color:var(--muted);max-width:42rem}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.fact{border-top:3px solid var(--blue);padding-top:1rem}
.fact .n{font-size:2.6rem;font-weight:600;line-height:1;color:var(--blue)}
.fact .n small{font-size:1rem;font-weight:400;color:var(--muted)}
.fact p{margin:.7rem 0 0}
.source{margin-top:2rem;font-size:.9rem;color:var(--muted)}
.v-a .rows{border-top:1px solid var(--line)}
.v-a .row{display:grid;grid-template-columns:minmax(14rem,1fr) 2fr;gap:2rem;padding:1.75rem 0;border-bottom:1px solid var(--line)}
.v-a .row h3{font-size:1.3rem}
.v-a .row .sub{color:var(--muted);margin:.35rem 0 0;font-size:.97rem}
.v-a .row>p{margin:0;max-width:40rem}
.gap-a{background:var(--blue);color:#fff;padding:4.5rem 0}
.gap-a h2{font-size:clamp(1.8rem,3.8vw,2.8rem);max-width:22ch;margin-bottom:1.25rem}
.gap-a .gp{font-size:1.15rem;font-weight:300;max-width:44rem}
.contrast{display:grid;grid-template-columns:1fr 2fr;gap:2.5rem;margin-top:2.5rem}
.contrast .cl{font-size:.95rem;opacity:.8;margin-bottom:.8rem}
.contrast .them ul{list-style:none;padding:0;margin:0}
.contrast .them li{padding:.55rem 0;border-top:1px solid rgba(255,255,255,.25);opacity:.8}
.contrast dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 2rem}
.contrast dt{font-weight:600;font-size:1.1rem;border-top:2px solid #fff;padding-top:.55rem}
.contrast dd{margin:.25rem 0 0;font-weight:300}
.gap-a .note{margin:2.5rem 0 0;opacity:.9;max-width:44rem}
.gap-a .term::after{color:#fff}
.gap-a .def{color:#000;background:#fff}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.principles h3{font-size:1.25rem;margin-bottom:.6rem}
.principles .concrete{font-size:.95rem;color:var(--muted);margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line)}
/* Gabelung */
.trunk{background:var(--paper);padding:1.5rem;border-left:4px solid var(--blue)}
.cl2{font-size:.95rem;color:var(--muted);margin:0 0 1rem}
.trunk-steps{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.st{display:grid;grid-template-columns:2.6rem 1fr;gap:.6rem}
.sn{width:2.3rem;height:2.3rem;border-radius:50%;background:var(--blue);color:#fff;font-weight:600;display:grid;place-items:center;font-size:.92rem}
.st b{display:block;font-size:1.05rem}
.st .fmt{display:block;font-size:.85rem;color:var(--muted);margin:.1rem 0 .35rem}
.st p{margin:0 0 .35rem;font-size:.95rem}
.st .res{color:var(--muted)}
.st .res span{font-weight:600;color:var(--text)}
.fork{display:grid;grid-template-columns:1fr 1fr;gap:0;position:relative}
.fork::before{content:"";position:absolute;left:25%;right:25%;top:0;height:2rem;border:2px solid var(--blue);border-bottom:0}
.branch{padding:3rem 1.5rem 1.5rem}
.branch+.branch{border-left:1px solid var(--line)}
.branch h3{font-size:1.45rem}
.branch .q{font-size:1.1rem;font-weight:300;margin:.4rem 0 1.5rem}
.branch .st{margin-bottom:1.25rem}
.outcome{background:var(--soft);padding:1rem 1.1rem;margin-top:1.5rem}
.outcome .p{font-size:1.7rem;font-weight:600;color:var(--blue);line-height:1.1;margin-top:.6rem}
.outcome .p small{font-size:.9rem;font-weight:400;color:var(--muted)}
.outcome .nt{font-size:.9rem;color:var(--muted);margin:.5rem 0 0}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:.8rem .9rem;border-bottom:1px solid var(--line);font-size:.97rem}
.cmp thead th{border-bottom:2px solid var(--blue);font-size:1.05rem}
.cmp tbody th{font-weight:600;width:22%;color:var(--muted)}
.m365{margin-top:2rem;padding:1.25rem 1.5rem;border:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;justify-content:space-between}
.m365 p{margin:0;max-width:44rem}
.m365 b.p{color:var(--blue);font-size:1.3rem}
/* Bang */
.bang{display:grid;grid-template-columns:2fr 1fr}
.left{background:var(--soft);padding:2.5rem 2rem}
.right{background:var(--night);color:#fff;padding:2.5rem 2rem;border-left:4px solid var(--red-hi)}
.bl h3{font-size:1.6rem}
.left .bl h3{color:var(--blue)}
.right .bl h3{color:var(--red-hi)}
.bl p{margin:.3rem 0 2rem;font-weight:300}
.phases{display:grid;grid-template-columns:1fr 1fr;gap:2.25rem}
.phase h4{font-size:1.12rem;margin:0 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--blue)}
.right .phase h4{border-color:var(--red-hi)}
.svc{margin-bottom:1.3rem}
.svc .nm{font-weight:600}
.svc .like{font-size:.88rem;font-style:italic;opacity:.75}
.svc p{margin:.2rem 0 0;font-size:.95rem}
.svc .pr{display:inline-block;margin-top:.35rem;font-weight:600;color:var(--blue);font-size:.93rem}
.svc.soon .nm::after{content:" (demnächst)";font-weight:300;opacity:.7}
.right .def{background:#3a3a3a;color:#fff;border-color:var(--red-hi)}
.right .term::after{color:var(--red-hi)}
.motto{margin-top:3rem;font-size:1.3rem;font-weight:300;max-width:38rem;border-left:3px solid var(--blue);padding-left:1.25rem}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.steps{list-style:none;padding:0;margin:1.5rem 0 0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.25rem 1fr;gap:.75rem;margin-bottom:1.25rem}
.steps li::before{content:counter(s);font-weight:600;color:var(--blue);font-size:1.4rem;line-height:1.2}
.steps b{display:block}

/* ============ ENTWURF B – Angreiferblick ============ */
.v-b{background:var(--night);color:#fff;--line:#474747;--muted:#C4C4C4}
.v-b a{color:#FF7A7A}
.v-b .btn{background:var(--red);color:#fff}
.v-b .btn:hover{background:#8F0000}
.v-b .ghost{background:transparent;border-color:#fff;color:#fff}
.v-b .ghost:hover{background:var(--night2)}
.v-b .term::after{color:var(--red-hi)}
.v-b .def{background:#3a3a3a;color:#fff;border-color:var(--red-hi)}
.v-b .mark{color:#fff}
.v-b .top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;padding-top:1.25rem;padding-bottom:1.25rem}
.v-b .hero{padding-top:4.5rem;padding-bottom:3rem}
.v-b .for{color:var(--muted)}
.v-b h1{font-size:clamp(2.4rem,6.4vw,5.2rem);letter-spacing:-.02em;line-height:1.05;max-width:14ch}
.v-b h1 .second{display:block;color:var(--red-hi)}
.bangline{height:4px;background:linear-gradient(90deg,#fff 0 70%,var(--red-hi) 70% 100%);margin:2.75rem 0 2rem;position:relative}
.bangline::after{content:"";position:absolute;left:70%;top:-14px;width:4px;height:32px;background:var(--red-hi)}
.v-b .lead{color:#eee}
.v-b .sec{padding:4.5rem 0;border-top:1px solid var(--line)}
.v-b .head h2{font-size:clamp(1.8rem,3.8vw,2.8rem);max-width:24ch;margin-bottom:1rem}
.v-b .head p{max-width:44rem;color:#ddd;font-size:1.1rem;font-weight:300}
.levers{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:2.5rem;border-top:1px solid var(--line)}
.lever{padding:1.75rem 1.75rem 1.75rem 0;border-bottom:1px solid var(--line)}
.lever:nth-child(odd){border-right:1px solid var(--line)}
.lever:nth-child(even){padding-left:1.75rem}
.lever h3{font-size:1.35rem;color:#fff;margin-bottom:.3rem}
.lever .sub{color:var(--muted);font-size:.97rem;margin-bottom:.9rem}
.lever .hb{border-left:3px solid var(--red-hi);padding-left:.9rem;margin:0}
.v-b .facts .fact{border-color:var(--red-hi)}
.v-b .fact .n{color:var(--red-hi)}
.v-b .fact .n small,.v-b .source{color:var(--muted)}
.gap-b h2{font-size:clamp(2rem,4.8vw,3.6rem);line-height:1.1;letter-spacing:-.015em;margin-bottom:2rem}
.gap-b h2 .not{display:block;color:#8A8A8A;font-weight:300}
.gap-b h2 .yes{display:block;color:#fff}
.gap-b .cols2{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.gap-b .col h3{font-size:1rem;font-weight:400;color:var(--muted);margin-bottom:1rem}
.gap-b .them li{color:#8A8A8A;font-size:1.25rem;font-weight:300;padding:.5rem 0;border-top:1px solid var(--line);list-style:none}
.gap-b ul{padding:0;margin:0}
.gap-b .us li{list-style:none;padding:.7rem 0;border-top:2px solid var(--red-hi)}
.gap-b .us b{display:block;font-size:1.25rem}
.gap-b .us span{color:#ccc;font-weight:300}
.gap-b .note{margin-top:2rem;color:#ccc;max-width:44rem}
.gap-b .fullp{font-size:1.1rem;font-weight:300;max-width:46rem;color:#e6e6e6;margin-bottom:2.5rem}
.diff{font-size:1.25rem;font-weight:300;max-width:44rem;margin-bottom:2rem;border-left:3px solid var(--red-hi);padding-left:1.1rem}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{font:inherit;color:#bbb;background:none;border:0;border-bottom:3px solid transparent;padding:.9rem 1.2rem;cursor:pointer;white-space:nowrap;font-weight:600}
.tabs button[aria-selected=true]{color:#fff;border-bottom-color:var(--red-hi)}
.tabpanel{padding:2.25rem 0 0}
.tp-head{display:grid;grid-template-columns:2fr 1fr;gap:2rem;align-items:end;margin-bottom:2.25rem}
.tp-head .q{font-size:clamp(1.4rem,3vw,2rem);font-weight:300;line-height:1.25;margin:0}
.tp-head .p{text-align:right;font-size:2rem;font-weight:600;color:#fff;line-height:1}
.tp-head .p small{display:block;font-size:.9rem;font-weight:400;color:var(--muted);margin-top:.35rem}
.track{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.track.c4{grid-template-columns:repeat(4,1fr)}
.track.c5{grid-template-columns:repeat(5,1fr)}
.track.c3{grid-template-columns:repeat(3,1fr)}
.tk{background:var(--night2);padding:1.1rem}
.tk .n{color:var(--red-hi);font-weight:600;font-size:1.3rem}
.tk b{display:block;margin:.3rem 0 .15rem}
.tk .fmt{font-size:.82rem;color:var(--muted);display:block;margin-bottom:.6rem}
.tk p{font-size:.92rem;margin:0 0 .6rem}
.tk .res{color:#ccc;border-top:1px solid var(--line);padding-top:.5rem;margin:0}
.tp-foot{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.75rem}
.tp-foot h4{font-size:1rem;color:var(--red-hi);margin-bottom:.4rem}
.tp-foot p{margin:0;color:#ddd}
.v-b .principles h3{color:#fff}
.v-b .principles .concrete{color:var(--muted);border-color:var(--line)}
.svcb{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.svcb h3{font-size:1.1rem;padding-bottom:.5rem;border-bottom:2px solid #fff;margin-bottom:1rem}
.svcb .rb h3{border-color:var(--red-hi);color:var(--red-hi)}
.svcb .lab{font-size:.85rem;color:var(--muted);display:block;margin-bottom:.25rem}
.svcb ul{list-style:none;padding:0;margin:0}
.svcb li{padding:.45rem 0;border-bottom:1px solid var(--line)}
.svcb li span{display:block;font-size:.86rem;color:var(--muted)}
.v-b .contact .steps li::before{color:var(--red-hi)}
.v-b .form input,.v-b .form select,.v-b .form textarea{border-color:#5a5a5a}
.v-b .foot{border-color:var(--line);color:var(--muted)}

/* ============ ENTWURF C – Tischvorlage ============ */
.v-c{background:var(--paper)}
.v-c .doc{display:grid;grid-template-columns:14rem 1fr;gap:3rem;max-width:76rem;margin:0 auto;padding:2.5rem 1.5rem 0}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 4.5rem);align-self:start}
.toc .mark{display:block;margin-bottom:2rem}
.toc ol{list-style:none;padding:0;margin:0;border-left:2px solid var(--line)}
.toc a{display:block;padding:.4rem 0 .4rem 1rem;color:var(--muted);text-decoration:none;font-size:.95rem;margin-left:-2px;border-left:2px solid transparent}
.toc a:hover{color:var(--blue);border-left-color:var(--blue)}
.toc .btn{margin-top:1.75rem;font-size:.92rem}
.sheet{background:var(--bg);border:1px solid var(--line);padding:3rem 3.25rem;max-width:52rem}
.kicker{font-size:.95rem;color:var(--muted);margin-bottom:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;border-bottom:1px solid var(--line);padding-bottom:.9rem}
.v-c h1{font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.01em;margin-bottom:1.25rem}
.v-c h1 .second{font-weight:300}
.v-c .lead{font-size:1.2rem;margin-bottom:0}
.part{margin-top:3.5rem;padding-top:2rem;border-top:2px solid var(--text)}
.part>.pn{display:flex;gap:1rem;align-items:baseline;margin-bottom:1.5rem}
.part>.pn span{font-size:2.2rem;font-weight:300;color:var(--blue);line-height:1}
.part>.pn h2{font-size:1.9rem}
.part h3{font-size:1.25rem;margin:2rem 0 .8rem}
.kv{display:grid;grid-template-columns:8.5rem 1fr;gap:.25rem 1.25rem;margin:0}
.kv dt{font-weight:600;font-size:1.5rem;color:var(--blue);line-height:1.3}
.kv dt small{display:block;font-size:.8rem;font-weight:400;color:var(--muted)}
.kv dd{margin:0 0 1.1rem}
.lv{counter-reset:none;padding:0;margin:0;list-style:none}
.lv li{padding:.9rem 0;border-top:1px solid var(--line)}
.lv b{display:block;font-size:1.05rem}
.lv span.sub{display:block;color:var(--muted);font-size:.95rem;margin-bottom:.3rem}
.quote-c{font-size:1.5rem;font-weight:600;line-height:1.25;margin:0 0 1rem;color:var(--blue)}
.dmg{width:100%}
.dmg th,.dmg td{text-align:left;vertical-align:top;padding:.7rem .8rem;border-bottom:1px solid var(--line);font-size:.97rem}
.dmg th{width:32%}
.pr3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.pr3 b{display:block;margin-bottom:.3rem}
.pr3 p{font-size:.95rem;margin:0}
.chooser{display:grid;gap:.6rem;margin:1rem 0 1.5rem}
.chooser button{font:inherit;text-align:left;background:var(--bg);color:var(--text);border:1.5px solid var(--line);border-radius:3px;padding:1rem 1.1rem 1rem 3rem;cursor:pointer;position:relative;font-size:1.05rem}
.chooser button::before{content:"";position:absolute;left:1.1rem;top:1.2rem;width:1rem;height:1rem;border-radius:50%;border:2px solid var(--muted)}
.chooser button[aria-pressed=true]{border-color:var(--blue);background:var(--soft)}
.chooser button[aria-pressed=true]::before{border-color:var(--blue);background:radial-gradient(var(--blue) 45%,transparent 50%)}
.rec{border:2px solid var(--blue);padding:1.5rem 1.6rem}
.rec .rh{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;margin-bottom:.4rem}
.rec h4{font-size:1.4rem}
.rec .p{font-size:1.5rem;font-weight:600;color:var(--blue)}
.rec .cl3{color:var(--muted);margin-bottom:1.25rem}
.rec ol{list-style:none;padding:0;margin:0 0 1.25rem}
.rec li{display:grid;grid-template-columns:2.4rem 1fr;gap:.5rem;padding:.6rem 0;border-top:1px solid var(--line)}
.rec li .n{font-weight:600;color:var(--blue)}
.rec li .e{color:var(--muted);font-size:.93rem;display:block}
.rec .res{background:var(--soft);padding:.9rem 1rem;margin:0}
.rec .nt{font-size:.9rem;color:var(--muted);margin:.75rem 0 0}
.matrix{min-width:40rem}
.matrix th,.matrix td{border:1px solid var(--line);padding:.7rem;vertical-align:top;text-align:left;font-size:.93rem}
.matrix thead .lob{background:var(--soft);color:var(--blue);text-align:center}
.matrix thead .rob{background:var(--night);color:var(--red-hi);text-align:center}
.matrix thead .ph{font-weight:600}
.matrix thead .ph.r{background:var(--night);color:#fff}
.matrix tbody th{width:18%;background:var(--paper)}
.matrix td.r{background:rgba(180,0,0,.06)}
.matrix td div{margin-bottom:.45rem}
.matrix td div:last-child{margin-bottom:0}
.matrix td i{display:block;font-size:.82rem;color:var(--muted)}
.v-c .form{margin-top:1.25rem}
.v-c .foot{max-width:76rem;margin:3rem auto 0;padding-left:1.5rem;padding-right:1.5rem}

/* ============ Responsiv ============ */
@media (max-width:900px){
  .facts,.principles,.pr3{grid-template-columns:1fr;gap:2rem}
  .v-a .row{grid-template-columns:1fr;gap:.5rem}
  .contrast,.contrast dl,.contact,.bang,.phases,.trunk-steps,.gap-b .cols2,.tp-head,.tp-foot,.svcb{grid-template-columns:1fr}
  .fork{grid-template-columns:1fr}
  .fork::before{display:none}
  .branch{padding:2rem 0 1rem}
  .branch+.branch{border-left:0;border-top:1px solid var(--line)}
  .right{border-left:0;border-top:4px solid var(--red-hi)}
  .left,.right{padding:2rem 1.25rem}
  .levers{grid-template-columns:1fr}
  .lever,.lever:nth-child(even){padding:1.5rem 0;border-right:0}
  .lever:nth-child(odd){border-right:0}
  .track.c3,.track.c4,.track.c5{grid-template-columns:1fr}
  .tp-head .p{text-align:left}
  .v-c .doc{grid-template-columns:1fr;gap:1.5rem;padding-top:1.5rem}
  .toc{position:static}
  .toc ol{display:flex;flex-wrap:wrap;border-left:0;gap:.25rem 1rem}
  .toc a{padding:.2rem 0;border-left:0}
  .toc .btn{display:none}
  .sheet{padding:2rem 1.4rem}
}
@media (max-width:560px){
  .wrap{padding:0 1.1rem}
  .v-a .sec,.v-b .sec{padding:3.25rem 0}
  .v-a .top .ghost,.v-b .top .ghost{display:none}
  .kv{grid-template-columns:1fr}
  .kv dd{margin-bottom:1.25rem}
}

/* Ehemalige Inline-Styles (CSP: keine style-Attribute) */
.st1{color:#bbb !important}
.st2{margin-top:.75rem !important;color:#aaa !important;font-size:.93rem !important}
.st3{margin-top:1.5rem !important}

/* Rote Akzente der gemeinsamen Bausteine im Entwurf B "Angreiferblick" */
.v-b .s42-refs figure{border-left-color:var(--red)}
.v-b .s42-refs a,.v-b .s42-team li a{text-decoration-color:var(--red-hi)}
.v-b .s42-team .role{color:var(--red-hi)}
.v-b .s42-calc .big,.v-b .s42-gl .kick,.v-b .s42-it .kick{color:var(--red-hi)}
.v-b .s42-calc input[type=range]{accent-color:var(--red-hi)}
.v-b .s42-step{background:var(--red)}
.v-b .s42-it .who td.us{border-left-color:var(--red)}
.v-b .s42-reiter button[aria-selected="true"]{border-bottom-color:var(--red-hi)}