/* ============================================================
   N-M Marketing — Erweiterung für die mehrseitige Struktur
   Wird NACH site.css geladen und ergänzt sie ausschließlich.
   Keine bestehende Regel wird überschrieben oder verändert.

   Formprinzip unverändert: Flächen scharfkantig, Striche voll gerundet,
   Farben ausschließlich aus tokens.css.
   ============================================================ */

/* ============================================================
   01 · Navigation mit Klappmenü
   Basis ist ein echter <button> mit aria-expanded — Tastaturbedienung
   und Screenreader-Ansage kommen dadurch ohne Zusatzarbeit. Geöffnet
   wird per Klick, nicht per Hover: Hover ist auf Touch-Geräten nicht
   auslösbar und für Tastaturnutzer nicht erreichbar.
   ============================================================ */
.nav-gruppe { position: relative; display: flex; }

.nav-gruppe__knopf {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit;
  /* Die Maße von .nav__link werden geerbt, weil der Knopf die Klasse trägt. */
}
.nav-gruppe__knopf[data-aktiv="true"] { color: var(--text-strong); }
.nav-gruppe__knopf[data-aktiv="true"]::after { width: 100%; }

.nav-gruppe__pfeil {
  flex: none;
  transition: transform var(--dur-base) var(--ease-move);
}
.nav-gruppe__knopf[aria-expanded="true"] .nav-gruppe__pfeil { transform: rotate(180deg); }

.nav-gruppe__liste {
  position: absolute; top: calc(100% + 10px); left: -1rem;
  min-width: 19rem; z-index: 120;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2) 0;
  display: grid; gap: 0;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-move),
              transform var(--dur-base) var(--ease-rise);
}
.nav-gruppe__knopf[aria-expanded="true"] + .nav-gruppe__liste {
  opacity: 1; transform: none; pointer-events: auto;
}
.nav-gruppe__liste a {
  display: block; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small); font-weight: 600;
  color: var(--text-muted); text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--dur-fast) var(--ease-move),
              color var(--dur-fast) var(--ease-move),
              border-color var(--dur-fast) var(--ease-move);
}
.nav-gruppe__liste a:hover {
  background: var(--blue-50); color: var(--text-strong);
  border-left-color: var(--blue-500);
}
.nav-gruppe__liste a[aria-current="page"] {
  color: var(--blue-700); border-left-color: var(--blue-500);
}

/* ---------- Mobil: aus dem Klappmenü wird eine Ausklappliste ----------
   Das Menü ist dort bereits eine feste Tafel (.nav in site.css). Ein
   überlagerndes Klappmenü wäre darin nicht bedienbar. */
@media (max-width: 900px) {
  .nav-gruppe { display: block; }
  .nav-gruppe__knopf {
    width: 100%; justify-content: space-between;
    padding: var(--sp-4) 0; border-bottom: 1px solid var(--border);
    font-size: 1.0625rem; color: var(--text-muted); text-align: left;
  }
  .nav-gruppe__knopf::after { display: none; }
  .nav-gruppe__liste {
    position: static; min-width: 0; left: auto;
    border: 0; box-shadow: none; padding: 0;
    background: var(--bg-subtle);
    opacity: 1; transform: none; pointer-events: auto;
    display: none;
  }
  .nav-gruppe__knopf[aria-expanded="true"] + .nav-gruppe__liste { display: grid; }
  .nav-gruppe__liste a { padding: var(--sp-3) var(--sp-4); }
}

/* ============================================================
   02 · Brotkrume
   ============================================================ */
.brotkrume { border-bottom: 1px solid var(--border); background: var(--bg); }
.brotkrume ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  list-style: none; margin: 0; padding: var(--sp-4) 0;
  font-size: var(--fs-micro); color: var(--text-muted);
}
.brotkrume li { display: flex; align-items: center; gap: var(--sp-2); }
.brotkrume li + li::before {
  content: "›"; color: var(--grey-400); font-weight: 700;
}
.brotkrume a {
  color: var(--text-muted); text-decoration: none;
  padding-block: 2px;
  transition: color var(--dur-fast) var(--ease-move);
}
.brotkrume a:hover { color: var(--blue-700); }
.brotkrume [aria-current="page"] { color: var(--text-strong); font-weight: 600; }

