/* neu.css — nur für neu.html.
   Enthält den Foto-Hero und den Abschnitt, in den der Hausschnitt
   umgezogen ist. style.css bleibt unangetastet; alles hier baut auf deren
   Tokens auf und überschreibt nichts, was der Rest der Seite benutzt. */

/* ==========================================================================
   1. Der Hero mit Foto

   Das Foto liegt vollflächig hinter Aussage und Panel, nicht als Kachel
   daneben. Darüber genau eine Verlaufsfläche: links deckend, damit die
   Schrift trägt, nach rechts offen, damit das Gebäude sichtbar bleibt.
   Zwei Schichten hatten das Bild fast schwarz gemacht.
   ========================================================================== */

.bhero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* Volle Bildschirmhöhe. Mit der früheren Kappung bei 880 px endete das
     Foto auf hohen Monitoren mitten im Bild (19.10.2026). */
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--kopf-hoehe) + clamp(var(--a5), 2.6vw, var(--a7)));
  padding-bottom: clamp(var(--a6), 3.5vw, var(--a8));
  overflow: hidden;
  color: var(--weiss);
  background: var(--petrol-tief, #143d4e);
}

.bhero__grund {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.bhero__grund img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Der Bogen der Fassade läuft dann hinter dem Panel durch, links bleibt
     die ruhige, dunkle Ecke für die Schrift. */
  object-position: 68% 52%;
}

/* Am gerenderten Bild gemessen, nicht geschätzt: Helligkeit genau in den
   Rechtecken, in denen die Schrift steht, mit unsichtbar geschalteter
   Schrift. Die Werte stehen unten in dieser Datei, sie werden nach jeder
   Änderung neu gemessen.

   Der Verlauf ist neutrales Dunkelblau, nicht Petrol: Petrol legte einen
   Farbstich über das ganze Bild, und die Fassade ist von sich aus blau. */
.bhero__schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(98deg,
    rgba(9, 24, 32, 0.88) 0%,
    rgba(11, 30, 39, 0.76) 32%,
    rgba(13, 34, 44, 0.44) 56%,
    rgba(13, 34, 44, 0.16) 80%,
    rgba(13, 34, 44, 0.06) 100%);
}

/* Die Spalten sind nahezu gleich. Das Panel ist der Beleg und darf nicht
   kleiner sein als die Behauptung daneben. */
.bhero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(var(--a5), 3.4vw, var(--a7));
  align-items: center;
  width: 100%;
}

.bhero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4.2vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 700;
  color: var(--weiss);
  max-width: 14ch;
  text-wrap: balance;
}

/* Genau ein Wort trägt die Systemfarbe. #3E96B8 kommt auf dunklem Grund
   nur auf 3,2:1 — für 22 px und mehr reicht das, für die Sicherheit steht
   hier der hellere Ton mit 7,4:1. */
.bhero__akzent {
  color: #6fc3dc;
}

.bhero__lead {
  margin-top: clamp(var(--a4), 2vw, var(--a5));
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.92);
}

.bhero__aktion {
  margin-top: clamp(var(--a5), 2.4vw, var(--a6));
  display: flex;
  gap: var(--a4);
  flex-wrap: wrap;
}

/* Der Rahmenknopf steht hier auf Dunkel und braucht die helle Fassung. */
.bhero .btn--rand {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--weiss);
  background: transparent;
}

.bhero .btn--rand:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--weiss);
}

.bhero__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a3) clamp(var(--a4), 2.4vw, var(--a6));
  list-style: none;
  margin: clamp(var(--a5), 2.6vw, var(--a6)) 0 0;
  padding: clamp(var(--a4), 1.6vw, var(--a5)) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  max-width: 46ch;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.88);
}

/* Das Panel: dieselbe Glasscheibe wie im Abschnitt Bedienung, nur ohne
   Bedienung. Es steht hier als Beleg, nicht als Spielzeug — geschaltet
   wird weiter unten. */
.bhero__panel {
  margin: 0;
}

