/* ============================================================================
   BOS – Bau Operating System · Design-Tokens + Kern-Komponenten
   Abgeleitet aus design/_handoff/design_handoff_bos/README.md (High-Fidelity).
   Quelle der Wahrheit für Tokens = DESIGN.md. Dieses Stylesheet ist die
   technische Umsetzung; Token-Namen spiegeln die DESIGN.md-Tabellen.
   ============================================================================ */

:root {
  /* --- Flächen (hell/blau Theme) --- */
  --bos-board:           #E4EBF2;  /* App-/Board-Hintergrund            */
  --bos-surface:         #F4F8FC;  /* Karten-Fläche hell                */
  --bos-surface-2:       #EEF3F9;  /* Sekundärfläche                    */
  --bos-white:           #FFFFFF;  /* Karte / Weiß                      */
  --bos-dark:            #15222E;  /* Brand / Sidebar / Text primär     */
  --bos-dark-grad-from:  #1D2C3A;  /* Dunkel-Verlauf Start              */
  --bos-dark-grad-to:    #15222E;  /* Dunkel-Verlauf Ende               */
  --bos-overlay:         rgba(21,34,46,.94);  /* Galerie-Hintergrund (R-9) */
  --bos-overlay-leiste:  rgba(21,34,46,.86);  /* Galerie-Kopfleiste (R-9)  */
  --bos-overlay-rand:    rgba(255,255,255,.28); /* Galerie-Knopfrahmen (R-9b) */

  /* --- Text & Linien --- */
  --bos-text:            #15222E;  /* Text primär                       */
  --bos-text-body:       #2C3A48;  /* Fließtext                         */
  --bos-text-body-2:     #3C4A58;  /* Fließtext alt.                    */
  --bos-text-secondary:  #5B6B7B;  /* Text sekundär                     */
  --bos-text-tertiary:   #8696A6;  /* Tertiär / Mono-Label              */
  --bos-border:          #D7E0EA;  /* Border                            */
  --bos-border-strong:   #C5D2DF;  /* Border kräftig (Inputs)           */
  --bos-divider:         #DEE6EE;  /* Trennlinie                        */
  --bos-divider-2:       #E6EDF3;  /* Trennlinie alt.                   */
  --bos-on-dark:         #FFFFFF;  /* Text auf dunkel                   */
  --bos-on-dark-2:       #9FB0C0;  /* Text auf dunkel sekundär          */
  --bos-on-dark-3:       #7F90A0;  /* Text auf dunkel tertiär           */

  /* --- Signal & Status --- */
  --bos-blue:            #1763E0;  /* primäre Aktionen, aktive Schritte */
  --bos-blue-soft:       rgba(23,99,224,.10);
  --bos-hivis:           #FF6A1A;  /* Aufnahme + Warnstreifen + Logo    */
  --bos-hivis-text:      #D9620F;  /* Hi-Vis als Text                   */
  --bos-hivis-bright:    #FF8A4A;  /* aktives Sidebar-Icon              */

  --bos-amber-dot:       #D6961E;  /* Entwurf – Punkt                   */
  --bos-amber-text:      #B26A00;  /* Entwurf – Text                    */
  --bos-amber-bg:        rgba(214,150,30,.14);

  --bos-green-dot:       #1E8A52;  /* Freigegeben – Punkt / Button      */
  --bos-green-text:      #137C46;  /* Freigegeben – Text                */
  --bos-green-bg:        rgba(30,138,82,.13);

  --bos-locked:          #5C7065;  /* Gesperrt – Text                   */
  --bos-locked-bg:       rgba(92,112,101,.14);

  --bos-success:         #1E8A52;  /* Erfolg / Freigeben-Button         */
  --bos-danger:          #C7372A;  /* Destruktiv                        */

  /* --- Typografie --- */
  --bos-font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --bos-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --bos-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* --- Radius --- */
  --bos-r-card:   15px;  /* Karten 14–16 */
  --bos-r-btn:    12px;  /* Buttons/Inputs 11–13 */
  --bos-r-tile:    9px;  /* kleine Kacheln/Stepper 7–11 */
  --bos-r-badge:   6px;  /* Badges 6–7 */

  /* --- Schatten --- */
  --bos-shadow-frame: 0 20px 60px rgba(40,60,90,.16);
  --bos-shadow-card:  0 4px 14px rgba(40,60,90,.06);
  --bos-shadow-btn:   0 9px 24px rgba(23,99,224,.25);

  /* --- Spacing (4px-Skala) --- */
  --bos-s-1: 4px;  --bos-s-2: 8px;  --bos-s-3: 12px; --bos-s-4: 16px;
  --bos-s-5: 20px; --bos-s-6: 24px; --bos-s-8: 32px; --bos-s-10: 40px;
}

/* ============================================================================
   Reset / Basis
   ============================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Author-Deklarationen wie `.bos-anker { display: flex }` schlagen die
   UA-Regel `[hidden] { display: none }` (gleiche Spezifität, aber UA-Origin
   verliert gegen Author-Origin). Ohne dieses !important bleibt jedes Element
   mit gesetztem `display` trotz hidden-Attribut sichtbar. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--bos-font-body);
  color: var(--bos-text-body);
  background: var(--bos-board);
  line-height: 1.5;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--bos-font-display); color: var(--bos-text); line-height: 1.15; }

/* Messwerte: BTB-Nr, Stunden, Mengen, Datum, Uhrzeit – durchgängig Mono */
.bos-num, .bos-mono { font-family: var(--bos-font-mono); font-variant-numeric: tabular-nums; }

/* Mono-Label (Eyebrow): "BAUTAGESBERICHT · TIEFBAU" */
.bos-eyebrow {
  font-family: var(--bos-font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bos-text-tertiary);
}

a { color: var(--bos-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Sichtbarer Fokus – Pflicht (barrierearm) */
:focus-visible {
  outline: 3px solid var(--bos-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ============================================================================
   Signatur: diagonaler Hi-Vis-Warnstreifen
   Login-Kopf, Sidebar-Kopf, Logo. --bos-stripe-bg setzt die Zwischenfarbe.
   ============================================================================ */
.bos-hazard {
  --bos-stripe-bg: var(--bos-dark);
  background: repeating-linear-gradient(
    135deg,
    var(--bos-hivis) 0 14px,
    var(--bos-stripe-bg) 14px 28px
  );
}
/* Vom Homescreen (black-translucent) reicht der Streifen unter die
   Statusleiste - Login und Einladung beginnen so unter Uhr und Kamera-Insel. */
.bos-hazard--top { height: calc(6px + env(safe-area-inset-top)); width: 100%; }

/* ============================================================================
   Karten
   ============================================================================ */
.bos-card {
  background: var(--bos-white);
  border: 1px solid var(--bos-border);
  border-radius: var(--bos-r-card);
  box-shadow: var(--bos-shadow-card);
}
.bos-card--flat { box-shadow: none; background: var(--bos-surface); }

/* ============================================================================
   Buttons
   ============================================================================ */
.bos-btn {
  --_h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bos-s-2);
  min-height: var(--_h);
  padding: 0 var(--bos-s-5);
  font-family: var(--bos-font-body);
  font-size: 16px; font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--bos-r-btn);
  cursor: pointer;
  transition: filter .12s ease, background .12s ease, border-color .12s ease;
  user-select: none;
}
.bos-btn:active { transform: translateY(1px); }

.bos-btn--primary {
  background: var(--bos-blue);
  color: var(--bos-on-dark);
  box-shadow: var(--bos-shadow-btn);
}
.bos-btn--primary:hover { filter: brightness(1.05); }

.bos-btn--secondary {
  background: var(--bos-white);
  color: var(--bos-text);
  border-color: var(--bos-border-strong);
}
.bos-btn--secondary:hover { background: var(--bos-surface-2); }

.bos-btn--success {
  background: var(--bos-success);
  color: var(--bos-on-dark);
}
.bos-btn--success:hover { filter: brightness(1.05); }

.bos-btn--danger { background: var(--bos-danger); color: var(--bos-on-dark); }
.bos-btn--block  { width: 100%; }
.bos-btn--lg     { --_h: 58px; font-size: 18px; }

/* Gefaehrliche Knoepfe weg von Weiter/Zurueck (docs/wissen/produkt.md):
   eigene Klasse statt nur der roten Farbe von .bos-btn--danger - die traegt
   zusaetzlich den Abstand UND eine Trennlinie, damit ein "Zugang widerrufen"
   (Aufgabe 9) nicht als Nachbarknopf neben einem Alltagsknopf steht, auf den
   man aus Gewohnheit tippt. */
.bos-gefahr { margin-top: var(--bos-s-5); padding-top: var(--bos-s-4);
              border-top: 1px dashed var(--bos-border-strong); }

/* ============================================================================
   Eingabefelder
   ============================================================================ */
.bos-field { display: flex; flex-direction: column; gap: var(--bos-s-2); }
.bos-label { font-size: 13px; font-weight: 600; color: var(--bos-text-secondary); }
.bos-input {
  width: 100%;
  box-sizing: border-box;
  height: 56px;
  padding: 0 var(--bos-s-4);
  font-family: var(--bos-font-body);
  font-size: 16px;
  color: var(--bos-text);
  background: var(--bos-white);
  border: 1px solid var(--bos-border-strong);
  border-radius: var(--bos-r-btn);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.bos-input::placeholder { color: var(--bos-text-tertiary); }
.bos-input:focus { outline: none; border-color: var(--bos-blue); box-shadow: 0 0 0 3px var(--bos-blue-soft); }
/* Textfelder, die per Skript auf ihren Inhalt wachsen (_bericht.html): kein
   innerer Scrollbalken mehr noetig, sobald die Hoehe passt - vertikales
   Ziehen von Hand bleibt moeglich. */
.bos-input[data-autohoehe] { overflow-y: hidden; resize: vertical; }

/* ============================================================================
   Badges – Status-Maschine: Entwurf → Freigegeben → Gesperrt
   ============================================================================ */
.bos-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  border-radius: var(--bos-r-badge);
  white-space: nowrap;
}
.bos-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }

.bos-badge--entwurf     { background: var(--bos-amber-bg);  color: var(--bos-amber-text); }
.bos-badge--entwurf::before     { background: var(--bos-amber-dot); }
.bos-badge--freigegeben { background: var(--bos-green-bg);  color: var(--bos-green-text); }
.bos-badge--freigegeben::before { background: var(--bos-green-dot); }
/* Farben wie im Bauleiter-Kalender (Thomi, 19.09.2026): markant = mach was,
   ruhig = nichts zu tun. eingereicht wartet auf den Bauleiter -> orange.
   Der Polier sieht nach dem Absenden bos-badge--abgesendet (blau): fuer ihn
   ist nichts mehr zu tun. */
.bos-badge--eingereicht { background: var(--bos-amber-bg); color: var(--bos-amber-text); }
.bos-badge--eingereicht::before { background: var(--bos-amber-dot); }
.bos-badge--abgesendet { background: var(--bos-blue-soft); color: var(--bos-blue); }
.bos-badge--abgesendet::before { background: var(--bos-blue); }
.bos-badge--gesperrt    { background: var(--bos-locked-bg); color: var(--bos-locked); }
.bos-badge--gesperrt::before    { background: var(--bos-locked); }
/* zur_durchsicht ist blau (bei der OEBA, nichts fuer den Bauleiter zu tun -
   seit 19.09.2026 blau statt grau, Grau gehoert dem Wochenende im Kalender),
   unterschrieben/bestaetigt sind gruen (fertig) - Spec 2026-09-17 §4. */
.bos-badge--zur_durchsicht { background: var(--bos-blue-soft); color: var(--bos-blue); }
.bos-badge--zur_durchsicht::before { background: var(--bos-blue); }

/* zurueckgewiesen ist eine eigene, rote Farbe (braucht den Bauleiter JETZT). */
.bos-badge--zurueckgewiesen { background: rgba(199,55,42,.13); color: var(--bos-danger); }
.bos-badge--zurueckgewiesen::before { background: var(--bos-danger); }
.bos-badge--unterschrieben, .bos-badge--bestaetigt, .bos-badge--freigegeben { background: var(--bos-green-bg); color: var(--bos-green-text); }
.bos-badge--unterschrieben::before, .bos-badge--bestaetigt::before, .bos-badge--freigegeben::before { background: var(--bos-green-dot); }

/* Nachtrag ist eine Info, kein Status (Thomi, 19.09.2026): grau umrandet,
   ohne Punkt - sonst stuende er orange neben dem orangen "zur Freigabe". */
.bos-badge--nachtrag    { background: transparent; color: var(--bos-text-secondary);
                          box-shadow: inset 0 0 0 1px var(--bos-border-strong); }
.bos-badge--nachtrag::before    { display: none; }

.bos-badge--fehlt       { background: var(--bos-amber-bg); color: var(--bos-amber-text); }
.bos-badge--fehlt::before      { background: var(--bos-amber-dot); }

/* ============================================================================
   Stepper (Wizard-Fortschritt): Titel + "n / 7" + 7 Balken
   ============================================================================ */
.bos-stepper { display: flex; gap: 6px; }
.bos-stepper__bar {
  flex: 1; height: 5px; border-radius: 99px;
  background: #D3DEEA;                 /* offen */
  transition: background .2s ease;
}
.bos-stepper__bar--on { background: var(--bos-blue); }   /* aktiv/erledigt */

/* ============================================================================
   Mengen-Stepper (−/+): 44×44 Touch-Targets, Wert mittig in Mono
   ============================================================================ */
.bos-count { display: inline-flex; align-items: center; gap: var(--bos-s-2); }
.bos-count__btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  border-radius: var(--bos-r-tile);
  border: 1px solid var(--bos-border);
  background: var(--bos-surface-2);     /* − neutral */
  color: var(--bos-text);
  cursor: pointer;
}
.bos-count__btn--add {                  /* + Akzent */
  background: var(--bos-blue-soft);
  border-color: var(--bos-blue);
  color: var(--bos-blue);
}
.bos-count__val {
  min-width: 44px; text-align: center;
  font-family: var(--bos-font-mono);
  font-size: 18px; font-weight: 600;
}

