/* =============================================================
   RUNIC DESIGN SYSTEM – Unified Entry Point

   Lädt DS 2.0 Token-Layer + Komponenten und stellt
   Rückwärtskompatibilität für alle v1-Token-Namen bereit.
   Bestehender Code läuft ohne Änderungen weiter.

   Ladereihenfolge:
     1. DS 2.0 Tokens (Farben, Spacing, Typografie, Effects)
     2. DS 2.0 Komponenten (Button, Card, Form, Modal)
     3. Base-Reset
     4. Projekt-spezifische Tokens (Extras)
     5. V1-Kompatibilitäts-Aliase
   ============================================================= */

/* ── LAYER 1: DS 2.0 TOKENS ──────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   COLOR TOKENS – Design System 2.0
   HSL-basierte Farbverwaltung für konsistente Themes
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── PRIMITIVE HUES (Farbton-Werte) ───────────────────────── */
    /* Diese Werte werden von Themes überschrieben */
    --hue-primary:   120;     /* Grün (Default) */
    --hue-accent:    120;     /* Grün (Default, kann abweichen) */
    --hue-gm:        280;     /* Lila */
    --hue-danger:    0;       /* Rot */
    --hue-warning:   30;      /* Orange */
    --hue-success:   145;     /* Grün */
    --hue-toxicity:  108;     /* Toxizität */
    --hue-info:      200;     /* Blau */
    --hue-neutral:   220;     /* Blau-Stich für neutrale Farben */

    /* ── SÄTTIGUNG & HELLIKEIT (konsistente Basis) ────────────── */
    --sat-primary:   50%;
    --lit-primary:   45%;
    --lit-primary-hover: 52%;

    --sat-accent:    60%;
    --lit-accent:    50%;
    --lit-accent-hover: 57%;

    --sat-gm:        65%;
    --lit-gm:        45%;
    --lit-gm-text:   70%;

    --sat-danger:    85%;
    --lit-danger:    60%;
    --lit-danger-hover: 50%;

    --sat-warning:   90%;
    --lit-warning:   55%;

    --sat-success:   35%;
    --lit-success:   42%;

    --sat-toxicity:  76%;
    --lit-toxicity:  46%;

    /* ── NEUTRALE BASIS (für Hintergründe/Text) ───────────────── */
    --lightness-bg:  10%;     /* Basis-Helligkeit für Dark Mode */

    /* ── SEMANTISCHE FARBEN (abgeleitet von Primitives) ───────── */
    /* Primärfarben */
    --color-primary:      hsl(var(--hue-primary)   var(--sat-primary)   var(--lit-primary));
    --color-primary-hover:hsl(var(--hue-primary)   var(--sat-primary)   var(--lit-primary-hover));
    --color-primary-light:hsla(var(--hue-primary)  var(--sat-primary)   var(--lit-primary) / 0.15);
    --color-primary-dark: hsl(var(--hue-primary)   var(--sat-primary)   calc(var(--lit-primary) * 0.8));

    /* Akzentfarben */
    --color-accent:       hsl(var(--hue-accent)    var(--sat-accent)    var(--lit-accent));
    --color-accent-hover: hsl(var(--hue-accent)    var(--sat-accent)    var(--lit-accent-hover));
    --color-accent-light: hsla(var(--hue-accent)   var(--sat-accent)    var(--lit-accent) / 0.1);

    /* GM-Farben */
    --color-gm:           hsl(var(--hue-gm)        var(--sat-gm)        var(--lit-gm));
    --color-gm-dark:      hsl(var(--hue-gm)        var(--sat-gm)        calc(var(--lit-gm) * 0.8));
    --color-gm-light:     hsla(var(--hue-gm)       var(--sat-gm)        var(--lit-gm) / 0.15);
    --color-gm-text:      hsl(var(--hue-gm)        var(--sat-gm)        var(--lit-gm-text));

    /* Status-Farben */
    --color-danger:       hsl(var(--hue-danger)    var(--sat-danger)    var(--lit-danger));
    --color-danger-hover: hsl(var(--hue-danger)    var(--sat-danger)    var(--lit-danger-hover));
    --color-error:        hsl(var(--hue-danger)    var(--sat-danger)    var(--lit-danger));
    
    --color-warning:      hsl(var(--hue-warning)   var(--sat-warning)   var(--lit-warning));
    --color-success:      hsl(var(--hue-success)   var(--sat-success)   var(--lit-success));

    /* Spielwert-Farben (fest, da semantisch fixiert) */
    --color-gold:         hsl(45  100% 50%);      /* #FFD700 */
    --color-amber:        hsl(38  95% 55%);       /* #fbbc05 */
    --color-amber-ui:     hsl(38  100% 52%);      /* #FFC107 */
    --color-heal:         hsl(45  100% 50%);      /* #ffcc00 */

    /* Ressourcen-Balken */
    --color-health:       hsl(140  70% 60%);      /* Grün */
    --color-mana:         hsl(200  60% 70%);      /* Blau */
    --color-endurance:    hsl(40   95% 65%);      /* Gelb */
    --color-toxicity:     hsl(var(--hue-toxicity) var(--sat-toxicity) var(--lit-toxicity));
    --color-toxicity-soft:hsl(var(--hue-toxicity) var(--sat-toxicity) var(--lit-toxicity) / 0.24);
    --sat-toxicity-bar:   min(var(--sat-toxicity), 72%);
    --lit-toxicity-bar:   min(var(--lit-toxicity), 48%);
    --color-toxicity-fill:hsl(var(--hue-toxicity) var(--sat-toxicity-bar) var(--lit-toxicity-bar));
    --color-toxicity-shade:hsl(var(--hue-toxicity) var(--sat-toxicity-bar) calc(var(--lit-toxicity-bar) * 0.72));
    --color-toxicity-glow: hsl(var(--hue-toxicity) var(--sat-toxicity-bar) calc(var(--lit-toxicity-bar) + 10%));
    --gradient-toxicity-resource: linear-gradient(
        90deg,
        var(--color-toxicity-shade) 0%,
        var(--color-toxicity-fill) 56%,
        var(--color-toxicity-glow) 100%
    );

    /* Toxizitaet UEBER der Grenze — dieselbe Leiste, Warnfarbton.
       Eigene Kette statt eines umgestellten --hue-toxicity: die abgeleiteten
       Farben werden dort ausgerechnet, wo sie DEFINIERT sind (:root), ein
       Ueberschreiben weiter unten im Baum bliebe wirkungslos. */
    --hue-toxicity-overflow:      var(--hue-danger);
    --color-toxicity-overflow:    hsl(var(--hue-toxicity-overflow) var(--sat-toxicity) var(--lit-toxicity));
    --color-toxicity-overflow-soft:hsl(var(--hue-toxicity-overflow) var(--sat-toxicity) var(--lit-toxicity) / 0.24);
    --color-toxicity-overflow-fill:hsl(var(--hue-toxicity-overflow) var(--sat-toxicity-bar) var(--lit-toxicity-bar));
    --color-toxicity-overflow-shade:hsl(var(--hue-toxicity-overflow) var(--sat-toxicity-bar) calc(var(--lit-toxicity-bar) * 0.72));
    --color-toxicity-overflow-glow:hsl(var(--hue-toxicity-overflow) var(--sat-toxicity-bar) calc(var(--lit-toxicity-bar) + 10%));
    --gradient-toxicity-overflow: linear-gradient(
        90deg,
        var(--color-toxicity-overflow-shade) 0%,
        var(--color-toxicity-overflow-fill) 56%,
        var(--color-toxicity-overflow-glow) 100%
    );

    /* Spielmechanik */
    --color-crit:         hsl(45  100% 50%);
    --color-miss:         hsl(0   0%   53%);
    --color-dot:          hsl(355 100% 60%);
    --color-hot:          hsl(145 55%  55%);
    --color-buff:         hsl(120 50%  45%);
    --color-debuff:       hsl(0   85%  60%);

    /* ── NEUTRALE FARBEN (Hintergründe, Text, Rahmen) ─────────── */
    /* Hintergründe */
    --bg-page:       hsl(var(--hue-neutral) 10% var(--lightness-bg));
    --bg-primary:    hsl(var(--hue-neutral) 12% 18%);
    --bg-secondary:  hsl(var(--hue-neutral) 10% 22% / 0.7);
    --bg-tertiary:   hsl(var(--hue-neutral) 8%  16% / 0.9);
    --bg-card:       hsl(var(--hue-neutral) 10% 20% / 0.9);
    --bg-hover:      hsl(var(--hue-neutral) 10% 30% / 0.5);
    --bg-input:      hsl(var(--hue-neutral) 8%  28%);

    /* Oberflächen */
    --surface-elevated: hsl(var(--hue-neutral) 10% 25%);
    --surface-overlay:  hsl(var(--hue-neutral) 10% 28%);
    --surface-panel:    hsl(var(--hue-neutral) 10% 22%);

    /* Overlays / Backdrops */
    --overlay-heavy:   hsl(0 0% 0% / 0.85);
    --overlay-dark:    hsl(0 0% 0% / 0.7);
    --overlay-medium:  hsl(0 0% 0% / 0.5);
    --overlay-light:   hsl(0 0% 0% / 0.3);
    --overlay-subtle:  hsl(0 0% 0% / 0.15);
    --overlay-solid:   hsl(0 0% 3%);        /* Neutral opaque backdrop, theme-unabhaengig */

    /* Text-Farben */
    --text-primary:   hsl(0 0% 100%);
    --text-secondary: hsl(0 0% 87%);
    --text-muted:     hsl(0 0% 100% / 0.6);
    --text-faint:     hsl(0 0% 100% / 0.4);
    --text-dark:      hsl(0 0% 20%);
    --text-light:     hsl(0 0% 93%);
    --text-label:     hsl(0 0% 67%);

    /* Rahmen-Farben */
    --border-color:    hsl(0 0% 100% / 0.1);
    --border-subtle:   hsl(0 0% 100% / 0.08);
    --border-strong:   hsl(0 0% 100% / 0.2);
    --border-gold:     hsl(45 100% 50% / 0.4);

    /* Interaktive Zustände */
    --color-focus-ring: hsla(var(--hue-primary) var(--sat-primary) var(--lit-primary) / 0.25);

    /* Tooltip-Farben */
    --color-tooltip-bg:         hsl(var(--hue-neutral) 15% 12% / 0.98);
    --color-tooltip-highlight:  hsl(45 100% 85%);
    --color-tooltip-effect-bg:  hsla(45 100% 50% / 0.1);
    --color-tooltip-text:       hsl(0 0% 90%);
    --color-tooltip-label:      hsl(0 0% 80%);
    --color-tooltip-muted:      hsl(0 0% 62%);
    --color-tooltip-dim:        hsl(0 0% 47%);
    --color-tooltip-pos:        var(--color-success);
    --color-tooltip-neg:        var(--color-error);
    --color-tooltip-separator:  hsl(0 0% 33%);
    /* Die drei Textfarben des Item-Tooltips. Sie standen als feste Hexwerte im
       Komponenten-CSS; die Modifikationen kamen als dritte hinzu und haetten
       den Fehler wiederholt. Bewusst NICHT themeabhaengig: der Tooltip hat
       seinen eigenen dunklen Grund (--color-tooltip-bg). */
    --color-tooltip-fx:         hsl(202 70% 65%);   /* Grundeffekte, blau */
    --color-tooltip-comment:    hsl(0 100% 69%);    /* Kommentar, rot */
    --color-tooltip-mod:        hsl(330 80% 72%);   /* Trophäen, Edelsteine, Verzauberungen */
    --color-tooltip-section-bg: hsl(0 0% 18% / 0.6);

    /* Buff/Debuff Indikatoren */
    --color-buff-indicator:     hsl(120 100% 70%);
    --color-debuff-indicator:   hsl(0   100% 70%);

    /* Marker-Reihe unter dem Portrait (.buff-indicator). Bewusst NICHT
       --color-*-indicator: die Reihe sitzt direkt unter den Ressourcenleisten
       und soll deren Signalfarben nicht doppeln. Verstaerkung traegt den
       Akzent der Welt, Schwaechung ein dunkles Rot – dunkel, damit es sich vom
       hellen --color-danger der Leisten unterscheidet.
       Beide leiten sich hier auf :root ab, wo auch --hue-danger/--color-accent
       stehen; die Themes setzen ihre Werte auf demselben Element (html). */
    --color-buff-marker:        var(--color-accent);
    --color-debuff-marker:      hsl(var(--hue-danger) 65% 34%);
    /* Der Traeger der Marker ist immer dunkel (das Portrait darunter ist
       beliebig hell), der Akzent aber nicht: im Theme "newspaper" ist er
       schwarz. Ein feiner heller Saum haelt auch dunkle Symbole lesbar. */
    --color-marker-halo:        hsl(0 0% 100% / 0.55);
    --color-buff-tile-bg:       hsla(140 50% 30% / 0.3);
    --color-buff-tile-border:   hsla(140 60% 60% / 0.3);
    --color-buff-tile-hover:    hsla(140 50% 25% / 0.4);
    --color-buff-tile-glow:     hsla(140 60% 60% / 0.2);
    --color-debuff-tile-bg:     hsla(0   50% 25% / 0.3);
    --color-debuff-tile-border: hsla(0   70% 60% / 0.3);
    --color-debuff-tile-hover:  hsla(0   50% 28% / 0.4);
    --color-debuff-tile-glow:   hsla(0   70% 60% / 0.2);
    --color-neutral-tile-bg:    hsla(240 30% 35% / 0.3);
    --color-neutral-tile-border:hsla(240 40% 70% / 0.3);
    --color-neutral-tile-hover: hsla(240 28% 32% / 0.4);
    --color-neutral-tile-glow:  hsla(240 40% 70% / 0.2);

    /* Icon-Färbung (Default: weiß) */
    --icon-color:  hsl(0 0% 100%);
    --icon-filter: brightness(0) invert(1);

    /* ── CURRENCY TILES ────────────────────────────────────────── */
    --currency-tile-bg:           hsla(45, 20%, 16%, 0.3);
    --currency-tile-border:       hsl(45 55% 38% / 0.3);
    --currency-tile-hover-bg:     hsla(45, 22%, 22%, 0.4);
    --currency-tile-hover-shadow: hsl(45 55% 38% / 0.2);
    --currency-add-bg:            hsla(0, 0%, 15%, 0.3);
    --currency-add-border:        hsl(45 55% 38% / 0.4);
    --currency-add-hover-bg:      hsla(45, 18%, 20%, 0.4);
    --currency-add-hover-border:  hsl(45 55% 38% / 0.6);
    --currency-quantity-bg:       var(--overlay-light);

    /* ── RESISTANCE TILES ──────────────────────────────────────── */
    --resistance-tile-bg:         hsla(220, 15%, 19%, 0.8);
    --resistance-tile-border:     hsl(0 0% 100% / 0.1);
    --resistance-tile-hover-bg:   hsla(220, 15%, 24%, 0.9);
    --resistance-stat-row-bg:     var(--overlay-light);
    --resistance-stat-label-color:var(--text-muted);

    /* ── ITEM TILES ─────────────────────────────────────────────── */
    --item-tile-base:             rgba(28, 35, 50, 0.95);
    --item-tile-border:           rgba(200, 200, 200, 0.3);
    --item-tile-add-bg:           rgba(40, 40, 40, 0.3);
    --item-tile-add-border:       rgba(100, 100, 100, 0.3);
    --item-tile-add-hover:        rgba(50, 50, 50, 0.5);
    --item-tile-add-border-hover: rgba(150, 150, 150, 0.5);

    /* ── WEIGHT INDICATOR ──────────────────────────────────────── */
    --weight-display-bg:          var(--overlay-medium);
    --weight-ok-color:            hsl(130 60% 68%);
    --weight-warn-color:          hsl(38 85% 62%);
    --weight-crit-color:          hsl(0 70% 62%);
    --weight-bar-track-bg:        hsl(0 0% 40% / 0.4);

    /* ── SPELL TILES ─────────────────────────────────────────────── */
    --spell-tile-hover-bg:            rgba(50, 55, 65, 0.9);
    --spell-temp-bg:                  rgba(50, 90, 130, 0.8);
    --spell-temp-border:              rgba(100, 150, 255, 0.3);
    --spell-temp-glow:                rgba(0, 0, 150, 0.2);
    --spell-temp-hover-bg:            rgba(60, 100, 140, 0.9);
    --spell-temp-hover-glow:          rgba(0, 0, 150, 0.3);
    --spell-temp-badge-bg:            rgba(100, 150, 255, 0.9);
    --spell-temp-header-bg:           rgba(50, 100, 150, 0.9);
    --spell-temp-header-hover-bg:     rgba(60, 110, 160, 1);

    /* ── WIDGET TILES ────────────────────────────────────────────── */
    --widget-tile-hover-bg:           rgba(50, 55, 65, 0.9);
    --widget-attack-bg:               rgba(60, 35, 35, 0.8);
    --widget-attack-hover-bg:         rgba(70, 40, 40, 0.9);
    --widget-attack-glow:             rgba(100, 0, 0, 0.3);
    --widget-attack-value-color:      rgb(255, 200, 200);
    --widget-spell-bg:                rgba(50, 35, 60, 0.8);
    --widget-spell-hover-bg:          rgba(60, 45, 70, 0.9);
    --widget-spell-glow:              rgba(150, 100, 255, 0.3);
    --widget-skill-bg:                rgba(40, 50, 65, 0.8);
    --widget-skill-hover-bg:          rgba(50, 60, 75, 0.9);
    --widget-skill-glow:              rgba(50, 100, 150, 0.3);
    --widget-skill-icon-hover:        #66b3e3;
    --widget-add-bg:                  rgba(30, 35, 45, 0.6);

    /* ── BEREICH TILES ───────────────────────────────────────────── */
    --bereich-kampf-border:           rgba(255, 100, 100, 0.3);
    --bereich-kampf-hover-bg:         rgba(60, 35, 35, 0.9);
    --bereich-kampf-glow:             rgba(100, 0, 0, 0.3);
    --bereich-herstellen-border:      rgba(100, 255, 100, 0.3);
    --bereich-herstellen-hover-bg:    rgba(35, 60, 35, 0.9);
    --bereich-herstellen-glow:        rgba(0, 100, 0, 0.3);
    --bereich-beschwoerungen-border:  rgba(200, 100, 255, 0.3);
    --bereich-beschwoerungen-hover-bg:rgba(50, 35, 60, 0.9);
    --bereich-beschwoerungen-glow:    rgba(100, 0, 100, 0.3);
    --bereich-schmieden-border:       rgba(255, 165, 0, 0.3);
    --bereich-schmieden-hover-bg:     rgba(60, 45, 20, 0.9);
    --bereich-schmieden-glow:         rgba(100, 65, 0, 0.3);

    /* ── ITEM QUALITY COLORS ───────────────────────────────────── */
    /* Qualität 0: Abgenutzt (Grau) */
    --quality-0-color1:  rgb(100, 100, 100);
    --quality-0-color2:  rgb(65, 65, 65);
    /* Qualität 1: Gewöhnlich (Weiß) */
    --quality-1-color1:  rgb(220, 220, 220);
    --quality-1-color2:  rgb(180, 180, 190);
    /* Qualität 2: Hochwertig (Grün) */
    --quality-2-color1:  rgb(51, 255, 58);
    --quality-2-color2:  rgb(20, 180, 50);
    /* Qualität 3: Meisterstück (Blau) */
    --quality-3-color1:  rgb(66, 167, 235);
    --quality-3-color2:  rgb(30, 100, 200);
    /* Qualität 4: Mystisch (Lila) */
    --quality-4-color1:  rgb(175, 66, 252);
    --quality-4-color2:  rgb(110, 30, 200);
    /* Qualität 5: Sagenumwoben (Orange) */
    --quality-5-color1:  rgb(252, 180, 30);
    --quality-5-color2:  rgb(220, 100, 0);
    /* Qualität 6: Fluch (Rot) */
    --quality-6-color1:  rgb(200, 50, 50);
    --quality-6-color2:  rgb(120, 20, 20);
    /* Qualität 7: Fluch+ (Grün/Lila) */
    --quality-7-color1:  rgb(160, 209, 154);
    --quality-7-color2:  rgb(231, 122, 231);
}

