/* ==========================================================================
   faulhaber.solutions

   NICHTS VON DRITTEN. Keine CDN-Schriften, keine Bibliothek, kein
   Zaehlpixel. Das ist der Grund, warum die Datenschutzerklaerung kurz und
   wahr bleibt und kein Cookie-Banner noetig ist. Wer hier eine
   Google-Schrift einbindet, macht aus einer Seite ohne Datenabfluss eine
   mit — und die Erklaerung daneben zur Luege.

   MOBILE FIRST. Das Grundgeruest gilt fuer das Telefon; jede
   `min-width`-Abfrage baut darauf auf. Es gibt KEINE `max-width`-Abfrage,
   die etwas zurueckdreht — wer eine braucht, hat die Basis falsch gebaut.

   SEITENBREITE BAENDER, KEINE KAESTEN. Jede Sektion ist ein Band ueber die
   volle Fensterbreite; nur der Inhalt darin sitzt in einer Huelle mit
   begrenztem Mass. Kein eingelegter Block mit Radius, kein Kachelstapel.

   DER WALD traegt die dunklen Baender. Frueher lagen dort driftende Striche
   auf einem Canvas — das Bild ist besser, weil es zur Sache gehoert und
   nichts rechnet.

   DER STRANG laeuft am linken Rand durch die ganze Seite und ZEICHNET SICH
   beim Scrollen, nativ ueber `animation-timeline`. Ohne Unterstuetzung
   steht er fertig da; niemand sieht eine kaputte Seite.

   KEIN DUNKELMODUS (Entscheidung 2026-08-30). Die dunklen Baender sind
   Gestaltung innerhalb der hellen Seite, kein zweites Farbschema.

   Kopfleiste und Fuss stehen in JEDER Seite einzeln; es gibt keinen
   Bauschritt. Eine Aenderung gehoert ueberall hin.
   ========================================================================== */

