/* HKE Lausitz — Marketing-Site Layout
   Basiert auf dem Design-System-UI-Kit, erweitert um die B2B-Relaunch-Sections.
   Tokens: colors_and_type.css                                                    */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--hke-sand-100);
  color: var(--hke-ink-900);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--hke-sand-100);
  border-bottom: 1px solid var(--hke-ink-100);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
  gap: 24px;
}
.site-header nav {
  display: flex; gap: 22px; align-items: center;
  /* Volle Hoehe des Innenbereichs. Die Links bleiben durch align-items
     zentriert. Notwendig, damit ein Navigationspunkt mit Aufklapper bis an
     die Unterkante der Kopfzeile reicht — sonst haengt die Klappe mitten in
     der Kopfzeile (siehe .site-header__sub). */
  align-self: stretch;
}

/* ---------- Navigations-Aufklapper (Kundenservice → Downloadbereich) ----------
   Die Klappe soll als Fortsatz der Kopfzeile lesen, nicht als schwebende
   Karte. Dafuer drei Dinge:

   1. Das Item spannt die volle Kopfzeilenhoehe (align-self: stretch). Der
      Link bleibt darin senkrecht zentriert. Ohne das war das Item nur 44 px
      hoch und endete 21 px ueber der Unterkante der Kopfzeile — die Klappe
      begann dann mitten in der Kopfzeile und schnitt deren Trennlinie.
      Nebeneffekt: die Hover-Flaeche reicht bis zur Kante, der Weg von Link
      zu Klappe ist lueckenlos und braucht keinen Puffer mehr.
   2. Zentriert unter dem Menuepunkt (left 50 % + translateX(-50 %)) statt
      per festem Versatz nach links.
   3. Material der Kopfzeile statt Weiss, oben ohne eigene Kante: die
      Trennlinie der Kopfzeile bildet die Oberkante der Klappe, gerundet
      wird nur unten. Der Schatten fällt ausschliesslich nach unten, ein
      Schatten nach oben würde die Klappe wieder von der Kopfzeile lösen.

   Geoeffnet wird per :hover UND :focus-within — ohne focus-within waere die
   Klappe mit der Tastatur nicht erreichbar. */
.site-header__item {
  position: relative;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}
.site-header__sub {
  position: absolute;
  /* +1px fuer die border-bottom der Kopfzeile: die Klappe haengt unter der
     Trennlinie, statt sie zu ueberdecken. Bewusst relativ gerechnet, damit
     eine geaenderte Kopfzeilenhoehe hier nichts kaputt macht. */
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 100%;
  display: none;
  z-index: 60;

  background: var(--hke-sand-050);
  border: 1px solid var(--hke-ink-100);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 16px -6px rgba(26, 26, 26, .14);
  /* Damit der Hover-Grund eines Eintrags nicht ueber die untere Rundung
     hinauslaeuft. */
  overflow: hidden;
}
.site-header__item:hover .site-header__sub,
.site-header__item:focus-within .site-header__sub {
  display: block;
}
/* Die Flaeche traegt die Klappe, die Eintraege sind schlichte Zeilen —
   sonst wuerde ein zweiter Eintrag als eigene Karte erscheinen. */
.site-header__sub a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0 18px;
  min-height: 44px;
  color: var(--hke-ink-700);
  text-decoration: none;
}
.site-header__sub a + a {
  border-top: 1px solid var(--hke-ink-100);
}
.site-header__sub a:hover,
.site-header__sub a:focus-visible {
  background: var(--hke-petrol-050);
  color: var(--hke-petrol-700);
}

/* Untereinträge im mobilen Drawer: eingerückt, kein Hover nötig. */
.site-header__drawer-sub {
  padding-left: 18px !important;
  font-size: 15px;
  opacity: .85;
}

/* Sprungziele nicht unter die klebende Kopfzeile (84 px) schieben.
   Betrifft jeden Anker, u. a. kundenservice.html#downloads. */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 104px; }
.site-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--hke-ink-700);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.site-header__nav > a:first-child {
  min-width: 44px;
  justify-content: center;
}
.site-header nav a:hover { color: var(--hke-petrol-700); }
.site-header nav a.active { color: var(--hke-petrol-900); font-weight: 600; }

/* ---------- Mobile-Navigation: Hamburger + Drawer ---------- */
.site-header__burger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; cursor: pointer;
  flex: none;
}
.site-header__burger span {
  display: block; width: 24px; height: 2px; border-radius: 2px;
  background: var(--hke-petrol-900);
  transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}
.site-header__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__burger.open span:nth-child(2) { opacity: 0; }
.site-header__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-header__drawer { display: none; }
.site-header__drawer a {
  display: block;
  font-size: 16px; font-weight: 500;
  color: var(--hke-ink-700);
  text-decoration: none;
  padding: 15px 24px;
  border-top: 1px solid var(--hke-ink-100);
}
.site-header__drawer a.active { color: var(--hke-petrol-900); font-weight: 600; }
.site-header__drawer-cta {
  margin: 14px 24px 18px;
  padding: 14px 22px !important;
  background: var(--hke-petrol-700);
  color: var(--hke-sand-100) !important;
  border-radius: 8px; border: none !important;
  text-align: center; font-weight: 600 !important;
}

.site-header__logo {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
}
.site-header__logo img { height: 60px; width: auto; display: block; }

/* ---------- Skip-Link (Tastatur/Screenreader: direkt zum Hauptinhalt) ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  padding: 10px 16px;
  background: var(--hke-petrol-900);
  color: var(--hke-sand-100);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600;
  border-radius: 8px;
  padding: 13px 22px;
  cursor: pointer;
  border: none;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
  text-decoration: none;
  line-height: 1.2;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--hke-petrol-050), 0 0 0 5px var(--hke-petrol-700);
}
.btn--primary { background: var(--hke-petrol-700); color: var(--hke-sand-100); }
.btn--primary:hover { background: var(--hke-petrol-800); }
.btn--primary:active { background: var(--hke-petrol-900); }
.btn--secondary {
  background: transparent;
  color: var(--hke-petrol-700);
  border: 1.5px solid var(--hke-petrol-700);
  padding: 10.5px 20.5px;
}
.btn--secondary:hover { background: var(--hke-petrol-050); color: var(--hke-petrol-800); border-color: var(--hke-petrol-800); }
.btn--tertiary {
  background: transparent; color: var(--hke-petrol-700);
  padding: 12px 0;
  font-weight: 600;
}
.btn--tertiary:hover { color: var(--hke-petrol-900); }
.btn--invert { background: var(--hke-sand-100); color: var(--hke-petrol-800); }
.btn--invert:hover { background: #fff; }
.btn--copper { background: var(--hke-copper-700); color: #fff; }
.btn--copper:hover { background: var(--hke-copper-600); }
.btn--lg { padding: 16px 28px; font-size: 16px; }

.btn .arrow {
  display: inline-block; transition: transform var(--dur-base) var(--ease-out);
  font-size: 18px; line-height: 1;
}
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Hero ---------- */
.hero {
  padding: 88px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
  position: relative;
}
@media (min-width: 1081px) {
  .hero__grid.ueber-hero__grid { grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
}
.hero__eyebrow {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hke-copper-700);
  font-weight: 600;
  margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 10px;
}
.hero__eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--hke-copper-500);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--hke-petrol-900);
  margin: 0 0 24px;
  max-width: 18ch;
  text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--hke-copper-700); }
