/* =============================================================================
   ENERGIE SCHNEE - 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 */
}

/* ---------------------------------------------------------------------------
   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;
}

.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;
}

/* 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);
}

/* Control Buttons (Tesla-Modul).
   Achtung: @apply wirkt hier nicht (main.css läuft nicht durch den
   Tailwind-Build) - deshalb echte Deklarationen mit Tokens. Das frühere
   bg-sky-500 war Alt-Blau und ist auf die Primärfarbe umgestellt. */
.control-group {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background-color: var(--color-bg-white);
}

.control-group h4 {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.control-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.control-item button,
.control-btn {
    padding: 0.375rem 1rem;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 0.375rem;
    font-weight: 600;
    transition: background-color 0.15s;
}

.control-item button:hover,
.control-btn:hover {
    background-color: var(--color-primary-hover);
}


/* ---------------------------------------------------------------------------
   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-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. */
@media (max-width: 1279px) {
    .k-txt { display: none; }
}

/* ===== 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);
}

/* ===== 25-projektkarte.css ===== */
/* =============================================================================
   PROJEKTKARTE - Kopf, Schrittkette, Kennzahlen
   =============================================================================
   Global gehalten: die Schrittkette (.stufen) und die Kennzahlenzeile
   (.kennzahlen) taugen überall, wo ein Ablauf oder Messwerte zu zeigen sind -
   nicht nur auf der Startseite. Farben ausschließlich über die Tokens.
   ========================================================================== */

.p-karte {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.15rem;
    cursor: pointer;
    position: relative;
    min-width: 0;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}

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

.p-kopf {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
    min-width: 0;
}

.p-name {
    font-size: 1rem;
    font-weight: 650;
    color: var(--color-text);
    margin: 0;
    /* flex+min-width:0: sonst schiebt ein langer Name die Marken aus der Karte. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    letter-spacing: -0.01em;
}

.p-ort {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0 0 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Typ-Marke: sagt, was das Projekt IST. Die alte Karte nahm überall eine
   PV-Anlage an - ein Steuerprojekt sah aus wie eine halbfertige Anlage. */
.typ {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

.typ-pv     { background: var(--color-primary-soft); color: var(--color-primary-text); }
.typ-gross  { background: var(--color-warning-soft);  color: var(--color-warning-text); }
.typ-steuer { background: var(--color-success-soft);  color: var(--color-success-text); }
.typ-leer   { background: var(--color-bg);            color: var(--color-text-muted); }

.geteilt {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.06rem 0.35rem;
    flex-shrink: 0;
}

/* Schrittkette: EINE Anzeige statt Fortschrittsbalken und Icon-Reihe doppelt.
   Jede Stufe ist eine gleich breite Rasterspalte; die Verbindungslinie liegt
   absolut dahinter - so kann kein Punkt aus der Karte geschoben werden. */
.stufen {
    display: grid;
    gap: 0;
    margin-bottom: 0.8rem;
}

.stufe {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 0;
    text-align: center;
    /* Die Stufe ist ein Schalter: sie führt in ihr Modul. Ohne eigene
       Schalter-Optik sieht man ihr das nicht an. */
    background: none;
    border: 0;
    padding: 0.2rem 0;
    font-family: inherit;
    cursor: pointer;
}

/* Beim Überfahren: der Punkt tritt hervor, die Beschriftung wird kräftiger.
   Nur der überfahrene Punkt reagiert, nicht die ganze Kette - sonst wäre
   nicht zu sehen, welchen Schritt man trifft. */
.stufe:hover .punkt {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
    transform: scale(1.12);
    box-shadow: 0 0 0 3px var(--form-ring);
}

.stufe:hover .punkt.fertig {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-bg-white);
}

.stufe:hover .stufe-name {
    color: var(--color-primary-text);
    font-weight: 600;
}

/* Tastaturbedienung: derselbe Hinweis wie beim Überfahren. */
.stufe:focus-visible {
    outline: none;
}

.stufe:focus-visible .punkt {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--form-ring);
}

.stufe-linie {
    position: absolute;
    top: 0.78rem;
    left: 50%;
    width: 100%;
    height: 1.5px;
    background: var(--color-border);
}

.stufe:last-child .stufe-linie { display: none; }
.stufe-linie.fertig { background: var(--color-primary); }

.punkt {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 9999px;
    flex-shrink: 0;
    position: relative;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-white);
    color: var(--color-text-muted);
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s, background 0.12s, color 0.12s;
}

.punkt.fertig {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg-white);
}

/* Der nächste offene Schritt: gestrichelt, damit er als Aufforderung liest. */
.punkt.aktuell {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
    border-style: dashed;
}

.stufe-name {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: 0.3rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.12s;
}

.stufe-name.fertig {
    color: var(--color-text-secondary);
    font-weight: 550;
}

/* Kennzahlen: die eigentliche Substanz der Karte. */
.kennzahlen {
    display: flex;
    gap: 1rem;
    padding: 0.6rem 0;
    margin-bottom: 0.65rem;
    min-width: 0;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.kz-leer {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-style: italic;
}

.kz-wert {
    font-size: 1.05rem;
    font-weight: 680;
    color: var(--color-text);
    letter-spacing: -0.02em;
    white-space: nowrap;
    /* Ziffern in gleicher Breite - sonst tanzen die Zahlen zwischen Karten. */
    font-variant-numeric: tabular-nums;
}

.kz-wert .einheit { font-size: 0.72rem; font-weight: 600; }

/* Zubau ist das noch zu Hebende - Sonne. Bestand liegt schon da - ruhig. */
.kz-wert.energie { color: var(--color-warning-hover); }
.kz-wert.bestand { color: var(--color-text-secondary); }

.kz-name {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kz-n {
    display: block;
    font-size: 0.65rem;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.8;
}

.kz-marke {
    margin-left: auto;
    align-self: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.4rem;
    white-space: nowrap;
}

.p-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.p-datum { font-size: 0.73rem; color: var(--color-text-muted); }

.p-weiter {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary-text);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0;
    white-space: nowrap;
}

.p-karte:hover .p-weiter { text-decoration: underline; }

.projekt-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
    gap: 0.9rem;
}

/* ===== 26-projekt-auswahl.css ===== */
/* =============================================================================
   PROJEKT-AUSWAHL - womit soll das Projekt geöffnet werden?
   =============================================================================
   Ein Projekt trägt oft mehrere Analysen. Diese Liste zeigt, welche da sind
   und welcher Schritt als nächster ansteht, statt zu raten.
   ========================================================================== */

.pa-liste {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pa-zeile {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    width: 100%;
    text-align: left;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.12s, background 0.12s;
}

.pa-zeile:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
}

.pa-icon {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 9999px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--color-border);
    color: var(--color-text-placeholder);
}

/* Gespeichert = gefüllt, wie in der Schrittkette der Karte. Dieselbe
   Bildsprache, damit man nicht zweimal lernen muss. */
.pa-icon.fertig {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg-white);
}

.pa-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pa-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}

.pa-info {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.pa-marke {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary-text);
    background: var(--color-primary-soft);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.4rem;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ===== 27-modul-dachfläche.css ===== */
/* =============================================================================
   13. MODUL: DACHFLÄCHE
   ============================================================================= */

/* Global Actions Container */
#global-actions-container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Rechts endet die Zeichenleiste vor der Kartensteuerung. Ohne die
       Grenze wuchs sie bis unter den Kasten, und der letzte Knopf sowie die
       Beschriftung "Karte" lagen übereinander. */
    max-width: calc(100% - 15.5rem);
}
/* Reicht der Platz nicht für alle Knöpfe, rücken sie in die nächste Zeile,
   statt sich unter die Kartensteuerung zu schieben. */
#global-actions-container > div {
    flex-wrap: wrap;
}

/* Edge Select Icon */
.edge-select-icon {
    background-color: var(--color-primary);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    width: 12px !important;
    height: 12px !important;
    margin-left: -6px !important;
    margin-top: -6px !important;
}

/* =============================================================================
   KARTENSTEUERUNG (Kartenwahl + Modul-Ansicht, rechts oben über der Karte)

   Ein Kasten, EINE Kontur. Vorher waren es zwei getrennte weiße Kästen, jeder
   mit Leaflets 2px-Rahmen, einem eigenen Rand und einem nochmals gerahmten
   Auswahlfeld darin - drei Umrandungen auf zwei Zentimetern. Hier trägt nur
   der Kasten eine Kontur (Schatten statt Rand), die Felder darin sind
   randlos und heben sich nur beim Zeigen ab.
   ============================================================================= */
.df-kartensteuerung {
    min-width: 11rem;
    /* Obergrenze, damit die Steuerung nicht mit dem Text der Kartennamen
       mitwächst und der Suchleiste den Platz nimmt. Lange Namen kürzt das
       Auswahlfeld selbst mit Auslassungspunkten. */
    max-width: 14rem;
    border-radius: var(--radius-lg);
    /* Grundfläche über --weiss-rgb und nicht als festes Weiß: Der Dunkelmodus
       dreht genau dieses Tripel auf schnee-900. Ein hart geschriebenes Weiß
       blieb dort hell stehen, und die helle Schrift darauf war nicht mehr zu
       lesen. Der Teiler hält die Karte darunter leicht durchscheinend. */
    background: rgb(var(--weiss-rgb) / 0.94);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    font-size: 0.8125rem;
    color: var(--color-text);
}

/* Die Adresssuche sitzt mittig über der Karte und ist 320px breit. Sobald die
   Karte schmal wird (aufgeklappte Seitenleiste), schob sie sich unter die
   Kartensteuerung und verdeckte deren Beschriftung. Der Abzug hält beidseits
   die Ecken frei - die Suche wird schmaler statt zu überlappen. Nur ab der
   Schreibtischbreite: darunter blendet die Mobile-Regel die Steuerung aus
   und die Suche liegt hinter dem Lupenknopf. */
@media (min-width: 1024px) {
    #dachplaner-container .leaflet-geosearch-bar {
        /* Die Suche ist mittig; damit ihr rechter Rand vor der 14rem breiten
           Steuerung endet, muss beidseits deren Breite plus Abstand frei
           bleiben - daher der doppelte Abzug. */
        max-width: calc(100% - 29rem);
    }
}

/* Eine Bedienzeile: Beschriftung links, Feld rechts. */
.df-ks-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
}
.df-ks-zeile-getrennt {
    border-top: 1px solid var(--color-border);
}

/* Die Beschriftung ordnet ein, sie konkurriert nicht mit dem Wert: klein,
   gesperrt, zurückgenommen. Der gewählte Wert daneben ist das Laute. */
.df-ks-titel {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Randloses Feld im Kasten - der Kasten ist bereits die Umrandung.
   Der Selektor greift den Ersatz aus global-select.js über den Elternkasten
   und nicht über eine eigene Klasse: global-select.js verschiebt die Klassen
   des Originals auf den Wrapper, eine Klasse am Trigger käme also nie an. */
.df-kartensteuerung select,
.df-kartensteuerung .cs-trigger {
    border: 1px solid transparent;
    background-color: transparent;
    box-shadow: none;
    min-height: 1.75rem;
    padding: 0 1.5rem 0 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: right;
    cursor: pointer;
}
.df-kartensteuerung select:hover,
.df-kartensteuerung .cs-trigger:hover {
    border-color: var(--color-border);
    background-color: var(--color-bg);
}
.df-kartensteuerung select:focus-visible,
.df-kartensteuerung .cs-trigger:focus,
.df-kartensteuerung .cs-open .cs-trigger {
    border-color: var(--color-primary);
    background-color: var(--color-bg-white);
    box-shadow: none;
    outline: none;
}

/* Zeigt im Automatik-Modus, welche Karte gerade greift. */
.df-ks-info {
    padding: 0 0.625rem 0.5rem;
    font-size: 0.6875rem;
    text-align: right;
    color: var(--color-text-muted);
}

/* Liste der Karten im manuellen Modus. */
.df-ks-liste {
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.25rem;
    border-top: 1px solid var(--color-border);
}
.df-ks-eintrag {
    display: block;
    width: 100%;
    padding: 0.3125rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    text-align: left;
    color: var(--color-text);
    transition: background-color var(--transition), color var(--transition);
}
.df-ks-eintrag:hover {
    background-color: var(--color-primary-soft);
}
.df-ks-aktiv {
    background-color: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-weight: 600;
}

/* PV Module Style */
.pv-module {
    fill-color: #28323c;
    fill-opacity: 0.8;
    color: #a5f3fc;
    weight: 1;
}

/* Area Cards */
.area-card {
    border: 2px solid var(--color-border);
    border-radius: 0.75rem;
    background-color: var(--color-bg-muted);
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.area-card.active {
    border-color: var(--color-primary);
    background-color: var(--color-bg-white);
}

.area-card.collapsed .arrow-icon {
    transform: rotate(0deg);
}

.area-card.expanded .arrow-icon {
    transform: rotate(90deg);
}

.area-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    cursor: pointer;
    width: 100%;
}

.area-summary:hover {
    background: var(--color-bg);
}

.area-summary h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.area-card.active .area-summary {
    background: var(--color-primary-subtle);
}

.area-content-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.area-content-wrapper .area-content {
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid var(--color-border);
}

.area-content {
    padding: 1rem;
}

.area-name-input {
    font-size: 1rem;
    font-weight: 600;
    border: none;
    outline: none;
    padding: 0.25rem;
    border-radius: 0.25rem;
    flex-grow: 1;
}

.area-name-input:focus {
    background: var(--form-bg);
    box-shadow: 0 0 0 2px rgb(var(--petrol-600-rgb) / 0.2);
}

.area-mode-indicator {
    font-size: 1.25rem;
    margin-right: 0.5rem;
}

/* Delete Area Button */
.delete-area-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: background 0.2s;
}

.delete-area-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Alle Stepper-Buttons (+/-) in Area Cards: Basis-Reset */
.area-card .adjust-btn {
    padding: 0;
    line-height: 1;
    border-radius: 0.25rem;
    flex-shrink: 0;
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg-muted);
    color: var(--color-text-secondary);
    cursor: pointer;
}
.area-card .adjust-btn:hover {
    background: var(--color-border);
}

/* Kleine Stepper in den Grid-Settings (Rand, Abstand, Masse etc.) */
.adjustable-setting .adjust-btn {
    min-width: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    font-size: 0.75rem;
}

/* Pitch-Stepper: etwas grösser (eigene Zeile, nicht im Grid) */
.area-card .adjust-btn.w-8 {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.75rem;
    font-size: 0.875rem;
}

/* Inputs neben Stepper-Buttons: feste Mindestbreite, füllen verfügbaren Platz */
.adjustable-setting input {
    min-width: 2.5rem;
    flex: 1;
    margin: 0 2px;
}

/* Abstand zwischen Label und Stepper-Zeile reduzieren */
.adjustable-setting > .flex {
    margin-top: 0.125rem;
    gap: 2px;
}
.adjustable-setting label {
    margin-bottom: 0;
}

/* Grids in Area Cards: weniger Spaltenabstand */
.area-content .grid {
    gap: 0.5rem 0.5rem;
}

/* Result Text Colors */
.ground-area-result,
.roof-area-result,
.azimuth-result,
.length-result {
    color: var(--color-success);
}

.module-count-result,
.total-power-result {
    color: var(--color-primary);
}

/* Pitch Input */
.pitch-input,
.calculate-btn {
    transition: all 0.2s;
}

.pitch-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(var(--petrol-600-rgb) / 0.1);
    outline: none;
}

.calculate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Eave Arrow Indicator */
.eave-arrow-indicator {
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.3s ease;
}

.eave-arrow-indicator:hover {
    transform: scale(1.2);
}

.eave-arrow-indicator .arrow-container {
    animation: pulseArrow 2s ease-in-out infinite;
}

@keyframes pulseArrow {
    0%, 100% {
        opacity: 1;
        transform: rotate(var(--arrow-rotation, 0deg)) translateX(0);
    }
    50% {
        opacity: 0.6;
        transform: rotate(var(--arrow-rotation, 0deg)) translateX(-5px);
    }
}

/* Resizable 3D Window */
.resizable {
    resize: none;
    position: relative;
}

.resizer-handle {
    width: 12px;
    height: 12px;
    background: var(--color-border); /* gray-200 */
    border-left: 2px solid var(--color-text-placeholder); /* gray-400 */
    border-top: 2px solid var(--color-text-placeholder);
    position: absolute;
    left: 0;
    top: 0;
    cursor: nwse-resize;
    z-index: 10;
}


/* =============================================================================
   DACHFLÄCHE: Komplette Mobile-Umgestaltung (Bottom-Drawer-Konzept)
   Karte oben – Sidebar als aufziehbarer Drawer von unten
   ============================================================================= */