@font-face {
  font-family: "Bricolage";
  src: url("schriften/bricolage-grotesque.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
}

@font-face {
  font-family: "Instrument";
  src: url("schriften/instrument-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ── Farben ────────────────────────────────────────────────────────
     Gruen in drei Rollen, weil ein einziger satter Ton nicht beides
     kann: `--gruen` fuer Flaechen und grosse Typo, `--gruen-tief` fuer
     Kleingesetztes auf Weiss (sonst faellt der Kontrast unter das
     Lesbare), `--gruen-hell` nur auf dunklem Grund. */

  --weiss:      #ffffff;
  --papier:     #f4f5f3;
  --kohle:      #0f110f;
  --grau:       #565b57;
  --strich:     #e2e5e1;

  --gruen:      #2fb457;
  --gruen-tief: #15762f;
  --gruen-hell: #56d67d;

  /* ── Mass ───────────────────────────────────────────────────────── */
  --huelle:      68rem;
  --seitenrand:  1.15rem;
  --band-luft:   2.75rem;

  /* Der Strang bekommt eine eigene Spur am linken Rand. Ohne sie laeuft
     er auf schmalen Fenstern durch den Text — es gibt bei seitenbreiten
     Baendern keinen freien Rand mehr, den er sich nehmen koennte. */
  --strang-spur: 1.6rem;

  /* Spur fuer die geschwungenen Uebergangspfeile in der Kette */
  --pfeil-spur: 2.6rem;

  --schrift-anzeige: "Bricolage", "Segoe UI", system-ui, sans-serif;
  --schrift-text:    "Instrument", "Segoe UI", system-ui, sans-serif;
}

@media (min-width: 40rem) {
  :root { --seitenrand: 2rem; --band-luft: 3.75rem; --strang-spur: 2.5rem; --pfeil-spur: 3.4rem; }
}

@media (min-width: 64rem) {
  :root { --seitenrand: 3rem; --band-luft: 5rem; --strang-spur: 3.25rem; }
}

* { box-sizing: border-box; }

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

body {
  position: relative;   /* Bezug fuer den Strang, der ueber die ganze Seite laeuft */
  margin: 0;
  background: var(--weiss);
  color: var(--kohle);
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

:focus-visible { outline: 3px solid var(--gruen-tief); outline-offset: 3px; border-radius: 3px; }

img { max-width: 100%; }

/* ══════════════════ Baender und Huelle ══════════════════
   Das Band nimmt die volle Fensterbreite, die Huelle haelt den Text
   auf lesbarem Mass. Alles Seitenbreite passiert am Band, alle
   Abstaende nach innen an der Huelle. */

.band { position: relative; width: 100%; }

.huelle {
  position: relative; z-index: 2;
  max-width: var(--huelle);
  margin: 0 auto;
  padding: var(--band-luft) var(--seitenrand) var(--band-luft)
           calc(var(--seitenrand) + var(--strang-spur));
}

.huelle.eng { max-width: 46rem; }
.huelle.schmal { padding-top: 1.75rem; padding-bottom: 1.75rem; }

.band.papier { background: var(--papier); }
.band.dunkel { background: var(--kohle); color: var(--weiss); }
.band + .band.hell { border-top: 1px solid var(--strich); }

/* ══════════════════ Der Wald traegt die dunklen Baender ══════════════════
   Das Bild ist bewusst weit offen — man soll den Wald sehen. Lesbarkeit
   entsteht ueber einen Verlauf, der nur dort dunkelt, wo Text steht,
   nicht ueber eine flaechige Abdunklung des ganzen Bildes. */

.band.wald { background: #0b0f0c; color: var(--weiss); overflow: hidden; }

.wald-bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .92;
  filter: grayscale(.22) contrast(1.03) brightness(.94);
  z-index: 0;
}

.wald-schleier {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(9,13,10,.54) 0%, rgba(9,13,10,.18) 45%, rgba(9,13,10,.44) 100%),
    linear-gradient(90deg, rgba(9,13,10,.5) 0%, rgba(9,13,10,.1) 65%, rgba(9,13,10,0) 100%);
}

/* Fuer den Aufmacher, wo viel Text steht, etwas mehr Grund */
.band.wald.tief .wald-schleier {
  background:
    linear-gradient(180deg, rgba(9,13,10,.68) 0%, rgba(9,13,10,.38) 50%, rgba(9,13,10,.62) 100%),
    linear-gradient(90deg, rgba(9,13,10,.64) 0%, rgba(9,13,10,.22) 70%, rgba(9,13,10,.04) 100%);
}

/* Ein einzelner Satz auf dem Wald — die ruhigste Sektion der Seite */
.wald-satz {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.5rem, 5.5vw, 2.7rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -.03em;
  margin: 0; max-width: 19ch; text-wrap: balance;
}

/* ══════════════════ Der Strang ══════════════════ */

.strang {
  position: absolute;
  left: .35rem; top: 0;
  width: var(--strang-spur); height: 100%;
  z-index: 5; pointer-events: none; overflow: visible;
}

.strang path { fill: none; stroke-linecap: round; }
.strang .grundzug { stroke: rgba(120,130,120,.28); stroke-width: 2; }
.strang .fuellzug { stroke: var(--gruen); stroke-width: 2.5; }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .strang .fuellzug {
      stroke-dasharray: 1; stroke-dashoffset: 1;
      animation: strang-ziehen linear both;
      animation-timeline: scroll(root block);
      animation-range: 0% 88%;
    }
  }
}

@keyframes strang-ziehen { to { stroke-dashoffset: 0; } }

/* ══════════════════ Kopfleiste ══════════════════ */

.kopfleiste { position: relative; z-index: 6; background: var(--weiss); }

.kopfleiste .huelle {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem 1.5rem; flex-wrap: wrap;
  padding-top: 1.05rem; padding-bottom: 1.05rem;
}

.marke {
  font-family: var(--schrift-anzeige);
  font-size: 1.22rem; font-weight: 800;
  letter-spacing: -.03em; text-transform: uppercase;
  color: var(--kohle); text-decoration: none;
}