/* ============================================================================
   Segmented Control: Personal / Geräte / Material
   ============================================================================ */
.bos-segmented {
  display: inline-flex; gap: 4px;
  padding: 4px;
  background: var(--bos-surface-2);
  border-radius: var(--bos-r-tile);
}
.bos-segmented__item {
  padding: 8px 16px;
  font-size: 14px; font-weight: 600;
  color: var(--bos-text-secondary);
  background: transparent; border: 0; border-radius: 7px;
  cursor: pointer;
}
.bos-segmented__item--on {
  background: var(--bos-white);
  color: var(--bos-text);
  box-shadow: 0 1px 3px rgba(40,60,90,.12);
}

/* ============================================================================
   Toast
   ============================================================================ */
.bos-toast {
  display: inline-flex; align-items: center; gap: var(--bos-s-3);
  padding: 12px 16px;
  background: var(--bos-dark); color: var(--bos-on-dark);
  border-radius: var(--bos-r-btn);
  box-shadow: var(--bos-shadow-frame);
  font-size: 14px;
}

/* ============================================================================
   Aufnahme-Button (Signature) – States bereit/aufnahme.
   Animationen bosRing & bosWave, unter reduced-motion deaktiviert.
   ============================================================================ */
.bos-record {
  position: relative;
  width: 132px; height: 132px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bos-hivis);
  color: var(--bos-on-dark);
  border: 0; cursor: pointer;
}
.bos-record__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--bos-hivis);
  opacity: 0;
}
.bos-record[data-state="aufnahme"] .bos-record__ring { animation: bosRing 2.4s ease-out infinite; }
.bos-record[data-state="aufnahme"] .bos-record__ring:nth-child(2) { animation-delay: .8s; }
.bos-record[data-state="aufnahme"] .bos-record__ring:nth-child(3) { animation-delay: 1.6s; }

/* Aufnahme läuft: Mikro -> klares Stopp-Quadrat (sonst nicht erkennbar, wie man stoppt). */
.bos-record__stop { display: none; width: 22px; height: 22px; border-radius: 4px; background: currentColor; }
.bos-record[data-state="aufnahme"] .bos-record__mic { display: none; }
.bos-record[data-state="aufnahme"] .bos-record__stop { display: block; }

@keyframes bosRing {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(1.6); opacity: 0; }
}

.bos-wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 28px; }
.bos-wave__bar {
  width: 4px; border-radius: 99px; background: var(--bos-hivis);
  animation: bosWave .9s ease-in-out infinite;
}
.bos-wave__bar:nth-child(odd)  { animation-delay: .15s; }
.bos-wave__bar:nth-child(3n)   { animation-delay: .3s; }

@keyframes bosWave {
  0%, 100% { height: 6px; }
  50%      { height: 28px; }
}

/* Anker der Spracheingabe – nur während der Aufnahme sichtbar. */
.bos-anker {
  list-style: none; margin: var(--bos-s-3) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--bos-s-2);
  text-align: left; max-width: 32ch;
}
.bos-anker li {
  font-family: var(--bos-font-display); font-size: 15px; font-weight: 600;
  color: var(--bos-hivis-text);
}
.bos-anker li::before { content: "· "; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================================
   Layout – Polier (mobil). App-Frame, Login, Wizard. Bauleiter-Desktop folgt
   in Task [11]. Alle Maße/Farben über Tokens; keine Hex-Hardcodes.
   ============================================================================ */

/* Mobiler App-Frame: full-width am Handy, auf Desktop zentriert (Vorschau). */
.bos-phone {
  width: 100%; max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bos-surface);
}

.bos-eyebrow--blue { color: var(--bos-blue); }

/* --- Login (Polier, mobil) --- */
.bos-login { flex: 1; display: flex; flex-direction: column; padding: 0 var(--bos-s-6) var(--bos-s-8); }
.bos-login__brand {
  display: flex; flex-direction: column; align-items: center; gap: var(--bos-s-2);
  padding: var(--bos-s-10) 0 var(--bos-s-8);
}
.bos-login__word {
  font-family: var(--bos-font-display); font-weight: 700;
  font-size: 52px; letter-spacing: -2px; color: var(--bos-text); line-height: 1;
}
.bos-login__sub { color: var(--bos-text-secondary); font-size: 14px; }
.bos-login form { display: flex; flex-direction: column; gap: var(--bos-s-4); }
.bos-login__error { color: var(--bos-danger); font-size: 13px; min-height: 1.2em; }
.bos-toggle {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; color: var(--bos-text-secondary);
}
.bos-toggle input { width: 20px; height: 20px; accent-color: var(--bos-blue); }

/* --- Wizard-Gerüst: stickiger Kopf (Stepper), Scroll-Inhalt, fixe Button-Leiste --- */
.bos-wiz { flex: 1; display: flex; flex-direction: column; min-height: 100dvh; }
.bos-wiz__head {
  position: sticky; top: 0; z-index: 5;
  background: var(--bos-surface);
  /* Vom Homescreen gestartet laeuft die Seite unter die Statusleiste
     (apple-mobile-web-app-status-bar-style: black-translucent). Ohne dieses
     Polster liegt die Uhrzeit auf dem Titel. Im Browser-Tab ist der Wert 0. */
  padding: calc(var(--bos-s-5) + env(safe-area-inset-top)) var(--bos-s-6) var(--bos-s-4);
  border-bottom: 1px solid var(--bos-divider);
}
.bos-wiz__titlerow { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--bos-s-3); }
.bos-wiz__title { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.bos-wiz__count { font-family: var(--bos-font-mono); font-size: 13px; color: var(--bos-text-tertiary); }
.bos-wiz__flow { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bos-wiz__body {
  flex: 1; overflow-y: auto;
  padding: var(--bos-s-6);
  display: flex; flex-direction: column; gap: var(--bos-s-3);
}
.bos-wiz__bar {
  position: sticky; bottom: 0;
  display: flex; gap: var(--bos-s-3);
  padding: var(--bos-s-4) var(--bos-s-6);
  background: var(--bos-surface);
  border-top: 1px solid var(--bos-divider);
}
.bos-wiz__bar .bos-btn { flex: 1; }

/* Abmelden (nur Schritt 1, Handy). Obere rechte Ecke des Kopfes - die Haupttasten
   "Zurueck" und "Weiter" liegen unten in der klebenden Leiste, dort darf er auf
   keinen Fall in die Naehe kommen. Zurueckhaltend, aber 44px Trefferflaeche:
   wer ihn sucht, muss ihn auch mit Handschuh treffen. */
.bos-wiz__headtop { display: flex; justify-content: flex-end; }
.bos-wiz__abmelden {
  display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: 0;
  /* Nur links Polster: die Trefferflaeche waechst nach innen, der Text bleibt
     buendig an der Kante des Kopfes. */
  padding: 0 0 0 var(--bos-s-6);
  font: inherit; font-size: 13px;
  /* Sekundaer, nicht tertiaer: tertiaer auf --bos-surface sind 2,8:1 und damit
     unter der Lesbarkeitsgrenze (WCAG AA verlangt 4,5:1). Sekundaer liegt bei
     5,0:1 und bleibt trotzdem deutlich hinter dem "Weiter"-Knopf zurueck. */
  color: var(--bos-text-secondary);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
/* Bauleiter im Wizard (#189): statt Abmelden ein Weg zurueck zur Baustelle,
   in jedem Schritt. Links oben, wie "← Baustellen" auf seinen anderen Seiten;
   gleich zurueckhaltend wie Abmelden, Polster nach innen (rechts). */
.bos-wiz__headtop--links { justify-content: flex-start; }
.bos-wiz__headtop--links .bos-wiz__abmelden { padding: 0 var(--bos-s-6) 0 0; text-decoration: none; }

/* --- Auswahlkarte: "Baustelle wählen" (Radio-Karte) --- */
.bos-choice { position: relative; display: flex; align-items: center; gap: var(--bos-s-4); padding: var(--bos-s-5); cursor: pointer; }
.bos-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bos-choice__radio {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid var(--bos-border-strong);
  display: inline-flex; align-items: center; justify-content: center;
}
.bos-choice__body { flex: 1; }
.bos-choice__name { font-family: var(--bos-font-display); font-weight: 600; font-size: 16px; color: var(--bos-text); }
.bos-choice__meta { margin-top: 2px; }
.bos-choice:has(input:checked) { border-color: var(--bos-blue); box-shadow: inset 3px 0 0 var(--bos-blue), var(--bos-shadow-card); }
.bos-choice:has(input:checked) .bos-choice__radio { border-color: var(--bos-blue); }
.bos-choice:has(input:checked) .bos-choice__radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--bos-blue); }
.bos-choice:has(input:focus-visible) { outline: 3px solid var(--bos-blue); outline-offset: 2px; }

/* Entwurfskarte: Fortsetzen-Fläche + Verwerfen nebeneinander. */
.bos-choice--split { gap: var(--bos-s-3); }
/* .bos-choice__body wird hier zum <button> – UA-Defaults zurücknehmen,
   damit die Karte exakt aussieht wie vorher als <span>. */
.bos-choice__fortsetzen {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column;
}
.bos-choice__verwerfen {
  flex-shrink: 0; min-height: 44px; padding: 0 var(--bos-s-3);
  background: none; border: 0; cursor: pointer;
  font-family: var(--bos-font-display); font-size: 13px; font-weight: 600;
  color: var(--bos-text-secondary);
}
.bos-choice__verwerfen:focus-visible {
  outline: 3px solid var(--bos-blue); outline-offset: 2px; border-radius: var(--bos-r-card);
}

/* Entwurf außerhalb des Nachtrag-Fensters: sichtbar, aber erkennbar tot.
   Verwerfen bleibt voll kontrastiert – es ist der einzige verbleibende Weg. */
.bos-choice--tot .bos-choice__name,
.bos-choice--tot .bos-choice__meta { color: var(--bos-text-secondary); }
.bos-choice--tot { background: var(--bos-surface); box-shadow: none; }
/* Der lebende Entwurf ist ein <button class="bos-choice__fortsetzen"> und
   bekommt damit display:flex/column von oben; der tote ist ein bloßer
   <span class="bos-choice__body"> ohne eigenes display – Name und Datum
   liefen deshalb inline statt gestapelt. */
.bos-choice--tot .bos-choice__body { display: flex; flex-direction: column; }

/* ============================================================================
   Layout – Bauleiter (Desktop). Sidebar + Hauptbereich, Baustellen-Dashboard.
   ============================================================================ */
.bos-app { display: flex; min-height: 100dvh; background: var(--bos-board); }

/* --- Sidebar (236px, dunkel) --- */
.bos-side {
  width: 236px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--bos-dark); color: var(--bos-on-dark);
  position: sticky; top: 0; height: 100dvh;
}
.bos-side__brand { display: flex; align-items: center; gap: var(--bos-s-3); padding: var(--bos-s-6) var(--bos-s-5) var(--bos-s-5); }
.bos-side__word { font-family: var(--bos-font-display); font-weight: 700; font-size: 22px; letter-spacing: -.5px; }
.bos-side__nav { display: flex; flex-direction: column; gap: 2px; padding: var(--bos-s-3) var(--bos-s-3); }
.bos-side__item {
  display: flex; align-items: center; gap: var(--bos-s-3);
  padding: 11px var(--bos-s-4);
  color: var(--bos-on-dark-2); font-size: 14px; font-weight: 600;
  border-radius: var(--bos-r-tile);
}
.bos-side__item:hover { color: var(--bos-on-dark); background: rgba(255,255,255,.05); text-decoration: none; }
.bos-side__item--on { color: var(--bos-on-dark); background: rgba(255,255,255,.08); }
.bos-side__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; }
.bos-side__item--on .bos-side__dot { background: var(--bos-hivis-bright); opacity: 1; }
.bos-side__user {
  margin-top: auto; display: flex; align-items: center; gap: var(--bos-s-3);
  padding: var(--bos-s-4) var(--bos-s-5); border-top: 1px solid rgba(255,255,255,.08);
}
.bos-side__avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.10);
  font-family: var(--bos-font-mono); font-size: 12px; font-weight: 600;
}
.bos-side__uname { font-size: 13px; color: var(--bos-on-dark-2); flex: 1; min-width: 0;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bos-side__logout { background: none; border: 0; color: var(--bos-on-dark-2); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 4px 6px; }
.bos-side__logout:hover { color: var(--bos-on-dark); }

/* --- Hauptbereich --- */
.bos-main { flex: 1; padding: var(--bos-s-8) var(--bos-s-10); max-width: 1180px; }
.bos-main__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--bos-s-8); }
.bos-main__title { font-size: 30px; font-weight: 700; letter-spacing: -1px; }
.bos-main__sub { color: var(--bos-text-secondary); margin-top: 4px; font-size: 14px; }

