:root {
    --color-primary:        #4b3730;
    --color-secondary:      #f6efeb;
    --color-bg:             #ffffff;
    --color-text:           #3f302c;
    --color-accent:         #c79a8a;
    --color-surface:        #f6efeb;
    --color-button:         #deccc6;
    --color-button-text:    #f5e4df;
    --color-button-dark:    #5a4640;
    --color-cta:            #3f302c;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(63,48,44,.18);
    --color-progress-track:    #e0e0e0;
    --color-shadow-subtle:     rgba(0,0,0,.08);
    --color-overlay:        rgba(63,48,44,.38);
    --color-surface-solid:  rgba(255,255,255,.96);
    --color-surface-opaque: rgba(255,255,255,.90);
    --color-surface-mid:    rgba(246,239,235,.90);
    --color-surface-high:   rgba(255,255,255,.75);
    --color-surface-glass:  rgba(255,255,255,.62);
    --color-border:         rgba(75,55,48,.15);
    --color-border-mid:     rgba(75,55,48,.28);
    --color-border-strong:  rgba(75,55,48,.38);
    --color-border-subtle:  rgba(75,55,48,.08);
    --color-text-muted:     rgba(63,48,44,.55);
    --color-text-subtle:    rgba(63,48,44,.72);
    --color-shadow:         rgba(63,48,44,.12);
    --color-toggle-track:   rgba(63,48,44,.18);
    --color-focus:          #509942;
    --color-focus-ring:     rgba(222,204,198,.45);
    --color-nav-bg:         #ede8e1;
    --color-nav-hover:      #e0dbd4;
    --color-tooltip-bg:   rgba(0,0,0,.78);
    --color-tooltip-text: #ffffff;
    --color-nav-label-inactive: #a09080;
    --bg-image:             url("/assets/img/Authors_Hintergrundbild.png");
    --bg-overlay:           linear-gradient(180deg,
                              rgba(255,255,255,.20) 0%,
                              rgba(255,255,255,.55) 45%,
                              rgba(255,255,255,.88) 100%);
    --color-accent-subtle:  rgba(199,154,138,.15);
    --color-accent-border:  rgba(199,154,138,.30);
}

:root.theme-dark {
    --color-primary:        #f0e0d0;
    --color-secondary:      #2a1208;
    --color-bg:             #1e100a;
    --color-text:           #f0e0d0;
    --color-accent:         #c79a8a;
    --color-surface:        rgba(40,22,14,.80);
    --color-button:         rgba(60,35,22,.85);
    --color-button-text:    #2a1208;
    --color-button-dark:    #c79a8a;
    --color-cta:            #c79a8a;
    --color-progress-inactive: rgba(255,255,255,.18);
    --color-progress-track:    rgba(255,255,255,.10);
    --color-shadow-subtle:     rgba(0,0,0,.25);
    --color-overlay:        rgba(0,0,0,.55);
    --color-surface-solid:  rgba(30,16,10,.97);
    --color-surface-opaque: rgba(60,35,22,.70);
    --color-surface-mid:    rgba(50,28,18,.85);
    --color-surface-high:   rgba(60,35,22,.85);
    --color-surface-glass:  rgba(30,16,10,.72);
    --color-border:         rgba(255,210,170,.15);
    --color-border-mid:     rgba(255,210,170,.25);
    --color-border-strong:  rgba(255,210,170,.38);
    --color-border-subtle:  rgba(255,210,170,.08);
    --color-text-muted:     rgba(240,224,208,.55);
    --color-text-subtle:    rgba(240,224,208,.72);
    --color-shadow:         rgba(0,0,0,.40);
    --color-toggle-track:   rgba(199,154,138,.30);
    --color-focus:          #5a8a32;
    --color-danger:         #c75b5b;
    --color-focus-ring:     rgba(199,154,138,.30);
    --color-nav-bg:         rgba(50,28,18,.85);
    --color-nav-hover:      rgba(70,40,25,.85);
    --color-nav-label-inactive: rgba(240,224,208,.40);
    --bg-image:             url("/assets/img/Darkmode_Background.png");
    --bg-overlay:           linear-gradient(180deg,
                              rgba(20,10,5,.45) 0%,
                              rgba(20,10,5,.25) 100%);
    --color-accent-subtle:  rgba(199,154,138,.14);
    --color-accent-border:  rgba(255,210,170,.16);
    --color-tooltip-bg:   rgba(0,0,0,.85);
    --color-tooltip-text: #f0e0d0;
}

:root.theme-petrol {
    --color-primary:        #1e3d3d;
    --color-secondary:      #e8f0ef;
    --color-bg:             #ffffff;
    --color-text:           #1e3d3d;
    --color-accent:         #3a8a8a;
    --color-surface:        #e8f0ef;
    --color-button:         #c8dcdb;
    --color-button-text:    #e8f0ef;
    --color-button-dark:    #2a5555;
    --color-cta:            #1e3d3d;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(30,61,61,.18);
    --color-progress-track:    #e0e0e0;
    --color-shadow-subtle:     rgba(0,0,0,.08);
    --color-overlay:        rgba(30,61,61,.38);
    --color-surface-solid:  rgba(255,255,255,.96);
    --color-surface-opaque: rgba(255,255,255,.90);
    --color-surface-mid:    rgba(232,240,239,.90);
    --color-surface-high:   rgba(255,255,255,.75);
    --color-surface-glass:  rgba(255,255,255,.62);
    --color-border:         rgba(30,61,61,.15);
    --color-border-mid:     rgba(30,61,61,.28);
    --color-border-strong:  rgba(30,61,61,.38);
    --color-border-subtle:  rgba(30,61,61,.08);
    --color-text-muted:     rgba(30,61,61,.55);
    --color-text-subtle:    rgba(30,61,61,.72);
    --color-shadow:         rgba(30,61,61,.12);
    --color-toggle-track:   rgba(30,61,61,.18);
    --color-focus:          #2a7a5a;
    --color-focus-ring:     rgba(200,220,219,.45);
    --color-nav-bg:         #dce8e7;
    --color-nav-hover:      #cddedd;
    --color-tooltip-bg:     rgba(0,0,0,.78);
    --color-tooltip-text:   #ffffff;
    --color-nav-label-inactive: #6a9090;
    --bg-image:             none;
    --bg-overlay:           none;
    --color-accent-subtle:  rgba(58,138,138,.15);
    --color-accent-border:  rgba(58,138,138,.30);
}

