/* ── KOMOS Komponenten ───────────────────────────────────────────────────
   Header, Footer, Buttons, Karten, Hero, Listen, Akkordeon, Formulare.
   Jede Komponente hat genau eine Definition. Varianten laufen über
   Modifier-Klassen, nicht über Einzelfall-CSS pro Seite.
   ──────────────────────────────────────────────────────────────────── */

/* ══ Buttons ═══════════════════════════════════════════════════════════
   Im Live-System stehen Buttons in Gold mit weißer Schrift und einem
   text-shadow, der die Lesbarkeit kaschieren soll. Weiß auf #D5A521
   ergibt 2,27:1 und verfehlt WCAG AA (4,5:1) deutlich.
   Gleiches Gold mit Navy-Schrift ergibt 6,94:1.                        */

.btn {
  --btn-bg: var(--c-gold);
  --btn-fg: var(--c-navy);
  --btn-bg-hover: var(--c-gold-hover);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  min-height: 2.75rem;           /* 44 px Touch-Ziel */
  border: 1px solid var(--btn-border);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--c-navy);
  --btn-border: var(--c-border-strong);
  --btn-bg-hover: var(--c-surface);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-navy);
  --btn-border: transparent;
  --btn-bg-hover: var(--c-surface);
  padding-inline: var(--sp-3);
}
/* Auf dunklem Grund */
.section--dark .btn--secondary,
.section--darker .btn--secondary,
.hero .btn--secondary,
.site-footer .btn--secondary {
  --btn-fg: var(--c-white);
  --btn-border: rgba(255, 255, 255, 0.4);
  --btn-bg-hover: rgba(255, 255, 255, 0.1);
}
/* Karten bringen ihre eigene helle Flaeche mit. Der Knopf darin stand
   weiss auf weiss und war unsichtbar (1:1), weil die Regel fuer dunkle
   Abschnitte auch in die Karte hineinwirkte. Dasselbe war fuer
   Ueberschriften bereits behoben. */
.card .btn--secondary {
  --btn-fg: var(--c-navy);
  --btn-border: var(--c-border-strong);
  --btn-bg-hover: var(--c-surface);
}
.btn--block { width: 100%; }
.btn .icon { width: 0.9em; height: 0.9em; flex: none; }

/* ══ Kopfzeile ═════════════════════════════════════════════════════════ */

.announce {
  background: var(--c-navy-deep);
  color: var(--c-text-on-dark);
  font-size: var(--fs-xs);
  text-align: center;
}
.announce__inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2); flex-wrap: wrap;
  padding-block: var(--sp-2);
  min-height: 2.25rem;
}
.announce a:not(.btn) { color: var(--c-gold); font-weight: var(--fw-semibold); }
.announce strong { color: var(--c-gold); }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  /* Live liegt hier ein 10-px-Schatten mit rgba(0,0,0,0.5), der als
     harte graue Kante erscheint. */
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--header-h);
  padding-block: var(--sp-3);
}
.site-header__logo { flex: none; margin-right: auto; }
.site-header__logo img { height: 2.125rem; width: auto; }

.nav { display: flex; align-items: center; gap: 0;
       list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-3) 0.4rem;
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.nav__link:hover { color: var(--c-navy); background: var(--c-surface); }
.nav__link[aria-current="page"],
.nav__item--active > .nav__link { color: var(--c-navy); }
.nav__item--active > .nav__link::after {
  content: ""; position: absolute; left: 0.4rem; right: 0.4rem;
  bottom: 0; height: 2px; background: var(--c-gold); border-radius: var(--r-pill);
}
.nav__caret { width: 0.6em; height: 0.6em; transition: transform var(--dur) var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Das Untermenü sitzt mit Abstand unter dem Menüpunkt. Ohne Brücke würde
   die Maus auf dem Weg dorthin den Menüpunkt verlassen und das Menü
   zuklappen. Das unsichtbare ::before schließt genau diese Lücke. */
.nav__sub::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: calc(var(--sp-2) * -1);
  height: var(--sp-2);
}
.nav__sub {
  position: absolute; left: 0; top: calc(100% + var(--sp-2));
  min-width: 17rem; margin: 0; padding: var(--sp-2);
  list-style: none;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  display: none;
}
.nav__link[aria-expanded="true"] + .nav__sub { display: block; }
.nav__sub li + li { margin-top: 2px; }
.nav__sub a {
  display: block; padding: var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--c-text); font-size: var(--fs-sm); text-decoration: none;
}
.nav__sub a:hover { background: var(--c-surface); color: var(--c-navy); }

.nav-toggle { display: none; }
.site-header__nav .btn { display: none; }   /* nur im mobilen Aufklappmenü */

/* Der Handlungsknopf im Kopf ist das wichtigste Element der Navigation.
   Er bekommt mehr Gewicht und bleibt einzeilig — umgebrochen wirkte er
   gedrungen statt präsent. */
.site-header__cta {
  white-space: nowrap;
  font-size: var(--fs-base);
  padding: var(--sp-3) var(--sp-6);
  min-height: 3rem;
}

@media (max-width: 1240px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3); border: 1px solid var(--c-border);
    border-radius: var(--r-sm); background: var(--c-white);
    font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    color: var(--c-navy); cursor: pointer;
  }
  .site-header__nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: var(--sp-4) 0 var(--sp-6);
    background: var(--c-white);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-lg);
  }
  .site-header__nav[data-open="true"] { display: block; }
  .site-header__nav > .container { display: flex; flex-direction: column; gap: var(--sp-2); }
  .nav { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .nav__link { width: 100%; justify-content: space-between; font-size: var(--fs-base); }
  .nav__item--active > .nav__link::after { display: none; }
  .nav__sub {
    position: static; display: none; min-width: 0;
    border: 0; box-shadow: none; background: var(--c-surface);
    border-radius: var(--r-sm); margin-top: var(--sp-1);
  }
  .site-header__cta { display: none; }
  .site-header__nav .btn { display: inline-flex; margin-top: var(--sp-3); }
}