/* #90 Handy: unter 900 px wird die Seitenleiste zur Kopfzeile - oben Marke
   und Abmelden, darunter die Menuepunkte als umbrechende Reihe (ohne JS,
   nichts versteckt, alle drei Punkte bleiben sichtbar). Der Hauptbereich
   nimmt die volle Breite und ragt nicht mehr ueber den Rand. */
@media (max-width: 900px) {
  .bos-app { flex-direction: column; }
  .bos-side { width: auto; height: auto; position: static;
              flex-direction: row; flex-wrap: wrap; align-items: center; }
  .bos-side > .bos-hazard { flex-basis: 100%; }
  .bos-side__brand { padding: var(--bos-s-3) var(--bos-s-4); }
  .bos-side__user { order: 1; flex: 1 1 0; min-width: 0; margin: 0; justify-content: flex-end;
                    padding: var(--bos-s-2) var(--bos-s-3); border-top: 0; }
  .bos-side__uname { flex: 0 1 auto; }
  .bos-side__logout { min-width: 44px; min-height: 44px; }
  .bos-side__nav { order: 2; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; gap: 4px;
                   padding: 0 var(--bos-s-3) var(--bos-s-3); }
  .bos-side__item { min-height: 44px; padding: 0 var(--bos-s-3); }
  .bos-main { width: 100%; min-width: 0; max-width: none; padding: var(--bos-s-5) var(--bos-s-4); }
  .bos-main__head { flex-wrap: wrap; gap: var(--bos-s-3); margin-bottom: var(--bos-s-5); }
  .bos-main__title { font-size: 24px; }
}

/* #146 Handy: vier Menuepunkte in EINER Reihe (bei 390 px rutschte
   "Einstellungen" in eine zweite Zeile). Ohne Punkt, schmaler, gleich
   verteilt - der aktive Reiter zeigt den Hi-Vis-Strich statt des Punkts. */
@media (max-width: 480px) {
  .bos-side__nav { flex-wrap: nowrap; gap: 2px; padding: 0 var(--bos-s-2) var(--bos-s-2); }
  .bos-side__item { flex: 1 1 auto; justify-content: center; padding: 0 6px; font-size: 13.5px; }
  .bos-side__dot { display: none; }
  .bos-side__item--on { box-shadow: inset 0 -2px 0 var(--bos-hivis-bright); }
}

.bos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bos-s-5); }
@media (max-width: 880px) { .bos-grid { grid-template-columns: 1fr; } }

/* --- Baustellen-Karte --- */
/* text-decoration:none sitzt inline auf der Karte (Link um die ganze Kachel)
   und schaltet damit auch den globalen a:hover-Unterstrich ab - ohne eigenen
   Hover/Aktiv-Zustand sieht die Karte am Mauszeiger kaum, am Tablet gar nicht
   mehr klickbar aus. */
.bos-bsite {
  overflow: hidden; padding: 0;
  transition: box-shadow .15s ease, border-color .15s ease, transform .08s ease;
}
.bos-bsite:hover { border-color: var(--bos-blue); box-shadow: 0 10px 28px rgba(40,60,90,.16); }
.bos-bsite:active { transform: translateY(1px); box-shadow: var(--bos-shadow-card); }
.bos-bsite__head { padding: 0; }
.bos-bsite__headinner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bos-s-3);
  padding: var(--bos-s-5);
  background: linear-gradient(135deg, var(--bos-dark-grad-from), var(--bos-dark-grad-to));
}
.bos-bsite__name { font-family: var(--bos-font-display); font-weight: 700; font-size: 18px; color: var(--bos-on-dark); }
.bos-bsite__badges { display: flex; flex-direction: column; align-items: flex-end; gap: var(--bos-s-2); flex-shrink: 0; }
.bos-bsite__body { padding: var(--bos-s-5); }
.bos-bsite__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bos-s-3); }
.bos-bsite__num { font-size: 22px; font-weight: 700; color: var(--bos-text); }
.bos-bsite__num--ok { color: var(--bos-green-text); }
.bos-bsite__foot {
  margin-top: var(--bos-s-5); padding-top: var(--bos-s-4);
  border-top: 1px solid var(--bos-divider);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--bos-text-secondary);
}

/* --- Tabelle (Baustellen-Ansicht: Zur Freigabe / Erledigt) --- */
.bos-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bos-table thead th {
  text-align: left; padding: var(--bos-s-3) var(--bos-s-5);
  font-family: var(--bos-font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bos-text-tertiary);
  background: var(--bos-surface-2); border-bottom: 1px solid var(--bos-divider);
}
.bos-table tbody td { padding: var(--bos-s-4) var(--bos-s-5); border-bottom: 1px solid var(--bos-divider-2); color: var(--bos-text-body); }
.bos-table tbody tr:last-child td { border-bottom: 0; }
.bos-table tbody tr:hover { background: var(--bos-surface); }
.bos-table__r { text-align: right; }

/* Erfolgs-Kreis (Wizard-Abschluss) */
.bos-success-circle {
  width: 88px; height: 88px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bos-green-bg); color: var(--bos-success);
}

/* "Von KI vorbefüllt"-Hinweis-Chip (Schritt 5) */
.bos-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  color: var(--bos-blue); background: var(--bos-blue-soft);
  border-radius: var(--bos-r-badge);
}

/* htmx-Lade-Indikator: standardmäßig unsichtbar, während HTMX-Request sichtbar.
   Genutzt von hx-indicator="#..." auf dem „Erstellen"-Button (Schritt 5). */
.htmx-indicator { opacity: 0; transition: opacity .15s ease; pointer-events: none; }

/* Ladeansicht waehrend der Berichtserzeugung. Sie TRITT AN DIE STELLE des
   Schritt-Inhalts, statt sich als Ebene darueberzulegen: der Stepper steht
   ausserhalb von .bos-wiz__flow und bleibt deshalb sichtbar, der Polier
   verliert die Orientierung nicht. Gleiches Verhalten wie _warten.html beim
   Warten auf die Sprachauswertung.

   Ein Overlay (position: fixed, inset: 0, per Opacity eingeblendet) stand hier
   bis 01.09.2026 und wirkte druebergepappt - es deckte auch den Stepper, und
   waehrend der Blende schien der alte Inhalt durch.

   display statt opacity: kein Verblassen, der Wechsel ist sofort. Der Button
   verschwindet dabei mit der Buttonleiste, was den Doppel-Tap sicherer abfaengt
   als das fruehere pointer-events. */
.bos-lade {
  display: none; flex-direction: column;
  justify-content: center; align-items: center; gap: var(--bos-s-4);
  flex: 1 1 auto; text-align: center; padding: var(--bos-s-5);
}
.bos-wiz__flow.htmx-request > .bos-wiz__body,
.bos-wiz__flow.htmx-request > .bos-wiz__bar { display: none; }
.bos-wiz__flow.htmx-request > .bos-lade { display: flex; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* Fotos – Grid + Overlay-Löschen (Wizard-Schritt 4 & Bauleiter-Detail).
   auto-fill + feste Mindestbreite: Kacheln bleiben klein und brechen um, statt
   die Karte zu sprengen (repeat(3,1fr) gäbe den Spalten min-width:auto = die
   Intrinsic-Bildbreite -> Overflow in der breiten Bauleiter-Ansicht). */
.bos-foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--bos-s-2);
}
.bos-foto {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--bos-r-tile);
  overflow: hidden;
  background: var(--bos-surface-2);
}
.bos-foto__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bos-foto__del {
  position: absolute;
  top: var(--bos-s-1); right: var(--bos-s-1);
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: rgba(21, 34, 46, .72); color: #fff;
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.bos-foto__del:hover { background: var(--bos-danger); }

/* ============================================================================
   Kalender (Wizard-Schritt 2: Tag wählen)
   ============================================================================ */
.bos-kal { display: flex; flex-direction: column; gap: 6px; width: 100%; }

/* minmax(0,1fr) statt 1fr: 1fr gibt Spalten implizit min-width:auto und sprengt
   die Karte, sobald der Inhalt breiter will (siehe Foto-Grid, 26.07.). */
.bos-kal__wochentage,
.bos-kal__woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }

.bos-kal__wochentage span {
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--bos-text-secondary); text-transform: uppercase; letter-spacing: .04em;
}

.bos-kal__leer { aspect-ratio: 1; }

.bos-kal__tag {
  position: relative; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--bos-border-strong); border-radius: var(--bos-r-badge);
  cursor: pointer; background: var(--bos-surface);
}
.bos-kal__tag input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bos-kal__zahl { font-family: var(--bos-font-display); font-weight: 600; font-size: 15px; }

.bos-kal__punkt {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bos-amber-dot); margin-top: 2px;
}
.bos-kal__haken { font-size: 11px; line-height: 1; color: var(--bos-green-text); margin-top: 2px; }

/* Abgesendet/freigegeben: sichtbar erledigt, nicht antippbar. */
.bos-kal__tag--fix { background: var(--bos-board); color: var(--bos-text-secondary); cursor: default; }

/* box-shadow statt border-color: eine spaetere Zustandsklasse mit gleicher
   Spezifitaet wuerde eine border-color sonst je nach Deklarationsreihenfolge
   ueberschreiben und den Heute-Rahmen verschlucken. */
.bos-kal__tag--heute { box-shadow: inset 0 0 0 2px var(--bos-blue); }

.bos-kal__tag:has(input:checked) {
  border-color: var(--bos-blue); background: var(--bos-blue-bg, rgba(59,130,246,.12));
  box-shadow: inset 0 0 0 1px var(--bos-blue);
}
.bos-kal__tag:has(input:focus-visible) { outline: 3px solid var(--bos-blue); outline-offset: 2px; }

/* Nur fuer Screenreader – die Kachel zeigt die Tageszahl, das Label traegt
   die Bedeutung. title allein liest nicht jeder Screenreader vor. */
.bos-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Aufklappbares Hinzufuegen-Formular --------------------------------- */
/* Die Bauleiter-Ansicht ist eine PRUEFseite: vier dauerhaft offene Formulare
   haetten die Zeilen, um die es geht, unter leeren Feldern begraben. Das
   <summary> traegt die Knopf-Klassen und ersetzt den Dreieck-Marker durch das
   Plus im Text. Bewusst ohne Skript - <details> ueberlebt jeden HTMX-Swap des
   Blocks, ohne neu verdrahtet zu werden, und klappt nach dem Hinzufuegen von
   selbst wieder zu. */
.bos-aufklapp { margin-top: var(--bos-s-3); }
.bos-aufklapp > summary { list-style: none; cursor: pointer; }
.bos-aufklapp > summary::-webkit-details-marker { display: none; }
.bos-aufklapp__inhalt { display: flex; flex-direction: column;
                        gap: var(--bos-s-3); margin-top: var(--bos-s-3); }

/* --- Monatskalender der Bauleiter-Baustellenansicht -------------------------
   Eigene Klassen neben .bos-kal*: jene gehoeren dem Polier-Wizard (Radios,
   Nachtragsfenster), diese hier sind Anzeige und Links. Getrennt zu halten
   ist billiger, als eine Klasse zwei Bedeutungen tragen zu lassen. */
.bos-mkal__kopf { display:flex; align-items:center; justify-content:space-between;
                  gap: var(--bos-s-3); margin-bottom: var(--bos-s-4); flex-wrap:wrap; }
