/* ==========================================================================
   Eyron Systems — style.css
   Aufbau: 1 Schriften · 2 Tokens · 3 Grundlagen · 4 Bausteine · 5 Kopf
           6 Hero · 7 Abschnitte · 8 Formular · 9 Fuss · 10 Unterseiten
   ========================================================================== */

/* 1 — Schriften ---------------------------------------------------------- */
/* Archivo, Variable Font, SIL OFL. Lokal abgelegt, kein CDN-Aufruf. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2 — Tokens ------------------------------------------------------------- */

:root {
  /* Farben — aus dem Logo abgeleitet, keine Erweiterung */
  --petrol: #205a72;
  --petrol-tief: #143d4e;
  --petrol-signal: #3e96b8;
  --schwarz: #0d1114;
  /* Neutrale dunkle Gruende — bewusst ohne Petrolstich, damit Signalpetrol
     darauf wieder als Licht wirkt und nicht als weitere Flaeche. */
  --nacht: #0e1418;
  --nacht-tief: #05080a;
  --hellgrau: #edf1f3;
  --weiss: #fff;

  --grau-text: #55676f;

  --linie: rgba(13, 17, 20, 0.14);
  --linie-dunkel: rgba(255, 255, 255, 0.16);

  /* Rollen — werden je Flaeche umgesetzt */
  --grund: var(--weiss);
  --text: var(--schwarz);
  --text-leise: var(--grau-text);
  --regel: var(--linie);
  --akzent: var(--petrol);

  /* Typografie */
  --schrift: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Abstaende */
  --a1: 4px;
  --a2: 8px;
  --a3: 12px;
  --a4: 16px;
  --a5: 24px;
  --a6: 32px;
  --a7: 48px;
  --a8: 64px;
  --a9: 96px;
  --a10: 128px;

  --rand: clamp(20px, 5vw, 48px);
  --polster: clamp(72px, 9vw, 144px);
  --kopf-hoehe: 76px;
  --radius: 2px;
}

/* 3 — Grundlagen --------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--a5));
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--schwarz);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 4.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
}

h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
  max-width: 66ch;
}

a {
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl,
dd,
dt {
  margin: 0;
}

img,
svg {
  max-width: 100%;
}

::selection {
  background: var(--petrol);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--petrol-signal);
  outline-offset: 2px;
  border-radius: 1px;
}

.springmarke {
  position: absolute;
  left: var(--a4);
  top: var(--a4);
  z-index: 100;
  padding: var(--a3) var(--a5);
  background: var(--weiss);
  color: var(--schwarz);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}

.springmarke:focus {
  transform: none;
}

.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 4 — Bausteine ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--rand);
}

.abschnitt {
  position: relative;
  padding-block: var(--polster);
  background: var(--grund);
  color: var(--text);
}

/* Flaechen — der Rhythmus der Seite entsteht hier, nicht durch Bewegung */
.f-weiss {
  --grund: var(--weiss);
  --text: var(--schwarz);
  --text-leise: var(--grau-text);
  --regel: var(--linie);
  --akzent: var(--petrol);
}

.f-hell {
  --grund: var(--hellgrau);
  --text: var(--schwarz);
  --text-leise: var(--grau-text);
  --regel: var(--linie);
  --akzent: var(--petrol);
}

.f-tief {
  --grund: var(--petrol-tief);
  --text: var(--weiss);
  --text-leise: rgba(255, 255, 255, 0.72);
  --regel: var(--linie-dunkel);
  --akzent: var(--petrol-signal);
}

.f-schwarz {
  --grund: var(--schwarz);
  --text: var(--weiss);
  --text-leise: rgba(255, 255, 255, 0.66);
  --regel: var(--linie-dunkel);
  --akzent: var(--petrol-signal);
}

.leise {
  color: var(--text-leise);
}

/* Abschnittskopf: Ueberschrift plus einordnender Satz, kein Versal-Label */
.kopfzeile {
  max-width: 62ch;
  margin-bottom: clamp(var(--a7), 6vw, var(--a9));
}

.kopfzeile p {
  margin-top: var(--a5);
  font-size: 1.25rem;
  line-height: 1.55;
  max-width: 54ch;
  color: var(--text-leise);
}

/* Knoten — der Ringpunkt aus dem Logo */
.knoten {
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--akzent);
  border-radius: 50%;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primaer {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--weiss);
}

.btn--primaer:hover {
  background: var(--petrol-tief);
  border-color: var(--petrol-tief);
}

.btn--hell {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--schwarz);
}

.btn--hell:hover {
  background: var(--hellgrau);
  border-color: var(--hellgrau);
}

.btn--kontur {
  background: transparent;
  border-color: currentColor;
  color: var(--text);
}

.btn--kontur:hover {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--weiss);
}

/* Textlink mit Unterstreichung erst beim Hover */
.tlink {
  display: inline-block;
  color: var(--akzent);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.tlink:hover {
  border-bottom-color: currentColor;
}

/* Platzhalter — muss auffallen, damit nichts unbemerkt online geht */
.ph {
  border: 1px dashed var(--petrol-signal);
  padding: 2px 7px;
  border-radius: var(--radius);
  font-style: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.ph-hinweis {
  border: 1px dashed var(--petrol-signal);
  border-radius: var(--radius);
  padding: var(--a4) var(--a5);
  margin-bottom: var(--a8);
  max-width: 66ch;
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* 5 — Kopf --------------------------------------------------------------- */

.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--kopf-hoehe);
  color: var(--weiss);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border-bottom: 1px solid transparent;
}

/* Scrim: faengt jeden Resthelligkeitswert der Sequenz ab */
.kopf::before {
  content: '';
  position: absolute;
  inset: 0 0 -32px;
  background: linear-gradient(to bottom, rgba(13, 17, 20, 0.88), rgba(13, 17, 20, 0));
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.kopf--fest {
  background: var(--weiss);
  color: var(--schwarz);
  border-bottom-color: var(--linie);
}

.kopf--fest::before {
  opacity: 0;
}

.kopf__innen {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--a6);
}

.kopf__logo {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

/* Das Logo liegt in zwei Farbfassungen vor. Beide werden geladen, umgeschaltet
   wird per Klasse — kein Nachladen und kein Aufblitzen beim Wechsel. */
.kopf__logo {
  display: grid;
}

.kopf__logo img {
  height: 46px;
  width: auto;
  display: block;
  grid-area: 1 / 1;
}

/* Sagt neben der Wortmarke, was das Büro ist. Auf schmaleren Fenstern
   verschwindet die Zeile, bevor sie mit der Navigation kollidiert. */
.kopf__zusatz {
  margin: 0 auto 0 0;
  max-width: 24ch;
  padding-left: var(--a5);
  border-left: 1px solid currentColor;
  font-size: 0.8125rem;
  line-height: 1.35;
  opacity: 0.62;
}

/* --hell ist die helle Fassung fuer dunklen Grund, --dunkel umgekehrt. */
.kopf--fest .logo-bild--hell,
.kopf:not(.kopf--fest) .logo-bild--dunkel {
  visibility: hidden;
}

.kopf__nav {
  display: flex;
  gap: clamp(var(--a4), 2vw, var(--a6));
}

.kopf__nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  padding: var(--a2) 0;
  border-bottom: 1px solid transparent;
}

.kopf__nav a:hover {
  border-bottom-color: currentColor;
}

.kopf .btn {
  flex: none;
  padding: 9px 18px;
  font-size: 0.9375rem;
}

.kopf:not(.kopf--fest) .btn--primaer {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--weiss);
}

.kopf:not(.kopf--fest) .btn--primaer:hover {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--schwarz);
}

/* Der Aufruf im Menue erscheint nur dort, wo der Kopfbutton wegfaellt */
.nur-schmal {
  display: none;
}