:root.theme-petrol.theme-dark {
    --color-text:           #ede4d0;
    --color-primary:        #ede4d0;
    --color-secondary:      #0a1f1f;
    --color-bg:             #0a1f1f;
    --color-accent:         #5aacac;
    --color-surface:        rgba(20,45,45,.80);
    --color-button:         rgba(20,50,50,.85);
    --color-button-text:    #0a1f1f;
    --color-button-dark:    #5aacac;
    --color-cta:            #5aacac;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(255,255,255,.18);
    --color-progress-track:    rgba(255,255,255,.10);
    --color-shadow-subtle:     rgba(0,0,0,.25);
    --color-overlay:        rgba(0,0,0,.55);
    --color-surface-solid:  rgba(10,31,31,.97);
    --color-surface-opaque: rgba(20,50,50,.70);
    --color-surface-mid:    rgba(15,40,40,.85);
    --color-surface-high:   rgba(20,50,50,.85);
    --color-surface-glass:  rgba(20,55,55,.85);
    --color-border:         rgba(180,230,220,.15);
    --color-border-mid:     rgba(180,230,220,.25);
    --color-border-strong:  rgba(180,230,220,.38);
    --color-border-subtle:  rgba(180,230,220,.08);
    --color-text-subtle:    rgba(237,228,208,.72);
    --color-text-muted:     rgba(237,228,208,.55);
    --color-shadow:         rgba(0,0,0,.40);
    --color-toggle-track:   rgba(90,172,172,.30);
    --color-focus:          #3a8a6a;
    --color-focus-ring:     rgba(90,172,172,.30);
    --color-nav-bg:         rgba(15,40,40,.85);
    --color-nav-hover:      rgba(25,60,60,.85);
    --color-tooltip-bg:     rgba(0,0,0,.85);
    --color-tooltip-text:   #d0e8e8;
    --color-nav-label-inactive: rgba(208,232,232,.40);
    --bg-image:             none;
    --bg-overlay:           none;
    --color-accent-subtle:  rgba(90,172,172,.14);
    --color-accent-border:  rgba(180,230,220,.16);
}

/* ============================================================
   PRIDE CREME — klassischer Regenbogen, gebrochen auf Vanille
   ============================================================ */

:root.theme-pride {
    --color-primary:        #2a4a2c;
    --color-secondary:      #fdf8ec;
    --color-bg:             #fdf8ec;
    --color-text:           #2a3a28;
    --color-accent:         #d4806a;
    --color-surface:        rgba(224,168,104,.28);
    --color-button:         #88b88a;
    --color-button-text:    #ffffff;
    --color-button-dark:    #4a7a9a;
    --color-cta:            #2a4a2c;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(136,184,138,.28);
    --color-progress-track:    #d8c870;
    --color-shadow-subtle:     rgba(0,0,0,.08);
    --color-overlay:        rgba(42,74,44,.38);
    --color-surface-solid:  rgba(253,248,236,.96);
    --color-surface-opaque: rgba(200,232,200,.70);
    --color-surface-mid:    rgba(232,220,248,.70);
    --color-surface-high:   rgba(232,220,248,.55);
    --color-surface-glass:  rgba(253,248,236,.82);
    --color-border:         rgba(122,160,200,.28);
    --color-border-mid:     rgba(122,160,200,.45);
    --color-border-strong:  rgba(122,160,200,.62);
    --color-border-subtle:  rgba(122,160,200,.12);
    --color-text-muted:     rgba(42,58,40,.55);
    --color-text-subtle:    rgba(42,58,40,.72);
    --color-shadow:         rgba(42,74,44,.10);
    --color-toggle-track:   rgba(168,136,192,.35);
    --color-focus:          #88b88a;
    --color-focus-ring:     rgba(122,160,200,.45);
    --color-nav-bg:         rgba(168,136,192,.25);
    --color-nav-hover:      rgba(168,136,192,.42);
    --color-tooltip-bg:     rgba(0,0,0,.78);
    --color-tooltip-text:   #ffffff;
    --color-nav-label-inactive: #907080;
    --bg-image:             none;
    --bg-overlay:           linear-gradient(180deg,
                              rgba(212,128,106,.55) 0%,
                              rgba(224,168,104,.55) 20%,
                              rgba(216,200,112,.55) 38%,
                              rgba(136,184,138,.55) 55%,
                              rgba(122,160,200,.55) 75%,
                              rgba(168,136,192,.55) 100%);
    --color-accent-subtle:  rgba(122,160,200,.18);
    --color-accent-border:  rgba(168,136,192,.38);
}

:root.theme-pride.theme-dark {
    --color-primary:        #d8e8f8;
    --color-secondary:      #1a1228;
    --color-bg:             #1a1228;
    --color-text:           #e8e0f0;
    --color-accent:         #a888c0;
    --color-surface:        rgba(88,60,120,.45);
    --color-button:         rgba(96,152,104,.35);
    --color-button-text: #1a1228;
    --color-button-dark:    #4a7090;
    --color-cta:            #609868;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(255,255,255,.18);
    --color-progress-track:    rgba(176,168,72,.50);
    --color-shadow-subtle:     rgba(0,0,0,.25);
    --color-overlay:        rgba(0,0,0,.55);
    --color-surface-solid:  rgba(26,18,40,.97);
    --color-surface-opaque: rgba(200,170,240,.15);
    --color-surface-mid:    rgba(136,96,168,.60);
    --color-surface-high:   rgba(96,152,104,.25);
    --color-surface-glass:  rgba(50,30,80,.92);
    --color-border:         rgba(168,136,192,.25);
    --color-border-mid:     rgba(168,136,192,.42);
    --color-border-strong:  rgba(168,136,192,.58);
    --color-border-subtle:  rgba(168,136,192,.12);
    --color-text-muted:     rgba(232,224,240,.55);
    --color-text-subtle:    rgba(232,224,240,.72);
    --color-shadow:         rgba(0,0,0,.40);
    --color-toggle-track:   rgba(136,96,168,.42);
    --color-focus:          #609868;
    --color-focus-ring:     rgba(136,96,168,.40);
    --color-nav-bg:         rgba(88,60,120,.50);
    --color-nav-hover:      rgba(108,75,145,.55);
    --color-tooltip-bg:     rgba(0,0,0,.85);
    --color-tooltip-text:   #e8e0f0;
    --color-nav-label-inactive: rgba(232,224,240,.40);
    --bg-image:             none;
    --bg-overlay:           linear-gradient(180deg,
                              rgba(176,96,80,.60) 0%,
                              rgba(192,144,80,.60) 20%,
                              rgba(176,168,72,.60) 38%,
                              rgba(96,152,104,.60) 55%,
                              rgba(88,128,176,.60) 75%,
                              rgba(136,96,168,.60) 100%);
    --color-accent-subtle:  rgba(136,96,168,.20);
    --color-accent-border:  rgba(136,96,168,.35);
}


/* ============================================================
   PROGRESS PRIDE — inklusiver Regenbogen mit trans + PoC Farben
   ============================================================ */

