/**
 * ═══════════════════════════════════════════════════════════════════════════
 * SCRIPTORIUM - Global Theme System (Extended)
 * ═══════════════════════════════════════════════════════════════════════════
 * @file styles/styles.css
 * @version SCRIPTORIUM v1.2.0
 * @author Markus
 * @date 2025-02-02
 * 
 * @description
 * Erweitertes Theme-System mit vollständigem Variablen-Set.
 * Vorbereitet für Theme-Switching (SCRIPTORIUM ↔ MYTHOSKOP).
 * 
 * CHANGES v1.2.0:
 * - NEU: Footer 3-spaltig (footer-left, footer-center, footer-right)
 * - NEU: Copyright-Bereich im Footer
 * 
 * CHANGES v1.1.0:
 * - NEU: Splash-Screen Buttons mit abgerundeten Ecken (--radius-xl)
 * - NEU: Splash-Button Container für mehrere Buttons
 * - NEU: Hover-Effekte mit Scale und Glow
 * - NEU: Sekundärer Button-Style für Splash-Screen
 * 
 * CHANGES v1.0.1:
 * - FIX: .btn-system Style angepasst (gleicher Style wie .btn-persistence)
 */

/* ═══════════════════════════════════════════════════════════════════════ */
/* RESET & GRUNDLAGEN                                                      */
/* ═══════════════════════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* THEME: SCRIPTORIUM (Default)                                            */
/* ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ───────────────────────────────────────────────────────────────────────
       BACKGROUNDS - Hierarchie von dunkel nach hell
       ─────────────────────────────────────────────────────────────────────── */
    --color-bg-primary: #1a1a1a;        /* Haupthintergrund */
    --color-bg-secondary: #2d2d2d;      /* Cards, Panels */
    --color-bg-tertiary: #3d3d3d;       /* Inputs, Hover-States */
    --color-bg-quaternary: #4a4a4a;     /* Active States */
    
    --color-bg-hover: #3b3b3b;          /* Hover-Effekte */
    --color-bg-active: #454545;         /* Click/Active States */
    --color-bg-disabled: #2a2a2a;       /* Disabled Elements */
    
    /* ───────────────────────────────────────────────────────────────────────
       TEXT COLORS - Hierarchie für Lesbarkeit
       ─────────────────────────────────────────────────────────────────────── */
    --color-text-primary: #ffffff;      /* Haupttext */
    --color-text-secondary: #d1d5db;    /* Sekundärtext */
    --color-text-tertiary: #9ca3af;     /* Tertiärtext */
    --color-text-quaternary: #6b7280;   /* Placeholder, Disabled */
    --color-text-muted: #a0a0a0;        /* Subtitles */
    --color-text-dim: #808080;          /* Sehr dezenter Text */
    
    /* ───────────────────────────────────────────────────────────────────────
       BRAND COLORS - SCRIPTORIUM Identität
       ─────────────────────────────────────────────────────────────────────── */
    --color-primary: #d4af37;           /* Gold - Hauptfarbe */
    --color-primary-dark: #b8941f;      /* Gold dunkel */
    --color-primary-light: #e8c76a;     /* Gold hell */
    --color-primary-alpha: rgba(212, 175, 55, 0.15);  /* Gold transparent */
    --color-text-on-primary: #1a1a1a;   /* Text auf Primary-Bg (dunkel auf Gold) */

    --color-secondary: #8b4513;         /* Bronze */
    --color-secondary-dark: #654321;    /* Bronze dunkel */
    --color-secondary-light: #a0522d;   /* Bronze hell */
    
    --color-accent: #ff6b35;            /* Schmiedefeuer */
    --color-accent-dark: #e55a25;       /* Feuer dunkel */
    --color-accent-light: #ff8555;      /* Feuer hell */
    
    /* ───────────────────────────────────────────────────────────────────────
       SEMANTIC COLORS - Status & Feedback
       ─────────────────────────────────────────────────────────────────────── */
    --color-success: #22c55e;           /* Erfolgsmeldungen */
    --color-success-dark: #16a34a;
    --color-success-light: #4ade80;
    --color-success-alpha: rgba(34, 197, 94, 0.15);
    
    --color-warning: #f59e0b;           /* Warnungen */
    --color-warning-dark: #d97706;
    --color-warning-light: #fbbf24;
    --color-warning-alpha: rgba(245, 158, 11, 0.15);
    
    --color-error: #ef4444;             /* Fehler */
    --color-error-dark: #dc2626;
    --color-error-light: #f87171;
    --color-error-alpha: rgba(239, 68, 68, 0.15);
    
    --color-info: #3b82f6;              /* Informationen */
    --color-info-dark: #2563eb;
    --color-info-light: #60a5fa;
    --color-info-alpha: rgba(59, 130, 246, 0.15);
    
    /* ───────────────────────────────────────────────────────────────────────
       BORDERS - Verschiedene Stärken
       ─────────────────────────────────────────────────────────────────────── */
    --color-border-primary: #3b3b3b;    /* Standard Border */
    --color-border-secondary: #4b5563;  /* Stärkerer Border */
    --color-border-tertiary: #2a2a2a;   /* Dezenter Border */
    --color-border-focus: #3b82f6;      /* Focus State */
    
    /* ───────────────────────────────────────────────────────────────────────
       SHADOWS - Tiefe & Elevation
       ─────────────────────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.4);
    
    /* ───────────────────────────────────────────────────────────────────────
       SEITENRAHMEN — Masse des Bauplans (widgets/seitenrahmen/bauplan.js).
       Der Theme-Manager setzt sie je Theme; hier steht nur die Vorgabe für
       den Erstbesuch. Der Bauplan-Wächter hält beide gleich.
       ─────────────────────────────────────────────────────────────────────── */
    --rahmen-titel-hoehe: 56px;
    --rahmen-register-hoehe: 44px;
    --rahmen-leiste-hoehe: 48px;
    --rahmen-knopf-hoehe: 30px;
    --rahmen-knopf-abstand: 1px;
    --rahmen-gruppe-abstand: 8px;
    --rahmen-suche-breite: 180px;
    
    /* ───────────────────────────────────────────────────────────────────────
       SPACING - Konsistente Abstände
       ─────────────────────────────────────────────────────────────────────── */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */
    --spacing-2xl: 3rem;      /* 48px */
    --spacing-3xl: 4rem;      /* 64px */
    
    /* ───────────────────────────────────────────────────────────────────────
       TYPOGRAPHY - Schriften & Größen
       ─────────────────────────────────────────────────────────────────────── */
    /* ═══════════════════════════════════════════════════════════════════
       SCHRIFTFAMILIEN — EIN Namenssystem
       ═══════════════════════════════════════════════════════════════════
       Bis 2026-07-31 gab es ZWEI: --font-primary/--font-secondary/--font-mono
       hier, und --font-family-base/--font-family-mono im Theme-Master. Beide
       waren in Gebrauch (75 gegen 70 Fundstellen) und meinten dasselbe.
       Kanonisch sind jetzt die beschreibenden Namen; sie stehen HIER, damit
       sie auch ohne geladenen Theme-Manager aufgelöst werden, und der
       Theme-Master überschreibt sie beim Themenwechsel.
       --font-secondary hatte NULL Fundstellen und ist ersatzlos entfallen. */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Zurück auf den Stapel von vor dem Umbau (Entscheid Markus, 2026-07-31):
       'SF Mono' und Menlo stehen NICHT mehr davor. Auf einem Mac ohne Consolas
       greift damit wieder Monaco — dieselbe Schrift wie vor der Vereinheitlichung. */
    --font-family-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
    
    /* ═══════════════════════════════════════════════════════════════════
       SCHRIFTGRÖSSEN — die Leiter für den BILDSCHIRM
       Konzept: docs/TYPOGRAFIE-KONZEPT.md
       ═══════════════════════════════════════════════════════════════════

       Umgestellt 2026-07-31. Vorher lag hier eine klassische Web-Skala mit
       16px-Grundtext (xs 12 · sm 14 · base 16 · lg 18 · xl 20 · 2xl 24 ·
       3xl 30 · 4xl 36). Sie wurde in 189 von 9790 Fundstellen benutzt —
       1.9 %. Der Grund: eine dichte Verwaltungsoberfläche arbeitet nicht mit
       16px Grundtext. Gemessen wurde stattdessen, was die beiden Referenzen
       wirklich tun (Münz-Schmiede 924 Deklarationen, Projektwerk 2125):
       der Grundtext liegt bei 12px, und die Münz-Schmiede folgt bereits
       exakt diesem 16px-Raster in Ein-Pixel-Schritten.

       Die 189 bestehenden Fundstellen wurden dabei NICHT stehengelassen,
       sondern auf den Token umgeschrieben, der ihren bisherigen PIXELWERT
       behält (alt xs→neu base, alt sm→neu lg, alt base→neu xl, alt lg→neu
       2xl, alt xl→neu 3xl). Das Aussehen bleibt überall gleich; geändert hat
       sich nur, welcher Name welchen Wert trägt.

       --font-size-md war vorher NICHT definiert, wurde aber 6× benutzt —
       diese sechs Regeln waren wirkungslos. Die Stufe gibt es jetzt.

       REGEL: kein Rückfall-Parameter. `var(--font-size-base)`, niemals
       `var(--font-size-base)`. Eine fehlende Variable SOLL sichtbar
       scheitern (gleiche Begründung wie widgets/_shared/module-layout.css:14-16).
       28 solcher toten Rückfälle wurden bei der Umstellung entfernt. */
    --font-size-xs: 0.625rem;      /* 10px — Zähler-Badges, Marginalien */
    --font-size-sm: 0.6875rem;     /* 11px — Meta-Zeilen, Versal-Labels */
    --font-size-base: 0.75rem;     /* 12px — GRUNDTEXT der Oberfläche */
    --font-size-md: 0.8125rem;     /* 13px — dichter Fliesstext, Kartentitel */
    --font-size-lg: 0.875rem;      /* 14px — Formularwerte, Spaltenköpfe */
    --font-size-xl: 1rem;          /* 16px — Abschnittstitel */
    --font-size-2xl: 1.125rem;     /* 18px — Dialogtitel */
    --font-size-3xl: 1.25rem;      /* 20px — Modultitel (--module-title-size) */
    --font-size-4xl: 1.5rem;       /* 24px — Seitentitel */

    /* SCHAUSTUFEN. Nach der Messung ergänzt (2026-07-31): oberhalb von 24px
       standen im Portal rund 220 Werte, die weiter als 1px von jeder Stufe
       entfernt lagen — Ballungen bei 22, 28, 40 und 64px. Sie zu quetschen
       hätte 2 bis 4 Pixel verschoben, also sichtbar. Hier bekommen sie Stufen.
       Bewusst mit Rollennamen statt weiterer T-Shirt-Grössen: das sind
       Schauwerte (Kennzahl, Cockpit, Titelseite), keine Textgrössen. */
    --font-size-display-xs: 1.375rem;  /* 22px */
    --font-size-display-sm: 1.75rem;   /* 28px */
    --font-size-display:    2rem;      /* 32px — Kennzahl */
    --font-size-display-md: 2.5rem;    /* 40px */
    --font-size-display-lg: 3rem;      /* 48px — Cockpit-Kennzahl */
    --font-size-display-xl: 4rem;      /* 64px — Titelseite */
    
    --font-weight-normal: 400;
    /* `light` ergänzt 2026-07-31: 300 stand dreimal im Bestand
       (mod-administration) und liess sich weder auf 400 ziehen (sichtbar
       schwerer) noch begründet streichen. Vier Stufen bleiben die Regel —
       diese fünfte ist die Ausnahme für bewusst leichte Schrift. */
    --font-weight-light: 300;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ZEILENHÖHEN. `tight` war 1.25 und hatte NULL Fundstellen; gemessen ist
       der häufigste Wert im Portal glatt 1 (Projektwerk 57×, Münz 41×) — für
       einzeilige Dinge: Zahlen, Badges, Reiter. `ui` ist neu und fasst den
       Haufen 1.3/1.35/1.4 zusammen (Projektwerk 58×, Münz 28×), der heute in
       vier Abstufungen zerfällt, die niemand unterscheiden kann.
       `normal` (1.5) und `relaxed` (1.75) bleiben unverändert — sie haben je
       zwei Fundstellen und tragen den Lesetext. */
    --line-height-tight: 1;
    --line-height-ui: 1.35;
    --line-height-normal: 1.5;
    /* `text` neu (2026-07-31): 1.6 hatte 107 Fundstellen und lag zwischen
       normal (1.5) und relaxed (1.75) — beides mehr als 0.1 entfernt. Lesetext
       ist eine eigene Rolle, keine Rundungsfrage. */
    --line-height-text: 1.6;
    --line-height-relaxed: 1.75;

    /* ═══════════════════════════════════════════════════════════════════
       LAUFWEITE — neu 2026-07-31
       ═══════════════════════════════════════════════════════════════════
       Vorher gab es dafür KEINEN Token und 818 harte Werte in 50 Varianten.
       Die Hälfte davon stand in `px` — das ist der Sachfehler: Laufweite in px
       skaliert NICHT mit der Schriftgrösse, `em` schon. Deshalb sind alle
       Stufen in em, und die px-Werte wurden bei der Migration umgerechnet.
       Versalien brauchen zwingend Laufweite, sonst werden sie zur Mauer —
       dafür ist `caps` da. */
    --letter-spacing-tight: -0.01em;   /* grosse Kennzahlen, Schauwerte */
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.03em;     /* Modultitel, betonte Zeilen */
    --letter-spacing-caps: 0.05em;     /* GROSSBUCHSTABEN-Labels */
    
    /* ───────────────────────────────────────────────────────────────────────
       SIZES - Layout-Größen
       ─────────────────────────────────────────────────────────────────────── */
    --sidebar-width: 280px;
    --sidebar-collapsed: 60px;
    --header-height: 64px;
    --footer-height: 40px;
    --content-max-width: 1200px;
    
    /* ───────────────────────────────────────────────────────────────────────
       TRANSITIONS - Animationen
       ─────────────────────────────────────────────────────────────────────── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-slower: 0.5s ease;
    
    /* ───────────────────────────────────────────────────────────────────────
       BORDER RADIUS - Rundungen
       ─────────────────────────────────────────────────────────────────────── */
    --radius-sm: 0.25rem;     /* 4px  - Tags, Badges, Compact-Elements */
    --radius-md: 0.5rem;      /* 8px  - Inputs, Buttons (sichtbar gerundet) */
    --radius-lg: 0.625rem;    /* 10px - Cards, Modal-Boxes */
    --radius-xl: 0.75rem;     /* 12px - Large Cards, Sections */
    --radius-2xl: 1rem;       /* 16px - Hero-Elemente */
    --radius-full: 9999px;    /* Vollständig rund */
    
    /* ───────────────────────────────────────────────────────────────────────
       Z-INDEX - Portal-weites Layering-System
       v3.1.0: Portal-weites z-index System
       ─────────────────────────────────────────────────────────────────────── */
    --z-content: 1;
    --z-sticky: 100;
    --z-chrome: 200;
    --z-panel: 300;
    --z-dropdown: 400;
    --z-tooltip: 500;
    --z-drag: 550;
    --z-overlay: 600;
    --z-modal: 700;
    --z-notification: 800;
    --z-splash: 900;
    --z-max: 10000;

    /* ───────────────────────────────────────────────────────────────────────
       ALT-NAMEN (Aliase) — 30.09.2026
       Dieselbe Tabelle wie ThemeManagerLogic.applyTheme(). Nur dort wurden sie
       gesetzt — und applyTheme() läuft beim normalen Laden NICHT: die Early
       Theme Injection in index.php setzt Master und Theme schon vorher, und
       _applyThemeIfNeeded() springt dann heraus. Ohne diese Zeilen waren die
       Namen bis zu einem Theme-Wechsel leer: 331 Stellen in 44 Dateien ohne
       Rand, Farbe oder Grund. Als var() verweisen sie auf ihr Ziel, lösen also
       gegen die Werte des aktiven Themes auf. Neuer Code nennt das Ziel direkt.
       ─────────────────────────────────────────────────────────────────────── */
    --color-border: var(--color-border-primary);
    --color-text: var(--color-text-primary);
    --color-bg-dark: var(--color-bg-primary);
    --color-bg-medium: var(--color-bg-secondary);
    --color-bg-light: var(--color-bg-tertiary);
    --color-bg-lighter: var(--color-bg-quaternary);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* THEME: MYTHOSKOP (Prepared for future)                                  */