.kopf__schalter {
  display: none;
  flex: none;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}

/* 6 — Hero, Gebäudeschnitt und Systembild -------------------------------- */
/* Ersetzt die gepinnte GSAP-Sequenz über 160 vh. Der Hero ist hell, die
   Zeichnung steht neben dem Text und baut sich beim Sichtbarwerden einmal
   auf. Farbrollen der Zeichnung siehe unten; sie werden nirgends vermischt. */

/* --- 1. Farben der Grafik ------------------------------------------------ */
/* Die Rollen sind vorgegeben und werden nirgends vermischt:
     Petrol        Struktur, Rohbau, Gehäuse, Wortmarke
     Signalpetrol  aktive Verbindungen, Steuerung, IT
     Gelb          ausschliesslich Beleuchtung
     Grün          ausschliesslich Energie
     Blau          ausschliesslich Raumklima
     Stahlblau     ausschliesslich Beschattung
     Orange        ausschliesslich Netzbezug und Hinweise
   Rot bleibt Fehlern vorbehalten und kommt deshalb nicht vor.

   Alle sechs sind gegen den hellen Grund #EDF1F3 gerechnet und liegen als
   Linie über 3:1. Die kräftigeren Leuchtfarben der alten Sequenz erreichen
   auf hellem Grund nur 1,4 bis 2,4:1 — sie funktionieren nur auf Schwarz. */

.pg {
  --p-struktur: #205a72;
  --p-aktiv: #2f8bb0;
  --p-licht: #b9862a;
  --p-energie: #2f8a5c;
  --p-klima: #3f7ba6;
  --p-besch: #5f7391;
  --p-zutritt: #7657a3;
  --p-hinweis: #b46a2c;
  --p-text: #4c5f68;

  display: block;
  width: 100%;
  height: auto;
}

.pg * {
  vector-effect: non-scaling-stroke;
}

/* --- 2. Rohbau ----------------------------------------------------------- */

.pg-schnitt {
  fill: rgba(32, 90, 114, 0.1);
  stroke: rgba(32, 90, 114, 0.4);
  stroke-width: 1;
}

.pg-raum {
  fill: rgba(32, 90, 114, 0.03);
  stroke: none;
}

.pg-wand {
  fill: rgba(32, 90, 114, 0.08);
  stroke: rgba(32, 90, 114, 0.3);
  stroke-width: 1;
}

.pg-oeffnung {
  fill: #fff;
  stroke: rgba(32, 90, 114, 0.34);
  stroke-width: 1;
}

/* Das Dach trägt die Silhouette und ist deshalb kräftiger als der übrige
   geschnittene Rohbau. */
.pg-dach {
  fill: rgba(32, 90, 114, 0.17);
  stroke: rgba(32, 90, 114, 0.55);
  stroke-width: 1.3;
  stroke-linejoin: miter;
}

/* Deckung nur angedeutet: sechs Striche quer zur Neigung. Mehr wäre
   Schraffur und würde mit dem Erdreich konkurrieren. */
.pg-ziegel {
  fill: none;
  stroke: rgba(32, 90, 114, 0.34);
  stroke-width: 1;
}

.pg-erde {
  fill: none;
  stroke: rgba(32, 90, 114, 0.16);
  stroke-width: 1;
}

.pg-gelaende {
  fill: none;
  stroke: rgba(32, 90, 114, 0.36);
  stroke-width: 1.3;
}

.pg--struktur { color: var(--p-struktur); }

/* --- 3. Anlagenteile ----------------------------------------------------- */

