/*
 * Öffentliche Seite von SPÜR.
 *
 * Ersetzt die WordPress-Seite mit Divi. Bewusst ohne Baukasten und ohne
 * JavaScript-Bibliothek: die Seite hat acht Abschnitte und ein
 * Kontaktangebot. Alles, was hier an Ladezeit gespart wird, kommt Besuchern
 * zugute, die sie vom Handy aus einer Gemeindeverwaltung heraus aufrufen.
 *
 * ── Die Gestaltung und warum sie so ist ─────────────────────────────
 *
 * Das Vorbild ist nicht die Baukastenseite, sondern das Prüfprotokoll:
 * gemessen, beschriftet, genau. Daraus kommt alles Weitere.
 *
 *   Grund      Zwei Welten im Wechsel. Dunkles Stahlgrau für die
 *              Abschnitte, die etwas behaupten (Leistungen, Sicherheit,
 *              Kontakt), warmes Sandweiß für die, die etwas erklären.
 *              Der Wechsel gliedert die lange Seite ohne eine einzige
 *              zusätzliche Linie.
 *   Farbe      Das Orange aus dem Logo führt und ist die EINZIGE bunte
 *              Farbe der Oberfläche. Alles andere ist Stahl und Sand.
 *              Bunt ist auf dieser Seite den Fotos vorbehalten – dem
 *              Kletternetz und dem Kind –, und die wirken nur, solange
 *              nichts daneben um Aufmerksamkeit ruft.
 *   Schrift    Systemschrift, aber ausgereizt: sehr groß und eng
 *              gesetzt für Überschriften, dazu eine Schreibmaschinen-
 *              schrift für Normnummern, Zertifikate und Kennzahlen. Eine
 *              Norm ist eine Kennung, keine Prosa, und soll auch so
 *              aussehen.
 *
 *              KEINE Schrift von Google Fonts. Die überträgt bei jedem
 *              Aufruf die IP-Adresse des Besuchers an einen Dritten –
 *              dafür gibt es in Deutschland Urteile, und ein Prüfbüro
 *              braucht das an seiner Kontaktseite am allerwenigsten.
 *   Maß        Ein 4-px-Raster, ein Typenmaßstab mit clamp(), und die
 *              Buchstabenabstände nehmen mit der Größe ab. Große Schrift
 *              braucht enger, kleine braucht weiter.
 *
 * ── Bewegung ────────────────────────────────────────────────────────
 *
 * Reichlich, aber ausnahmslos Zugabe. Zwei Regeln gelten immer:
 *
 *   - Alles, was etwas versteckt, hängt an der Klasse `js`. Ohne Skript
 *     steht die Seite vollständig da.
 *   - Alles entfällt bei „Bewegung reduzieren". Für Menschen mit
 *     vestibulären Beschwerden ist wandernder Inhalt nicht unschön,
 *     sondern übel machend.
 */

:root {
  /* Stahl: der dunkle Grund. Leicht blaugrün gebrochen, nicht neutral –
     ein reines Grau wirkt tot, dieses hier wirkt nach Metall. */
  --tiefe: #101418;
  --tiefe-2: #171d24;
  --tiefe-3: #212a33;
  --tiefe-rand: #2e3944;

  /* Sand: der helle Grund. Warm gebrochen, weil daneben Holz, Rinde und
     Fallschutzkies liegen. Reines Weiß wäre kalt dazu. */
  --sand: #f8f5f0;
  --sand-2: #efe9e0;
  --sand-rand: #ddd4c7;

  /* Signal: das Orange aus dem Logo (#e9880d). Führt allein.

     Drei Abstufungen, und die beiden Nachbarn sind nachgemessen, nicht
     geschätzt. Derselbe Farbton (33,5°), dieselbe Sättigung – nur die
     Helligkeit ändert sich, damit es dieselbe Farbe bleibt:

       --signal        Flächen und Ränder. Auf Sand nur 2,4:1 – deshalb
                       nie als Text auf hellem Grund.
       --signal-dunkel Orange als Schrift auf hellem Grund: 5,10:1 auf
                       Sand, 4,59:1 auf Sand-2. Beides über AA. Der
                       naheliegende Ton #c46e08 der alten Seite kam nur
                       auf 3,4:1 und war damit zu hell.
       --signal-hell   Orange als Schrift auf dunklem Grund: 9,8:1.
                       #e9880d käme dort nur auf 4,4:1. */
  --signal: #e9880d;
  --signal-dunkel: #995909;
  --signal-hell: #ffab45;

  /* Text */
  --text: #14181c;
  --text-leise: #56616d;
  --text-hell: #f4f6f8;
  --text-hell-leise: #a7b3c0;

  --breite: 1180px;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --luft: clamp(3.5rem, 9vw, 7rem);
  --radius: 14px;

  --schrift:
    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  /* Für Normnummern, Zertifikate, Kennzahlen. Eine Kennung ist keine Prosa. */
  --schrift-technisch:
    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
    monospace;

  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sonst verschwindet die Überschrift eines Abschnitts beim Sprung hinter
     der klebenden Kopfzeile. */
  scroll-padding-top: 6.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--sand);
  overflow-x: hidden;
}

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