.bos-mkal__nav { display:flex; align-items:center; gap: var(--bos-s-2); }
.bos-mkal__monat { font-family: var(--bos-font-display); font-size:19px; font-weight:600;
                   min-width:190px; text-align:center; }
.bos-mkal__pfeil { width:36px; height:36px; border-radius: var(--bos-r-btn);
                   border:1px solid var(--bos-border-strong); background: var(--bos-white);
                   color: var(--bos-text); font-size:16px; cursor:pointer; }
.bos-mkal__offen { display:inline-flex; align-items:center; gap: var(--bos-s-2);
                   padding:6px 12px; border-radius: var(--bos-r-badge); border:0;
                   background: var(--bos-amber-bg); color: var(--bos-amber-text);
                   font-size:13px; font-weight:600; cursor:pointer; }
.bos-mkal__offen i { width:8px; height:8px; border-radius:50%; background: var(--bos-amber-dot); }
/* Resttage-Banner (Aufgabe 10, Punkt 4) - optisch dieselbe Pille wie
   .bos-mkal__offen, aber ein EIGENER Klassenname: test_durchstich_e2e.py::
   test_voller_durchstich_ueber_die_ui prueft ".bos-mkal__offen".count()==0,
   sobald nichts mehr auf Freigabe wartet - ein Bericht bei der ÖBA ist kein
   "wartet auf Freigabe" und darf diesen Selektor nicht mittreffen. Blau statt
   amber, damit beide Banner nebeneinander auf einen Blick unterscheidbar
   bleiben (wie .bos-badge--eingereicht/andere Status auch schon verschiedene
   Farben tragen). */
.bos-mkal__frist { display:inline-flex; align-items:center; gap: var(--bos-s-2);
                    padding:6px 12px; border-radius: var(--bos-r-badge); border:0;
                    background: var(--bos-blue-bg, rgba(23,99,224,.12)); color: var(--bos-blue);
                    font-size:13px; font-weight:600; }
.bos-mkal__frist i { width:8px; height:8px; border-radius:50%; background: var(--bos-blue); }

/* Baustellenseite (#189): "Bericht schreiben" ueber dem Kalender, und der
   Hinweis nach dem eigenen Absenden. Am Handy volle Breite, am Rechner so
   breit wie der Text. */
.bos-schreiben { display: inline-flex; align-items: center; gap: var(--bos-s-2); margin-bottom: var(--bos-s-5); }
.bos-gesendet { display: flex; align-items: center; gap: var(--bos-s-3);
                padding: var(--bos-s-4) var(--bos-s-5); margin-bottom: var(--bos-s-5);
                background: var(--bos-green-bg); color: var(--bos-green-text);
                border: 0; font-size: 14px; text-decoration: none; }
@media (max-width: 900px) {
  .bos-schreiben { display: flex; justify-content: center; width: 100%; min-height: 52px; }
}

.bos-mkal { display:grid; grid-template-columns: 34px repeat(7, minmax(0,1fr)) 40px;
            gap:6px; align-items:center; }
.bos-mkal__wt, .bos-mkal__kw { font-family: var(--bos-font-mono); font-size:11px;
                               color: var(--bos-text-tertiary); text-align:center; }
/* max-height: auf breiten Bildschirmen wuerden die quadratischen Kacheln ueber
   130px hoch, ein Monat mit sechs Wochen passte nicht mehr auf einen Laptop
   (am Screenshot gesehen). Breit werden sie flacher, schmal bleiben sie quadratisch.
   width:100% ist dafuer noetig: ohne feste Breite uebertraegt der Browser den
   Hoehendeckel ueber aspect-ratio auch auf die Breite, und die Kacheln rutschen
   als kleine Quadrate an den linken Spaltenrand, weg von den Wochentagen. */
.bos-mkal__tag { position:relative; aspect-ratio:1; width:100%; max-height:80px;
                 border-radius: var(--bos-r-tile);
                 border:1px solid var(--bos-border); background: var(--bos-white);
                 display:flex; flex-direction:column; align-items:center;
                 justify-content:center; gap:3px; text-decoration:none; color: var(--bos-text); }
a.bos-mkal__tag:hover { border-color: var(--bos-border-strong); box-shadow: var(--bos-shadow-card); }
/* a.bos-mkal__tag:hover und .bos-mkal__tag--heute haben dieselbe Spezifitaet
   fuer box-shadow (0,2,1 vs. 0,1,0 - der Hover-Selektor gewinnt IMMER, nicht
   nur per Deklarationsreihenfolge) - auf der heutigen Kachel loeschte Hover
   damit den Innenrahmen. Eigene Regel mit derselben Spezifitaet wie der
   Hover-Selektor oben (F-3), die beide Schatten traegt. */
a.bos-mkal__tag--heute:hover {
  box-shadow: inset 0 0 0 2px var(--bos-blue), var(--bos-shadow-card);
}
a.bos-mkal__tag:focus-visible { outline:3px solid var(--bos-blue); outline-offset:2px; }
.bos-mkal__tag--fremd { background:transparent; border-color:transparent; color: var(--bos-text-tertiary); }
.bos-mkal__zahl { font-family: var(--bos-font-display); font-weight:600; font-size:15px; }
.bos-mkal__zeichen { font-size:11px; line-height:1; }
/* Innenschatten statt border-color: der Rahmen traegt schon den Zustand. */
.bos-mkal__tag--heute { box-shadow: inset 0 0 0 2px var(--bos-blue); }

/* Farben (Spec 2026-09-17 §4): knallig = hier ist etwas zu tun, gruen = fertig.
   Bei der OEBA liegt nichts beim Bauleiter - deshalb ruhig: blau (bis 19.09.2026
   grau; Grau gehoert jetzt dem Wochenende, Thomi). */
.bos-mkal__tag--eingereicht, .bos-mkal--eingereicht {
  background: var(--bos-amber-bg); border-color: var(--bos-amber-text); }
.bos-mkal__tag--zurueckgewiesen, .bos-mkal--zurueckgewiesen {
  background: rgba(199,55,42,.13); border-color: var(--bos-danger); }
.bos-mkal__tag--zur_durchsicht, .bos-mkal--bei-oeba {
  background: var(--bos-blue-soft); border-color: var(--bos-blue); }
.bos-mkal__tag--unterschrieben, .bos-mkal__tag--bestaetigt, .bos-mkal__tag--freigegeben, .bos-mkal--final {
  background: var(--bos-green-bg); border-color: var(--bos-green-text); }
.bos-mkal--frei { background: var(--bos-white); }
/* Wochenende: nur eine LEERE Kachel (siehe _kalender.html) - fluechtig grau,
   ohne sichtbaren Rand, Zahl blass. Da muss kein Bericht sein. */
