/* =============================================================================
   SCHNEEHOME - HAUPTSTYLESHEET (GENERIERT - NICHT BEARBEITEN)

   Diese Datei wird von ./css-bauen.sh aus static/css/teile/*.css
   zusammengesetzt. Änderungen hier gehen beim nächsten Bau verloren.

   Bearbeite stattdessen die passende Datei in static/css/teile/ und lass
   ./css-bauen.sh laufen. Die Nummern der Teile sind die Reihenfolge und
   bindend - sie entscheidet über die Kaskade.
   ============================================================================= */


/* ===== 00-grundlagen-tailwind.css ===== */
/* =============================================================================
   ENERGIE SCHNEE - HAUPTSTYLESHEET
   =============================================================================
   Inhalt:
   1. Tailwind Direktiven
   2. Grundstile
   3. Formulare & Inputs
   4. Buttons
   5. Cards & Results
   6. Details/Summary Komponente
   7. Toasts & Notifications
   8. Modal System
   9. Tab Navigation
   10. Select2 Dropdown
   11. Leaflet & Geosearch
   12. Loader/Spinner
   13. Modul: Dachfläche
   14. Modul: Photovoltaik
   15. Modul: Tesla
   16. Modul: Gebäude-Editor
   17. Modul: Gerätekatalog
   18. Modul: Tickets
   19. Responsive Styles
   20. Print Styles
   21. Modul: Explorer (Datei-Manager)
   ============================================================================= */


/* =============================================================================
   1. TAILWIND DIREKTIVEN
   ============================================================================= */

@tailwind base;
@tailwind components;
@tailwind utilities;


/* ===== 01-farben-und-themen.css ===== */
/* =============================================================================
   1b. DESIGN-VARIABLEN
   Eine Änderung hier wirkt sich auf die gesamte Anwendung aus.
   ============================================================================= */
:root {
    /* Die Werte stammen aus denselben Rampen wie tailwind.config.js - dort
       Petrol/Schnee/Sonne, hier dieselben Hex. Wer eine Farbe ändern will,
       ändert beide Orte; auseinanderlaufen dürfen sie nicht.

       Die Rampen stehen zuerst und vollständig da, weil das Stylesheet
       querbeet alle Stufen braucht. Darunter liegen die sprechenden Tokens
       (--color-primary und Verwandte) - die sind das, was im Stylesheet
       benutzt werden soll. Eine Rampenstufe direkt zu verwenden ist nur dort
       richtig, wo es kein passendes semantisches Token gibt. */

    /* Rampe - Schnee (kühle Neutrals mit Blaustich) */
    --schnee-50: rgb(var(--schnee-50-rgb));
    --schnee-100: rgb(var(--schnee-100-rgb));
    --schnee-200: rgb(var(--schnee-200-rgb));
    --schnee-300: rgb(var(--schnee-300-rgb));
    --schnee-400: rgb(var(--schnee-400-rgb));
    --schnee-500: rgb(var(--schnee-500-rgb));
    --schnee-600: rgb(var(--schnee-600-rgb));
    --schnee-700: rgb(var(--schnee-700-rgb));
    --schnee-800: rgb(var(--schnee-800-rgb));
    --schnee-900: rgb(var(--schnee-900-rgb));
    --schnee-950: rgb(var(--schnee-950-rgb));
    /* ═══════════════════════════════════════════════════════════════════
       DIE FARBWERTE - hier und nirgends sonst.

       Als RGB-Tripel, aus zwei Gründen:
       1. Nur so lässt sich eine eigene Transparenz bilden:
          rgb(var(--petrol-600-rgb) / 0.2) für Fokusringe, Schatten, Overlays.
       2. Der Dunkelmodus dreht weiter unten NUR diese Tripel um. Die Rampen
          und tailwind.config.js zeigen darauf, also folgt alles von selbst -
          ohne dass eine einzige Stelle im Markup etwas davon wissen muss.

       Damit gibt es die Werte auch nur noch einmal: vorher standen sie
       doppelt (hier als Hex und in tailwind.config.js), mit der ständigen
       Gefahr, dass eines der beiden vergessen wird. Genau so ist das Rot
       einmal auseinandergelaufen.
       Die Zahlen stehen in den --basis-*-Tripeln, die Arbeits-Tripel
       (--schnee-50-rgb usw.) verweisen nur darauf. Der Grund: Der
       Dunkelmodus dreht die Arbeits-Tripel um, aber Flächen, die AUSDRÜCKLICH
       dunkel gemeint sind (Kopfleisten, Kino-Kacheln, bg-gray-700 mit
       text-white), müssen die Drehung örtlich rückgängig machen können -
       siehe die "dunkel gemeint bleibt dunkel"-Regel weiter unten. Ohne die
       Basis-Namen müssten dort alle Zahlen ein zweites Mal stehen.
       ═══════════════════════════════════════════════════════════════════ */
    --basis-schnee-50-rgb:  246 248 251;
    --basis-schnee-100-rgb: 238 242 247;
    --basis-schnee-200-rgb: 221 229 238;
    --basis-schnee-300-rgb: 196 208 222;
    --basis-schnee-400-rgb: 148 166 184;
    --basis-schnee-500-rgb: 108 128 149;
    --basis-schnee-600-rgb: 78 98 116;
    --basis-schnee-700-rgb: 58 75 92;
    --basis-schnee-800-rgb: 38 51 63;
    --basis-schnee-900-rgb: 22 32 42;
    --basis-schnee-950-rgb: 13 21 29;

    --basis-petrol-50-rgb:  239 249 250;
    --basis-petrol-100-rgb: 217 237 239;
    --basis-petrol-200-rgb: 181 219 224;
    --basis-petrol-300-rgb: 131 194 202;
    --basis-petrol-400-rgb: 74 161 173;
    --basis-petrol-500-rgb: 42 133 144;
    --basis-petrol-600-rgb: 15 107 116;
    --basis-petrol-700-rgb: 11 84 91;
    --basis-petrol-800-rgb: 12 69 75;
    --basis-petrol-900-rgb: 13 58 64;
    --basis-petrol-950-rgb: 4 36 42;

    --basis-sonne-50-rgb:  254 250 240;
    --basis-sonne-100-rgb: 253 240 220;
    --basis-sonne-200-rgb: 250 223 180;
    --basis-sonne-300-rgb: 246 198 128;
    --basis-sonne-400-rgb: 240 165 68;
    --basis-sonne-500-rgb: 224 138 31;
    --basis-sonne-600-rgb: 194 113 10;
    --basis-sonne-700-rgb: 155 86 12;
    --basis-sonne-800-rgb: 126 69 17;
    --basis-sonne-900-rgb: 104 58 18;
    --basis-sonne-950-rgb: 59 28 5;

    --basis-gruen-50-rgb:  240 250 244;
    --basis-gruen-100-rgb: 220 242 230;
    --basis-gruen-200-rgb: 187 229 205;
    --basis-gruen-300-rgb: 139 208 171;
    --basis-gruen-400-rgb: 84 179 130;
    --basis-gruen-500-rgb: 47 150 99;
    --basis-gruen-600-rgb: 22 121 74;
    --basis-gruen-700-rgb: 18 96 60;
    --basis-gruen-800-rgb: 17 76 49;
    --basis-gruen-900-rgb: 15 63 42;
    --basis-gruen-950-rgb: 6 35 23;

    --basis-rot-50-rgb:  253 245 243;
    --basis-rot-100-rgb: 248 231 225;
    --basis-rot-200-rgb: 239 206 195;
    --basis-rot-300-rgb: 224 171 155;
    --basis-rot-400-rgb: 203 128 112;
    --basis-rot-500-rgb: 178 90 72;
    --basis-rot-600-rgb: 152 63 46;
    --basis-rot-700-rgb: 124 51 37;
    --basis-rot-800-rgb: 102 43 33;
    --basis-rot-900-rgb: 85 38 31;
    --basis-rot-950-rgb: 46 17 12;

    --basis-weiss-rgb: 255 255 255;
    --basis-schwarz-rgb: 0 0 0;

    /* Die Arbeits-Tripel - der Dunkelmodus überschreibt genau diese. */
    --schnee-50-rgb:  var(--basis-schnee-50-rgb);
    --schnee-100-rgb: var(--basis-schnee-100-rgb);
    --schnee-200-rgb: var(--basis-schnee-200-rgb);
    --schnee-300-rgb: var(--basis-schnee-300-rgb);
    --schnee-400-rgb: var(--basis-schnee-400-rgb);
    --schnee-500-rgb: var(--basis-schnee-500-rgb);
    --schnee-600-rgb: var(--basis-schnee-600-rgb);
    --schnee-700-rgb: var(--basis-schnee-700-rgb);
    --schnee-800-rgb: var(--basis-schnee-800-rgb);
    --schnee-900-rgb: var(--basis-schnee-900-rgb);
    --schnee-950-rgb: var(--basis-schnee-950-rgb);

    --petrol-50-rgb:  var(--basis-petrol-50-rgb);
    --petrol-100-rgb: var(--basis-petrol-100-rgb);
    --petrol-200-rgb: var(--basis-petrol-200-rgb);
    --petrol-300-rgb: var(--basis-petrol-300-rgb);
    --petrol-400-rgb: var(--basis-petrol-400-rgb);
    --petrol-500-rgb: var(--basis-petrol-500-rgb);
    --petrol-600-rgb: var(--basis-petrol-600-rgb);
    --petrol-700-rgb: var(--basis-petrol-700-rgb);
    --petrol-800-rgb: var(--basis-petrol-800-rgb);
    --petrol-900-rgb: var(--basis-petrol-900-rgb);
    --petrol-950-rgb: var(--basis-petrol-950-rgb);

    --sonne-50-rgb:  var(--basis-sonne-50-rgb);
    --sonne-100-rgb: var(--basis-sonne-100-rgb);
    --sonne-200-rgb: var(--basis-sonne-200-rgb);
    --sonne-300-rgb: var(--basis-sonne-300-rgb);
    --sonne-400-rgb: var(--basis-sonne-400-rgb);
    --sonne-500-rgb: var(--basis-sonne-500-rgb);
    --sonne-600-rgb: var(--basis-sonne-600-rgb);
    --sonne-700-rgb: var(--basis-sonne-700-rgb);
    --sonne-800-rgb: var(--basis-sonne-800-rgb);
    --sonne-900-rgb: var(--basis-sonne-900-rgb);
    --sonne-950-rgb: var(--basis-sonne-950-rgb);

    --gruen-50-rgb:  var(--basis-gruen-50-rgb);
    --gruen-100-rgb: var(--basis-gruen-100-rgb);
    --gruen-200-rgb: var(--basis-gruen-200-rgb);
    --gruen-300-rgb: var(--basis-gruen-300-rgb);
    --gruen-400-rgb: var(--basis-gruen-400-rgb);
    --gruen-500-rgb: var(--basis-gruen-500-rgb);
    --gruen-600-rgb: var(--basis-gruen-600-rgb);
    --gruen-700-rgb: var(--basis-gruen-700-rgb);
    --gruen-800-rgb: var(--basis-gruen-800-rgb);
    --gruen-900-rgb: var(--basis-gruen-900-rgb);
    --gruen-950-rgb: var(--basis-gruen-950-rgb);

    --rot-50-rgb:  var(--basis-rot-50-rgb);
    --rot-100-rgb: var(--basis-rot-100-rgb);
    --rot-200-rgb: var(--basis-rot-200-rgb);
    --rot-300-rgb: var(--basis-rot-300-rgb);
    --rot-400-rgb: var(--basis-rot-400-rgb);
    --rot-500-rgb: var(--basis-rot-500-rgb);
    --rot-600-rgb: var(--basis-rot-600-rgb);
    --rot-700-rgb: var(--basis-rot-700-rgb);
    --rot-800-rgb: var(--basis-rot-800-rgb);
    --rot-900-rgb: var(--basis-rot-900-rgb);
    --rot-950-rgb: var(--basis-rot-950-rgb);

    /* Weiß und Schwarz sind im Dunkelmodus nicht mehr weiß und schwarz. */
    --weiss-rgb: var(--basis-weiss-rgb);
    --schwarz-rgb: var(--basis-schwarz-rgb);

    /* Rampe - Petrol (Markenfarbe) */
    --petrol-50: rgb(var(--petrol-50-rgb));
    --petrol-100: rgb(var(--petrol-100-rgb));
    --petrol-200: rgb(var(--petrol-200-rgb));
    --petrol-300: rgb(var(--petrol-300-rgb));
    --petrol-400: rgb(var(--petrol-400-rgb));
    --petrol-500: rgb(var(--petrol-500-rgb));
    --petrol-600: rgb(var(--petrol-600-rgb));
    --petrol-700: rgb(var(--petrol-700-rgb));
    --petrol-800: rgb(var(--petrol-800-rgb));
    --petrol-900: rgb(var(--petrol-900-rgb));
    --petrol-950: rgb(var(--petrol-950-rgb));   /* Rampe - Sonne (Energie und Ertrag, nie Dekoration) */
    --sonne-50: rgb(var(--sonne-50-rgb));
    --sonne-100: rgb(var(--sonne-100-rgb));
    --sonne-200: rgb(var(--sonne-200-rgb));
    --sonne-300: rgb(var(--sonne-300-rgb));
    --sonne-400: rgb(var(--sonne-400-rgb));
    --sonne-500: rgb(var(--sonne-500-rgb));
    --sonne-600: rgb(var(--sonne-600-rgb));
    --sonne-700: rgb(var(--sonne-700-rgb));
    --sonne-800: rgb(var(--sonne-800-rgb));
    --sonne-900: rgb(var(--sonne-900-rgb));
    --sonne-950: rgb(var(--sonne-950-rgb));   /* Rampe - Grün */
    --gruen-50: rgb(var(--gruen-50-rgb));
    --gruen-100: rgb(var(--gruen-100-rgb));
    --gruen-200: rgb(var(--gruen-200-rgb));
    --gruen-300: rgb(var(--gruen-300-rgb));
    --gruen-400: rgb(var(--gruen-400-rgb));
    --gruen-500: rgb(var(--gruen-500-rgb));
    --gruen-600: rgb(var(--gruen-600-rgb));
    --gruen-700: rgb(var(--gruen-700-rgb));
    --gruen-800: rgb(var(--gruen-800-rgb));
    --gruen-900: rgb(var(--gruen-900-rgb));
    --gruen-950: rgb(var(--gruen-950-rgb));
    /* Rampe - Rot (Rost/Terrakotta, bewusst gedämpft)
       Ein Signalrot (#dc2626, Farbton 0°) steht Petrol (187°) fast genau
       gegenüber - zwei satte Gegenpole, die sich gegenseitig anschreien.
       Diese Rampe liegt bei ~14° und deutlich niedriger gesättigt: nah genug
       an Sonne (33°), um zur Palette zu gehören, dunkel und warm genug, um
       weiter als Warnung gelesen zu werden. */
    --rot-50: rgb(var(--rot-50-rgb));
    --rot-100: rgb(var(--rot-100-rgb));
    --rot-200: rgb(var(--rot-200-rgb));
    --rot-300: rgb(var(--rot-300-rgb));
    --rot-400: rgb(var(--rot-400-rgb));
    --rot-500: rgb(var(--rot-500-rgb));
    --rot-600: rgb(var(--rot-600-rgb));   /* Hauptton - Buttons, Icons */
    --rot-700: rgb(var(--rot-700-rgb));
    --rot-800: rgb(var(--rot-800-rgb));
    --rot-900: rgb(var(--rot-900-rgb));
    --rot-950: rgb(var(--rot-950-rgb));   /* Farben - Primär (Petrol) */
    --color-primary: var(--petrol-600);
    --color-primary-hover: var(--petrol-700);
    --color-primary-subtle: var(--petrol-50);
    --color-primary-soft: var(--petrol-100);
    --color-primary-soft-hover: var(--petrol-200);
    --color-primary-border: var(--petrol-300);
    --color-primary-text: var(--petrol-700);
    --color-primary-strong: var(--petrol-900);

    /* Farben - Sekundär/Neutral (Schnee) */
    --color-secondary: rgb(var(--weiss-rgb));
    --color-secondary-hover: var(--schnee-100);
    --color-secondary-border: var(--schnee-300);

    /* Farben - Danger (Rost) */
    --color-danger: var(--rot-600);
    --color-danger-hover: var(--rot-700);
    --color-danger-soft: var(--rot-100);
    --color-danger-soft-hover: var(--rot-200);
    --color-danger-border: var(--rot-300);
    --color-danger-text: var(--rot-700);

    /* Farben - Success (Grün) */
    --color-success: var(--gruen-600);
    --color-success-hover: var(--gruen-700);
    --color-success-soft: var(--gruen-100);
    --color-success-soft-hover: var(--gruen-200);
    --color-success-border: var(--gruen-300);
    --color-success-text: var(--gruen-700);

    /* Farben - Warning (Sonne) */
    --color-warning: var(--sonne-500);
    --color-warning-hover: var(--sonne-600);
    --color-warning-soft: var(--sonne-100);
    --color-warning-soft-hover: var(--sonne-200);
    --color-warning-border: var(--sonne-300);
    --color-warning-text: var(--sonne-800);

    /* Farben - Text (Schnee) */
    --color-text: var(--schnee-900);
    --color-text-secondary: var(--schnee-700);
    --color-text-muted: var(--schnee-500);
    --color-text-placeholder: var(--schnee-400);

    /* Farben - Hintergrund (Schnee) */
    --color-bg: var(--schnee-100);
    /* Über das Tripel, damit Karten und Felder im Dunkelmodus mitgehen -
       sonst bleiben sie als weiße Flächen stehen. */
    --color-bg-white: rgb(var(--weiss-rgb));
    --color-bg-muted: var(--schnee-50);
    --color-border: var(--schnee-200);
    --color-border-strong: var(--schnee-300);

    /* Grund der 3D-Ansichten (Dachfläche, Gebäude, PV-Vorschau).
       Eigenes Token statt der Karten-Farbe: Die 3D-Fläche ist eine Bühne mit
       eigener Beleuchtung, kein Formular. Im Dunkelmodus wird daraus #1a1a2e -
       ohne das leuchtet der Viewport als grelle weiße Insel in der dunklen
       Seite. Auch aus JS lesbar (Three.js braucht die Farbe als Zahl), damit
       die Farbe nur an EINER Stelle steht. */
    --viewport-3d-grund: #f1f5f9;

    /* Feine Kontur für erhabene Flächen, die über der Seite schweben
       (Modals, Ausklapper). Im Hellmodus bewusst unsichtbar - dort trennt der
       Schatten die Fläche schon vom Grund. Im Dunkelmodus trägt sie die Kante,
       weil ein schwarzer Schatten auf dunklem Grund nichts ausrichtet. */
    --kontur-erhaben: transparent;

    /* Schalter-Höhen. Der Grund für feste Werte: Ohne sie ergab sich die Höhe
       aus Polster + Zeilenhöhe des Inhalts, und ein Icon-Schalter wurde damit
       niedriger (34px) als ein Text-Schalter (38px) - im Modulkopf standen
       drei verschiedene Höhen nebeneinander. Ein Schalter ist ein Ziel zum
       Treffen, seine Höhe darf nicht vom Inhalt abhängen.
       min-height statt height, damit ein Schalter mit Umbruch nicht überläuft. */
    --btn-höhe: 2.5rem;        /* 40px - Standard, auch die Höhe der Eingabefelder */
    --btn-höhe-xs: 1.75rem;    /* 28px */
    --btn-höhe-sm: 2.125rem;   /* 34px */
    --btn-höhe-lg: 2.875rem;   /* 46px */

    /* Formulare */
    --form-border: var(--color-border-strong);
    --form-border-focus: var(--color-primary);
    --form-ring: rgba(15, 107, 116, 0.2);   /* petrol-600, transparent */
    --form-radius: 0.375rem;
    --form-bg: var(--color-bg-white);
    --form-text: var(--color-text);
    --form-placeholder: var(--color-text-placeholder);
    --form-padding-x: 0.75rem;
    --form-padding-y: 0.5rem;
    --form-font-size: 0.875rem;
    /* 1,375rem ist kein Zufallswert: 8px Polsterung oben + 22px Zeile + 8px
       unten + 2px Rahmen ergibt genau 40px - also --btn-höhe. Damit stehen
       Feld und Schalter nebeneinander auf gleicher Höhe. Mit den vorherigen
       1,25rem waren es 38px, und dieser Versatz zog sich durch jede Zeile,
       in der beides nebeneinander steht. */
    --form-line-height: 1.375rem;
    --form-disabled-bg: #f3f4f6;
    --form-disabled-text: #9ca3af;

    /* Allgemein */
    --radius-sm: 0.25rem;
    --radius: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
    /* Für den angehobenen Zustand beim Überfahren - deutlicher als --shadow,
       aber ohne die Karte abheben zu lassen. */
    --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.1), 0 2px 6px -2px rgba(0,0,0,0.06);
    --transition: 0.15s ease;

    /* Sagt dem Browser, in welcher Richtung er seine eigenen Teile zeichnen
       soll: Scrollbalken, Auswahllisten, Datumswähler, Formularrahmen. */
    color-scheme: light;
}


/* =============================================================================
   1b. DUNKELMODUS
   =============================================================================

   Hier stehen KEINE neuen Farben - nur die Tripel von oben, umgedreht:
   schnee-50 bekommt den Wert von schnee-950, schnee-100 den von schnee-900
   und so weiter. Aus dem hellsten Grund wird der dunkelste, aus dem
   dunkelsten Text der hellste.

   Das reicht, weil das Markup die Rampe schon immer nach Bedeutung benutzt
   hat: bg-gray-50 heißt "hellster Grund", text-gray-900 heißt "stärkster
   Text". Beides bleibt im Dunkeln wahr. Deshalb folgen alle Tausenden
   Stellen automatisch - ohne ein einziges dark:-Präfix im Markup.

   Zwei Regelsätze, weil beides gebraucht wird:
     - @media (prefers-color-scheme: dark) - was das Betriebssystem sagt
     - :root[data-theme="dark"] - was der Nutzer über den Schalter sagt
   Der Schalter muss die Systemeinstellung in BEIDE Richtungen überstimmen
   können, deshalb gibt es auch ein ausdrückliches [data-theme="light"].
   ============================================================================= */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]),
    :root:not([data-theme="light"]) .folgt-thema {
        color-scheme: dark;

        --schnee-50-rgb:  var(--basis-schnee-950-rgb);
        --schnee-100-rgb: var(--basis-schnee-900-rgb);
        --schnee-200-rgb: var(--basis-schnee-800-rgb);
        --schnee-300-rgb: var(--basis-schnee-700-rgb);
        --schnee-400-rgb: var(--basis-schnee-600-rgb);
        --schnee-500-rgb: var(--basis-schnee-500-rgb);
        --schnee-600-rgb: var(--basis-schnee-400-rgb);
        --schnee-700-rgb: var(--basis-schnee-300-rgb);
        --schnee-800-rgb: var(--basis-schnee-200-rgb);
        --schnee-900-rgb: var(--basis-schnee-100-rgb);
        --schnee-950-rgb: var(--basis-schnee-50-rgb);

        --petrol-50-rgb:  var(--basis-petrol-950-rgb);
        --petrol-100-rgb: var(--basis-petrol-900-rgb);
        --petrol-200-rgb: var(--basis-petrol-800-rgb);
        --petrol-300-rgb: var(--basis-petrol-700-rgb);
        --petrol-400-rgb: var(--basis-petrol-600-rgb);
        --petrol-500-rgb: var(--basis-petrol-500-rgb);
        --petrol-600-rgb: var(--basis-petrol-400-rgb);
        --petrol-700-rgb: var(--basis-petrol-300-rgb);
        --petrol-800-rgb: var(--basis-petrol-200-rgb);
        --petrol-900-rgb: var(--basis-petrol-100-rgb);
        --petrol-950-rgb: var(--basis-petrol-50-rgb);

        --sonne-50-rgb:  var(--basis-sonne-950-rgb);
        --sonne-100-rgb: var(--basis-sonne-900-rgb);
        --sonne-200-rgb: var(--basis-sonne-800-rgb);
        --sonne-300-rgb: var(--basis-sonne-700-rgb);
        --sonne-400-rgb: var(--basis-sonne-600-rgb);
        --sonne-500-rgb: var(--basis-sonne-500-rgb);
        --sonne-600-rgb: var(--basis-sonne-400-rgb);
        --sonne-700-rgb: var(--basis-sonne-300-rgb);
        --sonne-800-rgb: var(--basis-sonne-200-rgb);
        --sonne-900-rgb: var(--basis-sonne-100-rgb);
        --sonne-950-rgb: var(--basis-sonne-50-rgb);

        --gruen-50-rgb:  var(--basis-gruen-950-rgb);
        --gruen-100-rgb: var(--basis-gruen-900-rgb);
        --gruen-200-rgb: var(--basis-gruen-800-rgb);
        --gruen-300-rgb: var(--basis-gruen-700-rgb);
        --gruen-400-rgb: var(--basis-gruen-600-rgb);
        --gruen-500-rgb: var(--basis-gruen-500-rgb);
        --gruen-600-rgb: var(--basis-gruen-400-rgb);
        --gruen-700-rgb: var(--basis-gruen-300-rgb);
        --gruen-800-rgb: var(--basis-gruen-200-rgb);
        --gruen-900-rgb: var(--basis-gruen-100-rgb);
        --gruen-950-rgb: var(--basis-gruen-50-rgb);

        --rot-50-rgb:  var(--basis-rot-950-rgb);
        --rot-100-rgb: var(--basis-rot-900-rgb);
        --rot-200-rgb: var(--basis-rot-800-rgb);
        --rot-300-rgb: var(--basis-rot-700-rgb);
        --rot-400-rgb: var(--basis-rot-600-rgb);
        --rot-500-rgb: var(--basis-rot-500-rgb);
        --rot-600-rgb: var(--basis-rot-400-rgb);
        --rot-700-rgb: var(--basis-rot-300-rgb);
        --rot-800-rgb: var(--basis-rot-200-rgb);
        --rot-900-rgb: var(--basis-rot-100-rgb);
        --rot-950-rgb: var(--basis-rot-50-rgb);

        /* Reines Weiß als Fläche wäre im Dunkeln ein Loch: Karten und Felder
           bekommen den Ton direkt über dem Grund. */
        --weiss-rgb: var(--basis-schnee-900-rgb);
        --schwarz-rgb: var(--basis-schnee-50-rgb);

        /* Schatten tragen auf dunklem Grund nicht: Schwarz auf Dunkel sieht
           niemand, die Kante der Kachel verschwimmt mit dem Hintergrund.
           Deshalb trägt hier der ERSTE Wert - eine feine helle Kontur, die die
           Fläche abgrenzt. Der dunkle Schatten dahinter bleibt für die
           Höhenwirkung. Global über die Tokens, damit jede Kachel, jedes Panel
           und jeder Ausklapper es bekommt, ohne eigene Regel. */
        --shadow-sm: 0 0 0 1px rgba(255,255,255,0.14), 0 1px 2px 0 rgba(0,0,0,0.4);
        --shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.4);
        --shadow-md: 0 0 0 1px rgba(255,255,255,0.30), 0 4px 12px -2px rgba(0,0,0,0.55), 0 2px 6px -2px rgba(0,0,0,0.4);

        /* Die 3D-Bühne wird dunkel, sonst leuchtet der Viewport als weiße
           Insel. Gleicher Ton, den ThreeManager.js schon verwendet. */
        --viewport-3d-grund: #1a1a2e;

        /* Jetzt sichtbar: trägt die Kante von Modals und Ausklappern. */
        --kontur-erhaben: rgba(255,255,255,0.28);
    }
}

/* Der Schalter: gewinnt gegen die Systemeinstellung, in beide Richtungen. */
:root[data-theme="dark"],
:root[data-theme="dark"] .folgt-thema {
    color-scheme: dark;

    --schnee-50-rgb:  var(--basis-schnee-950-rgb);
    --schnee-100-rgb: var(--basis-schnee-900-rgb);
    --schnee-200-rgb: var(--basis-schnee-800-rgb);
    --schnee-300-rgb: var(--basis-schnee-700-rgb);
    --schnee-400-rgb: var(--basis-schnee-600-rgb);
    --schnee-500-rgb: var(--basis-schnee-500-rgb);
    --schnee-600-rgb: var(--basis-schnee-400-rgb);
    --schnee-700-rgb: var(--basis-schnee-300-rgb);
    --schnee-800-rgb: var(--basis-schnee-200-rgb);
    --schnee-900-rgb: var(--basis-schnee-100-rgb);
    --schnee-950-rgb: var(--basis-schnee-50-rgb);

    --petrol-50-rgb:  var(--basis-petrol-950-rgb);
    --petrol-100-rgb: var(--basis-petrol-900-rgb);
    --petrol-200-rgb: var(--basis-petrol-800-rgb);
    --petrol-300-rgb: var(--basis-petrol-700-rgb);
    --petrol-400-rgb: var(--basis-petrol-600-rgb);
    --petrol-500-rgb: var(--basis-petrol-500-rgb);
    --petrol-600-rgb: var(--basis-petrol-400-rgb);
    --petrol-700-rgb: var(--basis-petrol-300-rgb);
    --petrol-800-rgb: var(--basis-petrol-200-rgb);
    --petrol-900-rgb: var(--basis-petrol-100-rgb);
    --petrol-950-rgb: var(--basis-petrol-50-rgb);

    --sonne-50-rgb:  var(--basis-sonne-950-rgb);
    --sonne-100-rgb: var(--basis-sonne-900-rgb);
    --sonne-200-rgb: var(--basis-sonne-800-rgb);
    --sonne-300-rgb: var(--basis-sonne-700-rgb);
    --sonne-400-rgb: var(--basis-sonne-600-rgb);
    --sonne-500-rgb: var(--basis-sonne-500-rgb);
    --sonne-600-rgb: var(--basis-sonne-400-rgb);
    --sonne-700-rgb: var(--basis-sonne-300-rgb);
    --sonne-800-rgb: var(--basis-sonne-200-rgb);
    --sonne-900-rgb: var(--basis-sonne-100-rgb);
    --sonne-950-rgb: var(--basis-sonne-50-rgb);

    --gruen-50-rgb:  var(--basis-gruen-950-rgb);
    --gruen-100-rgb: var(--basis-gruen-900-rgb);
    --gruen-200-rgb: var(--basis-gruen-800-rgb);
    --gruen-300-rgb: var(--basis-gruen-700-rgb);
    --gruen-400-rgb: var(--basis-gruen-600-rgb);
    --gruen-500-rgb: var(--basis-gruen-500-rgb);
    --gruen-600-rgb: var(--basis-gruen-400-rgb);
    --gruen-700-rgb: var(--basis-gruen-300-rgb);
    --gruen-800-rgb: var(--basis-gruen-200-rgb);
    --gruen-900-rgb: var(--basis-gruen-100-rgb);
    --gruen-950-rgb: var(--basis-gruen-50-rgb);

    --rot-50-rgb:  var(--basis-rot-950-rgb);
    --rot-100-rgb: var(--basis-rot-900-rgb);
    --rot-200-rgb: var(--basis-rot-800-rgb);
    --rot-300-rgb: var(--basis-rot-700-rgb);
    --rot-400-rgb: var(--basis-rot-600-rgb);
    --rot-500-rgb: var(--basis-rot-500-rgb);
    --rot-600-rgb: var(--basis-rot-400-rgb);
    --rot-700-rgb: var(--basis-rot-300-rgb);
    --rot-800-rgb: var(--basis-rot-200-rgb);
    --rot-900-rgb: var(--basis-rot-100-rgb);
    --rot-950-rgb: var(--basis-rot-50-rgb);

    --weiss-rgb: var(--basis-schnee-900-rgb);
    --schwarz-rgb: var(--basis-schnee-50-rgb);

    /* Helle Kontur als erster Wert - siehe Begründung im Media-Block oben. */
    --shadow-sm: 0 0 0 1px rgba(255,255,255,0.14), 0 1px 2px 0 rgba(0,0,0,0.4);
    --shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.4);
    --shadow-md: 0 0 0 1px rgba(255,255,255,0.30), 0 4px 12px -2px rgba(0,0,0,0.55), 0 2px 6px -2px rgba(0,0,0,0.4);

    --viewport-3d-grund: #1a1a2e;
    --kontur-erhaben: rgba(255,255,255,0.28);
}

/* Ausdrücklich hell - überstimmt ein dunkles Betriebssystem. Die Werte von
   oben gelten dann unverändert weiter, nur color-scheme muss zurück. */
:root[data-theme="light"] {
    color-scheme: light;
}

/* ---------------------------------------------------------------------------
   "Dunkel gemeint bleibt dunkel"

   Die Rampen-Drehung oben behandelt jede Stufe als Bedeutung ("50 = hellster
   Grund"). Es gibt aber Flächen, die im Hellmodus AUSDRÜCKLICH dunkel gebaut
   wurden - Kopfleisten mit weißem Text (bg-gray-700), Kino-Kacheln und
   3D-Bühnen (bg-gray-900), der Seitenleisten-Kopf. Die Drehung würde genau
   diese Flächen als einzige hell machen und ihren "weißen" Text dunkel:
   der Schriftzug in der Kopfleiste war im Dunkelmodus unsichtbar.

   Diese Regel erklärt solche Elemente zur Insel: Sie setzt alle Arbeits-
   Tripel auf die Basis-Werte zurück. Innerhalb der Insel gilt damit wieder
   die Hellmodus-Farbwelt - die Fläche bleibt dunkel, text-white bleibt weiß,
   auch für alle Kinder. Im Hellmodus ist die Regel wirkungslos (identische
   Werte), deshalb braucht sie keine @media-Abfrage.

   Neue "gewollt dunkle" Flächen entweder mit einer der bg-Klassen unten
   bauen oder ausdrücklich die Klasse .dunkel-gemeint dazugeben.

   WICHTIG für eigene CSS-Regeln in einer Insel: nur die direkte Form
   rgb(var(--schnee-800-rgb)) wird am Element aufgelöst und sieht diese
   Rücksetzung. var(--schnee-800) oder var(--color-bg-white) erben dagegen
   den am :root BEREITS aufgelösten (also gedrehten) Farbwert - eine Insel
   kann daran nichts mehr ändern. Tailwind-Klassen nutzen immer die direkte
   Form und sind deshalb automatisch inselfähig.

   GEGENSTÜCK .folgt-thema: Manches hängt im Markup zwar in einer Insel,
   gehört optisch aber NICHT zur dunklen Leiste - Ausklapper und Panels, die
   über die Seite ragen (Sprachwahl, Themenwahl, Aufgabenliste). Ohne
   Gegenmaßnahme sind sie im Dunkelmodus schneeweiß, weil bg-white in der
   Insel echtes Weiß liefert. Ein .folgt-thema auf dem Panel dreht die
   Farbtripel dort auf die Thema-Werte zurück; ab da wirken Tailwind-Klassen
   wie überall sonst und man muss keine einzelnen Klassen ersetzen.

   .folgt-thema steht deshalb an VIER Stellen, und alle vier werden gebraucht:
   unten in den beiden Dunkelmodus-Blöcken (eigene Farbtripel) UND in den
   beiden Bootstrap-Blöcken in 02-grundstile.css. Fehlt Letzteres, dreht sich
   nur der Text: Bootstraps .bg-white trägt ein !important und liest
   --bs-white-rgb, nicht --weiss-rgb - das Panel stand dann weiß auf weiß da,
   schlechter als ganz ohne die Klasse. */