/* ============================================================
   03 · Verteiler — die Weiche der Startseite
   Zwei gleichrangige Wege. Bewusst gleiche Breite und gleiche
   Gestaltung: Sobald eine Spalte optisch führt, ist es keine Weiche
   mehr, sondern eine Empfehlung.
   ============================================================ */
.verteiler {
  display: grid; gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 860px) { .verteiler { grid-template-columns: 1fr; } }

.verteiler__weg {
  background: var(--bg);
  padding: var(--sp-6) var(--sp-5) var(--sp-6);
  display: flex; flex-direction: column;
  transition: background var(--dur-base) var(--ease-move);
}
.verteiler__weg:hover { background: var(--bg-subtle); }

.verteiler__marke {
  font-family: var(--font-display); font-weight: 900; font-size: 0.75rem;
  color: var(--blue-500); letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.verteiler__titel {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  line-height: 1.2; letter-spacing: -0.02em;
  color: var(--text-strong); margin-bottom: var(--sp-3);
}
.verteiler__text {
  font-size: var(--fs-small); color: var(--text-muted); line-height: 1.6;
  margin-bottom: var(--sp-5); max-width: 46ch;
}

.verteiler__liste { display: grid; gap: 0; margin-bottom: var(--sp-5); }
.verteiler__liste a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-small); font-weight: 600;
  color: var(--text); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-move),
              padding-left var(--dur-base) var(--ease-move);
}
.verteiler__liste a:last-child { border-bottom: 1px solid var(--border); }
.verteiler__liste a:hover { color: var(--blue-700); padding-left: var(--sp-2); }
.verteiler__liste svg { flex: none; color: var(--blue-500); }

.verteiler__fuss { margin-top: auto; }

/* ============================================================
   04 · Spezifikationstabelle — Leadprodukte
   Datenblatt statt Werbetext. Unter 640 px wird aus der Tabelle
   eine Definitionsliste: eine zweispaltige Tabelle mit langen
   Werten erzeugt sonst waagerechtes Scrollen.
   ============================================================ */
.spezifikation { border-top: 1px solid var(--border); }
.spezifikation__zeile {
  display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
@media (max-width: 640px) {
  .spezifikation__zeile { grid-template-columns: 1fr; gap: var(--sp-2); }
}
.spezifikation__merkmal {
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 2px;
}
.spezifikation__wert { font-size: var(--fs-small); line-height: 1.6; color: var(--text); }
.spezifikation__wert .offen {
  color: var(--text-muted); font-style: italic;
}

/* ============================================================
   05 · Leistungsseiten — gemeinsame Bausteine
   ============================================================ */
/* Umfang: Aufzählung mit Markenstrich statt Aufzählungspunkt */
.umfang {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
@media (max-width: 720px) { .umfang { grid-template-columns: 1fr; } }
.umfang li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  align-items: start; font-size: var(--fs-small); line-height: 1.6;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.umfang li::before {
  content: ""; width: 14px; height: 2px; background: var(--blue-500);
  border-radius: var(--radius-stroke); margin-top: 0.72em;
}
.umfang strong { font-weight: 700; color: var(--text-strong); }

/* Vorgehen: nummerierte Schritte, gleiche Optik wie .phase */
.vorgehen { display: grid; gap: 0; }
.vorgehen__schritt {
  background: var(--bg); padding: var(--sp-5);
  display: grid; grid-template-columns: 72px 1fr; gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 640px) { .vorgehen__schritt { grid-template-columns: 1fr; gap: var(--sp-3); } }
.vorgehen__no {
  font-family: var(--font-display); font-weight: 900; font-size: 1rem;
  color: var(--blue-500); letter-spacing: 0.06em; padding-top: 2px;
}
.vorgehen__ergebnis {
  margin-top: var(--sp-3); font-size: var(--fs-small);
  color: var(--text-muted);
}
.vorgehen__ergebnis strong { color: var(--text-strong); font-weight: 700; }

/* Abgrenzung: was nicht dazugehört. Bewusst zurückhaltend gestaltet —
   es ist ein Hinweis, keine Warnung. */
.abgrenzung {
  border-left: 3px solid var(--border-strong);
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-5);
  max-width: 74ch;
}
.abgrenzung li {
  font-size: var(--fs-small); color: var(--text-muted);
  padding-block: var(--sp-2); line-height: 1.6;
}
.abgrenzung li strong { color: var(--text-strong); font-weight: 700; }
.section--dark .abgrenzung { border-left-color: var(--dark-border); }
.section--dark .abgrenzung li { color: #A9B7C2; }
.section--dark .abgrenzung li strong { color: #fff; }

/* Verwandte Seiten */
.verwandtes {
  display: grid; gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) { .verwandtes { grid-template-columns: 1fr; } }
.verwandtes a {
  display: block; background: var(--bg);
  padding: var(--sp-5);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-move);
  position: relative;
}
.verwandtes a::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--blue-500);
  transition: width var(--dur-base) var(--ease-move);
}
.verwandtes a:hover { background: var(--bg-subtle); }
.verwandtes a:hover::before { width: 100%; }
.verwandtes__marke {
  font-family: var(--font-display); font-weight: 900; font-size: 0.75rem;
  color: var(--blue-500); letter-spacing: 0.08em; text-transform: uppercase;
  display: block; margin-bottom: var(--sp-2);
}
.verwandtes__titel {
  font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem;
  line-height: 1.25; letter-spacing: -0.02em; color: var(--text-strong);
  margin-bottom: var(--sp-2);
}
.verwandtes__text { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.55; }

