/* Jahreszeiten und Tag-Abend-Modus
   thema.js setzt am <html> zwei Attribute: data-season (fruehling|sommer|herbst|winter) und data-mode (tag|abend).
   Diese Datei überschreibt ausschließlich die Bedeutungs-Tokens aus style.css bzw. uebersicht.css.
   Aufbau: 1. Jahreszeit am Tag  2. Abend allgemein  3. Jahreszeit am Abend  4. wenige Regeln, die Tokens nicht abdecken.
   Ohne Attribute (kein JavaScript) gilt die neutrale Tagesdarstellung aus dem jeweiligen Stylesheet.
   Diese Datei liegt identisch in 01-WEBDESIGN-HAUPTSEITE und 02-DESIGNBEISPIELE. */

/* ---------- 1. Jahreszeit am Tag: Türkis und Navy bleiben, Flächen, Licht und Nebenakzent wechseln ---------- */
:root[data-season="fruehling"] {
  --bg: #f4f8f5; --bg-rgb: 244, 248, 245; --surface: #ecf2ed; --line: #dfe7e1; --line-strong: #ccd8cf;
  --tint: #e4f3ec; --tint-2: #eff8f3; --blue-soft: #dcebdf;
  --season: #6f9a7a; --glow-a: 20, 163, 163; --glow-b: 122, 168, 132;
}
:root[data-season="sommer"] {
  --bg: #f3f8fb; --bg-rgb: 243, 248, 251; --surface: #e9f1f6; --line: #dde7ee; --line-strong: #c9d8e3;
  --tint: #e1f3f6; --tint-2: #edf8fb; --blue-soft: #d6e7f6;
  --season: #2f86c8; --glow-a: 16, 170, 180; --glow-b: 47, 134, 200;
}
:root[data-season="herbst"] {
  --bg: #f8f6f2; --bg-rgb: 248, 246, 242; --surface: #f1eee8; --line: #e6e1d8; --line-strong: #d6cfc3;
  --tint: #f2ebe0; --tint-2: #f8f3ea; --blue-soft: #ebdfcd;
  --season: #a9683a; --glow-a: 20, 150, 150; --glow-b: 184, 115, 65;
}
:root[data-season="winter"] {
  --bg: #f3f6f9; --bg-rgb: 243, 246, 249; --surface: #eaeff4; --line: #dfe5ec; --line-strong: #cbd4de;
  --tint: #e6eff6; --tint-2: #f0f5fa; --blue-soft: #dbe5f0;
  --season: #7f93ab; --glow-a: 110, 165, 210; --glow-b: 150, 165, 185;
}

/* ---------- 2. Abend allgemein: gedämpfte, dunkle Flächen statt Schwarz, helle Schrift, ruhige Schatten ---------- */
:root[data-mode="abend"] {
  color-scheme: dark;
  --text: #e4e7eb; --muted: #ced3da; --heading: #f4f5f7; --ink: #eef0f3; --accent-ink: #7fd9d4;
  --btn-bg: #5fd0d0; --btn-fg: #0b1a22; --btn-hover-bg: #9be7e2; --btn-hover-fg: #0b1a22;
  --field-line: #8794a5; --placeholder: #aeb6c1; --error: #ff8f85;
  --hi: rgba(255, 255, 255, 0.05); --shadow-rgb: 0, 0, 0;
  --frame-bar: #2a3442; --frame-line: #3a4656; --frame-dot: #566375; --frame-label: #d5dbe3;
  /* Grundwerte, falls keine Jahreszeit gesetzt ist */
  --bg: #141a24; --bg-rgb: 20, 26, 36; --surface: #1a212c; --card: #1e2633; --band: #181f2a; --band-rgb: 24, 31, 42;
  --line: #2b3543; --line-strong: #3a4656; --field-bg: #161c26;
  --panel: #1a2b4a; --footer-bg: #0d121a; --tint: #1c3338; --tint-2: #1a2a30; --blue-soft: #25344a;
}

