/* ============================================================
   BAUM — page sections (homepage + shared section patterns)
   ============================================================ */

/* ================= HERO — scroll-scrubbed sequence ================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: var(--c-navy-ink);
}

.hero-media {
  position: absolute;
  inset: 0;
}

#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .4s ease;
}

.hero-poster.is-hidden {
  opacity: 0;
}

/* legibility scrim — content sits left, sequence detail lives right */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 15, 30, .78) 0%, rgba(5, 15, 30, .45) 42%, rgba(5, 15, 30, .06) 70%),
    linear-gradient(180deg, rgba(5, 15, 30, .35) 0%, transparent 22%, transparent 70%, rgba(5, 15, 30, .5) 100%);
}

/* cursor-responsive cobalt light (subtle, hero only) */
.hero-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(620px 460px at 68% 42%, rgba(38, 114, 185, .20), transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-46%);
  z-index: 2;
}

.hero-content .display {
  max-width: 12ch;
  margin-block: var(--sp-6);
}

.hero-content .lead {
  color: var(--c-on-navy);
  max-width: 50ch;
  margin-bottom: var(--sp-10);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* coordinates, bottom-right — pinned to the global content rail */
.hero-meta {
  position: absolute;
  bottom: 34px;
  z-index: 2;
  right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  text-align: right;
}

/* below ~1400px the Schnellkontakt-FAB shares the corner — lift the coords clear */
@media (max-width: 1400px) {
  .hero-meta {
    bottom: 110px;
  }
}

/* Scroll-Statements — ein zentrierter bold Titel pro Beat, aufgedeckt von der Scrub-Timeline.
   USER-ENTSCHEID: kein Label, kein Subtext, keine Linie (die alte .hero-fieldline wurde dafür
   entfernt — nicht wieder einführen).
   v=89: von `.hero-mid` auf das geteilte `.hero-beat` generalisiert, weil ein 2. Statement
   (.hero-end) dazukam. .hero-mid/.hero-end bleiben als GSAP-Hooks + z-index bestehen. */
.hero-beat {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding-inline: var(--gutter);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  /* revealed by the scrub timeline */
  pointer-events: none;
}

.hero-mid {
  z-index: 2;
}

/* z-index 4, nicht 2: .hero-endcap (z-index 3) ist eine unten verankerte 42vh-Bande. Bei
   1920×950 berühren sich Titel (475–539) und Endcap-Oberkante (551) NICHT — bei der
   .hero-min-height von 620px aber sehr wohl (Titel 310–374 vs. Endcap-Oberkante 360), und bei
   jedem zweizeiligen deutschen Titel ebenfalls. Gemessen, nicht defensiv. */
.hero-end {
  z-index: 4;
}

.hero-beat .hero-beat-title {
  font-size: clamp(36px, 4.2vw, 60px);
  /* stays below the 64px hero display */
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 2px 32px rgba(5, 15, 30, .55);
  /* legibility over the bright keypad + endcap wash */
}

/* bright handoff into the light section below */
.hero-endcap {
  position: absolute;
  inset: auto 0 0 0;
  height: 42vh;
  z-index: 3;
  background: linear-gradient(180deg, transparent 0%, rgba(238, 242, 247, .65) 55%, var(--c-surface) 100%);
  opacity: 0;
  pointer-events: none;
}

/* --- static fallback (mobile / reduced motion / no canvas) ---
   ⚠️ `.hero-beat` (nicht `.hero-mid`/`.hero-end` einzeln): hero-sequence.js steigt bei
   prefers-reduced-motion ODER max-width:767px früh aus — die Timeline existiert dort GAR NICHT,
   niemand setzt je autoAlpha:0. Allein dieses display:none hält die Statements zurück. Ein
   vergessener Selektor legt den Titel auf JEDEM Handy über das Poster. Die geteilte Klasse
   deckt beide Beats und jeden künftigen ab. */
.hero-static #heroCanvas,
.hero-static .hero-beat,
.hero-static .hero-endcap {
  display: none;
}

.hero-static .hero-poster {
  opacity: 1 !important;
}

.hero-static .hero-content {
  position: absolute;
  transform: none;
  top: auto;
  bottom: clamp(72px, 14vh, 140px);
}

@media (max-width: 767px) {
  .hero-content .display {
    font-size: clamp(40px, 11.5vw, 56px);
  }

  .hero-meta {
    display: none;
  }

  .hero-ctas .btn {
    width: 100%;
  }
}

/* ================= INTRO — Seit 1990 editorial statement ================= */
.intro {
  background: var(--c-surface);
  overflow: hidden;
}

/* Zwei-Spalten Text ↔ Bild → FLEXBOX (Layout-Regel, s. CLAUDE.md Playbook Punkt 8).
   Parent flex + Kind-Spalten flex; Text-Spalte vertikal zentriert gegen das höhere Bild. */
.intro-grid {
  display: flex;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.intro-copy {
  flex: 1 1 40%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.intro-copy .h2 {
  max-width: 26ch;
  margin-block: var(--sp-5) var(--sp-6);
}

/* ================= Zweifarbige Titel (v=90) =================
   USER-WUNSCH: das Zweiton-Prinzip aus dem #intro-Titel site-weit wiederholen.
   `<em>` markiert im Titel die WENDE des Satzes — den Gegensatz („nicht X. Sondern Y."),
   den Relativsatz („Gebäude, DIE WIR SCHÜTZEN.") oder die Auflösung nach dem Gedankenstrich.
   Kein Kursiv (font-style:normal), nur Farbe.

   ⚠️ Das ist eine KURATIERTE Liste, keine Regel: von 105 Überschriften haben nur ~20 überhaupt
   eine Wende. Bei einteiligen Titeln („Komponenten im Überblick.") gäbe es nichts zu markieren —
   die letzten Wörter einzufärben wäre willkürlich. Und ein mechanischer Komma-Split zerlegt
   deutsche Komposita: „Tür-, Schloss- & Beschlagtechnik" hat ein Komma MITTEN im Begriff.
   Also: <em> nur dort setzen, wo der Satz wirklich kippt.

   Kontrast: h1/h2 sind ≥48px = Large Text (Schwelle 3:1). --c-primary erreicht 5.01:1 auf Weiss
   und 4.46:1 auf --c-bg-alt. Auf dunklem Navy nur 3.40:1 (formal ok, optisch matschig) — darum
   greift dort --c-accent (4.83:1). USER-ENTSCHEID v=90: <em> wird vorerst NUR auf hellen
   Sektionen gesetzt; die .on-dark-Regel ist Absicherung, falls später eine dunkle dazukommt. */
h1 em,
h2 em,
.h1 em,
.h2 em,
.display em {
  font-style: normal;
  color: var(--c-primary);
}

.on-dark h1 em,
.on-dark h2 em,
.on-dark .h1 em,
.on-dark .h2 em,
.on-dark .display em {
  color: var(--c-accent);
}

.intro-copy .lead {
  margin-bottom: var(--sp-12);
}

/* animated system chain: Beratung → Planung → Montage → Wartung */
.intro-chain {
  position: relative;
  padding-top: 18px;
}

.intro-chain .chain-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-border);
}

.intro-chain .chain-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s var(--ease-inout) .2s;
}

.intro-chain.is-inview .chain-track::after {
  transform: scaleX(1);
}

.intro-chain ol {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  counter-reset: chain;
}

.intro-chain li {
  position: relative;
  flex: 1;
}

.intro-chain li::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 1.5px solid var(--c-primary);
}

.intro-chain .step-num {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  color: var(--c-muted);
  margin-bottom: 2px;
}

.intro-chain .step-name {
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--c-text);
}

/* image column with architectural crop + ghost numeral */
.intro-media {
  position: relative;
  z-index: 0;
  /* own stacking context so the ghost stays inside */
  display: flex;
  flex-direction: column;
  flex: 1 1 60%;
  min-width: 0;
}

.intro-media .frame {
  position: relative;
  flex: 1;
  min-height: 600px;
}

.intro-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% center;
}

.intro-media figcaption {
  margin-top: var(--sp-4);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
}

.intro-ghost {
  position: absolute;
  right: -6%;
  top: -22%;
  z-index: -1;
  font-size: clamp(120px, 16vw, 230px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--c-bg-alt);
  user-select: none;
  pointer-events: none;
}

@media (max-width: 900px) {
  .intro-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .intro-chain ol {
    flex-wrap: wrap;
    row-gap: var(--sp-6);
  }

  .intro-chain li {
    flex: 1 1 40%;
  }

  .intro-ghost {
    top: auto;
    bottom: -10%;
  }

  .intro-media .frame {
    min-height: 0;
  }

  .intro-media img {
    position: static;
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

/* ================= BENTO — statisches Karten-Grid (MUSTER, nicht Sektion) =================
   Gleichgroße Bild-oben-Karten auf dunklem Textur-Grund, ganze Karte verlinkt. Statisch, kein JS.
   USER v=85: Die Klassen hießen `.leistbento*`, weil das Muster damals nur „Leistungen im
   Überblick" gehörte. Seit dem Stil-TAUSCH nutzt **Branchen** das Bento und **Leistungen** den
   H-Track — inhaltsbezogene Namen wären jetzt falsch. Darum muster-basiert: `.bento*` / `.htrack*`.
   Der Hintergrund gehört bewusst zum MUSTER (nicht zur Sektion) — beim Tausch wandert er mit. */
.bento {
  background:
    linear-gradient(180deg, rgba(9, 28, 54, .92) 0%, rgba(6, 20, 40, .90) 100%),
    url('/assets/img/global/dark-10.webp') center / cover no-repeat fixed;
  overflow: hidden;
}

.bento-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.bento-head .h2 {
  max-width: 18ch;
  margin-top: var(--sp-5);
}

.bento-head .tech-label {
  padding-bottom: var(--sp-2_5);
  text-align: right;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.5vw, 24px);
}

/* USER-ENTSCHEID v=85: 4 Spalten für Sektionen mit 8 Karten (Branchen) — 3 Spalten ergäben
   3+3+2, also eine ragged letzte Reihe mit Loch. 4×2 bleibt symmetrisch; die Karten werden
   dafür schmaler (~300px statt ~424px auf der 1320er-Schiene). Ab 980px greifen ohnehin
   wieder 2 bzw. 1 Spalte, der Modifier ist also nur für Desktop relevant. */
.bento-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 980px) {

  .bento-grid,
  .bento-grid--4 {
    grid-template-columns: 1fr 1fr;
  }

  .bento-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .bento-head .tech-label {
    text-align: left;
  }
}

@media (max-width: 560px) {
  /* USER v=181: einspaltig standen die Karten nur 16px auseinander — der Fliesstext einer Karte
     klebte am Bild der naechsten. 40px. Die Karten selbst sind Subgrids mit row-gap:0, der Wert
     wirkt also NUR zwischen den Karten, nicht zwischen Bild/Titel/Text. */
  .bento-grid {
    grid-template-columns: 1fr;
    row-gap: var(--sp-10);
  }
}

/* ================= PROBLEM → LÖSUNG ================= */
.solve {
  background: var(--c-bg-alt);
  overflow: hidden;
}

.solve-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.solve-panel {
  padding: clamp(36px, 4.5vw, 72px);
  position: relative;
}

.solve-problem {
  background: linear-gradient(165deg, var(--c-navy-deep), var(--c-navy));
}

.solve-panel .eyebrow {
  margin-bottom: var(--sp-5);
}

.solve-problem .eyebrow {
  color: var(--c-on-navy-muted);
}

.solve-panel h3 {
  max-width: 22ch;
  margin-bottom: var(--sp-5);
}

.solve-panel p {
  max-width: 54ch;
  font-size: 15.5px;
}

.solve-problem p {
  color: var(--c-on-navy);
}

/* fragmented components (problem side) */
.solve-frags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2_5);
  margin-top: var(--sp-8);
}

.solve-frags span {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--c-on-navy-muted);
  border: 1px dashed rgba(126, 150, 184, .45);
  padding: var(--sp-2) var(--sp-3_5);
  transform: rotate(var(--tilt, 0deg));
}

/* connected system (solution side) */
.solve-diagram {
  margin-top: var(--sp-8);
  position: relative;
}

.solve-diagram svg {
  width: 100%;
  height: auto;
  display: block;
}

.solve-diagram .node-label {
  font-size: 12px;
  font-weight: 550;
  letter-spacing: .06em;
  fill: var(--c-text);
  text-transform: uppercase;
}

.solve-diagram .node-dot {
  fill: var(--c-surface);
  stroke: var(--c-primary);
  stroke-width: 1.5;
}

.solve-diagram .link {
  stroke: var(--c-primary);
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 1.6s var(--ease-inout) .3s;
}

.solve-diagram .hub {
  fill: var(--c-primary);
}

.solve-diagram .hub-label {
  font-size: 12.5px;
  font-weight: 600;
  fill: #fff;
  letter-spacing: .04em;
}

#solveLines.is-drawn .link {
  stroke-dashoffset: 0;
}

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

/* ================= H-TRACK — horizontal gepinnter Chapter-Track (MUSTER, nicht Sektion) =========
   GSAP-ScrollTrigger pinnt die Sektion und scrubbt den Track horizontal (nur ≥901px und ohne
   prefers-reduced-motion; darunter = normaler Swipe-Scroll mit scroll-snap). Progress-Bar +
   Zähler laufen über `self.progress`. Panel-Anzahl ist egal (`track.children.length`).
   USER v=85: hieß `.branchen*`; seit dem Stil-TAUSCH nutzt **Leistungen** dieses Muster. */
.htrack {
  background:
    linear-gradient(180deg, rgba(5, 15, 30, .90) 0%, rgba(7, 26, 51, .88) 100%),
    url('/assets/img/global/dark-7.webp') center / cover no-repeat;
  overflow: hidden;
}

.htrack-pin {
  padding-block: var(--section-pad);
}

.htrack-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: clamp(36px, 5vh, 64px);
}

.htrack-head .h2 {
  max-width: 26ch;
  margin-top: var(--sp-5);
  font-size: clamp(28px, 3.4vw, 44px);
}

.htrack-progress {
  min-width: 200px;
  text-align: right;
}

.htrack-progress .count {
  font-size: var(--fs-sm);
  color: var(--c-on-navy-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}

.htrack-progress .bar {
  margin-top: var(--sp-2_5);
  height: 1px;
  background: rgba(201, 216, 236, .18);
  position: relative;
}

.htrack-progress .bar i {
  position: absolute;
  inset: 0;
  right: auto;
  width: 0%;
  background: var(--c-primary);
}

.htrack-track {
  display: flex;
  gap: clamp(20px, 2.6vw, 40px);
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  will-change: transform;
}

.htrack-panel {
  flex: 0 0 auto;
  width: clamp(300px, 30vw, 460px);
  position: relative;
}

.htrack-panel .media {
  position: relative;
  overflow: hidden;
  height: min(40vh, 440px);
}

@media (max-width: 900px) {
  .htrack-panel .media {
    height: auto;
    aspect-ratio: 4 / 5;
  }
}

.htrack-panel .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.1s var(--ease-out);
}

.htrack-panel:hover .media img {
  transform: scale(1);
}

.htrack-panel .media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 26, 51, .05), transparent 40%, rgba(5, 15, 30, .55) 100%);
}

.htrack-panel .p-num {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .9);
  background: rgba(7, 26, 51, .6);
  padding: 5px 9px;
  font-variant-numeric: tabular-nums;
}

/* v=85: `min-height: 2.3em` ist hier RAUS und wanderte auf `.bento-body h3`; seit v=121 sitzt
   sie auf `.bento-grid .svccard-title` (die weisse Bento-Karte wurde durch die Bildkarte
   ersetzt). Die Regel kam
   aus v=29 und hing an den LANGEN Branchen-Namen ("Hausverwaltungen & Wohnungswirtschaft"),
   nicht am Muster — sie reservierte eine 2. Zeile, damit Body/CTA aller Karten fluchten.
   Seit dem Tausch stehen im Track die KURZEN Leistungs-Titel (alle einzeilig); die Reservierung
   erzeugte dort nur eine tote Lücke. Sie ist mit dem Inhalt zu Branchen (Bento) gewandert. */
.htrack-panel h3 {
  font-size: clamp(19px, 1.7vw, 23px);
  margin-top: 18px;
  letter-spacing: -0.01em;
}

.htrack-panel p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-on-navy);
  max-width: 38ch;
  margin-top: 6px;
}

.htrack-panel .link-arrow {
  margin-top: var(--sp-3);
  font-size: 14px;
  color: var(--c-on-navy-2);
}

.htrack-panel .link-arrow:hover {
  color: #fff;
}

@media (max-width: 900px) {
  .htrack-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sp-3);
  }

  .htrack-track::-webkit-scrollbar {
    height: 3px;
  }

  .htrack-track::-webkit-scrollbar-thumb {
    background: var(--c-navy-2);
  }

  .htrack-panel {
    width: 76vw;
    scroll-snap-align: start;
  }

  .htrack-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .htrack-progress {
    display: none;
  }
}

/* ================= WHY BAUM — facts + certification ledger ================= */
.why {
  background: var(--c-bg-alt);
}

.why-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.why-sticky {
  position: sticky;
  top: 110px;
}

.why-sticky .h2 {
  max-width: 19ch;
  margin-block: var(--sp-5) var(--sp-6);
}

.why-sticky .lead {
  margin-bottom: var(--sp-10);
}

/* certification ledger — document-like register */
.cert-ledger {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}

.cert-ledger header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3_5) 18px;
  border-bottom: 1px solid var(--c-border);
}

.cert-ledger header .tech-label {
  color: var(--c-text);
}

.cert-row {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  padding: 13px 18px;
  border-bottom: 1px solid var(--c-border);
  font-size: 14px;
  color: var(--c-body);
}

.cert-row:last-child {
  border-bottom: 0;
}

.cert-row .idx {
  font-size: 11px;
  color: var(--c-primary);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.cert-row strong {
  font-weight: 550;
}

/* fact rows */
.fact-rows {
  display: flex;
  flex-direction: column;
}

.fact-row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: clamp(20px, 3vw, 52px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 32px) 0;
}

.fact-num {
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
}

.fact-num sup {
  font-size: .45em;
  color: var(--c-primary);
  font-weight: 550;
}

.fact-label {
  font-size: 15.5px;
  font-weight: 550;
  color: var(--c-text);
}

.fact-text {
  font-size: 14px;
  color: var(--c-body);
  max-width: 46ch;
  margin-top: var(--sp-1);
}

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

  .why-sticky {
    position: static;
  }
}

/* USER v=84 (Screenshot 03): Abstand Zahl → Text war zu groß. Ursache war nicht das gap,
   sondern die feste Zahlenspalte minmax(140px,200px): "1990" ist bei 42px nur ~90px breit,
   der Rest der Spalte blieb tote Fläche. auto = Spalte schrumpft auf die Zahl. */
@media (max-width: 700px) {
  .fact-row {
    grid-template-columns: auto 1fr;
    gap: var(--sp-5);
  }
}

/* ================= PROCESS — 5 stages, blueprint transformation ================= */
.process {
  background: var(--c-surface);
  padding-block: var(--section-pad);
}

.process-wrap {
  position: relative;
}

.process-sticky>.container {
  width: 100%;
}

/* fill rail, don't shrink to content */
.process-head {
  margin-bottom: clamp(28px, 4vh, 56px);
}

.process-head .h2 {
  max-width: 24ch;
  margin-top: var(--sp-5);
}

.process-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 96px);
  align-items: center;
}

/* stage list — USER v=84 (Screenshot 04): Führungslinie, Füll-Linie (.fill) und Kreis-Marker
   ENTFERNT; dadurch entfällt auch das padding-left von 26px, das nur Platz für sie war.
   Das .fill-Element bleibt im DOM (components.js schreibt seine height), ist aber unsichtbar. */
.process-stages {
  position: relative;
}

.process-stages .fill {
  display: none;
}

.p-stage {
  padding: 13px 0;
  opacity: .7;
  transition: opacity .3s ease;
  position: relative;
  cursor: pointer;
}

.p-stage:hover {
  opacity: 1;
}

.p-stage:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 4px;
}

.p-stage .s-num {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}

.p-stage h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  margin: 3px 0 var(--sp-1);
}

.p-stage p {
  font-size: 14px;
  color: var(--c-body);
  max-width: 42ch;
  line-height: 1.55;
  display: none;
}

/* USER v=84: Icon UND Titel auf EINER Zeile, Text darunter — auch auf Desktop.
   Grid statt Flex, weil der Text (Zeile 2) unter dem TITEL beginnen soll, nicht unter dem Icon.
   Nur wenn ein Icon da ist; ohne data-icon bleibt der alte Fluss. */
.p-stage[data-icon] {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-3);
  align-items: center;
}

.p-stage[data-icon]>.icon-chip {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.p-stage[data-icon]>h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.p-stage[data-icon]>p {
  grid-column: 2;
  grid-row: 2;
  margin-top: 6px;
}

.p-stage.is-active {
  opacity: 1;
}

.p-stage.is-active p {
  display: block;
}

.p-stage.is-done {
  opacity: .7;
}

/* blueprint visual */
.process-visual {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    linear-gradient(rgba(38, 114, 185, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 114, 185, .05) 1px, transparent 1px),
    var(--c-bg-alt);
  background-size: 28px 28px, 28px 28px, auto;
}

.process-visual svg {
  width: 100%;
  height: auto;
  display: block;
}

.process-visual .plabel {
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.process-visual .pstage-label {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}

/* SVG stage layers: revealed via data-stage on .process-sticky */
.bp {
  stroke: var(--c-navy);
  stroke-width: 1.4;
  fill: none;
}

.bp-thin {
  stroke: rgba(38, 114, 185, .55);
  stroke-width: 1;
  fill: none;
}

.bp-dash {
  stroke: rgba(38, 114, 185, .8);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 4 4;
}

.bp-node {
  fill: var(--c-surface);
  stroke: var(--c-primary);
  stroke-width: 1.4;
}

.bp-node-solid {
  fill: var(--c-primary);
  stroke: none;
}

.bp-text {
  font-size: 9.5px;
  letter-spacing: .1em;
  fill: var(--c-muted);
  text-transform: uppercase;
}

.stage-layer {
  opacity: 0;
  transition: opacity .45s ease;
}

[data-stage="1"] .sl-1 {
  opacity: 1;
}

[data-stage="2"] .sl-1,
[data-stage="2"] .sl-2 {
  opacity: 1;
}

[data-stage="3"] .sl-1,
[data-stage="3"] .sl-2,
[data-stage="3"] .sl-3 {
  opacity: 1;
}

[data-stage="4"] .sl-2,
[data-stage="4"] .sl-3,
[data-stage="4"] .sl-4 {
  opacity: 1;
}

[data-stage="5"] .sl-3,
[data-stage="5"] .sl-4,
[data-stage="5"] .sl-5 {
  opacity: 1;
}

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

/* ================= REFERENZEN — project stories ================= */
.refs {
  background: var(--c-bg-alt);
}

.refs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: clamp(32px, 3.5vw, 48px);
}

.refs-head .h2 {
  max-width: 20ch;
  margin-top: var(--sp-5);
}

.ref-story {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 4.5vw, 80px);
  align-items: stretch;
}

.ref-story+.ref-story {
  margin-top: clamp(56px, 6.5vw, 104px);
}

.ref-story:nth-of-type(even) .ref-media {
  order: 2;
}

.ref-media {
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

.ref-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ref-media .pnum {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 11px;
  letter-spacing: .14em;
  color: #fff;
  background: rgba(7, 26, 51, .68);
  padding: 5px var(--sp-2_5);
  font-variant-numeric: tabular-nums;
}

.ref-body .tech-label {
  display: block;
  margin-bottom: var(--sp-2_5);
}

.ref-body h2,
.ref-body h3 {
  font-size: clamp(22px, 2.2vw, 30px);
  max-width: 18ch;
  margin-bottom: var(--sp-4);
}

.ref-body .result {
  font-size: 15.5px;
  color: var(--c-body);
  max-width: 46ch;
  margin-bottom: var(--sp-6);
}

.ref-systems {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--sp-6);
}

.ref-systems span {
  font-size: 13.5px;
  color: var(--c-body);
  display: inline-flex;
  gap: var(--sp-2_5);
}

.ref-systems span::before {
  content: "—";
  color: var(--c-primary);
}

/* USER v=84 (Screenshot 16): eigener Modifier für die FREISTEHENDE Kundenliste auf /referenzen/.
   .ref-systems selbst ist als schmale Spalte INNERHALB einer .ref-story gedacht — freistehend
   auf der 1320er-Schiene ergab das eine einzelne dünne Spalte mit riesiger Leerfläche rechts.
   Die Basisklasse bleibt unverändert, damit die Listen in den Story-Karten gleich bleiben. */
.ref-systems--wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px clamp(24px, 3vw, 48px);
  margin-bottom: 0;
}

