/* ═══════════════════════════════════════════════════════════════════
   CONLED Safety Contracting™ — safetycontracting.de
   Gestaltungsentwurf. CI-Werte technisch von conled.de übernommen.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Farben — conled.de */
  --navy-900:   #000f19;
  --navy-800:   #0d192a;
  --blue-700:   #173456;
  --blue-600:   #235078;
  --blue-400:   #5a819e;
  --blue-100:   #bcdcf5;
  --white-blue: #f0faff;
  --green:      #91c579;
  --teal:       #7ac5b6;

  --rot:        #c96a5e;
  --bernstein:  #d9a441;

  /* Maße */
  --wrap:       1400px;
  --rand:       clamp(20px, 4vw, 56px);

  /* Vertikaler Rhythmus */
  --sektion:    clamp(72px, 11vw, 148px);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy-800);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* Nur für Vorleseprogramme — visuell unsichtbar, aber im Zugänglichkeitsbaum. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

/* ─────────────────────────── Typografie ─────────────────────────── */

.eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow--dunkel { color: var(--blue-600); }

.h2 {
  margin: 0 0 24px;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -.022em;
}

.akzent-text { color: var(--blue-400); }

.sektion-kopf { max-width: 720px; margin-bottom: clamp(48px, 7vw, 76px); }
.sektion-kopf__lead {
  margin: 0;
  font-size: clamp(17px, 1.9vw, 19px);
  line-height: 1.72;
  color: var(--blue-600);
}
.sektion-kopf--hell .h2 { color: #fff; }
.sektion-kopf--hell .sektion-kopf__lead { color: var(--blue-100); }

/* Überschriften brechen ausgewogen um (kein einzelnes Hängewort),
   Leads mit Rücksicht auf die letzte Zeile. Browser ohne text-wrap
   ignorieren die Zeilen einfach. */
h2, h3 { text-wrap: balance; }
.sektion-kopf__lead,
.hero__lead,
.vergleich__lead,
.kontakt__lead { text-wrap: pretty; }

/* Feste Ziffernbreite überall dort, wo Zahlen nebeneinander oder im
   Wechsel stehen — Spalten und Countdown wackeln dann nicht. */
.hero__frist,
.norm__frist,
.ergebnis__frist,
.vergleich__tabelle,
.takt__intervall { font-variant-numeric: tabular-nums; }

/* ─────────────────────────── Kopfleiste ─────────────────────────── */

/* Sitzt ohne eigene Fläche im Hero — keine abgesetzte Leiste. */
.kopf {
  position: relative;
  z-index: 3;
  padding-block: clamp(22px, 3vw, 34px) 0;
}

/* Die rechte obere Ecke ist genau die hellste Stelle des Hero-Fotos. Der
   waagerechte Verlauf am Bild verdunkelt dort nur um 10 % — zu wenig für
   Text. Der Schleier liegt deshalb auf der Kopfzeile selbst, nicht am Bild:
   So bleibt der Bildeindruck des Heros unangetastet. */
.kopf::before {
  content: '';
  position: absolute;
  inset: -40px 0 auto 0;
  height: 190px;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0,15,25,.62), rgba(0,15,25,0));
  pointer-events: none;
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.kopf__logo {
  height: clamp(48px, 5.4vw, 76px);
  width: auto;
  transition: height .28s;
}

.kopf__nav {
  display: flex;
  gap: clamp(20px, 2.6vw, 38px);
  margin-left: auto;          /* Navigation und Schaltfläche rücken zusammen */
}
.kopf__link {
  position: relative;
  padding-block: 6px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  transition: color .2s;
}
.kopf__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--teal);
  transform: scaleX(0);
  transition: transform .22s;
}
.kopf__link:hover { color: #fff; }
.kopf__link:hover::after { transform: scaleX(1); }

/* Auf den Unterseiten trägt die Leiste dieselben Links; die Seite, auf der
   man gerade steht, ist weiß markiert und behält die Linie dauerhaft. */
.kopf__link--aktiv { color: #fff; }
.kopf__link--aktiv::after { transform: scaleX(1); }

/* Eigene Klasse statt .btn: Die Grundschaltfläche ist zweizeilig angelegt
   und mit 15/28 px Innenabstand für eine Kopfzeile zu wuchtig. Farben
   bleiben identisch, damit sie als dieselbe Schaltfläche gelesen wird. */
.kopf__cta {
  padding: 11px 22px;
  border-radius: 2px;
  background: var(--green);
  color: var(--navy-900);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.kopf__cta:hover { background: var(--teal); }

/* Beim Scrollen bleibt die Zeile als schmales Band stehen. Bewusst über
   eine Zustandsklasse und nicht über position: sticky — die Kopfzeile
   steckt im Hero, und ein geheftetes Element kann seinen Container nicht
   verlassen. */
.kopf--geheftet {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;                /* unter dem Einwilligungsbalken (90) */
  padding-block: 10px;
  /* Volle Deckung: bei 94 % Deckkraft mit Blur schimmerten dunkle
     Überschriften der hellen Sektionen beim Scrollen durch die Leiste. */
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255,255,255,.10);
  animation: kopf-ein .28s ease-out;
}
.kopf--geheftet::before { display: none; }   /* Schleier nur über dem Foto */
.kopf--geheftet .kopf__logo { height: 38px; }
@keyframes kopf-ein { from { transform: translateY(-100%); } }

/* Hält die Höhe frei, wenn die Kopfzeile aus dem Fluss genommen wird.
   Die Höhe setzt das Skript beim Umschalten. */
.kopf-platzhalter { display: none; }
.kopf-platzhalter--aktiv { display: block; }

/* Damit Ankersprünge nicht unter dem Band landen. */
[id] { scroll-margin-top: 76px; }

/* Unter 940 px rückt die Navigation in eine schmale zweite Zeile unter
   Logo und Schaltfläche — auf dem Handy soll zwischen den Seiten
   gesprungen werden können (Wunsch vom 12.09.). Gilt für die Kopfzeile
   der Startseite und die der Fachseiten gleichermaßen. */
@media (max-width: 939px) {
  .kopf__innen,
  .rechtkopf__innen { flex-wrap: wrap; }
  .kopf__nav {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    margin-left: 0;
    gap: clamp(18px, 5vw, 34px);
    padding-top: 10px;
  }
  .kopf__link { font-size: 13.5px; padding-block: 4px; }
  /* Das Band ist mit zweiter Zeile höher — Ankersprünge entsprechend tiefer. */
  [id] { scroll-margin-top: 112px; }
}
/* Neben dem Logo bleiben auf dem Handy nur rund 170 px — die volle
   Beschriftung würde aus dem Bild laufen. */
@media (max-width: 520px) {
  .kopf__cta { padding: 10px 15px; font-size: 13.5px; }
  .kopf__cta-zusatz { display: none; }
  .kopf__logo { height: 42px; }
}

/* ═══════════════════════════ 01 · HERO ═══════════════════════════ */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-900);
  padding-bottom: clamp(56px, 7vw, 96px);
  overflow: hidden;
}

/* Das Foto liefert jetzt selbst den Lichtschein — der frühere
   radiale Verlauf entfällt deshalb.
   WebP statt JPG: 96 statt 319 KB, auf dem Handy 35 KB. Das JPG bleibt
   nur als Quelldatei liegen und wird nicht mehr ausgeliefert. */
.hero__hintergrund {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('assets/img/hero-team-1800.webp') no-repeat center 22% / cover;
}