.dunkel-gemeint,
#haupt-nav,
.sl-kopf,
.bg-black,
.bg-gray-600, .bg-gray-700, .bg-gray-800, .bg-gray-900, .bg-gray-950,
.bg-slate-600, .bg-slate-700, .bg-slate-800, .bg-slate-900, .bg-slate-950,
.bg-zinc-600, .bg-zinc-700, .bg-zinc-800, .bg-zinc-900, .bg-zinc-950,
.bg-neutral-600, .bg-neutral-700, .bg-neutral-800, .bg-neutral-900, .bg-neutral-950,
.bg-stone-600, .bg-stone-700, .bg-stone-800, .bg-stone-900, .bg-stone-950 {
    --schnee-50-rgb:  var(--basis-schnee-50-rgb);
    --schnee-100-rgb: var(--basis-schnee-100-rgb);
    --schnee-200-rgb: var(--basis-schnee-200-rgb);
    --schnee-300-rgb: var(--basis-schnee-300-rgb);
    --schnee-400-rgb: var(--basis-schnee-400-rgb);
    --schnee-500-rgb: var(--basis-schnee-500-rgb);
    --schnee-600-rgb: var(--basis-schnee-600-rgb);
    --schnee-700-rgb: var(--basis-schnee-700-rgb);
    --schnee-800-rgb: var(--basis-schnee-800-rgb);
    --schnee-900-rgb: var(--basis-schnee-900-rgb);
    --schnee-950-rgb: var(--basis-schnee-950-rgb);

    --petrol-50-rgb:  var(--basis-petrol-50-rgb);
    --petrol-100-rgb: var(--basis-petrol-100-rgb);
    --petrol-200-rgb: var(--basis-petrol-200-rgb);
    --petrol-300-rgb: var(--basis-petrol-300-rgb);
    --petrol-400-rgb: var(--basis-petrol-400-rgb);
    --petrol-500-rgb: var(--basis-petrol-500-rgb);
    --petrol-600-rgb: var(--basis-petrol-600-rgb);
    --petrol-700-rgb: var(--basis-petrol-700-rgb);
    --petrol-800-rgb: var(--basis-petrol-800-rgb);
    --petrol-900-rgb: var(--basis-petrol-900-rgb);
    --petrol-950-rgb: var(--basis-petrol-950-rgb);

    --sonne-50-rgb:  var(--basis-sonne-50-rgb);
    --sonne-100-rgb: var(--basis-sonne-100-rgb);
    --sonne-200-rgb: var(--basis-sonne-200-rgb);
    --sonne-300-rgb: var(--basis-sonne-300-rgb);
    --sonne-400-rgb: var(--basis-sonne-400-rgb);
    --sonne-500-rgb: var(--basis-sonne-500-rgb);
    --sonne-600-rgb: var(--basis-sonne-600-rgb);
    --sonne-700-rgb: var(--basis-sonne-700-rgb);
    --sonne-800-rgb: var(--basis-sonne-800-rgb);
    --sonne-900-rgb: var(--basis-sonne-900-rgb);
    --sonne-950-rgb: var(--basis-sonne-950-rgb);

    --gruen-50-rgb:  var(--basis-gruen-50-rgb);
    --gruen-100-rgb: var(--basis-gruen-100-rgb);
    --gruen-200-rgb: var(--basis-gruen-200-rgb);
    --gruen-300-rgb: var(--basis-gruen-300-rgb);
    --gruen-400-rgb: var(--basis-gruen-400-rgb);
    --gruen-500-rgb: var(--basis-gruen-500-rgb);
    --gruen-600-rgb: var(--basis-gruen-600-rgb);
    --gruen-700-rgb: var(--basis-gruen-700-rgb);
    --gruen-800-rgb: var(--basis-gruen-800-rgb);
    --gruen-900-rgb: var(--basis-gruen-900-rgb);
    --gruen-950-rgb: var(--basis-gruen-950-rgb);

    --rot-50-rgb:  var(--basis-rot-50-rgb);
    --rot-100-rgb: var(--basis-rot-100-rgb);
    --rot-200-rgb: var(--basis-rot-200-rgb);
    --rot-300-rgb: var(--basis-rot-300-rgb);
    --rot-400-rgb: var(--basis-rot-400-rgb);
    --rot-500-rgb: var(--basis-rot-500-rgb);
    --rot-600-rgb: var(--basis-rot-600-rgb);
    --rot-700-rgb: var(--basis-rot-700-rgb);
    --rot-800-rgb: var(--basis-rot-800-rgb);
    --rot-900-rgb: var(--basis-rot-900-rgb);
    --rot-950-rgb: var(--basis-rot-950-rgb);

    --weiss-rgb: var(--basis-weiss-rgb);
    --schwarz-rgb: var(--basis-schwarz-rgb);

    /* Auch Bootstraps Tripel zurücksetzen: dessen .text-white trägt ein
       !important und schlägt Tailwinds .text-white - ohne diese Zeilen war
       der Logo-Schriftzug in der dunklen Kopfleiste unsichtbar. Bootstrap
       braucht KOMMAS (rgba(var(--bs-white-rgb), ...)), Leerzeichen-Tripel
       wären dort ungültig und ergäben durchsichtig. */
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 255, 255, 255;
}


/* ===== 02-grundstile.css ===== */
/* =============================================================================
   2. GRUNDSTILE
   ============================================================================= */

html {
    /* Minimum-Zoom 100% - verhindert zu kleine Darstellung auf großen Bildschirmen */
    zoom: 1;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg); /* slate-100 */
}

/* Die Seite ist nie breiter als der Bildschirm. Ragte ein Element hinaus (die
   Kopfleiste auf dem Handy), zoomte der mobile Browser die ganze Seite heraus
   und ließ sie seitlich wackeln. clip statt hidden: hidden machte html und
   body zu Scrollbehältern, und jede sticky-Leiste (Kopfleiste, Reiter) klebte
   dann nicht mehr. Seitlich scrollen darf nur, was es selbst anbietet
   (Tabellen, Reiterleisten mit overflow-x:auto). */
html,
body {
    overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   Icons: ein Verhalten für alle, an genau einer Stelle

   Tailwinds Grundregeln setzen "img,object,svg,video{display:block}". Damit
   ist jedes Icon ein eigener Block, und der Text dahinter rutscht zwangsläufig
   in die nächste Zeile - im Gerätekatalog stand der Zauberstab über seinem
   Satz statt davor, und zwar an jeder der über 1400 Icon-Stellen im Projekt.
   Ein Icon gehört in die Zeile, in der es steht.

   `svg:has(> use)` erfasst alle bestehenden Verwendungen, ohne dass jede
   Datei angefasst werden muss: unsere Icons sind ausnahmslos Verweise auf
   die globalen Symbole. Freie Grafiken (Diagramme, Karten) tragen kein
   <use> und bleiben unberührt.

   Neue Stellen schreiben `icon` und dazu eine Größe, statt jedes Mal eigene
   Breiten- und Höhenklassen mitzuschleppen.
   ------------------------------------------------------------------------- */
.icon,
svg:has(> use) {
    display: inline-block;
    vertical-align: -0.125em;
    flex: none; /* in Knöpfen und Flex-Zeilen nie stauchen */
}

.icon { width: 1rem; height: 1rem; }
.icon-xs { width: 0.75rem; height: 0.75rem; }
.icon-sm { width: 0.875rem; height: 0.875rem; }
.icon-lg { width: 1.5rem; height: 1.5rem; }
.icon-xl { width: 2rem; height: 2rem; }
.icon-2xl { width: 3rem; height: 3rem; }

/* Icon und Text als eine Einheit: gleicher Abstand überall, saubere
   Grundlinie auch bei mehrzeiligem Text. */
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* ---------------------------------------------------------------------------
   Nur im Dunkelmodus: Bootstrap und feste Flächen nachziehen

   ALLES hier steht ausdrücklich NUR unter [data-theme="dark"] bzw. der
   System-Abfrage. Der Hellmodus bleibt Zeile für Zeile so, wie er war - er
   war nicht Teil des Auftrags und darf sich nicht nebenbei verändern.

   Bootstrap zeichnet mit eigenen Variablen weiter (Text, Karten, Rahmen).
   Die hier umzubiegen ist billiger, als jede Bootstrap-Regel zu überschreiben.

   Wichtig: Bootstraps RGB-Variablen brauchen KOMMAS, unsere Leerzeichen.
   Bootstrap schreibt rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) - darin
   ergibt "22 32 42" ein ungültiges rgba(22 32 42, 1), und der Browser nimmt
   dann durchsichtig: der Modulkopf stand als Glasscheibe da, durch die die
   Projektkarten schienen. Deshalb hier eigene Tripel mit Kommas.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    /* .folgt-thema muss hier mit stehen, nicht nur bei den eigenen Tripeln:
       Bootstraps .bg-white trägt ein !important und liest --bs-white-rgb.
       Ein Panel in der Leisten-Insel bekam sonst zwar dunklen Text, aber eine
       weiße Fläche - also weiß auf weiß, schlechter als vorher. */
    :root:not([data-theme="light"]),
    :root:not([data-theme="light"]) .folgt-thema {
        --bs-body-color: var(--color-text);
        --bs-body-bg: var(--color-bg);
        --bs-border-color: var(--color-border);
        --bs-secondary-color: var(--color-text-muted);
        --bs-emphasis-color: var(--color-text);
        --bs-tertiary-bg: var(--color-bg-muted);
        --bs-secondary-bg: var(--color-bg);
        --bs-white-rgb: 22, 32, 42;
        --bs-black-rgb: 246, 248, 251;
        --bs-body-color-rgb: 238, 242, 247;
        --bs-body-bg-rgb: 22, 32, 42;
        /* Die Kopfleiste ist dunkel gemeint, nicht "Rampenton 800": beim
           Umdrehen der Rampe wäre sie zur einzigen hellen Fläche geworden. */
        --leiste-grund-rgb: 8 14 20;
    }
    :root:not([data-theme="light"]) body {
        color: var(--color-text);
    }
    :root:not([data-theme="light"]) #haupt-nav {
        background-color: rgb(var(--leiste-grund-rgb)) !important;
    }
    :root:not([data-theme="light"]) .list-group-item {
        color: var(--color-text);
    }
    /* Deaktivierte Felder: die Hellmodus-Werte sind Hex im :root und würden
       sonst als helle Kästen stehen bleiben. */
    :root:not([data-theme="light"]) {
        --form-disabled-bg: var(--schnee-200);
        --form-disabled-text: var(--schnee-500);
    }
    /* Select2 bringt sein Weiß aus dem Vendor-CSS mit - wie Bootstrap
       nachziehen, ausschließlich im Dunkelmodus. */
    :root:not([data-theme="light"]) .select2-container--default .select2-selection--single,
    :root:not([data-theme="light"]) .select2-container--default .select2-selection--multiple {
        background-color: var(--form-bg);
        border-color: var(--form-border);
    }
    :root:not([data-theme="light"]) .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--form-text);
    }
    :root:not([data-theme="light"]) .select2-dropdown {
        background-color: var(--color-bg-white);
        border-color: var(--form-border);
        color: var(--form-text);
    }
    :root:not([data-theme="light"]) .select2-container--default .select2-search--dropdown .select2-search__field {
        background: var(--form-bg);
        border-color: var(--form-border);
        color: var(--form-text);
    }
    :root:not([data-theme="light"]) .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: var(--color-primary);
    }
    :root:not([data-theme="light"]) .select2-container--default .select2-results__option[aria-selected="true"] {
        background-color: var(--color-bg-muted);
    }
    /* Leaflet-Grundfläche (unter den Kacheln) - die Karte selbst ist Inhalt
       und bleibt hell, aber der Rand beim Laden/Verschieben soll kein
       helles Loch sein. */
    :root:not([data-theme="light"]) .leaflet-container {
        background: var(--color-bg-muted);
    }
    /* Ortssuche auf der Karte (leaflet-geosearch): bringt wie Select2 ihr
       eigenes Weiß mit. */
    :root:not([data-theme="light"]) .leaflet-geosearch-bar form {
        background-color: var(--form-bg);
    }
    :root:not([data-theme="light"]) .leaflet-geosearch-bar form input {
        background: transparent;
        color: var(--form-text);
    }
    :root:not([data-theme="light"]) .leaflet-geosearch-bar .results {
        background-color: var(--color-bg-white);
        color: var(--form-text);
    }
    :root:not([data-theme="light"]) .leaflet-geosearch-bar .results > .active,
    :root:not([data-theme="light"]) .leaflet-geosearch-bar .results > :hover {
        background-color: var(--color-bg-muted);
        border-color: var(--color-border);
    }
    /* Bootstrap list-group-item-light bringt eigenes Hellgrau mit
       (z.B. Spaltenkopf im Datei-Explorer) - blieb im Dunkelmodus als
       weiße Leiste mit hellem Text stehen. */
    :root:not([data-theme="light"]) .list-group-item-light {
        background-color: var(--color-bg-muted);
        color: var(--color-text);
    }
    /* Bootstrap btn-outline-dark: dunkler Text auf dunklem Grund war
       unsichtbar (z.B. Einfügen-Button im Datei-Explorer). */
    :root:not([data-theme="light"]) .btn-outline-dark {
        color: var(--color-text);
        border-color: var(--color-border-strong);
    }
    :root:not([data-theme="light"]) .btn-outline-dark:hover:not(:disabled) {
        background-color: var(--color-bg-muted);
        color: var(--color-text);
    }
    /* EABv2: Lila ist die bewusste KI-Kennfarbe (Hex, keine Token-Rampe) -
       die hellen Violett-Flächen blieben sonst im Dunkelmodus als weiße
       Inseln stehen. */
    :root:not([data-theme="light"]) .eab2-gek-kibtn { color: #c4b5fd; border-color: #4c1d95; }
    :root:not([data-theme="light"]) .eab2-gek-kibtn:hover { background: #2e1065; }
    :root:not([data-theme="light"]) .eab2-gek-wbtn.ki { color: #c4b5fd; }
    :root:not([data-theme="light"]) .eab2-gek-wbtn.ki:hover { background: #2e1065; }
    :root:not([data-theme="light"]) .eab2-gek-kivorschlag { background: #2e1065; border-color: #6d28d9; }
    :root:not([data-theme="light"]) .eab2-gek-kivorschlag .kopf { color: #c4b5fd; }
    :root:not([data-theme="light"]) .eab2-fluss.topup { background: #2e1065; color: #c4b5fd; }
}

:root[data-theme="dark"],
:root[data-theme="dark"] .folgt-thema {
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-bg);
    --bs-border-color: var(--color-border);
    --bs-secondary-color: var(--color-text-muted);
    --bs-emphasis-color: var(--color-text);
    --bs-tertiary-bg: var(--color-bg-muted);
    --bs-secondary-bg: var(--color-bg);
    --bs-white-rgb: 22, 32, 42;
    --bs-black-rgb: 246, 248, 251;
    --bs-body-color-rgb: 238, 242, 247;
    --bs-body-bg-rgb: 22, 32, 42;
    --leiste-grund-rgb: 8 14 20;
}
:root[data-theme="dark"] body {
    color: var(--color-text);
}
:root[data-theme="dark"] #haupt-nav {
    background-color: rgb(var(--leiste-grund-rgb)) !important;
}
:root[data-theme="dark"] .list-group-item {
    color: var(--color-text);
}
:root[data-theme="dark"] {
    --form-disabled-bg: var(--schnee-200);
    --form-disabled-text: var(--schnee-500);
}
:root[data-theme="dark"] .select2-container--default .select2-selection--single,
:root[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--form-bg);
    border-color: var(--form-border);
}
:root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--form-text);
}
:root[data-theme="dark"] .select2-dropdown {
    background-color: var(--color-bg-white);
    border-color: var(--form-border);
    color: var(--form-text);
}
:root[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--form-bg);
    border-color: var(--form-border);
    color: var(--form-text);
}
:root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary);
}
:root[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--color-bg-muted);
}
:root[data-theme="dark"] .leaflet-container {
    background: var(--color-bg-muted);
}
:root[data-theme="dark"] .leaflet-geosearch-bar form {
    background-color: var(--form-bg);
}
:root[data-theme="dark"] .leaflet-geosearch-bar form input {
    background: transparent;
    color: var(--form-text);
}
:root[data-theme="dark"] .leaflet-geosearch-bar .results {
    background-color: var(--color-bg-white);
    color: var(--form-text);
}
:root[data-theme="dark"] .leaflet-geosearch-bar .results > .active,
:root[data-theme="dark"] .leaflet-geosearch-bar .results > :hover {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
}
/* Bootstrap list-group-item-light bringt eigenes Hellgrau mit
   (z.B. Spaltenkopf im Datei-Explorer) - blieb im Dunkelmodus als
   weiße Leiste mit hellem Text stehen. */
:root[data-theme="dark"] .list-group-item-light {
    background-color: var(--color-bg-muted);
    color: var(--color-text);
}
/* EABv2: Lila ist die bewusste KI-Kennfarbe (Hex, keine Token-Rampe) -
   die hellen Violett-Flächen blieben sonst im Dunkelmodus als weiße
   Inseln stehen. */
:root[data-theme="dark"] .eab2-gek-kibtn { color: #c4b5fd; border-color: #4c1d95; }
:root[data-theme="dark"] .eab2-gek-kibtn:hover { background: #2e1065; }
:root[data-theme="dark"] .eab2-gek-wbtn.ki { color: #c4b5fd; }
:root[data-theme="dark"] .eab2-gek-wbtn.ki:hover { background: #2e1065; }
:root[data-theme="dark"] .eab2-gek-kivorschlag { background: #2e1065; border-color: #6d28d9; }
:root[data-theme="dark"] .eab2-gek-kivorschlag .kopf { color: #c4b5fd; }
:root[data-theme="dark"] .eab2-fluss.topup { background: #2e1065; color: #c4b5fd; }
/* Bootstrap btn-outline-dark: dunkler Text auf dunklem Grund war
   unsichtbar (z.B. Einfügen-Button im Datei-Explorer). */
:root[data-theme="dark"] .btn-outline-dark {
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
:root[data-theme="dark"] .btn-outline-dark:hover:not(:disabled) {
    background-color: var(--color-bg-muted);
    color: var(--color-text);
}

.card {
    background-color: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.card-padded {
    padding: 1.5rem;
}

.card-header {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.hidden {
    display: none;
}

.sub-headline {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--schnee-900);
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
    margin-top: 1rem;
}

/* Utility Classes */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Global Header Buttons (Chat, Fehler melden) - nur auf XL-Bildschirmen */
.global-header-btn {
    display: none !important;
}

@media (min-width: 1280px) {
    .global-header-btn {
        display: flex !important;
    }
}


/* ===== 03-formulare.css ===== */
/* =============================================================================
   3. FORMULARE & INPUTS
   Alles über CSS-Variablen (--form-*) steuerbar.
   Klassen: .form-group, .form-label, .form-input, .form-select,
            .form-hint, .form-error, .form-addon, .form-row,
            .feld-raster, .feld-block
   ============================================================================= */

/* ---------------------------------------------------------------------------
   .form-input / .form-select - Basis-Styling für alle Eingabefelder
   Funktioniert standalone ODER automatisch innerhalb von .form-group
   --------------------------------------------------------------------------- */
.form-input,
.form-select,
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not(.no-form-style),
.form-group select:not(.no-form-style),
.form-group textarea:not(.no-form-style),
.feld-block input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not(.no-form-style),
.feld-block select:not(.no-form-style),
.feld-block textarea:not(.no-form-style) {
    display: block;
    width: 100%;
    padding: var(--form-padding-y) var(--form-padding-x);
    font-size: var(--form-font-size);
    line-height: var(--form-line-height);
    color: var(--form-text);
    background-color: var(--form-bg);
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    transition: border-color var(--transition), box-shadow var(--transition);
    font-family: inherit;
    /* Sicherung: sollte die Schrift einmal abweichen, bleibt die Höhe. */
    min-height: var(--btn-höhe);
}

.form-input::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--form-placeholder);
}

.form-input:focus,
.form-select:focus,
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.no-form-style):focus,
.form-group select:not(.no-form-style):focus,
.form-group textarea:not(.no-form-style):focus,
.feld-block input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.no-form-style):focus,
.feld-block select:not(.no-form-style):focus,
.feld-block textarea:not(.no-form-style):focus {
    outline: none;
    border-color: var(--form-border-focus);
    box-shadow: 0 0 0 3px var(--form-ring);
}

.form-input:disabled,
.form-select:disabled,
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
    background-color: var(--form-disabled-bg);
    color: var(--form-disabled-text);
    cursor: not-allowed;
}

/* Select-Pfeil */
.form-select,
.form-group select:not(.no-form-style),
.feld-block select:not(.no-form-style) {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
}

/* Größenvarianten - jede trifft eine der Schalterhöhen, damit Feld und
   Schalter in derselben Zeile gleich hoch sind. */
.form-input-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    min-height: var(--btn-höhe-xs);   /* 28px */
}

.form-input-lg {
    padding: 0.625rem 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    min-height: var(--btn-höhe-lg);   /* 46px */
}

/* Breiten-Varianten für Inputs mit Einheiten */
.form-input-narrow { width: 80px; }
.form-input-medium { width: 120px; }
.form-input-wide   { width: 200px; }
.form-input-auto   { display: inline-block !important; width: auto !important; }
.form-input-right  { text-align: right; }

/* ---------------------------------------------------------------------------
   Datums- und Zeitfelder
   Gilt für jede Variante (.form-input, .form-input-sm, .filter-toolbar-input)
   und ergänzt nur, was diese Feldtypen zusätzlich brauchen: das native
   Innenleben erbt die Feldfarbe, das Kalendersymbol wird bedienbar. Der
   Kalender selbst folgt dem `color-scheme` aus 01-farben-und-themen.css.
   --------------------------------------------------------------------------- */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    /* Chrome setzt sonst eine eigene Mindestbreite und schneidet das Symbol ab. */
    min-width: 0;
}

input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit,
input[type="week"]::-webkit-datetime-edit {
    color: inherit;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

/* Leere Feldteile (TT, MM, JJJJ) sind sonst so dunkel wie ein gefüllter Wert. */
input[type="date"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-text {
    color: var(--color-text-muted);
    padding: 0 0.125rem;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Sicherheitsnetz: ein Datumsfeld ganz ohne Klasse würde sonst im nativen
   Aussehen stehenbleiben. `:not([class])` greift nur dort und kann keine
   bestehende Gestaltung übersteuern. */
input[type="date"]:not([class]),
input[type="time"]:not([class]),
input[type="datetime-local"]:not([class]),
input[type="month"]:not([class]),
input[type="week"]:not([class]) {
    display: block;
    width: 100%;
    padding: var(--form-padding-y) var(--form-padding-x);
    font-size: var(--form-font-size);
    line-height: var(--form-line-height);
    color: var(--form-text);
    background-color: var(--form-bg);
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    min-height: var(--btn-höhe);
    font-family: inherit;
}

input[type="date"]:not([class]):focus,
input[type="time"]:not([class]):focus,
input[type="datetime-local"]:not([class]):focus,
input[type="month"]:not([class]):focus,
input[type="week"]:not([class]):focus {
    outline: none;
    border-color: var(--form-border-focus);
    box-shadow: 0 0 0 3px var(--form-ring);
}

/* Filter-Toolbars: einzeilige Leisten mit Datum-Inputs, Buttons etc. */
.filter-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}
.filter-toolbar-input {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    background: var(--form-bg);
    color: var(--form-text);
}
.filter-toolbar-input:focus {
    outline: none;
    border-color: var(--form-border-focus);
    box-shadow: 0 0 0 3px var(--form-ring);
}

/* ---------------------------------------------------------------------------
   .form-label
   --------------------------------------------------------------------------- */
.form-label,
.form-group > label,
.feld-block > label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--form-font-size);
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 0.375rem;
}

.form-label svg,
.form-group > label svg,
.feld-block > label svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   .form-group - Container für Label + Input + Hint
   --------------------------------------------------------------------------- */
.form-group {
    margin-bottom: 0.75rem;
}

/* ---------------------------------------------------------------------------
   .feld-raster / .feld-block - Maßraster für Eingabefelder

   Ein festes Spaltenraster (`grid-cols-4`) zwingt jedes Feld in ein Viertel
   der Breite: eine vierstellige Zahl bekam so einen 1100 Pixel langen Kasten.
   Das Maßraster füllt stattdessen mit Feldern fester Mindestbreite auf
   (`--feld-mass`, am Raster änderbar).

   Jedes .feld-block trägt Beschriftung, Feld und Hinweis untereinander. Die
   Beschriftung bekommt Platz für zwei Zeilen und sitzt darin unten, damit die
   Felder einer Reihe fluchten, auch wenn eine Beschriftung umbricht.

   Innerhalb von .feld-block braucht ein input/select/textarea KEINE weitere
   Klasse - genau dieses Vergessen erzeugte rahmenlose Zahlenfelder neben
   gerahmten Auswahlfeldern.
   --------------------------------------------------------------------------- */
.feld-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--feld-mass, 13rem), 1fr));
    gap: 0.875rem 1.25rem;
    align-items: start;
    /* Ohne Obergrenze wird aus einem Feld für eine zweistellige Zahl auf einem
       breiten Bildschirm ein 450 Pixel langer Kasten. */
    max-width: 76rem;
}

.feld-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Steht ein Feld allein im Raster, füllt es sonst die ganze Zeile: ein
       Meter breites Eingabefeld für eine zweistellige Zahl. */
    max-width: 30rem;
}

.feld-block > label {
    align-items: flex-end;
    min-height: 2.125rem;
    line-height: 1.25;
}

/* Über die ganze Rasterbreite - für Felder, die wirklich lang sind
   (Freitext, Namen) oder für einen Block, der keine Nachbarn duldet. */
.feld-weit { grid-column: 1 / -1; }

/* Doppelte Spalte - für Auswahlfelder mit langen Einträgen, die in einer
   einfachen Spalte abgeschnitten würden. Bleibt einspaltig, sobald das
   Raster selbst nur noch eine Spalte hat. */
.feld-breit { grid-column: span 2; }

@media (max-width: 560px) { .feld-breit { grid-column: auto; } }

/* ---------------------------------------------------------------------------
   .form-hint / .form-error - Hilfetext und Fehlerzustand
   --------------------------------------------------------------------------- */
.form-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* Die Regeln für .form-group und .feld-block weiter oben tragen eine lange
   :not()-Kette und stechen ".form-error input" aus. Deshalb hier dieselbe
   Kette, sonst blieb der Rahmen eines Fehlerfelds unverändert. */
.form-group.form-error input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not(.no-form-style),
.feld-block.form-error input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not(.no-form-style),
.form-group.form-error select:not(.no-form-style),
.feld-block.form-error select:not(.no-form-style),
.form-group.form-error textarea:not(.no-form-style),
.feld-block.form-error textarea:not(.no-form-style),
.form-error .form-input,
.form-error input,
.form-error select,
.form-error textarea,
.form-input.is-invalid {
    border-color: var(--color-danger);
}

.form-error .form-input:focus,
.form-error input:focus,
.form-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.form-error-text {
    font-size: 0.75rem;
    color: var(--color-danger);
    margin-top: 0.25rem;
}

/* ---------------------------------------------------------------------------
   .form-addon - Einheiten-Suffix (kWh, EUR, %, etc.)
   --------------------------------------------------------------------------- */
.form-addon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-addon .form-input,
.form-addon input {
    width: auto;
    flex: 1;
}

.form-addon-text {
    font-size: var(--form-font-size);
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   .form-row - Settings-Zeile (Label links, Input rechts)
   --------------------------------------------------------------------------- */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.form-row:last-child {
    border-bottom: none;
}

.form-row-label {
    font-size: var(--form-font-size);
    color: var(--color-text-secondary);
}

.form-row-info {
    grid-column: 2 / -1;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: -0.5rem;
}

/* ---------------------------------------------------------------------------
   Checkbox / Radio - leichtes Styling
   --------------------------------------------------------------------------- */
.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* Bootstrap gibt .form-check einen Innenabstand links, den nur sein eigenes
   .form-check-input mit negativem Rand wieder aufhebt. Ohne dieses Feld
   stünde der Haken eingerückt neben den Feldern darüber. :where hält die
   Gewichtung bei einer Klasse, damit .form-check-zeile weiter gewinnt. */
.form-check:where(:not(:has(> .form-check-input))) {
    padding-left: 0;
}

/* Ankreuzfelder und Auswahlknöpfe - GLOBAL, nicht nur in .form-check.
   Vorher stand die Farbe nur hier drin, und praktisch alle der rund 260
   Felder in der Anwendung stehen woanders: die zeigten das Blau, das der
   Browser von sich aus vergibt. Eine Regel, die nur im Sonderfall greift,
   ist keine Regel - deshalb hängt sie jetzt am Element selbst.

   accent-color statt eigenem Nachbau: der Browser behält damit sein Häkchen,
   seine Tastaturbedienung und seinen Kontrast-Modus. Ein selbstgebautes Feld
   müsste all das nachbilden. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: 1rem;
    height: 1rem;
}

/* Liste aus Ankreuffeldern - eine Zeile je Wahl, die ganze Zeile klickbar.
   Die Modulauswahl auf der Startseite hat sich ihre Zeilen bis dahin selbst
   aus Tailwind-Klassen zusammengesetzt. Dieselbe Liste an anderer Stelle
   hätte wieder bei null angefangen. */
.form-check-liste {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.form-check-zeile {
    padding: 0.5rem;
    border-radius: var(--form-radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    transition: background-color var(--transition);
}
.form-check-zeile:hover {
    background-color: var(--schnee-50);
}

/* ---------------------------------------------------------------------------
   Slider / Range
   --------------------------------------------------------------------------- */
.form-range,
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: var(--color-border);
    outline: none;
    border-radius: 9999px;
    height: 6px;
}

.form-range::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid var(--color-bg-white);
    box-shadow: var(--shadow-sm);
}

.form-range::-moz-range-thumb,
input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid var(--color-bg-white);
    box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------------
   Rückwärtskompatibilität - alte Klassen auf neue umleiten
   Werden bei der Migration Datei für Datei entfernt.
   --------------------------------------------------------------------------- */
.input-group { margin-bottom: 0.75rem; }
.input-group > label { display: flex; align-items: center; gap: 0.375rem; font-size: var(--form-font-size); font-weight: 500; color: var(--color-text-secondary); margin-bottom: 0.375rem; }
.input-group > label svg { width: 1rem; height: 1rem; color: var(--color-text-muted); }
.input-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not(.no-form-style),
.input-group select:not(.no-form-style),
.input-group textarea:not(.no-form-style) {
    display: block; width: 100%; padding: var(--form-padding-y) var(--form-padding-x); font-size: var(--form-font-size);
    color: var(--form-text); background-color: var(--form-bg); border: 1px solid var(--form-border);
    border-radius: var(--form-radius); transition: border-color var(--transition), box-shadow var(--transition);
}
.input-group input:focus, .input-group select:focus, .input-group textarea:focus {
    outline: none; border-color: var(--form-border-focus); box-shadow: 0 0 0 3px var(--form-ring);
}
.input-text { display: block; width: 100%; padding: var(--form-padding-y) var(--form-padding-x); font-size: var(--form-font-size);
    color: var(--form-text); background-color: var(--form-bg); border: 1px solid var(--form-border);
    border-radius: var(--form-radius); transition: border-color var(--transition), box-shadow var(--transition);
}
.input-text:focus { outline: none; border-color: var(--form-border-focus); box-shadow: 0 0 0 3px var(--form-ring); }
.edit-input { width: 80px; text-align: right; padding: 0.25rem 0.5rem; border: 1px solid var(--form-border); border-radius: var(--form-radius); font-size: var(--form-font-size); }
.edit-input:focus { outline: none; border-color: var(--form-border-focus); box-shadow: 0 0 0 3px var(--form-ring); }
.settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); }
.settings-row:last-child { border-bottom: none; }
.settings-label { font-size: var(--form-font-size); color: var(--color-text-secondary); }
.settings-input-group { display: flex; align-items: center; }
.settings-input { width: 100px; text-align: right; border: 1px solid var(--form-border); border-radius: var(--form-radius); padding: 0.25rem 0.5rem; font-size: var(--form-font-size); }
.settings-input:focus { outline: none; border-color: var(--form-border-focus); box-shadow: 0 0 0 3px var(--form-ring); }
.settings-unit { margin-left: 0.5rem; font-size: var(--form-font-size); color: var(--color-text-muted); width: 80px; white-space: nowrap; }
.settings-info { grid-column: 2 / -1; font-size: 0.75rem; color: var(--color-text-muted); margin-top: -0.5rem; }
.cost-input { padding: 0.25rem 0.5rem; width: 6rem; border: 1px solid var(--form-border); border-radius: var(--form-radius); font-size: var(--form-font-size); }
.cost-input:focus { outline: none; border-color: var(--form-border-focus); box-shadow: 0 0 0 3px var(--form-ring); }
.module-settings { background-color: var(--color-bg-muted); padding: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }


/* ===== 04-abzeichen.css ===== */
/* =============================================================================
   3b. BADGES / TAGS
   Kleine farbige Statusanzeigen. Nutzen CSS-Variablen aus :root.
   Klassen: .badge, .badge-{primary,success,danger,warning,neutral,purple}
            .badge-sm, .badge-lg, .badge-square (eckig statt pill)
   ============================================================================= */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    border-radius: 9999px;
    white-space: nowrap;
    vertical-align: middle;
}