@media (max-width: 900px) {

  .ref-story,
  .ref-story:nth-of-type(even) {
    grid-template-columns: 1fr;
  }

  .ref-story:nth-of-type(even) .ref-media {
    order: 0;
  }

  .ref-media {
    min-height: 0;
  }

  .ref-media img {
    position: static;
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

/* ================= SYSTEMPARTNER LOGO GRID ================= */
.partners {
  background: var(--c-bg-alt);
}

.partners-head {
  text-align: center;
  max-width: 52ch;
  margin: 0 auto;
}

.partners-head .h2 {
  margin-top: var(--sp-5);
}

.partners-head .lead {
  color: var(--c-muted);
  margin-top: var(--sp-5);
}

/* Partner-Logos als LAUFBAND (v=125, USER-WUNSCH). Vorlage war eine
   React/shadcn-Komponente (Embla `auto-scroll`) — die konnte hier nicht
   übernommen werden (statisches HTML, kein Build, kein React/Tailwind).
   Die MECHANIK stammt stattdessen aus dem bereits vorhandenen Leistungs-
   Marquee (`.svcslide`, components.js): px/Sekunde statt Frames, nahtlos über
   geklonte Kopien, Pause bei Hover UND Fokus. Kein zweites System.
   USER-KORREKTUREN gegenüber der Vorlage: (1) hält bei Hover an, (2) deutlich
   langsamer, (3) Logos in ihrer EIGENEN Farbe statt Graustufen. */
.partner-marquee {
  position: relative;
  overflow: hidden;
  margin-top: clamp(32px, 4vw, 56px);
  /* Ein- und Ausblenden an den Rändern: ohne das erscheinen und verschwinden
     die Logos hart an der Containerkante. Entspricht den Gradient-Overlays der
     Vorlage, braucht aber keine zwei zusätzlichen Elemente. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.partner-track {
  display: flex;
  gap: var(--sp-3_5);
  width: max-content;
  will-change: transform;
  /* Greifhand wie im Leistungs-Slider (USER-WUNSCH v=126) — signalisiert, dass
     sich das Band ziehen lässt. */
  cursor: grab;
  /* ⚠️ `pan-y` MUSS bleiben: der Browser behält damit das vertikale Scrollen für
     sich, wir bekommen nur die horizontale Geste. Ohne das schluckt der Drag auf
     dem Handy das Seiten-Scrollen, sobald der Finger auf dem Band startet. */
  touch-action: pan-y;
}

.partner-track.is-grabbing {
  cursor: grabbing;
}

/* Kundenfeedback: Logos GROESSER und der Markenname darunter. Die Karte ist dafuer von
   der einzeiligen Logo-Box zur zweigeteilten Karte geworden: oben eine Logo-Zone mit
   FESTER Hoehe, darunter der Name. Die feste Hoehe ist der eigentliche Punkt — ohne sie
   saessen die Namen je nach Logo-Seitenverhaeltnis (SimonsVoss 3.9:1 vs. ABUS 1.55:1)
   auf verschiedenen Hoehen und das Band wirkte ausgefranst. */
.partner-card {
  /* im Raster kam die Breite von der Spalte — im Laufband muss die Karte sie
     selbst mitbringen, sonst schrumpft sie auf den Logo-Inhalt zusammen. */
  flex: 0 0 auto;
  width: clamp(172px, 14vw, 212px);
  height: clamp(136px, 11.5vw, 168px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.partner-card:hover {
  border-color: rgba(38, 114, 185, .35);
}

/* ⚠️ Die Zone braucht eine DEFINITE Hoehe: das `max-height: 100%` des Bildes loest sich
   dagegen auf. Waere die Hoehe `auto`, berechnete sich die Kappe zu `none` und das Logo
   spraenge aus der Karte. */
.partner-logo {
  height: clamp(56px, 5.4vw, 74px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-navy-2);
  text-align: center;
  line-height: 1.25;
}

/* USER-ENTSCHEID v=125: Logos in EIGENER Farbe (kein grayscale).
   Der Deckel war clamp(38px, 3.7vw, 46px); jetzt fuellt das Logo die ganze Zone, also bis
   74px statt 46px — rund 60 % mehr Hoehe, wie vom Kunden gewuenscht. */
.partner-card img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  /* sonst startet der Browser beim Ziehen sein eigenes Bild-Drag&Drop und die
     Geste bricht mitten im Zug ab. */
  -webkit-user-drag: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {

  /* JS lässt das Band dann stehen; hier nur sicherstellen, dass nichts ruckt. */
  .partner-track {
    will-change: auto;
  }
}

/* ================= SICHERHEITSLADEN ================= */
.laden {
  background: var(--c-surface);
}

.laden-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 90px);
  align-items: stretch;
}

.laden-info .h2 {
  max-width: 16ch;
  margin-block: var(--sp-5) var(--sp-5);
}

.laden-info .lead {
  margin-bottom: var(--sp-8);
}

.laden-rows {
  border-top: 1px solid var(--c-border);
  margin-bottom: var(--sp-8);
}

/* USER v=84 (Screenshot 05): Label-Texte (ADRESSE/ÖFFNUNGSZEITEN/TELEFON/E-MAIL) durch Icons
   ersetzt → die Spalte braucht nur noch Icon-Breite (150px → auto). Der Text steht als .sr-only
   im dt weiter für Screenreader (ein dd ohne Label wäre kontextlos). */
.laden-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  padding: var(--sp-3_5) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 14.5px;
  align-items: center;
}

.laden-row dt {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.laden-row dt>.icon-chip {
  margin: 0;
}

.laden-row dd {
  color: var(--c-text);
}

.laden-row dd .sub {
  color: var(--c-muted);
  font-size: 13px;
}

/* integrated map panel */
.laden-map {
  position: relative;
  border: 1px solid var(--c-border);
  background: var(--c-bg-alt);
  overflow: hidden;
  display: flex;
  min-height: 420px;
}

.laden-map svg {
  width: 100%;
  height: 100%;
  flex: 1;
  display: block;
}

.map-street {
  stroke: rgba(15, 23, 42, .10);
  stroke-width: 2;
  fill: none;
}

.map-street-2 {
  stroke: rgba(15, 23, 42, .07);
  stroke-width: 5;
  fill: none;
}

.map-elbe {
  stroke: rgba(38, 114, 185, .30);
  stroke-width: 14;
  fill: none;
  stroke-linecap: round;
}

.map-ring {
  fill: none;
  stroke: rgba(38, 114, 185, .35);
  stroke-width: 1;
}

.map-marker {
  fill: var(--c-primary);
}

.map-label {
  font-size: 11px;
  letter-spacing: .1em;
  fill: var(--c-text);
  font-weight: 600;
  text-transform: uppercase;
}

.map-sub {
  font-size: 9px;
  letter-spacing: .14em;
  fill: var(--c-muted);
  text-transform: uppercase;
}

.laden-map .map-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  padding: 6px var(--sp-2_5);
}

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

/* ================= ÜBER UNS — Hero (light, centered, editorial) ================= */
/* USER v=84 (Screenshot 17): Hero klebte an der Navigation. Untergrenzen hoch —
   oben 48 → 80px UNTER der Nav (die --nav-h kommt additiv dazu), unten 56 → 80px.
   Gilt für /ueber-uns/ UND /karriere/ (beide .ub-hero). */
.ub-hero {
  background: var(--c-surface);
  padding-top: calc(var(--nav-h) + clamp(80px, 7vw, 96px));
  padding-bottom: clamp(80px, 7vw, 96px);
  text-align: center;
}

.ub-hero-inner {
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}

.ub-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-body);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  padding: var(--sp-2) 18px;
  background: var(--c-bg-alt);
}

.ub-hero-title {
  font-size: clamp(38px, 4.8vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--c-navy);
  margin: var(--sp-2) 0;
}

.ub-hero-lead {
  font-size: var(--fs-lead);
  color: var(--c-muted);
  max-width: 56ch;
}

.ub-hero-ctas {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-3);
}

/* three-image editorial row: middle card larger, sides step down */
.ub-hero-gallery {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: clamp(14px, 1.8vw, 24px);
  align-items: center;
  max-width: var(--container);
  margin: clamp(40px, 5.5vw, 72px) auto 0;
  padding-inline: var(--gutter);
}

.ub-hg-item {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.ub-hg-mid {
  aspect-ratio: 16 / 10;
}

.ub-hg-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ub-mission {
  max-width: 52ch;
  margin: clamp(48px, 6vw, 88px) auto 0;
  padding-inline: var(--gutter);
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.45;
  font-weight: 400;
  color: var(--c-body);
}

.ub-mission strong {
  color: var(--c-navy);
  font-weight: 650;
}

.ub-hero-stats {
  max-width: var(--container);
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding-inline: var(--gutter);
}

.ub-stats-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.ub-stat {
  background: var(--c-surface);
  padding: clamp(22px, 2.6vw, 34px) 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ub-stat-num {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 650;
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.ub-stat-label {
  font-size: 12.5px;
  color: var(--c-muted);
  letter-spacing: .03em;
}

@media (max-width: 860px) {
  .ub-hero-gallery {
    grid-template-columns: 1fr;
  }

  .ub-hg-item {
    aspect-ratio: 16 / 10;
  }

  .ub-stats-card {
    grid-template-columns: 1fr 1fr;
  }
}

/* stacked hero CTAs match full width — same convention as .heroB-ctas (≤767), otherwise the
   two auto-width buttons centre into a ragged pyramid. */
@media (max-width: 767px) {
  .ub-hero-ctas {
    align-self: stretch;
  }

  .ub-hero-ctas .btn {
    width: 100%;
  }
}

/* ================= ÜBER UNS — Team (full-bleed portrait strip, centered head) ================= */
.ub-team {
  background: var(--c-bg-alt);
  padding-block: var(--section-pad);
  overflow: hidden;
}

.ub-team-head {
  text-align: center;
  max-width: 58ch;
}

.ub-team-head .h2 {
  margin-top: var(--sp-5);
}

.ub-team-head .lead {
  color: var(--c-muted);
  margin-top: var(--sp-4);
}

.ub-team-track {
  display: flex;
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(32px, 4vw, 56px);
  overflow-x: auto;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  padding-bottom: var(--sp-2);
  scrollbar-width: none;
}

.ub-team-track::-webkit-scrollbar {
  display: none;
}

.ub-team-card {
  position: relative;
  flex: 0 0 clamp(240px, 22vw, 320px);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
}

.ub-team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ub-team-tag {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 11px var(--sp-3_5);
  border-radius: var(--r-sm);
  background: rgba(7, 26, 51, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
}

.ub-team-nav {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: clamp(20px, 2.5vw, 28px);
}

.ub-slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease, opacity var(--t-fast) ease;
}

.ub-slider-btn:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.ub-slider-btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.ub-slider-btn[disabled] {
  opacity: .35;
  cursor: default;
}

.ub-slider-btn[disabled]:hover {
  border-color: var(--c-border);
  color: var(--c-navy);
}

/* careers band under the slider */
.ub-jobs {
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3.5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
}

.ub-jobs-text {
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 600;
  color: var(--c-navy);
  letter-spacing: -0.015em;
  line-height: 1.35;
  max-width: 32ch;
}

.ub-jobs .btn {
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .ub-jobs {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ================= ÜBER UNS — Galerie (full-bleed mosaic, white, lightbox) ================= */
.ub-gal {
  background: var(--c-surface);
  padding-block: var(--section-pad);
}

.ub-gal-head {
  text-align: center;
  max-width: 60ch;
}

.ub-gal-head .h2 {
  margin-top: var(--sp-5);
}

.ub-gal-head .lead {
  color: var(--c-muted);
  margin-top: var(--sp-4);
}

.ub-gal-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(110px, 11.5vw, 190px);
  gap: clamp(8px, 0.9vw, 14px);
  margin-top: clamp(32px, 4vw, 56px);
  padding-inline: clamp(12px, 1.8vw, 28px);
}

.ub-gal-item {
  border: 0;
  padding: 0;
  cursor: zoom-in;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-bg-alt);
}

.ub-gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease-out);
}

.ub-gal-item:hover img {
  transform: scale(1.035);
}

.ub-gal-item:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.g-a {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}

.g-b {
  grid-column: 4 / 9;
  grid-row: 1 / 4;
}

.g-c {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
}

.g-d {
  grid-column: 1 / 4;
  grid-row: 3 / 5;
}

.g-e {
  grid-column: 9 / 11;
  grid-row: 3 / 5;
}

.g-f {
  grid-column: 11 / 13;
  grid-row: 3 / 5;
}

.g-g {
  grid-column: 4 / 7;
  grid-row: 4 / 5;
}

.g-h {
  grid-column: 7 / 9;
  grid-row: 4 / 5;
}

@media (max-width: 780px) {
  .ub-gal-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
  }

  .ub-gal-item {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .ub-gal-item.g-b {
    grid-column: 1 / -1 !important;
    grid-row: span 2 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ub-gal-item img {
    transition: none;
  }
}

/* lightbox overlay (built by components.js) */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 15, 30, .93);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.lb-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}

.lb-img {
  max-width: min(90vw, 1200px);
  max-height: 84vh;
  border-radius: var(--r-sm);
  display: block;
}

.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .5);
}

.lb-close:focus-visible,
.lb-prev:focus-visible,
.lb-next:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lb-close {
  top: 20px;
  right: 20px;
}

.lb-prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.lb-next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 640px) {
  .lb-prev {
    left: 8px;
  }

  .lb-next {
    right: 8px;
  }

  .lb-img {
    max-width: 94vw;
  }
}

/* ================= ÜBER UNS — Sponsoring-Zeile (im Partner-Band) ================= */
.partners-sponsor {
  margin: clamp(32px, 4vw, 48px) auto 0;
  max-width: 66ch;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted);
}

.ub-chip {
  display: inline-block;
  padding: 3px var(--sp-2_5);
  border-radius: var(--r-full);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-primary);
  font-weight: 600;
}

/* ================= JOBS — Archiv-Karten & Ansprechpartner ================= */
.jobs-hero {
  padding-bottom: clamp(40px, 5vw, 64px);
}

.job-list {
  display: grid;
  gap: var(--sp-4);
  margin-top: clamp(28px, 3.5vw, 44px);
}

.job-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(20px, 2.6vw, 40px);
  align-items: center;
  padding: clamp(24px, 2.8vw, 40px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}

.job-card:hover {
  border-color: var(--c-primary);
  transform: translateY(-2px);
}

.jc-idx {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 6px;
}

.jc-body h3 {
  font-size: clamp(19px, 1.8vw, 24px);
  letter-spacing: -0.015em;
  color: var(--c-navy);
}

.jc-sub {
  font-size: 15px;
  color: var(--c-body);
  margin-top: 2px;
}

.jc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.jc-chips span {
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--c-body);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-bg-alt);
}

.jc-excerpt {
  font-size: 14.5px;
  color: var(--c-muted);
  margin-top: var(--sp-3);
  max-width: 62ch;
}

.job-card .link-arrow {
  white-space: nowrap;
}

@media (max-width: 780px) {
  .job-card {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .jc-idx {
    padding-top: 0;
  }
}

/* Ansprechpartner-Karte (Job-Einzelseiten) */
.job-contact-sec {
  padding-top: 0;
}

.job-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  background: var(--c-bg-alt);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3.5vw, 56px);
}

.job-contact-info .h3-sm {
  margin-top: var(--sp-4);
}

.jc-role {
  font-size: 14px;
  color: var(--c-muted);
  margin-top: var(--sp-1);
}

.job-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  flex-shrink: 0;
}

@media (max-width: 780px) {
  .job-contact {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ================= ÜBER UNS — Final CTA (photo-backed) ================= */
.ub-final {
  position: relative;
  padding-block: clamp(96px, 12vw, 132px);
  overflow: hidden;
  color: #fff;
}

.ub-final-media {
  position: absolute;
  inset: 0;
}

.ub-final-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.ub-final-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 15, 30, .6) 0%, rgba(5, 15, 30, .85) 100%);
}

.ub-final-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}

.ub-final .eyebrow {
  color: rgba(255, 255, 255, .7);
}

.ub-final .display {
  color: #fff;
  max-width: 16ch;
  font-size: clamp(32px, 4vw, 54px);
}

/* v=164 — Ausnahme von der globalen Eyebrow/Ueberschrift-Regel (base.css).
   Hier kommen die ~20 px Abstand nicht aus einer margin, sondern aus der Zeilenbox
   der Eyebrow; die globale margin-top haette sich draufgesetzt (gemessen: 40 px).
   Spezifitaet (0,3,0) schlaegt die globale Regel (0,2,1). */
.ub-final .eyebrow + .display {
  margin-top: 0;
}

.ub-final .final-actions {
  justify-content: center;
}

.ub-final .final-notline {
  color: rgba(255, 255, 255, .75);
}

/* ================= KUNDENSTIMMEN — Google reviews ================= */
/* ==========================================================================
   GOOGLE-REZENSIONEN (.greview) v=122 — weisse, schwebende Karte in der
   Why-BAUM-Sticky-Spalte. Sie ERSETZT dort das `.cert-ledger`-Register
   (USER-WUNSCH); die Zertifikate gingen dabei NICHT verloren — dieselben fünf
   Z·01–Z·05-Zeilen stehen unverändert auf /ueber-uns/#zertifikate, weshalb die
   `.cert-ledger`-Regeln weiter unten BLEIBEN MÜSSEN.
   Gleichzeitig ist die eigenständige Kundenstimmen-Sektion (.reviews/.review,
   3 Zitate nebeneinander über dem Footer) ersatzlos entfallen — deren CSS
   stand genau hier und ist mit raus. `.g-stars` ist als Einzige geblieben:
   die Sterne trägt jetzt diese Karte.

   Seit v=232 ECHTE Google-Rezensionen (6, wortgetreu, Vorname + Initial, kein
   Datum) — Quelle docs/content/google-rezensionen.md, Pflege über
   tools/set_google_reviews.py. Höhe: siehe Block „ECHTE GOOGLE-REZENSIONEN (v=232)“
   am Dateiende (Stapel-Grid ersetzt die min-height unten).
   ========================================================================== */
.greview {
  margin-top: var(--sp-8);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(20px, 1.7vw, 26px);
  /* identischer Wert wie die schwebende .apply-form-Karte — die Projektregel
     „keine Soft-Shadow-Karten" zielt auf Karten-RASTER, nicht auf eine bewusst
     schwebende Einzelkarte. Kein neuer Schatten-Look, sondern der bestehende. */
  box-shadow: 0 18px 40px rgba(5, 15, 30, .14);
}

.greview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.greview-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2_5);
}

.greview-brand .g-icon {
  flex-shrink: 0;
}

.greview-score {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--c-navy);
  line-height: 1;
}

.greview-sub {
  margin-top: var(--sp-2_5);
  font-size: 12.5px;
  color: var(--c-muted);
}

.greview-viewport {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
  overflow: hidden;
}

/* Höhe reservieren (v=122) — seit v=232 überschrieben durch das Stapel-Grid am Dateiende,
   das die Höhe aus der längsten Rezension ableitet statt sie zu schätzen. */
.greview-stage {
  position: relative;
  min-height: 8.4em;
}

.greview-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  /* v=158: war var(--t-med) — dieses Token existiert NIE. Ohne Fallback ist die ganze
     Deklaration ungueltig, die Karte sprang hart um statt ueberzublenden (gemessen:
     transition "all" 0s). --t-reveal (0.6s) ist der dokumentierte Wert fuer Reveals. */
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}

.greview-item.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.greview-item blockquote {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--c-body);
}

.greview-foot {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: var(--sp-4);
}

.greview-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-bg-alt);
  color: var(--c-primary);
  font-size: 14px;
  font-weight: 600;
}

.greview-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-navy);
}

.greview-meta {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--c-muted);
}

.greview-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-top: 18px;
}

.greview-dots {
  display: flex;
  gap: 7px;
}

.greview-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-border);
  cursor: pointer;
  transition: background var(--t-fast) ease, width var(--t-fast) ease;
}

.greview-dot.is-active {
  background: var(--c-primary);
  width: 20px;
  border-radius: 4px;
}

.greview-arrows {
  display: flex;
  gap: var(--sp-2);
}

.greview-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}

.greview-btn svg {
  width: 18px;
  height: 18px;
}

.greview-btn:hover {
  background: var(--c-bg-alt);
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.greview-btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.g-stars {
  display: inline-flex;
  gap: 3px;
  margin-left: var(--sp-2);
  vertical-align: middle;
}

.g-stars svg {
  width: 17px;
  height: 17px;
  fill: var(--c-star);
}

@media (max-width: 560px) {
  .greview-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2_5);
  }

  .greview-stage {
    min-height: 11em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .greview-item {
    transition: none;
  }
}

/* ==========================================================================
   REFERENZ-KARTEN (.refgrid/.refcard) v=124 — 3er-Raster, echter 3D-FLIP.
   Ersetzt auf der Startseite die drei gestapelten `.ref-story`-Blöcke.
   ⚠️ `.ref-story` NICHT anfassen — /referenzen/ baut weiter darauf auf (dort
   liegen auch die `.ref-systems`-Chips, die auf der Karte keinen Platz haben).

   v=123 war ein Reveal auf EINER Fläche — der USER wollte den echten Flip.
   Die Werte sind aus der Vorlage (hochhalter-ladenbau.de, Elementor-Flip-Box)
   ausgelesen, nicht geschätzt: `effect-flip` + `direction-left` + 3D-Variante,
   `perspective: 1000px`, Layer `0.6s ease-in-out`, Rückseite in Ruhe
   `rotateY(180deg)`, bei Hover Vorderseite `rotateY(-180deg)` und Rückseite auf 0.

   Der Kern der 3D-Wirkung ist `translateZ(90px) scale(0.91)` auf dem INHALT:
   bei `perspective: 1000px` vergrössert 90px um 1000/(1000-90) = 1.099, das
   `scale(0.91)` nimmt das exakt zurück — netto gleich gross, aber der Text
   liegt im Raum VOR der Karte und schwenkt beim Drehen mit sichtbarer
   Parallaxe. Ohne das wirkt der Flip flach.
   ========================================================================== */
.refgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.5vw, 24px);
  margin-top: clamp(28px, 3vw, 44px);
}

/* ⚠️ KEIN `overflow: hidden` auf der Karte: das erzwingt einen flachen
   Rendering-Kontext und macht `preserve-3d` der Kinder wirkungslos — der Flip
   sähe dann aus wie ein flaches Umklappen. Die runden Ecken sitzen deshalb auf
   den beiden LAYERN, nicht auf der Karte. */
.refcard {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  perspective: 1000px;
  transform-style: preserve-3d;
  text-decoration: none;
}

/* ⚠️ KEIN `overflow: hidden` — auch hier nicht. Die Spezifikation erzwingt bei
   jedem `overflow` ausser `visible` den USED VALUE `transform-style: flat`;
   `getComputedStyle` meldet weiterhin brav `preserve-3d`, aber das translateZ
   des Inhalts wird platt gerechnet (gemessen: Inhalt rendert exakt 0.9111 =
   nur noch das `scale(0.91)` ohne Tiefenausgleich — der Flip wirkt flach).
   Die Vorlage umgeht das mit background-images, die `border-radius` ohne
   `overflow` beschneidet. Wir behalten das <img> (alt-Text + lazy) und runden
   stattdessen Bild und Scrim EINZELN. */
.refcard-front,
.refcard-rear {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .6s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(20px, 1.9vw, 30px);
  color: #fff;
}

.refcard-front {
  transform: none;
  z-index: 1;
}

.refcard-rear {
  transform: rotateY(180deg);
}

.refcard:hover .refcard-front,
.refcard:focus-visible .refcard-front {
  transform: rotateY(-180deg);
}

.refcard:hover .refcard-rear,
.refcard:focus-visible .refcard-rear {
  transform: rotateY(0deg);
}

.refcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  z-index: -2;
}

/* Scrim je Fläche: vorn nur so viel, dass der Titel sicher liest; hinten
   deutlich dunkler, weil dort ein ganzer Absatz auf dem Foto steht. */
.refcard-front::before,
.refcard-rear::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  z-index: -1;
}

.refcard-front::before {
  background: linear-gradient(180deg, rgba(6, 20, 40, .54) 0%, rgba(6, 20, 40, .86) 100%);
}

.refcard-rear::before {
  background: linear-gradient(180deg, rgba(6, 20, 40, .84) 0%, rgba(9, 28, 54, .92) 100%);
}

/* ⚠️ `backface-visibility: hidden` auf dem LAYER kullt dessen KINDER nicht: in
   einem preserve-3d-Kontext entscheidet jedes Element über seine eigene
   Rückseite. Ohne diese Regel schlägt der Inhalt der abgewandten Fläche
   während der Drehung durch — sichtbar als „Projekt ansehen"-Button, der
   mitten im Flip über der Vorderseite auftaucht (im Standbild verifiziert).
   Am Anfang und Ende fällt es nicht auf, weil die Vorderseite die Rückseite
   dann schlicht verdeckt — der Fehler lebt nur MITTEN in der Bewegung. */
.refcard-front > *,
.refcard-rear > *,
.refcard-front::before,
.refcard-rear::before {
  backface-visibility: hidden;
}

/* die 3D-Tiefe — s. Kopfkommentar */
.refcard-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateZ(90px) scale(0.91);
}

/* Farben bewusst HELLER als die On-Dark-Defaults: der Grund ist ein FOTO,
   dessen helle Stellen selbst durch den Scrim noch auf ~rgb(90) kommen.
   --c-accent und --c-on-navy-muted lagen dort unter 4.5:1 (gemessen per
   Pixel-Sampling + Scrim-Komposit). Lighthouse fängt das NICHT — axe wertet
   Text über einem Hintergrundbild als „incomplete". */
.refcard-num {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .85);
  margin-bottom: var(--sp-2_5);
}

.refcard-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-2_5);
}

.refcard-title {
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: #fff;
  max-width: 20ch;
}

/* Die Rückseite trägt Label + Titel nur für den Touch-Aufbau (dort ist sie die
   EINZIGE Fläche). Auf dem Desktop wäre es eine Dopplung der Vorderseite.
   v=200 (USER): der Titel ist auf der Desktop-Rückseite ebenfalls raus, die Nummern
   (`.refcard-num`) sind komplett aus dem Markup entfernt (Startseite + /referenzen/). */
.refcard-rear .refcard-label,
.refcard-rear .refcard-title {
  display: none;
}

.refcard-rear .refcard-title {
  font-size: clamp(17px, 1.2vw, 19px);
  margin-bottom: var(--sp-3);
}

.refcard-desc {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .84);
  max-width: 34ch;
}

/* Optisch ein Button, technisch KEIN Link: die ganze Karte ist bereits ein <a>,
   ein zweiter Link darin wäre ungültiges Markup und ein zweites Tab-Ziel. */
.refcard-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: var(--sp-2_5) var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--c-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 550;
}

.refcard:hover .refcard-cta {
  background: var(--c-primary-hover);
}

.refcard:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ==========================================================================
   REFERENZ-VARIANTE fuer /referenzen/ (v=128) — 2x2, breite 16:9-Karten,
   LANGER Text steht UNTER der Karte (USER-ENTSCHEID).

   Warum nicht wie auf der Startseite alles auf der Rueckseite:
   /referenzen/ hat pro Projekt zusaetzlich eine 3er-Systemliste, und die
   Inhaltshoehe der Rueckseite haengt NICHT an der Kartenbreite — Titel und
   Text sind auf 20ch/34ch gedeckelt, eine breitere Karte wird also hoeher,
   aber der Text nicht kuerzer (gemessen: konstant 337px ab 340px Breite).
   Im Quadrat lief das am schmalen Desktop-Ende ueber. Jetzt traegt die Karte
   nur noch Bild + Titel + Kurzfassung; Volltext und Chips stehen darunter im
   normalen Fluss und koennen beliebig lang werden — auch wenn der Kunde
   spaeter echte Projekte mit unbekannter Textlaenge nachliefert.

   16:9 statt Quadrat hat einen zweiten Grund: die Projektfotos sind nativ
   2:1-Querformate. Quadrat schneidet ~50 % der Bildbreite weg, 16:9 nur ~11 %.
   ========================================================================== */
.refgrid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.refcard--wide {
  aspect-ratio: 16 / 9;
}

/* Die Karte ist hier KEIN Link: es gibt keine Projekt-Einzelseiten, und die
   bestehenden Bloecke auf /referenzen/ verlinken ebenfalls nirgendwohin. Ein
   Button haette also entweder ein erfundenes Ziel oder wuerde die Seiten-CTA
   viermal wiederholen. Die Rueckseite ist reine Vorschau — ihr Inhalt steht
   vollstaendig darunter im Fluss, deshalb geht fuer Tastatur und Screenreader
   nichts verloren (sie ist konsequenterweise aria-hidden). */
