/* =====================================================================
   MM Wunde GmbH — Gestaltungsgrundlage der Website
   Quelle der Farben und der Schrift: 0.7_PRODUKT/SCHULUNGEN/_MARKE/CI_MM_WUNDE.md
   Eigenentwicklung. Kein fremdes Gestaltungsraster uebernommen.
   ===================================================================== */

/* ---------- Schrift: liegt lokal, keine Verbindung zu Google ---------- */
@font-face {
  font-family: "Outfit";
  /* WOFF2 zuerst (halb so gross, schrift_woff2.py), die TTF als Rueckfall */
  src: url("schrift/Outfit-Variable.woff2") format("woff2"),
       url("schrift/Outfit-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* CI — verbindlich */
  --blau-dunkel: #304F88;
  --blau-mittel: #5388C6;
  --pink: #F65B9A;
  --pink-dunkel: #CC3366;
  --grau: #757887;            /* CI-Ton - nur fuer Linien und Flaechen */
  --grau-lesbar: #63667A;     /* fuer TEXT: das CI-Grau erreicht auf hellem Grund
                                 nur 4,2:1 und faellt damit unter die Lesbarkeitsgrenze
                                 von 4,5:1. Gleicher Farbcharakter, nur dunkler. */
  --grau-auf-flaeche: #4F5876; /* Nebentext auf der hellblauen Flaeche (--flaeche):
                                 --grau-lesbar erreicht dort nur 4,3:1. Dieser Ton
                                 ist zum Blau der Flaeche hin getoent: 5,3:1. */
  --flaeche: #DBE0F2;
  --text: #333333;
  --weiss: #FFFFFF;

  /* abgeleitet */
  --grund: #F7F9FD;
  --linie: #E3E8F5;
  --blau-tief: #243C69;
  --schatten: 0 2px 4px rgba(48,79,136,.04), 0 12px 32px rgba(48,79,136,.08);
  --schatten-hoch: 0 4px 8px rgba(48,79,136,.06), 0 20px 48px rgba(48,79,136,.14);

  --radius: 18px;
  --radius-klein: 10px;
  /* Schriftgroessen (seit 09.10.2026): EINE Skala mit Rollen statt 40 Einzelwerten.
     Neue Regeln nehmen eine dieser Rollen - keine freien Zahlen mehr. Ausnahmen:
     die Lesehilfe (eigenes em-System auf 16 px) und drei fliessende Sonderfaelle
     (Unterzeile im Kopfbild, Titel der Tueren, das grosse Anfuehrungszeichen). */
  --schrift-marke: .75rem;     /* 12 px - Marken wie "NEU", Bildhinweis */
  --schrift-fein: .8125rem;    /* 13 px - Kleingedrucktes */
  --schrift-klein: .875rem;    /* 14 px - Hinweise, Leiste, Handyleiste */
  --schrift-neben: .9375rem;   /* 15 px - Nebentext, Ueberzeilen, Menue */
  --schrift-basis: 1rem;       /* 16 px - Knoepfe, kurze Zeilen */
  --schrift-betont: 1.0625rem; /* 17 px - Formularfelder, Telefonnummer */
  --schrift-text: 1.125rem;    /* 18 px - Fliesstext */
  --schrift-gross: 1.25rem;    /* 20 px - kleine Titel in Kaesten */
  --schrift-titel: 1.5rem;     /* 24 px */
  --schrift-zahl: 2rem;        /* 32 px - Kennzahlen */
  --schrift-h1: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  --schrift-h2: clamp(1.55rem, 1.15rem + 1.5vw, 2.25rem);
  --schrift-h3: clamp(1.15rem, 1.02rem + .5vw, 1.375rem);
  --breite: 1180px;
  --spalte: 720px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: "Outfit", "Montserrat", Calibri, Arial, sans-serif;
  font-weight: 400;          /* seit 25.09.2026: 400 statt 350 - Zielgruppe oft 60+ */
  font-size: var(--schrift-text);       /* seit 25.09.2026: 18 px statt 17 px (Analyse Website 3.1) */
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-weight: 650;
  line-height: 1.18;
  color: var(--blau-dunkel);
  margin: 0 0 .6em;
  letter-spacing: -.015em;
  /* Zeilen gleich lang umbrechen - kein einzelnes Wort allein in der
     letzten Zeile ("Eine Wunde, die nicht / zugeht?", Befund 02.10.2026). */
  text-wrap: balance;
}
h1 { font-size: var(--schrift-h1); }
h2 { font-size: var(--schrift-h2); }
h3 { font-size: var(--schrift-h3); }
p { margin: 0 0 1.1em; text-wrap: pretty; }
a { color: var(--blau-dunkel); text-decoration-color: var(--blau-mittel); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--blau-mittel); } }

/* Tastaturbedienung muss sichtbar sein — Barrierefreiheit, nicht Geschmack */
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 4px; }

.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.schmal { max-width: var(--spalte); }
.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--blau-dunkel); color: #fff; padding: .7rem 1.2rem;
  border-radius: 0 0 var(--radius-klein) var(--radius-klein); transition: top .15s;
}
.sprung-link:focus { top: 0; color: #fff; }

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: inherit; font-weight: 600; line-height: 1.25;
  padding: .95rem 1.6rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .knopf:hover { transform: translateY(-1px); } }
