/* ============================================================
   Themes: Hell / Dunkel / Heidelberg Materials (hell + dunkel) / Neon
   Umschaltung ueber data-theme am <html>-Element, gespeichert in
   localStorage, gesetzt in einem Inline-Skript im <head> (sonst blitzt
   beim Laden das falsche Theme auf).

   Als eigene Datei static/css/themes.css VOR style.css einbinden.
   Der restliche Code der App darf ausschliesslich diese Variablen verwenden — sobald
   irgendwo eine feste Farbe steht, bricht ein Theme dort auf.
   ============================================================ */

:root,
html[data-theme="hell"] {
  color-scheme: light;
  --bg:           #ffffff;
  --bg-alt:       #f7f7f8;
  --bg-elev:      #ffffff;
  --text:         #1a1a1a;
  --text-muted:   #1a1a1a;
  --border:       #e6e6e8;
  --border-strong:#d0d0d4;
  --brand:        #111111;
  /* Button = Seitenhintergrund, Rahmen und Schrift in der Layout-Farbe; Aktiv = genau umgekehrt (Timo 2026-10-29) */
  --btn-bg: #ffffff; --btn-fg: #111111; --btn-border: #111111; --btn-hover: #ececec;
  --active-bg: #111111; --active-fg: #ffffff; --active-border: #111111;
  --brand-hover:  #444444;
  --brand-soft:   #ececec;
  --on-brand:     #ffffff;
  --hover:        #ececee;
  --accent:       #c0392b;
  --good:         #198754;
  --bad:          #c0392b;
  --warn:         #d97706;
  --warn-soft:    rgba(217,119,6,.15);
  --shadow:       0 4px 18px rgba(20,20,20,.06);
  --shadow-lg:    0 12px 40px rgba(20,20,20,.10);
}

