/* Branchenseiten (27.10.2026, ENTWURF): Hero mit Bühne (src/components/seite/BranchenHero.astro, Bewegung in quelle/branche.js). Links Text,
   rechts die Bühne aus dem Punktraster; Fassung a Kundenfrage (gewählt am 27.10.). Farben über die Kanäle. */

.bh { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: clamp(640px, 88svh, 920px); padding-top: var(--kopf); border-bottom: 1px solid var(--zl); overflow: hidden; }
.bh-text { position: relative; z-index: 2; align-self: center; justify-self: center; width: 100%; max-width: calc(620px + var(--rand) + clamp(20px, 3vw, 56px));
  padding: clamp(48px, 8vh, 96px) clamp(20px, 3vw, 56px) clamp(48px, 8vh, 96px) var(--rand); }   /* fester Container, auf großen Bildschirmen mittig in der Kachel */
.bh-etikett { display: inline-flex; align-items: center; gap: 12px; color: var(--sand); }
.bh .lh-titel { position: relative; margin-top: 24px; max-width: 17ch; font-size: clamp(32px, 8px + 2.75vw, 64px); line-height: 1.04; }   /* 27.10.: ein Achtel kleiner und breiter (Jonah: Mittelstand „zu groß“) */
.bh .lh-satz { margin-top: 26px; max-width: 42ch; }
.bh .lh-handlung { margin-top: 34px; }
.bh-buehne { position: relative; min-height: 0; border-left: 1px solid var(--zl); }
.bh-raster { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bh-lagen { position: absolute; inset: 0; }

/* Auftritt wie auf den Leistungsseiten: Titel hinter der Pixel-Welle, dann Satz und Knöpfe */
.js .bh.da .lh-wort:not(.ganz) { clip-path: polygon(-10% -40%, -10% -40%, -10% 140%, -10% 140%); }
.js .bh .lh-wort { opacity: 0; }
.js .bh.da .lh-wort { opacity: 1; }
.js .bh .lh-wort.auf { animation: lh-glut 1.2s cubic-bezier(.3, 0, .2, 1) both; }
.js .bh :is(.lh-satz, .lh-handlung, .lh-etikett) { opacity: 0; translate: 0 10px; }
.js .bh.da :is(.lh-satz, .lh-handlung, .lh-etikett) { opacity: 1; translate: 0 0; transition: opacity .8s var(--aus), translate .8s var(--aus); }
.js .bh.da .lh-satz { transition-delay: 1.05s; }
.js .bh.da .lh-handlung { transition-delay: 1.17s; }
.js .bh.da .lh-e-boje::after { animation: lh-echolot 3.2s cubic-bezier(.2, .6, .3, 1) .9s infinite; }
.js .bh .bh-buehne { opacity: 0; }
.js .bh.da .bh-buehne { opacity: 1; transition: opacity 1.2s var(--aus) .3s; }

/* ---------- gemeinsame Teile der Bühne ---------- */
.bh-tafel { position: absolute; background: rgb(var(--hg-k) / .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgb(var(--vg-k) / .22); border-radius: 6px; color: var(--sand); font: 400 14px/1.35 var(--schrift); }
.bh-klein { color: var(--leise); font: 500 12.5px/1.2 var(--schrift); letter-spacing: -.003em; }
.bh-wert { position: relative; display: inline-block; }
.bh-wert canvas { position: absolute; inset: -2px -3px; width: calc(100% + 6px); height: calc(100% + 4px); pointer-events: none; }
.bh-wert > span { position: relative; transition: opacity .25s var(--aus); }
.bh-wert:not(.steht) > span { opacity: 0; }
.bh-weg { opacity: 0 !important; translate: 0 -6px; transition: opacity .45s var(--aus), translate .45s var(--aus) !important; }

/* ---------- a: Kundenfrage ---------- */
.bh-suche { left: 50%; top: 11%; width: min(84%, 520px); translate: -50% 0; padding: 12px 14px 14px; }
.bh-suche-kopf { display: flex; gap: 6px; margin-bottom: 10px; }
.bh-suche-kopf span { padding: 5px 10px 6px; border: 1px solid rgb(var(--vg-k) / .16); border-radius: 99px; color: var(--leise); font: 500 12.5px/1 var(--schrift); transition: color .3s, border-color .3s, background-color .3s; }
.bh-suche-kopf span.an { color: rgb(var(--hg-k)); background: var(--sand); border-color: var(--sand); }
.bh-feld { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border: 1px solid rgb(var(--vg-k) / .3); border-radius: 4px; font-size: clamp(15px, 13px + .3vw, 17px); }
.bh-feld svg { width: 16px; height: 16px; flex: none; color: var(--leise); }
.bh-feld-text { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.bh-caret { width: 1px; height: 1.2em; margin-left: -10px; background: var(--sonne); animation: bh-blink 1s steps(1) infinite; }
@keyframes bh-blink { 50% { opacity: 0; } }
.bh-liste { left: 50%; top: calc(11% + 128px); width: min(84%, 520px); translate: -50% 0; display: grid; gap: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bh-erg { position: relative; display: grid; gap: 4px; padding: 13px 14px 14px; border-top: 1px solid rgb(var(--vg-k) / .14); border-radius: 4px; background: rgb(var(--hg-k) / .5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; translate: 0 8px; transition: opacity .5s var(--aus), translate .5s var(--aus); }
.bh-erg.da { opacity: 1; translate: 0 0; }
.bh-erg b { font-weight: 500; color: rgb(var(--vg-k) / .55); }
.bh-erg span { color: rgb(var(--vg-k) / .4); font-size: 13.5px; }
.bh-erg canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .16; }
.bh-erg.ihr b { color: var(--sand); }
.bh-erg.ihr span { color: var(--leise); }
.bh-erg.ihr.treffer { background: rgb(255 106 31 / .13); box-shadow: inset 0 0 0 1px rgb(255 106 31 / .55); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); transition: opacity .5s var(--aus), translate .5s var(--aus), background-color .4s, box-shadow .4s; }
.bh-erg.ihr.treffer b { color: var(--sonne); }
html.hell .bh-erg.ihr.treffer b { color: var(--sonne-700); }
.bh-ki { left: 50%; top: calc(11% + 128px); width: min(84%, 520px); translate: -50% 0; padding: 16px 16px 18px; opacity: 0; transition: opacity .5s var(--aus); }
.bh-ki.da { opacity: 1; }
.bh-ki p { margin: 0 0 14px; max-width: 46ch; color: rgb(var(--vg-k) / .86); font-size: 15px; line-height: 1.5; min-height: 4.5em; }
.bh-quellen { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-quelle { position: relative; padding: 6px 10px 7px; border: 1px solid rgb(var(--vg-k) / .18); border-radius: 4px; color: var(--leise); font: 500 12.5px/1 var(--schrift); opacity: 0; transition: opacity .4s var(--aus), color .3s, border-color .3s; }
.bh-quelle.da { opacity: 1; }
.bh-quelle.ihr.treffer { color: var(--sand); border-color: var(--sonne); }
.bh-pin { position: absolute; display: flex; align-items: center; gap: 10px; translate: -6px -50%; opacity: 0; transition: opacity .4s var(--aus); white-space: nowrap; }
.bh-pin.da { opacity: 1; }
.bh-pin i { width: 12px; height: 12px; border-radius: 50%; border: 1.4px solid rgb(var(--vg-k) / .7); background: rgb(var(--hg-k)); flex: none; }
.bh-pin span { padding: 5px 9px 6px; background: rgb(var(--hg-k) / .9); color: rgb(var(--vg-k) / .55); font: 500 12.5px/1 var(--schrift); }
.bh-pin.ihr span { color: var(--sand); }
.bh-pin.ihr.treffer i { background: var(--sonne); border-color: var(--sonne); }
.bh-anfrage { right: max(16px, calc(50% - min(42%, 260px) - 60px)); bottom: 8%; width: min(62%, 300px); padding: 14px 16px 16px; opacity: 0; translate: 0 10px; transition: opacity .5s var(--aus), translate .6s var(--sanft); }
.bh-anfrage.da { opacity: 1; translate: 0 0; }
.bh-anfrage.da { border-color: var(--sonne); }
.bh-anfrage-kopf { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-weight: 500; }
.bh-anfrage-kopf i { width: 7px; height: 7px; border-radius: 50%; background: var(--sonne); }
.bh-zeilen { display: grid; gap: 8px; }
.bh-zeile { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.bh-zeile .bh-wert { justify-self: start; }

/* ---------- gemeinsam für die Szenen ab 27.10. (Mittelstand, B2B-SaaS) ---------- */
.bh-box { position: absolute; inset: 0; transition: opacity .6s var(--aus); }
.bh-box .bh-tafel { opacity: 0; translate: 0 10px; transition: opacity .55s var(--aus), translate .7s var(--sanft), box-shadow .4s, background-color .4s; }
.bh-box .bh-tafel.da { opacity: 1; translate: 0 0; }
.bh-chip { padding: 5px 9px 6px; border: 1px solid rgb(var(--vg-k) / .2); border-radius: 4px; color: var(--sand); font: 500 12.5px/1 var(--schrift); opacity: 0; transition: opacity .3s var(--aus), border-color .3s, color .3s; }
.bh-chip.da { opacity: 1; }
.bh-web { padding: 0 0 4px; }
.bh-web-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgb(var(--vg-k) / .12); }
.bh-marke { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13.5px; }
.bh-marke i { width: 10px; height: 10px; background: var(--sonne); box-shadow: 4px 4px 0 -1px rgb(var(--vg-k) / .5); }
.bh-mini-knopf { position: relative; overflow: hidden; display: inline-flex; padding: 8px 12px 9px; border-radius: 4px; background: var(--sand); color: rgb(var(--hg-k)); font: 500 12.5px/1 var(--schrift); white-space: nowrap; transition: background-color .3s; }
.bh-mini-knopf canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bh-mini-knopf span { position: relative; }
.bh-mini-knopf.an { color: #fff; }
.bh-skelett { display: grid; gap: 5px; margin-top: 9px; }
.bh-skelett i { display: block; height: 5px; width: 86%; border-radius: 1px; background: rgb(var(--vg-k) / .1); }
.bh-skelett i + i { width: 58%; }
.bh-zeichen { position: relative; flex: none; width: 20px; height: 20px; border: 1.3px solid rgb(var(--vg-k) / .4); border-radius: 50%; transition: background-color .3s, border-color .3s; }
.fertig > .bh-zeichen { background: var(--sonne); border-color: var(--sonne); }
.fertig > .bh-zeichen::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.6px 1.6px 0; rotate: 45deg; }
.bh-zeiger { position: absolute; left: 0; top: 0; z-index: 6; width: 18px; height: 18px; color: var(--sand); pointer-events: none; will-change: translate; }
.bh-zeiger svg { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .3)); }
.bh-wer { position: absolute; left: 16px; top: 14px; padding: 4px 7px 5px; border-radius: 3px; background: var(--sand); color: rgb(var(--hg-k)); font: 500 11.5px/1 var(--schrift); white-space: nowrap; transition: background-color .3s, color .3s; }
.bh-zeiger.am-ziel .bh-wer { background: var(--sonne); color: #fff; }
.bh-zeiger.links .bh-wer { left: auto; right: 6px; }   /* am rechten Rand: Etikett links vom Pfeil */

/* Mittelstand: Drei Einstiege (gewählt am 27.10.) */
.bh-box .bh-einstieg { left: 50%; top: 13%; width: min(86%, 580px); translate: -50% 10px; }
.bh-box .bh-einstieg.da { translate: -50% 0; }
.bh-seg { display: flex; gap: 4px; }
.bh-seg span { padding: 5px 10px 6px; border: 1px solid rgb(var(--vg-k) / .16); border-radius: 99px; color: var(--leise); font: 500 12.5px/1 var(--schrift); transition: color .3s, border-color .3s, background-color .3s; }
.bh-seg span.an { color: rgb(var(--hg-k)); background: var(--sand); border-color: var(--sand); }
.bh-web-titel { position: relative; margin: 22px 18px 0; min-height: 2.5em; color: var(--sand); font: 320 clamp(19px, 14px + .55vw, 24px)/1.25 var(--schrift); letter-spacing: -.02em; text-wrap: pretty; }
html.hell .bh-web-titel { font-weight: 300; }
.bh-web-titel canvas, .bh-kachel canvas { position: absolute; inset: -3px -5px; width: calc(100% + 10px); height: calc(100% + 6px); pointer-events: none; }
.bh-web-titel span { position: relative; }
.bh-web-titel.leer::before, .bh-web-titel.leer::after { content: ""; display: block; height: 13px; width: 82%; margin: 6px 0 12px; border-radius: 2px; background: rgb(var(--vg-k) / .1); }
.bh-web-titel.leer::after { width: 52%; margin: 0; }
.bh-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 18px 0; }
.bh-kachel { position: relative; display: grid; align-content: space-between; gap: 18px; min-height: 86px; padding: 12px; border: 1px solid rgb(var(--vg-k) / .14); border-radius: 4px; }
.bh-kachel canvas { inset: 0; width: 100%; height: 100%; opacity: .9; }
.bh-kachel i { width: 14px; height: 14px; border: 1.2px solid rgb(var(--vg-k) / .35); border-radius: 3px; }
.bh-kachel span { font: 500 13px/1.3 var(--schrift); color: var(--sand); }
.bh-kachel span:empty::before { content: ""; display: block; height: 8px; width: 72%; border-radius: 2px; background: rgb(var(--vg-k) / .1); }
.bh-kontakt { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 20px 18px 14px; padding-top: 16px; border-top: 1px solid rgb(var(--vg-k) / .12); }
.bh-person { width: 34px; height: 34px; border: 1.3px solid rgb(var(--vg-k) / .45); border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgb(var(--vg-k) / .45) 0 5px, transparent 5.5px), radial-gradient(ellipse 11px 8px at 50% 92%, rgb(var(--vg-k) / .45) 0 99%, transparent 100%); transition: border-color .3s; }
.bh-kontakt.neu .bh-person { border-color: var(--sonne); }
.bh-kontakt div { display: grid; gap: 4px; }
.bh-kontakt b { min-height: 1.3em; font-weight: 500; font-size: 14.5px; transition: color .3s; }
.bh-kontakt b:empty::before { content: ""; display: block; width: 120px; height: 9px; margin-top: 4px; border-radius: 2px; background: rgb(var(--vg-k) / .1); }
.bh-kontakt.neu b { color: var(--sonne); }
html.hell .bh-kontakt.neu b { color: var(--sonne-700); }
.bh-einstieg-karte { right: 7%; bottom: 7%; }

/* B2B-SaaS: Mehrere Blicke (gewählt am 27.10.) */
.bh-box .bh-produkt { left: 50%; top: 9%; width: min(86%, 600px); translate: -50% 10px; }
.bh-box .bh-produkt.da { translate: -50% 0; }
.bh-nav { display: flex; gap: 16px; margin-left: auto; color: var(--leise); font: 500 12.5px/1 var(--schrift); }
.bh-video { position: relative; display: grid; place-items: center; margin: 16px 16px 0; aspect-ratio: 16 / 6.4; overflow: hidden; border: 1px solid rgb(var(--vg-k) / .12); border-radius: 4px;
  background: radial-gradient(120% 90% at 30% 20%, rgb(var(--vg-k) / .07), transparent 60%), rgb(var(--vg-k) / .03); transition: box-shadow .4s; }
.bh-video .bh-klein { position: absolute; left: 12px; bottom: 14px; }
.bh-play { position: relative; width: 46px; height: 46px; border: 1.4px solid rgb(var(--vg-k) / .55); border-radius: 50%; transition: border-color .3s, background-color .3s; }
.bh-play::after { content: ""; position: absolute; left: 18px; top: 14px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent rgb(var(--vg-k) / .8); }
.bh-video.an { box-shadow: inset 0 0 0 1px rgb(255 106 31 / .5); }
.bh-video.an .bh-play { border-color: var(--sonne); background: var(--sonne); }
.bh-video.an .bh-play::after { left: 16px; top: 15px; width: 4px; height: 14px; border: solid #fff; border-width: 0 4px; }
.bh-fortschritt { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(var(--vg-k) / .1); }
.bh-fortschritt i { display: block; width: 0; height: 100%; background: var(--sonne); }
.bh-video.an .bh-fortschritt i { width: 100%; transition: width 3.2s linear; }
.bh-tarife { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 16px 0; }
.bh-tarif { position: relative; padding: 12px 12px 13px; border: 1px solid rgb(var(--vg-k) / .14); border-radius: 4px; transition: background-color .4s, box-shadow .4s, border-color .4s; }
.bh-tarif canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .16; }
.bh-tarif b { position: relative; font-weight: 500; font-size: 13.5px; }
.bh-tarif.treffer { border-color: rgb(255 106 31 / .6); background: rgb(255 106 31 / .08); }
.bh-sicher { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 16px 14px; }
.bh-schloss { position: relative; width: 14px; height: 11px; margin: 6px 6px 0 2px; border-radius: 2px; background: rgb(var(--vg-k) / .5); }
.bh-schloss::before { content: ""; position: absolute; left: 3px; bottom: 9px; width: 8px; height: 7px; border: 1.4px solid rgb(var(--vg-k) / .5); border-bottom: 0; border-radius: 5px 5px 0 0; box-sizing: border-box; }
.bh-sicher .bh-chip.fertig { border-color: var(--sonne); }
.bh-sicher .bh-chip::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: 1px; border: 1.2px solid rgb(var(--vg-k) / .45); transition: background-color .3s, border-color .3s; }
.bh-sicher .bh-chip.fertig::before { background: var(--sonne); border-color: var(--sonne); }
.bh-blicke-karte { right: 7%; bottom: 7%; }
.bh-box .bh-runde { left: 50%; top: 0; width: min(86%, 600px); translate: -50% 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 11px 14px 12px; }
.bh-box .bh-runde.da { translate: -50% 0; }
.bh-wer-zeile { display: inline-flex; align-items: center; gap: 8px; color: var(--leise); font: 500 13px/1 var(--schrift); transition: color .3s; }
.bh-wer-zeile .bh-zeichen { width: 16px; height: 16px; }
.bh-wer-zeile.an { color: var(--sand); }
.bh-wer-zeile.an .bh-zeichen { border-color: var(--sonne); box-shadow: 0 0 0 3px rgb(255 106 31 / .18); }
.bh-wer-zeile.fertig { color: var(--sand); }
.bh-wer-zeile.fertig > .bh-zeichen::after { left: 4.5px; top: 2px; width: 3.5px; height: 7px; }
.bh-zeiger { transition: opacity .35s var(--aus); }
.bh-zeiger.neu { opacity: 0; }

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  .bh { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bh-text { padding: 56px var(--rand) 40px; }
  .bh .lh-titel { font-size: clamp(28px, 7.2vw, 40px); }
  .bh-buehne { height: clamp(540px, 150vw, 640px); border-left: 0; border-top: 1px solid var(--zl); }   /* Platz für Liste und Anfrage untereinander */
  .bh-suche, .bh-liste, .bh-ki { width: calc(100% - 32px); }
  .bh-suche { top: 18px; }
  .bh-liste, .bh-ki { top: 146px; }
  .bh-erg { padding: 11px 12px 12px; }
  .bh-anfrage { right: 16px; bottom: 16px; width: min(78%, 280px); }
  /* Szenen ab 27.10. */
  .bh-chip { padding: 4px 7px 5px; font-size: 12px; }
  .bh-box :is(.bh-einstieg, .bh-produkt) { width: calc(100% - 24px); top: 14px; }
  .bh-einstieg .bh-web-kopf { flex-wrap: wrap; row-gap: 10px; }
  .bh-seg span { padding: 4px 8px 5px; font-size: 12px; }
  .bh-web-titel { margin: 16px 14px 0; font-size: 18px; }
  .bh-kacheln { gap: 6px; margin: 14px 14px 0; }
  .bh-kachel { min-height: 74px; padding: 9px; gap: 12px; }
  .bh-kachel span { font-size: 12px; }
  .bh-kontakt { grid-template-columns: 30px minmax(0, 1fr); margin: 16px 14px 12px; padding-top: 12px; row-gap: 10px; }
  .bh-person { width: 30px; height: 30px; }
  .bh-kontakt .bh-mini-knopf { grid-column: 1 / -1; justify-self: start; }
  .bh-einstieg-karte, .bh-blicke-karte { right: 16px; bottom: 16px; width: min(78%, 280px); }
  .bh-nav { display: none; }
  .bh-produkt .bh-mini-knopf { margin-left: auto; }
  .bh-video { margin: 12px 12px 0; aspect-ratio: 16 / 8; }
  .bh-tarife { gap: 6px; margin: 10px 12px 0; }
  .bh-tarif { padding: 9px; }
  .bh-tarif b { font-size: 12.5px; }
  .bh-sicher { margin: 10px 12px 12px; }
  .bh-box .bh-runde { width: calc(100% - 24px); gap: 8px 14px; padding: 10px 12px; }
  .bh-runde > .bh-klein { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .bh .lh-wort, .js .bh .lh-wort.auf, .js .bh.da .lh-wort:not(.ganz) { opacity: 1; animation: none; color: var(--sand); clip-path: none; }
  .js .bh .bh-buehne { opacity: 1; }
  .bh-caret { animation: none; }
}