:root.theme-progress {
    --color-primary:        #2a4a2c;
    --color-secondary:      #fdf8f4;
    --color-bg:             #fdf8f4;
    --color-text:           #2a3a28;
    --color-accent:         #d4806a;
    --color-surface:        rgba(224,168,104,.28);
    --color-button:         #88b88a;
    --color-button-text:    #ffffff;
    --color-button-dark:    #4a7a9a;
    --color-cta:            #2a4a2c;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(136,184,138,.28);
    --color-progress-track:    #d8c870;
    --color-shadow-subtle:     rgba(0,0,0,.08);
    --color-overlay:        rgba(42,74,44,.38);
    --color-surface-solid:  rgba(253,248,244,.96);
    --color-surface-opaque: rgba(200,232,200,.70);
    --color-surface-mid:    rgba(232,220,248,.70);
    --color-surface-high:   rgba(232,220,248,.55);
    --color-surface-glass:  rgba(253,248,236,.82);
    --color-border:         rgba(122,160,200,.28);
    --color-border-mid:     rgba(122,160,200,.45);
    --color-border-strong:  rgba(122,160,200,.62);
    --color-border-subtle:  rgba(122,160,200,.12);
    --color-text-muted:     rgba(42,58,40,.55);
    --color-text-subtle:    rgba(42,58,40,.72);
    --color-shadow:         rgba(42,74,44,.10);
    --color-toggle-track:   rgba(168,136,192,.35);
    --color-focus:          #88b88a;
    --color-focus-ring:     rgba(122,160,200,.45);
    --color-nav-bg:         rgba(168,136,192,.25);
    --color-nav-hover:      rgba(168,136,192,.42);
    --color-tooltip-bg:     rgba(0,0,0,.78);
    --color-tooltip-text:   #ffffff;
    --color-nav-label-inactive: #907060;
    --bg-image:             none;
    --bg-overlay:           linear-gradient(180deg,
                              rgba(212,128,106,.55) 0%,
                              rgba(224,168,104,.55) 20%,
                              rgba(216,200,112,.55) 38%,
                              rgba(136,184,138,.55) 55%,
                              rgba(122,160,200,.55) 75%,
                              rgba(168,136,192,.55) 100%);
    --color-accent-subtle:  rgba(122,160,200,.18);
    --color-accent-border:  rgba(168,136,192,.38);
}

:root.theme-progress.theme-dark {
    --color-primary:        #d8e8f8;
    --color-secondary:      #140a20;
    --color-bg:             #140a20;
    --color-text:           #e8e0f0;
    --color-accent:         #b06050;
    --color-surface:        rgba(88,60,120,.45);
    --color-button:         rgba(96,152,104,.35);
    --color-button-text:    #1a1228;
    --color-button-dark:    #4a7090;
    --color-cta:            #609868;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(255,255,255,.18);
    --color-progress-track:    rgba(176,168,72,.50);
    --color-shadow-subtle:     rgba(0,0,0,.25);
    --color-overlay:        rgba(0,0,0,.55);
    --color-surface-solid:  rgba(20,10,32,.97);
    --color-surface-opaque: rgba(200,170,240,.15);
    --color-surface-mid:    rgba(136,96,168,.60);
    --color-surface-high:   rgba(96,152,104,.25);
    --color-surface-glass:  rgba(50,30,80,.92);
    --color-border:         rgba(168,136,192,.25);
    --color-border-mid:     rgba(168,136,192,.42);
    --color-border-strong:  rgba(168,136,192,.58);
    --color-border-subtle:  rgba(168,136,192,.12);
    --color-text-muted:     rgba(232,224,240,.55);
    --color-text-subtle:    rgba(232,224,240,.72);
    --color-shadow:         rgba(0,0,0,.40);
    --color-toggle-track:   rgba(136,96,168,.42);
    --color-focus:          #609868;
    --color-focus-ring:     rgba(136,96,168,.40);
    --color-nav-bg:         rgba(88,60,120,.50);
    --color-nav-hover:      rgba(108,75,145,.55);
    --color-tooltip-bg:     rgba(0,0,0,.85);
    --color-tooltip-text:   #e8e0f0;
    --color-nav-label-inactive: rgba(232,224,240,.40);
    --bg-image:             none;
    --bg-overlay:           linear-gradient(180deg,
                              rgba(176,96,80,.60) 0%,
                              rgba(192,144,80,.60) 20%,
                              rgba(176,168,72,.60) 38%,
                              rgba(96,152,104,.60) 55%,
                              rgba(88,128,176,.60) 75%,
                              rgba(136,96,168,.60) 100%);
    --color-accent-subtle:  rgba(136,96,168,.20);
    --color-accent-border:  rgba(136,96,168,.35);
}

/* ============================================================
   ROSE / MAUVE — Prinzessin, hell und dunkel
   Struktur 1:1 nach theme-petrol
   ============================================================ */

:root.theme-rose {
    --color-primary:        #4a1830;
    --color-secondary:      #f5e6ec;
    --color-bg:             #fff5f8;
    --color-text:           #4a1830;
    --color-accent:         #c8879a;
    --color-surface:        #f5e6ec;
    --color-button:         #e8c0d0;
    --color-button-text:    #f5e6ec;
    --color-button-dark:    #7a4055;
    --color-cta:            #4a1830;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(74,24,48,.18);
    --color-progress-track:    #e0e0e0;
    --color-shadow-subtle:     rgba(0,0,0,.08);
    --color-overlay:        rgba(74,24,48,.38);
    --color-surface-solid:  rgba(255,245,248,.96);
    --color-surface-opaque: rgba(255,245,248,.90);
    --color-surface-mid:    rgba(245,230,236,.90);
    --color-surface-high:   rgba(255,245,248,.75);
    --color-surface-glass:  rgba(255,245,248,.62);
    --color-border:         rgba(74,24,48,.15);
    --color-border-mid:     rgba(74,24,48,.28);
    --color-border-strong:  rgba(74,24,48,.38);
    --color-border-subtle:  rgba(74,24,48,.08);
    --color-text-muted:     rgba(74,24,48,.55);
    --color-text-subtle:    rgba(74,24,48,.72);
    --color-shadow:         rgba(74,24,48,.12);
    --color-toggle-track:   rgba(74,24,48,.18);
    --color-focus:          #9b5070;
    --color-focus-ring:     rgba(232,192,208,.45);
    --color-nav-bg:         #edd8e4;
    --color-nav-hover:      #e0c8d4;
    --color-tooltip-bg:     rgba(0,0,0,.78);
    --color-tooltip-text:   #ffffff;
    --color-nav-label-inactive: #a07080;
    --bg-image:             url("/assets/img/Lightmode_Princess.webp");
    --bg-overlay:           linear-gradient(180deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,.88) 100%);
    --color-accent-subtle:  rgba(200,135,154,.15);
    --color-accent-border:  rgba(200,135,154,.30);
}

:root.theme-rose.theme-dark {
    --color-primary:        #f0d8e4;
    --color-secondary:      #1a0a12;
    --color-bg:             #1a0a12;
    --color-text:           #f0d8e4;
    --color-accent:         #c890a8;
    --color-surface:        rgba(50,18,32,.80);
    --color-button:         rgba(70,28,45,.85);
    --color-button-text:    #1a0a12;
    --color-button-dark:    #c890a8;
    --color-cta:            #c890a8;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(255,255,255,.18);
    --color-progress-track:    rgba(255,255,255,.10);
    --color-shadow-subtle:     rgba(0,0,0,.25);
    --color-overlay:        rgba(0,0,0,.55);
    --color-surface-solid:  rgba(26,10,18,.97);
    --color-surface-opaque: rgba(60,22,40,.70);
    --color-surface-mid:    rgba(50,18,35,.85);
    --color-surface-high:   rgba(60,22,40,.85);
    --color-surface-glass:  rgba(50,18,35,.85);
    --color-border:         rgba(240,200,220,.15);
    --color-border-mid:     rgba(240,200,220,.25);
    --color-border-strong:  rgba(240,200,220,.38);
    --color-border-subtle:  rgba(240,200,220,.08);
    --color-text-muted:     rgba(240,216,228,.55);
    --color-text-subtle:    rgba(240,216,228,.72);
    --color-shadow:         rgba(0,0,0,.40);
    --color-toggle-track:   rgba(200,144,168,.30);
    --color-focus:          #c890a8;
    --color-focus-ring:     rgba(200,144,168,.30);
    --color-nav-bg:         rgba(55,20,38,.85);
    --color-nav-hover:      rgba(75,28,52,.85);
    --color-tooltip-bg:     rgba(0,0,0,.85);
    --color-tooltip-text:   #f0d8e4;
    --color-nav-label-inactive: rgba(240,216,228,.40);
    --bg-image:             url("/assets/img/Darkmode_Princess.webp");
    --bg-overlay:           linear-gradient(180deg,
    rgba(20,10,5,.45) 0%,
    rgba(20,10,5,.25) 100%);
    --color-accent-subtle:  rgba(200,144,168,.14);
    --color-accent-border:  rgba(240,200,220,.16);
}