/* ═══════════════════════════════════════════════════════════════════════ */

[data-theme="mythoskop"] {
    /* Wird später implementiert - Helles Theme mit anderen Farben */
    /* Placeholder für Theme Manager */
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* BASE STYLES                                                              */
/* ═══════════════════════════════════════════════════════════════════════ */

html {
    font-size: var(--font-size-xl);
}

body {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════════════════
   GRUNDTYPOGRAFIE — bewusst `html body` statt `body`
   ═══════════════════════════════════════════════════════════════════════

   WARUM DIE HÖHERE SPEZIFITÄT (2026-08-01, nach einem Fehler, der Runden
   gekostet hat):

   styles.css wird als ERSTE Datei geladen. Im angemeldeten Portal kommen
   danach über 80 weitere Stylesheets dazu — Module, Untermodule, Widgets,
   Apps. Jede einzelne davon konnte mit einer schlichten `body { font-family:
   … }`-Regel die Grundschrift des Portals überschreiben: gleiche Spezifität,
   spätere Position, also gewinnt sie. Ist ihr Wert ungültig (etwa eine
   Variable, die es in diesem Dokument nicht gibt), verfällt die Deklaration
   und der Browser setzt seine Voreinstellung ein — eine Serifenschrift.

   Symptom war genau das: abgemeldet (4 Stylesheets) stimmte die Schrift,
   angemeldet (92 Stylesheets) stand das ganze Portal in Times. Und weil die
   Module verzögert laden, mal so und mal so.

   `html body` hat Spezifität (0,0,2) und schlägt jedes spätere `body`
   (0,0,1). KEIN !important: wer hier bewusst abweichen will, muss ebenfalls
   spezifischer werden — das ist eine Entscheidung, kein Versehen.

   Wer eine Datei sucht, die das versucht:
     document.querySelectorAll('style,link[rel=stylesheet]') durchgehen und
     jede Regel melden, deren selectorText auf body matcht.
   ═══════════════════════════════════════════════════════════════════════ */

html body {
    /* !important — bewusst, und hier ausnahmsweise richtig.
       `html body` schlaegt jede schlichte body-Regel, aber nicht `body.x`,
       nicht `#app body` und keinen Inline-Style. Die Quelle der stoerenden
       Regel ist unbekannt (sie liegt nicht in dieser Arbeitskopie), also
       muss die Grundschrift des Portals unschlagbar sein statt nur meistens
       staerker. Ein Modul, das bewusst abweichen will, setzt die Schrift auf
       SEINEM Container — nicht auf body. */
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-xl) !important;
    line-height: var(--line-height-normal) !important;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* UTILITY CLASSES                                                          */
/* ═══════════════════════════════════════════════════════════════════════ */

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-muted { color: var(--color-text-muted); }

.bg-primary { background: var(--color-bg-primary); }
.bg-secondary { background: var(--color-bg-secondary); }
.bg-tertiary { background: var(--color-bg-tertiary); }

.border-primary { border-color: var(--color-border-primary); }
.border-secondary { border-color: var(--color-border-secondary); }

/* ═══════════════════════════════════════════════════════════════════════ */
/* SPLASH SCREEN                                                           */
/* ═══════════════════════════════════════════════════════════════════════ */

.splash-screen {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.splash-screen.active {
    display: flex;
}

.splash-background {
    position: absolute;
    inset: 0;
    background: var(--color-bg-primary);
    opacity: 0.95;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* HEADER - NEUE STRUKTUR (Portal-Architektur v1.0)                        */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Header Layout mit 3 Bereichen */
.portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.header-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Portal-Name */
.portal-name {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0;
}

.portal-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.portal-brand-label {
    display: inline-block;
    white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────────────────────
   WORKSPACE BUTTON - Klickbarer Workspace-Name mit "…"
   ─────────────────────────────────────────────────────────────────────────── */

.workspace-button {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
}

.workspace-button:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
}

.workspace-button:active {
    background: var(--color-bg-quaternary);
}

.workspace-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.workspace-indicator {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    opacity: 0.6;
    transition: opacity var(--transition-base);
}

.workspace-button:hover .workspace-indicator {
    opacity: 1;
    color: var(--color-primary);
}

/* ───────────────────────────────────────────────────────────────────────────
   PERSISTENZ BUTTONS - Undo, Redo, Save
   ─────────────────────────────────────────────────────────────────────────── */

.header-persistence-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-md);
    border-left: 1px solid var(--color-border-tertiary);
    border-right: 1px solid var(--color-border-tertiary);
    margin: 0 var(--spacing-sm);
}

.btn-persistence {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
}

.btn-persistence:hover:not(:disabled) {
    background: var(--color-bg-quaternary);
    border-color: var(--color-primary);
}

.btn-persistence:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-persistence .btn-icon {
    font-size: var(--font-size-2xl);
}

/* Save Button - Pulsieren bei ungespeicherten Änderungen */
.btn-save {
    position: relative;
}

.btn-save.has-changes {
    background: var(--color-error-alpha);
    border-color: var(--color-error);
    animation: pulse-save 1.5s ease-in-out infinite;
}

.btn-save.has-changes:hover {
    background: var(--color-error);
    animation: none;
}

.btn-save.saving {
    background: var(--color-info-alpha);
    border-color: var(--color-info);
    animation: spin-icon 1s linear infinite;
}

/* Save Badge - Anzahl der Änderungen */
.save-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--color-error);
    color: white;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.save-badge.hidden {
    display: none;
}

@keyframes pulse-save {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

@keyframes spin-icon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ───────────────────────────────────────────────────────────────────────────
   SYSTEM BUTTONS - Debug, Help, Settings (v1.0.1 - Gold Hover)
   ─────────────────────────────────────────────────────────────────────────── */

.header-system-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.btn-system {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-system:hover {
    background: var(--color-bg-quaternary);
    border-color: var(--color-primary);
}

.btn-system .btn-icon {
    font-size: var(--font-size-2xl);
}

/* ───────────────────────────────────────────────────────────────────────────
   NAVIGATION - CORE & FEATURE Gruppen
   ─────────────────────────────────────────────────────────────────────────── */

.nav-section {
    list-style: none;
    margin-top: var(--spacing-md);
}

.nav-section-label {
    display: block;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
}

/* Bereichs-Icon in der Sektions-Überschrift (2026-07-20). Nur Sektionen MIT
   Icon werden zur Flex-Zeile — die :has()-Wache lässt alle anderen unberührt.
   Das Icon füllt der Client (fuelleBereichsIcons), bis dahin steht der
   Emoji-Rückfall aus dem Markup. Erweiterbar: ein neuer Bereich braucht nur
   die Sektion + einen bereich.*-Begriff, keine neue Regel. */
.nav-section:has(.nav-section-icon) {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: var(--spacing-xs) var(--spacing-md);
}
.nav-section:has(.nav-section-icon) .nav-section-label {
    display: inline;
    padding: 0;
}
.nav-section-icon {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
}
.nav-section-icon svg { width: 16px; height: 16px; }

/* Raeume auf- und zuklappen (14.10.2026, main.js _navRaeumeAnwenden).
   Die ganze Ueberschrift ist der Schalter; zugeklappt steht rechts die
   Anzahl der Eintraege, dahinter der Pfeil. */
.nav-section[data-raum] {
    cursor: pointer;
    user-select: none;
    border-radius: var(--radius-sm);
}
.nav-section[data-raum]:hover {
    background: var(--color-bg-tertiary);
}
.nav-section[data-raum]:hover .nav-section-label {
    color: var(--color-text-primary);
}
.nav-section[data-raum]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.nav-section-count {
    margin-left: auto;
    min-width: 1.6em;
    padding: 0 0.45em;
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1.6;
    text-align: center;
}
.nav-section-arrow {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
}
.nav-section-count:not([hidden]) + .nav-section-arrow {
    margin-left: 0;
}

/* ── Fokus-Navigation, Phase 2/3 (14.10.2026, main.js «SEITENLEISTE: RAEUME
   UND FOKUS») ─────────────────────────────────────────────────────────────
   Schnellsuche-Knopf, «Mein Fokus», Vorschlag «Anheften?», Kacheln «Alle Apps»
   und der Suchdialog. Knoepfe erben keine Schrift: font: inherit. */
.nav-suche {
    list-style: none;
    padding: var(--spacing-xs) var(--spacing-md);
}
.nav-suche-knopf {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    font: inherit;
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
    color: var(--color-text-muted);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
}
.nav-suche-knopf:hover {
    color: var(--color-text-primary);
    border-color: var(--color-primary);
}
.nav-suche-text {
    flex: 1;
}
.nav-suche-taste {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.nav-fokus-item {
    list-style: none;
}
/* Angeheftet: ein dezenter Strich links, kein Icon */
.nav-fokus-angeheftet > .nav-link {
    border-left-color: var(--color-border-primary);
}
.nav-fokus-item.active > .nav-link {
    border-left-color: var(--color-primary);
}
/* Aktive App im Fokus, deren Untermenue-Eintrag gerade offen ist */
.nav-fokus-item.nav-app-aktiv:not(.active) > .nav-link {
    color: var(--color-primary);
}

.nav-fokus-vorschlag {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    margin: var(--spacing-xs) var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border-primary);
    border-radius: var(--radius-sm);
}
.nav-fokus-vorschlag-text {
    flex: 1 1 100%;
}
.nav-fokus-vorschlag-knopf {
    padding: 2px var(--spacing-sm);
    font: inherit;
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.nav-fokus-vorschlag-knopf:hover {
    color: var(--color-text-primary);
    border-color: var(--color-primary);
}

.nav-alle-apps {
    list-style: none;
    padding: var(--spacing-xs) var(--spacing-md);
}
.nav-alle-apps-knopf {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    font: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-muted);
    background: none;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    cursor: pointer;
}
.nav-alle-apps-knopf:hover,
.nav-alle-apps-knopf[aria-expanded="true"] {
    color: var(--color-text-primary);
    border-color: var(--color-primary);
}
.nav-alle-apps-raster {
    list-style: none;
    padding: 0 var(--spacing-md) var(--spacing-md);
}
.nav-kachel-gruppe {
    margin: var(--spacing-sm) 0 var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
}
.nav-kachel-netz {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-xs);
}
.nav-kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: var(--spacing-xs);
    color: var(--color-text-secondary);
    text-decoration: none;
    background: var(--color-bg-tertiary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}
.nav-kachel:hover {
    color: var(--color-text-primary);
    border-color: var(--color-primary);
}
.nav-kachel-icon {
    font-size: var(--font-size-2xl);
    line-height: 1;
}
.nav-kachel-icon svg { width: 20px; height: 20px; }
.nav-kachel-label {
    max-width: 100%;
    font-size: var(--font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Schnellsuche (Dialog-Inhalt) */
.nav-suche-feld {
    width: 100%;
    padding: var(--spacing-sm);
    font: inherit;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
}
.nav-suche-feld:focus {
    outline: none;
    border-color: var(--color-primary);
}
.nav-suche-liste {
    list-style: none;
    margin: var(--spacing-sm) 0 0;
    padding: 0;
    max-height: 50vh;
    overflow-y: auto;
}
.nav-suche-treffer {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.nav-suche-treffer:hover,
.nav-suche-treffer[aria-selected="true"] {
    background: var(--color-primary-alpha);
    color: var(--color-primary);
}
.nav-suche-label {
    font-size: var(--font-size-md);
}
.nav-suche-zusatz {
    margin-left: auto;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
/* Gruppen der Schnellsuche (24.10.2026): allgemeine Befehle, Befehle der App,
   Apps und Module — die Rollenfarben kommen aus dem Theme (Bauplan). */
.nav-suche-gruppe {
    padding: var(--spacing-sm) var(--spacing-sm) 2px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.nav-suche-gruppe--allgemein { color: var(--befehl-allgemein); }
.nav-suche-gruppe--app { color: var(--befehl-app); }
.nav-suche-leer {
    padding: var(--spacing-sm);
    color: var(--color-text-muted);
}
.nav-suche-hinweis {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.nav-group {
    list-style: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   APP SIDEBAR ITEMS - Aufklappbare App-Menüs oberhalb BETRIEBSWERKSTATT
   ─────────────────────────────────────────────────────────────────────────── */

.nav-app-item {
    list-style: none;
    margin-bottom: 2px;
}

.nav-app-header {
    display: flex;
    align-items: center;
}

.nav-app-header .nav-link {
    flex: 1;
}

.nav-app-toggle {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    font-size: var(--font-size-base);
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s;
    line-height: var(--line-height-tight);
}

.nav-app-toggle:hover {
    opacity: 1;
    color: var(--color-text-primary);
}

.nav-app-submenu {
    list-style: none;
    padding: var(--spacing-xs) 0 var(--spacing-xs) calc(var(--spacing-md) + 1.2rem);
    margin: 0;
    /* 2026-04-18: leicht dunklerer Hintergrund wenn aufgeklappt, damit der
       Submenu-Bereich visuell vom App-Titel abgesetzt ist. */
    background: var(--color-bg-tertiary);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.nav-app-submenu.nav-app-collapsed {
    display: none;
}

.nav-app-subitem {
    list-style: none;
}

.nav-app-subitem .nav-link {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-lg);
    opacity: 0.85;
}

.nav-app-subitem .nav-link:hover {
    opacity: 1;
    background: var(--color-bg-hover);
}

/* ─── Collapsible Sub-Groups (v4.0.0: Core-Module mit Sub-Navigation) ── */

.nav-subgroup-header {
    list-style: none;
    margin-top: 4px;
}

.nav-subgroup-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 3px var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
}

.nav-subgroup-toggle:hover {
    opacity: 1;
    color: var(--color-text-secondary);
}

.nav-subgroup-arrow {
    font-size: var(--font-size-xs);
    width: 10px;
    text-align: center;
}

.nav-subgroup-label {
    flex: 1;
    text-align: left;
}

.nav-subgroup-item .nav-icon {
    font-size: 0.8em;
    width: 16px;
    text-align: center;
}

/* ───────────────────────────────────────────────────────────────────────────
   INFO-PANEL - Slide In/Out Animation
   ─────────────────────────────────────────────────────────────────────────── */

.sidebar-right {
    width: var(--sidebar-width);
    background: var(--color-bg-secondary);
    border-left: 1px solid var(--color-border-primary);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-slow), width var(--transition-slow);
    transform: translateX(0);
}

.sidebar-right.collapsed {
    transform: translateX(100%);
    width: 0;
    border-left: none;
    overflow: hidden;
}

.sidebar-right.sliding-in {
    animation: slideInRight var(--transition-slow) ease forwards;
}

.sidebar-right.sliding-out {
    animation: slideOutRight var(--transition-slow) ease forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Info-Panel Content-Typen */
.info-panel {
    flex: 1;
    padding: var(--spacing-md);
    overflow-y: auto;
}

.info-placeholder {
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
    padding: var(--spacing-xl);
}

.info-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border-tertiary);
}

.info-stat-label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
}

.info-stat-value {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.info-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-xs) 0;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    width: 100%;
    text-align: left;
}

.info-action:hover {
    background: var(--color-bg-quaternary);
    border-color: var(--color-primary);
}

.info-hint {
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-sm) 0;
    background: var(--color-info-alpha);
    border-left: 3px solid var(--color-info);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
}

.info-list {
    margin: var(--spacing-sm) 0;
}

/* ── Druckkennung (core/Druckkennung.js, 29.09.2026) ─────────────────────
   Markus: «Die Druckkennungen können als Formular bleiben, aber in Italic und
   Info-Badge mit Hoover, der den abweichenden Formularnamen erklärt.» Portalweit,
   weil Münz-Schmiede, Aktenschrank-Auswahl und Dialoge dieselbe Auszeichnung
   zeigen. Name und Zeichen brechen nie auseinander. */
.druckkennung {
    white-space: nowrap;
}
.druckkennung__name {
    font-style: italic;
}
.druckkennung__info {
    display: inline-flex;
    align-items: center;
    margin-left: 0.2em;
    vertical-align: -0.1em;
    color: var(--color-text-tertiary);
    cursor: help;
}
.druckkennung__info svg {
    width: 0.95em;
    height: 0.95em;
}

.info-list-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.info-list-items {
    list-style: none;
    padding-left: var(--spacing-md);
}

.info-list-items li {
    padding: var(--spacing-xs) 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
}

.info-list-items li::before {
    content: "•";
    color: var(--color-primary);
    margin-right: var(--spacing-sm);
}

.info-divider {
    height: 1px;
    background: var(--color-border-tertiary);
    margin: var(--spacing-md) 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   WORKSPACE DIALOG (Modal)
   ─────────────────────────────────────────────────────────────────────────── */

.workspace-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
    animation: fadeIn var(--transition-base) ease forwards;
}

.workspace-dialog-overlay.closing {
    animation: fadeOut var(--transition-base) ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.workspace-dialog {
    width: 480px;
    max-height: 80vh;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform var(--transition-base);
}

.workspace-dialog-overlay.active .workspace-dialog {
    transform: scale(1);
}

.workspace-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-primary);
}

.workspace-dialog-header h2 {
    margin: 0;
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
}

.workspace-dialog-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-base);
}

