/* Anpfiff Niederrhein — Oberfläche
   Kräftig-sportlich: Rasengrün als Signalfarbe, tiefes Nachtblau als Grund,
   breite Versalien für Etiketten, kantige Kanten statt runder Gemütlichkeit. */

:root {
  color-scheme: light dark;

  --grund: #F2F5F9;
  --flaeche: #FFFFFF;
  --flaeche-2: #E9EEF5;
  --schrift: #0D1726;
  --schrift-leise: #56657C;
  --linie: #D8E0EA;

  --akzent: #00963F;
  --akzent-stark: #007A33;
  --auf-akzent: #FFFFFF;

  --kern: #00963F;
  --umland: #1D6FD0;
  --duisburg: #7B5EA7;
  --warnung: #B45309;

  --radius: 14px;
  --schatten: 0 1px 2px rgb(13 23 38 / .06), 0 6px 20px rgb(13 23 38 / .07);
  --kopf-hoehe: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0A1120;
    --flaeche: #131E31;
    --flaeche-2: #1C2A42;
    --schrift: #E9F0F8;
    --schrift-leise: #93A4BC;
    --linie: #24344F;

    --akzent: #27DE72;
    --akzent-stark: #4DE98C;
    --auf-akzent: #062012;

    --kern: #27DE72;
    --umland: #5AA9FF;
    --duisburg: #B79CE8;
    --warnung: #FBBF24;

    --schatten: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35);
  }
}

/* Der Umschalter in der App hat immer Vorrang vor der Systemeinstellung. */
:root[data-thema="hell"] {
  color-scheme: light;
  --grund: #F2F5F9; --flaeche: #FFFFFF; --flaeche-2: #E9EEF5;
  --schrift: #0D1726; --schrift-leise: #56657C; --linie: #D8E0EA;
  --akzent: #00963F; --akzent-stark: #007A33; --auf-akzent: #FFFFFF;
  --kern: #00963F; --umland: #1D6FD0; --duisburg: #7B5EA7; --warnung: #B45309;
  --schatten: 0 1px 2px rgb(13 23 38 / .06), 0 6px 20px rgb(13 23 38 / .07);
}
:root[data-thema="dunkel"] {
  color-scheme: dark;
  --grund: #0A1120; --flaeche: #131E31; --flaeche-2: #1C2A42;
  --schrift: #E9F0F8; --schrift-leise: #93A4BC; --linie: #24344F;
  --akzent: #27DE72; --akzent-stark: #4DE98C; --auf-akzent: #062012;
  --kern: #27DE72; --umland: #5AA9FF; --duisburg: #B79CE8; --warnung: #FBBF24;
  --schatten: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35);
}

* { box-sizing: border-box; }

/* Muss vor allen Layoutregeln stehen und darf nicht überstimmbar sein: eine
   eigene Klasse mit display:flex schlägt sonst das eingebaute [hidden], und
   ausgeblendete Bereiche blieben sichtbar. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--akzent); color: var(--auf-akzent); padding: .6rem 1rem;
}
.sprungmarke:focus { left: 0; }

/* ── Kopf ──────────────────────────────────────────────────────────────── */

.kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
  padding-top: env(safe-area-inset-top);
}

.kopf-innen {
  height: var(--kopf-hoehe);
  max-width: 780px; margin: 0 auto; padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

.marke { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Stilisierte Trillerpfeife: Scheibe mit angesetztem Mundstück. */
.marke-pfiff {
  width: 30px; height: 30px; flex: none; position: relative;
  background: var(--akzent); border-radius: 50% 50% 50% 4px;
}
.marke-pfiff::after {
  content: ""; position: absolute; inset: 9px 9px auto auto;
  width: 8px; height: 8px; border-radius: 50%; background: var(--grund);
}

.marke-text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.marke-text strong {
  font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase;
}
.marke-text small {
  font-size: .66rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--schrift-leise); margin-top: 3px;
}

.kopf-knoepfe { display: flex; gap: 2px; }

.ikone {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--schrift); cursor: pointer;
}
.ikone:hover { background: var(--flaeche-2); }
.ikone:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