/* ============================================================
   ANTHRAZIT / GREIGE — Warm-Matt, sehr clean
   Struktur 1:1 nach theme-petrol
   ============================================================ */

:root.theme-anthrazit {
    --color-primary:        #201e1a;
    --color-secondary:      #f2ede8;
    --color-bg:             #ffffff;
    --color-text:           #201e1a;
    --color-accent:         #524e48;
    --color-surface:        #f2ede8;
    --color-button:         #ddd8d2;
    --color-button-text:    #f2ede8;
    --color-button-dark:    #38342e;
    --color-cta:            #201e1a;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(32,30,26,.18);
    --color-progress-track:    #e0e0e0;
    --color-shadow-subtle:     rgba(0,0,0,.08);
    --color-overlay:        rgba(32,30,26,.38);
    --color-surface-solid:  rgba(255,255,255,.96);
    --color-surface-opaque: rgba(255,255,255,.90);
    --color-surface-mid:    rgba(242,237,232,.90);
    --color-surface-high:   rgba(255,255,255,.75);
    --color-surface-glass:  rgba(255,255,255,.62);
    --color-border:         rgba(32,30,26,.15);
    --color-border-mid:     rgba(32,30,26,.28);
    --color-border-strong:  rgba(32,30,26,.38);
    --color-border-subtle:  rgba(32,30,26,.08);
    --color-text-muted:     rgba(32,30,26,.55);
    --color-text-subtle:    rgba(32,30,26,.72);
    --color-shadow:         rgba(32,30,26,.12);
    --color-toggle-track:   rgba(32,30,26,.18);
    --color-focus:          #524e48;
    --color-focus-ring:     rgba(200,192,180,.45);
    --color-nav-bg:         #e8e2dc;
    --color-nav-hover:      #dbd4ce;
    --color-tooltip-bg:     rgba(0,0,0,.78);
    --color-tooltip-text:   #ffffff;
    --color-nav-label-inactive: #908880;
    --bg-image:             none;
    --bg-overlay:           none;
    --color-accent-subtle:  rgba(82,78,72,.15);
    --color-accent-border:  rgba(82,78,72,.30);
}

:root.theme-anthrazit.theme-dark {
    --color-primary:        #f0ece8;
    --color-secondary:      #201e1a;
    --color-bg:             #201e1a;
    --color-text:           #f0ece8;
    --color-accent:         #a09888;
    --color-surface:        rgba(48,44,40,.80);
    --color-button:         rgba(62,58,52,.85);
    --color-button-text:    #201e1a;
    --color-button-dark:    #a09888;
    --color-cta:            #a09888;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(255,255,255,.18);
    --color-progress-track:    rgba(255,255,255,.10);
    --color-shadow-subtle:     rgba(0,0,0,.25);
    --color-overlay:        rgba(0,0,0,.55);
    --color-surface-solid:  rgba(32,30,26,.97);
    --color-surface-opaque: rgba(58,54,48,.70);
    --color-surface-mid:    rgba(48,44,38,.85);
    --color-surface-high:   rgba(58,54,48,.85);
    --color-surface-glass:  rgba(48,44,38,.85);
    --color-border:         rgba(240,236,232,.15);
    --color-border-mid:     rgba(240,236,232,.25);
    --color-border-strong:  rgba(240,236,232,.38);
    --color-border-subtle:  rgba(240,236,232,.08);
    --color-text-muted:     rgba(240,236,232,.55);
    --color-text-subtle:    rgba(240,236,232,.72);
    --color-shadow:         rgba(0,0,0,.40);
    --color-toggle-track:   rgba(160,152,136,.30);
    --color-focus:          #a09888;
    --color-focus-ring:     rgba(160,152,136,.30);
    --color-nav-bg:         rgba(48,44,38,.85);
    --color-nav-hover:      rgba(65,60,52,.85);
    --color-tooltip-bg:     rgba(0,0,0,.85);
    --color-tooltip-text:   #f0ece8;
    --color-nav-label-inactive: rgba(240,236,232,.40);
    --bg-image:             none;
    --bg-overlay:           none;
    --color-accent-subtle:  rgba(160,152,136,.14);
    --color-accent-border:  rgba(240,236,232,.16);
}

/* ============================================================
   TERRAKOTTA — warm und satt, light und dark
   Struktur 1:1 nach theme-petrol
   ============================================================ */

:root.theme-terrakotta {
    --color-primary:        #6a2818;
    --color-secondary:      #fdf0ea;
    --color-bg:             #ffffff;
    --color-text:           #6a2818;
    --color-accent:         #c05a38;
    --color-surface:        #fdf0ea;
    --color-button:         #f0c8a8;
    --color-button-text:    #fdf0ea;
    --color-button-dark:    #8a3820;
    --color-cta:            #6a2818;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(106,40,24,.18);
    --color-progress-track:    #e0e0e0;
    --color-shadow-subtle:     rgba(0,0,0,.08);
    --color-overlay:        rgba(106,40,24,.38);
    --color-surface-solid:  rgba(255,255,255,.96);
    --color-surface-opaque: rgba(255,255,255,.90);
    --color-surface-mid:    rgba(253,240,234,.90);
    --color-surface-high:   rgba(255,255,255,.75);
    --color-surface-glass:  rgba(255,255,255,.62);
    --color-border:         rgba(106,40,24,.15);
    --color-border-mid:     rgba(106,40,24,.28);
    --color-border-strong:  rgba(106,40,24,.38);
    --color-border-subtle:  rgba(106,40,24,.08);
    --color-text-muted:     rgba(106,40,24,.55);
    --color-text-subtle:    rgba(106,40,24,.72);
    --color-shadow:         rgba(106,40,24,.12);
    --color-toggle-track:   rgba(106,40,24,.18);
    --color-focus:          #c05a38;
    --color-focus-ring:     rgba(240,200,168,.45);
    --color-nav-bg:         #f0d8c8;
    --color-nav-hover:      #e4c8b4;
    --color-tooltip-bg:     rgba(0,0,0,.78);
    --color-tooltip-text:   #ffffff;
    --color-nav-label-inactive: #b08070;
    --bg-image:             url("/assets/img/Lightmode_Terracotta.webp");
    --bg-overlay:           linear-gradient(180deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,.88) 100%);
    --color-accent-subtle:  rgba(192,90,56,.15);
    --color-accent-border:  rgba(192,90,56,.30);
}

