/* ==========================================================================
   Guet gfunde · Scrollbühne «Fachkräfte finden» (leistungen.html)
   Motor: assets/js/bau.js setzt --t (0 bis 1) für jedes Element mit data-t.
   Kurzfilm in sieben Stationen: ein leerer Stuhl im Team, die Uhr der Überstunden,
   das Inserat erreicht nur wenige, Kampagnen erreichen die, die nicht suchen,
   Bewerbungen landen auf der Karriereseite, der Stuhl ist besetzt.
   Grosse Kreismaske wie bei rosarot.ch: Nacht am Anfang, Morgen am Schluss.
   ========================================================================== */
.bau--fk { height: 480vh; height: 480svh; }
.bau--fk .bau__buehne { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
@media (max-width: 860px) { .bau--fk .bau__buehne { grid-template-columns: 1fr; } }
.bau--fk .bau__station h1 { font-size: clamp(2rem, 1.1rem + 2.5vw, 3.7rem); max-width: 17ch; }
.bau--fk .bau__station .hero__note { margin-top: 1rem; }
.bau--fk .bau__szene { place-items: stretch; }
.bau--fk .bau__szene { position: relative; }
.fk__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-height: 82svh; margin: auto; overflow: visible; }

/* Nacht: Kreis mit Bild der Stadt vor der Dämmerung */
.fk-nacht { transform-box: view-box; transform-origin: 500px 450px; transform: scale(calc(1 - var(--t, 0))); opacity: calc(1 - var(--t, 0) * var(--t, 0)); }
.fk-nacht__grund { fill: var(--navy-900); }
.fk-nacht__bild { opacity: .55; }
.fk-nacht__schleier { fill: var(--navy-950); opacity: .55; }

/* Morgen: Kreis mit Sonnenaufgang */
.fk-tag__bild { opacity: .9; }
.fk-tag__schleier { fill: var(--amber-500); opacity: .28; mix-blend-mode: multiply; }

/* Team, Tisch, Stühle */
.fk-weg { transform-box: fill-box; transform-origin: 50% 60%; opacity: calc(1 - var(--t, 0)); transform: scale(calc(1 - var(--t, 0) * .22)); }
.fk-tisch { fill: var(--paper-2); }
.fk-lehne { fill: var(--navy-700); }
.fk-team1 .fk-person > * { fill: var(--paper); }
.fk-leer__linie { fill: none; stroke: var(--amber-500); stroke-width: 3; stroke-dasharray: 9 9; vector-effect: non-scaling-stroke; animation: fkLeer 1.6s linear infinite; }
@keyframes fkLeer { to { stroke-dashoffset: -36; } }

/* Müdigkeit: Köpfe sinken zur Lücke, Arbeit stapelt sich */
.fk-muede .fk-person circle { transform: translate(calc(var(--t, 0) * var(--neig, 0px)), calc(var(--t, 0) * 26px)); }
.fk-muede .fk-person path { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(calc(1 - var(--t, 0) * .08)); }
.fk-akte { fill: var(--amber-400); stroke: var(--navy-900); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 100%;
  opacity: clamp(0, calc(var(--t, 0) * 5 - var(--k)), 1); transform: translateY(calc(clamp(0, 1 - var(--t, 0) * 5 + var(--k), 1) * -36px)); }

/* Uhr der Überstunden */
.fk-uhr__blatt { fill: var(--paper); stroke: var(--amber-500); stroke-width: 4; }
.fk-uhr__strich { stroke: var(--navy-900); stroke-width: 4; stroke-linecap: round; }
.fk-uhr__std, .fk-uhr__min { stroke: var(--navy-900); stroke-linecap: round; transform-box: view-box; transform-origin: 500px 245px; }
.fk-uhr__std { stroke-width: 9; transform: rotate(calc(var(--t, 0) * 300deg)); }
.fk-uhr__min { stroke-width: 6; transform: rotate(calc(var(--t, 0) * 3600deg)); }

/* Menge: viele gute Fachkräfte, die meisten suchen nicht */
.fk-menge { opacity: var(--t, 0); transform-box: fill-box; transform-origin: center; transform: scale(calc(1.12 - var(--t, 0) * .12)); }
.fk-menge__grau > * { fill: var(--navy-600); }
.fk-an { opacity: var(--t, 0); transform-box: fill-box; transform-origin: 50% 100%; transform: scale(calc(.6 + var(--t, 0) * .4)); }
.fk-an > * { fill: var(--amber-500); }

/* Inserat und schmaler Kegel */
.fk-inserat { opacity: var(--t, 0); }
.fk-kegel { fill: var(--amber-500); opacity: .42; transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(var(--t, 0)); }
.fk-blatt rect { fill: var(--paper); stroke: var(--navy-900); stroke-width: 2; }
.fk-blatt text { font: 700 22px var(--font-sans); fill: var(--navy-900); }
.fk-blatt line { stroke: rgba(10, 10, 10,.25); stroke-width: 7; stroke-linecap: round; }