a {
  color: var(--signal-dunkel);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

.mitte {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Für Bildschirmleser, aber nicht sichtbar. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.springen {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tiefe);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 200;
}

.springen:focus {
  left: 0;
}

.technisch {
  font-family: var(--schrift-technisch);
  font-size: 0.92em;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ── Fortschrittsbalken ────────────────────────────────────────── */

/* Wie weit man ist. Zwei Pixel hoch, ganz oben, über allem – die einzige
   Anzeige auf der Seite, die niemand bewusst ansieht und trotzdem jeder
   liest. */
.fortschritt {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 120;
  pointer-events: none;
  background: transparent;
}

.fortschritt span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--signal-dunkel), var(--signal-hell));
  transform-origin: left;
}

/* ── Kontaktzeile und Kopf ─────────────────────────────────────── */

.leiste {
  background: var(--tiefe);
  color: var(--text-hell-leise);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--tiefe-rand);
}

.leiste .mitte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  padding-block: 0.5rem;
}

.leiste a {
  color: var(--text-hell-leise);
  text-decoration: none;
  font-weight: 500;
  font-family: var(--schrift-technisch);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}

.leiste a:hover {
  color: var(--signal-hell);
}

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(16 20 24 / 92%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tiefe-rand);
  transition:
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.kopf.gescrollt {
  box-shadow: 0 10px 30px -18px rgb(0 0 0 / 80%);
  background: rgb(16 20 24 / 97%);
}

.kopf .mitte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
}

/* Das Logo ist für hellen Grund gezeichnet. Auf dem dunklen Kopf steht es
   deshalb in einem hellen Feld, statt es umzufärben – Hausfarben bleiben,
   wie sie sind. */
.kopf-marke img {
  height: 2.6rem;
  width: auto;
  background: #fff;
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  transition: transform 0.3s var(--kurve);
}

.kopf-marke:hover img {
  transform: scale(1.03);
}

.kopf.gescrollt .kopf-marke img {
  height: 2.1rem;
}

.navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation a {
  position: relative;
  display: block;
  color: var(--text-hell-leise);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  padding-block: 0.35rem;
  transition: color 0.2s ease;
}

.navigation li:not(:last-child) a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--kurve);
}

.navigation a:hover,
.navigation a[aria-current='true'] {
  color: #fff;
}

.navigation li:not(:last-child) a:hover::after,
.navigation li:not(:last-child) a:focus-visible::after,
.navigation li:not(:last-child) a[aria-current='true']::after {
  transform: scaleX(1);
}

/* Das Kundenportal ist kein Menüpunkt wie die anderen: es führt aus der
   Seite heraus in die Anwendung. Deshalb als Knopf abgesetzt. */
.navigation .knopf-klein {
  border: 1.5px solid var(--tiefe-rand);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  color: var(--text-hell);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.navigation .knopf-klein:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--tiefe);
}

/* ── Abschnitte ────────────────────────────────────────────────── */

section {
  padding-block: var(--luft);
  position: relative;
}

.sand {
  background: var(--sand-2);
}

.dunkel {
  background: var(--tiefe);
  color: var(--text-hell);
}

/* `:not(.knopf)` ist hier keine Feinheit, sondern eine Reparatur: ohne das
   ist `.dunkel a` spezifischer als `.knopf-voll` und überschreibt dessen
   Schriftfarbe. Das Ergebnis war helles Orange auf Orange – die
   Beschriftung des Hauptknopfes war praktisch nicht zu lesen. */
.dunkel a:not(.knopf) {
  color: var(--signal-hell);
}

/* Die feine Rasterung auf den dunklen Flächen. Sie nimmt das Kletternetz
   auf, das im Titelbild steht, und hält die großen dunklen Flächen davon
   ab, wie ein Loch zu wirken. Rein dekorativ. */
.dunkel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Der Präfix ist für Safari nötig. Fehlt die Maske ganz, liegt das
     Raster gleichmäßig über der Fläche – weniger fein, aber nicht
     kaputt. */
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 75%);
}

