/* =========================================================================
   LifeMap V2 — AÜ-Design-Schicht "Arbeitsportal"
   Laedt ZULETZT (nach styles.css + montessa-custom.css). Biegt die dunkle
   Space-/Regenbogen-Optik der Alt-App auf das helle AÜ-Corporate-Design
   (Beige/Warmweiss + AÜ-Rot als einzige Signalfarbe) um und stilisiert die
   neue zweistufige Kopf-Navigation. KEIN app.js-Umbau — nur CSS.
   Freigegebene Spec: _intern/etappe2_design/DESIGN_SPEC_v2_arbeitsportal.md
   ========================================================================= */

/* ---------- 1. AÜ-Tokens + Basis-Theme der Alt-App umbiegen ---------- */
:root{
  /* Marke */
  --lm-red:#e20613; --lm-red-dark:#9a1d28; --lm-red-soft:#fbe2df;
  /* Flaechen */
  --lm-bg:#faf6e5; --lm-bg-soft:#fffaf0; --lm-surface:#fffdf6; --lm-surface-muted:#f4f4f4;
  /* Text */
  --lm-text:#000; --lm-text-muted:#666b6e; --lm-text-soft:#7a7d80;
  /* Linien */
  --lm-border:#e5ddc8; --lm-border-strong:#d8cdb4;
  /* Radien */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --pill:999px;
  /* Neutrale, warme Schatten */
  --shadow-card:0 1px 2px rgba(0,0,0,.04),0 10px 28px rgba(60,47,25,.07);
  --shadow-card-hover:0 2px 4px rgba(0,0,0,.05),0 16px 38px rgba(60,47,25,.10);
  /* Roter Glow (sparsam) */
  --glow-btn:0 10px 24px rgba(226,6,19,.18),0 0 26px rgba(226,6,19,.10);
  --font-heading:"Merriweather",Georgia,serif;
  --font-ui:"PT Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* L6-b (05.08.2026): Die eigentliche Ursache der schmalen Berichtsspalte war NICHT die
     1320er-Grenze, sondern diese Variable. styles.css:105 setzt 72rem = 1152px, und
     styles.css:3020 deckelt damit JEDE .card mittig. Gemessen: Arbeitsbereich 2110px,
     Karte trotzdem 1152px, je 442px leere Fläche.
     Wurzelbehandlung: Variable erhöhen statt einzelne Karten anfassen.
     Untergrenze 1152px = kein Rückschritt auf schmalen Laptops · Obergrenze 1600px =
     Fließtext bleibt lesbar. Drucksicher: der @media-print-Block setzt kein max-width,
     und bei A4-Satzspiegel (~700px) ist jede Deckelung ≥1152px ohnehin nicht bindend.
     Wirkt nur in der Fassung 2.0 — styles-au.css ist nur in index-au.html eingebunden. */
  /* 13.09.2026 (Sergej-Befehl, Vollbreite): Die 72vw-Deckelung erzeugte bei 1920px eine 1382px
     schmale, mittige Karte mit je ~270px leerem Rand ("Schlauchansicht"). Die Anwendung ist reine
     Desktop-Software; die Karte fuellt jetzt den Arbeitsbereich. Lesbarkeit langer Zeilen sichert
     das Zwei-Spalten-Raster der Formulare (styles.css, Phase 4, seit dem 13.09. wieder wirksam). */
  --max-content-width:100%;

  /* Basis-Farbvariablen der Alt-App auf hell/warm ueberschreiben.
     (Gleiche Spezifitaet wie in styles.css :root — diese Datei laedt spaeter, gewinnt.) */
  --color-background:#faf6e5;
  --color-background-nav:linear-gradient(180deg,#fffdf6,#faf6e5);
  --color-background-forms:#fffdf6;
  --color-card:#fffdf6;
  --color-card-hover:#fff8eb;
  --color-surface:#fffdf6;
  --color-border:#e5ddc8;
  --color-text:#111;
  --color-text-muted:#666b6e;
  --color-text-light:#7a7d80;
  --color-primary:#e20613;
  --color-primary-dark:#9a1d28;
  --color-primary-light:#f04050;
  --color-secondary:#9a1d28;
  --color-accent:#e20613;
}

/* ---------- 2. Regenbogen-Stationen zentral auf Rot/Beige/Grau normalisieren ----------
   Die Alt-App setzt pro Station Akzente via [data-station="x"] auf <html>.
   html[data-station] (0,1,1) schlaegt [data-station="x"] (0,1,0);
   die dark-Variante deckt [data-theme="dark"][data-station="x"] (0,2,0) ab. */
html[data-station],
html[data-theme="dark"][data-station]{
  --station-accent:var(--lm-red);
  --station-neon:var(--lm-red);
  --station-surface:var(--lm-surface-muted);
  --station-border:var(--lm-border);
  --station-icon-bg:var(--lm-red-soft);
  --station-card:var(--lm-surface);
  --station-chip-bg:var(--lm-red-soft);
  --station-chip-text:var(--lm-red-dark);
  --station-header-bg:var(--lm-red);
}

/* ---------- 3. Body-Grund: warmer Beige-Verlauf + zarter roter Radial ---------- */
body{
  color:var(--lm-text);
  font-family:var(--font-ui);
  background:
    radial-gradient(circle at top left,rgba(226,6,19,.035),transparent 320px),
    linear-gradient(180deg,#faf6e5 0%,#f7efd8 100%) !important;
  background-attachment:fixed !important;
}

/* ---------- 4. Layout: Legacy-Sidebar als unsichtbaren Mount parken, Inhalt zentrieren ----------
   #sidebar bleibt im DOM (app.js rendert dort weiter), ist aber optisch entfernt.
   Der Adapter nav-au.js spiegelt seine Nav-Items in die Kopf-Stationsleiste. */
#sidebar{
  position:absolute !important;
  left:-99999px !important; top:0 !important;
  width:1px !important; height:1px !important;
  overflow:hidden !important; opacity:0 !important; pointer-events:none !important;
}
.app-container{ background:transparent !important; }
.app-main{ display:block !important; background:transparent !important; }
/* L6 (05.08.2026): Der Arbeitsbereich wächst mit dem Bildschirm, aber nicht unbegrenzt.
   Untergrenze 1280px = kein Rückschritt auf schmalen Laptops · 92vw = wächst mit ·
   Obergrenze 2200px = Fließtext bleibt lesbar. Bewusst NICHT max-width:none. */
/* 13.09.2026 (Sergej-Befehl, Vollbreite): Deckelung aufgehoben — der Arbeitsbereich fuellt das
   Fenster bis auf den Seitenabstand. Reine Desktop-Anwendung, keine Smartphone-Auslegung. */
.app-content,#main-content{
  max-width:none; width:100%;
  margin:0 auto !important;
  padding:28px 32px 56px !important;
  background:transparent !important;
  /* L3 (05.08.2026): EIN Rollmodell — die Seite rollt, nicht zusätzlich der Inhaltsrahmen.
     styles.css:2247-2250 gibt .app-content eine eigene Rollflaeche mit
     height:calc(100vh - var(--header-height)). Dieses --header-height ist 5rem = 80px und
     stammt aus der EINZEILIGEN Alt-Kopfzeile; die Kopfzeile der Fassung 2.0 ist zweistufig
     und hoeher. Dadurch rollten body UND main gleichzeitig — zwei Rollbalken nebeneinander,
     und das Mausrad wirkte je nach Zeigerposition auf den falschen Bereich.
     overflow muss fuer BEIDE Achsen gesetzt werden: sobald eine Achse nicht "visible" ist,
     zwingt der Browser die andere auf "auto" — ein halber Fix waere hier wirkungslos. */
  overflow:visible !important;
  height:auto !important;
  max-height:none !important;
}
/* Alter Fortschrittsbalken oben im Inhalt entfaellt — der Header traegt den Fortschritt. */
#progress-container{ display:none !important; }

