/* Jahreszeiten (automatisch nach Datum, siehe js/jahreszeit.js). Nur die Bilder wechseln dezent:
   Frühling März bis Mai, Sommer Juni bis August (die Bilder aus style.css), Herbst September bis November,
   Winter Dezember bis Februar. Erzeugt mit werkzeug/jahreszeiten_css.py, Bilder mit werkzeug/jahreszeiten.py. */
/* fruehling */
.jz-fruehling .held-ebene--himmel { background-image: url("../bilder/hintergrund/held-fruehling-weit-himmel.svg"); }
.jz-fruehling .held-ebene--alpen { background-image: url("../bilder/hintergrund/held-fruehling-weit-alpen.svg"); }
.jz-fruehling .held-ebene--land { background-image: url("../bilder/hintergrund/held-fruehling-weit-land.svg"); }
.jz-fruehling .held-ebene--wiese { background-image: url("../bilder/hintergrund/held-fruehling-weit-wiese.svg"); }
.jz-fruehling body::before { background-image: url("../bilder/hintergrund/tag-fruehling-weit.svg"); }
.jz-fruehling .v-seite::before, .jz-fruehling .v-anmeldeseite::before { background-image: url("../bilder/hintergrund/held-fruehling-weit-wiese.svg"), url("../bilder/hintergrund/held-fruehling-weit-land.svg"), url("../bilder/hintergrund/held-fruehling-weit-alpen.svg"), url("../bilder/hintergrund/held-fruehling-weit-himmel.svg"); }
@media (max-aspect-ratio: 4/5) {
  .jz-fruehling .held-ebene--himmel { background-image: url("../bilder/hintergrund/held-fruehling-hoch-himmel.svg"); }
  .jz-fruehling .held-ebene--alpen { background-image: url("../bilder/hintergrund/held-fruehling-hoch-alpen.svg"); }
  .jz-fruehling .held-ebene--land { background-image: url("../bilder/hintergrund/held-fruehling-hoch-land.svg"); }
  .jz-fruehling .held-ebene--wiese { background-image: url("../bilder/hintergrund/held-fruehling-hoch-wiese.svg"); }
  .jz-fruehling body::before { background-image: url("../bilder/hintergrund/tag-fruehling-hoch.svg"); }
  .jz-fruehling .v-anmeldeseite::before { background-image: url("../bilder/hintergrund/held-fruehling-hoch-wiese.svg"), url("../bilder/hintergrund/held-fruehling-hoch-land.svg"), url("../bilder/hintergrund/held-fruehling-hoch-alpen.svg"), url("../bilder/hintergrund/held-fruehling-hoch-himmel.svg"); }
}
@media (max-width: 700px) { .jz-fruehling .v-seite::before { background-image: url("../bilder/hintergrund/held-fruehling-hoch-wiese.svg"), url("../bilder/hintergrund/held-fruehling-hoch-land.svg"), url("../bilder/hintergrund/held-fruehling-hoch-alpen.svg"), url("../bilder/hintergrund/held-fruehling-hoch-himmel.svg"); } }
/* herbst */
.jz-herbst .held-ebene--himmel { background-image: url("../bilder/hintergrund/held-herbst-weit-himmel.svg"); }
.jz-herbst .held-ebene--alpen { background-image: url("../bilder/hintergrund/held-herbst-weit-alpen.svg"); }
.jz-herbst .held-ebene--land { background-image: url("../bilder/hintergrund/held-herbst-weit-land.svg"); }
.jz-herbst .held-ebene--wiese { background-image: url("../bilder/hintergrund/held-herbst-weit-wiese.svg"); }
.jz-herbst body::before { background-image: url("../bilder/hintergrund/tag-herbst-weit.svg"); }
.jz-herbst .v-seite::before, .jz-herbst .v-anmeldeseite::before { background-image: url("../bilder/hintergrund/held-herbst-weit-wiese.svg"), url("../bilder/hintergrund/held-herbst-weit-land.svg"), url("../bilder/hintergrund/held-herbst-weit-alpen.svg"), url("../bilder/hintergrund/held-herbst-weit-himmel.svg"); }
@media (max-aspect-ratio: 4/5) {
  .jz-herbst .held-ebene--himmel { background-image: url("../bilder/hintergrund/held-herbst-hoch-himmel.svg"); }
  .jz-herbst .held-ebene--alpen { background-image: url("../bilder/hintergrund/held-herbst-hoch-alpen.svg"); }
  .jz-herbst .held-ebene--land { background-image: url("../bilder/hintergrund/held-herbst-hoch-land.svg"); }
  .jz-herbst .held-ebene--wiese { background-image: url("../bilder/hintergrund/held-herbst-hoch-wiese.svg"); }
  .jz-herbst body::before { background-image: url("../bilder/hintergrund/tag-herbst-hoch.svg"); }
  .jz-herbst .v-anmeldeseite::before { background-image: url("../bilder/hintergrund/held-herbst-hoch-wiese.svg"), url("../bilder/hintergrund/held-herbst-hoch-land.svg"), url("../bilder/hintergrund/held-herbst-hoch-alpen.svg"), url("../bilder/hintergrund/held-herbst-hoch-himmel.svg"); }
}
@media (max-width: 700px) { .jz-herbst .v-seite::before { background-image: url("../bilder/hintergrund/held-herbst-hoch-wiese.svg"), url("../bilder/hintergrund/held-herbst-hoch-land.svg"), url("../bilder/hintergrund/held-herbst-hoch-alpen.svg"), url("../bilder/hintergrund/held-herbst-hoch-himmel.svg"); } }
/* winter */
.jz-winter .held-ebene--himmel { background-image: url("../bilder/hintergrund/held-winter-weit-himmel.svg"); }
.jz-winter .held-ebene--alpen { background-image: url("../bilder/hintergrund/held-winter-weit-alpen.svg"); }
.jz-winter .held-ebene--land { background-image: url("../bilder/hintergrund/held-winter-weit-land.svg"); }
.jz-winter .held-ebene--wiese { background-image: url("../bilder/hintergrund/held-winter-weit-wiese.svg"); }
.jz-winter body::before { background-image: url("../bilder/hintergrund/tag-winter-weit.svg"); }
.jz-winter .v-seite::before, .jz-winter .v-anmeldeseite::before { background-image: url("../bilder/hintergrund/held-winter-weit-wiese.svg"), url("../bilder/hintergrund/held-winter-weit-land.svg"), url("../bilder/hintergrund/held-winter-weit-alpen.svg"), url("../bilder/hintergrund/held-winter-weit-himmel.svg"); }
@media (max-aspect-ratio: 4/5) {
  .jz-winter .held-ebene--himmel { background-image: url("../bilder/hintergrund/held-winter-hoch-himmel.svg"); }
  .jz-winter .held-ebene--alpen { background-image: url("../bilder/hintergrund/held-winter-hoch-alpen.svg"); }
  .jz-winter .held-ebene--land { background-image: url("../bilder/hintergrund/held-winter-hoch-land.svg"); }
  .jz-winter .held-ebene--wiese { background-image: url("../bilder/hintergrund/held-winter-hoch-wiese.svg"); }
  .jz-winter body::before { background-image: url("../bilder/hintergrund/tag-winter-hoch.svg"); }
  .jz-winter .v-anmeldeseite::before { background-image: url("../bilder/hintergrund/held-winter-hoch-wiese.svg"), url("../bilder/hintergrund/held-winter-hoch-land.svg"), url("../bilder/hintergrund/held-winter-hoch-alpen.svg"), url("../bilder/hintergrund/held-winter-hoch-himmel.svg"); }
}
@media (max-width: 700px) { .jz-winter .v-seite::before { background-image: url("../bilder/hintergrund/held-winter-hoch-wiese.svg"), url("../bilder/hintergrund/held-winter-hoch-land.svg"), url("../bilder/hintergrund/held-winter-hoch-alpen.svg"), url("../bilder/hintergrund/held-winter-hoch-himmel.svg"); } }