/* Die Bildunterschrift liegt als einziger Text nicht über der abgedunkelten
   Seite, sondern über der hellen Fassade: gemessen 2,6:1 im schlechtesten
   Pixel. Sie bekommt deshalb eine eigene, schmale Fläche — dieselbe
   Glasfarbe wie das Panel darüber, damit es nicht wie ein Aufkleber wirkt. */
.bhero__panel figcaption {
  display: block;
  margin-top: var(--a3);
  padding: 7px 12px;
  border-radius: 6px;
  background: rgba(11, 34, 45, 0.66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

/* Auf grossen Fenstern darf das Panel deutlich zulegen: die Kachelwerte
   sind die einzige Stelle im Hero, an der etwas Konkretes steht. */
@media (min-width: 1100px) {
  .bhero__panel .panel__glas {
    padding: clamp(22px, 2vw, 30px);
  }

  .bhero__panel .kachel {
    padding: var(--a4) var(--a4) calc(var(--a4) + 2px);
  }

  .bhero__panel .kachel__wert {
    font-size: clamp(1.75rem, 2.2vw, 2.15rem);
  }
}

.bhero__quelle {
  position: absolute;
  /* Bündig mit der Textspalte: halbe Fensterbreite minus halbe Wrapbreite,
     plus dessen Innenrand. */
  left: max(var(--rand), calc(50vw - 600px + var(--rand)));
  bottom: var(--a3);
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
}

/* Schmale Fenster: Text über Panel. Der Verlauf läuft dann von oben nach
   unten, denn die Schrift steht jetzt über der oberen Bildhälfte. */
@media (max-width: 980px) {
  /* Kein Flex mehr: die Bildquelle steht hier unten im Textfluss, und als
     zweites Flexkind hätte sie sich die Zeile mit dem Raster geteilt — das
     Raster war dadurch auf zwei Drittel geschrumpft. */
  .bhero {
    display: block;
    min-height: 0;
  }

  .bhero__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(var(--a5), 5vw, var(--a6));
  }

  /* Oben deckend für die Schrift, unten offener — sonst ist vom Foto auf
     dem Telefon nichts mehr zu sehen. */
  .bhero__schleier {
    background: linear-gradient(172deg,
      rgba(9, 24, 32, 0.9) 0%,
      rgba(11, 30, 39, 0.82) 40%,
      rgba(13, 34, 44, 0.56) 70%,
      rgba(13, 34, 44, 0.4) 100%);
  }

  .bhero h1 {
    max-width: 18ch;
  }

  .bhero__quelle {
    position: static;
    margin-top: var(--a4);
    padding-inline: var(--rand);
  }
}

@media (max-width: 720px) {
  .bhero__grund img {
    object-position: 62% 45%;
  }

  /* Drei Angaben in einer Zeile werden hier zu eng; die Ortsangabe darf
     umbrechen, statt „Objekt A" aus dem Glas zu schieben. */
  .bhero__panel .panel__kopf {
    flex-wrap: wrap;
    gap: 4px var(--a4);
  }

  .bhero__panel .panel__ort {
    order: 3;
    width: 100%;
    margin-right: 0;
  }

  .bhero__panel .panel__objekt {
    margin-left: auto;
  }
}

/* Der Kopf liegt über dem Bild und ist dort durchsichtig. Bewegung gibt es
   keine ausser dem Farbwechsel beim Verlassen des Heros. */
@media (prefers-reduced-motion: reduce) {
  .bhero__panel .panel__live::before {
    animation: none;
  }
}

/* ==========================================================================
   2. Der Hausschnitt als eigener Abschnitt

   Die Zeichnung stand bis zur Foto-Fassung im Hero und behält deshalb ihre
   Klassennamen: an .hero__raster und .hero__bild hängen die Regeln für
   schmale Fenster. Nur die Scrollkopplung entfällt — --f bleibt 0.
   ========================================================================== */

.haus {
  --f: 0;
}

.haus .hero__raster {
  align-items: center;
}

.haus__text h2 {
  max-width: 16ch;
}

.haus__text p {
  margin-top: var(--a4);
  max-width: 42ch;
}

.haus__hinweis {
  font-size: 0.875rem;
  color: var(--text-leise);
}

@media (max-width: 980px) {
  .haus__text h2,
  .haus__text p {
    max-width: none;
  }
}

/* ==========================================================================
   3. Das Panel — helle Fassung

   Bisher war es ein dunkles Gerät: schwarzes Glas, helle Schrift. Auf einer
   Seite, die sonst durchgehend hell ist, war das ein Fremdkörper — und im
   Hero ein schwarzer Block vor einem hellen Foto.

   Jetzt ist es eine weisse, milchige Scheibe: Karte statt Kasten. Über dem
   Foto bleibt es durchscheinend, auf der Wand steht es mit Schatten. Die
   Betriebs-LED bleibt grün, sie ist Teil des Geräts.

   Die Regeln gelten für beide Panels der Seite, damit es nicht zwei
   Gestaltungen für dasselbe Gerät gibt.
   ========================================================================== */

.panel {
  --pn-linie: #dde5ea;
  --pn-kachel: #f5f8fa;
  --pn-text: #17242b;
  /* Gemessen, nicht geschätzt: auf der Glasscheibe im Hero liegt der Grund
     je nach Fassade dahinter zwischen Y 0,35 und 0,62. #5F7480 kam dort auf
     2,7:1, #55686F auf 3,5:1. Dieser Ton hält auch am dunkelsten Punkt die
     4,5:1 der Stufe AA. */
  --pn-leise: #3f5058;
  position: relative;
  border-radius: 16px;
  padding: 0;
  background: rgba(255, 255, 255, 0.93);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(16, 38, 48, 0.08),
    0 18px 40px -22px rgba(16, 38, 48, 0.45),
    0 0 0 1px rgba(32, 90, 114, 0.07);
}

.panel__glas {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  padding: clamp(18px, 2.4vw, 26px);
  color: var(--pn-text);
  background: linear-gradient(180deg, rgba(62, 150, 184, 0.06), rgba(62, 150, 184, 0) 42%);
}

.panel__kopf {
  display: flex;
  align-items: center;
  gap: var(--a4);
  padding-bottom: var(--a3);
  border-bottom: 1px solid var(--pn-linie);
}

.panel__live {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--pn-text);
}