/* ══ Hero ══════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  display: grid;
  background: var(--c-navy-deep);
  color: var(--c-text-on-dark);
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after {
  /* Ein einziges, definiertes Overlay statt wechselnder Deckkraft je Seite.
     Sichert den Textkontrast unabhängig vom Bildmotiv. */
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Die Textspalte reicht bis 46rem. Bis dorthin liegt die Deckkraft nie
     unter 0,78 — damit ist weißer Text auch über einem hellen Motiv
     AA-sicher (9,3:1 im schlechtesten Fall). Rechts darf das Bild atmen. */
  background: linear-gradient(
    100deg,
    rgba(7, 20, 38, 0.92) 0%,
    rgba(7, 20, 38, 0.86) 40%,
    rgba(7, 20, 38, 0.78) 64%,
    rgba(7, 20, 38, 0.30) 100%);
}
.hero__inner { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem); }
.hero__content { max-width: 46rem; }
/* Eigener Rhythmus im Hero: die Aufzählung braucht Luft nach oben und
   unten, sonst klebt sie an Einleitung und Fazit. */
.hero__content.stack > * + * { margin-top: var(--sp-5); }
.hero__content .checklist { margin-block: var(--sp-2); }
.hero__content .hero__note { margin-top: var(--sp-5); }
.hero__eyebrow {
  display: block; width: 12rem; height: 4px;
  margin-bottom: var(--sp-5);
  background: var(--c-gold); border-radius: var(--r-pill);
}
.hero h1 { color: var(--c-white); }
/* Rangfolge im Hero: Überschrift, Einleitung, Aufzählung, Fazit.
   Größe und Helligkeit nehmen gemeinsam ab — vorher war die Einleitung
   groß aber gedämpft und die Aufzählung darunter klein aber weiß,
   wodurch der Blick sprang. */
.hero__lead {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-text-on-dark);
  max-width: 44rem;
}
.hero .checklist { font-size: var(--fs-base); color: var(--c-text-on-dark); }
.hero .checklist li { gap: var(--sp-3); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ══ Kennzahlen ════════════════════════════════════════════════════════ */

.stats {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.stat__value {
  display: block;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-gold);
}
.stat__label {
  display: block; margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-on-dark);
}
.section:not(.section--dark):not(.section--darker) .stats { border-top-color: var(--c-border); }
.section:not(.section--dark):not(.section--darker) .stat__value { color: var(--c-navy); }
.section:not(.section--dark):not(.section--darker) .stat__label { color: var(--c-text-muted); }

/* ══ Sektionskopf ══════════════════════════════════════════════════════ */

/* Sektionskopf. Titel und Einleitung stehen auf breiten Schirmen
   nebeneinander — sonst bleibt rechts vom Titel eine leere Fläche. */
.section-head {
  display: grid;
  gap: var(--sp-4) var(--sp-8);
  margin-bottom: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--c-gold);
}
.section-head > :first-child { margin-top: 0; }
.section-head > * { min-width: 0; }
.section-head h2 { margin: 0; max-width: 34ch; }
/* Nur neben einer Einleitung wird der Titel schmal gesetzt. Steht er
   allein, darf er die volle Breite nutzen statt dreizeilig umzubrechen. */
.section-head:has(.section-head__lead) h2 { max-width: 20ch; }
.section-head:has(.section-head__lead) .section-head__titel h2 { max-width: 20ch; }
/* Titel und zugehoeriger Knopf teilen sich die linke Spalte. Stand der
   Knopf hinter dem Kopf, sass er unter dem kurzen Titel allein in einer
   leeren Flaeche, waehrend rechts die Einleitung weiterlief. */
.section-head__titel {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--sp-5);
}
.section-head__titel > * { margin: 0; }

/* Die Einleitung steht neben der Ueberschrift, nicht ueber dem Text. Sie
   ist deshalb gewoehnlicher Fliesstext und wird wie er gesetzt; zwei
   Stufen groesser wirkte sie wie eine zweite Ueberschrift. */
.section-head__lead {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  margin: 0;
  max-width: 62ch;
}
@container (min-width: 56rem) {
  .section-head:has(.section-head__lead) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
  }
}
.section--dark .section-head,
.section--darker .section-head { border-top-color: var(--c-gold); }
.section--dark .section-head__lead,
.section--darker .section-head__lead { color: var(--c-text-on-dark); }

/* Ein Pfeilsymbol steht immer in einer Zeile Text. Ohne feste Groesse
   dehnt es sich auf die Breite seines Kastens und reisst dessen Hoehe mit. */
.icon { flex: none; width: 1em; height: 1em; }

/* ══ Karten ════════════════════════════════════════════════════════════
   Ersetzt vier verschiedene Kartenbauweisen des Live-Systems mit
   Radien von 5, 6, 8, 10, 15, 20 und 43 px.                            */

.card {
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-md); }
/* Karten bringen ihre eigene helle Fläche mit. Die Textfarben dunkler
   Sektionen dürfen deshalb nicht in sie hineinwirken — sonst steht weiße
   Schrift auf weißer Karte. */
.card { color: var(--c-text); }
.card :is(h1, h2, h3, h4, h5, h6) { color: var(--c-text); }
.card :is(p, li, dd, dt, span):not(.card__title) { color: inherit; }
/* Nur Meta und Bildunterschrift sind gedämpft. Der Beschreibungstext ist
   gewöhnlicher Fließtext: stand er grau zwischen schwarzem Titel und
   schwarzen Stichpunkten, wirkte die Karte dreifarbig. */
.card .card__meta, .card .card__caption { color: var(--c-text-muted); }
.card a:not(.btn) { color: var(--c-blue); }
.card a:not(.btn):hover { color: var(--c-blue-hover); }
.section--surface .card { background: var(--c-white); }
.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-surface);
}
.card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Freigestellte Grafiken und Piktogramme werden eingepasst statt beschnitten. */
.card__media--contain { background: var(--c-surface); }
.card__media--contain img { object-fit: contain; padding: var(--sp-5); }
.card__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1; }
.card__title { margin: 0; font-size: var(--fs-md); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--c-blue); }
.card__text { margin: 0; font-size: var(--fs-base); }
.card__meta { font-size: var(--fs-xs); color: var(--c-text-muted); }
.card__foot { margin-top: auto; padding-top: var(--sp-2); }
/* In einer Kartenreihe trägt jeder Button dieselbe Beschriftung. Richtet
   er sich nach seinem Inhalt, bricht der Text unterschiedlich um und die
   Karten wirken ungleich. Über die volle Breite sind sie identisch. */