/* Ab Tablet ragt die Bildfläche rechts über den Abschnitt hinaus. „cover"
   rechnet dann mit der breiteren Fläche: Die Gruppe wandert aus dem
   Textbereich nach rechts und wird zugleich etwas größer. Den Überstand
   schneidet .hero mit overflow: hidden ab. */
@media (min-width: 740px) {
  .hero__hintergrund { right: -17%; }
}

/* Zwei Verläufe übereinander:
   senkrecht, damit das Bild nach unten in Navy ausläuft und die
   Schaltflächen auf ruhigem Grund stehen — waagerecht, damit die
   Überschrift links genug Kontrast behält. */
.hero__hintergrund::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(0,15,25,.62) 0%,
      rgba(0,15,25,.18) 30%,
      rgba(0,15,25,.88) 76%,
      var(--navy-900) 97%),
    linear-gradient(to right,
      rgba(0,15,25,.88) 0%,
      rgba(0,15,25,.46) 40%,
      rgba(0,15,25,.04) 72%);
}

/* Leben im Bild, Teil 1: Das Foto atmet. Sehr langsames Zoomen hin und
   zurück — die Gruppe bewegt sich nicht vom Fleck, das Bild wirkt nur
   nicht mehr eingefroren. Den Überstand schneidet .hero ab. */
.hero__hintergrund {
  animation: hero-atmen 45s ease-in-out infinite alternate;
}
@keyframes hero-atmen {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}

/* Teil 2: eine treibende Dunstschicht über dem Foto, unter der Abdunklung
   (::after zeichnet später und liegt damit obenauf — die Lesbarkeit der
   Überschrift bleibt unberührt). Zwei weiche Flecken im Grünweiß des
   vorhandenen Hallendunstes, bewusst schwach. Die Ebene ist größer als
   der Ausschnitt, damit beim Treiben kein Rand einwandert. transform
   statt background-position: läuft auf der Grafikkarte, nichts ruckelt. */
.hero__hintergrund::before {
  content: '';
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(42% 34% at 30% 38%, rgba(186,224,213,.16), transparent 70%),
    radial-gradient(50% 40% at 72% 30%, rgba(147,197,190,.12), transparent 70%);
  animation: hero-dunst 9s ease-in-out infinite alternate;
}
@keyframes hero-dunst {
  from { transform: translate3d(-5%, 2%, 0); }
  to   { transform: translate3d(5%, -3%, 0); }
}

/* Endlosbewegungen stehen wirklich still, wenn der Besucher reduzierte
   Bewegung wünscht — die globale .01ms-Regel würde sie nur unendlich
   oft neu starten. */
@media (prefers-reduced-motion: reduce) {
  .hero__hintergrund,
  .hero__hintergrund::before { animation: none; }
}

/* Auf dem Handy ist der Rahmen hochkant, „cover" würde daraus einen
   schmalen Mittelstreifen mit zwei halben Gesichtern machen. Das Foto
   läuft dort deshalb als Band über die volle Breite und verschwindet
   danach in Navy — die Gruppe bleibt als Ganzes erkennbar.
   Das ist der Hauptfall: Die Seite wird per QR-Code aufgerufen.        */
@media (max-width: 739px) {
  .hero__hintergrund {
    /* 140 % zeigt genau die Bildmitte, in der die sechs stehen. Mehr Zoom
       schneidet die äußeren beiden an, weniger macht alle unkenntlich.
       Kleinere Bildfassung: 900 px reichen für jedes Telefon, 35 KB. */
    background-image: url('assets/img/hero-team-900.webp');
    background-size: 140% auto;
    background-position: 50% 0;
  }
  /* Feste Pixelwerte statt Prozent: Der Verlauf muss dort auslaufen, wo das
     Band endet — und nicht dort, wo ein Anteil der Abschnittshöhe liegt. */
  .hero__hintergrund::after {
    background: linear-gradient(to bottom,
      rgba(0,15,25,.30) 0,
      rgba(0,15,25,.14) 100px,
      rgba(0,15,25,.86) 248px,
      var(--navy-900) 290px);
  }
}

.hero__grid {
  position: relative;
  padding-top: clamp(40px, 5vw, 64px);
}

/* Der Text beginnt unterhalb des Bandes. Über dem Foto liegt nur die
   Kopfzeile, dort zeigt das Bild ohnehin nur die Hallendecke.
   Muss nach der Grundregel stehen, sonst gewinnt deren padding-top. */
@media (max-width: 739px) {
  .hero__grid { padding-top: 212px; }
}

/* Das Team steht in der Bildmitte. Der Text bleibt deshalb in der linken
   Hälfte, damit die Gesichter frei bleiben. */
.hero__text { min-width: 0; }
@media (min-width: 940px) {
  .hero__text { max-width: 54%; }
}

.hero__h1 {
  margin: 0 0 26px;
  font-size: clamp(33px, 3.8vw, 53px);
  line-height: 1.09;
  font-weight: 600;
  letter-spacing: -.028em;
  color: #fff;
  text-wrap: balance;
}
.hero__h1 em {
  display: inline-block;
  margin-top: .18em;
  font-style: normal;
  color: var(--teal);
}

.hero__lead {
  margin: 0 0 38px;
  max-width: 30em;
  font-size: clamp(16px, 1.9vw, 18.5px);
  line-height: 1.7;
  color: var(--blue-100);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Fristanzeige — angelehnt an ein Rettungszeichen: grünes Feld mit
   Richtungspfeil, daneben die Frist. Leiser als die Knöpfe, lauter
   als die Belegzeile. */
.hero__frist {
  /* Ausdrücklicher Abstand nach unten: .hero__ctas bringt selbst
     keinen mit, ohne ihn klebt der Check-Knopf am Badge. */
  margin: 22px 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(145,197,121,.4);
  background: rgba(145,197,121,.09);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--green);
}
.hero__frist-zeichen {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: var(--green);
  color: var(--navy-900);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

/* Belegzeile unter den Knöpfen: leise, aber vorhanden. Sie soll gelesen
   werden können, ohne mit den Schaltflächen zu konkurrieren. */
.hero__belege {
  margin: 26px 0 0;
  font-size: 13px;
  letter-spacing: .02em;
  /* Nicht --blue-400: das läge bei 13 px unter der AA-Kontrastgrenze. */
  color: var(--blue-100);
  opacity: .78;
}

/* Einzug beim Laden: kurzer Weg von rechts, gestaffelt von oben nach
   unten. Nur opacity und transform — nichts springt, nichts verschiebt
   das Layout. Läuft einmal je Seitenaufruf; bei reduzierter Bewegung
   endet sie durch die globale .01ms-Regel sofort im Endzustand. */
@keyframes hero-ein {
  from { opacity: 0; transform: translateX(28px); }
}
.hero .eyebrow,
.hero__h1,
.hero__lead,
.hero__frist,
.hero__ctas,
.hero__belege {
  animation: hero-ein .55s ease-out both;
}
.hero__h1     { animation-delay: .10s; }
.hero__lead   { animation-delay: .22s; }
.hero__frist  { animation-delay: .34s; }
.hero__ctas   { animation-delay: .46s; }
.hero__belege { animation-delay: .58s; }

/* ─────────────────────────── Schaltflächen ─────────────────────────── */

.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 15px 28px;
  border-radius: 2px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }

.btn--primaer {
  background: var(--green);
  color: var(--navy-900);
}
.btn--primaer:hover { background: var(--teal); }

