/* ============================================================================
   ARTIKEL-DETAILSEITE (single.php) — Live-Umsetzung des im Mockup entwickelten
   Baustein-Systems (mockups\news-artikel-v2.html, news-artikel-spielbericht-v2.html,
   entwurf-artikel-module-varianten.html). Nutzt dieselben Design-Tokens wie style.css
   (identische Werte), bewusst KEINE Anton-Headlines/Diagonalschnitt-Buttons erzwungen —
   die Live-Seite läuft noch auf dem ursprünglichen Design (Dharma Gothic/Brush-Blob-Buttons,
   --font-impact als h1/h2-Standard bereits global in style.css gesetzt), das "Design V2" aus
   den Mockups wurde bislang nicht auf die Live-Seite übertragen. Diese Datei übernimmt daher
   die STRUKTUR/FUNKTION der gewählten Baustein-Varianten, nicht die V2-Typografie, damit die
   neue Artikelseite optisch zum Rest der Live-Seite passt statt als Stilbruch zu wirken.
   ============================================================================ */

/* ---------- Intro-Band (schlankes Navy-Band, wie .player-intro) ---------- */
.post-intro{position:relative;overflow:hidden;background:var(--brand-navy-deep);color:var(--on-navy-ink);padding:28px 0 40px;}
.post-intro .breadcrumb{color:var(--on-navy-soft);}
.post-intro .breadcrumb a{color:var(--on-navy-soft);}
.post-intro .breadcrumb a:hover{color:#fff;}
.post-eyebrow{margin-top:22px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-gold);}
.post-eyebrow span:last-child{color:var(--on-navy-soft);margin-left:8px;}
.post-title{margin-top:14px;color:#fff;font-size:clamp(28px,4.4vw,48px);line-height:1.08;max-width:26ch;}
.post-meta{margin-top:16px;font-size:14px;color:var(--on-navy-soft);}

/* ---------- Beitragsfoto (in die Lesespalte eingebettet, kein Full-Bleed-Banner) ---------- */
.post-hero{position:relative;max-width:720px;margin:0 auto 32px;aspect-ratio:16/9;max-height:340px;overflow:hidden;border:1px solid var(--border);}
.post-hero img{width:100%;height:100%;object-fit:cover;}

/* ---------- Layout ---------- */
.post-layout{padding:56px 0 24px;}
.post-body{max-width:720px;margin:0 auto;}
.post-body p{font-size:16.5px;line-height:1.7;color:var(--ink-soft);margin-bottom:20px;}
.post-mod-h2{font-size:22px;margin:44px 0 16px;}

/* ---------- 1. Bild + Text ---------- */
.post-mod-bildtext{display:flex;gap:24px;align-items:flex-start;margin-bottom:24px;}
.post-mod-bildtext--stacked{flex-direction:column;}
.post-mod-bildtext--right{flex-direction:row-reverse;}
.post-mod-bildtext-img{width:38%;flex:none;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--border);}
.post-mod-bildtext--stacked .post-mod-bildtext-img{width:100%;aspect-ratio:16/9;}
.post-mod-bildtext-text{font-size:15.5px;line-height:1.7;color:var(--ink-soft);}

/* ---------- 2. Endstand ---------- */
.post-endstand{background:var(--surface);border:1px solid var(--border);padding:28px 24px;margin-bottom:32px;text-align:center;}
.post-es-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);}
.post-es-row{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:14px;}
.post-es-team{display:flex;flex-direction:column;align-items:center;gap:8px;width:110px;}
.post-es-team img{width:44px;height:44px;object-fit:contain;}
.post-es-team span{font-size:13px;font-weight:700;color:var(--ink);text-align:center;line-height:1.25;}
.post-es-score{font-family:var(--font-numerals);font-size:clamp(34px,5vw,44px);color:var(--brand-red);line-height:1;}
.post-es-half{margin-top:14px;font-size:13px;color:var(--ink-muted);}

