/* alternative.css — Branch „alternative“ (19.10.2026).

   Übernimmt aus der Vergleichsseite, was die Seite schneller erfassbar
   macht: Leistungen als Bausteine, ein bewegtes Netzband, ein Laufband der
   Standards, FAQ und einen Abschluss vor dem Kontakt. Nicht übernommen:
   erfundene Kennzahlen, Formular, Einblenden auf jedem Abschnitt.

   Lädt nach style.css und neu.css und nutzt deren Tokens. */

/* Dunkle Flächen nur aus einer Familie: Petrol in drei Tiefen. Fast-Schwarz
   (--schwarz) bleibt allein dem Fuß. Bis 19.10.2026 hatten Schema, Kacheln
   und Lichtkachel je ein eigenes Blauschwarz. */
:root {
  --petrol-hell: #1d5168;   /* Lichtseite von Verläufen */
  --petrol-tiefer: #0f303e; /* Ende von Verläufen, Schema, Kontakt */
  --petrol-nacht: #0b2029;  /* Kacheln, Grund des Schemas */
}

/* ==========================================================================
   1. Kopf: Logo mit Claimzeile, über dem Foto größer
   ========================================================================== */

.kopf__logo img {
  height: 58px;
  transition: height 0.25s ease;
}

/* Über dem Foto, sobald gescrollt wird: dunkles Glas (neu.js) */
.kopf--glas {
  background: rgba(11, 32, 41, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.kopf--glas::before { opacity: 0; }

.kopf--fest .kopf__logo img {
  height: 44px;
}

/* Mit größerem Logo wird es eng: die Zusatzzeile weicht früher. */
@media (max-width: 1240px) {
  .kopf__zusatz { display: none; }
  .kopf__nav { margin-left: auto; }
}

/* ==========================================================================
   2. Hero: das Panel fährt beim Laden von unten herein
   ========================================================================== */

@keyframes hochfahren {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: none; }
}

.bhero__panel {
  animation: hochfahren 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both;
}

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

/* ==========================================================================
   3. Leistungen als Bausteine

   Zwölfspaltig. Gebäudeautomation steht als flache Leiste über die ganze
   Breite (Text links, Stichpunkte rechts), darunter sechs gleich große
   Kacheln zu je vier Spalten. Bis 19.10.2026 war die GA-Kachel ein großer
   Block über zwei Zeilen; das ließ die übrigen Felder klein wirken.
   ========================================================================== */

.bausteine {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.baustein {
  --b-grund: var(--hellgrau);
  --b-text: var(--schwarz);
  --b-leise: var(--grau-text);
  --b-linie: var(--linie);
  --b-akzent: var(--petrol);
  position: relative;
  overflow: hidden;
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2vw, 30px);
  background: var(--b-grund);
  color: var(--b-text);
  border: 1px solid var(--b-linie);
  border-radius: 6px;
}

.baustein--gross {
  --b-grund: linear-gradient(160deg, var(--petrol-hell) 0%, var(--petrol-tief) 62%, var(--petrol-tiefer) 100%);
  --b-text: var(--weiss);
  --b-leise: rgba(255, 255, 255, 0.78);
  --b-linie: transparent;
  --b-akzent: #7cc0da;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  column-gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.baustein--gross .baustein__punkte { margin-top: 0; }
.baustein--gross .baustein__mehr { padding-top: 18px; }

.baustein__symbol {
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  fill: none;
  stroke: var(--b-akzent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.baustein__symbol circle {
  fill: var(--b-grund);
}

.baustein--gross .baustein__symbol { width: 48px; height: 48px; }
.baustein--gross .baustein__symbol circle { fill: var(--petrol-tief); }

.baustein h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}

.baustein--gross h3 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  margin-bottom: 12px;
}

.baustein__satz {
  color: var(--b-leise);
  font-size: 0.9688rem;
  line-height: 1.55;
}

.baustein--gross .baustein__satz {
  font-size: 1.0625rem;
  max-width: 44ch;
}

/* Stichpunkte mit dem Ringknoten aus dem Logo statt eines Häkchens */
.baustein__punkte {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 0.9063rem;
  line-height: 1.45;
}

.baustein__punkte li {
  position: relative;
  padding-left: 20px;
}

.baustein__punkte li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 9px;
  height: 9px;
  border: 1.6px solid var(--b-akzent);
  border-radius: 50%;
}

.baustein--gross .baustein__punkte {
  margin-top: 24px;
  gap: 12px;
  font-size: 0.9688rem;
}

/* Aufklappbare Details in der großen Kachel */
.baustein__mehr {
  margin-top: auto;
  padding-top: 22px;
}

.baustein__mehr summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--b-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
}

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

.baustein__mehr summary::after {
  content: '+';
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.2s ease;
}

.baustein__mehr[open] summary::after { transform: rotate(45deg); }

.baustein__mehr dl {
  margin: 18px 0 0;
  display: grid;
  gap: 14px;
  font-size: 0.9375rem;
}

.baustein__mehr dt { font-weight: 600; }
.baustein__mehr dd { margin: 2px 0 0; color: var(--b-leise); }

/* Die Lichtkachel: dunkel, ein warmer Lichtkegel fällt von oben. Das ist
   die einzige Stelle mit warmem Licht auf der Seite — dort ist es Inhalt. */
.baustein--licht {
  --b-grund: var(--petrol-nacht);
  --b-text: var(--weiss);
  --b-leise: rgba(255, 255, 255, 0.74);
  --b-linie: transparent;
  --b-akzent: #f2d48a;
  isolation: isolate;
}

.baustein__schein {
  position: absolute;
  z-index: -1;
  top: -10%;
  right: -20%;
  width: 85%;
  height: 120%;
  background:
    radial-gradient(60% 45% at 50% 18%, rgba(242, 212, 138, 0.42), rgba(242, 212, 138, 0) 70%),
    linear-gradient(200deg, rgba(242, 212, 138, 0.16), rgba(242, 212, 138, 0) 55%);
  filter: blur(2px);
  animation: glimmen 6s ease-in-out infinite alternate;
}

@keyframes glimmen {
  from { opacity: 0.75; }
  to   { opacity: 1; }
}

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