.btn--sekundaer {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.28);
}
.btn--sekundaer:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.btn__zusatz {
  font-size: 12px;
  font-weight: 500;
  opacity: .72;
  letter-spacing: .02em;
}

/* ═══════════════════════════ 02 · PROBLEM ═══════════════════════════ */

.problem {
  background: #fff;
  padding-block: var(--sektion);
}

.felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 1px;
  background: rgba(13,25,42,.10);
  border-block: 1px solid rgba(13,25,42,.10);
}

.feld {
  background: #fff;
  padding: 34px clamp(22px, 2.6vw, 32px) 38px;
}

.feld__nr {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--blue-400);
  font-variant-numeric: tabular-nums;
}

.feld__titel {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--navy-800);
  position: relative;
  padding-bottom: 14px;
}
.feld__titel::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 26px; height: 2px;
  background: var(--teal);
}

.feld__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--blue-600);
}

.feld--rot .feld__titel { color: var(--rot); }
.feld--rot .feld__titel::after { background: var(--rot); }

.zitat {
  /* Gleicher Abstand über und unter dem Satz: oben so viel Raum wie das
     Sektions-Padding darunter — der Satz sitzt mittig zwischen den Sektionen. */
  margin: var(--sektion) 0 0;
  padding-left: clamp(20px, 3vw, 32px);
  border-left: 3px solid var(--green);
}
.zitat p {
  margin: 0;
  font-size: clamp(21px, 3vw, 30px);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -.018em;
  color: var(--navy-800);
  text-wrap: balance;
}

/* ═══════════════════════ 05 · PFLICHTEN-CHECK ═══════════════════════ */

.check {
  background: var(--navy-800);
  padding-block: var(--sektion);
}

/* Score-Panel — klebt oben mit, damit der Balken beim Beantworten sichtbar bleibt */
.score {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--navy-900);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 2px;
  padding: 22px clamp(20px, 2.6vw, 30px) 20px;
  margin-bottom: 40px;
  box-shadow: 0 18px 44px -20px rgba(0,0,0,.8);
}

.score__zeile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.score__label {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue-400);
}

.score__status {
  margin: 0;
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 600;
  color: #fff;
  transition: color .3s;
}

.score__wert {
  margin: 0;
  font-size: clamp(34px, 5.6vw, 48px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}

.score__balken {
  height: 5px;
  background: rgba(255,255,255,.11);
  border-radius: 2px;
  overflow: hidden;
}
.score__balken-fuellung {
  height: 100%;
  width: 0;
  background: var(--green);
  border-radius: 2px;
  transition: width .55s cubic-bezier(.22,.61,.36,1), background .35s;
}

.score__fortschritt {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--blue-400);
  font-variant-numeric: tabular-nums;
}

/* Zustandsfarben */
.score.ist-rot       .score__wert,
.score.ist-rot       .score__status { color: var(--rot); }
.score.ist-rot       .score__balken-fuellung { background: var(--rot); }
.score.ist-bernstein .score__wert,
.score.ist-bernstein .score__status { color: var(--bernstein); }
.score.ist-bernstein .score__balken-fuellung { background: var(--bernstein); }
.score.ist-gruen     .score__wert,
.score.ist-gruen     .score__status { color: var(--green); }

/* ─── Fragen ─── */

.fragen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: rgba(255,255,255,.09);
  border-block: 1px solid rgba(255,255,255,.09);
}

.frage { background: var(--navy-800); }
.frage:focus { outline: none; }

.frage--offen {
  padding: 30px clamp(20px, 2.6vw, 30px) 34px;
  display: grid;
  gap: 22px;
  animation: einblenden .35s ease both;
}

/* ─── Erledigte Frage: eine Zeile, jederzeit wieder zu öffnen ─── */

.erledigt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 15px clamp(20px, 2.6vw, 30px);
  background: #0a1523;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .18s;
}
.erledigt:hover { background: #10203a; }
.erledigt:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

.erledigt__nr {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-400);
  font-variant-numeric: tabular-nums;
}
.erledigt__nr::before {
  content: '';
  width: 13px; height: 7px;
  border-left: 2px solid var(--blue-400);
  border-bottom: 2px solid var(--blue-400);
  transform: rotate(-45deg) translate(1px, -2px);
}

.erledigt__kurz {
  font-size: 15px;
  font-weight: 500;
  color: var(--blue-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erledigt__wert {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
}
.erledigt__wert.ist-negativ { color: var(--rot); }
.erledigt__wert.ist-halb    { color: var(--bernstein); }

.frage__kopf { display: flex; gap: 16px; align-items: baseline; }

.frage__nr {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-400);
  font-variant-numeric: tabular-nums;
  flex: none;
  padding-top: 3px;
}

.frage__text {
  margin: 0;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.55;
  font-weight: 500;
  color: #fff;
  letter-spacing: -.008em;
}

.frage__kern {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 2px;
  background: rgba(145,197,121,.14);
  border: 1px solid rgba(145,197,121,.32);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  vertical-align: middle;
  white-space: nowrap;
}

.antworten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.antwort { position: relative; }
.antwort input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.antwort label {
  display: block;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 2px;
  font-size: 14.5px;
  font-weight: 500;
  text-align: center;
  color: var(--blue-100);
  cursor: pointer;
  user-select: none;
  transition: border-color .18s, background .18s, color .18s;
}
.antwort label:hover {
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.antwort input:focus-visible + label {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.antwort input:checked + label {
  background: rgba(145,197,121,.13);
  border-color: var(--green);
  color: #fff;
}
.antwort input:checked + label.ist-negativ {
  background: rgba(201,106,94,.13);
  border-color: var(--rot);
}
.antwort input:checked + label.ist-halb {
  background: rgba(217,164,65,.13);
  border-color: var(--bernstein);
}

/* ─── Ergebnis ─── */

.ergebnis {
  margin-top: 44px;
  padding: clamp(30px, 4vw, 44px);
  background: var(--navy-900);
  border: 1px solid rgba(255,255,255,.10);
  border-left: 3px solid var(--green);
  border-radius: 2px;
  animation: einblenden .5s ease both;
}
.ergebnis.ist-rot       { border-left-color: var(--rot); }
.ergebnis.ist-bernstein { border-left-color: var(--bernstein); }

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

.ergebnis__titel {
  margin: 0 0 16px;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}

.ergebnis__text {
  margin: 0;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--blue-100);
}
.ergebnis__text strong { color: #fff; font-weight: 600; }

/* Zeitliche Einordnung unter dem Ergebnistext — grün abgesetzt,
   damit die Frist als eigener Fakt lesbar bleibt. */
.ergebnis__frist {
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--green);
  max-width: 72ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--blue-100);
}

.ergebnis__cta {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.11);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.ergebnis__cta-text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  max-width: 32ch;
}

/* Weitergabe — bewusst leiser als der Haupt-CTA darüber. */
.ergebnis__weitergabe {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.ergebnis__weitergabe-text {
  margin: 0;
  font-size: 14px;
  color: var(--blue-100);
  opacity: .82;
}
.ergebnis__weitergabe-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.weitergabe-knopf {
  appearance: none;
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.weitergabe-knopf:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.weitergabe-knopf.ist-kopiert {
  border-color: var(--green);
  color: var(--green);
}

/* Fallback-Feld, falls der Browser das Kopieren verweigert. */
.weitergabe-feld {
  flex-basis: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--blue-100);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.2);
}

