/* ==========================================================================
   FurnCompass GmbH — Stylesheet
   Hier wird das Aussehen geregelt. Texte stehen in den HTML-Dateien.
   Wer nur Texte oder Kontaktdaten pflegen will, muss diese Datei nicht anfassen.
   ========================================================================== */

/* --- Schriften. Lokal eingebunden, kein externer Anbieter. ---------------- */

@font-face {
  font-family: "Open Sans";
  src: url("schriften/open-sans-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("schriften/open-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("schriften/open-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Farben und Maße. Alle Werte der Corporate Identity an einer Stelle. -- */

:root {
  /* CI-Farben */
  --orange: #f36b05;
  --dunkelgrau: #4f4f4e;
  --warmweiss: #f8f7f5;
  --hellgrau: #e7e4df;
  --orange-zart: #fff5ec;
  /* Aufgehellte Fassung des Orange, nur für den Hover der Primäraktion. */
  --orange-hell: #ff7d1f;
  /* Petrol #2E6F73 steht zwar in der CI, wird auf dieser Seite aber nicht
     verwendet. Die Sekundärfarbe ist allein Salbeigrün; alle vormals
     petrolfarbenen Flächen liegen jetzt auf dem dunklen Grundton. */
  --salbei: #7f9488;

  /* Abgeleitete Rollen. Auf Kontrast geprüft. */
  --grund: var(--warmweiss);
  --flaeche: var(--orange-zart);
  --tinte: #3f3e3d;
  --tinte-kraeftig: #211e1d;
  --tinte-leise: #625e5a;
  /* Grund der dunklen Segmente: Einstieg, Datenstrecke, Fragen. */
  --grund-dunkel: var(--dunkelgrau);
  --linie: #d9d5cf;
  --linie-kraeftig: #b9b3ab;

  /* Typografie */
  --schrift: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --mass: 34rem; /* Lesespalte, ergibt rund 70 Zeichen */
  --breite: 74rem;

  /* Raster */
  --rand: clamp(1.25rem, 5vw, 4rem);
  --luft-s: 0.5rem;
  --luft-m: 1rem;
  --luft-l: 2rem;
  --luft-xl: clamp(3.5rem, 7vw, 6.5rem);

  /* Bewegung. Eine Kurve für die ganze Seite, kräftiges Ease-out. */
  --kurve: cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- Grundgerüst ---------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem; /* damit Ankersprünge nicht unter der Kopfzeile landen */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}

/* Browser-Oberflächen mitgestalten, statt sie den Voreinstellungen zu überlassen. */

::selection {
  background: #fbd9bd;
  color: var(--tinte-kraeftig);
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

html {
  scrollbar-color: var(--linie-kraeftig) var(--warmweiss);
  scrollbar-width: thin;
  caret-color: var(--orange);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: var(--warmweiss);
}
::-webkit-scrollbar-thumb {
  background: var(--linie-kraeftig);
  border: 3px solid var(--warmweiss);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--tinte-leise);
}

/* --- Typografie ----------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  color: var(--tinte-kraeftig);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0 0 var(--luft-m);
}

h1 {
  font-size: clamp(2.35rem, 1.2rem + 4vw, 4.4rem);
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.15rem);
}

h3 {
  font-size: 1.2rem;
  letter-spacing: -0.008em;
}

h4 {
  font-size: 1rem;
  letter-spacing: -0.004em;
}

p {
  margin: 0 0 var(--luft-m);
  max-width: var(--mass);
  text-wrap: pretty;
}

a {
  color: var(--tinte-kraeftig);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.18s var(--kurve);
}

a:hover {
  color: var(--orange);
}

strong {
  font-weight: 600;
  color: var(--tinte-kraeftig);
}

.vorspann {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  font-weight: 300;
  color: var(--tinte);
  /* Weiter als die Lesespalte, weil der größere Grad sonst schmaler umbricht
     als der Fließtext darunter. */
  max-width: 42rem;
  text-wrap: balance;
}

.leise {
  color: var(--tinte-leise);
  font-size: 0.9375rem;
}

.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sprungmarke für Tastaturnutzer, sichtbar sobald sie den Fokus bekommt. */
.sprung {
  position: absolute;
  left: var(--rand);
  top: -4rem;
  z-index: 100;
  background: var(--tinte-kraeftig);
  color: var(--warmweiss);
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  transition: top 0.2s var(--kurve);
}
.sprung:focus {
  top: 0.75rem;
  color: var(--warmweiss);
}

/* --- Layout --------------------------------------------------------------- */

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

section {
  padding-block: var(--luft-xl);
  border-top: 1px solid var(--linie);
}

section:first-of-type {
  border-top: 0;
}

/* --- Grundtöne der Sektionen ----------------------------------------------
   Die Seite wechselt den Untergrund, damit sie nicht als eine durchgehende
   Textfläche liest. Reihenfolge: Einstieg warmweiß, Auftrag warmweiß,
   Häuserband weiß, Datenstrecke dunkel, Leistungen hellgrau, Für wen warmweiß,
   Vertrauen dunkel, Gesellschaft und Kontakt warmweiß, Fuß dunkel. Der
   Kontaktblock innerhalb der letzten Sektion liegt auf Hellgrau; er ist die
   ruhende Fläche darin, nicht ein eigener Grundton der Seite.
   -------------------------------------------------------------------------- */

.grund-flaeche,
#auftrag {
  background: var(--flaeche);
  border-top: 0;
}

.grund-flaeche + section,
.grund-dunkel + section {
  border-top: 0;
}

/* Die Vertrauenssektion ist laut Briefing die wichtigste der Seite.
   Sie bekommt deshalb den dunklen Grund und trägt die Mitte. */
.grund-dunkel {
  background: var(--grund-dunkel);
  color: #dcd8d3;
  border-top: 0;
}

/* Die Auswahl muss die Bauteilregeln überstimmen, sonst steht die Schrift
   in der Farbe des Grundes. Deshalb bewusst zweiteilig. */
.grund-dunkel h2,
.grund-dunkel h3,
.grund-dunkel strong {
  color: #ffffff;
}

.grund-dunkel .vorspann {
  color: #cfcac4;
}

/* Die gedämpfte Textfarbe ist für hellen Grund gerechnet und fällt auf
   dunklem durch die Kontrastnorm. Hier eine eigene, aufgehellte Fassung. */
.grund-dunkel .leise {
  color: #cdc8c2;
}

.kopfzeile-block {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.kopfzeile-block h2 {
  margin-bottom: var(--luft-m);
}

.abstand-oben {
  margin-top: var(--luft-xl);
}

.abstand-unten-null {
  margin-bottom: 0;
}

/* --- Seitenkopf ----------------------------------------------------------- */

/* Milchglas: leicht durchscheinend, unscharfer Untergrund, etwas mehr
   Farbsättigung. Der Inhalt schimmert darunter durch, bleibt aber lesbar.

   Das Glas liegt auf einer eigenen Ebene (::before), nicht auf der Leiste
   selbst. Hätte die Leiste den Filter, könnte das aufgeklappte Menü darin
   den Seiteninhalt nicht mehr unscharf zeigen, sondern nur die Leiste. */
.seitenkopf {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(217, 213, 207, 0.8);
  transition: border-color 0.3s var(--kurve);
}

.seitenkopf::before,
.menue[open] ~ .bereiche {
  background: rgba(248, 247, 245, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  transition: background-color 0.3s var(--kurve);
}

.seitenkopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Dieselbe Glasoptik, nur dunkel getönt. Sie gilt überall dort, wo eine
   dunkle Fläche hinter der Leiste liegt: Einstieg, Datenstrecke, die
   Vertrauenssektion und der Fuß. Ohne das stünde das helle Glas auf fast
   schwarzem Grund und liefe grau an.

   Über dem Video liegt zusätzlich der Schleier des Einstiegs; zusammen ergibt
   das selbst bei einem weißen Videobild noch 7,3:1 für weiße Schrift. */
.ueber-medium .seitenkopf {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.ueber-medium .seitenkopf::before {
  background: rgba(79, 79, 78, 0.28);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}


.ueber-medium .hauptnavigation a:not(.aktion) {
  color: #ffffff;
}

.ueber-medium .menue > summary {
  color: #ffffff;
}

/* Die Kopfzeile nutzt die volle Breite, nicht das Inhaltsraster, und hat
   einen schmaleren Seitenabstand als der Inhalt: die Navigation soll in der
   Ecke sitzen. */
/* Drei Spalten: Logo links, Menüpunkte mittig, Schaltfläche rechts.
   Die beiden Außenspalten sind gleich breit, dadurch stehen die Menüpunkte
   echt in der Mitte, unabhängig von der Breite von Logo und Schaltfläche. */
.seitenkopf > .rahmen {
  position: relative;
  max-width: none;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--luft-m);
  min-height: 4.75rem;
}

.seitenkopf .marke {
  justify-self: start;
}

.seitenkopf .hauptnavigation {
  justify-self: center;
}

.kopf-aktion {
  justify-self: end;
}

.marke {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.marke img {
  display: block;
  height: 2rem;
  width: auto;
}

/* Nur eine der beiden Fassungen ist jeweils zu sehen. Die Auswahl muss
   .marke img überstimmen, sonst stehen beide übereinander. */
.marke .logo-hell {
  display: none;
}

.ueber-medium .marke .logo-hell {
  display: block;
}

.ueber-medium .marke .logo-dunkel {
  display: none;
}

.hauptnavigation {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Straffe Abstände: davon hängt ab, ab welcher Breite das Logo echt
   zentriert stehen kann, ohne mit der Navigation zusammenzustoßen. */
.hauptnavigation ul {
  display: flex;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Die Schaltfläche ist ausgenommen, sonst überschreibt diese Regel ihre
   eigene Farbe und der Kontrast auf Orange fällt unter die Norm. */
.hauptnavigation a:not(.aktion) {
  position: relative;
  color: var(--tinte);
  text-decoration: none;
  font-size: 0.9375rem;
  padding-block: 0.35rem;
  white-space: nowrap;
}

/* Bereichsmenü. Auf breiten Bildschirmen ist es schlicht die Liste, auf schmalen
   ein aufklappbares Menü. Beides ohne JavaScript. */
/* Auf breiten Bildschirmen gibt es keinen Schalter, nur die Liste. Der
   Kontakt steht dort als Schaltfläche rechts, nicht in der Liste. */
.menue,
.hauptnavigation .nav-kontakt {
  display: none;
}

.winkel {
  transition: transform 0.25s var(--kurve);
}

/* Der einzige gestaltete Bewegungsmoment der Seite: die Marke der aktiven
   Sektion wandert unter der Navigation mit. */
.hauptnavigation a:not(.aktion)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--kurve);
}

.hauptnavigation a:not(.aktion):hover::after,
.hauptnavigation a:not(.aktion)[aria-current="true"]::after {
  transform: scaleX(1);
}

/* "Über uns" ist eine eigene Seite, die übrigen Punkte sind Sprungmarken
   der Startseite. Ein schmaler senkrechter Strich in der Mitte des Abstands
   trennt beides. */
.hauptnavigation .nav-seite {
  position: relative;
  margin-left: 0.4rem;
}

.hauptnavigation .nav-seite::before {
  content: "";
  position: absolute;
  left: calc(-0.9rem - 0.5px);
  top: 50%;
  width: 1px;
  height: 1.1em;
  translate: 0 -50%;
  background: var(--linie-kraeftig);
}

.ueber-medium .hauptnavigation .nav-seite::before {
  background: rgba(255, 255, 255, 0.35);
}

/* --- Aktionen ------------------------------------------------------------- */

.aktion {
  display: inline-flex;
  align-items: center;
  /* Kein gap: Beschriftung und Zusatzwort sind getrennte Flex-Elemente und
     bekämen sonst einen doppelten Wortabstand. */
  gap: 0;
  background: var(--orange);
  color: var(--tinte-kraeftig);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  padding: 0.72rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background 0.18s var(--kurve), color 0.18s var(--kurve),
    border-color 0.18s var(--kurve);
}

/* Schaltfläche mit Pfeil. Der Pfeil rückt beim Überfahren ein Stück vor,
   nur bei echtem Zeiger und nur drei Pixel weit. */
.aktion--pfeil {
  gap: 0.55rem;
  padding-right: 1.05rem;
}

.pfeil {
  flex: none;
  transition: transform 0.16s var(--kurve);
}

@media (hover: hover) and (pointer: fine) {
  .aktion--pfeil:hover .pfeil {
    transform: translateX(3px);
  }
}

/* Aufhellen statt umkehren. Die frühere Umkehrung auf die dunkle Tinte ließ
   die Schaltfläche auf dunklem Grund praktisch verschwinden; ein dunkleres
   Orange wiederum trägt die Beschriftung nicht mehr (4,0:1). Die aufgehellte
   Fassung kommt mit derselben Schriftfarbe auf 6,3:1 und behält auf jedem
   Grund ihre Form. */
.aktion:hover {
  background: var(--orange-hell);
  color: var(--tinte-kraeftig);
}

.aktion--ruhig {
  background: transparent;
  color: var(--tinte-kraeftig);
  border-color: var(--linie-kraeftig);
}

.aktion--ruhig:hover {
  background: var(--flaeche);
  color: var(--tinte-kraeftig);
  border-color: var(--tinte-leise);
}

/* Als <span> ist es ein Platzhalter und keine Aktion: kein Zeigefinger,
   keine Hover-Reaktion, die eine Funktion verspricht. */
span.aktion {
  cursor: default;
}

span.aktion:hover {
  background: var(--orange);
  color: var(--tinte-kraeftig);
}

span.aktion--ruhig:hover {
  background: transparent;
  border-color: var(--linie-kraeftig);
}

.abschluss-aktion {
  margin-top: var(--luft-m);
  margin-bottom: 0;
}

/* --- Einstieg ------------------------------------------------------------- */

/* --- Einstieg: Vollflächiges Medium mit Schleier --------------------------
   Der Claim steht mittig über dem Video. Der Schleier ist absichtlich
   kräftig: über bewegtem Bild wechselt die Helligkeit ständig, und selbst
   ein weißes Videobild muss die Kontrastnorm noch halten. Bei 0,68 Deckkraft
   ergibt Weiß auf Weiß rechnerisch noch 5,4:1.
   -------------------------------------------------------------------------- */

.einstieg {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(86vh, 820px);
  padding-block: clamp(4rem, 9vw, 8rem);
  border-top: 0;
  /* Der Kasten reicht unter die Kopfzeile, damit das Medium wirklich
     vollflächig ist. */
  margin-top: -4.75rem;
  padding-top: calc(4.75rem + clamp(4rem, 9vw, 8rem));
  text-align: center;
  color: #ffffff;
  /* Absicherung: Sollte die Medienebene darüber je ausfallen, steht die
     weiße Schrift trotzdem auf dunklem Grund und nicht auf Weiß. */
  background: var(--grund-dunkel);
}

/* Der Grund trägt den Einstieg, solange kein Video hinterlegt ist. Zwei sehr
   flache Aufhellungen nehmen ihm die Flachheit, ohne eine Farbe zu behaupten. */
.einstieg-medium {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(243, 107, 5, 0.14), transparent 62%),
    radial-gradient(90% 70% at 12% 92%, rgba(255, 255, 255, 0.07), transparent 58%),
    var(--grund-dunkel);
}

.einstieg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

.einstieg-schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(79, 79, 78, 0.42), rgba(79, 79, 78, 0.62)),
    rgba(79, 79, 78, 0.68);
}

.einstieg-inhalt {
  position: relative;
  z-index: 1;
  max-width: 58rem;
}

.einstieg h1 {
  color: #ffffff;
  margin-inline: auto;
  max-width: 22em;
}

/* Gewichtskontrast in der Schlagzeile: die Artikel treten im leichten
   Schnitt zurück, die Substantive bleiben in Semibold. Beide Schnitte
   sind Teil der CI. */
.einstieg h1 .wort-leicht {
  font-weight: 300;
}

.einstieg .vorspann {
  color: #e8e5e1;
  margin-inline: auto;
  margin-bottom: 0;
  max-width: 38rem;
}

/* Auf dem Handy steht ein kürzerer Vorspann: die lange Fassung füllt dort
   fast den ganzen Bildschirm. */
.einstieg .vorspann--mobil {
  display: none;
}

@media (max-width: 40rem) {
  .einstieg .vorspann--mobil {
    display: block;
  }

  .einstieg .vorspann--breit {
    display: none;
  }
}

/* Grafisches Motiv, abgeleitet aus der Konstruktion des Logos: ein offener
   Ring. Rein dekorativ, trägt keinen Inhalt und liegt hinter dem Text. */
/* Der offene Ring aus der Logo-Konstruktion trägt den Einstieg, solange kein
   Video hinterlegt ist, und liegt darunter, sobald eines da ist. */
.einstieg-motiv {
  position: absolute;
  z-index: 0;
  right: -13rem;
  top: 50%;
  width: min(46rem, 78vw);
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
}

.einstieg-motiv path {
  fill: none;
  stroke-width: 50;
}

/* Das Grau des Logos wird auf dem dunklen Grund zu Weiß. Beide Töne bleiben
   zurückgenommen, damit die Schrift davor die Hauptsache bleibt. */
.einstieg-motiv .bogen-gross {
  stroke: rgba(255, 255, 255, 0.16);
}

.einstieg-motiv .nadel-ende {
  fill: rgba(255, 255, 255, 0.16);
}

.einstieg-motiv .bogen-unten {
  stroke: rgba(243, 107, 5, 0.8);
}

.einstieg-motiv .nadel-spitze {
  fill: rgba(243, 107, 5, 0.8);
}

/* Die Achse ist im Logo ein Loch in der Nadel, hier also der Grundton. */
.einstieg-motiv .nadel-achse {
  fill: var(--grund-dunkel);
}

/* Auf dem Handy ragt der Kompass weiter ins Bild: mit dem Versatz vom
   Desktop blieb nur ein schmaler Bogen am Rand, die Nadel lag ganz außerhalb.
   Weil Ring und Nadel dann hinter dem Fließtext liegen, ist das Orange
   zurückgenommen, damit die weiße Schrift darauf lesbar bleibt.
   Die Höhe ist die halbe Mindesthöhe des Über-uns-Einstiegs: so steht der
   Kompass auf beiden Seiten an derselben Stelle, obwohl der Einstieg der
   Startseite höher ist. */
@media (max-width: 40rem) {
  .einstieg-motiv {
    right: -30vw;
    top: min(36vh, 340px);
    width: 88vw;
  }

  .einstieg-motiv .bogen-unten {
    stroke: rgba(243, 107, 5, 0.55);
  }

  .einstieg-motiv .nadel-spitze {
    fill: rgba(243, 107, 5, 0.55);
  }
}

/* Die Nadel dreht um die Mitte ihrer Grafik, die zugleich die Mitte des
   Rings ist. Lage und Drehung stehen als eigene Angaben (translate, rotate),
   so verschiebt die Drehung die Nadel nicht aus der Mitte. */
.einstieg-nadel {
  transform: none;
  translate: 0 -50%;
  rotate: 28deg;
  transform-origin: 50% 50%;
}

/* Beim Laden pendelt die Nadel einmal ein und bleibt dann auf ihrem Kurs.
   Eine einzige Bewegung mit einer gedämpften Schwingung als Kurve: sie
   schwingt über das Ziel, pendelt zurück und kommt zur Ruhe, ohne an
   Zwischenstationen abzubremsen. Browser ohne linear() nehmen ein weiches
   Auslaufen. */
@media (prefers-reduced-motion: no-preference) {
  .einstieg-nadel {
    will-change: transform;
    animation: nadel-einpendeln 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
    animation-timing-function: linear(0, 0.049, 0.178, 0.36, 0.568, 0.778, 0.969, 1.128,
      1.245, 1.316, 1.345, 1.336, 1.297, 1.237, 1.166, 1.093, 1.025, 0.967, 0.923, 0.895,
      0.882, 0.882, 0.893, 0.913, 0.937, 0.962, 0.986, 1.007, 1.024, 1.035, 1.04, 1.041,
      1.038, 1.032, 1.024, 1.015, 1.007, 0.999, 0.993, 0.989, 0.986, 0.986, 0.986, 0.988,
      0.991, 0.994, 0.997, 1, 1);
  }
}

@keyframes nadel-einpendeln {
  from { rotate: -14deg; }
  to   { rotate: 28deg; }
}

.einstieg h1 {
  margin-bottom: var(--luft-l);
}

.einstieg-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--luft-m);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* Zweitaktion auf dunklem Grund: Umriss in Weiß statt in Linienfarbe. */
.aktion--hell {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
}

