/* Design „Herbst“ – wird beim Start in die Tabelle designs übernommen (lib/designs.js, lib/db.js).
   Blattformen: Eiche nach Openclipart 312908 (CC0), Ahorn und Buche selbst gezeichnet – siehe public/leaf-art.js */
:root {
  --green-pale: #fdf6ea;
  --green-light: #f6e7cd;
  --wood: #b06a33;
  --wood-dark: #7d4a20;
}
/* Warmes Herbstlicht: hell und golden oben rechts, satter Bernstein an den Rändern.
   Die Übungsseite (body.ue-body) bekommt denselben Grund – ihre bunten Ecken-Punkte entfallen dadurch. */
body, body.ue-body {
  background-color: #f7e4c4;
  background-image:
    radial-gradient(circle at 76% 4%, #fffaee 0, rgba(255, 250, 238, 0) 42%),
    radial-gradient(circle at 18% 18%, #fde9c0 0, rgba(253, 233, 192, 0) 40%),
    radial-gradient(circle at -5% 105%, #d98536 0, rgba(217, 133, 54, 0) 58%),
    radial-gradient(circle at 105% 96%, #d9822f 0, rgba(217, 130, 47, 0) 52%),
    radial-gradient(circle at 102% 30%, #e6a558 0, rgba(230, 165, 88, 0) 40%),
    radial-gradient(circle at 45% 45%, #fdf0d6 0, #eec78c 100%);
  background-attachment: fixed;
}
.site-header { background: linear-gradient(180deg, #fffaf0, #fbeed9); border-bottom: 3px solid #d98f34; }
.site-header .wrap { position: relative; z-index: 1; }   /* Menütasten liegen über den Blättern */
/* Menüpunkte als eigene Kacheln – vor dem herbstlichen Hintergrund besser zu erkennen als bloße Schrift */
.nav { gap: 6px; padding-bottom: 9px; }
.nav a { color: #7d420f; background: #fffaf0; border: 1px solid #e3c79a; border-radius: 12px; padding: 8px 14px;
  box-shadow: 0 2px 0 rgba(122, 77, 31, .16); transition: background .15s, transform .12s, box-shadow .12s; }
.nav a:hover { background: #fdeed4; color: #6d3a0d; transform: translateY(-1px); box-shadow: 0 3px 0 rgba(122, 77, 31, .22); }
.nav a:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(122, 77, 31, .22); }
.nav a.active { background: var(--green); color: #fff; border-color: var(--green-dark); box-shadow: 0 2px 0 var(--green-dark); }
.nav a:focus-visible { outline: 3px solid var(--wood-dark); outline-offset: 2px; }
/* aktive Reiter/Tasten beim Überfahren dunkler statt heller (weiße Schrift bleibt lesbar) */
.nav a.active:hover, .lv-tab.active:hover, .ue-tabs a.active:hover, .seg a.active:hover { background: var(--green-dark); color: #fff; }
h1, h2 { color: #3f6a1c; }
.intro { background: #fffaf1; border-left-color: #d98f34; }
.group, .content, .album-card, .lv-card, .ee-game { border: 1px solid #edd9b8; }
/* Spiel- und Video-Kachel nicht reinweiß, sondern in warmem Pergamentton */
.ee-game, .lv-card { background: linear-gradient(180deg, #fffbf3 0, #fbeed7 100%); }
/* Himmel im 1×1-Spiel: kein strahlendes Blau mehr, sondern diesiges Herbstlicht mit ziehenden Wolken */
/* mehr Himmel über den Baumwipfeln, damit Wolken und Herbstlicht zu sehen sind */
.ee-stage { padding-top: 140px; background: linear-gradient(180deg, #7f95a9 0%, #b0b0a8 44%, #ded0ac 76%); }
.ee-sky { display: block; position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 0; pointer-events: none; }
.ee-cloud { animation: ee-cloud-zug 90s linear infinite; }
.ee-cloud2 { animation-duration: 120s; animation-delay: -40s; }
.ee-cloud3 { animation-duration: 150s; animation-delay: -90s; }
.ee-cloud4 { animation-duration: 110s; animation-delay: -25s; }
.ee-cloud5 { animation-duration: 135s; animation-delay: -65s; }
@keyframes ee-cloud-zug { from { transform: translateX(-260px); } to { transform: translateX(900px); } }
@media (prefers-reduced-motion: reduce) { .ee-cloud { animation: none; } }
@media (max-width: 640px) { .ee-stage { padding-top: 96px; } }
/* 1×1-Wald in Herbstfarben (Klassen aus forestSvg in lib/views.js): gelb-braunes Laub, wenige grüne Tannen,
   Sonne steckt im diesigen Himmel (skySvg) statt im Wald */
.ee-forest .wh.n0 { fill: #a8bf90; } .ee-forest .wh.n1 { fill: #9cb885; }
.ee-forest .wh.l0 { fill: #e7cf96; } .ee-forest .wh.l1 { fill: #ddc189; } .ee-forest .wh.l2 { fill: #e3c07f; }
.ee-forest .wm.n0 { fill: #7e9a5c; } .ee-forest .wm.n1 { fill: #6e8c51; }
.ee-forest .wm.l0 { fill: #d9962f; } .ee-forest .wm.l1 { fill: #c9742a; } .ee-forest .wm.l2 { fill: #e0ab3c; } .ee-forest .wm.l3 { fill: #bd5f27; }
.ee-forest .stamm-h { fill: #c0a684; }
.ee-forest .huegel { fill: #edddb4; }
.ee-forest .boden-1 { stop-color: #e2cd93; } .ee-forest .boden-2 { stop-color: #c4a463; }
.ee-forest .huegel-vorne { fill: #d2b06d; }
.ee-forest .buesche { fill: #a9762f; }
.ee-forest .gras { stroke: #a07c33; }
.ee-forest .sonne, .ee-forest .sonne-glanz, .ee-forest .nur-o { display: none; }
.ee-forest .nur-h { display: inline; }
.lv-tab { background: #fffaf0; }
/* Fußzeile auf dem warmen Grund dunkel statt grau, sonst kaum zu lesen */
.site-footer { border-top-color: #e6cca4; color: #6d4318; }
.site-footer a { color: #6d4318; font-weight: 600; }
.site-footer a:hover { color: #4d2c0c; }
.btn { box-shadow: 0 3px 0 #3f6a1c; }
.crumbs a { color: #a85f16; }

/* Blätter im Menü (leaves.js): mehrere Ebenen, nach oben hin kleiner und blasser, hinter den Tasten */
.leaves { position: absolute; left: 0; right: 0; height: 0; z-index: 0; pointer-events: none; }
.leaf { opacity: var(--op); position: absolute; left: var(--x); bottom: var(--lift); width: var(--size); height: var(--size); transform-origin: 50% 85%;
  transform: translate(-50%, 0) scaleY(var(--flach)) rotate(var(--tilt)); animation: leaf-idle var(--dur) ease-in-out var(--delay) infinite; }
.leaf svg { display: block; width: 100%; height: 100%; }
@keyframes leaf-idle {
  0%, 100% { transform: translate(-50%, 0) scaleY(var(--flach)) rotate(var(--tilt)); }
  50% { transform: translate(calc(-50% + 1px), -1px) scaleY(calc(var(--flach) + .06)) rotate(calc(var(--tilt) + 5deg)); }
}
.leaf.gust { animation: leaf-gust 1.3s cubic-bezier(.25, .9, .3, 1) both; }
/* beim Auffliegen richtet sich das Blatt kurz auf (Stauchung geht zurück) und legt sich wieder hin */
@keyframes leaf-gust {
  0% { transform: translate(-50%, 0) scaleY(var(--flach)) rotate(var(--tilt)); }
  30% { transform: translate(calc(-50% + var(--fly) * 0.45), -22px) scaleY(.95) rotate(calc(var(--tilt) + 150deg)); }
  65% { transform: translate(calc(-50% + var(--fly) * 0.85), -12px) scaleY(.85) rotate(calc(var(--tilt) + 290deg)); }
  100% { transform: translate(calc(-50% + var(--fly)), 0) scaleY(var(--flach)) rotate(calc(var(--tilt) + 360deg)); }
}
@media (prefers-reduced-motion: reduce) { .leaf { animation: none; } }

/* Hintergrund (leaves.js): weiche Lichtpunkte und durchscheinende Blätter mit Kontur und Schatten */
.bg-leaves { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bokeh { position: absolute; width: var(--d); height: var(--d); border-radius: 50%; opacity: var(--op); filter: blur(7px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 253, 244, .5) 0, rgba(255, 249, 232, .62) 60%, rgba(255, 244, 219, .7) 76%, rgba(255, 240, 205, 0) 88%); }
.bg-leaf { position: absolute; width: var(--size); height: var(--size); opacity: var(--op);
  transform: translate(-50%, -50%) rotate(var(--rot)); filter: drop-shadow(2px 3px 2px rgba(90, 48, 16, .35)); }
.bg-leaf svg { display: block; width: 100%; height: 100%; }
@media (max-width: 720px) { .bg-leaf { width: calc(var(--size) * .65); height: calc(var(--size) * .65); } }

/* Design „Halloween“ – Ergänzungen zu designs/herbst.css (beides zusammen wird in der Tabelle designs gespeichert).
   Freundlich, nicht gruselig: Volksschulklasse. Dämmerung statt hellem Herbstlicht, dazu Kürbisse, Gespenster,
   Skelett, Fledermäuse, Katze, Mond und Sterne (Zeichnungen: public/halloween-art.js, Hintergrund: public/gestalten.js). */

/* ---- Grundstimmung: Dämmerung – oben Lavendel, unten warmes Kürbis-Leuchten, Mondschein rechts oben ---- */
body, body.ue-body {
  background-color: #dccbe3;
  background-image:
    radial-gradient(circle at 86% 15%, rgba(255, 246, 214, .85) 0, rgba(255, 246, 214, 0) 24%),
    radial-gradient(circle at 50% 120%, #f2a35a 0, rgba(242, 163, 90, 0) 55%),
    radial-gradient(circle at -6% 104%, #db843f 0, rgba(219, 132, 63, 0) 45%),
    radial-gradient(circle at 106% 100%, #d67c3b 0, rgba(214, 124, 59, 0) 42%),
    linear-gradient(180deg, #b7a3d6 0%, #d6c1de 38%, #efcdb8 76%, #f1bb8c 100%);
  background-attachment: fixed;
}
/* Lichtpunkte werden zu kleinen Glühwürmchen */
.bokeh { width: calc(var(--d) * .22); height: calc(var(--d) * .22); filter: blur(1.5px);
  background: radial-gradient(circle, rgba(255, 240, 160, 1) 0, rgba(255, 222, 120, .55) 38%, rgba(255, 210, 110, 0) 70%);
  animation: hw-gluehwurm 3.4s ease-in-out infinite alternate; }
.bokeh:nth-child(3n) { animation-duration: 4.6s; animation-delay: -1.2s; }
.bokeh:nth-child(3n + 1) { animation-duration: 2.8s; animation-delay: -2s; }
@keyframes hw-gluehwurm { from { opacity: calc(var(--op) * .35); } to { opacity: 1; } }
.bg-leaf { filter: drop-shadow(2px 3px 2px rgba(60, 30, 70, .35)) saturate(.9); }

/* ---- Kopfzeile, Menü, Schrift: hell und gut lesbar, Akzent Lila statt Grün ---- */
.site-header { background: linear-gradient(180deg, #fdf9ff, #f2e8f6); border-bottom-color: #e07b2c; }
.nav a { color: #4b2a6b; background: #fffaf6; border-color: #dcc6e8; box-shadow: 0 2px 0 rgba(75, 42, 107, .16); }
.nav a:hover { background: #f6ecfb; color: #3a1f55; box-shadow: 0 3px 0 rgba(75, 42, 107, .22); }
.nav a.active { background: #6b3fa0; border-color: #4f2d7a; box-shadow: 0 2px 0 #4f2d7a; color: #fff; }
.nav a.active:hover { background: #4f2d7a; }
h1, h2, .brand-title, .ee-question { color: #4b2a6b; }
.intro { background: #fffaf6; border-left-color: #e07b2c; }
.group, .content, .album-card, .lv-card, .ee-game { border-color: #e2cfe9; }
.crumbs a { color: #7a3fa8; }
.site-footer { border-top-color: #cdb4d9; color: #3f2456; }
.site-footer a { color: #3f2456; }
.site-footer a:hover { color: #241434; }
.lw-archiv-links a strong { color: #4b2a6b; }
.lw-archiv-links a.active { background: #6b3fa0; border-color: #4f2d7a; box-shadow: 0 2px 0 #4f2d7a; }

/* ---- Teile, die es nur im Halloween-Design gibt (Markup in lib/views.js) ---- */
.nur-halloween { display: revert; }
.nicht-halloween { display: none !important; }

/* Figuren neben den Tafeln: Gespenst schwebt, Kürbis leuchtet, Fledermaus flattert – blinzeln über blink.js */
.mascot.hw-geist { animation: hw-schweben 4.2s ease-in-out infinite alternate; }
.mascot.hw-kuerbis { filter: drop-shadow(0 0 12px rgba(255, 170, 60, .55)); }

/* ---- 1×1-Spiel: Dämmerungshimmel mit Mond, lila Wolken, Fledermäusen; Kürbisse statt Fliegenpilze, Gespenst im Wald ---- */
.ee-stage { background: linear-gradient(180deg, #4f4080 0%, #8a6aa8 34%, #d792a2 62%, #f2b26c 82%); }
.ee-sky .himmel-sonne, .ee-forest .pilz { display: none; }
.wolke-a { stop-color: #c7bedb; } .wolke-b { stop-color: #9a8fb9; } .wolke-c { stop-color: #6f6596; }
.hw-flug { animation: hw-flug 24s linear infinite; }
.hw-flug2 { animation-duration: 31s; animation-delay: -12s; }
@keyframes hw-flug {
  0% { transform: translate(-60px, 0); } 25% { transform: translate(200px, -8px); } 50% { transform: translate(420px, 6px); }
  75% { transform: translate(640px, -6px); } 100% { transform: translate(860px, 0); }
}
.hw-wald-geist svg { animation: hw-schweben 3.6s ease-in-out infinite alternate; }

/* ---- Flügel, Arme, Schwanz, Glut: Bewegungen innerhalb der Zeichnungen ---- */
.hw-fluegel-l, .hw-fluegel-r { transform-box: view-box; animation: hw-flattern-l .45s ease-in-out infinite alternate; }
.hw-fluegel-l { transform-origin: 50px 60px; }
.hw-fluegel-r { transform-origin: 70px 60px; animation-name: hw-flattern-r; }
@keyframes hw-flattern-l { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }
@keyframes hw-flattern-r { from { transform: rotate(14deg); } to { transform: rotate(-10deg); } }
.mascot .hw-fluegel-l, .mascot .hw-fluegel-r { animation-duration: 1.4s; }   /* neben der Tafel ruhiger */
.hw-winken { transform-box: fill-box; transform-origin: 0% 60%; animation: hw-winken 1.3s ease-in-out infinite alternate; }
@keyframes hw-winken { from { transform: rotate(-12deg); } to { transform: rotate(16deg); } }
.hw-winken-arm { transform-box: view-box; transform-origin: 76px 74px; animation: hw-winken-arm 1.1s ease-in-out infinite alternate; }
@keyframes hw-winken-arm { from { transform: rotate(-14deg); } to { transform: rotate(12deg); } }
.hw-schwanz { transform-box: view-box; transform-origin: 78px 104px; animation: hw-schwanz 2.8s ease-in-out infinite alternate; }
@keyframes hw-schwanz { from { transform: rotate(-9deg); } to { transform: rotate(7deg); } }
.hw-glut { animation: hw-glut 2.2s ease-in-out infinite alternate; }
@keyframes hw-glut { from { opacity: .55; } to { opacity: 1; } }
@keyframes hw-schweben { from { transform: translateY(0); } to { transform: translateY(-9px); } }

/* ---- Gestalten im Seitenhintergrund (public/gestalten.js) ---- */
.hw-gestalten { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hw-figur { position: absolute; width: var(--w); transform: translate(-50%, -50%); }
/* Ist der Bildschirm schmaler, liegen Figuren auch hinter Überschriften und Fußzeile – dann blasser */
@media (max-width: 1199px) { .hw-figur { opacity: .55; } .hw-mond { opacity: .8; } }
.hw-figur .hw-bild { display: block; width: 100%; height: auto; overflow: visible; }
.hw-figur .m-eye { transform-box: fill-box; transform-origin: center; }
.hw-figur .hw-bild.blink .m-eye { animation: m-blink .22s ease-in-out; }
.hw-schweben .hw-bild { animation: hw-schweben 4.4s ease-in-out infinite alternate; }
.hw-langsam .hw-bild { animation-duration: 6.2s; }
.hw-spaet .hw-bild { animation-delay: -2.3s; }
.hw-leuchten .hw-bild { filter: drop-shadow(0 0 14px rgba(255, 170, 60, .6)); }
.hw-mond .hw-bild { filter: drop-shadow(0 0 22px rgba(255, 240, 190, .8)); animation: hw-mondschein 6s ease-in-out infinite alternate; }
@keyframes hw-mondschein { from { filter: drop-shadow(0 0 14px rgba(255, 240, 190, .55)); } to { filter: drop-shadow(0 0 30px rgba(255, 240, 190, .95)); } }
.hw-stern .hw-bild { animation: hw-funkeln 2.6s ease-in-out infinite alternate; }
@keyframes hw-funkeln { from { transform: scale(.7) rotate(-8deg); opacity: .55; } to { transform: scale(1.05) rotate(6deg); opacity: 1; } }
.hw-bg-flug .hw-bild { animation: hw-bg-flug 9s ease-in-out infinite alternate; }
.hw-bg-flug.hw-langsam .hw-bild { animation-duration: 13s; }
@keyframes hw-bg-flug { 0% { transform: translate(-30px, 0); } 50% { transform: translate(10px, -14px); } 100% { transform: translate(40px, 6px); } }

/* Menü-Eichhörnchen fliegt auf dem Hexenbesen (public/squirrel.js, Effekt „besenflug“): Besen, Hut und Funken einblenden */
.squirrel.besen .sq-besen, .squirrel.besen .sq-besen-hut { display: inline; }
.squirrel.besen .sq-schatten { display: none; }
/* im Flug wippt der Schwanz ruhig mit – Drehpunkt am Schwanzansatz (unten rechts der Schwanzform) */
.squirrel.besen .sq-tail { transform-box: fill-box; transform-origin: 100% 100%; animation: hw-schwanz-flug 1.3s ease-in-out infinite; }
@keyframes hw-schwanz-flug { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(8deg); } }
.squirrel.besen .sq-funken circle { animation: hw-funken .5s ease-in-out infinite alternate; }
.squirrel.besen .sq-funken circle:nth-child(2n) { animation-delay: -.25s; }
@keyframes hw-funken { from { opacity: .2; } to { opacity: 1; } }

/* Fledermäuse, die ab und zu durch die Kopfzeile fliegen (public/gestalten.js); über den Menükacheln, aber nicht anklickbar */
.hw-menu-flug { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.hw-menu-fledermaus { position: absolute; left: 0; }
.hw-menu-fledermaus .hw-bild { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 2px rgba(40, 20, 60, .25)); }
.hw-menu-fledermaus .hw-fluegel-l, .hw-menu-fledermaus .hw-fluegel-r { animation-duration: .38s; }

@media (prefers-reduced-motion: reduce) {
  .bokeh, .mascot.hw-geist, .hw-flug, .hw-wald-geist svg, .hw-fluegel-l, .hw-fluegel-r, .hw-winken, .hw-winken-arm,
  .hw-schwanz, .hw-glut, .hw-figur .hw-bild, .squirrel.besen .sq-funken circle, .squirrel.besen .sq-tail { animation: none !important; }
}