/* leistung-beratung — Seitenstil, geladen NACH site.css.
   Bühnen-Szene „Der Pflegegrad-Kompass" im gemeinsamen .bs-Muster (site.css): Esszimmer über die volle Breite,
   groß links der Esstisch mit Beraterin und Familie, in der Mitte der plastische Kompass.
   Nichts wird per CSS vorversteckt (Fail-Safe: ohne JS steht das fertige Bild, Zeiger auf 58 Punkten).
   Der Pflegegrad-Schnellcheck (#pg-check) hat seine Regeln in site.css — hier nicht berührt.
   Dauerschleifen laufen über --tempo (reduced-motion: langsamer, nicht aus). */
.scrolly-kompass { --bs-ar: 800 / 560; background: #A9835C; }
.scrolly-kompass .scrolly-buehne { overflow: hidden; overflow: clip; }   /* Boden/Objekt reichen über die Bühne hinaus — nie seitlich scrollen */
@media (max-width: 1023px) {
  .scrolly-kompass { --bs-bw: min(104vw, 74svh); }
  .scrolly-kompass .bs-szene > svg { height: calc((5.5rem + min(104vw, 74svh) * .546) * 1.38); }
}

/* Beschriftungen am Kompass (Hausschrift) */
.sp-kompass text { font-family: var(--font-body); }
.sp-kompass .bk-grad-zahl { font-family: var(--font-head); font-weight: 700; font-size: 18px; fill: #0A2E36; }
.sp-kompass .bk-schwelle-wert { font-weight: 700; font-size: 11px; fill: #B8442C; }
.sp-kompass .bk-bereich { font-weight: 600; font-size: 12.5px; fill: #0A2E36; paint-order: stroke; stroke: rgb(255 255 255 / .75); stroke-width: 3px; stroke-linejoin: round; }
.sp-kompass .bk-anzeige-text { font-family: var(--font-head); font-weight: 700; font-size: 14px; fill: #FFFFFF; }
.sp-kompass .bk-stempel-text { font-weight: 700; font-size: 8px; fill: #E4664F; }

/* Objekt: Nadel zittert fein (Dämpfung), Lichtstreif wandert übers Glas */
.sp-kompass .bk-zeiger-zitter { transform-origin: 400px 250px; animation: bk-zittern calc(.9s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes bk-zittern { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }
.sp-kompass .bk-streif { animation: bk-streif calc(7s * var(--tempo)) var(--ease-in-out) infinite; }
@keyframes bk-streif { 0%, 55% { transform: translateX(-80px); } 85%, 100% { transform: translateX(380px); } }

/* Szene: Lampe pendelt, Vorhang atmet, Wolke zieht, Staub im Licht, Pflanze */
.bkz-lampe { animation: bkz-pendeln calc(5.5s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes bkz-pendeln { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
.bkz-vorhang { animation: bkz-vorhang calc(6.5s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes bkz-vorhang { from { transform: skewX(-1.2deg); } to { transform: skewX(1.3deg); } }
.bkz-wolke { animation: bkz-wolke calc(38s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes bkz-wolke { from { transform: translateX(-50px); } to { transform: translateX(80px); } }
.bkz-korn { animation: bkz-korn calc(7.5s * var(--tempo)) var(--ease-in-out) infinite alternate; }
.bkz-korn-1 { animation-delay: -1.7s; } .bkz-korn-2 { animation-delay: -3.1s; } .bkz-korn-3 { animation-delay: -4.4s; } .bkz-korn-4 { animation-delay: -2.4s; }
@keyframes bkz-korn { from { transform: translate(-10px, 8px); opacity: .2; } to { transform: translate(14px, -18px); opacity: .9; } }
.bkz-pflanze { animation: bkz-wiegen calc(8s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes bkz-wiegen { from { transform: rotate(-1.1deg); } to { transform: rotate(1.3deg); } }

/* Dunkelmodus: Abendstimmung im Zimmer */
html.dark .bkz-nacht { opacity: .4; }