.workspace-dialog-close:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.workspace-dialog-content {
    padding: var(--spacing-lg);
    max-height: 400px;
    overflow-y: auto;
}

.workspace-dialog-current {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary-alpha);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
}

.workspace-dialog-current strong {
    color: var(--color-primary);
}

.workspace-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.workspace-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
}

.workspace-item:hover {
    background: var(--color-bg-quaternary);
    border-color: var(--color-border-secondary);
}

.workspace-item.active {
    border-color: var(--color-primary);
    background: var(--color-primary-alpha);
}

.workspace-item-icon {
    font-size: var(--font-size-4xl);
}

.workspace-item-info {
    flex: 1;
}

.workspace-item-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.workspace-item-meta {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.workspace-item-badge {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-success);
    color: white;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
}

.workspace-dialog-footer {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border-top: 1px solid var(--color-border-primary);
}

.workspace-dialog-footer button {
    flex: 1;
}

/* Workspace Current Box */
.workspace-current {
    padding: var(--spacing-md);
    background: var(--color-primary-alpha);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
}

.workspace-current-label {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    margin-bottom: var(--spacing-xs);
}

.workspace-current-name {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.workspace-current-path {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    font-family: var(--font-family-mono);
}

/* Workspace Actions */
.workspace-actions {
    text-align: center;
}

.workspace-actions .btn {
    margin-bottom: var(--spacing-md);
}

.workspace-hint {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* NAVIGATION - Placeholder & Module-Items (Portal-Architektur v1.0)       */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Navigation Placeholder (wenn keine Module in einer Gruppe) */
.nav-placeholder {
    padding: var(--spacing-sm) var(--spacing-md);
}

.nav-placeholder-text {
    font-size: var(--font-size-base);
    color: var(--color-text-dim);
    font-style: italic;
}

/* Module-Items mit Type-Attribut */
.nav-item.module-item {
    position: relative;
}

.nav-item.module-item[data-module-type="core"] .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.nav-item.module-item[data-module-type="core"]:hover .nav-link::before,
.nav-item.module-item[data-module-type="core"].active .nav-link::before {
    opacity: 1;
}

/* Nav-Group Container */
.nav-group {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

/* Nav-Separator */
.nav-separator {
    height: 1px;
    background: var(--color-border-tertiary);
    margin: var(--spacing-sm) var(--spacing-md);
    list-style: none;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* INFO-PANEL - Zusätzliche Hint-Varianten                                 */
/* ═══════════════════════════════════════════════════════════════════════ */

.info-hint-info {
    background: var(--color-info-alpha);
    border-left-color: var(--color-info);
}

.info-hint-warning {
    background: var(--color-warning-alpha);
    border-left-color: var(--color-warning);
}

.info-hint-success {
    background: var(--color-success-alpha);
    border-left-color: var(--color-success);
}

.info-hint-error {
    background: var(--color-error-alpha);
    border-left-color: var(--color-error);
}

.info-hint-icon {
    margin-right: var(--spacing-xs);
}

.info-hint-text {
    flex: 1;
}

/* Info-Stat mit Icon */
.info-stat-icon {
    margin-right: var(--spacing-sm);
    font-size: var(--font-size-2xl);
}

/* Info-Action Icon & Label */
.info-action-icon {
    font-size: var(--font-size-2xl);
}

.info-action-label {
    flex: 1;
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
}

.info-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.info-action:disabled:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
}

/* Info-HTML Container */
.info-html {
    padding: var(--spacing-sm) 0;
}

/* Info-List UL (korrigiert) */
.info-list ul {
    list-style: none;
    padding-left: var(--spacing-md);
    margin: 0;
}

.info-list ul li {
    padding: var(--spacing-xs) 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
}

.info-list ul li::before {
    content: "•";
    color: var(--color-primary);
    margin-right: var(--spacing-sm);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* SIDEBAR HEADER                                                          */
/* ═══════════════════════════════════════════════════════════════════════ */

.sidebar-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-tertiary);
}

.sidebar-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* PORTAL CONTAINER - 3-Spalten Layout                                     */
/* ═══════════════════════════════════════════════════════════════════════ */

.portal-container {
    display: flex;
    height: calc(100vh - var(--header-height) - var(--footer-height));
    overflow: hidden;
}

/* Linke Sidebar */
.sidebar-left {
    width: var(--sidebar-width);
    background: var(--color-bg-secondary);
    border-right: 1px solid var(--color-border-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Content-Bereich */
.content-main {
    flex: 1;
    overflow: hidden;
    background: var(--color-bg-primary);
}

#content-area {
    padding: var(--spacing-lg);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* v2.1.0: Module mit eigenem Shell-Layout — Padding entfernen fuer randlose Integration.
   .module-shell ist der neue generische Hook (Module-Layout-Konzept, widgets/_shared/
   module-layout.css). Alte Modul-spezifische Klassen (.sw-shell, .doc-reader) bleiben
   waehrend der Migrationsphase als Sicherheitsnetz erhalten. */
#content-area:has(.module-shell),
#content-area:has(.sw-shell),
#content-area:has(.doc-reader) {
    padding: 0 !important;
    overflow: hidden;
}

/* v2.5.0: Denkwerk Flex-Overflow-Fix — verhindert dass Inhalte rechts abgeschnitten werden */
.doc-reader { overflow: hidden; min-height: 0; }
.doc-reader .dr-main { min-width: 0; min-height: 0; }
.doc-reader .dr-content { min-width: 0; }
.doc-reader .dr-reading-area { min-width: 0; overflow-x: hidden; }
.doc-reader .dr-markdown-body { overflow-x: hidden; width: 100%; }
/* v2.5.1: Chapter-Actions immer sichtbar */
.doc-reader .dr-chapter-actions { opacity: 1 !important; }

/* Module-Content Scrollbar (dezent) */
#content-area ::-webkit-scrollbar { width: 6px; }
#content-area ::-webkit-scrollbar-track { background: transparent; }
#content-area ::-webkit-scrollbar-thumb { background: var(--color-border-primary); border-radius: 3px; }
#content-area ::-webkit-scrollbar-thumb:hover { background: var(--color-text-dim); }

/* ═══════════════════════════════════════════════════════════════════════ */
/* NAVIGATION STYLES                                                        */
/* ═══════════════════════════════════════════════════════════════════════ */

.main-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm) 0;
}

.nav-tree {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item {
    list-style: none;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all var(--transition-base);
    border-left: 3px solid transparent;
}

.nav-link:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* Nur der eigene Link: das Untermenue einer aktiven App ist offen, seine
   Eintraege duerfen nicht mitleuchten (14.10.2026). */
.nav-item.active > .nav-link,
.nav-item.active > .nav-app-header > .nav-link {
    background: var(--color-primary-alpha);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}

/* App, in deren Untermenue die aktive Seite liegt */
.nav-app-aktiv:not(.active) > .nav-app-header > .nav-link {
    color: var(--color-primary);
}

.nav-icon {
    font-size: var(--font-size-3xl);
    width: 24px;
    text-align: center;
}

.nav-label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* FOOTER - 3-spaltig (v1.2.0)                                             */
/* ═══════════════════════════════════════════════════════════════════════ */

.portal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--footer-height);
    padding: 0 var(--spacing-lg);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-primary);
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
}

