/* ==========================================================================
   Bikeball-Matchday

   Gebaut fuer zwei sehr verschiedene Lagen: Vorbereitung am Rechner —
   viele Felder, viele Listen — und Betrieb in der Halle am Handy oder
   Tablet, mit kalten Fingern und wenig Zeit. Deshalb grosse Trefferflaechen
   und Tabellen, die auf schmalen Schirmen scrollen statt zu brechen.

   Alle Klassen tragen `md-`, damit sie sich nicht mit styles.css oder den
   anderen Werkzeugen beissen.
   ========================================================================== */

.md-body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
}

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

.md-kopf {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem var(--pad);
  padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.md-zurueck {
  font-size: .85rem; font-weight: 700; color: var(--muted);
  text-decoration: none; white-space: nowrap;
}
.md-zurueck:hover { color: var(--fg); }
.md-titel {
  flex: 1; min-width: 0;
  font-size: 1rem; font-weight: 850; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-kopfknoepfe { display: flex; align-items: center; gap: .5rem; }

.md-haupt {
  max-width: 1180px; margin-inline: auto;
  padding: 1rem var(--pad) 5rem;
  display: grid; gap: 1rem;
}
/* Kinder eines Grid- oder Flex-Kastens haben min-width: auto und lassen
   sich von einer breiten Tabelle aufblasen — dann waechst die ganze
   Seite ueber den Schirm hinaus, statt dass die Tabelle fuer sich
   scrollt. Diese eine Zeile haelt das Handy schmal. */
.md-haupt > *, .md-ansicht > *, .md-blatt > *, .md-karte > * { min-width: 0; }

/* ── Knoepfe und Zeilen ───────────────────────────────────────── */

.md-btn {
  min-height: 2.5rem; padding: .5rem .95rem;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--fg);
  font: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.md-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }
.md-btn[disabled] { opacity: .4; cursor: default; }
.md-btn[disabled]:hover { border-color: var(--line); color: var(--fg); }
.md-haupt-btn {
  background: var(--accent-2); border-color: var(--accent-2); color: #14140c;
}
.md-haupt-btn:hover { filter: brightness(1.08); color: #14140c; }
.md-flach { background: none; border-color: transparent; color: var(--muted); }
.md-klein { min-height: 2rem; padding: .3rem .7rem; font-size: .8rem; }
.md-weg { color: #ff8a70; }
.md-weg:hover { border-color: #ff8a70; color: #ff8a70; }

.md-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.md-zeile-kopf { justify-content: space-between; }
.md-zeile-kopf h2 {
  flex: 1; min-width: 0; font-size: 1.15rem; font-weight: 850;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-stand { font-size: .8rem; color: var(--muted); flex: none; }

/* ── Reiter ───────────────────────────────────────────────────── */

.md-reiter {
  display: flex; gap: .3rem; overflow-x: auto;
  border-bottom: 1px solid var(--line); padding-bottom: .1rem;
  scrollbar-width: none;
}
.md-reiter::-webkit-scrollbar { display: none; }
.md-reiter button {
  padding: .55rem .9rem; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.md-reiter button:hover { color: var(--fg); }
.md-reiter button[aria-selected="true"] {
  color: var(--accent-2); border-bottom-color: var(--accent-2);
}

/* ── Karten und Felder ────────────────────────────────────────── */

.md-blatt { display: grid; gap: 1rem; }

.md-karte {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft); padding: 1rem;
}
.md-karte > h3 {
  font-size: .95rem; font-weight: 850; margin: 0 0 .2rem;
}
.md-karte > p.md-hinweis { margin: 0 0 .8rem; }
.md-hinweis { font-size: .82rem; color: var(--muted); line-height: 1.5; }

.md-gitter {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.md-feld { display: grid; gap: .25rem; }
.md-feld > span { font-size: .78rem; font-weight: 700; color: var(--muted); }
.md-feld input, .md-feld select, .md-feld textarea {
  width: 100%; padding: .55rem .7rem;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); color: var(--fg);
  /* Unter 16px zoomt iOS beim Hineintippen die ganze Seite. */
  font: inherit; font-size: 16px;
}
.md-feld input:focus, .md-feld select:focus, .md-feld textarea:focus {
  outline: 2px solid var(--accent-2); outline-offset: 1px;
}
.md-feld-schmal { max-width: 9rem; }
.md-schalter { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.md-schalter input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent-2); }

/* ── Listen ───────────────────────────────────────────────────── */

.md-liste { display: grid; gap: .5rem; }
.md-eintrag {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg); padding: .65rem .8rem;
}
.md-eintrag-haupt { flex: 1; min-width: 0; }
.md-eintrag-haupt b { display: block; font-size: .95rem; font-weight: 800; }
.md-eintrag-haupt small { color: var(--muted); font-size: .78rem; }
.md-eintrag a { color: inherit; text-decoration: none; }
.md-farbe {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: none;
  border: 1px solid var(--line);
}
.md-kuerzel {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: .8rem;
  color: var(--muted); min-width: 3.2rem;
}
.md-leer {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 1.6rem 1rem; text-align: center; color: var(--muted);
  font-size: .9rem;
}

/* ── Tabellen ─────────────────────────────────────────────────── */

.md-rolle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.md-tab {
  width: 100%; border-collapse: collapse; font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.md-tab th, .md-tab td {
  padding: .45rem .5rem; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}
.md-tab th { color: var(--muted); font-size: .72rem; font-weight: 700; }
.md-tab th:first-child, .md-tab td:first-child,
.md-tab .md-links { text-align: left; }
.md-tab td.md-name { width: 99%; white-space: normal; }
/* Volle Namen am Rechner, Kuerzel am Handy — dieselbe Zeile, zwei
   Lesbarkeiten. */
.md-kurz { display: none; }
@media (max-width: 560px) {
  .md-lang { display: none; }
  .md-kurz { display: inline; font-weight: 700; }
  .md-tab td.md-name { white-space: nowrap; }
}
.md-tab tbody tr:hover { background: rgba(255, 255, 255, .025); }
.md-tab .md-pkt { font-weight: 850; }
.md-tab .md-gleich td:first-child::after { content: "."; }

.md-spiel-nr { color: var(--muted); }
.md-spiel-zeit { font-weight: 700; }
.md-erg { font-weight: 850; }
.md-offen { color: var(--muted); }
.md-frei { color: var(--muted); font-style: italic; }

/* ── Warnung und Dialog ───────────────────────────────────────── */

.md-warnung {
  border: 1px solid #ff8a70; border-radius: 14px;
  background: rgba(255, 75, 31, .09); color: #ffd7cc;
  padding: .7rem .9rem; font-size: .88rem;
}

.md-dlg {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 1rem;
  background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px);
  overscroll-behavior: contain;
}
.md-dlg-innen {
  position: relative; width: min(34rem, 100%);
  max-height: min(85svh, 44rem); overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft); padding: 1.2rem;
  display: grid; gap: .9rem;
}
.md-dlg-innen h2 { font-size: 1.05rem; font-weight: 850; }
.md-dlg-zu {
  position: absolute; top: .5rem; right: .5rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--fg); font: inherit; font-size: 1.1rem; cursor: pointer;
}

/* ── Ladeanzeige ──────────────────────────────────────────────── */

.md-laden { display: grid; place-items: center; gap: .6rem; padding: 2rem 1rem; }
.md-laden-ring {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent-2);
  animation: md-dreh .8s linear infinite;
}
@keyframes md-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .md-laden-ring { animation-duration: 3s; }
}

