/* ==========================================================================
   Bühne «Kunden finden» (kunden.html, Motor assets/js/bau.js)
   Eine nächtliche Karte aus vielen Punkten. Die anderen leuchten, Ihr Betrieb
   ist grau. Die Suche geht an Ihnen vorbei, dann öffnet sich ein grosser Kreis
   (Tageslicht), die Nadel aus dem Logo wächst, passende Kunden finden den Weg,
   das Telefon klingelt. Alles SVG, Werte --t kommen aus data-t.
   ========================================================================== */
.bau--kunden {
  --fg: #f5f5f5; --fg-muted: #b3b3b3; --line: rgba(255,255,255,.14);
  --accent-text: var(--amber-500); --accent-display: var(--amber-500); --focus: var(--amber-400);
  --kd-nacht: var(--navy-950);
  height: 480vh; height: 480svh;
  background: var(--kd-nacht); color: var(--fg);
}
/* Ein Hauch Mondlicht, damit die Nacht Tiefe hat */
.bau--kunden .bau__buehne {
  background:
    radial-gradient(60% 70% at 72% 52%, rgba(34, 34, 34,.55) 0%, rgba(5, 5, 5,0) 70%),
    var(--kd-nacht);
}
.bau--kunden .bau__station h1, .bau--kunden .bau__station h2 { color: #fff; max-width: 14ch; }
.bau--kunden .bau__station p { color: var(--fg-muted); }
.bau--kunden .eyebrow { color: #cccccc; }
.bau--kunden .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,.3); }
.bau--kunden .bau__fortschritt { background: rgba(255,255,255,.1); }

/* Hilfsklassen des Motors, auf diese Bühne begrenzt (unabhängig von main.css) */
.bau--kunden .b-zug { fill: none; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t, 0)); vector-effect: non-scaling-stroke; }
.bau--kunden .b-ein { opacity: var(--t, 0); }
.bau--kunden .b-wachs { transform-box: fill-box; transform-origin: center; transform: scale(var(--t, 0)); }
.bau--kunden .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--kunden [data-t] { --t: 1 !important; }

/* Szene: quadratische Karte, Ränder lösen sich in der Nacht auf */
.kd-szene { min-width: 0; }
.kd-karte { position: relative; width: min(100%, 100vh - var(--nav-h) - 2rem); aspect-ratio: 1; }
.kd-svg {
  display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}

