/* Gridiron Manager – Look einer amerikanischen Sportzeitung und alter Sammelkarten:
   Papier, Tusche, Rasterpunkte, schmale Überschriften, flache Teamfarben. */
:root {
  --papier: #efe6d2;
  --papier-hell: #faf5e8;
  --papier-dunkel: #e2d6bb;
  --tinte: #17130f;
  --tinte-weich: #5b5247;
  --linie: #c9b994;
  --rot: #b02a22;
  --gruen: #2c6a2e;
  --gelb: #f3dc8c;
  --f1: #1f3a5f;
  --f2: #d9a441;
  --f1-text: #fff;
  --schmal: "Bahnschrift Condensed", "Bahnschrift", "Arial Narrow", "Roboto Condensed", "sans-serif-condensed", "Helvetica Neue", sans-serif;
  --text: "Bahnschrift", "Segoe UI", system-ui, sans-serif;
  --zeitung: Georgia, "Times New Roman", serif;
  --raster: radial-gradient(circle, rgba(23, 19, 15, .16) 1px, transparent 1.3px);
  font-size: 15px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--papier);
  background-image: radial-gradient(circle, rgba(23, 19, 15, .035) 1px, transparent 1.2px);
  background-size: 5px 5px;
  color: var(--tinte);
  font-family: var(--text);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { font-family: var(--schmal); font-stretch: condensed; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .5em; line-height: 1.05; }
h2 { font-size: 1.35rem; border-bottom: 3px solid var(--tinte); padding-bottom: 4px; }
h3 { font-size: 1.05rem; }
p { margin: .4em 0; }
input[type=number], select { font: inherit; padding: 3px 6px; border: 2px solid var(--tinte); background: var(--papier-hell); border-radius: 0; }
input[type=number] { width: 6.5em; }
summary { cursor: pointer; font-family: var(--schmal); text-transform: uppercase; font-weight: 700; }

/* ---------- Kopf ---------- */
.kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  padding: 14px 22px 16px;
  background-color: var(--f1);
  background-image: var(--raster);
  background-size: 6px 6px;
  color: var(--f1-text, #fff);
  border-bottom: 4px solid var(--tinte);
  box-shadow: inset 0 -9px 0 var(--f2);
}
.kopf-team { display: flex; align-items: center; gap: 14px; }
.kopf .emblem { width: 62px; height: 68px; flex: none; }
.kopf-name { margin: 0; font-family: var(--schmal); font-stretch: condensed; font-size: 2.1rem; font-weight: 700; text-transform: uppercase; line-height: 1; text-shadow: 2px 2px 0 var(--tinte); }
.kopf-sub { font-size: .9rem; opacity: .92; margin-top: 3px; }
.kopf-werte { display: flex; gap: 8px; flex-wrap: wrap; }
.kopf-werte div { display: flex; flex-direction: column; background: var(--papier-hell); color: var(--tinte); border: 2px solid var(--tinte); padding: 3px 10px; min-width: 88px; }
.kopf-werte span { font-family: var(--schmal); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinte-weich); }
.kopf-werte b { font-family: var(--schmal); font-size: 1.15rem; }
.kopf-knoepfe { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.navi { display: flex; overflow-x: auto; background: var(--papier-hell); border-bottom: 3px solid var(--tinte); padding: 0 14px; position: sticky; top: 0; z-index: 5; }
.navi button { border: 0; border-right: 1px solid var(--linie); background: none; padding: 10px 13px 8px; font-family: var(--schmal); font-stretch: condensed; font-size: .98rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--tinte-weich); cursor: pointer; white-space: nowrap; }
.navi button:hover { color: var(--tinte); background: var(--papier); }
.navi button.aktiv { background: var(--tinte); color: var(--papier-hell); }

.inhalt { padding: 18px 22px 44px; max-width: 1320px; margin: 0 auto; }
.meldung { position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); padding: 10px 16px; border: 2px solid var(--tinte); box-shadow: 5px 5px 0 var(--tinte); font-weight: 600; background: var(--papier-hell); }
.meldung.ok { background: #d9e8cf; }
.meldung.fehler { background: #f2cfc7; }

/* ---------- Bausteine ---------- */
.karte { background: var(--papier-hell); border: 2px solid var(--tinte); padding: 14px 16px 16px; margin-bottom: 18px; min-width: 0; overflow-x: auto; }
.karte.hervor { border-width: 3px; box-shadow: 6px 6px 0 var(--f1); }
.karte.warnkarte { background: #f2cfc7; }
.raster2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; }
.raster2 > .karte { margin-bottom: 0; }
.raster2 + * { margin-top: 18px; }
.raster3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; margin-bottom: 18px; }
.raster3 > .karte { margin-bottom: 0; }
.raster4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; margin-bottom: 26px; }
.mitte { text-align: center; }
.klein { font-size: .86rem; }
.grau { color: var(--tinte-weich); }
.rot { color: var(--rot); }
.gruen { color: var(--gruen); }
.fett { font-weight: 700; }
.hinweis { background: var(--gelb); border: 2px solid var(--tinte); padding: 8px 12px; margin: 10px 0; }
.marke { font-family: var(--schmal); font-size: .7rem; text-transform: uppercase; background: var(--tinte); color: var(--papier-hell); padding: 1px 5px; vertical-align: middle; }
.liste { margin: 0; padding-left: 1.1em; }
.liste li { margin: 4px 0; }
.scroll { overflow-x: auto; }
.nachrichten li { font-family: var(--zeitung); }

.abz {
  display: inline-block; min-width: 2.7em; text-align: center;
  background: var(--f1); color: #fff; border: 1.5px solid var(--tinte); box-shadow: inset 0 -3px 0 var(--f2);
  padding: 0 4px 2px; font-family: var(--schmal); font-weight: 700; font-size: .82rem; letter-spacing: .04em;
}
.tn { white-space: nowrap; }

.balken { display: inline-block; width: 110px; height: 10px; background: var(--papier); border: 1.5px solid var(--tinte); vertical-align: middle; }
.balken span { display: block; height: 100%; background: var(--tinte); }
.balken.rotbalken span { background: var(--rot); }
.balken.gruenbalken span { background: var(--gruen); }

