/* ==========================================================================
   BCHNG.de Redesign — Ticket-/Boarding-Pass-Optik
   Design-Referenz: design/design_handoff_bchng_redesign/README.md

   Phase 1 (Fundament): Design-Tokens + Nav/Footer (main.php) + Startseite.
   Bootstrap4/AdminLTE3 bleiben als Dependency fuer andere, noch nicht
   umgebaute Seiten bestehen - dieses Stylesheet greift nur dort, wo
   bc-*-Klassen bzw. .bc-page explizit verwendet werden, nicht global auf
   body/Bootstrap-Elemente.
   ========================================================================== */

:root {
    /* Hex-Fallback (aeltere Browser ohne oklch()-Unterstuetzung) */
    --color-primary: #1c5c8c;
    --color-primary-hover: #1a4d76;
    --color-primary-tint: #e4ecf3;
    --color-success: #3f9e6d;
    --color-success-hover: #2c6b47;
    --color-success-tint: #e2f5ea;
    --color-warning: #dba33c;
    --color-warning-tint: #faf0dd;
    --color-danger: #b6432e;
    --color-danger-tint: #f6e4de;
    --color-surface-alt: #f2f4f5;

    --color-text: #181b17;
    --color-text-secondary: #4a4f47;
    --color-text-muted: #8a8f86;
    --color-border: #ecede9;
    --color-border-strong: #dcded9;
    --color-bg: #f3f4f2;
    --color-surface: #fdfdfc;
    --color-surface-white: #fff;

    --radius-pill: 100px;
    --radius-card: 18px;
    --radius-card-lg: 22px;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(24, 27, 23, 0.08);
    --shadow-card-lg: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 60px rgba(24, 27, 23, 0.1);

    --font-family-base: 'Public Sans', system-ui, sans-serif;
}

/* oklch()-Werte ueberschreiben die Hex-Fallbacks nur, wenn der Browser die
   Funktion tatsaechlich unterstuetzt (@supports-Feature-Query statt einer
   zweiten, gleich benannten Custom-Property-Deklaration - letzteres ist bei
   Custom Properties kein verlaesslicher Fallback-Mechanismus, da ungueltige
   Werte erst am Verwendungsort auffallen, nicht an der Deklaration selbst). */
@supports (color: oklch(43% 0.14 240)) {
    :root {
        --color-primary: oklch(43% 0.14 240);
        --color-primary-hover: oklch(38% 0.13 240);
        --color-primary-tint: oklch(94% 0.03 240);
        --color-success: oklch(62% 0.15 155);
        --color-success-hover: oklch(35% 0.12 155);
        --color-success-tint: oklch(94% 0.05 155);
        --color-warning: oklch(78% 0.14 80);
        --color-warning-tint: oklch(95% 0.06 85);
        --color-danger: oklch(55% 0.17 25);
        --color-danger-tint: oklch(94% 0.04 25);
        --color-surface-alt: oklch(96% 0.008 240);
    }
}

/* --- Typografie-Grundlagen (Weights 400/500/600/700/800 werden lokal per
   @font-face aus css/fonts.css geladen, siehe dort) ---------------------- */

.bc-page {
    font-family: var(--font-family-base);
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-surface);
}

.bc-page h1,
.bc-page h2,
.bc-page h3,
.bc-page h4 {
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0;
}

/* --- Kicker / Section-Label (Labels, 10-12px, uppercase, gedaempft) ----- */

.bc-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* --- Buttons / Pills ----------------------------------------------------- */

.bc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-pill);
    padding: 12px 26px;
    font-size: 14.5px;
    font-weight: 700;
    font-family: var(--font-family-base);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.bc-btn:hover {
    text-decoration: none;
}

.bc-btn-primary {
    background: var(--color-primary);
    color: #fff !important;
}

.bc-btn-primary:hover {
    background: var(--color-primary-hover);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(28, 92, 140, 0.25);
}

.bc-btn-sm {
    padding: 9px 20px;
    font-size: 12.5px;
}

.bc-btn-lg {
    height: 52px;
    padding: 0 30px;
    font-size: 15.5px;
}

.bc-btn-block {
    display: flex;
    width: 100%;
}

/* Dezenter Stil fuer destruktive Aktionen (Pill-Form, passend zu den
   uebrigen Formular-Buttons) - gleiche Farbgebung wie der "Loeschen"-Button
   in der Identitaets-Spalte (.bc-rail-btn-danger), nur als Pill statt als
   kompaktes Rechteck, damit es sich in die Formularsprache einfuegt. */
.bc-btn-danger-soft {
    background: var(--color-danger-tint);
    color: #963823 !important;
}

.bc-btn-danger-soft:hover {
    background: #efcdc2;
    color: #963823 !important;
}

/* Neutraler Button (z. B. "Abbrechen" im Abmelde-Modal) - dezenter als
   .bc-btn-primary, aber nicht destruktiv wie .bc-btn-danger-soft. */
.bc-btn-ghost {
    background: transparent;
    color: var(--color-text-secondary) !important;
    border: 1px solid var(--color-border-strong);
}

.bc-btn-ghost:hover {
    background: var(--color-surface-alt);
    color: var(--color-text) !important;
}

/* Kleiner, unterstrichener Text-Link fuer eine destruktive Aktion, die neben
   einem primaeren Button bewusst NICHT gleich viel Gewicht haben soll (z. B.
   "Registrierung komplett loeschen" unter "Auswahl speichern" in
   _formPerson.php - zwei gleich grosse Pillen sahen dort unruhig aus, siehe
   Chat). Bewusst kein .bc-btn-Abkoemmling - keine Pillenform/kein
   Hintergrund, nur Text mit dezenter Farbe, die erst beim Hover in den
   Gefahren-Rotton von .bc-btn-danger-soft wechselt. */
.bc-text-link-danger {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted) !important;
    text-decoration: underline;
}

.bc-text-link-danger:hover {
    color: #963823 !important;
}

/* --- Nav (main.php, gilt fuer alle Seiten) -------------------------------- */

.bc-nav {
    width: 100%;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.bc-nav-inner {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-family-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 56px;
}

.bc-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}

.bc-nav-brand img {
    height: 32px;
    width: auto;
}

.bc-nav-brand-text {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.bc-nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.bc-nav-link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-secondary) !important;
    text-decoration: none !important;
}

.bc-nav-link:hover {
    color: var(--color-text) !important;
    text-decoration: none !important;
}

/* --- Footer (main.php, gilt fuer alle Seiten) ----------------------------- */

.bc-footer {
    width: 100%;
    border-top: 1px solid var(--color-border);
}