.footer-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    text-align: left;
}

.footer-separator {
    color: var(--color-text-dim);
    opacity: 0.5;
}

/* Eine Zeile: Denkwerk-Zähler (Block) und KI-Ampel (Knopf) stehen nebeneinander.
   Ohne flex rutschte die Ampel unter die Zähler, und beides ragte aus der 40-px-Leiste. */
.footer-center {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    height: 100%;
    text-align: center;
}

.footer-right {
    flex: 1;
    text-align: right;
}

#footer-copyright {
    color: var(--color-text-dim);
    font-size: var(--font-size-base);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* BUTTONS - Allgemeine Styles                                              */
/* ═══════════════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-bg-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-secondary {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-border-primary);
}

.btn-secondary:hover {
    background: var(--color-bg-quaternary);
    border-color: var(--color-border-secondary);
}

.btn-icon-only {
    width: 40px;
    height: 40px;
    padding: 0;
}

.btn-text-only {
    width: auto;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--spacing-sm);
    white-space: nowrap;
}

.btn-icon-text {
    width: auto;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--spacing-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    white-space: nowrap;
}

.btn-icon {
    font-size: var(--font-size-3xl);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* UTILITY - Hidden                                                         */
/* ═══════════════════════════════════════════════════════════════════════ */

.hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* MAIN PORTAL                                                              */
/* ═══════════════════════════════════════════════════════════════════════ */