.card__foot .btn { width: 100%; justify-content: center; }

/* Karte, die vollflächig verlinkt ist */
.card--link { position: relative; }
.card--link .card__title a::after { content: ""; position: absolute; inset: 0; }

/* Karte mit Bildhintergrund. Fester Overlay-Verlauf sichert den Kontrast —
   im Live-System steht der Buttontext teils blassgold auf hellem Foto. */
.card--feature {
  position: relative; isolation: isolate;
  /* Hoch genug, dass über dem Textkasten ein Stück Motiv sichtbar bleibt.
     Bei 19 rem füllte der Kasten die Kachel vollständig aus und vom Bild
     war nichts mehr zu sehen. */
  min-height: 28rem; justify-content: flex-end;
  border: 0; color: var(--c-text-on-dark);
}
.card--feature img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  /* Dunkle Fläche hinter dem Bild, nicht auf der Kachel: das Bild liegt
     auf einer negativen Ebene und verschwände hinter einem Hintergrund
     der Kachel. Bis das Bild geladen ist, stand hier sonst ein heller
     Kasten mit dem Platzhaltersymbol des Browsers. */
  background: var(--c-navy-deep);
}
/* Nur eine leichte Grundierung über dem ganzen Bild — die eigentliche
   Abdunklung sitzt unter dem Text. So bleibt das Motiv oben sichtbar. */
.card--feature::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(7, 20, 38, 0.12) 0%,
    rgba(7, 20, 38, 0.20) 55%,
    rgba(7, 20, 38, 0.28) 100%);
}
/* Zusätzliche Abdunklung genau unter dem Text. Sie wächst mit dem
   Textkasten mit, deshalb bleibt der Kontrast bei jeder Textlänge gleich. */
.card--feature .card__body {
  position: relative;
  padding-top: var(--sp-9);   /* weicher Übergang vom Bild zum Text */
  /* Der Titel steht ganz oben im Textkasten. Die Abdunklung beginnt deshalb
     nicht bei null — sonst stünde weiße Schrift über einem hellen Motiv
     nahezu ohne Kontrast. Zusammen mit dem Verlauf der Karte liegt die
     Deckkraft am Titel bei rund 0,73 und damit über der sicheren Schwelle. */
  /* Die Haltepunkte stehen in rem, nicht in Prozent. Prozentuale Stopps
     wachsen mit der Karte: bei einer 843 px hohen Kachel lag die Deckkraft
     am Titel nur noch bei 0,38 und damit der Kontrast bei 2,45:1. In rem
     ist die Abdunklung ab 5 rem erreicht, unabhängig von der Kachelhöhe,
     und der Titel steht mit seinen 6 rem Polster immer darunter. */
  background: linear-gradient(180deg,
    rgba(7, 20, 38, 0) 0,
    rgba(7, 20, 38, 0.72) 5rem,
    rgba(7, 20, 38, 0.88) 8rem,
    rgba(7, 20, 38, 0.94) 100%);
}
.card--feature .card__title { font-size: var(--fs-xl); color: var(--c-white); }
.card--feature .card__text { color: var(--c-text-on-dark); font-size: var(--fs-base); }
/* Der Textkasten ist nur so hoch wie sein Inhalt, nicht so hoch wie die
   Kachel. Füllte er die ganze Kachel, liefe die Abdunklung über das
   gesamte Motiv und vom Bild bliebe nichts übrig. So sitzt er unten, das
   Motiv bleibt darüber sichtbar, und weil er bei jeder Kachel unten
   abschließt, stehen auch die Knöpfe auf einer Linie. */
.card--feature .card__body {
  padding: var(--sp-9) var(--sp-6) var(--sp-6);
  gap: var(--sp-4);
  flex: 0 0 auto;
}
/* Der Knopf gehört an den Kartenboden, nicht an das Textende. Sonst
   steht er bei kürzerem Text höher als in der Nachbarkachel und die Reihe
   wirkt ungleich. Die Abdunklung liegt auf dem ganzen Textkasten, der
   Kontrast bleibt davon unberührt. */
.card--feature .card__foot { margin-top: var(--sp-2); padding-top: 0; }
/* Haelt die Hoehe eines Knopfes frei, wenn dessen Ziel noch fehlt. */
.card__foot--leer { min-height: 2.75rem; }

/* Stehen Kacheln nebeneinander, beginnt ihr Text auf gleicher Höhe. Ohne
   Mindesthöhe richtet sich jeder Textkasten nach seiner eigenen Zeilenzahl
   und die Titel schweben auf bis zu 68 px verschiedenen Höhen.
   Die Schwelle misst den Textkasten ohne sein Polster: nebeneinander sind
   das rund 490 px, untereinander auf dem Telefon rund 290 px. Dort bleibt
   die Mindesthöhe aus, sonst entstünde Leerraum ohne Nutzen. */
@container (min-width: 24rem) {
  /* Der Titel sitzt am unteren Rand seiner Zeile. Stünde er oben, klaffte
     unter einem einzeiligen Titel eine Leerzeile bis zum Text; so bleibt
     er direkt darüber und der Freiraum liegt oben im Bild. */
  .card--feature .card__title {
    min-height: 2lh;
    display: flex; align-items: flex-end;
  }
  .card--feature .card__text { min-height: 3lh; }
}

/* ══ Merkmal mit Icon ══════════════════════════════════════════════════ */