/* Grün bleibt die einzige Ausnahme von „kein vierter Akzent": Es gehört zum
   dargestellten Gerät. Auf Weiss braucht es einen dunkleren Ton als auf
   Schwarz, sonst leuchtet es nicht, sondern verschwindet. */
.panel__live::before {
  background: #17b877;
  box-shadow: 0 0 0 3px rgba(23, 184, 119, 0.16), 0 0 0 0 rgba(23, 184, 119, 0.5);
  animation: ledhell 2.4s ease-out infinite;
}

@keyframes ledhell {
  70% { box-shadow: 0 0 0 3px rgba(23, 184, 119, 0.16), 0 0 0 10px rgba(23, 184, 119, 0); }
  100% { box-shadow: 0 0 0 3px rgba(23, 184, 119, 0.16), 0 0 0 0 rgba(23, 184, 119, 0); }
}

.panel__ort {
  font-size: 0.875rem;
  color: var(--pn-leise);
  margin-right: auto;
}

.panel__objekt {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--petrol);
  white-space: nowrap;
}

.panel__raster {
  gap: var(--a3);
  margin-block: var(--a4);
}

.kachel {
  gap: 2px;
  border: 1px solid var(--pn-linie);
  border-top-color: var(--pn-linie);
  border-radius: 10px;
  background: var(--pn-kachel);
}

.kachel__marke {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--pn-leise);
}

.kachel__wert {
  color: var(--pn-text);
  font-weight: 650;
}

.kachel__einheit {
  color: var(--pn-leise);
}

.kachel__zusatz {
  color: var(--pn-leise);
}

/* Balken, Lichtkreise und Behang tragen Signalpetrol. Auf Weiss kommt es
   auf 3,2:1 — für Flächen und Linien reicht das (3:1), für Schrift nicht,
   deshalb steht daneben immer die Zahl. */
.balken {
  height: 7px;
  border-radius: 4px;
  background: #e4ebef;
}

