/* ════════════════════════════════════════════════════════════════════════════
   tokens.css — Shared Design Tokens (Brand + Semantik + Typo + Spacing)
   ────────────────────────────────────────────────────────────────────────────
   Eine Datei, von ALLEN vier Surfaces geladen (Admin, Mieter-Portal,
   Eigentuemer-Portal, oeffentliche Homepage). Aenderungen hier propagieren
   ueberall.

   Layering:
     tokens.css           ← Foundation (DIESE Datei). Brand + Semantik + Typo.
     app.css              ← Bootstrap-Erweiterungen (Admin-Forms etc.)
     app.industrial.css   ← Admin-Theme-Override (Dark/Light, Neon-Akzent)
     portal.css           ← Portale: gemeinsame Komponenten ueber tokens
     (inline-Style)       ← Pro-Portal-Akzent (Mieter blau / Eigentuemer gruen)

   Brand-Entscheidung (Adrian):
     Aktuell sind --brand-* Platzhalter, die zu den bisher genutzten Werten
     passen. Sobald Adrian ein finales Logo + Hausfarbe hat, hier die fuenf
     ROOT-Variablen umstellen — alle vier Surfaces folgen automatisch.
   ════════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand ─────────────────────────────────────────────────────────────────
     Markenname entschieden 2026-05-08: "Rottensteiner Hausverwaltung"
     (Geschaeftsbezeichnung laut app/docs/firma-stammdaten.md).
     Mieter-Portal-Dunkelblau bleibt als Brand-Hauptfarbe. */
  --brand-name:                'Rottensteiner Hausverwaltung';
  --brand-primary:             #1E3A5F;     /* Tiefes Hausverwalter-Blau */
  --brand-primary-hover:       #163048;
  --brand-primary-on:          #FFFFFF;     /* Text auf Brand-Primary */

  --brand-accent-mieter:       #1E3A5F;     /* Akzent fuer Mieter-Portal */
  --brand-accent-eigentuemer:  #2D4A3E;     /* Akzent fuer Eigentuemer-Portal (gruen) */
  --brand-accent-industrial:   #C8FF00;     /* Akzent fuer Admin-Industrial (Lime) */

  /* ── Semantische Statusfarben ──────────────────────────────────────────────
     Identisch ueber alle Surfaces. Werden ggf. pro Theme noch ge-tweaked. */
  --color-success:             #15803D;
  --color-success-bg:          #DCFCE7;
  --color-success-on:          #FFFFFF;
  --color-warning:             #B45309;
  --color-warning-bg:          #FEF3C7;
  --color-warning-on:          #1A1A1A;
  --color-danger:              #B91C1C;
  --color-danger-bg:           #FEE2E2;
  --color-danger-on:           #FFFFFF;
  --color-info:                #1D4ED8;
  --color-info-bg:             #DBEAFE;
  --color-info-on:             #FFFFFF;
  --color-muted:               #525252;
  --color-muted-bg:            #E5E5E5;
  --color-muted-on:            #FFFFFF;

  /* ── HITL-Ampel (Autonomie-Stufe) ──────────────────────────────────────────
     Bewusst nicht success/warning/danger nachgemalt — semantisch anders:
     gruen = autonom, gelb = HITL-Pflicht, rot = blockiert. Eine HITL-Pille
     "rot" ist KEIN Fehler, sondern eine bewusste Autonomie-Entscheidung. */
  --color-traffic-rot:         #7F1D1D;
  --color-traffic-rot-bg:      #FECACA;
  --color-traffic-rot-on:      #FFFFFF;
  --color-traffic-gelb:        #92400E;
  --color-traffic-gelb-bg:     #FDE68A;
  --color-traffic-gelb-on:     #1A1A1A;
  --color-traffic-gruen:       #14532D;
  --color-traffic-gruen-bg:    #BBF7D0;
  --color-traffic-gruen-on:    #FFFFFF;

  /* ── Typografie ────────────────────────────────────────────────────────────
     Sans-Stack: Geist (lokal) → System-UI. Mono-Stack: JetBrains Mono → ui-mono.
     Konvention (siehe app/CLAUDE.md): keine fonts.googleapis.com — privacy + offline. */
  --font-sans:                 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:                 'JetBrains Mono', 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --font-display:              var(--font-sans);

  --fs-xs:     0.75rem;
  --fs-sm:     0.85rem;
  --fs-base:   0.95rem;
  --fs-lg:     1.15rem;
  --fs-xl:     1.4rem;
  --fs-2xl:    1.85rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    600;

  /* ── Spacing-Skala (4px-Raster) ─────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ── Border-Radien ─────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* ── Schatten (sehr dezent, Industrial-tauglich) ──────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* ── Fokus-Ring (gilt fuer alle Surfaces) ───────────────────────────────── */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--brand-accent-industrial);   /* Hoher Kontrast auch auf dunklen Themes */
}

