/* 07-hallenbelegung.css — Teil der Aufteilung von style.css (2026-08-10).
   Urspruenglich Zeilen 4369-4552 der einen Datei. Hallenbelegung (Scope .hb).
   Diese und alle anderen css/*.css-Dateien werden auf JEDER Seite
   gemeinsam geladen, in fester Reihenfolge - die Kaskade ist exakt
   dieselbe wie vorher, nur auf mehrere Dateien verteilt. */

/* ===== Hallenbelegung (hb-) =====================================
   Nutzt das bestehende Design-System wieder:
   - Tokens: var(--tigers-yellow), var(--danger-red), var(--radius)
   - Glass-Bühne + .content-Scope wie .content.aw (Auswertungen)
   - Kachel-, Tabellen-, Button- und Tab-Muster analog .aw-tile,
     .aw-table, .aw-btn und .aw-rtab, gleiche rgba-Glass-Werte
   ================================================================ */

/* Dunkle Glass-Bühne: globalen hellen .content-Kasten neutralisieren
   (1:1 wie .content.aw) */
.content.hb { background: transparent; border: none; box-shadow: none; padding: 0; }
.content.hb h1, .content.hb h2, .content.hb h3 { color: rgb(var(--ink)); border: none; padding: 0; margin: 0 0 4px; letter-spacing: normal; text-align: left; }
/* Direkte Kinder von .content sind global helle Kästen -> neutralisieren (1:1 wie .content.aw > div) */
.content.hb > div { margin: 0 0 18px; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; }

/* Dashboard-Raster */
.hb-dashboard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.hb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.hb-tiles > * { min-width: 0; }

/* KPI-Kachel = .aw-tile-Rezept */
.hb-tile {
    background: var(--glass-06);
    border: 1px solid var(--glass-bg-strong);
    border-radius: 13px;
    padding: 16px 18px;
}
/* Seit 2026-08-07 ist eine der Kacheln ein <a> (Weg zur Trainer-Zuordnung in
   der Admin-Konsole). Ohne diese Regel zieht sie sich Unterstrich und
   Linkfarbe aus der globalen a-Regel und sieht neben den anderen drei
   Kacheln falsch aus. */
a.hb-tile { display: block; text-decoration: none; transition: background .15s, border-color .15s; }
a.hb-tile:hover { background: var(--glass-12); border-color: var(--tigers-yellow); }
.hb-tile .l { font-size: 0.74rem; color: var(--glass-60); }
.hb-tile-num { font-size: 1.8rem; font-weight: 800; color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); margin-top: 2px; }

/* Inhalts-Karte = .aw-sheet-Glasrezept */
.hb-card {
    background: var(--glass-12);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid var(--glass-22);
    border-radius: 18px;
    box-shadow: 0 12px 36px var(--glass-shadow);
    padding: 22px 24px;
}
.hb-card h2, .hb-card h3 { color: rgb(var(--ink)); }

/* Belegungs-Raster (Zeit × Halle) – Matrix, daher mit Zellrahmen */
.hb-grid { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.85rem; }
.hb-grid th { background: var(--tigers-yellow); color: var(--tigers-black); padding: 7px 9px; text-align: left; font-weight: 800; }
.hb-grid td { border: 1px solid var(--glass-12); padding: 7px 9px; color: var(--on-glass); }
.hb-grid .hb-zeit { color: var(--glass-60); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Verweis auf den gespeicherten Trainingsplan einer Trainingszeit. */
.hb-grid a.hb-planlink { color: var(--tigers-yellow-text); text-decoration: none; font-weight: 700; }
.hb-grid a.hb-planlink:hover { text-decoration: underline; }
.hb-grid td.hb-planleer { color: var(--glass-40); }
/* An einem Termin koennen mehrere Plaene haengen (Feldplan + Torwartplan).
   Sie stehen untereinander, nicht nebeneinander: nebeneinander liest sich in
   einer schmalen Tabellenspalte wie ein einziger langer Titel. */
.hb-grid td.hb-planzelle { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.hb-grid .hb-planzeit { font-weight: 600; font-size: 0.78rem; color: var(--glass-60); }

/* Zellen-Status: gleiche Tints wie .aw-pill.team / .aw-pill.free */
.hb-belegt { background: var(--status-blue-bg); color: var(--status-blue); font-weight: 700; }
.hb-frei   { background: var(--status-teal-bg); color: var(--status-teal-ink); font-style: italic; }

.hb-woche-tag { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); margin: 16px 0 4px; }

/* Ansicht-Umschalter = .aw-rtab-Muster */
.hb-viewnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.hb-viewnav a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-22);
    color: var(--glass-70); font-size: 0.88rem; font-weight: 600; text-decoration: none;
    backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.hb-viewnav a:hover { background: var(--glass-16); color: rgb(var(--ink)); }
