/* OrcaBet — abgenommene Designbasis V3.
   Wiederverwendbare Tokens und Komponenten. Keine Dummy-Routen oder Fachlogik. */
:root {
  --canvas: #eff0ed;
  --surface: #ffffff;
  --soft: #f7f8f5;
  --ink: #252927;
  --muted: #7b817c;
  --faint: #b3b9b4;
  --line: #e9ece6;
  --dark: #272e2b;
  --dark-hover: #37403b;
  --on-dark: #c2c9c3;
  --dark-line: #465047;
  --veil: #151c174d;
  --shadow: 0 6px 12px #27312703, 0 24px 80px #27312706;
  --modal-shadow: 0 32px 100px #151c1730;
  --font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --display: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --xs: 11px;
  --sm: 12px;
  --text: 14px;
  --data: 15px;
  --lg: 17px;
  --xl: 22px;
  --title: 34px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;
  --page: 1400px;
  --gutter: clamp(20px, 4.5vw, 72px);
  --rail: 180px;
  --table-min: 800px;
  --book-col: 168px;
  --match-col: 260px;
  --finder-min: 664px;
  --bet-list: 300px;
  --bookie-icon: 22px;
  --touch: 40px;
  --radius: 8px;
  --radius-sm: 5px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --hairline: 1px;
  --focus: 2px;
  --dialog: 380px;
  --topbar-height: 112px;
  --workspace-height: 580px;
  --tracking-title: -.06em;
  --tracking-heading: -.04em;
  --disabled-opacity: .45;
  /* Guthabenarten: je Art eine Farbe für das Kürzel. */
  --art-eg: #3d4541;
  --art-bg: #6d5bd0;
  --art-fw: #2f8a57;
  --art-wc: #1f8a8a;
  --soon: #b45309;
  --soon-soft: #fdf6ee;
  --soon-line: #f3d6b6;
  --alert: #b42318;
  --alert-soft: #fdf1f0;
  --alert-line: #f4c7c3;
  --done: #2f8a57;
  --done-soft: #eef7f1;
  --done-line: #c4e3cf;
  --hero: 56px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--text)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button { border: 0; background: transparent; }
