/* Branchenseite «Sanitär und Heizung». Ergänzt style.css und ändert dort nichts.
   Eigene Klassen beginnen mit sh-, alles andere kommt aus dem gemeinsamen Stil. */

/* ---------- Bühne: links der Text, rechts das gerenderte Bild der Branche ---------- */
.sh-buehne { min-height: 0; padding: 56px 0 64px; }
.sh-buehne__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: 16px; align-items: center;
}
.sh-buehne .hero-dark__eyebrow { line-height: 1.5; }
.sh-buehne .hero-dark__headline { text-wrap: balance; }
.sh-buehne .hero-dark__sub { max-width: 460px; margin-bottom: 36px; }
.sh-buehne__zurueck { margin: 28px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.68); }
.sh-buehne__zurueck a { color: var(--col-accent-klein); text-decoration: underline; text-underline-offset: 3px; }
.sh-buehne__zurueck a:hover { color: #fff; }
.sh-buehne__zurueck a:focus-visible { outline: 2px solid var(--col-accent-text); outline-offset: 3px; }
/* Das Bild darf über seine Spalte hinausragen: Rund um das Modell ist im Bild selbst Luft. */
.sh-buehne__bild { position: relative; margin: -2% -5% -4% -2%; animation: sh-heran 1400ms var(--ease-weich) both; }
.sh-buehne__bild img { display: block; width: 100%; height: auto; }
/* Zweite Fassung desselben Bildes mit warmen Rohren. Sie blendet langsam ein und aus: Die Anlage läuft. */
.sh-buehne__glut { position: absolute; left: 0; top: 0; opacity: 0; animation: sh-waerme 6s ease-in-out 1.2s infinite; }
@keyframes sh-heran { from { transform: scale(1.035); } to { transform: none; } }
@keyframes sh-waerme { 0%, 14% { opacity: 0; } 50%, 64% { opacity: 0.78; } 100% { opacity: 0; } }
@media (min-width: 1300px) {
  .sh-buehne__bild { margin: -4% -16% -6% -4%; }
}
@media (max-width: 880px) {
  .sh-buehne { padding: 44px 0 28px; }
  .sh-buehne__inner { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .sh-buehne__bild { width: 100%; max-width: 560px; margin: 0 auto -4%; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-buehne__bild, .sh-buehne__glut { animation: none; }
}

/* ---------- Anlage «Eine Störung, fünf Stationen» ---------- */
/* Ohne Skript bleibt die Zeichnung sichtbar, damit das Manometer seine Nadel hat. */
.sh-szene:not(.szene--bereit) .szene__bild { opacity: 1; }
.sh-nadel { fill: #1A1418; }
.sh-zone { fill: #FF8BA0; filter: drop-shadow(0 0 6px #D45268); }
.sh-puls { mix-blend-mode: screen; }
.sh-ui { fill: rgba(255,255,255,0.28); }
.sh-blase { fill: #D45268; }
.sh-karte { fill: #FF8BA0; filter: drop-shadow(0 0 7px #D45268); }
.sh-haken { fill: #8E1B36; }
/* Unter dem Knopf: der Verweis auf den Ablauf, der bei einem Kunden läuft. */
.sh-beleg { margin: 22px 0 0; max-width: 520px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.68); }
.sh-beleg a { color: var(--col-accent-klein); text-decoration: underline; text-underline-offset: 3px; }
.sh-beleg a:hover { color: #fff; }
.sh-beleg a:focus-visible { outline: 2px solid var(--col-accent-text); outline-offset: 3px; }
/* Der längste Schritt braucht hier mehr Platz als auf der Standardseite, sonst springt die Steuerung. */
@media (max-width: 1080px) {
  .sh-szene.szene--bereit .szene__schritte { min-height: 214px; }
}
@media (max-width: 560px) {
  .sh-szene.szene--bereit .szene__schritte { min-height: 244px; }
}
@media (max-width: 380px) {
  .sh-szene.szene--bereit .szene__schritte { min-height: 276px; }
}

/* ---------- Drei weitere Abläufe: drei Spalten statt vier ---------- */
.sh-ablaeufe .bauen__reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 36px; }
.sh-ablaeufe .bauen__bild { margin: 0 -4% 6px; }
.sh-faellig { fill: #E9A9B5; }
@media (max-width: 820px) {
  .sh-ablaeufe .bauen__reihe { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .sh-ablaeufe .bauen__bild { max-width: 440px; margin: 0 0 4px; }
}

/* ---------- Schluss: der Servicewagen statt des Papierfliegers ---------- */
.sh-schluss .schluss__bild img { max-width: 480px; animation: sh-federn 2.6s ease-in-out infinite alternate; }
@keyframes sh-federn { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -3px, 0); } }
@media (prefers-reduced-motion: reduce) {
  .sh-schluss .schluss__bild img { animation: none; transform: none; }
}
@media (max-width: 780px) {
  .sh-schluss .schluss__bild img { max-width: 300px; }
}