/* ── Drucken ──────────────────────────────────────────────────── */

@media print {
  .md-kopf, .md-reiter, .md-zeile-kopf button, .md-btn,
  .glow, .md-dlg, [data-kontoknopf] { display: none !important; }
  .md-body { background: #fff; color: #000; }
  .md-karte, .md-eintrag {
    background: none; border-color: #bbb; break-inside: avoid;
  }
  .md-tab th, .md-tab td { border-bottom-color: #ddd; }
  .md-hinweis, .md-tab th, .md-kuerzel, .md-spiel-nr { color: #555; }
  .md-haupt { padding: 0; max-width: none; }
  .md-blatt[hidden] { display: none !important; }
}

/* ── Spieltisch ───────────────────────────────────────────────── */

.md-tisch { display: grid; gap: 1rem; }
.md-tisch-kopf {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.md-tisch-titel { flex: 1; min-width: 0; }
.md-tisch-titel b { display: block; font-size: 1rem; font-weight: 850; }
.md-tisch-titel small { color: var(--muted); font-size: .8rem; }
.md-tisch-status { font-size: .8rem; color: var(--muted); flex: none; }

.md-tisch-mitte {
  display: grid; gap: .8rem;
  grid-template-columns: 1fr minmax(14rem, 1.2fr) 1fr;
  align-items: start;
}
@media (max-width: 720px) {
  /* Hochkant: Uhr oben, die Mannschaften darunter nebeneinander. */
  .md-tisch-mitte { grid-template-columns: 1fr 1fr; }
  .md-tisch-uhrkasten { grid-column: 1 / -1; grid-row: 1; }
}
.md-tisch-team {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft); padding: .9rem .8rem;
  display: grid; gap: .6rem; justify-items: center;
  border-top: 4px solid var(--team, var(--line));
}
.md-tisch-teamname {
  display: flex; align-items: center; gap: .5rem; max-width: 100%;
}
.md-tisch-teamname b {
  font-size: .95rem; font-weight: 800; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.md-tisch-tore {
  font-size: clamp(3.4rem, 12vw, 6rem); font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.md-tisch-torknoepfe { display: flex; gap: .4rem; align-items: center; }
.md-tisch-tor {
  min-height: 3.4rem; padding: .6rem 1.4rem; font-size: 1.05rem;
  background: var(--accent-2); border-color: var(--accent-2); color: #14140c;
}
.md-tisch-tor:hover { filter: brightness(1.08); color: #14140c; }
.md-tisch-karten { justify-content: center; gap: .3rem; }
.md-karte-gelb { border-color: #ffd54a; color: #ffd54a; }
.md-karte-gelbrot { border-color: #ff9d3a; color: #ff9d3a; }
.md-karte-rot { border-color: #ff5a4a; color: #ff5a4a; }
.md-tisch-strafe { text-align: center; }
.md-tisch-strafe:empty { display: none; }

.md-tisch-uhrkasten {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft); padding: .9rem .8rem;
  display: grid; gap: .5rem; justify-items: center;
}
.md-tisch-halbzeit { font-size: .85rem; font-weight: 700; color: var(--muted); }
.md-tisch-uhr {
  font-size: clamp(3.6rem, 14vw, 7rem); font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.md-tisch-uhr-laeuft { color: var(--accent-2); }
.md-tisch-uhr-um { color: #ff5a4a; }
.md-tisch-zeitspiel { min-height: 1.4rem; font-weight: 800; color: #ff9d3a; }
.md-tisch-uhrknoepfe { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.md-tisch-start { min-width: 8rem; min-height: 3.2rem; font-size: 1.05rem; }
.md-tisch-phasenknoepfe { justify-content: center; }

.md-tisch-fragen { display: grid; gap: .6rem; }
.md-tisch-fragen:empty { display: none; }
.md-tisch-frage {
  border: 1px solid var(--accent-2); border-radius: 14px;
  background: rgba(255, 195, 0, .08); padding: .8rem .9rem;
  display: grid; gap: .5rem;
}
.md-tisch-unten { display: grid; gap: 1rem; }
.md-tisch-ereignisse { display: grid; gap: .3rem; }
.md-tisch-ereignis {
  display: flex; align-items: center; gap: .6rem;
  border-bottom: 1px solid var(--line-soft); padding: .3rem 0; font-size: .9rem;
}
.md-tisch-e-tor .md-eintrag-haupt { font-weight: 800; }
.md-tisch-e-rot .md-eintrag-haupt, .md-tisch-e-gelbrot .md-eintrag-haupt { color: #ff8a70; }
.md-tisch-e-gelb .md-eintrag-haupt { color: #ffd54a; }
.md-tisch-regie { gap: .35rem; }

/* ── Live-Dialog: Code, QR, Verweise ──────────────────────────── */

.md-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.6rem; font-weight: 800; letter-spacing: .12em;
  text-align: center; padding: .5rem; border-radius: 12px;
  border: 1px dashed var(--line);
}
.md-qr { display: grid; place-items: center; }
.md-qr canvas, .md-qr img { border-radius: 12px; background: #fff; padding: .6rem; max-width: 100%; }
.md-verweise { display: grid; gap: .4rem; }
.md-verweise a { color: var(--accent-2); word-break: break-all; font-size: .88rem; }
.md-live-an { color: #7ee787; font-weight: 800; }