:root.theme-terrakotta.theme-dark {
    --color-primary:        #f0c8a8;
    --color-secondary:      #1e0c06;
    --color-bg:             #1e0c06;
    --color-text:           #f0c8a8;
    --color-accent:         #d06840;
    --color-surface:        rgba(56,22,10,.80);
    --color-button:         rgba(74,28,12,.85);
    --color-button-text:    #1e0c06;
    --color-button-dark:    #d06840;
    --color-cta:            #d06840;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(255,255,255,.18);
    --color-progress-track:    rgba(255,255,255,.10);
    --color-shadow-subtle:     rgba(0,0,0,.25);
    --color-overlay:        rgba(0,0,0,.55);
    --color-surface-solid:  rgba(30,12,6,.97);
    --color-surface-opaque: rgba(70,28,12,.70);
    --color-surface-mid:    rgba(58,22,8,.85);
    --color-surface-high:   rgba(70,28,12,.85);
    --color-surface-glass:  rgba(58,22,8,.85);
    --color-border:         rgba(255,200,160,.15);
    --color-border-mid:     rgba(255,200,160,.25);
    --color-border-strong:  rgba(255,200,160,.38);
    --color-border-subtle:  rgba(255,200,160,.08);
    --color-text-muted:     rgba(240,200,168,.55);
    --color-text-subtle:    rgba(240,200,168,.72);
    --color-shadow:         rgba(0,0,0,.40);
    --color-toggle-track:   rgba(208,104,64,.30);
    --color-focus:          #d06840;
    --color-focus-ring:     rgba(208,104,64,.30);
    --color-nav-bg:         rgba(62,24,10,.85);
    --color-nav-hover:      rgba(82,32,14,.85);
    --color-tooltip-bg:     rgba(0,0,0,.85);
    --color-tooltip-text:   #f0c8a8;
    --color-nav-label-inactive: rgba(240,200,168,.40);
    --bg-image:             url("/assets/img/Darkmode_Terracotta.webp");
    --bg-overlay:           linear-gradient(180deg,
    rgba(20,10,5,.45) 0%,
    rgba(20,10,5,.25) 100%);
    --color-accent-subtle:  rgba(208,104,64,.14);
    --color-accent-border:  rgba(255,200,160,.16);
}

/* ============================================================
   OLIVE / OCKER — erdiges Grün-Gold, light und dark
   Struktur 1:1 nach theme-petrol
   ============================================================ */

:root.theme-olive {
    --color-primary:        #2e3010;
    --color-secondary:      #f5f0e0;
    --color-bg:             #ffffff;
    --color-text:           #2e3010;
    --color-accent:         #c8b860;
    --color-surface:        #f5f0e0;
    --color-button:         #ddd8a8;
    --color-button-text:    #f5f0e0;
    --color-button-dark:    #6a7030;
    --color-cta:            #2e3010;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(46,48,16,.18);
    --color-progress-track:    #e0e0e0;
    --color-shadow-subtle:     rgba(0,0,0,.08);
    --color-overlay:        rgba(46,48,16,.38);
    --color-surface-solid:  rgba(255,255,255,.96);
    --color-surface-opaque: rgba(255,255,255,.90);
    --color-surface-mid:    rgba(245,240,224,.90);
    --color-surface-high:   rgba(255,255,255,.75);
    --color-surface-glass:  rgba(255,255,255,.62);
    --color-border:         rgba(46,48,16,.15);
    --color-border-mid:     rgba(46,48,16,.28);
    --color-border-strong:  rgba(46,48,16,.38);
    --color-border-subtle:  rgba(46,48,16,.08);
    --color-text-muted:     rgba(46,48,16,.55);
    --color-text-subtle:    rgba(46,48,16,.72);
    --color-shadow:         rgba(46,48,16,.12);
    --color-toggle-track:   rgba(46,48,16,.18);
    --color-focus:          #6a7030;
    --color-focus-ring:     rgba(200,184,96,.45);
    --color-nav-bg:         #e8e0c0;
    --color-nav-hover:      #dbd8b0;
    --color-tooltip-bg:     rgba(0,0,0,.78);
    --color-tooltip-text:   #ffffff;
    --color-nav-label-inactive: #908840;
    --bg-image:             url("/assets/img/Lightmode_Olive.webp");
    --bg-overlay:           linear-gradient(180deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,.88) 100%);
    --color-accent-subtle:  rgba(200,184,96,.15);
    --color-accent-border:  rgba(200,184,96,.30);
}

:root.theme-olive.theme-dark {
    --color-primary:        #e8d888;
    --color-secondary:      #141604;
    --color-bg:             #141604;
    --color-text:           #e8d888;
    --color-accent:         #b0a840;
    --color-surface:        rgba(38,40,12,.80);
    --color-button:         rgba(52,55,16,.85);
    --color-button-text:    #141604;
    --color-button-dark:    #b0a840;
    --color-cta:            #b0a840;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(255,255,255,.18);
    --color-progress-track:    rgba(255,255,255,.10);
    --color-shadow-subtle:     rgba(0,0,0,.25);
    --color-overlay:        rgba(0,0,0,.55);
    --color-surface-solid:  rgba(20,22,4,.97);
    --color-surface-opaque: rgba(52,55,16,.70);
    --color-surface-mid:    rgba(42,44,12,.85);
    --color-surface-high:   rgba(52,55,16,.85);
    --color-surface-glass:  rgba(42,44,12,.85);
    --color-border:         rgba(232,216,136,.15);
    --color-border-mid:     rgba(232,216,136,.25);
    --color-border-strong:  rgba(232,216,136,.38);
    --color-border-subtle:  rgba(232,216,136,.08);
    --color-text-muted:     rgba(232,216,136,.55);
    --color-text-subtle:    rgba(232,216,136,.72);
    --color-shadow:         rgba(0,0,0,.40);
    --color-toggle-track:   rgba(176,168,64,.30);
    --color-focus:          #b0a840;
    --color-focus-ring:     rgba(176,168,64,.30);
    --color-nav-bg:         rgba(42,44,12,.85);
    --color-nav-hover:      rgba(58,62,18,.85);
    --color-tooltip-bg:     rgba(0,0,0,.85);
    --color-tooltip-text:   #e8d888;
    --color-nav-label-inactive: rgba(232,216,136,.40);
    --bg-image:             url("/assets/img/Darkmode_Olive.webp");
    --bg-overlay:           linear-gradient(180deg,
    rgba(20,10,5,.45) 0%,
    rgba(20,10,5,.25) 100%);
    --color-accent-subtle:  rgba(176,168,64,.14);
    --color-accent-border:  rgba(232,216,136,.16);
}

/* ============================================================
   ANTHRAZIT + EIS — Cool / Thriller, light und dark
   Struktur 1:1 nach theme-petrol
   ============================================================ */

