/* ==========================================================================
   LG Betriebsgesundheit — Stylesheet
   --------------------------------------------------------------------------
   Gliederung
     01  Schriften
     02  Farb- und Maßvariablen
     03  Reset und Grundlagen
     04  Typografie
     05  Layout-Bausteine (Container, Sektion, Raster)
     06  Wiederverwendbare Elemente (Button, Kicker, Haken)
     07  Kopfleiste und Navigation
     08  Hero, Merkmale und Kennzahlenband
     09  Abgrenzungstext
     10  Leistungskarten
     11  Worauf die Arbeit einzahlt
     12  Über mich
     13  FAQ
     14  CTA-Blöcke
     15  Kontaktformular
     16  Footer
     17  Unterseiten (Impressum, Datenschutz)
     18  Druckausgabe

   Farbregel: #00E08F hat auf hellem Grund nur 1,6:1 Kontrast. Die Farbe
   wird deshalb NIE als Textfarbe und NIE als dünne Kontur auf hellem Grund
   verwendet, sondern immer als Fläche mit anthrazitfarbenem Inhalt darauf
   (9,5:1). Der Farbwert selbst bleibt überall unverändert, auch im Hover.
   ========================================================================== */


/* 01  Schriften ============================================================
   IBM Plex Sans, selbst gehostet. Gewählt, weil die Schrift für technische
   Dokumentation gezeichnet wurde: ruhige Grotesk mit Ingenieurscharakter,
   sachlich statt weich, und keine der austauschbaren Standardschriften.

   ACHTUNG: Die woff2-Dateien fehlen noch. Bis sie in schriften/ liegen,
   greift der System-Fallback aus --schrift. Welche Dateien genau gebraucht
   werden, steht in der README unter "Schriften nachlegen".
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../schriften/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../schriften/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../schriften/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* 02  Farb- und Maßvariablen ============================================== */

:root {
  /* Farben — vier Rollen plus eine Signalfarbe, mehr nicht */
  --bg:         #F5F9F7;   /* Seitenhintergrund, fast weiß mit Grünstich */
  --flaeche:    #FFFFFF;   /* Karten und abgesetzte Abschnitte */
  --ink:        #17211E;   /* Anthrazit: Überschriften, Text auf Signalfarbe */
  --gedaempft:  #55635D;   /* Fließtext */
  --linie:      #E3EAE6;   /* feine Trennlinien und Rahmen */
  --signal:     #00E08F;   /* einzige Signalfarbe — Wert bleibt unverändert */
  --signal-zart: rgba(0, 224, 143, .12);  /* derselbe Wert, nur mit Alpha */

  /* Nur für die eine dunkle Fläche (Kennzahlenband). Kein neutrales
     Schwarz, sondern ein gedecktes Grün-Anthrazit — die Fläche soll
     sichtbar zur Palette gehören. */
  --dunkel:        #15302A;   /* Grund der Fläche */
  --dunkel-linie:  #26443C;   /* Trenner darauf, eine Stufe heller */
  --auf-dunkel:       #D8E5DF;   /* Fließtext darauf,   10,5:1 */
  --auf-dunkel-leise: #93A79E;   /* Quellenzeile darauf, 5,3:1 */

  /* Gemessene Kontraste
     --ink       auf --bg        15,5:1   AAA
     --gedaempft auf --bg         5,9:1   AA  (Fließtext)
     --ink       auf --signal     9,5:1   AAA (Text auf Signalfläche)
     --signal    auf --bg         1,6:1   -> nur als Fläche, nie als Text */

  --schrift: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  /* Maße */
  --breite:         84rem;   /* 1344px — die Textspalte im Hero braucht
                                mindestens 600px, sonst bricht die
                                Drei-Punkte-Zeile um */
  --breite-schmal:  46rem;   /* für zentrierte Textblöcke */
  --rand:           clamp(1.25rem, 5vw, 2.5rem);
  --raum-sektion:   clamp(4.5rem, 9vw, 8rem);
  --radius:         14px;
  --radius-klein:   8px;
  --kopf-hoehe:     4.5rem;

  --schatten:       0 1px 2px rgba(23, 33, 30, .04),
                    0 8px 24px rgba(23, 33, 30, .06);
  --schatten-hoch:  0 2px 4px rgba(23, 33, 30, .05),
                    0 16px 40px rgba(23, 33, 30, .09);
}