.hero__lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--hke-ink-700);
  margin: 0 0 36px;
  max-width: 52ch;
}
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__meta {
  margin-top: 48px;
  display: flex; gap: 36px;
  border-top: 1px solid var(--hke-ink-100);
  padding-top: 28px;
}
.hero__meta-item .num {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 600;
  color: var(--hke-petrol-900);
  letter-spacing: -0.01em;
  line-height: 1;
}
.hero__meta-item .lbl {
  font-size: 13px;
  color: var(--hke-ink-500);
  margin-top: 6px;
}

/* ---------- Hero mit Hintergrund-Video (Startseite) ---------- */
.hero--video {
  padding: 0;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__poster,
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero__video { z-index: 1; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(90deg, rgba(20,20,20,.90) 0%, rgba(20,20,20,.66) 44%, rgba(20,20,20,.34) 100%),
    linear-gradient(0deg, rgba(20,20,20,.58) 0%, rgba(20,20,20,0) 42%);
}
.hero--video .hero__content { position: relative; z-index: 3; width: 100%; }
.hero--video .hero__title { max-width: 19ch; }
.hero--video .hero__lead { max-width: 50ch; }

/* Hinweis-Badge im Hero-Video (was ist zu sehen + LoRaWAN-USP) */
.hero__badge {
  position: absolute; right: 28px; top: 28px; z-index: 4;
  max-width: 320px;
  background: rgba(26,26,26,.60);
  border: 1px solid rgba(246,241,234,.20);
  border-radius: 10px;
  padding: 13px 15px;
  color: rgba(246,241,234,.92);
  font-size: 13px; line-height: 1.45;
}
.hero__badge-lbl {
  display: block;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--hke-petrol-300); font-weight: 600; margin-bottom: 5px;
}
.hero__badge a {
  color: var(--hke-petrol-300); text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; min-height: 44px;
  margin: -7px 0 -13px;
}
.hero__badge a:hover { text-decoration: underline; }
.hero--video .hero__eyebrow { color: var(--hke-petrol-300); }
.hero--video .hero__eyebrow .dot { background: var(--hke-petrol-300); }
.hero--video .hero__title { color: var(--hke-sand-100); }
.hero--video .hero__title em { color: var(--hke-petrol-500); }
.hero--video .hero__lead { color: rgba(246,241,234,.92); }
.hero--video .hero__meta { border-top-color: rgba(246,241,234,.22); }
.hero--video .hero__meta-item .num { color: var(--hke-sand-100); }
.hero--video .hero__meta-item .lbl { color: rgba(246,241,234,.7); }
.hero--video .btn--secondary {
  background: transparent;
  color: var(--hke-sand-100);
  border-color: rgba(246,241,234,.5);
}
.hero--video .btn--secondary:hover {
  background: rgba(246,241,234,.12);
  color: var(--hke-sand-100);
  border-color: var(--hke-sand-100);
}
/* Reduzierte Bewegung + Mobil: nur Poster, kein Video */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__video { display: none; }
}

/* Hero: Dashboard-Visual über Reportage-Bild geschichtet */
.hero__visual {
  position: relative;
  aspect-ratio: 4/5;
}
.hero__visual .image-bg {
  position: absolute; inset: 0;
  border-radius: 12px;
  overflow: hidden;
}
.hero__visual .dash-card {
  position: absolute;
  left: -28px; bottom: 48px;
  width: 86%;
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 10px;
  padding: 20px 22px 18px;
  box-shadow: 0 2px 4px rgba(26,26,26,.04), 0 24px 48px rgba(26,26,26,.14);
}

/* ---------- Mini-Dashboard (Hero) ---------- */
.mini-dash__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  color: var(--hke-petrol-900);
}
.mini-dash__head .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--hke-copper-700);
  background: var(--hke-copper-050);
  padding: 3px 8px; border-radius: 999px;
}
.mini-dash__row {
  display: grid; grid-template-columns: 1.4fr .8fr 1fr;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--hke-ink-100);
  font-size: 13px;
  align-items: center;
}
.mini-dash__row.head {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hke-ink-500); font-weight: 600; padding-top: 0; border-top: none;
}
.mini-dash__row .obj { color: var(--hke-ink-900); font-weight: 500; }
.mini-dash__row .id  { font-family: var(--font-mono); font-size: 11px; color: var(--hke-ink-500); }
.mini-dash__row .val { font-variant-numeric: tabular-nums; color: var(--hke-petrol-900); font-weight: 600; text-align: right; }
.mini-dash__row .ok  { color: var(--hke-success); }
.mini-dash__row .pending { color: var(--hke-warning); }
.mini-dash__foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hke-ink-100);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--hke-ink-500);
}
.mini-dash__foot .export {
  color: var(--hke-petrol-700); font-weight: 600;
  display: inline-flex; gap: 4px; align-items: center;
}

/* ---------- Sections ---------- */
section.sect { padding: 96px 0; }
.sect-head { margin-bottom: 56px; max-width: 760px; }
.sect-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sect-head .eyebrow {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hke-copper-700); font-weight: 600;
  margin-bottom: 16px; display: inline-block;
}
.sect-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--hke-petrol-900);
  margin: 0 0 16px;
  text-wrap: balance;
}
.sect-head h2 em { font-style: normal; color: var(--hke-copper-700); }
.sect-head p {
  font-size: 17px; line-height: 1.55;
  color: var(--hke-ink-700);
  margin: 0;
  max-width: 56ch;
}
.sect--paper { background: #fff; border-top: 1px solid var(--hke-ink-100); border-bottom: 1px solid var(--hke-ink-100); }
.sect--cta-tail {
  /* Letzte Schluss-CTA-Section: kein Streifen unter dem Kasten,
     Kasten schließt bündig am Footer an, keine Trenn-Borders. */
  padding-bottom: 0;
  border-top: none;
  border-bottom: none;
}
/* Auch die direkt vorangehende Section verliert ihren Trennstrich nach unten,
   damit am Übergang zur Schluss-CTA kein Linienartefakt entsteht. */
.sect:has(+ .sect--cta-tail) { border-bottom: none; }
/* Zwei aufeinanderfolgende weiße Bänder sind optisch EINE Fläche. Die Kante
   dazwischen trennt dann nichts, sie steht als Strich mitten im Weiß —
   auf Karriere zwischen Stellen und Team sichtbar geworden. Beide Kanten
   müssen weg: sie liegen auf derselben Höhe, eine allein zu entfernen
   ließe die andere stehen. Bewusst allgemein formuliert, damit der Fall
   nicht bei der nächsten Umstellung erneut auftaucht; aktuell trifft er
   genau diese eine Stelle. Ohne :has()-Unterstützung bleibt es beim
   bisherigen Bild, es bricht also nichts. */
.sect--paper:has(+ .sect--paper) { border-bottom: none; }
.sect--paper + .sect--paper { border-top: none; }
.sect--petrol { background: var(--hke-petrol-900); color: var(--hke-sand-100); }
.sect--petrol .sect-head h2 { color: var(--hke-sand-100); }
.sect--petrol .sect-head p { color: rgba(246,241,234,.78); }
.sect--petrol .sect-head .eyebrow { color: var(--hke-copper-300); }

/* ---------- Rechtstext-Prosa (Impressum, Datenschutz) ----------
   Schmale Lesebreite, klare Hierarchie für lange Fließtexte mit
   verschachtelten Überschriften-Ebenen (h2 Kapitel, h3/h4 Unterpunkte). */
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--hke-petrol-900);
  margin: 48px 0 14px;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--hke-petrol-900);
  margin: 32px 0 10px;
}
.legal h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--hke-ink-900);
  margin: 24px 0 8px;
}
.legal p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--hke-ink-700);
  margin: 0 0 16px;
  max-width: none;
}
.legal ul {
  margin: 0 0 16px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal li { font-size: 16px; line-height: 1.7; color: var(--hke-ink-700); }
.legal a { word-break: break-word; }
.legal__meta {
  font-size: 13px;
  color: var(--hke-ink-500);
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--hke-ink-100);
}