/* Farben (soft-Stil: heller Hintergrund, dunkle Schrift) */
.badge-primary   { background: var(--color-primary-soft); color: var(--color-primary-text); }
.badge-success   { background: var(--color-success-soft); color: var(--color-success-text); }
.badge-danger    { background: var(--color-danger-soft);  color: var(--color-danger-text); }
.badge-warning   { background: var(--color-warning-soft); color: var(--color-warning-text); }
.badge-neutral   { background: var(--color-bg); color: var(--color-text-muted); }
.badge-purple    { background: #f3e8ff; color: #7c3aed; }
.badge-orange    { background: #fff7ed; color: #c2410c; }

/* Größen */
.badge-sm { padding: 0 0.375rem; font-size: 0.6875rem; }
.badge-lg { padding: 0.25rem 0.75rem; font-size: 0.875rem; }

/* Eckige Variante (für Legenden, Tags) */
.badge-square { border-radius: var(--radius); }

/* Zähler-Badge (für Tab-Counter) */
.badge-count {
    min-width: 1.25rem;
    padding: 0 0.375rem;
    text-align: center;
    font-weight: 600;
}

/* Animierter Badge (z.B. "Downloading") */
.badge-pulse { animation: badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }


/* =============================================================================
   ICON-PLAKETTE - das Icon-Kästchen für Kachel-Überschriften

   Das neue globale Format für Überschriften: nicht ein nacktes Icon neben dem
   Text, sondern ein farbiges Kästchen mit dem Icon darin. Vorbild und Ursprung
   ist das Energiemanagement, wo es als .ems-icon-badge entstanden ist - hier
   steht es global, damit es jedes Modul verwenden kann.

   Verwendung:
     <div class="karten-kopf">
       <div class="icon-plakette blau"><svg><use href="#icon-bolt"/></svg></div>
       <div><h2 class="karten-kopf-titel">Stromtarif</h2>
            <p class="karten-kopf-sub">Untertitel</p></div>
     </div>

   Farben: blau (Standard-/Primärthema), gruen, amber, lila, rot, grau.
   Zusatz: .klein für kompakte Köpfe.

   .ems-icon-badge steht als Zweitname daneben, damit das bestehende
   Energiemanagement-Markup unverändert weiterläuft.
   ============================================================================= */
.icon-plakette,
.ems-icon-badge {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Direkte Form: Die Plakette hat eine kräftige Eigenfarbe und trägt
       darauf immer weiße Symbole - auch im Dunkelmodus. */
    color: rgb(var(--basis-weiss-rgb));
    box-shadow: inset 0 -6px 12px rgba(0,0,0,.12);
}

.icon-plakette svg,
.ems-icon-badge svg { width: 1.25rem; height: 1.25rem; }

.icon-plakette.gruen, .ems-icon-badge.gruen { background: linear-gradient(135deg, #34d399, var(--color-success)); }
.icon-plakette.blau,  .ems-icon-badge.blau  { background: linear-gradient(135deg, var(--petrol-400), var(--color-primary)); }
.icon-plakette.amber, .ems-icon-badge.amber { background: linear-gradient(135deg, var(--sonne-400), var(--color-warning-hover)); }
.icon-plakette.lila,  .ems-icon-badge.lila  { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.icon-plakette.grau,  .ems-icon-badge.grau  { background: linear-gradient(135deg, var(--color-border-strong), var(--color-text-placeholder)); }
.icon-plakette.rot { background: linear-gradient(135deg, #fb7185, var(--color-danger)); }

.icon-plakette.klein, .ems-icon-badge.klein { width: 2rem; height: 2rem; border-radius: .55rem; }
.icon-plakette.klein svg, .ems-icon-badge.klein svg { width: .95rem; height: .95rem; }

/* Der Kopf drumherum: Plakette links, Titel und Untertitel rechts daneben. */
.karten-kopf {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding-bottom: .75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.karten-kopf-titel {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}

.karten-kopf-sub {
    font-size: .78rem;
    color: var(--color-text-muted);
    margin: .1rem 0 0 0;
    overflow-wrap: anywhere;
}

/* Rechts danebenstehende Bedienelemente schieben sich selbst nach außen. */
.karten-kopf-aktionen { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; margin-left: auto; }

/* ===== 05-knöpfe.css ===== */
/* =============================================================================
   4. BUTTONS
   ============================================================================= */

.edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 0.5rem;
    color: var(--color-text-placeholder);
    transition: color 0.2s;
    line-height: 1;
}

.edit-btn:hover {
    color: var(--color-primary);
}

.reset-btn {
    background-color: var(--color-danger);
    color: white;
    border-radius: 50%;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s;
    margin-left: 0;
    margin-right: 0.5rem;
}

.reset-btn:hover {
    transform: rotate(360deg);
}

.settings-btn {
    color: var(--color-text-muted);
    transition: all 0.2s ease-in-out;
}

.settings-btn:hover {
    color: var(--color-primary-text);
    transform: rotate(45deg);
}

/* Tab Buttons */
.tab-link {
    @apply py-4 px-1 border-b-2 font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300;
}

.active-tab {
    @apply border-blue-500 text-blue-600;
}

.tab-button {
    @apply w-full text-center px-4 py-2 rounded-lg font-semibold text-gray-600 transition-colors duration-200;
}

/* Achtung: @apply wirkt hier nicht - main.css läuft nicht durch den
   Tailwind-Build. Deshalb echte Deklarationen mit Tokens; die früheren
   Hex-Werte (#eef2ff/#4f46e5) waren Alt-Indigo und drehten im Dunkelmodus
   nicht mit. */
.tab-button.active {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-weight: 600;
    box-shadow: var(--shadow-md);
}

.tab-button:not(.active):hover {
    @apply bg-gray-300;
}

/* Long-term Simulation Buttons */
.long-term-sim-btn {
    background-color: transparent;
    color: var(--schnee-600); /* gray-600 */
    transition: all 0.2s;
}

.long-term-sim-btn.active {
    background-color: var(--color-bg-white);
    color: var(--color-text); /* gray-900 */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* ---------------------------------------------------------------------------
   Globales Button-System (.btn)
   Varianten: -primary, -secondary, -danger, -ghost, -success, -warning
   Größen:    -xs, -sm, (default), -lg
   Zustände:  :disabled, .btn-loading
   --------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    /* Das Polster gibt nur noch den Abstand zur Seite vor - die Höhe kommt
       aus min-height, damit Text- und Icon-Schalter gleich hoch sind. */
    padding: 0 1rem;
    min-height: var(--btn-höhe);
    font-size: var(--form-font-size);
    font-weight: 500;
    line-height: var(--form-line-height);
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
    font-family: inherit;
}

/* Varianten */
.btn-primary {
    background: var(--color-primary);
    color: var(--color-bg-white);
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

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

.btn-danger {
    background: var(--color-danger);
    color: var(--color-bg-white);
    border-color: var(--color-danger);
}
.btn-danger:hover {
    background: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
}

.btn-ghost {
    background: none;
    color: var(--color-text-muted);
    border-color: transparent;
}
.btn-ghost:hover {
    color: var(--color-text-secondary);
    background: var(--color-secondary-hover);
}

/* Führt zum nächsten Schritt im Ablauf ("Weiter zu Kosten", "Wirtschaftlichkeit
   →"). Bewusst NICHT btn-success: Grün heißt in diesem System "läuft" bzw.
   "erfolgreich" - ein Weiter-Schalter meldet keinen Erfolg, er ist die
   Hauptaktion der Seite. Das Grün stach zwischen Petrol und Sonne heraus,
   ohne etwas zu bedeuten.
   Eigene Klasse statt btn-primary, damit "weiter" und "speichern" später
   unterscheidbar bleiben, falls sie es sein sollen. */
.btn-weiter {
    background: var(--color-primary);
    color: var(--color-bg-white);
    border-color: var(--color-primary);
}
.btn-weiter:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-success {
    background: var(--color-success);
    color: var(--color-bg-white);
    border-color: var(--color-success);
}
.btn-success:hover {
    background: var(--color-success-hover);
    border-color: var(--color-success-hover);
}

.btn-warning {
    background: var(--color-warning);
    color: var(--color-bg-white);
    border-color: var(--color-warning);
}
.btn-warning:hover {
    background: var(--color-warning-hover);
    border-color: var(--color-warning-hover);
}

/* Soft-Varianten (heller Hintergrund, dunkle Textfarbe) */
.btn-primary-soft {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    border-color: var(--color-primary-soft-hover);
}
.btn-primary-soft:hover {
    background: var(--color-primary-soft-hover);
}

.btn-danger-soft {
    background: var(--color-danger-soft);
    color: var(--color-danger-text);
    border-color: var(--color-danger-soft-hover);
}
.btn-danger-soft:hover {
    background: var(--color-danger-soft-hover);
}

.btn-success-soft {
    background: var(--color-success-soft);
    color: var(--color-success-text);
    border-color: var(--color-success-soft-hover);
}
.btn-success-soft:hover {
    background: var(--color-success-soft-hover);
}

.btn-warning-soft {
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    border-color: var(--color-warning-soft);
}
.btn-warning-soft:hover {
    background: var(--color-warning-soft-hover);
}

/* Gesperrte Aktion, die kein <button> ist (Hinweis auf die Vollversion).
   Sieht aus wie ein Knopf, verhält sich wie Text. */
.btn-gesperrt {
    background: var(--color-bg-muted);
    color: var(--color-text-placeholder);
    border-color: transparent;
    cursor: not-allowed;
}
.btn-gesperrt:hover {
    background: var(--color-bg-muted);
    color: var(--color-text-placeholder);
}

/* Größen */
.btn-xs {
    padding: 0 0.5rem;
    min-height: var(--btn-höhe-xs);
    font-size: 0.75rem;
    line-height: 1rem;
    gap: 0.25rem;
}

.btn-sm {
    padding: 0 0.75rem;
    min-height: var(--btn-höhe-sm);
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.btn-lg {
    padding: 0 1.25rem;
    min-height: var(--btn-höhe-lg);
    font-size: 1rem;
    line-height: 1.5rem;
}

/* Zustände */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Bootstrap bringt eigene :disabled-Varianten mit höherer Spezifität mit
   (.btn-primary:disabled → #0d6efd usw.) - hier die Token-Farben auch im
   deaktivierten Zustand erzwingen, sonst springt z.B. der deaktivierte
   Speichern-Schalter auf Bootstrap-Blau. */
.btn-primary:disabled, .btn-primary.disabled {
    background: var(--color-primary);
    color: var(--color-bg-white);
    border-color: var(--color-primary);
}
.btn-secondary:disabled, .btn-secondary.disabled {
    background: var(--color-secondary);
    color: var(--color-text-secondary);
    border-color: var(--color-secondary-border);
}
.btn-danger:disabled, .btn-danger.disabled {
    background: var(--color-danger);
    color: var(--color-bg-white);
    border-color: var(--color-danger);
}
.btn-success:disabled, .btn-success.disabled {
    background: var(--color-success);
    color: var(--color-bg-white);
    border-color: var(--color-success);
}
.btn-warning:disabled, .btn-warning.disabled {
    background: var(--color-warning);
    color: var(--color-bg-white);
    border-color: var(--color-warning);
}

.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    left: calc(50% - 0.5rem);
    top: calc(50% - 0.5rem);
}
.btn-primary.btn-loading::after,
.btn-danger.btn-loading::after,
.btn-success.btn-loading::after,
.btn-warning.btn-loading::after { color: var(--color-bg-white); }
.btn-secondary.btn-loading::after { color: var(--color-text-muted); }

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

/* Icon-only Button (quadratisch) */
/* Nur-Icon-Schalter: quadratisch und exakt so hoch wie ein Text-Schalter.
   Vorher ergab sich die Größe aus dem Polster - ein Icon-Schalter war damit
   34px neben einem 38px hohen Text-Schalter. */
.btn-icon {
    padding: 0;
    width: var(--btn-höhe);
    line-height: 1;
}
.btn-icon.btn-xs { width: var(--btn-höhe-xs); }
.btn-icon.btn-sm { width: var(--btn-höhe-sm); }
.btn-icon.btn-lg { width: var(--btn-höhe-lg); }

/* ---------------------------------------------------------------------------
   Umschalter - mehrere Möglichkeiten nebeneinander, genau eine ist gewählt
   (2D/3D, Temperatur/Dampfdruck, Tag/Woche/Monat).

   Der U-Wert-Rechner hatte das als .uw-toggle-group nur für sich gebaut und
   die gewählte Möglichkeit fast schwarz hinterlegt (--schnee-950) - eine
   Farbe, die im Farbkonzept sonst nirgends vorkommt und die deshalb aus der
   Seite herausfiel. Eine getroffene Wahl ist in dieser Anwendung petrol,
   genau wie ein Häkchen oder ein aktiver Reiter.

   <div class="umschalter">
       <button class="active">2D</button>
       <button>3D</button>
   </div>
   --------------------------------------------------------------------------- */
.umschalter {
    display: inline-flex;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--form-radius);
    overflow: hidden;
    background: var(--color-bg-white);
}
.umschalter > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    /* Der Rahmen sitzt an der Gruppe, nicht am einzelnen Schalter - seine
       2px kommen also oben drauf. Ohne den Abzug ist die Gruppe 36px hoch
       und steht neben einem 34px-Schalter sichtbar versetzt. */
    min-height: calc(var(--btn-höhe-sm) - 2px);
    padding: 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    background: transparent;
    color: var(--color-text-muted);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition), color var(--transition);
}
.umschalter > button + button {
    border-left: 1px solid var(--color-border-strong);
}
.umschalter > button:hover:not(.active) {
    background: var(--color-bg-muted);
    color: var(--color-text);
}
.umschalter > button.active {
    background: var(--color-primary);
    color: var(--color-bg-white);
}
/* Der Fokusrahmen liegt innen, sonst schneidet ihn das overflow der Gruppe ab. */
.umschalter > button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.umschalter > button svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

/* Größen, passend zu den Schalterhöhen (je 2px Gruppenrahmen abgezogen) */
.umschalter-xs > button { min-height: calc(var(--btn-höhe-xs) - 2px); padding: 0 0.5rem; font-size: 0.75rem; }
.umschalter-lg > button { min-height: calc(var(--btn-höhe) - 2px); padding: 0 1rem; font-size: 0.875rem; }

/* ---------------------------------------------------------------------------
   Von der KI gefüllt - der Wert im Feld kommt nicht von Hand.

   Stand vorher zweimal wortgleich als style.backgroundColor = '#f3e8ff' und
   borderLeft = '3px solid #9333ea' im JavaScript: rohe Lila-Werte, an Rampe
   und Rollen vorbei, per CSS nicht mehr korrigierbar.
   --------------------------------------------------------------------------- */
.ki-gefüllt {
    border-left: 3px solid var(--color-primary);
}
label.ki-gefüllt {
    background: var(--color-primary-subtle);
    padding-left: 8px;
    border-radius: var(--form-radius);
}
.ki-gefüllt input[type="checkbox"],
input.ki-gefüllt[type="checkbox"] {
    accent-color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Klappkasten - ein Kopf, der seinen Inhalt auf- und zuklappt.

   Kopf und Inhalt sind EIN Kasten: gemeinsamer Rahmen, gemeinsame Rundung,
   getrennt nur durch eine Linie. Vorher hatte jedes Modul das selbst gebaut,
   und der Inhalt stand als eigener Kasten mit 8px Abstand unter dem Kopf -
   er sah aus wie ein fremder Block, nicht wie der Inhalt dieses Kopfes.

   <div class="klappkasten offen">
       <button class="klappkasten-kopf">Titel <svg …/></button>
       <div class="klappkasten-inhalt">…</div>
   </div>
   --------------------------------------------------------------------------- */
.klappkasten {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-white);
}
.klappkasten + .klappkasten {
    margin-top: 0.5rem;
}
.klappkasten-kopf {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    background: var(--color-primary-subtle);
    color: var(--color-primary-text);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition);
}
.klappkasten-kopf:hover {
    background: var(--color-primary-soft);
}
.klappkasten-kopf svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
/* Der Pfeil zeigt nach oben, wenn offen - das Zeichen für "wieder zuklappen" */
.klappkasten.offen .klappkasten-kopf svg {
    transform: rotate(180deg);
}
.klappkasten-inhalt {
    display: none;
    padding: 1rem;
    /* Die Linie ist die einzige Trennung - kein Abstand, keine zweite
       Rundung: der Inhalt gehört sichtbar zu seinem Kopf. */
    border-top: 1px solid var(--color-border);
}
.klappkasten.offen .klappkasten-inhalt {
    display: block;
}

/* Variante mit <details>/<summary>: klappt von selbst, ohne JS.
   Dafür regelt "open" statt der Klasse "offen", was sichtbar ist.

   <details class="klappkasten">
       <summary class="klappkasten-kopf">Titel <svg …/></summary>
       <div class="klappkasten-inhalt">…</div>
   </details> */
details.klappkasten > summary.klappkasten-kopf {
    list-style: none;
}
details.klappkasten > summary.klappkasten-kopf::-webkit-details-marker,
details.klappkasten > summary.klappkasten-kopf::marker {
    display: none;
    content: '';
}
details.klappkasten > .klappkasten-inhalt {
    display: block;
}
/* Der Pfeil kommt aus dem CSS, nicht aus dem Markup: das native Dreieck ist
   oben abgeschaltet, und ohne Ersatz sieht man dem Kopf nicht an, dass er
   klappt. Zwei Ränder über Eck ergeben den Winkel - in currentColor, ohne
   Bilddatei und ohne eine Farbe, die hier hineingeschrieben werden müsste. */
details.klappkasten > summary.klappkasten-kopf::after {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    flex-shrink: 0;
    margin-top: -0.2rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease, margin-top 0.2s ease;
}
details.klappkasten[open] > summary.klappkasten-kopf::after {
    transform: rotate(-135deg);
    margin-top: 0.2rem;
}

/* ---------------------------------------------------------------------------
   Fortschrittsbalken - ein Lauf, der zu einem Anteil fertig ist.
   (Für Fortschritt in abgezählten Schritten: .gm-fortschritt im Modal-CSS.)

   <div class="fortschrittsbalken"><span style="width:40%"></span></div>
   --------------------------------------------------------------------------- */
.fortschrittsbalken {
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--color-border);
    overflow: hidden;
}
.fortschrittsbalken > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 9999px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}


/* ===== 06-karten.css ===== */
/* =============================================================================
   5. CARDS & RESULTS
   ============================================================================= */

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border); /* gray-200 */
}

.result-item:last-child {
    border-bottom: none;
}

.result-label {
    color: var(--schnee-600); /* gray-600 */
    display: flex;
    align-items: center;
}

.result-label svg {
    width: 1rem;
    height: 1rem;
    margin-right: 0.75rem;
    color: var(--color-primary);
}

.result-value {
    color: var(--color-text); /* gray-900 */
    font-weight: 600;
    font-size: 1.125rem;
    text-align: right;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.result-value .unit,
.sub-text {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-muted); /* gray-500 */
    margin-left: 0.25rem;
}

.sub-text {
    width: 100%;
    text-align: right;
    font-size: 0.75rem;
}

/* Delta Boxes */
.delta-box {
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
}

.delta-box .unit {
    color: white;
}

.delta-green {
    background-color: var(--color-success);
}

.delta-red {
    background-color: var(--color-danger);
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}


/* ===== 07-klappkästen.css ===== */
/* =============================================================================
   6. DETAILS/SUMMARY KOMPONENTE
   ============================================================================= */

details.result-item {
    display: block;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
}

details.result-item:last-child {
    border-bottom: none;
}

details.result-item > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 0.75rem 0;
    width: 100%;
    cursor: pointer;
}

details.result-item > summary::-webkit-details-marker {
    display: none;
}

details.result-item > summary::marker {
    display: none;
    content: '';
}

details.result-item[open] > summary .arrow-icon,
details.result-item[open] > summary .consumer-chevron {
    transform: rotate(180deg);
}

.arrow-icon {
    transition: transform 0.2s;
    color: var(--color-primary);
}

.details-content {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 0;
    font-size: 0.875rem;
    color: var(--schnee-600);
    background-color: var(--color-bg-muted);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
    text-align: left;
}

.details-content > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--color-border);
}

.details-content > div:last-child {
    border-bottom: none;
}

.details-content > div > span:first-child {
    color: var(--color-text-muted);
}

.details-content > div > span:last-child {
    font-weight: 500;
    color: var(--color-text-secondary);
}

.details-content hr {
    border: none;
    border-top: 1px solid var(--color-border-strong);
    margin: 0.5rem 0;
}

/* Akkordeon Summary Styling (einheitlich wie PV-Einstellungen) */
details summary {
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.15s;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::marker {
    display: none;
    content: '';
}

/* Chevron-Pfeil rechts via ::after (universell, kein HTML nötig) */
details summary::after {
    content: '\276F';
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-text-placeholder);
    transition: transform 0.2s ease;
}
details[open] summary::after {
    transform: rotate(90deg);
}

/* SVG-Icons in summary: inline halten */
details summary svg {
    flex-shrink: 0;
}

/* result-item Details: Kein ::before/::after Pfeil (haben eigenen blauen Pfeil rechts) */
details.result-item > summary::before,
details.result-item > summary::after {
    content: none;
    display: none;
}


/* ===== 08-hinweise.css ===== */
/* =============================================================================
   7. TOASTS & NOTIFICATIONS
   WICHTIG: Kein @apply verwenden - wir nutzen Tailwind CDN!
   ============================================================================= */

/* Toast-Container: oben rechts, unter dem Header */
.toast-container {
    position: fixed;
    top: 4.5rem; /* unter Header (h-14/h-16 + etwas Abstand) */
    right: 1rem;
    z-index: 100002;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 420px;
    width: 100%;
    pointer-events: none;
}

@media (min-width: 640px) {
    .toast-container {
        top: 5rem;
    }
}

.toast-container > .toast {
    display: flex !important; /* Bootstrap setzt .toast:not(.show){display:none} */
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: white;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: none;
    border: none;
    background-image: none;
}

.toast-container > .toast.toast-visible {
    opacity: 1;
    transform: translateX(0);
}

.toast-container > .toast.toast-exit {
    opacity: 0;
    transform: translateX(100%);
}

.toast-message {
    flex: 1;
    word-break: break-word;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1;
    transition: color 0.15s;
}

.toast-close:hover {
    color: white;
}

.toast-aktion {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0.375rem;
    color: white;
    cursor: pointer;
    padding: 0.125rem 0.625rem;
    font-weight: 600;
    font-size: 0.8125rem;
    transition: background-color 0.15s;
}

.toast-aktion:hover,
.toast-aktion:focus-visible {
    background: rgba(255, 255, 255, 0.32);
}

.toast-container > .toast.info {
    background-color: var(--color-primary);
}

.toast-container > .toast.success {
    background-color: var(--color-success);
}

.toast-container > .toast.error {
    background-color: var(--color-danger); /* red-600 */
}

.toast-container > .toast.warning {
    background-color: var(--color-warning-hover); /* amber-600 */
}

.toast-container > .toast.danger {
    background-color: var(--color-danger); /* red-600 - Alias für error */
}


/* ===== 09-modals.css ===== */
/* =============================================================================
   8. MODAL SYSTEM
   ============================================================================= */

/* DEPRECATED - Neue Modale nutzen .gm-overlay aus global-modals.css
   Diese Klasse bleibt für bestehende nicht-migrierte Modale. */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 49 !important;
    background-color: rgba(31, 41, 55, 0.75) !important; /* bg-gray-800 with 75% opacity */
    padding-top: 4rem !important; /* 64px - Platz für Nav-Header (h-16) */
}

/* Full-screen modal variant (covers everything including nav) */
.modal-overlay-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
}


/* =============================================================================
   8b. GLOBAL TASK MANAGER
   ============================================================================= */

#global-task-container {
    z-index: 100001;
}

#task-dropdown {
    animation: taskDropdownFadeIn 0.15s ease-out;
}

@keyframes taskDropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#task-dropdown::-webkit-scrollbar {
    width: 6px;
}

#task-dropdown::-webkit-scrollbar-track {
    background: var(--color-bg);
}

#task-dropdown::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 3px;
}


/* ===== 10-reiter.css ===== */
/* =============================================================================
   9. TAB NAVIGATION
   ============================================================================= */

/* Tab Navigation Buttons - Clean, professional style */
.tab-nav-button {
    border: none;
    background-color: var(--color-bg-muted);
    color: var(--color-text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.tab-nav-button.active {
    color: var(--color-bg-white);
    background-color: var(--color-primary);
    box-shadow: 0 1px 3px var(--form-ring);
}

.tab-nav-button:not(.active):hover:not(.disabled) {
    color: var(--color-text);
    background-color: var(--color-border);
}

.tab-nav-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--color-text-placeholder);
}

/* Photovoltaik Container */
#photovoltaik-container {
    min-height: 100vh;
    background-color: var(--color-bg);
}

/* Tab Panes - Simple show/hide */
.tab-pane {
    display: none;
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

.tab-pane.active {
    display: block;
}


/* ===== 11-lader.css ===== */
/* =============================================================================
   12. LOADER/SPINNER - Einheitliches System
   Klassen: .spinner, .spinner-sm, .spinner-lg, .spinner-xl, .spinner-white
   Alte Klassen (.area-spinner, .loader-spinner, .animate-spin) bleiben als Alias.
   ============================================================================= */

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

/* Basis-Spinner (16px, Akzentfarbe) */
.spinner,
.area-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--form-ring);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* Klein (12px, für Buttons/Inline) */
.spinner-sm,
.area-spinner-sm {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--form-ring);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* Mittel (24px, fuer Karten/Bereiche) */
.spinner-md {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid var(--form-ring);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* Groß (40px, fuer Overlays/Loading-States) */
.spinner-lg {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--form-ring);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* Extra groß (60px, für Vollbild-Overlays)

   In der Akzentfarbe und nicht in Weiß: Diese Größe steckt in Ladefenstern
   mit heller Fläche (Dachfläche, EAB), dort war ein weißer Kreis auf weißem
   Grund schlicht nicht zu sehen - das Fenster wirkte tot, obwohl gearbeitet
   wurde. Auf dunklem Grund (Verschaltung) gibt es .spinner-white. */
.spinner-xl,
.loader-spinner {
    display: inline-block;
    width: 3.75rem;
    height: 3.75rem;
    border: 4px solid var(--color-border);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* Weiße Variante (fuer dunkle Hintergruende) */
.spinner-white { border-color: rgba(255,255,255,0.3); border-top-color: var(--color-bg-white); }
.spinner-sm.spinner-white { border-color: rgba(255,255,255,0.3); border-top-color: var(--color-bg-white); }
.spinner-md.spinner-white { border-color: rgba(255,255,255,0.3); border-top-color: var(--color-bg-white); }
.spinner-lg.spinner-white { border-color: rgba(255,255,255,0.3); border-top-color: var(--color-bg-white); }

/* Tailwind-Kompatibilitaet */
.animate-spin { animation: spin 0.7s linear infinite; }

#loader-overlay { backdrop-filter: blur(4px); }


/* ===== 12-fremd-select2.css ===== */
/* =============================================================================
   10. SELECT2 DROPDOWN
   ============================================================================= */

.select2-container--default .select2-results__option {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    line-height: 1.5 !important;
}

.select2-container--default .select2-selection--single {
    font-size: 0.75rem !important;
    height: auto !important;
    padding: 0.5rem 0.75rem !important;
    margin-top: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 0.75rem !important;
}

/* z-index für Select2 */
.select2-container {
    z-index: 1 !important;
}

/* WICHTIG: Das geöffnete Dropdown muss ÜBER den sticky Headern sein (z-40, z-50) */
.select2-dropdown {
    z-index: 100000 !important;
}

.select2-container--open {
    z-index: 100000 !important;
}

/* FOUC-Prevention für Project-Select */
/* Das native Select komplett verstecken bis Select2 initialisiert ist */
/* Verhindert dass Benutzer das native Dropdown sieht/anklickt */
#project-select:not(.select2-hidden-accessible) {
    /* Unsichtbar aber nimmt Platz ein für korrektes Layout */
    opacity: 0 !important;
    pointer-events: none !important;
    height: 38px !important;
    width: 320px !important;
}

/* Der Select2-Container soll die Breite vom Original-Select erben */
#project-select + .select2-container {
    width: 320px !important;
    min-width: 320px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Das Projekt-Label muss über dem Select2-Container bleiben */
#project-select ~ .select2-container,
.relative > label.absolute {
    /* Label ist bereits z-10, daher sollte es über dem Select2 sein */
}

/* Sicherstellen dass das Label nicht abgeschnitten wird */
.relative:has(#project-select) {
    overflow: visible !important;
}

/* Für EAB-Modul: w-72 (288px) */
#project-select.sm\:w-72 + .select2-container {
    width: 288px !important;
    min-width: 288px !important;
}


/* ===== 13-fremd-leaflet.css ===== */
/* =============================================================================
   11. LEAFLET & GEOSEARCH
   GeoSearch Styles sind jetzt in geosearch-custom.css (lokal)
   ============================================================================= */

/* Die Karte bleibt in ihrem Rahmen (Stapelkontext)
   ---------------------------------------------------------------------------
   Leaflet vergibt an seine Ebenen feste Höhen: Kacheln 200, Markierungen 600,
   Bedienelemente 800, die Ecken sogar 1000. Der Rahmen .leaflet-container
   bekommt von Leaflet per JavaScript nur `position: relative` - ohne z-index.
   Damit ist er KEIN Stapelkontext, und diese Höhen zählen nicht innerhalb der
   Karte, sondern gegen die ganze Seite.

   Folge: Jedes Modal legt sich hinter jede Karte. Das Overlay steht auf 45
   (bewusst unter der Navigation auf 50, siehe 43-modals-global.css) und
   verliert damit gegen 200. Genau das war zu sehen - die Fahrzeug-Karte lag
   über dem Projekt-Dialog.

   `isolation: isolate` macht den Rahmen zum Stapelkontext. Die 200/600/800
   gelten dann nur noch untereinander INNERHALB der Karte; nach außen tritt
   die Karte als ein einziges Element auf und ordnet sich normal ein. Bewusst
   nicht am Modal geschraubt: dessen 45 ist eine Design-Entscheidung, und höher
   zu gehen hieße nur, das Rennen mit dem nächsten Fremd-Bauteil neu zu
   starten. */
.leaflet-container {
    isolation: isolate;
}

/* Leaflet Editing Icons */
.leaflet-div-icon.leaflet-editing-icon {
    background: #4f46e5 !important;
    border-radius: 50% !important;
    border: 2px solid white !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7) !important;
    width: 12px !important;
    height: 12px !important;
    margin-left: -7px !important;
    margin-top: -7px !important;
}

/* Leaflet Layer Control - mehrzeilig mit Scroll */
.leaflet-control-layers-expanded {
    max-height: 300px;
    overflow-y: auto;
}

.leaflet-control-layers-expanded .leaflet-control-layers-list {
    display: block;
}

.leaflet-control-layers-base label,
.leaflet-control-layers-overlays label {
    display: block;
    padding: 4px 0;
    white-space: nowrap;
}


/* ===== 14-fremd-kalender.css ===== */
/* =============================================================================
   FULLCALENDAR OVERRIDES (EnergieSchnee-Styling)
   ============================================================================= */
.fc .fc-button {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg-white);
    color: var(--color-text-secondary);
    font-weight: 500;
    transition: all 0.15s;
}
.fc .fc-button:hover { background: var(--color-bg); border-color: var(--color-text-placeholder); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: var(--color-primary); color: var(--color-bg-white); border-color: var(--color-primary);
}
.fc .fc-toolbar-title { font-size: 1rem; font-weight: 700; color: var(--schnee-900); }
.fc .fc-col-header-cell { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); }
.fc .fc-daygrid-day-number { font-size: 0.8125rem; color: var(--color-text-secondary); padding: 4px 6px; }
.fc .fc-event { border-radius: 4px; font-size: 0.75rem; padding: 1px 4px; border: none; }
.fc .fc-daygrid-event { cursor: pointer; }
.fc .fc-day-today { background: var(--color-primary-subtle) !important; }
.fc .fc-prev-button .fc-icon,
.fc .fc-next-button .fc-icon { font-size: 1rem; }

/* Datei-Explorer Zeilen */
#dateien-tabelle tbody tr:hover td {
    background-color: var(--color-bg-muted);
}

/* ===== 15-formeln.css ===== */
/* ========================================
   Math formula rendering (MathML for PDF, KaTeX for HTML)
   ======================================== */

/* Block-Formeln ($$...$$) */
.formula-block {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--color-bg-muted);
    border-radius: 0.375rem;
    text-align: center;
    overflow-x: auto;
}

.formula-block math {
    font-size: 1.2em;
}

/* Inline-Formeln ($...$) */
.formula-inline {
    display: inline;
    font-size: 1.1em;
}

.formula-inline math {
    display: inline;
}

/* Fehlerdarstellung */
.formula-error {
    color: #cc0000;
    font-family: monospace;
    background: #fee;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* KaTeX-Kompatibilität (HTML-Ansicht) */
.katex-display {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--color-bg-muted);
    border-radius: 0.375rem;
    text-align: center;
    overflow-x: auto;
}

.katex {
    font-size: 1.1em;
}

.katex-display > .katex {
    font-size: 1.2em;
}

/* ═══════════════════════════════════════════════════════════════
   KI-Assistent – Highlight, Thinking, Suggestion Chips
   ═══════════════════════════════════════════════════════════════ */

/* Element-Hervorhebung durch den Agenten – AI-Farbwabern */
.agent-highlight {
    outline: none !important;
    border-radius: 6px !important;
    position: relative;
    z-index: 1000;
    animation: agentAIWave 2.4s ease-in-out infinite;
}