.knopf--haupt { background: var(--blau-dunkel); color: #fff; box-shadow: 0 6px 18px rgba(48,79,136,.25); }
@media (hover: hover) and (pointer: fine) { .knopf--haupt:hover { background: var(--blau-tief); color: #fff; box-shadow: 0 10px 26px rgba(48,79,136,.32); } }
.knopf--zweit { background: #fff; color: var(--blau-dunkel); border-color: var(--blau-mittel); }
@media (hover: hover) and (pointer: fine) { .knopf--zweit:hover { background: var(--flaeche); color: var(--blau-dunkel); } }
.knopf--hell { background: #fff; color: var(--blau-dunkel); }
@media (hover: hover) and (pointer: fine) { .knopf--hell:hover { background: var(--flaeche); color: var(--blau-dunkel); } }
.knopf--breit { width: 100%; }

.telefon-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: var(--schrift-betont); text-decoration: none; color: var(--blau-dunkel);
}
@media (hover: hover) and (pointer: fine) { .telefon-link:hover { color: var(--pink-dunkel); } }
.telefon-link svg { flex: 0 0 auto; }

/* ---------- Hinweisleiste Fachbrief (ueber der Kopfzeile) ----------
   Dezent, aber sichtbar: gleitet beim Laden herein, das Pflaster-Zeichen
   wippt alle paar Sekunden, ein Lichtstreif zieht selten ueber die Leiste.
   Bei "Bewegung reduzieren" steht alles still (Regel ganz oben). */
.leiste {
  position: relative; overflow: hidden; display: block;
  /* Der Verlauf endet rechts bei #416BAA statt beim hellen CI-Blau #5388C6
     (wie bei der Taste "Anliegen melden"): Weiss darauf waere nur 3,7 : 1 -
     und genau dort steht auf dem Telefon "Termin waehlen". Jetzt 5,4 : 1. */
  background: linear-gradient(90deg, var(--blau-tief), var(--blau-dunkel) 55%, #416BAA);
  color: #fff; text-decoration: none; font-size: var(--schrift-klein); line-height: 1.3;
  animation: leiste-herein .7s cubic-bezier(.2,.8,.2,1) both;
}
.leiste::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: leiste-licht 9s ease-in-out 1.2s infinite;
}
.leiste__reihe { display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 40px; padding-block: .35rem; }
.leiste__zeichen { display: inline-flex; color: var(--pink); animation: leiste-wippen 6s ease-in-out 1s infinite; }
.leiste__zeichen svg { width: 20px; height: 20px; }
.leiste__neu {
  flex: 0 0 auto; padding: .1rem .5rem; border-radius: 999px;
  background: var(--pink-dunkel); color: #fff; font-size: var(--schrift-marke); font-weight: 700; /* seit 25.09.2026 dunkles Pink: 5,1:1 statt 3,1:1 */
  letter-spacing: .06em; text-transform: uppercase;
}
.leiste__text { min-width: 0; }
.leiste__name { font-weight: 650; letter-spacing: .01em; }
.leiste__lang { color: rgba(255,255,255,.92); }
.leiste__mehr {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem;
  font-weight: 600; padding-left: .65rem; border-left: 1px solid rgba(255,255,255,.3);
}
.leiste__pfeil { display: inline-block; transition: transform .2s ease; }
.leiste:focus-visible .leiste__pfeil { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) { .leiste:hover .leiste__pfeil { transform: translateX(4px); } }
@media (hover: hover) and (pointer: fine) { .leiste:hover .leiste__mehr { text-decoration: underline; text-underline-offset: 3px; } }
.leiste:focus-visible { outline: 3px solid var(--pink); outline-offset: -3px; }
@keyframes leiste-herein { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes leiste-licht { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes leiste-wippen {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(-14deg); } 90% { transform: rotate(10deg); } 94% { transform: rotate(-5deg); }
}
@media (max-width: 720px) {
  .leiste__lang { display: none; }
  .leiste__reihe { justify-content: space-between; }
}

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf__reihe { display: flex; align-items: center; gap: 1.25rem; min-height: 76px; }
.kopf__logo img { height: 42px; width: auto; }
.kopf__nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
/* WICHTIG: :not(.kopf__taste) — sonst faerbt diese Regel auch die Taste
   "Termin vereinbaren" dunkelgrau. Dunkelgrau auf Dunkelblau ist unlesbar.
   (Bis 22.09.2026 hiess die Ausnahme :not(.knopf).) */
.kopf__nav a:not(.kopf__taste) {
  padding: .55rem .8rem; border-radius: var(--radius-klein);
  text-decoration: none; font-weight: 500; font-size: var(--schrift-neben); color: var(--text);
}
@media (hover: hover) and (pointer: fine) { .kopf__nav a:not(.kopf__taste):hover { background: var(--flaeche); color: var(--blau-dunkel); } }
.kopf__nav a:not(.kopf__taste)[aria-current="page"] { color: var(--blau-dunkel); font-weight: 650; box-shadow: inset 0 -2px 0 var(--blau-mittel); }

/* ---------- Aufklappbare Menuegruppe ---------- */
.kopf__gruppe { position: relative; }
.kopf__gruppe-knopf {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-weight: 500; font-size: var(--schrift-neben); color: var(--text);
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  padding: .55rem .8rem; border-radius: var(--radius-klein);
}
@media (hover: hover) and (pointer: fine) { .kopf__gruppe-knopf:hover { background: var(--flaeche); color: var(--blau-dunkel); } }
.kopf__gruppe-knopf[data-hier="ja"] { color: var(--blau-dunkel); font-weight: 650; box-shadow: inset 0 -2px 0 var(--blau-mittel); }
.kopf__pfeil {
  width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
.kopf__gruppe-knopf[aria-expanded="true"] .kopf__pfeil { transform: rotate(-135deg) translate(-2px, -2px); }
.kopf__liste {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 60;
  min-width: 17rem; margin: 0; padding: .5rem; list-style: none;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  box-shadow: var(--schatten-hoch);
}
.kopf__liste a {
  display: block; padding: .6rem .7rem; border-radius: 8px;
  text-decoration: none; color: var(--text); font-size: var(--schrift-neben); white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .kopf__liste a:hover { background: var(--flaeche); color: var(--blau-dunkel); } }
.kopf__liste a[aria-current="page"] { color: var(--blau-dunkel); font-weight: 650; }

@media (max-width: 1240px) {
  /* Auf dem Telefon klappt die Gruppe im Fluss auf, nicht als schwebendes Kaestchen */
  .kopf__gruppe-knopf { width: 100%; justify-content: space-between; padding: .8rem .6rem; }
  .kopf__liste {
    position: static; min-width: 0; box-shadow: none; border: 0;
    border-left: 2px solid var(--linie); border-radius: 0; margin-left: .6rem; padding-left: .6rem;
  }
}
.kopf__schalter {
  display: none; margin-left: auto; background: none; border: 2px solid var(--linie);
  border-radius: var(--radius-klein); padding: .55rem .8rem; font: inherit; font-weight: 600;
  color: var(--blau-dunkel); cursor: pointer;
}
@media (max-width: 1240px) {
  .kopf__schalter { display: inline-flex; align-items: center; gap: .5rem; }
  .kopf__nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .1rem;
    background: #fff; border-bottom: 1px solid var(--linie); padding: .8rem clamp(1rem,4vw,2.5rem) 1.4rem;
    box-shadow: var(--schatten);
    /* Der Kopf klebt oben fest. Ein aufgeklapptes Untermenue war am Telefon
       laenger als der Bildschirm - die unteren Eintraege lagen unter der
       Handy-Leiste und waren nicht erreichbar (Befund 02.10.2026). Jetzt
       rollt das Menue in sich. 190 px = Hinweisleiste + Kopf + Handy-Leiste. */
    max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .kopf__nav[data-offen="ja"] { display: flex; }
  .kopf__nav a:not(.kopf__taste) { padding: .8rem .6rem; }
  /* Im aufgeklappten Menue: dieselbe Taste wie "Anliegen melden" oben - gleiche
     Groesse, nicht ueber die volle Breite gestreckt (Zuruf GF 22.09.2026:
     "auf dem Handy gleich"). */
  .kopf__aktion { margin: .8rem 0 0 .6rem; align-self: flex-start; }
}

/* ---------- Die zwei Tasten der Kopfzeile ----------
   "Anliegen melden" (zwischen Logo und Menue, auf dem Telefon immer sichtbar)
   und "Termin vereinbaren" (am Ende des Menues) tragen seit 22.09.2026 EIN
   gemeinsames Kleid: .kopf__taste (Entscheidung Matthias). Vorher war die
   eine Taste eine gewoelbte Pink-Taste mit Sockel, die andere ein grosser
   flacher Blau-Knopf - zwei Sprachen in einer Zeile, und das Pink war lauter
   als das Logo.
   Jetzt: gleiche Form, gleiche Hoehe, gleiche Schrift, gleiches Zeichen-
   format, gleiche Bewegung. Farbe CI-Pink (Entscheidung Matthias 22.09.2026,
   "mach in CI pink") - der Akzent der Marke neben dem blauen Logo. Feiner
   Verlauf und eine Lichtkante oben geben Tiefe, ohne "Spielzeug"-Wirkung.
   Das Zeichen (Sprechblase / Kalender) unterscheidet die beiden auf einen Blick.
   Alles reines CSS, kein Bild. Grundfarbe ist das DUNKLE CI-Pink (#CC3366),
   nicht das helle (#F65B9A): Weiss auf dem hellen Pink erreicht nur 3,1 : 1
   und faellt durch. Kontrast: Weiss auf #CC3366 = 5,1 : 1, auf der hellsten
   Stelle des Verlaufs (#D6437A) = 4,6 : 1.
   Bei "Bewegung reduzieren" entfaellt das Heben (Regel am Anfang der Datei). */
.kopf__taste {
  --taste-licht: #D6437A;     /* Oberkante, knapp heller als das dunkle CI-Pink */
  --taste-grund: var(--pink-dunkel);
  --taste-tief: #A82A57;      /* Unterkante */
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex: 0 0 auto;
  padding: .58rem 1.1rem .58rem .95rem; border-radius: 999px;
  /* Grundfarbe VOR dem Verlauf: so liest die Kontrastpruefung (und ein Browser
     ohne Verlaeufe) das dunkle CI-Pink statt 'durchsichtig'. */
  background: var(--taste-grund) linear-gradient(180deg, var(--taste-licht) 0%, var(--taste-grund) 55%, var(--taste-tief) 100%);
  color: #fff; text-decoration: none; border: 0;
  font: inherit; font-weight: 600; font-size: var(--schrift-neben); line-height: 1.15; white-space: nowrap;
  letter-spacing: .01em;
  /* Der Rand (seit 22.09.2026 abends, "die Raender schoener"): kein harter
     dunkler Strich mehr. Stattdessen ein halbdurchsichtiger Saum, der oben als
     Licht und unten als Schatten wirkt - die Kante geht weich in den Verlauf
     ueber und bleibt auf jedem Bildschirm glatt gerundet. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),          /* Lichtsaum oben */
    inset 0 -1px 0 rgba(90,10,45,.22),            /* Schattensaum unten */
    inset 0 0 0 1px rgba(255,255,255,.10),        /* hauchduenner heller Rand rundum */
    0 1px 1px rgba(120,20,60,.18),                /* sitzt auf dem Grund auf */
    0 6px 16px rgba(204,51,102,.20);              /* weicher Schatten */
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.kopf__taste:focus-visible {
  color: #fff; transform: translateY(-1px);
  background: var(--taste-licht) linear-gradient(180deg, #DC4E83 0%, var(--taste-licht) 55%, var(--taste-grund) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(90,10,45,.22),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 2px 2px rgba(120,20,60,.18),
    0 10px 22px rgba(204,51,102,.28);
}
@media (hover: hover) and (pointer: fine) { .kopf__taste:hover {
  color: #fff; transform: translateY(-1px);
  background: var(--taste-licht) linear-gradient(180deg, #DC4E83 0%, var(--taste-licht) 55%, var(--taste-grund) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(90,10,45,.22),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 2px 2px rgba(120,20,60,.18),
    0 10px 22px rgba(204,51,102,.28);
} }
.kopf__taste:focus-visible { outline: 3px solid var(--blau-mittel); outline-offset: 3px; }
/* Druecken: die Taste sinkt kurz ein */
.kopf__taste:active {
  transform: translateY(1px);
  background: var(--taste-tief);
  box-shadow: inset 0 2px 4px rgba(70,10,35,.35), inset 0 0 0 1px rgba(255,255,255,.06), 0 1px 2px rgba(120,20,60,.2);
}
/* Auf der Zielseite selbst: leicht gedrueckt - man ist schon "drin" */
.kopf__taste[aria-current="page"] {
  background: var(--taste-tief);
  box-shadow: inset 0 2px 4px rgba(70,10,35,.35), inset 0 0 0 1px rgba(255,255,255,.06), 0 1px 2px rgba(120,20,60,.2);
}
.kopf__taste-zeichen {
  display: inline-flex; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; opacity: .95;
}
.kopf__taste-zeichen svg { width: 100%; height: 100%; stroke-width: 2; }
/* Der Pfeil im Menue-Knopf und die Kopfzeile: "Termin vereinbaren" sitzt im
   Menue mit etwas Luft nach links; "Anliegen melden" steht zwischen Logo und Menue. */
.kopf__aktion { margin-left: .6rem; }
.kopf__sofort { margin: 0 auto; }
/* Auf breiten Schirmen steht er mittig zwischen Logo und Menue */
/* Das Menue klappt seit dem Knopf schon unter 1240 px zum Menue-Knopf
   zusammen (vorher 960 px): Logo, Knopf und fuenf Menuepunkte passen
   darunter nicht mehr in eine Zeile - das Logo wurde sonst verdraengt. */
.kopf__logo { flex: 0 0 auto; }
.kopf__nav a, .kopf__gruppe-knopf { white-space: nowrap; }
@media (min-width: 1241px) {
  .kopf__reihe { gap: .9rem; }
  .kopf__sofort { margin: 0 auto; }
  .kopf__nav { margin-left: 0; gap: .15rem; }
  .kopf__nav a:not(.kopf__taste), .kopf__gruppe-knopf { padding-left: .65rem; padding-right: .65rem; }
}
@media (max-width: 1240px) {
  .kopf__reihe { gap: .6rem; }
  .kopf__schalter { margin-left: 0; }
}
/* Kleine Handys: das LOGO behaelt fast seine Groesse, BEIDE Tasten werden
   gleich kleiner - oben "Anliegen melden", im Menue "Termin vereinbaren". */
@media (max-width: 420px) {
  .kopf__reihe { gap: .5rem; }
  /* Das Logo darf hier als Einziges nachgeben (Breite statt fester Hoehe),
     sonst schiebt es den Menue-Knopf ueber den rechten Rand hinaus. */
  .kopf__logo { flex: 1 1 auto; min-width: 0; max-width: 176px; }
  .kopf__logo img { width: 100%; height: auto; max-height: 42px; object-fit: contain; object-position: left; }
  .kopf__taste { padding: .48rem .8rem .48rem .7rem; font-size: var(--schrift-klein); gap: .35rem; }
  .kopf__taste-zeichen { width: .95rem; height: .95rem; }
  .kopf__schalter { padding: .5rem .65rem; }
}
@media (max-width: 380px) {
  .kopf__reihe { gap: .4rem; }
  .kopf__logo img { max-height: 38px; }
  .kopf__taste { padding: .42rem .7rem .42rem .62rem; font-size: var(--schrift-fein); gap: .3rem; }
  .kopf__taste-zeichen { width: .85rem; height: .85rem; }
  .kopf__schalter { padding: .45rem .55rem; font-size: var(--schrift-klein); }
}
/* ---------- "Anliegen melden" - seit 24.09.2026 DEZENT ----------
   Zuruf Matthias 24.09.2026: "Das uebertoent das Logo - das muss dezenter
   sein." Die gefuellte Pink-Taste neben dem Logo war die lauteste Flaeche der
   Kopfzeile. Jetzt: weisser Grund, feiner grauer Rand, dunkelblaue Schrift,
   nur die Sprechblase in CI-Pink. Kein Verlauf, kein Schatten, kein Heben.
   Er steht weiter mittig zwischen Logo und Menue und ist auf dem Telefon
   sichtbar - er faellt auf, ohne zu schreien. "Termin vereinbaren" bleibt die
   eine gefuellte Taste der Zeile.
   Kontrast: #304F88 auf Weiss = 8,3 : 1. Die Regeln stehen NACH .kopf__taste
   und schlagen sie deshalb.
   Seit 08.10.2026 BLAU WIE DIE HINWEISLEISTE (Zuruf Matthias: "Schrift weiss,
   Hintergrund wie da oben - sehr sichtbar, aber nicht ueberladen und nicht
   lauter als das Logo"). Die weisse Taste ging neben dem Menue unter. Jetzt
   traegt sie den blauen Verlauf der Leiste (die Farben des Logos, kein Pink),
   weisse Schrift, weisse Sprechblase - und einen Lichtstreif wie die Leiste,
   nur kraeftiger und haeufiger (taste-blitz). Der Verlauf endet rechts bei
   #416BAA statt beim hellen CI-Blau #5388C6: Weiss darauf waere nur 3,7 : 1.
   Kontrast Weiss: auf #243C69 = 11 : 1, auf #304F88 = 8,3 : 1, auf #416BAA
   = 5,4 : 1. Bei "Bewegung reduzieren" steht der Streif still (Regel oben). */
.kopf__taste.kopf__sofort {
  overflow: hidden;
  background: var(--blau-dunkel) linear-gradient(90deg, var(--blau-tief), var(--blau-dunkel) 55%, #416BAA);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(36,60,105,.20), 0 4px 12px rgba(48,79,136,.16);
  font-weight: 600;
}
.kopf__taste.kopf__sofort::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Zuruf Matthias 08.10.2026 "Lichtstreif staerker": schmaler, heller Kern
     (ein Blitz, kein Schleier) und alle 4,5 s statt alle 9 s. */
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.18) 44%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.18) 56%, transparent 66%);
  transform: translateX(-100%);
  animation: taste-blitz 4.5s ease-in-out 1.5s infinite;
}
@keyframes taste-blitz { 0%, 72% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.kopf__taste.kopf__sofort .kopf__taste-zeichen { color: #fff; opacity: 1; }
.kopf__taste.kopf__sofort:focus-visible {
  background: var(--blau-dunkel) linear-gradient(90deg, var(--blau-dunkel), #3A5F9E 55%, #4A76B6);
  color: #fff; transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 3px rgba(36,60,105,.22), 0 8px 18px rgba(48,79,136,.24);
}
@media (hover: hover) and (pointer: fine) { .kopf__taste.kopf__sofort:hover {
  background: var(--blau-dunkel) linear-gradient(90deg, var(--blau-dunkel), #3A5F9E 55%, #4A76B6);
  color: #fff; transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 3px rgba(36,60,105,.22), 0 8px 18px rgba(48,79,136,.24);
} }
.kopf__taste.kopf__sofort:active,
.kopf__taste.kopf__sofort[aria-current="page"] {
  background: var(--blau-tief); color: #fff; transform: none;
  box-shadow: inset 0 2px 4px rgba(20,32,60,.35);
}
.kopf__taste.kopf__sofort[aria-current="page"]::after { animation: none; }
@media print { .kopf__sofort { display: none; } }
/* ---------- "Rueckruf anfordern" / "Termin vereinbaren" - seit 01.10.2026 RUHIG ----------
   Zuruf Matthias 01.10.2026: Die pinkrote Taste am Ende des Menues wirkt wie
   ein Alarmknopf - als waere SIE "Anliegen melden". Sie soll dezenter sein.
   Jetzt: flaches CI-Dunkelblau wie die Hauptknoepfe im Inhalt (.knopf--haupt),
   kein Verlauf, kein pinker Schein. Sie bleibt die eine gefuellte Taste der
   Zeile, schreit aber nicht mehr. Pink traegt in der Kopfzeile nur noch die
   Sprechblase von "Anliegen melden".
   Kontrast: Weiss auf #304F88 = 8,3 : 1. Steht NACH .kopf__taste und schlaegt sie. */
.kopf__taste.kopf__aktion {
  background: var(--blau-dunkel); color: #fff;
  box-shadow: 0 1px 2px rgba(48,79,136,.18);
}
.kopf__taste.kopf__aktion:focus-visible {
  background: var(--blau-tief); color: #fff; transform: none;
  box-shadow: 0 4px 12px rgba(48,79,136,.22);
}
@media (hover: hover) and (pointer: fine) { .kopf__taste.kopf__aktion:hover {
  background: var(--blau-tief); color: #fff; transform: none;
  box-shadow: 0 4px 12px rgba(48,79,136,.22);
} }
.kopf__taste.kopf__aktion:active,
.kopf__taste.kopf__aktion[aria-current="page"] {
  background: var(--blau-tief); color: #fff; transform: none;
  box-shadow: inset 0 2px 4px rgba(20,32,60,.35);
}
/* Podcast-Taste mit Spotify-Zeichen (seit 08.10.2026, Wunsch GF): die Taste
   bleibt dunkelblau, davor sitzt die gruene Spotify-Scheibe in Originalfarbe.
   Schalter: podcast.json -> taste -> zeichen. Steht NACH .kopf__aktion. */
.kopf__taste.kopf__spotify { padding-left: .5rem; gap: .5rem; }
.kopf__spotify .kopf__taste-zeichen { width: 1.6rem; height: 1.6rem; opacity: 1; }
/* Wer weniger Bewegung eingestellt hat, bekommt ruhige Tasten: kein Heben,
   kein Einsinken - Farbe und Schatten bleiben. */
@media (prefers-reduced-motion: reduce) {
  .kopf__taste:focus-visible, .kopf__taste:active { transform: none; }
  @media (hover: hover) and (pointer: fine) { .kopf__taste:hover { transform: none; } }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.abschnitt--hell { background: var(--grund); }
.abschnitt--flaeche { background: var(--flaeche); }
.abschnitt--dunkel { background: var(--blau-dunkel); color: #fff; }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: #fff; }
/* WICHTIG: :not(.knopf) — sonst wird der weisse Knopf im dunklen Abschnitt
   weiss beschriftet und verschwindet. */
.abschnitt--dunkel a:not(.knopf) { color: #fff; }
.abschnitt__kopf { max-width: 46rem; margin-bottom: clamp(1.8rem, 3vw, 2.8rem); }
.abschnitt__kopf p { color: var(--grau-lesbar); font-size: var(--schrift-text); }
.abschnitt--dunkel .abschnitt__kopf p { color: rgba(255,255,255,.82); }

.augenbraue {
  display: inline-block; font-size: var(--schrift-neben); font-weight: 650; letter-spacing: .02em;
  color: var(--blau-dunkel); margin-bottom: .7rem;
  /* Seit 02.10.2026 normale Schreibung in 15 px statt Grossbuchstaben in
     13 px: zehn gesperrte Versalzeilen je Seite wirkten schematisch und
     sind fuer aeltere Leser schwerer zu lesen (Befund Seitenpruefung).
     Dunkelblau bleibt; die Abstufung kommt aus Groesse und Gewicht. */
}
.abschnitt--dunkel .augenbraue { color: #A8C4E8; }

/* ---------- Kopfbereich (Hero) ---------- */
.hero { position: relative; overflow: hidden; background: var(--grund); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(83,136,198,.20), transparent 65%),
    radial-gradient(700px 380px at -6% 110%, rgba(219,224,242,.85), transparent 60%);
  pointer-events: none;
}
.hero__raster {
  position: relative; display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1.05fr .95fr; align-items: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}
@media (max-width: 900px) { .hero__raster { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: .5em; }
.hero h1 .leicht { display: block; font-weight: 250; color: var(--blau-mittel); }
.hero__unterzeile { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--text); max-width: 34rem; }
.hero__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.6rem; }
.hero__zeit { margin-top: 1.1rem; color: var(--grau-lesbar); font-size: var(--schrift-neben); }
.hero__bild {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--schatten-hoch); background: var(--flaeche); aspect-ratio: 4 / 3;
}
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
.zweispalt__bild, .film { position: relative; }
/* Vermerke auf Bildern und Film - seit 01.10.2026 ALLE leise (Zuruf GF: die
   dunkle Kapsel "zersprengt die Wirkung des Bildes"). Kleine weisse Schrift mit
   weichem Schatten, keine Kapsel. Gilt fuer Pixabay-Fotos ("Symbolbild"), fuer
   die KI-Bilder ("Symbolbild · KI-erzeugt") und den Erklaerfilm. Der Wortlaut
   der KI-Kennzeichnung bleibt stehen (KI-Verordnung Art. 50) - nur die Form
   ist zurueckgenommen. */
.ki-hinweis {
  position: absolute; right: .7rem; bottom: .45rem; padding: 0;
  font-size: var(--schrift-marke); line-height: 1.3; letter-spacing: .02em; color: rgba(255,255,255,.88);
  text-shadow: 0 0 3px rgba(20,32,60,.8), 0 1px 2px rgba(20,32,60,.65);
  pointer-events: none;
}
.ki-hinweis--oben { top: .5rem; bottom: auto; }
.ki-hinweis--leise { color: rgba(255,255,255,.82); }

/* Kurzfilm auf der Startseite */
.abschnitt--film { padding-bottom: 0; }
.abschnitt--film + .abschnitt { padding-top: clamp(2rem, 4vw, 3rem); }
.film { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten-hoch); background: #fff; }
.film__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* Hochkant-Film mit Sprecherfigur (seit 03.10.2026): schmaler Rahmen, 3:4. */
.film--hoch { max-width: 24rem; margin-inline: auto; }
.film--hoch .film__video { aspect-ratio: 816 / 1104; }

/* Eigene Illustration — fuellt den Bildplatz, bis ein echtes Foto da ist.
   Bewusst abstrakt: Sie soll nicht so tun, als sei sie ein Foto. */
.illu { width: 100%; height: 100%; }
.illu__bild { display: block; width: 100%; height: 100%; }

/* Platzhalter fuer noch fehlende eigene Bilder — nie ein fremdes Foto einsetzen */
.bild-platzhalter {
  width: 100%; height: 100%; display: grid; place-content: center; gap: .5rem;
  text-align: center; padding: 2rem; color: var(--blau-dunkel);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 14px, transparent 14px 28px),
    var(--flaeche);
}
.bild-platzhalter strong { font-size: var(--schrift-basis); }
.bild-platzhalter span { font-size: var(--schrift-klein); color: var(--text); max-width: 22rem; }

/* ---------- Vertrauensleiste ---------- */
.vertrauen { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: #fff; }
.vertrauen__reihe {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between;
  padding: 1.4rem 0; align-items: center;
}
.vertrauen__punkt { display: flex; align-items: center; gap: .75rem; font-weight: 500; font-size: var(--schrift-basis); }
.vertrauen__punkt svg {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 5px; border-radius: 50%;
  background: var(--flaeche); color: var(--blau-dunkel);
}

/* ---------- Wegweiser (eigenes Werkzeug) ---------- */
.wegweiser {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten-hoch); padding: clamp(1.4rem, 3vw, 2.2rem);
}
.wegweiser__titel { font-size: var(--schrift-gross); margin-bottom: .35rem; }
.wegweiser__hinweis { color: var(--grau-lesbar); font-size: var(--schrift-neben); margin-bottom: 1.3rem; }
.wegweiser__felder { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .wegweiser__felder { grid-template-columns: 1fr; } }
.feld { display: flex; flex-direction: column; gap: .4rem; }
.feld label { font-weight: 600; font-size: var(--schrift-neben); color: var(--blau-dunkel); }
.feld select, .feld input, .feld textarea {
  font: inherit; color: var(--text); background: #fff;
  border: 2px solid var(--linie); border-radius: var(--radius-klein);
  padding: .8rem .9rem; width: 100%;
}
@media (hover: hover) and (pointer: fine) { .feld select:hover, .feld input:hover, .feld textarea:hover { border-color: var(--blau-mittel); } }
.feld select:disabled { background: var(--grund); color: var(--grau-lesbar); cursor: not-allowed; }
.wegweiser__ergebnis {
  margin-top: 1.2rem; padding: 1.1rem 1.2rem; border-radius: var(--radius-klein);
  background: var(--grund); border-left: 4px solid var(--blau-mittel);
}
.wegweiser__ergebnis p { margin: 0 0 .9rem; }
.wegweiser__ergebnis[hidden] { display: none; }

/* ---------- Karten ---------- */
.karten { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.karten--2 { grid-template-columns: repeat(2, 1fr); }
.karten--3 { grid-template-columns: repeat(3, 1fr); }
.karten--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .karten--3, .karten--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .karten--2, .karten--3, .karten--4 { grid-template-columns: 1fr; } }

.karte {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: clamp(1.3rem, 2.2vw, 1.9rem); display: flex; flex-direction: column; gap: .3rem;
  transition: box-shadow .2s ease, transform .12s ease, border-color .2s ease;
}
.karte h3 { margin-bottom: .35rem; }
.karte p { color: var(--text); margin-bottom: .8rem; }
.karte__mehr { margin-top: auto; font-weight: 600; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; }
.karte__mehr::after { content: "\2192"; transition: transform .15s ease; }
@media (hover: hover) and (pointer: fine) { .karte:hover { box-shadow: var(--schatten); transform: translateY(-2px); border-color: var(--blau-mittel); } }
@media (hover: hover) and (pointer: fine) { .karte:hover .karte__mehr::after { transform: translateX(3px); } }
.karte__zeichen {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-content: center;
  background: var(--flaeche); color: var(--blau-dunkel); margin-bottom: 1rem;
  transition: background-color .2s ease, transform .15s ease;
}
/* Runde Flaeche statt Rechteck und Linien statt Fuellung: Das ist der
   Unterschied zwischen amtlich und freundlich. */
@media (hover: hover) and (pointer: fine) { .karte:hover .karte__zeichen { background: var(--blau-mittel); color: #fff; transform: rotate(-4deg); } }
.abschnitt--dunkel .karte__zeichen { background: rgba(255,255,255,.14); color: #fff; }
.abschnitt--hell .karte { border-color: transparent; box-shadow: var(--schatten); }

/* ---------- Zitate / Schmerzpunkte ---------- */
.stimmen { display: grid; gap: 1.2rem; }
.zitat {
  background: #fff; border-radius: var(--radius); padding: clamp(1.2rem, 2.2vw, 1.8rem);
  border-left: 4px solid var(--blau-mittel); box-shadow: var(--schatten);
}
.zitat__satz { font-size: var(--schrift-text); font-weight: 600; color: var(--blau-dunkel); margin-bottom: .6rem; }
.zitat__erklaerung { margin: 0; color: var(--text); }

/* ---------- Ablauf in Schritten ---------- */
.schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.schritte li {
  counter-increment: schritt; position: relative; padding-left: 4rem;
  min-height: 3rem; display: flex; flex-direction: column; justify-content: center;
}
.schritte li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  display: grid; place-content: center; font-weight: 700; font-size: var(--schrift-text);
  background: var(--blau-dunkel); color: #fff;
}
.schritte strong { display: block; color: var(--blau-dunkel); font-size: var(--schrift-betont); }
.schritte span { color: var(--text); }
.abschnitt--dunkel .schritte li::before { background: #fff; color: var(--blau-dunkel); }
.abschnitt--dunkel .schritte strong { color: #fff; }
.abschnitt--dunkel .schritte span { color: rgba(255,255,255,.85); }

/* ---------- Aufzaehlung mit Haken ---------- */
.haken { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.haken li { position: relative; padding-left: 2rem; }
.haken li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--blau-mittel);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center/78% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center/78% no-repeat;
}
.haken--warnung li::before { background: var(--pink-dunkel); }
.abschnitt--dunkel .haken li::before { background: #fff; }

/* ---------- Zweispaltiger Block ---------- */
.zweispalt { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 900px) { .zweispalt { grid-template-columns: 1fr; } }
.zweispalt__bild { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); aspect-ratio: 4 / 3; background: var(--flaeche); }

/* ---------- Fragen und Antworten ---------- */
.fragen { display: grid; gap: .7rem; max-width: 52rem; }
.frage {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  padding: 0; overflow: hidden;
}
.frage summary {
  cursor: pointer; list-style: none; padding: 1.1rem 1.3rem; font-weight: 600;
  color: var(--blau-dunkel); display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; font-size: var(--schrift-titel); line-height: 1; color: var(--blau-mittel); flex: 0 0 auto; }
.frage[open] summary::after { content: "\2212"; }
@media (hover: hover) and (pointer: fine) { .frage summary:hover { background: var(--grund); } }
.frage__antwort { padding: 0 1.3rem 1.2rem; }
.frage__antwort p:last-child { margin-bottom: 0; }

/* ---------- Formular ---------- */
.formular-block { background: var(--flaeche); }
/* Auf der hellblauen Flaeche reicht das Lesegrau nicht mehr (4,3:1). */
.formular-block .abschnitt__kopf p,
.abschnitt--flaeche .abschnitt__kopf p { color: var(--text); }
.formular {
  background: #fff; border-radius: var(--radius); box-shadow: var(--schatten-hoch);
  padding: clamp(1.4rem, 3vw, 2.4rem); max-width: 44rem;
}
.formular__reihe { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .formular__reihe { grid-template-columns: 1fr; } }
.formular .feld { margin-bottom: 1rem; }
.pflicht { color: var(--pink-dunkel); }
.einwilligung { display: flex; gap: .8rem; align-items: flex-start; margin: 1.2rem 0; font-size: var(--schrift-neben); }
.einwilligung input { margin-top: .25rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.formular__fuss { color: var(--grau-lesbar); font-size: var(--schrift-klein); margin-top: 1rem; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Handlungsaufruf ---------- */
.aufruf { text-align: center; max-width: 44rem; margin-inline: auto; }
.aufruf .knopf { margin-top: .6rem; }
.aufruf__zusatz { color: var(--grau-lesbar); font-size: var(--schrift-neben); margin-top: .9rem; }
.abschnitt--dunkel .aufruf__zusatz { color: rgba(255,255,255,.75); }

/* ---------- Schaubilder im Wissensbereich ----------
   Gleiche Bildsprache wie die Schulungsmodule: flache Flächen, Ketten,
   Kacheln. Der Rahmen bleibt ruhig, das Bild soll wirken. */
.schaubild {
  margin: 0; background: #fff; border: 1px solid var(--linie);
  border-radius: var(--radius); padding: clamp(1rem, 2.5vw, 1.8rem);
  box-shadow: var(--schatten);
}
.abschnitt--hell .schaubild { border-color: transparent; }
.schaubild__bild {
  display: block; width: 100%; height: auto;
  /* Die Beschriftungen im Bild erben die Hausschrift */
  font-family: "Outfit", "Montserrat", Calibri, Arial, sans-serif;
}
.schaubild__text {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--linie);
  font-size: var(--schrift-neben); color: var(--grau-lesbar); line-height: 1.6;
}
/* Auf dem Telefon sind die Zeichnungen zu breit für eine Zeile Text.
   Sie dürfen dann in ihrem eigenen Kasten wandern, statt die Seite zu sprengen. */
@media (max-width: 620px) {
  .schaubild { overflow-x: auto; padding: 1rem .8rem; }
  .schaubild__bild { min-width: 34rem; }
}

/* ---------- Inhaltsverzeichnis Wissensbereich ---------- */
.verzeichnis { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .verzeichnis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .verzeichnis { grid-template-columns: 1fr; } }
.verzeichnis__gruppe {
  background: #fff; border-radius: var(--radius); padding: clamp(1.2rem, 2vw, 1.6rem);
  box-shadow: var(--schatten);
}
.verzeichnis__gruppe h3 {
  font-size: var(--schrift-betont); margin-bottom: .9rem; padding-bottom: .7rem;
  border-bottom: 2px solid var(--flaeche); display: flex; align-items: center; gap: .6rem;
}
.verzeichnis__zeichen {
  flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-content: center;
  border-radius: 50%; background: var(--flaeche); color: var(--blau-dunkel);
}
.verzeichnis__zeichen svg { width: 21px; height: 21px; }
.verzeichnis__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.verzeichnis__liste li { display: flex; flex-direction: column; gap: .1rem; }
.verzeichnis__liste a { font-weight: 600; text-decoration: none; }
.verzeichnis__liste a::before { content: "\2192\00a0"; color: var(--blau-mittel); }
@media (hover: hover) and (pointer: fine) { .verzeichnis__liste a:hover { text-decoration: underline; } }
.verzeichnis__liste span { font-size: var(--schrift-klein); color: var(--grau-lesbar); padding-left: 1.4rem; }

/* =====================================================================
   LESEHILFE — Seiten mit data-lesehilfe="ja"
   Für Seiten, die sich an ältere Menschen und Angehörige richten.
   (Seit 30.09.2026 gibt es zusätzlich den Lesehilfe-Knopf, Block unten.)
   Keine eigene Schaltfläche, kein Speichern: Größere Grundschrift,
   mehr Zeilenabstand, größere Klickflächen. Wer mehr braucht, benutzt
   die Vergrößerung des Browsers — die kann jedes Gerät, und sie bleibt
   erhalten, ohne dass wir etwas auf dem Gerät ablegen.
   ===================================================================== */
body[data-lesehilfe="ja"] { font-size: 1.1875rem; line-height: 1.78; }
body[data-lesehilfe="ja"] .knopf { padding: 1.05rem 1.9rem; font-size: var(--schrift-betont); }
body[data-lesehilfe="ja"] .feld label { font-size: var(--schrift-betont); }
body[data-lesehilfe="ja"] .feld input,
body[data-lesehilfe="ja"] .feld select,
body[data-lesehilfe="ja"] .feld textarea { padding: .95rem 1rem; font-size: var(--schrift-betont); }
body[data-lesehilfe="ja"] .einwilligung { font-size: var(--schrift-basis); }
body[data-lesehilfe="ja"] .einwilligung input { width: 1.4rem; height: 1.4rem; }
body[data-lesehilfe="ja"] .frage summary { font-size: var(--schrift-betont); padding: 1.25rem 1.4rem; }
body[data-lesehilfe="ja"] .haken li { padding-left: 2.3rem; }

/* =====================================================================
   LESEHILFE-KNOPF (assets/lesehilfe.js) — seit 30.09.2026 auf Wunsch der GF
   Knopf und Fenster rechnen in em auf fester 16-px-Basis: sie wachsen
   nicht mit der Schrift und verdecken die Seite nicht.
   Ergaenzt den Block oben: Besucher stellen Schrift und Lesehilfen selbst
   ein. Gespeichert nur fuer die Dauer des Browserfensters, nichts dauerhaft.
   ===================================================================== */
.lh-knopf {
  position: fixed; right: 1em; bottom: 1em; z-index: 80;
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 48px; padding: .55em 1em .55em .6em;
  font: inherit; font-size: 16px; font-weight: 600;
  color: #fff; background: var(--blau-dunkel);
  border: 2px solid #fff; border-radius: 999px; cursor: pointer;
  box-shadow: var(--schatten-hoch);
}
@media (hover: hover) and (pointer: fine) { .lh-knopf:hover { background: var(--blau-tief); } }
.lh-knopf__aa {
  display: inline-grid; place-items: center; width: 2em; height: 2em;
  border-radius: 50%; background: #fff; color: var(--blau-dunkel); font-weight: 700;
}
.lh-knopf.ist-aktiv .lh-knopf__aa { background: var(--pink); color: #fff; }

.lh-fenster {
  position: fixed; right: 1em; bottom: 4.6em; z-index: 81;
  width: min(22em, calc(100vw - 2em)); max-height: calc(100vh - 6em); max-height: calc(100dvh - 6em); overflow-y: auto;
  padding: 1em 1.1em 1.1em; background: #fff; color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten-hoch);
  font-size: 16px; line-height: 1.4;
}
.lh-fenster[hidden] { display: none; }
.lh-fenster__kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6em; }
.lh-fenster__kopf strong { color: var(--blau-dunkel); font-size: 1.15em; }
.lh-zu {
  width: 44px; height: 44px; font-size: 1.6em; line-height: 1; cursor: pointer;
  color: var(--blau-dunkel); background: var(--grund); border: 1px solid var(--linie); border-radius: 50%;
}
.lh-titel { margin: 0 0 .4em; font-weight: 600; color: var(--blau-dunkel); }
.lh-groesse { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-bottom: .9em; }
.lh-rund {
  min-width: 64px; min-height: 48px; font: inherit; font-weight: 700; font-size: 1.05em; cursor: pointer;
  color: var(--blau-dunkel); background: var(--grund); border: 2px solid var(--blau-mittel); border-radius: 12px;
}
.lh-rund--gross { font-size: 1.35em; }
.lh-rund:disabled { opacity: .4; cursor: default; }
.lh-prozent { font-weight: 600; font-size: 1.1em; }
.lh-liste { display: grid; gap: .4em; }
.lh-schalter {
  display: flex; justify-content: space-between; align-items: center; gap: .8em;
  min-height: 48px; padding: .5em .8em; font: inherit; text-align: left; cursor: pointer;
  color: var(--text); background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius-klein);
}
.lh-schalter__an {
  flex: none; width: 2.6em; height: 1.5em; border-radius: 999px; background: #C5CBDD; position: relative;
}
.lh-schalter__an::after {
  content: ""; position: absolute; top: .2em; left: .2em; width: 1.1em; height: 1.1em;
  border-radius: 50%; background: #fff;
}
.lh-schalter[aria-pressed="true"] { border-color: var(--blau-mittel); }
.lh-schalter[aria-pressed="true"] .lh-schalter__an { background: var(--blau-dunkel); }
.lh-schalter[aria-pressed="true"] .lh-schalter__an::after { left: auto; right: .2em; }
.lh-zurueck {
  width: 100%; min-height: 48px; margin-top: .8em; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--pink-dunkel); background: #fff; border: 2px solid var(--pink-dunkel); border-radius: var(--radius-klein);
}
.lh-hinweis { margin: .6em 0 0; font-size: .875em; color: var(--grau-lesbar); }


/* Auf dem Telefon ueber der festen Handy-Leiste */
@media (max-width: 720px) {
  .lh-knopf { bottom: calc(76px + env(safe-area-inset-bottom)); right: .75em; padding-right: .6em; }
  .lh-knopf span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lh-fenster { bottom: calc(136px + env(safe-area-inset-bottom)); right: .75em; max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); }
}
@media print { .lh-knopf, .lh-fenster, .lh-streifen { display: none !important; } }

/* Das runde Cookie-Zeichen von CookieYes (unten links, "Einstellungen
   aendern") sass auf dem Telefon bei 8 px vom Rand - mitten auf dem Knopf
   "Anrufen" der Handy-Leiste (Zuruf GF 01.10.2026). Jetzt steht es ueber der
   Leiste, auf gleicher Hoehe und in gleicher Groesse wie der Lesehilfe-Knopf
   gegenueber. !important, weil CookieYes seine Regeln erst spaeter nachlaedt. */
@media (max-width: 720px) {
  .cky-btn-revisit-wrapper {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important; left: .75rem !important;
    width: 54px !important; height: 54px !important;
  }
}

/* Seit 02.10.2026: Ueber der Leiste schwebend verdeckten die beiden runden
   Knoepfe beim Lesen den Text (Befund Seitenpruefung). Jetzt sitzen sie IN
   der Handy-Leiste - Cookie-Zeichen links, Lesehilfe rechts, die drei Wege
   dazwischen. Die Leiste macht dafuer an beiden Seiten Platz. Gilt nur auf
   Seiten mit Leiste; ohne sie (und in alten Browsern ohne :has) bleibt es
   bei der Regel oben. */
@media (max-width: 720px) {
  body:has(.handyleiste) .handyleiste { padding-left: 58px; padding-right: 58px; }
  body:has(.handyleiste) .lh-knopf {
    right: 5px; bottom: calc(.4rem + 4px + env(safe-area-inset-bottom));
    width: 48px; height: 48px; min-height: 48px; padding: 0; justify-content: center;
    border: 0; box-shadow: none;
  }
  body:has(.handyleiste) .lh-fenster { bottom: calc(80px + env(safe-area-inset-bottom)); max-height: calc(100vh - 104px); max-height: calc(100dvh - 104px); }
  body:has(.handyleiste) .cky-btn-revisit-wrapper {
    left: 5px !important; bottom: calc(.4rem + 4px + env(safe-area-inset-bottom)) !important;
    width: 48px !important; height: 48px !important;
  }
}

/* Seit 11.10.2026: Das Einwilligungsbanner von CookieYes belegte auf dem
   Telefon die untere Bildschirmhaelfte und lag komplett ueber der Handy-Leiste -
   wer aus einer Anzeige kam, sah keinen Knopf "Anrufen" (Befund Audit Werbung
   11.10.2026, 83 Klicks ohne Anruf). Jetzt sitzt das Banner UEBER der Leiste
   und ist flacher: die drei Knoepfe stehen nebeneinander, gleich breit und
   gleich hoch (Ablehnen bleibt so sichtbar wie Akzeptieren). Text unveraendert. */
@media (max-width: 720px) {
  body:has(.handyleiste) .cky-consent-container { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
  .cky-consent-container .cky-notice-content-wrapper { padding: 14px 0 12px !important; }
  .cky-consent-container .cky-title { font-size: 16px !important; margin-bottom: 6px !important; }
  .cky-consent-container .cky-notice-des,
  .cky-consent-container .cky-notice-des p { font-size: 13px !important; line-height: 1.4 !important; }
  .cky-consent-container .cky-notice-btn-wrapper {
    flex-direction: row !important; align-items: stretch !important; gap: 6px !important; margin-top: 10px !important;
  }
  .cky-consent-container .cky-notice-btn-wrapper .cky-btn {
    flex: 1 1 0 !important; margin: 0 !important; padding: 8px 4px !important;
    font-size: 13px !important; min-height: 44px; white-space: normal !important;
  }
}

/* Die Wirkungen */
html.lh-an-zeilen body { line-height: 2; }
html.lh-an-zeilen p, html.lh-an-zeilen li { letter-spacing: .02em; word-spacing: .08em; }
html.lh-an-links main a:not(.knopf) { background: #FFF3A6; color: #1A2B4D; text-decoration: underline 2px; outline: 2px solid var(--blau-dunkel); outline-offset: 1px; }
html.lh-an-kontrast main p:not(.knopf *), html.lh-an-kontrast main li:not(.knopf *) { color: #000; }
html.lh-an-kontrast main h1, html.lh-an-kontrast main h2, html.lh-an-kontrast main h3,
html.lh-an-kontrast main a:not(.knopf) { color: #0B1F45; }
html.lh-an-ruhe, html.lh-an-ruhe * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.lh-streifen { display: none; }
html.lh-an-lineal .lh-streifen {
  display: block; position: fixed; left: 0; right: 0; top: 40%; height: 44px; z-index: 79; pointer-events: none;
  background: rgba(83,136,198,.12); border-top: 2px solid var(--blau-mittel); border-bottom: 2px solid var(--blau-mittel);
}

/* ---------- In einfachen Worten ---------- */
.einfach-block { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: 0; }
.einfach {
  background: var(--flaeche); border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 2rem);
  border-left: 6px solid var(--blau-dunkel);
}
.einfach__titel { font-size: var(--schrift-gross); margin-bottom: .9rem; }
.einfach__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.einfach__liste li {
  position: relative; padding-left: 2.1rem;
  font-size: var(--schrift-text); line-height: 1.6; color: var(--text);
}
.einfach__liste li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .8rem; height: .8rem; border-radius: 50%; background: var(--blau-mittel);
}

/* ---------- Anrufen, groß ---------- */
.anruf-block { background: var(--blau-dunkel); color: #fff; }
.anruf { text-align: center; }
.anruf__vor { color: rgba(255,255,255,.85); font-size: var(--schrift-text); margin-bottom: .8rem; }
.anruf__nummer {
  display: inline-flex; align-items: center; gap: .8rem;
  font-weight: 700; letter-spacing: -.01em; text-decoration: none;
  font-size: var(--schrift-h1);
  color: #fff; padding: .5rem 1.5rem; border-radius: var(--radius);
  transition: background-color .2s ease;
}
.anruf__nummer:focus-visible { background: rgba(255,255,255,.14); color: #fff; }
@media (hover: hover) and (pointer: fine) { .anruf__nummer:hover { background: rgba(255,255,255,.14); color: #fff; } }
.anruf__nummer svg { width: 1em; height: 1em; flex: 0 0 auto; stroke-width: 1.5; }
.anruf__zeit { color: #fff; font-size: var(--schrift-text); font-weight: 600; margin: .4rem 0 1.2rem; }
.anruf p:last-child { margin-bottom: 0; color: rgba(255,255,255,.85); }
.anruf a:not(.anruf__nummer) { color: #fff; }

/* ---------- Offene Wund-Sprechstunde (seit 01.10.2026, assets/sprechstunde.js) ----------
   Weisser Kasten mit grosser Nummer. Laeuft die Sprechstunde, wird der Rand
   gruen und die Statuszeile bekommt einen Punkt. Gruen nur als Zusatz -
   der Text sagt es immer auch in Worten. */
.sprechstunde {
  text-align: center; background: #fff; border: 2px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten-hoch);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}
.sprechstunde.ist-offen { border-color: #1E7A46; }
.sprechstunde__status {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .6rem;
  font-weight: 650; font-size: var(--schrift-text); color: var(--blau-dunkel);
}
.sprechstunde.ist-offen .sprechstunde__status { color: #1E7A46; }
.sprechstunde.ist-offen .sprechstunde__status::before,
.sprechstunde-punkt {
  content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%;
  background: #1E7A46; box-shadow: 0 0 0 4px rgba(30,122,70,.18); flex: none;
}
.sprechstunde .anruf__nummer { color: var(--blau-dunkel); }
.sprechstunde .anruf__nummer:focus-visible { background: var(--flaeche); color: var(--blau-dunkel); }
@media (hover: hover) and (pointer: fine) { .sprechstunde .anruf__nummer:hover { background: var(--flaeche); color: var(--blau-dunkel); } }
.sprechstunde__video { margin-top: .8rem; }
.sprechstunde__zeit { margin: .6rem 0 .4rem; font-weight: 600; }
.sprechstunde__ausserhalb { margin: 0; color: var(--grau-lesbar); font-size: var(--schrift-basis); }
.sprechstunde-punkt { width: .55rem; height: .55rem; margin-left: .4rem; vertical-align: middle; }

/* ---------- Selbstcheck ---------- */
.check {
  background: #fff; border-radius: var(--radius); box-shadow: var(--schatten-hoch);
  padding: clamp(1.3rem, 3vw, 2.2rem);
}
.check__liste { list-style: none; counter-reset: cf; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 1rem; }
.check__frage {
  counter-increment: cf; display: flex; flex-wrap: wrap; gap: .8rem 1rem;
  align-items: center; justify-content: space-between;
  padding-bottom: 1rem; border-bottom: 1px solid var(--linie);
}
.check__frage:last-child { border-bottom: 0; padding-bottom: 0; }
.check__frage p { margin: 0; flex: 1 1 15rem; font-weight: 500; }
.check__frage p::before { content: counter(cf) ". "; color: var(--blau-mittel); font-weight: 700; }
.check__antworten { display: flex; gap: .5rem; flex: 0 0 auto; }
.check__knopf {
  font: inherit; font-weight: 600; cursor: pointer; min-width: 5.2rem;
  padding: .55rem 1.1rem; border-radius: 999px;
  border: 2px solid var(--linie); background: #fff; color: var(--text);
}
@media (hover: hover) and (pointer: fine) { .check__knopf:hover { border-color: var(--blau-mittel); color: var(--blau-dunkel); } }
.check__knopf[aria-pressed="true"] { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: #fff; }
.check__stand { margin: 0; color: var(--grau-lesbar); font-size: var(--schrift-neben); }
.check__ergebnis {
  margin-top: 1.2rem; padding: 1.2rem 1.3rem; border-radius: var(--radius-klein);
  background: var(--grund); border-left: 4px solid var(--blau-mittel);
}
.check__ergebnis[data-ton="handeln"] { border-left-color: var(--pink-dunkel); background: #FBE9EF; }
.check__ergebnis[hidden] { display: none; }
.check__ergebnis p { margin: 0 0 1rem; }
.check__neu {
  display: block; margin-top: .9rem; background: none; border: 0; padding: 0;
  font: inherit; font-size: var(--schrift-neben); color: var(--blau-dunkel);
  text-decoration: underline; cursor: pointer;
}
.check__fuss { margin: 1rem 0 0; font-size: var(--schrift-klein); color: var(--grau-lesbar); }

/* ---------- Profile in der Fusszeile ---------- */
.fuss__sozial { display: flex; gap: .6rem; margin-top: 1.2rem; }
.fuss__sozial a {
  width: 42px; height: 42px; display: grid; place-content: center; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
}
@media (hover: hover) and (pointer: fine) { .fuss__sozial a:hover { background: #fff; color: var(--blau-tief); } }

/* ---------- Hinweiskasten ---------- */
.hinweis {
  border-left: 4px solid var(--pink); background: #fff; border-radius: var(--radius-klein);
  padding: 1.1rem 1.3rem; box-shadow: var(--schatten); margin: 1.5rem 0;
}
.hinweis p:last-child { margin-bottom: 0; }

/* ---------- Fusszeile ---------- */
.fuss { background: var(--blau-tief); color: rgba(255,255,255,.82); padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem; }
.fuss a { color: #fff; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .fuss a:hover { color: var(--flaeche); text-decoration: underline; } }
.fuss__raster { display: grid; gap: 2rem; grid-template-columns: 1.5fr repeat(4, 1fr); }
@media (max-width: 1080px) { .fuss__raster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .fuss__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fuss__raster { grid-template-columns: 1fr; } }
.fuss h3 { color: #fff; font-size: var(--schrift-basis); margin-bottom: .9rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: var(--schrift-neben); }
.fuss__logo { background: #fff; border-radius: var(--radius-klein); padding: .7rem .9rem; display: inline-block; margin-bottom: 1rem; }
.fuss__logo img { height: 38px; width: auto; }
.fuss__unten {
  margin-top: 2.5rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; font-size: var(--schrift-klein);
}

/* ---------- Download (Leadmagnet) ----------
   Ein Blatt zum Herunterladen. Sammelt nichts, darum keine Freigabe noetig. */
.download {
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--linie); border-left: 5px solid var(--blau-mittel);
  border-radius: var(--radius); padding: 1.4rem 1.6rem;
  box-shadow: 0 6px 20px rgba(48,79,136,.08);
}
.download__zeichen {
  flex: 0 0 auto; width: 3rem; height: 3rem; display: grid; place-items: center;
  border-radius: var(--radius-klein); background: var(--flaeche); color: var(--blau-dunkel);
}
.download__zeichen svg { width: 26px; height: 26px; }
.download__text { flex: 1 1 18rem; }
.download__text h3 { margin: 0 0 .3rem; color: var(--blau-dunkel); font-size: var(--schrift-text); }
.download__text p { margin: 0 0 .3rem; }
.download__angaben { color: var(--grau-lesbar); font-size: var(--schrift-klein); }
.download__knopf { flex: 0 0 auto; }

/* ---------- Fachbrief ----------
   Steht nur auf der Seite, wenn global.json -> fachbrief_sichtbar wahr ist.
   Ohne fachbrief_ziel erscheint statt des Knopfes der Telefonweg. */
.fachbrief { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; }
.fachbrief__text { flex: 1 1 24rem; }
.fachbrief__text h2 { margin: .2rem 0 .7rem; }
.fachbrief__text p { color: rgba(255,255,255,.88); margin: 0 0 .9rem; }
.fachbrief__punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.fachbrief__punkte li {
  position: relative; padding-left: 1.5rem; color: rgba(255,255,255,.9); font-size: var(--schrift-neben);
}
.fachbrief__punkte li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%; background: #fff;
}
.fachbrief__aktion { flex: 0 1 16rem; }
.fachbrief__knopf { width: 100%; text-align: center; }
.fachbrief__ersatz { color: #fff; font-weight: 600; margin: 0; }
.fachbrief__ersatz a { text-decoration-color: rgba(255,255,255,.5); }
.fachbrief__zusatz { color: rgba(255,255,255,.72); font-size: var(--schrift-fein); margin: .7rem 0 0; }
/* Mit eigenem Anmeldeformular (fachbrief_formular.aktiv): breitere Spalte, und im
   weissen Formularkasten dunkle Schrift statt der Weiss-Vorgabe des dunklen Abschnitts. */
.fachbrief__aktion--formular { flex: 1 1 22rem; }
.fachbrief__aktion--formular > .fachbrief__zusatz { color: rgba(255,255,255,.72); }
.formular--fachbrief { color: var(--text); }
.formular--fachbrief label { color: var(--text); }
.formular--fachbrief a:not(.knopf) { color: var(--blau-dunkel); }

/* ---------- Modulauswahl im Schulungsformular ---------- */
.modulwahl { border: 1px solid var(--linie); border-radius: var(--radius-klein);
             padding: 1rem 1.1rem 1.1rem; margin: 0 0 1rem; background: var(--grund); }
.modulwahl legend { font-weight: 600; font-size: var(--schrift-neben); color: var(--blau-dunkel);
                    padding: 0 .4rem; }
.modulwahl__hinweis { color: var(--grau-lesbar); font-size: var(--schrift-klein); margin: 0 0 .7rem; }
.modulwahl__raster { display: grid; gap: .45rem;
                     grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.modulwahl__eintrag {
  display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  padding: .55rem .7rem; font-size: var(--schrift-neben); line-height: 1.35;
}
@media (hover: hover) and (pointer: fine) { .modulwahl__eintrag:hover { border-color: var(--blau-mittel); } }
.modulwahl__eintrag input { margin-top: .2rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem;
                            accent-color: var(--blau-dunkel); }
.modulwahl__eintrag:has(input:checked) { border-color: var(--blau-dunkel); background: var(--flaeche); }

/* ---------- Druck ---------- */
@media print {
  .kopf, .fuss, .wegweiser, .formular-block, .fachbrief, .leiste { display: none; }
  body { background: #fff; }
}

/* Kurzformular der Wund-Hotline: direkt unter der Ueberschrift, ohne Luecke */
.kurzformular { padding-top: 0; }


/* =====================================================================
   UMBAU 25.09.2026 — Analyse Website (ANALYSE_WEBSITE_KONKURRENZ_2026-09-25.md)
   Patienten zuerst: Zusagen im Hero, Bewertungsleiste, zwei Tueren,
   Video-Kachel, Nachbarorte, feste Handy-Leiste.
   ===================================================================== */

/* ---------- Zusagen im Hero ---------- */
.hero__zusagen { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .45rem; }
.hero__zusagen li { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--blau-dunkel); }
.hero__zusagen svg { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; color: var(--pink-dunkel); stroke-width: 2.2; }
.hero__aktionen .knopf svg { width: 1.2rem; height: 1.2rem; }

/* ---------- Bewertungsmarke im Hero (seit 01.10.2026 ohne Sterne und Anzahl) ---------- */
.bewertung-marke {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.1rem; padding: .4rem 1rem .4rem .45rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--linie); box-shadow: var(--schatten);
  text-decoration: none; color: var(--grau-lesbar); font-size: var(--schrift-neben); line-height: 1.3;
}
@media (hover: hover) and (pointer: fine) { .bewertung-marke:hover { border-color: var(--blau-mittel); } }
.bewertung-marke__zeichen {
  flex: 0 0 auto; display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: 50%; background: var(--flaeche); color: var(--blau-dunkel); font-size: var(--schrift-basis); line-height: 1;
}
.bewertung-marke__text strong { font-weight: 600; color: var(--blau-dunkel); }
.bewertung-marke__pfeil { color: var(--blau-mittel); font-weight: 600; }

/* ---------- Bewertungs-Karte: ein Satz, ein Knopf (seit 01.10.2026) ---------- */
.bewertung-karte {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 5vw, 3.5rem);
  border-radius: var(--radius); background: var(--blau-dunkel); color: #fff;
  box-shadow: var(--schatten-hoch);
}
.bewertung-karte::before {
  content: "\201E"; position: absolute; top: -.42em; left: .12em;
  font-size: clamp(9rem, 22vw, 15rem); line-height: 1; font-weight: 700;
  color: rgba(255,255,255,.08); pointer-events: none;
}
.bewertung-karte > * { position: relative; }
.bewertung-karte .augenbraue { color: #A8C4E8; }
.bewertung-karte__satz {
  color: #fff; font-size: var(--schrift-h2); margin: .2em auto .55em; max-width: 22em;
}
.bewertung-karte p { color: rgba(255,255,255,.86); max-width: 34rem; margin-inline: auto; }
.bewertung-karte .knopf { margin-top: .9rem; }
.bewertung-karte p.bewertung-karte__zusatz { color: rgba(255,255,255,.75); font-size: var(--schrift-neben); margin: 1rem auto 0; }

/* ---------- Zwei Tueren (Startseite) ---------- */
.tueren { padding-top: clamp(2rem, 4vw, 3rem); }
.tueren__gruppe + .tueren__gruppe { margin-top: clamp(2rem, 4vw, 3rem); }
.tueren__titel { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); margin-bottom: 1rem; }
.tueren__reihe { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.tueren__reihe--3 { grid-template-columns: repeat(3, 1fr); }
.tueren__reihe--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .tueren__reihe, .tueren__reihe--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tueren__reihe, .tueren__reihe--3, .tueren__reihe--5 { grid-template-columns: 1fr; } }
.tuer {
  position: relative; display: flex; flex-direction: column; gap: .35rem;
  padding: 1.2rem 2.6rem 1.2rem 1.2rem; min-height: 100%;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten); text-decoration: none; color: var(--text);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .tuer:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); border-color: var(--blau-mittel); color: var(--text); } }
.tuer__zeichen { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 12px; background: var(--flaeche); color: var(--blau-dunkel); }
.tuer__zeichen svg { width: 1.4rem; height: 1.4rem; }
.tuer__titel { font-weight: 650; font-size: var(--schrift-text); color: var(--blau-dunkel); line-height: 1.25; }
.tuer__text { font-size: var(--schrift-neben); color: var(--grau-lesbar); line-height: 1.45; }
.tuer__pfeil { position: absolute; right: 1.1rem; top: 1.2rem; color: var(--pink-dunkel); font-weight: 700; transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine) { .tuer:hover .tuer__pfeil { transform: translateX(3px); } }
.tuer--gross { background: linear-gradient(180deg, #fff, var(--grund)); border-color: #C9D2E8; }
.tuer--gross .tuer__zeichen { background: var(--pink-dunkel); color: #fff; }
/* Kacheln mit Foto, mittig (seit 09.10.2026, Podcast-Seite): zwei grosse Karten
   in der Seitenmitte, das Bild oben, der Text darunter. */
.tueren__gruppe--mitte .tueren__titel { text-align: center; margin-bottom: 1.6rem; }
.tueren__gruppe--mitte .tueren__reihe { grid-template-columns: repeat(2, minmax(0, 27rem)); justify-content: center; gap: 1.6rem; }
@media (max-width: 720px) { .tueren__gruppe--mitte .tueren__reihe { grid-template-columns: minmax(0, 27rem); } }
.tuer--bild { padding: 0; gap: 0; overflow: hidden; }
.tuer__bild { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--flaeche); }
.tuer__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tuer__inhalt { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: 1.2rem 2.8rem 1.4rem 1.3rem; }
.tuer--bild .tuer__titel { font-size: var(--schrift-gross); }
.tuer--bild .tuer__pfeil { top: 1.25rem; right: 1.2rem; }

/* ---------- Video-Kachel "Lieber erst per Video sprechen?" ---------- */
.abschnitt--schmal { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.video-kachel {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem;
  padding: 1.4rem 1.6rem; border-radius: var(--radius);
  background: var(--flaeche); border: 1px solid #C9D2E8;
}
.video-kachel h2 { font-size: var(--schrift-gross); margin: 0 0 .25rem; }
.video-kachel p { margin: 0; }
.video-kachel__zeichen { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--pink-dunkel); }
.video-kachel__zeichen svg { width: 1.6rem; height: 1.6rem; }
@media (max-width: 720px) { .video-kachel { grid-template-columns: 1fr; text-align: left; } .video-kachel__zeichen { display: none; } }

/* ---------- Nachbarorte ---------- */
.orte__titel { font-size: var(--schrift-gross); }
.orte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.orte a {
  display: inline-block; padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--blau-mittel); text-decoration: none; font-weight: 500; background: #fff;
}
@media (hover: hover) and (pointer: fine) { .orte a:hover { background: var(--flaeche); } }

/* ---------- Feste Handy-Leiste (nur Telefon) ----------
   Drei Wege immer im Daumenbereich: Anrufen (gefuellt, CI-Pink dunkel),
   Rueckruf/Termin, Video. Mindesthoehe 56 px - gross genug fuer
   unsichere Finger. Ab 721 px unsichtbar. */
.handyleiste { display: none; }
@media (max-width: 720px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .handyleiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .4rem;
    padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97); border-top: 1px solid var(--linie);
    box-shadow: 0 -6px 20px rgba(48,79,136,.12);
  }
  .handyleiste__knopf {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    min-height: 56px; border-radius: 12px; text-decoration: none;
    font-weight: 600; font-size: var(--schrift-klein); color: var(--blau-dunkel); background: var(--grund);
    border: 1px solid var(--linie);
  }
  .handyleiste__knopf svg { width: 1.35rem; height: 1.35rem; }
  .handyleiste__knopf--anruf { background: var(--pink-dunkel); border-color: var(--pink-dunkel); color: #fff; }
  @media (hover: hover) and (pointer: fine) { .handyleiste__knopf--anruf:hover { color: #fff; } }
}
@media print { .handyleiste { display: none !important; } }

/* Knoepfe auf dem Telefon mindestens 48 px hoch */
@media (max-width: 720px) { .knopf { min-height: 48px; } }

/* Seit 25.09.2026: ein Menuepunkt mehr ("Online-Wundvisite") - auf breiten
   Schirmen etwas engere Abstaende, damit Logo, "Anliegen melden", fuenf
   Menuepunkte und "Rueckruf anfordern" in eine Zeile passen. */
@media (min-width: 1241px) {
  .kopf__reihe { gap: .6rem; }
  .kopf__nav a:not(.kopf__taste), .kopf__gruppe-knopf { padding-left: .5rem; padding-right: .5rem; font-size: var(--schrift-neben); }
  .kopf__gruppe-knopf { gap: .3rem; }
  .kopf__aktion { margin-left: .35rem; }
}

/* ---------- Facebook und Instagram in der Kopfzeile (seit 03.10.2026) ----------
   Zuruf Matthias: die Profile sollen auch oben sichtbar sein. Zwei ruhige
   dunkelblaue Zeichen am Ende des Menues, ohne Rand - sie sollen neben Logo
   und Taste nicht laut werden. Im zugeklappten Menue (Telefon) stehen sie als
   Reihe unter der Taste, 44 px gross zum Antippen, mit feinem Rand.
   :not(.kopf__taste) hebt die Regel ueber die Menuepunkt-Regel oben.
   ACHTUNG Platz: Die Zeile ist auf breiten Schirmen bis auf rund 12 px voll.
   Deshalb ruecken Menuepunkte und Tasten hier etwas enger. Gemessen mit der
   Taste "Podcasts"; "Rueckruf anfordern" / "Termin vereinbaren" sind rund
   50 px laenger - wird die Podcast-Taste abgeschaltet, neu messen. */
.kopf__sozial { display: flex; align-items: center; gap: .1rem; margin-left: .3rem; flex: 0 0 auto; }
.kopf__nav .kopf__sozial a:not(.kopf__taste) {
  width: 30px; height: 30px; padding: 0; display: grid; place-content: center; border-radius: 50%;
  color: var(--blau-dunkel);
}
@media (hover: hover) and (pointer: fine) { .kopf__nav .kopf__sozial a:not(.kopf__taste):hover { background: var(--blau-dunkel); color: #fff; } }
.kopf__sozial svg { width: 19px; height: 19px; }
@media (min-width: 1241px) {
  .kopf__reihe { gap: .5rem; }
  .kopf__nav { gap: 0; }
  .kopf__nav a:not(.kopf__taste), .kopf__gruppe-knopf { padding-left: .36rem; padding-right: .36rem; font-size: var(--schrift-neben); }
  .kopf__gruppe-knopf { gap: .28rem; }
  .kopf__aktion { margin-left: .3rem; }
  .kopf__taste { padding: .58rem .95rem .58rem .8rem; }
}
@media (max-width: 1240px) {
  .kopf__sozial { margin: .9rem 0 0 .6rem; gap: .6rem; }
  .kopf__nav .kopf__sozial a:not(.kopf__taste) { width: 44px; height: 44px; padding: 0; box-shadow: inset 0 0 0 1px #C9D2E8; }
  .kopf__sozial svg { width: 22px; height: 22px; }
}
@media print { .kopf__sozial { display: none; } }

/* ---------- Seite weiterschicken (seit 27.09.2026) ----------
   Schmaler Streifen am Ende jeder Patientenseite. Angehoerige schicken den
   Link an Geschwister - auf dem Telefon mit dem eingebauten Teilen-Menue. */
.teilen { background: var(--grund); border-top: 1px solid var(--linie); padding: 1.6rem 0; }
.teilen__reihe { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.teilen__text { margin: 0; flex: 1 1 22rem; }
.teilen__mail { color: var(--blau-dunkel); }
.teilen__rueck { flex-basis: 100%; color: var(--grau-lesbar); font-size: var(--schrift-neben); min-height: 1.2em; }
.teilen__rueck:empty { display: none; }
@media print { .teilen { display: none; } }

/* ---------- Pruefvermerk auf Wissensseiten (seit 27.09.2026) ---------- */
.pruefvermerk { color: var(--grau-lesbar); font-size: var(--schrift-neben); padding-top: .9rem; }
.pruefvermerk p { margin: 0; }
.pruefvermerk strong { color: var(--blau-dunkel); font-weight: 600; }

/* ---------- Kennzahlen-Leiste (seit 27.09.2026, Wundex-Analyse) ---------- */
.kennzahlen { background: #fff; border-bottom: 1px solid var(--linie); }
.kennzahlen__reihe {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1rem;
  padding: 1.4rem 0;
}
.kennzahl {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: .9rem .6rem; border-radius: var(--radius-klein); background: var(--grund);
}
.kennzahl__zahl { font-size: var(--schrift-zahl); font-weight: 700; line-height: 1.1; color: var(--blau-dunkel); }
.kennzahl__text { font-size: var(--schrift-neben); color: var(--grau-lesbar); margin-top: .25rem; }
@media (max-width: 720px) {
  /* Handy: eine Zeile je Zusage, Zahl links, Text rechts - geht mit 3 wie mit 4 Kacheln auf */
  .kennzahlen__reihe { grid-auto-flow: row; gap: .5rem; padding: 1rem 0; }
  .kennzahl { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: .6rem; text-align: left; padding: .7rem 1rem; }
  .kennzahl__zahl { font-size: var(--schrift-gross); white-space: nowrap; }
  .kennzahl__text { margin-top: 0; }
}

/* ---------- Vergleich "oft so / bei uns" ---------- */
.vergleich { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); background: #fff; }
.vergleich__zeile { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linie); }
.vergleich__zeile > div { display: flex; gap: .6rem; align-items: flex-start; padding: .9rem 1.1rem; }
.vergleich__kopf { border-top: 0; font-weight: 700; }
.vergleich__kopf > div:first-child { background: var(--grund); color: var(--grau-lesbar); }
.vergleich__kopf > div:last-child { background: var(--blau-dunkel); color: #fff; }
.vergleich__nein { color: var(--grau-lesbar); background: var(--grund); }
.vergleich__nein svg { color: var(--grau); flex: 0 0 auto; }
.vergleich__ja { font-weight: 500; color: var(--text); }
.vergleich__ja svg { color: var(--blau-mittel); flex: 0 0 auto; }
.vergleich__knopf { text-align: center; margin-top: 1.6rem; }
@media (max-width: 560px) {
  .vergleich__zeile > div { padding: .75rem .8rem; font-size: var(--schrift-basis); }
}

/* ---------- Rueckruf in drei Schritten ---------- */
.stufen__leiste {
  display: none; list-style: none; margin: 0 0 1.4rem; padding: 0;
  grid-template-columns: repeat(3, 1fr); gap: .5rem; counter-reset: stufe;
}
.stufen--aktiv .stufen__leiste { display: grid; }
.stufen__leiste li {
  counter-increment: stufe; text-align: center; font-size: var(--schrift-klein); font-weight: 600;
  color: var(--grau-lesbar); padding-top: .55rem; border-top: 4px solid var(--linie);
}
.stufen__leiste li::before { content: counter(stufe) " · "; }
.stufen__leiste li.ist-aktiv { color: var(--blau-dunkel); border-top-color: var(--pink); }
.stufen__leiste li.ist-fertig { color: var(--blau-dunkel); border-top-color: var(--blau-mittel); }
.stufen__teil { border: 0; margin: 0 0 1.4rem; padding: 0; min-width: 0; }
.stufen__teil[hidden] { display: none; }
.stufen__teil legend {
  font-size: var(--schrift-gross); font-weight: 700; color: var(--blau-dunkel); margin-bottom: 1rem; padding: 0;
}
.stufen__teil legend:focus { outline: none; }
.wahlkarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.wahlkarten--klein { gap: .6rem; }
.wahlkarte { position: relative; cursor: pointer; }
.wahlkarte input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahlkarte__text {
  display: flex; flex-direction: column; gap: .2rem; height: 100%;
  padding: 1rem 1.1rem; border: 2px solid var(--linie); border-radius: var(--radius-klein);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.wahlkarte__text strong { color: var(--blau-dunkel); font-size: var(--schrift-betont); }
.wahlkarte__text small { color: var(--grau-lesbar); font-size: var(--schrift-klein); }
@media (hover: hover) and (pointer: fine) { .wahlkarte:hover .wahlkarte__text { border-color: var(--blau-mittel); } }
.wahlkarte input:focus-visible + .wahlkarte__text { outline: 3px solid var(--pink); outline-offset: 2px; }
.wahlkarte input:checked + .wahlkarte__text {
  border-color: var(--blau-dunkel); box-shadow: 0 0 0 3px rgba(83,136,198,.25); background: var(--grund);
}
.wahlkarten--klein .wahlkarte__text { padding: .7rem .8rem; }
.feld__titel { font-weight: 600; font-size: var(--schrift-neben); color: var(--blau-dunkel); }
.stufen__hinweis { margin: 1rem 0 0; padding: .8rem 1rem; background: #fff; border-left: 4px solid var(--pink); border-radius: 6px; }
.stufen__hinweis[hidden] { display: none; }
.stufen__steuerung { display: flex; justify-content: space-between; gap: 1rem; }
.stufen__steuerung[hidden], .stufen__steuerung [hidden] { display: none; }
.stufen__steuerung [data-weiter] { margin-left: auto; }
@media (max-width: 620px) {
  .wahlkarten { grid-template-columns: 1fr; }
  .wahlkarten--klein { grid-template-columns: repeat(3, 1fr); }
  .wahlkarten--klein .wahlkarte__text { padding: .6rem .5rem; text-align: center; }
}

/* ---------- Erklaerfilm im Kopfbereich (seit 27.09.2026) ---------- */
.hero__film { position: relative; align-self: center; }
.hero__filmtext { padding: .7rem 1rem .8rem; font-size: var(--schrift-neben); color: var(--grau-lesbar); background: #fff; }
/* KI-Vermerk des Erklaerfilms: in der Zeile unter dem Film (seit 01.10.2026),
   eine Stufe kleiner als der Text davor. #63667A auf Weiss = 5,8 : 1. */
.film__vermerk { display: block; margin-top: .15rem; font-size: var(--schrift-fein); color: var(--grau-lesbar); }
.film__vermerk--allein { margin-top: 0; }

/* ---------- Podcast: Folgen einer Reihe (seit 01.10.2026) ----------
   Der Spieler ist das <audio> des Browsers - kein fremder Dienst. */
.folgen { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.folge {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: clamp(1.2rem, 2.4vw, 1.8rem);
  scroll-margin-top: 6rem;
}
.folge__angaben {
  margin: 0 0 .4rem; font-size: var(--schrift-fein); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blau-dunkel);
}
.folge h3 { margin: 0 0 .4rem; color: var(--blau-dunkel); }
.folge__ton { display: block; width: 100%; margin: 1rem 0 .5rem; }
.folge__vermerk { margin: 0; font-size: var(--schrift-fein); color: var(--grau-lesbar); }
.folge__quellen { margin-top: .8rem; font-size: var(--schrift-neben); }
.folge__quellen summary { cursor: pointer; font-weight: 600; color: var(--blau-dunkel); }
.folge__quellen ul { margin: .5rem 0 0; padding-left: 1.2rem; }
/* Verweis unter jeder Folge: der naechste Schritt nach dem Zuhoeren (seit 08.10.2026) */
.folge__magnet { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--linie); font-weight: 600; }
.folge__magnet a { color: var(--blau-dunkel); }
.folgen--leer {
  background: #fff; border: 1px dashed var(--blau-mittel); border-radius: var(--radius);
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}
.folgen--leer p { margin: 0 0 .6rem; }
.folgen--leer ul { margin: 0; }
/* Folge mit Bild: Foto oben, der Abspielbalken direkt darunter (Wunsch GF 01.10.2026) */
.folge--bild { padding: 0; overflow: hidden; }
.folge__bild { position: relative; margin: 0; aspect-ratio: 16 / 9; background: var(--flaeche); }
.folge__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.folge--bild .folge__ton { margin: 0; padding: .7rem clamp(.8rem, 2vw, 1.2rem); background: var(--grund); border-bottom: 1px solid var(--linie); }
.folge--bild .folge__text { padding: clamp(1.1rem, 2.4vw, 1.7rem); }
.folgen__wege { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-bottom: 1.4rem; }
.folgen__wege .knopf svg { width: 1.15rem; height: 1.15rem; margin-right: .45rem; vertical-align: -.2rem; }
.folgen__feed { font-size: var(--schrift-neben); color: var(--grau-lesbar); }
/* Knopf zu Spotify (seit 09.10.2026 nach den Markenregeln von Spotify): schwarz,
   Zeichen in Spotify-Gruen (Gruen nur auf Schwarz oder Weiss), Schrift weiss.
   Kontrast Weiss auf #121212 = 18 : 1. Nur ein Link, kein eingebetteter Spieler. */
.knopf--spotify { background: #121212; color: #fff; box-shadow: 0 6px 18px rgba(18,18,18,.22); }
.knopf--spotify:focus-visible { background: #2A2A2A; color: #fff; box-shadow: 0 10px 26px rgba(18,18,18,.3); }
@media (hover: hover) and (pointer: fine) { .knopf--spotify:hover { background: #2A2A2A; color: #fff; box-shadow: 0 10px 26px rgba(18,18,18,.3); } }
.knopf.knopf--spotify svg { width: 1.5rem; height: 1.5rem; margin: 0; flex: 0 0 auto; }
.knopf__zusatz { white-space: nowrap; }
.spotify-wege { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.spotify-wege li { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.spotify-wege__fuer { font-weight: 600; color: var(--blau-dunkel); }
.spotify-wege__hinweis { margin-top: 1.4rem; font-size: var(--schrift-neben); color: var(--grau-auf-flaeche); }

/* ---------- Kopfbereich schlanker (seit 05.10.2026) ----------
   Die drei Zusagen stehen als Kennzahlen direkt unter der Unterzeile - einmal,
   statt als Haken-Liste UND als eigene Leiste. Darunter EINE gefuellte Taste;
   Video und Telefon sind Textlinks in der Zeile danach. */
.hero__kennzahlen {
  list-style: none; margin: 1.4rem 0 0; padding: 0; max-width: 34rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.hero__kennzahlen li { display: flex; flex-direction: column; padding: .8rem .9rem .8rem 0; }
.hero__kennzahlen li + li { padding-left: .9rem; border-left: 1px solid var(--linie); }
.hero__kennzahlen strong { font-size: var(--schrift-titel); font-weight: 700; line-height: 1.15; color: var(--blau-dunkel); white-space: nowrap; }
.hero__kennzahlen span { font-size: var(--schrift-klein); line-height: 1.35; color: var(--grau-lesbar); margin-top: .2rem; }
.hero__nebenwege { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.75rem; margin-top: .9rem; }
.hero__nebenweg {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: var(--schrift-betont); color: var(--blau-dunkel);
  text-decoration: underline; text-decoration-color: var(--blau-mittel); text-underline-offset: .2em;
}
@media (hover: hover) and (pointer: fine) { .hero__nebenweg:hover { color: var(--pink-dunkel); } }
.hero__nebenweg svg { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; }
.hero__nebenwege a { min-height: 44px; }
@media (max-width: 720px) {
  .hero__kennzahlen strong { font-size: var(--schrift-text); }
  .hero__kennzahlen span { font-size: var(--schrift-fein); }
  .hero__kennzahlen li { padding: .7rem .6rem .7rem 0; }
  .hero__kennzahlen li + li { padding-left: .6rem; }
  .hero__aktionen .knopf--haupt:only-child { width: 100%; justify-content: center; text-align: center; }
  .kopf__sofort--nur-breit { display: none; }
  /* ohne die Taste haelt nichts mehr den Menue-Knopf rechts */
  .kopf__sofort--nur-breit + .kopf__schalter { margin-left: auto; }
}

/* ---------- Startseite ruhiger (seit 05.10.2026, Vorschlag 4 und 5) ---------- */
/* Der Vergleich "Oft so / Mit MM Wunde" klappt unter den vier Schritten auf */
.schritte__mehr { margin-top: 1.6rem; border-top: 1px solid var(--linie); }
.schritte__mehr summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; min-height: 48px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--schrift-betont); color: var(--blau-dunkel);
}
.schritte__mehr summary::-webkit-details-marker { display: none; }
.schritte__mehr summary::after { content: "+"; font-size: var(--schrift-titel); line-height: 1; flex: 0 0 auto; }
.schritte__mehr[open] summary::after { content: "\2212"; }
.schritte__mehr-inhalt { padding-bottom: .5rem; }
.schritte__mehr-inhalt > p { margin: 0 0 1rem; }
.abschnitt--dunkel .schritte__mehr { border-top-color: rgba(255,255,255,.22); }
.abschnitt--dunkel .schritte__mehr summary { color: #fff; }
.abschnitt--dunkel .schritte__mehr-inhalt > p { color: rgba(255,255,255,.85); }
.abschnitt--dunkel .vergleich { color: var(--text); box-shadow: none; }

/* Orte und Wundwissen: Linkzeilen statt Kacheln */
.kurzlinks { display: grid; gap: 0; }
.kurzlinks__gruppe {
  display: grid; grid-template-columns: 15rem 1fr; gap: .5rem 2rem; align-items: baseline;
  padding: 1.1rem 0; border-top: 1px solid var(--linie);
}
.kurzlinks__gruppe:last-child { border-bottom: 1px solid var(--linie); }
.kurzlinks__titel { font-size: var(--schrift-betont); margin: 0; }
.kurzlinks__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem 1.5rem; }
.kurzlinks__liste a { display: inline-block; padding: .35rem 0; font-weight: 500; text-underline-offset: .2em; }
@media (max-width: 720px) {
  .kurzlinks__gruppe { grid-template-columns: 1fr; }
  .kurzlinks__liste a { padding: .65rem 0; }
}

/* Kacheln: Rahmen ODER Schatten - in Ruhe nur der Rahmen */
.tuer { box-shadow: none; }

/* Helle Fassungen: Dunkelblau bleibt den Schritten und dem Schlussaufruf */
.bewertung-karte--hell { background: var(--flaeche); color: var(--text); box-shadow: none; }
.bewertung-karte--hell::before { color: rgba(48,79,136,.08); }
.bewertung-karte--hell .augenbraue { color: var(--blau-dunkel); }
.bewertung-karte--hell .bewertung-karte__satz { color: var(--blau-dunkel); }
.bewertung-karte--hell p { color: var(--text); }
.bewertung-karte--hell p.bewertung-karte__zusatz, .bewertung-karte--hell p.bewertung-karte__zusatz a { color: var(--grau-auf-flaeche); }
.fachbrief--hell .fachbrief__text p { color: var(--text); }
.fachbrief--hell .fachbrief__punkte li { color: var(--text); }
.fachbrief--hell .fachbrief__punkte li::before { background: var(--blau-mittel); }
.fachbrief--hell .fachbrief__ersatz { color: var(--blau-dunkel); }
.fachbrief--hell .fachbrief__zusatz { color: var(--grau-auf-flaeche); }

/* Das Fachkreis-Band der Startseite schliesst direkt an die Kacheln an (Vorschlag 3, 05.10.2026) */
.tueren + .abschnitt--schmal { padding-top: 0; }

/* ---------- Bedienung mit dem Finger (Audit 09.10.2026) ----------
   Drei Dinge, die nur auf dem Telefon auffallen:
   1. Tippflaechen: was man antippt, ist mindestens 44 px hoch. Gilt nur fuer
      Geraete mit Finger als Hauptzeiger (pointer: coarse) - mit der Maus
      bleibt alles, wie es war.
   2. Der graue Blitz beim Antippen kommt im CI-Blau statt im Browser-Grau,
      und Knoepfe geben beim Druecken nach (Hover gibt es am Telefon nicht;
      alle :hover-Regeln stehen deshalb hinter "hover: hover").
   3. Rand fuer Kerbe und Home-Balken: viewport-fit=cover steht in
      vorlagen/basis.html - erst damit liefert env(safe-area-inset-*) Werte. */
html {
  -webkit-tap-highlight-color: rgba(48,79,136,.14);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
a, button, summary, label { touch-action: manipulation; }
button, .knopf, .kopf__taste, .handyleiste__knopf { -webkit-user-select: none; user-select: none; }
.knopf:active { transform: translateY(1px); }
a.tuer:active { transform: scale(.985); }
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
@media (max-width: 720px) {
  .handyleiste {
    padding-left: max(.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(.5rem, env(safe-area-inset-right, 0px));
  }
}
@media (pointer: coarse) {
  /* "Anliegen melden" neben dem Logo (.kopf__sofort) bleibt bewusst flach -
     Zuruf Matthias 10.10.2026 "auf dem Handy wieder dezenter" (wie schon
     24.09.). Die Tasten im Menue (.kopf__aktion) behalten 44 px. */
  .kopf__aktion, .kopf__schalter, .kopf__gruppe-knopf { min-height: 44px; }
  .leiste__reihe { min-height: 44px; }
  .kopf__logo { display: inline-flex; align-items: center; min-height: 44px; }
  .telefon-link, .karte__mehr, .check__neu { min-height: 44px; }
  .teilen__mail, .hero__nebenweg { display: inline-flex; align-items: center; min-height: 44px; }
  .fuss__sozial a { width: 44px; height: 44px; }
  .fuss ul { gap: 0; }
  .fuss ul a, .fuss__unten a { display: inline-flex; align-items: center; min-height: 44px; }
  .fuss__unten { align-items: center; row-gap: 0; }
}

/* Fotos kommen als <picture> (WebP zuerst, JPG als Rueckfall - bauen.py).
   Die Huelle selbst nimmt keinen Platz ein: das Bild verhaelt sich, als
   stuende es direkt in seinem Rahmen. */
picture { display: contents; }

/* ---------- Sehr schmale Telefone (320-360 px), Abschluss 10.10.2026 ----------
   Drei Bausteine waren breiter als der Schirm und schoben die ganze Seite
   seitlich: der Knopf im Download-Kasten, lange Woerter in den Zitaten und
   die Modulwahl (oben: minmax mit min()). Dazu die Leiste: ohne das
   Sprechblasen-Zeichen bleibt sie auch bei 360 px einzeilig. */
.download > * { min-width: 0; max-width: 100%; }
.download__knopf { flex-shrink: 1; }
/* figure bringt vom Browser 40 px Rand links und rechts mit - die Zitatkarten
   waren dadurch auf dem Telefon nur 208 px breit. */
.stimmen > * { min-width: 0; }
.zitat { margin: 0; }
.zitat__satz { margin: 0 0 .6rem; }
.zitat__satz, .zitat__erklaerung { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 400px) {
  .leiste__zeichen { display: none; }
  .leiste__reihe { gap: .5rem; }
  .download { padding: 1.1rem 1.1rem; gap: 1rem; }
}

/* ---------- Formular: Meldungen unter dem Feld (formular.js, 11.10.2026) ----------
   #A82A57 ist das tiefe Pink der Tasten: auf Weiss 7,0 : 1, auf --grund 6,6 : 1.
   Die Meldung steht in Worten da - die Farbe allein traegt nichts. */
.feld__fehler { margin: 0; color: #A82A57; font-size: var(--schrift-neben); font-weight: 600; line-height: 1.4; }
.einwilligung + .feld__fehler { margin: -.7rem 0 1.2rem; }
.feld input[aria-invalid="true"], .feld select[aria-invalid="true"], .feld textarea[aria-invalid="true"] {
  border-color: #A82A57; box-shadow: 0 0 0 1px #A82A57;
}
.einwilligung input[aria-invalid="true"] { outline: 2px solid #A82A57; outline-offset: 2px; }
.formular__meldung {
  margin: 0 0 1rem; padding: .8rem 1rem; background: #fff; color: var(--text);
  border: 2px solid #A82A57; border-radius: var(--radius-klein); font-size: var(--schrift-basis);
}
.formular__meldung a { font-weight: 600; white-space: nowrap; }
.formular__meldung--seite { margin: 1.5rem 0 0; }
.knopf[aria-disabled="true"] { opacity: .7; cursor: progress; }