/* ============================================================
   06 · Seitenkopf für Unterseiten
   Knapper als der Hero der Startseite: Unterseiten werden mit
   vorhandener Absicht betreten, sie müssen nicht mehr orientieren.
   ============================================================ */
.seitenkopf {
  padding-top: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  padding-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}
.seitenkopf .h-hero { max-width: 20ch; margin-bottom: var(--sp-5); }
.seitenkopf .lead { max-width: 58ch; }
.seitenkopf__aktionen {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; margin-top: var(--sp-6);
}
@media (max-width: 620px) {
  .seitenkopf__aktionen { display: grid; }
  .seitenkopf__aktionen .btn { justify-content: center; }
}

/* ============================================================
   07 · Hinweisblock — offene Angaben, Vorbehalte
   Wird für Stellen genutzt, an denen eine Angabe bewusst fehlt.
   Ehrlicher Platzhalter statt erfundener Wert.
   ============================================================ */
.hinweis {
  background: var(--blue-50);
  border-left: 3px solid var(--blue-500);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-small); color: var(--text);
  line-height: 1.6; max-width: 74ch;
}
.hinweis strong { color: var(--blue-800); font-weight: 700; }
.section--dark .hinweis {
  background: var(--dark-surface); border-left-color: var(--blue-400); color: #A9B7C2;
}
.section--dark .hinweis strong { color: #fff; }

/* ============================================================
   08 · Fehlerseite
   ============================================================ */
.fehlerseite {
  min-height: 58vh;
  display: grid; align-content: center;
  padding-block: clamp(3rem, 2rem + 5vw, 7rem);
}
.fehlerseite__code {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(4rem, 2.5rem + 8vw, 9rem); line-height: 1;
  letter-spacing: -0.05em; color: var(--blue-500);
  margin-bottom: var(--sp-5);
}
.fehlerseite__wege { display: grid; gap: 0; margin-top: var(--sp-7); max-width: 46rem; }
.fehlerseite__wege a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) 0; border-top: 1px solid var(--border);
  font-size: var(--fs-small); font-weight: 600; color: var(--text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-move), padding-left var(--dur-base) var(--ease-move);
}
.fehlerseite__wege a:last-child { border-bottom: 1px solid var(--border); }
.fehlerseite__wege a:hover { color: var(--blue-700); padding-left: var(--sp-2); }

/* ============================================================
   09 · Kleine Helfer
   ============================================================ */
.stapel > * + * { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }

@media (prefers-reduced-motion: reduce) {
  .nav-gruppe__liste,
  .verteiler__liste a,
  .fehlerseite__wege a { transition: none; }
}

/* ============================================================
   10 · Branchen — Ziel und Weg je Eintrag
   Gruppierung statt Liste: 33 Einträge flach nebeneinander lesen sich
   wie ein Katalog. In Feldern gebündelt entsteht eine Marktübersicht,
   in der der Besucher sein eigenes Feld ansteuert statt zu scannen.
   ============================================================ */
.branchen-feld { margin-top: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); }
.branchen-feld__titel {
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3); border-bottom: 2px solid var(--blue-500);
}
.branchen-raster {
  display: grid; gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) { .branchen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .branchen-raster { grid-template-columns: 1fr; } }