.pg-flaeche {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.pg-detail {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.6;
}

.pg-nabe,
.pg-pol,
.pg-fuellung {
  fill: currentColor;
  stroke: none;
  opacity: 0.85;
}

.pg-fuellung {
  opacity: 0.28;
}

/* Displayfläche eines Bauteils: Raumbedienstelle, Endgerät. Ohne eigene
   Regel fiel der Rechteck-Standardwert auf Schwarz zurück — die
   Raumbedienstelle war ein schwarzer Klotz und der Wert darin unsichtbar.
   Sie ist hell, weil das Gerät eingeschaltet ist. */
.pg-anzeige {
  fill: #fff;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.85;
}

.pg-wert {
  font-family: var(--schrift);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: currentColor;
}

/* Raffstorekasten, Sohlbank, Verteilerbalken: gefüllte Bauteile ohne
   eigene Kontur. */
.pg-blende,
.pg-balken {
  fill: currentColor;
  opacity: 0.42;
  stroke: none;
}

.pg-lamelle {
  fill: currentColor;
  opacity: 0.3;
  stroke: currentColor;
  stroke-width: 0.8;
}

.pg-kegel {
  fill: url(#pgKegel);
  stroke: none;
}

.pg-klemme {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.5;
}

/* Der Schaltschrank ist der Zielpunkt der Zeichnung und deshalb das einzige
   Bauteil mit gefüllter Fläche und kräftiger Kontur. */
.pg-schrank {
  fill: rgba(47, 139, 176, 0.09);
  stroke: var(--p-aktiv);
  stroke-width: 1.8;
}

.pg-logo path {
  fill: var(--p-struktur);
}

.pg-schild {
  font-family: var(--schrift);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  fill: var(--p-struktur);
}

.pg-schild.pg--klein {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.pg-unterzeile {
  font-family: var(--schrift);
  font-size: 13px;
  font-weight: 500;
  fill: var(--p-text);
}

/* Der Name einer Ebene über ihrer Spalte. Kräftiger als eine Bauteilmarke,
   damit die Dreiteilung vor den Einzelteilen gelesen wird. */
.pg-ebene {
  font-family: var(--schrift);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: var(--p-struktur);
}

/* Farbrollen als currentColor, damit Bauteil und Leitung ohne Wiederholung
   dieselbe Farbe tragen. */
.pg--aktiv { color: var(--p-aktiv); }
.pg--licht { color: var(--p-licht); }
.pg--energie { color: var(--p-energie); }
.pg--klima { color: var(--p-klima); }
.pg--besch { color: var(--p-besch); }
.pg--zutritt { color: var(--p-zutritt); }
.pg--hinweis { color: var(--p-hinweis); }

/* --- 4. Leitungen, Bezugslinien, Knoten, Beschriftungen ------------------ */

/* Bus. Trägt den Impuls. */
.pg-bahn {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

/* Bezugslinie zur Beschriftung. Dünner, ohne Impuls — sonst sähe es aus,
   als liefen Daten in die Schrift. */
.pg-fuehrung {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.6;
}

.pg-knoten {
  fill: var(--hellgrau, #edf1f3);
  stroke: currentColor;
  stroke-width: 1.8;
}

.pg-marke {
  fill: var(--p-text);
  font-family: var(--schrift);
  font-size: 13.5px;
  font-weight: 500;
}

/* --- 5. Panel ------------------------------------------------------------ */

.pg-panel {
  fill: #10171c;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
  rx: 3;
}

/* Die helle Fassung. Sie steht im Systembild neben einer hellen Zeichnung —
   ein schwarzer Kasten dort liest sich als Fremdkörper. */
.pg-panel--hell {
  fill: #fff;
  stroke: rgba(32, 90, 114, 0.34);
  stroke-width: 1.4;
}

.pg-kachel {
  fill: rgba(255, 255, 255, 0.035);
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
}

.pg-kachel.pg--auf-hell {
  fill: rgba(32, 90, 114, 0.035);
  stroke: rgba(32, 90, 114, 0.16);
}

/* Der Farbstreifen an der Kachelkante trägt die Gewerkefarbe. Auf Weiss
   kommen Gelb und Grün als Schrift nicht auf die geforderten 4,5:1 — als
   Fläche von 3 px Breite ist die Farbe zulässig und trotzdem eindeutig. */
.pg-streifen {
  fill: currentColor;
  stroke: none;
}

.pg-plinie {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
}

.pg-plinie.pg--auf-hell {
  stroke: rgba(32, 90, 114, 0.18);
}

.pg-ptext {
  font-family: var(--schrift);
  font-size: 12.5px;
}

.pg--stark { fill: rgba(255, 255, 255, 0.9); font-weight: 600; }
.pg--leise { fill: rgba(255, 255, 255, 0.5); }
.pg--stark.pg--auf-hell { fill: var(--schwarz, #0d1114); }
.pg--leise.pg--auf-hell { fill: #66757c; }

.pg-pwert {
  font-family: var(--schrift);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
  fill: currentColor;
}

.pg-pwert.pg--auf-hell {
  fill: var(--schwarz, #0d1114);
}

.pg-peinheit {
  font-size: 12.5px;
  font-weight: 500;
  fill: rgba(255, 255, 255, 0.5);
}

.pg-peinheit.pg--auf-hell {
  fill: #66757c;
}

/* Die Betriebs-LED ist die einzige Stelle, an der Grün als Statusfarbe
   blinkt — genau wie im bestehenden Wandpanel. */
.pg-led {
  fill: #2f8a5c;
}

.pg--an .pg-led {
  animation: pgLed 3.2s 2.6s ease-in-out infinite;
}

@keyframes pgLed {
  0%, 88%, 100% { opacity: 1; }
  92% { opacity: 0.25; }
}

/* --- 6. Aufbau: einmalig beim Sichtbarwerden ----------------------------- */
/* Die Klasse .pg--an wird von assets/js/main.js gesetzt, sobald das Modul
   im Viewport steht, und bleibt danach stehen. Beim Zurückscrollen wird
   nichts abgebaut. --i ist die Nummer des Bauteils und staffelt die
   Verzögerung. Der Aufbau ist nach etwa 2,6 s abgeschlossen. */

.pg-bahn,
.pg-fuehrung,
.pg-knoten,
.pg-marke,
.pg-teil {
  --v: calc(0.09s * var(--i, 1));
}

/* Jede Bahn trägt pathLength="100". Damit sind Strichmuster und Versatz
   Prozentwerte der Pfadlänge und stehen von der ersten gerenderten Zeile
   an richtig. Vorher stand hier ein Schätzwert, bis JavaScript nachgemessen
   hatte — bei jedem Aufruf blitzten dadurch kurz Bruchstücke der Leitungen
   auf. Ausserdem kein non-scaling-stroke: Strichmuster wird sonst in
   Geräteeinheiten gerechnet, die Pfadlänge aber in Nutzereinheiten, und
   an jeder Leitung bleibt ein Stummel stehen. */
.pg-bahn,
.pg-fuehrung {
  vector-effect: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.pg--an .pg-bahn,
.pg--an .pg-fuehrung {
  transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1) var(--v);
  stroke-dashoffset: 0;
}

.pg-teil,
.pg-knoten,
.pg-marke {
  opacity: 0;
}

.pg--an .pg-teil,
.pg--an .pg-knoten,
.pg--an .pg-marke {
  transition: opacity 0.5s ease calc(var(--v) + 0.3s);
  opacity: 1;
}

/* Der Rohbau steht sofort. Er ist der Rahmen, nicht das Ereignis. */
.pg-bau {
  opacity: 0;
  transition: opacity 0.45s ease;
}

.pg--an .pg-bau {
  opacity: 1;
}

/* --- 7. Datenfluss ------------------------------------------------------- */
/* Ein leuchtender Punkt je Bahn statt eines wandernden Strichabschnitts.
   Der Strichabschnitt war der falsche Weg: Strichmuster und Versatz sind
   dasselbe Werkzeug, mit dem die Leitung aufgebaut wird, und beide
   überlagerten sich zu Lücken und Sprüngen. Der Punkt läuft über
   offset-path auf demselben Weg, unabhängig vom Aufbau, mit gleichmässiger
   Geschwindigkeit — main.js setzt die Dauer aus der Pfadlänge, damit lange
   und kurze Leitungen dasselbe Tempo haben. Richtung: zur Steuerung. */

.pg-punkt {
  /* Ausdrücklich, nicht auf den Anfangswert vertraut: der Bezugsrahmen von
     offset-path muss die viewBox sein, sonst rechnet der Browser die
     Pfadkoordinaten gegen den Umriss des Punktes. */
  transform-box: view-box;
  offset-rotate: 0deg;
  opacity: 0;
}

.pg-punkt .pg-halo {
  fill: currentColor;
  opacity: 0.16;
}

.pg-punkt .pg-kern {
  fill: currentColor;
}

.pg--an .pg-punkt {
  animation: pgLauf var(--d, 2s) linear var(--vd, 0s) infinite;
}

@keyframes pgLauf {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Der Schrank quittiert: ein kurzes Aufhellen der Kontur. Ohne das käme
   der Fluss an und nichts geschähe. */
.pg--an .pg-schrank {
  animation: pgQuittung 3.4s 3s infinite;
}

@keyframes pgQuittung {
  0%, 62%, 100% { stroke-width: 1.8; }
  70% { stroke-width: 3.4; }
}

/* --- 7b. Die Anlage arbeitet -------------------------------------------- */
/* Vier kleine Bewegungen, mehr nicht. Jede zeigt etwas, das das Bauteil in
   Wirklichkeit auch tut; keine ist Zierrat, und keine läuft schnell genug,
   um beim Lesen zu stören. */

/* Das Lüfterrad der Wärmepumpe dreht. */
.pg--an .pg-rotor {
  animation: pgDreh 9s linear 2.6s infinite;
}

@keyframes pgDreh {
  to { transform: rotate(360deg); }
}

/* Das Licht fährt am Ende des Aufbaus hoch und atmet danach langsam. */
.pg-kegel {
  opacity: 0;
}

.pg--an .pg-leuchte .pg-kegel {
  animation: pgDimmen 14s ease-in-out 2.2s infinite;
}

@keyframes pgDimmen {
  0% { opacity: 0; }
  9% { opacity: 1; }
  50% { opacity: 0.62; }
  100% { opacity: 1; }
}

/* Der Raffstore fährt einmal auf seine Stellung und bleibt dort. */
.pg-lamellen {
  transform: translateY(-26px);
}

.pg--an .pg-lamellen {
  transition: transform 1.1s cubic-bezier(0.33, 0, 0.2, 1) 2s;
  transform: translateY(0);
}

/* Das Ladezeichen am Speicher blinkt, solange geladen wird. */
.pg-blitz {
  fill: currentColor;
  stroke: none;
  opacity: 0.9;
}

.pg--an .pg-blitz {
  animation: pgLaden 2.6s ease-in-out 2.8s infinite;
}

@keyframes pgLaden {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/* --- 8. Reduzierte Bewegung --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pg-bahn,
  .pg-fuehrung {
    stroke-dashoffset: 0;
    transition: none;
  }

  .pg-teil,
  .pg-knoten,
  .pg-marke,
  .pg-bau {
    opacity: 1;
    transition: none;
  }

  .pg-punkt {
    display: none;
  }

  .pg-kegel {
    opacity: 1;
  }

  .pg-lamellen {
    transform: none;
    transition: none;
  }

  .pg-led,
  .pg-blitz,
  .pg--an .pg-rotor,
  .pg--an .pg-leuchte .pg-kegel,
  .pg--an .pg-schrank {
    animation: none;
  }

  .hero__bild {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   9. Der Hero
   ========================================================================== */

/* Nicht .ph — diese Klasse ist in style.css der Platzhalter-Marker mit
   gestricheltem Rahmen. Der lag als Kasten um den ganzen Hero. */
.hero {
  --f: 0;
  position: relative;
  background: var(--hellgrau);
  color: var(--schwarz);
  padding-top: calc(var(--kopf-hoehe) + clamp(var(--a5), 2.6vw, var(--a7)));
  padding-bottom: clamp(var(--a6), 3.5vw, var(--a8));
  overflow: clip;
}

/* Die Zeichnung bekommt die grössere Spalte. Sie ist der Beleg, der Text
   ist die Behauptung. */
.hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.63fr) minmax(0, 1.37fr);
  gap: clamp(var(--a5), 2.4vw, var(--a6));
  align-items: center;
  width: 100%;
}

/* Der einzige scrollgekoppelte Moment der Seite: beim Verlassen des Heros
   zieht sich das Haus nach links unten zusammen und übergibt an das
   Systembild. Eine Transform auf einem Element, sonst nichts — das läuft
   auf dem Compositor und kostet kein Layout. */
.hero__bild {
  /* Die Zeichnung darf in den Seitenrand hineinlaufen. Sie ist der Beleg,
     und ein Beleg, der kleiner ist als der Absatz daneben, überzeugt nicht. */
  margin-inline-end: calc(-1 * clamp(0px, 3.4vw, 54px));
  transform: translate3d(calc(var(--f) * -4%), calc(var(--f) * 7%), 0)
             scale(calc(1 - var(--f) * 0.12));
  transform-origin: 18% 100%;
  opacity: calc(1 - var(--f) * 0.35);
  will-change: transform;
}

.hero h1 {
  font-size: clamp(1.85rem, 2.4vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.hero__lead {
  margin-top: var(--a5);
  max-width: 42ch;
  font-size: 1.0rem;
  line-height: 1.6;
  color: var(--grau-text);
}

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

.btn--gross {
  padding: 15px 30px;
  font-size: 1.03rem;
}

.btn--rand {
  padding: 13px 22px;
  background: transparent;
  border: 1px solid rgba(13, 17, 20, 0.22);
  color: var(--schwarz);
  font-size: 1rem;
}

.btn--rand:hover {
  border-color: var(--petrol);
  color: var(--petrol);
}

/* Legende. Nur auf schmalen Fenstern sichtbar, dort ersetzt sie die
   Beschriftungen in der Zeichnung. */
.hero__legende {
  display: none;
  list-style: none;
  margin: var(--a5) 0 0;
  padding: 0;
  gap: 4px 20px;
  font-size: 0.9375rem;
  color: var(--grau-text);
}

.hero__lpunkt {
  position: relative;
  padding-left: 17px;
  line-height: 1.7;
}

.hero__lpunkt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border: 2px solid var(--pkt, currentColor);
  border-radius: 50%;
}

/* Nur der Ring trägt die Gewerkefarbe, nicht die Schrift: als Text kämen
   Gelb und Grün auf hellem Grund nicht auf die geforderten 4,5:1. */
.hero__lpunkt--energie { --pkt: #2f8a5c; }
.hero__lpunkt--besch { --pkt: #5f7391; }
.hero__lpunkt--licht { --pkt: #b9862a; }
.hero__lpunkt--klima { --pkt: #3f7ba6; }
.hero__lpunkt--zutritt { --pkt: #7657a3; }
.hero__lpunkt--aktiv { --pkt: #2f8bb0; }

/* ==========================================================================
   11. Das Systembild
   ========================================================================== */

.system {
  background: var(--weiss);
  padding-block: clamp(var(--a8), 6vw, var(--a10));
}

/* Überschrift links, Einordnung rechts. Als Block untereinander liess der
   Abschnitt die rechte Hälfte leer — derselbe Fehler wie bei den drei
   Leistungsfeldern. */
.system__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(var(--a5), 4vw, var(--a8));
  align-items: end;
  margin-bottom: clamp(var(--a6), 3.5vw, var(--a7));
  padding-bottom: clamp(var(--a5), 2.5vw, var(--a6));
  border-bottom: 1px solid var(--linie);
}

.system h2 {
  max-width: 18ch;
  font-size: clamp(1.55rem, 2.5vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.system__kopf p {
  max-width: 58ch;
  font-size: 1.0rem;
  line-height: 1.6;
  color: var(--grau-text);
}

@media (max-width: 860px) {
  .system__kopf {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .system h2 {
    max-width: none;
  }
}

/* Auf Weiss ist der Ringknoten weiss gefüllt, sonst sitzt ein hellgrauer
   Punkt auf hellem Grund. */
.system .pg-knoten {
  fill: var(--weiss, #fff);
}

/* Zwei Fassungen desselben Bildes: quer für breite Fenster, hoch für
   schmale. Vorher stand die quere in einem Kasten mit waagerechtem
   Rollbalken — auf dem Handy musste man das Bild zur Seite schieben, um
   das Ende zu sehen. Der Umschaltpunkt liegt dort, wo die drei Spalten
   zu schmal für ihre Beschriftung werden. */
.pg--hoch {
  display: none;
}

@media (max-width: 860px) {
  .pg--quer {
    display: none;
  }

  .pg--hoch {
    display: block;
    max-width: 520px;
    margin-inline: auto;
  }
}

/* Die hochkante Fassung ist nur 400 Zeichnungseinheiten breit, die quere
   1240 — auf demselben Handy erscheint dort also alles rund dreimal so
   gross. Angehoben wird deshalb nur noch wenig, und nur bei der
   Beschriftung: dieses Bild besteht aus seinen Benennungen. */
.pg--hoch .pg-marke {
  font-size: 15px;
}

.pg--hoch .pg-ebene {
  font-size: 17px;
}

/* --- Aufbau des Systembilds: von links nach rechts ----------------------- */
/* Das Bild liest sich in einer Richtung — Feld, Automation, Bedienung —,
   und genau so baut es sich auf. Der Rang --r eines Bauteils ist seine Lage
   auf der x-Achse (hochkant: auf der y-Achse); main.js misst ihn einmal.
   --s ist der Scrollfortschritt über die Zeichnung. Gerechnet wird hier,
   JavaScript liefert nur die eine Zahl.

   Das ersetzt für dieses Bild den zeitgesteuerten Aufbau. Der lief los,
   sobald ein Fünftel des Bildes im Fenster stand — bei einer hohen Grafik
   also, wenn gerade die Oberkante zu sehen war. Man sah dann die oberen
   Leitungen und Datenpunkte schon, bevor das Bild überhaupt dastand. */

.pg--reihum {
  --s: 0;
}

.pg--reihum .pg-bahn,
.pg--reihum .pg-teil,
.pg--reihum .pg-knoten,
.pg--reihum .pg-marke,
.pg--reihum .pg-ebene,
.pg--reihum .pg-punkt {
  --p: clamp(0, (var(--s) - var(--r, 0) * 0.66) * 3, 1);
  transition: none;
}

.pg--reihum .pg-bahn {
  stroke-dashoffset: calc((1 - var(--p)) * 100px);
}

.pg--reihum .pg-teil,
.pg--reihum .pg-knoten,
.pg--reihum .pg-marke,
.pg--reihum .pg-ebene {
  opacity: var(--p);
}

/* Der Datenpunkt gehört zur fertigen Leitung. Die dritte Potenz hält ihn
   zurück, bis sie fast steht. */
.pg--reihum .pg-punkt {
  opacity: calc(var(--p) * var(--p) * var(--p));
}

/* --- 12. Schmale Fenster ------------------------------------------------- */

@media (max-width: 980px) {
  .hero__raster {
    grid-template-columns: 1fr;
    gap: clamp(var(--a6), 6vw, var(--a7));
  }

  .hero h1 {
    font-size: clamp(1.85rem, 6.2vw, 2.5rem);
  }

  .hero__lead {
    max-width: none;
  }

  /* Text zuerst, Zeichnung danach. */
  .hero__bild {
    order: 3;
    margin-inline-end: 0;
    transform: none;
    opacity: 1;
  }
}

/* Bei 350 px Bildbreite kämen 13,5 Zeichnungseinheiten Schrift auf etwa
   8 px. Beschriftung, Bezugslinien und Ringknoten werden deshalb
   ausgeblendet; die Namen stehen darunter als Legende in echter
   Schriftgrösse, mit Farbring je Gewerk. */
@media (max-width: 720px) {
  .hero__bild .pg-marke,
  .hero__bild .pg-fuehrung,
  .hero__bild .pg-knoten {
    display: none;
  }

  .hero__legende {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

}

@media (max-width: 560px) {
  .hero__aktion .btn {
    width: 100%;
    text-align: center;
  }

  /* Beschriftungen in der Grafik werden sonst zu klein zum Lesen. */
  .pg-marke {
    font-size: 16px;
  }
}

/* 7 — Abschnitte --------------------------------------------------------- */

/* 7.1 Drei Leistungsfelder — gleichrangig, keine Karten, keine Schatten */
.felder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Flex, damit der Link in allen drei Spalten auf derselben Linie sitzt.
   Ungleiche Textlaengen wuerden die Gleichrangigkeit sonst leise aufheben.
   Die Spalte beginnt mit einer 2-px-Oberkante statt mit einem Ringpunkt —
   der stand als einzelner Kreis ueber der Ueberschrift und las sich wie ein
   verrutschter Aufzaehlungspunkt. */
.feld {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--a5);
  padding-inline: clamp(var(--a5), 3vw, var(--a7));
  border-top: 2px solid var(--akzent);
  border-left: 1px solid var(--regel);
}

.feld:first-child {
  padding-left: 0;
  border-left: 0;
}

.feld:last-child {
  padding-right: 0;
}

.feld h3 {
  margin-bottom: var(--a4);
}

.feld p {
  color: var(--text-leise);
}

.feld .tlink {
  margin-top: auto;
  padding-top: var(--a6);
}

/* 7.2 Haltung */
.haltung {
  border-top: 1px solid var(--regel);
}

.haltung__satz {
  border-bottom: 1px solid var(--regel);
  padding-block: clamp(var(--a5), 3vw, var(--a7));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(var(--a5), 4vw, var(--a8));
  align-items: baseline;
}

.haltung__satz h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.haltung__satz p {
  color: var(--text-leise);
}

/* 7.3 Bedienung — das Wandpanel */

.bedienung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--a6), 6vw, var(--a9));
  align-items: center;
}

.bedienung__text h2 {
  margin-bottom: var(--a5);
}

.bedienung__text p + p {
  margin-top: var(--a5);
}

.bedienung__text p {
  color: var(--text-leise);
  font-size: 1.125rem;
  line-height: 1.6;
}

.bedienung__panel {
  margin: 0;
  justify-self: end;
  max-width: 560px;
  /* Ohne min-width: 0 zwingt der Mindestinhalt des Panels das Raster
     breiter als den Satzspiegel — das war der horizontale Ueberhang. */
  min-width: 0;
}

.bedienung__text {
  min-width: 0;
}

.bedienung__panel figcaption {
  margin-top: var(--a4);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-leise);
}

/* Das Panel ist HTML, kein SVG. Grund: In einem SVG mit fester viewBox
   skaliert Text mit der Grafik statt mit dem Leser — die Schriftgroessen
   waeren nicht unabhaengig steuerbar, der Text nicht markierbar und fuer
   einen Screenreader nur ueber den title erreichbar. */

/* Das Panel ist HTML, kein SVG. Grund: In einem SVG mit fester viewBox
   skaliert Text mit der Grafik statt mit dem Leser — die Schriftgroessen
   waeren nicht unabhaengig steuerbar, der Text nicht markierbar und fuer
   einen Screenreader nur ueber den title erreichbar.

   Das Geraet soll leuchten, nicht bloss dunkel sein: Verlauf im Gehaeuse,
   Lichtkante oben, Schein aus dem Glas heraus und eine Abstrahlung nach
   unten, als faenge die Wand das Licht auf. */

/* Die Wandflaeche ist der Grund, auf dem das Panel haengt. Sie ist auf das
   Bild begrenzt und aendert die Helligkeit des Abschnitts nicht. */
/* Die Wand ist heller als der Abschnitt und deutlich heller als das Geraet.
   Vorher hatten Hintergrund, Wand, Gehaeuse und Display fast denselben Ton —
   das Panel verschmolz mit dem Grund. */
.wandflaeche {
  position: relative;
  isolation: isolate;
  padding: clamp(26px, 3.4vw, 46px);
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(158deg, #e3e9ec 0%, #d3dce1 55%, #c9d4da 100%);
}

/* Variante A — sehr dezente Leiterbahnstruktur, rein aus Verlaeufen */
.wandflaeche__raster {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(32, 90, 114, 0.09) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(32, 90, 114, 0.09) 0 1px, transparent 1px 64px),
    radial-gradient(circle at 64px 64px, rgba(32, 90, 114, 0.22) 0 2px, transparent 2px),
    radial-gradient(circle at 192px 128px, rgba(32, 90, 114, 0.22) 0 2px, transparent 2px);
  background-size: 64px 64px, 64px 64px, 256px 192px, 256px 192px;
}

.wandflaeche--a .wandflaeche__raster {
  opacity: 1;
}

.wandflaeche--a .hgrund {
  opacity: 0;
}

/* Variante B — stark reduzierte, durchscheinende Gebaeudekontur.
   Keine gefuellten Fenster: die breiten Balken hinter dem Panel waren der
   Grund, warum das Geraet aufgeklebt wirkte. */
.wandflaeche--b .hgrund {
  opacity: 0.5;
}

.wandflaeche--b .hgrund__raum rect {
  fill: rgba(32, 90, 114, 0.05);
}

.wandflaeche--b .hgrund__bau rect,
.wandflaeche--b .hgrund__bau path,
.wandflaeche--b .hgrund__bau polyline {
  stroke: rgba(32, 90, 114, 0.22);
}

.hgrund {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
}

.hgrund__bau rect,
.hgrund__bau path,
.hgrund__bau polyline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.hgrund__raum rect {
  fill: rgba(255, 255, 255, 0.05);
  stroke: none;
}

/* Das Panel selbst: eine Glasscheibe, kein doppelter Kasten. Der Untergrund
   scheint durch, deshalb wirkt es schlank statt kastenartig. */
/* Rauchglas: eine Scheibe, kein Rahmen im Rahmen. Feine Petrolkante,
   Reflexion an Ober- und linker Kante, kontrollierter Schatten auf die Wand,
   dahinter ein schwacher Petrolschein. */
.panel {
  position: relative;
  border-radius: 12px;
  padding: 0;
  background: rgba(7, 15, 20, 0.9);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(62, 150, 184, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    0 18px 42px -18px rgba(6, 20, 28, 0.6),
    0 0 54px -12px rgba(62, 150, 184, 0.4);
}

.panel__glas {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  padding: clamp(18px, 2.4vw, 24px);
  color: var(--weiss);
  background: radial-gradient(120% 75% at 50% -8%, rgba(62, 150, 184, 0.1), transparent 60%);
}

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

/* Betriebsanzeige. Grün ist hier keine vierte Markenfarbe, sondern Teil des
   dargestellten Geräts — sie kommt im Seitenlayout nirgends sonst vor. */
.panel__live {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.panel__live::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc97;
  box-shadow: 0 0 6px rgba(61, 220, 151, 0.9), 0 0 0 0 rgba(61, 220, 151, 0.55);
  animation: led 2.4s ease-out infinite;
}

@keyframes led {
  70% {
    box-shadow: 0 0 6px rgba(61, 220, 151, 0.9), 0 0 0 9px rgba(61, 220, 151, 0);
  }
  100% {
    box-shadow: 0 0 6px rgba(61, 220, 151, 0.9), 0 0 0 0 rgba(61, 220, 151, 0);
  }
}

.panel__ort {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  margin-right: auto;
}

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

.panel__raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--a3);
  margin-block: var(--a4);
}

.kachel {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--a4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.01));
}

.kachel__marke {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}

.kachel__wert {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

.kachel__einheit {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0;
}

.kachel__zusatz {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.5);
}

/* Balken als Prozentwert, nicht als Koordinate — datengetrieben und ohne
   Rechnerei animierbar. */
.balken {
  height: 6px;
  margin-block: 6px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.balken i {
  display: block;
  height: 100%;
  background: var(--petrol-signal);
  box-shadow: 0 0 8px rgba(62, 150, 184, 0.8);
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.kreise {
  display: flex;
  gap: 7px;
  margin-top: 8px;
}

.kreise i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.kreise i.an {
  background: var(--petrol-signal);
  border-color: var(--petrol-signal);
  box-shadow: 0 0 7px rgba(62, 150, 184, 0.9);
}

/* Behang: acht Lamellen à 2 px mit 2 px Fuge füllen die Innenhöhe von 30 px
   genau aus. Die Zahl der geschlossenen Lamellen entspricht dem Prozentwert
   daneben — die Grafik zeigt also wirklich den Wert, nicht ungefähr. */
.raffstore {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 36px;
  margin-top: 8px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1px;
}

.raffstore i {
  flex: none;
  height: 2px;
  background: rgba(62, 150, 184, 0.9);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.raffstore i.zu {
  opacity: 1;
}

/* Die Regel, die gefeuert hat. Der eigentliche Zweck des Panels: nicht zeigen,
   dass sich Werte ändern, sondern warum. */
.panel__regel {
  min-height: 3.4em;
  padding: var(--a3) var(--a4);
  border-left: 2px solid var(--petrol-signal);
  background: rgba(62, 150, 184, 0.08);
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: none;
}

.panel__fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--a4);
  margin-top: var(--a4);
  padding-top: var(--a3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Bedienung: der Besucher schaltet die Situation, nicht die Seite. */
.szenen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2);
  margin-top: var(--a5);
}

.szenen__marke {
  width: 100%;
  margin-bottom: var(--a1);
  font-size: 0.875rem;
  color: var(--text-leise);
}

.szene-knopf {
  padding: 10px 18px;
  border: 1px solid rgba(13, 17, 20, 0.3);
  border-radius: var(--radius);
  background: transparent;
  color: var(--schwarz);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.szene-knopf:hover {
  border-color: var(--petrol-signal);
}

.szene-knopf[aria-pressed='true'] {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--weiss);
}

/* 7.35 Gebaeudekontur als Hintergrund eines unteren Abschnitts */

.kontur-grund {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.kontur-grund ~ .wrap {
  position: relative;
}

.kontur {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(46%, 560px);
  height: auto;
}

.kontur rect,
.kontur path,
.kontur polyline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.075);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* 7.4 Spine — tragende Linie mit Abzweigen, direkt aus dem Logo */
.spine {
  position: relative;
  padding-left: clamp(var(--a6), 4vw, var(--a7));
}

.spine::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 7px;
  bottom: 0;
  width: 1px;
  background: var(--regel);
}

.spine__eintrag {
  position: relative;
  padding-bottom: clamp(var(--a7), 5vw, var(--a9));
}

.spine__eintrag:last-child {
  padding-bottom: 0;
}

.spine__eintrag::before {
  content: '';
  position: absolute;
  left: calc(clamp(var(--a6), 4vw, var(--a7)) * -1);
  top: 7px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--akzent);
  border-radius: 50%;
  background: var(--grund);
}

.spine__eintrag > h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--a5);
}

/* Leistungen im Detail — drei parallele Spalten, keine Zeitleiste.
   Gebaeudeautomation, IT und Engineering bilden keine Abfolge; Spine und
   Ringknoten waeren hier semantisch falsch und stehen nur noch im Ablauf.
   Die Spalten teilen sich eine Oberkante in Petrol und feine senkrechte
   Trennlinien — ein gemeinsames Raster statt drei Karten. */

.fd-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fd {
  display: flex;
  flex-direction: column;
  padding-top: var(--a5);
  padding-inline: clamp(var(--a5), 2.6vw, var(--a7));
  border-top: 2px solid var(--akzent);
  border-left: 1px solid var(--regel);
}

.fd:first-child {
  padding-left: 0;
  border-left: 0;
}

.fd:last-child {
  padding-right: 0;
}

.fd > h3 {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.fd__einordnung {
  margin-top: var(--a2);
  margin-bottom: var(--a5);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-leise);
}

.fd__gruppen {
  display: block;
}

.fd__gruppe {
  padding-block: var(--a4);
  border-top: 1px solid var(--regel);
}

.fd__gruppe dt {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: var(--a1);
}

.fd__gruppe dd {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-leise);
}

/* Weitere Leistungen: natives details, damit die Inhalte auch ohne
   JavaScript vollstaendig zugaenglich sind und der Browser den
   aufgeklappten Zustand selbst an die Hilfstechnik meldet. */
.fd__mehr {
  border-top: 1px solid var(--regel);
}

.fd__mehr > summary {
  padding-block: var(--a4);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--akzent);
  cursor: pointer;
  list-style: none;
}

.fd__mehr > summary::-webkit-details-marker {
  display: none;
}

.fd__mehr > summary::after {
  content: ' +';
  font-weight: 400;
}

.fd__mehr[open] > summary::after {
  content: ' –';
}

.fd__mehr .fd__gruppe:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Direkt unter der letzten Gruppe. margin-top:auto zwang die Zeile zuvor auf
   eine gemeinsame Grundlinie und riss dabei in den kuerzeren Spalten grosse
   Loecher auf — gleiche Hoehe war weniger wert als ein ruhiger Abstand. */
.fd__ergebnis {
  padding-top: var(--a3);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-leise);
}

.fd__ergebnis span {
  display: block;
  margin-top: var(--a4);
  padding-top: var(--a3);
  border-top: 1px solid var(--regel);
  margin-bottom: var(--a1);
  font-weight: 600;
  color: var(--text);
}

/* 7.4 Zwei Zielgruppen */
.zielgruppen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.zielgruppe {
  padding-inline: clamp(var(--a5), 4vw, var(--a8));
  border-left: 1px solid var(--regel);
}

.zielgruppe:first-child {
  padding-left: 0;
  border-left: 0;
}

.zielgruppe:last-child {
  padding-right: 0;
}

.zielgruppe h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: var(--a5);
}

.punkte li {
  padding-block: var(--a4);
  border-top: 1px solid var(--regel);
  color: var(--text-leise);
}

.punkte li:last-child {
  border-bottom: 1px solid var(--regel);
}

/* 7.5 Ablauf */
.ablauf__nr {
  display: inline-block;
  min-width: 1.7em;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Zwei Spalten je Schritt: Nummer und Benennung links, Beschreibung rechts.
   Einspaltig blieb die rechte Haelfte des Satzspiegels leer. */
.ablauf .spine__eintrag {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.45fr);
  gap: clamp(var(--a4), 4vw, var(--a8));
  align-items: baseline;
  padding-block: var(--a5) clamp(var(--a5), 3vw, var(--a7));
  border-top: 1px solid var(--regel);
}

.ablauf .spine__eintrag:first-child {
  border-top: 0;
}

.ablauf .spine__eintrag::before {
  top: calc(var(--a5) + 7px);
}

.ablauf.spine::before {
  top: calc(var(--a5) + 7px);
}

.ablauf .spine__eintrag > h3 {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  margin-bottom: 0;
}

.ablauf .spine__eintrag p {
  color: var(--text-leise);
}

/* 7.6 Projekte */
.projekte {
  display: grid;
  gap: 0;
}

/* Projekt: Text links, optionales Bild rechts. Ohne Bild nimmt der Text die
   volle Breite — es entsteht keine leere Spalte. */
.projekt {
  padding-block: clamp(var(--a6), 4vw, var(--a7));
  border-top: 1px solid var(--regel);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(var(--a5), 4vw, var(--a8));
  align-items: start;
}

.projekt__text {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(var(--a4), 3vw, var(--a7));
  min-width: 0;
}

.projekt__text:only-child {
  grid-column: 1 / -1;
}

/* Mit Bild ist die Textspalte zu schmal für Kopf und Angaben nebeneinander:
   dann untereinander, das Bild bleibt rechts. */
.projekt:has(.projekt__bild) .projekt__text {
  grid-template-columns: 1fr;
  gap: var(--a4);
}

.projekt__bild {
  margin: 0;
  min-width: 0;
}

.projekt__bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.projekt__bild figcaption {
  margin-top: var(--a3);
  font-size: 0.875rem;
  color: var(--text-leise);
}

.projekt:last-child {
  border-bottom: 1px solid var(--regel);
}

.projekt h3 {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.projekt__ort {
  margin-top: var(--a2);
  font-size: 0.875rem;
  color: var(--text-leise);
}

.projekt__feld {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: var(--a4);
  padding-block: var(--a3);
}

.projekt__feld + .projekt__feld {
  border-top: 1px solid var(--regel);
}

.projekt__feld dt {
  font-weight: 500;
}

.projekt__feld dd {
  color: var(--text-leise);
}

/* 7.7 Ueber */
/* Drei Lagen untereinander, jede über die volle Breite: Einleitung,
   Kennzahlen als eine Zeile, Grundsätze nebeneinander. Keine Spalte, die
   auf halber Höhe endet. */
.ueber {
  display: grid;
  gap: clamp(var(--a6), 4vw, var(--a7));
  padding-top: var(--a5);
  border-top: 2px solid var(--akzent);
}

.ueber__einleitung {
  max-width: 46em;
  font-size: 1.25rem;
  line-height: 1.55;
}

/* Weniger Leerraum ueber und unter dem Abschnitt */
#buero .kopfzeile {
  margin-bottom: var(--a6);
}

/* Kennzahlen: eine Zeile, getrennt durch Haarlinien */
.fakten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--regel);
}

.fakten > div {
  padding: var(--a4) var(--a5);
  border-left: 1px solid var(--regel);
}

.fakten > div:first-child {
  padding-left: 0;
  border-left: 0;
}

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

.fakten dd {
  margin-top: var(--a1);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.4;
}

/* Grundsätze: drei Spalten, nur Typografie, keine Karten */
.prinzipien {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--a5), 4vw, var(--a7));
}

.prinzipien b {
  display: block;
  margin-bottom: var(--a2);
  font-weight: 600;
}

.prinzipien span {
  color: var(--text-leise);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* 8 — Kontakt ------------------------------------------------------------ */

/* Drei Felder über die volle Breite, getrennt durch Haarlinien wie die
   Kennzahlen im Büro. Jedes Feld ist ein Link. Einfarbige Symbole, damit
   kein Markengrün als vierter Akzent auftaucht. */
.kontaktwege {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--regel);
}

.kontaktweg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--a3);
  row-gap: var(--a1);
  align-items: center;
  padding: var(--a6) var(--a5);
  border-left: 1px solid var(--regel);
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.kontaktweg:first-child {
  border-left: 0;
}

