/* ==========================================================================
   Über uns · Bühne «Das Logo entsteht» (ueber-uns.html, Motor assets/js/bau.js)
   Ein grosser roter Kreis hört zu, aus neun Feldern bleibt eines und wird zur
   roten Kachel wie im Logo (assets/img/logo-mark.svg), das G zeichnet sich weiss, drei Wege laufen zusammen und der Kreis vom
   Anfang fällt als Standortnadel ins G. Alles SVG, Werte --t aus data-t.
   ========================================================================== */
.bau.uu { height: 380vh; height: 380svh; }

/* Hilfsklassen des Motors, hier für diese Bühne gesetzt (Wert --t aus bau.js) */
.uu .b-ein { opacity: var(--t, 0); }
.uu .b-steig { opacity: var(--t, 0); transform-box: fill-box; transform: translateY(calc((1 - var(--t, 0)) * 30px)); }
.bau--still.uu [data-t] { --t: 1 !important; }
.uu .bau__szene { display: block; min-height: 0; }
.uu-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }

/* 01 Zuhören: dünne Ringe */
.uu-ring { fill: none; stroke: var(--navy-900); stroke-opacity: .35; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t, 0)); vector-effect: non-scaling-stroke; }

/* 02 Nicht mit jedem: neun Felder, die Kachel wächst aus dem mittleren */
.uu-feld { fill: none; stroke: var(--navy-900); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t, 0)); vector-effect: non-scaling-stroke; }
.uu-blass { opacity: calc(.18 + var(--t, 0) * .82); }
.uu-feld--eins { stroke: var(--amber-600); stroke-width: 3; }
.uu-kachel {
  fill: var(--amber-500);   /* Logo: rotes Quadrat ohne Rundung (Geschäftsführer 15.10.2026: «hier ist noch das falsche G») */
  transform-box: view-box; transform-origin: 400px 400px;
  transform: scale(calc(.25 + var(--t, 0) * .75));
}

/* 03 Ein Gesicht: das G (Strich wie im Logo, 4.8 von 40) */
.uu-g { fill: none; stroke: #fff; stroke-width: 72; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t, 0)); }

/* 04 Aus einer Hand */
.uu-wort { font: 700 40px var(--font-sans); fill: var(--navy-900); text-anchor: middle; letter-spacing: .02em; }
.uu-faden { fill: none; stroke: var(--amber-500); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t, 0)); vector-effect: non-scaling-stroke; }

/* Der Kreis vom Anfang. Ziel: Nadelkopf (490 533, r 90).
   uu-gross: von riesig in der Mitte (400 400, r 396) zum Parkplatz oben rechts (740 -20).
   uu-fall: vom Parkplatz in die Nadelposition. */
.uu-gross {
  transform-box: view-box; transform-origin: 740px -20px;
  transform: translate(calc((1 - var(--t, 0)) * -340px), calc((1 - var(--t, 0)) * 420px)) scale(calc(1 + (1 - var(--t, 0)) * 3.4));
}
.uu-fall { transform-box: view-box; transform: translate(calc((1 - var(--t, 0)) * 250px), calc((1 - var(--t, 0)) * -553px)); }
.uu-scheibe { fill: var(--amber-500); stroke: #fff; stroke-width: 14; opacity: var(--t, 1); }   /* weisser Rand: sichtbar über der roten Kachel */
.uu-nadel { fill: #fff; fill-rule: evenodd; }   /* wie im Logo: weisse Standortnadel */
.uu-welle {
  fill: none; stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center;
  transform: scale(calc(1 + var(--t, 0) * 1.6)); opacity: calc((1 - var(--t, 0)) * min(1, var(--t, 0) * 20));
}

/* 05 Gefunden: der Name */
.uu-name { font: 800 112px var(--font-sans); fill: var(--navy-900); text-anchor: middle; letter-spacing: -.01em; }
.uu-name tspan { font-style: normal; fill: var(--accent-display); }

/* Auftritt beim Laden: der Kreis setzt sich mit etwas Schwung */
@media (prefers-reduced-motion: no-preference) {
  .uu-auftritt { transform-box: fill-box; transform-origin: center; animation: uuAuftritt 1.1s cubic-bezier(.34, 1.56, .64, 1) both .15s; }
  @keyframes uuAuftritt { from { transform: scale(.55); opacity: 0; } }
}

/* Texte: auf Papier lesbar, nicht zu breit */
.uu .bau__station h1 { max-width: 13ch; }
.uu .bau__station h2 { max-width: 14ch; }

@media (max-width: 860px) {
  .bau.uu { height: 380svh; }
  .uu .bau__buehne { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .uu .bau__station .btn--ghost { display: none; }
  .uu-svg { inset: 0 -5% .2rem; width: 110%; height: calc(100% - .2rem); }
}

/* Reduzierte Bewegung: fertiges Logo, Texte untereinander, Szene bleibt stehen */
.bau--still.uu { height: auto; }
.bau--still .uu-weg { display: none; }
.bau--still .uu-welle { opacity: 0; }
.bau--still.uu .bau__buehne { align-items: start; padding-top: calc(var(--nav-h) + clamp(2rem, 1rem + 3vw, 4rem)); padding-bottom: var(--section); }
.bau--still.uu .bau__szene { position: sticky; top: calc(var(--nav-h) + 1rem); height: min(80svh, 720px); }
@media (max-width: 860px) {
  .bau--still.uu .bau__buehne { grid-template-rows: auto auto; }
  .bau--still.uu .bau__szene { position: relative; top: 0; height: 60svh; order: -1; }
}