/* ---------- Social-Proof Strip ---------- */
.proof {
  padding: 36px 0;
  background: #fff;
  border-top: 1px solid var(--hke-ink-100);
  border-bottom: 1px solid var(--hke-ink-100);
}
.proof__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: center;
}
.proof__lbl {
  font-size: 13px; color: var(--hke-ink-500); line-height: 1.4;
}
.proof__chips {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  align-items: center;
}
.proof-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--hke-sand-100);
  border: 1px solid var(--hke-ink-100);
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  color: var(--hke-ink-700);
}
.proof-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hke-success); }
.proof-chip__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--hke-petrol-900);
  letter-spacing: -0.01em;
}

/* ---------- Service grid ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.svc-card {
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 8px;
  padding: 28px 24px 24px;
  display: flex; flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
  text-decoration: none;
  color: inherit;
}
/* Hover-Lift nur auf Geräten mit echtem Hover — sonst „klebt" der Effekt auf Touch. */
@media (hover: hover) {
  .svc-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(26,26,26,.05), 0 8px 20px rgba(26,26,26,.06); }
}
.svc-card__icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--hke-petrol-050);
  color: var(--hke-petrol-700);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.svc-card__icon img { width: 22px; height: 22px; }
.svc-card h3 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; line-height: 1.2;
  color: var(--hke-petrol-900);
  margin: 0;
}
.svc-card p {
  font-size: 15px; line-height: 1.55;
  color: var(--hke-ink-700);
  margin: 0;
}
.svc-card__more {
  margin-top: auto;
  padding-top: 16px;
  font-size: 14px; font-weight: 600;
  color: var(--hke-petrol-700);
  display: inline-flex; gap: 6px; align-items: center;
}

/* 3er-Variante des Karten-Grids (Zielgruppen-Pfade) */
.svc-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Mieter-Hinweis (sekundärer Pfad, nicht vertrieblich) ---------- */
.mieter {
  display: flex; align-items: center; gap: 24px;
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 8px;
  padding: 24px 28px;
}
.mieter__icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--hke-petrol-050);
  color: var(--hke-petrol-700);
  display: inline-flex; align-items: center; justify-content: center;
}
.mieter__body { flex: 1 1 auto; }
.mieter__body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  color: var(--hke-petrol-900);
  margin-bottom: 4px;
}
.mieter__body p {
  font-size: 15px; line-height: 1.55;
  color: var(--hke-ink-700);
  margin: 0;
}
.mieter__links { flex: none; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Vergleichs-Matrix ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.compare__col {
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 20px;
}
.compare__col--bad {
  background: var(--hke-sand-200);
  border-color: var(--hke-ink-200);
}
.compare__col--good {
  background: #fff;
  border-color: var(--hke-petrol-200);
  position: relative;
}
.compare__col--good::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--hke-petrol-500);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.compare__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hke-ink-100);
}
.compare__head h3 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  color: var(--hke-petrol-900);
  margin: 0;
}
.compare__col--bad .compare__head h3 { color: var(--hke-ink-700); }
.compare__head .pill {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--hke-sand-100);
  color: var(--hke-ink-700);
  border: 1px solid var(--hke-ink-100);
}
.compare__col--good .compare__head .pill {
  background: var(--hke-copper-050);
  color: var(--hke-copper-700);
  border-color: var(--hke-copper-100);
}
.compare__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.compare__list li {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px;
  align-items: flex-start;
  font-size: 15px; line-height: 1.5;
  color: var(--hke-ink-900);
}
.compare__col--bad .compare__list li { color: var(--hke-ink-500); }
.compare__list li strong {
  font-weight: 600; color: var(--hke-petrol-900); display: block;
}
.compare__list .mark {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.compare__col--bad .mark {
  background: var(--hke-sand-100);
  border: 1px solid var(--hke-ink-200);
  color: var(--hke-ink-500);
}
.compare__col--good .mark {
  background: var(--hke-petrol-700);
  color: #fff;
}
.compare__col--good .mark svg { width: 13px; height: 13px; }

/* ---------- Image-Slot (Placeholder + Foto) ---------- */
.imgslot {
  position: relative;
  background: var(--hke-petrol-800);
  color: var(--hke-sand-100);
  border-radius: 12px;
  overflow: hidden;
}
.imgslot--photo { background: var(--hke-sand-200); }
.imgslot--photo::before,
.imgslot--photo::after { content: none; }
.imgslot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.imgslot::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(160deg,
      var(--hke-petrol-800) 0%,
      var(--hke-petrol-700) 55%,
      var(--hke-petrol-600) 100%);
}
.imgslot__inner {
  position: relative;
  height: 100%; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px 26px;
}
.imgslot__inner.center {
  align-items: center; justify-content: center; text-align: center;
}
.imgslot__lbl {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  opacity: .75; margin-bottom: 6px;
  font-weight: 600;
}
.imgslot__txt {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500; line-height: 1.35;
  max-width: 36ch;
}
.imgslot__prompt {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: .55;
  margin-top: 8px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Karriere-CTA / Footer-Lead ---------- */
.kb {
  background: var(--hke-petrol-900);
  color: var(--hke-sand-100);
  border-radius: 16px;
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative; overflow: hidden;
}
.kb h2 {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 600; line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0 0 14px;
  color: var(--hke-sand-100);
  position: relative;
}
.kb p { margin: 0 0 24px; color: rgba(246,241,234,.82); font-size: 16px; line-height: 1.55; max-width: 44ch; position: relative; }
.kb__cta { display: flex; gap: 12px; flex-wrap: wrap; position: relative; }
.kb__visual { position: relative; }
.kb__chips {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.kb__chip {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
}
.kb__chip .num {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  color: var(--hke-copper-300);
  display: block; margin-bottom: 2px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--hke-petrol-900);
  color: rgba(246,241,234,.7);
  padding: 72px 0 32px;
  font-size: 14px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 56px;
}
.site-footer__heading {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  color: var(--hke-sand-100);
  letter-spacing: .06em; text-transform: uppercase;
  margin: 0 0 16px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(246,241,234,.75);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.site-footer a:hover { color: var(--hke-sand-100); }
.site-footer__lockup img { height: 88px; width: auto; margin-bottom: 20px; display: block; }
.site-footer__lockup p { font-size: 14px; line-height: 1.55; max-width: 28ch; }
.site-footer__bottom {
  border-top: 1px solid rgba(246,241,234,.15);
  padding-top: 24px;
  display: flex; justify-content: space-between;
  font-size: 13px; color: rgba(246,241,234,.5);
}
.site-footer__addr { font-size: 14px; line-height: 1.6; color: rgba(246,241,234,.7); margin-top: 4px; }
.site-footer__addr strong { color: var(--hke-sand-100); display: block; margin-bottom: 4px; }

/* ===================================================================
   Seitenspezifisch — Lösungen
   =================================================================== */

.feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 96px;
}
.feat:last-child { margin-bottom: 0; }
.feat--reverse { direction: rtl; }
.feat--reverse > * { direction: ltr; }
.feat__copy h3 {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 600; line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--hke-petrol-900);
  margin: 12px 0 16px;
  text-wrap: balance;
}
.feat__copy > p {
  font-size: 16px; line-height: 1.6;
  color: var(--hke-ink-700);
  margin: 0 0 20px;
  max-width: 52ch;
}
.feat__bullets { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 12px; }
.feat__bullets li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  align-items: flex-start;
  font-size: 15px; line-height: 1.5;
  color: var(--hke-ink-900);
}
.feat__bullets li svg { width: 22px; height: 22px; color: var(--hke-petrol-700); margin-top: 1px; }

