/* ==========================================================================
   Guet gfunde · Scrollbühne «Branchen» (branchen.html)
   Motor: assets/js/bau.js setzt --t (0 bis 1) für jedes Element mit data-t.
   Die Branchen fliegen als grosse geometrische Felder (Kreis, Quadrat, Viertelkreis)
   ein, leuchten kurz auf und fügen sich zu einem Ganzen. Zum Schluss zieht sich
   ein Weg durch alle Felder: andere Branche, gleicher Ablauf.
   ========================================================================== */
.bau--br { height: 300vh; height: 300svh; }
.bau--br .bau__buehne { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.bau--br .bau__szene { position: relative; }
.br__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-height: 80svh; margin: auto; overflow: visible; }

/* Ein Feld: fliegt aus seiner Ecke an seinen Platz */
.br-k { opacity: clamp(0, calc(var(--t, 0) * 2.5), 1); transform-box: view-box; transform-origin: 450px 450px;
  transform: translate(calc((1 - var(--t, 0)) * var(--dx)), calc((1 - var(--t, 0)) * var(--dy))) rotate(calc((1 - var(--t, 0)) * var(--rot))) scale(calc(.7 + var(--t, 0) * .3)); }
.br-k__form > * { stroke: none; }
.br-k--amber .br-k__form > * { fill: var(--amber-500); }
.br-k--navy .br-k__form > * { fill: var(--navy-900); }
.br-k--papier .br-k__form > * { fill: var(--paper-2); }
.br-k--linie .br-k__form > * { fill: none; stroke: var(--navy-900); stroke-width: 2.5; stroke-dasharray: 10 10; vector-effect: non-scaling-stroke; }
/* Aufleuchten: kurzer Amber Schein über dem Feld */
.br-k__licht > * { fill: var(--amber-400); opacity: calc(var(--t, 0) * .85); }
.br-k__icon { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.br-k__text { font: 700 26px/1 var(--font-sans); letter-spacing: -.01em; }
.br-k--amber .br-k__icon, .br-k--papier .br-k__icon, .br-k--linie .br-k__icon { stroke: var(--navy-900); }
.br-k--navy .br-k__icon { stroke: var(--amber-500); }
.br-k--amber .br-k__text, .br-k--papier .br-k__text, .br-k--linie .br-k__text { fill: var(--navy-900); }
.br-k--navy .br-k__text { fill: #fff; }

/* Mitte: Standortnadel */
.br-mitte__kreis { fill: var(--navy-950); }
.br-mitte__pin { fill: var(--amber-500); }
.br-mitte__loch { fill: var(--navy-950); }

/* Der Weg durch alle Branchen */
.br-weg { stroke: var(--amber-500); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.br-weg--halo { stroke: var(--paper); stroke-width: 16; }
.br-punkt { fill: var(--paper); stroke: var(--amber-500); stroke-width: 5; }

/* Hilfsklassen des Motors, hier für diese Bühne nochmals gesichert (gleich wie in main.css) */
.bau--br .b-zug { fill: none; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t, 0)); vector-effect: non-scaling-stroke; }
.bau--br .b-wachs { transform-box: fill-box; transform-origin: center; transform: scale(var(--t, 0)); }
.bau--br .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--br [data-t] { --t: 1 !important; }

@media (max-width: 860px) {
  .bau--br { height: 280svh; }
  .bau--br .bau__buehne { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1.1fr); padding-bottom: 2.2rem; }
  .bau--br .bau__station h1, .bau--br .bau__station h2 { font-size: clamp(1.6rem, 1rem + 2.8vw, 2.3rem); max-width: none; }
  .bau--br .bau__station p { font-size: .95rem; margin-top: .55rem; max-width: 40ch; }
  .bau--br .bau__station .btn-row { margin-top: .8rem; }
  .bau--br .bau__fortschritt { bottom: .9rem; }
  .br__svg { max-height: none; }
  .br-k__text { font-size: 32px; }
}

/* Reduzierte Bewegung: alle Felder an ihrem Platz, der Weg gezeichnet, kein Aufleuchten */
.bau--still.bau--br .br-k__licht > * { opacity: 0; }
.bau--still.bau--br .bau__szene { position: sticky; top: calc(var(--nav-h) + 1rem); height: auto; aspect-ratio: 1; align-self: start; }
.bau--still.bau--br .br__svg { max-height: none; }

/* Leere Plätze: das Raster wartet auf seine Branchen */
.br-geist rect { fill: none; stroke: rgba(10, 10, 10,.16); stroke-width: 1.5; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; }

/* Bemassung: am Schluss legt sich die Masslinie um das Raster (Werte in Einheiten der Szene) */
.br-mass__linie { fill: none; stroke: rgba(10, 10, 10,.45); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.br-mass__zahl, .br-mass__legende { font: 500 24px/1 var(--ws-mono, ui-monospace, Menlo, Consolas, monospace); fill: rgba(10, 10, 10,.62); letter-spacing: .04em; }
.br-mass__legende { font-size: 22px; fill: var(--accent-text); letter-spacing: .08em; }
@media (max-width: 860px) {
  .br-mass__zahl { font-size: 26px; }
  .br-mass__legende { font-size: 26px; }
  .br-mass__legende--mitte { display: none; }
}