/* HappyBet - Oberflaeche nach dem Vorbild gaengiger Wettanbieter:
   eine rote Kopfleiste, heller Grund, weisse Karten mit weichen Ecken,
   Ligenbaum links, Wettschein rechts mit rotem Kopfbalken. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Aus der Logodatei abgetastet, damit Seite und Logo denselben Ton haben:
     haeufigstes Rot #d0001c, dunkelster Verlaufston #840418. */
  --rot: #d0001c;
  --rot-dunkel: #a80016;
  --rot-hell: #fde9eb;
  --gruen: #00875a;
  --gruen-hell: #e3f5ed;
  --gelb: #ffc107;
  --bg: #f5f6f6;
  --karte: #ffffff;
  --linie: #e6eaef;
  --linie-zart: #f0f2f5;
  --text: #333538;
  --text-grau: #6f7479;
  --text-hell: #9ca3ab;
  --quote-bg: #e6eaef;
  --quote-hover: #d9dfe6;
  --schatten: 0 1px 2px rgba(18, 20, 20, 0.06);
  --radius-karte: 12px;
  --radius-klein: 7.2px;
  --text-liga: #121414;
  --text-land: #646f75;
}

* { box-sizing: border-box; }

/* --- Schutzzone des Geraets -------------------------------------------------
   Statt `env(safe-area-inset-*)` ueberall direkt zu benutzen, laeuft alles
   ueber diese beiden Variablen. Grund:

   Vom Startbildschirm aus (`apple-mobile-web-app-capable` mit
   `black-translucent`) laeuft die Seite unter die Statusleiste - Uhr, Empfang
   und Akku liegen dann ueber unserem Inhalt. Dagegen hilft nur der
   Innenabstand aus `env()`. Der meldet in genau diesem Modus auf iOS aber
   nicht zuverlaessig einen Wert; kommt 0 zurueck, sitzt das Logo unter der
   Uhr. Im Browser dagegen ist 0 voellig richtig, weil Safari seine eigene
   Leiste darueber legt.

   Deshalb: Im Browser gilt env() unveraendert. Nur wenn die Anwendung vom
   Startbildschirm laeuft (Klasse `startbildschirm`, in app.js gesetzt), gilt
   zusaetzlich ein Mindestwert. `max()` nimmt den echten Wert, wo er kommt -
   der Mindestwert greift nur im Fehlerfall. */
:root {
  --schutz-oben: env(safe-area-inset-top);
  --schutz-unten: env(safe-area-inset-bottom);
}
body.startbildschirm {
  --schutz-oben: max(env(safe-area-inset-top), 44px);
  --schutz-unten: max(env(safe-area-inset-bottom), 20px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;

}

/* Kein Zoom beim doppelten Antippen.
   Wer zwei Quoten schnell hintereinander tippt, meint zwei Wetten - nicht
   "vergroessern". iOS deutet das aber als Doppeltipp und zieht die Seite heran;
   danach steht alles verschoben da.

   `manipulation` schaltet genau das ab und laesst alles andere in Ruhe:
   Scrollen geht weiter, und Zoomen mit zwei Fingern bleibt erhalten - das
   braucht, wer schlecht sieht. Deshalb NICHT `user-scalable=no` im Viewport,
   das naehme beides.

   Wichtig: `touch-action` wird NICHT vererbt. Die Regel allein auf `body` sah
   im Stylesheet richtig aus, aendert aber nichts an den Knoepfen darin - und
   genau dort tippt man. Deshalb steht sie hier auf allem, was man antippt.
   Der Schieber fuer die Teilauszahlung ist ausgenommen: Er braucht das
   Ziehen quer zur Scrollrichtung. */
html, body,
button, a, label, summary,
input:not([type="range"]), select, textarea,
.spiel, .quote-knopf, .kachel, .meldung, .wettschein-karte, .karte {
  touch-action: manipulation;
}

a { color: var(--rot); text-decoration: none; }
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea {
  font-family: inherit; font-size: 14px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  padding: 9px 12px; width: 100%; background: var(--karte); color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--rot); outline-offset: -1px; }

/* Kein Hineinzoomen beim Antippen eines Feldes.
   iOS vergroessert die Seite automatisch, sobald ein Eingabefeld eine Schrift
   unter 16px hat - danach steht die Ansicht verschoben da. Die Regel haengt
   bewusst an der Zeigergenauigkeit und nicht an der Fensterbreite: Ein Tablet
   im Querformat ist breiter als jede Breiten-Abfrage und zoomt trotzdem.
   Der andere verbreitete Weg waere `maximum-scale=1` im Viewport - der
   verhindert aber auch das Zoomen von Hand und ist damit eine Zumutung fuer
   alle, die schlecht sehen. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}

.hidden { display: none !important; }

/* ------------------------------------------------------------- Kopfleiste */

.topbar {
  /* Beim Vorbild liegt hinter der Kopfleiste ein 207px hoher Verlauf, von dem
     hier nur die obersten 48px sichtbar sind - das Rot wird nach unten hin
     also merklich dunkler. Ohne background-size wuerde der ganze Verlauf in
     die 48px gequetscht. Die Handyansicht setzt denselben Verlauf auf body. */
  background: linear-gradient(var(--rot) 12px, #5c0016 122px, #121414 207px) no-repeat;
  background-size: 100% 207px;
  color: #fff;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px 0 20px;      /* linker Rand wie beim Vorbild */
  position: sticky; top: 0; z-index: 60;
}

.logo {
  font-weight: 800; font-size: 21px; letter-spacing: -1.1px;
  color: #fff; white-space: nowrap; margin-right: 26px;
}

.topnav { display: flex; align-items: center; gap: 2px; overflow-x: auto; }
.topnav::-webkit-scrollbar { height: 0; }
.topnav button {
  color: #fff; padding: 6px 14px; font-size: 13.5px; font-weight: 400;
  border-radius: var(--radius-klein); white-space: nowrap; opacity: 0.95;
}
.topnav button:hover { background: rgba(255, 255, 255, 0.14); opacity: 1; }
.topnav button.aktiv { font-weight: 700; opacity: 1; background: rgba(0, 0, 0, 0.14); }
.topnav .zahl {
  background: #fff; color: var(--rot); border-radius: 10px;
  padding: 0 6px; font-size: 11.5px; margin-left: 6px; font-weight: 800;
  display: inline-block; vertical-align: 1px;
}

.topbar-spacer { flex: 1; }

.guthaben {
  background: rgba(0, 0, 0, 0.16); padding: 5px 12px; border-radius: 9999px;
  font-weight: 700; white-space: nowrap; font-size: 13px;
}
.guthaben small { display: block; font-size: 10px; font-weight: 500; opacity: 0.85; line-height: 1; margin-bottom: 1px; }

.topbar .name { font-weight: 500; white-space: nowrap; font-size: 14px; margin: 0 4px; }

.btn-rand {
  border: 1px solid rgba(255, 255, 255, 0.55); color: #fff;
  padding: 7px 14px; border-radius: var(--radius-klein); font-weight: 600; font-size: 14px;
}
.btn-rand:hover { background: rgba(255, 255, 255, 0.14); }

/* ----------------------------------------------------------------- Layout */

.layout {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: eine Gitterspalte waere sonst mindestens so
     breit wie ihr laengster nicht umbrechbarer Inhalt. Waagerecht scrollbare
     Leisten (Marktgruppen, Reiter) wuerden die Spalte dann aufblaehen und die
     ganze Seite nach rechts schieben. */
  /* Am Vorbild abgemessen (1440px breit): linke Spalte 284, Mittelteil der
     Rest, Wettschein 317, Abstand 16, aussen 7 - und zwar randlos ueber die
     ganze Breite, nicht als zentrierter Kasten. */
  grid-template-columns: 284px minmax(0, 1fr) 317px;
  gap: 16px;
  margin: 0;
  padding: 14px 7px;
  align-items: start;
}
.layout.ohne-sidebar { grid-template-columns: minmax(0, 1fr) 317px; }
/* Damit auch die Kinder der Mittelspalte schrumpfen duerfen */
.layout > section { min-width: 0; }

.karte {
  background: var(--karte);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten);
  overflow: hidden;
}

.karte-kopf {
  padding: 12px 14px 8px;
  font-weight: 400;
  font-size: 13.5px;
  display: flex; align-items: center; gap: 8px;
}
.karte-kopf .klein { font-size: 13px; font-weight: 400; color: var(--text-grau); }
.karte-kopf .alle { margin-left: auto; font-size: 13px; color: var(--text-grau); font-weight: 500; }

/* --------------------------------------------------------------- Sidebar */

.sidebar { position: sticky; top: 70px; }
.sidebar .karte + .karte { margin-top: 14px; }

.suchfeld { padding: 12px; position: relative; }
.suchfeld input {
  background: var(--bg); border-color: transparent; border-radius: 20px;
  padding-left: 34px;
  /* 16px, damit iOS beim Antippen nicht in die Seite hineinzoomt. */
  font-size: 16px;
}
.suchfeld::before {
  content: "⌕"; position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  color: var(--text-hell); font-size: 19px; pointer-events: none; z-index: 1;
}

.abschnitt-titel {
  padding: 10px 14px 6px; font-size: 13.5px; font-weight: 400; color: var(--text);
}

/* Die drei Spalten teilen sich die Breite, statt fest 86px zu belegen.
   Fest gerechnet kam das Gitter auf 288px und passte damit nicht in die
   284px breite Spalte: Die rechte Kachel ragte 4px ueber den Kartenrand
   hinaus, wodurch die ganze Gruppe nach rechts verschoben wirkte. Mit
   1fr stehen links und rechts dieselben 14px wie bei der Ueberschrift -
   und es passt auch in der schmalen Seitenleiste (210px). */
.schnellzugriff {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 0 14px 14px; justify-content: start;
}
.schnellzugriff button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: auto; height: 64px; border-radius: var(--radius-klein);
  font-size: 10.5px; color: var(--text); font-weight: 400; text-align: center;
  line-height: 1.15;
}
.schnellzugriff button:hover { background: var(--linie-zart); }
.schnellzugriff button.aktiv { color: var(--rot); font-weight: 700; }
.schnellzugriff .symbol { font-size: 19px; line-height: 1; }

.sportzeile {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; font-size: 14px; font-weight: 500; text-align: left;
}
.sportzeile:hover { background: var(--linie-zart); }
.sportzeile.aktiv { color: var(--rot); font-weight: 700; }
.sportzeile .punkt { width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; }
.sportzeile .anzahl { margin-left: auto; color: var(--text-hell); font-size: 13px; font-weight: 400; }
.sportzeile .pfeil { color: var(--text-hell); font-size: 10px; transition: transform 0.15s; }
.sportzeile.offen .pfeil { transform: rotate(180deg); }

.ligenliste { padding-bottom: 4px; }
.ligenliste button {
  width: 100%; text-align: left; padding: 7px 16px 7px 41px;
  font-size: 13.5px; color: var(--text-grau); display: flex; align-items: center; gap: 7px;
}
.ligenliste button:hover { background: var(--linie-zart); color: var(--text); }
.ligenliste button.aktiv { color: var(--rot); font-weight: 700; }
.ligenliste .anzahl { margin-left: auto; font-size: 12.5px; color: var(--text-hell); }

.live-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--rot); flex-shrink: 0; }

/* ----------------------------------------------------- Top-Wettbewerbe */