.feat__visual { aspect-ratio: 5/4; }

/* Code-Karte für "L+M-Satz Datenintegration" */
.code-card {
  background: var(--hke-petrol-900);
  border-radius: 12px;
  padding: 22px 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(246,241,234,.92);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  height: 100%;
  display: flex; flex-direction: column;
}
.code-card__head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  color: rgba(246,241,234,.6);
}
.code-card__head .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.code-card__head .name { margin-left: auto; font-family: var(--font-mono); }
.code-card pre {
  margin: 0;
  font-family: inherit;
  white-space: pre-wrap;
  flex: 1;
}
.code-card .k { color: var(--hke-copper-300); }
.code-card .s { color: #B8E0CE; }
.code-card .n { color: #F2D49B; }
.code-card .c { color: rgba(246,241,234,.5); }

/* uVI-Visual: monatliche Briefe / Push */
.uvi-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  background: var(--hke-sand-200);
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  padding: 24px;
}
.uvi-row {
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 8px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  font-size: 13px;
}
.uvi-row .ico {
  width: 36px; height: 36px;
  background: var(--hke-petrol-050);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hke-petrol-700);
}
.uvi-row .ico svg { width: 18px; height: 18px; }
.uvi-row .month { font-weight: 600; color: var(--hke-petrol-900); margin-bottom: 2px; }
.uvi-row .meta { color: var(--hke-ink-500); font-size: 12px; }
.uvi-row .status {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--hke-petrol-050);
  color: var(--hke-petrol-700);
}
.uvi-row .status.sent {
  background: rgba(31,160,99,.1); color: var(--hke-success);
}

/* Concierge-Wechsel-Guide (Steps) */
.steps {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: flex-start;
}
.steps__nav {
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
}
.steps__nav-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--hke-ink-700);
  font-family: inherit;
  width: 100%;
  align-items: center;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.steps__nav-item .num {
  font-family: var(--font-mono);
  font-size: 12px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--hke-sand-100);
  border: 1px solid var(--hke-ink-100);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hke-ink-700);
}
.steps__nav-item:hover { background: var(--hke-sand-100); }
.steps__nav-item.active {
  background: var(--hke-petrol-050);
  color: var(--hke-petrol-900);
  font-weight: 600;
}
.steps__nav-item.active .num {
  background: var(--hke-petrol-700);
  border-color: var(--hke-petrol-700);
  color: #fff;
}
.steps__nav-item.done .num {
  background: var(--hke-success);
  border-color: var(--hke-success);
  color: #fff;
}
.steps__panel {
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  padding: 40px 44px;
  min-height: 420px;
}
.steps__panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--hke-copper-700);
  margin-bottom: 12px;
  font-weight: 500;
}
.steps__panel h3 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 600; line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--hke-petrol-900);
  margin: 0 0 16px;
  text-wrap: balance;
}
.steps__panel > p {
  font-size: 16px; line-height: 1.6;
  color: var(--hke-ink-700);
  margin: 0 0 24px;
  max-width: 60ch;
}
.steps__detail {
  background: var(--hke-sand-100);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.55;
}
.steps__detail strong { font-weight: 600; color: var(--hke-petrol-900); display: block; margin-bottom: 6px; }
.steps__detail .who {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hke-copper-700);
  margin-bottom: 6px;
  font-weight: 500;
}
.steps__controls {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--hke-ink-100);
}
.steps__controls > div { flex-wrap: wrap; }
.steps__controls .lbl { font-size: 13px; color: var(--hke-ink-500); }

/* ===================================================================
   Seitenspezifisch — Regulatorik-Hub
   =================================================================== */

.reg {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: flex-start;
}
/* Ohne Sidebar (Wechsel-Kit ausgeblendet): einspaltig, zentriert, angenehme Lesebreite */
.reg--full {
  grid-template-columns: minmax(0, 880px);
  justify-content: center;
}
.reg__main { display: flex; flex-direction: column; gap: 24px; }

.reg-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
@media (hover: hover) {
  .reg-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 12px 32px rgba(26,26,26,.08); }
}
.reg-card__img {
  background: var(--hke-petrol-800);
  position: relative;
  min-height: 200px;
}
/* Foto/Platzhalter füllt die Karten-Bildspalte auf voller Höhe */
.reg-card__img .imgslot { position: absolute; inset: 0; border-radius: 0; }
.reg-card__body { padding: 32px 32px 32px 0; }
.reg-card__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--hke-copper-700);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 500;
  display: inline-flex; gap: 10px; align-items: center;
}
.reg-card__tag .date { color: var(--hke-ink-500); font-weight: 400; }
.reg-card h3 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600; line-height: 1.2;
  color: var(--hke-petrol-900);
  margin: 0 0 12px;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.reg-card p {
  font-size: 15px; line-height: 1.55;
  color: var(--hke-ink-700);
  margin: 0 0 20px;
  max-width: 50ch;
}
.reg-card__more {
  font-size: 14px; font-weight: 600;
  color: var(--hke-petrol-700);
  text-decoration: none;
  display: inline-flex; gap: 6px; align-items: center;
}

/* Featured / Lead-Card (countdown) */
.reg-card--lead {
  grid-template-columns: 1fr 1fr;
  background: linear-gradient(180deg, var(--hke-petrol-900) 0%, var(--hke-petrol-800) 100%);
  color: var(--hke-sand-100);
  border: none;
}
.reg-card--lead .reg-card__img { background: var(--hke-petrol-700); }
.reg-card--lead .reg-card__body { padding: 40px 44px 40px 0; }
.reg-card--lead .reg-card__tag { color: var(--hke-copper-300); }
.reg-card--lead .reg-card__tag .date { color: rgba(246,241,234,.55); }
.reg-card--lead h3 { color: var(--hke-sand-100); font-size: 30px; line-height: 1.15; }
.reg-card--lead p { color: rgba(246,241,234,.82); }
.reg-card--lead .reg-card__more { color: var(--hke-copper-300); }