.feature { display: flex; gap: var(--sp-4); align-items: flex-start; }
.feature__icon {
  flex: none; width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--c-gold-soft); color: var(--c-navy);
}
.feature__icon svg { width: 0.875rem; height: 0.875rem; }
.feature__title { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.feature__text { margin: 0; }
.section--dark .feature__text,
.section--darker .feature__text { color: var(--c-text-on-dark); }
.section--dark .feature__icon,
.section--darker .feature__icon { background: rgba(213, 165, 33, 0.18); color: var(--c-gold); }

/* ══ Häkchenliste ══════════════════════════════════════════════════════ */

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; margin: 0; }
.checklist li::before {
  content: ""; flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.28em;
  background: var(--c-gold-ink);
  border-radius: var(--r-pill);
  -webkit-mask: var(--check) center / 0.625rem no-repeat;
          mask: var(--check) center / 0.625rem no-repeat;
  box-shadow: inset 0 0 0 999px var(--c-gold-ink);
}
/* Auf dunklem Grund trägt das helle Marken-Gold. */
.section--dark .checklist li::before,
.section--darker .checklist li::before,
.hero .checklist li::before {
  width: 1.25rem; height: 1.25rem;
  background: var(--c-gold);
  box-shadow: inset 0 0 0 999px var(--c-gold);
  -webkit-mask-size: 0.75rem;
          mask-size: 0.75rem;
}
.checklist { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.6 3 8.4l1.1-1.1 2.1 2.1 5.7-5.7L13 4.8z' fill='%23000'/%3E%3C/svg%3E"); }

/* ══ Prozessschritte ═══════════════════════════════════════════════════
   Live haben Schritt 1 und 5 keine Trennlinie, 2 bis 4 je zwei.        */

.steps {
  list-style: none; margin: 0; padding: 0;
  overflow: clip;              /* Verbindungslinie am Rand abschneiden */
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  counter-reset: step;
}
.steps li { margin: 0; position: relative; padding-top: var(--sp-6); text-align: center; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2.125rem; height: 2.125rem;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-navy); color: var(--c-white);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.steps li::after {
  content: ""; position: absolute; top: 1.06rem; left: calc(50% + 1.5rem);
  width: calc(100% - 3rem + var(--sp-6)); height: 2px;
  background: var(--c-border);
}
.steps li:last-child::after { display: none; }
/* Sechs Schritte teilen sich gleichmaessig auf zwei Reihen. Ueber
   auto-fit passten fuenf in die erste Reihe und einer stand allein
   darunter. Die Linie endet am Ende jeder Reihe. */
@container (min-width: 46rem) {
  .steps:has(> :nth-child(6)):not(:has(> :nth-child(7))) {
    grid-template-columns: repeat(3, 1fr);
  }
  .steps:has(> :nth-child(6)):not(:has(> :nth-child(7))) li:nth-child(3n)::after {
    display: none;
  }
}
@media (max-width: 780px) { .steps li::after { display: none; } }
.steps__title { font-size: var(--fs-md); margin: 0 0 var(--sp-1); }
.steps__meta { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); margin-bottom: var(--sp-3); }
.steps__text { margin: 0; font-size: var(--fs-base); }

/* ══ Akkordeon ═════════════════════════════════════════════════════════ */

.accordion { border-top: 1px solid var(--c-border); }
.accordion details { border-bottom: 1px solid var(--c-border); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  cursor: pointer; list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; width: 0.8rem; height: 0.8rem;
  background: currentColor;
  -webkit-mask: var(--chev) center / contain no-repeat;
          mask: var(--chev) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.accordion { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 11 3 6l1-1 4 4 4-4 1 1z' fill='%23000'/%3E%3C/svg%3E"); }
.accordion details[open] summary::after { transform: rotate(180deg); }
.accordion__body { padding-bottom: var(--sp-5); }

/* ══ Faktenblock (Stellenanzeigen) ═════════════════════════════════════ */

.facts { display: grid; gap: 0; margin: 0; padding: 0; }
.facts__row {
  display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border);
}
.facts__row:first-child { border-top: 1px solid var(--c-border); }
.facts dt { color: var(--c-text-muted); font-size: var(--fs-sm); }
.facts dd { margin: 0; font-weight: var(--fw-semibold); }
@media (max-width: 560px) { .facts__row { grid-template-columns: 1fr; gap: var(--sp-1); } }

/* ══ Zitat ═════════════════════════════════════════════════════════════ */

.quote { display: grid; gap: var(--sp-4); }
.quote__text { font-size: var(--fs-lg); line-height: var(--lh-snug); margin: 0; }
.quote__source { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }

/* ══ CTA-Band ══════════════════════════════════════════════════════════ */

.cta-band {
  display: grid; gap: var(--sp-5);
  align-items: center;
  grid-template-columns: 1fr auto;
  padding: var(--sp-7);
  background: var(--c-navy);
  color: var(--c-text-on-dark);
  border-radius: var(--r-lg);
}
.cta-band h2 { margin: 0 0 var(--sp-3); color: var(--c-white); }
.cta-band p { margin: 0; color: var(--c-text-on-dark); }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; padding: var(--sp-6); } }

/* ══ Bild ══════════════════════════════════════════════════════════════ */

/* Nur der untere Abstand entfaellt; den oberen setzt der Stapel. Mit
   margin:0 war diese Regel spezifischer als .stack-lg > * + * und nahm dem
   Bild den Abstand nach oben: es klebte am vorangehenden Knopf. */
figure.figure { margin-bottom: 0; }
/* Ueber die volle Textbreite gezogen wurde ein Bild 1136 px breit und
   758 px hoch und beherrschte den Abschnitt. 800 px waren KOMOS immer noch
   zu gross, deshalb 36 rem: rund 576 px, etwa die Haelfte der Textbreite.
   Linksbuendig, nicht zentriert: Titel, Einleitung und Knopf beginnen alle
   an derselben Kante. */
figure.figure { max-width: 36rem; margin-inline: 0; }
figure.figure img { border-radius: var(--r-md); width: 100%; }
/* Ohne Deckel füllt ein Bild die ganze Spaltenbreite und wird plakathoch.
   Freigestellte Grafiken und Hochformate sind ausgenommen. */
figure.figure:not(.figure--piktogramm):not(.figure--logo):not(.figure--portrait) img {
  max-height: 60vh; object-fit: cover;
}
figure.figure figcaption {
  margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-text-muted);
}
.section--dark figure.figure figcaption,
.section--darker figure.figure figcaption { color: var(--c-text-on-dark); }

/* ══ Zweispalter Text + Bild ═══════════════════════════════════════════ */

/* Text und Bild nebeneinander. Der Text bündelt sich auf einer Seite,
   damit unter der kürzeren Spalte keine Lücke bleibt. */