.branche {
  background: var(--bg); padding: var(--sp-5) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  position: relative;
  transition: background var(--dur-base) var(--ease-move);
}
.branche:hover { background: var(--bg-subtle); }
.branche::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--blue-500);
  transition: width var(--dur-base) var(--ease-move);
}
.branche:hover::before { width: 100%; }

.branche__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem;
  line-height: 1.25; letter-spacing: -0.02em; color: var(--text-strong);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
}
/* Kennzeichnung nur dort, wo Projekterfahrung tatsächlich belegt ist. */
.branche__beleg {
  font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--blue-700); background: var(--blue-50);
  border: 1px solid var(--blue-200);
  padding: 3px 7px; white-space: nowrap;
}
/* Das Ziel führt: es ist der Satz, in dem sich der Besucher wiederfindet. */
.branche__ziel {
  font-size: var(--fs-small); line-height: 1.55; color: var(--text-strong);
  font-weight: 600;
}
/* Der Weg tritt zurück — er beantwortet die Frage, die nach dem Ziel kommt. */
.branche__weg {
  font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted);
  padding-top: var(--sp-2); border-top: 1px solid var(--border);
}

/* ---------- Passungskriterien: Abschluss der Branchensektion ----------
   Drei gleich hohe Karten. Die gleiche Hoehe entsteht durch das Raster
   (stretch), die Ausrichtung der inneren Zeilen durch zwei Mittel:
   eine Mindesthoehe von zwei Zeilen auf dem Titel und ein Mittelfeld,
   das den Rest fuellt. Dadurch sitzt der Erklaerungssatz in jeder Karte
   auf derselben Grundlinie — unabhaengig von der Textlaenge.
   ------------------------------------------------------------------- */
.passung {
  margin-top: clamp(3.5rem, 2.4rem + 3.6vw, 6rem);
  padding-top: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  border-top: 1px solid var(--border-strong);
}
/* Das Maß gehört auf die Überschrift, nicht auf den Container: „ch" bemisst
   sich an der Schrift des Elements. Auf dem div gilt die Fließtextschrift
   (Manrope ≈ 9 px pro ch) — 30ch ergaben dort rund 270 px statt der
   beabsichtigten ~700 px und brachen die Überschrift in acht kurze Zeilen.
   Derselbe Fehler ist in HANDOVER.md §9 und §18 dokumentiert. */
.passung__kopf { margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.passung__kopf .h2 { max-width: 24ch; margin-bottom: var(--sp-4); }
.passung__kopf .lead { max-width: 54ch; }

.kriterien {
  display: grid; gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;          /* gleiche Kartenhoehe */
}
@media (max-width: 900px) { .kriterien { grid-template-columns: 1fr; } }

.kriterium {
  background: var(--bg);
  padding: var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column;
  position: relative;
  transition: background var(--dur-base) var(--ease-move);
}
.kriterium:hover { background: var(--bg-subtle); }
/* Gleiche Bewegung wie .card und .branche auf der uebrigen Seite */
.kriterium::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--blue-500);
  transition: width var(--dur-base) var(--ease-move);
}
.kriterium:hover::before { width: 100%; }

.kriterium__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;         /* in jeder Karte identisch */
  background: var(--blue-50); color: var(--blue-600);
  margin-bottom: var(--sp-5);
}
.kriterium__icon svg { width: 22px; height: 22px; }

.kriterium__titel {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.02em;
  color: var(--text-strong);
  min-height: 2.6em;              /* zwei Zeilen — haelt die Kernaussage auf Linie */
  margin-bottom: var(--sp-4);
}
.kriterium__kern {
  font-size: 1.0625rem; line-height: 1.45; font-weight: 700;
  color: var(--text-strong);
  flex: 1;                        /* fuellt den Rest, setzt die Erklaerung nach unten */
  margin-bottom: var(--sp-4);
}
.kriterium__text {
  font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted);
  padding-top: var(--sp-4); border-top: 1px solid var(--border);
  /* Drei Zeilen Mindesthöhe: Der längste der drei Sätze bricht auf drei
     Zeilen um, die beiden anderen auf zwei. Ohne diese Angabe wäre der
     Erklärungsblock unterschiedlich hoch — und da die Karten insgesamt
     gleich hoch sind, säßen die Trennlinien auf drei verschiedenen Höhen.
     Genau das ließ die Sektion vorher unruhig wirken. */
  min-height: calc(3 * 1.6em + var(--sp-4));
}