/* Countdown-Visual */
.countdown {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding: 36px;
}
.countdown::after {
  /* Light-Teal-Akzentbalken oben — kein Tile-Pattern. */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--hke-petrol-500);
}
.countdown__lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hke-copper-300);
  margin-bottom: 12px;
  position: relative;
  font-weight: 500;
}
.countdown__date {
  font-family: var(--font-display);
  font-size: 42px; font-weight: 600;
  color: var(--hke-sand-100);
  letter-spacing: -0.018em;
  line-height: 1;
  margin-bottom: 8px;
  position: relative;
}
.countdown__sub {
  font-size: 13px;
  color: rgba(246,241,234,.7);
  position: relative;
}

/* Sidebar / Sticky Lead-Widget */
.reg-aside {
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 20px;
}
.lead-widget {
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  padding: 28px 26px;
  box-shadow: 0 1px 2px rgba(26,26,26,.04);
}
.lead-widget__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hke-copper-700);
  font-weight: 500;
  margin-bottom: 10px;
}
.lead-widget h3 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; line-height: 1.2;
  color: var(--hke-petrol-900);
  margin: 0 0 14px;
  letter-spacing: -0.018em;
}
.lead-widget__list {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: var(--hke-ink-700);
}
.lead-widget__list li {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: flex-start;
  line-height: 1.45;
}
.lead-widget__list svg { width: 16px; height: 16px; color: var(--hke-petrol-700); margin-top: 2px; }
.lead-widget .field { margin-bottom: 12px; }
.lead-widget .field input {
  font-family: var(--font-body); font-size: 14px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--hke-ink-200);
  border-radius: 8px;
  background: #fff;
  outline: none;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.lead-widget .field input:focus {
  border-color: var(--hke-petrol-700);
  box-shadow: 0 0 0 4px var(--hke-petrol-050);
}
.lead-widget .legal {
  font-size: 12px; color: var(--hke-ink-500); line-height: 1.5; margin-top: 12px;
}

/* ===================================================================
   Seitenspezifisch — Karriere
   =================================================================== */

.k-hero {
  padding: 88px 0 64px;
}
.k-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}
.k-hero h1 {
  font-family: var(--font-display);
  font-size: 52px; font-weight: 600; line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--hke-petrol-900);
  margin: 0 0 22px;
  max-width: 20ch;
  text-wrap: balance;
}
.k-hero__lead {
  font-size: 18px; line-height: 1.55;
  color: var(--hke-ink-700);
  margin: 0 0 28px;
  max-width: 48ch;
}
.k-hero__strip {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 32px;
  border-top: 1px solid var(--hke-ink-100);
  padding-top: 24px;
  font-size: 13px; color: var(--hke-ink-500);
}
.k-hero__strip strong { color: var(--hke-petrol-900); font-weight: 600; }

.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.usp {
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}
.usp__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--hke-copper-700);
  font-weight: 500;
  margin-bottom: 14px;
}
.usp h3 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600; line-height: 1.2;
  color: var(--hke-petrol-900);
  margin: 0 0 12px;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.usp p {
  font-size: 15px; line-height: 1.55;
  color: var(--hke-ink-700);
  margin: 0 0 20px;
}
.usp__quote {
  border-top: 1px solid var(--hke-ink-100);
  padding-top: 16px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--hke-ink-700);
  line-height: 1.5;
  font-style: italic;
}
.usp__quote-who {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 13px;
  color: var(--hke-ink-500);
}

/* 60-Sek-Quiz */
.quiz {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--hke-ink-100);
  box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 12px 32px rgba(26,26,26,.06);
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
}
.quiz__head {
  padding: 24px 32px;
  background: var(--hke-petrol-900);
  color: var(--hke-sand-100);
  position: relative;
  overflow: hidden;
}
.quiz__lbl {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--hke-copper-300);
  margin-bottom: 6px;
  font-weight: 500;
}
.quiz__title {
  position: relative;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; line-height: 1.2;
  margin: 0;
  letter-spacing: -0.018em;
}
.quiz__progress {
  position: relative;
  margin-top: 18px;
  height: 4px;
  background: rgba(255,255,255,.12);
  border-radius: 2px;
  overflow: hidden;
}
.quiz__progress span {
  display: block; height: 100%;
  width: 100%;
  transform-origin: left center;
  background: var(--hke-copper-500);
  transition: transform var(--dur-slow) var(--ease-out);
}
.quiz__step {
  padding: 36px 44px 44px;
}
.quiz__step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--hke-copper-700);
  font-weight: 500;
  margin-bottom: 10px;
}
.quiz__q {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600; line-height: 1.2;
  color: var(--hke-petrol-900);
  margin: 0 0 24px;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.quiz__options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.quiz__opt {
  display: flex; align-items: center; gap: 14px;
  position: relative;
  padding: 14px 18px;
  background: var(--hke-sand-100);
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  text-align: left;
  font-family: inherit;
  color: var(--hke-ink-900);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
  width: 100%;
}
.quiz__opt:hover { background: var(--hke-sand-200); }
.quiz__opt.selected {
  background: var(--hke-petrol-050);
  border-color: var(--hke-petrol-700);
}
.quiz__opt .radio {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--hke-ink-200);
  flex-shrink: 0;
  position: relative;
}
.quiz__opt.selected .radio {
  border-color: var(--hke-petrol-700);
  background: var(--hke-petrol-700);
}
.quiz__opt.selected .radio::after {
  content: ""; position: absolute;
  inset: 4px;
  background: #fff;
  border-radius: 50%;
}
.quiz__opt .label { flex: 1; }
.quiz__opt .meta { font-size: 13px; color: var(--hke-ink-500); }
.quiz__field { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.quiz__field label { font-size: 13px; font-weight: 500; color: var(--hke-ink-700); }
.quiz__field input {
  font-family: var(--font-body); font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--hke-ink-200);
  border-radius: 8px;
  background: #fff;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.quiz__field input:focus {
  border-color: var(--hke-petrol-700);
  box-shadow: 0 0 0 4px var(--hke-petrol-050);
}
.quiz__controls {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--hke-ink-100);
}
.quiz__controls > div { flex-wrap: wrap; }
.quiz__controls .timer {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--hke-ink-500);
  display: inline-flex; gap: 8px; align-items: center;
}
.quiz__controls .timer .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hke-copper-500); }

/* Quiz Erfolgs-Screen */
.quiz__done {
  padding: 48px 44px;
  text-align: center;
}
.quiz__done h3 {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600; line-height: 1.2;
  color: var(--hke-petrol-900);
  margin: 0 0 12px;
  letter-spacing: -0.018em;
}
.quiz__done > p {
  font-size: 16px; line-height: 1.55;
  color: var(--hke-ink-700);
  max-width: 44ch; margin: 0 auto 28px;
}
.quiz__done .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.quiz__summary {
  background: var(--hke-sand-100);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 0 auto 28px;
  max-width: 480px;
  text-align: left;
  font-size: 13px;
}
.quiz__summary .row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.quiz__summary .row + .row { border-top: 1px solid var(--hke-ink-100); }
.quiz__summary .k { color: var(--hke-ink-500); }
.quiz__summary .v { color: var(--hke-petrol-900); font-weight: 600; }

/* Angebots-Funnel — Ergänzungen zum quiz__*-Muster (Mehrfachauswahl,
   Datei-Upload, Richtwert-Karte). Gleicher Stil, gleiche Tokens.           */