@keyframes agentAIWave {
    0%   { box-shadow: 0 0 0 3px #8b5cf6, 0 0 16px 6px rgba(139, 92, 246, 0.4); }
    25%  { box-shadow: 0 0 0 3px #06b6d4, 0 0 16px 6px rgba(6, 182, 212, 0.4); }
    50%  { box-shadow: 0 0 0 3px var(--color-primary), 0 0 16px 6px rgb(var(--petrol-600-rgb) / 0.4); }
    75%  { box-shadow: 0 0 0 3px #ec4899, 0 0 16px 6px rgba(236, 72, 153, 0.4); }
    100% { box-shadow: 0 0 0 3px #8b5cf6, 0 0 16px 6px rgba(139, 92, 246, 0.4); }
}

.agent-highlight-tooltip {
    position: fixed;
    z-index: 99999;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
    border: 1px solid rgba(139, 92, 246, 0.6);
    color: white;
    padding: 10px 36px 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    max-width: 300px;
    box-shadow: 0 4px 24px rgba(139, 92, 246, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    line-height: 1.45;
    animation: agentTooltipIn 0.2s ease-out;
}

@keyframes agentTooltipIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Farbiger linker Rand – AI-Gradient */
.agent-highlight-tooltip::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 10px 0 0 10px;
    background: linear-gradient(180deg, #8b5cf6, #06b6d4, #ec4899);
    animation: agentAIWave 2.4s ease-in-out infinite;
}

.agent-highlight-tooltip-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: rgba(255, 255, 255, 0.8);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    line-height: 1;
}

.agent-highlight-tooltip-close:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

/* Thinking-Bubble */
.thinking-bubble {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.thinking-text {
    font-style: italic;
}

.thinking-dots {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.thinking-dots span {
    width: 6px;
    height: 6px;
    background: var(--color-text-placeholder);
    border-radius: 50%;
    animation: thinkingBounce 1.2s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinkingBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40%            { transform: translateY(-5px); opacity: 1; }
}

/* Suggestion Chips */
.suggestion-chip {
    transition: all 0.15s;
    cursor: pointer;
    white-space: nowrap;
}

/* Streaming-Cursor */
.cursor-blink {
    display: inline-block;
    animation: cursorBlink 0.8s step-end infinite;
    color: var(--color-text-muted);
    margin-left: 1px;
}

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

/* KI-Debug-Events (Admin-only) */
.ai-debug-event {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 2px 0 2px 2px;
    padding: 4px 8px 4px 6px;
    border-radius: 6px;
    background: #f8f7ff;
    border: 1px solid #e9e7ff;
    font-family: 'Consolas', 'Fira Code', monospace;
    font-size: 11px;
    animation: debugFadeIn 0.12s ease-out;
    cursor: default;
}

.ai-debug-event.has-details {
    cursor: pointer;
}

.ai-debug-event.has-details:hover {
    background: #f0edff;
}

@keyframes debugFadeIn {
    from { opacity: 0; transform: translateX(-3px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Farbiger Dot */
.dbg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
}

/* Hauptinhalt */
.dbg-body {
    flex: 1;
    min-width: 0;
}

.dbg-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
}

.dbg-type {
    font-weight: 700;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.dbg-summary {
    color: var(--schnee-600);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.dbg-time {
    margin-left: auto;
    color: var(--color-text-placeholder);
    font-size: 9.5px;
    flex-shrink: 0;
}

/* Expandierbare Details */
.dbg-details {
    display: none;
    margin-top: 5px;
    padding: 6px 8px;
    background: #1e1b2e;
    border-radius: 4px;
    overflow: auto;
    max-height: 200px;
}

.ai-debug-event.expanded .dbg-details {
    display: block;
}

.dbg-pre {
    margin: 0;
    color: #c4b5fd;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 10.5px;
    line-height: 1.5;
}

.dbg-expand-hint {
    font-size: 9px;
    color: #7c3aed;
    margin-left: 3px;
}

/* Typ-Farben */
.dbg-dot-send     { background: #3b82f6; }
.dbg-dot-thinking { background: #f59e0b; }
.dbg-dot-tool_request { background: #8b5cf6; }
.dbg-dot-tool_result  { background: #10b981; }
.dbg-dot-stream   { background: #6366f1; }
.dbg-dot-suggestions  { background: #06b6d4; }
.dbg-dot-done     { background: #22c55e; }
.dbg-dot-error    { background: #ef4444; }

.dbg-type-send     { color: #1d4ed8; }
.dbg-type-thinking { color: #b45309; }
.dbg-type-tool_request { color: #6d28d9; }
.dbg-type-tool_result  { color: #065f46; }
.dbg-type-stream   { color: #4338ca; }
.dbg-type-suggestions  { color: #0e7490; }
.dbg-type-done     { color: #166534; }
.dbg-type-error    { color: #b91c1c; }

.dbg-chunk-counter { color: #4338ca; }

/* KI-Chat Markdown-Styles */
.ai-bubble h1, .ai-bubble h2, .ai-bubble h3 {
    font-weight: 600;
    margin: 0.5rem 0 0.25rem;
}
.ai-bubble h1 { font-size: 1rem; }
.ai-bubble h2 { font-size: 0.9rem; }
.ai-bubble h3 { font-size: 0.85rem; }
.ai-bubble p  { margin: 0.25rem 0; }
.ai-bubble ul, .ai-bubble ol { padding-left: 1.25rem; margin: 0.25rem 0; }
.ai-bubble li { margin: 0.1rem 0; }
.ai-bubble code {
    background: var(--color-border);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-size: 0.85em;
}
.ai-bubble pre {
    background: var(--schnee-800);
    color: var(--color-bg-muted);
    padding: 0.5rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.5rem 0;
}
.ai-bubble pre code {
    background: none;
    padding: 0;
    color: inherit;
}
.ai-bubble a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ===== 16-responsive-sammlung.css ===== */
/* =============================================================================
   19. RESPONSIVE STYLES
   ============================================================================= */

/* === Extra-Small Breakpoint (xs: 480px) === */
/* Tailwind hat keinen xs-Breakpoint, daher hier manuell */
@media (min-width: 480px) {
    .xs\:inline { display: inline !important; }
    .xs\:hidden { display: none !important; }
}

@media (max-width: 479px) {
    .hidden.xs\:inline { display: none !important; }
    .xs\:hidden { display: inline !important; }
}

/* === Mobile Navigation & Header === */
@media (max-width: 640px) {
    /* Kompaktere Navigation */
    nav .flex-shrink-0 span {
        font-size: 1rem;
    }

    /* Header kompakter */
    header h1 {
        font-size: 1rem;
    }

    /* Weniger Padding auf Mobilgeräten */
    main > div {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Cards kompakter */
    .card {
        padding: 0.75rem;
    }

    /* Buttons in Header-Bereichen */
    header .flex button {
        padding: 0.5rem;
    }
}

@media (max-width: 768px) {
    .tab-nav-container {
        padding: 0.5rem;
        gap: 0.25rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab-nav-button {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .tab-pane {
        padding: 1rem;
    }

    /* Tabellen auf Mobilgeräten */
    .sortable-table {
        font-size: 0.875rem;
    }

    .sortable-table th,
    .sortable-table td {
        padding: 0.75rem 0.5rem;
    }

    /* Modals auf Mobilgeräten */
    .modal-overlay > div {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }

    /* Settings-Rows auf Mobilgeräten */
    .settings-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .settings-input-group {
        justify-content: flex-start;
    }
}

/* === Touch-freundliche Elemente === */
@media (pointer: coarse) {
    /* Größere Touch-Targets */
    button,
    .btn,
    select,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Mehr Abstand zwischen klickbaren Elementen */
    .flex.gap-2 {
        gap: 0.75rem;
    }
}

/* === Mobile: Modul-spezifische Anpassungen === */

/* PV-Rechner: Wizard-Padding kompakter auf Mobile */
@media (max-width: 640px) {
    #wizardProgress {
        padding: 0.75rem 1rem 0;
    }
    #wizardContent {
        padding: 0.75rem 1rem 1rem;
    }
    #wizardFooter {
        padding: 0.75rem 1rem;
    }
    .pv-tab-nav-footer {
        padding: 0.75rem 1rem;
        bottom: -1rem;
        margin: 1rem -1rem -1rem;
    }

    /* Projekt-Badge im PV-Header auf Mobile ausblenden */
    #current-project-display {
        display: none !important;
    }

}

/* Tab-Navigation: Horizontales Scrollen auf Mobile (gilt für alle Tab-Navs mit id) */
@media (max-width: 768px) {
    #tab-nav-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Gerätekatalog-Karten: Auf sehr kleinen Screens einspaltig */
@media (max-width: 480px) {
    #pv-modules-grid,
    #inverters-grid,
    #storage-grid {
        grid-template-columns: 1fr;
    }
}

/* Modals: Maximale Breite auf Mobile begrenzen */
@media (max-width: 640px) {
    .modal-overlay > div {
        max-width: calc(100vw - 1rem) !important;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }
}


/* ===== 17-druck.css ===== */
/* =============================================================================
   17. DRUCK - Druckschutz

   Die Oberfläche wird nicht gedruckt. Ein Ausdruck der Anwendung ist immer ein
   Zerrbild: Reiter, Karten und Diagramme sind für den Bildschirm gebaut, halbe
   Tabellen brechen um, und was am Ende beim Kunden landet, sieht aus wie ein
   Fehler. Für ein Dokument gibt es den PDF-Bericht, der eigens dafür gesetzt
   ist.

   Deshalb bleibt die Seite beim Drucken leer und weiß, und an ihrer Stelle
   steht ein Hinweis. Das gilt für jeden Reiter und jedes Modul, weil es am
   body hängt und nicht an einzelnen Seiten.
   ============================================================================= */

@media print {
    /* Nichts von der Oberfläche kommt aufs Papier. Die Sichtbarkeit wird
       vererbt zurückgeholt, deshalb steht am Hinweis unten wieder visible. */
    html,
    body {
        background: #ffffff !important;
        background-image: none !important;
        color: #000000 !important;
        visibility: hidden !important;
        height: auto !important;
        overflow: visible !important;
    }

    body > * {
        display: none !important;
    }

    /* Der Hinweis wird zur Druckzeit erzeugt und ist das Einzige, was bleibt. */
    body::before {
        content: attr(data-druckhinweis);
        visibility: visible !important;
        display: block !important;
        position: fixed;
        inset: 0;
        padding: 6cm 3cm 0 3cm;
        font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
        font-size: 12pt;
        line-height: 1.6;
        color: #000000;
        text-align: center;
        white-space: pre-line;
    }

    /* Kopf- und Fußzeilen des Browsers lassen sich nicht abschalten, die Seite
       selbst bleibt aber ohne jede Farbfläche. */
    @page {
        margin: 2cm;
    }
}

/* ===== 18-auswahlfelder.css ===== */
/* =============================================================================
   GLOBALES SELECT/DROPDOWN STYLING
   Einheitliches Design für alle <select> Elemente.
   Natives Browser-Dropdown wird versteckt, eigener SVG-Chevron als Hintergrund.
   ============================================================================= */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 14px;
    padding-right: 2rem;
    cursor: pointer;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.375rem;
    background-color: var(--color-bg-white);
    font-family: inherit;
    font-size: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgb(var(--petrol-600-rgb) / 0.15);
    outline: none;
}
select:disabled {
    background-color: var(--color-bg);
    color: var(--color-text-placeholder);
    cursor: not-allowed;
}
/* Dunkles Select für Header/Toolbar-Bereiche (transparent, weißer Text).
   Fixe Farbwerte statt Theme-Variablen: die Leisten dahinter (z.B. der
   3D-Zeitregler) sind in beiden Themes dunkel - --color-bg-white wird im
   Dunkelmodus aber auf schnee-900 umgemappt und ergäbe schwarze Schrift. */
select.select-dark {
    background-color: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 4px;
    padding: 2px 28px 2px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.4rem center !important;
    background-size: 14px !important;
}
select.select-dark option {
    background-color: rgb(38 51 63);
    color: #fff;
}
select.select-dark:focus {
    border-color: rgba(255,255,255,0.5) !important;
    box-shadow: none;
    outline: none;
}
/* Dieselbe Optik für Eingabefelder auf dunklem Grund (Datum, Zeit).
   Eigener Selektor, weil die Regeln oben an select gebunden sind und ein
   input davon nichts abbekommt - es bliebe in heller Browser-Standardoptik
   auf der dunklen Leiste stehen. Ohne Pfeil-Grafik: die gehört zum Select. */
input.select-dark {
    background-color: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
    /* Sonst zeichnet der Browser den Kalender-Knopf dunkel auf dunkel. */
    color-scheme: dark;
}
input.select-dark:focus {
    border-color: rgba(255,255,255,0.5);
    box-shadow: none;
    outline: none;
}

/* Select2 und Leaflet Dropdowns nicht beeinflussen */
.select2-container select,
select.select2-hidden-accessible,
.leaflet-container select,
.leaflet-control select {
    -webkit-appearance: initial;
    -moz-appearance: initial;
    appearance: initial;
    background-image: none;
    padding-right: initial;
}

/* Leaflet Tiles: saubere Kanten ohne Lücken */
.leaflet-tile-pane img {
    image-rendering: auto;
    border: 0 !important;
    outline: 0 !important;
}

/* =============================================================================
   CUSTOM SELECT DROPDOWN (global-select.js)
   Ersetzt native <select> durch gestylte Dropdowns.
   ============================================================================= */
.cs-wrapper {
    position: relative;
    display: inline-block;
}
/* Der Ersatz für das native Auswahlfeld.
   Er muss wie ein Eingabefeld aussehen, nicht wie seine Umgebung: vorher
   stand hier font-size: inherit und eine eigene Polsterung. Dadurch war
   jedes Auswahlfeld höher als das Eingabefeld daneben, und im Modulkopf
   - wo die Umgebung fett gesetzt ist - erbte es auch noch den fetten Schnitt.
   Die Werte kommen jetzt aus denselben Tokens wie .form-input. */
.cs-trigger {
    display: flex;
    align-items: center;
    padding: 0 2rem 0 var(--form-padding-x);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--form-radius);
    background: var(--form-bg);
    font-size: var(--form-font-size);
    font-weight: 400;
    line-height: var(--form-line-height);
    color: var(--form-text);
    font-family: inherit;
    cursor: pointer;
    min-height: var(--btn-höhe);
    transition: border-color 0.15s, box-shadow 0.15s;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 14px;
}
.cs-trigger:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgb(var(--petrol-600-rgb) / 0.15);
    outline: none;
}
.cs-open .cs-trigger {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgb(var(--petrol-600-rgb) / 0.15);
}
/* Der Text sitzt in einem eigenen Element, weil das Kürzen mit Auslassungs-
   punkten am Flex-Container selbst nicht greift. */
.cs-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Größenvarianten, passend zu .form-input-sm / .form-input-lg. Die
   Markierung setzt global-select.js auf den Wrapper, weil die Klassen des
   Originals den Ersatz sonst nicht erreichen. */
.cs-sm > .cs-trigger {
    min-height: var(--btn-höhe-xs);
    padding: 0 1.75rem 0 0.5rem;
    font-size: 0.8125rem;
    background-size: 12px;
}
.cs-lg > .cs-trigger {
    min-height: var(--btn-höhe-lg);
    padding: 0 2.25rem 0 1rem;
    font-size: 1rem;
}

.cs-trigger.cs-placeholder { color: var(--color-text-placeholder); }
.cs-trigger.cs-disabled {
    background-color: var(--color-bg);
    color: var(--color-text-placeholder);
    cursor: not-allowed;
}
.cs-dropdown {
    display: none;
    position: fixed;
    z-index: 9999;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-strong);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow-y: auto;
    padding: 0.25rem 0;
    animation: cs-fade-in 0.12s ease-out;
}
.cs-dropdown.open { display: block; }
@keyframes cs-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cs-option {
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.1s;
    color: var(--schnee-900);
}
.cs-option:hover { background: var(--color-primary-subtle); }
.cs-option.active {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-weight: 600;
}
.cs-option.cs-disabled {
    color: var(--color-text-placeholder);
    cursor: default;
}
.cs-option.cs-disabled:hover { background: none; }

/* =============================================================================
   GLOBALES AUTOCOMPLETE (GlobalAutocomplete.anbinden aus global-autocomplete.js)
   Schwebender Layer am Body (wie .cs-dropdown) - verschiebt NIE den Inhalt
   darunter und funktioniert auch in Modals und gescrollten Containern.
   Die Einträge nutzen die .autocomplete-item-Optik von weiter unten.
   ============================================================================= */
.ga-dropdown {
    display: none;
    position: fixed;
    z-index: 10050;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-strong);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow-y: auto;
    padding: 0.25rem 0;
    animation: cs-fade-in 0.12s ease-out;
}
.ga-dropdown.open { display: block; }

/* =============================================================================
   AUTOCOMPLETE / SUCHVORSCHLÄGE
   Verwendung: <div class="autocomplete-wrapper"><input>...<div class="autocomplete-suggestions">...
   ============================================================================= */
.autocomplete-wrapper {
    position: relative;
}
.autocomplete-suggestions,
.autocomplete-results {  /* legacy alias */
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 9999;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-strong);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow-y: auto;
    max-height: 300px;
    padding: 0.25rem 0;
    margin-top: 2px;
}
.autocomplete-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.autocomplete-item:hover,
.autocomplete-item.active {
    background: var(--color-primary-subtle);
}
.autocomplete-item strong {
    font-weight: 600;
}
.autocomplete-item.autocomplete-empty {
    cursor: default;
    color: var(--color-text-muted);
    font-style: italic;
}
.autocomplete-item.autocomplete-empty:hover {
    background: transparent;
}

/* ===== 19-dateiauswahl.css ===== */
/* =============================================================================
   DATEITYP-AUSWAHL (Radio-Karten)
   ============================================================================= */
.dateityp-option:has(input:checked) {
    border-color: var(--color-primary);
    background-color: var(--color-primary-subtle);
    box-shadow: 0 0 0 2px rgb(var(--petrol-600-rgb) / 0.2);
}

/* =============================================================================
   DRAG & DROP UPLOAD-BEREICH
   ============================================================================= */
.drop-zone {
    border: 2px dashed var(--color-border-strong);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s;
    cursor: pointer;
}
.drop-zone:hover,
.drop-zone.drag-over {
    border-color: var(--color-primary);
    background-color: var(--color-primary-subtle);
}
.drop-zone.drag-over {
    border-style: solid;
}

/* ===== 20-zahl-gruppe.css ===== */
/* =============================================================================
   ZAHL-GRUPPE - Eingabefeld mit Minus/Plus als EINE Einheit
   =============================================================================
   Vorher standen drei Kästchen nebeneinander: Schalter, Feld, Schalter, jedes
   mit eigener Rundung und 6px Luft dazwischen. Dazu waren die Schalter 40px
   hoch neben einem 28px hohen Feld - sie erbten die Mindesthöhe von .btn, die
   für Schalter gedacht ist, an denen kein Feld klebt.

   Hier gehören sie zusammen: Die Gruppe hat außen die Rundung, innen teilen
   sich Feld und Schalter ihre Kanten. Die Höhe gibt das FELD vor (stretch),
   nicht der Schalter - das Feld ist die Hauptsache, der Schalter die Zugabe.

   Verwendung:
       <div class="zahl-gruppe">
           <button class="adjust-btn minus">-</button>
           <input class="form-input form-input-sm text-center">
           <button class="adjust-btn plus">+</button>
       </div>
   ========================================================================== */

.zahl-gruppe {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

/* Das Feld bleibt die Hauptsache: es behält seine Größe und Schrift, verliert
   nur die Rundung dort, wo ein Schalter anschließt. */
.zahl-gruppe > .form-input,
.zahl-gruppe > input {
    border-radius: 0;
    margin: 0;
    min-width: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}

.zahl-gruppe > .adjust-btn {
    /* Hebt die Mindesthöhe aus .btn auf - hier gibt das Feld die Höhe vor. */
    min-height: 0;
    height: auto;
    width: 1.75rem;
    min-width: 1.75rem;
    flex-shrink: 0;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid var(--form-border);
    background: var(--color-bg-muted);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

/* Die Rundung sitzt außen an der Gruppe, nicht an jedem Teil.
   Die inneren Kanten teilen sich Feld und Schalter: der Schalter gibt seinen
   Rahmen auf, das Feld behält seinen. Ohne das Zurückziehen (-1px) klaffte
   genau die Rahmenbreite als Lücke.

   Das padding gleicht den fehlenden Rahmen aus. Ohne es ist die Innenfläche
   des Schalters 27 statt 28 Pixel breit und beginnt um eins versetzt - das
   Zeichen sitzt dann brav in dieser Fläche, aber einen halben Pixel neben
   der Mitte des Kastens. Sichtbar. */
.zahl-gruppe > .adjust-btn.minus,
.zahl-gruppe > .adjust-btn:first-child {
    border-radius: var(--form-radius) 0 0 var(--form-radius);
    border-right: 0;
    padding-right: 1px;
    margin-right: -1px;
}

.zahl-gruppe > .adjust-btn.plus,
.zahl-gruppe > .adjust-btn:last-child {
    border-radius: 0 var(--form-radius) var(--form-radius) 0;
    border-left: 0;
    padding-left: 1px;
    margin-left: -1px;
}

.zahl-gruppe > .adjust-btn:hover:not(:disabled) {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}

.zahl-gruppe > .adjust-btn:active:not(:disabled) {
    background: var(--color-primary-soft-hover);
}

.zahl-gruppe > .adjust-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Beim Tippen soll die ganze Gruppe zusammengehören, nicht nur das Feld -
   sonst leuchtet ein Rahmen mitten in der Einheit auf. */
.zahl-gruppe:focus-within > .adjust-btn { border-color: var(--form-border-focus); }
.zahl-gruppe > .form-input:focus,
.zahl-gruppe > input:focus {
    border-color: var(--form-border-focus);
    box-shadow: none;
    z-index: 2;
}

/* ===== 21-kopfleiste.css ===== */
/* =============================================================================
   KOPFLEISTE - Schalter rechts
   =============================================================================
   KI-Chat und Fehlermelder saßen vorher als schwebende Knöpfe (position:fixed)
   über der Leiste - der KI-Chat buchstäblich auf dem Logo. Und sie waren unter
   1280px per "display:none !important" ganz weg: auf Tablet und Handy gab es
   sie nicht. In der Leiste haben sie einen Platz, der ihnen gehört, und auf
   schmalen Schirmen schrumpfen sie auf ihr Zeichen statt zu verschwinden.
   ========================================================================== */

.k-btn {
    height: 2rem;
    min-width: 2rem;
    padding: 0 0.55rem;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 0;
    /* Direkte Form - die Schalter liegen in der Leisten-Insel und sollen
       deren helle Schrift behalten, egal welches Thema gilt. Siehe .suche. */
    color: rgb(var(--schnee-300-rgb));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

.k-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    color: rgb(var(--weiss-rgb));
}

/* Nur ein Zeichen, kein Text: quadratisch statt breit. */
.k-btn-icon {
    padding: 0;
    width: 2rem;
    justify-content: center;
}

.k-btn:focus-visible {
    outline: 2px solid var(--petrol-300);
    outline-offset: 1px;
}

.k-btn-primaer {
    background: var(--color-primary);
    color: var(--color-bg-white);
    font-weight: 600;
}

.k-btn-primaer:hover { background: var(--color-primary-hover); color: var(--color-bg-white); }

/* Ausklapper der Kopfleiste - gemeinsam für Sprachwahl und Themenwahl.
 *
 * WICHTIG, sonst wird er im Dunkelmodus weiß: Der Ausklapper steht im Markup
 * innerhalb von #haupt-nav und damit in der "dunkel gemeint"-Insel, in der
 * absichtlich wieder die helle Farbwelt gilt. Eine Tailwind-Klasse wie
 * bg-white liefert dort echtes Weiß. Er gehört optisch aber nicht zur
 * dunklen Leiste, sondern zur Seite darunter.
 *
 * Deshalb ausschließlich die --color-*-Tokens: die werden schon am :root
 * aufgelöst und tragen den fertigen Wert hier herein - die Insel-Rücksetzung
 * der Farbtripel greift bei ihnen nicht. Niemals rgb(var(--weiss-rgb)) o.ä.
 * verwenden, das wäre wieder inselgebunden.
 */
.kopf-dropdown {
    position: absolute;
    right: 0;
    z-index: 50;
    margin-top: 0.5rem;
    min-width: 11rem;
    padding: 0.25rem;
    border-radius: var(--radius-lg);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

.kopf-dropdown-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font-size: 0.8125rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}

.kopf-dropdown-option:hover { background: var(--color-bg-muted); }

.kopf-dropdown-option:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Die aktive Wahl - erkennbar, ohne dass man erst hinsehen muss. */
.kopf-dropdown-option[aria-selected="true"] {
    background: var(--color-bg-muted);
    color: var(--color-primary);
    font-weight: 600;
}

.kopf-dropdown-option svg { flex-shrink: 0; }

/* Fehler melden: ruhig, bis man es braucht. Ein dauerrotes Feld in der Leiste
   schreit den ganzen Tag, obwohl nichts kaputt ist. */
.k-btn-melden:hover {
    background: rgba(203, 128, 112, 0.16);
    color: var(--rot-300);
}

/* Die Beschriftung weicht zuerst - das Zeichen bleibt.
   Gemessen mit Organisation, Suche (Mindestbreite 220) und der Pille der
   Hintergrundaufgaben ("2 erledigt", 138 Pixel): Mit Beschriftung braucht die
   Leiste 1302 Pixel. Bei 1280 ragte sie deshalb 39 Pixel über den Rand und
   schnitt die Sprachflagge ab. Ab 1366 bleibt Luft für eine längere Pille. */
@media (max-width: 1365px) {
    .k-txt { display: none; }
}

/* Auf dem Handy rücken die Teile zusammen, damit Menü, Logo und alle sechs
   Schalter (mit "Neues Projekt") nebeneinander passen. Gemessen bei 360 und 412 Pixel:
   vorher ragte die Leiste bis 416 Pixel hinaus. !important, weil .px-4 und
   .gap-3 anderswo selbst mit !important vergrößert werden. */
@media (max-width: 429px) {
    #haupt-nav > div { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    #haupt-nav > div > div { gap: 0.5rem !important; }
    #haupt-nav > div > div > .ml-auto { gap: 0 !important; }
    #seitenleiste-auf { min-width: 2rem !important; }
    #haupt-nav .k-btn { min-width: 1.75rem; padding: 0 0.3rem; }
}

/* --- Organisation des angemeldeten Kontos -----------------------------------
   Sitzt zwischen Suche und Schaltern und trägt den Namen des Kunden, in dessen
   Namen gerade gearbeitet wird. Die Leiste ist dunkel, deshalb helle Schrift
   auf einer leicht abgesetzten Fläche - wie das Suchfeld daneben.
   Auf schmalen Schirmen entfällt der Name, dort ist die Leiste schon voll. */

.nav-organisation {
    display: none;
    align-items: center;
    gap: 0.4rem;
    margin: 0 auto;
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    max-width: 22rem;
    flex-shrink: 1;
    min-width: 0;
}

.nav-organisation__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .nav-organisation { display: flex; }
}

/* Ab dieser Breite steht der Name in der ECHTEN Mitte der Leiste, nicht nur
   mittig im Restplatz: gemessen wanderte er sonst je nach Fensterbreite um
   bis zu 113 Pixel.
   Darunter bleibt er im Fluss. Der Grund ist gemessen: die Suche reicht bis
   777 Pixel, eine mittige Pille begänne bei 1440 schon bei 651 - sie lag
   also über dem Suchfeld. Erst ab 1600 ist für beides Platz, und auch dann
   nur mit einer schmaleren Suche. */
@media (min-width: 1600px) {
    .kopf-mit-organisation .nav-organisation {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        max-width: 16rem;
    }

    .kopf-mit-organisation .suche-wrap {
        max-width: 300px;
    }
}

/* Die Suche darf nicht zusammengedrückt werden, nur weil daneben ein langer
   Name steht ("Systemadministrator" schob sie auf 125 Pixel). Sie behält ihre
   Mindestbreite, der Name kürzt sich stattdessen mit Auslassungspunkten. */
.kopf-mit-organisation .suche-wrap {
    min-width: 220px;
}

/* ===== 22-suche.css ===== */
/* =============================================================================
   GLOBALE SUCHE in der Navigationsleiste
   =============================================================================
   Findet Projekte und Module an einer Stelle. Vorher musste man wissen, ob
   das Gesuchte ein Modul oder ein Projekt ist, und im richtigen Reiter danach
   blättern - bei 59 Projekten und 31 Modulen ist das der längere Weg.

   Die Leiste ist dunkel, deshalb helle Schrift und durchscheinende Flächen -
   die Tokens aus :root sind für helle Flächen gedacht und passen hier nicht.
   ========================================================================== */

.suche-wrap {
    flex: 1;
    max-width: 460px;
    position: relative;
}

.suche {
    width: 100%;
    height: 2.125rem;
    padding: 0 2.4rem 0 2.125rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    /* Direkte Form, sonst ist der eingetippte Text im Dunkelmodus unlesbar:
       Das Feld liegt IN der dunklen Leiste (Insel), var(--color-bg-white)
       trüge dagegen den am :root gedrehten Wert herein - im Dunkelmodus fast
       Schwarz auf fast schwarzem Grund. Die Trefferliste darunter schwebt
       über der Leiste und bleibt deshalb bewusst bei den --color-*-Tokens. */
    color: rgb(var(--weiss-rgb));
    font-size: 0.8125rem;
    font-family: inherit;
}

.suche::placeholder { color: rgb(var(--schnee-400-rgb)); }

.suche:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--color-primary);
    outline: none;
}

/* Das Kreuz von type="search" ist in dunklen Leisten kaum zu sehen und
   doppelt die Escape-Taste - weg damit. */
.suche::-webkit-search-cancel-button { display: none; }

.suche-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    /* Direkte Form - liegt in der Leisten-Insel, siehe .suche oben. */
    color: rgb(var(--schnee-400-rgb));
    pointer-events: none;
    display: flex;
}

/* Der Hinweis auf die Taste - verschwindet, sobald das Feld benutzt wird. */
.suche-kbd {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.625rem;
    color: rgb(var(--schnee-400-rgb));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    padding: 0.06rem 0.3rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    pointer-events: none;
    transition: opacity 0.12s;
}

.suche:focus ~ .suche-kbd,
.suche:not(:placeholder-shown) ~ .suche-kbd { opacity: 0; }

/* Trefferliste */
.suche-treffer {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-height: 26rem;
    overflow-y: auto;
    z-index: 60;
    padding: 0.3rem;
}

.suche-treffer[hidden] { display: none; }

.st-gruppe {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-placeholder);
    padding: 0.5rem 0.6rem 0.25rem;
}

.st-eintrag {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    color: var(--color-text);
    min-width: 0;
}

/* Ein Zustand für Maus UND Tastatur: sonst wandert bei den Pfeiltasten
   eine zweite Markierung durch die Liste. */
.st-eintrag:hover,
.st-eintrag.aktiv {
    background: var(--color-primary-subtle);
    color: var(--color-primary-text);
}

.st-icon {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--color-bg);
    color: var(--color-text-secondary);
}

.st-icon svg { width: 0.9rem; height: 0.9rem; }
.st-eintrag:hover .st-icon,
.st-eintrag.aktiv .st-icon { background: var(--color-primary); color: var(--color-bg-white); }

.st-text { min-width: 0; flex: 1; }

.st-name {
    font-size: 0.825rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-info {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-leer {
    padding: 1.2rem 0.6rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* ===== 23-seitenleiste.css ===== */
/* =============================================================================
   SEITENLEISTE - das Hauptmenü, links neben dem Logo
   =============================================================================
   Vorher ein Aufklappmenü am rechten Rand: schmal, ohne Icons, und die
   Verwaltungs-Module standen als reine Textliste da. In der Modulauswahl
   tragen dieselben Module ihre Zeichen mit Farbe - hier fehlten sie, obwohl
   es dieselben Module sind. Wiedererkennen geht so nicht.

   Als Leiste von links statt Klappmenü rechts: das Menü gehört zum Logo, und
   eine Leiste hat Platz für Zeichen, Gruppen und lange Namen.
   ========================================================================== */

.sl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 21, 29, 0.5);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.sl-overlay.offen {
    opacity: 1;
    pointer-events: auto;
}

.seitenleiste {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(19rem, 85vw);
    background: var(--color-bg-white);
    z-index: 61;
    display: flex;
    flex-direction: column;
    /* Außerhalb des Bildes parken statt display:none - sonst gäbe es keine
       Bewegung, und der Inhalt müsste bei jedem Öffnen neu aufgebaut werden. */
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
}

.seitenleiste.offen { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
    .seitenleiste { transition: none; }
    .sl-overlay { transition: none; }
}

.sl-kopf {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    /* Absichtlich die rgb(var(--…-rgb))-Form: .sl-kopf ist eine "dunkel
       gemeint"-Insel, und nur diese Form wird am Element aufgelöst.
       var(--schnee-800) würde den am :root bereits gedrehten Ton erben
       und der Kopf stünde im Dunkelmodus als helle Fläche da. */
    background: rgb(var(--schnee-800-rgb));
    color: rgb(var(--weiss-rgb));
    flex-shrink: 0;
}

.sl-benutzer { min-width: 0; flex: 1; }

.sl-benutzer-klein {
    font-size: 0.68rem;
    color: rgb(var(--schnee-300-rgb));   /* rgb-Form: liegt in der sl-kopf-Insel */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sl-benutzer-name {
    font-size: 0.9rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-schliessen {
    background: none;
    border: 0;
    color: rgb(var(--schnee-300-rgb));   /* rgb-Form: liegt in der sl-kopf-Insel */
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.sl-schliessen:hover { background: rgba(255, 255, 255, 0.1); color: rgb(var(--weiss-rgb)); }

.sl-inhalt {
    overflow-y: auto;
    flex: 1;
    padding: 0.6rem;
}

.sl-gruppe {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-placeholder);
    padding: 0.8rem 0.6rem 0.3rem;
}

.sl-eintrag {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.85rem;
    min-width: 0;
    transition: background 0.12s;
}

.sl-eintrag:hover { background: var(--color-primary-subtle); }

.sl-eintrag.aktiv {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-weight: 600;
}

/* Dasselbe Zeichen mit Farbverlauf wie auf der Modulkachel - daran erkennt
   man das Modul wieder, ob in der Auswahl, im Kopf oder hier. */
.sl-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: var(--color-bg-white);
    background: linear-gradient(135deg, var(--petrol-400), var(--color-primary));
    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.12);
}

.sl-icon svg { width: 0.95rem; height: 0.95rem; }

/* Farbe je Bereich, wie in der Modulauswahl. */
.sl-eintrag[data-farbe="planen"]       .sl-icon { background: linear-gradient(135deg, var(--petrol-400), var(--color-primary)); }
.sl-eintrag[data-farbe="rechnen"]      .sl-icon { background: linear-gradient(135deg, var(--sonne-400), var(--color-warning-hover)); }
.sl-eintrag[data-farbe="betreiben"]    .sl-icon { background: linear-gradient(135deg, var(--gruen-400), var(--color-success)); }
.sl-eintrag[data-farbe="organisieren"] .sl-icon { background: linear-gradient(135deg, var(--schnee-400), var(--schnee-600)); }
.sl-eintrag[data-farbe="verwaltung"]   .sl-icon { background: linear-gradient(135deg, var(--schnee-300), var(--schnee-500)); }
.sl-eintrag[data-farbe="persoenlich"]  .sl-icon { background: linear-gradient(135deg, var(--petrol-300), var(--petrol-500)); }
.sl-eintrag[data-farbe="abmelden"]     .sl-icon { background: linear-gradient(135deg, var(--rot-400), var(--color-danger)); }

.sl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sl-trenner {
    height: 1px;
    background: var(--color-border);
    margin: 0.5rem 0.6rem;
}

/* ===== 24-modulauswahl.css ===== */
/* =============================================================================
   MODULAUSWAHL - Gruppen und Kacheln
   =============================================================================
   Global gehalten, nicht auf die Startseite zugeschnitten: die Kachel ist
   eine Liste-mit-Icon-Zeile, die überall dort taugt, wo etwas ausgewählt wird.
   Farben ausschließlich über die Tokens aus :root.

   Bewusst KEINE .card-Klasse hier: Bootstrap bringt eine eigene .card mit
   flex-direction:column mit und würde das Icon über den Text schieben.
   ========================================================================== */

.gruppe { margin-bottom: 1.6rem; }

.gruppe-kopf {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.2rem;
}

.gruppe-titel {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Die Linie füllt den Rest der Zeile und trägt rechts die Anzahl. */
.gruppe-linie {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.gruppe-anzahl {
    font-size: 0.75rem;
    color: var(--color-text-placeholder);
    font-variant-numeric: tabular-nums;
}

.gruppe-info {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0 0 0.7rem;
}

.modul-gitter {
    display: grid;
    /* min() verhindert, dass die Kachel auf schmalen Schirmen breiter wird
       als der Platz - sonst scrollt die Seite seitlich. */
    grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
    gap: 0.75rem;
}

.m-kachel {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.15rem 1.2rem;
    min-width: 0;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}

.m-kachel:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.m-kachel:hover .m-icon { transform: scale(1.06); }

/* Icon-Plakette wie im Energiemanagement (.ems-icon-badge): Farbverlauf statt
   Fläche, weißes Zeichen, innenliegender Schatten für Tiefe. Die Farbe ist
   nicht Deko - sie sagt, zu welchem Bereich das Modul gehört, siehe die
   Gruppen-Varianten unten. */
.m-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: var(--color-bg-white);
    background: linear-gradient(135deg, var(--petrol-400), var(--color-primary));
    box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.12s;
}

.m-icon svg { width: 1.4rem; height: 1.4rem; }

/* Eine Farbe je Bereich - dieselbe Sprache wie die Gruppenüberschrift.
   Sonne bleibt dem Ertrag vorbehalten, Grün dem laufenden Betrieb. */
.gruppe[data-farbe="planen"]      .m-icon { background: linear-gradient(135deg, var(--petrol-400), var(--color-primary)); }
.gruppe[data-farbe="rechnen"]     .m-icon { background: linear-gradient(135deg, var(--sonne-400), var(--color-warning-hover)); }
.gruppe[data-farbe="betreiben"]   .m-icon { background: linear-gradient(135deg, var(--gruen-400), var(--color-success)); }
.gruppe[data-farbe="organisieren"] .m-icon { background: linear-gradient(135deg, var(--schnee-400), var(--schnee-600)); }
.gruppe[data-farbe="verwaltung"]  .m-icon { background: linear-gradient(135deg, var(--schnee-300), var(--schnee-500)); }
.gruppe[data-farbe="persoenlich"] .m-icon { background: linear-gradient(135deg, var(--petrol-300), var(--petrol-500)); }

/* min-width:0 ist Pflicht, sonst geht ein Flex-Kind nie unter seine
   Inhaltsbreite und ein langer Modulname sprengt die Kachel. */
.m-text { min-width: 0; }

.m-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.22rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.m-info {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.45;
    /* Drei Zeilen, dann Auslassung - sonst bestimmt die längste
       Beschreibung die Höhe aller Kacheln der Reihe. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Der Stern erscheint beim Überfahren und bleibt sichtbar, wenn gesetzt. */
.m-stern {
    margin-left: auto;
    margin-top: 0.1rem;
    color: var(--color-text-placeholder);
    opacity: 0;
    flex-shrink: 0;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.12s, color 0.12s;
}

.m-stern svg { width: 1rem; height: 1rem; }

.m-kachel:hover .m-stern,
.m-stern:focus-visible { opacity: 1; }

.m-stern.an {
    opacity: 1;
    color: var(--color-warning);
}

/* ===== 29-modul-tesla-1.css ===== */
/* =============================================================================
   15. MODUL: TESLA

   Das Dashboard zeigt das Auto, nicht fünf Kacheln.

   Vorher standen hier ein 520x220-Raster (#car-grid-layout) und fünf
   .car-panel-Kästchen, in denen "Frunk" und "Heck" bloße Wörter waren. Der
   Zustand des Fahrzeugs war damit an keiner Stelle dort ablesbar, wo er am
   Auto auch ist. Jetzt trägt ein einziges SVG (siehe _auto_svg.html) alle
   Zustände an ihrem echten Ort.
   ============================================================================= */

/* Eigene Lack- und Glastöne, aus den globalen Rampen abgeleitet. Sie stehen
   hier und nicht in 01-farben-und-themen.css, weil sie nur das Auto betreffen
   - ein --auto-lack im globalen Token-Satz wäre Fehlleitung.

   KEIN eigener [data-theme="dark"]-Block. Der Dunkelmodus dreht die Rampe
   selbst um (--schnee-300-rgb zeigt dort auf --basis-schnee-700-rgb), also
   folgt das Auto von allein. Ein zweiter Block, der die Stufen nochmal
   tauscht, dreht sie ein ZWEITES Mal - dann leuchtet der Wagen im
   Dunkelmodus weiß. Genau das stand hier zuerst. Siehe den Kommentar in
   01-farben-und-themen.css: "ohne dass eine einzige Stelle im Markup etwas
   davon wissen muss". */
#tesla-dashboard-view {
    --auto-lack:        var(--schnee-200);
    --auto-lack-kante:  var(--schnee-400);
    --auto-glas:        var(--schnee-400);
    --auto-glas-hell:   var(--schnee-300);
    --auto-linie:       var(--schnee-400);

    /* Der Reifen kommt aus der BASIS-Rampe, nicht aus der gedrehten: Er ist
       schwarz, in jedem Thema. Über var(--schnee-700) wurde er im
       Dunkelmodus hell und stand als weisses Paddel neben dem Auto - die
       Rampe hatte recht ("dunkler als die Karosserie"), nur ist ein Reifen
       kein Bauteil, das der Umgebung folgt. */
    --auto-rad:         rgb(var(--basis-schnee-950-rgb));
    --auto-felge:       rgb(var(--basis-schnee-700-rgb));
}

/* ── Bühne ─────────────────────────────────────────────────────────────── */

/* Das Auto liegt QUER.

   Aufrecht war es 340 px breit und 590 hoch: Die Karte ist im Querformat,
   das Auto im Hochformat - links und rechts blieb die halbe Fläche leer,
   und die Seite fing an zu scrollen. Quer füllt derselbe Wagen die Karte
   aus, wird dabei mehr als doppelt so gross und braucht weniger Höhe.

   Gedreht wird IM SVG (siehe _auto_svg.html: die Gruppe #auto-dreh), nicht
   per CSS-transform am Element. CSS rechnet das Layout VOR der
   Transformation - ein gedrehtes Element belegt weiter den Platz seiner
   ungedrehten Kiste, und man müsste mit Halterelementen und aspect-ratio
   dagegenhalten. Im SVG kostet dieselbe Drehung ein Attribut und der
   viewBox ist ehrlich quer. */
.auto-buehne {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.auto-svg {
    width: 100%;
    height: auto;
    max-height: 44vh;
    overflow: visible;
}

/* ── Karosserie ────────────────────────────────────────────────────────── */

.auto-lack {
    fill: url(#lack);
    stroke: var(--auto-lack-kante);
    stroke-width: 6;
}

.auto-glas {
    fill: url(#glas);
}

.auto-linie {
    fill: none;
    stroke: var(--auto-linie);
    stroke-width: 5;
    opacity: 0.7;
}

.auto-raeder rect {
    fill: var(--auto-rad);
}

.auto-spiegel path {
    fill: var(--auto-lack-kante);
}

/* ── Klappen: Frunk und Heck ───────────────────────────────────────────── */

.auto-klappe {
    cursor: pointer;
}

.auto-klappe-flaeche {
    fill: transparent;
    stroke: transparent;
    stroke-width: 6;
    transition: fill 0.25s, stroke 0.25s;
}

.auto-klappe-linie {
    fill: none;
    stroke: var(--auto-linie);
    stroke-width: 5;
    opacity: 0.7;
}

.auto-klappe-text {
    fill: var(--color-text-muted);
    font-size: 130px;
    font-weight: 700;
    letter-spacing: 4px;
    text-anchor: middle;
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}

.auto-klappe:hover .auto-klappe-text,
.auto-klappe:focus-visible .auto-klappe-text {
    opacity: 1;
}

.auto-klappe:hover .auto-klappe-flaeche,
.auto-klappe:focus-visible .auto-klappe-flaeche {
    fill: rgb(var(--petrol-600-rgb) / 0.12);
}

.auto-klappe:focus-visible {
    outline: none;
}
.auto-klappe:focus-visible .auto-klappe-flaeche {
    stroke: var(--color-primary);
}

/* Offen: Die Klappe leuchtet und ihr Wort steht dauerhaft da - eine offene
   Klappe ist etwas, das man auf einen Blick sehen muss. */
.auto-svg.frunk-offen #auto-frunk .auto-klappe-flaeche,
.auto-svg.heck-offen  #auto-heck  .auto-klappe-flaeche {
    fill: rgb(var(--sonne-500-rgb) / 0.35);
    stroke: var(--color-warning);
}
.auto-svg.frunk-offen #auto-frunk .auto-klappe-text,
.auto-svg.heck-offen  #auto-heck  .auto-klappe-text {
    opacity: 1;
    fill: var(--color-warning-text);
}

/* ── Türen ─────────────────────────────────────────────────────────────── */

.auto-tuer {
    fill: transparent;
    stroke: var(--auto-linie);
    stroke-width: 5;
    opacity: 0.55;
    transition: fill 0.3s, opacity 0.3s;
}

/* Unverriegelt: alle vier Türen warm hinterlegt. Das ist der Zustand, den
   man aus zehn Metern Entfernung erkennen können muss. */
.auto-svg.unverriegelt .auto-tuer {
    fill: rgb(var(--sonne-500-rgb) / 0.22);
    opacity: 1;
}

/* ── Ladeklappe ────────────────────────────────────────────────────────── */

.auto-ladeklappe-flaeche {
    fill: var(--auto-lack-kante);
    stroke: var(--auto-linie);
    stroke-width: 4;
    transition: fill 0.3s;
}

.auto-ladeklappe-blitz path {
    fill: var(--color-text-muted);
    transition: fill 0.3s;
}

.auto-svg.klappe-offen .auto-ladeklappe-flaeche {
    fill: rgb(var(--gruen-600-rgb) / 0.25);
}

.auto-svg.laedt .auto-ladeklappe-flaeche {
    fill: var(--color-success);
}
.auto-svg.laedt .auto-ladeklappe-blitz path {
    fill: var(--color-bg-white);
}

/* Der Blitz pulst im Takt des Ladens - ruhig, nicht hektisch. */
.auto-svg.laedt .auto-ladeklappe-blitz {
    animation: auto-blitz-puls 2s ease-in-out infinite;
    transform-origin: 271px 3545px;
}

@keyframes auto-blitz-puls {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* ── Ladekabel ─────────────────────────────────────────────────────────── */

.auto-ladekabel {
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.auto-svg.laedt .auto-ladekabel,
.auto-svg.klappe-offen .auto-ladekabel {
    opacity: 1;
}

.auto-kabel-mantel {
    fill: none;
    stroke: var(--auto-lack-kante);
    stroke-width: 26;
    stroke-linecap: round;
}

.auto-kabel-fluss {
    fill: none;
    stroke: var(--color-success);
    stroke-width: 14;
    stroke-linecap: round;
    opacity: 0;
}

/* Der Fluss wandert zum Auto hin, nicht weg: Die Richtung sagt, dass Energie
   HINEIN geht. stroke-dashoffset zählt deshalb abwärts. */
.auto-svg.laedt .auto-kabel-fluss {
    opacity: 1;
    stroke-dasharray: 90 210;
    animation: auto-fluss 2.2s linear infinite;
}

@keyframes auto-fluss {
    from { stroke-dashoffset: 300; }
    to   { stroke-dashoffset: 0; }
}

/* ── Wächtermodus ──────────────────────────────────────────────────────── */

.auto-waechter {
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.auto-svg.waechter .auto-waechter {
    opacity: 1;
}

.auto-waechter-ring {
    fill: rgb(var(--rot-600-rgb) / 0.15);
    stroke: var(--color-danger);
    stroke-width: 6;
}

.auto-waechter-auge {
    fill: var(--color-danger);
}

/* ── Stand veraltet ────────────────────────────────────────────────────── */

/* Schläft das Auto, zeigt das Dashboard den letzten bekannten Stand. Er wird
   leicht zurückgenommen, damit niemand eine zehn Minuten alte Zahl für die
   Gegenwart hält.

   Bewusst dezent: Mit opacity 0.55 und saturate(0.4) - so der erste Versuch -
   sah das Auto aus wie ausgeschaltet statt wie "schläft gerade". Der
   Zeitpunkt im Kopf sagt das Nötige, das Bild muss es nicht überbetonen. */
.auto-svg.veraltet {
    opacity: 0.85;
    filter: saturate(0.75);
}

@media (prefers-reduced-motion: reduce) {
    .auto-svg.laedt .auto-kabel-fluss,
    .auto-svg.laedt .auto-ladeklappe-blitz {
        animation: none;
    }
    .auto-svg.laedt .auto-kabel-fluss { opacity: 1; }
}


/* ===== 29-modul-tesla-2.css ===== */
/* ── Kopf über dem Auto ────────────────────────────────────────────────── */

.auto-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
}

.auto-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

/* Wann der Stand erhoben wurde. Steht immer da, nicht nur im Fehlerfall:
   Auch eine Live-Zahl ist eine Momentaufnahme. */
.auto-stand {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 0.125rem 0 0;
}

.auto-pille {
    flex-shrink: 0;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.auto-pille.ist-online { background: var(--color-success-soft); color: var(--color-success-text); border-color: var(--color-success-border); }
.auto-pille.ist-laden  { background: var(--color-success-soft); color: var(--color-success-text); border-color: var(--color-success-border); }
.auto-pille.ist-fahrt  { background: var(--color-primary-soft); color: var(--color-primary-text); border-color: var(--color-primary-border); }
.auto-pille.ist-schlaf { background: var(--color-bg-muted);     color: var(--color-text-muted);   border-color: var(--color-border); }

/* ── Kennzahlen unter dem Auto ─────────────────────────────────────────── */

.auto-kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.5rem 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.auto-kennzahl {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* Zahl gross, Bezeichnung klein: Der Wert ist die Nachricht, das Wort nur
   seine Beschriftung. */
.auto-kennzahl-wert {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.auto-kennzahl-einheit {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-left: 0.125rem;
}

.auto-kennzahl-name {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.auto-kennzahl.hebt-hervor .auto-kennzahl-wert { color: var(--color-success-text); }

/* ── Fahrzeug-Marker auf der Karte ─────────────────────────────────────── */

/* Ein Pfeil statt einer Stecknadel: Die Nadel sagt "hier", der Pfeil sagt
   "hier, und so herum". drive_state.heading liefert die Gradzahl seit jeher,
   sie wurde nur nie gezeichnet. */
.auto-marker {
    background: none;
    border: none;
}

.auto-marker-dreh {
    width: 34px;
    height: 34px;
    transition: transform 0.4s ease-out;
}

.auto-marker-dreh svg {
    width: 100%;
    height: 100%;
    /* Ein weisser Rand hält den Pfeil auf Luftbildern und dunklen Karten
       gleichermassen lesbar. */
    filter: drop-shadow(0 0 1.5px var(--color-bg-white))
            drop-shadow(0 1px 2px rgb(0 0 0 / 0.4));
}

.auto-marker-dreh path {
    fill: var(--color-primary);
    stroke: var(--color-bg-white);
    stroke-width: 1.2;
    stroke-linejoin: round;
}

/* Anmelde-Domain der Tesla-App: die Werte werden per Klick kopiert, deshalb
   lesen sie sich als anklickbare Marke statt als reiner Fließtext. */
.tesla-kopierbar {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-bg-subtle, rgb(0 0 0 / 0.04));
    font-family: var(--font-mono, monospace);
    cursor: pointer;
    transition: border-color 0.15s ease-out, transform 0.15s ease-out;
}

.tesla-kopierbar:hover,
.tesla-kopierbar:focus-visible {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

/* --- Einrichtung der Fleet-Anbindung -------------------------------------
   Formular und Anleitung stehen nebeneinander: die Anleitung erklärt, wohin
   die Werte gehören, das Formular nimmt sie entgegen. Unter 60rem Breite
   rutscht die Anleitung darunter. */
.tesla-einrichtung {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    max-width: 68rem;
    margin-inline: auto;
    align-items: start;
}

@media (min-width: 60rem) {
    .tesla-einrichtung {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    }
}

.tesla-einrichtung-block {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.tesla-einrichtung-titel {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.tesla-domain-eingabe {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.tesla-domain-eingabe .form-input {
    flex: 1 1 auto;
    min-width: 0;
}

.tesla-domain-eingabe .btn {
    flex: 0 0 auto;
}

/* Am Telefon bliebe vom Eingabefeld neben dem Knopf zu wenig übrig - dort
   steht der Knopf darunter. */
@media (max-width: 30rem) {
    .tesla-domain-eingabe {
        flex-wrap: wrap;
    }

    .tesla-domain-eingabe .form-input,
    .tesla-domain-eingabe .btn {
        flex: 1 0 100%;
    }
}

.tesla-domain-status {
    margin-top: 0.6rem;
    padding-left: 0.85rem;
    border-left: 3px solid currentColor;
    font-size: 0.82rem;
    line-height: 1.45;
}

.tesla-domain-status.ist-gut { color: var(--color-success, #15803d); }
.tesla-domain-status.ist-offen { color: var(--color-warning, #b45309); }
.tesla-domain-status.ist-fehler { color: var(--color-danger, #b91c1c); }

/* Die Anleitung tritt farblich zurück, damit das Formular die Hauptsache
   bleibt - sie wird gelesen, nicht bedient. */
.tesla-anleitung {
    background: var(--color-bg-subtle, rgb(0 0 0 / 0.025));
}

.tesla-anleitung-titel {
    font-size: 1.05rem;
    font-weight: 700;
}

.tesla-schritte {
    counter-reset: tesla-schritt;
    margin-top: 1.5rem;
    padding: 0;
    list-style: none;
}

.tesla-schritt {
    position: relative;
    padding-left: 2.6rem;
    padding-bottom: 1.4rem;
}

/* Die Linie verbindet die Schritte zu einem Weg, der letzte bekommt keine. */
.tesla-schritt::after {
    content: "";
    position: absolute;
    top: 1.9rem;
    bottom: 0.1rem;
    left: 0.87rem;
    width: 1px;
    background: var(--color-border);
}

.tesla-schritt:last-child {
    padding-bottom: 0;
}

.tesla-schritt:last-child::after {
    display: none;
}

.tesla-schritt::before {
    counter-increment: tesla-schritt;
    content: counter(tesla-schritt);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-bg-white, #fff);
    font-size: 0.8rem;
    font-weight: 700;
}

.tesla-schritt h4 {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.75rem;
}

.tesla-schritt p {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-muted, #4b5563);
}

.tesla-schritt-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tesla-schritt-warte {
    font-style: italic;
}

.tesla-werte {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.6rem;
}

.tesla-werte dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, #6b7280);
}

.tesla-werte dd {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    /* Nur wo es sein muss umbrechen: break-all zerreißt sonst auch normale
       Wörter ("dauerhafter Zu griff"). Lange Adressen brechen trotzdem. */
    overflow-wrap: anywhere;
}

/* ===== 32-modul-tickets.css ===== */
/* =============================================================================
   18. MODUL: TICKETS

   Die Regeln des Ticket-Dialogs standen hier (#ticket-form-content,
   #screenshot-preview-container, die Chat-Blasen). Der Dialog ist entfallen:
   "Fehler melden" öffnet jetzt den KI-Assistenten im Ticket-Modus, seine
   Blasen stehen in 42-ki-chat.css.

   Was bleibt, ist .table-container - und der bleibt bewusst HIER und nicht in
   33-tabellen.css: Das Tickets-Modul fasst ihn an und muss vor PowerTable
   kommen. Das ist der Grund für die sonst unlogische Nummer.
   ============================================================================= */

/* table-container: Flex-Container für Toolbar + Tabelle + Pagination.
   Höhe direkt per style oder calc() auf dem Element setzen. */
.table-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.table-container .pt-toolbar,
.table-container .pt-pagination {
    flex-shrink: 0;
}
.table-container .pt-toolbar { border-radius: 0; border: none; border-bottom: 1px solid var(--color-border); }
.table-container .pt-pagination { border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
.table-container .power-table {
    flex: 1;
    min-height: 0;
    border: none;
    border-radius: 0;
}
.table-container .pt-scroll-wrap { border: none; border-radius: 0; }


/* ── Browser-Konsole in der Ticket-Ansicht ───────────────────────────────
   Die Zeilen kommen jetzt strukturiert an ({level, message}), vorher gingen
   fertige Zeichenketten ans Ticket, während die Anzeige log.type erwartete -
   herausgekommen ist "[undefined]".

   Die Stufe färbt: ein ERROR muss man von einer log-Zeile unterscheiden
   können, ohne sie zu lesen. Vorher war alles einheitlich rot, auch
   Belangloses. */
.tk-log {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
}

.tk-log-stufe {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    min-width: 3.25rem;
}

.tk-log-text {
    word-break: break-word;
    white-space: pre-wrap;
}

.tk-log-fehler {
    background: var(--color-danger-soft);
    border-left-color: var(--color-danger);
    color: var(--color-danger-text);
}

.tk-log-warnung {
    background: var(--color-warning-soft);
    border-left-color: var(--color-warning);
    color: var(--color-warning-text);
}

/* log und info: da, aber leise. Sie sind Beiwerk zum eigentlichen Fehler. */
.tk-log-info {
    background: var(--color-bg-muted);
    border-left-color: var(--color-border-strong);
    color: var(--color-text-muted);
}

/* ===== 33-tabellen.css ===== */
/* ============================================
   PowerTable v3.1 - Universelles Tabellensystem
   ============================================ */

/* Alte Klassen (Abwartskompatibilitat) */
.sortable-table { border-collapse: collapse; width: 100%; }

/* Basis - Flex-Layout: thead/tfoot fix, nur tbody scrollt.
   CSS Grid auf tr sorgt für Spaltenausrichtung über alle Sektionen. */
.power-table {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 0;
    overflow: hidden;
}
.power-table thead,
.power-table tfoot {
    display: block;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background: var(--color-bg-muted);
}
/* Der Kopf klebt oben. Normalerweise scrollt der Rumpf und der Kopf steht
   ohnehin außerhalb davon - aber sobald der Scroll-Wrapper das Hochscrollen
   übernimmt (etwa wenn die Tabelle keine begrenzte Höhe hat), wanderte der
   Kopf mit aus dem Bild. Mit sticky bleibt er stehen, egal wer scrollt. */
.power-table thead {
    position: sticky;
    top: 0;
}
.power-table tbody {
    display: block;
    flex: 1;
    overflow-y: auto;
    /* Ausdrücklich hidden: overflow-y:auto allein macht overflow-x implizit
       auch zu auto, und der Zellenbereich bekam einen eigenen Querbalken,
       der unabhängig vom Kopf scrollte. Seitliches Schieben macht allein
       der .pt-scroll-wrap. */
    overflow-x: hidden;
    min-height: 0;
}
.power-table tr:not(.pt-detail-row) {
    display: grid;
    grid-template-columns: var(--pt-cols, repeat(auto-fill, minmax(0, 1fr)));
}
.power-table th, .power-table td { text-align: left; border: none !important; min-width: 0; }

/* Detail-Zeilen: volle Breite, kein Grid */
.pt-detail-row         { display: block !important; }
.pt-detail-row > td    { display: block; padding: 0; background: var(--color-bg-muted); }
.pt-detail-row.hidden  { display: none !important; }

/* pt-no-grid: Detail-Zeilen brauchen table-row damit colspan funktioniert */
.pt-no-grid .pt-detail-row { display: table-row !important; }
.pt-no-grid .pt-detail-row.hidden { display: none !important; }
.pt-no-grid .pt-detail-row > td { display: table-cell; }

/* Lade-/Leer-Zellen: volle Breite über alle Grid-Spalten */
.pt-loading, .pt-empty { grid-column: 1 / -1; }

/* renderRow-Tabellen: kein Grid, klassisches Tabellen-Layout.
   Ein .pt-scroll-wrap Wrapper übernimmt das Scrolling. */
.pt-no-grid { display: table !important; border-collapse: collapse; width: 100%; border: none !important; border-radius: 0 !important; }
.pt-no-grid thead { display: table-header-group !important; position: sticky; top: 0; z-index: 2; background: var(--color-bg-muted); }
.pt-no-grid tbody { display: table-row-group !important; }
.pt-no-grid tfoot { display: table-footer-group !important; }
.pt-no-grid tr:not(.pt-detail-row) { display: table-row !important; }
.pt-no-grid .pt-th { box-shadow: none !important; border-bottom: 2px solid var(--color-border-strong) !important; border-right: 1px solid var(--color-border) !important; }
.pt-no-grid .pt-th:last-child { border-right: none !important; }
.pt-no-grid td { border-bottom: 1px solid var(--color-border) !important; }

/* Scroll-Wrapper um jede Tabelle: scrollt nur die Tabelle, Werkzeugleiste
   und Blätterleiste bleiben stehen. */
.pt-scroll-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 0;
}

/* Die Tabelle darf im Wrapper kein eigenes overflow haben.
   Mit overflow:hidden wird sie selbst zum Scroll-Container - und dann klebt
   der sticky-Kopf an ihr statt am Wrapper. Da die Tabelle selbst nicht
   scrollt, war das sticky wirkungslos und der Kopf wanderte beim Scrollen
   mit nach oben aus dem Bild. */
.pt-scroll-wrap > .power-table {
    overflow: visible;
    border: none;
    /* KEIN min-width hier: Am Desktop teilen sich die Spalten IMMER die
       verfügbare Breite (Spaltenbreiten sind Obergrenzen, siehe
       updateGridCols) - die Tabelle wird nie breiter als der Wrapper und
       nichts scrollt quer. Seitliches Schieben gibt es nur in der
       Mobil-Regel weiter unten. */
}

/* ---------------------------------------------------------------------------
   Schmale Bildschirme: die Tabelle seitlich verschiebbar

   Die Spalten stehen auf minmax(0, 1fr) und schrumpfen damit bis auf null -
   am Handy laufen die Texte ineinander. Was dann immer noch nicht passt,
   schob die ganze Seite nach rechts: der Modulkopf wanderte mit, die Seite
   ließ sich seitlich wegziehen.

   Richtig ist das Gegenteil: die Tabelle behält ihre Spaltenbreiten und wird
   in ihrem Wrapper verschiebbar, die Seite dahinter bleibt stehen.

   Die Breite muss dabei von der Tabelle kommen, nicht von Kopf und Rumpf
   einzeln: mit je eigenem max-content wurde der Kopf 784px breit und der
   Rumpf 1236px (die Zellinhalte sind länger als die Überschriften), und
   damit verteilte jedes der beiden Raster seinen eigenen Platz - die
   Spalten standen versetzt untereinander.
   --------------------------------------------------------------------------- */
/* 899px, nicht 767px: das ist dieselbe Grenze, ab der die Zellen unten auf
   nowrap stehen und ab der oberhalb (min-width: 900px) mit Auslassungspunkten
   gekürzt wird. Mit einer eigenen Grenze bliebe zwischen 768 und 899 ein
   Streifen, in dem die Spalten schrumpfen dürfen, aber nichts scrollt. */
@media (max-width: 899px) {
    .pt-scroll-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        max-width: 100%;
    }
    /* Eine Breite für alle drei Teile: so breit wie nötig, mindestens voll.
       Über den Wrapper adressiert, weil viele Tabellen im Markup ein w-full
       tragen - das ist eine Tailwind-Utility mit width:100%, und Tailwind
       wird nach main.css geladen. Ein schlichtes .power-table verliert
       dagegen, zwei Klassen gewinnen. Kein !important nötig. */
    .pt-scroll-wrap > .power-table {
        width: max-content;
        min-width: 100%;
    }
    /* Jede Spalte mindestens lesbar breit statt bis auf null gequetscht. */
    .power-table tr:not(.pt-detail-row) {
        grid-template-columns: var(--pt-cols-mobil, var(--pt-cols));
    }
}

/* SVG Icons */
.pt-icon { width: 12px; height: 12px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.pt-icon-muted { opacity: 0.35; }
.pt-grip-icon { width: 8px; height: 14px; }

/* Header */
.pt-th {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--schnee-900);
    /* Verlaufsende über Token statt Hex - #eef2f7 blieb im Dunkelmodus als
       weißer Schleier stehen. var(--color-bg) hat im Hellmodus exakt
       denselben Wert (238 242 247). */
    background: linear-gradient(to bottom, var(--color-bg-muted), var(--color-bg));
    box-shadow: inset -1px 0 0 0 var(--color-border), inset 0 -2px 0 0 var(--color-border-strong);
    position: relative;
    user-select: none;
    white-space: nowrap;
    overflow: visible;
}
.pt-th:last-child { box-shadow: inset 0 -2px 0 0 var(--color-border-strong); }
.pt-th-content {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.pt-th-label { flex: 1; }
.pt-sortable .pt-th-label { cursor: pointer; }
.pt-sortable .pt-th-label:hover { color: var(--color-primary); }
.pt-th-select, .pt-th-detail { width: 36px; text-align: center; padding: 0.625rem 0.25rem; }

/* Drag Handle */
.pt-drag-handle {
    cursor: grab;
    color: var(--color-text-placeholder);
    padding: 0.125rem;
    border-radius: 0.125rem;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.pt-drag-handle:hover { color: var(--schnee-600); }
.pt-drag-handle:active { cursor: grabbing; }

/* Sort */
.pt-sort-icon { color: var(--color-text-placeholder); display: flex; align-items: center; cursor: pointer; transition: color 0.15s; }
.pt-sort-icon:hover { color: var(--color-text-muted); }
.pt-sort-icon.active { color: var(--color-primary); }

/* Body */
.pt-td {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--schnee-700);
    box-shadow: inset -1px 0 0 0 var(--color-border), inset 0 -1px 0 0 var(--color-border);
}
.pt-td:last-child { box-shadow: inset 0 -1px 0 0 var(--color-border); }
.power-table tbody tr { transition: background 0.1s; }
.power-table tbody tr:hover { background: var(--color-bg-muted); }
.power-table tbody tr:nth-child(even):not(.pt-detail-row):not(:hover) { background: var(--color-bg-muted); }
.pt-row-selected { background: var(--color-primary-subtle) !important; }
.pt-td-select, .pt-td-detail { text-align: center; width: 36px; padding: 0.5rem 0.25rem; }

/* Detail Toggle Button */
.pt-detail-toggle, .toggle-detail-btn {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: all 0.15s;
}
.pt-detail-toggle:hover, .toggle-detail-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
}
.pt-detail-toggle.open, .toggle-detail-btn.open {
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    border-color: var(--color-primary-soft-hover);
}

/* Detail Row */
.pt-detail-row td {
    padding: 0;
    background: var(--color-bg-muted);
    border-bottom: 1px solid var(--color-border);
}
.pt-detail-content { padding: 1.25rem 1.5rem; }

/* Empty & Loading */
.pt-empty { text-align: center; padding: 2.5rem !important; color: var(--color-text-placeholder); font-style: italic; }
.pt-loading { text-align: center; padding: 2.5rem !important; color: var(--color-text-muted); }
/* PowerTable Spinner: nutzt globale spin Animation */
.pt-loading-spinner {
    display: inline-block; width: 1.25rem; height: 1.25rem;
    border: 2px solid rgb(var(--petrol-600-rgb) / 0.2); border-top-color: var(--color-primary);
    border-radius: 50%; animation: spin 0.7s linear infinite;
    vertical-align: middle; margin-right: 0.5rem;
}

/* Resize Handle */
.pt-resize-handle {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 4px; cursor: col-resize; background: transparent;
    transition: background 0.15s;
}
.pt-resize-handle:hover { background: var(--color-primary); }

/* Drag & Drop - Insertion Markers */
.pt-dragging { opacity: 0.4; }
.pt-drag-over-left {
    box-shadow: inset 3px 0 0 0 var(--color-primary) !important;
}
.pt-drag-over-right {
    box-shadow: inset -3px 0 0 0 var(--color-primary) !important;
}

/* Filter */
.pt-filter-container { position: relative; display: inline-flex; align-items: center; margin-left: 0.125rem; }
.pt-filter-btn {
    padding: 0.125rem; border: none; background: transparent;
    cursor: pointer; color: var(--color-text-placeholder); display: flex; align-items: center;
    transition: color 0.15s;
}
.pt-filter-btn:hover { color: var(--color-text-muted); }
.pt-filter-btn.active { color: var(--color-primary); }
.pt-filter-dropdown {
    display: none;
    background: var(--color-bg-white); border: 1px solid var(--color-border-strong); border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 10000;
    min-width: 200px; max-height: 300px; overflow-y: auto;
}
.pt-filter-dropdown.show { display: block; }
.pt-filter-search { padding: 0.5rem; border-bottom: 1px solid var(--color-border); }
.pt-filter-search-input {
    width: 100%; padding: 0.375rem 0.5rem; border: 1px solid var(--color-border-strong);
    border-radius: 0.25rem; font-size: 0.8125rem; outline: none;
}
.pt-filter-search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgb(var(--petrol-600-rgb) / 0.1); }
.pt-filter-option {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.375rem 0.75rem; cursor: pointer; font-size: 0.8125rem;
}
.pt-filter-option:hover { background: var(--color-bg); }
.pt-filter-actions { padding: 0.5rem; border-top: 1px solid var(--color-border); text-align: right; }
.pt-filter-apply {
    padding: 0.375rem 1rem; background: var(--color-primary); color: white;
    border: none; border-radius: 0.375rem; cursor: pointer; font-size: 0.8125rem;
    transition: background 0.15s;
}
.pt-filter-apply:hover { background: var(--color-primary-text); }

/* Column Search */
.pt-search-row td { padding: 0.25rem 0.5rem; background: var(--color-bg-muted); }
.pt-col-search {
    width: 100%; padding: 0.25rem 0.5rem; border: 1px solid var(--color-border);
    border-radius: 0.25rem; font-size: 0.75rem; outline: none;
}
.pt-col-search:focus { border-color: var(--color-primary); }

/* Inline Edit */
.pt-inline-edit {
    width: 100%; padding: 0.25rem 0.5rem; border: 2px solid var(--color-primary);
    border-radius: 0.25rem; font-size: 0.8125rem; outline: none;
    background: var(--color-primary-subtle);
}

/* Toolbar */
.pt-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.625rem 0.75rem; gap: 0.75rem; flex-wrap: wrap;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    background: var(--color-bg-muted);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.pt-toolbar-left, .pt-toolbar-right { display: flex; align-items: center; gap: 0.5rem; }
.pt-search-input {
    padding: 0.375rem 0.75rem; border: 1px solid var(--color-border-strong);
    border-radius: var(--radius); font-size: 0.8125rem; min-width: 200px; outline: none;
    background: var(--form-bg);
    color: var(--form-text);
}
.pt-search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--form-ring); }

/* Bulk Actions */
.pt-bulk-bar { display: flex; align-items: center; gap: 0.5rem; }
.pt-bulk-count { font-size: 0.8125rem; font-weight: 600; color: var(--color-primary); }
.pt-bulk-btn {
    padding: 0.25rem 0.75rem; border: 1px solid var(--color-border-strong); border-radius: 0.375rem;
    background: var(--color-bg-white); cursor: pointer; font-size: 0.8125rem;
    transition: background 0.15s;
}
.pt-bulk-btn:hover { background: var(--color-bg); }

/* Toolbar - Export Button */
.pt-export-btn {
    background: var(--color-bg-white); border: 1px solid var(--color-border); cursor: pointer;
    color: var(--color-text-muted); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.75rem; white-space: nowrap; transition: all var(--transition);
}
.pt-export-btn:hover { color: var(--color-primary); background: var(--color-primary-soft); border-color: var(--color-primary-soft-hover); }

/* Toolbar - Profilverwaltung inline */
.pt-toolbar-profiles { display: flex; align-items: center; gap: 0.375rem; }
.pt-toolbar-profile-select { min-width: 100px; }
.pt-toolbar-btn {
    padding: 0.25rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-bg-white); cursor: pointer; color: var(--color-text-muted);
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.75rem; white-space: nowrap; transition: all var(--transition);
}
.pt-toolbar-btn:hover { background: var(--color-secondary-hover); color: var(--color-primary); border-color: var(--color-primary-soft-hover); }
.pt-toolbar-delete:hover { background: var(--color-danger-soft); color: var(--color-danger); border-color: var(--rot-300); }

/* Toolbar - Trennlinie & Toggle */
.pt-toolbar-sep { width: 1px; height: 1.25rem; background: var(--color-border); flex-shrink: 0; }
.pt-toolbar-toggle {
    display: flex; align-items: center; gap: 0.375rem; cursor: pointer;
    font-size: 0.8125rem; color: var(--color-text-muted); white-space: nowrap; user-select: none;
}
.pt-toolbar-toggle input { accent-color: var(--color-primary); }

/* Summary: Klickbare Zellen */
.pt-summary-clickable { cursor: pointer; transition: background 0.1s; }
.pt-summary-clickable:hover { background: var(--color-primary-soft); }
.pt-summary-placeholder {
    display: inline-flex; align-items: center; gap: 0.25rem;
    color: var(--color-text-muted); font-size: 0.6875rem;
    padding: 0.125rem 0.5rem; border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-sm); transition: all var(--transition);
}
.pt-summary-clickable:hover .pt-summary-placeholder {
    color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-soft);
}

/* Summary Typ-Auswahl-Menü */
.pt-summary-menu {
    z-index: 10000; background: var(--color-bg-white); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 140px; padding: 0.25rem 0;
}
.pt-summary-menu-item {
    padding: 0.375rem 0.75rem; font-size: 0.8125rem; cursor: pointer; transition: background 0.1s;
}
.pt-summary-menu-item:hover { background: var(--color-secondary-hover); }
.pt-summary-menu-item.pt-menu-active { font-weight: 600; color: var(--color-primary); }

/* Spaltensuche-Scrollbar */
.pt-menu-columns-scroll { max-height: calc(5 * 1.85rem); overflow-y: auto; scrollbar-width: thin; }
.pt-menu-columns-scroll::-webkit-scrollbar { width: 5px; }
.pt-menu-columns-scroll::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }
.pt-menu-columns-scroll::-webkit-scrollbar-track { background: transparent; }

/* Pagination */
.pt-pagination {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0.75rem; flex-shrink: 0;
    border: 1px solid var(--color-border); border-top: none;
    background: var(--color-bg-muted); font-size: 0.8125rem; color: var(--color-text-muted);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.pt-page-controls { display: flex; align-items: center; gap: 0.25rem; }
.pt-page-btn {
    padding: 0.25rem 0.5rem; border: 1px solid var(--color-border-strong); border-radius: 0.25rem;
    background: var(--color-bg-white); cursor: pointer; font-size: 0.875rem; line-height: 1;
    transition: background 0.15s;
}
.pt-page-btn:hover:not(:disabled) { background: var(--color-border); }
.pt-page-btn:disabled { opacity: 0.3; cursor: default; }
.pt-page-current { padding: 0 0.5rem; font-weight: 500; }
.pt-page-size {
    padding: 0.25rem 0.375rem; border: 1px solid var(--color-border-strong);
    border-radius: 0.25rem; font-size: 0.8125rem; margin-right: 0.5rem;
    background: var(--form-bg);
    color: var(--form-text);
}
.pt-page-info { font-weight: 500; }

/* Aggregate Bar */
.pt-aggregate-bar {
    padding: 0.5rem 0.75rem; border-top: 1px solid var(--color-border);
    background: var(--color-bg-muted); font-size: 0.8125rem; color: var(--schnee-700);
}

/* ── Ergebniszeile ─────────────────────────────────────────────────────────
   Zwei Fassungen, weil es zwei Tabellen-Layouts gibt:

   1. Grid-Tabellen: ein eigener Balken (.pt-summary-bar) unter dem
      Scrollbereich, ausgerichtet über --pt-cols.
   2. Tabellen mit eigenem renderRow: ein echtes <tfoot> IN der Tabelle
      (.pt-summary-foot). Die stehen als display:table da (.pt-no-grid), ihre
      Spaltenbreiten bestimmt der Browser - ein Raster daneben kann sich damit
      nicht ausrichten, ein tfoot dagegen von selbst.

   Vorher lief beides über Fassung 1. Bei renderRow fehlt aber --pt-cols
   (core.js entfernt es dort bewusst), also griff der Rückfall unten - und
   "repeat(auto-fill, minmax(0, 1fr))" ergibt bei flexiblem Maximum GENAU EINE
   Spalte. Alle Zellen landeten übereinander in einem schmalen Klumpen. */

.pt-summary-bar {
    flex-shrink: 0;
    border-top: 2px solid var(--color-primary);
    /* Farb-Token statt des früheren festen #f0f9ff: Das war ein helles Blau
       und blieb im Dunkelmodus ein weißer Balken. */
    background: var(--color-primary-soft);
}

.pt-summary-row {
    display: grid;
    grid-template-columns: var(--pt-cols, repeat(auto-fill, minmax(0, 1fr)));
    font-weight: 600;
    font-size: 0.8125rem;
}

/* Die tfoot-Fassung ist eine echte Tabellenzeile - kein Grid, sonst wäre die
   automatische Ausrichtung an den Spalten wieder dahin. */
.pt-summary-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
}
.pt-summary-foot .pt-summary-row {
    display: table-row;
}
.pt-summary-foot .pt-summary-cell {
    border-top: 2px solid var(--color-primary);
    background: var(--color-primary-soft);
}

.pt-summary-cell {
    padding: 0.5rem 0.75rem;
    color: var(--color-primary-text);
    white-space: nowrap;
}
.pt-summary-label {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-right: 0.25rem;
}
.pt-summary-value {
    color: var(--color-primary-strong);
}

/* Summary Config im Settings-Dropdown */
.pt-summary-config {
    padding: 0.25rem 0;
    max-height: 200px;
    overflow-y: auto;
}
.pt-summary-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.75rem;
    gap: 0.5rem;
}
.pt-summary-config-label {
    font-size: 0.75rem;
    color: var(--schnee-600);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-summary-config-select {
    font-size: 0.7rem;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.25rem;
    background: var(--form-bg);
    width: 110px;
    flex-shrink: 0;
}

/* Context Menu */
.pt-context-menu {
    position: fixed; z-index: 9999; background: var(--color-bg-white);
    border: 1px solid var(--color-border); border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    min-width: 200px; padding: 0.375rem 0;
}
.pt-menu-title {
    padding: 0.5rem 0.75rem; font-size: 0.6875rem;
    font-weight: 700; text-transform: uppercase;
    color: var(--color-text-placeholder); letter-spacing: 0.05em;
}
.pt-menu-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.375rem 0.75rem; font-size: 0.8125rem;
    cursor: pointer; transition: background 0.1s;
}
.pt-menu-item:hover { background: var(--color-bg); }
.pt-menu-checkbox { cursor: pointer; }
.pt-menu-action { cursor: pointer; color: var(--schnee-700); }
.pt-menu-action:hover { color: var(--schnee-900); }
.pt-menu-active { font-weight: 600; color: var(--color-primary); }
.pt-menu-danger { color: var(--color-danger); }
.pt-menu-danger:hover { background: var(--rot-50); color: var(--color-danger-hover); }
.pt-menu-divider { height: 1px; background: var(--color-border); margin: 0.375rem 0; }

/* Settings Button (Zahnrad in Header-Zeile) */
.pt-th-settings {
    width: 32px;
    text-align: center;
    padding: 0.625rem 0.25rem;
}
.pt-settings-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-placeholder);
    padding: 0.25rem;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    transition: all 0.15s;
}
.pt-settings-btn:hover { color: var(--schnee-600); background: var(--color-border); }
.pt-icon-settings { width: 14px; height: 14px; }

/* Settings Dropdown */
.pt-settings-dropdown {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    min-width: 240px;
    padding: 0.375rem 0;
    z-index: 10000;
}
.pt-settings-profile-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
}
.pt-settings-profile-select {
    flex: 1;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    outline: none;
    background: var(--form-bg);
    color: var(--form-text);
}
.pt-settings-profile-select:focus { border-color: var(--color-primary); }
.pt-settings-icon-btn {
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.375rem;
    background: var(--color-bg-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    transition: all 0.15s;
}
.pt-settings-save:hover:not(:disabled) { background: var(--gruen-50); color: var(--color-success); border-color: var(--color-success-soft-hover); }
.pt-settings-add:hover { background: var(--color-primary-subtle); color: var(--color-primary); border-color: var(--color-primary-soft-hover); }
.pt-settings-delete:hover:not(:disabled) { background: var(--rot-50); color: var(--color-danger); border-color: var(--color-danger-soft-hover); }
.pt-settings-icon-btn:disabled { opacity: 0.3; cursor: default; }
.pt-td-settings { width: 32px; padding: 0 !important; }

/* Responsive */
.pt-compact .pt-th, .pt-compact .pt-td { padding: 0.375rem 0.5rem; font-size: 0.75rem; }

/* Das seitliche Schieben regelt der .pt-scroll-wrap weiter oben - er sitzt
   immer um die Tabelle. Hier stand vorher ein overflow-x auf .table-container
   plus min-width: 700px auf der Tabelle: wo kein .table-container im Markup
   stand, blieben die 700px trotzdem und sprengten die Seite. Genau daher kam
   das "mal geht es, mal nicht". */
@media (max-width: 768px) {
    .table-container { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 600px) {
    .pt-th, .pt-td { padding: 0.375rem 0.5rem; font-size: 0.75rem; }
    .pt-pagination { flex-direction: column; gap: 0.5rem; }
}
/* Am großen Bildschirm bricht der Zellinhalt um, statt gekürzt zu werden.

   Vorher stand hier nowrap mit Auslassungspunkten: Was nicht in die Spalte
   passte, war schlicht nicht lesbar, und Tabellen im klassischen Layout
   (.pt-no-grid) wurden dadurch breiter als ihr Behälter und mussten quer
   geschoben werden. Umbrechen macht die Zeile höher statt die Tabelle
   breiter - alles bleibt auf einer Seite. Siehe 50-kein-querscrollen.css. */
@media (min-width: 900px) {
    .power-table th,
    .power-table td {
        overflow: hidden;
        text-overflow: clip;
        white-space: normal;
        /* anywhere, nicht break-word: nur anywhere zieht den Umbruch schon in
           die Breitenberechnung ein und macht die Tabelle damit beliebig
           schmal. Mit break-word blieb sie bei 1024 Pixeln 1077 breit und
           wurde vom Behälter rechts abgeschnitten - gemessen am 03.09.2026.
           Der Preis ist, dass ein langer Wert auch mitten im Wort bricht. */
        overflow-wrap: anywhere;
    }
}

@media (max-width: 899px) {
    /* Die Zellen brechen nicht um - jede Spalte ist so breit wie ihr Text.
       Das Schieben und die Breite regelt der Block weiter oben am
       .pt-scroll-wrap.

       Hier stand vorher zusätzlich display:block !important und
       overflow-x:auto !important auf der Tabelle. Die Absicht war dieselbe,
       nur hat das display:block die Flex-Kette zerschlagen: Kopf und Rumpf
       waren danach eigenständige Blöcke, die ihre Breite jeder für sich
       bestimmten (gemessen 784px gegen 1236px) - die Spalten standen
       versetzt untereinander. Und weil die Spalten gleichzeitig auf
       minmax(0, 1fr) bis auf null schrumpfen durften, entstand oft gar kein
       Überlauf: dann gab es nichts zu scrollen, und die Texte liefen
       stattdessen über ihre Zellgrenzen hinaus ineinander. */
    .power-table th,
    .power-table td {
        white-space: nowrap;
    }
}

/* Alte Filter-Klassen (Abwartskompatibilitat fur bestehende Module) */
.filter-dropdown-container { position: relative; display: inline-block; margin-left: 0.25rem; }
.filter-btn { padding: 0.125rem; border: none; background: transparent; cursor: pointer; color: var(--color-text-placeholder); }
.filter-btn:hover, .filter-btn.active { color: var(--color-primary); }
.filter-dropdown { display: none; position: absolute; left: 0; top: 100%; margin-top: 0.25rem; background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: 0.375rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); z-index: 50; min-width: 150px; max-height: 200px; overflow-y: auto; }
.filter-dropdown.show { display: block; }
.filter-option { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.875rem; }
.filter-option:hover { background: var(--color-bg); }
.filter-option.selected { font-weight: 600; color: var(--color-primary); }
.sort-icon { font-size: 0.75rem; color: var(--color-text-placeholder); }
.sort-icon.active { color: var(--color-primary); }
.col-resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 4px; cursor: col-resize; }
.col-resize-handle:hover { background: var(--color-primary); }

/* Chart-Container */
.chart-container {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--color-bg-muted);
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    height: 320px;
    position: relative;
}

.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* TODO/FIXME/Kommentar Marker */
.todo-marker {
    background: var(--color-warning-soft);
    border-left: 4px solid var(--color-warning);
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--color-warning-text);
    border-radius: 0 0.25rem 0.25rem 0;
}

.fixme-marker {
    background: var(--color-danger-soft);
    border-left: 4px solid var(--color-danger);
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--color-danger-text);
    border-radius: 0 0.25rem 0.25rem 0;
}

.kommentar-marker {
    background: var(--color-primary-soft);
    border-left: 4px solid var(--color-primary);
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--color-primary-text);
    border-radius: 0 0.25rem 0.25rem 0;
}

/* Zitationen */
.citation {
    color: inherit !important;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
    border-radius: 2px;
    padding: 0 2px;
}

.citation:hover {
    background-color: var(--color-border);
}

a.citation-link,
.prose a.citation-link {
    color: inherit !important;
    text-decoration: none !important;
}

.citation-error {
    color: var(--color-danger);
    background-color: var(--color-danger-soft);
}

/* Literaturverzeichnis */
.bibliography {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--color-border);
}

.bibliography h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--schnee-800);
}

.bibliography-entries {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bib-entry {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--color-bg);
    border-radius: 0.25rem;
    transition: background-color 0.15s;
}

.bib-entry:hover {
    background-color: var(--color-bg);
}

.bib-number {
    color: var(--color-text-muted);
    font-weight: 500;
    min-width: 2rem;
}

.bib-content {
    flex: 1;
    line-height: 1.5;
}

/* Resizer zwischen Editor und Vorschau */
#editor-resizer {
    width: 4px;
    background: var(--color-border);
    cursor: col-resize;
    flex-shrink: 0;
    transition: background 0.15s;
}

#editor-resizer:hover {
    background: var(--color-primary);
}

/* ===== 34-modul-bachelorarbeit.css ===== */
/* =============================================================================
   21. MODUL: BACHELORARBEIT
   ============================================================================= */

/* ===== HAUPTLAYOUT: Fixe Höhe, kein Seitenscroll ===== */
.bachelorarbeit-module {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Navbar + Header = ca. 128px (64px + 52px + etwas Padding) */
.bachelorarbeit-module main {
    overflow: hidden !important;
    height: calc(100vh - 116px) !important;
}

.bachelorarbeit-module main > div {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

#thesis-container {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    overflow: hidden !important;
}

/* ===== LINKE SIDEBAR: Kapitelstruktur ===== */
#sidebar-struktur {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--color-border);
    background: var(--color-bg-white);
}

#kapitel-baum {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 0.5rem;
}

#statistik-box {
    flex-shrink: 0;
}

/* ===== MITTE: Editor + Vorschau ===== */
#main-editor {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#editor-toolbar {
    flex-shrink: 0;
    height: 44px;
}

#current-path {
    flex-shrink: 0;
    height: 28px;
}

#editor-split {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

#editor-container {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#markdown-editor {
    flex: 1;
    width: 100%;
    min-height: 0;
    resize: none;
    border: none;
    padding: 1rem;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    background: var(--color-bg-muted);
    overflow-y: auto;
}

#markdown-editor:focus {
    outline: none;
}

#preview-container {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-bg-white);
}

/* ===== RECHTE SIDEBAR: Quellen ===== */
#sidebar-quellen {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--color-border);
    background: var(--color-bg-white);
}

#quellen-liste {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 0.5rem;
}

/* Quellen-Suche und Filter */
#sidebar-quellen > div:nth-child(2),
#sidebar-quellen > div:nth-child(3) {
    flex-shrink: 0;
}

/* Tabs unten */
#sidebar-quellen > div:last-child {
    flex-shrink: 0;
}

/* Toolbar Buttons */
.bachelorarbeit-module .toolbar-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
}