.bc-footer-inner {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-family-base);
    padding: 22px 56px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--color-text-muted);
}

.bc-footer-links {
    display: flex;
    gap: 22px;
}

.bc-footer a {
    color: var(--color-text-muted) !important;
    text-decoration: none;
}

.bc-footer a:hover {
    color: var(--color-text) !important;
    text-decoration: underline;
}

/* --- Ticket-Komponente (Perforationslinie-Rezept aus der README) --------- */

.bc-ticket {
    position: relative;
    display: flex;
    background: #fff;
    border-radius: var(--radius-card-lg);
    box-shadow: var(--shadow-card-lg);
    overflow: hidden;
}

/* Vertikale Perforation (zwischen zwei nebeneinanderliegenden Ticket-
   Abschnitten, z. B. im Hero-Ticket). Die Ausstanz-Kreise (--seam-cutout,
   Default = Seitenhintergrund der Startseite) muessen exakt die
   Hintergrundfarbe der Flaeche HINTER dem Ticket haben, nicht die der Karte
   selbst, damit der "Cutout"-Effekt entsteht (siehe README). */
.bc-ticket-seam-v {
    --seam-cutout: var(--color-surface);
    width: 2px;
    position: relative;
    flex-shrink: 0;
    border-left: 2px dashed var(--color-border);
}

.bc-ticket-seam-v::before,
.bc-ticket-seam-v::after {
    content: "";
    position: absolute;
    left: -15px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--seam-cutout);
}

.bc-ticket-seam-v::before {
    top: -14px;
}

.bc-ticket-seam-v::after {
    bottom: -14px;
}

/* Horizontale Perforation (README-Rezept 1:1) */
.bc-ticket-seam-h {
    --seam-cutout: var(--color-surface);
    border-top: 2px dashed var(--color-border);
    position: relative;
}

.bc-ticket-seam-h::before,
.bc-ticket-seam-h::after {
    content: "";
    position: absolute;
    top: -11px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--seam-cutout);
}

.bc-ticket-seam-h::before {
    left: -11px;
}

.bc-ticket-seam-h::after {
    right: -11px;
}

/* --- Startseite: Hero ------------------------------------------------------ */

.bc-hero {
    padding: 56px 0 44px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.bc-hero-badge {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-tint);
    color: var(--color-primary-hover);
    font-size: 12px;
    font-weight: 700;
}

.bc-hero-title {
    font-size: 56px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-text);
    max-width: 920px;
}

.bc-hero-highlight {
    position: relative;
    display: inline-block;
}

.bc-hero-highlight::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 12px;
    background: #d9e9f4;
    z-index: -1;
    border-radius: 4px;
}

.bc-hero-subtitle {
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 520px;
}

/* --- Hero-Ticket ------------------------------------------------------------*/

.bc-hero-ticket-wrap {
    padding: 8px 0 56px;
    display: flex;
    justify-content: center;
}

.bc-hero-ticket {
    width: 100%;
    max-width: 920px;
}

.bc-hero-ticket-info {
    flex: 1;
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bc-hero-ticket-name {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.bc-hero-ticket-meta {
    display: flex;
    gap: 36px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.bc-hero-ticket-status {
    width: 220px;
    flex-shrink: 0;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

/* --- Kleine Meta-Paare (Label + Wert) --------------------------------------*/

.bc-meta-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.bc-meta-value {
    font-size: 15px;
    color: var(--color-text);
    margin-top: 4px;
    font-weight: 600;
}

/* --- Status-Badges ---------------------------------------------------------*/

.bc-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
}

.bc-badge-success {
    background: var(--color-success-tint);
    color: #2c7350;
}

.bc-badge-primary {
    background: var(--color-primary-tint);
    color: var(--color-primary-hover);
}

.bc-badge-warning {
    background: var(--color-warning-tint);
    color: #8a6318;
}

/* --- Journey Steps ("So funktioniert's") ----------------------------------- */

.bc-journey {
    padding: 8px 0 40px;
    position: relative;
}

.bc-journey-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    max-width: 920px;
    margin: 0 auto;
    gap: 24px;
}

.bc-journey-line {
    position: absolute;
    top: 22px;
    left: 60px;
    right: 60px;
    border-top: 2px dashed var(--color-border-strong);
    z-index: 0;
}

.bc-journey-step {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.bc-journey-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bc-journey-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--color-text);
}

.bc-journey-text {
    font-size: 13.5px;
    color: var(--color-text-secondary);
    max-width: 220px;
    line-height: 1.5;
}

/* --- Feature-Highlights (Startseite, views/site/start.php) ----------------
   Ersetzt den frueheren oeffentlichen Changelog (views/site/changelog.php,
   entfernt) - eine detaillierte, technische Featureliste war im Prinzip eine
   kostenlose Spezifikation fuer die Konkurrenz nachzubauen. Stattdessen eine
   kuratierte, nutzenorientierte Auswahl der besten Features als Kartenraster
   unterhalb des bestehenden Startseiten-Inhalts - bewusst wenige, dafuer
   werblich formulierte Punkte statt einer vollstaendigen Liste. */

.bc-features {
    padding: 32px 0 48px;
    max-width: 960px;
    margin: 0 auto;
}

.bc-features-heading {
    text-align: center;
    margin-bottom: 36px;
}

.bc-features-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-text);
    margin: 10px 0 0;
}

.bc-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bc-feature-card {
    background: var(--color-surface-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px;
    text-align: left;
}

.bc-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 14px;
}

.bc-feature-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 6px;
}

.bc-feature-text {
    font-size: 13.5px;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .bc-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .bc-features-grid {
        grid-template-columns: 1fr;
    }
}

/* --- .page-wrapper-Modifier fuer Seiten mit einem full-bleed Hauptelement --
   Der horizontale Breakout (100vw + negativer Margin) betrifft nur die
   Seitenraender, nicht das vertikale Padding von .page-wrapper (site.css:
   padding:40px 20px 60px) - das wuerde weiterhin einen weissen Rand
   oben/unten zwischen Nav/Footer und dem full-bleed Element lassen. Statt mit
   Breakout-Hacks in beide Richtungen zu arbeiten, setzt dieser Modifier (per
   $this->params['pageWrapperModifier'] aus der jeweiligen View, siehe
   main.php) das Vertikal-Padding gezielt auf 0 - nur fuer Seiten, die das
   explizit anfordern. Andere Seiten setzen den Parameter nicht und behalten
   das normale .page-wrapper-Padding unveraendert. -------------------------- */

.page-wrapper--flush {
    padding-top: 0;
    padding-bottom: 0;
}