@media (max-width: 768px) {

    /* ── 1. Container: Column-Layout, Karte oben via CSS order ── */
    #dachplaner-container {
        flex-direction: column !important;
    }
    #dachplaner-container #main-view-area {
        order: 1;
        flex: 1 1 0%;
        min-height: 0;
    }
    #dachplaner-container #sidebar {
        order: 2;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        /* Aufgeklappte Höhe */
        height: 45vh;
        max-height: 45vh;
        flex-shrink: 0;
        border-right: none;
        border-top: 2px solid var(--color-border);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
        transition: height 0.3s ease, max-height 0.3s ease;
        overflow: hidden;
    }

    /* ── 2. Sidebar kollabiert = nur Header-Streifen (52px) ── */
    #dachplaner-container #sidebar.df-sidebar-collapsed {
        height: 52px !important;
        max-height: 52px !important;
        max-height: 52px !important;
        /* Breiten-Override vom Desktop NICHT verwenden */
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden;
    }
    /* Inhalt im kollabierten Zustand verstecken */
    #dachplaner-container #sidebar.df-sidebar-collapsed #roof-areas-container,
    #dachplaner-container #sidebar.df-sidebar-collapsed .df-sidebar-label {
        /* label-Klasse wird durch Desktop-CSS schon verborgen, hier für Sicherheit */
        display: none !important;
    }
    /* Chips im Drawer-Modus nicht nötig */
    #dachplaner-container #sidebar .df-sidebar-chips {
        display: none !important;
    }

    /* ── 3. Sidebar-Inhalt: eigener Scroll-Container ── */
    #dachplaner-container #sidebar #roof-areas-container {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── 4. Drawer-Handle (visueller Pill-Indicator oben zentriert) ── */
    #dachplaner-container #sidebar::before {
        content: '';
        display: block;
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 2px;
        z-index: 5;
        pointer-events: none;
    }

    /* ── 5. Elemente ausblenden, die auf Mobile keinen Sinn ergeben ── */
    /* 3D-Mini-Viewer: immer ausblenden – wird durch View-Swap-Logik fullscreen */
    #3d-view-container {
        display: none !important;
    }
    /* Wenn 3D Vollbild aktiv (Klasse vom JS gesetzt nach toggleViewSwap) */
    #3d-view-container.df-mobile-3d-active {
        /* flex, NICHT block: Der Container teilt sich per flex-col in Header,
           Canvas (flex-1) und Sonnenleiste. Mit block verliert der Canvas seine
           Höhe und die 3D-Ansicht bliebe leer. */
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: 1002 !important;
    }
    /* Terrain-Toolbar (rechte Seitenleiste) – auch im 3D-Modus nicht zeigen */
    #terrain-editing-toolbar-container {
        display: none !important;
    }
    /* Layer-Auswahl (Custom Leaflet Control) */
    .df-layer-control {
        display: none !important;
    }
    /* Alignment-Debug-Panel */
    #alignment-debug-panel {
        display: none !important;
    }
    /* OSM-Debug-Buttons (nur für Entwickler) */
    #osm-debug-container {
        display: none !important;
    }
    /* Der OSM-Toggle wird vom DrawingButtonManager in die Zeichen-Leiste
       verschoben und liegt daher nicht mehr in #osm-debug-container. Er muss
       hier eigens ausgeblendet werden, sonst taucht er auf Mobile auf, wo er
       vorher bewusst versteckt war.
       (Die Modul-Ansicht braucht das NICHT: Sie wandert in ein Leaflet-Control,
       und das trägt df-layer-control - siehe die Regel weiter oben.) */
    #osm-buildings-toggle {
        display: none !important;
    }
    /* Resize-Handles (Mouse-only) */
    .sidebar-resize-handle {
        display: none !important;
    }
    /* Zoom-Control kompakter */
    .leaflet-control-zoom {
        margin-right: 0.375rem !important;
        margin-top: 0.375rem !important;
    }

    /* ── Mobile: eigene UI-Buttons über der Karte ── */
    #mobile-search-btn,
    #mobile-view-toggle {
        display: flex !important;
    }

    /* ── 6. KI-Chat: floating statt eingebettet, rechts oben ── */
    #ai-chat-window.ai-sidebar-panel {
        position: fixed !important;
        top: 120px !important; /* unter Nav + Header */
        right: 0.5rem !important;
        left: auto !important;
        bottom: auto !important;
        width: min(88vw, 360px) !important;
        height: min(55vh, 420px) !important;
        border-radius: 0.75rem !important;
        border: 1px solid var(--color-border) !important;
        border-left: 1px solid var(--color-border) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
        z-index: 1020 !important;
    }
    #ai-chat-window.ai-sidebar-panel #ai-chat-resize-handle {
        display: none !important;
    }

    /* ── 7. Area-Cards: kompakteres Padding auf Mobile ── */
    .area-summary {
        padding: 0.375rem 0.75rem;
    }
    .area-content-wrapper .area-content {
        padding: 0 0.75rem 0.75rem 0.75rem;
    }

    /* ── 8. Karten-Aktionsbuttons auf Mobile kleiner ── */
    #global-actions-container .leaflet-bar a,
    #global-actions-container button {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.6rem !important;
    }
}

/* ── Mobile: Adresssuche-Overlay ── */
#mobile-search-overlay {
    z-index: 10000;
}
#mobile-search-input {
    font-size: 1rem; /* verhindert iOS-Zoom beim Focus */
    -webkit-appearance: none;
}
.mobile-search-result {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0.08);
    transition: background 0.1s;
}
.mobile-search-result:active {
    background: var(--color-bg);
}

/* Mobile-Buttons über der Karte: standardmäßig unsichtbar */
#mobile-search-btn,
#mobile-view-toggle {
    display: none;
}

/* ── Select2 Projekt-Auswahl auf Mobile: volle Breite des Eltern-Containers ── */
@media (max-width: 768px) {
    #project-select:not(.select2-hidden-accessible) {
        width: 100% !important;
        height: 36px !important;
    }
    #project-select + .select2-container,
    #project-select ~ .select2-container {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* =============================================
   DACHFLAECHE / PV-AUSLEGUNG MODULE
   ============================================= */

/* Verhindert Scrolling im Dachplaner-Modul */
body.dachflaeche-module {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0;
    padding: 0;
    position: fixed !important;
    width: 100%;
}

body.dachflaeche-module > div.min-h-full {
    min-height: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

body.dachflaeche-module main {
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

/* Die Karte soll die volle Höhe einnehmen - gemeint ist der Modul-Container.
   Der Selektor trifft aber JEDES direkte div-Kind von main, und dort liegen
   auch die Modale dieses Moduls. Denen nahm er mit padding:0 !important das
   Polster (gm-gap) und setzte sie mit height:100% auf die volle Fensterhöhe,
   obwohl ein .gm-overlay erst unter der Kopfleiste beginnt - sie ragten
   4px unten heraus. Deshalb hier ausdrücklich ohne die Modale. */
body.dachflaeche-module main > div:not(.gm-overlay) {
    padding: 0 !important;
    margin: 0 !important;
    height: 100%;
}

#dachplaner-container {
    position: fixed;
    top: 120px;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto !important;
    overflow: hidden !important;
}

/* ── PV-Modul: Seitenleisten-Layout ── */
#pv-layout-container {
    position: fixed;
    top: 120px; /* per JS auf tatsächliche Header-Höhe gesetzt */
    left: 0;
    right: 0;
    bottom: 0;
    height: auto !important;
    overflow: hidden !important;
    display: flex;
}
#pv-layout-container #photovoltaik-container {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
}

/* ── PV-Start-Tab: interner Flex-Column für Wizard-Footer (nur PV-Kontext, nicht andere Module mit gleicher Tab-ID) ── */
#photovoltaik-container #start-tab.tab-pane {
    padding: 0;
}
#photovoltaik-container #start-tab.tab-pane.active {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
#wizardProgress {
    padding: 1.5rem 2rem 0;
    flex-shrink: 0;
}
#wizardContent {
    flex: 1;
    padding: 1rem 2rem 1.5rem;
    overflow-y: auto;
    min-height: 0;
}
#wizardFooter {
    flex-shrink: 0;
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    z-index: 10;
}

/* ── Tab-Navigation-Footer (Grundeinstellungen + Lastprofile) ── */
/* position:sticky klebt am unteren Rand von #photovoltaik-container beim Scrollen */
.pv-tab-nav-footer {
    position: sticky;
    bottom: -2rem;         /* kompensiert tab-pane padding: 2rem */
    margin: 2rem -2rem -2rem;
    padding: 1rem 2rem;
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    z-index: 10;
}

/* ── Linke Sidebar: kollabierter Modus ── */
#sidebar.df-sidebar-collapsed {
    width: 48px !important;
    min-width: 48px !important;
    overflow: hidden;
}
#sidebar.df-sidebar-collapsed #roof-areas-container,
#sidebar.df-sidebar-collapsed .df-sidebar-label {
    display: none !important;
}
#sidebar .df-sidebar-chips {
    display: none;
}
#sidebar.df-sidebar-collapsed .df-sidebar-chips {
    display: flex;
}

/* ── Sidebar-Resize-Handles ── */
.sidebar-resize-handle {
    position: absolute;
    top: 0; bottom: 0;
    width: 8px;
    cursor: ew-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.15s;
}
/* Sichtbarer Drag-Griff (vertikale Punkte) */
.sidebar-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;
}
.sidebar-resize-handle:hover::after,
.sidebar-resize-handle.dragging::after { opacity: 1; }
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging { background: rgb(var(--petrol-600-rgb) / 0.2); }
.sidebar-resize-handle-right { right: 0; }
.sidebar-resize-handle-left  { left: 0; }
#sidebar, #terrain-editing-toolbar-container { position: relative; }

/* ── Chat-Panel: Collapsed-Modus ── */
#ai-chat-window.ai-sidebar-panel.ai-panel-collapsed {
    width: 48px !important;
    min-width: 48px !important;
    overflow: hidden;
}
#ai-chat-window.ai-sidebar-panel.ai-panel-collapsed .ai-panel-full-content {
    display: none !important;
}
#ai-chat-window.ai-sidebar-panel .ai-panel-collapsed-content {
    display: none;
}
#ai-chat-window.ai-sidebar-panel.ai-panel-collapsed .ai-panel-collapsed-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Sandwich-Button in der Sidebar-Kopfzeile */
.ai-panel-toggle-btn {
    cursor: pointer;
    background: none;
    border: none;
    color: white;
    padding: 2px 4px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    opacity: 0.85;
}
.ai-panel-toggle-btn:hover { opacity: 1; }
.ai-panel-toggle-btn span {
    display: block;
    width: 16px;
    height: 2px;
    background: white;
    border-radius: 1px;
}

/* Flächen-Chips (kollabierte Ansicht) */
.df-area-chip {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    flex-shrink: 0;
    border: 2px solid transparent;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    background: var(--color-text-muted);
    user-select: none;
}
.df-area-chip:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.df-area-chip.chip-calculated { background: var(--color-primary); }
.df-area-chip.chip-active {
    border-color: white;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 0 12px rgb(var(--petrol-600-rgb) / 0.6);
    transform: scale(1.12);
}

/* Collapsible Sections */
.collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.collapsible-content.collapsed {
    max-height: 0 !important;
}

/* Einheitlicher Collapse/Expand-Pfeil (gleicher Stil wie PowerTable detail-toggle) */
.collapse-arrow {
    transition: all 0.2s ease;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    padding: 2px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.collapse-arrow:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
}
.collapse-arrow.rotate-180 {
    transform: rotate(-180deg);
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    border-color: var(--color-primary-soft-hover);
}

/* Consumer-Chevron (Photovoltaik Lastprofil Cards) - gleicher Stil */
.consumer-chevron {
    transition: all 0.2s ease;
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    padding: 2px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.consumer-chevron:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
}
.consumer-chevron.rotate-180 {
    transform: rotate(-180deg);
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    border-color: var(--color-primary-soft-hover);
}

/* Terrain Editing Toolbar */
#terrain-editing-toolbar-container {
    background: var(--color-bg-muted);
}

#terrain-editing-toolbar input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--color-border-strong);
    border-radius: 3px;
    outline: none;
}

#terrain-editing-toolbar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
}

#terrain-editing-toolbar input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

#terrain-editing-toolbar input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 3D View Container - Kleines Fenster */
#3d-view-container {
    background: #1a1a2e !important;
    border: 1px solid var(--color-text-secondary) !important; /* gray-700 - gleich wie Header */
}

#3d-canvas-container {
    background: #1a1a2e !important;
}

/* 3D Fullscreen Mode */
#3d-view-container.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    min-width: unset !important;
    min-height: unset !important;
    z-index: 10000 !important;
    border-radius: 0 !important;
    resize: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#3d-view-container.fullscreen #3d-view-header {
    cursor: default !important;
}

/* Toolbar in Fullscreen Mode */
#3d-view-container.fullscreen #terrain-editing-toolbar-container {
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    right: 0 !important;
    width: 320px !important;
    height: 100vh !important;
    z-index: 10001 !important;
}

#3d-view-container.fullscreen #3d-canvas-container {
    width: calc(100% - 320px) !important;
}

/* View Swap Mode */
#map-overlay-header {
    display: none;
}

/* Im Swap-Mode: Map-Container wird zur kleinen Ansicht */
#main-view-area.views-swapped #map-container {
    resize: both;
    overflow: hidden;
}

#main-view-area.views-swapped #map {
    height: calc(100% - 32px) !important;
}

/* Zoom-Buttons ausblenden (Mausrad reicht) */
.leaflet-control-zoom {
    display: none !important;
}

/* Im Swap-Mode: Leaflet-Controls in der kleinen Karte ausblenden */
#main-view-area.views-swapped #map-container .leaflet-control-container {
    display: none !important;
}

/* Verschaltungsmodul Layout (analog zu Dachfläche) */
body.verschaltung-module {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100%;
}

body.verschaltung-module main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    height: 100vh !important;
    overflow: hidden !important;
}

body.verschaltung-module main > div {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    height: 100% !important;
}

#verschaltung-container {
    position: fixed;
    top: 120px;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto !important;
    overflow: hidden !important;
}

/* Verschaltung: Sidebar Collapse */
#sidebar.vs-sidebar-collapsed { width: 48px !important; min-width: 48px !important; overflow: hidden; }
#sidebar.vs-sidebar-collapsed #sidebar-content,
#sidebar.vs-sidebar-collapsed .vs-sidebar-label,
#sidebar.vs-sidebar-collapsed #sidebar-nav-footer { display: none !important; }

/* Verschaltung: WR-Chips (nur sichtbar wenn kollabiert) */
#sidebar .vs-sidebar-chips { display: none; }
#sidebar.vs-sidebar-collapsed .vs-sidebar-chips { display: flex; }

/* Verschaltung: 3D-Canvas Höhe */
.verschaltung-module #3d-canvas-container { height: calc(100% - 28px) !important; }

/* Verschaltung: z-index Fix für Leaflet-Controls */
.verschaltung-module .leaflet-control-container { z-index: 999 !important; }

/* Verschaltung: WR-Connector-Labels auf der Karte */
.wr-connector-label {
    font-size: 11px;
    font-weight: 700;
    color: #5b21b6;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
    text-shadow: 0 0 4px var(--color-bg-white), 0 0 4px var(--color-bg-white), 0 0 2px var(--color-bg-white);
}
.wr-mppt-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-shadow: 0 0 3px var(--color-bg-white), 0 0 3px var(--color-bg-white);
}
.wr-drag-handle {
    cursor: move;
    background: transparent;
}
.cable-segment-label span {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: rgba(255,255,255,0.85);
    padding: 0 3px;
    border-radius: 2px;
}
.cable-length-tooltip {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
}
.wr-move-toolbar {
    pointer-events: auto;
}

/* =============================================================================
   STRASSENANSICHT (Street View)
   Männchen auf der Karte, Bedienleiste und Fadenkreuz über der 3D-Ansicht.
   ============================================================================= */

/* Männchen auf der Karte. Greifbar wie ein Objekt: Der Zeiger zeigt die
   Greifhand, beim Ziehen die geschlossene. */
.df-pegman {
    /* Position hier und nicht über Tailwind-Klassen: Die gebaute Tailwind-Datei
       enthält nur die im Projekt schon benutzten Utilities, das Männchen
       rutschte damit ans Seitenende.

       Links unten und nicht mehr rechts oben: Dort stand es zwischen
       Kartensteuerung und Zoom-Knöpfen und sah aus, als wäre es dorthin
       gefallen. Unten links hat es eine eigene Ecke, ist weit weg von den
       Bedienelementen der Karte und liegt näher an dem Bereich, in den es
       gezogen wird. */
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg-white);
    color: var(--color-primary);
    box-shadow: var(--shadow-md);
    cursor: grab;
    touch-action: none;
    transition: transform var(--transition), color var(--transition);
}
.df-pegman:hover {
    color: var(--color-primary-hover);
    transform: translateY(-2px) scale(1.06);
}
.df-pegman:active {
    cursor: grabbing;
    transform: scale(0.96);
}

/* Der Zwilling, der beim Ziehen am Zeiger hängt. Fest positioniert und für
   Zeigerereignisse durchlässig, sonst läge er beim Loslassen selbst unter dem
   Zeiger und die Karte bekäme das Ereignis nie. */
.df-pegman-geist {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    color: var(--color-primary);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
}

/* Karte, während das Männchen darüber schwebt. */
.df-streetview-zielt {
    cursor: grabbing !important;
}
.df-streetview-zielt .leaflet-grab {
    cursor: grabbing !important;
}

/* Im 3D-Vollbild hat das Männchen nichts zu suchen - es gehört zur Karte. */
.views-swapped #streetview-pegman {
    display: none;
}

/* Fadenkreuz: ein ruhiger Punkt in der Bildmitte, wie das Zielkreuz beim
   Umsehen. Bewusst klein und halbtransparent, damit er nicht ablenkt. */
.df-sv-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1003;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* Bedienleiste unten. Sitzt über der Sonnenleiste des 3D-Containers, mittig
   und IMMER einzeilig: Tastenhilfe oben, Ausstieg darunter. Umbrechen darf sie
   nicht - eine über die halbe Bildhöhe gewachsene Hilfe verdeckt genau das,
   was man sich ansehen will. */
.df-sv-hud {
    position: absolute;
    bottom: 3.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1003;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: calc(100% - 2rem);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(15, 20, 30, 0.78);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.75rem;
    line-height: 1.1;
}
.df-sv-hud-tasten {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0.3rem;
}

/* Zu schmales Bild (Seitenleiste plus Werkzeugspalte): nur noch der Zustand
   und der Ausstieg. Die Klasse setzt der StreetViewController nach der echten
   Breite des Canvas - ein Media-Query träfe das Fenster, nicht das Bild. */
.df-sv-hud--knapp .df-sv-hud-tasten > *:not(.df-sv-modus) {
    display: none;
}