.refcard--wide .refcard-title {
  max-width: 26ch;
}

/* Die Rueckseite zeigt die verbauten Systeme statt eines Prosa-Teasers: der
   Volltext steht direkt unter der Karte, ein dort abgeschnittener Satz („…")
   haette nichts ergaenzt. Eine Liste ist ausserdem von sich aus kurz und kann
   nie ueberlaufen — auch nicht bei spaeteren, laengeren Projekttexten. */
.refcard-systems {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: var(--sp-3_5);
}

.refcard-systems span {
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .86);
}

.refitem-body {
  padding-top: var(--sp-6);
}

.refitem-body h2 {
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--c-navy);
  margin-bottom: var(--sp-2_5);
}

.refitem-body .result {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-body);
  max-width: 60ch;
}

.refitem-body .ref-systems {
  margin-top: var(--sp-5);
}

@media (max-width: 980px) {

  /* 3 Karten in 2 Spalten ergäben 2+1 mit Loch -> direkt einspaltig.
     ⚠️ `.refgrid--2` MUSS hier mitgenannt werden: gleiche Spezifitaet wie
     `.refgrid`, aber es steht spaeter in der Quelle und wuerde sonst gewinnen. */
  .refgrid,
  .refgrid--2 {
    grid-template-columns: 1fr;
  }
}

/* Touch: es gibt keinen Hover. USER-ENTSCHEID: auf dem Handy wird nichts
   versteckt — statt zu drehen (ein erster Tap wäre ein toter Klick) steht die
   Karte als EINE offene Fläche: Foto, Titel, Beschreibung, Button.
   Die Rückseite wird dafür in den Fluss geholt und die Vorderseite auf ihre
   Kopfzeilen reduziert; `aspect-ratio` muss weg, weil die Layer absolut sind
   und die Karte sonst gar keine Inhaltshöhe hätte.
   ⚠️ Muss NACH dem 980er-Block stehen — gleiche Spezifität, Quellreihenfolge. */
@media (hover: none) {

  /* /referenzen/: der Volltext steht ohnehin unter der Karte — die Rueckseite
     entfaellt auf Touch ersatzlos, die Vorderseite bleibt als Bildkarte stehen.
     ⚠️ `.refcard.refcard--wide` (0,2,0), NICHT `.refcard--wide` (0,1,0): die
     generische `.refcard`-Regel steht in diesem Block WEITER UNTEN und haette
     bei gleicher Spezifitaet ueber die Quellreihenfolge gewonnen — die Karte
     rendert dann 335x320 statt 16:9 und schneidet wieder ~48 % des Bildes weg
     (gemessen). Spezifitaet schlaegt hier Reihenfolge, unabhaengig vom Ort. */
  .refcard.refcard--wide {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .refcard--wide .refcard-front {
    display: flex;
    position: absolute;
    justify-content: center;
  }

  .refcard--wide .refcard-rear {
    display: none;
  }

  .refcard {
    aspect-ratio: auto;
    min-height: 320px;
    perspective: none;
  }

  /* ⚠️ Die Vorderseite MUSS hier raus, nicht nur „nach oben rutschen": sie ist
     absolut positioniert und hat `z-index: 1` — in Fluss gesetzt liegt sie
     trotzdem ÜBER der Rückseite und deren Scrim verdeckt Beschreibung und
     Button vollständig (verifiziert: Inhalt vorhanden, aber unsichtbar).
     Darum trägt die RÜCKSEITE den Touch-Aufbau allein; sie hat dafür Nummer,
     Label, Titel, Text und Button und ist die einzige Fläche im Fluss. */
  .refcard-front {
    display: none;
  }

  .refcard-rear {
    position: relative;
    transform: none;
    backface-visibility: visible;
  }

  /* Touch: die Rückseite ist die einzige Fläche — Label + Titel MÜSSEN hier zurück. */
  .refcard-rear .refcard-label,
  .refcard-rear .refcard-title {
    display: block;
  }

  .refcard-rear .refcard-title {
    font-size: clamp(19px, 5vw, 22px);
  }

  .refcard-inner {
    transform: none;
  }
}

/* Reduced motion: nicht drehen. Die Rückseite blendet auf, sonst identisch. */
@media (prefers-reduced-motion: reduce) {

  .refcard-front,
  .refcard-rear {
    transition: opacity var(--t-fast) ease;
    backface-visibility: visible;
  }

  .refcard-rear {
    transform: none;
    opacity: 0;
    z-index: 2;
  }

  .refcard:hover .refcard-front,
  .refcard:focus-visible .refcard-front {
    transform: none;
  }

  .refcard:hover .refcard-rear,
  .refcard:focus-visible .refcard-rear {
    opacity: 1;
  }

  .refcard-inner {
    transform: none;
  }
}

/* ================= FINAL CTA ================= */
.final {
  background: var(--c-bg-alt);
  padding-block: var(--section-pad);
}

/* Dark cinematic CTA — SIMPLE variant only (homepage/.final-panel excluded).
   Gives the closing CTA a background image, proper vertical rhythm (fixes the
   old cramped stack) and a decluttered footer. Reverses v=41 lightening here. */
.final:not(:has(.final-panel)) {
  position: relative;
  overflow: hidden;
  background: var(--c-navy-ink);
}

.final:not(:has(.final-panel))::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(5, 15, 30, 0.82), rgba(5, 15, 30, 0.9)),
    url(/assets/img/leistungen/cta-band.webp) center / cover no-repeat;
}

.final:not(:has(.final-panel))>.container {
  position: relative;
  z-index: 1;
}

.final:not(:has(.final-panel)) .eyebrow {
  color: var(--c-on-navy-2);
  margin-bottom: var(--sp-5);
}

.final:not(:has(.final-panel)) .display {
  color: #fff;
  /* v=202 (USER): die .display-Grösse (64px) war GRÖSSER als die Hero-H1 der Seite (--fs-h1 56px).
     Jetzt dieselbe Stufe wie das Mid-Page-CTA-Band .svc-band (max 46px) — CTA-Titel bleiben
     auf jeder Breite unter der H1 (1920 46<56 · 1280 43.5<53.8 · 375 30<36). */
  font-size: clamp(30px, 3.4vw, 46px);
  max-width: 20ch;
  margin-bottom: var(--sp-6);
}

.final:not(:has(.final-panel)) .lead {
  color: var(--c-on-navy);
}

.final:not(:has(.final-panel)) .final-notline {
  color: var(--c-on-navy-muted);
}

.final:not(:has(.final-panel)) .final-foot {
  display: none;
}

/* USER v=84 (Screenshot 06): Hintergrundbild + Overlay NUR auf dem Sektions-Container —
   die weiße .final-panel bleibt unangetastet weiß. Overlay hell gehalten (rgba weiß), damit
   der Panel-Rand sich noch absetzt und die Sektion nicht zur dunklen Bande wird
   (die Homepage-Final ist per v=72-Entscheid ausdrücklich die HELLE Variante). */
/* USER v=88: Overlay von HELL auf DUNKELBLAU umgestellt — identische Gradient-Stops wie die
   Branchen-Sektion (.bento), damit beide dunklen Bänder gleich lesen. Das eigene Bild
   (cta-band.webp) bleibt: bei .92/.90 Deckkraft ist es ohnehin nur noch Textur, und es ist
   das CTA-spezifische Motiv. Kein `fixed` wie beim Bento — Parallax wäre eine eigene
   Design-Entscheidung, hier nicht gefragt.
   Die weisse .final-panel bleibt ausdrücklich weiss (USER-Entscheid v=84 + v=72). */
.final:has(.final-panel) {
  background:
    linear-gradient(180deg, rgba(9, 28, 54, .92) 0%, rgba(6, 20, 40, .90) 100%),
    url('/assets/img/leistungen/cta-band.webp') center / cover no-repeat;
}

/* ⚠️ Die .final-foot-Labels stehen AUSSERHALB der weissen Panel-Karte, direkt auf diesem
   Hintergrund. `.tech-label` ist per Default --c-muted (#5B6A80, dunkel) und wird nur über
   `.on-dark` hell — das greift hier nicht. Ohne diese Regel wären beide Zeilen nach dem
   Abdunkeln dunkel auf dunkel, also unlesbar. */
.final:has(.final-panel) .final-foot .tech-label {
  color: var(--c-on-navy-muted);
}

.final-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.final-main {
  padding: clamp(40px, 5vw, 72px);
}

.final-main .eyebrow {
  margin-bottom: var(--sp-6);
}

.final-main .display {
  max-width: 16ch;
  font-size: clamp(32px, 3.6vw, 52px);
  margin-bottom: var(--sp-6);
}

.final-main .lead {
  color: var(--c-muted);
  max-width: 46ch;
  margin-bottom: var(--sp-8);
}

.final-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.final-notline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2_5);
  font-size: 14px;
  color: var(--c-muted);
}

.final-notline .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-alert);
}

.final-aside {
  background: var(--c-bg-alt);
  padding: clamp(32px, 4vw, 48px) clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 3vw, 34px);
}

.final-fact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.final-fact .f-num {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 650;
  color: var(--c-navy);
  letter-spacing: -0.01em;
}

.final-fact .f-label {
  font-size: 13px;
  color: var(--c-muted);
}

.final-foot {
  margin-top: clamp(28px, 4vw, 40px);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-6);
}

@media (max-width: 900px) {
  .final-panel {
    grid-template-columns: 1fr;
  }

  .final-aside {
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--sp-6) var(--sp-8);
  }
}

/* ============================================================
   SUBPAGES — hero B, breadcrumbs, Leistungen overview + category
   components. Playbook: 1320 rail, --section-pad, no hairlines,
   margin gaps, stretch images, 16px leads.
   ============================================================ */

/* ---------- Hero B (secondary pages, bright architectural image) ---------- */
.heroB {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  /* dynamische Viewport-Hoehe (folgt der URL-Leiste), 100vh als Fallback */
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--c-bg-alt);
  padding-top: var(--nav-h);
}

.heroB-media {
  position: absolute;
  inset: 0;
}

.heroB-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  transform: scale(1.05);
  animation: heroB-in 1.4s var(--ease-out) forwards;
}

@keyframes heroB-in {
  to {
    transform: scale(1);
  }
}

.heroB-media::after {
  /* left legibility wash over the bright scene */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(244, 247, 251, .94) 0%, rgba(244, 247, 251, .72) 34%, rgba(244, 247, 251, .12) 62%, transparent 78%);
}

.heroB-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.heroB-content .h1 {
  max-width: 16ch;
  margin-block: var(--sp-5) var(--sp-5);
}

.heroB-content .lead {
  margin-bottom: var(--sp-8);
  max-width: 52ch;
}

.heroB-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.heroB .btn-outline {
  border-color: rgba(15, 23, 42, .28);
  background: rgba(255, 255, 255, .55);
}

.heroB .btn-outline:hover {
  border-color: var(--c-primary);
  background: rgba(255, 255, 255, .8);
}

.heroB-meta {
  position: absolute;
  z-index: 1;
  bottom: 26px;
  right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  text-align: right;
  color: var(--c-navy-2);
  /* readable on the light hero wash */
}

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

@media (max-width: 767px) {

  /* USER v=84 (Screenshot 18): Inhalt klebte oben an der Navigation. align-items:flex-end schiebt
     alles nach unten — sobald der Inhalt höher als der Viewport ist, läuft er oben unter die Nav.
     center + echtes padding oben/unten gibt dem Hero in beide Richtungen Luft;
     padding-bottom bleibt größer, weil dort das Notdienst-Dock sitzt. */
  .heroB {
    align-items: center;
    padding-top: calc(var(--nav-h) + 48px);
    padding-bottom: var(--sp-24);
  }

  .heroB-media::after {
    background: linear-gradient(180deg, rgba(244, 247, 251, .55) 0%, rgba(244, 247, 251, .92) 70%);
  }

  .heroB-meta {
    display: none;
  }

  .heroB-ctas .btn {
    width: 100%;
  }
}

/* breadcrumb */
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-2_5);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-4);
}

.crumbs a {
  color: var(--c-eyebrow);
}

.crumbs a:hover {
  color: var(--c-primary);
}

.crumbs .sep {
  color: var(--c-border);
}

/* ---------- Leistungen overview: category rows ---------- */
.catrows {}

.catrow {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: stretch;
}

.catrow+.catrow {
  margin-top: clamp(64px, 7vw, 112px);
}

.catrow:nth-of-type(even) .catrow-media {
  order: 2;
}

.catrow-media {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

.catrow-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.1s var(--ease-out);
}

.catrow:hover .catrow-media img {
  transform: scale(1);
}

.catrow-media .knum {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: .16em;
  color: #fff;
  background: rgba(7, 26, 51, .66);
  padding: 5px var(--sp-2_5);
  font-variant-numeric: tabular-nums;
}

.catrow-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.catrow-body .idx {
  font-size: var(--fs-sm);
  color: var(--c-primary);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-2_5);
}

.catrow-body h2 {
  font-size: clamp(26px, 2.6vw, 36px);
  max-width: 22ch;
  margin-bottom: var(--sp-4);
}

.catrow-body p {
  max-width: 54ch;
  margin-bottom: var(--sp-5);
}

.catrow-services {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: var(--sp-6);
}

.catrow-services a {
  font-size: 14.5px;
  color: var(--c-body);
  display: inline-flex;
  gap: var(--sp-2_5);
  align-items: baseline;
  transition: color var(--t-fast) ease, transform .2s var(--ease-out);
}

.catrow-services a::before {
  content: "—";
  color: var(--c-primary);
}

.catrow-services a:hover {
  color: var(--c-primary);
  transform: translateX(4px);
}

@media (max-width: 900px) {

  .catrow,
  .catrow:nth-of-type(even) {
    grid-template-columns: 1fr;
  }

  .catrow:nth-of-type(even) .catrow-media {
    order: 0;
  }

  .catrow-media {
    min-height: 0;
  }

  .catrow-media img {
    position: static;
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

/* ---------- Category page: service chapters ---------- */
.chapters-head {
  margin-bottom: clamp(36px, 4vw, 56px);
}

.chapters-head .h2 {
  max-width: 24ch;
  margin-top: var(--sp-5);
}

.chapter {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: stretch;
}

.chapter+.chapter {
  margin-top: clamp(64px, 7vw, 112px);
}

.chapter:nth-of-type(even) .chapter-media {
  order: 2;
}

.chapter-media {
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

.chapter-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chapter-media .knum {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: .16em;
  color: #fff;
  background: rgba(7, 26, 51, .66);
  padding: 5px var(--sp-2_5);
  font-variant-numeric: tabular-nums;
}

.chapter-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chapter-body .tech-label {
  display: block;
  margin-bottom: var(--sp-2_5);
}

.chapter-body h3 {
  font-size: clamp(24px, 2.4vw, 32px);
  max-width: 20ch;
  margin-bottom: var(--sp-4);
}

.chapter-body p {
  max-width: 54ch;
  margin-bottom: var(--sp-5);
}

.chapter-points {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: var(--sp-6);
}

.chapter-points span {
  font-size: 14px;
  color: var(--c-body);
  display: inline-flex;
  gap: var(--sp-2_5);
}

.chapter-points span::before {
  content: "—";
  color: var(--c-primary);
}

@media (max-width: 900px) {

  .chapter,
  .chapter:nth-of-type(even) {
    grid-template-columns: 1fr;
  }

  .chapter:nth-of-type(even) .chapter-media {
    order: 0;
  }

  .chapter-media {
    min-height: 0;
  }

  .chapter-media img {
    position: static;
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

/* ---------- Privat / Gewerbe band (dark, textured, no borders) ---------- */
.audience {
  background: var(--c-surface);
}

.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 110px);
}

.audience-col h3 {
  font-size: clamp(22px, 2.2vw, 30px);
  max-width: 20ch;
  margin-block: var(--sp-5) var(--sp-4);
}

.audience-col p {
  color: var(--c-body);
  max-width: 50ch;
  margin-bottom: var(--sp-5);
}

.audience-points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.audience-points>span {
  font-size: 14px;
  color: var(--c-body);
  display: inline-flex;
  gap: var(--sp-2_5);
}

.audience-points>span:not([data-icon])::before {
  content: "—";
  color: var(--c-primary);
}

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

/* Audience → LIGHT editorial split with a photo (point 2, category pages only).
   Transform adds .audience--band, wraps the two columns in .audience-cols and
   prepends .audience-media. Section stays light; text stays dark. */
.audience--band .audience-grid {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
}

.audience--band .audience-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 340px;
}

.audience--band .audience-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.audience--band .audience-cols {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 3vw, 44px);
}

@media (max-width: 900px) {
  .audience--band .audience-grid {
    grid-template-columns: 1fr;
  }

  .audience--band .audience-media {
    min-height: 220px;
  }
}

/* ---------- Compact process strip (5 steps, no pin) ---------- */
.pstrip-head {
  margin-bottom: clamp(36px, 4vw, 56px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
}

.pstrip-head .h2 {
  max-width: 22ch;
  margin-top: var(--sp-5);
}

/* USER v=84 (Screenshots 02/11/12): Verbindungslinie + Kreis-Marker ENTFERNT.
   Die ::before-Regeln (Linie auf .pstrip, Punkt auf .pstrip-step) sind raus, damit auch
   das padding-top von 22px, das nur Platz für sie geschaffen hat. Nicht wieder einführen. */
.pstrip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  position: relative;
}

.pstrip-step {
  position: relative;
}

.pstrip-step .s-num {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}

.pstrip-step h3 {
  font-size: 17px;
  margin: var(--sp-1) 0 6px;
}

.pstrip-step p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-body);
}

@media (max-width: 900px) {
  .pstrip {
    grid-template-columns: 1fr 1fr;
    row-gap: 44px;
  }

  /* v=84: 32 → 44, Schritte standen zu eng */
  .pstrip-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 540px) {
  .pstrip {
    grid-template-columns: 1fr;
    row-gap: var(--sp-10);
  }
}

/* ---------- Category context band (certs/manufacturers, light-alt) ---------- */
.catnote {
  background: var(--c-bg-alt);
}

.catnote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: center;
}

.catnote-grid .h3 {
  max-width: 22ch;
  margin-block: var(--sp-5) var(--sp-4);
}

.catnote-grid p {
  max-width: 54ch;
}

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

/* ============================================================================
   SYSTEMPARTNER-BAND (.syspartner) — Kundenfeedback Runde 2
   Vorher: `.catnote[aria-label="Systempartner"]` — die Optik hing am aria-Label,
   der Kopf lag im 2-Spalten-`.catnote-grid` (Ueberschrift links, Intro rechts) und
   die Bloecke darunter waren reiner Text ohne visuellen Anker. Der Kunde fand
   Aufbau und Textdarstellung unschoen und wollte Icons bzw. Logos.

   Jetzt: eigener Klassenname, ZENTRIERTER Kopf und darunter Karten mit einem
   weissen Chip — echtes Herstellerlogo, wo wir die Datei haben, sonst ein Icon
   aus dem vorhandenen Set. Der dunkle Grund bleibt (USER: "I like this dark color").
   ============================================================================ */
.syspartner {
  position: relative;
  overflow: hidden;
  background: var(--c-navy-deep);
  /* v=209 (USER „Container-Padding konsistent"): war clamp(56px, 6vw, 88px) — jetzt Standard */
  padding-block: var(--section-pad);
}

.syspartner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(5, 15, 30, 0.86), rgba(5, 15, 30, 0.9)),
    url(/assets/img/global/dark-7.webp) center / cover no-repeat;
}

.syspartner > .container {
  position: relative;
  z-index: 1;
}

/* v=209 (USER): die v=172-Verkuerzung der Nachbarsektionen (132 -> 72px per `:has()`) ist
   ENTFERNT. Seit dem Foto-Rhythmus-Rollout grenzen an das Band Sektionen mit eigenem Hintergrund,
   die 72px wirkten dort als Sprung (FAQ unten, „Alle Leistungen" oben). Jetzt ueberall
   --section-pad. Nicht wieder einfuehren, ohne alle Leistungsseiten neu zu messen. */

.syspartner-head {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto clamp(34px, 3.6vw, 52px);
}

.syspartner-head .eyebrow { color: var(--c-on-navy-2); }
.syspartner-head .h3 { color: #fff; }

.syspartner-head .lead {
  color: var(--c-on-navy);
  margin-top: var(--sp-5);
}

.syspartner-head strong { color: #fff; }

/* gleichfoermiges Raster -> GRID (Layout-Regel 8) */
.syspartner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(18px, 1.9vw, 28px);
}

/* Gefuellte Flaeche statt Hairline — Layout-Regel 3 verbietet Trennlinien, nicht
   Flaechen; derselbe Ton, den `.svccard-media` auf dunklem Grund schon nutzt. */
.syspartner-item {
  background: rgba(255, 255, 255, .045);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.2vw, 30px);
}

/* Der Chip ist WEISS, nicht getoent: Herstellerlogos sind fuer helle Flaechen
   gezeichnet und wuerden auf dem dunklen Grund teilweise verschwinden. */
.syspartner-chip {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
  margin-bottom: var(--sp-5);
}

.syspartner-chip img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Icon-Variante: derselbe Chip, das Icon uebernimmt die Primaerfarbe.
   ⚠️ `.on-dark .icon-chip` wuerde hier greifen und den Chip transparent + das Icon
   hell machen — auf Weiss waere es dann unsichtbar (dieselbe Falle wie v=93 beim
   Bento). Die hoehere Spezifitaet unten dreht das zurueck. */
.syspartner-chip .icon-chip,
.on-dark .syspartner-chip .icon-chip {
  width: auto;
  height: auto;
  margin: 0;
  background: transparent;
  border: 0;
  color: var(--c-primary);
}

.syspartner-chip .icon-chip svg {
  width: 26px;
  height: 26px;
}

.syspartner-name {
  margin: 0 0 var(--sp-3);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.syspartner-item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--c-on-navy);
}

.syspartner-item strong { color: #fff; }

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


/* ============================================================
   MAIN PAGES — Branchen, Referenzen, Über uns, Service, Karriere,
   Kontakt. Playbook-konform: rail, 132px, keine Hairlines, Margins.
   ============================================================ */

/* pstrip with 3 columns (milestones) */
.pstrip--3 {
  grid-template-columns: repeat(3, 1fr);
}

.pstrip--3 .pstrip-step h3 {
  font-size: clamp(22px, 2vw, 28px);
}

@media (max-width: 900px) {
  .pstrip--3 {
    grid-template-columns: 1fr;
    row-gap: var(--sp-8);
  }
}

/* values — 3 borderless columns */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 72px);
}

.values h3 {
  font-size: clamp(19px, 1.8vw, 24px);
  margin-bottom: var(--sp-2_5);
}

.values p {
  font-size: 14.5px;
  color: var(--c-body);
  max-width: 40ch;
}

.values .v-num {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  color: var(--c-primary);
  margin-bottom: var(--sp-2_5);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .values {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

/* 24h Notdienst band — dark, textured */
.notband {
  background:
    linear-gradient(180deg, rgba(5, 15, 30, .90) 0%, rgba(7, 26, 51, .90) 100%),
    url('/assets/img/global/dark-10.webp') center / cover no-repeat;
}

.notband-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: center;
}

.notband .bignum {
  font-size: clamp(72px, 9vw, 140px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.notband .bignum span {
  color: var(--c-accent);
}

.notband h2 {
  font-size: clamp(26px, 2.6vw, 38px);
  max-width: 20ch;
  margin-bottom: var(--sp-4);
}

.notband p {
  color: var(--c-on-navy);
  max-width: 50ch;
  margin-bottom: var(--sp-6);
}

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

/* downloads / jobs — borderless rows with margin gaps */
.rowlist {
  display: flex;
  flex-direction: column;
}

.rowitem {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: clamp(16px, 2.5vw, 40px);
  align-items: center;
  background: var(--c-surface);
  padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.2vw, 32px);
}

.rowitem+.rowitem {
  margin-top: var(--sp-3_5);
}

.rowitem .r-idx {
  font-size: var(--fs-sm);
  color: var(--c-primary);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

.rowitem h3 {
  font-size: clamp(17px, 1.6vw, 21px);
}

.rowitem .r-meta {
  font-size: 13px;
  color: var(--c-muted);
}

.rowitem .link-arrow {
  justify-self: end;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .rowitem {
    grid-template-columns: 48px 1fr;
    row-gap: 6px;
  }

  .rowitem .r-meta {
    grid-column: 2;
  }

  .rowitem .link-arrow {
    grid-column: 2;
    justify-self: start;
  }
}

/* kontakt — hero quick rows + form */
.quickrows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

.quickrows a,
.quickrows span.qr {
  display: flex;
  /* USER v=185: `baseline` setzte den 34px-Icon-Chip gemessen 3px über die Textmitte */
  align-items: center;
  gap: var(--sp-3_5);
  font-size: 15.5px;
  color: var(--c-text);
}

/* USER v=84 (Screenshot 18): Label-Text (TELEFON/E-MAIL/ADRESSE/NOTDIENST) raus — das Icon sagt es.
   Bewusst sr-only statt display:none: ohne Label ist "0351 8498005" für Screenreader kontextlos.
   Optisch weg, für AT weiterhin da. */
.quickrows .q-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.quickrows a strong {
  font-weight: 600;
}

.quickrows a:hover strong {
  color: var(--c-primary);
}

/* USER v=184: der Hero auf /kontakt/ war mobil zu voll. Die Notdienst-Zeile steht auf derselben
   Seite nochmals in der Karte „Notdienst" (#anfahrt) und im FAQ — mobil deshalb ausgeblendet.
   ⚠️ Selektor bewusst (0,3,1): `.quickrows span.qr { display:flex }` oben ist (0,2,1) — ein
   blosses `.quickrows .qr--desktop` (0,2,0) verliert trotz späterer Position (gemessen). */
@media (max-width: 767px) {
  .quickrows span.qr.qr--desktop {
    display: none;
  }
}

.cform-wrap {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.cform-side .h2 {
  max-width: 18ch;
  margin-block: var(--sp-5) var(--sp-5);
}

.cform-side .lead {
  margin-bottom: var(--sp-6);
}

.cform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.cform .full {
  grid-column: 1 / -1;
}

.cform label {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 6px;
}

.cform input,
.cform select,
.cform textarea {
  width: 100%;
  padding: var(--sp-3_5) var(--sp-4);
  min-height: 52px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font: inherit;
  font-size: 15px;
  border-radius: var(--r-sm);
}

.cform textarea {
  min-height: 140px;
  resize: vertical;
}

.cform input:focus,
.cform select:focus,
.cform textarea:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
  border-color: transparent;
}

.cform select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.cform .consent {
  display: flex;
  gap: var(--sp-2_5);
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-body);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
}

.cform .consent input {
  width: auto;
  min-height: 0;
  margin-top: 3px;
  flex-shrink: 0;
}

.cform-note {
  font-size: 12.5px;
  color: var(--c-muted);
  margin-top: var(--sp-2_5);
}

@media (max-width: 900px) {
  .cform-wrap {
    grid-template-columns: 1fr;
  }

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

/* referenzen page: facts mini-band */
.mini-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
}

.mini-facts .mf-num {
  font-size: clamp(40px, 4.5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--c-navy);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mini-facts .mf-num sup {
  font-size: .5em;
  color: var(--c-primary);
}

.mini-facts p {
  font-size: 14px;
  color: var(--c-body);
  margin-top: var(--sp-2);
  max-width: 30ch;
}

@media (max-width: 700px) {
  .mini-facts {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ============================================================
   SERVICE PAGES (Phase 3) — cinematic dark hero, statement intro,
   overlapping Problem/Lösung panels, corner-tick explain frame,
   staggered benefit ledger, component rail, FAQ accordion.
   Custom components — no cards, no borders, editorial variance.
   ============================================================ */

/* ---------- heroS — dark cinematic service hero ---------- */
.heroS {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--c-navy-ink);
  padding-top: var(--nav-h);
}

.heroS-media {
  position: absolute;
  inset: 0;
}

.heroS-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  transform: scale(1.06);
  animation: heroB-in 1.6s var(--ease-out) forwards;
}

.heroS-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 15, 30, .88) 0%, rgba(5, 15, 30, .62) 40%, rgba(5, 15, 30, .16) 68%, rgba(5, 15, 30, .35) 100%),
    linear-gradient(180deg, rgba(5, 15, 30, .42) 0%, transparent 26%, transparent 62%, rgba(5, 15, 30, .66) 100%);
}