.kontaktweg:hover {
  background: var(--weiss);
}

.kontaktweg svg {
  grid-row: 1 / 3;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--petrol);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

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

.kontaktweg__wert {
  font-size: 1.125rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* 9 — Fuss --------------------------------------------------------------- */

/* Seit 19.10.2026 tiefes Petrol statt Schwarz: das Seitenende bleibt in den
   Markenfarben und schließt an den hellen Kontakt an. */
.fuss {
  background:
    radial-gradient(50% 120% at 100% 0%, rgba(62, 150, 184, 0.16), rgba(62, 150, 184, 0) 70%),
    linear-gradient(170deg, #143d4e 0%, #0f303e 100%);
  color: var(--weiss);
  padding-block: clamp(var(--a8), 7vw, var(--a9)) var(--a7);
  --regel: var(--linie-dunkel);
  --text-leise: rgba(255, 255, 255, 0.66);
}

.fuss__oben {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(var(--a6), 6vw, var(--a9));
  padding-bottom: var(--a7);
  border-bottom: 1px solid var(--regel);
}

.fuss__logo img {
  height: 72px;
  width: auto;
  display: block;
}

.fuss__zusatz {
  margin-top: var(--a5);
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.82);
}

.fuss__ort {
  margin-top: var(--a2);
  font-size: 0.9375rem;
  color: var(--text-leise);
}

.fuss__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a3) var(--a5);
  align-content: start;
}

