/* Turnierplaner */
.tp { display: flex; flex-direction: column; gap: var(--a-5); padding-bottom: 0; }
.tp--turnier { max-width: 1400px; }
.tp__kopf h1 { font-size: clamp(30px, 6vw, 44px); margin: 0 0 var(--a-2); }
.tp__kopf p { margin: 0; }
.tp__meta { margin: 0; }
.karte { background: var(--c-flaeche); border: 1px solid var(--c-linie); border-radius: var(--r-karte); padding: var(--a-5); }
.karte h2 { font-size: 22px; margin: 0; }
.tp .dreh { transform: rotate(180deg); }

/* Auswahl-Chips, Einstellungen (wie Tischkicker) */
.chipwolke { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.wahl {
  display: inline-flex; align-items: center; gap: var(--a-2); min-height: var(--touch-min); padding: var(--a-2) var(--a-4);
  border: 1px solid var(--c-chip-rand); border-radius: var(--r-chip); background: transparent; color: var(--c-text); font-weight: 700; font-size: 16px;
}
.wahl:hover { border-color: var(--c-akzent); }
.wahl--an { background: var(--c-akzent); border-color: var(--c-akzent); color: var(--c-text-auf-akzent); }
.wahl--gruppe { border-style: dashed; }
.wahl--klein { font-size: 14px; padding: var(--a-1) var(--a-3); }
.wahl .icon { width: 18px; height: 18px; }
.einst { display: grid; gap: var(--a-4); }
.einst__zeile { display: flex; justify-content: space-between; align-items: center; gap: var(--a-3) var(--a-4); flex-wrap: wrap; }
.einst__zeile > span { display: flex; flex-direction: column; }
.einst__zeile .segment { flex: 0 1 320px; }
.einst .schalter { min-height: 48px; padding-block: 0; }
.einst .feld { margin: 0; }
.stepper { display: flex; align-items: center; gap: var(--a-2); }
.stepper b { font-family: var(--schrift-display); font-size: 30px; min-width: 2ch; text-align: center; }
.mehr summary { cursor: pointer; font-weight: 700; color: var(--c-akzent); min-height: var(--touch-min); display: flex; align-items: center; }
.mehr[open] summary { margin-bottom: var(--a-3); }
.feld-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--a-3); margin-bottom: var(--a-3); }
.feld-reihe .feld > span { font-size: var(--fs-klein); }

/* Modus-Wahl */
.modus-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--a-2); }
.modus {
  display: grid; grid-template-columns: auto 1fr; gap: 2px var(--a-3); align-items: center; text-align: left; padding: var(--a-3) var(--a-4);
  border: 1.5px solid var(--c-linie); border-radius: var(--r-karte); background: var(--c-hintergrund); color: var(--c-text); font: inherit; cursor: pointer;
}
.modus .icon { width: 28px; height: 28px; grid-row: span 2; color: var(--c-akzent); }
.modus b { font-size: 16px; }
.modus small { color: var(--c-text-leise); font-size: 13px; line-height: 1.35; }
.modus:hover { border-color: var(--c-akzent); }
.modus--an { border-color: var(--c-akzent); background: color-mix(in srgb, var(--c-akzent) 12%, var(--c-hintergrund)); }