/* ── RÜCKWÄRTSKOMPATIBILITÄT – Aliase für alten Code ─────────── */
:root {
    --accent-color:      var(--color-accent);
    --primary-color:     var(--color-primary);
    --primary-hover:     var(--color-primary-hover);
    --primary-light:     var(--color-primary-light);
    --primary-dark:      var(--color-primary-dark);
    --success-color:     var(--color-success);
    --warning-color:     var(--color-warning);
    --danger-color:      var(--color-danger);
    --error-color:       var(--color-error);
    --info-color:        var(--color-amber-ui);
    --combat-hover:      var(--color-primary-light);
    --combat-active:     var(--color-accent);
}
/* ═══════════════════════════════════════════════════════════════
   SPACING TOKENS – Design System 2.0
   Konsistente 4px-Basis-Skala für alle Abstände
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── SPACE SCALE (4px-Raster) ─────────────────────────────── */
    /* Verwendung: padding, margin, gap, width, height */
    --space-0:   0;
    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-7:   1.75rem;   /* 28px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-14:  3.5rem;    /* 56px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */
    --space-32:  8rem;      /* 128px */

    /* ── LAYOUT DIMENSIONS ────────────────────────────────────── */
    --header-height:     3.5rem;    /* 56px */
    --sidebar-width:     17.5rem;   /* 280px */
    --panel-width:       20rem;     /* 320px */
    --container-max:     90rem;     /* 1440px */
    --container-narrow:  60rem;     /* 960px */
    --container-wide:    120rem;    /* 1920px */

    /* ── COMPONENT SPECIFIC ───────────────────────────────────── */
    --btn-height:        2.5rem;    /* 40px - Standard Button Höhe */
    --btn-height-sm:     2rem;      /* 32px - Small Button */
    --btn-height-lg:     3rem;      /* 48px - Large Button */
    --icon-size:         1.5rem;    /* 24px - Standard Icon */
    --icon-size-sm:      1rem;      /* 16px - Small Icon */
    --icon-size-lg:      2rem;      /* 32px - Large Icon */
    --avatar-size:       3rem;      /* 48px - Standard Avatar */
    --avatar-size-sm:    2rem;      /* 32px - Small Avatar */
    --avatar-size-lg:    4rem;      /* 64px - Large Avatar */

    /* ── FORM ELEMENTS ────────────────────────────────────────── */
    --input-height:      2.5rem;    /* 40px */
    --input-height-sm:   2rem;      /* 32px */
    --input-height-lg:   3rem;      /* 48px */
    --input-padding-x:   0.75rem;   /* 12px */
    --input-padding-y:   0.5rem;    /* 8px */

    /* ── MODAL / DIALOG ───────────────────────────────────────── */
    --modal-padding:     var(--space-6);
    --modal-min-width:   20rem;     /* 320px */
    --modal-max-width:   40rem;     /* 640px */
    --modal-max-height:  85vh;

    /* ── TOOLTIP ──────────────────────────────────────────────── */
    --tooltip-min-width: 16rem;     /* 256px */
    --tooltip-max-width: 34rem;     /* 544px */
    --tooltip-padding:   var(--space-4);

    /* ── GRID / TABLE ─────────────────────────────────────────── */
    --grid-size:         2.5rem;    /* 40px - Combat Grid */
    --table-row-height:  3rem;      /* 48px */
    --table-cell-padding: var(--space-2);

    /* ── PROGRESS BARS ────────────────────────────────────────── */
    --progress-height:   1.25rem;   /* 20px */
    --progress-height-sm: 0.5rem;   /* 8px */
    --progress-height-lg: 1.5rem;   /* 24px */

    /* ── RANGE INPUT ──────────────────────────────────────────── */
    --range-height:      0.25rem;   /* 4px - Track Höhe */
    --range-thumb-size:  1rem;      /* 16px - Thumb Größe */
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY TOKENS – Design System 2.0
   Konsistente Typografie-Skala für alle Textelemente
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── FONT FAMILIES ────────────────────────────────────────── */
    --font-sans:    'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-mono:    'Fira Code', 'Consolas', 'Monaco', monospace;

    /* Default Font für das gesamte Projekt */
    --font-family:  var(--font-sans);

    /* ── FONT SIZE SCALE ──────────────────────────────────────── */
    /* Basierend auf 16px Root-Size */
    --text-xs:      0.75rem;    /* 12px */
    --text-sm:      0.875rem;   /* 14px */
    --text-base:    1rem;       /* 16px */
    --text-lg:      1.125rem;   /* 18px */
    --text-xl:      1.25rem;    /* 20px */
    --text-2xl:     1.5rem;     /* 24px */
    --text-3xl:     1.875rem;   /* 30px */
    --text-4xl:     2.25rem;    /* 36px */
    --text-5xl:     3rem;       /* 48px */

    /* ── FONT WEIGHTS ─────────────────────────────────────────── */
    --font-weight-thin:       100;
    --font-weight-extralight: 200;
    --font-weight-light:      300;
    --font-weight-normal:     400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;
    --font-weight-extrabold:  800;
    --font-weight-black:      900;

    /* ── LINE HEIGHTS (Leading) ──────────────────────────────── */
    --leading-none:     1;
    --leading-tight:    1.25;
    --leading-snug:     1.375;
    --leading-normal:   1.5;
    --leading-relaxed:  1.625;
    --leading-loose:    2;

    /* ── LETTER SPACING (Tracking) ───────────────────────────── */
    --tracking-tighter: -0.05em;
    --tracking-tight:   -0.025em;
    --tracking-normal:  0;
    --tracking-wide:    0.025em;
    --tracking-wider:   0.05em;
    --tracking-widest:  0.1em;

    /* ── HEADING STYLES ──────────────────────────────────────── */
    --heading-font:     var(--font-sans);
    --heading-weight:   var(--font-weight-bold);
    --heading-leading:  var(--leading-tight);

    /* H1-H6 als abgeleitete Werte */
    --h1-size:    var(--text-4xl);
    --h1-weight:  var(--font-weight-bold);
    --h1-leading: var(--leading-tight);

    --h2-size:    var(--text-3xl);
    --h2-weight:  var(--font-weight-bold);
    --h2-leading: var(--leading-tight);

    --h3-size:    var(--text-2xl);
    --h3-weight:  var(--font-weight-semibold);
    --h3-leading: var(--leading-snug);

    --h4-size:    var(--text-xl);
    --h4-weight:  var(--font-weight-semibold);
    --h4-leading: var(--leading-normal);

    --h5-size:    var(--text-lg);
    --h5-weight:  var(--font-weight-medium);
    --h5-leading: var(--leading-normal);

    --h6-size:    var(--text-base);
    --h6-weight:  var(--font-weight-medium);
    --h6-leading: var(--leading-normal);

    /* ── BODY TEXT STYLES ────────────────────────────────────── */
    --body-size:    var(--text-base);
    --body-weight:  var(--font-weight-normal);
    --body-leading: var(--leading-normal);

    --body-sm-size:    var(--text-sm);
    --body-sm-weight:  var(--font-weight-normal);
    --body-sm-leading: var(--leading-normal);

    --body-xs-size:    var(--text-xs);
    --body-xs-weight:  var(--font-weight-normal);
    --body-xs-leading: var(--leading-relaxed);

    /* ── SPECIAL TEXT STYLES ─────────────────────────────────── */
    --caption-size:     var(--text-xs);
    --caption-weight:   var(--font-weight-medium);
    --caption-leading:  var(--leading-normal);
    --caption-tracking: var(--tracking-wide);

    --label-size:       var(--text-sm);
    --label-weight:     var(--font-weight-semibold);
    --label-leading:    var(--leading-none);

    --code-size:        var(--text-sm);
    --code-weight:      var(--font-weight-normal);
    --code-family:      var(--font-mono);
}

/* ── BASE TYPOGRAPHY RESET ───────────────────────────────────── */
body {
    font-family: var(--font-family);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    line-height: var(--body-leading);
    color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    font-weight: var(--heading-weight);
    line-height: var(--heading-leading);
    margin: 0;
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }

p {
    margin: 0;
}

/* ── UTILITY CLASSES ─────────────────────────────────────────── */
.text-xs      { font-size: var(--text-xs); }
.text-sm      { font-size: var(--text-sm); }
.text-base    { font-size: var(--text-base); }
.text-lg      { font-size: var(--text-lg); }
.text-xl      { font-size: var(--text-xl); }
.text-2xl     { font-size: var(--text-2xl); }
.text-3xl     { font-size: var(--text-3xl); }

.font-thin       { font-weight: var(--font-weight-thin); }
.font-extralight { font-weight: var(--font-weight-extralight); }
.font-light      { font-weight: var(--font-weight-light); }
.font-normal     { font-weight: var(--font-weight-normal); }
.font-medium     { font-weight: var(--font-weight-medium); }
.font-semibold   { font-weight: var(--font-weight-semibold); }
.font-bold       { font-weight: var(--font-weight-bold); }
.font-extrabold  { font-weight: var(--font-weight-extrabold); }
.font-black      { font-weight: var(--font-weight-black); }

.leading-none     { line-height: var(--leading-none); }
.leading-tight    { line-height: var(--leading-tight); }
.leading-snug     { line-height: var(--leading-snug); }
.leading-normal   { line-height: var(--leading-normal); }
.leading-relaxed  { line-height: var(--leading-relaxed); }
.leading-loose    { line-height: var(--leading-loose); }

.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-widest  { letter-spacing: var(--tracking-widest); }
/* ═══════════════════════════════════════════════════════════════
   EFFECTS TOKENS – Design System 2.0
   Schatten, Border-Radius, Transitions, Animationen
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── BORDER RADIUS SCALE ──────────────────────────────────── */
    --radius-none:   0;
    --radius-sm:     0.25rem;   /* 4px  */
    --radius-md:     0.5rem;    /* 8px  */
    --radius-lg:     0.75rem;   /* 12px */
    --radius-xl:     1rem;      /* 16px */
    --radius-2xl:    1.5rem;    /* 24px */
    --radius-3xl:    2rem;      /* 32px */
    --radius-full:   9999px;

    /* ── SHADOWS (Elevation-based) ───────────────────────────── */
    /* Basis-Schatten für dunkles Theme */
    --shadow-color: hsl(0 0% 0% / 0.5);

    --shadow-xs:   0 1px 2px 0 var(--shadow-color);
    --shadow-sm:   0 2px 4px 0 var(--shadow-color);
    --shadow-md:   0 4px 8px 0 var(--shadow-color);
    --shadow-lg:   0 8px 16px 0 var(--shadow-color);
    --shadow-xl:   0 12px 24px 0 var(--shadow-color);
    --shadow-2xl:  0 20px 40px 0 var(--shadow-color);

    /* Innen-Schatten */
    --shadow-inner: inset 0 2px 4px 0 var(--shadow-color);
    --shadow-inner-sm: inset 0 1px 2px 0 var(--shadow-color);

    /* ── GLOW EFFECTS (themed über HSL-Variablen) ────────────── */
    --shadow-glow-primary:  0 0 12px hsl(var(--hue-primary) var(--sat-primary) var(--lit-primary) / 0.5);
    --shadow-glow-accent:   0 0 12px hsl(var(--hue-accent) var(--sat-accent) var(--lit-accent) / 0.5);
    --shadow-glow-danger:   0 0 12px hsl(var(--hue-danger) var(--sat-danger) var(--lit-danger) / 0.5);
    --shadow-glow-warning:  0 0 12px hsl(var(--hue-warning) var(--sat-warning) var(--lit-warning) / 0.5);
    --shadow-glow-success:  0 0 12px hsl(var(--hue-success) var(--sat-success) var(--lit-success) / 0.5);
    --shadow-glow-toxicity: 0 0 12px var(--color-toxicity-soft);
    --shadow-glow-toxicity-overflow: 0 0 12px var(--color-toxicity-overflow-soft);
    --shadow-glow-gold:     0 0 12px hsl(45 100% 50% / 0.5);
    --shadow-glow-green:    var(--shadow-glow-primary);

    /* ── TRANSITION DURATIONS ────────────────────────────────── */
    --duration-0:     0ms;
    --duration-75:    75ms;
    --duration-100:   100ms;
    --duration-150:   150ms;
    --duration-200:   200ms;
    --duration-250:   250ms;
    --duration-300:   300ms;
    --duration-400:   400ms;
    --duration-500:   500ms;
    --duration-700:   700ms;
    --duration-1000:  1000ms;

    /* ── TRANSITION TIMING FUNCTIONS ─────────────────────────── */
    --ease-linear:   linear;
    --ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-elastic:  cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ── PRESET TRANSITIONS ──────────────────────────────────── */
    --transition-fast:   var(--duration-150) var(--ease-in-out);
    --transition-md:     var(--duration-250) var(--ease-in-out);
    --transition-normal: var(--duration-300) var(--ease-in-out);
    --transition-slow:   var(--duration-400) var(--ease-in-out);
    --transition-slower: var(--duration-700) var(--ease-in-out);

    /* ── TRANSITION PROPERTIES ───────────────────────────────── */
    --transition-colors: color var(--duration-150) var(--ease-in-out),
                         background-color var(--duration-150) var(--ease-in-out),
                         border-color var(--duration-150) var(--ease-in-out),
                         text-decoration-color var(--duration-150) var(--ease-in-out),
                         fill var(--duration-150) var(--ease-in-out),
                         stroke var(--duration-150) var(--ease-in-out);

    --transition-opacity: opacity var(--duration-150) var(--ease-in-out);

    --transition-shadow: box-shadow var(--duration-150) var(--ease-in-out);

    --transition-transform: transform var(--duration-150) var(--ease-in-out);

    --transition-all: all var(--duration-150) var(--ease-in-out);

    --transition-none: none;

    /* ── ANIMATIONS ───────────────────────────────────────────── */
    /* Fade */
    --animate-fade-in: fadeIn var(--duration-200) var(--ease-out);
    --animate-fade-out: fadeOut var(--duration-200) var(--ease-in);

    /* Slide */
    --animate-slide-in: slideIn var(--duration-300) var(--ease-out);
    --animate-slide-out: slideOut var(--duration-300) var(--ease-in);
    --animate-slide-up: slideUp var(--duration-300) var(--ease-out);
    --animate-slide-down: slideDown var(--duration-300) var(--ease-out);

    /* Scale */
    --animate-scale-in: scaleIn var(--duration-200) var(--ease-out);
    --animate-scale-out: scaleOut var(--duration-200) var(--ease-in);

    /* Pulse */
    --animate-pulse: pulse 2s var(--ease-in-out) infinite;
    --animate-pulse-fast: pulse 1s var(--ease-in-out) infinite;

    /* Spin */
    --animate-spin: spin 1s linear infinite;
    --animate-spin-slow: spin 3s linear infinite;

    /* Bounce */
    --animate-bounce: bounce 2s var(--ease-in-out) infinite;

    /* Ping */
    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;

    /* ── BACKDROP FILTERS ────────────────────────────────────── */
    --blur-sm:   blur(4px);
    --blur-md:   blur(8px);
    --blur-lg:   blur(12px);
    --blur-xl:   blur(16px);
    --blur-2xl:  blur(24px);

    --grayscale: grayscale(100%);
    --sepia:     sepia(100%);

    /* ── Z-INDEX SKALA ───────────────────────────────────────── */
    --z-base:      0;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-tooltip:   500;
    --z-toast:     600;
    --z-max:       9999;

    /* Benachrichtigungen liegen ueber ALLEM, auch ueber Modalen.
     *
     * `--z-max` (9999) reicht dafuer nicht: die Modale dieser Anwendung sitzen
     * hart auf 10000-10002 (Spezialbereiche, GM-Item, Haendler, Markdown,
     * Editor). Ein Toast auf 9999 verschwindet also hinter jedem offenen
     * Modal - genau das passierte beim Herstellen, wo die Fehlermeldung aus
     * dem iframe an den Charakterbogen durchgereicht wird.
     *
     * Der Wert folgt der Konvention, die die anderen Toast-Systeme im Projekt
     * schon benutzen (js/notifications.js, js/gm-merchant-system.js): 99999. */
    --z-notification: 99999;
}

/* ── KEYFRAME ANIMATIONS ─────────────────────────────────────── */

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

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

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

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

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

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

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

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