.bachelorarbeit-module .toolbar-btn:hover {
    background-color: var(--color-border);
}

.bachelorarbeit-module .toolbar-btn.active {
    background-color: var(--color-primary-soft);
    color: var(--color-primary-text);
}

/* Kapitel-Baum Elemente */
.kapitel-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--color-bg);
    border-radius: 0.25rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
}

.kapitel-header:hover {
    background: var(--color-border);
}

.kapitel-chevron {
    transition: transform 0.2s;
}

.kapitel-chevron.rotate-180 {
    transform: rotate(180deg);
}

.kapitel-dateien {
    margin-top: 0.25rem;
}

.kapitel-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--schnee-600);
}

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

.kapitel-item.active {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
}

.status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-offen { background: var(--color-border-strong); }
.status-in_arbeit { background: var(--sonne-400); }
.status-done { background: var(--color-success); }

/* Quellen-Karten */
.quelle-card {
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.75rem;
}

.quelle-card:hover {
    border-color: var(--color-primary-border);
    background: var(--color-primary-subtle);
}

.quelle-card.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
}

/* Markdown-Vorschau Styling */
#markdown-preview {
    font-family: Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.5;
    color: var(--schnee-800);
    padding: 1.5rem;
}

#markdown-preview h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1.5rem 0 0.75rem 0;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0.5rem;
}