.knopf {
  border: 2px solid var(--tinte); background: var(--papier-hell); color: var(--tinte);
  padding: 6px 13px 5px; margin: 2px; cursor: pointer;
  font-family: var(--schmal); font-stretch: condensed; font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 3px 3px 0 var(--tinte);
}
.knopf:hover { background: #fff; }
.knopf:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinte); }
.knopf.haupt { background: var(--f1); color: var(--f1-text); }
.kopf .knopf.haupt { background: var(--f2); color: var(--f2-text, var(--tinte)); font-size: 1.05rem; padding: 8px 16px 7px; }
.kopf .knopf.leise { background: transparent; color: var(--f1-text, #fff); border-color: var(--f1-text, #fff); box-shadow: none; }
.knopf.klein { padding: 2px 8px 1px; font-size: .82rem; box-shadow: 2px 2px 0 var(--tinte); }
.knopf.leise { color: var(--tinte-weich); box-shadow: none; }
.knopf.warn { background: var(--rot); color: #fff; }

.filter { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; }
.filter button { border: 1.5px solid var(--tinte); background: var(--papier-hell); padding: 2px 10px; font-family: var(--schmal); font-weight: 600; text-transform: uppercase; font-size: .85rem; cursor: pointer; }
.filter button.aktiv { background: var(--tinte); color: var(--papier-hell); }

.optionen { display: flex; flex-direction: column; gap: 8px; }
.optionen.spalte { margin-top: 14px; }
.option { text-align: left; border: 2px solid var(--tinte); background: var(--papier-hell); padding: 8px 12px; font: inherit; cursor: pointer; }
.option b { font-family: var(--schmal); text-transform: uppercase; font-size: 1.02rem; }
.option small { display: block; color: var(--tinte-weich); }
.option.aktiv { background: var(--f1); color: var(--f1-text); box-shadow: 4px 4px 0 var(--tinte); }
.option.aktiv small { color: inherit; opacity: .85; }
.option.inline { display: inline-block; margin: 2px 4px 2px 0; }
.option.inline small { display: inline; }

/* ---------- Tabellen ---------- */
.tab { width: 100%; border-collapse: collapse; }
.tab th, .tab td { padding: 5px 8px; border-bottom: 1px dotted var(--tinte-weich); text-align: left; vertical-align: middle; }
.tab th { font-family: var(--schmal); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinte-weich); border-bottom: 2px solid var(--tinte); }
.tab tr.ich td, li.ich { background: var(--gelb); }
.tab tr.gelb td { background: var(--gelb); }
.tab td.zahl { text-align: right; white-space: nowrap; }
.tab td.aktion { white-space: nowrap; }
.wahlzeile { cursor: pointer; }
.wahlzeile:hover td { background: var(--papier); }
.tab tr.gewaehlt td { background: #cfe0c3; }

/* ---------- Gesichter ---------- */
.gesicht { display: block; }
.gesicht-nr { font-family: var(--schmal); font-weight: 700; font-size: 15px; }
.emblem-text { font-family: var(--schmal); font-weight: 700; letter-spacing: -1px; }
.ava { width: 30px; height: 35px; border: 1.5px solid var(--tinte); display: inline-block; vertical-align: middle; overflow: hidden; flex: none; }
.ava .gesicht { width: 100%; height: 100%; }
.spieler-zelle { display: flex; align-items: center; gap: 8px; }
.namelink { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; text-decoration: underline dotted 1px; text-underline-offset: 3px; }
.namelink:hover { color: var(--rot); }
.emblem { width: 34px; height: 37px; display: inline-block; vertical-align: middle; }
.emblem.gross { width: 92px; height: 101px; }

/* ---------- Start ---------- */
.start { max-width: 1320px; margin: 0 auto; padding: 0 22px 40px; }
.titelkopf { text-align: center; border-bottom: 4px double var(--tinte); padding: 26px 0 12px; margin-bottom: 8px; }
.titelkopf h1 { font-size: clamp(2.2rem, 7vw, 4.4rem); margin: 0; letter-spacing: .01em; }
.titelzeile { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-family: var(--schmal); text-transform: uppercase; font-size: .85rem; border-bottom: 1.5px solid var(--tinte); padding: 4px 0; margin-bottom: 22px; }
.teamwahl {
  display: flex; gap: 10px; align-items: center; width: 100%; text-align: left;
  border: 2px solid var(--tinte); background: var(--papier-hell); padding: 7px 10px; margin-bottom: 8px; font: inherit; cursor: pointer;
}
.teamwahl:hover { background: #fff; box-shadow: 4px 4px 0 var(--f1); }
.teamwahl .emblem { width: 46px; height: 50px; flex: none; }
.teamwahl span { display: flex; flex-direction: column; min-width: 0; }
.teamwahl b { font-family: var(--schmal); text-transform: uppercase; font-size: 1.08rem; }
.teamwahl small { color: var(--tinte-weich); }

/* ---------- Übersicht ---------- */
.duell { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 8px 0; font-family: var(--schmal); text-transform: uppercase; font-weight: 700; }
.duell .emblem { width: 76px; height: 84px; }
.gesichter-reihe { display: flex; gap: 10px; flex-wrap: wrap; }
.gesichter-reihe figure { margin: 0; width: 88px; text-align: center; font-size: .78rem; }
.gesichter-reihe .gesicht { width: 88px; height: 103px; border: 2px solid var(--tinte); }

/* ---------- Playoffs ---------- */
.baum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.baum-spiel { border: 2px solid var(--tinte); background: var(--papier); padding: 5px 8px; margin-bottom: 8px; }
.baum-spiel div { padding: 2px 0; }
@media (max-width: 700px) { .baum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Fenster ---------- */
.schleier { position: fixed; inset: 0; background-color: rgba(23, 19, 15, .62); background-image: var(--raster); background-size: 5px 5px; display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
.fenster { background: var(--papier-hell); border: 3px solid var(--tinte); box-shadow: 9px 9px 0 var(--tinte); padding: 20px 24px; max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto; }
.fenster.breit { max-width: 1000px; }
.schlagzeile { font-family: var(--schmal); font-stretch: condensed; text-transform: uppercase; font-size: 2.3rem; line-height: 1; margin: 0 0 6px; border-bottom: 3px solid var(--tinte); padding-bottom: 6px; }
.unterzeile { font-family: var(--zeitung); font-style: italic; color: var(--tinte-weich); margin-bottom: 10px; }
.anzeigetafel { display: flex; justify-content: center; align-items: center; gap: 16px; font-family: var(--schmal); font-size: 3.4rem; font-weight: 700; margin: 10px 0; }
.anzeigetafel .emblem { width: 70px; height: 77px; }
.protokoll { font-size: .82rem; max-height: 340px; overflow-y: auto; padding-left: 2.5em; font-family: var(--zeitung); }
details { margin: 12px 0; }

/* ---------- Sammelkarte ---------- */
.sammelkarte { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
.kartenbild { background: var(--f1); border: 3px solid var(--tinte); padding: 8px; box-shadow: 6px 6px 0 var(--tinte); transform: rotate(-1.5deg); align-self: start; }
.kartenbild .gesicht { width: 100%; height: auto; border: 2.5px solid var(--tinte); }
.kartenname { background: var(--tinte); color: var(--papier-hell); font-family: var(--schmal); text-transform: uppercase; font-size: 1.25rem; font-weight: 700; padding: 4px 8px; margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.kartenname small { background: var(--f2); color: var(--tinte); padding: 0 6px; font-size: .95rem; }
.werte-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 10px 0; }
.wert { border: 2px solid var(--tinte); padding: 4px 8px; background: var(--papier); }
.wert span { display: block; font-family: var(--schmal); font-size: .72rem; text-transform: uppercase; color: var(--tinte-weich); }
.wert b { font-family: var(--schmal); font-size: 1.35rem; }
/* Fähigkeitswerte im Spielerprofil */
.fw-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; margin: 6px 0 10px; }
.fw { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 8px; }
.fw span { font-family: var(--schmal); text-transform: uppercase; font-size: .8rem; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw b { font-family: var(--schmal); font-size: 1.15rem; }
.fw i { grid-column: 1 / -1; height: 6px; background: var(--papier-dunkel); border: 1px solid var(--tinte); }
.fw u { display: block; height: 100%; background: var(--tinte); }
.fw.top u { background: var(--gruen); }
.fw.top b { color: var(--gruen); }
.fw.schwach u { background: var(--rot); }
@media (max-width: 640px) { .sammelkarte { grid-template-columns: minmax(0, 1fr); } .kartenbild { max-width: 220px; } }

@media (max-width: 700px) {
  .kopf { padding: 12px 16px 16px; }
  .kopf-knoepfe { margin-left: 0; }
  .inhalt { padding: 14px 16px 34px; }
  .kopf-name { font-size: 1.6rem; }
}

/* ================= Sammelkarten =================
   Format 63 x 88 mm wie echte Trading Cards, alle Maße in em relativ zur Kartenbreite. */
.tc { --b: 230px; width: var(--b); height: calc(var(--b) * 1.397); font-size: calc(var(--b) / 24); position: relative; display: inline-block; flex: none; cursor: pointer; perspective: 1400px; vertical-align: top; }
.tc-dreh { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, .7, .3, 1);
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); }
.tc.umgedreht .tc-dreh { transform: rotateY(calc(180deg + var(--ry, 0deg))) rotateX(var(--rx, 0deg)); }
.tc-gross .tc-dreh { transition: transform .12s ease-out; }
.tc-gross.drehen .tc-dreh { transition: transform .55s cubic-bezier(.3, .7, .3, 1); }
.tc-seite { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: .6em; overflow: hidden; box-shadow: .25em .3em 0 rgba(23, 19, 15, .85); }
.tc-hinten { transform: rotateY(180deg); }
.tc:hover .tc-seite { box-shadow: .35em .45em 0 rgba(23, 19, 15, .85); }

/* Vorderseite */
.tc-rahmen { position: absolute; inset: 0; padding: .8em .8em 1.5em; background: #fbf8f0; display: flex; flex-direction: column; }
.tc-bild { position: relative; flex: 1; overflow: hidden; background: var(--f1); border: .14em solid var(--tinte); border-radius: .2em .2em 0 0; }
.tc-strahlen { position: absolute; inset: -60%; background:
  radial-gradient(circle, rgba(23, 19, 15, .22) .07em, transparent .1em) 0 0 / .45em .45em,
  repeating-conic-gradient(from 0deg at 50% 62%, rgba(255, 255, 255, .13) 0 7deg, transparent 7deg 15deg); }
.tc-bild .gesicht { position: absolute; left: 50%; bottom: -.2em; width: 118%; height: auto; transform: translateX(-50%); }
.tc-marke { position: absolute; top: .55em; left: .55em; background: var(--tinte); color: #fff; font-family: var(--schmal); padding: .2em .45em .25em; transform: rotate(-5deg); line-height: .95; text-align: center; border: .1em solid #fff; z-index: 2; }
.tc-marke b { display: block; font-size: .95em; letter-spacing: .1em; }
.tc-marke span { font-size: .85em; color: var(--f2); font-weight: 700; }
.tc-rc { position: absolute; top: .5em; right: .5em; width: 2.6em; height: 2.6em; border-radius: 50%; background: #fff; border: .2em solid var(--tinte); color: #c0242b; font: 700 1.15em/1 var(--schmal); display: grid; place-items: center; box-shadow: inset 0 0 0 .15em #1d3f8f; z-index: 2; }
.tc-band { position: relative; z-index: 2; margin-top: -1.9em; min-height: 3.9em; display: flex; align-items: flex-end; gap: .45em; padding: 1.1em .45em .3em; background: var(--f1); color: #fff; border: .14em solid var(--tinte); border-top: 0; clip-path: polygon(0 26%, 100% 0, 100% 100%, 0 100%); }
.tc-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.4em; background: var(--f2); clip-path: polygon(0 72%, 100% 0, 100% 22%, 0 94%); }
.tc-pos { background: var(--f2); color: var(--tinte); font: 700 1.15em/1 var(--schmal); padding: .2em .3em; border: .12em solid var(--tinte); flex: none; }
.tc-name { flex: 1; min-width: 0; font-family: var(--schmal); font-stretch: condensed; text-transform: uppercase; font-weight: 700; font-size: 1.7em; line-height: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: .06em .06em 0 var(--tinte); }
.tc-name small { display: block; font-size: .5em; letter-spacing: .06em; opacity: .9; text-shadow: none; }
.tc-band .emblem { width: 3em; height: 3.3em; flex: none; margin-bottom: -.1em; }
.tc-serie { position: absolute; right: .9em; bottom: .25em; font: 700 .85em/1 var(--schmal); letter-spacing: .05em; color: var(--tinte); }

/* Folie, Glitzer, Glanz
   Das Licht kommt aus --px/--py (Mauszeiger, ohne Maus wandert es langsam) und --dreh.
   Ebenen: Holo hinter dem Spieler, Folie über der ganzen Karte (über dem Gesicht schwächer),
   Glitzerpunkte, die nur aufblitzen, wo das Licht gerade steht, und ein Glanzpunkt. */
@property --px { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --py { syntax: '<percentage>'; inherits: true; initial-value: 35%; }
@property --dreh { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.tc { --folie: 0; --folie-aktiv: 0; --holo: 0; --holo-aktiv: 0; --glitzer: 0; --glitzer-aktiv: 0; --glanz: .45; }
.tc-bild { isolation: isolate; }
.tc-holo, .tc-folie, .tc-glitzer, .tc-glanz { position: absolute; inset: 0; pointer-events: none; transition: opacity .35s; }
.tc-holo { opacity: var(--holo); mix-blend-mode: color-dodge; background-size: 260% 260%; background-position: var(--px) var(--py); }
.tc-folie { opacity: var(--folie); mix-blend-mode: color-dodge; background-size: 280% 280%; background-position: var(--px) var(--py);
  -webkit-mask-image: radial-gradient(ellipse 40% 30% at 50% 40%, rgba(0, 0, 0, .3), #000 85%); mask-image: radial-gradient(ellipse 40% 30% at 50% 40%, rgba(0, 0, 0, .3), #000 85%); }
.tc-glitzer { opacity: var(--glitzer); mix-blend-mode: color-dodge;
  -webkit-mask-image: radial-gradient(ellipse 38% 30% at 50% 40%, rgba(0, 0, 0, .05), #000 95%); mask-image: radial-gradient(ellipse 38% 30% at 50% 40%, rgba(0, 0, 0, .05), #000 95%); }
/* Glitzerpunkte: Rauschmuster als Maske, darunter Regenbogen; ein Lichtband wählt die Punkte, die gerade blitzen */
.tc-glitzer { --funken-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 30 0 0 0 -19.5'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  --funken-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 30 0 0 0 -20.4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tc-glitzer::before, .tc-glitzer::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, #ff9a9a, #ffe79a, #9affc8, #9ae0ff, #d6b0ff, #ff9ae0, #ff9a9a) var(--px) var(--py) / 300% 300%;
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.tc-glitzer::before {
  -webkit-mask-image: var(--funken-a), repeating-linear-gradient(115deg, transparent 0 9%, #000 14% 17%, transparent 22% 31%);
  mask-image: var(--funken-a), repeating-linear-gradient(115deg, transparent 0 9%, #000 14% 17%, transparent 22% 31%);
  -webkit-mask-size: 12em 12em, 260% 260%; mask-size: 12em 12em, 260% 260%;
  -webkit-mask-position: 0 0, var(--px) var(--py); mask-position: 0 0, var(--px) var(--py); }
.tc-glitzer::after {
  -webkit-mask-image: var(--funken-b), repeating-linear-gradient(-55deg, transparent 0 11%, #000 15% 18%, transparent 23% 34%);
  mask-image: var(--funken-b), repeating-linear-gradient(-55deg, transparent 0 11%, #000 15% 18%, transparent 23% 34%);
  -webkit-mask-size: 14em 14em, 240% 240%; mask-size: 14em 14em, 240% 240%;
  -webkit-mask-position: 0 0, calc(100% - var(--px)) var(--py); mask-position: 0 0, calc(100% - var(--px)) var(--py); }
.tc-glanz { opacity: 0; mix-blend-mode: overlay;
  background: radial-gradient(farthest-corner circle at var(--px) var(--py), rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .3) 16%, rgba(0, 0, 0, .3) 90%); }
.tc:hover .tc-glanz, .tc-gross .tc-glanz { opacity: var(--glanz); }
.tc:hover .tc-folie, .tc-gross .tc-folie { opacity: var(--folie-aktiv); }
.tc:hover .tc-holo, .tc-gross .tc-holo { opacity: var(--holo-aktiv); }
.tc:hover .tc-glitzer, .tc-gross .tc-glitzer { opacity: var(--glitzer-aktiv); }
.tc:hover .tc-dreh { transition: transform .15s ease-out; }

/* Ohne Maus wandert das Licht über glänzende Karten (jede Karte mit eigenem Versatz) */
@keyframes tc-licht {
  0% { --px: 12%; --py: 8%; --dreh: 0deg; }
  50% { --px: 88%; --py: 92%; --dreh: 180deg; }
  100% { --px: 12%; --py: 8%; --dreh: 360deg; }
}
.tc-chrom, .tc-gold, .tc-prisma, .tc-mvp, .tc-gbmvp, .tc-dpoy, .tc-roy, .tc-starbowl, .tc-meister {
  animation: tc-licht 9s ease-in-out infinite; animation-delay: calc(var(--versatz, 0) * -1.1s); }
.tc:hover, .tc-gross:hover { animation: none; }
@media (prefers-reduced-motion: reduce) { .tc { animation: none !important; } }

/* Metallrahmen spiegeln mit */
.tc-chrom .tc-rahmen, .tc-roy .tc-rahmen, .tc-gold .tc-rahmen, .tc-meister .tc-rahmen, .tc-dpoy .tc-rahmen { background-size: 300% 300%; background-position: var(--px) var(--py); }

/* Chrom-Refractor: Regenbogenstreifen brechen das Licht */
.tc-chrom .tc-rahmen, .tc-roy .tc-rahmen { background-image: linear-gradient(125deg, #e9ecef 0%, #8f98a2 12%, #ffffff 22%, #7d8690 34%, #f4f6f8 46%, #8b949e 58%, #ffffff 70%, #848d97 82%, #e6e9ec 100%); }
.tc-chrom, .tc-roy { --folie: .2; --folie-aktiv: .55; --holo: .35; --holo-aktiv: .75; --glanz: .55; }
.tc-chrom .tc-folie, .tc-roy .tc-folie { background-image: repeating-linear-gradient(115deg, transparent 0 6%, rgba(255, 120, 120, .9) 9%, rgba(255, 235, 120, .9) 11%, rgba(120, 255, 180, .9) 13%, rgba(110, 210, 255, .9) 15%, rgba(200, 150, 255, .9) 17%, transparent 21% 30%); }
.tc-chrom .tc-holo, .tc-roy .tc-holo { background-image: repeating-linear-gradient(110deg, #ff7d7d 0, #ffe57d 2.2%, #7dffb2 4.4%, #7dd6ff 6.6%, #c99dff 8.8%, #ff7d7d 11%); }

/* Goldfolie */
.tc-gold .tc-rahmen, .tc-meister .tc-rahmen { background-image: linear-gradient(125deg, #fff2b0 0%, #b8860b 12%, #fff7c2 22%, #8f620a 34%, #ffe58a 46%, #a87812 58%, #fff3a6 70%, #94680c 82%, #f5d76e 100%); }
.tc-gold, .tc-meister { --folie: .2; --folie-aktiv: .5; --holo: .4; --holo-aktiv: .8; --glitzer: .55; --glitzer-aktiv: 1; --glanz: .6; }
.tc-gold .tc-folie, .tc-meister .tc-folie { background-image: repeating-linear-gradient(115deg, transparent 0 8%, rgba(255, 214, 100, .95) 12%, rgba(255, 255, 235, .95) 14%, rgba(255, 196, 70, .95) 16%, transparent 20% 30%); }
.tc-gold .tc-holo, .tc-meister .tc-holo { background-image: repeating-linear-gradient(110deg, #5a3d05 0, #e8b93a 2.5%, #fff3c4 4%, #c99320 6%, #5a3d05 9%); }

/* Prisma: Prizm-Muster dreht sich mit dem Licht, dazu Regenbogenfolie und Glitzer */
.tc-prisma .tc-rahmen { background: conic-gradient(from var(--dreh), #ff6b6b, #ffd166, #7bf1a8, #4cc9f0, #b388ff, #ff8fd8, #ff6b6b); }
.tc-prisma { --folie: .2; --folie-aktiv: .5; --holo: .5; --holo-aktiv: .9; --glitzer: .6; --glitzer-aktiv: 1; --glanz: .6; }
.tc-prisma .tc-folie { background-image: repeating-linear-gradient(115deg, #ff7b7b 0, #ffe27a 3%, #7bffb0 6%, #7bd8ff 9%, #c99bff 12%, #ff7b7b 15%); background-size: 400% 400%; }
.tc-prisma .tc-holo { mix-blend-mode: hard-light; background: repeating-conic-gradient(from var(--dreh) at 50% 62%, #ff6b6b 0 6deg, #ffd166 6deg 12deg, #7bf1a8 12deg 18deg, #4cc9f0 18deg 24deg, #b388ff 24deg 30deg, #ff8fd8 30deg 36deg); }

/* MVP und Grand Bowl MVP: schwarz und gold */
.tc-mvp .tc-rahmen, .tc-gbmvp .tc-rahmen { background: #15110b; box-shadow: inset 0 0 0 .3em #15110b, inset 0 0 0 .45em #d4a62a; }
.tc-mvp .tc-bild, .tc-gbmvp .tc-bild { background: #15110b; }
.tc-mvp .tc-strahlen, .tc-gbmvp .tc-strahlen { background: repeating-conic-gradient(from 0deg at 50% 62%, rgba(232, 186, 70, .32) 0 6deg, transparent 6deg 13deg); }
.tc-mvp, .tc-gbmvp { --folie: .2; --folie-aktiv: .55; --holo: .45; --holo-aktiv: .85; --glitzer: .6; --glitzer-aktiv: 1; --glanz: .6; }
.tc-mvp .tc-holo, .tc-gbmvp .tc-holo { background: repeating-conic-gradient(from var(--dreh) at 50% 62%, #8a6110 0 5deg, #ffe08a 5deg 8deg, #fff8dc 8deg 9deg, #8a6110 9deg 13deg); }
.tc-mvp .tc-folie, .tc-gbmvp .tc-folie { background-image: linear-gradient(115deg, transparent 30%, rgba(255, 210, 90, .95) 48%, rgba(255, 255, 255, .9) 52%, transparent 70%); }
.tc-mvp .tc-serie, .tc-gbmvp .tc-serie { color: #e8ba46; }
.tc-mvp-schrift { position: absolute; right: .25em; top: .12em; z-index: 2; transform: rotate(4deg); font: 700 2.7em/1 var(--schmal); letter-spacing: .02em;
  color: #f2c94c; -webkit-text-stroke: .025em #15110b; text-shadow: .05em .05em 0 #7a5410; }

/* Bänder für Sonderkarten */
.tc-schleife { position: absolute; left: -.2em; right: -.2em; top: 3.9em; z-index: 1; background: #d4a62a; color: #15110b; border-top: .12em solid #15110b; border-bottom: .12em solid #15110b;
  font: 700 .95em/1 var(--schmal); text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: .3em .2em; transform: rotate(-4deg); }
.tc-roy .tc-schleife { background: #2c6a2e; color: #fff; }
.tc-dpoy .tc-schleife { background: #39424d; color: #fff; }
.tc-meister .tc-schleife { top: auto; bottom: 2.4em; }

/* Verteidiger des Jahres: Stahl */
.tc-dpoy .tc-rahmen { background: linear-gradient(135deg, #59636e, #2b3138 30%, #8b96a2 52%, #262b31 75%, #6b7682); }
.tc-dpoy { --folie: .2; --folie-aktiv: .5; --holo: .35; --holo-aktiv: .75; --glanz: .55; }
.tc-dpoy .tc-holo { background-image: repeating-linear-gradient(110deg, #20323f 0, #9fd8ff 2.5%, #ffffff 3.5%, #5aa7d8 5.5%, #20323f 8%); }
.tc-dpoy .tc-folie { background-image: linear-gradient(115deg, transparent 30%, rgba(160, 220, 255, .95) 50%, transparent 70%); }
.tc-dpoy .tc-serie { color: #fff; }
.tc-schild { position: absolute; right: .45em; top: .45em; z-index: 2; width: 1.9em; height: 2.2em; background: #39424d; color: #fff; font: 700 1.5em/1.9em var(--schmal); text-align: center; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }

/* Star Bowl: Konferenzfarbe und Sterne */
.tc-starbowl .tc-rahmen { background: linear-gradient(90deg, var(--konf) 0 .55em, #fbf8f0 .55em calc(100% - .55em), var(--konf) calc(100% - .55em)); }
.tc-starbowl .tc-bild { background: #13254f; }
.tc-starbowl .tc-strahlen { background:
  radial-gradient(circle, rgba(255, 255, 255, .9) 0 .05em, transparent .08em) 0 0 / 1.4em 1.2em,
  radial-gradient(circle, rgba(255, 255, 255, .6) 0 .04em, transparent .07em) .6em .5em / 1.1em 1.6em,
  repeating-conic-gradient(from 0deg at 50% 62%, rgba(255, 255, 255, .09) 0 7deg, transparent 7deg 15deg); }
.tc-starbowl { --folie: .18; --folie-aktiv: .5; --holo: .3; --holo-aktiv: .7; --glitzer: .7; --glitzer-aktiv: 1; --glanz: .55; }
.tc-starbowl .tc-holo { background-image: repeating-linear-gradient(110deg, #13254f 0, #6fb6ff 2.5%, #ffffff 3.5%, #b388ff 5.5%, #13254f 8%); }
.tc-starbowl .tc-folie { background-image: linear-gradient(115deg, transparent 30%, rgba(140, 200, 255, .95) 45%, rgba(255, 255, 255, .9) 52%, transparent 70%); }
.tc-sterne { position: absolute; left: 0; right: 0; bottom: 2.3em; z-index: 1; text-align: center; background: var(--konf); color: #fff; font: 700 1.05em/1 var(--schmal); letter-spacing: .08em; padding: .3em 0; border-top: .12em solid #fff; border-bottom: .12em solid #fff; }
.tc-konf { position: absolute; right: .5em; top: .5em; z-index: 2; background: #fff; color: var(--konf); border: .15em solid var(--konf); font: 700 1.1em/1 var(--schmal); padding: .2em .35em; }

/* Grand-Bowl-Sieger */
.tc-meister .tc-strahlen { background:
  radial-gradient(circle, #e8483b 0 .09em, transparent .11em) 0 0 / 1.3em 1.5em,
  radial-gradient(circle, #f2c94c 0 .08em, transparent .1em) .5em .7em / 1.6em 1.2em,
  radial-gradient(circle, #4cc9f0 0 .07em, transparent .09em) .9em .2em / 1.1em 1.8em,
  repeating-conic-gradient(from 0deg at 50% 62%, rgba(255, 255, 255, .14) 0 7deg, transparent 7deg 15deg); }
.tc-pokal { position: absolute; right: .4em; top: .4em; width: 2.6em; height: 3.4em; z-index: 2; }

/* Rückseite: Karton, zweifarbig bedruckt */
.tc-hinten { background: #d8d0bd; background-image: radial-gradient(circle, rgba(23, 19, 15, .07) .05em, transparent .08em); background-size: .35em .35em;
  color: var(--tinte); padding: .7em .75em .5em; display: flex; flex-direction: column; gap: .55em; font-size: 1.08em; }
.tc-hkopf { display: flex; align-items: center; gap: .5em; background: var(--f1); color: #fff; margin: -.75em -.8em 0; padding: .5em .7em; border-bottom: .15em solid var(--tinte); }
.tc-nr { background: #fff; color: var(--tinte); border: .14em solid var(--tinte); font: 700 1.05em/1 var(--schmal); padding: .3em .3em; min-width: 2.4em; text-align: center; }
.tc-hname { flex: 1; min-width: 0; font-family: var(--schmal); text-transform: uppercase; line-height: 1.05; }
.tc-hname b { display: block; font-size: 1.35em; }
.tc-hname small { font-size: .8em; opacity: .9; }
.tc-hkopf .emblem { width: 2.6em; height: 2.9em; flex: none; }
.tc-bio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: .12em solid var(--tinte); background: #efe8d6; }
.tc-bio span { font: .7em/1.1 var(--schmal); text-transform: uppercase; padding: .3em .35em; border-right: .1em solid var(--tinte); }
.tc-bio span:last-child { border-right: 0; }
.tc-bio b { display: block; font-size: 1.45em; }
.tc-bio2 { font-size: .78em; line-height: 1.25; }
.tc-ehrung { font-family: var(--zeitung); font-style: italic; font-size: .8em; line-height: 1.25; background: var(--f2); color: var(--tinte); padding: .35em .5em; border: .1em solid var(--tinte); }
.tc-tab { width: 100%; border-collapse: collapse; font: .75em/1.15 var(--schmal); background: #efe8d6; border: .12em solid var(--tinte); }
.tc-tab th { background: var(--tinte); color: #efe8d6; text-transform: uppercase; font-weight: 600; padding: .25em .3em; text-align: right; }
.tc-tab td { padding: .2em .3em; text-align: right; border-bottom: .06em solid rgba(23, 19, 15, .3); }
.tc-tab th:nth-child(-n+2), .tc-tab td:nth-child(-n+2) { text-align: left; }
.tc-summe td { font-weight: 700; border-top: .12em solid var(--tinte); }
.tc-werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25em; }
.tc-werte span { position: relative; overflow: hidden; background: #efe8d6; border: .1em solid var(--tinte); font: 600 .62em/1 var(--schmal); text-transform: uppercase; letter-spacing: .03em; padding: .3em .35em .45em; }
.tc-werte b { display: block; font-size: 1.65em; line-height: 1; }
.tc-werte i { position: absolute; left: 0; bottom: 0; height: .28em; background: var(--f1); }
.tc-fakt { font-size: .78em; line-height: 1.25; border-left: .35em solid var(--f1); padding-left: .45em; }
.tc-fakt b { font-family: var(--schmal); text-transform: uppercase; }
.tc-fuss { margin-top: auto; font: .6em/1.2 var(--schmal); text-transform: uppercase; letter-spacing: .03em; color: var(--tinte-weich); text-align: center; }

/* Album */
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 22px 16px; justify-items: center; }
.album figure { margin: 0; text-align: center; }
.album figcaption { font-family: var(--schmal); font-size: .8rem; text-transform: uppercase; margin-top: 8px; color: var(--tinte-weich); }
.kartenbuehne { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.kartenreihe { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.zaehler { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.zaehler span { border: 2px solid var(--tinte); padding: 2px 8px; font-family: var(--schmal); text-transform: uppercase; font-size: .85rem; background: var(--papier); }
.fenster.kartenfenster { max-width: 460px; background: var(--papier); overflow-x: hidden; }

/* Hintergründe der Bildfläche je Ausführung (wie Prizm- und Refractor-Muster) */
.tc-chrom .tc-strahlen, .tc-roy .tc-strahlen { background:
  radial-gradient(circle, rgba(23, 19, 15, .2) .07em, transparent .1em) 0 0 / .45em .45em,
  repeating-conic-gradient(from 0deg at 50% 62%, rgba(255, 255, 255, .26) 0 5deg, rgba(255, 255, 255, .04) 5deg 10deg, transparent 10deg 15deg); }
.tc-gold .tc-strahlen { background:
  radial-gradient(circle, rgba(23, 19, 15, .2) .07em, transparent .1em) 0 0 / .45em .45em,
  repeating-conic-gradient(from 0deg at 50% 62%, rgba(255, 214, 102, .38) 0 6deg, transparent 6deg 14deg); }
.tc-prisma .tc-strahlen { background:
  radial-gradient(circle, rgba(23, 19, 15, .18) .07em, transparent .1em) 0 0 / .45em .45em,
  repeating-conic-gradient(from 0deg at 50% 62%, rgba(255, 107, 107, .45) 0 4deg, rgba(255, 209, 102, .45) 4deg 8deg, rgba(123, 241, 168, .45) 8deg 12deg, rgba(76, 201, 240, .45) 12deg 16deg, rgba(179, 136, 255, .45) 16deg 20deg, transparent 20deg 26deg); }

/* ================= Live-Übertragung ================= */
.fenster.stadion { max-width: 1180px; padding: 0; background: #17130f; color: #efe6d2; border-color: #17130f; }
.live-tafel { position: sticky; top: 0; z-index: 7; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 14px; background: #17130f; }
.live-team { display: flex; align-items: center; gap: 10px; font-family: var(--schmal); text-transform: uppercase; font-size: 1.25rem; min-width: 0; }
.live-team b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-team.rechts { justify-content: flex-end; }
.live-team .emblem { width: 44px; height: 48px; flex: none; }
.live-pkt { font-size: 2.6rem; font-weight: 700; background: #efe6d2; color: #17130f; min-width: 1.6em; text-align: center; padding: 0 .2em; border: 2px solid #efe6d2; }
.live-mitte { text-align: center; font-family: var(--schmal); text-transform: uppercase; }
.live-uhr { font-size: 1.8rem; font-weight: 700; color: #f2c94c; line-height: 1; }
.live-lage { font-size: .9rem; color: #c9bfa6; }
.live-buehne { position: relative; background: #2d5a2a; }
.live-feld { display: block; width: 100%; }
.live-name { position: absolute; left: 10px; top: 10px; background: #17130f; color: #efe6d2; font-family: var(--schmal); text-transform: uppercase; padding: 3px 10px; font-size: .95rem; border: 2px solid #efe6d2; }
.live-name:empty { display: none; }
.live-knall { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(0); font-family: var(--schmal); font-weight: 700; font-size: clamp(2rem, 7vw, 4.6rem);
  color: #f2c94c; -webkit-text-stroke: 2px #17130f; text-shadow: 5px 5px 0 #17130f; pointer-events: none; opacity: 0; letter-spacing: .02em; }
.live-knall.an { animation: knall 1.6s ease-out forwards; }
@keyframes knall { 0% { transform: translate(-50%, -50%) scale(.2) rotate(-12deg); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.15) rotate(-5deg); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1) rotate(-4deg); } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1) rotate(-4deg); opacity: 0; } }
.live-text { min-height: 2.6em; padding: 8px 14px; font-family: var(--zeitung); font-size: 1.05rem; background: #efe6d2; color: #17130f; border-top: 3px solid #17130f; }
.live-steuer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px; background: #efe6d2; color: #17130f; border-top: 1px dotted #17130f; }
.live-gruppe { display: inline-flex; gap: 2px; }
.live-log { max-height: 110px; overflow-y: auto; margin: 0; padding: 8px 14px 10px 2.4em; background: #faf5e8; color: #17130f; font-family: var(--zeitung); font-size: .88rem; }
.live-log li { margin: 2px 0; }

.live-name small { display: block; font-size: .78rem; color: #ff9b8f; letter-spacing: .02em; }

.live-hilfe { margin: 0; padding: 6px 14px; background: #fff4cc; color: #17130f; font-size: .88rem; border-top: 1px dotted #17130f; }
/* Wurfleiste unter dem Feld (Antippen statt Tastatur) */
.live-wurfleiste:empty { display: none; }
.live-wurfleiste { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; background: #2a241d; border-top: 3px solid #17130f; }
.wurf-knopf { flex: 1 1 88px; min-height: 44px; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 6px; }
.wurf-knopf b { font-size: 1.25rem; }
.wurf-knopf i { font-style: normal; font-weight: 700; min-width: 1.2em; }
.wurf-knopf[data-zustand="frei"] { background: #3ecf5a; }
.wurf-knopf[data-zustand="eng"] { background: #f5d33a; }
.wurf-knopf[data-zustand="zu"] { background: #ff5a3c; color: #17130f; }
.wurf-knopf[data-zustand="wartet"] { background: #a39c8f; }
.wurf-knopf.weg { flex: 0 1 120px; background: var(--papier); }
.live-ich { display: inline-block; font-family: var(--schmal); font-size: .7rem; text-transform: uppercase; background: var(--gelb); color: var(--tinte); border: 1.5px solid var(--tinte); padding: 0 5px; vertical-align: middle; }
.live-legende { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 2px 0; }
.schild { display: inline-block; width: 1.35em; height: 1.35em; line-height: 1.35em; text-align: center; border-radius: 50%; border: 2px solid #17130f; font-style: normal; font-weight: 700; color: #17130f; }
.schild.frei { background: #3ecf5a; } .schild.eng { background: #f5d33a; } .schild.zu { background: #ff5a3c; } .schild.wartet { background: #a39c8f; }

/* Playbook vor dem Snap: eigenes Feld unter dem Spielfeld, nicht darüber */
.live-ruf:empty { display: none; }
.live-ruf { padding: 10px 12px; background: #2a241d; border-top: 3px solid #17130f; }
.pb { width: 100%; background: var(--papier-hell); color: var(--tinte); border: 3px solid var(--tinte); box-shadow: 5px 5px 0 var(--tinte); padding: 10px 12px; }
.pb-konter { display: flex; gap: 2px; margin-top: 3px; }
.pb-konter i { flex: 1; font-style: normal; font: 700 .7rem/1.45 var(--schmal); text-align: center; border: 1px solid var(--tinte); background: var(--papier-hell); color: var(--tinte-weich); }
.pb-konter i.gut { background: #3ecf5a; color: var(--tinte); }
.pb-konter i.schlecht { background: #ff5a3c; color: var(--tinte); }
.pb-legende { margin: 0 0 8px; font-size: .82rem; }
.pb-legende > div { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 0 2px; align-items: center; }
.pb-legende span { display: inline-flex; align-items: center; gap: 5px; }
.pb-legende .pb-konter { display: inline-flex; margin: 0; }
.pb-legende .pb-konter i { padding: 0 5px; }
.lg-linie { display: inline-block; width: 22px; height: 4px; border: 1px solid var(--tinte); }
.lg-linie.gestrichelt { background: repeating-linear-gradient(90deg, #ff8a7a 0 4px, transparent 4px 7px); }
.lg-t { display: inline-block; width: 12px; height: 10px; border-top: 3px solid var(--tinte); position: relative; }
.lg-t::after { content: ''; position: absolute; left: 4.5px; top: -3px; width: 3px; height: 10px; background: var(--tinte); }
.lg-ellipse { display: inline-block; width: 22px; height: 12px; border-radius: 50%; border: 1px solid var(--tinte); opacity: .8; }
.lg-x { font-size: 1.1rem; line-height: 1; color: var(--tinte); }
.pb-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; border-bottom: 3px solid var(--tinte); padding-bottom: 6px; margin-bottom: 8px; }
.pb-kopf b { font-family: var(--schmal); text-transform: uppercase; font-size: 1.3rem; }
.pb-kopf span { font-family: var(--schmal); text-transform: uppercase; font-size: .9rem; color: var(--tinte-weich); }
.pb-hinweis { margin: 0 0 8px; font-family: var(--zeitung); font-style: italic; }
.pb-bild { display: flex; gap: 10px; align-items: center; border: 2px solid var(--tinte); background: var(--papier); padding: 6px 8px; margin-bottom: 8px; }
.pb-bild .pa { width: 240px; height: 118px; flex: none; }
.pb-bild b { display: block; font-family: var(--schmal); text-transform: uppercase; }
.pb-bild small { display: block; font-size: .82rem; line-height: 1.3; }
.tendenz { white-space: nowrap; font-style: normal; }
.tendenz i { display: inline-block; min-width: 1.4em; margin-left: 3px; padding: 0 3px; text-align: center; color: #fff; font-style: normal; font-family: var(--schmal); font-weight: 700; border: 1px solid var(--tinte); }
@media (max-width: 520px) { .pb-bild { flex-direction: column; align-items: flex-start; } .pb-bild .pa { width: 100%; height: 90px; } }
.pb-formen, .pb-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.pb-formen button, .pb-tabs button { border: 1.5px solid var(--tinte); background: var(--papier-hell); padding: 3px 10px; font-family: var(--schmal); font-weight: 600; text-transform: uppercase; font-size: .85rem; cursor: pointer; }
.pb-tabs button { font-size: 1rem; padding: 4px 16px; }
.pb-formen button.aktiv, .pb-tabs button.aktiv { background: var(--tinte); color: var(--papier-hell); }
.pb-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
@media (max-width: 520px) { .pb-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pb-spiel { text-align: left; border: 2px solid var(--tinte); background: var(--papier); padding: 6px 9px; cursor: pointer; font: inherit; box-shadow: 3px 3px 0 var(--tinte); }
.pb-spiel b { display: block; font-family: var(--schmal); text-transform: uppercase; font-size: 1.02rem; }
.pb-spiel small { display: block; color: var(--tinte-weich); font-size: .8rem; line-height: 1.25; }
.pb-spiel:hover:not(:disabled) { background: var(--gelb); }
.pb-spiel:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.pb-spiel.blass { opacity: .45; box-shadow: none; }
.pb-spiel.blass:hover, .pb-spiel.blass:focus-visible { opacity: .8; }
.pb-spiel.zuletzt { border-style: dashed; }
/* Play-Art: Spielzug-Grafik auf jeder Karte */
.pb-spiel .pa { display: block; width: 100%; height: auto; aspect-ratio: 54 / 31; border: 1.5px solid var(--tinte); margin-bottom: 4px; }
.pb-spiel:hover:not(:disabled) .pa { outline: 2px solid var(--gelb); }
.pb-schalter { flex: 1 1 220px; text-align: left; border: 2px solid var(--tinte); background: var(--papier-hell); padding: 5px 10px; cursor: pointer; font: inherit; }
.pb-schalter b { display: block; font-family: var(--schmal); text-transform: uppercase; font-size: 1rem; }
.pb-schalter small { display: block; color: var(--tinte-weich); font-size: .8rem; line-height: 1.25; }
.pb-schalter.aktiv { background: var(--rot); color: #fff; box-shadow: 3px 3px 0 var(--tinte); }
.pb-schalter.aktiv small { color: inherit; opacity: .9; }
.pb-fuss { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 10px; }

/* PvP */
.pvp-profil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.pvp-profil input { font: inherit; padding: 4px 8px; border: 2px solid var(--tinte); background: var(--papier-hell); min-width: 14em; }
.pvp-gegner { background: var(--gelb); border: 2px solid var(--tinte); padding: 4px 8px; }
code { font-family: Consolas, "Courier New", monospace; background: var(--papier); padding: 0 4px; }


/* ---------- Bedienung mit Tastatur, Handy ---------- */
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; box-shadow: 0 0 0 5px var(--tinte); }
[data-a][tabindex] { cursor: pointer; }
@media (max-width: 700px) {
  .fenster.stadion { max-height: none; height: 100dvh; max-width: none; border: 0; box-shadow: none; }
  .schleier:has(.fenster.stadion) { padding: 0; }
  .kopf { padding: 8px 12px 10px; gap: 6px 12px; }
  .kopf .emblem { width: 40px; height: 44px; }
  .kopf-name { font-size: 1.35rem; }
  .kopf-werte div { min-width: 0; padding: 2px 6px; }
  .kopf-werte b { font-size: .95rem; }
  .kopf-weiter { position: fixed; right: 12px; bottom: 12px; z-index: 15; box-shadow: 4px 4px 0 var(--tinte); }
  body:has(.schleier) .kopf-weiter { display: none; }
  .knopf.klein, .filter button, .pb-formen button, .pb-tabs button { min-height: 36px; }
  .meldung { bottom: 72px; }
  .tc-werte span { font-size: .7em; }
  .tc-fakt { font-size: .85em; }
}
.handel-leiste { position: sticky; top: 44px; z-index: 4; background: var(--papier-hell); border: 2px solid var(--tinte); padding: 6px 10px; margin: 8px 0; box-shadow: 4px 4px 0 var(--tinte); }
abbr[title] { text-decoration: none; border-bottom: 1px dotted currentColor; cursor: help; }

.meldung-zu { float: right; margin-left: 10px; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; padding: 0 4px; }
.fenster.stadion:focus { outline: none; }
.finanz-tab { table-layout: fixed; }

.pb-konter em { font: 600 .62rem/1.45 var(--schmal); text-transform: uppercase; color: var(--tinte-weich); margin-right: 2px; font-style: normal; }
.pb-konter i.vermutet { outline: 2px solid var(--tinte); outline-offset: -1px; font-weight: 800; }
.pb-kurz { display: block; font-size: .74rem; line-height: 1.25; color: var(--tinte-weich); }
@media (min-width: 1100px) {
  .pb-spalten { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; align-items: start; }
  .pb-links { position: sticky; top: 0; }
  .pb-links .pb-bild { flex-direction: column; align-items: stretch; }
  .pb-links .pb-bild .pa { width: 100%; height: 130px; }
}
.tc.ruht, .tc.ruht * { animation-play-state: paused !important; }
.kassenlinie { margin: 8px 0; max-width: 420px; }
.kassenlinie svg { width: 100%; height: 70px; display: block; }
.meilensteine { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.meilensteine li { border: 1.5px solid var(--tinte); background: var(--papier); padding: 2px 8px; font-size: .86rem; }
.meilensteine b { font-family: var(--schmal); }

/* ---------- Tutorial ---------- */
.tut-box { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: min(430px, calc(100vw - 32px)); max-height: 62vh; display: flex; flex-direction: column; background: var(--papier-hell); color: var(--tinte); border: 3px solid var(--tinte); box-shadow: 7px 7px 0 var(--tinte); padding: 12px 16px 14px; }
.tut-box h3 { margin: 2px 0 6px; font-family: var(--schmal); text-transform: uppercase; font-size: 1.25rem; }
.tut-box p { margin: 0 0 10px; line-height: 1.42; }
.tut-schritt { display: block; font-family: var(--schmal); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--rot); border-bottom: 2px solid var(--tinte); padding-bottom: 4px; }
.tut-inhalt { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.tut-knoepfe { flex: none; padding-top: 8px; border-top: 1px dotted var(--linie); display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.tut-wahl { display: grid; gap: 6px; margin: 0 0 10px; }
.tut-wahl .option { padding: 6px 10px; }
.tut-box.oben { top: 16px; bottom: auto; }
.tut-ziel { outline: 4px solid #e8b10c; outline-offset: 4px; animation: tut-puls 1.6s ease-in-out infinite; }
@keyframes tut-puls { 50% { outline-offset: 9px; } }
@media (prefers-reduced-motion: reduce) { .tut-ziel { animation: none; } }
@media (max-width: 640px) { .tut-box { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 52vh; padding: 8px 12px 10px; font-size: .92rem; } .tut-box.oben { top: 8px; bottom: auto; } .tut-box h3 { font-size: 1.05rem; } .tut-wahl { grid-template-columns: 1fr 1fr; } .tut-wahl .option small { display: none; } }
.erste-schritte { border-width: 3px; }
.schritte { list-style: none; margin: 0 0 12px; padding: 0; }
.schritte li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dotted var(--linie); }
.schritte li > span:nth-child(2) { flex: 1 1 260px; }
.schritte .haken { flex: none; width: 1.5em; height: 1.5em; border: 2px solid var(--tinte); display: grid; place-items: center; font-weight: 700; background: var(--papier-hell); }
.schritte li.erledigt > span:nth-child(2) { text-decoration: line-through; color: var(--tinte-weich); }
.schritte li.erledigt .haken { background: var(--gruen); color: #fff; }
.fenster.hilfe { max-width: 760px; }
.abc { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 4px 14px; margin: 0 0 8px; }
.abc dt { font-family: var(--schmal); font-weight: 700; text-transform: uppercase; }
.abc dd { margin: 0; line-height: 1.4; }
@media (max-width: 560px) { .abc { grid-template-columns: 1fr; } .abc dd { margin-bottom: 6px; } }
kbd { font-family: var(--schmal); font-weight: 700; border: 2px solid var(--tinte); border-bottom-width: 3px; padding: 0 6px; background: var(--papier-hell); white-space: nowrap; }
/* Tipps im Live-Spiel */
.live-tipp { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 12px; overflow-y: auto; background-color: rgba(23, 19, 15, .5); background-image: var(--raster); background-size: 5px 5px; }
.live-tipp[hidden] { display: none; }
.tipp-karte, .pb-tipp { background: var(--papier-hell); color: var(--tinte); border: 3px solid var(--tinte); box-shadow: 5px 5px 0 var(--tinte); padding: 10px 14px 12px; }
.tipp-karte { max-width: 560px; margin: auto; }
.tipp-karte small, .pb-tipp small { display: block; font-family: var(--schmal); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--rot); }
.tipp-karte b, .pb-tipp b { display: block; font-family: var(--schmal); text-transform: uppercase; font-size: 1.15rem; margin: 2px 0 4px; }
.tipp-karte p, .pb-tipp p { margin: 0 0 8px; line-height: 1.42; }
.pb-tipp { margin: 0 0 10px; background: var(--gelb); }
.pb-spiel { position: relative; }
.pb-stempel { position: absolute; top: 4px; right: 4px; transform: rotate(8deg); font: 700 .78rem/1 var(--schmal); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--rot); border: 2px solid var(--rot); padding: 2px 5px 1px; background: var(--papier-hell); }
.hinweis.warn { border: 3px solid var(--rot); }
.hinweis p { margin: 4px 0; }
.pb-kopf .pb-kopf-knoepfe { font-size: inherit; color: inherit; text-transform: none; }
.pb-kopf-knoepfe { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.pb-grau { font-size: .82rem; color: var(--tinte-weich); margin: 6px 0 0; }
.ehrennummer { display: inline-block; min-width: 1.7em; text-align: center; font: 700 .95rem/1.3 var(--schmal); background: var(--f1); color: var(--f1-text); border: 2px solid var(--tinte); padding: 0 4px; }
/* Aufstellung (Depth Chart) */
.depth-pos h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.depth-pos h3 small { font-family: var(--text); font-size: .8rem; font-weight: 400; text-transform: none; color: var(--tinte-weich); }
.depth-pos h3 .knopf { margin-left: auto; }
.depth-liste { list-style: none; margin: 0; padding: 0; }
.depth-liste li { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-bottom: 1px dotted var(--linie); }
.depth-liste li.startet { background: var(--gelb); }
/* Verletzte und Gesperrte: Name, Platz und Stärke blass, die Knöpfe bleiben normal */
.depth-liste li.aus .depth-platz, .depth-liste li.aus .depth-name .spieler-zelle, .depth-liste li.aus .depth-wert { opacity: .55; }
.depth-name { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.depth-status { font-size: .78rem; line-height: 1.2; padding-left: 2px; }
.depth-platz { flex: none; width: 1.5em; text-align: right; font: 700 .95rem/1 var(--schmal); color: var(--tinte-weich); }
.depth-wert { margin-left: auto; font: 700 1rem/1 var(--schmal); }
.depth-knoepfe { display: inline-flex; gap: 4px; flex: none; }
.depth-knoepfe .knopf { min-width: 2em; }
.depth-liste .depth-trenner { justify-content: center; border-bottom: 2px dashed var(--tinte); font: 700 .72rem/1.2 var(--schmal); text-transform: uppercase; letter-spacing: .12em; color: var(--tinte-weich); padding: 6px 0 2px; }
/* Einblendungen im Live-Spiel: Lage vor dem Snap, Flagge bei Strafen */
.live-ansage { position: absolute; left: 50%; top: 18%; transform: translate(-50%, -50%); z-index: 4; pointer-events: none; opacity: 0;
  display: flex; flex-direction: column; align-items: center; padding: 6px 18px 7px; background: #17130f; color: #efe6d2; border: 3px solid #efe6d2; box-shadow: 4px 4px 0 rgba(23, 19, 15, .6); }
.live-ansage b { font: 700 clamp(1.6rem, 4.6vw, 2.6rem)/1 var(--schmal); letter-spacing: .03em; }
.live-ansage small { font: 600 .82rem/1.3 var(--schmal); text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.live-ansage.an { animation: ansage 1.5s ease-out forwards; }
@keyframes ansage { 0% { opacity: 0; transform: translate(-50%, -30%); } 15% { opacity: 1; transform: translate(-50%, -50%); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%); } }
.live-flagge { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-3deg); z-index: 5; pointer-events: none; opacity: 0;
  display: flex; flex-direction: column; align-items: center; min-width: 220px; padding: 8px 22px 10px; background: #f5d33a; color: #17130f; border: 4px solid #17130f; box-shadow: 6px 6px 0 #17130f; text-align: center; }
.live-flagge small { font: 700 .85rem/1 var(--schmal); text-transform: uppercase; letter-spacing: .25em; }
.live-flagge b { font: 700 clamp(1.7rem, 5vw, 2.8rem)/1.05 var(--schmal); text-transform: uppercase; }
.live-flagge span { font: 600 .95rem/1.3 var(--schmal); text-transform: uppercase; letter-spacing: .04em; }
.live-flagge.an { animation: flagge 3.2s ease-out forwards; }
@keyframes flagge { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(.4); } 12% { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(1.08); }
  22% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-3deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .live-ansage.an, .live-flagge.an { animation-name: einfach-blenden; } }
@keyframes einfach-blenden { 0%, 100% { opacity: 0; } 10%, 85% { opacity: 1; } }
/* Lautstärkeregler (Musik, Ton) */
.regler { display: inline-flex; align-items: center; gap: 6px; font: 700 .8rem/1 var(--schmal); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.regler input[type="range"] { width: 92px; accent-color: var(--f2); cursor: pointer; }
.kopf-regler { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 0 4px; }
.live-steuer .regler input[type="range"] { accent-color: #17130f; }
.start .regler input[type="range"] { accent-color: var(--tinte); }
/* ---------- Zeitung (Nachrichten) ---------- */
.zeitung { background: var(--papier-hell); border: 3px solid var(--tinte); box-shadow: 6px 6px 0 var(--tinte); padding: 14px 24px 20px; font-family: var(--zeitung); color: var(--tinte); }
.zeitung-kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 6px 14px; border-bottom: 4px double var(--tinte); padding-bottom: 6px; }
.zeitung-kopf h1 { grid-column: 2; margin: 0; font-family: var(--zeitung); font-weight: 700; font-size: clamp(1.9rem, 5.6vw, 3.6rem); letter-spacing: .01em; text-align: center; line-height: 1.05; }
.zeitung-ohr { grid-row: 1; font-family: var(--schmal); text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; border: 1.5px solid var(--tinte); padding: 4px 8px; justify-self: start; text-align: center; }
.zeitung-ohr.rechts { grid-column: 3; justify-self: end; }
.zeitung-leiste { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; border-top: 1.5px solid var(--tinte); padding-top: 4px; font-family: var(--schmal); text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; }
.zeitung-blaettern { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding-top: 6px; }
.zeitung-seite { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 0 26px; margin-top: 16px; }
.aufmacher { min-width: 0; }
.dachzeile { margin: 0; font-family: var(--schmal); text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; font-weight: 700; color: var(--rot); }
.zeitung-titel { margin: 4px 0 6px; font-family: var(--zeitung); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.08; letter-spacing: -.005em; text-transform: none; border: 0; padding: 0; }
.zeitung-unterzeile { margin: 0 0 6px; font-size: 1.15rem; font-style: italic; line-height: 1.3; }
.autorenzeile { margin: 0 0 10px; font-family: var(--schmal); text-transform: uppercase; font-size: .75rem; letter-spacing: .1em; color: var(--tinte-weich); border-bottom: 1px solid var(--tinte); padding-bottom: 6px; }
.zeitung-bild { float: right; width: min(150px, 46%); margin: 2px 0 8px 12px; border: 2px solid var(--tinte); padding: 6px; background: var(--papier); }
.zeitung-bild .gesicht, .zeitung-bild svg { width: 100%; height: auto; display: block; }
.zeitung-bild figcaption { font-size: .78rem; line-height: 1.3; margin-top: 4px; font-style: italic; }
.zeitung-text { columns: 17em 2; column-gap: 22px; column-rule: 1px solid var(--linie); text-align: left; hyphens: auto; -webkit-hyphens: auto; line-height: 1.5; font-size: 1rem; }
.zeitung-text p { margin: 0 0 .7em; }
.zeitung-text p:first-of-type::first-letter { float: left; font-size: 3.1em; line-height: .85; padding: 4px 6px 0 0; font-weight: 700; }
.ortsmarke { font-family: var(--schmal); letter-spacing: .04em; }
.zeitung-spalte { border-left: 1.5px solid var(--tinte); padding-left: 18px; min-width: 0; }
.zeitung-spalte section { margin-bottom: 16px; }
.zeitung-spalte h3, .zeitung-rubriken h3 { margin: 0 0 6px; font-family: var(--schmal); text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; border-bottom: 2px solid var(--tinte); padding-bottom: 3px; }
.zeitung-spalte h3 small { font-size: .7rem; letter-spacing: 0; color: var(--tinte-weich); }
.zeitung-spalte .tab { font-family: var(--text); font-size: .8rem; }
.zeitung-ergebnisse { width: 100%; border-collapse: collapse; font-family: var(--schmal); font-size: .95rem; }
.zeitung-ergebnisse td { padding: 2px 3px; border-bottom: 1px dotted var(--linie); white-space: nowrap; }
.zeitung-ergebnisse td:nth-child(2), .zeitung-ergebnisse td:nth-child(4) { text-align: right; width: 2em; }
.zeitung-ergebnisse td:nth-child(3) { width: .6em; text-align: center; }
.zeitung-ergebnisse .sieger { font-weight: 700; }
.zeitung-ergebnisse tr.ich { background: var(--gelb); }
.zeitung-rubriken { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 26px; border-top: 4px double var(--tinte); margin-top: 18px; padding-top: 12px; }
.zeitung-rubriken section { min-width: 0; }
.zeitung-rubriken p { margin: 0 0 .6em; font-size: .92rem; line-height: 1.42; hyphens: auto; -webkit-hyphens: auto; }
.zeitung-archiv { margin-top: 14px; border-top: 1px solid var(--tinte); padding-top: 6px; font-family: var(--text); font-size: .85rem; }
.zeitung-archiv summary { cursor: pointer; font-family: var(--schmal); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 760px) {
  .zeitung { padding: 10px 12px 14px; }
  .zeitung-kopf { grid-template-columns: 1fr 1fr; }
  .zeitung-kopf h1 { grid-column: 1 / -1; grid-row: 2; }
  .zeitung-ohr.rechts { grid-column: 2; }
  .zeitung-seite { grid-template-columns: 1fr; }
  .zeitung-spalte { border-left: 0; padding-left: 0; border-top: 3px double var(--tinte); margin-top: 12px; padding-top: 10px; }
  .zeitung-bild { width: 42%; }
}
.zeitung-spalte section { overflow-x: auto; }
.zeitung-tabelle { width: 100%; border-collapse: collapse; font-family: var(--schmal); font-size: .9rem; }
.zeitung-tabelle th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinte-weich); border-bottom: 1px solid var(--tinte); }
.zeitung-tabelle td { padding: 3px 4px 2px 0; border-bottom: 1px dotted var(--linie); white-space: nowrap; }
.zeitung-tabelle tr.ich { background: var(--gelb); font-weight: 700; }