/* 03  Reset und Grundlagen ================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

/* Sichtbarer Fokus überall — auch auf summary und Formularfeldern */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Ankerziele nicht unter die klebende Kopfleiste rutschen lassen */
[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem); }

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

/* Nur für Screenreader */
.nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sprungmarke zum Inhalt */
.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: .875rem 1.25rem;
  border-radius: 0 0 var(--radius-klein) 0;
  font-weight: 600;
  text-decoration: none;
}
.sprunglink:focus { left: 0; }


/* 04  Typografie ========================================================== */

/* Obergrenze so gewählt, dass die zweizeilige Hero-Headline auf dem Desktop
   auch wirklich zweizeilig bleibt. Wird die Headline geändert, hier die
   Länge der längeren Zeile gegenprüfen. */
h1 {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
}

h2 {
  font-size: clamp(1.875rem, 3.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
}

p { color: var(--gedaempft); }

/* Größerer Einstiegstext unter Überschriften */
.vorspann {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.72;
  color: var(--gedaempft);
}

/* Kleiner, dezenter Nachsatz (Quellen, Hinweise) */
.fussnote {
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--gedaempft);
}

strong, b { font-weight: 600; color: var(--ink); }


/* 05  Layout-Bausteine ==================================================== */

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

.sektion { padding-block: var(--raum-sektion); }

/* Abgesetzter Abschnitt in Weiß statt auf dem Seitenhintergrund */
.sektion--flaeche {
  background: var(--flaeche);
  border-block: 1px solid var(--linie);
}

/* Schmaler, zentrierter Textblock */
.schmal {
  max-width: var(--breite-schmal);
  margin-inline: auto;
}

/* Kopfbereich einer Sektion */
.sektion__kopf { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sektion__kopf h2 { margin-top: 1rem; }
.sektion__kopf .vorspann { margin-top: 1.25rem; max-width: 44rem; }

.sektion__kopf--zentriert {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.sektion__kopf--zentriert .kicker { justify-content: center; }
.sektion__kopf--zentriert .vorspann { margin-inline: auto; }


/* 06  Wiederverwendbare Elemente ========================================== */

/* --- Button ---------------------------------------------------------------
   Der Signalfarbwert bleibt auch im Hover unverändert. Rückmeldung entsteht
   über Schatten und eine minimale Verschiebung, nicht über eine
   abgedunkelte Variante der Farbe.                                        */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow   var(--bewegung-schnell, .18s) ease,
              transform    var(--bewegung-schnell, .18s) ease,
              border-color var(--bewegung-schnell, .18s) ease;
}

.btn--primaer {
  background: var(--signal);
  color: var(--ink);
}
.btn--primaer:hover {
  box-shadow: 0 6px 18px rgba(0, 224, 143, .35);
  transform: translateY(-1px);
}

.btn--sekundaer {
  background: var(--flaeche);
  color: var(--ink);
  border-color: var(--linie);
}
.btn--sekundaer:hover {
  border-color: #C7D4CE;
  box-shadow: var(--schatten);
  transform: translateY(-1px);
}

.btn--klein { padding: .6875rem 1.125rem; font-size: .875rem; }

/* --- Kicker ---------------------------------------------------------------
   Signalfarbe als kurzer Balken, Text in Anthrazit. Grüner Text wäre auf
   hellem Grund nicht lesbar.                                              */

.kicker {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.kicker::before {
  content: "";
  flex: none;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--signal);
}

/* Variante für den Hero: gefüllte Pille mit Anthrazit-Text */
.kicker-pille {
  display: inline-block;
  background: var(--signal);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4375rem .9375rem;
  border-radius: 999px;
}

/* --- Haken ----------------------------------------------------------------
   Gefüllte Signalfläche mit anthrazitfarbenem Haken darin. Ein grüner Haken
   auf hellem Grund wäre nicht erkennbar genug.                            */

.haken {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 6px;
  background: var(--signal);
}
.haken::after {
  content: "";
  position: absolute;
  left: .4375rem;
  top: .25rem;
  width: .25rem;
  height: .5rem;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Kleines Signal-Plaettchen mit dunkler Glyphe, z. B. vor der Telefonnummer */
.icon-klein {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background: var(--signal);
}
.icon-klein svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hakenliste { display: grid; gap: .875rem; }
.hakenliste li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: var(--gedaempft);
}
.hakenliste .haken { margin-top: .25rem; }
/* --- Drei-Punkte-Zeile im Hero ---------------------------------------------
   Aufbau nach der Referenz: kleines Strich-Icon in der Signalfarbe, Text
   anthrazit daneben. Zur Farbregel siehe Abschnitt 08.                    */

.merkmalzeile {
  display: flex;
  flex-wrap: wrap;
  /* Abstände knapp bemessen: die drei Punkte sollen auf dem Desktop in
     einer Zeile stehen, auch wenn IBM Plex etwas breiter läuft als der
     System-Fallback. */
  gap: .75rem 1rem;
}
.merkmalzeile li {
  display: flex;
  align-items: center;
  gap: .4375rem;
  font-size: .875rem;
  color: var(--gedaempft);
  white-space: nowrap;   /* lieber die Zeile umbrechen als den Punkt */
}
.merkmalzeile__icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* 07  Kopfleiste und Navigation =========================================== */

.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--linie);
}