.aktion--hell:hover {
  background: #ffffff;
  color: var(--tinte-kraeftig);
  border-color: #ffffff;
}

/* --- Der Anspruch über den drei Karten ------------------------------------- */

/* Dieser Block steht mittig, anders als der Rest der Seite. Das ist gewollt:
   er ist die Aussage, nicht Lesestoff. */
#auftrag > .rahmen > .kopfzeile-block {
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}

#auftrag > .rahmen > .kopfzeile-block .vorspann,
#auftrag > .rahmen > .kopfzeile-block p {
  margin-inline: auto;
}

/* Deutlich größer als die übrigen Zwischenüberschriften und in zwei
   Strichstärken: der erste Satz benennt die Lage, der zweite den Nutzen. */
/* „für gemeinsamen Erfolg“ ist knapp 11 Schriftgrößen breit. Die zweite
   Angabe in min() hält die Zeile auf schmalen Handys (unter etwa 400 Pixeln)
   innerhalb des Satzspiegels; darüber gilt die fließende Größe. Der Marker
   darf nicht umbrechen: über zwei Zeilen läge sein Balken als Block quer
   über beiden. */
.anspruch {
  font-size: min(clamp(2rem, 1.4rem + 2.4vw, 3.1rem), calc(9vw - 0.3rem));
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.anspruch .marker {
  white-space: nowrap;
}

/* Zweistimmige Überschriften gibt es an drei Stellen. Jede Stimme steht auf
   einer eigenen Zeile, damit der Wechsel der Strichstärke den Zeilenbruch
   trägt und nicht mitten im Satz passiert. Farbe und Grad setzt die jeweilige
   Überschrift. */
.stimme-leicht,
.stimme-kraeftig {
  display: block;
}

.stimme-leicht {
  font-weight: 300;
}

.stimme-kraeftig {
  font-weight: 600;
}

.anspruch .stimme-leicht {
  color: var(--tinte);
}

.anspruch .stimme-kraeftig {
  color: var(--tinte-kraeftig);
}

/* Textmarker: ein Balken hinter der unteren Hälfte des Wortes. isolation
   schafft einen eigenen Stapelkontext, damit der Balken mit z-index -1 hinter
   der Schrift bleibt und nicht hinter den Sektionsgrund rutscht. */
.marker {
  position: relative;
  isolation: isolate;
  background: none;
  color: inherit;
}

.marker::before {
  content: "";
  position: absolute;
  inset: 48% -0.14em 9%;
  z-index: -1;
  border-radius: 3px;
  background: color-mix(in srgb, var(--orange) 42%, transparent);
}

/* Auf dunklem Grund mischt sich das halbtransparente Orange zu Braun. Dort
   steht der Marker deshalb deckender, damit er denselben Ton trägt wie auf
   hellem Grund. */
.datenstrecke .marker::before,
.grund-dunkel .marker::before,
.einstieg .marker::before {
  background: color-mix(in srgb, var(--orange) 80%, transparent);
}

/* --- Die drei Bedingungen als Karten --------------------------------------- */

.saeulen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

/* Der Inhalt steht linksbündig, obwohl der Kopf darüber mittig steht. In einer
   Spalte von rund 330 Pixeln bricht zentrierter Fließtext nach vier Wörtern um
   und franst auf beiden Seiten aus; linksbündig bleibt eine ruhige Kante. */
.saeule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(2.25rem, 3.5vw, 3rem) clamp(1.5rem, 2.2vw, 1.85rem);
  border: 1px solid var(--linie);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(33, 30, 29, 0.03);
}