#markdown-preview h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem 0;
    color: var(--schnee-800);
}

#markdown-preview h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem 0;
    color: var(--color-text-secondary);
}

#markdown-preview h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0.75rem 0 0.5rem 0;
    color: var(--schnee-600);
}

#markdown-preview p {
    margin-bottom: 0.75rem;
    text-align: justify;
}

#markdown-preview ul,
#markdown-preview ol {
    margin: 0.5rem 0 0.75rem 1.5rem;
}

#markdown-preview li {
    margin-bottom: 0.25rem;
}

#markdown-preview blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--schnee-600);
    font-style: italic;
    background: var(--color-bg-muted);
    padding: 0.75rem 1rem;
    border-radius: 0 0.25rem 0.25rem 0;
}

#markdown-preview code {
    background: var(--color-bg);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: 'Consolas', monospace;
    color: #be185d;
}

#markdown-preview pre {
    background: var(--schnee-900);
    color: var(--color-border);
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1rem 0;
}

#markdown-preview pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

#markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

#markdown-preview th,
#markdown-preview td {
    border: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

#markdown-preview th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

#markdown-preview tr:nth-child(even) {
    background: var(--color-bg-muted);
}

#markdown-preview a {
    color: var(--color-primary);
    text-decoration: underline;
}

#markdown-preview a:hover {
    color: var(--color-primary-text);
}

#markdown-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

#markdown-preview hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.5rem 0;
}

/* ===== 38-modul-explorer.css ===== */
/* =============================================================================
   21. Modul: Explorer (Datei-Manager)
   ============================================================================= */
.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: .25rem;
}

.list-group-item {
    position: relative;
    display: block;
    padding: .5rem 1rem;
    color: #212529;   /* Bootstrap-Ton; im Dunkelmodus oben überschrieben */
    text-decoration: none;
    background-color: var(--color-bg-white);
    border: 1px solid rgba(0,0,0,.125);
}

.list-group-flush > .list-group-item:last-child {
    border-bottom-width: 1px;
}

.list-group-item-light {
    color: #636464;
    background-color: #fcfcfc;
}

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.file-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.file-checkbox {
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.file-icon-name {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.item-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-name-span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-icon { color: #ffc107; }
.file-icon { color: var(--color-primary); }
.error-icon { color: #dc3545; }
.lock-icon { font-size: 0.8em; margin-left: 5px; color: var(--color-text-muted); }

.file-date {
    width: 160px;
    text-align: right;
    flex-shrink: 0;
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.file-size {
    width: 100px;
    text-align: right;
    padding-right: 1rem;
    flex-shrink: 0;
    font-size: 0.85em;
    color: #495057;
}

.drive-card {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.drive-card:hover, .drive-card-active {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border-color: var(--color-primary) !important;
}

.bi {
    vertical-align: middle;
}

#breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
}

#breadcrumb-list .breadcrumb-item a {
    color: var(--color-primary);
    text-decoration: none;
}

#breadcrumb-list .breadcrumb-item a:hover {
    text-decoration: underline;
}

#breadcrumb-list .breadcrumb-item + .breadcrumb-item::before {
    padding-right: .5rem;
    padding-left: .5rem;
    color: var(--color-text-muted);
    content: "/";
}

#breadcrumb-list .breadcrumb-item.active {
    color: var(--color-text-muted);
}

.item-active {
    background-color: var(--color-primary-soft) !important;
    border-left: 3px solid var(--color-primary);
}

.item-copy-source {
    background-color: #D1FAE5 !important;
    opacity: 0.8;
}

.item-cut-source {
    background-color: var(--color-warning-soft) !important;
    opacity: 0.7;
}

.item-copy-source.item-active,
.item-cut-source.item-active {
    opacity: 1;
}

.progress-bar-text {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 1.5rem;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    z-index: 10;
}

/* ===== 39-modul-player.css ===== */
/* =============================================================================
   GLOBALER VIDEOPLAYER

   Gestaltungsrichtung: dunkler Vorführraum. Das Bild ist der Inhalt, die
   Bedienung legt sich als zwei weiche Schleier darüber und verschwindet, sobald
   sie nicht gebraucht wird. Ein Element trägt Gewicht (Abspielen), alles andere
   ordnet sich unter. Akzentfarbe ist das Petrol des Hauses.

   Der Player bleibt bewusst in EINEM Erscheinungsbild, hell und dunkel gibt es
   hier nicht: die Fläche hinter der Bedienung ist immer ein Videobild.

   Bewegt werden nur transform und opacity. Die Fortschrittsleiste wächst beim
   Überfahren per scaleY, nicht per height - Layout-Animationen ruckeln.
   ============================================================================= */

.gp-schicht {
    /* Eigene Marken, damit Farben, Radien und Dauern nicht ein zweites Mal
       im Code stehen. */
    --gp-flaeche: rgb(16 21 26 / .94);
    --gp-flaeche-leise: rgb(255 255 255 / .10);
    --gp-flaeche-wach: rgb(255 255 255 / .18);
    --gp-rand: rgb(255 255 255 / .14);
    --gp-text: rgb(255 255 255 / .97);
    /* Gedeckter Text mit gemessenem Kontrast: 72 Prozent Weiß auf dieser
       Fläche liegt über 4.5:1. Die vorherigen #666 lagen bei 3.2:1. */
    --gp-text-leise: rgb(255 255 255 / .72);
    --gp-akzent: rgb(var(--petrol-400-rgb));
    --gp-radius: var(--radius-lg);
    --gp-radius-gross: var(--radius-xl);
    --gp-dauer-kurz: 120ms;
    --gp-dauer: 220ms;
    --gp-kurve: cubic-bezier(.2, .8, .3, 1);
    --gp-schatten: 0 18px 48px rgb(0 0 0 / .55), 0 2px 8px rgb(0 0 0 / .40);

    position: fixed;
    inset: 0;
    /* Über den globalen Modals (100001), damit ein Video auch aus einem
       Dialog heraus oben liegt. Meldungen (100002) bleiben darüber. */
    z-index: 100001;
    background: #000;
    color: var(--gp-text);
    font-size: 14px;
    line-height: 1.4;
    user-select: none;
}

body.gp-aktiv { overflow: hidden; }

.gp-buehne {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: none;
}

.gp-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}

.gp-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.gp-icon-sprung { width: 24px; height: 24px; }

/* === Schleier oben und unten ============================================= */
.gp-kopf,
.gp-fuss {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    opacity: 1;
    transition: opacity var(--gp-dauer) var(--gp-kurve),
                transform var(--gp-dauer) var(--gp-kurve);
}

.gp-kopf {
    top: 0;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 40px;
    background: linear-gradient(to bottom, rgb(0 0 0 / .78), rgb(0 0 0 / 0));
}

.gp-fuss {
    bottom: 0;
    flex-direction: column;
    gap: 4px;
    padding: 48px 16px 12px;
    background: linear-gradient(to top, rgb(0 0 0 / .86), rgb(0 0 0 / 0));
}

/* Ruhezustand: Bedienung weg, Zeiger weg. */
.gp-schicht.gp-ruhe .gp-kopf { opacity: 0; transform: translateY(-12px); }
.gp-schicht.gp-ruhe .gp-fuss { opacity: 0; transform: translateY(12px); }
.gp-schicht.gp-ruhe { cursor: none; }

/* === Titelzeile ========================================================= */
.gp-titelgruppe {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;      /* sonst bricht der Titel die Zeile auf */
    flex: 1;
}

.gp-titel {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgb(0 0 0 / .6);
}

.gp-technik {
    font-size: 12px;
    color: var(--gp-text-leise);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-abzeichen {
    flex: 0 0 auto;
    align-self: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgb(var(--petrol-600-rgb) / .85);
    border: 1px solid rgb(var(--petrol-300-rgb) / .45);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* === Fortschrittsleiste ================================================= */
.gp-leiste {
    position: relative;
    height: 26px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}

.gp-leiste-spur {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgb(255 255 255 / .22);
    overflow: hidden;
    transform-origin: center;
    transition: transform var(--gp-dauer-kurz) var(--gp-kurve);
}

.gp-leiste:hover .gp-leiste-spur,
.gp-leiste:focus-visible .gp-leiste-spur { transform: scaleY(1.75); }

.gp-leiste-puffer,
.gp-leiste-gespielt {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
}

.gp-leiste-puffer { background: rgb(255 255 255 / .30); }
.gp-leiste-gespielt { background: var(--gp-akzent); }

.gp-leiste-griff {
    position: absolute;
    top: 50%;
    left: 0;
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
    border-radius: 50%;
    background: var(--gp-akzent);
    box-shadow: 0 1px 4px rgb(0 0 0 / .5);
    transform: translateY(-50%) scale(0);
    transition: transform var(--gp-dauer-kurz) var(--gp-kurve);
    pointer-events: none;
}

.gp-leiste:hover .gp-leiste-griff,
.gp-leiste:focus-visible .gp-leiste-griff { transform: translateY(-50%) scale(1); }

.gp-leiste-blase {
    position: absolute;
    bottom: calc(100% + 6px);
    padding: 4px 8px;
    border-radius: var(--radius);
    background: var(--gp-flaeche);
    border: 1px solid var(--gp-rand);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
    transition: opacity var(--gp-dauer-kurz), transform var(--gp-dauer-kurz);
    pointer-events: none;
}

.gp-leiste-blase.gp-an { opacity: 1; transform: translateX(-50%) translateY(0); }

/* === Bedienreihe ======================================================== */
.gp-bedienung {
    display: flex;
    align-items: center;
    gap: 2px;
}

.gp-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44 Pixel Trefferfläche für Touch, das Symbol bleibt klein. */
    min-width: 44px;
    min-height: 44px;
    padding: 0 4px;
    border: none;
    border-radius: var(--gp-radius);
    background: transparent;
    color: var(--gp-text);
    cursor: pointer;
    transition: background-color var(--gp-dauer-kurz),
                transform var(--gp-dauer-kurz) var(--gp-kurve);
}

.gp-knopf:hover { background: var(--gp-flaeche-leise); }
.gp-knopf:active { transform: scale(.9); }

.gp-knopf:focus-visible,
.gp-leiste:focus-visible,
.gp-tonregler:focus-visible {
    outline: 2px solid var(--gp-akzent);
    outline-offset: 2px;
}

/* Abspielen trägt das Gewicht: größer, und als einziges mit fester Fläche. */
.gp-bedienung .gp-knopf[data-gp="play"] {
    min-width: 52px;
    min-height: 52px;
    margin-right: 2px;
    background: var(--gp-flaeche-leise);
}
.gp-bedienung .gp-knopf[data-gp="play"]:hover { background: var(--gp-flaeche-wach); }
.gp-bedienung .gp-knopf[data-gp="play"] .gp-icon { width: 24px; height: 24px; }

.gp-knopf-text {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.gp-cc {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    padding: 1px 3px;
    line-height: 1.1;
}

/* Rhythmus: Sprunggruppe eng, dann Luft zur Lautstärke. */
.gp-tongruppe {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

/* Der Regler ist dauerhaft sichtbar statt beim Überfahren aufzuklappen.
   Ein Ausklappen hieße width zu animieren, und Layout-Eigenschaften dürfen
   nicht animiert werden. Sichtbar ist ohnehin die bessere Lösung: der alte
   Regler war unsichtbar, belegte aber Platz und blieb klickbar. */
.gp-tonregler {
    display: block;
    width: 78px;
    height: 4px;
    margin: 0 0 0 6px;
    accent-color: var(--gp-akzent);
    background: rgb(255 255 255 / .25);
    border-radius: 2px;
    cursor: pointer;
}

.gp-zeit {
    margin-left: 12px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--gp-text-leise);
    white-space: nowrap;
}

.gp-luecke { flex: 1 1 auto; }

/* === Ladeanzeige ======================================================== */
.gp-lader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity var(--gp-dauer);
    pointer-events: none;
    z-index: 6;
}
.gp-lader.gp-an { opacity: 1; }

.gp-lader-ring {
    display: block;
    width: 46px;
    height: 46px;
    border: 3px solid rgb(255 255 255 / .22);
    border-top-color: var(--gp-akzent);
    border-radius: 50%;
    animation: gp-dreh .8s linear infinite;
}

@keyframes gp-dreh { to { transform: rotate(360deg); } }

/* === Kurzmeldung und Sprungtipp ========================================= */
.gp-hinweis {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 10px 18px;
    border-radius: var(--gp-radius-gross);
    background: var(--gp-flaeche);
    border: 1px solid var(--gp-rand);
    box-shadow: var(--gp-schatten);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.94);
    transition: opacity var(--gp-dauer-kurz), transform var(--gp-dauer-kurz) var(--gp-kurve);
    pointer-events: none;
    z-index: 12;
}
.gp-hinweis.gp-an { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* === Sprunganzeige beim Doppeltipp ======================================
   Statt eines stehenden Ovals wächst eine Fläche vom Bildrand herein und
   drei Winkel springen versetzt in Sprungrichtung an. Damit sieht man die
   Richtung, bevor man die Sekundenzahl gelesen hat.

   Die Welle liegt als eigenes Element unter dem Inhalt: sie wird in der
   Breite gedehnt, was Schrift und Symbole mitverzerren würde. */
.gp-tipp {
    position: absolute;
    top: 50%;
    width: 34%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46%;
    min-height: 130px;
    opacity: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 5;
}
.gp-tipp-links { left: 0; }
.gp-tipp-rechts { right: 0; }

.gp-tipp-welle {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at var(--gp-tipp-quelle, 0%) 50%,
                rgb(255 255 255 / .22) 0%, rgb(255 255 255 / .10) 42%,
                rgb(255 255 255 / 0) 78%);
    transform: scaleX(.2);
    transform-origin: var(--gp-tipp-quelle, left) center;
}
.gp-tipp-links  { --gp-tipp-quelle: 0%; }
.gp-tipp-rechts { --gp-tipp-quelle: 100%; }
.gp-tipp-links  .gp-tipp-welle { transform-origin: left center; }
.gp-tipp-rechts .gp-tipp-welle { transform-origin: right center; }

.gp-tipp-inhalt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.gp-tipp-winkel-reihe {
    display: flex;
    align-items: center;
    gap: 0;
}
/* Rechts läuft die Reihe in Sprungrichtung, also gespiegelt aufgebaut. */
.gp-tipp-rechts .gp-tipp-winkel-reihe { flex-direction: row-reverse; }

.gp-tipp-winkel {
    width: 26px;
    height: 26px;
    margin: 0 -3px;
    color: var(--gp-text);
    opacity: .25;
}

.gp-tipp-text {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gp-text);
    text-shadow: 0 1px 3px rgb(0 0 0 / .6);
}

/* Ablauf: Fläche fährt ein (450ms), Winkel springen versetzt an, alles
   verlässt das Bild in Sprungrichtung. */
.gp-tipp.gp-puls { animation: gp-tipp-auf .62s var(--gp-kurve); }
.gp-tipp.gp-puls .gp-tipp-welle { animation: gp-tipp-welle .62s var(--gp-kurve); }
.gp-tipp-links.gp-puls .gp-tipp-inhalt { animation: gp-tipp-inhalt-links .62s var(--gp-kurve); }
.gp-tipp-rechts.gp-puls .gp-tipp-inhalt { animation: gp-tipp-inhalt-rechts .62s var(--gp-kurve); }
.gp-tipp.gp-puls .gp-tipp-winkel { animation: gp-tipp-winkel .62s var(--gp-kurve); }
.gp-tipp.gp-puls .gp-tipp-winkel:nth-child(2) { animation-delay: .08s; }
.gp-tipp.gp-puls .gp-tipp-winkel:nth-child(3) { animation-delay: .16s; }

@keyframes gp-tipp-auf {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes gp-tipp-welle {
    0%   { transform: scaleX(.18); }
    45%  { transform: scaleX(1); }
    100% { transform: scaleX(1.06); }
}

@keyframes gp-tipp-inhalt-links {
    0%   { transform: translateX(18px); }
    45%  { transform: translateX(0); }
    100% { transform: translateX(-14px); }
}

@keyframes gp-tipp-inhalt-rechts {
    0%   { transform: translateX(-18px); }
    45%  { transform: translateX(0); }
    100% { transform: translateX(14px); }
}

@keyframes gp-tipp-winkel {
    0%   { opacity: .25; }
    30%  { opacity: 1; }
    100% { opacity: .25; }
}

/* === Großer Knopf in der Bildmitte ======================================
   Die einzige Umschaltung zwischen Abspielen und Pause auf der Bühne, für
   Maus und Finger gleichermaßen. Er kommt und geht mit der übrigen
   Bedienung, damit das Bild in Ruhe frei bleibt. */
.gp-mitte {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 1px solid var(--gp-rand);
    border-radius: 50%;
    background: rgb(16 21 26 / .58);
    color: var(--gp-text);
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 28px rgb(0 0 0 / .45);
    transform: translate(-50%, -50%) scale(1);
    transition: opacity var(--gp-dauer) var(--gp-kurve),
                transform var(--gp-dauer) var(--gp-kurve),
                background-color var(--gp-dauer-kurz);
    z-index: 6;
}
.gp-mitte .gp-icon { width: 34px; height: 34px; }
.gp-mitte:hover { background: rgb(16 21 26 / .74); }
.gp-mitte:active { transform: translate(-50%, -50%) scale(.92); }
.gp-mitte:focus-visible { outline: 2px solid var(--gp-akzent); outline-offset: 3px; }

.gp-schicht.gp-ruhe .gp-mitte {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.86);
    pointer-events: none;
}

/* === Menütafel ========================================================== */
.gp-tafel {
    position: absolute;
    right: 12px;
    bottom: 92px;
    width: min(304px, calc(100vw - 24px));
    max-height: min(64vh, 460px);
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--gp-radius-gross);
    background: var(--gp-flaeche);
    border: 1px solid var(--gp-rand);
    box-shadow: var(--gp-schatten);
    backdrop-filter: blur(14px);
    z-index: 20;
}

.gp-tafel-kopf {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--gp-rand);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
}

.gp-tafel-zurueck {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: -4px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.gp-tafel-zurueck:hover { background: var(--gp-flaeche-leise); }
.gp-tafel-zurueck:focus-visible { outline: 2px solid var(--gp-akzent); outline-offset: 1px; }

.gp-tafel-eintrag {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: none;
    border-radius: var(--gp-radius);
    background: transparent;
    color: var(--gp-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--gp-dauer-kurz);
}

.gp-tafel-eintrag:hover { background: var(--gp-flaeche-leise); }
.gp-tafel-eintrag:focus-visible { outline: 2px solid var(--gp-akzent); outline-offset: -2px; }

.gp-tafel-text { flex: 1; min-width: 0; }

.gp-tafel-zusatz {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--gp-text-leise);
}

/* Die gewählte Zeile wird durch einen Balken markiert, nicht nur durch
   Farbe - das trägt auch ohne Farbwahrnehmung. */
.gp-tafel-eintrag.gp-gewaehlt {
    background: rgb(var(--petrol-600-rgb) / .28);
    box-shadow: inset 3px 0 0 var(--gp-akzent);
}

.gp-tafel-leer {
    padding: 10px;
    font-size: 12px;
    color: var(--gp-text-leise);
}

/* Setzt die Werkzeuge für die Fehlersuche sichtbar von den normalen
   Einstellungen ab. */
.gp-tafel-trenner {
    height: 1px;
    margin: 6px 10px;
    background: var(--gp-rand);
}

/* === Fehler, Fortsetzen ================================================= */
.gp-fehler,
.gp-fortsetzen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgb(0 0 0 / .72);
    z-index: 30;
}

.gp-fehler-kasten,
.gp-fortsetzen-kasten {
    width: min(420px, 100%);
    padding: 24px;
    border-radius: var(--gp-radius-gross);
    background: var(--gp-flaeche);
    border: 1px solid var(--gp-rand);
    box-shadow: var(--gp-schatten);
    text-align: center;
}

.gp-fehler-zeichen { color: var(--color-warning); margin-bottom: 10px; }
.gp-fehler-zeichen .gp-icon { width: 34px; height: 34px; }

.gp-fehler-text,
.gp-fortsetzen-text {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.5;
}

.gp-fehler-knoepfe,
.gp-fortsetzen-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.gp-fehler-knopf,
.gp-fortsetzen-knopf {
    min-height: 42px;
    padding: 10px 20px;
    border: 1px solid var(--gp-rand);
    border-radius: var(--gp-radius);
    background: var(--gp-flaeche-leise);
    color: var(--gp-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--gp-dauer-kurz), transform var(--gp-dauer-kurz);
}
.gp-fehler-knopf:hover,
.gp-fortsetzen-knopf:hover { background: var(--gp-flaeche-wach); }
.gp-fehler-knopf:active,
.gp-fortsetzen-knopf:active { transform: scale(.97); }
.gp-fehler-knopf:focus-visible,
.gp-fortsetzen-knopf:focus-visible { outline: 2px solid var(--gp-akzent); outline-offset: 2px; }

.gp-fehler-knopf-haupt,
.gp-fortsetzen-knopf-haupt {
    background: rgb(var(--petrol-600-rgb));
    border-color: rgb(var(--petrol-400-rgb) / .6);
}
.gp-fehler-knopf-haupt:hover,
.gp-fortsetzen-knopf-haupt:hover { background: rgb(var(--petrol-500-rgb)); }

/* === Statistik und Tastenkürzel ========================================= */
.gp-statistik { position: absolute; top: 68px; left: 16px; z-index: 22; }

.gp-statistik-kasten {
    min-width: 240px;
    padding: 12px 14px;
    border-radius: var(--gp-radius);
    background: var(--gp-flaeche);
    border: 1px solid var(--gp-rand);
    box-shadow: var(--gp-schatten);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.gp-statistik-zeile { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; }
.gp-statistik-name { color: var(--gp-text-leise); }

.gp-tasten {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgb(0 0 0 / .72);
    z-index: 26;
}

.gp-tasten-kasten {
    width: min(460px, 100%);
    max-height: 80vh;
    overflow-y: auto;
    padding: 18px 22px 22px;
    border-radius: var(--gp-radius-gross);
    background: var(--gp-flaeche);
    border: 1px solid var(--gp-rand);
    box-shadow: var(--gp-schatten);
}

.gp-tasten-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 600;
}

.gp-tasten-zu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--gp-radius);
    background: var(--gp-flaeche-leise);
    color: inherit;
    cursor: pointer;
}
.gp-tasten-zu:hover { background: var(--gp-flaeche-wach); }
.gp-tasten-zu:focus-visible { outline: 2px solid var(--gp-akzent); outline-offset: 2px; }

.gp-tasten-liste {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 20px;
    margin: 0;
    font-size: 13px;
}
.gp-tasten-liste dt { color: var(--gp-text-leise); }
.gp-tasten-liste dd { margin: 0; text-align: right; }

.gp-tasten-liste kbd {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid var(--gp-rand);
    border-radius: var(--radius-sm);
    background: var(--gp-flaeche-leise);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}

/* === Untertitel ========================================================= */
/* Die Spuren rendert der Browser selbst - gestaltet wird über ::cue. Vorher
   stand hier ein gestalteter Kasten, der nie gefüllt wurde, während die
   echten Untertitel ungestaltet hinter der Bedienleiste lagen. */
.gp-video::cue {
    background: rgb(0 0 0 / .78);
    color: #fff;
    font-size: 1.05em;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgb(0 0 0 / .9);
}

/* Untertitel anheben, solange die Bedienung sichtbar ist. */
.gp-schicht:not(.gp-ruhe) .gp-video::cue { font-size: 1em; }

/* === Fehlersuche ========================================================
   Nur sichtbar, wenn sie im Einstellungsmenü eingeschaltet ist (dort nur für
   Administratoren) oder localStorage 'gp-debug' auf '1' steht. Reine Anzeige:
   die Testdrossel wird im Menü bedient, nicht hier. */
.gp-debug {
    position: absolute;
    top: 68px;
    right: 12px;
    width: min(340px, calc(100vw - 24px));
    max-height: 60vh;
    overflow: auto;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--gp-radius);
    background: rgb(0 0 0 / .82);
    border: 1px solid rgb(var(--gruen-400-rgb) / .5);
    color: rgb(var(--gruen-300-rgb));
    font-family: ui-monospace, monospace;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    pointer-events: none;
    /* Unter der Menütafel, damit die Fehlersuche nie die Bedienung verdeckt.
       Genau das war vorher der Fall: der Kasten lag über CC- und
       Statistik-Anzeige. */
    z-index: 18;
}

/* === Vollbild =========================================================== */
.gp-schicht:fullscreen { font-size: 15px; }
.gp-schicht:fullscreen .gp-titel { font-size: 19px; }
.gp-schicht:fullscreen .gp-kopf { padding: 20px 24px 48px; }
.gp-schicht:fullscreen .gp-fuss { padding: 56px 24px 18px; }

/* === Schmale Schirme ==================================================== */
@media (max-width: 700px) {
    /* Der Regler weicht dem Platz, die Stummtaste bleibt. Auf Geräten dieser
       Breite regelt man die Lautstärke ohnehin am Gerät.
       Bewusst an der Breite entschieden und nicht an (hover: hover): diese
       Abfrage meldet auf manchen Geräten fälschlich "kein Zeigegerät" und
       hätte den Regler dort ganz verschluckt. */
    .gp-tonregler { display: none; }
    .gp-technik { display: none; }
    .gp-kopf { padding: 10px 12px 32px; }
    .gp-fuss { padding: 40px 10px 8px; }
    .gp-zeit { margin-left: 8px; font-size: 12px; }
    .gp-tafel { right: 8px; bottom: 84px; }
    .gp-statistik { top: 58px; left: 10px; }
}

@media (max-width: 460px) {
    /* Gemessen bei 360 Pixeln: die vollständige Reihe braucht 392 Pixel und
       lief rechts aus dem Bild, der Vollbild-Knopf war abgeschnitten.
       Was im Menü oder als Geste erreichbar bleibt, muss nicht in der Reihe
       stehen - Spulen liegt hier auf dem Doppeltipp links und rechts. */
    .gp-bedienung .gp-knopf[data-gp="pip"],
    .gp-bedienung .gp-knopf[data-gp="tempo"],
    .gp-bedienung .gp-knopf[data-gp="zurueckspulen"],
    .gp-bedienung .gp-knopf[data-gp="vorspulen"] { display: none; }

    .gp-bedienung { gap: 0; }
    .gp-bedienung .gp-knopf { min-width: 42px; }
    .gp-bedienung .gp-knopf[data-gp="play"] { min-width: 48px; min-height: 48px; }
    .gp-tongruppe { margin-left: 0; }
    .gp-zeit { margin-left: 8px; font-size: 12px; }
    .gp-titel { font-size: 15px; }
}

/* Sehr flache Fenster (Handy im Querformat): Schleier flacher halten. */
@media (max-height: 430px) {
    .gp-kopf { padding: 8px 12px 22px; }
    .gp-fuss { padding: 24px 10px 6px; }
    .gp-tipp { height: 88px; min-height: 0; }
    .gp-tipp-winkel { width: 20px; height: 20px; }
    .gp-mitte { width: 60px; height: 60px; }
    .gp-mitte .gp-icon { width: 26px; height: 26px; }
}