/* --- Split-Layout (z. B. "Turnier erstellen") -------------------------------
   Full-bleed wie .bc-nav/.bc-footer - liegt als eigenstaendiges Element auf
   oberster Ebene, NICHT innerhalb von .page-wrapper. Da .bc-split aber Teil
   des Seiteninhalts (nicht des main.php-Layouts) ist, wird der Full-Bleed-
   Effekt ueber den ueblichen "Container-Breakout" per negativem Margin
   erreicht, statt die Struktur von main.php pro Seite aendern zu muessen
   (100vw + margin-left:calc(50% - 50vw) zentriert das Element ueber die
   Elternbreite hinaus exakt auf die Viewport-Breite). Keine Karten-Optik
   (kein border-radius/box-shadow) auf dieser Ebene - die sitzt nur noch auf
   der kleinen Vorschau-Karte selbst (.bc-preview-card). ---------------------- */

.bc-split {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    background: var(--color-surface);
}

.bc-split-preview {
    width: 440px;
    flex-shrink: 0;
    box-sizing: border-box;
    background: var(--color-surface-alt);
    padding: 56px 44px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-right: 1px solid var(--color-border);
}

.bc-split-form {
    flex: 1;
    min-width: 0;
    max-width: 780px;
    box-sizing: border-box;
    padding: 64px 72px;
}

/* --- Vorschau-Karte (nutzt .bc-ticket-seam-h fuer die Perforationslinie,
   Ausstanzfarbe = Hintergrund der Vorschau-Flaeche, nicht der Karte) ------- */

.bc-preview-card {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.bc-preview-card .bc-ticket-seam-h {
    --seam-cutout: var(--color-surface-alt);
}

.bc-preview-card-header {
    padding: 26px 26px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bc-preview-card-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--color-text);
}

.bc-preview-card-footer {
    padding: 18px 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* --- Formularfelder: Unterstrich statt graue Box ---------------------------
   .bc-field ersetzt Yii2s Standard-"form-group"-Wrapper (per
   $form->field($model, 'x', ['options' => ['class' => 'bc-field']])). Label
   und Fehlermeldung (help-block) werden mitgestylt, Feldname/Struktur bleibt
   von Yii2 unveraendert erzeugt - nur die Klassen/Optik aendern sich. ------ */

.bc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.bc-field label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    margin: 0;
}

.bc-field .form-control {
    border: none;
    border-radius: 0;
    border-bottom: 2px solid #e4e6e3;
    padding: 8px 2px;
    font-size: 15px;
    color: var(--color-text);
    background: transparent;
    box-shadow: none;
    height: auto;
}

.bc-field .form-control:focus {
    border-bottom-color: var(--color-primary);
    box-shadow: none;
}

.bc-field textarea.form-control {
    resize: vertical;
}

.bc-field .help-block {
    font-size: 12px;
    color: var(--color-danger);
    margin: 2px 0 0;
}

/* Dezenter erklaerender Hinweistext unter einem Feld (z. B. Zugangscode-
   Erklaerung in create.php) - anders als .help-block (Fehlermeldung, rot)
   oder .bc-hint-box (auffaellige Box fuer TODO-Platzhalter), hier bewusst
   ruhig/klein gehalten. Sitzt als drittes Kind in .bc-field und erbt dessen
   flex-gap, kein zusaetzliches Spacing noetig. */
.bc-field-note {
    font-size: 12.5px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.bc-field-note a {
    color: var(--color-primary);
    font-weight: 600;
}

.bc-field.has-error .form-control {
    border-bottom-color: var(--color-danger);
}

.bc-field-row {
    display: flex;
    gap: 18px;
}

/* Radio-Gruppe fuer den Devision-Modus (Einzel/Doppel) - kein bestehendes
   Radio-Pattern im Projekt, daher als schlichte Pill-Reihe im .bc-chip-
   Look angelehnt (gleiche Border-/Selected-Optik) statt Browser-Default. */
.bc-radio-group {
    display: flex;
    gap: 10px;
}

.bc-radio-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-border);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
}

.bc-radio-option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
}

.bc-field-row .bc-field {
    flex: 1;
    min-width: 0;
}

.bc-field-row .bc-field-narrow {
    flex: 0 0 110px;
}

/* Breitere Variante von .bc-field-narrow fuer Felder mit laengerem Label
   (z. B. "Maximale Teilnehmerzahl" im Turnierklassen-Formular) - die
   Standardbreite 110px reicht dafuer nicht aus und das Label bricht um.
   Bewusst als eigenes Modifier statt die Basisbreite global zu aendern,
   damit andere .bc-field-narrow-Verwendungen (z. B. Meldeschluss-Uhrzeit
   im Turnier-Formular) unangetastet bleiben. */
.bc-field-row .bc-field-narrow.bc-field-narrow--wide {
    flex-basis: 190px;
}

.bc-field-narrow--wide .bc-field label {
    white-space: nowrap;
}

/* --- Antispam-Zeile (inhaltlich unveraendert, nur als ruhige Zeile) ------- */

.bc-antispam-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--color-border);
    margin-bottom: 14px;
}

.bc-antispam-text {
    font-size: 13.5px;
    color: var(--color-text-secondary);
}

.bc-antispam-row input[type="number"] {
    width: 64px;
    border: none;
    border-bottom: 2px solid #e4e6e3;
    border-radius: 0;
    padding: 6px 2px;
    font-size: 14px;
    text-align: center;
    background: transparent;
    box-shadow: none;
}

.bc-antispam-row input[type="number"]:focus {
    border-bottom-color: var(--color-primary);
    outline: none;
}

/* --- Turnier-Ansicht: Identitaets-Spalte + Tabs (Screen 3) ------------------
   Full-bleed wie .bc-split (siehe dortigen Kommentar zum Breakout-Prinzip).
   .bc-identity-rail traegt Hintergrund/Rand ueber die volle Zeilenhoehe
   (align-items:stretch im Elternflex), waehrend .bc-identity-rail-inner das
   eigentliche position:sticky-Element ist - so bleibt der Inhalt beim
   Scrollen oben kleben, aber der abgesetzte Hintergrund deckt trotzdem die
   volle Hoehe der (meist laengeren) Hauptspalte ab. ------------------------- */

.bc-view-layout {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    background: var(--color-surface);
}

.bc-identity-rail {
    /* Bewusst 440px statt der Mockup-Vorgabe 300px - einheitlich mit
       .bc-split-preview aus Phase 2 (siehe dort). */
    width: 440px;
    flex-shrink: 0;
    box-sizing: border-box;
    background: var(--color-surface-alt);
    border-right: 1px solid var(--color-border);
}

