/* Cormorant Garamond und Lora liegen als Variable Fonts im Repo, damit die App
   am Turniertag ohne Internet läuft. Ein Schnitt deckt 400 und 600 ab. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/lora-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/lora-latin.woff2") format("woff2");
}

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  /* Beamer: tiefes warmes Schwarz, nur in der Live-Ansicht */
  --color-beamer: #232120;

  --font-heading: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-heading-weight: 600;
  --font-body: "Lora", Georgia, "Times New Roman", serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* Grauwerte des Entwurfs als benannte Stufen, damit sie nicht als
     color-mix-Ketten im Komponenten-Code auftauchen. */
  --ink-38: color-mix(in srgb, var(--color-text) 38%, transparent);
  --ink-45: color-mix(in srgb, var(--color-text) 45%, transparent);
  --ink-55: color-mix(in srgb, var(--color-text) 55%, transparent);
  --ink-60: color-mix(in srgb, var(--color-text) 60%, transparent);
  --ink-62: color-mix(in srgb, var(--color-text) 62%, transparent);
  --ink-70: color-mix(in srgb, var(--color-text) 70%, transparent);

  /* Arbeitsbreite Laptop und Innenrand der Arbeitsfläche. 1280 war der Wert
     des Entwurfs für den 13-Zoll-Laptop; auf Antonios Schirm blieb rechts und
     links ein Drittel der Fläche ungenutzt. Angehoben wird erst, nachdem die
     Namensspuren und die Randspalte gedeckelt sind — sonst wächst allein die
     tote Strecke zwischen Name und Ergebnisfeld (F002/B026). */
  --work-width: 1500px;
  --work-pad: 32px;

  /* Ergebnisspalte: fasst fünf ausgeschriebene Sätze ("11:4, 11:6, 9:11,
     8:11, 12:10" = 230 px Text + 22 px Feldrand) plus die 30-px-Schaltfläche
     für den Sonderstatus. Längere Eingaben scrollen im Feld, damit alle
     Zeilen bündig bleiben. */
  --result-column: 292px;

  /* Deckel je Namensspur in der Eingabezeile (F002/B026). Der Wert muss bei
     JEDER geprüften Fensterbreite binden, sonst verteilt das Raster die
     gewonnene Arbeitsbreite wieder auf die Namensspuren, und allein die tote
     Strecke zwischen Namensende und Ergebnisfeld wächst mit. Gemessen: die
     engste Zeile der Reihe ist die Gruppen+KO-Zeile bei 1280 px Fenster
     (86-px-Kicker vor der Paarung) — dort stehen 177,9 px zur Verfügung. Ein
     Deckel darüber greift dort nicht: mit 320 px wächst die tote Strecke von
     129 auf 242 px, mit 200 px bei Gruppen+KO von 118 auf 140 px. Mit 176 px
     ist sie über 1280/1440/1728/1920/2560 konstant. */
  --name-column: 210px;
  /* Die Eingabezeile wird NICHT auf die volle Arbeitsbreite gedehnt: bei
     1500 px landete der gesamte Zugewinn in der Lücke zwischen den beiden
     Namen (gemessen +248 px), während lange Namen umbrachen. Die Zeile bleibt
     kompakt, der Zugewinn geht an Matrix und Randspalte. */
  --match-row-width: 920px;

}

* {
  box-sizing: border-box;
}

/* Ein eigenes display überschreibt sonst das hidden-Attribut — dadurch blieben
   ausgeblendete Ansichten sichtbar. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  /* Beide Schriften setzen sonst Mediävalziffern; die "3" hinge unter der
     Zeile. Gilt bewusst global, damit auch Überschriften mit Zahlen sitzen. */
  font-variant-numeric: lining-nums tabular-nums;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 25px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

a {
  color: var(--color-accent);
  text-underline-offset: 3px;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

button,
input,
select,
textarea {
  font: inherit;
  font-variant-numeric: inherit;
}

button {
  cursor: pointer;
}

/* Kicker über den Screen-Titeln: Format und Zustand in Gold. */
.eyebrow,
.kicker {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Goldene Linie markiert den Beginn der Arbeitsfläche. */
.work-rule {
  height: 2px;
  border: 0;
  margin: 0;
  background: var(--color-accent);
}

.hairline {
  height: 1px;
  border: 0;
  margin: var(--space-4) 0;
  background: var(--color-divider);
}

.muted-text {
  color: var(--ink-55);
}

/* ── Rahmen, Kopfleiste und Grundraster ──────────────────────────────── */

.page-shell {
  width: min(calc(var(--work-width) + 2 * var(--work-pad)), calc(100% - 28px));
  margin: 24px auto 48px;
}

.app-frame {
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

/* ── Landingpage: derselbe ruhige Papiercharakter wie im Arbeitsbereich. ── */
@font-face { font-family: PlayManrope; src: url('../assets/fonts/manrope-variable.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }
/* Header and login live in the isolated @tabletennis/tt-ui component. */
.account-dialog:has(tt-login) { width:min(440px,calc(100vw - 40px));padding:0;border:0;border-radius:4px; }
.account-shell:has(tt-login) { padding:0; }
.landing-view {
  overflow: hidden;
  background: #f3f2f2;
  color: #201f1d;
  font-family: PlayManrope, Arial, sans-serif;
}

.landing-product-name > span { color: #7d5a24; }
.landing-product-name { font: 500 clamp(64px, 8vw, 112px)/1 PlayManrope, Arial, sans-serif; letter-spacing: -.065em; margin: 0 0 24px; }
.landing-view h1 { font-family: PlayManrope, Arial, sans-serif; letter-spacing: -.045em; }
.landing-entry-actions { margin-top: 12px; }
.landing-resume { border-top: 1px solid #d9d6d1; margin-top: 28px; padding-top: 20px; }
.landing-resume > span, .landing-resume > p { display: block; font-size: 13px; color: #655e55; }
.landing-resume > strong { display: block; font-size: 22px; margin-top: 8px; overflow-wrap: anywhere; }
.landing-resume > p { margin: 8px 0 16px; }

.landing-view .kicker,
.landing-view .link-button,
.landing-view .primary-button,
.landing-format-list article > span,
.landing-steps li > span {
  color: var(--color-accent-700);
}

.landing-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.landing-actions .secondary-button {
  min-height: 44px;
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: clamp(42px, 7vw, 110px);
  align-items: center;
  min-height: 590px;
  padding: clamp(64px, 9vw, 126px) clamp(28px, 7vw, 104px);
}

.landing-hero-copy {
  max-width: 720px;
}

.landing-hero h1 {
  max-width: 700px;
  margin: 12px 0 24px;
  font-size: clamp(54px, 6vw, 88px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.landing-lead {
  max-width: 650px;
  margin: 0 0 30px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.65;
  color: var(--ink-70);
}

.landing-view .landing-primary {
  min-height: 44px;
  padding-inline: 22px;
  font-size: 16px;
}

.landing-trust {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--ink-55);
}

.landing-product-preview {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.landing-product-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.landing-product-preview figcaption {
  margin: 0;
  padding: 11px 14px 12px;
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
  font-size: 12px;
  color: var(--ink-60);
}

.landing-section,
.landing-flow,
.landing-closing {
  padding: clamp(54px, 7vw, 96px) clamp(28px, 7vw, 104px);
  border-top: 1px solid var(--color-divider);
}

.landing-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: 34px;
}

.landing-section h2,
.landing-flow h2,
.landing-closing h2 {
  margin: 5px 0 0;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
}

.landing-format-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--color-accent);
}

.landing-format-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  padding: 26px 24px 26px 0;
  border-bottom: 1px solid var(--color-divider);
}

.landing-format-list article:nth-child(odd) {
  margin-right: 28px;
}

.landing-format-list article > span {
  padding-top: 5px;
  font-size: 11px;
  color: var(--color-accent);
}

.landing-format-list h3 {
  margin: 0 0 5px;
  font-size: 24px;
}

.landing-format-list p,
.landing-flow p,
.landing-steps p {
  margin: 0;
  color: var(--ink-60);
}

.landing-flow {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(42px, 8vw, 120px);
  background: var(--color-surface);
}

.landing-flow-intro > p:last-child {
  max-width: 480px;
  margin-top: 18px;
}

.landing-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--color-accent);
}

.landing-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-divider);
}

.landing-steps li > span {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--color-accent);
}

.landing-steps strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-size: 21px;
}

.landing-closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
}

@media (max-width: 900px) {
  .landing-hero,
  .landing-flow {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    min-height: 0;
  }

  .landing-product-preview {
    max-width: 620px;
  }
}

@media (max-width: 620px) {
  .landing-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .landing-hero {
    padding-top: 54px;
  }

  .landing-hero h1 {
    font-size: 48px;
  }

  .landing-actions > *,
  .landing-closing .landing-primary {
    width: 100%;
  }

  .landing-format-list {
    grid-template-columns: 1fr;
  }

  .landing-format-list article:nth-child(odd) {
    margin-right: 0;
  }

  .landing-closing {
    align-items: stretch;
    flex-direction: column;
  }
}

.workspace-navigation {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* Auf schmalen Fenstern umbrechen, statt aus dem Rahmen zu laufen. */
  flex-wrap: wrap;
  row-gap: var(--space-2);
  padding: var(--space-3) var(--work-pad);
  border-bottom: 1px solid var(--color-divider);
}

/* Turniername als Schalter — der Name steht nur hier, nicht noch einmal als h1. */
.nav-switcher {
  position: relative;
  margin-right: auto;
}

.switcher-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 4px 10px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: transparent;
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--color-text);
}

.switcher-button[aria-expanded="true"] {
  border-color: var(--color-accent);
}

.switcher-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease;
}

.switcher-button[aria-expanded="true"] .switcher-chevron {
  transform: rotate(180deg);
}

.switcher-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  width: 420px;
  padding: var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.switcher-panel[hidden] {
  display: none;
}

.switcher-panel-heading {
  margin: 0;
  padding-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.switcher-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  width: 100%;
  padding: 12px 4px;
  border: 0;
  border-top: 1px solid var(--color-divider);
  background: transparent;
  text-align: left;
}

.switcher-row.is-current {
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}

.switcher-row:hover:not(.is-current) {
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.switcher-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  align-self: center;
}

.switcher-row.is-current .switcher-mark {
  background: var(--color-accent);
}

.switcher-row-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1.2;
}

.switcher-row-meta {
  display: block;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

.switcher-row-action {
  font-size: 12px;
  color: var(--color-accent);
}

.switcher-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-divider);
}

/* Stille Textlinks: alles, was nicht die Hauptaktion ist. */
.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-accent);
  text-align: left;
}

.link-button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-button:disabled {
  color: var(--ink-38);
  cursor: not-allowed;
  text-decoration: none;
}

.nav-views {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-view-link {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
}

.nav-view-link:hover {
  color: var(--color-accent);
}

.nav-view-link.is-active {
  color: var(--color-accent);
}

/* Sprachwahl: zwei stille Kürzel mit Trennstrich, wie eine Kolumnentitel-
   Angabe im Satzspiegel. Kein Kasten, keine Farbe — nur die aktive Sprache
   steht in Gold und trägt etwas mehr Gewicht. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.08em;
}

/* Kein zweites `auto`-Maß in der Kopfzeile: `.nav-switcher` schiebt schon
   alles Folgende nach rechts, der Schalter reiht sich einfach hinter den
   Ansichten ein. */
.lang-divider {
  color: var(--ink-38);
}

.lang-option {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink-55);
  text-transform: uppercase;
}

.lang-option:hover {
  color: var(--color-accent);
}

.lang-option.is-active {
  color: var(--color-accent);
  font-weight: var(--font-heading-weight);
}

/* Titelblock: links Kicker und Aufgabe, rechts die Rahmendaten rechtsbündig. */
.title-block {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 28px var(--work-pad) 8px;
}

.title-block-main {
  min-width: 0;
}

.title-block .kicker {
  margin: 0 0 6px;
  font-size: 14px;
}

.title-block h1 {
  margin: 0 0 6px;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.title-facts {
  display: block;
  font-size: 13px;
  color: var(--ink-60);
}

.title-facts:empty {
  display: none;
}

.title-meta:empty {
  display: none;
}

.title-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  text-align: right;
  font-size: 13px;
  color: var(--ink-60);
}

.work-area {
  padding: 0 var(--work-pad) 40px;
}

/* Die Goldlinie steht über der Arbeitsfläche, nicht über der ganzen Seite.
   Der obere Abstand ist an `.rail-heading.is-rail-start` gekoppelt — beide
   Linien markieren denselben Beginn und liegen auf derselben Höhe. */
.work-main > .work-rule {
  margin: 24px 0 14px;
}

/* Zwei Spalten: links Arbeitsfläche, rechts die ruhige Randspalte. */
.work-split {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.6fr);
  gap: 44px;
  align-items: start;
}

.work-main {
  min-width: 0;
}

.work-rail {
  min-width: 0;
  display: grid;
  gap: 20px;
  align-content: start;
}

/* Die Randspalte trägt dieselbe goldene Linie wie die Arbeitsfläche, auf
   derselben Höhe: Überschrift 16 px hoch + 2 px Abstand ergibt 18 px — genau
   der Abstand von `.work-main > .work-rule`. Geprüft von
   scripts/design-check/layout-invarianten.mjs, damit die beiden Linien nicht
   wieder auseinanderlaufen. */
/* G4 — Nichts klebt. Überschrift 16 px Zeilenhöhe + 8 px Luft = 24 px, genau
   der Abstand von `.work-main > .work-rule`. Beide Linien bleiben damit auf
   einer Höhe und der Text klebt nicht mehr an seiner Linie. */
.rail-heading.is-rail-start {
  margin: 0;
  line-height: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent);
}

.rail-block {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

/* Ein select bemisst sich sonst an seiner längsten Option und sprengt die
   Randspalte — hier hart auf die Spaltenbreite begrenzt. */
.rail-field,
.rail-links {
  min-width: 0;
}

.rail-field select,
.rail-field input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Überschriften der Randspalte tragen keine Linie; die Struktur kommt aus
   den Abständen und den Haarlinien zwischen den Blöcken. */
.rail-heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
}

.rail-block > .secondary-button,
.rail-block > .primary-button {
  justify-self: start;
}

.rail-links {
  display: grid;
  justify-items: start;
  gap: 7px;
}

/* Drucken/PDF (B021): der Block steht als statisches Geschwister neben
   #sheetMeta, damit er jedes Neuzeichnen des Blattes überlebt. Die Umfangwahl
   gehört über die Knöpfe — sie wird gesetzt, bevor gedruckt wird. */
.rail-print .rail-field {
  margin-bottom: 2px;
}

/* Das zuletzt gedruckte Dokument bleibt markiert: Cmd+P nimmt genau dieses,
   und der Hinweis darunter sagt es noch einmal in Worten. Die Markierung
   liegt allein in der Farbe — fett gesetzt hat G1 sie zu Recht als
   Formunterschied unter Geschwistern beanstandet. */
.rail-print .link-button.is-print-selected {
  color: var(--color-text);
}

@media (max-width: 1024px) {
  .rail-print .link-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* B048/B064: „Rückgängig" und „Wiederholen" sind auf dem Tablet mit dem Finger
   zu treffen — 21×20 px waren ein Glückstreffer. Am Zeigegerät bleibt die
   Zeile schmal, sonst zieht sie die Randspalte auseinander. */
@media (max-width: 1024px) {
  .rail-history .link-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Die gelöschte Alt-Regel gab der Ankreuzzeile 46 px Höhe. Am Zeigegerät
     braucht sie die nicht, am Finger schon. */
  .inline-check {
    min-height: 44px;
  }
}

.rail-field {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-70);
}

/* Dateinamen und Zeitstempel dürfen die Randspalte nicht aufziehen. */
.rail-note,
.round-backup-status {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 5a — Meine Turniere: Zeilen statt Reiter. */
.start-list {
  display: grid;
}

.start-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) max-content max-content;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--color-divider);
}

.start-row:last-child {
  border-bottom: 1px solid var(--color-divider);
}

.start-row .tag {
  justify-self: start;
}

.start-row-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.start-row-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 21px;
  line-height: 1.2;
}

.start-row-meta {
  display: block;
  font-size: 12px;
  color: var(--ink-60);
}

.start-row-drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-38);
  cursor: grab;
}

.start-row-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.start-actions {
  margin-top: var(--space-4);
}

.start-tools-rail {
  gap: 0;
}

.start-tools {
  border-top: 1px solid var(--color-divider);
}

.start-tools:last-child {
  border-bottom: 1px solid var(--color-divider);
}