/* MOBILE FIRST: unter 46rem ein Burgerknopf, darueber das Menue in einer
   Zeile. Aufgeklappt legt es sich als Liste unter die Kopfleiste — es
   verdeckt nichts dauerhaft und schiebt den Inhalt nicht weg. */

.burger {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 5px;
  width: 2.9rem; height: 2.9rem; padding: 0 .55rem;
  background: none; border: 0; border-radius: 999px;
  cursor: pointer; color: var(--kohle);
}

.burger span {
  display: block; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .22s ease, opacity .16s ease;
}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) { .burger span { transition: none; } }

.hauptmenue {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 7;
  flex-direction: column; gap: .1rem;
  background: var(--weiss);
  border-top: 1px solid var(--strich);
  border-bottom: 1px solid var(--strich);
  padding: .6rem var(--seitenrand) 1rem;
  font-size: .95rem; font-weight: 600;
}

.hauptmenue.offen { display: flex; }

.hauptmenue a {
  color: var(--grau); text-decoration: none; white-space: nowrap;
  padding: .55rem .8rem; border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}

.hauptmenue a:hover { background: var(--papier); color: var(--kohle); }
.hauptmenue a[aria-current] { background: var(--kohle); color: var(--weiss); }

@media (min-width: 46rem) {
  .burger { display: none; }

  .hauptmenue {
    display: flex; flex-direction: row; gap: .3rem;
    position: static; z-index: auto;
    background: none; border: 0; padding: 0;
    font-size: .8rem;
  }

  .hauptmenue a { padding: .55rem .95rem; }
}

@media (prefers-reduced-motion: reduce) { .hauptmenue a { transition: none; } }

/* ══════════════════ Typografie ══════════════════ */

.aufmacher .huelle { padding-top: clamp(3.25rem, 12vw, 6.5rem); padding-bottom: clamp(3.25rem, 12vw, 6.5rem); }

.aufmacher h1 {
  font-family: var(--schrift-anzeige);
  font-size: clamp(2.1rem, 8.5vw, 4.6rem);
  font-weight: 700; line-height: 1; letter-spacing: -.035em;
  margin: 0 0 1.4rem; max-width: 15ch; text-wrap: balance;
}

.aufmacher h1 .hebt { color: var(--gruen-hell); }

.band-kopf { margin-bottom: 2.1rem; max-width: 46rem; }

.band-kopf h2 {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.6rem, 5.5vw, 2.5rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -.03em;
  margin: 0 0 .8rem; text-wrap: balance;
}