.bc-identity-rail-inner {
    position: sticky;
    top: 0;
    box-sizing: border-box;
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: 100vh;
    overflow-y: auto;
}

.bc-rail-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bc-rail-brand img {
    height: 22px;
    width: auto;
}

.bc-rail-brand-text {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-text);
}

.bc-rail-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.25;
}

/* Optionales Turnier-Bild/Logo (Tournament::image_url) - kleine, runde
   Miniatur oberhalb des Turniernamens. Wird nur gerendert, wenn die
   optionale URL gesetzt ist (siehe view.php); onerror blendet das
   Element bei einem kaputten/nicht mehr erreichbaren externen Link
   selbst aus, statt ein kaputtes Bild-Icon zu zeigen. */
/* Breites Banner-Bild (16:9) statt rundem Thumbnail - sitzt als erstes
   Element vor dem gepolsterten Inhalt von .bc-identity-rail bzw.
   .bc-mobile-ticket, damit es ueber die volle Spalten-/Ticket-Breite geht
   (nicht durch das Innen-Padding eingeschraenkt ist). object-fit:cover
   schneidet nicht-16:9-Bilder sauber zu statt sie zu verzerren. */
.bc-rail-banner {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--color-surface-white);
}

.bc-rail-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px dashed var(--color-border-strong);
}

.bc-rail-value {
    font-size: 14px;
    color: var(--color-text);
    margin-top: 3px;
    font-weight: 600;
}

.bc-rail-notice {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 3px;
    line-height: 1.5;
}

.bc-rail-link {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    border-radius: 9px;
    background: #fff;
    padding: 0 12px;
    box-sizing: border-box;
}

.bc-rail-link input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 11.5px;
    color: var(--color-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    outline: none;
    text-overflow: ellipsis;
}

.bc-rail-link button {
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-family-base);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-primary);
}

/* Echter QR-Code (Gast-Link), serverseitig als Data-URI erzeugt - siehe
   view.php. Gleiche Groesse/Position wie der frühere gestreifte
   Platzhalter, jetzt mit weissem Kartenhintergrund statt Streifenmuster. */
.bc-qr-code {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--color-border);
}

/* Datum/Meldeschluss + QR-Code (admin-only) als gemeinsame Zeile - .bc-rail-
   block liefert bereits flex-direction:column, hier explizit auf row
   umgestellt. Auf Mobile (siehe 900px-Breakpoint) wird daraus wieder eine
   Spalte, per order-Property dann QR-Code vor Datum/Meldeschluss. */
.bc-rail-daterow {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

.bc-rail-daterow-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bc-rail-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px dashed var(--color-border-strong);
}

.bc-rail-btn {
    flex: 1;
    height: 38px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-text) !important;
    text-decoration: none !important;
}

/* Aufgewertete Text-Link-Zeile (aktuell "Einladung ansehen") - bewusst
   kein Button (kein Rahmen/keine Fuellfarbe im Ruhezustand), aber ein
   dezenter visueller Anker (Dokument-Icon links, Pfeil rechts) statt
   reinem Fliesstext-Link. padding/margin liegen nur im :hover-Zustand,
   damit der Ruhezustand buendig mit den uebrigen Meta-Infos abschliesst
   und der Hover-Hintergrund trotzdem ueber die Spalten-Innenabstaende
   hinaus "ausbrechen" kann, ohne die Content-Position zu verschieben
   (padding zieht Icon/Text/Pfeil nach innen, der gleich grosse negative
   margin gleicht das nach aussen wieder aus). */
.bc-rail-textlink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border-radius: 8px;
    background: transparent;
    color: #181b17 !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background-color 150ms ease, padding 150ms ease, margin 150ms ease;
}

.bc-rail-textlink:hover {
    background: #eef4fc;
    padding: 8px 10px;
    margin: 0 -10px;
}

.bc-rail-textlink-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bc-rail-textlink-icon {
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    color: var(--color-primary);
    font-size: 14px;
}

.bc-rail-textlink-arrow {
    flex-shrink: 0;
    color: var(--color-primary);
}

.bc-rail-btn-danger {
    background: var(--color-danger-tint);
    border: none;
    color: #963823 !important;
}

/* Begrenzt die Anmelde-/Devision-Formulare auf eine lesbare Breite - ohne
   das wuerden .form-control-Eingabefelder (width:100% aus Bootstrap, siehe
   CLAUDE.md) auf breiten Viewports ueber die volle .bc-view-main-Breite
   gestreckt. width:100% sorgt dafuer, dass es auf schmalen Viewports
   trotzdem normal mitschrumpft statt eine feste Breite zu erzwingen. 620px
   statt urspruenglich 560px (siehe Chat: "Name des Programmpunkts" brach in
   der Name/Limit/Warteliste-Zeile in _formDevision.php um, weil die beiden
   190px-breiten .bc-field-narrow--wide-Spalten der Namensspalte bei 560px
   zu wenig Platz liessen). */
.devision-form {
    width: 100%;
    max-width: 620px;
}

.bc-view-main {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 36px 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.bc-tabs {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid var(--color-border);
}

.bc-tab {
    padding: 0 0 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-family: var(--font-family-base);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: -1px;
}

.bc-tab:hover {
    color: var(--color-text);
}

.bc-tab.is-active {
    color: var(--color-text);
    font-weight: 700;
    border-bottom-color: var(--color-primary);
}

.bc-tab-panel {
    display: none;
}

.bc-tab-panel.is-active {
    display: block;
}

.bc-view-main-placeholder {
    color: var(--color-text-muted);
    font-size: 14px;
    font-style: italic;
}

/* --- Mobile-Ticket (Gast/Teilnehmer, Screen 3 "Mobile Guest") --------------
   Nur im Markup vorhanden, wenn !isTournamentAdmin (siehe view.php). Auf
   Desktop immer versteckt; ab 768px ersetzt es optisch die Desktop-
   Identitaets-Spalte (die dann per .bc-view-layout--compact-mobile
   ausgeblendet wird) - die Tab-Leiste darunter bleibt sichtbar/bedienbar
   (siehe 768px-Breakpoint weiter unten), das "Anmelden"-Panel bleibt
   dasselbe, einmal gerenderte Formular (ist ohnehin per Default aktiv),
   keine zweite _formPerson-Ausgabe noetig. ------------------------------- */

.bc-mobile-ticket {
    display: none;
    /* Gleicher abgesetzter Hintergrund wie .bc-identity-rail (Desktop) statt
       reinem Weiss - optische Konsistenz zwischen Mobile-Ticket und Desktop-
       Identitaets-Spalte. Das Formular darunter bleibt auf normalem
       Seitenhintergrund (.bc-ticket-seam-h-Cutout unveraendert, da die
       Flaeche AUSSERHALB der Karte weiterhin var(--color-surface) ist). */
    background: var(--color-surface-alt);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
}

.bc-mobile-ticket-header {
    padding: 20px 20px 16px;
}

.bc-mobile-ticket-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--color-text);
    margin-top: 4px;
}