.hb-viewnav a.active { background: var(--tigers-yellow); color: var(--tigers-nav-bg); font-weight: 800; }

/* Selects in Zuordnungs-/Import-Karten = .aw-filters select-Rezept */
.hb-halle-sel, .hb-card select {
    background: var(--glass-black-30); color: rgb(var(--ink)); border: 1px solid var(--glass-22);
    border-radius: 9px; padding: 9px 11px; font-size: 0.85rem;
}
.hb-halle-sel option, .hb-card select option { color: var(--text-color); }

/* Buttons: Geometrie wie .aw-btn-*, semantische Farben */
.hb-btn {
    border: 1px solid var(--glass-22); background: var(--glass-08); color: rgb(var(--ink));
    border-radius: 9px; padding: 10px 18px; font-weight: 600; font-size: 0.82rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
    white-space: nowrap; min-width: fit-content;
}
.hb-btn-y   { background: var(--tigers-yellow); color: var(--tigers-black); border: none; font-weight: 800; }
.hb-btn-ok  { background: var(--status-teal); color: var(--status-teal-text); border: none; font-weight: 800; }
.hb-btn-warn{ background: var(--danger-red); color: var(--white); border: none; font-weight: 800; }
.hb-btn:hover, .hb-btn-y:hover, .hb-btn-ok:hover, .hb-btn-warn:hover { filter: brightness(1.08); }
/* Die hb-Buttons sind teils <a> (Wochen-Navigation). Die globalen Linkregeln
   a:visited / a:hover (Klasse+Typ = staerker als die reine Klasse .hb-btn)
   haben deren Text nach dem ersten Klick auf --text-color (#333) gezogen –
   im Dunkelmodus praktisch unlesbar (2026-08-01). Farbe je Zustand fixieren. */
a.hb-btn, a.hb-btn:visited, a.hb-btn:hover, a.hb-btn:focus-visible { color: rgb(var(--ink)); }
a.hb-btn-y, a.hb-btn-y:visited, a.hb-btn-y:hover, a.hb-btn-y:focus-visible { color: var(--tigers-black); }
a.hb-btn-ok, a.hb-btn-ok:visited, a.hb-btn-ok:hover, a.hb-btn-ok:focus-visible { color: var(--status-teal-text); }
a.hb-btn-warn, a.hb-btn-warn:visited, a.hb-btn-warn:hover, a.hb-btn-warn:focus-visible { color: var(--white); }

@media (max-width: 640px) {
    .hb-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hb-card { padding: 16px; }
    .hb-grid { font-size: 0.78rem; }
}

/* Dashboard (2026-10-24): Verwalten-Karte als eine Zeile, Import/Export zugeklappt (Usability-Test).
   Die Belegung selbst steht in der Hallen- und Mannschaftssicht; das Dashboard bleibt die Uebersicht. */