.main-portal {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.main-portal.hidden {
    display: none;
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* SPLASH SCREEN - Vollständige Styles (v1.1.0 - Abgerundete Buttons)      */
/* ═══════════════════════════════════════════════════════════════════════ */

.splash-screen {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-primary);
}

.splash-screen.active {
    display: flex;
}

.splash-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, #252525 100%);
    z-index: 0;
}

.splash-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
}

.splash-logo {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.splash-signet {
    width: 170px;
    height: 170px;
    margin: 0 auto 2px;
    display: grid;
    place-items: center;
}

.splash-signet svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.splash-signet .signet-stop-secondary {
    stop-color: color-mix(in srgb, var(--color-secondary) 72%, #001a49 28%);
}

.splash-signet .signet-stop-primary-soft {
    stop-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.splash-signet .signet-stop-secondary-soft {
    stop-color: color-mix(in srgb, var(--color-secondary) 58%, transparent);
}

.splash-signet .signet-stop-primary {
    stop-color: var(--color-primary);
}

.splash-signet .signet-stop-accent {
    stop-color: color-mix(in srgb, var(--color-accent) 70%, var(--color-primary-light) 30%);
}

.splash-signet .signet-halo {
    fill: color-mix(in srgb, var(--color-primary) 18%, transparent);
    opacity: 0.7;
    animation: splashSignetHaloPulse 5s ease-in-out infinite;
}

.splash-signet .signet-layer {
    transform-origin: 60px 60px;
    animation: splashSignetLayerFloat 4.2s ease-in-out infinite;
}

.splash-signet .signet-layer-a { animation-delay: 0s; }
.splash-signet .signet-layer-b { animation-delay: 0.4s; }
.splash-signet .signet-layer-c { animation-delay: 0.8s; }

.splash-signet .signet-outline {
    fill: none;
    stroke: color-mix(in srgb, var(--color-secondary) 65%, #0b2f66 35%);
    stroke-width: 1.4;
    opacity: 0.9;
}

.splash-signet .signet-eye {
    fill: color-mix(in srgb, var(--color-accent) 70%, #ffffff 30%);
    animation: splashSignetEyePulse 3.2s ease-in-out infinite;
}

.splash-signet .signet-face-curve {
    fill: none;
    stroke: color-mix(in srgb, var(--color-secondary) 58%, #0f3b7f 42%);
    stroke-width: 0.9;
    opacity: 0.72;
}

.splash-signet .signet-connection {
    stroke: color-mix(in srgb, var(--color-primary) 70%, var(--color-secondary) 30%);
    stroke-width: 0.8;
    stroke-linecap: round;
    opacity: 0.52;
    animation: splashSignetConnectionPulse 4.8s ease-in-out infinite;
}

.splash-signet .signet-node {
    fill: color-mix(in srgb, var(--color-primary-light) 72%, var(--color-primary) 28%);
    opacity: 0.88;
    animation: splashSignetNodePulse 3.4s ease-in-out infinite;
}

.splash-signet .signet-node-lg {
    animation-duration: 2.6s;
}

.splash-signet .signet-node-anchor {
    fill: color-mix(in srgb, var(--color-primary) 62%, #ffffff 38%);
}

.splash-signet .signet-brand-element {
    display: none;
}

.splash-signet[data-brand="scriptorium"] .signet-brand-element--scriptorium {
    display: block;
}

.splash-signet[data-brand="scriptorium"] .signet-brand-element--scriptorium path {
    fill: none;
    stroke: color-mix(in srgb, var(--color-primary) 78%, var(--color-secondary) 22%);
    stroke-width: 1.4;
    stroke-linecap: round;
    opacity: 0.86;
}

.splash-signet[data-brand="mythoskop"] .signet-brand-element--mythoskop {
    display: block;
}

.splash-signet[data-brand="mythoskop"] .signet-brand-element--mythoskop circle {
    fill: none;
    stroke: color-mix(in srgb, var(--color-primary-light) 68%, var(--color-primary) 32%);
    stroke-width: 0.9;
    opacity: 0.8;
    animation: splashSignetSpin 10s linear infinite;
    transform-origin: 69px 45px;
}

.splash-signet[data-brand="prismarium"] .signet-brand-element--prismarium {
    display: block;
}

.splash-signet[data-brand="prismarium"] .signet-brand-element--prismarium polygon {
    fill: color-mix(in srgb, var(--color-primary-light) 52%, transparent);
    stroke: color-mix(in srgb, var(--color-primary) 70%, var(--color-secondary) 30%);
    stroke-width: 0.8;
    opacity: 0.9;
}

.splash-signet[data-brand="domicilium"] .signet-brand-element--domicilium {
    display: block;
}

.splash-signet[data-brand="domicilium"] .signet-brand-element--domicilium rect,
.splash-signet[data-brand="domicilium"] .signet-brand-element--domicilium line {
    fill: none;
    stroke: color-mix(in srgb, var(--color-primary) 66%, var(--color-secondary) 34%);
    stroke-width: 0.9;
    opacity: 0.86;
}

@keyframes splashSignetLayerFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(0.8px, -1.2px); }
}

@keyframes splashSignetNodePulse {
    0%, 100% { opacity: 0.78; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.18); }
}

@keyframes splashSignetHaloPulse {
    0%, 100% { transform: scale(0.96); opacity: 0.48; }
    50% { transform: scale(1.03); opacity: 0.82; }
}

@keyframes splashSignetEyePulse {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 1; }
}

@keyframes splashSignetConnectionPulse {
    0%, 100% { opacity: 0.34; }
    50% { opacity: 0.72; }
}

@keyframes splashSignetSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.portal-signet {
    --portal-signet-size: 30px;
    width: var(--portal-signet-size);
    height: var(--portal-signet-size);
    margin: 0;
    flex: 0 0 var(--portal-signet-size);
}

.portal-signet--xs {
    --portal-signet-size: 18px;
}

.portal-signet--sm {
    --portal-signet-size: 30px;
}

.portal-signet--md {
    --portal-signet-size: 38px;
}

.portal-signet--lg {
    --portal-signet-size: 48px;
}

.portal-signet .signet-halo {
    opacity: 0.42;
}

.portal-signet .signet-layer {
    animation-duration: 6s;
}

.portal-signet .signet-node {
    animation-duration: 4.2s;
}

.portal-signet .signet-connection {
    animation-duration: 5.6s;
}

.dashboard-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-display-md);
    color: var(--color-primary);
    margin-bottom: 8px;
}

.splash-logo h1 {
    font-size: var(--font-size-display-lg);
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.splash-subtitle {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
}

.splash-author {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    text-align: center;
    letter-spacing: var(--letter-spacing-caps);
}

.splash-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    text-align: center;
    max-width: 400px;
    box-shadow: var(--shadow-xl);
}

.splash-card h2 {
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.splash-card p {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
}

#splash-welcome-text {
    text-align: center;
    white-space: pre-line;
}

/* ───────────────────────────────────────────────────────────────────────────
   SPLASH BUTTONS - v1.1.0 NEU: Abgerundete Ecken, Hover-Effekte
   ─────────────────────────────────────────────────────────────────────────── */

/* Button-Container für mehrere Buttons */
.splash-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
}

