/* Design „Schwarz + Volt“ (Nike-Stil): tiefschwarzer Grund, Volt-Gelb als Akzent,
   große Überschriften in Anton, Texte in Archivo. Hell und Dunkel, Heimspiele immer schwarz. */
/* Beide Schriften liegen in der App selbst (SIL Open Font License, siehe /fonts/OFL-*.txt),
   damit beim Laden keine Daten an Google Fonts gehen. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/archivo-latin-wght-normal.woff2') format('woff2');
}

/* Hell */
:root {
  --bg: #f1f0eb;
  --card: #ffffff;
  --card2: #e8e7e1;
  --text: #0b0b0b;
  --muted: #65655f;
  --line: #deddd6;
  --field: #f7f6f2;
  --volt: #d4ff00;
  --on-volt: #0b0b0b;
  --acc: #0b0b0b;            /* Akzent-Text: im Hellen schwarz, im Dunkeln Volt */
  --warn: #6a3df0;           /* Violett: Gegenfarbe zu Volt (Absagen, Warnungen, Löschen) */
  --lilac: #a98bff;          /* Flieder-Fläche mit schwarzer Schrift (Absage, Hinweis-Zähler) */
  --danger: #6a3df0;
  --wa: #25d366;
  --radius: 24px;
  --shadow: none;
  --title-font: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --text-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --link: #0b0b0b;
  color-scheme: light;
}

/* Dunkel: entweder selbst gewählt (data-theme="dark") oder automatisch wie das Handy,
   solange nicht ausdrücklich "hell" gewählt ist. Heimspiel-Karten (.on-dark) sind immer dunkel. */