/* ═══════════════════════ 03 · NORMENLAGE ═══════════════════════ */

.normen {
  background: var(--white-blue);
  padding-block: var(--sektion);
}

.normen__liste {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  /* min(…, 100%): unterhalb von 320 px Spaltenbreite schrumpfen die
     Karten mit, statt seitlich aus dem Bild zu laufen. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.norm {
  background: #fff;
  border-top: 3px solid var(--teal);
  padding: clamp(28px, 3vw, 38px);
}

.norm__datum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.norm__frist {
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 500;
  color: var(--blue-400);
}

.norm__titel {
  margin: 0 0 16px;
  font-size: clamp(19px, 2.4vw, 23px);
  font-weight: 600;
  letter-spacing: -.014em;
  color: var(--navy-800);
}

.norm__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.72;
  color: var(--blue-600);
}
.norm__text strong { color: var(--navy-800); font-weight: 600; }

.normen__fuss {
  margin: clamp(32px, 4vw, 44px) 0 0;
  max-width: 76ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--blue-400);
}

/* ═══════════════════════ 04 · RISIKO ═══════════════════════ */

.risiko {
  background: var(--navy-800);
  padding-block: var(--sektion);
}

.takte {
  list-style: none;
  margin: 0 0 clamp(44px, 6vw, 68px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.11);
  border-block: 1px solid rgba(255,255,255,.11);
}

.takt {
  background: var(--navy-800);
  padding: 28px clamp(18px, 2.2vw, 26px) 32px;
}
.takt__intervall {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
}
.takt__inhalt {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
}

.beweis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.beweis__titel {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: #fff;
  padding-bottom: 14px;
  position: relative;
}
.beweis__titel::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 26px; height: 2px;
  background: var(--teal);
}
.beweis__titel--rot { color: var(--rot); }
.beweis__titel--rot::after { background: var(--rot); }

.beweis__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--blue-100);
}

/* ═══════════════════════ 06 · LÖSUNG ═══════════════════════ */

.loesung {
  background: #fff;
  padding-block: var(--sektion);
}

/* Zweispaltiger Auftakt: links die Aussage, rechts das Video. Erst ab
   940 px — darunter stünde das Video in einer zu schmalen Spalte. */
.loesung__auftakt {
  display: grid;
  gap: clamp(32px, 4vw, 60px);
  margin-bottom: clamp(44px, 6vw, 68px);
}
@media (min-width: 940px) {
  .loesung__auftakt {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}
/* Die 720-px-Begrenzung des Abschnittskopfs gilt hier nicht — die Spalte
   begrenzt bereits. Der Abstand nach unten kommt vom Raster. */
.loesung__auftakt .sektion-kopf {
  max-width: none;
  margin-bottom: 0;
}

.video { margin: 0; }
.video__rahmen {
  position: relative;
  background: var(--navy-900);
  overflow: hidden;
}
.video__medium {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.video__zeile {
  margin-top: 14px;
  font-size: 14px;
  color: var(--blue-400);
  border-left: 2px solid var(--teal);
  padding-left: 12px;
}
/* In der halben Spalte sind die eingeblendeten Kleintexte des Videos zu
   klein zum Lesen. Auf dem Handy entfällt der Hinweis: Dort läuft das
   Video ohnehin im Vollbild und die Spalte ist so breit wie der Bildschirm. */
.video__hinweis { display: none; }
@media (min-width: 940px) {
  .video__hinweis { display: inline; opacity: .72; }
}

.saeulen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 1px;
  background: rgba(13,25,42,.10);
  border-block: 1px solid rgba(13,25,42,.10);
}
.saeule {
  background: #fff;
  padding: 32px clamp(22px, 2.6vw, 32px) 36px;
}
.saeule__titel {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--navy-800);
  padding-bottom: 14px;
  position: relative;
}
.saeule__titel::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 26px; height: 2px;
  background: var(--green);
}
.saeule__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--blue-600);
}

/* Gegenüberstellung Eigenregie / Safety Contracting. Rechte Spalte trägt
   den grünen Akzent — das Auge soll dort landen. Unter 860 px wird die
   Tabelle zu Karten: ein Thema, darunter beide Seiten untereinander,
   beschriftet über data-spalte. */
.vergleich {
  margin-top: clamp(44px, 6vw, 68px);
}
.vergleich__titel {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 650;
  letter-spacing: -.016em;
  color: var(--navy-800);
}
/* Einzeilige Hinführung: sagt, was die Tabelle zeigt, bevor man liest. */
.vergleich__lead {
  margin: 0 0 clamp(22px, 2.8vw, 32px);
  max-width: 72ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--blue-600);
}
.vergleich__tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.68;
}
.vergleich__leer { border-bottom: 1px solid rgba(13,25,42,.12); }
.vergleich__kopf {
  padding: 0 clamp(16px, 2vw, 26px) 14px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue-600);
  border-bottom: 1px solid rgba(13,25,42,.12);
}
.vergleich__kopf--sc { color: var(--navy-800); }
/* Kennfeld im Stil des Hero-Frist-Badges: die Spalte trägt eine Auszeichnung,
   nicht nur eine Beschriftung. */
.vergleich__kopf-feld {
  display: inline-block;
  padding: 5px 10px;
  background: rgba(145,197,121,.14);
  border: 1px solid rgba(145,197,121,.5);
}
.vergleich__thema {
  width: 24%;
  padding: 18px clamp(16px, 2vw, 26px) 18px 0;
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--navy-800);
  border-bottom: 1px solid rgba(13,25,42,.08);
}
.vergleich__zelle {
  width: 38%;
  padding: 18px clamp(16px, 2vw, 26px);
  vertical-align: top;
  /* Bewusst nicht --blue-600: in dieser Textmasse liest sich Blau wie
     Linktext. Gedecktes Grau-Navy hält die Spalte ruhig. */
  color: rgba(13,25,42,.72);
  border-bottom: 1px solid rgba(13,25,42,.08);
}
.vergleich__zelle--sc {
  background: rgba(145,197,121,.13);
  border-left: 3px solid var(--green);
  color: var(--navy-800);
}
/* Sechs Haken untereinander sind das Scan-Signal: rechts ist es erledigt. */
.vergleich__zelle--sc::before {
  content: '\2713';
  display: inline-block;
  margin-right: 9px;
  font-size: 17px;
  font-weight: 700;
  color: #5da23e;
}
/* Zeile führt sich unter dem Auge — nur Desktop, mobil gibt es kein Hover. */
@media (hover: hover) and (min-width: 860px) {
  .vergleich__tabelle tbody tr:hover .vergleich__thema,
  .vergleich__tabelle tbody tr:hover .vergleich__zelle:not(.vergleich__zelle--sc) {
    background: rgba(13,25,42,.03);
  }
  .vergleich__tabelle tbody tr:hover .vergleich__zelle--sc {
    background: rgba(145,197,121,.2);
  }
}
@media (max-width: 859px) {
  .vergleich__tabelle,
  .vergleich__tabelle tbody,
  .vergleich__tabelle tr,
  .vergleich__thema,
  .vergleich__zelle { display: block; width: auto; }
  .vergleich__tabelle thead { display: none; }
  .vergleich__tabelle tr {
    margin-bottom: 26px;
    border: 1px solid rgba(13,25,42,.10);
  }
  .vergleich__tabelle tr:last-child { margin-bottom: 0; }
  .vergleich__thema {
    padding: 14px 18px 12px;
    border-bottom: 1px solid rgba(13,25,42,.10);
  }
  .vergleich__zelle { padding: 12px 18px 16px; border-bottom: 0; }
  .vergleich__zelle::before {
    content: attr(data-spalte);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--blue-600);
  }
  /* Setzt das Desktop-Häkchen zurück: mobil trägt das ::before das
     Spaltenlabel, die Botschaft macht der grüne Balken. */
  .vergleich__zelle--sc::before {
    content: attr(data-spalte);
    display: block;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--navy-800);
  }
}