.bos-mkal__tag--we { background: #ECEFF2; border-color: #ECEFF2; color: var(--bos-text-tertiary); }
.bos-mkal__wt--we { color: #B8C2CC; }

/* Fremdmonatskachel MIT Zustand (F-1): traegt dieselbe Zustandsklasse wie eine
   eigene Kachel (Hintergrund/Rahmen aus den Farben oben, hoehere Spezifitaet
   gewinnt gegen die transparente Grundregel), zusaetzlich blass ueber opacity -
   dasselbe Mittel wie .bos-mkal__dl[disabled]. Nur die Deckkraft sinkt, Zeichen
   und Rahmenfarbe bleiben dieselben wie im eigenen Monat, sonst waere der
   Zustand nicht mehr erkennbar. */
.bos-mkal__tag--fremd.bos-mkal__tag--zur_durchsicht,
.bos-mkal__tag--fremd.bos-mkal__tag--eingereicht,
.bos-mkal__tag--fremd.bos-mkal__tag--zurueckgewiesen,
.bos-mkal__tag--fremd.bos-mkal__tag--unterschrieben,
.bos-mkal__tag--fremd.bos-mkal__tag--bestaetigt,
.bos-mkal__tag--fremd.bos-mkal__tag--freigegeben { opacity: .6; }

/* Legende des Monatskalenders (umgezogen aus .bos-lage__legende, F-3). */

/* Nur der Pfeil, keine Beschriftung: "3 PDFs" ueberfrachtet die Zeile. */
.bos-mkal__dl { width:32px; height:32px; padding:0; margin:0 auto; display:flex;
                align-items:center; justify-content:center; cursor:pointer;
                border-radius: var(--bos-r-btn); border:1px solid var(--bos-border);
                background: var(--bos-white); color: var(--bos-text-secondary); font-size:15px; }
.bos-mkal__dl:hover { border-color: var(--bos-border-strong); color: var(--bos-blue);
                      box-shadow: var(--bos-shadow-card); }
.bos-mkal__dl[disabled] { opacity:.5; cursor:default; }
/* SVG statt Zeichen (font-size auf .bos-mkal__dl greift hier nicht mehr):
   ohne display:block bliebe unter dem SVG ein inline-typischer Streifen
   Leerraum, der den Pfeil im Knopf nach oben verschiebt. */
.bos-mkal__dl-pfeil { display:block; }

/* --- Kompakte Freigabe-Ansicht --------------------------------------------- */
.bos-kopfkarten { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
                  gap: var(--bos-s-3); margin-bottom: var(--bos-s-3); }
.bos-kopfkarte { display:flex; flex-direction:column; gap:6px; padding: var(--bos-s-4);
                 background: var(--bos-surface); border:1px solid var(--bos-border); border-radius: var(--bos-r-card); }
.bos-kopfkarte__wert { font-size:18px; color: var(--bos-text); }
.bos-kopfkarte__wetter { margin:2px 0 0; display:grid; grid-template-columns:1fr 1fr; gap: var(--bos-s-3); font-size:14px; }
.bos-kopfkarte__wetter dt { font-size:12px; color: var(--bos-text-secondary); }
.bos-kopfkarte__wetter dd { margin:0; color: var(--bos-text); font-weight:600; }

/* Hoechstens zwei Spalten, jede mindestens 320px: bei 820px Fensterbreite
   blieben neben der Sidebar ~85px fuer den Namen, "Kettenbagger" brach
   mitten im Wort (am Screenshot gesehen). Der Browser faellt damit ohne
   Media-Query von selbst auf eine Spalte zurueck.
   margin-bottom am Raster, nicht nur an den Karten: am Spaltenende schneidet
   der Browser den Kartenabstand ab, die Taetigkeitskarte klebte sonst an der
   letzten Karte. */
.bos-rk__raster { columns: 2 320px; column-gap: var(--bos-s-3);
                  margin-bottom: var(--bos-s-4); }
.bos-rk { background: var(--bos-surface); border:1px solid var(--bos-border);
          border-radius: var(--bos-r-card); padding: var(--bos-s-4);
          break-inside: avoid; margin-bottom: var(--bos-s-3); }

/* Feste Spalten: Anzahl, Zahl und Einheit stehen untereinander in einer
   Flucht. tabular-nums, damit eine 1 so breit laeuft wie eine 4 - ohne das
   wandert die Zahl trotz fester Spalte.
   Zahlspalte 64px statt 52px: "1250,00 t" Frostschutz lief ueber die Spalte
   hinaus und stiess an die Einheit (am Screenshot gesehen); 64px tragen acht
   Mono-Zeichen. */
.bos-rz { display:grid; grid-template-columns: minmax(0,1fr) 30px 64px 24px;
          gap:0 var(--bos-s-2); align-items:baseline; font-size:13.5px; padding:3px 0; }
.bos-rz + .bos-rz { border-top:1px solid var(--bos-divider-2); }
.bos-rz__name { font-style:normal; overflow-wrap:anywhere; }
.bos-rz__anzahl, .bos-rz__zahl, .bos-rz__einheit {
  font-family: var(--bos-font-mono); font-weight:500; font-style:normal;
  color: var(--bos-text-secondary); white-space:nowrap;
  font-variant-numeric: tabular-nums; }
.bos-rz__anzahl, .bos-rz__zahl { text-align:right; }
.bos-rz__einheit { font-size:12px; color: var(--bos-text-tertiary); }

/* Kartenkopf: dieselbe Marke fuer die vier Ressourcenkarten (_ressourcen_block.html,
   Lesemodus) und die Fotokarte (_fotokarte.html) - R-16, damit die Karten im
   Raster gleich anfangen, egal was darunter steht. */
.bos-rk__kopf { display:flex; align-items:baseline; justify-content:space-between;
                gap: var(--bos-s-2); margin-bottom: var(--bos-s-3); }
.bos-rk__titel { font-size:12px; font-family: var(--bos-font-mono); letter-spacing:.05em;
                 text-transform:uppercase; color: var(--bos-text-tertiary); margin:0; }
.bos-rk__summe { font-family: var(--bos-font-display); font-weight:600; font-size:17px;
                 color: var(--bos-text); }

/* Foto-Vorschau (_fotokarte.html): immer vier Kacheln, immer dieselbe
   Kartenhoehe - drei Bilder plus Mehr-Kachel ab dem fuenften Foto, sonst
   bleiben graue Plaetze stehen. */
.bos-fk { display:grid; grid-template-columns: repeat(2, 1fr); gap:6px; }
.bos-fk__k { position:relative; aspect-ratio:4/3; border-radius: var(--bos-r-tile);
             overflow:hidden; border:1px solid var(--bos-border); background: var(--bos-board);
             cursor:pointer; padding:0; display:block; width:100%; }
.bos-fk__k img { width:100%; height:100%; object-fit:cover; display:block; }
.bos-fk__k:hover { border-color: var(--bos-blue); }
.bos-fk__mehr { display:flex; align-items:center; justify-content:center;
                background: var(--bos-surface-2); font-family: var(--bos-font-display);
                font-weight:600; font-size:20px; color: var(--bos-text-secondary); }
/* Freier Platz haelt die Kartenhoehe, ist aber kein Knopf. */
.bos-fk__leer { background: var(--bos-board); border-style:dashed; cursor:default; }
.bos-fk__nichts { font-size:13px; color: var(--bos-text-tertiary);
                  padding: var(--bos-s-2) 0 var(--bos-s-4); margin:0; }

/* Galerie: zwei grosse Fotos nebeneinander, senkrecht scrollbar, ueber der
   ganzen Seite. Farben als Token (--bos-overlay*, R-9/R-9b) statt
   rgba-Literal in der Regel - dieselben Werte wie im Entwurf freigabe.html. */
.bos-galerie { position:fixed; inset:0; background: var(--bos-overlay); z-index:50; overflow-y:auto; }
.bos-galerie__leiste { position:sticky; top:0; display:flex; align-items:center;
                       justify-content:space-between; gap: var(--bos-s-4);
                       padding: var(--bos-s-4) var(--bos-s-5); background: var(--bos-overlay-leiste); }
.bos-galerie__titel { color: var(--bos-on-dark); font-family: var(--bos-font-display); font-size:16px; }
.bos-galerie__zu { border:1px solid var(--bos-overlay-rand); background:transparent;
                   color: var(--bos-on-dark); border-radius: var(--bos-r-btn);
                   padding:7px 14px; font-size:14px; cursor:pointer; }
.bos-galerie__raster { display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--bos-s-4);
                       padding: var(--bos-s-4) var(--bos-s-5) 60px; max-width:1600px; margin:0 auto; }
.bos-galerie__bild { width:100%; border-radius: var(--bos-r-card); display:block;
                     background: var(--bos-board); }

/* EINE grosse Karte (Entwurf freigabe.html, R-15): Kopfzeile, Fakten,
   Kartenraster, Text und Freigeben sitzen zusammen darin statt lose auf dem
   Seitenhintergrund. Der Ruecklink steht darueber. */
.bos-zurueck { display:inline-block; margin-bottom: var(--bos-s-4); font-size:14px;
               color: var(--bos-blue); text-decoration:none; }
.bos-zurueck:hover { text-decoration:underline; }
.bos-bericht-karte { padding: var(--bos-s-5); }
.bos-bericht__kopf { display:flex; align-items:flex-start; justify-content:space-between;
                     gap: var(--bos-s-4); flex-wrap:wrap; margin-bottom: var(--bos-s-4); }
.bos-bericht__kopf { flex-wrap:nowrap; }
.bos-bericht__wer { min-width:0; }
.bos-bericht__nr { font-family: var(--bos-font-display); font-size:26px; font-weight:700; letter-spacing:-.5px;
                   line-height:1.2; margin:0; overflow-wrap:anywhere; }
.bos-bericht__datum { margin:6px 0 0; font-size:16px; font-weight:600; color: var(--bos-text); }
.bos-bericht__sub { margin:2px 0 0; color: var(--bos-text-secondary); font-size:14px; }
.bos-bericht__marken { display:flex; gap: var(--bos-s-2); align-items:center; flex-wrap:wrap; margin-top: var(--bos-s-3); }
.bos-bericht__aktionen { display:flex; gap: var(--bos-s-2); align-items:center; flex-wrap:wrap; justify-content:flex-end; flex-shrink:0; }
.bos-bericht__aktionen .bos-btn { --_h: 36px; padding: 0 14px; font-size:14px; border-radius:10px; box-shadow:none; }
.bos-bericht__text h2 { font-size:14px; color: var(--bos-blue); margin: var(--bos-s-5) 0 var(--bos-s-2); }
.bos-bericht__text h2:first-child { margin-top:0; }
.bos-bericht__text p { margin:0; white-space:pre-wrap; font-size:14px; line-height:1.55; }

/* Stift rechts in der Kopfzeile: schaltet Lesen/Bearbeiten (R-8).
   Blau wie jede Aktion (Thomi 31.10.2026), Lesen: nur das Symbol. */
.bos-stift { display:inline-flex; align-items:center; justify-content:center; gap:6px;
             border:0; background: var(--bos-blue); color: var(--bos-on-dark);
             border-radius: 10px; min-width:36px; height:36px; padding:0 12px; font-family:inherit;
             font-size:14px; font-weight:600; cursor:pointer; }
.bos-stift--symbol { padding:0; width:36px; }
.bos-stift .bos-icon { width:17px; height:17px; }
.bos-stift:hover { filter: brightness(1.1); }

/* ---- Portal der OEBA: fuer den PC ausgelegt (Spec 2026-09-17 §3) ----------
   Die OEBA arbeitet meist am Rechner, oft mit aelteren Augen: breite
   Leseflaeche, groessere Schrift, Aktionen in einer festen Seitenspalte.
   Unter 900px stapelt sich alles - am Handy benutzbar, ohne eigenen Schliff. */
.bos-durchsicht { max-width: 1200px; margin: 0 auto; padding: var(--bos-s-6) var(--bos-s-5);
                  display: flex; flex-direction: column; gap: var(--bos-s-5); font-size: 17px; }
.bos-durchsicht__kopf { display: flex; align-items: flex-end; justify-content: space-between;
                        gap: var(--bos-s-4); flex-wrap: wrap; }
.bos-durchsicht__karte { padding: var(--bos-s-5); display: flex; flex-direction: column; gap: var(--bos-s-3); }
.bos-durchsicht__schritte { margin: 0; padding-left: 1.3em; line-height: 1.6; }
.bos-durchsicht--zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) 340px;
                               align-items: start; }
.bos-durchsicht--zweispaltig > .bos-durchsicht__kopf { grid-column: 1 / -1; }
.bos-durchsicht__inhalt { display: flex; flex-direction: column; gap: var(--bos-s-4); min-width: 0; }
.bos-durchsicht__seite { position: sticky; top: var(--bos-s-5); display: flex;
                         flex-direction: column; gap: var(--bos-s-4); }
.bos-durchsicht__liste { display: flex; flex-direction: column; gap: var(--bos-s-2); }
.bos-durchsicht__zeile { display: grid; grid-template-columns: 1fr auto auto; gap: var(--bos-s-3);
                         align-items: center; padding: var(--bos-s-3) var(--bos-s-4); }
.bos-stempel-vorschau { background: var(--bos-white); border: 1px dashed var(--bos-border-strong);
                        border-radius: var(--bos-r-card, 8px); padding: var(--bos-s-4);
                        display: flex; justify-content: center; }
/* Geraetetest 18.09.2026 (Review-Fund): 240px machte den Ausschnitt-Rahmen
   auf einem 1440px-Bildschirm zur Briefmarke (~240x240px) - genau darin soll
   jemand mit aelteren Augen den Ausschnitt ziehen, die 30px-Anfasser
   (.bos-stempel-griff) ueberdeckten darin schon einen erheblichen Teil der
   Bildbreite. 60vh nutzt die verfuegbare Bildschirmhoehe statt eines festen,
   an eine bestimmte Bildschirmgroesse geratenen Pixelwerts; max-width:100%
   verhindert Querscrollen, wenn die Karte selbst schon schmal ist (Handy). */
.bos-stempel-vorschau img { max-width: 100%; max-height: 60vh; }
/* Fix-Runde 1 (Review Aufgabe 8, Fund 2): .bos-phone lieferte der Anmeldeseite
   volle Bildschirmhoehe, Hintergrundflaeche UND zentrierte den Login-Block -
   der reine bos-durchsicht-Tausch (Aufgabe 8) hat das stillschweigend
   verloren (kein min-height, kein Hintergrund, .bos-login__flex:1 wuchs ins
   Leere). Eigene Modifier-Klasse statt Inline-Style, damit die Anmeldeseite
   wieder genauso volle Hoehe fuellt wie vorher. */
.bos-durchsicht--anmeldung { max-width: 480px; min-height: 100dvh;
                             background: var(--bos-surface); justify-content: center; }
@media (max-width: 900px) {
  .bos-durchsicht { padding: var(--bos-s-4); font-size: 16px; }
  .bos-durchsicht--zweispaltig { grid-template-columns: 1fr; }
  .bos-durchsicht__seite { position: static; }
  .bos-durchsicht__zeile { grid-template-columns: 1fr; }
  /* Etwas knapper als am Desktop (Review-Fund, Geraetetest 18.09.2026):
     damit "Übernehmen" (unterhalb der Vorschau, _stempel_auswahl.html) am
     Handy nicht zu weit nach unten rutscht. */
  .bos-stempel-vorschau img { max-height: 45vh; }
}

/* Auswahlrahmen ueber der Stempel-Vorschau (Aufgabe 11): die ÖBA zieht den
   Rahmen auf den Bereich zusammen, der uebrig bleiben soll. .bos-stempel-
   rahmen ist inline-block und damit EXAKT so gross wie das gerenderte Bild -
   ein Prozentsatz davon ist damit automatisch derselbe Anteil des
   Originalbilds (siehe Skript in oeba/stempel.html).

   ZWEI Ebenen mit identischer Position, bewusst getrennt: .bos-stempel-clip
   (Bild + Abdunklung) ist overflow:hidden, damit der riesige Schatten der
   Abdunklung nicht ueber das Bild hinaus auf die Seite blutet. Die Anfasser
   (.bos-stempel-auswahl) liegen EINE Ebene hoeher, ausserhalb dieses
   Zuschnitts - sonst waeren sie an einer Bildkante (Vorbelegung: der ganze
   Inhalt!) zur Haelfte abgeschnitten, genau dort, wo sie zuerst auffallen
   muessten. */
.bos-stempel-rahmen { position: relative; display: inline-block; line-height: 0; }
.bos-stempel-clip { position: relative; overflow: hidden; }
.bos-stempel-rahmen img { display: block; }
.bos-stempel-dimmen {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  /* Riesiger, an .bos-stempel-clip abgeschnittener Schatten: dimmt alles
     AUSSERHALB der Auswahl ab, ohne eine zweite Flaeche je Rand zu brauchen. */
  box-shadow: 0 0 0 9999px rgba(20, 30, 45, .45);
  pointer-events: none;
}
.bos-stempel-auswahl {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  border: 2px solid var(--bos-white);
  cursor: move;
  touch-action: none;   /* sonst scrollt die Seite beim Ziehen mit dem Finger weg */
}
.bos-stempel-griff {
  position: absolute; width: 30px; height: 30px; margin: -15px;
  background: var(--bos-white); border: 3px solid var(--bos-blue); border-radius: 50%;
  touch-action: none;
}
.bos-stempel-griff--oben-links { left: 0; top: 0; cursor: nwse-resize; }
.bos-stempel-griff--oben-rechts { left: 100%; top: 0; cursor: nesw-resize; }
.bos-stempel-griff--unten-links { left: 0; top: 100%; cursor: nesw-resize; }
.bos-stempel-griff--unten-rechts { left: 100%; top: 100%; cursor: nwse-resize; }

/* Download-Pfeil im Kreis auf den drei PDF-Knoepfen der Uebersicht
   (Geraetetest 19.09.2026): .bos-btn ist bereits inline-flex mit gap, das
   SVG braucht daher keinen eigenen Abstand zum Label - nur display:block
   gegen den inline-typischen Leerraum unter dem SVG (sonst wandert der Pfeil
   minimal nach oben aus der Mitte, siehe .bos-mkal__dl-pfeil). */
.bos-durchsicht__dl-pfeil { display: block; flex-shrink: 0; }

/* ============================================================================
   Zugaenge: Seite "Team" und Zuteilung auf der Baustelle (Spec 2026-09-23)
   ============================================================================ */
.bos-badge--eingeladen { background: var(--bos-amber-bg); color: var(--bos-amber-text); }
.bos-badge--eingeladen::before { background: var(--bos-amber-dot); }
.bos-badge--aktiv { background: var(--bos-green-bg); color: var(--bos-green-text); }
.bos-badge--aktiv::before { background: var(--bos-green-dot); }

