:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* ANSTOSS Design-System: Fußballmagazin auf Papier. Eine Spalte, max. 430px, Haarlinien statt Karten, Kobalt als einzige Markenfarbe, Signalrot nur für live.
   Schriften: Zodiak und Switzer (Fontshare, eingebettet), JetBrains Mono (Google). */
:root {
  --color-paper: #f4efe3; --color-surface: #fbf8f0; --color-ink: #191408; --color-ink-2: #453d28; --color-muted: #6f6750; --color-faint: #a89f86;
  --color-hairline: color-mix(in oklab, var(--color-ink) 15%, transparent); --color-rule: color-mix(in oklab, var(--color-ink) 34%, transparent);
  --color-cobalt: #1d3fa8; --color-cobalt-bright: #8fa5ff; --color-signal: #c43318; --color-gold: #c7940a;
  --font-display: "Zodiak", Georgia, "Times New Roman", serif;
  --font-body: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-score: clamp(2.5rem, 1.6rem + 3.5vw, 3.75rem);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --radius-xs: 2px; --radius-sm: 4px; --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --pad-row: var(--space-3);
  /* Aliase für bestehende Inline-Stile der App */
  --bg: var(--color-paper); --card: transparent; --card-hover: var(--color-surface); --line: var(--color-hairline); --fg: var(--color-ink); --muted: var(--color-muted); --soft: var(--color-ink-2);
  --accent: var(--color-ink); --accent-fg: var(--color-paper); --accent-ink: var(--color-cobalt); --accent-tint: color-mix(in oklab, var(--color-cobalt) 9%, transparent); --chip-neutral: var(--color-hairline);
  color-scheme: light;
}
:root[data-dichte="kompakt"] { --pad-row: var(--space-2) }
/* Abendausgabe: dieselbe Struktur, umgedrehte Töne. Aktiv bei eigener Wahl „Dunkel“ oder wenn Claude auf dunkel steht (außer eigene Wahl „Hell“). */
:root[data-ui="dunkel"], :root[data-theme="dark"]:not([data-ui="hell"]):not([data-ui="rosa"]) {
  --color-paper: #171410; --color-surface: #201d18; --color-ink: #efe9db; --color-ink-2: #d3ccba; --color-muted: #97907c; --color-faint: #655f4e;
  --color-cobalt: #96aaff; --color-cobalt-bright: #1d3fa8; --color-signal: #ff6a4d; --color-gold: #d9a92e; color-scheme: dark;
  --tuner-glas-oben: #2b251a; --tuner-glas-unten: #14110c; --tuner-glanz: rgba(255,240,210,.08); --tuner-licht: rgba(255,168,60,.2); --tuner-strich: rgba(255,236,200,.24); --tuner-strich-gross: rgba(255,236,200,.5);
}
:root[data-ui="dunkel"] .status.live, :root[data-theme="dark"]:not([data-ui="hell"]):not([data-ui="rosa"]) .status.live { color: #171410 }
:root[data-ui="dunkel"] .status.live .live-dot, :root[data-theme="dark"]:not([data-ui="hell"]):not([data-ui="rosa"]) .status.live .live-dot { background: #171410 }
::selection { background: color-mix(in oklab, var(--color-cobalt) 26%, transparent); color: var(--color-ink) }
* { box-sizing: border-box }
html, body { height: 100% }
html { -webkit-text-size-adjust: none; text-size-adjust: none; text-rendering: optimizeLegibility; hanging-punctuation: first last }
body { margin: 0; min-height: 100dvh; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.15 }
p { text-wrap: pretty }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-ink); color: var(--color-paper); padding: var(--space-2) var(--space-4); z-index: 100; font-size: var(--text-sm) }
.skip-link:focus { left: 0 }
button, select, input { font: inherit; color: inherit }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; transition: background-color var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive) }
:focus-visible { outline: 2px solid var(--color-cobalt); outline-offset: 3px; border-radius: var(--radius-xs) }
a { color: var(--color-cobalt); text-underline-offset: 3px }
h1, h2, h3 { margin: 0; font-weight: 700 }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--color-paper) }
.app { max-width: 430px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-paper); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px) }
@media (min-width: 461px) { .app { border-left: 1px solid var(--color-hairline); border-right: 1px solid var(--color-hairline) } }

/* Kopf: Topbar → Masthead → Hinweis (wie Referenz) */
.top { background: var(--color-paper) }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-4); border-bottom: 1px solid var(--color-hairline); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); line-height: 1.6 }
.page-indicator { display: none }

:root[data-ui="teletext"] .sub { overflow-wrap: anywhere; hyphens: auto }

