/* Branchenseite Elektro. Ergänzt style.css und ändert dort nichts.
   Alles hier hängt an .hero-elektro, .szene-elektro oder .bauen__reihe--drei. */

/* ---------- Bühne: gerenderte Werkstatt-Ecke statt Video ---------- */
.hero-elektro .hero-dark__media { inset: 0; clip-path: none; }
.hero-elektro__bild {
  position: absolute; top: 50%; right: max(-16px, calc((100vw - 1500px) / 2));
  width: auto; height: min(99%, 57vw); max-width: none;
  transform: translateY(-50%);
}
.hero-elektro__zurueck {
  margin: 28px 0 0; max-width: 430px;
  font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.64);
}
.hero-elektro__zurueck a {
  padding-block: 5px;
  color: #fff; text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.42); text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.hero-elektro__zurueck a:hover { text-decoration-color: #fff; }
.hero-elektro__zurueck a:focus-visible { outline: 2px solid var(--col-accent-text); outline-offset: 3px; }

/* Am Handy steht das Bild unter dem Text, ganz sichtbar und ohne dunklen Schleier. */
@media (max-width: 880px) {
  .hero-elektro { flex-direction: column; padding-bottom: 28px; }
  .hero-elektro .hero-dark__media { position: relative; inset: auto; order: 2; width: 100%; margin-top: 34px; }
  .hero-elektro .hero-dark__scrim { display: none; }
  .hero-elektro__bild {
    position: static; display: block;
    width: min(106%, 640px); height: auto; margin: 0 0 0 50%;
    transform: translateX(-50%);
  }
}

/* ---------- Anlage: Leitungen, die aufleuchten, und was an den Stationen geschieht ---------- */
.szene-elektro .el-strom {
  fill: none; stroke: #FF8FA3; stroke-width: 5; stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(240,100,126,0.95));
}
.szene-elektro .el-puls {
  fill: none; stroke: #FFE6EC; stroke-width: 9; stroke-linecap: round;
  filter: drop-shadow(0 0 9px #F0647E);
}
.szene-elektro .el-abzweig {
  fill: none; stroke: #F08A9C; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(212,82,104,0.9));
}
.szene-elektro .el-fenster { fill: #FFE6EC; filter: drop-shadow(0 0 4px #D45268); }
.szene-elektro .el-feld { fill: rgba(212,82,104,0.2); }
.szene-elektro .el-vorschlag { fill: rgba(212,82,104,0.16); stroke: #F08A9C; stroke-width: 3; stroke-dasharray: 9 7; }
.szene-elektro .el-fest { fill: #D45268; filter: drop-shadow(0 0 7px rgba(212,82,104,0.8)); }
.szene-elektro .el-karte { fill: #F6F3F0; }
.szene-elektro .el-karte-kopf { fill: #D45268; }
.szene-elektro .el-strich { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
/* Am Handy ist der längste Schritt-Text etwas höher als auf der Standardseite: Platz dafür, damit nichts springt. */
@media (max-width: 560px) { .szene-elektro.szene--bereit .szene__schritte { min-height: 240px; } }

/* ---------- Weitere Abläufe: drei Karten statt vier ---------- */
.bauen__reihe--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 36px; }
/* Zwei der drei Titel laufen über zwei Zeilen: Alle bekommen dieselbe Höhe, damit die Texte auf einer Linie beginnen. */
@media (min-width: 901px) {
  .bauen__reihe--drei .bauen__teil h3 { min-height: 2.5em; }
}
@media (max-width: 900px) {
  .bauen__reihe--drei { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .bauen__reihe--drei .bauen__bild { max-width: 440px; margin: 0 0 6px; }
  .bauen__reihe--drei .bauen__teil p { max-width: 520px; }
}