/* Der zweite Ring ist ein Schatten ohne Weichzeichnung, deshalb kostet er
   kein zusätzliches Element. */
.saeule-zeichen {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  box-shadow: 0 0 0 10px rgba(33, 30, 29, 0.025);
  transition: border-color 220ms var(--kurve), background-color 220ms var(--kurve);
}

.saeule-zeichen svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.saeule h3 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
}

.saeule p {
  margin: 0;
  font-size: 0.90625rem;
  line-height: 1.75;
  color: var(--tinte-leise);
  text-wrap: pretty;
}

/* Anfassbarkeit: die Karte hebt sich leicht, sobald der Zeiger darauf liegt.
   Gehoben wird mit translate, nicht mit transform. Transform gehört dem
   Einblenden beim Scrollen; zwei Regeln auf derselben Eigenschaft würden
   sich gegenseitig aushebeln.

   Die Übergänge stehen unter einer Regel mit zwei Klassen, weil die
   Einblendregel weiter unten sonst mit ihrer transition-Kurzschreibweise
   gewinnt und die Hover-Übergänge löscht. Die beiden Einträge für opacity
   und transform sind deshalb hier wiederholt. */
@media (hover: hover) and (pointer: fine) {
  .saeulen .saeule {
    transition-property: opacity, transform, translate, border-color, box-shadow;
    transition-duration: 560ms, 560ms, 220ms, 220ms, 220ms;
    transition-timing-function: var(--kurve);
  }

  .saeule:hover {
    translate: 0 -5px;
    border-color: var(--linie-kraeftig);
    box-shadow: 0 20px 38px -24px rgba(33, 30, 29, 0.5);
  }

  .saeule:hover .saeule-zeichen {
    border-color: color-mix(in srgb, var(--orange) 40%, var(--linie));
    background: color-mix(in srgb, var(--orange) 9%, var(--flaeche));
  }
}

@media (max-width: 62rem) {
  .saeulen {
    grid-template-columns: minmax(0, 1fr);
    max-width: 36rem;
    margin-inline: auto;
  }
}

/* --- Häuserband ------------------------------------------------------------
   Das Band läuft über die volle Bildschirmbreite, nicht im Satzspiegel.
   Zwei identische Listen liegen nebeneinander, die Bewegung schiebt genau
   eine Listenbreite weit und springt dann auf null zurück. Weil an dieser
   Stelle wieder dasselbe Bild steht, ist der Übergang nicht zu sehen.
   -------------------------------------------------------------------------- */

/* Keine Kanten: nach unten bringt die folgende Sektion ihre border-top mit,
   zwei Haarlinien nebeneinander lesen sich als eine dicke. Nach oben grenzt
   das dunkle Band der Datenstrecke an, dort trennt der Farbwechsel. */
/* Oben knapper als unten: die Zeile soll an der Bandkante sitzen und nicht
   in der Fläche schweben. Unten bleibt die Luft, dort stößt das Band an die
   nächste Sektion. */
.haeuserband {
  padding-top: clamp(1.5rem, 2.6vw, 2rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
  background: #ffffff;
  border-top: 0;
}

/* Die Zeile ist die einzige Beschriftung des Bandes und steht gegen 67 bunte
   Logos an. In gedämpfter Farbe und normaler Strichstärke ging sie unter. */
.haeuserband-zeile {
  margin: 0 0 clamp(1.15rem, 2.2vw, 1.6rem);
  color: var(--tinte-kraeftig);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* An beiden Rändern läuft das Band weich aus, damit die Logos nicht an einer
   harten Kante abgeschnitten werden. Eine Maske statt eines aufgelegten
   Verlaufs: so bleibt es richtig, falls das Band je einen anderen Grundton
   bekommt. */
.laufband {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--band-saum, 64px),
    #000 calc(100% - var(--band-saum, 64px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--band-saum, 64px),
    #000 calc(100% - var(--band-saum, 64px)),
    transparent 100%
  );
}

.laufband-lauf {
  display: flex;
  width: max-content;
  animation: laufband var(--band-dauer, 170s) linear infinite;
}

/* Das seitliche Polster ist halb so groß wie der Abstand zwischen zwei
   Logos. So ist der Abstand an der Nahtstelle genauso groß wie überall
   sonst. */
.laufband-spur {
  display: flex;
  align-items: center;
  gap: 112px;
  margin: 0;
  padding: 0 56px;
  list-style: none;
}

.laufband-spur img {
  display: block;
  height: 48px;
  width: auto;
}

@keyframes laufband {
  to {
    transform: translateX(-50%);
  }
}

/* Anhalten, solange der Zeiger darauf liegt: sonst lässt sich ein einzelnes
   Haus nicht in Ruhe ansehen. */
@media (hover: hover) and (pointer: fine) {
  .laufband:hover .laufband-lauf {
    animation-play-state: paused;
  }
}

/* Wer keine Bewegung will, bekommt ein stehendes Band und schiebt es selbst. */
@media (prefers-reduced-motion: reduce) {
  .laufband-lauf {
    animation: none;
  }

  .laufband {
    overflow-x: auto;
  }
}

@media (max-width: 40rem) {
  .laufband {
    --band-saum: 28px;
  }

  .laufband-spur {
    gap: 76px;
    padding: 0 38px;
  }

  .laufband-spur img {
    height: 38px;
  }
}