.quiz__opt-native {
  position: absolute;
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: 0; padding: 0; border: 0;
  opacity: 0; pointer-events: none;
}
.quiz__opt-native:focus-visible + .checkbox {
  outline: 2px solid var(--hke-petrol-700);
  outline-offset: 2px;
}
.quiz__opt .checkbox {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--hke-ink-200);
  flex-shrink: 0;
  position: relative;
}
.quiz__opt.selected .checkbox {
  border-color: var(--hke-petrol-700);
  background: var(--hke-petrol-700);
}
.quiz__opt.selected .checkbox::after {
  content: ""; position: absolute;
  left: 5px; top: 2px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.btn--disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.btn--disabled:hover { transform: none; }
.btn--disabled .arrow { transform: none; }

.funnel-hint {
  font-size: 13px; line-height: 1.5;
  color: var(--hke-ink-500);
  margin: -12px 0 28px;
}
/* Das -12px oben gleicht den Außenabstand des Vorgängerelements aus
   (.quiz__field 16px, .funnel-file 14px, .quiz__options 28px). Die
   Einwilligungszeile ist ein .quiz__opt-Label ohne solchen Abstand — dort
   liefe der Hinweis sonst in die Checkbox-Zeile hinein. */
.quiz__opt + .funnel-hint { margin-top: 10px; }
.funnel-hint--error { color: var(--hke-error); font-weight: 600; }
.quiz__field input[aria-invalid="true"] { border-color: var(--hke-error); }
.funnel-file { margin-bottom: 14px; }
.funnel-file input[type="file"] {
  font-family: var(--font-body); font-size: 14px;
  color: var(--hke-ink-700);
  width: 100%;
}
.funnel-file input[type="file"]::file-selector-button {
  font-family: var(--font-body); font-size: 14px;
  min-height: 44px;
  padding: 10px 16px; margin-right: 14px;
  border: 1px solid var(--hke-ink-200);
  border-radius: 8px;
  background: var(--hke-sand-100);
  color: var(--hke-ink-900);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.funnel-file input[type="file"]::file-selector-button:hover { background: var(--hke-sand-200); }
.funnel-file__name { font-size: 13px; font-weight: 500; color: var(--hke-petrol-700); margin-top: 10px; }
.funnel-richtwert {
  background: var(--hke-petrol-050);
  border: 1px solid var(--hke-petrol-100);
  border-radius: 10px;
  padding: 24px 28px;
  text-align: center;
  margin-bottom: 24px;
}
.funnel-richtwert .lbl {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hke-petrol-700); font-weight: 600;
  margin-bottom: 8px;
}
.funnel-richtwert .val {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 600; line-height: 1.2;
  color: var(--hke-petrol-900);
  letter-spacing: -0.02em;
}
.funnel-richtwert .hint {
  font-size: 13px; line-height: 1.5;
  color: var(--hke-ink-500);
  max-width: 42ch; margin: 10px auto 0;
}

/* ===================================================================
   Seitenspezifisch — Über uns
   =================================================================== */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar {
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  padding: 36px 32px;
  position: relative;
}
.pillar__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--hke-petrol-700);
  font-weight: 500;
  margin-bottom: 14px;
  display: block;
}
.pillar h3 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 600; line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--hke-petrol-900);
  margin: 0 0 12px;
}
.pillar p {
  font-size: 15px; line-height: 1.6;
  color: var(--hke-ink-700);
  margin: 0;
}
.pillar__bar {
  width: 32px; height: 3px;
  background: var(--hke-petrol-500);
  border-radius: 2px;
  margin-bottom: 22px;
}

/* History / Wandel */
.history {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.history__line {
  display: flex; flex-direction: column; gap: 28px;
  position: relative;
  padding-left: 32px;
}
.history__line::before {
  content: ""; position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--hke-petrol-100);
}
.history__item {
  position: relative;
}
.history__item::before {
  content: "";
  position: absolute;
  left: -32px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--hke-petrol-700);
  border: 3px solid var(--hke-sand-100);
}
.history__year {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--hke-petrol-700);
  font-weight: 500;
  margin-bottom: 4px;
}
.history__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  color: var(--hke-petrol-900);
  margin: 0 0 6px;
  letter-spacing: -0.018em;
}
.history__body {
  font-size: 15px; line-height: 1.55;
  color: var(--hke-ink-700);
  margin: 0;
  max-width: 44ch;
}

/* Kernkompetenz · 3 Schritte */
.process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
.process__step {
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  padding: 32px 28px 28px;
  position: relative;
}
.process__step .ico {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--hke-petrol-050);
  color: var(--hke-petrol-700);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.process__step .ico img { width: 24px; height: 24px; }
.process__step .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hke-petrol-700);
  font-weight: 500;
  margin-bottom: 10px;
}
.process__step h3 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; line-height: 1.2;
  color: var(--hke-petrol-900);
  margin: 0 0 10px;
  letter-spacing: -0.018em;
}
.process__step p {
  font-size: 15px; line-height: 1.55;
  color: var(--hke-ink-700);
  margin: 0;
}
.process__step .arrow {
  position: absolute;
  right: -22px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  background: var(--hke-sand-100);
  border: 1px solid var(--hke-ink-100);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hke-petrol-700);
  font-weight: 700;
  z-index: 2;
}
.process__step:last-child .arrow { display: none; }

/* Zielgruppen */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.audience {
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 10px;
  padding: 22px 20px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.audience .ico {
  width: 36px; height: 36px;
  background: var(--hke-petrol-050);
  color: var(--hke-petrol-700);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.audience .ico img { width: 18px; height: 18px; }
.audience strong {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  color: var(--hke-petrol-900);
}
.audience span {
  font-size: 13px; color: var(--hke-ink-500); line-height: 1.45;
}

/* ===================================================================
   Seitenspezifisch — Kundenservice
   =================================================================== */

.cs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cs-card {
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  padding: 28px 28px 24px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 20px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
@media (hover: hover) {
  .cs-card:hover {
    transform: translateY(-2px);
    border-color: var(--hke-petrol-200);
    box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 8px 20px rgba(26,26,26,.06);
  }
}
.cs-card .ico {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--hke-petrol-050);
  color: var(--hke-petrol-700);
  display: inline-flex; align-items: center; justify-content: center;
}
.cs-card .ico img { width: 22px; height: 22px; }
.cs-card__body { min-width: 0; }
.cs-card__lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hke-petrol-700);
  font-weight: 500;
  margin-bottom: 8px;
}
.cs-card h3 {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600; line-height: 1.25;
  color: var(--hke-petrol-900);
  margin: 0 0 8px;
  letter-spacing: -0.018em;
}
.cs-card p {
  font-size: 14px; line-height: 1.5;
  color: var(--hke-ink-700);
  margin: 0;
}
details > summary {
  min-height: 44px;
  margin-block: -9px;
}
.cs-card__type {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--hke-ink-500);
  background: var(--hke-sand-100);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}

/* Externe-Link-Karte */
.cs-card--external .ico {
  background: var(--hke-sand-100);
  color: var(--hke-ink-700);
}