/* Gemeinsame Splash-Button Styles */
.splash-btn {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

/* Primärer Splash-Button (Workspace öffnen) */
.splash-btn-primary {
    background: var(--color-primary);
    color: var(--color-bg-primary);
    border: 2px solid var(--color-primary);
}

.splash-btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}

.splash-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.2);
}

/* Sekundärer Splash-Button (Portal initiieren) */
.splash-btn-secondary {
    background: transparent;
    color: var(--color-text-secondary);
    border: 2px solid var(--color-border-primary);
}

.splash-btn-secondary:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.15);
}

.splash-btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.1);
}

/* Legacy: Bestehender .btn-primary im Splash-Card */
.splash-card .btn-primary {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
}

.splash-card .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}

.splash-card .btn-primary:active {
    transform: translateY(0);
}

/* ───────────────────────────────────────────────────────────────────────────
   SPLASH ERROR & FOOTER
   ─────────────────────────────────────────────────────────────────────────── */

.splash-error {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-error-alpha);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: var(--font-size-lg);
}

.splash-error.hidden {
    display: none;
}

.splash-footer {
    position: relative;
    z-index: 1;
}

.splash-footer p {
    font-size: var(--font-size-base);
    color: var(--color-text-dim);
}

/* ───────────────────────────────────────────────────────────────────────────
   SUITE-MARKIERUNG — WORKSPHERE · ─── SUITE ─── (v8.x)
   ─────────────────────────────────────────────────────────────────────────── */

.splash-suite-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    /* Abstand unter SUITE = var(--spacing-md), analog zu .splash-author
       (margin-top: var(--spacing-md)) zwischen „Modular." und dem Autor. */
    margin: 0 0 var(--spacing-md);
    width: 100%;
    max-width: 360px;
    padding: 0 4px;
}

.splash-suite-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--color-primary) 70%, transparent) 50%,
        transparent 100%);
}

.splash-suite-label {
    /* In Relation zu .splash-logo h1 (3rem): 1.25rem ergibt mit
       letter-spacing 0.55em eine ausgewogene Supertitel-Wirkung. */
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-caps);
    padding-left: 0.55em;
    color: color-mix(in srgb, var(--color-primary) 85%, #ffffff 15%);
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ───────────────────────────────────────────────────────────────────────────
   SPLASH BACKDROP — waehrend App-Loading schwach sichtbar (v8.x)
   ─────────────────────────────────────────────────────────────────────────── */

.splash-screen.active.backdrop .splash-content {
    opacity: 0.28;
    transform: translateY(-14vh);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}

.splash-screen.active.backdrop .splash-card,
.splash-screen.active.backdrop .splash-footer {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UPDATE-BENACHRICHTIGUNG: Blinkender Footer-Marker + Popup
   ═══════════════════════════════════════════════════════════════════════════ */

/* Blinkender Marker im Footer */
.footer-update-marker {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 8px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: #fff;
    background: var(--color-primary);
    border-radius: 10px;
    cursor: pointer;
    animation: footer-marker-blink 1.5s ease-in-out infinite;
    transition: transform 0.15s;
}

.footer-update-marker:hover {
    transform: scale(1.08);
    animation: none;
    filter: brightness(1.15);
}

@keyframes footer-marker-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Popup Overlay */
.update-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-max); /* v3.1.0: Portal-weites z-index System */
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popup-fade-in 0.2s ease;
}