.start-tools-rail > .start-tools > summary {
  min-height: 44px;
  padding: 12px 0;
  font-family: var(--font-heading);
  font-size: 15px;
}

.start-tools > .rail-details-body {
  padding-bottom: var(--space-4);
  gap: var(--space-4);
}

.start-tools .rail-links button {
  min-height: 44px;
  padding-block: 8px;
  text-align: left;
}

@media (max-width: 620px) {
  .start-row {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px 12px;
    align-items: start;
  }

  .start-row-text,
  .start-row > .tag,
  .start-row-tools {
    grid-column: 2;
  }

  .start-row-tools {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .start-row-tools button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ── Ergebniseingabe: eine Zeile je Spiel ────────────────────────────── */

.match-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--match-row-width);
}

/* Die Namensspuren sind gedeckelt (F002/B026): ohne Deckel wächst mit jedem
   Pixel Fensterbreite nur die tote Strecke zwischen Namensende und
   Ergebnisfeld. Was über den Deckel hinausgeht, nimmt die „gegen"-Spur auf
   (einzige auto-Spur der Zeile) — nicht der Name und nicht die Lücke vor dem
   Feld. Deckelwert und Messreihe siehe --name-column. */
.match-row {
  display: grid;
  grid-template-columns: 34px minmax(0, var(--name-column)) auto minmax(0, var(--name-column)) var(--result-column);
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--color-divider);
}

/* B134: Die Rückmeldung bleibt für B046 absolut, damit das Ergebnisfeld auf
   derselben Mitte wie die Namen sitzt. Sobald sie Text trägt, reserviert die
   Zeile darunter aber genug Platz für zwei Hinweiszeilen; Trenner und nächste
   Paarung beginnen erst danach. */
.match-row:has(.quick-result-note:not(:empty)) {
  padding-bottom: 33px;
}

/* Gruppen + KO: die Gruppe steht als Kicker vor der Paarung. */
.match-list.has-context .match-row {
  grid-template-columns: 86px minmax(0, var(--name-column)) auto minmax(0, var(--name-column)) var(--result-column);
}

.match-table {
  font-family: var(--font-heading);
  font-size: 19px;
  color: var(--ink-45);
}

.match-context {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.match-player {
  font-size: 15px;
  min-width: 0;
  /* Die Paarung bleibt auch schmal nebeneinander; ein sehr langer Name bricht
     dann innerhalb seiner Spalte um, statt über die Nachbarspalte zu laufen. */
  overflow-wrap: anywhere;
}

.match-versus {
  font-size: 12px;
  color: var(--ink-45);
  text-align: center;
  white-space: nowrap;
}

.match-row.is-bye {
  grid-template-columns: 34px minmax(0, 1fr);
  color: var(--ink-55);
}

.match-bye-text {
  font-size: 14px;
  color: var(--ink-55);
}

/* Ein Feld je Spiel, rechtsbündig, darunter die Rückmeldung. */
.quick-result {
  position: relative;
  display: grid;
  gap: 3px;
}

.quick-result-input {
  width: 100%;
  text-align: right;
}

/* B046: Die Rückmeldung hängt UNTER dem Feld, statt in der Zeilenmitte
   mitgerechnet zu werden. Vorher zentrierte die Zeile den Block aus Feld und
   15-px-Notizzeile — das Feld saß dadurch 9 px über der Namensmitte. */
.quick-result-note {
  position: absolute;
  top: calc(100% + 3px);
  right: 0;
  left: 0;
  min-height: 0;
  font-size: 12px;
  line-height: 1.25;
  text-align: right;
  color: var(--ink-55);
  pointer-events: none;
}

.quick-result-note.is-error {
  color: var(--color-accent-700);
}

.quick-result-input.is-invalid {
  border-color: var(--color-accent-700);
}

/* Feld und „!"-Auslöser stehen nebeneinander; die Statusmarke darunter geht
   über beide Spuren. align-items: center hält beide auf der Zeilenmitte —
   mit „start" hing der Auslöser zusätzlich 3 px zu hoch (B046). */
.match-result-controls {
  display: grid;
  grid-template-columns: minmax(76px, 1fr) 30px;
  gap: 6px;
  align-items: center;
  min-width: 116px;
  max-width: var(--result-column);
}

.match-result-controls .quick-result {
  min-width: 0;
  grid-column: 1;
}

/* B027 (wiederkehrend, zuletzt auf 1440, 1728 und iPhone quer belegt): Die
   geöffnete Klappe lag als `position: absolute` über der Folgezeile und deckte
   dort das Ergebnisfeld zu (204 × 30 px gemessen). Ursache war der Ort, nicht
   die Größe: das Panel steckte im 30-px-Kasten des <details> und konnte dort
   nur schweben.
   Lösung: die Klappe bekommt gar keinen eigenen Kasten mehr. Mit
   `display: contents` werden Auslöser und Panel selbst Felder des
   Ergebnisrasters — der Auslöser bleibt neben dem Feld, das Panel bekommt eine
   eigene Rasterzeile darunter und nimmt damit Platz im Fluss ein. Die Zeile
   wächst, die Folgezeile rückt nach; nichts liegt mehr übereinander.
   `::details-content` ist der Kasten, den neuere Browser zwischen <details> und
   seinen Inhalt legen; auch er muss durchlässig sein, sonst bliebe das Panel
   sein Kind statt Rasterfeld. */
.match-anomaly-control {
  display: contents;
}

.match-anomaly-control::details-content {
  display: contents;
  content-visibility: visible;
}

/* Ohne den eigenen Kasten trägt der Auslöser die Zurückhaltung selbst: er
   zeigt sich erst beim Überfahren der Zeile, bei Tastaturfokus oder wenn ein
   Sonderstatus gesetzt ist.
   B079: Ohne :focus-within landete der Tastaturfokus auf einem unsichtbaren
   Element — man klappte auf, was man nicht sah. */
.match-row:hover .match-anomaly-trigger,
.match-anomaly-control:focus-within .match-anomaly-trigger,
.match-anomaly-control.is-active .match-anomaly-trigger,
.match-anomaly-control[open] .match-anomaly-trigger {
  opacity: 1;
}

/* Zugeklappt bleibt das Panel weg — ausdrücklich und nicht dem Browsereigenen
   Verstecken überlassen, das mit `display: contents` je nach Fassung anders
   greift. */
.match-anomaly-control:not([open]) .match-anomaly-panel {
  display: none;
}

.match-anomaly-trigger {
  display: grid;
  place-items: center;
  grid-column: 2;
  opacity: 0;
  transition: opacity 0.15s ease;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-60);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  list-style: none;
  cursor: pointer;
}

.match-anomaly-trigger::-webkit-details-marker {
  display: none;
}

.match-anomaly-control.is-active .match-anomaly-trigger,
.match-anomaly-control[open] .match-anomaly-trigger {
  border-color: var(--color-accent);
  background: transparent;
  color: var(--color-accent-700);
}

/* Eigene Rasterzeile über die volle Breite der Ergebnisspalte — kein
   Schwebekasten mehr, deshalb auch kein Schatten und kein z-index. */
.match-anomaly-panel {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

/* Kopfzeile der Arbeitsfläche: Aufgabe links, Zähler rechts. */
.work-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.work-head h3 {
  margin: 0;
}

.work-count {
  font-size: 13px;
  color: var(--ink-60);
}

.work-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.work-intro p {
  margin: 0;
  max-width: 62ch;
  font-size: 13px;
  color: var(--ink-62);
}

.set-details-toggle {
  flex: 0 0 auto;
}

/* Hauptaktion unter der Liste, mit Begründung wenn gesperrt. */
.work-action {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--color-divider);
  flex-wrap: wrap;
}

.work-settings {
  margin-top: var(--space-3);
}

/* Nebensachen liegen aufklappbar unter der Arbeitsfläche, dicht gestapelt. */
.work-details {
  margin-top: 0;
  border-top: 1px solid var(--color-divider);
}

.work-details:first-of-type {
  margin-top: var(--space-4);
}

.work-details > summary {
  padding: 13px 0;
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--color-accent);
  cursor: pointer;
  list-style: none;
}

.work-details > summary::-webkit-details-marker {
  display: none;
}

.work-details > summary::before {
  content: "▸ ";
  color: var(--ink-45);
}

.work-details[open] > summary::before {
  content: "▾ ";
}

.work-details-body {
  padding-bottom: var(--space-4);
  min-width: 0;
}

/* Breite Inhalte scrollen in sich selbst, statt die Seite zu verbreitern. */
.work-details,
.sheet-stack,
.sheet-area {
  min-width: 0;
}

.clicktt-xml-preview {
  max-width: 100%;
}

.rail-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-60);
}

.rail-table {
  font-size: 13px;
  width: 100%;
}

.rail-table th,
.rail-table td {
  padding: 6px 4px;
}

/* Gedeckelte Spuren (F002): wird die Randspalte breiter, soll der Name den
   Platz bekommen — nicht die Zahlenspalten. Ohne Deckel zieht das
   Auto-Layout jede Spalte gleichmäßig auf, und „Diff." steht plötzlich
   handbreit von seinem Wert entfernt. */
.rail-table th:first-child,
.rail-table td:first-child {
  width: 28px;
}

.rail-table th.is-numeric,
.rail-table td.is-numeric {
  width: 62px;
  white-space: nowrap;
}

/* Kopfzeile und Werte einer Spalte stehen auf derselben Kante. Die Element-
   Selektoren sind nötig, weil `.data-table th { text-align: left }` sonst
   spezifischer ist als `.is-numeric` und die Kopfzeile nach links zieht,
   während die Werte rechts stehen. Genau so lag „S–N" nicht unter „5–1". */
table th.is-numeric,
table td.is-numeric,
.is-numeric {
  text-align: right;
}

/* Ohne eigene Ausrichtung folgt die Kopfzeile ihren Werten, nicht umgekehrt. */
.ranking-table th,
.ranking-table td {
  text-align: left;
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-70);
}

/* Maße und Farbe aus der gelöschten Alt-Regel übernommen; width/min-height
   heben zugleich die allgemeine Feldregel auf. */
.inline-check input {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--color-text);
}

.round-control-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Aus der gelöschten Alt-Regel übernommen: die Leiste bricht auf schmalen
     Fenstern um und hält Abstand nach unten. */
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.round-counter-input {
  width: 64px;
}

.round-counter-input input {
  text-align: center;
}

.round-counter-total {
  font-size: 13px;
  color: var(--ink-60);
}

/* Teamstand in der Randspalte: führendes Team mit goldener Unterlinie. */
.team-standing {
  display: grid;
}

.team-standing-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 62px;
  gap: var(--space-2);
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 14px;
}

/* G1 — Geschwister teilen die Form. Das führende Team bekommt weder eine
   eigene Schrift noch eine eigene Linie: eine zweite Schriftart mitten in
   einer zweizeiligen Liste liest sich, als gehörten die Zeilen nicht
   zusammen, und eine goldene Linie liest sich als Abschnittsende.
   Ausgezeichnet wird über eine Marke vor dem Namen. */
.team-standing-row.is-leading > span:first-child::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: 0.1em;
}

/* ── Startliste (2cv2): zwei Spalten im Lesemodus ────────────────────── */

.roster-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
  margin-top: var(--space-3);
}

.roster-column {
  min-width: 0;
}

.roster-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 46px 52px;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  padding: 9px 0;
  border: 0;
  border-top: 1px solid var(--color-divider);
  background: transparent;
  text-align: left;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
}

.roster-row:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

.roster-row.is-editing {
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}

.roster-row.is-muted {
  opacity: 0.55;
}

.roster-number {
  color: var(--ink-45);
}

.roster-name-cell {
  min-width: 0;
}

.roster-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-club {
  display: block;
  font-size: 11px;
  color: var(--ink-55);
}

.roster-ttr {
  text-align: right;
  color: var(--ink-70);
}

.roster-status {
  justify-self: start;
}

.roster-editor {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

.roster-editor-heading {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.roster-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 100px 120px;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.field {
  display: grid;
  gap: 5px;
}

.field > span {
  font-size: 12px;
  color: var(--ink-70);
}

.work-note {
  margin: 0;
  max-width: 62ch;
  font-size: 13px;
  color: var(--ink-62);
}

@media (max-width: 900px) {
  .roster-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .roster-editor-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ── Assistent (3a–3d) ───────────────────────────────────────────────── */

.wizard-dialog {
  width: min(820px, calc(100% - 32px));
  max-width: 820px;
  /* Aus der gelöschten Alt-Regel übernommen: ohne Deckel läuft Schritt 2
     (Teilnehmerliste) über den Bildschirmrand hinaus. */
  max-height: min(860px, calc(100vh - 28px));
  padding: 0;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}

.wizard-dialog::backdrop {
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}

#tournamentWizardDialog.is-over-landing::backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.wizard-shell {
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
  /* Aus der gelöschten Alt-Regel übernommen (Scrollverhalten langer Schritte). */
  max-height: min(860px, calc(100vh - 28px));
  overflow: auto;
}

.wizard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.wizard-header h2 {
  margin: 0;
  font-size: 30px;
}

/* Schrittleiste: erreichte Schritte mit Goldlinie oben, offene mit Haarlinie. */
.wizard-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard-progress-item {
  padding-top: 8px;
  border-top: 1px solid var(--color-divider);
  font-size: 12px;
  color: var(--ink-45);
}

.wizard-progress-item.is-reached {
  padding-top: 7px;
  border-top: 2px solid var(--color-accent);
  color: var(--color-accent-800);
}

/* Format als Zeilenliste statt Kacheln. */
.wizard-format-list {
  display: grid;
}

.wizard-format-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 92px;
  gap: 14px;
  align-items: baseline;
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--color-divider);
  background: transparent;
  text-align: left;
  color: var(--color-text);
}

.wizard-format-row:last-child {
  border-bottom: 1px solid var(--color-divider);
}

.wizard-format-row:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wizard-format-dot {
  width: 12px;
  height: 12px;
  align-self: center;
  border: 1.5px solid var(--color-divider);
  border-radius: 50%;
}

/* Der Innenring muss zur Punktgröße passen: Bei 16 px Durchmesser ließ
   `inset 4px` einen 5 px großen Goldkern stehen. Seit der Punkt 12 px misst,
   blieben davon nur ~1 px übrig — die Auswahl sah in jedem Browser leer aus.
   2 px stellen den 5 px großen gefüllten Kern wieder her. */
.wizard-format-row.is-active .wizard-format-dot {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-surface);
}

.wizard-format-row:hover:not(:disabled) .wizard-format-dot {
  border-color: var(--color-accent);
}

.wizard-format-row:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-top-color: var(--color-accent);
  box-shadow: inset 0 -1px 0 var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.wizard-format-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 1.2;
}

.wizard-format-description {
  display: block;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

.wizard-format-row .tag {
  justify-self: end;
}

.wizard-name-field {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.wizard-name-field label {
  padding-top: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.wizard-name-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-60);
}

.wizard-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent);
}

.wizard-close svg {
  width: 16px;
  height: 16px;
}

.tag-plain {
  color: var(--ink-38);
}

.wizard-path-list {
  display: grid;
  gap: var(--space-3);
}

.wizard-path {
  display: grid;
  gap: 3px;
  padding: 13px 0;
  border-top: 1px solid var(--color-divider);
}

.wizard-path strong {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
}

.wizard-path span {
  font-size: 13px;
  color: var(--ink-60);
}

.wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

.wizard-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Aus der gelöschten Alt-Regel übernommen. */
  flex-wrap: wrap;
}

.wizard-field-grid {
  display: grid;
  gap: var(--space-3);
}

.wizard-field-grid.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wizard-field-grid label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-70);
}

/* ── 2bv2 — Teilnehmer eintragen ─────────────────────────────────────── */

.entry-title {
  margin: 0 0 4px;
}

.participant-work-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 8px;
}

.participant-work-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.participant-tournament-name {
  display: grid;
  gap: 4px;
  min-width: min(280px, 42%);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.participant-tournament-name input {
  min-width: 0;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
}

.entry-lead {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--ink-62);
}

.entry-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 22px;
}

.entry-input,
.entry-recognised {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.entry-preview-label {
  margin: 0;
  font-size: 12px;
  color: var(--ink-60);
}

.entry-draft-state,
.entry-existing-state {
  display: grid;
  gap: 4px;
}

.entry-existing-state {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--color-divider);
  opacity: 0.72;
}

.score-entry-hint {
  max-width: 72ch;
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-62);
}

.entry-input > label {
  display: block;
  font-size: 12px;
  color: var(--ink-70);
}

.entry-input textarea {
  min-height: 176px;
  line-height: 1.8;
}

.entry-hint {
  font-size: 13px;
  color: var(--ink-60);
}