.hb-card-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.hb-card-zeile h2 { margin: 0; }
.hb-aufklapp > summary { cursor: pointer; font-weight: 800; font-size: 1.1rem; color: rgb(var(--ink)); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hb-aufklapp > summary::-webkit-details-marker { display: none; }
.hb-aufklapp > summary i { font-size: 0.8rem; transition: transform .15s ease; }
.hb-aufklapp[open] > summary i { transform: rotate(180deg); }
.hb-aufklapp[open] > summary { margin-bottom: 12px; }

/* PRINT / PDF – helles Blatt (analog .aw print) */
@media print {
    body { background: #fff !important; color: #111 !important; }
    nav, footer, .footer, .hb-viewnav, .toggle_button, .hb-btn, .hb-btn-y, .hb-btn-ok, .hb-btn-warn,
    .hb-imp-aktionen { display: none !important; }
    .content.hb { padding: 0; }
    .content.hb h1, .content.hb h2, .content.hb h3, .hb-woche-tag { color: #111 !important; }
    .hb-card { background: #fff !important; border: none; box-shadow: none; padding: 0; }
    .hb-grid th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .hb-grid td { border: 1px solid #999 !important; color: #111 !important; }
    .hb-belegt { background: #e8e8e8 !important; color: #111 !important; }
    .hb-frei { background: #fff !important; color: #333 !important; }
}

/* hb-Scope: globale .content-Tabellen-/Select-Regeln aushebeln (wie .aw .aw-table) */
.content.hb .hb-grid { border: none; border-radius: 0; overflow: visible; margin-bottom: 10px; }
.content.hb .hb-grid td { border: 1px solid var(--glass-12); }
.content.hb .hb-grid .hb-belegt { background: var(--status-blue-bg); }
.content.hb .hb-grid .hb-frei { background: var(--status-teal-bg); }
.content.hb select { background: var(--feld-bg); color: rgb(var(--ink)); border: 1px solid var(--glass-22); border-radius: 9px; padding: 9px 11px; font-size: 0.85rem; }
.content.hb select option { color: var(--text-color); }

/* Trainer-Zuordnung: Chips + Add-Dropdown, Mannschafts-Verwaltung */
.hb-dot { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 8px; vertical-align: middle; }
.hb-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.hb-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--tigers-yellow-16); border: 1px solid var(--tigers-yellow-40); color: rgb(var(--ink)); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 0.82rem; font-weight: 600; }
.hb-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; border-radius: 50%; background: var(--glass-12); color: var(--glass-75); cursor: pointer; font-size: 0.72rem; line-height: 1; padding: 0; transition: background .15s, color .15s; }
.hb-chip-x:hover { background: var(--danger-red, #d9534f); color: rgb(var(--ink)); }
.content.hb .hb-trainer-add { padding: 6px 10px; font-size: 0.82rem; }
.content.hb .hb-team-name { width: 100%; background: var(--feld-bg); color: rgb(var(--ink)); border: 1px solid var(--glass-22); border-radius: 9px; padding: 9px 11px; font-size: 0.85rem; box-sizing: border-box; }
.content.hb .hb-team-name::placeholder { color: var(--glass-40); }
.content.hb .hb-team-name:focus { outline: none; border-color: var(--tigers-yellow, #fdee17); }

/* ---- CSV-Import: Vorschau, Ergebnis, Sicherungen (2026-08-01) --------------
   Ersetzt das frühere Inline-CSS dieser Seiten. Alle Farben über die Theme-
   Variablen, damit hell/dunkel und der Farb-Editor weiter greifen. */
.hb-imp-form { margin-top: 12px; }
.hb-imp-aktionen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.hb-imp-info { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 0.76rem; color: var(--glass-60); }
.hb-imp-info i { margin-top: 2px; }
.hb-imp-info > span { min-width: 0; overflow-wrap: anywhere; }

.hb-imp-status { margin-top: 10px; font-weight: 800; display: flex; gap: 8px; align-items: flex-start; }
.hb-imp-status i { margin-top: 2px; }
.content.hb .hb-imp-ok      { color: var(--status-teal-ink); }
.content.hb .hb-imp-warn    { color: var(--tigers-yellow-text); }
.content.hb .hb-imp-err     { color: var(--danger-red); }
.content.hb .hb-imp-neutral { color: var(--glass-60); font-weight: 600; }

.content.hb .hb-imp-h  { margin: 20px 0 6px; font-size: 1rem; color: var(--tigers-yellow-text); }
.content.hb .hb-imp-h4 { margin: 0 0 6px; font-size: 0.82rem; font-weight: 700; color: var(--glass-70); }
.hb-imp-datei { margin-top: 8px; font-size: 0.84rem; color: var(--glass-70); }
.hb-imp-leer  { font-size: 0.82rem; color: var(--glass-40); font-style: italic; }

.hb-imp-liste { margin: 6px 0 0; padding-left: 20px; font-size: 0.84rem; line-height: 1.6; color: var(--glass-75); }
.hb-imp-liste li { margin: 0 0 2px; }
.content.hb .hb-imp-weg li { color: var(--danger-red); }
.content.hb .hb-imp-neu li { color: var(--status-teal-ink); }

/* Bilanz-/Sicherungstabelle: Liste, daher nur Trennlinien statt Zellrahmen */
.content.hb .hb-imp-tabelle { width: 100%; border-collapse: collapse; margin: 12px 0 4px; font-size: 0.84rem; border: none; border-radius: 0; }
.content.hb .hb-imp-tabelle th { background: var(--glass-12); color: rgb(var(--ink)); padding: 8px 10px; text-align: left; font-weight: 700; }
.content.hb .hb-imp-tabelle td { padding: 8px 10px; border: none; border-bottom: 1px solid var(--glass-12); color: var(--on-glass); vertical-align: middle; }
.content.hb .hb-imp-tabelle tfoot td { font-weight: 800; border-top: 1px solid var(--glass-22); border-bottom: none; }
.content.hb .hb-imp-minus { color: var(--danger-red); font-weight: 800; }
.content.hb .hb-imp-plus  { color: var(--status-teal-ink); font-weight: 800; }
.hb-imp-zeilenaktion { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hb-imp-zeilenaktion form { margin: 0; }

/* Gegenüberstellung "wird gelöscht" | "wird angelegt" */
.hb-imp-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 4px; }
@media (max-width: 640px) {
    .hb-imp-spalten { grid-template-columns: 1fr; gap: 12px; }
    .content.hb .hb-imp-tabelle { font-size: 0.78rem; }
}
.hb-team-neu td { border-top: 2px solid var(--tigers-yellow-35) !important; }

/* Harz-Marke an Hallen (2026-10-09): gelbes Etikett "Harz" = erlaubt, dunkles Etikett "Harz-Verbot" = nicht erlaubt.
   Feste Flaechen, daher feste Farben; die Selektoren sind spezifisch genug gegen "* { color }". */
.ti-info > .hb-harz { display: inline-block; box-sizing: border-box; padding: 2px 8px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.ti-info > .hb-harz.hb-harz-ja { background: var(--tigers-yellow); color: var(--tigers-black); }
.ti-info > .hb-harz.hb-harz-nein { background: #3a3a3a; color: #f2f2f2; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }

/* Hallensicht (Wochengitter): Die globale Karten-Regel (<=1024px, 01-login-register-content.css) darf dieses Gitter
   nicht in Karten zerlegen, sonst ist es nicht lesbar: Tabellenaufbau zurueck.
   Handy (<=820px): ein Wochentag, gewaehlt ueber Tabs (Radio + :checked, kein JS). */
.hb-scroll { overflow-x: auto; }
/* Ausschnitt 16-22 Uhr (ts/hb-view-woche.ts): scrollt senkrecht, die Tageszeile bleibt oben stehen. */
.hb-scroll.hb-scroll-fenster { overflow-y: auto; }
.hb-scroll.hb-scroll-fenster thead th { position: sticky; top: 0; z-index: 2; }

/* Hallensicht: eine Werkzeugzeile statt vier Bloecke uebereinander, dichtes Gitter (Entwurf A,
   docs/entwuerfe/hallensicht-entwuerfe.html). Der Plan beginnt dadurch weiter oben. */
.hb-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 10px; }
.hb-kopfzeile h1 { margin: 0; }
.hb-kopfzeile .hb-viewnav { margin: 0 0 0 auto; }
.hb-card-kompakt { padding: 10px 14px; }
.hb-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hb-werkzeug-halle { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.hb-werkzeug-halle label { display: flex; align-items: center; gap: 8px; opacity: 0.9; }
.hb-werkzeug-bild { width: 44px; height: 32px; object-fit: cover; border-radius: 6px; border: 1px solid var(--glass-22); }
.hb-werkzeug-halle select { max-width: 230px; }
/* Die Info schrumpft und kuerzt die Adresse, statt die Zeile umzubrechen; Hausmeister und Symbol bleiben stehen. */
/* Adresse und Hausmeister stehen immer voll sichtbar in einer schmalen Zeile unter Halle und Wochenwechsel:
   nebeneinander reichte der Platz nicht, die Adresse waere gekuerzt worden. */
.hb-werkzeug-info { order: 3; flex: 1 1 100%; display: flex; align-items: center; gap: 2px 16px; min-width: 0;
    font-size: 0.82rem; color: rgba(var(--ink) / 0.8); white-space: nowrap; }
.hb-adresse { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hb-hausmeister { flex: none; }
.hb-werkzeug-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.hb-kw { display: none; font-size: 0.82rem; font-weight: 700; color: rgba(var(--ink) / 0.8); white-space: nowrap; }
@media (min-width: 1500px) { .hb-kw { display: inline; } }
.hb-plan-kopfabstand { margin-top: 8px; }
.hb-grid-woche { margin: 0; }
.hb-grid-woche th { white-space: nowrap; }
.hb-grid-woche .hb-kopf-datum { font-weight: 600; opacity: 0.65; font-size: 0.72rem; }
@media (min-width: 821px) {
    .hb-grid-woche { font-size: 0.8rem; }
    .content .hb-grid-woche th, .content .hb-grid-woche td { padding: 3px 8px; }
    .hb-grid-woche td.hb-zeit, .hb-grid-woche td.hb-cell-frei { height: 34px; }
    /* Belegte Zellen: enger gesetzt, sonst waechst jede Halbstunde auf ueber 45 px und der Ausschnitt zeigt kaum 3 Stunden */
    .hb-grid-woche td { line-height: 1.25; }
    .hb-grid-woche td.hb-belegt, .hb-grid-woche td.hb-beantragt { font-size: 0.8rem; }
    .hb-grid-woche td div + br { display: none; }
}
/* Handy: Zeitfenster ohne eigene Scrollleiste (verschachteltes Scrollen faengt den Finger ab). Vor 16:00
   bleibt es ausgeblendet, solange der gewaehlte Tag dort nichts hat; der Knopf blendet es ein. */
.hb-frueh { margin: 6px 0; }
.hb-frueh[hidden] { display: none; }
.hb-grid-woche tr[hidden] { display: none !important; }   /* die Kartenregeln unter 1024 px setzen display: table-row */
@media (max-width: 820px) {
    /* Kopfzeile: Titel und drei Reiter ohne Symbole, damit die Reiter in eine Zeile passen */
    .hb-kopfzeile .hb-viewnav { margin-left: 0; }
    .hb-kopfzeile .hb-viewnav a { padding-left: 10px; padding-right: 10px; }
    .hb-kopfzeile .hb-viewnav a i { display: none; }
    /* Werkzeugzeile: Halle, Adresse und Hausmeister mit Info-Symbol, Wochenwechsel */
    .hb-werkzeug-halle { flex: 1 1 100%; min-width: 0; }
    .hb-werkzeug-halle label { flex: 1; min-width: 0; }
    .hb-werkzeug-halle select { flex: 1; min-width: 0; min-height: 44px; max-width: none; }
    .hb-werkzeug-info { order: 0; flex-wrap: wrap; white-space: normal; }
    .hb-adresse { overflow: visible; }
    .hb-werkzeug-nav { margin-left: 0; width: 100%; gap: 6px; flex-wrap: nowrap; }
    .hb-werkzeug-nav > div { flex-wrap: nowrap !important; gap: 6px !important; width: 100%; }
    .hb-werkzeug-nav .hb-btn { min-height: 44px; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
    .hb-werkzeug-nav .hb-btn i.fa-calendar-day { display: none; }
    .hb-werkzeug-nav .hb-halle-sel { min-height: 44px; min-width: 0 !important; width: 112px; }
    .hb-frueh { min-height: 44px; width: 100%; }
}
.hb-grid-woche { table-layout: fixed; width: 100%; min-width: 760px; }
.hb-tr, .hb-tabs { display: none; }
@media (max-width: 1024px) {
    .content table.hb-grid-woche { display: table; width: 100%; }
    .content .hb-grid-woche colgroup { display: table-column-group; }
    .content .hb-grid-woche col { display: table-column; }
    .content .hb-grid-woche thead { display: table-header-group; }
    .content .hb-grid-woche tbody { display: table-row-group; }
    .content .hb-grid-woche tr { display: table-row; margin: 0; padding: 0; border: none; border-radius: 0; background: none; }
    .content .hb-grid-woche th, .content .hb-grid-woche td { display: table-cell; width: auto; padding: 7px 9px; }
    .content .hb-grid-woche td { border: 1px solid var(--glass-12); }
    .content .hb-grid-woche td[data-label]::before { display: none; }
}
@media (max-width: 820px) {
    .hb-tr { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
    .hb-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 10px 0 6px; }
    .hb-tabs label {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
        min-height: 48px; padding: 4px 0; border-radius: 9px; cursor: pointer;
        background: var(--glass-08); border: 1px solid var(--glass-22); color: rgb(var(--ink)); font-size: 0.8rem;
    }
    .hb-tabs label b { font-weight: 800; }
    .hb-tabs label span { font-size: 0.62rem; opacity: 0.7; }
    .hb-grid-woche { min-width: 0; font-size: 0.9rem; table-layout: auto; }
    .hb-grid-woche td.hb-belegt div[style*="justify-content:center"] { flex-wrap: wrap; }
    .content .hb-grid-woche [data-tag] { display: none; }
    .hb-grid-woche td.hb-cell-frei { height: 44px; }
    .content .hb-grid-woche th[data-tag] { width: 100%; }
    .content .hb-grid-woche td.hb-zeit, .content .hb-grid-woche th:first-child { width: 56px; padding-left: 6px; padding-right: 6px; }
    .hb-grid-woche .hb-mini { min-width: 40px; min-height: 40px; }
    .hb-t1:checked ~ .hb-scroll td[data-tag="1"], .hb-t1:checked ~ .hb-scroll th[data-tag="1"] { display: table-cell; }
    .hb-t1:checked ~ .hb-scroll col[data-tag="1"] { display: table-column; }
    .hb-t1:checked ~ .hb-tabs label[for$="-1"] { background: var(--tigers-yellow); border-color: var(--tigers-yellow); color: var(--tigers-black); }
    .hb-t2:checked ~ .hb-scroll td[data-tag="2"], .hb-t2:checked ~ .hb-scroll th[data-tag="2"] { display: table-cell; }
    .hb-t2:checked ~ .hb-scroll col[data-tag="2"] { display: table-column; }
    .hb-t2:checked ~ .hb-tabs label[for$="-2"] { background: var(--tigers-yellow); border-color: var(--tigers-yellow); color: var(--tigers-black); }
    .hb-t3:checked ~ .hb-scroll td[data-tag="3"], .hb-t3:checked ~ .hb-scroll th[data-tag="3"] { display: table-cell; }
    .hb-t3:checked ~ .hb-scroll col[data-tag="3"] { display: table-column; }
    .hb-t3:checked ~ .hb-tabs label[for$="-3"] { background: var(--tigers-yellow); border-color: var(--tigers-yellow); color: var(--tigers-black); }
    .hb-t4:checked ~ .hb-scroll td[data-tag="4"], .hb-t4:checked ~ .hb-scroll th[data-tag="4"] { display: table-cell; }
    .hb-t4:checked ~ .hb-scroll col[data-tag="4"] { display: table-column; }
    .hb-t4:checked ~ .hb-tabs label[for$="-4"] { background: var(--tigers-yellow); border-color: var(--tigers-yellow); color: var(--tigers-black); }
    .hb-t5:checked ~ .hb-scroll td[data-tag="5"], .hb-t5:checked ~ .hb-scroll th[data-tag="5"] { display: table-cell; }
    .hb-t5:checked ~ .hb-scroll col[data-tag="5"] { display: table-column; }
    .hb-t5:checked ~ .hb-tabs label[for$="-5"] { background: var(--tigers-yellow); border-color: var(--tigers-yellow); color: var(--tigers-black); }
    .hb-t6:checked ~ .hb-scroll td[data-tag="6"], .hb-t6:checked ~ .hb-scroll th[data-tag="6"] { display: table-cell; }
    .hb-t6:checked ~ .hb-scroll col[data-tag="6"] { display: table-column; }
    .hb-t6:checked ~ .hb-tabs label[for$="-6"] { background: var(--tigers-yellow); border-color: var(--tigers-yellow); color: var(--tigers-black); }
    .hb-t7:checked ~ .hb-scroll td[data-tag="7"], .hb-t7:checked ~ .hb-scroll th[data-tag="7"] { display: table-cell; }
    .hb-t7:checked ~ .hb-scroll col[data-tag="7"] { display: table-column; }
    .hb-t7:checked ~ .hb-tabs label[for$="-7"] { background: var(--tigers-yellow); border-color: var(--tigers-yellow); color: var(--tigers-black); }
}

/* Mannschaftssicht: Unter 1024px wird jede Zeile zur kompakten Karte statt zu einer langen Liste mit Feldbeschriftungen:
   Tag + Zeit in einer Zeile, darunter Halle, dann Dauer + Art; Plan und Freigabe-Knopf eigene Zeile. */

/* Eltern-Rolle: Kind-Chips und Zuordnungsspalte in der Hallenbelegung */
.hb-eltern-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin: 8px 0 14px;
}
.hb-eltern-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(var(--ink) / 0.08);
    border: 1px solid rgba(var(--ink) / 0.15);
    color: rgb(var(--ink));
    font-size: 0.82rem;
    line-height: 1.35;
}
.hb-eltern-chip i {
    color: var(--tigers-yellow-text);
    -webkit-text-stroke: 0.4px var(--tigers-yellow-outline);
    text-shadow: 0 0 1px var(--tigers-yellow-outline);
    font-size: 0.85rem;
}
.hb-eltern-chip strong { font-weight: 700; }
.hb-eltern-team { color: rgba(var(--ink) / 0.8); font-weight: 500; }
.hb-kind-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    color: var(--tigers-yellow-text);
    font-weight: 600;
    margin-top: 2px;
}
.hb-kind-badge i { font-size: 0.75rem; }
td.hb-team-zelle {
    font-size: 0.85rem;
    line-height: 1.3;
}

/* Handy/Tablet: jede Trainingszeit als Karte. Die Zellen tragen Klassen (hb-c-*), damit die Anordnung
   auch mit der Spalte "Mannschaft" (Dashboard) oder "Kind / Jugend" (Eltern) stimmt. Der Streifen links
   zeigt die Art: Regeltermin gruen, Ausnahme orange, vergeben rot, entfaellt grau.
   Zeile 1: Wochentag + Zeit, Zeile 2: Halle, Zeile 3: Dauer links, Art rechts, Zeile 4: Spieler-Knopf ueber die ganze Breite. */
@media (max-width: 1024px) {
    .content .hb-grid-team thead { display: none; }   /* sonst bleibt die Kopfzeile als leerer Kasten stehen */
    .content .hb-grid-team tbody { display: block; }
    .content .hb-grid-team tr { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center;
        margin-bottom: 8px; padding: 9px 12px; border-left: 4px solid rgba(var(--ink) / 0.3); }
    .content .hb-grid-team tr.hb-art-regel { border-left-color: var(--status-teal); }
    .content .hb-grid-team tr.hb-art-ausnahme { border-left-color: #e67e22; }
    .content .hb-grid-team tr.hb-art-verlegt { border-left-color: var(--danger-red); }
    .content.hb .hb-grid-team td { border: none; padding: 1px 0; }
    .content .hb-grid-team td[data-label]::before { display: none; }
    .content .hb-grid-team td.hb-team-zelle,
    .content .hb-grid-team td.hb-c-team { grid-column: 1 / -1; font-weight: 700; font-size: 0.95rem; padding-bottom: 3px; margin-bottom: 2px; border-bottom: 1px dashed rgba(var(--ink) / 0.12); order: 0; }
    .content .hb-grid-team td.hb-c-tag { grid-column: 1 / 3; order: 1; font-weight: 800; font-size: 1rem; white-space: nowrap; }
    .content .hb-grid-team td.hb-c-zeit { grid-column: 3; order: 2; text-align: right; font-weight: 700; color: rgb(var(--ink)); }
    .content .hb-grid-team td.hb-c-halle { grid-column: 1 / -1; order: 3; font-size: 0.85rem; color: rgba(var(--ink) / 0.75); }
    .content .hb-grid-team td.hb-c-dauer { grid-column: 1 / 3; order: 4; font-size: 0.8rem; color: rgba(var(--ink) / 0.7); }
    .content .hb-grid-team td.hb-c-art { grid-column: 3; order: 5; justify-self: end; white-space: nowrap; }
    .content .hb-grid-team td.hb-c-anw { grid-column: 1 / -1; order: 6; }
    .content .hb-grid-team td.hb-planleer { display: none; }   /* leere Plan-Zelle ("–") braucht keine Zeile */
    .content .hb-grid-team td.hb-c-anw .so-btn-mini { min-height: 40px; }
    .content .hb-grid-team td.hb-planzelle, .content .hb-grid-team td[colspan],
    .content .hb-grid-team td[style*="text-align:right"] { grid-column: 1 / -1; order: 7; padding-top: 6px; }
    .content .hb-grid-team td[style*="text-align:right"] { text-align: left !important; }
    .content .hb-grid-team .hb-btn { min-height: 44px; }
}

/* Mannschaftssicht: Titel, Wochenwechsel und Mannschaftswahl in einem Kopf. Am Rechner wie bisher
   (Titel links, Wochenwechsel rechts, Auswahl darunter). */
.hb-mk-kopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.hb-mk-titel { margin: 0; }
.hb-mk-kw { font-weight: 600; opacity: 0.7; }
.hb-mk-wahl { flex: 1 1 100%; margin: 0; }
/* Handy: Zeile 1 Titel mit KW und Datumsfeld, Zeile 2 Mannschaft + Woche zurueck / Heute / Woche weiter. */
@media (max-width: 640px) {
    .hb-mk-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; }
    .hb-mk-titel { grid-column: 1 / 3; grid-row: 1; font-size: 1.1rem; line-height: 1.25; }
    .hb-mk-kw { display: block; font-size: 0.8rem; }
    .hb-mk-punkt { display: none; }
    .hb-mk-kopf > div { display: contents !important; }   /* hb_woche_nav setzt display:flex inline */
    .hb-mk-kopf > div > form { grid-column: 3 / 5; grid-row: 1; margin: 0; }
    .hb-mk-kopf > div > form input { width: 100%; min-width: 0 !important; min-height: 44px; }
    .hb-mk-kopf > div > a { grid-row: 2; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; }
    .hb-mk-kopf > div > a:nth-child(1) { grid-column: 2; }
    .hb-mk-kopf > div > a:nth-child(2) { grid-column: 3; }
    .hb-mk-kopf > div > a:nth-child(3) { grid-column: 4; }
    .hb-mk-kopf .hb-nav-txt { display: none; }
    .hb-mk-wahl { grid-column: 1; grid-row: 2; }
    .hb-mk-wahl select { width: 100%; min-width: 0; min-height: 44px; }
}

.hb-grid .hb-anw { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; background: var(--glass-16); color: rgb(var(--ink)); white-space: nowrap; }