:root{--bg:#F3F1EC;--fg:#111111;--red:#D4453A;--paper:#F3F1EC;--head:"Barlow Condensed","Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;color-scheme:light;
  /* 1vw, aber nie breiter als bei 1680px – Schrift wächst auf Riesen-Monitoren nicht weiter */
  --vw:min(1vw,16.8px);
  /* Seitenrand: Flächen/Bilder laufen voll durch, Text bleibt in 1680px */
  --gutter:max(clamp(16px,calc(3*var(--vw)),32px),calc((100vw - 1680px) / 2 + 32px));
  /* große Seiten-Headlines passen sich ihrer Spalte an */
  --fit:18cqi;
  /* responsive werte (mobil) – entsprechen den desk/mob-Werten aus dem Design */
  --sideH:calc(15*var(--vw));--numH:calc(26*var(--vw));--listH:calc(6*var(--vw));--tickH:calc(11*var(--vw));--tickBig:calc(16*var(--vw));--busPos:60% 45%;--stepPadX:0;--stepRule:0}
@media (min-width:900px){:root{--sideH:calc(8.5*var(--vw));--numH:calc(15*var(--vw));--listH:calc(3.6*var(--vw));--tickH:calc(5*var(--vw));--tickBig:calc(8*var(--vw));--busPos:50% 26%;--stepPadX:24px;--stepRule:2px solid var(--fg)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#111111;--fg:#F3F1EC;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#111111;--fg:#F3F1EC;color-scheme:dark}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);overflow-x:clip}
*{box-sizing:border-box}
a{color:var(--fg);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
::selection{background:var(--red);color:var(--paper)}
#mitmachen,#zahlen{scroll-margin-top:64px}

/* sichtbarkeit */
.is-hidden{display:none!important}
@media (max-width:899.98px){.desk-only{display:none!important}}
@media (min-width:900px){.mob-only{display:none!important}}
@media (min-aspect-ratio:5/4){.portrait-only{display:none!important}}
@media not all and (min-aspect-ratio:5/4){.landscape-only{display:none!important}}
.nav-hidden{transform:translateY(-110%)}

/* layout */
.cols{grid-template-columns:minmax(0,1fr)}
.post-link{grid-template-columns:minmax(0,1fr)}
.sticky-desk{position:static}
@media (min-width:900px){
  .cols{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .post-link{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .sticky-desk{position:sticky}
}

/* hover-zustände (im Design als style-hover) */
.hl{transition:color 150ms}
.hl:hover{color:var(--red)!important}
.btn-red:hover{background:var(--fg)!important;border-color:var(--fg)!important;color:var(--bg)!important}
.btn-dark:hover{background:var(--red)!important;border-color:var(--red)!important;color:var(--paper)!important}

/* wiederkehrende bausteine */
.numlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.numlist li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;border-top:2px solid var(--fg);padding:clamp(22px,calc(2.4*var(--vw)),36px) 0 clamp(30px,calc(3.2*var(--vw)),48px)}
.numlist li:last-child{border-bottom:2px solid var(--fg)}
.fit{container-type:inline-size}
.numlist .num{font-size:14px;font-weight:600;color:var(--red);padding-top:.4em}
.numlist .big{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(34px,var(--listH),76px);line-height:1.02;text-wrap:balance}
.strike{font-family:var(--head);font-weight:800;text-transform:uppercase;line-height:.92;text-decoration-line:line-through;text-decoration-color:var(--red);text-decoration-thickness:.11em;text-decoration-skip-ink:none}
.verdict{display:block;font-size:clamp(14px,calc(1.3*var(--vw)),17px);font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}
.step{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:20px var(--stepPadX) 28px;border-bottom:2px solid var(--fg);border-left:var(--stepRule)}
.step:first-child{border-left:0;padding-left:0}
.step-btn{align-self:flex-start;display:flex;gap:16px;padding:14px 18px;background:var(--fg);color:var(--bg);border:2px solid var(--fg);font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:background-color 150ms,border-color 150ms,color 150ms}
.cta{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(22px,calc(2.2*var(--vw)),28px);line-height:1;text-decoration:none;transition:background-color 150ms,border-color 150ms,color 150ms}
.shot{position:relative;aspect-ratio:9/19.5;border:2px solid var(--fg);overflow:hidden;display:flex;align-items:flex-end}
.shot .hatch{position:absolute;inset:0;background:repeating-linear-gradient(135deg,var(--fg) 0 1px,transparent 1px 12px);opacity:.14}
.shot span{position:relative;margin:12px;padding:6px 8px;background:var(--bg);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

.bus-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,calc(5*var(--vw)),72px)}
.bus-stat{display:flex;flex-direction:column;gap:14px}
.bus-label,.bus-meta{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.bus-big{display:flex;align-items:baseline;gap:.14em;font-family:var(--head);font-weight:800;text-transform:uppercase;line-height:.82;white-space:nowrap;margin:4px 0 6px -.03em}
.bus-one{font-size:clamp(96px,calc(26*var(--vw)),200px)}
.bus-unit{font-size:clamp(32px,calc(9*var(--vw)),64px)}
.bus-bar{height:8px;border:1px solid var(--fg);position:relative;overflow:hidden}
.bus-meta{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.bus-q{margin:0;font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(36px,calc(9.5*var(--vw)),80px);line-height:.95;text-wrap:balance}
.bus-src{display:block;margin-top:clamp(40px,calc(5*var(--vw)),72px);font-size:11px;letter-spacing:.04em;text-transform:uppercase;line-height:1.5;opacity:.8}
@media (min-width:900px){
  .bus-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}
  .bus-one{font-size:clamp(96px,calc(11*var(--vw)),200px)}
  .bus-unit{font-size:clamp(32px,calc(3.4*var(--vw)),64px)}
  .bus-q{font-size:clamp(36px,calc(4.4*var(--vw)),80px)}
}

/* formular */
.lbl{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.err{color:var(--red)}
.inp{width:100%;border:1px solid var(--fg);border-radius:0;background:transparent;color:var(--fg);padding:14px 12px;font-family:var(--mono);font-size:16px;outline:none}
.inp:focus{outline:2px solid var(--red);outline-offset:-1px}
.chk{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border:1px solid var(--fg);border-radius:0;background:transparent;cursor:pointer}
.chk:checked{background:var(--red)}
.chk:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button[disabled]{opacity:.6;cursor:wait!important}

/* artikel */
.post-link{display:grid;gap:12px clamp(24px,calc(4*var(--vw)),64px);border-top:2px solid var(--fg);padding:20px 0 32px;text-decoration:none;color:var(--fg);transition:color 150ms}
.post-link:hover{color:var(--red)}