/* 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); } }