/* Nebenweg Kauf — eine Zeile, kein eigener Kasten: Er soll gefunden
   werden, aber nicht mit dem Contracting-Argument konkurrieren. */
.kaufweg {
  margin: clamp(28px, 3.4vw, 40px) 0 0;
  max-width: 82ch;
  font-size: 16px;
  line-height: 1.78;
  color: var(--blue-600);
}
.kaufweg strong { color: var(--navy-800); font-weight: 600; }

.klarstellung {
  margin-top: clamp(40px, 5vw, 60px);
  padding: clamp(28px, 3.4vw, 40px);
  background: var(--white-blue);
  border-left: 3px solid var(--blue-600);
}
.klarstellung__titel {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--navy-800);
}
.klarstellung__text {
  margin: 0;
  max-width: 82ch;
  font-size: 16px;
  line-height: 1.78;
  color: var(--blue-600);
}
.klarstellung__text strong { color: var(--navy-800); font-weight: 600; }

/* Handlungsaufruf in der Seitenmitte. Dunkel abgesetzt, damit er sich vom
   weißen Lösungsabschnitt und der hellblauen Klarstellung darüber löst —
   sonst liest er sich als dritter Absatz und wird überscrollt. */
.zwischen-cta {
  margin-top: clamp(40px, 5vw, 60px);
  padding: clamp(28px, 3.4vw, 40px);
  background: var(--navy-800);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.zwischen-cta__text {
  margin: 0;
  max-width: 46ch;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.012em;
  color: #fff;
}
.zwischen-cta__zusatz {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255,255,255,.74);
}
/* Auf dem Telefon steht der Knopf unter dem Text und über die volle
   Breite — nebeneinander bliebe für beides zu wenig Platz. */
@media (max-width: 620px) {
  .zwischen-cta__text { max-width: none; }
  .zwischen-cta .btn { width: 100%; }
}

/* ═══════════════════════ 07 · VERTRAUEN ═══════════════════════ */

.vertrauen {
  background: var(--white-blue);
  padding-block: var(--sektion);
}

.zahlen {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 1px;
  background: rgba(13,25,42,.12);
  border-block: 1px solid rgba(13,25,42,.12);
}
.zahl {
  background: var(--white-blue);
  padding: 30px clamp(20px, 2.4vw, 28px) 34px;
}
.zahl__wert {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.026em;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}
.zahl__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--blue-600);
}

.unabhaengig {
  margin-top: clamp(36px, 4.5vw, 52px);
  padding-left: clamp(20px, 3vw, 32px);
  border-left: 3px solid var(--green);
}
.unabhaengig p {
  margin: 0;
  max-width: 74ch;
  font-size: clamp(17px, 2.1vw, 19px);
  line-height: 1.7;
  color: var(--navy-800);
}

/* ───────────────────────────── Leitsatz ──────────────────────────────
   Bewusst derselbe Ton wie der Pflichten-Check darüber: Ein eigener,
   dunklerer Ton hätte eine sichtbare Kante erzeugt und den Satz wie einen
   aufgeklebten Block wirken lassen. So schließt er den dunklen Block ab,
   statt ein weiterer Abschnitt zu sein. Oben deshalb weniger Luft als
   unten — er gehört nach oben, nicht nach unten.                        */
.leitsatz {
  padding: 0 0 clamp(72px, 10vw, 128px);
  background: var(--navy-800);
}
.leitsatz__text {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -.022em;
  color: #fff;
}
.leitsatz__akzent {
  font-style: italic;
  color: var(--green);
}

/* ──────────────── Kundenzitat (mit Quellenangabe) ──────────────────
   Eigener Baustein, nicht .zitat: Jenes ist ein Aussagezitat ohne
   Urheber, dieses trägt einen Namen und braucht deshalb eine Quellzeile. */
.kundenzitat {
  margin: clamp(44px, 6vw, 68px) 0 0;
  padding-left: clamp(20px, 3vw, 32px);
  border-left: 3px solid var(--green);
}
.kundenzitat__text {
  margin: 0 0 18px;
  max-width: 46ch;
  font-size: clamp(20px, 2.7vw, 27px);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--navy-800);
}
.kundenzitat__quelle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font-size: 15px;
}
.kundenzitat__name  { font-weight: 600; color: var(--blue-700); }
.kundenzitat__rolle { color: var(--blue-400); }

.referenzen { margin-top: clamp(44px, 6vw, 68px); }
.referenzen__label {
  margin: 0 0 20px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-400);
}
.referenzen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Feste Spaltenzahl statt auto-fit: Bei acht Logos entstünde sonst eine
     angebrochene letzte Reihe, und sehr breite Wortmarken hätten zu wenig
     Platz. Auf dem Handy dürfen sie sich über beide Spalten legen.        */
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(13,25,42,.12);
  border: 1px solid rgba(13,25,42,.12);
}
/* In zwei Spalten sind sehr breite Wortmarken nicht lesbar. Sie bekommen
   die volle Breite — und rutschen ans Ende, weil eine vollbreite Zelle
   sonst die angefangene Reihe davor als Lücke stehen lässt. */
.referenz:has(.referenz__logo--breit),
.referenz:has(.referenz__logo--sehrbreit) {
  order: 1;
  grid-column: 1 / -1;
}

@media (min-width: 720px) {
  .referenzen__liste { grid-template-columns: repeat(4, 1fr); }
  .referenz:has(.referenz__logo--breit),
  .referenz:has(.referenz__logo--sehrbreit) {
    order: 0;
    grid-column: auto;
  }
}
/* Feste Höhe für die Logozeile, damit die Branchen aller Zellen
   auf einer Linie liegen — unabhängig davon, wie hoch das Logo ist. */
.referenz {
  display: grid;
  grid-template-rows: 52px auto;
  align-content: center;
  justify-items: center;
  gap: 14px;
  min-height: 128px;
  padding: 24px 18px;
  background: var(--white-blue);
}
/* Die Dateien sind einfarbig türkis; brightness(0) macht daraus reines
   Schwarz, das über die Deckkraft auf ein ruhiges Grau zurückgenommen wird.
   Der Alphakanal bleibt dabei erhalten.                                  */
.referenz__logo {
  align-self: center;
  width: auto;
  max-width: 100%;
  height: 34px;
  object-fit: contain;
  filter: brightness(0);
  opacity: .58;
}
/* Je breiter eine Wortmarke, desto niedriger muss sie stehen —
   sonst überstrahlt sie bei gleicher Höhe die kompakteren Marken. */
.referenz__logo--breit     { height: 24px; }
.referenz__logo--sehrbreit { height: 19px; }
/* Flächenlogos: Hier ist die gefüllte Form selbst die Marke, die Schrift
   ist ausgespart. Als dunkle Kachel wögen sie zu schwer, deshalb heller. */
.referenz__logo--flaeche   { height: 46px; opacity: .38; }

.referenz__branche {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--blue-400);
}