:root[data-thema="dunkel"] .nur-hell,
:root:not([data-thema="hell"]) .nur-hell { display: none; }
:root[data-thema="hell"] .nur-dunkel { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-thema]) .nur-hell { display: block; }
  :root:not([data-thema]) .nur-dunkel { display: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema]) .nur-hell { display: none; }
  :root:not([data-thema]) .nur-dunkel { display: block; }
}

.ansichtzeile { max-width: 780px; margin: 0 auto; padding: 0 12px 10px; }
.segment-ansicht { max-width: 320px; }

.suchzeile {
  max-width: 780px; margin: 0 auto; padding: 0 12px 10px;
  display: flex; gap: 8px; align-items: center;
}
.suchzeile input { flex: 1; }

input[type="search"] {
  width: 100%; padding: .6rem .8rem;
  border: 1px solid var(--linie); border-radius: 10px;
  background: var(--flaeche); color: var(--schrift); font: inherit;
}
input[type="search"]:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent; }

.textknopf {
  border: 0; background: none; color: var(--schrift-leise);
  font: inherit; cursor: pointer; padding: .4rem;
}
.textknopf-betont { color: var(--akzent-stark); font-weight: 650; padding-left: 0; }
.textknopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 6px; }

/* Nur für Screenreader: sichtbar für Hilfsmittel, nicht auf dem Bildschirm. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.nach-oben {
  position: fixed; z-index: 15;
  right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--linie); border-radius: 50%;
  background: var(--flaeche); color: var(--schrift);
  box-shadow: var(--schatten); cursor: pointer;
}
.nach-oben:hover { border-color: var(--akzent); color: var(--akzent-stark); }
.nach-oben:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ── Ortsfilter ────────────────────────────────────────────────────────── */

.filter {
  max-width: 780px; margin: 0 auto; padding: 0 12px 10px;
  display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
}
.filter::-webkit-scrollbar { display: none; }

.chip {
  flex: none; cursor: pointer;
  padding: .36rem .72rem;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche); color: var(--schrift);
  font-size: .8rem; font-weight: 650; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .38rem;
}
.chip:hover { border-color: var(--akzent); }
.chip:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.chip[aria-pressed="true"] {
  background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent);
}
.chip .zahl { font-variant-numeric: tabular-nums; opacity: .65; font-weight: 600; }

/* ── Liste ─────────────────────────────────────────────────────────────── */

main { max-width: 780px; margin: 0 auto; padding: 12px; }

.hinweis {
  margin: 0 0 12px; padding: .65rem .85rem;
  border-left: 4px solid var(--warnung); border-radius: 8px;
  background: color-mix(in srgb, var(--warnung) 12%, var(--flaeche));
  font-size: .88rem;
}

.liste { display: flex; flex-direction: column; gap: 10px; }

.neuhinweis {
  margin: 0 0 12px; padding: .55rem .85rem;
  border-left: 4px solid var(--akzent); border-radius: 8px;
  background: color-mix(in srgb, var(--akzent) 12%, var(--flaeche));
  font-size: .86rem; font-weight: 650;
}

/* Datumstrenner. Klebt unter dem Kopf, damit man beim Scrollen weiß, wo man ist. */
.tagtrenner {
  position: sticky; top: var(--kopf-hoehe); z-index: 5;
  margin: .4rem 0 -2px; padding: .35rem 0;
  background: linear-gradient(var(--grund) 70%, transparent);
  font-size: .68rem; font-weight: 750; letter-spacing: .12em;
  text-transform: uppercase; color: var(--schrift-leise);
}
.tagtrenner:first-child { margin-top: 0; }

/* Gelesene Meldungen treten zurück, verschwinden aber nicht. */
.karte.gelesen { opacity: .58; }
.karte.gelesen:hover { opacity: .85; }
.karte.gelesen h2 { font-weight: 600; }

.neu-punkt {
  display: inline-block; width: .5rem; height: .5rem; flex: none;
  margin-right: .35rem; border-radius: 50%; background: var(--akzent);
  vertical-align: middle;
}