.kopfleiste__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--kopf-hoehe);
}

/* --- Wortmarke (kein Bild, reine Typografie) --- */
.marke {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.marke__lg {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.marke__wort {
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gedaempft);
}

/* --- Navigation ab Desktop --- */
.nav-desktop { display: none; }
.nav-desktop ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.nav-desktop a {
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--gedaempft);
  padding-block: .375rem;
  transition: color .15s ease;
}
.nav-desktop a:hover { color: var(--ink); }

.kopf-cta { display: none; }

/* --- Mobile Navigation, CSS-only über <details> ---------------------------
   <details> statt Checkbox-Hack: nativ tastaturbedienbar, wird von
   Screenreadern korrekt als aufklappbarer Bereich angesagt, kein
   ARIA-Nachbau nötig.                                                     */

.nav-mobil { position: relative; }

.nav-mobil > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .875rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  font-size: .875rem;
  font-weight: 600;
}
.nav-mobil > summary::-webkit-details-marker { display: none; }

.nav-mobil__balken {
  position: relative;
  width: 1rem;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
}
.nav-mobil__balken::before,
.nav-mobil__balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1rem;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
}
.nav-mobil__balken::before { top: -5px; }
.nav-mobil__balken::after  { top: 5px; }

/* Im geöffneten Zustand wird aus den drei Balken ein Kreuz */
.nav-mobil[open] > summary .nav-mobil__balken { background: transparent; }
.nav-mobil[open] > summary .nav-mobil__balken::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-mobil[open] > summary .nav-mobil__balken::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav-mobil__panel {
  position: absolute;
  right: 0;
  top: calc(100% + .625rem);
  min-width: 15rem;
  padding: 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
}
.nav-mobil__panel ul { display: grid; gap: .25rem; }
.nav-mobil__panel a {
  display: block;
  padding: .625rem .75rem;
  border-radius: var(--radius-klein);
  font-weight: 500;
  text-decoration: none;
}
.nav-mobil__panel a:hover { background: var(--bg); }
.nav-mobil__panel .btn { width: 100%; margin-top: .75rem; }

@media (min-width: 64rem) {
  .nav-mobil   { display: none; }
  .nav-desktop { display: block; }
  .kopf-cta    { display: inline-flex; }
}


/* 08  Hero, Merkmale und Kennzahlenband =================================== */

/* Sehr flacher Verlauf: oben eine Spur heller als der Seitengrund, nach
   unten sauber in --bg auslaufend. Kein Muster, keine Formen. */
.hero {
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(180deg, #FAFCFB 0%, var(--bg) 55%);
}

.hero__raster {
  display: grid;
  gap: clamp(2.75rem, 8vw, 7rem);
  align-items: start;
}

@media (min-width: 72rem) {
  /* Die Textspalte bekommt eine feste Untergrenze. Bindend ist die
     Überschrift mit 564 px; die Drei-Punkte-Zeile braucht seit der
     Umformulierung nur noch 523 px. 37rem lassen knapp 30 px Luft für die
     etwas breitere IBM Plex Sans. Was übrig bleibt, geht an das Diagramm. */
  .hero__raster { grid-template-columns: minmax(37rem, 1fr) minmax(0, 1fr); }
}

.hero h1 { margin-top: 1.5rem; }

.hero__text {
  display: grid;
  gap: 1.125rem;
  margin-top: 1.75rem;
  max-width: 34rem;
}
.hero__text p { font-size: clamp(1.0625rem, 1.4vw, 1.125rem); }

.hero__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 2.25rem;
}