/* ═══════════════════════ 08 · ABLAUF UND KONTAKT ═══════════════════════ */

.ablauf {
  background: var(--navy-900);
  padding-block: var(--sektion);
}

.schritte {
  list-style: none;
  margin: 0 0 clamp(56px, 7vw, 88px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.11);
  border-block: 1px solid rgba(255,255,255,.11);
}
.schritt {
  background: var(--navy-900);
  padding: 30px clamp(20px, 2.4vw, 28px) 36px;
}
.schritt__nr {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.schritt__titel {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: #fff;
}
.schritt__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--blue-100);
}

.kontakt {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 900px) {
  .kontakt { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
}

.kontakt__titel {
  margin: 0 0 14px;
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff;
}
.kontakt__lead {
  margin: 0 0 28px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--blue-100);
}
/* ─── Ansprechpartner ─── */
.ansprech {
  margin: 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.13);
  display: flex;
  align-items: center;
  gap: 30px;
}
.ansprech__foto {
  flex: none;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  object-fit: cover;
  /* Der Porträthintergrund ist dunkelgrün; ein zarter Ring hebt ihn vom
     ebenfalls dunklen Panel ab, ohne wie ein Rahmen zu wirken. */
  box-shadow: 0 0 0 1px rgba(122,197,182,.35), 0 6px 18px rgba(0,0,0,.35);
}
.ansprech__daten {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ansprech__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
}
.ansprech__name {
  font-size: 27px;
  font-weight: 600;
  color: #fff;
}
.ansprech__rolle {
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--blue-400);
  margin-bottom: 10px;
}
.ansprech__kontakt {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 19px;
  line-height: 1.7;
}
.ansprech__kontakt a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(122,197,182,.5);
}
.ansprech__kontakt a:hover { color: var(--teal); }
/* Auf schmalen Bildschirmen bliebe neben dem großen Foto zu wenig Platz
   für Name und Kontaktdaten — dort etwas kleiner. */
@media (max-width: 480px) {
  .ansprech { gap: 18px; }
  .ansprech__foto { width: 112px; height: 112px; }
  .ansprech__name { font-size: 21px; }
  .ansprech__kontakt { font-size: 16.5px; }
}

/* ─── Formular ─── */

.formular__paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 20px;
}
/* „Frau“ oder „Herr“ braucht keine halbe Zeilenbreite — die Anrede steht
   schmal neben Vor- und Nachname und rückt erst auf schmalen Geräten
   darüber. Drei Spalten brauchen mehr Platz als zwei, deshalb liegt der
   Umbruchpunkt höher als früher. */
.formular__paar--anrede { grid-template-columns: 180px 1fr 1fr; }
@media (max-width: 720px) {
  .formular__paar--anrede { grid-template-columns: 1fr; }
}

.feldgruppe { margin: 0 0 20px; display: grid; gap: 7px; }
.feldgruppe label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--blue-100);
}

.feldgruppe input,
.feldgruppe select,
.feldgruppe textarea {
  width: 100%;
  padding: 13px 15px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 2px;
  font: inherit;
  font-size: 16px;
  color: #fff;
  transition: border-color .18s, background .18s;
}
.feldgruppe textarea { resize: vertical; line-height: 1.6; }
.feldgruppe input:hover,
.feldgruppe select:hover,
.feldgruppe textarea:hover { border-color: rgba(255,255,255,.34); }
/* Das Auswahlfeld fehlt hier bewusst: Die Kurzform „background“ würde sein
   Hintergrundbild — den Pfeil — mit entfernen. Es bekommt seine eigene
   Fokus-Regel weiter unten. */
.feldgruppe input:focus,
.feldgruppe textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(255,255,255,.08);
}

/* Das Auswahlfeld bekommt einen deckenden Hintergrund: Die aufgeklappte
   Liste zeichnet der Browser selbst und übernimmt dabei diese Farbe —
   durchscheinendes Weiß ergäbe dort weiße Schrift auf Weiß. */
.feldgruppe select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-color: #14202e;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.feldgruppe select:focus {
  outline: none;
  border-color: var(--teal);
  background-color: #1a2839;
}
.feldgruppe select option { color: #fff; background: #14202e; }

/* Tastaturfokus zusätzlich zum teal gefärbten Rand — derselbe Ring wie
   überall sonst auf der Seite (2px teal, 2px Abstand). */
.feldgruppe input:focus-visible,
.feldgruppe select:focus-visible,
.feldgruppe textarea:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Fehlerzustand: greift erst, nachdem das Feld berührt wurde
   (:user-invalid), nicht schon beim Laden — sonst stünden alle leeren
   Pflichtfelder sofort rot da. */
.feldgruppe input:user-invalid,
.feldgruppe select:user-invalid,
.feldgruppe textarea:user-invalid {
  border-color: var(--rot);
}
.feldgruppe:has(:user-invalid)::after {
  content: 'Bitte dieses Feld prüfen.';
  font-size: 13px;
  color: var(--rot);
}

.haken {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin: 4px 0 28px;
  padding: 16px 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 2px;
}
.haken input {
  width: 18px; height: 18px;
  margin: 2px 0 0;
  accent-color: var(--green);
}
.haken label {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--blue-100);
  cursor: pointer;
}
.haken__stand {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--blue-400);
}
.haken__stand.ist-bereit { color: var(--teal); }

.honig {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formular__senden { width: 100%; }

/* Nach dem Absenden gesperrt, damit ein zweiter Klick die Anfrage nicht
   ein zweites Mal verschickt. Sichtbar gedaempft — sonst wirkt der Knopf
   kaputt, statt beschaeftigt. */
.formular__senden--laeuft {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

.formular__hinweis {
  margin: 20px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--blue-400);
}
.formular__hinweis strong { color: var(--blue-100); font-weight: 600; }
.formular__hinweis a { color: var(--blue-100); }

/* ═══════════════════════════ FUSSZEILE ═══════════════════════════ */

.fuss {
  background: var(--navy-800);
  border-top: 1px solid rgba(255,255,255,.09);
  padding-block: clamp(48px, 6vw, 76px) 36px;
}

.fuss__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: clamp(32px, 4vw, 44px);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.fuss__logo {
  height: 48px;
  width: auto;
  opacity: .9;
}
.fuss__claim {
  margin: 0;
  font-size: 14.5px;
  font-style: italic;
  color: var(--blue-400);
}

.fuss__recht {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 4vw, 60px);
  padding-block: clamp(32px, 4vw, 48px);
}

.recht__titel {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
}
.recht__text p {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--blue-400);
}
.recht__text a { color: var(--blue-100); }
/* Zwischenüberschriften der Rechtstexte. Die Vorlage sah navy vor — die
   Fußzeile ist selbst navy, deshalb hell gesetzt. */
.recht__unter {
  margin: 26px 0 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blue-100);
}
.recht__unter:first-of-type { margin-top: 14px; }
.recht__text ul {
  margin: 0 0 14px 18px;
  padding: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--blue-400);
}
.recht__text li { margin-bottom: 4px; }
.recht__text strong { color: var(--blue-100); font-weight: 600; }
.recht__stand {
  margin-top: 26px !important;
  font-size: 13px !important;
  opacity: .7;
}
.formular__optional { font-weight: 400; opacity: .6; }

.fuss__zeile {
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: 13px;
  color: var(--blue-400);
}

/* Verweise auf Impressum und Datenschutzhinweise. Auf der Startseite stand
   dort früher der vollständige Rechtstext. */