.entry-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 16px;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--color-divider);
}

.entry-nr {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 42%, transparent);
}

.entry-first {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-last {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-last.is-missing {
  font-style: italic;
  font-size: 13px;
  color: var(--ink-38);
}

.entry-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-38);
}

.entry-remove svg {
  width: 13px;
  height: 13px;
}

.entry-remove:hover {
  color: var(--color-accent-700);
}

/* Turniereinstellungen liegen still am Ende der Randspalte. */
.rail-details > summary {
  padding: 6px 0;
  font-size: 13px;
  color: var(--color-accent);
  cursor: pointer;
  list-style: none;
}

.rail-details > summary::-webkit-details-marker {
  display: none;
}

.rail-details > summary::before {
  content: "▸ ";
  color: var(--ink-45);
}

.rail-details[open] > summary::before {
  content: "▾ ";
}

.rail-details-body {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.file-picker-button {
  cursor: pointer;
}

@media (max-width: 900px) {
  .entry-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Alter Import-Aufbau, noch von Team A/B genutzt. */
.import-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.8fr);
  gap: 44px;
  align-items: start;
  margin-top: var(--space-3);
}

.import-entry,
.import-preview-column {
  min-width: 0;
}

.participant-import-textarea textarea {
  min-height: 176px;
}

.participant-import-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  font-size: 13px;
}

.participant-import-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--color-divider);
}

.missing-lastname-hint {
  font-style: italic;
  font-size: 12px;
  color: var(--ink-45);
}

.participant-import-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.participant-import-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

@media (max-width: 900px) {
  .import-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

/* Einstellungen als eine Zeile: Label links, schmales Feld daneben. */
.settings-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}

.settings-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--ink-70);
}

.settings-item input[type="number"] {
  width: 58px;
  text-align: center;
}

.settings-item-wide {
  gap: var(--space-2);
}

/* Gruppenaufteilung: gleich breite Spalten, kein Trennstrich dazwischen. */
.group-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-3);
}

.group-split-column {
  min-width: 0;
}

.group-split-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}

/* Phase 3: Paar-Zeile der Teilnehmerliste. Die Felder stapeln untereinander,
   damit auch lange Paarnamen in einer schmalen Gruppenspalte Platz finden —
   die Zeilennummer bleibt oben buendig neben dem ersten Feld. */
.roster-pair-row {
  align-items: start;
  padding: 10px 0;
}

.roster-pair-row .roster-number {
  padding-top: 10px;
}

.roster-pair-fields {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.roster-pair-fields input,
.roster-pair-fields select {
  min-width: 0;
  max-width: 100%;
}

/* Der Anzeigename ist abgeleitet, nicht gleichrangig — er steht optisch
   zurueck, bleibt aber jederzeit ueberschreibbar. */
.roster-pair-display {
  font-weight: 600;
}

/* Nicht blockierender Hinweis im Arbeitsbereich (z. B. Mixed-Wertung). */
.work-notice {
  display: grid;
  gap: 6px;
  margin: var(--space-3) 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

.work-notice strong {
  font-size: 14px;
}

.work-notice ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-62);
}

.section-subheading {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 21px;
}

/* KO-Raster als Vorschau unter der Gruppenrunde. */
.knockout-preview {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

/* KO-Vorschau: Listenzeilen wie in der Arbeitsfläche, kein Kasten. */
.knockout-preview-note {
  margin: 0 0 var(--space-3);
  max-width: 62ch;
  font-size: 13px;
  color: var(--ink-62);
}

.knockout-preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 92px;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--color-divider);
  color: var(--ink-55);
}

.knockout-preview-list .knockout-preview-row:last-child {
  border-bottom: 1px solid var(--color-divider);
}

.knockout-preview-row.is-placement {
  color: var(--ink-45);
}

.knockout-preview-name {
  font-size: 15px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.knockout-preview-versus {
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

.knockout-preview-label {
  font-size: 12px;
  text-align: right;
}

/* Gruppentabellen der Randspalte (11a): Haarlinien statt Rahmen. */
.rail-standing {
  display: grid;
  font-variant-numeric: lining-nums tabular-nums;
}

.rail-standing-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 56px 46px;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--color-divider);
}

.rail-standing-row.is-dimmed {
  color: var(--ink-55);
}

.rail-standing-rank {
  font-size: 12px;
  color: var(--ink-45);
}

.rail-standing-name {
  font-size: 15px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rail-standing-record {
  font-size: 14px;
  text-align: right;
}

.rail-standing-sets {
  font-size: 13px;
  text-align: right;
  color: var(--ink-60);
}

/* Zwischen 620 und 900 px ist für die Paarung noch Platz — nur das
   Ergebnisfeld rutscht in die zweite Zeile. Vorher stapelte alles ab 900 px,
   während neben den Namen noch die halbe Breite frei stand. */
@media (max-width: 900px) {
  .match-row {
    grid-template-columns: 34px minmax(0, 1fr) auto minmax(0, 1fr);
    row-gap: 8px;
  }

  /* B063: Der Gruppen-Kicker braucht seine eigene Spur. In der 34-px-Spur
     bricht „GRUPPE A" um und die Ink-Kante von „GRUPPE" (48,8 px) stößt bei
     0,8 px Abstand an den Spielernamen — Label und Name lesen sich als ein
     Wort. 56 px plus 14 px Abstand halten die beiden auseinander. */
  .match-list.has-context .match-row {
    grid-template-columns: minmax(56px, auto) minmax(0, 1fr) auto minmax(0, 1fr);
    row-gap: 8px;
  }

  /* Das Ergebnisfeld ist das fünfte Kind und landete sonst in der 34-px-Spur. */
  .match-row > .match-result-controls,
  .match-row > .quick-result {
    grid-column: 1 / -1;
    justify-self: end;
    width: 100%;
    max-width: var(--result-column);
    min-width: 0;
  }
}

/* Kein zweiter Haltepunkt: die Paarung bleibt bis ganz unten nebeneinander.
   "Yuxuan gegen Ricardo" passt auch in 390 px — die Namen brechen bei Bedarf
   innerhalb ihrer Spalte um, statt untereinander zu springen. Ein fester
   Haltepunkt hat hier dreimal zu früh gegriffen. */
@media (max-width: 620px) {

  /* Im schmalen Fenster fällt die Zeile auf zwei Spuren zusammen. Das
     Ergebnisfeld ist dann das fünfte Kind und landete in der 34-px-Spur —
     es muss über die ganze Breite gehen, sonst wird es zusammengequetscht. */
  .match-row > .normal-result-control-stack,
  .match-row > .match-result-controls,
  .match-row > .quick-result {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .normal-result-control-stack .match-result-controls {
    max-width: var(--result-column);
  }
}

@media (max-width: 1100px) {
  .work-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .work-rail {
    margin-top: 0;
  }
}

.layout {
  display: grid;
  gap: 14px;
}

.workspace-panel {
  display: grid;
  gap: 14px;
}

.workspace-panel.is-hidden {
  display: none !important;
}

/* Karten tragen keine Fläche mehr. Struktur entsteht über Haarlinien und
   Abstand, nicht über Kästen. */

.section-heading h3,

.section-heading p,
.message {
  color: var(--ink-60);
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-accent-700);
  font-weight: 650;
}

.print-document {
  display: none;
}

.round-checkpoint-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
}

.round-checkpoint-panel.is-empty {
  background: var(--color-bg);
  border-color: color-mix(in srgb, var(--color-text) 10%, transparent);
}

.round-checkpoint-panel p {
  margin: 0;
  color: var(--ink-60);
  line-height: 1.45;
}

.round-checkpoint-select-field {
  min-width: 0;
}

.ghost-button.danger {
  color: var(--color-accent-700);
  border-color: color-mix(in srgb, var(--color-accent-700) 28%, transparent);
}

.tab-chip-shell {
  flex: 0 0 220px;
  min-width: 220px;
  position: relative;
  transition: opacity 0.18s ease;
  will-change: transform;
}

.tab-chip {
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  background: transparent;
  padding: 10px 62px 10px 40px;
  border-radius: var(--radius-md);
  display: grid;
  gap: 3px;
  text-align: left;
  width: 100%;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.tab-chip.is-active {
  background: var(--color-bg);
  border-color: color-mix(in srgb, var(--color-text) 28%, transparent);
}

.tab-chip-shell.is-dragging {
  position: fixed;
  z-index: 40;
  margin: 0;
  opacity: 1;
  pointer-events: none;
  transition: none;
}

.tab-chip-shell.is-dragging .tab-chip {
  transform: rotate(-1deg) scale(1.02);
  box-shadow: 0 20px 38px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.tab-chip-placeholder {
  flex: 0 0 auto;
}

.tab-chip-placeholder-card {
  height: 100%;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--color-text) 28%, transparent);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent);
}

.tab-tool-button {
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 0.88rem;
  min-width: 0;
}

.tab-tool-button.icon-only {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
}

.tab-tool-icon {
  width: 14px;
  height: 14px;
}

.tab-tool-button.danger {
  color: var(--color-accent-700);
}

.tab-tool-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Buttons tragen Kontur, nie Fläche. Primär = Goldrand, Sekundär = Haarlinie,
   Ghost = nur Text in Gold. */
.primary-button,
.secondary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.primary-button {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.primary-button:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.primary-button:active {
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.secondary-button {
  border-color: var(--color-divider);
}

.secondary-button:hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.secondary-button:active {
  background: color-mix(in srgb, var(--color-text) 14%, transparent);
}

.ghost-button {
  color: var(--color-accent);
  padding-inline: var(--space-1);
}

.ghost-button:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.ghost-button:active {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

/* Gesperrte Hauptaktionen bleiben sichtbar und tragen den Grund daneben. */
.primary-button:disabled,
.secondary-button:disabled,
.ghost-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
}

/* Begründung neben einer gesperrten Aktion. */
.action-reason {
  font-size: 13px;
  color: var(--ink-55);
}

.action-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.race-day-shell {
  display: grid;
  gap: 10px;
}

.race-day-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 8px;
  align-content: stretch;
  min-width: min(470px, 100%);
}

.race-day-status-grid span {
  display: grid;
  gap: 3px;
  align-content: center;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--color-text) 11%, transparent);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--ink-60);
  font-size: 0.78rem;
  font-weight: 550;
  text-transform: uppercase;
}

.race-day-status-grid strong {
  color: var(--color-text);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
}

.race-day-state-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent-700);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.clicktt-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clicktt-meta-list {
  display: grid;
  gap: 6px;
  margin: 0;
}

.clicktt-meta-list div {
  display: grid;
  grid-template-columns: minmax(94px, max-content) minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.clicktt-meta-list dt {
  color: var(--ink-60);
  font-weight: 550;
}

.clicktt-meta-list dd {
  margin: 0;
  text-align: left;
  font-weight: 550;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.race-participant-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.race-participant-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 550;
  overflow-wrap: anywhere;
}

.race-participant-strip small {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  min-height: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-size: 0.68rem;
  font-weight: 600;
}

.race-round-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.race-setting-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 600;
}

.race-setting-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
}

.set-score-field {
  display: grid;
  gap: 4px;
  min-width: 160px;
}

.set-score-field span {
  color: var(--ink-60);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
}

.set-score-field input {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 0.86rem;
}

.set-score-field input.is-invalid {
  border-color: color-mix(in srgb, var(--color-accent-700) 75%, transparent);
  background: color-mix(in srgb, var(--color-accent-700) 7%, transparent);
}

.set-score-error {
  color: var(--color-accent-700);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.25;
}

.tt-race-bye-inline {
  margin: 8px 0 0;
  color: var(--color-text);
  font-size: 0.86rem;
  font-weight: 600;
}

.tt-race-bye-notice {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
  border-radius: var(--radius-md);
  background: var(--color-accent-100);
}

.tt-race-bye-notice strong {
  color: var(--color-text);
}

.tt-race-bye-notice div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tt-race-bye-notice span {
  padding: 6px 9px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.84rem;
  font-weight: 600;
}

.set-score-summary-pill {
  justify-self: end;
  min-width: 62px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  color: var(--color-text);
  text-align: center;
}

.set-score-summary-pill.has-detail {
  min-width: 90px;
  display: grid;
  gap: 2px;
  align-content: center;
  text-align: right;
}

.set-score-summary-pill strong {
  color: var(--color-text);
  font-size: 0.98rem;
  line-height: 1;
}

.set-score-summary-pill small {
  color: var(--ink-60);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
}

.set-score-summary-pill.is-empty {
  border-color: color-mix(in srgb, var(--color-text) 10%, transparent);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  color: var(--ink-60);
  font-size: 0.82rem;
  font-weight: 600;
}

.empty-round-state {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--color-text) 20%, transparent);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.empty-round-state.compact {
  min-height: 120px;
  align-content: center;
}

.tt-race-standings {
  display: grid;
  /* Ohne dies kann das Raster nicht unter die Mindestbreite der Tabelle
     schrumpfen und schiebt die Seite auf. */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

.tt-race-standings-table {
  min-width: 620px;
}

.tt-race-standings-table th,
.tt-race-standings-table td {
  white-space: nowrap;
}

.clicktt-xml-preview {
  min-height: 248px;
  max-height: 360px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--color-text) 13%, transparent);
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-surface);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre;
}

.clicktt-xml-preview code {
  font-family: "SFMono-Regular", Consolas, monospace;
}

.message-area {
  min-height: 20px;
}

/* Leere Container dürfen keinen Abstand erzeugen. */
.message-area:empty,
.config-form:empty {
  min-height: 0;
  display: none;
}

.message {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
}

.duplicate-dialog {
  width: min(680px, calc(100% - 24px));
}

.duplicate-dialog-shell {
  gap: 18px;
}

.duplicate-dialog-copy {
  margin: 0;
  color: var(--ink-60);
  line-height: 1.5;
}

.duplicate-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.duplicate-choice-button {
  min-height: 92px;
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: center;
  text-align: center;
  border-radius: var(--radius-md);
}

.duplicate-choice-button strong {
  font-size: 1.25rem;
}

.duplicate-choice-button span {
  line-height: 1.35;
}

.duplicate-dialog-footer {
  justify-content: flex-end;
}

/* click-TT Import (Phase 6): Zielformat-Wahl vor der Uebernahme. Nutzt die
   Masse des Duplizieren-Dialogs, damit beide Dialoge gleich wirken. */
.clicktt-import-field {
  display: grid;
  gap: 6px;
  font-weight: 600;
}

.clicktt-import-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 500;
}

.clicktt-import-hint {
  margin: 0;
  min-height: 2.7em;
  color: var(--ink-60);
  line-height: 1.35;
  font-size: 0.95rem;
}

.wizard-body {
  min-height: 250px;
  display: grid;
  align-content: start;
}

.wizard-participant-step {
  display: grid;
  gap: 16px;
}

.wizard-player-names {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.wizard-player-name-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: 340px;
  overflow: auto;
  padding-right: 4px;
}

/* Phase 3: eine Karte je Paar — zwei Personen, optional Geschlecht, und der
   Anzeigename darunter. Die Karte darf schmaler werden als die Namensspalte
   des Einzelrasters, damit lange Paarnamen nicht aus dem Dialog laufen. */
.wizard-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: 340px;
  overflow: auto;
  padding-right: 4px;
}

.wizard-pair-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-accent) 16%, transparent);
}

.wizard-pair-card legend {
  padding: 0 6px;
  color: var(--ink-60);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.wizard-pair-card label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wizard-pair-card input,
.wizard-pair-card select {
  min-width: 0;
  max-width: 100%;
}

.wizard-info-panel {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.wizard-info-panel strong {
  color: var(--color-text);
  font-size: 1rem;
}

.wizard-info-panel span {
  color: var(--ink-60);
  line-height: 1.45;
}

.wizard-field-grid input,
.wizard-field-grid select {
  height: 52px;
}

.wizard-checkbox-field {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.wizard-checkbox-field input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--color-text);
}

.config-form {
  display: grid;
  gap: 18px;
}

.config-form input,
.config-form select {
  height: 52px;
  line-height: 1.2;
  border-radius: var(--radius-md);
}

.config-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-60) 50%),
    linear-gradient(135deg, var(--ink-60) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.dual-names {
  display: grid;
  gap: 18px;
}

label {
  display: grid;
  gap: 8px;
  font-weight: 600;
}

label span {
  font-size: 0.95rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Felder sind transparent und tragen nur eine Haarlinie; Fokus wird gold. */
input,
select,
textarea {
  width: 100%;
  /* Ohne min-width sprengt ein select mit langen Optionen seine Spalte. */
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-size: 14px;
  caret-color: var(--color-accent);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--ink-45);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--color-accent);
  outline: none;
}