/* Funktechnik (LoRaWAN / wM-Bus) */
.funk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.funk-card {
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  padding: 32px;
}
.funk-card h3 {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600; line-height: 1.3;
  color: var(--hke-petrol-900);
  margin: 0 0 12px;
  letter-spacing: -0.018em;
}
.funk-card p {
  margin: 0;
  font-size: 15px; line-height: 1.6;
  color: var(--hke-ink-700);
}
.funk-note {
  margin-top: 24px;
  font-size: 14px;
  color: var(--hke-ink-700);
  line-height: 1.6;
  max-width: 62ch;
}
.funk-callout {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--hke-sand-100);
  border: 1px solid var(--hke-ink-100);
  border-left: 3px solid var(--hke-petrol-500);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--hke-ink-700);
  max-width: 62ch;
}

/* Kontakt-Block */
.cs-contact {
  display: grid;
  /* Vier Kontaktwege seit 10.09. (WhatsApp ergänzt) — auto-fit, damit eine
     weitere Spalte nicht wieder eine CSS-Änderung erzwingt. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px;
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  padding: 36px 40px;
}
.cs-contact__col h3 {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hke-petrol-700);
  margin: 0 0 10px;
}
.cs-contact__col .val {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--hke-petrol-900);
  line-height: 1.2;
}
.cs-contact__col .sub {
  font-size: 13px;
  color: var(--hke-ink-500);
  margin-top: 6px;
  line-height: 1.5;
}

/* ---------- Kontakt + Mini-Konfigurator (Startseite) ---------- */
.kontakt {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 28px;
  align-items: start;
}
.kontakt__form {
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  padding: 32px;
}
.kontakt__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kontakt__field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.kontakt__field label { font-size: 13px; font-weight: 500; color: var(--hke-ink-700); }
.kontakt__field input,
.kontakt__field select,
.kontakt__field textarea {
  font-family: var(--font-body); font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--hke-ink-200);
  border-radius: 8px;
  background: #fff;
  outline: none; width: 100%;
  color: var(--hke-ink-900);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.kontakt__field textarea { min-height: 110px; resize: vertical; }
.kontakt__field input:focus,
.kontakt__field select:focus,
.kontakt__field textarea:focus {
  border-color: var(--hke-petrol-700);
  box-shadow: 0 0 0 4px var(--hke-petrol-050);
}
.kontakt__legal { font-size: 12px; color: var(--hke-ink-500); line-height: 1.5; margin: 2px 0 18px; }
.kontakt__done { text-align: center; padding: 28px 8px; }
.kontakt__done h3 { font-family: var(--font-display); font-size: 24px; color: var(--hke-petrol-900); margin: 0 0 10px; }
.kontakt__done p { font-size: 15px; line-height: 1.6; color: var(--hke-ink-700); max-width: 46ch; margin: 0 auto 22px; }
.kontakt__info {
  background: linear-gradient(180deg, var(--hke-petrol-900), var(--hke-petrol-800));
  color: var(--hke-sand-100);
  border-radius: 12px;
  padding: 30px 28px;
}
.kontakt__info h3,
.kontakt__info h4 { font-family: var(--font-display); font-size: 18px; margin: 0 0 20px; color: #fff; }
.kontakt__info-block { margin-bottom: 20px; }
.kontakt__info-lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--hke-petrol-300); display: block; margin-bottom: 5px; }
.kontakt__info-val { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.kontakt__info-sub { font-size: 13px; color: rgba(246,241,234,.7); margin-top: 3px; }

/* ===================================================================
   Responsive
   =================================================================== */

@media (max-width: 760px) {
  .kontakt { grid-template-columns: 1fr; }
  .kontakt__row { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
  .pillars, .process { grid-template-columns: 1fr; gap: 16px; }
  .process__step .arrow { display: none; }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .cs { grid-template-columns: 1fr; }
  .funk-grid { grid-template-columns: 1fr; }
  .history { grid-template-columns: 1fr; gap: 40px; }
  .cs-contact { grid-template-columns: 1fr; }
  .cs-card { grid-template-columns: 40px 1fr; }
  .cs-card__type { grid-column: 2; justify-self: flex-start; margin-top: 4px; }
}

@media (max-width: 980px) {
  .hero { padding: 56px 0 64px; }
  .hero__grid, .region__grid, .portal__grid, .reg, .steps, .compare, .k-hero__grid, .feat {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero__title, .k-hero h1 { font-size: 40px; }
  .sect-head h2 { font-size: 32px; }
  section.sect { padding: 64px 0; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .usp-grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .kb { grid-template-columns: 1fr; padding: 32px; }
  .reg-card { grid-template-columns: 1fr; }
  .reg-card__body { padding: 24px; }
  /* Die Lead-Karte braucht ihre eigene Zeile: .reg-card--lead
     .reg-card__body setzt oben padding-left: 0, weil dort auf dem Desktop
     die Bildspalte anschliesst. Diese Regel hat zwei Klassen und gewinnt
     damit gegen das einklassige .reg-card__body hier — einspaltig dockte
     der Text sonst direkt an der linken Kastenkante an. */
  .reg-card--lead .reg-card__body { padding: 28px 24px; }
  .reg-card__img { min-height: 180px; }
  .steps__nav { position: relative; top: 0; flex-direction: row; overflow-x: auto; min-width: 0; }
  .steps__nav-item { min-width: 200px; }
  .steps__panel { min-width: 0; padding: 28px 22px; }
  .proof__inner { grid-template-columns: 1fr; gap: 16px; }
  .hero__visual .dash-card { left: 0; right: 0; width: auto; bottom: 24px; }
  .quiz__step { padding: 28px 24px; }
}

@media (max-width: 900px) {
  .site-header nav.site-header__nav { display: none; }
  .site-header__burger { display: flex; }
  .site-header__drawer.open { display: block; }
  .hero__badge { display: none; }
}
@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .site-header__inner { height: 64px; }
  .site-header__logo img { height: 44px; }
  .svc-grid { grid-template-columns: 1fr; }
  .mieter { flex-direction: column; align-items: flex-start; gap: 16px; }
  .mieter__links { width: 100%; }
  .hero__meta { flex-wrap: wrap; gap: 20px; }
  .hero__title { font-size: 34px; }
  .hero__video { display: none; }
  .hero--video { min-height: 74vh; }
  .legal h2 { font-size: 22px; margin: 36px 0 12px; }
  .legal h3 { font-size: 17px; margin: 26px 0 8px; }
}

/* ---------- Logo-Leiste Partner & Hersteller (Marquee) ----------
   Echte, von HKE gelieferte Logos. Kontinuierlicher Lauf von links nach
   rechts; pausiert bei Hover und respektiert prefers-reduced-motion.
   Höhe kommt pro Logo als --logo-h aus der Komponente (optischer Ausgleich
   der sehr unterschiedlichen Seitenverhältnisse).                     */
.logo-marquee {
  background: #fff;
  border-bottom: 1px solid var(--hke-ink-100);
  padding: 20px 0 24px;
}
.logo-marquee__label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hke-ink-500);
  text-align: center;
  margin-bottom: 16px;
}
.logo-marquee__viewport {
  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);
}
.logo-marquee__track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  padding-right: 72px;
  animation: logo-marquee-scroll 36s linear infinite;
}
.logo-marquee__viewport:hover .logo-marquee__track {
  animation-play-state: paused;
}
.logo-marquee__item {
  flex: 0 0 auto;
  height: var(--logo-h, 30px);
  opacity: .7;
  filter: grayscale(1);
  transition: opacity 220ms cubic-bezier(.22,.61,.36,1);
}
.logo-marquee__item:hover { opacity: 1; }
.logo-marquee__item img {
  height: 100%;
  width: auto;
  display: block;
}
/* Lauf von links nach rechts: Track startet bei -50 % (zweite, identische
   Hälfte im Bild) und schiebt sich nach 0 — nahtloser Loop. */
