/* Lichtblick – Szene
   Drei Stile zum Vergleich (Stilprobe Phase 1): body[data-stil="flach" | "weich" | "bilderbuch"]
   Himmelsfarben und Nacht-Abdunklung setzt das Skript über CSS-Variablen. */

:root {
  --h1: #3f7fc4; --h2: #8dbde6; --h3: #d8ecf5;
  --nacht-deckung: 0;
  --sterne: 0;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body.szene-seite {
  height: 100dvh;
  overflow: hidden;
  background: #1b2433;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

#szene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: block;
  touch-action: none;
  cursor: grab;
}
#szene.zieht { cursor: grabbing; }

#schnee {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
}

/* --- Gemeinsames ---------------------------------------------------------- */

.himmel { fill: url(#himmelverlauf); }
.h1 { stop-color: var(--h1); }
.h2 { stop-color: var(--h2); }
.h3 { stop-color: var(--h3); }

.sonne { fill: #fff3c4; }
.stern { fill: #fffbe9; }
#sterne { opacity: var(--sterne); }
.mond-scheibe { fill: #fff8df; }
.mond-schatten { fill: #2a3352; opacity: 0.85; }

.nacht { fill: #0a1430; opacity: var(--nacht-deckung); pointer-events: none; }

.licht { opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.licht.an { opacity: 1; }
.fenster-licht { fill: #ffd27a; }
.laternen-licht { fill: #ffe2a0; }
.birne { fill: #ffd98a; }
.schein { fill: url(#g-schein); }
.gl1 { stop-color: #ffd27a; stop-opacity: 0.55; }
.gl2 { stop-color: #ffd27a; stop-opacity: 0; }
.licht.schein.an { opacity: 0.9; }

.turm-licht { fill: #ff4a3a; opacity: 0; }
.ist-nacht .turm-licht { animation: blinken 1.6s steps(1) infinite; }
@keyframes blinken { 0% { opacity: 1; } 50% { opacity: 0.15; } }

.puls { fill: #fff0a8; }
.funke { stroke: #ffe9a0; stroke-width: 1.4; stroke-linecap: round; fill: none; }

.papier { fill: url(#papier); pointer-events: none; display: none; }
.papier-punkt { fill: #5a4630; }
.dunst { pointer-events: none; }

/* Bewegung, die immer läuft */
/* Wasserrad: Der Bach fließt von links nach rechts und treibt die unteren Schaufeln an,
   also dreht das Rad gegen den Uhrzeigersinn */
#rad { transform-box: fill-box; transform-origin: center; animation: drehen-links 9s linear infinite; }
@keyframes drehen-links { to { transform: rotate(-360deg); } }
#muehlenfluegel { transform-box: fill-box; transform-origin: center; animation: drehen 26s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

.bach-fluss { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 26; animation: fliessen 3s linear infinite; }
@keyframes fliessen { to { stroke-dashoffset: -36; } }

.wolke-gruppe { animation: ziehen 240s linear infinite alternate; }
.wolke-gruppe:nth-child(2) { animation-duration: 320s; animation-delay: -90s; }
.wolke-gruppe:nth-child(3) { animation-duration: 280s; animation-delay: -40s; }
@keyframes ziehen { from { transform: translateX(-60px); } to { transform: translateX(60px); } }

#gras path { transform-box: fill-box; transform-origin: bottom center; animation: wiegen 6s ease-in-out infinite alternate; }
#gras path:nth-child(3n) { animation-duration: 7.5s; }
#gras path:nth-child(4n) { animation-duration: 5s; animation-delay: -2s; }
@keyframes wiegen { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }

/* Enten */
.ente-koerper { fill: #8a8f96; }
.ente-brust { fill: #7a4f36; }
.ente-kopf { fill: #2f6b3f; }
.ente-ring { fill: none; stroke: #f4f1e8; stroke-width: 1.4; }
.ente-weibchen .ente-koerper, .ente-weibchen .ente-brust, .ente-weibchen .ente-kopf { fill: #9a7a55; }
.ente-weibchen .ente-ring { display: none; }
.ente-schnabel { fill: #e2b33c; }
.ente-weibchen .ente-schnabel { fill: #d08a3a; }
.ente-auge { fill: #1a1a1a; }
.ente-spiegel { fill: #3b5ea8; }
.ente-kiel { fill: none; stroke: #e6f0f4; stroke-width: 1.2; opacity: 0.6; }
.ente-spiegelbild { opacity: 0.18; }
.ente-kueken .ente-koerper, .ente-kueken .ente-brust { fill: #b8954e; }
.ente-kueken .ente-kopf { fill: #d9bc62; }
.ente-kueken .ente-spiegel, .ente-kueken .ente-kiel { display: none; }

.stern.funkeln { animation: funkeln 3.2s ease-in-out infinite alternate; }
@keyframes funkeln { from { opacity: 1; } to { opacity: 0.35; } }
.puls-hof { fill: #fff0a8; opacity: 0.35; }

/* Hinweise und Infoknopf */
.hinweis {
  position: fixed; left: 50%; bottom: 14vh; transform: translateX(-50%);
  display: none; padding: 14px 18px 10px; border-radius: 18px;
  background: rgba(20, 26, 36, 0.55); color: #fdf7ec;
  font: 15px/1.3 system-ui, sans-serif; text-align: center; pointer-events: none;
}
.hinweis.sichtbar { display: block; animation: einblenden 0.8s ease; }
.hinweis svg { display: block; margin: 0 auto 6px; width: 84px; height: 64px; }
.hinweis .linie { fill: none; stroke: #fdf7ec; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hinweis .finger-l { animation: spreizen-l 1.6s ease-in-out infinite; }
.hinweis .finger-r { animation: spreizen-r 1.6s ease-in-out infinite; }
.hinweis .rad-strich { animation: rollen 1.2s linear infinite; }
@keyframes spreizen-l { 0%, 15% { transform: translate(8px, 6px); } 60%, 100% { transform: translate(-6px, -6px); } }
@keyframes spreizen-r { 0%, 15% { transform: translate(-8px, -6px); } 60%, 100% { transform: translate(6px, 6px); } }
@keyframes rollen { from { transform: translateY(-5px); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(6px); opacity: 0; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

.info {
  position: fixed; right: 16px; bottom: 16px; width: 2rem; height: 2rem;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6); color: #fdf7ec;
  background: rgba(20, 26, 36, 0.25);
  font: italic 600 1rem Georgia, serif; text-decoration: none; opacity: 0.6;
}
.info:hover, .info:focus-visible { opacity: 1; }

/* Knopf „Volle Bewegung“ – nur sichtbar, wenn das System reduzierte Bewegung wünscht */
.bewegung-knopf {
  position: fixed; right: 60px; bottom: 16px; height: 2rem; padding: 0 0.8rem;
  border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(20, 26, 36, 0.25); color: #fdf7ec;
  font: 0.85rem system-ui, sans-serif; cursor: pointer; opacity: 0.6;
}
.bewegung-knopf:hover, .bewegung-knopf:focus-visible { opacity: 1; }
.bewegung-knopf[hidden] { display: none; }

/* Entwicklerfeld (nur auf dev) */
.dev-feld {
  position: fixed; left: 10px; top: 10px; z-index: 10; max-width: 300px;
  background: rgba(16, 20, 28, 0.82); color: #eef; border-radius: 10px;
  font: 13px/1.4 system-ui, sans-serif; padding: 8px 10px;
}
.dev-feld summary { cursor: pointer; font-weight: 600; }
.dev-feld label { display: block; margin-top: 6px; }
.dev-feld select, .dev-feld input, .dev-feld button { font: inherit; }
.dev-feld .zeile { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.dev-feld input[type="range"] { width: 100%; }
.dev-feld .klein { opacity: 0.75; font-size: 12px; }
.dev-feld .ruhe-hinweis { margin-top: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(255, 210, 120, 0.18); }
.dev-feld .ruhe-hinweis .klein { opacity: 1; }
.dev-feld [hidden] { display: none; }

/* ==========================================================================
   Stil A – flach: klare Flächen, keine Verläufe, keine Linien
   ========================================================================== */
[data-stil="flach"] .wolke { fill: #ffffff; opacity: 0.85; }
[data-stil="flach"] .turm, [data-stil="flach"] .muehle { fill: #6f86a3; }
[data-stil="flach"] .muehle-fluegel { stroke: #6f86a3; stroke-width: 3; }
[data-stil="flach"] .fern { fill: #6d8f7a; }
[data-stil="flach"] .deich { fill: #8faf6e; }
[data-stil="flach"] .schaf { fill: #f4f1e8; }
[data-stil="flach"] .wiese { fill: #8cae5a; }
[data-stil="flach"] .dunst { fill: none; }
[data-stil="flach"] .stamm { fill: #6b4c33; }
[data-stil="flach"] .wald-krone { fill: #4f7a3d; }
[data-stil="flach"] .wald-krone-2 { fill: #8a8f3a; }
[data-stil="flach"] .nadel { fill: #2f5a3c; }
[data-stil="flach"] .tanne { fill: #24503a; }
[data-stil="flach"] .apfel-krone { fill: #5f8d42; }
[data-stil="flach"] .apfel { fill: #c8402e; }
[data-stil="flach"] .weiher-ufer { fill: #6a7d4a; }
[data-stil="flach"] .weiher { fill: #5d93b3; }
[data-stil="flach"] .weiher-glanz { stroke: #cfe6f1; stroke-width: 3; stroke-linecap: round; opacity: 0.7; }
[data-stil="flach"] .schilf { stroke: #7d8a3e; stroke-width: 2.4; fill: none; }
[data-stil="flach"] .kolben { fill: #6b4630; }
[data-stil="flach"] .bach { stroke: #5d93b3; stroke-width: 16; fill: none; stroke-linecap: round; }
[data-stil="flach"] .bach-fluss { stroke: #cfe6f1; opacity: 0.8; }
[data-stil="flach"] .steg { fill: #a87b4f; }
[data-stil="flach"] .steg-linie { stroke: #7a5434; stroke-width: 1.5; }
[data-stil="flach"] .mast { fill: #3a3a3a; }
[data-stil="flach"] .laterne { fill: #2f2f2f; }
[data-stil="flach"] .kompost { fill: #7a5a3a; }
[data-stil="flach"] .beet { fill: #6b4a33; }
[data-stil="flach"] .beet-reihe { stroke: #523826; stroke-width: 2; }
[data-stil="flach"] .pflanze { fill: #5f9a45; }
[data-stil="flach"] .huette-wand { fill: #a9784c; }
[data-stil="flach"] .huette-brett { stroke: #8a5f3a; stroke-width: 1.5; }
[data-stil="flach"] .huette-dach { fill: #7a3f2e; }
[data-stil="flach"] .solar { fill: #23365c; }
[data-stil="flach"] .solar-linie { stroke: #8aa3c9; stroke-width: 1; }
[data-stil="flach"] .schornstein { fill: #8c5a44; }
[data-stil="flach"] .nest { fill: #8a6a42; }
[data-stil="flach"] .nest-zweig { stroke: #6e5233; stroke-width: 1.6; }
[data-stil="flach"] .fenster { fill: #3d4a56; }
[data-stil="flach"] .fenster-rahmen { stroke: #e9dcc4; stroke-width: 2; }
[data-stil="flach"] .tuer { fill: #6a4429; }
[data-stil="flach"] .kabel { stroke: #2b2b2b; stroke-width: 1.6; fill: none; }
[data-stil="flach"] .rad-felge { fill: none; stroke: #5a3d26; stroke-width: 4; }
[data-stil="flach"] .rad-speiche { stroke: #5a3d26; stroke-width: 3; }
[data-stil="flach"] .rad-schaufel { fill: #7a5434; }
[data-stil="flach"] .vorder-stamm { fill: #4a3626; }
[data-stil="flach"] .vorder-laub { fill: #3f6b34; }
[data-stil="flach"] .vorder-laub-2 { fill: #8a7a2e; }
[data-stil="flach"] .gras { stroke: #557d33; stroke-width: 3; fill: none; stroke-linecap: round; }

/* ==========================================================================
   Stil B – weich: Verläufe, Dunst, Tiefe durch hellere Ferne
   ========================================================================== */
[data-stil="weich"] .wolke { fill: #ffffff; opacity: 0.7; }
[data-stil="weich"] .turm, [data-stil="weich"] .muehle { fill: #8ea3bc; }
[data-stil="weich"] .muehle-fluegel { stroke: #8ea3bc; stroke-width: 3; }
[data-stil="weich"] .fern { fill: url(#g-fern); }
[data-stil="weich"] .gf1 { stop-color: #8fb0a2; } [data-stil="weich"] .gf2 { stop-color: #6f957c; }
[data-stil="weich"] .deich { fill: #9cbc7c; }
[data-stil="weich"] .schaf { fill: #f8f5ee; }
[data-stil="weich"] .wiese { fill: url(#g-wiese); }
[data-stil="weich"] .gw1 { stop-color: #a6c46e; } [data-stil="weich"] .gw2 { stop-color: #5f8a3c; }
[data-stil="weich"] .dunst { fill: url(#g-dunst); }
[data-stil="weich"] .gu1 { stop-color: #ffffff; stop-opacity: 0; } [data-stil="weich"] .gu2 { stop-color: #f3efe2; stop-opacity: 0.35; }
[data-stil="weich"] .stamm { fill: #6f523a; }
[data-stil="weich"] .wald-krone, [data-stil="weich"] .apfel-krone, [data-stil="weich"] .vorder-laub { fill: url(#g-krone); }
[data-stil="weich"] .gk1 { stop-color: #7fa85a; } [data-stil="weich"] .gk2 { stop-color: #3e6a35; }
[data-stil="weich"] .wald-krone-2, [data-stil="weich"] .vorder-laub-2 { fill: #a39a45; }
[data-stil="weich"] .nadel { fill: #2f5e44; }
[data-stil="weich"] .tanne { fill: #24553e; }
[data-stil="weich"] .apfel { fill: #d4472f; }
[data-stil="weich"] .weiher-ufer { fill: #6f8450; }
[data-stil="weich"] .weiher { fill: url(#g-weiher); }
[data-stil="weich"] .gs1 { stop-color: #a9d3e6; } [data-stil="weich"] .gs2 { stop-color: #4d84a6; }
[data-stil="weich"] .weiher-glanz { stroke: #e3f2f8; stroke-width: 3; stroke-linecap: round; opacity: 0.6; }
[data-stil="weich"] .schilf { stroke: #8a9446; stroke-width: 2.2; fill: none; }
[data-stil="weich"] .kolben { fill: #6e4a33; }
[data-stil="weich"] .bach { stroke: #6aa0bf; stroke-width: 16; fill: none; stroke-linecap: round; }
[data-stil="weich"] .bach-fluss { stroke: #e3f2f8; opacity: 0.7; }
[data-stil="weich"] .steg { fill: #b08558; }
[data-stil="weich"] .steg-linie { stroke: #7f5a39; stroke-width: 1.4; }
[data-stil="weich"] .mast { fill: #404040; }
[data-stil="weich"] .laterne { fill: #353535; }
[data-stil="weich"] .kompost { fill: #80603f; }
[data-stil="weich"] .beet { fill: #73503a; }
[data-stil="weich"] .beet-reihe { stroke: #573c29; stroke-width: 2; }
[data-stil="weich"] .pflanze { fill: #6aa64f; }
[data-stil="weich"] .huette-wand { fill: #b38455; }
[data-stil="weich"] .huette-brett { stroke: #93673f; stroke-width: 1.4; }
[data-stil="weich"] .huette-dach { fill: url(#g-dach); }
[data-stil="weich"] .gd1 { stop-color: #94503a; } [data-stil="weich"] .gd2 { stop-color: #6a3527; }
[data-stil="weich"] .solar { fill: #2a4170; }
[data-stil="weich"] .solar-linie { stroke: #9fb6da; stroke-width: 1; }
[data-stil="weich"] .schornstein { fill: #93604a; }
[data-stil="weich"] .nest { fill: #94744a; }
[data-stil="weich"] .nest-zweig { stroke: #735638; stroke-width: 1.5; }
[data-stil="weich"] .fenster { fill: #46535f; }
[data-stil="weich"] .fenster-rahmen { stroke: #efe3cc; stroke-width: 2; }
[data-stil="weich"] .tuer { fill: #704a2e; }
[data-stil="weich"] .kabel { stroke: #333; stroke-width: 1.5; fill: none; }
[data-stil="weich"] .rad-felge { fill: none; stroke: #5f422b; stroke-width: 4; }
[data-stil="weich"] .rad-speiche { stroke: #5f422b; stroke-width: 3; }
[data-stil="weich"] .rad-schaufel { fill: #805a39; }
[data-stil="weich"] .vorder-stamm { fill: #4e3a2a; }
[data-stil="weich"] .gras { stroke: #5a8536; stroke-width: 3; fill: none; stroke-linecap: round; }

/* ==========================================================================
   Stil C – Bilderbuch: gedämpfte Farben, Tuschelinien, Papierstruktur
   ========================================================================== */
[data-stil="bilderbuch"] .papier { display: inline; opacity: 0.08; }
[data-stil="bilderbuch"] :is(.turm, .muehle, .fern, .deich, .wiese, .stamm, .wald-krone, .wald-krone-2, .nadel, .tanne,
  .apfel-krone, .weiher-ufer, .steg, .kompost, .beet, .huette-wand, .huette-dach, .solar, .schornstein, .nest, .fenster,
  .tuer, .vorder-stamm, .vorder-laub, .vorder-laub-2, .wolke, .schaf, .mast, .laterne, .rad-schaufel) {
  stroke: #3b2a1f; stroke-width: 2; stroke-linejoin: round;
}
[data-stil="bilderbuch"] .wolke { fill: #fbf6ea; stroke-width: 1.4; }
[data-stil="bilderbuch"] .turm, [data-stil="bilderbuch"] .muehle { fill: #a7a9a0; stroke-width: 1.2; }
[data-stil="bilderbuch"] .muehle-fluegel { stroke: #3b2a1f; stroke-width: 2.5; }
[data-stil="bilderbuch"] .fern { fill: #9eae8a; stroke-width: 1.4; }
[data-stil="bilderbuch"] .deich { fill: #b8c48e; stroke-width: 1.4; }
[data-stil="bilderbuch"] .schaf { fill: #fbf6ea; stroke-width: 1; }
[data-stil="bilderbuch"] .wiese { fill: #b2c27c; }
[data-stil="bilderbuch"] .dunst { fill: none; }
[data-stil="bilderbuch"] .stamm { fill: #8a6a4c; }
[data-stil="bilderbuch"] .wald-krone { fill: #7f9e62; }
[data-stil="bilderbuch"] .wald-krone-2 { fill: #c0b064; }
[data-stil="bilderbuch"] .nadel { fill: #5c7f62; }
[data-stil="bilderbuch"] .tanne { fill: #4e735a; }
[data-stil="bilderbuch"] .apfel-krone { fill: #8aab66; }
[data-stil="bilderbuch"] .apfel { fill: #c9573f; stroke: #3b2a1f; stroke-width: 1; }
[data-stil="bilderbuch"] .weiher-ufer { fill: #8f9a66; }
[data-stil="bilderbuch"] .weiher { fill: #8fb6c4; stroke: #3b2a1f; stroke-width: 1.4; }
[data-stil="bilderbuch"] .weiher-glanz { stroke: #f2f6f0; stroke-width: 2.5; stroke-linecap: round; }
[data-stil="bilderbuch"] .schilf { stroke: #3b2a1f; stroke-width: 1.6; fill: none; }
[data-stil="bilderbuch"] .kolben { fill: #7a553a; stroke: #3b2a1f; stroke-width: 1; }
[data-stil="bilderbuch"] .bach { stroke: #8fb6c4; stroke-width: 16; fill: none; stroke-linecap: round; }
[data-stil="bilderbuch"] .bach-fluss { stroke: #f2f6f0; opacity: 0.8; }
[data-stil="bilderbuch"] .steg { fill: #c39c6c; }
[data-stil="bilderbuch"] .steg-linie { stroke: #3b2a1f; stroke-width: 1.2; }
[data-stil="bilderbuch"] .mast, [data-stil="bilderbuch"] .laterne { fill: #4a4038; }
[data-stil="bilderbuch"] .kompost { fill: #937252; }
[data-stil="bilderbuch"] .beet { fill: #8c6a4c; }
[data-stil="bilderbuch"] .beet-reihe { stroke: #3b2a1f; stroke-width: 1.4; }
[data-stil="bilderbuch"] .pflanze { fill: #86b06a; stroke: #3b2a1f; stroke-width: 1; }
[data-stil="bilderbuch"] .huette-wand { fill: #c49a6c; }
[data-stil="bilderbuch"] .huette-brett { stroke: #3b2a1f; stroke-width: 1.2; }
[data-stil="bilderbuch"] .huette-dach { fill: #a4584a; }
[data-stil="bilderbuch"] .solar { fill: #4e6288; }
[data-stil="bilderbuch"] .solar-linie { stroke: #d5dde8; stroke-width: 1; }
[data-stil="bilderbuch"] .schornstein { fill: #a77a62; }
[data-stil="bilderbuch"] .nest { fill: #a8895f; }
[data-stil="bilderbuch"] .nest-zweig { stroke: #3b2a1f; stroke-width: 1.4; }
[data-stil="bilderbuch"] .fenster { fill: #5f6a72; }
[data-stil="bilderbuch"] .fenster-rahmen { stroke: #f5ecd8; stroke-width: 2; }
[data-stil="bilderbuch"] .tuer { fill: #84603f; }
[data-stil="bilderbuch"] .kabel { stroke: #3b2a1f; stroke-width: 1.4; fill: none; }
[data-stil="bilderbuch"] .rad-felge { fill: none; stroke: #3b2a1f; stroke-width: 4; }
[data-stil="bilderbuch"] .rad-speiche { stroke: #3b2a1f; stroke-width: 2.5; }
[data-stil="bilderbuch"] .rad-schaufel { fill: #a07650; }
[data-stil="bilderbuch"] .vorder-stamm { fill: #6c5440; }
[data-stil="bilderbuch"] .vorder-laub { fill: #6f9256; }
[data-stil="bilderbuch"] .vorder-laub-2 { fill: #b9a85a; }
[data-stil="bilderbuch"] .gras { stroke: #6e8a45; stroke-width: 2.6; fill: none; stroke-linecap: round; }
[data-stil="bilderbuch"] .ente-koerper, [data-stil="bilderbuch"] .ente-kopf, [data-stil="bilderbuch"] .ente-brust { stroke: #3b2a1f; stroke-width: 1; }

/* Ruhiger Modus: body.ruhig setzt js/ruhe.js nach der Systemeinstellung „Bewegung reduzieren“ */
.ruhig :is(#gras path, .stern.funkeln, .turm-licht) { animation: none; }
.ruhig #rad { animation-duration: 18s; }
.ruhig #muehlenfluegel { animation-duration: 52s; }
.ruhig .bach-fluss { animation-duration: 6s; }
.ruhig.ist-nacht .turm-licht { opacity: 1; }
.ruhig .hinweis { display: none; }