@keyframes bounce {
    0%, 100% {
        transform: translateY(-5%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ── UTILITY CLASSES ─────────────────────────────────────────── */

/* Shadows */
.shadow-xs    { box-shadow: var(--shadow-xs); }
.shadow-sm    { box-shadow: var(--shadow-sm); }
.shadow-md    { box-shadow: var(--shadow-md); }
.shadow-lg    { box-shadow: var(--shadow-lg); }
.shadow-xl    { box-shadow: var(--shadow-xl); }
.shadow-2xl   { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }
.shadow-none  { box-shadow: none; }

/* Glow Effects */
.shadow-glow-primary { box-shadow: var(--shadow-glow-primary); }
.shadow-glow-danger  { box-shadow: var(--shadow-glow-danger); }
.shadow-glow-gold    { box-shadow: var(--shadow-glow-gold); }

/* Border Radius */
.rounded-none   { border-radius: var(--radius-none); }
.rounded-sm     { border-radius: var(--radius-sm); }
.rounded        { border-radius: var(--radius-md); }
.rounded-md     { border-radius: var(--radius-md); }
.rounded-lg     { border-radius: var(--radius-lg); }
.rounded-xl     { border-radius: var(--radius-xl); }
.rounded-2xl    { border-radius: var(--radius-2xl); }
.rounded-3xl    { border-radius: var(--radius-3xl); }
.rounded-full   { border-radius: var(--radius-full); }

/* Transitions */
.transition-fast   { transition: var(--transition-fast); }
.transition-md     { transition: var(--transition-md); }
.transition-normal { transition: var(--transition-normal); }
.transition-slow   { transition: var(--transition-slow); }
.transition-none   { transition: none; }

/* Animations */
.animate-fade-in  { animation: var(--animate-fade-in); }
.animate-fade-out { animation: var(--animate-fade-out); }
.animate-slide-in { animation: var(--animate-slide-in); }
.animate-scale-in { animation: var(--animate-scale-in); }
.animate-pulse    { animation: var(--animate-pulse); }
.animate-spin     { animation: var(--animate-spin); }
.animate-bounce   { animation: var(--animate-bounce); }

/* Blur */
.blur-sm  { backdrop-filter: var(--blur-sm); }
.blur-md  { backdrop-filter: var(--blur-md); }
.blur-lg  { backdrop-filter: var(--blur-lg); }
.blur-xl  { backdrop-filter: var(--blur-xl); }
.blur-2xl { backdrop-filter: var(--blur-2xl); }

/* Z-Index */
.z-base     { z-index: var(--z-base); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky   { z-index: var(--z-sticky); }
.z-overlay  { z-index: var(--z-overlay); }
.z-modal    { z-index: var(--z-modal); }
.z-tooltip  { z-index: var(--z-tooltip); }
.z-max      { z-index: var(--z-max); }
/* =========================================================
   BREAKPOINT TOKENS - Design System 2.0
   Zentrales Breakpoint-System fuer das gesamte Runic-Projekt

   VERWENDUNG in CSS (nicht als Custom Props nutzbar):
     max-width: 599px   = nur Phones portrait
     max-width: 767px   = Phones + kleine Tablets
     max-width: 1023px  = bis Tablet landscape
     max-width: 1279px  = bis kleiner Laptop
     min-width: 600px   = ab kleinen Tablets
     min-width: 768px   = ab Tablet portrait
     min-width: 1024px  = ab Tablet landscape
     min-width: 1280px  = ab Desktop

   Geraetebereiche:
     xs   320-599px    Smartphones portrait
     sm   600-767px    Kleine Tablets, grosse Phones landscape
     md   768-1023px   Tablets portrait (iPad mini, Tab S7)
     lg   1024-1279px  Tablets landscape, kleine Laptops
     xl   1280-1919px  Desktop, grosse Laptops
     2xl  1920px+      Grosse Monitore
   ========================================================= */

:root {
    /* Referenz-Werte (nur fuer JS-Zugriff via getPropertyValue) */
    --bp-xs:   320;
    --bp-sm:   600;
    --bp-md:   768;
    --bp-lg:  1024;
    --bp-xl:  1280;
    --bp-2xl: 1920;

    /* Touch-Target Minimum (WCAG 2.5.5) */
    --touch-target-min: 2.75rem;   /* 44px */
    --touch-target-sm:  2.5rem;    /* 40px - toleriertes Minimum */
    --touch-gap-min:    0.5rem;    /* 8px  - Mindestabstand zwischen Targets */

    /* Fluid Typography Scale via clamp() */
    --fluid-text-xs:   clamp(0.6875rem, 1.5vw, 0.75rem);
    --fluid-text-sm:   clamp(0.75rem,   1.8vw, 0.875rem);
    --fluid-text-base: clamp(0.875rem,  2vw,   1rem);
    --fluid-text-lg:   clamp(1rem,      2.2vw, 1.125rem);
    --fluid-text-xl:   clamp(1.125rem,  2.5vw, 1.25rem);
    --fluid-text-2xl:  clamp(1.25rem,   3vw,   1.5rem);
    --fluid-text-3xl:  clamp(1.5rem,    4vw,   1.875rem);

    /* Fluid Spacing */
    --fluid-space-sm:  clamp(0.5rem,  1.5vw, 1rem);
    --fluid-space-md:  clamp(0.75rem, 2vw,   1.5rem);
    --fluid-space-lg:  clamp(1rem,    3vw,   2rem);

    /* Responsive Sidebar-Breiten */
    --sidebar-width-responsive: clamp(220px, 25vw, 320px);
    --panel-width-responsive:   clamp(260px, 28vw, 380px);
}

/* ── LAYER 2: DS 2.0 KOMPONENTEN ─────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   BUTTON COMPONENT – Design System 2.0
   Wiederverwendbare Button-Klassen mit Varianten und Größen
   ═══════════════════════════════════════════════════════════════ */

/* ── BASE BUTTON ──────────────────────────────────────────────── */
/* Alle Buttons erben diese Basis-Eigenschaften */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    min-height: var(--btn-height);

    /* Ein Knopf richtet sich nach seinem Inhalt.
       Das ist nicht selbstverstaendlich: styles/main-style.css gestaltet nackte
       `button` als quadratische Icon-Knoepfe mit `width: var(--btn-height)`.
       Diese Regel (0,0,1) verliert zwar gegen `.btn` (0,1,0) – aber nur bei
       Eigenschaften, die `.btn` auch SETZT. Breite und Hoehe standen hier
       nicht, also gewann das Quadrat: jeder `.btn` im Charakterbogen war
       40x40 px gross und seine Beschriftung lief seitlich heraus.
       `.btn-icon` bleibt quadratisch, es setzt eigens `min-width`. */
    width: auto;
    height: auto;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: 
        transform var(--duration-150) var(--ease-out),
        box-shadow var(--duration-250) var(--ease-out),
        background-color var(--duration-150) var(--ease-in-out),
        color var(--duration-150) var(--ease-in-out),
        border-color var(--duration-150) var(--ease-in-out);
    user-select: none;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Focus State für Barrierefreiheit */
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Disabled State */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── BUTTON VARIANTS ──────────────────────────────────────────── */

/* Primary Button */
.btn-primary {
    background: var(--color-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-glow-primary);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Secondary Button */
.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

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

.btn-secondary:active:not(:disabled) {
    background: var(--bg-tertiary);
}

/* Danger Button */
.btn-danger {
    background: var(--color-danger);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.btn-danger:hover:not(:disabled) {
    background: var(--color-danger-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-glow-danger);
}

.btn-danger:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Warning Button */
.btn-warning {
    background: var(--color-warning);
    color: var(--text-dark);
    box-shadow: var(--shadow-md);
}

.btn-warning:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-glow-warning);
}

/* Success Button */
.btn-success {
    background: var(--color-success);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.btn-success:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-glow-success);
}

/* Ghost Button (transparent) */
.btn-ghost {
    background: transparent;
    color: var(--text-primary);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--bg-hover);
}

/* Link Button (wie Text-Link) */
.btn-link {
    background: transparent;
    color: var(--color-accent);
    padding: var(--space-1) var(--space-2);
    min-height: auto;
}

.btn-link:hover:not(:disabled) {
    color: var(--color-accent-hover);
    text-decoration: underline;
    background: transparent;
}

/* GM Button (für Game Master) */
.btn-gm {
    background: var(--color-gm);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.btn-gm:hover:not(:disabled) {
    background: var(--color-gm-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 12px var(--color-gm-light);
}

/* ── BUTTON SIZES ─────────────────────────────────────────────── */

/* Small Button */
.btn-sm {
    padding: var(--space-1) var(--space-2);
    min-height: var(--btn-height-sm);
    font-size: var(--text-xs);
    gap: var(--space-1);
}

/* Large Button */
.btn-lg {
    padding: var(--space-3) var(--space-6);
    min-height: var(--btn-height-lg);
    font-size: var(--text-base);
    gap: var(--space-3);
}

/* ── ICON BUTTON ──────────────────────────────────────────────── */
.btn-icon {
    padding: var(--space-2);
    min-height: var(--btn-height);
    min-width: var(--btn-height);
}

.btn-icon .icon {
    width: var(--icon-size);
    height: var(--icon-size);
}

.btn-icon.btn-sm {
    min-height: var(--btn-height-sm);
    min-width: var(--btn-height-sm);
    padding: var(--space-1);
}

.btn-icon.btn-sm .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}

.btn-icon.btn-lg {
    min-height: var(--btn-height-lg);
    min-width: var(--btn-height-lg);
    padding: var(--space-3);
}

.btn-icon.btn-lg .icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

/* ── ICON STYLES ──────────────────────────────────────────────── */

/* Verhindert dass globales img{max-width:100%} Icon-Breite auf 0 setzt */
.btn img {
    max-width: none;
    flex-shrink: 0;
}

.btn .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
    object-fit: contain;
}

/* Für SVG Icons mit CSS Mask */
.btn .icon-mask {
    width: var(--icon-size);
    height: var(--icon-size);
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ── BUTTON GROUP ─────────────────────────────────────────────── */
.btn-group {
    display: inline-flex;
    gap: var(--space-1);
}

.btn-group .btn {
    border-radius: var(--radius-md);
}

.btn-group .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.btn-group .btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group .btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ── BLOCK BUTTON (full width) ───────────────────────────────── */
.btn-block {
    display: flex;
    width: 100%;
}

/* ── LOADING STATE ───────────────────────────────────────────── */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: var(--icon-size);
    height: var(--icon-size);
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin var(--duration-700) linear infinite;
    filter: brightness(0) invert(1);
}

.btn-loading.btn-primary::after {
    border-top-color: var(--text-primary);
}

/* ── SPECIAL BUTTON STYLES ───────────────────────────────────── */

/* Tab Button (vertikal/horizontal) */
.tab-btn {
    width: var(--space-14);
    height: var(--space-14);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-btn:hover:not(:disabled) {
    background: var(--bg-secondary);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.tab-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg), var(--shadow-glow-primary);
}

.tab-btn .icon {
    width: var(--space-7);
    height: var(--space-7);
    filter: var(--icon-filter);
}

.tab-btn.active .icon {
    filter: brightness(0) invert(1);
}

/* Combat Button (spezieller Status) */
.tab-btn.combat-active {
    background: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    animation: combatPulse 2s var(--ease-in-out) infinite;
}

.tab-btn.combat-active .icon {
    filter: brightness(0) invert(1) !important;
}

@keyframes combatPulse {
    0%, 100% {
        box-shadow: 0 0 8px var(--color-danger);
    }
    50% {
        box-shadow: 0 0 20px var(--color-danger);
    }
}

/* ── FLOATING ACTION BUTTON (FAB) ────────────────────────────── */
.btn-fab {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    width: var(--space-16);
    height: var(--space-16);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-xl), var(--shadow-glow-primary);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-sticky);
}

.btn-fab:hover:not(:disabled) {
    transform: scale(1.1) translateY(-2px);
    box-shadow: var(--shadow-2xl), var(--shadow-glow-primary);
}

.btn-fab .icon {
    width: var(--space-8);
    height: var(--space-8);
}

/* ── RÜCKWÄRTSKOMPATIBILITÄT ─────────────────────────────────── */
/* Aliase für alten Code – wird entfernt nach Migration */
button,
.btn-legacy {
    /* Fallback für nicht-migrierten Code */
}
/* ═══════════════════════════════════════════════════════════════
   CARD COMPONENT – Design System 2.0
   Wiederverwendbare Card-Klassen für Inhalte, Widgets, Charaktere
   ═══════════════════════════════════════════════════════════════ */

/* ── BASE CARD ────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    transition: 
        box-shadow var(--duration-250) var(--ease-out),
        transform var(--duration-150) var(--ease-out),
        border-color var(--duration-150) var(--ease-in-out);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

/* ── CARD VARIANTS ───────────────────────────────────────────── */

/* Elevated Card (stärkerer Schatten) */
.card-elevated {
    box-shadow: var(--shadow-xl);
}

.card-elevated:hover {
    box-shadow: var(--shadow-2xl);
}

/* Interactive Card (klickbar) */
.card-interactive {
    cursor: pointer;
}

.card-interactive:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
}

.card-interactive:active {
    transform: translateY(-2px);
}

/* GM Card (Game Master Highlight) */
.card-gm {
    border-color: var(--color-gm);
    box-shadow: 0 0 12px var(--color-gm-light);
}

.card-gm:hover {
    box-shadow: 0 0 20px var(--color-gm-light);
}

/* Borderless Card */
.card-borderless {
    border: none;
    box-shadow: none;
}

.card-borderless:hover {
    box-shadow: var(--shadow-md);
}

/* Glass Card (mit Blur-Effekt) */
.card-glass {
    background: var(--bg-secondary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
}

/* ── CARD SIZES ──────────────────────────────────────────────── */

/* Small Card */
.card-sm {
    padding: var(--space-3);
}

/* Large Card */
.card-lg {
    padding: var(--space-6);
}

/* Full Width Card */
.card-full {
    width: 100%;
}

/* ── CARD SECTIONS ───────────────────────────────────────────── */

/* Card Header */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.card-header-no-border {
    border-bottom: none;
    margin-bottom: var(--space-3);
    padding-bottom: 0;
}

/* Card Title */
.card-title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: var(--leading-tight);
    margin: 0;
}

.card-title-sm {
    font-size: var(--text-base);
}

.card-title-lg {
    font-size: var(--text-xl);
}

/* Card Subtitle */
.card-subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
    margin-top: var(--space-1);
}

/* Card Content */
.card-content {
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

/* Card Footer */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.card-footer-no-border {
    border-top: none;
}

/* ── CARD IMAGE ──────────────────────────────────────────────── */

.card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.card-image-aspect-16-9 {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card-image-aspect-1-1 {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.card-image-aspect-4-3 {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Image on top variant */
.card-image-top {
    margin: calc(var(--space-4) * -1);
    margin-bottom: var(--space-4);
    border-radius: 0;
    width: calc(100% + var(--space-8));
    max-width: none;
}

/* ── CHARACTER CARD (spezifisch für CSR) ────────────────────── */

.character-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: var(--space-32);
}

.character-card-avatar {
    width: var(--space-20);
    height: var(--space-20);
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 3px solid var(--border-strong);
    align-self: center;
    transition: border-color var(--duration-150) var(--ease-in-out);
}

.character-card:hover .character-card-avatar {
    border-color: var(--color-primary);
}

.character-card-info {
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.character-card-name {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0;
}

.character-card-meta {
    font-size: var(--text-sm);
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.character-card-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

/* ── WIDGET CARD (für Dashboard Widgets) ────────────────────── */

.widget-card {
    min-height: var(--space-32);
    cursor: grab;
    position: relative;
}

.widget-card:active {
    cursor: grabbing;
}

.widget-card.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.widget-card.dragover {
    border: 2px dashed var(--color-accent);
    transform: scale(1.02);
}

.widget-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.widget-card-icon {
    width: var(--space-6);
    height: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-card-icon img,
.widget-card-icon .icon {
    width: var(--space-6);
    height: var(--space-6);
    filter: var(--icon-filter);
}

.widget-card-title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.widget-card-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-card-actions {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity var(--duration-150) var(--ease-in-out);
}

.widget-card:hover .widget-card-actions {
    opacity: 1;
}

/* ── RESISTANCE CARD (für Widerstands-Tiles) ────────────────── */

.resistance-card {
    position: relative;
    min-height: var(--space-40);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
}

.resistance-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.resistance-card-icon {
    width: var(--space-10);
    height: var(--space-10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.resistance-card-icon img {
    max-width: 100%;
    max-height: 100%;
}

.resistance-card-title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.resistance-card-values {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
}

.resistance-card-value {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
}

.resistance-card-label {
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.resistance-card-value-num {
    color: var(--text-primary);
}

/* ── EQUIPMENT CARD ──────────────────────────────────────────── */

.equipment-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
}

.equipment-card-icon {
    width: var(--space-10);
    height: var(--space-10);
    flex-shrink: 0;
}

.equipment-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.equipment-card-info {
    flex-grow: 1;
    min-width: 0;
}

.equipment-card-name {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipment-card-type {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.equipment-card-actions {
    display: flex;
    gap: var(--space-1);
}

/* ── STAT CARD (für Charakter-Stats) ────────────────────────── */

.stat-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    transition: background var(--duration-150) var(--ease-in-out);
}

.stat-card:hover {
    background: var(--bg-hover);
}

.stat-card-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.stat-card-value {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-top: var(--space-1);
}

/* ── INFO/ALERT CARD ─────────────────────────────────────────── */

.card-info {
    border-left: 4px solid var(--color-info);
    background: var(--bg-secondary);
}

.card-success {
    border-left: 4px solid var(--color-success);
    background: var(--bg-secondary);
}

.card-warning {
    border-left: 4px solid var(--color-warning);
    background: var(--bg-secondary);
}

.card-danger {
    border-left: 4px solid var(--color-danger);
    background: var(--bg-secondary);
}

.card-gm-variant {
    border-left: 4px solid var(--color-gm);
    background: var(--bg-secondary);
}

/* ── CARD GRID LAYOUT ────────────────────────────────────────── */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--space-64), 1fr));
    gap: var(--space-4);
}

.card-grid-sm {
    grid-template-columns: repeat(auto-fill, minmax(var(--space-48), 1fr));
    gap: var(--space-3);
}

.card-grid-lg {
    grid-template-columns: repeat(auto-fill, minmax(var(--space-80), 1fr));
    gap: var(--space-6);
}

/* ── UTILITY CLASSES ─────────────────────────────────────────── */

.card-hover-none:hover {
    transform: none;
    box-shadow: var(--shadow-md);
}

.card-no-padding {
    padding: 0;
}

.card-overflow-visible {
    overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
   FORM COMPONENTS – Design System 2.0
   Inputs, Selects, Textareas, Checkboxes, Radios, Forms
   ═══════════════════════════════════════════════════════════════ */

/* ── BASE FORM STYLES ────────────────────────────────────────── */

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.form-group-inline {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
}

.form-label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.form-label-required::after {
    content: '*';
    color: var(--color-danger);
    margin-left: var(--space-1);
}

.form-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.form-error {
    font-size: var(--text-xs);
    color: var(--color-danger);
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* ── INPUT BASE ──────────────────────────────────────────────── */

.input {
    width: 100%;
    height: var(--input-height);
    padding: var(--input-padding-y) var(--input-padding-x);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    transition: 
        border-color var(--duration-150) var(--ease-in-out),
        box-shadow var(--duration-150) var(--ease-in-out),
        background-color var(--duration-150) var(--ease-in-out);
}

.input::placeholder {
    color: var(--text-muted);
}

.input:hover:not(:disabled):not(:focus) {
    border-color: var(--border-strong);
}

.input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    background: var(--bg-primary);
}

.input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-secondary);
}

.input[readonly] {
    background: var(--bg-secondary);
    cursor: default;
}

/* Input Sizes */
.input-sm {
    height: var(--input-height-sm);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
}

.input-lg {
    height: var(--input-height-lg);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-lg);
}

/* Input States */
.input-error {
    border-color: var(--color-danger);
}

.input-error:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px hsla(var(--hue-danger) var(--sat-danger) var(--lit-danger) / 0.25);
}

.input-success {
    border-color: var(--color-success);
}

.input-success:focus {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px hsla(var(--hue-success) var(--sat-success) var(--lit-success) / 0.25);
}

.input-warning {
    border-color: var(--color-warning);
}

.input-warning:focus {
    border-color: var(--color-warning);
    box-shadow: 0 0 0 3px hsla(var(--hue-warning) var(--sat-warning) var(--lit-warning) / 0.25);
}

/* ── INPUT WITH ICON ─────────────────────────────────────────── */

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: var(--space-3);
    width: var(--icon-size);
    height: var(--icon-size);
    pointer-events: none;
    filter: var(--icon-filter);
    opacity: 0.7;
}

.input-with-icon {
    padding-left: var(--space-10);
}

.input-icon-right {
    left: auto;
    right: var(--space-3);
}

.input-with-icon-right {
    padding-left: var(--input-padding-x);
    padding-right: var(--space-10);
}

/* ── TEXTAREA ────────────────────────────────────────────────── */

.textarea {
    min-height: var(--space-24);
    resize: vertical;
    line-height: var(--leading-relaxed);
}

.textarea-no-resize {
    resize: none;
}

/* ── SELECT ──────────────────────────────────────────────────── */

/* Native Auswahllisten liegen ausserhalb des gestylten Select-Feldes. Ohne
   eigene Optionsfarben fallen Chromium/Windows dort auf Weiss zurueck. */
select option,
select optgroup {
    background-color: var(--bg-input);
    color: var(--text-primary);
}

select option:checked {
    background-color: var(--color-primary);
    color: var(--text-primary);
}

select option:disabled {
    color: var(--text-muted);
}

.select {
    width: 100%;
    height: var(--input-height);
    padding: var(--input-padding-y) var(--space-8) var(--input-padding-y) var(--input-padding-x);
    background: var(--bg-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right var(--space-3) center;
    background-size: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: 
        border-color var(--duration-150) var(--ease-in-out),
        box-shadow var(--duration-150) var(--ease-in-out);
}

.select:hover:not(:disabled):not(:focus) {
    border-color: var(--border-strong);
}

.select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

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

.select-sm {
    height: var(--input-height-sm);
    font-size: var(--text-sm);
}

.select-lg {
    height: var(--input-height-lg);
    font-size: var(--text-lg);
}

/* ── CHECKBOX ────────────────────────────────────────────────── */

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
}

.checkbox {
    width: var(--space-5);
    height: var(--space-5);
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: all var(--duration-150) var(--ease-in-out);
    display: grid;
    place-items: center;
}

.checkbox:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox:checked::after {
    content: '✓';
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: bold;
}

.checkbox:hover:not(:disabled) {
    border-color: var(--border-strong);
}

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

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

/* ── RADIO ───────────────────────────────────────────────────── */

.radio-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
}