.fuss__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding-block: clamp(26px, 3vw, 38px);
}
.fuss__weg {
  font-size: 14.5px;
  color: var(--blue-100);
  text-decoration: none;
  border-bottom: 1px solid rgba(188,220,245,.3);
}
.fuss__weg:hover { color: #fff; border-bottom-color: #fff; }

/* Kontaktzeile im Fuß: Telefon und E-Mail als direkte Wege neben dem
   Formular — wer bis hier scrollt, sucht meist genau das. */
.fuss__kontakt {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding-bottom: clamp(26px, 3vw, 38px);
  font-size: 14.5px;
  color: var(--blue-400);
}
.fuss__kontakt a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(122,197,182,.5);
}
.fuss__kontakt a:hover { color: var(--teal); }

/* ═════════════ RECHTSSEITEN (Impressum, Datenschutzhinweise) ═════════════
   Eigene Seiten seit dem 11.09.2026. Sie erben die gesamte Textgestaltung
   von .recht__* aus der früheren Fußzeile — die ist auf dunklen Grund
   ausgelegt, deshalb liegt der Inhaltsbereich hier auf Navy.
   ═══════════════════════════════════════════════════════════════════════ */

.rechtkopf {
  background: var(--navy-900);
  padding-block: clamp(18px, 2.4vw, 26px);
}
.rechtkopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.rechtkopf__logo { height: clamp(42px, 4.4vw, 56px); width: auto; }

/* Auf den Fachseiten (Prüfpflichten, Leistungen) bleibt die Leiste beim
   Scrollen oben stehen — wie das geheftete Band der Startseite. Anders als
   dort braucht es kein Skript: Die Leiste steckt in keinem Hero, sie steht
   direkt unter <body>, position: sticky genügt. Impressum und Datenschutz
   behalten den mitscrollenden schlanken Kopf. */
.rechtkopf--haftend {
  position: sticky;
  top: 0;
  z-index: 80;                /* unter dem Einwilligungsbalken (90) */
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.rechtkopf__zurueck {
  flex: none;
  font-size: 14.5px;
  color: var(--blue-100);
  text-decoration: none;
}
.rechtkopf__zurueck::before { content: '\2190\00a0'; }
.rechtkopf__zurueck:hover { color: #fff; }

.rechtseite {
  background: var(--navy-800);
  padding-block: clamp(44px, 6vw, 80px) clamp(48px, 7vw, 92px);
}
/* Schmale Spalte: Rechtstexte sind reiner Fließtext, über die volle
   Seitenbreite wären die Zeilen unlesbar lang. */
.rechtseite__innen { max-width: 760px; }
.rechtseite__titel {
  margin: 0 0 28px;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}

/* Ohne Rechtsteil trägt die Fußzeile nur noch Logo, Wege und Zeile. */
.fuss--schlank { padding-block: clamp(40px, 5vw, 60px) 36px; }

/* ─────────────────── Rückmeldung nach dem Absenden ─────────────────── */
.rueckmeldung {
  margin-bottom: 22px;
  padding: clamp(20px, 3vw, 28px);
  border-left: 3px solid var(--green);
  background: rgba(145,197,121,.09);
}
/* Fehlerfall: Der Kasten steht über dem weiterhin sichtbaren Formular. */
.rueckmeldung--fehler {
  border-left-color: var(--rot);
  background: rgba(201,106,94,.1);
}
.rueckmeldung__titel {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}
.rueckmeldung__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--blue-400);
}

/* ─────────────────── Einwilligung (TDDDG § 25) ──────────────────────
   Der Balken erscheint erst, wenn noch keine Entscheidung vorliegt.
   Beide Schaltflächen sind bewusst gleich gestaltet — eine optisch
   bevorzugte Zustimmung wäre keine freiwillige Einwilligung.          */
.einwilligung {
  position: fixed;
  z-index: 90;
  right: 0;
  bottom: 0;
  left: 0;
  padding: clamp(18px, 3vw, 24px) var(--rand);
  border-top: 2px solid var(--green);
  background: rgba(13,25,42,.97);
  backdrop-filter: blur(8px);
  box-shadow: 0 -14px 40px rgba(0,0,0,.35);
}
.einwilligung[hidden] { display: none; }