.bc-mobile-ticket-dates {
    font-size: 12.5px;
    color: var(--color-text-secondary);
    margin-top: 6px;
}

.bc-mobile-ticket-footer {
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bc-mobile-ticket-info {
    font-size: 11.5px;
    color: var(--color-text-muted);
}

/* --- Devisions-Chips (ersetzt die Checkbox-Liste in _formPerson.php) -------
   Rein visuelle Huelle um die bestehende Html::checkbox('devisions[]', ...)-
   Logik: die native Checkbox bleibt im DOM (nur unsichtbar gemacht), das
   umschliessende <label> macht den ganzen Chip klickbar. Der "ausgewaehlt"-
   Zustand kommt ueber :has(input:checked) rein aus CSS, ohne zusaetzliches
   JS - $disabledCheckbox/$valueCheckbox=null aus der PHP-Logik sorgen wie
   bisher dafuer, dass deaktivierte Chips gar nicht erst submitted werden
   koennen (natives disabled-Attribut blockiert das Toggle bereits). -------- */

/* Eine Zeile pro Turnierklasse (statt einer umbrechenden Chip-Wolke) - jede
   Zeile enthaelt den Chip und ggf. seine Extra-Felder direkt dahinter (siehe
   .bc-chip-row), dadurch ist die Zuordnung immer eindeutig. */
.bc-chip-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bc-chip-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.bc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 10px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-border);
    background: #fff;
    cursor: pointer;
    user-select: none;
}

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

/* .is-selected ist der JS-Fallback fuer Browser ohne :has()-Unterstuetzung
   (u.a. Firefox < 121) - siehe change-Listener in view.php. Beide Regeln
   fuehren zum selben visuellen Ergebnis, ueberschneiden sich also nicht. */
.bc-chip:has(.bc-chip-input:checked),
.bc-chip.is-selected {
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
}

.bc-chip:has(.bc-chip-input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bc-chip.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* "Bereits angemeldet"-Chip - bewusst deaktiviert wirkend (kein Rahmen, kein
   Hover, Standard-Cursor statt Pointer), da er nicht mehr selbst anklickbar
   ist - Abmelden laeuft jetzt ueber den eigenen bc-chip-deregister-btn
   daneben (siehe registerJs in view.php). Dezenter Fuellhintergrund statt
   Rahmenlinie grenzt ihn trotzdem sichtbar von reinem Fliesstext ab. */
.bc-chip--own-registration {
    border: none;
    background: var(--color-bg);
    cursor: default;
}

/* Nur die Varianten mit hinterlegten Zusatzangaben (TTR/LivePZ, Doppelpartner)
   sind klickbar - reiner Lese-Klick, siehe .bc-chip--view-own/registerJs in
   view.php. Chips ohne Zusatzangaben (reiner Name) bleiben bei cursor:default
   von .bc-chip--own-registration oben, da es dort nichts zusaetzlich
   anzuzeigen gaebe. */
.bc-chip--view-own {
    cursor: pointer;
}

.bc-chip-check-icon {
    font-size: 11px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Eigener Loeschen-Button neben dem "bereits angemeldet"-Chip statt der
   Chip selbst klickbar zu machen - gleiche runde Icon-Button-Optik wie
   .bc-participant-action-btn in der Teilnehmerliste, damit Chip (Auswahl)
   und Abmelden-Aktion sich klar unterscheiden lassen. */
.bc-chip-deregister-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.bc-chip-deregister-btn:hover {
    background: var(--color-danger-tint);
    color: #963823;
}

.bc-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bc-chip-dot--open {
    background: var(--color-success);
}

.bc-chip-dot--waitlist {
    background: var(--color-warning);
}

.bc-chip-dot--full {
    background: var(--color-danger);
}

.bc-chip-dot--registered {
    background: var(--color-primary);
}

.bc-chip-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text);
}

.bc-chip-name--strike {
    text-decoration: line-through;
}

.bc-chip-count {
    font-size: 12px;
    color: #6b7169;
}

/* --- Flash-Meldungen als schwebender Toast (main.php) -----------------------
   .bc-toast-container ist bewusst ausserhalb von .page-wrapper platziert und
   position:fixed - nimmt dadurch auf KEINER Seite (full-bleed oder normales
   .page-wrapper-Layout) Platz im Dokumentfluss ein, verursacht also nie einen
   Versatz/eine Luecke. Karten-Optik (weiss, Schatten, farbiger linker Rand,
   Icon) unveraendert aus der vorherigen Inline-Version uebernommen - nur
   Position/Animation/Auto-Dismiss sind neu. Alle
   Yii::$app->session->getFlash(...)-Aufrufe/Keys bleiben unveraendert.

   Top-center statt Top-right (siehe Chat: der Toast "ging leicht unter" in
   der Ecke) - liegt jetzt im natuerlichen Blickpfad direkt unter der Nav,
   analog zu GitHub/Linear/Vercel. Zusaetzlich (siehe registerJs in main.php):
   nur noch Erfolgsmeldungen (bc-flash--success) verschwinden automatisch,
   Fehler/Warnungen bleiben stehen bis manuell geschlossen, und der
   Auto-Dismiss-Timer pausiert bei Hover/Fokus statt stur weiterzulaufen. ---- */

.bc-toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 380px;
    max-width: calc(100vw - 48px);
    pointer-events: none;
}

.bc-flash {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border-left: 4px solid transparent;
    padding: 14px 40px 14px 18px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
    position: relative;
    pointer-events: auto;
    animation: bc-toast-in 0.3s ease-out;
}

.bc-flash.is-hiding {
    animation: bc-toast-out 0.25s ease-in forwards;
}

/* Vertikales Rein-/Rausgleiten statt horizontal - passte bei der frueheren
   rechten Ecken-Position (Slide von rechts), wirkt bei der jetzigen
   Top-center-Position aber nur noch bei einem Slide von oben natuerlich. */
@keyframes bc-toast-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bc-toast-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-12px);
    }
}

.bc-flash i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 15px;
}

.bc-flash-close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: none;
    padding: 6px;
    font-size: 16px;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
}