.radio {
    width: var(--space-5);
    height: var(--space-5);
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    transition: all var(--duration-150) var(--ease-in-out);
    display: grid;
    place-items: center;
}

.radio:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.radio:checked::after {
    content: '';
    width: var(--space-2);
    height: var(--space-2);
    background: var(--text-primary);
    border-radius: var(--radius-full);
}

.radio:hover:not(:disabled) {
    border-color: var(--border-strong);
}

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

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

/* ── TOGGLE / SWITCH ─────────────────────────────────────────── */

.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.toggle {
    position: relative;
    width: 48px;
    height: 24px;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-150) var(--ease-in-out);
    flex-shrink: 0;
}

.toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--text-muted);
    border-radius: var(--radius-full);
    transition: all var(--duration-150) var(--ease-in-out);
}

.toggle:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.toggle:checked::after {
    transform: translateX(24px);
    background: var(--text-primary);
}

.toggle:hover:not(:disabled) {
    border-color: var(--border-strong);
}

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

/* ── RANGE SLIDER ────────────────────────────────────────────── */

.range {
    width: 100%;
    height: var(--range-height);
    background: var(--bg-input);
    border-radius: var(--radius-full);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    background: var(--color-primary);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: transform var(--duration-150) var(--ease-out);
}

.range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.range::-moz-range-thumb {
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: transform var(--duration-150) var(--ease-out);
}

.range::-moz-range-thumb:hover {
    transform: scale(1.2);
}

.range::-webkit-slider-runnable-track {
    height: var(--range-height);
    background: var(--bg-input);
    border-radius: var(--radius-full);
}

.range::-moz-range-track {
    height: var(--range-height);
    background: var(--bg-input);
    border-radius: var(--radius-full);
    border: none;
}

/* ── FILE UPLOAD ─────────────────────────────────────────────── */

.file-input {
    display: none;
}

.file-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-input);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-150) var(--ease-in-out);
}

.file-label:hover {
    border-color: var(--color-primary);
    background: var(--bg-hover);
}

.file-label .icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    filter: var(--icon-filter);
}

/* ── FORM LAYOUT ─────────────────────────────────────────────── */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.form-horizontal {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: center;
}

.form-horizontal .form-group {
    margin-bottom: 0;
}

.form-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.form-actions-end {
    justify-content: flex-end;
}

.form-actions-center {
    justify-content: center;
}

.form-actions-stretch {
    justify-content: stretch;
}

.form-actions-stretch .btn {
    flex: 1;
}

/* ── INPUT GROUPS ────────────────────────────────────────────── */

.input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.input-group .input,
.input-group .select {
    flex: 1;
    border-radius: 0;
}

.input-group .input:first-child,
.input-group .select:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group .input:last-child,
.input-group .select:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group-btn {
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.input-group-btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-right: none;
}

.input-group-btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: none;
}

/* ── SEARCH INPUT ────────────────────────────────────────────── */

.search-input-wrapper {
    position: relative;
}

.search-input {
    padding-left: var(--space-10);
}

.search-clear {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: var(--space-6);
    height: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: all var(--duration-150) var(--ease-in-out);
}

.search-clear:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ── NUMBER INPUT ────────────────────────────────────────────── */

.number-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.number-input-controls {
    position: absolute;
    right: var(--space-1);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.number-input-btn {
    width: var(--space-6);
    height: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-150) var(--ease-in-out);
    font-size: var(--text-xs);
    line-height: 1;
}

.number-input-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.number-input-btn:first-child {
    margin-bottom: 2px;
}

.number-input-with-controls {
    padding-right: var(--space-8);
}

/* ── RÜCKWÄRTSKOMPATIBILITÄT ─────────────────────────────────── */

/* Aliase für alten Code */
.modal-input {
    composes: input;
}

.dropdown-container select {
    composes: select;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL COMPONENT – Design System 2.0
   Wiederverwendbare Modal/Dialog-Klassen
   ═══════════════════════════════════════════════════════════════ */

/* ── MODAL BACKDROP ──────────────────────────────────────────── */

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--modal-backdrop, var(--overlay-heavy));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity var(--duration-300) var(--ease-out),
        visibility var(--duration-300) var(--ease-out);
}

.modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* ── MODAL CONTAINER ─────────────────────────────────────────── */

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    width: 90%;
    max-width: var(--modal-max-width, 40rem);
    max-height: var(--modal-max-height, 85vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(-20px);
    transition: transform var(--duration-300) var(--ease-out);
}

.modal-backdrop.active .modal {
    transform: scale(1) translateY(0);
}

/* ── MODAL SIZES ─────────────────────────────────────────────── */

.modal-sm {
    max-width: 20rem;    /* 320px */
}

.modal-md {
    max-width: 30rem;    /* 480px */
}

.modal-lg {
    max-width: 50rem;    /* 800px */
}

.modal-xl {
    max-width: 70rem;    /* 1120px */
}

.modal-full {
    max-width: 95vw;
    max-height: 95vh;
}

/* ── MODAL HEADER ────────────────────────────────────────────── */

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-primary);
}

.modal-header-no-border {
    border-bottom: none;
}

.modal-title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0;
    line-height: var(--leading-tight);
}

.modal-subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* ── MODAL CLOSE BUTTON ──────────────────────────────────────── */

.modal-close {
    width: var(--space-8);
    height: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--duration-150) var(--ease-in-out);
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

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

.modal-close .icon {
    width: var(--space-5);
    height: var(--space-5);
}

/* ── MODAL BODY ──────────────────────────────────────────────── */

.modal-body {
    padding: var(--space-6);
    overflow-y: auto;
    flex-grow: 1;
}

.modal-body-no-padding {
    padding: 0;
}

/* ── MODAL CONTENT ───────────────────────────────────────────── */

.modal-content {
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.modal-content p {
    margin-bottom: var(--space-4);
}

.modal-content p:last-child {
    margin-bottom: 0;
}

/* ── MODAL FORM ──────────────────────────────────────────────── */

.modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.modal-form .form-group {
    margin-bottom: 0;
}

/* ── MODAL FOOTER ────────────────────────────────────────────── */

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-primary);
    flex-shrink: 0;
}

.modal-footer-no-border {
    border-top: none;
}

.modal-footer-center {
    justify-content: center;
}

.modal-footer-stretch {
    justify-content: stretch;
}

.modal-footer-stretch .btn {
    flex: 1;
}

/* ── MODAL VARIANTS ──────────────────────────────────────────── */

/* Danger Modal */
.modal-danger {
    border-color: var(--color-danger);
}

.modal-danger .modal-header {
    background: linear-gradient(135deg, hsla(350 85% 60% / 0.1), transparent);
}

/* Success Modal */
.modal-success {
    border-color: var(--color-success);
}

.modal-success .modal-header {
    background: linear-gradient(135deg, hsla(145 55% 50% / 0.1), transparent);
}

/* Warning Modal */
.modal-warning {
    border-color: var(--color-warning);
}

.modal-warning .modal-header {
    background: linear-gradient(135deg, hsla(30 90% 55% / 0.1), transparent);
}

/* GM Modal */
.modal-gm {
    border-color: var(--color-gm);
}

.modal-gm .modal-header {
    background: linear-gradient(135deg, hsla(280 65% 45% / 0.1), transparent);
}

/* ── MODAL ANIMATIONS ────────────────────────────────────────── */

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-40px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-40px) scale(0.9);
    }
}

.modal-animate-in {
    animation: modalSlideIn var(--duration-300) var(--ease-out);
}

.modal-animate-out {
    animation: modalSlideOut var(--duration-300) var(--ease-in);
}

/* ── MODAL SCROLLBAR ─────────────────────────────────────────── */

.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-md);
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ── MODAL UTILITY CLASSES ───────────────────────────────────── */

.modal-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-4) 0;
}

.modal-text-center {
    text-align: center;
}

.modal-text-muted {
    color: var(--text-muted);
}

.modal-mt-0 {
    margin-top: 0;
}

.modal-mb-0 {
    margin-bottom: 0;
}

/* Theme-spezifische Modal-Styles gehören in die jeweilige Theme-Datei
   unter styles/themes/. Siehe z. B. cyberpunk.css, dark-souls.css. */

/* ═══════════════════════════════════════════════════════════════
   SUBSKILL COMPONENT – Design System 2.0
   Styles für aufklappbare Subskill-Listen (Skills & Attribute)
   Ersetzt alle Inline-Styles aus subskill-system.js
   ═══════════════════════════════════════════════════════════════ */

/* ── ICONS (Attribute & Skill) ────────────────────────────────── */

.attribute-icon,
.skill-icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--space-1);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--icon-color);
    cursor: pointer;
    transition: background-color var(--duration-200);
}

.attribute-icon:hover,
.skill-icon:hover {
    background-color: var(--color-accent-light);
}

/* ── SUBSKILL LIST CONTAINER ──────────────────────────────────── */

.subskill-list-cell {
    padding: var(--space-2) 5%;
    animation: none;
}

.subskill-list-wrapper {
    background: var(--bg-card);
    padding: var(--space-2);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    text-align: center;
}

/* ── SUBSKILL LIST ────────────────────────────────────────────── */

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

/* ── SUBSKILL ITEM ────────────────────────────────────────────── */

.subskill-item {
    margin: var(--space-1) 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    background: var(--bg-secondary);
    transition:
        transform var(--duration-300) var(--ease-in-out),
        box-shadow var(--duration-300) var(--ease-in-out);
}

.subskill-item.active {
    background: hsl(var(--hue-success) var(--sat-success) var(--lit-success) / 0.5);
}

/* Passive Attribut-Subskills: immer aktiv, kein Toggle */
.subskill-item.passive {
    background: hsl(var(--hue-success) var(--sat-success) var(--lit-success) / 0.3);
    cursor: default;
}

.subskill-item:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-glow-success);
}

/* ── SUBSKILL NAME SPAN ───────────────────────────────────────── */

.subskill-name {
    margin-left: 30px; /* Platz für das Info-Icon */
    flex-grow: 1;
}

/* ── SUBSKILL STATUS ICON ─────────────────────────────────────── */

.subskill-status-icon {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-strong);
    flex-shrink: 0;
    margin-left: var(--space-2);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.subskill-status-icon.active {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

/* ── PASSIVE LABEL ────────────────────────────────────────────── */

.subskill-passive-label {
    font-size: var(--text-xs);
    color: var(--color-success);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    margin-left: var(--space-2);
}

/* ── SUBSKILL INDICATOR (Badge in der Skills-Tabelle) ─────────── */

.subskill-indicator {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 2px 6px;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    min-width: 16px;
    text-align: center;
    vertical-align: middle;
    transition: all var(--duration-200);
}

.subskill-indicator.active {
    background-color: hsl(var(--hue-success) var(--sat-success) var(--lit-success) / 0.8);
    color: white;
    box-shadow: 0 0 8px hsl(var(--hue-success) var(--sat-success) var(--lit-success) / 0.4);
    border: 1px solid var(--color-success);
}

.subskill-indicator.inactive {
    background-color: var(--overlay-medium);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

/* Count-based color variants */
.subskill-indicator.few {
    background-color: hsl(var(--hue-success) var(--sat-success) var(--lit-success) / 0.8);
    color: white;
}

.subskill-indicator.many {
    background-color: hsl(var(--hue-warning) var(--sat-warning) var(--lit-warning) / 0.8);
    color: white;
}

.subskill-indicator.lots {
    background-color: hsl(var(--hue-danger) var(--sat-danger) var(--lit-danger) / 0.8);
    color: white;
}

.subskill-indicator.pulse {
    /* no animation – color alone is enough feedback */
}

.subskill-indicator:hover {
    transform: scale(1.1);
    cursor: help;
}

/* ── SUBSKILL TOOLTIP DETAILS ─────────────────────────────────── */

.subskill-tooltip-header {
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gold);
}

.subskill-tooltip-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-size: var(--text-xs);
}

.subskill-tooltip-label {
    color: var(--text-muted);
}

.subskill-tooltip-value {
    color: var(--text-secondary);
    font-weight: var(--font-weight-bold);
}

.subskill-tooltip-value.val-penalty {
    color: var(--color-error);
}

.subskill-tooltip-value.val-success {
    color: var(--color-success);
}

.subskill-tooltip-value.val-inactive {
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   ZWEI ARTEN VON FLAECHE AUF DIESER SEITE (W10, 20.08.2026)
   ─────────────────────────────────────────────────────────────────────────
   Die Weltkarte ist ein dunkles Three.js-Rendering, das den ganzen Bildschirm
   fuellt. Daraus folgt eine Unterscheidung, die beim Umstellen auf Tokens
   NICHT verwischt werden darf:

   1. Was AUF der Leinwand liegt – POI-Beschriftungen, Popups, Zeichenhinweise,
      Kalibrierungsmarken, die Uhr – muss dunkel bleiben und hell beschriftet
      sein, in JEDEM Theme. Ein helles Theme wuerde diese Elemente auf dem
      dunklen Kartenbild unlesbar machen. Sie benutzen die `--geo-surface-*`
      Werte unten und folgen dem Theme bewusst NICHT.

   2. Was NEBEN der Leinwand steht – Dialoge, Werkzeugleiste, Formularfelder –
      ist gewoehnliche Oberflaeche und folgt dem Theme wie der Rest der
      Anwendung.

   Wer diese Grenze aufhebt, macht entweder die Karte unlesbar oder die
   Dialoge zum Fremdkoerper.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
    /* Flaechen AUF der Kartenleinwand – bewusst themeunabhaengig. */
    --geo-surface:         rgb(10 10 20 / 0.75);
    --geo-surface-strong:  rgb(10 10 20 / 0.92);
    --geo-surface-solid:   rgb(10 10 20 / 0.96);
    --geo-on-surface:      #eee;
    --geo-on-surface-weak: #888;
    /* Abdunkelung hinter einem Dialog. Ein Schleier ist immer dunkel. */
    --geo-scrim:           rgb(0 0 0 / 0.72);

    /* SIGNALFARBEN DER ZEICHENMODI.
       Jede entspricht dem, was dabei auf der Karte erscheint: Gold fuer die
       Kalibrierungsmarken, Orange fuer die Zonenkontur, Blau fuer das
       Neupositionieren. Sie duerfen sich mit dem Theme NICHT aendern, sonst
       stimmt der Hinweis am Rand nicht mehr mit der Farbe auf der Karte
       ueberein. */
    --geo-signal-calib:  255 200 0;
    --geo-signal-zone:   255 140 0;
    --geo-signal-move:   0 180 255;
}

/* ── GEO-OVERLAY ───────────────────────────────────────────────────────────
   Gemeinsame Styles für globe.php und flat-world.php:
   Uhr, Control-Panel, POI-Labels, Popup, Kalibrierungsmarker,
   Zonen-Zeichnen und Geo-Modal.
   ─────────────────────────────────────────────────────────────────────── */

/* ── BASE ─────────────────────────────────────────────────────────────── */

.geo-canvas-page {
    margin: 0;
    background: #000;
    overflow: hidden;
    height: 100vh;
}