/* ============ Spieler-Sammelbild (Abschnitt 9) ============
   Der Sticker ist ein gedrucktes Objekt mit festen Druckfarben und eigener
   Typografie: er bleibt in Morgen, Abend und Teletext gleich. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.panini-wrap { padding: var(--space-2) var(--space-4) var(--space-4) }
.panini-sticker { --sticker-paper: #fbf7ec; --sticker-photo-bg: #efe9da; --sticker-ink: #191408; --sticker-yellow: #f2c400; background: var(--sticker-paper); border: 1px solid rgba(25, 20, 8, 0.28); padding: 12px; max-width: 320px; margin: 0 auto }
.sticker-photo { position: relative; background: var(--sticker-photo-bg); aspect-ratio: 5 / 6; clip-path: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); overflow: hidden }
.sticker-halftone { position: absolute; inset: 0; width: 100%; height: 100% }
.sticker-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20% }
.sticker-badge { position: absolute; top: 8px; right: 12px; font-family: "JetBrains Mono", "Courier New", monospace; font-size: 12px; letter-spacing: 0.08em; color: rgba(25, 20, 8, 0.72) }
.sticker-plate { margin-top: 12px; background: var(--sticker-yellow); border: 1px solid var(--sticker-ink); padding: 8px 12px; display: flex; align-items: center; gap: 12px }
.sticker-flag { flex: none; width: 22px; height: 22px; background: var(--club-color); border: 2px solid var(--sticker-paper); outline: 1px solid var(--sticker-ink) }
.sticker-text { display: grid; min-width: 0 }
.sticker-club { font-family: "JetBrains Mono", "Courier New", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(25, 20, 8, 0.78); overflow-wrap: anywhere }
/* Name immer vollständig: lange Namen eine Stufe kleiner, sonst zweizeilig statt abschneiden */
.sticker-name { font-family: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; color: var(--sticker-ink); text-wrap: balance; overflow-wrap: break-word }
.sticker-name.sm { font-size: 0.95rem }
.sticker-nr { margin-left: auto; flex: none; font-family: "JetBrains Mono", "Courier New", monospace; font-weight: 700; font-size: 14px; background: var(--sticker-paper); border: 1px solid var(--sticker-ink); padding: 2px 7px; color: var(--sticker-ink); border-radius: 0 }
.panini-bio { margin: var(--space-3) 0 0; text-align: center; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.02em }
.fact-list { margin: 0; padding: 0 var(--space-4) }
.fact-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-hairline); min-height: 44px; align-items: center }
.fact-row dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted) }
.fact-row dd { margin: 0; font-weight: 500; text-align: right; min-width: 0 }
.fact-row dd button { color: var(--color-cobalt); font-weight: 600; min-height: 44px }
.player-figures { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 0 var(--space-4) var(--space-2) }
.pfig + .pfig { border-left: 1px solid var(--color-hairline) }
.pfig .n { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums }
.pfig .l { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted) }
.pl-link { cursor: pointer }
.pl-link .nm { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--transition-interactive) }
.pl-link:hover .nm, .pl-link:focus-visible .nm { text-decoration-color: currentColor }
.pl-link:focus-visible { outline: none }
.pl-link:focus-visible circle { stroke: var(--color-paper); stroke-width: 2.5 }
.pl-hit { fill: transparent }

.topbar { flex-wrap: wrap; row-gap: var(--space-1) }
.topbar-right { margin-left: auto }

/* ============ Liga-Auswahl: das Inhaltsverzeichnis (Abschnitt 10) ============ */
.league-btn { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); padding: 4px 0; background: none; border: none; border-bottom: 1px solid var(--color-hairline); cursor: pointer; transition: color var(--transition-interactive), border-color var(--transition-interactive) }
.league-btn:hover { color: var(--color-cobalt); border-color: var(--color-cobalt) }
.league-btn:focus-visible { outline: 2px solid var(--color-cobalt); outline-offset: 2px; border-radius: var(--radius-xs) }
.league-caret { transition: transform var(--transition-interactive) }
.league-btn[aria-expanded="true"] .league-caret { transform: rotate(180deg) }
.sheet-overlay { position: fixed; inset: 0; background: color-mix(in oklab, var(--color-ink) 42%, transparent); z-index: 60 }
.sheet { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%); width: min(100%, 430px); max-height: min(76vh, 620px); overflow-y: auto; background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-rule); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: var(--space-5) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 61; transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1) }
.sheet.open { transform: translate(-50%, 0) }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-2) }
.sheet-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; margin: 0 }
.sheet-meta { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); margin: 2px 0 0 }
.sheet-close { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--color-muted); background: none; border: 1px solid var(--color-hairline); border-radius: var(--radius-xs); cursor: pointer; transition: color var(--transition-interactive), border-color var(--transition-interactive) }
.sheet-close:hover, .sheet-close:focus-visible { color: var(--color-cobalt); border-color: var(--color-cobalt); outline: none }
.league-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); text-align: left; min-height: 44px; padding: var(--space-3) var(--space-1); font-family: var(--font-body); color: var(--color-ink); background: none; border: none; border-bottom: 1px solid var(--color-hairline); cursor: pointer; transition: background var(--transition-interactive) }
.league-row-main { display: grid; gap: 3px }
.league-row-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.15 }
.league-row-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted) }
.league-row.active .league-row-name::before { content: ''; display: inline-block; width: 9px; height: 9px; background: var(--color-ink); margin-right: var(--space-2); vertical-align: middle }
.league-row-tag { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-cobalt); white-space: nowrap }
.league-row:hover { background: color-mix(in oklab, var(--color-cobalt) 7%, transparent) }
.league-row:focus-visible { outline: 2px solid var(--color-cobalt); outline-offset: -2px }
.sheet-foot { margin: var(--space-3) 0 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted) }
:root[data-ui="teletext"] .sheet-overlay { background: rgba(0, 0, 0, 0.72) }
@media (prefers-reduced-motion: reduce) { .sheet { transition: none } }
.ausgabe-kopf { padding: var(--space-5) var(--space-4) var(--space-4); border-bottom: 2px solid var(--color-ink); margin-bottom: var(--space-2) }
.ausgabe-kopf h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 8vw, 40px); line-height: 1.05; margin: var(--space-2) 0 var(--space-3) }
.ausgabe-kopf .kicker { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--color-cobalt) }
.ausgabe-kopf .chips { padding: 0 }
.ausgabe-lead { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; color: var(--color-ink-2); margin: 0 0 var(--space-3) }
.ausgabe-verein { margin-bottom: var(--space-4) }
.ausgabe-verein-kopf { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: 0 var(--space-4); text-align: left; font-weight: 600 }
.ausgabe-form { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4) var(--space-2) }
.tv-zeile { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: var(--space-3); width: 100%; min-height: 48px; padding: 0 var(--space-3); text-align: left; border-bottom: 1px solid var(--color-hairline) }
.tv-zeile:last-child { border-bottom: none }
.tv-sender { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-cobalt) }
.teil-vorschau { aspect-ratio: 4 / 5; width: min(100%, 300px); margin: var(--space-2) auto var(--space-4); border: 1px solid var(--color-rule); overflow: hidden; background: var(--color-surface) }
.teil-vorschau img { width: 100%; height: 100%; display: block; -webkit-touch-callout: default }
.teil-knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2) }
.teil-knoepfe .btn-main { flex: 1 1 auto }