.balken i {
  background: linear-gradient(90deg, #3e96b8, #205a72);
  box-shadow: none;
  border-radius: 4px;
}

.kreise i {
  border-color: #c8d5dc;
  background: #fff;
}

.kreise i.an {
  background: #3e96b8;
  border-color: #3e96b8;
  box-shadow: 0 0 0 2px rgba(62, 150, 184, 0.18);
}

.raffstore {
  border-color: #cfdae1;
  background: #fff;
}

.raffstore i {
  background: #3e96b8;
}

.panel__regel {
  border-radius: 0 8px 8px 0;
  border-left: 3px solid var(--petrol-signal);
  background: rgba(62, 150, 184, 0.09);
  color: #24333b;
}

.panel__fuss {
  border-top: 1px solid var(--pn-linie);
  color: var(--pn-leise);
}

/* Die Wand hinter dem Panel war auf ein dunkles Gerät abgestimmt. Ein
   weisses Gerät braucht einen etwas kräftigeren Grund, sonst schwimmt es. */
.wandflaeche {
  background: linear-gradient(158deg, #dbe4e9 0%, #c6d2d9 55%, #b9c8d0 100%);
}

/* --------------------------------------------------------------------------
   Das Panel im Hero: dieselbe Karte, aber kurz.

   Unten im Abschnitt „Bedienung" steht das vollständige Gerät mit Regel,
   Fusszeile und Schaltern — dort wird bedient. Oben steht nur der Blick
   darauf: Kopfzeile und vier Werte. Zweimal dasselbe Bild wäre eine
   Wiederholung, und die fiel sofort auf.
   -------------------------------------------------------------------------- */

.bhero__panel .panel__raster {
  margin-bottom: 0;
}

.bhero__panel .kachel__wert {
  margin-bottom: 0;
}


/* ==========================================================================
   4. Aufbau des Systembilds

   main.js koppelt den Aufbau an die Scrollposition: fertig ist die
   Zeichnung erst, wenn ihre Oberkante am Fensterrand steht. Wer davor
   anhält — und das tut jeder, der liest — sieht halbe Leitungen. Gemessen:
   nach dem Anscrollen des Abschnitts waren 6 von 12 Bahnen offen.

   Hier übernimmt --sn die Steuerung: eine Zeitachse, die startet, wenn die
   Zeichnung wirklich im Bild ist, und immer bis zum Ende läuft. Das
   !important gewinnt gegen den Inline-Wert, den main.js weiter schreibt.
   Ohne JavaScript bleibt --sn auf 1 und die Zeichnung steht vollständig da.
   ========================================================================== */

#system {
  --sn: 1;
}

#system .pg {
  --s: var(--sn) !important;
}

/* ==========================================================================
   5. Der zweite Zufluss im Systembild

   Die Quellen ausserhalb der Gebäudeautomation brauchen eine eigene Farbe.
   pg--hinweis war schon vergeben — daran hängen Zähler und Netzanschluss,
   und zwei verschiedene Bedeutungen in derselben Farbe liest niemand
   auseinander. Neutrales Grau statt eines weiteren Akzents: es sagt
   „gehört nicht zu unserer Anlage", ohne eine sechste Gewerkefarbe zu
   erfinden. 4,3:1 auf Weiss, für Linien und Flächen reichen 3:1.
   ========================================================================== */

.pg--fremd { color: #64757e; }


/* ==========================================================================
   6. Das Hero-Panel als Glas

   Die weisse Karte war dicht: 93 Prozent Deckung, ein heller Block vor dem
   Foto. Gewünscht ist Glas — die Fassade soll durchscheinen, das Panel soll
   auf dem Bild liegen und nicht davor stehen.

   Deckung 52 Prozent, kräftige Rückblende, feine Lichtkante oben und links.
   Die Schrift bleibt dunkel: über der milchigen Scheibe liegt die Helligkeit
   auch vor den dunklen Stellen des Fotos hoch genug (gemessen unten).
   Die Kacheln sind flacher und tragen eine Zeile mehr — kleiner, aber nicht
   ärmer.
   ========================================================================== */

.bhero__panel .panel {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 1px 0 0 rgba(255, 255, 255, 0.4),
    0 24px 60px -30px rgba(6, 20, 28, 0.7);
}

.bhero__panel .panel__glas {
  border-radius: 21px;
  padding: clamp(16px, 1.7vw, 22px);
  background: none;
}

.bhero__panel .panel__kopf {
  padding-bottom: 12px;
  border-bottom-color: rgba(23, 36, 43, 0.16);
}

.bhero__panel .panel__raster {
  gap: 10px;
  margin-block: 14px 0;
}

/* Kleinere Kacheln: weniger Innenrand, kleinere Zahl, dafür eine
   Datenzeile mehr je Kachel. */
.bhero__panel .kachel {
  padding: 12px 13px 13px;
  gap: 1px;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.46);
}