.heroS--flip .heroS-media img {
  object-position: 32% center;
}

.heroS--flip .heroS-media::after {
  background:
    linear-gradient(270deg, rgba(5, 15, 30, .88) 0%, rgba(5, 15, 30, .62) 40%, rgba(5, 15, 30, .16) 68%, rgba(5, 15, 30, .35) 100%),
    linear-gradient(180deg, rgba(5, 15, 30, .42) 0%, transparent 26%, transparent 62%, rgba(5, 15, 30, .66) 100%);
}

.heroS-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.heroS--flip .heroS-inner {
  margin-left: auto;
}

.heroS-inner {
  max-width: 726px;
}

.heroS .crumbs {
  color: var(--c-on-navy-muted);
}

.heroS .crumbs a {
  color: var(--c-on-navy-2);
}

.heroS .crumbs a:hover {
  color: #fff;
}

.heroS .crumbs .sep {
  color: var(--c-border-dark);
}

.heroS-content .h1 {
  margin-block: var(--sp-5);
  max-width: 18ch;
}

.heroS-content .lead {
  color: var(--c-on-navy);
  margin-bottom: var(--sp-6);
  max-width: 52ch;
}

/* trust badges — technical ledger row, not pills */
.heroS-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2_5) 26px;
  margin-bottom: var(--sp-8);
}

.heroS-badges span {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--c-on-navy-2);
}

.heroS-badges span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
  transform: translateY(-1px);
}

.heroS-meta {
  position: absolute;
  z-index: 1;
  bottom: 26px;
  right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  text-align: right;
}

@media (max-width: 767px) {
  .heroS {
    align-items: flex-end;
    padding-bottom: var(--sp-24);
  }

  .heroS-meta {
    display: none;
  }

  .heroS .heroB-ctas .btn {
    width: 100%;
  }
}

/* ---------- trust strip — certifications row lifted out of the hero (point 5) ---------- */
.trustbar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.trustbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 3vw, 48px);
  padding-block: clamp(18px, 2vw, 26px);
}

.tb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2_5);
  font-size: 13.5px;
  letter-spacing: .02em;
  color: var(--c-body);
}

.tb-item::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
}

/* ---------- statement intro (ghost index + technical line) ---------- */
.svc-statement {
  position: relative;
  overflow: hidden;
}

.svc-statement .container {
  position: relative;
}

.svc-ghost {
  position: absolute;
  right: var(--gutter);
  top: -34px;
  z-index: 0;
  font-size: clamp(110px, 14vw, 210px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--c-bg-alt);
  user-select: none;
  pointer-events: none;
}

.svc-statement p.statement {
  position: relative;
  z-index: 1;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.55;
  color: var(--c-text);
  font-weight: 450;
  max-width: 30em;
  padding-left: clamp(20px, 2.5vw, 40px);
  border-left: 2px solid var(--c-primary);
}

/* ---------- duel — overlapping Problem/Lösung panels ---------- */
.duel {
  background: var(--c-bg-alt);
  overflow: hidden;
}

.duel-wrap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.duel-problem {
  grid-column: 1 / 8;
  grid-row: 1;
  background:
    linear-gradient(165deg, rgba(7, 26, 51, .92), rgba(11, 37, 71, .90)),
    url('/assets/img/global/dark-7.webp') center / cover no-repeat;
  padding: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(88px, 9vw, 150px);
}

.duel-solution {
  grid-column: 6 / 13;
  grid-row: 1;
  align-self: end;
  background: var(--c-surface);
  padding: clamp(32px, 4vw, 64px);
  margin-top: clamp(180px, 22vw, 320px);
  position: relative;
  z-index: 1;
}

.duel h2 {
  font-size: clamp(24px, 2.3vw, 32px);
  max-width: 20ch;
  margin-block: var(--sp-5) var(--sp-4);
}

.duel p {
  max-width: 52ch;
  font-size: 15.5px;
}

.duel-problem p {
  color: var(--c-on-navy);
}

@media (max-width: 900px) {
  .duel-wrap {
    display: block;
  }

  .duel-problem {
    padding-bottom: clamp(32px, 4vw, 64px);
  }

  .duel-solution {
    margin-top: 0;
  }
}

/* ---------- explain — corner-tick target frame ---------- */
.explain-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(36px, 5vw, 96px);
  align-items: stretch;
}

.explain-grid.explain--flip .explain-media {
  order: 2;
}

.explain-media {
  position: relative;
  min-height: 440px;
  padding: 18px;
}

.explain-media img {
  position: absolute;
  inset: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  object-fit: cover;
}

.explain-media .tick {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--c-primary);
}

.explain-media .tick:nth-child(2) {
  top: 0;
  left: 0;
  border-top-width: 2px;
  border-left-width: 2px;
}

.explain-media .tick:nth-child(3) {
  top: 0;
  right: 0;
  border-top-width: 2px;
  border-right-width: 2px;
}

.explain-media .tick:nth-child(4) {
  bottom: 0;
  left: 0;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.explain-media .tick:nth-child(5) {
  bottom: 0;
  right: 0;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

.explain-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.explain-body .h3 {
  /* v=208 (USER): 20ch (= 422px) war schmaler als lange Komposita — „Videoüberwachungsanlage?"
     passte nicht, `overflow-wrap: break-word` brach das „?" allein in die nächste Zeile. */
  max-width: 28ch;
  margin-block: var(--sp-5) var(--sp-4);
}

.explain-body p {
  max-width: 54ch;
}

@media (max-width: 900px) {

  .explain-grid,
  .explain-grid.explain--flip {
    grid-template-columns: 1fr;
  }

  .explain-grid.explain--flip .explain-media {
    order: 0;
  }

  .explain-media {
    min-height: 0;
    padding: var(--sp-3);
  }

  .explain-media img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ---------- bene — staggered benefits ledger (no cards) ---------- */
.bene-head {
  /* v=202 (USER): lange Titel („Was Videoüberwachung von BAUM auszeichnet.") liefen über die
     volle 1384er-Schiene auf eine Zeile — Kopf auf ~780px begrenzen. */
  max-width: 780px;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.bene {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 3.5vw, 52px);
}

.bene-item {
  max-width: 44ch;
}

.bene-item .b-idx {
  display: block;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-3);
}

.bene-item h3 {
  font-size: clamp(18px, 1.7vw, 23px);
  margin-bottom: var(--sp-2);
}

.bene-item p {
  font-size: 14.5px;
  color: var(--c-body);
}

@media (max-width: 980px) {
  .bene {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .bene {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

/* ---------- rail — horizontal component rail ---------- */
/* v=203 (USER): „Komponenten im Überblick" auf allen Leistungsseiten weiss statt --c-bg-alt.
   Die zwei Seiten mit Foto-Schleier (.section--photo) decken das ohnehin per ::before ab. */
.railsec {
  background: var(--c-surface);
  overflow: hidden;
}

.rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: clamp(32px, 4vw, 52px);
}

.rail-head .h2 {
  max-width: 22ch;
  margin-top: var(--sp-5);
}

.rail-head .tech-label {
  text-align: right;
  padding-bottom: var(--sp-2);
}

.rail {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  padding-bottom: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-navy-2) transparent;
}

.rail::-webkit-scrollbar {
  height: 4px;
}

.rail::-webkit-scrollbar-thumb {
  background: var(--c-border);
}

.rail-item {
  flex: 0 0 auto;
  width: clamp(250px, 23vw, 320px);
  scroll-snap-align: start;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  padding: clamp(22px, 2.2vw, 32px);
  min-height: 210px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-fast) ease, transform .35s var(--ease-out);
}

.rail-item:hover {
  border-color: var(--c-primary);
  transform: translateY(-4px);
}

.rail-item .r-num {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-3_5);
}

.rail-item h3 {
  font-size: 17.5px;
  color: var(--c-navy);
  margin-bottom: var(--sp-2);
}

.rail-item p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-body);
}

/* Komponenten as icon-card grid (ICON-CARD EXPANSION) — replaces horizontal scroll */
.rail--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  overflow: visible;
  padding-bottom: 0;
  scroll-snap-type: none;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.rail--grid .rail-item {
  width: auto;
  min-height: 0;
  border-radius: var(--r-lg);
}

.rail--grid .rail-item .icon-chip {
  margin-bottom: var(--sp-3_5);
}

@media (max-width: 980px) {
  .rail--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ---------- audience additions (privat/gewerbe points reuse) ---------- */
.audience-col .h3-sm {
  font-size: clamp(20px, 2vw, 27px);
  max-width: 22ch;
  margin-block: var(--sp-5) var(--sp-4);
  color: var(--c-navy);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* check-icon bullets (ICON-CARD EXPANSION) */
.audience-points span[data-icon] {
  display: flex;
  align-items: center;
  gap: var(--sp-2_5);
}

.audience-points span[data-icon]::before {
  display: none;
}

.audience-points span[data-icon] .icon-chip {
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 0;
  background: transparent;
  color: var(--c-primary);
}

.audience-points span[data-icon] .icon-chip svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.on-dark .audience-points span[data-icon] .icon-chip {
  background: rgba(255, 255, 255, .10);
  color: var(--c-on-navy-2);
}

/* audience column chip sits above the eyebrow */
.audience-col[data-icon]>.icon-chip {
  width: 34px;
  height: 34px;
  margin: 0 var(--sp-2_5) 0 0;
  vertical-align: middle;
}

.audience-col[data-icon]>.eyebrow {
  vertical-align: middle;
}

/* sector-page risk + sysmap item chips (ICON-CARD EXPANSION) */
.risk>div>.icon-chip {
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-2_5);
}

.sysmap-item .s-head {
  align-items: center;
}

.sysmap-item .s-head>.icon-chip {
  width: 30px;
  height: 30px;
  margin: 0 6px 0 0;
  border-radius: var(--r-sm);
}

.sysmap-item .s-head>.icon-chip svg {
  width: 17px;
  height: 17px;
}

/* ---------- FAQ — borderless accordion ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 5vw, 100px);
  align-items: start;
}

.faq-side {
  position: sticky;
  top: 108px;
}

.faq-side .h2 {
  max-width: 14ch;
  margin-top: var(--sp-5);
}

.faq-item {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast) ease;
}

.faq-item:hover {
  border-color: var(--c-primary);
}

.faq-item+.faq-item {
  margin-top: var(--sp-3);
}

.faq-q {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  width: 100%;
  text-align: left;
  background: transparent;
  padding: var(--sp-5) var(--sp-6);
  transition: background-color var(--t-fast) ease;
}

.faq-q:hover {
  background: var(--c-bg-alt-hover);
}

.faq-q .f-idx {
  display: none;
}

.faq-q .f-text {
  font-size: 15.5px;
  font-weight: 550;
  color: var(--c-text);
  flex: 1;
}

.faq-q .chev {
  flex-shrink: 0;
  transition: transform .25s ease;
  color: var(--c-primary);
  align-self: center;
}

.faq-item.is-open .faq-q .chev {
  transform: rotate(180deg);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease-inout);
}

/* v=161 — geschlossene Antworten AUS dem Accessibility-Baum nehmen.
   Vorher wurde nur auf Hoehe 0 geklappt (grid-template-rows: 0fr): der Text blieb
   sichtbar fuer Screenreader, obwohl der Button aria-expanded="false" meldete — der
   Zustand war schlicht gelogen, und die FAQ las sich als eine durchgehende Textwand.
   Auf /kontakt/ lag ausserdem ein <a href="tel:…"> in einem geschlossenen Panel und
   fing den Tab-Fokus ab (unsichtbarer Fokus, WCAG 2.4.3).
   ⚠️ visibility wird VERZOEGERT auf hidden gesetzt (0s linear .4s), sonst verschwindet
   der Text sofort und die Zuklapp-Animation laeuft ins Leere. Beim Oeffnen ohne Delay. */
.faq-a>div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear .4s;
}

.faq-item.is-open .faq-a>div {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.faq-a p {
  padding: var(--sp-3_5) var(--sp-6) var(--sp-5) var(--sp-6);
  font-size: 14.5px;
  color: var(--c-body);
  max-width: 60ch;
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

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

  .faq-side {
    position: static;
  }
}

/* ============================================================================
   FLIESSTEXT IN SEKTIONEN (.sectext) + REGELWERK-CHIPS (.normrow)
   Kundenfeedback Runde 3
   ⚠️ Absaetze, die DIREKT in einer `.container`-Sektion standen, hatten weder ein
   Zeilenmass noch einen Absatzabstand — gemessen 1313px Zeilenlaenge (Layout-Regel 5
   erlaubt 66ch, also rund die Haelfte) und `margin: 0` zwischen allen Absaetzen.
   Der `.lead` daneben war korrekt auf 66ch begrenzt (625px) und 15px gross, der
   Fliesstext 16px: der Breitensprung 625 -> 1313px las sich als "zwei verschiedene
   Schriftgroessen". Betroffen waren genau ZWEI Leistungsseiten (brandmeldeanlagen,
   tuer-schloss-beschlagtechnik) — die Artikel unter /aktuelles/ sind ueber
   `.post-body` bereits begrenzt.
   ============================================================================ */
.sectext {
  max-width: 66ch;
}

/* ⚠️ Kinder fuellen die Spalte des Wrappers. Ohne das behielte der `.lead` seine
   EIGENEN 66ch — bei 15px sind das 624px, bei 16px-Absaetzen 666px, also zwei
   verschiedene rechte Kanten uebereinander. */
.sectext > * {
  max-width: none;
}

.sectext > * + * {
  margin-top: var(--sp-6);
}

/* Ein Lead, der KLEINER ist als der Fliesstext darunter (15 vs 16px), liest sich
   wie eine Bildunterschrift. Hier fuehrt er den Abschnitt an, also etwas groesser
   und dunkler — die globale `--fs-lead` bleibt unangetastet. */
.sectext > .lead {
  font-size: clamp(16.5px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--c-text);
}

/* Regelwerke als Chips statt als Satzreihe (USER: "visualize this information").
   Gleichfoermige Items -> GRID (Layout-Regel 8). Gefuellte Flaeche statt Hairline
   (Layout-Regel 3); auf `.section--alt` ist Weiss der ruhige Kontrast. */
.normrow {
  list-style: none;
  margin: clamp(26px, 2.8vw, 38px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  max-width: 940px;
}

.norm-item {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}

.norm-code {
  display: block;
  font-size: 15px;
  font-weight: 650;
  color: var(--c-primary-text);
}

.norm-what {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-muted);
}

/* ---- Runde 4: Textspalte + Fakten-Aside, sichtbare Icon-Chips, Rail-Ausrichtung ---- */

/* Zwei-Spalten Text ↔ Aside — asymmetrisch, also FLEXBOX (Layout-Regel 8).
   Grund: der Fliesstext stand mit 666px in einem 1409px breiten Container,
   rechts blieben GEMESSEN 695px tot. Das Aside fuellt genau diese Flaeche. */
.sectext-split {
  display: flex;
  gap: clamp(32px, 4vw, 64px);
  align-items: flex-start;
}

.sectext-split > .sectext {
  flex: 1 1 56%;
  min-width: 0;
  max-width: 68ch;
}

.sectext-split > .sectext-aside {
  flex: 1 1 36%;
  min-width: 0;
}

.sectext-aside .tech-label {
  display: block;
  margin-bottom: var(--sp-4);
}

/* gestapelte Variante der Regelwerk-Chips fuer die schmale Spalte */
.normrow--stack {
  grid-template-columns: 1fr;
  gap: var(--sp-3_5);
  margin-top: 0;
  max-width: none;
}

/* Schluss-Hinweis als volle Leiste statt als kurzer, rechts ausfransender Absatz */
.sectext-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2vw, 26px) clamp(22px, 2.2vw, 30px);
  margin-top: clamp(28px, 3vw, 40px);
}

.sectext-note p {
  margin: 0;
  max-width: 78ch;
  font-size: 15px;
  line-height: 1.65;
}

.sectext-note > .icon-chip {
  margin-bottom: 0;
}

/* ⚠️ `.rail--grid` bringt selbst `max-width: var(--container)` + `padding-inline`
   mit, weil es normalerweise DIREKT im <section> steht. In der RWA-Sektion liegt
   es aber in einer `.container` — die Polsterung kam damit doppelt und die Karten
   standen GEMESSEN 48px neben der Textkante (Layout-Regel 1: eine Ausrichtungs-
   schiene). Betrifft genau diese eine Stelle; die 14 anderen `.rail--grid` sind
   direkte Sektionskinder und bleiben unberuehrt. */
.container > .rail--grid {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* ⚠️ Der Chip war WEISS auf weisser Karte und damit unsichtbar: die Regel
   `.section--alt .icon-chip { background: var(--c-surface) }` (components.css)
   ist fuer Chips gedacht, die direkt auf dem grauen Sektionsgrund liegen — in
   einer weissen Karte kehrt sie den Kontrast um. Hier ein Primaerton-Tint:
   #2672B9 auf ~#E9F1F8 = 4.4:1, deutlich ueber den 3:1 fuer grafische Elemente.
   Spezifitaet (0,3,0) schlaegt die (0,2,0)-Regel unabhaengig von der Dateireihenfolge. */
.rail .rail-item .icon-chip {
  background: rgba(38, 114, 185, .10);
  color: var(--c-primary);
}

@media (max-width: 900px) {
  .sectext-split {
    flex-direction: column;
    align-items: stretch;
  }

  /* ⚠️ in `column` bezieht sich flex-basis auf die HOEHE (v=152) */
  .sectext-split > * {
    flex: 0 1 auto;
    max-width: none;
  }
}

@media (max-width: 600px) {
  .sectext-note {
    flex-direction: column;
    gap: var(--sp-4);
  }
}

/* ---------- related services ---------- */
.related {
  background: var(--c-surface);
}

.related-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3_5) 42px;
  margin-top: var(--sp-6);
}

.related-row a {
  font-size: 16px;
  font-weight: 550;
}

/* related → image cards (point 10a): reuse the .svc-card component */
.related .svc-card-grid {
  margin-top: var(--sp-8);
}

/* ⚠️ Kundenfeedback: die Branchen-Sektion hatte KEINE solche Regel — gemessen
   klebte das Kartenraster mit 0px direkt unter der Ueberschrift, waehrend
   `.related` daneben 32px hatte. Gleicher Wert, damit beide Sektionen am
   Seitenende denselben Rhythmus haben. */
.branchensec .svc-card-grid {
  margin-top: var(--sp-8);
}

/* ---------- final CTA PLZ mini-form ---------- */
.final-plz {
  display: flex;
  gap: var(--sp-3);
  max-width: 520px;
  margin-bottom: var(--sp-6);
}

.final-plz .btn {
  white-space: nowrap;
}

.final-plz input {
  flex: 1;
  height: 52px;
  padding: 0 var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-navy);
  font: inherit;
  font-size: 15px;
  border-radius: var(--r-sm);
}

.final-plz input::placeholder {
  color: var(--c-muted);
}

.final-plz input:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}

/* USER v=84 (Screenshot 13): Feld war nur 21px hoch statt 52px. Ursache: `flex: 1` = flex-basis:0
   auf der HAUPTACHSE — sobald der Container hier auf column kippt, ist die Hauptachse die HÖHE,
   flex-basis:0 schlägt `height:52px` und das Feld kollabiert auf Inhaltshöhe. `flex:none` gibt
   die Höhe zurück. Das gap der Zeile NICHT auf `flex:1` umstellen. */
@media (max-width: 540px) {
  .final-plz {
    flex-direction: column;
  }

  .final-plz input {
    flex: none;
  }

  .final-plz .btn {
    width: 100%;
  }
}

/* ============================================================
   BRANCHEN SECTOR PAGES (Phase 4) — risk register, system
   combination map, scenario timeline. Custom, borderless,
   rail-aligned, --section-pad rhythm.
   ============================================================ */

/* ---------- risk register ---------- */
.risks-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.risks-side {
  position: sticky;
  top: 108px;
}

.risks-side .h2 {
  max-width: 16ch;
  margin-top: var(--sp-5);
}

.risks-side p {
  margin-top: var(--sp-4);
  max-width: 44ch;
}

.risk+.risk {
  margin-top: clamp(28px, 3.5vw, 48px);
}

.risk {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: clamp(16px, 2.5vw, 36px);
  align-items: start;
}

.risk .r-idx {
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
  position: relative;
}

.risk .r-idx::after {
  content: "";
  position: absolute;
  top: 34px;
  left: 2px;
  bottom: -34px;
  width: 1px;
  background: var(--c-line-tech);
}

.risk:last-child .r-idx::after {
  display: none;
}

.risk h3 {
  font-size: clamp(19px, 1.8vw, 24px);
  margin-bottom: var(--sp-2);
}

.risk p {
  font-size: 14.5px;
  color: var(--c-body);
  max-width: 52ch;
}

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

  .risks-side {
    position: static;
  }
}

/* ---------- system combination map ---------- */
.sysmap {
  background: var(--c-bg-alt);
}

.sysmap-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.sysmap-side {
  position: sticky;
  top: 108px;
}

.sysmap-side .h2 {
  max-width: 15ch;
  margin-top: var(--sp-5);
}

.sysmap-side p {
  margin-top: var(--sp-4);
  max-width: 42ch;
}

/* USER v=84 (Screenshot 14): vertikale Linie + Kreis-Marker ENTFERNT (padding-left entfällt mit). */
.sysmap-list {
  position: relative;
}

.sysmap-item {
  position: relative;
  display: block;
  padding: var(--sp-4) 0;
  transition: transform .25s var(--ease-out);
}

.sysmap-item:hover {
  transform: translateX(6px);
}

.sysmap-item .s-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3_5);
}

.sysmap-item .s-idx {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.sysmap-item h3 {
  font-size: clamp(18px, 1.7vw, 23px);
  color: var(--c-text);
  transition: color var(--t-fast) ease;
}

.sysmap-item:hover h3 {
  color: var(--c-primary);
}

.sysmap-item .s-head .arr {
  margin-left: auto;
  color: var(--c-primary);
  opacity: 0;
  transform: translateX(-6px);
  transition: all .25s var(--ease-out);
  flex-shrink: 0;
}

.sysmap-item:hover .s-head .arr {
  opacity: 1;
  transform: none;
}

.sysmap-item p {
  font-size: 14px;
  color: var(--c-body);
  max-width: 52ch;
  margin-top: var(--sp-1);
  padding-left: calc(11px + 14px + 14px);
}

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

  .sysmap-side {
    position: static;
  }

  .sysmap-item p {
    padding-left: 0;
  }
}

/* ---------- scenario timeline (dark, big timestamps) ---------- */
.daytime {
  background:
    linear-gradient(180deg, rgba(5, 15, 30, .90) 0%, rgba(9, 28, 54, .92) 100%),
    url('/assets/img/global/dark-12.webp') center / cover no-repeat;
  overflow: hidden;
}

.daytime-head {
  margin-bottom: clamp(40px, 5vw, 64px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
}

.daytime-head .h2 {
  max-width: 22ch;
  margin-top: var(--sp-5);
}

/* USER v=84 (Screenshot 15): Linie + Kreis-Marker ENTFERNT, padding-top entfällt mit;
   row-gap großzügiger, weil die Momente gestapelt zu eng standen. */
.daytime-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 72px);
  position: relative;
}

.moment {
  position: relative;
}

.moment .m-time {
  display: block;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-3);
}

.moment .m-time span {
  color: var(--c-accent);
}

.moment h3 {
  font-size: clamp(17px, 1.6vw, 21px);
  margin-bottom: var(--sp-2);
}

.moment p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-on-navy);
  max-width: 38ch;
}