@media (max-width: 1080px) {
  .bausteine { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .baustein { grid-column: span 3; }
  .baustein--gross { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .bausteine { grid-template-columns: minmax(0, 1fr); }
  .baustein,
  .baustein--gross { grid-column: auto; }
  .baustein--gross { grid-template-columns: minmax(0, 1fr); }
  .baustein--gross .baustein__punkte { margin-top: 24px; }
}

/* ==========================================================================
   4. Laufband der Standards und Werkzeuge (unter dem Hausschnitt)

   Läuft langsam von links nach rechts. Hält beim Überfahren an. Bei
   reduzierter Bewegung steht die Liste umbrochen still.
   ========================================================================== */

.laufband {
  margin-top: clamp(40px, 5vw, 72px);
  border-block: 1px solid var(--regel);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.laufband__spur {
  display: flex;
  width: max-content;
  animation: laufen 48s linear infinite;
}

.laufband:hover .laufband__spur { animation-play-state: paused; }

@keyframes laufen {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.laufband__liste {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 18px 6px;
}

/* Grundform als Plakette. Auf dunklem Grund wird daraus die Busleitung
   (Abschnitt 24). Herstellerlogos stehen bewusst nicht hier (Markenrecht,
   siehe NOTES.md). */
.laufband__liste li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 12px 20px 12px 34px;
  background: var(--weiss);
  border: 1px solid var(--regel);
  border-radius: 6px;
  white-space: nowrap;
}

/* Ringknoten wie im Logo */
.laufband__liste li::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 19px;
  width: 8px;
  height: 8px;
  border: 1.6px solid var(--petrol-signal);
  border-radius: 50%;
}

.laufband__liste b {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--petrol-tief);
}

.laufband__liste span {
  font-size: 0.8125rem;
  color: var(--grau-text);
}

@media (prefers-reduced-motion: reduce) {
  .laufband { -webkit-mask-image: none; mask-image: none; }
  .laufband__spur { animation: none; width: auto; }
  .laufband__liste { flex-wrap: wrap; justify-content: center; }
  .laufband__liste[aria-hidden] { display: none; }
}

/* ==========================================================================
   5. Systemschema: drei Spalten Kästen, verbunden über Sammelleitungen

   Leitungen: jeder Kasten der linken Spalte hat rechts einen Stich bis in
   die Lücke, dort läuft eine senkrechte Sammelleitung, die mittig in die
   Station führt. Rechts gespiegelt. Ringknoten an den Kästen.
   ========================================================================== */

.schema {
  --lueke: clamp(40px, 5vw, 76px);
  --bahn: var(--petrol-signal);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1fr);
  column-gap: var(--lueke);
  align-items: center;
}

.schema__ebene {
  margin: 0 0 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--petrol);
}

.schema__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  position: relative;
}

.schema__box {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--petrol-signal);
  border-radius: 4px;
}

.schema__box b { font-size: 0.9688rem; font-weight: 600; line-height: 1.3; }
.schema__box span { font-size: 0.8438rem; color: var(--grau-text); line-height: 1.4; }

.schema__box--fremd { border-left-color: #8a9aa1; }

/* Stich vom Kasten in die Lücke, Ringknoten am Kasten */
.schema__spalte--quellen .schema__box::after,
.schema__spalte--ziele .schema__box::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(var(--lueke) / 2);
  border-top: 1.5px solid var(--bahn);
}

.schema__spalte--quellen .schema__box::after { left: 100%; }
.schema__spalte--ziele .schema__box::after { right: 100%; }

.schema__spalte--quellen .schema__box::before,
.schema__spalte--ziele .schema__box::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  background: var(--weiss);
  border: 1.5px solid var(--bahn);
  border-radius: 50%;
  z-index: 1;
}

.schema__spalte--quellen .schema__box::before { right: -5.5px; }
.schema__spalte--ziele .schema__box::before { left: -5.5px; }

/* Sammelleitung in der Mitte der Lücke, von der ersten bis zur letzten Box */
.schema__spalte--quellen .schema__liste::after,
.schema__spalte--ziele .schema__liste::after {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  border-left: 1.5px solid var(--bahn);
}

.schema__spalte--quellen .schema__liste::after { left: calc(100% + var(--lueke) / 2); }
.schema__spalte--ziele .schema__liste::after { right: calc(100% + var(--lueke) / 2); }

/* Die Station */
.schema__kern {
  position: relative;
  display: grid;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 32px);
  background: linear-gradient(160deg, var(--petrol-hell) 0%, var(--petrol-tief) 70%);
  color: var(--weiss);
  border-radius: 6px;
  box-shadow: 0 24px 50px -30px rgba(13, 40, 52, 0.7);
}

/* Anschlüsse links und rechts an die Sammelleitungen */
.schema__kern::before,
.schema__kern::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(var(--lueke) / 2);
  border-top: 1.5px solid var(--bahn);
}

.schema__kern::before { right: 100%; }
.schema__kern::after { left: 100%; }

.schema__logo {
  width: 34px;
  height: 42px;
  color: #7cc0da;
}

.schema__kern b { font-size: 1.125rem; font-weight: 600; }

.schema__kern ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.82);
}

.schema__kern li {
  position: relative;
  padding-left: 18px;
}

.schema__kern li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border: 1.5px solid #7cc0da;
  border-radius: 50%;
}

@media (max-width: 900px) {
  .schema {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  .schema__box::before,
  .schema__box::after,
  .schema__liste::after,
  .schema__kern::before,
  .schema__kern::after { display: none; }
}

/* ==========================================================================
   6. Netzband (Haltung): Leiterbahnnetz im Hintergrund
   ========================================================================== */

.netzband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

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

/* Text bleibt vor dem Netz lesbar: die Sätze bekommen keine Fläche,
   das Netz ist dafür zurückhaltend gezeichnet (alternative.js). */
.netzband .wrap { position: relative; }

/* ==========================================================================
   7. Für wen: drei Zielgruppen, HOAI-Leiste
   ========================================================================== */

.zielgruppen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .zielgruppen--drei { grid-template-columns: minmax(0, 1fr); }
  .zielgruppen--drei .zielgruppe {
    padding-inline: 0;
    border-left: 0;
    margin-bottom: 40px;
  }
}

/* HOAI: siehe Abschnitt 20 */

/* ==========================================================================
   8. Ablauf: vier Kästen, verbunden über eine Leitung mit Impuls

   Die Leitung liegt hinter den Kästen und ist nur in den Zwischenräumen zu
   sehen. An beiden Seiten jedes Kastens sitzt ein Ringknoten wie im Logo.
   Ein Impuls läuft einmal durch, wenn der Abschnitt ins Bild kommt, und
   danach in Ruhe weiter.
   ========================================================================== */

.schritte {
  --spalt: clamp(14px, 1.6vw, 22px);
  --hoehe: 52px; /* Mitte der Ziffernzeile */
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spalt);
  position: relative;
  isolation: isolate;
}

.schritte::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: var(--hoehe);
  left: 0;
  right: 0;
  border-top: 1.5px solid rgba(62, 150, 184, 0.55);
}

.schritte::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(var(--hoehe) - 1px);
  left: 0;
  width: 120px;
  height: 3.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(62, 150, 184, 0), var(--petrol-signal));
  filter: drop-shadow(0 0 6px rgba(62, 150, 184, 0.7));
  animation: schrittimpuls 5s linear infinite;
}

@keyframes schrittimpuls {
  0%   { left: 0; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: calc(100% - 120px); opacity: 0; }
}