:root.theme-thriller {
    --color-primary:        #14181e;
    --color-secondary:      #eef0f2;
    --color-bg:             #ffffff;
    --color-text:           #14181e;
    --color-accent:         #8a9aaa;
    --color-surface:        #eef0f2;
    --color-button:         #ccd4dc;
    --color-button-text:    #eef0f2;
    --color-button-dark:    #363c44;
    --color-cta:            #14181e;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(20,24,30,.18);
    --color-progress-track:    #e0e0e0;
    --color-shadow-subtle:     rgba(0,0,0,.08);
    --color-overlay:        rgba(20,24,30,.38);
    --color-surface-solid:  rgba(255,255,255,.96);
    --color-surface-opaque: rgba(255,255,255,.90);
    --color-surface-mid:    rgba(238,240,242,.90);
    --color-surface-high:   rgba(255,255,255,.75);
    --color-surface-glass:  rgba(255,255,255,.62);
    --color-border:         rgba(20,24,30,.15);
    --color-border-mid:     rgba(20,24,30,.28);
    --color-border-strong:  rgba(20,24,30,.38);
    --color-border-subtle:  rgba(20,24,30,.08);
    --color-text-muted:     rgba(20,24,30,.55);
    --color-text-subtle:    rgba(20,24,30,.72);
    --color-shadow:         rgba(20,24,30,.12);
    --color-toggle-track:   rgba(20,24,30,.18);
    --color-focus:          #5a7a9a;
    --color-focus-ring:     rgba(138,154,170,.45);
    --color-nav-bg:         #dde2e8;
    --color-nav-hover:      #cdd4dc;
    --color-tooltip-bg:     rgba(0,0,0,.78);
    --color-tooltip-text:   #ffffff;
    --color-nav-label-inactive: #6a7a8a;
    --bg-image:             none;
    --bg-overlay:           none;
    --color-accent-subtle:  rgba(138,154,170,.15);
    --color-accent-border:  rgba(138,154,170,.30);
}

:root.theme-thriller.theme-dark {
    --color-primary:        #eef0f2;
    --color-secondary:      #14181e;
    --color-bg:             #14181e;
    --color-text:           #eef0f2;
    --color-accent:         #7a9ab8;
    --color-surface:        rgba(32,38,46,.80);
    --color-button:         rgba(44,52,62,.85);
    --color-button-text:    #14181e;
    --color-button-dark:    #7a9ab8;
    --color-cta:            #7a9ab8;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(255,255,255,.18);
    --color-progress-track:    rgba(255,255,255,.10);
    --color-shadow-subtle:     rgba(0,0,0,.25);
    --color-overlay:        rgba(0,0,0,.55);
    --color-surface-solid:  rgba(20,24,30,.97);
    --color-surface-opaque: rgba(44,52,62,.70);
    --color-surface-mid:    rgba(36,42,52,.85);
    --color-surface-high:   rgba(44,52,62,.85);
    --color-surface-glass:  rgba(36,42,52,.85);
    --color-border:         rgba(200,215,230,.15);
    --color-border-mid:     rgba(200,215,230,.25);
    --color-border-strong:  rgba(200,215,230,.38);
    --color-border-subtle:  rgba(200,215,230,.08);
    --color-text-muted:     rgba(238,240,242,.55);
    --color-text-subtle:    rgba(238,240,242,.72);
    --color-shadow:         rgba(0,0,0,.40);
    --color-toggle-track:   rgba(122,154,184,.30);
    --color-focus:          #7a9ab8;
    --color-focus-ring:     rgba(122,154,184,.30);
    --color-nav-bg:         rgba(36,42,52,.85);
    --color-nav-hover:      rgba(50,58,70,.85);
    --color-tooltip-bg:     rgba(0,0,0,.85);
    --color-tooltip-text:   #eef0f2;
    --color-nav-label-inactive: rgba(238,240,242,.40);
    --bg-image:             none;
    --bg-overlay:           none;
    --color-accent-subtle:  rgba(122,154,184,.14);
    --color-accent-border:  rgba(200,215,230,.16);
}

/* ============================================================
   WALDGRÜN + KUPFER — Fantasy / Mystik, light und dark
   Struktur 1:1 nach theme-petrol
   ============================================================ */

:root.theme-wald {
    --color-primary:        #0d1a10;
    --color-secondary:      #e8f0e4;
    --color-bg:             #ffffff;
    --color-text:           #0d1a10;
    --color-accent:         #b87040;
    --color-surface:        #e8f0e4;
    --color-button:         #c8dcc0;
    --color-button-text:    #e8f0e4;
    --color-button-dark:    #1e4020;
    --color-cta:            #0d1a10;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(13,26,16,.18);
    --color-progress-track:    #e0e0e0;
    --color-shadow-subtle:     rgba(0,0,0,.08);
    --color-overlay:        rgba(13,26,16,.38);
    --color-surface-solid:  rgba(255,255,255,.96);
    --color-surface-opaque: rgba(255,255,255,.90);
    --color-surface-mid:    rgba(232,240,228,.90);
    --color-surface-high:   rgba(255,255,255,.75);
    --color-surface-glass:  rgba(255,255,255,.62);
    --color-border:         rgba(13,26,16,.15);
    --color-border-mid:     rgba(13,26,16,.28);
    --color-border-strong:  rgba(13,26,16,.38);
    --color-border-subtle:  rgba(13,26,16,.08);
    --color-text-muted:     rgba(13,26,16,.55);
    --color-text-subtle:    rgba(13,26,16,.72);
    --color-shadow:         rgba(13,26,16,.12);
    --color-toggle-track:   rgba(13,26,16,.18);
    --color-focus:          #1e4020;
    --color-focus-ring:     rgba(184,112,64,.45);
    --color-nav-bg:         #d4e4cc;
    --color-nav-hover:      #c4d8b8;
    --color-tooltip-bg:     rgba(0,0,0,.78);
    --color-tooltip-text:   #ffffff;
    --color-nav-label-inactive: #5a8060;
    --bg-image:             url("/assets/img/Lightmode_Wald.webp");
    --bg-overlay:           linear-gradient(180deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,.88) 100%);
    --color-accent-subtle:  rgba(184,112,64,.15);
    --color-accent-border:  rgba(184,112,64,.30);
}

:root.theme-wald.theme-dark {
    --color-primary:        #f0d0a0;
    --color-secondary:      #0d1a10;
    --color-bg:             #0d1a10;
    --color-text:           #f0d0a0;
    --color-accent:         #c88040;
    --color-surface:        rgba(22,42,24,.80);
    --color-button:         rgba(30,58,32,.85);
    --color-button-text:    #0d1a10;
    --color-button-dark:    #c88040;
    --color-cta:            #c88040;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(255,255,255,.18);
    --color-progress-track:    rgba(255,255,255,.10);
    --color-shadow-subtle:     rgba(0,0,0,.25);
    --color-overlay:        rgba(0,0,0,.55);
    --color-surface-solid:  rgba(13,26,16,.97);
    --color-surface-opaque: rgba(30,58,32,.70);
    --color-surface-mid:    rgba(22,44,24,.85);
    --color-surface-high:   rgba(30,58,32,.85);
    --color-surface-glass:  rgba(22,44,24,.85);
    --color-border:         rgba(200,168,100,.15);
    --color-border-mid:     rgba(200,168,100,.25);
    --color-border-strong:  rgba(200,168,100,.38);
    --color-border-subtle:  rgba(200,168,100,.08);
    --color-text-muted:     rgba(240,208,160,.55);
    --color-text-subtle:    rgba(240,208,160,.72);
    --color-shadow:         rgba(0,0,0,.40);
    --color-toggle-track:   rgba(200,128,64,.30);
    --color-focus:          #c88040;
    --color-focus-ring:     rgba(200,128,64,.30);
    --color-nav-bg:         rgba(22,44,24,.85);
    --color-nav-hover:      rgba(32,62,34,.85);
    --color-tooltip-bg:     rgba(0,0,0,.85);
    --color-tooltip-text:   #f0d0a0;
    --color-nav-label-inactive: rgba(240,208,160,.40);
    --bg-image:             url("/assets/img/Darkmode_Wald.webp");
    --bg-overlay:           linear-gradient(180deg,
    rgba(20,10,5,.45) 0%,
    rgba(20,10,5,.25) 100%);
    --color-accent-subtle:  rgba(200,128,64,.14);
    --color-accent-border:  rgba(200,168,100,.16);
}