.split { display: grid; gap: clamp(var(--sp-6), 4vw, var(--sp-8)); align-items: start; }
.split > * { min-width: 0; }
.split + .split { margin-top: var(--sp-8); }
.split__text { display: flex; flex-direction: column; gap: var(--sp-5); }
.split__text > * { margin: 0; }
.split__text > h2, .split__text > h3 { margin-bottom: calc(var(--sp-2) * -1); }
.split__media img { border-radius: var(--r-md); }
@container (min-width: 48rem) {
  /* .split--lang bleibt einspaltig: dort überragt der Text das Bild so
     deutlich, dass daneben nur eine leere Fläche stünde. */
  .split:not(.split--lang) { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: -1; }
}

/* Eingebettete Grafiken im Hero. Das Integrationsdiagramm bringt helle
   Kästen und graue Nebentexte mit, weil es für hellen Grund gezeichnet
   ist. Liegt es unmittelbar auf dem Hero-Foto, hängt deren Lesbarkeit vom
   Motiv ab. Eine eigene Fläche darunter macht sie motivunabhängig; 0,82
   liegt über den 0,78, die im Hero ohnehin gelten. */
.hero .embed {
  background: rgba(7, 20, 38, 0.82);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  /* Die Flaeche folgt der Grafik, statt die ganze Spalte einzunehmen. Ueber
     die volle Breite gezogen wirkte der abgedunkelte Kasten wie ein
     Fremdkoerper im Kopfbereich. */
  max-width: calc(480px + 2 * var(--sp-5));
  margin-inline: auto;
  /* Die Grafik ist quadratisch angelegt; in der Beistellspalte bleibt die
     Flaeche es auch, damit sie neben dem Text ruhig steht. */
  aspect-ratio: 1;
  /* Senkrecht mittig, waagerecht ueber die volle Breite: mit
     place-items:center schrumpfte die Grafik auf ihre Inhaltsgroesse
     (300 px) statt die Flaeche auszufuellen. */
  display: grid; align-items: center; justify-items: stretch;
}

/* ══ Bildwechsel ═══════════════════════════════════════════════════════
   Mehrere Bilder an einer Stelle, eines sichtbar. Ohne JavaScript bleibt
   die Spur waagerecht scrollbar und damit bedienbar; die Punkte kommen
   erst hinzu, wenn das Skript laeuft.                                    */

.bildwechsel { position: relative; }
.bildwechsel__spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--r-md);
}
.bildwechsel__spur::-webkit-scrollbar { display: none; }
.bildwechsel__spur > figure { scroll-snap-align: center; margin: 0; max-width: none; }

.bildwechsel__punkte {
  display: flex; justify-content: center; gap: var(--sp-2);
  margin-top: var(--sp-4);
}
/* Der sichtbare Punkt ist klein, die Schaltfläche darum herum misst volle
   1,5 rem: so lässt sie sich auch mit dem Finger sicher treffen. */
.bildwechsel__punkt {
  width: 1.5rem; height: 1.5rem; padding: 0;
  display: grid; place-items: center;
  border: 0; background: transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.bildwechsel__punkt::before {
  content: ""; width: 0.625rem; height: 0.625rem;
  border-radius: var(--r-pill);
  background: var(--c-muted-mark);
}
.bildwechsel__punkt[aria-current="true"]::before { background: var(--c-navy); }
.section--dark .bildwechsel__punkt::before,
.section--darker .bildwechsel__punkt::before { background: rgba(255, 255, 255, 0.55); }
.section--dark .bildwechsel__punkt[aria-current="true"]::before,
.section--darker .bildwechsel__punkt[aria-current="true"]::before {
  background: var(--c-white);
}
/* Wer Bewegung reduziert, bekommt kein weiches Gleiten. */
@media (prefers-reduced-motion: reduce) {
  .bildwechsel__spur { scroll-behavior: auto; }
}

/* ══ Fußzeile ══════════════════════════════════════════════════════════ */

.site-footer { background: var(--c-navy); color: var(--c-text-on-dark); }
.site-footer a:not(.btn) { color: var(--c-text-on-dark); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--c-white); text-decoration: underline; }

.site-footer__main {
  display: grid; gap: var(--sp-7);
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  padding-block: var(--sp-8);
}
@media (max-width: 1000px) { .site-footer__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .site-footer__main { grid-template-columns: 1fr; } }

.site-footer__logo img { height: 2.25rem; width: auto; margin-bottom: var(--sp-4); }
.site-footer__intro { color: var(--c-text-on-dark); font-size: var(--fs-sm); }
.site-footer__intro strong { color: var(--c-white); }

.site-footer h2 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-on-dark);
  margin-bottom: var(--sp-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.site-footer li { margin: 0; font-size: var(--fs-sm); }

.footer-contact { display: flex; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-5); }
.footer-contact img { width: 3.25rem; height: 3.25rem; border-radius: var(--r-pill); object-fit: cover; }
.footer-contact__name { font-weight: var(--fw-bold); color: var(--c-white); }
.footer-contact__role { font-size: var(--fs-sm); color: var(--c-text-on-dark); }

.social { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.social a {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-white);
  transition: background-color var(--dur) var(--ease);
}
.social a:hover { background: rgba(255, 255, 255, 0.18); }
.social svg { width: 0.9375rem; height: 0.9375rem; }

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: var(--sp-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5);
  justify-content: space-between;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); font-size: var(--fs-sm); }
.site-footer__funding { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.site-footer__funding img {
  height: 3.25rem; width: auto;
  background: var(--c-white); padding: var(--sp-2);
  border-radius: var(--r-sm);
}
.site-footer__copy { font-size: var(--fs-xs); color: var(--c-text-on-dark); }

/* ══ Brotkrumen ════════════════════════════════════════════════════════ */

.breadcrumb { padding-block: var(--sp-4); font-size: var(--fs-xs); color: var(--c-text-muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.breadcrumb li { margin: 0; display: flex; gap: var(--sp-2); align-items: center; }
.breadcrumb li + li::before { content: "/"; color: var(--c-border-strong); }
.breadcrumb a:not(.btn) { color: var(--c-text-muted); text-decoration: none; }
.breadcrumb a:not(.btn):hover { color: var(--c-navy); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--c-text); }

/* ══ Seitenkopf (Unterseiten ohne Bild) ════════════════════════════════ */

.page-head { background: var(--c-surface); padding-block: var(--sp-8) var(--sp-7); }
.page-head__lead { font-size: var(--fs-base); max-width: 56ch; margin-top: var(--sp-4); }
.page-head__meta { font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--sp-3); }

/* ══ Nach-oben-Knopf ═══════════════════════════════════════════════════ */

.to-top {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 90;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-white); color: var(--c-navy);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  cursor: pointer;
}
.to-top[data-visible="true"] { opacity: 1; visibility: visible; }
.to-top svg { width: 0.875rem; height: 0.875rem; }