.dunkel > .mitte {
  position: relative;
}

/* ── Schrift ───────────────────────────────────────────────────── */

h1,
h2,
h3 {
  line-height: 1.08;
  color: inherit;
  text-wrap: balance;
  margin: 0;
}

h2 {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.6rem;
}

h3 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

/* Die Augenbraue über der Überschrift: klein, technisch, gesperrt. Sie
   ersetzt die Rubrikbeschriftung, die vorher als Überschrift herhalten
   musste – „Leistungen" war der Titel, jetzt ist es die Rubrik, und die
   Überschrift darf etwas sagen. */
.augenbraue {
  font-family: var(--schrift-technisch);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--signal-dunkel);
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.dunkel .augenbraue,
.kontakt .augenbraue,
.titel .augenbraue {
  color: var(--signal-hell);
}

.augenbraue .punkt {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--signal);
  flex: none;
  box-shadow: 0 0 0 4px rgb(233 136 13 / 25%);
}

/* Der kurze Strich unter der Überschrift ist das wiederkehrende Zeichen der
   bisherigen Seite – ohne ihn wirkt sie fremd. Er zeichnet sich jetzt
   selbst, sobald der Abschnitt ins Bild kommt. */
.strich {
  width: 5.5rem;
  height: 3px;
  background: var(--signal);
  margin-bottom: 2.25rem;
  transform-origin: left;
}

.einleitung {
  max-width: 44rem;
  font-size: 1.15rem;
  color: var(--text-leise);
  margin-top: -1rem;
  margin-bottom: 2.5rem;
}

.dunkel .einleitung {
  color: var(--text-hell-leise);
}

/* ── Titelbereich ──────────────────────────────────────────────── */

.titel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tiefe);
  color: var(--text-hell);
  padding-block: clamp(4rem, 12vw, 8.5rem) clamp(4.5rem, 12vw, 8rem);
  min-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.titel-bild {
  position: absolute;
  /* Nach oben und unten größer als der Abschnitt: sonst liefe beim
     Parallaxeschieben unten eine Kante ins Bild. */
  inset: -12% 0;
  z-index: -2;
  will-change: transform;
}

.titel-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Das Kletternetz ist sehr bunt. Entsättigt und abgedunkelt bleibt die
     Struktur – Seile, Knoten, Raster – und die Farbe stört die Schrift
     nicht mehr. */
  filter: saturate(0.55) brightness(0.55) contrast(1.05);
}

/* Zwei Schleier übereinander: einer legt den Stahlton über das ganze Bild,
   der andere dunkelt von unten und links ab, dorthin, wo der Text steht. */
.titel-schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      rgb(16 20 24 / 94%) 0%,
      rgb(16 20 24 / 78%) 42%,
      rgb(16 20 24 / 45%) 100%
    ),
    linear-gradient(to top, rgb(16 20 24 / 95%) 0%, transparent 45%);
}

.titel-inhalt {
  width: 100%;
}

.titel h1 {
  margin: 0 0 1.25rem;
}

.wortmarke {
  display: block;
  font-size: clamp(3.4rem, 13vw, 8rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 0.95;
}

.titel .unterzeile {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--schrift-technisch);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: clamp(0.7rem, 1.9vw, 0.95rem);
  color: var(--text-hell-leise);
}

.titel .vorspann {
  font-size: clamp(1.1rem, 2.3vw, 1.4rem);
  line-height: 1.5;
  max-width: 34rem;
  color: var(--text-hell);
  margin: 0 0 2rem;
  text-wrap: pretty;
}

.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.5rem, 5vw, 3.5rem);
  margin: 3rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgb(255 255 255 / 15%);
}

.kennzahlen div {
  padding-right: clamp(1.5rem, 5vw, 3.5rem);
  border-right: 1px solid rgb(255 255 255 / 12%);
}

.kennzahlen div:last-child {
  border-right: none;
  padding-right: 0;
}

.kennzahlen dt {
  font-family: var(--schrift-technisch);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-hell-leise);
}

.kennzahlen dd {
  margin: 0.2rem 0 0;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.kennzahlen dd.technisch {
  font-weight: 500;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  color: var(--signal-hell);
}

/* Der Hinweis nach unten. Eine Linie, die von oben nach unten durchläuft –
   ruhiger als ein hüpfender Pfeil und trotzdem unmissverständlich. */
.rollhinweis {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  width: 44px;
  height: 56px;
  display: grid;
  place-items: center;
}

.rollhinweis-linie {
  display: block;
  width: 1px;
  height: 42px;
  background: rgb(255 255 255 / 22%);
  position: relative;
  overflow: hidden;
}

.rollhinweis-linie::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 14px;
  background: var(--signal-hell);
}