/* Space-Zwangsflaeche der Alt-App (#16284e via .nav-active / :has(.nav-screen))
   auf helles Beige normalisieren — sonst blutet Dunkelblau um die Inhaltskarten.
   (Der eigentliche helle AÜ-Startseiten-INHALT ist ein separater Schritt / To-Do #2.) */
body.nav-active, #app.nav-active, .app-container.nav-active, .app-main.nav-active,
.app-main:has(.nav-screen), .app-container:has(.nav-screen){
  background-color:var(--lm-bg) !important;
}
/* Dunkle "nav-screen"-Sonderstile im Inhalt neutralisieren (Scrollbar, Kartenrahmen). */
.app-content.nav-screen{ scrollbar-color:var(--lm-border-strong) #f0e9d6 !important; }
.app-content.nav-screen::-webkit-scrollbar-thumb{ background:var(--lm-border-strong) !important; border-radius:var(--pill); }
.app-content.nav-screen::-webkit-scrollbar-track{ background:#f0e9d6 !important; }
/* Zitat-Linie der Subline von Cyan auf AÜ-Rot */
.nav-hero-subtitle{ border-left-color:var(--lm-red) !important; border-color:var(--lm-red) !important; }
.app-content.nav-screen .card{
  background:var(--lm-surface) !important;
  box-shadow:var(--shadow-card) !important;
}

/* =========================================================================
   5. NEUER KOPF — Ebene 1: Marke + Hauptnavigation
   ========================================================================= */
.lm-au-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(216,205,180,.85);
  background:linear-gradient(180deg,rgba(255,253,246,.97),rgba(255,250,240,.93));
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 12px 28px rgba(60,47,25,.06);
}
/* feine rote Lichtkante statt Neonbalken */
.lm-au-header::after{
  content:""; display:block; height:2px;
  background:linear-gradient(90deg,transparent,rgba(226,6,19,.35),transparent);
  box-shadow:0 6px 18px rgba(154,29,40,.08);
}
/* L6: Kopfzeile ist eine Werkzeugleiste — volle Breite, keine Inhaltsspalten-Grenze. */
.lm-au-row1{
  max-width:none; margin:0 auto;
  display:flex; align-items:center; gap:20px; padding:11px 32px;
}
.lm-au-brand{ display:flex; align-items:center; gap:12px; min-width:0; flex:0 0 auto; }
.lm-au-logo-round{
  height:46px; width:46px; border-radius:50%; object-fit:cover; display:block; cursor:pointer;
  box-shadow:0 2px 10px rgba(60,47,25,.12); transition:.16s;
}
.lm-au-logo-round:hover{ box-shadow:0 3px 14px rgba(226,6,19,.20); transform:translateY(-1px); }
/* Zweifarbige Wortmarke — 1:1 aus der Alt-App (Life=Grau, Map=Rot) */
.lm-au-wordmark{
  display:flex; align-items:baseline; font-family:var(--font-ui);
  font-weight:800; font-size:24px; letter-spacing:.01em; line-height:1;
}
.lm-au-wm-life{ background:linear-gradient(135deg,#78909c,#90a4ae);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lm-au-wm-map{ background:linear-gradient(135deg,#c0392b,#e74c3c);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 6px rgba(192,57,43,.22)); }
.lm-au-divider{ width:1px; height:32px; background:var(--lm-border-strong); margin:0 2px; flex:0 0 auto; }
.lm-au-provider-logo{ height:32px; width:auto; display:block; opacity:.95; }
.lm-au-logo-fallback{ font-family:var(--font-heading); font-weight:700; font-size:18px; color:#000; white-space:nowrap; }
.lm-au-logo-fallback .ue{ color:var(--lm-red); }

/* Primaer-Tabs */
/* L2 (05.08.2026): Die Reiter-Zeile darf schrumpfen statt die Kopfzeile zu sprengen
   (min-width:0 — ohne das weigert sich ein Flex-Kind, unter seine Inhaltsbreite zu gehen).
   Der Rollbalken bleibt ausgeblendet, aber der Überhang wird jetzt durch dieselbe weiche
   Kante angedeutet wie bei der Stationsleiste — Klassen setzt nav-au.js. */
.lm-au-nav{ display:flex; align-items:center; gap:4px; margin-left:6px; overflow-x:auto; scrollbar-width:none;
  min-width:0; flex:0 1 auto; }
.lm-au-nav::-webkit-scrollbar{ display:none; }
.lm-au-nav.has-left.has-right{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
}
.lm-au-nav.has-left:not(.has-right){
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px);
          mask-image:linear-gradient(90deg,transparent 0,#000 22px);
}
.lm-au-nav.has-right:not(.has-left){
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%);
}
.lm-au-tab{
  position:relative; border:1px solid transparent; border-radius:var(--pill);
  padding:9px 14px; font-family:var(--font-ui); font-size:15px; font-weight:700;
  color:var(--lm-text-muted); background:transparent; cursor:pointer; white-space:nowrap; transition:.18s;
}
.lm-au-tab:hover{ color:#000; background:rgba(255,253,246,.72); }
/* O21 (09.09.2026, N22): Attrappen-Reiter sichtbar als "noch nicht da" — ausgegraut, kein Aktiv-Zustand */
.lm-au-tab--attrappe{ opacity:.45; cursor:not-allowed; font-weight:600; }
.lm-au-tab--attrappe:hover{ color:var(--lm-text-muted); background:transparent; }
.lm-au-tab.is-active{ color:var(--lm-red-dark); background:var(--lm-surface);
  border-color:rgba(226,6,19,.18);
  box-shadow:0 1px 0 rgba(154,29,40,.08),0 8px 20px rgba(226,6,19,.07); }
.lm-au-tab.is-active::after{ content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2px;
  border-radius:var(--pill); background:var(--lm-red); box-shadow:0 0 10px rgba(226,6,19,.28); }

/* Rechte Aktionsgruppe: Profil-Chip + Werkzeug-Icons + Primaerbutton */
.lm-au-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; flex:0 0 auto; }

/* Profil-Chip (nutzt die Original-User-Card, IDs erhalten) */
.lm-au-actions .header-user-card{
  display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 12px 0 6px;
  border-radius:var(--pill); border:1px solid var(--lm-border); background:var(--lm-surface);
  color:#000; font-size:14px; font-weight:700; box-shadow:none; cursor:pointer;
}
.lm-au-actions .user-card-avatar{
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,#e20613,#9a1d28); color:#fff;
  display:grid; place-items:center; overflow:hidden;
}
.lm-au-actions .user-card-avatar svg{ width:16px; height:16px; }
.lm-au-actions .user-card-name{ color:#000; font-weight:700; font-size:14px; max-width:150px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Werkzeug-Icons (Sprache, Theme, Import, Akten, Speichern, Reset, Info) — hell + kompakt */
.lm-au-utility{ display:flex; align-items:center; gap:2px;
  padding:3px; border-radius:var(--pill); border:1px solid var(--lm-border); background:var(--lm-surface); }
.lm-au-utility .header-action{ margin:0; }
.lm-au-utility .header-action-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid transparent; background:transparent;
  color:var(--lm-text-muted); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s; position:relative;
}
.lm-au-utility .header-action-btn:hover{ color:var(--lm-red-dark); background:#fff5f4; }
.lm-au-utility .header-action-danger:hover{ color:#fff; background:var(--lm-red); }
/* Bunte Icon-Striche (Theme-Sonne amber, KI grün, Teilen blau, Speichern teal) auf
   den neutralen Grundton zwingen — Disziplin "AÜ-Rot als einzige Signalfarbe".
   currentColor folgt der Button-Farbe: grau in Ruhe, rot bei Hover. */
.lm-au-utility .header-action-btn svg{ stroke:currentColor !important; }
.lm-au-utility .header-action-danger:hover svg{ stroke:#fff !important; }
/* Quelle der bunten Icons: ID-Regeln in styles.css (#theme-toggle amber, #magic-upload-btn
   grün, #profiles-btn blau, #save-btn teal, .header-lang-code violett). ID-Spezifität +
   !important, damit der AÜ-Grundton (grau, Hover rot) gewinnt. */
#theme-toggle, #magic-upload-btn, #profiles-btn, #save-btn{
  color:var(--lm-text-muted) !important;
  background:transparent !important;
  border-color:var(--lm-border) !important;
  box-shadow:none !important;
}
#theme-toggle:hover, #magic-upload-btn:hover, #profiles-btn:hover, #save-btn:hover{
  color:var(--lm-red-dark) !important;
  background:#fff5f4 !important;
  border-color:rgba(226,6,19,.28) !important;
  box-shadow:none !important;
}
.header-lang-wrapper .header-lang-code, .lm-au-utility .header-lang-code{ color:var(--lm-text-muted) !important; }
.lm-au-utility .header-lang-wrapper{ width:auto; gap:4px; padding:0 8px; font-weight:700; font-size:12px; }
.lm-au-utility .header-lang-code{ color:var(--lm-text-muted); font-weight:700; }
.lm-au-utility .header-lang-overlay{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.lm-au-utility .header-divider{ width:1px; height:20px; background:var(--lm-border-strong); margin:0 3px; }
.lm-au-utility .save-status-container{ display:none; }

/* Primaerbutton "Bericht erstellen" */
.lm-au-btn-primary{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 17px;
  border-radius:12px; border:1px solid rgba(154,29,40,.28);
  background:linear-gradient(180deg,#e20613 0%,#c70511 100%); color:#fffaf0;
  font-family:var(--font-ui); font-size:15px; font-weight:700; cursor:pointer; white-space:nowrap;
  box-shadow:var(--glow-btn),0 1px 0 rgba(255,255,255,.22) inset; transition:.16s;
}
.lm-au-btn-primary:hover{ transform:translateY(-1px);
  background:linear-gradient(180deg,#ef1220,#c70511);
  box-shadow:0 14px 30px rgba(226,6,19,.22),0 0 34px rgba(226,6,19,.13),0 1px 0 rgba(255,255,255,.24) inset; }

/* =========================================================================
   6. NEUER KOPF — Ebene 2: Stationen-Fortschritt (nur im Profiling)
   ========================================================================= */
.lm-au-progress{
  border-top:1px solid rgba(216,205,180,.75);
  background:linear-gradient(180deg,rgba(255,253,246,.94),rgba(250,246,229,.86));
  backdrop-filter:blur(10px);
}
/* L6: Stationsleiste ist eine Werkzeugleiste — volle Breite (zeigt dadurch mehr Stationen). */
.lm-au-progress-inner{ max-width:none; margin:0 auto; padding:11px 32px 14px; }
.lm-au-progress-meta{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
  font-size:14px; color:var(--lm-text-muted); }
.lm-au-progress-meta .lm-au-who{ font-weight:700; color:#000; }
.lm-au-pct{ font-weight:700; color:var(--lm-red-dark); }
.lm-au-rail{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin; }
/* L1 (05.08.2026): weiche Kante als Andeutung „hier geht es weiter". Die Klassen setzt
   nav-au.js abhängig von der echten Rollposition — die Kante erscheint nur auf der Seite,
   auf der wirklich etwas verdeckt ist, und gar nicht, wenn alles sichtbar ist. */
.lm-au-rail.has-left.has-right{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);
}
.lm-au-rail.has-left:not(.has-right){
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px);
          mask-image:linear-gradient(90deg,transparent 0,#000 30px);
}
.lm-au-rail.has-right:not(.has-left){
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent 100%);
}
.lm-au-step{
  position:relative; display:flex; align-items:center; gap:8px; flex:0 0 auto; min-width:max-content;
  padding:8px 13px; border-radius:var(--pill); border:1px solid var(--lm-border);
  background:var(--lm-surface-muted); color:var(--lm-text-muted);
  font-family:var(--font-ui); font-size:13px; font-weight:700; cursor:pointer; transition:.15s;
}
.lm-au-step:hover{ color:#000; border-color:var(--lm-border-strong); }
.lm-au-step.is-complete{ background:#fff8eb; color:#000; border-color:#e1d2b8; }
.lm-au-step.is-active{ background:var(--lm-surface); color:var(--lm-red-dark);
  border-color:rgba(226,6,19,.32);
  box-shadow:0 0 0 4px rgba(226,6,19,.06),0 8px 22px rgba(226,6,19,.10); }
.lm-au-step.is-off{ opacity:.5; text-decoration:line-through; }
.lm-au-dot{ width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:#c9c1ad; }
.lm-au-step.is-complete .lm-au-dot{ background:var(--lm-red-dark); }
.lm-au-step.is-active .lm-au-dot{ background:var(--lm-red);
  box-shadow:0 0 0 4px rgba(226,6,19,.12),0 0 16px rgba(226,6,19,.22); }
.lm-au-line-track{ height:4px; border-radius:var(--pill); background:#e7deca; overflow:hidden; margin-top:11px; }
.lm-au-line-value{ height:100%; width:0%; border-radius:inherit;
  background:linear-gradient(90deg,#9a1d28,#e20613); box-shadow:0 0 14px rgba(226,6,19,.18); transition:width .25s; }

/* =========================================================================
   6b. STARTSEITE (renderNavigation / .nav-screen) — helle AÜ-Variante (To-Do #2)
   Nur V2 (diese Datei laedt ausschliesslich index-au.html). Inline-Regenbogen-
   farben werden per !important auf Rot/Beige/Grau normalisiert. Kein app.js-Umbau.
   ========================================================================= */
/* Kosmos-Board ausblenden — serioeser, heller Auftritt wie im freigegebenen Mockup */
.nav-map-background{ display:none !important; }

/* Hero-Kachel */
.nav-hero-container{ position:relative; z-index:1; }
.nav-hero{
  background:var(--lm-surface) !important; border:1px solid var(--lm-border) !important;
  border-radius:var(--r-xl) !important; box-shadow:var(--shadow-card) !important;
}
.nav-hero-glow{ display:none !important; }
.nav-hero-title{ font-family:var(--font-heading) !important; }
.nav-hero-title-life{
  background:linear-gradient(135deg,#78909c,#90a4ae) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
.nav-hero-title-map{
  background:linear-gradient(135deg,#c0392b,#e74c3c) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  filter:drop-shadow(0 0 6px rgba(192,57,43,.22)) !important;
}
.nav-hero-claim{ color:var(--lm-red-dark) !important; }
.nav-hero-tagline,.nav-hero-tagline2{ color:#000 !important; }
.nav-hero-subtitle{ color:var(--lm-text-muted) !important; }

/* Feature-Karten (17 Stationen / 360° / A|B|C) — hell, Icons neutral-grau, Werte rot */
.nav-brand-card{
  background:var(--lm-surface-muted) !important; border:1px solid var(--lm-border) !important;
  border-radius:var(--r-lg) !important; box-shadow:none !important;
}
.nav-brand-value{ color:var(--lm-red-dark) !important; }
.nav-brand-label{ color:var(--lm-text-muted) !important; }
.brand-separator{ color:var(--lm-border-strong) !important; }
/* Farbige [data-brand]-Reste (Toenung/Glow/Icon-Farbe) neutralisieren — hoehere Spezifitaet als styles.css */
.nav-brand-card[data-brand]::before{ background:none !important; }
.nav-brand-card[data-brand] .nav-brand-icon svg{ filter:grayscale(1) opacity(.5) !important; }
.nav-brand-card[data-brand] .nav-brand-value{ color:var(--lm-red-dark) !important; }
.nav-brand-card[data-brand]:hover{ box-shadow:var(--shadow-card-hover) !important; border-color:rgba(226,6,19,.30) !important; }
/* "INNOVATION IN ACTION" — Cyan-Glow auf dezenten roten Eyebrow */
.nav-hero-tagline2{ color:var(--lm-red-dark) !important; text-shadow:none !important; }
.nav-hero-claim{ text-shadow:none !important; }

/* Routen-Abschnitt */
.nav-section-title{ color:#000 !important; }
.nav-section-dot{ background:var(--lm-red) !important; box-shadow:0 0 10px rgba(226,6,19,.30) !important; }
.nav-section-line{ background:linear-gradient(90deg,var(--lm-border-strong),transparent) !important; }

/* Stationen-Kacheln — Inline-Regenbogen auf Rot/Beige normalisieren */
.nav-station-card{
  background:var(--lm-surface) !important; border:1px solid var(--lm-border) !important;
  border-radius:var(--r-md) !important; box-shadow:var(--shadow-card) !important;
}
.nav-station-card:hover{ border-color:rgba(226,6,19,.30) !important;
  box-shadow:0 0 0 4px rgba(226,6,19,.06),0 8px 22px rgba(226,6,19,.10) !important; }
.nav-station-accent{ background:var(--lm-red) !important; }
.nav-station-icon{ background:var(--lm-red-soft) !important; color:var(--lm-red) !important; }
/* Regenbogen-Stations-Icons (Farbe als SVG-Attribut) auf AÜ-Rot monochrom zwingen */
.nav-station-icon svg [fill]:not([fill="none"]){ fill:currentColor !important; }
.nav-station-icon svg [stroke]:not([stroke="none"]){ stroke:currentColor !important; }
.nav-station-title{ color:#000 !important; }
.nav-station-number{ color:var(--lm-border-strong) !important; }

/* CTA — AÜ-Roter Primaerbutton */
.nav-cta-text{ color:var(--lm-text-muted) !important; }
.nav-cta-btn{
  background:linear-gradient(180deg,#e20613,#c70511) !important; color:#fffaf0 !important;
  border:1px solid rgba(154,29,40,.28) !important; box-shadow:var(--glow-btn) !important;
}
.nav-cta-btn:hover{ background:linear-gradient(180deg,#ef1220,#c70511) !important; transform:translateY(-1px); }

/* =========================================================================
   6c. AUSWERTUNG / BERICHT (renderResultsStep / .results-report) — AÜ-hell (To-Do #3)
   Der Bericht-Deckel ist mit dunklen Inline-Styles gebaut; per !important + Struktur-
   Selektoren auf Beige/Rot normalisiert. Der Body ist bereits AÜ-hell.
   ========================================================================= */
/* Deckel-Karte: blauer Rahmen/Glow -> warm */
.report-deckblatt-card{ border:1px solid var(--lm-border) !important; box-shadow:var(--shadow-card) !important; }
/* Deckel-Hero: dunkelblau/teal -> warmer Beige-Verlauf, rote Kante */
.report-deckblatt-hero{
  background:linear-gradient(180deg,var(--lm-surface) 0%,var(--lm-bg) 100%) !important;
  border-bottom:3px solid var(--lm-red) !important; color:#000 !important;
}
/* dekorative absolute Teal-Radials im Hero ausblenden */
.report-deckblatt-hero > div[style*="absolute"]{ display:none !important; }
/* Claim/Untertitel im Hero (waren weiss/transparent) -> lesbar dunkel */
.report-deckblatt-hero > div{ color:var(--lm-text-muted) !important; }
/* Wortmarke im Hero (Life weiss / Map rose) -> AÜ Grau/Rot */
.report-deckblatt-hero span{ background:none !important; -webkit-text-fill-color:currentColor !important; }
.report-deckblatt-hero span:first-child{ color:#78909c !important; }
.report-deckblatt-hero span:last-child{ color:var(--lm-red) !important; }
/* Info-Karten im Deckel: teal Linksrand -> rot */
.report-deckblatt-card div[style*="border-left"]{ border-left-color:var(--lm-red) !important; }
/* Report-Body: teal Unterstriche/Seitenumbruch-Kanten -> AÜ-rot */
.results-report .card-title{ border-bottom-color:var(--lm-red-soft) !important; }
.results-report .report-page-break{ border-top-color:var(--lm-red) !important; }

/* --- 6c.1 Wurzelfix: die in app.js für .results-report gesetzte "Blau=professionell"-
   Farblogik auf AÜ-Rot umstellen. Höhere Spezifität (html …) + !important, damit es
   die per !important gesetzten Report-Variablen sicher schlägt (Quell-Reihenfolge egal). */
html .results-report, html .report-body{
  --color-primary:#e20613 !important;
  --color-primary-dark:#9a1d28 !important;
  --color-primary-light:#f04050 !important;
  --color-primary-bg:#fdecec !important;
  --color-bg:#faf6e5 !important;
  --color-bg-secondary:#f4f4f4 !important;
  --color-surface:#fffdf6 !important;
  --color-card:#fffdf6 !important;
  --color-card-hover:#fff8eb !important;
  --color-border:#e5ddc8 !important;
  /* Info-/Callout-Farben der Report-Ansicht (waren Blau) -> AÜ-Rot/warm */
  --color-info:#9a1d28 !important;
  --color-info-bg:#f4f4f4 !important;
  /* Deko-Verlaufsvariablen der Report-Karten (Teal/Blau/Cyan/Navy) -> AÜ-Rot/Dunkel */
  --lm-teal:#9a1d28 !important; --lm-blue:#e20613 !important; --lm-cyan:#f04050 !important;
  --au-navy:#1D1D1B !important;
}

/* --- 6c.2 Restliche hartkodierte Teal/Blau/Kühlgrau-Inline-Styles in der Auswertung
   (renderResultsStep-Deckblatt). Stylesheet-!important schlägt Inline-ohne-!important. --- */
/* kühle Kartenflächen -> warmes Papier/Beige */
.results-report [style*="#f0f4f8"]{ background:var(--lm-surface-muted) !important; }
.results-report [style*="#f0fdfa"]{ background:var(--lm-red-soft) !important; }
/* Teal-Kanten/Text (#06b6d4) + Teal-Chips (#0d9488) -> AÜ-Rot
   10.10.2026 (Sergej-Befund mit Bild): Der Block Selbstbild und Fremdbild ist von der Umfärbung ausgenommen
   (:not([data-report-section="anatomie-vergleich"] *)). Er ist als dunkle Bühne für das Bild gebaut, Türkis steht
   dort für die Selbsteinschätzung. Umgefärbt stand Dunkelrot auf Rot und die Balken waren nicht zu erkennen. */
.results-report [style*="#06b6d4"]:not([data-report-section="anatomie-vergleich"] *),
.results-report [style*="#0d9488"]{ border-color:var(--lm-red) !important; }
.results-report [style*="color:#06b6d4"]:not([data-report-section="anatomie-vergleich"] *),
.results-report [style*="color:#0d9488"]{ color:var(--lm-red-dark) !important; }
/* Blau-Kanten/Text (#3b82f6) -> AÜ-Rot */
.results-report [style*="#3b82f6"]{ border-color:var(--lm-red) !important; }
.results-report [style*="color:#3b82f6"]{ color:var(--lm-red-dark) !important; }
/* blaue Fortschritts-Verlaufsbalken -> AÜ-Rot */
.results-report [style*="#3b82f680"]{ background:linear-gradient(90deg,rgba(226,6,19,.5),var(--lm-red)) !important; }
/* Export-/Aktions-Karte: blauer Rahmen + kühler Grund -> rot + warm */
.results-report .export-actions-card{ border-color:var(--lm-red) !important; background:var(--lm-surface-muted) !important; }
/* Teal/Blau-Akzent der KI-Karten-Icons + Export-Knöpfe -> AÜ-Rot */
.results-report .ai-card-icon,
.results-report .ai-btn-export{ background:linear-gradient(180deg,#e20613,#c70511) !important; color:#fffaf0 !important; }
/* Blau auch als rgb() im Inline-Style geschrieben */
.results-report [style*="rgb(59, 130, 246)"]{ border-color:var(--lm-red) !important; }
/* farbige Punkte/Flächen, die die Farbe direkt als background setzen -> AÜ-Rot
   10.10.2026 (Sergej-Befund mit Bild): Die Regel traf jeden Stil, der mit "background:#06b6d4" BEGINNT, also auch
   zarte Tönungen wie "background:#06b6d408" (Farbwert mit angehängter Deckkraft). Aus drei Prozent Tönung wurde
   eine deckend rote Kachel mit dunkelroter Schrift (Meilensteine in Fazit und Ausblick). Jetzt trifft sie nur noch
   den vollen Farbwert: gefolgt vom Strichpunkt oder am Ende des Stils. */
.results-report [style*="background:#3b82f6;"],
.results-report [style$="background:#3b82f6"],
.results-report [style*="background:#06b6d4;"]:not([data-report-section="anatomie-vergleich"] *),
.results-report [style$="background:#06b6d4"]:not([data-report-section="anatomie-vergleich"] *){ background:var(--lm-red) !important; }
/* zarte Tönungen in Türkis und Blau -> zarte Tönungen in AÜ-Rot (Kachelgrund und Marken der Meilensteine) */
.results-report [style*="background:#06b6d408"],
.results-report [style*="background:#3b82f608"]{ background:rgba(226,6,19,.03) !important; }
.results-report [style*="background:#06b6d420"],
.results-report [style*="background:#3b82f620"]{ background:rgba(226,6,19,.08) !important; }
/* dunkler Navy-Banner der KI-Fachbericht-Sektion -> AÜ-Rot-Band (weiße Schrift bleibt lesbar)
   10.10.2026: gilt nicht für den Block Selbstbild und Fremdbild, der dieselben Farbwerte als Bühne für das Bild
   nutzt. Dort stand sonst eine flächig rote Fläche mit nicht erkennbaren Balken (Sergej-Befund mit Bild). */
.results-report [style*="#0f172a"]:not([data-report-section="anatomie-vergleich"] *),
.results-report [style*="#0c1222"]:not([data-report-section="anatomie-vergleich"] *){ background:linear-gradient(160deg,#9a1d28,#e20613,#9a1d28) !important; }
/* mintfarbene KI-Export-Sektion -> warmes Papier */
.results-report .ai-card-export{ background:var(--lm-surface-muted) !important; }
/* LiveMap-Timeline / Fortschritts-Verläufe: teal #06b6d4 -> AÜ-Rot, teal/blaue Glows weg */
.results-report [style*="linear-gradient(90deg, #06b6d4"]:not([data-report-section="anatomie-vergleich"] *){ background:linear-gradient(90deg,var(--lm-red),var(--lm-red-dark)) !important; }
.results-report [style*="#06b6d4"]:not([data-report-section="anatomie-vergleich"] *),
.results-report [style*="#3b82f6"]{ box-shadow:none !important; }
.results-report [style*="repeating-linear-gradient"]:not([data-report-section="anatomie-vergleich"] *){ background-image:none !important; }

/* --- 6c.3 Lesbarkeitsschicht (10.10.2026, lesbarkeit.js) ---
   lesbarkeit.js misst jede Textstelle gegen ihren Untergrund und hängt, nur wo der Mindestwert verfehlt wird, die
   Angabe "--lf" mit einer dunkleren (auf dunklem Grund: helleren) Fassung derselben Farbe an den Stil. Diese Regel
   macht sie zur Schriftfarbe. Sie muss jede andere Farbregel schlagen, auch solche mit Kennung und !important,
   weil die Schicht die Farbe misst, die nach allen anderen Regeln übrig bleibt. Dafür sorgen die beiden :is()
   mit einer Kennung, die es nicht gibt: :is() zählt mit dem Gewicht seines schwersten Arguments. */
:is(#lf-vorrang-a, [style*="--lf:"]):is(#lf-vorrang-b, [style*="--lf:"]){ color:var(--lf) !important; }
/* Schrift in Schaubildern (Zahl im Ring, Achsenbeschriftung): dort ist die Farbe die Füllfarbe */
svg :is(#lf-vorrang-a, text[style*="--lf:"], tspan[style*="--lf:"]):is(#lf-vorrang-b, [style*="--lf:"]){ fill:var(--lf) !important; }
/* Die drei Markenkarten der Übersicht blendeten im Takt auf drei Viertel Deckkraft ab (Rest der alten Neon-Optik,
   styles.css neonPulse). Die Beschriftung war in der dunklen Hälfte des Takts unter dem Mindestwert. Die Karten
   stehen jetzt ruhig, im Sinn der Ruhe-Schicht. */
.nav-brand-card{ animation:none !important; opacity:1 !important; filter:none !important; }

/* =========================================================================
   6b. L4 (05.08.2026) — Fortschritts-Map hinter dem Logo auf Design 2.0
   Sergej-Befund: die App ringsum ist hell/beige/AÜ-Rot, das Fenster hinter dem
   Logo war dunkelblau mit Neon-Cyan — ein Bruch mitten in der Anwendung.
   Sergej-Vorgabe: Inhalt bleibt, Optik wird gehoben.
   Umsetzung bewusst als CSS-Schicht: showLifeMapBoard() in app.js baut alles mit
   festen Inline-Stilen und schreibt bei onmouseover/onmouseout sogar Farben per JS
   zurueck. Ein Stylesheet mit !important gewinnt gegen beides — deshalb KEIN
   app.js-Umbau (Grundsatz dieser Datei) und trotzdem hover-fest.
   ========================================================================= */
#lifemap-board-overlay{ background:rgba(60,47,25,.42) !important; }
#lifemap-board-overlay .board-container{
  background:var(--lm-surface) !important;
  border:1px solid var(--lm-border-strong) !important;
  border-radius:var(--r-xl) !important;
  color:var(--lm-text) !important;
  box-shadow:0 30px 80px rgba(60,47,25,.22) !important;
  animation:none !important; /* der pulsierende Neon-Rahmen entfaellt */
}
#lifemap-board-overlay .board-header{
  background:linear-gradient(180deg,rgba(255,253,246,.98),rgba(250,246,229,.92)) !important;
  border-bottom:1px solid var(--lm-border) !important;
  border-radius:var(--r-xl) var(--r-xl) 0 0 !important;
}
/* Neon-Leuchtlinien unter dem Kopf und ueber dem Fuss -> feine rote Lichtkante */
#lifemap-board-overlay [style*="#00e5ff"],
#lifemap-board-overlay [style*="rgba(0,229,255,0.4) 20%"]{
  background:linear-gradient(90deg,transparent,rgba(226,6,19,.35),transparent) !important;
  box-shadow:none !important; animation:none !important;
}
/* Schliessen-Knopf im Werkzeug-Stil der Kopfzeile */
#lifemap-board-overlay .board-header button{
  border:1px solid var(--lm-border) !important;
  background:var(--lm-surface) !important;
  color:var(--lm-text-muted) !important;
}
#lifemap-board-overlay .board-header button:hover{
  background:#fff5f4 !important; color:var(--lm-red-dark) !important;
}
/* Wortmarke "Profiling-Report": Cyan -> dasselbe Grau wie in der Kopfzeile */
#lifemap-board-overlay [style*="#06b6d4"]{ color:#78909c !important; text-shadow:none !important; }
/* Helle Schrift der Alt-Optik auf lesbares Dunkel (Reihenfolge beachten:
   die Fortschrittsspur unten korrigiert ihren Hintergrund danach wieder) */
#lifemap-board-overlay [style*="rgba(255,255,255"]{ color:var(--lm-text-muted) !important; }
#lifemap-board-overlay [style*="background:rgba(255,255,255,0.08)"]{ background:#e7deca !important; }
/* Stationskarten */
#lifemap-board-overlay .board-path > div{
  background:var(--lm-surface-muted) !important;
  border:1px solid var(--lm-border) !important;
  box-shadow:none !important;
  color:var(--lm-text) !important;
}
#lifemap-board-overlay .board-path > div:hover{
  border-color:var(--lm-border-strong) !important;
  box-shadow:var(--shadow-card) !important;
}
/* Prozentzahlen: auf hellem Grund sind die alten HSL-Gelbtoene unlesbar.
   Zahl auf AÜ-Rot, der Balken behaelt seine Ampel-Bedeutung. */
#lifemap-board-overlay .board-path > div > span:last-child{ color:var(--lm-red-dark) !important; }
#lifemap-board-overlay [style*="text-shadow"]{ color:var(--lm-red-dark) !important; text-shadow:none !important; }

/* =========================================================================
   7. Inhaltsbereich — Karten/Formulare warm-hell abrunden (dezent, kein Rewrite)
   Nur weiche Angleichung; Alt-App-Struktur bleibt unangetastet.
   ========================================================================= */
.app-content .card{ box-shadow:var(--shadow-card); }
.app-content .btn.btn-primary{
  background:linear-gradient(180deg,#e20613 0%,#c70511 100%); border-color:rgba(154,29,40,.28);
  color:#fffaf0; box-shadow:var(--glow-btn),0 1px 0 rgba(255,255,255,.22) inset;
}
.app-content .btn.btn-primary:hover{ background:linear-gradient(180deg,#ef1220,#c70511); }

/* =========================================================================
   8. Responsiv
   ========================================================================= */
/* L7 (05.08.2026): Diese Anwendung läuft ausschließlich auf Desktop und Laptop
   (Sergej-Vorgabe 05.08.2026, Entscheidung 12). Die alten Haltepunkte 1024/640 waren
   Smartphone-Muster: die Kopfzeile brach um und die Navigation sprang auf eine eigene
   volle Zeile. Auf einem geteilten Bildschirm oder kleinen Laptop ist das falsch —
   dort braucht es einen DICHTEREN Arbeitsmodus, keinen Umbruch.
   Neue Haltepunkte liegen auf echten Desktop-Engpässen: 1440 und 1280. */
@media(max-width:1440px){
  .lm-au-row1{ gap:14px; padding:10px 22px; }
  .lm-au-progress-inner,.app-content,#main-content{ padding-left:22px !important; padding-right:22px !important; }
}
@media(max-width:1280px){
  /* dichter, aber ausdrücklich EINZEILIG — kein flex-wrap, kein order-Sprung */
  .lm-au-row1{ gap:10px; padding:9px 14px; }
  .lm-au-tab{ padding:8px 10px; font-size:14px; }
  .lm-au-actions{ gap:6px; }
  .lm-au-actions .user-card-name{ max-width:96px; }
  .lm-au-utility .header-action-btn{ width:30px; height:30px; }
  .lm-au-btn-primary{ padding:0 13px; font-size:14px; }
  .lm-au-progress-inner,.app-content,#main-content{ padding-left:14px !important; padding-right:14px !important; }
}

/* ---------- 13.09.2026 Durchklick-Audit: blasse Bedienelemente im Bericht ----------
   Gemessen (Kontrast Symbol/Untergrund): Sektions-Schalter 2,45 · KI-Import-Knopf 2,31.
   Beide Symbole waren auf dem hellen Kartengrund kaum zu sehen. Volle AUe-Farben statt Pastell. */
.results-report .report-section-toggle-btn{ color:var(--lm-red) !important; border-color:rgba(226,6,19,.45) !important; }
.results-report .report-section-toggle-btn.is-hidden{ color:#666b6e !important; }
.ai-btn-import{ color:#0f6b4f !important; }

/* =========================================================================
   07.10.2026 — RUHE-SCHICHT (Sergej nach dem Sichttest: „zu grell, zu weiß, steril,
   weiße Kachel in weißer Kachel, ich habe mich nicht geborgen gefühlt").
   Gemessen vorher: alle Flächen im Helligkeitsband 0,92 bis 0,98, Text reines Schwarz,
   Rot als Fläche und Leuchten (_intern/design/2026-10-07_ist_messung_farben.md).
   Leitlinie mit Quellen: docs/gestaltung_ruhe.md. Corporate Design bleibt: Rot, Beige,
   Grau, Merriweather/PT Sans; neu sind nur Tonstufen aus Beige und ein warmes Fast-Schwarz.
   Nur Bildschirm: Druck und A4-Bericht bleiben unverändert.
   ========================================================================= */
@media screen{
  :root{
    /* Stufen gemessen (07.10.2026): Karte/Grund 1,26 · Abschnitt/Karte 1,17 · Feld/Abschnitt 1,21 ·
       Feldrand/Feld 2,23 · Text/Abschnitt 11,4. Vorher lagen alle Flächen bei 1,06. */
    --ruhe-grund:#e6dec9;      /* Seitengrund: Beige deutlich tiefer, nimmt die Blendung */
    --ruhe-kopf:#f6f1e4;       /* Kopfleiste */
    --ruhe-karte:#fbf8f0;      /* Karte: warmes Papier, kein Weiß */
    --ruhe-abschnitt:#eee6d4;  /* Abschnitt in der Karte: eine Tonstufe tiefer */
    --ruhe-feld:#fffcf5;       /* Eingabefeld: hellste Stufe, die Schreibfläche */
    --ruhe-rand:#ddd2bb;       /* sichtbare warme Linie */
    --ruhe-rand-feld:#b9aa8a;  /* Feldrand, klar erkennbar */
    --ruhe-text:#2e2b26;       /* warmes Fast-Schwarz statt #000 */
    --ruhe-text-leise:#5f6064; /* Hinweise */
    --ruhe-schatten:0 1px 2px rgba(70,55,30,.06),0 8px 24px rgba(70,55,30,.08);

    --lm-bg:var(--ruhe-grund);
    --lm-surface:var(--ruhe-karte);
    --lm-surface-muted:var(--ruhe-abschnitt);
    --lm-border:var(--ruhe-rand);
    --lm-text:var(--ruhe-text);
    --color-background:var(--ruhe-grund);
    --color-card:var(--ruhe-karte);
    --color-surface:var(--ruhe-karte);
    --color-background-forms:var(--ruhe-feld);
    --color-border:var(--ruhe-rand);
    --color-text:var(--ruhe-text);
    --color-text-muted:var(--ruhe-text-leise);
  }
  html,body,.app,.app-main,.app-container{ background:var(--ruhe-grund) !important; color:var(--ruhe-text) !important; }
  /* Codex Runde 1 (D1/D2): keine Pauschalregel fuer h1 bis h4, sie ueberschrieb weisse Schrift auf rotem
     Inhaltsverzeichnis-Kopf und die Ampelfarben im Bericht. Die Textfarbe kommt ueber --color-text/--lm-text. */
  .form-label{ color:var(--ruhe-text) !important; }
  header,.lm-au-header{ background:var(--ruhe-kopf) !important; box-shadow:0 1px 0 var(--ruhe-rand) !important; }

  /* Karte: warmes Papier mit ruhigem Schatten; kein roter Schein, kein roter Rand oben */
  /* Codex Runde 2 (D7): Karten mit eigenem fachlichem Rand im style-Attribut (Empfohlene Richtung, Coach-Ebene)
     behalten ihn; nur Hintergrund und Schatten werden beruhigt. */
  .card{ background:var(--ruhe-karte) !important; box-shadow:var(--ruhe-schatten) !important; }
  .card:not([style*="border"]){ border:1px solid var(--ruhe-rand) !important; }
  .card::before{ display:none !important; }
  .card-header{ background:transparent !important; border-bottom:1px solid var(--ruhe-rand) !important; }

  /* Abschnitt: eine Tonstufe tiefer mit klarem Rand; Kopf ohne rote Fläche, nur ein feiner Akzentstrich.
     Codex Runde 2 (D6): als "nicht passend" markierte Abschnitte behalten Warnrand und gestrichelten Rahmen. */
  .form-section:not(.section-irrelevant){ background:var(--ruhe-abschnitt) !important; }
  /* Codex Runde 3 (D8): Abschnitte mit eigenem fachlichem Rand (R/A/V-Faecher im Arbeitsmarkt, Farbe aus config.js)
     behalten ihn; nur Abschnitte ohne eigenen Rand bekommen die ruhige Linie. */
  .form-section:not(.section-irrelevant):not([style*="border"]){ border:1px solid var(--ruhe-rand) !important; }
  .form-section{ border-radius:14px !important; }
  /* Codex Runde 2 (D5): nur das rote Verlaufsbild entfernen, nicht die Hintergrundfarbe, damit Hover und
     Tastaturfokus (styles.css, :focus-visible) sichtbar bleiben; Fokus zusaetzlich als deutlicher Ring. */
  .form-section-header{ background-image:none !important; box-shadow:inset 4px 0 0 var(--lm-red-dark) !important; padding-left:20px !important; }
  .form-section:not(.section-irrelevant) .form-section-header{ border-bottom:1px solid var(--ruhe-rand) !important; }
  .form-section[data-collapsible='true'] .form-section-header:hover{ background-color:rgba(154,29,40,.06) !important; }
  .form-section[data-collapsible='true'] .form-section-header:focus-visible{ background-color:rgba(154,29,40,.08) !important;
    box-shadow:inset 4px 0 0 var(--lm-red-dark),0 0 0 3px rgba(154,29,40,.35) !important; }
  .form-section-title{ background:none !important; -webkit-text-fill-color:currentColor !important; color:var(--ruhe-text) !important; }

  /* Felder: hellste Stufe mit sichtbarem Rand; Pflicht nur noch am Sternchen, kein roter Balken je Feld */
  /* Ersatz-Gegenpruefung Runde 7 (R7-5): das Lebenslauf-Einfuegefeld (.wizard-textarea) hat bewusst nur eine
     obere Linie in seiner Box; es bleibt ausgenommen. */
  .form-input,.form-select,.form-textarea,textarea:not(.wizard-textarea),select{ background:var(--ruhe-feld) !important; border:1.5px solid var(--ruhe-rand-feld) !important; color:var(--ruhe-text) !important; }
  /* R7-3: die Coach-Notiz ist bewusst als Info-Feld abgesetzt */
  .pfad-coach-note textarea{ background:var(--color-info-bg) !important; border-color:var(--color-info) !important; }
  /* R7-2: uebersprungene Felder bleiben leiser beschriftet */
  .field-skipped .form-label{ color:var(--ruhe-text-leise) !important; }
  .form-input[required]{ border-left-width:1.5px !important; border-left-color:var(--ruhe-rand-feld) !important; }
  /* Codex Runde 3 (D9): ausgefuellte Felder bleiben erkennbar, jetzt in AUe-Gruen (Funktionsfarbe "positiv") statt
     Rot: ein ruhiges Zeichen von Fortschritt statt eines Alarmbalkens. Steht nach der Pflichtregel, damit es gewinnt. */
  /* Codex Runde 4 (D10): :not(:placeholder-shown) gilt auch fuer LEERE Felder ohne Platzhalter, deshalb nur mit
     [placeholder]; Auswahlfelder ueber die Klasse has-value (app.js setzt sie wertabhaengig). */
  /* Ersatz-Gegenpruefung Runde 7 (R7-1): app.js setzt placeholder="" bei Feldern ohne Platzhalter; ein leerer
     Platzhalter wird nie angezeigt, das leere Feld galt sonst als ausgefuellt. Deshalb nur nicht-leere Platzhalter. */
  .form-input[placeholder]:not([placeholder=""]):not(:placeholder-shown),.form-select.has-value,
  .form-textarea[placeholder]:not([placeholder=""]):not(:placeholder-shown){ border-left:3px solid #557555 !important; }
  /* Codex Runde 4: Hover-Rueckmeldung der Felder zurueck (ruhig, ohne Rot) */
  /* Codex Runde 5 (D11): nur oben, rechts, unten, damit die gruene Gefuellt-Markierung links beim Ueberfahren bleibt */
  /* Codex Runde 6 (D12): nicht in Feldgruppen mit Fehler, sonst wuerde der rote Fehlerrahmen beim Ueberfahren braun */
  .form-group:not(.error) .form-input:hover:not(:focus),.form-group:not(.error) .form-select:hover:not(:focus),.form-group:not(.error) .form-textarea:hover:not(:focus){
    border-top-color:#9c8c6c !important; border-right-color:#9c8c6c !important; border-bottom-color:#9c8c6c !important; }
  .form-input:focus,.form-select:focus,textarea:focus,select:focus{ border-color:var(--lm-red-dark) !important; box-shadow:0 0 0 3px rgba(154,29,40,.12) !important; outline:none !important; }
  /* R7-4: Fehler schlaegt die gruene Gefuellt-Markierung ([class] hebt die Spezifitaet auf 0,4,0, steht spaeter) */
  .form-group.error .form-input[class],.form-group.error .form-select[class],.form-group.error .form-textarea[class],
  .form-group.error textarea{ border-color:var(--lm-red) !important; }
  /* R7-6: Seitenumbruch-Kante der Berichtskarten bleibt rot (aelterer Teil dieser Datei, Abschnitt 6c) */
  .results-report .card.report-page-break{ border-top-color:var(--lm-red) !important; }

  /* Startseite: Neon-Reste weg (blauer Schein ums Logo, Leuchten an Ziffern), Kacheln als Tonstufe */
  .nav-hero-logo{ filter:none !important; box-shadow:0 0 0 6px var(--ruhe-karte),0 0 0 7px var(--ruhe-rand) !important; }
  .nav-screen *{ text-shadow:none !important; }
  .nav-brand-card,.nav-brand-card[data-brand]{ background:var(--ruhe-abschnitt) !important; border:1px solid var(--ruhe-rand) !important; box-shadow:none !important; }
  .nav-brand-card[data-brand] .nav-brand-icon svg{ filter:sepia(.35) saturate(.6) opacity(.85) !important; }
  .nav-station-card{ background:var(--ruhe-feld) !important; border:1px solid var(--ruhe-rand) !important; box-shadow:none !important; }
  .nav-station-accent{ width:3px !important; background:var(--lm-red-dark) !important; }

  /* Keine Sätze in Großbuchstaben: sie wirken drängend (Innovation Unit, trauma-informiertes Gestalten) */
  .nav-hero-tagline,.nav-hero-tagline2,.nav-hero-claim,.nav-section-title,.nav-brand-label{ text-transform:none !important; letter-spacing:.02em !important; }
}

/* ---------- AP2 (10.10.2026): Hinweise zu harten Voraussetzungen an Route und Formatkarten ----------
   Gilt auch im Druck (bewusst ausserhalb von @media screen). Schwarzer Text auf heller Tonflaeche:
   Blockade mit dunkelroter Kante, Hinweis mit dunkler Bernsteinkante, "nicht pruefbar" zurueckgenommen. */
.vp-hinweise{ display:flex; flex-direction:column; gap:8px; margin:0 0 var(--spacing-md); }
.vp-hinweis{ padding:10px 14px; border-radius:var(--r-sm); border:1px solid var(--lm-border-strong); border-left-width:4px;
  background:var(--lm-surface); color:#111; font-size:var(--font-size-sm); line-height:1.5; }
.vp-hinweis .vp-zusatz{ margin-top:4px; }
.vp-hinweis .vp-quelle{ color:#4a4d50; }
.vp-blockade{ border-left-color:var(--lm-red-dark); background:var(--lm-red-soft); }
.vp-warnung{ border-left-color:#8a5a00; background:#fdf3d7; }
.vp-offen{ border-left-color:var(--lm-text-muted); background:var(--lm-surface-muted); color:#333; }

/* ---------- AP6 (10.10.2026): Angebote vor den Formaten, Treiber, Rückmeldung der Fachkraft ----------
   Gilt auch im Druck. Helle Tonflächen aus der Palette, kein reines Weiß. */
.rm-angebote{ margin:0 0 var(--spacing-md); }
.rm-abschnitt{ margin:0 0 4px; font-size:var(--font-size-md); font-weight:700; color:var(--lm-text); }
.rm-angebote-raster{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--spacing-md); margin-top:var(--spacing-sm); }
.rm-angebot{ padding:var(--spacing-md); background:var(--lm-surface); border:1px solid var(--lm-border-strong); border-left-width:4px;
  border-radius:var(--r-sm); color:#111; font-size:var(--font-size-sm); line-height:1.5; }
.rm-angebot[data-stufe="rot"]{ border-left-color:var(--lm-red-dark); background:var(--lm-red-soft); }
.rm-angebot[data-stufe="gelb"]{ border-left-color:#8a5a00; background:#fdf3d7; }
.rm-angebot[data-stufe="hinweis"]{ border-left-color:var(--lm-text-muted); }
.rm-angebot-kopf{ font-weight:700; margin-bottom:4px; }
.rm-angebot p{ margin:0 0 4px; }
.rm-ordnung{ margin:0 0 var(--spacing-md); padding:10px 14px; border-radius:var(--r-sm); border:1px solid var(--lm-border-strong);
  background:var(--lm-surface-muted); color:#111; font-size:var(--font-size-sm); line-height:1.5; }
.rm-treiber{ margin-top:var(--spacing-sm); padding-top:var(--spacing-xs); border-top:1px solid var(--lm-border); font-size:var(--font-size-sm); color:#111; }
.rm-treiber-titel{ font-weight:700; margin-bottom:2px; }
.rm-treiber-liste{ margin:0; padding-left:18px; }
.rm-treiber-liste li{ margin:2px 0; line-height:1.45; }
.rm-treiber-meta{ color:#4a4d50; }
.rm-treiber-meta.rm-unbestaetigt{ color:#6b4300; font-weight:600; }
.rm-angebot-grundlage{ color:#4a4d50; font-size:.9rem; }
.rm-angebot-grundlage.rm-unbestaetigt{ color:#6b4300; font-weight:600; }
.rm-rueckmeldung{ margin-top:var(--spacing-sm); padding:8px 10px; border-radius:var(--r-sm); border:1px dashed var(--lm-border-strong);
  background:var(--lm-surface-muted); color:#111; font-size:var(--font-size-sm); line-height:1.45; }
.rm-rueckmeldung-titel{ font-weight:700; margin-bottom:4px; }
.rm-knoepfe{ display:flex; flex-wrap:wrap; gap:6px; }
.rm-knopf{ padding:4px 12px; border:1px solid var(--lm-border-strong); border-radius:var(--pill); background:var(--lm-surface);
  color:#111; font:inherit; cursor:pointer; }
.rm-knopf:disabled{ opacity:.55; cursor:default; }
.rm-knopf.rm-gewaehlt{ border-color:var(--lm-red-dark); font-weight:700; }
.rm-formular{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.rm-formular label{ font-weight:600; }
.rm-formular select, .rm-formular textarea{ width:100%; font:inherit; color:#111; background:var(--lm-surface);
  border:1px solid var(--lm-border-strong); border-radius:var(--r-sm); padding:6px 8px; }
.rm-status{ margin-top:6px; font-weight:600; color:#1d5a2a; }
.rm-fehler{ margin-top:6px; font-weight:600; color:var(--lm-red-dark); }