/* Baltic-Cup App – App-Rahmen (Kopfleiste, Statusplatz, Navigation, Inhalt) aus den Bildschirmentwürfen
   Doku/Design/Bildschirmentwuerfe/project/app.css (Version 114, eingefroren 29.10.2026, T47): .appbar, .statusslot, .content,
   .section-h, .sheet, .seg,
   .tabbar, .office, .office-bar, .office-main. Nicht im Design System; Werte nur aus design-tokens.css. Ergänzungen für die
   App (nicht in den Entwürfen) sind gekennzeichnet. Komponenten: Kopfleiste, Seitenkopf, Bereichsnavigation, AppMenue,
   Tafel, ThemaWahl, Verbindungsstatus (RegattaApp.Shared). */

/* ---------- Rahmen Wasser- und Teilnehmer-App (.phone/.tablet ohne feste Maße) ---------- */
/* Ergänzung: Die Entwürfe zeigen feste Gerätemaße. In der App füllt der Rahmen den Bildschirm; Kopfleiste, Statusanzeige
   und Reiterleiste bleiben stehen, nur der Inhalt rollt (Statusanzeige „nie wegscrollbar“, Design System). */
.rahmen { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--surface-sunken); }
.rahmen__inhalt { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
/* Ergänzung: Kinder nie stauchen, der Bereich scrollt. Sonst schneidet z. B. .res (overflow: hidden) lange Listen ab (Befund Session 39) */
.rahmen__inhalt > * { flex-shrink: 0; }

/* ---------- Startfehler (Ergänzung, kein Entwurf: Verbindungsdaten fehlen, Session 34) ---------- */
.startfehler { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px 16px; background: var(--surface-sunken); }
.startfehler .bc-error { width: 100%; max-width: 560px; }

/* ---------- Kopfleiste ---------- */
.appbar { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 16px; background: var(--pco-blau); color: var(--on-brand); box-sizing: border-box; }
.appbar__title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* Ergänzung: Der Titel ist die Überschrift der Seite (<h1> statt <strong>, Bildschirmleser und FocusOnNavigate) */
.appbar__title h1, .appbar__title strong { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; }
.appbar__title span { font-size: 16px; line-height: 20px; font-weight: 600; opacity: 0.95; }
.appbar__role { font-size: 16px; font-weight: 700; padding: 6px 12px; border: 2px solid var(--on-brand); border-radius: 999px; white-space: nowrap; }
.statusslot { padding: 8px 16px 0; }

/* ---------- Menü in der Kopfleiste (Ergänzung, kein Entwurf; Skizze bestätigt Session 34) ---------- */
/* Knopf rund mit Rand wie die Rollen-Pille, Tippfläche 44 px; unter 600 px nur das Symbol, ab 600 px und in der Büro-App
   mit Wort. Inhalt in einer Tafel (.sheet): Einträge, Darstellung (.seg), Rechtstexte und Version. */
.bc-menue { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0; border: 2px solid var(--on-brand); border-radius: 999px; background: transparent; color: var(--on-brand); font: 700 16px/20px var(--font-sans); cursor: pointer; }
.bc-menue__wort { display: none; }
.bc-menue--wort { padding: 0 14px 0 10px; }
.bc-menue--wort .bc-menue__wort { display: inline; }
@media (min-width: 600px) {
  .bc-menue--auto { padding: 0 14px 0 10px; }
  .bc-menue--auto .bc-menue__wort { display: inline; }
}
.menue { display: flex; flex-direction: column; }
.menue__eintrag { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 18px; font-weight: 700; text-decoration: none; }
.menue__eintrag .bc-icon { color: var(--brand); }
.menue__fuss { margin: 0; font-size: 16px; line-height: 22px; color: var(--ink-muted); }
.menue__fuss a { font-weight: 600; }

/* ---------- Abschnittsüberschrift ---------- */
.section-h { margin: 4px 0 0; font-size: 16px; line-height: 20px; font-weight: 700; color: var(--ink-muted); letter-spacing: 0.3px; }

/* ---------- Tafel von unten (Bottom Sheet) ---------- */
/* Ergänzung: fest am Bildschirm statt im Gerätebild (Entwurf position: absolute), über allem, auf breiten Bildschirmen
   mittig und höchstens 560 px breit; unten mindestens der sichere Bereich des Geräts; Kopfzeile mit „Schließen“. */
.scrim { position: fixed; inset: 0; z-index: 100; background: rgba(11, 26, 34, 0.55); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 101; max-width: 560px; max-height: 90vh; max-height: 90dvh; margin: 0 auto; overflow-y: auto; background: var(--surface-raised); color: var(--ink); border-radius: 20px 20px 0 0; padding: 12px 16px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 -4px 24px rgba(0,0,0,0.25); }
.sheet:focus { outline: none; }
.sheet__grip { width: 48px; height: 5px; border-radius: 3px; background: var(--line-strong); align-self: center; }
.sheet__title { font-size: 26px; line-height: 32px; font-weight: 700; margin: 0; }
.sheet__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- Segment-Umschalter ---------- */
/* Ergänzung: echte <button> mit aria-pressed statt <span> (Bedienung, Bildschirmleser) */
.seg { display: flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--surface-raised); border: 2px solid var(--line-strong); }
.seg a, .seg span, .seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border: 0; border-radius: 999px; background: transparent; font: 700 17px/1.2 var(--font-sans); color: var(--ink); text-decoration: none; padding: 0 10px; white-space: nowrap; cursor: pointer; }
.seg .on { background: var(--brand); color: var(--on-brand); }