/* --- Leitsatz --------------------------------------------------------------
   Steht an der Stelle des Häuserbandes, solange die Freigaben der Händler
   für ihre Logos fehlen. Gleiche Fläche und gleiche Abstände wie das Band,
   damit der Übergang zur dunklen Datenstrecke unverändert bleibt. Ein Satz
   im leichten Schnitt, die kurze orange Linie davor als einziges Zeichen.
   -------------------------------------------------------------------------- */

.leitsatz-band {
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  background: #ffffff;
}

.leitsatz {
  margin: 0;
  max-width: 34em;
  color: var(--tinte-kraeftig);
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.85rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

.leitsatz::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: clamp(1rem, 2vw, 1.35rem);
  background: var(--orange);
}

/* --- Zweispaltiger Fließtext ---------------------------------------------- */

.doppelspalte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.doppelspalte p:last-child {
  margin-bottom: 0;
}

/* --- Datenstrecke: gezeichneter Kreislauf ---------------------------------- */

/* Die Datenstrecke ist ein eigenes Feld über die volle Breite, keine
   Textpassage. Der dunkle Grundton markiert auf dieser Seite die Mechanik:
   hier die Strecke, in den Leistungsbereichen das Fundament. Auf ihm tragen
   die orangen Knoten und der gezeichnete Bogen am weitesten.

   Der Kasten liegt in einem eigenen Element, weil er aus dem Inhaltsraster
   ausbrechen muss, um bis an den Rand zu reichen. Der Textinhalt darin wird
   von einem inneren Raster auf Lesebreite gehalten. */
.datenstrecke {
  background: var(--grund-dunkel);
  border-top: 0;
  color: #dcd8d3;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* Auch hier muss die Überschrift umgekehrt werden, sonst steht sie dunkel
   auf dunklem Grund. Sie trägt den Kasten und ist deshalb deutlich größer
   als eine gewöhnliche Zwischenüberschrift. */
.datenstrecke h3 {
  color: #ffffff;
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.35rem);
  letter-spacing: -0.022em;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 30rem;
}

/* Unterzeile direkt unter der Überschrift; sie übernimmt deren Abstand zu
   den Stationen. Der Nachsatz schließt den Kasten unter dem Rückflussbogen. */
.datenstrecke h3:has(+ .strecke-unterzeile) {
  margin-bottom: 0.75rem;
}

.strecke-unterzeile,
.strecke-nachsatz {
  max-width: 62ch;
  color: #cdc8c2;
  font-size: 1rem;
  line-height: 1.65;
}

.strecke-unterzeile {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}

.strecke-nachsatz {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
}

.stationen {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0;
}

/* Die Schiene liegt immer da. Der orange Fortschritt darüber wird vom
   Scrollen getrieben. */
/* Die Schiene endet genau im letzten Knoten, nicht am Rand: bei fünf Spalten
   ist dessen Mitte 20 Prozent minus halbe Knotenbreite vor dem rechten Rand.
   Dadurch bedeutet ein voller Fortschritt auch, Station 5 erreicht zu haben. */
.stationen::before,
.stationen::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 22px;
  right: calc(20% - 22px);
  height: 4px;
}

.stationen::before {
  background: rgba(255, 255, 255, 0.28);
}

.stationen::after {
  background: var(--orange);
  transform-origin: left center;
}

.stationen li {
  position: relative;
  padding: 0 var(--luft-m) 0 0;
}