:root[data-theme="dark"],
.on-dark {
  --bg: #0a0a0a;
  --card: #161616;
  --card2: #222220;
  --text: #f4f4f0;
  --muted: #9c9c95;
  --line: #2c2c2a;
  --field: #1c1c1a;
  --acc: #d4ff00;
  --warn: #b9a2ff;
  --danger: #b9a2ff;
  --link: #d4ff00;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0a;
    --card: #161616;
    --card2: #222220;
    --text: #f4f4f0;
    --muted: #9c9c95;
    --line: #2c2c2a;
    --field: #1c1c1a;
    --acc: #d4ff00;
    --warn: #b9a2ff;
    --danger: #b9a2ff;
    --link: #d4ff00;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

/* Ausgeblendete Elemente bleiben ausgeblendet, auch wenn sie sonst display:flex o. ä. haben */
[hidden] { display: none !important; }

html, body { margin: 0; }

/* Nur der Inhalt scrollt, nicht die ganze Seite: Auf iPhones (iOS 26) wandert eine
   unten festgemachte Leiste beim Scrollen der Seite sonst mit nach oben. */
html { height: 100%; overflow: hidden; }

body {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: none;
  font-family: var(--text-font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }

svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
svg .fill { fill: currentColor; stroke: none; }
svg.bold { stroke-width: 3; }

@keyframes tbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Kopf: Logo + Mannschaft ---------- */

.topbar {
  max-width: 720px;
  margin: 0 auto;
  /* Genug Abstand nach oben: iPhones (iOS 26) blenden den obersten Streifen unter der Uhr weich aus */
  padding: calc(40px + env(safe-area-inset-top)) 20px 0;
}
.team-card { display: flex; align-items: center; gap: 10px; }
.team-logo { flex: none; width: 46px; height: 46px; object-fit: contain; mix-blend-mode: multiply; }
:root[data-theme="dark"] .team-logo { filter: invert(1); mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .team-logo { filter: invert(1); mix-blend-mode: screen; }
}
.team-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.team-name {
  font: 400 18px/1 var(--title-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-tag { font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.icon-btn {
  background: none;
  color: var(--text);
  padding: 8px;
  min-height: 0;
  border-radius: 50%;
}
.theme-btn {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  background: var(--card);
  border: 1px solid var(--line);
}

/* Testmodus-Hinweis unter dem Kopf, auf jeder Seite */
.test-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--lilac);
  color: #0b0b0b;
  font-size: 13px;
  line-height: 1.35;
}
.test-banner > strong { font-size: 14px; }
/* Staging-Umgebung: gleicher Streifen, aber in Volt, damit man die Testversion sofort von der echten App unterscheidet */
.staging-banner { background: var(--volt); }
/* Staging: Logo auf gelbem Kreis – auch im dunklen Modus schwarz auf Gelb, nicht invertiert */
:root[data-staging] .team-logo { background: var(--volt); border-radius: 50%; padding: 5px; mix-blend-mode: normal; filter: none; }

main { max-width: 720px; margin: 0 auto; padding: 0 16px 16px; animation: tbIn 0.3s ease; }

/* ---------- Ansichtsmodus: Super-Admin sieht die App als andere Person ---------- */
/* Flieder wie bei Hinweisen/Absagen (immer schwarze Schrift), klebt oben beim Scrollen – der Rückweg zum eigenen Konto */
.impersonation-bar {
  position: sticky;
  top: calc(6px + env(safe-area-inset-top));
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  width: calc(100% - 32px);
  max-width: 688px;
  margin: 12px auto 4px;
  padding: 10px 14px;
  background: var(--lilac);
  color: #0b0b0b;
  font-size: 14px;
  line-height: 1.35;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.impersonation-bar .imp-text { flex: 1 1 240px; min-width: 0; }
.impersonation-bar button { flex: none; margin-left: auto; background: #0b0b0b; color: #f4f4f0; }

/* ---------- Offline: zuletzt geladener Stand ---------- */
.offline-bar {
  position: sticky;
  top: calc(6px + env(safe-area-inset-top));
  z-index: 29;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: calc(100% - 32px);
  max-width: 688px;
  margin: 12px auto 4px;
  padding: 10px 14px;
  background: #f2c94c;
  color: #0b0b0b;
  font-size: 13px;
  line-height: 1.35;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.offline-bar > strong { font-size: 14px; }

/* ---------- Überschriften ---------- */

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 22px 4px 16px; }
.page-title {
  margin: 0;
  font: 400 64px/0.86 var(--title-font);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 360px) { .page-title { font-size: 52px; } }

.schedule-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
}
button.schedule-link { background: none; min-height: 0; font-family: var(--text-font); }
@media print { .schedule-link { display: none; } }

/* Offizieller Spielplan (Dialog nach Tipp auf „Spielplan“): eine Zeile je Spiel, Heimspiele mit Volt-Strich */
.lg-list { list-style: none; margin: 0; padding: 0; }
.lg-game { display: flex; gap: 12px; padding: 12px 0 12px 10px; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; }
.lg-game:last-child { border-bottom: 0; }
.lg-game.lg-home { border-left-color: var(--volt); }
.lg-when { flex: none; width: 76px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.2; }
.lg-when span { color: var(--muted); }
.lg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lg-title { display: flex; align-items: center; gap: 8px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.lg-title .tag { flex: none; }
.lg-pair { line-height: 1.3; overflow-wrap: anywhere; }
.lg-own { color: var(--text); font-weight: 800; }
.lg-hall a.place-link { font-weight: 500; }
.lg-error { margin-bottom: 10px; border-left-color: var(--lilac); }
.lg-stand { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin: 0 0 10px; }
.lg-stand a { font-weight: 700; }

/* kleine Zwischenüberschrift in Versalien mit Sperrung */
.sec-label, h2.sec-label {
  font-family: var(--text-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 22px 4px 10px;
}
.lead { margin: -6px 4px 14px; font-size: 14px; font-weight: 600; }

h2 { font-size: 19px; margin: 24px 0 12px; }
h3 { font-size: 17px; margin: 0 0 6px; }
h3, h4 { font-weight: 800; }

.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.warn-text { color: var(--warn); }

/* ---------- Karten ---------- */

.card {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.card.highlight { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.card.past { opacity: 0.6; }
.on-dark { background: #0b0b0b; color: var(--text); }
.card.on-dark { border-color: #2c2c2a; }

/* Kopf einer Karte: Datumsspalte | Titel, Untertitel, Zeit | › */
.tb-head {
  display: flex;
  gap: 14px;
  align-items: center;
  width: 100%;
  text-align: left;
  color: inherit;
}
button.tb-head {
  background: none;
  padding: 0;
  min-height: 0;
  border-radius: 0;
  font-weight: inherit;
  justify-content: flex-start;
}
button.tb-head:active { transform: none; opacity: 0.8; }
.dcol {
  width: 58px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-right: 1px solid var(--line);
  padding-right: 12px;
}
.dcol .dow { font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.1em; color: var(--muted); }
.dcol .day { font: 400 38px/1 var(--title-font); }
.dcol .mon { font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0.1em; color: var(--muted); }
.tb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.tb-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-title { font: 400 24px/1 var(--title-font); letter-spacing: 0.01em; text-transform: uppercase; }
.tb-sub { font-size: 14px; font-weight: 700; line-height: 1.2; }
.tb-time { font-size: 13px; font-weight: 600; line-height: 1.2; }
.tb-meta { font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--muted); }
.tb-meta a.place-link { color: inherit; }
.chev { width: 18px; height: 18px; stroke-width: 2.4; flex: none; opacity: 0.6; }

.tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
  padding: 5px 7px;
  border-radius: 6px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.tag.volt { background: var(--volt); color: var(--on-volt); border-color: var(--volt); }
.tag.warn { background: var(--lilac); color: #0b0b0b; border-color: var(--lilac); }

/* Zeiten: Treffen | Beginn | Ende in großen Ziffern */
.times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 12px 0;
}
.times.times3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.times > div { padding: 12px 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.times > div + div { border-left: 1px solid var(--line); padding-left: 12px; }
.times b { font: 400 26px/1 var(--title-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.times.times3 > div:nth-child(2) b { color: var(--acc); }
.times span { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.times span a.place-link { text-transform: none; letter-spacing: 0; font-size: 13px; }

.game-card .gc-body { margin-top: 4px; }
.role-big { font: 400 24px/1 var(--title-font); text-transform: uppercase; margin: 4px 0 2px; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 8px; }
.date { font-weight: 700; }

.pill {
  display: inline-block;
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--card2);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}
.pill.home { background: var(--volt); color: var(--on-volt); }
.pill.away { background: var(--card2); color: var(--muted); }
.pill.excused { background: var(--card2); color: var(--text); }
.pill.unexcused { background: transparent; box-shadow: inset 0 0 0 1.5px var(--warn); color: var(--warn); }
.coach-pick { display: flex; flex-wrap: wrap; gap: 0 16px; }

.duty-list { list-style: none; margin: 8px 0 0; padding: 0; }
.duty-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.duty-list li.me { font-weight: 700; }
.duty-list li.me .who::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--volt); margin-right: 6px; }
.duty-list .who { text-align: right; }
.duty-list .empty { color: var(--warn); font-weight: 600; }

/* ---------- Knöpfe & Felder ---------- */

button, .btn {
  font: inherit;
  font-weight: 800;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  min-height: 46px;
  background: var(--volt);
  color: var(--on-volt);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
}
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: default; }
.btn.secondary, button.secondary { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; }
.btn.wa, button.wa { background: var(--wa); color: #06361a; }
.btn.ok, button.ok { background: var(--volt); color: var(--on-volt); }
.btn.danger, button.danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1.5px var(--danger); }
.btn.small, button.small { padding: 7px 14px; min-height: 36px; font-size: 14px; }
button.link { background: none; color: var(--link); padding: 4px 6px; min-height: 0; font-weight: 700; text-decoration: underline; box-shadow: none; }
.full { width: 100%; }
.grow { flex: 2; }

/* Auswahl-Chips (z. B. Grund für eine Absage) */
button.chip {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
button.chip.on { background: var(--volt); color: var(--on-volt); box-shadow: none; }

label { display: block; font-weight: 700; font-size: 14px; margin: 12px 0 4px; }
input, select, textarea {
  font: inherit;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--field);
  color: var(--text);
}
textarea { min-height: 120px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acc); outline-offset: 1px; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
/* Suchfeld über Personenlisten (Eltern, Spieler, Kader) */
.person-search { margin: 0 0 10px; }
.person-search-empty { margin: 0 0 10px; }
.check input { width: auto; }

/* ---------- Leiste unten: schwebende schwarze Pille ---------- */

.tabs {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 5;
  max-width: 560px;
  margin: 0 auto;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 0 8px;
  background: #0b0b0b;
  border: 1px solid #262624;
  border-radius: 33px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
.tabs button {
  position: relative;
  flex: none;
  height: 50px;
  min-height: 0;
  padding: 0 14px;
  gap: 8px;
  border-radius: 25px;
  background: transparent;
  color: #8e8e88;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.tabs .ico { display: grid; place-items: center; }
.tabs .ico svg { width: 22px; height: 22px; }
.tabs .lbl { display: none; }
.tabs button.active { background: var(--volt); color: var(--on-volt); }
.tabs button.active .lbl { display: inline; }
@media (max-width: 360px) { .tabs button { padding: 0 11px; } }
.badge {
  position: absolute;
  top: 4px;
  left: 28px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--lilac);
  color: #0b0b0b;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

/* ---------- Dialoge als Blatt von unten, Hinweise ---------- */

dialog {
  border: 0;
  border-radius: 30px;
  padding: 0;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card);
  color: var(--text);
}
/* Solange ein Fenster offen ist, steht die Seite dahinter still. Sonst scrollen zwei Ebenen ineinander, und iPhones
   ordnen ein Antippen im Fenster dann teils dem falschen Feld zu (z. B. in der Live-Statistik eine Zeile tiefer). */
body:has(> dialog[open]) { overflow: hidden; }
@media (max-width: 600px) {
  dialog {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: 30px 30px 0 0;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    animation: tbIn 0.25s ease;
  }
  dialog form { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}
dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
dialog form { padding: 12px 20px 22px; }
dialog form::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 14px; }
dialog h2, dialog h3 { font: 400 28px/1 var(--title-font); text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 8px; }
dialog h4 { margin: 12px 0 0; }
dialog .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
dialog .row > button:not(.small):not(.chip) { flex: 1; }

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(100px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  background: var(--volt);
  color: #0b0b0b;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.3;
  padding: 14px 16px;
  border-radius: 18px;
  z-index: 20;
  max-width: calc(100vw - 48px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: tbIn 0.25s ease;
}
#toast.error { background: var(--lilac); }

.login { max-width: 420px; margin: 24px auto; }
.login .big { font-size: 22px; letter-spacing: 0.3em; text-align: center; }

details.section { margin-bottom: 12px; }
details.section > summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 16px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  list-style: none;
}
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::after { content: '›'; float: right; font-size: 22px; line-height: 1; transition: transform 0.2s; }
details.section[open] > summary::after { transform: rotate(90deg); }
details.section > .inner { padding: 12px 2px 4px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 7px 4px; border-top: 1px solid var(--line); vertical-align: top; }
.assign-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 10px; }
.assign-grid label { margin: 0; font-weight: 400; font-size: 13px; color: var(--muted); }
@media (min-width: 560px) { .assign-grid { grid-template-columns: 1fr 1fr; } }
.hint { background: var(--card2); color: var(--text); border-left: 4px solid var(--volt); border-radius: 14px; padding: 12px 14px; font-size: 14px; }

.cat-list li.cat-item { display: block; padding: 10px 0; }

/* Umschalter (Liste | Kalender, Meine | Dienstplan | Tausch, …) */
.seg { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.seg button {
  background: transparent;
  color: var(--text);
  min-height: 36px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
}
.seg button.on { background: var(--text); color: var(--bg); }
.seg.seg-full { display: flex; margin-bottom: 14px; }
.seg.seg-full button { flex: 1; min-height: 40px; padding: 6px 8px; }
.seg-badge { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; border-radius: 9px; background: var(--lilac); color: #0b0b0b; font-size: 11px; padding: 0 5px; }

/* Dienstliste als Tabelle */
.duty-table { font-size: 14px; }
.duty-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); border-top: 0; }
.duty-table td { border-top: 0; }
.duty-table tr.newday td { border-top: 1px solid var(--line); padding-top: 10px; }
.duty-table tr.me td { background: var(--volt); color: var(--on-volt); }
.duty-table tr.past { opacity: 0.55; }
.duty-table .empty { color: var(--warn); font-weight: 600; }
.nowrap { white-space: nowrap; }
.print-only { display: none; }

/* Drucken / als PDF sichern: nur die Liste, schwarz auf weiß */
@media print {
  :root, :root[data-theme="dark"] {
    --bg: #fff; --card: #fff; --text: #000; --muted: #444; --line: #bbb; --volt: #e6f5a0; --shadow: none;
  }
  html, body { height: auto; overflow: visible; }
  body { padding: 0; background: #fff; }
  .topbar, .tabs, .no-print, .page-head, .page-title, #toast, dialog { display: none !important; }
  main { max-width: none; padding: 0; animation: none; }
  .card { border: 0; }
  .card.print-plain { padding: 0; }
  .print-only { display: block; margin-bottom: 8px; }
  .duty-table { font-size: 11pt; }
  .duty-table tr { break-inside: avoid; }
}

/* ---------- Dienste ---------- */

.duty-card, .plan-card, .ev-card { display: flex; flex-direction: column; gap: 12px; }
.duty-card .tb-main .tag { margin-bottom: 2px; }
.duty-actions { display: flex; gap: 8px; }
.duty-actions button { flex: 1; min-height: 46px; }
.duty-actions button.ok { flex: 2; }
.duty-card > button.small { align-self: flex-start; }

.plan-card .times { margin: 0; }
.duty-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.duty-chip { background: var(--card2); color: var(--text); border-radius: 10px; padding: 7px 10px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.duty-chip.me { background: var(--volt); color: var(--on-volt); }
.duty-chip.me button.link { color: var(--on-volt); }
.duty-chip.empty { background: transparent; box-shadow: inset 0 0 0 1.5px var(--warn); color: var(--warn); }

/* Tauschanfrage */
.swap-card { background: #0b0b0b; color: #f4f4f0; border-color: #2c2c2a; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
.swap-card .small { color: #9c9c95; }
.swap-title { font: 400 28px/1 var(--title-font); text-transform: uppercase; }
.swap-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.swap-grid > div { background: #222220; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.swap-grid span { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #9c9c95; }
.swap-grid b { font-size: 14px; font-weight: 800; line-height: 1.2; }
.swap-grid small { font-size: 12px; color: #9c9c95; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swap-grid svg { width: 22px; height: 22px; stroke: #d4ff00; stroke-width: 2.4; }
.swap-actions { width: 100%; display: flex; gap: 8px; }
.swap-actions button { flex: 1; }
.swap-actions button.ok { flex: 2; }
.swap-actions button.secondary { color: #f4f4f0; box-shadow: inset 0 0 0 1.5px #3a3a37; }

/* Dienst bestätigen (Sammelhinweis oben) */
.confirm { margin-top: 10px; padding: 12px 14px; border-radius: 18px; }
.confirm.todo { background: var(--card2); border-left: 4px solid var(--volt); }
.confirm.todo .small { display: block; margin-top: 2px; }
.confirm.ok { background: var(--volt); color: var(--on-volt); font-weight: 700; }

/* Login vergessen */
.forgot > summary { cursor: pointer; list-style: none; }
.forgot > summary::-webkit-details-marker { display: none; }
.forgot .choice { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.forgot .choice legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.forgot .choice label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; cursor: pointer; }
.forgot .choice input { width: auto; margin: 0; }

/* Hilfe-Links beim Dienst (z. B. Anschreiben) */
.role-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.role-links .small.muted { flex-basis: 100%; }
@media print { .role-links { display: none; } }

/* Abgleich mit dem offiziellen Spielplan */
.sync-change { padding: 10px 0; border-top: 1px solid var(--line); }
.sync-change:first-of-type { border-top: 0; }
.error-text { color: var(--danger); }

/* Anleitung „Zum Home-Bildschirm“ */
.install-steps ol { padding-left: 22px; margin: 8px 0; }
.install-steps li { margin: 6px 0; line-height: 1.4; }

/* Mehrere WhatsApp-Knöpfe (je Elternteil) untereinander */
.wa-stack { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }

/* Regeln für die Dienste */
.rules { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px; }
.rules li { display: flex; gap: 10px; align-items: flex-start; }
.rules-ico { font-size: 20px; line-height: 1.2; flex: none; }
.rules-card summary { cursor: pointer; }

/* Einwilligung */
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 8px 0; }
.check input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--volt); }
.consent ul { padding-left: 20px; margin: 6px 0 10px; }

/* ---------- Profil ---------- */

.hero-card { background: #0b0b0b; color: #f4f4f0; border-color: #2c2c2a; border-radius: 28px; padding: 20px; position: relative; overflow: hidden; }
.hero-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: #9c9c95; margin-bottom: 8px; }
.hero-name { font: 400 40px/0.95 var(--title-font); text-transform: uppercase; margin-bottom: 6px; }
.hero-name + .hero-name { color: #d4ff00; }
.hero-sub { color: #9c9c95; margin-top: 8px; }

/* ---------- Termine ---------- */

/* Volt-Hinweis: „3 Termine warten auf eure Antwort“ */
.pending-banner { display: flex; align-items: flex-start; gap: 14px; background: var(--volt); color: #0b0b0b; border-radius: 22px; padding: 16px 18px; margin-bottom: 4px; }
.pending-banner .num { font: 400 44px/1 var(--title-font); }
.pending-banner div { display: flex; flex-direction: column; gap: 3px; }
.pending-banner b { font-size: 15px; font-weight: 800; line-height: 1.2; }
.pending-banner span { font-size: 13px; font-weight: 500; line-height: 1.3; }
.pending-banner > div { min-width: 0; flex: 1; }
.pending-jumps { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
button.pending-jump {
  display: block; width: 100%; min-height: 40px; padding: 9px 12px; border-radius: 12px; text-align: left;
  background: #0b0b0b; color: #f4f4f0; font-size: 14px; font-weight: 600; line-height: 1.25;
}
button.pending-jump b { font-weight: 800; color: #d4ff00; }
button.pending-jump span { display: inline; font-size: inherit; }

/* Karte, bei der eure Antwort fehlt: Volt-Rahmen wie der Hinweis oben; kurz aufleuchten nach dem Sprung */
.ev-card.needs-answer { border-color: var(--volt); box-shadow: inset 0 0 0 2px var(--volt); }
.ev-card { scroll-margin-top: 16px; }
.ev-card.flash { animation: ev-flash 1.6s ease-out; }
@keyframes ev-flash { 0%, 40% { box-shadow: inset 0 0 0 2px var(--volt), 0 0 0 6px var(--volt); } 100% { box-shadow: inset 0 0 0 2px var(--volt), 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .ev-card.flash { animation: none; } }

.ev-card.cancelled .tb-title { text-decoration: line-through; opacity: 0.7; }
.ev-loc { margin: -4px 0 0 72px; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-loc a.place-link { color: inherit; font-weight: 500; }
.ev-cancelled { background: var(--card2); border-radius: 14px; padding: 10px 12px; font-weight: 800; color: var(--warn); }
.ev-open { color: var(--warn); font-weight: 700; }

/* Balken dabei | vielleicht | nein und Zahlen */
button.ev-counts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  width: 100%;
  padding: 0;
  min-height: 0;
  background: none;
  color: var(--muted);
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
button.ev-counts:active { transform: none; }
.ev-bar { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--card2); }
.ev-bar i { display: block; }
.ev-bar i.ja { background: var(--volt); }
.ev-bar i.vielleicht { background: var(--text); opacity: 0.55; }
.ev-bar i.nein { background: var(--lilac); }
.ev-nums { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ev-nums b { color: var(--text); }
.q { font-size: 20px; font-weight: 800; line-height: 1; }

/* Antworten der eigenen Kinder: Name, Status, drei runde Knöpfe */
.ev-mine { border-top: 1px solid var(--line); padding-top: 2px; }
.ev-player { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 0; }
.ev-player + .ev-player { border-top: 1px solid var(--line); margin-top: 10px; }
.ev-player.own .ev-name b::after { content: ' · euer Kind'; font-weight: 400; color: var(--muted); font-size: 13px; }
.ev-name { min-width: 0; font-size: 15px; line-height: 1.25; }
.ev-name b { font-weight: 800; }
.ev-status { font-size: 12px; font-weight: 700; }
.ev-status.st-ja { color: var(--acc); }
.ev-status.st-nein { color: var(--warn); }
.ans { display: flex; gap: 8px; flex: none; }
.ans-btn {
  width: 48px;
  height: 48px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.on-dark .ans-btn { box-shadow: inset 0 0 0 1.5px #3a3a37; }
.ans-btn svg { width: 20px; height: 20px; }
.ans-btn .q { font-size: 19px; }
.ans-btn.ja.on { background: var(--volt); color: #0b0b0b; box-shadow: none; }
.ans-btn.vielleicht.on { background: var(--text); color: var(--bg); box-shadow: none; }
.ans-btn.nein.on { background: var(--lilac); color: #0b0b0b; box-shadow: none; }
.ans-btn:disabled { opacity: 0.55; }
.ev-actions { margin-top: 2px; }
/* Trainer-Knöpfe in der Terminkarte: abgesetzter Kasten, damit sie nicht wie die Zu-/Absage fürs eigene Kind wirken */
.coach-box { margin-top: 14px; padding: 10px 12px 12px; border: 1.5px dashed var(--line); border-radius: 18px; background: var(--card2); }
.coach-box .coach-label { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.coach-box .coach-label::before { content: "🔒 "; }
.coach-box .ev-actions { margin-top: 0; }
.coach-box .ev-trainer { margin: 0 0 10px; }
.on-dark .coach-box { background: #1c1c1a; border-color: #3a3a37; }
.on-dark .coach-box .coach-label { color: #9c9c95; }

/* große Knöpfe DABEI | VIELLEICHT | NEIN in der Termin-Ansicht */
.own-answer { margin: 18px 0 6px; }
.own-answer .sec-label { margin: 0 0 10px; }
.ans.big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.ans.big .ans-btn { width: auto; height: 64px; border-radius: 20px; font: 400 20px/1 var(--title-font); letter-spacing: 0.03em; }
@media (max-width: 360px) { .ans.big .ans-btn { font-size: 16px; } }

/* Termin-Ansicht: großer Kopf mit Titel bzw. TELBECK VS GEGNER */
.ev-detail .detail-hero { margin: 0 -20px; padding: 0 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.ev-detail .detail-hero.on-dark { background: #0b0b0b; margin-top: -12px; padding-top: 12px; border-radius: 30px 30px 24px 24px; }
.ev-detail .detail-hero .tag { align-self: flex-start; font-size: 11px; padding: 6px 9px; margin-top: 4px; }
.close-btn { width: 40px; height: 40px; padding: 0; font-size: 16px; font-weight: 800; box-shadow: inset 0 0 0 1px var(--line); }
.hero-title { font: 400 64px/0.86 var(--title-font); text-transform: uppercase; overflow-wrap: anywhere; }
.hero-team { font: 400 56px/0.9 var(--title-font); }
.hero-vs { font: 400 22px/1 var(--title-font); color: var(--volt); }
.hero-opp { font: 400 38px/0.95 var(--title-font); text-transform: uppercase; overflow-wrap: anywhere; }
.ev-detail .times { margin: 4px 0 0; }
.route { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.route-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--card2); display: grid; place-items: center; flex: none; }
.route-ico svg { width: 20px; height: 20px; }
.route > span:last-child { display: flex; flex-direction: column; gap: 3px; font-size: 15px; line-height: 1.2; }
.route small { font-size: 12px; font-weight: 600; color: var(--muted); }

.squad-box { margin: 14px 0 0; display: flex; flex-direction: column; gap: 12px; }
.box-title { font: 400 26px/1 var(--title-font); }
.squad-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.squad-grid > div { background: var(--card2); border-radius: 14px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.squad-grid .ini { font: 400 24px/1 var(--title-font); }
.squad-grid small { font-size: 11px; font-weight: 600; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ev-group { margin-top: 16px; }
.ev-group > summary {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding: 0 0 8px;
  cursor: pointer;
  list-style: none;
}
.ev-group > summary::-webkit-details-marker { display: none; }
.ev-group > summary span { display: flex; align-items: center; gap: 8px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); }
.dot.st-ja { background: var(--volt); }
.dot.st-vielleicht { background: var(--muted); }
.dot.st-nein { background: var(--lilac); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.person-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 5px; font-size: 13px; font-weight: 600; line-height: 1; }
.person-chip .ini { width: 26px; height: 26px; border-radius: 50%; background: var(--card2); display: grid; place-items: center; font: 400 12px/1 var(--title-font); }
.person-chip.own { border-color: var(--acc); }

/* Nominierung */
.grid2, .grid3 { display: grid; gap: 0 10px; }
.grid2 { grid-template-columns: 1fr 1fr; }
.grid3 { grid-template-columns: 1fr 1fr 1fr; }
.nom-bar { margin: 14px 0 6px; }
#nom-count.over { color: var(--danger); }
.nom-list { max-height: 45vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 16px; }
.guest-add { margin-top: 8px; gap: 6px; flex-wrap: wrap; }
.guest-add input { flex: 1 1 140px; min-width: 0; }
.nom-row { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; font-weight: 400; }
.nom-row + .nom-row { border-top: 1px solid var(--line); }
.nom-row input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--volt); }
.nom-row.st-nein { opacity: 0.6; }
.reason-chips { gap: 8px; }
.sheet-title { font: 400 30px/1 var(--title-font); text-transform: uppercase; }

/* Kader: Spielerkarten im 2er-Raster (Trainer zum Bearbeiten, alle anderen zum Ansehen) */
.player-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (min-width: 560px) { .player-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
button.player-card,
div.player-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 14px;
  text-align: left;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 22px;
  font-weight: 400;
}
button.player-card.past { opacity: 0.55; }
div.player-card.own { border-color: var(--volt); }
.pc-ini { font: 400 44px/0.9 var(--title-font); }
/* Spielerfotos: rund statt Initialen bzw. Trikotnummer */
img.pc-ini { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--card2); }
.person-chip img.ini { object-fit: cover; padding: 0; }
.squad-grid img.ini { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--card); }
.photo-field { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; }
.photo-preview { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--card2); display: grid; place-items: center; font: 400 26px/1 var(--title-font); color: var(--muted); }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
label.photo-pick { margin: 0; }
/* Ausschnitt wählen (Zoomen und Verschieben) */
.crop-dialog form { display: flex; flex-direction: column; align-items: center; }
.crop-dialog form > .row { align-self: stretch; }
.crop-stage { display: block; border-radius: 16px; touch-action: none; cursor: grab; background: #fff; }
.crop-stage:active { cursor: grabbing; }
.crop-zoom { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 300px; margin-top: 14px; font-weight: 800; color: var(--muted); }
.crop-zoom input { flex: 1; accent-color: var(--volt); }
.jersey { font: 400 0.95em/1 var(--title-font); color: var(--muted); letter-spacing: 0.02em; }
.grid-name-nr { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 10px; }
.pc-name { font-size: 14px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.pc-fam { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-stat { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; opacity: 0.8; margin-top: 4px; }
.pc-bar { display: block; height: 5px; border-radius: 3px; background: var(--card2); overflow: hidden; }
.pc-bar i { display: block; height: 100%; background: var(--volt); border-radius: 3px; }
.pc-nom { font-size: 11px; font-weight: 600; opacity: 0.8; }
.squad-table { width: 100%; border-collapse: collapse; }
.squad-table th, .squad-table td { padding: 8px 6px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.squad-table th { font-size: 13px; color: var(--muted); border-top: 0; }
.series-row { padding: 8px 0; border-top: 1px solid var(--line); }

/* Monatskalender */
.cal-card { padding: 12px; }
.cal-nav { margin-bottom: 8px; }
.cal-nav b { font: 400 22px/1 var(--title-font); text-transform: uppercase; }
.cal-nav .icon-btn { font-size: 26px; width: 40px; height: 40px; box-shadow: inset 0 0 0 1px var(--line); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.cal-wd { text-align: center; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); padding: 4px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-cell { min-height: 64px; padding: 2px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.cal-cell.other { opacity: 0.45; }
.cal-cell.today { background: var(--card2); }
.cal-cell.today .cal-day { font-weight: 800; color: var(--acc); }
.cal-day { font-size: 12px; text-align: right; padding-right: 2px; }
button.cal-chip, span.cal-chip {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 1px 3px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  background: var(--volt);
  color: #0b0b0b;
}
span.cal-chip { display: inline-block; width: auto; }
.cal-chip.training { background: var(--card2); color: var(--text); }
.cal-chip.cancelled { background: transparent; color: var(--muted); text-decoration: line-through; }
.cal-chip.open { box-shadow: inset 0 0 0 2px var(--lilac); }
.grid2 > *, .grid3 > * { min-width: 0; }
.grid2 input, .grid3 input { min-width: 0; padding-left: 10px; padding-right: 6px; }

/* Ort als Link zu Google Maps */
a.place-link { color: var(--link); font-weight: 600; text-decoration: none; }
a.place-link .maps-go { font-size: 0.85em; opacity: 0.8; }
.times a.place-link { display: inline; }

hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
dialog .row > button.grow { flex: 2; }
dialog .row > button.close-btn { flex: none; }
.duty-actions button.secondary:disabled { opacity: 0.7; font-size: 14px; }

/* Eltern: welches Kind übernimmt den Dienst (Anschreiben) */
.kid-pick { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.kid-pick select { flex: 1; min-width: 160px; margin: 0; }
/* Admin → Spieler: Zugang */
.access-line { margin-top: 2px; }

/* Trainer-Dashboard: Anwesenheit */
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.stat-tile { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat-tile b { font: 400 28px/1 var(--title-font); }
.stat-tile span { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.stat-tile.warn { border-color: var(--warn); }
.pres-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.pres-name { min-width: 0; overflow-wrap: anywhere; }
.pres-rate { flex: none; width: 76px; display: flex; flex-direction: column; gap: 5px; text-align: right; }
.pres-rate b { font: 400 20px/1 var(--title-font); }
.pres-row.low .pres-rate b { color: var(--warn); }
.pres-row.low .pc-bar i { background: var(--warn); }
.pres-dots { display: flex; gap: 4px; margin-top: 6px; }
.pd { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--muted); }
.pd.on { background: var(--volt); border-color: var(--volt); }
.pd.miss { border-color: var(--warn); background: var(--warn); border-radius: 2px; }

/* Spielbericht und Statistik */
.tag.score { font: 400 13px/1 var(--title-font); letter-spacing: 0.04em; padding: 4px 7px; }
.tag.score.sieg { background: var(--volt); color: var(--on-volt); border-color: var(--volt); }
.tag.score.niederlage { background: var(--lilac); color: #0b0b0b; border-color: var(--lilac); }
.report-box { margin: 14px 0 0; }
.final-score { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin: 6px 0 2px; }
.final-score b { font: 400 56px/1 var(--title-font); }
.final-score span { font: 400 30px/1 var(--title-font); color: var(--muted); }
.times.quarters { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 6px 0 10px; }
.times.quarters b { font-size: 20px; }
.stats-table { font-size: 14px; }
.stats-table th.n, .stats-table td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-table th, .stats-table td { padding: 7px 5px; }
.stats-table td.out { color: var(--warn); font-weight: 700; }
.stats-table tr.muted td { color: var(--muted); }
.stats-table tr[data-player-stats] { cursor: pointer; }
.stats-table button.link { padding: 0; text-align: left; }
.table-scroll { overflow-x: auto; margin: 0 -6px; }

/* Live-Statistik im Spiel: pro Spieler fünf Tipp-Felder (Antippen = +1, im Korrektur-Modus −1) */
.live-quarters { margin-bottom: 10px; }
.live-undo { margin: 0 0 8px; }
.live-list { display: flex; flex-direction: column; }
.live-row { padding: 8px 0; }
.live-row + .live-row { border-top: 1px solid var(--line); }
.live-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; min-width: 0; }
.live-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.live-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: 4px 0; border-radius: 12px; border: 1px solid var(--volt);
  background: var(--volt); color: var(--on-volt);
}
.live-cell.minus { background: var(--lilac); border-color: var(--lilac); color: #0b0b0b; }
.live-cell small { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; opacity: 0.75; }
.live-cell b { font: 400 24px/1 var(--title-font); font-variant-numeric: tabular-nums; }
.live-undo-on .live-cell { background: var(--card2); border: 2px dashed var(--warn); color: var(--text); }

/* ---------- Nutzungsstatistik (Admin, nur Super-Admin) ---------- */
.usage-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.usage-stat { background: var(--card2); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.usage-stat b { font: 400 30px/1 var(--title-font); letter-spacing: 0.02em; }
.usage-stat b .of { font-size: 16px; color: var(--muted); margin-left: 2px; }
.usage-stat span { font-size: 12px; color: var(--muted); line-height: 1.25; }
@media (max-width: 400px) { .usage-stats { grid-template-columns: 1fr 1fr; } .usage-stat:first-child { grid-column: 1 / -1; } }
.wa-cost-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-cost-stats .usage-stat:first-child { grid-column: auto; }
.wa-cost-stats .usage-stat b { font-size: 26px; }
/* Balken pro Tag: Höhe = aktive Konten; bei 90 Tagen wird es eng, deshalb nur 1–2px Abstand */
.usage-bars { display: flex; align-items: flex-end; gap: 2px; height: 72px; padding: 4px 0 0; border-bottom: 1px solid var(--line); }
.usage-bar { flex: 1 1 0; min-width: 1px; height: 100%; display: flex; align-items: flex-end; }
.usage-bar i { display: block; width: 100%; min-height: 3px; background: var(--volt); border-radius: 2px 2px 0 0; }
.usage-bar.zero i { background: var(--card2); }
.usage-table td.nowrap, .usage-table th.nowrap { white-space: nowrap; }
.usage-table .pill { font-size: 11px; padding: 2px 7px; }
.usage-log > summary { cursor: pointer; font-weight: 700; }
.usage-log ul { margin: 6px 0 0; padding-left: 20px; }
.stat-game { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; color: inherit; padding: 10px 0; min-height: 0; border-radius: 0; border-top: 1px solid var(--line); font-weight: inherit; justify-content: flex-start; }
.stat-game:first-of-type { border-top: 0; }
.stat-game:active { transform: none; opacity: 0.8; }
.stat-game .tag.score { flex: none; min-width: 58px; text-align: center; font-size: 15px; padding: 7px 8px; }
.stat-game .sg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stat-game .sg-main b { font-size: 15px; line-height: 1.2; }

/* Admin → Datensicherung: eine Zeile pro Sicherung */
.backup-item { padding: 10px 0; border-top: 1px solid var(--line); }
.backup-item .row { margin-top: 6px; }
.error-item { padding: 10px 0; border-top: 1px solid var(--line); }
.error-item > summary { cursor: pointer; list-style: none; overflow-wrap: anywhere; }
.error-item > summary::-webkit-details-marker { display: none; }
.error-detail { margin-top: 8px; }
.error-pre { background: var(--card2); border-radius: 10px; padding: 8px 10px; margin: 6px 0; font-size: 11px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }

/* Trikots: Verlauf der Besitzwechsel */
.jersey-history { margin: 6px 0 0; padding-left: 18px; }
.jersey-history li { margin: 2px 0; }

/* Fahrgemeinschaften */
.ev-rides { margin-top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ride-card { margin: 10px 0 0; padding: 12px 14px; }
.ride-card .row { gap: 8px; flex-wrap: wrap; }
.ride-passengers { margin: 4px 0 0; padding-left: 18px; }
.ride-passengers li { margin: 2px 0; }
/* Tausch: „💬 WhatsApp an …“ – auch auf der dunklen Karte gut lesbar */
.swap-wa { gap: 8px; margin-top: 8px; }
.swap-card .btn.wa, .swap-card .btn.wa:visited { color: #06361a; }
.fixed-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; margin-top: 4px; }
.eta-row { margin: 4px 0 8px; }
.eta-row .row { gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* Profil: angemeldete Geräte (Home-Bildschirm-Symbole) */
.device-row { padding: 8px 0; border-top: 1px solid var(--line); align-items: flex-start; flex-wrap: nowrap; }
.device-row > div { flex: 1; min-width: 0; }
.device-row:first-child { border-top: 0; padding-top: 0; }

/* ---------- KI-Assistent (Reiter „Assistent“) ---------- */

/* Sechs Knöpfe in der Leiste (Admins mit Assistent): etwas schmaler, damit alles auf schmale Handys passt */
.tabs:has(button[data-tab="assistant"]:not([hidden])) button { padding: 0 11px; }
@media (max-width: 380px) { .tabs:has(button[data-tab="assistant"]:not([hidden])) button { padding: 0 8px; gap: 6px; } }

.ai-chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.ai-msg { max-width: 86%; padding: 10px 14px; border-radius: 20px; font-size: 15px; overflow-wrap: anywhere; }
.ai-msg.me { align-self: flex-end; background: var(--volt); color: var(--on-volt); border-bottom-right-radius: 6px; white-space: pre-wrap; }
.ai-msg.bot { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.ai-msg.bot p { margin: 0 0 8px; }
.ai-msg.bot p:last-child, .ai-msg.bot ul:last-child { margin-bottom: 0; }
.ai-msg.bot ul { margin: 0 0 8px; padding-left: 20px; }
.ai-action { align-self: center; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--card2); border-radius: 999px; padding: 5px 12px; }
.ai-confirm { align-self: stretch; border: 2px solid var(--acc); }
.ai-confirm ul { margin: 0; padding-left: 20px; }
.ai-intro .chips { margin: 10px 0; }
.ai-busy { display: flex; gap: 5px; padding: 14px 16px; }
.ai-busy span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: aiDot 1.2s infinite ease-in-out; }
.ai-busy span:nth-child(2) { animation-delay: 0.15s; }
.ai-busy span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aiDot { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* Eingabe unter dem Verlauf; beim Hinscrollen bleibt Platz für die Leiste unten */
.ai-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
  margin-bottom: 14px;
  scroll-margin-bottom: calc(100px + env(safe-area-inset-bottom));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 26px;
}
.ai-compose textarea { flex: 1; min-height: 40px; max-height: 160px; resize: none; border: 0; background: transparent; padding: 9px 10px; font: inherit; color: inherit; }
.ai-compose textarea:focus { outline: none; }
.ai-compose button { flex: none; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; background: var(--volt); color: var(--on-volt); font-size: 18px; }

.ai-conv { gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ai-conv.on .linkish { font-weight: 800; }
button.linkish { flex: 1; min-height: 0; padding: 4px 0; background: transparent; color: var(--text); text-align: left; font-weight: 600; font-size: 15px; }
.ai-usage { width: 100%; border-collapse: collapse; }
.ai-usage th, .ai-usage td { text-align: left; padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line); }
.ai-log { padding-left: 18px; }
.ai-log li { margin-bottom: 6px; }

/* Angehängte Screenshots: Vorschau über dem Eingabefeld und in der eigenen Sprechblase */
.ai-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-thumbs:empty { display: none; }
.ai-attached { margin: 0 4px 8px; }
.ai-thumb { position: relative; }
.ai-thumbs img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.ai-msg.me .ai-thumbs { margin-bottom: 6px; }
.ai-thumb button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; font-size: 12px; background: var(--text); color: var(--bg); }
.ai-pics { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; opacity: 0.75; }
.ai-compose .ai-attach { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 18px; }

/* Sprache: Diktieren (🎤, während der Aufnahme ⏹) und Vorlesen (🔊 an jeder Antwort) */
.ai-compose .ai-mic { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 18px; }
.ai-compose .ai-mic.rec { background: var(--warn); color: #fff; box-shadow: none; animation: aiRec 1.2s infinite ease-in-out; }
@keyframes aiRec { 50% { opacity: 0.6; } }
.ai-msg.bot { position: relative; padding-right: 44px; }
.ai-speak { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 15px; }
.ai-autospeak { display: flex; align-items: center; gap: 8px; margin: -4px 6px 14px; color: var(--muted); }
.ai-autospeak-hint { margin: -10px 6px 14px; }

/* Kosten des KI-Assistenten (Super-Admin) */
.ai-month { margin: 4px 0 10px; }
.ai-cost-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-cost-stats .usage-stat:first-child { grid-column: auto; }
.ai-cost-stats .usage-stat b { font-size: 24px; }
.ai-cost-bars { height: 96px; gap: 8px; padding-bottom: 18px; position: relative; }
.ai-cost-bar { position: relative; }
.ai-cost-bar span { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); }
.ai-cost-bar.on span { color: var(--text); font-weight: 700; }
.ai-cost-bar:not(.on) i { opacity: 0.55; }
#ai-costs h4 { margin: 18px 0 6px; font-size: 15px; }
.ai-prices { margin-top: 14px; }
.ai-prices > summary { cursor: pointer; font-weight: 700; }
.ai-price-table input { width: 84px; min-height: 36px; padding: 4px 8px; }
.ai-usage td.nowrap { white-space: nowrap; }

/* Trainingstage im Profil und Trainerwechsel */
.td-row { padding: 6px 0; border-bottom: 1px solid var(--line, rgba(127, 127, 127, 0.2)); }
.td-row:last-child { border-bottom: 0; }
.ev-trainer { margin-top: 6px; }
.ev-trainer:empty { display: none; }
.handover-in { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--acc); border-radius: 10px; }
.td-mode { margin-top: 10px; }
.td-mode .check { margin: 6px 0; }