textarea {
  min-height: 90px;
  resize: vertical;
}

/* Tabellen ohne Rahmen, nur Zeilentrenner. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  padding: var(--space-2);
  text-align: left;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
  border-bottom: 1px solid var(--color-divider);
}

.data-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}

/* G9 — Eine Trennlinie hört nicht mitten in der Zeile auf. Ohne die Kopfzelle
   in dieser Ausnahme blieb unter der letzten Matrixzeile ein Strich stehen,
   der nur die Namensspalte breit war. */
.data-table tbody tr:last-child td,
.data-table tbody tr:last-child th {
  border-bottom: 0;
}

/* Marken: getönt oder Kontur, nie gefüllt-bunt. */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}

.tag-accent {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}

.tag-neutral {
  background: var(--color-neutral-200);
  color: var(--color-neutral-800);
}

.tag-outline {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Segmentschalter für zwei Optionen (DE/EN, Ja/Nein). */
.seg {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}

.seg-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
}

.seg-opt + .seg-opt {
  border-left: 1px solid var(--color-divider);
}

.seg-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.seg-opt:has(input:checked) {
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.seg-opt:not(:has(input:checked)):hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.empty-note {
  padding: 13px 0;
  font-size: 13px;
  color: var(--ink-55);
}

.name-section {
  padding: 20px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.name-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.stacked-name-grid {
  max-width: 100%;
}

.dual-names {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.double-match-list {
  display: grid;
  gap: 14px;
}

.double-config-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.double-config-header,
.double-match-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.double-config-dual {
  align-items: start;
}

.double-config-title {
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--color-text);
}

.double-match-row {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.double-match-controls {
  width: min(100%, 980px);
  flex: 1 1 760px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.double-match-row.is-complete {
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
}

.double-match-copy {
  display: grid;
  gap: 4px;
  min-width: 240px;
  flex: 1 1 320px;
}

.double-match-copy span {
  color: var(--ink-60);
}

.double-round-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.double-round-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-text);
}

.participant-import-section {
  display: grid;
  gap: 14px;
  margin-bottom: 0;
  align-content: start;
}

.participant-import-team-name {
  max-width: 100%;
}

.file-picker-button input {
  display: none;
}

.participant-import-checkbox {
  width: fit-content;
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  color: var(--ink-60);
  font-weight: 600;
}

.participant-import-checkbox input {
  width: 18px;
  height: 18px;
  padding: 0;
  accent-color: var(--color-text);
}

.participant-import-file-note,
.participant-import-empty,
.participant-import-team-note,
.participant-import-warning {
  color: var(--ink-60);
  line-height: 1.45;
}

.participant-import-file-note {
  font-size: 0.9rem;
}

.participant-import-preview {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.participant-import-summary {
  display: grid;
  gap: 6px;
}

.participant-import-summary p {
  margin: 0;
}

.participant-import-summary strong {
  color: var(--color-text);
}

.participant-import-warning {
  color: var(--color-accent-700);
}

.participant-import-list li span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.participant-import-list li.is-duplicate {
  background: color-mix(in srgb, var(--color-accent-700) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-accent-700) 26%, transparent);
}

.duplicate-badge,
.numbered-badge {
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  padding: 4px 8px;
  font-size: 0.78rem;
  font-weight: 700;
}

.duplicate-badge {
  color: var(--color-accent-700);
  background: color-mix(in srgb, var(--color-accent-700) 12%, transparent);
}

.numbered-badge {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 12%, transparent);
}

.participant-import-more {
  color: var(--ink-60);
  font-weight: 700;
}

.section-heading {
  margin-bottom: 14px;
}

.section-heading.compact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.sheet-meta {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.field-note {
  margin: 0;
  color: var(--ink-60);
  line-height: 1.5;
}

.round-backup-status {
  display: inline-grid;
  gap: 4px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  color: var(--color-text);
  text-align: left;
}

.round-backup-status strong,
.round-backup-status span {
  font-size: 0.9rem;
}

.round-backup-status span {
  color: var(--ink-60);
}

.sheet-stack {
  display: grid;
  gap: 18px;
}

.table-card,
.current-round-card,
.sheet-area,
.sheet-stack {
  min-width: 0;
}

.table-card {
  overflow: hidden;
}

.table-card,

.compact-matrix-overview {
  display: none;
}

/* Doppelrunden gehören zur sichtbaren Ergebnis-Arbeitsfläche, auch wenn
   andere kompakte Tabellenkarten nur für Spezialansichten reserviert sind. */
section.current-round-card {
  display: block;
}

.compact-matrix-cell {
  min-width: 0;
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 8px 5px;
  border-right: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  background: transparent;
  color: var(--color-text);
  font-size: clamp(0.76rem, 1.5vw, 0.95rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
}

.compact-matrix-header,
.compact-matrix-corner {
  background: var(--color-surface);
  color: var(--color-text);
}

.compact-matrix-cell.is-diagonal {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  color: var(--ink-60);
  font-size: 1.2rem;
}

.compact-matrix-cell.is-open {
  color: var(--ink-60);
}

.compact-matrix-cell.is-complete {
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  color: var(--color-text);
}

.table-wrapper {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.matrix-table,
.stats-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 580px;
}

.matrix-table {
  table-layout: auto;
}

/* G10 — Tabellen tragen keine Rahmen, nur Zeilentrenner. Der Kasten um jede
   Zelle stammt aus dem Altbestand vor dem Redesign und fällt neben jeder neu
   gebauten Tabelle auf. */
.matrix-table th,
.matrix-table td,
.stats-table th,
.stats-table td {
  border: 0;
  border-bottom: 1px solid var(--color-divider);
  padding: 8px 7px;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

/* G2 — Eine Tabelle hat eine Kopfgestalt: die Namen links werden gesetzt wie
   die Köpfe oben. */
.matrix-table thead th,
.matrix-table tbody th,
.stats-table thead th,
.stats-table tbody th {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* B127: Ein Spaltenkopf einer Rangliste ist eine Beschriftung, kein Fließtext —
   er bricht nie mitten im Wort. `overflow-wrap: anywhere` gilt weiter für die
   Werte (lange Namen sollen umbrechen statt überzulaufen), aber ein Kopf, der
   als „PLAT / Z" oder „DIFFEREN / Z" dasteht, liest sich als Fehler.
   Nebeneffekt und eigentlicher Zweck: die Mindestbreite einer Spalte trägt
   damit ihren ganzen Kopf — beim Zusammendrücken der Tabelle kann keine
   Überschrift mehr verschwinden. Die Matrixköpfe bleiben ausgenommen: dort
   stehen Spielernamen, die umbrechen dürfen und müssen (B038). */
.stats-table thead th {
  overflow-wrap: normal;
}

.matrix-table th {
  min-width: 96px;
}

.matrix-table td {
  min-width: 104px;
}

.matrix-table tbody tr {
  height: 64px;
}

.matrix-table thead th,
.stats-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}

/* Platz und Name stehen auf der Tabellenfläche, nicht auf einer getönten
   Spalte — Wert aus der gelöschten Umfärbeschicht übernommen. */
.stats-table tbody td:first-child,
.stats-table tbody td:nth-child(2) {
  background: var(--color-bg);
}

.matrix-table tbody th {
  background: var(--color-surface);
}

.matrix-name-col {
  width: 12%;
}

.matrix-score-col {
  width: auto;
}

.matrix-summary-col {
  width: 9%;
}

.matrix-table th.matrix-player-heading {
  text-align: left;
  white-space: nowrap;
}

.matrix-player-heading,
.matrix-summary-cell {
  line-height: 1.15;
}

.matrix-player-inline {
  max-width: 100%;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.matrix-summary-cell span {
  display: block;
}

.matrix-player-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.matrix-summary-cell {
  background: var(--color-bg);
  color: var(--color-text);
}

.matrix-summary-cell strong {
  display: block;
  font-size: 1rem;
}

.matrix-summary-cell span {
  margin-top: 4px;
  color: var(--ink-60);
  font-size: 0.82rem;
  font-weight: 700;
}

.matrix-place-cell.place-first strong {
  color: var(--color-text);
}

.matrix-place-cell.is-tied span {
  color: var(--color-accent-700);
}

.matrix-table td.diagonal-cell {
  background: var(--color-divider);
  color: var(--ink-70);
  font-weight: 800;
}

.score-select {
  min-width: 82px;
  min-height: 44px;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  text-align: center;
  text-align-last: center;
}

.round-plan-grid {
  display: grid;
  gap: 14px;
}

.round-control-label {
  font-weight: 700;
  color: var(--color-text);
}

.round-nav-button {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
  background: var(--color-bg);
}

.round-nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.progress-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.progress-pill,
.round-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 700;
  background: var(--color-accent-100);
  border: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.progress-pill.is-complete,
.round-status-badge.is-complete {
  background: color-mix(in srgb, var(--color-text) 12%, transparent);
  color: var(--color-text);
}

.progress-pill.is-progress,
.round-status-badge.is-progress {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent-700);
}

.progress-pill.is-pending,
.round-status-badge.is-pending {
  background: color-mix(in srgb, var(--color-neutral-500) 16%, transparent);
  color: var(--color-neutral-700);
}

.round-overview-toggle {
  margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 16%, transparent);
  border-radius: var(--radius-md);
  background: transparent;
}

.round-overview-toggle summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  list-style: none;
}

.round-overview-toggle summary::-webkit-details-marker {
  display: none;
}

.round-overview-toggle summary::after {
  content: "+";
  float: right;
  color: var(--color-text);
}

.round-overview-toggle[open] summary::after {
  content: "-";
}

.round-overview-body {
  padding: 0 16px 16px;
}

.details-toggle {
  margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 16%, transparent);
  border-radius: var(--radius-md);
  background: transparent;
}

.details-toggle summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  list-style: none;
}

.details-toggle summary::-webkit-details-marker {
  display: none;
}

.details-toggle summary::after {
  content: "+";
  float: right;
  color: var(--color-text);
}

.details-toggle[open] summary::after {
  content: "-";
}

.details-toggle-body {
  padding: 0 16px 16px;
}

.font-size-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 12px;
  margin-bottom: 12px;
}

.font-size-toolbar-label {
  color: var(--ink-60);
  font-size: 0.9rem;
  font-weight: 600;
}

.font-size-button-row {
  display: inline-flex;
  gap: 8px;
}