button, select, summary, label[for] { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: var(--focus) solid var(--ink); outline-offset: var(--s1); }
.visually-hidden { position: absolute; width: var(--hairline); height: var(--hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app { max-width: var(--page); padding: 0 var(--gutter) var(--s16); margin: auto; }
.topbar { display: flex; align-items: center; gap: var(--s16); min-height: var(--topbar-height); }
.brand { display: flex; align-items: center; gap: var(--s3); font: 800 var(--xl)/1 var(--display); letter-spacing: var(--tracking-title); }
.brand svg { width: var(--s10); height: var(--s8); }
.brand .brand-light { font-weight: 400; }
.brand-cutout { fill: var(--canvas); }
.navigation { display: flex; align-items: center; gap: var(--s8); }
.navigation a { color: var(--muted); padding: var(--s2) 0; font-size: var(--sm); }
.navigation a:hover { color: var(--ink); }
.navigation a[aria-current] { color: var(--ink); font-weight: 600; }
/* 69: Hamburger nur mobil, im Kontobereich rechts; öffnet die Menüpunkte als Popover oben rechts. */
.menu-button { display: none; place-items: center; width: var(--touch); height: var(--touch); border-radius: var(--radius); color: var(--ink); }
.menu-button:hover { background: var(--soft); }
.menu-button svg { width: var(--s5); height: var(--s5); }
.menu-panel[popover] { inset: var(--s20) var(--gutter) auto auto; width: max-content; margin: 0; padding: var(--s2); }
.menu-panel a { display: block; padding: var(--s3) var(--s4); border-radius: var(--radius); color: var(--muted); }
.menu-panel a:hover { background: var(--soft); color: var(--ink); }
.menu-panel a[aria-current] { color: var(--ink); font-weight: 600; }
.prototype { margin-left: auto; color: var(--muted); font-size: var(--xs); white-space: nowrap; }
.title { font: 600 var(--title)/1.15 var(--display); letter-spacing: var(--tracking-title); }
.heading { font: 600 var(--xl)/1.3 var(--display); letter-spacing: var(--tracking-heading); }
.muted { color: var(--muted); }
.small { font-size: var(--sm); }
.data { font-size: var(--data); font-weight: 500; font-variant-numeric: tabular-nums; }
.amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.workspace { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden; min-height: var(--workspace-height); }
.player-rail { background: var(--dark); color: var(--on-dark); padding: var(--s8) var(--s4); display: flex; flex-direction: column; }
.rail-title { margin: var(--s1) var(--s4) var(--s6); font-size: var(--xs); font-weight: 400; color: var(--on-dark); }
.player-options { display: flex; flex-direction: column; gap: var(--s2); }
.player-option { display: block; width: 100%; min-width: 0; overflow-wrap: anywhere; text-align: left; padding: var(--s3) var(--s4); border-radius: var(--radius); color: var(--on-dark); font-size: var(--text); }
.player-option:hover { background: var(--dark-hover); color: var(--surface); }
.player-option[aria-pressed="true"] { color: var(--ink); background: var(--surface); font-weight: 600; }
.player-option:focus-visible, .add-player:focus-visible { outline-color: var(--on-dark); }
.add-player { margin: var(--s5) var(--s4) 0; border-top: var(--hairline) solid var(--dark-line); padding: var(--s5) 0 0; color: var(--on-dark); text-align: left; font-size: var(--sm); }
.add-player:hover { color: var(--surface); }
.player-sheet { min-width: 0; }
.sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding: var(--s8) var(--s8) var(--s6); }
.button { min-height: var(--touch); display: inline-flex; align-items: center; justify-content: center; padding: var(--s2) var(--s4); border-radius: var(--radius); background: var(--ink); color: var(--surface); font-size: var(--sm); font-weight: 500; white-space: nowrap; }
.button:hover { background: var(--dark-hover); }
.button.light { background: var(--soft); color: var(--ink); border: var(--hairline) solid var(--line); }
.button.light:hover { background: var(--canvas); }
.button:disabled, .button[aria-disabled="true"], .post-add:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
.scroll-area { position: relative; overflow-x: auto; margin: 0 var(--s8); }
.scroll-area .visually-hidden { inset: 0 auto auto 0; }
.book-table { width: 100%; min-width: var(--table-min); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.book-col { width: var(--book-col); }
.action-col { width: var(--s10); }
.book-table th { text-align: right; color: var(--muted); font-size: var(--xs); font-weight: 400; padding: var(--s4) var(--s2); border-bottom: var(--hairline) solid var(--line); white-space: nowrap; }
.book-table th:first-child { text-align: left; padding-left: 0; }
.book-table td { text-align: right; padding: var(--s6) var(--s2); border-bottom: var(--hairline) solid var(--line); font-size: var(--data); font-weight: 500; font-variant-numeric: tabular-nums; }
.book-table td:first-child { text-align: left; padding-left: 0; }
.book-table th:last-child, .book-table td:last-child { padding-right: 0; }
.book-table tbody tr:last-child td { border-bottom: 0; }
.book-table td.book { font-size: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.bookie-logo { display: inline-block; width: var(--bookie-icon); height: var(--bookie-icon); object-fit: contain; vertical-align: middle; margin-right: var(--s2); border-radius: var(--radius-sm); }
.bookie-logo.compact { width: var(--s4); height: var(--s4); margin-right: var(--s1); }
.book-table th:first-child, .book-table td.book { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.book-table td.absent { color: var(--faint); font-weight: 400; }
.multiple { display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: baseline; gap: var(--s1); }
.multiple span { white-space: nowrap; }
.multiple .join { color: var(--faint); font-size: var(--xs); }
.post-add { display: inline-grid; place-items: center; width: var(--s8); height: var(--s8); border-radius: var(--radius); color: var(--muted); font-size: var(--lg); font-weight: 400; }
.post-add:hover { color: var(--ink); background: var(--soft); }
.amount-button { max-width: 100%; overflow-wrap: anywhere; font: inherit; font-variant-numeric: tabular-nums; padding: 0 0 var(--hairline); border-bottom: var(--hairline) dotted var(--faint); }
.amount-button:hover { border-bottom: var(--hairline) solid var(--ink); }
.sheet-tail { height: var(--s10); }
.state { display: inline-flex; padding: var(--s1) var(--s2); color: var(--muted); background: var(--soft); border-radius: var(--radius-sm); font-size: var(--xs); }
[popover] { width: min(var(--dialog), calc(100% - var(--s8))); max-height: calc(100% - var(--s8)); overflow-y: auto; padding: var(--s6); border: 0; border-radius: var(--radius-xl); color: var(--ink); background: var(--surface); box-shadow: var(--modal-shadow); }
[popover]::backdrop { background: var(--veil); }
.popover-heading { margin-bottom: var(--s6); overflow-wrap: anywhere; }
.field { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--sm); }
.field + .field { margin-top: var(--s4); }
.field input, .field select, .field textarea { width: 100%; min-width: 0; padding: var(--s3); background: var(--soft); border: var(--hairline) solid var(--line); border-radius: var(--radius); }
.field textarea { resize: vertical; }
.popover-actions { display: flex; justify-content: flex-end; margin-top: var(--s6); }
/* Mitspielerformulare — visuell abgenommen für Spec 02b. */
.form-stack { display: flex; flex-direction: column; gap: var(--s5); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s3); margin-top: var(--s6); }
.form-actions .button { white-space: normal; text-align: center; }
.form-context { color: var(--muted); font-size: var(--sm); overflow-wrap: anywhere; }
.player-heading { flex-wrap: wrap; }
.player-heading .title { min-width: 0; overflow-wrap: anywhere; }
.details { margin-top: var(--s5); font-size: var(--sm); color: var(--muted); }
.details dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.details dd { margin: var(--s1) 0 0; color: var(--ink); }
/* Buchmacherauswahl — visuell abgenommen für Spec 02c. */
.bookie-picker { display: flex; flex-direction: column; gap: var(--s4); }
.bookie-options { display: flex; flex-direction: column; gap: var(--s1); max-height: min(var(--dialog), 40vh); overflow-y: auto; padding: var(--s1); }
.bookie-option { display: flex; align-items: center; min-height: var(--touch); width: 100%; padding: var(--s2) var(--s3); border-radius: var(--radius); text-align: left; overflow-wrap: anywhere; }
.bookie-option:hover, .bookie-option[aria-pressed="true"] { background: var(--soft); }
.bookie-option[aria-pressed="true"] { font-weight: 600; }
.bookie-option .bookie-logo { flex-shrink: 0; }
.posten-option { gap: var(--s2); }
.posten-option[aria-pressed="true"] { box-shadow: inset 0 0 0 var(--hairline) var(--ink); }
.posten-main, .posten-zahlen { display: flex; flex-direction: column; gap: var(--s1); }
.posten-main { flex: 1; min-width: 0; }
.posten-zahlen { align-items: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.posten-art { color: var(--muted); font-size: var(--xs); font-weight: 400; }
/* Zugang und leerer App-Rahmen — visuell abgenommen für Spec 02a. */
.login-card { width: 100%; max-width: var(--dialog); margin-inline: auto; padding: var(--s8); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); }
.login-card .heading { margin-bottom: var(--s6); }
.login-actions { display: flex; margin-top: var(--s6); }
.login-actions .button { width: 100%; }
.form-message { padding: var(--s3) var(--s4); border: var(--hairline) solid var(--line); border-left: var(--focus) solid var(--ink); border-radius: var(--radius); background: var(--soft); color: var(--ink); font-size: var(--sm); overflow-wrap: anywhere; }
.form-message + .form-message { margin-top: var(--s3); }
.login-card .form-message { margin-bottom: var(--s5); }
.field [aria-invalid="true"] { border-color: var(--ink); }
.account-nav { display: flex; align-items: center; gap: var(--s4); margin-left: auto; min-width: 0; font-size: var(--sm); }
.account-name { overflow-wrap: anywhere; }
.empty-state { display: grid; place-items: center; padding: var(--s12) var(--s6); color: var(--muted); text-align: center; }
.player-sheet.empty-sheet { display: flex; flex-direction: column; }
.empty-sheet .empty-state { flex: 1; }
/* Guthaben-Zusatzzeile und Leseansicht — visuell abgenommen für Spec 02f. */
.posten { display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--s1); max-width: 100%; }
.amount-note { color: var(--muted); font-size: var(--xs); font-weight: 400; white-space: nowrap; }
.fact-list { margin: 0; }
.fact-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: var(--s3) 0; border-bottom: var(--hairline) solid var(--line); }
.fact-list > div:first-child { padding-top: 0; }
.fact-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.fact-list dt { flex-shrink: 0; color: var(--muted); font-size: var(--sm); }
.fact-list dd { margin: 0; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fact-list .fact-text { flex-direction: column; gap: var(--s1); }
.fact-list .fact-text dd { text-align: left; }
/* 14 Wettzettel: geplante Wetten je Mitspieler im Dialog „Wette erstellen“. Zeile 1 Buchmacher und Einsatz, Zeile 2 Tipp, Quote, Art. */
.slip { display: flex; flex-direction: column; gap: var(--s5); }
.slip-name { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s2); font-size: var(--text); font-weight: 600; }
.slip-sum { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.slip-list { margin: 0; padding: 0; list-style: none; }
.slip-list li { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2) 0; border-top: var(--hairline) solid var(--line); }
.slip-line { display: flex; align-items: center; font-size: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.slip-open { color: var(--soon); }
.slip-step { margin-right: var(--s1); color: var(--muted); }
/* Wettzettel schlank: je Wette beim Bookie eine Zeile – Bookie, Tipp, Quote, Betrag, Platziert-Knopf. */
.slip-list li.slip-row { flex-direction: row; align-items: center; gap: var(--s3); }
.slip-row .slip-line { flex: 1; min-width: 0; font-weight: 400; }
.slip-amount { font-size: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Seite „Wetten“: je Mitspieler eine Spalte, Kopf mit Name, Summe und „Kopieren“, je Spiel ein Link zum Wettschein. */
.slip-page { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--dialog), 1fr)); gap: var(--s8); padding: 0 var(--s8) var(--s4); }
.slip-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.slip-head .slip-name { flex: 1; margin: 0; }
.slip-game { display: block; margin: var(--s4) 0 var(--s1); color: var(--muted); font-size: var(--sm); }
.slip-game:hover { color: var(--ink); }
/* Quotenfinder — Spec 04, vereinfacht mit 04b. */
.surface { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden; }
.finder-heading { flex-wrap: wrap; align-items: baseline; }
/* 62 Reloads: Stand, verbundenes Inboxprofi-Konto und „Trennen“ rechts im Kopf. */
.reload-zugang { align-items: center; gap: var(--s3); }
.match-col { width: var(--match-col); }
.book-table.finder-table { min-width: var(--finder-min); }
.finder-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: 0 var(--s8) var(--s4); }
.filter-select { min-height: var(--touch); padding: var(--s2) var(--s3); background: var(--soft); border: var(--hairline) solid var(--line); border-radius: var(--radius); font-size: var(--sm); }
/* 13 Filterknopf: gezeigtes Turnier, Klick nimmt es aus der Tabelle. Eigene Zeile unter den Auswahlfeldern. */
.filter-chips { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: var(--s2); }
.filter-chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--s8); max-width: 100%; padding: 0 var(--s3); border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: var(--sm); text-align: left; }
.filter-chip:hover, .filter-chip:focus-visible { background: var(--soft); border-color: var(--faint); }
.filter-chip-x { color: var(--muted); font-size: var(--text); line-height: 1; }
.filter-chip:hover .filter-chip-x { color: var(--ink); }
.match-meta { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--xs); font-weight: 400; }
/* Fehler eines Einzelabrufs steht in seiner Zeile unter Liga und Anstoß. */
.book-table td.book .form-message { margin-top: var(--s2); font-weight: 400; }
.odds-note { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* Wetttabelle — visuell abgenommen für Spec 06. */
.match-link:hover { text-decoration: underline; text-underline-offset: var(--s1); }
.odds-strip { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); padding: 0 var(--s8) var(--s4); color: var(--muted); font-size: var(--sm); }
.odds-chip { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.odds-chip .odds-values { color: var(--ink); }
.outcome-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin: 0 var(--s8); padding: var(--s6) 0 0; border-top: var(--hairline) solid var(--line); }
.outcome { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; text-align: right; }
.outcome:first-child { text-align: left; }
.outcome-label { color: var(--muted); font-size: var(--xs); }
.outcome-value { font-size: var(--data); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.outcome-note { color: var(--muted); font-size: var(--xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.book-table .text { text-align: left; }
.posten-text { align-items: flex-start; }
.quote-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--s1); }
/* Wettschein — visuell abgenommen für Spec 06c (Slider und Blöcke aus 06b). */
/* Platz für „Quoten werden geholt …“ ohne Umbruch, damit die Zeile beim Abruf nicht springt. */
.bet-action-col { width: calc(var(--s16) * 3); }
.outcome-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); padding: 0 var(--s8) var(--s6); }
.outcome-block { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; padding: var(--s4); border: var(--hairline) solid var(--line); border-radius: var(--radius); }
.outcome-block.gewonnen { border-color: var(--ink); }
.outcome-block.verloren { opacity: var(--disabled-opacity); }
.outcome-block-title { margin: 0; font: 600 var(--lg)/1.3 var(--display); letter-spacing: var(--tracking-heading); overflow-wrap: anywhere; }
.odds-picker { display: flex; align-items: stretch; gap: var(--s1); }
.odds-step { display: inline-grid; place-items: center; width: var(--s8); border-radius: var(--radius); color: var(--muted); font-size: var(--lg); }
.odds-step:hover { color: var(--ink); background: var(--soft); }
.odds-choice { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--s1); padding: var(--s2) var(--s3); border: var(--hairline) solid var(--line); border-radius: var(--radius); background: var(--soft); font-size: var(--xs); color: var(--muted); white-space: nowrap; }
.odds-choice .bookie-logo { margin-right: var(--s1); }
.odds-choice-quote { color: var(--ink); font-size: var(--data); font-weight: 500; font-variant-numeric: tabular-nums; }
.odds-choice:hover { background: var(--canvas); }
.odds-choice.best { border-color: var(--ink); }
.odds-choice[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.odds-choice[aria-pressed="true"] .odds-choice-quote { color: var(--surface); }
.odds-choice:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
.bet-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s8) var(--s8) var(--s3); }
.bet-kpis { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); padding: 0 var(--s8) var(--s4); color: var(--muted); font-size: var(--sm); font-variant-numeric: tabular-nums; }
.bet-kpis strong { color: var(--ink); font-weight: 500; }
.bet-tools { display: flex; flex-wrap: wrap; gap: var(--s3); padding: 0 var(--s8) var(--s4); }
.bet-tools .form-message { flex: 1 1 100%; }
.filter-input { min-height: var(--touch); min-width: 0; width: min(100%, calc(var(--dialog) - var(--s10))); padding: var(--s2) var(--s3); background: var(--soft); border: var(--hairline) solid var(--line); border-radius: var(--radius); font-size: var(--sm); }
.outcome-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1) var(--s4); margin: 0; font-size: var(--sm); }
.outcome-stats div { display: flex; justify-content: space-between; gap: var(--s2); min-width: 0; }
.outcome-stats dt { color: var(--muted); }
.outcome-stats dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bet-card { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s3); border-top: var(--hairline) solid var(--line); }
.bet-card-head { display: flex; align-items: center; gap: var(--s2); min-width: 0; font-size: var(--sm); }
.bet-card-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bet-card-head .bookie-logo { margin-right: 0; }
.bet-card-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: var(--s2); align-items: end; }
.inline-field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; color: var(--muted); font-size: var(--xs); }
.inline-field input, .inline-field select { width: 100%; min-width: 0; min-height: var(--touch); padding: var(--s2) var(--s3); background: var(--soft); border: var(--hairline) solid var(--line); border-radius: var(--radius); color: var(--ink); font-size: var(--text); font-variant-numeric: tabular-nums; }
.status-toggle { min-height: var(--touch); padding: var(--s2) var(--s3); border: var(--hairline) solid var(--line); border-radius: var(--radius); background: var(--soft); color: var(--muted); font-size: var(--sm); white-space: nowrap; }
.status-toggle[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.save-note { color: var(--muted); font-size: var(--xs); }
.inline-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1); }
.stake-mode { padding: 0; color: var(--muted); font-size: var(--xs); text-decoration: underline dotted; text-underline-offset: var(--s1); }
.stake-mode:hover { color: var(--ink); }
.inline-field input.fest { border-color: var(--ink); }
.inline-field input.offen { border-style: dashed; color: var(--muted); }
/* „Quoten holen“: eine geänderte Quote leuchtet kurz auf und blendet in den normalen Stand zurück. */
@keyframes quote-neu { from { background: var(--soon-soft); border-color: var(--soon); color: var(--soon); } }
.inline-field input.quote-neu { animation: quote-neu 2.5s ease-out; }
.bet-return { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s1); min-height: var(--touch); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bet-card .status-toggle { padding: var(--s2); }
.bet-card .inline-field input { padding-left: var(--s2); padding-right: var(--s2); }
.bet-card .form-message { margin: 0; }
.bet-card-head select { flex: 1; min-width: 0; min-height: var(--touch); padding: var(--s2); background: var(--soft); border: var(--hairline) solid var(--line); border-radius: var(--radius); font-size: var(--sm); }
.state.alert { color: var(--surface); background: var(--ink); }
.bet-remove { display: inline-grid; place-items: center; width: var(--s8); height: var(--s8); border-radius: var(--radius); color: var(--muted); font-size: var(--lg); flex-shrink: 0; }
.bet-remove:hover { color: var(--ink); background: var(--soft); }
/* 46: Wettschein mit Liste rechts – alles, was gesetzt werden kann, über alle Mitspieler. Karten wie auf der
   Mitspieler-Seite, oben Bookie · Mitspieler. Desktop: Liste bleibt beim Scrollen stehen und scrollt in sich. */