.fuss__nav a {
  font-size: 0.9375rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.78);
}

.fuss__nav a:hover {
  color: var(--weiss);
  text-decoration: underline;
}

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a3) var(--a6);
  padding-top: var(--a5);
  font-size: 0.875rem;
  color: var(--text-leise);
}

.fuss__unten a {
  color: inherit;
}

/* 10 — Unterseiten ------------------------------------------------------- */

.seitenkopf {
  padding-top: calc(var(--kopf-hoehe) + clamp(var(--a8), 9vw, var(--a10)));
  padding-bottom: clamp(var(--a6), 5vw, var(--a8));
}

.fliesstext {
  max-width: 66ch;
}

.fliesstext h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin-top: clamp(var(--a7), 5vw, var(--a8));
  margin-bottom: var(--a4);
}

.fliesstext h2:first-child {
  margin-top: 0;
}

.fliesstext p + p,
.fliesstext ul + p,
.fliesstext p + ul {
  margin-top: var(--a4);
}

.fliesstext ul {
  list-style: disc;
  padding-left: 1.25em;
}

.fliesstext li {
  margin-bottom: var(--a2);
}

.fliesstext a {
  color: var(--petrol);
}

/* Generierter Rechtstext (Datenschutz): h3, Listen nach Listen, lange URLs */
.rechtstext {
  overflow-wrap: anywhere;
}