/* ============================================================
   AURORA — Nordlicht, immer Dark
   Struktur 1:1 nach theme-petrol dark
   ============================================================ */

:root.theme-aurora {
    --color-primary:        #e0f0ff;
    --color-secondary:      #0a0814;
    --color-bg:             #0a0814;
    --color-text:           #e0f0ff;
    --color-accent:         #3a7a8a;
    --color-surface:        rgba(18,22,50,.80);
    --color-button:         rgba(24,36,65,.85);
    --color-button-text:    #0a0814;
    --color-button-dark:    #3a7a8a;
    --color-cta:            #3a7a8a;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(255,255,255,.18);
    --color-progress-track:    rgba(255,255,255,.10);
    --color-shadow-subtle:     rgba(0,0,0,.25);
    --color-overlay:        rgba(0,0,0,.55);
    --color-surface-solid:  rgba(10,8,20,.97);
    --color-surface-opaque: rgba(24,36,65,.70);
    --color-surface-mid:    rgba(20,30,55,.85);
    --color-surface-high:   rgba(24,36,65,.85);
    --color-surface-glass:  rgba(20,30,55,.85);
    --color-border:         rgba(160,220,240,.15);
    --color-border-mid:     rgba(160,220,240,.25);
    --color-border-strong:  rgba(160,220,240,.38);
    --color-border-subtle:  rgba(160,220,240,.08);
    --color-text-muted:     rgba(224,240,255,.55);
    --color-text-subtle:    rgba(224,240,255,.72);
    --color-shadow:         rgba(0,0,0,.40);
    --color-toggle-track:   rgba(58,122,138,.30);
    --color-focus:          #3a9a6a;
    --color-focus-ring:     rgba(58,122,138,.30);
    --color-nav-bg:         rgba(20,30,55,.85);
    --color-nav-hover:      rgba(30,44,75,.85);
    --color-tooltip-bg:     rgba(0,0,0,.85);
    --color-tooltip-text:   #e0f0ff;
    --color-nav-label-inactive: rgba(224,240,255,.40);
    --bg-image:             url("/assets/img/Lightmode_Aurora.webp");
    --bg-overlay:           linear-gradient(180deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,.88) 100%);
    --color-accent-subtle:  rgba(58,122,138,.14);
    --color-accent-border:  rgba(160,220,240,.16);
}

:root.theme-aurora.theme-dark {
    --color-primary:        #e0f0ff;
    --color-secondary:      #0a0814;
    --color-bg:             #0a0814;
    --color-text:           #e0f0ff;
    --color-accent:         #3a7a8a;
    --color-surface:        rgba(18,22,50,.80);
    --color-button:         rgba(24,36,65,.85);
    --color-button-text:    #0a0814;
    --color-button-dark:    #3a7a8a;
    --color-cta:            #3a7a8a;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(255,255,255,.18);
    --color-progress-track:    rgba(255,255,255,.10);
    --color-shadow-subtle:     rgba(0,0,0,.25);
    --color-overlay:        rgba(0,0,0,.55);
    --color-surface-solid:  rgba(10,8,20,.97);
    --color-surface-opaque: rgba(24,36,65,.70);
    --color-surface-mid:    rgba(20,30,55,.85);
    --color-surface-high:   rgba(24,36,65,.85);
    --color-surface-glass:  rgba(20,30,55,.85);
    --color-border:         rgba(160,220,240,.15);
    --color-border-mid:     rgba(160,220,240,.25);
    --color-border-strong:  rgba(160,220,240,.38);
    --color-border-subtle:  rgba(160,220,240,.08);
    --color-text-muted:     rgba(224,240,255,.55);
    --color-text-subtle:    rgba(224,240,255,.72);
    --color-shadow:         rgba(0,0,0,.40);
    --color-toggle-track:   rgba(58,122,138,.30);
    --color-focus:          #3a9a6a;
    --color-focus-ring:     rgba(58,122,138,.30);
    --color-nav-bg:         rgba(20,30,55,.85);
    --color-nav-hover:      rgba(30,44,75,.85);
    --color-tooltip-bg:     rgba(0,0,0,.85);
    --color-tooltip-text:   #e0f0ff;
    --color-nav-label-inactive: rgba(224,240,255,.40);
    --bg-image:             url("/assets/img/Darkmode_Aurora.webp");
    --bg-overlay:           linear-gradient(180deg,
    rgba(20,10,5,.45) 0%,
    rgba(20,10,5,.25) 100%);
    --color-accent-subtle:  rgba(58,122,138,.14);
    --color-accent-border:  rgba(160,220,240,.16);
}

/* ============================================================
   INDIGO + ROSE — Romantisch-Dunkel, light und dark
   Struktur 1:1 nach theme-petrol
   ============================================================ */

:root.theme-indigo {
    --color-primary:        #1a1040;
    --color-secondary:      #ede8f5;
    --color-bg:             #ffffff;
    --color-text:           #1a1040;
    --color-accent:         #8060b0;
    --color-surface:        #ede8f5;
    --color-button:         #d0c4e8;
    --color-button-text:    #ede8f5;
    --color-button-dark:    #4a3080;
    --color-cta:            #1a1040;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(26,16,64,.18);
    --color-progress-track:    #e0e0e0;
    --color-shadow-subtle:     rgba(0,0,0,.08);
    --color-overlay:        rgba(26,16,64,.38);
    --color-surface-solid:  rgba(255,255,255,.96);
    --color-surface-opaque: rgba(255,255,255,.90);
    --color-surface-mid:    rgba(237,232,245,.90);
    --color-surface-high:   rgba(255,255,255,.75);
    --color-surface-glass:  rgba(255,255,255,.62);
    --color-border:         rgba(26,16,64,.15);
    --color-border-mid:     rgba(26,16,64,.28);
    --color-border-strong:  rgba(26,16,64,.38);
    --color-border-subtle:  rgba(26,16,64,.08);
    --color-text-muted:     rgba(26,16,64,.55);
    --color-text-subtle:    rgba(26,16,64,.72);
    --color-shadow:         rgba(26,16,64,.12);
    --color-toggle-track:   rgba(26,16,64,.18);
    --color-focus:          #c87090;
    --color-focus-ring:     rgba(208,196,232,.45);
    --color-nav-bg:         #ddd4f0;
    --color-nav-hover:      #cec4e4;
    --color-tooltip-bg:     rgba(0,0,0,.78);
    --color-tooltip-text:   #ffffff;
    --color-nav-label-inactive: #7060a0;
    --bg-image:             none;
    --bg-overlay:           none;
    --color-accent-subtle:  rgba(128,96,176,.15);
    --color-accent-border:  rgba(128,96,176,.30);
}

