/* Pflegeleitbild — seiteneigene Gestaltung (nach site.css geladen)
   Szene „Der Leuchtturm" im Bühnen-Muster (.bs, site.css): Abendhimmel (.lt-himmel-svg), Meer (.lt-see-svg),
   Leuchtturm groß links mit Fels, Wärterhaus, Steg und Booten (.bs-objekt), vordere Wellen (.bs-vorn),
   Tafel rechts. Erzeugt von .nomad/werkzeug/leuchtturm_szene.py, Ablauf in assets/seiten/pflegeleitbild.js.
   Licht oben links (Mond). Nichts ist per CSS versteckt: ohne GSAP steht das fertige Bild. */

.scrolly-leuchtturm { --bs-bw: min(60vw, 118svh); --bs-ar: 900 / 700; --wl: 16svh; --horizont: 56svh; background: #0B3A45; }
/* Wasserlinie im Objekt: viewBox-y 580 von 700 → 120/900 = 0,1333 × Breite unter der Linie */
.scrolly-leuchtturm .bs-objekt { top: auto; translate: none; bottom: calc(var(--wl) - var(--bs-bw) * .1333); }
.scrolly-leuchtturm .bs-szene > .lt-himmel-svg { inset: 0 0 auto 0; height: calc(var(--horizont) + 2px); }
.scrolly-leuchtturm .bs-szene > .lt-see-svg { inset: var(--horizont) 0 auto 0; height: calc(100% - var(--horizont)); }
.scrolly-leuchtturm .bs-vorn { top: auto; height: calc(var(--wl) + 4svh); }
.sp-leuchtturm text { font-family: var(--font-head); }

/* Dauerschleifen */
.ltz-wolken-fern  { animation: ltz-zug calc(170s * var(--tempo)) linear infinite; }
.ltz-wolken-mitte { animation: ltz-zug calc(115s * var(--tempo)) linear infinite; }
.ltz-wolken-nah   { animation: ltz-zug calc(80s * var(--tempo)) linear infinite; }
@keyframes ltz-zug { from { transform: translateX(0); } to { transform: translateX(-1600px); } }
.ltz-lauf { animation: ltz-zug calc(var(--lauf, 20s) * var(--tempo)) linear infinite; }
.ltz-lauf-0 { --lauf: 64s; } .ltz-lauf-1 { --lauf: 48s; } .ltz-lauf-2 { --lauf: 36s; }
.ltz-lauf-3 { --lauf: 27s; } .ltz-lauf-4 { --lauf: 20s; } .ltz-lauf-5 { --lauf: 15s; }
.ltz-vlauf-0 { --lauf: 12s; } .ltz-vlauf-1 { --lauf: 9.5s; } .ltz-vlauf-2 { --lauf: 7.5s; }
.ltz-hub { animation: ltz-hub calc(var(--hub-t, 5s) * var(--tempo)) var(--ease-in-out) infinite alternate; }
.ltz-hub-0 { --hub-t: 6.2s; --hub: 1.5px; } .ltz-hub-1 { --hub-t: 5.6s; --hub: 2.5px; animation-delay: -1.3s; }
.ltz-hub-2 { --hub-t: 5s; --hub: 3.5px; animation-delay: -2.1s; } .ltz-hub-3 { --hub-t: 4.6s; --hub: 5px; animation-delay: -.7s; }
.ltz-hub-4 { --hub-t: 4.2s; --hub: 7px; animation-delay: -2.8s; } .ltz-hub-5 { --hub-t: 3.8s; --hub: 9px; animation-delay: -1.6s; }
.ltz-vhub-0 { --hub-t: 3.6s; --hub: 10px; animation-delay: -.4s; } .ltz-vhub-1 { --hub-t: 3.2s; --hub: 13px; animation-delay: -1.9s; }
.ltz-vhub-2 { --hub-t: 2.9s; --hub: 16px; animation-delay: -1.1s; }
@keyframes ltz-hub { from { transform: translateY(calc(var(--hub) * -1)); } to { transform: translateY(var(--hub)); } }
.ltz-stern { animation: ltz-funkeln calc(3.8s * var(--tempo)) var(--ease-in-out) infinite alternate; }
.ltz-stern-1 { animation-delay: -1.3s; } .ltz-stern-2 { animation-delay: -2.6s; }
.ltz-funke { animation: ltz-funkeln calc(3.4s * var(--tempo)) var(--ease-in-out) infinite alternate; }
.ltz-funke-1 { animation-delay: -1.1s; } .ltz-funke-2 { animation-delay: -2.2s; }
@keyframes ltz-funkeln { from { opacity: .15; } to { opacity: .9; } }
.ltz-moewen { animation: ltz-moewen calc(26s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes ltz-moewen { from { transform: translate(-40px, 6px); } to { transform: translate(60px, -10px); } }
.ltz-moewe { transform-box: fill-box; transform-origin: 50% 100%; animation: ltz-fluegel calc(1.6s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes ltz-fluegel { from { transform: scaleY(1); } to { transform: scaleY(.55); } }
/* Leuchtfeuer atmet, Lichthof pulsiert, Rauch steigt, Boote wiegen, Gischt schäumt */
.sp-leuchtturm .lt-kegel { animation: lt-atem calc(4.8s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes lt-atem { from { opacity: .78; } to { opacity: 1; } }
.sp-leuchtturm .lt-schein { transform-box: fill-box; transform-origin: 50% 50%; animation: lt-schein calc(3.2s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes lt-schein { from { transform: scale(.92); opacity: .75; } to { transform: scale(1.08); opacity: 1; } }
.sp-leuchtturm [class^="lt-rauch-"] { transform-box: fill-box; transform-origin: 50% 50%; animation: lt-rauch calc(6s * var(--tempo)) ease-out infinite; }
.sp-leuchtturm .lt-rauch-1 { animation-delay: -2s; } .sp-leuchtturm .lt-rauch-2 { animation-delay: -4s; }
@keyframes lt-rauch { 0% { transform: translate(0, 10px) scale(.6); opacity: 0; } 25% { opacity: .7; } 100% { transform: translate(14px, -26px) scale(1.4); opacity: 0; } }
.sp-leuchtturm .lt-segler-wiegen { transform-box: fill-box; transform-origin: 50% 100%; animation: lt-wiegen calc(4.4s * var(--tempo)) var(--ease-in-out) infinite; }
.sp-leuchtturm .lt-boot-wiegen { transform-box: fill-box; transform-origin: 50% 100%; animation: lt-wiegen calc(5.2s * var(--tempo)) var(--ease-in-out) -1.4s infinite; }
@keyframes lt-wiegen { 0%, 100% { transform: rotate(-1.6deg) translateY(0); } 50% { transform: rotate(1.4deg) translateY(-2.5px); } }
.lt-gischt { transform-box: fill-box; transform-origin: 50% 100%; animation: lt-gischt calc(3.1s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes lt-gischt { from { transform: scale(.8); opacity: .5; } to { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  /* dämpfen, nicht abschalten: Tempo kommt aus --tempo (2.5), hier kleinere Ausschläge */
  .sp-leuchtturm .lt-segler-wiegen, .sp-leuchtturm .lt-boot-wiegen { animation-name: lt-wiegen-rm; }
  .ltz-moewen { animation-name: ltz-moewen-rm; }
}
@keyframes lt-wiegen-rm { 0%, 100% { transform: rotate(-.5deg); } 50% { transform: rotate(.5deg) translateY(-1px); } }
@keyframes ltz-moewen-rm { from { transform: translate(-12px, 2px); } to { transform: translate(18px, -3px); } }

/* Dunkelmodus: Nacht statt Abend */
html.dark .scrolly-leuchtturm .ltz-h1 { stop-color: #06161D; }
html.dark .scrolly-leuchtturm .ltz-h2 { stop-color: #0D2E3A; }
html.dark .scrolly-leuchtturm .ltz-h3 { stop-color: #33505A; }
html.dark .scrolly-leuchtturm .ltz-h4 { stop-color: #6D6660; }
html.dark .scrolly-leuchtturm .ltz-w1 { stop-color: #33606A; }
html.dark .scrolly-leuchtturm .ltz-w2 { stop-color: #123F4A; }
html.dark .scrolly-leuchtturm .ltz-w3 { stop-color: #051C22; }
html.dark .scrolly-leuchtturm [class^="ltz-wolken"] { opacity: .55; }

/* Tablet/Handy: Leuchtturm oben groß, Tafel als Karte unten (site.css), Horizont höher */
@media (max-width: 1023px) {
  .scrolly-leuchtturm { --bs-bw: min(94vw, 62svh); --wl: 42svh; --horizont: 40svh; }
  .scrolly-leuchtturm .bs-objekt { left: 50%; translate: -50% 0; }
  .scrolly-leuchtturm .bs-vorn { height: calc(var(--wl) + 2svh); }
}

/* Leitbild-Baum der Altseite */
.leitbild-baum { margin: 0 0 2.5rem; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: #E4F1F7; }
.leitbild-baum img { width: 100%; height: auto; display: block; }
.prosa h3.leitbild-zwischen { margin: 1.8rem 0 .6rem; }
.motto { margin: 1.2rem 0; padding: 1.1rem 1.4rem; border-left: 4px solid var(--tuerkis); border-radius: 0 var(--r) var(--r) 0; background: var(--surface); font-family: var(--font-head); font-size: 1.2rem; color: var(--fg); max-width: var(--mass); }

.leitbild-baum-wrap { margin-top: 3rem; } .leitbild-baum-wrap .leitbild-baum { margin: 0; }