@media (max-width: 900px) {
  /* Auf einer Spalte stehen die Karten untereinander. Mindesthöhen erzeugen
     dort nur Leerraum, weil nichts mehr nebeneinander ausgerichtet werden muss. */
  .kriterium__titel { min-height: 0; }
  .kriterium__kern  { flex: 0 0 auto; }
  .kriterium__text  { min-height: 0; }
}

/* ---------- Abschlusshinweis ---------- */
.passung__fuss {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-5) var(--sp-6);
}
.passung__hinweis {
  flex: 1 1 34ch;
  font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted);
  border-left: 3px solid var(--blue-500);
  padding-left: var(--sp-4);
  max-width: 62ch;
}
@media (max-width: 620px) {
  .passung__fuss .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   11 · Hinweisband — Verweis auf einen anderen Bereich
   ============================================================ */
.band-verweis {
  display: grid; gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  background: var(--bg-subtle);
  border-left: 3px solid var(--blue-500);
  padding: var(--sp-6) var(--sp-5);
}
@media (max-width: 760px) {
  .band-verweis { grid-template-columns: 1fr; }
  .band-verweis .btn { justify-content: center; }
}
.band-verweis__titel {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.25; letter-spacing: -0.02em; color: var(--text-strong);
  margin-bottom: var(--sp-2);
}
.band-verweis__text { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.6; max-width: 62ch; }

/* ============================================================
   12 · WhatsApp — Überlagerung auf kleinen Viewports beheben

   Befund der bestehenden Lösung in site.css:
   · Die Schaltfläche ist position:fixed mit z-index 90.
   · Rechts- und Unterabstand berücksichtigen bereits safe-area-inset.
   · Unter 620 px wird sie zum 52-px-Quadrat, der Text entfällt.
   · body bekommt dort padding-bottom: 4.5rem.

   Zwei Lücken darin:
   1. Die 4.5rem waren geschätzt, nicht gerechnet. Bei 52 px Schaltfläche
      plus Abstand plus Home-Indikator bleibt am Seitenende zu wenig Luft —
      der Fußbereich lag teilweise darunter.
   2. Zwischen 621 und 900 px gilt WEDER die kompakte Form NOCH ein
      reservierter Abstand: Dort schwebt die volle Pille über dem
      Seitenende, ohne dass Platz dafür freigehalten wird.

   Grundsätzlich gilt: Ein fixiertes Element liegt beim Scrollen immer
   vorübergehend über Inhalt. Vollständig ausschließen ließe sich das nur
   durch Ausblenden — das ist ausdrücklich nicht gewünscht. Diese Regeln
   verkleinern die Fläche, halten den Platz am Seitenende verlässlich frei
   und sichern die Mindest-Tastfläche.
   ============================================================ */
:root {
  /* Maße der Schaltfläche als Variablen — der reservierte Abstand wird
     daraus gerechnet und bleibt bei jeder Änderung automatisch stimmig. */
  --wa-hoehe:   52px;
  --wa-abstand: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

/* Abstände aus den Variablen speisen. Auf dem Desktop ergibt das exakt
   denselben Wert wie bisher — dort besteht kein Problem, also keine Änderung. */
.wa {
  right:  calc(var(--wa-abstand) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--wa-abstand) + env(safe-area-inset-bottom, 0px));
}

/* ---------- Reservierter Abstand am Seitenende ----------
   Gilt für ALLE Breiten. Eine erste Fassung beschränkte das auf ≤900 px in
   der Annahme, die Schaltfläche stünde darüber neben der Inhaltsspalte.
   Die Messung widerlegt das: Bei 1024 px lag die Pille mit rund 7.700 px²
   über einer Karte, weil die Spalte dort noch fast die volle Breite nutzt.
   Frei steht die Schaltfläche erst, wenn der Rand neben dem Container
   breiter ist als sie selbst — das ist erst weit jenseits gängiger
   Laptopbreiten der Fall. Auf dem Desktop kostet die Regel rund 90 px
   Weißraum hinter dem Fußbereich und ändert sonst nichts. */
body {
  padding-bottom: calc(
    var(--wa-hoehe) + 2 * var(--wa-abstand) + env(safe-area-inset-bottom, 0px)
  );
}

/* ---------- Telefon: kompakter, enger in die Ecke ---------- */
@media (max-width: 620px) {
  :root { --wa-hoehe: 48px; --wa-abstand: 0.875rem; }
  /* 48 px liegen weiterhin über der Mindest-Tastfläche von 44 px
     (WCAG 2.5.8) und verkleinern die überdeckte Fläche gegenüber
     52 px um rund ein Sechstel. */
  .wa { width: var(--wa-hoehe); height: var(--wa-hoehe); }
}

/* ---------- Sehr schmale Geräte ---------- */
@media (max-width: 360px) {
  :root { --wa-hoehe: 44px; --wa-abstand: 0.75rem; }
  .wa__icon { width: 18px; height: 18px; }
}

/* ---------- Kurze Viewports ----------
   Bei geringer Höhe kostet die Schaltfläche anteilig am meisten Fläche. */
@media (max-height: 620px) and (max-width: 900px) {
  :root { --wa-hoehe: 44px; }
  .wa { width: var(--wa-hoehe); height: var(--wa-hoehe); padding: 0; justify-content: center; }
  .wa__text { display: none; }
}

/* ============================================================
   13 · Waagerechter Ueberlauf auf schmalen Geraeten

   Messung bei 320 px ergab bis zu 91 px Ueberlauf. Zwei Ursachen:

   1. Rasterkinder haben von Haus aus min-width:auto. Der laengste
      unteilbare Inhalt bestimmt damit die Spaltenbreite — deutsche
      Komposita wie „Zahnzusatzversicherungen" sprengen so die Spalte.
      Die Regeln in site.css nutzen an den Hauptstellen bereits
      minmax(0,1fr); die Mobilfassungen fallen aber auf 1fr zurueck,
      wo der Schutz fehlt.
   2. Das Honeypot-Feld ist nur ueber seinen Wrapper beschnitten. Das
      Eingabefeld selbst behaelt seine Standardbreite von rund 153 px
      und ragte dadurch aus dem Sichtfeld.
   ============================================================ */
.split > *,
.umfang > li,
.umfang li > span,
.kriterium,
.branche,
.verteiler__weg,
.vorgehen__schritt,
.spezifikation__zeile > *,
.footer__top > * { min-width: 0; }

/* Lange Komposita duerfen im Notfall umbrechen, statt die Spalte zu weiten. */
@media (max-width: 480px) {
  .umfang li > span,
  .branche__ziel, .branche__weg,
  .kriterium__kern, .kriterium__text,
  .spezifikation__wert,
  .faq__body p { overflow-wrap: anywhere; }
}

/* Honeypot: auch das Eingabefeld selbst auf 1 px begrenzen.
   Es bleibt im Dokument und fuer Bots ausfuellbar — nur ohne Layoutwirkung. */
.hp input, .hp label { width: 1px; max-width: 1px; }

/* Tastflaeche der Zustimmungs-Checkbox von 20 auf 24 px (WCAG 2.5.8). */
.checkbox input { width: 24px; height: 24px; }

/* ============================================================
   14 · Lange Komposita in Displaygroessen

   Messung bei 320 px: Die Ueberschrift „Für Vermittler mit eigener
   Bearbeitungskapazität." war 385 px breit bei 280 px Spaltenbreite —
   ein einzelnes Wort ueberschritt die Zeile um 105 px. Das ist im
   Deutschen der Regelfall, sobald Displaygroessen auf schmale Geraete
   treffen: „Bearbeitungskapazität", „Zahnzusatzversicherungen",
   „Digitalisierungskompetenz".

   Silbentrennung statt hartem Umbruch, weil sie lesbar bleibt. Das
   Dokument traegt lang="de", die Trennmuster greifen also korrekt.
   overflow-wrap bleibt als Rueckfallebene fuer Woerter ohne Trennstelle.
   ============================================================ */
.h-hero, .h2, .h3, .h4,
.verteiler__titel, .kriterium__titel, .branche__name,
.flow__title, .founder__name, .spec__idx,
.faq summary, .branch-groups summary {
  overflow-wrap: break-word;
}

@media (max-width: 700px) {
  .h-hero, .h2, .h3, .h4,
  .verteiler__titel, .kriterium__titel, .branche__name,
  .flow__title, .faq summary {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  /* Fliesstext und Rechtstexte: dort stehen Adressen, Paragrafenketten
     und Fachbegriffe, die ebenfalls nicht umbrechen. */
  .lead, .small, p, li, dd, dt, td, th { overflow-wrap: break-word; }
}