.schritt {
  position: relative;
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding: clamp(22px, 2vw, 30px);
  background: var(--hellgrau);
  border: 1px solid var(--linie);
  border-radius: 8px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.schritt:hover {
  border-color: rgba(62, 150, 184, 0.55);
  box-shadow: 0 22px 44px -30px rgba(20, 61, 78, 0.4);
  transform: translateY(-2px);
}

/* Ringknoten links und rechts auf Höhe der Leitung */
.schritt::before,
.schritt::after {
  content: '';
  position: absolute;
  top: calc(var(--hoehe) - 5.5px);
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border: 1.8px solid var(--petrol-signal);
  border-radius: 50%;
  background: var(--weiss);
}
.schritt::before { left: -6px; }
.schritt::after { right: -6px; }
.schritt:first-child::before,
.schritt:last-child::after { display: none; }

.schritt__nr {
  display: block;
  height: calc(var(--hoehe) * 2 - 2 * clamp(22px, 2vw, 30px));
  margin-bottom: 18px;
  font-size: clamp(2.2rem, 3.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--petrol);
  font-variant-numeric: tabular-nums;
}

.schritt h3 {
  align-self: start;
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  margin-bottom: 8px;
}

.schritt p {
  color: var(--text-leise);
  font-size: 0.9688rem;
}

@media (max-width: 900px) {
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schritte::before, .schritte::after,
  .schritt::before, .schritt::after { display: none; }
}

@media (max-width: 520px) {
  .schritte { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .schritte::after { display: none; }
  .schritt { transition: none; }
  .schritt:hover { transform: none; }
}

/* ==========================================================================
   9. Häufige Fragen
   ========================================================================== */

.faq {
  max-width: 880px;
  border-top: 1px solid var(--regel);
}

.faq__eintrag { border-bottom: 1px solid var(--regel); }

.faq__eintrag summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  font-weight: 600;
}

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

.faq__eintrag summary::after {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  background:
    linear-gradient(var(--petrol), var(--petrol)) center / 12px 1.6px no-repeat,
    linear-gradient(var(--petrol), var(--petrol)) center / 1.6px 12px no-repeat;
  border: 1.5px solid var(--petrol);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.faq__eintrag[open] summary::after { transform: rotate(45deg); }

.faq__eintrag p {
  margin: -6px 0 22px;
  max-width: 68ch;
  color: var(--text-leise);
}

/* ==========================================================================
   10. Abschlussband vor dem Kontakt
   ========================================================================== */

.schluss {
  background: var(--hellgrau);
  padding-block: 0 clamp(24px, 3vw, 40px);
}

.schluss__band {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px);
  background: linear-gradient(120deg, var(--petrol-hell), var(--petrol-tief));
  color: var(--weiss);
  border-radius: 8px;
}

.schluss__band > div:first-child {
  flex: 1 1 420px;
  max-width: 640px;
}

.schluss__band h2 {
  max-width: 22ch;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.12;
  color: var(--weiss);
}

.schluss__band p {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.8);
}

.schluss__aktion {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn--rand-hell {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--weiss);
}

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

/* ==========================================================================
   11. Kontakt: vier Wege statt drei
   ========================================================================== */

/* Die E-Mail-Spalte ist breiter, damit die Adresse nicht umbricht. */
.kontaktwege { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr); }
.kontaktweg__wert { font-size: 1.0625rem; }

@media (max-width: 900px) {
  .kontaktwege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontaktweg:nth-child(3) { border-left: 0; }
  .kontaktweg:nth-child(n+3) { border-top: 1px solid var(--regel); }
}

@media (max-width: 520px) {
  .kontaktwege { grid-template-columns: minmax(0, 1fr); }
  .kontaktweg { border-left: 0; }
  .kontaktweg + .kontaktweg { border-top: 1px solid var(--regel); }
}

/* ==========================================================================
   12. Systemschema, dunkle Fassung mit fließenden Daten

   Dunkler Grund, Glas-Kästen mit Symbol, Station als Gerät mit LED und
   umlaufendem Lichtrand. Die Leitungen zeichnet alternative.js als SVG und
   lässt Impulse von den Quellen in die Station und weiter zur Bedienung
   laufen. Zeigt man auf einen Kasten, leuchtet sein Weg auf.
   ========================================================================== */

.system--dunkel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(62, 150, 184, 0.16), rgba(62, 150, 184, 0) 70%),
    linear-gradient(180deg, var(--petrol-tiefer) 0%, var(--petrol-nacht) 100%);
  color: var(--weiss);
}

/* feines Raster wie auf einem Schaltplan */
.system--dunkel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent);
  pointer-events: none;
}

.system--dunkel .wrap { position: relative; }
.system--dunkel h2 { color: var(--weiss); }
.system--dunkel .system__kopf { border-bottom-color: rgba(255, 255, 255, 0.14); }
.system--dunkel .system__kopf p,
.system--dunkel .sysbild__text { color: rgba(255, 255, 255, 0.72); }
.system--dunkel .schema__ebene { color: #7cc0da; }

.system--dunkel .schema__box {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--petrol-signal);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.system--dunkel .schema__box--fremd { border-left-color: #8a9aa1; }
.system--dunkel .schema__box b { color: var(--weiss); grid-column: 2; }
.system--dunkel .schema__box span { color: rgba(255, 255, 255, 0.62); grid-column: 2; }

.schema__symbol {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  padding: 6px;
  box-sizing: content-box;
  fill: none;
  stroke: #7cc0da;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: rgba(124, 192, 218, 0.1);
  border-radius: 8px;
}

.system--dunkel .schema__box.ist-aktiv {
  background: rgba(124, 192, 218, 0.12);
  border-color: rgba(124, 192, 218, 0.55);
  border-left-color: #9fd8ea;
}

/* Station als Gerät: umlaufender Lichtrand */
.system--dunkel .schema__kern {
  background: linear-gradient(160deg, var(--petrol-hell) 0%, var(--petrol-tief) 60%, var(--petrol-tiefer) 100%);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(124, 192, 218, 0.25);
  isolation: isolate;
}

@property --dreh {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.system--dunkel .schema__kern::selection { background: transparent; }

.schema__kernkopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.schema__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.78);
}

.schema__status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3fc98a;
  box-shadow: 0 0 0 0 rgba(63, 201, 138, 0.6);
  animation: led 2.2s ease-out infinite;
}

@keyframes led {
  0% { box-shadow: 0 0 0 0 rgba(63, 201, 138, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(63, 201, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 201, 138, 0); }
}

/* Lichtrand: ein rotierender Verlauf hinter einer Maske */
.schema__kern > .schema__rand {
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--dreh), transparent 0deg, rgba(159, 216, 234, 0.9) 50deg, transparent 110deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: rand 6s linear infinite;
  pointer-events: none;
}

@keyframes rand { to { --dreh: 360deg; } }

/* SVG-Leitungen über dem Raster */
.schema { position: relative; }

.schema__bahnen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2; /* Ringknoten liegen auf der Kastenkante, deshalb vorn */
}

.schema__spalte { position: relative; z-index: 1; }

/* Sobald das Skript zeichnet, entfallen die CSS-Leitungen */
.schema--js .schema__box::before,
.schema--js .schema__box::after,
.schema--js .schema__liste::after,
.schema--js .schema__kern::before,
.schema--js .schema__kern::after { display: none; }

.schema__bahnen .grund {
  fill: none;
  stroke: rgba(124, 192, 218, 0.32);
  stroke-width: 1.5;
}

.schema__bahnen .impuls {
  fill: none;
  stroke: #9fd8ea;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 5 95;
  filter: drop-shadow(0 0 4px rgba(159, 216, 234, 0.9));
  animation: fliessen var(--dauer, 3s) linear var(--verzug, 0s) infinite;
}