@keyframes popup-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Popup Card */
.update-popup {
    background: var(--color-bg-primary);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    padding: 24px 28px;
    max-width: 420px;
    width: 90%;
    animation: popup-slide-up 0.25s ease;
}

@keyframes popup-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.update-popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.update-popup-header h3 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.update-popup-icon {
    font-size: var(--font-size-display-xs);
}

.update-popup-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.update-popup-breaking {
    color: #c2410c;
    font-weight: var(--font-weight-semibold);
    background: #fff7ed;
    padding: 1px 6px;
    border-radius: 3px;
}

.update-popup-notes {
    background: var(--color-bg-hover);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    color: var(--color-text);
}

.update-popup-notes strong {
    display: block;
    margin-bottom: 4px;
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.update-popup-notes p {
    margin: 0;
    white-space: pre-wrap;
}

.update-popup-btn {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: filter 0.15s;
}

.update-popup-btn:hover {
    filter: brightness(1.1);
}

/* Popup Actions (zwei Buttons) */
.update-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.update-popup-btn-secondary {
    display: block;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: all 0.15s;
}

.update-popup-btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}

/* Update verfügbar Marker (blau statt gold) */
.footer-update-available {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 8px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: #fff;
    background: #2563eb;
    border-radius: 10px;
    cursor: pointer;
    animation: footer-marker-blink 1.5s ease-in-out infinite;
    transition: transform 0.15s;
}

.footer-update-available:hover {
    transform: scale(1.08);
    animation: none;
    filter: brightness(1.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Widget-Katalog Dropdown (wc-*)
 * Theme-konforme Styles fuer den Widget-Katalog in main.js
 * ═══════════════════════════════════════════════════════════════════════════ */

/* v3.0.0: Widget-Katalog Dropdown — breiter als Help-Dropdown */
.widget-catalog-dropdown {
  width: 420px;
}

/* Widget-Katalog Header — eigene Gold-Farbe statt Accent/Feuer
 * Spezifitaet muss doc-reader.css .help-dropdown-primary ueberstimmen */

/* ─── Filter Bar ─────────────────────────────────────────────────────── */

.wc-filter-bar {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-primary);
  background: var(--color-bg-secondary);
}

.wc-scope-filter {
  padding: 4px 10px;
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.wc-scope-filter:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-primary-alpha);
  color: var(--color-text-primary);
}

.wc-scope-filter.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: var(--font-weight-semibold);
}

/* ─── Items Container ────────────────────────────────────────────────── */

.wc-items-container {
  padding: 4px 0;
}

/* ─── Category Headers ───────────────────────────────────────────────── */

.wc-category {
  padding: 10px 16px 4px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* ─── Widget Items ───────────────────────────────────────────────────── */

.wc-item {
  padding: 6px 16px;
  cursor: default;
  transition: background 0.15s ease;
}

.wc-item:hover {
  background: var(--color-bg-hover);
}

.wc-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wc-item-icon {
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

/* Label nimmt verfuegbaren Platz, Badges+Demo werden nach rechts gedrueckt */
.wc-item-label {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-item-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-top: 2px;
  padding-left: 24px;
  line-height: var(--line-height-ui);
}

.wc-item-path {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 1px;
  padding-left: 24px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* ─── Badges ─────────────────────────────────────────────────────────── */

.wc-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  vertical-align: middle;
  white-space: nowrap;
}

/* Status Badges */
.wc-badge--active {
  background: color-mix(in srgb, #22c55e 15%, transparent);
  color: #16a34a;
  border: 1px solid color-mix(in srgb, #22c55e 25%, transparent);
}

.wc-badge--prototype {
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  color: #d97706;
  border: 1px solid color-mix(in srgb, #f59e0b 25%, transparent);
}

.wc-badge--planned {
  background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
  color: var(--color-text-muted);
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 25%, transparent);
}

/* Scope Badges */
.wc-badge--portal {
  background: color-mix(in srgb, #3b82f6 15%, transparent);
  color: #2563eb;
  border: 1px solid color-mix(in srgb, #3b82f6 25%, transparent);
}

.wc-badge--module {
  background: color-mix(in srgb, #8b5cf6 15%, transparent);
  color: #7c3aed;
  border: 1px solid color-mix(in srgb, #8b5cf6 25%, transparent);
}

.wc-badge--app {
  background: color-mix(in srgb, #ec4899 15%, transparent);
  color: #db2777;
  border: 1px solid color-mix(in srgb, #ec4899 25%, transparent);
}

/* ─── Demo Link ──────────────────────────────────────────────────────── */

.wc-demo-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  cursor: pointer;
  padding: 1px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.wc-demo-link:hover {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary-dark);
}

/* ─── Footer ─────────────────────────────────────────────────────────── */

.wc-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────
   WIDGET-KATALOG v3.0.0 — kompakt + _catalog.json-driven (2026-04-18)
   Widget-First-Charta: widgets/WIDGETS.md
   ───────────────────────────────────────────────────────────────────────── */

/* Titel-Counter im help-dropdown-primary (ersetzt die alten Main-Tabs) */
.widget-catalog-dropdown.wc-v3 .wc-title-count {
  margin-left: 6px;
  padding: 1px 8px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  border-radius: 999px;
  vertical-align: middle;
}

/* 2026-04-18: Schliessen-Button im Widget-/Template-Dropdown (Fallback, da
   Click-outside-Close nicht immer greift) */
.widget-catalog-dropdown.wc-v3 .wc-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.widget-catalog-dropdown.wc-v3 .wc-primary-title {
  flex: 1;
  min-width: 0;
}
.widget-catalog-dropdown.wc-v3 .wc-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border-primary);
  border-radius: 6px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-tight);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.widget-catalog-dropdown.wc-v3 .wc-close:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  border-color: var(--color-border-secondary);
}

/* Charta-Mini-Banner */
.widget-catalog-dropdown.wc-v3 .wc-charta-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  margin: 0 0 6px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-left: 3px solid var(--color-primary);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}
.widget-catalog-dropdown.wc-v3 .wc-charta-mini a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

/* Toolbar (Suche + Tabs) */
.widget-catalog-dropdown.wc-v3 .wc-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 12px 8px;
}
.widget-catalog-dropdown.wc-v3 .wc-search {
  width: 100%;
  padding: 6px 10px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 5px;
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  outline: none;
}
.widget-catalog-dropdown.wc-v3 .wc-search:focus {
  border-color: var(--color-primary);
}
.widget-catalog-dropdown.wc-v3 .wc-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.widget-catalog-dropdown.wc-v3 .wc-tab {
  padding: 3px 10px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.widget-catalog-dropdown.wc-v3 .wc-tab:hover {
  background: var(--color-bg-hover);
}
.widget-catalog-dropdown.wc-v3 .wc-tab.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}
.widget-catalog-dropdown.wc-v3 .wc-tab-count {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: var(--font-size-sm);
  background: rgba(0,0,0,0.10);
  border-radius: 999px;
}
.widget-catalog-dropdown.wc-v3 .wc-tab.active .wc-tab-count {
  background: rgba(255,255,255,0.25);
}

/* Sections */
.widget-catalog-dropdown.wc-v3 .wc-section {
  margin-bottom: 8px;
  padding: 0 12px;
}
.widget-catalog-dropdown.wc-v3 .wc-section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-tertiary);
}
.widget-catalog-dropdown.wc-v3 .wc-section--generic .wc-section-title {
  color: var(--color-primary);
}
.widget-catalog-dropdown.wc-v3 .wc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
}
.widget-catalog-dropdown.wc-v3 .wc-section-header:hover {
  background: var(--color-bg-hover);
}
.widget-catalog-dropdown.wc-v3 .wc-section-arrow {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}
.widget-catalog-dropdown.wc-v3 .wc-section-warning {
  font-size: var(--font-size-sm);
  color: var(--color-warning);
  padding: 5px 8px;
  margin: 2px 0 4px;
  background: rgba(245,158,11,0.08);
  border-left: 2px solid var(--color-warning);
  border-radius: 3px;
}

/* Liste (kompakt) */
.widget-catalog-dropdown.wc-v3 .wc-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.widget-catalog-dropdown.wc-v3 .wc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
}
.widget-catalog-dropdown.wc-v3 .wc-row:hover {
  background: var(--color-bg-hover);
}
.widget-catalog-dropdown.wc-v3 .wc-row-icon {
  font-size: var(--font-size-xl);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.widget-catalog-dropdown.wc-v3 .wc-row-label {
  flex: 1;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mini-Badges (NEU, composable, promote) */
.widget-catalog-dropdown.wc-v3 .wc-mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 14px;
  padding: 0 4px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: 3px;
  flex-shrink: 0;
}
.widget-catalog-dropdown.wc-v3 .wc-mini-badge--new {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--color-primary);
}
.widget-catalog-dropdown.wc-v3 .wc-mini-badge--comp {
  background: rgba(34,197,94,0.18);
  color: #16A34A;
}
.widget-catalog-dropdown.wc-v3 .wc-mini-badge--promo {
  background: rgba(245,158,11,0.18);
  color: #f59e0b;
}