@media (max-width: 900px) {
  .daytime-grid {
    grid-template-columns: 1fr;
    row-gap: var(--sp-16);
  }

  /* v=84: 40 → 64, Momente standen zu eng */
  .daytime-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ================= LEGAL PAGES ================= */
.legal-head {
  padding: calc(var(--nav-h) + clamp(48px, 7vw, 96px)) 0 clamp(32px, 4vw, 56px);
}

.legal-head .h1 {
  margin-top: var(--sp-5);
}

/* Rechtstexte: schmale, zentrierte Lesespalte (Desktop).
   Kopf (Crumbs/Eyebrow/H1) und Fliesstext teilen sich dieselbe
   ~800px-Spalte, die die .container-Regel via margin-inline:auto
   mittig stellt — Text bleibt linksbuendig, die Spalte ist zentriert.
   Mobil > Viewport → wirkungslos, dort greift die normale Gutter-Breite. */
.legal-head .container,
.legal-body .container {
  max-width: 800px;
}

.prose {
  max-width: none;
}

/* Lange, umbruchlose URLs in den Rechtstexten (z. B. die OS-Plattform der EU-Kommission,
   261 px am Stueck) schoben die Seite sonst seitlich auf: gemessen scrollWidth 382 bei
   360 px Viewport. `anywhere` erlaubt den Bruch nur, wenn die Zeile sonst ueberliefe. */
.prose a {
  overflow-wrap: anywhere;
}

.prose h2 {
  font-size: clamp(19px, 1.8vw, 24px);
  margin: clamp(28px, 3vw, 40px) 0 10px;
}

.prose p {
  margin-bottom: var(--sp-3);
  font-size: 15px;
}

.legal-note {
  background: var(--c-bg-alt);
  padding: var(--sp-4) var(--sp-5);
  font-size: 14px;
  margin-bottom: var(--sp-6);
}

/* heroB--center — centered hero content (Leistungen overview + categories) */
.heroB--center .heroB-content {
  text-align: center;
}

.heroB--center .crumbs {
  justify-content: center;
}

.heroB--center .heroB-content .h1,
.heroB--center .heroB-content .lead {
  margin-inline: auto;
}

.heroB--center .heroB-ctas {
  justify-content: center;
}

.heroB--center .heroB-media::after {
  /* symmetric wash for centered text */
  background: linear-gradient(180deg, rgba(244, 247, 251, .82) 0%, rgba(244, 247, 251, .55) 48%, rgba(244, 247, 251, .72) 100%);
}

/* ================= Konsistente Kartenradien — Content-Cards gerundet (User-Entscheid) =================
   Alle Content-Karten/Medien auf --r-lg (passend zum Bento); die früheren Winkel-Clip-Paths entfernt.
   UI-Chrome (Buttons/Inputs/Chips/Pills) behält seine eigene Skala (--r-sm/--r-md/--r-full). */
.ref-media,
.chapter-media,
.catrow-media,
.htrack-panel .media,
.intro-media .frame,
.laden-map,
.cert-ledger,
.rail-item {
  border-radius: var(--r-lg);
}

/* Container, die ein Bild beschneiden, aber bisher kein overflow hatten */
.intro-media .frame,
.htrack-panel .media,
.laden-map,
.cert-ledger {
  overflow: hidden;
}

/* ============ HOME V2 — heller statischer Hero (REVIEW-VARIANTE /home-v2/) ============ */
.hv2-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  background: linear-gradient(165deg, #F7FAFD 0%, #EAF1F9 55%, #FFFFFF 100%);
}

.hv2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
  width: 100%;
}

.hv2-copy .display {
  color: var(--c-navy);
  max-width: 15ch;
  margin-block: var(--sp-5);
}

.hv2-accent {
  color: var(--c-primary);
}

.hv2-copy .lead {
  color: var(--c-body);
  margin-bottom: var(--sp-8);
}

.hv2-trust {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(28px, 3vw, 40px);
}

.hv2-trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2_5);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-body);
}

.hv2-media {
  position: relative;
}

/* 3/2 = die native Ratio des Team-Fotos (1.52), also KEIN Crop. War 4/5 (Hochformat), das passte
   zum früheren Bedienteil-Detail; ein Gruppenfoto von ~20 Personen hätte darin nur **53 % seiner
   Breite** gezeigt (gerechnet) — die Leute am Rand wären schlicht abgeschnitten. Bei einem
   Gruppenbild bestimmt der Inhalt den Slot, nicht umgekehrt. `.hv2-*` gibt es nur auf /home-v2/,
   die Änderung kann nirgends sonst durchschlagen. */
/* USER-SPEC: feste Bildhöhe 670px. Die Höhe gewinnt hier bewusst über die Bildratio — bei 540px
   Spaltenbreite ergibt das ein Hochformat (0.81), das Team-Foto (nativ 1.52) wird also über
   object-fit:cover seitlich beschnitten. `object-position: 50%` hält die Gruppenmitte.
   Kein aspect-ratio mehr: sind Breite und Höhe definit, wird es ohnehin ignoriert. */
.hv2-media img {
  width: 100%;
  height: 670px;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: var(--r-lg);
  display: block;
}

.hv2-coords {
  position: absolute;
  right: 14px;
  bottom: 14px;
  text-align: right;
  color: #fff;
  background: rgba(7, 26, 51, .55);
  padding: 6px var(--sp-2_5);
  border-radius: var(--r-sm);
}

@media (max-width: 900px) {
  .hv2-hero {
    min-height: 0;
    padding-block: calc(var(--nav-h) + 40px) 48px;
  }

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

  /* mobil 3/2 (statt 4/3: das hätte dem Gruppenfoto je ~6 % pro Seite gekappt — genau dort stehen
     die äusseren Kolleginnen und Kollegen). `height: auto` MUSS mit: die 670px aus der
     Basis-Regel wären sonst eine definite Höhe und würden aspect-ratio aushebeln — auf 350px
     Spaltenbreite ergäbe das einen extrem hohen Ausschnitt. */
  .hv2-media img {
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

/* ============ KONTAKT — Öffnungszeiten & Gebühren (aus Prototyp) ============ */
.hours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: clamp(28px, 3.5vw, 44px);
}

.hours-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.6vw, 34px);
}

.hours-card h3 {
  font-size: clamp(17px, 1.5vw, 20px);
  margin-bottom: var(--sp-5);
}

.hours-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: baseline;
  padding: 9px 0;
  font-size: 14.5px;
}

.hours-row span {
  color: var(--c-muted);
}

.hours-row strong {
  color: var(--c-navy);
  font-weight: 600;
  white-space: nowrap;
}

.hours-row+.hours-row {
  border-top: 1px solid var(--c-bg-alt);
}

.hours-note {
  font-size: 12.5px;
  color: var(--c-muted);
  margin-top: var(--sp-4);
  line-height: 1.6;
}

.hours-note a {
  color: var(--c-primary);
}

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

  .hours-row strong {
    white-space: normal;
    text-align: right;
  }
}

/* ============ ICON-CARD EXPANSION — drop the index number where an icon chip leads the card
   (USER v=71: icon replaces the number; the two must not coexist). Reversible w/ icon experiment. ============ */
[data-icon]>.s-num,
[data-icon]>.v-num,
[data-icon]>.b-idx,
[data-icon]>.r-num,
.s-head[data-icon]>.s-idx {
  display: none;
}

/* risk register: the number sits in its own left column beside the icon'd content → drop it + collapse */
.risk:has(> [data-icon]) {
  grid-template-columns: 1fr;
}

.risk:has(> [data-icon])>.r-idx {
  display: none;
}

/* ================= KONTAKT — Redesign (aus /kontakt-v2/ befördert, v=75) =================
   Dunkles Formular-Band m. schwebender weißer Formular-Karte, Ex:02-Karte
   (Hours-Bar überlappt full-bleed Karte + Standort-Card) und zentrierte
   Social-Cards. Hero = klassischer .heroB (USER-ENTSCHEID beim Befördern). */
.kv2-formband {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(31, 82, 145, .92) 0%, rgba(17, 46, 88, .95) 100%),
    url('/assets/img/global/dark-10.webp') center / cover no-repeat;
}

.kv2-formband-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}

.kv2-formband-copy .h2 {
  max-width: 15ch;
  margin-block: var(--sp-5);
}

.kv2-formband-copy .lead {
  max-width: 44ch;
  margin-bottom: var(--sp-8);
}

.kv2-trust {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.kv2-trust-avatars {
  display: flex;
}

.kv2-trust-avatars img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-navy-ink);
  margin-left: -12px;
}

.kv2-trust-avatars img:first-child {
  margin-left: 0;
}

.kv2-trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kv2-trust-text strong {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.kv2-trust-text span {
  font-size: 13px;
  color: var(--c-on-navy-2);
}

/* Consent: Checkbox absolut positioniert, Text fließt als Fließtext (kein Flex-Split) */
.kv2-formcard .cform .consent {
  display: block;
  position: relative;
  padding-left: 30px;
}

.kv2-formcard .cform .consent input {
  position: absolute;
  left: 0;
  top: 3px;
  margin: 0;
}

.kv2-formcard {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 30px 60px rgba(5, 15, 30, .35);
}

/* Anfahrt: zentrierte Head + Hours-Bar überlappt die full-bleed Karte (Ex:02) */
.kv2-map .chapters-head {
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.kv2-map-head {
  text-align: center;
}

.kv2-map-head .h2 {
  margin-inline: auto;
}

.kv2-hourswrap {
  position: relative;
  z-index: 4;
  text-align: center;
  margin-bottom: -34px;
}

.kv2-hourswrap .tech-label {
  display: block;
  margin-bottom: var(--sp-3);
}

.kv2-hoursbar {
  display: inline-flex;
  text-align: left;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px rgba(5, 15, 30, .14);
}

.kv2-hourscell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px clamp(20px, 2.4vw, 32px);
}

.kv2-hourscell+.kv2-hourscell {
  border-left: 1px solid var(--c-border);
}

.kv2-hourscell strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-navy);
  white-space: nowrap;
}

.kv2-hourscell span {
  font-size: 12.5px;
  color: var(--c-muted);
  white-space: nowrap;
}

.kv2-map-full {
  position: relative;
}

.kv2-map-full .laden-map {
  min-height: clamp(540px, 66vh, 720px);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

/* .mapembed muss die volle Kartenhöhe füllen (shared default ist nur 320px) */
.kv2-map-full .mapembed {
  flex: 1;
  min-height: clamp(540px, 66vh, 720px);
}

.kv2-loc-card {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  width: min(360px, calc(100% - 2 * var(--gutter)));
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: 0 24px 48px rgba(5, 15, 30, .28);
}

.kv2-loc-card .laden-rows {
  margin-bottom: var(--sp-6);
}

.kv2-loc-card .laden-row {
  grid-template-columns: 96px 1fr;
  gap: var(--sp-4);
}

.kv2-loc-card .laden-row dd {
  overflow-wrap: anywhere;
}

/* Übrige Öffnungszeiten + Türöffnungsgebühren */
.kv2-fees {
  margin-top: clamp(48px, 6vw, 80px);
}

.kv2-fees .eyebrow {
  display: block;
  margin-bottom: var(--sp-5);
}

.kv2-fees-grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

/* Social-Karten (zentrierte Head) */
/* .kv2-social: seit v=232 ohne Markup (Social-Sektion auf /kontakt/ entfernt) */
.kv2-social .chapters-head {
  margin-bottom: clamp(28px, 3.5vw, 44px);
  text-align: center;
}

.kv2-social .chapters-head .h2 {
  margin-inline: auto;
}

.kv2-social .chapters-head .lead {
  margin-left: auto;
  margin-right: auto;
}

.kv2-social-card .svc-card-body {
  gap: var(--sp-2_5);
  align-items: flex-start;
}

.kv2-social-card .icon-chip {
  margin-bottom: var(--sp-1);
}

.kv2-social-name {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c-navy);
}

@media (max-width: 900px) {
  .kv2-formband-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .kv2-fees-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

@media (max-width: 720px) {
  .kv2-loc-card {
    position: static;
    transform: none;
    width: auto;
    margin: 14px var(--gutter) 0;
    box-shadow: none;
  }

  .kv2-hourswrap {
    margin-bottom: 18px;
  }

  .kv2-hoursbar {
    display: grid;
    width: 100%;
  }

  .kv2-hourscell+.kv2-hourscell {
    border-left: 0;
    border-top: 1px solid var(--c-border);
  }

  .kv2-hourscell strong,
  .kv2-hourscell span {
    white-space: normal;
  }

  .kv2-map-full .laden-map {
    min-height: clamp(380px, 52vh, 480px);
  }

  .kv2-map-full .mapembed {
    min-height: clamp(380px, 52vh, 480px);
  }
}

/* ===== Mid-page cinematic CTA band (service pages, v=76) — clone of the .final dark band =====
   Injected by tools/gen_leist_redesign.py after "Komponenten im Überblick"; image per page via
   the inline --band-img custom property (hero-<cat>.webp). Breaks the light middle stretch. */
.svc-band {
  position: relative;
  overflow: hidden;
  background: var(--c-navy-ink);
  text-align: center;
}

.svc-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(rgba(5, 15, 30, .80), rgba(5, 15, 30, .9)), var(--band-img) center / cover no-repeat;
}

.svc-band>.container {
  position: relative;
  z-index: 1;
}

.svc-band-inner {
  max-width: 760px;
  margin-inline: auto;
}

.svc-band .eyebrow {
  color: var(--c-on-navy-2);
  margin-bottom: var(--sp-4);
}

.svc-band .display {
  color: #fff;
  font-size: clamp(30px, 3.4vw, 46px);
  max-width: 20ch;
  margin: 0 auto var(--sp-5);
}

.svc-band .lead {
  color: var(--c-on-navy);
  max-width: 52ch;
  margin: 0 auto var(--sp-8);
}

/* "So arbeitet BAUM" process-strip section → subtle bg-alt (service/category/htrack; not homepage) */
.section:has(.pstrip) {
  background: var(--c-bg-alt);
}

/* ===== Job single page — on-page Bewerbungsformular (Felgner-Stil, zentriert, v=78) =====
   #bewerbung sits on a white section; the grey card holds the white .cform fields. */
.apply-head {
  text-align: center;
  max-width: 52ch;
  margin: 0 auto clamp(28px, 4vw, 44px);
}

.apply-head .lead {
  margin-inline: auto;
}

.apply-form {
  max-width: 820px;
  margin-inline: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 52px);
  box-shadow: 0 24px 60px rgba(5, 15, 30, .08);
}

/* Consent: Checkbox absolut, Text als Fließtext (kein Flex-Split wie beim Kontakt-Formular) */
.apply-form .consent {
  display: block;
  position: relative;
  padding-left: 30px;
}

.apply-form .consent input {
  position: absolute;
  left: 0;
  top: 3px;
  margin: 0;
}

/* Upload-Felder (Felgner-Stil): Rahmen-Box mit Icon + Hinweis + „wählen"-Button. Datei-Input hidden. */
.apply-upload {
  display: block;
}

.apply-upload-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-navy);
  margin-bottom: var(--sp-2);
}

/* die Box ist ein <label> → das .cform-label-Uppercase zurücksetzen, damit der Fließtext normal bleibt */
.apply-form .apply-upload-box,
.apply-form .apply-upload-box * {
  text-transform: none;
  letter-spacing: normal;
}

.apply-form .apply-upload-box {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 18px;
  background: var(--c-bg-alt);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.apply-form .apply-upload-box:hover {
  border-color: var(--c-primary);
  background: var(--c-surface);
}

/* v=159 — Tastatur-Zugang zum Datei-Upload (WCAG 2.1.1).
   Das <input type="file"> trug frueher `hidden` (= display:none) und war damit weder
   fokussierbar noch im Accessibility-Baum: mit Tastatur/Screenreader liess sich auf
   KEINER Stellenseite ein Lebenslauf anhaengen. Jetzt unsichtbar ABER fokussierbar.
   ⚠️ NICHT .sr-only benutzen: `.cform input` (0,1,1) setzt width:100% + min-height:52px
   und SCHLAEGT die reine Klasse .sr-only (0,1,0) — gemessen rendert das Feld dann
   1225x52 und erzeugt horizontales Scrollen. Darum diese Regel mit (0,3,1). */
.apply-form .apply-upload-box input[type="file"].apply-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Weil das Feld selbst unsichtbar ist, muss die BOX den Fokus anzeigen —
   sonst sieht man beim Tabben nicht, wo man steht. */
.apply-form .apply-upload-box:focus-within {
  border-color: var(--c-primary);
  background: var(--c-surface);
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

.apply-upload-ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-primary);
}

.apply-upload-ico svg {
  width: 22px;
  height: 22px;
}

.apply-upload-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.apply-upload-txt strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-navy);
}

.apply-upload-hint {
  font-size: 12.5px;
  color: var(--c-muted);
}

.apply-upload-name {
  font-size: 12.5px;
  color: var(--c-primary);
  font-weight: 500;
  margin-top: 2px;
  word-break: break-word;
}

.apply-upload-name:empty {
  display: none;
}

.apply-upload-btn {
  flex-shrink: 0;
  pointer-events: none;
}

@media (max-width: 560px) {

  /* icon over text: side-by-side leaves the label ~173px at 390w, so "Aktueller, tabellarischer
     Lebenslauf" wraps hard. Stacking gives the copy the box's full measure. */
  .apply-form .apply-upload-box {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }

  .apply-upload-ico {
    align-self: flex-start;
  }

  .apply-upload-btn {
    width: 100%;
    text-align: center;
  }
}

/* Job single page — einfache Inhaltslisten (Felgner-Stil): Eyebrow + Heading + Checkliste.
   Ersetzt auf den Job-Einzelseiten die .bene-Karten + .cert-ledger durch klare Listen (v=79). */
.job-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 820px;
}

.job-facts li {
  position: relative;
  padding-left: 36px;
  line-height: 1.62;
  color: var(--c-body);
  font-size: var(--fs-lead);
}

.job-facts li+li {
  margin-top: clamp(13px, 1.5vw, 19px);
}

.job-facts li strong {
  color: var(--c-navy);
  font-weight: 600;
}

.job-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .12em;
  width: 22px;
  height: 22px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%23E4EEF8'/%3E%3Cpath d='M6.4 11.4l3 3 6.2-7' fill='none' stroke='%232672B9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Job single page — Aufgaben als Text-links/Bild-rechts-Split (v=80) */
.job-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.job-split-body .job-facts {
  max-width: none;
}

.job-split-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  align-self: stretch;
  min-height: clamp(340px, 42vw, 460px);
}

.job-split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .job-split {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .job-split-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
    order: -1;
  }
}

/* Profil + Wir bieten in einer Sektion, zwei Spalten (v=80) */
.job-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
}

.job-cols .job-facts {
  max-width: none;
}

.job-col-note {
  max-width: 46ch;
  margin-bottom: var(--sp-5);
  color: var(--c-muted);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .job-cols {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

/* Bewerbungsprozess als Box-Karten (Felgner-Stil), zentrierte Head, KEINE Verbindungslinie (v=80) */
.job-steps-head {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto clamp(36px, 5vw, 56px);
}

.job-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 30px);
}

.job-step {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 38px);
}

.job-step-num {
  position: absolute;
  top: -17px;
  left: clamp(24px, 3vw, 32px);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-primary);
}

.job-step-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--c-bg-alt);
  color: var(--c-primary);
  margin-bottom: var(--sp-4);
}

.job-step-ico svg {
  width: 26px;
  height: 26px;
}

.job-step h3 {
  font-size: 19px;
  color: var(--c-navy);
  margin-bottom: var(--sp-2);
}

.job-step p {
  color: var(--c-body);
  line-height: 1.6;
}

@media (max-width: 820px) {
  .job-steps {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Related „Alle offenen Stellen"-Link unter den Job-Cards */
.job-list-all {
  display: inline-flex;
  margin-top: clamp(24px, 3vw, 36px);
}
/* ===== Homepage „Leistungen im Überblick" — Service-Karussell (IA v2) ===== */
.leistcar{position:relative;overflow:hidden;background:var(--c-navy-ink)}
.leistcar::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(9,28,54,.92),rgba(6,20,40,.92)),url(/assets/img/global/dark-7.webp) center/cover no-repeat}
.leistcar>.container,.leistcar>.leistcar-track{position:relative;z-index:1}
.leistcar-head{display:flex;justify-content:space-between;align-items:flex-end;gap: var(--sp-6);margin-bottom:clamp(28px,3vw,44px)}
.leistcar-nav{display:flex;gap: var(--sp-2_5);flex-shrink:0}
.leistcar-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--c-border-dark);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.leistcar-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.leistcar-btn:disabled{opacity:.28;cursor:default}
.leistcar-btn svg{width:19px;height:19px}
.leistcar-track{display:flex;gap:clamp(16px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-inline:max(var(--gutter),calc((100% - var(--container))/2 + var(--gutter)));scroll-padding-left:max(var(--gutter),calc((100% - var(--container))/2 + var(--gutter)))}
.leistcar-track::-webkit-scrollbar{display:none}
.leistcar-card{flex:0 0 clamp(240px,22vw,300px);scroll-snap-align:start;position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--c-navy-deep);border:1px solid var(--c-border-dark);text-decoration:none;transition:transform .3s var(--ease-out),border-color .2s}
.leistcar-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.35)}
.leistcar-media{display:block;aspect-ratio:4/3;overflow:hidden}
.leistcar-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.leistcar-card:hover .leistcar-media img{transform:scale(1.05)}
.leistcar-name{display:flex;align-items:center;justify-content:space-between;gap: var(--sp-3);padding: var(--sp-4) 18px;color:#fff;font-size:15.5px;font-weight:500;line-height:1.3}
.leistcar-name .arr{color:var(--c-on-navy);flex-shrink:0;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.leistcar-card:hover .leistcar-name .arr{opacity:1;transform:none}
@media (max-width:640px){.leistcar-card{flex-basis:76vw}.leistcar-head{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.leistcar-track{scroll-behavior:auto}.leistcar-card,.leistcar-media img{transition:none}}

/* ===== Warum wir? — one-page (IA v2): Intro + 4 alternierende Text/Bild-Schritte ===== */
.ww-sec{scroll-margin-top:90px}
.ww-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.ww-row--flip .ww-media{order:-1}
.ww-body .job-facts{max-width:none;margin-top:var(--sp-6)}
.ww-media{position:relative;border-radius:var(--r-lg);overflow:hidden;align-self:stretch;min-height:clamp(380px,44vw,560px)}  /* v=148: USER - Bild soll hoeher stehen als die Textspalte (gemessen Body 427px, Media vorher 440px = nur 13px Unterschied) */
.ww-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.ww-row,.ww-row--flip{grid-template-columns:1fr;gap:28px}.ww-media,.ww-row--flip .ww-media{order:-1;min-height:0;aspect-ratio:4/3}}

/* ===== Prozess-Timeline (.proctl) — Desktop: horizontale Bild-Linie (a1); Mobil: vertikale Linie (a2/a3). Verlinkt auf /leistungen/warum-wir/ =====
   Kundenfeedback: in die vier Rundenelemente gehoeren Bilder. Die Fotos sind KEINE neuen Motive —
   es sind quadratische Ausschnitte genau der vier Bilder, die /leistungen/warum-wir/ fuer dieselben
   vier Schritte zeigt (die Karten verlinken ohnehin dorthin).
   Die ZIFFER bleibt als Badge auf dem Kreis: ohne sie verliert die Ueberschrift „In vier Schritten"
   ihren Bezug.
   ⚠️ Die Kreisgroesse steht als --proc-r an EINER Stelle; Polsterung, Verbindungslinie und
   Badge rechnen daraus. Frueher waren 50px an drei Stellen hart kodiert (padding-top 76,
   ::after top 25, mobil left 24) — wer eine davon vergisst, versetzt die Linie zum Kreis. */
.proctl { --proc-r: clamp(104px, 8.6vw, 140px); }
.proctl-head { text-align: center; max-width: 48ch; margin: 0 auto clamp(44px,6vw,80px); }
.proctl-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.proctl-step { position: relative; text-align: center; padding-top: calc(var(--proc-r) + 26px); }
.proctl-step::after { content: ""; position: absolute; top: calc(var(--proc-r) / 2); left: 50%; width: 100%; height: 1px; background: var(--c-border); z-index: 0; }
.proctl-step:last-child::after { display: none; }
.proctl-link { display: block; text-decoration: none; padding-inline: var(--sp-3); }
/* ⚠️ KEIN overflow:hidden — das Badge sitzt bewusst ueber der Kreiskante und wuerde sonst
   beschnitten. Die runde Maske traegt das <img> selbst. */
.proctl-fig { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: var(--proc-r); height: var(--proc-r); border-radius: 50%; background: var(--c-surface); box-shadow: 0 0 0 1px rgba(15, 23, 42, .10); z-index: 1; }
.proctl-fig img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.proctl-num { position: absolute; right: -2px; bottom: -2px; width: 36px; height: 36px; border-radius: 50%; background: var(--c-primary); color: #fff; display: grid; place-items: center; font-size: 13.5px; font-weight: 700; border: 2px solid var(--c-surface); z-index: 2; transition: background var(--t-fast) ease; }
.proctl-title { display: block; font-size: 18px; font-weight: 600; color: var(--c-navy); letter-spacing: -.01em; margin-bottom: var(--sp-2); }
.proctl-desc { display: block; font-size: 14.5px; line-height: 1.55; color: var(--c-muted); max-width: 30ch; margin-inline: auto; }
.proctl-link:hover .proctl-num { background: var(--c-navy); }
.proctl-link:hover .proctl-title { color: var(--c-primary); }
.proctl-link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 4px; border-radius: var(--r-sm); }
@media (max-width: 860px) {
  .proctl { --proc-r: 88px; }
  .proctl-track { display: block; }
  .proctl-step { text-align: left; padding: 0 0 clamp(30px,7vw,44px) calc(var(--proc-r) + 22px); min-height: var(--proc-r); }
  .proctl-step:last-child { padding-bottom: 0; }
  .proctl-step::after { top: var(--proc-r); left: calc(var(--proc-r) / 2); width: 1px; height: calc(100% - var(--proc-r)); }
  .proctl-fig { left: 0; transform: none; }
  .proctl-num { width: 28px; height: 28px; font-size: 12.5px; border-width: 2px; }
  .proctl-link { padding-inline: 0; }
  .proctl-desc { max-width: none; margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .proctl-num { transition: none; } }

/* ==========================================================================
   LAYOUT-SWEEP v=115 — Zwei-Spalten links↔rechts: Grid → FLEXBOX (Regel #8).
   Additiv & reversibel: `display:flex` überschreibt das frühere `display:grid`
   (gleiche Spezifität, später in der Quelle); `grid-template-columns` ist auf
   einem Flex-Container inert. fr-Verhältnisse → flex-grow (flex-basis:0%),
   Kind-Spalten sind selbst Flex-Items mit min-width:0. Mobil (≤900) stapeln alle
   (align-items:stretch → volle Breite, flex:0 1 auto → Inhaltshöhe).
   BEWUSST GRID geblieben: gleichgroße Raster (.bento/.svc-card-grid/.pstrip/
   .leistcar/repeat()-Grids), Datenzeilen (.fact-row/.risk/.laden-row/auto 1fr),
   das Formularraster .cform und die Overlap-Komposition .duel.
   Flip-Sektionen (Media-order) auf 1/1 vereinheitlicht (Ratios waren near-even),
   damit die Spaltenbreite dem DOM-Kind folgt statt der Gridspalte.
   Rückbau: diesen ganzen Block löschen.
   ========================================================================== */
.solve-grid, .ref-story, .catrow, .chapter, .catnote-grid, .notband-grid,
.explain-grid, .job-split, .job-cols, .ww-row,
.why-grid, .laden-grid, .audience--band .audience-grid, .cform-wrap,
.faq-grid, .risks-grid, .sysmap-grid, .hv2-grid, .kv2-formband-grid,
.final-panel {
  display: flex;
}
.solve-grid > *, .ref-story > *, .catrow > *, .chapter > *, .catnote-grid > *,
.notband-grid > *, .explain-grid > *, .job-split > *, .job-cols > *, .ww-row > *,
.why-grid > *, .laden-grid > *, .audience--band .audience-grid > *, .cform-wrap > *,
.faq-grid > *, .risks-grid > *, .sysmap-grid > *, .hv2-grid > *, .kv2-formband-grid > *,
.final-panel > * {
  min-width: 0;
}

/* --- 1/1 (symmetrisch oder Media-Flip) --- */
.solve-grid > *, .ref-story > *, .catrow > *, .chapter > *, .catnote-grid > *,
.notband-grid > *, .explain-grid > *, .job-split > *, .job-cols > *, .ww-row > * {
  flex: 1;
}

/* --- asymmetrisch, kein Flip: fr → flex-grow --- */
.why-grid > :nth-child(1) { flex: .9; }   .why-grid > :nth-child(2) { flex: 1.1; }
.laden-grid > :nth-child(1) { flex: .95; } .laden-grid > :nth-child(2) { flex: 1.05; }
.audience--band .audience-grid > :nth-child(1) { flex: .85; }
.audience--band .audience-grid > :nth-child(2) { flex: 1.15; }
.cform-wrap > :nth-child(1) { flex: .85; } .cform-wrap > :nth-child(2) { flex: 1.15; }
.faq-grid > :nth-child(1) { flex: .8; }    .faq-grid > :nth-child(2) { flex: 1.2; }
.risks-grid > :nth-child(1) { flex: .85; } .risks-grid > :nth-child(2) { flex: 1.15; }
.sysmap-grid > :nth-child(1) { flex: .8; } .sysmap-grid > :nth-child(2) { flex: 1.2; }
.hv2-grid > :nth-child(1) { flex: 1.05; }  .hv2-grid > :nth-child(2) { flex: .95; }
.kv2-formband-grid > :nth-child(1) { flex: .85; }
.kv2-formband-grid > :nth-child(2) { flex: 1.15; }

/* --- Spezialfall Final-CTA-Panel: Haupt fluid + feste Aside-Spalte --- */
.final-panel > :nth-child(1) { flex: 1 1 auto; }
.final-panel > :nth-child(2) { flex: 0 1 300px; min-width: 240px; }

/* --- Mobil ≤900: alle stapeln --- */
@media (max-width: 900px) {
  .solve-grid, .ref-story, .catrow, .chapter, .catnote-grid, .notband-grid,
  .explain-grid, .job-split, .job-cols, .ww-row,
  .why-grid, .laden-grid, .audience--band .audience-grid, .cform-wrap,
  .faq-grid, .risks-grid, .sysmap-grid, .hv2-grid, .kv2-formband-grid,
  .final-panel {
    flex-direction: column;
    align-items: stretch;
  }
  .solve-grid > *, .ref-story > *, .catrow > *, .chapter > *, .catnote-grid > *,
  .notband-grid > *, .explain-grid > *, .job-split > *, .job-cols > *, .ww-row > *,
  .why-grid > *, .laden-grid > *, .audience--band .audience-grid > *, .cform-wrap > *,
  .faq-grid > *, .risks-grid > *, .sysmap-grid > *, .hv2-grid > *, .kv2-formband-grid > *,
  .final-panel > * {
    flex: 0 1 auto;
  }
}

/* ==========================================================================
   LEISTUNGEN-SLIDER (.svcslide) v=116 — grosse Bildkarten mit Icon-Badge
   (Mega-Menü-Icon statt Nummer), Titel + Kurzbeschreibung, ganze Karte
   verlinkt; JS: infinite Autoplay (rechts) + Drag + Pfeile + Dots.
   ========================================================================== */
.svcslide {
  --card-w: 340px;
  --card-gap: 28px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(9, 28, 54, .92), rgba(6, 20, 40, .90)),
    url('/assets/img/global/dark-7.webp') center / cover no-repeat;
}
.svcslide-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: clamp(30px, 3.4vw, 48px);
}
.svcslide-nav { display: flex; gap: var(--sp-2_5); flex-shrink: 0; }
.svcslide-btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: transparent; color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.svcslide-btn svg { width: 22px; height: 22px; }
.svcslide-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
.svcslide-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* full-bleed viewport: the section is edge-to-edge, so the marquee bleeds to both screen
   edges; it starts with the first card flush to the left screen edge (JS: x = -W). */
.svcslide-viewport { width: 100%; overflow: hidden; }
.svcslide-track {
  display: flex;
  gap: var(--card-gap);
  cursor: grab;
  touch-action: pan-y;
  will-change: transform;
}
.svcslide-track.is-grabbing { cursor: grabbing; }

/* KARTEN-KOMPONENTE, kontextfrei (v=121). Ursprünglich nur die Slider-Karte; seit dem
   Branchen-Umbau trägt dasselbe Markup auch das statische 4x2-Raster auf der Startseite und
   auf /branchen/. Darum hier NUR das Aussehen — die Breite kommt vom Kontext:
   der Slider setzt sie fix, im Raster füllt die Karte ihre Spalte.
   Farben laufen über zwei Custom Properties, damit dieselbe Karte auf hellem UND dunklem
   Grund lesbar ist: Default = hell (/branchen/), `.on-dark` kippt sie (Startseite).
   NB: NICHT mit `.svc-card` verwechseln — das ist die weisse Bildkarte mit Chip + Namens-
   Overlay auf 25 anderen Seiten und bleibt unangetastet. */
.svccard {
  --svccard-title: var(--c-navy);
  --svccard-title-hover: var(--c-primary);
  --svccard-desc: var(--c-body);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  -webkit-user-drag: none;
}

.on-dark .svccard {
  --svccard-title: #fff;
  --svccard-title-hover: var(--c-accent);
  --svccard-desc: rgba(255, 255, 255, .68);
}

/* nur im Slider: feste Kartenbreite. Im Raster würde sie die Spalte sprengen. */
.svcslide-track > .svccard {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
}
.svccard-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
}
.svccard-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .8s var(--ease-out);
  -webkit-user-drag: none; user-select: none;
}
.svccard:hover .svccard-media img { transform: scale(1.05); }
.svccard-ico { position: absolute; top: 14px; left: 14px; z-index: 2; }
.svccard-ico .icon-chip {
  width: 42px; height: 42px; margin: 0;
  background: rgba(7, 26, 51, .68);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; border-radius: var(--r-sm);
  backdrop-filter: blur(4px);
}
.svccard-ico .icon-chip svg { width: 22px; height: 22px; }
.svccard-body { padding: 18px var(--sp-1) 0; }
/* line-height explizit: `.svccard-title` ist ein <span> und erbte sonst die Fliesstext-Zeile
   (1.65 = 31.35px bei 19px) — als Titel viel zu locker, und zweizeilige Namen liefen damit aus
   jeder Höhenreservierung. 1.3 ist die Titel-Zeile, aus der auch das min-height unten folgt. */