:root.theme-indigo.theme-dark {
    --color-primary:        #e8d0f0;
    --color-secondary:      #0f0820;
    --color-bg:             #0f0820;
    --color-text:           #e8d0f0;
    --color-accent:         #a080d0;
    --color-surface:        rgba(28,18,55,.80);
    --color-button:         rgba(40,26,75,.85);
    --color-button-text:    #0f0820;
    --color-button-dark:    #a080d0;
    --color-cta:            #a080d0;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(255,255,255,.18);
    --color-progress-track:    rgba(255,255,255,.10);
    --color-shadow-subtle:     rgba(0,0,0,.25);
    --color-overlay:        rgba(0,0,0,.55);
    --color-surface-solid:  rgba(15,8,32,.97);
    --color-surface-opaque: rgba(40,26,75,.70);
    --color-surface-mid:    rgba(30,20,58,.85);
    --color-surface-high:   rgba(40,26,75,.85);
    --color-surface-glass:  rgba(30,20,58,.85);
    --color-border:         rgba(220,190,240,.15);
    --color-border-mid:     rgba(220,190,240,.25);
    --color-border-strong:  rgba(220,190,240,.38);
    --color-border-subtle:  rgba(220,190,240,.08);
    --color-text-muted:     rgba(232,208,240,.55);
    --color-text-subtle:    rgba(232,208,240,.72);
    --color-shadow:         rgba(0,0,0,.40);
    --color-toggle-track:   rgba(160,128,208,.30);
    --color-focus:          #c87090;
    --color-focus-ring:     rgba(160,128,208,.30);
    --color-nav-bg:         rgba(30,20,58,.85);
    --color-nav-hover:      rgba(44,30,80,.85);
    --color-tooltip-bg:     rgba(0,0,0,.85);
    --color-tooltip-text:   #e8d0f0;
    --color-nav-label-inactive: rgba(232,208,240,.40);
    --bg-image:             none;
    --bg-overlay:           none;
    --color-accent-subtle:  rgba(160,128,208,.14);
    --color-accent-border:  rgba(220,190,240,.16);
}

/* ============================================================
   NAVY + CREME — Klassisch, Krimi, light und dark
   Struktur 1:1 nach theme-petrol
   ============================================================ */

:root.theme-navy {
    --color-primary:        #0d1a2e;
    --color-secondary:      #f0ece0;
    --color-bg:             #ffffff;
    --color-text:           #0d1a2e;
    --color-accent:         #1a3055;
    --color-surface:        #f0ece0;
    --color-button:         #d8d0bc;
    --color-button-text:    #f0ece0;
    --color-button-dark:    #1a3055;
    --color-cta:            #0d1a2e;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(13,26,46,.18);
    --color-progress-track:    #e0e0e0;
    --color-shadow-subtle:     rgba(0,0,0,.08);
    --color-overlay:        rgba(13,26,46,.38);
    --color-surface-solid:  rgba(255,255,255,.96);
    --color-surface-opaque: rgba(255,255,255,.90);
    --color-surface-mid:    rgba(240,236,224,.90);
    --color-surface-high:   rgba(255,255,255,.75);
    --color-surface-glass:  rgba(255,255,255,.62);
    --color-border:         rgba(13,26,46,.15);
    --color-border-mid:     rgba(13,26,46,.28);
    --color-border-strong:  rgba(13,26,46,.38);
    --color-border-subtle:  rgba(13,26,46,.08);
    --color-text-muted:     rgba(13,26,46,.55);
    --color-text-subtle:    rgba(13,26,46,.72);
    --color-shadow:         rgba(13,26,46,.12);
    --color-toggle-track:   rgba(13,26,46,.18);
    --color-focus:          #2a5080;
    --color-focus-ring:     rgba(216,208,188,.45);
    --color-nav-bg:         #e0d8c4;
    --color-nav-hover:      #d4ccb4;
    --color-tooltip-bg:     rgba(0,0,0,.78);
    --color-tooltip-text:   #ffffff;
    --color-nav-label-inactive: #607080;
    --bg-image:             none;
    --bg-overlay:           none;
    --color-accent-subtle:  rgba(26,48,85,.15);
    --color-accent-border:  rgba(26,48,85,.30);
}

:root.theme-navy.theme-dark {
    --color-primary:        #e8e0d0;
    --color-secondary:      #070e1a;
    --color-bg:             #070e1a;
    --color-text:           #e8e0d0;
    --color-accent:         #4a78b0;
    --color-surface:        rgba(14,24,42,.80);
    --color-button:         rgba(20,36,62,.85);
    --color-button-text:    #070e1a;
    --color-button-dark:    #4a78b0;
    --color-cta:            #4a78b0;
    --color-danger:         #c75b5b;
    --color-progress-inactive: rgba(255,255,255,.18);
    --color-progress-track:    rgba(255,255,255,.10);
    --color-shadow-subtle:     rgba(0,0,0,.25);
    --color-overlay:        rgba(0,0,0,.55);
    --color-surface-solid:  rgba(7,14,26,.97);
    --color-surface-opaque: rgba(20,36,62,.70);
    --color-surface-mid:    rgba(14,26,46,.85);
    --color-surface-high:   rgba(20,36,62,.85);
    --color-surface-glass:  rgba(14,26,46,.85);
    --color-border:         rgba(200,216,240,.15);
    --color-border-mid:     rgba(200,216,240,.25);
    --color-border-strong:  rgba(200,216,240,.38);
    --color-border-subtle:  rgba(200,216,240,.08);
    --color-text-muted:     rgba(232,224,208,.55);
    --color-text-subtle:    rgba(232,224,208,.72);
    --color-shadow:         rgba(0,0,0,.40);
    --color-toggle-track:   rgba(74,120,176,.30);
    --color-focus:          #4a78b0;
    --color-focus-ring:     rgba(74,120,176,.30);
    --color-nav-bg:         rgba(14,26,46,.85);
    --color-nav-hover:      rgba(22,38,65,.85);
    --color-tooltip-bg:     rgba(0,0,0,.85);
    --color-tooltip-text:   #e8e0d0;
    --color-nav-label-inactive: rgba(232,224,208,.40);
    --bg-image:             none;
    --bg-overlay:           none;
    --color-accent-subtle:  rgba(74,120,176,.14);
    --color-accent-border:  rgba(200,216,240,.16);
}

/* ===== ALLGEMEINE REGELN ===== */

body {
  background: var(--color-bg) !important;
}

@media (min-width: 1024px) {
  body {
    background:
      var(--bg-overlay),
      var(--bg-image),
      var(--color-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}

:root.theme-pride body,
:root.theme-progress body {
  background:
    linear-gradient(180deg,
      rgba(212,128,106,.55) 0%,
      rgba(224,168,104,.55) 20%,
      rgba(216,200,112,.55) 38%,
      rgba(136,184,138,.55) 55%,
      rgba(122,160,200,.55) 75%,
      rgba(168,136,192,.55) 100%),
    #fdf8ec !important;
}

:root.theme-pride.theme-dark body,
:root.theme-progress.theme-dark body {
  background:
    linear-gradient(180deg,
      rgba(176,96,80,.60) 0%,
      rgba(192,144,80,.60) 20%,
      rgba(176,168,72,.60) 38%,
      rgba(96,152,104,.60) 55%,
      rgba(88,128,176,.60) 75%,
      rgba(136,96,168,.60) 100%),
    #1a1228 !important;
}