/* Karriere — seiteneigene Ergänzungen (nach site.css) */
.kr-band-aktion { margin: 1.6rem 0 0; }
.kr-team { margin: 0; }
.kr-team-bild { aspect-ratio: 600 / 569; }
.kr-team figcaption { margin-top: .7rem; font-size: .92rem; color: var(--muted); }
.prosa h3 { margin: 1.6rem 0 .6rem; }

/* ── „Ein Platz an Bord" — Bühnen-Szene (.bs-*, gemeinsames Muster aus site.css) ─────────────
   Ebenen: Himmel (.kr-himmel) bis zum Horizont · Meer (.kr-see) darunter · Objekt (.kr-deck:
   Arche am Anleger, Kaimauer, Gangway, sechs Crew-Plätze, vordere Wellen) · Tafel rechts.
   Der Horizont liegt immer auf Kaihöhe des Objekts (viewBox-y 448 von 700):
   Desktop  = 50svh + (0,64 − 0,46) × Objekthöhe = 50svh + --bs-bw × 0,126
   Mobil    = 5.5rem + 0,64 × Objekthöhe        = 5.5rem + --bs-bw × 0,448
   Szene und Ablauf: .nomad/werkzeug/karriere_szene.py + assets/seiten/karriere.js. */
.kr-scrolly { --bs-bw: min(60vw, 118svh); --bs-ar: 1000 / 700; --kr-horizont: calc(50svh + var(--bs-bw) * .126); background: #1A808E; }
.kr-scrolly .bs-szene > .kr-himmel { top: 0; bottom: auto; height: calc(var(--kr-horizont) + 2px); }
.kr-scrolly .bs-szene > .kr-see { top: var(--kr-horizont); bottom: 0; height: calc(100% - var(--kr-horizont)); }
.kr-szene-aktion { margin: .9rem 0 0; }
.kr-scrolly .schritt-text a { display: inline-block; padding: 13px 4px; margin: -13px 0; }
.kr-szene-aktion .knopf { width: 100%; justify-content: center; }

/* Dauerschleifen (alle über --tempo; Wolken/Wellen laufen je exakt eine Kachel) */
.krz-wolken-fern  { animation: krz-zug calc(170s * var(--tempo)) linear infinite; }
.krz-wolken-mitte { animation: krz-zug calc(115s * var(--tempo)) linear infinite; }
.krz-wolken-nah   { animation: krz-zug calc(80s * var(--tempo)) linear infinite; }
@keyframes krz-zug { from { transform: translateX(0); } to { transform: translateX(-1600px); } }
.krz-strahlen { animation: krz-dreh calc(100s * var(--tempo)) linear infinite; }
@keyframes krz-dreh { to { transform: rotate(360deg); } }
.krz-lauf { animation: krz-zug calc(var(--lauf, 20s) * var(--tempo)) linear infinite; }
.krz-lauf-0 { --lauf: 70s; } .krz-lauf-1 { --lauf: 52s; } .krz-lauf-2 { --lauf: 40s; }
.krz-lauf-3 { --lauf: 30s; } .krz-lauf-4 { --lauf: 22s; } .krz-lauf-5 { --lauf: 16s; }
.krz-vlauf { animation: krz-vzug calc(var(--lauf, 10s) * var(--tempo)) linear infinite; }
.krz-vlauf-0 { --lauf: 11s; } .krz-vlauf-1 { --lauf: 8.5s; } .krz-vlauf-2 { --lauf: 6.8s; }
@keyframes krz-vzug { from { transform: translateX(0); } to { transform: translateX(-800px); } }
.krz-hub { animation: krz-hub calc(var(--hub-t, 5s) * var(--tempo)) var(--ease-in-out) infinite alternate; }
.krz-hub-0 { --hub-t: 6.2s; --hub: 1.5px; } .krz-hub-1 { --hub-t: 5.6s; --hub: 2.5px; animation-delay: -1.3s; }
.krz-hub-2 { --hub-t: 5s; --hub: 3.5px; animation-delay: -2.1s; } .krz-hub-3 { --hub-t: 4.6s; --hub: 5px; animation-delay: -.7s; }
.krz-hub-4 { --hub-t: 4.2s; --hub: 7px; animation-delay: -2.8s; } .krz-hub-5 { --hub-t: 3.8s; --hub: 9px; animation-delay: -1.6s; }
.krz-vhub-0 { --hub-t: 3.4s; --hub: 3px; animation-delay: -.4s; } .krz-vhub-1 { --hub-t: 3s; --hub: 4px; animation-delay: -1.9s; }
.krz-vhub-2 { --hub-t: 2.7s; --hub: 5px; animation-delay: -1.1s; }
@keyframes krz-hub { from { transform: translateY(calc(var(--hub) * -1)); } to { transform: translateY(var(--hub)); } }
.krz-segler { animation: krz-hub calc(4.4s * var(--tempo)) var(--ease-in-out) infinite alternate; --hub: 1.5px; }
.krz-moewen { animation: krz-moewen calc(24s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes krz-moewen { from { transform: translate(-50px, 8px); } to { transform: translate(70px, -12px); } }
.krz-moewe { transform-box: fill-box; transform-origin: 50% 100%; animation: krz-fluegel calc(1.5s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes krz-fluegel { from { transform: scaleY(1); } to { transform: scaleY(.5); } }
.krz-funke { animation: krz-funkeln calc(3.2s * var(--tempo)) var(--ease-in-out) infinite alternate; }
.krz-funke-1 { animation-delay: -1.1s; } .krz-funke-2 { animation-delay: -2.2s; }
@keyframes krz-funkeln { from { opacity: .12; } to { opacity: .9; } }
/* Am Objekt: das Schiff wiegt sich, die Flagge weht, der Monitor zeichnet, die Flamme flackert */
.kr-deck .kr-schiff { animation: kr-schiff calc(4.8s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes kr-schiff { from { transform: translateY(-1.4px); } to { transform: translateY(1.6px); } }
.kr-deck .kr-tuch { transform-box: fill-box; transform-origin: 0 50%; animation: kr-tuch calc(2.6s * var(--tempo)) var(--ease-in-out) infinite; }
@keyframes kr-tuch { 0%, 100% { transform: skewY(-3deg) scaleX(1); } 50% { transform: skewY(3deg) scaleX(.93); } }
.kr-deck .kr-kurve { animation: kr-kurve calc(1.6s * var(--tempo)) linear infinite; }
@keyframes kr-kurve { from { transform: translateX(0); } to { transform: translateX(-16px); } }
.kr-deck .kr-flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: kr-flamme calc(.9s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes kr-flamme { from { transform: scale(.9, .94); } to { transform: scale(1.06, 1.08); } }
.kr-deck .kr-kai-licht { animation: krz-funkeln calc(5s * var(--tempo)) var(--ease-in-out) infinite alternate; }

/* Dunkelmodus: Abendhimmel, Szene gedimmt — Schiff, Fenster und Laternen bleiben hell */
html.dark .kr-scrolly { background: #0A2E36; }
html.dark .kr-scrolly .krz-h1 { stop-color: #0B2530; }
html.dark .kr-scrolly .krz-h2 { stop-color: #1B4656; }
html.dark .kr-scrolly .krz-h3 { stop-color: #5B6F7A; }
html.dark .kr-scrolly .krz-w1 { stop-color: #2B6B78; }
html.dark .kr-scrolly .krz-w2 { stop-color: #164E5A; }
html.dark .kr-scrolly .krz-w3 { stop-color: #0A2E36; }
html.dark .kr-scrolly .krz-sonne { opacity: .3; }
html.dark .kr-scrolly .krz-morgen { opacity: .1 !important; }
html.dark .kr-scrolly .bs-szene::after { content: ""; position: absolute; inset: 0; background: rgb(6 28 34 / .35); }

/* Tablet/Handy: Deck groß und etwas nach links gerückt (Crew-Plätze mittig), Tafel unten */
@media (max-width: 1023px) {
  .kr-scrolly { --bs-bw: min(150vw, 88svh); --kr-horizont: calc(5.5rem + var(--bs-bw) * .448); }
  .kr-scrolly .bs-objekt { left: calc(50% - var(--bs-bw) * .42); translate: 0 0; }
  .kr-szene-aktion { margin-top: .6rem; }
}

/* Reduced motion: dämpfen, nicht abschalten (Tempo kommt über --tempo) */
@media (prefers-reduced-motion: reduce) {
  @keyframes krz-hub { from { transform: translateY(calc(var(--hub) * -.35)); } to { transform: translateY(calc(var(--hub) * .35)); } }
  @keyframes kr-schiff { from { transform: translateY(-.5px); } to { transform: translateY(.5px); } }
  @keyframes kr-tuch { 0%, 100% { transform: skewY(-1deg) scaleX(1); } 50% { transform: skewY(1deg) scaleX(.98); } }
}

.kr-initiativ { margin: 1.8rem 0 0; color: var(--muted); }
.kr-initiativ a { color: var(--tuerkis-tief); font-weight: 600; }

.kr-zitat { margin: 1.8rem 0 0; padding: 1.3rem 1.5rem; border-left: 4px solid var(--tuerkis); background: var(--card); border-radius: 0 var(--r) var(--r) 0; box-shadow: var(--shadow-sm); }
.kr-zitat p { margin: 0; font-family: var(--font-head); font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.4; color: var(--fg); }
.kr-zitat cite { display: block; margin-top: .6rem; font-style: normal; font-size: .9rem; color: var(--muted); }
.kr-zukunft-aktion { margin-top: 1.6rem; }