.svccard-title {
  display: block; color: var(--svccard-title);
  font-size: 19px; font-weight: 600; letter-spacing: -.01em;
  line-height: 1.3;
  transition: color var(--t-fast) ease;
}
.svccard:hover .svccard-title { color: var(--svccard-title-hover); }
.svccard-desc {
  display: block; margin-top: var(--sp-2);
  color: var(--svccard-desc);
  font-size: 14px; line-height: 1.5;
}

/* Im statischen Raster stehen die Karten in REIHEN: ein zweizeiliger Titel schoebe sonst nur
   seine eigene Beschreibung nach unten, und die Fliesstexte der Reihe stuenden versetzt.

   FRUEHER: `min-height: calc(2 * 1.3em)` am Titel — also fest zwei Zeilen reservieren.
   Das richtete zwar aus, kostete aber bei EINZEILIGEN Titeln eine tote Zeile (USER-Report auf
   /leistungen/: dort sind bei 3 Spalten ab ~1250px ALLE elf Titel einzeilig, die Reservierung
   war reiner Leerraum — gemessen 25px unter jedem Titel). Auf /branchen/ und im Bento bricht
   umgekehrt nur EINER von acht um, die anderen sieben trugen die Luecke mit.

   JETZT: subgrid. Die Karte uebernimmt drei Zeilen des Elternrasters (Bild / Titel / Text),
   der Body die unteren zwei. Damit richtet der Browser Titel und Fliesstext zeilenweise ueber
   die ganze Rasterzeile aus — exakt dann, wenn ein Titel umbricht, und OHNE Leerraum, wenn
   keiner umbricht. Kein `min-height` mehr noetig, auch kein Aufheben per Breakpoint.

   ⚠️ `grid-row: span 3` und `span 2` muessen zusammenpassen: Bild = Zeile 1, Body = Zeile 2–3.

   ⚠️ `row-gap: 0` an BEIDEN Subgrids ist Pflicht, kein Feinschliff. Ein Subgrid erbt sonst
   die Rinnen des Elternrasters — hier `gap: 32px` — und setzt sie ZWISCHEN die eigenen Zeilen:
   gemessen klafften dann 39px zwischen Titel und Fliesstext (32 Rinne + 8 Abstand). Die
   Subgrid-Regel darf ihre Rinnen ueberschreiben; der Abstand ZWISCHEN den Karten bleibt davon
   unberuehrt, weil er zu einer Zeilengrenze ausserhalb der Kartenspanne gehoert. */
/* v=199 (USER-Screenshot Startseite Branchen): Titel/Text werden NICHT mehr ueber die Reihe
   ausgerichtet. Brach ein Titel um („Hausverwaltungen & Wohnungswirtschaft"), bekamen die
   drei einzeiligen Nachbarn eine leere Titelzeile (gemessen 49px statt 25px) — sichtbar als
   Luecke zwischen Titel und Text. Jetzt nur noch 2 Subgrid-Zeilen: Bild ausgerichtet, der Body
   ist ein normaler Block, der Text folgt direkt dem eigenen Titel (8px). */
.bento-grid > .svccard,
.svc-card-grid > .svccard {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.bento-grid > .svccard > .svccard-body,
.svc-card-grid > .svccard > .svccard-body {
  display: block;
}

@media (max-width: 980px) {

  /* (Die fruehere `min-height: 0`-Aufhebung ist mit dem Wegfall der Reservierung
     gegenstandslos — subgrid braucht keinen Breakpoint.) */
}

.svcslide-dots {
  display: flex; justify-content: center; align-items: center;
  gap: 9px; margin-top: clamp(28px, 3vw, 44px);
}
.svcslide-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .28); cursor: pointer;
  transition: background var(--t-fast) ease, width var(--t-fast) ease;
}
.svcslide-dot.is-active { background: #fff; width: 24px; border-radius: 4px; }
.svcslide-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* HELLE Variante fuer die Leistungsseiten (Kundenfeedback: "Weitere Leistungen"
   soll ein Slider mit ALLEN Leistungen sein, wie auf der Startseite).
   Dunkel ginge dort nicht: direkt darueber liegt bereits das dunkle
   Systempartner-Band und darunter die dunkle Final-CTA — drei dunkle Baender
   in Folge. Die Karte selbst kann beides, sie faerbt sich ueber
   `--svccard-title`/`--svccard-desc` (v=121). */
.svcslide--light {
  background: var(--c-surface);
}

.svcslide--light .svcslide-btn {
  border-color: var(--c-border);
  color: var(--c-navy);
}

.svcslide--light .svcslide-btn:hover {
  background: var(--c-bg-alt);
  border-color: var(--c-primary);
}

.svcslide--light .svcslide-btn:focus-visible { outline-color: var(--c-primary); }
.svcslide--light .svcslide-dot { background: rgba(11, 37, 71, .22); }
.svcslide--light .svcslide-dot.is-active { background: var(--c-primary); }
.svcslide--light .svcslide-dot:focus-visible { outline-color: var(--c-primary); }

@media (max-width: 1100px) { .svcslide { --card-w: 300px; } }
@media (max-width: 700px) { .svcslide { --card-w: 80vw; --card-gap: 16px; } .svccard-title { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .svcslide-track { transition: none !important; }
  .svccard-media img { transition: none; }
}

/* ==========================================================================
   AKTUELLES (.post-*) v=127 — Archiv + Artikelseiten.
   Fast alles ist geerbt: `.ub-hero` (Archiv-Kopf), `.heroS` (Artikel-Kopf),
   `.svc-card`/`.svc-card-grid` (Karten + verwandte Beitraege), `.svc-band`
   (CTA im Artikel). Hier steht nur, was es dafuer noch nicht gab:
   Kategorie-Chip, Datum, die Feature-Karte und die Artikel-Typografie.

   ⚠️ `.prose` wurde BEWUSST NICHT erweitert: die Klasse ist auf Rechtstexte
   getrimmt (15px, nur h2 + p) und haengt an Impressum/Datenschutz/AGB — sie
   editorial zu machen haette diese drei Seiten mitverstellt. `.post-body`
   uebernimmt nur das 66ch-Mass und setzt eine eigene Leseskala.
   ========================================================================== */
.post-chip {
  display: inline-block;
  padding: 5px var(--sp-2_5);
  border-radius: var(--r-sm);
  background: var(--c-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* Auf der Bildkarte sitzt der Chip IM Bild — dort traegt ihn eine dunkle
   Glasflaeche statt Primaerblau, damit er auf jedem Foto liest. */
.svc-card-media .post-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(7, 26, 51, .72);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(4px);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  font-size: 13px;
  color: var(--c-muted);
}

.heroS .post-meta {
  color: var(--c-on-navy-2);
}

.post-date {
  font-size: 13px;
  color: var(--c-muted);
  margin-bottom: 6px;
}

.post-card-title {
  font-size: clamp(17px, 1.3vw, 19px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--c-navy);
  margin-bottom: var(--sp-2);
  /* Im Raster stehen die Karten in Reihen: zwei Zeilen reservieren, damit die
     Fliesstexte einer Reihe fluchten (gleiche Regel wie .svccard-title, s. v=121).
     Ab 980px gestapelt -> aufgehoben. */
  min-height: calc(2 * 1.35em);
}

/* ---- Feature-Karte (erster Beitrag im Archiv) ---- */
.post-feature {
  display: flex;
  align-items: stretch;
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(20px, 2.4vw, 32px);
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast) ease;
}

.post-feature:hover {
  border-color: rgba(38, 114, 185, .35);
}

.post-feature-media {
  flex: 1 1 46%;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.post-feature-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}

.post-feature:hover .post-feature-media img {
  transform: scale(1.04);
}

.post-feature-body {
  flex: 1 1 54%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 2.6vw, 44px) clamp(24px, 2.6vw, 44px) clamp(24px, 2.6vw, 44px) 0;
}

.post-feature-title {
  display: block;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--c-navy);
  margin-bottom: var(--sp-3);
}

.post-feature:hover .post-feature-title {
  color: var(--c-primary);
}

.post-feature-excerpt {
  display: block;
  max-width: 54ch;
  margin-bottom: var(--sp-6);
  color: var(--c-body);
}

.post-feature .link-arrow {
  align-self: flex-start;
}

/* ---- Artikel-Typografie ---- */
.post-body {
  max-width: 66ch;   /* gleiches Mass wie .prose */
}

.post-body > * + * {
  margin-top: var(--sp-5);
}

/* ⚠️ `.post-body .post-lead`, nicht `.post-lead`: die Regel `.post-body p` weiter
   unten ist Klasse+Typ (0,1,1) und schlaegt eine reine Klasse (0,1,0) — der Lead
   waere sonst stillschweigend auf 16px zurueckgefallen (gemessen). */
.post-body .post-lead {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.65;
  color: var(--c-navy-2);
}

.post-body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-body);
}

.post-body h2 {
  font-size: clamp(22px, 1.9vw, 27px);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--c-navy);
  margin-top: clamp(36px, 3.4vw, 52px);
}

.post-body ul {
  padding-left: 0;
  list-style: none;
}

.post-body li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-body);
}

.post-body li + li {
  margin-top: var(--sp-2);
}

.post-body li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
}

.post-body blockquote {
  margin: clamp(30px, 3vw, 44px) 0;
  padding-left: clamp(20px, 2vw, 28px);
  border-left: 3px solid var(--c-primary);
}

.post-body blockquote p {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
  font-weight: 500;
  color: var(--c-navy);
}

.post-body figure {
  margin: clamp(30px, 3vw, 44px) 0;
}

.post-body figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
}

.post-body figcaption {
  margin-top: var(--sp-2_5);
  font-size: 13px;
  color: var(--c-muted);
}

.post-body a:not(.btn) {
  color: var(--c-primary-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-stub-note {
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-alt);
  border-radius: var(--r-sm);
  font-size: 15px;
  color: var(--c-body);
}

@media (max-width: 980px) {
  .post-card-title {
    min-height: 0;   /* gestapelt gibt es keine Reihe zum Fluchten */
  }
}

@media (max-width: 900px) {
  .post-feature {
    flex-direction: column;
    align-items: stretch;
  }

  .post-feature-media {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
  }

  .post-feature-body {
    flex: 0 1 auto;
    padding: clamp(22px, 5vw, 30px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-feature-media img,
  .post-feature {
    transition: none;
  }

  .post-feature:hover .post-feature-media img {
    transform: none;
  }
}

/* ===== Bestellformular auf /bestellung/ (.order-form): Schritt-Gruppen + Auswahl-Pills (v=135).
   Baut auf .cform (Grid + Feld-Styling) + .apply-form (Karte). Nur diese Zusätze sind neu. ===== */
.order-form .order-step-lead {
  display: flex;
  align-items: center;
  gap: var(--sp-2_5);
  margin: var(--sp-5) 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: none;
  color: var(--c-navy);
}
.order-form .order-step-lead:first-child { margin-top: 0; }
.order-form .order-step {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.order-form .order-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.order-form .order-opt {
  display: block;
  margin: 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
}
.order-form .order-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.order-form .order-opt-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  padding: 15px 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.order-form .order-opt-box strong { font-size: 15.5px; font-weight: 600; color: var(--c-navy); }
.order-form .order-opt-box span { font-size: 12.5px; color: var(--c-muted); }
.order-form .order-opt input:checked + .order-opt-box {
  border-color: var(--c-primary);
  background: var(--c-bg-alt);
  box-shadow: inset 0 0 0 1px var(--c-primary);
}
.order-form .order-opt input:focus-visible + .order-opt-box {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
@media (max-width: 560px) {
  .order-form .order-choice { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------------------------------------------
   SYSTEMPARTNER — ZWEI GETRENNTE LAUFBAENDER (Kundenfeedback)
   Vorher: EINE Sektion mit Tabs, immer nur ein Band im Layout. Der Kunde wollte die beiden
   Gruppen getrennt sehen, jede mit eigener Ueberschrift, und beide sollen durchlaufen „wie bei
   Leistungen im Ueberblick" — also derselbe Marquee-Motor (window.BAUM.initMarquee), nur zweimal
   gleichzeitig statt einmal auf Knopfdruck.

   Ersatzlos entfallen sind damit die Tab-Nav, die Tab-Knoepfe, der gemeinsame Panel-Wrapper,
   der data-active-Zustand am Container und das refresh() beim Umschalten (ein Band im
   versteckten Tab hatte keine Layoutbreite und musste beim Sichtbarwerden neu vermessen
   werden — jetzt sind beide von Anfang an sichtbar und messen sich von selbst richtig).

   ⚠️ Die Zuordnung Lieferant/Partner steht NICHT hier und nicht im Markup, sondern als Map
   PARTNER_CAT in components.js — dort an einer einzigen Stelle aenderbar, gilt sofort auf allen
   drei Seiten (index, home-v2, ueber-uns).
   ------------------------------------------------------------------------------------------------ */
.pbands {
  background: var(--c-bg-alt);
}

/* Quell-Liste: das JS verteilt die Karten daraus auf die Baender und entfernt sie
   danach. Bleibt sie stehen (JS aus), zeigt sie schlicht alle Logos — brauchbarer
   Rueckfall statt einer leeren Sektion. */
.pband-source {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3_5);
  margin-top: clamp(28px, 3.5vw, 44px);
}

.pband {
  margin-top: clamp(36px, 4vw, 56px);
}

.pband-title {
  margin: 0;
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c-navy);
  text-align: center;
}

/* `.partner-marquee` bringt fuer den Solo-Einsatz ein grosszuegiges margin-top mit —
   unter einer eigenen Ueberschrift ist das zu viel Luft. */
.pband .partner-marquee {
  margin-top: clamp(16px, 1.8vw, 24px);
}

/* Platzhalter, bis der Kunde die echten Dateien liefert. Bewusst als gestrichelte Karte
   statt als nachgebautes Logo — ein selbst gesetzter Markenname saehe aus wie die echte
   Wortmarke und waere eine Behauptung, die wir nicht belegen koennen. Der Name steht jetzt
   ohnehin unter JEDER Karte (.partner-name); die Platzhalter-Karte zeigt oben nur den
   Hinweis. TODO: verify — <span class="ph-note"> gegen das echte <img> tauschen. */
.partner-card.is-ph {
  background: transparent;
  border-style: dashed;
  border-color: rgba(15, 23, 42, .16);
}

.ph-note {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ============================================================
   HERO heroB — DUNKLE VARIANTE (v=148)
   Der helle Wash von .heroB--center war ueber dem kontrastreichen
   Teamfoto auf /leistungen/warum-wir/ zu duenn: gemessen lag der Lead
   bei 2.85:1 (noetig 4.5) und musste per Inline-Farbe gerettet werden.
   Diese Variante dreht den Wash ins Dunkle — gleiche Basis rgba(5,15,30)
   wie .heroS, aber VERTIKAL/symmetrisch, weil der Inhalt hier zentriert
   ist (ein seitlicher Verlauf wie bei .heroS wuerde zentrierten Text zur
   Haelfte auf der hellen Seite stehen lassen).
   IMMER zusammen mit .on-dark am <header> verwenden — sonst bleiben
   H1/Lead dunkel auf dunkel.
   ============================================================ */
.heroB--dark .heroB-media::after,
.heroB--center.heroB--dark .heroB-media::after {
  background:
    linear-gradient(180deg, rgba(5, 15, 30, .82) 0%, rgba(5, 15, 30, .66) 46%, rgba(5, 15, 30, .88) 100%);
}

/* .on-dark deckt Farbe/Headings/eyebrow/em ab, aber NICHT Crumbs, Meta
   und den hellen btn-outline von .heroB — die kommen hier nach. */
.heroB--dark .crumbs { color: var(--c-on-navy-muted); }
.heroB--dark .crumbs a { color: var(--c-on-navy-2); }
.heroB--dark .crumbs a:hover { color: #fff; }
.heroB--dark .crumbs .sep { color: var(--c-border-dark); }
.heroB--dark .heroB-meta { color: var(--c-on-navy-muted); }
.heroB--dark .btn-outline {
  border-color: rgba(201, 216, 236, .35);
  background: transparent;
}

/* ============================================================
   ÜBER UNS — neues Layout (v=150)
   Neue Optik laeuft ueber eigene .ab-*-Klassen. ⚠️ Die .ub-*-Familie
   NICHT umschreiben: .ub-hero liegt auch auf aktuelles/home-v2/jobs/
   karriere, .ub-stats-card auf jobs+karriere, .ub-mission/.ub-gal auf
   karriere. Der Team-Slider weiter unten ist die EINZIGE bewusst
   geteilte Aenderung (User-Entscheid: /karriere/ bekommt sie mit).
   ============================================================ */

/* --- Hero: oben ausgerichtet ------------------------------------
   Das Teamfoto hat die Menschen im UNTEREN Drittel und offenen Himmel
   oben. Ein vertikal zentrierter Titel laege auf den Gesichtern. */
.heroB--top { align-items: flex-start; }
.heroB--top .heroB-content { padding-top: clamp(104px, 15vh, 168px); }

/* --- Wer wir sind: Statement + Collage --- */
.ab-intro-grid {
  display: flex;
  gap: clamp(32px, 4.5vw, 68px);
  align-items: center;
}
.ab-intro-copy { flex: 1 1 44%; min-width: 0; }
.ab-collage    { flex: 1 1 56%; min-width: 0; }

/* Fester Block-Ratio + gleich hohe Reihen: damit sitzt das Mosaik
   deterministisch, egal wie gross die Einzelbilder sind. */
.ab-collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
  aspect-ratio: 3 / 2;
}
.ab-collage figure {
  margin: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-bg-alt);
}
.ab-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-collage figure:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }   /* links hoch  */
.ab-collage figure:nth-child(2) { grid-area: 1 / 2 / 2 / 4; }   /* oben breit  */
.ab-collage figure:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
.ab-collage figure:nth-child(4) { grid-area: 2 / 3 / 3 / 4; }

/* --- Fakten-Band --- */
.ab-facts { background: var(--c-bg-alt); }

/* --- Vision/Motivation: Text ↔ Bild (Layout-Regel 8: Flex) --- */
.ab-split {
  display: flex;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ab-split > * { flex: 1 1 40%; min-width: 0; }
.ab-split--flip .ab-split-media { order: -1; }
.ab-split-media {
  position: relative;
  align-self: stretch;
  flex: 1 1 60%;
  min-height: clamp(340px, 34vw, 460px);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ab-split-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Text-breite Variante (Vision/Mission): zwei Textbloecke brauchen mehr Platz,
   darum Bild schmaler als der 60%-Standard von .ab-split-media. */
.ab-split--vm > * { flex: 1 1 54%; }
.ab-split--vm .ab-split-media { flex: 1 1 46%; min-height: clamp(440px, 42vw, 560px); }
.ab-vm-block + .ab-vm-block { margin-top: var(--sp-8); }
.ab-vm-block h3 { margin-bottom: var(--sp-4); }
.ab-points { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.ab-points li { position: relative; padding-left: 26px; margin-top: var(--sp-4); }
.ab-points li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-primary);
}
.ab-points strong { display: block; color: var(--c-text); }

/* --- Timeline ---------------------------------------------------
   Nachbau der JetElements-Optik: mittige Linie mit Fortschritts-
   fuellung, runde Punkte, Karten abwechselnd links/rechts. */
.ab-time { position: relative; max-width: 1060px; margin-inline: auto; }

.ab-time-line {
  position: absolute; left: 50%; top: 6px; bottom: 6px;
  width: 3px; transform: translateX(-50%);
  background: var(--c-border);
  border-radius: 2px;
}
.ab-time-fill {
  position: absolute; inset: 0;
  background: var(--c-primary);
  border-radius: 2px;
  transform-origin: top;
  transform: scaleY(var(--ab-progress, 0));
}

.ab-time-item {
  position: relative;
  display: flex;
  justify-content: flex-start;
  padding-bottom: clamp(26px, 3.4vw, 46px);
}
.ab-time-item:nth-child(even) { justify-content: flex-end; }
.ab-time-item:last-child { padding-bottom: 0; }

.ab-time-card {
  width: calc(50% - 46px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.2vw, 28px);
}
.ab-time-dot {
  position: absolute; left: 50%; top: 10px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--c-primary);
  /* v=158: war var(--c-bg) — existiert NIE, die border-Deklaration wurde komplett
     verworfen (gemessen: border-width 0px). Der Ring knockt den Punkt aus der Linie
     heraus, muss also den SEKTIONSGRUND treffen: die Timeline sitzt auf .section--alt
     (#EEF2F7), NICHT auf Weiss — --c-surface waere ein sichtbarer weisser Halo. */
  border: 3px solid var(--c-bg-alt);
  transform: translateX(-50%);
}
.ab-time-era {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--sp-3);
}
.ab-time-card h3 { font-size: clamp(19px, 1.5vw, 22px); margin-bottom: var(--sp-3); }
.ab-time-card p  { color: var(--c-body); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .ab-time-fill { transform: scaleY(1); }
}

@media (max-width: 900px) {
  .ab-intro-grid, .ab-split { flex-direction: column; align-items: stretch; }
  /* ⚠️ Pflicht beim Umklappen: in column-Richtung bezieht sich flex-basis auf die
     HOEHE. Ohne diesen Reset wuerde aus `flex: 1 1 56%` eine 56%-Hoehe und das
     aspect-ratio der Collage waere wirkungslos (gemessen: Ratio 0.5 statt 4/3).
     Gleiches Muster wie im LAYOUT-SWEEP v=115. */
  .ab-intro-grid > *, .ab-split > * { flex: 0 1 auto; min-height: 0; }
  /* min-height:0 ist das column-Gegenstueck zu min-width:0: ein Flex-Item hat
     per Default min-height:auto (= min-content) und ignoriert damit sein
     aspect-ratio. Gemessen: Collage 335x670 (Ratio 0.5) statt 4/3. */
  .ab-split--flip .ab-split-media { order: 0; }
  /* Mobil 2x2 statt 3-Spalten-Mosaik: im 3-Spalter waeren die Kacheln nur ~105px
     breit (gemessen) und damit unlesbar. 2x2 gibt ~163px pro Kachel. */
  .ab-collage {
    grid-template-columns: repeat(2, 1fr);
    aspect-ratio: 1 / 1;
  }
  .ab-collage figure:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  .ab-collage figure:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
  .ab-collage figure:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
  .ab-collage figure:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }

  .ab-time-line { left: 8px; transform: none; }
  .ab-time-item, .ab-time-item:nth-child(even) { justify-content: flex-end; }
  .ab-time-card { width: calc(100% - 40px); }
  .ab-time-dot { left: 8px; }
}

/* --- Team-Slider: aus Pfeil-Scroller wird Autoplay-Laufband ------
   ⚠️ GETEILT mit /karriere/ — bewusst, damit beide Seiten dieselbe
   Komponente fahren. Getrieben von window.BAUM.initMarquee(). */
.ub-team-vp {
  overflow: hidden;
  margin-top: clamp(32px, 4vw, 56px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ub-team-vp .ub-team-track {
  width: max-content;
  margin-top: 0;
  overflow: visible;
  padding-inline: 0;
  padding-bottom: 0;
  cursor: grab;
  touch-action: pan-y;
  will-change: transform;
}
.ub-team-vp .ub-team-track.is-grabbing { cursor: grabbing; }
.ub-team-vp .ub-team-card img { -webkit-user-drag: none; user-select: none; }

/* ============================================================================
   SEKTIONS-RHYTHMUS: Foto-Hintergrund mit hellem Schleier (.section--photo)
   Kundenfeedback (v=186, Pilot /branchen/privatkunden/): „Bild im Hintergrund /
   kein Bild / Bild …" soll sich abwechseln — zwei schlichte Flaechen hintereinander
   wirken langweilig. Regel: nie zwei schlichte Sektionen in Folge.
   Das Foto kommt PRO SEKTION ueber eine Custom Property:
     <section class="section section--photo" style="--sec-photo: url(ROOT-RELATIVER-PFAD)">
   ⚠️ Pfad root-relativ angeben (mit fuehrendem Slash) — ein relatives url() in einer
   Custom Property loest uneindeutig auf. (Kein Beispielpfad hier: tools/check_links.py
   liest url()-Angaben auch aus Kommentaren.)
   Heller Schleier (Palette von .heroB-media::after), damit die Seite ueberwiegend weiss
   bleibt und die Textfarben unveraendert tragen. KEIN `background-attachment: fixed`
   (iOS ignoriert es, Repaint-Ruckeln).
   `isolation` + `z-index:-1` legen das Foto hinter den Inhalt, ohne ein Kind anzufassen.
   Die Sektion behaelt ihre eigene Hintergrundfarbe als Rueckfall, falls das Bild fehlt.
   ============================================================================ */
.section--photo {
  position: relative;
  isolation: isolate;
}

.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* `--sec-wash-boost` (Default 0) hebt den Schleier pro Sektion an, wenn ein Foto hinter
     kleiner Schrift zu unruhig ist — GEMESSEN per Pixel-Sampling, nicht geschaetzt.
     Regel: Schleier anheben, NICHT die Textfarbe aendern. */
  background:
    linear-gradient(90deg,
      rgba(244, 247, 251, calc(.94 + var(--sec-wash-boost, 0))) 0%,
      rgba(244, 247, 251, calc(.90 + var(--sec-wash-boost, 0))) 45%,
      rgba(244, 247, 251, calc(.86 + var(--sec-wash-boost, 0))) 100%),
    var(--sec-photo) center / cover no-repeat;
}

/* ⚠️ Icon-Chips: der Default-Chip ist `--c-bg-alt` (#EEF2F7) — auf dem hellen Schleier
   (#F4F7FB) praktisch unsichtbar (gemessen, dieselbe Falle wie v=174/v=185).
   Primaerton-Tint wie `.rail .rail-item .icon-chip` und `.quickrows .icon-chip`. */
.section--photo .icon-chip {
  background: rgba(38, 114, 185, .12);
}

@media (max-width: 900px) {
  /* Spalten stapeln -> gleichmaessiger Schleier statt Links-rechts-Verlauf */
  .section--photo::before {
    background:
      linear-gradient(180deg,
        rgba(244, 247, 251, calc(.92 + var(--sec-wash-boost, 0))) 0%,
        rgba(244, 247, 251, calc(.90 + var(--sec-wash-boost, 0))) 100%),
      var(--sec-photo) center / cover no-repeat;
  }
}

/* ============================================================================
   BRANCHENSEITEN: „Worauf es ankommt" als 3 KARTEN (.risksec) + EINE Icon-Chip-Groesse
   USER (v=188): „Ausgangslage" und „Was zusammen wirkt" hatten dasselbe Layout
   (sticky Text links, Icon-Liste rechts) — direkt untereinander wirkte das doppelt.
   Jetzt: Kopf oben (Titel links, Lead rechts), darunter die immer genau 3 Punkte
   als gleichgrosse Karten -> GRID (Layout-Regel 8). „Was zusammen wirkt" bleibt die
   Liste mit Foto-Hintergrund. Die alten `.risks-grid/.risk`-Regeln sind ohne Markup
   wirkungslos und bleiben stehen (kein Rule-Stripper, v=125).
   ============================================================================ */
.risksec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 96px);
  margin-bottom: clamp(36px, 4vw, 56px);
}

.risksec-head .h2 {
  max-width: 18ch;
}

.risksec-head .lead {
  max-width: 52ch;
  margin: 0;
}

.risk-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 32px);
}