/* Benutzername im Link-Kasten (_link_teilen.html) */
.bos-zugang__user { font-family: var(--bos-font-mono); overflow-wrap: anywhere; }

.bos-meldung { padding: var(--bos-s-3) var(--bos-s-4); border-radius: var(--bos-r-tile);
               background: var(--bos-amber-bg); color: var(--bos-amber-text); font-size: 14px; }
/* Fehler einer htmx-Aktion (static/js/htmx_fehler.js): oben, bleibt beim Scrollen */
.bos-meldung--oben { position: sticky; top: 0; z-index: 50; border-radius: 0; text-align: center;
                     /* amber-bg ist durchscheinend - darunter Weiss, damit nichts durchscheint */
                     background: linear-gradient(var(--bos-amber-bg), var(--bos-amber-bg)), var(--bos-white);
                     box-shadow: 0 2px 8px rgba(21,34,46,.12); }

/* Link genau einmal: Feld volle Breite, Knopf darunter (wie oeba_erstellt.html) */
.bos-linkbox { display: flex; flex-direction: column; gap: var(--bos-s-3); padding: var(--bos-s-5);
               border: 2px solid var(--bos-blue); }
.bos-linkbox__feld { font-family: var(--bos-font-mono); font-size: 13px; }

/* Zuteilung in den Baustellen-Karten der Seite "Team": Liste der
   Zugeteilten, darunter die Auswahl zum Hinzufuegen */
.bos-zuteilung__liste { list-style: none; margin: 0 0 var(--bos-s-3); padding: 0; }
.bos-zuteilung__eintrag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bos-s-2) var(--bos-s-4);
                          padding: var(--bos-s-3) 0; border-bottom: 1px solid var(--bos-border); }
.bos-zuteilung__wer { flex: 1 1 180px; min-width: 0; }
.bos-zuteilung__entfernen { --_h: 44px; font-size: 14px; color: var(--bos-danger);
                            border-color: var(--bos-border-strong); margin-left: auto; }
.bos-zuteilung__user { font-family: var(--bos-font-mono); font-size: 13px; color: var(--bos-text-secondary);
                       white-space: nowrap; margin-left: var(--bos-s-2); }
/* Hinzufuegen mit eigenem Label deutlich unter der Liste - nicht direkt
   unter "Entfernen" (produkt.md). */
.bos-zuteilung__dazu { display: flex; flex-wrap: wrap; gap: var(--bos-s-2); margin-top: var(--bos-s-5); }
.bos-zuteilung__dazu .bos-label { flex-basis: 100%; }
.bos-zuteilung__dazu select { flex: 1 1 200px; min-width: 0; }

/* ==========================================================================
   Seite "Team" (Thomi 24.09.2026, loest "Poliere" und "Verwaltung" ab)
   Unterreiter, Personen- und Baustellen-Karten zum Aufklappen, Einladen-Feld.
   Von Anfang an fuer 390 px (#90): Raster einspaltig, Reiter volle Breite.
   ========================================================================== */

/* Unterreiter als Segment-Schalter - Links, damit es ohne Skript geht */
.bos-reiter { display: flex; gap: 4px; padding: 4px; margin-bottom: var(--bos-s-5);
              background: var(--bos-surface-2); border-radius: 14px; width: fit-content; max-width: 100%; }
/* Basis auto statt 0: bei width: fit-content bekaeme sonst jeder Reiter die
   gleiche Breite und "Bauleiter" endete am PC in "Baule…" (Issue #118) */
.bos-reiter__tab { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 18px; border-radius: 10px;
                   display: inline-flex; align-items: center; justify-content: center; gap: 8px;
                   font-weight: 600; font-size: 15px; color: var(--bos-text-secondary); white-space: nowrap; }
.bos-reiter__tab:hover { text-decoration: none; }
/* Schmales Handy (bis 320 px): der Text kuerzt sich, die Zahl bleibt */
.bos-reiter__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bos-reiter__zahl { flex-shrink: 0; }
@media (hover: hover) { .bos-reiter__tab:hover { color: var(--bos-text); } }
.bos-reiter__tab--an { background: var(--bos-white); color: var(--bos-text);
                       box-shadow: 0 2px 8px rgba(21,34,46,.12); }
.bos-reiter__zahl { font-family: var(--bos-font-mono); font-size: 12px; font-weight: 600;
                    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
                    background: var(--bos-border); color: var(--bos-text);
                    display: inline-flex; align-items: center; justify-content: center; }
.bos-reiter__tab--an .bos-reiter__zahl { background: var(--bos-blue-soft); color: var(--bos-blue); }
.bos-reiter__zahl--warn,
.bos-reiter__tab--an .bos-reiter__zahl--warn { background: var(--bos-amber-dot); color: var(--bos-dark); }
@media (max-width: 600px) {
  .bos-reiter { width: 100%; }
  .bos-reiter__tab { padding: 0 8px; font-size: 14px; gap: 6px; }
}

.bos-teambereich__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                         gap: var(--bos-s-2) var(--bos-s-4); margin-bottom: var(--bos-s-4); }
.bos-teambereich__lizenzen { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px;
                             background: var(--bos-blue-soft); color: var(--bos-blue);
                             font-weight: 700; font-size: 14px; white-space: nowrap; }

/* Karten-Raster: min() haelt eine Spalte auch unter 300 px im Rahmen */
.bos-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
             gap: var(--bos-s-5); align-items: start; }

/* Personen-/Baustellen-Karte: <details>, das <summary> ist die ganze
   geschlossene Karte (Kopf wie .bos-bsite, darunter Baustellen/Bauleitung). */
.bos-person { overflow: hidden; padding: 0; transition: box-shadow .15s ease, border-color .15s ease; }
.bos-person[open] { border-color: var(--bos-blue); }
/* Hover-Rahmen nur mit echter Maus - am Handy bliebe er nach dem Antippen stehen */
@media (hover: hover) { .bos-person:hover { border-color: var(--bos-blue); } }
.bos-person[open] { box-shadow: 0 10px 28px rgba(40,60,90,.16); }
.bos-person__zu { display: block; list-style: none; cursor: pointer; }
.bos-person__zu::-webkit-details-marker { display: none; }
.bos-person__zu:focus-visible { outline: 3px solid var(--bos-blue); outline-offset: -3px; }
.bos-person__kopf { display: flex; align-items: center; gap: var(--bos-s-3); min-height: 92px;
                    padding: 14px var(--bos-s-5); background: var(--bos-white); }
.bos-person__kopf > .bos-badge { margin-left: auto; flex-shrink: 0; }
.bos-person__kuerzel { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
                       display: inline-flex; align-items: center; justify-content: center;
                       background: rgba(255,255,255,.12); color: var(--bos-on-dark);
                       font-family: var(--bos-font-mono); font-weight: 600; font-size: 14px; }
.bos-person__wer { display: flex; flex-direction: column; min-width: 0; }
/* Geschlossene Karten gleich hoch (Issue #118): Platz fuer zwei Zeilen
   Namen (min-height am Kopf), erst ab der dritten endet er in "…" -
   aufgeklappt steht er ganz (Handytest 26.10.2026). */