.karte {
  position: relative; display: block;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
  color: inherit; overflow: hidden;
}
.karte:hover { border-color: color-mix(in srgb, var(--akzent) 55%, var(--linie)); }
.karte:has(.karte-titel:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Der Titel ist der einzige Link, überzieht aber die ganze Karte. Dadurch
   bleibt die Fläche anklickbar, ohne die Vereinsknöpfe in einen Link zu
   sperren – Schaltflächen in einem Link wären ungültiges Markup. */
.karte-titel { color: inherit; text-decoration: none; }
.karte-titel::after { content: ""; position: absolute; inset: 0; }
.karte-titel:focus-visible { outline: none; }

/* Farbstreifen links zeigt die Zone auf einen Blick. */
.karte::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--zonenfarbe, var(--linie));
}
.karte[data-zone="kern"] { --zonenfarbe: var(--kern); }
.karte[data-zone="umland"] { --zonenfarbe: var(--umland); }
.karte[data-zone="duisburg"] { --zonenfarbe: var(--duisburg); }

.karte-innen { display: flex; gap: 12px; padding: 12px 12px 12px 16px; }

.karte-bild {
  width: 92px; height: 92px; flex: none;
  border-radius: 10px; object-fit: cover; background: var(--flaeche-2);
}

.karte-text { min-width: 0; flex: 1; }

.karte h2 {
  margin: 0 0 .3rem;
  font-size: 1.01rem; font-weight: 700; line-height: 1.32; letter-spacing: -.01em;
}

.karte p {
  margin: 0 0 .5rem;
  font-size: .87rem; color: var(--schrift-leise); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Muss über dem Titel-Überzug liegen, sonst sind die Knöpfe nicht erreichbar. */
.marken { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; position: relative; z-index: 1; }

.marke-etikett {
  font-size: .66rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
  padding: .16rem .42rem; border-radius: 5px;
  background: var(--flaeche-2); color: var(--schrift-leise);
}
.marke-etikett.ort { background: color-mix(in srgb, var(--zonenfarbe) 16%, transparent); color: var(--zonenfarbe); }
.marke-etikett.verein { background: color-mix(in srgb, var(--akzent) 16%, transparent); color: var(--akzent-stark); }
.marke-etikett.stern { background: var(--akzent); color: var(--auf-akzent); }

/* Vereinsmarken sind Schaltflächen: antippen nimmt den Verein auf oder heraus. */
.verein-knopf { border: 0; font-family: inherit; cursor: pointer; }
.verein-knopf:hover { filter: brightness(1.12); }
.verein-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.marke-etikett.schloss { background: color-mix(in srgb, var(--warnung) 18%, transparent); color: var(--warnung); }

.karte-fuss {
  margin-top: .45rem; font-size: .74rem; color: var(--schrift-leise);
  display: flex; gap: .4rem; flex-wrap: wrap;
}
.karte-fuss .quelle { font-weight: 650; }

/* ── Tabellenansicht ───────────────────────────────────────────────────── */

.untersicht { margin-bottom: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.untersicht .segment { max-width: 320px; flex: 1; min-width: 220px; }
.chip-nurmeine { flex: none; }

/* Macht sichtbar, dass gerade nicht alles gezeigt wird. */
.modushinweis {
  margin: 0 0 12px; padding: .55rem .85rem;
  border-left: 4px solid var(--akzent); border-radius: 8px;
  background: color-mix(in srgb, var(--akzent) 12%, var(--flaeche));
  font-size: .84rem; font-weight: 600;
}
.modushinweis .leise { font-weight: 400; color: var(--schrift-leise); }
.neuhinweis .leise { font-weight: 400; color: var(--schrift-leise); }

/* Stern in der Kopfzeile einer Tabellenkarte */
.liga-stern {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--linie); cursor: pointer;
}
.liga-stern:hover { background: var(--flaeche-2); }
.liga-stern:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.liga-stern[aria-pressed="true"] { color: var(--akzent); }
.liga-stern[aria-pressed="true"] svg { fill: currentColor; }
.mannschaft-kopf { padding-right: 52px; }

/* Eigene Vereine in einer Ligatabelle: der markierte Favorit kräftiger. */
table.liga tr.heimisch { background: color-mix(in srgb, var(--akzent) 10%, transparent) !important; font-weight: 700; }
table.liga tr.eigen { background: color-mix(in srgb, var(--akzent) 22%, transparent) !important; font-weight: 800; }

.liga-vereine { font-size: .78rem; color: var(--akzent-stark); font-weight: 650; margin-top: .2rem; }
.sportmarke { display: inline-block; margin: .25rem 0 .1rem; }

/* ── Spieltag ──────────────────────────────────────────────────────────── */

.partie-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .45rem; }
.partie-zeit {
  font-size: .78rem; font-weight: 750; color: var(--schrift-leise);
  font-variant-numeric: tabular-nums;
}