/* ---------- Reiterleiste (Teilnehmer-App) ---------- */
/* Ergänzung: so viele Spalten wie Einträge (Entwurf: fest vier); unten mindestens der sichere Bereich des Geräts */
.tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--surface-raised); border-top: 1px solid var(--line); padding: 4px 4px max(20px, env(safe-area-inset-bottom)); }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; font-size: 16px; letter-spacing: -0.3px; font-weight: 700; color: var(--ink-muted); text-decoration: none; border-radius: 12px; }
.tabbar a.on { color: var(--brand); background: var(--tint-soft); }
.tabbar svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.tabbar .count { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 22px; height: 22px; border-radius: 11px; background: var(--danger); color: var(--on-danger); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: 0; }

/* ---------- Büro-App ---------- */
.office { min-height: 100vh; min-height: 100dvh; background: var(--surface-sunken); display: flex; flex-direction: column; }
.office-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 32px; background: var(--pco-blau); color: var(--on-brand); }
.office-bar strong { font-size: 20px; }
/* Ergänzung: Klasse .office-nav statt „.office-bar nav“ — sonst träfe die Regel auch die Navigation in der Tafel des
   Menüs (sie steht im Kopf) */
.office-bar .office-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.office-bar .office-nav a { color: var(--on-brand); text-decoration: none; font-weight: 600; font-size: 17px; padding: 10px 16px; border-radius: 999px; }
.office-bar .office-nav a.on { background: var(--surface-raised); color: var(--brand); }
.office-main { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 32px 48px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; }
/* Ergänzung: Statusanzeige nur bei Störung (Entscheidung Nutzer, Session 34; Gestaltungsfrage für den Testbetrieb), so breit
   wie der Inhalt */
.office .statusslot { width: 100%; max-width: 1280px; margin: 0 auto; padding: 16px 32px 0; box-sizing: border-box; }