/* ============ „Der Draht“: News aus Feeds (Abschnitt 11) ============ */
.neues-head { padding: var(--space-6) var(--space-4) 0 }
.neues-head .kicker { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--color-muted) }
.neues-head h2 { font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); font-weight: 700; line-height: 1.1; margin: 0 }
.wire-sources { margin: var(--space-2) var(--space-4) var(--space-6); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-hairline); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; color: var(--color-muted) }
.wire-top { border-top: 1px solid var(--color-hairline); padding-top: var(--space-5) }
.wire-top h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.3; margin: 0 }
.wire-top .teaser { font-size: var(--text-sm); color: var(--color-ink-2); margin: var(--space-2) 0 0; line-height: 1.55 }
.news-source { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-cobalt); text-decoration: underline; text-underline-offset: 3px }
.news-source:hover { text-decoration-thickness: 2px }
.list-group-label { padding: var(--space-4) var(--space-4) var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--color-ink-2); border-bottom: 1px solid var(--color-rule) }
.wire-list { padding: 0 var(--space-3) }
.wire-list .list-group-label { padding-left: var(--space-1); padding-right: var(--space-1) }
.wire-row { display: grid; grid-template-columns: 52px 1fr; gap: var(--space-3); align-items: start; min-height: 44px; padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--color-hairline); text-decoration: none; color: var(--color-ink); transition: background var(--transition-interactive) }
.wire-row:hover { background: color-mix(in oklab, var(--color-cobalt) 7%, transparent) }
.wire-row:focus-visible { outline: 2px solid var(--color-cobalt); outline-offset: -2px }
.wire-time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); padding-top: 2px; font-variant-numeric: tabular-nums }
.wire-main { display: grid; gap: 2px; min-width: 0 }
.wire-source { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted) }
.wire-headline { font-size: var(--text-sm); font-weight: 500; line-height: 1.45 }
.wire-new, .wire-rumor { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 1px 5px; margin-right: var(--space-2); vertical-align: 1px }
.wire-new { color: var(--color-paper); background: var(--color-cobalt) }
.wire-rumor { color: var(--color-ink-2); border: 1px solid var(--color-rule) }
.wire-foot { margin: var(--space-3) var(--space-4) 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); line-height: 1.5 }
.neues-region { margin-top: var(--space-8) }


/* Saisonstatistik im Spielerprofil */
.stat-tab { overflow-x: auto; padding: var(--space-3) var(--space-4) 0 }
.stat-tab table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
.stat-tab th, .stat-tab td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-hairline); text-align: right; font-size: var(--text-sm) }
.stat-tab thead th { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); border-bottom: 1px solid var(--color-rule) }
.stat-tab th:first-child { text-align: left; padding-left: 0 }
.stat-tab tbody th { font-weight: 400 }
.st-saison { display: block; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted) }
.st-verein { display: flex; align-items: center; gap: var(--space-2); font-weight: 500 }
.stat-tab td { font-family: var(--font-mono); font-weight: 500 }


/* Übertragung (Reiter im Spielbericht) */
.tv-block { margin: var(--space-4) var(--space-4) 0; padding: var(--space-5) 0 var(--space-4); border-top: 2px solid var(--color-ink); border-bottom: 1px solid var(--color-hairline) }
.tv-kicker { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--color-muted); margin: 0 }
.tv-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.1; margin: var(--space-1) 0 0 }
.tv-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); margin: var(--space-2) 0 var(--space-4); line-height: 1.6 }
.tv-link { display: inline-flex; align-items: center; text-decoration: none }
.tv-chip { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--color-cobalt); text-decoration: underline; text-underline-offset: 3px; min-height: 24px; padding: 0 }