.hero .merkmalzeile { margin-top: 2.25rem; }

/* --- Verbund-Diagramm rechts im Hero ---------------------------------------
   Inline-SVG auf einer weißen Fläche, wie die Karten im Rest der Seite.
   Keine Bilddatei, kein JavaScript. Die Beschriftungen sind echter Text und
   skalieren mit der Grafik mit; unter 48rem werden sie zu klein, um lesbar
   zu bleiben — dort entfällt das Bild.

   Mint steht als gefüllte Fläche: Scheiben mit anthrazitfarbenem Symbol
   darauf. Der verbindende Ring ist eine Linie und deshalb in der
   Linienfarbe, nicht in Mint. Einzige Ausnahme ist die Wortmarke in der
   Mitte — Logotypen sind in WCAG 1.4.3 ausdrücklich von der
   Kontrastanforderung ausgenommen.                                       */

.hero__visual {
  width: 100%;
  /* Deckel nur noch für den gestapelten Fall unter 72rem — zweispaltig
     begrenzt die Rasterspalte, nicht dieser Wert. */
  max-width: 40rem;
  margin-inline: auto;
  /* Bewusst oben ausgerichtet statt mittig: die Grafik soll hoch im Hero
     sitzen, auf Höhe von Kicker und Überschrift. */
  align-self: start;
}

.verbund {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--schrift);
}

.verbund__ring {
  fill: none;
  stroke: var(--linie);
  stroke-width: 3.5;
}

/* Weiße Scheiben wie in der Referenz. Die Haarlinie ist eine Zutat: dort
   liegen die Scheiben auf grauem Grund, hier auf der weißen Karte — ohne
   Kontur wären sie unsichtbar. */
.verbund__scheibe {
  fill: var(--flaeche);
  filter: drop-shadow(0 2px 6px rgba(23, 33, 30, .10));
}