/* ════════════════════════════════════════════════════════════════════════════
   Globaler Fokus-Ring
   ────────────────────────────────────────────────────────────────────────────
   Konsistent ueber Admin und beide Portale. Nutzt :focus-visible (nur Tastatur),
   sodass Maus-Klicks keinen sichtbaren Ring triggern.
   ════════════════════════════════════════════════════════════════════════════ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* ════════════════════════════════════════════════════════════════════════════
   .hv-pill — Status-Pille (semantik + HITL-Ampel)
   ────────────────────────────────────────────────────────────────────────────
   Ersetzt Bootstrap-`badge bg-*` an allen Stellen, an denen ein Status oder
   eine Autonomie-Ampel angezeigt wird. Die Klasse setzt nur Layout (Padding,
   Radius, Schrift); die Variante (success / warning / danger / info / muted /
   traffic-*) bringt Hintergrund + Vordergrund.

   Nutzung:
     <span class="hv-pill hv-pill--success">Bezahlt</span>
     <span class="hv-pill hv-pill--traffic-gelb">HITL: gelb</span>

   Helper (Handlebars): {{statusPill domain wert}} — siehe server.js.
   Mapping siehe app/src/utils/statusPills.js.
   ════════════════════════════════════════════════════════════════════════════ */
.hv-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-family: var(--font-sans);
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: baseline;
  letter-spacing: 0.01em;
}
.hv-pill--success      { background: var(--color-success-bg); color: var(--color-success); }
.hv-pill--warning      { background: var(--color-warning-bg); color: var(--color-warning); }
.hv-pill--danger       { background: var(--color-danger-bg);  color: var(--color-danger);  }
.hv-pill--info         { background: var(--color-info-bg);    color: var(--color-info);    }
.hv-pill--muted        { background: var(--color-muted-bg);   color: var(--color-muted);   }
.hv-pill--traffic-rot   { background: var(--color-traffic-rot-bg);   color: var(--color-traffic-rot);   }
.hv-pill--traffic-gelb  { background: var(--color-traffic-gelb-bg);  color: var(--color-traffic-gelb);  }
.hv-pill--traffic-gruen { background: var(--color-traffic-gruen-bg); color: var(--color-traffic-gruen); }

/* Dark-Theme-Override (Industrial Admin): Hintergruende sind im Dark-Mode
   sehr hell → Pille wird zu grell. Auf gedaempfte Versionen mit Alpha. */
[data-theme="dark"] .hv-pill--success      { background: rgba(34, 197, 94, 0.18); color: #6EE7A7; }
[data-theme="dark"] .hv-pill--warning      { background: rgba(245, 158, 11, 0.18); color: #FCD34D; }
[data-theme="dark"] .hv-pill--danger       { background: rgba(239, 68, 68, 0.18);  color: #FCA5A5; }
[data-theme="dark"] .hv-pill--info         { background: rgba(59, 130, 246, 0.18); color: #93C5FD; }
[data-theme="dark"] .hv-pill--muted        { background: rgba(160, 160, 160, 0.18); color: #D4D4D4; }
[data-theme="dark"] .hv-pill--traffic-rot   { background: rgba(220, 38, 38, 0.22);  color: #FCA5A5; }
[data-theme="dark"] .hv-pill--traffic-gelb  { background: rgba(234, 179, 8, 0.22);  color: #FDE047; }
[data-theme="dark"] .hv-pill--traffic-gruen { background: rgba(34, 197, 94, 0.22);  color: #86EFAC; }

@media print {
  .hv-pill {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000;
    padding: 0.05rem 0.4rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Field-Level-Validation (CSS-only, kein JS)
   ────────────────────────────────────────────────────────────────────────────
   Pattern: <input required pattern="..." />
            <small class="hv-field-error">Bitte E-Mail im Format ... eingeben</small>

   Sichtbarkeitslogik nutzt :user-invalid (Browser-native, greift erst nach
   Blur oder Submit-Versuch — kein roter Initial-Hint bei leeren Feldern).
   Fallback fuer Browser ohne :user-invalid: :invalid:not(:placeholder-shown)
   :not(:focus). Damit der Fallback greift, sollte das Eingabefeld einen
   placeholder haben (z.B. " " als Spacer fuer Floating-Labels).

   Die Klasse .hv-form-error markiert serverseitige Validation-Fehler — die
   bleibt unabhaengig vom user-invalid-Zustand sichtbar.
   ════════════════════════════════════════════════════════════════════════════ */
.hv-field-error {
  display: none;
  font-size: var(--fs-xs);
  color: var(--color-danger);
  margin-top: 0.25rem;
  line-height: 1.35;
}

/* :user-invalid (modern) — greift nach User-Interaktion */
.form-control:user-invalid + .hv-field-error,
.form-select:user-invalid + .hv-field-error,
textarea:user-invalid + .hv-field-error {
  display: block;
}

/* Fallback :invalid + :not(:placeholder-shown) :not(:focus) */
.form-control:invalid:not(:placeholder-shown):not(:focus) + .hv-field-error,
.form-select:invalid:not(:focus) + .hv-field-error,
textarea:invalid:not(:placeholder-shown):not(:focus) + .hv-field-error {
  display: block;
}

/* Border-Akzent fuer invalid Eingaben (gleiche Sichtbarkeitslogik) */
.form-control:user-invalid,
.form-select:user-invalid,
textarea:user-invalid {
  border-color: var(--color-danger);
}
.form-control:invalid:not(:placeholder-shown):not(:focus),
textarea:invalid:not(:placeholder-shown):not(:focus) {
  border-color: var(--color-danger);
}

/* Server-seitige Inline-Fehler (immer sichtbar wenn die Klasse gesetzt ist) */
.hv-form-error {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-danger);
  margin-top: 0.25rem;
  line-height: 1.35;
}
.hv-form-error::before {
  content: '⚠ ';
  font-weight: var(--fw-bold);
}

/* Form-Field mit Server-Fehler: Container bekommt eine ID, die im
   form-errors-Partial als Anchor-Link verlinkt ist. Scroll-Margin-Top
   sorgt dafuer, dass der Anchor nicht hinter der Sidebar-Header verschwindet. */
.hv-field--error {
  scroll-margin-top: 80px;
}
.hv-field--error .form-control,
.hv-field--error .form-select,
.hv-field--error textarea {
  border-color: var(--color-danger);
}

/* ════════════════════════════════════════════════════════════════════════════
   Tabellen-Pattern (Phase 2.2)
   ────────────────────────────────────────────────────────────────────────────
   .hv-num         numerische Zelle (rechtsbuendig + Mono + tabular-nums)
   .hv-table-clickable  ganze Zeile als Click-Target (data-href)
   [data-density]  Density-Toggle (compact | cozy | comfy)
   ════════════════════════════════════════════════════════════════════════════ */
.hv-num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hv-table-clickable tbody tr[data-href] {
  cursor: pointer;
  transition: background-color 120ms ease;
}
.hv-table-clickable tbody tr[data-href]:hover {
  background-color: rgba(0, 0, 0, 0.025);
}
[data-theme="dark"] .hv-table-clickable tbody tr[data-href]:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Density-Toggle: globale Einstellung in localStorage 'hv-density'.
   Default = cozy (Bootstrap-Default). Compact spart 30 % Vertikal-Raum,
   Comfy ist fuer Lese-Modus. */
[data-density="compact"] .table > :not(caption) > * > *,
[data-density="compact"] table > :not(caption) > * > * {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
[data-density="compact"] .table,
[data-density="compact"] table.table-sm {
  font-size: var(--fs-xs);
}
[data-density="comfy"] .table > :not(caption) > * > *,
[data-density="comfy"] table > :not(caption) > * > * {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

/* Density-Toggle-Button selbst (in Sidebar-Footer einsetzbar) */
.hv-density-toggle {
  display: inline-flex;
  gap: 1px;
  background: var(--color-muted-bg, #E5E5E5);
  border-radius: var(--radius-pill);
  padding: 2px;
}
.hv-density-toggle button {
  background: transparent;
  border: 0;
  padding: 0.15rem 0.55rem;
  font-size: var(--fs-xs);
  color: var(--color-muted);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.hv-density-toggle button[aria-pressed="true"] {
  background: var(--brand-primary, #1E3A5F);
  color: var(--brand-primary-on, #fff);
}
[data-theme="dark"] .hv-density-toggle {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .hv-density-toggle button[aria-pressed="true"] {
  background: var(--brand-accent-industrial);
  color: #0A0A0B;
}

/* ════════════════════════════════════════════════════════════════════════════
   Mobile-Bottom-Nav (Phase 2.3)
   ────────────────────────────────────────────────────────────────────────────
   Fixe Navigation am unteren Bildschirmrand auf Mobile (<768px). Verdeckt
   die Sidebar nicht — Sidebar bleibt als Hamburger/Offcanvas verfuegbar.
   Touch-Targets mindestens 44x44 px (Apple/Google-Guideline).
   ════════════════════════════════════════════════════════════════════════════ */
.hv-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--brand-primary, #1E3A5F);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.25rem 0 max(0.25rem, env(safe-area-inset-bottom));
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .hv-bottom-nav {
  background: #0F1418;
  border-top-color: rgba(255, 255, 255, 0.08);
}
.hv-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  background: transparent;
  border: 0;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--fs-xs);
  line-height: 1.1;
  transition: color 100ms ease;
  cursor: pointer;
}
.hv-bottom-nav-item:hover,
.hv-bottom-nav-item:focus-visible {
  color: rgba(255, 255, 255, 0.92);
}
.hv-bottom-nav-item.active {
  color: var(--brand-accent-industrial, #C8FF00);
}
.hv-bottom-nav-item i {
  font-size: 1.15rem;
  margin-bottom: 2px;
}
.hv-bottom-nav-item span {
  font-size: 0.65rem;
  letter-spacing: 0.02em;
}

/* Bottom-Nav verdeckt unteren Content — Padding fuer den Content auf Mobile */
@media (max-width: 767.98px) {
  body:has(.hv-bottom-nav) .hv-content,
  body:has(.hv-bottom-nav) main {
    padding-bottom: 4.5rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Tabellen-Mobile-Card-Layout (Phase 2.3)
   ────────────────────────────────────────────────────────────────────────────
   <table class="hv-table-mobile"> klappt unter 768px in Card-Layout um.
   Voraussetzung: jedes <td> hat data-label="Spaltenname".
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  table.hv-table-mobile thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  table.hv-table-mobile tbody tr {
    display: block;
    margin-bottom: 0.75rem;
    border: 1px solid var(--hv-border, #e5e7eb);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    background: var(--hv-surface, #ffffff);
  }
  table.hv-table-mobile tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.25rem 0;
    border: 0;
  }
  table.hv-table-mobile tbody td::before {
    content: attr(data-label);
    font-size: var(--fs-xs);
    color: var(--color-muted, #525252);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
  table.hv-table-mobile tbody td:not([data-label]):empty {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Inline-Hilfe — Tooltip-Popover (Phase 2.5)
   ────────────────────────────────────────────────────────────────────────────
   Klick-getriggertes Popover fuer komplexe Felder (Kappungsgrenze,
   Verteilerschluessel, AfA-Restwert, Mietspiegel). Kein Hover, weil Mobile
   das nicht hat. Keine Wall-of-Text — max. 2-3 Saetze pro Tip.
   ════════════════════════════════════════════════════════════════════════════ */
.hv-tip {
  cursor: pointer;
  color: var(--color-muted, #525252);
  margin-left: 0.25rem;
  font-size: 0.95em;
  vertical-align: middle;
  transition: color 100ms ease;
}
.hv-tip:hover,
.hv-tip:focus-visible {
  color: var(--brand-primary, #1E3A5F);
}
[data-theme="dark"] .hv-tip:hover,
[data-theme="dark"] .hv-tip:focus-visible {
  color: var(--brand-accent-industrial, #C8FF00);
}

/* Popover-Variante: schmaler + im Industrial-Look */
.popover.hv-tip-popover {
  max-width: 300px;
  font-size: var(--fs-sm);
  border: 1px solid var(--hv-border, #e5e7eb);
  box-shadow: var(--shadow-lg);
}
.popover.hv-tip-popover .popover-header {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  background: var(--color-muted-bg, #f1f5f9);
  border-bottom: 0;
}
.popover.hv-tip-popover .popover-body {
  font-size: var(--fs-sm);
  line-height: 1.5;
}
[data-theme="dark"] .popover.hv-tip-popover {
  background: #1A1A1B;
  border-color: rgba(255, 255, 255, 0.12);
  color: #E5E5E5;
}
[data-theme="dark"] .popover.hv-tip-popover .popover-header {
  background: #0F1418;
  color: #fff;
}
[data-theme="dark"] .popover.hv-tip-popover .popover-arrow::after {
  border-top-color: #1A1A1B;
  border-bottom-color: #1A1A1B;
}

/* ════════════════════════════════════════════════════════════════════════════
   Auto-Save-Indikator (Phase 2.1)
   ────────────────────────────────────────────────────────────────────────────
   Wird in Wizard-Steps (Mieterhoehung, NK, Onboarding) eingesetzt.
   ════════════════════════════════════════════════════════════════════════════ */
.hv-autosave {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  color: var(--color-success);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.hv-autosave.hv-autosave-visible {
  opacity: 1;
}
.hv-autosave::before {
  content: '✓';
  font-weight: var(--fw-bold);
}
[data-theme="dark"] .hv-autosave {
  color: #6EE7A7;
}

/* ════════════════════════════════════════════════════════════════════════════
   Step-Wizard (Phase 3.1)
   ────────────────────────────────────────────────────────────────────────────
   Fortschrittsanzeige fuer Multi-Step-Forms. Status:
   done = grün + Haken + klickbar; active = Brand + fett; todo = muted.
   ════════════════════════════════════════════════════════════════════════════ */
.hv-step-wizard-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--fs-sm);
}
.hv-step-wizard-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  background: transparent;
}
.hv-step-wizard-item + .hv-step-wizard-item::before {
  content: '›';
  color: var(--color-muted);
  margin-right: 0.25rem;
  font-size: 1.1em;
}
.hv-step-wizard-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  background: var(--color-muted-bg);
  color: var(--color-muted);
}
.hv-step-wizard-item.done .hv-step-wizard-num {
  background: var(--color-success);
  color: var(--color-success-on);
}
.hv-step-wizard-item.active .hv-step-wizard-num {
  background: var(--brand-primary);
  color: var(--brand-primary-on);
}
.hv-step-wizard-titel {
  color: var(--color-muted);
  text-decoration: none;
}
.hv-step-wizard-item.done .hv-step-wizard-titel { color: var(--color-success); }
.hv-step-wizard-item.done a.hv-step-wizard-titel:hover { text-decoration: underline; }
.hv-step-wizard-item.active .hv-step-wizard-titel {
  color: var(--brand-primary);
  font-weight: var(--fw-bold);
}
[data-theme="dark"] .hv-step-wizard-num {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .hv-step-wizard-item.done .hv-step-wizard-num {
  background: rgba(34, 197, 94, 0.3);
  color: #6EE7A7;
}
[data-theme="dark"] .hv-step-wizard-item.done .hv-step-wizard-titel { color: #6EE7A7; }
[data-theme="dark"] .hv-step-wizard-item.active .hv-step-wizard-num {
  background: var(--brand-accent-industrial);
  color: #0A0A0B;
}
[data-theme="dark"] .hv-step-wizard-item.active .hv-step-wizard-titel {
  color: var(--brand-accent-industrial);
}

/* ════════════════════════════════════════════════════════════════════════════
   Onboarding-Tour-Spotlight (Phase 3.6)
   ────────────────────────────────────────────────────────────────────────────
   Dunkler Backdrop mit "ausgeschnittenem" Spotlight um das Tour-Ziel-Element.
   Bubble (.hv-tour-bubble) zeigt Titel + Markdown-Body + Skip/Weiter.
   ════════════════════════════════════════════════════════════════════════════ */
.hv-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  pointer-events: none;
}
.hv-tour-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}
.hv-tour-spotlight {
  position: absolute;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px rgba(10, 10, 11, 0.55), 0 0 0 3px var(--brand-accent-industrial);
  pointer-events: none;
  transition: all 200ms ease;
}
.hv-tour-bubble {
  position: absolute;
  max-width: 360px;
  background: #fff;
  color: #1A1A1A;
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.hv-tour-bubble h3 {
  margin: 0 0 0.5rem 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}
.hv-tour-bubble p { margin: 0 0 0.5rem 0; }
.hv-tour-bubble p:last-child { margin-bottom: 0; }
.hv-tour-bubble ul { margin: 0 0 0.75rem 0; padding-left: 1.25rem; }
.hv-tour-bubble strong { color: var(--brand-primary); }
.hv-tour-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hv-border, #e5e7eb);
}
.hv-tour-progress {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  margin-right: auto;
}
[data-theme="dark"] .hv-tour-bubble {
  background: #1A1A1B;
  color: #E5E5E5;
}
[data-theme="dark"] .hv-tour-bubble strong { color: var(--brand-accent-industrial); }
[data-theme="dark"] .hv-tour-actions { border-top-color: rgba(255, 255, 255, 0.1); }

/* ════════════════════════════════════════════════════════════════════════════
   A11y: prefers-reduced-motion (Phase 3.5)
   ────────────────────────────────────────────────────────────────────────────
   Wenn der User reduced-motion eingestellt hat, schalten wir Animationen
   + Transitions global ab. Greift auf alle hv-* Komponenten, Bootstrap
   (.fade, .collapse) UND inline transition-Werte.
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}