/* Teletext-Ausgabe: Easteregg, nur über Profil > Erscheinungsbild erreichbar */
:root[data-ui="teletext"] { --font-display: var(--font-mono); --font-body: var(--font-mono); --color-paper: #000000; --color-surface: #000000; --color-ink: #ffffff; --color-ink-2: #ffff00; --color-muted: #00ffff; --color-faint: #00ffff; --color-hairline: rgba(0,255,255,0.35); --color-rule: rgba(0,255,255,0.55); --color-cobalt: #00ffff; --color-cobalt-bright: #ffff00; --color-signal: #ff0000; --color-gold: #ffff00; --radius-xs: 0; --radius-sm: 0; --radius-full: 0; color-scheme: dark }
:root[data-ui="teletext"] .masthead-title { text-transform: uppercase; color: #ffff00; letter-spacing: 0.02em }
:root[data-ui="teletext"] .feature { background: #0000ff; color: #ffffff }
:root[data-ui="teletext"] .feature-kicker { color: #ffff00 }
:root[data-ui="teletext"] .feature-motif { color: #ffffff; opacity: 0.2 }
:root[data-ui="teletext"] .status.live { color: #000000 }
:root[data-ui="teletext"] .status.live .live-dot { background: #000000 }
:root[data-ui="teletext"] .pill[aria-pressed="true"], :root[data-ui="teletext"] .pill.on { background: #0000ff; border-color: #0000ff; color: #ffffff }
:root[data-ui="teletext"] .pitch .nm { letter-spacing: -0.06em }
:root[data-ui="teletext"] { --tuner-glas-oben: #000000; --tuner-glas-unten: #000000; --tuner-glanz: transparent; --tuner-licht: transparent; --tuner-strich: rgba(0,255,255,.5); --tuner-strich-gross: #00ffff; --tuner-nadel: #ff0000 }
:root[data-ui="teletext"] .tuner-glas { border-radius: 0; box-shadow: none }
:root[data-ui="teletext"] .tuner-sender[aria-pressed="true"] .tuner-name { color: #ffff00 }
:root[data-ui="teletext"] .page-indicator { display: inline; font-family: var(--font-mono); color: #ffff00 }
/* Rosa-Ausgabe: angelehnt an die italienischen Sporttageszeitungen auf rosa Papier. Schriften frei (OFL, Google Fonts): Barlow Condensed, Barlow, Source Serif 4 */
:root[data-ui="rosa"] {
  --color-paper: #f6d9dc; --color-surface: #fae7e9; --color-ink: #1a1012; --color-ink-2: #43292e; --color-muted: #74545a; --color-faint: #ad8a90;
  --color-cobalt: #a5103c; --color-cobalt-bright: #f5a3bd; --color-signal: #d4141f; --color-gold: #a06e00;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Barlow Condensed", "Arial Narrow", sans-serif; --font-text: "Source Serif 4", Georgia, serif; color-scheme: light;
}
:root[data-ui="rosa"] body { font-variant-numeric: tabular-nums }
:root[data-ui="rosa"] { --tuner-glas-oben: #fdf1f2; --tuner-glas-unten: #efc9cf; --tuner-licht: rgba(255,226,170,.38); --tuner-strich: rgba(26,16,18,.28); --tuner-strich-gross: rgba(26,16,18,.6) }
:root[data-ui="rosa"] .tuner-name { font-size: 14px; letter-spacing: .06em }
:root[data-ui="rosa"] .masthead { border-bottom: 3px solid var(--color-ink) }
:root[data-ui="rosa"] .masthead-title { text-transform: uppercase; font-weight: 900; font-style: italic; letter-spacing: -0.01em; font-size: clamp(3rem, 15vw, 4.1rem); line-height: .95 }
:root[data-ui="rosa"] :is(.section-head h2, .titel-detail h2, .ausgabe-kopf h2) { font-weight: 800; text-transform: uppercase; letter-spacing: 0 }
:root[data-ui="rosa"] :is(.wire-top h3, .news-item .h3, article h2) { font-weight: 700; font-size: var(--text-xl); line-height: 1.1 }
:root[data-ui="rosa"] :is(.masthead-kicker, .section-head .kicker, .news-item .kicker, .ausgabe-kopf .kicker, .neues-head .kicker, .sec, .feature-kicker, .theme-toggle) { font-weight: 600; letter-spacing: .1em }
:root[data-ui="rosa"] :is(.ausgabe-lead, .teaser, .para) { font-family: var(--font-text) }
:root[data-ui="rosa"] .feature-team .goals { font-weight: 800 }
.ttx-ei { display: block; margin: var(--space-2) var(--space-4) 0; padding: var(--space-1) 0; min-height: 32px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; color: var(--color-faint); background: none; border: 0; text-align: left }
.ttx-ei:hover, .ttx-ei[aria-pressed="true"] { color: var(--color-ink-2) }
.topbar-right { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap }
.topbar > span:first-child { white-space: nowrap }
.feature .crest { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-paper) 45%, transparent) }
.theme-toggle { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); border: 1px solid var(--color-rule); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); min-height: 40px }
.theme-toggle:hover { color: var(--color-ink); background: var(--color-surface) }
.theme-toggle[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper) }
.masthead { padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 4px double var(--color-rule) }
.masthead-kicker { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--color-cobalt); margin: 0 0 var(--space-1) }
.masthead-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 11vw, 3.2rem); line-height: 1; letter-spacing: -0.015em; margin: 0 }
.demo-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); text-align: center; padding: var(--space-1) var(--space-4); border-bottom: 1px solid var(--color-hairline); margin: 0 }
.detail-back { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-3) var(--space-4); min-height: 44px }
.detail-back:hover { color: var(--color-ink) }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-6) var(--space-4) var(--space-3) }
.section-head .kicker { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--color-muted) }
.section-head h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.1; margin: 0 }
.section-head .lnk { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-cobalt); font-weight: 700; min-height: 44px }
.iconbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); color: var(--color-ink) }
.iconbtn:hover { background: var(--color-surface) }
.back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; padding-right: var(--space-2); color: var(--color-cobalt); font-weight: 600; font-family: var(--font-body) }
.search { display: flex; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--color-ink); padding: 0 var(--space-1); min-height: 44px; color: var(--color-muted); margin-top: var(--space-2) }
.search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--color-ink); font-size: var(--text-base); outline: none }
.search input::placeholder { color: var(--color-muted) }
main { flex: 1; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) }
main.wechsel { animation: einblenden 220ms cubic-bezier(0.16, 1, 0.3, 1) }
@keyframes einblenden { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
/* Umblättern beim Rubrikwechsel: die neue Seite dreht sich um den Falz ins Bild, ein Schatten läuft über das Papier */
/* Drehpunkt und Fluchtpunkt liegen in der Mitte des sichtbaren Bildschirms (--blatt-y), nicht in der Mitte der ganzen Seite –
   so wirkt das Umblättern auf kurzen und langen Rubriken gleich */
main.blaettern-vor, main.blaettern-zurueck { position: relative; backface-visibility: hidden; will-change: transform }
main.blaettern-vor { transform-origin: left var(--blatt-y, 40vh); animation: blatt-vor 420ms cubic-bezier(0.33, 0.6, 0.3, 1) }
main.blaettern-zurueck { transform-origin: right var(--blatt-y, 40vh); animation: blatt-zurueck 420ms cubic-bezier(0.33, 0.6, 0.3, 1) }
main.blaettern-vor::after, main.blaettern-zurueck::after { content: ''; position: absolute; inset: 0; pointer-events: none; animation: blatt-schatten 420ms ease-out forwards }
main.blaettern-vor::after { background: linear-gradient(to left, color-mix(in oklab, var(--color-ink) 22%, transparent), transparent 55%) }
main.blaettern-zurueck::after { background: linear-gradient(to right, color-mix(in oklab, var(--color-ink) 22%, transparent), transparent 55%) }
@keyframes blatt-vor { from { transform: perspective(1400px) rotateY(-28deg) translateX(4%); opacity: .55 } to { transform: perspective(1400px) rotateY(0) translateX(0); opacity: 1 } }
@keyframes blatt-zurueck { from { transform: perspective(1400px) rotateY(28deg) translateX(-4%); opacity: .55 } to { transform: perspective(1400px) rotateY(0) translateX(0); opacity: 1 } }
@keyframes blatt-schatten { from { opacity: 1 } to { opacity: 0 } }
/* Teletext blättert nicht: neue Videotextseite, kurzer Bildaufbau */
:root[data-ui="teletext"] main.blaettern-vor, :root[data-ui="teletext"] main.blaettern-zurueck { animation: ttx-seite 160ms steps(2, end) }
:root[data-ui="teletext"] main.blaettern-vor::after, :root[data-ui="teletext"] main.blaettern-zurueck::after { display: none }
@keyframes ttx-seite { from { opacity: 0 } to { opacity: 1 } }

/* Abschnitte und Listen */
.sec { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-2); border-top: 1px solid var(--color-rule); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); line-height: 1.6 }
.sec > span:last-child:not(:first-child) { letter-spacing: .08em }
.sec .lnk { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-cobalt); font-weight: 700; min-height: 44px; margin: calc(-1 * var(--space-3)) 0 }
.card { margin: 0; background: transparent; border: 0; border-radius: 0 }
.row { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--pad-row) var(--space-4); border-top: 1px solid var(--color-hairline); min-height: 48px; font-size: var(--text-sm); line-height: 1.4 }
.card > .row:first-child, .card > .first, .card > :first-child { border-top: 0 }
.row.btn:hover, .trow:hover, .mrow:hover { background: var(--color-surface) }
.grow { flex: 1; min-width: 0 }
.ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sub { font-size: var(--text-xs); color: var(--color-muted) }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right }
.mono { font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; font-size: var(--text-xs) }
.kick { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--color-cobalt); text-transform: uppercase; letter-spacing: .12em }
.big { font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em }
.display { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1 }
.note { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.5; margin: var(--space-3) var(--space-4) 0; max-width: 60ch }