.live-marke {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .12rem .45rem; border-radius: 5px;
  background: color-mix(in srgb, var(--akzent) 20%, transparent);
  color: var(--akzent-stark);
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.live-punkt {
  display: inline-block; width: .45rem; height: .45rem; flex: none;
  border-radius: 50%; background: var(--akzent);
  animation: pulsieren 1.8s ease-in-out infinite;
}
#ansicht .live-punkt { margin-right: .35rem; }
@keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.partie-paarung {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .6rem; margin: .2rem 0 .35rem;
}
.partie-team { font-size: .94rem; font-weight: 700; line-height: 1.25; }
.partie-team.rechts { text-align: right; }
.partie-stand {
  font-size: 1.3rem; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
/* Ergebnis gemeldet, aber nicht lesbar: gedämpft statt fett, damit es nicht
   wie ein echter Spielstand aussieht. */
.partie-stand.verdeckt { font-size: 1.05rem; font-weight: 700; opacity: .55; }
.stand-notiz {
  margin: 0 0 .35rem; font-size: .78rem; line-height: 1.35; color: var(--schrift-leise);
}
.stand-notiz a { color: inherit; text-decoration: underline; }
#tabellensport { padding-left: 0; padding-right: 0; margin-bottom: 12px; }

.mannschaft {
  position: relative;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden;
}
.mannschaft::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--zonenfarbe, var(--linie));
}
.mannschaft[data-zone="kern"] { --zonenfarbe: var(--kern); }
.mannschaft[data-zone="umland"] { --zonenfarbe: var(--umland); }
.mannschaft[data-zone="duisburg"] { --zonenfarbe: var(--duisburg); }

.mannschaft-kopf { padding: 12px 12px 12px 16px; }
.mannschaft-kopf h2 { margin: 0 0 .18rem; font-size: 1.02rem; font-weight: 750; letter-spacing: -.01em; }
.mannschaft-liga { font-size: .78rem; color: var(--schrift-leise); }
.mannschaft-hinweis {
  margin-top: .35rem; padding: .35rem .5rem; border-radius: 6px;
  background: color-mix(in srgb, var(--warnung) 14%, transparent);
  color: var(--warnung); font-size: .74rem; font-weight: 600;
}

.stand { display: flex; gap: 14px; margin-top: .6rem; flex-wrap: wrap; }
.stand div { display: flex; flex-direction: column; }
.stand .wert { font-size: 1.16rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stand .bez {
  font-size: .62rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--schrift-leise); margin-top: 2px;
}

.mannschaft details { border-top: 1px solid var(--linie); }
.mannschaft summary {
  padding: .6rem 12px .6rem 16px; cursor: pointer;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--schrift-leise); list-style: none;
}
.mannschaft summary::-webkit-details-marker { display: none; }
.mannschaft summary::after { content: " ▾"; }
.mannschaft details[open] summary::after { content: " ▴"; }
.mannschaft summary:hover { color: var(--schrift); }

.tabellenrahmen { overflow-x: auto; }