.font-size-button {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.font-size-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.player-stats-table-shell {
  --player-stats-font-size: 1rem;
  --player-stats-cell-padding-y: 12px;
  --player-stats-cell-padding-x: 10px;
  --player-stats-min-width: 580px;
}

/* B127: Auf dem iPad quer war die Spielerstatistik mit Doppeln 763 px breit
   (mit großer Schrift 815 px), die Arbeitsfläche bot 756 px. `max-content`
   ohne Deckel ließ die Tabelle über ihren Behälter hinauswachsen; der schnitt
   die letzte Spalte ab. Sichtbar wurde davon nur der Kopf: „DIFFERENZ" ist
   breiter als die Zahl darunter und verlor seine rechte Hälfte („DIFFERI"),
   während die mittigen Werte stehen blieben — man liest eine Spalte ohne
   Überschrift.
   `max-width: 100%` deckelt die Tabelle auf die verfügbare Breite: sie bleibt
   auf breiten Fenstern unverändert bei `max-content`, drückt sich auf engen
   auf die Spaltenmindestbreiten zusammen (die den ganzen Kopf tragen) und
   wird nirgends mehr angeschnitten. Die Schrift bleibt unangetastet. */
.player-stats-table-shell .stats-table {
  width: max-content;
  min-width: var(--player-stats-min-width);
  margin: 0 auto;
  font-size: var(--player-stats-font-size);
}

/* B130 (Rückschlag des B127-Deckels): Der Deckel gilt nur dort, wo er etwas
   einbringt. Auf dem iPad quer fehlen wenige Pixel (756 statt 761) — die holt
   das Zusammendrücken heraus, ohne dass ein Wort leidet. Auf dem Telefon
   fehlen 450: der Behälter zeigt 304 px und rollt ohnehin. Dort presste der
   Deckel die Tabelle auf ihre Mindestbreite (640 px), die mit
   `overflow-wrap: anywhere` in den Zellen erkauft wird — und aus „Christina
   Wagner" wurde „Christ / ina / Wagn / er", aus „Team A" ein zerlegtes
   „Tea / m A". Gewonnen war nichts: gerollt wird so oder so.
   Unter 768 px steht die Tabelle deshalb wieder in `max-content` und rollt in
   ihrem Behälter — ganze Wörter, ganze Köpfe. */
@media (min-width: 768px) {
  .player-stats-table-shell .stats-table {
    max-width: 100%;
  }
}

.player-stats-table-shell .stats-table th,
.player-stats-table-shell .stats-table td {
  padding: var(--player-stats-cell-padding-y) var(--player-stats-cell-padding-x);
}

.player-stats-table-shell.is-font-small {
  --player-stats-font-size: 0.9rem;
  --player-stats-cell-padding-y: 8px;
  --player-stats-cell-padding-x: 7px;
  --player-stats-min-width: 500px;
}

.player-stats-table-shell.is-font-medium {
  --player-stats-font-size: 1rem;
  --player-stats-cell-padding-y: 12px;
  --player-stats-cell-padding-x: 10px;
  --player-stats-min-width: 580px;
}

.player-stats-table-shell.is-font-large {
  --player-stats-font-size: 1.08rem;
  --player-stats-cell-padding-y: 14px;
  --player-stats-cell-padding-x: 12px;
  --player-stats-min-width: 640px;
}

.compact-select {
  width: auto;
  min-width: 92px;
}

.round-card {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.round-card.is-active-round {
  border-color: color-mix(in srgb, var(--color-accent) 42%, transparent);
  background: var(--color-accent-100);
}

.round-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.round-card h4 {
  margin: 0;
  font-family: var(--font-heading);
}

.round-pairings {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.round-pairing {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: transparent;
}

.round-pairing strong {
  color: var(--ink-60);
}

.round-pairing.is-complete {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.round-pairing.is-complete strong {
  color: var(--color-text);
}

.bye-row {
  background: color-mix(in srgb, var(--color-neutral-500) 12%, transparent);
}

.place-first td:first-child,
.place-first td:nth-child(2) {
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.place-second td:first-child,
.place-second td:nth-child(2) {
  background: color-mix(in srgb, var(--color-neutral-500) 22%, transparent);
}

.place-third td:first-child,
.place-third td:nth-child(2) {
  background: color-mix(in srgb, var(--color-accent-600) 20%, transparent);
}

.is-tied td:first-child {
  font-weight: 700;
  color: var(--color-accent-700);
}

.groups-grid,
.knockout-round-grid,
.knockout-match-grid {
  display: grid;
  gap: 18px;
}

.groups-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

.group-stage-card {
  min-width: 0;
}

.group-matrix-table,
.group-ranking-table {
  min-width: 520px;
}

/* "Qualifiziert" brach in der schmalen letzten Spalte um und machte genau
   diese eine Zeile doppelt so hoch. */
.group-ranking-table th:last-child,
.group-ranking-table td:last-child {
  white-space: nowrap;
}

.group-ranking-wrapper {
  margin-top: 16px;
}

.knockout-match-card {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--color-accent-100);
  border: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.knockout-round-focus {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.knockout-round-focus h4 {
  margin: 0;
  font-family: var(--font-heading);
}

.knockout-match-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.knockout-match-card {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.knockout-match-card div {
  display: grid;
  gap: 4px;
}

.knockout-match-card span {
  color: var(--ink-60);
}

.knockout-match-card.is-complete {
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
}

.knockout-match-stack {
  display: grid;
  gap: 8px;
}

.placement-round-focus {
  padding-top: 4px;
}

/* Phase 8: Ein Platzierungsraster kann mehrere Runden haben ("Plaetze 5-8",
   dann "Spiel um Platz 5"). Der Rundenname steht klein ueber seinem Gitter. */
.placement-round-name {
  margin: 8px 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-45);
}

.schedule-config-section {
  display: grid;
  gap: 16px;
}

.schedule-config-grid,
.field-name-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.schedule-card {
  padding: 0;
}

.schedule-toggle {
  margin-top: 0;
  border: none;
  background: transparent;
}

.schedule-toggle summary {
  padding: 20px;
}

.schedule-toggle-body {
  padding: 0 20px 20px;
}

.schedule-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.schedule-meta-row span,
.schedule-match-type {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  padding: 6px 10px;
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  color: var(--color-text);
  font-size: 0.86rem;
  font-weight: 700;
}

.schedule-match-type {
  margin-right: 8px;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent-700);
}

.schedule-table td:nth-child(4) {
  text-align: left;
}

.schedule-table tr.is-complete td {
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

.compact-schedule-list {
  display: none;
}

.tt-race-round-history {
  display: grid;
  gap: 12px;
}

.tt-race-round-history .compact-schedule-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compact-schedule-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(82px, 0.28fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: var(--radius-md);
  background: transparent;
}

.compact-schedule-row.is-complete {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.compact-schedule-row.is-bye {
  border-color: color-mix(in srgb, var(--color-accent) 24%, transparent);
  background: var(--color-accent-100);
}

.compact-schedule-row em {
  justify-self: end;
  color: var(--color-text);
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.compact-schedule-time {
  display: grid;
  gap: 4px;
}

.compact-schedule-time strong {
  color: var(--color-text);
  font-size: 1.05rem;
}

.compact-schedule-time span,
.compact-schedule-meta span {
  color: var(--ink-60);
  font-weight: 700;
}

.compact-schedule-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.compact-schedule-main > strong {
  min-width: 0;
  color: var(--color-text);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.compact-schedule-meta {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.name-section,
.participant-import-preview,
.double-config-card,
.double-match-row,
.table-card,
.round-card,
.round-pairing,
.knockout-match-card,
.details-toggle,
.round-overview-toggle,
.wizard-checkbox-field {
  border-radius: var(--radius-md);
  border-color: color-mix(in srgb, var(--color-text) 12%, transparent);
}

.name-section,
.double-config-card,
.table-card,
.knockout-match-card,
.participant-import-preview {
  background: transparent;
}

.details-toggle,
.round-overview-toggle,
.round-pairing,
.wizard-checkbox-field {
  background: var(--color-bg);
}

.progress-pill,
.round-status-badge {
  background: var(--color-bg);
  border-color: color-mix(in srgb, var(--color-text) 12%, transparent);
}

.progress-pill.is-complete,
.round-status-badge.is-complete,
.double-match-row.is-complete,
.knockout-match-card.is-complete,
.schedule-table tr.is-complete td {
  background: color-mix(in srgb, var(--color-text) 9%, transparent);
}

input,
select,
textarea,
.config-form input,
.config-form select,
.score-select {
  border-radius: var(--radius-md);
}

@media (max-width: 980px) {
  .round-robin-main-grid.is-compact,
  .round-robin-main-grid.compact-small,
  .round-robin-main-grid.compact-medium {
    grid-template-columns: 1fr;
  }

  .groups-grid,
  .knockout-match-grid {
    grid-template-columns: 1fr;
  }

  .groups-placement-toggle {
    width: 100%;
  }

  .knockout-match-card {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-card .table-wrapper {
    display: none;
  }

  .compact-schedule-list {
    display: grid;
    gap: 10px;
  }
}

@media (max-width: 980px) {
  .participant-work-head {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .participant-work-title {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .participant-tournament-name {
    min-width: 0;
    width: 100%;
  }

  .race-day-topline,
  .workspace-header,
  .sheet-toolbar,
  .summary-banner,
  .section-heading.compact {
    flex-direction: column;
    align-items: stretch;
  }

  .app-header-top,
  .app-header-switch {
    flex-direction: column;
    align-items: stretch;
  }

  .app-header-title-row,
  .step-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .workspace-view-tabs,
  .race-day-board,
  .race-day-main-grid,
  .round-checkpoint-toolbar,
  .template-toolbar {
    grid-template-columns: 1fr;
  }

  .round-checkpoint-toolbar button,
  .template-actions {
    justify-content: stretch;
  }

  .round-checkpoint-toolbar button,
  .template-actions button {
    width: 100%;
  }

  .wizard-progress,
  .wizard-field-grid.two-columns,
  .wizard-player-name-grid,
  .wizard-pair-grid {
    grid-template-columns: 1fr;
  }

  .wizard-body {
    min-height: 0;
  }

  .wizard-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .wizard-footer-actions {
    justify-content: stretch;
  }

  .wizard-footer-actions > * {
    flex: 1 1 140px;
  }

  .input-top-grid {
    grid-template-columns: 1fr;
  }

  .race-day-status-grid {
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dual-names {
    grid-template-columns: 1fr;
  }

  .duplicate-choice-grid {
    grid-template-columns: 1fr;
  }

  .double-match-controls {
    grid-template-columns: 1fr;
  }

  .compact-number-field {
    max-width: 100%;
  }

  .page-shell {
    width: min(100% - 20px, 1440px);
    margin-top: 14px;
  }

  .tab-chip {
    min-width: 0;
  }

  .round-entry-row {
    align-items: stretch;
    flex-direction: column;
  }

  .round-card-header {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  .round-robin-participant-layout {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1180px) {
  .round-robin-main-grid.compact-small {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1380px) {
  .round-robin-main-grid.compact-medium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .team-sheet-main-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .team-matrix-wrapper {
    display: block;
  }
}

/* ── Live-Ansicht (F003): feste Bühne 1920 × 1080 ────────────────────────────
   Alles unterhalb von .live-stage rechnet in px des Entwurfs. Der Bezug zum
   Fenster entsteht ausschließlich über --live-scale an .live-viewport; deshalb
   steht hier keine Medienabfrage und kein clamp(). Wer eine Größe ändert,
   ändert sie für jeden Beamer gleichzeitig — genau das ist der Zweck.        */

.live-workspace-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}

/* App-Chrome. Steht über der Bühne und wird nie projiziert (B072). */
.live-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.live-toolbar-note {
  margin: 0;
  font-size: 13px;
  color: var(--ink-55);
}

.live-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.live-ranking-limit-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--ink-62);
}

.live-ranking-limit-field select {
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: 13px;
}

.live-fullscreen-button {
  min-height: 32px;
  padding: 6px 16px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.live-fullscreen-button:hover {
  border-color: var(--color-accent);
}

/* Die Fläche misst den Platz und lässt den Rest schwarz stehen (Letterbox in
   Bühnenfarbe, nicht grau — sonst leuchtet der Rand in der Halle). */
.live-viewport {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  height: calc(100svh - 208px);
  background: var(--color-beamer);
  border-radius: var(--radius-md);
}

.live-viewport:fullscreen {
  height: 100vh;
  min-height: 100vh;
  border-radius: 0;
}

.live-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(var(--live-scale, 1));
  transform-origin: center center;
  /* Was nicht in 1080 px passt, ist ein Fehler — kein Scrollbalken (B071). */
  overflow: hidden;
  padding: 44px 64px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 28px;
  background: var(--color-beamer);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Kopfzeile: eine Zeile, Haarlinie darunter. Turnier links, Zustand rechts. */
.live-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 22%, transparent);
}

.live-head-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-head-state {
  margin: 0;
  font-size: 26px;
  color: color-mix(in srgb, var(--color-bg) 70%, transparent);
  white-space: nowrap;
}

.live-body {
  min-height: 0;
}

.live-body--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px 470px;
  gap: 48px;
  align-items: stretch;
}

/* Zwei Wertspalten brauchen mehr Breite, sonst schrumpft die Namensspur unter
   das Maß der Referenz (dort 470 px bei nur einer Wertspalte). */
.is-round-robin-live .live-body--split,
.is-team-live .live-body--split {
  grid-template-columns: minmax(0, 1fr) 1px 540px;
}

.live-body--groups {
  display: grid;
  grid-template-columns: 640px 1px minmax(0, 1fr);
  gap: 48px;
  align-items: stretch;
}

/* Live-Buehne des reinen K.-o. (Phase 1): eine einzige Spalte ueber die ganze
   Breite — es gibt keine Gruppentabellen links daneben. Ab fuenf Runden wird
   das Raster gestaucht, damit auch ein 64er-Feld auf 1080 px passt. */
.live-body--knockout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.is-knockout-live .live-bracket {
  gap: 28px;
}

/* Ab fuenf Spielen in der groessten Runde (Feld 16 aufwaerts) stapeln sich die
   Paarungen senkrecht. Gemessen am 16er-Feld: eine Paarung war 122 px hoch,
   verfuegbar waren 105 — deshalb wird hier jede Zeile einzeln geschnuert
   (Zeilenabstand im Paar, Label, Notiz, Innenabstand). */
.is-knockout-live.is-dense .live-bracket {
  gap: 14px;
}

.is-knockout-live.is-dense .live-bracket-stage {
  gap: 8px;
  /* `grid-auto-rows: 1fr` zwingt alle Zeilen auf dieselbe Hoehe; die Notiz
     („laeuft", „kampflos weiter") ragt dann heraus und legt sich auf den
     Rundennamen darunter (G12, gemessen 2026-08-28). Natuerliche Hoehen statt
     Gleichverteilung — dass alles zusammen auf 1080 px passt, prueft die
     Buehnenprobe. */
  grid-auto-rows: min-content;
  align-content: start;
}

.is-knockout-live.is-dense .live-bracket-match {
  padding-top: 5px;
}

.is-knockout-live.is-dense .live-bracket-label {
  font-size: 12px;
  margin-bottom: 1px;
}

.is-knockout-live.is-dense .live-bracket-pair {
  gap: 2px 12px;
}

.is-knockout-live.is-dense .live-bracket-name,
.is-knockout-live.is-dense .live-bracket-score {
  font-size: 19px;
}

.is-knockout-live.is-dense .live-bracket-name.is-origin {
  font-size: 17px;
}

.is-knockout-live.is-dense .live-bracket-note {
  font-size: 12px;
  margin-top: 1px;
}

/* Die Siegerspalte wird NICHT mitgeschnuert: sie hat als einzige Spalte nur
   drei Zeilen und dafuer die volle Buehnenhoehe. Ohne diese Ausnahme erben
   Label und Notiz die engen Werte von oben, und die grosse Siegerschrift legt
   sich mit ihren Unterlaengen auf beide (G12, gemessen 2026-08-28: 21 px am
   offenen „?", 163 px am gesetzten Siegernamen). */
.is-knockout-live.is-dense .live-bracket-champion {
  font-size: 40px;
  line-height: 1.3;
}

.is-knockout-live.is-dense .live-bracket-champion.is-open {
  font-size: 56px;
  line-height: 1.3;
}

.is-knockout-live.is-dense .live-bracket-winner .live-bracket-label {
  font-size: 18px;
  margin-bottom: 12px;
}

.is-knockout-live.is-dense .live-bracket-winner .live-bracket-note {
  font-size: 18px;
  margin-top: 16px;
}

.live-hairline {
  background: color-mix(in srgb, var(--color-bg) 18%, transparent);
  height: 100%;
  width: 1px;
}

.live-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.live-column--with-head {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.live-column-title {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-bg);
}

/* ── Tabelle als Hauptelement (Antonio, 2026-09-02) ──────────────────────────
   Die Bühne des Schweizer Systems zeigt zuerst die ganze Tabelle; die
   laufende Runde ist eine Auszeichnung IN der Zeile, kein zweiter Block
   daneben. Darunter steht die Runde noch einmal einzeilig als
   Tischübersicht. Alle Größen sind Bühnen-px wie überall hier.            */

.live-body--table {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 24px;
  min-height: 0;
}

.live-table {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

/* Zeilen teilen sich die freie Höhe: dieselbe Mechanik trägt 6 wie 16
   Zeilen, ohne dass eine Schriftgröße wandert (B071). */
.live-table-body {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0;
}

/* Ohne die Spalte „Runde N" gehen ihre 470 px + 20 px Abstand an die
   Namensspalte (`minmax(0, 1fr)`) — keine Schriftgröße wandert dafür. */
.live-table-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 110px 120px 130px 120px;
  gap: 20px;
  align-items: center;
  padding: 3px 16px;
  line-height: 1.15;
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 14%, transparent);
}

/* Die TTR-Spalte steht nur da, wenn die Arbeitsansicht sie füllen kann. */
.live-table.is-with-rating .live-table-row {
  grid-template-columns: 70px minmax(0, 1fr) 96px 110px 120px 130px 120px;
}

.live-table-row.is-head {
  padding-top: 0;
  padding-bottom: 10px;
  border-top: 0;
  align-items: baseline;
  font-size: 19px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-bg) 55%, transparent);
}

.live-table-row .is-numeric {
  text-align: right;
}

.live-table-place {
  font-family: var(--font-heading);
  font-size: 30px;
  color: var(--color-accent-300);
}

/* 30px ist die Lesegrenze aus 6 m — dieselbe Größe, die vorher die Namen der
   Paarungen trugen. Kleiner wird die Tabelle nicht. */
.live-table-name {
  font-size: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-table-value {
  font-size: 26px;
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-table-value.is-lead {
  font-size: 30px;
  color: var(--color-bg);
}

.live-table-value.is-muted {
  color: color-mix(in srgb, var(--color-bg) 62%, transparent);
}

/* Spielfrei ist kein Spiel und taucht in keiner Paarung auf — die Zeile sagt
   es deshalb selbst, klein und neben dem Namen. */
.live-table-bye {
  margin-left: 16px;
  /* 24 px, nicht 20: bei Faktor 0,64 (1440 × 900) stünden 20 px mit 12,8 px am
     Schirm — unter der 14-px-Grenze, gemessen in der Handyprobe. */
  font-size: 24px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-bg) 55%, transparent);
  white-space: nowrap;
}

/* Wer gerade spielt, trägt die Akzentleiste. Der Grund liegt innen (inset),
   damit die Spalten aller Zeilen bündig bleiben. */
.live-table-row.is-playing {
  background: color-mix(in srgb, var(--color-accent-300) 12%, transparent);
  box-shadow: inset 5px 0 0 var(--color-accent-300);
}

/* Die Paarungsliste unter der Tabelle: kompakt, zweitrangig, aber vollständig. */
.live-pairings {
  min-height: 0;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 22%, transparent);
}

.live-pairings-title {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 400;
  color: color-mix(in srgb, var(--color-bg) 70%, transparent);
}

.live-pairings .live-match-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
}

/* Tische / Paarungen. Namen links, Ergebnis rechts in fester Spur — der Grund,
   warum sich hier nichts mehr überdrucken kann (B023, B069). */
.live-match-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 44px;
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0;
}

.live-match-grid.is-single-column {
  grid-template-columns: minmax(0, 1fr);
}

/* Freilos-Zeile: In der rechten Spalte steht hier kein Satzstand („3:0"),
   sondern Text („+1 Punkt"). Bei 40px Überschriftenschnitt braucht der rund
   140px — in den festen 118px der Ergebnisspalte wurde er auf „+1 Pu…"
   abgeschnitten (Bühnenprobe Phase 15, ungerades Feld). Nur diese Zeile
   bekommt mehr Platz; jede Ergebniszeile bleibt, wo sie war. */
.live-match.is-bye {
  grid-template-columns: minmax(0, 1fr) auto;
}

.live-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 20px;
  align-items: center;
  padding: 14px 0 16px;
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent);
  min-width: 0;
}

.live-match-main {
  min-width: 0;
}

.live-match-kicker {
  display: block;
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-match-name {
  display: block;
  font-size: 30px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-match-name.is-second {
  color: color-mix(in srgb, var(--color-bg) 76%, transparent);
}

/* Einzeilig: Tisch und beide Spieler in einer Zeile. Der Kicker steht dann
   nicht mehr über, sondern vor den Namen. */
.live-match-grid.is-single-line .live-match {
  padding: 6px 0;
  grid-template-columns: minmax(0, 1fr) auto;
}

.live-match-grid.is-single-line .live-match-main {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.live-match-grid.is-single-line .live-match-kicker {
  display: inline;
  margin-bottom: 0;
  flex: none;
}

.live-match-name.is-pair {
  font-size: 26px;
}

.live-match-grid.is-single-line .live-match-result {
  font-size: 30px;
}

.live-match-grid.is-single-line .live-match-result.is-open {
  font-size: 22px;
}

.live-match-result {
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-match-result.is-open {
  font-family: var(--font-body);
  font-size: 24px;
  color: color-mix(in srgb, var(--color-bg) 55%, transparent);
}

/* Stand. Zeilen teilen sich die Höhe gleichmäßig — dieselbe Mechanik trägt
   4 wie 22 Zeilen, ohne eine einzige Größe zu ändern. */
.live-standing {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0;
}

.live-standing-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 76px 96px;
  gap: 16px;
  align-items: center;
  padding: 7px 0;
  line-height: 1.15;
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 14%, transparent);
}

.live-standing.is-two-value .live-standing-row {
  grid-template-columns: 46px minmax(0, 1fr) 56px;
}

.live-standing-place {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--color-accent-300);
}

.live-standing-name {
  font-size: 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-standing-value {
  font-size: 25px;
  text-align: right;
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-standing-value.is-muted {
  color: color-mix(in srgb, var(--color-bg) 62%, transparent);
}

.live-standing-more {
  margin: 10px 0 0;
  font-size: 20px;
  color: color-mix(in srgb, var(--color-bg) 55%, transparent);
}

/* Teamzähler über dem Stand: die zwei Zahlen, auf die alle schauen. */
.live-team-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  justify-items: center;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 22%, transparent);
}

.live-team-score-entry {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
}

.live-team-score-name {
  font-size: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
}

.live-team-score-entry.is-leading .live-team-score-name {
  color: var(--color-accent-300);
}

.live-team-score-value {
  font-family: var(--font-heading);
  font-size: 52px;
  line-height: 1;
}

.live-team-score-separator {
  font-family: var(--font-heading);
  font-size: 40px;
  color: color-mix(in srgb, var(--color-bg) 45%, transparent);
}

/* 4b — Endstand: Sieger nimmt die Fläche, alle Plätze als Fußzeile. */
.live-body--final {
  display: grid;
  gap: 32px;
  align-content: space-between;
}

.live-winner-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 56px;
}

.live-winner-kicker {
  margin: 0 0 10px;
  font-size: 24px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}

.live-winner-name {
  margin: 0;
  font-family: var(--font-body);
  font-size: 84px;
  line-height: 1;
  font-weight: 400;
  overflow-wrap: break-word;
  hyphens: auto;
}

.live-winner-stats {
  margin: 0;
  font-size: 30px;
  text-align: right;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-bg) 74%, transparent);
}

.live-final-tables {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  column-gap: 44px;
  align-items: stretch;
  min-height: 0;
}

.live-final-table {
  min-width: 0;
}

.live-final-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 112px 92px 124px;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 16%, transparent);
}