/* ══ Embed (Rechtstexte, Rechner) ══════════════════════════════════════ */

.embed :is(h2, h3, h4) { margin-top: var(--sp-6); }
.embed > :first-child { margin-top: 0; }
.embed { overflow-wrap: break-word; }
.embed table { display: block; overflow-x: auto; white-space: nowrap; }

/* Hero-Layout mit optionalem Beistellbild */
.hero__layout { display: grid; gap: var(--sp-7); align-items: center; }
/* Rasterelemente schrumpfen ohne min-width:0 nicht unter die Breite ihres
   Inhalts — auf schmalen Geräten läuft die Seite sonst seitlich über. */
.hero__layout > * { min-width: 0; }
@media (min-width: 1000px) {
  .hero__layout--split { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
  /* Steht eine Grafik in der Beistellspalte, darf sie breiter werden: das
     Integrationsdiagramm ist auf 480 px angelegt und wirkte in 22 rem
     verloren. 33 rem sind 480 px Grafik plus ihr Polster. Fotos und
     Symbole bleiben bei 22 rem. */
  .hero__layout--split:has(.hero__aside .embed) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 33rem);
  }
}
.hero__aside img { margin-inline: auto; }
/* Der Schlusssatz steht nach der Aufzählung und leitet zum Knopf über.
   Er ist die einzige weiße Textstelle unterhalb der Überschrift. */
.hero__note {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  max-width: 42rem;
}
/* Die Hervorhebung gilt nur dem Schlusssatz nach einer Aufzählung. Folgt
   der Satz direkt auf die Einleitung, wäre er kräftiger als sie und die
   Rangfolge nähme nach unten zu statt ab. Das ist auf 79 Seiten der Fall,
   auf einer einzigen steht wirklich eine Aufzählung dazwischen. */
.hero__lead + .hero__note {
  font-weight: var(--fw-regular);
  color: var(--c-text-on-dark);
}

/* ══ Dialog (im Live-System ein Elementor-Popup) ════════════════════════ */

.dialog {
  width: min(32rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--sp-7);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--c-white);
  color: var(--c-text);
  box-shadow: var(--shadow-lg);
}
.dialog::backdrop { background: rgba(7, 20, 38, 0.6); }
.dialog h2 { font-size: var(--fs-xl); padding-right: var(--sp-6); }
.dialog__close-form { position: absolute; top: var(--sp-4); right: var(--sp-4); margin: 0; }
.dialog__close {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  background: var(--c-white); color: var(--c-text-muted); cursor: pointer;
}
.dialog__close:hover { background: var(--c-surface); color: var(--c-text); }
.dialog__close svg { width: 0.8125rem; height: 0.8125rem; }
.dialog__form { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.dialog__note { margin: 0; font-size: var(--fs-sm); color: var(--c-success); min-height: 1.5em; }

.field { display: grid; gap: var(--sp-2); }
.field label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.field input {
  padding: var(--sp-3) var(--sp-4);
  min-height: 2.75rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-white);
  font: inherit; font-size: var(--fs-sm); color: var(--c-text);
}
.field input:hover { border-color: var(--c-navy-soft); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-3); }
.field--check input { min-height: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.2em; accent-color: var(--c-navy); }
.field--check label { font-weight: var(--fw-regular); color: var(--c-text-muted); font-size: var(--fs-xs); }

