/* =====================================================================
   THEMES – gleicher Inhalt, anderes Gesicht.
   Aktives Design wird in public/theme.js gewählt (data-theme am <html>).
   Jedes Design überschreibt nur Farben (CSS-Variablen), Himmel, Sonne,
   Meer und Effekte. Neue Designs: Block kopieren und Namen anpassen.
   ===================================================================== */

/* Meer-Wellen im Kopfbereich über Variablen färbbar */
:root { --sea1: #0d1726; --sea2: #0b1422; }
.sea svg path:nth-child(1) { fill: var(--sea1); }
.sea svg path:nth-child(2) { fill: var(--sea2); }

/* Partikel-Ebene */
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx i { position: absolute; top: -6%; display: block; animation-name: fall; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes fall { to { transform: translate3d(calc(var(--z) * 60px), 112vh, 0) rotate(calc(var(--z) * 540deg)); } }
.fx-snow i { width: calc(var(--z) * 6px); height: calc(var(--z) * 6px); border-radius: 50%; background: #fff; opacity: calc(var(--z) * .7); filter: blur(calc((1.4 - var(--z)) * 1px)); }
.fx-petal i { width: calc(var(--z) * 12px); height: calc(var(--z) * 8px); border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #ffd6e0, #f29fb5); opacity: .85; }
.fx-leaf i { width: calc(var(--z) * 14px); height: calc(var(--z) * 9px); border-radius: 100% 0 100% 0; background: linear-gradient(135deg, #f0a03c, #b8461f); opacity: .9; }
.fx-glint i { width: calc(var(--z) * 5px); height: 2px; border-radius: 2px; background: #fff8d9; opacity: 0; animation-name: glint; }
@keyframes glint { 0%, 100% { opacity: 0; transform: scaleX(.4); } 50% { opacity: .9; transform: scaleX(1.6); } }

/* Vorschau-Hinweis */
.theme-badge { position: fixed; right: 16px; bottom: 16px; z-index: 70; background: var(--sand); color: var(--night); font-size: .78rem; font-weight: 600; padding: .5rem .9rem; border-radius: 999px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }

/* ---------------------------------------------------------------- WINTER */
[data-theme="winter"] {
  --night: #0c1a2c; --night-2: #13263f; --paper: #f4f6f9; --paper-2: #e7edf4;
  --sand: #f2cf8b; --ember: #c0473a; --sky: #b9cdea; --mute: #66718a;
  --sea1: #10213a; --sea2: #0c1a2c;
}
[data-theme="winter"] .sky { background:
  radial-gradient(80% 60% at 72% 100%, rgba(242,207,139,.35) 0%, rgba(192,71,58,.12) 30%, rgba(12,26,44,0) 60%),
  linear-gradient(180deg, #08111f 0%, #12253f 55%, #2b4466 100%); }
[data-theme="winter"] .sun { background: radial-gradient(circle at 50% 40%, #fffaf0 0%, #f2e3c4 40%, rgba(242,207,139,0) 72%); bottom: -20vmin; }
[data-theme="winter"] .flash { display: none; }

/* -------------------------------------------------------------- FRÜHLING */
[data-theme="fruehling"] {
  --night: #1c3a31; --night-2: #25493d; --paper: #f8f7f0; --paper-2: #eef1e3;
  --sand: #f4c4cf; --ember: #c9577a; --sky: #cfe6c5; --mute: #61705f;
  --sea1: #234539; --sea2: #1c3a31;
}
[data-theme="fruehling"] .sky { background:
  radial-gradient(110% 70% at 70% 100%, rgba(255,214,190,.65) 0%, rgba(244,196,207,.35) 30%, rgba(28,58,49,0) 62%),
  linear-gradient(180deg, #16302a 0%, #2f5a49 55%, #6f8f6e 100%); }
[data-theme="fruehling"] .sun { background: radial-gradient(circle at 50% 40%, #fffaf2 0%, #ffd9c4 45%, rgba(244,196,207,0) 72%); }
[data-theme="fruehling"] .stars { opacity: .35; }
[data-theme="fruehling"] .flash { display: none; }

/* ---------------------------------------------------------------- SOMMER */
[data-theme="sommer"] {
  --night: #0b2e3b; --night-2: #0f3d4d; --paper: #fbf7ef; --paper-2: #f4ead8;
  --sand: #ffc95e; --ember: #f0704f; --sky: #9be0e6; --mute: #5d6f74;
  --sea1: #0f5a6a; --sea2: #0b3f4c;
}
[data-theme="sommer"] .sky { background:
  radial-gradient(120% 75% at 70% 100%, rgba(255,214,120,.7) 0%, rgba(240,112,79,.25) 30%, rgba(11,46,59,0) 62%),
  linear-gradient(180deg, #0b3446 0%, #17677a 55%, #4fa3a6 100%); }
[data-theme="sommer"] .sun { width: 40vmin; height: 40vmin; bottom: -6vmin; background: radial-gradient(circle at 50% 45%, #fffbe6 0%, #ffd77a 42%, rgba(255,201,94,0) 72%); }
[data-theme="sommer"] .stars { display: none; }
[data-theme="sommer"] .flash { display: none; }
[data-theme="sommer"] .sea { height: 40%; background: linear-gradient(180deg, rgba(15,90,106,0), rgba(11,46,59,.95) 70%); }
[data-theme="sommer"] .sea svg { opacity: .8; }

/* ---------------------------------------------------------------- HERBST */
[data-theme="herbst"] {
  --night: #1b241d; --night-2: #243026; --paper: #f6f0e6; --paper-2: #ece1cf;
  --sand: #e8a34b; --ember: #b9502a; --sky: #d7c3a0; --mute: #6d6a5e;
  --sea1: #1f2b21; --sea2: #161d17;
}
[data-theme="herbst"] .sky { background:
  radial-gradient(110% 70% at 70% 100%, rgba(232,163,75,.6) 0%, rgba(185,80,42,.35) 30%, rgba(27,36,29,0) 62%),
  linear-gradient(180deg, #121812 0%, #243026 55%, #4a3a26 100%); }
[data-theme="herbst"] .sun { background: radial-gradient(circle at 50% 40%, #ffe0b0 0%, #e8a34b 45%, rgba(185,80,42,0) 72%); bottom: -18vmin; }
[data-theme="herbst"] .stars { opacity: .5; }
[data-theme="herbst"] .flash { display: none; }

/* ------------------------------------------------------------- KLAR (hell) */
[data-theme="klar"] {
  --night: #16181d; --night-2: #22252c; --paper: #faf8f4; --paper-2: #f1ede6;
  --sand: #d9a441; --ember: #b8542e; --sky: #c9c2b4; --mute: #6b6b6b;
  --sea1: #ece6dc; --sea2: #e2dacd;
}
[data-theme="klar"] .hero { background: #f3efe8; color: var(--night); }
[data-theme="klar"] .sky { background: radial-gradient(70% 60% at 75% 95%, rgba(217,164,65,.28), rgba(243,239,232,0) 60%); }
[data-theme="klar"] .stars, [data-theme="klar"] .flash { display: none; }
[data-theme="klar"] .sun { background: none; border: 2px solid var(--sand); filter: none; box-shadow: inset 0 0 0 18px rgba(217,164,65,.12); }
[data-theme="klar"] .sea { background: none; }
[data-theme="klar"] .hero p.lead { color: #4a4d55; }
[data-theme="klar"] .hero .eyebrow { color: var(--ember) !important; }
[data-theme="klar"] .hero h1 em { color: var(--ember); }
[data-theme="klar"] .hero .btn-ghost { color: var(--night); border-color: rgba(22,24,29,.25); }
[data-theme="klar"] .hero .btn-ghost:hover { background: rgba(22,24,29,.05); }
[data-theme="klar"] .hero-meta { color: #6b6b6b; }
[data-theme="klar"] .hero-meta b { color: var(--night); }
[data-theme="klar"] .scroll { color: #999; }
[data-theme="klar"] body:has(.hero) nav:not(.solid) .logo,
[data-theme="klar"] body:has(.hero) nav:not(.solid) .links:not(.open) > a:not(.btn),
[data-theme="klar"] body:has(.hero) nav:not(.solid) .links:not(.open) .dd > a,
[data-theme="klar"] body:has(.hero) nav:not(.solid) .burger { color: var(--night); }

/* ------------------------------------------------------------- KONTRAST (WCAG 2.1 AA)
   --ember ist die Akzentfarbe für Text auf HELLEM Grund (mind. 4.5:1).
   Auf dunklem Grund (Hero, Seitenkopf, dunkle Karten, Kontakt-Band, Fuss) gilt --ember-on-dark.
   Neue Designs: beide Werte setzen und mit Kontrast-Rechner prüfen (siehe docs/anpassungen.md). */
:root{ --ember:#9b5437; --ember-on-dark:#e07a4f; --mute:#606778; }
[data-theme="winter"]{ --ember:#b64337; --ember-on-dark:#d0756b; --mute:#5f6980; }
[data-theme="fruehling"]{ --ember:#ab4a68; --ember-on-dark:#e09eb2; --mute:#606f5e; }
[data-theme="sommer"]{ --ember:#a84e37; --ember-on-dark:#f28468; --mute:#5a6c71; }
[data-theme="herbst"]{ --ember:#a54725; --ember-on-dark:#cd8368; --mute:#666458; }
[data-theme="klar"]{ --ember:#a14a29; --ember-on-dark:#c87a5c; --mute:#5f5f5f; }
.hero,.phero,.method,.feature,.final,.card.dark,footer{ --ember:var(--ember-on-dark); }
@media (max-width:720px){ .links .menu{ --ember:var(--ember-on-dark); } }   /* mobil liegt das Menü auf dunklem Grund */
.scroll{ color:rgba(255,255,255,.65); }
[data-theme="klar"] .hero{ --ember:#a14a29; }
[data-theme="klar"] .scroll{ color:#5f5f5f; }