.verbund__symbol {
  fill: none;
  stroke: var(--signal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.verbund__label {
  fill: var(--ink);
  font-size: 17px;
  font-weight: 600;
  text-anchor: middle;
}

/* Wortmarke in der Mitte — dieselbe Zeichnung wie in der Kopfleiste,
   nur groß und als Mintfläche. */
.verbund__marke {
  fill: var(--signal);
  font-size: 92px;
  font-weight: 600;
  letter-spacing: -.02em;
  text-anchor: middle;
}

/* --- Einmalige Animation beim Laden ---------------------------------------
   Der Ring zeichnet sich einmal, danach blenden die fünf Scheiben versetzt
   ein. Nach 1,5 Sekunden steht alles still: keine Dauerbewegung, kein
   Pulsieren, keine Rotation, kein Hover-Effekt.
   Der Umfang des Rings (Radius 185) ist 1162,6 — aufgerundet auf 1163,
   damit der Strich am Ende sicher schließt.                              */

@keyframes verbund-ring {
  from { stroke-dashoffset: 1163; }
  to   { stroke-dashoffset: 0; }
}

@keyframes verbund-ein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.verbund__ring {
  stroke-dasharray: 1163;
  animation: verbund-ring .65s ease-out both;
}

.verbund__marke { animation: verbund-ein .4s ease-out .2s both; }

.verbund__knoten { animation: verbund-ein .33s ease-out both; }
.verbund__knoten:nth-of-type(1) { animation-delay: .65s; }
.verbund__knoten:nth-of-type(2) { animation-delay: .78s; }
.verbund__knoten:nth-of-type(3) { animation-delay: .91s; }
.verbund__knoten:nth-of-type(4) { animation-delay: 1.04s; }
.verbund__knoten:nth-of-type(5) { animation-delay: 1.17s; }

/* Bei reduzierter Bewegung steht alles sofort. Die globale Regel in
   Abschnitt 03 kürzt nur die Dauer, nicht die Verzögerung — ohne diesen
   Block blieben die Scheiben über eine Sekunde unsichtbar. */
@media (prefers-reduced-motion: reduce) {
  .verbund__ring,
  .verbund__marke,
  .verbund__knoten {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@media (max-width: 47.99rem) {
  .hero__visual { display: none; }
}

/* --- Merkmale: drei Karten als Abschluss der Einordnung ---------------------
   Aufbau nach der Referenz: weiße Karte, Icon links oben in einer hellen
   Signalfläche, darunter Überschrift und zwei bis drei Zeilen Text.

   Sie stehen am Ende der Sektion „Warum Zuschüsse allein wenig verändern"
   und gehören dorthin. Der Abstand nach oben ist deshalb der eines
   Absatzes, nicht der einer eigenen Sektion.

   Es sind drei statt vier: die vierte Karte („Ansatz an den langen
   Ausfällen") sagte dasselbe wie der Punkt „Lange Ausfälle" in „Worauf die
   Arbeit einzahlt", bis hin zu denselben drei Beschwerden. Die Karten
   beschreiben, wie gearbeitet wird; die Zielrichtung beschreibt, worauf es
   einzahlt. Wer hier eine vierte Karte ergänzt, sollte prüfen, dass sie
   nicht schon in einer der beiden anderen Sektionen steht.              */

.merkmale__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Drei Karten: zwei Spalten ließen die dritte allein in der zweiten Reihe
   stehen. Deshalb direkt von einer auf drei Spalten. */
@media (min-width: 60rem) {
  .merkmale__raster { grid-template-columns: repeat(3, 1fr); }
}

.merkmal {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Helle Signalfläche: derselbe Farbwert, nur mit Alpha — keine
   abgedunkelte oder aufgehellte zweite Variante der Farbe. */
.merkmal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-klein);
  background: var(--signal-zart);
}
.merkmal__icon svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.merkmal h3 {
  margin-top: 1.125rem;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.merkmal p {
  margin-top: .625rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--gedaempft);
}


/* --- Kennzahlenband unter dem Hero -----------------------------------------
   Die einzige dunkle Fläche der Seite, bewusst als einzelner Akzent. Der
   Rest bleibt hell. Zahlen in der Signalfarbe (7,8:1 auf --dunkel),
   Erklärtexte in --auf-dunkel (10,5:1), Quellenzeile in
   --auf-dunkel-leise (5,3:1).

   Im Ausdruck wird die Fläche aufgehoben (Abschnitt 19): Browser drucken
   Hintergründe standardmäßig nicht, mintfarbene Zahlen auf weißem Papier
   wären unlesbar.                                                        */

.kennzahlen { padding-block: 0 clamp(2.5rem, 5vw, 4rem); }

.kennzahlen__box {
  background: var(--dunkel);
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3.25rem);
}

.kennzahlen__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem 2.5rem;
}

@media (min-width: 36rem) {
  .kennzahlen__raster { grid-template-columns: repeat(2, 1fr); }
}

/* Erst ab 72rem fünf Spalten. Das Innenpolster der dunklen Fläche kostet
   rund 90 px; bei 1024 px blieben je Spalte nur 137 px, die Zahlen brachen
   um und ein Erklärtext lief auf neun Zeilen.

   Nur hier die senkrechten Trenner. Sie sitzen als Pseudoelement in der
   Mitte des Spaltenabstands und kosten deshalb keine Spaltenbreite —
   mit border-left plus Innenpolster brachen „über 40 %" und „über 20 %"
   um. Zwei- und einspaltig entfallen die Trenner. */
@media (min-width: 72rem) {
  .kennzahlen__raster { grid-template-columns: repeat(5, 1fr); }

  .kennzahl { position: relative; }
  .kennzahl + .kennzahl::before {
    content: "";
    position: absolute;
    left: -1.25rem;   /* halber Spaltenabstand */
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--dunkel-linie);
  }
}

/* Der Mint-Balken über der Zahl entfällt: die Zahl selbst ist jetzt farbig. */

.kennzahl__wert {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--signal);
}

.kennzahl__text {
  margin-top: .625rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--auf-dunkel);
}

.kennzahlen__quelle {
  margin-top: 2.5rem;
  color: var(--auf-dunkel-leise);
}


/* 09  Abgrenzungstext ===================================================== */