/* Der Knoten trägt die Ziffer und sitzt auf der Schiene. */
.knoten {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.15rem;
  border-radius: 50%;
  /* Der fertige Zustand ist der Ausgangszustand im CSS. Die Animation
     schaltet von grau auf orange, wo sie unterstützt wird. */
  border: 2px solid var(--orange);
  background: var(--orange);
  color: var(--tinte-kraeftig);
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.stationen li > strong {
  color: #ffffff;
}

.stationen li > p {
  color: #dcd8d3;
}

/* Der Rückflussbogen schließt den Kreis von der letzten Station zur ersten. */
/* Die Ecken liegen unten bündig, die Linie dazwischen dehnt sich. Beide Enden
   ziehen oben um eine weitere Vierteldrehung nach innen und enden neben dem
   Text der äußeren Stationen. */
/* Der Block trägt den Bogen, damit dieser sich an den Stationen ausrichten
   kann statt an eigenen Festwerten. */
.stationen-block {
  position: relative;
  margin-bottom: clamp(3.5rem, 6vw, 5rem);
}

/* Der Bogen umfasst den ganzen Stationsblock. Oben setzt er auf der Höhe der
   Stationstitel an: Knotenhöhe plus Knotenabstand plus die halbe Titelzeile.
   Seitlich greift er über den Satzspiegel hinaus, die Schenkel stehen dadurch
   außerhalb der Textspalten. */
.rueckfluss-bild {
  position: absolute;
  top: calc(44px + 1.15rem + 0.75em);
  bottom: -2.375rem;
  left: calc(var(--rand) * -1 + 0.5rem);
  right: calc(var(--rand) * -1 + 0.5rem);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  /* Der Radius ist knapp gehalten, weil der Überstand links die Gerade
     hergeben muss, auf der die Spitze steht. Bei 960 Pixeln, der schmalsten
     Breite mit Bogen, bleiben vom Überstand nur rund 24 Pixel bis zur Lücke;
     davon braucht die Spitze sieben. Ein größerer Radius setzt sie auf die
     Rundung, dort liest sie sich nicht mehr als Spitze. */
  border-radius: 14px;
  pointer-events: none;
}

/* Deckt die Mitte der oberen Kante ab. Der Grundton ist flach, dadurch bleibt
   die Abdeckung unsichtbar und die Ecken bleiben echte Rundungen. Der Bogen
   steht im Quelltext vor den Stationen: so liegt er hinter der Schrift und die
   Abdeckung radiert keinen Streifen durch die Titel. */
.bogen-luecke {
  position: absolute;
  top: -2.5px;
  /* An den Satzspiegel gekoppelt. Links endet die sichtbare Kante 16 Pixel
     vor dem Text, dort sitzt die Spitze; rechts beginnt sie an der Kante des
     Textes der letzten Station. */
  left: calc(var(--rand) - 0.5rem - 16px);
  right: calc(var(--rand) + 0.5rem);
  height: 5px;
  background: var(--grund-dunkel);
}

/* Die Spitze steht genau dort, wo die Kante aufhört, mit Abstand zur Schrift.
   Klebt sie am Text, liest sich der Bogen als durchlaufende Linie. */
.bogen-spitze {
  position: absolute;
  top: -10px;
  left: calc(var(--rand) - 0.5rem - 35px);
  width: 20px;
  height: 20px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Die Ziffer steht in der Zeile der Überschrift, nicht als Etikett darüber. */
.nummer {
  display: inline-block;
  min-width: 1.35em;
  color: var(--tinte-leise);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.stationen li > strong {
  display: block;
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin-bottom: 0.6rem;
}

.stationen li > p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

.rueckfluss {
  margin-top: var(--luft-m);
  margin-bottom: 0;
  font-size: 0.9375rem;
  max-width: 46rem;
  color: #dcd8d3;
}

.rueckfluss strong {
  color: #ffffff;
}

/* --- Leistungsbereiche: stehende Tafel, fünf Felder daneben ---------------- */

/* Der Kopf steht als Tafel links und bleibt beim Scrollen stehen, damit der
   Zusammenhang nicht verloren geht, während man die Leistungen durchgeht.
   Rechts eine ruhige Spalte aus Zeilen, getrennt durch Haarlinien. */
.leistungen-teilung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.leistungen-tafel {
  position: sticky;
  top: 7rem;
}

/* Zwei Strichstärken wie im Anspruch weiter oben: das Bestimmungswort leicht,
   die Sache kräftig. Deutlich größer als eine gewöhnliche Zwischenüberschrift,
   aber kleiner als der Anspruch, damit die Rangfolge der Seite stimmt. */
.tafel-titel {
  margin: 0 0 var(--luft-m);
  font-size: clamp(1.85rem, 1.35rem + 1.7vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.026em;
}

.tafel-titel .stimme-leicht {
  color: var(--tinte);
}

.tafel-titel .stimme-kraeftig {
  color: var(--tinte-kraeftig);
}

.leistungen-tafel .vorspann {
  margin: 0;
}

/* Tafelnotizen unter dem Kopf. Seit dem Zuschnitt vom 23.09.2026 nicht mehr
   in Gebrauch, die Aussagen stehen in der Einleitung; die Regeln bleiben für
   den Fall, dass wieder eine Notiz dazukommt. Haarlinien statt Kästen: so liest die Tafel als ein Stück
   und nimmt den Rhythmus der Felder rechts auf. */
.tafel-notizen {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--linie-kraeftig);
}

.tafel-notiz {
  padding-block: clamp(1rem, 2vw, 1.35rem);
  border-bottom: 1px solid var(--linie);
}

.tafel-notiz h3 {
  margin: 0 0 0.35rem;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.tafel-notiz p {
  margin: 0;
  max-width: 60ch;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--tinte-leise);
}

/* Die drei Leistungen setzen den Kastenstil der Karten aus dem Auftrag fort:
   weißer Kasten, feine Kante, das Zeichen im Kreis über der Überschrift.
   Untereinander statt nebeneinander. Das Zeichen steht über dem Text und
   nicht daneben, damit die Zeile breit genug für den Blocksatz bleibt. */
.felder {
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
}

.feld {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  padding: clamp(1.5rem, 2.8vw, 2rem) clamp(1.35rem, 2.6vw, 2rem);
  border: 1px solid var(--linie);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(33, 30, 29, 0.03);
}

.feld-zeichen {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  box-shadow: 0 0 0 8px rgba(33, 30, 29, 0.025);
  margin-bottom: 0.9rem;
  transition: border-color 220ms var(--kurve), background-color 220ms var(--kurve);
}

.feld-zeichen svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feld h3 {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.feld p {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tinte-leise);
}

@media (max-width: 62rem) {
  .leistungen-teilung {
    grid-template-columns: minmax(0, 1fr);
  }

  .leistungen-tafel {
    position: static;
  }
}

/* --- Vertrauen: Fragen und Antworten -------------------------------------- */

/* Die Fragen laufen über die volle Satzbreite. Einspaltig, weil eine Liste,
   die man durchliest, keine zweite Spalte verträgt: beim Aufklappen springt
   sonst der Umbruch. Die Antworten behalten ihr eigenes Lesemaß. */
.fragen-einleitung {
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.fragen-titel {
  margin: 0;
  font-size: clamp(1.85rem, 1.35rem + 1.7vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.026em;
}

.fragen-titel .stimme-leicht {
  color: #cdc8c2;
}

.fragen-titel .stimme-kraeftig {
  color: #ffffff;
}

/* Zwei Blöcke untereinander, jeder mit einer kleinen Zeile als Titel. Die
   Zeile steht leiser als die Fragen selbst, damit sie gliedert, ohne mit
   ihnen um den Blick zu konkurrieren. */
.fragen-block + .fragen-block {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.fragen-block-titel {
  margin: 0 0 0.85rem;
  color: #cdc8c2;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fragen {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.frage {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.frage > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--luft-m);
  padding-block: clamp(1.3rem, 2.2vw, 1.65rem);
  cursor: pointer;
  list-style: none;
  color: #ffffff;
  font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.28vw, 1.125rem);
  line-height: 1.45;
  transition: color 0.16s var(--kurve);
}

.frage > summary::-webkit-details-marker {
  display: none;
}

.frage > summary::marker {
  content: "";
}

/* Der Winkel zeigt nach unten und dreht beim Öffnen nach oben. */
.zeichen {
  flex: none;
  width: 34px;
  height: 34px;
  margin-top: -0.35rem;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #ffffff;
  transition: transform 0.24s var(--kurve), border-color 0.16s var(--kurve),
    background-color 0.16s var(--kurve);
}

.frage[open] .zeichen {
  transform: rotate(180deg);
  border-color: transparent;
  background: var(--orange);
  color: #ffffff;
}

.antwort {
  padding-bottom: clamp(1.25rem, 2.2vw, 1.6rem);
  padding-right: calc(34px + var(--luft-m));
}

.antwort p {
  margin: 0;
  max-width: 40rem;
  font-size: 0.9375rem;
  line-height: 1.65;
}

@media (hover: hover) and (pointer: fine) {
  .frage > summary:hover {
    color: var(--orange);
  }

  .frage > summary:hover .zeichen {
    border-color: rgba(255, 255, 255, 0.42);
  }

  .frage[open] > summary:hover .zeichen {
    border-color: transparent;
  }
}

/* Aufklappen: die Antwort fährt aus, statt zu springen. Nur dort, wo der
   Browser eine automatische Höhe interpolieren kann, und nur unter
   .bewegung, also nicht bei prefers-reduced-motion. */
@supports (interpolate-size: allow-keywords) {
  .bewegung .frage::details-content {
    block-size: 0;
    overflow: hidden;
    interpolate-size: allow-keywords;
    transition: block-size 240ms var(--kurve), content-visibility 240ms allow-discrete;
  }

  .bewegung .frage[open]::details-content {
    block-size: auto;
  }
}

/* --- Reiter ---------------------------------------------------------------
   Das Skript baut aus den beiden Blocktiteln zwei Reiter. Mit Reitern
   entfallen die Titel über den Listen und der Abstand zwischen den Blöcken. */
.mit-reitern .fragen-block-titel {
  display: none;
}

.mit-reitern .fragen-block + .fragen-block {
  margin-top: 0;
}

/* Zwei gleich breite Spalten: der linke Reiter steht rechtsbündig, der
   rechte linksbündig. So sitzt der senkrechte Strich zwischen ihnen genau
   auf der Mitte der Seite. */
.fragen-reiter {
  --reiter-abstand: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--reiter-abstand);
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}


.reiter:first-child {
  justify-self: end;
}

.reiter + .reiter {
  position: relative;
  justify-self: start;
}

.reiter + .reiter::before {
  content: "";
  position: absolute;
  left: calc(var(--reiter-abstand) / -2);
  top: 50%;
  width: 1px;
  height: 1.3em;
  translate: -0.5px -50%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.reiter {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0 0.75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--orange);
  font: inherit;
  font-size: clamp(1rem, 0.95rem + 0.28vw, 1.125rem);
  font-weight: 600;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.16s var(--kurve), border-color 0.16s var(--kurve);
}

.reiter[aria-selected="true"] {
  opacity: 1;
  border-bottom-color: var(--orange);
}

.reiter:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
  border-radius: 2px;
}

.reiter .block-zeichen {
  width: 20px;
  height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .reiter:hover {
    opacity: 1;
  }
}

/* Schmal: beide Reiter in zwei gleich breiten Spalten nebeneinander, das
   Zeichen entfällt, damit die Beschriftung Platz hat. */
@media (max-width: 36rem) {
  .fragen-reiter {
    --reiter-abstand: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .reiter,
  .reiter:first-child,
  .reiter + .reiter {
    justify-self: stretch;
    justify-content: center;
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.3;
  }

  .reiter .block-zeichen {
    display: none;
  }
}

/* "Mehr anzeigen" unter der Liste, als ruhiger Umrissknopf. */
.fragen-mehr {
  display: inline-flex;
  align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: 0.65rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s var(--kurve), color 0.18s var(--kurve),
    border-color 0.18s var(--kurve);
}

.fragen-mehr:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .fragen-mehr:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--tinte-kraeftig);
  }
}

/* Abschlusskasten unter der Liste. */
.fragen-abschluss {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.fragen-abschluss-zeichen {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.fragen-abschluss-zeichen svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fragen-abschluss-text {
  flex: 1 1 auto;
}

.fragen-abschluss-text p {
  margin: 0;
  font-size: 0.9375rem;
}

/* Zwei Klassen, damit diese Regel die Nullstellung von
   .fragen-abschluss-text p sicher schlägt. */
.fragen-abschluss-text p.fragen-abschluss-titel {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.fragen-abschluss .aktion {
  flex: none;
}


/* --- Für wen wir arbeiten ------------------------------------------------- */

.adressaten-titel {
  margin: 0;
  font-size: clamp(1.85rem, 1.35rem + 1.7vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.026em;
}

.adressaten-titel .stimme-leicht {
  color: var(--tinte);
}

.adressaten-titel .stimme-kraeftig {
  color: var(--tinte-kraeftig);
}

/* Drei Adressaten untereinander statt in drei schmalen Spalten. Der Name
   steht im Grad einer Zwischenüberschrift und trägt die Zeile; daneben der
   Nutzen im Lesemaß. Die Namen sind die Anker dieser Sektion, deshalb der
   deutliche Sprung im Schriftgrad. */
.adressaten {
  border-top: 1px solid var(--linie-kraeftig);
}

.adressat {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 0.5rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(1.85rem, 3.4vw, 2.6rem);
  border-bottom: 1px solid var(--linie);
}

.adressat h3 {
  margin: 0;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.adressat p {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tinte-leise);
}

/* Leistungen und "Für wen" liegen auf derselben warmen Fläche. Eine dünne
   Linie in der Breite des Inhalts trennt die beiden Blöcke. */
#fuer-wen {
  position: relative;
}

#fuer-wen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(min(100%, var(--breite)) - 2 * var(--rand));
  height: 1px;
  translate: -50% 0;
  background: var(--linie-kraeftig);
}

/* Jeder Adressat steht in einem weißen Kasten, wie die Leistungen darüber. Die Linien entfallen, der Abstand trennt. */
#fuer-wen .adressaten {
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
  border-top: 0;
}

#fuer-wen .adressat {
  padding: clamp(1.75rem, 3vw, 2.4rem) clamp(1.25rem, 3vw, 2.4rem);
  border: 1px solid var(--linie);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(33, 30, 29, 0.03);
}

@media (hover: hover) and (pointer: fine) {
  #fuer-wen .adressat {
    transition-property: opacity, transform, translate, border-color, box-shadow;
    transition-duration: 560ms, 560ms, 220ms, 220ms, 220ms;
    transition-timing-function: var(--kurve);
  }

  #fuer-wen .adressat:hover {
    translate: 0 -5px;
    border-color: var(--linie-kraeftig);
    box-shadow: 0 20px 38px -24px rgba(33, 30, 29, 0.5);
  }

  #fuer-wen .adressat:hover .adressat-zeichen {
    border-color: color-mix(in srgb, var(--orange) 40%, var(--linie));
    background: color-mix(in srgb, var(--orange) 9%, var(--flaeche));
  }
}

/* --- Gesellschaft und Kontakt in einer Sektion ----------------------------
   Die Sektion läuft in drei Lagen von oben nach unten: die Gesellschaft als
   Absatz, darunter die beiden Geschäftsführer nebeneinander, darunter der
   Kontakt als Band über die volle Satzbreite.

   Der Kontakt stand zwischendurch als schmale Spalte rechts. Das ging auf,
   solange beide Profile eine Vita trugen; ohne sie blieb links eine hohe
   leere Fläche neben einem hohen schmalen Kasten. Über die Breite gelegt
   braucht derselbe Inhalt ein Drittel der Höhe und lässt keine Lücke.
   -------------------------------------------------------------------------- */

/* Hier trägt der Kopf nur die Überschrift, ohne Vorspann. Ohne diese Zeile
   stünde ihr eigener Abstand nach unten zusätzlich zu dem des Kopfblocks. */
#gesellschaft .kopfzeile-block h2 {
  margin-bottom: 0;
}

/* Seit die Geschäftsführer wieder einen Werdegang tragen (23.09.2026), stehen
   Gesellschaft und Führung untereinander: oben die beiden Absätze zur
   Gesellschaft nebeneinander, darunter die beiden Profile nebeneinander.
   Beide Paare teilen dasselbe Zweierraster, so fluchten die Spalten. */
.gesellschaft-kopf {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.75rem);
}

.gesellschaft-text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.gesellschaft-text p {
  margin-bottom: 0;
}