/* Teams und Setzliste */
.teams { display: grid; gap: var(--a-3); }
.teams .button-reihe { display: flex; flex-wrap: wrap; gap: var(--a-2); align-items: center; }
.setzliste { display: grid; gap: var(--a-3); }
.setz { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-1); }
.setz li {
  display: flex; align-items: center; gap: var(--a-2); padding: 2px var(--a-2) 2px 0; border: 1px solid var(--c-linie); border-radius: var(--r-button-klein);
  background: var(--c-hintergrund); user-select: none;
}
.setz li.zieht { opacity: .5; }
.setz li.ziel { border-color: var(--c-akzent); box-shadow: 0 -2px 0 var(--c-akzent); }
.setz__griff { cursor: grab; touch-action: none; width: 36px; min-height: var(--touch-min); display: grid; place-items: center; color: var(--c-text-leise); letter-spacing: -3px; }
.setz__nr { font-family: var(--schrift-display); color: var(--c-akzent); min-width: 2ch; text-align: right; }
.setz__name { flex: 1; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.setz__name small { font-weight: 400; }
.tiebreak { list-style: none; margin: 0 0 var(--a-2); padding: 0; display: grid; gap: var(--a-1); }
.tiebreak li { display: flex; align-items: center; gap: var(--a-1); border-bottom: 1px solid var(--c-linie); }
.tiebreak li > span { flex: 1; }

/* Leiste unten */
.leiste-unten {
  position: sticky; bottom: 0; z-index: 5; margin-inline: calc(var(--seitenrand) * -1); padding: var(--a-3) var(--seitenrand) calc(var(--a-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--c-hintergrund) 94%, transparent); border-top: 1px solid var(--c-linie); text-align: center; backdrop-filter: blur(6px);
}
.leiste-unten p { margin: var(--a-2) 0 0; }
.leiste-unten .btn { max-width: 560px; margin-inline: auto; }
.leiste-unten__neben { display: flex; justify-content: center; gap: var(--a-6); flex-wrap: wrap; }
.leiste-unten__neben .textlink { color: var(--c-text-leise); font-weight: 400; font-size: var(--fs-klein); }
.btn--breit { width: 100%; }
.fortschritt { height: 8px; max-width: 560px; margin: 0 auto; border-radius: 4px; background: var(--c-flaeche-2); overflow: hidden; }
.fortschritt i { display: block; height: 100%; background: var(--c-akzent); transition: width var(--dauer); }

/* Reiter: fest stehend, aktive Ansicht leicht hervorgehoben */
.tp__reiter button[aria-checked="true"] { background: var(--c-flaeche-2); color: var(--c-akzent); box-shadow: inset 0 -2px 0 var(--c-akzent); }
.tp__reiter button:not([aria-checked="true"]):hover { color: var(--c-text); }

/* Spielkarten */
.sp-block h2 { font-size: 20px; margin: 0 0 var(--a-3); }
.sp-block h2 .klein { font-weight: 400; }
.sp-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--a-3); }
.sp {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--a-1) var(--a-3); align-items: center; width: 100%;
  padding: var(--a-3) var(--a-4); text-align: left; color: var(--c-text); font: inherit;
  background: var(--c-flaeche); border: 1.5px solid var(--c-linie); border-radius: var(--r-karte);
}
button.sp { cursor: pointer; transition: border-color var(--dauer); }
button.sp:hover:not(:disabled) { border-color: var(--c-akzent); }
.sp--laeuft { border-color: var(--c-akzent); }
.sp--beendet { border-color: color-mix(in srgb, var(--c-hinweis-tipp) 45%, var(--c-linie)); }
.sp--wartet { opacity: .75; }
.sp__kopf { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--a-2); font-size: 13px; color: var(--c-text-leise); }
.sp__status { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; }
.sp__status .icon { width: 15px; height: 15px; }
.sp__status--laeuft { color: var(--c-akzent); }
.sp__status--beendet { color: var(--c-hinweis-tipp); }
.sp__name { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sp__name--r { text-align: right; }
.sp__name--sieg { color: var(--c-akzent); }
.sp__erg { display: flex; align-items: center; gap: var(--a-1); }
.sp__erg b { font-family: var(--schrift-display); font-weight: 800; font-size: clamp(28px, 6vw, 40px); line-height: 1; font-variant-numeric: tabular-nums; min-width: 1.1ch; text-align: center; }
.sp__erg b.sieg { color: var(--c-akzent); }
.sp__erg i { color: var(--c-text-leise); font-style: normal; }
.sp__board { font-family: var(--schrift-display); font-weight: 800; font-size: 18px; padding: 4px 10px; border-radius: var(--r-chip); background: var(--c-akzent); color: var(--c-text-auf-akzent); white-space: nowrap; }
.sp--kompakt { padding: var(--a-2) var(--a-3); }
.sp--kompakt .sp__erg b { font-size: 24px; }
.sp--serie { grid-template-columns: 1fr; }
.serie__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--a-1) var(--a-4); }
.serie__liste > span { display: flex; justify-content: space-between; gap: var(--a-2); border-bottom: 1px solid var(--c-linie); padding: 2px 0; }
.serie__liste b { font-family: var(--schrift-display); }