.live-final-row.is-head {
  padding: 0 0 10px;
  border-top: 0;
  font-size: 19px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-bg) 55%, transparent);
}

.live-final-row .is-numeric {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-final-row .is-numeric.is-muted {
  font-size: 26px;
  color: color-mix(in srgb, var(--color-bg) 74%, transparent);
}

.live-final-row.is-head .is-numeric.is-muted {
  font-size: 19px;
}

.live-final-place {
  font-family: var(--font-heading);
  font-size: 30px;
  color: var(--color-accent-300);
}

.live-final-name {
  font-size: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-final-row > span:nth-child(3) {
  font-size: 28px;
}

.live-footnote {
  margin: 0;
  font-size: 22px;
  color: color-mix(in srgb, var(--color-bg) 55%, transparent);
}

/* 6a — Gruppen + KO. */
.live-groups {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: 36px;
  min-height: 0;
}

.live-group {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.live-group .live-column-title {
  margin: 0 0 12px;
  font-size: 36px;
}

.live-group .live-standing-row {
  padding: 4px 0;
  border-top-color: color-mix(in srgb, var(--color-bg) 16%, transparent);
}

.live-standing-row.is-qualified .live-standing-place,
.live-standing-row.is-qualified .live-standing-name {
  color: var(--color-accent-300);
}

.live-standing-row.is-out .live-standing-place,
.live-standing-row.is-out .live-standing-name,
.live-standing-row.is-out .live-standing-value {
  color: color-mix(in srgb, var(--color-bg) 45%, transparent);
}

/* Dichte Fassung: mehr als zwei Gruppen oder mehr als 16 Zeilen links. */
.is-dense .live-groups {
  gap: 24px;
}

.is-dense .live-group .live-column-title {
  margin: 0 0 8px;
  font-size: 28px;
}

.is-dense .live-standing-name,
.is-dense .live-standing-value {
  font-size: 21px;
}

.is-dense .live-standing-place {
  font-size: 22px;
}

.live-bracket {
  display: grid;
  gap: 40px;
  align-items: stretch;
  min-height: 0;
}

.live-bracket-stage {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: 32px;
  min-height: 0;
}

.live-bracket-match {
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 22%, transparent);
  padding-top: 14px;
  min-width: 0;
}

.live-bracket-label {
  display: block;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: 10px;
}

.live-bracket-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  gap: 16px;
  align-items: baseline;
}

.live-bracket-name {
  font-size: 34px;
  line-height: 1.15;
  overflow-wrap: break-word;
  hyphens: auto;
}

.live-bracket-name.is-second {
  color: color-mix(in srgb, var(--color-bg) 80%, transparent);
}

.live-bracket-name.is-origin {
  font-size: 28px;
  color: color-mix(in srgb, var(--color-bg) 45%, transparent);
}

.live-bracket-score {
  font-family: var(--font-heading);
  font-size: 34px;
  text-align: right;
}

.live-bracket-score.is-second {
  color: color-mix(in srgb, var(--color-bg) 80%, transparent);
}

.live-bracket-note {
  display: block;
  margin-top: 8px;
  font-size: 20px;
  color: color-mix(in srgb, var(--color-bg) 50%, transparent);
}

.live-bracket-winner {
  border-left: 1px solid color-mix(in srgb, var(--color-bg) 22%, transparent);
  padding-left: 32px;
  min-width: 0;
}

.live-bracket-champion {
  display: block;
  font-family: var(--font-heading);
  font-size: 56px;
  line-height: 1.05;
  color: var(--color-accent-300);
  overflow-wrap: break-word;
  hyphens: auto;
}

.live-bracket-champion.is-open {
  font-size: 96px;
  line-height: 1;
  color: color-mix(in srgb, var(--color-accent) 34%, transparent);
}

.live-bracket-winner .live-bracket-note {
  margin-top: 14px;
  font-size: 22px;
  color: color-mix(in srgb, var(--color-bg) 55%, transparent);
}

.live-empty-state {
  margin: 0;
  font-size: 26px;
  color: color-mix(in srgb, var(--color-bg) 55%, transparent);
}

/* ── Handy-Hochformat: dieselbe Bühne, gestapelt ─────────────────────────────
   Unter 900 px — dieselbe Grenze, an der auch die Arbeitsansichten umbrechen —
   wird die Bühne nicht weiter geschrumpft, sondern durch eine fließende Liste
   ersetzt. Der Grund ist Arithmetik: bei 375 px Fensterbreite steht
   `--live-scale` bei 0,195, ein 30-px-Name der Bühne wäre sechs Pixel hoch.

   Übernommen sind die Reihenfolge (Kopf, laufende Runde, Rangliste), die
   Farbwelt der Bühne und ihre Haarlinien. Die Schriftgrößen kommen dagegen aus
   der Arbeitsansicht (20/17/16/15/13 px), weil ein Handy in Armlänge gelesen
   wird und nicht aus der Halle.                                              */

.live-mobile {
  display: none;
  padding: var(--space-4) var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-beamer);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-variant-numeric: lining-nums tabular-nums;
}

.live-mobile-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 22%, transparent);
}

.live-mobile-title {
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}

.live-mobile-state {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-bg) 70%, transparent);
  text-wrap: pretty;
}

.live-mobile-section-title {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--color-bg);
}

.live-mobile-kicker {
  display: block;
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}

/* Eine Karte je Spiel: Tisch, beide Namen, Ergebnis. Das Ergebnis steht in
   einer eigenen Spur — derselbe Grund wie auf der Bühne (B023, B069). */
.live-mobile-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0 10px;
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent);
}

.live-mobile-match-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Namen brechen hier, statt zu kürzen: auf der Bühne kostet eine zweite Zeile
   die ganze Höhe, am Handy nur eine Zeile Scrollweg. */
.live-mobile-match-name {
  font-size: 17px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.live-mobile-match-name.is-second {
  color: color-mix(in srgb, var(--color-bg) 76%, transparent);
}

/* Einzeilig wie auf der Bühne: Tisch vor den Namen, beide Spieler nebeneinander.
   Umbrechen darf die Zeile trotzdem — 375 px sind schmal. */
.live-mobile-matches.is-single-line .live-mobile-match-main {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.live-mobile-matches.is-single-line .live-mobile-kicker {
  margin-bottom: 0;
}

.live-mobile-match-name.is-pair {
  font-size: 15px;
}

.live-mobile-match-result {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}

.live-mobile-match-result.is-open {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: color-mix(in srgb, var(--color-bg) 55%, transparent);
}

/* Rangliste: Platz, Name und der wichtigste Wert in einer Zeile, alles Weitere
   beschriftet darunter. Vier Zahlenspalten nebeneinander passen auf 375 px
   nicht, und „+4" allein wäre nicht deutbar. */
.live-mobile-standing-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  column-gap: var(--space-2);
  align-items: baseline;
  padding: 6px 0 7px;
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 14%, transparent);
}

.live-mobile-standing-place {
  grid-row: span 2;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-accent-300);
}

.live-mobile-standing-name {
  font-size: 16px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.live-mobile-standing-value {
  font-size: 15px;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
}

/* Bilanz und Sätze sind Inhalt, keine Beschriftung — deshalb 14 px, nicht 13.
   Auf 13 px lagen sie genau auf der Grenze der Handyprobe. */
.live-mobile-standing-meta {
  grid-column: 2 / span 2;
  font-size: 14px;
  line-height: 1.3;
  color: color-mix(in srgb, var(--color-bg) 62%, transparent);
}

/* Wie auf der Bühne: nur die Markierung, nicht die Auskunft. */
.live-mobile-standing-bye {
  margin-left: 8px;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-bg) 55%, transparent);
  white-space: nowrap;
}

.live-mobile-standing-row.is-playing,
.live-mobile-standing-row.is-round-done,
.live-mobile-standing-row.is-round-bye {
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 -10px;
}

.live-mobile-standing-row.is-playing {
  background: color-mix(in srgb, var(--color-accent-300) 12%, transparent);
  box-shadow: inset 4px 0 0 var(--color-accent-300);
}

.live-mobile-standing-row.is-playing .live-mobile-standing-bye {
  color: var(--color-accent-300);
}

/* Ohne zweite Wertspalte gibt es keine Zeile darunter — sonst stünde eine
   leere Zeile unter jedem Namen. */
.live-mobile-standing-meta:empty {
  display: none;
}

.live-mobile-winner {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-4);
}

.live-mobile-winner-name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  overflow-wrap: break-word;
  hyphens: auto;
}

.live-mobile-winner-detail {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-bg) 74%, transparent);
  text-wrap: pretty;
}

.live-mobile-winner-detail:empty {
  display: none;
}

.live-mobile-note {
  margin: var(--space-3) 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-bg) 55%, transparent);
  text-wrap: pretty;
}

.live-mobile-empty {
  margin: var(--space-2) 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-bg) 55%, transparent);
  text-wrap: pretty;
}

/* Die Regel greift bis einschließlich 1024 px, die Bühne beginnt bei 1025 px
   — vorher lag die Grenze bei 899/900 px. Grund: das iPad quer (1024 × 768)
   hat für die Bühne nur 560 px Höhe, der Skalierungsfaktor fällt auf 0,44 und
   ein 24-px-Text der Bühne steht dann mit 10,7 px am Schirm — gemessen, nicht
   geschätzt. Bis 1024 px entscheidet Lesbarkeit, nicht Gerätename: die
   gestapelte Liste. Ab 1025 px trägt die Bühne wieder 14 px aufwärts. */
@media (max-width: 1024px) {
  /* Die Leiste gehört zur Bühne: „Vollbild öffnen" und die Platzwahl haben
     ohne Bühne kein Ziel, deshalb verschwinden sie mit ihr. */
  .live-toolbar,
  .live-viewport {
    display: none;
  }

  .live-mobile {
    display: block;
  }
}

@media print {
  body {
    background: var(--color-bg);
  }

  .page-shell {
    width: 100%;
    margin: 0;
  }

  .race-day-shell,
  .participant-import-section,
  #modeChooser,
  #configForm,
  #messageArea {
    display: none !important;
  }

  .card,
  .table-card,

  .step-card {
    padding: 16px;
    break-inside: avoid;
  }

  .layout {
    gap: 10px;
  }
}

.scoring-rules-toggle {
  border: 1px solid color-mix(in srgb, var(--color-accent) 16%, transparent);
  border-radius: var(--radius-md);
  background: transparent;
}

.scoring-rules-toggle summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.scoring-rules-toggle summary::-webkit-details-marker {
  display: none;
}

.scoring-rules-toggle summary span {
  color: var(--color-text);
  font-size: 0.88rem;
}

.scoring-rules-body {
  padding: 0 16px 16px;
  display: grid;
  gap: 14px;
}

.scoring-points-grid,
.scoring-order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

/* Phase 2: Das Wertungsprofil steht über den Einzelfeldern, weil es sie trägt. */
.scoring-profile-field {
  display: grid;
  gap: 6px;
}

.scoring-profile-field select {
  width: 100%;
}

/* Bei einem Länderprofil sind die Einzelfelder Anzeige, nicht Eingabe. */
.scoring-rules-body select:disabled,
.scoring-rules-body input:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.player-config-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.42fr);
  gap: 10px;
  align-items: end;
}

.participant-status-field {
  min-width: 0;
}

.participant-status-select,
.match-status-select {
  width: 100%;
}

.match-result-controls .score-select {
  width: 100%;
}

.matrix-table .score-select {
  min-height: 36px;
  height: 36px;
  padding: 6px 5px;
}

.matrix-table .match-result-controls {
  width: 100%;
  margin-inline: auto;
}

.matrix-table .match-result-controls {
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  align-items: center;
  min-width: 0;
  max-width: 92px;
}

.matrix-table .match-anomaly-trigger {
  width: 100%;
  height: 12px;
  min-height: 12px;
  padding: 0;
  border-color: transparent;
  color: color-mix(in srgb, var(--color-text) 38%, transparent);
  background: transparent;
  font-size: 0;
}

.matrix-table .match-anomaly-trigger::before {
  content: "";
  display: block;
  width: min(42px, 72%);
  height: 3px;
  border-radius: var(--radius-md);
  background: currentColor;
}

.matrix-table .match-anomaly-control.is-active .match-anomaly-trigger,
.matrix-table .match-anomaly-trigger:hover,
.matrix-table .match-anomaly-trigger:focus-visible {
  border-color: transparent;
  color: var(--color-accent-800);
  background: color-mix(in srgb, var(--color-accent-600) 5%, transparent);
}

/* Sonderstatus als Marke unter dem Feld — 11 px, getönt, wie alle Marken. */
.match-status-line {
  grid-column: 1 / -1;
  margin-top: 2px;
  text-align: right;
}

.match-status-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 3px;
  background: var(--color-accent-100);
  border: 1px solid var(--color-accent-300);
  color: var(--color-accent-800);
  font-size: 11px;
  line-height: 1.3;
}

.player-name-with-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.player-name-with-status.is-withdrawn {
  color: var(--ink-60);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.player-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
  background: transparent;
  color: var(--ink-60);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.player-status-badge.is-withdrawn {
  border-color: color-mix(in srgb, var(--color-accent-700) 25%, transparent);
  background: color-mix(in srgb, var(--color-accent-700) 10%, transparent);
  color: var(--color-accent-700);
}

.player-status-badge.is-missing {
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-700);
}

@media (min-width: 760px) {
  .normal-result-control-stack {
    grid-template-columns: minmax(190px, 1fr) minmax(116px, 180px);
    gap: 8px 10px;
  }

  .normal-result-control-stack .match-result-controls {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .normal-set-score-field {
    grid-column: 1;
    grid-row: 1;
  }

  .round-entry-row:has(.normal-result-control-stack) {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 42%);
  }
}