.rechtstext h3 {
  font-size: 1.1rem;
  margin-top: var(--a6);
  margin-bottom: var(--a3);
}

.rechtstext ul + ul,
.rechtstext ul + h3 {
  margin-top: var(--a4);
}

.rechtstext__kasten {
  background: var(--hellgrau);
  border-left: 3px solid var(--petrol);
  border-radius: var(--radius);
  padding: var(--a5) var(--a6);
}

.rechtstext__kasten h2 {
  margin-top: 0;
}

.rechtstext .index {
  list-style: none;
  padding-left: 0;
}

.rechtstext .seal {
  margin-top: var(--a7);
  font-size: 0.875rem;
}

/* 11 — Schmale Fenster --------------------------------------------------- */

/* Die Zusatzzeile im Kopf geht zuerst, bevor sie die Navigation bedrängt */
@media (max-width: 1240px) {
  .kopf__zusatz {
    display: none;
  }

  .kopf__logo {
    margin-right: auto;
  }
}

/* Tablet: Gebaeudeautomation ueber die volle Breite, IT und Engineering
   darunter nebeneinander. Drei schmale Spalten waeren hier unlesbar. */
@media (max-width: 1099px) and (min-width: 700px) {
  .fd-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--a7);
  }

  .fd:first-child {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .fd:nth-child(2) {
    padding-left: 0;
    border-left: 0;
  }
}