@keyframes fliessen {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

.schema__bahnen .knoten {
  fill: var(--petrol-tiefer);
  stroke: #7cc0da;
  stroke-width: 1.5;
}

.schema__bahnen .weg { transition: opacity 0.25s ease; }
.schema--hover .schema__bahnen .weg { opacity: 0.25; }
.schema--hover .schema__bahnen .weg.ist-aktiv { opacity: 1; }
.schema__bahnen .weg.ist-aktiv .grund { stroke: rgba(159, 216, 234, 0.85); }

@media (prefers-reduced-motion: reduce) {
  .schema__bahnen .impuls,
  .schema__status i,
  .schema__kern > .schema__rand { animation: none; }
  .schema__bahnen .impuls { display: none; }
}

@media (max-width: 900px) {
  .schema__bahnen { display: none; }
}

/* ==========================================================================
   13. Bausteine als Familie: jede Kachel dunkel, mit eigenem Licht und Motiv

   Wie die Lichtkachel. Jede Kachel bekommt die Farbe ihres Gewerks als
   Schein (dieselben Farben wie im Hausschnitt) und ein Motiv aus ihrem
   Fachgebiet als feine Strichzeichnung: Solarmodul, Radar, Kontaktplan,
   Codezeilen, Blaupause, Gebäudeschnitt. Die Motive sind CSS-Masken, die
   Farbe kommt aus --t.
   ========================================================================== */

.baustein--thema {
  --b-grund: linear-gradient(165deg, #123140 0%, var(--petrol-nacht) 100%);
  --b-text: var(--weiss);
  --b-leise: rgba(255, 255, 255, 0.74);
  --b-linie: rgba(255, 255, 255, 0.06);
  --b-akzent: var(--t);
  isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.baustein--thema:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.6);
}

.baustein--thema .baustein__schein {
  top: -30%;
  right: -30%;
  width: 90%;
  height: 110%;
  background: radial-gradient(55% 50% at 50% 40%, var(--t-glow), transparent 72%);
  filter: none;
}

.baustein__motiv {
  position: absolute;
  z-index: -1;
  right: -6%;
  bottom: -8%;
  width: 62%;
  aspect-ratio: 1;
  background: var(--t);
  opacity: 0.2;
  -webkit-mask: var(--motiv) center / contain no-repeat;
  mask: var(--motiv) center / contain no-repeat;
  transition: opacity 0.3s ease, transform 0.6s ease;
}

.baustein--thema:hover .baustein__motiv { opacity: 0.32; transform: scale(1.04); }

/* Die GA-Leiste: dunkel wie die Familie, Schein in Signalpetrol von links
   oben, unten eine Busleitung, an der die Gewerke in ihren Farben hängen.
   Ein Impuls läuft durch, jeder Knoten leuchtet auf, wenn er vorbeikommt. */
.baustein--gross.baustein--thema {
  --b-grund: linear-gradient(115deg, #15435a 0%, var(--petrol-tiefer) 45%, var(--petrol-nacht) 100%);
  --b-linie: transparent;
  --bus-takt: 6s;
  padding-bottom: clamp(76px, 7vw, 92px);
}
.baustein--gross .baustein__schein {
  top: -80%;
  left: -10%;
  right: auto;
  width: 70%;
  height: 220%;
}
.baustein--gross .baustein__motiv { width: 30%; right: -2%; bottom: -30%; opacity: 0.12; }

.baustein__bus {
  position: absolute;
  left: clamp(22px, 2vw, 30px);
  right: clamp(22px, 2vw, 30px);
  bottom: clamp(26px, 2.6vw, 34px);
  height: 26px;
  pointer-events: none;
}

.baustein__bus::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(124, 192, 218, 0), rgba(124, 192, 218, 0.5) 6%, rgba(124, 192, 218, 0.5) 94%, rgba(124, 192, 218, 0));
}

.baustein__bus i {
  position: absolute;
  bottom: 0;
  left: calc(var(--x) * 100%);
  width: 1.5px;
  height: 16px;
  background: var(--f);
  opacity: 0.7;
}

.baustein__bus i::after {
  content: '';
  position: absolute;
  left: -4px;
  top: -9px;
  width: 9.5px;
  height: 9.5px;
  box-sizing: border-box;
  border: 1.6px solid var(--f);
  border-radius: 50%;
  background: var(--petrol-nacht);
  animation: busknoten var(--bus-takt) linear infinite;
  animation-delay: calc(var(--x) * var(--bus-takt) - var(--bus-takt));
}