/* Bildunterschriften in Karten und im Hero */
.card__caption,
.hero__caption {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.hero__caption { color: var(--c-text-on-dark); margin-top: var(--sp-3); }

/* ══ Stellenanzeige ════════════════════════════════════════════════════ */

.job-layout { display: grid; gap: var(--sp-7); align-items: start; }
.job-layout > * { min-width: 0; }
@container (min-width: 56rem) {
  .job-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
  .job-aside { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
}
.job-body { max-width: 62ch; }
.job-body h2 { font-size: var(--fs-lg); margin-top: var(--sp-7); }
.job-body > :first-child { margin-top: 0; }

.job-aside {
  display: grid; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.job-facts { display: grid; gap: 0; margin: 0; }
.job-facts__row { display: grid; gap: var(--sp-1); padding: var(--sp-3) 0; }
.job-facts__row + .job-facts__row { border-top: 1px solid var(--c-border); }
.job-facts dt { font-size: var(--fs-xs); color: var(--c-text-muted); }
.job-facts dd { margin: 0; font-weight: var(--fw-semibold); }
.job-aside__note { margin: 0; font-size: var(--fs-xs); color: var(--c-text-muted); }


/* ══ Absicherung ═══════════════════════════════════════════════════════
   Kontextabhängige Link-Regeln (Footer, dunkle Sektionen, Ankündigung)
   dürfen die Buttonfarbe nicht überschreiben. Weiß bzw. Hellblau auf Gold
   liegt bei 1,3:1 und ist unlesbar. Diese Regel steht bewusst am Ende. */
a.btn, a.btn:hover, a.btn:focus { color: var(--btn-fg); }

/* ══ Kundenbewertungen ═════════════════════════════════════════════════
   Ersetzt den Slider der Essential Addons, dessen Bedienbeschriftungen
   im Rebuild als Fließtext sichtbar wurden. Die Avatare des Live-Systems
   nutzten zufällige Farben (Orange, Braun, Rot) außerhalb des CD. */

.review {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin: 0; padding: var(--sp-5);
  min-height: 0;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.review__text { margin: 0; color: var(--c-text); }
.review__name {
  padding-top: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text-muted);
}
.stars { display: inline-flex; gap: 2px; font-size: var(--fs-sm); line-height: 1; }
.stars__on { color: var(--c-gold-ink); letter-spacing: 2px; }
.section--dark .stars__on,
.section--darker .stars__on { color: var(--c-gold); }
.stars__off { color: var(--c-border-strong); letter-spacing: 2px; }

/* ══ Spalten ═══════════════════════════════════════════════════════════
   Bildet die mehrspaltigen Sektionen des Live-Systems nach. Elementor legt
   die Spaltigkeit in CSS-Variablen ab (--e-con-grid-template-columns bzw.
   --flex-direction:row); das Verhältnis wird beim Auslesen übernommen.
   Unter 860 px stapeln alle Spalten. */

.cols { display: grid; gap: clamp(var(--sp-5), 3vw, var(--sp-7)); align-items: start; }
.cols__col { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.cols__col > * { margin: 0; }

@container (min-width: 34rem) {
  .cols--3, .cols--4, .cols--5, .cols--6 { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 52rem) {
  .cols--2 { grid-template-columns: var(--cols, 1fr 1fr); }
  .cols--3 { grid-template-columns: var(--cols, repeat(3, 1fr)); }
}
@container (min-width: 62rem) {
  .cols--4 { grid-template-columns: var(--cols, repeat(4, 1fr)); }
  .cols--5 { grid-template-columns: var(--cols, repeat(5, 1fr)); }
  .cols--6 { grid-template-columns: var(--cols, repeat(6, 1fr)); }
}

/* ══ Formulare ═════════════════════════════════════════════════════════ */

.form {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@container (min-width: 34rem) { .form { grid-template-columns: 1fr 1fr; } }
.form textarea {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-white);
  font: inherit; font-size: var(--fs-sm); color: var(--c-text);
  resize: vertical; min-height: 8rem;
}
.form textarea:hover { border-color: var(--c-navy-soft); }
.field abbr { text-decoration: none; color: var(--c-error); }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.form__note { margin: 0; font-size: var(--fs-sm); color: var(--c-success); }

/* ══ Karte ═════════════════════════════════════════════════════════════ */

.map {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Hochformatige Bilder (Personenfotos) behalten ihr Format,
   im 16:10-Zuschnitt würden Köpfe angeschnitten. */
.card__media--portrait { aspect-ratio: 3 / 4; }
.card__media--portrait img { object-position: center 22%; }

/* Kennzahlen, deren "Wert" ein ganzer Satz ist (z. B. "Bis zu 30 % weniger
   Komplexitätskosten"). In der großen Ziffernschrift würden sie umbrechen. */
.stats--text .stat__value { font-size: var(--fs-md); line-height: var(--lh-snug); }
.stats--text { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

/* ══ Download-Karte ════════════════════════════════════════════════════
   Im Live-System stehen die Zertifikate als nacktes Bild über einem Knopf
   mit der Aufschrift "Download" — ohne Bezeichnung, Dateityp oder Größe. */

.download {
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.download__thumb {
  aspect-ratio: 1 / 1.414;      /* DIN A4 */
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  display: grid; place-items: center; padding: var(--sp-4);
}
.download__thumb img { max-height: 100%; width: auto; object-fit: contain; box-shadow: var(--shadow-sm); }
.download__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); flex: 1; }
.download__title { margin: 0; font-size: var(--fs-md); }
.download__meta {
  margin: 0 0 var(--sp-2); font-size: var(--fs-xs);
  color: var(--c-text-muted); font-variant-numeric: tabular-nums;
}
.download .btn { margin-top: auto; }

/* Kategorie-Label über dem Kartentitel. Im Live-System steht es als
   zweite H2 direkt neben dem Titel. */
/* Rubrik über einer Überschrift. Ein Sektionskopf, der in eine Textspalte
   geraten ist, wird hierzu herabgestuft: als zweite gleich große Überschrift
   stünde er sonst rangleich neben der eigentlichen Überschrift. */
.eyebrow {
  margin: var(--sp-6) 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-gold-text);
}
.eyebrow:first-child { margin-top: 0; }
.section--dark .eyebrow, .section--darker .eyebrow { color: var(--c-gold); }

.card__eyebrow {
  margin: 0 0 calc(var(--sp-1) * -1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-gold-text);
}

/* Hochformatige Bilder im Fließtext nicht über die Textbreite hinaus
   aufblasen — 700 px breite Porträts wirkten sonst auf 1200 px gestreckt. */
figure.figure--portrait { max-width: 30rem; margin-inline: auto; }
figure.figure img { margin-inline: auto; }


/* Bewertungen ohne Text: Name und Sterne nebeneinander statt als
   halbleere Karte. */
.review:not(:has(.review__text)) {
  flex-direction: row; align-items: center; gap: var(--sp-4);
  padding-block: var(--sp-4);
}
.review:not(:has(.review__text)) .review__name { padding-top: 0; }

/* ── Prozessschritte: mehr Luft, deutlichere Nummern ────────────────── */
.steps { gap: var(--sp-7) var(--sp-5); }
.steps li { padding-top: var(--sp-7); }
.steps li::before { width: 2.5rem; height: 2.5rem; font-size: var(--fs-sm); }
.steps li::after { top: 1.25rem; left: calc(50% + 1.75rem); width: calc(100% - 3.5rem + var(--sp-5)); }
.steps__title { font-size: var(--fs-md); }
/* Die Schriftgröße steht oben bei .steps__text. Hier stand sie ein zweites
   Mal und eine Stufe kleiner, womit der Schritttext kleiner blieb als der
   Fließtext daneben. */

/* ── Piktogramm-Karten ──────────────────────────────────────────────────
   Freigestellte Strichgrafiken wirkten als große, blasse Fläche über der
   Karte. Sie werden jetzt als Icon im Kartenkopf gesetzt. */
.card__media--contain {
  aspect-ratio: auto;
  border-bottom: 0;
  background: transparent;
  padding: var(--sp-5) var(--sp-5) 0;
  display: flex;
}
.card__media--contain img {
  position: static;
  width: 3.5rem; height: 3.5rem;
  padding: var(--sp-2);
  background: var(--c-gold-soft);
  border-radius: var(--r-md);
  object-fit: contain;
}
/* Zwei Deckblätter nebeneinander auf voller Textbreite ergaben Kacheln von
   554 px Breite und 739 px Höhe, die den Abschnitt beherrschten. Bei nur
   zwei Karten bleibt das Raster schmaler; Reihen mit drei Karten, etwa auf
   der Kontaktseite, sind ohnehin kompakt. */
.grid--2:has(.card__media--portrait) { max-width: 46rem; }

/* Steht das Symbol in einer Reihe mit echten Vorschaubildern, bekommt es
   deren Format. Die Flaeche traegt dann die Farbe und das Symbol steht
   gross darin; als kleiner Kasten in einer leeren Flaeche wirkte es wie
   ein Platzhalter neben der vollflaechigen Nachbarkarte. */
.card__media--contain.card__media--portrait {
  aspect-ratio: 3 / 4;
  padding: 0;
  background: var(--c-surface);
  display: grid; place-items: center;
}
.card__media--contain.card__media--portrait img {
  width: 100%; height: 100%;
  padding: 0;
  background: none;
  border-radius: 0;
  object-fit: cover;
}
/* In Hochformat-Reihen bleibt der Grund hell. Das Whitepaper-Titelbild
   ist freigestellt und zu Teilen dunkel gezeichnet; auf Navy verschwand
   es vollstaendig. Die Einstufung als helles Symbol trifft hier nicht zu,
   es ist ein 2015 x 2540 grosses Deckblatt. */
.card__media--dunkel.card__media--portrait {
  background: var(--c-surface);
}

/* Reihe gleichrangiger Knöpfe */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Styleguide: breite Tabellen dürfen auf schmalen Geräten scrollen */
.sg-table-wrap { overflow-x: auto; margin-bottom: var(--sp-6); }

/* ══ Hinweis auf den Entwurfsstatus ════════════════════════════════════
   Nur im Entwurfsmodus ausgegeben. Für den Livegang KOMOS_LIVE=1 setzen. */
.entwurf-hinweis {
  margin: 0;
  padding: var(--sp-2) var(--gutter);
  background: var(--c-gold-soft);
  color: var(--c-navy);
  font-size: var(--fs-xs);
  text-align: center;
}
.entwurf-hinweis a { color: var(--c-navy); font-weight: var(--fw-semibold); }

/* ══ Terminbuchung ═════════════════════════════════════════════════════
   Der Anbieter liefert eigenes Markup. Hier nur der Rahmen, damit der
   Baustein nicht springt, während er lädt. */
.booking {
  min-height: 30rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-white);
  overflow: hidden;
}
.booking iframe { width: 100%; border: 0; display: block; }
.booking__hinweis { padding: var(--sp-5); margin: 0; color: var(--c-text-muted); }

/* ══ Gegenüberstellung Problem / Lösung ════════════════════════════════
   Im Live-Layout stehen Ziffer, Problem und Lösung als drei gleichwertige
   Spalten nebeneinander. Die Ziffer belegt dadurch eine halbe Spalte, und
   Problem und Lösung wirken gleichrangig — obwohl die Lösung die Aussage
   trägt. Hier wird die Ziffer zur Marke und die Lösung hervorgehoben. */

.gegenueber {
  display: grid;
  gap: var(--sp-5) var(--sp-7);
  grid-template-columns: 1fr;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}
.gegenueber + .gegenueber { margin-top: var(--sp-8); }
.gegenueber > * { min-width: 0; }

.gegenueber__nr {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  /* Die Zählung trägt Information und ist damit kein Schmuck. Als
     --c-border-strong stand sie bei 1,62:1 und verfehlte die 3:1, die für
     großen Text gelten. Gleicher Farbton, nur dunkler: 3,07:1 auf der
     grauen Fläche, 3,35:1 auf Weiß. */
  color: var(--c-muted-mark);
  font-variant-numeric: tabular-nums;
}
.gegenueber__seite { display: flex; flex-direction: column; gap: var(--sp-4); }
.gegenueber__seite > * { margin: 0; }
.gegenueber__titel { font-size: var(--fs-lg); margin: 0; }
.gegenueber__label {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-gold-text);
}
.gegenueber__seite--problem { color: var(--c-text-muted); }
.gegenueber__seite--problem .gegenueber__titel { color: var(--c-text); }

/* Die Lösung bekommt eine eigene Fläche mit Goldkante. */
.gegenueber__seite--loesung {
  padding: var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.gegenueber__foot { margin-top: auto; padding-top: var(--sp-2); }

/* Aufzählung von Problemen: neutraler Strich statt Häkchen. */
.checklist--problem li::before {
  width: 0.75rem; height: 2px; margin-top: 0.72em;
  border-radius: 0;
  background: var(--c-border-strong);
  box-shadow: none;
  -webkit-mask: none; mask: none;
}

@container (min-width: 52rem) {
  .gegenueber { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .gegenueber__nr { padding-top: 0.15em; }
}

/* Freigestellte Grafiken sind keine Fotos. Ein 512×512-Symbol auf volle
   Spaltenbreite gezogen wirkt wie ein Fehler. */
figure.figure--piktogramm { max-width: 7rem; margin-inline: 0; }
figure.figure--piktogramm img { width: 100%; height: auto; }
figure.figure--logo { max-width: 14rem; margin-inline: 0; }

/* Logoleiste: Partner- und Verbandszeichen nebeneinander, auf einheitliche
   Hoehe gebracht. Ihre Seitenverhaeltnisse reichen von 1,8 bis 3,8; ohne
   gemeinsame Hoehe wirkt die Reihe zufaellig. */
.logoleiste {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: var(--sp-6) var(--sp-8);
}
.logoleiste figure.figure { max-width: none; margin: 0; }
.logoleiste figure.figure img {
  width: auto; height: 4.5rem; max-height: 4.5rem;
  object-fit: contain; border-radius: 0;
}
.logoleiste figcaption { display: none; }
figure.figure--logo img { width: 100%; height: auto; }

/* Weiß gezeichnete Symbole brauchen einen dunklen Grund, sonst sind sie
   auf der hellen Fläche praktisch unsichtbar. Die Helligkeit jedes
   freigestellten Symbols steht im Bildkatalog. */
.card__media--dunkel img,
figure.figure--dunkel img {
  background: var(--c-navy);
  border-radius: var(--r-md);
}

/* Freigestelltes Symbol als Hero-Beistellbild: begrenzte Größe statt
   formatfüllend, sonst wirkt ein 512-Pixel-Icon wie ein Fehler. */
.hero__aside--symbol { max-width: 11rem; margin-inline: auto; }
.hero__aside--symbol img { width: 100%; height: auto; }
.hero__aside--dunkel img { background: rgba(255, 255, 255, 0.06); border-radius: var(--r-lg); padding: var(--sp-5); }