table.liga {
  width: 100%; border-collapse: collapse; font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
table.liga th, table.liga td { padding: .34rem .45rem; text-align: right; white-space: nowrap; }
table.liga th {
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--schrift-leise); border-bottom: 1px solid var(--linie);
}
table.liga td:nth-child(1), table.liga th:nth-child(1) { padding-left: 16px; text-align: right; width: 1%; }
table.liga td:nth-child(2), table.liga th:nth-child(2) { text-align: left; white-space: normal; width: 99%; }
table.liga tbody tr:nth-child(even) { background: color-mix(in srgb, var(--flaeche-2) 55%, transparent); }
table.liga tr.eigen { background: color-mix(in srgb, var(--akzent) 15%, transparent) !important; font-weight: 750; }

.spielliste { list-style: none; margin: 0; padding: 0 12px 10px 16px; }
.spielliste li {
  display: flex; gap: .55rem; align-items: baseline;
  padding: .38rem 0; border-bottom: 1px solid var(--linie); font-size: .84rem;
}
.spielliste li:last-child { border-bottom: 0; }
.spielliste .wann { flex: none; width: 5.6rem; font-size: .72rem; color: var(--schrift-leise); font-variant-numeric: tabular-nums; }
.spielliste .paarung { flex: 1; min-width: 0; }
.spielliste .paarung .eigen { font-weight: 700; }
.spielliste .anmerkung { flex: none; font-size: .68rem; color: var(--warnung); font-weight: 700; }
.ereignis-zeichen { margin-right: .3rem; }
.ereignis-stand {
  flex: none; font-size: .74rem; font-weight: 750;
  font-variant-numeric: tabular-nums; color: var(--schrift-leise);
}

.spielliste a { color: var(--akzent-stark); text-decoration: none; font-size: .72rem; flex: none; }
.spielliste a:hover { text-decoration: underline; }

.mannschaft-fuss {
  padding: .6rem 12px .8rem 16px; border-top: 1px solid var(--linie);
  font-size: .74rem; color: var(--schrift-leise);
  display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
}
.mannschaft-fuss a { color: var(--akzent-stark); text-decoration: none; font-weight: 650; }
.mannschaft-fuss a:hover { text-decoration: underline; }

.leer { text-align: center; color: var(--schrift-leise); padding: 3rem 1rem; }

.fuss { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linie); color: var(--schrift-leise); font-size: .78rem; }
.fuss p { margin: .3rem 0; }
.fuss-klein { opacity: .8; }

/* ── Einstellungen ─────────────────────────────────────────────────────── */

.schleier { position: fixed; inset: 0; background: rgb(4 10 20 / .55); z-index: 30; }

.blatt {
  position: fixed; z-index: 40; inset: auto 0 0 0;
  max-height: 88vh; overflow-y: auto;
  background: var(--grund);
  border-top: 1px solid var(--linie);
  border-radius: 18px 18px 0 0;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
@media (min-width: 700px) {
  .blatt { inset: 0 0 0 auto; width: 420px; max-height: none; border-radius: 0; border-left: 1px solid var(--linie); }
}

.blatt-kopf {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 12px 12px 18px;
  background: var(--grund); border-bottom: 1px solid var(--linie);
}
.blatt-kopf h2 { margin: 0; font-size: 1.08rem; letter-spacing: -.01em; }

.blatt-inhalt { padding: 4px 18px 18px; }

.feld { padding: 18px 0; border-bottom: 1px solid var(--linie); }
.feld:last-child { border-bottom: 0; }
.feld h3 {
  margin: 0 0 .6rem; font-size: .72rem; font-weight: 750;
  letter-spacing: .13em; text-transform: uppercase; color: var(--schrift-leise);
}
.zaehler {
  margin-left: .4rem; padding: .1rem .4rem; border-radius: 5px;
  background: var(--akzent); color: var(--auf-akzent);
  font-size: .68rem; letter-spacing: .02em; text-transform: none;
}

.erklaerung { margin: .55rem 0 0; font-size: .8rem; color: var(--schrift-leise); line-height: 1.5; }

.segment { display: flex; gap: 4px; padding: 4px; background: var(--flaeche-2); border-radius: 10px; }
.segment button {
  flex: 1; border: 0; border-radius: 7px; padding: .5rem .4rem;
  background: transparent; color: var(--schrift-leise);
  font: inherit; font-size: .86rem; font-weight: 650; cursor: pointer;
}
.segment button[aria-checked="true"],
.segment button[aria-selected="true"] { background: var(--flaeche); color: var(--schrift); box-shadow: var(--schatten); }

.schalter { display: flex; align-items: center; gap: .7rem; cursor: pointer; font-size: .92rem; }
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter-spur {
  width: 44px; height: 26px; flex: none; border-radius: 999px;
  background: var(--flaeche-2); border: 1px solid var(--linie); position: relative; transition: background .15s;
}
.schalter-spur::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--flaeche);
  box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .15s;
}
.schalter input:checked + .schalter-spur { background: var(--akzent); border-color: var(--akzent); }
.schalter input:checked + .schalter-spur::after { transform: translateX(18px); }
.schalter input:focus-visible + .schalter-spur { outline: 2px solid var(--akzent); outline-offset: 2px; }