.bet-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--bet-list); gap: var(--s5); align-items: start; }
.bet-list { position: sticky; top: var(--s5); display: flex; flex-direction: column; gap: var(--s6); max-height: calc(100vh - var(--s10)); overflow-y: auto; padding: var(--s6) var(--s5); }
.bet-list .guthaben-karte { cursor: default; }
.bet-list .konto-wert .amount-button { border-bottom: 0; }
/* Schmale Ausgangsspalten neben der Liste: Wettkarte zweizeilig wie mobil, Kennzahlen untereinander. */
.outcome-block { container-type: inline-size; }
@container (max-width: 300px) {
  .bet-card-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bet-card-fields .status-toggle { justify-self: end; }
  /* Kopf zweizeilig: Logo, Bookie · Mitspieler und × oben, Art und Mindestquote darunter. */
  .bet-card-head { flex-wrap: wrap; row-gap: var(--s1); }
  .bet-card-head .bet-card-name { flex: 1 1 auto; }
  .bet-card-head::after { content: ""; order: 1; flex-basis: 100%; }
  .bet-card-head .state { order: 2; }
}
@container (max-width: 260px) { .outcome-stats { grid-template-columns: minmax(0, 1fr); } }
@media (width > 760px) { .bet-list .guthaben-karte { flex-basis: 100%; max-width: none; } }
@media (max-width: 760px) {
  .bet-layout { grid-template-columns: minmax(0, 1fr); }
  .bet-list { position: static; max-height: none; overflow: visible; padding: var(--s5) var(--s4); }
}
@media(min-width:1500px) { :root { --rail: 196px; --book-col: 190px; } }
@media(max-width:1100px) {
  :root { --rail: 160px; --gutter: 28px; }
  .topbar { gap: var(--s10); }
  .navigation { gap: var(--s6); }
  .sheet-heading { padding-left: var(--s6); padding-right: var(--s6); }
  .scroll-area { margin-left: var(--s6); margin-right: var(--s6); }
  .finder-filters, .odds-strip, .slip-page { padding-left: var(--s6); padding-right: var(--s6); }
  .outcome-summary { margin-left: var(--s6); margin-right: var(--s6); }
  .outcome-blocks { grid-template-columns: 1fr; padding-left: var(--s6); padding-right: var(--s6); }
  .bet-head, .bet-kpis, .bet-tools { padding-left: var(--s6); padding-right: var(--s6); }
  .player-rail { padding-left: var(--s3); padding-right: var(--s3); }
}
/* Über Mobil: Passen die Menüpunkte nicht neben Marke und Konto, brechen sie in ihrem Bereich um, statt die Seite
   zu verbreitern oder den Kontonamen zu quetschen. Wo alles in eine Zeile passt, bleibt die Kopfzeile unverändert. */