@media (max-width: 720px) {
  .page-shell {
    width: auto;
    margin: 10px;
  }

  .workspace-primary-actions,
  .app-header-actions,

  #openTournamentWizardBtn {
    grid-column: 1 / -1;
  }

  .workspace-primary-actions button,
  .app-header-actions button,

  .workspace-view-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .view-tab-button {
    min-height: 42px;
    padding: 8px 6px;
  }

  .view-tab-title {
    font-size: 0.84rem;
  }

  .tab-chip-shell {
    flex-basis: 210px;
    min-width: 210px;
  }

  .race-day-topline,
  .race-day-panel,
  .race-day-panel-header {
    align-items: stretch;
  }

  .race-day-status-grid,
  .race-round-control {
    grid-template-columns: 1fr;
  }

  .clicktt-import-actions {
    flex-direction: column;
  }

  .race-command-actions,
  .race-command-actions button {
    width: 100%;
  }

  .race-command-meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tt-race-roster-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .tt-race-roster-rating,
  .tt-race-roster-status,
  .tt-race-roster-row button {
    grid-column: 2;
  }

  .clicktt-import-actions button {
    width: 100%;
  }

  .clicktt-xml-preview {
    min-height: 180px;
    max-height: 240px;
    font-size: 0.72rem;
  }

  .workspace-header p,
  .view-tab-copy,
  .step-header p {
    overflow-wrap: anywhere;
  }

  .player-config-row {
    grid-template-columns: 1fr;
  }

  .match-result-controls {
    min-width: 116px;
  }

  .normal-result-control-stack {
    max-width: none;
  }

  .round-robin-matrix-card.is-compact {
    padding: 16px;
  }

  .compact-matrix-cell {
    min-height: 48px;
    padding: 6px 3px;
    font-size: 0.72rem;
  }

  .round-robin-matrix-card.is-compact .matrix-table th,
  .round-robin-matrix-card.is-compact .matrix-table td {
    padding: 7px 4px;
    font-size: 0.78rem;
    line-height: 1.15;
  }

  .matrix-table tbody tr {
    height: 58px;
  }

  .round-robin-matrix-card.is-compact .matrix-table .match-result-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    max-width: 86px;
  }

  .round-robin-matrix-card.is-compact .matrix-table .score-select {
    min-height: 34px;
    padding: 5px 2px;
    font-size: 0.82rem;
  }

  .round-robin-matrix-card.is-compact .matrix-table .match-anomaly-trigger {
    width: 100%;
    height: 11px;
    min-height: 11px;
    font-size: 0;
  }

  .round-entry-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .tt-race-score-area {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .set-score-summary-pill {
    justify-self: end;
  }

  .table-wrapper {
    margin-inline: -10px;
    padding-inline: 10px;
  }

  .matrix-table,
  .stats-table {
    min-width: 520px;
  }

  .tt-race-standings-table {
    min-width: 560px;
  }

  .round-entry-row .match-result-controls,
  .round-entry-row .score-select {
    width: 100%;
    max-width: none;
  }

  .compact-schedule-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .compact-schedule-row > .round-status-badge {
    justify-self: start;
  }
}

.tab-chip,
.name-section,
.participant-import-preview,
.double-config-card,
.double-match-row,
.table-card,
.round-card,
.round-pairing,
.knockout-match-card,
.details-toggle,
.round-overview-toggle,
.wizard-checkbox-field {
  border-radius: var(--radius-md);
}

/* Zurück und Vor stehen als stilles Paar in der Randspalte. */
.rail-history {
  display: inline-flex;
  gap: var(--space-3);
}

/* 2cv2 — Vereinsquote als getönter Hinweis in der Randspalte. */
.quota-notice {
  padding: var(--space-3);
  border: 1px solid var(--color-accent-300);
  border-radius: var(--radius-md);
  background: var(--color-accent-100);
}

.quota-notice-heading {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-800);
}

.quota-notice-text {
  margin: 0;
  font-size: 13px;
  color: var(--color-accent-900);
}

.quota-notice-text + .quota-notice-text {
  margin-top: var(--space-1);
}

/* ── Vollmatrix (9a) ─────────────────────────────────────────────────── */

.grid-matrix {
  margin-top: 14px;
  width: 100%;
  /* Ohne Mindestbreite quetscht `table-layout: fixed` die Spalten bis zur
     Unlesbarkeit, statt das `overflow-x: auto` des Rahmens auszulösen —
     gemessen bis auf 29 px je Spalte bei 390 px Fensterbreite. */
  min-width: 580px;
  border-collapse: collapse;
  /* Feste Spalten: sonst richtet sich die Breite nach dem Inhalt und die
     Spalten werden unterschiedlich breit. */
  table-layout: fixed;
}

/* Ohne eigene Breite teilen sich die Spielerspalten den Restplatz zu
   gleichen Teilen — die Matrix passt damit immer ins Fenster. */
.grid-matrix th,
.grid-matrix td {
  padding: 6px 4px;
  font-size: 13px;
}

/* G3 — Sichtbarer Text wird nie abgeschnitten. Die Namensspalte darf umbrechen;
   zweizeilig ist richtig, „Maximilian Freiherr von Bodels…" ist falsch. Die
   Mindestbreite in ch statt in Prozent, damit sie an der Schrift hängt und
   nicht an der Fensterbreite. */
.grid-matrix th:first-child,
.grid-matrix td:first-child {
  /* Feste Breite, nicht `1%`: bei `table-layout: fixed` wird aus 1% wirklich
     1% — der Name lief dann sichtbar über die Nachbarspalte und überdruckte
     das erste Ergebnis ("MAT1:1IS"). 20ch fasst "1 Christina Wagner" in einer
     Zeile; längere Namen brechen um, die Nummer bleibt vor der ersten Zeile. */
  width: 20ch;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

.grid-matrix th.is-centered {
  text-align: center;
  overflow-wrap: anywhere;
}

/* G2 — Eine Tabelle hat eine Kopfgestalt. Zeilen- und Spaltenköpfe benennen
   beide einen Teilnehmer und werden deshalb gleich gesetzt: 11 px, Versalien,
   gesperrt, wie jede Tabellenkopfzeile des Systems. Vorher waren die oben
   13 px und die links 11 px — auf dem Bild zwei verschiedene Dinge. */
.grid-matrix thead th,
.grid-matrix .matrix-player-cell {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.matrix-cell {
  text-align: center;
  border-bottom: 1px solid var(--color-divider);
}

/* Alle Matrixzeilen sind gleich hoch. Ohne das ist die oberste Zeile — sie
   besteht nur aus Eingabefeldern — höher als die Zeilen darunter, die
   gespiegelten Text tragen. Auf dem Bild fällt genau diese eine Zeile auf.
   `height` wirkt an Tabellenzeilen als Mindestmaß, deshalb reicht ein Wert
   oberhalb der Feldhöhe. Geprüft von layout-invarianten.mjs. */
.grid-matrix tbody tr,
.grid-matrix tbody td {
  height: 44px;
}

/* Die Diagonale ist getönt, nicht beschriftet. */
.matrix-cell.is-diagonal {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* Die gespiegelte Gegenseite tritt zurück. */
.matrix-cell.is-mirrored {
  color: var(--ink-45);
}

.matrix-cell.is-open {
  font-size: 12px;
  color: var(--ink-38);
}

/* Ein nacktes Feld je Zelle: Rahmen erst beim Überfahren oder im Fokus. */
.matrix-input {
  width: 100%;
  min-width: 0;
  min-height: 26px;
  /* Ohne seitlichen Innenabstand bleibt auch in schmalen Spalten Platz
     für "offen" und für ein Ergebnis wie 3:0. */
  padding: 3px 0;
  border-color: transparent;
  background: transparent;
  text-align: center;
  font-size: 13px;
}

.matrix-input::placeholder {
  color: var(--ink-38);
  font-size: 11px;
}

.grid-matrix td.matrix-cell {
  padding-inline: 2px;
}

.matrix-cell.is-editable:hover .matrix-input {
  border-color: var(--color-divider);
}

.matrix-input:focus-visible {
  border-color: var(--color-accent);
}

.matrix-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-60);
}

.matrix-cell.is-editable .quick-result-input:focus-visible {
  border-color: var(--color-accent);
}

/* 3d — Zusammenfassung als Zeilen mit ändern-Link. */
.wizard-summary {
  display: grid;
}

.wizard-summary-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 72px;
  gap: var(--space-3);
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--color-divider);
}

.wizard-summary-row:last-child {
  border-bottom: 1px solid var(--color-divider);
}

.wizard-summary-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.wizard-summary-value {
  font-size: 17px;
}

.wizard-summary-note {
  display: block;
  font-size: 13px;
  color: var(--ink-55);
}

.wizard-summary-change {
  justify-self: end;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wizard-summary-fixed {
  justify-self: end;
  font-size: 13px;
  color: var(--ink-38);
}

/* B135: Auf dem Telefon ließen feste 150/72-px-Randspalten dem eigentlichen
   Wert nur etwa 53 px. Label und Aktion bleiben in der Kopfzeile; der Wert
   bekommt darunter die volle Breite. Querformat und größere Geräte behalten
   das kompakte Drei-Spalten-Raster. */
@media (max-width: 620px) {
  .wizard-summary-row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    row-gap: 4px;
  }

  .wizard-summary-value {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }

  .wizard-summary-change,
  .wizard-summary-fixed {
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
  }
}

/* ── 8a — Aufstellung Teamwettbewerb ─────────────────────────────────── */

.team-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
}

/* Eine senkrechte Haarlinie trennt die beiden Mannschaften. */
.team-split > .team-column + .team-column {
  padding-left: 44px;
  border-left: 1px solid var(--color-divider);
  margin-left: -22px;
}

.team-column {
  min-width: 0;
}

.team-column-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-3);
}

.team-name-field,
.team-count-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.team-name-field > span,
.team-count-field > span {
  font-size: 13px;
  color: var(--ink-70);
}

.team-count-field input {
  text-align: right;
}

.team-roster-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto 16px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--color-divider);
}

.team-roster-row:last-child {
  border-bottom: 1px solid var(--color-divider);
}

.team-roster-row.is-muted {
  opacity: 0.55;
}

/* Der Name ist direkt editierbar, wirkt aber wie Text bis man ihn anfasst. */
.team-roster-name {
  border-color: transparent;
  background: transparent;
  padding: 4px 6px;
  font-size: 15px;
}

.team-roster-row:hover .team-roster-name,
.team-roster-name:focus-visible {
  border-color: var(--color-divider);
}

.team-roster-name:focus-visible {
  border-color: var(--color-accent);
}

.team-roster-status {
  font-size: 13px;
  color: var(--ink-55);
}

.team-column-actions {
  margin-top: var(--space-3);
}

.team-paste {
  margin-top: var(--space-3);
}

.team-doubles {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

@media (max-width: 900px) {
  .team-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .team-split > .team-column + .team-column {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
    border-top: 1px solid var(--color-divider);
    padding-top: var(--space-4);
  }
}

/* Satzdetails stehen unter dem Gesamtergebnis in der Zelle. */
.matrix-sets {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--ink-55);
}

.matrix-cell.is-mirrored .matrix-sets {
  color: var(--ink-38);
}

/* Fehlgeschlagenes Speichern: steht, bis es behoben ist. Getönte Warnfläche
   statt der stillen Hinweisleiste — hier geht es um Datenverlust. */
.storage-alert {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  padding: var(--space-3);
  border: 1px solid var(--color-accent-700);
  border-radius: var(--radius-md);
  background: var(--color-accent-100);
  color: var(--color-accent-900);
}

.storage-alert strong {
  font-family: var(--font-heading);
  font-size: 17px;
}

.storage-alert p {
  margin: 0;
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.5;
}

/* Bestätigung der Sicherung innerhalb der stehenden Warnung — die Warnung
   bleibt, die Rückmeldung darf sie nicht verdrängen. */
.storage-alert-note {
  font-weight: 600;
}

.storage-alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Der Rundenbackup-Status lag bisher in einem dauerhaft versteckten Block
   (B056). In der Randspalte ist er eine Zeile unter der Überschrift, kein
   zweiter Kasten neben dem Rundenstände-Panel. */
.work-rail .round-backup-status {
  display: grid;
  gap: 2px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: none;
}

.work-rail .round-backup-status strong,
.work-rail .round-backup-status span {
  font-size: 13px;
  line-height: 1.45;
}

/* Checkpoints, die nicht mehr abgelegt werden können: kein Toast, sondern
   ein Dauerzustand an der Stelle, wo die Sicherungen stehen (B054). */
.rail-note.is-warning {
  color: var(--color-accent-700);
}

/* Das Rundenstände-Panel steht in beiden Randspalten. Dort trägt nichts einen
   Kasten — die Struktur kommt aus Abständen und Haarlinien. Ohne diese Regel
   lief die alte Werkzeugleiste (240px + zwei Knöpfe nebeneinander) rechts aus
   der schmalen Spur heraus. */
.work-rail .round-checkpoint-panel {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.work-rail .round-checkpoint-panel .rail-note:not(.is-warning) {
  color: var(--ink-60);
}

/* Vollmatrix Jeder-gegen-jeden: die Nummer links ist die Legende für die
   Zahlen in der Kopfzeile. Beide Achsen tragen dieselbe Liste — deshalb darf
   hier nummeriert werden. In der Teammatrix stehen zwei verschiedene
   Mannschaften auf den Achsen; eine Nummer oben hätte dort keine Legende und
   wäre nicht auflösbar. */
.matrix-player-number {
  display: inline-block;
  min-width: 2ch;
  margin-right: 8px;
  color: var(--ink-45);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Abgeschlossenes Turnier: der Stand ist eingefroren. Getönte Fläche wie die
   anderen Hinweise, damit klar ist, dass hier nichts kaputt ist — es ist nur
   vorbei. Der Weg zurück steht daneben, weil auch nach dem letzten Spiel noch
   ein Fehler auffallen kann. */
.tournament-closed-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-accent-300);
  border-radius: var(--radius-md);
  background: var(--color-accent-100);
  color: var(--color-accent-900);
}

.tournament-closed-banner strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 19px;
}

.tournament-closed-banner p {
  margin: 4px 0 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.5;
}

/* Endstand eines abgeschlossenen Turniers: er ist der Inhalt der Seite, nicht
   ein aufklappbarer Anhang. */
.final-standings {
  margin-bottom: var(--space-5);
}

.final-standings h3 {
  margin: 0 0 var(--space-2);
}

/* ── F005: Gleichstand ─────────────────────────────────────────────────────
   Der Kasten steht im Arbeitsfluss, nicht als Fußnote: solange er da ist, ist
   die Reihenfolge nicht entschieden. Er trägt dieselbe Form wie das
   Abschlussbanner darüber (G1) — Akzentrahmen, gleicher Radius, gleiche
   Innenabstände. */
.tie-callout {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border: 1px solid var(--color-accent-300);
  border-radius: var(--radius-md);
  background: var(--color-accent-100);
  color: var(--color-accent-900);
}

.tie-callout h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 19px;
}

.tie-callout > p {
  margin: 4px 0 var(--space-2);
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.5;
}

.tie-callout-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Zweispaltig, solange der Knopf danebenpasst; darunter gestapelt. Der
   G12-Verstoß bei 390 px entstand genau hier: Name und Knopf lagen ohne
   eigene Spur übereinander. */
.tie-callout-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--color-accent-600) 26%, transparent);
}

.tie-callout-list li > div {
  display: flex;
  min-width: 0;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 2px;
}

.tie-callout-list strong {
  font-family: var(--font-heading);
  font-size: 14px;
}

.tie-callout-list span {
  overflow-wrap: break-word;
  font-size: 13px;
}

.tie-callout-block {
  color: var(--color-accent-700);
  font-weight: 600;
}

.tie-callout-list .primary-button {
  flex: 0 0 auto;
}

/* Die Marke am Namen sagt, dass dieser Platz entschieden und nicht erspielt
   wurde. Sie ist klein, aber sie ist da — ein Platz ohne diesen Hinweis wäre
   eine Behauptung. */
.tie-decision-badge {
  color: var(--ink-60);
  cursor: help;
  font-size: 0.86em;
  white-space: nowrap;
}

/* ── Gleichstands-Dialog ─────────────────────────────────────────────────── */
.tie-decision-shell {
  display: grid;
  width: min(520px, 92vw);
  gap: var(--space-3);
}

.tie-decision-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.tie-decision-methods {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}

.tie-decision-methods legend {
  padding: 0 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tie-decision-method {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

/* NEU-2/G1: ohne feste Größe zog eine globale Formularregel die Radios auf
   281 bzw. 235 px auf — die sichtbaren Punkte lagen auf verschiedenen
   x-Positionen. Ausgerechnet im Dialog, der über den KO-Einzug entscheidet.
   Beide Punkte jetzt gleich groß und links bündig. */
.tie-decision-method input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
}

.tie-decision-method span {
  display: grid;
  gap: 2px;
}

.tie-decision-method strong {
  font-family: var(--font-heading);
  font-size: 14px;
}

.tie-decision-method small {
  color: var(--ink-60);
  font-size: 12px;
}

.tie-decision-order {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tie-decision-order li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-divider);
}

.tie-decision-rank {
  min-width: 2.2ch;
  color: var(--ink-60);
  font-variant-numeric: tabular-nums;
}