.liga-zeile {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 6px 14px; height: 34px; text-align: left;
}
.liga-zeile:hover { background: var(--linie-zart); }
.liga-zeile.aktiv { color: var(--rot); }
.liga-zeile .flagge { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.liga-zeile .namen { flex: 1; min-width: 0; line-height: 1.15; }
.liga-zeile .name {
  font-size: 13.5px; font-weight: 500; color: var(--text-liga);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.liga-zeile.aktiv .name { color: var(--rot); }
.liga-zeile .land { font-size: 10.35px; color: var(--text-land); }
.liga-zeile .anzahl { color: var(--text-land); font-size: 12px; }

/* ------------------------------------------------------------- Im Trend */

.trend-reiter { display: flex; gap: 18px; padding: 0 14px; border-bottom: 1px solid var(--linie-zart); }
.trend-reiter button {
  padding: 6px 0 8px; font-size: 13.5px; color: var(--text-grau);
  border-bottom: 2px solid transparent;
}
.trend-reiter button.aktiv { color: var(--text); border-bottom-color: var(--rot); font-weight: 500; }

.trend-zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--linie-zart); min-height: 85px;
}
.trend-zeile:last-child { border-bottom: none; }
.trend-inhalt { flex: 1; min-width: 0; }
.trend-kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
/* Am Vorbild abgemessen: Markenrot mit halber Deckkraft, 9px, 14 hoch. */
.trend-anzahl {
  background: rgba(208, 0, 28, 0.5); color: #fff; border-radius: 9999px;
  padding: 0 5px; height: 14px; line-height: 14px; font-size: 9px; font-weight: 700;
}
.trend-hinweis { font-size: 10.5px; color: var(--text-land); }
.trend-tipp { font-size: 13.5px; font-weight: 600; color: var(--text-liga); }
.trend-partie { font-size: 12px; color: var(--text-grau); margin-top: 2px; }
.trend-stand { font-size: 12px; margin-top: 2px; display: flex; gap: 8px; align-items: center; }
.trend-stand .minute { color: var(--rot); font-weight: 500; }
.trend-quote {
  background: var(--quote-bg); border-radius: var(--radius-klein);
  width: 96px; height: 32px; display: grid; place-items: center;
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.trend-quote:hover { background: var(--quote-hover); }
.trend-quote.gewaehlt { background: var(--rot); color: #fff; }

/* --------------------------------------------------------- Sportartenband */

.sportband { display: flex; gap: 2px; padding: 12px 10px 8px; overflow-x: auto; }
.sportband::-webkit-scrollbar { height: 0; }
.sportband button {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px 12px 8px; min-width: 72px;
  font-size: 12px; font-weight: 500; color: var(--text-grau);
  border-bottom: 2px solid transparent; position: relative; white-space: nowrap;
}
.sportband button.aktiv { color: var(--rot); font-weight: 700; border-bottom-color: var(--rot); }
.sportband .symbol { width: 26px; height: 26px; border-radius: 50%; position: relative; }
.sportband .zaehler {
  position: absolute; top: -3px; right: -11px;
  font-size: 10.5px; color: var(--text-hell); font-weight: 600;
}

/* "Live" und "Heute" stehen als erste Eintraege in der Leiste - mit ihrer
   Anzahl direkt hinter dem Wort, damit man sieht, ob sich das Antippen lohnt. */
.band-zahl {
  display: inline-block; margin-left: 5px; padding: 0 5px;
  background: var(--rot); color: #fff;
  border-radius: 9999px; font-size: 10px; font-weight: 800;
  vertical-align: 1px;
}
.sportband button.aktiv .band-zahl { background: var(--rot); }
/* Der Punkt bei "Live" blinkt langsam - wie die Anzeige im Match-Center. */
.sportband .symbol.live-punkt {
  color: #ff4d5e; font-size: 17px; line-height: 26px;
  animation: livePuls 1.6s ease-in-out infinite;
}
@keyframes livePuls { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* -------------------------------------------------------- Ereignisbereich */

.filterzeile { display: flex; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.filterzeile button {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 18px;
  padding: 7px 15px; font-size: 13.5px; font-weight: 500; color: var(--text-grau);
}
.filterzeile button:hover { border-color: var(--text-hell); }
.filterzeile button.aktiv { background: var(--text); border-color: var(--text); color: #fff; font-weight: 600; }

/* Wettleiste ueber der Liveliste: waehlt die Wettart, die in jeder Zeile
   darunter steht.

   Anders als die Filterzeile bricht sie NICHT um, sondern laeuft seitwaerts
   weiter - bei zehn Eintraegen waeren es sonst drei Reihen, die den Blick auf
   die Spiele verstellen. Das Vorbild macht es genauso. */
.wettleiste {
  display: flex; gap: 7px; margin-bottom: 12px;
  overflow-x: auto; scrollbar-width: none;
  /* Damit der aktive Knopf am Rand nicht angeschnitten wirkt. */
  padding: 2px 1px;
}
.wettleiste::-webkit-scrollbar { display: none; }
.wettleiste button {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 18px;
  padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--text-grau);
  white-space: nowrap; flex-shrink: 0;
}
.wettleiste button:hover { border-color: var(--text-hell); }
.wettleiste button.aktiv {
  background: var(--rot); border-color: var(--rot); color: #fff; font-weight: 600;
}

/* Zahl der offenen Wettscheine, klein oben rechts am Knopf "Offen".
   Der Knopf braucht dafuer `position: relative` und rechts etwas Luft, damit
   die Zahl nicht auf der Beschriftung sitzt. */
.filterzeile button.mit-zahl { position: relative; padding-right: 20px; }
.filter-zahl {
  position: absolute; top: -5px; right: -4px; left: auto;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--rot); color: #fff;
  border: 2px solid var(--bg);
  border-radius: 9999px;
  font-size: 10.5px; font-weight: 800; line-height: 13px;
  text-align: center; font-variant-numeric: tabular-nums;
}
/* Auf dem dunklen aktiven Knopf hebt sich der Rand sonst nicht ab. */
.filterzeile button.aktiv .filter-zahl { border-color: var(--text); }

.liga-block {
  background: var(--karte); border-radius: var(--radius-karte);
  box-shadow: var(--schatten); margin-bottom: 14px; overflow: hidden;
}
.liga-block-kopf {
  padding: 13px 16px 9px; display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px;
}
.liga-block-kopf .land { color: var(--text-grau); font-weight: 400; font-size: 13px; }
.liga-block-kopf .spalten { margin-left: auto; display: flex; gap: 5px; }
.liga-block-kopf .spalten span {
  width: 68px; text-align: center; font-size: 11.5px; color: var(--text-hell); font-weight: 500;
}

.spiel {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 12px;
  border-top: 1px solid var(--linie-zart);
}

/* Begegnung mit veraltetem Stand: Die Quoten sind gesperrt, weil von der
   Datenquelle zu lange nichts mehr kam. Der Hinweis laeuft ueber die ganze
   Breite unter der Zeile - deshalb bricht die Zeile hier um. */
.spiel.stand-alt { flex-wrap: wrap; background: var(--bg); }
.spiel.stand-alt .spiel-quoten { opacity: 0.45; }
.stand-alt-hinweis {
  flex-basis: 100%; margin-top: 4px;
  font-size: 12px; color: var(--text-grau);
}
.spiel:hover { background: #fbfcfd; }

.spiel-zeit {
  width: 50px; flex-shrink: 0;
  font-size: 12.5px; color: var(--text-grau); line-height: 1.25;
}
.spiel-zeit .tag { display: block; font-size: 11px; color: var(--text-hell); }
.spiel-zeit .live { color: var(--rot); font-weight: 700; }

.stern { color: var(--linie); font-size: 16px; padding: 2px 3px; flex-shrink: 0; line-height: 1; }
.stern:hover { color: var(--text-hell); }
.stern.aktiv { color: var(--gelb); }

.spiel-teams { flex: 1; min-width: 0; cursor: pointer; }
.spiel-team {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 500; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spiel-team .tor {
  margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--rot); padding-left: 10px;
}
.spiel-teams:hover .spiel-team { color: var(--rot); }

.spiel-quoten { display: flex; gap: 5px; flex-shrink: 0; }
.quote {
  width: 68px; height: 42px;
  background: var(--quote-bg);
  border-radius: var(--radius-klein);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; line-height: 1.1;
  transition: background 0.12s;
}
.quote:hover { background: var(--quote-hover); }
.quote .titel { font-size: 10.5px; color: var(--text-grau); font-weight: 500; }
.quote .wert { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.quote.gewaehlt { background: var(--rot); }
.quote.gewaehlt .titel, .quote.gewaehlt .wert { color: #fff; }
/* Quotenpfeile wie bei Tipico: nur nach einer Aenderung, blinken etwa drei
   Sekunden und verschwinden dann (app.js quotenBewegung). */
@keyframes quote-blinken {
  0%, 20%, 40%, 60%, 80% { opacity: 1; }
  10%, 30%, 50%, 70% { opacity: 0.15; }
  100% { opacity: 0; }
}
.quote.hoch .wert::after, .quote-breit.hoch .wert::after, .mc-wette.hoch .mc-wette-quote::after {
  content: "▲"; color: var(--gruen); font-size: 9px; margin-left: 3px; vertical-align: 2px;
  display: inline-block; animation: quote-blinken 3s linear forwards;
}
.quote.runter .wert::after, .quote-breit.runter .wert::after, .mc-wette.runter .mc-wette-quote::after {
  content: "▼"; color: var(--rot); font-size: 9px; margin-left: 3px; vertical-align: 2px;
  display: inline-block; animation: quote-blinken 3s linear forwards;
}
.quote.gewaehlt.hoch .wert::after, .quote.gewaehlt.runter .wert::after,
.mc-wette.gewaehlt.hoch .mc-wette-quote::after, .mc-wette.gewaehlt.runter .mc-wette-quote::after { color: #fff; }
.quote:disabled { opacity: 0.45; cursor: default; }

.spiel-mehr {
  width: 44px; flex-shrink: 0; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--text-grau);
  padding: 10px 0; border-radius: var(--radius-klein);
}
.spiel-mehr:hover { background: var(--quote-bg); color: var(--rot); }

/* ---------------------------------------------------------- Detailansicht */

.detail-kopf { padding: 14px 16px; border-bottom: 1px solid var(--linie-zart); }
.detail-zurueck { font-size: 13.5px; color: var(--text-grau); display: inline-block; margin-bottom: 12px; font-weight: 500; }
.detail-zurueck:hover { color: var(--rot); }
.detail-teams { display: flex; align-items: center; gap: 16px; }
.detail-team { flex: 1; font-size: 18px; font-weight: 700; }
.detail-team.gast { text-align: right; }
.detail-stand {
  font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--bg); padding: 5px 16px; border-radius: var(--radius-klein);
}
.detail-meta { margin-top: 10px; font-size: 13px; color: var(--text-grau); display: flex; gap: 14px; flex-wrap: wrap; }
.detail-meta .live { color: var(--rot); font-weight: 700; }

.ticker { background: var(--bg); padding: 10px 16px; max-height: 140px; overflow-y: auto; }
.ticker-zeile { font-size: 13px; color: var(--text-grau); padding: 2px 0; }
.ticker-zeile b { color: var(--rot); font-weight: 600; }

.markt-gruppen { display: flex; gap: 6px; padding: 12px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--linie-zart); }
.markt-gruppen button {
  background: var(--bg); border-radius: 16px; padding: 6px 14px;
  font-size: 13px; font-weight: 500; color: var(--text-grau);
}
.markt-gruppen button.aktiv { background: var(--rot); color: #fff; font-weight: 600; }

.markt { border-bottom: 1px solid var(--linie-zart); }
.markt:last-child { border-bottom: none; }
.markt-kopf {
  width: 100%; text-align: left; padding: 13px 16px;
  font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 8px;
}
.markt-kopf:hover { background: #fbfcfd; }
.markt-kopf .pfeil { margin-left: auto; color: var(--text-hell); font-size: 10px; }
.markt-inhalt { padding: 0 16px 14px; display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); }
.markt-inhalt.zwei { grid-template-columns: repeat(2, 1fr); }
.markt-inhalt.viele { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }

.quote-breit {
  background: var(--quote-bg); border-radius: var(--radius-klein);
  padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13.5px;
}
.quote-breit:hover { background: var(--quote-hover); }
.quote-breit .name {
  color: var(--text-grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;                  /* sonst gewinnt der lange Name gegen die Quote */
}
.quote-breit .wert { font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.quote-breit.gewaehlt { background: var(--rot); }
.quote-breit.gewaehlt .name, .quote-breit.gewaehlt .wert { color: #fff; }

/* ------------------------------------------------------------ Wettschein */

.schein { position: sticky; top: 70px; }
.schein-kopf {
  background: var(--rot); color: #fff; padding: 13px 16px;
  display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px;
  border-radius: var(--radius-karte) var(--radius-karte) 0 0;
}
.schein-kopf .zahl {
  background: #fff; color: var(--rot); border-radius: 11px; padding: 0 8px;
  font-size: 13px; font-weight: 800;
}
/* "Alle Wetten löschen" (02.11.2026): kleiner und umrandet, damit er in die
   Kopfzeile passt und sofort als Knopf zu erkennen ist. */
.schein-kopf .leeren {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; min-height: 28px;
  padding: 3px 11px; border: 1.5px solid rgba(255, 255, 255, 0.9); border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
}
.schein-kopf .leeren:hover { background: rgba(255, 255, 255, 0.24); }
.schein-kopf .leeren:active { background: rgba(255, 255, 255, 0.32); }
.schein-kopf .leeren + .schein-zu { margin-left: 4px; }

.schein-koerper { background: var(--karte); border-radius: 0 0 var(--radius-karte) var(--radius-karte); overflow: hidden; }

.schein-reiter { display: flex; border-bottom: 1px solid var(--linie); }
.schein-reiter button {
  flex: 1; padding: 11px 6px; font-size: 13.5px; font-weight: 600; color: var(--text-grau);
  border-bottom: 2px solid transparent;
}
.schein-reiter button.aktiv { color: var(--rot); border-bottom-color: var(--rot); }
.schein-reiter button:disabled { opacity: 0.35; cursor: default; }

.schein-leer { padding: 34px 20px; text-align: center; }
.schein-leer .symbol { font-size: 34px; color: var(--linie); line-height: 1; }
.schein-leer .titel { font-weight: 700; font-size: 16px; margin-top: 12px; }
.schein-leer .unter { color: var(--text-grau); font-size: 13.5px; margin-top: 3px; }

.schein-liste { max-height: 42vh; overflow-y: auto; }
.schein-pos { padding: 11px 16px; border-bottom: 1px solid var(--linie-zart); position: relative; }
/* Das Kreuz sass oben rechts - genau dort, wohin auch die Quote fliesst
   (float: right). Es lag damit mitten in der Zahl. Jetzt steht es darunter. */
.schein-pos .weg {
  position: absolute; right: 8px; bottom: 5px; top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; min-height: 30px;
  color: var(--text-hell); font-size: 18px; line-height: 1;
}
.schein-pos .weg:hover { color: var(--rot); }
.schein-pos .auswahl { font-weight: 700; font-size: 14px; padding-right: 22px; }
.schein-pos .markt-name { font-size: 12.5px; color: var(--text-grau); }
.schein-pos .partie { font-size: 12.5px; color: var(--text-hell); padding-right: 34px; }
.schein-pos .quote-wert { float: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.schein-pos.geaendert { background: #fffbe9; }

.schein-fuss { padding: 14px 16px; border-top: 1px solid var(--linie); }
.zeile { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13.5px; color: var(--text-grau); }
.zeile .wert { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.zeile.gross { font-size: 15px; padding-top: 8px; }
.zeile.gross .wert { font-size: 19px; color: var(--rot); }
.zeile .boost { color: var(--gruen); }

.einsatz-zeile { display: flex; gap: 6px; margin: 10px 0; }
.einsatz-zeile input { text-align: right; font-weight: 700; font-size: 16px; }
.schnellbetrag { display: flex; gap: 5px; margin-bottom: 10px; }
.schnellbetrag button {
  flex: 1; background: var(--bg); border-radius: var(--radius-klein);
  padding: 7px 0; font-size: 13px; font-weight: 600; color: var(--text-grau);
}
.schnellbetrag button:hover { background: var(--quote-bg); color: var(--text); }

.btn-wetten {
  width: 100%; background: var(--rot); color: #fff; font-weight: 700;
  padding: 13px; border-radius: var(--radius-klein); font-size: 15.5px;
}
.btn-wetten:hover { background: var(--rot-dunkel); }
.btn-wetten:disabled { background: var(--linie); color: var(--text-hell); cursor: not-allowed; }

.system-wahl { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.system-wahl button {
  background: var(--bg); border-radius: var(--radius-klein);
  padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-grau);
}
.system-wahl button.aktiv { background: var(--rot); color: #fff; }

.gast-wahl { margin-bottom: 10px; }
.gast-wahl label { font-size: 12px; color: var(--text-grau); display: block; margin-bottom: 4px; font-weight: 600; }
.gast-wahl .klein { font-weight: 400; color: var(--text-hell); }

.teilen-knopf {
  background: var(--karte); border: 1px solid var(--linie); color: var(--text-grau);
  padding: 8px 13px; border-radius: var(--radius-klein); font-weight: 600; font-size: 13px;
}
.teilen-knopf:hover { border-color: var(--rot); color: var(--rot); }
.gast-marke {
  background: #fff4d6; color: #8a6100; padding: 3px 10px;
  border-radius: 11px; font-size: 11px; font-weight: 700;
}

.freiwette-wahl, .quotenregel { margin-bottom: 10px; }
.freiwette-wahl label, .quotenregel label {
  font-size: 12px; color: var(--text-grau); display: block; margin-bottom: 4px; font-weight: 600;
}

.leer { padding: 34px 20px; text-align: center; color: var(--text-hell); font-size: 14px; }

.hinweis { padding: 10px 13px; border-radius: var(--radius-klein); font-size: 13px; margin: 12px 16px; }
.hinweis.warn { background: #fff8e6; color: #8a6100; }
.hinweis.fehler { background: var(--rot-hell); color: var(--rot); }
.hinweis.ok { background: var(--gruen-hell); color: var(--gruen); }

/* --------------------------------------------------------- Wettscheinliste */

/* Verbleibende Wetten eines verlorenen Scheins uebernehmen */
.rest-bereich {
  border-top: 1px solid var(--linie);
  padding: 10px 14px 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rest-text { font-size: 12.5px; color: var(--text-grau); flex: 1; min-width: 150px; }
.btn-rest {
  background: var(--rot); color: #fff; border: 0;
  padding: 8px 14px; border-radius: var(--radius-klein);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-rest:hover { background: var(--rot-dunkel); }
.btn-rest:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 980px) {
  .rest-bereich { padding: 10px 12px 12px; }
  .btn-rest { width: 100%; }
}

.wettschein-karte {
  background: var(--karte); border-radius: var(--radius-karte);
  box-shadow: var(--schatten); margin-bottom: 12px; overflow: hidden;
}
.wk-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--linie-zart);
}
.wk-kopf .id { color: var(--text-hell); font-size: 12px; margin-left: auto; }

.zustand { padding: 3px 10px; border-radius: 11px; font-size: 11px; font-weight: 800; letter-spacing: 0.2px; }
.zustand.open { background: #fff4d6; color: #8a6100; }
.zustand.won { background: var(--gruen-hell); color: var(--gruen); }
.zustand.lost { background: var(--rot-hell); color: var(--rot); }
/* Cashout in Gelb, nicht in Blau: Der Betreiber liest die Staende an der
   Farbe, und Gelb steht fuer "vorzeitig beendet". Deutlich kraeftiger als das
   blasse Gelb von OFFEN, sonst waeren die beiden nicht zu unterscheiden. */
.zustand.cashed_out { background: #fbdf7a; color: #6b4a00; }
.zustand.void { background: var(--bg); color: var(--text-grau); }

.wk-pos { display: flex; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--linie-zart); align-items: flex-start; }
.wk-pos:last-of-type { border-bottom: none; }
.wk-marke { width: 18px; text-align: center; font-weight: 800; flex-shrink: 0; }
.wk-marke.won { color: var(--gruen); }
.wk-marke.lost { color: var(--rot); }
.wk-marke.open { color: var(--gelb); }
.wk-inhalt { flex: 1; min-width: 0; }
.wk-auswahl { font-weight: 700; font-size: 14px; }
.wk-meta { font-size: 12.5px; color: var(--text-grau); }
.wk-quote { font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.wk-fuss {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; background: #fbfcfd; border-top: 1px solid var(--linie-zart);
}
.wk-fuss .kv { font-size: 13px; color: var(--text-grau); }
.wk-fuss .kv b { color: var(--text); font-variant-numeric: tabular-nums; }
.cashout-bereich { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Gruen, nicht rot: Cashout heisst Geld zurueck aufs Konto. Rot ist in der
   ganzen Anwendung die Farbe fuer Abgang und Gefahr (Abbuchen, Loeschen,
   Sperren) - genau das Gegenteil. */
.btn-cashout {
  background: var(--gruen); color: #fff; font-weight: 700;
  padding: 9px 17px; border-radius: var(--radius-klein); white-space: nowrap; font-size: 14px;
}
.btn-cashout:hover { background: #006f4a; }
.btn-teil {
  background: var(--karte); border: 1px solid var(--linie); color: var(--text-grau);
  padding: 8px 13px; border-radius: var(--radius-klein); font-weight: 600; font-size: 13px;
}
.btn-teil:hover { border-color: var(--rot); color: var(--rot); }

.teil-bereich { padding: 12px 16px; background: #fffbe9; }
.teil-bereich input[type=range] { width: 100%; padding: 0; accent-color: var(--rot); }
.teil-zeile { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }

/* --------------------------------------------------------- Top-Kombis */

.kombi-block { padding: 12px 14px; border-bottom: 1px solid var(--linie-zart); }
.kombi-block:last-child { border-bottom: none; }
.kombi-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kombi-boost { background: var(--gruen-hell); color: var(--gruen); padding: 2px 8px; border-radius: 9999px; font-size: 10.5px; font-weight: 700; }
.kombi-quote { margin-left: auto; font-weight: 800; font-size: 15px; color: var(--rot); font-variant-numeric: tabular-nums; }
.kombi-zeile { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.kombi-zeile .auswahl { font-weight: 600; white-space: nowrap; }
.kombi-zeile .partie { color: var(--text-grau); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kombi-zeile .quote { font-weight: 600; font-variant-numeric: tabular-nums; }
.kombi-knopf {
  width: 100%; margin-top: 10px; background: var(--quote-bg); color: var(--text);
  padding: 9px; border-radius: var(--radius-klein); font-weight: 600; font-size: 13px;
}
.kombi-knopf:hover { background: var(--rot); color: #fff; }

/* --------------------------------------------------------- Statistiken */

.stat-bereich { border-bottom: 1px solid var(--linie-zart); }
.stat-karte { padding: 12px 16px; }
.stat-titel { font-size: 12px; font-weight: 700; color: var(--text-grau); margin: 8px 0 6px; }
.stat-titel:first-child { margin-top: 0; }
.stat-zeile { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.stat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-form { display: flex; gap: 3px; }
.stat-kugel {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #fff;
}
.stat-kugel.S { background: var(--gruen); }
.stat-kugel.U { background: var(--text-hell); }
.stat-kugel.N { background: var(--rot); }
.stat-leer { color: var(--text-hell); font-size: 12px; }
.stat-wert { color: var(--text-grau); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- Gewinnerkarte */

.gewinn-karte { margin-top: 14px; }
.gewinn-kopf {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-bottom: 1px solid var(--linie-zart); font-size: 13.5px;
}
.gewinn-kopf .pfeil { margin-left: auto; color: var(--text-land); }
.gewinn-marke {
  width: 22px; height: 22px; border-radius: 4px; background: var(--rot); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 12px; flex-shrink: 0;
}
.gewinn-summe {
  margin: 12px 14px; padding: 14px; border-radius: var(--radius-klein);
  background: linear-gradient(135deg, #0b6b4f, #0f8a63); color: #fff;
}
.gewinn-summe .etikett {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px;
  background: rgba(255, 255, 255, 0.2); display: inline-block;
  padding: 2px 7px; border-radius: 9999px;
}
.gewinn-summe .betrag { font-size: 22px; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; }
.gewinn-summe .unter { font-size: 11px; opacity: 0.85; }
.gewinn-karte table { font-size: 12px; }
.gewinn-karte th { padding: 7px 14px; font-size: 10.5px; }
.gewinn-karte td { padding: 7px 14px; }

/* ------------------------------------------------------------- Tabellen */

table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--karte); }
th {
  text-align: left; color: var(--text-grau); font-size: 11.5px; font-weight: 700;
  padding: 10px 16px; border-bottom: 1px solid var(--linie); background: #fbfcfd;
}
td { padding: 11px 16px; border-bottom: 1px solid var(--linie-zart); }
tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.plus { color: var(--gruen); font-weight: 600; }
.minus { color: var(--rot); font-weight: 600; }

.kachel-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kachel { background: var(--karte); border-radius: var(--radius-karte); box-shadow: var(--schatten); padding: 14px 16px; }
.kachel .k { font-size: 12px; color: var(--text-grau); font-weight: 600; }
.kachel .v { font-size: 22px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Login */

.login-seite {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: var(--rot);
}
.login-karte {
  width: 100%; max-width: 380px; background: var(--karte); border-radius: var(--radius-karte);
  padding: 28px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}
/* Das Logo auf der Anmeldekarte braucht roten Grund.
   Die gelieferte Datei ist ein WEISSER Schriftzug - gemacht fuer die rote
   Kopfleiste. Auf der weissen Karte war er deshalb zwar da (32x159 Pixel,
   geladen), aber schlicht unsichtbar: weiss auf weiss.
   Statt eine zweite Logodatei zu pflegen, bekommt die Karte oben einen roten
   Balken - das passt zur Kopfleiste und bleibt richtig, wenn die Datei
   einmal getauscht wird. */
.login-karte .logo {
  background: var(--rot);
  margin: -28px -28px 20px;
  padding: 18px 20px;
  border-radius: var(--radius-karte) var(--radius-karte) 0 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.login-karte h1 { font-size: 21px; margin: 0 0 4px; }
.login-karte p.unter { color: var(--text-grau); margin: 0 0 20px; font-size: 14px; }
.feld { margin-bottom: 13px; }
.feld label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-grau); margin-bottom: 5px; }
.btn-rot {
  background: var(--rot); color: #fff; font-weight: 700;
  padding: 12px 18px; border-radius: var(--radius-klein);
}
.btn-rot:hover { background: var(--rot-dunkel); }
.login-karte .btn-rot { width: 100%; }

/* ------------------------------------------------------------------ Toast */

/* Meldungen stehen MITTIG auf dem Bildschirm, nicht unten rechts.
   Unten rechts sass die Meldung am Handy genau dort, wo der Daumen gerade war
   und wo die untere Leiste liegt - sie wurde regelmaessig uebersehen. */
#toasts {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 100; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none;
}
.toast {
  background: rgba(18, 20, 20, 0.94); color: #fff;
  padding: 16px 22px; border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
  max-width: 78vw; font-size: 15px; font-weight: 600; line-height: 1.35;
  text-align: center; animation: rein 0.16s ease-out;
  border-top: 3px solid var(--gruen);
  pointer-events: auto;
}
.toast.fehler { border-top-color: var(--rot); }
.toast.warn { border-top-color: var(--gelb); }
@keyframes rein {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ----------------------------------------------------------- Adminbereich */

.admin-inhalt { max-width: 1440px; margin: 0 auto; padding: 14px; }
.panel { background: var(--karte); border-radius: var(--radius-karte); box-shadow: var(--schatten); overflow: hidden; }
.panel-kopf {
  padding: 14px 16px 10px; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; gap: 8px;
}
.panel-kopf .klein { font-size: 13px; font-weight: 400; color: var(--text-grau); }
.panel-koerper { padding: 16px; }
.formular-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 12px; }
.formular-gitter .voll { grid-column: 1 / -1; }
.formular-gitter label { font-size: 12.5px; font-weight: 600; color: var(--text-grau); display: block; margin-bottom: 5px; }
.knopfreihe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mini { width: 78px; padding: 6px 8px; text-align: center; }
.btn-klein { padding: 7px 13px; font-size: 13px; border-radius: var(--radius-klein); font-weight: 600; }
.btn-grau { background: var(--karte); border: 1px solid var(--linie); color: var(--text-grau); }
.btn-grau:hover { border-color: var(--rot); color: var(--rot); }
.btn-gefahr { background: var(--rot); color: #fff; }
.btn-gelb { background: var(--gelb); color: #3d2c00; font-weight: 700; }
.btn-gruen { background: var(--gruen); color: #fff; font-weight: 700; }

/* ------------------------------------------------- Kopfleiste: Zusatzknoepfe */

.kopf-knopf {
  position: relative; color: #fff; font-size: 17px; line-height: 1;
  padding: 7px 9px; border-radius: var(--radius-klein);
}
.kopf-knopf:hover { background: rgba(255, 255, 255, 0.16); }

.punkt-zahl {
  position: absolute; top: 0; right: 0; left: auto;
  background: #fff; color: var(--rot); border-radius: 9px;
  min-width: 17px; padding: 0 4px; font-size: 10.5px; font-weight: 800; line-height: 17px;
}

.kopf-auswahl {
  width: auto; background: rgba(0, 0, 0, 0.16); border: none; color: #fff;
  padding: 6px 8px; font-weight: 600; border-radius: var(--radius-klein);
  /* 16px gegen das Hineinzoomen von iOS - am Handy sind diese beiden
     Auswahlfelder ohnehin ausgeblendet, aber auf dem Tablet nicht. */
  font-size: 16px;
}
.kopf-auswahl option { color: var(--text); }

/* ------------------------------------------------------- Benachrichtigungen */

.meldung-panel {
  position: fixed; right: 14px; top: 62px; z-index: 70;
  width: 340px; max-height: 70vh; overflow-y: auto;
  background: var(--karte); border-radius: var(--radius-karte);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.meldung-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--linie); font-weight: 700;
}
.meldung-kopf button { font-size: 12.5px; color: var(--rot); font-weight: 600; }
.meldung {
  padding: 11px 16px; border-bottom: 1px solid var(--linie-zart); display: flex; gap: 10px;
}
.meldung.neu { background: #fff8f8; }
.meldung .symbol { font-size: 17px; line-height: 1.2; }
.meldung .inhalt { flex: 1; min-width: 0; }
.meldung .titel { font-weight: 700; font-size: 13.5px; }
.meldung .text { font-size: 12.5px; color: var(--text-grau); }
.meldung .zeit { font-size: 11.5px; color: var(--text-hell); margin-top: 2px; }

/* Knoepfe im Kopf des Meldungsfensters. Am Telefon ist "irgendwo daneben
   tippen" keine verlaessliche Geste - das Fenster fuellt fast den Bildschirm.
   Deshalb ein Kreuz, und zusaetzlich raeumt der Rueckweg es weg (siehe
   einenSchrittZurueck in app.js). */
.meldung-kopf-knoepfe { display: flex; align-items: center; gap: 10px; }
.meldung-weg-alle { color: var(--text-grau) !important; }
.meldung-zu {
  font-size: 21px !important; line-height: 1; color: var(--text-grau) !important;
  padding: 2px 4px;
}

/* Das Kreuz an einer einzelnen Meldung. Sitzt rechts und bleibt stehen,
   auch wenn der Text lang ist. */
.meldung-weg {
  align-self: flex-start; flex-shrink: 0;
  font-size: 17px; line-height: 1; color: var(--text-hell);
  padding: 2px 4px; border-radius: var(--radius-klein);
}
.meldung-weg:hover { color: var(--rot); background: var(--bg); }

@media (pointer: coarse) {
  /* Fingergerecht: klein genug zum Danebentippen waere hier aergerlich,
     weil daneben die Meldung selbst liegt. */
  .meldung-weg { font-size: 20px; padding: 8px 10px; }
  .meldung-zu { font-size: 24px !important; padding: 6px 10px; }
}

/* ------------------------------------------------------------- Kontowahl */

.konto-wahl { margin-bottom: 10px; }
.konto-wahl label { font-size: 12px; color: var(--text-grau); font-weight: 600; display: block; margin-bottom: 5px; }
.konto-knoepfe { display: flex; gap: 6px; }
.konto-knoepfe button {
  flex: 1; background: var(--bg); border: 1px solid transparent; border-radius: var(--radius-klein);
  padding: 8px 6px; font-size: 11.5px; color: var(--text-grau); font-weight: 600;
  display: flex; flex-direction: column; gap: 2px; line-height: 1.2;
}
.konto-knoepfe button b { font-size: 13px; color: var(--text); }
.konto-knoepfe button.aktiv { background: var(--rot-hell); border-color: var(--rot); color: var(--rot); }
.konto-knoepfe button.aktiv b { color: var(--rot); }
.konto-knoepfe button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ------------------------------------------------------- Bonusfortschritt */

.bonus-karte { padding: 14px 16px; }
.bonus-zeile { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 8px; }
.bonus-balken { height: 8px; background: var(--linie); border-radius: 4px; overflow: hidden; }
.bonus-balken div { height: 100%; background: var(--gruen); transition: width 0.3s; }
.bonus-hinweis { font-size: 12.5px; color: var(--text-grau); margin-top: 8px; }

.code-zeile { display: flex; gap: 8px; }
.code-zeile input { text-transform: uppercase; }

/* ------------------------------------------------------------ Kundenservice */

.chat-knopf {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--rot); color: #fff; font-size: 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.chat-knopf:hover { background: var(--rot-dunkel); }
.chat-knopf .punkt-zahl { top: -2px; right: -2px; }

.chat-fenster {
  position: fixed; right: 18px; bottom: 80px; z-index: 80;
  width: 330px; max-width: calc(100vw - 36px); height: 440px; max-height: calc(100vh - 120px);
  background: var(--karte); border-radius: var(--radius-karte);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-kopf {
  background: var(--rot); color: #fff; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; font-weight: 700;
}
.chat-kopf button { color: #fff; font-size: 20px; line-height: 1; }
.chat-verlauf { flex: 1; overflow-y: auto; padding: 14px 16px; background: var(--bg); }
.chat-nachricht { margin-bottom: 10px; display: flex; }
.chat-nachricht.eigen { justify-content: flex-end; }
.chat-blase {
  max-width: 80%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px;
  background: var(--karte); box-shadow: var(--schatten);
}
.chat-nachricht.eigen .chat-blase { background: var(--rot); color: #fff; }
.chat-blase .zeit { font-size: 10.5px; opacity: 0.65; margin-top: 3px; }
.chat-eingabe { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--linie); }
.chat-leer { text-align: center; color: var(--text-hell); font-size: 13px; padding: 30px 10px; }

/* --------------------------------------------------------- Virtuelle Rennen */

.rennen-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--linie-zart);
}
.rennen-kopf .titel { font-weight: 700; font-size: 14.5px; }
.rennen-kopf .zeit { margin-left: auto; font-size: 13px; color: var(--rot); font-weight: 700; }

.teilnehmer-liste { padding: 4px 0; }
.teilnehmer {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; border-bottom: 1px solid var(--linie-zart);
}
.teilnehmer:last-child { border-bottom: none; }
.teilnehmer .nr {
  width: 24px; height: 24px; border-radius: 50%; background: var(--text);
  color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.teilnehmer .name { flex: 1; font-size: 13.5px; font-weight: 500; }
.teilnehmer .quoten { display: flex; gap: 5px; }
.teilnehmer .quote { width: 58px; height: 34px; }

.einlauf { padding: 10px 16px; background: var(--gruen-hell); font-size: 13px; }
.einlauf b { color: var(--gruen); }

/* --------------------------------------------------------------- Partner */

.partner-karte { padding: 14px 16px; }
.partner-code {
  background: var(--bg); border-radius: var(--radius-klein); padding: 12px 14px;
  font-size: 20px; font-weight: 800; letter-spacing: 1px; text-align: center; margin-bottom: 10px;
}
.partner-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.partner-zahl { background: var(--bg); border-radius: var(--radius-klein); padding: 10px 12px; }
.partner-zahl .k { font-size: 11.5px; color: var(--text-grau); font-weight: 600; }
.partner-zahl .v { font-size: 17px; font-weight: 800; margin-top: 2px; }

/* ------------------------------------------------------------ Risikoansicht */

.risiko-stufe { padding: 3px 10px; border-radius: 11px; font-size: 11px; font-weight: 800; }
.risiko-stufe.normal { background: var(--gruen-hell); color: var(--gruen); }
.risiko-stufe.mittel { background: #fff4d6; color: #8a6100; }
.risiko-stufe.hoch { background: var(--rot-hell); color: var(--rot); }
.hinweis-liste { font-size: 12.5px; color: var(--text-grau); }
.hinweis-liste li { margin-left: 14px; }

/* --------------------------------------------------------------- Responsiv */

@media (max-width: 1180px) {
  .layout { grid-template-columns: 210px 1fr 280px; }
}

/* Die Navigation hat sieben Punkte (seit Virtuell und Ergebnisse). Damit sie
   ganz sichtbar bleibt, weicht erst der Name, dann die Waehrungswahl - vorher
   war bei 1300 px "Ergebnisse" abgeschnitten und "Konto" weg (21.10.2026).
   Der Name steht ohnehin im Konto, die Waehrung auch in der Handy-Schublade. */
@media (max-width: 1440px) {
  .topbar .name { display: none; }
  #topnav button { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 1250px) {
  .kopf-auswahl { display: none; }
}
@media (max-width: 1100px) {
  #topnav button { padding-left: 7px; padding-right: 7px; font-size: 12.5px; }
  .topbar .marke-bild { height: 26px; }
}

@media (max-width: 980px) {
  .layout, .layout.ohne-sidebar { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .schein { position: static; }
  .spiel-quoten .quote { width: 60px; }
  .liga-block-kopf .spalten { display: none; }
}

@media (max-width: 620px) {
  .topbar { padding: 0 12px 0 20px; }
  .kopf-auswahl { display: none; }
  .meldung-panel { left: 10px; right: 10px; width: auto; }
  .chat-fenster { right: 10px; left: 10px; width: auto; }
  .logo { font-size: 21px; margin-right: 10px; }
  .topbar .name { display: none; }
  .layout, .admin-inhalt { padding: 10px; }
  .spiel { flex-wrap: wrap; padding: 10px 12px; }
  .spiel-teams { min-width: 150px; }
  .spiel-quoten { width: 100%; }
  .spiel-quoten .quote { flex: 1; width: auto; }
  .spiel-mehr { display: none; }
  .markt-inhalt { grid-template-columns: repeat(2, 1fr); }
  .detail-team { font-size: 15px; }
}

/* --------------------------------------------------- Tresen-Erweiterungen */

/* Overlay fuer den QR-Code */
.overlay {
  position: fixed; inset: 0; background: rgba(18, 20, 22, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 300; padding: 16px;
}
.overlay-kasten {
  background: var(--karte); border-radius: var(--radius-karte);
  width: 340px; max-width: 100%; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.overlay-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--linie); font-size: 14px;
}
.overlay-zu {
  border: 0; background: none; font-size: 22px; line-height: 1;
  color: var(--text-grau); cursor: pointer; padding: 0 2px;
}
.overlay-koerper { padding: 16px; text-align: center; }
.overlay-knoepfe { display: flex; gap: 8px; margin-top: 14px; }
.overlay-knoepfe button { flex: 1; }
.qr-bild { border: 1px solid var(--linie); border-radius: 8px; background: #fff; }
.qr-hinweis { font-size: 12px; color: var(--text-grau); margin-top: 10px; line-height: 1.45; }
.qr-code {
  font-family: Consolas, "Courier New", monospace; font-size: 10.5px; color: var(--text-hell);
  word-break: break-all; margin-top: 8px;
}
.scanner-bild {
  width: 100%; border-radius: 8px; background: #000; margin: 10px 0 4px; display: block;
}

/* Wett-Baukasten */
/* Fertige Kombinationen aus einem Spiel ("Top-Kombis aus diesem Spiel") */
.markt.tmk .tmk-kopf { background: var(--rot-hell); cursor: default; }
.tmk-inhalt { padding: 6px 16px 12px; }
.tmk-zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--linie);
}
.tmk-zeile:last-child { border-bottom: 0; }
.tmk-text { flex: 1; min-width: 0; }
.tmk-teil { font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.tmk-teil + .tmk-teil { color: var(--text-grau); }
.tmk-quote {
  flex: 0 0 auto; min-width: 76px; min-height: 40px;
  background: var(--quote-bg, #eef1f5); border: 0; border-radius: 8px;
  font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.tmk-quote:hover { background: var(--rot); color: #fff; }

.markt.baukasten .markt-kopf { background: var(--rot-hell); }
.bk-marke {
  font-size: 11px; font-weight: 600; color: var(--rot);
  background: var(--karte); border-radius: 9999px; padding: 2px 8px; margin-left: 6px;
}
.bk-inhalt { padding: 12px 16px 14px; }
.bk-hinweis { font-size: 12px; color: var(--text-grau); line-height: 1.45; margin-bottom: 12px; }
.bk-gruppe { margin-bottom: 12px; }
.bk-gruppen-titel {
  font-size: 11.5px; font-weight: 700; color: var(--text-grau);
  text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px;
}
.bk-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-knopf {
  border: 1px solid var(--linie); background: var(--karte); color: var(--text);
  border-radius: var(--radius-klein); padding: 7px 11px; font: inherit; font-size: 12.5px;
  cursor: pointer;
}
.bk-knopf:hover { background: var(--quote-bg); }
.bk-knopf.aktiv { background: var(--rot); border-color: var(--rot); color: #fff; font-weight: 600; }
.bk-fuss { border-top: 1px solid var(--linie); padding-top: 12px; margin-top: 4px; }
.bk-stand { font-size: 12.5px; color: var(--text-grau); line-height: 1.45; }
.bk-stand.fehler { color: var(--rot); }
.bk-uebernehmen {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin-top: 10px; padding: 11px 14px;
  background: var(--rot); color: #fff; border: 0; border-radius: var(--radius-klein);
  font: inherit; font-weight: 700; cursor: pointer;
}
.bk-uebernehmen:hover { background: var(--rot-dunkel); }
.bk-uebernehmen b { font-size: 15px; }

/* Angehobene Quoten */
.quote.geboostet, .quote-breit.geboostet {
  background: #fff6e5; border: 1px solid #f0c46a;
}
.alt-quote { font-size: 10.5px; color: var(--text-hell); margin-left: 5px; }

.boost-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--linie-zart);
}
.boost-zeile:last-child { border-bottom: none; }
.boost-links { flex: 1; min-width: 0; }
.boost-auswahl { font-size: 13.5px; font-weight: 600; }
.boost-meta { font-size: 11.5px; color: var(--text-grau); margin-top: 2px; }
.boost-quote {
  display: flex; align-items: center; gap: 7px;
  background: #fff6e5; border: 1px solid #f0c46a; border-radius: var(--radius-klein);
  padding: 8px 12px; font: inherit; cursor: pointer; white-space: nowrap;
}
.boost-quote:hover { background: #ffefd0; }
.boost-quote s { color: var(--text-hell); font-size: 11.5px; }
.boost-quote b { font-size: 15px; }

/* Spielverlauf */
.ticker-bereich { border-bottom: 1px solid var(--linie); }
.stat-spiel { padding: 12px 16px 4px; }
.stat-spiel-zeile { margin-bottom: 9px; }
.stat-spiel-kopf {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--text-grau); margin-bottom: 3px;
}
.stat-spiel-kopf b { color: var(--text); font-size: 13px; }
.stat-spiel-balken { height: 5px; border-radius: 9999px; background: var(--linie); overflow: hidden; }
.stat-spiel-balken div { height: 100%; background: var(--rot); border-radius: 9999px; }
.ticker-zeile.tor { font-weight: 700; }
.ticker-zeile.gelb b { color: #d39e00; }
.ticker-zeile.rot b { color: var(--rot); }
.ticker-zeile.chance b { color: var(--text-grau); }

@media (max-width: 620px) {
  .bk-reihe { gap: 5px; }
  .bk-knopf { font-size: 12px; padding: 6px 9px; }
  .boost-zeile { padding: 10px 12px; }
}

/* ------------------------------------------- Verwaltung: neue Bereiche */

.klein-wahl {
  font: inherit; font-size: 12px; padding: 3px 6px;
  border: 1px solid var(--linie); border-radius: 5px; background: var(--karte);
}

/* Auszahlungsfreigaben */
.freigabe-karte { border-bottom: 1px solid var(--linie); padding: 14px 16px; }
.freigabe-karte:last-child { border-bottom: none; }
.freigabe-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.freigabe-kopf b { font-size: 17px; }
.freigabe-art {
  background: var(--quote-bg); color: var(--text); border-radius: 9999px;
  padding: 2px 9px; font-size: 11px; font-weight: 600; margin-left: 6px;
}
.freigabe-wette {
  margin-top: 8px; padding: 9px 11px; background: var(--bg);
  border-radius: var(--radius-klein); font-size: 13px;
}
.freigabe-knoepfe { display: flex; gap: 8px; margin-top: 10px; }

/* Diagramme */
.kurve-box { padding: 4px 16px 14px; }
.kurve { width: 100%; height: auto; display: block; }
.kurve .raster { stroke: var(--linie); stroke-width: 1; }
.kurve .nulllinie { stroke: var(--text-grau); stroke-width: 1; stroke-dasharray: 3 3; }
.kurve .linie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kurve .achse { font-size: 10px; fill: var(--text-grau); font-family: inherit; }
.legende { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; padding-left: 54px; }
.legende-eintrag { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-grau); }
.legende-punkt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* Quotenboost setzen */
.boost-feld { text-align: left; margin-top: 10px; }
.boost-feld label { display: block; font-size: 11.5px; color: var(--text-grau); margin-bottom: 3px; }
.boost-feld select, .boost-feld input {
  width: 100%; font: inherit; padding: 8px 10px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--karte);
}
.boost-haken {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12.5px; color: var(--text-grau); text-align: left; cursor: pointer;
}
.boost-haken input { width: 15px; height: 15px; flex: 0 0 auto; margin: 0; }
.boost-haken span { flex: 1; }

@media (max-width: 620px) {
  .legende { padding-left: 0; }
  .freigabe-knoepfe button { flex: 1; }
}

/* Die Verwaltung hat viele Reiter - sie bekommen eine eigene Zeile unter
   der Kopfleiste, sonst draengen sie sich neben Name und Knoepfe. */
.admin-reiter {
  background: var(--rot-dunkel); padding: 0 16px;
  /* Beide Leisten kleben oben. Ohne Versatz landen sie uebereinander und die
     Kopfleiste (z-index 60) verdeckt die Reiter. Der Versatz entspricht der
     Hoehe der Kopfleiste - am Handy ist sie 56 statt 48 hoch. */
  position: sticky; top: 48px; z-index: 40;
}
.admin-reiter .topnav { max-width: 1265px; margin: 0 auto; padding: 5px 0; }
.admin-reiter .topnav button { font-size: 12.5px; padding: 6px 9px; }
@media (max-width: 980px) {
  .admin-reiter { top: 56px; }
}
@media (max-width: 620px) {
  .admin-reiter { padding: 0 8px; }
}

/* Abmelden am Ende der Kontoansicht */
.abmelden-karte { padding: 14px; margin-top: 14px; text-align: center; }
.btn-abmelden {
  width: 100%; max-width: 320px;
  background: var(--karte); color: var(--rot); border: 1px solid var(--rot);
  padding: 11px 18px; border-radius: var(--radius-klein);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn-abmelden:hover { background: var(--rot-hell); }

/* Wettschein weitergeben */
.teilen-liste { display: grid; gap: 8px; margin-bottom: 8px; }
.teilen-weg {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 13px 16px;
  background: var(--karte); color: var(--text); text-decoration: none;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.teilen-weg:hover { border-color: var(--rot); color: var(--rot); }
.teilen-kopieren { margin-bottom: 10px; }

/* ============================================ Match-Center im Vorbild-Stil ==
   Vorher war die ganze Karte dunkel (#10141c). Beim Vorbild ist nur der Kopf
   dunkel - Anzeigetafel und Mannschaften -, alles darunter steht auf hellem
   Grund wie der Rest der Seite. Genau das war gemeint mit "bei uns kommt ein
   dunkles Bild". */
.match-center {
  background: var(--bg); border-radius: var(--radius-karte); overflow: hidden;
  color: var(--text); box-shadow: var(--schatten);
}

/* Der dunkle Kopf */
.match-center .mc-kopf,
.match-center .mc-tafel {
  background: linear-gradient(160deg, #1a1030 0%, #241033 45%, #3a1020 100%);
  color: #fff;
}
.match-center .mc-kopf { border-bottom: 0; }
.match-center .mc-kopf-titel { color: #9ecbff; font-weight: 600; }
.match-center .mc-zurueck { color: #fff; }

/* Reiterzeile und Gruppenfilter stehen auf hellem Grund */
.match-center .mc-reiter { background: var(--karte); border-bottom: 1px solid var(--linie); }
.match-center .mc-reiter button { color: var(--text-schwach); }
.match-center .mc-reiter button.aktiv { color: var(--text); }
.match-center .mc-inhalt { background: var(--bg); }

/* --- Kategoriezeile: "Hauptwetten ⌃" ---------------------------------
   Das ist beim Vorbild die einzige Klappstelle. Die Marktbloecke darunter
   sind immer offen. */
.mc-kategorie {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 16px 6px 10px; gap: 10px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 600; color: var(--text);
  text-align: left;
}
.mc-kategorie-name { flex: 1; }
.mc-kategorie-pfeil { color: var(--text-schwach); font-size: 15px; line-height: 1; }
.mc-kategorie-koerper { display: block; }

/* Der Marktkopf ist jetzt kein Knopf mehr, sondern eine Zeile */
.match-center .mc-markt-kopf {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 14px 8px; gap: 10px;
  background: none; border: 0;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--text);
  text-align: left;
}
.mc-statistik { color: var(--text-schwach); font-size: 13px; }

/* --- Sammelueberschrift ("Hauptwetten") ------------------------------- */
.mc-sammelkopf {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 4px 8px; margin-top: 4px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 17px; color: var(--text);
}
.mc-sammelkopf .pfeil { color: var(--text-schwach); font-size: 12px; }

/* --- Ein Marktblock --------------------------------------------------- */
.match-center .mc-markt {
  background: var(--karte); border-radius: 12px; margin-bottom: 8px;
  border: 1px solid var(--linie); overflow: hidden;
}
.match-center .mc-markt-kopf {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 14px 8px; gap: 10px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--text);
  text-align: left;
}
.mc-markt-name { flex: 1; }
.mc-markt-zeichen { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.mc-info { color: var(--text-schwach); font-size: 14px; font-weight: 400; }
.match-center .mc-markt-kopf .pfeil { color: var(--text-schwach); font-size: 11px; }

.match-center .mc-markt-inhalt {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 0 12px 12px;
}
.match-center .mc-markt-inhalt.eins { grid-template-columns: 1fr; }
.match-center .mc-markt-inhalt.zwei { grid-template-columns: repeat(2, 1fr); }
.match-center .mc-markt-inhalt.drei { grid-template-columns: repeat(3, 1fr); }
.match-center .mc-markt-inhalt.viele { grid-template-columns: repeat(4, 1fr); }

/* --- Familie: je Linie eine Zeile ------------------------------------- */
.mc-familie { padding: 0 12px 12px; }
.mc-fam-zeile {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.mc-fam-zeile:last-child { margin-bottom: 0; }
.mc-fam-marke {
  flex: 0 0 74px; font-size: 12.5px; color: var(--text-schwach);
}
.mc-fam-quoten { flex: 1; display: grid; gap: 6px; }
.mc-fam-quoten.zwei { grid-template-columns: repeat(2, 1fr); }
.mc-fam-quoten.drei { grid-template-columns: repeat(3, 1fr); }

/* --- Der Quotenknopf --------------------------------------------------- */
.mc-wette {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 42px; padding: 8px 12px;
  background: var(--grau-hell, #eef0f2); border: 1px solid transparent;
  border-radius: 8px; cursor: pointer;
  font: inherit; color: var(--text); text-align: left;
}
.mc-wette:hover:not(:disabled) { border-color: var(--rot); }
.mc-wette.gewaehlt { background: var(--rot); color: #fff; }
.mc-wette.gewaehlt .mc-wette-marke { color: rgba(255, 255, 255, 0.85); }
.mc-wette:disabled { opacity: 0.45; cursor: default; }
.mc-wette-marke {
  flex: 0 1 auto; font-size: 12.5px; color: var(--text-schwach);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-wette.lang .mc-wette-marke { flex: 1; }
.mc-wette-quote { flex: 0 0 auto; font-size: 14.5px; font-weight: 700; }
.mc-wette .alt-quote { font-size: 11px; color: var(--text-schwach); }

/* Ergebnis- und Anzahlmaerkte: Marke ueber der Quote statt daneben.
   Nebeneinander blieb von "0:0" nur "0…" uebrig. */
.mc-markt-inhalt.gestapelt { grid-template-columns: repeat(4, 1fr); gap: 5px; }
.mc-wette.gestapelt {
  flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 7px 4px; min-height: 46px;
}
.mc-wette.gestapelt .mc-wette-marke { flex: 0 0 auto; font-size: 11.5px; max-width: 100%; }
.mc-wette.gestapelt .mc-wette-quote { font-size: 13.5px; }

@media (max-width: 980px) {
  .mc-fam-marke { flex-basis: 66px; font-size: 12px; }
  .mc-wette { padding: 8px 10px; min-height: 40px; }
  .mc-wette-quote { font-size: 14px; }
}

/* ===================================================== Match-Center ======
   Die Detailansicht einer Begegnung als dunkle Anzeigetafel. Sie hebt sich
   bewusst vom hellen Rest ab - so, wie es in der Vorlage gewuenscht war. */

.wappen { flex: 0 0 auto; display: block; }
/* Mannschaftsbild der Datenquelle - gleiche Groesse wie das gezeichnete
   Emblem, damit die Zeilen nicht springen. */
.wappen-bild { display: inline-flex; align-items: center; justify-content: center; }
.wappen-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wappen-ersatz {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--quote-bg); font-size: 9px; font-weight: 800;
}

/* Die frueher hier stehende dunkle Grundfarbe (#10141c fuer die GANZE Karte)
   ist entfallen. Sie machte die komplette Detailseite dunkel - beim Vorbild
   ist nur der Kopf dunkel. Die helle Fassung steht weiter oben unter
   "Match-Center im Vorbild-Stil". */

.mc-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mc-zurueck {
  background: none; border: 0; color: #eef1f5; font-size: 26px; line-height: 1;
  padding: 0 6px; cursor: pointer; border-radius: 6px;
}
.mc-zurueck:hover { background: rgba(255, 255, 255, 0.1); }
.mc-kopf-titel { flex: 1; min-width: 0; }
.mc-kopf-titel .liga { font-size: 14.5px; font-weight: 600; }
.mc-kopf-titel .land { font-size: 11.5px; color: #8b95a5; margin-top: 1px; }
.mc-stern {
  background: none; border: 0; color: #4c5666; font-size: 19px; cursor: pointer;
  padding: 2px 6px; border-radius: 6px;
}
.mc-stern:hover { color: #8b95a5; }
.mc-stern.aktiv { color: var(--gelb); }

/* Anzeigetafel */
.mc-tafel {
  padding: 14px 16px 16px;
  background: linear-gradient(160deg, #182234 0%, #10141c 62%);
}
.mc-tafel-kopf { display: flex; justify-content: center; margin-bottom: 12px; }
.mc-live {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(200, 16, 46, 0.18); color: #ff6b7f;
  border-radius: 9999px; padding: 3px 11px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.4px;
}
.mc-punkt {
  width: 6px; height: 6px; border-radius: 50%; background: #ff2d4b;
  animation: mc-blinken 1.6s ease-in-out infinite;
}
@keyframes mc-blinken { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.mc-anstoss { font-size: 11.5px; color: #8b95a5; font-weight: 600; }

.mc-reihe { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.mc-seite { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mc-name { font-size: 13px; font-weight: 600; line-height: 1.25; max-width: 130px; }
.mc-mitte { text-align: center; min-width: 92px; }
.mc-stand { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1.05; }
.mc-zeit-gross { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
.mc-zeit-klein { font-size: 11.5px; color: #8b95a5; margin-top: 3px; }

.mc-tore {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12px;
}
.mc-tore-seite { display: flex; flex-direction: column; gap: 3px; }
.mc-tore-seite.rechts { align-items: flex-end; }
.mc-tor { display: flex; gap: 6px; align-items: baseline; }
.mc-tor-minute { color: #8b95a5; font-size: 11px; }
.mc-tore-ball { font-size: 14px; opacity: 0.6; }

.mc-quoten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.mc-quote {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.09);
  color: #eef1f5; border-radius: 9px; padding: 10px 12px; font: inherit; cursor: pointer;
}
.mc-quote:hover { background: rgba(255, 255, 255, 0.13); }
.mc-quote.gewaehlt { background: var(--rot); border-color: var(--rot); }
.mc-quote .z { color: #8b95a5; font-size: 12px; font-weight: 600; }
.mc-quote.gewaehlt .z { color: rgba(255, 255, 255, 0.85); }
.mc-quote b { font-size: 15px; font-weight: 700; }
.mc-quote s { color: #6d7686; font-size: 11px; }
.mc-quote:disabled { opacity: 0.45; cursor: not-allowed; }

/* Reiter */
.mc-reiter {
  display: flex; gap: 6px; padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); overflow-x: auto;
}
.mc-reiter::-webkit-scrollbar { height: 0; }
.mc-reiter button {
  background: rgba(255, 255, 255, 0.06); color: #9aa4b4; border: 0;
  border-radius: 9999px; padding: 7px 16px; font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.mc-reiter button:hover { background: rgba(255, 255, 255, 0.12); color: #eef1f5; }
.mc-reiter button.aktiv { background: #eef1f5; color: #10141c; }

.mc-inhalt { padding: 14px; }
.mc-leer { color: #8b95a5; font-size: 12.5px; padding: 10px 2px; }

.mc-block {
  background: rgba(255, 255, 255, 0.04); border-radius: 10px;
  padding: 13px 14px; margin-bottom: 12px;
}
.mc-block-titel {
  font-size: 11.5px; font-weight: 700; color: #8b95a5;
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px;
}
.mc-block-titel:not(:first-child) { margin-top: 16px; }

/* Siegchancen */
.mc-chancen-kopf {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #c3cbd8; margin-bottom: 7px;
}
.mc-chancen-kopf span { display: flex; align-items: center; gap: 6px; }
.mc-chancen { display: flex; height: 22px; border-radius: 6px; overflow: hidden; }
.mc-chance {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; min-width: 0; overflow: hidden;
}
.mc-chance.heim { background: #2f7ed8; }
.mc-chance.remis { background: #4c5666; }
.mc-chance.gast { background: #c8102e; }
.mc-chancen-legende {
  display: flex; gap: 14px; margin-top: 8px; font-size: 11.5px; color: #8b95a5;
  flex-wrap: wrap;
}
.mc-chancen-legende span { display: flex; align-items: center; gap: 6px; }
.mc-chancen-legende .punkt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mc-chancen-legende .punkt.heim { background: #2f7ed8; }
.mc-chancen-legende .punkt.remis { background: #4c5666; }
.mc-chancen-legende .punkt.gast { background: #c8102e; }

/* Spielwerte */
.mc-wert { margin-bottom: 11px; }
.mc-wert:last-child { margin-bottom: 0; }
.mc-wert-kopf {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: #8b95a5; margin-bottom: 4px;
}
.mc-wert-kopf b { color: #c3cbd8; font-size: 13.5px; font-weight: 700; }
.mc-wert-kopf b.fuehrt { color: #eef1f5; }
.mc-wert-balken { display: flex; height: 5px; border-radius: 9999px; overflow: hidden; gap: 2px; }
.mc-wert-balken .heim { background: #2f7ed8; border-radius: 9999px; }
.mc-wert-balken .gast { background: #c8102e; border-radius: 9999px; }

/* Form und direkter Vergleich */
.mc-form { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mc-form-name { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #c3cbd8; }
.mc-form-kugeln { display: flex; gap: 4px; }
.mc-kugel {
  width: 19px; height: 19px; border-radius: 5px; font-size: 10.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.mc-kugel.S { background: #00875a; }
.mc-kugel.U { background: #6b7280; }
.mc-kugel.N { background: #c8102e; }
.mc-direkt {
  display: flex; justify-content: space-between; font-size: 12.5px;
  color: #c3cbd8; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mc-direkt:last-child { border-bottom: none; }

/* Ticker */
.mc-ticker {
  display: grid; grid-template-columns: 34px 22px 1fr; align-items: baseline; gap: 6px;
  padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 12.5px;
}
.mc-ticker:last-child { border-bottom: none; }
.mc-ticker-minute { color: #8b95a5; font-size: 11.5px; font-weight: 600; }
.mc-ticker-symbol { font-size: 12px; }
.mc-ticker-text { color: #c3cbd8; }
.mc-ticker.tor .mc-ticker-text { color: #eef1f5; font-weight: 700; }

/* Wettmaerkte im dunklen Bereich */
.mc-gruppen { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; }
.mc-gruppen::-webkit-scrollbar { height: 0; }
.mc-gruppen button {
  background: rgba(255, 255, 255, 0.06); color: #9aa4b4; border: 0; border-radius: 9999px;
  padding: 6px 13px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.mc-gruppen button.aktiv { background: rgba(255, 255, 255, 0.9); color: #10141c; font-weight: 600; }

.mc-markt {
  background: rgba(255, 255, 255, 0.04); border-radius: 10px;
  margin-bottom: 10px; overflow: hidden;
}
.mc-markt-kopf {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; color: #eef1f5; font: inherit; font-size: 13.5px;
  font-weight: 600; padding: 12px 14px; cursor: pointer; text-align: left;
}
.mc-markt-kopf .pfeil { color: #6d7686; font-size: 10px; }
/* minmax(0, 1fr) statt 1fr: eine Spalte waere sonst mindestens so breit wie
   ihr laengster Eintrag. Bei Torschuetzenwetten ("M. Pellegrini (Cagliari
   Calcio)") schob das die Quote aus dem Knopf heraus. */
.mc-markt-inhalt {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 0 14px 13px;
}
.mc-markt-inhalt.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mc-markt-inhalt.viele { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Quotenknoepfe tragen im dunklen Bereich ein anderes Kleid */
.mc-markt-inhalt .quote-breit {
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.09);
  color: #eef1f5;
}
.mc-markt-inhalt .quote-breit:hover { background: rgba(255, 255, 255, 0.13); }
.mc-markt-inhalt .quote-breit .name { color: #9aa4b4; }
.mc-markt-inhalt .quote-breit.gewaehlt { background: var(--rot); color: #fff; }
.mc-markt-inhalt .quote-breit.gewaehlt .name { color: rgba(255, 255, 255, 0.85); }
.mc-markt-inhalt .quote-breit.geboostet { background: rgba(253, 185, 19, 0.15); border-color: #a8801f; }

/* Baukasten - seit der Bereich hell ist, gelten wieder die normalen Farben.
   Vorher standen hier helle Schriften fuer dunklen Grund; auf Weiss waren sie
   praktisch unlesbar (blassrosa auf Rosa). */
.match-center .markt.baukasten {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 12px; margin-bottom: 8px; overflow: hidden;
}
.match-center .markt.baukasten .markt-kopf {
  background: none; color: var(--text); border: 0;
  font-size: 15px; font-weight: 700; padding: 12px 14px;
}
.match-center .bk-marke { background: #f3e6e9; color: var(--rot); }
.match-center .bk-hinweis, .match-center .bk-stand { color: var(--text-schwach); }
.match-center .bk-gruppen-titel { color: var(--text-schwach); }
.match-center .bk-knopf {
  background: var(--grau-hell, #eef0f2); border-color: transparent; color: var(--text);
}
.match-center .bk-knopf:hover { background: #e3e6ea; }
.match-center .bk-knopf.aktiv { background: var(--rot); border-color: var(--rot); color: #fff; }
.match-center .bk-fuss { border-top-color: var(--linie); }

/* Ebenso die Quotenknoepfe der alten Darstellung, falls sie noch irgendwo
   auftauchen (Rennen, Punktesportarten). */
.mc-markt-inhalt .quote-breit { background: var(--grau-hell, #eef0f2); color: var(--text); }
.mc-markt-inhalt .quote-breit:hover { background: #e3e6ea; }
.mc-markt-inhalt .quote-breit .name { color: var(--text-schwach); }

/* Eigener Bestaetigungsdialog - ersetzt das eingebaute confirm() */
.frage-zeile { font-size: 14px; line-height: 1.5; }
.frage-luecke { height: 10px; }
.overlay-knoepfe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.overlay-knoepfe button { min-height: 40px; padding: 0 18px; }

.pw-feld {
  width: 100%; height: 44px; padding: 0 14px; margin: 4px 0 4px;
  border: 1px solid var(--linie); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 18px; letter-spacing: 1px;
}

/* Zugangsdaten gross anzeigen, zum Ablesen und Weitergeben */
.pw-wert {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px; font-weight: 700; letter-spacing: 1px;
  background: var(--bg); border: 1px solid var(--linie); border-radius: 8px;
  padding: 10px 14px; margin: 4px 0 12px;
  user-select: all;
}

/* Abrechnung je Agent - der Beleg mit gruen und rot */
.kasse-agent {
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  padding: 12px 14px; margin-top: 10px; background: var(--karte);
}
.kasse-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.kasse-code {
  background: var(--bg); border-radius: 6px; padding: 2px 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
}
.kasse-beleg { max-width: 420px; }
.kasse-zeile {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0; font-variant-numeric: tabular-nums;
}
.kasse-zeichen { width: 14px; text-align: right; color: var(--text-schwach); }
.kasse-betrag { width: 120px; text-align: right; font-weight: 700; font-size: 15px; }
.kasse-wort { color: var(--text-schwach); font-size: 13px; }
.kasse-zeile.gruen .kasse-betrag { color: #14a44d; }
.kasse-zeile.rot .kasse-betrag { color: var(--rot); }
/* Laeuft auf dem Geraet ein alter Stand, faellt die Zeile auf */
.schublade-stand.veraltet { color: var(--rot); font-weight: 700; }

/* Zugangsdaten eines neu angelegten Spielers zum Weitergeben */
.zugang-zeile {
  display: flex; flex-direction: column;
  padding: 8px 0; border-bottom: 1px solid var(--linie);
  text-align: left;
}
.zugang-zeile:last-of-type { border-bottom: 0; }
.zugang-wort { font-size: 12px; color: var(--text-schwach); }
.zugang-wert {
  font-weight: 700; font-size: 15px;
  overflow-wrap: anywhere;            /* lange Adressen brechen um, statt zu schieben */
}
.zugang-hinweis {
  margin-top: 10px; font-size: 12.5px; line-height: 1.45;
  color: var(--text-schwach); text-align: left;
}
.zugang-text {
  width: 100%; margin-top: 10px; padding: 8px;
  border: 1px solid var(--linie); border-radius: 8px;
  font: inherit; font-size: 13px; min-height: 92px; resize: vertical;
}

.kasse-strich { border-top: 1px solid var(--text); margin: 6px 0 6px 22px; width: 120px; }
.kasse-strich.duenn { border-top: 1px dashed var(--linie); }
/* "Bekommen" steht nur zur Ansicht da und wird nicht mitgerechnet. */
.kasse-vorschuss .kasse-betrag { color: var(--text-schwach); font-weight: 600; }
.kasse-netto .kasse-betrag { font-size: 17px; }
.kasse-anteil {
  margin: 8px 0 0 22px; padding-top: 8px;
  border-top: 1px dashed var(--linie);
  font-size: 13.5px; color: var(--text-schwach);
}
.kasse-anteil .gruen { color: #14a44d; }
.kasse-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie);
}
.kasse-fuss .klein { color: var(--text-schwach); font-size: 12px; }
.kasse-fuss button { margin-left: auto; }

.kasse-summe {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline;
  margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--linie);
  font-size: 13.5px;
}
.kasse-summe .gruen { color: #14a44d; font-weight: 700; }
.kasse-summe .rot { color: var(--rot); font-weight: 700; }

@media (max-width: 620px) {
  .kasse-betrag { width: 96px; font-size: 14px; }
  .kasse-strich { width: 96px; }
}

/* Agentenverwaltung im Kontobereich */
.agent-verwaltung { padding: 14px 16px 16px; }
.agent-form {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  padding: 12px;
  background: var(--bg); border-radius: var(--radius-klein);
}
.agent-form input {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  font: inherit; font-size: 14px;
}
.agent-form button { grid-column: 1 / -1; }

/* Wie viele Spieler es sind - als Plakette im Kartenkopf. */
.agent-zahl {
  margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: var(--bg); color: var(--text-grau);
  font-size: 12px; font-weight: 700;
}
/* Die Liste steht in einem eigenen Fenster mit eigenem Kopf. */
.agent-liste { padding: 4px 16px 14px; }
/* Die erste Zeile braucht keine Linie - der Kartenkopf trennt schon. */
.agent-liste .agent-spieler:first-of-type { border-top: 0; }
.agent-spieler {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--linie);
}
.agent-spieler-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agent-spieler-name .klein { font-size: 12px; color: var(--text-schwach); }
.agent-spieler-knoepfe { display: flex; gap: 6px; flex: 0 0 auto; }

@media (max-width: 620px) {
  .agent-form { grid-template-columns: 1fr; }
  .agent-spieler { flex-wrap: wrap; }
  .agent-spieler-knoepfe { width: 100%; }
  .agent-spieler-knoepfe button { flex: 1; min-height: 40px; }
}

/* Anstosszeit hinter der Partie im offenen Wettschein */
.schein-pos .partie-zeit {
  margin-left: 6px; color: var(--text-schwach); font-size: 11.5px;
  white-space: nowrap;
}

/* Standanzeige im Menue */
.schublade-stand {
  margin-top: auto; padding: 14px 4px 6px;
  border-top: 1px solid var(--linie);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--text-schwach);
}
.schublade-frisch {
  background: var(--grau-hell, #eef0f2); border: 0; border-radius: 8px;
  padding: 8px 12px; min-height: 36px;
  font: inherit; font-size: 12px; color: var(--text); cursor: pointer;
}

/* Emblem in der Spielliste */
.spiel-team .wappen { margin-right: 7px; }

@media (max-width: 620px) {
  .mc-stand { font-size: 29px; }
  .mc-name { font-size: 12px; max-width: 92px; }
  .mc-markt-inhalt.viele { grid-template-columns: repeat(3, 1fr); }
  .mc-inhalt { padding: 12px 10px; }
  .mc-tafel { padding: 12px 12px 14px; }
}

/* =================================================== Bedienung am Handy ===
   Die Seite wird fast nur am Telefon benutzt. Darum bekommt sie dort einen
   eigenen Aufbau: Navigation am unteren Rand in Daumenreichweite, der
   Wettschein als aufziehbares Fach statt als Spalte, die Ligen in einer
   Schublade. Am Rechner bleibt alles wie gehabt. */

.nur-handy { display: none; }
/* Die Ligenkarte in der Mitte ist das Gegenstueck zur Seitenspalte - beides
   gleichzeitig waere doppelt. */
#handyLigenKarte { display: none; }
.untennav, .schublade, .schublade-schatten, .schein-leiste { display: none; }

@media (max-width: 980px) {
  .nur-handy { display: inline-flex; }
  #handyLigenKarte { display: block; }

  /* --- Kopfleiste: nur noch das Nötigste ------------------------------- */
  .topbar { padding: 0 10px; gap: 8px; height: 52px; }
  .topbar .topnav { display: none; }
  .topbar-spacer { flex: 1; }
  .logo { font-size: 20px; margin-right: 0; }
  .topbar .name, .kopf-auswahl { display: none; }
  #abmelden, #installKnopf { display: none; }
  .guthaben { font-size: 13px; padding: 4px 10px; }

  /* --- Verwaltung: Kopfleiste bleibt vollstaendig ----------------------
     Die Regeln darueber sind fuer die Spieler-App gedacht, die am Handy eine
     Schublade und eine untere Leiste hat. Die Verwaltung hat beides nicht -
     dort muessen "Wettbereich" und "Abmelden" in der Kopfleiste erreichbar
     bleiben, sonst kommt man nicht mehr heraus. */
  body.verwaltung .topbar {
    background: var(--rot); gap: 6px;
    height: calc(56px + var(--schutz-oben));
    padding: var(--schutz-oben) 10px 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  }
  /* Die Reiterzeile klebt unter der Kopfleiste - also inklusive Schutzabstand */
  body.verwaltung .admin-reiter { top: calc(56px + var(--schutz-oben)); }
  body.verwaltung #abmelden { display: inline-flex; }
  body.verwaltung .topbar .btn-rand {
    padding: 6px 10px; font-size: 12.5px; white-space: nowrap;
  }
  /* Auf 375px muessen Logo und zwei Knoepfe nebeneinander passen */
  body.verwaltung .marke-bild { height: 24px; }

  /* Der Verwaltungsbereich zeigt Tabellen und Kennzahlen. Mit der Schriftgroesse
     der Spieler-App (15px) passt am Handy kaum etwas auf den Schirm - hier wird
     durchgehend eine Stufe kleiner gesetzt. */
  /* Der rot-dunkle Verlauf oben gehoert zur Spieler-App. Auf der Verwaltung
     leuchtete er hinter den oberen Kacheln durch. */
  body.verwaltung { font-size: 13px; background: var(--bg); }
  body.verwaltung .admin-inhalt { padding: 10px 8px; }
  body.verwaltung .kachel-reihe {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin-bottom: 10px;
  }
  body.verwaltung .kachel { padding: 9px 10px; }
  body.verwaltung .kachel .k { font-size: 10.5px; }
  body.verwaltung .kachel .v { font-size: 15px; margin-top: 2px; }
  body.verwaltung .panel-kopf { font-size: 13.5px; padding: 10px 12px; }
  body.verwaltung .panel-kopf .klein { font-size: 11px; }
  body.verwaltung .panel-koerper { padding: 10px 12px; }
  body.verwaltung table { font-size: 11.5px; }
  body.verwaltung th, body.verwaltung td { padding: 7px 8px; }
  body.verwaltung .admin-reiter .topnav button { font-size: 11.5px; padding: 5px 7px; }
  body.verwaltung .wettschein-karte { font-size: 12px; }
  body.verwaltung .wk-auswahl { font-size: 12.5px; }
  body.verwaltung .wk-meta { font-size: 11px; }
  body.verwaltung .btn-klein { font-size: 11.5px; padding: 6px 9px; }
  body.verwaltung .hinweis { font-size: 12px; padding: 8px 10px; }
  body.verwaltung label { font-size: 12px; }
  /* Eingabefelder bleiben bei 16px, auch wenn hier sonst alles kleiner wird.
     Ab Schriften unter 16px zoomt iOS beim Antippen in das Feld hinein - die
     Seite steht danach verschoben da und muss von Hand zurueckgezogen werden.
     Vorher standen hier 13px, und weil die Regel spezifischer ist als die
     allgemeine 16px-Regel weiter unten, gewann sie: In der Verwaltung zoomte
     jedes Feld. */
  body.verwaltung input, body.verwaltung select, body.verwaltung textarea { font-size: 16px; }

  /* --- Platz für die untere Leiste schaffen ---------------------------- */
  .layout { padding-bottom: calc(78px + var(--schutz-unten)); }

  /* --- Navigation am unteren Rand -------------------------------------- */
  .untennav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 220;
    background: var(--karte); border-top: 1px solid var(--linie);
    padding-bottom: var(--schutz-unten);
    box-shadow: 0 -2px 10px rgba(18, 20, 22, 0.07);
  }
  .untennav button {
    position: relative; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; padding: 8px 2px 7px;
    background: none; border: 0; color: var(--text-grau);
    font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer;
    min-height: 56px;                       /* bequem mit dem Daumen zu treffen */
    -webkit-tap-highlight-color: transparent;
  }
  .untennav button .zeichen { display: block; width: 26px; height: 26px; }
  .untennav button .zeichen svg { width: 100%; height: 100%; display: block; }
  .untennav button.aktiv { color: var(--rot); }
  .untennav button:active { background: var(--linie-zart); }
  .untennav .punkt-zahl {
    /* right zurueckziehen: mit left UND right waere der Kasten aufgespannt
       statt nur so breit wie die Zahl. */
    position: absolute; top: 5px; left: 50%; right: auto; margin-left: 4px;
    background: var(--rot); color: #fff; border-radius: 9999px;
    min-width: 16px; height: 16px; padding: 0 4px;
    font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  }

  /* --- Wettschein als Fach -------------------------------------------- */
  .layout > aside { display: none; }        /* die Spalte entfällt */

  .schein-leiste {
    display: flex; align-items: center; gap: 9px;
    position: fixed; left: 0; right: 0; bottom: calc(78px + var(--schutz-unten));
    z-index: 215; width: 100%;
    background: var(--rot); color: #fff; border: 0;
    padding: 12px 16px; font: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer; box-shadow: 0 -2px 12px rgba(18, 20, 22, 0.18);
  }
  .schein-leiste.hidden { display: none; }
  .schein-leiste .anzahl {
    background: #fff; color: var(--rot); border-radius: 9999px;
    min-width: 22px; height: 22px; line-height: 22px; text-align: center;
    font-size: 12px; font-weight: 800; padding: 0 6px;
  }
  .schein-leiste .text { flex: 1; text-align: left; }
  .schein-leiste .wert { font-weight: 800; }
  .schein-leiste .pfeil { font-size: 11px; opacity: 0.8; }

  /* Aufgezogen: der Wettschein füllt den Bildschirm von unten */
  body.schein-offen .layout > aside {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: 0;
    z-index: 240; background: var(--bg); overflow-y: auto;
    padding: 0 0 calc(20px + var(--schutz-unten));
    -webkit-overflow-scrolling: touch;
  }
  /* Der aufgezogene Wettschein deckt den ganzen Bildschirm ab - also auch die
     Statusleiste mit der Uhr. Seine Kopfzeile braucht deshalb denselben
     Schutzabstand wie die Kopfleiste der Seite. */
  body.schein-offen .schein-kopf {
    padding-top: calc(13px + var(--schutz-oben));
  }
  body.schein-offen .schein {
    position: static; border-radius: 0; min-height: 100%;
  }
  body.schein-offen .untennav, body.schein-offen .schein-leiste { display: none; }
  body.schein-offen { overflow: hidden; }

  /* Schliessen-Kreuz in der Kopfzeile des Wettscheins */
  .schein-zu {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; color: #fff; cursor: pointer;
    font-size: 26px; line-height: 1; padding: 0 2px 3px; margin-left: auto;
    min-width: 34px; min-height: 34px;
  }
  body.schein-offen .schein-kopf { position: sticky; top: 0; z-index: 3; }

  /* --- Schublade mit Ligen --------------------------------------------- */
  .schublade-schatten {
    display: block; position: fixed; inset: 0; z-index: 250;
    background: rgba(18, 20, 22, 0.45);
    opacity: 0; pointer-events: none; transition: opacity 0.18s ease;
  }
  body.schublade-offen .schublade-schatten { opacity: 1; pointer-events: auto; }

  .schublade {
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 251;
    width: 84%; max-width: 320px; background: var(--karte);
    transform: translateX(-100%); transition: transform 0.2s ease;
    box-shadow: 2px 0 18px rgba(18, 20, 22, 0.2);
  }
  body.schublade-offen .schublade { transform: none; }
  body.schublade-offen { overflow: hidden; }

  .schublade-kopf {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; background: var(--rot); color: #fff;
    font-size: 16px; font-weight: 700; flex: 0 0 auto;
    padding-top: calc(14px + var(--schutz-oben));
  }
  .schublade-kopf button {
    background: none; border: 0; color: #fff; font-size: 26px;
    line-height: 1; padding: 0 4px; cursor: pointer;
  }
  .schublade-koerper { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .schublade-koerper .karte { box-shadow: none; border-radius: 0; }
  .schublade-koerper .karte + .karte { border-top: 8px solid var(--bg); }
  /* Die Schnellzugriff-Kacheln wiederholen nur die Eintraege darueber */
  .schublade-koerper .abschnitt-titel:first-of-type,
  .schublade-koerper .schnellzugriff { display: none; }

  .schublade-eintrag {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 14px 16px; background: none; border: 0;
    border-bottom: 1px solid var(--linie-zart);
    font: inherit; font-size: 14.5px; color: var(--text); text-align: left;
    cursor: pointer; min-height: 50px;
  }
  .schublade-eintrag:active { background: var(--linie-zart); }
  .schublade-eintrag .zeichen { font-size: 17px; width: 22px; text-align: center; }
  .schublade-eintrag.gefahr { color: var(--rot); }

  /* --- Alles etwas dichter und mit größeren Zielflächen ----------------- */
  .layout { padding-left: 0; padding-right: 0; }
  .karte { border-radius: 0; }
  #mitte > .karte, #inhalt > .karte, #inhalt > .match-center { border-radius: 0; }
  .filterzeile { padding: 0 10px; }

  .spiel { padding: 11px 12px; gap: 8px; }
  /* Jede Quote ist eine Daumenflaeche - auch die in "Im Trend" und den
     Kombivorschlaegen, nicht nur die in der Spielliste. */
  .quote, .quote-breit, .mc-quote, .boost-quote, .kombi-knopf { min-height: 46px; }
  .spiel-team { font-size: 13.5px; }
  /* Der Stern war 20 Punkte hoch - daneben getippt statt getroffen */
  .stern { min-width: 40px; min-height: 40px; display: inline-flex;
    align-items: center; justify-content: center; }

  .sportband { padding: 8px 10px; gap: 7px; }
  .sportband button { min-height: 44px; }

  /* Der Chatknopf darf die untere Leiste nicht verdecken */
  .chat-knopf { bottom: calc(90px + var(--schutz-unten)); right: 14px; }
  body.schein-offen .chat-knopf, body.schublade-offen .chat-knopf { display: none; }
  .chat-fenster { bottom: calc(154px + var(--schutz-unten)); }

  /* Meldungen von oben statt als schwebendes Feld */
  .meldung-panel { top: 52px; left: 0; right: 0; width: auto; border-radius: 0; max-height: 70vh; }

  /* Match-Center: mehr Luft nach unten */
  .match-center { border-radius: 0; }
  .mc-quote { min-height: 48px; }
  .mc-reiter button { min-height: 42px; }
  .bk-knopf { min-height: 40px; }

  /* Quotenfelder duerfen schrumpfen. Ohne min-width:0 macht ein langer
     Mannschaftsname die Gitterspalte breiter als den Bildschirm. */
  .mc-markt-inhalt, .markt-inhalt { grid-template-columns: repeat(2, 1fr); }
  .mc-markt-inhalt > *, .markt-inhalt > * { min-width: 0; }
  .mc-markt-inhalt.zwei, .markt-inhalt.zwei { grid-template-columns: repeat(2, 1fr); }
  .mc-markt-inhalt.viele, .markt-inhalt.viele { grid-template-columns: repeat(3, 1fr); }
  .quote-breit { padding: 9px 10px; }
  .quote-breit .name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .mc-quoten > * { min-width: 0; }

  /* Der Zusatz am Baukasten bricht sonst in die naechste Zeile */
  .bk-marke { display: none; }

  /* Filterzeile in einer Zeile zum Wischen statt in zwei Reihen */
  .filterzeile {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding: 8px 10px; gap: 7px;
  }
  .filterzeile::-webkit-scrollbar { height: 0; }
  .filterzeile button { white-space: nowrap; flex: 0 0 auto; min-height: 40px; }

  /* Zielflaechen: alles, was angetippt wird, mindestens 44 Punkte hoch.
     Das ist die uebliche Daumenbreite; darunter trifft man daneben. */
  .karte input, .karte select, .karte textarea,
  .bonus-karte input, .bonus-karte select,
  .code-zeile input, .code-zeile button,
  .btn-klein, .btn-rot, .btn-grau, .teilen-knopf, .btn-teil, .btn-cashout {
    min-height: 44px;
  }
  .code-zeile { gap: 8px; }
  .code-zeile input { flex: 1; min-width: 0; }
  /* Eingabefelder nicht unter 16px - sonst zoomt das Telefon beim Antippen */
  input, select, textarea { font-size: 16px; }
  .schein input, .schein select { font-size: 16px; }
}

/* Sehr schmale Geräte */
@media (max-width: 380px) {
  .untennav button .wort { font-size: 10px; }
  .guthaben { font-size: 12px; padding: 3px 8px; }
  .guthaben small { display: none; }
  .spiel-quoten .quote { font-size: 13px; }
}

/* ============================================ Handyansicht nach dem Vorbild
   Alle Werte hier sind an der echten Seite abgemessen, nicht geschaetzt:
   Kopfbereich 56px auf einem Verlauf rot -> dunkelrot -> fast schwarz, darunter
   die Sportzeile im Rot, darauf ein abgerundetes Blatt mit dem Inhalt.
   Grundschrift 15px, Karten 16px Radius mit 8px Rand, untere Leiste 52px. */

/* Am Rechner gibt es beim Vorbild keine Sportzeile - die Sportarten stehen
   dort in der linken Spalte unter "Top". Sie ist reine Handybedienung.
   Dasselbe gilt fuer Suchband und Lupe: am Rechner steht die Suche in der
   linken Spalte. Beide muessen HIER ausgeblendet werden, nicht erst in der
   Handy-Regel - sonst greift auf breiten Schirmen die Vorgabe. */
.sportband-leiste, .suchband, .lupe { display: none; }

@media (max-width: 980px) {
  .sportband-leiste { display: block; }

  /* --- Verlauf hinter Kopfbereich und Sportzeile ----------------------- */
  body {
    font-size: 15px;
    background:
      linear-gradient(#d0001c 12px, #5c0016 122px, #121414 207px) no-repeat,
      var(--bg);
    background-size: 100% 207px, auto;
  }
  #app { background: transparent; }

  .topbar {
    /* Die Hoehe enthaelt den Schutzabstand (box-sizing: border-box), der
       Innenabstand schiebt den Inhalt darunter. Ohne das lag die Uhr des
       Telefons auf Logo und Guthaben. */
    height: calc(56px + var(--schutz-oben));
    padding: var(--schutz-oben) 12px 0 20px;
    box-shadow: none; gap: 10px;
    /* Der Verlauf muss auf der Kopfleiste selbst liegen, nicht nur auf body.
       Die Leiste bleibt beim Scrollen oben stehen - lag der Verlauf allein auf
       body, scrollte er weg und die Liste schien durch die Leiste hindurch.
       Sichtbar sind die obersten 56 von 207px: genau der Ausschnitt, den auch
       body an dieser Stelle zeigt, der Uebergang bleibt also nahtlos. */
    background: linear-gradient(var(--rot) 12px, #5c0016 122px, #121414 207px) no-repeat;
    /* background-origin bleibt bei der Vorgabe (padding-box): der Verlauf
       beginnt an der Oberkante der Leiste, also an derselben Stelle wie der
       Verlauf auf body. Mit content-box saesse er um die Schutzzone versetzt
       und es entstuende eine dunkle Kante ueber dem Logo. */
    background-size: 100% 207px;
  }
  /* Das Vorbild zentriert das Logo am Handy nicht, sondern setzt es 8 von oben */
  .topbar .logo {
    align-self: flex-start; margin-top: 8px;
  }
  .logo { font-size: 22px; }

  /* --- Sportzeile im roten Bereich ------------------------------------- */
  .sportband-leiste { background: transparent; margin: 0; }
  .sportband { padding: 4px 8px 6px; gap: 4px; }
  .sportband button, .sportband-mehr {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 72px; width: 72px; height: 54px; padding: 6px 2px 4px;
    background: none; border: 0; border-bottom: 0;
    font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, 0.75);
    white-space: nowrap; cursor: pointer;
  }
  .sportband button.aktiv, .sportband-mehr:active {
    color: #fff; font-weight: 700; border-bottom: 0;
  }
  /* 32x32 wie beim Vorbild - dort steht das blanke Zeichen auf dem Rot */
  .sportband .symbol {
    width: 32px; height: 32px; font-size: 26px; line-height: 32px;
    display: block; text-align: center; background: none; border-radius: 0;
  }
  .sportband .zaehler {
    position: absolute; top: 2px; right: 12px;
    color: #fff; font-size: 10px; font-weight: 700;
    background: rgba(0, 0, 0, 0.3); border-radius: 9999px; padding: 0 5px;
  }

  /* --- Suche: erscheint auf Tippen der Lupe und klebt dann oben --------
     Fest eingeblendet kostete sie dauerhaft 50px Bildschirm und rutschte beim
     Blaettern unter die Kopfleiste. Jetzt ist sie im Ruhezustand gar nicht da
     und bleibt waehrend der Suche immer erreichbar. */
  .lupe {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; flex: 0 0 auto;
    background: none; border: 0; color: #fff; cursor: pointer;
  }
  .lupe svg { width: 22px; height: 22px; display: block; }
  body.suche-offen .lupe { opacity: 0.55; }

  body.suche-offen .suchband {
    display: block;
    position: sticky; top: calc(56px + var(--schutz-oben)); z-index: 55;
    padding: 6px 12px 10px;
    /* Feste Farbe statt Verlauf: die Leiste wandert beim Blaettern nach oben,
       ein mitgerechneter Verlaufsausschnitt wuerde an einer der beiden
       Positionen immer danebenliegen. #5c0016 ist der mittlere Halt des
       Verlaufs und passt an beiden Stellen. */
    background: #5c0016;
  }
  .suchband input {
    width: 100%; height: 40px; padding: 0 38px 0 14px;
    border: 0; border-radius: 9999px;
    background: rgba(255, 255, 255, 0.94); color: var(--text);
    /* 16px: darunter zoomt iOS beim Antippen in die Seite hinein. */
    font: inherit; font-size: 16px;
    -webkit-appearance: none; appearance: none;
  }
  .suchband input::placeholder { color: #7b858c; }
  .suchband input:focus { outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 1px; }
  /* Das eigene Kreuz des Browsers bei type=search stoert neben unserem */
  .suchband input::-webkit-search-cancel-button { display: none; }
  .such-weg {
    position: absolute; right: 20px; top: 10px;
    width: 32px; height: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; color: #7b858c;
    font-size: 22px; line-height: 1; cursor: pointer;
  }

  /* --- Inhalt als abgerundetes Blatt darueber -------------------------- */
  .layout {
    background: var(--bg);
    border-radius: 16px 16px 0 0;
    padding: 16px 8px calc(78px + var(--schutz-unten));
    margin: 0;
    position: relative;
    min-height: calc(100vh - 120px);
  }

  /* --- Karten: 16px Radius, der Rand kommt aus dem Blatt ---------------- */
  .karte, #inhalt > .karte, #mitte > .karte, #inhalt > .match-center {
    border-radius: 16px;
  }
  .match-center { border-radius: 16px; }
  /* Oben Platz lassen. Die Zahl am Knopf "Offen" ragt ueber dessen Kante
     hinaus, und die Zeile scrollt waagerecht - ohne Polsterung schneidet sie
     das Abzeichen ab (auf dem iPhone waren es vier Pixel). Der negative Rand
     nimmt den Platz optisch wieder zurueck, die Zeile rutscht also nicht. */
  .filterzeile { padding: 8px 0 2px; margin-top: -8px; }

  /* --- Untere Leiste: 52 hoch, Eintraege 46, Schrift 10 ---------------- */
  /* Vier Knoepfe (Link teilen, QR-Code, Teil-Cashout, Cashout) passen auf
     375px nicht nebeneinander. Ohne Umbruch schob sich der Cashout-Knopf
     ueber den Bildschirmrand hinaus und war nicht mehr ganz antippbar. */
  .cashout-bereich {
    margin-left: 0; width: 100%; justify-content: flex-start;
  }
  .cashout-bereich .btn-cashout { flex: 1 1 100%; text-align: center; }

  .untennav {
    /* Deckend Weiss: mit dem fruheren halbdurchsichtigen Verlauf schimmerte
       die Liste darunter durch die Leiste - beim Vorbild tut sie das nicht. */
    background: var(--karte);
    border-top: 0;
    box-shadow: 0 -1px 0 rgba(18, 20, 22, 0.08), 0 -8px 16px rgba(18, 20, 22, 0.05);
    /* Hoeher als beim Vorbild (dort 52): auf dem iPhone liegt unten die
       Home-Anzeige, dadurch rutschte die Leiste so weit an den Rand, dass sie
       kaum zu treffen war. 54 hohe Eintraege + 6 oben und unten = 66, dazu
       kommt die Schutzzone des Geraets. */
    padding-top: 6px;
    padding-bottom: calc(6px + var(--schutz-unten));
  }
  .untennav button {
    min-height: 54px; height: 54px; padding: 6px 2px; gap: 3px;
    font-size: 10.5px; font-weight: 400; color: #646f75;
  }
  .untennav button.aktiv { color: #121414; font-weight: 600; }
  /* Kleiner und dicht an das Zeichen geheftet - vorher lag die Zahl mitten
     auf dem Symbol und stiess an die Beschriftung daneben. */
  .untennav .punkt-zahl {
    top: 3px; margin-left: 3px;
    min-width: 14px; height: 14px; line-height: 14px; padding: 0 3px; font-size: 9px;
    border: 1px solid #fff;
  }

  .schein-leiste { bottom: calc(66px + var(--schutz-unten)); }
  /* Beim Vorbild schwebt am Handy kein Chatknopf ueber der Liste - er deckte
     hier die rechte Quotenspalte zu. Der Kundenservice steht in der Schublade. */
  .chat-knopf { display: none; }

  /* --- Der Spielstand wurde am rechten Rand abgeschnitten --------------- */
  .spiel-teams { min-width: 0; }
  .spiel-team { min-width: 0; gap: 6px; }
  .spiel-team > span:not(.tor):not(.wappen) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .spiel-team .tor { flex: 0 0 auto; margin-left: auto; padding-right: 2px; }
}



/* Startkarten: Ueberschrift auf dem Grund, weisser Kasten darunter -
   am Rechner bleibt es eine geschlossene Karte. */
.karte-kasten { display: contents; }

@media (max-width: 980px) {
  #mitte > .karte {
    background: transparent; box-shadow: none; border-radius: 0; overflow: visible;
  }
  #mitte > .karte > .karte-kopf {
    background: transparent; border-bottom: 0;
    padding: 2px 4px 9px; font-size: 17px; font-weight: 700; color: var(--text);
  }
  #mitte > .karte > .karte-kopf .klein,
  #mitte > .karte > .karte-kopf .alle { font-weight: 500; }
  .karte-kasten {
    display: block; background: var(--karte); border-radius: 16px;
    box-shadow: var(--schatten); overflow: hidden;
  }

  /* Sportzeile: Eintraege 72 breit wie beim Vorbild, Zaehler dezent */
  .sportband button, .sportband-mehr { min-width: 72px; width: 72px; }
  .sportband .zaehler {
    position: absolute; top: 4px; right: 10px;
    background: rgba(0, 0, 0, 0.32); color: #fff;
    font-size: 9.5px; font-weight: 700; line-height: 14px;
    min-width: 14px; height: 14px; padding: 0 4px; border-radius: 9999px;
    text-align: center;
  }
}

/* Sehr schmale Geraete zuletzt, sonst ueberschreibt die allgemeine Regel sie */
@media (max-width: 340px) {
  .sportband button, .sportband-mehr { min-width: 64px; width: 64px; }
}

/* Sprache und Waehrung in der Schublade */
.schublade-wahl {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 16px; border-bottom: 1px solid var(--linie-zart);
  font-size: 14.5px; min-height: 50px;
}
.schublade-wahl .zeichen { font-size: 17px; width: 22px; text-align: center; }
.schublade-wahl .wort { flex: 1; }
.schublade-wahl select {
  font: inherit; font-size: 15px; padding: 8px 10px; min-height: 44px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--karte); max-width: 150px;
}

/* Eigenes Logo: liegt public/logo.svg (oder .png) vor, ersetzt es den
   Schriftzug. Fehlt die Datei, entfernt sich das Bild selbst und der
   Schriftzug bleibt stehen - die Kopfleiste sieht nie leer aus. */
.logo { display: flex; align-items: center; gap: 8px; }
.marke-bild + span { display: none; }


/* Die gelieferte Logodatei enthaelt Schriftzug UND quadratisches Zeichen
   nebeneinander (2164x727). In der Kopfleiste soll nur der Schriftzug stehen,
   deshalb wird der rechte Teil weggeschnitten und die Breite nachgezogen. */
.marke-bild {
  /* Masse vom Vorbild: 32 hoch, linker Rand 20, 8 von oben - auf beiden
     Ansichten gleich. Die Datei ist auf den reinen Schriftzug zugeschnitten
     (1440x290), deshalb braucht es hier keinen Zuschnitt per CSS mehr. */
  height: 32px; width: auto; display: block;
}

/* Kurze Meldung mitten auf dem Bildschirm (siehe mitteMeldung in app.js).
   Sitzt bewusst nicht unten rechts wie der Toast - dort, wo gerade der Finger
   war, wird sie uebersehen. */
.mitte-meldung {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 120; max-width: 78vw;
  background: rgba(18, 20, 20, 0.94); color: #fff;
  padding: 18px 24px; border-radius: 14px; text-align: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
  animation: mitteRein 0.16s ease-out;
  cursor: pointer;
}
.mitte-text { font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.mitte-zusatz { font-size: 13px; opacity: 0.8; margin-top: 5px; line-height: 1.4; }
.mitte-meldung.geht { opacity: 0; transition: opacity 0.2s ease-in; }
@keyframes mitteRein {
  from { transform: translate(-50%, -50%) scale(0.94); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ------------------------------------------- Ergebnis-Matrix im Risikobereich
   Was kostet welcher Ausgang? Klappt unter einer Zeile der Haftungstabelle auf. */
.matrix-zeile > td { background: var(--bg); padding: 0; }
.matrix { padding: 14px 16px 16px; }
.matrix-kopf { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.matrix-kopf .klein { color: var(--text-schwach); }

.matrix-tabelle { width: 100%; max-width: 620px; border-collapse: collapse; }
.matrix-tabelle th {
  text-align: left; font-size: 11.5px; font-weight: 600;
  color: var(--text-grau); padding: 4px 8px; border-bottom: 1px solid var(--linie);
}
.matrix-tabelle th.num, .matrix-tabelle td.num { text-align: right; font-variant-numeric: tabular-nums; }
.matrix-tabelle td { padding: 7px 8px; border-bottom: 1px solid var(--linie); font-size: 13.5px; }
.matrix-tabelle tr:last-child td { border-bottom: 0; }
/* Der teuerste Ausgang faellt auf - das ist die Zahl, auf die es ankommt. */
.matrix-schlimm td { background: #fff4f4; font-weight: 700; }
.matrix-schlimm td:first-child::after { content: ' ← teuerster Ausgang'; font-weight: 400; font-size: 11px; color: var(--rot); }

.matrix-titel { font-size: 11.5px; font-weight: 700; color: var(--text-grau); margin: 14px 0 7px; }
.matrix-staende { display: flex; gap: 8px; flex-wrap: wrap; }
.matrix-stand {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 8px;
  padding: 7px 11px; min-width: 88px; font-variant-numeric: tabular-nums; font-size: 12.5px;
}
.matrix-stand b { font-size: 15px; }
.matrix-fuss { margin-top: 12px; font-size: 11.5px; color: var(--text-schwach); line-height: 1.5; max-width: 660px; }

/* Stufen beim Geldsenden (Agentendialog und Nutzerliste in der Verwaltung).
   Am Handy ist das Eintippen von Zahlen die laestigste Stelle des Ablaufs.

   Eigene Namen, NICHT `.schnellbetrag`: So heisst bereits die Einsatzleiste im
   Wettschein (5/10/25/50). Dieselbe Klasse haette deren Aufbau mit diesen
   Regeln ueberschrieben. */
.geldstufen {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.geldstufe {
  flex: 1 1 auto; min-width: 62px;
  padding: 9px 10px; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--karte); color: var(--text); font-weight: 700; font-size: 14px;
  line-height: 1; white-space: nowrap;
}
.geldstufe:active { background: var(--bg); }

@media (pointer: coarse) {
  /* Fingergerecht: 44px ist die uebliche Mindestgroesse fuer Beruehrungsziele. */
  .geldstufe { min-height: 44px; font-size: 15px; }
}

/* In einer Tabellenzelle bleiben die Stufen in EINER Zeile.
   Ohne das brachen sie in der Nutzerliste der Verwaltung um und stapelten sich
   untereinander: Die Zelle ist dort nur rund 78px breit, und jede Zeile wuchs
   dadurch auf 351px Hoehe. Die Tabelle laesst sich ohnehin seitlich schieben -
   ein paar Pixel mehr Breite stoeren dort weniger als die Hoehe. */
td .geldstufen { flex-wrap: nowrap; }
td .geldstufe {
  flex: 0 0 auto; min-width: 0; padding: 7px 9px; font-size: 13px;
}
@media (pointer: coarse) {
  td .geldstufe { min-height: 38px; font-size: 14px; }
}

/* Befunde des Waechters.
   Die Stufe steht als farbiger Streifen links, nicht als Flaeche: Drei rote
   Kaesten untereinander liest niemand mehr, ein Streifen bleibt lesbar. */
.befund {
  border: 1px solid var(--linie); border-left: 4px solid var(--text-grau);
  border-radius: var(--radius-klein); padding: 12px 14px; margin-bottom: 10px;
  background: var(--karte);
}
.befund.rot { border-left-color: var(--rot); }
.befund.gelb { border-left-color: #e8a33d; }
.befund.blau { border-left-color: #5b8ac6; }

.befund-kopf { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.befund-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--text-grau); flex-shrink: 0; }
.befund.rot .befund-punkt { background: var(--rot); }
.befund.gelb .befund-punkt { background: #e8a33d; }
.befund.blau .befund-punkt { background: #5b8ac6; }

.befund-warum { margin-top: 6px; font-size: 13.5px; line-height: 1.45; }
.befund-tun {
  margin-top: 6px; font-size: 13px; color: var(--text-grau);
  border-top: 1px dashed var(--linie); padding-top: 6px;
}
.befund-liste { margin-top: 8px; }
.befund-zeile {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-top: 1px solid var(--linie); font-size: 13px;
}

@media (max-width: 620px) {
  .befund-zeile { flex-direction: column; gap: 2px; }
}

/* Abgemeldet: nur die Anmeldekarte, sonst nichts.
   Die Navigationsleiste und das Wettscheinfach liegen im Aufbau ausserhalb
   von #app und blieben deshalb stehen, solange niemand angemeldet war - fuenf
   Knoepfe, die nichts tun. Die Verwaltung hat nichts Vergleichbares, deshalb
   sah ihre Maske schon immer ruhiger aus. */
body.abgemeldet .untennav,
body.abgemeldet .schein-leiste,
body.abgemeldet .schublade,
body.abgemeldet .schublade-schatten,
body.abgemeldet #chatKnopf,
body.abgemeldet .suchband,
body.abgemeldet .sportband-leiste {
  display: none !important;
}

/* Ohne die Leiste braucht die Seite unten auch keinen Platz mehr dafuer. */
body.abgemeldet .login-seite { padding-bottom: 20px; }

/* Die Abrechnung im Tagesabschluss: Beleg links, Spielersicht rechts. */
.ta-abrechnung {
  display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start;
  margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--linie);
}
/* Der Beleg darf schrumpfen. Mit `flex: 0 0 auto` und fester max-width
   blieb er am Handy 440px breit, waehrend das Fenster 375px hat - die
   Erlaeuterung darunter lief rechts aus dem Bild. */
.ta-beleg { flex: 1 1 300px; min-width: 0; max-width: 440px; }
/* Der Zusatz erklaert die Zeile, ohne sie zu verdraengen. */
/* Ein kurzer Zusatz darf neben der Zeile stehen; wird er zu lang, rutscht
   er eine Zeile tiefer, statt die Zahlenspalte zu verschieben. */
.ta-beleg .kasse-zeile { flex-wrap: wrap; }
.ta-zusatz { font-size: 12px; color: var(--text-schwach); }
.ta-notiz {
  margin: -1px 0 5px 22px; font-size: 12px; color: var(--text-schwach);
  line-height: 1.45;
}
.ta-seite { flex: 1 1 260px; min-width: 240px; max-width: 420px; }
.ta-seite-zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px dashed var(--linie);
}
.ta-seite-zeile:last-child { border-bottom: 0; }
.ta-seite-wort { font-size: 13px; color: var(--text-schwach); }
.ta-seite-wert { font-weight: 700; font-variant-numeric: tabular-nums; }
.ta-seite-wert.plus { color: #14a44d; }
.ta-seite-wert.minus { color: var(--rot); }

@media (max-width: 720px) {
  .ta-abrechnung { gap: 16px; }
}

/* Erst am Handy wird der Umbruch erzwungen. Dazwischen genuegt das
   flex-wrap oben: Der Zusatz rutscht von selbst tiefer, wenn er nicht mehr
   danebenpasst - und bleibt oben, wenn doch. */
@media (max-width: 560px) {
  .ta-zusatz { flex-basis: 100%; margin-left: 22px; }
}

.ta-warnung {
  margin: -6px 0 14px; padding: 9px 12px;
  background: #fff8e1; border-left: 3px solid #f0b429; border-radius: 6px;
  font-size: 12.5px; line-height: 1.45; color: var(--text);
}

/* Eine abgeleitete Angabe, keine festgehaltene - sie steht blasser da und
   traegt ein Fragezeichen, damit sie nicht wie eine Tatsache gelesen wird. */
.geschaetzt { color: var(--text-schwach); font-style: italic; }

/* Kontoauszug eines einzelnen Kontos */
.auszug-kasten { max-width: 560px; width: 100%; }
.auszug-kasten .overlay-koerper { max-height: 70vh; overflow-y: auto; }
.auszug-summe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px 16px; margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 2px solid var(--linie);
}
.auszug-summe-zeile { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.auszug-summe-wort { font-size: 12.5px; color: var(--text-schwach); }
.auszug-summe-wert { font-weight: 700; font-variant-numeric: tabular-nums; }
.auszug-summe-wert.plus { color: #14a44d; }
.auszug-summe-wert.minus { color: var(--rot); }
.auszug-zeile {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--linie);
}
.auszug-zeile:last-child { border-bottom: 0; }
.auszug-links { min-width: 0; }
.auszug-art { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.auszug-marke {
  padding: 1px 6px; border-radius: 4px; background: var(--bg);
  font-size: 11px; color: var(--text-schwach);
}
.auszug-klein { font-size: 11.5px; color: var(--text-schwach); margin-top: 2px; }
.auszug-rechts { text-align: right; flex: 0 0 auto; }
.auszug-betrag { font-weight: 700; font-variant-numeric: tabular-nums; }
.auszug-betrag.plus { color: #14a44d; }
.auszug-betrag.minus { color: var(--rot); }

/* Suche in der Verwaltung */
/* Eigene Zeile ueber dem Inhalt. In der Reiterleiste wurde das Feld am
   Handy auf 26 Pixel zusammengedrueckt - die Leiste scrollt dort waagerecht
   und laesst einem Eingabefeld keinen Platz. */
.suche-zeile-aussen { max-width: 760px; margin: 0 auto 10px; padding: 0 2px; }
.suche-zeile-aussen input {
  width: 100%; height: 38px; padding: 0 14px;
  border: 1px solid var(--linie); border-radius: 19px;
  font: inherit; font-size: 16px;      /* 16px: sonst zoomt das Telefon hinein */
  background: var(--karte);
}
.suche-ergebnis {
  max-width: 760px; margin: 0 auto 14px; padding: 8px 0;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-karte);
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
}
.suche-kopf {
  padding: 8px 16px 4px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-schwach);
}
.suche-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px; border-bottom: 1px solid var(--linie);
}
.suche-zeile:last-child { border-bottom: 0; }
.suche-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.suche-marke {
  padding: 1px 7px; border-radius: 4px; background: var(--bg);
  font-size: 11px; color: var(--text-schwach);
}
.suche-marke.rot { background: #fde8e8; color: var(--rot); }
.suche-klein { font-size: 11.5px; color: var(--text-schwach); margin-top: 2px; }
.suche-leer, .suche-mehr { padding: 12px 16px; font-size: 13px; color: var(--text-schwach); }

/* Der Weg zurueck in die Verwaltung - im Konto, ueber dem Abmelden-Knopf.
   Bewusst KEIN Band ueber der Seite: Das Layout rechnet am Handy mit der
   Fensterhoehe (min-height: calc(100vh - 120px)), und jede zusaetzliche
   Zeile verschiebt alles gegen die fest stehenden Leisten. */
.btn-zur-verwaltung {
  display: block; width: 100%; padding: 13px 16px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: #2b3445; color: #fff;
  font: inherit; font-size: 15px; font-weight: 700; text-align: center;
  text-decoration: none;
}
.zur-verwaltung-hinweis {
  margin-top: 8px; color: var(--text-schwach); line-height: 1.45; text-align: center;
}

/* ------------------------------------------------------ Ein-Klick-Wette
   Schalter oben im Wettschein. Ist er an, setzt ein Tipp auf eine Quote die
   Wette sofort; das gelbe Abzeichen in der Kopfleiste erinnert daran, damit
   niemand aus Versehen wettet. */
.einklick { padding: 10px 16px 12px; border-bottom: 1px solid var(--linie); }
.einklick-schalter {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-weight: 700; font-size: 14px; position: relative; user-select: none;
}
.einklick-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.einklick-titel { flex: 1; }
.einklick-regler {
  flex: none; width: 42px; height: 24px; border-radius: 12px; background: #c9cdd2;
  position: relative; transition: background 0.15s;
}
.einklick-regler::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.einklick-schalter input:checked ~ .einklick-regler { background: var(--rot); }
.einklick-schalter input:checked ~ .einklick-regler::after { transform: translateX(18px); }
.einklick-schalter input:focus-visible ~ .einklick-regler { outline: 2px solid var(--rot); outline-offset: 2px; }
.einklick-betraege { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.einklick-betraege button {
  padding: 8px 0; border-radius: var(--radius-klein); border: 1px solid var(--linie);
  background: var(--karte); font-weight: 700; font-size: 14px; cursor: pointer; color: inherit;
}
.einklick-betraege button.aktiv { background: var(--rot); border-color: var(--rot); color: #fff; }
.einklick-info { font-size: 12px; color: var(--text-grau); margin-top: 8px; line-height: 1.4; }
.einklick-abzeichen {
  background: var(--gelb); color: #2b2100; border: 0; border-radius: 999px;
  padding: 5px 11px; font-weight: 800; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.toast.widerruf {
  display: flex; align-items: center; gap: 14px; text-align: left;
  width: min(88vw, 380px); max-width: none;
}
.toast.widerruf .text { flex: 1; min-width: 0; }
.toast.widerruf .text > div:first-child { white-space: nowrap; }
.toast.widerruf .text .klein { font-size: 13px; font-weight: 500; opacity: 0.85; margin-top: 2px; }
.toast.widerruf .rueck {
  flex: none; background: #fff; color: #121414; border: 0; border-radius: 999px;
  padding: 8px 14px; font-weight: 800; font-size: 14px; cursor: pointer;
}
.toast.widerruf .rueck:disabled { opacity: 0.5; cursor: default; }
.quote.einklick-ok, .quote-breit.einklick-ok { animation: einklickPuls 0.7s ease-out; }
@keyframes einklickPuls {
  from { box-shadow: 0 0 0 0 rgba(0, 135, 90, 0.65); }
  to { box-shadow: 0 0 0 12px rgba(0, 135, 90, 0); }
}
/* Am Handy ist in der Kopfleiste kein Platz - das Abzeichen machte sie
   breiter als den Bildschirm, und die ganze Seite liess sich seitlich
   verschieben. Dort traegt stattdessen der Knopf "Schein" unten einen
   gelben Blitz. */
@media (max-width: 980px) {
  .einklick-abzeichen { display: none !important; }
  .untennav button.einklick-an { position: relative; }
  .untennav button.einklick-an::before {
    content: '\26A1'; position: absolute; top: 3px; left: calc(50% - 26px);
    width: 18px; height: 18px; line-height: 18px; border-radius: 999px;
    background: var(--gelb); color: #2b2100; font-size: 11px; text-align: center;
  }
}

/* ------------------------------------------------------------ Cockpit
   Oben auf der Uebersicht der Verwaltung (public/admin.js, ladeCockpit). */
.cockpit-titel { display: flex; align-items: baseline; gap: 10px; margin: 6px 2px 8px; }
.cockpit-titel h3 { margin: 0; font-size: 16px; }
.cockpit-block { margin-bottom: 14px; }
.cockpit-panelkopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.negativ { color: var(--rot); }

.cockpit-warnungen { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cockpit-warnung {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; border-radius: var(--radius-klein); padding: 10px 12px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
}
.cockpit-warnung.rot { background: var(--rot-hell); color: var(--rot); }
.cockpit-warnung.gelb { background: #fff8e6; color: #7a5600; }
.cockpit-warnzeichen {
  flex: none; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 20px;
  font-weight: 800; font-size: 13px;
}
.cockpit-warnung.rot .cockpit-warnzeichen { background: var(--rot); color: #fff; }
.cockpit-warnung.gelb .cockpit-warnzeichen { background: var(--gelb); color: #2b2100; }
.cockpit-warntext { flex: 1; }
.cockpit-warnpfeil { font-size: 18px; opacity: 0.7; }
.cockpit-mehr { color: var(--text-grau); padding: 8px 14px 10px; }

.cockpit-heute { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cockpit-kachel .v.negativ { color: var(--rot); }
.cockpit-vgl { font-size: 12px; color: var(--text-grau); margin-top: 3px; font-variant-numeric: tabular-nums; }

.cockpit-wahl { display: inline-flex; gap: 4px; }
.cockpit-wahl button {
  border: 1px solid var(--linie); background: var(--karte); border-radius: 999px; padding: 4px 10px;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: inherit;
}
.cockpit-wahl button.aktiv { background: #121414; border-color: #121414; color: #fff; }

.verlauf-summe { margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.verlauf-huelle { position: relative; }
.verlauf-svg { width: 100%; height: auto; display: block; }
.verlauf-gitter { stroke: #e1e0d9; stroke-width: 1; }
.verlauf-null { stroke: #c3c2b7; stroke-width: 1.5; }
.verlauf-achse { fill: #898781; font-size: 11px; font-variant-numeric: tabular-nums; }
.verlauf-treffer { fill: transparent; cursor: pointer; }
.verlauf-treffer.aktiv { fill: rgba(18, 20, 20, 0.05); }
.verlauf-tip {
  position: absolute; z-index: 5; min-width: 160px; pointer-events: none;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); font-size: 12.5px;
}
.verlauf-tipzeile { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
.verlauf-legende { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--text-grau); }
.verlauf-legendeneintrag { display: inline-flex; align-items: center; gap: 6px; }
.verlauf-farbe { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cockpit-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.cockpit-tabelle th, .cockpit-tabelle td { padding: 6px 8px; border-bottom: 1px solid var(--linie); text-align: left; }
.cockpit-tabelle .num { text-align: right; }
.leer-hinweis { color: var(--text-grau); font-size: 13px; padding: 14px 16px; }

.cockpit-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cockpit-ticker { max-height: 460px; overflow-y: auto; }
.ticker-zeile {
  display: grid; grid-template-columns: 62px 70px 1fr auto; gap: 10px; align-items: center;
  width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--linie); background: none;
  padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer; color: inherit;
}
.ticker-zeile:hover { background: #f7f8f8; }
.ticker-zeile.gross { box-shadow: inset 3px 0 0 var(--gelb); background: #fffbef; }
.ticker-zeit { color: var(--text-grau); font-variant-numeric: tabular-nums; font-size: 12px; }
.ticker-art { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-grau); }
.ticker-win .ticker-art, .ticker-cashout .ticker-art { color: var(--gruen); }
.ticker-refund .ticker-art { color: #7a5600; }
.ticker-mitte { min-width: 0; display: flex; flex-direction: column; }
.ticker-was { color: var(--text-grau); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker-betrag { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.risiko-zeile {
  display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--linie);
  background: none; padding: 10px 14px; font: inherit; cursor: pointer; color: inherit;
}
.risiko-zeile:hover { background: #f7f8f8; }
.risiko-zeile.rot { box-shadow: inset 3px 0 0 var(--rot); }
.risiko-zeile.gelb { box-shadow: inset 3px 0 0 var(--gelb); }
.risiko-kopf { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.risiko-kopf .klein { color: var(--text-grau); }
.risiko-ausgaenge { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.risiko-ausgang {
  display: flex; justify-content: space-between; gap: 6px; padding: 6px 8px;
  background: #f5f6f6; border-radius: 6px; font-size: 13px; font-variant-numeric: tabular-nums;
}
.risiko-ausgang.schlimmster { outline: 2px solid var(--rot); outline-offset: -2px; }
.risiko-zeichen { font-weight: 800; }
.risiko-wert.negativ { color: var(--rot); font-weight: 700; }
.risiko-warnung { margin-top: 6px; font-size: 12.5px; color: var(--rot); font-weight: 600; }

.cockpit-spieler { display: grid; grid-template-columns: repeat(4, 1fr); }
.spieler-spalte { border-right: 1px solid var(--linie); padding-bottom: 6px; min-width: 0; }
.spieler-spalte:last-child { border-right: 0; }
.spieler-titel { font-size: 12px; font-weight: 700; color: var(--text-grau); padding: 10px 14px 6px; text-transform: uppercase; letter-spacing: 0.02em; }
.spieler-summe { color: var(--text-grau); padding: 0 14px 6px; }
.spieler-zeile {
  display: flex; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: none;
  padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; color: inherit;
}
.spieler-zeile:hover { background: #f7f8f8; }
.spieler-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spieler-wert { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

@media (max-width: 1100px) {
  .cockpit-zwei { grid-template-columns: 1fr; }
  .cockpit-spieler { grid-template-columns: repeat(2, 1fr); }
  .spieler-spalte:nth-child(2) { border-right: 0; }
  .spieler-spalte:nth-child(-n+2) { border-bottom: 1px solid var(--linie); }
}
/* Am Handy ist die Uebersicht die Startseite der Verwaltung: kompakte
   Kacheln zu zweit, der Ticker kuerzer, alles untereinander. */
@media (max-width: 620px) {
  .cockpit-heute { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cockpit-heute .kachel { padding: 10px 12px; }
  .cockpit-heute .kachel .v { font-size: 18px; }
  .cockpit-vgl { font-size: 11px; }
  .cockpit-spieler { grid-template-columns: 1fr; }
  .spieler-spalte { border-right: 0; border-bottom: 1px solid var(--linie); }
  .ticker-zeile { grid-template-columns: 44px 1fr auto; padding: 8px 10px; }
  .ticker-art { display: none; }
  .cockpit-ticker { max-height: 340px; }
}

/* Das Logo in der Verwaltung fuehrt zur Uebersicht (admin.js, zurUebersicht). */
.logo-klick { cursor: pointer; user-select: none; }
.logo-klick:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------------------ Steuerung
   Reiter "Steuerung" und "Protokoll" der Verwaltung, Notbremse, Markierungen. */
.notbremse-knopf { border-color: #ffd0d6 !important; }
.notbremse-knopf.aktiv { background: #fff !important; color: var(--rot) !important; font-weight: 800; animation: notbremsePuls 1.6s infinite; }
@keyframes notbremsePuls { 50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45); } }
.notbremse-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--rot); color: #fff; padding: 10px 16px; font-size: 14px;
}
.notbremse-banner button { margin-left: auto; background: #fff; color: var(--rot); border: 0; border-radius: 999px; padding: 6px 14px; font-weight: 700; cursor: pointer; }

.mark {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700; vertical-align: middle; white-space: nowrap;
}
.mark-vip { background: #fff4d1; color: #7a5600; }
.mark-beobachten { background: #e7f0fd; color: #1c5bb0; }
.mark-verdacht { background: var(--rot-hell); color: var(--rot); }
.markier-knopf {
  display: inline-block; margin-top: 3px; border: 0; background: none; padding: 0;
  color: var(--text-grau); font: inherit; font-size: 11.5px; text-decoration: underline; cursor: pointer;
}
.nutzer-notiz { font-style: italic; }
.ticker-wer { display: flex; align-items: center; min-width: 0; }

.steuer-block { margin-bottom: 14px; }
.steuer-ligen { border-top: 1px solid var(--linie); }
.steuer-liga {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 9px 4px; border-bottom: 1px solid var(--linie);
}
.steuer-liga.gesperrt { box-shadow: inset 3px 0 0 var(--gelb); }
.steuer-liga.ausgeblendet { box-shadow: inset 3px 0 0 var(--rot); opacity: 0.85; }
.steuer-liganame { display: flex; flex-direction: column; min-width: 0; }
.steuer-liganame b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steuer-liganame .klein { color: var(--text-grau); }
.steuer-modus { display: inline-flex; border: 1px solid var(--linie); border-radius: 999px; overflow: hidden; }
.steuer-moduswahl { border: 0; background: var(--karte); padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: inherit; }
.steuer-moduswahl + .steuer-moduswahl { border-left: 1px solid var(--linie); }
.steuer-moduswahl.aktiv { background: #121414; color: #fff; }
.steuer-ligamarge { display: inline-flex; align-items: center; gap: 4px; }
.steuer-ligamarge input { width: 64px; }

.hand-spiel { border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.hand-spiel .klein { color: var(--text-grau); }
.hand-markt { margin-top: 8px; }
.hand-marktname { font-size: 12px; font-weight: 700; color: var(--text-grau); margin-bottom: 4px; }
.hand-auswahl { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.hand-auswahl.hand .hand-name::after { content: ' ✎'; color: var(--rot); }
.hand-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hand-auswahl input { width: 80px; }
.hand-titel { font-size: 12px; font-weight: 700; color: var(--text-grau); text-transform: uppercase; letter-spacing: 0.02em; margin: 14px 0 6px; }
.hand-aktiv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.hand-aktiv .klein { color: var(--text-grau); }

.steuer-agent { padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.steuer-agent.gesperrt { box-shadow: inset 3px 0 0 var(--rot); }
.steuer-agentfelder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 8px; }
.steuer-agentfelder label { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.steuer-agentfelder input { width: 130px; }
.steuer-arten { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px; }
.steuer-art { display: flex; align-items: center; gap: 6px; font-size: 13.5px; margin: 0; font-weight: 500; }
.wf-frist { color: var(--rot) !important; font-weight: 600; }
.pk-zeit { white-space: nowrap; color: var(--text-grau); font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .steuer-liga { grid-template-columns: 1fr; gap: 6px; }
  .steuer-modus { justify-self: start; }
  .notbremse-knopf { padding: 5px 9px !important; font-size: 12px !important; }
}

/* Spielerseite: Hinweis, solange die Verwaltung die Notbremse gezogen hat. */
.wettstopp-hinweis {
  background: var(--rot); color: #fff; text-align: center; padding: 9px 14px;
  font-size: 14px; font-weight: 700;
}

/* Push auf diesem Geraet (Steuerung -> Benachrichtigungen) */
.push-block { border: 1px solid var(--linie); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.push-anleitung { margin-top: 10px; line-height: 1.6; }
.push-anleitung summary { cursor: pointer; }
.push-anleitung ol { margin: 6px 0 6px 18px; padding: 0; }
.push-trenner { color: var(--text-grau); margin: 4px 0 10px; }

/* Cockpit: was die Werbung kostet (12.10.2026) */
.cockpit-werbung { display: grid; grid-template-columns: repeat(5, 1fr); }
.werbung-posten { padding: 10px 14px; border-right: 1px solid var(--linie); min-width: 0; }
.werbung-posten:last-child { border-right: 0; }
.werbung-posten .klein { color: var(--text-grau); }
.werbung-name { font-size: 12px; font-weight: 700; color: var(--text-grau); text-transform: uppercase; letter-spacing: 0.02em; }
.werbung-wert { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.werbung-summe { background: #f7f8f8; }
@media (max-width: 900px) {
  .cockpit-werbung { grid-template-columns: repeat(2, 1fr); }
  .werbung-posten { border-bottom: 1px solid var(--linie); }
  .werbung-posten:nth-child(2n) { border-right: 0; }
  .werbung-summe { grid-column: 1 / -1; }
}

/* Steuerung: Schutz fuers Haus */
.schutz-gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.schutz-teil { border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.schutz-teil.voll { grid-column: 1 / -1; }
.schutz-teil .klein { color: var(--text-grau); line-height: 1.5; }
.schutz-schalter { display: flex; align-items: center; gap: 8px; margin: 0; }
.schutz-schalter input { width: auto; }
@media (max-width: 760px) { .schutz-gitter { grid-template-columns: 1fr; } }

/* Wette aendern, Meistgespielt, Push fuer Spieler (12.10.2026) */
.aendern-hinweis { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-bottom: 8px; }
.wk-geaendert { font-size: 12px; color: var(--text-grau, #6f7479); padding: 4px 14px 0; }
.beliebt-zahl { font-size: 12px; color: var(--text-grau, #6f7479); white-space: nowrap; }
.kombi-kopf .beliebt-zahl + .kombi-quote { margin-left: auto; }
.push-spieler { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.push-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.push-arten { display: flex; flex-direction: column; gap: 6px; }
.push-art { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0; }
.push-art input { width: auto; margin: 0; }
.push-geraete, .push-hilfe { color: var(--text-grau, #6f7479); }

/* Erster Start vom Home-Bildschirm: Frage nach Benachrichtigungen */
.push-hinweis { width: 380px; text-align: left; }
.push-hinweis .overlay-koerper { text-align: left; max-height: 80vh; overflow-y: auto; }
.push-hinweis-text { font-size: 15px; line-height: 1.45; font-weight: 600; }
.push-hinweis-klein { font-size: 13px; line-height: 1.45; color: var(--text-grau, #6f7479); margin-top: 8px; }
.push-hinweis-schritte { padding-left: 20px; margin: 12px 0 0; font-size: 14px; line-height: 1.45; }
.push-hinweis-schritte li { margin-bottom: 10px; }
.push-hinweis-adresse { display: flex; gap: 6px; margin: 6px 0 4px; }
.push-hinweis-adresse input { flex: 1; min-width: 0; font-size: 16px; padding: 8px; }
.push-hinweis-link { font-size: 13px; color: var(--rot); }
.push-hinweis-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.push-hinweis-knoepfe .btn-rot { flex: 1 1 100%; min-height: 44px; }
.push-hinweis-knoepfe .btn-grau { flex: 1; min-height: 40px; }
.push-hinweis-nie { flex: 1; border: 0; background: none; color: var(--text-grau, #6f7479); font-size: 13px; min-height: 40px; cursor: pointer; }

.push-hinweis-laden { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; margin-bottom: 4px; }

/* Auto-Cashout, Nachspielen, Meine Bilanz (12.10.2026) */
.auto-marke { background: #e8f1fb; color: #1d5fa8; }
.teilen-knopf.aktiv { border-color: #1d5fa8; color: #1d5fa8; }
.auto-bereich { padding: 12px 14px; border-top: 1px solid var(--linie); background: #f7f9fb; }
.auto-text { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.auto-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auto-zeile input { width: 110px; font-size: 16px; padding: 7px 9px; }
.auto-eur { font-weight: 600; margin-left: -4px; }
.auto-hinweis { font-size: 12px; color: var(--text-grau); margin-top: 8px; line-height: 1.4; }
.bilanz { padding: 12px 14px; }
.bilanz-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bilanz-kachel { background: #f5f6f6; border-radius: 10px; padding: 10px 12px; min-width: 0; }
.bilanz-kachel .k { font-size: 12px; color: var(--text-grau); font-weight: 600; }
.bilanz-kachel .v { font-size: 20px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bilanz-kachel .u { font-size: 11.5px; color: var(--text-grau); margin-top: 2px; line-height: 1.35; }
.bilanz-titel { font-size: 12px; font-weight: 700; color: var(--text-grau); text-transform: uppercase; letter-spacing: 0.02em; margin: 16px 0 4px; }
.bilanz-liste { margin-top: 8px; }
.bilanz-zeile { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
.bilanz-zeile:last-child { border-bottom: 0; }
.bilanz-zeile > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bilanz-zeile b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bilanz-zeile .klein { color: var(--text-grau); white-space: nowrap; }
@media (max-width: 420px) {
  .bilanz-kacheln { grid-template-columns: 1fr 1fr; }
  .bilanz-kachel:last-child { grid-column: 1 / -1; }
}

/* Folgen, Torjubel, gemerkte Scheine (12.10.2026) */
.mc-folgen { margin-top: 6px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: inherit;
  border-radius: 9999px; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; cursor: pointer; min-height: 30px; }
.mc-folgen.aktiv { background: #fff; color: var(--rot); border-color: #fff; }
.teams-box { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.teams-box .klein { color: var(--text-grau); line-height: 1.45; }
.teams-zeile { display: flex; align-items: center; gap: 10px; }
.teams-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tor-banner {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px); transform: translateX(-50%);
  width: min(420px, calc(100vw - 24px)); z-index: 400; background: #121414; color: #fff; border-radius: 14px;
  padding: 12px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.35); cursor: pointer; animation: torRein .35s ease-out;
}
.tor-banner.gut { background: #0f7a3d; }
.tor-banner.schlecht { background: #a80016; }
.tor-banner.geht { opacity: 0; transition: opacity .35s ease-in; }
.tor-titel { font-size: 18px; font-weight: 800; }
.tor-stand { font-size: 15px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tor-tipp { font-size: 13px; opacity: .92; margin-top: 4px; line-height: 1.4; }
@keyframes torRein { from { transform: translate(-50%, -30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tor-banner { animation: none; } }
.schein-merken { display: block; width: 100%; margin-top: 8px; border: 0; background: none; color: var(--text-grau);
  font: inherit; font-size: 13px; font-weight: 600; padding: 8px; cursor: pointer; min-height: 40px; }
.schein-merken:hover { color: var(--rot); }
.vorlagen { padding: 4px 14px 14px; }
.vorlagen-titel { font-size: 12px; font-weight: 700; color: var(--text-grau); text-transform: uppercase; letter-spacing: .02em; margin: 6px 0; }
.vorlagen-zeile { display: flex; align-items: stretch; gap: 6px; margin-bottom: 6px; }
.vorlagen-laden { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  border: 1px solid var(--linie); background: var(--karte); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14px;
  cursor: pointer; min-height: 44px; text-align: left; color: inherit; }
.vorlagen-laden:hover { border-color: var(--rot); }
.vorlagen-laden b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorlagen-laden span { color: var(--text-grau); font-size: 12.5px; white-space: nowrap; }
.vorlagen-weg { border: 0; background: none; color: var(--text-grau); font-size: 20px; width: 40px; cursor: pointer; }
.vorlagen-name { width: 100%; font-size: 16px; padding: 10px; margin-top: 10px; }

/* Live-Daten des Anbieters im Spiel (14.10.2026) */
.mc-live-kurz .mc-live-werte { font-size: 13px; color: var(--text-grau); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.mc-live-mehr { border: 0; background: none; color: var(--rot); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 0 2px; cursor: pointer; }
.mc-ticker.wechsel .mc-ticker-text, .mc-ticker.abschnitt .mc-ticker-text { color: var(--text-grau); }

/* Live-Block im hellen Reiter "Wetten": eigene, dunkle Schrift */
.mc-live-kurz { background: var(--karte, #fff); box-shadow: var(--schatten); }
.mc-live-kurz .mc-block-titel { color: var(--rot); }
.mc-live-kurz .mc-ticker { border-bottom-color: var(--linie); }
.mc-live-kurz .mc-ticker-text, .mc-live-kurz .mc-ticker.tor .mc-ticker-text { color: var(--text, #121414); }
.mc-live-kurz .mc-ticker-minute { color: var(--text-grau); }

/* Inhalt der Spielansicht ist hell (var(--bg)) - die Schriftfarben stammten
   noch aus der dunklen Gestaltung und waren dort kaum lesbar (14.10.2026). */
.match-center .mc-inhalt .mc-block { background: var(--karte); box-shadow: var(--schatten); }
.match-center .mc-inhalt .mc-block-titel { color: var(--text-grau); }
.match-center .mc-inhalt .mc-wert-kopf { color: var(--text-grau); }
.match-center .mc-inhalt .mc-wert-kopf b { color: var(--text-grau); }
.match-center .mc-inhalt .mc-wert-kopf b.fuehrt { color: var(--text); }
.match-center .mc-inhalt .mc-chancen-kopf,
.match-center .mc-inhalt .mc-chancen-legende,
.match-center .mc-inhalt .mc-form-name { color: var(--text); }
.match-center .mc-inhalt .mc-ticker { border-bottom-color: var(--linie); }
.match-center .mc-inhalt .mc-ticker-text { color: var(--text); }
.match-center .mc-inhalt .mc-ticker.tor .mc-ticker-text { color: var(--text); font-weight: 700; }
.match-center .mc-inhalt .mc-ticker.wechsel .mc-ticker-text,
.match-center .mc-inhalt .mc-ticker.abschnitt .mc-ticker-text { color: var(--text-grau); }
.match-center .mc-inhalt .mc-ticker-minute,
.match-center .mc-inhalt .mc-leer { color: var(--text-grau); }
.match-center .mc-inhalt .mc-live-kurz .mc-block-titel { color: var(--rot); }

/* ---------------------------------------------- Druckleiste (20.10.2026) */
.mc-druck-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mc-druck-kopf .mc-block-titel { margin-bottom: 8px; }
.mc-druck-jetzt { font-size: 12.5px; font-weight: 700; color: var(--text-grau); }
.mc-druck-jetzt.heim { color: #2f7ed8; }
.mc-druck-jetzt.gast { color: #c8102e; }
.mc-druck-bild { display: block; width: 100%; height: 72px; background: var(--linie-zart); border-radius: 6px; }
.mc-druck.kompakt .mc-druck-bild { height: 44px; }
.mc-druck.kompakt { padding: 10px 0 0; margin: 8px 0 0; background: none; box-shadow: none; }
.mc-druck-bild rect.heim { fill: #2f7ed8; }
.mc-druck-bild rect.gast { fill: #c8102e; }
.mc-druck-bild .mittellinie { stroke: var(--text-hell); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.mc-druck-bild .halbzeit { stroke: var(--text-hell); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.mc-druck-bild circle.tor { stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mc-druck-bild circle.tor.heim { fill: #2f7ed8; }
.mc-druck-bild circle.tor.gast { fill: #c8102e; }
.mc-druck-fuss { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; font-weight: 600; }
.mc-druck-fuss .heim { color: #2f7ed8; }
.mc-druck-fuss .gast { color: #c8102e; text-align: right; }
.mc-druck-fuss span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-druck-hinweis { margin-top: 4px; font-size: 11.5px; color: var(--text-hell); }

/* ------------------------------------------- Wett-Kalender (20.10.2026) */
.kalender { padding: 14px; }
.kalender-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.kalender-titel { font-size: 17px; font-weight: 700; color: var(--text-liga); }
.kalender-umschalter { display: flex; background: var(--quote-bg); border-radius: 9999px; padding: 3px; }
.kalender-umschalter button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-grau); padding: 6px 12px; border-radius: 9999px; cursor: pointer; }
.kalender-umschalter button.aktiv { background: var(--karte); color: var(--text); box-shadow: var(--schatten); }
.kalender-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kalender-tag { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid var(--linie); background: var(--karte); border-radius: var(--radius-klein); padding: 8px 2px; font: inherit; cursor: pointer; color: var(--text); min-width: 0; }
.kalender-tag.aktiv { border-color: var(--rot); background: var(--rot-hell); }
.kalender-tag.leer { color: var(--text-hell); }
.kalender-tag-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kalender-tag-datum { font-size: 11px; color: var(--text-grau); }
.kalender-tag-zahl { font-size: 12px; font-weight: 700; color: var(--rot); font-variant-numeric: tabular-nums; }
.kalender-tag.leer .kalender-tag-zahl { color: var(--text-hell); }
.kalender-liga { gap: 8px; }
.kalender-stern { border: 0; background: none; font-size: 18px; line-height: 1; color: var(--text-hell); cursor: pointer; padding: 0 2px; }
.kalender-stern.aktiv { color: var(--gelb); }
.kalender-liga-zahl { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text-grau); white-space: nowrap; }
@media (max-width: 480px) {
  .kalender-tage { gap: 4px; }
  .kalender-tag { padding: 6px 0; }
  .kalender-tag-name { font-size: 11.5px; }
  .kalender-tag-datum { font-size: 10px; }
}

/* -------------------------------- Wettscheine in der Verwaltung (20.10.2026) */
.wett-werkzeuge { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.wett-werkzeuge input { flex: 1 1 260px; min-width: 0; }
.wett-werkzeuge select { flex: 0 1 240px; }
.kachel.rot .v { color: var(--rot); }
.kachel.gruen .v { color: var(--gruen); }
.wettschein-karte.wk-open { border-left: 4px solid #2f7ed8; }
.wettschein-karte.wk-won, .wettschein-karte.wk-cashed_out { border-left: 4px solid var(--gruen); }
.wettschein-karte.wk-lost { border-left: 4px solid var(--rot); }
.wettschein-karte.wk-void, .wettschein-karte.wk-wartet { border-left: 4px solid var(--text-hell); }
.wk-kopf { flex-wrap: wrap; row-gap: 4px; }
.wk-spieler { font-size: 15px; }
.wk-art { font-size: 12.5px; color: var(--text-grau); font-weight: 600; }
.wk-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 10px 0 8px; }
.wk-zahl { background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.wk-zahl .k { font-size: 11px; font-weight: 700; color: var(--text-grau); text-transform: uppercase; letter-spacing: .3px; }
.wk-zahl .v { font-size: 17px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.wk-zahl.rot .v { color: var(--rot); }
.wk-zahl.gruen .v { color: var(--gruen); }
.wk-zahl.blau .v { color: #2f7ed8; }
.wk-zahl.grau .v { color: var(--text-hell); font-size: 14px; }
.wk-zahl.fest { outline: 2px dashed #2f7ed8; outline-offset: -2px; }
.wk-trifft { font-size: 12px; font-weight: 700; margin-top: 2px; }
.wk-trifft.ja { color: var(--gruen); }
.wk-trifft.nein { color: var(--rot); }
.wk-jetzt { font-size: 11px; font-weight: 600; color: var(--text-grau); }
/* Verwaltung am Handy (Gesamttest 20.10.2026): Seit die Notbremse in der
   Kopfleiste steht, sind es drei Knoepfe - auf 375px ragte "Abmelden" 42px
   ueber den Rand und die ganze Seite liess sich seitlich verschieben. */
@media (max-width: 480px) {
  body.verwaltung .topbar { gap: 4px; padding-left: 8px; padding-right: 8px; }
  body.verwaltung .topbar .btn-rand { padding: 5px 7px; font-size: 11.5px; }
  body.verwaltung .marke-bild { height: 20px; }
  body.verwaltung .topbar .logo { min-width: 0; flex-shrink: 1; overflow: hidden; }
  /* Support: die Knoepfe unter dem Gespraech umbrechen statt herauszuragen */
  body.verwaltung #supportForm, body.verwaltung #supportForm + *,
  body.verwaltung #tab-support .knopfreihe { flex-wrap: wrap; }
}
/* Support am Handy: Liste und Gespraech untereinander statt nebeneinander -
   nebeneinander blieben fuer das Gespraech nur 47px. */
@media (max-width: 700px) {
  body.verwaltung .support-raster { grid-template-columns: 1fr !important; }
}

/* Schnelles Spiel (21.10.2026): ein Bildschirm nur zum Livewetten */
.schnell { padding: 14px; }
.schnell-kopf { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.schnell-kopf .klein { color: var(--text-grau); }
.schnell-spiel { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.schnell-oben { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-grau); cursor: pointer; }
.schnell-minute { color: var(--rot); font-weight: 700; }
.schnell-tafel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 6px 0 8px; cursor: pointer; }
.schnell-team { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.schnell-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schnell-team.gast { justify-content: flex-end; text-align: right; }
.schnell-stand { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.schnell-markt { margin-top: 8px; }
.schnell-markt-name { font-size: 12px; color: var(--text-grau); margin-bottom: 4px; }
.schnell-knoepfe { display: flex; gap: 6px; }
.schnell-knoepfe .quote { flex: 1 1 0; width: auto; min-width: 0; height: 46px; }
.schnell-zu { color: var(--text-grau); margin-top: 4px; }

/* ------------------------------------------------ Dunkles Design (21.10.2026)
   Umschalter im Konto (app.js designAnwenden), Kopf-Skript in index.html und
   admin.html setzt data-design schon vor dem ersten Zeichnen. Fast alles laeuft
   ueber die Farbvariablen; hier werden nur sie umgestellt und die wenigen
   festen Farben nachgezogen. */
/* ---------------------------------------------- Langzeitwetten (21.10.2026) */
.langzeit-frage { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.langzeit-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.langzeit-titel { font-weight: 700; }
.langzeit-kopf .klein, .langzeit-hinweis { color: var(--text-grau); }
.langzeit-hinweis { margin: -4px 0 8px; }
.langzeit-raster { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 600px) {
  .langzeit-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* lange Vereinsnamen umbrechen statt abschneiden */
  .langzeit-raster .quote-breit { padding: 9px 10px; }
  .langzeit-raster .quote-breit .name { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; text-align: left; }
}
.langzeit-raus { opacity: .55; cursor: default; }
.langzeit-raus .name { text-decoration: line-through; }
.langzeit-mehr { margin-top: 8px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--rot); cursor: pointer; padding: 4px 0; }

:root[data-design="dunkel"] {
  color-scheme: dark;
  --bg: #0e1113;
  --karte: #181c20;
  --linie: #2b3137;
  --linie-zart: #22272c;
  --text: #e5e8eb;
  --text-grau: #a3abb3;
  --text-hell: #7a838c;
  --quote-bg: #252b31;
  --quote-hover: #303840;
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.5);
  --text-liga: #f2f4f6;
  --text-land: #98a2ab;
  --rot-hell: #3d171c;
  --gruen: #2fbf7f;
  --gruen-hell: #11301f;
  --grau-hell: #252b31;
}
:root[data-design="dunkel"] body { background: var(--bg); color: var(--text); }

/* Jetzt live (21.10.2026): waagerechte Leiste ganz oben auf der Startseite */
.live-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rot); margin-right: 7px; vertical-align: 1px; animation: live-puls 1.6s ease-in-out infinite; }
@keyframes live-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.live-zahl { font-size: 12px; font-weight: 700; color: var(--rot); margin-left: 4px; }
.live-leiste { display: flex; gap: 10px; overflow-x: auto; padding: 4px 14px 14px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.live-kachel { flex: 0 0 236px; scroll-snap-align: start; border: 1px solid var(--linie); border-radius: 10px; padding: 9px 10px; background: var(--karte); cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.live-kachel:hover { border-color: var(--text-hell); }
.lk-oben { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-grau); }
.lk-liga { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-minute { color: var(--rot); font-weight: 700; flex-shrink: 0; margin-left: 6px; }
.lk-team { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.lk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-tore { font-variant-numeric: tabular-nums; font-size: 15px; }
.lk-quoten { display: flex; gap: 5px; margin-top: 3px; }
.lk-quoten .quote { flex: 1 1 0; width: auto; min-width: 0; height: 40px; }
@media (max-width: 980px) { .live-kachel { flex-basis: 212px; } }

/* Meine Wetten live verfolgen (21.10.2026) */
.wk-stand-jetzt { margin: 0 14px 6px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; }
.wk-stand-jetzt.ja { background: var(--gruen-hell); color: var(--gruen); }
.wk-stand-jetzt.nein { background: var(--rot-hell); color: var(--rot); }
.wk-pos.trifft-ja { box-shadow: inset 3px 0 0 var(--gruen); }
.wk-pos.trifft-nein { box-shadow: inset 3px 0 0 var(--rot); }
.wk-live { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.wk-live.ja { color: var(--gruen); }
.wk-live.nein { color: var(--rot); }

/* Ergebnisse nach Tag und Liga (21.10.2026) */
.ergebnis-tag { font-size: 13px; font-weight: 800; color: var(--text-liga); margin: 16px 0 6px; text-transform: none; }
.ergebnisse .ergebnis-tag:first-of-type { margin-top: 4px; }
.ergebnis-zeile { display: flex; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--linie-zart); cursor: pointer; }
.ergebnis-zeile:hover { background: var(--linie-zart); }
.ergebnis-zeit { flex: 0 0 42px; font-size: 12px; color: var(--text-grau); padding-top: 2px; }
.ergebnis-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ergebnis-team { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-grau); }
.ergebnis-team.sieger { color: var(--text); font-weight: 700; }
.ergebnis-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ergebnis-stand { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--text); }
.ergebnis-tore { font-size: 11.5px; color: var(--text-hell); }
.ergebnis-tipp { align-self: flex-start; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; margin-top: 2px; }
.ergebnis-tipp.won { background: var(--gruen-hell); color: var(--gruen); }
.ergebnis-tipp.lost { background: var(--rot-hell); color: var(--rot); }
.ergebnis-tipp.void, .ergebnis-tipp.open { background: var(--quote-bg); color: var(--text-grau); }

/* Konto-Unterreiter (21.10.2026) */
.konto-reiter { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
.konto-reiter button { flex: 0 0 auto; border: 1px solid var(--linie); background: var(--karte); color: var(--text-grau); font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 9999px; cursor: pointer; }
.konto-reiter button.aktiv { background: var(--text-liga); border-color: var(--text-liga); color: var(--karte); }
.design-wahl { align-self: flex-start; }
:root[data-design="dunkel"] .match-center .mc-reiter button.aktiv { color: #10141c; }
.lk-zu { font-size: 11.5px; color: var(--text-grau); margin-top: 3px; padding: 8px 0 2px; }
.live-leiste { scrollbar-width: thin; scrollbar-color: var(--linie) transparent; }
.live-leiste::-webkit-scrollbar { height: 6px; }
.live-leiste::-webkit-scrollbar-thumb { background: var(--linie); border-radius: 3px; }

/* Dunkles Design: feste helle Flaechen nachziehen (21.10.2026) */
:root[data-design="dunkel"] .filterzeile button.aktiv { color: var(--bg); }
/* neutrale Flaechen */
:root[data-design="dunkel"] .spiel:hover, :root[data-design="dunkel"] .markt-kopf:hover,
:root[data-design="dunkel"] .wk-fuss, :root[data-design="dunkel"] th,
:root[data-design="dunkel"] .ticker-zeile:hover, :root[data-design="dunkel"] .risiko-zeile:hover,
:root[data-design="dunkel"] .risiko-ausgang, :root[data-design="dunkel"] .spieler-zeile:hover,
:root[data-design="dunkel"] .werbung-summe, :root[data-design="dunkel"] .auto-bereich,
:root[data-design="dunkel"] .bilanz-kachel, :root[data-design="dunkel"] .match-center .bk-knopf:hover,
:root[data-design="dunkel"] .mc-markt-inhalt .quote-breit:hover { background: #1f2428; }
/* gelbliche Hinweise */
:root[data-design="dunkel"] .schein-pos.geaendert, :root[data-design="dunkel"] .gast-marke,
:root[data-design="dunkel"] .hinweis.warn, :root[data-design="dunkel"] .zustand.open,
:root[data-design="dunkel"] .teil-bereich, :root[data-design="dunkel"] .risiko-stufe.mittel,
:root[data-design="dunkel"] .quote.geboostet, :root[data-design="dunkel"] .quote-breit.geboostet,
:root[data-design="dunkel"] .boost-quote, :root[data-design="dunkel"] .ta-warnung,
:root[data-design="dunkel"] .cockpit-warnung.gelb, :root[data-design="dunkel"] .ticker-zeile.gross,
:root[data-design="dunkel"] .mark-vip { background: #33290f; color: #f0cf6a; }
:root[data-design="dunkel"] .boost-quote:hover { background: #40331a; }
/* roetliche und blaeuliche Markierungen */
:root[data-design="dunkel"] .meldung.neu, :root[data-design="dunkel"] .matrix-schlimm td,
:root[data-design="dunkel"] .suche-marke.rot, :root[data-design="dunkel"] .match-center .bk-marke { background: #3a1a1e; color: #ff8a95; }
:root[data-design="dunkel"] .mark-beobachten, :root[data-design="dunkel"] .auto-marke { background: #172a42; color: #8ec2ff; }
@media (max-width: 480px) {
  .konto-reiter { gap: 4px; }
  .konto-reiter button { padding: 7px 10px; font-size: 12.5px; }
}
:root[data-design="dunkel"] .einklick-schalter input:not(:checked) ~ .einklick-regler { background: #3a424a; }

/* ------------------------------------- Nachricht der Verwaltung (02.11.2026) */
/* Rot ganz oben auf der Startseite. Steht bewusst am Ende der Datei, damit
   das dunkle Design sie nicht umfaerbt - rot bleibt rot. */
.spieler-hinweis {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 14px; padding: 12px 12px 12px 16px;
  background: #c8102e; color: #fff; border-radius: var(--radius-karte);
  font-size: 15px; font-weight: 700; line-height: 1.4;
  box-shadow: 0 2px 10px rgba(200, 16, 46, 0.25);
}
.spieler-hinweis.hidden { display: none; }
.spieler-hinweis-text { flex: 1; white-space: pre-line; overflow-wrap: anywhere; }
.spieler-hinweis-zu {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: -3px -2px 0 0; padding: 0 0 2px;
  background: rgba(255, 255, 255, 0.16); border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 9999px; color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.spieler-hinweis-zu:hover { background: rgba(255, 255, 255, 0.28); }

/* Verwaltung, Mitteilungen: zwei Spalten fuer die rote Startseiten-Nachricht */
.hinweis-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hinweis-spalte-titel { font-weight: 700; margin-bottom: 6px; }
@media (max-width: 760px) { .hinweis-spalten { grid-template-columns: 1fr; } }

/* Statuszeilen unter den Knoepfen (Mitteilungen, Steuerung): als Block mit
   eigenem Abstand. Inline sass die Hinweisflaeche sonst halb unter den Knoepfen. */
#mhAlleStand, #mhSpielerStand, #stHinweisStand, #stAbschlagStand { margin-top: 14px !important; }
#mhAlleStand .hinweis, #mhSpielerStand .hinweis, #stHinweisStand .hinweis, #stAbschlagStand .hinweis {
  display: inline-block; margin: 0;
}

/* Spiel von der Verwaltung aus dem Schein genommen */
.wk-pos.wk-entfernt .wk-auswahl { text-decoration: line-through; opacity: .6; }
.wk-pos.wk-entfernt .wk-quote { opacity: .6; }
.wk-entfernt-text { margin-top: 4px; font-size: 12px; font-weight: 700; color: #c8102e; }
.wk-pos .wk-entfernen { align-self: center; white-space: nowrap; }