.einwilligung__inhalt {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.einwilligung__titel {
  margin: 0;
  font-size: clamp(18px, 3vw, 21px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}
.einwilligung__text {
  margin: 0;
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--blue-400);
}
.einwilligung__text strong { color: var(--blue-100); font-weight: 600; }
.einwilligung__text a { color: var(--blue-100); }

.einwilligung__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.einwilligung__knopf {
  flex: 1 1 160px;
  padding: 13px 26px;
  border: 1px solid var(--blue-400);
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.einwilligung__knopf:hover {
  border-color: var(--green);
  background: rgba(145,197,121,.12);
}

/* Ab Tablet stehen Text und Schaltflächen nebeneinander. */
@media (min-width: 760px) {
  .einwilligung__inhalt {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'titel  knoepfe' 'text  knoepfe';
    column-gap: 40px;
    row-gap: 10px;
    align-items: center;
  }
  .einwilligung__titel   { grid-area: titel;   }
  .einwilligung__text    { grid-area: text;    }
  .einwilligung__knoepfe { grid-area: knoepfe; flex-wrap: nowrap; }
  .einwilligung__knopf   { flex: 0 0 auto; }
}

/* Widerruf in der Fußzeile — sieht aus wie ein Link, ist ein Knopf. */
.fuss__einwilligung {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--blue-100);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fuss__einwilligung:hover { color: #fff; }

/* Verweis auf das Mutterhaus conled.de in der ©-Zeile. */
.fuss__zeile a {
  color: var(--blue-100);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fuss__zeile a:hover { color: #fff; }

/* „Nach oben“-Pfeil unten rechts. Erscheint per JS (Klasse --sichtbar),
   sobald etwa eine Bildschirmhöhe gescrollt ist; ohne JS bleibt er weg. */
.nach-oben {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;                /* unter Kopfzeile (80) und Balken (90) */
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s .25s;
}
.nach-oben--sichtbar {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s ease, transform .25s ease;
}
.nach-oben:hover { border-color: rgba(255,255,255,.5); }

/* Das Logo der Startseite ist ein Verweis an den Seitenanfang. */
.kopf__heim { display: inline-flex; line-height: 0; }

/* ═══════════════════ UNTERSEITEN (Fach- und Leistungsseite) ═══════════════════
   Die Unterseiten nutzen die volle Designsprache der Startseite — Sektionen im
   Hell-Dunkel-Wechsel, dieselben Bausteine (.takte, .schritte, .saeulen,
   .klarstellung, .zwischen-cta). Hier steht nur, was neu dazukommt.
   ═══════════════════════════════════════════════════════════════════════════ */

.abschnitt { padding-block: var(--sektion); }
.abschnitt--dunkel { background: var(--navy-800); }
.abschnitt--nacht  { background: var(--navy-900); }
.abschnitt--blau   { background: var(--white-blue); }
/* Der Auftakt sitzt direkt unter der Kopfleiste — oben etwas knapper. */
.abschnitt--auftakt { padding-block: clamp(48px, 6vw, 88px) clamp(48px, 5vw, 72px); }
.abschnitt--auftakt .sektion-kopf { margin-bottom: 0; }
/* Zwischen Auftakt und erster Sektion treffen zwei dunkle Flächen
   aufeinander — der volle Sektionsabstand wirkt dort wie ein Loch.
   Die Folgesektion rückt deshalb näher heran. */
.abschnitt--auftakt + .abschnitt { padding-top: clamp(56px, 7vw, 96px); }
/* Gleiches Prinzip zwischen zwei hellen Flächen (weiß ↔ hellblau): der
   doppelte Sektionsabstand wirkt dort bei schwachem Farbkontrast wie ein
   Loch — die Folgesektion trägt diese Klasse und rückt näher heran. */
.abschnitt--dicht { padding-top: clamp(48px, 6vw, 80px); }

/* Fließtext in Sektionen — Maß und Farbe wie .kaufweg der Startseite. */
.text {
  margin: clamp(28px, 3.4vw, 40px) 0 0;
  max-width: 82ch;
  font-size: 16px;
  line-height: 1.78;
  color: var(--blue-600);
}
.text strong { color: var(--navy-800); font-weight: 600; }
.text--hell { color: var(--blue-100); }
.text--hell strong { color: #fff; }

/* Verweise im Fließtext. */
.textlink {
  color: var(--navy-800);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
}
.textlink:hover { color: var(--blue-600); }
.textlink--hell { color: #fff; border-bottom-color: rgba(122,197,182,.5); }
.textlink--hell:hover { color: var(--teal); }

/* Sprungmarken im Auftakt — flache Felder, keine Pillen: die Seite
   arbeitet überall mit Flächen und Linien. */
.sprungmarken {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(28px, 3.4vw, 40px);
}
.sprungmarke {
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.28);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue-100);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.sprungmarke:hover { color: var(--teal); border-color: var(--teal); }
/* Erzwungener Zeilenwechsel in den Sprungmarken: drei Ziele oben,
   zwei unten — wirkt ruhiger als ein zufälliger Umbruch. */
.sprungmarken__umbruch { flex-basis: 100%; height: 0; }

/* Auftakt mit Prüfplakette: Text links, Plakette rechts. Auf schmalen
   Fenstern rückt sie zentriert unter die Sprungmarken. */
.auftakt__grid {
  display: grid;
  gap: clamp(36px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 940px) {
  .auftakt__grid { grid-template-columns: minmax(0, 1fr) auto; }
}
.plakette { margin: 0; justify-self: center; }
.plakette svg {
  display: block;
  width: clamp(180px, 22vw, 270px);
  height: auto;
}

/* Weggabelung im Auftakt der Leistungsseite: die Linien zeichnen sich
   beim Laden selbst (pathLength="1" macht jeden Pfad genau 1 Einheit lang,
   deshalb genügt eine gemeinsame Dash-Regel), Punkte und Beschriftungen
   blenden gestaffelt nach — Verzögerungen stehen als style-Attribut am
   jeweiligen Element im SVG. */
.gabelung { margin: 0; justify-self: center; }
.gabelung svg {
  display: block;
  width: clamp(300px, 38vw, 560px);
  height: auto;
}
.gabelung .g-zug {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: gabel-zug .8s ease-out both;
}
.gabelung .g-ein {
  opacity: 0;
  animation: gabel-ein .5s ease-out both;
}
@keyframes gabel-zug { to { stroke-dashoffset: 0; } }
@keyframes gabel-ein { to { opacity: 1; } }
/* Die globale Reduced-Motion-Regel kürzt nur die Dauer, nicht die
   Verzögerung — ohne diesen Zusatz erschiene die Grafik stückweise. */
@media (prefers-reduced-motion: reduce) {
  .gabelung .g-zug, .gabelung .g-ein { animation-delay: 0s !important; }
}

/* Prüfbuch-Sektion: Kopfzeile links, Produktfoto rechts daneben. */
.pruefbuch__kopf {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(48px, 7vw, 76px);
}
@media (min-width: 940px) {
  .pruefbuch__kopf { grid-template-columns: minmax(0, 1fr) auto; }
}
.pruefbuch__kopf .sektion-kopf { margin-bottom: 0; }
.pruefbuch__bild { margin: 0; justify-self: center; }
.pruefbuch__bild img {
  display: block;
  width: clamp(180px, 20vw, 250px);
  height: auto;
}

/* Contracting-Sektion der Leistungsseite: Text links, Siegel rechts. */
.contracting__grid {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 940px) {
  .contracting__grid { grid-template-columns: minmax(0, 1fr) auto; }
}
.siegel { margin: 0; justify-self: center; }
.siegel svg {
  display: block;
  width: clamp(240px, 28vw, 360px);
  height: auto;
}

/* Baukasten mit sechs Bausteinen: ab mittlerer Breite fest drei je Reihe,
   damit zwei volle Reihen entstehen statt fünf plus eins. */
@media (min-width: 780px) {
  .saeulen--drei { grid-template-columns: repeat(3, 1fr); }
}

/* Kennzeichen im Baukasten: markiert die Herstellerwartung als Pflichtbasis. */
.saeule__marke {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  vertical-align: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy-800);
  background: rgba(145,197,121,.14);
  border: 1px solid rgba(145,197,121,.5);
}

/* FAQ — <details>/<summary>, ohne Skript. Linienbasiert, damit es auf
   weißem und hellblauem Grund gleichermaßen trägt. */
.faq { max-width: 860px; }
.faq__eintrag { border-bottom: 1px solid rgba(13,25,42,.14); }
.faq__eintrag:first-of-type { border-top: 1px solid rgba(13,25,42,.14); }

.faq__frage {
  position: relative;
  padding: 20px 44px 20px 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--navy-800);
  cursor: pointer;
  list-style: none;
}
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--blue-600);
  border-bottom: 2px solid var(--blue-600);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
.faq__eintrag[open] .faq__frage::after { transform: translateY(-30%) rotate(225deg); }
.faq__frage:hover { color: var(--blue-600); }
.faq__frage:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.faq__antwort {
  margin: 0;
  padding: 0 0 24px;
  max-width: 76ch;
  font-size: 16px;
  line-height: 1.78;
  color: var(--blue-600);
}

/* Verweise im dunklen CTA-Kasten der Unterseiten. */
.zwischen-cta__zusatz a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(122,197,182,.5);
}
.zwischen-cta__zusatz a:hover { color: var(--teal); }

/* Verweis am Ende der Normen-Sektion der Startseite. */
.normen__verweis {
  margin: 18px 0 0;
  font-size: 16px;
}

/* ═══════════════ Sanftes Einblenden beim Scrollen ═══════════════
   Nur Sektionsköpfe und Karten-Raster, jede Bewegung genau einmal.
   Der versteckte Startzustand gilt erst, wenn das Skript <html> die
   Klasse js-reveal gibt — ohne JavaScript bleibt alles sichtbar.
   Bei prefers-reduced-motion setzt das Skript die Klasse gar nicht;
   zusätzlich stutzt die globale Regel oben jede Übergangsdauer. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.js-reveal .reveal--sichtbar {
  opacity: 1;
  transform: none;
}

/* ═══════════════ Trennblock (Leistungsseite) ═══════════════ */
.trennblock__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.trennblock__bild {
  position: relative;
  margin: 0;
  line-height: 0;
}
.trennblock__bild img,
.trennblock__bild svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.trennblock__text .h2 {
  color: #fff;
  margin: 0 0 18px;
}
.trennblock__satz {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .78);
}
.trennbild__hinweis {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .55);
}
@media (max-width: 760px) {
  .trennblock__grid {
    grid-template-columns: 1fr;
  }
}