.abgrenzung { text-align: center; }
.abgrenzung .kicker { justify-content: center; }
.abgrenzung h2 { margin-top: 1rem; }
.abgrenzung__text { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.abgrenzung__text p { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); }

/* Der wörtlich vorgegebene Kernabsatz, leicht hervorgehoben */
.abgrenzung__kern {
  color: var(--ink);
  font-weight: 500;
}


/* 10  Leistungskarten ===================================================== */

.karten {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;   /* Karten wachsen unabhängig voneinander */
}

@media (min-width: 48rem) {
  .karten { grid-template-columns: repeat(2, 1fr); }
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  transition: box-shadow var(--bewegung-schnell, .18s) ease;
}
.karte:hover { box-shadow: var(--schatten-hoch); }

.karte > summary {
  list-style: none;
  cursor: pointer;
  display: block;
  padding: 1.25rem;
}
.karte > summary::-webkit-details-marker { display: none; }

/* --- Kopfbereich der Karte ------------------------------------------------
   Ein Foto im Seitenverhältnis 3:2, eingerückt in der Kartenfläche und
   mit demselben kleinen Radius wie die übrigen Innenflächen.

   Die vier Dateien liegen in bilder/, benannt nach der Leistung. Format
   und Auflösung siehe README, Abschnitt "Bilder nachlegen".            */

.karte__medium {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-klein);
  /* Grund, solange das Foto lädt — dieselbe Tönung wie zuvor der
     flache Streifen. */
  background: var(--signal-zart);
}

.karte__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.karte__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.375rem;
}
.karte__titel { font-size: 1.1875rem; font-weight: 600; }

/* Plus, das im offenen Zustand zum Minus wird */
.karte__schalter {
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--signal);
}
.karte__schalter::before,
.karte__schalter::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--ink);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.karte__schalter::before { width: .875rem; height: 2px; }
.karte__schalter::after  { width: 2px; height: .875rem; }
.karte[open] .karte__schalter::after { display: none; }

.karte__inhalt { padding: 0 1.25rem 1.5rem; }
.karte__inhalt p + p { margin-top: 1rem; }
.karte__inhalt .btn { margin-top: 1.5rem; }


/* 11  Worauf die Arbeit einzahlt ==========================================
   Freistehende Elemente ohne Karte, Rahmen oder Hintergrundfläche.
   Flexbox statt Grid, damit die letzte Zeile auf jeder Breite zentriert
   umbricht (5 Elemente ergeben sonst eine unruhige Restzeile).            */

.einzahlen {
  /* Als eigene Variable, weil der Trenner unten den halben Wert braucht. */
  --einzahlen-abstand: clamp(2.25rem, 4vw, 3.25rem);

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--einzahlen-abstand);
}

.einzahlen > li {
  position: relative;
  flex: 0 1 calc(50% - 1.75rem);
  max-width: 15rem;
  text-align: center;
}

@media (min-width: 48rem) {
  .einzahlen > li { flex-basis: calc(33.333% - 2.25rem); }
}

/* Senkrechte Trenner wie im Kennzahlenband — aber nur hier, wo alle fünf
   Punkte garantiert in einer Zeile stehen. Bei drei oder zwei Punkten je
   Zeile säße die Linie vor dem ersten Punkt der Folgezeile außen am Rand.

   Sie sitzt als Pseudoelement in der Mitte des Abstands und kostet deshalb
   keine Spaltenbreite. Höhe 75 Prozent, vertikal mittig: oben und unten
   bleibt Luft. */
@media (min-width: 64rem) {
  .einzahlen > li { flex-basis: calc(20% - 2.6rem); }

  .einzahlen > li + li::before {
    content: "";
    position: absolute;
    left: calc(var(--einzahlen-abstand) / -2);
    top: 12.5%;
    bottom: 12.5%;
    width: 1px;
    background: var(--linie);
  }
}

.einzahlen__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 14px;
  background: var(--signal);
}
.einzahlen__icon svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.einzahlen h3 { margin-bottom: .625rem; }
.einzahlen p { font-size: .9375rem; line-height: 1.65; }


/* 12  Über mich =========================================================== */

.ueber__raster {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 64rem) {
  .ueber__raster { grid-template-columns: 1.2fr .8fr; }
}

.ueber__text { display: grid; gap: 1.25rem; max-width: 40rem; }
.ueber__text h2 { margin-bottom: .5rem; }

