/* =====================================================================
   Home-OS · Theme-System (gemeinsam für alle Module)
   Jede Person wählt ihr Design im Profil ("Ich"). Es wird in der Datenbank
   gespeichert (users.theme) und als <html data-theme="..."> gesetzt.
   Spätere Module binden diese Datei ein und nutzen nur die Variablen unten.
   Themes: ghibli-valley (Standard) · neo-tokyo · lofi-cafe · shadow-dojo
   Ab Version 2.2: engel-teufel · meerjungfrau · metal-goth · ghost · paw-patrol · sword-art · baby
   (nur Farben und Formen, keine fremden Bilder oder Logos)
   ===================================================================== */

/* 1 · Ghibli Valley (Standard) – Wiesen-Grün, Himmelblau, warmes Cremeweiß */
:root, [data-theme="ghibli-valley"] {
  color-scheme: light;
  --color-canvas: #FBFAF5;
  --color-surface: #FFFFFF;
  --color-soft: #F3F0E6;
  --color-text: #243D32;
  --color-text-muted: #535B55;
  --color-primary: #2F5B4B;
  --color-primary-hover: #244A3C;
  --color-on-primary: #FFFFFF;
  --color-secondary: #E6F0E5;
  --color-secondary-hover: #D9E8D7;
  --color-secondary-border: #B9CDB6;
  --color-meadow-600: #477A5D;
  --color-link: #245B78;
  --color-focus: #245B78;
  --color-sky-200: #CDE7F3;
  --color-wood-200: #E6D1B8;
  --color-wood-700: #79553B;
  --color-sun-200: #F6D987;
  --color-sun-700: #805500;
  --color-reward-bg: #FBF0CC;
  --color-border: #D8D8CC;
  --color-danger: #A63F37;
  --color-danger-hover: #8E342D;
  --color-on-danger: #FFFFFF;
  --color-danger-bg: #FBE7E3;
  --color-success: #245B3A;
  --color-success-bg: #E2F2E4;
  --color-info-bg: #E9F4FA;
  --color-input-bg: #FFFFFF;
  --color-input-border: #8E9488;
  --color-glass: rgba(255, 255, 255, .85);
  --color-pending-bg: #FFFBEF;
  --color-pending-border: #EBD9A6;
  --radius-control: 12px;
  --radius-button: 14px;
  --radius-card: 1.25rem;
  --radius-panel: 1.5rem;
  --shadow-soft: 0 4px 16px rgba(36, 61, 50, .08);
  --shadow-lift: 0 8px 24px rgba(36, 61, 50, .12);
  --font-display: "Nunito", "Trebuchet MS", sans-serif;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;
  --display-weight: 800;
  --heading-glow: none;
  /* Landschaft */
  --bg-top: #CDE7F3;
  --bg-mid: #E4F1F6;
  --sun-glow: radial-gradient(circle, #FFF4CF 0%, #F6D987 45%, rgba(246, 217, 135, 0) 70%);
  --cloud: #FFFFFF;
  --cloud-opacity: .9;
  --hill-far: #CFE3C8;
  --hill-mid: #A9C9A0;
  --hill-near: #7FA889;
  --hill-blur: 0px;
  --tree-trunk: #79553B;
  --tree-crown: #5F8F6A;
  --house-roof: #B5574E;
  --house-wall: #F3F0E6;
  --house-light: #F6D987;
  --seed: #FFFFFF;
  --seed-glow: rgba(246, 217, 135, .8);
  --theme-color: #CDE7F3;
}

/* 2 · Neo Tokyo – Dark-Mode mit Neon-Cyan und Magenta (für Jugendliche) */
[data-theme="neo-tokyo"] {
  color-scheme: dark;
  --color-canvas: #0B0E17;
  --color-surface: #131A2A;
  --color-soft: #1A2236;
  --color-text: #E8F1FF;
  --color-text-muted: #A9B4CF;
  --color-primary: #00E5FF;
  --color-primary-hover: #66F0FF;
  --color-on-primary: #00141A;
  --color-secondary: #1D2943;
  --color-secondary-hover: #26365A;
  --color-secondary-border: #3A5A92;
  --color-meadow-600: #00E5FF;
  --color-link: #5CE1FF;
  --color-focus: #FF4FB8;
  --color-sky-200: #10324A;
  --color-wood-200: #3A1438;
  --color-wood-700: #FF6AD0;
  --color-sun-200: #33300E;
  --color-sun-700: #FFE45C;
  --color-reward-bg: #2B2A10;
  --color-border: #2A3757;
  --color-danger: #FF7A93;
  --color-danger-hover: #FF9EB0;
  --color-on-danger: #1A0008;
  --color-danger-bg: #3A1020;
  --color-success: #5CFFB0;
  --color-success-bg: #0E3326;
  --color-info-bg: #0E2436;
  --color-input-bg: #0E1320;
  --color-input-border: #4A5F8C;
  --color-glass: rgba(19, 26, 42, .88);
  --color-pending-bg: #221F0E;
  --color-pending-border: #6B5E1A;
  --radius-control: 8px;
  --radius-button: 10px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --shadow-soft: 0 0 0 1px rgba(0, 229, 255, .12), 0 6px 22px rgba(0, 0, 0, .45);
  --shadow-lift: 0 0 24px rgba(255, 62, 165, .25), 0 10px 30px rgba(0, 0, 0, .55);
  --font-display: "Nunito", "Trebuchet MS", sans-serif;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;
  --display-weight: 800;
  --heading-glow: 0 0 14px rgba(0, 229, 255, .55), 0 0 2px rgba(255, 79, 184, .6);
  --bg-top: #07080F;
  --bg-mid: #1A0F33;
  --sun-glow: radial-gradient(circle, rgba(255, 79, 184, .95) 0%, rgba(255, 62, 165, .45) 40%, rgba(255, 62, 165, 0) 70%);
  --cloud: #00E5FF;
  --cloud-opacity: .10;
  --hill-far: #1C1745;
  --hill-mid: #141133;
  --hill-near: #0C0B1E;
  --hill-blur: 0px;
  --tree-trunk: #2B2160;
  --tree-crown: #241C55;
  --house-roof: #FF3EA5;
  --house-wall: #1A1440;
  --house-light: #00E5FF;
  --seed: #00E5FF;
  --seed-glow: rgba(255, 62, 165, .9);
  --theme-color: #07080F;
}

/* 3 · Lofi Cafe – dezent, Kaffee- und Herbsttöne, dünne klare Schrift (Erwachsene) */
[data-theme="lofi-cafe"] {
  color-scheme: light;
  --color-canvas: #F7F1EA;
  --color-surface: #FFFCF8;
  --color-soft: #F1E8DD;
  --color-text: #3B2A20;
  --color-text-muted: #6B5547;
  --color-primary: #6F4E37;
  --color-primary-hover: #5A3E2B;
  --color-on-primary: #FFFFFF;
  --color-secondary: #EFE4D6;
  --color-secondary-hover: #E6D6C2;
  --color-secondary-border: #CDB79E;
  --color-meadow-600: #8A6A4F;
  --color-link: #7A4528;
  --color-focus: #7A4528;
  --color-sky-200: #E7DED3;
  --color-wood-200: #EBD5C0;
  --color-wood-700: #7A4528;
  --color-sun-200: #F3DFC6;
  --color-sun-700: #85541A;
  --color-reward-bg: #F5E8D5;
  --color-border: #E1D3C3;
  --color-danger: #A4442F;
  --color-danger-hover: #873624;
  --color-on-danger: #FFFFFF;
  --color-danger-bg: #F8E3DC;
  --color-success: #3F5E3A;
  --color-success-bg: #E7EEDF;
  --color-info-bg: #F4EBE0;
  --color-input-bg: #FFFCF8;
  --color-input-border: #A8907A;
  --color-glass: rgba(255, 252, 248, .9);
  --color-pending-bg: #FBF4EA;
  --color-pending-border: #E2CBA8;
  --radius-control: 8px;
  --radius-button: 8px;
  --radius-card: 10px;
  --radius-panel: 14px;
  --shadow-soft: 0 1px 3px rgba(59, 42, 32, .06), 0 6px 18px rgba(59, 42, 32, .05);
  --shadow-lift: 0 10px 30px rgba(59, 42, 32, .10);
  --font-display: "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display-weight: 300;
  --heading-glow: none;
  --bg-top: #EADCCB;
  --bg-mid: #F2E8DC;
  --sun-glow: radial-gradient(circle, #FFF3E2 0%, #F2D2B0 45%, rgba(242, 210, 176, 0) 70%);
  --cloud: #FFF8F0;
  --cloud-opacity: .8;
  --hill-far: #E6CFB2;
  --hill-mid: #D4A373;
  --hill-near: #B5835A;
  --hill-blur: 0px;
  --tree-trunk: #6F4E37;
  --tree-crown: #C46A3A;
  --house-roof: #8A5A44;
  --house-wall: #F7F1EA;
  --house-light: #F2C98A;
  --seed: #FFF3E2;
  --seed-glow: rgba(196, 106, 58, .5);
  --theme-color: #EADCCB;
}

/* 4 · Shadow Dojo – Dark Fantasy, Tuschmalerei, tiefes Violett und Rot */
[data-theme="shadow-dojo"] {
  color-scheme: dark;
  --color-canvas: #120C16;
  --color-surface: #1C1420;
  --color-soft: #261B2C;
  --color-text: #F2E8EF;
  --color-text-muted: #C0B0BE;
  --color-primary: #7B2FA0;
  --color-primary-hover: #8F3DB8;
  --color-on-primary: #FFFFFF;
  --color-secondary: #2B1E34;
  --color-secondary-hover: #362744;
  --color-secondary-border: #5A3C6E;
  --color-meadow-600: #D3A6EB;
  --color-link: #DDB2F5;
  --color-focus: #FF8A80;
  --color-sky-200: #2E2042;
  --color-wood-200: #3D181D;
  --color-wood-700: #FF8F85;
  --color-sun-200: #3A2A12;
  --color-sun-700: #F2C66D;
  --color-reward-bg: #2E2210;
  --color-border: #3D2D48;
  --color-danger: #FF8A80;
  --color-danger-hover: #FFA79F;
  --color-on-danger: #1A0606;
  --color-danger-bg: #3A1418;
  --color-success: #8FE3B0;
  --color-success-bg: #13301F;
  --color-info-bg: #1F1631;
  --color-input-bg: #160F1A;
  --color-input-border: #6E5280;
  --color-glass: rgba(28, 20, 32, .9);
  --color-pending-bg: #24180F;
  --color-pending-border: #6B4A1F;
  --radius-control: 6px;
  --radius-button: 6px;
  --radius-card: 10px;
  --radius-panel: 12px;
  --shadow-soft: 0 6px 22px rgba(0, 0, 0, .5);
  --shadow-lift: 0 0 30px rgba(192, 57, 43, .25), 0 12px 32px rgba(0, 0, 0, .6);
  --font-display: "Nunito", "Trebuchet MS", sans-serif;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;
  --display-weight: 800;
  --heading-glow: 0 2px 12px rgba(192, 57, 43, .45);
  --bg-top: #0B070E;
  --bg-mid: #2A0E1C;
  --sun-glow: radial-gradient(circle, #E04A3A 0%, rgba(192, 57, 43, .55) 42%, rgba(192, 57, 43, 0) 70%);
  --cloud: #E9DDE6;
  --cloud-opacity: .07;
  --hill-far: #3A2F44;
  --hill-mid: #251D2D;
  --hill-near: #120D16;
  --hill-blur: 2px;
  --tree-trunk: #2A1E2E;
  --tree-crown: #221827;
  --house-roof: #9E2B22;
  --house-wall: #2A1F30;
  --house-light: #F2C66D;
  --seed: #FFB3A8;
  --seed-glow: rgba(192, 57, 43, .9);
  --theme-color: #0B070E;
}

/* Theme-Eigenheiten, die mehr als Farben brauchen */
[data-theme="lofi-cafe"] .welcome .ch { animation-duration: .8s; }
[data-theme="neo-tokyo"] .btn-primary:hover { box-shadow: 0 0 18px rgba(0, 229, 255, .6); }
[data-theme="neo-tokyo"] .card, [data-theme="neo-tokyo"] .module { border-color: rgba(0, 229, 255, .22); }
[data-theme="shadow-dojo"] .card, [data-theme="shadow-dojo"] .module {
  background-image: radial-gradient(120% 60% at 100% 0%, rgba(192, 57, 43, .10), transparent 60%);
}

/* =====================================================================
   Version 2.2 · sieben neue Designs
   ===================================================================== */

/* 5 · Engel & Teufel – modern und hell: Weiß und Gold oben, Feuerrot unten (Erwachsene) */
[data-theme="engel-teufel"] {
  color-scheme: light;
  --color-canvas: #FBF8F3;
  --color-surface: #FFFFFF;
  --color-soft: #F4EEE6;
  --color-text: #2A1A1F;
  --color-text-muted: #5E4E52;
  --color-primary: #B3122E;
  --color-primary-hover: #941026;
  --color-on-primary: #FFFFFF;
  --color-secondary: #F7EDE4;
  --color-secondary-hover: #F0E1D4;
  --color-secondary-border: #D9C2A8;
  --color-meadow-600: #8A6A1E;
  --color-link: #8C1F33;
  --color-focus: #B3122E;
  --color-sky-200: #F1E6D2;
  --color-wood-200: #F6D9D9;
  --color-wood-700: #8C1F33;
  --color-sun-200: #F3E3B5;
  --color-sun-700: #735400;
  --color-reward-bg: #FAF0D2;
  --color-border: #E6DAD0;
  --color-danger: #A12A1E;
  --color-danger-hover: #85221A;
  --color-on-danger: #FFFFFF;
  --color-danger-bg: #FBE6E3;
  --color-success: #2E5E3A;
  --color-success-bg: #E4F1E6;
  --color-info-bg: #F6EFE6;
  --color-input-bg: #FFFFFF;
  --color-input-border: #9C8A80;
  --color-glass: rgba(255, 255, 255, .88);
  --color-pending-bg: #FFF9EC;
  --color-pending-border: #E8D3A0;
  --radius-control: 10px;
  --radius-button: 999px;
  --radius-card: 16px;
  --radius-panel: 22px;
  --shadow-soft: 0 2px 6px rgba(42, 26, 31, .05), 0 10px 26px rgba(42, 26, 31, .07);
  --shadow-lift: 0 14px 34px rgba(179, 18, 46, .16);
  --font-display: "Segoe UI", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;
  --display-weight: 700;
  --heading-glow: none;
  --bg-top: #FFFFFF;
  --bg-mid: #F7E6E1;
  --sun-glow: radial-gradient(circle, #FFFBEA 0%, #F2D27A 42%, rgba(242, 210, 122, 0) 70%);
  --cloud: #FFFFFF;
  --cloud-opacity: .95;
  --hill-far: #EAD8C0;
  --hill-mid: #C9485B;
  --hill-near: #7A1426;
  --hill-blur: 0px;
  --tree-trunk: #3A1A20;
  --tree-crown: #A3243A;
  --house-roof: #1F1416;
  --house-wall: #FFF8EE;
  --house-light: #F2C14E;
  --seed: #FFE7A3;
  --seed-glow: rgba(242, 193, 78, .9);
  --theme-color: #FBF3EC;
}

/* 6 · Meerjungfrau – Türkis, Perlmutt und Koralle (Teenager) */
[data-theme="meerjungfrau"] {
  color-scheme: light;
  --color-canvas: #F2FBFB;
  --color-surface: #FFFFFF;
  --color-soft: #E3F5F4;
  --color-text: #0F3B44;
  --color-text-muted: #3F6870;
  --color-primary: #0B6F78;
  --color-primary-hover: #085A62;
  --color-on-primary: #FFFFFF;
  --color-secondary: #E0F4F1;
  --color-secondary-hover: #CDEDE8;
  --color-secondary-border: #8FCFC6;
  --color-meadow-600: #0E7C7C;
  --color-link: #0B5F8A;
  --color-focus: #C2306B;
  --color-sky-200: #CFEFF5;
  --color-wood-200: #FBDCE4;
  --color-wood-700: #A3204E;
  --color-sun-200: #F3E1F2;
  --color-sun-700: #7D3C98;
  --color-reward-bg: #F7E8F5;
  --color-border: #CDE7E6;
  --color-danger: #B3261E;
  --color-danger-hover: #8F1F18;
  --color-on-danger: #FFFFFF;
  --color-danger-bg: #FDE6E4;
  --color-success: #1D6B4A;
  --color-success-bg: #DDF3EA;
  --color-info-bg: #E4F6FA;
  --color-input-bg: #FFFFFF;
  --color-input-border: #6A9EA2;
  --color-glass: rgba(255, 255, 255, .85);
  --color-pending-bg: #FFF7FB;
  --color-pending-border: #F0C4DA;
  --radius-control: 16px;
  --radius-button: 18px;
  --radius-card: 24px;
  --radius-panel: 28px;
  --shadow-soft: 0 4px 18px rgba(11, 111, 120, .10);
  --shadow-lift: 0 10px 30px rgba(194, 48, 107, .16);
  --font-display: "Nunito", "Trebuchet MS", sans-serif;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;
  --display-weight: 800;
  --heading-glow: none;
  --bg-top: #9EE0E6;
  --bg-mid: #D8F3F1;
  --sun-glow: radial-gradient(circle, #FFFFFF 0%, #FBD3E9 45%, rgba(251, 211, 233, 0) 70%);
  --cloud: #FFFFFF;
  --cloud-opacity: .85;
  --hill-far: #7FD3D6;
  --hill-mid: #3BB0B8;
  --hill-near: #127C8A;
  --hill-blur: 0px;
  --tree-trunk: #B04A6B;
  --tree-crown: #F27C9B;
  --house-roof: #E86A92;
  --house-wall: #FDF1F6;
  --house-light: #FFE38A;
  --seed: rgba(255, 255, 255, .25);
  --seed-glow: rgba(158, 224, 230, .9);
  --theme-color: #9EE0E6;
}

/* 7 · Metal & Goth – Schwarz, Blutrot und Silber, scharfe Kanten (Erwachsene) */
[data-theme="metal-goth"] {
  color-scheme: dark;
  --color-canvas: #0A0A0B;
  --color-surface: #141416;
  --color-soft: #1C1C20;
  --color-text: #ECECEE;
  --color-text-muted: #A9A9B2;
  --color-primary: #B3001B;
  --color-primary-hover: #D0102C;
  --color-on-primary: #FFFFFF;
  --color-secondary: #222226;
  --color-secondary-hover: #2C2C31;
  --color-secondary-border: #4A4A52;
  --color-meadow-600: #C8C8D0;
  --color-link: #FF6B78;
  --color-focus: #FF3B4E;
  --color-sky-200: #24242A;
  --color-wood-200: #2A1014;
  --color-wood-700: #FF6B78;
  --color-sun-200: #2A2618;
  --color-sun-700: #D9C27A;
  --color-reward-bg: #221E12;
  --color-border: #2E2E34;
  --color-danger: #FF6B6B;
  --color-danger-hover: #FF8E8E;
  --color-on-danger: #1A0000;
  --color-danger-bg: #3A0E12;
  --color-success: #7FE0A6;
  --color-success-bg: #10281B;
  --color-info-bg: #18181C;
  --color-input-bg: #0E0E10;
  --color-input-border: #5A5A64;
  --color-glass: rgba(20, 20, 22, .9);
  --color-pending-bg: #1E1A10;
  --color-pending-border: #5E4E1E;
  --radius-control: 2px;
  --radius-button: 4px;
  --radius-card: 6px;
  --radius-panel: 8px;
  --shadow-soft: 0 6px 22px rgba(0, 0, 0, .6);
  --shadow-lift: 0 0 26px rgba(179, 0, 27, .35), 0 12px 32px rgba(0, 0, 0, .7);
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;
  --display-weight: 700;
  --heading-glow: 0 0 10px rgba(179, 0, 27, .55);
  --bg-top: #000000;
  --bg-mid: #1A0508;
  --sun-glow: radial-gradient(circle, #E6E6E6 0%, #8A0F1D 40%, rgba(138, 15, 29, 0) 70%);
  --cloud: #FFFFFF;
  --cloud-opacity: .05;
  --hill-far: #1E1E22;
  --hill-mid: #121214;
  --hill-near: #050506;
  --hill-blur: 0px;
  --tree-trunk: #0E0E10;
  --tree-crown: #151518;
  --house-roof: #2A2A2E;
  --house-wall: #121214;
  --house-light: #B3001B;
  --seed: #FF2A3D;
  --seed-glow: rgba(179, 0, 27, .9);
  --theme-color: #000000;
}

/* 8 · Ghost – Nebel, Mondlicht und blasses Leuchten (Erwachsene) */
[data-theme="ghost"] {
  color-scheme: dark;
  --color-canvas: #10141A;
  --color-surface: #181E26;
  --color-soft: #202833;
  --color-text: #E6EEF2;
  --color-text-muted: #A3B1BC;
  --color-primary: #9FE7E0;
  --color-primary-hover: #C2F2EE;
  --color-on-primary: #0B1A1C;
  --color-secondary: #1F2A33;
  --color-secondary-hover: #283642;
  --color-secondary-border: #3F5566;
  --color-meadow-600: #9FE7E0;
  --color-link: #A8D8FF;
  --color-focus: #C9B6FF;
  --color-sky-200: #1B2A38;
  --color-wood-200: #262333;
  --color-wood-700: #C9B6FF;
  --color-sun-200: #23281F;
  --color-sun-700: #E8E3B0;
  --color-reward-bg: #20231B;
  --color-border: #2B3744;
  --color-danger: #FF8F9A;
  --color-danger-hover: #FFB0B8;
  --color-on-danger: #1A0508;
  --color-danger-bg: #3A161C;
  --color-success: #9FF0C0;
  --color-success-bg: #13291E;
  --color-info-bg: #172330;
  --color-input-bg: #121820;
  --color-input-border: #52687A;
  --color-glass: rgba(24, 30, 38, .82);
  --color-pending-bg: #1F2117;
  --color-pending-border: #5A5A32;
  --radius-control: 14px;
  --radius-button: 16px;
  --radius-card: 18px;
  --radius-panel: 22px;
  --shadow-soft: 0 8px 26px rgba(0, 0, 0, .45);
  --shadow-lift: 0 0 30px rgba(159, 231, 224, .18), 0 12px 32px rgba(0, 0, 0, .55);
  --font-display: "Nunito", "Trebuchet MS", sans-serif;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;
  --display-weight: 800;
  --heading-glow: 0 0 18px rgba(200, 240, 255, .35);
  --bg-top: #0B0E14;
  --bg-mid: #1E2833;
  --sun-glow: radial-gradient(circle, #F4F8FF 0%, rgba(200, 220, 255, .5) 35%, rgba(200, 220, 255, 0) 70%);
  --cloud: #DDE7F0;
  --cloud-opacity: .14;
  --hill-far: #2A3644;
  --hill-mid: #1B242E;
  --hill-near: #0E1318;
  --hill-blur: 3px;
  --tree-trunk: #11161C;
  --tree-crown: #18212A;
  --house-roof: #232C36;
  --house-wall: #1A222B;
  --house-light: #BDF5EE;
  --seed: #E9FBFF;
  --seed-glow: rgba(159, 231, 224, .8);
  --theme-color: #0B0E14;
}

/* 9 · Paw Patrol – kräftiges Rot, Himmelblau und Sonnengelb (Kinder) */
[data-theme="paw-patrol"] {
  color-scheme: light;
  --color-canvas: #F4F9FF;
  --color-surface: #FFFFFF;
  --color-soft: #EAF2FD;
  --color-text: #13294B;
  --color-text-muted: #44597A;
  --color-primary: #C8211A;
  --color-primary-hover: #A81B15;
  --color-on-primary: #FFFFFF;
  --color-secondary: #E3EEFC;
  --color-secondary-hover: #D2E3FA;
  --color-secondary-border: #9CBDEB;
  --color-meadow-600: #1F5FBF;
  --color-link: #1A56B0;
  --color-focus: #1A56B0;
  --color-sky-200: #D3E6FF;
  --color-wood-200: #FFE7B3;
  --color-wood-700: #845600;
  --color-sun-200: #FFE47A;
  --color-sun-700: #735100;
  --color-reward-bg: #FFF4C2;
  --color-border: #D5E2F3;
  --color-danger: #B3261E;
  --color-danger-hover: #8F1F18;
  --color-on-danger: #FFFFFF;
  --color-danger-bg: #FDE4E2;
  --color-success: #1E6B35;
  --color-success-bg: #DFF3E4;
  --color-info-bg: #E5F0FF;
  --color-input-bg: #FFFFFF;
  --color-input-border: #7F97BA;
  --color-glass: rgba(255, 255, 255, .88);
  --color-pending-bg: #FFFBEA;
  --color-pending-border: #F2D675;
  --radius-control: 16px;
  --radius-button: 20px;
  --radius-card: 24px;
  --radius-panel: 28px;
  --shadow-soft: 0 4px 0 rgba(19, 41, 75, .08), 0 8px 20px rgba(19, 41, 75, .08);
  --shadow-lift: 0 10px 28px rgba(26, 86, 176, .18);
  --font-display: "Nunito", "Trebuchet MS", sans-serif;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;
  --display-weight: 800;
  --heading-glow: none;
  --bg-top: #7EC3FF;
  --bg-mid: #CBE6FF;
  --sun-glow: radial-gradient(circle, #FFF9C4 0%, #FFD43B 45%, rgba(255, 212, 59, 0) 70%);
  --cloud: #FFFFFF;
  --cloud-opacity: .95;
  --hill-far: #9BD67A;
  --hill-mid: #5CB84A;
  --hill-near: #2F8F3A;
  --hill-blur: 0px;
  --tree-trunk: #7A4A2A;
  --tree-crown: #3E9E45;
  --house-roof: #C8211A;
  --house-wall: #FFFFFF;
  --house-light: #FFD43B;
  --seed: #FFD43B;
  --seed-glow: rgba(200, 33, 26, .6);
  --theme-color: #7EC3FF;
}

/* 10 · Sword Art Online – dunkles Blau, leuchtende Spiel-Anzeige, orange Akzente */
[data-theme="sword-art"] {
  color-scheme: dark;
  --color-canvas: #070B14;
  --color-surface: #0E1626;
  --color-soft: #142036;
  --color-text: #EAF2FF;
  --color-text-muted: #9FB0CC;
  --color-primary: #3FA9F5;
  --color-primary-hover: #6BC0FF;
  --color-on-primary: #04121F;
  --color-secondary: #13233D;
  --color-secondary-hover: #1A2E50;
  --color-secondary-border: #2E5B96;
  --color-meadow-600: #6BC0FF;
  --color-link: #7CC8FF;
  --color-focus: #F5A623;
  --color-sky-200: #10283F;
  --color-wood-200: #33220E;
  --color-wood-700: #FFB24D;
  --color-sun-200: #2E2610;
  --color-sun-700: #FFC857;
  --color-reward-bg: #2A220E;
  --color-border: #1F3352;
  --color-danger: #FF7A7A;
  --color-danger-hover: #FF9C9C;
  --color-on-danger: #1A0505;
  --color-danger-bg: #3A1414;
  --color-success: #6FE3A1;
  --color-success-bg: #0E2C1E;
  --color-info-bg: #0F2033;
  --color-input-bg: #0A1220;
  --color-input-border: #3D6290;
  --color-glass: rgba(14, 22, 38, .86);
  --color-pending-bg: #22200E;
  --color-pending-border: #6B5A1A;
  --radius-control: 4px;
  --radius-button: 4px;
  --radius-card: 6px;
  --radius-panel: 8px;
  --shadow-soft: 0 0 0 1px rgba(63, 169, 245, .15), 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-lift: 0 0 24px rgba(63, 169, 245, .35), 0 12px 30px rgba(0, 0, 0, .6);
  --font-display: "Segoe UI", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;
  --display-weight: 600;
  --heading-glow: 0 0 10px rgba(63, 169, 245, .6);
  --bg-top: #0A1A3A;
  --bg-mid: #1B3E73;
  --sun-glow: radial-gradient(circle, rgba(255, 200, 87, .95) 0%, rgba(242, 140, 40, .45) 40%, rgba(242, 140, 40, 0) 70%);
  --cloud: #9FD3FF;
  --cloud-opacity: .12;
  --hill-far: #1D3A66;
  --hill-mid: #132A4D;
  --hill-near: #0A162B;
  --hill-blur: 0px;
  --tree-trunk: #0A1C33;
  --tree-crown: #10325A;
  --house-roof: #F28C28;
  --house-wall: #12233F;
  --house-light: #3FA9F5;
  --seed: #7CC8FF;
  --seed-glow: rgba(63, 169, 245, .9);
  --theme-color: #0A1A3A;
}

/* 11 · Baby – zarte Pastellfarben, alles weich und rund */
[data-theme="baby"] {
  color-scheme: light;
  --color-canvas: #FFFBFC;
  --color-surface: #FFFFFF;
  --color-soft: #FDF1F5;
  --color-text: #4A3A44;
  --color-text-muted: #6E5E68;
  --color-primary: #6D5A9C;
  --color-primary-hover: #5C4A88;
  --color-on-primary: #FFFFFF;
  --color-secondary: #EEF3FF;
  --color-secondary-hover: #E0E9FF;
  --color-secondary-border: #BCCBF0;
  --color-meadow-600: #4F7E61;
  --color-link: #46629F;
  --color-focus: #C2577F;
  --color-sky-200: #DCEBFF;
  --color-wood-200: #FFE3EC;
  --color-wood-700: #A34A6E;
  --color-sun-200: #FFF1BF;
  --color-sun-700: #735A00;
  --color-reward-bg: #FFF7D9;
  --color-border: #F0E3EA;
  --color-danger: #B03A48;
  --color-danger-hover: #93303C;
  --color-on-danger: #FFFFFF;
  --color-danger-bg: #FDE8EA;
  --color-success: #2F6B4A;
  --color-success-bg: #E3F5EA;
  --color-info-bg: #EEF4FF;
  --color-input-bg: #FFFFFF;
  --color-input-border: #A08F9C;
  --color-glass: rgba(255, 255, 255, .88);
  --color-pending-bg: #FFFBEF;
  --color-pending-border: #F0DDA8;
  --radius-control: 18px;
  --radius-button: 22px;
  --radius-card: 28px;
  --radius-panel: 32px;
  --shadow-soft: 0 4px 18px rgba(196, 160, 190, .18);
  --shadow-lift: 0 10px 28px rgba(196, 160, 190, .28);
  --font-display: "Nunito", "Trebuchet MS", sans-serif;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;
  --display-weight: 800;
  --heading-glow: none;
  --bg-top: #DCEBFF;
  --bg-mid: #FDEFF5;
  --sun-glow: radial-gradient(circle, #FFFDF0 0%, #FFE9A8 45%, rgba(255, 233, 168, 0) 70%);
  --cloud: #FFFFFF;
  --cloud-opacity: .95;
  --hill-far: #F9DCE7;
  --hill-mid: #E6D9F5;
  --hill-near: #CDE8DA;
  --hill-blur: 0px;
  --tree-trunk: #D9B8A0;
  --tree-crown: #BFE3CC;
  --house-roof: #F4B6C9;
  --house-wall: #FFFFFF;
  --house-light: #FFE9A8;
  --seed: #FFFFFF;
  --seed-glow: rgba(244, 182, 201, .9);
  --theme-color: #DCEBFF;
}

/* Eigenheiten der neuen Designs */
[data-theme="engel-teufel"] .card, [data-theme="engel-teufel"] .module {
  background-image: linear-gradient(120deg, rgba(212, 175, 55, .10), transparent 35%, transparent 65%, rgba(179, 18, 46, .08));
}
[data-theme="meerjungfrau"] .card, [data-theme="meerjungfrau"] .module {
  background-image: linear-gradient(135deg, rgba(251, 211, 233, .28), rgba(255, 255, 255, 0) 45%, rgba(158, 224, 230, .22));
}
[data-theme="meerjungfrau"] .seed { border: 2px solid rgba(255, 255, 255, .95); }
[data-theme="metal-goth"] .card, [data-theme="metal-goth"] .module { border-color: #3A0A10; }
[data-theme="metal-goth"] .h1, [data-theme="metal-goth"] .h2, [data-theme="metal-goth"] h3 { letter-spacing: .02em; }
[data-theme="ghost"] .cloud { filter: blur(6px); }
[data-theme="ghost"] .card, [data-theme="ghost"] .module { background-color: rgba(24, 30, 38, .92); }
[data-theme="paw-patrol"] .btn-primary { box-shadow: 0 4px 0 #7E140F; }
[data-theme="paw-patrol"] .btn-primary:active { box-shadow: none; }
[data-theme="sword-art"] .card, [data-theme="sword-art"] .module { border-color: rgba(63, 169, 245, .35); }
[data-theme="sword-art"] .module-icon { border-radius: 50%; box-shadow: 0 0 0 2px rgba(63, 169, 245, .35); }
[data-theme="sword-art"] .btn-primary:hover { box-shadow: 0 0 16px rgba(63, 169, 245, .6); }
[data-theme="baby"] .welcome .ch { animation-duration: .7s; }