html[data-theme="hm"] {
  color-scheme: light;
  --bg:           #ffffff;
  --bg-alt:       #f5f5f5;
  --bg-elev:      #ffffff;
  --text:         #333333;
  --text-muted:   #333333;
  --border:       #e0e0e0;
  --border-strong:#c8c8c8;
  --brand:        #00a651;
  --brand-hover:  #007a3d;
  --btn-bg: #ffffff; --btn-fg: #00a651; --btn-border: #00a651; --btn-hover: #e6f6ee;
  --active-bg: #007a3d; --active-fg: #ffffff; --active-border: #007a3d;
  --brand-soft:   #e6f6ee;
  --on-brand:     #ffffff;
  --hover:        #ededed;
  --accent:       #007a3d;
  --good:         #00a651;
  --bad:          #c0392b;
  --warn:         #d97706;
  --warn-soft:    rgba(217,119,6,.15);
  --shadow:       0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.12);
}
/* Heidelberg Materials dunkel: Charcoal-Flächen, Grün als einziger Akzent */
html[data-theme="hm-dunkel"] {
  color-scheme: dark;
  --bg:           #1a1a1a;
  --bg-alt:       #141414;
  --bg-elev:      #242424;
  --text:         #f2f2f2;
  --text-muted:   #f2f2f2;
  --border:       #333333;
  --border-strong:#4a4a4a;
  --brand:        #00a651;
  --brand-hover:  #1fbf6a;
  --btn-bg: var(--bg-elev); --btn-fg: #00a651; --btn-border: #00a651; --btn-hover: color-mix(in srgb, #00a651 15%, transparent);
  --active-bg: #00a651; --active-fg: #000000; --active-border: #00a651;
  --brand-soft:   rgba(0,166,81,.16);
  --on-brand:     #ffffff;
  --hover:        #3d3d3d;
  --accent:       #1fbf6a;
  --good:         #2ecc71;
  --bad:          #ff6b6b;
  --warn:         #ffa94d;
  --warn-soft:    rgba(255,169,77,.18);
  --shadow:       0 2px 8px rgba(0,0,0,.45);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.6);
}
html[data-theme="hm"] body,
html[data-theme="hm-dunkel"] body { font-family: "Helvetica Neue", Arial, sans-serif; }
html[data-theme="hm"] .btn, html[data-theme="hm"] .card,
html[data-theme="hm"] input, html[data-theme="hm"] select, html[data-theme="hm"] textarea,
html[data-theme="hm-dunkel"] .btn, html[data-theme="hm-dunkel"] .card,
html[data-theme="hm-dunkel"] input, html[data-theme="hm-dunkel"] select,
html[data-theme="hm-dunkel"] textarea { border-radius: 3px; }
/* Weiß auf Grün wie im hellen HM-Theme – var(--bg) wäre hier Charcoal */
html[data-theme="hm-dunkel"] .btn:not(.ghost):not(.danger),
html[data-theme="hm-dunkel"] .btn:not(.ghost):not(.danger):hover,
html[data-theme="hm-dunkel"] .brand-mark { color: #ffffff; }
html[data-theme="hm-dunkel"] .btn:not(.ghost):not(.danger):hover { background: #007a3d; border-color: #007a3d; }
html[data-theme="hm-dunkel"] .site-header { border-bottom: 2px solid var(--brand); }

html[data-theme="dunkel"] {
  color-scheme: dark;
  --bg:           #000000;
  --bg-alt:       #0d0d0d;
  --bg-elev:      #161616;
  --text:         #f0f0f0;
  --text-muted:   #f0f0f0;
  --border:       #2a2a2a;
  --border-strong:#404040;
  --brand:        #f5f5f5;
  --btn-bg: var(--bg-elev); --btn-fg: #f5f5f5; --btn-border: #f5f5f5; --btn-hover: #242424;
  --active-bg: #f5f5f5; --active-fg: #000000; --active-border: #f5f5f5;
  --brand-hover:  #c8c8c8;
  --brand-soft:   #262626;
  --on-brand:     #000000;
  --hover:        #3a3a3a;
  --accent:       #e74c3c;
  --good:         #51cf66;
  --bad:          #ff6b6b;
  --warn:         #ffa94d;
  --warn-soft:    rgba(255,169,77,.18);
  --shadow:       0 4px 18px rgba(0,0,0,.6);
  --shadow-lg:    0 12px 40px rgba(0,0,0,.8);
}


===========================================================
   NEON-THEME – animierter Farbzyklus, gescoped auf data-theme="neon".
   ============================================================ */
@property --nA { syntax: "<color>"; inherits: true; initial-value: #b026ff; }
@property --nB { syntax: "<color>"; inherits: true; initial-value: #00f0ff; }
@property --nC { syntax: "<color>"; inherits: true; initial-value: #ff2bd6; }

html[data-theme="neon"] {
  color-scheme: dark;
  --nA: #b026ff; --nB: #00f0ff; --nC: #ff2bd6;
  --bg:           #0b0016;
  --bg-alt:       #160a2e;
  --bg-elev:      #190b34;
  --text:         #f3ecff;
  --text-muted:   #f3ecff;
  --border:       #3d2170;
  --border-strong:#6a3fb5;
  --brand:        var(--nA);
  --btn-bg: var(--bg-elev); --btn-fg: var(--nA); --btn-border: var(--nA); --btn-hover: color-mix(in srgb, var(--nA) 15%, transparent);
  --active-bg: var(--nA); --active-fg: #ffffff; --active-border: var(--nA);
  --brand-hover:  color-mix(in srgb, var(--nA) 65%, #ffffff);
  --brand-soft:   color-mix(in srgb, var(--nA) 16%, transparent);
  --on-brand:     #ffffff;
  --hover:        rgba(255,255,255,.16);
  --accent:       var(--nB);
  --good:         #39ff9f;
  --bad:          #ff3860;
  --warn:         #ffb84d;
  --warn-soft:    color-mix(in srgb, #ffb84d 20%, transparent);
  --shadow:       0 0 0 1px color-mix(in srgb, var(--nA) 22%, transparent), 0 10px 34px color-mix(in srgb, var(--nA) 30%, transparent);
  --shadow-lg:    0 0 0 1px color-mix(in srgb, var(--nB) 30%, transparent), 0 18px 54px color-mix(in srgb, var(--nC) 42%, transparent);
  animation: neon-palette 150s linear infinite;
}

@keyframes neon-palette {
  0%     { --nA:#b026ff; --nB:#00f0ff; --nC:#ff2bd6; }
  6.67%  { --nA:#ff7a00; --nB:#ffd000; --nC:#ff2bd6; }
  13.33% { --nA:#2b6bff; --nB:#00e0ff; --nC:#7b2bff; }
  20%    { --nA:#ffffff; --nB:#cfe0ff; --nC:#9aa6c8; }
  26.67% { --nA:#ff2bd6; --nB:#ff7be6; --nC:#ff0050; }
  33.33% { --nA:#39ff14; --nB:#00f0ff; --nC:#b6ff00; }
  40%    { --nA:#00f0ff; --nB:#2bffd0; --nC:#18a0ff; }
  46.67% { --nA:#fff200; --nB:#ffae00; --nC:#ff2bd6; }
  53.33% { --nA:#ff1744; --nB:#ff6a3a; --nC:#ff00a0; }
  60%    { --nA:#7b2bff; --nB:#b026ff; --nC:#00d4ff; }
  66.67% { --nA:#2bffb3; --nB:#39ff14; --nC:#00f0ff; }
  73.33% { --nA:#ff2bd6; --nB:#a14bff; --nC:#00f0ff; }
  80%    { --nA:#ff5e62; --nB:#ff9966; --nC:#ff2bd6; }
  86.67% { --nA:#4facfe; --nB:#00f2fe; --nC:#a66bff; }
  93.33% { --nA:#ffd700; --nB:#fff3c0; --nC:#ff8a00; }
  100%   { --nA:#b026ff; --nB:#00f0ff; --nC:#ff2bd6; }
}

html[data-theme="neon"] body {
  background:
    radial-gradient(circle at 15% 18%, color-mix(in srgb, var(--nA) 22%, transparent), transparent 42%),
    radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--nB) 20%, transparent), transparent 44%),
    radial-gradient(circle at 50% 92%, color-mix(in srgb, var(--nC) 16%, transparent), transparent 46%),
    linear-gradient(135deg, #0b0016, #1a0738 50%, #06121f);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%;
  animation: neon-bg-pan 20s ease-in-out infinite;
  background-attachment: fixed;
}
@keyframes neon-bg-pan {
  0%,100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; }
  50%     { background-position: 100% 100%, 0% 100%, 50% 0%, 100% 50%; }
}

html[data-theme="neon"] .site-header {
  border-bottom-color: var(--nA);
  box-shadow: 0 1px 26px color-mix(in srgb, var(--nA) 38%, transparent);
}
html[data-theme="neon"] .brand img {
  filter: drop-shadow(0 0 6px var(--nA)) drop-shadow(0 0 11px color-mix(in srgb, var(--nB) 60%, transparent));
}
html[data-theme="neon"] .theme-neon-btn { animation: neon-pulse 2.2s ease-in-out infinite; }
@keyframes neon-pulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nA) 0%, transparent); }
  50%     { box-shadow: 0 0 13px 2px color-mix(in srgb, var(--nA) 60%, transparent); }
}

html[data-theme="neon"] h1, html[data-theme="neon"] h2 {
  background: linear-gradient(90deg, var(--nA), var(--nB), var(--nC), var(--nA));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--nA) 45%, transparent));
  animation: neon-text-flow 7s linear infinite;
}
@keyframes neon-text-flow { to { background-position: 300% 0; } }

html[data-theme="neon"] .card {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    linear-gradient(135deg, var(--nA), var(--nB)) border-box;
  box-shadow: var(--shadow);
}

html[data-theme="neon"] .btn,
html[data-theme="neon"] button[type="submit"] {
  background: linear-gradient(90deg, var(--nA), var(--nC), var(--nB));
  background-size: 200% 100%;
  color: var(--on-brand); border-color: var(--btn-border);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  box-shadow: 0 0 16px color-mix(in srgb, var(--nA) 50%, transparent);
  animation: neon-btn-flow 4s linear infinite;
}
html[data-theme="neon"] .btn:hover,
html[data-theme="neon"] button[type="submit"]:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 26px color-mix(in srgb, var(--nB) 60%, transparent);
}
@keyframes neon-btn-flow { to { background-position: 200% 0; } }
html[data-theme="neon"] .btn-secondary,
html[data-theme="neon"] .btn.ghost {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--btn-border);
  color: var(--nB);
  text-shadow: none;
  animation: none;
  box-shadow: 0 0 10px color-mix(in srgb, var(--nB) 30%, transparent);
}
html[data-theme="neon"] .btn.danger {
  background: transparent; border: 1px solid var(--bad); color: var(--bad); animation: none; text-shadow: none;
  box-shadow: none;
}
html[data-theme="neon"] .btn-secondary:hover,
html[data-theme="neon"] .btn.ghost:hover { background: color-mix(in srgb, var(--nB) 12%, transparent); color: #fff; }

html[data-theme="neon"] a:hover { text-shadow: 0 0 8px currentColor; }

/* Neon-Animationen auf Touch-Geraeten und bei reduced-motion abschalten */
@media (prefers-reduced-motion: reduce), (hover: none) and (pointer: coarse) {
  html[data-theme="neon"],
  html[data-theme="neon"] body,
  html[data-theme="neon"] h1,
  html[data-theme="neon"] h2,
  html[data-theme="neon"] .btn,
  html[data-theme="neon"] button[type="submit"],
  html[data-theme="neon"] .theme-neon-btn {
    animation: none;
  }
}
/* Neon: Hinzufügen-Karte mit demselben Knopf-Rahmen wie in den anderen Themes */
html[data-theme="neon"] .card.box.add { border: 2px dashed var(--btn-border); background: var(--btn-bg); box-shadow: none; }