/* gefuellte Flaeche statt Border/Schatten (Design-Regeln) */
.risk-card {
  background: var(--c-bg-alt);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.4vw, 36px);
}

.risk-card h3 {
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.3;
  margin: var(--sp-5) 0 var(--sp-2_5);
}

.risk-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-body);
  margin: 0;
}

/* ⚠️ EINE Chip-Groesse fuer beide Sektionen (USER: „nicht konsistente Icon-Groessen").
   Vorher: Ausgangslage 40px / Radius 8 / Icon 22px, Systemliste 30px / Radius 4 / Icon 17px.
   Spezifitaet (0,3,1)+ schlaegt `.sysmap-item .s-head>.icon-chip` (0,3,0) und
   `.section--photo .icon-chip` (0,2,0) unabhaengig von der Reihenfolge. */
.risksec .risk-card > .icon-chip,
.sysmap .sysmap-item .s-head > .icon-chip {
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: var(--r-md);
  background: rgba(38, 114, 185, .12);
  color: var(--c-primary);
  flex-shrink: 0;
}

.risksec .risk-card > .icon-chip svg,
.sysmap .sysmap-item .s-head > .icon-chip svg {
  width: 20px;
  height: 20px;
}

.sysmap .sysmap-item .s-head {
  gap: var(--sp-4);
}

/* Beschreibung buendig unter dem Titel, nicht unter dem Chip */
.sysmap .sysmap-item > p {
  padding-left: calc(40px + var(--sp-4));
}

@media (max-width: 980px) {
  .risksec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
  }

  .risk-cards {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   SITE-WEITER ROLLOUT (v=189) — Bausteine
   (1) EIN Icon-Chip-Standard: 44px / Icon 22px / --r-md — der Wert des Basis-`.icon-chip`
       (components.css) und der Mehrheit aller Karten. Abweichler waren: Bildkarten-Chips
       (.svc-card-chip 40, .svccard-ico 42 + --r-sm) und die Branchenseiten-Chips (40, v=188).
       Zweite, bewusst kleinere Stufe NUR fuer Chips in einer Textzeile: 34px / 18px / --r-sm
       (Kontakt-Quickrows, Privat/Gewerbe-Spaltenkopf). Check-Bullets (18–20px) sind Listen-
       marker, keine Chips, und bleiben. Der 26px-Icon im weissen Partner-Logo-Chip ist eine
       eigene Komponente und bleibt.
   (2) Dunkle Foto-Variante .section--photo-dark (fuer Kennzahlen-/Team-Baender).
   ============================================================================ */
.svc-card-chip .icon-chip,
.svccard .svccard-ico .icon-chip,
.risksec .risk-card > .icon-chip,
.sysmap .sysmap-item .s-head > .icon-chip {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
}

.svc-card-chip .icon-chip svg,
.svccard .svccard-ico .icon-chip svg,
.risksec .risk-card > .icon-chip svg,
.sysmap .sysmap-item .s-head > .icon-chip svg {
  width: 22px;
  height: 22px;
}

/* Beschreibung in der Systemliste beginnt weiter unter dem Titel (Chip jetzt 44px) */
.sysmap .sysmap-item > p {
  padding-left: calc(44px + var(--sp-4));
}

/* Inline-Stufe: gleiche Groesse UND gleicher Radius an beiden Stellen */
.audience .audience-col[data-icon] > .icon-chip {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
}

.audience .audience-col[data-icon] > .icon-chip svg {
  width: 18px;
  height: 18px;
}

/* ---- Dunkle Foto-Sektion: Navy-Verlauf wie .bento ueber dem Foto ----
   Markup: class="section section--photo-dark on-dark" style="--sec-photo: url(ROOT-RELATIVER-PFAD)"
   `on-dark` bleibt am Element, damit Eyebrow/Titel/Text die bestehenden hellen Toene erben. */
.section--photo-dark {
  position: relative;
  isolation: isolate;
  background: var(--c-navy-deep, #071a33);
}

.section--photo-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(9, 28, 54, calc(.90 + var(--sec-wash-boost, 0))) 0%,
      rgba(6, 20, 40, calc(.92 + var(--sec-wash-boost, 0))) 100%),
    var(--sec-photo) center / cover no-repeat;
}

.section--photo-dark .icon-chip {
  background: rgba(255, 255, 255, .10);
  color: var(--c-on-navy-2);
}

/* ============================================================================
   ROLLOUT Phase 2 (v=190) — Leistungsseiten: Layout-Varianten, damit keine Layout-Art
   zweimal auf einer Seite steht.
   ============================================================================ */

/* „Komponenten im Überblick" als 2-spaltige Icon-LISTE (Icon links, keine Kartenflaeche) —
   die „Vorteile" direkt davor sind bereits ein Icon-Kartenraster. */
.rail.rail--list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 72px);
  row-gap: clamp(22px, 2.4vw, 32px);
}

.rail.rail--list .rail-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: start;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: 0;
}

.rail.rail--list .rail-item:hover {
  transform: none;
}

.rail.rail--list .rail-item > .icon-chip {
  grid-column: 1;
  grid-row: 1 / span 3;
  margin: 0;
}

.rail.rail--list .rail-item > :not(.icon-chip) {
  grid-column: 2;
}

.rail.rail--list .rail-item h3 {
  margin: 10px 0 var(--sp-1);
  font-size: 18px;
}

.rail.rail--list .rail-item p {
  font-size: 14.5px;
}

/* Brandmelde „Rauch- und Waermeabzug": nummeriertes Textraster OHNE Karten und Icons —
   unterscheidet sich von den Vorteil-Karten und der Komponenten-Liste. */
.rail.rail--numbered {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 3.5vw, 56px);
  row-gap: clamp(28px, 3vw, 44px);
}

.rail.rail--numbered .rail-item {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: 0;
}

.rail.rail--numbered .rail-item:hover {
  transform: none;
}

.rail.rail--numbered .rail-item .r-num {
  display: block;
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-primary);
  margin-bottom: var(--sp-3);
}

/* „Wo diese Leistung besonders gefragt ist" als kompakte Link-Chips statt Bildkarten —
   Bildkarten zeigt bereits der Leistungs-Slider auf derselben Seite. */
.branchen-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.branchen-link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: color var(--t-fast) ease;
}

.branchen-link > .icon-chip {
  margin: 0;
}

.branchen-link .arr {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--c-primary);
  transition: transform var(--t-fast) ease;
}

.branchen-link:hover {
  color: var(--c-primary);
}

.branchen-link:hover .arr {
  transform: translateX(4px);
}

.branchen-link:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

/* Chips in weissen Kacheln/Karten auf dem Foto-Schleier: Tint statt Weiss
   (`.catnote .bene .icon-chip` setzt sonst --c-surface = unsichtbar auf Weiss/Schleier). */
.section--photo .bene .icon-chip,
.section--photo .branchen-link > .icon-chip {
  background: rgba(38, 114, 185, .12);
}

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

@media (max-width: 767px) {
  .rail.rail--list,
  .rail.rail--numbered {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   ROLLOUT Phase 3 (v=191) — Kategorie-Seiten: „Privat/Gewerbe" als Fotoband
   Die Bildspalte ist raus, das Foto liegt als Hintergrund (dunkel via .section--photo-dark,
   auf Brand & Rauchschutz hell via .section--photo). Damit ist die Sektion kein Text↔Bild-
   Split mehr und doppelt die Zweispalte der `.catnote` nicht. Die zwei Zielgruppen stehen
   jetzt nebeneinander.
   ============================================================================ */
.audience--band.section--photo-dark .audience-grid,
.audience--band.section--photo .audience-grid {
  display: block;
}

.audience--band.section--photo-dark .audience-cols,
.audience--band.section--photo .audience-cols {
  flex-direction: row;
  align-items: stretch;
  gap: clamp(32px, 5vw, 96px);
}

.audience--band.section--photo-dark .audience-col,
.audience--band.section--photo .audience-col {
  flex: 1 1 0;
  min-width: 0;
}

.section--photo-dark .audience-col h3 {
  color: #fff;
}

.section--photo-dark .audience-col p {
  color: var(--c-on-navy);
}

.section--photo-dark .audience-col .eyebrow,
.section--photo-dark .audience-col .link-arrow {
  color: var(--c-on-navy-2);
}

@media (max-width: 900px) {
  .audience--band.section--photo-dark .audience-cols,
  .audience--band.section--photo .audience-cols {
    flex-direction: column;
  }
}

/* ============================================================================
   ROLLOUT Phase 3b (v=192) — Links auf hellen Foto-Sektionen
   GEMESSEN: --c-primary (#2672B9, 15px) erreichte auf dem Schleier nur 3.75:1 und blieb
   selbst mit Schleier +.08 unter 4.5:1. --c-primary-text (#1F5C96) ist genau fuer
   blauen Text auf nicht-weissem Grund eingefuehrt (v=83) — Link bleibt blau erkennbar.
   ============================================================================ */
.section--photo .link-arrow {
  color: var(--c-primary-text);
}

/* ============================================================================
   ROLLOUT Phase 5 (v=193) — /ueber-uns/
   ============================================================================ */
/* Anspruch + Kennzahlen: dunkles Foto-Band, Text links, 2x2-Zahlen rechts.
   ⚠️ Streng auf .ab-claim gescopet: .ub-stats-card liegt auch auf /karriere/ und /jobs/ (weisse Karte). */
.ab-claim-grid {
  display: flex;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.ab-claim-copy { flex: 1 1 54%; min-width: 0; }
.ab-claim .ab-claim-stats {
  flex: 1 1 46%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.ab-claim .ub-stat {
  background: rgba(255, 255, 255, .06);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 40px) 16px;
}
.ab-claim .ub-stat-num { color: #fff; font-size: clamp(34px, 3.4vw, 50px); }
.ab-claim .ub-stat-label { color: var(--c-on-navy-2); font-size: 13px; }
/* .ab-points strong setzt --c-text und steht nach base.css — auf dunklem Grund zurueckdrehen */
.ab-claim .ab-points strong { color: #fff; }
.ab-claim .ab-points li::before { background: var(--c-accent); }

/* Team-Laufband auf dunklem Foto-Band: der Lead ist fest --c-muted (0,2,0) */
.ub-team.section--photo-dark .ub-team-head .lead { color: var(--c-on-navy); }

/* Timeline auf hellem Schleier: der Ring um den Punkt muss den Schleier treffen, nicht --c-bg-alt */
.section--photo .ab-time-dot { border-color: #F4F7FB; }

/* Vision & Mission: zwei Karten statt Bild↔Text */
.ab-vm-head { text-align: center; max-width: 58ch; margin-inline: auto; }
.ab-vm-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(32px, 4vw, 56px);
}
.ab-vm-cards .ab-vm-block {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
}
.ab-vm-cards .ab-vm-block + .ab-vm-block { margin-top: 0; }

@media (max-width: 900px) {
  .ab-claim-grid { flex-direction: column; align-items: stretch; }
  .ab-claim-grid > * { flex: 0 1 auto; }
}
@media (max-width: 767px) {
  .ab-vm-cards { grid-template-columns: 1fr; }
}

/* ---- Phase 5b (v=194) — /karriere/, /jobs/, Stellenseiten ---- */
/* Werte als nummerierte Karten: unterscheidet sich von den offenen Icon-Spalten der Benefits */
.values--cards { gap: clamp(20px, 2.4vw, 32px); }
.values--cards > div {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.8vw, 36px);
}
.values--cards .v-num {
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-4);
}

/* Bewerbungsprozess: .proctl-Zeitleiste mit Ziffern statt Fotos, ohne Link */
.proctl--num { --proc-r: clamp(76px, 6vw, 96px); }
.proctl--num .proctl-track { grid-template-columns: repeat(3, 1fr); }
.proctl-item { display: block; padding-inline: var(--sp-3); }
.proctl-fig--num {
  display: grid;
  place-items: center;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 650;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
@media (max-width: 860px) {
  .proctl--num { --proc-r: 64px; }
  .proctl-item { padding-inline: 0; }
}

/* Initiativbewerbung hell (nur /jobs/): dort folgt direkt die dunkle Final-CTA */
.notband.section--photo .bignum { color: var(--c-navy); }
.notband.section--photo .bignum span { color: var(--c-primary); }
.notband.section--photo p { color: var(--c-body); }
.notband.section--photo .tech-label { color: var(--c-muted); }

/* ============================================================================
   ROLLOUT Phase 6 (v=195) — warum-wir, downloadbereich, kontakt, referenzen, aktuelles
   ============================================================================ */
/* warum-wir 02: dunkles Foto-Band, die drei Punkte nebeneinander */
.ww-band-head { max-width: 62ch; }
.job-facts.ww-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  max-width: none;
  margin-top: clamp(32px, 4vw, 56px);
}
.job-facts.ww-cols li + li { margin-top: 0; }
.job-facts.ww-cols li strong { display: block; margin-bottom: var(--sp-1); }
.on-dark .job-facts li { color: var(--c-on-navy); }
.on-dark .job-facts li strong { color: #fff; }

/* warum-wir 03: breiter Bildstreifen, darunter Kopf links / Liste rechts */
.ww-strip {
  position: relative;
  height: clamp(220px, 24vw, 380px);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ww-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ww-duo {
  display: flex;
  gap: clamp(32px, 5vw, 80px);
  align-items: flex-start;
  margin-top: clamp(32px, 4vw, 56px);
}
.ww-duo > * { flex: 1 1 50%; min-width: 0; }
.ww-duo .job-facts { max-width: none; }

/* warum-wir 04: zentrierter Kopf, Liste als weisse Karte auf dem Schleier */
.ww-center-head { text-align: center; max-width: 62ch; margin-inline: auto; }
.ww-center-head .lead { margin-inline: auto; }
.job-facts.ww-card {
  max-width: 820px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
}

/* downloadbereich: Zertifikate als Dokumentkarten */
.doc-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(28px, 3.5vw, 44px);
}
.doc-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 32px);
  text-decoration: none;
}
.doc-card h3 { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.35; color: var(--c-navy); transition: color var(--t-fast) ease; }
.doc-card:hover h3 { color: var(--c-primary); }
.doc-card .r-meta { font-size: 13px; color: var(--c-muted); }
.doc-card .link-arrow { margin-top: auto; }

/* Dokumente | Handouts nebeneinander — die ids sitzen auf den Spalten (Nav-Anker) */
.doc-split { display: flex; gap: clamp(32px, 4vw, 64px); align-items: flex-start; }
.doc-col { flex: 1 1 50%; min-width: 0; scroll-margin-top: 90px; }
.doc-split .rowitem { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; border-radius: var(--r-md); }
.doc-split .rowitem .r-idx { display: none; }
.doc-split .rowitem h3 { grid-column: 1; grid-row: 1; }
.doc-split .rowitem .r-meta { grid-column: 1; grid-row: 2; }
.doc-split .rowitem .link-arrow { grid-column: 2; grid-row: 1 / 3; }

/* AGB als kompakte Download-Chips */
.doc-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: clamp(24px, 3vw, 40px); }
.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 16px;
  background: var(--c-bg-alt);
  border-radius: var(--r-md);
  color: var(--c-navy);
  text-decoration: none;
  transition: background-color var(--t-fast) ease;
}
.doc-chip:hover { background: var(--c-bg-alt-hover); }
.doc-chip-name { font-size: 15px; font-weight: 600; }
.doc-chip-meta { font-size: 12.5px; color: var(--c-muted); }
.doc-chip svg { color: var(--c-primary); flex-shrink: 0; }

@media (max-width: 980px) {
  .doc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .job-facts.ww-cols { grid-template-columns: 1fr; }
  .job-facts.ww-cols li + li { margin-top: clamp(13px, 1.5vw, 19px); }
  .ww-duo, .doc-split { flex-direction: column; align-items: stretch; }
  .ww-duo > *, .doc-col { flex: 0 1 auto; }
}
@media (max-width: 600px) {
  .doc-cards { grid-template-columns: 1fr; }
  .doc-chip { width: 100%; }
}
/* v=196: die neuen Koepfe haben keinen .ww-body-Rhythmus mehr — Lead klebte am Titel (gemessen 0px) */
.ww-band-head .lead, .ww-duo-head .lead, .ww-center-head .lead { margin-top: var(--sp-5); }

/* ============================================================================
   v=197 — /kontakt/: Google-Rezensionen als Slider auf dunklem Band (.svcslide--reviews)
   Engine + Band-Hintergrund (dark-7) kommen von .svcslide; hier nur Karte + Wertungskopf.
   Inhalt = echte Google-Rezensionen (seit v=232), kopiert aus der Startseiten-Karte
   von tools/add_kontakt_reviews.py --replace.
   ============================================================================ */
.svcslide--reviews { --card-w: clamp(300px, 28vw, 400px); }
.grev-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2_5) var(--sp-3);
  margin-top: var(--sp-5);
}
.grev-score .g-icon { flex-shrink: 0; }
.grev-score .g-stars { margin-left: 0; }
.grev-score-num { font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: #fff; }
.grev-score-sub { font-size: 13px; color: var(--c-on-navy-2); }

.svcslide-track > .grev-card {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
}
.grev-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 32px);
}
.grev-card .g-stars { margin-left: 0; }
.grev-card blockquote { margin: 0; font-size: 15px; line-height: 1.65; color: var(--c-body); }
.grev-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: var(--sp-2); }
.grev-avatar {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-bg-alt); color: var(--c-primary);
  font-size: 15px; font-weight: 600;
}
.grev-name { display: block; font-size: 14.5px; font-weight: 600; color: var(--c-navy); }
.grev-meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--c-muted); }
.svcslide-track.is-grabbing .grev-card { user-select: none; }

@media (max-width: 767px) {
  .svcslide--reviews { --card-w: 82vw; }
}

/* ============================================================================
   v=201 — Startseite „Sicherheitsladen" (USER-Screenshot): Reihenfolge Zeiten · Tel · Mail ·
   Adresse, keine Linie über der ersten / unter der letzten Zeile, Hinweis „Abholungen …" raus.
   Tel/Mail/Adresse sind klickbar — der Link spannt per ::after über die GANZE Zeile.
   Gescopet auf .laden-info: die /kontakt/-Standortkarte nutzt .laden-rows ebenfalls.
   ============================================================================ */
.laden-info .laden-rows { border-top: 0; }
.laden-info .laden-row:last-child { border-bottom: 0; }

.laden-row--link { position: relative; }
.laden-row--link dd a {
  color: var(--c-text);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}