/* Turnierbaum: Spalten je Runde; Paare mit Verbindungslinien */
.baum-block { display: grid; gap: var(--a-2); }
.baum-block h2 { font-size: 20px; margin: var(--a-3) 0 0; }
.baum-huelle { overflow-x: auto; padding-bottom: var(--a-3); -webkit-overflow-scrolling: touch; }
.baum { display: flex; gap: 28px; min-width: min-content; }
.baum__spalte { display: flex; flex-direction: column; width: 210px; flex: none; }
.baum__spalte h3 { font-size: 14px; color: var(--c-text-leise); margin: 0 0 var(--a-2); text-align: center; font-family: var(--schrift-text); font-weight: 700; }
.baum__spiele { display: flex; flex-direction: column; flex: 1; justify-content: space-around; }
.baum__paar { display: flex; flex-direction: column; flex: 1; position: relative; }
.baum__zelle { flex: 1; display: flex; align-items: center; position: relative; padding: 6px 0; }
.baum__zelle > * { width: 100%; }
.baum:not(.baum--frei) .baum__paar::after { content: ""; position: absolute; right: -14px; top: 25%; bottom: 25%; border-right: 2px solid var(--c-linie); }
.baum:not(.baum--frei) .baum__spalte:not(.baum__spalte--letzte) .baum__zelle::after { content: ""; position: absolute; right: -14px; top: 50%; width: 14px; border-top: 2px solid var(--c-linie); }
.baum:not(.baum--frei) .baum__spalte:not(.baum__spalte--erste) .baum__zelle::before { content: ""; position: absolute; left: -14px; top: 50%; width: 14px; border-top: 2px solid var(--c-linie); }
.baum--frei .baum__spiele { justify-content: flex-start; gap: var(--a-2); }
.bs {
  display: grid; gap: 0; padding: 0; border: 1.5px solid var(--c-linie); border-radius: var(--r-button-klein); background: var(--c-flaeche);
  color: var(--c-text); font: inherit; text-align: left; position: relative; overflow: hidden;
}
button.bs { cursor: pointer; }
button.bs:hover:not(:disabled) { border-color: var(--c-akzent); }
.bs--laeuft { border-color: var(--c-akzent); }
.bs--frei { opacity: .55; border-style: dashed; }
.bs--entfaellt { opacity: .45; border-style: dashed; }
.bs__zeile { display: flex; justify-content: space-between; gap: var(--a-2); padding: 6px 10px; font-size: 14px; }
.bs__zeile + .bs__zeile { border-top: 1px solid var(--c-linie); }
.bs__zeile > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs__zeile b { font-family: var(--schrift-display); min-width: 1.2ch; text-align: right; }
.bs__zeile--sieg { font-weight: 700; color: var(--c-akzent); }
.bs__zeile--frei { color: var(--c-text-leise); font-style: italic; }
.bs__board { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 800; padding: 2px 6px; background: var(--c-akzent); color: var(--c-text-auf-akzent); border-radius: 6px 0 0 6px; }
.baum-finale { display: flex; flex-wrap: wrap; gap: var(--a-4); align-items: flex-start; }
.baum-finale > div { width: 240px; display: grid; gap: var(--a-2); align-content: start; }
.baum-finale h3 { font-size: 14px; margin: 0; color: var(--c-text-leise); font-family: var(--schrift-text); }

/* Tabellen */
.tp-tabelle { margin: 0 0 var(--a-2); }
.tp-tabelle .tabelle th, .tp-tabelle .tabelle td { padding: var(--a-2) var(--a-3); }
.tp-tabelle td.platz { color: var(--c-akzent); font-weight: 800; }
.tp-tabelle tbody th { white-space: nowrap; }
.tp-tabelle tr.weiter th, .tp-tabelle tr.weiter td { background: color-mix(in srgb, var(--c-akzent) 10%, transparent); }
.gruppen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--a-4); }
.gruppen-raster .karte { padding: var(--a-4); }
.gruppen-raster h2 { margin-bottom: var(--a-2); }

/* Ergebnis-Eingabe */
.duell { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-3); margin-bottom: var(--a-3); }
.duell__seite {
  display: flex; flex-direction: column; align-items: center; gap: var(--a-1); padding: var(--a-3); min-height: 110px;
  border: 2px solid var(--c-linie); border-radius: var(--r-karte); background: var(--c-hintergrund); color: var(--c-text); font: inherit; cursor: pointer;
}
.duell__seite span { font-size: 14px; color: var(--c-text-leise); text-align: center; overflow-wrap: anywhere; }
.duell__seite b { font-family: var(--schrift-display); font-size: 56px; line-height: 1; }
.duell__seite.aktiv { border-color: var(--c-akzent); }
.schnell { display: flex; flex-wrap: wrap; gap: var(--a-2); justify-content: center; margin-bottom: var(--a-2); }
.ziffern { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a-2); }
.ziffern button {
  min-height: 56px; border-radius: var(--r-button); border: 1px solid var(--c-linie); background: var(--c-flaeche-2); color: var(--c-text);
  font-family: var(--schrift-display); font-size: 26px; font-weight: 700; display: grid; place-items: center;
}
.ziffern button:hover { border-color: var(--c-akzent); }
.ziffern__weiter { font-family: var(--schrift-text) !important; font-size: 17px !important; }
.dialog__fuss--innen { padding: var(--a-4) 0 0; }
.serie-eingabe { display: grid; gap: var(--a-2); margin-bottom: var(--a-3); }
.serie-eingabe__zeile {
  display: flex; justify-content: space-between; align-items: center; gap: var(--a-3); min-height: 52px; padding: var(--a-2) var(--a-4);
  border: 2px solid var(--c-linie); border-radius: var(--r-button); background: var(--c-hintergrund); color: var(--c-text); font: inherit; font-weight: 700; cursor: pointer;
}
.serie-eingabe__zeile b { font-family: var(--schrift-display); font-size: 26px; }
.serie-eingabe__zeile.aktiv { border-color: var(--c-akzent); }