/* Hervorgehobener Absatz (wörtliche Vorgabe) */
.hinweisblock {
  padding: 1.5rem 1.75rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--signal);
  border-radius: var(--radius-klein);
}
.hinweisblock p { color: var(--ink); font-weight: 500; }

.ueber__spalte { display: grid; gap: 2rem; }

/* Portrait im Seitenverhältnis 3:4. Die Datei ist 1179x1567 und damit
   etwas hoeher als 3:4 — object-fit: cover beschneidet sie oben und
   unten minimal, statt sie zu verzerren.

   Breite begrenzt und rechts ausgerichtet, damit das hohe Format neben
   dem Text nicht ueberproportional wirkt. Diese beiden Werte standen
   vorher am Platzhalter und gehoeren jetzt hierher — ohne sie fuellt das
   Foto die ganze Spalte. */
.portrait__bild {
  display: block;
  width: 100%;
  max-width: 21rem;
  margin-left: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Qualifikationen und Einsatzgebiet stehen unter dem Split ueber die
   volle Breite -- sonst entsteht neben dem kurzen Textblock eine grosse
   leere Flaeche. */
.ueber__fuss {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--linie);
}
@media (min-width: 48rem) {
  .ueber__fuss { grid-template-columns: 1.6fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
}

.ueber__fuss h3 { margin-bottom: 1.125rem; }

@media (min-width: 30rem) {
  .qualifikationen .hakenliste { grid-template-columns: 1fr 1fr; gap: .875rem 2rem; }
}

.einsatzgebiet p { max-width: 24rem; }


/* 13  FAQ ================================================================= */

.faq { max-width: 52rem; }

.faq > li { border-top: 1px solid var(--linie); }
.faq > li:last-child { border-bottom: 1px solid var(--linie); }

.faq details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.375rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
}
.faq details > summary::-webkit-details-marker { display: none; }

.faq__schalter {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--signal);
}
.faq__schalter::before,
.faq__schalter::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--ink);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.faq__schalter::before { width: .75rem; height: 2px; }
.faq__schalter::after  { width: 2px; height: .75rem; }
.faq details[open] .faq__schalter::after { display: none; }

.faq__antwort { padding-bottom: 1.625rem; max-width: 40rem; }
.faq__antwort p + p { margin-top: 1rem; }


/* 14  CTA-Blöcke ========================================================== */

.cta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.cta p {
  max-width: 40rem;
  margin-inline: auto;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--ink);
}
.cta .btn { margin-top: 1.75rem; }
.cta .fussnote { margin-top: 1rem; }


/* 15  Kontaktformular ===================================================== */

.kontakt__raster {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 64rem) {
  .kontakt__raster { grid-template-columns: .85fr 1.15fr; }
}

.kontakt__seite { display: grid; gap: 1.5rem; }

.kontakt__telefon {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.formularbox {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.formular {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40rem) {
  .formular { grid-template-columns: 1fr 1fr; }
  .feld--voll { grid-column: 1 / -1; }
}

.feld { display: grid; gap: .4375rem; }

.feld label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
}
.feld__optional { font-weight: 400; color: var(--gedaempft); }

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: .8125rem 1rem;
  color: var(--ink);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  transition: border-color .15s ease;
}
.feld textarea { resize: vertical; min-height: 7.5rem; line-height: 1.6; }
.feld input:hover,
.feld select:hover,
.feld textarea:hover { border-color: #C7D4CE; }

/* Fehlerzustand ohne zusätzliche Farbe: kräftigerer Rahmen in Anthrazit
   plus ein Meldungstext. Farbe ist nie das einzige Unterscheidungsmittel. */
.feld--fehler input,
.feld--fehler select,
.feld--fehler textarea {
  border-color: var(--ink);
  border-width: 2px;
  padding: .75rem .9375rem;
}

.feld__fehler {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink);
}
.feld__fehler::before {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 2px;
  background: var(--signal);
}

/* Einwilligung */
.einwilligung {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.einwilligung input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .3125rem;
  accent-color: var(--signal);
}
.einwilligung label {
  font-size: .875rem;
  font-weight: 400;
  color: var(--gedaempft);
  line-height: 1.6;
}
.einwilligung a { color: var(--ink); font-weight: 600; }