.fuehrung {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--linie-kraeftig);
}

/* Porträt links, Name und Funktion daneben, beide auf der Mitte des Bildes.
   Ohne die Zentrierung hinge das Bild unter einer einzeiligen Funktion über.
   Der Werdegang läuft darunter über die volle Spaltenbreite. */
.person-kopf {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-bottom: var(--luft-m);
}

.person .werdegang {
  margin-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--tinte-leise);
}

.portraet {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  /* Bewusst kein Graustufenfilter: die Bilder erscheinen so, wie sie geliefert
     wurden. Entscheidung des Auftraggebers vom 14.09.2026. Dass Bernhard
     Zweifels Aufnahme schwarzweiß ist und die von Sebastian Moos farbig, fällt
     nebeneinander kaum auf, weil beide dunkle Hintergründe haben. Kommt später
     eine farbige Aufnahme von Herrn Zweifel, ändert sich hier nichts. */
  background: var(--flaeche);
}

.person h3 {
  margin-bottom: 0.15rem;
}

.person .rolle {
  color: var(--tinte-leise);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

/* --- Kontaktblock --------------------------------------------------------- */

.kontaktkarte {
  background: var(--flaeche);
  padding: clamp(1.5rem, 3vw, 2.15rem);
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
}

.kontaktkarte > h3 {
  margin-bottom: var(--luft-m);
}

.kontakt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.kontakt-feld h4 {
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: 0.45rem;
}

.kontaktkarte address {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.kontakt-vorspann {
  font-size: 0.9375rem;
  color: var(--tinte-leise);
  margin-bottom: var(--luft-m);
}

.kontaktkarte .abschluss-aktion {
  margin: 0;
}

/* --- Seitenfuß: der Vollständigkeitsblock --------------------------------- */

/* Im Anthrazit der Marke. Die leisen Grautöne darin sind so hell gewählt,
   dass sie auf diesem Grund mindestens 4,5:1 erreichen. */
.seitenfuss {
  background: var(--grund-dunkel);
  color: #e4e0db;
  padding-block: var(--luft-xl) var(--luft-l);
  font-size: 0.875rem;
}

.seitenfuss a {
  color: #ffffff;
}

/* Orange Schrift erreicht auf dem Anthrazit nur 2,7:1. Beim Zeigen bleibt
   die Schrift deshalb weiß, die Unterstreichung wird orange. */
.seitenfuss a:hover {
  color: #ffffff;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
}

.fuss-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--luft-l) clamp(2rem, 4vw, 3.5rem);
  padding-bottom: var(--luft-l);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.fuss-raster h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #cfcac4;
  margin-bottom: 0.75rem;
}

.fuss-raster p,
.fuss-raster address {
  max-width: none;
  font-style: normal;
  margin: 0;
  line-height: 1.7;
}

.fuss-raster ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.9;
}

.fuss-zeile {
  padding-top: var(--luft-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-m) var(--luft-l);
  justify-content: space-between;
  color: #cfcac4;
}

/* --- Platzhalter für noch fehlende Angaben -------------------------------- */

.offen {
  background: #fbe6d3;
  color: #7a3c00;
  padding: 0.1em 0.45em;
  font-size: 0.9em;
  white-space: nowrap;
}

.seitenfuss .offen {
  background: #6a4a2c;
  color: #ffe4c8;
}

/* --- Rechtstexte ---------------------------------------------------------- */

.rechtstext {
  padding-block: clamp(2.5rem, 5vw, 4rem) var(--luft-xl);
}