/* ── Knöpfe ────────────────────────────────────────────────────── */

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2.5rem 0 0;
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 2px solid var(--tiefe);
  border-radius: 999px;
  padding: 0.85rem 1.7rem;
  min-height: 50px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--tiefe);
  background: transparent;
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s var(--kurve),
    box-shadow 0.22s ease;
}

.knopf:hover {
  background: var(--tiefe);
  color: var(--sand);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgb(0 0 0 / 65%);
}

.knopf:active {
  transform: translateY(0);
}

.knopf-voll {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--tiefe);
  box-shadow: 0 10px 26px -14px rgb(233 136 13 / 90%);
}

.knopf-voll:hover {
  background: var(--signal-hell);
  border-color: var(--signal-hell);
  color: var(--tiefe);
  box-shadow: 0 16px 30px -14px rgb(233 136 13 / 95%);
}

/* Der helle Knopf für dunklen Grund. */
.knopf-hell {
  border-color: rgb(255 255 255 / 35%);
  color: var(--text-hell);
}

.knopf-hell:hover {
  background: #fff;
  border-color: #fff;
  color: var(--tiefe);
}

/* ── Raster ────────────────────────────────────────────────────── */

.raster {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
}

.raster-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.raster-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* ── Leistungen ────────────────────────────────────────────────── */

.leistungen {
  margin-top: 0.5rem;
}

.leistung {
  position: relative;
  padding: 2rem 1.75rem 1.75rem;
  border: 1px solid var(--tiefe-rand);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--tiefe-2), var(--tiefe));
  overflow: hidden;
  transition:
    transform 0.3s var(--kurve),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Der Lichtstreifen an der Oberkante fährt beim Überfahren durch. */
.leistung::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  transform: translateX(-100%);
  transition: transform 0.65s var(--kurve);
}

.leistung:hover {
  transform: translateY(-6px);
  border-color: var(--signal-dunkel);
  box-shadow: 0 24px 50px -30px rgb(0 0 0 / 90%);
}

.leistung:hover::after {
  transform: translateX(100%);
}

/* Die Ziffer als Umriss statt als Fläche: sie soll die Reihenfolge
   markieren, nicht mit der Überschrift um Aufmerksamkeit streiten. */
.ziffer {
  display: block;
  font-family: var(--schrift-technisch);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1rem;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--signal);
  letter-spacing: -0.02em;
}

.leistung p {
  color: var(--text-hell-leise);
  margin: 0;
}

/* ── Der Prüfer ────────────────────────────────────────────────── */

.pruefer {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  align-items: start;
}

.pruefer-bild {
  position: relative;
}

/* Der versetzte Rahmen hinter dem Bild. Ein Foto, das jemand mit dem Handy
   auf dem Platz gemacht hat, wirkt so gesetzt und nicht wie hineingerutscht. */
.pruefer-bild::before {
  content: '';
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 2px solid var(--signal);
  border-radius: var(--radius);
  z-index: 0;
}

.bildrahmen {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand-2);
}

.bildrahmen img {
  width: 100%;
  transition: transform 0.7s var(--kurve);
}

.bildrahmen:hover img {
  transform: scale(1.03);
}

/* Bernd steht im linken Drittel des Bildes. Der Ausschnitt rückt ihn in die
   Mitte, statt die halbe Leiter zu zeigen. */
.pruefer-bild .bildrahmen img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 34% 42%;
}

.bildmarke {
  position: absolute;
  z-index: 2;
  left: 0.9rem;
  bottom: 0.9rem;
  margin: 0;
  background: rgb(16 20 24 / 88%);
  color: var(--text-hell);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.daten {
  margin: 0;
  border-top: 1px solid var(--sand-rand);
}

.daten > div {
  display: grid;
  gap: 0.2rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--sand-rand);
}

@media (min-width: 34rem) {
  .daten > div {
    grid-template-columns: 9rem minmax(0, 1fr);
  }
}

.daten dt {
  font-family: var(--schrift-technisch);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-leise);
  padding-top: 0.28rem;
}

.daten dd {
  margin: 0;
}

/* ── Ablauf ────────────────────────────────────────────────────── */

.ablaufkette {
  list-style: none;
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
  padding: 0;
  position: relative;
  counter-reset: schritt;
}

/* Die durchgehende Linie hinter den Punkten. Sie ist die Ruhelinie; die
   farbige darüber wächst beim Scrollen mit. */