/* Karte (zweimal verwendet: Nacht und Tag, Farben über Variablen) */
.kd-nacht use { --kd-see: rgba(22, 22, 22,.85); --kd-str: rgba(204, 204, 204,.08); --kd-p: rgba(204, 204, 204,.3); --kd-k: #ffffff; }
.kd-tag use  { --kd-see: var(--paper-2); --kd-str: rgba(10, 10, 10,.1); --kd-p: rgba(10, 10, 10,.22); --kd-k: rgba(10, 10, 10,.3); }
.kd-see { fill: var(--kd-see); }
.kd-strassen path { fill: none; stroke: var(--kd-str); stroke-width: 7; stroke-linecap: round; }
.kd-punkte circle { fill: var(--kd-p); }
.kd-kon circle { fill: var(--kd-k); }
.kd-fl { animation: kdFunkeln 6s ease-in-out infinite; }
@keyframes kdFunkeln { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Die anderen leuchten */
.kd-glut circle { transform-box: fill-box; transform-origin: center; animation: kdGlut 4.5s ease-in-out infinite; }
.kd-glut circle:nth-child(2) { animation-delay: -1.2s; } .kd-glut circle:nth-child(3) { animation-delay: -2.1s; }
.kd-glut circle:nth-child(4) { animation-delay: -3s; } .kd-glut circle:nth-child(5) { animation-delay: -.6s; }
@keyframes kdGlut { 50% { transform: scale(1.25); } }

/* Die Strassen zu Ihnen zeichnen sich beim ersten Scrollen */
.kd-wege path { stroke: rgba(204, 204, 204,.16); stroke-width: 1.5; }

/* Ihr Betrieb: grau, kaum zu sehen */
.kd-ich__punkt { fill: var(--slate-500); }
.kd-tag .kd-ich__punkt { fill: var(--navy-900); }
.kd-ich__ring {
  fill: none; stroke: rgba(204, 204, 204,.45); stroke-width: 1.5; stroke-dasharray: 4 6;
  transform-box: fill-box; transform-origin: center; animation: kdDreh 18s linear infinite;
}
@keyframes kdDreh { to { transform: rotate(360deg); } }
.kd-ich__text { font: 700 17px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; fill: rgba(204, 204, 204,.7); }
.kd-tag .kd-ich__text { fill: var(--navy-900); }

/* Die Suche */
.kd-suche path { stroke: rgba(255, 255, 255,.5); stroke-width: 1.6; }
.kd-sucher { fill: #ffffff; }
.kd-sucher__ring { fill: none; stroke: rgba(255, 255, 255,.35); stroke-width: 1.5; }

/* Der grosse Kreis: zuerst über Ihnen geöffnet, am Schluss weit */
.kd-ew { --kd-e: var(--t, 0); }
.kd-kreis {
  transform-box: view-box; transform-origin: 470px 540px;
  transform: scale(calc(var(--t, 0) * (1 + var(--kd-e, 0) * .42)));
}
.kd-tag__grund { fill: var(--paper); }
.kd-rand { fill: none; stroke: var(--amber-500); stroke-opacity: .55; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* Kamera: kurz zu Ihnen hin, dann zurück, am Schluss ruhig und weit */
.kd-kamera, .kd-kamera2 { transform-box: view-box; transform-origin: 470px 540px; }
.kd-kamera { transform: scale(calc(1 + var(--t, 0) * .16)); }
.kd-kamera2 { transform: translate(calc(var(--t, 0) * 30px), calc(var(--t, 0) * -40px)) scale(calc(1 - var(--t, 0) * .2)); }

/* Weniger Glanz für die anderen, sobald Ihre Kunden kommen */
.kd-dimm { opacity: calc(1 - var(--t, 0) * .45); }

/* Passende Kunden */
.kd-kunden path { stroke: var(--amber-500); stroke-width: 2; stroke-linecap: round; }
.kd-kunde circle { fill: none; stroke: var(--amber-500); stroke-width: 2; }
.kd-kunde .kd-kunde__kern { fill: var(--amber-500); stroke: none; }

/* Die Nadel aus dem Logo */
.kd-nadel path { fill: var(--amber-500); }
.kd-nadel {
  opacity: min(1, calc(var(--t, 0) * 3));
  transform-box: view-box; transform-origin: 470px 540px;
  transform: translateY(calc((1 - var(--t, 0)) * -60px)) scale(calc(.2 + var(--t, 0) * .8));
}
.kd-schatten { fill: rgba(10, 10, 10,.28); }

/* Das Telefon */
.kd-telefon__knopf { fill: var(--navy-900); }
.kd-telefon__hoerer path { fill: none; stroke: var(--amber-500); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.kd-telefon__hoerer { transform-box: fill-box; transform-origin: center; animation: kdKlingeln 2.6s ease-in-out infinite; }
@keyframes kdKlingeln {
  0%, 40%, 100% { transform: rotate(0); }
  5%, 15%, 25% { transform: rotate(-12deg); }
  10%, 20%, 30% { transform: rotate(12deg); }
}
.kd-wellen path { stroke: var(--amber-500); stroke-width: 3; stroke-linecap: round; }
.kd-wellen path:nth-child(1) { animation: kdWelle 2.6s ease-in-out infinite; }
.kd-wellen path:nth-child(2) { animation: kdWelle 2.6s ease-in-out .15s infinite; }
.kd-wellen path:nth-child(3) { animation: kdWelle 2.6s ease-in-out .3s infinite; }
@keyframes kdWelle { 0%, 45%, 100% { opacity: 1; } 70% { opacity: .25; } }

/* Handy: Text oben, Karte unten */
@media (max-width: 860px) {
  .bau--kunden { height: 480svh; }
  .bau--kunden .bau__station h1, .bau--kunden .bau__station h2 { max-width: 16ch; }
  .bau--kunden .bau__szene { place-items: center; container-type: size; }
  .kd-karte { width: min(100%, 100cqh); }
  .kd-ich__text { font-size: 24px; }
}

/* Niedrige Handys: dem Text etwas mehr Raum */
@media (max-width: 860px) and (max-height: 760px) {
  .bau--kunden .bau__buehne { grid-template-rows: minmax(0, 1.15fr) minmax(0, .9fr); }
}

/* Reduzierte Bewegung: ruhiges Schlussbild, nur Ihre Kunden und Ihre Nadel */
.bau--still.bau--kunden { height: auto; }
.bau--still.bau--kunden .kd-nur-film { display: none; }
.bau--still.bau--kunden .bau__buehne { overflow: clip; grid-template-rows: auto; align-items: start; padding-bottom: var(--section); }
.bau--still.bau--kunden .bau__station { padding-block: 0; }
.bau--still.bau--kunden .bau__szene { position: sticky; top: calc(var(--nav-h) + 1rem); height: auto; container-type: normal; }
.bau--still.bau--kunden .kd-karte { width: min(100%, 640px, 100svh - var(--nav-h) - 2rem); }
@media (max-width: 860px) {
  .bau--still.bau--kunden .bau__szene { position: relative; top: 0; }
  .bau--still.bau--kunden .kd-karte { width: 100%; }
}
.bau--still.bau--kunden .kd-kamera { --t: 0 !important; }
.bau--still.bau--kunden .kd-dimm { --t: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .kd-fl, .kd-glut circle, .kd-ich__ring, .kd-telefon__hoerer, .kd-wellen path { animation: none !important; }
}

/* Navigation über der nächtlichen Bühne dunkel */
.kd-dunkel .nav.is-scrolled {
  background: rgba(5, 5, 5,.72); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

/* ==========================================================================
   HUD und Spuren (seite-kunden.js): die Karte als Instrument.
   Maschinenschrift für Messwerte, Ecken wie ein Sucher, die Fahrt folgt dem Scrollen.
   Wer auf die Karte klickt, schickt einen Kunden los. Vor dem Licht findet er die anderen,
   danach findet er Sie, und das Telefon klingelt.
   ========================================================================== */
.kd-hud { position: absolute; inset: 0; pointer-events: none; font: 500 11px/1.2 var(--ws-mono, ui-monospace, monospace);
  letter-spacing: .06em; text-transform: uppercase; color: rgba(204, 204, 204,.62); }
.kd-hud b { font-weight: 600; color: var(--amber-500); }
.kd-hud__ecke { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(227, 6, 19,.7); }
.kd-hud__ecke--lo { left: 4%; top: 4%; border-left-width: 1.5px; border-top-width: 1.5px; }
.kd-hud__ecke--ro { right: 4%; top: 4%; border-right-width: 1.5px; border-top-width: 1.5px; }
.kd-hud__ecke--lu { left: 4%; bottom: 4%; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.kd-hud__ecke--ru { right: 4%; bottom: 4%; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.kd-hud__lo, .kd-hud__ro, .kd-hud__lu { position: absolute; white-space: nowrap; }
.kd-hud__lo { left: calc(4% + 26px); top: calc(4% + 3px); }
.kd-hud__ro { right: calc(4% + 26px); top: calc(4% + 3px); }
.kd-hud__lu { left: calc(4% + 26px); bottom: calc(4% + 3px); font-variant-numeric: tabular-nums; }
.kd-hud__ru { position: absolute; right: calc(4% + 26px); bottom: calc(4% + 3px); z-index: 2; margin: 0; max-width: 62%; pointer-events: none;
  font: 500 11px/1.35 var(--ws-mono, ui-monospace, monospace); letter-spacing: .04em; text-align: right; color: #e9edf1; }
.kd-hud__ru b { color: var(--amber-500); font-weight: 600; }
.kd-hud__ru.is-neu { animation: kdLog .6s var(--ws-haus, ease) both; }
@keyframes kdLog { from { opacity: 0; transform: translateY(6px); } }
/* Unsichtbarer Knopf über der ganzen Karte */
.kd-tipp { position: absolute; inset: 6%; z-index: 1; border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kd-tipp:focus-visible { outline: 2px dashed var(--amber-400); outline-offset: 4px; }
.no-js .kd-tipp, .no-js .kd-hud, .no-js .kd-hud__ru { display: none; }

/* Spuren */
.kd-spur path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.kd-spur.is-andere path { stroke: rgba(255, 255, 255,.75); stroke-dasharray: 1; }
.kd-spur.is-ihr path { stroke: var(--amber-500); }
.kd-spur__start { fill: none; stroke-width: 2; }
.kd-spur.is-andere .kd-spur__start { stroke: rgba(255, 255, 255,.8); }
.kd-spur.is-ihr .kd-spur__start { stroke: var(--amber-500); }
.kd-spur__kern { fill: #ffffff; }
.kd-spur.is-ihr .kd-spur__kern { fill: var(--amber-500); }
.kd-spur__welle { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }
.kd-spur.is-andere .kd-spur__welle { stroke: rgba(255, 255, 255,.8); }
.kd-spur.is-ihr .kd-spur__welle { stroke: var(--amber-500); }
.kd-spur__etikett { font: 600 19px var(--ws-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; opacity: 0;
  paint-order: stroke; stroke: rgba(5, 5, 5,.85); stroke-width: 6px; stroke-linejoin: round; }
.kd-spur.is-andere .kd-spur__etikett { fill: #ffffff; }
.kd-spur.is-ihr .kd-spur__etikett { fill: var(--navy-900); stroke: var(--paper); }

/* Ihr Telefon klingelt auf Ihren Klick */
.kd-telefon.is-ruf .kd-telefon__hoerer { animation: kdRuf .9s var(--ws-haus, ease) 1; }
.kd-telefon.is-ruf .kd-telefon__knopf { animation: kdRufKnopf .9s var(--ws-haus, ease) 1; }
@keyframes kdRuf { 0%, 100% { transform: rotate(0); } 10%, 30%, 50%, 70% { transform: rotate(-18deg) scale(1.08); } 20%, 40%, 60%, 80% { transform: rotate(18deg) scale(1.08); } }
@keyframes kdRufKnopf { 30% { fill: var(--amber-500); } }

@media (max-width: 860px) {
  .kd-hud, .kd-hud__ru { font-size: 9.5px; }
  .kd-hud__lu, .kd-hud__ort, [data-hud-modus] { display: none; }
  .kd-hud__lo, .kd-hud__ro { top: calc(4% + 1px); }
  .kd-hud__lo { left: calc(4% + 22px); } .kd-hud__ro { right: calc(4% + 22px); }
  .kd-hud__ru { max-width: 80%; }
  .kd-spur__etikett { font-size: 30px; stroke-width: 8px; }
}
.bau--still.bau--kunden [data-hud-station] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .kd-hud__ru.is-neu, .kd-telefon.is-ruf .kd-telefon__hoerer, .kd-telefon.is-ruf .kd-telefon__knopf { animation: none; }
}