/* ---------- 3. Statistik: Team-Vergleich + Tabs-Tabelle ---------- */
.post-cmp{max-width:520px;margin:0 auto 28px;}
.post-cmp-row{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.post-cmp-row:last-child{border-bottom:none;}
.post-cmp-v{font-weight:700;}
.post-cmp-v.is-w{color:var(--brand-red);text-align:left;}
.post-cmp-v.is-g{color:var(--brand-navy);text-align:right;}
.post-cmp-lb{font-size:11px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em;text-align:center;}
.post-tabs{display:flex;background:var(--surface-sunken);border:1px solid var(--border);border-bottom:none;}
.post-tab{flex:1;padding:12px;border:none;background:none;font-size:13px;font-weight:700;color:var(--ink-soft);cursor:pointer;}
.post-tab.is-on{background:var(--surface);color:var(--brand-red);}
.post-boxtable{width:100%;border-collapse:collapse;border:1px solid var(--border);font-size:13.5px;}
.post-boxtable[hidden]{display:none;}
.post-boxtable th{text-align:left;padding:8px 12px;font-size:10.5px;text-transform:uppercase;color:var(--ink-muted);border-bottom:1px solid var(--border);background:var(--surface-sunken);}
.post-boxtable td{padding:7px 12px;border-bottom:1px solid var(--border);}
.post-boxtable th:not(:first-child):not(:nth-child(2)),.post-boxtable td:not(:first-child):not(:nth-child(2)){text-align:right;}

/* ---------- 4. Spielverlauf (animierte Wiedergabe) ---------- */
.post-replay{max-width:640px;margin:0 auto 32px;}
.post-rp-top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.post-rp-score{display:flex;align-items:baseline;gap:10px;}
.post-rp-team{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink-soft);}
.post-rp-team img{width:22px;height:22px;object-fit:contain;}
.post-rp-sc{font-family:var(--font-numerals);font-size:38px;color:var(--brand-red);line-height:1;min-width:.9ch;text-align:center;}
.post-rp-colon{font-family:var(--font-numerals);font-size:38px;color:var(--ink-muted);}
.post-rp-clock{text-align:right;}
.post-rp-clock .tabular{display:block;font-family:var(--font-numerals);font-size:22px;}
.post-rp-half{display:block;font-size:11px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em;}
.post-rp-track{position:relative;width:100%;touch-action:pan-y;}
.post-rp-chart{display:block;width:100%;height:auto;}
.post-rp-dots circle{fill:var(--ink-muted);}
.post-rp-dots circle.is-w{fill:var(--brand-red);}
.post-rp-dots circle.is-g{fill:var(--brand-navy);}
.post-rp-half-div{stroke:var(--border);stroke-width:1;stroke-dasharray:3 3;}
.post-rp-zero{stroke:var(--border);stroke-width:1;}
.post-rp-area{fill:rgba(140,10,44,.08);}
.post-rp-line{fill:none;stroke:var(--brand-red);stroke-width:2;}
.post-rp-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);pointer-events:none;transform:translateX(-1px);}
.post-rp-cursor::before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--ink);transform:translateX(-50%);}
.post-rp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;}
.post-rp-range::-webkit-slider-runnable-track{background:transparent;height:100%;}
.post-rp-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--brand-red);border:2px solid #fff;box-shadow:0 0 0 1px var(--brand-red);cursor:grab;}
.post-rp-range::-moz-range-track{background:transparent;height:100%;}
.post-rp-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--brand-red);border:2px solid #fff;box-shadow:0 0 0 1px var(--brand-red);cursor:grab;}
.post-rp-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;}
.post-rp-btn{width:36px;height:36px;border:1px solid var(--border);background:var(--surface);font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.post-rp-btn:hover{border-color:var(--brand-red);color:var(--brand-red);}
.post-rp-play{width:44px;height:44px;background:var(--brand-red);color:#fff;border-color:var(--brand-red);font-size:15px;}
.post-rp-speeds{display:flex;gap:4px;margin-left:4px;}
.post-rp-speeds button{padding:8px 10px;border:1px solid var(--border);background:var(--surface);font-size:12px;cursor:pointer;}
.post-rp-speeds button.is-on{background:var(--ink);color:#fff;border-color:var(--ink);}
.post-rp-duration{margin-left:auto;font-size:11.5px;color:var(--ink-muted);}
.post-rp-feed{margin-top:16px;min-height:76px;border-top:1px solid var(--border);padding-top:12px;}
.post-rp-feed-hint{font-size:12.5px;color:var(--ink-muted);}
.post-rp-feed-row{display:flex;gap:10px;align-items:baseline;padding:4px 0;font-size:13px;color:var(--ink-muted);}
.post-rp-feed-row .tabular{font-size:11px;color:var(--ink-muted);width:40px;flex:none;}
.post-rp-feed-row.is-latest{color:var(--ink);font-weight:600;font-size:14px;}
.post-rp-feed-row b{margin-left:auto;font-family:var(--font-numerals);font-size:14px;color:var(--ink);}
.post-rp-feed-row.is-w b,.post-rp-feed-row.is-w.is-latest{color:var(--brand-red);}
.post-rp-feed-row.is-g.is-latest{color:var(--brand-navy);}
@media (max-width:560px){ .post-rp-duration{width:100%;margin-left:0;order:9;} .post-rp-speeds button{padding:7px 8px;font-size:11px;} }

/* ---------- 5. Zitat ---------- */
.post-zitat{border-left:3px solid var(--brand-red);background:var(--surface-sunken);padding:18px 22px;margin-bottom:24px;}
.post-zitat p{font-size:16px;font-style:italic;color:var(--ink);line-height:1.5;}
.post-zitat-attr{display:block;margin-top:8px;font-size:13px;color:var(--ink-muted);}

/* ---------- 6. Spieler des Spiels ---------- */
.post-mvp{display:flex;gap:20px;align-items:stretch;max-width:560px;margin-bottom:24px;border:1px solid var(--border);padding:18px;}
.post-mvp-photo{width:110px;flex:none;aspect-ratio:3/4;object-fit:cover;background:var(--surface-sunken);}
.post-mvp-photo-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--surface-sunken);border:1px dashed var(--border);color:var(--ink-muted);}
.post-mvp-photo-empty svg{width:28px;height:28px;opacity:.5;}
.post-mvp-body{display:flex;flex-direction:column;justify-content:center;gap:8px;}
.post-mvp-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-red);}
.post-mvp-name{display:flex;align-items:center;gap:8px;font-size:22px;}
.post-mvp-stats{display:flex;gap:22px;margin-top:4px;flex-wrap:wrap;}
.post-mvp-stats div{display:flex;flex-direction:column;}
.post-mvp-stats b{font-family:var(--font-numerals);font-size:24px;color:var(--brand-red);line-height:1;}
.post-mvp-stats span{font-size:10.5px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
@media (max-width:460px){ .post-mvp{flex-direction:column;} .post-mvp-photo,.post-mvp-photo-empty{width:100%;aspect-ratio:16/9;} }

/* ---------- Teilen ---------- */
.post-share{display:flex;align-items:center;gap:12px;padding-top:8px;margin-bottom:8px;}
.post-share span{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);}
.post-share a{width:34px;height:34px;border-radius:var(--radius-pill);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);}
.post-share a:hover{border-color:var(--brand-red);color:var(--brand-red);}