.bos-person__name { font-family: var(--bos-font-display); font-weight: 700; font-size: 16px; line-height: 1.25;
                    color: var(--bos-text); overflow-wrap: anywhere; overflow: hidden;
                    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bos-person__user { margin-top: 3px; font-size: 12.5px; color: var(--bos-text-tertiary); }
.bos-person__tag { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 999px;
                   background: var(--bos-hivis-bright); color: var(--bos-dark);
                   font-family: var(--bos-font-body); font-size: 11px; font-weight: 700; vertical-align: 2px; }
.bos-person__leer { display: block; margin-top: 6px; font-size: 13px; line-height: 26px; height: 26px;
                    color: var(--bos-text-tertiary); }
.bos-person__leer--warn { color: var(--bos-amber-text); font-weight: 600; }
.bos-person__leute { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bos-person__leut { display: flex; align-items: center; gap: 10px; font-size: 14px; overflow-wrap: anywhere; }
.bos-person__kuerzel--klein { width: 30px; height: 30px; font-size: 11px;
                              background: var(--bos-surface-2); color: var(--bos-text); }
/* Gesperrt: nur Kuerzel und Name gedaempft - das Badge bleibt voll lesbar,
   auf dem dunklen Kopf mit heller, deckender Flaeche. */
.bos-person--gesperrt .bos-person__kuerzel,
.bos-person--gesperrt .bos-person__wer { filter: grayscale(1); opacity: .55; }
.bos-person__kopf > .bos-badge--gesperrt { background: var(--bos-surface-2); color: var(--bos-locked); }
/* Baustelle ohne Bauleitung: oben und mit gelbem Rand */
.bos-person--warn, .bos-person--warn[open] { border: 2px solid var(--bos-amber-dot); }
@media (hover: hover) { .bos-person--warn:hover { border-color: var(--bos-amber-dot); } }

/* Aufgeklappter Teil: grosse Knoepfe untereinander, Sperren abgesetzt */
.bos-person__aktionen { display: flex; flex-direction: column; gap: var(--bos-s-4);
                        padding: var(--bos-s-4) var(--bos-s-5) var(--bos-s-5);
                        background: var(--bos-surface); border-top: 1px solid var(--bos-divider); }
.bos-person__aktionen > .bos-gefahr { margin-top: var(--bos-s-2); }
.bos-person__aktionen .bos-btn { width: 100%; }
.bos-person__aktionen .bos-zuteilung__entfernen { width: auto; }
.bos-person__aktionen .bos-zuteilung__dazu { margin-top: 0; }
.bos-person__aktionen .bos-zuteilung__liste { margin: 0; }
.bos-btn--sperren { background: transparent; color: var(--bos-danger); border-color: var(--bos-danger); }
@media (hover: hover) { .bos-btn--sperren:hover { background: rgba(199,55,42,.08); } }

/* Einladen: oben im Bereich, geoeffnet ueber den blauen Knopf oben rechts
   (Thomi 04.10.2026 - kein strichliertes Feld mehr). Ist nichts davon
   sichtbar (kein Link, Formular zu), nimmt der Bereich keinen Platz. */
.bos-einladen-slot { display: flex; flex-direction: column; gap: var(--bos-s-4); min-width: 0;
                     max-width: 520px; margin-bottom: var(--bos-s-5); }
.bos-einladen-slot:not(:has(> :not([hidden]))) { display: none; }
.bos-einladen__form { display: flex; flex-direction: column; gap: var(--bos-s-2); padding: var(--bos-s-5);
                      border: 2px solid var(--bos-blue); border-radius: var(--bos-r-card); background: var(--bos-white); }
.bos-einladen__reihe { display: flex; gap: 10px; margin-top: var(--bos-s-3); }
.bos-einladen__reihe .bos-btn { flex: 1 1 0; min-width: 0; padding: 0 var(--bos-s-3); text-decoration: none; }
.bos-einladen__voll { margin: 0; }

/* ==========================================================================
   Stammdaten der Baustelle: Karte "Besetzung"
   (Thomi 24.09.2026) - Bauleitung, Poliere, Bauaufsicht untereinander,
   Lesen mit einem Knopf "Bearbeiten", Bearbeiten mit Entfernen/Hinzufuegen.
   ========================================================================== */
.bos-besetzung { padding: var(--bos-s-5); margin-top: var(--bos-s-4); }
.bos-besetzung__kopf { display: flex; align-items: center; justify-content: space-between;
                       gap: var(--bos-s-3); margin-bottom: var(--bos-s-4); }
.bos-besetzung__titel { font-family: var(--bos-font-display); font-weight: 700; font-size: 17px;
                        margin: 0; min-width: 0; }
.bos-besetzung__modus { flex-shrink: 0; text-decoration: none; }
.bos-besetzung__modus:hover { text-decoration: none; }
.bos-besetzung__meldung { margin-bottom: var(--bos-s-4); }
/* Gegenzeichnen je Baustelle (#115): drei Wahlen untereinander, grosse Antippflaeche */
.bos-gegenzeichnung { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bos-s-2); }
.bos-gegenzeichnung__wahl { display: grid; grid-template-columns: auto 1fr; column-gap: var(--bos-s-3); align-items: center; min-height: 48px; padding: var(--bos-s-2) var(--bos-s-3); border: 1px solid var(--bos-border-strong); border-radius: var(--bos-r-btn); cursor: pointer; }
.bos-gegenzeichnung__wahl span { grid-column: 2; font-size: 13px; color: var(--bos-text-secondary); }
.bos-besetzung__gruppe + .bos-besetzung__gruppe { margin-top: var(--bos-s-5); padding-top: var(--bos-s-4);
                                                  border-top: 1px solid var(--bos-divider); }
.bos-besetzung__gruppentitel { margin: 0; }
.bos-besetzung__leute { list-style: none; margin: 8px 0 0; padding: 0;
                        display: flex; flex-direction: column; gap: 10px; }
.bos-besetzung__person { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.bos-besetzung__kuerzel { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
                          display: inline-flex; align-items: center; justify-content: center;
                          background: var(--bos-surface-2); color: var(--bos-text);
                          font-family: var(--bos-font-mono); font-weight: 600; font-size: 12px; }
.bos-besetzung__wer { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bos-besetzung__name { font-size: 15px; overflow-wrap: anywhere; }
.bos-besetzung__user { font-family: var(--bos-font-mono); font-size: 12px; color: var(--bos-text-tertiary);
                       overflow-wrap: anywhere; }
.bos-besetzung__buero { font-size: 13px; color: var(--bos-text-secondary); overflow-wrap: anywhere; }
.bos-besetzung__badge { margin-left: auto; flex-shrink: 0; }
.bos-besetzung__leer { margin: 8px 0 0; font-size: 14px; color: var(--bos-text-tertiary); }

/* Entfernen/Widerrufen: roter Text-Knopf rechts, Rahmen erst beim Zeigen */
.bos-besetzung__weg { margin-left: auto; flex-shrink: 0; min-height: 44px; padding: 8px 12px;
                      border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer;
                      font: 600 14px var(--bos-font-body); color: var(--bos-danger); }
.bos-besetzung__weg:focus-visible { outline: 3px solid var(--bos-blue); outline-offset: 2px; }
@media (hover: hover) { .bos-besetzung__weg:hover { border-color: var(--bos-danger); } }

/* "+ ... hinzufuegen": strichliertes Feld, klappt zum Formular auf */
.bos-besetzung__dazu { margin-top: 12px; }
.bos-besetzung__feld { list-style: none; cursor: pointer; min-height: 48px;
                       display: flex; align-items: center; justify-content: center; gap: 8px;
                       border: 2px dashed var(--bos-border-strong); border-radius: 12px;
                       color: var(--bos-text-secondary); font-weight: 600; font-size: 14px; }
.bos-besetzung__feld::-webkit-details-marker { display: none; }
.bos-besetzung__feld:focus-visible { outline: 3px solid var(--bos-blue); outline-offset: 2px; }
@media (hover: hover) { .bos-besetzung__feld:hover { border-color: var(--bos-blue); color: var(--bos-blue); } }
.bos-besetzung__plus { font-size: 20px; line-height: 1; }
.bos-besetzung__dazu[open] > .bos-besetzung__feld { display: none; }
.bos-besetzung__form { display: flex; flex-direction: column; gap: 6px; padding: 14px;
                       border: 2px dashed var(--bos-blue); border-radius: 12px; }
.bos-besetzung__form .bos-label + .bos-input { margin-bottom: 4px; }
.bos-besetzung__reihe { display: flex; gap: 10px; margin-top: 6px; }
.bos-besetzung__reihe .bos-btn { flex: 1 1 0; min-width: 0; padding: 0 var(--bos-s-3); text-decoration: none; }

/* Bauaufsicht im Bearbeiten-Modus: "Neuen Link erzeugen" eingerueckt unter
   dem Namen; "Entfernen" steht wie bei Personen rechts in der Zeile */
.bos-besetzung__oeba { margin: 8px 0 0 48px; }

/* ==========================================================================
   Stammdaten der Baustelle: Karte "Stammdaten" (Thomi 25.09.2026) - Lesen
   als ruhige Liste (Label klein, Wert normal) mit EINEM Knopf "Bearbeiten",
   Bearbeiten mit dem Formular. Kopfzeile teilt sich die Klassen mit der
   Besetzung (bos-besetzung__kopf/__titel/__modus).
   ========================================================================== */
.bos-stammdaten { padding: var(--bos-s-5); max-width: 520px; }
.bos-stammdaten__form { display: flex; flex-direction: column; gap: var(--bos-s-4); }
.bos-stammdaten__liste { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.bos-stammdaten__label { margin: 0 0 2px; font-size: 12px; color: var(--bos-text-secondary); }
.bos-stammdaten__wert { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.bos-stammdaten__fehlt { color: var(--bos-text-tertiary); font-style: italic; }

/* Einstellungen (Thomi 04.10.2026): Karten "Du" und "Firma" wie die
   Stammdaten - am Handy untereinander, ab 1100px nebeneinander. */
.bos-einstellungen { display: flex; flex-direction: column; gap: var(--bos-s-5); }
.bos-einstellungen__bild { display: block; max-height: 64px; max-width: min(220px, 100%);
                           margin-bottom: var(--bos-s-2); }
@media (min-width: 1100px) {
  .bos-einstellungen { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 520px);
                       align-items: start; gap: var(--bos-s-6); }
}

/* ==========================================================================
   Stammdaten der Baustelle: Stammdaten und "Besetzung"
   nebeneinander ab ca. 1100px (Review 25.09.2026). Am Handy/Tablet bleibt es
   der bisherige Block-Stack (kein Grid, keine Regel noetig); ab 1100px ein
   zweispaltiges Grid, beide Karten oben buendig (align-items:start), je bis
   zu 520px breit wie bisher, Abstand wie sonst in der App (--bos-s-6). Der
   margin-top der Zuteilungskarte (.bos-besetzung, fuer den Block-Stack
   gedacht) wird hier zurueckgesetzt, sonst waeren die Karten nicht bündig. */
@media (min-width: 1100px) {
  .bos-stammdaten-layout {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 520px);
    align-items: start;
    gap: var(--bos-s-6);
  }
  .bos-stammdaten-layout__zuteilung .bos-besetzung { margin-top: 0; }
}


/* ---- Uebersicht: "Weitere Baustellen der Firma" (Issue #118) --------------
   Nur mit Verwaltungsrecht. Ruhige Kacheln ohne Berichtsstatus, kleiner als
   die eigenen Karten - bei 30 Baustellen bleibt die Seite ueberschaubar.
   Ohne Bauleitung gelb umrandet und auf Weiss, damit sie hervorsticht. */
.bos-gruppe { margin-top: var(--bos-s-8); }
.bos-gruppe__titel { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--bos-s-3); }
.bos-gruppe__zahl { font-family: var(--bos-font-mono); color: var(--bos-text-secondary); }
.bos-fremdgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
                 gap: var(--bos-s-3); }
.bos-fremd { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 44px;
             padding: 12px 14px; border: 1px solid var(--bos-border); border-radius: var(--bos-r-card);
             background: var(--bos-surface); color: inherit; text-decoration: none; }
.bos-fremd:focus-visible { outline: 3px solid var(--bos-blue); outline-offset: 2px; }
@media (hover: hover) { .bos-fremd:hover { border-color: var(--bos-blue); } }
.bos-fremd--warn { border: 2px solid var(--bos-amber-dot); background: var(--bos-white); }
@media (hover: hover) { .bos-fremd--warn:hover { border-color: var(--bos-amber-dot); } }
.bos-fremd__name, .bos-fremd__ort, .bos-fremd__leute, .bos-fremd__leer {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bos-fremd__name { font-family: var(--bos-font-display); font-weight: 700; font-size: 15px; }
.bos-fremd__ort { font-size: 12px; color: var(--bos-text-secondary); }
.bos-fremd__leute { margin-top: 6px; font-size: 13px; }
.bos-fremd__leer { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--bos-amber-text); }
.bos-fremd__mehr { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--bos-blue); text-align: right; }

/* ==========================================================================
   Feinschliff (#146, Handytest Thomi 26.10.2026)
   Ein kleines System statt Einzelloesungen: Strich-Symbole (_icons.html),
   Stift statt "Bearbeiten", Kartenkopf mit Linie, Zeilen mit Symbol,
   "+ eintragen" statt "fehlt", Farben nach Rolle, Gefahrenzone unten.
   ========================================================================== */
.bos-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; }

/* iPhone vom Homescreen (black-translucent): die Kopfzeile laeuft unter die
   Statusleiste. Bisher hatte nur der Wizard-Kopf das Polster - "BOS" und
   "Abmelden" lagen unter Uhr und Kamera-Insel. Im Browser-Tab ist der Wert 0. */
/* Statusleiste immer frei wie in einer echten App (Thomi 28.10.2026): ein
   fester dunkler Streifen genau so hoch wie die Statusleiste - nichts scrollt
   dahinter, auch nicht beim Nachfedern. Die Schrift der Statusleiste ist bei
   black-translucent weiss, auf Dunkel also lesbar. Im Browser-Tab ist die
   Hoehe 0 und der Streifen unsichtbar. */
body::before { content: ""; position: fixed; z-index: 100; top: 0; left: 0; right: 0;
               height: env(safe-area-inset-top); background: var(--bos-dark); pointer-events: none; }

@media (max-width: 900px) {
  /* Kopfleiste mit Menue bleibt am Handy fest oben, der Inhalt scrollt darunter. */
  .bos-side { position: sticky; top: 0; z-index: 30; }
  /* Spruenge auf #bos-stammdaten, #du usw. landen unter der festen Leiste
     statt dahinter (Leiste ~116 px bei 375 px Breite). */
  html { scroll-padding-top: calc(env(safe-area-inset-top) + 128px); }
  .bos-side { padding-top: env(safe-area-inset-top);
              padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .bos-main { padding-left: max(var(--bos-s-4), env(safe-area-inset-left));
              padding-right: max(var(--bos-s-4), env(safe-area-inset-right)); }
}

/* Stift: kleiner Knopf rechts im Kartenkopf. Am Handy bleibt die
   Antippflaeche 44 px, sichtbar ist nur das Kaestchen. */
.bos-stiftknopf { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
             width: 36px; height: 36px; border-radius: 10px; border: 0;
             background: var(--bos-blue); color: var(--bos-on-dark); cursor: pointer;
             text-decoration: none; position: relative; }
.bos-stiftknopf::after { content: ""; position: absolute; inset: -4px; }
.bos-stiftknopf .bos-icon { width: 17px; height: 17px; }
@media (hover: hover) { .bos-stiftknopf:hover { filter: brightness(1.1); text-decoration: none; } }
.bos-stiftknopf--klein { width: 30px; height: 30px; border-radius: 8px; }
.bos-stiftknopf--klein .bos-icon { width: 15px; height: 15px; }
.bos-stiftknopf--klein::after { inset: -7px; }

/* Kartenkopf: Symbol, Titel, rechts Stift - darunter eine feine Linie bis
   an den Kartenrand. Gilt fuer alle Karten mit .bos-besetzung__kopf. */
.bos-besetzung__kopf { margin: calc(-1 * var(--bos-s-5)) calc(-1 * var(--bos-s-5)) var(--bos-s-4);
                       padding: 12px var(--bos-s-5); min-height: 60px;
                       border-bottom: 1px solid var(--bos-divider-2); }
.bos-besetzung__titel { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; }
.bos-besetzung__titel .bos-icon { color: var(--bos-text-tertiary); }

/* Zeilen: Symbol, Beschriftung, Wert - durch feine Linien getrennt */
.bos-stammdaten__liste { gap: 0; margin: -6px 0; }
.bos-stammdaten__zeile { display: grid; grid-template-columns: minmax(120px, 168px) minmax(0, 1fr);
                         column-gap: 12px; row-gap: 2px; align-items: center;
                         min-height: 46px; padding: 8px 0; border-bottom: 1px solid var(--bos-divider-2); }
.bos-stammdaten__zeile:last-child { border-bottom: 0; }
.bos-stammdaten__zeile .bos-stammdaten__label { margin: 0; font-size: 13px; }
.bos-eintragen { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
                 border: 1px dashed #A9C3EE; border-radius: 7px; color: var(--bos-blue);
                 font-size: 13px; font-weight: 600; text-decoration: none; }
@media (hover: hover) { .bos-eintragen:hover { border-style: solid; text-decoration: none; } }
span.bos-eintragen { color: var(--bos-text-tertiary); border-color: var(--bos-border-strong); }

/* Schloss mit Infofenster: am PC beim Drueberfahren, am Handy beim Antippen
   (<details>, ohne Skript). Der Grund steht nur im Fenster. */
.bos-schloss { position: relative; display: inline-block; margin-left: 6px; vertical-align: middle; }
.bos-schloss > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center;
                         justify-content: center; width: 28px; height: 28px; border-radius: 7px;
                         color: var(--bos-text-tertiary); position: relative; }
.bos-schloss > summary::-webkit-details-marker { display: none; }
.bos-schloss > summary::after { content: ""; position: absolute; inset: -8px; }
.bos-schloss > summary .bos-icon { width: 16px; height: 16px; }
.bos-schloss__fenster { position: absolute; z-index: 20; top: calc(100% + 6px); left: -8px;
                        width: max-content; max-width: min(260px, 70vw); padding: 10px 12px;
                        border-radius: 10px; background: var(--bos-dark); color: var(--bos-on-dark);
                        font-size: 13px; line-height: 1.4; box-shadow: 0 10px 28px rgba(20,34,46,.25); }