@media(width > 760px) {
  .topbar > .brand, .topbar > .account-nav { flex-shrink: 0; }
  .topbar > .navigation { flex: 1 1 0; min-width: 0; flex-wrap: wrap; row-gap: var(--s1); }
}
@media(max-width:760px) {
  :root { --gutter: 20px; --title: 28px; --book-col: 135px; --match-col: 150px; --radius-xl: 16px; }
  .topbar { padding: var(--s6) 0; gap: var(--s6); flex-wrap: wrap; }
  .login-card { padding: var(--s6); }
  .account-nav { gap: var(--s2); }
  .navigation { order: 3; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--s1) var(--s3); }
  .topbar:has(.menu-button) { flex-wrap: nowrap; gap: var(--s4); }
  .topbar:has(.menu-button) > .navigation, .topbar:has(.menu-button) .account-name { display: none; }
  .menu-button { display: inline-grid; }
  .workspace { grid-template-columns: 1fr; min-height: 0; }
  .player-rail { padding: var(--s3); }
  .rail-title { display: none; }
  .player-options { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--s1); }
  .player-option { padding: var(--s2) var(--s3); font-size: var(--sm); width: auto; max-width: 100%; }
  .add-player { margin: var(--s3) var(--s3) 0; padding-top: var(--s3); padding-bottom: var(--s1); }
  .sheet-heading { padding: var(--s6) var(--s4); gap: var(--s3); }
  .sheet-heading .button { padding: var(--s2) var(--s3); }
  .scroll-area { margin-left: var(--s4); margin-right: var(--s4); }
  .finder-filters, .odds-strip, .slip-page { padding-left: var(--s4); padding-right: var(--s4); }
  .slip-page { grid-template-columns: 1fr; }
  .outcome-summary { margin-left: var(--s4); margin-right: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outcome:nth-child(odd) { text-align: left; }
  .outcome-blocks { padding-left: var(--s4); padding-right: var(--s4); }
  .bet-head, .bet-kpis, .bet-tools { padding-left: var(--s4); padding-right: var(--s4); }
  .bet-card-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bet-card-fields .status-toggle { justify-self: end; }
  .book-table th:first-child, .book-table td.book { border-right: var(--hairline) solid var(--line); }
  .book-table td { padding-top: var(--s5); padding-bottom: var(--s5); }
}