/* Vereinsmerkmal: 9×9-Farbfeld */
.crest { display: inline-block; flex: none; width: 9px; height: 9px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 25%, transparent) }
.crest.lg { width: 14px; height: 14px }

/* Begegnungs-Zeile: Zeit | Heim | Ergebnis | Gast */
.mrow { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr) 3.2rem minmax(0, 1fr); gap: 6px; align-items: center; width: 100%; padding: var(--space-3) var(--space-2); border-top: 1px solid var(--color-hairline); font-size: var(--text-sm); line-height: 1.4 }
.card > .mrow:first-child { border-top: 0 }
.mrow.fav { box-shadow: inset 2px 0 0 var(--color-cobalt) }
.mrow .zeit { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); line-height: 1.4; white-space: pre-line }
.mrow .team { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); line-height: 1.4 }
.mrow .team.heim { justify-content: flex-end; text-align: right }
.mrow .team span.n { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mrow .team.win { font-weight: 600 } .mrow .team.lose { color: var(--color-ink-2) }
.mrow .erg { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; font-size: var(--text-sm); letter-spacing: .02em }
.mrow .erg.offen { color: var(--color-muted); font-weight: 400 }
.live-txt { color: var(--color-signal) !important; font-weight: 700 }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-signal); vertical-align: middle }
@media (prefers-reduced-motion: no-preference) { .live-dot { animation: pulsieren 1.6s ease-in-out infinite } @keyframes pulsieren { 50% { opacity: .25 } } }
@media (max-width: 360px) { .mrow { padding: var(--pad-row) 8px } }

/* Tabelle */
.trow, .thead { display: grid; grid-template-columns: 3px 22px minmax(0, 1fr) 26px 36px 34px; gap: var(--space-2); align-items: center; width: 100%; padding: 9px var(--space-4) 9px 0; font-size: var(--text-sm); line-height: 1.4 }
.trow { border-top: 1px solid var(--color-hairline); min-height: 44px }
.thead { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--color-hairline) }
.trow .num:last-child { font-weight: 700; color: var(--color-ink) }
.zone { width: 3px; height: 22px }
.z-cl { background: var(--color-ink) } .z-el { background: var(--color-cobalt) } .z-ecl { background: var(--color-cobalt-bright) } .z-rel { background: var(--color-gold) }
.z-ab { background: repeating-linear-gradient(180deg, var(--color-ink-2) 0 3px, transparent 3px 6px) } .z-none { background: transparent }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4) 0; font-size: var(--text-xs); color: var(--color-ink-2) }
.legend span { display: inline-flex; align-items: center; gap: var(--space-2) }
.legend i { width: 3px; height: 12px; display: inline-block }