.band-kopf p { margin: 0; color: var(--grau); max-width: 34rem; }
.dunkel .band-kopf p, .wald .band-kopf p { color: #e0e5e0; }

.vorspann { font-size: 1.02rem; line-height: 1.62; color: var(--grau); margin: 0; max-width: 36rem; }
.dunkel .vorspann, .wald .vorspann { color: #e4e9e4; }

.zweizug {
  display: grid; gap: 1.5rem;
  align-items: start;
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 1.5rem;
}

@media (min-width: 46rem) {
  .zweizug { grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem 3rem; }
}

.satz {
  font-size: 1.04rem; line-height: 1.6; color: var(--kohle);
  max-width: 34rem; margin: 0 0 1.1rem;
}

.satz.leise { color: var(--grau); }

/* ══════════════════ Tasten ══════════════════ */

.taste {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--kohle); color: var(--weiss);
  border: 1.5px solid var(--kohle); text-decoration: none;
  padding: .8rem 1.5rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; font-family: inherit;
  cursor: pointer; min-height: 2.9rem;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.taste:hover { background: var(--gruen-tief); border-color: var(--gruen-tief); }

.taste.leer { background: transparent; color: var(--kohle); border-color: var(--strich); }
.taste.leer:hover { background: var(--papier); border-color: var(--grau); }

.dunkel .taste, .wald .taste { background: var(--gruen); border-color: var(--gruen); color: #04240f; }
.dunkel .taste:hover, .wald .taste:hover { background: var(--gruen-hell); border-color: var(--gruen-hell); }
.dunkel .taste.leer, .wald .taste.leer { background: transparent; color: var(--weiss); border-color: rgba(255,255,255,.32); }
.dunkel .taste.leer:hover, .wald .taste.leer:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); }

.tasten { display: flex; gap: .7rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { .taste { transition: none; } }

/* ══════════════════ Die Kette (Startseite) ══════════════════ */

/* Kein Balken mehr, sondern geschwungene Boegen: von jeder Station holt
   ein C-foermiger Pfeil hinunter zur naechsten. Rund und gleichmaessig
   stark wie die Schrift, mit der sie darunter steht — der Uebergang wird
   damit zur Bewegung statt zur Markierung. */

.kette { list-style: none; margin: 0; padding: 0 0 0 calc(var(--pfeil-spur) + .5rem); }

.station { position: relative; padding-bottom: .3rem; }

.station h3 {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.4rem, 5vw, 1.95rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  margin: 0;
}

.station p { margin: .25rem 0 0; color: var(--grau); font-size: .95rem; max-width: 32rem; }

.uebergang {
  position: relative;
  padding: 1.9rem 0;
  min-height: 2.2rem;
  font-size: .8rem; font-weight: 600;
  color: var(--gruen-tief);
}

/* Der Bogen ragt nach oben und unten aus der Uebergangszeile heraus, bis
   an die Stationen heran — er soll sie verbinden, nicht zwischen ihnen
   stehen. Deshalb absolut und mit negativem Anschnitt. */

.bogen {
  position: absolute;
  left: calc(var(--pfeil-spur) * -1 - .5rem);
  top: -3.25rem;
  width: var(--pfeil-spur);
  height: 9.6rem;
  overflow: visible;
  pointer-events: none;
}

.bogen path {
  fill: none;
  stroke: var(--gruen);
  stroke-width: 7;
  /* Der Bogen fuellt seine Box (preserveAspectRatio="none"), sonst passt
     das SVG sich proportional ein und laesst die Haelfte leer. Damit die
     Strichstaerke von der Streckung unberuehrt bleibt: */
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media@media (min-width: 52rem) {
  .station { display: grid; grid-template-columns: 12rem 1fr; gap: 0 2rem; align-items: baseline; }
  .station p { margin-top: .3rem; }

  /* Ab hier stehen Name und Beschreibung nebeneinander, die Stationen
     werden flach — nur noch rund 100 px Abstand. Der Bogen muss kuerzer
     werden, sonst ragt er in den naechsten hinein. */
  .bogen { top: -1rem; height: 7.6rem; }
  .folge-uebergang .bogen { height: 8.2rem; }
}

/* ══════════════════ Der Werdegang als Baender ══════════════════
   Keine gezeichnete Verbindung mehr: die Stationen sind Baender ueber
   die volle Breite und beruehren einander. Der Wechsel der Toenung ist
   die Trennung, das Aneinanderstossen die Verbindung. */

.leiste { list-style: none; margin: 0; padding: 0; }
.halt { position: relative; }
.halt:nth-child(odd) { background: var(--papier); }

.halt .huelle {
  padding-top: clamp(1.75rem, 5vw, 2.6rem);
  padding-bottom: clamp(1.75rem, 5vw, 2.6rem);
}

.halt-zeit {
  display: block;
  font-family: var(--schrift-anzeige);
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--gruen-tief); font-variant-numeric: tabular-nums;
  margin-bottom: .3rem;
}

.halt h3 {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.35rem, 5vw, 1.9rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin: 0;
}

.halt-wo { font-size: .95rem; color: var(--grau); margin: .25rem 0 0; }
.halt-koerper { margin-top: 1rem; }

@media (min-width: 52rem) {
  .halt .huelle { display: grid; grid-template-columns: 11rem 1fr; gap: 0 3rem; }
  .halt-zeit { font-size: 1.1rem; padding-top: .35rem; margin-bottom: 0; }
  .halt-koerper { margin-top: .9rem; }
}

/* Die Klammer: was neben allen Stationen herlaeuft */

.klammer-zeit {
  display: block;
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.9rem, 8vw, 3rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1; color: var(--gruen-tief);
  font-variant-numeric: tabular-nums; margin-bottom: .9rem;
}

.klammer h2 {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.35rem, 5vw, 1.9rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1; margin: 0 0 .7rem;
}

.klammer p { margin: 0 0 .75rem; color: var(--grau); max-width: 36rem; }
.klammer p:last-child { margin-bottom: 0; }

@media (min-width: 52rem) {
  .klammer { display: grid; grid-template-columns: 11rem 1fr; gap: 0 3rem; align-items: start; }
  .klammer-zeit { margin-bottom: 0; }
}

/* ══════════════════ Zahlen, Pillen, Listen ══════════════════ */

.belege {
  display: flex; gap: 1.75rem 2.5rem; flex-wrap: wrap;
  margin: 1.5rem 0 1.75rem; padding-top: 1.2rem;
  border-top: 1px solid var(--strich); max-width: 34rem;
}

.datum { display: flex; flex-direction: column; }

.datum b {
  font-family: var(--schrift-anzeige);
  font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.datum span { font-size: .72rem; color: var(--grau); }

.pillen { display: flex; gap: .45rem; flex-wrap: wrap; }

.pillen span {
  background: var(--papier); color: var(--grau);
  padding: .4rem .85rem; border-radius: 999px;
  font-size: .8rem;
}

.papier .pillen span, .halt:nth-child(odd) .pillen span { background: var(--weiss); }

.merker {
  display: inline-flex; align-self: flex-start;
  background: rgba(47,180,87,.13); color: var(--gruen-tief);
  padding: .32rem .8rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600;
}

.liste { margin: 0; padding-left: 1.1rem; color: var(--grau); max-width: 38rem; }
.liste li { margin-bottom: .42rem; }
.liste li:last-child { margin-bottom: 0; }
.liste b { color: var(--kohle); font-weight: 600; }

.wirkung {
  margin: 1rem 0 0; padding: .85rem 1.1rem;
  background: rgba(47,180,87,.09);
  border-radius: 10px;
  font-size: .94rem; color: var(--kohle); max-width: 38rem;
}

.wirkung b { font-weight: 600; }
.wirkung a { color: var(--gruen-tief); }

.mehr-luft { margin-top: 1.4rem; }
.nach-liste { margin: 2.25rem 0 0; }
.spalten-text { margin: 0 0 .9rem; color: var(--grau); }
.spalten-text.letzter { margin-bottom: 0; }
.spalten-text b { color: var(--kohle); font-weight: 600; }

/* ══════════════════ Produkt ══════════════════ */

/* Der Uebergang vom Ehrenamt zur Anwendung — dieselbe Spur und derselbe
   Bogen wie in der Kette, damit das Zeichen nur einmal erklaert werden
   muss. Der Bogen ist hier etwas laenger: oben endet Fliesstext, unten
   beginnt ein Kasten, das sind groessere Abstaende als zwischen zwei
   Stationsnamen. */

.folge-uebergang {
  padding-left: calc(var(--pfeil-spur) + .5rem);
  margin-top: 1.25rem;
}

.folge-uebergang .uebergang { padding: 2.2rem 0 1.4rem; }
.folge-uebergang .bogen { top: -1.4rem; height: 12rem; }

.folge { margin-top: 1rem; }

.folge-text { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.5rem; }

.folge-text h2,
.folge-text h3 {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.4rem, 5vw, 1.9rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1; margin: 0;
}

.folge-text p { margin: 0; color: var(--grau); font-size: .95rem; max-width: 38rem; }

/* Der Bildschirmausschnitt wird NICHT beschnitten: das Seitenverhaeltnis
   des Kastens folgt dem des Bildes, sonst fehlen oben und unten Teile
   der Oberflaeche — und gerade die sind der Beleg. */
.schirm {
  position: relative;
  aspect-ratio: 1920 / 904;
  background: #0b0d10;
  border: 1px solid var(--strich);
  border-radius: 10px;
  overflow: hidden;
}

.schirm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.schirm-bild { display: block; width: 100%; height: auto; }

/* ══════════════════ Drei Register ══════════════════
   Entsaettigt, damit aus drei sehr verschiedenen Aufnahmen eine Reihe
   wird — und damit das Rot von Einsatzfahrzeug und Marathonwand dem
   Gruen nicht die Arbeit wegnimmt. Farbe kommt bei Beruehrung. */

.register { display: grid; gap: 1.5rem; margin-top: 2rem; }

@media (min-width: 34rem) { .register { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .register { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }

.register-feld { display: flex; flex-direction: column; gap: .85rem; }

.register-bild {
  position: relative; aspect-ratio: 3 / 4;
  background: var(--papier); border-radius: 10px; overflow: hidden;
}

.register-bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter .45s ease, transform .45s ease;
}

.register-feld:hover .register-bild img,
.register-feld:focus-within .register-bild img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.02);
}

.register-name {
  font-family: var(--schrift-anzeige);
  font-size: 1.22rem; font-weight: 700; letter-spacing: -.025em; margin: 0;
}

.register-feld p { margin: 0; color: var(--grau); font-size: .92rem; }

@media (prefers-reduced-motion: reduce) {
  .register-bild img { transition: none; }
  .register-feld:hover .register-bild img { transform: none; }
}

/* Einzelbild, etwa das DLRG-Portraet auf der Ehrenamtseite */
.einzelbild { max-width: 20rem; border-radius: 10px; overflow: hidden; margin-top: 1.75rem; }
.einzelbild img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.04); transition: filter .45s ease; }
.einzelbild:hover img { filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) { .einzelbild img { transition: none; } }