@keyframes logo-marquee-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}
@media (max-width: 600px) {
  .logo-marquee__track { gap: 44px; padding-right: 44px; }
  /* Proportional verkleinern, damit der optische Ausgleich erhalten bleibt. */
  .logo-marquee__item { height: calc(var(--logo-h, 30px) * .8); }
}

/* ---------- ProHKA Portal-Banner (Software-Nutzen, kompakt) ---------- */
.prohka {
  background: var(--hke-petrol-050);
  border: 1px solid var(--hke-petrol-100);
  border-radius: 16px;
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 44px;
  align-items: center;
}
.prohka__intro h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--hke-petrol-900);
  margin: 12px 0 12px;
  max-width: 18ch;
}
.prohka__intro p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--hke-ink-700);
  margin: 0 0 22px;
  max-width: 42ch;
}
.prohka__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 26px;
}
.prohka__item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.prohka__item .ico {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--hke-petrol-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.prohka__item .txt {
  font-size: 13px;
  line-height: 1.5;
  color: var(--hke-ink-700);
}
.prohka__item .txt strong {
  display: block;
  color: var(--hke-petrol-900);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 3px;
}
@media (max-width: 860px) {
  .prohka { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
  .prohka__grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Wissens-Grafiken (Inline-SVG statt Platzhalter) ---------- */
.reg-card__img--graphic { background: var(--hke-sand-100); }
.reg-card__img--graphic svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Rauchwarnmelder (kompakte Zusatzleistung, Text + Bullets) ------
   Weiße Karte auf Paper-Section, zweispaltig: Copy links, Prüf-Bullets rechts.
   Kein Foto. Gleiche Tokens wie mieter/feat.                                 */
.rwm {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 44px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  padding: 40px 44px;
}
.rwm__icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--hke-petrol-050);
  color: var(--hke-petrol-700);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.rwm__copy h3 {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--hke-petrol-900);
  margin: 12px 0 16px;
  text-wrap: balance;
}
.rwm__copy p {
  font-size: 16px; line-height: 1.6;
  color: var(--hke-ink-700);
  margin: 0;
  max-width: 54ch;
}
.rwm__bullets { margin: 0; }
@media (max-width: 980px) {
  .rwm { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
}

/* ---------- Referenzen / Testimonials (Demo-Platzhalter) ------------------
   Schlichtes Karten-Grid, weiße Karte, Zitat in Display-Font. Klar als
   Platzhalter gekennzeichnet, echte Stimmen folgen vor dem Launch.          */
.ref-grid {
  display: grid;
  /* auto-fit statt fester Drittel: die Sektion wächst mit der Zahl der
     freigegebenen Kundenstimmen, ohne dass das Layout angefasst werden muss. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
/* Ein oder zwei Stimmen sollen nicht über die volle Zeile laufen. */
.ref-grid[data-anzahl="1"] { max-width: 620px; }
.ref-grid[data-anzahl="2"] { max-width: 900px; }
.ref-card {
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  padding: 32px 30px 28px;
  display: flex; flex-direction: column;
  gap: 20px;
  margin: 0;
}
.ref-card__quote {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 500; line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--hke-petrol-900);
  margin: 0;
  text-wrap: balance;
}
.ref-card__who {
  font-size: 13px; line-height: 1.5;
  color: var(--hke-ink-500);
  margin-top: auto;
}
@media (max-width: 760px) {
  .ref-grid { grid-template-columns: 1fr; }
}

/* Stellenliste auf der Karriereseite (#stellen).
   Eine Zeile je offene Stelle: Titel, Umfang, Aufgabe, Bewerbungs-CTA.
   Bewusst Liste statt Kachelraster — offene Stellen werden gelesen und
   einzeln geprüft, nicht nebeneinander verglichen. Deckt sich mit der
   Zahl im Hero-Strip, beides kommt aus OFFENE_STELLEN. */
.stellen { display: flex; flex-direction: column; gap: 16px; }
.stelle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 28px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--hke-ink-100);
  border-radius: 12px;
  padding: 24px 28px;
}
.stelle__titel {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; line-height: 1.25;
  color: var(--hke-petrol-900);
  margin: 0;
  letter-spacing: -0.018em;
}
.stelle__umfang {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hke-petrol-700);
  margin-top: 8px;
}
.stelle__text {
  grid-column: 1;
  font-size: 15px; line-height: 1.55;
  color: var(--hke-ink-700);
  margin: 12px 0 0;
  max-width: 62ch;
}
.stelle__cta { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
@media (max-width: 760px) {
  .stelle { grid-template-columns: 1fr; }
  .stelle__cta { grid-column: 1; grid-row: auto; margin-top: 18px; }
}

/* Rückmeldung neben einem gesperrten Weiter-Button.
   Der ausgegraute Button zeigt, DASS etwas fehlt, nicht WAS — und ist als
   disabled nicht fokussierbar. Der Hinweis steht deshalb sichtbar in der
   Controls-Zeile und ist per aria-describedby am Button verankert. Er
   behält seinen Platz auch leer, damit die Zeile beim Auftauchen nicht
   umspringt. */
.quiz__gate {
  flex: 1 1 100%;
  order: 3;
  margin: 0;
  min-height: 1.5em;
  font-size: 13px; line-height: 1.5;
  color: var(--hke-petrol-700);
}

/* Bildunterschrift unter dem Teamfoto auf "Über uns".
   Der Satz stand vorher als zweiter Lead in der Textspalte, gehört
   inhaltlich aber zum Bild. .hero__visual gibt 4/5 vor, das Foto selbst
   4/3 — der Platz darunter stand ohnehin leer. Kleiner als .hero__lead,
   damit es als Bildunterschrift und nicht als zweiter Absatz liest. */
.ueber-hero__cap {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hke-ink-500);
  max-width: 44ch;
}

/* Auswahlkarten mobil untereinander statt nebeneinander.
   .quiz__opt ist eine Flex-Zeile [Radio | Label | Meta]. Auf schmalen
   Displays teilen sich Label und Meta die Restbreite und brechen beide
   mehrzeilig um — "Mess­dienst-Technik" stand dreizeilig neben einem
   ebenso zerhackten Meta-Text. Unter 600px wird daraus ein Raster: Radio
   links, Label in Zeile 1, Meta darunter. Betrifft Bewerbungs-Quiz und
   Angebots-Konfigurator gleichermassen, beide nutzen dieselbe Klasse.
   Steht am Dateiende, damit die Regeln nach den spaeteren
   .quiz__opt-Definitionen greifen. */
@media (max-width: 600px) {
  .quiz__opt {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
    padding: 16px 18px;
  }
  .quiz__opt .radio,
  .quiz__opt .checkbox {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-top: 3px;
  }
  .quiz__opt .label {
    grid-column: 2;
    grid-row: 1;
    flex: none;
  }
  .quiz__opt .meta {
    grid-column: 2;
    grid-row: 2;
  }
}