/* ============================================================================
   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               */

  /* --- 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; }

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
  );
}
.bos-hazard--top { height: 6px; 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; }

/* ============================================================================
   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); }

/* ============================================================================
   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); }
.bos-badge--eingereicht { background: var(--bos-blue-bg, rgba(59,130,246,.12)); color: var(--bos-blue); }
.bos-badge--eingereicht::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); }

.bos-badge--nachtrag    { background: var(--bos-amber-bg); color: var(--bos-amber-text); }
.bos-badge--nachtrag::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; }
}

@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);
  padding: var(--bos-s-5) 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; }

/* --- 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; }

/* ============================================================================
   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; }
.bos-side__logout { background: none; border: 0; color: var(--bos-on-dark-2); cursor: pointer; font-size: 16px; padding: 4px; }
.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; }

.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 --- */
.bos-bsite { overflow: hidden; padding: 0; }
.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__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);
}
.bos-bsite-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--bos-s-2);
  min-height: 160px;
  border: 2px dashed var(--bos-border-strong); border-radius: var(--bos-r-card);
  background: transparent; color: var(--bos-text-secondary);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.bos-bsite-add:not(:disabled):hover { border-color: var(--bos-blue); color: var(--bos-blue); }
.bos-bsite-add:disabled { opacity: .6; cursor: not-allowed; }

/* --- Tabelle (Berichte-Archiv) --- */
.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 „Bericht generieren"-Button (Schritt 5). */
.htmx-indicator { opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.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; }

.bos-kal__tag--heute { border-color: 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; }