/* Dezent fallende Teilchen im Startbild: Schnee im Winter, Blätter im Herbst, Blüten im Frühling */
.jz-teilchen { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.jz-teilchen i { position: absolute; top: -4%; display: block; opacity: 0; will-change: transform, opacity;
  animation: jz-fallen var(--dauer, 18s) linear var(--verz, 0s) infinite; }
.jz-pause .jz-teilchen i, .jz-pause .jz-trecker, .jz-pause .jz-trecker * { animation-play-state: paused; }
/* vordere Ebene: vor Logo und Schrift, unter den Knöpfen */
.held-innen { position: relative; }
.held .aktionen { position: relative; z-index: 2; }
.jz-vorn { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.jz-teilchen--flocke i { width: calc(6px * var(--gr, 1)); height: calc(6px * var(--gr, 1)); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 42%, rgba(255, 255, 255, .5) 62%, rgba(255, 255, 255, 0) 72%); }
.jz-teilchen--blatt i { width: calc(31px * var(--gr, 1)); height: calc(31px * var(--gr, 1)); background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 1.5C17.5 5.5 19.5 12.5 12.6 21.6L12 23.5 11.4 21.6C4.5 12.5 6.5 5.5 12 1.5Z%22 fill=%22%23dd8a2e%22/%3E%3Cpath d=%22M12 4.5V23M12 10l-3.6-2.4M12 10l3.6-2.4M12 14.5l-4-2.4M12 14.5l4-2.4%22 fill=%22none%22 stroke=%22%23a65d1d%22 stroke-width=%22.9%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 1px rgba(80, 40, 10, .25));
  animation: jz-fallen var(--dauer, 18s) linear var(--verz, 0s) infinite, jz-wenden var(--wende, 3s) ease-in-out var(--verz, 0s) infinite alternate; }