.ablaufkette::before,
.ablaufkette::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 0.6rem;
  bottom: 1.4rem;
  width: 2px;
  background: var(--sand-rand);
}

.ablaufkette::after {
  background: var(--signal);
  transform: scaleY(var(--kette, 0));
  transform-origin: top;
}

.ablaufkette li {
  position: relative;
  padding: 0 0 1.75rem 3.5rem;
  counter-increment: schritt;
}

.ablaufkette li::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -2px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--sand);
  border: 2px solid var(--signal);
  display: grid;
  place-items: center;
  font-family: var(--schrift-technisch);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--signal-dunkel);
}

.ablaufkette p {
  margin: 0;
  color: var(--text-leise);
  max-width: 46rem;
}

.umfangkarte {
  background: var(--sand);
  border: 1px solid var(--sand-rand);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.9rem);
}

.haken {
  list-style: none;
  margin: 0;
  padding: 0;
}

.haken li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.7rem;
}

.haken li:last-child {
  margin-bottom: 0;
}

/* Der Haken als gezeichnetes Zeichen, nicht als Buchstabe: so sieht er in
   jedem System gleich aus. */
.haken li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--signal);
  border-bottom: 2px solid var(--signal);
  transform: rotate(-45deg);
}

/* ── Sicherheit ────────────────────────────────────────────────── */

.sicherheit {
  align-items: start;
}

.bildrahmen-dunkel {
  background: var(--tiefe-2);
  border: 1px solid var(--tiefe-rand);
}

/* Das Bild ist hochformatig (1200 × 1799). Ungeschnitten wäre die Spalte
   deutlich höher als der Text daneben; 4:5 bringt beide auf eine Höhe. */
.sicherheit .bildrahmen img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 55% 35%;
}

.sicherheit h3 {
  margin-top: 0;
}

.sicherheit > div > div + div {
  margin-top: 2rem;
}

.dunkel p {
  color: var(--text-hell-leise);
}

.dunkel strong {
  color: var(--text-hell);
}

.pruefertun {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--tiefe-rand);
}

/* ── Normen ────────────────────────────────────────────────────── */

.normen h3 {
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--signal);
  margin-bottom: 1rem;
}

.normliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.normliste li {
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--sand-rand);
  color: var(--text-leise);
  line-height: 1.5;
}

.normliste .technisch {
  display: block;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0;
}

/* ── Referenzkarussell ─────────────────────────────────────────── */

/*
 * Ein Scroller mit Einrastpunkten, keine geschobene Bahn: Wischen,
 * Trackpad und Tastatur macht damit der Browser selbst. Das Skript
 * ergänzt nur die Leiste darunter und das Weiterblättern.
 *
 * Ohne Skript bleibt es das Raster, das hier vorher stand.
 *
 * Der erste Entwurf sah nach Baukasten aus, und zwar aus drei Gründen:
 * die Karten waren fast leer (ein Name, eine graue Zeile, viel Nichts),
 * sie standen hellbeige auf hellbeige und hoben sich kaum ab, und
 * darunter lagen drei getrennte Bedienelemente nebeneinander – Pfeile,
 * Punkte, Halteknopf. Jetzt: Karten in Weiß mit einer orangen Kante,
 * die Leistungen als einzelne Marken, und EINE Leiste, in der Zähler,
 * Schiene und Pfeile zusammengehören.
 */

.karussell-bahn {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.js .karussell-bahn {
  --luecke: clamp(1rem, 2.5vw, 1.75rem);
  display: flex;
  grid-template-columns: none;
  gap: var(--luecke);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Sonst wandert beim waagerechten Wischen die ganze Seite mit. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Platz für den Schatten der Karten, sonst wird er abgeschnitten. */
  padding: 0.25rem 0.25rem 1rem;
  margin-inline: -0.25rem;
}

.js .karussell-bahn::-webkit-scrollbar {
  display: none;
}

/* Die Breite ist die Fensterbreite abzüglich der Lücken, geteilt durch die
   Zahl der Karten nebeneinander. Ohne den Abzug passt die letzte Karte
   nicht mehr ins Bild und rastet einen Fingerbreit daneben ein.

   Höchstens zwei nebeneinander, auch auf breiten Bildschirmen. Bei drei
   passten die drei vorhandenen Referenzen alle gleichzeitig ins Bild – dann
   gäbe es nichts zu blättern, die Leiste verschwände, und aus dem
   Karussell würde wieder das Raster, das vorher hier stand. */
.js .referenz {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

@media (min-width: 40rem) {
  .js .referenz {
    flex-basis: calc((100% - var(--luecke)) / 2);
  }
}

.referenz {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--sand-rand);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  padding-left: clamp(1.75rem, 3.5vw, 2.5rem);
  overflow: hidden;
  transition:
    transform 0.3s var(--kurve),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* Die orange Kante steht immer. Vorher erschien sie erst beim Überfahren –
   auf dem Handy also nie. */
.referenz::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--signal);
}