/* ══════════════════ Bereiche eines Produkts ══════════════════ */

.bereiche { display: grid; gap: 1.1rem; }

@media (min-width: 40rem) { .bereiche { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .bereiche { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.bereich { border-top: 2px solid var(--kohle); padding-top: .9rem; }

.bereich h3 {
  font-family: var(--schrift-anzeige);
  font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .45rem;
}

.bereich p { margin: 0; color: var(--grau); font-size: .92rem; }

.bereich.fundament { border-top-color: var(--gruen); }
.bereich.fundament h3 { color: var(--gruen-tief); }

/* ══════════════════ Zwei Spalten ══════════════════ */

.zwei-spalten { display: grid; gap: 2.25rem; }

@media (min-width: 46rem) { .zwei-spalten { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3.5rem; } }

.spalte h3 {
  font-family: var(--schrift-anzeige);
  font-size: 1.22rem; font-weight: 700; letter-spacing: -.025em; margin: 0 0 1.1rem;
}

.spalte h3 + h3, .pillen + h3 { margin-top: 1.9rem; }

.abschluss { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--strich); }
.abschluss:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.abschluss b { display: block; font-weight: 600; }
.abschluss span { display: block; color: var(--grau); font-size: .91rem; margin-top: .12rem; }
.abschluss em { font-style: normal; color: var(--gruen-tief); font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ══════════════════ Schluss ══════════════════ */

.schluss h2 {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.75rem, 6.5vw, 2.9rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -.033em;
  margin: 0 0 1.1rem; max-width: 18ch; text-wrap: balance;
}

.schluss p { color: #e0e5e0; margin: 0 0 1.7rem; max-width: 33rem; font-size: 1.01rem; }

/* ══════════════════ Formular ══════════════════ */

.formular { display: grid; gap: 1.15rem; max-width: 38rem; }
.zeile { display: grid; gap: 1.15rem; }

@media (min-width: 40rem) { .zeile.paar { grid-template-columns: 1fr 1fr; } }

.feldchen { display: flex; flex-direction: column; gap: .4rem; }
.feldchen label { font-size: .85rem; font-weight: 600; }

.feldchen input,
.feldchen textarea,
.feldchen select {
  font-family: inherit; font-size: 1rem; color: var(--kohle);
  background: var(--weiss);
  border: 1.5px solid var(--strich);
  border-radius: 10px;
  padding: .8rem 1rem; min-height: 2.9rem;
  transition: border-color .18s ease;
}

.feldchen textarea { min-height: 9rem; resize: vertical; }
.feldchen input:hover, .feldchen textarea:hover, .feldchen select:hover { border-color: #c6cbc5; }
.feldchen input:focus-visible, .feldchen textarea:focus-visible, .feldchen select:focus-visible { border-color: var(--gruen); }

/* Honigtopf: fuer Menschen unsichtbar, fuer stumpfe Skripte verlockend.
   Kein Captcha — niemand soll Ampeln anklicken, um eine Mail zu senden. */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.einwilligung { display: flex; gap: .7rem; align-items: flex-start; max-width: 38rem; }
.einwilligung input { margin-top: .3rem; flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--gruen); }
.einwilligung label { font-size: .87rem; color: var(--grau); line-height: 1.5; }
.einwilligung a { color: var(--gruen-tief); }

@media (prefers-reduced-motion: reduce) {
  .feldchen input, .feldchen textarea, .feldchen select { transition: none; }
}

/* ══════════════════ Rechtstexte ══════════════════ */

.rechtstext { max-width: 44rem; }

.rechtstext h2 {
  font-family: var(--schrift-anzeige);
  font-size: 1.28rem; font-weight: 700; letter-spacing: -.025em;
  margin: 2.25rem 0 .65rem;
}

.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p { margin: 0 0 .85rem; color: var(--grau); }
.rechtstext ul { margin: 0 0 .85rem; padding-left: 1.1rem; color: var(--grau); }
.rechtstext li { margin-bottom: .3rem; }
.rechtstext a { color: var(--gruen-tief); }
.rechtstext b { color: var(--kohle); }

/* ══════════════════ Fuss ══════════════════ */

.fuss { background: var(--papier); border-top: 1px solid var(--strich); }

.fuss .huelle {
  display: grid; gap: 1.6rem;
  padding-top: 2.25rem; padding-bottom: 2.25rem;
  font-size: .9rem; color: var(--grau);
}

@media (min-width: 40rem) { .fuss .huelle { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2.5rem; } }
@media (min-width: 62rem) { .fuss .huelle { grid-template-columns: repeat(4, 1fr); gap: 2rem 3rem; } }

.fuss h4 { font-size: .8rem; font-weight: 600; color: var(--kohle); margin: 0 0 .7rem; }
.fuss a { color: var(--grau); text-decoration: none; display: block; margin-bottom: .4rem; }
.fuss a:hover { color: var(--gruen-tief); }

.fuss-marke {
  font-family: var(--schrift-anzeige);
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em;
  text-transform: uppercase; color: var(--kohle); margin: 0 0 .5rem;
}

.fuss p { margin: 0; }

/* ══════════════════ Cursor-Begleiter ══════════════════
   Kein Ersatz des Systemzeigers — eine gefuellte Scheibe, die ihm folgt.
   Halbdurchsichtig, damit man hindurchsieht: der Zeiger darf nichts
   verdecken, was man gerade lesen will. Auf Touchgeraeten und bei
   `prefers-reduced-motion` entsteht sie gar nicht erst. */

.begleiter {
  position: fixed; top: 0; left: 0;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  background: var(--gruen); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  opacity: 0;
  transition: width .2s ease, height .2s ease, margin .2s ease, opacity .25s ease;
  will-change: transform;
}

.begleiter.sichtbar { opacity: .45; }
.begleiter.aktiv { width: 52px; height: 52px; margin: -26px 0 0 -26px; opacity: .6; }