:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #1b1d21;
  --muted: #6b7280;
  --line: #dcdfe4;
  --accent: #CD4C25;
  --accent-light: #E47B59;
  --accent-ink: #ffffff;
  --warn: #b45309;
  --bad: #b91c1c;
  --good: #15803d;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171b;
    --card: #1e2126;
    --ink: #e8eaed;
    --muted: #9aa3ad;
    --line: #333841;
    --accent: #CD4C25;
    --accent-light: #E47B59;
    --warn: #d18b2c;
    --bad: #ef6a6a;
    --good: #4ade80;
  }
}

* { box-sizing: border-box; }

/* display aus einer Klasse schlaegt sonst das hidden-Attribut - dann bleibt
   stehen, was verborgen sein soll. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

header {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}
header h1 { font-size: 18px; margin: 0; font-weight: 600; }
header a { color: var(--accent-ink); text-decoration: none; opacity: .9; }
header a:hover { opacity: 1; text-decoration: underline; }
header .rechts { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 14px; }

/* Gemeinsamer Seitenrahmen: derselbe Einstieg fuer Ergebnisansicht,
   Spieltag und Verwaltung. Die Tischliste bleibt bildschirmfuellend. */
header .kopfmarke { white-space: nowrap; font-size: 16px; }
header .kopfmarke::after { content: ''; }
header .kopfkontext { display:flex; flex-direction:column; min-width:0; line-height:1.2; }
header .kopfkontext h1 { font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
header .kopfuntertitel { font-size:13px; opacity:.88; margin-top:2px; }
header .menueknopf {
  border: 1px solid currentColor; background: transparent; color: inherit;
  min-width: 40px; height: 40px; padding: 2px 8px; font-size: 22px;
}
.seitenmenue {
  position: fixed; z-index: 19; inset: 0 auto 0 0; width: 224px;
  overflow-y: auto; background: var(--card); border-right: 1px solid var(--line);
  box-shadow: 4px 0 20px #0002; padding: 0 0 24px;
}
.seitenmenue nav { display: flex; flex-direction: column; gap: 0; }
.seitenmenue a {
  display: block; padding: 11px 14px; border-radius: 0;
  text-decoration: none; color: var(--ink); font-weight: 550;
}
.seitenmenue a:hover, .seitenmenue a[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 15%, var(--card));
}
.seitenmenue a[aria-current="page"] { box-shadow: inset 3px 0 var(--accent); }
.seitenmenue .menuegruppe {
  margin: 10px 0 0; padding: 9px 14px; color: var(--ink); font-size: 12px;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--ink) 12%, var(--card));
}
.seitenmenue .menuegruppe:first-child { margin-top: 0; }
.menuehintergrund { display: none; }
body.tischmodus:not(.browserlayout) .seitenmenue, body.geraetemodus .seitenmenue,
body.tabletpruefung .seitenmenue { display: none; }
@media (min-width: 961px) {
  body.seitenlayout:not(.geraetemodus):not(.tabletpruefung):not(.tabletlayout) { padding-left: 224px; }
  body.seitenlayout:not(.geraetemodus):not(.tabletpruefung):not(.tabletlayout) > header {
    margin-left:-224px; min-height:72px; flex-wrap:nowrap; }
  body.seitenlayout:not(.geraetemodus):not(.tabletpruefung):not(.tabletlayout) .seitenmenue { top:72px; }
  body.seitenlayout:not(.geraetemodus):not(.tabletpruefung):not(.tabletlayout) .feste-aktionen { left: 224px; }
  body.seitenlayout:not(.geraetemodus):not(.tabletpruefung):not(.tabletlayout) .menueknopf { display: none; }
  body.seitenlayout:not(.geraetemodus):not(.tabletpruefung):not(.tabletlayout) main { max-width: min(1600px, 100%); }
}
@media (max-width: 960px) {
  .seitenmenue { transform: translateX(-105%); transition: transform .18s ease; }
  body.seitenmenue-offen .seitenmenue { transform: translateX(0); }
  body.seitenmenue-offen .menuehintergrund {
    display: block; position: fixed; inset: 0; z-index: 18;
    border: 0; background: #0008;
  }
  header .kopfmarke { display: none; }
  header .rechts .marke { display: none; }
}

main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.nur-screenreader { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body:not(.geraetemodus):not(.tabletpruefung) #startseite {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start;
}
#startseite > #anmeldestatus,#startseite > #wettbewerbeKarte,
#startseite > #registrierung,#startseite > .karte:last-child { grid-column:1/-1; }
#startseite > .karte { margin-bottom:0; }
.wettbewerb-liste { display:flex; flex-direction:column; gap:0; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; }
.wettbewerb-zeile { display:flex; align-items:center; justify-content:space-between; gap:14px;
  min-height:62px; padding:10px 14px; background:var(--card); border-bottom:1px solid var(--line); }
.wettbewerb-zeile:nth-child(even) { background:color-mix(in srgb,var(--ink) 4%,var(--card)); }
.wettbewerb-zeile:last-child { border-bottom:0; }
.wettbewerb-zeile .wettbewerb-name { display:block; font-weight:750; text-decoration:none; }
.wettbewerb-zeile small { display:block; color:var(--muted); margin-top:2px; }
.wettbewerb-ausschreibung { display:inline-block; margin-top:4px; font-size:.9rem; }
@media (max-width:700px) {
  body:not(.geraetemodus):not(.tabletpruefung) #startseite { grid-template-columns:1fr; }
  #startseite > * { grid-column:1/-1; }
  .wettbewerb-zeile .knopf { white-space:nowrap; }
}
main.weit { max-width: 1600px; }