.referenz:hover {
  transform: translateY(-4px);
  border-color: var(--signal);
  box-shadow: 0 22px 45px -28px rgb(0 0 0 / 45%);
}

.referenz h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Die Leistungen als einzelne Marken statt als Aufzählung in einem Satz.
   Derselbe Wortlaut – aber man sieht auf einen Blick, worum es ging, und
   die Karte ist nicht mehr zu zwei Dritteln leer. */
.leistungsmarken {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  /* Nach unten geschoben: bei ungleich vielen Marken stehen sie trotzdem
     auf einer Linie mit der Nachbarkarte. */
  margin-top: auto;
}

.leistungsmarken li {
  font-family: var(--schrift-technisch);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-leise);
  background: var(--sand-2);
  border: 1px solid var(--sand-rand);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}

/* ── Leiste unter dem Karussell ────────────────────────────────── */

/* Zähler, Schiene und Pfeile sind EIN Element, nicht drei. Sie stehen auf
   einer Linie, durch eine Oberkante mit den Karten verbunden. */
.karussell-leiste {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1.5rem);
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sand-rand);
}

.karussell-leiste[hidden] {
  display: none;
}

.karussell-zaehler {
  font-family: var(--schrift-technisch);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.karussell-zaehler b {
  color: var(--text);
}

/* Die Schiene sagt dasselbe wie Punkte, nimmt aber keine Breite je Seite –
   sie funktioniert bei drei Referenzen genauso wie bei dreißig. */
.karussell-schiene {
  flex: 1 1 auto;
  height: 2px;
  min-width: 2rem;
  background: var(--sand-rand);
  position: relative;
  overflow: hidden;
}

.karussell-schiene span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--signal);
  transition:
    width 0.35s var(--kurve),
    left 0.35s var(--kurve);
}

.karussell-knopf {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 999px;
  border: 1.5px solid var(--sand-rand);
  background: #fff;
  color: var(--tiefe);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.karussell-knopf:hover {
  background: var(--tiefe);
  border-color: var(--tiefe);
  color: #fff;
}

.karussell-halt {
  flex: none;
  border: none;
  background: none;
  color: var(--text-leise);
  font: inherit;
  font-family: var(--schrift-technisch);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 48px;
  padding-inline: 0.5rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--sand-rand);
  text-underline-offset: 4px;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

.karussell-halt:hover {
  color: var(--tiefe);
  text-decoration-color: var(--signal);
}

/* Auf schmalen Bildschirmen ist für alles nebeneinander kein Platz. Der
   Halteknopf rutscht dann unter die Leiste, statt sie umbrechen zu lassen. */
@media (max-width: 30rem) {
  .karussell-leiste {
    flex-wrap: wrap;
  }

  .karussell-halt {
    order: 9;
    width: 100%;
    text-align: left;
    padding-inline: 0;
  }
}

/* ── Kontakt ───────────────────────────────────────────────────── */

.kontakt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tiefe);
  color: var(--text-hell);
}

.kontakt::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(
      100deg,
      rgb(16 20 24 / 96%) 0%,
      rgb(16 20 24 / 86%) 55%,
      rgb(16 20 24 / 72%) 100%
    ),
    url('bilder/kontakt.jpg');
  background-size: cover;
  background-position: center;
}

.kontakt a:not(.knopf) {
  color: var(--signal-hell);
}

.karte {
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    transform 0.3s var(--kurve),
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.karte:hover {
  transform: translateY(-5px);
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 30%);
}

.karte h3 {
  margin-top: 0;
}

.karte p {
  color: var(--text-hell-leise);
}

address {
  font-style: normal;
}

/* ── Fußzeile ──────────────────────────────────────────────────── */

footer {
  background: var(--tiefe-2);
  color: var(--text-hell-leise);
  padding-block: 3.5rem;
  font-size: 0.95rem;
  border-top: 1px solid var(--tiefe-rand);
}