.bc-flash-close:hover {
    color: var(--color-text);
}

.bc-flash--success {
    border-left-color: var(--color-success);
}

.bc-flash--success i {
    color: var(--color-success);
}

.bc-flash--danger {
    border-left-color: var(--color-danger);
}

.bc-flash--danger i {
    color: var(--color-danger);
}

.bc-flash--warning {
    border-left-color: var(--color-warning);
}

.bc-flash--warning i {
    color: var(--color-warning);
}

/* --- Teilnehmerübersicht (Screen 4, "Teilnehmer"-Tab in view.php) -----------
   Reine Darstellung bestehender Werte aus DevisionPersonMappingDataAccess
   (siehe _participantsOverview.php) - keine neue Businesslogik. Suche/Filter
   laufen rein clientseitig ueber bereits gerenderte Zeilen (kein neuer
   Endpunkt, siehe registerJs-Block in view.php). Auf echte Pagination wird
   bewusst verzichtet (bisher nirgends serverseitig vorhanden). ------------- */

.bc-participants-stat-bar {
    display: flex;
    padding: 20px 0;
    margin-bottom: 32px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.bc-stat {
    flex: 1;
    text-align: center;
}

.bc-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-text);
}

.bc-stat-value--confirmed {
    color: var(--color-success);
}

.bc-stat-value--waitlist {
    color: #8a6318;
}

.bc-stat-value--free {
    color: var(--color-primary);
}

.bc-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.bc-stat-divider {
    width: 1px;
    background: var(--color-border);
}

.bc-participants-toolbar {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.bc-participants-search {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
    border: none;
    border-bottom: 2px solid #e4e6e3;
    border-radius: 0;
    padding: 8px 2px;
    font-size: 14px;
    color: var(--color-text);
    background: transparent;
    box-shadow: none;
}

.bc-participants-search:focus {
    outline: none;
    border-bottom-color: var(--color-primary);
}

.bc-participants-search::placeholder {
    color: #b7bab3;
}

/* Optisch ein reiner Text-Trigger (wie im Mockup), technisch ein natives
   <select> - liefert Tastatur-/Screenreader-Bedienbarkeit "for free" statt
   ein eigenes Dropdown-Widget nachzubauen. */
.bc-participants-filter {
    border: none;
    background: transparent;
    font-family: var(--font-family-base);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    padding: 4px 0;
}

.bc-participants-filter:focus {
    outline: none;
}

.bc-participant-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 820px;
}

.bc-participant-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0 14px;
}

/* Ampel-Punkt vor dem Devisionsnamen (siehe $capacityStatus in
   _participantsOverview.php) - gleiche Groesse/Form wie .bc-chip-dot, aber
   eigene Klasse, da semantisch eigenstaendig (Gruppen-Kapazitaet statt
   Chip-Auswahlzustand). */
.bc-participant-group-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bc-participant-group-dot--free {
    background: var(--color-success);
}

.bc-participant-group-dot--waitlist {
    background: var(--color-warning);
}

.bc-participant-group-dot--full {
    background: var(--color-danger);
}

/* Gestrichelte Trennlinie zwischen zwei Gruppen (nicht vor der ersten) */
/* JS-verwaltete Klasse statt reinem Geschwister-Selektor (siehe
   updateFirstVisibleGroup() in view.php) - eine reine CSS-Geschwister-Regel
   (+) wertet die DOM-Reihenfolge aus, nicht die Sichtbarkeit, und wuerde bei
   per Filter ausgeblendeten (display:none) Gruppen faelschlich weiterhin
   eine Linie zeigen, sobald eine Gruppe nicht zufaellig die erste im DOM ist. */
.bc-participant-group:not(.is-first-visible-group) .bc-participant-group-header {
    border-top: 2px dashed var(--color-border);
    margin-top: 8px;
    padding-top: 14px;
}

.bc-participant-group-name {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
}

.bc-participant-group-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* Dynamisches Spaltenlayout statt fester Breiten: Bei Einzel-Klassen gibt es
   nur EINE Spalte (Name), die per flex:1 den gesamten verfuegbaren Platz
   einnimmt (siehe .bc-participant-col-name--full, Partnerspalte wird fuer
   Einzel-Klassen in _participantsOverview.php gar nicht erst gerendert).
   Bei Doppel-Klassen teilen sich Name- und Partnerspalte den Platz zu
   gleichen Teilen (beide flex:1), damit mehr vom jeweiligen Namen lesbar
   bleibt statt einer festen 260px-Breite. */
.bc-participant-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 5px 4px;
    border-top: 1px solid #f2f3f1;
}

.bc-participant-col-name,
.bc-participant-col-partner {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bc-participant-col-name--full {
    flex: 1;
}

/* Name + Score + Verein als EINE Zeile ("Sebastian Bosse (1700) · TuSLi") -
   overflow/ellipsis sitzt am gemeinsamen Container, nicht an den einzelnen
   Spans, damit lange Kombinationen als Ganzes sauber abgeschnitten werden
   statt dass nur ein einzelner Teil isoliert umbricht/abschneidet. */
.bc-participant-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bc-participant-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--color-text);
}

/* Fortlaufende Nummer je Devision vor dem Namen (siehe $row['position'] in
   _participantsOverview.php) - Warteliste beginnt bewusst wieder bei 1.
   Inline im Fliesstext statt eigene Grid-/Flex-Spalte, damit die bereits
   bestehende (und schon zweimal angepasste) Mobile-Umbruch-Logik der
   Zeile unangetastet bleibt. */
.bc-participant-number {
    display: inline-block;
    min-width: 20px;
    color: var(--color-text-muted);
    font-weight: 700;
    font-size: 13px;
}

/* "(Score) · Verein" gemeinsam gedaempft hinter dem Namen - bewusst ein
   einzelner Span statt getrennter Score-/Verein-Spans, da beide Teile
   gleich gestylt sind und nur optional/kombiniert vorkommen (siehe
   $metaText in _participantsOverview.php). */
.bc-participant-meta {
    font-weight: 400;
    color: var(--color-text-secondary);
    font-size: 13px;
    margin-left: 6px;
}

/* Status-Icon statt Punkt+Text - rund, 22x22px. Nur zwei visuelle Zustaende:
   bestaetigt (Haken, gilt auch fuer Warteliste-Zeilen) und unbestaetigt
   (Fragezeichen) - die Warteliste-Zugehoerigkeit zeigt stattdessen die
   eigene Trennzeile (.bc-participant-waitlist-divider) an. */
.bc-participant-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.bc-participant-status-icon--confirmed {
    background: var(--color-success-tint);
    color: var(--color-success-hover);
}