.karte {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.karte h2 { margin: 0 0 12px; font-size: 16px; font-weight: 600;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.karte h2 .knopf.klein { font-weight: 400; }
.karte h3 { margin: 16px 0 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.karte h2 { border-bottom: 2px solid var(--line); padding-bottom: 9px; }
.karte h3 { border-left: 4px solid var(--accent-light); padding-left: 10px; }
.rundeneinsatz { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.rundeneinsatz > div { border:1px solid var(--line); border-top:3px solid var(--accent-light);
  border-radius:var(--radius); padding:10px; background:color-mix(in srgb,var(--accent) 3%,var(--card)); }
.rundeneinsatz label { display:block; }
.rundeneinsatz input,.rundeneinsatz select { width:100%; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tr.geteilt td { border-bottom-style: dashed; }

button, .knopf {
  font: inherit;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.haupt { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.aktiv { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.gross { padding: 14px 20px; font-size: 17px; font-weight: 600; }
button.gewonnen { background: var(--good); color: #fff; border-color: var(--good); }
button.verloren { background: var(--bad); color: #fff; border-color: var(--bad); }
button:disabled { opacity: .4; cursor: not-allowed; }

input, select {
  font: inherit;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  max-width: 100%;
}
#startzeitdialog { background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; min-width: 14rem; }
#startzeitdialog::backdrop { background: rgba(0, 0, 0, .55); }
#startzeitdialog select { width: 100%; margin: 8px 0 16px; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 3px; }

.reihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.reihe > div { display: flex; flex-direction: column; }
.knopfreihe { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.hinweis { color: var(--muted); font-size: 13px; }
.warnung { color: var(--warn); font-size: 13px; }
.fehler { color: var(--bad); font-size: 14px; }
.leer { color: var(--muted); font-style: italic; padding: 12px 0; }

.meldung {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  padding: 10px 18px; border-radius: 8px; font-size: 14px;
  z-index: 100; max-width: 90vw;
}
.meldung.fehler { background: var(--bad); color: #fff; }

.marke {
  display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 99px;
  background: var(--line); color: var(--muted); margin-left: 4px;
}
.marke.gruen { background: var(--good); color: #fff; }

.gitter { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.tischkarte {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; background: var(--card); text-decoration: none; color: var(--ink);
  display: block;
}
.tischkarte:hover { border-color: var(--accent); }
.tischkarte .kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.tischkarte .nr { font-size: 18px; font-weight: 600; }
.tischkarte ol { margin: 0; padding-left: 18px; font-size: 13px; }
.ampel { width: 10px; height: 10px; border-radius: 99px; display: inline-block; }
.ampel.gruen { background: var(--good); }
.ampel.gelb { background: var(--warn); }
.ampel.rot { background: var(--bad); }

/* Erfassung */
.spielerwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.spielerwahl button { padding: 14px 10px; text-align: left; }
.spielerwahl button small { display: block; color: var(--muted); font-size: 12px; }
.spielerwahl button.aktiv small { color: rgba(255,255,255,.8); }
.geber { opacity: .45; }

.wert {
  font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 8px 0;
}
.wert small { font-size: 14px; font-weight: 400; color: var(--muted); display: block; }

.liste { font-size: 13px; }
.liste td, .liste th { padding: 3px 6px; }
.liste tr.frei td { color: var(--muted); }

@media (max-width: 640px) {
  main { padding: 10px; }
  .karte { padding: 12px; }
  table { font-size: 13px; }
}

/* ============================================================
   Spielliste im Aufbau des Papierbogens
   ============================================================ */

/* --- Kopfleiste: eine Zeile statt einer halben Bildschirmseite --- */
.tischkopf {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}
.tischkopf .titelzeile {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; flex: 1 1 auto;
}
.tischkopf h2 { margin: 0; font-size: 17px; font-weight: 700; }
.tischkopf .meta { color: var(--muted); font-size: 13px; }
.tischkopf .werkzeuge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tischkopf button { padding: 6px 11px; font-size: 13px; }
.tischkopf .teilen { display: inline-flex; align-items: center; gap: 6px; }
.tischkopf .teilen .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; letter-spacing: .08em;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 8px; font-size: 13px;
}
.legende { color: var(--muted); font-size: 12px; margin: 8px 2px 24px; }

/* --- Der Bogen --- */
.blattrahmen {
  overflow: auto;
  max-height: calc(100vh - 150px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

table.blatt {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  min-width: 100%;
  /* FESTE Spaltenbreiten aus der colgroup. Vorher rechnete der Browser sie
     aus dem Inhalt, und Kopf und Koerper liefen auseinander: die
     Geberzellen sassen eine Spalte zu weit rechts. Mit fixed hat jede
     Spalte genau eine Breite, egal was darin steht. */
  table-layout: fixed;
}

/* Spaltenbreiten wie auf der gedruckten ISPA-Liste */
col.s-nr          { width: 2.6em; }
col.s-grundwert   { width: 3.6em; }
col.s-spitze      { width: 2.4em; }
col.s-stufe       { width: 2.2em; }
col.s-wert        { width: 3.4em; }
col.s-punkte      { width: 4.2em; }
col.s-haken       { width: 2.4em; }
col.s-eingepasst  { width: 2.4em; }

table.blatt th,
table.blatt td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 5px 6px;
  text-align: center;
  white-space: nowrap;
  height: 30px;
}

/* Kraeftige Linien trennen die Blöcke - wie die dicken Striche auf dem Papier */
table.blatt th.trennt, table.blatt td.trennt {
  border-left: 2px solid var(--ink);
}

table.blatt thead th {
  background: var(--bg);
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  position: sticky;
  z-index: 3;
  padding: 3px 6px;
  height: auto;
}
table.blatt thead tr:first-child th { top: 0; }
table.blatt thead tr:nth-child(2) th { top: 44px; }
table.blatt thead th.gruppe {
  font-size: 11px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

/* Spaltenkopf je Platz: Name und laufender Stand, klebt beim Blättern oben */
table.blatt thead th.spieler {
  padding: 4px 8px; line-height: 1.25;
  display: table-cell; text-align: left;
}
table.blatt thead th.spieler .pl { font-size: 10px; color: var(--muted); display: block; }
table.blatt thead th.spieler .nm {
  font-size: 13px; font-weight: 700; color: var(--ink); display: block;
  overflow: hidden; text-overflow: ellipsis;
}
table.blatt thead th.spieler .snr { font-size: 10px; color: var(--muted); display: block; }
table.blatt thead th.spieler .st {
  font-size: 15px; font-weight: 700; display: block; margin-top: 1px;
}
table.blatt thead th.spieler .st.plus  { color: var(--good); }
table.blatt thead th.spieler .st.minus { color: var(--bad); }
table.blatt thead th.spieler .st small {
  font-size: 10px; font-weight: 500; color: var(--muted); margin-left: 5px;
}

/* Breiten stehen in der colgroup oben - hier nur noch das Aussehen. */
table.blatt .nr { color: var(--muted); font-size: 11px; }

/* Eine RUNDE ist einmal reihum geben: vier Spiele am Vierertisch, drei am
   Dreiertisch. Auf dem Papier sind diese Bloecke mit dicken Linien
   abgetrennt, und es gibt nur ganze Runden. */
table.blatt tbody tr.rundenende > td { border-bottom: 2px solid var(--ink); }

/* Senkrechte Beschriftungen wie auf dem Bogen: "lfd. Nr. der Spiele",
   "Schneider ang.", "eingepasst" - sonst waeren die Spalten so breit wie
   ihre Ueberschrift und das Blatt passte nicht auf den Schirm. */
table.blatt th.senkrecht { vertical-align: bottom; padding: 4px 2px; }
table.blatt th.senkrecht > span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; display: inline-block; line-height: 1;
}

/* Gedruckte Merkhilfe neben der Grundwertspalte: links Farbspiele und
   Grand, rechts die Nullwerte. */
table.blatt th.legende { padding: 2px; vertical-align: middle; }
table.blatt .werte {
  display: grid; grid-template-columns: auto auto; gap: 0 5px;
  justify-content: center; font-size: 9px; line-height: 1.15;
  color: var(--muted);
}
table.blatt .werte i { font-style: normal; text-align: right; }

table.blatt td.eingepasstzeile { text-align: left; padding-left: 10px; }

table.blatt tr.aktiv > td {
  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
}
table.blatt tr.aktiv > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

table.blatt tr.gefuellt, table.blatt tr.frei { cursor: pointer; }
table.blatt tr.gefuellt:hover > td, table.blatt tr.frei:hover > td {
  background-color: color-mix(in srgb, var(--accent) 6%, transparent);
}

table.blatt tr.frei > td { color: var(--muted); }
table.blatt tr.eingepasst > td { font-style: italic; color: var(--muted); }

/* Geber setzt am Vierertisch aus - wie das graue Feld auf dem Bogen.
   Auch auf der aktiven Zeile muss die Schraffur sichtbar bleiben. */
/* Der Geber setzt aus. Auf der gedruckten ISPA-Liste sind diese Felder
   einfach grau hinterlegt - keine Schraffur. */
table.blatt td.gibt,
table.blatt tr.aktiv > td.gibt,
table.blatt tr.gefuellt:hover > td.gibt,
table.blatt tr.frei:hover > td.gibt {
  background-image: none;
  background-color: color-mix(in srgb, var(--ink) 10%, transparent);
}
table.blatt tr.aktiv > td.gibt {
  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
}

table.blatt td.plus   { color: var(--good); font-weight: 700; }
table.blatt td.minus  { color: var(--bad);  font-weight: 700; }
table.blatt td.spielhaken { font-weight: 700; }

/* Fuss des Bogens, klebt unten */
table.blatt tfoot td, table.blatt tfoot th {
  background: var(--bg);
  font-size: 11px;
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid var(--line);
}
table.blatt tfoot tr:first-child td, table.blatt tfoot tr:first-child th {
  border-top: 2px solid var(--ink);
}
table.blatt tfoot tr.ergebnis td { font-size: 15px; font-weight: 700; }
table.blatt tfoot th { text-align: right; color: var(--muted); font-weight: 600; }

/* --- Die Eingabe, direkt an der aktiven Zeile --- */
tr.eingabe > td {
  padding: 0;
  background: var(--bg);
  border-left: 3px solid var(--accent);
}
.eingabefeld {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 14px;
  padding: 12px 14px;
  text-align: left;
  align-items: start;
}
.eingabefeld .bauen { display: grid; gap: 7px; min-width: 0; }
.eingabefeld .zeile { display: flex; gap: 8px; align-items: baseline; }
.eingabefeld .beschriftung {
  font-size: 11px; color: var(--muted); width: 7.4em; flex: none;
  padding-top: 9px; text-transform: uppercase; letter-spacing: .04em;
}
.eingabefeld .knoepfe { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; min-width: 0; }
.eingabefeld .luecke { width: 10px; }
.eingabefeld button { padding: 9px 13px; font-size: 14px; }
.eingabefeld button small { color: var(--muted); font-size: 11px; }
.eingabefeld button.aktiv small { color: rgba(255,255,255,.75); }
.eingabefeld button.zahl { padding: 9px 0; width: 2.4em; text-align: center; }
.eingabefeld button.klein { padding: 6px 10px; font-size: 12px; }
.eingabefeld .warnung { margin-left: calc(7.4em + 8px); }

/* Rechte Spalte: Ergebnis und Buchung */
.eingabefeld .buchen { display: grid; gap: 7px; }
.eingabefeld .anzeige {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); padding: 8px 10px; line-height: 1.2;
}
.eingabefeld .anzeige .nr {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; display: block;
}
.eingabefeld .anzeige .wert { font-size: 30px; font-weight: 700; }
.eingabefeld .anzeige .einheit { font-size: 12px; color: var(--muted); }
.eingabefeld .anzeige .was { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.eingabefeld .anzeige.leer .wert { color: var(--muted); font-weight: 400; }
.eingabefeld .buchen button.gross { padding: 13px; font-size: 16px; width: 100%; }
.eingabefeld .nebenbei { display: flex; gap: 5px; flex-wrap: wrap; }

/* Meldung nach links unten - mittig verdeckt sie die Knöpfe der Eingabe,
   oben rechts die Knöpfe der Kopfleiste */
.meldung {
  position: fixed; left: 16px; right: auto; bottom: 16px; top: auto;
  transform: none;
}

/* Meldung, wenn die Liste voll ist */
.vollmeldung {
  border: 1px solid var(--good);
  border-left: 4px solid var(--good);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--good) 8%, transparent);
}
.vollmeldung ol { margin: 8px 0 4px; padding-left: 22px; }
.vollmeldung li { margin-bottom: 2px; }
.vollmeldung li span { color: var(--muted); font-size: 13px; margin-left: 6px; }
.vollmeldung p { margin: 4px 0 0; }

@media (max-width: 900px) {
  .eingabefeld { grid-template-columns: 1fr; }
  .eingabefeld .buchen { grid-template-columns: 1fr 1fr; align-items: end; }
  .eingabefeld .anzeige { grid-column: 1 / -1; }
  .eingabefeld .nebenbei { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  table.blatt { font-size: 12px; }
  .eingabefeld .beschriftung { width: 100%; padding-top: 0; }
  .eingabefeld .warnung { margin-left: 0; }
}

/* ============================================================
   Turnieranlage in Schritten
   ============================================================ */

.schritt h3 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; font-size: 15px; color: var(--ink);
}
.schritt h3 .nummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 99px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 13px; font-weight: 700; flex: none;
}
.schritt > label { display: block; margin-top: 10px; }

.knopfreihe.gross button { padding: 12px 18px; text-align: left; }
.knopfreihe button small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.knopfreihe button.aktiv small { color: rgba(255,255,255,.8); }
button.klein { padding: 5px 9px; font-size: 12px; }

.reihe .breit { flex: 1 1 260px; }
input.schmal { width: 4.5em; }

.haken { display: grid; gap: 6px; margin-top: 10px; }
.haken label {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14px; color: var(--ink); margin: 0;
}
.haken input { margin: 0; }
.haken .hinweis { margin-left: 4px; }

table.tagestabelle { margin-top: 12px; }
table.tagestabelle input[type="date"] { padding: 4px 6px; }
table.tagestabelle td { padding: 4px 8px; }

.zusammenfassung { margin-bottom: 12px; }
.zusammenfassung ul { margin: 6px 0 0; padding-left: 20px; font-size: 14px; }
.zusammenfassung li { margin-bottom: 2px; }

/* Auswahl der Turnierart */
.kacheln { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kachel {
  display: block; text-align: left; padding: 14px 16px; line-height: 1.4;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.kachel .kopf { display: block; font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.kachel .text { display: block; font-size: 13px; }
.kachel .bsp { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
.kachel.aktiv { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.kachel.aktiv .bsp { color: rgba(255,255,255,.8); }

/* Bereiche, in denen etwas Unwiderrufliches passiert */
.karte.gefahr { border-color: var(--bad); border-left: 4px solid var(--bad); }
.karte.gefahr h3 { color: var(--bad); margin: 0 0 10px; font-size: 15px; }
.karte.gefahr .warnung { font-size: 14px; color: var(--ink); }

/* Datumsfeld mit sichtbarem Kalenderknopf - Safari zeigt von sich aus keinen */
.mitkalender { display: inline-flex; align-items: stretch; gap: 4px; }
.mitkalender input[type="date"] { flex: 1 1 auto; min-width: 0; }
button.kalender {
  padding: 0 8px; font-size: 15px; line-height: 1;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  cursor: pointer; flex: none;
}
button.kalender:hover { border-color: var(--accent); }

/* Vereinsmitgliedschaften */
table.vereine td, table.vereine th { padding: 4px 8px; }
table.vereine tr.beendet td { color: var(--muted); }
.hauptverein { font-weight: 700; }

/* Dublettenvorschlag */
.dublette { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.dublette h4 { margin: 0 0 6px; font-size: 14px; }
.dublette table { font-size: 13px; }
.dublette .warnung { margin-top: 6px; }

/* Spielervorschlaege beim Anmelden - gegen Dubletten */
.vorschlaege {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin: .5rem 0 .25rem;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.vorschlaege > .hinweis { margin: 0 .3rem 0 0; }
button.vorschlag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  width: auto;
  text-align: left;
  padding: .35rem .6rem;
  line-height: 1.25;
}
button.vorschlag.gewaehlt {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
button.vorschlag.dabei { opacity: .5; }
button.vorschlag .klein { font-size: .8em; color: var(--muted); }

/* Beendete Runden stehen eingeklappt und zaehlen nicht mit */
details.beendete { margin-top: .75rem; }
details.beendete summary {
  cursor: pointer;
  padding: .35rem 0;
  color: var(--muted);
}
details.beendete summary .hinweis { margin-left: .4rem; }
tr.beendetezeile { opacity: .55; }

/* Reiter im Turniereditor */
nav.reiter {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0 0 1rem;
  border-bottom: 2px solid var(--line);
  padding-bottom: 0;
}
nav.reiter button {
  width: auto;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg);
  color: var(--muted);
  margin-bottom: -2px;
  padding: .5rem 1rem;
}
nav.reiter button.aktiv {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
  border-bottom: 2px solid var(--card);
  font-weight: 600;
}
nav.reiter button:hover { color: var(--ink); }

/* Ergebnisreiter liegen sichtbar vor der Tabelle; Auswahl wie bei Skatguru. */
.ergebnisreiter { margin-bottom: 1rem; }
.ergebnisreiter button { border-radius: 0; }
.ergebnisreiter button.aktiv {
  color: var(--accent);
  border-top: 3px solid var(--accent);
  padding-top: calc(.5rem - 2px);
}
.ergebnisbereich [data-panel] select { margin: 0 .9rem 1rem .3rem; }
.ergebnis-live { color: var(--accent); font-weight: 700; margin: 0 0 .6rem; }
.zur-spielliste {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 40; display: block;
  padding: 14px 24px; border-radius: 999px; background: var(--accent);
  color: #fff; font-weight: 800; text-decoration: none;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.zur-spielliste:hover { background: var(--accent-light); }
body:has(.zur-spielliste:not([hidden])) main { padding-bottom: 90px; }
.ergebnis-tabelle { overflow-x: auto; }
.ergebnis-tabelle table { width: 100%; min-width: 650px; }
.ergebnis-tabelle th, .ergebnis-tabelle td { white-space: nowrap; }
.tischblock { margin: 1.5rem 0; }
.tischblock h3 { margin-bottom: .5rem; }

table.stufen td { padding: .2rem .4rem; border: none; }
table.stufen input { margin: 0; }
#preisraster { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; }
#preisprobe { margin: .4rem 0 .6rem; }

table.serientabelle { margin: .5rem 0; }
table.serientabelle input, table.serientabelle select { margin: 0; }
tr.serienzeile > td { background: var(--bg); }

/* Spieltags-Reiter: je Spieltag einer, die Serien stehen DARIN.
   Schmaler als die Hauptreiter, weil es viele werden koennen - eine
   Vereinsmeisterschaft hat bis zu 53. */
nav.tagreiter { margin: 1rem 0 0; }
nav.tagreiter button {
  padding: .35rem .7rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  gap: 0;
}
nav.tagreiter button .hinweis { font-size: .75rem; white-space: nowrap; }
nav.tagreiter button.dazu {
  color: var(--ink);
  border-style: dashed;
  align-self: flex-end;
  display: block;
}
.tagblatt {
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: .75rem;
  background: var(--card);
}
.tagblatt p.wert { margin: 0; padding: .45rem 0; }
.tagblatt .reihe { margin-bottom: 0; }

/* Die vier Platzgeldfelder gehoeren in DIESELBE Reihe wie die Modusauswahl.
   Als eigene .reihe brachen sie untereinander um. */
#platzgeldfelder { display: contents; }

/* Speicherstand der Anlegemaske. Sie speichert fortlaufend, ohne Knopf -
   also muss sichtbar sein, ob es drin ist. */
.sicherstand { font-size: .85rem; opacity: .8; align-self: center; }
.sicherstand.laeuft { opacity: .6; }
.sicherstand.gut::before { content: '\2713\00a0'; color: #2e7d32; }
.sicherstand.schlecht { color: #b3261e; opacity: 1; }

/* Band oben in der Spielliste, wenn Spiele im Puffer liegen. Muss auffallen,
   ohne zu erschrecken: es ist nichts verloren, es ist nur noch nicht drueben. */
.pufferband { border-left: 4px solid #c9770a; background: rgba(201,119,10,.1);
              padding: 10px 14px; margin: 0 0 12px; border-radius: 4px;
              font-size: .95rem; line-height: 1.45; }
.pufferband button { margin-left: 8px; }

/* ---------------------------------------------- Spielliste: Erfassen */

/* Waehlbare Spalten: gruen umrandet. Am Vierertisch ist der Geber nicht
   dabei - dort passiert beim Antippen nichts. */
table.blatt th.waehlbar, table.blatt td.waehlbar {
  box-shadow: inset 0 0 0 2px var(--good);
  cursor: pointer;
}
table.blatt th.waehlbar { background: color-mix(in srgb, var(--good) 10%, transparent); }
table.blatt thead th.spieler .snr { font-size: 10px; color: var(--muted); display: block; }
table.blatt thead tr.unterkopf th { font-size: 10px; }

/* Fuss: Zwischenergebnis und Endzeile kleben unten, die Detailrechnung
   erscheint erst, wenn man ganz unten angekommen ist. */
table.blatt tfoot tr.klebt th, table.blatt tfoot tr.klebt td {
  position: sticky; z-index: 2; background: var(--card);
}
table.blatt tfoot tr.zwischenergebnis th, table.blatt tfoot tr.zwischenergebnis td { bottom: 34px; }
table.blatt tfoot tr.ergebnis th, table.blatt tfoot tr.ergebnis td {
  bottom: 0; font-weight: 700; border-top: 2px solid var(--ink);
}
table.blatt tfoot tr.detail { display: none; }
.blattrahmen.amende table.blatt tfoot tr.detail { display: table-row; }
table.blatt tfoot tr.abrechnung { display: none; }
.blattrahmen.amende table.blatt tfoot tr.abrechnung { display: table-row; }

/* Abrechnung: dieselben Spalten wie die Liste, damit jeder Betrag unter
   seinem Spieler steht. */
table.blatt tfoot tr.abrechnung th { text-align: right; font-weight: 500; }
.tischmodus table.blatt tfoot tr.kassierzeile th {
  background: #442b25; color: var(--accent-light);
  font-size: 16px; font-weight: 700; line-height: 1.15;
}
.tischmodus table.blatt tfoot tr.kassierzeile .tischsumme {
  font-size: clamp(22px, 2.5vw, 30px); font-weight: 900;
  font-variant-numeric: tabular-nums;
}
/* Kassierfeld: vor und nach der Bestaetigung klar unterscheidbar. */
table.blatt td.kassierfeld { font-weight: 700; height: 44px; }
table.blatt td.kassierfeld.orange { background: #fde9d0; color: #7a4a06; }
table.blatt td.kassierfeld.gruen  { background: #d8f0d8; color: #1f5c22; }
table.blatt td.kassierfeld.tippbar { cursor: pointer; }
@media (prefers-color-scheme: dark) {
  table.blatt td.kassierfeld.orange { background: #5a3c12; color: #ffd9a8; }
  table.blatt td.kassierfeld.gruen  { background: #1f3f22; color: #bdf0bd; }
}

/* Spielliste.de: dunkle, kontrastreiche Touchansicht am Spieltisch. */
body.tischmodus {
  --bg: #111418; --card: #1c2127; --ink: #f4f2eb;
  --muted: #a9b0b8; --line: #39424a; --accent: #CD4C25;
  --accent-light: #E47B59; --accent-ink: #ffffff; --good: #55cc70; --bad: #f07570;
  height: 100dvh; overflow: hidden; display: flex; flex-direction: column;
}
body.tischmodus > header {
  display: none;
}
body.tischmodus.browserlayout > header { display:flex; flex:0 0 auto; }
body.tischmodus.browserlayout .seitenmenue { display:block; }
body.tischmodus.browserlayout main.weit { max-width:1600px; }
body.tabletlayout:not(.tischmodus):not(.geraetemodus) { --bg:#111418; --card:#20252b;
  --ink:#f4f2eb; --muted:#a9b0b8; --line:#46515a; color-scheme:dark; }
body.tabletlayout:not(.tischmodus):not(.geraetemodus) > header,
body.tabletlayout:not(.tischmodus):not(.geraetemodus) .seitenmenue { display:none; }
body.tabletlayout:not(.tischmodus):not(.geraetemodus) main { max-width:none; }
body.tischmodus > header a { color: #f4f2eb; }
body.tischmodus main.weit {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; flex-direction: column; padding: 10px 12px 6px;
}
.tischmodus .tischkopf {
  flex: 0 0 auto; margin-bottom: 6px; border-color: #515a61;
  background: #20252b; display: block; padding: 0;
}
.tischmodus .tischkopf .titelzeile {
  display: flex; align-items: center; padding: 7px 12px;
  background: #442b25; border-radius: var(--radius) var(--radius) 0 0;
}
.tischmodus .tischkopf h2 { color: var(--accent-light); font-size: 17px; }
.tischmodus .tischkopf .statuszeile {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 5px 12px; padding: 5px 12px;
}
.tischmodus .tischkopf .statuszeile .meta { color: #d6dce1; font-size: 14px; font-weight: 600; }
.tischmodus .tischkopf .spielzeit {
  color: var(--accent-light); font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tischmodus .tischkopf .spielzeit.abgelaufen { color: #ff9b7e; }
.tischmodus .tischkopf .werkzeuge { margin-left: auto; }
.tischmodus .tischkopf .werkzeuge .knopf,
.tischmodus .tischkopf .werkzeuge button { padding: 5px 9px; font-size: 13px; }
.vollbild-ecke {
  position: fixed; z-index: 100; right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom)); width: 50px; height: 50px;
  display: grid; place-items: center; padding: 0; border: 2px solid var(--accent-light);
  border-radius: 14px; background: #20252b; color: var(--accent-light);
  box-shadow: 0 4px 18px rgba(0,0,0,.45); font-size: 30px; line-height: 1;
}
.vollbild-ecke[aria-pressed="true"] { background: var(--accent-light); color: #20252b; }
.tischmodus .ergebnis-knopf {
  background: #a72e28; border-color: #d8584c; color: #fff;
  font-weight: 750; text-decoration: none;
}
.tischmodus .ergebnis-knopf:hover { background: #c44235; }
.tischmodus .vollmeldung {
  flex: 0 0 auto; padding: 7px 12px; margin: 0 0 6px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  border-left: 4px solid var(--accent); background: #442b25; color: #ffd6c8;
}
.tischmodus .vollmeldung[hidden] { display: none; }
.tischmodus .vollmeldung.bestaetigungshinweis {
  justify-content: center; border: 2px solid var(--accent);
  border-radius: 8px; font-size: 18px; font-weight: 800;
  animation: bestaetigungspuls 1.8s ease-in-out infinite;
}
@keyframes bestaetigungspuls {
  50% { background: #684034; box-shadow: 0 0 0 3px rgba(205,76,37,.2); }
}
@media (prefers-reduced-motion: reduce) {
  .tischmodus .vollmeldung.bestaetigungshinweis { animation: none; }
}
.tischmodus .blattrahmen {
  flex: 1 1 auto; min-height: 0; max-height: none;
  border-color: #4b555d; border-radius: 8px;
}
.tischmodus table.blatt thead th { background: #262d34; color: #d8dde2; }
.tischmodus table.blatt thead th.spieler .nm { color: #fff; font-size: 15px; }
.tischmodus table.blatt thead th.spieler .nm-vorname,
.tischmodus table.blatt thead th.spieler .nm-nachname {
  display:block; line-height:1.14; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.tischmodus table.blatt thead th.spieler .nm-nachname { font-weight:800; }
.tischmodus table.blatt thead tr:nth-child(2) th { top: var(--blattkopfhoehe, 110px); }
.tischmodus table.blatt tbody tr.aktiv > td {
  background-color: #2b362d; color: #fff;
}
.tischmodus table.blatt tbody tr.aktiv > td.minus,
.tischmodus table.blatt tfoot td.minus { color: var(--bad); }
.tischmodus table.blatt tbody tr.aktiv > td.plus { color: var(--good); }
.tischmodus table.blatt td.kassierfeld {
  font-size: 17px; font-variant-numeric: tabular-nums;
}
.tischmodus table.blatt td.kassierfeld.orange {
  background: #875417; color: #fff4da;
  box-shadow: inset 0 0 0 2px #dca849;
}
.tischmodus table.blatt td.kassierfeld.gruen {
  background: #174c2b; color: #e5ffeb;
  box-shadow: inset 0 0 0 2px #55cc70;
}
.tischmodus table.blatt td.gibt,
.tischmodus table.blatt tr.aktiv > td.gibt {
  background: #3a4147; color: #c5cbd0;
}
.tischmodus .geber-overlay {
  display: inline-block; font-size: 9px; font-weight: 800;
  letter-spacing: .06em; color: #d5d9dc;
}
.tischmodus table.blatt th.waehlbar,
.tischmodus table.blatt td.waehlbar {
  background: #1d3929; box-shadow: inset 0 0 0 2px #59d477;
  color: #f5fff6; cursor: pointer;
}
.tischmodus table.blatt thead th.spieler.geberkopf {
  background: #39311f; box-shadow: inset 0 0 0 2px #f2cd6c;
  cursor: pointer;
}
.tischmodus table.blatt thead th.spieler.geberkopf .nm { color: #f2cd6c; }
.tischmodus table.blatt thead th.spieler.geberkopf::after {
  content: 'GEBER'; display: block; color: #f2cd6c;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
}
.tischmodus table.blatt tr.aktiv > td.gibt {
  box-shadow: inset 0 0 0 2px #f2cd6c; cursor: pointer;
}
.tischmodus table.blatt tr.aktiv > td.gibt .geber-overlay { color: #f2cd6c; }
.tischmodus table.blatt thead th.spieler.waehlbar::after {
  content: 'ANTIPPEN'; display: block; color: #8af0a4;
  font-size: 10px; letter-spacing: .06em;
}
.tischmodus table.blatt th.eingepasstkopf.waehlbar,
.tischmodus table.blatt tr.aktiv > td:last-child.waehlbar {
  background: #51401a; box-shadow: inset 0 0 0 2px #f0c657;
  color: #ffe6a6; cursor: pointer;
}
.tischmodus col.s-eingepasst { width: 5em; }
.tischmodus table.blatt tfoot tr.klebt th,
.tischmodus table.blatt tfoot tr.klebt td { background: #283038; }
.tischmodus .tischfuss {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; padding: 8px 0 0;
}
.tischmodus .tischfuss[hidden] { display: none; }
.tischmodus .tischfuss-platz {
  display: flex; flex-wrap: wrap; gap: 3px 10px;
  align-items: center; justify-content: space-between;
  padding: 8px 12px; border: 1px solid #48525a;
  border-radius: 8px; background: #252c32;
}
.tischmodus .tischfuss-name {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--accent-light); font-weight: 700;
}
.tischmodus .tischfuss-punkte { font-variant-numeric: tabular-nums; }
.tischmodus .tischfuss-punkte.negativ { color: var(--bad); }
.tischmodus .tischfuss-betrag {
  width: 100%; min-height: 50px; margin-top: 4px;
  font-weight: 800; font-size: 17px; border-width: 2px;
}
.tischmodus .tischfuss-betrag.offen {
  background: #9d6517; border-color: #f0b84b; color: white;
}
.tischmodus .tischfuss-betrag.bezahlt {
  background: #174c2b; border-color: #55cc70; color: #e5ffeb;
}
.tischmodus .tischfuss-betrag:disabled { opacity: 1; cursor: default; }
.tischmodus .legende { flex: 0 0 auto; margin: 5px 2px 0; }
@media (max-width: 700px) {
  .tischmodus .tischfuss { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tischmodus .tischfuss-platz { padding: 5px 8px; }
  .tischmodus .tischfuss-betrag { min-height: 42px; font-size: 17px; }
}

/* Popover ueber der Liste */
.popover {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px)); z-index: 50;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.25);
  padding: 12px;
}
.popover .popkopf {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 14px; color: var(--ink);
}
.popover .poptitel { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 800; line-height: 1.15; }
.popover .popspiel { display: block; color: var(--accent); font-size: .7em; margin-top: 5px; }
.popover .popaktionen { display: flex; gap: 5px; flex: 0 0 auto; }
.popover .popaktionen button { padding: 8px 10px; }
.popover .popgitter { display: grid; gap: 8px; margin-bottom: 8px; }
.popover .popgitter.zwei  { grid-template-columns: repeat(2, 1fr); }
.popover .popgitter.drei  { grid-template-columns: repeat(3, 1fr); }
.popover .popgitter.vier  { grid-template-columns: repeat(4, 1fr); }
.popover .popgitter.sechs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.popover .popgitter.sieben { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.popover .popgitter.nullvarianten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.popover .popgitter.nullvarianten button { min-height: 58px; font-weight: 700; }
.popover .popgitter .artsymbol { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; line-height: 1; min-height: 66px; }
.popover .popgitter .artsymbol.rot { color: #ef7771; }
.popover .popgitter button { padding: 14px 6px; font-size: 1rem; }
.popover .popgitter button small { display: block; font-size: .7rem; opacity: .6; }
.popover .popgitter.gross button { padding: 18px 6px; font-size: 1.1rem; font-weight: 700; }
.popover button.gewonnen { background: var(--good); color: #fff; border-color: var(--good); }
.popover button.verloren { background: var(--bad);  color: #fff; border-color: var(--bad); }
.popover button.blaettern { font-style: italic; }
.popover .popwert { text-align: center; margin: 6px 0; color: var(--muted); }
.popover .popwert strong { font-size: 1.3rem; color: var(--ink); }

/* Grosse Anzeige nach gewonnen/verloren - aus zwei Metern lesbar */
.popover.ergebnisanzeige { text-align: center; padding: 26px 20px; width: min(680px, calc(100vw - 24px)); }
.popover.ergebnisanzeige .ergebnisnummer,
.popover.ergebnisanzeige .eingepasstnummer { font-size: 1.5rem; color: var(--muted); margin-bottom: 10px; }
.popover.ergebnisanzeige .vorname { display: block; font-size: clamp(1.7rem, 4vw, 2.5rem); opacity: .9; }
.popover.ergebnisanzeige .nachname { display: block; font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 800; line-height: 1.1; }
.popover.ergebnisanzeige .wert { font-size: clamp(4rem, 11vw, 7rem); font-weight: 900; line-height: 1.1; }
.popover.ergebnisanzeige .eingepassttext { font-size: clamp(2.8rem, 8vw, 5rem); font-weight: 900; color: var(--accent); line-height: 1.1; margin-bottom: 14px; }
.popover.ergebnisanzeige.gewonnen .wert { color: var(--good); }
.popover.ergebnisanzeige.verloren .wert { color: var(--bad); }
.popover.ergebnisanzeige .was { color: var(--muted); margin-bottom: 10px; }
.popover.ergebnisanzeige .weiter { width: 100%; padding: 14px; font-size: 1rem; }

/* Preissummen gegen die Startgelder, und die Preistabelle nach
   Teilnehmerzahl. Beides sind Kontrollblicke, keine Eingabe - deshalb
   schmal und ruhig. */
table.abgleich, table.staffel { width: auto; margin: .5rem 0; }
table.abgleich td, table.staffel td, table.staffel th {
  padding: .2rem .7rem .2rem 0;
  border: none;
}
table.abgleich tr.summe td { border-top: 1px solid var(--line); }
table.abgleich tr.minus td { color: var(--warn); }
table.staffel th { text-align: right; font-weight: 600; }
table.staffel th:first-child, table.staffel td:first-child { text-align: left; }
#staffelbereich { margin: 1rem 0; }
#staffelbereich summary { cursor: pointer; font-weight: 600; }
#staffelraster { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Im Spieltagsblatt steht unter der Startzeit, was sie fuer den BETRACHTER
   bedeutet - Zeitzone und "in 37 Minuten". Die Wanduhrzeit bleibt im Feld. */
table.serientabelle .beginn { margin-top: 2px; font-size: 12px; }

/* Teams: die Spielerauswahl eines Teams. Vergebene Spieler stehen unten und
   sind nicht waehlbar - so sieht man, WO einer schon drin ist. */
.teamwahl { background: var(--bg); padding: .5rem; border-radius: var(--radius); }
.haken.teamliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .1rem .8rem;
  max-height: 16rem;
  overflow-y: auto;
}
.haken.teamliste label { display: flex; align-items: center; gap: .3rem; margin: 0; }
.haken.teamliste label.vergeben { opacity: .55; }
.haken.teamliste input { width: auto; margin: 0; }
nav#teamreiter button { flex-direction: column; align-items: flex-start; }

/* Teams zeilenweise: je Team ein Block mit einer Zeile fuer den Namen und
   einer Zeile je Spielerplatz. In jeder Platzzeile wird getippt, darunter
   erscheint die Auswahl. */
.teamblock {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .6rem .7rem;
  margin: .6rem 0;
}
.teamblock .reihe { margin-bottom: .2rem; }
.teamblock p.wert { margin: 0; padding: .45rem 0; }
table.teamplaetze { width: auto; margin: .2rem 0 0; }
table.teamplaetze td { border: none; padding: .15rem .5rem .15rem 0; vertical-align: top; }
table.teamplaetze td:first-child { color: var(--muted); }
table.teamplaetze input { margin: 0; min-width: 16rem; }
/* Die Auswahl steht UNTER dem Feld, nicht ueber der Tabelle: in einer
   Tabellenzelle laesst sich nichts zuverlaessig absolut positionieren. */
table.teamplaetze .vorschlaege {
  position: static;
  display: flex;
  flex-direction: column;
  margin-top: 2px;
  max-height: 12rem;
  overflow-y: auto;
}
table.teamplaetze .vorschlaege button { text-align: left; width: 100%; }

/* Startzeit im Spieltagsblatt: ein TEXTfeld, kein <input type="time">.
   Dessen Stunden- und Minutenfelder springen beim Tippen eigene Wege -
   bei zwoelf Serien ist das nicht zu gebrauchen. Schmal wie die alte
   Zelle, damit die Tabelle gleich aussieht. */
input.zeitfeld { width: 5.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.serienknoepfe { margin-top: .35rem; }

.tischvorschau { margin: .35rem 0 1rem; }
.tischvorschau #tischnummernhinweis { display: block; margin-top: .25rem; overflow-wrap: anywhere; }

.popover { max-height:calc(100dvh - 24px); overflow-y:auto; }
.popover .popabschnitt { margin:0 0 10px; }
.popover .popabschnitt > strong { display:block; margin-bottom:5px; }
.popover .popgitter button.aktiv { border:2px solid var(--accent); background:var(--accent); color:#fff; }

/* Die normale Eingabe orientiert sich am Spielwertfenster.
   Das umfangreichere Bearbeiten behaelt bewusst sein eigenes Format. */
.tischmodus .popover:not(.ergebnisanzeige):not(.bearbeiten) {
  top: auto; bottom: 16px; transform: translateX(-50%);
  width: min(680px, calc(100vw - 24px));
  height: min(440px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}
.tischmodus .popover .popgitter.spitzenreihe button { min-height: 58px; }
.tischmodus .abschlussdialog {
  position: fixed; inset: 0; z-index: 120; display: grid;
  place-items: center; padding: 16px;
  background: rgba(4, 8, 11, .78);
  backdrop-filter: blur(6px);
}
.tischmodus .abschlusskarte {
  width: min(560px, 100%); padding: clamp(22px, 4vw, 38px);
  border: 2px solid var(--accent); border-radius: 18px;
  background: linear-gradient(155deg, #303720, #20262b 45%, #171d21);
  color: #f4f2eb; text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.65), inset 0 1px rgba(255,255,255,.08);
}
.tischmodus .abschlusszeichen {
  width: 70px; height: 70px; margin: 0 auto 12px;
  display: grid; place-items: center; border: 2px solid #55cc70;
  border-radius: 50%; background: #174c2b; color: #e5ffeb;
  font-size: 42px; font-weight: 900;
}
.tischmodus .abschlusskarte h2 {
  margin: 0 0 10px; color: var(--accent-light);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
}
.tischmodus .abschlusskarte p { margin: 0 0 24px; font-size: 1.1rem; }
.tischmodus .abschlussaktionen {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;
}
.tischmodus .abschlussaktionen button { min-height: 56px; font-size: 1rem; font-weight: 800; }
.tischmodus .abschlussaktionen .haupt { background: #247c41; border-color: #55cc70; color: #fff; }
.tischmodus .abschlusskarte small { display: block; margin-top: 16px; color: #a9b0b8; }
@media (max-width: 520px) {
  .tischmodus .abschlussaktionen { grid-template-columns: 1fr; }
}
.tischmodus .serienwarte {
  position: fixed; inset: 0; z-index: 90; display: grid;
  place-items: center; overflow-y: auto; padding: 20px;
  background: radial-gradient(circle at 50% 15%, #3b2324 0, #1b2023 38%, #111418 78%);
  color: #f4f2eb; text-align: center;
}
.tischmodus .serienwartekarte {
  width: min(850px, 100%); padding: clamp(24px, 5vw, 56px);
  border: 2px solid var(--accent); border-radius: 22px;
  background: linear-gradient(145deg, #362425, #20252b 52%, #171d21);
  box-shadow: 0 20px 60px #0008;
}
.tischmodus .serienwartemarke {
  color: var(--accent-light); font-size: clamp(.9rem, 1.4vw, 1.2rem);
  letter-spacing: .2em; font-weight: 800;
}
.tischmodus .serienwarte h1 {
  margin: 12px 0 4px; color: var(--accent-light);
  font-size: clamp(2rem, 6vw, 4rem); line-height: 1.1;
}
.tischmodus .serienwarteserie { margin: 0; color: #d5d9dc; font-size: clamp(1rem, 2vw, 1.5rem); }
.tischmodus .serienwartetisch {
  display: block; margin: 18px 0; font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 1; letter-spacing: .04em;
}
.tischmodus .serienwarte h2 { color: var(--accent-light); margin: 16px 0 4px; }
.tischmodus .serienwarte p { margin: 4px 0 14px; }
.tischmodus .serienwarte ol {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 24px;
  margin: 12px auto 0; padding-left: 28px; max-width: 650px; text-align: left;
  font-size: clamp(1.1rem, 2.3vw, 1.7rem);
}
@media (max-width: 520px) {
  .tischmodus .serienwarte ol { grid-template-columns: 1fr; }
}
.tischmodus .vollbildseite {
  position: fixed; inset: 0; z-index: 90; display: flex;
  flex-direction: column; gap: 8px; padding: 8px;
  background: #111418;
}
.tischmodus .vollbildseite[hidden] { display: none; }
.tischmodus .vollbildseite > button {
  align-self: flex-start; background: #a72e28; border-color: #d8584c;
  color: #fff; font-weight: 800; font-size: 17px;
}
.tischmodus .vollbildseite iframe {
  flex: 1 1 auto; width: 100%; min-height: 0; border: 1px solid #46515a;
  border-radius: 8px; background: #111418;
}
.tischmodus .popover.bearbeiten {
  top: 50%; bottom: auto; transform: translate(-50%, -50%);
  width: min(900px, calc(100vw - 20px));
  height: min(620px, calc(100dvh - 20px));
  max-height: calc(100dvh - 20px);
  display: flex; flex-direction: column; overflow: hidden;
}
.tischmodus .popover[hidden] { display:none; }
.tischmodus.in-tablet-frame .vollbild-ecke { display:none !important; }
.popover.bearbeiten .popkopf { flex: 0 0 auto; }
.popover.bearbeiten .bearbeiteninhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.popover.bearbeiten .bearbeitenaktionen {
  flex: 0 0 auto; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  padding-top: 9px; border-top: 1px solid var(--line);
}
.popover.bearbeiten .bearbeitenaktionen button { min-height: 52px; font-weight: 800; }
.popover.bearbeiten .eingepasst-aktion {
  background: #5d491d; color: #ffe29b; border-color: #d5a637;
}
@media (max-width: 500px) {
  .popover.bearbeiten .bearbeitenaktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .popover.bearbeiten .eingepasst-aktion { grid-column: 1 / -1; }
}
.popover.bearbeiten .popkopf { margin-bottom: 6px; }
.popover.bearbeiten .poptitel { font-size: clamp(1.15rem, 2.3vw, 1.6rem); }
.popover.bearbeiten .popabschnitt { margin-bottom: 5px; }
.popover.bearbeiten .popabschnitt > strong { margin-bottom: 3px; font-size: .9rem; }
.popover.bearbeiten .popgitter { gap: 5px; margin-bottom: 5px; }
.popover.bearbeiten .popgitter button { min-height: 38px; padding: 5px 4px; }
.popover.bearbeiten .popgitter .artsymbol { min-height: 48px; font-size: 1.8rem; }
.popover.bearbeiten .popgitter.spielerreihe { grid-template-columns:repeat(4,minmax(0,1fr)); }
.popover.bearbeiten .popgitter.spielerreihe button {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:clamp(.7rem,1.4vw,1rem);
}
.popover.bearbeiten .popgitter.spitzenreihe { grid-template-columns:repeat(6,minmax(0,1fr)); }
.popover.bearbeiten .popgitter.spitzenreihe.vier { grid-template-columns:repeat(4,minmax(0,1fr)); }
.popover.bearbeiten .popgitter.gross button { min-height:44px; padding:6px; }
.popover.bearbeiten .popwert { margin:2px 0; }
@media(max-height:680px) {
  .popover.bearbeiten .popkopf { margin-bottom:3px; }
  .popover.bearbeiten .popabschnitt { margin-bottom:3px; }
  .popover.bearbeiten .popgitter button { min-height:32px; padding:3px; }
  .popover.bearbeiten .popgitter .artsymbol { min-height:39px; font-size:1.5rem; }
  .popover.bearbeiten .popgitter.gross button { min-height:38px; }
}