/* Formkurve: S gefüllt (Tinte), U gefüllt (muted), N Umriss */
.form { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; box-shadow: inset 0 0 0 1px var(--color-rule); color: var(--color-muted) }
.f-S { background: var(--color-ink); color: var(--color-paper); box-shadow: none } .f-U { background: var(--color-muted); color: var(--color-paper); box-shadow: none } .f-N { box-shadow: inset 0 0 0 1px var(--color-rule); color: var(--color-muted) }

/* Chips (Spieltag, Filter) */
.seg { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-hairline); overflow-x: auto; scrollbar-width: none }
.seg::-webkit-scrollbar { display: none }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4) }
.pill { flex: none; min-height: 44px; padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--color-rule); background: transparent; color: var(--color-ink-2); font-family: var(--font-mono); font-size: var(--text-sm); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2) }
.pill:hover { background: var(--color-surface) }
.pill.on, .pill[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink) }
.pill.date { flex-direction: column; justify-content: center; gap: 0; min-width: 64px; padding: var(--space-1) var(--space-3); line-height: 1.2 }
.pill.date small { font-size: var(--text-xs); opacity: .85 }
.pill.date.liga-tag span::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--color-cobalt); margin-left: 4px; vertical-align: 2px }
.pill.date.liga-tag[aria-pressed="true"] span::after { background: currentColor }
/* Senderskala (News · Hintergrund): Auswahl wie die Frequenzskala eines Röhrenradios. Wischen dreht die Skala unter der Nadel, der Sender unter der Nadel ist gewählt. */
:root { --tuner-glas-oben: #fdfaf1; --tuner-glas-unten: #ebe2cb; --tuner-glanz: rgba(255,255,255,.75); --tuner-licht: rgba(255,206,120,.32); --tuner-strich: rgba(25,20,8,.26); --tuner-strich-gross: rgba(25,20,8,.55); --tuner-nadel: var(--color-signal) }
.tuner { margin: var(--space-3) var(--space-4) var(--space-1) }
.tuner-glas { position: relative; border: 1px solid var(--color-rule); border-radius: 12px; background: linear-gradient(180deg, var(--tuner-glas-oben), var(--tuner-glas-unten)); box-shadow: inset 0 1px 0 var(--tuner-glanz), inset 0 -10px 18px rgba(0,0,0,.06); overflow: hidden }
.tuner-glas::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 130% at 50% 60%, var(--tuner-licht), transparent 70%); pointer-events: none }
.tuner-glas::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--tuner-glas-unten), transparent 16%, transparent 84%, var(--tuner-glas-unten)); pointer-events: none; z-index: 2 }
.tuner-skala { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 calc(50% - 52px);
  background-image: repeating-linear-gradient(90deg, var(--tuner-strich) 0 1px, transparent 1px 7px); background-size: 100% 8px; background-repeat: repeat-x; background-position: 0 34px; background-attachment: local }
.tuner-skala::-webkit-scrollbar { display: none }
.tuner-sender { flex: none; scroll-snap-align: center; min-width: 104px; padding: 10px 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: var(--color-muted); font-family: var(--font-mono); cursor: pointer; transition: color .2s }
.tuner-name { font-size: 12px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap }
.tuner-strich { width: 2px; height: 16px; background: var(--tuner-strich-gross) }
.tuner-frq { font-size: 10px; line-height: 12px; letter-spacing: .04em; color: var(--color-faint); font-variant-numeric: tabular-nums }
.tuner-sender[aria-pressed="true"], .tuner-sender.nah { color: var(--color-ink) }
.tuner-sender[aria-pressed="true"] .tuner-name { font-weight: 700 }
.tuner-sender:focus-visible { outline: 2px solid var(--color-cobalt); outline-offset: -4px; border-radius: 8px }
.tuner-nadel { position: absolute; left: 50%; top: 31px; height: 18px; width: 2px; margin-left: -1px; background: var(--tuner-nadel); box-shadow: 0 0 6px var(--tuner-nadel); border-radius: 1px; pointer-events: none; z-index: 3 }
.tuner-nadel::before { content: ""; position: absolute; top: -5px; left: -3px; border: 4px solid transparent; border-bottom: 0; border-top-color: var(--tuner-nadel) }
.tuner-anzeige { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 2px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted) }
.tuner-anzeige b { color: var(--color-ink); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tuner-band { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums }
.tuner-led { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tuner-nadel); box-shadow: 0 0 0 2px color-mix(in oklab, var(--tuner-nadel) 25%, transparent), 0 0 8px var(--tuner-nadel) }
@media (prefers-reduced-motion: reduce) { .tuner-sender { transition: none } }
.liga-hinweis { margin: var(--space-3) var(--space-4) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-rule); border-left: 3px solid var(--color-cobalt); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) }
.liga-hinweis p { margin: 0; font-size: var(--text-sm) }
.weitere-ligen { margin: var(--space-5) var(--space-4) 0; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--color-muted) }


/* Reiter im Spielbericht/Profil: 2-px-Tinte-Unterstrich */
.tabs { display: flex; gap: var(--space-1); margin: 0; border-bottom: 1px solid var(--color-rule); overflow-x: auto; scrollbar-width: none }
.tabs::-webkit-scrollbar { display: none }
.tab { flex: 1 0 auto; min-height: 44px; padding: var(--space-3) var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--color-muted); border-bottom: 2px solid transparent; margin-bottom: -1px }
.tab[aria-selected="true"] { color: var(--color-ink); border-bottom-color: var(--color-ink) }
.tab:hover { color: var(--color-ink) }