.bc-participant-status-icon--pending {
    background: #f2f3f1;
    color: var(--color-text-muted);
}

/* Warteliste-Trennzeile - steht einmalig direkt vor der ersten
   Warteliste-Zeile einer Gruppe (siehe $waitlistDividerShown in
   _participantsOverview.php). Label links, duenne Linie danebenliegend
   fuellt den Rest der Zeile. */
.bc-participant-waitlist-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px 2px;
}

.bc-participant-waitlist-divider-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a6318;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Platzangabe innerhalb des Warteliste-Labels bewusst NICHT im auffaelligen
   Gelb/Fett/Uppercase des restlichen Labels, sondern gleiche dezente Optik
   wie .bc-participant-group-count im Klassenkopf - beide zeigen dieselbe Art
   von Zusatzinfo (Platzangabe), sollen deshalb auch gleich aussehen. */
.bc-participant-waitlist-divider-count {
    text-transform: none;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--color-text-muted);
}

.bc-participant-waitlist-divider-line {
    flex: 1;
    height: 1px;
    background: #f2f3f1;
}

/* Bewusst dauerhaft sichtbar (nicht mehr nur bei Hover) - Loeschen-Icon
   ist ohnehin schon admin-only ($canDelete in _participantsOverview.php),
   analog zum "Turnierklassen verwalten"-Tab, wo die Icons ebenfalls
   permanent gezeigt werden. */
.bc-participant-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bc-participant-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--color-text-muted) !important;
    text-decoration: none !important;
    font-size: 14px;
}

.bc-participant-action-btn:hover {
    background: var(--color-danger-tint);
    color: #963823 !important;
}

/* Waehrend Suche/Filter laufen (siehe view.php) ausgeblendete Zeilen/Gruppen */
.bc-participant-row.is-filtered-out,
.bc-participant-group.is-filtered-out {
    display: none;
}

/* --- Textseiten (Impressum/Datenschutz/Kontakt) -----------------------------
   Bewusst KEIN Full-Bleed/page-wrapper--flush - bei langem Fliesstext ist
   eine begrenzte Lesebreite wichtiger als die volle Bildschirmbreite (anders
   als bei den Split-/Tab-Layouts). .page-wrapper liefert bereits
   max-width:1140px + vertikales Padding (site.css); .bc-textpage grenzt die
   Lesebreite hier zusaetzlich auf 720px ein und zentriert. ------------------ */

.bc-textpage {
    max-width: 720px;
    margin: 0 auto;
}

.bc-textpage h2 {
    font-size: 18px;
    margin: 36px 0 12px;
}

.bc-textpage h2:first-of-type {
    margin-top: 28px;
}

.bc-textpage p {
    color: var(--color-text-secondary);
    margin: 0 0 16px;
}

.bc-textpage ul {
    margin: 0 0 16px;
    padding-left: 20px;
    color: var(--color-text-secondary);
}

.bc-textpage li {
    margin-bottom: 6px;
}

.bc-textpage strong {
    color: var(--color-text);
}

/* Dezente Hinweis-Box fuer noch offene TODO-Platzhalter im Rechtstext
   (z. B. "[KONKRETE LOESCHFRIST BITTE ERGAENZEN...]" in privacy.php) - faellt
   auf, wirkt aber nicht wie ein Fehler (warnungsgelb statt Fehlerrot). Der
   Textinhalt selbst (inkl. eckiger Klammern) bleibt unveraendert, nur in ein
   eigenes Element ausgelagert statt im normalen Fliesstext zu stehen. */
.bc-hint-box {
    background: var(--color-warning-tint);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-card);
    padding: 14px 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #8a6318;
    margin: 0 0 16px;
}

/* Hinweis-Box mit Ueberschrift+Text (z. B. "Veranstaltung noch nicht
   bestaetigt" in tournament/view.php) - ersetzt die alte AdminLTE3-Klasse
   "callout callout-warning", deren CSS mit der AdminLTE3-Entfernung (siehe
   CLAUDE.md) mit entfernt wurde. Ohne eigenes Styling fiel die Box auf reine
   Bootstrap4-Browser-Defaults zurueck (u. a. falsche Schriftart statt
   "Public Sans") statt zum Rest der .bc-*-gestylten Seite zu passen. Gleiche
   Farb-Tokens wie .bc-hint-box, da beide denselben "auffaellig aber kein
   Fehler"-Zweck erfuellen. */
.bc-notice-callout {
    background: var(--color-warning-tint);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-card);
    padding: 16px 20px;
    font-family: var(--font-family-base);
    margin-bottom: 20px;
}

.bc-notice-callout h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.bc-notice-callout p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* --- Bestaetigungs-Modal (z. B. Abmeldung aus einer Devision, siehe
   #deregisterModalOverlay in _formPerson.php) - eigenstaendige Overlay-
   Komponente im Kartenstil, kein Bootstrap-Modal/JS-Framework, reines
   Vanilla-JS/CSS (Sichtbarkeit ueber .is-active-Klasse). ------------------- */

.bc-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(24, 27, 23, 0.5);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bc-modal-overlay.is-active {
    display: flex;
}

.bc-modal-card {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card-lg);
    padding: 28px;
    max-width: 380px;
    width: 100%;
    box-sizing: border-box;
}

.bc-modal-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 10px;
}

.bc-modal-text {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

.bc-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Breiteres Modal fuer echte Formularfelder (TTR/LivePZ-/Doppelpartner-Popup)
   statt der kompakten Bestaetigungstexte der anderen Modals. Etwas breiter als
   die urspruenglichen 440px, damit auch bei sichtbarem "Von Turnierklasse
   abmelden"-Button noch spuerbar Luft bleibt (siehe .bc-modal-actions--split
   unten fuer den eigentlichen Umbruch-Mechanismus). */
.bc-modal-card--form {
    max-width: 480px;
}

.bc-modal-card--form .bc-field:last-of-type {
    margin-bottom: 24px;
}

/* "Von Turnierklasse abmelden" oben, Abbrechen/Uebernehmen darunter - beide
   Zeilen rechtsbuendig, damit die gestapelten Aktionen optisch als EINE
   zusammengehoerige Gruppe wirken statt wie zwei gegensaetzlich ausgerichtete
   Bloecke (erste Version hatte den Abmelden-Button links, was seltsam wirkte).
   Eigener Modifier statt .bc-modal-actions direkt umzubauen, da die anderen
   Modals weiterhin nur rechtsbuendige Aktionen in einer Zeile brauchen.
   Bewusst IMMER ein fester Zeilenumbruch (flex-direction:column) statt
   organischem flex-wrap: Bei sichtbarem "Von Turnierklasse abmelden"-Button
   sind die drei Buttons zusammen breiter als jede sinnvolle Modal-Breite -
   ein erzwungener, vorhersehbarer Umbruch sieht dadurch immer gleich/sauber
   aus, statt je nach Textlaenge unterschiedlich (und teils mitten im Wort)
   umzubrechen. */