/* === Reduzierte Bewegung ================================================ */
@media (prefers-reduced-motion: reduce) {
    .gp-kopf,
    .gp-fuss,
    .gp-knopf,
    .gp-leiste-spur,
    .gp-leiste-griff,
    .gp-leiste-blase,
    .gp-hinweis,
    .gp-lader,
    .gp-tafel-eintrag,
    .gp-fehler-knopf,
    .gp-fortsetzen-knopf { transition: none; }

    .gp-lader-ring { animation-duration: 2s; }
    /* Die Sprunganzeige erscheint und geht wieder, aber ohne Fahrt: nur die
       Deckkraft schaltet, Welle und Winkel stehen still. */
    .gp-tipp.gp-puls { animation: gp-tipp-auf .62s linear; }
    .gp-tipp.gp-puls .gp-tipp-welle,
    .gp-tipp.gp-puls .gp-tipp-inhalt,
    .gp-tipp.gp-puls .gp-tipp-winkel { animation: none; }
    .gp-tipp .gp-tipp-welle { transform: scaleX(1); }
    .gp-tipp .gp-tipp-winkel { opacity: 1; }
    .gp-mitte { transition: none; }
    .gp-mitte:active { transform: translate(-50%, -50%); }
    .gp-knopf:active { transform: none; }
}

/* === Karten-Kontextmenü (Messwerkzeuge) === */
.df-context-menu {
    position: absolute;
    z-index: 10000;
    background: var(--color-bg-white);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.1);
    padding: 4px 0;
    min-width: 200px;
    font-size: 13px;
    animation: df-ctx-fade-in 0.12s ease-out;
}
@keyframes df-ctx-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.df-context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.1s;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.df-context-menu-item:hover {
    background: var(--color-primary-subtle);
    color: var(--color-primary-text);
}
.df-context-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
}
.df-context-menu-sep {
    height: 1px;
    background: var(--color-border);
    margin: 4px 0;
}
.df-context-menu-item.danger { color: var(--color-danger); }
.df-context-menu-item.danger:hover { background: var(--rot-50); color: var(--color-danger-hover); }

/* Mess-Labels auf der Karte */
.df-measurement-label {
    background: rgba(0,0,0,0.75);
    color: var(--color-bg-white);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}
.df-measurement-area-label {
    background: rgb(var(--petrol-600-rgb) / 0.85);
    color: var(--color-bg-white);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}
/* Cursor im Messmodus */
.df-measuring-cursor .leaflet-container { cursor: crosshair !important; }
.df-measuring-cursor .leaflet-interactive { cursor: crosshair !important; }

/* Profil-Viewer Toolbar */
.df-pv-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg-white);
    cursor: pointer;
    transition: all 0.15s;
}
.df-pv-tool:hover { background: var(--color-primary-subtle); border-color: var(--color-primary-border); }
.df-pv-tool.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-bg-white); }
.df-pv-tool.active svg { stroke: var(--color-bg-white); }

/* === GROSSANLAGEN-MODUL === */
.ga-card { background:var(--color-bg-white); border:1px solid var(--color-border); border-radius:.5rem; padding:1.25rem; }
.ga-card-h3 { font-size:1rem; font-weight:600; color:var(--schnee-950); margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; }
.ga-field { display:flex; flex-direction:column; gap:.25rem; margin-bottom:.75rem; }
.ga-field label { font-size:.8125rem; color:var(--color-text-muted); font-weight:500; }
.ga-field input, .ga-field select { padding:.5rem .75rem; border:1px solid var(--color-border-strong); border-radius:.375rem; font-size:.875rem; background:var(--color-bg-white); }
.ga-field input:disabled, .ga-field select:disabled { background:var(--color-bg); color:var(--color-text-placeholder); }
.ga-info-banner { background:var(--color-primary-subtle); border:1px solid var(--color-primary-soft-hover); color:var(--color-primary-text); padding:.75rem 1rem; border-radius:.5rem; display:flex; gap:.5rem; align-items:start; font-size:.875rem; }
.ga-readonly { background:var(--color-bg-muted); padding:.625rem .875rem; border:1px solid var(--color-border); border-radius:.375rem; font-size:.875rem; display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.ga-readonly .ga-label { color:var(--color-text-muted); font-size:.75rem; }
.ga-readonly .ga-value { font-weight:600; color:var(--schnee-950); text-align:right; }
.ga-area-kategorie-row { display:flex; align-items:center; gap:.75rem; padding:.5rem .75rem; background:var(--color-bg-muted); border:1px solid var(--color-border); border-radius:.375rem; }
.ga-area-kategorie-row .ga-area-name { flex:1; font-size:.875rem; font-weight:500; color:var(--schnee-950); }
.ga-area-kategorie-row select { padding:.375rem .5rem; border:1px solid var(--color-border-strong); border-radius:.375rem; font-size:.8125rem; background:var(--color-bg-white); }
.ga-project-picker-list { display:flex; flex-direction:column; gap:.5rem; max-height:60vh; overflow-y:auto; }
.ga-project-picker-item { text-align:left; padding:.75rem 1rem; border:1px solid var(--color-border); border-radius:.5rem; background:var(--color-bg-white); cursor:pointer; transition:all .15s; }
.ga-project-picker-item:hover { background:var(--color-primary-subtle); border-color:var(--color-primary-border); }
.ga-project-picker-name { font-weight:600; color:var(--schnee-950); }
.ga-project-picker-addr { font-size:.8125rem; color:var(--color-text-muted); margin-top:.125rem; }
.ga-table-wrapper { overflow-x:auto; }
.ga-positions-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.ga-positions-table th { text-align:left; padding:.5rem .75rem; background:var(--color-bg); color:var(--schnee-600); font-weight:600; border-bottom:1px solid var(--color-border-strong); white-space:nowrap; }
.ga-positions-table td { padding:.375rem .5rem; border-bottom:1px solid var(--color-border); vertical-align:middle; }
.ga-positions-table tfoot td { font-weight:600; background:var(--color-bg); border-top:2px solid var(--color-border-strong); }
.ga-positions-table input[type=text],
.ga-positions-table input[type=number],
.ga-positions-table select { width:100%; padding:.25rem .375rem; border:1px solid var(--color-border); border-radius:.25rem; font-size:.8125rem; background:var(--color-bg-white); }
.ga-positions-table input[type=number].ga-num { text-align:right; }
.ga-positions-table input[type=checkbox] { width:auto; }
.ga-positions-table tr:hover td { background:var(--color-bg-muted); }
.ga-row-del { background:transparent; border:none; padding:.25rem; cursor:pointer; }
.ga-kpi { background:var(--color-bg-white); border:1px solid var(--color-border); border-radius:.5rem; padding:.875rem 1rem; box-shadow:0 1px 2px rgba(15,23,42,.04); display:flex; flex-direction:column; gap:.125rem; }
.ga-kpi-label { font-size:.7rem; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:500; }
.ga-kpi-value { font-size:1.25rem; font-weight:700; color:var(--schnee-950); }

/* Erklär-Komponente: Frage-Icon das beim Klick eine Erklärung ausklappt.
   Verwendung: <span class="ga-hilfe"><button class="ga-hilfe-btn">?</button><span class="ga-hilfe-text">Erklärung</span></span> */
.ga-hilfe { display:inline-flex; align-items:center; position:relative; margin-left:.25rem; vertical-align:middle; }
.ga-hilfe-btn { width:1rem; height:1rem; border-radius:50%; border:none; background:var(--color-border-strong); color:var(--color-bg-white); font-size:.7rem; font-weight:700; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:background .15s; }
.ga-hilfe-btn:hover { background:var(--color-primary); }
.ga-hilfe.open .ga-hilfe-btn { background:var(--color-primary); }
.ga-hilfe-text { display:none; position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); width:max-content; max-width:280px; background:var(--schnee-950); color:var(--color-bg); font-size:.75rem; font-weight:400; line-height:1.4; text-transform:none; letter-spacing:normal; padding:.6rem .75rem; border-radius:.4rem; box-shadow:0 4px 14px rgba(15,23,42,.25); z-index:50; white-space:normal; }
.ga-hilfe.open .ga-hilfe-text { display:block; }
.ga-hilfe-text::before { content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-bottom-color:var(--schnee-950); }

/* Szenario-Umschalter (vorsichtig / erwartet / optimistisch) */
.ga-szenario-switch { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.ga-szenario-btn { display:flex; flex-direction:column; gap:.2rem; text-align:left; padding:.75rem .9rem; border:2px solid var(--color-border); border-radius:.6rem; background:var(--color-bg-white); cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s; }
.ga-szenario-btn:hover { border-color:var(--color-primary-soft-hover); background:var(--color-bg-muted); }
.ga-szenario-btn.active { border-color:var(--color-primary); background:var(--color-primary-subtle); box-shadow:0 1px 3px rgb(var(--petrol-600-rgb) / .2); }
.ga-szenario-btn-title { font-weight:700; color:var(--schnee-950); font-size:.95rem; }
.ga-szenario-btn-sub { font-size:.75rem; color:var(--color-text-muted); line-height:1.3; }
@media (max-width:640px) { .ga-szenario-switch { grid-template-columns:1fr; } }

/* Großanlagen-Modul: Layout 1:1 analog Photovoltaik (#pv-layout-container / #photovoltaik-container).
   Layout-Container ist position:fixed unterhalb Header+Tabbar, der Innere scrollt. */
#grossanlagen-container {
    min-height: 100vh;
    background-color: var(--color-bg);
}
#ga-layout-container {
    position: fixed;
    top: var(--kopf-unterkante); /* misst layout.html */
    left: 0;
    right: 0;
    bottom: 0;
    height: auto !important;
    overflow: hidden !important;
    display: flex;
}
#ga-layout-container #grossanlagen-container {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
}

.ga-badge { display:inline-block; padding:.125rem .5rem; border-radius:.25rem; font-size:.75rem; font-weight:500; }
.ga-badge-green { background:#d1fae5; color:#065f46; }
/* Der Name sagt "blue", die Farbe ist inzwischen Petrol: die Klasse markiert
   eine Rolle, keine Farbe, und kein Text nennt sie beim Namen. */
.ga-badge-blue { background:var(--color-primary-soft); color:var(--color-primary-text); }
.ga-badge-amber { background:var(--color-warning-soft); color:var(--color-warning-text); }
.ga-badge-red { background:var(--color-danger-soft); color:var(--color-danger-text); }
.ga-chart-placeholder { background:repeating-linear-gradient(45deg,var(--color-bg-muted),var(--color-bg-muted) 10px,var(--color-bg) 10px,var(--color-bg) 20px); border:1px dashed var(--color-border-strong); border-radius:.5rem; height:250px; display:flex; align-items:center; justify-content:center; color:var(--color-text-muted); font-size:.875rem; padding:1rem; text-align:center; }
.ga-kpi-sub { font-size:.7rem; color:var(--color-text-muted); margin-top:.125rem; }

.ga-szen-card { border:1px solid var(--color-border); border-radius:.5rem; background:var(--color-bg-white); overflow:hidden; transition:opacity .15s; }
.ga-szen-card.ga-szen-inaktiv { opacity:.5; }
.ga-szen-head { display:flex; align-items:center; gap:.75rem; padding:.625rem .875rem; background:var(--color-bg-muted); border-bottom:1px solid var(--color-border); }
.ga-szen-head input[type=text] { padding:.25rem .5rem; border:1px solid transparent; background:transparent; font-weight:600; color:var(--schnee-950); }
.ga-szen-head input[type=text]:hover, .ga-szen-head input[type=text]:focus { background:var(--color-bg-white); border-color:var(--color-border-strong); }
.ga-szen-body { padding:1rem 1.25rem; }

.ga-modus-btn { padding:.5rem 1rem; border:2px solid var(--color-border-strong); border-radius:.5rem; background:var(--color-bg-white); color:var(--schnee-600); font-size:.875rem; font-weight:500; cursor:pointer; transition:all .15s; }
.ga-modus-btn:hover { border-color:var(--color-text-placeholder); background:var(--color-bg-muted); }
.ga-modus-btn.active { border-color:var(--schnee-950); background:var(--schnee-950); color:var(--color-bg-white); }

/* Belegungs-Auswahl-Modal (automatische Modulbelegung) */
.belegung-options { display:flex; flex-direction:column; gap:.5rem; }
.belegung-option { display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border:2px solid var(--color-border); border-radius:.5rem; cursor:pointer; transition:all .15s; }
.belegung-option:hover { border-color:var(--color-primary-border); background:var(--color-bg-muted); }
.belegung-option.selected { border-color:var(--color-primary); background:var(--color-primary-subtle); }
.belegung-option input[type=radio] { accent-color:var(--color-primary); width:1.05rem; height:1.05rem; flex:0 0 auto; }
.belegung-option-title { font-weight:600; color:var(--schnee-950); font-size:.9rem; }
.belegung-desc-box { margin-top:.9rem; padding:.8rem 1rem; background:var(--color-bg); border-left:3px solid var(--color-primary); border-radius:.375rem; font-size:.85rem; line-height:1.45; color:var(--schnee-700); min-height:2.5rem; }

/* ===== 42-ki-chat.css ===== */
/* ── Chat-Fenster: Kontur ──
   Dieselbe Kante wie die Modals (43-modals-global.css): im Hellmodus
   durchsichtig, im Dunkelmodus ein heller Saum. Ohne ihn verschwimmt das
   Fenster mit der dunklen Seite dahinter; der Tailwind-Rahmen border-gray-300
   ist im Dunkelmodus praktisch unsichtbar. */
#ai-chat-window:not(.ai-sidebar-panel) {
    border-color: transparent;
    box-shadow: 0 0 0 1px var(--kontur-erhaben), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ── Chat-Fenster: Verschieben & Größe ändern (floating) ── */

/* Drag-Cursor im Header (außer auf Buttons) */
#ai-chat-window .bg-blue-600 {
    cursor: grab;
    user-select: none;
}
#ai-chat-window .bg-blue-600 button,
#ai-chat-window .bg-blue-600 a {
    cursor: pointer;
}

/* Resize-Handle rechts unten */
#ai-chat-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    cursor: se-resize;
    border-radius: 0 0 8px 0;
    background:
        linear-gradient(135deg, transparent 40%, var(--color-border-strong) 40%, var(--color-border-strong) 50%, transparent 50%),
        linear-gradient(135deg, transparent 60%, var(--color-border-strong) 60%, var(--color-border-strong) 70%, transparent 70%);
    opacity: 0.6;
    transition: opacity 0.15s;
    z-index: 1;
}
#ai-chat-resize-handle:hover {
    opacity: 1;
}

/* ── KI-Chat als eingebettete Seitenleiste (Dachflächen-Modul) ── */

#ai-chat-window.ai-sidebar-panel {
    /* Floating-Styles deaktivieren */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 380px;          /* KEIN !important – JS muss width per Inline-Style überschreiben können */
    height: 100% !important;
    max-height: none !important;
    min-width: 280px !important;
    /* Sidebar-Stil (analog zur linken Sidebar) */
    flex-shrink: 0;
    border-radius: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
    border-left: 1px solid var(--color-border) !important;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08) !important;
    z-index: auto !important;
}

/* Header nicht draggable im Panel-Modus */
#ai-chat-window.ai-sidebar-panel .bg-blue-600 {
    cursor: default !important;
    border-radius: 0 !important;
}

/* Resize-Handle im Panel-Modus: links, vertikaler Balken zum Breiteanpassen */
#ai-chat-window.ai-sidebar-panel #ai-chat-resize-handle {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 8px;
    height: 100%;
    border-radius: 0;
    background: transparent;
    cursor: ew-resize;
    opacity: 1;
    transition: background 0.15s;
}
/* Sichtbarer Drag-Griff (vertikale Punkte) */
#ai-chat-window.ai-sidebar-panel #ai-chat-resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 32px;
    background-image: radial-gradient(circle, var(--color-text-placeholder) 1.5px, transparent 1.5px);
    background-size: 4px 8px;
    background-repeat: repeat-y;
    opacity: 0.6;
    transition: opacity 0.15s;
}
#ai-chat-window.ai-sidebar-panel #ai-chat-resize-handle:hover::after { opacity: 1; }
#ai-chat-window.ai-sidebar-panel #ai-chat-resize-handle:hover {
    background: rgb(var(--petrol-600-rgb) / 0.2);
}

/* ── Freigabe-Frage im Gesprächsverlauf ──────────────────────────────────
   Der Assistent fragt hier um Erlaubnis, bevor er einen Screenshot ansieht,
   Formularwerte liest oder in die Konsolenfehler schaut. Gefragt wird jedes
   Mal neu - es gibt bewusst keine Dauerzustimmung, weil auf jedem Bildschirm
   andere Daten stehen.

   Warnfarbe statt Chat-Grau: Das ist eine Entscheidung des Benutzers über
   seine eigenen Daten, keine Beiläufigkeit im Gesprächsfluss. */
.agent-consent-frage {
    max-width: 85%;
    background: var(--color-warning-soft);
    border: 1px solid var(--color-warning-border);
    border-radius: 8px;
    padding: 10px 12px;
}

.agent-consent-text {
    font-size: 13px;
    color: var(--color-warning-text);
    margin: 0;
}

.agent-consent-knöpfe {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

/* Der Vermerk bleibt nach der Entscheidung stehen: im Verlauf muss
   ablesbar sein, was freigegeben wurde und was nicht. */
.agent-consent-ja,
.agent-consent-nein {
    font-size: 12px;
    font-weight: 600;
    margin: 0.625rem 0 0;
}
.agent-consent-ja   { color: var(--color-success-text); }
.agent-consent-nein { color: var(--color-text-muted); }

/* ===== 43-modals-global.css ===== */
/* =============================================================================
   GLOBAL MODAL SYSTEM (gm-)
   Einheitliches Modal-System für alle Module.
   Prefix gm- vermeidet Konflikte mit bestehenden Klassen.
   ============================================================================= */

/* --- CSS Custom Properties --- */
:root {
    --gm-nav-h-sm: 3.5rem;   /* 56px - Nav-Höhe mobile */
    --gm-nav-h: 4rem;         /* 64px - Nav-Höhe desktop */
    --gm-gap: 1.5rem;          /* Abstand oben/unten */
    --gm-z: 45;                /* Unter Nav (z-50), über Header (z-40) */
    --gm-radius: 0.75rem;
    --gm-anim: 150ms;
    /* Aus dem Farbsystem in main.css, nicht als eigene Hex-Werte: sonst
       laufen die Modale bei der nächsten Farbänderung aus der Reihe. Genau
       das war hier der Fall - die Modale trugen Grautöne von Tailwind,
       während der Rest der Anwendung auf der Schnee-Rampe steht. */
    --gm-border: var(--color-border);
    --gm-bg-subtle: var(--color-bg-muted);
}

/* =============================================================================
   OVERLAY (Backdrop)
   ============================================================================= */
.gm-overlay {
    position: fixed;
    top: var(--gm-nav-h-sm);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--gm-z);
    background: rgba(31, 41, 55, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gm-gap);
    animation: gm-fade-in var(--gm-anim) ease-out;
}
@media (min-width: 640px) {
    .gm-overlay {
        top: var(--gm-nav-h);
    }
    .gm-box {
        max-height: calc(100vh - var(--gm-nav-h) - var(--gm-gap) * 2);
        max-height: calc(100dvh - var(--gm-nav-h) - var(--gm-gap) * 2);
    }
}

/* Ladeanzeige über der ganzen Fläche: deckend statt durchscheinend.
   Die Module hatten das mit style="background:#fff" bzw. rgba(...) im
   Markup gelöst - jedes in seinem eigenen Ton. */
.gm-overlay.gm-laden {
    background: var(--color-bg-white);
    align-items: center;
    justify-content: center;
}

/* Ladeanzeige über einem offenen Dialog.
   Alle Overlays teilen sich dieselbe Ebene; bei Gleichstand gewinnt das
   zuletzt eingefügte Element. Ein Dialog wird zur Laufzeit erzeugt und liegt
   damit über der Ladeanzeige, die fest im Seitengerüst steht - sie wäre
   unsichtbar. Diese Klasse hebt sie für die Dauer des Wartens darüber. */
.gm-overlay.gm-über-modal {
    z-index: calc(var(--gm-z) + 5);
}

/* Fullscreen-Modus: Overlay und Box decken alles ab */
.gm-overlay.gm-fullscreen {
    top: 0 !important;
    padding: 0 !important;
    z-index: 99999;
}
.gm-overlay.gm-fullscreen .gm-box {
    max-height: 100vh !important;
    max-height: 100dvh !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* =============================================================================
   BOX (Container)
   ============================================================================= */
.gm-box {
    background: var(--color-bg-white);
    border-radius: var(--gm-radius);
    /* Erster Wert trägt im Dunkelmodus die Kante: Der Schlagschatten dahinter
       ist schwarz und hebt das Modal nur vom hellen Grund ab - auf dunklem
       Grund verschwimmt es mit dem abgedunkelten Hintergrund. Im Hellmodus ist
       --kontur-erhaben durchsichtig, dort ändert sich also nichts. */
    box-shadow: 0 0 0 1px var(--kontur-erhaben), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--gm-nav-h-sm) - var(--gm-gap) * 2);
    max-height: calc(100dvh - var(--gm-nav-h-sm) - var(--gm-gap) * 2);
    width: 100%;
    overflow: hidden;
    animation: gm-enter var(--gm-anim) ease-out;
}

/* --- Breitenvarianten --- */
.gm-sm   { max-width: 28rem; }    /* 448px */
.gm-md   { max-width: 40rem; }    /* 640px */
.gm-lg   { max-width: 56rem; }    /* 896px */
.gm-xl   { max-width: 72rem; }    /* 1152px */
.gm-full { max-width: calc(100vw - var(--gm-gap) * 2); align-self: stretch; }

/* =============================================================================
   HEADER
   ============================================================================= */
.gm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--gm-border);
    flex-shrink: 0;
    gap: 1rem;
}
.gm-header h2,
.gm-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.4;
    min-width: 0;
}

/* Kopf mit Überzeile: darüber steht, worum es geht (z.B. "Vorhaben"),
   darunter der konkrete Fall. Die Überzeile war in den Wizards blau -
   eine Farbe, die im Farbkonzept nicht vorkommt. */
.gm-header.gm-kopf-zweizeilig h3 {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.gm-kopf-oberzeile {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
}
.gm-kopf-titel {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}
/* Unterzeile: Einordnung unter dem Titel, z.B. "Schritt 1 von 2" */
.gm-kopf-unterzeile {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* Danger Header - Rost, wie jede andere Warnung in dieser Anwendung */
.gm-header.gm-danger {
    background: var(--color-danger-soft);
    border-bottom-color: var(--color-danger-border);
}
.gm-header.gm-danger h2,
.gm-header.gm-danger h3 {
    color: var(--color-danger-text);
}

/* =============================================================================
   CLOSE BUTTON
   ============================================================================= */
.gm-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    background: none;
    color: var(--color-text-placeholder);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
}
.gm-close:hover {
    color: var(--color-text-secondary);
    background: var(--color-bg);
}
.gm-close::after {
    content: '\00D7'; /* x */
}

/* =============================================================================
   TAB NAVIGATION (im Modal)
   Design identisch mit tab-nav-button aus main.css
   ============================================================================= */
.gm-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--gm-border);
    background: var(--gm-bg-subtle);
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.gm-tab {
    border: none;
    background-color: var(--color-bg);
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--form-radius);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.gm-tab.active {
    color: var(--color-bg-white);
    background-color: var(--color-primary);
}
.gm-tab:not(.active):hover {
    background-color: var(--color-secondary-hover);
    color: var(--color-text);
}
.gm-tab i {
    font-size: 0.85rem;
}

/* Tab im "done"-Zustand (Wizard - Schritt erledigt) */
.gm-tab.done {
    background-color: var(--color-success-soft);
    color: var(--color-success-text);
}
.gm-tab.done:hover {
    background-color: var(--color-success-soft-hover);
}

/* Wizard-Nummer-Badge im Tab */
.gm-wizard-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}
.gm-tab.active .gm-wizard-num {
    background: rgba(255, 255, 255, 0.3);
    color: var(--color-bg-white);
}
.gm-tab.done .gm-wizard-num {
    background: var(--color-success);
    color: var(--color-bg-white);
}

/* Tab Panels */
.gm-tab-panel {
    display: none;
}
.gm-tab-panel.active {
    display: block;
}

/* =============================================================================
   WIZARD NAVIGATION (Schrittanzeige)
   ============================================================================= */
.gm-wizard-nav {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--gm-border);
    background: var(--gm-bg-subtle);
    flex-shrink: 0;
}
/* Steht die Schrittanzeige in einer gm-leiste, bringt die schon Polster,
   Hintergrund und Trennlinie mit - sonst läge beides doppelt übereinander. */
.gm-leiste > .gm-wizard-nav {
    padding: 0;
    border-bottom: none;
    background: none;
}
.gm-wizard-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-text-placeholder);
    white-space: nowrap;
}
.gm-wizard-step.active {
    color: var(--color-primary-text);
    font-weight: 600;
}
.gm-wizard-step.done {
    color: var(--color-success-text);
}
.gm-wizard-dot {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--color-border);
    color: var(--color-text-placeholder);
    transition: all 0.2s;
}
.gm-wizard-step.active .gm-wizard-dot {
    background: var(--color-primary);
    color: var(--color-bg-white);
}
.gm-wizard-step.done .gm-wizard-dot {
    background: var(--color-success);
    color: var(--color-bg-white);
}
.gm-wizard-line {
    flex: 1;
    height: 2px;
    min-width: 1rem;
    background: var(--color-border);
    margin: 0 0.25rem;
}
.gm-wizard-line.done {
    background: var(--color-success);
}
.gm-wizard-line.active {
    background: var(--color-primary);
}

/* Wizard Step Panels */
.gm-wizard-panel {
    display: none;
}
.gm-wizard-panel.active {
    display: block;
}

/* =============================================================================
   FORM innerhalb gm-box (damit die Flex-Kette nicht bricht)
   ============================================================================= */
.gm-box > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* =============================================================================
   BODY (scrollbarer Inhalt)
   ============================================================================= */
.gm-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    /* Grundfarbe über Token: Inhalte ohne eigene Farbangabe sind damit in
       beiden Themen lesbar - hart gesetzte Grautöne einzelner Dialoge waren
       im Dunkelmodus fast unsichtbar. */
    color: var(--color-text);
}

/* Flächiger Inhalt: Karte, Bildeditor, 3D-Ansicht.
   Der nimmt den Platz ein, statt zu scrollen - und er braucht kein Polster,
   weil er bis an den Rand geht. */
.gm-body-flaechig {
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* Fortschritt in Schritten: ein Balken je Schritt, erledigte in Petrol.
   Die Wizards hatten das als blaue Balken im Markup - blau kommt im
   Farbkonzept nicht vor.

   <div class="gm-fortschritt">
       <span class="erledigt"></span><span></span>
   </div> */
.gm-fortschritt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.gm-fortschritt > span {
    height: 0.375rem;
    flex: 1;
    border-radius: 9999px;
    background: var(--gm-border);
    transition: background-color 0.2s;
}
.gm-fortschritt > span.erledigt {
    background: var(--color-primary);
}

/* Eine Leiste, die stehen bleibt: Suchfeld über der Karte, Hinweiszeile
   darunter, Werkzeugleiste. Zwischen Kopf und Fuß können mehrere davon
   liegen, der Inhalt dazwischen bekommt den Rest. */
.gm-leiste {
    flex-shrink: 0;
    padding: 0.75rem 1.25rem;
    background: var(--gm-bg-subtle);
    border-bottom: 1px solid var(--gm-border);
}
.gm-leiste-unten {
    border-bottom: none;
    border-top: 1px solid var(--gm-border);
}

/* Box, die die volle erlaubte Höhe einnimmt - für Modale mit Karte oder
   Editor, wo der Inhalt nicht von selbst genug Höhe mitbringt. */
.gm-box-hoch {
    height: calc(100vh - var(--gm-nav-h-sm) - var(--gm-gap) * 2);
    height: calc(100dvh - var(--gm-nav-h-sm) - var(--gm-gap) * 2);
}
@media (min-width: 640px) {
    .gm-box-hoch {
        height: calc(100vh - var(--gm-nav-h) - var(--gm-gap) * 2);
        height: calc(100dvh - var(--gm-nav-h) - var(--gm-gap) * 2);
    }
}

/* =============================================================================
   FOOTER (fixiert)
   ============================================================================= */
.gm-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--gm-border);
    background: var(--gm-bg-subtle);
    flex-shrink: 0;
}
.gm-footer-split {
    justify-content: space-between;
}
.gm-footer-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.gm-footer-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Button-Styles wurden nach main.css (.btn) migriert. */

/* =============================================================================
   ANIMATIONEN
   ============================================================================= */
@keyframes gm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes gm-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
@keyframes gm-spin {
    to { transform: rotate(360deg); }
}

/* =============================================================================
   MOBILE RESPONSIVE
   ============================================================================= */

/* Mobile: Rand zum Nav und zum unteren Bildschirmrand */
@media (max-width: 639px) {
    .gm-overlay {
        padding: 0.5rem;
    }
    .gm-box {
        border-radius: 0.5rem;
        max-height: calc(100vh - var(--gm-nav-h-sm) - 1rem);
        max-height: calc(100dvh - var(--gm-nav-h-sm) - 1rem);
    }
    .gm-header h2,
    .gm-header h3 {
        font-size: 1rem;
    }
    .gm-body {
        padding: 1rem;
    }
    .gm-header,
    .gm-footer {
        padding: 0.625rem 1rem;
    }
    .gm-tabs {
        padding: 0.375rem 0.75rem;
    }
}

/* Sehr kleine Bildschirme: Vollbild-Modale */
@media (max-width: 479px) {
    .gm-overlay {
        padding: 0;
    }
    .gm-box {
        border-radius: 0;
        max-height: calc(100vh - var(--gm-nav-h-sm));
        max-height: calc(100dvh - var(--gm-nav-h-sm));
    }
    .gm-footer {
        flex-wrap: wrap;
    }
    .gm-footer .btn {
        flex: 1 1 auto;
        min-width: 0;
    }
    .gm-wizard-step span:not(.gm-wizard-dot) {
        display: none;
    }
}

/* =============================================================================
   AUSWAHLKACHELN (GlobalModal.auswahl)

   Eine Liste statt eines Kachelrasters: die Einträge sind ungleich wichtig und
   ungleich lang, ein 2x2-Raster aus gleich großen weißen Flächen zeigt davon
   nichts. Links ein farbiger Zeichenblock (Farbe trägt Bedeutung: Dauerlast,
   Spitzenlast, Wärme, frei konfigurierbar), in der Mitte Name über Kennwerten
   mit deutlichem Größenkontrast, rechts ein Pfeil, der erst beim Überfahren
   heranrückt.

   Die Farben kommen aus den Themenvariablen, damit das dunkle Thema mitgeht.
   ============================================================================= */
.gm-wahl-einleitung {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.gm-wahl-liste {
    display: grid;
    gap: 0.5rem;
}

.gm-wahl-karte {
    --gm-wahl-ton: var(--color-text-muted);
    --gm-wahl-flaeche: var(--color-bg-muted);

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    background: var(--color-bg-white);
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.gm-wahl-karte:hover,
.gm-wahl-karte:focus-visible {
    border-color: var(--gm-wahl-ton);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px -12px var(--gm-wahl-ton);
    transform: translateY(-1px);
    outline: none;
}

.gm-wahl-karte:active {
    transform: translateY(0);
}

/* Zeichenblock: eigene Ebene, nicht nur ein buntes Symbol auf weiss */
.gm-wahl-zeichen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.6rem;
    background: var(--gm-wahl-flaeche);
    color: var(--gm-wahl-ton);
    flex-shrink: 0;
}

.gm-wahl-zeichen svg {
    width: 1.2rem;
    height: 1.2rem;
}

.gm-wahl-text {
    display: block;
    min-width: 0;
}

.gm-wahl-name {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
}

.gm-wahl-beschreibung {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* Kennwerte: Zahl trägt, Einheit tritt zurück */
.gm-wahl-kennwerte {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin-top: 0.3rem;
}

.gm-wahl-kennwert {
    display: inline-flex;
    align-items: baseline;
    gap: 0.15rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.gm-wahl-kennwert b {
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gm-wahl-ton);
}

.gm-wahl-kennwert i {
    font-style: normal;
}

.gm-wahl-trenner {
    width: 1px;
    align-self: stretch;
    background: var(--color-border);
}

.gm-wahl-pfeil {
    display: flex;
    color: var(--gm-wahl-ton);
    opacity: 0;
    transform: translateX(-0.25rem);
    transition: opacity 140ms ease, transform 140ms ease;
}

.gm-wahl-pfeil svg {
    width: 1rem;
    height: 1rem;
}

.gm-wahl-karte:hover .gm-wahl-pfeil,
.gm-wahl-karte:focus-visible .gm-wahl-pfeil {
    opacity: 1;
    transform: translateX(0);
}

/* Bricht die Liste: kein Gerät, sondern eine Aktion. Abgesetzt durch eine
   Trennlinie darüber, gestrichelt und ohne eigene Fläche. */
.gm-wahl-breit {
    margin-top: 0.9rem;
    border-style: dashed;
    border-color: var(--color-border-strong);
    background: transparent;
    position: relative;
}

.gm-wahl-breit::before {
    content: "";
    position: absolute;
    top: -0.55rem;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border);
}

.gm-wahl-breit .gm-wahl-zeichen {
    background: transparent;
    border: 1px dashed var(--color-border-strong);
}

/* Bedeutungsfarben */
.gm-wahl-karte.gm-ton-dauerlast {
    --gm-wahl-ton: var(--color-primary);
    --gm-wahl-flaeche: var(--color-primary-subtle);
}

.gm-wahl-karte.gm-ton-spitze {
    --gm-wahl-ton: var(--color-danger);
    --gm-wahl-flaeche: var(--color-danger-soft);
}

.gm-wahl-karte.gm-ton-waerme {
    --gm-wahl-ton: var(--color-warning-text);
    --gm-wahl-flaeche: var(--color-warning-soft);
}

.gm-wahl-karte.gm-ton-frei {
    --gm-wahl-ton: var(--color-text-secondary);
    --gm-wahl-flaeche: var(--color-bg-muted);
}

@media (prefers-reduced-motion: reduce) {
    .gm-wahl-karte,
    .gm-wahl-pfeil {
        transition: none;
    }
    .gm-wahl-karte:hover,
    .gm-wahl-karte:focus-visible {
        transform: none;
    }
}

/* =============================================================================
   BODY SCROLL LOCK
   ============================================================================= */
body.gm-scroll-locked {
    overflow: hidden;
}

/* ===== 46-modul-tools-viewer3d.css ===== */
/* ==========================================================================
   3D-Viewer im Tools-Modul (GLB/glTF)

   Bewusst dunkle Insel: die Bühne ist ein Studio, das Seitenpanel ein
   Instrumentenbrett. Alles ist unter .v3d gekapselt, damit nichts in die
   helle Anwendung ausblutet. Tailwind-Utilities (.hidden) stehen weiter
   oben in der Kaskade und werden hier gezielt wiederhergestellt.
   ========================================================================== */

.v3d {
    --v3d-flaeche: #171c24;
    --v3d-flaeche-hoch: #1f2630;
    --v3d-flaeche-tief: #11151c;
    --v3d-linie: #2c3542;
    --v3d-text: #e6ebf2;
    --v3d-text-leise: #93a0b1;
    --v3d-akzent: #38bdf8;
    --v3d-akzent-warm: #f97316;
    --v3d-radius: 10px;
    --v3d-schatten: 0 8px 28px rgb(0 0 0 / 0.45);

    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    color: var(--v3d-text);
    background: var(--v3d-flaeche-tief);
    font-size: 0.8125rem;
}

.v3d.hidden { display: none; }
.v3d .hidden { display: none; }
.v3d-versteckt { display: none !important; }

/* --- Bühne ---------------------------------------------------------- */

.v3d-buehne {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

#v3d-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

.v3d-beschriftungen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.v3d-messlabel {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgb(15 20 27 / 0.86);
    border: 1px solid var(--v3d-akzent-warm);
    color: #fff;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.4);
}

.v3d-masslabel {
    border-color: #fbbf24;
    color: #fde68a;
}

/* --- Kopfzeile über dem Bild ---------------------------------------- */

.v3d-hud {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    pointer-events: none;
    z-index: 3;
}

.v3d-hud-oben {
    top: 0.75rem;
    left: 4rem;
    right: 12rem;
}

.v3d-modellname {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v3d-fps {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--v3d-text-leise);
    padding: 1px 6px;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.35);
}

.v3d-fps-warnung { color: #fbbf24; }

/* --- Werkzeugleiste links ------------------------------------------- */

.v3d-rail {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    border-radius: var(--v3d-radius);
    background: rgb(23 28 36 / 0.82);
    border: 1px solid var(--v3d-linie);
    backdrop-filter: blur(8px);
    box-shadow: var(--v3d-schatten);
}

.v3d-rail-knopf {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: var(--v3d-text-leise);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease, transform 0.12s ease;
}

.v3d-rail-knopf svg {
    width: 17px;
    height: 17px;
}

.v3d-rail-knopf:hover:not(:disabled) {
    color: var(--v3d-text);
    background: rgb(255 255 255 / 0.07);
}

.v3d-rail-knopf:active:not(:disabled) { transform: scale(0.94); }

.v3d-rail-knopf:disabled {
    opacity: 0.35;
    cursor: default;
}

.v3d-rail-knopf.v3d-aktiv {
    color: #06283a;
    background: var(--v3d-akzent);
}

.v3d-rail-trenner {
    height: 1px;
    margin: 4px 6px;
    background: var(--v3d-linie);
}

/* --- Standardansichten ---------------------------------------------- */

.v3d-ansichten {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 4px;
    border-radius: var(--v3d-radius);
    background: rgb(23 28 36 / 0.82);
    border: 1px solid var(--v3d-linie);
    backdrop-filter: blur(8px);
    box-shadow: var(--v3d-schatten);
}

.v3d-ansichten button {
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--v3d-text-leise);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.v3d-ansichten button:hover {
    color: var(--v3d-text);
    background: rgb(255 255 255 / 0.07);
}

/* --- Hinweise, Meldungen, Ladeanzeige -------------------------------- */

/* Sitzt oben, weil unten die Animationsleiste liegen kann. */
.v3d-fusshinweis {
    position: absolute;
    left: 50%;
    top: 3.25rem;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 5px 8px 5px 12px;
    border-radius: 999px;
    background: rgb(23 28 36 / 0.9);
    border: 1px solid var(--v3d-linie);
    box-shadow: var(--v3d-schatten);
    font-size: 0.75rem;
}

.v3d-fusshinweis.hidden { display: none; }

.v3d-meldung {
    position: absolute;
    top: 6.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--v3d-akzent-warm);
    color: #1b0d02;
    font-weight: 600;
    font-size: 0.75rem;
}

.v3d-meldung.hidden { display: none; }

.v3d-laden {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgb(17 21 28 / 0.72);
    backdrop-filter: blur(2px);
}

.v3d-laden.hidden { display: none; }

.v3d-ladetext {
    font-variant-numeric: tabular-nums;
    color: var(--v3d-text-leise);
}

.v3d-spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgb(255 255 255 / 0.12);
    border-top-color: var(--v3d-akzent);
    animation: v3d-drehen 0.9s linear infinite;
}