.cta { display: block; width: 100%; min-height: 44px; padding: var(--space-3); border-top: 1px solid var(--color-ink); text-align: center; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--color-cobalt) }
.btn-main { min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-xs); background: var(--color-ink); color: var(--color-paper); font-weight: 600 }
.btn-main:hover { background: var(--color-ink-2) }
.btn-ghost { min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-xs); border: 1px solid var(--color-rule); color: var(--color-ink); font-weight: 600 }
.btn-ghost:hover { background: var(--color-surface) }

/* Leere Zustände: gestrichelte Box */
.leer { margin: var(--space-4) var(--space-4) 0; padding: var(--space-6) var(--space-4); border: 1px dashed var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; text-align: center; display: flex; flex-direction: column; gap: var(--space-3); align-items: center }
.leer strong { color: var(--color-ink) }
.empty { padding: var(--space-5) 0; color: var(--color-ink-2); line-height: 1.55; display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start }
.card > .empty { padding-inline: var(--space-4) }
.section-head .lnk { white-space: nowrap }

/* Kennzahlen */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; padding: var(--space-4) 0; gap: var(--space-2); border-bottom: 1px solid var(--color-hairline) }
.grid4 .big { font-family: var(--font-display); font-size: 1.75rem !important; line-height: 1.1 }
.grid4 .sub { font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-hairline) }
.grid3 > div { padding: var(--space-3) var(--space-2); min-width: 0; border-left: 1px solid var(--color-hairline) }
.grid3 > div:first-child { border-left: 0 }

/* Topspiel (Tinten-Block) */
.feature { position: relative; display: block; width: 100%; background: var(--color-ink); color: var(--color-paper); padding: var(--space-6) var(--space-4) var(--space-5); text-align: left; overflow: hidden }
.feature:focus-visible { outline-offset: -3px }
.feature-motif { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-paper); opacity: .08; pointer-events: none }
.feature-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5) }
.feature-kicker { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--color-cobalt-bright) }
.feature-team { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-block: var(--space-2) }
.feature-team + .feature-team { border-top: 1px solid color-mix(in oklab, var(--color-paper) 22%, transparent) }
.feature-team .name { font-weight: 600; font-size: var(--text-base); line-height: 1.3; display: flex; align-items: center; gap: var(--space-2); min-width: 0 }
.feature-team .goals { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 9vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums }
.feature-foot { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid color-mix(in oklab, var(--color-paper) 22%, transparent); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-cobalt-bright) }
.feature-foot .arrow { font-family: var(--font-body) }
.status { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase }
.status.live { color: var(--color-paper); background: var(--color-signal); padding: var(--space-1) var(--space-3); border-radius: var(--radius-xs) }
.status.live .live-dot { background: var(--color-paper) }
.feature .status:not(.live) { color: var(--color-cobalt-bright); letter-spacing: .14em }

/* Spielbericht-Kopf */
.detail-head { padding: 0 var(--space-4) var(--space-4); border-bottom: 1px solid var(--color-rule) }
.detail-meta { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--color-muted); margin: 0 0 var(--space-4) }
.detail-score-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-block: var(--space-1) }
.detail-score-row .name { font-weight: 600; font-size: var(--text-base); line-height: 1.3; display: flex; align-items: center; gap: var(--space-2); min-width: 0 }
.detail-score-row .goals { font-family: var(--font-display); font-weight: 700; font-size: var(--text-score); line-height: 1; font-variant-numeric: tabular-nums }
.detail-status { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted) }
.detail-status .is-live { color: var(--color-signal); font-weight: 700 }
.detail-panel { padding: var(--space-4) }
.preview-text { font-size: var(--text-base); line-height: 1.7; color: var(--color-ink-2); margin: 0 }

/* Anpfiff-Ticket */
.kickoff-ticket { margin: var(--space-4) var(--space-4) 0; border: 1px solid var(--color-rule); display: flex }
.kickoff-ticket .info { flex: 1; padding: var(--space-4); min-width: 0 }
.kickoff-ticket .stub { width: 92px; border-left: 1px dashed var(--color-rule); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) }
.barcode { width: 56px; height: 34px; background: repeating-linear-gradient(90deg, var(--color-ink) 0 2px, transparent 2px 4px, var(--color-ink) 4px 7px, transparent 7px 8px, var(--color-ink) 8px 9px, transparent 9px 13px) }
.kickoff-ticket .tag { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--color-muted) }
.kickoff-ticket .teams { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.25; margin: var(--space-2) 0 }
.kickoff-ticket .when { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); margin: 0 }

/* Zeitstrahl */
.zeitstrahl { margin: 0; padding: 0 var(--space-4) }
.ev { display: grid; grid-template-columns: 3.4rem 1.4rem 1fr; align-items: start; gap: var(--space-2); padding-block: var(--space-3) }
.ev + .ev { border-top: 1px solid var(--color-hairline) }
.evmin { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); text-align: right; line-height: 1.5 }
.marker-wrap { display: flex; justify-content: center; padding-top: 6px }
.marker { display: inline-block; width: 9px; height: 9px }
.m-tor-h { width: 10px; height: 10px; border-radius: 50%; background: var(--color-ink) } .m-tor-g { width: 10px; height: 10px; border-radius: 50%; background: var(--color-cobalt) }
.m-gelb { background: var(--color-gold) } .m-rot { background: var(--color-signal) } .m-wechsel { background: var(--color-faint) } .m-info { box-shadow: inset 0 0 0 1px var(--color-rule) }
.ev .who { font-weight: 600 }
.ev > span:last-child { font-size: var(--text-sm); line-height: 1.5 }
.ev .kind { display: block; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted) }