.rechtstext h2 {
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

.rechtstext h3 {
  margin-top: var(--luft-l);
}

.rechtstext ul {
  max-width: var(--mass);
  padding-left: 1.1rem;
}

.rechtstext li {
  margin-bottom: 0.4rem;
}

.zurueck {
  display: inline-block;
  margin-top: var(--luft-l);
}

/* --- Schmale Bildschirme -------------------------------------------------- */

@media (max-width: 60rem) {
  .einstieg-raster,
  .doppelspalte {
    grid-template-columns: minmax(0, 1fr);
  }

  .adressat {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
  }

  /* Gestapelt läuft die Strecke senkrecht: Schiene links, Knoten darauf.
     Die Spalte muss fest eine sein; auto-fit legte sonst je nach Breite
     zwei bis vier Stationen nebeneinander, etwa auf einem iPhone 16 Pro. */
  .stationen {
    grid-template-columns: minmax(0, 1fr);
  }

  .stationen li {
    padding: 0 0 var(--luft-l) 3.5rem;
  }

  .stationen li:last-child {
    padding-bottom: 0;
  }

  /* Schmal: Absätze und Profile stehen jeweils untereinander. */
  .gesellschaft-text,
  .fuehrung {
    grid-template-columns: minmax(0, 1fr);
  }

  .gesellschaft-text {
    gap: var(--luft-m);
  }

  .knoten {
    position: absolute;
    left: 0;
    top: 0;
    margin-bottom: 0;
  }

  .stationen::before,
  .stationen::after {
    top: 22px;
    bottom: 22px;
    left: 20px;
    right: auto;
    width: 4px;
    height: auto;
  }

  .stationen::after {
    transform-origin: center top;
  }

  .rueckfluss-bild {
    display: none;
  }


  /* Schmal: der Abschlusskasten stapelt. */
  .fragen-abschluss {
    display: grid;
    justify-items: start;
    gap: 1rem;
  }
}

@media (max-width: 54rem) {
  /* Schmal: Logo links, Schalter und Schaltfläche rechts. Die Mittelspalte
     wird dehnbar und schiebt beide nach rechts. */
  .seitenkopf > .rahmen {
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    min-height: 3.75rem;
  }

  .seitenkopf .hauptnavigation {
    justify-self: end;
  }

  .marke img {
    height: 1.5rem;
  }

  .hauptnavigation {
    gap: 0.5rem;
  }

  .aktion {
    font-size: 0.875rem;
    padding: 0.6rem 0.85rem;
  }

  /* Auf schmalen Bildschirmen heißt die Schaltfläche nur „Kontakt“,
     damit die Kopfzeile in einer Zeile bleibt. */
  .wort-lang {
    display: none;
  }

  /* Der Einstieg wird kürzer, sonst überschreitet er die Bildschirmhöhe.
     Der Versatz nach oben entspricht der niedrigeren Kopfzeile. */
  .einstieg {
    min-height: min(76vh, 600px);
    margin-top: -3.75rem;
    padding-block: clamp(2.5rem, 7vw, 3.5rem);
    padding-top: calc(3.75rem + clamp(2.5rem, 7vw, 3.5rem));
  }

  .einstieg-aktionen {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .einstieg-aktionen .aktion {
    width: 100%;
    justify-content: center;
  }

  /* In der Kopfzeile stehen nur noch das Logo links und die drei Striche
     rechts. Der Kontakt wandert ins Menü. */
  .seitenkopf > .rahmen {
    grid-template-columns: 1fr auto;
  }

  .seitenkopf .hauptnavigation {
    justify-self: end;
  }

  .kopf-aktion {
    display: none;
  }

  /* Aus der Liste wird ein Schalter. */
  .menue {
    display: block;
  }

  /* 44 Pixel Tippfläche, die Striche selbst bleiben zierlich. Der rechte
     Rand wird ausgeglichen, damit die Striche bündig mit dem Seitenrand
     abschließen. */
  .menue > summary {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.6rem;
    color: var(--tinte-kraeftig);
    cursor: pointer;
    user-select: none;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
  }

  .menue > summary:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
    border-radius: 6px;
  }

  .burger {
    display: block;
    overflow: visible;
  }

  .strich {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.28s var(--kurve), opacity 0.2s var(--kurve);
  }

  .menue[open] .strich-oben {
    transform: translateY(5px) rotate(45deg);
  }

  .menue[open] .strich-mitte {
    opacity: 0;
  }

  .menue[open] .strich-unten {
    transform: translateY(-5px) rotate(-45deg);
  }

  .menue > summary::-webkit-details-marker {
    display: none;
  }

  .menue > summary::marker {
    content: "";
  }


  /* Muss .hauptnavigation ul überstimmen, daher zweiteilig. */
  .hauptnavigation .bereiche {
    display: none;
  }

  .menue[open] ~ .bereiche {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    border-bottom: 1px solid rgba(217, 213, 207, 0.8);
    padding: 0 var(--rand) 0.75rem;
    box-shadow: 0 14px 26px -18px rgba(33, 30, 29, 0.35);
  }

  /* Dunkles Glas wie die Leiste. Deutlich dichter als die Leiste selbst:
     das Menü reicht weit nach unten und kann dort schon über hellem Grund
     liegen, weiße Schrift braucht dann mehr Deckung. */
  .ueber-medium .menue[open] ~ .bereiche {
    background: rgba(79, 79, 78, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
    border-bottom-color: rgba(255, 255, 255, 0.14);
  }

  .ueber-medium .menue[open] ~ .bereiche li {
    border-top-color: rgba(255, 255, 255, 0.14);
  }

  .ueber-medium .menue[open] ~ .bereiche .nav-seite {
    border-top-color: rgba(255, 255, 255, 0.32);
  }

  .menue[open] ~ .bereiche li {
    border-top: 1px solid var(--linie);
  }

  /* Im aufgeklappten Menü trennt statt des Strichs eine kräftigere Linie. */
  .hauptnavigation .nav-seite {
    margin-left: 0;
  }

  .hauptnavigation .nav-seite::before {
    display: none;
  }

  .menue[open] ~ .bereiche .nav-seite {
    margin-top: 0.4rem;
    border-top: 1px solid var(--linie-kraeftig);
  }

  .menue[open] ~ .bereiche a {
    display: block;
    padding-block: 0.8rem;
  }

  /* Das Menü folgt der Leiste: auf hellem Glas dunkle Schrift, auf dunklem
     Glas weiße. */
  .hauptnavigation .menue[open] ~ .bereiche a:not(.aktion) {
    color: var(--tinte);
  }

  .ueber-medium .hauptnavigation .menue[open] ~ .bereiche a:not(.aktion) {
    color: #ffffff;
  }

  /* Kontakt schließt das Menü als volle Schaltfläche ab. */
  .menue[open] ~ .bereiche .nav-kontakt {
    display: block;
    border-top: 0;
    padding-top: 0.75rem;
  }

  .menue[open] ~ .bereiche .nav-kontakt a {
    display: flex;
    justify-content: center;
  }

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

/* --- Der eine gestaltete Bewegungsmoment ----------------------------------
   Zwei Diagramme bauen sich beim ersten Sichtbarwerden auf. Sie erklären
   etwas: der Kreis der Datenstrecke schließt sich, die fünf Säulen setzen
   auf dem Fundament auf. Alles andere auf dieser Seite bewegt sich nicht.

   Die Klasse .bewegung setzt ausschließlich JavaScript, und nur wenn der
   Besucher keine reduzierte Bewegung verlangt. Ohne beides ist der
   Ausgangszustand der fertige Zustand: nichts ist je unsichtbar.
   -------------------------------------------------------------------------- */

/* --- Die Datenstrecke folgt dem Scrollen ----------------------------------
   Der Aufbau ist an den Scrollfortschritt gekoppelt, nicht an eine Dauer:
   Wer stehen bleibt, hält die Animation an; wer zurückscrollt, spult zurück.
   Das übernimmt der Browser über eine Ansichts-Zeitleiste, ohne JavaScript
   und außerhalb des Hauptthreads.

   Der Ausgangszustand im CSS ist der fertige Zustand. Ohne Unterstützung für
   scroll-getriebene Animationen und bei reduzierter Bewegung steht die
   Strecke also vollständig da.
   -------------------------------------------------------------------------- */

@keyframes strecke-fortschritt {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes strecke-fortschritt-senkrecht {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Der Knoten schaltet nicht nur um, er schlägt kurz über das Ziel hinaus.
   Beim Durchscrollen liest sich das als Klicken der Station. */
@keyframes knoten-an {
  0% {
    background: #5f5e5c;
    border-color: rgba(255, 255, 255, 0.45);
    color: #dcd8d3;
    transform: scale(0.82);
  }
  60% {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--tinte-kraeftig);
    transform: scale(1.18);
  }
  100% {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--tinte-kraeftig);
    transform: scale(1);
  }
}

/* Der Text einer Station erscheint erst, wenn ihr Knoten geschaltet hat.
   Dadurch baut sich der Kasten sichtbar auf, statt nur zwei Punkte zu färben. */
@keyframes station-text {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Der obere Wert ist negativ, damit der Ausschnitt über die Kante des Bogens
   hinausreicht. Die Spitze sitzt mittig auf der oberen Linie und ragt deshalb
   über den Kasten hinaus; ohne den Überstand schnitte der Ausschnitt ihren
   oberen Schenkel dauerhaft ab. Der Wert muss größer bleiben als der
   Hochstand der Spitze in .bogen-spitze. */
@keyframes bogen-zeichnen {
  from { clip-path: inset(-14px 0 0 100%); }
  to   { clip-path: inset(-14px 0 0 0); }
}

/* --- Der Aufbau der Datenstrecke ------------------------------------------
   Läuft ab, sobald der Kasten im Bild ist, und läuft dann durch. Kein
   Festhalten des Scrollens. Die Klasse .sichtbar setzt der Beobachter im
   Seitenfuß; .bewegung nur, wenn keine reduzierte Bewegung gewünscht ist.

   Ohne beides bleibt der Ausgangszustand der fertige Zustand.
   -------------------------------------------------------------------------- */

/* Ruhezustand, solange der Kasten noch nicht im Bild war. */
.bewegung .datenstrecke .stationen::after {
  transform: scaleX(0);
}

.bewegung .datenstrecke .knoten {
  background: #5f5e5c;
  border-color: rgba(255, 255, 255, 0.45);
  color: #dcd8d3;
  transform: scale(0.82);
}

.bewegung .datenstrecke .stationen li > strong,
.bewegung .datenstrecke .stationen li > p {
  opacity: 0;
  transform: translateY(12px);
}

/* Der Bogen wird von rechts nach links gezogen, also in Flussrichtung, und
   nimmt die Spitze am linken Ende mit. */
.bewegung .datenstrecke .rueckfluss-bild {
  clip-path: inset(-14px 0 0 100%);
}

/* Ablauf, sobald der Kasten im Bild ist. Gesamtdauer rund 1,8 Sekunden. */
.bewegung .datenstrecke.sichtbar .stationen::after {
  animation: strecke-fortschritt 700ms linear 80ms both;
}

.bewegung .datenstrecke.sichtbar .knoten {
  animation: knoten-an 380ms var(--kurve) both;
}

.bewegung .datenstrecke.sichtbar li:nth-child(1) .knoten { animation-delay: 80ms; }
.bewegung .datenstrecke.sichtbar li:nth-child(2) .knoten { animation-delay: 255ms; }
.bewegung .datenstrecke.sichtbar li:nth-child(3) .knoten { animation-delay: 430ms; }
.bewegung .datenstrecke.sichtbar li:nth-child(4) .knoten { animation-delay: 605ms; }
.bewegung .datenstrecke.sichtbar li:nth-child(5) .knoten { animation-delay: 780ms; }

.bewegung .datenstrecke.sichtbar li > strong,
.bewegung .datenstrecke.sichtbar li > p {
  animation: station-text 460ms var(--kurve) both;
}

.bewegung .datenstrecke.sichtbar li:nth-child(1) > strong,
.bewegung .datenstrecke.sichtbar li:nth-child(1) > p { animation-delay: 210ms; }
.bewegung .datenstrecke.sichtbar li:nth-child(2) > strong,
.bewegung .datenstrecke.sichtbar li:nth-child(2) > p { animation-delay: 385ms; }
.bewegung .datenstrecke.sichtbar li:nth-child(3) > strong,
.bewegung .datenstrecke.sichtbar li:nth-child(3) > p { animation-delay: 560ms; }
.bewegung .datenstrecke.sichtbar li:nth-child(4) > strong,
.bewegung .datenstrecke.sichtbar li:nth-child(4) > p { animation-delay: 735ms; }
.bewegung .datenstrecke.sichtbar li:nth-child(5) > strong,
.bewegung .datenstrecke.sichtbar li:nth-child(5) > p { animation-delay: 910ms; }

.bewegung .datenstrecke.sichtbar .rueckfluss-bild {
  animation: bogen-zeichnen 820ms var(--kurve) 1000ms both;
}

/* Gestapelt läuft der Fortschritt senkrecht. */
@media (max-width: 60rem) {
  .bewegung .datenstrecke .stationen::after {
    transform: scaleY(0);
  }

  .bewegung .datenstrecke.sichtbar .stationen::after {
    animation-name: strecke-fortschritt-senkrecht;
  }
}

/* Der Textmarker wird gezogen, sobald die Überschrift im Bild ist. Ohne
   .bewegung, also bei prefers-reduced-motion, liegt er von Anfang an. */
.bewegung .anspruch .marker::before,
.bewegung .adressaten-titel .marker::before,
.bewegung .fragen-titel .marker::before,
.bewegung .datenstrecke .marker::before,
.bewegung .tafel-titel .marker::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms var(--kurve) 260ms;
}

.bewegung .kopfzeile-block.sichtbar .anspruch .marker::before,
.bewegung .kopfzeile-block.sichtbar .adressaten-titel .marker::before,
.bewegung .fragen-einleitung.sichtbar .fragen-titel .marker::before,
.bewegung .datenstrecke.sichtbar .marker::before,
.bewegung .leistungen-tafel.sichtbar .tafel-titel .marker::before,
.bewegung .kontakt-aufruf .rahmen.sichtbar .tafel-titel .marker::before {
  transform: scaleX(1);
}

/* Ein Marker über mehrere Wörter, in zwei Stücken gesetzt, damit er mit der
   Zeile umbrechen kann. An der Nahtstelle stehen die Balken nicht über, sonst
   läge das halbtransparente Orange dort doppelt. Das zweite Stück wird im
   Anschluss an das erste gezogen. */
.marker--anfang::before {
  right: 0;
}

.marker--ende::before {
  left: 0;
}

.bewegung .fragen-titel .marker--ende::before {
  transition-delay: 620ms;
}

/* Segmente treten beim Scrollen sanft ein. :where() hält die Spezifität
   niedrig, damit .sichtbar mit einer einzigen Regel gewinnt. */
.bewegung
  :where(
    #auftrag .kopfzeile-block,
    .doppelspalte > div,
    .saeule,
    .leistungen-tafel,
    .feld,
    .tafel-notiz,
    #vertrauen .fragen-einleitung,
    .fragen-block-titel,
    .fragen-reiter,
    .frage,
    .fragen-abschluss,
    #fuer-wen .kopfzeile-block,
    .adressat,
    #gesellschaft .kopfzeile-block,
    .gesellschaft-text,
    .person,
    .kontaktkarte
  ) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms var(--kurve), transform 560ms var(--kurve);
}

.bewegung .sichtbar {
  opacity: 1;
  transform: none;
}

/* Innerhalb einer Gruppe versetzt, damit nichts gleichzeitig eintritt. */
.bewegung
  :where(.feld, .frage, .adressat, .person, .doppelspalte > div) {
  transition-delay: 0ms;
}

.bewegung :where(.feld, .frage, .adressat, .person, .doppelspalte > div, .saeule):nth-child(2) { transition-delay: 60ms; }
.bewegung :where(.feld, .frage, .adressat, .saeule):nth-child(3) { transition-delay: 120ms; }
.bewegung :where(.feld, .frage, .adressat):nth-child(4) { transition-delay: 180ms; }
.bewegung :where(.feld, .frage):nth-child(5) { transition-delay: 240ms; }
.bewegung :where(.frage):nth-child(6) { transition-delay: 280ms; }
.bewegung :where(.frage):nth-child(7) { transition-delay: 320ms; }
.bewegung :where(.frage):nth-child(8) { transition-delay: 360ms; }

/* Hover wie bei den Karten im Auftrag: der Kasten hebt sich an, das Zeichen
   färbt sich. Nur bei echtem Zeiger. Die Übergänge wiederholen opacity und
   transform, sonst löscht die Einblendregel oben die Hover-Übergänge. */
@media (hover: hover) and (pointer: fine) {
  .felder .feld {
    transition-property: opacity, transform, translate, border-color, box-shadow;
    transition-duration: 560ms, 560ms, 220ms, 220ms, 220ms;
    transition-timing-function: var(--kurve);
  }

  .feld:hover {
    translate: 0 -5px;
    border-color: var(--linie-kraeftig);
    box-shadow: 0 20px 38px -24px rgba(33, 30, 29, 0.5);
  }

  .feld:hover .feld-zeichen {
    border-color: color-mix(in srgb, var(--orange) 40%, var(--linie));
    background: color-mix(in srgb, var(--orange) 9%, var(--flaeche));
  }

}

/* --- Reduzierte Bewegung -------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --- Druck ---------------------------------------------------------------- */

@media print {
  .seitenkopf,
  .einstieg-aktionen,
  .sprung {
    display: none;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 11pt;
  }

  .datenstrecke,
  .seitenfuss {
    background: #ffffff;
    color: #000000;
  }

  .seitenfuss a,
  .datenstrecke h3,
  .datenstrecke strong,
  .stationen li > strong,
  .stationen li > p,
  .rueckfluss,
  .fuss-raster h2,
  .fuss-zeile {
    color: #000000;
  }
}

/* --- Blocksatz ------------------------------------------------------------
   Fließtext steht im Blocksatz. Die Silbentrennung verhindert breite Lücken
   zwischen den Wörtern; mittig gesetzte Blöcke behalten ihre letzte Zeile
   in der Mitte. */
p,
li,
dd,
blockquote {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* Verhindert ein einzelnes Wort in der letzten Zeile. */
  text-wrap: pretty;
}

.einstieg p,
#auftrag > .rahmen > .kopfzeile-block p {
  text-align-last: center;
}

/* Die Datenstrecke und das Kleingedruckte im Fuß bleiben linksbündig: in
   den schmalen Spalten reißt der Blocksatz sonst breite Lücken. */
.stationen li,
.stationen li p,
.seitenfuss p,
.seitenfuss li {
  text-align: left;
  text-align-last: auto;
}

/* E-Mail-Adressen werden nie getrennt, damit beim Kopieren keine
   Trennzeichen mitkommen. Die Klasse donthyphenate nimmt sie zusätzlich von
   Hyphenopoly aus. */
a[href^="mailto:"] {
  -webkit-hyphens: none;
  hyphens: none;
  white-space: nowrap;
}

/* Die Stationstitel werden nicht getrennt, sie brechen nur zwischen Wörtern. */
.stationen li > strong {
  -webkit-hyphens: none;
  hyphens: none;
}

/* --- Icons ----------------------------------------------------------------
   Strichzeichen aus Lucide (ISC-Lizenz, lucide.dev). Nur die Pfade stehen im
   Quelltext, Farbe und Strichstärke kommen von hier. */
/* Das Zeichen im Kreis, wie bei den Leistungen darüber. Der Kreis ist das
   svg selbst: Innenabstand, Rand und Hintergrund liegen direkt darauf, so
   bleibt das Markup unverändert. */
.adressat-zeichen {
  display: block;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  padding: 15px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  box-shadow: 0 0 0 8px rgba(33, 30, 29, 0.025);
  overflow: visible;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: border-color 220ms var(--kurve), background-color 220ms var(--kurve);
}

.fragen-block-titel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.block-zeichen {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Kontaktaufruf am Ende der Seiten ---------------------------------------
   Ersetzt seit dem 28.09.2026 die Sektion "Gesellschaft und Kontakt". Die
   Anschrift steht im Seitenfuß, hier nur der Weg zur E-Mail und zu "Über uns". */
.kontakt-aufruf {
  text-align: center;
}

.kontakt-aufruf .tafel-titel {
  margin-bottom: var(--luft-m);
}

.kontakt-aufruf .vorspann {
  margin-inline: auto;
  text-align-last: center;
}

.kontakt-aufruf-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--luft-m);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.kontakt-aufruf-hinweis {
  margin: clamp(2.25rem, 4vw, 3rem) auto 0;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--linie-kraeftig);
  max-width: 34rem;
  font-size: 0.9375rem;
  color: var(--tinte-leise);
  text-align: center;
  text-align-last: center;
}

