/* Branchenseite Immobilienverwaltung. Ergänzt style.css, ändert dort nichts.
   Eigen sind die Bühne mit dem Haus im Schnitt, die Beschriftung der Anlage unter dem Weg
   und der Stand je Ablauf («In Betrieb», «Noch nicht gebaut»). */

/* ---------- Bühne: Text links, rechts das gerenderte Haus ---------- */
.br-buehne__media { pointer-events: none; }
@media (min-width: 881px) {
  /* Die Standardbühne schneidet ihr Video schräg an und rückt es 30 Prozent ein. Das Haus steht frei. */
  .br-buehne .hero-dark__media { inset: 0; clip-path: none; }
}
.br-buehne__bild {
  position: absolute; top: 50%; right: max(8px, calc((100% - 1120px) / 2 - 100px));
  width: clamp(440px, 57vw, 790px);
  transform: translateY(-50%);
}
.br-buehne__bild img { display: block; width: 100%; height: auto; }
.br-zurueck { margin: 28px 0 0; font-size: 15px; line-height: 1.5; }
.br-zurueck a {
  color: rgba(255,255,255,0.74);
  text-decoration: underline; text-decoration-color: rgba(255,255,255,0.32); text-underline-offset: 4px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.br-zurueck a:hover { color: #fff; text-decoration-color: #fff; }
.br-zurueck a:focus-visible { outline: 2px solid var(--col-accent-text); outline-offset: 3px; }

@media (max-width: 1099px) {
  .br-buehne .hero-dark__sub { max-width: 380px; }
}
@media (max-width: 880px) {
  /* Unter 880 Pixel steht das Haus unter dem Text statt daneben. */
  .br-buehne { flex-direction: column; align-items: stretch; padding-bottom: 28px; }
  .br-buehne .hero-dark__media { position: relative; inset: auto; order: 2; }
  .br-buehne__bild {
    position: static; transform: none;
    width: min(100%, 600px); margin: 40px auto 0; padding: 0 8px;
  }
  .br-buehne .hero-dark__sub { max-width: 520px; }
}

/* ---------- Anlage: Die Beschriftung steht unter der Kante des Wegs. Über den Stationen
   läge sie auf der Platte des Hauses und in der Flugbahn des Fliegers. ---------- */
[data-szene-branche] .szene__marke { transform: translate(-50%, 0); padding: 14px 0 0; }
[data-szene-branche] .szene__marke::after { top: 0; bottom: auto; }
[data-szene-branche] .szene__vorne { pointer-events: none; }
@media (min-width: 1081px) {
  /* Der Schritttext sitzt in der freien Ecke unten links. Er steht etwas tiefer und schmaler als auf
     der Standardseite, damit er der Beschriftung unter dem Weg nicht zu nahe kommt. */
  .szene[data-szene-branche] { padding-bottom: 56px; }
  [data-szene-branche] .szene__spalte { width: min(31%, 380px); }
  [data-szene-branche].szene--bereit .szene__schritte { min-height: 190px; }
}

/* ---------- Weitere Abläufe: Stand je Karte ---------- */
.bauen__teil .br-stand {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace;
  font-size: 12px; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.br-stand::before {
  content: ""; flex: none; width: 8px; height: 8px;
  background: var(--col-accent-text);
}
.br-stand--offen::before { background: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6); }