.bhero__panel .kachel__marke {
  font-size: 0.75rem;
}

.bhero__panel .kachel__wert {
  font-size: clamp(1.4rem, 1.75vw, 1.7rem);
  margin-bottom: 1px;
}

.bhero__panel .kachel__zusatz {
  font-size: 0.75rem;
  line-height: 1.35;
  color: #3f5058;
}

.bhero__panel .balken {
  height: 5px;
  margin-block: 5px 3px;
  background: rgba(23, 36, 43, 0.12);
}

.bhero__panel .kreise {
  margin-top: 6px;
}

.bhero__panel .kreise i {
  width: 9px;
  height: 9px;
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(23, 36, 43, 0.38);
}

.bhero__panel .raffstore {
  height: 28px;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(23, 36, 43, 0.2);
}

/* Auf grossen Fenstern wächst nur die Zahl, nicht der Kasten — die Regel
   aus Abschnitt 3 hätte die Kacheln wieder aufgebläht. */
@media (min-width: 1100px) {
  .bhero__panel .panel__glas {
    padding: clamp(18px, 1.7vw, 24px);
  }

  .bhero__panel .kachel {
    padding: 12px 13px 13px;
  }

  .bhero__panel .kachel__wert {
    font-size: clamp(1.5rem, 1.8vw, 1.8rem);
  }
}

/* Der Satz unter dem Systembild erklärt die graue Leitung darin. Er steht
   deshalb dort und nicht mehr oben im Abschnittskopf, wo er weit weg von
   seinem Gegenstand stand. */
.sysbild__text {
  margin: clamp(var(--a4), 2vw, var(--a5)) 0 0;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--grau-text);
}

/* Die Kennzahlenzeile liegt am unteren Bildrand, wo eine helle Fassadenkante
   durchläuft: im Mittel 8,5:1, in einzelnen Pixeln 3,3:1. Mehr Deckung im
   Schleier hilft dort nicht, ohne das Foto wieder zuzuziehen — ein weicher
   Schatten hebt die Schrift von den hellen Kanten ab. */
.bhero h1,
.bhero__lead,
.bhero__fuss {
  text-shadow: 0 1px 3px rgba(6, 18, 24, 0.45);
}

/* Die eingeschalteten Lichtkreise brauchen ihre Füllung zurück: die Regel
   für die Glasfassung stand später in der Datei und hat sie bei gleicher
   Spezifität überschrieben — acht gleich aussehende Kreise neben „3 von 8". */
.bhero__panel .kreise i.an {
  background: var(--petrol-signal);
  border-color: var(--petrol-signal);
  box-shadow: 0 0 0 2px rgba(62, 150, 184, 0.22);
}

/* ==========================================================================
   7. Nachbesserungen

   Die Ortsangabe steht rechts oben in der Karte, nicht neben dem
   Betriebszustand. Links der Zustand, rechts das Objekt — wie an einem Gerät.
   ========================================================================== */