.laden-row--link dd a::after { content: ""; position: absolute; inset: 0; }
.laden-row--link .icon-chip { transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.laden-row--link:hover dd a,
.laden-row--link:focus-within dd a { color: var(--c-primary-text); }
.laden-row--link:hover .icon-chip,
.laden-row--link:focus-within .icon-chip { background: var(--c-primary); color: #fff; }
.laden-row--link dd a:focus-visible { outline: none; }
.laden-row--link:has(a:focus-visible) {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ============================================================================
   v=204 (USER) — Brandmeldeanlagen „Rauch- und Wärmeabzug": Kopf + Text links (60 %),
   Regelwerke rechts (40 %) über die VOLLE Höhe des linken Blocks — Label oben auf Höhe der
   Eyebrow, die drei Karten teilen sich die Höhe bis zur letzten Textzeile. Die 6 nummerierten
   Karten bleiben volle Breite darunter. Modifier, damit andere .sectext-split unberührt bleiben.
   ============================================================================ */
.sectext-split--head { align-items: stretch; }
.sectext-split--head > .sectext-main { flex: 0 1 60%; min-width: 0; }
.sectext-split--head > .sectext-main > .sectext { max-width: 68ch; }
.sectext-split--head > .sectext-aside {
  flex: 0 1 40%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sectext-split--head .normrow--stack { flex: 1 1 auto; grid-auto-rows: 1fr; }
.sectext-split--head .norm-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* v=205 (USER): gleiche Polsterung rundum — der Basiswert (20/20/16) sass in der gestreckten
     Karte optisch unten zu knapp und links zu eng. */
  padding: clamp(22px, 2.2vw, 32px);
}

/* v=206 (USER) — „Ihre Vorteile" auf /brandmeldeanlagen/ als dunkles Foto-Band.
   `.bene-item p` setzt --c-body fest und schlüge die geerbte .on-dark-Farbe. */
.section--photo-dark .bene-item p { color: var(--c-on-navy); }
.section--photo-dark .bene-item h3 { color: #fff; }
/* `.catnote .bene .icon-chip` (components.css, 0,3,0) macht den Chip WEISS — mit dem hellen
   on-dark-Icon darauf wäre er unsichtbar. Gleiche Spezifität, später geladen → gewinnt. */
.section--photo-dark .bene .icon-chip { background: rgba(255, 255, 255, .10); color: var(--c-on-navy-2); }

/* v=209 (USER „Container-Padding konsistent") — zwei Ausreisser aus dem Site-Audit:
   (1) /referenzen/: `.refgrid` bringt margin-top 44px für den Abstand zum Kopf mit — steht es als
       ERSTES in der Sektion (kein Kopf), addierte sich das auf die 132px Polsterung (gemessen 176).
   (2) Artikel: das letzte Element im Fliesstext (z. B. Zitat, margin-bottom 44px) verlängerte das
       Sektionsende auf 166px. */
.container > .refgrid:first-child { margin-top: 0; }
.post-body > :last-child { margin-bottom: 0; }

/* ============================================================================
   v=210 (USER) — /tuer-schloss-beschlagtechnik/ „Mechanischer Einbruchschutz": Text links, Foto
   rechts in voller Höhe des Textblocks (Flex, Layout-Regel 6/8). Mobil gestapelt, Foto 4:3.
   ============================================================================ */
.sectext-split--media { align-items: stretch; gap: clamp(40px, 5vw, 88px); }
.sectext-split--media > .sectext-main { flex: 1 1 55%; min-width: 0; }
.sectext-split--media > .sectext-media {
  position: relative;
  flex: 1 1 45%;
  min-width: 0;
  min-height: clamp(420px, 36vw, 620px);
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sectext-split--media > .sectext-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
@media (max-width: 900px) {
  .sectext-split--media > .sectext-media { min-height: 0; aspect-ratio: 4 / 3; }
}

/* v=211 (USER): /leistungen/warum-wir/ Schritt 01 wie die Startseiten-Intro "Sicherheitstechnik aus Dresden · seit 1990":
   Text 40 % / Bild 60 %, gleicher Spaltenabstand, Bild 600px hoch. Steht nach dem Layout-Sweep (dort .ww-row > * { flex: 1 }). */
.ww-row { gap: clamp(40px, 6vw, 96px); }
.ww-row > .ww-body { flex: 1 1 40%; }
.ww-row > .ww-media { flex: 1 1 60%; min-height: 600px; }
@media (max-width: 900px) {
  .ww-row > .ww-body, .ww-row > .ww-media { flex: 0 1 auto; }
  .ww-row > .ww-media { min-height: 0; }
}

/* v=212 (USER): /leistungen/warum-wir/ Schritt 02 — Lead rechts neben dem Titel, die drei Punkte als Karten.
   Kopf wie .risksec-head (Titel links, Lead rechts, unten ausgerichtet); Karten = durchscheinende Fläche auf dem dunklen Foto-Band. */
.ww-band-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 96px);
}
.ww-band-head--split > div { flex: 1 1 45%; min-width: 0; }
.ww-band-head--split > .lead { flex: 1 1 55%; min-width: 0; max-width: 60ch; margin: 0; }
.job-facts.ww-cols--cards { gap: clamp(16px, 2vw, 32px); }
.job-facts.ww-cols--cards li {
  padding: clamp(24px, 2.4vw, 36px);
  padding-left: calc(clamp(24px, 2.4vw, 36px) + 36px);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
}
.job-facts.ww-cols--cards li::before {
  left: clamp(24px, 2.4vw, 36px);
  top: calc(clamp(24px, 2.4vw, 36px) + .12em);
}
@media (max-width: 900px) {
  .ww-band-head--split { flex-direction: column; align-items: stretch; gap: var(--sp-5); }
  .ww-band-head--split > div, .ww-band-head--split > .lead { flex: 0 1 auto; }
  .job-facts.ww-cols--cards li + li { margin-top: 0; }
}

/* v=213 (USER): /leistungen/warum-wir/ Schritt 03 — zwei Fotos nebeneinander statt EINES breiten Bildstreifens
   (der Streifen schnitt beim Montagefoto die Köpfe ab). Links Montage (Servicewagen), rechts Inbetriebnahme (Prüfung an der Zentrale). */
.ww-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
}
.ww-pair-item {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ww-pair-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
@media (max-width: 640px) {
  .ww-pair { grid-template-columns: 1fr; }
}

/* v=214/215 (USER): /leistungen/warum-wir/ Schritt 04 als Bento auf dem hellen Foto-Schleier —
   Kopf-Karte (2 Spalten) · 24h-Kachel dunkel (2 Zeilen hoch, ganze Kachel -> /kontakt/) · 2 Leistungskarten mit Icon.
   Kein Hintergrundbild in der Kachel (svc-wartung liegt schon im Sektionsgrund). Hell, weil danach die dunkle Final-CTA folgt. */
.ww-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "head head tile" "c1 c2 tile";
  gap: clamp(16px, 2vw, 24px);
}
.ww-bento-head { grid-area: head; }
.ww-bento-tile { grid-area: tile; }
/* nth-child, nicht nth-of-type: die 24h-Kachel ist ein <a>, nth-of-type zaehlt nur die <div>s und vertauschte die Karten */
.ww-bento > .ww-bento-card:nth-child(3) { grid-area: c1; }
.ww-bento > .ww-bento-card:nth-child(4) { grid-area: c2; }
.ww-bento-head, .ww-bento-card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
}
.ww-bento-head { padding: clamp(28px, 3.2vw, 48px); }
.ww-bento-head .h2 { max-width: 20ch; }
.ww-bento-head .lead { margin-top: var(--sp-5); max-width: 60ch; }
.ww-bento-card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 36px);
}
.ww-bento-card h3 {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.3;
  font-weight: 600;
  color: var(--c-navy);
}
.ww-bento-card p { margin: 0; color: var(--c-body); font-size: var(--fs-lead); line-height: 1.62; }
.ww-bento-tile {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.2vw, 48px);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #123A75 0%, #0B2547 100%);
  color: #fff;
  text-decoration: none;
  transition: transform var(--t-ui, .2s) ease;
}
.ww-bento-num {
  font-size: clamp(64px, 7vw, 112px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
}
.ww-bento-label { margin-top: var(--sp-4); font-size: clamp(18px, 1.4vw, 21px); font-weight: 600; line-height: 1.3; color: #fff; }
.ww-bento-text { margin-top: var(--sp-2); font-size: var(--fs-lead); line-height: 1.62; color: var(--c-on-navy); }
.ww-bento-link { margin-top: auto; padding-top: var(--sp-8); font-weight: 600; color: var(--c-on-navy-2); }
.ww-bento-link span { display: inline-block; transition: transform var(--t-ui, .2s) ease; }
.ww-bento-tile:hover .ww-bento-link, .ww-bento-tile:focus-visible .ww-bento-link { color: #fff; }
.ww-bento-tile:hover .ww-bento-link span, .ww-bento-tile:focus-visible .ww-bento-link span { transform: translateX(4px); }
.ww-bento-tile:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
@media (max-width: 980px) {
  .ww-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "head head" "tile tile" "c1 c2"; }
}
@media (max-width: 640px) {
  .ww-bento { grid-template-columns: 1fr; grid-template-areas: "head" "tile" "c1" "c2"; }
}

/* v=216 (USER): /leistungen/warum-wir/ grosse Deko-Ziffern 01-04 wie .svc-ghost auf den Leistungsseiten.
   Sitzt im Kopf jedes Schritts hinter dem Text (isolation + z-index:-1), aria-hidden. */
.ww-body, .ww-band-head--split > div, .ww-duo-head, .ww-bento-head { position: relative; isolation: isolate; }
.ww-ghost {
  position: absolute;
  right: 0;
  top: -0.32em;
  z-index: -1;
  font-size: clamp(110px, 14vw, 210px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--c-bg-alt);
  user-select: none;
  pointer-events: none;
}
.on-dark .ww-ghost { color: rgba(255, 255, 255, .05); }
.ww-bento-head { overflow: hidden; }
.ww-bento-head .ww-ghost { top: clamp(12px, 1.6vw, 24px); right: clamp(20px, 2.4vw, 40px); font-size: clamp(96px, 11vw, 180px); }
@media (max-width: 900px) {
  .ww-ghost { font-size: clamp(88px, 24vw, 140px); top: -0.2em; }
}

/* v=217 (USER): /referenzen/ „Weitere zufriedene Kunden" + „Zahlen" zu EINER Sektion zusammengelegt.
   Kopf: Titel links, die drei Kennzahlen als weisse Karte rechts; darunter die 14 Kunden als Kachelwand
   (4 pro Reihe, letzte Reihe zentriert). Alle Fliesstexte auf deckendem Weiss -> Kontrast unabhaengig vom Foto. */
.refclients-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 96px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.refclients-title { flex: 1 1 40%; min-width: 0; }
.refclients-title .h2 { max-width: 18ch; }
.refclients-stats {
  flex: 1 1 60%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  list-style: none;
  margin: 0;
  padding: clamp(24px, 2.6vw, 40px);
  background: var(--c-surface);
  border-radius: var(--r-lg);
}
.refclients-stats li { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.refclients-stats .mf-num {
  font-size: clamp(40px, 4.2vw, 60px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
}
.refclients-stats .mf-num sup { font-size: .5em; color: var(--c-primary); }
.refclients-stats .rc-label { font-size: 14px; line-height: 1.5; color: var(--c-body); max-width: 26ch; }
.refclients-wall {
  --rc-gap: clamp(12px, 1.4vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rc-gap);
}
.refclients-wall li {
  flex: 0 0 calc((100% - 3 * var(--rc-gap)) / 4);
  min-width: 0;
  min-height: clamp(84px, 6vw, 104px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px clamp(18px, 1.8vw, 26px);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-navy);
}
.refclients-wall li::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 28px;
  border-radius: 2px;
  background: var(--c-primary);
}
@media (max-width: 980px) {
  .refclients-head { flex-direction: column; align-items: stretch; }
  .refclients-title, .refclients-stats { flex: 0 1 auto; }
  .refclients-wall li { flex-basis: calc((100% - var(--rc-gap)) / 2); }
}
@media (max-width: 640px) {
  .refclients-stats { grid-template-columns: 1fr; }
  .refclients-wall li { flex-basis: 100%; min-height: 0; }
}

/* v=218 (USER): zentrierte Heroes auf /leistungen/warum-wir/, /bestellung/, /ueber-uns/, /downloadbereich/
   mit schmalem Textblock — Inhaltsbreite max. 680px (plus Gutter), H1 und Lead fuellen diese Breite. */
.heroB--narrow .heroB-content { max-width: calc(680px + 2 * var(--gutter)); }
.heroB--narrow .heroB-content .h1,
.heroB--narrow .heroB-content .lead { max-width: none; }

/* v=221 (USER): /kontakt/ Anfrageformular mit Themenwahl (gleiche Auswahl-Kacheln wie /bestellung/, dort auf .order-form gescopet).
   "Initiativbewerbung" blendet Firma/PLZ/Gebaeudetyp aus (JS setzt [hidden]) und zeigt den Lebenslauf-Hinweis. */
.cform [hidden] { display: none !important; }
.cform-topics { border: 0; margin: 0; padding: 0; min-width: 0; }
.cform-topics legend {
  display: block;
  padding: 0;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.cform-topics .order-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.cform-topics .order-opt { position: relative; display: block; margin: 0; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: inherit; }
.cform-topics .order-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; min-height: 0; padding: 0; }
.cform-topics .order-opt-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  padding: 13px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.cform-topics .order-opt-box strong { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--c-navy); }
.cform-topics .order-opt-box span { font-size: 12.5px; line-height: 1.4; color: var(--c-muted); }
.cform-topics .order-opt input:checked + .order-opt-box { border-color: var(--c-primary); background: var(--c-bg-alt); box-shadow: inset 0 0 0 1px var(--c-primary); }
.cform-topics .order-opt input:focus-visible + .order-opt-box { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.cform-bew-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--c-body); }
@media (max-width: 1180px) { .cform-topics .order-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .cform-topics .order-choice { grid-template-columns: 1fr; } }

/* ============================================================================
   v=222 (USER) — Artikelseiten: Text links (66ch), sticky Seitenleiste rechts
   Inhalt (nur bei >= 2 H2, aktiver Eintrag per main.js) · Kontaktkarte · Weitere Beitraege.
   Sticky nur, wenn die Leiste in den Viewport passt (min-height 820px). tools/post_sidebar.py
   ============================================================================ */
.post-layout {
  display: flex;
  justify-content: space-between;
  gap: clamp(40px, 6vw, 120px);
}
.post-layout > .post-body { flex: 0 1 66ch; min-width: 0; }
.post-body h2[id] { scroll-margin-top: 100px; }
.post-aside {
  flex: 0 0 clamp(280px, 24vw, 360px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.post-aside-main { flex: 1 1 auto; }
.post-aside-sticky { display: flex; flex-direction: column; gap: var(--sp-5); }
@media (min-width: 981px) and (min-height: 700px) {
  .post-aside-sticky { position: sticky; top: 108px; }
}
.post-aside-title {
  margin: 0 0 var(--sp-3);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-primary-text);
}
.post-toc, .post-more {
  padding: clamp(22px, 2vw, 28px);
  background: var(--c-bg-alt);
  border-radius: var(--r-lg);
}
.post-toc ol, .post-more ul { list-style: none; margin: 0; padding: 0; }
.post-toc a {
  display: block;
  padding: 7px 0 7px 14px;
  margin-left: -14px;
  border-left: 2px solid transparent;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--c-body);
  text-decoration: none;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.post-toc li { padding-left: 14px; }
.post-toc a:hover { color: var(--c-primary-text); }
.post-toc a[aria-current="true"] { color: var(--c-navy); font-weight: 600; border-left-color: var(--c-primary); }
.post-contact {
  padding: clamp(24px, 2.2vw, 32px);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #123A75 0%, #0B2547 100%);
}
.post-contact .post-aside-title { color: var(--c-on-navy-2); }
.post-contact p:not(.post-aside-title) { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--c-on-navy); }
.post-contact-tel {
  display: block;
  margin: var(--sp-3) 0 var(--sp-5);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  text-decoration: none;
}
.post-contact-tel:hover { color: var(--c-on-navy-2); }
.post-contact .btn { width: 100%; justify-content: center; }
.post-more li + li { margin-top: var(--sp-4); }
.post-more a { display: block; text-decoration: none; }
.post-more-meta { display: block; font-size: 12px; color: var(--c-muted); }
.post-more-title {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-navy);
  transition: color var(--t-fast) ease;
}
.post-more a:hover .post-more-title { color: var(--c-primary-text); }
@media (max-width: 980px) {
  .post-layout { flex-direction: column; }
  .post-layout > .post-body { flex: 0 1 auto; }
  .post-toc { display: none; }
  .post-aside { flex: 0 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .post-aside { grid-template-columns: 1fr; }
}

/* v=223 (USER): /kontakt/ Standortkarte — keine Linien über/unter der Adresse, Icon dicht am Text.
   Die Linien kommen aus .laden-rows (border-top) + .laden-row (border-bottom); der v=201-Fix war auf
   .laden-info (Startseite) gescopet. Die 96px-Iconspalte stammt aus der Zeit mit Text-Labels (v=84). */
.kv2-loc-card .laden-rows { border-top: 0; margin-bottom: var(--sp-5); }
.kv2-loc-card .laden-row {
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: 0;
  border-bottom: 0;
}

/* ============================================================================
   v=224 — Startseite Problem/Loesung OPTION C: Hotspot-Bild `.shot` (tools/add_home_hotspots.py)
   Text 40 % links (Formel Mechanik + Elektronik = Konzept, wechselnde Detailkarte), Bild 60 % rechts
   mit 6 nummerierten Pins (navy = Mechanik, primary = Elektronik). Sektion bleibt WEISS: davor helles
   Foto-Band (Option B), danach dunkles Branchen-Bento. Mobil: Karte aus, Liste aller 6 Punkte ein.
   ============================================================================ */
/* Kopf zentriert ueber beiden Spalten (USER v=226) */
.shot-head { max-width: 62ch; margin: 0 auto clamp(40px, 4.5vw, 64px); text-align: center; }
.shot-head .h2 { margin-block: var(--sp-5) var(--sp-5); }
.shot-head .lead { margin: 0 auto; }
.shot-grid { display: flex; align-items: center; gap: clamp(40px, 6vw, 96px); }
.shot-copy { flex: 1 1 40%; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }

/* Zwei Baustein-Kacheln (Legende + Filter: Hover dimmt die Pins des anderen Typs) + Ergebnisleiste */
.shot-parts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.shot-part, .shot-sum {
  display: flex; flex-direction: column; gap: 4px;
  padding: clamp(16px, 1.6vw, 22px);
  border-radius: var(--r-lg);
  border-top: 3px solid var(--c-navy);
  background: var(--c-bg-alt);
}
.shot-part--elec { border-top-color: var(--c-primary); }
.shot-part .icon-chip, .shot-sum .icon-chip { margin-bottom: var(--sp-2); }
.shot-part--mech .icon-chip { background: rgba(11, 37, 71, .10); color: var(--c-navy); }
.shot-part--elec .icon-chip { background: rgba(38, 114, 185, .12); color: var(--c-primary); }
.shot-part strong, .shot-sum strong { font-size: 15px; line-height: 1.3; color: var(--c-navy); }
.shot-part span, .shot-sum span { font-size: 13px; line-height: 1.5; color: var(--c-body); }
.shot-sum {
  grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--sp-4);
  border-top: 0; background: linear-gradient(150deg, #123A75 0%, #0B2547 100%);
}
.shot-sum .icon-chip { margin: 0; flex: 0 0 auto; background: rgba(255, 255, 255, .10); color: var(--c-on-navy-2); }
.shot-sum strong { color: #fff; }
.shot-sum span { color: var(--c-on-navy); }
.shot-sum-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 640px) { .shot-parts { grid-template-columns: 1fr; } }
.shot.is-filter-mech .shot-pin--elec, .shot.is-filter-elec .shot-pin--mech { opacity: .3; }
.shot-pin { transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease, opacity var(--t-fast) ease; }

/* Detailkarte (Desktop) und Listen-Karten (Mobil) teilen die Innenoptik */
.shot-card, .shot-item {
  position: relative;
  padding: clamp(22px, 2vw, 28px) clamp(22px, 2vw, 28px) clamp(22px, 2vw, 28px) 76px;
  background: var(--c-bg-alt);
  border-radius: var(--r-lg);
  transition: opacity var(--t-fast) ease;
}
.shot-card.is-swapping { opacity: 0; }
.shot-num {
  position: absolute; left: clamp(22px, 2vw, 28px); top: clamp(22px, 2vw, 28px);
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: #fff; background: var(--c-navy);
}
.shot-item--elec .shot-num, .shot-card[data-typ="elec"] .shot-num { background: var(--c-primary); }
.shot-tag { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-muted); }
.shot-card h3, .shot-item h3 { margin: var(--sp-1) 0 var(--sp-2); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.3; font-weight: 600; color: var(--c-navy); }
.shot-card p, .shot-item p { margin: 0 0 var(--sp-3); font-size: var(--fs-lead); line-height: 1.62; color: var(--c-body); }
.shot-list { list-style: none; margin: 0; padding: 0; display: none; }

/* Bild + Pins: Stage nimmt das Bildformat an, Pins in % der Figure = % des Bildes */
.shot-stage { flex: 1 1 60%; min-width: 0; position: relative; margin: 0; }
.shot-stage img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.shot-pins { position: absolute; inset: 0; }
/* Pin = GLAS-RING (v=227, USER): duenner farbiger Ring + leicht mattierte Fuellung, das Bauteil bleibt
   in der Mitte sichtbar; die Ziffer sitzt als kleines deckendes Badge oben rechts AUSSERHALB der Mitte. */
.shot-pin {
  position: absolute; left: var(--x); top: var(--y);
  width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer; font: inherit;
  border: 1px solid rgba(255, 255, 255, .92);   /* v=228 USER: durchsichtig, kein Fill/Blur, 1px */
  background: transparent;
  box-shadow: 0 0 0 1px rgba(5, 15, 30, .18);  /* dunkle Haarlinie aussen: Ring auch auf heller Fassade sichtbar */
  transition: transform var(--t-fast) ease, border-width var(--t-fast) ease, border-color var(--t-fast) ease;
}
.shot-pin > span {
  position: absolute; right: -8px; top: -8px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; line-height: 1; color: #fff;
  background: var(--c-primary);                /* EIN Blau fuer alle Ziffern (USER) */
  box-shadow: 0 0 0 1px #fff;
  transition: background var(--t-fast) ease;
}
.shot-pin::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .9); opacity: 0; animation: shot-pulse 2.4s ease-out infinite;
}
.shot-pin:hover, .shot-pin[aria-pressed="true"] {
  transform: translate(-50%, -50%) scale(1.1);
  border-width: 2px;
}
/* v=231 (USER): AKTIVER Pin = Ring im Markenblau (--c-primary), Ziffern-Badge auf Navy — der gewaehlte Punkt
   hebt sich damit von den weissen Ruhe-Ringen ab; Hover bleibt weiss (Vorschau). */
.shot-pin[aria-pressed="true"] { border-color: var(--c-primary); }
.shot-pin[aria-pressed="true"] > span { background: var(--c-navy); }
.shot-pin[aria-pressed="true"]::before { animation: none; opacity: 0; }
.shot-pin:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 4px; }
@keyframes shot-pulse {
  0% { transform: scale(.7); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}
.shot-legend {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3);
  font-size: 12.5px; color: var(--c-muted);
}
.shot-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-navy); margin-right: 2px; }
.shot-dot--elec { background: var(--c-primary); margin-left: var(--sp-3); }
.shot-legend-hint { margin-left: var(--sp-1); }
@media (prefers-reduced-motion: reduce) {
  .shot-pin::before { animation: none; }
  .shot-pin, .shot-card { transition: none; }
}
@media (max-width: 900px) {
  .shot-grid { flex-direction: column-reverse; align-items: stretch; }
  .shot-copy, .shot-stage { flex: 0 1 auto; min-height: 0; }
  .shot-card, .shot-legend { display: none; }
  .shot-list { display: grid; gap: var(--sp-4); }
  .shot-pin { width: 30px; height: 30px; cursor: default; }
  .shot-pin > span { width: 18px; height: 18px; font-size: 10px; right: -7px; top: -7px; }
}
/* ---- Ende Option C (.shot) — Bloecke DANACH bleiben bei --replace erhalten ---- */


/* v=230 (USER): Startseiten-Systempartner `.pbands` als DUNKLES Foto-Band (section--photo-dark, hero-overview).
   Karten bleiben weiss (Herstellerlogos sind fuer helle Flaechen gezeichnet, v=172); Texte auf on-navy. */
.pbands.section--photo-dark .lead { color: var(--c-on-navy); }
.pbands.section--photo-dark .pband-title { color: #fff; }
.pbands.section--photo-dark .partner-card.is-ph { border-color: rgba(255, 255, 255, .28); }
.pbands.section--photo-dark .partner-card.is-ph .ph-note,
.pbands.section--photo-dark .partner-card.is-ph .partner-name { color: var(--c-on-navy); }
.pbands.section--photo-dark .partner-card:hover { border-color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   ECHTE GOOGLE-REZENSIONEN (v=232, PRP_Inhalte_Golive)
   ⚠️ Stapel-Grid statt min-height: die echten Texte sind unterschiedlich lang (60–230
   Zeichen). Die feste Reservierung (8.4em / mobil 11em) haette die laengsten abgeschnitten
   bzw. die Karte beim Blaettern springen lassen. Alle Rezensionen liegen in DERSELBEN
   Rasterzelle — die unsichtbaren behalten ihre Hoehe (visibility statt display), die Zelle
   ist damit immer so hoch wie die laengste. Die Ueberblendung (opacity/transform) bleibt.
   ========================================================================== */
.greview-stage {
  display: grid;
  min-height: 0;
}

.greview-item {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
}

.greview-links,
.grev-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-4);
  font-size: 13px;
}

.greview-links a {
  color: var(--c-primary-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.grev-links a {
  color: var(--c-on-navy-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.greview-links a:hover,
.grev-links a:hover {
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   ANFRAGEFORMULAR #anfrage (v=233, PRP_Ads_Zielseiten_Anfrage)
   Wiederverwendet das Formular-Band von /kontakt/ (.kv2-formband/.kv2-formcard/.cform);
   hier nur, was außerhalb von /kontakt/ fehlt. Erzeugt von tools/add_anfrage.py.
   ========================================================================== */
#anfrage {
  scroll-margin-top: 90px;
}

/* Honeypot: unsichtbar, aber NICHT display:none (manche Bots überspringen versteckte Felder) */
.cform .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.anfrage-phone {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  color: var(--c-on-navy);
}

.anfrage-phone a {
  color: #fff;
}

.anfrage-phone {
  color: #fff;   /* on-navy (#C9D8EC) lag auf hellen Stellen der dark-10-Textur nur bei 4.45:1 (Review ded39b6) */
}

.cform-status {
  margin-top: var(--sp-3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-body);
}

.cform-status:empty {
  display: none;
}

.cform-status.is-error {
  color: var(--c-alert-text);
}

.cform [aria-invalid="true"] {
  border-color: var(--c-alert);
}

.cform button[aria-busy="true"],
.cform button:disabled {
  opacity: .7;
  cursor: progress;
}