.bc-modal-actions--split {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.bc-modal-actions--split > .bc-btn-danger-soft {
    align-self: flex-end;
}

.bc-modal-actions--split > .bc-modal-actions {
    justify-content: flex-end;
}

/* --- Responsive ------------------------------------------------------------*/

@media (max-width: 600px) {
    .bc-toast-container {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
        transform: none;
    }

    /* Bei Doppel-Klassen bekommt die Namensspalte eine eigene Zeile
       (erzwungener Umbruch, siehe flex-basis:100% unten), Status-Icon/
       Loeschen-Button stehen dann zusammen MIT der Partnerspalte auf der
       zweiten Zeile. Bei Einzel-Klassen (.bc-participant-col-name--full,
       keine Partnerspalte vorhanden) bleibt die Namensspalte dagegen
       schrumpfbar (flex:1/min-width:0 aus der Basisregel) und teilt sich die
       EINE Zeile mit Status-Icon/Loeschen-Button, statt dass diese auf eine
       eigene, davon optisch abgesetzte zweite Zeile rutschen - beides waere
       sonst faelschlich zur naechsten Anmeldung gehoerend gewirkt statt zur
       eigenen Zeile (galt vorher fuer Doppel UND Einzel gleichermassen). */
    .bc-participant-row {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 4px 12px;
    }

    .bc-participant-col-name:not(.bc-participant-col-name--full) {
        flex-basis: 100%;
    }

    /* margin-left:auto nur auf dem Status-Icon (immer das erste der beiden
       admin-only Elemente in dieser Reihenfolge, siehe
       _participantsOverview.php) schiebt es zusammen mit dem danach
       folgenden Loeschen-Button an den rechten Rand derselben Zeile wie die
       (bei Doppel-Klassen vorhandene) Partnerspalte. */
    .bc-participant-status-icon {
        margin-left: auto;
    }

    @keyframes bc-toast-in {
        from {
            opacity: 0;
            transform: translateY(-16px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes bc-toast-out {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-16px);
        }
    }
}

/* Umschaltung Desktop-Identitaets-Spalte <-> Mobile-Ticket fuer Gast/
   Teilnehmer (siehe view.php, .bc-view-layout--compact-mobile wird nur fuer
   !isTournamentAdmin gesetzt - Admin behaelt auf jeder Breite die (ggf.
   gequetschte) Desktop-Struktur aus dem 900px-Breakpoint unten). Die
   Tab-Leiste selbst bleibt sichtbar (nur kompakter gestylt) - die bestehende
   click-basierte Tab-Umschaltung aus view.php funktioniert unveraendert
   unabhaengig von der Viewport-Breite, dadurch koennen Gast/Teilnehmer auch
   auf Mobile zwischen "Anmelden" und "Teilnehmer" wechseln (die "Teilnehmer"-
   Tab-Schaltflaeche/-Inhalt ist ohnehin fuer alle Rollen unveraendert
   sichtbar, keine neue Berechtigung noetig). */
@media (max-width: 768px) {
    .bc-mobile-ticket {
        display: block;
    }

    .bc-view-layout--compact-mobile .bc-identity-rail {
        display: none;
    }

    .bc-view-layout--compact-mobile .bc-tabs {
        gap: 20px;
        margin-bottom: -4px;
    }

    .bc-view-layout--compact-mobile .bc-tab {
        padding-bottom: 10px;
        font-size: 13px;
    }

    .bc-view-layout--compact-mobile .bc-view-main {
        padding: 20px;
    }

    /* Chips im Fliesstext, etwas kompakter als Desktop (Mockup-Werte) -
       Zustandslogik/Werte ($valueCheckbox/$disabledCheckbox) unveraendert,
       nur die Optik. Die Kapazitaetszahl (.bc-chip-count) zeigt das Mockup
       auf Mobile gar nicht erst an, um Platz zu sparen. */
    .bc-chip {
        gap: 7px;
        padding: 9px 14px 9px 9px;
    }

    .bc-chip-dot {
        width: 6px;
        height: 6px;
    }

    .bc-chip-name {
        font-size: 12.5px;
    }

    .bc-chip-count {
        display: none;
    }

    .bc-participants-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .bc-participants-search {
        max-width: none;
    }
}

@media (max-width: 900px) {
    .bc-nav-inner {
        padding: 20px 24px;
    }

    .bc-footer-inner {
        padding: 18px 24px;
    }

    .bc-hero-title {
        font-size: 36px;
    }

    .bc-hero-ticket {
        display: block;
    }

    .bc-hero-ticket .bc-ticket {
        flex-direction: column;
    }

    .bc-ticket-seam-v {
        display: none;
    }

    .bc-hero-ticket-status {
        width: auto;
    }

    .bc-journey-row {
        flex-direction: column;
        gap: 32px;
    }

    .bc-journey-line {
        display: none;
    }

    .bc-nav-links {
        gap: 14px;
    }

    .bc-nav-link {
        display: none;
    }

    .bc-split {
        flex-direction: column;
    }

    .bc-split-preview {
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .bc-split-form {
        padding: 36px 24px;
        max-width: none;
    }

    .bc-field-row {
        flex-direction: column;
        gap: 0;
    }

    .bc-field-row .bc-field-narrow {
        flex: 1;
    }

    .bc-field-row .bc-field-narrow.bc-field-narrow--wide {
        flex: 1;
    }

    .bc-view-layout {
        flex-direction: column;
    }

    .bc-identity-rail {
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .bc-identity-rail-inner {
        position: static;
        max-height: none;
    }

    /* Admin behaelt auf jeder Breite die Identitaets-Spalte (siehe Kommentar
       oben am 768px-Breakpoint) - hier auf schmalen Viewports die gewuenschte
       Reihenfolge Link -> QR-Code -> Datum/Meldeschluss statt der Desktop-
       Zeile nebeneinander. */
    .bc-rail-daterow {
        flex-direction: column;
    }

    .bc-rail-daterow .bc-qr-code {
        order: -1;
        align-self: flex-start;
        margin-bottom: 4px;
    }

    .bc-view-main {
        padding: 28px 24px;
    }

    .bc-tabs {
        gap: 20px;
        overflow-x: auto;
    }
}