.jz-teilchen--blatt i:nth-child(3n) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 1l1.7 5 3.4-1.6-.8 4.2 4.9-.7-2.5 3.7 3.4 1.5-4.9 1.6.8 3.1-5-1.4-.4 6.1h-1.2l-.4-6.1-5 1.4.8-3.1L2 13.1l3.4-1.5L2.9 7.9l4.9.7-.8-4.2 3.4 1.6Z%22 fill=%22%23c8452a%22/%3E%3Cpath d=%22M12 4.5V23M12 10l-3.6-2.4M12 10l3.6-2.4M12 14.5l-4-2.4M12 14.5l4-2.4%22 fill=%22none%22 stroke=%22%238e2f1c%22 stroke-width=%22.9%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
.jz-teilchen--blatt i:nth-child(3n + 1) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 1.5c2 1 1 3.4 3 3.9s.5 2.5 2 3.5-.6 2.5.5 4-1.6 2.5-1.6 4.1-2.7 2-3.9 5.5c-1.2-3.5-3.9-3.9-3.9-5.5S6.5 14.4 7.6 12.9 5.6 9.9 7.1 8.9s0-3 2-3.5 1-2.9 2.9-3.9Z%22 fill=%22%23e3a83f%22/%3E%3Cpath d=%22M12 4.5V23M12 10l-3.6-2.4M12 10l3.6-2.4M12 14.5l-4-2.4M12 14.5l4-2.4%22 fill=%22none%22 stroke=%22%23a8742a%22 stroke-width=%22.9%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
@keyframes jz-wenden { from { scale: 1 1; } to { scale: -.55 1; } }
.jz-teilchen--bluete i { width: calc(9px * var(--gr, 1)); height: calc(7px * var(--gr, 1)); border-radius: 60% 40% 60% 40%; background: #f8d7e3; }
.jz-teilchen--bluete i:nth-child(2n) { background: #fff6f9; }
@keyframes jz-fallen {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  10% { opacity: .85; }
  50% { transform: translate3d(var(--seite, 30px), 52vh, 0) rotate(calc(var(--dreh, 180deg) / 2)); }
  88% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(calc(var(--seite, 30px) * -.4), 104vh, 0) rotate(var(--dreh, 180deg)); }
}
@media (prefers-reduced-motion: reduce) { .jz-teilchen, .jz-hummeln { display: none; } }

/* Frühling: Hummeln (Position setzt js/jahreszeit.js) */
.jz-hummeln { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.jz-hummel { position: absolute; left: 0; top: 0; width: 14px; height: 10px; margin: -5px 0 0 -7px; will-change: transform; }
.jz-hummel b { position: absolute; inset: 0; border-radius: 52% 48% 46% 54%; box-shadow: inset 0 -2px 0 rgba(40, 30, 20, .22);
  background: linear-gradient(90deg, #f6eee0 0 18%, #2e2620 18% 34%, #f3c234 34% 56%, #2e2620 56% 72%, #f3c234 72% 100%); }
.jz-hummel b::after { content: ""; position: absolute; right: -3px; top: 2.5px; width: 5px; height: 5px; border-radius: 50%; background: #2e2620; }
.jz-hummel::before, .jz-hummel::after { content: ""; position: absolute; top: -5px; left: 3px; width: 7px; height: 7px; border-radius: 50% 50% 40% 40%;
  background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 .5px rgba(80, 90, 100, .25); transform-origin: 50% 100%; animation: jz-fluegel .08s linear infinite alternate; }
.jz-hummel::after { left: 6px; animation-delay: -.04s; }
@keyframes jz-fluegel { from { transform: scaleY(1) rotate(-8deg); } to { transform: scaleY(.3) rotate(6deg); } }
@media (max-width: 600px) { .jz-hummel { scale: .85; } }

/* Herbst: Trecker auf dem Blumenfeld vor dem Dorf, hinter ihm bleiben Stoppeln (Lage setzt js/jahreszeit.js) */
.jz-trecker { --dauer: 55s; position: absolute; height: 0; transform-origin: 0 0; pointer-events: none; animation: jz-zyklus var(--dauer) linear infinite; }
.jz-stoppeln { position: absolute; left: 0; top: calc(var(--dicke) * -.5); width: 100%; height: var(--dicke); transform-origin: 0 50%; opacity: .92; filter: blur(.5px);
  background: linear-gradient(180deg, transparent 0 6%, #c9a467 6% 30%, #a8834c 30% 36%, #c9a467 36% 62%, #a8834c 62% 68%, #c9a467 68% 94%, transparent 94%);
  animation: jz-ernten var(--dauer) linear infinite; }
.jz-fahrt { position: absolute; left: 0; top: 0; width: 100%; height: 0; animation: jz-fahren var(--dauer) linear infinite; }
.jz-wagen { position: absolute; left: calc(var(--gross) * -.97); bottom: calc(var(--dicke) * -.3); width: var(--gross); height: calc(var(--gross) * .667); animation: jz-ruckeln .7s ease-in-out infinite alternate; }
.jz-wagen svg { display: block; width: 100%; height: 100%; }
.jz-wagen i { position: absolute; left: 68%; top: 18%; width: 9%; height: 13%; border-radius: 50%; background: rgba(250, 244, 232, .75); opacity: 0; animation: jz-rauch 2.6s ease-out infinite; }
.jz-wagen i + i { animation-delay: -1.3s; }
@keyframes jz-zyklus { 0% { opacity: 0; } 4% { opacity: 1; } 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes jz-ernten { 0% { transform: scaleX(0); } 90%, 100% { transform: scaleX(1); } }
@keyframes jz-fahren { 0% { transform: translateX(0); } 90%, 100% { transform: translateX(100%); } }
@keyframes jz-ruckeln { from { transform: translateY(0); } to { transform: translateY(-.6px); } }
@keyframes jz-rauch { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: .8; } 100% { opacity: 0; transform: translate(-90%, -260%) scale(1.8); } }
.jz-trecker--still, .jz-trecker--still * { animation: none !important; }
.jz-trecker--still .jz-stoppeln { transform: scaleX(.45); }
.jz-trecker--still .jz-fahrt { transform: translateX(45%); }