/* ── UHRZEIT-ANZEIGE ──────────────────────────────────────────────────── */

.geo-clock {
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--geo-surface);
    backdrop-filter: blur(6px);
    border: 1px solid var(--bg-hover);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-2) var(--space-4);
}

.geo-clock__day {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.geo-clock__time {
    font-size: 1.4rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    min-width: 7ch;
    text-align: center;
}

/* ── CONTROL-PANEL ────────────────────────────────────────────────────── */

.geo-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    background: var(--geo-surface-strong);
    backdrop-filter: blur(8px);
    border-left: 1px solid var(--bg-hover);
    padding: var(--space-8) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    z-index: 15;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
}

.geo-panel.open { transform: translateX(0); }

.ctrl-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ctrl-group h4 {
    margin: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--bg-hover);
    padding-bottom: var(--space-1);
}

.ctrl-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ctrl-row label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    min-width: 90px;
}

.ctrl-row input[type="range"] {
    flex: 1;
    cursor: pointer;
    accent-color: var(--color-primary, var(--color-primary));
}

.ctrl-row .val {
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 38px;
    text-align: right;
}

.ctrl-group .btn { width: 100%; }

.btn-row { display: flex; gap: var(--space-2); }
.btn-row .btn { flex: 1; }

/* ── POI-LABEL ────────────────────────────────────────────────────────── */

.poi-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 4px;
    transform: translate(-50%, -50%);
    background: var(--geo-scrim);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 3px 8px;
    font-size: 11px;
    color: var(--text-primary);
    cursor: pointer;
    pointer-events: all;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}

.poi-label:hover {
    background: var(--border-subtle);
    border-color: var(--text-muted);
}

.poi-label.poi-zone {
    background: var(--geo-surface);
    border-style: dashed;
    border-color: var(--geo-accent-ruler);
    color: var(--geo-accent-ruler);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.poi-label.poi-zone:hover {
    background: rgb(255 220 100 / 0.1);
}

.poi-icon { font-size: 13px; line-height: 1; }

/* ── POI-POPUP ────────────────────────────────────────────────────────── */

.poi-popup {
    position: fixed;
    display: none;
    width: 240px;
    background: var(--geo-surface-solid);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    padding: 12px;
    z-index: 12;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
    color: var(--geo-on-surface);
}

.popup-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.popup-icon    { font-size: 22px; line-height: 1; flex-shrink: 0; }
.popup-title   { flex: 1; }
.popup-name    { font-size: 14px; font-weight: 600; line-height: 1.3; }
.popup-cat     { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.popup-close   { background: none; border: none; color: var(--geo-on-surface-weak); cursor: pointer; font-size: 18px; padding: 0; line-height: 1; flex-shrink: 0; }
.popup-close:hover { color: var(--text-primary); }
.popup-desc    { font-size: 12px; color: var(--text-secondary); margin: 4px 0 8px; max-height: 80px; overflow-y: auto; line-height: 1.5; }
.popup-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.popup-wiki    { flex: 1; font-size: 11px; text-align: center; }

/* ── KALIBRIERUNGSMARKER ─────────────────────────────────────────────── */

.calib-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgb(var(--geo-signal-calib) / 0.15);
    border: 2px solid rgb(var(--geo-signal-calib) / 0.75);
    color: var(--geo-accent-poi);
    font-size: 10px;
    font-weight: bold;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 11;
}

/* ── ZONEN-DRAWING ───────────────────────────────────────────────────── */

.zone-draw-hint {
    display: none;
    position: fixed;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    background: rgb(var(--geo-signal-zone) / 0.12);
    border: 1px solid rgb(var(--geo-signal-zone) / 0.4);
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 12px;
    color: #ffe8c0;
    z-index: 10;
    pointer-events: none;
}

.zone-vertex-dot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgb(var(--geo-signal-zone) / 0.85);
    border: 2px solid var(--text-primary);
    color: var(--text-primary);
    font-size: 9px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.zone-vertex-dot.zone-vertex-first {
    background: var(--text-primary);
    color: #c06000;
    border-color: var(--geo-accent-zone);
}

.zone-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 0;
    font-size: 11px;
    color: var(--text-secondary);
}

.zone-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.zone-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-toggle-btn,
.zone-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
    opacity: 0.6;
}

.zone-toggle-btn:hover,
.zone-delete-btn:hover { opacity: 1; }

/* ── GEO-MODAL (POI hinzufügen, Zone speichern) ──────────────────────── */

.geo-modal {
    position: fixed;
    inset: 0;
    background: var(--geo-scrim);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 30;
}