.tie-decision-name {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tie-decision-move {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
}

.tie-decision-move .ghost-button {
  min-width: 32px;
  min-height: 32px;
  padding: 0 6px;
}

@media (max-width: 1024px) {
  .tie-decision-move .ghost-button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Teilen und Live-Ansicht ──────────────────────────────────────────────
   Der Teilen-Block ist bewusst so leise wie die übrigen Randspalten-Blöcke:
   kein Kasten, keine Farbe, nur Abstände. Die einzige Ausnahme ist die
   Warnung am Veranstalter-Link — dort geht es um Schreibrechte. */

.rail-share {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}

.rail-share #shareRailBody {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.share-link-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.share-link-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-55);
}

/* Der Link steht als markierbares Feld da, nicht nur hinter einem Knopf:
   ohne Zwischenablage-Recht (privates Fenster, alter Browser) wäre er sonst
   unerreichbar. */
.share-link-field {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: var(--color-neutral-100);
  color: var(--ink-62);
  font-family: var(--font-body);
  font-size: 12px;
  text-overflow: ellipsis;
}

.share-organizer-warning {
  max-width: 40ch;
}

/* Live-Ansicht: der Streifen steht über allem und bleibt stehen. Wer hier
   liest, muss auf den ersten Blick wissen, dass nichts von dem, was er tut,
   im Turnier ankommt. */
.live-view-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-accent-600);
  background: var(--color-accent-100);
  color: var(--color-accent-900);
}

.live-view-banner-title {
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.live-view-banner-text,
.live-view-banner-detail {
  font-size: 13px;
  line-height: 1.45;
}

.live-view-banner-detail {
  color: var(--color-accent-800);
}

.live-view-banner.is-warning {
  border-bottom-color: var(--color-accent-700);
}

/* Gesperrte Felder sollen nicht wie ein Fehler aussehen, sondern wie ein
   Aushang: lesbar, ruhig, nicht bedienbar. */
.is-live-readonly .work-area input:disabled,
.is-live-readonly .work-area select:disabled,
.is-live-readonly .work-area textarea:disabled {
  opacity: 1;
  background: var(--color-neutral-100);
  color: var(--color-text);
}

.is-live-readonly .work-area button:disabled {
  opacity: 0.45;
}

/* Ein Zuschauer-Link ist ausschließlich die Live-Bühne. Die Sperre im
   Sharing-Modul setzt zusätzlich `hidden` und `disabled`; diese Regel verhindert
   schon während des ersten Neuzeichnens jedes Aufblitzen fremder Reiter. */
.is-live-readonly #workspaceViewTabs [data-workspace-view]:not([data-workspace-view="live"]) {
  display: none;
}

.is-live-readonly .nav-switcher {
  display: none;
}

/* Das Konto kann die Live-Bühne verlassen (z. B. „Meine Online-Turniere").
   Selbst wenn konto.js seine Navigation nachträglich zeichnet, bleibt sie für
   reine Zuschauer weder sichtbar noch in der Tab-Reihenfolge. */
.is-live-readonly .nav-account {
  display: none;
}

/* Ein Kopf, nicht drei (Antonio, 2026-09-02, Bild vom echten Handy): Am
   Zuschauer-Link stand „Live-Ansicht" dreimal untereinander — in der Leiste,
   im Reiter und als Überschrift — und Turniername, Runde und Spielzahl
   standen im Seitenkopf UND im Kopf der Live-Karte. Der Seitenkopf entfällt
   deshalb ganz: Was der Zuschauer wissen muss, steht im Kopf der Karte, den
   er ohnehin liest. */
.is-live-readonly .title-block {
  display: none;
}

/* Der Zuschauer hat genau ein Turnier. Eine Umschaltleiste, die nichts
   umschaltet, trägt den Turniernamen nur ein zweites Mal — er steht im Kopf
   der Live-Karte, wo er hingehört. */
.is-live-readonly .nav-switcher {
  display: none;
}

/* Ab 1025 px sieht auch der Zuschauer die Bühne — und mit ihr bisher die
   Leiste des Veranstalters. „Bühne 1920 × 1080 — diese Leiste wird nicht
   projiziert" ist eine Auskunft an den, der projiziert, und die Platzwahl
   ändert seinen Stand; beides geht den Zuschauer nichts an. „Vollbild öffnen"
   BLEIBT: wer den Link am Fernseher aufmacht, braucht genau diesen Knopf. */
.is-live-readonly .live-toolbar-note,
.is-live-readonly .live-ranking-limit-field {
  display: none;
}

.is-live-readonly .live-toolbar {
  justify-content: flex-end;
}

/* Die Hinweisleiste bleibt, aber als eine Zeile: kurzer Satz, Zeitstempel. */
.is-live-readonly .live-view-banner {
  align-items: baseline;
  gap: 4px var(--space-2);
  padding: 6px var(--space-4);
}

/* Der Satz darf umbrechen, der Zeitstempel nicht: auf 375 px stand sonst
   „Du liest den Stand des V…" — eine abgeschnittene Auskunft ist keine. */
.is-live-readonly .live-view-banner-text {
  font-size: 14px;
}

.is-live-readonly .live-view-banner-detail {
  font-size: 14px;
  white-space: nowrap;
}

.is-live-readonly .live-view-banner-detail {
  flex: none;
  margin-left: auto;
}

@media print {
  .live-view-banner,
  .rail-share {
    display: none;
  }
}

/* ── Konto ────────────────────────────────────────────────────────────────
   Das Konto ist eine Beigabe, kein Tor: in der Kopfzeile steht es als
   schlichter Textknopf neben der Sprachwahl, nie als Aufforderung. Der Dialog
   folgt dem Assistenten (dieselbe Hülle, dieselben Fußzeilen-Knöpfe) und ist
   nur schmaler — zwei Felder brauchen keine 820 Pixel. */

.account-nav {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

/* Die eigene Adresse ist Auskunft, kein Bedienelement: gleiche Zeile, halbe
   Lautstärke, und auf schmalen Fenstern lieber gekürzt als umbrechend. */
.account-nav-email {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--ink-60);
}

.account-dialog {
  width: min(520px, calc(100% - 32px));
  max-width: 520px;
}

.account-shell {
  gap: var(--space-3);
}

.account-shell.dach-account button {
  min-height: 44px;
}

.account-intro,
.account-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-70);
  max-width: 52ch;
}

.account-note.is-warning {
  color: var(--color-accent-800);
}

.account-field {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-70);
}

.account-hint {
  font-size: 12px;
  color: var(--ink-55);
}

/* Fehlermeldungen stehen dort, wo der Blick nach dem Abschicken hingeht:
   zwischen letztem Feld und Knopf. */
.account-status {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-70);
  overflow-wrap: anywhere;
}

.account-status.is-warning {
  color: var(--color-accent-800);
}

.account-tournament-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 46vh;
  overflow-y: auto;
}

.account-tournament {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
}

.account-tournament-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-tournament-text strong {
  font-family: var(--font-heading);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.account-tournament-text span {
  font-size: 12px;
  color: var(--ink-55);
}

.account-footer {
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .account-nav-email {
    max-width: 14ch;
  }

  .account-tournament {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}

@media print {
  .account-nav {
    display: none;
  }
}

/* ── Phase 4: Begegnungssystem ─────────────────────────────────────────── */

.team-system {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

.encounter-system-field {
  max-width: 460px;
}

.encounter-abbruch-toggle {
  margin-top: var(--space-3);
}

.encounter-folge {
  margin-top: var(--space-3);
}

.encounter-doubles {
  margin-top: var(--space-5);
}

.encounter-double-card {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-divider);
}

.double-card-head h4 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 15px;
}

.double-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.double-field {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-55);
}

/* Der verbindliche Spielplan. Die Folgenummer steht vorn, weil die
   Reihenfolge die eigentliche Aussage des Systems ist. */
.encounter-plan {
  display: grid;
  gap: var(--space-3);
}

.encounter-score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.encounter-score strong {
  font-family: var(--font-heading);
  font-size: 19px;
}

.encounter-siegpunkt,
.encounter-decided {
  font-size: 13px;
  color: var(--ink-55);
}

.encounter-decided {
  color: var(--color-accent);
}

.encounter-hints {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.encounter-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.encounter-row {
  grid-template-columns:
    96px minmax(0, var(--name-column)) auto minmax(0, var(--name-column))
    88px var(--result-column);
}

.encounter-lead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.encounter-nr {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--ink-45);
}

.encounter-position {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}

.encounter-status {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-55);
  white-space: nowrap;
}

.encounter-row.is-gespielt .encounter-status {
  color: var(--ink-38);
}

/* Entfallene Spiele bleiben lesbar stehen — sie sind nicht gelöscht, und
   der Schalter macht sie jederzeit wieder zu offenen Spielen. */
.encounter-row.is-entfaellt {
  color: var(--ink-38);
}

.encounter-row.is-entfaellt .encounter-position,
.encounter-row.is-entfaellt .encounter-status {
  color: var(--ink-38);
}

.encounter-no-entry {
  font-size: 12px;
  color: var(--ink-55);
  text-align: right;
}

@media (max-width: 900px) {
  .encounter-row {
    grid-template-columns: 60px minmax(0, 1fr) var(--result-column);
    row-gap: 6px;
  }

  .encounter-row .match-versus {
    display: none;
  }

  .encounter-status {
    grid-column: 2 / -1;
  }
}

/* ── Phase 5: Doppel-K.-o. ──────────────────────────────────────────────────
   Zwei Zweige statt einem. Auf der Buehne stehen sie untereinander: die
   Hauptrunde oben, Hoffnungsrunde und Finale darunter — beide teilen sich die
   1080 px, deshalb bekommt jede Spalte die halbe Hoehe und die
   Weglass-Mechanik aus Phase 1 greift je Zweig einzeln. */
.live-body--double-knockout {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.live-body--double-knockout .live-column {
  /* Bewusst OHNE `overflow: hidden`: Ein verstecktes Ueberlaufen wuerde die
     Buehnenprobe gruen melden, waehrend in der Halle Inhalt fehlt. Was nicht
     passt, laesst die Weglass-Mechanik weg und die Kopfzeile beziffert es. */
  min-height: 0;
}

.is-double-knockout-live .live-bracket {
  gap: 20px;
}

.is-double-knockout-live .live-column-title {
  margin-bottom: 8px;
}

/* Die Zweige im Turnierblatt: eine Ueberschrift, darunter die Runden. */
.knockout-branch + .knockout-branch {
  margin-top: 28px;
}

/* WO D 7.4: Eine Wiederholungsbegegnung wird ausgetragen — sie MUSS aber
   sichtbar sein, sonst haelt der Schiedsrichter sie fuer einen Fehler. */
.knockout-match-card.is-rematch {
  border-left: 3px solid var(--color-accent, #b8860b);
}

.work-note.is-warning {
  border-left: 3px solid var(--color-warning, #b45309);
  padding-left: 12px;
}

/* Die Finalwiederholung ist eine Pflichtangabe — die Gruppe steht deshalb als
   eigener Block im Assistenten, nicht als Nebensatz. */
.wizard-choice-group {
  border: 1px solid var(--color-border, #d8d8d8);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px 0;
}

.wizard-choice-group legend {
  padding: 0 6px;
  font-weight: 600;
}

.wizard-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.wizard-hint.is-blocking {
  color: var(--color-warning, #b45309);
  font-weight: 600;
}

/* ── Phase 9: Mannschaftsturnier (Liga) ─────────────────────────────────────
   Eigene Abschnitte statt `.table-card`: jene Klasse ist im Blatt
   standardmässig `display: none` und für Spezialansichten reserviert — die
   Tabelle und der Rundenplan der Liga gehören zur sichtbaren Arbeitsfläche.
   (Im Echtlauf gemessen: die Tabelle stand im DOM und war unsichtbar.) */
.team-league-standings,
.team-league-plan {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-top: 28px;
}

.team-league-encounters {
  display: grid;
  gap: 32px;
}

.team-league-encounter {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.team-league-versus {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-weight: 400;
}

.team-league-rosters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.team-league-round-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.team-league-round h4 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.team-league-round.is-active h4 {
  color: var(--color-accent);
}

.team-league-pairings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.team-league-pairings li {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.team-league-pairings li.is-bye {
  grid-template-columns: 1fr;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.team-league-pairings .team-league-away {
  text-align: right;
}

.team-league-pairings .team-league-score {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Phase 13 (regelwerk.md F13): Turnierserie ─────────────────────────────

   Die Serie ist eine Leseansicht: eine Auswahlliste, zwei Einstellungen, eine
   Tabelle. Sie borgt sich `.matrix-table` für die Tabelle und braucht daneben
   nur das hier.

   Die Auswahlliste hat AUSDRÜCKLICH eigene Regeln statt `.settings-item`:
   dessen Raster stellt Beschriftung und Feld in zwei Spalten und schob im
   ersten Bild das Kästchen in die Mitte, während sein Text rechtsbündig am
   anderen Rand klebte — sichtbar unzusammenhängend. */
.series-event-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.series-event-choice {
  width: fit-content;
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}

/* Das Kästchen bekommt AUSDRÜCKLICH seine Maße. Formularfelder sind hier
   grundsätzlich so breit wie ihre Zeile; ohne diese Regel war die Ankreuzbox
   1106 px breit und schob ihre Beschriftung an den rechten Rand — im Bild
   gesehen, im Browser nachgemessen. Dieselbe Maßnahme wie bei
   `.participant-import-checkbox`. */
.series-event-choice input {
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-text);
}

/* Die Ergebnisspalte trägt je Teilnehmer alle Events. Gestrichene stehen
   gedämpft daneben — durchgestrichen wäre hier falsch: das Ergebnis ist ja
   gespielt worden, es zählt nur nicht. */
.series-table .series-results {
  font-size: 0.9em;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.series-table .series-dropped {
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.series-table .series-shared {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 0.9em;
  white-space: nowrap;
}

/* Die Hinweise über der Tabelle brauchen Luft — sie stehen sonst als ein
   Block direkt unter der Trennlinie. */
#seriesView .work-note {
  margin: 0 0 6px;
}

#seriesView .section-subheading {
  margin-top: 24px;
}

/* Phase 13 (F12): Die beiden Legs unter ihrer Paarung. Sie stehen über die
   volle Breite der Zeile (die Paarung selbst ist ein Drei-Spalten-Raster) und
   stapeln sich, statt als ein Textklumpen in die schmale Rasterspalte zu
   laufen — im Bild gesehen, bevor diese Regel da war. */
.team-league-pairings .team-league-legs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 2px;
}

.team-league-pairings .team-league-legs .work-note {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Die Ligatabelle nimmt die volle Breite ihrer Fläche; sonst kleben die
   kurzen Zahlenspalten aneinander (G3/G4: Inhalt atmet vor seiner Linie). */
.team-league-table {
  width: 100%;
}

.team-league-table th,
.team-league-table td {
  padding-right: 18px;
  white-space: nowrap;
}

.team-league-table th:nth-child(2),
.team-league-table td:nth-child(2) {
  width: 100%;
  white-space: normal;
}

.team-league-table td.is-numeric,
.team-league-table th.is-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ── Phase 11: Spielstärke, Verein, Setzliste und Auslosungs-Protokoll ──── */

/* Die Namenszeile bleibt das, was sie war; die optionalen Felder hängen
   darunter, damit die Teilnehmerliste nicht breiter wird. */
.roster-row {
  display: block;
  padding: 6px 0;
}

.roster-name-line {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.roster-details {
  margin: 4px 0 0 32px;
  font-size: 0.82rem;
}

.roster-details > summary {
  cursor: pointer;
  color: var(--muted, #6b7280);
  list-style: none;
  padding: 2px 0;
}

.roster-details > summary::-webkit-details-marker {
  display: none;
}

.roster-details > summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  transition: transform 0.15s ease;
}

.roster-details[open] > summary::before {
  transform: rotate(90deg);
}

.roster-details-mark {
  color: var(--text, #111827);
  font-weight: 600;
}

.roster-detail-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  padding: 4px 0 2px;
}

.roster-detail-field {
  display: grid;
  gap: 2px;
}

.roster-detail-field > span {
  color: var(--muted, #6b7280);
  font-size: 0.75rem;
}

/* Setzliste: der Gleichstandsblock steht unter dem Umschalter, nicht als
   eigener Kasten — er ist ein Hinweis, kein zweiter Arbeitsschritt. */
.seeding-panel {
  margin: 6px 0 10px;
}

.seeding-hint {
  margin: 2px 0;
}

.seeding-order {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
  display: grid;
  gap: 4px;
}

.seeding-order-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto auto auto;
  gap: 8px;
  align-items: center;
}

.seeding-order-number {
  color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
}

.seeding-order-rating {
  font-variant-numeric: tabular-nums;
}

.seeding-order-tie {
  color: var(--muted, #6b7280);
  font-size: 0.78rem;
}

/* Ein nicht trennbarer Verein ist ein Befund, keine Fehlermeldung: er steht
   sichtbar, aber ruhig über dem Raster. */
.draw-violation {
  border-left: 3px solid var(--warn, #b45309);
  padding-left: 10px;
}

.device-migration-entry { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--color-divider, #d8d6d2); font-size: 14px; line-height: 1.5; }
.device-migration-entry a { color: var(--color-accent, #7d5a24); text-underline-offset: 3px; }