/* Honigtopf: aus dem Sichtfeld geschoben, nicht display:none, damit
   Bots das Feld auslesen und ausfüllen. */
.honigtopf {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Statusmeldung über dem Formular */
.meldung {
  margin-bottom: 1.75rem;
  padding: 1.125rem 1.375rem;
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
}
.meldung--ok     { border-left: 4px solid var(--signal); }
.meldung--fehler { border-left: 4px solid var(--ink); }
.meldung p { color: var(--ink); }
.meldung strong { display: block; margin-bottom: .25rem; }

.formular__absenden { grid-column: 1 / -1; }
.formular__absenden .btn { width: 100%; }
@media (min-width: 40rem) {
  .formular__absenden .btn { width: auto; }
}


/* 16  Footer ============================================================== */

.fuss {
  border-top: 1px solid var(--linie);
  padding-block: 3rem 2.5rem;
  font-size: .875rem;
  color: var(--gedaempft);
}

.fuss__innen {
  display: grid;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .fuss__innen {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

.fuss__marke { margin-bottom: .75rem; }
.fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
}
.fuss__links a { text-decoration: none; }
.fuss__links a:hover { color: var(--ink); text-decoration: underline; }

/* Stand vorher als style-Attribut im Markup. Die Content-Security-Policy
   der .htaccess erlaubt kein 'unsafe-inline', deshalb hier als Klasse. */
.fuss__telefon { margin-top: .75rem; }

.fuss__zeile {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}


/* 17  Unterseiten (Impressum, Datenschutz) ================================ */

.rechtstext { max-width: 46rem; }
.rechtstext h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.rechtstext h2 {
  font-size: 1.375rem;
  margin-top: 2.75rem;
  margin-bottom: .875rem;
}
.rechtstext h3 {
  margin-top: 1.75rem;
  margin-bottom: .5rem;
}
.rechtstext p { margin-bottom: 1rem; }
.rechtstext ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 1rem;
  color: var(--gedaempft);
}
.rechtstext li { margin-bottom: .375rem; }
.rechtstext a { color: var(--ink); font-weight: 500; }

/* Deutlich markierter Platzhalter im sichtbaren Text */
.platzhalter {
  background: var(--signal);
  color: var(--ink);
  font-weight: 600;
  padding: .0625rem .375rem;
  border-radius: 4px;
}


/* 18  Druckausgabe ========================================================
   Geschäftsführung druckt solche Seiten für die Besprechung aus. Deshalb:
   Navigation und Handlungsaufforderungen raus, alle aufklappbaren Bereiche
   geöffnet.                                                               */

@media print {
  .kopfleiste,
  .nav-mobil,
  .cta,
  .hero__knoepfe,
  .formularbox,
  .sprunglink { display: none !important; }

  body { background: #fff; font-size: 10.5pt; }
  .hero { background: none; }

  /* Hintergründe werden nicht gedruckt — die dunkle Fläche muss deshalb
     auf Papier zurück auf helle Verhältnisse. */
  .kennzahlen__box { background: none; padding: 0; }
  .kennzahl::before { display: none; }
  .kennzahl__wert { color: var(--ink); }
  .kennzahl__text,
  .kennzahlen__quelle { color: var(--gedaempft); }

  /* Zugeklappte <details> im Ausdruck öffnen. Drei Regeln, weil die Browser
     den geschlossenen Zustand unterschiedlich umsetzen: ältere über
     display:none auf dem Inhalt, aktuelle Chrome-Versionen über
     content-visibility am Pseudoelement ::details-content. */
  details:not([open]) > *:not(summary) { display: block !important; }
  details::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
  }
  .karte__inhalt,
  .faq__antwort { display: block !important; }

  /* Das Plus-Symbol ergibt auf Papier keinen Sinn */
  .karte__schalter,
  .faq__schalter { display: none !important; }

  .karte,
  .hero__visual,
  .merkmal,
  .kennzahl,
  .hinweisblock {
    box-shadow: none;
    break-inside: avoid;
  }

  /* Im Ausdruck laufen keine Animationen — sonst bliebe das Diagramm
     unsichtbar, weil die Startwerte auf opacity: 0 stehen. */
  .verbund__ring,
  .verbund__marke,
  .verbund__knoten {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }

  .karte__medium { display: none; }

  .sektion { padding-block: 1.5rem; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}