/* Mobil: drei lesbare Bloecke untereinander, keine schmalen Textspalten */
@media (max-width: 699px) {
  .fd-raster {
    grid-template-columns: 1fr;
    row-gap: var(--a7);
  }

  .fd {
    padding-inline: 0;
    border-left: 0;
  }

}

@media (max-width: 1000px) {
  .bedienung {
    grid-template-columns: 1fr;
    gap: var(--a8);
  }

  .bedienung__panel {
    justify-self: start;
  }

  .kontur {
    width: min(80%, 620px);
  }
}

@media (max-width: 900px) {
  .kopf__nav,
  .kopf > .wrap > .btn {
    display: none;
  }

  .kopf__schalter {
    display: block;
  }

  .kopf__nav--offen {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: var(--kopf-hoehe);
    left: 0;
    right: 0;
    padding: var(--a4) var(--rand) var(--a5);
    background: var(--weiss);
    color: var(--schwarz);
    border-bottom: 1px solid var(--linie);
  }

  .kopf__nav--offen a {
    padding-block: var(--a3);
    border-bottom: 1px solid var(--linie);
  }

  .kopf__nav--offen .nur-schmal {
    display: block;
    border-bottom: 0;
    color: var(--petrol);
    font-weight: 600;
  }

  /* Hero gestapelt: Grafik oben, Text darunter. Nichts liegt uebereinander,
     nichts muss zurueckgenommen werden. */
  .hero {
    display: block;
    min-height: 0;
    padding-top: calc(var(--kopf-hoehe) + var(--a5));
  }

  .hero__buehne {
    position: static;
    opacity: 1;
  }

  .szene {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* Ohne Beschriftung sind Bezugslinie und Ringknoten bedeutungslos —
     sie zeigen dann auf nichts. Die Gewerke stehen stattdessen als Textzeile
     unter dem Bild. */
  .zw__marke,
  .zw__bahn,
  .zw__knoten {
    display: none;
  }

  .hero__gewerke {
    display: block;
  }

  .hero__innen {
    padding-block: var(--a7) var(--a8);
  }

  .felder,
  .zielgruppen,
  .ueber,
  .fuss__oben {
    grid-template-columns: 1fr;
  }

  .felder {
    gap: var(--a7);
  }

  .feld,
  .zielgruppe {
    padding-inline: 0;
    border-left: 0;
    padding-top: var(--a6);
    border-top: 1px solid var(--regel);
  }

  .feld:first-child,
  .zielgruppe:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .zielgruppen {
    gap: var(--a8);
  }

  .haltung__satz,
  .projekt,
  .projekt__text,
  .ablauf .spine__eintrag {
    grid-template-columns: 1fr;
    gap: var(--a3);
  }

  /* Kontaktfelder untereinander: die E-Mail-Adresse braucht die Breite */
  .kontaktwege {
    grid-template-columns: 1fr;
  }

  .kontaktweg {
    padding-inline: 0;
    border-left: 0;
  }

  .kontaktweg + .kontaktweg {
    border-top: 1px solid var(--regel);
  }

  /* Kennzahlen zwei mal zwei, Grundsätze untereinander */
  .fakten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fakten > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .fakten > div:nth-child(n + 3) {
    border-top: 1px solid var(--regel);
  }

  .prinzipien {
    grid-template-columns: 1fr;
  }
}

/* Mobil steht ein vorhandenes Bild ueber dem Text */
@media (max-width: 900px) {
  .projekt__bild {
    order: -1;
  }
}

/* Sehr schmal: die Kacheln untereinander, sonst wird der Mindestinhalt
   des Panels breiter als der Bildschirm. */
@media (max-width: 560px) {
  .panel__raster {
    grid-template-columns: 1fr;
  }

  .wandflaeche {
    padding: var(--a4);
  }
}

@media (max-width: 620px) {
  .projekt__feld {
    grid-template-columns: 1fr;
  }

  .projekt__feld {
    gap: var(--a1);
  }

  .fuss__nav {
    grid-template-columns: 1fr;
  }

  .hero__aktion {
    gap: var(--a5);
  }
}

/* 12 — Reduzierte Bewegung ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 11 — Druck ------------------------------------------------------------- */
/* Elektrobetriebe drucken so etwas aus: Leistungsumfang, Ablauf, Kontaktdaten
   aufs Papier und in die Projektmappe. Ohne diesen Block landet dort eine
   leere gepinnte Bühne, vier dunkle Vollflächen und ein Formular, das auf
   Papier nichts tut. */

@media print {
  :root {
    --polster: 18mm;
    --rand: 0;
  }

  html {
    scroll-behavior: auto;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  /* Flächenrollen umkehren: auf Papier ist der Grund immer weiß. */
  .abschnitt,
  .f-weiss,
  .f-hell,
  .f-tief,
  .f-schwarz {
    --grund: #fff;
    --text: #000;
    --text-leise: #333;
    --regel: rgba(0, 0, 0, 0.28);
    --akzent: #000;

    background: #fff !important;
    color: #000 !important;
  }

  /* Was auf Papier nichts beiträgt oder dort nicht funktioniert. */
  .hero__legende,
  .kopf__nav,
  .kopf__schalter,
  .kopf .btn,
  .fuss__nav,
  .kontur-grund,
  .wandflaeche,
  .bedienung__panel,
  .szene-knopf,
  .kontaktwege,
  .springmarke {
    display: none !important;
  }

  .hero {
    padding-block: 0 12mm;
    background: #fff !important;
    color: #000 !important;
  }

  .hero__raster {
    display: block !important;
  }

  .hero__bild {
    transform: none !important;
    opacity: 1 !important;
    margin-inline-end: 0 !important;
  }

  .hero__aktion {
    display: none;
  }

  .kopf {
    position: static;
    height: auto;
    color: #000;
    border-bottom: 1px solid #000;
    padding-block: 6mm;
  }

  /* Der Scrim, der auf dem Bildschirm den Kopf über der dunklen Bühne
     lesbar hält. Auf Papier ist er ein grauer Balken über dem Logo.
     Pseudo-Elemente fallen bei einer Prüfung über das DOM nicht auf —
     dieser hier war nur im Bild zu sehen. */
  .kopf::before {
    display: none;
  }

  /* Auf Papier gilt nur die dunkle Logofassung. Die beiden Fassungen liegen
     im selben Rasterfeld übereinander und werden über "visibility"
     getauscht, nicht über "display" — deshalb muss hier beides gesetzt
     werden. */
  .logo-bild--hell {
    display: none !important;
  }

  .kopf:not(.kopf--fest) .logo-bild--dunkel,
  .logo-bild--dunkel {
    display: block !important;
    visibility: visible !important;
  }

  h1 {
    font-size: 22pt;
  }

  h2 {
    font-size: 15pt;
  }

  h3 {
    font-size: 11.5pt;
  }

  /* Überschriften nicht allein am Seitenfuß stehen lassen. */
  h1,
  h2,
  h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .abschnitt,
  .fd__feld,
  .ablauf li,
  .projekt {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Ein Link auf Papier braucht sein Ziel, sonst ist er eine Sackgasse.
     Ausgenommen sind Ankerverweise innerhalb der Seite und der Fußbereich. */
  main a[href^='http']::after,
  main a[href^='mailto']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    word-break: break-all;
  }

  /* Diese Elemente tragen ihre Textfarbe hart im Regelwerk, nicht über
     --text. Auf weißem Papier wären sie unsichtbar. Geprüft mit
     scratchpad/druckpruef.js, das genau danach sucht. */
  .hero__lead,
  .hero__gewerke,
  .fuss,
  .fuss p,
  .fuss span,
  .fuss a {
    color: #000 !important;
  }

  .fuss {
    background: #fff !important;
    border-top: 1px solid #000;
  }

  /* Die inverse Logofassung ist weiß und auf Papier nicht zu sehen.
     Im Kopf steht die Marke ohnehin schon. */
  .fuss__logo {
    display: none;
  }

  .fuss__unten {
    border-top: 0;
  }
}