/* Statistik-Balken */
.statbar { padding-block: var(--space-3) }
.statbar + .statbar { border-top: 1px solid var(--color-hairline) }
.statbar .lab { display: flex; justify-content: space-between; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); margin-bottom: var(--space-2); font-variant-numeric: tabular-nums }
.statbar .lab b { min-width: 3.2rem; font-weight: 400 } .statbar .lab b:last-child { text-align: right }
.statbar .lab .sub { flex: 1; text-align: center; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em }
.statbar .bars { display: flex; height: 6px; gap: 2px }
.statbar .bars span:first-child { background: var(--color-ink) } .statbar .bars span:last-child { background: var(--color-cobalt) }

/* Aufstellung */
.lineup-legend { display: flex; justify-content: space-between; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--color-muted); margin: var(--space-2) 0 var(--space-3) }
.lineup-legend .home::before, .lineup-legend .away::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: var(--space-2) }
.lineup-legend .home::before { background: var(--color-ink) } .lineup-legend .away::before { background: var(--color-cobalt) }
.pitch { display: block; width: 100%; height: auto }
.pitch .pl-home circle { fill: var(--color-ink) } .pitch .pl-away circle { fill: var(--color-cobalt) }
.pitch .nr { font-family: var(--font-mono); font-size: 13px; font-weight: 700; fill: var(--color-paper) }
.pitch .nm { font-family: var(--font-body); font-size: 13px; fill: var(--color-ink-2) }

/* Vereinskopf */
.club-header { padding: var(--space-6) var(--space-4) var(--space-4); border-bottom: 1px solid var(--color-rule) }
.club-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3) }
.club-crest { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-4); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 18%, transparent) }
.club-header h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.1; margin: 0 }
.club-meta { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-2) 0 0 }
.form-strip { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap }
.form-label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--color-muted) }

/* News */
.news-item { display: block; width: 100%; padding: var(--space-4); border-top: 1px solid var(--color-hairline); text-align: left }
.card > .news-item:first-child { border-top: 0 }
.news-item:hover { background: var(--color-surface) }
.news-item .kicker { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--color-cobalt); margin-bottom: var(--space-1); display: block }
.news-item .h3 { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.3 }
.news-item .teaser { display: block; font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-1); line-height: 1.55 }
.news-item .meta { display: flex; align-items: center; gap: 6px; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: .04em }

/* Spieler */
.shirt { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1px var(--color-rule); font-family: var(--font-mono); font-weight: 700; font-size: var(--text-xs); font-variant-numeric: tabular-nums; position: relative }
.shirt .crest { position: absolute; top: 0; left: 0 }
.mini { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-cobalt) }
.mini.fav { color: var(--color-cobalt) }

/* Live-Leiste */
.carousel { display: flex; gap: var(--space-3); overflow-x: auto; padding: var(--space-3) var(--space-4) var(--space-1); scroll-snap-type: x mandatory; scrollbar-width: none }
.carousel::-webkit-scrollbar { display: none }
.ccard { flex: none; width: 200px; scroll-snap-align: start; border: 1px solid var(--color-ink); border-radius: var(--radius-xs); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2) }
.ccard:hover { background: var(--color-surface) }
.tline { display: flex; align-items: center; gap: var(--space-2) }
.tline .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sc { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums }

.para { font-size: var(--text-base); line-height: 1.65; color: var(--color-ink-2); margin: 0 0 var(--space-4); max-width: 62ch }
article h1 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; text-wrap: balance }
.titel-detail { margin: var(--space-4) var(--space-4) 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap }
.titel-detail h2 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.05; text-wrap: balance }

.filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-3) var(--space-4) 0 }
.filters label { display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .1em; min-width: 0 }
.filters select { min-height: 44px; border-radius: var(--radius-xs); border: 1px solid var(--color-rule); background: var(--color-paper); padding: 0 var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); text-transform: none; letter-spacing: 0; color: var(--color-ink); min-width: 0 }
.toggle { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--pad-row) var(--space-1); border-top: 1px solid var(--color-hairline); min-height: 52px }
.card > .toggle:first-child { border-top: 0 }
.switch { width: 40px; height: 22px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--color-ink); position: relative; flex: none; transition: background-color var(--transition-interactive) }
.switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--color-ink); transition: transform var(--transition-interactive), background-color var(--transition-interactive) }
.toggle[aria-checked="true"] .switch { background: var(--color-ink) }
.toggle[aria-checked="true"] .switch::after { transform: translateX(18px); background: var(--color-paper) }
.cmp { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-2); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--color-hairline); font-variant-numeric: tabular-nums }
.cmp:first-child { border-top: 0 }
.cmp .l { font-weight: 700 } .cmp .r { font-weight: 700; text-align: right; color: var(--color-cobalt) } .cmp .m { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); text-align: center }
.cmp .hi { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px }
.skel { height: 12px; background: var(--color-hairline) }
.skelcard { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) 0 }
@media (prefers-reduced-motion: no-preference) { .skel { animation: skel 1.2s ease-in-out infinite alternate } @keyframes skel { from { opacity: .45 } to { opacity: 1 } } }
.pitch { display: block; width: 100%; height: auto; margin-top: var(--space-3) }

/* Tab-Leiste unten */
.nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 430px); z-index: 50; background: color-mix(in oklab, var(--color-paper) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--color-rule); padding-bottom: env(safe-area-inset-bottom, 0px) }
.nav .in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) }
.nav .brand { display: none }
.nb { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; padding: var(--space-3) 0 var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); text-align: center }
.nb svg { width: 20px; height: 20px }
.nb:hover { color: var(--color-ink) }
.nb.on { color: var(--color-ink); box-shadow: inset 0 3px 0 -1px var(--color-ink) }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }