/* ─────────────────────────────────────────────────────────────────────
   BELARO OS — Lokale Style-Erweiterungen (Single Source of Truth ist
   https://cashflow.belaro.eu/static/belaro-system.css). Diese Datei
   enthaelt NUR OS-spezifische Klassen + Kompat-Shims, die das zentrale
   Stylesheet nicht abdeckt.
   ───────────────────────────────────────────────────────────────────── */

/* ─── Alpine.js x-cloak — kritisch fuer overlays ──────────────────────
   Alpine setzt x-cloak-Elemente NICHT selbst versteckt; wir brauchen die
   CSS-Regel, sonst sind Modale wie das "Umsetzung bestaetigen"-Overlay
   im Activity-Detail beim initialen Rendern sichtbar und fangen jeden
   Klick auf "Bestaetigen & Speichern" ab (User meldet: "Speichern tut
   nichts"). Ohne diese Regel funktioniert das gesamte Save-Formular
   nicht, wenn ein Alpine-Modal auf derselben Seite vorhanden ist. */
[x-cloak] { display: none !important; }

/* ─── Chat-Overlay-Modal: Body-Scroll-Lock, solange offen (Dashboard-Shell). ── */
body.chat-lock { overflow: hidden; }

/* ─── Mobile-Nav-Overlay-Fix (öffentliche Seiten) ─────────────────────
   Das zentrale Stylesheet macht .topnav-links auf <1024px zu einem
   position:fixed Vollflächen-Overlay (top:64px; bottom:0). ABER: .topnav
   trägt backdrop-filter:blur(10px) — und ein backdrop-filter macht das
   Element zum *Containing-Block* für seine position:fixed Kinder. Dadurch
   bezieht sich bottom:0 auf die 64px-Kopfleiste statt auf den Viewport →
   das Overlay kollabiert zu einem schmalen Streifen (nur der erste Link
   sichtbar, Hero scheint durch). Fix ohne neues Nav-CSS: die Höhe explizit
   an den Viewport binden (dvh mit vh-Fallback für iOS < 15.4), damit das
   Overlay die Fläche unter der Kopfleiste füllt und scrollbar bleibt.
   Nur mobile (<1024px), Desktop-Nav unberührt. */
@media (max-width: 1023.98px) {
  .topnav-links {
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
  }
  /* Scroll-Lock: bei offenem Overlay den Seiten-Hintergrund nicht scrollen. */
  body.nav-open { overflow: hidden; }
}

/* ─── Tailwind-Preflight neutralisieren — Type-Scale wiederherstellen ──
   Tailwind CDN injiziert per JS sein Preflight (h1/h2/h3 -> font-size:
   inherit) NACH dem zentralen Stylesheet. Specificity ist gleich (0,0,1),
   aber Tailwind kommt cascade-later -> gewinnt -> H1 faellt auf body-
   Groesse. Mit "body h1" (0,0,2) schlagen wir Tailwind ohne !important.
   Werte aus den zentralen Tokens, damit Single-Source-of-Truth gewahrt. */
body h1 { font-size: var(--fs-h1); line-height: 1.1;  margin: 0 0 18px; }
body h2 { font-size: var(--fs-h2); line-height: 1.2;  margin: 0 0 18px; }
body h3 { font-size: var(--fs-h3); line-height: 1.3; }
body h1, body h2, body h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ─── Tailwind-Kompat: text-white/X-Klassen auf hellen Sektionen ──────
   Landing/Demo nutzen viele Tailwind text-white/X-Klassen. Auf
   .sec-cream / .sec-white werden sie hier auf Navy-Toene gemappt,
   damit Markup nicht ueberall umgeschrieben werden muss. */
.sec-cream .text-white,     .sec-white .text-white     { color: var(--navy); }
.sec-cream .text-white\/90, .sec-white .text-white\/90 { color: rgba(10,16,40,0.90); }
.sec-cream .text-white\/80, .sec-white .text-white\/80 { color: rgba(10,16,40,0.80); }
.sec-cream .text-white\/75, .sec-white .text-white\/75 { color: rgba(10,16,40,0.75); }
.sec-cream .text-white\/70, .sec-white .text-white\/70 { color: rgba(10,16,40,0.70); }
.sec-cream .text-white\/65, .sec-white .text-white\/65 { color: rgba(10,16,40,0.65); }
.sec-cream .text-white\/60, .sec-white .text-white\/60 { color: rgba(10,16,40,0.60); }
.sec-cream .text-white\/55, .sec-white .text-white\/55 { color: rgba(10,16,40,0.55); }
.sec-cream .text-white\/50, .sec-white .text-white\/50 { color: rgba(10,16,40,0.50); }
.sec-cream .text-white\/45, .sec-white .text-white\/45 { color: rgba(10,16,40,0.45); }
.sec-cream .text-white\/40, .sec-white .text-white\/40 { color: rgba(10,16,40,0.45); }
.sec-cream .text-white\/30, .sec-white .text-white\/30 { color: rgba(10,16,40,0.35); }
.sec-cream .border-white\/10, .sec-white .border-white\/10 { border-color: rgba(10,16,40,0.10); }
.sec-cream .border-white\/20, .sec-white .border-white\/20 { border-color: rgba(10,16,40,0.15); }
.sec-cream .bg-white\/5,  .sec-white .bg-white\/5  { background: rgba(255,255,255,0.70); }
.sec-cream .bg-white\/10, .sec-white .bg-white\/10 { background: rgba(255,255,255,0.85); }