/* Status-Dot */
.widget-catalog-dropdown.wc-v3 .wc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.widget-catalog-dropdown.wc-v3 .wc-dot--active     { background: #16A34A; }
.widget-catalog-dropdown.wc-v3 .wc-dot--prototype  { background: #F59E0B; }
.widget-catalog-dropdown.wc-v3 .wc-dot--planned    { background: #6B7280; }
.widget-catalog-dropdown.wc-v3 .wc-dot--deprecated { background: #DC2626; }

/* Demo-Link */
.widget-catalog-dropdown.wc-v3 .wc-row-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 3px;
  transition: all 0.12s;
}
.widget-catalog-dropdown.wc-v3 .wc-row-demo:hover {
  background: var(--color-primary);
  color: #fff;
}
.widget-catalog-dropdown.wc-v3 .wc-row-demo--off {
  opacity: 0.3;
  cursor: default;
}

/* Info-Icon */
.widget-catalog-dropdown.wc-v3 .wc-info {
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-border-primary);
  background: transparent;
  color: var(--color-text-tertiary);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  cursor: help;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.widget-catalog-dropdown.wc-v3 .wc-info:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.widget-catalog-dropdown.wc-v3 .wc-empty {
  padding: 12px;
  text-align: center;
  font-style: italic;
  font-size: var(--font-size-base);
  color: var(--color-text-tertiary);
}

/* Lade-Fehler-Banner (zeigt sich wenn _catalog.json nicht geladen werden konnte) */
.widget-catalog-dropdown.wc-v3 .wc-load-error {
  margin: 0 12px 8px;
  padding: 12px;
  background: rgba(220,38,38,0.08);
  border-left: 3px solid var(--color-error);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}
.widget-catalog-dropdown.wc-v3 .wc-load-error-icon {
  font-size: var(--font-size-display-xs);
}
.widget-catalog-dropdown.wc-v3 .wc-load-error-text {
  line-height: var(--line-height-normal);
}
.widget-catalog-dropdown.wc-v3 .wc-load-error-text code {
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.95em;
}
.widget-catalog-dropdown.wc-v3 .wc-load-error-retry {
  align-self: flex-start;
  padding: 4px 12px;
  background: var(--color-error);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.widget-catalog-dropdown.wc-v3 .wc-load-error-retry:hover {
  filter: brightness(1.1);
}

/* Tooltip (portal-style, z-index ueber dropdown) */
.wc-tooltip {
  position: fixed;
  z-index: 100000;
  width: 360px;
  padding: 12px 14px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.wc-tooltip.show { opacity: 1; }
.wc-tooltip-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 4px;
}
.wc-tooltip-desc {
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  margin-bottom: 8px;
}
.wc-tooltip-meta {
  font-size: var(--font-size-base);
  color: var(--color-text-tertiary);
  line-height: var(--line-height-text);
}
.wc-tooltip-meta strong { color: var(--color-text-secondary); }
.wc-tooltip-meta code {
  background: var(--color-bg-tertiary);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.92em;
}

.wc-footer span {
  cursor: pointer;
}

/* ─── Dark Mode Overrides ────────────────────────────────────────────── */

.dark-mode .wc-badge--active {
  background: color-mix(in srgb, #22c55e 20%, transparent);
  color: #4ade80;
  border-color: color-mix(in srgb, #22c55e 30%, transparent);
}

.dark-mode .wc-badge--prototype {
  background: color-mix(in srgb, #f59e0b 20%, transparent);
  color: #fbbf24;
  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}

.dark-mode .wc-badge--portal {
  background: color-mix(in srgb, #3b82f6 20%, transparent);
  color: #60a5fa;
  border-color: color-mix(in srgb, #3b82f6 30%, transparent);
}

.dark-mode .wc-badge--module {
  background: color-mix(in srgb, #8b5cf6 20%, transparent);
  color: #a78bfa;
  border-color: color-mix(in srgb, #8b5cf6 30%, transparent);
}

.dark-mode .wc-badge--app {
  background: color-mix(in srgb, #ec4899 20%, transparent);
  color: #f472b6;
  border-color: color-mix(in srgb, #ec4899 30%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* LOADING OVERLAY - Portal-Boot Indikator (v1.1.5)                        */
/* ═══════════════════════════════════════════════════════════════════════ */

.app-loading {
  /* Loading-Farben matchen das aktuelle Splash-Theme (Primary + Accent).
     Lokale Aliase, damit wir den Spinner konsistent benennen koennen. */
  --loading-gold:        var(--color-primary);
  --loading-gold-light:  var(--color-primary-light);
  --loading-copper:      var(--color-accent);
  --loading-copper-deep: color-mix(in srgb, var(--loading-copper) 65%, #000 35%);

  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  transition: opacity 0.4s ease, background 0.3s ease;
}

/* Wenn Splash als Backdrop aktiv ist: App-Loading transparent, Content unter Signet */
.splash-screen.active ~ .app-loading {
  background: transparent;
}

.splash-screen.active ~ .app-loading .app-loading-content {
  transform: translateY(18vh);
}

.app-loading.hidden {
  display: none;
}

.app-loading.fade-out {
  opacity: 0;
  pointer-events: none;
}

.app-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* ─────────────────────────────────────────────────────────────────
   SPINNER: Dual-Orbit (Option B) — zwei gegenlaeufige Ringe
   ───────────────────────────────────────────────────────────────── */
.app-loading-spinner {
  position: relative;
  width: 140px;
  height: 140px;
}

.app-loading-spinner::before,
.app-loading-spinner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

/* Aeusserer Ring: Gold, cw */
.app-loading-spinner::before {
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 195deg,
    color-mix(in srgb, var(--loading-gold) 35%, transparent) 240deg,
    var(--loading-gold) 330deg,
    var(--loading-copper) 360deg
  );
  mask: radial-gradient(circle, transparent 66%, #000 68%);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%);
  animation: app-loading-spin 1.4s linear infinite;
  filter:
    drop-shadow(0 0 10px color-mix(in srgb, var(--loading-gold) 70%, transparent))
    drop-shadow(0 0 26px color-mix(in srgb, var(--loading-gold) 35%, transparent));
}

/* Innerer Ring: Kupfer, ccw */
.app-loading-spinner::after {
  inset: 22%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 180deg,
    color-mix(in srgb, var(--loading-copper) 75%, var(--loading-copper-deep) 25%) 325deg,
    var(--loading-gold-light) 360deg
  );
  mask: radial-gradient(circle, transparent 56%, #000 60%);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 60%);
  animation: app-loading-spin-reverse 1.0s linear infinite;
  filter:
    drop-shadow(0 0 8px color-mix(in srgb, var(--loading-copper) 60%, transparent))
    drop-shadow(0 0 18px color-mix(in srgb, var(--loading-copper) 30%, transparent));
}

@keyframes app-loading-spin {
  to { transform: rotate(360deg); }
}

@keyframes app-loading-spin-reverse {
  to { transform: rotate(-360deg); }
}

/* ─────────────────────────────────────────────────────────────────
   TEXTE: Haupt-Status + Detail — gold/hell, weich pulsierend
   ───────────────────────────────────────────────────────────────── */
.app-loading-text {
  margin: 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  color: #ffffff;
  font-family: var(--font-family-base);
  letter-spacing: var(--letter-spacing-caps);
  text-align: center;
  /* Schaerfere Darstellung: feiner Glow + dunkler Kontrast-Schatten */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 0 10px color-mix(in srgb, var(--loading-gold) 35%, transparent);
  animation: app-loading-text-pulse 2.6s ease-in-out infinite;
}

@keyframes app-loading-text-pulse {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1;   }
}

.app-loading-detail {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: #ffffff;
  font-family: var(--font-family-base);
  letter-spacing: var(--letter-spacing-caps);
  text-align: center;
  min-height: 1.2em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 0 10px color-mix(in srgb, var(--loading-gold) 35%, transparent);
  opacity: 0.8;
}