/* ═══ DFL · Der Anstoß (D141) – Sportzeitung im Kenney-Look, nur Tokens (Tag und Nacht) ═══════════════════════
   Fotoflächen tragen die Vereinsfarbe (Inhalt, --zg-farbe), alles andere kommt aus den Tokens des Spiels. */
#view-zeitung .lg-wrap { padding-top: 12px; }
.zg { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin: 0 auto; color: var(--text); font-family: var(--font-text, inherit); }
.zg-kopf { text-align: center; padding: 6px 6px 10px; border-bottom: 3px double var(--k-rand, var(--border)); }
.zg-kopf b { display: block; font: 800 30px/1.05 var(--font-display, inherit); letter-spacing: .01em; }
.zg-kopf small { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; }
.zg-unterzeile { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--text2); margin-top: -4px; }
.zg-leer { text-align: center; color: var(--text3); padding: 24px 8px; margin: 0; }

/* Aufmacher */
.zg-aufmacher { background: var(--bg2); border: 3px solid var(--k-rand, var(--border)); border-radius: 18px; overflow: hidden; box-shadow: 0 5px 0 var(--k-rand, var(--border)); }
.zg-foto { position: relative; height: 188px; background: var(--zg-farbe, var(--bg3)); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.zg-foto::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgb(255 255 255 / .08) 0 18px, transparent 18px 36px); }
.zg-gesicht { position: relative; width: 168px; height: 184px; display: block; }
.zg-gesicht svg { width: 100%; height: 100%; display: block; }
.zg-erg { position: absolute; left: 10px; top: 10px; z-index: 1; background: rgb(0 0 0 / .58); color: #fff; font: 800 19px/1 var(--font-zahl, inherit); padding: 5px 10px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.zg-ecke { position: absolute; right: 10px; top: 10px; z-index: 1; display: flex; align-items: center; gap: 4px; color: #fff; }
.zg-ecke svg { display: block; filter: drop-shadow(0 2px 0 rgb(0 0 0 / .25)); }
.zg-ecke .ti { font-size: 18px; text-shadow: 0 1px 2px rgb(0 0 0 / .5); }
.zg-duell { align-items: center; justify-content: space-around; background: var(--zg-farbe2, var(--zg-farbe)); }
.zg-duell::before { background: var(--zg-farbe); clip-path: polygon(0 0, 56% 0, 44% 100%, 0 100%); }
.zg-dw { position: relative; display: block; line-height: 0; filter: drop-shadow(0 3px 0 rgb(0 0 0 / .25)); }
.zg-vs { position: relative; background: rgb(0 0 0 / .58); color: #fff; font: 800 24px/1 var(--font-zahl, inherit); padding: 7px 12px; border-radius: 12px; font-variant-numeric: tabular-nums; }
.zg-vs .ti { font-size: 22px; }
.zg-einzel { align-items: center; }
.zg-pokal { position: absolute; left: 12px; top: 10px; z-index: 1; color: #fff; font-size: 26px; text-shadow: 0 2px 0 rgb(0 0 0 / .3); }
.zg-liga { background: var(--bg3); }
.zg-liga .zg-pokal { position: relative; left: auto; top: auto; color: var(--gold); font-size: 64px; text-shadow: none; }
.zg-artikel { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.zg-rubrik { font: 800 11px/1.2 var(--font-text, inherit); text-transform: uppercase; letter-spacing: .07em; color: var(--red); }
.zg-artikel h2 { margin: 0; font: 700 22px/1.2 var(--font-display, inherit); text-wrap: balance; }
.zg-artikel p { margin: 0; font-size: 15px; line-height: 1.5; }
.zg-artikel .zg-vorspann { font-weight: 600; }

/* Zitat mit Gesicht */
.zg-zitat { display: flex; gap: 10px; align-items: center; margin: 4px 0 0; padding: 9px 10px; background: var(--bg3); border-radius: 14px; border: 2px solid var(--k-linie, var(--border)); }
.zg-zitat blockquote { margin: 0; }
.zg-zitat p { font-size: 14px; font-style: italic; line-height: 1.45; }
.zg-zitat figcaption { margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--text3); }
.zg-mini { flex: none; width: 52px; height: 58px; border-radius: 12px; overflow: hidden; background: var(--zg-farbe, var(--bg3)); display: flex; align-items: flex-end; justify-content: center; }
.zg-mini svg { width: 100%; height: 100%; display: block; }
.zg-mini-rund { border: 2px solid var(--k-rand, var(--border)); }
.zg-mini-wappen { background: transparent; align-items: center; color: var(--gold); font-size: 30px; }
.zg-mini-wappen svg { width: auto; height: 100%; }
.zg-mini-duell { background: transparent; align-items: center; gap: 0; }
.zg-mini-duell svg { width: 50%; height: auto; }

/* Meldungen */
.zg-meldung { display: flex; gap: 12px; align-items: flex-start; background: var(--bg2); border: 3px solid var(--k-rand, var(--border)); border-radius: 16px; padding: 10px 12px; box-shadow: 0 4px 0 var(--k-rand, var(--border)); }
.zg-meldung > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zg-meldung h3 { margin: 0; font: 700 16px/1.25 var(--font-display, inherit); text-wrap: balance; }
.zg-meldung p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text2); }

/* Kästen: Ergebnisse, Tabelle, Archiv */
.zg-kasten, .zg-archiv { background: var(--bg2); border: 3px solid var(--k-rand, var(--border)); border-radius: 16px; padding: 10px 12px; }
.zg-kasten h3, .zg-archiv h3 { margin: 0 0 6px; font: 800 12px/1.2 var(--font-text, inherit); text-transform: uppercase; letter-spacing: .07em; color: var(--text3); }
.zg-ergebnisse, .zg-tab { list-style: none; margin: 0; padding: 0; }
.zg-ergebnisse li { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 2px solid var(--k-linie, var(--border)); font-size: 13.5px; }
.zg-ergebnisse li:last-child, .zg-tab li:last-child { border-bottom: 0; }
.zg-ergebnisse li > b { width: 42px; } .zg-ergebnisse li > b:nth-of-type(1) { text-align: right; }
.zg-ergebnisse .zg-e { font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; min-width: 44px; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.zg-ergebnisse .zg-e small { font-size: 10.5px; font-weight: 700; color: var(--text3); }
.zg-eigen { background: var(--bg3); border-radius: 8px; }
html .zg .lg-crest.zg-wk { width: 22px !important; height: 24px !important; min-width: 0; margin: 0; display: inline-block; }
.zg-tab li { display: grid; grid-template-columns: 22px 22px 1fr 16px 28px; align-items: center; gap: 6px; padding: 4px 2px; border-bottom: 2px solid var(--k-linie, var(--border)); font-size: 13.5px; }
.zg-tab li.zg-linie { border-bottom: 3px solid var(--k-rand, var(--border)); }
.zg-tab .zg-pl { color: var(--text3); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.zg-tab .zg-tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.zg-tab b { text-align: right; font-variant-numeric: tabular-nums; }
.zg-tab i { font-style: normal; font-size: 14px; line-height: 1; }
.zg-auf { color: var(--app-gut); } .zg-ab { color: var(--app-schlecht); }
.zg-archiv > div { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.zg-ausgabe { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 10px; border-radius: 12px; cursor: pointer; font: inherit; color: var(--text);
  background: var(--bg2); border: 3px solid var(--k-rand, var(--border)); box-shadow: 0 3px 0 var(--k-rand, var(--border)); }
.zg-ausgabe b { font-size: 13px; } .zg-ausgabe small { font-size: 11px; color: var(--text3); font-weight: 700; }
.zg-ausgabe.aktiv { background: var(--k-blau-knopf, var(--accent)); border-color: var(--k-blau-schatten, var(--accent)); box-shadow: 0 3px 0 var(--k-blau-schatten, var(--accent)); color: #fff; }
.zg-ausgabe.aktiv small { color: #fff; }
.zg-ausgabe:focus-visible, .zg-neu:focus-visible { outline: 3px solid var(--k-blau, var(--accent)); outline-offset: 2px; }

/* Office: ruhiger Hinweis „Neue Ausgabe“ (im Stil der Kacheln, eine Zeile) */
.zg-neu { display: flex; align-items: center; gap: 10px; width: 100%; margin: 12px 0 4px; padding: 10px 12px; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  background: var(--bg2); border: 3px solid var(--k-rand, var(--border)); border-radius: 16px; box-shadow: 0 5px 0 var(--k-blau, var(--accent)); -webkit-tap-highlight-color: transparent; }
.zg-neu:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--k-blau, var(--accent)); }
.zg-neu-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--bg3); color: var(--k-blau, var(--accent)); font-size: 22px; }
.zg-neu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zg-neu-txt b { font: 700 14px/1.2 var(--font-display, inherit); }
.zg-neu-txt small { font-size: 12.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zg-neu > .ti { color: var(--text3); font-size: 18px; }
#nav-zeitung.zg-hat-neu::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--k-blau, var(--accent)); margin-left: 6px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .zg-neu:active { transform: none; } }