/* Mitspieler: Guthaben je Buchmacher als Kärtchen mit Badges (Dummy abgenommen 30.09.2026). */
.heading-block { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.player-heading { align-items: flex-start; }
.kpi-row { display: flex; flex-wrap: wrap; gap: var(--s8); }
.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi span { color: var(--muted); font-size: var(--xs); }
.kpi strong { font-size: var(--lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi.muted strong { color: var(--muted); font-weight: 500; }
.player-option { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.player-sum { font-size: var(--xs); font-variant-numeric: tabular-nums; opacity: .8; white-space: nowrap; }
.sheet-body { margin: 0 var(--s8); }
.book-rows { display: flex; flex-direction: column; }
.book-row { display: grid; grid-template-columns: var(--book-col) minmax(0, 1fr) auto; gap: var(--s4); align-items: start; padding: var(--s5) 0; border-top: var(--hairline) solid var(--line); }
.book-name { display: flex; align-items: center; gap: var(--s2); min-width: 0; padding-top: var(--s2); font-weight: 600; overflow-wrap: anywhere; }
.book-name .bookie-logo { margin-right: 0; flex: none; }
.guthaben-karten { display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; }
.guthaben-karte { display: flex; flex-direction: column; gap: 6px; min-width: 170px; max-width: 300px; padding: var(--s2) var(--s3); border: var(--hairline) solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color .15s; }
.guthaben-karte:hover { border-color: var(--faint); }
.guthaben-karte.leer .amount-button { color: var(--muted); font-weight: 500; }
.guthaben-karte.leer { opacity: .7; }
.karte-kopf { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.karte-kopf .amount-button { flex: none; font-size: var(--data); font-weight: 600; }
.karte-name { min-width: 0; color: var(--muted); font-size: var(--xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umsatz-bar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.umsatz-bar i { display: block; height: 100%; background: var(--ink); }
.badges { display: flex; flex-wrap: wrap; gap: var(--s1); }
.badge { cursor: help; padding: 4px 6px; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--soft); color: var(--muted); font-size: var(--xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.badge:hover, .badge:focus-visible { color: var(--ink); border-color: var(--faint); }
.badge.soon { color: var(--soon); border-color: var(--soon-line); background: var(--soon-soft); font-weight: 600; }
.badge.alert { color: var(--alert); border-color: var(--alert-line); background: var(--alert-soft); font-weight: 600; }
.badge.done { color: var(--done); }
.badge.art-tag { padding: 4px 5px; border: 0; color: var(--surface); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.badge.art-tag:hover, .badge.art-tag:focus-visible { color: var(--surface); }
.art-EG { background: var(--art-eg); } .art-BG { background: var(--art-bg); } .art-FW { background: var(--art-fw); }
.art-WC { background: var(--art-wc); }
.badge-tip { position: fixed; z-index: 30; display: flex; flex-direction: column; gap: var(--s1); width: 260px; max-width: calc(100vw - 24px); padding: var(--s3) var(--s4);
  border-radius: var(--radius); background: var(--dark); color: var(--on-dark); box-shadow: var(--modal-shadow); font-size: var(--sm); line-height: 1.5;
  pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.badge-tip.on { opacity: 1; transform: none; }
.badge-tip strong { color: var(--surface); font-size: var(--text); font-weight: 600; }
/* 59: Konto-Karte – je Mitspieler und Bookie Echtgeld und Bonus, darunter jeder Umsatz als Zeile mit Zweck.
   Alles an Ort und Stelle änderbar (Enter speichert, Escape bricht ab). Schmal (Handy, Wettschein-Liste) stapeln sich die Zeilen. */
.konto-karte { container-type: inline-size; display: flex; flex-direction: column; gap: var(--s2); width: 100%; max-width: 760px; padding: var(--s3) var(--s4); border: var(--hairline) solid var(--line); border-radius: var(--radius); background: var(--surface); }
.konto-kopf { display: flex; align-items: flex-end; gap: var(--s5); min-width: 0; }
.konto-wert { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.konto-wert > span:first-child { color: var(--muted); font-size: var(--xs); }
.konto-wert .amount-button { font-size: var(--lg); font-weight: 600; }
.konto-wert.bonus .amount-button { color: var(--art-bg); }
.konto-wert .wert-eingabe { width: 120px; }
.konto-aktionen { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
.konto-aktionen .post-add { width: var(--s6); height: var(--s6); }
.konto-knopf { padding: var(--s1) var(--s2); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--sm); font-weight: 500; }
.konto-knopf:hover, .konto-knopf[aria-expanded="true"] { color: var(--ink); background: var(--soft); }
.wert-eingabe { width: 100%; min-width: 0; padding: var(--s1) var(--s2); border: var(--hairline) solid var(--ink); border-radius: var(--radius-sm); background: var(--soft); color: var(--ink); font: inherit; font-size: var(--sm); font-variant-numeric: tabular-nums; text-align: right; }
.zeilen { display: flex; flex-direction: column; border-top: var(--hairline) solid var(--line); }
.zeile { display: grid; grid-template-columns: minmax(0, 12fr) minmax(0, 11fr) minmax(0, 9fr) minmax(0, 9fr) calc(var(--s6) * 2 + var(--s1)); grid-template-areas: "titel bedingung stand folge knoepfe";
  column-gap: var(--s3); row-gap: var(--s1); align-items: center; padding: var(--s2) 0; border-bottom: var(--hairline) solid var(--line); font-size: var(--sm); }
.zeile-titel { grid-area: titel; min-width: 0; padding: 0; color: var(--ink); font: inherit; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.zeile-titel:hover { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
.zeile-bedingung { grid-area: bedingung; min-width: 0; color: var(--muted); font-size: var(--xs); font-variant-numeric: tabular-nums; }
.zeile-stand { grid-area: stand; display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.zeile-noch { align-self: flex-start; padding: 0; color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; border-bottom: var(--hairline) dotted var(--faint); }
.zeile-noch:hover { border-bottom-style: solid; }
.zeile-status { align-self: flex-start; color: var(--muted); font-size: var(--xs); }
.zeile-status.erfuellt { color: var(--done); }
.zeile-folge { grid-area: folge; min-width: 0; color: var(--muted); font-size: var(--xs); }
.zeile-knoepfe { grid-area: knoepfe; display: flex; justify-content: flex-end; gap: var(--s1); }
.zeile-knopf { display: inline-grid; place-items: center; width: var(--s6); height: var(--s6); border-radius: var(--radius-sm); color: var(--faint); font-size: var(--sm); }
.zeile-knopf:hover { color: var(--ink); background: var(--soft); }
.zeile.fertig .zeile-titel { color: var(--muted); font-weight: 500; }
.zeile-details { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2); padding-top: var(--s1); }
.zeile-details .inline-field, .konto-formular .inline-field { width: 104px; }
.zeile-details .inline-field.breit, .konto-formular .inline-field.breit { width: 236px; }
.zeile-details .inline-field.datum, .konto-formular .inline-field.datum { width: 148px; }
.konto-wert .amount-button.null { color: var(--muted); font-weight: 500; }
.zeilen-fertig { align-self: flex-start; padding: var(--s1) 0; color: var(--muted); font-size: var(--xs); }
.zeilen-fertig:hover { color: var(--ink); }
.konto-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--radius); background: var(--soft); }
.konto-formular .inline-field input, .konto-formular .inline-field select { background: var(--surface); }
.konto-fuss { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); color: var(--muted); font-size: var(--xs); }
.konto-fuss strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.konto-fuss.plus strong { color: var(--done); }
@container (width < 560px) {
  .zeile { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "titel titel knoepfe" "bedingung bedingung bedingung" "stand folge folge"; }
  .zeile-folge { text-align: right; }
  .konto-kopf { flex-wrap: wrap; row-gap: var(--s2); }
}
.text-button { margin: var(--s4) 0 0; color: var(--muted); font-size: var(--sm); }
.text-button:hover { color: var(--ink); }
@media (max-width: 760px) {
  .sheet-body { margin: 0 var(--s4); }
  .book-row { grid-template-columns: minmax(0, 1fr) auto; }
  .guthaben-karten { grid-column: 1 / -1; grid-row: 2; }
  .guthaben-karte { flex: 1 1 150px; max-width: none; }
  .kpi-row { gap: var(--s5); }
  .player-option .player-sum { display: none; }
}

/* 06d: Quotenblock eigener Spiele und Spiel-Dialog */
.head-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.q-block { margin: 0 var(--s8) var(--s5); padding: var(--s4); border: var(--hairline) solid var(--line); border-radius: var(--radius); }
.q-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.q-top h2 { margin: 0; font: 600 var(--lg)/1.3 var(--display); letter-spacing: var(--tracking-heading); }
.q-top select { min-height: var(--touch); padding: var(--s2) var(--s3); background: var(--soft); border: var(--hairline) solid var(--line); border-radius: var(--radius); font-size: var(--sm); }
.q-block > .form-message { margin: 0 0 var(--s3); }
.q-grid { display: grid; grid-template-columns: minmax(150px, 240px) repeat(3, 88px) 32px; justify-content: start; gap: var(--s2); align-items: center; }
.q-head { color: var(--muted); font-size: var(--xs); text-align: center; }
.q-head:first-child { text-align: left; }
.q-book { display: flex; align-items: center; gap: var(--s2); min-width: 0; font-weight: 600; font-size: var(--text); }
.q-book small { display: block; color: var(--muted); font-size: var(--xs); font-weight: 400; font-variant-numeric: tabular-nums; }
.q-input { width: 100%; min-width: 0; min-height: var(--touch); padding: var(--s2); text-align: center; background: var(--soft); border: var(--hairline) solid var(--line);
           border-radius: var(--radius); font-size: var(--data); font-variant-numeric: tabular-nums; }
.q-input:focus { outline: var(--focus) solid var(--ink); outline-offset: 1px; }
.q-input.best { border-color: var(--ink); box-shadow: inset 0 0 0 var(--hairline) var(--ink); font-weight: 600; }
.q-input:disabled { opacity: var(--disabled-opacity); }
.q-del { color: var(--muted); font-size: var(--lg); border-radius: var(--radius); width: 32px; height: 32px; }
.q-del:hover { background: var(--soft); color: var(--ink); }
.spiel-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s2); align-items: end; }
.spiel-row > span { padding-bottom: var(--s3); color: var(--muted); }
@media (max-width: 760px) {
  .q-block { margin: 0 var(--s4) var(--s4); padding: var(--s3); }
  .q-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) 28px; gap: var(--s1) var(--s2); }
  .q-grid .q-head:first-child { display: none; }
  .q-book { grid-column: 1 / -1; margin-top: var(--s2); }
  .q-input { font-size: var(--text); padding: var(--s1); }
  .q-del { width: 28px; }
}
.spiel-zeit { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s2); }
.spiel-zeit .field + .field { margin-top: 0; }
.spiel-zeit input { flex: 1; }

/* 20 GuV: Ergebnis aus Ein- und Auszahlungen, Fortschritt, Meilensteine, Ranglisten, Kassenbuch, Zahlungsdialog. */
.guv-plus { color: var(--done); }
.guv-minus { color: var(--alert); }
.kpi.plus strong { color: var(--done); }
.guv-hero { display: flex; flex-direction: column; gap: var(--s6); padding: 0 var(--s8) var(--s8); }
.guv-result { font: 700 var(--hero)/1 var(--display); letter-spacing: var(--tracking-title); font-variant-numeric: tabular-nums; }
.guv-progress { display: flex; flex-direction: column; gap: var(--s2); max-width: calc(var(--dialog) * 2); }
.guv-bar { height: var(--s2); border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.guv-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.guv-bar.plus i { background: var(--done); }
.guv-progress-labels { display: flex; justify-content: space-between; gap: var(--s3); color: var(--muted); font-size: var(--sm); font-variant-numeric: tabular-nums; }
.guv-progress-labels strong { color: var(--ink); font-weight: 600; }
.milestones { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.milestone { padding: var(--s1) var(--s3); border: var(--hairline) solid var(--line); border-radius: var(--radius-pill); color: var(--faint); font-size: var(--sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.milestone.reached { border-color: var(--done-line); background: var(--done-soft); color: var(--done); font-weight: 600; }
.milestone.next { border-color: var(--ink); color: var(--ink); }
.guv-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); padding: 0 var(--s8) var(--s8); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.section-head h2 { font: 600 var(--lg)/1.3 var(--display); letter-spacing: var(--tracking-heading); }
.section-head span { color: var(--muted); font-size: var(--sm); font-variant-numeric: tabular-nums; }
.guv-ledger { padding: 0 var(--s8); }
.rank-list { margin: 0; padding: 0; list-style: none; }
.rank-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: center; padding: var(--s3) 0; border-top: var(--hairline) solid var(--line); }
.rank-name { display: flex; align-items: center; gap: var(--s2); min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.rank-name .bookie-logo { margin-right: 0; flex: none; }
.rank-value { font-size: var(--data); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.rank-detail { grid-column: 1 / -1; color: var(--muted); font-size: var(--sm); font-variant-numeric: tabular-nums; }
.ledger-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger-table th { padding: var(--s3) var(--s2); border-bottom: var(--hairline) solid var(--line); color: var(--muted); font-size: var(--xs); font-weight: 400; text-align: left; white-space: nowrap; }
.ledger-table td { padding: var(--s3) var(--s2); border-bottom: var(--hairline) solid var(--line); vertical-align: middle; }
.ledger-table th:first-child, .ledger-table td:first-child { padding-left: 0; }
.ledger-table th:last-child, .ledger-table td:last-child { padding-right: 0; text-align: right; }
.ledger-table tbody tr:last-child td { border-bottom: 0; }
.ledger-table .num { text-align: right; white-space: nowrap; }
.ledger-table td.num { font-weight: 600; }
.ledger-table .note { color: var(--muted); font-size: var(--sm); overflow-wrap: anywhere; }
.ledger-table .note .state { margin-right: var(--s2); }
.ledger-book { display: flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.ledger-book .bookie-logo { margin-right: 0; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s1); padding: var(--s1); background: var(--soft); border: var(--hairline) solid var(--line); border-radius: var(--radius); }
.segmented button { min-height: calc(var(--touch) - var(--s2)); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--sm); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 var(--hairline) var(--line); }
.amount-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
.check-field { display: flex; align-items: center; gap: var(--s2); font-size: var(--sm); cursor: pointer; }
.check-field input { width: var(--s4); height: var(--s4); margin: 0; accent-color: var(--ink); }
/* 23 Einzahlung: Konto- und Einzahlungsstand je Mitspieler und Buchmacher, Zeile öffnet den Dialog. */
.zustand { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s2); border-radius: var(--radius-pill); font-size: var(--xs); font-weight: 600; line-height: 1; white-space: nowrap; }
/* 24: Dropdown-Werte ok / pending / nein für Registrierung und Einzahlung. */
.zustand.ok { color: var(--done); background: var(--done-soft); }
.zustand.pending { color: var(--soon); background: var(--soon-soft); }
.zustand.nein { color: var(--alert); background: var(--alert-soft); }
.konto-wrap { padding: 0 var(--s8); }
.konto-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.konto-table th { padding: var(--s3) var(--s3); border-bottom: var(--hairline) solid var(--line); color: var(--muted); font-size: var(--xs); font-weight: 400; text-align: left; }
.konto-table td { padding: var(--s4) var(--s3); border-bottom: var(--hairline) solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.konto-table th:first-child, .konto-table td:first-child { padding-left: 0; }
/* 24: Direkt in der Zelle bearbeiten — Dropdown speichert bei Auswahl, Text/Betrag per Klick zum Eingabefeld. */
.zell-select { max-width: 100%; padding: var(--s1) var(--s2); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: var(--sm); }
.zell-select.ok { color: var(--done); background: var(--done-soft); border-color: var(--done-line); font-weight: 600; }
.zell-select.pending { color: var(--soon); background: var(--soon-soft); border-color: var(--soon-line); font-weight: 600; }
.zell-select.nein { color: var(--alert); background: var(--alert-soft); border-color: var(--alert-line); font-weight: 600; }
.zell-select:disabled, .zell-text:disabled { opacity: var(--disabled-opacity); cursor: progress; }
/* 55: Ziel-Zelle der Bookies: vorn die Reihenfolge über beide Zeilen, je Zeile Geld und Ziel. Reihenfolge: 1 und 2
   untereinander, bei „beides zugleich“ 1 und 1 mit einem halben Kettenglied links, das beide verbindet; ein Klick wechselt 1/2 → 2/1 → verknüpft.
   57: Wettkombi nein · ja. */
.ziel-zelle { display: inline-grid; grid-template-columns: auto auto auto; gap: var(--s1) var(--s2); align-items: center; white-space: nowrap; vertical-align: top; }
.ziel-zelle > span { color: var(--muted); font-size: var(--sm); }
.reihe-knopf { grid-row: span 2; align-self: stretch; display: grid; grid-template-rows: 1fr 1fr; place-items: center; min-width: var(--s8); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: var(--sm); }
.reihe-knopf:hover { background: var(--soft); }
.reihe-knopf.leer { color: var(--faint); }
.reihe-knopf.verknuepft { grid-template-columns: auto auto; column-gap: var(--s1); }
.reihe-knopf svg { grid-row: span 2; width: var(--s2); height: var(--s8); }
.reihe-knopf path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.reihe-knopf:disabled { opacity: var(--disabled-opacity); cursor: progress; }
.segmented.kombi { display: inline-grid; grid-auto-columns: var(--s10); vertical-align: middle; }
.zell-text { display: block; width: calc(100% + 2 * var(--s2)); min-height: var(--s8); padding: var(--s1) var(--s2); margin: calc(-1 * var(--s1)) calc(-1 * var(--s2)); border-radius: var(--radius-sm); color: inherit; font: inherit; text-align: inherit; white-space: inherit; overflow-wrap: anywhere; }
.zell-text:hover { background: var(--soft); }
.zell-text.leer { color: var(--faint); }
.zell-eingabe { width: 100%; min-width: 0; padding: var(--s1) var(--s2); background: var(--soft); border: var(--hairline) solid var(--ink); border-radius: var(--radius-sm); color: var(--ink); font: inherit; text-align: inherit; resize: vertical; }
/* 25: Haken „durchgespielt“ als runder Knopf; gesetzt wird die ganze Zeile grün. */
/* 32: zweiter Knopf „Fehlgeschlagen“ in Rot; die Zeile nimmt die Farbe des gesetzten Knopfs an. */
.zell-knopf { --knopf: var(--done); appearance: none; display: inline-block; vertical-align: middle; width: var(--s5); height: var(--s5); margin: var(--s1) 0 0; border: var(--focus) solid var(--faint); border-radius: var(--radius-pill); background: var(--surface); cursor: pointer; }
.zell-knopf.fehlgeschlagen { --knopf: var(--alert); }
.zell-knopf:hover { border-color: var(--knopf); }
.zell-knopf:checked { border-color: var(--knopf); background: var(--knopf); box-shadow: inset 0 0 0 var(--focus) var(--surface); }
.zell-knopf:disabled { opacity: var(--disabled-opacity); cursor: progress; }
.konto-table tr.eingezahlt { --zeile: var(--done-soft); --zeile-line: var(--done-line); }
.konto-table tr.fehlgeschlagen { --zeile: var(--alert-soft); --zeile-line: var(--alert-line); }
.konto-table tr:is(.eingezahlt, .fehlgeschlagen) td { background: var(--zeile); border-bottom-color: var(--zeile-line); }
.konto-table tr:is(.eingezahlt, .fehlgeschlagen) td:first-child { box-shadow: calc(-1 * var(--s3)) 0 0 var(--zeile); }
.konto-table tr:is(.eingezahlt, .fehlgeschlagen) td:last-child { box-shadow: var(--s3) 0 0 var(--zeile); }
.konto-meldung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.konto-table .book-col { width: var(--book-col); }
.konto-table .klein-col { width: calc(var(--s16) * 1.75); }
.konto-table .auswahl-col { width: calc(var(--s16) * 1.9); }   /* Einzahlung, Verifizierung: „nicht nötig“ passt ganz */
/* 48 Einzahlung: Beträge und Knopf „Eingezahlt“ brauchen keine Dropdown-Breite. */
.konto-table .schmal-col { width: var(--s20); }
/* 29 Bookies: breitere Dropdown-Spalte; Tabelle nur so breit wie ihre Spalten, solange keine Spalte den Rest füllt. */
.konto-table .mittel-col { width: calc(var(--s16) * 2.5); }
.konto-table.schmal { width: auto; min-width: max-content; }
.konto-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.konto-book { display: flex; align-items: center; gap: var(--s2); padding: 0; font-weight: 600; text-align: left; }
.konto-book .bookie-logo { margin-right: 0; flex: none; }
.konto-einzahlung { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); }
.konto-verlauf { color: var(--muted); font-size: var(--sm); white-space: pre-line; }
.konto-table .leer { color: var(--faint); }
/* 40 Bookies: Einzahlungsbonus als zweizeilige Kurzform in der Zelle, Dialog mit Feldpaaren. */
/* 61 Bookies: Kommentar wie auf der Einzahlung-Seite, mit fester Breite, damit die schmale Tabelle nicht mit dem Text wächst. */
.konto-table .kommentar-zelle > .zell-text { width: calc(var(--s16) * 3); }
.eb-kurz span, .eb-kurz small { display: block; }
.eb-kurz small { color: var(--muted); font-size: var(--xs); }
.feld-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
.feld-paar .field + .field { margin-top: 0; }
@media (max-width: 1100px) {
  .konto-wrap { padding-left: var(--s6); padding-right: var(--s6); }
}
@media (max-width: 760px) {
  .konto-wrap { padding-left: var(--s4); padding-right: var(--s4); }
  .konto-table, .konto-table tbody, .konto-table tr, .konto-table td { display: block; width: 100%; }
  .konto-table thead { display: none; }
  .konto-table tr { padding: var(--s3) 0; border-bottom: var(--hairline) solid var(--line); }
  .konto-table td { padding: var(--s1) 0; border: 0; }
  .konto-table tr:is(.eingezahlt, .fehlgeschlagen) { padding-left: var(--s3); padding-right: var(--s3); background: var(--zeile); border-bottom-color: var(--zeile-line); }
  .konto-table tr:is(.eingezahlt, .fehlgeschlagen) td:first-child, .konto-table tr:is(.eingezahlt, .fehlgeschlagen) td:last-child { box-shadow: none; }
  .konto-table .num { text-align: left; }
  .konto-table td[data-label]::before { content: attr(data-label); display: inline-block; min-width: calc(var(--s16) * 1.75); color: var(--muted); font-size: var(--xs); }
  .konto-table.schmal { min-width: 0; }
  .konto-table td.kommentar-zelle > .zell-text { width: calc(100% + 2 * var(--s2)); }
  /* 29: kurze Werte neben der Beschriftung, Eingabefeld bleibt in der Karte. */
  .konto-table td.num[data-label] > .zell-text { display: inline-block; width: auto; margin: 0 0 0 calc(-1 * var(--s2)); }
  /* 40: Einzahlungsbonus neben der Beschriftung. */
  .konto-table td:is([data-label="Einzahlungsbonus"], [data-label="Steuer"], [data-label="Bonusregeln"]) > .zell-text { display: inline-block; width: auto; max-width: calc(100% - var(--s16) * 1.75); vertical-align: top; margin: 0 0 0 calc(-1 * var(--s2)); }
  .konto-table td[data-label] > .zell-eingabe { width: calc(100% - var(--s16) * 1.75); vertical-align: middle; }
}
@media (max-width: 1100px) {
  .guv-hero, .guv-ledger { padding-left: var(--s6); padding-right: var(--s6); }
  .guv-columns { padding-left: var(--s6); padding-right: var(--s6); }
}
.ledger-amount { display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--s1); }
@media (max-width: 760px) {
  :root { --hero: 40px; }
  .guv-hero, .guv-ledger { padding-left: var(--s4); padding-right: var(--s4); }
  .guv-columns { grid-template-columns: 1fr; padding-left: var(--s4); padding-right: var(--s4); }
  .ledger-table .hide-mobile { display: none; }
  .ledger-table td, .ledger-table th { padding-left: var(--s1); padding-right: var(--s1); }
  .ledger-table td { font-size: var(--sm); }
  .guv-ledger { overflow-x: auto; }
}
/* 63 Reloads: offene Reloads aus Inboxprofi auf .konto-table, eine Zeile je Reload und Mitspieler, mobil Karten.
   Gebuchte Zeilen wie eingezahlte (.eingezahlt), „fehlt“ und „nicht im Katalog“ grau in der Aktion. */
.konto-table td.reload-aktion { text-align: right; }
.konto-table td.reload-aktion .form-message { margin-top: var(--s2); text-align: left; }
/* Schmaler als die Spalten (etwa 761 bis 1000 px) scrollt die Tabelle waagrecht, statt die Buchung zu quetschen. */
.konto-table.reload-table { min-width: calc(var(--book-col) + var(--s16) * 3 * 2 + var(--s16) * 2.5 * 2 + var(--s16) * 1.75 * 2); }
@media (max-width: 760px) {
  .konto-table.reload-table { min-width: 0; }
  .konto-table td.reload-aktion { padding-top: var(--s2); text-align: left; }
}
}