@keyframes v3d-drehen {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .v3d-spinner { animation-duration: 3s; }
}

.v3d-leer {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    color: var(--v3d-text-leise);
}

.v3d-leer.hidden { display: none; }

.v3d-leer-icon {
    width: 56px;
    height: 56px;
    color: #38465a;
    margin-bottom: 0.25rem;
}

.v3d-leer-hinweis {
    font-size: 0.75rem;
    color: #6d7b8d;
    margin-bottom: 0.5rem;
}

.v3d-drop-aktiv .v3d-buehne::after {
    content: '';
    position: absolute;
    inset: 12px;
    z-index: 7;
    border: 2px dashed var(--v3d-akzent);
    border-radius: 14px;
    background: rgb(56 189 248 / 0.08);
    pointer-events: none;
}

/* --- Animationsleiste ------------------------------------------------ */

.v3d-animleiste {
    position: absolute;
    left: 4.25rem;
    right: 1rem;
    bottom: 0.75rem;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 6px 10px;
    border-radius: var(--v3d-radius);
    background: rgb(23 28 36 / 0.9);
    border: 1px solid var(--v3d-linie);
    backdrop-filter: blur(8px);
    box-shadow: var(--v3d-schatten);
}

.v3d-animleiste.hidden { display: none; }

.v3d-zeitregler { flex: 1 1 120px; min-width: 80px; }

.v3d-zeitanzeige {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--v3d-text-leise);
    white-space: nowrap;
}

/* --- Seitenpanel ----------------------------------------------------- */

.v3d-panel {
    flex: 0 0 320px;
    width: 320px;
    display: flex;
    flex-direction: column;
    background: var(--v3d-flaeche);
    border-left: 1px solid var(--v3d-linie);
    overflow: hidden;
    transition: width 0.2s ease, flex-basis 0.2s ease;
}

.v3d-panel.v3d-panel-zu {
    flex-basis: 0;
    width: 0;
    border-left-width: 0;
}

.v3d-panel-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 18px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--v3d-linie);
    border-right: 0;
    border-radius: 7px 0 0 7px;
    background: rgb(23 28 36 / 0.92);
    color: var(--v3d-text-leise);
    cursor: pointer;
}

.v3d-panel-toggle svg { width: 12px; height: 12px; }
.v3d-panel-toggle-zu svg { transform: rotate(180deg); }

.v3d-reiter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--v3d-linie);
    flex-shrink: 0;
}

.v3d-reiter button {
    padding: 9px 4px;
    border: 0;
    background: transparent;
    color: var(--v3d-text-leise);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.v3d-reiter button:hover { color: var(--v3d-text); }

.v3d-reiter button.v3d-reiter-aktiv {
    color: var(--v3d-akzent);
    border-bottom-color: var(--v3d-akzent);
}

.v3d-inhalt {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem;
}

.v3d-inhalt.hidden { display: none; }

.v3d-gruppe {
    margin-bottom: 1.1rem;
}

.v3d-gruppe h4 {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7b8798;
}

/* --- Bedienelemente im Panel ----------------------------------------- */

.v3d-zeile,
.v3d-regler,
.v3d-schalter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    color: var(--v3d-text);
}

.v3d-zeile > span:first-child,
.v3d-regler > span:first-child {
    flex: 0 0 42%;
    color: var(--v3d-text-leise);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v3d-zeile > select,
.v3d-zeile > input[type="color"] { flex: 1 1 auto; }

.v3d-regler input[type="range"] { flex: 1 1 auto; min-width: 0; }

.v3d-regler output {
    flex: 0 0 42px;
    text-align: right;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--v3d-text-leise);
}

.v3d-schalter {
    font-size: 0.75rem;
    cursor: pointer;
}

.v3d-schalter input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--v3d-akzent);
    cursor: pointer;
}

.v3d .v3d-select,
.v3d select {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--v3d-linie);
    background: var(--v3d-flaeche-hoch);
    color: var(--v3d-text);
    font-size: 0.75rem;
    max-width: 100%;
    min-width: 0;
}

.v3d-select-schmal { flex: 0 0 auto; width: auto; }

/* In der Animationsleiste darf der Clip-Name schrumpfen, damit die
   Wiederholen-Option nicht aus dem Bild wandert. */
.v3d-animleiste #v3d-anim-clip { flex: 1 1 90px; min-width: 60px; }
.v3d-animleiste .v3d-schalter { margin-bottom: 0; white-space: nowrap; }

.v3d input[type="color"] {
    width: 34px;
    height: 24px;
    padding: 2px;
    border: 1px solid var(--v3d-linie);
    border-radius: 6px;
    background: var(--v3d-flaeche-hoch);
    cursor: pointer;
}

/* Global bekommt jeder Regler width:100% (03-formulare.css). In den engen
   Leisten des Viewers muss die Breite dem Flex-Layout folgen, sonst bricht
   jede Zeile um. */
.v3d input[type="range"] {
    accent-color: var(--v3d-akzent);
    width: auto;
    min-width: 60px;
}

.v3d-suche {
    width: 100%;
    padding: 6px 9px;
    margin-bottom: 0.5rem;
    border-radius: 7px;
    border: 1px solid var(--v3d-linie);
    background: var(--v3d-flaeche-tief);
    color: var(--v3d-text);
    font-size: 0.75rem;
}

.v3d-suche::placeholder { color: #6b7787; }

.v3d-minibtn {
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid var(--v3d-linie);
    background: var(--v3d-flaeche-hoch);
    color: var(--v3d-text-leise);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.v3d-minibtn:hover {
    color: var(--v3d-text);
    border-color: #3f4b5c;
}

.v3d-rund {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
}

.v3d-schnittzeile {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.v3d-schnittzeile input[type="range"] { flex: 1 1 auto; min-width: 0; }
.v3d-schnitt-schalter { margin: 0; flex: 0 0 auto; }

/* --- Szenenbaum ------------------------------------------------------ */

.v3d-auswahlzeile {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    color: var(--v3d-text-leise);
}

.v3d-auswahlzeile b {
    flex: 1 1 auto;
    color: var(--v3d-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v3d-baum {
    font-size: 0.75rem;
    user-select: none;
}

.szb-zeile {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 2px 4px;
    border-radius: 5px;
    cursor: pointer;
}

.szb-zeile:hover { background: rgb(255 255 255 / 0.05); }

.szb-zeile.szb-aktiv {
    background: rgb(56 189 248 / 0.16);
    box-shadow: inset 2px 0 0 var(--v3d-akzent);
}

.szb-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: #6f7d90;
}

.szb-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.szb-zahl {
    font-size: 0.625rem;
    color: #6b7787;
    font-variant-numeric: tabular-nums;
}

.szb-pfeil,
.szb-auge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: #6f7d90;
    cursor: pointer;
}

.szb-auge:hover,
.szb-pfeil:hover { color: var(--v3d-text); }

.szb-pfeil-leer {
    width: 16px;
    flex-shrink: 0;
}

.szb-pfeil svg { transition: transform 0.12s ease; }
.szb-gedreht svg { transform: rotate(-90deg); }
.szb-kinder.szb-zu { display: none; }

/* --- Materialpanel --------------------------------------------------- */

.v3d-panel-kopf {
    font-size: 0.6875rem;
    color: var(--v3d-text-leise);
    margin-bottom: 0.5rem;
}

.v3d-hinweis {
    font-size: 0.75rem;
    color: var(--v3d-text-leise);
    padding: 0.5rem 0;
}

.v3d-material {
    padding: 0.6rem;
    margin-bottom: 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--v3d-linie);
    background: var(--v3d-flaeche-hoch);
}

.v3d-material-kopf {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.v3d-material-name {
    flex: 1 1 auto;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v3d-material-typ {
    font-size: 0.625rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgb(56 189 248 / 0.16);
    color: var(--v3d-akzent);
}

.v3d-material-reset {
    border: 0;
    background: transparent;
    color: var(--v3d-text-leise);
    cursor: pointer;
    padding: 2px;
}

.v3d-material-reset:hover { color: var(--v3d-text); }

.v3d-farbzeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.v3d-farbzeile > span {
    flex: 0 0 42%;
    color: var(--v3d-text-leise);
}

.v3d-schalterzeile {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
    font-size: 0.6875rem;
    color: var(--v3d-text-leise);
}

.v3d-schalterzeile label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

.v3d-texturen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.v3d-textur {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 52px;
    font-size: 0.5625rem;
    color: #6b7787;
    overflow: hidden;
}

.v3d-textur span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v3d-textur-bild {
    width: 48px;
    height: 48px;
    border-radius: 5px;
    border: 1px solid var(--v3d-linie);
}

/* --- Statistik und Tastenkürzel -------------------------------------- */

.v3d-statistik { font-size: 0.75rem; }

.v3d-stat {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 2px 0;
    color: var(--v3d-text-leise);
}

.v3d-stat b {
    color: var(--v3d-text);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.v3d-stat-trenner {
    height: 1px;
    margin: 0.4rem 0;
    background: var(--v3d-linie);
}

.v3d-tastenliste {
    display: grid;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--v3d-text-leise);
}

.v3d-tastenliste > div {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.v3d-tastenliste kbd {
    min-width: 22px;
    padding: 1px 5px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid var(--v3d-linie);
    border-bottom-width: 2px;
    background: var(--v3d-flaeche-hoch);
    color: var(--v3d-text);
    font-size: 0.625rem;
    font-family: inherit;
}

/* --- Schmale Bildschirme --------------------------------------------- */

@media (max-width: 900px) {
    .v3d { flex-direction: column; }

    .v3d-panel {
        flex: 0 0 40%;
        width: 100%;
        border-left: 0;
        border-top: 1px solid var(--v3d-linie);
    }

    .v3d-panel.v3d-panel-zu {
        flex-basis: 0;
        height: 0;
        border-top-width: 0;
    }

    .v3d-panel-toggle {
        top: auto;
        bottom: 0;
        right: 50%;
        transform: translateX(50%);
        width: 46px;
        height: 18px;
        border-radius: 7px 7px 0 0;
        border: 1px solid var(--v3d-linie);
        border-bottom: 0;
    }

    .v3d-panel-toggle svg { transform: rotate(-90deg); }
    .v3d-panel-toggle-zu svg { transform: rotate(90deg); }

    .v3d-hud-oben { right: 1rem; left: 3.75rem; }
    .v3d-ansichten { display: none; }
    .v3d-animleiste { left: 3.75rem; }
}

/* ===== 47-handbuch.css ===== */
/* ============================================================
   Handbuch
   ============================================================
   Gestalterische Richtung: Nachschlagewerk, nicht Kachelbrett.
   Ein schmales Textmaß, deutliche Größensprünge zwischen Kapitel,
   Titel und Beschreibung, Listen statt Karten. Die Trennung
   entsteht durch Linien und Weißraum, nicht durch Rahmen um alles.

   Die Klassen beginnen mit hb-, damit sie sich weder mit den
   Modulstilen noch mit Tailwind beißen.
   ============================================================ */

.hb-seite {
    /* Textmaß bewusst schmaler als der Seitenrahmen: eine Zeile bleibt
       lesbar, statt über die volle Bildschirmbreite zu laufen. */
    max-width: 62rem;
    margin: 0 auto;
    padding-block: 1.25rem 3rem;
}

/* ---------- Kopf ---------- */

.hb-kopf {
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--color-border);
}

.hb-kopf-augenbraue {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 0.4rem;
}

.hb-kopf-titel {
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin: 0 0 0.6rem;
}

.hb-kopf-text {
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 46rem;
    margin: 0 0 1.5rem;
}

/* ---------- Suchfeld ---------- */

.hb-suche {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--form-bg);
    border: 1px solid var(--form-border);
    border-radius: 0.7rem;
    padding: 0.15rem 0.9rem;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.hb-suche:focus-within {
    border-color: var(--form-border-focus);
    box-shadow: 0 0 0 3px var(--form-ring);
}

.hb-suche-ikon {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.hb-suche-feld {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0.7rem 0;
    font-size: 0.98rem;
    color: var(--form-text);
    outline: none;
}

.hb-suche-feld::placeholder { color: var(--form-placeholder); }

/* Das Kreuz, das Browser in type=search setzen, doppelt die Escape-Taste
   und sitzt optisch schief im Feld. */
.hb-suche-feld::-webkit-search-cancel-button { display: none; }

.hb-suche-zahl {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.hb-suche-modal { margin-bottom: 1rem; }

/* ---------- Verzeichnis ---------- */

.hb-verzeichnis {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.hb-kategorie-kopf {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.hb-kategorie-titel {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
}

.hb-kategorie-zahl {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-bg-muted);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.hb-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}

.hb-eintrag { border-bottom: 1px solid var(--color-border); }

.hb-eintrag-link {
    display: block;
    padding: 0.85rem 0.9rem 0.85rem 0.75rem;
    text-decoration: none;
    /* Nur Farbe und transform bewegen sich - beides läuft im Kompositor. */
    transition: background-color 130ms ease, transform 130ms ease;
}

.hb-eintrag-link:hover,
.hb-eintrag-link:focus-visible {
    background: var(--color-primary-subtle);
    transform: translateX(3px);
    outline: none;
}

.hb-eintrag-titel {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.15rem;
}

.hb-eintrag-text {
    display: block;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.hb-leer,
.hb-fehler {
    padding: 2rem 0;
    text-align: center;
    color: var(--color-text-muted);
}

/* ---------- Trefferliste ---------- */

.hb-treffer,
.hb-such-treffer {
    display: flex;
    flex-direction: column;
}

.hb-such-eintrag {
    display: block;
    padding: 0.8rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 130ms ease;
}

.hb-such-eintrag:hover { background: var(--color-primary-subtle); }

.hb-such-titel {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--color-text);
    margin-right: 0.5rem;
}

.hb-such-kategorie {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.hb-such-text {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.hb-such-fuss {
    display: block;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.hb-such-fuss:hover { text-decoration: underline; }

/* ---------- Artikelseite ---------- */

.hb-artikel-seite {
    max-width: 68rem;
    margin: 0 auto;
    padding-block: 1rem 3rem;
}

.hb-pfad {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}

.hb-pfad-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.hb-pfad-link:hover { text-decoration: underline; }
.hb-pfad-ikon { width: 0.95rem; height: 0.95rem; }
.hb-pfad-trenner { opacity: 0.5; }

.hb-artikel-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 2.5rem;
    align-items: start;
}

.hb-artikel-titel {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}

.hb-artikel-vorspann {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    /* Der Strich links macht den Vorspann zum Vorspann, ohne einen Kasten
       zu bauen - der würde mit den Hinweisen im Text konkurrieren. */
    border-left: 3px solid var(--color-primary);
    padding-left: 0.9rem;
    margin: 0 0 1.75rem;
}

/* ---------- Artikeltext ---------- */

.hb-inhalt {
    font-size: 0.98rem;
    line-height: 1.68;
    color: var(--color-text);
}

.hb-inhalt > *:first-child { margin-top: 0; }

.hb-inhalt h2 {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 2.1rem 0 0.7rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--color-border);
}

.hb-inhalt h3 {
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 1.5rem 0 0.45rem;
}

.hb-inhalt h4 {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    margin: 1.2rem 0 0.35rem;
}

.hb-inhalt p { margin: 0 0 0.95rem; }

.hb-inhalt ul,
.hb-inhalt ol {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.hb-inhalt li { margin-bottom: 0.35rem; }
.hb-inhalt li > ul,
.hb-inhalt li > ol { margin-top: 0.35rem; }

.hb-inhalt a,
.hb-verweis {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.hb-inhalt a:hover,
.hb-verweis:hover { color: var(--color-primary-hover); }

.hb-inhalt strong { font-weight: 650; color: var(--color-text); }

.hb-inhalt code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.86em;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: 0.3rem;
    padding: 0.08em 0.35em;
}

.hb-inhalt pre {
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    overflow-x: auto;
    margin: 0 0 1rem;
}

.hb-inhalt pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.85rem;
}

.hb-inhalt blockquote {
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    background: var(--color-primary-subtle);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 0.4rem 0.4rem 0;
    color: var(--color-text-secondary);
}

.hb-inhalt blockquote p:last-child { margin-bottom: 0; }

.hb-inhalt table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.15rem;
    font-size: 0.9rem;
}

.hb-inhalt th,
.hb-inhalt td {
    border: 1px solid var(--color-border);
    padding: 0.45rem 0.65rem;
    text-align: left;
    vertical-align: top;
}

.hb-inhalt th {
    background: var(--color-bg-muted);
    font-weight: 650;
}

.hb-inhalt hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 1.75rem 0;
}

.hb-inhalt img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
}

/* ---------- Randspalte ---------- */

.hb-rand {
    position: sticky;
    top: 7.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    font-size: 0.85rem;
}

.hb-rand-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.hb-rand-liste {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hb-rand-pille {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.45rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 130ms ease, color 130ms ease;
}

.hb-rand-pille:hover {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

.hb-rand-ikon {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    opacity: 0.7;
}

.hb-rand-schlagworte {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.hb-schlagwort {
    font-size: 0.74rem;
    color: var(--color-text-muted);
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
}

.hb-rand-fuss {
    font-size: 0.74rem;
    color: var(--color-text-muted);
    padding-top: 0.8rem;
    border-top: 1px solid var(--color-border);
}

/* ---------- Modal ---------- */

.hb-modal-leiste {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.hb-modal-teilung {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13rem;
    gap: 1.75rem;
    align-items: start;
}

.hb-modal-inhalt { min-width: 0; }

.hb-modal-rand {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    font-size: 0.85rem;
}

.hb-laedt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.5rem 0;
    color: var(--color-text-muted);
}

/* ---------- Schmale Schirme ---------- */

@media (max-width: 900px) {
    .hb-artikel-raster,
    .hb-modal-teilung {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }

    .hb-rand,
    .hb-modal-rand {
        position: static;
        border-top: 1px solid var(--color-border);
        padding-top: 1.25rem;
    }
}

@media (max-width: 640px) {
    .hb-seite { padding-block: 0.75rem 2rem; }
    .hb-kopf { padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
    .hb-verzeichnis { gap: 1.75rem; }
    .hb-modal-leiste { flex-wrap: wrap; }
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    .hb-eintrag-link,
    .hb-such-eintrag,
    .hb-rand-pille,
    .hb-suche {
        transition: none;
    }

    .hb-eintrag-link:hover,
    .hb-eintrag-link:focus-visible {
        transform: none;
    }
}

/* ---------- Druck ---------- */

@media print {
    .hb-pfad,
    .hb-rand,
    .hb-suche { display: none; }

    .hb-artikel-raster { grid-template-columns: 1fr; }
    .hb-inhalt { font-size: 11pt; }
}

/* ===== 50-kein-querscrollen.css ===== */
/* =============================================================================
   Kein seitliches Scrollen am großen Bildschirm

   Ab 900 Pixeln Breite soll alles auf eine Seite passen. Was nicht in die
   Breite passt, bricht um; ein Querbalken ist dort immer ein Fehler, weil der
   Teil rechts davon schlicht übersehen wird.

   Warum eine eigene Datei am Ende der Kaskade: Die Behälter, die quer
   scrollen, gehören verschiedenen Kapiteln (PowerTable in 33, das
   Wiedergabe-Modul in 39, die Sammlung der Umbruchpunkte in 16). Eine Regel
   dort hinein würde von den späteren Kapiteln wieder überschrieben. Das
   Thema selbst ist ein Querschnitt und braucht deshalb die letzte Position.

   Bewusst NICHT betroffen, weil Umbrechen den Inhalt dort falsch macht oder
   unlesbar: Formeln und Codeblöcke (15-formeln.css, 47-handbuch.css), die
   3D-Ansicht (46), Diagramme mit fester Zeichenfläche und die Inhalte in
   Modalfenstern (43), wo Kalender und Karten eine feste Breite brauchen.

   Am Handy bleibt das seitliche Schieben, wo es steht: Dort ist es der
   einzige Weg, eine breite Tabelle überhaupt zu lesen.
   ============================================================================= */

@media (min-width: 900px) {
    /* Tabellen: der Behälter schiebt nicht mehr, die Zellen brechen um
       (white-space und overflow-wrap stehen in 33-tabellen.css). */
    .pt-scroll-wrap,
    .table-container,
    .ga-table-wrapper {
        overflow-x: hidden;
    }

    /* Auch klassische Tabellen ohne PowerTable bleiben in ihrem Behälter. */
    .table-container > table,
    .ga-table-wrapper > table {
        width: 100%;
        min-width: 0;
    }

    .table-container th,
    .table-container td {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* ===== 51-modul-benutzerverwaltung.css ===== */
/* =============================================================================
   Modul: Benutzerverwaltung - Organisationen und Mitglieder
   =============================================================================
   Beide Listen sind PowerTables (33-tabellen.css), die Reiter kommen aus
   10-reiter.css, Karten und Abzeichen aus den Grundstilen. Hier steht nur,
   was es sonst nirgends gibt: die Aufteilung in zwei Spalten, die Übersicht
   rechts und die Mitgliederzeilen darin.
   ============================================================================= */

/* --- Zwei Spalten: Liste und Übersicht ------------------------------------- */

.organisation-spalten {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Erst wenn die Liste UND die Übersicht nebeneinander lesbar sind. Darunter
   stehen sie untereinander, die Liste zuerst. */
@media (min-width: 1280px) {
    .organisation-spalten {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        align-items: start;
    }
}

.organisation-uebersicht {
    max-height: calc(100vh - 230px);
    overflow-y: auto;
}

.organisation-uebersicht__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.organisation-uebersicht__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.organisation-uebersicht__module {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.organisation-karte__leer {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.organisation-kopf h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text);
}

.organisation-kopf p {
    margin: 0.15rem 0 1rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* --- Modulauswahl im Formular ---------------------------------------------- */

.org-modulwahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.35rem 1rem;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}

.org-modulwahl__eintrag,
.org-admin-schalter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.verwaltung-hinweis {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* --- Mitglieder ------------------------------------------------------------ */

.organisation-mitglieder {
    margin-top: 0.75rem;
}

.mitglied-liste__kopf {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.mitglied-karte {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.5rem;
}

.mitglied-karte__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.mitglied-karte__zeile {
    margin: 0.1rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.mitglied-karte__aktionen {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mitglied-karte__module {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--color-border);
}

.mitglied-modul {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.25rem 0;
    font-size: 0.85rem;
}

.mitglied-modul__name {
    flex: 1 1 auto;
    color: var(--color-text-secondary);
}

.mitglied-modul__schalter {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-text-muted);
    cursor: pointer;
}

/* ===== 52-modul-dateiablage.css ===== */
/* =============================================================================
   Modul: Dateiablage - Kachelansicht und Ansichtsumschalter

   Leitbild ist ein Leuchttisch: Bilder liegen als Abzüge auf einer hellen
   Fläche, Ordner sind Mappen mit Reiter. Die Kachelgröße steuert allein
   --kachel-breite, alle anderen Maße leiten sich davon ab.
   ============================================================================= */

.da-ansicht-schalter {
    --schalter-höhe: var(--btn-höhe-xs);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.da-ansicht-gruppe {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-muted);
}

.da-ansicht-gruppe button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--schalter-höhe);
    height: calc(var(--schalter-höhe) - 6px);
    padding: 0 0.375rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background-color var(--transition), color var(--transition);
}

.da-ansicht-gruppe button:hover { color: var(--color-text); }

.da-ansicht-gruppe button[aria-pressed="true"] {
    background: var(--color-bg-white);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.da-ansicht-gruppe button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* --- Raster ------------------------------------------------------------ */

.da-kacheln {
    --kachel-breite: 196px;
    --kachel-abstand: 1rem;
    --kachel-bild-verhältnis: 4 / 3;
    --kachel-auswahl: var(--color-primary);
    --kachel-bewegung: 180ms cubic-bezier(0.16, 1, 0.3, 1);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--kachel-breite), 1fr));
    gap: var(--kachel-abstand);
    padding: 1.25rem 1rem 2rem;
    background:
        radial-gradient(circle at 1px 1px, var(--color-border) 1px, transparent 0) 0 0 / 22px 22px,
        var(--color-bg-muted);
    min-height: 12rem;
}

.da-kacheln[data-stufe="s"] { --kachel-breite: 128px; --kachel-abstand: 0.625rem; }
.da-kacheln[data-stufe="l"] { --kachel-breite: 300px; --kachel-abstand: 1.375rem; }

.da-kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--radius-lg);
    background: var(--color-bg-white);
    box-shadow: 0 1px 0 var(--color-border), var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--kachel-bewegung), box-shadow var(--kachel-bewegung);
    outline: none;
}

.da-kachel:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 var(--color-border), var(--shadow-md);
}

.da-kachel:focus-visible { box-shadow: 0 0 0 2px var(--kachel-auswahl), var(--shadow-md); }

.da-kachel[aria-selected="true"] {
    box-shadow: 0 0 0 2px var(--kachel-auswahl), var(--shadow-md);
}

.da-kachel[aria-disabled="true"] { cursor: default; }

/* Bildfläche: feste Proportion, damit nichts springt, wenn Bilder nachladen. */
.da-kachel-bild {
    position: relative;
    aspect-ratio: var(--kachel-bild-verhältnis);
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.da-kachel-bild > img.da-kachel-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 240ms ease;
}

.da-kachel-bild > img.da-kachel-foto.ist-geladen { opacity: 1; }

.da-kachel-symbol {
    width: 38%;
    height: 38%;
    max-width: 5rem;
    max-height: 5rem;
}

/* Dateityp als Etikett in der Ecke, wenn es kein Bild gibt. */
.da-kachel-typ {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    padding: 0.05rem 0.375rem;
    border-radius: var(--radius-sm);
    background: var(--color-bg-white);
    color: var(--color-text-secondary);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
}

/* Ordner als Mappe: Reiter oben links, Fläche in Sonnengelb. */
.da-kachel.ist-ordner .da-kachel-bild {
    background: transparent;
    overflow: visible;
}

.da-mappe {
    position: relative;
    width: 78%;
    height: 66%;
    margin-top: 8%;
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    background: linear-gradient(180deg, var(--sonne-300), var(--sonne-400));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: transform var(--kachel-bewegung);
    transform-origin: 50% 100%;
}

.da-mappe::before {
    content: "";
    position: absolute;
    left: 0;
    top: -12%;
    width: 42%;
    height: 14%;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--sonne-400);
}

.da-kachel.ist-ordner:hover .da-mappe { transform: scaleY(1.04); }

.da-mappe-anzahl {
    position: absolute;
    right: 0.5rem;
    bottom: 0.375rem;
    color: var(--sonne-900);
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.da-mappe-schloss {
    position: absolute;
    left: 0.5rem;
    bottom: 0.375rem;
    width: 0.875rem;
    height: 0.875rem;
    color: var(--sonne-900);
    opacity: 0.7;
}

/* --- Video ------------------------------------------------------------- */

.da-kachel-dauer {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    padding: 0.05rem 0.375rem;
    border-radius: var(--radius-sm);
    background: rgba(13, 21, 29, 0.78);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.da-kachel-abspielen {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.625rem;
    border-radius: 50%;
    background: rgba(13, 21, 29, 0.55);
    color: #fff;
    opacity: 0.9;
    transition: opacity var(--kachel-bewegung), transform var(--kachel-bewegung);
}

.da-kachel.zeigt-szenen .da-kachel-abspielen { opacity: 0; transform: scale(0.8); }

/* Szenenstreifen: ein Bild mit allen Szenen nebeneinander, verschoben über
   transform. Die Leiste darunter zeigt, wo im Film man gerade ist. */
.da-kachel-szenen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 160ms ease;
    pointer-events: none;
}

.da-kachel.zeigt-szenen .da-kachel-szenen { opacity: 1; }

.da-kachel-szenen img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    max-width: none;
    transition: transform 0ms;
}

.da-kachel-fortschritt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
}

.da-kachel-fortschritt span {
    position: absolute;
    inset: 0;
    background: var(--sonne-400);
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition: transform 300ms ease;
}

/* --- Beschriftung -------------------------------------------------------- */

.da-kachel-text {
    padding: 0.5rem 0.625rem 0.5625rem;
    min-width: 0;
}

.da-kachel-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    word-break: break-word;
}

.da-kachel.ist-ordner .da-kachel-name { font-weight: 700; }

.da-kachel-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.2rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
}

.da-kachel-meta svg { width: 0.75rem; height: 0.75rem; flex-shrink: 0; color: var(--color-primary); }

.da-kacheln[data-stufe="s"] .da-kachel-meta { display: none; }
.da-kacheln[data-stufe="s"] .da-kachel-name { -webkit-line-clamp: 1; font-size: 0.75rem; }
.da-kacheln[data-stufe="s"] .da-kachel-text { padding: 0.375rem 0.5rem; }
.da-kacheln[data-stufe="l"] .da-kachel-name { font-size: 0.9375rem; }

/* --- Auswahl ----------------------------------------------------------- */

.da-kachel-wahl {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(13, 21, 29, 0.28);
    color: #fff;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--kachel-bewegung), transform var(--kachel-bewegung), background-color var(--kachel-bewegung);
}

.da-kachel-wahl svg { width: 0.75rem; height: 0.75rem; opacity: 0; }

.da-kachel:hover .da-kachel-wahl,
.da-kachel:focus-visible .da-kachel-wahl,
.da-kacheln.hat-auswahl .da-kachel-wahl { opacity: 1; transform: scale(1); }

.da-kachel[aria-selected="true"] .da-kachel-wahl {
    background: var(--kachel-auswahl);
    border-color: var(--kachel-auswahl);
}

.da-kachel[aria-selected="true"] .da-kachel-wahl svg { opacity: 1; }
.da-kachel[aria-disabled="true"] .da-kachel-wahl { display: none; }

.da-kachel.ist-ordner .da-kachel-wahl {
    border-color: var(--sonne-600);
    background: rgba(255, 255, 255, 0.6);
}

/* Schmale Bildschirme: Werkzeugleiste darf umbrechen, sonst liegt der
   Ansichtsumschalter außerhalb. Kacheln schrumpfen, damit zwei nebeneinander
   passen. */
@media (max-width: 640px) {
    #da-toolbar,
    #lw-toolbar { flex-wrap: wrap; row-gap: 0.375rem; }
    .da-kacheln { --kachel-breite: 140px; --kachel-abstand: 0.625rem; padding: 0.75rem 0.625rem 1.5rem; }
    .da-kacheln[data-stufe="s"] { --kachel-breite: 96px; --kachel-abstand: 0.5rem; }
    .da-kacheln[data-stufe="l"] { --kachel-breite: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .da-kachel,
    .da-kachel:hover { transform: none; }
    .da-mappe,
    .da-kachel.ist-ordner:hover .da-mappe { transform: none; }
}

/* ===== 55-farbkarten.css ===== */
/* =============================================================================
   55. FARBKARTEN FÜR DIAGRAMME
   Die Fläche, auf der ein Diagramm sitzt. Gesetzt wird data-farbkarte von
   Diagramm.farbkarte() in global-diagramme.js, dort stehen auch die Farben
   der Zeichnung. Die Basis-Tripel dreht der Dunkelmodus nicht um, die Karten
   sehen deshalb in beiden Themen gleich aus.
   ============================================================================= */
[data-farbkarte] {
    --farbkarte-fläche: rgb(var(--basis-petrol-700-rgb));
    --farbkarte-tinte: rgb(255 255 255);
    --farbkarte-leise: rgb(255 255 255 / 0.75);
    --farbkarte-linie: rgb(255 255 255 / 0.2);
    --farbkarte-rundung: 1rem;
    background: var(--farbkarte-fläche);
    color: var(--farbkarte-tinte);
    border: 0;
    border-radius: var(--farbkarte-rundung);
    padding: 1rem;
}

[data-farbkarte="sonne"] {
    --farbkarte-fläche: rgb(var(--basis-sonne-500-rgb));
    --farbkarte-tinte: rgb(var(--basis-sonne-950-rgb));
    --farbkarte-leise: rgb(var(--basis-sonne-950-rgb) / 0.75);
    --farbkarte-linie: rgb(var(--basis-sonne-950-rgb) / 0.18);
}

[data-farbkarte="nacht"] {
    --farbkarte-fläche: rgb(var(--basis-schnee-900-rgb));
    --farbkarte-leise: rgb(var(--basis-schnee-400-rgb));
    --farbkarte-linie: rgb(255 255 255 / 0.1);
}

/* Im Dunkelmodus sind Seite und Karten selbst nachtfarben, die Nachtkarte
   verschwände darin. Sie wird dort zur tiefen Petrolfläche und bleibt so
   als Farbkarte erkennbar. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [data-farbkarte="nacht"] {
        --farbkarte-fläche: rgb(var(--basis-petrol-950-rgb));
        --farbkarte-linie: rgb(255 255 255 / 0.12);
    }
}

:root[data-theme="dark"] [data-farbkarte="nacht"] {
    --farbkarte-fläche: rgb(var(--basis-petrol-950-rgb));
    --farbkarte-linie: rgb(255 255 255 / 0.12);
}

/* Rahmen, den global-diagramme.js selbst um eine Zeichenfläche legt. */
.farbkarte-rahmen {
    position: relative;
}

/* Der Abstand liegt in der Zeichenfläche selbst, siehe polster in global-diagramme.js. */
[data-farbkarte][data-farbkarte-polster="innen"] {
    padding: 0;
}

/* Trägt die ganze Karte die Farbe, stehen Überschrift und Unterzeile mit darauf. */
[data-farbkarte] :is(h1, h2, h3, h4) {
    color: var(--farbkarte-tinte);
    border-color: var(--farbkarte-linie);
}

[data-farbkarte] .farbkarte-leise {
    color: var(--farbkarte-leise);
}