/* Ende */
.podest { display: grid; gap: var(--a-2); list-style: none; margin: 0; padding: 0; }
.podest__platz { display: flex; align-items: center; gap: var(--a-4); padding: var(--a-4) var(--a-5); border-radius: var(--r-karte); background: var(--c-flaeche); border: 1px solid var(--c-linie); }
.podest__platz--1 { border-color: var(--c-akzent); background: var(--c-flaeche-2); }
.podest__nr { font-family: var(--schrift-display); font-weight: 800; font-size: 32px; width: 1.6em; color: var(--c-akzent); }
.podest__name { flex: 1; font-weight: 700; font-size: 19px; }
.endstand { list-style: none; margin: var(--a-3) 0 0; padding: 0; columns: 2 220px; }
.endstand li { display: flex; gap: var(--a-3); padding: var(--a-1) 0; break-inside: avoid; }
.endstand b { font-family: var(--schrift-display); min-width: 2.5ch; color: var(--c-akzent); }
.tp__ende-knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-3); justify-content: center; }
.tp .install-platz, .tp .app-werbung-platz { align-self: center; }

/* Großanzeige */
.tv { position: fixed; inset: 0; z-index: 60; background: var(--c-hintergrund); padding: clamp(16px, 3vw, 48px); overflow: auto; }
.tv__zu { position: absolute; top: var(--a-4); right: var(--a-4); }
.tv__inhalt { max-width: 1840px; margin: 0 auto; }
.tv__inhalt--zwei { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 56px); }
.tv h2 { font-size: clamp(32px, 3.4vw, 56px); }
.tv h3 { font-size: clamp(22px, 2vw, 32px); margin: var(--a-5) 0 var(--a-3); }
.tv .sp { font-size: clamp(18px, 1.8vw, 30px); cursor: default; }
.tv .sp__kopf { font-size: clamp(14px, 1.2vw, 20px); }
.tv .sp__erg b { font-size: clamp(44px, 5vw, 90px); }
.tv .sp__board { font-size: clamp(20px, 2vw, 34px); }
.tv .sp-liste { grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); }
.tv .tabelle { font-size: clamp(20px, 2vw, 34px); }
.tv .tabelle th, .tv .tabelle td { padding: clamp(8px, 1vw, 16px); }
.tv .tabelle-huelle { max-height: none; }
.tv .baum__spalte { width: clamp(220px, 16vw, 320px); }
.tv .bs__zeile { font-size: clamp(16px, 1.3vw, 24px); }

/* Druck: nur Turnierbaum, Tabelle und Spielplan auf weißem A4 */
.druck { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  body.app { background: #fff !important; color: #000 !important; }
  .app-wurzel > *:not(.druck), dialog, .toast, .tv { display: none !important; }
  .druck { display: block !important; color: #000; font-size: 11pt; }
  .druck h1 { font-size: 20pt; margin: 0 0 4pt; color: #000; }
  .druck h2 { font-size: 14pt; margin: 12pt 0 6pt; color: #000; }
  .druck__seite { break-inside: avoid-page; }
  .druck__seite + .druck__seite { break-before: page; }
  .druck * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  .druck .baum-huelle { overflow: visible; }
  .druck .baum { gap: 14px; }
  .druck .baum__spalte { width: 150px; }
  .druck .bs { border: 1px solid #000; }
  .druck .bs__zeile { font-size: 9pt; padding: 3px 5px; }
  .druck .bs__zeile + .bs__zeile { border-top: 1px solid #999; }
  .druck .baum__paar::after, .druck .baum__zelle::after, .druck .baum__zelle::before { border-color: #000 !important; }
  .druck .bs__board { display: none; }
  .druck table { width: 100%; border-collapse: collapse; }
  .druck th, .druck td { border: 1px solid #999; padding: 3pt 5pt; text-align: left; font-size: 9.5pt; }
  .druck .tabelle-huelle { overflow: visible; max-height: none; border: 0; }
  .druck .karte { border: 0; padding: 0; }
  .druck .leise { color: #444 !important; }
  .druck .icon { display: none; }
}
.tv .podest { margin-bottom: var(--a-6); }
.tv .podest__name { font-size: clamp(22px, 2.4vw, 40px); }
.tv .podest__nr { font-size: clamp(32px, 3vw, 56px); }
[data-inhalt] { display: grid; gap: var(--a-6); }