/* Der zweite Rückweg-Knopf des 3D-Vollbilds tritt beiseite, solange die
   Straßenansicht ihren eigenen Ausstieg zeigt. */
.df-sv-verdeckt {
    display: none !important;
}

/* Tastenkappen: heben die Tasten aus dem Fließtext heraus, ohne ein Bild zu
   brauchen. */
.df-sv-taste {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-bottom-width: 2px;
    background: rgba(255, 255, 255, 0.12);
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
}
.df-sv-trenner {
    width: 1px;
    height: 0.9rem;
    margin: 0 0.15rem;
    background: rgba(255, 255, 255, 0.22);
}
.df-sv-modus {
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

/* Auf dem Handy rückt die Sonnenleiste höher, die Bedienleiste muss mit. */
@media (max-width: 768px) {
    .df-sv-hud {
        bottom: 4rem;
    }
}

/* ===== 28-modul-photovoltaik.css ===== */
/* =============================================================================
   14. MODUL: PHOTOVOLTAIK
   ============================================================================= */

/* (Styles are mostly in tab-navigation section above) */

/* -----------------------------------------------------------------------------
   Farben der Lastprofil-Verbraucher
   Einzige Quelle für Legende und Diagramm. Vorher stand jede Farbe an vier
   Stellen fest, zweimal im Template und zweimal im JavaScript. Dadurch war die
   Legende grau, während das Diagramm dieselbe Reihe violett zeichnete.
   LoadProfileCharts.js liest diese Werte zur Laufzeit aus.
   -------------------------------------------------------------------------- */
:root {
    --lp-haushalt: #3B82F6;
    --lp-eauto: #22C55E;
    --lp-waermepumpe: #F97316;
    --lp-heizstab: #EF4444;
    --lp-klima: #06B6D4;
    --lp-sonstige: #8B5CF6;
}

/* -----------------------------------------------------------------------------
   Öffentlicher Schnellrechner (/pv-rechner)
   Zwei Bausteine: der Datenschutzhinweis vor der Ortswahl und der Hinweis auf
   die Vollversion am Ende der Zusammenfassung. Beide gibt es nur dort, deshalb
   stehen sie hier und nicht bei den allgemeinen Karten.
   -------------------------------------------------------------------------- */
.zustimmung-karte {
    max-width: 52rem;
    margin: 0 auto;
}

.zustimmung-einleitung {
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

.zustimmung-liste {
    display: grid;
    gap: 0.625rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.zustimmung-liste li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: 0.625rem;
    align-items: start;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text);
}

.zustimmung-liste svg {
    width: 1rem;
    height: 1rem;
    margin-top: 0.2rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.zustimmung-haken {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.625rem;
    align-items: start;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--form-radius);
    background: var(--color-bg-muted);
    cursor: pointer;
    transition: border-color var(--transition);
}

.zustimmung-haken:hover {
    border-color: var(--color-primary);
}

.zustimmung-haken input {
    width: auto;
    margin-top: 0.2rem;
}

.zustimmung-haken a {
    color: var(--color-primary-text);
    text-decoration: underline;
}

.zustimmung-fussnote {
    margin-top: 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Hinweis auf die Vollversion: bewusst kräftiger als die Karten daneben,
   er ist der Abschluss der Auswertung und darf auffallen. */
.vollversion-werbung {
    border: 1px solid var(--color-primary-border);
    background: linear-gradient(135deg, var(--color-primary-subtle), var(--color-bg-white) 60%);
}

.vollversion-kopf {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.875rem;
    align-items: center;
    margin-bottom: 1.125rem;
}

.vollversion-titel {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary-strong);
    line-height: 1.25;
}

.vollversion-untertitel {
    margin-top: 0.25rem;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.vollversion-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.vollversion-liste li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: 0.5rem;
    align-items: start;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.vollversion-liste svg {
    width: 1rem;
    height: 1rem;
    margin-top: 0.2rem;
    color: var(--color-success);
}

.vollversion-abschluss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--color-border);
}