.bhero__panel .panel__ort {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

/* Der Satz unter dem Systembild lief über die halbe Breite und brach dabei
   in vier Zeilen. Er gehört über die ganze Breite der Zeichnung. */
.sysbild__text {
  max-width: none;
}

/* Die Jalousie fährt nicht nur einmal beim Aufbau, sondern regelt: alle
   14 Sekunden ein kurzer Weg und zurück. Dieselbe Begründung wie beim
   Lüfterrad der Wärmepumpe — es ist das Bauteil, das sich in Wirklichkeit
   auch bewegt. Langsam und mit langen Pausen, damit es nicht flackert. */
.pg--an .pg-lamellen {
  animation: jalousie 14s ease-in-out 3.4s infinite;
}

@keyframes jalousie {
  0%, 30% { transform: translateY(0); }
  42%, 68% { transform: translateY(-13px); }
  80%, 100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pg--an .pg-lamellen {
    animation: none;
  }
}

/* Der Zeitstrahl im Ablauf lief bis zum Fuss des letzten Eintrags weiter,
   obwohl nach „Inbetriebnahme und Übergabe" nichts mehr kommt. Statt einer
   durchgehenden Linie über den ganzen Block zeichnet ihn jetzt jeder Eintrag
   selbst; der letzte hört an seinem eigenen Knoten auf. */
.ablauf.spine::before {
  display: none;
}

.ablauf .spine__eintrag::after {
  content: '';
  position: absolute;
  left: calc(clamp(var(--a6), 4vw, var(--a7)) * -1 + 5px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--regel);
}

.ablauf .spine__eintrag:first-child::after {
  top: calc(var(--a5) + 13px);
}

.ablauf .spine__eintrag:last-child::after {
  bottom: auto;
  height: calc(var(--a5) + 13px);
}

/* ==========================================================================
   8. Räumliche Fassung der Zeichnung

   Flächen statt Linien: in der Parallelprojektion braucht jeder Körper drei
   Seiten, und die Seiten brauchen unterschiedliche Helligkeit, sonst kippt
   das Bild optisch. Mehr Beleuchtung als diese drei Stufen hat eine
   Strichzeichnung nicht nötig.
   ========================================================================== */

.pg-iso {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.pg-iso--deckel { fill-opacity: 0.20; }
.pg-iso--rechts { fill-opacity: 0.11; }
.pg-iso--links  { fill-opacity: 0.05; }
.pg-iso--modul  { fill-opacity: 0.16; }
.pg-iso--geraet { fill-opacity: 0.12; }

/* Rohbau: dieselben Töne wie im Schnitt, nur als Flächen. */
.pg-iso--wand,
.pg-iso--wand2,
.pg-iso--boden,
.pg-iso--decke,
.pg-iso--kante {
  fill: rgba(32, 90, 114, 0.07);
  stroke: rgba(32, 90, 114, 0.34);
  stroke-width: 1;
  stroke-linejoin: round;
}

.pg-iso--wand2 { fill: rgba(32, 90, 114, 0.11); }
.pg-iso--boden { fill: rgba(32, 90, 114, 0.05); }
.pg-iso--decke { fill: rgba(32, 90, 114, 0.13); }
.pg-iso--kante { fill: rgba(32, 90, 114, 0.2); }

.isobild {
  margin-top: var(--a5);
}

.pgmarke {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--petrol);
}

/* ==========================================================================
   9. Das Hero-Panel dünner

   Von 62 auf 48 Prozent Deckung, die Kacheln von 46 auf 34. Die Fassade
   scheint dadurch deutlich durch. Der Preis steht in der Helligkeit: der
   Grund unter der Schrift wird dunkler und schwankt stärker mit dem Bild
   dahinter. Die Nebenschrift wird deshalb im Hero — und nur dort —
   dunkler; auf der Wandfläche unten bleibt sie, wie sie ist.
   ========================================================================== */

.bhero__panel .panel {
  background: rgba(255, 255, 255, 0.48);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  backdrop-filter: blur(34px) saturate(190%);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 1px 0 0 rgba(255, 255, 255, 0.34),
    0 24px 60px -30px rgba(6, 20, 28, 0.6);
}

.bhero__panel .kachel {
  background: rgba(255, 255, 255, 0.34);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Auf .bhero__panel .panel, nicht auf .bhero__panel: die Eigenschaft wird
   in .panel selbst gesetzt, und die naeher am Element stehende Deklaration
   gewinnt. Auf der duenneren Scheibe braucht die Nebenschrift diesen Ton,
   um am dunkelsten Punkt noch ueber 4,5:1 zu liegen. */
.bhero__panel .panel {
  --pn-leise: #2e3d43;
}

.bhero__panel .kachel__zusatz {
  color: var(--pn-leise);
}

/* ==========================================================================
   10. Noch dünner — und die Betriebsanzeige voll sichtbar

   Die Scheibe steht auf 41 Prozent. Die Kacheln bleiben etwas dichter als
   die Scheibe: auf ihnen steht die kleine Schrift, und die braucht einen
   Grund, der nicht mit jedem Fassadenraster dahinter mitschwankt. Der
   Rahmen ist dadurch dünner als der Inhalt — genau der Eindruck, den eine
   Glasscheibe mit aufgelegten Kacheln macht.

   Die Betriebs-LED ist keine Fläche, die durchscheinen soll: sie ist das
   einzige leuchtende Teil des Geräts. Voller Ton, kein Anteil vom Bild
   dahinter, kräftigerer Ring.
   ========================================================================== */

.bhero__panel .panel {
  background: rgba(255, 255, 255, 0.41);
  border-color: rgba(255, 255, 255, 0.38);
}

.bhero__panel .kachel {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.46);
}

.bhero__panel .panel__live::before {
  width: 10px;
  height: 10px;
  background: #12b06f;
  box-shadow:
    0 0 0 3px rgba(18, 176, 111, 0.28),
    0 0 12px rgba(18, 176, 111, 0.85),
    0 0 0 0 rgba(18, 176, 111, 0.6);
  animation: ledvoll 2.2s ease-out infinite;
}

@keyframes ledvoll {
  0% {
    box-shadow: 0 0 0 3px rgba(18, 176, 111, 0.28),
                0 0 12px rgba(18, 176, 111, 0.85),
                0 0 0 0 rgba(18, 176, 111, 0.6);
  }
  70% {
    box-shadow: 0 0 0 3px rgba(18, 176, 111, 0.28),
                0 0 12px rgba(18, 176, 111, 0.85),
                0 0 0 14px rgba(18, 176, 111, 0);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(18, 176, 111, 0.28),
                0 0 12px rgba(18, 176, 111, 0.85),
                0 0 0 0 rgba(18, 176, 111, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhero__panel .panel__live::before {
    animation: none;
  }
}

/* Die Kopfzeile steht als einzige Schrift direkt auf der dünnen Scheibe und
   kam dort auf 4,0:1 — unter der Norm. Statt die ganze Scheibe wieder
   dichter zu machen, liegt über den obersten 96 Pixeln ein kurzer heller
   Verlauf. Unten bleibt das Glas so dünn wie gewünscht. */
.bhero__panel .panel__glas {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.26) 0,
    rgba(255, 255, 255, 0) 96px);
}

/* ==========================================================================
   11. Telefon

   Drei Eingriffe: das Panel verschwindet aus dem Hero, der Hausschnitt
   behält seine Beschriftung statt einer Legende darunter, und das
   Systembild bekommt einen eigenen, kompakten Aufbau (in neu-sys.js).
   ========================================================================== */

/* Auf dem Telefon steht unter der Aussage das Panel — und schiebt alles
   Weitere um 650 Pixel nach unten, bevor der erste Satz Inhalt kommt. Der
   Hero trägt dort die Aussage, mehr nicht. Das vollständige Gerät steht
   ohnehin im Abschnitt Bedienung. */
@media (max-width: 720px) {
  .bhero__panel {
    display: none;
  }

  .bhero {
    padding-bottom: clamp(var(--a7), 12vw, var(--a8));
  }

  /* Beschriftung bleibt in der Zeichnung. Der Ausschnitt ist dafür breiter
     (652 statt 554 Einheiten), damit die Textspalten hineinpassen, und die
     Schrift entsprechend grösser: 24 Einheiten mal 0,54 Massstab ergeben
     13 Pixel auf dem Gerät. */
  .haus .hero__bild .pg-marke,
  .haus .hero__bild .pg-fuehrung,
  .haus .hero__bild .pg-knoten {
    display: block;
  }

  .haus .hero__legende {
    display: none;
  }

  .haus .pg-marke {
    font-size: 24px;
  }
}