footer a {
  color: var(--text-hell-leise);
  text-decoration-color: rgb(255 255 255 / 30%);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

footer a:hover {
  color: var(--signal-hell);
}

footer .raster {
  gap: 2rem;
}

/* ── Rechtliche Seiten ─────────────────────────────────────────── */

.rechtstext {
  max-width: 48rem;
}

.rechtstext h1 {
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.rechtstext h2 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}

/* ── Schmale Bildschirme ───────────────────────────────────────── */

@media (max-width: 56rem) {
  /* Die Navigation bricht hier auf zwei Zeilen um, und die Kopfzeile wird
     dadurch hoch. Klebend würde sie ein Sechstel des Bildschirms dauerhaft
     belegen – auf einem Handy zu viel für ein Menü. Sie rollt deshalb mit
     weg. */
  .kopf {
    position: static;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html {
    scroll-padding-top: 1rem;
  }

  .kopf .mitte {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .kopf-marke img {
    height: 2.2rem;
  }

  .navigation {
    gap: 0.35rem 1rem;
  }

  /* Die Kontaktzeile ganz oben untereinander statt gequetscht nebeneinander. */
  .leiste .mitte {
    flex-direction: column;
    gap: 0.1rem;
  }

  .kennzahlen div {
    border-right: none;
    padding-right: 0;
    min-width: 8rem;
  }

  .kennzahlen {
    gap: 1.25rem 2rem;
  }

  .pruefer-bild::before {
    inset: 0.75rem -0.75rem -0.75rem 0.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Bewegung

   Alles hier ist Zugabe. Es hängt an der Klasse `js`, die das kurze
   Skript im Kopf setzt – ohne Skript wird nichts versteckt.
   ═══════════════════════════════════════════════════════════════════ */

/* Einblenden beim Hereinscrollen. Die Richtung wechselt bewusst nicht
   wahllos: Text kommt von unten, Bilder werden aufgedeckt. Ein Abschnitt,
   in dem jedes Teil aus einer anderen Ecke fliegt, wirkt unruhig. */
.js [data-zeigen] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s ease-out,
    transform 0.65s var(--kurve);
}

.js [data-zeigen].sichtbar {
  opacity: 1;
  transform: none;
}

.js [data-zeigen][data-versatz='1'] {
  transition-delay: 0.1s;
}

.js [data-zeigen][data-versatz='2'] {
  transition-delay: 0.2s;
}

.js [data-zeigen][data-versatz='3'] {
  transition-delay: 0.3s;
}

/* Der Strich unter der Überschrift zeichnet sich. */
.js .strich[data-zeigen] {
  opacity: 1;
  transform: scaleX(0);
  transition: transform 0.7s var(--kurve) 0.15s;
}

.js .strich[data-zeigen].sichtbar {
  transform: scaleX(1);
}

/* Bilder werden aufgedeckt statt eingeblendet: der Vorhang läuft von unten
   weg, und das Bild fährt dabei aus einer leichten Vergrößerung zurück. */
.js .bildrahmen {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s var(--kurve);
}

.js [data-zeigen].sichtbar .bildrahmen,
.js .bildrahmen.sichtbar {
  clip-path: inset(0 0 0 0);
}

.js [data-zeigen] .bildrahmen img {
  transform: scale(1.08);
}

.js [data-zeigen].sichtbar .bildrahmen img {
  transform: none;
}

/* Der versetzte Rahmen hinter dem Prüferbild kommt zuletzt. */
.js .pruefer-bild::before {
  opacity: 0;
  transform: translate(-12px, -12px);
  transition:
    opacity 0.6s ease-out 0.45s,
    transform 0.6s var(--kurve) 0.45s;
}

.js .pruefer-bild.sichtbar::before {
  opacity: 1;
  transform: none;
}

/* Anflug im Titelbereich: die Teile kommen beim Laden kurz nacheinander.
   `both` ist wesentlich – ohne das stünde das Element vor seinem Versatz
   sichtbar da und spränge dann zurück. */
.js [data-anflug] {
  animation: anflug 0.85s var(--kurve) both;
}

.js [data-anflug-versatz='1'] {
  animation-delay: 0.1s;
}

.js [data-anflug-versatz='2'] {
  animation-delay: 0.2s;
}

.js [data-anflug-versatz='3'] {
  animation-delay: 0.3s;
}

.js [data-anflug-versatz='4'] {
  animation-delay: 0.4s;
}

@keyframes anflug {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Der Balken im Rollhinweis läuft von oben nach unten durch. */
.js .rollhinweis-linie::after {
  animation: rollen 2.4s ease-in-out infinite;
}

@keyframes rollen {
  0% {
    transform: translateY(-100%);
  }

  60%,
  100% {
    transform: translateY(300%);
  }
}

/* Die Ziffern der Leistungen kommen aus der Tiefe. */
.js .leistung[data-zeigen] .ziffer {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s ease-out 0.2s,
    transform 0.6s var(--kurve) 0.2s;
}

.js .leistung[data-zeigen].sichtbar .ziffer {
  opacity: 1;
  transform: none;
}

/* Die Haken in den Prüfumfangslisten zeichnen sich nacheinander. */
.js .umfangkarte[data-zeigen] .haken li::before {
  opacity: 0;
  transform: rotate(-45deg) scale(0.4);
  transition:
    opacity 0.35s ease-out,
    transform 0.35s var(--kurve);
}

.js .umfangkarte[data-zeigen].sichtbar .haken li::before {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.js .umfangkarte.sichtbar .haken li:nth-child(1)::before {
  transition-delay: 0.15s;
}

.js .umfangkarte.sichtbar .haken li:nth-child(2)::before {
  transition-delay: 0.25s;
}

.js .umfangkarte.sichtbar .haken li:nth-child(3)::before {
  transition-delay: 0.35s;
}

.js .umfangkarte.sichtbar .haken li:nth-child(4)::before {
  transition-delay: 0.45s;
}

.js .umfangkarte.sichtbar .haken li:nth-child(5)::before {
  transition-delay: 0.55s;
}

/* Die Normzeilen kommen von links nacheinander herein. */
.js .normen [data-zeigen] .normliste li {
  opacity: 0;
  transform: translateX(-14px);
  transition:
    opacity 0.45s ease-out,
    transform 0.45s var(--kurve);
}

.js .normen [data-zeigen].sichtbar .normliste li {
  opacity: 1;
  transform: none;
}

.js .normen .sichtbar .normliste li:nth-child(1) {
  transition-delay: 0.1s;
}

.js .normen .sichtbar .normliste li:nth-child(2) {
  transition-delay: 0.16s;
}

.js .normen .sichtbar .normliste li:nth-child(3) {
  transition-delay: 0.22s;
}

.js .normen .sichtbar .normliste li:nth-child(4) {
  transition-delay: 0.28s;
}

.js .normen .sichtbar .normliste li:nth-child(5) {
  transition-delay: 0.34s;
}

.js .normen .sichtbar .normliste li:nth-child(6) {
  transition-delay: 0.4s;
}

/* ── Bewegung reduzieren ───────────────────────────────────────── */

/* Die Regel greift zweimal: einmal grob für alles, was einmalig läuft,
   und einmal genau für das, was sonst hängenbliebe. Eine Animation mit
   `infinite` etwa liefe bei gekürzter Dauer in Höchstgeschwindigkeit und
   flackerte – sie wird deshalb ausdrücklich abgeschaltet. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-zeigen],
  .js [data-anflug] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .js .strich[data-zeigen],
  .js .pruefer-bild::before,
  .js .leistung .ziffer,
  .js .umfangkarte .haken li::before,
  .js .normen .normliste li {
    opacity: 1 !important;
    transform: none !important;
  }

  .js .umfangkarte .haken li::before {
    transform: rotate(-45deg) !important;
  }

  .js .bildrahmen {
    clip-path: none !important;
  }

  .js .bildrahmen img {
    transform: none !important;
  }

  .js .rollhinweis-linie::after {
    animation: none;
  }

  .js .titel-bild {
    transform: none !important;
  }

  .js .karussell-bahn {
    scroll-behavior: auto;
  }

  .ablaufkette::after {
    transform: scaleY(1);
  }
}

/* ── Ausdruck ──────────────────────────────────────────────────── */

/* Wer die Seite ausdruckt – in einer Gemeindeverwaltung kommt das vor –
   bekommt sonst leere Abschnitte: der Beobachter hat für den Bereich unter
   dem sichtbaren Fenster nie ausgelöst, und im Ausdruck stünde dann eine
   Überschrift ohne Inhalt. */
@media print {
  .js [data-zeigen],
  .js [data-anflug],
  .js .leistung .ziffer,
  .js .umfangkarte .haken li::before,
  .js .normen .normliste li,
  .js .pruefer-bild::before {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .js .bildrahmen {
    clip-path: none !important;
  }

  /* Im Ausdruck gibt es kein Blättern – die Karten stehen untereinander. */
  .js .karussell-bahn {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .karussell-leiste,
  .rollhinweis,
  .fortschritt,
  .leiste {
    display: none;
  }

  .dunkel,
  .kontakt,
  .titel,
  footer {
    background: #fff !important;
    color: #000 !important;
  }

  .dunkel::before,
  .kontakt::before,
  .titel-schleier {
    display: none;
  }
}