/* Karten, Hinweise und Eingabefelder (app.css der Entwürfe) */
.notice { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-lg); border: 2px solid var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.notice--info { border-color: var(--brand); background: var(--tint-soft); color: var(--brand); }
.notice__head { display: flex; gap: 8px; align-items: flex-start; font-size: 20px; line-height: 26px; font-weight: 700; }
.notice__body { font-size: 18px; line-height: 24px; color: var(--ink); }
.card { background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.card h2 { margin: 0; font-size: 22px; line-height: 28px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .lbl { font-size: 16px; font-weight: 700; color: var(--ink); }
.field input, .field select, .field textarea { min-height: 52px; padding: 10px 14px; font: 600 20px/26px var(--font-sans); color: var(--ink); background: var(--surface-raised); border: 2px solid var(--line-strong); border-radius: var(--radius-sm); box-sizing: border-box; width: 100%; }
.field textarea { min-height: 96px; font-weight: 400; font-size: 18px; }
.field .hint { font-size: 16px; color: var(--ink-muted); }

/* Eintrag „Abmelden“ im Menü: eine Taste, sieht aus wie die Links daneben */
button.menue__eintrag { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); font-family: inherit; text-align: left; cursor: pointer; }

/* Anmeldeseiten (D3a, D3b, D1c): Karte mittig, Maße aus den Entwürfen */
.anmelde-seite { display: flex; flex-direction: column; align-items: center; }
.anmelde-karte { width: 100%; max-width: 520px; gap: 16px; padding: 24px; }
.anmelde-karte h1 { margin: 0; font-size: 28px; line-height: 34px; }
.anmelde-karte__text { margin: 0; font-size: 18px; line-height: 26px; }
.anmelde-karte__form { display: flex; flex-direction: column; gap: 16px; }
.anmelde-karte__leise { align-self: center; }
.passwort-zeile { display: flex; gap: 8px; }
.passwort-zeile input { flex: 1; min-width: 0; }
.passwort-zeile__knopf { width: 56px; padding: 0; flex: none; }
.zugang-hinweis { align-self: center; width: 100%; max-width: 520px; margin: 0 auto; }

/* Büro-Kopfzeile: Rolle und Menü rechts, auch ohne Bereiche (Anmeldeseiten) und beim Umbruch */
.office-bar .bc-menue { margin-left: auto; }
.office-bar .appbar__role { margin-left: auto; }
.office-bar .appbar__role + .bc-menue { margin-left: 0; }
.office-bar .office-nav ~ .appbar__role, .office-bar .office-nav ~ .bc-menue { margin-left: 0; }

/* Veranstaltungen (Skizze T52, ohne Entwurf): Felder wie die Anmeldung */
.veranstaltungen-kopf { display: flex; justify-content: flex-end; }
.veranstaltungs-formular__daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.field .hint--fehler { color: var(--warn); font-weight: 700; }
.haken-feld { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; cursor: pointer; }
.haken-feld input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--brand); }
.haken-feld__text { display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.haken-feld .hint { font-size: 16px; color: var(--ink-muted); }
.tafel-text { margin: 0; font-size: 18px; line-height: 26px; }

/* Tage und Wettfahrten (Skizze T54, ohne Entwurf) */
.tage-liste { display: flex; flex-direction: column; gap: 16px; }
.tag-karte { gap: 12px; }
.tag-karte__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tag-karte h2 { margin: 0; font-size: 22px; line-height: 28px; }
.tag-karte__etappe, .tag-karte__leer { margin: 4px 0 0; font-size: 16px; color: var(--ink-muted); }
.tag-karte__aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-karte__fuss { display: flex; justify-content: flex-end; }

/* Meldungen (Entwürfe H3a, H3b, H3j, H3k); Spalten und Kopf aus app.css der Entwürfe */
.office-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.office-head h1 { margin: 0; flex: 1 1 360px; }
.cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.col-form { flex: 1 1 360px; }
.col-main { flex: 999 1 560px; min-width: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.card-note { font-size: 16px; color: var(--ink-muted); }
.vis { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 18px; line-height: 24px; }
.kv dt { color: var(--ink-muted); font-weight: 600; }
.kv dd { margin: 0; font-weight: 700; }
.zurueck-link { align-self: flex-start; padding-left: 0; }
.meldeliste { gap: 14px; }
.meldeliste__filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.meldeliste__filter .seg { flex: 0 1 auto; flex-wrap: wrap; border-radius: 24px; }
.meldeliste__filter .seg button { flex: 0 1 auto; padding: 0 14px; }
.meldeliste__suche { flex: 1 1 240px; }
.meldeliste__quelle { font-size: 16px; color: var(--ink-muted); }
.meldeliste__zurueckgezogen td { color: var(--ink-muted); }
.meldeliste__filter .seg .on .bc-num { color: inherit; }
.meldeliste td .tag { margin-left: 8px; }
.meldeliste td .meldeliste__ohne-gruppe { margin-left: 0; }
.tag { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 10px; box-sizing: border-box; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--surface-raised); color: var(--ink-muted); font-size: 16px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.meldung-formular { display: flex; flex-direction: column; gap: 20px; }
.meldung-formular__gruppe { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; border: 0; min-width: 0; }
.meldung-formular__aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
.meldung-seitenspalte { display: flex; flex-direction: column; gap: 20px; }
.einwilligung-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.einwilligung-zeile__text { flex: 1 1 240px; font-size: 16px; }
.yardstick-verlauf { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.rueckzug-offen { align-self: flex-start; white-space: normal; }

/* Startplan (Entwürfe C1, C1b, C1c); .checks, .scroll-x, .version aus app.css der Entwürfe */
.checks { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-raised); }
.checks label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-top: 1px solid var(--line); font-size: 18px; font-weight: 600; }
.checks label:first-child { border-top: 0; }
.checks input { width: 24px; height: 24px; accent-color: var(--brand); }
.checks .ys { margin-left: auto; color: var(--ink-muted); font-weight: 600; }
.scroll-x { overflow-x: auto; }
.version { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 12px 16px; border-radius: var(--radius-md); background: var(--tint-soft); border: 1px solid var(--line); font-size: 17px; }
.version > span { flex: 1 1 240px; }
.seg--spalte { flex-direction: column; border-radius: 20px; }
.startplan-wahl { display: flex; flex-wrap: wrap; gap: 16px; }
.startplan-wahl .field { flex: 1 1 280px; }
.startplan-felder { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.startplan-felder .field { flex: 1 1 140px; }
.startplan-aktionen { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; align-items: center; }
.startplan-aktionen .bc-caption { flex: 1 1 240px; }
.startplan-text { margin: 0; font-size: 18px; line-height: 26px; }
.startplan-tabelle--start { min-width: 480px; }
.muted { color: var(--ink-muted); }

/* Zuschauer (Entwürfe B1g, B5a, B5b, Skizze TN-2) */
.zuschauer-link { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--brand); }
.zuschauer-gross { font-size: 28px; line-height: 34px; font-variant-numeric: tabular-nums; }
.zuschauer-funk { flex-direction: row; align-items: center; gap: 14px; }
.zuschauer-funk > div { display: flex; flex-direction: column; }
.zuschauer-funk strong { font-size: 22px; }
.zuschauer-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.zuschauer-kopf h2 { margin: 0; font-size: 22px; line-height: 28px; }
.zuschauer-text { margin: 0; }
.regatten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.regatten button { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 64px; padding: 12px 16px; text-align: left; font: inherit; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; }
.regatten button[aria-current] { border-color: var(--brand); border-width: 2px; }
.regatten strong { font-size: 20px; }
/* Listen der Zuschauer-Seiten, aus app.css der Entwürfe */
.res { list-style: none; margin: 0; padding: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.res > li { display: grid; grid-template-columns: 48px 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.res > li:first-child { border-top: 0; }
.res .rk { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.res .rk small { font-size: 16px; color: var(--ink-muted); }
.res .yn { font-size: 20px; font-weight: 700; }
.res .pt { font-size: 26px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.res .pt small { display: block; font-size: 16px; font-weight: 600; color: var(--ink-muted); }
.res .gruppe { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--ink-muted); text-align: right; white-space: nowrap; }
.res .gruppe--offen { color: var(--warn); }