/* Kampagnen: Wellen aus der Standortnadel */
.fk-quelle { opacity: var(--t, 0); }
.fk-welle { fill: none; stroke: var(--amber-500); stroke-width: 3; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center; transform: scale(var(--t, 0)); opacity: calc((1 - var(--t, 0)) * 1.6); }
.fk-pin path { fill: var(--amber-500); }
.fk-pin circle { fill: var(--navy-900); }

/* Karriereseite im Browserrahmen */
.fk-browser { opacity: var(--t, 0); transform-box: fill-box; transform-origin: center; transform: scale(calc(.86 + var(--t, 0) * .14)); }
.fk-browser__rahmen { fill: #fff; stroke: var(--navy-900); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fk-browser__linie { stroke: var(--navy-900); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fk-browser__punkt { fill: #d6d6d6; }
.fk-browser__url { fill: var(--paper-2); }
.fk-k__bild { fill: var(--navy-900); }
.fk-k__kreis { fill: var(--amber-500); }
.fk-k__titel { font: 800 52px var(--font-sans); fill: #fff; }
.fk-k__em { font-style: normal; fill: var(--amber-400); }
.fk-k__zeile { stroke: rgba(10, 10, 10,.18); stroke-width: 10; stroke-linecap: round; }
.fk-k__knopf { fill: var(--amber-500); }
.fk-k__knopftext { font: 700 20px var(--font-sans); fill: var(--navy-950); }
.fk-k__fach { fill: var(--paper); }
.fk-k__label { font: 700 20px var(--font-sans); fill: var(--navy-900); letter-spacing: .02em; }
.fk-karte { opacity: clamp(0, calc(var(--t, 0) * 4), 1);
  transform: translate(calc((1 - var(--t, 0)) * var(--dx)), calc((1 - var(--t, 0)) * var(--dy))) rotate(calc((1 - var(--t, 0)) * var(--rot)));
  transform-box: fill-box; transform-origin: center; }
.fk-karte rect { fill: #fff; stroke: var(--amber-500); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fk-karte circle { fill: var(--amber-500); }
.fk-karte line { stroke: rgba(10, 10, 10,.22); stroke-width: 9; stroke-linecap: round; }

/* Morgen: das Team ist komplett */
.fk-team2 .fk-lehne { fill: var(--paper); }
.fk-team2 .fk-person > * { fill: var(--navy-900); }
.fk-neu > * { fill: var(--amber-500); }
.fk-team2 .fk-tisch { fill: var(--paper); }
.fk-neu { opacity: clamp(0, calc(var(--t, 0) * 2.5), 1); transform: translateY(calc((1 - var(--t, 0)) * -170px)); }
.fk-neu > * { stroke: var(--navy-900); stroke-width: 3; }

/* Bericht, jede Woche */
.fk-bericht rect { fill: #fff; stroke: var(--navy-900); stroke-width: 2; }
.fk-bericht text { font: 700 22px var(--font-sans); fill: var(--navy-900); }
.fk-bericht line { stroke: rgba(10, 10, 10,.22); stroke-width: 9; stroke-linecap: round; }
.fk-haken { fill: none; stroke: var(--amber-500); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 860px) {
  .bau--fk { height: 440svh; }
  .bau--fk .bau__buehne { grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); padding-bottom: 2.2rem; }
  .bau--fk .bau__station h1 { font-size: clamp(1.5rem, 1rem + 2.4vw, 2.1rem); max-width: none; }
  .bau--fk .bau__station h2 { font-size: clamp(1.55rem, 1rem + 2.6vw, 2.2rem); max-width: none; }
  .bau--fk .bau__station p { font-size: .95rem; margin-top: .55rem; max-width: 40ch; }
  .bau--fk .bau__station .btn-row { margin-top: .8rem; }
  .bau--fk .bau__fortschritt { bottom: .9rem; }
  .bau--fk .bau__station .hero__note { display: none; }
  .fk__svg { max-height: none; left: -5%; width: 110%; }
}

/* Reduzierte Bewegung: Schlussbild, Team komplett, ohne Zwischenszenen */
.bau--still.bau--fk .fk-menge, .bau--still.bau--fk .fk-inserat, .bau--still.bau--fk .fk-quelle,
.bau--still.bau--fk .fk-browser { display: none; }
.bau--still.bau--fk .bau__szene { position: sticky; top: calc(var(--nav-h) + 1rem); height: auto; aspect-ratio: 10 / 9; align-self: start; }
.bau--still.bau--fk .fk__svg { max-height: none; }
.bau--still .fk-leer__linie { animation: none; }

/* Hilfsklassen des Motors, hier für diese Bühne nochmals gesichert (gleich wie in main.css) */
.bau--fk .b-zug { fill: none; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t, 0)); vector-effect: non-scaling-stroke; }
.bau--fk .b-ein { opacity: var(--t, 0); }
.bau--fk .b-wachs { transform-box: fill-box; transform-origin: center; transform: scale(var(--t, 0)); }
.bau--fk .b-steig { opacity: var(--t, 0); transform-box: fill-box; transform: translateY(calc((1 - var(--t, 0)) * 30px)); }
.bau--fk .b-tauch { opacity: var(--t, 0); transform-box: fill-box; transform-origin: center; transform: scale(calc(1.25 - var(--t, 0) * .25)); }
.bau--still.bau--fk [data-t] { --t: 1 !important; }

/* ==========================================================================
   Konstruktion, Blaupause und Zähler (seite-fachkraefte.js)
   Der leere Stuhl ist bemasst wie auf dem Reissbrett. Taste B (oder der Knopf) legt
   über die ganze Bühne eine Blaupause: Raster, Achsen, Radien, Masse aller Figuren.
   Ein echter Zähler misst, wie lange Sie schon hier sind. So lange ist die Stelle länger offen.
   ========================================================================== */
.fk-k-achse { stroke: currentColor; stroke-width: 1; stroke-dasharray: 6 5; opacity: .55; vector-effect: non-scaling-stroke; }
.fk-k-hilfs { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; vector-effect: non-scaling-stroke; }
.fk-k-mass { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.fk-k-punkt { fill: currentColor; }
.fk-k-text, .fk-k-etikett { font: 600 22px var(--ws-mono, ui-monospace, monospace); letter-spacing: .06em; fill: currentColor; }
.fk-k-etikett { text-transform: uppercase; fill: var(--amber-500); }
.fk-konstr { color: var(--amber-400); pointer-events: none; }
.fk-konstr--leer { opacity: var(--t, 0); }
.fk-konstr--alle { color: rgba(255, 255, 255,.85); opacity: 0; transition: opacity .6s var(--ws-haus, ease); }
.fk-raster { color: var(--amber-400); opacity: 0; transition: opacity .6s var(--ws-haus, ease); pointer-events: none; }
.fk-raster__tinte { fill: var(--navy-950); opacity: .45; }
.bau--fk.is-blau .fk-konstr--alle, .bau--fk.is-blau .fk-raster { opacity: 1; }
.bau--fk.is-blau .fk-konstr--leer { color: rgba(255, 255, 255,.85); }

/* Knopf mit Tastenkappe */
.fk-blau { position: absolute; right: 0; top: 0; z-index: 3; display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .55rem .45rem .85rem; border: 1px solid var(--line); border-radius: 0; background: rgba(255, 255, 255,.85);
  color: var(--navy-900); font: 600 .72rem/1 var(--ws-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: background .3s var(--ws-haus, ease), color .3s var(--ws-haus, ease), border-color .3s; }
.fk-blau kbd { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .3em; border: 1px solid rgba(10, 10, 10,.3);
  border-bottom-width: 2.5px; border-radius: 5px; background: #fff; font: inherit; letter-spacing: 0; }
.fk-blau:hover, .fk-blau[aria-pressed="true"] { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.fk-blau[aria-pressed="true"] kbd, .fk-blau:hover kbd { background: var(--amber-500); color: var(--navy-950); border-color: var(--amber-600); }
.fk-blau:focus-visible { outline: 2px solid var(--navy-900); outline-offset: 3px; }
.no-js .fk-blau { display: none; }

/* Zähler unter dem Kreis */
.fk-zaehler { position: absolute; left: 50%; bottom: 2%; z-index: 2; margin: 0; width: max-content; max-width: 92%; padding: .5rem .85rem;
  transform: translate(-50%, calc((1 - var(--t, 0)) * 8px)); opacity: var(--t, 0); border-radius: 8px; background: rgba(5, 5, 5,.82);
  color: #dfe5ea; font: 500 .74rem/1.4 var(--ws-mono, ui-monospace, monospace); letter-spacing: .02em; text-align: center; pointer-events: none; }
.fk-zaehler b { color: var(--amber-500); font-weight: 600; font-variant-numeric: tabular-nums; }
.no-js .fk-zaehler { display: none; }

@media (max-width: 860px) {
  .fk-k-text, .fk-k-etikett { font-size: 34px; }
  .fk-blau { padding: .35rem .7rem; font-size: .66rem; }
  .fk-blau kbd { display: none; }
  .fk-zaehler { bottom: 0; font-size: .66rem; padding: .4rem .6rem; }
}
.bau--still.bau--fk .fk-zaehler:not(.fk-zaehler--ende) { display: none; }
.bau--still.bau--fk .fk-zaehler--ende { display: none; }