.geo-modal-inner {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 24px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.geo-modal-inner h3 {
    margin: 0;
    font-size: 15px;
    color: var(--text-primary);
}

.geo-modal-inner input,
.geo-modal-inner textarea,
.geo-modal-inner select {
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.geo-modal-inner textarea { resize: vertical; min-height: 64px; }
.geo-modal-inner select option { background: var(--bg-card); }

.geo-modal-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.geo-modal-row input[type="range"] {
    flex: 1;
    accent-color: var(--color-primary, var(--color-primary));
}

.geo-modal-btns { display: flex; gap: 8px; }
.geo-modal-btns .btn { flex: 1; }

.geo-modal-uv {
    font-size: 10px;
    color: var(--border-subtle);
    font-family: monospace;
    margin: 0;
}

/* ── AKTIONS-HINTS (Reposition, Kalibrierung, POI setzen) ─────────────── */

.geo-hint {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 12px;
    z-index: 10;
    pointer-events: none;
}

.geo-hint--reposition {
    background: rgb(var(--geo-signal-move) / 0.12);
    border: 1px solid rgb(var(--geo-signal-move) / 0.35);
    color: #cef;
}

.geo-hint--calib {
    background: rgb(var(--geo-signal-calib) / 0.12);
    border: 1px solid rgb(var(--geo-signal-calib) / 0.35);
    color: #ffe;
}

.geo-hint--poi {
    background: var(--bg-hover);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

/* ── ZOOM-BAND-INFO ─────────────────────────────────────────────────── */

.level-thresh-block {
    border-left: 2px solid var(--bg-hover);
    padding-left: 6px;
    margin-bottom: 6px;
}

.level-thresh-name {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

/* ── MOBILE / TOUCH ──────────────────────────────────────────────────── */
/* pointer: coarse = Touchscreen, Stylus usw.                             */

@media (pointer: coarse) {

    /* Panel: schiebt sich von unten hoch, volle Breite */
    .geo-panel {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 80vh;
        border-left: none;
        border-top: 1px solid var(--border-subtle);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        padding-top: var(--space-6);
        /* Drag-Handle-Pseudo-Element */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .geo-panel.open { transform: translateY(0); transform: translateX(0) translateY(0); }

    /* Drag-Handle oben im Panel */
    .geo-panel::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--border-subtle);
        border-radius: 2px;
        margin: calc(var(--space-2) * -1) auto var(--space-4);
        flex-shrink: 0;
    }

    /* Größere Touch-Ziele für Panel-Buttons */
    .ctrl-group .btn {
        min-height: 44px;
        font-size: 0.9rem;
    }

    .btn-row .btn {
        min-height: 44px;
    }

    /* Slider etwas höher für bessere Bedienbarkeit */
    .ctrl-row input[type="range"] {
        height: 28px;
    }

    /* POI-Labels größer für Finger-Taps */
    .poi-label {
        font-size: 13px;
        padding: 5px 12px;
        border-radius: 16px;
        gap: 6px;
        min-height: 32px;
    }

    .poi-icon { font-size: 16px; }

    /* POI-Popup: zentriert am unteren Bildschirmrand (kein Cursor-Offset) */
    .poi-popup {
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: 80px !important;
        transform: translateX(-50%) !important;
        width: min(calc(100vw - 32px), 340px) !important;
    }

    /* Zone-Vertex-Dots größer */
    .zone-vertex-dot {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    /* Hinweis-Texte größer */
    .zone-draw-hint,
    .geo-hint {
        font-size: 13px;
        padding: 10px 20px;
    }

    /* Modals: auf kleinen Screens breiter */
    .geo-modal-inner {
        width: min(calc(100vw - 32px), 340px);
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Input-Felder in Modals 16px Mindestgröße → verhindert iOS-Autozoom */
    .geo-modal-inner input[type="text"],
    .geo-modal-inner input[type="number"],
    .geo-modal-inner textarea,
    .geo-modal-inner select {
        font-size: 16px;
        min-height: 40px;
    }

    /* Kalibrierungsmarker etwas größer */
    .calib-marker {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Werkzeugleiste und Fachbereichs-Dialoge (W6 des Weltkarten-Plans)
   ─────────────────────────────────────────────────────────────────────────
   Ersetzt das fruehere Schubladenpanel (.geo-panel) mit neun untereinander
   gestapelten Gruppen. Wer eine Linie bearbeiten wollte, scrollte vorher an
   Zeit, Bahn, Sonne, Speichern, POIs, Zoom-Schwellen, Lineal und Zonen vorbei.

   Durchgehend Tokens: die Karte war bisher mit hartkodierten Farben gegen das
   Theme-System immunisiert (Abschnitt 3.5 des Plans). Neuer Code faengt damit
   nicht wieder an.
   ═════════════════════════════════════════════════════════════════════════ */

.geo-toolbar {
    position: fixed;
    top: 50%;
    left: var(--space-3);
    transform: translateY(-50%);
    z-index: var(--z-map-ui);

    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);

    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);

    /* Auf flachen Fenstern (Laptop im Querformat, geteilter Bildschirm) waere
       die Leiste sonst hoeher als der Platz zwischen „Zurueck" oben links und
       dem Ansichtswechsel unten. Gemessen: unterhalb von rund 400 px Hoehe
       ueberlappte sie den Zurueck-Knopf. Sie scrollt dann lieber in sich. */
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.geo-toolbar__sep {
    height: 1px;
    margin: var(--space-1) var(--space-1);
    background: var(--border-subtle);
}

/* Zweistufig gegen die Theme-Regel `[data-theme] button` (0,1,1):
   ein einklassiger Selektor verliert dagegen und der Knopf saehe aus wie eine
   Haupt-Aktion. Siehe CLAUDE.md Abschnitt 6. */
.geo-toolbar button:not(.btn) {
    background: none;
    border: none;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    font-weight: normal;
}

.geo-toolbar button.geo-toolbar__btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);

    width: 100%;
    padding: var(--space-2);

    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);

    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.geo-toolbar button.geo-toolbar__btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.geo-toolbar button.geo-toolbar__btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Der geoeffnete Bereich bleibt in der Leiste markiert. */
.geo-toolbar button.geo-toolbar__btn[aria-expanded="true"] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--color-accent);
}

.geo-toolbar__icon {
    flex-shrink: 0;
    width: 1.25em;
    font-size: 1.05rem;
    line-height: 1;
    text-align: center;
}

.geo-toolbar__label { white-space: nowrap; }

/* ── Fachbereichs-Dialog ────────────────────────────────────────────────── */

.geo-tool-modal__inner {
    width: min(360px, calc(100vw - var(--space-8)));
    max-height: min(80vh, 720px);
    padding: 0;
    gap: 0;
}

.geo-tool-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.geo-tool-modal__head h3 { margin: 0; }

.geo-tool-modal button:not(.btn) {
    background: none;
    border: none;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}

.geo-tool-modal button.geo-tool-modal__close {
    flex-shrink: 0;
    padding: 0 var(--space-1);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.geo-tool-modal button.geo-tool-modal__close:hover { color: var(--text-primary); }

.geo-tool-modal button.geo-tool-modal__close:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.geo-tool-modal__body {
    padding: var(--space-4);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Die ctrl-group-Bloecke stammen unveraendert aus dem alten Panel. Im Dialog
   brauchen sie keinen eigenen Rahmen mehr - der Dialog ist der Rahmen. */
.geo-tool-modal__body .ctrl-group {
    padding: 0;
    border: none;
    margin: 0;
}

.geo-tool-modal__body .ctrl-group + .ctrl-group {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

/* ── Schmale Fenster: Leiste an den unteren Rand ────────────────────────── */

@media (max-width: 768px) {
    /* Die Leiste bleibt LINKS und wird schmal, statt an den unteren Rand zu
       wandern. Unten sitzen bereits `#view-switch` und die Hinweiszeilen
       (Lineal, POI setzen, Neupositionieren) - eine waagerechte Leiste haette
       sie alle verdraengt und eine Kettenverschiebung ausgeloest. Links kostet
       sie mit Symbolen allein rund 44 px. */
    .geo-toolbar {
        left: var(--space-2);
        padding: var(--space-1);
        gap: 2px;
    }

    /* Auf dem Telefon zaehlt die Flaeche: nur noch die Symbole. */
    .geo-toolbar__label { display: none; }

    .geo-toolbar button.geo-toolbar__btn {
        justify-content: center;
        padding: var(--space-2);
    }

    /* Der Drehregler gegenueber ebenfalls kompakter. */
    #rotation-slider-wrap { right: var(--space-2); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Rueckfragen und Meldungen (GeoPrompt) – Ersatz fuer alert()/confirm()
   ═════════════════════════════════════════════════════════════════════════ */

.geo-prompt__inner {
    width: min(400px, calc(100vw - var(--space-8)));
    gap: var(--space-4);
}

.geo-prompt__head h3 { margin: 0; }

.geo-prompt__text {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.55;
}

.geo-prompt__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* Die Knoepfe tragen .btn und sollen deshalb GENAU so aussehen wie ueberall
   sonst. Hier wird nur die Breite geregelt, nichts umgefaerbt. */
.geo-prompt__actions .btn.geo-prompt__btn { min-width: 7rem; }

/* ── Meldungen ──────────────────────────────────────────────────────────── */

.geo-notify {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-map-ui);

    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: min(380px, calc(100vw - var(--space-8)));
    pointer-events: none;   /* die Karte darunter bleibt bedienbar */
}

.geo-notify__item {
    padding: var(--space-3) var(--space-4);

    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--text-muted);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);

    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.5;

    pointer-events: auto;   /* zum Wegklicken */
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.geo-notify__item--fehler  { border-left-color: var(--color-danger); }
.geo-notify__item--erfolg  { border-left-color: var(--color-success); }
.geo-notify__item--info    { border-left-color: var(--color-accent); }

.geo-notify__item--faded {
    opacity: 0;
    transform: translateX(var(--space-4));
}

@media (max-width: 768px) {
    /* Oben rechts sitzt auf schmalen Fenstern die Uhr. */
    .geo-notify {
        top: auto;
        bottom: var(--space-4);
        left: var(--space-2);
        right: var(--space-2);
        max-width: none;
    }
}

/* Erklaerender Zusatz in einem Fachbereichs-Dialog. */
.geo-hint-text {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   Formularelemente der Kartendialoge (W10)
   ─────────────────────────────────────────────────────────────────────────
   Vorher standen Hintergrund, Rahmen und Schriftfarbe als Inline-Stil an
   jedem einzelnen Feld – teils als `rgba(255,255,255,0.08)`, teils als
   `var(--bg-surface)`. Letzteres ist im Projekt NIRGENDS definiert (nur lokal
   in index.php): im Browser nachgemessen ergab es `rgba(0,0,0,0)`, die Felder
   hatten also gar keinen Hintergrund.

   SPEZIFITAET: alle 24 Themes setzen `[data-theme="x"] input` (0,1,1) mit
   Verlauf, eigenem Rahmen und Innenschatten. Ein einklassiger Selektor
   `.geo-field` (0,1,0) verliert dagegen. Deshalb zweistufig mit (0,2,1) –
   siehe CLAUDE.md Abschnitt 6. Und `background` als KURZFORM, nicht
   `background-color`: sonst bleibt der Verlauf des Themes darueber liegen.
   ═════════════════════════════════════════════════════════════════════════ */

.geo-modal input.geo-field,
.geo-modal select.geo-field,
.geo-modal textarea.geo-field {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    box-shadow: none;
}

/* Die Fokusregel der Themes ist `[data-theme] input:focus` (0,1,2) –
   die eigene braucht (0,2,2). */
.geo-modal input.geo-field:focus,
.geo-modal select.geo-field:focus,
.geo-modal textarea.geo-field:focus {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
    border-color: var(--color-accent);
}

/* Zahlenfeld: rechtsbuendig mit Tabellenziffern, damit die Werte untereinander
   stehen und beim Ziehen am Regler nicht springen. */
.geo-modal input.geo-field--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Farbwaehler: der Browser zeichnet die Flaeche selbst, jeder Rahmen und
   Hintergrund von uns waere nur ein Rand darum. */
.geo-modal input.geo-swatch {
    width: 48px;
    height: 26px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

/*  Ankreuzfelder der Kartenebenen.

    Diese Farben sind FACHFARBEN, keine Themefarben: Gold steht fuer Orte,
    Orange fuer Zonen, Blau fuer Linien – dieselbe Zuordnung wie auf der Karte
    selbst. Sie sollen sich mit dem Theme NICHT aendern, sonst stimmt das
    Ankreuzfeld nicht mehr mit dem ueberein, was es ein- und ausblendet.
    Zentral hier statt fuenfmal inline. */
:root {
    --geo-accent-poi:  #ffd700;
    --geo-accent-zone: #ff8c00;
    --geo-accent-line: #4da3ff;

    /* Das Lineal zeichnet seine Linie und Marken auf der Karte in Gelb; die
       Messwerte im Dialog tragen dieselbe Farbe, damit Zahl und Linie
       zusammengehoeren. Ebenfalls eine Fachfarbe, kein Themewert. */
    --geo-accent-ruler: rgb(255 220 100 / 0.9);

    /* Grund der Detailkarten-Vorschau. Sie zeigt ein Three.js-Rendering der
       Karte; ein heller Grund unter einem dunklen Kartenbild waere ein
       leuchtender Rand darum, in JEDEM Theme. */
    --geo-preview-bg: #0a0a0f;
}

.geo-modal input.geo-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.geo-modal input.geo-check--poi  { accent-color: var(--geo-accent-poi); }
.geo-modal input.geo-check--zone { accent-color: var(--geo-accent-zone); }
.geo-modal input.geo-check--line { accent-color: var(--geo-accent-line); }

/* Kurze Statuszeile unter einer Gruppe (Zonen-/Linienzahl). */
.geo-tool-modal__body .geo-count {
    max-height: 120px;
    overflow-y: auto;
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

/* Auswahlfeld IM POI-Popup. Das Popup liegt auf der Kartenleinwand, also
   dieselbe themeunabhaengige Flaeche wie das Popup selbst - ein helles Feld
   waere darin ein leuchtender Fleck. Zweistufig wegen `[data-theme] select`. */
.poi-popup select.popup-field {
    background: var(--geo-surface-strong);
    color: var(--geo-on-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 1px var(--space-1);
    font-size: var(--font-size-xs);
    box-shadow: none;
}
/* ── NAV ICON BUTTON ───────────────────────────────────────────────────────
 * Einheitliche Icon-Buttons für Top-Navigationsleisten (char.php, gm-dashboard.php).
 * Größe und Form sind hier kanonisch – Hover-Effekte bleiben seitenspezifisch.
 */

:root {
    --nav-icon-btn-size:     40px;
    --nav-icon-btn-icon:     22px;
    --nav-icon-btn-radius:   var(--radius-md);
    --nav-icon-btn-bg:       var(--border-color);
    --nav-icon-btn-border:   var(--border-strong);
    --nav-icon-btn-bg-hover: var(--border-strong);
}

.nav-icon-btn {
    flex-shrink: 0;
    width:  var(--nav-icon-btn-size);
    height: var(--nav-icon-btn-size);
    background:    var(--nav-icon-btn-bg);
    border: 1px solid var(--nav-icon-btn-border);
    border-radius: var(--nav-icon-btn-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    padding: 0;
    margin: 0;
}

.nav-icon-btn:hover {
    background:   var(--nav-icon-btn-bg-hover);
    border-color: var(--nav-icon-btn-bg-hover);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.nav-icon-btn img,
.nav-icon-btn .tab_Icon {
    width:  var(--nav-icon-btn-icon);
    height: var(--nav-icon-btn-icon);
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ═══════════════════════════════════════════════════════════════
   CHAR IMPORT/EXPORT – Fully Namespaced Component
   Namespace: .import-modal-* / .icard-* / .iattr-* etc.
   Kein Konflikt mit main-style.css (.modal, button {}).
   ═══════════════════════════════════════════════════════════════ */

/* ── BACKDROP (hardcoded – kein CSS-Variable-Fallback-Problem) ─ */

.import-modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.88);
    z-index: 10000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.import-modal-wrapper.active {
    opacity: 1;
    visibility: visible;
}

/* ── MODAL BOX ───────────────────────────────────────────────── */

.import-modal-box {
    background: var(--bg-card, #1e1e2e);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 14px;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 0 80px rgba(139, 92, 246, 0.1);
    width: 100%;
    min-width: min(720px, 94vw);
    max-width: min(960px, 96vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96) translateY(-16px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.import-modal-wrapper.active .import-modal-box {
    transform: scale(1) translateY(0);
}

/* ── HEADER ──────────────────────────────────────────────────── */

.import-modal-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(139, 92, 246, 0.06));
    border-bottom: 1px solid rgba(139, 92, 246, 0.22);
}

.import-modal-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.import-modal-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary, #eee);
    margin: 0;
    line-height: 1.25;
}

.import-modal-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    margin: 0;
    letter-spacing: 0.02em;
}

.import-modal-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 8px;
    color: var(--text-muted, #888);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0 !important;
}

.import-modal-close:hover {
    background: rgba(255,255,255,0.12) !important;
    color: var(--text-primary, #eee);
}

.import-modal-close svg {
    width: 15px;
    height: 15px;
    pointer-events: none;
}

/* ── TAB BAR ─────────────────────────────────────────────────── */

.import-modal-tabs {
    flex-shrink: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 10px 20px 0;
    background: var(--bg-primary, #16162a);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    overflow-x: auto;
    scrollbar-width: none;
}

.import-modal-tabs::-webkit-scrollbar { display: none; }

.import-tab-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    border-radius: 7px 7px 0 0 !important;
    color: var(--text-muted, #888);
    padding: 7px 14px !important;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    bottom: -1px;
    overflow: hidden;
    max-width: 90px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.3;
}

.import-tab-btn:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    color: var(--text-secondary, #ccc);
    border-color: rgba(139, 92, 246, 0.3) !important;
}

.import-tab-btn.active {
    background: var(--bg-card, #1e1e2e) !important;
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.4) !important;
    border-bottom: 2px solid var(--bg-card, #1e1e2e) !important;
    font-weight: 600;
    max-width: none;
}

.import-tab-img {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.55;
    filter: var(--icon-filter, brightness(0) invert(1));
    object-fit: contain;
    transition: opacity 0.15s;
}

.import-tab-btn.active .import-tab-img {
    opacity: 1;
}

.import-tab-btn:hover .import-tab-img {
    opacity: 0.85;
}

.import-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── COLUMNS ─────────────────────────────────────────────────── */

.import-modal-columns {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.import-col {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.import-col::-webkit-scrollbar { width: 4px; }
.import-col::-webkit-scrollbar-track { background: transparent; }
.import-col::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 99px;
}

.import-col-current { border-right: 1px solid rgba(255,255,255,0.07); }

.import-col-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.import-col-current .import-col-label { color: var(--text-muted, #888); }
.import-col-import  .import-col-label { color: #c4b5fd; }

/* ── FOOTER ──────────────────────────────────────────────────── */

.import-modal-foot {
    flex-shrink: 0;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: var(--bg-primary, #16162a);
    min-height: 62px;
    box-sizing: border-box;
}

.import-diff-hint {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-diff-hint.has-diff { color: var(--color-warning, #f90); }
.import-diff-hint.no-diff  { color: var(--color-success, #4a4); }

/* Standalone Footer-Buttons – KEIN .btn/.btn-secondary Konflikt */

.import-btn-cancel,
.import-btn-confirm {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    height: 36px;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    text-decoration: none;
    line-height: 1;
}

.import-btn-cancel {
    background: rgba(255,255,255,0.08) !important;
    color: var(--text-secondary, #ccc);
    border: 1px solid rgba(255,255,255,0.15) !important;
}

.import-btn-cancel:hover {
    background: rgba(255,255,255,0.13) !important;
    color: var(--text-primary, #eee);
}

.import-btn-confirm {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #fff;
    border: none !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
}

.import-btn-confirm:hover {
    background: linear-gradient(135deg, #f87171, #ef4444) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   RICH CONTENT – Section Labels
   ═══════════════════════════════════════════════════════════════ */

.ic-section {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint, rgba(255,255,255,0.35));
    margin: 14px 0 6px;
    padding: 0 2px;
}

.ic-section:first-child { margin-top: 0; }

/* ── IDENTITY CARD ───────────────────────────────────────────── */

.icard-identity {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.icard-identity.ic-changed {
    background: rgba(251, 146, 60, 0.08);
    border-color: rgba(251, 146, 60, 0.4);
}

.icard-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #eee);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icard-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.ibadge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary, #ccc);
    border: 1px solid rgba(255,255,255,0.1);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ibadge.ic-changed {
    background: rgba(251, 146, 60, 0.15);
    border-color: rgba(251, 146, 60, 0.6);
    color: #fb923c;
}

/* ── RESOURCE TILES ──────────────────────────────────────────── */

.iresource-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

.iresource {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 3px solid var(--res-color, rgba(255,255,255,0.2));
    border-radius: 8px;
    padding: 8px 12px;
}

.iresource.ic-changed {
    background: rgba(251, 146, 60, 0.07);
    border-color: rgba(251, 146, 60, 0.4);
    border-left-color: #fb923c;
}

.iresource-hp  { --res-color: #4ade80; }
.iresource-mp  { --res-color: #60a5fa; }
.iresource-ed  { --res-color: #fbbf24; }
.iresource-exp { --res-color: #a78bfa; }

.iresource-icon  { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; color: var(--res-color, #aaa); }
.iresource-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, #888); width: 26px; flex-shrink: 0; }
.iresource-value { font-size: 1rem; font-weight: 700; color: var(--res-color, #eee); margin-left: auto; font-variant-numeric: tabular-nums; }
.ichange-arrow   { font-size: 11px; font-weight: 700; flex-shrink: 0; width: 12px; text-align: center; }
.ichange-arrow.up   { color: #4ade80; }
.ichange-arrow.down { color: #f87171; }

/* ── ATTRIBUTE GRID ──────────────────────────────────────────── */

.iattr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.iattr-tile {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 3px solid hsl(var(--attr-hue, 220), 65%, 58%);
    border-radius: 8px;
    padding: 10px 6px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}

.iattr-tile.ic-changed {
    background: rgba(251, 146, 60, 0.1);
    border-color: rgba(251, 146, 60, 0.5);
    border-top-color: #fb923c;
}

.iattr-tile.iattr-str   { --attr-hue: 0;   }
.iattr-tile.iattr-dex   { --attr-hue: 130; }
.iattr-tile.iattr-intel { --attr-hue: 275; }
.iattr-tile.iattr-con   { --attr-hue: 28;  }
.iattr-tile.iattr-agi   { --attr-hue: 48;  }
.iattr-tile.iattr-wil   { --attr-hue: 210; }
.iattr-tile.iattr-cha   { --attr-hue: 315; }
.iattr-tile.iattr-luk   { --attr-hue: 45;  }

.iattr-label { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted, #888); }
.iattr-value { font-size: 1.25rem; font-weight: 900; color: hsl(var(--attr-hue, 220), 65%, 68%); line-height: 1; font-variant-numeric: tabular-nums; }
.iattr-tile.ic-changed .iattr-value { color: #fb923c; }
.iattr-change { position: absolute; top: 4px; right: 5px; font-size: 9px; font-weight: 700; line-height: 1; }
.iattr-change.up   { color: #4ade80; }
.iattr-change.down { color: #f87171; }

/* ── ITEM GRID (nutzt item-tile aus inventory-style.css) ─────── */

.import-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

/* Compact Variante für den Vergleich (nur Kacheln, keine Actions) */
.import-item-grid .item-tile {
    min-height: 90px;
    padding: 8px 6px;
    cursor: default;
    font-size: 0.7rem;
}

.import-item-grid .item-tile .item-name {
    font-size: 0.65rem;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
    margin-top: 4px;
    line-height: 1.3;
}

.import-item-grid .item-tile .item-quantity {
    font-size: 10px;
    font-weight: 700;
    margin-top: 4px;
}

.import-item-count {
    font-size: 0.7rem;
    color: var(--text-muted, #888);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
}

.import-item-count.ic-changed {
    background: rgba(251, 146, 60, 0.1);
    color: #fb923c;
    border: 1px solid rgba(251, 146, 60, 0.3);
}

/* ── EQUIPMENT SLOTS ─────────────────────────────────────────── */

.iequip-list { display: flex; flex-direction: column; gap: 4px; }

.iequip-slot {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 7px;
}

.iequip-slot.ic-changed {
    background: rgba(251, 146, 60, 0.08);
    border-color: rgba(251, 146, 60, 0.4);
}

.iequip-slot-name {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #888);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iequip-item {
    font-size: 0.75rem;
    color: var(--text-primary, #eee);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.iequip-item.empty { color: rgba(255,255,255,0.25); font-style: italic; font-weight: 400; }
.iequip-slot.ic-changed .iequip-item { color: #fb923c; }

/* ── SKILL LIST ──────────────────────────────────────────────── */

.iskill-list { display: flex; flex-direction: column; gap: 4px; }

.iskill-tile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 7px;
    overflow: hidden;
}

.iskill-tile.ic-changed {
    background: rgba(251, 146, 60, 0.08);
    border-color: rgba(251, 146, 60, 0.4);
}

.iskill-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary, #eee);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.iskill-tile.ic-changed .iskill-name { color: #fb923c; }

.iskill-val {
    font-size: 0.8rem;
    font-weight: 700;
    color: hsl(130, 55%, 60%);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: right;
}

.iskill-tile.ic-changed .iskill-val { color: #fb923c; }

/* ── SPELL GRID (kompakt, nutzt .spell-tile aus spells-style.css) ─────── */

.import-spell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

/* Kompakte Variante: gleiche Struktur wie .spell-tile, aber kleiner */
.import-spell-grid .spell-tile {
    min-height: 100px;
    padding: 8px 6px 6px;
    cursor: default;
    font-size: 0.68rem;
}

.import-spell-grid .spell-tile .spell-icon-container {
    width: 42px;
    height: 42px;
}

.import-spell-grid .spell-tile .spell-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.import-spell-grid .spell-tile .spell-name {
    font-size: 0.65rem;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
}

.import-spell-grid .spell-tile .spell-cost {
    font-size: 10px;
    margin-top: 2px;
    color: var(--text-muted, #888);
}

/* ── BUFF LIST ───────────────────────────────────────────────── */

.ibuff-list { display: flex; flex-direction: column; gap: 4px; }

.ibuff-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(74, 222, 128, 0.07);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 7px;
    overflow: hidden;
}

.ibuff-name { font-size: 0.75rem; font-weight: 500; color: #4ade80; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibuff-dur  { font-size: 10px; color: var(--text-muted, #888); flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ── CURRENCY TILES ──────────────────────────────────────────── */

.iwallet-grid { display: flex; flex-direction: column; gap: 6px; }

.iwallet-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--currency-tile-bg, rgba(100, 80, 20, 0.15));
    border: 1px solid var(--currency-tile-border, rgba(200, 160, 50, 0.2));
    border-radius: 10px;
    transition: background 0.15s;
}

.iwallet-tile:hover { background: var(--currency-tile-hover-bg, rgba(100, 80, 20, 0.25)); }
.iwallet-icon   { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0; }
.iwallet-name   { font-size: 0.875rem; font-weight: 600; color: var(--text-primary, #eee); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iwallet-amount { font-size: 1rem; font-weight: 700; color: var(--color-gold, #ffd700); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ── NOTE COUNT ──────────────────────────────────────────────── */

.inote-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
    gap: 8px;
}

.inote-count.ic-changed { background: rgba(251, 146, 60, 0.08); border-color: rgba(251, 146, 60, 0.4); }
.inote-number { font-size: 3rem; font-weight: 900; color: var(--text-primary, #eee); line-height: 1; font-variant-numeric: tabular-nums; }
.inote-count.ic-changed .inote-number { color: #fb923c; }
.inote-label  { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted, #888); }

/* ── EMPTY STATE ─────────────────────────────────────────────── */

.import-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 8px;
}

.import-empty-icon { font-size: 2rem; opacity: 0.3; }
.import-empty-text { font-size: 0.75rem; font-style: italic; color: rgba(255,255,255,0.3); text-align: center; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 640px) {
    .import-modal-wrapper { padding: 0; }
    .import-modal-box { min-width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; }
    .import-modal-head, .import-modal-foot { padding: 12px 16px; }
    .import-modal-tabs { padding: 8px 12px 0; }
    .import-tab-btn { padding: 6px 8px !important; }
    .import-col { padding: 12px; }
    .iattr-grid { grid-template-columns: repeat(4, 1fr); }
    .import-item-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
    .import-modal-columns { flex-direction: column; }
    .import-col-current { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); max-height: 45vh; }
    .import-col { max-height: 45vh; }
    .import-item-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Effekt-Baukasten (js/effect-builder.js)
   Wird von den runicdb_*-Editoren unter dem Effekt-Feld eingeblendet.
   Ausschliesslich Design-Tokens – muss in allen Themes lesbar bleiben.

   ── Warum fast jede Regel mit `.fx-builder` beginnt ───────────────────────
   16 der 24 Themes stylen den nackten Element-Selektor `button`
   ([data-theme="x"] button { … }) mit Farbverlauf, GROSSBUCHSTABEN,
   Sperrschrift, Fettschrift und Schlagschatten – und die Theme-Datei laedt
   NACH dieser Komponente. Eine einklassige Regel wie `.fx-keybtn` (0,1,0)
   verliert deshalb gegen `[data-theme="x"] button` (0,1,1), und jeder
   Knopf im Baukasten sah aus wie ein Haupt-Aktionsknopf.

   Zwei Ebenen loesen das:
     1. `.fx-builder button:not(.btn)` (0,2,1) stellt alles auf neutral.
     2. `.fx-builder button.fx-keybtn` (0,2,1) gestaltet einzeln.
   Beide sind GLEICH spezifisch – die Gestaltung gewinnt nur, weil sie
   spaeter in dieser Datei steht. Wer eine Regel nach oben verschiebt oder
   auf `.fx-builder .fx-keybtn` (0,2,0) verkuerzt, verliert gegen Schritt 1
   und bekommt wieder Normalschrift ohne Unterstreichung.
   Abgesichert durch tests/js/effect-builder.test.mjs.

   Der einzige bewusst als Knopf gestaltete Knopf ist `+ Effekt hinzufuegen`
   (.btn .btn-primary) – dort ist die Theme-Optik richtig.
   ========================================================================== */

.fx-builder {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-panel);
}

.fx-hidden { display: none !important; }

/* ── Grundberuhigung ───────────────────────────────────────────────────────
   Alle Bedienelemente im Baukasten starten neutral. Was danach Farbe oder
   Gewicht bekommt, bekommt es hier bewusst zugeteilt.                      */
.fx-builder button:not(.btn) {
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--font-weight-normal);
    font-family: inherit;
    background: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */
.fx-builder .fx-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}

/* Modus-Umschaltung als kompakter Segmentschalter statt zweier Knoepfe */
.fx-builder .fx-tabs {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
}

.fx-builder button.fx-tab {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-colors);
}

.fx-builder button.fx-tab:hover { color: var(--text-primary); }

.fx-builder .fx-tab.is-active {
    background: var(--surface-elevated);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

.fx-builder .fx-head-note {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.fx-builder .fx-head-note.is-error { color: var(--color-danger); }

.fx-builder button.fx-hinttoggle {
    margin-left: auto;
    padding: var(--space-1) var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
    transition: var(--transition-colors);
}

.fx-builder button.fx-hinttoggle:hover { color: var(--color-accent); }

/* ── Zeilenliste ─────────────────────────────────────────────────────────── */
.fx-builder .fx-panel { display: flex; flex-direction: column; gap: var(--space-3); }

.fx-builder .fx-rows { display: flex; flex-direction: column; gap: var(--space-3); }

/* Weiterhin kein Karten-Stapel: keine Schatten, keine eigene Flaeche je
   Zeile. Aber die urspruengliche Fassung trennte AUSSCHLIESSLICH ueber den
   Hintergrund – und `--bg-card` (20 % Helligkeit) liegt neben
   `--surface-panel` (22 %) des Rahmens. Bei einer aufgeklappten Zeile mit
   Unterfeldern verschwamm die Grenze deshalb voellig. Getrennt wird jetzt
   ueber Kante und Luft: eine Haarlinie ringsum, eine deutlichere Kante
   links und ein echter Abstand zwischen den Zeilen.                       */
.fx-builder .fx-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    transition: var(--transition-colors);
}

.fx-builder .fx-row:hover,
.fx-builder .fx-row:focus-within { background: var(--bg-hover); }

/* Farbe bedeutet hier "aufpassen", nicht "Kategorie".
   Eine Kantenfarbe je Wirkungsart war der naheliegende Weg, traegt aber
   nicht: --color-dot (355) und --color-danger (356) sind derselbe Rotton,
   und --color-primary/--color-accent/--color-buff laufen in der Basis alle
   auf Hue 120. Fuenf ueber 24 Themes zuverlaessig unterscheidbare Farben
   gibt es nicht – und fuenf bunte Kanten neben fuenf bunten Plaketten
   waeren ohnehin mehr Unruhe statt weniger.
   Die Wirkungsart steht als Wort in der Plakette; farbig wird nur, was
   eine Entscheidung verlangt. */
.fx-builder .fx-row--e-info  { border-left-color: var(--text-faint); }
.fx-builder .fx-row--unknown { border-left-color: var(--warning-color); }

.fx-builder .fx-row-top {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Der Name identifiziert die Zeile – lesbar, aber kein Aktionsknopf.

   Er ist der Ankerpunkt beim Ueberfliegen einer langen Effektliste und traegt
   deshalb Akzentfarbe, mehr Groesse und mehr Gewicht als alles andere in der
   Zeile. Der Hoverzustand geht auf Weiss statt auf Akzent: die Ruhefarbe IST
   schon der Akzent, ein Wechsel darauf waere keine Rueckmeldung.           */
.fx-builder button.fx-keybtn {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    padding: 0;
    color: var(--color-accent);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.01em;
    border-bottom: 1px dotted var(--border-strong);
    border-radius: 0;
    transition: var(--transition-colors);
}

.fx-builder button.fx-keybtn:hover,
.fx-builder button.fx-keybtn:focus-visible {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}

.fx-builder .fx-caret {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1;
}

.fx-builder .fx-keycode {
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: none;
    padding: 0;
}

.fx-builder button.fx-del {
    margin-left: auto;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--text-faint);
    font-size: var(--text-base);
    line-height: 1;
    opacity: 0;
    transition: var(--transition-all);
}

/* Loeschen erscheint erst, wenn die Zeile im Blick ist – es ist die einzige
   nicht umkehrbare Aktion und muss nicht dauerhaft mitlaufen. */
.fx-builder .fx-row:hover button.fx-del,
.fx-builder .fx-row:focus-within button.fx-del,
.fx-builder button.fx-del:focus { opacity: 1; }

.fx-builder button.fx-del:hover { background: var(--color-danger); color: var(--text-light); }

/* ── Wirkungsart-Plakette ────────────────────────────────────────────────── */
.fx-builder .fx-badge {
    padding: 0 var(--space-2);
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
    background: none;
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
    cursor: help;
    opacity: 0.85;
}

/* Alle Wirkungsarten gleich ruhig – das Wort traegt die Aussage.
   Ausnahme: "Regelwerk" heisst "keine Engine liest das aus". Das ist der
   eine Fall, bei dem man stutzen soll, und wird deshalb abgesetzt. */
.fx-builder .fx-badge--immediate,
.fx-builder .fx-badge--status,
.fx-builder .fx-badge--cast,
.fx-builder .fx-badge--resource,
.fx-builder .fx-badge--buff      { color: var(--text-muted); }
.fx-builder .fx-badge--info      { color: var(--warning-color); opacity: 0.7; }

/* ── Werte-Eingabe: das eigentlich Wichtige ─────────────────────────────── */
.fx-builder .fx-value {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.fx-builder .fx-input {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: var(--text-sm);
    text-transform: none;
}

.fx-builder .fx-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-glow-accent);
}

/* Breite nach Inhalt: eine Zahl braucht kein Textfeld ueber die volle Zeile */
.fx-builder .fx-input--num     { width: 6rem; }
.fx-builder .fx-input--sm      { max-width: 13rem; }
.fx-builder .fx-input--formula { flex: 1 1 22rem; font-family: var(--font-mono); }

.fx-builder .fx-unit { color: var(--text-muted); font-size: var(--text-xs); }

.fx-builder .fx-formula {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: flex-end;
}

.fx-builder .fx-field { display: flex; flex-direction: column; gap: var(--space-1); }

.fx-builder .fx-field-label {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-normal);
}

.fx-builder .fx-preview {
    flex: 1 1 100%;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    word-break: break-all;
}

/* Nebenaktionen: verfuegbar, aber leise. */
.fx-builder button.fx-linkbtn {
    padding: 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    transition: var(--transition-colors);
}

.fx-builder button.fx-linkbtn:hover { color: var(--color-accent); }

/* ── Erklaerungen (abschaltbar ueber die Kopfzeile) ─────────────────────── */
.fx-builder .fx-hint { display: none; }

.fx-builder--hints .fx-hint {
    display: block;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    max-width: 68ch;
}

.fx-builder .fx-empty,
.fx-builder .fx-blocked {
    padding: var(--space-4);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

.fx-builder .fx-blocked {
    border-color: var(--warning-color);
    color: var(--text-secondary);
    text-align: left;
}

.fx-builder .fx-blocked-hint { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-xs); }

.fx-builder .fx-add { align-self: flex-start; }

/* ── Code-Ansicht ───────────────────────────────────────────────────────── */
.fx-builder .fx-codebar { display: flex; align-items: center; gap: var(--space-2); }
.fx-builder .fx-codebar-hint { color: var(--text-muted); font-size: var(--text-xs); }

.fx-builder textarea.fx-code {
    width: 100%;
    min-height: 8rem;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

/* ── Meldungen ──────────────────────────────────────────────────────────── */
.fx-builder .fx-issues { display: flex; flex-direction: column; gap: var(--space-1); }

.fx-builder .fx-issue {
    padding: var(--space-2);
    border-left: 2px solid var(--border-color);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
}

.fx-builder .fx-issue--warn  { border-left-color: var(--warning-color); }
.fx-builder .fx-issue--error { border-left-color: var(--color-danger); color: var(--text-primary); }

/* ── Auswahl-Dialog ─────────────────────────────────────────────────────── */
.fx-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-max);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--surface-overlay);
    backdrop-filter: blur(var(--blur-sm));
}

.fx-overlay .fx-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: min(46rem, 100%);
    max-height: 80vh;
    padding: var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-xl);
}

.fx-overlay .fx-dialog--narrow { width: min(30rem, 100%); }

.fx-overlay .fx-dialog-title {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
}

.fx-overlay .fx-dialog-note { color: var(--text-muted); font-size: var(--text-xs); }

.fx-overlay .fx-input {
    padding: var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.fx-overlay .fx-search { width: 100%; }

.fx-overlay .fx-picklist {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
    min-height: 0;
    flex: 1;
}

.fx-overlay .fx-pickgroup {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--space-2) var(--space-2) var(--space-1);
    background: var(--surface-elevated);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
}

.fx-overlay .fx-pickitem {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-primary);
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--font-weight-normal);
    box-shadow: none;
    cursor: pointer;
    transition: var(--transition-colors);
}

.fx-overlay .fx-pickitem:hover { background: var(--bg-hover); border-color: var(--color-accent); }

.fx-overlay .fx-pickitem-line {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.fx-overlay .fx-pickitem-name { font-size: var(--text-sm); font-weight: var(--font-weight-medium); }

.fx-overlay .fx-keycode {
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.fx-overlay .fx-badge {
    padding: 0 var(--space-2);
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
    background: none;
    font-size: 10px;
    white-space: nowrap;
}

.fx-overlay .fx-badge--immediate,
.fx-overlay .fx-badge--status,
.fx-overlay .fx-badge--cast,
.fx-overlay .fx-badge--resource,
.fx-overlay .fx-badge--buff      { color: var(--text-muted); }
.fx-overlay .fx-badge--info      { color: var(--warning-color); opacity: 0.7; }

.fx-overlay .fx-pickitem-hint {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
}

.fx-overlay .fx-empty { padding: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); text-align: center; }

.fx-overlay .fx-dialog-footer { display: flex; justify-content: flex-end; gap: var(--space-2); }

@media (max-width: 768px) {
    .fx-builder .fx-formula { flex-direction: column; align-items: stretch; }
    .fx-builder .fx-input--num,
    .fx-builder .fx-input--sm { width: 100%; max-width: none; }
    /* Ohne Zeigegeraet gibt es kein Hover – Loeschen muss sichtbar bleiben. */
    .fx-builder .fx-del { opacity: 1; }
}

@media (hover: none) {
    .fx-builder .fx-del { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION – char.php
   Aktiv nur wenn body.mobile-nav-active gesetzt ist (≤768px).
   Das JS (mobile-nav.js) setzt diese Klasse per matchMedia.
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS-Variablen ─────────────────────────────────────────────── */
:root {
    --mbn-height:      5rem;       /* Hoeherer Faecher fuer 7 Karten   */
    --mbn-icon-size:   1.375rem;   /* 22px                            */
    --mbn-label-size:  0.5625rem;  /* 9px                             */
    --mbn-btn-min-w:   3.25rem;    /* 52px – Touch-Target Minimum     */
    /* Gesamthöhe inkl. iOS Safe-Area (für panels/modals die Platz lassen müssen) */
    --mbn-total-height: calc(var(--mbn-height) + env(safe-area-inset-bottom, 0px));
}

/* ══════════════════════════════════════════════════════════════════
   PANEL-LAYOUT IM MOBILE-MODUS
   ══════════════════════════════════════════════════════════════════ */

/* Haupt-Grid komplett flachsetzen – alle drei Panels werden fixed */
body.mobile-nav-active #div_main_content {
    display: block;          /* kein Grid mehr                        */
    height: 0;               /* nimmt keinen Platz ein                */
    min-height: 0;
    overflow: visible;       /* Kinder koennen fixed rauswachsen      */
    padding: 0;
    margin: 0;
    gap: 0;
}

/* Alle drei Panels: unsichtbar (unter dem Sichtbereich geparkt) */
body.mobile-nav-active #divBox_left_content,
body.mobile-nav-active #divBox_center_content,
body.mobile-nav-active #divBox_right_content {
    position: fixed;
    top: var(--mobile-top-offset, var(--navbar-height, 70px));
    left: 0;
    right: 0;
    /* --mobile-bottom-offset wird per JS aus der tatsächlichen Nav-Höhe gesetzt.
       Fallback: --mbn-total-height (statisch) → --mbn-height (4rem = 64px) */
    bottom: var(--mobile-bottom-offset, var(--mbn-total-height));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-card);
    border-radius: 0;
    box-shadow: none;
    border: none;
    z-index: 10;
    /* padding-bottom = Nav-Höhe + Atemraum: verhindert dass letzter Inhalt
       direkt an der Unterkante klebt und von der Nav überdeckt wird */
    padding: var(--space-sm) var(--space-sm) calc(var(--mobile-bottom-offset, var(--mbn-height)) + 1.5rem);
    height: auto;
    max-height: none;

    /* Versteckt: nach unten weggeschoben */
    transform: translateY(100%);
    visibility: hidden;
    pointer-events: none;
    transition:
        transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.22s ease;
}

/* Aktives Panel: eingeblendet (slide-up Animation) */
body.mobile-nav-active #divBox_left_content[data-mobile-active="true"],
body.mobile-nav-active #divBox_center_content[data-mobile-active="true"],
body.mobile-nav-active #divBox_right_content[data-mobile-active="true"] {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

/* Center-Panel: Grid-Struktur ohne Iconbars (2 → 1 Spalte) */
body.mobile-nav-active #divBox_center_content[data-mobile-active="true"] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    align-items: start;
    gap: var(--space-xs);
    padding: var(--space-xs);
}

/* Iconbars im Center-Panel: ausblenden (Buttons sind im Bottom-Band) */
body.mobile-nav-active #div_iconbar_left,
body.mobile-nav-active #div_iconbar_right {
    display: none;
}

/* Char-Portrait im Mobile-Center nimmt volle Breite */
body.mobile-nav-active #charBild_Container {
    grid-column: 1;
}

body.mobile-nav-active #charBild {
    max-height: 45vh;
    width: 100%;
    object-fit: contain;
}

/* ══════════════════════════════════════════════════════════════════
   PANEL SWIPE ANIMATIONEN
   ══════════════════════════════════════════════════════════════════ */

@keyframes mbn-exit-left {
    from { transform: translateX(0);     }
    to   { transform: translateX(-105%); }
}
@keyframes mbn-exit-right {
    from { transform: translateX(0);    }
    to   { transform: translateX(105%); }
}
@keyframes mbn-enter-from-right {
    from { transform: translateX(105%); }
    to   { transform: translateX(0);    }
}
@keyframes mbn-enter-from-left {
    from { transform: translateX(-105%); }
    to   { transform: translateX(0);     }
}

body.mobile-nav-active .mbn-exit-left {
    animation: mbn-exit-left 0.22s ease-in forwards !important;
    visibility: visible !important;
    pointer-events: none !important;
}
body.mobile-nav-active .mbn-exit-right {
    animation: mbn-exit-right 0.22s ease-in forwards !important;
    visibility: visible !important;
    pointer-events: none !important;
}
body.mobile-nav-active .mbn-enter-right {
    animation: mbn-enter-from-right 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
    visibility: visible !important;
}
body.mobile-nav-active .mbn-enter-left {
    animation: mbn-enter-from-left 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
    visibility: visible !important;
}

/* ══════════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR
   ══════════════════════════════════════════════════════════════════ */

.mobile-bottom-nav {
    display: none; /* Wird per JS-hidden=false eingeblendet */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* height muss --mbn-total-height sein (inkl. safe-area), sonst werden
       Buttons auf iPhones mit Home-Indikator auf ~30px gequetscht */
    height: var(--mbn-total-height);
    /* Safe-Area-Padding schiebt Buttons nach oben, weg vom Home-Indikator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 1100;            /* Ueber Panels (z=10), unter Modals (z=200) */

    background: var(--bg-card);
    border-top: 2px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);

    flex-direction: row;
    align-items: stretch;
    overflow: visible;
    touch-action: pan-y;
}

/* hidden=false via JS: flex anzeigen */
.mobile-bottom-nav:not([hidden]) {
    display: flex;
}

/* ── Wheel Strip – Rad-Picker Layout ─────────────────────────── */
.mbn-strip {
    position: relative;
    width: 100%;
    height: 100%;
    /* overflow: visible damit Karten seitlich sichtbar bleiben */
    overflow: visible;
}

/* Jede Karte: oben in der Nav-Bar verankert, dreht sich ums Rad */
.mbn-strip .mbn-btn {
    position: absolute;
    left: 50%;
    top: 0.25rem;
    margin-left: calc(var(--mbn-btn-min-w) * -0.5);
    margin-top: 0;
    /* Achse UNTER der Nav-Bar → Karten biegen nach unten ins Nav-Bar-Innere.
       Abstand Button-Mitte (32px) → Achse = 350px → Achse bei 382px vom Button-Top */
    transform-origin: 50% 85%;
    /* Transition für Snap nach Loslassen */
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.32s ease;
    will-change: transform, opacity;
}

/* Während Drag: sofortige Reaktion ohne Transition */
.mbn-strip.mbn-dragging .mbn-btn {
    transition: none !important;
}

/* Aktive Karte: am Rad-Top (0°), volle Farbe */
.mbn-strip .mbn-btn--active {
    color: var(--color-primary);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-primary) 42%, transparent));
}

/* Alle anderen: kein Label */
.mbn-strip .mbn-btn:not(.mbn-btn--active) .mbn-label {
    opacity: 0;
}

/* Aktiv-Indikator nur oben */
.mbn-strip .mbn-btn:not(.mbn-btn--active)::after {
    opacity: 0 !important;
    transform: scaleX(0) !important;
}

.mbn-strip .mbn-btn[data-fan-visible="false"] {
    visibility: hidden;
}

/* ── Buttons (allgemein) ───────────────────────────────────────── */
.mbn-btn {
    /* Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 10px;
    min-width: var(--mbn-btn-min-w);
    /* height: 100% ist in verschachteltem Flex unzuverlässig (löst zu 0 auf wenn
       Parent keine explizite Höhe hat). align-self: stretch ist robuster. */
    align-self: stretch;
    height: auto;
    min-height: var(--mbn-height);
    flex-shrink: 0;

    /* Stil */
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    margin: 0;

    /* Kein Desktop-Scale-Hover auf Touch-Geraeten */
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

/* Aktiv-Indikator: Linie am oberen Rand */
.mbn-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: var(--color-primary);
    border-radius: 0 0 2px 2px;
    opacity: 0;
    transform: scaleX(0.5);
    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

/* Hover (non-touch) */
@media (hover: hover) {
    .mbn-btn:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
}

/* Touch-Feedback */
.mbn-btn:active {
    background: var(--color-primary-light);
}

/* Aktiver Zustand */
.mbn-btn--active {
    color: var(--color-primary);
}

.mbn-btn--active::after {
    opacity: 1;
    transform: scaleX(1);
}

/* ── Center-Button (Charakter-Portrait-Ansicht) ────────────────── */
.mbn-btn--center {
    min-width: 3.75rem;  /* etwas breiter als normale Buttons */
    background: var(--surface-panel);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.mbn-btn--center::after {
    background: var(--color-accent);
}

.mbn-btn--center.mbn-btn--active {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 12%, var(--surface-panel));
}

/* ── Icons ─────────────────────────────────────────────────────── */
.mbn-icon {
    width: var(--mbn-icon-size);
    height: var(--mbn-icon-size);
    object-fit: contain;
    flex-shrink: 0;
    filter: var(--icon-filter);
    opacity: 0.65;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.mbn-btn--active .mbn-icon {
    opacity: 1;
}

/* ── Labels ────────────────────────────────────────────────────── */
.mbn-label {
    font-size: var(--mbn-label-size);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    pointer-events: none;
}

/* ── Fade-Masken links/rechts am Strip-Rand ────────────────────── */
/* Zeigt an dass mehr Buttons per Scroll erreichbar sind */
.mobile-bottom-nav {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

/* ══════════════════════════════════════════════════════════════════
   BODY-PADDING: Verhindert, dass Inhalt unter der Bottom-Nav liegt
   ══════════════════════════════════════════════════════════════════ */
body.mobile-nav-active {
    /* Extra Bottom-Padding falls etwas ausserhalb der fixed Panels rendert */
    padding-bottom: var(--mbn-total-height);
}

/* ── Modals: über der Bottom-Nav anzeigen ───────────────────────── */
body.mobile-nav-active .note-modal-overlay,
body.mobile-nav-active .notes-delete-confirm {
    z-index: 1200;   /* > Bottom-Nav (1100) */
}

/* Note-Modal als Bottom-Sheet: Safe-Area am unteren Rand freilassen */
@media (max-width: 600px) {
    body.mobile-nav-active .note-modal {
        /* Kein Inhalt unter Home-Indikator */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        /* Endet oberhalb der Bottom-Nav, nicht am Viewport-Rand */
        max-height: calc(95vh - var(--mbn-total-height));
    }
}

/* ── Kein Hover-Scale mehr im Mobile-Modus ──────────────────────── */
body.mobile-nav-active .tab_btn:hover,
body.mobile-nav-active button:hover {
    transform: none;
}

/* ── Tab-Content innerhalb des aktiven Panels ───────────────────── */
body.mobile-nav-active .tab_Content_Links,
body.mobile-nav-active .tab_Content_Rechts {
    max-height: none;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE CONTENT SCALING
   Scoped auf body.mobile-nav-active – Desktop bleibt unberuehrt.

   Strategie: CSS Custom Properties lokal ueberschreiben.
   Alle rem-basierten Werte schrumpfen dadurch automatisch mit –
   keine einzelnen Klassen-Overrides noetig.
   ══════════════════════════════════════════════════════════════════ */

body.mobile-nav-active #divBox_left_content,
body.mobile-nav-active #divBox_right_content {
    /* ── Schriftgroessen (kompakter als Desktop) ─────────────────── */
    --font-size-xs: 0.6875rem;   /* 11px  statt 12px  */
    --font-size-sm: 0.75rem;     /* 12px  statt 14px  */
    --font-size-md: 0.8125rem;   /* 13px  statt 16px  */
    --font-size-lg: 0.875rem;    /* 14px  statt 20px  */
    --font-size-xl: 1rem;        /* 16px  statt 28px  */

    /* ── Abstände (enger als Desktop) ───────────────────────────── */
    --space-xs: 0.1875rem;  /*  3px  statt  4px  */
    --space-sm: 0.3125rem;  /*  5px  statt  8px  */
    --space-md: 0.625rem;   /* 10px  statt 16px  */
    --space-lg: 0.9375rem;  /* 15px  statt 24px  */

    font-size: var(--font-size-sm);
}

/* ── Attribute-Cards: kleineres Minimum auf schmalen Screens ─────── */
body.mobile-nav-active .attribute-cards-container {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    padding: 8px;
}

body.mobile-nav-active .attribute-card {
    padding: 10px;
}

body.mobile-nav-active .attribute-name {
    font-size: var(--font-size-md, 0.8125rem);
    margin-bottom: 6px;
}

body.mobile-nav-active .attribute-value {
    font-size: var(--font-size-lg, 0.875rem);
}

body.mobile-nav-active .attribute-bonus {
    font-size: var(--font-size-xs, 0.6875rem);
    padding: 3px 6px;
}

body.mobile-nav-active .attribute-values {
    margin-top: 8px;
}

/* ── Item / Spell / Resistance / Widget / Currency Tiles ─────────── */
body.mobile-nav-active .item-grid,
body.mobile-nav-active .currency-grid,
body.mobile-nav-active .spell-grid,
body.mobile-nav-active .resistance-grid,
body.mobile-nav-active .widget-grid,
body.mobile-nav-active .bereich-grid,
body.mobile-nav-active .buffs-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

/* Tiles kompakter */
body.mobile-nav-active .item-tile,
body.mobile-nav-active .currency-tile,
body.mobile-nav-active .spell-tile,
body.mobile-nav-active .resistance-tile,
body.mobile-nav-active .widget-tile,
body.mobile-nav-active .bereich-tile {
    min-height: 100px;
    padding: 8px 6px;
}

/* Tile-Icons etwas kleiner */
body.mobile-nav-active .item-icon-container,
body.mobile-nav-active .currency-icon-container,
body.mobile-nav-active .spell-icon-container,
body.mobile-nav-active .resistance-icon-container {
    width: 32px;
    height: 32px;
    margin-top: 8px;
    margin-bottom: 5px;
}

body.mobile-nav-active .bereich-icon {
    width: 36px;
    height: 36px;
}

/* Namen in Tiles: keine zu grosse Schrift */
body.mobile-nav-active .item-name,
body.mobile-nav-active .currency-name,
body.mobile-nav-active .spell-name,
body.mobile-nav-active .resistance-name {
    font-size: 11px;
}

body.mobile-nav-active .spell-cost,
body.mobile-nav-active .resistance-stat-row {
    font-size: 10px;
    padding: 2px 4px;
}

/* ── Equipment-Tabelle ───────────────────────────────────────────── */
/*    Horizontaler Scroll-Wrapper damit die Tabelle nicht abbricht    */
body.mobile-nav-active .equipment-table {
    font-size: 11px;
    /* Tabelle scrollt horizontal statt zu brechen */
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.mobile-nav-active .equipment-table thead,
body.mobile-nav-active .equipment-table tbody,
body.mobile-nav-active .equipment-table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Select-Felder in der Equipment-Tabelle */
body.mobile-nav-active .equipment-select {
    min-width: 0;          /* Fixes das 10rem-Minimum */
    width: 100%;
    font-size: 11px;
}

body.mobile-nav-active .slot-image {
    width: 1.75rem;
    height: 1.75rem;
}

/* ── Allgemeine Tabellen (Stats, Skills) ─────────────────────────── */
body.mobile-nav-active table {
    font-size: var(--font-size-sm, 0.75rem);
}

body.mobile-nav-active th,
body.mobile-nav-active td {
    padding: 4px 6px;
}

/* Tabellen-Overflow-Wrapper (wird dynamisch per JS eingefuegt) */
body.mobile-nav-active .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
}

/* ── Sections und Ueberschriften ─────────────────────────────────── */
body.mobile-nav-active .section-title {
    font-size: var(--font-size-md, 0.8125rem);
    margin-bottom: 8px;
}

body.mobile-nav-active h2 {
    font-size: var(--font-size-lg, 0.875rem);
}

body.mobile-nav-active .info-category-header {
    padding: 6px 8px;
    font-size: var(--font-size-sm, 0.75rem);
}

body.mobile-nav-active .info-subcategory-header {
    font-size: 11px;
    padding: 4px 8px;
}

/* ── Buffs ───────────────────────────────────────────────────────── */
body.mobile-nav-active .active-buffs-container .section-title {
    font-size: var(--font-size-md, 0.8125rem);
    margin-bottom: 8px;
}

/* ── Notizen ─────────────────────────────────────────────────────── */
body.mobile-nav-active .note-item {
    padding: 8px 10px;
    margin: 5px 0;
}

/* ── Stats-Grid (in left/right panels) ──────────────────────────── */
body.mobile-nav-active .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px 8px;
}

body.mobile-nav-active .stat-label {
    font-size: 10px;
}

body.mobile-nav-active .stat-value {
    font-size: var(--font-size-sm, 0.75rem);
}

/* ── Select-Felder allgemein ─────────────────────────────────────── */
body.mobile-nav-active select {
    font-size: var(--font-size-sm, 0.75rem);
    padding: 4px 6px;
    margin: 3px;
}

/* ── white-space: nowrap Override fuer Content (nicht Buttons) ───── */
body.mobile-nav-active .tab_Content_Links *,
body.mobile-nav-active .tab_Content_Rechts * {
    white-space: normal;
}

/* Ausnahmen: nur kleine einzeilige Labels/Badges behalten nowrap */
body.mobile-nav-active .spell-cost,
body.mobile-nav-active .resistance-stat-row span {
    white-space: nowrap;
}

/* Item-/Spell-Namen: umbrechen statt abschneiden */
body.mobile-nav-active .item-name,
body.mobile-nav-active .spell-name,
body.mobile-nav-active .resistance-name {
    white-space: normal;
    word-break: break-word;
}

/* ── Sehr kleine Phones (≤430px): noch kompakter ────────────────── */
@media (max-width: 430px) {
    body.mobile-nav-active .attribute-cards-container {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    body.mobile-nav-active .item-grid,
    body.mobile-nav-active .currency-grid,
    body.mobile-nav-active .spell-grid,
    body.mobile-nav-active .resistance-grid,
    body.mobile-nav-active .widget-grid,
    body.mobile-nav-active .bereich-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 6px;
    }

    body.mobile-nav-active .item-tile,
    body.mobile-nav-active .currency-tile,
    body.mobile-nav-active .spell-tile,
    body.mobile-nav-active .resistance-tile,
    body.mobile-nav-active .widget-tile {
        min-height: 88px;
        padding: 6px 4px;
    }

    body.mobile-nav-active #divBox_left_content,
    body.mobile-nav-active #divBox_right_content {
        --font-size-sm: 0.6875rem;  /* 11px */
        --font-size-md: 0.75rem;    /* 12px */
    }
}

/* ── Portrait-Modus: etwas mehr Atemraum am Ende ────────────────── */
@media (orientation: portrait) {
    body.mobile-nav-active #divBox_left_content,
    body.mobile-nav-active #divBox_center_content,
    body.mobile-nav-active #divBox_right_content {
        padding-bottom: calc(var(--mobile-bottom-offset, var(--mbn-height)) + 2.5rem);
    }
}
/* =============================================================
   Kachelraster – gemeinsame Definition
   =============================================================

   Der Charakterbogen zeigt sieben Kachelbereiche (Zauber, Inventar, Währung,
   Widgets, Spezialbereiche, Buffs, Resistenzen). Alle sieben hatten dieselbe
   Regel als eigene Kopie:

       grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
       gap: 15px;

   ## Warum eine Obergrenze noetig ist

   `auto-fill` fuellt so viele Spalten, wie hineinpassen. Auf dem Telefon sind
   das vier – dort sieht es gut aus. In der Desktop-Ansicht ist die Spalte
   breiter, und es werden fuenf oder mehr: die Kacheln werden schmal und der
   Inhalt gequetscht, obwohl Platz da waere.

   Ein festes `repeat(4, 1fr)` waere die naheliegende Loesung, nimmt aber die
   Anpassung nach unten weg – auf schmalen Geraeten muessen es drei oder zwei
   sein duerfen.

   ## Die Formel

       minmax(max(MIN, (100% - (COLS - 1) * GAP) / COLS), 1fr)

   Jede Spalte ist mindestens MIN breit UND mindestens ein COLS-tel des
   Containers (abzueglich der Zwischenraeume). Der zweite Teil ist die
   Obergrenze der Spaltenzahl: mehr als COLS Spalten passen rechnerisch nicht
   mehr hinein. Wird der Container schmal, gewinnt MIN und es werden von
   selbst weniger Spalten.

   `100%` bezieht sich dabei auf die Breite des Rasters selbst – deshalb muss
   die Formel im Raster stehen und nicht auf einem Elternelement.

   ## Verwendung

       .mein-raster {
           display: grid;
           gap: var(--tile-gap);
           grid-template-columns: var(--tile-grid-columns);
       }

   ## ACHTUNG: die Stellschrauben wirken NUR hier auf :root

   Custom Properties werden dort ausgerechnet, wo sie DEFINIERT sind. Der
   Wert von `--tile-grid-columns` enthaelt nach dieser Regel keine `var()`
   mehr, sondern die bereits eingesetzten Zahlen. Ein

       .mein-raster { --tile-max-cols: 5; grid-template-columns: var(--tile-grid-columns); }

   aendert deshalb NICHTS: die Variable steht auf dem Element zwar auf 5, die
   Formel wurde aber laengst mit der 4 von oben ausgerechnet. Man bekommt
   still die Vorgabe. Nachgemessen am 25.08.2026 im Browser (das Fenster
   „Aufwertungen" wollte fuenf Spalten und bekam vier).

   Diese Datei stand vorher genau andersherum da ("einzelne Bereiche duerfen
   lokal ueberschreiben") – das war falsch.

   Wer wirklich andere Geometrie braucht, setzt `--tile-grid-columns` lokal
   neu und wiederholt dabei die Formel. Der Normalfall ist, die Vorgabe zu
   nehmen: vier Spalten sind ueberall dasselbe Bild.
   ============================================================= */

:root {
    /* Kleinste sinnvolle Kachelbreite. Darunter wird der Inhalt unleserlich. */
    --tile-min: 90px;

    /* Mehr als vier nebeneinander quetschen den Inhalt, ohne etwas zu gewinnen. */
    --tile-max-cols: 4;

    --tile-gap: 15px;

    --tile-grid-columns: repeat(
        auto-fill,
        minmax(
            max(
                var(--tile-min),
                (100% - (var(--tile-max-cols) - 1) * var(--tile-gap)) / var(--tile-max-cols)
            ),
            1fr
        )
    );
}

/* Querformat-Telefone: wenig Hoehe, deshalb duerfen die Kacheln kleiner
   werden, damit ohne Scrollen mehr sichtbar bleibt. Dieselbe Bedingung, die
   die sieben Bereiche vorher jeweils einzeln fuehrten.
   Die Obergrenze bleibt unveraendert – sie greift hier ohnehin nicht, weil
   der Mindestwert gewinnt. */
@media (orientation: landscape) and (max-height: 500px) {
    :root {
        --tile-min: 85px;
    }
}
/* ── LAYER 3: BASE RESET ─────────────────────────────────────── */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    color: var(--text-primary);
    background-color: var(--bg-page);
    min-height: 100vh;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--duration-150) var(--ease-in-out);
}

a:hover {
    color: var(--color-accent-hover);
}

ul, ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) var(--bg-card);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/*
 * Anti-FOUC: Unterdrückt alle Transitions während des initialen Seitenladens.
 * Verhindert dass icon-filter/color/background-Transitions sichtbar feuern
 * wenn Theme-CSS nach dem Haupt-CSS lädt.
 * Die Klasse wird per JS in theme-head.php gesetzt und nach window.load entfernt.
 */
html.no-trans *,
html.no-trans *::before,
html.no-trans *::after {
    transition-duration: 0s !important;
    animation-duration:  0s !important;
}

/* ── LAYER 4: PROJEKT-SPEZIFISCHE TOKENS ─────────────────────── */
/* Tokens die in keinem DS 2.0 Token-File existieren.            */

:root {
    /* Combat-Grid */
    --grid-color:              255, 255, 255;
    --grid-opacity:            0.08;

    /* Z-Index: v1-Werte als Override (DS 2.0 nutzt andere Skala) */
    /* Begründung: bestehender Code erwartet diese Werte.          */
    /* DS 2.0-only Tokens (--z-sticky, --z-toast) bleiben von DS 2.0. */
    --z-base:                  1;
    --z-dropdown:              50;
    --z-panel:                 60;
    --z-header:                100;
    --z-modal:                 200;
    --z-tooltip:               300;
    --z-overlay:               400;
    --z-top:                   9999;
    --z-sidebar:               50;

    /* Schatten (ergänzt effects.css) */
    --shadow-panel:            0 2px 8px hsl(0 0% 0% / 0.25);

    /* Formular-Dimensionen (Aliase auf DS 2.0-Tokens) */
    --range-input-height:      var(--range-height);
    --range-input-thumb-size:  var(--range-thumb-size);

    /* Button/Modal Compat-Dimensionen */
    --btn-padding:             var(--space-2) var(--space-4);
    --btn-radius:              var(--radius-sm);
    --modal-border-radius:     var(--radius-xl);
    --modal-backdrop:          var(--overlay-heavy);
}

/* ── LAYER 5: V1-KOMPATIBILITÄTS-ALIASE ──────────────────────── */
/* Alle alten v1-Token-Namen delegieren an DS 2.0-Äquivalente.   */
/* Bestehender Code (styles/*.css, CMR/css/*.css) läuft weiter.  */

:root {
    /* ── Spacing ──────────────────────────────────────────────── */
    --space-xs:   var(--space-1);    /*  4px */
    --space-sm:   var(--space-2);    /*  8px */
    --space-md:   var(--space-4);    /* 16px */
    --space-lg:   var(--space-6);    /* 24px */
    --space-xl:   var(--space-8);    /* 32px */
    --space-2xl:  var(--space-12);   /* 48px */

    /* ── Typografie ───────────────────────────────────────────── */
    --font-size-xs:   var(--text-xs);     /* 12px */
    --font-size-sm:   var(--text-sm);     /* 14px */
    --font-size-md:   var(--text-base);   /* 16px */
    --font-size-lg:   var(--text-lg);     /* 18px */
    --font-size-xl:   var(--text-xl);     /* 20px */
    --font-size-2xl:  var(--text-2xl);    /* 24px */

    /* ── Border-Radius ────────────────────────────────────────── */
    /* --radius-xs (v1: 4px) → hartkodiert, damit unabhängig von  */
    /* --radius-sm-Override weiter unten korrekt bleibt.          */
    --radius-xs:     4px;
    /* --radius-sm: v1 erwartete 6px; DS 2.0 effects.css setzt 4px. */
    /* Override auf 6px: v1-Code behält sein Verhalten.           */
    /* DS 2.0-Komponenten (button, modal) nutzen --radius-md aufwärts. */
    --radius-sm:     6px;
    /* --radius-md (8px), --radius-lg (12px), --radius-xl (16px)  */
    /* sind in DS 2.0 identisch → kein Override nötig.            */
    --radius-circle: var(--radius-full);  /* 9999px */

    /* ── Übergänge ────────────────────────────────────────────── */
    /* v1-Werte bleiben, damit CMR/page-CSS nicht geändert werden. */
    /* DS 2.0-Komponenten nutzen --duration-* + --ease-* direkt.  */
    --transition-fast:   0.15s ease;
    --transition-md:     0.25s ease;
    --transition-normal: 0.3s ease;
    --transition-slow:   0.4s ease-in-out;

    /* ── CMR-Aliase (Rückwärtskompatibilität) ─────────────────── */
    --accent-color:      var(--color-accent);
    --primary-color:     var(--color-primary);
    --primary-hover:     var(--color-primary-hover);
    --primary-light:     var(--color-primary-light);
    --primary-dark:      var(--color-primary-dark);
    --success-color:     var(--color-success);
    --warning-color:     var(--color-warning);
    --danger-color:      var(--color-danger);
    --error-color:       var(--color-error);
    --info-color:        var(--color-amber-ui);
    --combat-hover:      var(--color-accent-light);
    --combat-active:     var(--color-accent);
}

/* ── GLOBALE HILFSKLASSEN ────────────────────────────────────── */

/* Icon-Färbung: Klasse auf <img>-Tags die mit dem Theme mitfärben */
.icon-themed {
    filter: var(--icon-filter);
    transition: filter var(--transition-fast);
}

/* Theme-Switcher Komponente */
.theme-switcher {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.theme-switcher button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--surface-panel);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.theme-switcher button:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    transform: scale(1.05);
}