.vereinsliste,
.wahlliste { margin-top: .7rem; max-height: 300px; overflow-y: auto; border: 1px solid var(--linie); border-radius: 10px; }
.wahlliste { max-height: none; }

.vereinszeile {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .55rem .7rem; border: 0; border-bottom: 1px solid var(--linie);
  background: var(--flaeche); color: var(--schrift); font: inherit; text-align: left; cursor: pointer;
}
.vereinszeile:last-child { border-bottom: 0; }
.vereinszeile:hover { background: var(--flaeche-2); }
.vereinszeile .stern-ikone { color: var(--linie); flex: none; }
.vereinszeile[aria-pressed="true"] .stern-ikone { color: var(--akzent); fill: var(--akzent); }

/* Häkchenzeile: an heißt sichtbar, aus heißt ausgeblendet. */
.vereinszeile .haken-ikone { color: var(--linie); flex: none; }
.vereinszeile[aria-pressed="true"] .haken-ikone { color: var(--akzent); }
.vereinszeile[aria-pressed="false"] .vname { color: var(--schrift-leise); text-decoration: line-through; }

/* Sportartenzeile: links der Stern (Reihenfolge), rechts das Häkchen (sichtbar). */
.wahlzeile {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .5rem; border-bottom: 1px solid var(--linie); background: var(--flaeche);
}
.wahlzeile:last-child { border-bottom: 0; }
.wahlzeile .vname { flex: 1; min-width: 0; font-size: .88rem; font-weight: 600; }
.wahlzeile .vname.durchgestrichen { color: var(--schrift-leise); text-decoration: line-through; }
.wahlzeile .vort { font-size: .72rem; color: var(--schrift-leise); font-variant-numeric: tabular-nums; }

.zeilenknopf {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 0; border-radius: 8px; background: transparent; color: var(--linie); cursor: pointer;
}
.zeilenknopf:hover { background: var(--flaeche-2); }
.zeilenknopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.zeilenknopf[aria-pressed="true"] { color: var(--akzent); }
.zeilenknopf.stern-knopf[aria-pressed="true"] svg { fill: currentColor; }
.vereinszeile .vname { flex: 1; min-width: 0; font-size: .88rem; font-weight: 600; }
.vereinszeile .vort { font-size: .72rem; color: var(--schrift-leise); }

.quellenliste { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; }
.quellenzeile { display: flex; justify-content: space-between; gap: .8rem; color: var(--schrift-leise); }
.quellenzeile .status-ok { color: var(--akzent-stark); }
.quellenzeile .status-fehler { color: var(--warnung); }

.hauptknopf {
  margin-top: .8rem; width: 100%; padding: .7rem 1rem;
  border: 0; border-radius: 10px; background: var(--akzent); color: var(--auf-akzent);
  font: inherit; font-weight: 700; cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Unsichtbare Marke am Listenende: sobald sie in Sicht kommt, werden weitere
   Karten nachgelegt. Etwas Hoehe, damit der Beobachter sie zuverlaessig sieht. */
.nachschub { height: 1px; margin: 0; }