:root{color-scheme:dark;--bg:#0b0f14;--rand:#243040;--text:#dbe2ea;--hell:#f0f4f8;--text2:#b8c4d1;--gedimmt:#93a1b1;--blau:#7cc4ff;
  --tafel:#0a0907;--tafel-rand:#2a2418;--amber:#ffb547;--amber2:#c98a2e;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--sans:system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--blau)}
a:hover{color:var(--hell)}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
.seite{max-width:1240px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:clamp(16px,3vw,40px);display:flex;flex-direction:column;gap:clamp(40px,6vw,80px)}

/* Tafel */
.tafel{background:var(--tafel);border:1px solid var(--tafel-rand);border-radius:7px;padding:clamp(16px,2.6vw,34px);font-family:var(--mono);color:var(--amber);display:flex;flex-direction:column;gap:clamp(16px,2.2vw,26px);box-shadow:inset 0 0 70px rgba(255,181,71,.05)}
.tafel-kopf{display:flex;justify-content:space-between;gap:16px;font-size:13px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--amber2);border-bottom:1px solid var(--tafel-rand);padding-bottom:12px}
.tafel-kopf time{font-variant-numeric:tabular-nums}
.punkte{margin:0;font-family:var(--mono);font-size:clamp(33px,9vw,126px);font-weight:800;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;color:var(--amber);
  -webkit-mask-image:radial-gradient(circle at center,#000 56%,transparent 62%);mask-image:radial-gradient(circle at center,#000 56%,transparent 62%);
  -webkit-mask-size:max(3px,.042em) max(3px,.042em);mask-size:max(3px,.042em) max(3px,.042em)}
.hinweis{margin:0;background:var(--amber);color:var(--tafel);font-size:clamp(16px,1.7vw,21px);font-weight:700;line-height:1.35;padding:8px 12px;border-radius:2px}
.tafel-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:start}
.satz{margin:0;font-size:clamp(20px,2.3vw,30px);line-height:1.3;font-weight:600;text-wrap:balance}
.fakten{margin:0;display:flex;flex-direction:column;gap:8px;font-size:clamp(16px,1.6vw,20px);font-weight:600;line-height:1.3}
.fakten div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:center}
.fakten dd{margin:0;background:var(--amber);color:var(--tafel);text-align:center;border-radius:2px;padding:3px 4px;font-weight:700;font-variant-numeric:tabular-nums}
.lauf{overflow:hidden;white-space:nowrap;border-top:1px solid var(--tafel-rand);padding-top:12px;font-size:15px;line-height:1.3}
.lauf div{display:inline-block;padding-left:100%;animation:lauf 42s linear -12s infinite}
@keyframes lauf{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.lauf div{animation:none;padding-left:0}}

/* Bilder */
.bilder{display:flex;flex-direction:column;gap:20px}
.bilder h2{margin:0;font-size:12.5px;line-height:1.4;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gedimmt)}
figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
figure img{width:100%;border:1px solid var(--rand);border-radius:5px}
figcaption{font-family:var(--mono);font-size:13.5px;line-height:1.4;color:var(--text2)}
.wand{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px}
.spalte{display:flex;flex-direction:column;gap:20px;min-width:0}
.gross img{flex:1 1 0;min-height:0;height:0;object-fit:cover;object-position:35% 40%}

/* Fuß und Rechtstexte */
.fuss{border-top:1px solid var(--rand);padding-top:22px;display:flex;flex-wrap:wrap;gap:16px 48px;justify-content:space-between;font-size:14.5px;line-height:1.55;color:var(--gedimmt)}
.fuss p{margin:0;flex:1 1 420px;min-width:0;max-width:78ch}
.fuss nav{display:flex;gap:20px}
.fuss nav a{display:inline-block;padding-block:10px;line-height:1.2}
.recht{max-width:68ch;display:flex;flex-direction:column;gap:14px}
.recht h1{margin:0;font-size:clamp(28px,4vw,40px);line-height:1.15;color:var(--hell)}
.recht h2{margin:16px 0 0;font-size:19px;line-height:1.3;color:var(--hell)}
.recht p,.recht ul{margin:0}
.luecke{background:var(--amber);color:var(--tafel);padding:1px 6px;border-radius:2px;font-weight:600}

@media (max-width:820px){
  .tafel-raster,.wand{grid-template-columns:minmax(0,1fr)}
  .gross img{flex:none;height:auto}
}