.bos-schloss:not([open]) > .bos-schloss__fenster { display: none; }
@media (hover: hover) {
  .bos-schloss:hover > .bos-schloss__fenster { display: block; }
  .bos-schloss > summary:hover { color: var(--bos-text); }
}

/* Gegenzeichnung im Bearbeiten-Modus der Stammdaten, unter dem Formular */
.bos-gz-bearbeiten { margin-top: var(--bos-s-5); padding-top: var(--bos-s-4);
                     border-top: 1px solid var(--bos-divider-2); }
.bos-gz-bearbeiten .bos-icon { width: 15px; height: 15px; vertical-align: -2px; }

/* Kopf der Baustelle: Kennzeichen unter dem Namen */
.bos-kennzeichen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bos-kennzeichen__eins { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px;
                         border-radius: 999px; background: var(--bos-white); border: 1px solid var(--bos-divider);
                         font-size: 13px; color: var(--bos-text-body); }
.bos-kennzeichen__eins .bos-icon { width: 14px; height: 14px; color: var(--bos-text-tertiary); }

/* Farben nach Rolle - dieselben wie im Kalender: blau Bauleitung,
   bernstein Polier, gruen Gegenseite (ÖBA/Bauherr). */
.bos-rolle--bauleiter { background: var(--bos-blue-soft); color: var(--bos-blue); }
.bos-rolle--polier    { background: var(--bos-amber-bg); color: var(--bos-amber-text); }
.bos-rolle--gegenseite { background: var(--bos-green-bg); color: var(--bos-green-text); }

/* Gefahrenzone: ganz unten, gestrichelte Linie, roter Rahmen-Knopf */
.bos-gefahrenzone { margin-top: var(--bos-s-8); padding-top: var(--bos-s-5);
                    border-top: 1px dashed var(--bos-border-strong); }
/* Roter Rahmen-Knopf: dieselbe Klasse wie "Zugang sperren" */
.bos-btn--sperren { text-decoration: none; }
.bos-btn--sperren .bos-icon { width: 17px; height: 17px; }

/* Rueckfrage als Fenster (<dialog>) */
.bos-dialog { border: 0; border-radius: var(--bos-r-card); padding: var(--bos-s-6);
              width: min(420px, calc(100vw - 32px)); box-shadow: var(--bos-shadow-frame); }
.bos-dialog::backdrop { background: rgba(21,34,46,.45); }
.bos-dialog__titel { font-size: 19px; margin: 0 0 6px; }
.bos-dialog__text { color: var(--bos-text-secondary); font-size: 14px; margin: 0 0 var(--bos-s-5); }
.bos-dialog__reihe { display: flex; gap: 10px; }
.bos-dialog__reihe > * { flex: 1 1 0; }

/* Breiter, wo Platz ist: Stammdaten und Besetzung teilen sich die Zeile
   statt je 520 px mit leerem Rand rechts. Am Handy unveraendert untereinander. */
.bos-stammdaten, .bos-stammdaten-layout__zuteilung { max-width: 640px; }
@media (min-width: 1100px) {
  .bos-stammdaten-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .bos-stammdaten-layout .bos-stammdaten,
  .bos-stammdaten-layout__zuteilung { max-width: none; }
  .bos-einstellungen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bos-einstellungen .bos-stammdaten { max-width: none; }
}
/* Symbol in der Beschriftung: zwei Spalten (Beschriftung | Wert) */
.bos-stammdaten__label { display: inline-flex; align-items: center; gap: 10px; }
.bos-stammdaten__label .bos-icon { width: 17px; height: 17px; color: var(--bos-text-tertiary); }
@media (max-width: 480px) {
  .bos-stammdaten__zeile { grid-template-columns: minmax(0, 1fr); }
  .bos-stammdaten__wert { padding-left: 27px; }
}

/* Baustellen-Karte (Feinschliff #146): eine Zeile "zu tun", Bruch, Balken */
.bos-bsite__headinner { min-height: 76px; }
.bos-bsite__typ { margin-bottom: var(--bos-s-3); }
.bos-bsite__tun, .bos-bsite__ok { display: flex; align-items: center; gap: 8px; padding: 9px 12px;
                                  border-radius: 10px; font-size: 14px; font-weight: 600; }
.bos-bsite__tun { background: var(--bos-amber-bg); color: var(--bos-amber-text); }
.bos-bsite__tun i { width: 8px; height: 8px; border-radius: 50%; background: var(--bos-amber-dot); flex-shrink: 0; }
.bos-bsite__tun-neben { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--bos-danger); }
.bos-bsite__ok { background: var(--bos-green-bg); color: var(--bos-green-text); font-weight: 500; }
.bos-bsite__ok .bos-icon { width: 16px; height: 16px; }
.bos-bsite__zahlen { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--bos-s-3);
                     margin-top: var(--bos-s-4); }
.bos-bsite__rechts { text-align: right; }
.bos-bsite__von { font-size: 15px; font-weight: 500; color: var(--bos-text-tertiary); }
.bos-bsite__num--unterwegs { color: var(--bos-blue); }
.bos-bsite__balken { display: flex; height: 6px; border-radius: 3px; overflow: hidden;
                     background: var(--bos-divider-2); margin-top: 10px; }
.bos-bsite__balken--fertig { background: var(--bos-green-dot); }
.bos-bsite__balken--unterwegs { background: var(--bos-blue); }
.bos-bsite__balken--tun { background: var(--bos-amber-dot); }
.bos-bsite__foot { margin-top: var(--bos-s-4); }

/* Zaehlerleiste am unteren Rand der Kalender-Karte (Feinschliff #146):
   gleicher Aufbau in jedem Feld, alles mittig - oben Etikett mit Kaestchen,
   darunter die Zahl, darunter die Frist. Am Handy 2 x 2. */
.bos-zl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
          margin: var(--bos-s-5) calc(-1 * var(--bos-s-5)) calc(-1 * var(--bos-s-5));
          border-top: 1px solid var(--bos-divider); background: var(--bos-surface);
          border-radius: 0 0 var(--bos-r-card) var(--bos-r-card); overflow: hidden; }
.bos-zl--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bos-zl .bos-zl__feld { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
                        gap: 6px; padding: 12px 10px 12px;
                        border: 0; border-left: 1px solid var(--bos-divider); border-radius: 0;
                        background: transparent; color: var(--bos-text-secondary); text-align: center;
                        font: inherit; text-decoration: none; cursor: default; }
.bos-zl .bos-zl__feld:first-child { border-left: 0; }
.bos-zl button.bos-zl__feld, .bos-zl a.bos-zl__feld { cursor: pointer; }
.bos-zl__etikett { display: flex; align-items: center; gap: 7px; font-family: var(--bos-font-mono);
                   font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.bos-zl__kaestchen { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid;
                     display: inline-flex; align-items: center; justify-content: center;
                     font-style: normal; font-size: 8px; line-height: 1; flex-shrink: 0; }
.bos-zl__zeile { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bos-zl__zahl { font-family: var(--bos-font-mono); font-size: 26px; font-weight: 500; line-height: 1; color: var(--bos-text); }
.bos-zl__frist { font-family: var(--bos-font-mono); font-size: 11px; color: var(--bos-blue); white-space: nowrap; }
.bos-zl .bos-zl__feld--tun { background: var(--bos-amber-bg); color: var(--bos-amber-text); }
.bos-zl .bos-zl__feld--tun .bos-zl__zahl { color: var(--bos-amber-text); }
.bos-zl .bos-zl__feld--zurueck { background: rgba(199,55,42,.09); color: var(--bos-danger); }
.bos-zl .bos-zl__feld--zurueck .bos-zl__zahl { color: var(--bos-danger); }
.bos-zl__feld--gegen .bos-zl__zahl { color: var(--bos-blue); }
.bos-zl__feld--fertig .bos-zl__zahl { color: var(--bos-green-text); }
.bos-zl .bos-zl__feld--null .bos-zl__zahl, .bos-zl .bos-zl__feld--null .bos-zl__etikett { color: #B4C0CC; }
.bos-zl__feld--null .bos-zl__kaestchen { opacity: .45; }
@media (hover: hover) {
  .bos-zl button.bos-zl__feld:hover, .bos-zl a.bos-zl__feld:hover { filter: brightness(.97); text-decoration: none; }
}
@media (max-width: 600px) {
  .bos-zl, .bos-zl--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bos-zl .bos-zl__feld:nth-child(odd) { border-left: 0; }
  .bos-zl .bos-zl__feld:nth-child(n+3) { border-top: 1px solid var(--bos-divider); }
  .bos-zl--drei .bos-zl__feld:last-child { grid-column: 1 / -1; }
}

/* Team-Karte (Feinschliff #146): hell und schlank wie die Besetzung, der
   Name bricht um statt abzuschneiden; aufgeklappt Name mit Stift und alle
   Baustellen als Liste. */
.bos-person__kuerzel.bos-rolle--polier { background: var(--bos-amber-bg); color: var(--bos-amber-text); }
.bos-person__kuerzel.bos-rolle--bauleiter { background: var(--bos-blue-soft); color: var(--bos-blue); }
.bos-person__user .bos-num { font-size: 12px; }
.bos-person__tag { background: var(--bos-blue-soft); color: var(--bos-blue); font-weight: 600; vertical-align: 1px; }
.bos-person__pfeil { margin-left: auto; color: var(--bos-text-tertiary); font-size: 13px; transition: transform .15s ease; }
.bos-person__kopf > .bos-badge + .bos-person__pfeil { margin-left: 8px; }
.bos-person[open] .bos-person__pfeil { transform: rotate(180deg); }
.bos-person__kopf > .bos-badge--gesperrt { background: var(--bos-locked-bg); }
.bos-person__offen { display: flex; flex-direction: column; gap: var(--bos-s-4);
                     padding: var(--bos-s-4) var(--bos-s-5); border-top: 1px solid var(--bos-divider-2); }
.bos-person__namezeile { display: grid; grid-template-columns: minmax(0, 1fr) auto;
                         grid-template-rows: auto auto; column-gap: 12px; align-items: center; cursor: pointer; }
.bos-person__namezeile .bos-eyebrow { grid-column: 1; }
.bos-person__namewert { grid-column: 1; font-size: 15px; overflow-wrap: anywhere; }
.bos-person__namezeile .bos-stiftknopf { grid-column: 2; grid-row: 1 / span 2; }
.bos-person__umbenennen--offen > .bos-person__namezeile, .bos-person__umbenennen:not(.bos-person__umbenennen--offen) > .bos-person__nameform { display: none; }
.bos-person__nameform { display: flex; flex-direction: column; gap: 6px; padding: 14px;
                        border: 2px dashed var(--bos-blue); border-radius: 12px; }
.bos-person__namehilfe { margin: 0; font-size: 12.5px; color: var(--bos-text-secondary); }
.bos-person__bliste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bos-person__bliste li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14.5px;
                         border-bottom: 1px solid var(--bos-divider-2); overflow-wrap: anywhere; }
.bos-person__bliste li:last-child { border-bottom: 0; }
.bos-person__bliste .bos-icon { width: 16px; height: 16px; color: var(--bos-text-tertiary); }
.bos-person__offen .bos-person__leer { height: auto; line-height: 1.4; }

/* Eintragszeile im Bearbeiten-Modus des Berichts (Handytest 31.10.2026): Name
   oben ueber die volle Breite, darunter links die Zahlen, rechts die Knoepfe.
   Vorher teilten sich alle eine Zeile, am Handy blieben dem Namen wenige
   Pixel und er brach Buchstabe fuer Buchstabe um. */
.bos-rzb { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--bos-s-3);
           row-gap: 2px; align-items: center; padding: var(--bos-s-3) var(--bos-s-4);
           margin-bottom: var(--bos-s-2); }
.bos-rzb__name { grid-column: 1 / -1; font-size: 15px; overflow-wrap: break-word; min-width: 0; }
.bos-rzb__wert { grid-column: 1; font-size: 14px; color: var(--bos-text-secondary); }
.bos-rzb__knoepfe { grid-column: 2; display: flex; gap: var(--bos-s-2); }
.bos-rzb__knoepfe .bos-btn { --_h: 44px; padding: 0 12px; font-size: 14px; }

/* Profil statt Abmelden in der Seitenleiste (Thomi 31.10.2026) */
a.bos-side__user { color: var(--bos-on-dark-2); text-decoration: none; }
a.bos-side__user:hover, .bos-side__user--on { color: var(--bos-on-dark); background: rgba(255,255,255,.05); text-decoration: none; }
.bos-profil__abmelden { margin-top: var(--bos-s-6); }