:root {
  --gelb: #FFD200;
  --schwarz: #111114;
  --grund: #f4f4f6;
  --karte: #ffffff;
  --rand: #e3e3e8;
  --text: #16161a;
  --gedaempft: #6b6b76;
  --live: #d92d20;
  --gut: #1a7f37;
  --radius: .6rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0d0d0f; --karte: #17171b; --rand: #26262d;
    --text: #ececf0; --gedaempft: #9a9aa6;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--grund);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

.huelle { max-width: 56rem; margin: 0 auto; padding: 0 1rem 3rem; }

/* ---------------------------------------------------------- Kopf */

.kopf { background: var(--schwarz); color: var(--gelb); }
.kopf .huelle { padding-top: 1rem; padding-bottom: 1rem; }
.kopf h1 { margin: 0; font-size: 1.15rem; letter-spacing: .01em; }
.kopf p { margin: .15rem 0 0; font-size: .82rem; color: #c9c9cf; }

/* ---------------------------------------------------------- Mannschaftswahl */

.wahl {
  display: flex; gap: .4rem; overflow-x: auto; padding: .75rem 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.wahl::-webkit-scrollbar { display: none; }
.wahl button {
  flex: 0 0 auto; border: 1px solid var(--rand); background: var(--karte);
  color: var(--text); padding: .4rem .85rem; border-radius: 2rem;
  font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.wahl button:hover { border-color: var(--gedaempft); }
.wahl button[aria-pressed="true"] {
  background: var(--gelb); border-color: var(--gelb); color: #111; font-weight: 600;
}

/* ---------------------------------------------------------- Abschnitte */

.abschnitt { margin-top: 1.4rem; }
.abschnitt > h2 {
  margin: 0 0 .6rem; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--gedaempft);
}

.karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: .9rem 1rem;
}

.leer { color: var(--gedaempft); font-style: italic; }

/* ---------------------------------------------------------- Live */

.livekarte { border-left: 3px solid var(--live); margin-bottom: .8rem; }
.livekarte.fertig { border-left-color: var(--gut); }

.livekopf {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem;
}
.livekopf .mann { font-weight: 600; display: flex; align-items: center; gap: .55rem; }
.livekopf .mann.rechts { justify-content: flex-end; text-align: right; }
.livekopf .resultat {
  font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.marke {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--live);
}
.marke .punkt {
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--live);
  animation: pulsieren 1.6s ease-in-out infinite;
}
.fertig .marke { color: var(--gut); }
.fertig .marke .punkt { background: var(--gut); animation: none; }
@keyframes pulsieren { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

.verlauf { margin-top: .8rem; border-top: 1px solid var(--rand); padding-top: .5rem; }
.verlauf ol { list-style: none; margin: 0; padding: 0; }
.verlauf li {
  display: grid; grid-template-columns: 3.4rem 1.3rem 1fr; gap: .5rem;
  padding: .3rem 0; font-size: .89rem; border-bottom: 1px solid var(--rand);
}
.verlauf li:last-child { border-bottom: 0; }
.verlauf .zeit { color: var(--gedaempft); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- Spielleiste */

.leiste { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .4rem; }
.leiste::-webkit-scrollbar { height: 6px; }
.leiste::-webkit-scrollbar-thumb { background: var(--rand); border-radius: 3px; }

.kw {
  flex: 0 0 auto; display: flex; align-items: stretch;
  border: 1px solid var(--rand); border-radius: var(--radius);
  overflow: hidden; background: var(--karte);
}
.kw > .nummer {
  background: var(--schwarz); color: var(--gelb); display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  padding: .5rem .55rem; font-size: .7rem; font-weight: 700; line-height: 1.1;
}
.kw > .spiele { display: flex; }

.spiel {
  flex: 0 0 auto; min-width: 11rem; padding: .55rem .75rem;
  border-left: 1px solid var(--rand); font-size: .84rem;
}
.kw > .spiele > .spiel:first-child { border-left: 0; }
.spiel .wann { color: var(--gedaempft); font-size: .76rem; }
.spiel .paarung { margin: .25rem 0; font-weight: 600; line-height: 1.25; }
.spiel .paarung .seite { margin: .15rem 0; }
.spiel .zustand { font-size: .78rem; color: var(--gedaempft); }
.spiel .zustand.laeuft { color: var(--live); font-weight: 700; }
.spiel .zustand.ergebnis { color: var(--text); font-weight: 700; }
.spiel.abgesagt .paarung { text-decoration: line-through; opacity: .6; }

/* ---------------------------------------------------------- Wappen */

.wappen {
  width: 1.5rem; height: 1.5rem; flex: 0 0 auto;
  object-fit: contain; vertical-align: middle;
}
.wappen.gross { width: 2.6rem; height: 2.6rem; }
.wappen.klein { width: 1.15rem; height: 1.15rem; }

/* Ersatz für Mannschaften ohne hinterlegtes Wappen */
.wappen.ersatz {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--rand); color: var(--gedaempft);
  font-size: .58rem; font-weight: 700; letter-spacing: .02em;
}
.wappen.ersatz.gross { font-size: .8rem; }
.wappen.ersatz.klein { font-size: .5rem; }

.seite { display: flex; align-items: center; gap: .45rem; }

/* ---------------------------------------------------------- Aufklappbar */

details.block {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); margin-bottom: .6rem;
}
details.block > summary {
  cursor: pointer; padding: .7rem 1rem; font-weight: 600; font-size: .92rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
details.block > summary::-webkit-details-marker { display: none; }
details.block > summary::after { content: "▾"; color: var(--gedaempft); }
details.block[open] > summary::after { content: "▴"; }
details.block > .inhalt { padding: 0 1rem 1rem; overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th, td { padding: .35rem .4rem; border-bottom: 1px solid var(--rand); text-align: left; }
th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gedaempft); font-weight: 600;
}
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tr.eigen td { background: rgba(255, 210, 0, .13); font-weight: 600; }

/* ---------------------------------------------------------- Fuss */

.fuss {
  margin-top: 1.6rem; padding-top: .8rem; border-top: 1px solid var(--rand);
  font-size: .78rem; color: var(--gedaempft);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

.warnung {
  background: #fdf1dc; color: #7a4f01; border: 1px solid #f0d9a8;
  border-radius: var(--radius); padding: .6rem .9rem; font-size: .85rem;
  margin-top: 1rem;
}
@media (prefers-color-scheme: dark) {
  .warnung { background: #2b2205; color: #f0c86b; border-color: #4a3a0a; }
  tr.eigen td { background: rgba(255, 210, 0, .1); }
}

@media (max-width: 30rem) {
  .livekopf { grid-template-columns: 1fr auto 1fr; gap: .35rem; font-size: .92rem; }
  .livekopf .resultat { font-size: 1.4rem; }
}