/* ---------- 3. Jahreszeit am Abend ---------- */
:root[data-mode="abend"][data-season="fruehling"] {
  --bg: #151c1d; --bg-rgb: 21, 28, 29; --surface: #1a2324; --card: #1f292a; --band: #182021; --band-rgb: 24, 32, 33;
  --line: #2c3a3a; --line-strong: #3b4b4a; --field-bg: #161e1f;
  --panel: #17323a; --footer-bg: #0e1414; --tint: #1d3733; --tint-2: #1b2e2c; --blue-soft: #25392f;
  --season: #9cc3a6; --glow-a: 60, 190, 180; --glow-b: 214, 172, 122;
}
:root[data-mode="abend"][data-season="sommer"] {
  --bg: #111b26; --bg-rgb: 17, 27, 38; --surface: #16222f; --card: #1a2837; --band: #14202c; --band-rgb: 20, 32, 44;
  --line: #283a4c; --line-strong: #36495d; --field-bg: #121d29;
  --panel: #14304f; --footer-bg: #0b131b; --tint: #173640; --tint-2: #162c38; --blue-soft: #1f3854;
  --season: #6fb6e6; --glow-a: 40, 175, 195; --glow-b: 60, 125, 215;
}
:root[data-mode="abend"][data-season="herbst"] {
  --text: #e9e5df; --muted: #d4cec6; --heading: #f6f3ef; --ink: #f1ede7;
  --bg: #1b1917; --bg-rgb: 27, 25, 23; --surface: #22201d; --card: #282521; --band: #1f1d1a; --band-rgb: 31, 29, 26;
  --line: #3a352f; --line-strong: #4b443c; --field-bg: #1c1a18;
  --panel: #1e2a40; --footer-bg: #121110; --tint: #2f2a22; --tint-2: #2a2620; --blue-soft: #3a3024;
  --season: #d39a6a; --glow-a: 40, 160, 155; --glow-b: 210, 140, 85;
}
:root[data-mode="abend"][data-season="winter"] {
  --bg: #141a22; --bg-rgb: 20, 26, 34; --surface: #1a212b; --card: #1e2632; --band: #171e28; --band-rgb: 23, 30, 40;
  --line: #2d3745; --line-strong: #3c4858; --field-bg: #151b24;
  --panel: #1a2c4c; --footer-bg: #0c1118; --tint: #1e2f40; --tint-2: #1b2836; --blue-soft: #263750;
  --season: #a9bdd4; --glow-a: 130, 180, 230; --glow-b: 190, 200, 215;
}

/* ---------- 4. Ergänzende Regeln ---------- */
/* Seitenkopf der Unterseiten bekommt dasselbe Licht wie der Hero */
.page-head { background: radial-gradient(760px 320px at 92% 0%, rgba(var(--glow-a), 0.1), transparent 62%), radial-gradient(560px 300px at 70% 100%, rgba(var(--glow-b), 0.09), transparent 60%), linear-gradient(180deg, var(--band) 0%, var(--surface) 100%); }

/* Tag: mit gesetzter Jahreszeit darf das Licht im Hero eine Spur deutlicher sein, damit der Nebenakzent sichtbar wird */
[data-season] .hero { background: radial-gradient(900px 520px at 88% 6%, rgba(var(--glow-a), 0.13), transparent 62%), radial-gradient(760px 500px at 70% 100%, rgba(var(--glow-b), 0.16), transparent 60%), var(--band); }

/* Abend: Licht etwas kräftiger, weil es auf dunklem Grund sonst verschwindet */
[data-mode="abend"] .hero { background: radial-gradient(900px 520px at 88% 6%, rgba(var(--glow-a), 0.17), transparent 62%), radial-gradient(720px 480px at 72% 100%, rgba(var(--glow-b), 0.14), transparent 60%), var(--band); }
[data-mode="abend"] .intro { background: radial-gradient(760px 320px at 92% 0%, rgba(var(--glow-a), 0.15), transparent 62%), radial-gradient(560px 300px at 60% 100%, rgba(var(--glow-b), 0.11), transparent 60%), var(--card); }

/* Abend: der Schleier über der Hero-Grafik endet früher, sonst liegen die hellen Vorschaufenster halb im Dunkeln */
@media (min-width: 1001px) {
  [data-mode="abend"] .hero::before { background: linear-gradient(90deg, rgb(var(--band-rgb)) 0%, rgba(var(--band-rgb), 0.95) 34%, rgba(var(--band-rgb), 0.4) 48%, rgba(var(--band-rgb), 0) 56%), linear-gradient(0deg, var(--bg) 0%, rgba(var(--bg-rgb), 0) 28%); }
}

/* Abend: dunkle Flächen heben sich durch eine feine Lichtkante vom Hintergrund ab */
[data-mode="abend"] .startklar, [data-mode="abend"] .more-designs, [data-mode="abend"] .about-mark { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 26px 50px -30px rgba(0, 0, 0, 0.7); }
[data-mode="abend"] .btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 22px -14px rgba(0, 0, 0, 0.8); }
[data-mode="abend"] .btn-ghost, [data-mode="abend"] .btn-light, [data-mode="abend"] .btn[disabled] { box-shadow: none; }
[data-mode="abend"] .btn:hover { box-shadow: 0 14px 28px -14px rgba(95, 208, 208, 0.45); }
[data-mode="abend"] .btn-ghost:hover { box-shadow: none; }
[data-mode="abend"] .btn-light:hover { color: #0b1a22; }

/* Abend: die Mini-Vorschauen bleiben in ihren eigenen Farben, werden aber nicht grell */
[data-mode="abend"] .frame .thumb, [data-mode="abend"] .item-visual .thumb { filter: brightness(0.88) saturate(0.96); }
[data-mode="abend"] .frame { background: #1e2633; }

/* Abend: heller Pfeil im Auswahlfeld */
[data-mode="abend"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e4e7eb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Weicher Übergang, wenn das Theme bei geöffneter Seite wechselt (thema.js setzt die Klasse für gut eine Sekunde) */
@media (prefers-reduced-motion: no-preference) {
  html.thema-wechsel, html.thema-wechsel *, html.thema-wechsel *::before, html.thema-wechsel *::after {
    transition: background-color 0.9s ease, color 0.9s ease, border-color 0.9s ease, box-shadow 0.9s ease, filter 0.9s ease !important;
  }
}