.vollversion-abschluss p {
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   Netzentgelt-Tab (Leistungspreismodell ab 2027)

   Gestalterische Richtung: redaktionell statt Kachelraster. Eine
   durchgehende Bilanzleiste trägt die drei Kernaussagen, darunter
   Blöcke mit ruhiger Typografie. Farbe hat Bedeutung: Bernstein für
   Mehrkosten der Reform, Grün für die Wirkung der Maßnahmen.
   ═══════════════════════════════════════════════════════════ */

.ne-seite {
    max-width: 76rem;
    margin: 0 auto;
    padding: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.ne-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem 0 1.25rem;
    border-bottom: 2px solid var(--color-text);
}

.ne-kopf-oberzeile {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.ne-kopf-titel {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.ne-kopf-text {
    margin: 0.65rem 0 0;
    max-width: 46rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.ne-kopf-marke {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

/* Bilanzleiste: ein Band, drei Felder, Trennlinien statt Kartenrändern */
.ne-bilanz {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 12px 28px -22px rgba(15, 23, 42, 0.55);
}

.ne-bilanz-feld {
    position: relative;
    padding: 1.5rem 1.5rem 1.35rem;
    border-left: 1px solid var(--color-border);
}

.ne-bilanz-feld:first-child {
    border-left: 0;
}

.ne-bilanz-feld::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--color-border-strong);
}

.ne-ton-warnung::before { background: var(--color-warning); }
.ne-ton-gut::before     { background: var(--color-success); }
.ne-ton-ergebnis::before { background: var(--color-primary); }

.ne-bilanz-frage {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

.ne-bilanz-zahl {
    margin: 0.35rem 0 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.ne-ton-warnung .ne-bilanz-zahl { color: var(--color-warning-text); }
.ne-ton-gut .ne-bilanz-zahl     { color: var(--color-success-text); }

.ne-bilanz-fuss {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Inhaltsblöcke */
.ne-block {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.ne-block-kopf {
    margin-bottom: 1.25rem;
}

.ne-block-kopf h3 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.ne-block-kopf p {
    margin: 0.35rem 0 0;
    max-width: 52rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.ne-chart {
    position: relative;
    height: 22rem;
}

.ne-chart-flach {
    height: 17rem;
}

.ne-mindest-hinweis {
    margin: 0.9rem 0 0;
    padding-left: 0.75rem;
    border-left: 2px solid var(--color-border-strong);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Wirkung der Maßnahmen */
.ne-massnahmen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.ne-wirkung {
    padding: 1.1rem 1.2rem;
    background: var(--color-bg-muted);
    border-radius: 0.625rem;
}

.ne-wirkung-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary);
}

.ne-wirkung-kopf h4 {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ne-wirkung-wert {
    margin: 0.5rem 0 0;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--color-success-text);
}

.ne-wirkung-text {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Monatstabelle */
.ne-tabelle-rahmen {
    overflow-x: auto;
}

.ne-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ne-tabelle th,
.ne-tabelle td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    white-space: nowrap;
}

.ne-tabelle thead th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-strong);
}

.ne-tabelle tbody tr + tr td {
    border-top: 1px solid var(--color-border);
}

.ne-tabelle tbody tr:hover td {
    background: var(--color-bg-muted);
}

.ne-tabelle tfoot td {
    border-top: 2px solid var(--color-text);
    font-weight: 700;
}

.ne-tabelle .ne-zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ne-tabelle .ne-zahl-stark {
    color: var(--color-success-text);
    font-weight: 600;
}

@media (max-width: 860px) {
    .ne-bilanz {
        grid-template-columns: 1fr;
    }

    .ne-bilanz-feld {
        border-left: 0;
        border-top: 1px solid var(--color-border);
    }

    .ne-bilanz-feld:first-child {
        border-top: 0;
    }

    .ne-kopf {
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════════════════════
   Zusammenfassungs-Tab

   Gleiche redaktionelle Linie wie der Netzentgelt-Tab: eine
   Leitzahl trägt die Seite, daneben ein Steckbrief der Anlage.
   Kein Kachelraster, Hierarchie über Größenkontrast.
   ═══════════════════════════════════════════════════════════ */

.zf-seite {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 0 2rem;
}

.zf-platzhalter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 5rem 1rem;
    color: var(--color-text-placeholder);
    text-align: center;
}

.zf-platzhalter p {
    margin: 0;
    font-size: 1.0625rem;
}

.zf-kopf {
    padding: 1.75rem 0 1.25rem;
    border-bottom: 2px solid var(--color-text);
}

.zf-kopf-oberzeile {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.zf-kopf-titel {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

/* Leitzahl und Steckbrief */
.zf-leitzeile {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(18rem, 1.1fr);
    gap: 2rem;
    align-items: end;
    padding: 2rem 0 1.75rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.75rem;
}

.zf-leitzahl-frage {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.zf-leitzahl-wert {
    margin: 0.25rem 0 0;
    font-size: clamp(2.75rem, 6vw, 4.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
    color: var(--color-success-text);
}

.zf-leitzahl-fuss {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.zf-steckbrief {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0;
}

.zf-steckbrief > div {
    padding-left: 0.85rem;
    border-left: 2px solid var(--color-border-strong);
}

.zf-steckbrief dt {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.zf-steckbrief dd {
    margin: 0.15rem 0 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.zf-steckbrief dd em {
    font-style: normal;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* Inhaltsblöcke */
.zf-block {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.zf-block-kopf h3 {
    margin: 0 0 1.25rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

/* Autarkie und Eigenverbrauch */
.zf-quoten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.25rem;
}

.zf-quote {
    padding-left: 1rem;
    border-left: 3px solid var(--color-success);
}

.zf-quote-blau {
    border-left-color: var(--color-primary);
}

.zf-quote-wert {
    margin: 0;
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--color-success-text);
}

.zf-quote-blau .zf-quote-wert {
    color: var(--color-primary-text);
}

.zf-quote-text {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

.zf-quote-marke {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Energieflüsse als Liste */
.zf-fluss {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--color-border);
}

.zf-fluss li {
    display: grid;
    grid-template-columns: 0.5rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0;
}

.zf-fluss li + li {
    border-top: 1px solid var(--color-border);
}

.zf-fluss-marke {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.zf-fluss-sonne       { background: #f59e0b; }
.zf-fluss-netz        { background: var(--color-danger); }
.zf-fluss-einspeisung { background: #f97316; }

.zf-fluss-text {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.zf-fluss-wert {
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

/* Kostenposten */
.zf-kosten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.zf-kosten-frage {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.zf-kosten-wert {
    margin: 0.2rem 0 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.zf-kosten-wert-klein {
    font-size: 1.125rem;
    line-height: 1.35;
    color: var(--color-primary-text);
}

.zf-kosten-fuss {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-success-text);
}

/* Vorher / Nachher als Balkenleiste */
.zf-vergleich {
    padding-top: 1.5rem;
}

.zf-vergleich-titel {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.zf-vergleich-zeile {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 0;
}

.zf-vergleich-name {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.zf-vergleich-balken {
    display: block;
    height: 0.75rem;
    background: var(--color-bg-muted);
    border-radius: 999px;
    overflow: hidden;
}

.zf-balken {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.zf-balken-rot   { background: var(--color-danger); }
.zf-balken-gruen { background: var(--color-success); }

.zf-vergleich-wert {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.zf-vergleich-fazit {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.zf-vergleich-ersparnis {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-success-text);
}

.zf-vergleich-anteil {
    font-size: 0.8125rem;
    color: var(--color-success-text);
}

.zf-chart {
    position: relative;
    height: 20rem;
}

@media (max-width: 860px) {
    .zf-leitzeile {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .zf-steckbrief {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .zf-vergleich-zeile {
        grid-template-columns: 1fr auto;
    }

    .zf-vergleich-balken {
        grid-column: 1 / -1;
    }
}

/* Hinweis unter dem Heizstab-Ergebnis: welchen Teil der Wärme weiterhin die
   bestehende Heizung liefert. */
.hinweis-restwaerme {
    margin: 0.6rem 0 0;
    padding: 0.5rem 0.7rem;
    background: var(--color-surface-muted, #f1f5f9);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-muted, #475569);
}

/* Schalter "Förderung berücksichtigen" in der Zusammenfassung der Kennzahlen.
   Sitzt im summary eines details, das selbst Flex ist - ohne eigene Regel
   klebten Kästchen und Text ohne Abstand aneinander. */
.foerderung-schalter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.foerderung-schalter input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.zf-vergleich-hinweis {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   Reserve-Regler im Wintermodus (Ziel-Ladestand der Netzladung)

   Der Wert stand vorher als Kleingedrucktes zwischen zwei Datumsrastern und
   wurde regelmäßig übersehen. Er bekommt deshalb eine eigene helle Fläche im
   blauen Block, einen kräftigen Regler und die Zahl im Größenkontrast zum
   umgebenden Text.
   -------------------------------------------------------------------------- */
.reserve-regler {
    padding: 0.85rem 1rem 0.7rem;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.reserve-regler-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.reserve-regler-titel {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-text);
    cursor: pointer;
}

.reserve-regler-wert {
    display: flex;
    align-items: baseline;
    gap: 0.1rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
}

.reserve-regler-einheit {
    font-size: 1rem;
    font-weight: 600;
}

.reserve-regler-schiene {
    height: 10px;
}

.reserve-regler-schiene::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    border-width: 3px;
    box-shadow: var(--shadow-md);
    transition: scale 120ms ease-out;
}

.reserve-regler-schiene::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-width: 3px;
    box-shadow: var(--shadow-md);
    transition: scale 120ms ease-out;
}

.reserve-regler-schiene:hover::-webkit-slider-thumb,
.reserve-regler-schiene:focus-visible::-webkit-slider-thumb { scale: 1.15; }

.reserve-regler-schiene:hover::-moz-range-thumb,
.reserve-regler-schiene:focus-visible::-moz-range-thumb { scale: 1.15; }

.reserve-regler-skala {
    display: flex;
    justify-content: space-between;
    margin-top: 0.2rem;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.reserve-regler-hinweis {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .reserve-regler-schiene::-webkit-slider-thumb,
    .reserve-regler-schiene::-moz-range-thumb { transition: none; }
}

/* ============================================================
   Kostenzusammensetzung: eine Spalte je Szenario
   ============================================================
   Die Tabelle stellt Positionen nebeneinander, die sich um wenige Euro
   unterscheiden. Deshalb Zahlen rechtsbündig mit Tabellenziffern, damit die
   Stellen untereinander stehen und ein Unterschied ins Auge fällt. */

.kosten-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

/* Die Bezeichnung nimmt den Rest, die Wertespalten sind untereinander gleich
   breit. Ohne feste Aufteilung richtet der Browser sie am längsten Text aus,
   dann steht die erste Spalte übermäßig breit und die Beträge kleben rechts. */
.kosten-tabelle th:first-child,
.kosten-tabelle td:first-child {
    width: auto;
}

.kosten-tabelle th:not(:first-child),
.kosten-tabelle td:not(:first-child) {
    width: 9.5rem;
}

.kosten-tabelle th,
.kosten-tabelle td {
    padding: 0.45rem 0.75rem;
    white-space: nowrap;
}

/* Jede Position bekommt eine dünne Grundlinie. Das führt das Auge über die
   drei Spalten, ohne dass die Tabelle wie ein Raster wirkt. */
.kosten-tabelle tbody tr:not(.kosten-gruppe) th,
.kosten-tabelle tbody tr:not(.kosten-gruppe) td {
    border-bottom: 1px solid var(--color-border);
}

.kosten-tabelle tbody th,
.kosten-tabelle tfoot th {
    text-align: left;
    font-weight: 400;
}

.kosten-tabelle td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.kosten-tabelle thead th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: right;
}

.kosten-tabelle thead th:first-child {
    text-align: left;
}

/* Die Menge schließt den Kopf ab, deshalb trägt sie die Trennlinie über die
   volle Breite. Lag sie auf den Kopfzellen, endete sie nach der ersten Spalte,
   weil die Mengen daneben Datenzellen sind. */
.kosten-tabelle tr.kosten-menge td,
.kosten-tabelle tr.kosten-menge th {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    padding-top: 0;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--color-border-strong);
}

/* Gruppenüberschrift trennt Lieferant, Netz, Abgaben und Erlöse. Die schwach
   getönte Fläche fasst die Zeilen darunter sichtbar zusammen. */
.kosten-tabelle tr.kosten-gruppe th {
    padding-top: 1.1rem;
    padding-bottom: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.kosten-tabelle tbody tr:not(.kosten-gruppe):hover {
    background: var(--color-surface-hover, rgba(0, 0, 0, 0.03));
}

/* Der Preis je Einheit steht klein hinter der Bezeichnung, damit
   nachvollziehbar ist, woraus der Betrag entsteht. */
.kosten-preis {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-left: 0.4rem;
    font-variant-numeric: tabular-nums;
}

/* Eine Position ohne hinterlegten Preis wird nicht als 0 gezeigt, sondern als
   offen: Null hieße geprüft und nicht vorhanden. */
.kosten-offen {
    color: var(--color-warning-text, #b45309);
    font-weight: 600;
    cursor: help;
}

.kosten-tabelle tfoot tr:first-child th,
.kosten-tabelle tfoot tr:first-child td {
    border-top: 2px solid var(--color-border-strong);
    padding-top: 0.7rem;
}

/* Die Bruttosumme ist die Zahl, wegen der die Tabelle da ist. Sie bekommt eine
   eigene Linie darüber, damit sie sich von der Zwischensumme abhebt. */
.kosten-tabelle tr.kosten-summe-brutto th,
.kosten-tabelle tr.kosten-summe-brutto td {
    border-top: 1px solid var(--color-border-strong);
    padding-top: 0.5rem;
}

.kosten-tabelle tr.kosten-summe th,
.kosten-tabelle tr.kosten-summe td {
    font-weight: 600;
}

.kosten-tabelle tr.kosten-summe-brutto th,
.kosten-tabelle tr.kosten-summe-brutto td {
    font-weight: 700;
    font-size: 1rem;
}

.kosten-tabelle tr.kosten-effektiv th,
.kosten-tabelle tr.kosten-effektiv td {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.kosten-hinweis {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--color-warning-text, #b45309);
}

@media (max-width: 640px) {
    .kosten-tabelle th,
    .kosten-tabelle td {
        padding: 0.35rem 0.4rem;
        font-size: 0.8rem;
    }
    .kosten-preis {
        display: none;
    }
}

/* ===== 28-modul-photovoltaik-verbraucher.css ===== */
/* =============================================================================
   14b. VERBRAUCHERKARTEN (Photovoltaik, Reiter "Lastprofile")

   Gestalterische Richtung: WERKBANK. Die Karte liest sich wie ein Messgerät.
   Drei Ebenen, die man ohne Lesen auseinanderhält:

     1. Kopfband      - was das Gerät ist und was es im Jahr zieht. Links eine
                        Akzentkante in der Farbe des Verbrauchers.
     2. Eingabefläche - was der Nutzer einstellt. Helle Platte, Felder in
                        fester Maßbreite wie Skalenfenster, Abschnitte durch
                        gravierte Marken (Versalien mit auslaufender Linie).
     3. Ableseband    - was das Modul daraus rechnet. Eingelassene Fläche mit
                        Innenschatten, Akzentkante und großen Tabellenziffern.

   Vorher trugen die Karten teils gar keine Formklassen (Heizstab): Beschriftung
   und Zahl standen in einer Zeile, Auswahlfelder hatten einen Rahmen und
   Zahlenfelder nicht, Eingabe und Rechenergebnis sahen gleich aus. Alle Regeln
   hier gelten für JEDE Verbraucherkarte.

   Die Selektoren greifen über `.card > …` (Spezifität 0,2,0): Tailwind wird
   NACH main.css geladen und überstimmt sonst jede einfache Klassenregel.
   ============================================================================= */

/* Farbton je Verbraucher. Kein Schmuck, sondern die Kennung: derselbe Ton
   trägt Kopfsymbol, Abschnittslinie, Kante des Ablesebands und Fokusring. */
.card:has(> .consumer-header),
.card.vb-ton-petrol { --vb-akzent: rgb(var(--petrol-500-rgb)); --vb-flaeche: rgb(var(--petrol-50-rgb));
                      --vb-text: rgb(var(--petrol-700-rgb)); --vb-ring: rgb(var(--petrol-500-rgb) / 0.22); }
.card.vb-ton-gruen  { --vb-akzent: rgb(var(--gruen-500-rgb));  --vb-flaeche: rgb(var(--gruen-50-rgb));
                      --vb-text: rgb(var(--gruen-700-rgb));  --vb-ring: rgb(var(--gruen-500-rgb) / 0.22); }
.card.vb-ton-sonne  { --vb-akzent: rgb(var(--sonne-500-rgb));  --vb-flaeche: rgb(var(--sonne-50-rgb));
                      --vb-text: rgb(var(--sonne-700-rgb));  --vb-ring: rgb(var(--sonne-500-rgb) / 0.22); }
.card.vb-ton-rot    { --vb-akzent: rgb(var(--rot-500-rgb));    --vb-flaeche: rgb(var(--rot-50-rgb));
                      --vb-text: rgb(var(--rot-700-rgb));    --vb-ring: rgb(var(--rot-500-rgb) / 0.22); }
.card.vb-ton-schnee { --vb-akzent: rgb(var(--schnee-500-rgb)); --vb-flaeche: rgb(var(--schnee-50-rgb));
                      --vb-text: rgb(var(--schnee-700-rgb)); --vb-ring: rgb(var(--schnee-500-rgb) / 0.22); }

/* ---------------------------------------------------------------------------
   1. Kopfband
   --------------------------------------------------------------------------- */
.card > .consumer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Akzentkante als echter Rand, nicht als Pseudoelement: so kann der
       Inhalt nie darunter rutschen. */
    border-left: 3px solid var(--vb-akzent);
    padding: 0.625rem 0.875rem 0.625rem 1rem;
    background-color: var(--vb-flaeche);
    cursor: pointer;
    transition: background-color var(--transition);
}

.card > .consumer-header:hover { background-color: var(--vb-flaeche); filter: brightness(0.985); }

:root[data-theme="dark"] .card > .consumer-header:hover { filter: brightness(1.15); }

.vb-kopf-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.vb-symbol {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background-color: var(--vb-akzent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
}

.vb-symbol svg { width: 1rem; height: 1rem; color: #fff; }

.vb-kopf-text { min-width: 0; }

/* Größenkontrast: der Name trägt die Zeile, die Kennzahl steht klein
   darunter, der Jahreswert ist darin das einzige Fette. */
.vb-titel {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vb-zusammenfassung {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.0625rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--color-text-muted);
}

.vb-wert { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--vb-text); }

.vb-werkzeuge { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }

.vb-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--vb-akzent);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.vb-knopf svg { width: 1rem; height: 1rem; }

.vb-knopf:hover {
    background-color: rgb(255 255 255 / 0.7);
    transform: translateY(-1px);
}

.vb-knopf-weg { color: var(--color-text-muted); }

.vb-knopf-weg:hover { color: var(--color-danger); }

/* Der Aufklapp-Pfeil trug überall die Leitfarbe: auf der roten Karte stand
   ein türkiser Knopf. Er folgt jetzt dem Ton der Karte. */
.card > .consumer-header > .vb-werkzeuge > .consumer-chevron {
    color: var(--color-text-muted);
    border-color: rgb(0 0 0 / 0.12);
    background: rgb(255 255 255 / 0.45);
}

.card > .consumer-header > .vb-werkzeuge > .consumer-chevron:hover,
.card > .consumer-header > .vb-werkzeuge > .consumer-chevron.rotate-180 {
    color: var(--vb-text);
    border-color: var(--vb-akzent);
    background: rgb(255 255 255 / 0.8);
}

:root[data-theme="dark"] .card > .consumer-header > .vb-werkzeuge > .consumer-chevron {
    border-color: rgb(255 255 255 / 0.18);
    background: rgb(255 255 255 / 0.06);
}

:root[data-theme="dark"] .card > .consumer-header > .vb-werkzeuge > .consumer-chevron:hover,
:root[data-theme="dark"] .card > .consumer-header > .vb-werkzeuge > .consumer-chevron.rotate-180,
:root[data-theme="dark"] .vb-knopf:hover { background: rgb(255 255 255 / 0.14); }

/* ---------------------------------------------------------------------------
   2. Eingabefläche
   --------------------------------------------------------------------------- */
.card > .consumer-content {
    padding: 1.25rem 1.125rem 1.375rem;
    background-color: var(--color-bg-white);
    border-top: 1px solid var(--color-border);
}

/* Das Aufklappen erklärt sich, wenn der Inhalt von oben hereinfährt. */
@keyframes vb-auffahren {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to   { opacity: 1; transform: none; }
}

.card > .consumer-content:not(.hidden) {
    animation: vb-auffahren 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .card > .consumer-content:not(.hidden) { animation: none; }
}

/* Rhythmus: zwischen Abschnitten deutlich mehr Luft als zwischen Feldern.
   Überall gleiche Abstände waren der Grund für die willkürliche Wirkung. */
.card > .consumer-content > :is(.vb-abschnitt, .vb-ableseband, .vb-hinweis, .vb-technik, .hinweis-restwaerme)
    + :is(.vb-abschnitt, .vb-ableseband, .vb-hinweis, .vb-technik, .hinweis-restwaerme) {
    margin-top: 1.5rem;
}

/* Gravierte Abschnittsmarke: Versalien, dann eine im Akzent auslaufende Linie. */
.vb-marke {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 0.875rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.vb-marke::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--vb-akzent), transparent);
    opacity: 0.45;
}

.vb-marke svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--vb-akzent);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   3. Ableseband - was das Modul gerechnet hat. Eingelassen statt aufgesetzt,
   damit sich das Ergebnis auch ohne Beschriftung von der Eingabe trennt.
   --------------------------------------------------------------------------- */
.vb-ableseband {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.875rem 1.75rem;
    padding: 0.875rem 1.125rem 0.9375rem;
    border-left: 3px solid var(--vb-akzent);
    border-radius: var(--radius);
    background-color: var(--color-bg-muted);
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.07);
}

/* Ein einzelner Leitwert (JAZ, SEER) steht neben seiner Erklärung. */
.vb-ableseband-leit {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
}

/* Beim Leitwert steht nur eine Marke, sie braucht keine Fluchtlinie. */
.vb-ableseband-leit .vb-ablese-marke { min-height: 0; }

/* Zwei Zeilen Platz, unten sitzend: so fluchten die Werte einer Reihe auch
   dann, wenn nur eine der Beschriftungen umbricht. */
.vb-ablese-marke {
    display: flex;
    align-items: flex-end;
    min-height: 1.9rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.vb-ablese-wert {
    margin-top: 0.1875rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    color: var(--vb-text);
}

.vb-ablese-wert-gross { font-size: 2rem; }

.vb-ablese-zusatz {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.vb-ablese-rechts { text-align: right; }

/* Bis die Simulation gelaufen ist, hängt window.estimateBadge() eine
   Schätzmarke an den Wert. Sie soll nicht mitfetten. */
.vb-ablese-wert .estimate-badge {
    font-weight: 500;
    letter-spacing: 0;
}

/* Hinweisband - Erklärungen und Schalter, die keine Eingabe sind */
.vb-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.9375rem;
    border-radius: var(--radius);
    border-left: 3px solid var(--vb-akzent);
    background-color: var(--vb-flaeche);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.vb-hinweis > svg {
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    color: var(--vb-akzent);
    flex-shrink: 0;
}

.vb-hinweis strong { color: var(--vb-text); }

.vb-hinweis-titel {
    display: block;
    font-weight: 600;
    color: var(--vb-text);
}

/* Hinweisband mit mehr als einer Zeile (Schalter plus Folgefeld). */
.vb-hinweis-block { display: block; }

.vb-hinweis-nachtrag { margin: 0.75rem 0 0 1.5rem; max-width: 18rem; }

/* Ankreuzfeld im Hinweisband: die ganze Fläche ist die Schaltfläche. */
.vb-hinweis-wahl {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
    margin: 0;
}

.vb-hinweis-wahl input[type="checkbox"] {
    margin-top: 0.1875rem;
    flex-shrink: 0;
    accent-color: var(--vb-akzent);
}

.vb-hinweis-text {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

/* Technische Details - eingeklappt, kein zweites Hauptthema */
.vb-technik > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    cursor: pointer;
    list-style: none;
    padding: 0.375rem 0;
    transition: color var(--transition);
}

.vb-technik > summary::-webkit-details-marker { display: none; }

.vb-technik > summary:hover { color: var(--vb-text); }

.vb-technik > summary svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

.vb-technik-inhalt { padding-top: 0.875rem; }

/* Kennwerte im Technikbereich: kleiner als im Ableseband, sie sind Nebensache. */
.vb-kennwerte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.125rem;
}

.vb-kennwert-marke {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.vb-kennwert-wert { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); }

/* Zeitraster (Anwesenheit, Verfügbarkeit) - Abschnitt mit eigener Kopfzeile */
.vb-raster-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.vb-raster-kopf .vb-marke {
    margin: 0;
    flex: 1 1 12rem;
}

.vb-raster-kopf .form-select,
.vb-raster-kopf select {
    width: auto;
    min-width: 12rem;
    flex: 0 1 auto;
}

.vb-legende {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.625rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.vb-legende > span { display: inline-flex; align-items: center; gap: 0.375rem; }

.vb-legende-feld { width: 0.875rem; height: 0.875rem; border-radius: 0.1875rem; flex-shrink: 0; }

/* Fokus in der Farbe der Karte - der Ring sagt, in welchem Gerät man tippt */
.card > .consumer-content .form-input:focus,
.card > .consumer-content .form-select:focus,
.card > .consumer-content .feld-block input:focus,
.card > .consumer-content .feld-block select:focus {
    border-color: var(--vb-akzent);
    box-shadow: 0 0 0 3px var(--vb-ring);
}

.card > .consumer-content .feld-block:focus-within > label {
    color: var(--vb-text);
}

/* Schmale Anzeigen: die Kopfzeile bleibt eng, das Ableseband darf umbrechen */
@media (max-width: 640px) {
    .card > .consumer-header {
        padding: 0.5rem 0.625rem 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    .card > .consumer-content {
        padding: 1rem 0.875rem 1.125rem;
    }

    .vb-symbol {
        width: 1.75rem;
        height: 1.75rem;
    }

    .vb-titel { font-size: 0.875rem; }

    .vb-zusammenfassung { font-size: 0.75rem; }

    .vb-ableseband {
        grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
        gap: 0.75rem 1rem;
    }

    .vb-ableseband-leit {
        grid-template-columns: 1fr;
    }

    .vb-ableseband-leit .vb-ablese-rechts {
        text-align: left;
    }

    .vb-ablese-wert-gross { font-size: 1.625rem; }
}

/* =============================================================================
   Wärmebedarf im Einrichtungs-Modal (.wb-*)

   Wärmepumpe und Heizstab fragen denselben Block ab: Energieträger, Grundlage
   der Rechnung, Menge, Ergebnis. Vorher stand er zweimal im Markup, jedes Mal
   in einer anderen Farbe (orange bzw. rot) und mit fest eingetragenen
   Tailwind-Klassen. Jetzt erzeugt ihn eine Funktion, das Aussehen steht hier.
   ============================================================================= */

.wb-einleitung {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    margin-bottom: 1.25rem;
    background: var(--color-bg-muted);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
}

.wb-einleitung svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.0625rem;
    color: var(--color-primary);
}

.wb-einleitung p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* Abschnittsmarke: kleine Versalien mit auslaufender Haarlinie, dieselbe
   Sprache wie die Marken auf den Verbraucherkarten. */
.wb-marke {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 0.875rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.wb-marke::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--color-border), transparent);
}

.wb-block > .wb-marke:first-child { margin-top: 0; }

/* Zahlenfeld mit nachgestellter Einheit. Die Einheit wechselt mit dem
   Energieträger (m³, Liter, kg, SRM, kWh) und braucht deshalb feste Breite,
   sonst springt das Feld daneben bei jedem Wechsel. */
.wb-mit-einheit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wb-mit-einheit input { flex: 1; min-width: 0; }

.wb-mit-einheit > span {
    flex-shrink: 0;
    min-width: 2.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Ergebniszeile: der errechnete Bedarf und der Knopf, der ihn übernimmt und
   gleich weiterschaltet. */
.wb-ergebnis {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding: 0.875rem 1rem;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.wb-ergebnis-marke {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.wb-ergebnis-wert {
    display: block;
    margin-top: 0.125rem;
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.wb-hinweis {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Ankreuzfeld mit Erläuterung und nachgeschaltetem Eingabefeld. */
.wb-schalter {
    margin-top: 1.5rem;
    padding: 0.875rem 1rem;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.wb-schalter > label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.wb-schalter > label > span {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.wb-schalter strong {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}

.wb-schalter strong + span {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.wb-schalter #setup-hr-historical-container {
    margin-top: 0.875rem;
    padding-left: 1.75rem;
}

.wb-schalter #setup-hr-historical-container .feld-block { max-width: 16rem; }

@media (max-width: 560px) {
    .wb-ergebnis { flex-direction: column; align-items: stretch; }
    .wb-ergebnis .btn { width: 100%; }
}

/* ===== 29-modul-tesla.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; }
}

/* ── 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;
}

/* ===== 30-modul-gebäude.css ===== */
/* =============================================================================
   16. MODUL: GEBÄUDE-EDITOR
   ============================================================================= */

#grundriss-canvas {
    cursor: crosshair;
    background-color: var(--color-bg-white);
    touch-action: none;
}

#grundriss-canvas.panning {
    cursor: grabbing !important;
}

#grundriss-canvas.pan-tool {
    cursor: grab;
}

.tool-button.active {
    /* Petrol-Token statt altem Tailwind-Indigo (#4f46e5) - gleiches Muster wie .btn-primary */
    background-color: var(--color-primary);
    color: var(--color-bg-white);
}

.snap-button.active {
    background-color: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-weight: 500;
}


/* ===== 31-modul-gerätekatalog.css ===== */
/* =============================================================================
   17. MODUL: GERÄTEKATALOG
   ============================================================================= */

/* Device Cards */
.device-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.device-card:hover {
    transform: translateY(-2px);
}

/* AI Suggested Fields */
.ai-suggested {
    border-color: #9333ea !important;
    background-color: #faf5ff !important;
}

.ai-loading {
    border-color: #a855f7 !important;
    background: linear-gradient(90deg, #faf5ff 0%, #f3e8ff 50%, #faf5ff 100%) !important;
    background-size: 200% 100% !important;
    animation: ai-shimmer 1.5s ease-in-out infinite;
}

@keyframes ai-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ai-indicator {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* PDF Viewer
   Die Flaeche ist bewusst dunkel: ein PDF steht auf ihr wie auf einer
   Leuchttischplatte. Sie liegt in der Insel des umgebenden .bg-gray-700 und
   muss deshalb die direkte Form rgb(var(--...-rgb)) verwenden. Über
   var(--color-text-secondary) kam der am :root bereits aufgelöste Wert an,
   und der dreht sich im Dunkelmodus mit: die linke Modalhälfte stand hell
   im ansonsten dunklen Fenster. */
#pdf-viewer-container {
    background: rgb(var(--schnee-700-rgb));
}

#pdf-pages-container {
    padding-bottom: 20px;
}

.pdf-page-wrapper {
    background: white;
    margin-bottom: 16px;
}

.pdf-page-canvas {
    display: block;
}

/* PDF Text Layer - enables text selection */
.pdf-text-layer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    opacity: 0.2;
    line-height: 1.0;
}

.pdf-text-layer > span {
    color: transparent;
    position: absolute;
    white-space: pre;
    pointer-events: all;
}

.pdf-text-layer > span::selection {
    background: rgba(0, 0, 255, 0.3);
}

.pdf-text-layer > span::-moz-selection {
    background: rgba(0, 0, 255, 0.3);
}

/* === Bühne des Anlegen-Fensters ===
   Geteilt wird erst, wenn es etwas zu teilen gibt: ohne Datenblatt standen
   zwei halbleere Spalten nebeneinander, eine davon nur mit dem Hinweis, man
   möge in der anderen etwas hochladen. */
.modal-buehne {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.buehne-dokument {
    display: flex;
    flex-direction: column;
    width: 50%;
    min-width: 0;
    border-right: 1px solid var(--color-border);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.buehne-auswertung {
    display: flex;
    flex-direction: column;
    width: 50%;
    min-width: 0;
    overflow: hidden;
}

.modal-buehne.ohne-datei .buehne-auswertung { display: none; }

.modal-buehne.ohne-datei .buehne-dokument {
    width: 100%;
    border-right: none;
}

/* === Ablagefläche ===
   Ein Ziel, das man sieht. Die Größen stufen sich bewusst: die Aufforderung
   trägt, der Satz darunter erklärt den Gewinn, der Knopf ist die zweite Wahl
   und die Adresszeile der Nebenweg. */
.ablage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    height: 100%;
    padding: 2rem;
}

.ablage-ziel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: min(34rem, 100%);
    padding: 3rem 2rem;
    border: 2px dashed rgb(var(--schnee-400-rgb) / 0.55);
    border-radius: 1.25rem;
    /* Eingelassen statt aufgesetzt: die Platte ist das Ziel, nicht eine
       weitere Karte auf der Fläche. */
    background: rgb(var(--schnee-900-rgb) / 0.35);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease;
}

.ablage-marke {
    width: 2.75rem;
    height: 2.75rem;
    color: rgb(var(--schnee-400-rgb));
}

.ablage-titel {
    margin: 0.35rem 0 0;
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: rgb(var(--weiss-rgb));
}

.ablage-satz {
    max-width: 26rem;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
    color: rgb(var(--schnee-300-rgb));
}

.ablage-waehlen {
    margin-top: 1rem;
    cursor: pointer;
}

/* Der Nebenweg bleibt einer: kleiner Satz, schmale Zeile, kein Wettbewerb
   mit der Ablagefläche darüber. */
.ablage-nebenweg {
    width: min(30rem, 100%);
    text-align: center;
}

.ablage-nebenweg-titel {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--schnee-400-rgb));
}

.ablage-nebenweg-zeile {
    display: flex;
    gap: 0.5rem;
}

.ablage-nebenweg-zeile .form-input { flex: 1; }

/* PDF Drag & Drop Zone */
.pdf-drop-zone {
    position: relative;
}

.pdf-drop-zone.drag-over .ablage-ziel {
    transform: scale(1.02);
    border-color: var(--color-primary);
}

.ablage-fang {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 2.5rem 3.5rem;
    border-radius: 1.25rem;
    background: rgb(var(--petrol-600-rgb) / 0.92);
    color: rgb(var(--weiss-rgb));
    font-size: 1.35rem;
    font-weight: 600;
}

.ablage-fang p { margin: 0; }

@media (max-width: 900px) {
    .ablage { gap: 1.5rem; padding: 1.25rem; }
    .ablage-ziel { padding: 2rem 1.25rem; }
    .ablage-titel { font-size: 1.2rem; }
}

.pdf-drop-zone.drag-over .drag-overlay {
    display: flex !important;
}

.pdf-drop-zone .drag-overlay {
    display: none;
}

/* Split View Resize Handle */
.split-handle {
    width: 4px;
    background: var(--color-border);
    cursor: col-resize;
    transition: background 0.2s;
}

.split-handle:hover {
    background: var(--color-primary);
}

/* Checkbox Grid Styling */
#inverter-fields label.flex.items-center,
#storage-fields label.flex.items-center {
    white-space: nowrap;
}

#inverter-fields .grid.grid-cols-2 label,
#storage-fields .grid.grid-cols-2 label {
    min-height: 24px;
    display: flex;
    align-items: center;
}

/* Scrollbar Styling for Modal */
#create-device-modal .overflow-y-auto::-webkit-scrollbar {
    width: 8px;
}

#create-device-modal .overflow-y-auto::-webkit-scrollbar-track {
    background: var(--color-bg);
}

#create-device-modal .overflow-y-auto::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 4px;
}

#create-device-modal .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-placeholder);
}


/* === Datenblatt-Ablage ===
   Die Ablage ist eine Werkbank: oben liegt die Datei, darunter laufen die
   Geraete ein, die aus ihr entstehen. Der Rhythmus ist bewusst ungleich -
   der Dateiname traegt, die Lagezeile ordnet sich unter, die Liste
   staffelt sich beim Erscheinen. Bewegt wird nur transform und opacity. */

.dropbox-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 1.75rem 1.5rem 1.25rem;
    background: linear-gradient(180deg, var(--color-primary-subtle) 0, var(--color-bg-white) 8rem);
}

.dropbox-kopf {
    position: relative;
    padding-bottom: 1.25rem;
}

.dropbox-dateiname {
    font-size: 1.35rem;
    font-weight: 650;
    line-height: 1.25;
    color: var(--color-text);
    word-break: break-word;
}

.dropbox-lagezeile {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Kein Fortschritt in Prozent: die Auswertung weiss selbst nicht, wie weit
   sie ist. Der Streifen sagt nur, dass gearbeitet wird. */
.dropbox-puls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--color-primary-soft);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.dropbox-puls-aktiv {
    opacity: 1;
}

.dropbox-puls span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 3px;
    background: var(--color-primary);
    transform: translateX(-100%);
}

.dropbox-puls-aktiv span {
    animation: dropbox-lauf 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes dropbox-lauf {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

.dropbox-liste {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem 0 0;
    list-style: none;
}

.dropbox-zeile {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
    opacity: 0;
    transform: translateY(0.5rem);
    animation: dropbox-einlauf 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--takt, 0) * 60ms);
}

@keyframes dropbox-einlauf {
    to { opacity: 1; transform: none; }
}

.dropbox-name {
    flex: 1;
    font-weight: 550;
    color: var(--color-text);
}

.dropbox-marke {
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--color-primary-border);
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-primary-text);
}

.dropbox-notiz {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.dropbox-knoepfe {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 640px) {
    .dropbox-panel { padding: 1.25rem 1rem 1rem; }
    .dropbox-dateiname { font-size: 1.1rem; }
}

/* ===== 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; }
}
@media (min-width: 900px) {
    .power-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .power-table th,
    .power-table td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@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;
}

/* ===== 35-modul-eab.css ===== */
/* =============================================================================
   EAB-Modul Styles
   ============================================================================= */
.eab-data-group { margin-bottom: 1rem; border-left: 3px solid var(--color-border); padding-left: 1rem; }
.eab-data-group-title { font-size: 1.125rem; font-weight: 700; color: var(--schnee-900); margin-bottom: 0.5rem; }
.eab-form-row { display: grid; grid-template-columns: 120px 1fr; gap: 0.5rem; align-items: baseline; padding: 0.25rem 0; }
.eab-form-label { color: var(--schnee-600); }
.eab-form-value { color: var(--color-text); }
.eab-status-icon { width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }
.eab-doc-action-btn { font-size: 0.875rem; background-color: var(--color-border); padding: 4px 12px; border-radius: 6px; transition: background-color 0.2s; }
.eab-doc-action-btn:hover { background-color: var(--color-border-strong); }

/* ===== 36-modul-eabv2.css ===== */
/* ===========================================================================
   EABv2-Modul (Energieautarker Bauernhof v2)
   =========================================================================== */

/* Formularfelder in eab2-Modalen und -Panels nie breiter als der Container -
   überlange Select-Optionen (Programmnamen) dürfen kein horizontales
   Scrollen erzeugen. Gilt auch für die Custom-Selects aus global-select.js
   (.cs-wrapper ist standardmäßig inline-block mit nowrap-Trigger). */
[id^="eab2-"] .gm-body .form-group .form-input,
#eabv2-container .form-group .form-input { width:100%; max-width:100%; }
[id^="eab2-"] .gm-body .form-group .cs-wrapper,
#eabv2-container .form-group .cs-wrapper { display:block; width:100%; max-width:100%; }
[id^="eab2-"] .gm-body .form-group .cs-trigger,
#eabv2-container .form-group .cs-trigger { width:100%; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
[id^="eab2-"] .gm-body { overflow-x:hidden; }

/* Modus-Umschalter im Anlege-Modal (Neuanlage / Altprojekt aus TOOL_EAB) */
.eab2-modus-schalter { display:flex; gap:.25rem; padding:.25rem; background:var(--color-bg); border-radius:.5rem; }
.eab2-modus-schalter button { flex:1; padding:.4rem .6rem; font-size:.8rem; font-weight:600; color:var(--color-text-muted); background:none; border:none; border-radius:.35rem; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eab2-modus-schalter button:hover { color:var(--schnee-900); }
.eab2-modus-schalter button.aktiv { background:var(--color-bg-white); color:var(--schnee-900); box-shadow:0 1px 2px rgba(0,0,0,.08); }

/* Klimaort-Suchliste (Dropdown unter dem Suchfeld) */
.eab2-suchliste { position:absolute; top:100%; left:0; right:0; z-index:30; background:var(--color-bg-white); border:1px solid var(--color-border-strong); border-radius:.4rem; box-shadow:0 8px 20px rgba(0,0,0,.12); max-height:16rem; overflow-y:auto; margin-top:.2rem; }
.eab2-suchtreffer { display:flex; width:100%; justify-content:space-between; gap:.5rem; padding:.4rem .7rem; font-size:.8rem; cursor:pointer; text-align:left; background:none; border:none; }
.eab2-suchtreffer:hover { background:var(--color-primary-subtle); }

/* Vorlagen-Katalog im Maßnahmen-Modal */
.eab2-katalog-eintrag { display:flex; width:100%; align-items:center; justify-content:space-between; gap:.75rem; padding:.6rem .8rem; border:1px solid var(--color-border); border-radius:.5rem; background:var(--color-bg-white); cursor:pointer; text-align:left; }
.eab2-katalog-eintrag:hover { background:var(--color-primary-subtle); border-color:var(--color-primary-border); }

/* Vorlagen-Verwaltung */
.eab2-vw-zeile { display:flex; align-items:center; gap:.5rem; padding:.5rem .6rem; border-bottom:1px solid var(--color-bg); }
.eab2-vw-zeile:last-child { border-bottom:none; }

/* GEK-Text-KI (Ausformulieren / Diktieren / Verbessern) im Maßnahmen-Editor */
.eab2-ki-aktionen { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.eab2-ki-btn { display:inline-flex; align-items:center; gap:.35rem; }
.eab2-ki-btn.aufnahme { background:var(--rot-50); color:var(--color-danger-hover); border-color:var(--color-danger-soft-hover); }
.eab2-ki-btn.aufnahme svg { animation:eab2-ki-puls 1.2s ease-in-out infinite; }
@keyframes eab2-ki-puls { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.eab2-ki-status { font-size:.75rem; color:var(--color-text-muted); }
.eab2-ki-status.busy { color:var(--color-primary-text); }
.eab2-ki-status.err { color:var(--color-danger-hover); }
.eab2-ki-vorschlag { margin-top:.5rem; padding:.6rem .7rem; border:1px solid var(--color-primary-soft-hover); border-radius:.5rem; background:var(--color-primary-subtle); }
.eab2-ki-vorschlag-titel { font-size:.75rem; font-weight:600; color:var(--color-primary-text); margin-bottom:.35rem; }

/* Energiefluss-Zeile im Maßnahmen-Editor */
.eab2-fluss-zeile { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.4rem .5rem; border:1px solid var(--color-border); border-radius:.4rem; background:var(--color-bg-muted); }
.eab2-richtung-toggle { font-size:.75rem; font-weight:600; padding:.3rem .6rem; border-radius:.4rem; border:1px solid transparent; cursor:pointer; white-space:nowrap; }
.eab2-richtung-toggle.einsparung { background:var(--gruen-50); color:var(--color-success-hover); border-color:#a7f3d0; }
.eab2-richtung-toggle.mehrverbrauch { background:var(--rot-50); color:var(--color-danger-hover); border-color:var(--color-danger-soft-hover); }

/* Umsetzen-Schalter (Toggle) */
.eab2-toggle { position:relative; display:inline-block; width:2.5rem; height:1.4rem; flex-shrink:0; }
.eab2-toggle input { opacity:0; width:0; height:0; }
.eab2-toggle-slider { position:absolute; inset:0; background:var(--color-border-strong); border-radius:999px; transition:background .15s; cursor:pointer; }
.eab2-toggle-slider::before { content:''; position:absolute; left:.2rem; top:.2rem; width:1rem; height:1rem; background:var(--color-bg-white); border-radius:50%; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.eab2-toggle input:checked + .eab2-toggle-slider { background:var(--color-success); }
.eab2-toggle input:checked + .eab2-toggle-slider::before { transform:translateX(1.1rem); }

/* Sortier-Pfeile in der Maßnahmen-Karte */
.eab2-sort-btn { display:flex; align-items:center; justify-content:center; width:1.4rem; height:1.1rem; border-radius:.25rem; color:var(--color-text-muted); background:none; border:none; cursor:pointer; }
.eab2-sort-btn:hover:not(:disabled) { background:var(--color-border); color:var(--schnee-900); }
.eab2-sort-btn:disabled { opacity:.3; cursor:default; }

/* Warnhinweise (Deckel, fehlende Mindest-Maßnahmen, unbekannte Träger) */
.eab2-warnung { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; background:var(--sonne-50); color:var(--color-warning-text); border:1px solid var(--color-warning-soft-hover); border-radius:.4rem; font-size:.8rem; }

/* Beschreibung, die mitten im Wort abbricht (gekürzter Altimport) */
.eab2-feld-angeschnitten { border-color:var(--color-warning-soft-hover); background:var(--sonne-50); }

/* Ergebnis-Tabellen (Förderung & Wirtschaftlichkeit) */
.eab2-tabelle { width:100%; font-size:.8rem; border-collapse:collapse; }
.eab2-tabelle th { text-align:left; font-weight:600; color:var(--color-text-muted); padding:.35rem .5rem; border-bottom:1px solid var(--color-border); white-space:nowrap; }
.eab2-tabelle th.text-right { text-align:right; }
.eab2-tabelle td { padding:.35rem .5rem; border-bottom:1px solid var(--color-bg); color:var(--schnee-700); }
.eab2-tabelle tfoot td { border-top:2px solid var(--color-border); border-bottom:none; }

/* Dokumente-Tab: Statuszeilen unter den Dokument-Karten */
.eab2-dok-status { display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:var(--schnee-700); padding:.25rem .4rem; background:var(--color-bg-muted); border:1px solid var(--color-border); border-radius:.35rem; }

/* Hinweis-Box oben in Dokumente-/Endabrechnungs-Tab (Mockup) */
.eab2-hinweis-box { display:flex; align-items:flex-start; gap:.6rem; padding:.7rem .9rem; background:var(--color-primary-subtle); border:1px solid var(--color-primary-soft-hover); border-radius:.5rem; font-size:.8rem; color:var(--petrol-900); /* Token statt #1e3a5f - blieb im Dunkelmodus dunkel auf dunkler Fläche */ }
.eab2-hinweis-box svg { color:var(--color-primary); }

/* Dokumente-Tab: Datei-Liste (Typ-Icon, Name, Meta, Aktionen) */
.eab2-dok-zeile { display:flex; align-items:center; gap:.75rem; padding:.6rem .4rem; border-bottom:1px solid var(--color-bg); flex-wrap:wrap; }
.eab2-dok-zeile:last-child { border-bottom:none; }
.eab2-dok-zeile.platzhalter { opacity:.75; background:var(--color-bg-muted); border-radius:.4rem; }
.eab2-dok-ikon { width:2.6rem; height:2rem; border-radius:.35rem; display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:800; letter-spacing:.02em; color:var(--color-bg-white); flex-shrink:0; }
.eab2-dok-ikon.docx { background:var(--color-primary); }
.eab2-dok-ikon.xlsx { background:var(--color-success); }
.eab2-dok-ikon.pdf { background:var(--color-danger); }
.eab2-dok-ikon.sonst { background:var(--color-text-muted); }
.eab2-dok-zeile.platzhalter .eab2-dok-ikon { background:var(--color-border-strong); }

/* Signatur-Stufen (Berater signiert / Kunde offen) */
.eab2-sig-stufe { display:inline-flex; align-items:center; gap:.25rem; font-size:.68rem; font-weight:600; padding:.1rem .5rem; border-radius:9999px; background:var(--color-bg); color:var(--color-text-muted); }
.eab2-sig-stufe.ok { background:var(--gruen-50); color:var(--color-success-hover); }

/* Endabrechnung: Umsetzungsstatus-Zeile je Maßnahme */
.eab2-ea-umsetzung { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; padding:.5rem .6rem; border:1px solid var(--color-border); border-radius:.4rem; background:var(--color-bg-muted); }
.eab2-ea-ist-input { width:7rem; }

/* --- Konzept-Tab (GEK-Block-Editor) ------------------------------------- */

/* Tab-Status-Punkte in der Workflow-Leiste */
.eab2-tstatus { width:.95rem; height:.95rem; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.eab2-tstatus svg { width:.6rem; height:.6rem; stroke:currentColor; }
.eab2-tstatus.fertig { background:var(--color-success); color:var(--color-bg-white); }
.eab2-tstatus.offen { background:var(--sonne-50); border:2px solid var(--color-warning-hover); }
.eab2-tstatus.grau { background:var(--color-bg); border:2px solid var(--color-border-strong); }
.eab2-tzaehler { background:var(--color-bg); border-radius:9999px; padding:.05rem .45rem; font-size:.65rem; color:var(--color-text-muted); }

/* Aktionen-Leiste oben */
.eab2-gek-aktionen { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.85rem; }
.eab2-gek-fuellstand { margin-left:auto; font-size:.8rem; color:var(--color-text-muted); }
.eab2-gek-fuellstand .offen { color:var(--color-warning-hover); }
.eab2-gek-kibtn { color:var(--gek-ki-text); border-color:var(--gek-ki-rand); }
.eab2-gek-kibtn:hover { background:var(--gek-ki-flaeche); }
.eab2-gek-kibtn.aufnahme { background:var(--rot-50); color:var(--color-danger-hover); border-color:var(--color-danger-soft-hover); }

/* Standardbeschreibung (lila Quellen-Panel) */
.eab2-gek-standardpanel { border-left:4px solid #7c3aed; margin-bottom:.85rem; }
.eab2-gek-standardkopf { display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; border-bottom:1px solid var(--color-border); flex-wrap:wrap; }
.eab2-gek-standardpanel.zu .eab2-gek-standardkopf { border-bottom:0; }
.eab2-gek-klapp { display:flex; align-items:center; justify-content:center; width:1.6rem; height:1.6rem; flex-shrink:0; border:0; background:transparent; color:var(--color-text-muted); border-radius:.35rem; cursor:pointer; }
.eab2-gek-klapp:hover { background:var(--color-bg-muted); color:var(--schnee-800); }
.eab2-gek-klapp svg { transition:rotate .15s ease; }
.eab2-gek-klapp.offen svg { rotate:90deg; }
.eab2-gek-standardtext { font-size:.85rem; color:var(--schnee-600); line-height:1.6; }
.eab2-gek-standardtext .leer { color:var(--color-text-placeholder); font-style:italic; }

/* Layout: sticky Gliederung + Papier */
.eab2-gek-layout { display:grid; grid-template-columns:250px 1fr; gap:1rem; align-items:start; }
@media (max-width:1100px) { .eab2-gek-layout { grid-template-columns:1fr; } }
.eab2-gek-gliederung { position:sticky; top:5.5rem; background:var(--color-bg-white); border:1px solid var(--color-border); border-radius:.6rem; box-shadow:0 1px 3px rgba(16,24,40,.08); padding:.6rem 0; max-height:calc(100vh - 7rem); overflow-y:auto; }
@media (max-width:1100px) { .eab2-gek-gliederung { position:static; max-height:none; } }
.eab2-gek-gliederung .gtitel { font-size:.65rem; font-weight:700; letter-spacing:.05em; color:var(--color-text-placeholder); text-transform:uppercase; padding:.2rem .9rem .5rem; }
.eab2-gek-gliederung a { display:flex; align-items:center; gap:.45rem; padding:.32rem .9rem; font-size:.78rem; color:var(--color-text-muted); text-decoration:none; border-left:3px solid transparent; }
.eab2-gek-gliederung a:hover { background:var(--color-bg-muted); color:var(--schnee-800); }
.eab2-gek-gliederung a.aktiv { color:var(--color-primary); border-left-color:var(--color-primary); background:var(--color-primary-subtle); font-weight:600; }
.eab2-gek-gliederung a.ebene2 { padding-left:1.7rem; }
.eab2-gek-gliederung a.ebene3 { padding-left:2.5rem; font-size:.74rem; }
.eab2-gek-gstatus { width:.45rem; height:.45rem; border-radius:9999px; flex-shrink:0; }
.eab2-gek-gstatus.fertig { background:var(--color-success); }
.eab2-gek-gstatus.muster { background:var(--color-warning-hover); }
.eab2-gek-gstatus.leer { background:var(--color-border-strong); }
.eab2-gek-gliederung .glegende { padding:.6rem .9rem .2rem; font-size:.68rem; color:var(--color-text-placeholder); display:flex; flex-direction:column; gap:.2rem; border-top:1px solid var(--color-border); margin-top:.5rem; }
.eab2-gek-gliederung .glegende span { display:flex; align-items:center; gap:.4rem; }

/* Papier (Word-Nachbildung) */
.eab2-gek-papier { background:var(--color-bg-white); border:1px solid var(--color-border); border-radius:4px; box-shadow:0 2px 14px rgba(16,24,40,.09); max-width:860px; margin:0 auto; padding:3rem 4rem; min-width:0; }
@media (max-width:768px) { .eab2-gek-papier { padding:1.25rem 1rem; } }
.eab2-gek-anker { scroll-margin-top:6rem; }

/* Schrift und Farben 1:1 aus der Word-Vorlage (blueprints/eabv2/data/
   gek_vorlage.docx, word/styles.xml). Die Papieransicht soll zeigen, wie das
   erzeugte Dokument aussieht - deshalb KEINE Design-Token, sondern die
   Vorlagenwerte:
     Standard        Arial 11 pt, automatisch (schwarz)
     Überschrift 1   14 pt fett, schwarz
     Überschrift 2   12 pt fett, schwarz
     Überschrift 3   11 pt fett, schwarz
     Titel           18 pt #808080, Univers 47 CondensedLight
     Untertitel      14 pt schwarz, Univers 55
   Umrechnung 1 pt = 1,333 px. Die Gliederung kennt nur die Ebenen 1 bis 3,
   die Vorlage-Stile "Überschrift 4/5" (grün #007E46 / #003E22) kommen im
   Konzept also nicht vor. Ändert sich die Vorlage, gehören die Werte hier
   nachgezogen. */
:root {
    --gek-schrift: Arial, Helvetica, sans-serif;
    --gek-schrift-titel: 'Univers 47 CondensedLight', 'Arial Narrow', Arial, sans-serif;
    --gek-farbe-text: #000000;
    --gek-farbe-titel: #808080;
    /* Hover über einem Block und das lila KI-Panel: im Dunkelmodus dürfen
       das keine hellen Flächen sein - die Schrift darauf bleibt hell. */
    --gek-hover-rand: #dbe2ec;
    --gek-hover-flaeche: #fcfdff;
    --gek-ki-flaeche: #f5f3ff;
    --gek-ki-rand: #d8b4fe;
    --gek-ki-text: #7c3aed;
}
.eab2-gek-papier, .eab2-gek-papier .eab2-gek-absatz { font-family:var(--gek-schrift); }
.eab2-gek-titel { font-family:var(--gek-schrift-titel); font-size:24px; font-weight:700; margin:.4rem 0 .1rem; color:var(--gek-farbe-titel); }
.eab2-gek-untertitel { font-size:18.7px; color:var(--gek-farbe-text); margin-bottom:1.4rem; }
.eab2-gek-h1 { font-size:18.7px; font-weight:700; margin:1.9rem 0 .2rem; color:var(--gek-farbe-text); }
.eab2-gek-h2 { font-size:16px; font-weight:700; margin:1.3rem 0 .1rem; color:var(--gek-farbe-text); }
.eab2-gek-h3, .eab2-gek-h4 { font-size:14.7px; font-weight:700; margin:1rem 0 .1rem; color:var(--gek-farbe-text); }
.eab2-gek-absatz { font-size:14.7px; line-height:1.65; color:var(--gek-farbe-text); margin:.5rem 0; overflow-wrap:anywhere; }
.eab2-gek-absatz.muster { color:var(--sonne-700); }
.eab2-gek-absatz.leer, .eab2-gek-absatz.fest { color:var(--color-text-placeholder); font-style:italic; }

/* Dunkelmodus: dasselbe Farbschema wie die Vorlage, nur aufgehellt - auf
   dunklem Papier wäre schwarze Schrift unlesbar und das Vorlagen-Grün zu
   dunkel. Der Farbton bleibt erhalten (Grau bleibt Grau, Grün bleibt Grün),
   die gedruckte Fassung entsteht ohnehin aus der Word-Vorlage selbst.
   Muss in DIESER Datei stehen: 02-grundstile.css läuft in der Kaskade
   vorher und könnte die Variablen nicht überschreiben. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --gek-farbe-text: #E8EDF2;
        --gek-farbe-titel: #A8B3BE;
        /* Gleicher Farbton wie in der Excel, nur abgedunkelt - reines Gelb
           auf dunklem Grund würde blenden. Schrift wird hell. */
        --eab-eingabe: #6B5D00;
        --eab-eingabe-rand: #9A8700;
        --eab-standard: #00506E;
        --eab-standard-rand: #0086B8;
        --eab-feldtext: #E8EDF2;
        --gek-hover-rand: #3A4653;
        --gek-hover-flaeche: #232B33;
        --gek-ki-flaeche: #2A2440;
        --gek-ki-rand: #5B4A8C;
        --gek-ki-text: #C4B5FD;
    }
}
:root[data-theme="dark"] {
    --gek-farbe-text: #E8EDF2;
    --gek-farbe-titel: #A8B3BE;
    --eab-eingabe: #6B5D00;
    --eab-eingabe-rand: #9A8700;
    --eab-standard: #00506E;
    --eab-standard-rand: #0086B8;
    --eab-feldtext: #E8EDF2;
    --gek-hover-rand: #3A4653;
    --gek-hover-flaeche: #232B33;
    --gek-ki-flaeche: #2A2440;
    --gek-ki-rand: #5B4A8C;
    --gek-ki-text: #C4B5FD;
}

/* Blöcke mit Hover-Werkzeugen */
.eab2-gek-block { position:relative; border-radius:.5rem; padding:.5rem .75rem; margin:.25rem -.75rem; border:1px solid transparent; }
.eab2-gek-block:hover { border-color:var(--gek-hover-rand); background:var(--gek-hover-flaeche); }
.eab2-gek-block.bearbeiten { border-color:var(--color-primary); background:var(--color-primary-subtle); }
.eab2-gek-block.fest:hover { border-color:transparent; background:none; }
.eab2-gek-block.ausgeblendet { display:flex; align-items:center; gap:.6rem; color:var(--color-text-placeholder); font-size:.75rem; background:var(--color-bg-muted); border:1px dashed var(--color-border-strong); padding:.35rem .75rem; }
.eab2-gek-werkzeuge { position:absolute; top:-.85rem; right:.5rem; display:none; gap:.15rem; background:var(--color-bg-white); border:1px solid var(--color-border); border-radius:.5rem; padding:.15rem .3rem; box-shadow:0 1px 3px rgba(16,24,40,.12); z-index:5; flex-wrap:wrap; }
.eab2-gek-block:hover .eab2-gek-werkzeuge,
.eab2-gek-block.bearbeiten .eab2-gek-werkzeuge { display:flex; }
.eab2-gek-wbtn { border:none; background:none; padding:.25rem .4rem; border-radius:.35rem; font-size:.7rem; font-weight:600; color:var(--color-text-muted); cursor:pointer; display:inline-flex; align-items:center; gap:.25rem; white-space:nowrap; }
.eab2-gek-wbtn:hover { background:var(--color-bg); color:var(--schnee-800); }
.eab2-gek-wbtn.ki { color:var(--gek-ki-text); }
.eab2-gek-wbtn.ki:hover { background:var(--gek-ki-flaeche); }
.eab2-gek-blocklabel { position:absolute; top:-.55rem; left:.6rem; font-size:.6rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.05rem .5rem; border-radius:9999px; display:none; max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; z-index:4; }
.eab2-gek-block:hover .eab2-gek-blocklabel,
.eab2-gek-block.bearbeiten .eab2-gek-blocklabel { display:inline-block; }
.eab2-gek-blocklabel.text { background:var(--color-bg); color:var(--color-text-muted); }
.eab2-gek-blocklabel.massnahme { background:var(--color-primary-subtle); color:var(--color-primary); }
.eab2-gek-blocklabel.tabelle { background:var(--gruen-50); color:var(--color-success); }
.eab2-gek-blocklabel.bild { background:var(--sonne-50); color:var(--color-warning-hover); }

/* Zahlen-Chips im Text */
.eab2-gek-zahl { background:var(--color-primary-subtle); color:var(--color-primary); border-bottom:1.5px solid var(--color-primary); padding:0 .2rem; border-radius:3px; font-weight:600; cursor:help; }
.eab2-gek-platzhalter { background:var(--sonne-50); color:var(--color-warning-hover); border-bottom:1.5px dashed var(--color-warning-hover); padding:0 .25rem; border-radius:3px; font-weight:600; cursor:pointer; }

/* Bearbeiten-Zustand + KI-Vorschlag */
.eab2-gek-textarea { width:100%; min-height:6rem; border:1px solid var(--color-border); border-radius:.5rem; padding:.6rem .75rem; font-family:inherit; font-size:.85rem; line-height:1.6; resize:vertical; background:var(--color-bg-white); }
.eab2-gek-editleiste { display:flex; gap:.45rem; margin-top:.5rem; align-items:center; flex-wrap:wrap; }
.eab2-gek-editleiste .rechts { margin-left:auto; display:flex; gap:.45rem; }
.eab2-gek-kivorschlag { border:1px solid var(--gek-ki-rand); background:var(--gek-ki-flaeche); border-radius:.5rem; padding:.75rem .9rem; margin-top:.5rem; }
.eab2-gek-kivorschlag .kopf { display:flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; color:var(--gek-ki-text); margin-bottom:.4rem; }
.eab2-gek-kivorschlag .eab2-gek-textarea { background:var(--color-bg-white); }

/* Häkchen "versendet" in den Aktionsleisten (Konzept, Dokumente) */
.eab2-versendet { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
    font-size:.78rem; color:var(--color-text-muted); padding:.25rem .6rem;
    border:1px solid var(--color-border); border-radius:.4rem; user-select:none; }
.eab2-versendet:hover { color:var(--color-text-secondary); background:var(--color-bg-muted); }
.eab2-versendet input { accent-color:var(--color-success); cursor:pointer; }
.eab2-versendet:has(input:checked) { color:var(--color-success); border-color:var(--color-success); }

/* Live-Tabellen / Grafik im Papier */
.eab2-gek-doktabelle { border:1px solid var(--color-border); border-radius:.5rem; overflow:hidden; margin:.6rem 0; }
.eab2-gek-quelle { display:flex; align-items:center; gap:.35rem; background:var(--gruen-50); color:var(--color-success); font-size:.68rem; font-weight:700; padding:.3rem .75rem; }
.eab2-gek-quelle.eigene { background:var(--color-bg-muted); color:var(--color-text-muted); }
.eab2-gek-quelle.leer { background:var(--color-bg-muted); color:var(--color-text-placeholder); }
.eab2-gek-doktabelle table { width:100%; border-collapse:collapse; font-size:.78rem; }
.eab2-gek-doktabelle th { background:var(--color-bg-muted); text-align:left; padding:.35rem .75rem; font-size:.68rem; color:var(--color-text-muted); border-bottom:1px solid var(--color-border); }
.eab2-gek-doktabelle td { padding:.35rem .75rem; border-bottom:1px solid var(--color-bg); color:var(--color-text-secondary); }
.eab2-gek-doktabelle td.r, .eab2-gek-doktabelle th.r { text-align:right; font-variant-numeric:tabular-nums; }
.eab2-gek-doktabelle td.c, .eab2-gek-doktabelle th.c { text-align:center; font-variant-numeric:tabular-nums; }
.eab2-gek-doktabelle tr:last-child td { border-bottom:none; }
.eab2-gek-doktabelle tr.summe td { font-weight:700; border-top:2px solid var(--color-border); background:var(--color-bg-muted); }
.eab2-gek-doktabelle tr.gruppe td { font-weight:700; background:var(--color-bg); color:var(--schnee-800); }
.eab2-gek-doktabelle tr.gruppe2 td { font-weight:700; background:var(--color-bg-muted); color:var(--color-text-secondary); }
.eab2-gek-doktabelle tr.kopf td { font-weight:700; background:var(--color-bg-muted); color:var(--color-text-muted); font-size:.68rem; border-top:2px solid var(--color-border); }
.eab2-gek-diagramm { padding:.85rem 1rem .6rem; }
.eab2-gek-balkenzeile { display:grid; grid-template-columns:minmax(90px,160px) 1fr 90px; gap:.6rem; align-items:center; font-size:.78rem; margin:.35rem 0; color:var(--color-text-secondary); }
.eab2-gek-balken { height:1.35rem; border-radius:.3rem; min-width:2px; }
.eab2-gek-balkenzeile .wert { text-align:right; font-variant-numeric:tabular-nums; color:var(--color-text-muted); }

/* Auswahlliste beim Einlesen eines bestehenden Konzepts */
.eab2-import-zeile { display:grid; grid-template-columns:1.1rem 1fr; gap:.5rem 0.6rem; align-items:start; padding:.5rem .25rem; border-bottom:1px solid var(--color-border); cursor:pointer; }
.eab2-import-zeile:last-of-type { border-bottom:none; }
.eab2-import-zeile .titel { font-size:.85rem; font-weight:600; color:var(--color-text-secondary); }
.eab2-import-zeile .auszug { grid-column:2; font-size:.75rem; color:var(--color-text-muted); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* Kreisdiagramm "Energieverbrauch IST-Stand" - Aufteilung wie in der
   Word-Vorlage; das Word-Bild entsteht aus denselben Werten. */
.eab2-gek-kreis { display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; padding:1rem; }
.eab2-gek-kreis .scheibe { width:11rem; height:11rem; border-radius:50%; flex:0 0 auto; }
.eab2-gek-kreis .legende { flex:1 1 14rem; min-width:0; }
.eab2-gek-kreis-legende { display:grid; grid-template-columns:.85rem 1fr auto auto; gap:.5rem; align-items:center; font-size:.78rem; margin:.3rem 0; color:var(--color-text-secondary); }
.eab2-gek-kreis-legende .kasten { width:.85rem; height:.85rem; border-radius:.15rem; }
.eab2-gek-kreis-legende .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eab2-gek-kreis-legende .wert,
.eab2-gek-kreis-legende .menge { font-variant-numeric:tabular-nums; text-align:right; color:var(--color-text-muted); }
.eab2-gek-kreis-legende .wert { font-weight:700; color:var(--color-text-secondary); }

/* Maßnahmen-Kennzahlen-Kasten */
.eab2-gek-kennzahlen { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px; background:var(--color-border); border:1px solid var(--color-border); border-radius:.5rem; overflow:hidden; margin:.6rem 0; }
.eab2-gek-kennzahlen div div { background:transparent; }
.eab2-gek-kennzahlen > div { background:var(--color-bg-muted); padding:.5rem .75rem; }
.eab2-gek-kennzahlen .l { font-size:.62rem; color:var(--color-text-placeholder); text-transform:uppercase; letter-spacing:.03em; font-weight:700; }
.eab2-gek-kennzahlen .w { font-size:.85rem; font-weight:700; margin-top:.1rem; color:var(--schnee-800); }

/* Bild-Block */
.eab2-gek-bildblock { border:1px solid var(--color-border); border-radius:.5rem; overflow:hidden; margin:.6rem 0; }
.eab2-gek-bildblock img { display:block; max-width:100%; }
.eab2-gek-bildplatz { min-height:10rem; background:linear-gradient(135deg,#e8f0e4 0%,#d3e6d0 45%,#b7d8c2 100%); display:flex; align-items:center; justify-content:center; color:#4d7c58; font-size:.8rem; gap:.5rem; cursor:pointer; }
.eab2-gek-bildunterschrift { padding:.4rem .75rem; font-size:.75rem; color:var(--color-text-muted); font-style:italic; border-top:1px solid var(--color-border); }

/* Bildauswahl: Fotos des Projekts als Raster. Die Karten tragen ein festes
   Seitenverhältnis, damit hoch- und quergeformte Handyfotos dieselbe
   Zeilenhöhe halten und das Raster beim Laden nicht springt. */
.eab2-bildwahl-raster { display:grid; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr)); gap:.7rem; max-height:60vh; overflow-y:auto; padding:.15rem; }
.eab2-bildwahl-karte { position:relative; display:flex; flex-direction:column; gap:.3rem; padding:0; border:2px solid var(--color-border); border-radius:.55rem; background:var(--color-bg-white); cursor:pointer; overflow:hidden; text-align:left; transition:border-color .12s, transform .12s; }
.eab2-bildwahl-karte:hover { border-color:var(--schnee-500); transform:translateY(-2px); }
.eab2-bildwahl-karte:focus-visible { outline:2px solid var(--schnee-600); outline-offset:2px; }
.eab2-bildwahl-karte img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--color-bg-muted); }
.eab2-bildwahl-karte .eab2-bildwahl-name { padding:0 .45rem .35rem; font-size:.66rem; color:var(--color-text-muted); word-break:break-all; line-height:1.25; }
.eab2-bildwahl-belegt { padding:0 .45rem .4rem; font-size:.62rem; font-weight:700; color:var(--sonne-700); }
.eab2-bildwahl-karte.ist-belegt { border-color:var(--sonne-300); }
.eab2-bildwahl-karte.ist-gewaehlt { border-color:var(--color-success-hover); opacity:.65; }

/* Einfügeleisten (dauerhaft sichtbar) + Einfüge-Menü */
.eab2-gek-plus { display:flex; align-items:center; gap:.6rem; margin:.3rem -.75rem; opacity:.45; transition:opacity .12s; }
.eab2-gek-plus:hover { opacity:1; }
.eab2-gek-plus .linie { flex:1; height:1px; background:#c7d6f5; }
.eab2-gek-plus:hover .linie { background:var(--color-primary); }
.eab2-gek-plus .menue { display:flex; gap:.3rem; flex-wrap:wrap; }
.eab2-gek-plus button { border:1px solid var(--color-primary); color:var(--color-primary); background:var(--color-primary-subtle); border-radius:9999px; font-size:.66rem; font-weight:700; padding:.1rem .65rem; cursor:pointer; }
.eab2-gek-plus button:hover { background:var(--color-primary-soft); }
.eab2-gek-einfuegemenue { border:1px solid var(--color-primary); border-radius:.6rem; background:var(--color-bg-white); box-shadow:0 6px 22px rgba(16,24,40,.12); padding:.75rem .85rem; margin:.35rem -.75rem; }
.eab2-gek-einfuegemenue .titel { font-size:.72rem; font-weight:700; color:var(--color-primary); margin-bottom:.5rem; }
.eab2-gek-einfuegemenue .tabliste { display:grid; grid-template-columns:1fr 1fr; gap:.25rem; }
@media (max-width:640px) { .eab2-gek-einfuegemenue .tabliste { grid-template-columns:1fr; } }
.eab2-gek-einfuegemenue .tabliste button { display:flex; align-items:center; gap:.4rem; border:1px solid var(--color-border); background:var(--color-bg-white); border-radius:.45rem; padding:.35rem .6rem; font-size:.72rem; cursor:pointer; text-align:left; color:var(--schnee-800); }
.eab2-gek-einfuegemenue .tabliste button:hover { border-color:var(--color-success); background:var(--gruen-50); }
.eab2-gek-einfuegemenue .tabliste .live { margin-left:auto; font-size:.6rem; font-weight:700; color:var(--color-success); }

/* Zwei Bilder nebeneinander: halbbreite Bild-Blöcke fließen in einer Zeile */
.eab2-gek-block[data-gek-breite="halb"] { display:inline-block; width:calc(50% - .45rem); vertical-align:top; }
.eab2-gek-block[data-gek-breite="halb"] + .eab2-gek-block[data-gek-breite="halb"] { margin-left:.7rem; }
@media (max-width:640px) { .eab2-gek-block[data-gek-breite="halb"] { display:block; width:100%; margin-left:0; } }

/* Bild per Drag-and-Drop: Ziel unter dem Zeiger hervorheben */
.eab2-gek-dropziel { position:relative; outline:2px dashed var(--color-primary); outline-offset:3px; border-radius:.5rem; }
.eab2-gek-plus.eab2-gek-dropziel { opacity:1; }
.eab2-gek-dropziel::after { content:""; position:absolute; inset:0; background:var(--color-primary-subtle); opacity:.35; pointer-events:none; border-radius:.5rem; }

/* Gliederungsmarken im Freitext ("Bereich Wärme:") */
.eab2-gek-absatz strong { font-weight:700; }

/* Eigene-Tabelle-Editor */
.eab2-gek-tabedit { width:100%; border-collapse:collapse; }
.eab2-gek-tabedit th, .eab2-gek-tabedit td { padding:.15rem; }

/* --- Maßnahmen & Förderung (Mockup: Excel-Farbsprache, Gruppen, Karten) -- */

/* Vorlagen-Katalog als Kacheln */
.eab2-katalog { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:.5rem; }
.eab2-katalog-kachel { border:1px solid var(--color-border); background:var(--color-bg-white); border-radius:.5rem; padding:.55rem .75rem; font-size:.78rem; font-weight:600; text-align:left; cursor:pointer; color:var(--schnee-800); }
.eab2-katalog-kachel span { display:block; font-size:.68rem; color:var(--color-text-placeholder); font-weight:400; margin-top:.1rem; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.eab2-katalog-kachel:hover { border-color:var(--color-primary); background:var(--color-primary-subtle); }
.eab2-katalog-kachel.frei { border-style:dashed; }

/* Handlungsfeld-Gruppenkopf mit Zwischensumme */
.eab2-hf-kopf { display:flex; align-items:center; gap:.6rem; margin:1.1rem 0 .55rem; }
.eab2-hf-kopf:first-child { margin-top:.25rem; }
.eab2-hf-titel { font-size:.85rem; font-weight:800; letter-spacing:.01em; color:var(--schnee-800); }
.eab2-hf-linie { flex:1; height:1px; background:var(--color-border); }
.eab2-hf-summe { font-size:.75rem; color:var(--schnee-600); }
.eab2-hf-summe b { color:var(--color-success-hover); }

/* Maßnahmen-Karten */
.eab2-mgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:.75rem; }
.eab2-mkarte { border:1px solid var(--color-border); border-radius:.6rem; background:var(--color-bg-white); padding:.85rem 1rem; box-shadow:0 1px 3px rgba(16,24,40,.08); }
.eab2-mkopf { display:flex; align-items:flex-start; gap:.5rem; }
.eab2-mkopf h4 { font-size:.85rem; font-weight:700; flex:1; min-width:0; color:var(--schnee-800); }
.eab2-mfuss { display:flex; gap:.85rem; margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--color-bg); font-size:.76rem; color:var(--schnee-600); flex-wrap:wrap; align-items:center; }
.eab2-mfuss b { color:var(--schnee-800); }
.eab2-maktionen { display:flex; align-items:center; gap:.4rem; margin-top:.6rem; justify-content:flex-end; }

/* Energiefluss-Pills (grün = Einsparung, rot = Mehrverbrauch) */
.eab2-fluss { display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem; font-weight:600; border-radius:9999px; padding:.12rem .55rem; margin:.1rem .2rem .1rem 0; }
.eab2-fluss.spart { background:var(--gruen-50); color:var(--color-success-hover); }
.eab2-fluss.mehr { background:var(--rot-50); color:var(--color-danger-hover); }
.eab2-fluss.neutral { background:var(--color-bg); color:var(--schnee-600); }
.eab2-fluss.topup { background:#f5f3ff; color:#7c3aed; }

/* Aufklappbare Förder-Herleitung (Satz x Menge = A, Deckel = B, min(A, B)) */
.eab2-herleitung { background:var(--color-bg-muted); border:1px dashed var(--color-border-strong); border-radius:.5rem; padding:.6rem .85rem; font-size:.76rem; margin-top:.5rem; }
.eab2-schrittz { display:flex; justify-content:space-between; gap:.75rem; padding:.16rem 0; color:var(--schnee-600); }
.eab2-schrittz b { color:var(--schnee-800); font-variant-numeric:tabular-nums; white-space:nowrap; }
.eab2-schrittz.ergebnis { border-top:1px solid var(--color-border); margin-top:.25rem; padding-top:.45rem; font-weight:700; color:var(--schnee-800); }
.eab2-aufklapp { color:var(--color-primary); font-size:.74rem; font-weight:600; cursor:pointer; background:none; border:none; padding:0; }
.eab2-aufklapp:hover { text-decoration:underline; }

/* Inline-Editor: Karte, Grid, Abschnittstitel */
.eab2-editor-karte { border-left:4px solid var(--color-primary); }
.eab2-editor-karte.frei { border-left-color:var(--color-warning-hover); }
.eab2-editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:1100px) { .eab2-editor-grid { grid-template-columns:1fr; } }
.eab2-editor-abschnittstitel { font-size:.72rem; font-weight:700; letter-spacing:.03em; color:var(--color-text-placeholder); text-transform:uppercase; margin-bottom:.55rem; }

/* Excel-Farbsprache: gelb = Eingabe, blau = Standardwert, grau = berechnet */
.eab2-in-gelb { background:var(--color-warning-soft) !important; border-color:var(--sonne-300) !important; }
.eab2-in-blau { background:var(--color-primary-soft) !important; border-color:var(--color-primary-border) !important; }
.eab2-in-grau { background:var(--color-bg-muted); color:var(--schnee-600); text-align:right; font-variant-numeric:tabular-nums; display:inline-block; min-width:6rem; }

/* Excel-Zeilen des Maßnahmen-Blocks */
.eab2-exzeilen { border:1px solid var(--color-border); border-radius:.5rem; overflow:hidden; margin-bottom:.6rem; }
.eab2-exzeile { display:grid; grid-template-columns:1fr 8.5rem 4.5rem; align-items:center; border-bottom:1px solid var(--color-bg); }
.eab2-exzeile:last-child { border-bottom:none; }
.eab2-exzeile .xl { padding:.35rem .7rem; font-size:.78rem; color:var(--schnee-800); min-width:0; }
.eab2-exzeile .xl .xk { color:var(--color-text-placeholder); font-size:.68rem; }
.eab2-exzeile .xw { padding:.15rem .3rem; min-width:0; }
.eab2-exzeile .xw input, .eab2-exzeile .xw select { width:100%; border:1px solid transparent; border-radius:.4rem; padding:.28rem .55rem; font-size:.78rem; text-align:right; font-variant-numeric:tabular-nums; font-family:inherit; background:var(--color-bg-white); }
.eab2-exzeile .xw select { text-align:left; }
/* Farbsprache 1:1 aus dem TOOL_EAB (Sheet ZFG): Gelb #FFFF00 markiert dort
   jede Eingabezelle, Blau #00B0F0 jeden Standardwert. Beide sind mit
   schwarzer Schrift klar lesbar (19,6:1 bzw. 8,5:1) - deshalb die
   Originaltöne statt gedämpfter Design-Token, damit der Berater dieselbe
   Farbsprache vorfindet wie in der Excel. */
:root {
    --eab-eingabe: #FFFF00;
    --eab-eingabe-rand: #D4C200;
    --eab-standard: #00B0F0;
    --eab-standard-rand: #0086B8;
    --eab-feldtext: #000000;
}
.eab2-exzeile.eingabe .xw input, .eab2-exzeile.eingabe .xw select { background:var(--eab-eingabe); border-color:var(--eab-eingabe-rand); color:var(--eab-feldtext); }
.eab2-exzeile.standard .xw input, .eab2-exzeile.standard .xw select { background:var(--eab-standard); border-color:var(--eab-standard-rand); color:var(--eab-feldtext); }
.eab2-exzeile .xe { padding:.35rem .6rem .35rem 0; font-size:.7rem; color:var(--color-text-placeholder); text-align:left; }
.eab2-exzeile.berechnet, .eab2-exzeile.ergebnis { background:var(--color-bg-muted); }
.eab2-exzeile.berechnet .xw { text-align:right; padding-right:.85rem; font-size:.78rem; font-variant-numeric:tabular-nums; color:var(--schnee-600); }
.eab2-exzeile.ergebnis .xl { font-weight:700; }
.eab2-exzeile.ergebnis .xw { text-align:right; padding-right:.85rem; font-weight:700; font-size:.8rem; font-variant-numeric:tabular-nums; color:var(--schnee-800); }

/* Teilmaßnahmen-Abschnitt mit Ja/Nein-Schalter */
.eab2-exabschnitt { display:flex; align-items:center; gap:.6rem; padding:.45rem .7rem; background:var(--color-bg); border-bottom:1px solid var(--color-border); font-weight:700; font-size:.78rem; color:var(--schnee-800); }
.eab2-exabschnitt select { border:1px solid var(--sonne-300); background:var(--color-warning-soft); border-radius:.4rem; padding:.18rem .55rem; font-size:.74rem; font-weight:700; font-family:inherit; margin-left:auto; cursor:pointer; }

/* Legende zur Farbsprache */
.eab2-exlegende { display:flex; gap:.85rem; font-size:.68rem; color:var(--color-text-placeholder); margin-top:.2rem; align-items:center; flex-wrap:wrap; }
.eab2-exlegende .kaestchen { display:inline-block; width:.7rem; height:.7rem; border-radius:.2rem; margin-right:.25rem; vertical-align:-.1rem; }
.eab2-exlegende .kaestchen.gelb { background:var(--eab-eingabe); border:1px solid var(--eab-eingabe-rand); }
/* Legende: dieses Kästchen steht für "Standardwert aus der Vorlage", die
   Beschriftung nennt keine Farbe - der Klassenname ist nur ein Etikett. */
.eab2-exlegende .kaestchen.blau { background:var(--eab-standard); border:1px solid var(--eab-standard-rand); }
.eab2-exlegende .kaestchen.grau { background:var(--color-bg-muted); border:1px solid var(--color-border); }

/* Energieflüsse im Editor: Zeilen + Richtungs-Toggle + Auto/Manuell-Pill */
.eab2-fluss-zeile2 { display:flex; align-items:center; gap:.5rem; padding:.4rem 0; border-bottom:1px solid var(--color-bg); flex-wrap:wrap; }
.eab2-fluss-zeile2:last-child { border-bottom:none; }
.eab2-richtung-toggle2 { display:flex; border:1px solid var(--color-border); border-radius:.45rem; overflow:hidden; flex-shrink:0; }
.eab2-richtung-toggle2 button { border:none; background:var(--color-bg-white); padding:.22rem .6rem; font-size:.68rem; font-weight:700; cursor:pointer; color:var(--color-text-placeholder); }
.eab2-richtung-toggle2 button:disabled { cursor:default; }
.eab2-richtung-toggle2 button.spart { background:var(--gruen-50); color:var(--color-success-hover); }
.eab2-richtung-toggle2 button.mehr-aktiv { background:var(--rot-50); color:var(--color-danger-hover); }
.eab2-auto-schalter { display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; color:var(--color-success-hover); background:var(--gruen-50); border:1px solid #a7f3d0; border-radius:9999px; padding:.18rem .7rem; font-weight:600; cursor:pointer; }
.eab2-auto-schalter.manuell { background:var(--sonne-50); border-color:var(--sonne-300); color:var(--sonne-700); }
.eab2-auto-schalter:disabled { cursor:default; }

/* ===== 37-modul-akquise.css ===== */
/* =============================================================================
   AKQUISE-MODUL LAYOUT (3-Spalten: Kalender | Haupt | KI)
   Identisches Pattern wie #dachplaner-container
   ============================================================================= */
body.akquise-module {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0;
    padding: 0;
    position: fixed !important;
    width: 100%;
}
body.akquise-module > div.min-h-full {
    min-height: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}
body.akquise-module main {
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}
body.akquise-module main > div {
    padding: 0 !important;
    margin: 0 !important;
    height: 100%;
}
#akquise-layout {
    position: fixed;
    top: 145px; /* Fallback, wird per JS auf exakte Header-Unterkante korrigiert */
    left: 0;
    right: 0;
    bottom: 0;
    height: auto !important;
    overflow: hidden !important;
}
#akquise-sidebar-left,
#akquise-sidebar-right {
    height: 100%;
    overflow: hidden;
}
/* Sidebars brauchen position:relative für den Resize-Handle */
#akquise-sidebar-left,
#akquise-sidebar-right {
    position: relative;
}

/* ===== 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); }

.gp-tipp {
    position: absolute;
    top: 50%;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    border-radius: 50%;
    background: rgb(255 255 255 / .10);
    font-size: 15px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 5;
}
.gp-tipp-links { left: 0; }
.gp-tipp-rechts { right: 0; }
.gp-tipp.gp-puls { animation: gp-puls .5s var(--gp-kurve); }

@keyframes gp-puls {
    0%   { opacity: 0; transform: translateY(-50%) scale(.9); }
    35%  { opacity: 1; transform: translateY(-50%) scale(1); }
    100% { opacity: 0; transform: translateY(-50%) scale(1.04); }
}

/* === 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; }
}

/* === 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; }
    .gp-tipp.gp-puls { animation: none; opacity: 1; }
    .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: 120px; /* per JS auf tatsächliche Header-Höhe gesetzt */
    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; }

/* ===== 40-modul-u-wert.css ===== */
/* ============================================================ */
/* U-Wert-Modul                                                 */
/* ============================================================ */

/* Schicht-Editor */
.uw-layer-row { border:1px solid var(--color-border); border-radius:.5rem; padding:.6rem .7rem; margin-bottom:.5rem; background:var(--color-bg-white); transition:border-color .15s; }
.uw-layer-row:hover { border-color:var(--color-text-placeholder); }
.uw-layer-nr { display:inline-flex; align-items:center; justify-content:center; width:1.35rem; height:1.35rem; border-radius:9999px; background:var(--color-bg); color:var(--schnee-600); font-size:.7rem; font-weight:700; flex:0 0 auto; }
.uw-color-chip { display:inline-block; width:.9rem; height:.9rem; border-radius:.2rem; border:1px solid; flex:0 0 auto; }
.uw-mini-field { display:flex; flex-direction:column; gap:.1rem; }
.uw-mini-field > span { font-size:.62rem; color:var(--color-text-placeholder); text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; }
.uw-mini-field input, .uw-mini-field select { width:5.2rem; padding:.2rem .35rem; font-size:.78rem; }
.uw-mini-field select { width:auto; min-width:6rem; }

/* Inhomogene Abschnitte (Gefach) */
.uw-sections { margin-top:.5rem; padding:.5rem .6rem; background:var(--sonne-50); border:1px dashed var(--sonne-400); border-radius:.4rem; }
.uw-section-row { display:flex; align-items:center; gap:.4rem; margin-bottom:.25rem; }
.uw-section-row input.uw-sec-frac { width:3.6rem; padding:.15rem .3rem; font-size:.75rem; }
.uw-section-row input.uw-sec-lambda { width:4.4rem; padding:.15rem .3rem; font-size:.75rem; }

/* Material-Picker */
.uw-mp-results { max-height:52vh; overflow-y:auto; border:1px solid var(--color-border); border-radius:.4rem; }
.uw-mp-row { display:flex; align-items:center; gap:.75rem; padding:.45rem .7rem; cursor:pointer; border-bottom:1px solid var(--color-bg); }
.uw-mp-row:hover { background:var(--color-primary-subtle); }
.uw-mp-row:last-child { border-bottom:none; }

/* Standort-Dropdown */
.uw-location-dropdown { position:absolute; top:100%; left:0; right:0; z-index:30; background:var(--color-bg-white); border:1px solid var(--color-border-strong); border-radius:.4rem; box-shadow:0 8px 20px rgba(0,0,0,.12); max-height:16rem; overflow-y:auto; margin-top:.2rem; }
.uw-location-item { display:flex; justify-content:space-between; gap:.5rem; padding:.4rem .7rem; font-size:.8rem; cursor:pointer; }
.uw-location-item:hover { background:var(--color-primary-subtle); }

/* KPI + Detailtabellen */
#uw-kpi-u-card.uw-kpi-bad { border-color:var(--rot-300); background:var(--rot-50); }
.uw-detail-table { width:100%; font-size:.8rem; border-collapse:collapse; }
.uw-detail-table th { text-align:left; font-weight:600; color:var(--color-text-muted); padding:.3rem .5rem; border-bottom:1px solid var(--color-border); }
.uw-detail-table td { padding:.3rem .5rem; border-bottom:1px solid var(--color-bg); color:var(--schnee-700); }
.uw-detail-table tr:last-child td { border-bottom:none; }


/* ===== 41-modul-ems.css ===== */
/* ==================== EMS Steuerungs-Karten (Reserve / Peak-Shaving / Clipping) ==================== */

.ems-karte { padding: 0; overflow: hidden; }
.ems-karte-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem 1rem .75rem; flex-wrap: wrap; }
.ems-karte-titel { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1 1 240px; }
.ems-karte-titel .titelzeile { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ems-karte-titel p { margin: 0; }
.ems-karte-sub { font-size: .78rem; color: var(--color-text-muted); margin-top: .1rem !important; overflow-wrap: anywhere; }

/* Der Icon-Avatar links stand früher hier. Er ist jetzt global als
   .icon-plakette in 04-abzeichen.css - dieses Modul war das Vorbild, und
   Martin wollte das Format überall. .ems-icon-badge läuft dort als Zweitname
   mit, das Markup hier bleibt deshalb unverändert gültig. Neue Module
   nehmen .icon-plakette. */

/* Aktionsleiste rechts: Switch + Icon-Buttons */
.ems-karte-aktionen { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; margin-left: auto; }
.ems-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; border: 1px solid var(--color-border); background: var(--color-bg-white); color: var(--color-text-muted); cursor: pointer; transition: all .15s ease; }
.ems-btn svg { width: .95rem; height: .95rem; }
.ems-btn:hover { color: var(--color-primary-text); border-color: var(--color-primary-soft-hover); background: var(--color-primary-subtle); }
.ems-btn.gefahr:hover { color: var(--color-danger-hover); border-color: var(--color-danger-soft-hover); background: var(--rot-50); }
.ems-btn.aktiv-an { color: var(--color-primary-text); border-color: var(--color-primary-soft-hover); background: var(--color-primary-subtle); }

/* Schalter (aktiv/inaktiv) */
.ems-switch { position: relative; display: inline-block; width: 2.35rem; height: 1.3rem; flex-shrink: 0; cursor: pointer; }
.ems-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ems-switch .bahn { position: absolute; inset: 0; border-radius: 9999px; background: var(--color-border-strong); transition: background .18s ease; }
.ems-switch .bahn::after { content: ''; position: absolute; top: .15rem; left: .15rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--color-bg-white); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .18s ease; }
.ems-switch input:checked + .bahn { background: var(--color-success); }
.ems-switch input:checked + .bahn::after { transform: translateX(1.05rem); }
.ems-switch input:focus-visible + .bahn { outline: 2px solid var(--color-primary-border); outline-offset: 2px; }

/* Kennzahlen-Kacheln */
.ems-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; padding: 0 1rem 1rem; }
@media (min-width: 768px) { .ems-stats { grid-template-columns: repeat(4, 1fr); } .ems-stats.dreier { grid-template-columns: repeat(3, 1fr); } }
.ems-stat { background: var(--color-bg-muted); border: 1px solid var(--color-bg); border-radius: .6rem; padding: .5rem .65rem; min-width: 0; }
.ems-stat .label { font-size: .68rem; color: var(--color-text-placeholder); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ems-stat .wert { font-size: .95rem; font-weight: 700; color: var(--color-text); margin: 0; font-variant-numeric: tabular-nums; }
.ems-stat .wert.lila { color: #6d28d9; }
.ems-stat .wert.rot { color: var(--color-danger-hover); }
.ems-stat .wert.gruen { color: var(--color-success-hover); }

/* Hinweiszeile (Passiv-Grund) + ausklappbarer Verlauf */
.ems-hinweis { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--color-text-muted); padding: 0 1rem .75rem; margin: 0; }
.ems-hinweis svg { width: .85rem; height: .85rem; flex-shrink: 0; color: var(--color-text-placeholder); }
.ems-detail { border-top: 1px solid var(--color-bg); padding: .85rem 1rem 1rem; background: #fcfdfe; }

/* Sektions-Header (Titel + Add-Button) mobil stapelbar */
.ems-sektion-kopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ems-sektion-kopf .beschreibung { min-width: 0; flex: 1 1 260px; }

@media (max-width: 640px) {
    .ems-karte-kopf { padding: .8rem .8rem .6rem; }
    .ems-stats { padding: 0 .8rem .8rem; }
    .ems-detail { padding: .7rem .8rem .8rem; }
    .ems-hinweis { padding: 0 .8rem .6rem; }
    .ems-karte-aktionen { width: 100%; justify-content: flex-end; border-top: 1px dashed var(--color-border); padding-top: .55rem; }

    /* Modal-Formulare einspaltig (Reserve / Peak-Shaving / Clipping) */
    #reserve-modal .grid-cols-2, #reserve-modal .grid-cols-3,
    #shaving-modal .grid-cols-2, #shaving-modal .grid-cols-3,
    #clipping-modal .grid-cols-2, #clipping-modal .grid-cols-3 { grid-template-columns: 1fr; }
}

/* ==================== EMS Energiefluss-Diagramm (Live-Tab) ==================== */
.ems-flow-umschalter { display: inline-flex; gap: .25rem; padding: .25rem; background: var(--color-bg-muted); border-radius: .55rem; }
.ems-flow-umschalter button { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; font-size: .8rem; font-weight: 600; color: var(--color-text-muted); background: none; border: none; border-radius: .4rem; cursor: pointer; transition: all .15s ease; white-space: nowrap; }
.ems-flow-umschalter button svg { width: .9rem; height: .9rem; }
.ems-flow-umschalter button:hover { color: var(--color-text); }
.ems-flow-umschalter button.aktiv-an { background: var(--color-bg-white); color: var(--color-primary); box-shadow: var(--shadow); }
.ems-flow-karte { padding: .75rem; background: radial-gradient(circle at 50% 42%, var(--color-bg-white) 0%, var(--color-bg-muted) 70%, var(--color-bg) 100%); }
.ems-flow-svg { display: block; width: 100%; height: auto; max-height: 78vh; }
.ems-flow-svg .flow-kreis { filter: drop-shadow(0 2px 5px rgba(16,24,40,.10)); }
.ems-flow-svg .flow-kante { transition: opacity .4s; }
.ems-flow-svg .flow-knoten { transition: opacity .4s; }
@media (max-width: 640px) {
    .ems-flow-svg { max-height: none; }
    .ems-flow-karte { padding: .35rem; }
}

/* ─────────────────────────────────────────────────────────────
   Sonnenstand-Leiste der 3D-Ansicht auf schmalen Geräten
   ─────────────────────────────────────────────────────────────
   Die Leiste ist per flex-nowrap konstruktiv einzeilig. Unterhalb von
   rund 520 px passen Datum und Sonnenstands-Anzeige nicht mehr daneben -
   sie entfallen, damit Wiedergabe und Zeitregler bedienbar bleiben, statt
   abgeschnitten zu werden. Bewusst NICHT im 768-px-Block des Moduls: Dort
   ist reichlich Platz, das Datum soll dort erhalten bleiben. */
@media (max-width: 520px) {
    #sun-date,
    #sun-info {
        display: none !important;
    }
    #sun-time {
        min-width: 90px !important;
    }
}

/* ===== 42-ki-chat.css ===== */
/* ── 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;
}

/* ===== 44-modul-dach-v4.css ===== */
/* =============================================================================
   DACHFLÄCHEN-ERKENNUNG V4 - Assistent über die ganze Liegenschaft

   Warum eigene Klassen statt Tailwind-Utilities: Das Raster braucht
   `grid-template-columns` mit einem minmax()-Wert. Solche Werte entstehen bei
   Tailwind nur, wenn der Scanner die Klasse wörtlich im Quelltext findet -
   in einem JavaScript-Template-String tut er das nicht zuverlässig. Die
   Folge war ein Modal, das die beiden Spalten untereinander gestellt hat.

   Zweite Regel hier: In diesem Modal scrollt nur die Gebäudeliste. Der
   Rahmen selbst steht fest, damit die Vorschau immer vollständig sichtbar
   bleibt - sie ist der eigentliche Grund, warum jemand das Modal öffnet.
   ============================================================================= */

/* Der Modalkörper scrollt in diesem Assistenten nicht - er gibt seine Höhe an
   das Raster weiter. `height: 100%` allein reicht dafür nicht: Der Körper ist
   selbst ein Flex-Element ohne feste Höhe, und ein Prozentwert hätte darin
   keinen Bezug. */
.gm-body.dachv4-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dachv4-body > .dachv4-raster {
    flex: 1 1 auto;
}

.dachv4-raster {
    display: grid;
    /* Links so breit, dass "Gebäude 3 · 184 m² Grundfläche" in eine Zeile
       passt; alles Übrige gehört der Vorschau. */
    grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr);
    gap: 1rem;
    height: 100%;
    min-height: 0;
}

/* Unter dieser Breite ist die Vorschau neben der Liste zu schmal, um ein
   Grundstück noch zu erkennen - erst dort wird gestapelt. */
@media (max-width: 60rem) {
    .dachv4-raster {
        grid-template-columns: minmax(0, 1fr);
        /* Nicht `auto` für die Liste: Bei zwölf Gebäuden zöge sie sich auf
           ihre volle Höhe und die Vorschau bekäme nichts mehr ab. Gedeckelt
           auf 40 % scrollt stattdessen die Liste. */
        grid-template-rows: minmax(0, 40%) minmax(0, 1fr);
    }
}

.dachv4-liste {
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dachv4-buehne {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Die Leinwand liegt absolut in dieser Hülle. Ohne das wächst ein Canvas mit
   seinem Inhalt und schiebt das Modal auf - genau der Scrollbalken, der hier
   nicht auftreten soll. */
.dachv4-bild {
    position: relative;
    flex: 1 1 auto;
    min-height: 12rem;
    border-radius: var(--gm-radius, 0.75rem);
    overflow: hidden;
    border: 1px solid var(--gm-border);
    /* Dunkler Grund: Das Orthofoto lädt kachelweise nach, und auf Weiß
       blitzen die noch fehlenden Kacheln unangenehm auf. */
    background: #16202c;
}

.dachv4-bild canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.dachv4-hinweis {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* --- Gebäudezeile ------------------------------------------------------- */

.dachv4-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gm-border);
    border-radius: 0.5rem;
    cursor: default;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.dachv4-zeile:hover {
    border-color: var(--color-primary);
    background: var(--gm-bg-subtle);
}

.dachv4-zeile.ist-abgewaehlt {
    opacity: 0.5;
}

.dachv4-punkt {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.dachv4-zeile-text {
    min-width: 0;
    flex: 1 1 auto;
}

.dachv4-zeile-titel {
    font-size: 0.875rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dachv4-zeile-unter {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== 45-standort-gefahren.css ===== */
/* =============================================================================
   STANDORT UND NATURGEFAHREN

   Kompaktes Kärtchen in der Seitenleiste des Dachflächen-Moduls, das die
   HORA-Kennwerte des Projektstandorts zeigt. Eigener Teil statt Anbau an
   27-modul-dachfläche.css, weil dieselben Klassen später auch in der
   Verschaltung und im Gerätekatalog gebraucht werden.

   Alle Farben über Token, damit der Dunkelmodus ohne Zweitpflege mitläuft.
   ============================================================================= */

.standort-box {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-bg-muted);
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.standort-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-secondary);
    list-style: none;
}

.standort-kopf::-webkit-details-marker {
    display: none;
}

/* Der Aufklapp-Pfeil steht vor dem Titel und dreht sich beim Öffnen.
   transform, damit nur der Kompositor arbeitet. */
.standort-kopf::before {
    content: '';
    flex: 0 0 auto;
    width: 0;
    height: 0;
    margin-right: 0.375rem;
    border-left: 0.3rem solid currentColor;
    border-top: 0.25rem solid transparent;
    border-bottom: 0.25rem solid transparent;
    transform-origin: 0.12rem 50%;
    transition: transform 0.15s ease;
}

.standort-box[open] > .standort-kopf::before {
    transform: rotate(90deg);
}

.standort-kopf > span:first-of-type {
    flex: 1 1 auto;
}

/* Die Seehöhe ist Beiwerk, nicht der Kennwert - deshalb leiser gesetzt. */
.standort-seehoehe {
    flex: 0 0 auto;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.standort-werte {
    margin: 0.5rem 0 0;
    display: grid;
    gap: 0.25rem;
}

.standort-zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.125rem 0;
    border-bottom: 1px solid var(--color-border);
}

.standort-zeile:last-child {
    border-bottom: none;
}

.standort-zeile dt {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.standort-zeile dd {
    margin: 0;
    text-align: right;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Der Zusatz nennt den Bezug, etwa den Referenzort oder die Wiederkehrzeit.
   Er darf den Zahlenwert nicht überstrahlen. */
.standort-zusatz {
    color: var(--color-text-placeholder);
    font-size: 0.75rem;
}

/* Fehlender Wert. Bewusst zurückhaltend und NICHT rot: Eine Lücke in der
   Datengrundlage ist keine Gefahrenmeldung. */
.standort-leer {
    color: var(--color-text-placeholder);
    font-style: italic;
}

.standort-quelle {
    margin: 0.5rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--color-text-placeholder);
}

.standort-laedt,
.standort-hinweis,
.standort-fehler {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.standort-fehler {
    color: var(--color-danger, #dc2626);
}

/* ===== 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; }
}