.baustein__bus i:nth-child(1) { --x: 0.10; --f: #3e96b8; }
.baustein__bus i:nth-child(2) { --x: 0.26; --f: #f2c55c; }
.baustein__bus i:nth-child(3) { --x: 0.42; --f: #9fb6c0; }
.baustein__bus i:nth-child(4) { --x: 0.58; --f: #e0714a; }
.baustein__bus i:nth-child(5) { --x: 0.74; --f: #56c98d; }
.baustein__bus i:nth-child(6) { --x: 0.90; --f: #a98bd0; }

@keyframes busknoten {
  0%, 6% { box-shadow: 0 0 0 0 transparent; background: var(--petrol-nacht); }
  1%     { box-shadow: 0 0 14px 2px var(--f); background: var(--f); }
  100%   { box-shadow: 0 0 0 0 transparent; background: var(--petrol-nacht); }
}

.baustein__bus b {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 90px;
  height: 3.5px;
  margin-left: -90px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(159, 216, 234, 0), #c8ecf6);
  filter: drop-shadow(0 0 6px rgba(159, 216, 234, 0.8));
  animation: buslauf var(--bus-takt) linear infinite;
}

@keyframes buslauf {
  from { left: 0; }
  to   { left: calc(100% + 90px); }
}

@media (prefers-reduced-motion: reduce) {
  .baustein__bus b { display: none; }
  .baustein__bus i::after { animation: none; }
}
.baustein--thema .baustein__symbol circle { fill: var(--petrol-nacht); }
.baustein--gross.baustein--thema .baustein__symbol circle { fill: var(--petrol-tief); }
.baustein--thema .baustein__mehr summary { border-bottom-color: rgba(255, 255, 255, 0.35); }

@media (prefers-reduced-motion: reduce) {
  .baustein--thema, .baustein__motiv { transition: none; }
  .baustein--thema:hover { transform: none; }
}

.baustein--t-ga { --t: #7cc0da; --t-glow: rgba(124,192,218,0.30); --motiv: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%20110%20100%2040l80%2070%22%2F%3E%3Cpath%20d%3D%22M38%2096v84h124V96%22%2F%3E%3Cpath%20d%3D%22M38%20138h124%22%2F%3E%3Cpath%20d%3D%22M100%2040V14%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2210%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M70%20180v-28h24v28%22%2F%3E%3Cpath%20d%3D%22M128%20110h20v18h-20zM56%20110h20v18H56z%22%2F%3E%3Cpath%20d%3D%22M100%20138v42%22%20stroke-dasharray%3D%224%205%22%2F%3E%3C%2Fsvg%3E"); }
.baustein--t-energie { --t: #6fd6a0; --t-glow: rgba(86,201,141,0.34); --motiv: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M30%20170%2070%2090h110l-40%2080z%22%2F%3E%3Cpath%20d%3D%22M50%20130h110M40%20150h110M60%20110h110%22%2F%3E%3Cpath%20d%3D%22M95%2090l-30%2080M130%2090l-30%2080M165%2090l-30%2080%22%2F%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2240%22%20r%3D%2214%22%2F%3E%3Cpath%20d%3D%22M160%2014v-8M160%2074v-8M186%2040h8M126%2040h8M178%2022l6-6M136%2064l6-6M178%2058l6%206M136%2016l6%206%22%2F%3E%3C%2Fsvg%3E"); }
.baustein--t-sicherheit { --t: #b9a0e0; --t-glow: rgba(169,139,208,0.36); --motiv: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M200%20200a40%2040%200%200%200-40-40M200%20200a80%2080%200%200%200-80-80M200%20200a120%20120%200%200%200-120-120M200%20200a160%20160%200%200%200-160-160%22%2F%3E%3Cpath%20d%3D%22M200%20200%2070%2095%22%2F%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%22134%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%2262%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M60%20160c0-14%2010-24%2022-24s22%2010%2022%2024v12H60z%22%2F%3E%3Cpath%20d%3D%22M72%20136v-8a10%2010%200%200%201%2020%200v8%22%2F%3E%3C%2Fsvg%3E"); }
.baustein--t-industrie { --t: #6fc3dc; --t-glow: rgba(62,150,184,0.40); --motiv: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2020v160M180%2020v160%22%2F%3E%3Cpath%20d%3D%22M20%2050h36M64%2040v20M72%2040v20M72%2050h60M140%2050a8%208%200%200%200%200%200%22%2F%3E%3Ccircle%20cx%3D%22148%22%20cy%3D%2250%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M157%2050h23%22%2F%3E%3Cpath%20d%3D%22M20%20100h36M64%2090v20M72%2090v20M72%20100h20M100%2090v20M108%2090v20M108%20100h31%22%2F%3E%3Ccircle%20cx%3D%22148%22%20cy%3D%22100%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M157%20100h23%22%2F%3E%3Cpath%20d%3D%22M20%20150h36M64%20140v20M72%20140v20M72%20150h67%22%2F%3E%3Ccircle%20cx%3D%22148%22%20cy%3D%22150%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M157%20150h23%22%2F%3E%3Cpath%20d%3D%22M40%20100v50%22%2F%3E%3C%2Fsvg%3E"); }
.baustein--t-it { --t: #7ed6d0; --t-glow: rgba(78,190,190,0.32); --motiv: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M40%2030l-20%2020%2020%2020M70%2030l20%2020-20%2020%22%2F%3E%3Cpath%20d%3D%22M30%20100h70M50%20120h100M50%20140h60M30%20160h90M50%20180h40M120%20100h40M130%20140h50%22%2F%3E%3Cpath%20d%3D%22M150%2030h30v30h-30z%22%2F%3E%3Cpath%20d%3D%22M165%2060v20h-30%22%2F%3E%3Ccircle%20cx%3D%22135%22%20cy%3D%2280%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); }
.baustein--t-eng { --t: #a9c6d2; --t-glow: rgba(159,182,192,0.30); --motiv: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M0%2050h200M0%20100h200M0%20150h200M50%200v200M100%200v200M150%200v200%22%20stroke-width%3D%220.6%22%20stroke-dasharray%3D%222%206%22%2F%3E%3Cpath%20d%3D%22M20%2030h50v40H20zM120%20120h60v50h-60z%22%2F%3E%3Cpath%20d%3D%22M70%2050h30v95h20%22%2F%3E%3Cpath%20d%3D%22M45%2070v80h40%22%2F%3E%3Ccircle%20cx%3D%2285%22%20cy%3D%22150%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2295%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M150%2099v21%22%2F%3E%3C%2Fsvg%3E"); }

/* ==========================================================================
   14. Einstieg „Ich bin …“ direkt unter dem Hero
   ========================================================================== */

.einstieg {
  background: var(--petrol-tief);
  color: var(--weiss);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.einstieg__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding-block: 18px;
}

/* Breit: vier gleich breite Knöpfe über die volle Inhaltsbreite */
@media (min-width: 761px) {
  .einstieg__innen {
    display: grid;
    grid-template-columns: auto repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  .einstieg__knopf { justify-content: center; white-space: nowrap; }
}

/* Tablet: Frage über der Zeile, Knöpfe zwei mal zwei */
@media (min-width: 761px) and (max-width: 1100px) {
  .einstieg__innen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .einstieg__frage { grid-column: 1 / -1; }
}

.einstieg__frage {
  margin-right: 8px;
  font-weight: 600;
  color: #7cc0da;
}

.einstieg__knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: var(--weiss);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Ringknoten vor jedem Knopf */
.einstieg__knopf::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 1.5px solid #7cc0da;
  border-radius: 50%;
}

.einstieg__knopf:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #7cc0da;
}

/* Die angesprungene Spalte leuchtet kurz auf */
.zielgruppe:target {
  animation: angesprungen 2.4s ease-out;
}

@keyframes angesprungen {
  0%, 30% { background: rgba(62, 150, 184, 0.14); box-shadow: 0 0 0 12px rgba(62, 150, 184, 0.14); }
  100% { background: transparent; box-shadow: 0 0 0 12px transparent; }
}

/* ==========================================================================
   16. Projekt-Etiketten
   ========================================================================== */

.etiketten {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.etiketten li {
  padding: 3px 10px;
  border: 1px solid rgba(124, 192, 218, 0.45);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #9fd8ea;
}

/* Einstieg als Glasleiste am unteren Rand des Hero */
.einstieg--hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(9, 24, 32, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.bhero:has(.einstieg--hero) { padding-bottom: calc(clamp(var(--a6), 3.5vw, var(--a8)) + 76px); }

@media (max-width: 760px) {
  .einstieg--hero { position: static; background: var(--petrol-tief); }
  /* Handy: Frage über der Zeile, Knöpfe zwei mal zwei, gleich breit und knapp */
  .einstieg__innen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-block: 14px 16px;
  }
  .einstieg__frage { grid-column: 1 / -1; margin: 0 0 2px; font-size: 0.875rem; }
  .einstieg__knopf {
    gap: 8px;
    min-height: 44px;
    padding: 7px 12px;
    border-radius: 12px;
    font-size: 0.8125rem;
    line-height: 1.25;
  }
  .einstieg__knopf::before { flex: none; width: 7px; height: 7px; }
  .bhero:has(.einstieg--hero) { flex-direction: column; padding-bottom: 0; }
  .bhero:has(.einstieg--hero) .bhero__raster { margin-bottom: 32px; }
}

/* ==========================================================================
   18. Schnellkontakt am Handy: feste Leiste unten mit Anrufen und WhatsApp

   Am Handy liegt der Kontaktabschnitt rund zwanzig Bildschirme tief. Die
   Leiste erscheint nach dem Hero und tritt am Kontaktabschnitt zurück
   (Klasse ist-sichtbar aus alternative.js). Ohne Skript bleibt sie aus.
   ========================================================================== */

.schnellkontakt { display: none; }

@media (max-width: 760px) {
  .schnellkontakt {
    position: fixed;
    z-index: 40;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
    background: rgba(11, 32, 41, 0.86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6);
    transform: translateY(calc(100% + 24px));
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }

  .schnellkontakt.ist-sichtbar {
    transform: none;
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
  }

  .schnellkontakt a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border-radius: 6px;
    background: var(--petrol);
    color: var(--weiss);
    font-weight: 600;
    text-decoration: none;
  }

  .schnellkontakt a + a { background: rgba(255, 255, 255, 0.1); }

  .schnellkontakt svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .schnellkontakt, .schnellkontakt.ist-sichtbar { transition: none; }
}

@media print {
  .schnellkontakt { display: none !important; }
}

/* ==========================================================================
   19. Abschnittskopf breit: Überschrift in einer Zeile, Satz direkt darunter.

   Erst stand der Satz mit großem Abstand unter einer schmalen Überschrift,
   dann (19.10.) rechts daneben. Beides wirkte losgelöst. Jetzt darf die
   Überschrift über die volle Breite laufen, der Satz folgt eng darunter.
   ========================================================================== */

.kopfzeile--quer { max-width: none; }

.kopfzeile--quer p {
  margin-top: 14px;
  font-size: 1.125rem;
  max-width: 62ch;
}

/* ==========================================================================
   20. Für wen als Karten, HOAI als dunkle Tafel (19.10.2026)

   Die vier Karten teilen sich über Subgrid die Zeilen: Symbol, Überschrift
   und jeder Stichpunkt stehen auf gleicher Höhe, auch wenn eine Überschrift
   einzeilig ist. Vorher sprang „Elektrobetriebe“ eine Zeile nach oben.
   ========================================================================== */

.zielgruppen--vier {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}

.zielgruppen--vier .zielgruppe,
.zielgruppen--vier .zielgruppe:first-child,
.zielgruppen--vier .zielgruppe:last-child {
  grid-row: span 6;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: clamp(22px, 2vw, 28px);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.zielgruppen--vier .zielgruppe:hover {
  border-color: rgba(62, 150, 184, 0.55);
  box-shadow: 0 22px 44px -30px rgba(20, 61, 78, 0.45);
  transform: translateY(-2px);
}

.zielgruppe__symbol {
  width: 46px;
  height: 46px;
  padding: 11px;
  margin-bottom: 18px;
  background: linear-gradient(150deg, var(--petrol-hell), var(--petrol-nacht));
  border-radius: 10px;
  fill: none;
  stroke: #9fd8ea;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zielgruppen--vier .zielgruppe h3 {
  align-self: start;
  margin-bottom: 14px;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
}

.zielgruppen--vier .punkte {
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  margin: 0;
}

.zielgruppen--vier .punkte li {
  padding-block: 12px;
  font-size: 0.9375rem;
}

.zielgruppen--vier .punkte li:last-child { border-bottom: 0; padding-bottom: 0; }

@media (max-width: 1080px) {
  .zielgruppen--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .zielgruppen--vier { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .zielgruppen--vier .zielgruppe { transition: none; }
  .zielgruppen--vier .zielgruppe:hover { transform: none; }
}

/* HOAI: dunkle Tafel mit Schaltplanraster wie das Systemschema. Jede Karte
   zeigt in einer Knotenkette, welche der acht Phasen sie abdeckt. */
.hoai {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 3.5vw, 48px);
  border-radius: 10px;
  color: var(--weiss);
  background:
    radial-gradient(50% 90% at 0% 0%, rgba(62, 150, 184, 0.22), rgba(62, 150, 184, 0) 70%),
    linear-gradient(160deg, var(--petrol-tiefer), var(--petrol-nacht));
}

.hoai::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
}

.hoai__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 32px;
  margin-bottom: clamp(22px, 2.6vw, 32px);
}

.hoai__titel {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--weiss);
}

.hoai__kopf p { color: rgba(255, 255, 255, 0.72); }

.hoai__phasen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.hoai__phasen li {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  font-size: 0.9063rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.hoai__phasen li:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(124, 192, 218, 0.5);
}

.hoai__phasen span:not(.hoai__kette) {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #7cc0da;
  font-variant-numeric: tabular-nums;
}

.hoai__phasen b {
  font-size: 1rem;
  font-weight: 600;
  color: var(--weiss);
}

/* Knotenkette: acht Ringe auf einer Leitung, die abgedeckten leuchten */
.hoai__kette {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.hoai__kette::before {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 1px;
  background: rgba(124, 192, 218, 0.3);
}

.hoai__kette i {
  position: relative;
  width: 9px;
  height: 9px;
  border: 1.5px solid rgba(124, 192, 218, 0.45);
  border-radius: 50%;
  background: var(--petrol-nacht);
}

.hoai__phasen li:nth-child(1) .hoai__kette i:nth-child(-n+2),
.hoai__phasen li:nth-child(2) .hoai__kette i:nth-child(n+3):nth-child(-n+4),
.hoai__phasen li:nth-child(3) .hoai__kette i:nth-child(n+5):nth-child(-n+7),
.hoai__phasen li:nth-child(4) .hoai__kette i:nth-child(8) {
  background: #9fd8ea;
  border-color: #9fd8ea;
  box-shadow: 0 0 10px rgba(159, 216, 234, 0.7);
}

@media (max-width: 900px) {
  .hoai__phasen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .hoai__phasen { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   21. Haltung: vier Leitsätze als Glaskarten über dem Netz (19.10.2026)

   Vorher fünf Sätze als graue Schrift direkt auf dem Leiterbahnnetz, schwer
   zu lesen, dazu eine poetische Überschrift. Jetzt sachlich, weiße Schrift
   auf mattem Glas; das Netz bleibt sichtbar, stört aber nicht mehr.
   ========================================================================== */

.netzband .kopfzeile h2 { color: var(--weiss); }
.netzband .kopfzeile p { color: rgba(255, 255, 255, 0.78); }

.leitsaetze {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}

.leitsatz {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: clamp(22px, 2vw, 28px);
  background: rgba(11, 32, 41, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.leitsatz:hover {
  border-color: rgba(124, 192, 218, 0.5);
  transform: translateY(-2px);
}

.leitsatz__symbol {
  width: 42px;
  height: 42px;
  padding: 9px;
  margin-bottom: 18px;
  border: 1px solid rgba(124, 192, 218, 0.4);
  border-radius: 10px;
  background: rgba(62, 150, 184, 0.12);
  fill: none;
  stroke: #9fd8ea;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leitsatz h3 {
  align-self: start;
  margin-bottom: 10px;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  color: var(--weiss);
}

.leitsatz p {
  font-size: 0.9688rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 1080px) {
  .leitsaetze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .leitsaetze { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .leitsatz { transition: none; }
  .leitsatz:hover { transform: none; }
}

/* ==========================================================================
   22. Häufige Fragen nach Themen (19.10.2026)

   Erst stand das Thema klein in einer eigenen linken Spalte, losgelöst von
   seinen Fragen. Jetzt ist es ein Kopf direkt über ihnen: Nummer im
   Ringknoten, Titel in Abschnittsgröße, darunter ohne Abstand die Fragen.
   ========================================================================== */

.faq-gruppen {
  display: grid;
  gap: clamp(40px, 4.5vw, 64px);
  max-width: 920px;
}

.faq-gruppe__titel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  letter-spacing: -0.02em;
}

.faq-gruppe__titel span {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.6px solid var(--petrol-signal);
  background: var(--weiss);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--petrol);
  font-variant-numeric: tabular-nums;
}

.faq-gruppe .faq { max-width: none; border-top-color: var(--petrol); }

/* ==========================================================================
   23. Kontakt hell und einladend (19.10.2026)

   Vorher Petrol auf Petrol, danach ein schwarzer Fuß: hochwertig, aber
   abweisend. Jetzt heller Grund mit dem feinen Raster des Schemas, links
   Text und Ansprechpartner, rechts vier weiße Karten. Anrufen ist die
   Hauptaktion und als einzige Karte gefüllt. Der Fuß darunter ist Petrol.
   ========================================================================== */

.kontakt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 128px);
  background:
    radial-gradient(45% 70% at 90% 10%, rgba(62, 150, 184, 0.14), rgba(62, 150, 184, 0) 70%),
    var(--weiss);
}

.kontakt::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(32, 90, 114, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 90, 114, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 90% at 80% 30%, #000, transparent);
  mask-image: radial-gradient(70% 90% at 80% 30%, #000, transparent);
}

.kontakt__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.kontakt__text h2 {
  max-width: 18ch;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.kontakt__text p {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 1.0625rem;
  color: var(--grau-text);
}


/* Vier Karten, zwei mal zwei */
.kontaktwege--karten {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border-block: 0;
}

.kontaktwege--karten .kontaktweg,
.kontaktwege--karten .kontaktweg:first-child {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  padding: clamp(20px, 2vw, 26px);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 10px;
  box-shadow: 0 18px 40px -32px rgba(20, 61, 78, 0.5);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.kontaktwege--karten .kontaktweg:hover {
  background: var(--weiss);
  border-color: rgba(62, 150, 184, 0.6);
  box-shadow: 0 24px 48px -28px rgba(20, 61, 78, 0.55);
  transform: translateY(-2px);
}

.kontaktwege--karten .kontaktweg svg {
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 10px;
  background: rgba(62, 150, 184, 0.12);
  stroke: var(--petrol);
}

.kontaktwege--karten .kontaktweg__wert { font-size: 1.0625rem; font-weight: 600; overflow-wrap: normal; white-space: nowrap; }

/* Anrufen (Hauptaktion) und E-Mail über die volle Breite, WhatsApp und
   Rückruf dazwischen nebeneinander. Die Adresse bricht so nie um. */
.kontaktwege--karten .kontaktweg:first-child,
.kontaktwege--karten .kontaktweg:last-child { grid-column: 1 / -1; }

/* Hauptaktion: Anrufen gefüllt */
.kontaktwege--karten .kontaktweg:first-child {
  background: linear-gradient(150deg, var(--petrol-hell), var(--petrol-tief));
  border-color: transparent;
  color: var(--weiss);
}
.kontaktwege--karten .kontaktweg:first-child:hover { background: linear-gradient(150deg, #22617c, var(--petrol-tief)); }
.kontaktwege--karten .kontaktweg:first-child svg { background: rgba(255, 255, 255, 0.14); stroke: var(--weiss); }
.kontaktwege--karten .kontaktweg:first-child .kontaktweg__art { color: rgba(255, 255, 255, 0.75); }

@media (max-width: 960px) {
  .kontakt__raster { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .kontaktwege--karten { grid-template-columns: minmax(0, 1fr); }
  .kontaktwege--karten .kontaktweg + .kontaktweg { border-top: 1px solid var(--linie); }
}

@media (prefers-reduced-motion: reduce) {
  .kontaktwege--karten .kontaktweg { transition: none; }
  .kontaktwege--karten .kontaktweg:hover { transform: none; }
}

/* ==========================================================================
   24. Technikbereich: Hausschnitt dunkel, Laufband als Busleitung,
       Systemschema direkt darunter (19.10.2026)

   Hausschnitt und Schema bilden eine durchgehende dunkle Fläche mit dem
   Schaltplanraster. Die Zeichnung behält ihre Gewerkefarben, auf dunklem
   Grund in der kräftigen Fassung (Heizung orange, Licht gelb, Energie grün,
   Zutritt violett, Beschattung graublau); Leitungen und Bauteile leuchten
   leicht. Beschriftungen sitzen auf Plaketten (alternative.js), zeigt man
   auf ein Gewerk, tritt der Rest zurück.
   ========================================================================== */

.haus--dunkel {
  --grund: transparent;
  overflow: hidden;
  isolation: isolate;
  padding-bottom: 0;
  background:
    radial-gradient(55% 60% at 70% 40%, rgba(62, 150, 184, 0.16), rgba(62, 150, 184, 0) 70%),
    linear-gradient(180deg, var(--petrol-nacht) 0%, var(--petrol-tiefer) 100%);
}

.haus--dunkel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(80% 80% at 60% 45%, #000, transparent);
  mask-image: radial-gradient(80% 80% at 60% 45%, #000, transparent);
  pointer-events: none;
}

.haus--dunkel .haus__text h2 { color: var(--weiss); }
.haus--dunkel .haus__text p { color: rgba(255, 255, 255, 0.78); }

/* Schema schließt ohne Naht an */
.haus--dunkel + .system--dunkel {
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(62, 150, 184, 0.14), rgba(62, 150, 184, 0) 70%),
    var(--petrol-tiefer);
}

/* --- Zeichnung auf dunklem Grund ---------------------------------------- */

.haus--dunkel .pg {
  --p-struktur: #7cc0da;
  --p-aktiv: #5fb8dc;
  --p-licht: #f2c55c;
  --p-energie: #56c98d;
  --p-klima: #e0714a;
  --p-besch: #9fb6c0;
  --p-zutritt: #a98bd0;
  --p-hinweis: #e0a04a;
  --p-text: rgba(255, 255, 255, 0.86);
}

.haus--dunkel .pg-schnitt { fill: rgba(124, 192, 218, 0.07); stroke: rgba(124, 192, 218, 0.34); }
.haus--dunkel .pg-raum    { fill: rgba(124, 192, 218, 0.025); }
.haus--dunkel .pg-wand    { fill: rgba(124, 192, 218, 0.06); stroke: rgba(124, 192, 218, 0.26); }
.haus--dunkel .pg-oeffnung { fill: var(--petrol-nacht); stroke: rgba(124, 192, 218, 0.4); }
.haus--dunkel .pg-dach    { fill: rgba(124, 192, 218, 0.1); stroke: rgba(124, 192, 218, 0.55); }
.haus--dunkel .pg-ziegel  { stroke: rgba(124, 192, 218, 0.3); }
.haus--dunkel .pg-erde    { stroke: rgba(124, 192, 218, 0.14); }
.haus--dunkel .pg-gelaende { stroke: rgba(124, 192, 218, 0.34); }

.haus--dunkel .pg-anzeige { fill: rgba(224, 113, 74, 0.14); }
.haus--dunkel .pg-knoten  { fill: var(--petrol-nacht); }


/* Plaketten am Rand („Raumklima“) ragen knapp über die viewBox hinaus */
.haus--dunkel .pg { overflow: visible; }

/* Leuchten: Bus und Bauteile mit weichem Schein in ihrer eigenen Farbe.
   Raffstore und Schaltschrank sind große helle Flächen; mit vollem Schein
   wirkten sie geisterhaft (Kunde, 19.10.) und leuchten deshalb nur knapp. */
.haus--dunkel .pg-bahn,
.haus--dunkel .pg-teil {
  filter: drop-shadow(0 0 3px currentColor);
}
.haus--dunkel .pg-teil:has(.pg--besch),
.haus--dunkel .pg-teil:has(.pg-schrank) {
  filter: drop-shadow(0 0 1px currentColor);
}
.haus--dunkel .pg-lamelle { opacity: 0.16; }
.haus--dunkel .pg-blende  { opacity: 0.28; }
.haus--dunkel .pg-schrank { fill: rgba(62, 150, 184, 0.07); stroke-opacity: 0.8; }
.haus--dunkel .pg-logo path { fill: #5fa3be; }
.haus--dunkel .pg-schild { fill: #7cc0da; }
.haus--dunkel .pg-punkt .pg-halo { opacity: 0.35; }

/* Beschriftung auf Plaketten (Rechtecke setzt alternative.js) */
.haus--dunkel .pg-marke {
  fill: var(--weiss);
  font-weight: 600;
}

.pg-plakette {
  fill: rgba(11, 32, 41, 0.82);
  stroke: currentColor;
  stroke-width: 1;
  stroke-opacity: 0.55;
  opacity: 0;
}

.pg--an .pg-plakette {
  transition: opacity 0.5s ease calc(0.09s * var(--i, 1) + 0.3s);
  opacity: 1;
}

/* Fokus auf ein Gewerk */
.haus--dunkel .pg [class*="pg--"],
.haus--dunkel .pg .pg-teil,
.haus--dunkel .pg .pg-marke,
.haus--dunkel .pg .pg-plakette {
  transition-property: opacity, stroke-dashoffset;
}
.pg--fokus .pg-bahn:not(.ist-fokus),
.pg--fokus .pg-fuehrung:not(.ist-fokus),
.pg--fokus .pg-teil:not(.ist-fokus),
.pg--fokus .pg-knoten:not(.ist-fokus),
.pg--fokus .pg-marke:not(.ist-fokus),
.pg--fokus .pg-plakette:not(.ist-fokus),
.pg--fokus .pg-punkt:not(.ist-fokus) {
  opacity: 0.18 !important;
}
.pg--fokus .pg-bahn.ist-fokus { filter: drop-shadow(0 0 6px currentColor); }
.haus--dunkel .pg-plakette,
.haus--dunkel .pg-marke,
.haus--dunkel .pg-teil { cursor: default; }

/* Legende für schmale Fenster */
.haus--dunkel .hero__legende { color: rgba(255, 255, 255, 0.8); }
.haus--dunkel .hero__lpunkt--energie { --pkt: #56c98d; }
.haus--dunkel .hero__lpunkt--besch { --pkt: #9fb6c0; }
.haus--dunkel .hero__lpunkt--licht { --pkt: #f2c55c; }
.haus--dunkel .hero__lpunkt--klima { --pkt: #e0714a; }
.haus--dunkel .hero__lpunkt--zutritt { --pkt: #a98bd0; }
.haus--dunkel .hero__lpunkt--aktiv { --pkt: #5fb8dc; }

/* --- Laufband als Busleitung -------------------------------------------- */
/* Eine durchgehende Leitung, die Namen hängen abwechselnd oben und unten an
   Stichleitungen mit Ringknoten. Die Namen wandern, die Leitung steht, über
   sie laufen Impulse in Gegenrichtung. */

.haus--dunkel .laufband {
  --mitte: 70px;
  position: relative;
  margin-top: clamp(48px, 6vw, 88px);
  border-block: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(11, 32, 41, 0.45);
}

.haus--dunkel .laufband::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--mitte) - 0.75px);
  height: 1.5px;
  background: rgba(124, 192, 218, 0.45);
}

.haus--dunkel .laufband::after {
  content: '';
  position: absolute;
  top: calc(var(--mitte) - 1.75px);
  right: 0;
  width: 160px;
  height: 3.5px;
  border-radius: 2px;
  background: linear-gradient(270deg, rgba(159, 216, 234, 0), #c8ecf6);
  filter: drop-shadow(0 0 6px rgba(159, 216, 234, 0.9));
  animation: busgegen 4.5s linear infinite;
}

@keyframes busgegen {
  from { transform: translateX(160px); }
  to   { transform: translateX(calc(-100vw - 160px)); }
}

.haus--dunkel .laufband__liste {
  height: calc(var(--mitte) * 2);
  padding: 0 20px;
  gap: 18px;
  align-items: stretch;
}

.haus--dunkel .laufband__liste li {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 18px 0 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.haus--dunkel .laufband__liste li:nth-child(even) {
  align-items: flex-end;
  padding: 0 0 18px;
}

/* Stichleitung zur Busleitung */
.haus--dunkel .laufband__liste li::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 58px;
  height: calc(var(--mitte) - 58px);
  border-left: 1.5px solid rgba(124, 192, 218, 0.55);
}

.haus--dunkel .laufband__liste li:nth-child(even)::after {
  top: var(--mitte);
}

/* Ringknoten auf der Leitung */
.haus--dunkel .laufband__liste li::before {
  left: calc(50% - 4.5px);
  top: calc(var(--mitte) - 4.5px);
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border-color: #7cc0da;
  background: var(--petrol-nacht);
}

.haus--dunkel .laufband__liste b {
  display: block;
  padding: 9px 18px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid rgba(124, 192, 218, 0.32);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--weiss);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.haus--dunkel .laufband__liste li:hover b {
  border-color: #7cc0da;
  box-shadow: 0 0 18px rgba(124, 192, 218, 0.35);
}

.haus--dunkel .laufband__liste li:hover::before { background: #9fd8ea; box-shadow: 0 0 10px #9fd8ea; }

@media (prefers-reduced-motion: reduce) {
  .haus--dunkel .laufband::after { display: none; }
  .haus--dunkel .laufband__liste { height: auto; padding-block: 16px; gap: 10px; }
  .haus--dunkel .laufband__liste li,
  .haus--dunkel .laufband__liste li:nth-child(even) { padding: 0; }
  .haus--dunkel .laufband__liste li::before,
  .haus--dunkel .laufband__liste li::after,
  .haus--dunkel .laufband::before { display: none; }
}

/* Tablet: die zweireihige „Ich bin“-Leiste braucht mehr Platz unter dem
   Hero-Inhalt. Steht hier am Ende, damit sie die allgemeine Regel aus
   Abschnitt 14 überstimmt. */
@media (min-width: 761px) and (max-width: 1100px) {
  .bhero:has(.einstieg--hero) { padding-bottom: calc(clamp(var(--a6), 3.5vw, var(--a8)) + 160px); }
}