.kontakt-aufruf-hinweis a {
  color: var(--tinte-kraeftig);
  font-weight: 600;
}

/* Aktuelle Seite in der Navigation, etwa "Über uns" auf seiner Seite. */
.hauptnavigation a:not(.aktion)[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Kurze, mittig gesetzte Einleitungen stehen zentriert statt im Blocksatz:
   bei zwei, drei Zeilen reißt der Blocksatz sonst breite Lücken. */
.kontakt-aufruf .vorspann {
  text-align: center;
}

/* Einzeilige Rollen- und Unterzeilen gehören nicht in den Blocksatz. */
.weg-unterzeile,
.gf-rolle {
  text-align: left;
  text-align-last: auto;
}

/* --- Über uns --------------------------------------------------------------- */

/* Der Einstieg der Seite nutzt die Regeln des Startseiten-Einstiegs. Er ist
   etwas niedriger, weil sein Text kürzer ist. */
.ueber-einstieg {
  min-height: min(72vh, 680px);
}

.ueber-einstieg .vorspann {
  text-align: center;
}

/* Zwei Zeilen: der leichte Anfang steht für sich, darunter der Rest. */
.ueber-einstieg h1 {
  max-width: none;
  font-size: clamp(2.2rem, 1.2rem + 3.3vw, 3.75rem);
}

.ueber-einstieg h1 .wort-leicht {
  display: block;
}

.ueber-einstieg .einstieg-inhalt {
  max-width: 66rem;
}

/* Der Weg der Gesellschaft: vier Karten untereinander, mittig, verbunden
   durch senkrechte Linien mit Pfeilspitze. Die Karten folgen den Karten der
   Startseite: weißer Grund, Zeichen im orangen Kreis. Sie sind nur so breit
   wie eine gut lesbare Zeile plus Innenabstand; in voller Satzbreite blieb
   rechts neben dem Text ein breiter weißer Streifen. */
.weg-karte {
  max-width: 50rem;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem);
  border: 1px solid var(--linie);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(33, 30, 29, 0.03);
}

/* Oben links das Zeichen oder die Marke. */
.weg-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.weg-kopf .saeule-zeichen {
  margin-bottom: 0;
}

.weg-karte h2 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
}

/* Die Unterzeile bricht nur zwischen Wörtern um, nie mit Trennstrich. */
.weg-unterzeile {
  margin-bottom: 1.1rem;
  color: var(--orange);
  font-size: 0.9375rem;
  font-weight: 600;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Die Zeilenlänge begrenzt die Karte selbst, nicht der Absatz. */
.weg-karte p:not(.weg-unterzeile) {
  max-width: none;
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--tinte-leise);
}

/* Die vier Werte als eigene Kästen, zwei mal zwei. Sie liegen in der weißen
   Karte, deshalb auf der warmen Fläche und ohne Schatten; das Zeichen steht
   umgekehrt auf Weiß. Der Text steht linksbündig: in rund 290 Pixeln reißt
   der Blocksatz sonst breite Wortlücken. */
.weg-werte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.1rem);
  margin-top: 0.4rem;
}

.wert {
  padding: clamp(1.35rem, 2.4vw, 1.6rem) clamp(1.25rem, 2.2vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--orange) 14%, var(--linie));
  border-radius: 16px;
  background: var(--flaeche);
}

.wert-zeichen {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--orange) 22%, var(--linie));
  background: #ffffff;
}

.wert-zeichen svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wert h3 {
  margin: 0 0 0.4rem;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.weg-karte .wert p {
  font-size: 0.9375rem;
  line-height: 1.7;
  text-align: left;
  text-align-last: auto;
  text-wrap: pretty;
}

@media (max-width: 40rem) {
  .weg-werte {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Marke statt Zeichen (Karte 1 und 2): so groß wie der Kreis der übrigen
   Karten, damit die Überschriften in allen vier Karten gleich hoch stehen. */
.weg-marke {
  display: block;
  width: 76px;
  height: 76px;
}

/* Die Verbindung zwischen zwei Karten: ein Stamm mit Pfeilspitze. */
.weg-verbinder {
  position: relative;
  height: clamp(3rem, 6vw, 4.25rem);
}

.weg-verbinder::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 3px;
  width: 2px;
  translate: -50% 0;
  background: var(--orange);
}

.weg-verbinder svg {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 20px;
  height: 12px;
  translate: -50% 0;
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* Geschäftsführung: links das Bild, rechts der Text, beide Personen gleich.
   Die Porträts liegen nur in 200 Pixeln vor, deshalb höchstens so groß. */
.geschaeftsfuehrung .kopfzeile-block {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.gf-person {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linie-kraeftig);
}



.gf-bild {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  object-fit: cover;
  background: var(--flaeche);
  box-shadow: 0 0 0 10px rgba(33, 30, 29, 0.025);
}

.gf-text h3 {
  margin-bottom: 0.2rem;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
}

.gf-rolle {
  margin-bottom: 1.1rem;
  color: var(--orange);
  font-size: 0.9375rem;
  font-weight: 600;
}

.gf-text p:not(.gf-rolle) {
  max-width: 44rem;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--tinte-leise);
}

@media (max-width: 52rem) {
  .gf-person {
    grid-template-columns: minmax(0, 1fr);
  }


  .gf-bild {
    width: 140px;
    height: 140px;
  }
}