/* ============================================================
   PHYSIOPARK Berlin — physiopark.berlin
   Designsprache: Karriereseiten-Mockup (Brandkit 15.png) + Brand Guidelines
   Hellgrün #91C73D · Orange #F88246 · Dunkelgrün #4E7B08
   Montserrat (Überschriften) · Lora Italic (Beizeilen) · Inter (Text)

   Aufbau
     1  Token
     2  Grundlagen
     3  Bauteile
     4  Kopf und Navigation
     5  Bühnen und Abschnitte
     6  Inhaltsbauteile
     7  Bewegte Bauteile
     8  Formulare
     9  Fuß
    10  Anpassung an die Breite
    11  Bewegung reduzieren, Druck
   ============================================================ */

/* ============================================================
   1  TOKEN
   ============================================================ */

:root {
  /* --- Marke --- */
  --gruen: #91C73D;
  --gruen-mittel: #578E14;
  --gruen-dunkel: #4E7B08;
  --gruen-tief: #33530A;          /* Grund für dunkle Bänder */
  --gruen-nacht: #24390A;         /* tiefster Grund, Fuß der Verläufe */
  --gruen-link: #3F6606;          /* 7,4:1 auf #F8FCF1 */
  --gruen-leuchte: #C8EB82;       /* Akzent auf dunklem Grund */
  --orange: #F88246;              /* Dekoration: Punkt, Marke, Zeiger */
  --orange-aktion: #C1500F;       /* Schaltflächen: 4,75:1 mit weisser Schrift */
  --orange-tief: #A24109;

  /* --- Neutral --- */
  --tinte: #55565A;               /* Überschriften, kräftiger Text */
  --tinte-weich: #6E6F72;         /* Fliesstext, 5,02:1 auf Weiss */
  --tinte-leise: #5D5D5D;         /* Fussnoten, 5,1:1 — nie per opacity */
  --linie: #E2E8D4;
  --linie-stark: #C9D8AC;
  --papier: #ffffff;
  --papier-warm: #F8FCF1;
  --papier-creme: #FAFBF4;
  --karte-hell: #F3F8E8;

  /* --- Flächen --- */
  --flaeche-hell: #ffffff;
  --flaeche-creme: linear-gradient(180deg, #FBFDF5, #F5FAEC);
  --flaeche-tief: linear-gradient(160deg, #4E7B08 0%, #3B5E07 55%, #2E4B06 100%);

  /* --- Maße (4er-Raster) --- */
  --m1: 4px;   --m2: 8px;   --m3: 12px;  --m4: 16px;
  --m5: 20px;  --m6: 24px;  --m8: 32px;  --m10: 40px;
  --m12: 48px; --m16: 64px; --m20: 80px; --m24: 96px;

  /* --- Bögen: ein System. Knöpfe 6, Felder 8, Karten 16, Pillen voll --- */
  --bogen-knopf: 6px;
  --bogen-feld: 8px;
  --bogen-karte: 16px;
  --bogen-gross: 22px;
  --bogen-pille: 999px;

  /* --- Schatten, in den Grundton getönt --- */
  --schatten-1: 0 2px 8px rgba(51, 83, 10, .07);
  --schatten-2: 0 10px 30px rgba(51, 83, 10, .11);
  --schatten-3: 0 18px 44px rgba(51, 83, 10, .16);
  --schatten-gruen: 0 14px 34px rgba(145, 199, 61, .20);

  /* --- Schrift --- */
  --font-head: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-sub: 'Lora', Georgia, serif;
  --font-text: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --grad-xs: .8125rem;
  --grad-s: .9rem;
  --grad-m: 1.0625rem;                               /* Fliesstext: 17px */
  --grad-l: clamp(1.1rem, .4vw + 1.02rem, 1.25rem);
  --grad-h3: clamp(1.15rem, .5vw + 1.05rem, 1.35rem);
  --grad-h2: clamp(1.75rem, 2.6vw + .9rem, 2.6rem);
  --grad-h1: clamp(2rem, 3.2vw + 1rem, 3.2rem);
  --grad-riese: clamp(2.6rem, 6vw, 4.4rem);

  /* --- Bewegung --- */
  --zeit-tipp: 140ms;
  --zeit-wechsel: 260ms;
  --zeit-ruhig: 620ms;
  --kurve-aus: cubic-bezier(.16, 1, .3, 1);
  --kurve-weich: cubic-bezier(.65, 0, .35, 1);

  /* --- Bühne --- */
  --breite-eng: 780px;
  --breite-normal: 1018px;
  --breite-breit: 1180px;
  --kopf-hoehe: 78px;
}

/* ============================================================
   2  GRUNDLAGEN
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-text);
  color: var(--tinte-weich);
  background: var(--papier);
  font-size: var(--grad-m);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--gruen-link); }

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

::selection { background: rgba(145, 199, 61, .32); color: var(--tinte); }

.nur-vorleser {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprungmarke {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -140%);
  z-index: 200;
  background: var(--gruen-dunkel);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--grad-s);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 0 0 var(--bogen-feld) var(--bogen-feld);
  transition: transform var(--zeit-wechsel) var(--kurve-aus);
}
.sprungmarke:focus { transform: translate(-50%, 0); }

.container { max-width: var(--breite-normal); margin: 0 auto; padding: 0 var(--m6); }
.container-breit { max-width: var(--breite-breit); margin: 0 auto; padding: 0 var(--m6); }
.container-eng { max-width: var(--breite-eng); margin: 0 auto; padding: 0 var(--m6); }

/* ============================================================
   3  BAUTEILE
   ============================================================ */

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--bogen-knopf);
  padding: 13px 26px;
  line-height: 1.25;
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
  transition: transform var(--zeit-tipp) var(--kurve-aus),
              box-shadow var(--zeit-tipp) var(--kurve-aus),
              background var(--zeit-tipp) linear,
              color var(--zeit-tipp) linear;
}
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primary {
  background: var(--orange-aktion);
  color: #fff;
  box-shadow: 0 6px 16px rgba(193, 80, 15, .28);
}
.btn-primary:hover { background: var(--orange-tief); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(193, 80, 15, .38); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(193, 80, 15, .3); }

.btn-outline {
  background: transparent;
  color: var(--orange-aktion);
  border-color: var(--orange-aktion);
}
.btn-outline:hover { background: rgba(193, 80, 15, .09); transform: translateY(-2px); }
.btn-outline:active { transform: translateY(0); }

.btn-gruen { background: var(--gruen-dunkel); color: #fff; box-shadow: 0 6px 16px rgba(78, 123, 8, .26); }
.btn-gruen:hover { background: var(--gruen-tief); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(78, 123, 8, .36); }

/* Auf dunklem Grund: weisser Rahmen statt Orange (Orange auf Dunkelgrün trägt nicht) */
.btn-hell { background: #fff; color: var(--gruen-tief); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.btn-hell:hover { background: var(--gruen-leuchte); color: var(--gruen-nacht); transform: translateY(-2px); }
.btn-rand-hell { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.btn-rand-hell:hover { background: rgba(255, 255, 255, .14); border-color: #fff; transform: translateY(-2px); }

.btn-reihe { display: flex; gap: var(--m3); flex-wrap: wrap; }

/* Textlink mit wanderndem Pfeil */
.weiter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gruen-link);
}
.weiter::after {
  content: "";
  width: 20px; height: 2px;
  background: currentColor;
  transition: width var(--zeit-wechsel) var(--kurve-aus);
}
.weiter:hover::after { width: 34px; }

/* ---------- Pille mit Punkt ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
  color: var(--gruen-dunkel);
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-pille);
  padding: 8px 22px;
  background: rgba(255, 255, 255, .78);
}
.badge::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}
.badge-hell { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .12); }

/* ---------- Überschriften ---------- */
.headline {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.1;
  color: var(--tinte);
  hyphens: auto;
  overflow-wrap: break-word;
}
.headline .zeile-gruen { color: var(--gruen-dunkel); font-weight: 600; }
.headline .punkt { color: var(--orange); }

.sub-strich {
  width: 88px; height: 4px;
  background: var(--gruen);
  border-radius: 2px;
  margin-bottom: var(--m5);
}

.subline {
  font-family: var(--font-sub);
  font-style: italic;
  font-size: var(--grad-l);
  line-height: 1.5;
  color: var(--tinte);
}

.abschnitt-kopf { max-width: 680px; margin-bottom: var(--m12); }
.abschnitt-kopf h2 { font-size: var(--grad-h2); margin-bottom: var(--m4); }
.abschnitt-kopf p { font-size: var(--grad-m); }
.abschnitt-kopf .subline { margin-top: var(--m3); }

/* ---------- Fliesstext ---------- */
.fliess p { margin-bottom: var(--m4); }
.fliess p:last-child { margin-bottom: 0; }
.fliess h2 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--grad-h2);
  line-height: 1.15;
  color: var(--tinte);
  margin: var(--m12) 0 var(--m4);
  hyphens: auto;
}
.fliess h3 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--grad-h3);
  color: var(--tinte);
  margin: var(--m8) 0 var(--m3);
  hyphens: auto;
}
.fliess ul, .fliess ol { margin: 0 0 var(--m4) var(--m5); }
.fliess li { margin-bottom: var(--m2); }
.fliess strong { color: var(--tinte); font-weight: 600; }
.fliess > *:first-child { margin-top: 0; }

/* Aufzählung mit Häkchen statt Punkt */
.haken-liste { list-style: none; margin: 0 0 var(--m4) 0; display: grid; gap: var(--m3); }
.haken-liste li {
  position: relative;
  padding-left: 34px;
  margin: 0;
}
.haken-liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .34em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gruen) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ---------- Karte, das Grundbauteil ---------- */
.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  padding: var(--m8);
  box-shadow: var(--schatten-1);
}
.karte-creme { background: linear-gradient(170deg, #FCFEF7, #F3F9E7); border-color: var(--linie-stark); }
.karte-rahmen { border: 2px solid var(--gruen); box-shadow: var(--schatten-gruen); }

/* ============================================================
   4  KOPF UND NAVIGATION
   ============================================================ */

.lesefortschritt {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gruen), var(--orange));
  z-index: 120;
  pointer-events: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 252, 241, .93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(145, 199, 61, .16);
  transition: box-shadow var(--zeit-wechsel) var(--kurve-aus),
              background var(--zeit-wechsel) var(--kurve-aus);
}
.site-header.geschrumpft { box-shadow: 0 6px 22px rgba(51, 83, 10, .10); background: rgba(250, 253, 245, .97); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m6);
  padding: 13px var(--m6);
  max-width: 1320px;
  margin: 0 auto;
  min-height: var(--kopf-hoehe);
}
.header-logo { flex: none; }
.header-logo img {
  height: 46px;
  width: auto;
  transition: height var(--zeit-wechsel) var(--kurve-aus);
}
.geschrumpft .header-logo img { height: 38px; }

.main-nav { display: flex; align-items: center; gap: var(--m5); }

.nav-punkt { position: relative; }

.nav-punkt > a,
.nav-punkt > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .84rem;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--tinte);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 2px;
  position: relative;
  transition: color var(--zeit-tipp) linear;
}
.nav-punkt > a::after,
.nav-punkt > button::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 2px;
  background: var(--gruen);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--zeit-wechsel) var(--kurve-aus);
}
.nav-punkt > a:hover, .nav-punkt > button:hover { color: var(--gruen-dunkel); }
.nav-punkt > a:hover::after,
.nav-punkt > button:hover::after,
.nav-punkt.offen > button::after { transform: scaleX(1); }
.nav-punkt > a.aktiv { font-weight: 700; color: var(--gruen-dunkel); }
.nav-punkt > a.aktiv::after,
.nav-punkt.im-zweig > button::after { transform: scaleX(1); background: var(--orange); }
.nav-punkt.im-zweig > button { font-weight: 700; color: var(--gruen-dunkel); }

.nav-pfeil { width: 11px; height: 11px; transition: transform var(--zeit-wechsel) var(--kurve-aus); }
.nav-punkt.offen .nav-pfeil { transform: rotate(180deg); }

/* Klappmenü */
.nav-klapp {
  position: absolute;
  top: calc(100% + 10px);
  left: -22px;
  min-width: 306px;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  box-shadow: var(--schatten-3);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--zeit-wechsel) var(--kurve-aus),
              transform var(--zeit-wechsel) var(--kurve-aus),
              visibility var(--zeit-wechsel);
}
.nav-punkt.offen .nav-klapp { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-klapp::before {
  content: "";
  position: absolute;
  top: -7px; left: 32px;
  width: 12px; height: 12px;
  background: #fff;
  border-left: 1px solid var(--linie);
  border-top: 1px solid var(--linie);
  transform: rotate(45deg);
}
.nav-klapp a {
  display: block;
  padding: 11px 16px;
  border-radius: var(--bogen-feld);
  text-decoration: none;
  color: var(--tinte);
  font-size: .95rem;
  line-height: 1.35;
  transition: background var(--zeit-tipp) linear, color var(--zeit-tipp) linear;
}
.nav-klapp a small {
  display: block;
  font-size: .8rem;
  color: var(--tinte-leise);
  margin-top: 2px;
}
.nav-klapp a:hover { background: var(--karte-hell); color: var(--gruen-dunkel); }
.nav-klapp a.aktiv { background: var(--karte-hell); color: var(--gruen-dunkel); font-weight: 600; }
.nav-klapp .klapp-kopf {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gruen-mittel);
  padding: 8px 16px 6px;
}
.nav-klapp hr { border: 0; border-top: 1px solid var(--linie); margin: 8px 12px; }

.nav-knopf { margin-left: var(--m2); }
.nav-knopf .btn { padding: 11px 20px; font-size: .78rem; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  width: 46px; height: 46px;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2.5px;
  background: var(--tinte);
  border-radius: 2px;
  transition: transform var(--zeit-wechsel) var(--kurve-aus),
              opacity var(--zeit-tipp) linear;
}
.nav-toggle span + span { margin-top: 5.5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   5  BÜHNEN UND ABSCHNITTE
   ============================================================ */

.hero {
  position: relative;
  background:
    radial-gradient(ellipse 55% 55% at 12% 46%, rgba(145, 199, 61, .13), transparent 66%),
    radial-gradient(ellipse 50% 60% at 92% 84%, rgba(248, 130, 70, .09), transparent 62%),
    var(--papier-warm);
  padding: var(--m20) 0 var(--m24);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--m16);
  align-items: center;
}
.hero-grid > * { min-width: 0; }
.hero h1 { font-size: var(--grad-h1); margin: var(--m6) 0 var(--m4); }
.hero-subline {
  font-family: var(--font-sub);
  font-style: italic;
  font-size: var(--grad-l);
  line-height: 1.5;
  color: var(--tinte);
  margin-bottom: var(--m5);
  max-width: 30em;
}
.hero-text { max-width: 30em; margin-bottom: var(--m8); }
.hero-bild { position: relative; }
.hero-bild img {
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-3);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
}

/* Kennzahl, die auf dem Bühnenbild sitzt */
.hero-marke {
  position: absolute;
  right: -18px; bottom: 34px;
  background: #fff;
  border-radius: var(--bogen-karte);
  box-shadow: var(--schatten-3);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 260px;
}
.hero-marke strong {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--gruen-dunkel);
}
.hero-marke span { font-size: .84rem; line-height: 1.35; color: var(--tinte-weich); }

.siegel-zeile { display: flex; align-items: center; gap: var(--m4); margin-top: var(--m8); }
.siegel-zeile img { height: 70px; width: auto; }
.siegel-zeile span {
  font-family: var(--font-sub);
  font-style: italic;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--tinte);
  max-width: 290px;
}

/* Bühne der Unterseiten */
.seite-hero {
  position: relative;
  background:
    radial-gradient(ellipse 60% 60% at 10% 40%, rgba(145, 199, 61, .13), transparent 66%),
    var(--papier-warm);
  padding: var(--m16) 0 var(--m12);
  overflow: hidden;
}
.seite-hero h1 { font-size: var(--grad-h1); margin: var(--m5) 0 var(--m4); }
.seite-hero .subline { max-width: 34em; }
.seite-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--m16);
  align-items: center;
}
.seite-hero-grid > * { min-width: 0; }
.seite-hero-bild img {
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-3);
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.seite-hero .btn-reihe { margin-top: var(--m8); }

/* Brotkrumen */
.krume {
  font-size: .82rem;
  color: var(--tinte-leise);
  margin-bottom: var(--m2);
}
.krume ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.krume a { color: var(--gruen-link); text-decoration: none; }
.krume a:hover { text-decoration: underline; }
.krume li + li::before { content: "›"; margin-right: 8px; color: var(--linie-stark); }

/* Abschnitte */
.abschnitt { padding: var(--m24) 0; }
.abschnitt-schmal { padding: var(--m20) 0; }
.abschnitt-hell { background: var(--flaeche-hell); }
.abschnitt-creme {
  background:
    radial-gradient(ellipse 45% 55% at 18% 26%, rgba(145, 199, 61, .13), transparent 66%),
    var(--flaeche-creme);
}
.abschnitt-tief { background: var(--flaeche-tief); color: #EAF3DA; }
.abschnitt-tief h2, .abschnitt-tief h3 { color: #fff; }
.abschnitt-tief .zeile-gruen { color: var(--gruen-leuchte); }
.abschnitt-tief .sub-strich { background: var(--gruen-leuchte); }
.abschnitt-tief a { color: var(--gruen-leuchte); }
.abschnitt h2 { font-size: var(--grad-h2); }
.abschnitt-intro { max-width: 620px; margin-bottom: var(--m12); }

/* Text/Bild-Teilung */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--m16);
  align-items: center;
}
.split > * { min-width: 0; }
.split-eng { gap: var(--m12); }
.split-bild img {
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-2);
  width: 100%;
  object-fit: cover;
}
.split-kehr .split-bild { order: -1; }

/* Zwei versetzte Bilder */
.split-versetzt { position: relative; }
.split-versetzt .bild-1 { width: 80%; border-radius: var(--bogen-gross); box-shadow: var(--schatten-2); }
.split-versetzt .bild-2 {
  position: relative;
  width: 58%;
  margin: -34% 0 0 auto;
  border-radius: var(--bogen-karte);
  border: 6px solid #fff;
  box-shadow: var(--schatten-3);
}

/* ============================================================
   6  INHALTSBAUTEILE
   ============================================================ */

/* ---------- Wegweiser: anklickbare Karte mit Symbol ---------- */
.wegweiser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: var(--m6);
}
.weg-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--m3);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  padding: var(--m8) var(--m6) var(--m6);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--zeit-wechsel) var(--kurve-aus),
              box-shadow var(--zeit-wechsel) var(--kurve-aus),
              border-color var(--zeit-wechsel) linear;
}
.weg-karte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gruen), var(--orange));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--zeit-wechsel) var(--kurve-aus);
}
.weg-karte:hover { transform: translateY(-5px); box-shadow: var(--schatten-3); border-color: var(--gruen); }
.weg-karte:hover::before { transform: scaleX(1); }
.weg-karte .symbol {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--karte-hell);
  color: var(--gruen-dunkel);
  display: grid;
  place-items: center;
  flex: none;
  transition: background var(--zeit-wechsel) linear, color var(--zeit-wechsel) linear;
}
.weg-karte .symbol svg { width: 25px; height: 25px; }
.weg-karte:hover .symbol { background: var(--gruen-dunkel); color: #fff; }
.weg-karte h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--grad-h3);
  color: var(--tinte);
  line-height: 1.25;
  hyphens: auto;
}
.weg-karte p { font-size: .96rem; color: var(--tinte-weich); flex: 1; }
.weg-karte .weiter { margin-top: var(--m2); }

/* Variante auf dunklem Grund */
.abschnitt-tief .weg-karte { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .2); }
.abschnitt-tief .weg-karte h3 { color: #fff; }
.abschnitt-tief .weg-karte p { color: #DDEBC5; }
.abschnitt-tief .weg-karte .symbol { background: rgba(255, 255, 255, .14); color: var(--gruen-leuchte); }
.abschnitt-tief .weg-karte .weiter { color: var(--gruen-leuchte); }
.abschnitt-tief .weg-karte:hover { background: rgba(255, 255, 255, .13); border-color: var(--gruen-leuchte); }
.abschnitt-tief .weg-karte:hover .symbol { background: var(--gruen-leuchte); color: var(--gruen-nacht); }

/* ---------- Bento ---------- */
.bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-auto-rows: 252px;
  gap: var(--m6);
}
.bento > * { min-width: 0; }
.bento-karte {
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: var(--bogen-karte);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--schatten-2);
  transition: transform var(--zeit-wechsel) var(--kurve-aus),
              box-shadow var(--zeit-wechsel) var(--kurve-aus);
}
.bento-karte:hover { transform: translateY(-5px); box-shadow: var(--schatten-3); }
.bento-karte.gross { grid-row: span 2; }
.bento-karte.breit { grid-column: span 2; }
.bento-karte img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--kurve-aus);
}
.bento-karte:hover img { transform: scale(1.055); }
.bento-karte::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Deckschicht über dem Foto. Am 21.09.2026 nachgemessen: bei .18/.58/.94
     lagen drei Textstellen auf den flacheren Karten unter der Schwelle
     (2,80 · 3,34 · 4,33). Die Kontrastprüfung hatte das nie gemeldet,
     weil sie gegen ein leeres Canvas rechnete. ACHTUNG: deckung() in
     quelle/pruefen.js bildet genau diese drei Stopps nach. Wer hier
     ändert, ändert dort mit, sonst misst der Prüfer eine Seite, die es
     nicht gibt. */
  background: linear-gradient(180deg, rgba(35, 52, 8, .18) 0%, rgba(35, 52, 8, .72) 45%, rgba(35, 52, 8, .94) 100%);
}
.bento-inhalt { position: relative; z-index: 1; padding: var(--m6); color: #fff; }
.bento-inhalt h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.24rem;
  text-transform: uppercase;
  letter-spacing: .015em;
  margin-bottom: 6px;
  hyphens: auto;
}
.bento-inhalt p { font-size: .92rem; color: #E6F0D6; max-width: 430px; }
.bento-inhalt .mehr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--m3);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gruen-leuchte);
}
.bento-inhalt .mehr::after {
  content: "";
  width: 18px; height: 2px;
  background: currentColor;
  transition: width var(--zeit-wechsel) var(--kurve-aus);
}
.bento-karte:hover .mehr::after { width: 30px; }

/* ---------- Zahlenband ---------- */
.zahlen { background: var(--flaeche-tief); padding: var(--m20) 0; color: #fff; }
.zahlen h2 { color: #fff; }
.zahlen h2 .zeile-gruen { color: var(--gruen-leuchte); }
.zahlen .sub-strich { background: var(--gruen-leuchte); }
.zahlen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--m8);
  margin-top: var(--m12);
}
.zahl { position: relative; padding-top: var(--m5); border-top: 2px solid rgba(200, 235, 130, .3); }
.zahl strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  color: #fff;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.zahl span { display: block; font-family: var(--font-sub); font-size: .95rem; line-height: 1.45; color: #E9F3D8; margin-top: 6px; }

/* Auszeichnungen als eigene Zeile darunter */
.auszeichnungen {
  display: flex;
  align-items: center;
  gap: var(--m6);
  flex-wrap: wrap;
  margin-top: var(--m12);
  padding-top: var(--m8);
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.auszeichnungen img { height: 76px; width: auto; }
.auszeichnungen p { font-family: var(--font-sub); font-style: italic; color: #EAF3DA; max-width: 430px; }

/* ---------- Faktenkarte ---------- */
.vorteile-karte {
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-gross);
  background: linear-gradient(170deg, #FCFEF7, #F3F9E7);
  padding: var(--m12) var(--m8) var(--m8);
  position: relative;
  box-shadow: var(--schatten-gruen);
}
.vorteile-karte .badge {
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #fff;
}
.fakt { margin-bottom: var(--m6); }
.fakt:last-child { margin-bottom: 0; }
.fakt strong {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--tinte);
  display: block;
  margin-bottom: 3px;
}
.fakt span { font-family: var(--font-sub); font-size: .97rem; color: var(--tinte-weich); }

/* ---------- Leistungsraster mit Symbol ---------- */
.leistungen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--m6);
}
.leistung {
  display: flex;
  gap: var(--m4);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  padding: var(--m6);
  transition: transform var(--zeit-wechsel) var(--kurve-aus),
              box-shadow var(--zeit-wechsel) var(--kurve-aus),
              border-color var(--zeit-wechsel) linear;
}
.leistung:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); border-color: var(--linie-stark); }
.leistung .symbol {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 13px;
  background: var(--karte-hell);
  color: var(--gruen-dunkel);
  display: grid;
  place-items: center;
}
.leistung .symbol svg { width: 23px; height: 23px; }
.leistung h3 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--tinte);
  margin-bottom: 5px;
  line-height: 1.3;
}
.leistung p { font-size: .96rem; }
.leistung.breit { grid-column: span 2; }

/* ---------- Kostenaussage ---------- */
.aussage {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--m8);
  align-items: center;
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-gross);
  background: linear-gradient(140deg, #FCFEF7, #EEF6DE);
  padding: var(--m10) var(--m10);
  box-shadow: var(--schatten-gruen);
}
.aussage-zahl {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--grad-riese);
  line-height: .95;
  color: var(--gruen-dunkel);
  white-space: nowrap;
}
.aussage h3 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--grad-h3);
  color: var(--tinte);
  margin-bottom: var(--m2);
}

/* ---------- Werteraster ---------- */
.werte-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--m6);
}
.wert {
  position: relative;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  padding: var(--m8) var(--m6) var(--m6);
  overflow: hidden;
  transition: transform var(--zeit-wechsel) var(--kurve-aus),
              box-shadow var(--zeit-wechsel) var(--kurve-aus);
}
.wert:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); }
.wert .nr {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(145, 199, 61, .3);
  position: absolute;
  top: 14px; right: 20px;
  transition: color var(--zeit-wechsel) linear;
}
.wert:hover .nr { color: rgba(248, 130, 70, .45); }
.wert h3 {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--gruen-dunkel);
  margin-bottom: var(--m2);
  padding-right: 48px;
  line-height: 1.3;
}
.wert p { font-size: .96rem; }

/* ---------- Standortkarten ---------- */
.standorte-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m8); }
.standorte-grid > * { min-width: 0; }
.standort-karte {
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-gross);
  background: linear-gradient(170deg, #FCFEF7, #F3F9E7);
  overflow: hidden;
  box-shadow: var(--schatten-gruen);
  display: flex;
  flex-direction: column;
  transition: transform var(--zeit-wechsel) var(--kurve-aus), box-shadow var(--zeit-wechsel) var(--kurve-aus);
}
.standort-karte:hover { transform: translateY(-5px); box-shadow: var(--schatten-3); }
.standort-karte > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.standort-inhalt { padding: var(--m8) var(--m8) var(--m8); display: flex; flex-direction: column; flex: 1; }
.standort-inhalt h3 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.2rem;
  color: var(--tinte);
  margin-bottom: 4px;
}
.standort-inhalt .subline { font-size: 1rem; margin-bottom: var(--m4); }
.standort-inhalt address { font-style: normal; margin-bottom: var(--m4); font-size: .98rem; }
.standort-inhalt .btn { align-self: flex-start; margin-top: auto; }

.info-zeile { display: flex; gap: var(--m3); font-size: .95rem; margin-bottom: var(--m3); }
.info-zeile svg { flex: none; width: 19px; height: 19px; margin-top: 3px; color: var(--gruen-dunkel); }
.info-zeile strong { color: var(--tinte); display: block; }

/* Öffnungszeiten als Label/Wert-Paare */
.zeiten { display: grid; gap: 7px; font-size: .96rem; }
.zeiten div { display: flex; justify-content: space-between; gap: var(--m4); padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
.zeiten div:last-child { border-bottom: 0; }
.zeiten dt, .zeiten span:first-child { color: var(--tinte); font-weight: 600; }
.zeiten span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Zitat ---------- */
.zitat-karte {
  position: relative;
  border: 2px solid var(--gruen-dunkel);
  border-radius: var(--bogen-gross);
  background: rgba(252, 254, 247, .97);
  padding: var(--m12) var(--m10) var(--m10);
  box-shadow: var(--schatten-2);
}
.anfz { font-family: var(--font-head); font-weight: 800; font-size: 3rem; line-height: .7; color: var(--gruen); margin-bottom: var(--m4); }
.zitat-text { font-style: italic; font-size: 1.06rem; line-height: 1.6; color: var(--tinte); margin-bottom: var(--m6); }
.zitat-autor strong { display: block; font-size: 1.04rem; color: var(--tinte); }
.zitat-autor span { font-size: .88rem; }

/* ---------- Teambereich ---------- */
.team-bereich { position: relative; padding: var(--m24) 0; overflow: hidden; }
.team-bereich::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/team-bg.webp") 65% 30% / cover no-repeat;
  opacity: .16;
}
.team-bereich::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.79) 46%, rgba(255,255,255,.6) 100%);
}
.team-bereich .container { position: relative; z-index: 1; }
.team-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--m12); align-items: start; }
.team-grid > * { min-width: 0; }
.team-liste { display: flex; flex-direction: column; gap: var(--m3); max-width: 400px; }
.team-person {
  display: flex;
  align-items: center;
  gap: var(--m4);
  text-align: left;
  background: rgba(255, 255, 255, .92);
  border: 2px solid var(--linie);
  border-radius: var(--bogen-feld);
  padding: 14px 20px;
  cursor: pointer;
  font-family: var(--font-text);
  transition: border-color var(--zeit-wechsel) linear,
              box-shadow var(--zeit-wechsel) var(--kurve-aus),
              transform var(--zeit-wechsel) var(--kurve-aus);
}
.team-person:hover { transform: translateX(4px); border-color: var(--linie-stark); }
.team-person .dot { width: 15px; height: 15px; border-radius: 50%; background: var(--gruen); flex: none; transition: background var(--zeit-wechsel) linear, transform var(--zeit-wechsel) var(--kurve-aus); }
.team-person strong { display: block; font-size: 1.04rem; color: var(--tinte); font-weight: 700; }
.team-person > span > span { font-size: .84rem; color: var(--tinte-weich); }
.team-person.aktiv { border-color: var(--gruen); box-shadow: var(--schatten-gruen); transform: translateX(6px); }
.team-person.aktiv .dot { background: var(--orange); transform: scale(1.22); }

/* ---------- Galerie ---------- */
.galerie-slider { display: flex; gap: var(--m4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galerie-slider::-webkit-scrollbar { display: none; }
.galerie-slider img { flex: 0 0 auto; height: 240px; width: auto; border-radius: var(--bogen-karte); scroll-snap-align: start; box-shadow: var(--schatten-2); }
.slider-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--m8); margin-bottom: var(--m10); }
.slider-pfeile { display: flex; gap: var(--m3); }
.pfeil-btn {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px solid var(--gruen);
  background: transparent;
  color: var(--gruen-dunkel);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--zeit-tipp) linear, transform var(--zeit-tipp) var(--kurve-aus);
  flex: none;
}
.pfeil-btn svg { width: 20px; height: 20px; }
.pfeil-btn:hover { background: rgba(145, 199, 61, .14); transform: scale(1.06); }
.slider-balken { height: 6px; background: #DCE8C2; border-radius: 3px; margin-top: var(--m8); overflow: hidden; }
.slider-balken .fortschritt { height: 100%; width: 25%; background: var(--gruen); border-radius: 3px; transition: transform var(--zeit-wechsel) var(--kurve-aus), width var(--zeit-wechsel) var(--kurve-aus); }

/* ---------- CTA-Band ---------- */
.cta-band {
  position: relative;
  background: var(--flaeche-tief);
  padding: var(--m20) 0;
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 70% at 50% 0%, rgba(145, 199, 61, .22), transparent 62%);
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: var(--grad-h2); margin-bottom: var(--m4); }
.cta-band .punkt { color: var(--gruen-leuchte); }
.cta-band p { max-width: 610px; margin: 0 auto var(--m8); color: #EAF3DA; }
.cta-band a { color: #fff; }
.cta-band .btn-reihe { justify-content: center; }

/* ---------- Textseiten ---------- */
.textseite { padding: var(--m16) 0 var(--m24); }
.textseite h1 { font-size: var(--grad-h1); margin-bottom: var(--m8); }
.textseite h2 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.28rem;
  color: var(--tinte);
  text-transform: none;
  margin: var(--m10) 0 var(--m3);
}
.textseite h3 { font-family: var(--font-text); font-weight: 700; font-size: 1.06rem; color: var(--tinte); margin: var(--m6) 0 var(--m2); }
.textseite p, .textseite li { margin-bottom: var(--m3); }
.textseite ul { margin-left: var(--m5); margin-bottom: var(--m4); }

.ki-transparenz {
  display: flex;
  gap: var(--m4);
  align-items: flex-start;
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-feld);
  background: var(--papier-creme);
  padding: var(--m5);
  margin-top: var(--m4);
}
.ki-transparenz img { flex: none; width: 22px; height: 22px; margin-top: 3px; }
.ki-transparenz p { margin: 0; font-size: .95rem; }

/* ---------- Danke ---------- */
.danke {
  background: radial-gradient(ellipse 55% 55% at 12% 46%, rgba(145, 199, 61, .13), transparent 66%), var(--papier-warm);
  padding: var(--m24) 0 var(--m20);
}
.danke-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gruen-link);
  background: rgba(145, 199, 61, .2);
  border-radius: var(--bogen-pille);
  padding: 8px 18px;
  margin-bottom: var(--m6);
}
.danke-badge svg { width: 16px; height: 16px; }
.danke h1 { font-size: var(--grad-h1); margin-bottom: var(--m6); }
.danke-text { font-size: 1.06rem; max-width: 640px; }
.danke-aktionen { margin-top: var(--m8); display: flex; gap: var(--m4); flex-wrap: wrap; }

/* ---------- Tabelle ---------- */
.tabelle-umbruch { overflow-x: auto; }
.preistabelle { width: 100%; border-collapse: collapse; font-size: .96rem; margin: var(--m6) 0 var(--m3); }
.preistabelle caption { text-align: left; font-family: var(--font-sub); font-style: italic; color: var(--tinte); margin-bottom: var(--m4); }
.preistabelle th {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  color: #fff;
  background: var(--gruen-dunkel);
  padding: 12px 16px;
}
.preistabelle td { padding: 11px 16px; border-bottom: 1px solid var(--linie); color: var(--tinte); vertical-align: top; }
.preistabelle tr:nth-child(even) td { background: var(--papier-creme); }
.preistabelle td:last-child { white-space: nowrap; text-align: right; }
.tabellen-fussnote { font-size: .85rem; color: var(--tinte-leise); }

/* ============================================================
   7  BEWEGTE BAUTEILE
   Jede Bewegung hat einen Grund: Rangfolge zeigen, Ablauf erzählen,
   Eingabe bestätigen oder einen Zustandswechsel sichtbar machen.
   ============================================================ */

/* ---------- 7.1 Zielgruppenweiche ----------
   Vier Wege in die Seite. Die Karte ist selbst der Link; der Balken
   links wächst beim Überfahren und zeigt, welcher Weg gerade gilt. */
.weiche { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--m4); }
.weiche > * { min-width: 0; }
.weiche-karte {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--m5);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  padding: var(--m5) var(--m6);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--zeit-wechsel) var(--kurve-aus),
              box-shadow var(--zeit-wechsel) var(--kurve-aus),
              border-color var(--zeit-wechsel) linear;
}
.weiche-karte::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--gruen);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--zeit-wechsel) var(--kurve-aus);
}
.weiche-karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-2); border-color: var(--linie-stark); }
.weiche-karte:hover::before { transform: scaleY(1); }
.weiche-karte .symbol {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--karte-hell);
  color: var(--gruen-dunkel);
  display: grid; place-items: center;
  flex: none;
  transition: background var(--zeit-wechsel) linear, color var(--zeit-wechsel) linear;
}
.weiche-karte .symbol svg { width: 23px; height: 23px; }
.weiche-karte:hover .symbol { background: var(--gruen-dunkel); color: #fff; }
.weiche-karte strong { display: block; color: var(--tinte); font-weight: 600; font-size: 1.02rem; line-height: 1.35; }
.weiche-karte span { font-size: .9rem; color: var(--tinte-weich); }
.weiche-karte .pfeil {
  width: 26px; height: 26px;
  color: var(--gruen-mittel);
  flex: none;
  transition: transform var(--zeit-wechsel) var(--kurve-aus);
}
.weiche-karte:hover .pfeil { transform: translateX(5px); }

.weiche-nachsatz {
  margin-top: var(--m6);
  padding: var(--m5) var(--m6);
  border-radius: var(--bogen-karte);
  background: var(--karte-hell);
  border: 1px dashed var(--linie-stark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m5);
  flex-wrap: wrap;
}
.weiche-nachsatz p { margin: 0; }

/* ---------- 7.2 Umschalter (Segmentwahl) ----------
   Zwei oder drei Zustände desselben Gegenstands. Der Schieber wandert,
   damit der Wechsel als Bewegung und nicht als Sprung gelesen wird. */
.umschalter {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--karte-hell);
  border: 1px solid var(--linie-stark);
  border-radius: var(--bogen-pille);
  margin-bottom: var(--m8);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.umschalter::-webkit-scrollbar { display: none; }
.umschalter .schieber {
  position: absolute;
  top: 5px; bottom: 5px; left: 5px;
  border-radius: var(--bogen-pille);
  background: var(--gruen-dunkel);
  box-shadow: 0 4px 12px rgba(78, 123, 8, .28);
  transition: transform var(--zeit-wechsel) var(--kurve-aus), width var(--zeit-wechsel) var(--kurve-aus);
  pointer-events: none;
  z-index: 0;
}
.umschalter button {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gruen-dunkel);
  background: none;
  border: none;
  border-radius: var(--bogen-pille);
  padding: 11px 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--zeit-wechsel) linear;
}
.umschalter button[aria-selected="true"] { color: #fff; }
/* Ohne Skript: der Schieber fehlt, also muss die gewählte Fläche selbst tragen */
html:not(.js) .umschalter button[aria-selected="true"] { background: var(--gruen-dunkel); }

.tafel { display: none; }
.tafel.aktiv { display: block; animation: tafel-ein var(--zeit-wechsel) var(--kurve-aus); }
html:not(.js) .tafel { display: block; margin-bottom: var(--m10); }
@keyframes tafel-ein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 7.3 Gegenüberstellung ----------
   Links der Zustand ohne uns, rechts mit uns. Die rechte Spalte ist
   farblich getragen, damit die Rangfolge ohne Lesen erkennbar ist. */
.gegenueber { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m6); align-items: stretch; }
.gegenueber > * { min-width: 0; }
.gegen-spalte {
  border-radius: var(--bogen-gross);
  padding: var(--m8);
  display: flex;
  flex-direction: column;
  gap: var(--m4);
}
.gegen-spalte h3 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.06rem;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: var(--m3);
}
.gegen-spalte h3 svg { width: 22px; height: 22px; flex: none; }
.gegen-spalte ul { list-style: none; display: grid; gap: var(--m3); }
.gegen-spalte li { position: relative; padding-left: 28px; font-size: .99rem; }
.gegen-spalte li::before {
  position: absolute;
  left: 0; top: .1em;
  font-weight: 700;
}

.gegen-vorher { background: #F6F4F1; border: 1px solid #E0DBD4; }
.gegen-vorher h3 { color: #7A5540; }
.gegen-vorher li { color: #6B6560; }
.gegen-vorher li::before { content: "×"; color: #A9714E; font-size: 1.24rem; line-height: 1; }

.gegen-nachher { background: linear-gradient(160deg, #F1F8E3, #E5F2CE); border: 2px solid var(--gruen); box-shadow: var(--schatten-gruen); }
.gegen-nachher h3 { color: var(--gruen-tief); }
.gegen-nachher li { color: #3F4A33; }
.gegen-nachher li::before {
  content: "";
  width: 17px; height: 17px;
  top: .28em;
  border-radius: 50%;
  background: var(--gruen-dunkel) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ---------- 7.4 Zeitstrahl mit Lauflinie ----------
   Die Linie füllt sich, während der Abschnitt durchs Bild läuft. Sie
   erzählt den Ablauf: wo im Verfahren man gerade liest. */
.strahl { position: relative; display: grid; gap: var(--m16); }
.strahl::before,
.strahl::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 2px;
}
.strahl::before { background: var(--linie); }
/* Der Verlauf muss ortsfest bleiben. Mit scaleY() wird er mitgestaucht:
   bei 39 Prozent Lauf war die Linie oben schon orange, obwohl Orange das
   Ende des Weges markieren soll (gemessen am 21.09.2026). clip-path
   beschneidet stattdessen, die Farbe an jeder Stelle bleibt dieselbe. */
.strahl::after {
  background: linear-gradient(180deg, var(--gruen) 0%, var(--gruen-mittel) 55%, var(--orange) 100%);
  clip-path: inset(0 0 calc((1 - var(--lauf, 0)) * 100%) 0);
  transition: clip-path 120ms linear;
  will-change: clip-path;
}
html:not(.js) .strahl::after { clip-path: none; }

.strahl-schritt { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--m6); align-items: start; }
.strahl-schritt > * { min-width: 0; }
.strahl-nr {
  position: relative;
  z-index: 1;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--linie-stark);
  color: var(--gruen-mittel);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2rem;
  transition: background var(--zeit-wechsel) var(--kurve-aus),
              border-color var(--zeit-wechsel) var(--kurve-aus),
              color var(--zeit-wechsel) var(--kurve-aus),
              transform var(--zeit-wechsel) var(--kurve-aus);
}
.strahl-schritt.erreicht .strahl-nr {
  background: var(--gruen-dunkel);
  border-color: var(--gruen-dunkel);
  color: #fff;
  transform: scale(1.06);
}
.strahl-inhalt {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  padding: var(--m6) var(--m8);
  box-shadow: var(--schatten-1);
  transition: border-color var(--zeit-wechsel) linear, box-shadow var(--zeit-wechsel) var(--kurve-aus);
}
.strahl-schritt.erreicht .strahl-inhalt { border-color: var(--gruen); box-shadow: var(--schatten-2); }
.strahl-inhalt h3 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.08rem;
  color: var(--tinte);
  margin-bottom: var(--m2);
  hyphens: auto;
}
.strahl-inhalt .dauer {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gruen-link);
  background: var(--karte-hell);
  border-radius: var(--bogen-pille);
  padding: 4px 12px;
  margin-bottom: var(--m3);
}

/* ---------- 7.5 Auswahlkarten ----------
   Format oder Thema wählen. Der Zustand gehört zur Eingabe, deshalb
   liegt darunter ein echtes Formularfeld, kein reines Klickziel. */
.wahl-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--m4); }
.wahl {
  position: relative;
  display: block;
  background: #fff;
  border: 2px solid var(--linie);
  border-radius: var(--bogen-karte);
  padding: var(--m6) var(--m6) var(--m6) 60px;
  cursor: pointer;
  transition: border-color var(--zeit-wechsel) linear,
              box-shadow var(--zeit-wechsel) var(--kurve-aus),
              transform var(--zeit-wechsel) var(--kurve-aus),
              background var(--zeit-wechsel) linear;
}
.wahl:hover { border-color: var(--linie-stark); transform: translateY(-3px); box-shadow: var(--schatten-1); }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl .haken {
  position: absolute;
  left: var(--m5); top: var(--m6);
  width: 24px; height: 24px;
  border: 2px solid var(--linie-stark);
  border-radius: 7px;
  background: #fff;
  transition: background var(--zeit-wechsel) var(--kurve-aus), border-color var(--zeit-wechsel) linear;
}
.wahl .haken::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 15px no-repeat;
  opacity: 0;
  transform: scale(.5);
  transition: opacity var(--zeit-tipp) linear, transform var(--zeit-wechsel) var(--kurve-aus);
}
.wahl input[type="radio"] ~ .haken { border-radius: 50%; }
.wahl:has(input:checked) { border-color: var(--gruen); background: linear-gradient(160deg, #FBFDF5, #F1F8E3); box-shadow: var(--schatten-gruen); }
.wahl:has(input:checked) .haken { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); }
.wahl:has(input:checked) .haken::after { opacity: 1; transform: scale(1); }
.wahl:has(input:focus-visible) { outline: 3px solid var(--orange-aktion); outline-offset: 3px; }
.wahl strong { display: block; font-size: 1.04rem; color: var(--tinte); font-weight: 600; margin-bottom: 4px; line-height: 1.3; }
.wahl span { font-size: .93rem; color: var(--tinte-weich); display: block; }
.wahl .marke {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gruen-link);
  margin-bottom: 6px;
}

/* Zähler der Auswahl, wandert am unteren Rand mit */
.wahl-leiste {
  position: sticky;
  bottom: var(--m5);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m5);
  flex-wrap: wrap;
  margin-top: var(--m8);
  background: #fff;
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-karte);
  box-shadow: var(--schatten-3);
  padding: var(--m4) var(--m6);
  transition: opacity var(--zeit-wechsel) var(--kurve-aus), transform var(--zeit-wechsel) var(--kurve-aus);
}
.wahl-leiste.ruht { opacity: 0; transform: translateY(14px); pointer-events: none; }
.wahl-leiste p { margin: 0; font-size: .97rem; }
.wahl-leiste strong { color: var(--gruen-dunkel); font-family: var(--font-head); font-weight: 800; }

/* ---------- 7.6 Aufklapper ----------
   Für Leser, die gezielt eine Frage suchen statt die Seite zu lesen. */
.aufklapp { border-top: 1px solid var(--linie); }
.aufklapp:last-of-type { border-bottom: 1px solid var(--linie); }
.aufklapp-knopf {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m5);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--m6) 0;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--tinte);
  line-height: 1.35;
  transition: color var(--zeit-tipp) linear;
}
.aufklapp-knopf:hover { color: var(--gruen-dunkel); }
.aufklapp-zeichen {
  position: relative;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--karte-hell);
  transition: background var(--zeit-wechsel) linear, transform var(--zeit-wechsel) var(--kurve-aus);
}
.aufklapp-zeichen::before,
.aufklapp-zeichen::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 2.5px;
  border-radius: 2px;
  background: var(--gruen-dunkel);
  transform: translate(-50%, -50%);
  transition: transform var(--zeit-wechsel) var(--kurve-aus), background var(--zeit-wechsel) linear;
}
.aufklapp-zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.aufklapp-knopf[aria-expanded="true"] .aufklapp-zeichen { background: var(--gruen-dunkel); }
.aufklapp-knopf[aria-expanded="true"] .aufklapp-zeichen::before,
.aufklapp-knopf[aria-expanded="true"] .aufklapp-zeichen::after { background: #fff; }
.aufklapp-knopf[aria-expanded="true"] .aufklapp-zeichen::after { transform: translate(-50%, -50%) rotate(0deg); }
.aufklapp-inhalt {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--zeit-wechsel) var(--kurve-aus);
}
.aufklapp-inhalt > div { overflow: hidden; }
.aufklapp-inhalt.offen { grid-template-rows: 1fr; }
.aufklapp-inhalt > div > *:last-child { margin-bottom: var(--m6); }
html:not(.js) .aufklapp-inhalt { grid-template-rows: 1fr; }

/* ---------- 7.7 Seitennavigation, die mitläuft ---------- */
.mit-navi { position: sticky; top: calc(var(--kopf-hoehe) + 28px); }
.mit-navi h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gruen-mittel);
  margin-bottom: var(--m4);
}
.mit-navi ol { list-style: none; display: grid; gap: 2px; border-left: 2px solid var(--linie); }
.mit-navi a {
  display: block;
  padding: 9px var(--m4);
  margin-left: -2px;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: var(--tinte-weich);
  font-size: .95rem;
  line-height: 1.35;
  transition: color var(--zeit-tipp) linear, border-color var(--zeit-tipp) linear, background var(--zeit-tipp) linear;
}
.mit-navi a:hover { color: var(--gruen-dunkel); border-left-color: var(--linie-stark); }
.mit-navi a.aktiv { color: var(--gruen-dunkel); font-weight: 600; border-left-color: var(--gruen); background: rgba(145, 199, 61, .09); }

.mit-navi-grid { display: grid; grid-template-columns: 230px 1fr; gap: var(--m16); align-items: start; }
.mit-navi-grid > * { min-width: 0; }

/* ---------- 7.8 Verzahnung: zwei Felder, ein Schnitt ---------- */
.verzahnung {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  margin: var(--m10) 0;
}
.verzahnung > * { min-width: 0; }
.verzahnung-feld {
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-gross);
  padding: var(--m8);
  background: linear-gradient(160deg, #FCFEF7, #F2F8E5);
}
.verzahnung-feld h3 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.1rem;
  color: var(--gruen-dunkel);
  margin-bottom: var(--m3);
}
.verzahnung-feld p { font-size: .98rem; }
.verzahnung-mitte {
  width: 86px;
  display: grid;
  place-items: center;
  z-index: 1;
}
.verzahnung-ring {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(248, 130, 70, .4);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .06em;
  text-align: center;
  line-height: 1.2;
  padding: 6px;
}

/* ---------- 7.9 Nach oben ---------- */
.nach-oben {
  position: fixed;
  right: var(--m6);
  bottom: var(--m6);
  z-index: 90;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: none;
  background: var(--gruen-dunkel);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--schatten-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--zeit-wechsel) var(--kurve-aus),
              transform var(--zeit-wechsel) var(--kurve-aus),
              visibility var(--zeit-wechsel),
              background var(--zeit-tipp) linear;
}
.nach-oben svg { width: 21px; height: 21px; }
.nach-oben.sichtbar { opacity: 1; visibility: visible; transform: none; }
.nach-oben:hover { background: var(--gruen-tief); }

/* ---------- 7.10 Einblenden beim Scrollen ----------
   Nur mit Skript, sonst bliebe der Inhalt bei Skriptblockern
   und im Druck dauerhaft unsichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--zeit-ruhig) var(--kurve-aus), transform var(--zeit-ruhig) var(--kurve-aus); }
  .js .reveal.sichtbar { opacity: 1; transform: none; }
  .js .reveal-staffel > * { opacity: 0; transform: translateY(18px); transition: opacity var(--zeit-ruhig) var(--kurve-aus), transform var(--zeit-ruhig) var(--kurve-aus); }
  .js .reveal-staffel.sichtbar > * { opacity: 1; transform: none; }
  .js .reveal-staffel.sichtbar > *:nth-child(1) { transition-delay: 0ms; }
  .js .reveal-staffel.sichtbar > *:nth-child(2) { transition-delay: 70ms; }
  .js .reveal-staffel.sichtbar > *:nth-child(3) { transition-delay: 140ms; }
  .js .reveal-staffel.sichtbar > *:nth-child(4) { transition-delay: 210ms; }
  .js .reveal-staffel.sichtbar > *:nth-child(5) { transition-delay: 280ms; }
  .js .reveal-staffel.sichtbar > *:nth-child(6) { transition-delay: 350ms; }
  .js .reveal-staffel.sichtbar > *:nth-child(7) { transition-delay: 420ms; }
  .js .reveal-staffel.sichtbar > *:nth-child(8) { transition-delay: 490ms; }
}

/* ============================================================
   8  FORMULARE
   ============================================================ */

.formfeld { margin-bottom: var(--m5); }
.formfeld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--m5); }
.formfeld-paar > * { min-width: 0; }
.formfeld label {
  display: block;
  font-size: .96rem;
  font-weight: 500;
  color: var(--tinte);
  margin-bottom: 7px;
}
.formfeld input,
.formfeld select,
.formfeld textarea {
  width: 100%;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--tinte);
  border: 1.5px solid var(--gruen-mittel);
  border-radius: var(--bogen-feld);
  padding: 12px 15px;
  background: #fff;
  box-shadow: 0 3px 9px rgba(51, 83, 10, .06);
  transition: border-color var(--zeit-tipp) linear, box-shadow var(--zeit-tipp) linear;
}
.formfeld textarea { min-height: 150px; resize: vertical; }
.formfeld input::placeholder, .formfeld textarea::placeholder { color: #7B7C7F; }
.formfeld input:hover, .formfeld select:hover, .formfeld textarea:hover { border-color: var(--gruen-dunkel); }
.formfeld input:focus, .formfeld select:focus, .formfeld textarea:focus { border-color: var(--gruen-dunkel); }
.formfeld input:focus-visible,
.formfeld select:focus-visible,
.formfeld textarea:focus-visible {
  outline: 3px solid var(--gruen-dunkel);
  outline-offset: 2px;
  box-shadow: none;
}
.feld-hinweis { margin: 6px 0 0; font-size: .86rem; color: var(--tinte-leise); }

.formfeld-checkbox { display: flex; gap: var(--m3); align-items: flex-start; font-size: .9rem; margin-bottom: var(--m6); }
.formfeld-checkbox input { margin-top: 3px; width: 19px; height: 19px; flex: none; accent-color: var(--gruen-dunkel); }

.form-fehler {
  display: none;
  color: #9E3611;
  background: #FDF0E8;
  border: 1px solid var(--orange);
  border-radius: var(--bogen-feld);
  padding: 13px 17px;
  font-size: .94rem;
  margin-top: var(--m5);
}
.form-fehler.sichtbar { display: block; animation: tafel-ein var(--zeit-wechsel) var(--kurve-aus); }
.form-fussnote { font-size: .84rem; line-height: 1.55; color: var(--tinte-leise); margin-top: var(--m5); }
.hp-feld { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }

.kontakt-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--m16); align-items: start; }
.kontakt-grid > * { min-width: 0; }

/* ---------- Formular in Schritten ----------
   Sechs bis neun Felder auf einmal schrecken ab. Ohne Skript stehen
   alle Schritte untereinander und das Formular bleibt vollständig. */
.schritte-leiste { display: flex; align-items: center; gap: var(--m3); margin-bottom: var(--m8); }
html:not(.js) .schritte-leiste { display: none; }
.schritt-punkt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  transition: color var(--zeit-wechsel) linear;
}
.schritt-punkt b {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--linie);
  color: var(--tinte-weich);
  display: grid;
  place-items: center;
  font-size: .8rem;
  transition: background var(--zeit-wechsel) var(--kurve-aus), color var(--zeit-wechsel) linear, transform var(--zeit-wechsel) var(--kurve-aus);
}
.schritt-punkt.aktiv { color: var(--gruen-dunkel); }
.schritt-punkt.aktiv b { background: var(--gruen-dunkel); color: #fff; transform: scale(1.1); }
.schritt-punkt.fertig b { background: var(--gruen); color: #fff; }
.schritt-strich { flex: 1; height: 2px; background: var(--linie); border-radius: 2px; overflow: hidden; min-width: 18px; }
.schritt-strich i { display: block; height: 100%; width: 0; background: var(--gruen); transition: width var(--zeit-wechsel) var(--kurve-aus); }

.schritt { display: none; }
.schritt.aktiv { display: block; animation: tafel-ein var(--zeit-wechsel) var(--kurve-aus); }
html:not(.js) .schritt { display: block; }
html:not(.js) .schritt + .schritt { margin-top: var(--m8); padding-top: var(--m8); border-top: 1px solid var(--linie); }
.schritt > h3 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.04rem;
  color: var(--tinte);
  margin-bottom: var(--m5);
}
.schritt-knoepfe { display: flex; gap: var(--m3); flex-wrap: wrap; margin-top: var(--m6); }
html:not(.js) .schritt-knoepfe .nur-mit-js { display: none; }

/* ============================================================
   9  FUSS
   ============================================================ */

.site-footer { background: #E2EFCE; padding: var(--m20) 0 var(--m12); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--m10); }
.footer-grid > * { min-width: 0; }
.footer-logo img { height: 56px; width: auto; margin-bottom: var(--m4); }
.footer-claim { font-family: var(--font-sub); font-style: italic; font-size: .95rem; color: #42501F; max-width: 30ch; }
.footer-spalte h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #375508;
  margin-bottom: var(--m4);
}
.footer-spalte p, .footer-spalte address { font-style: normal; font-size: .93rem; color: #42501F; margin-bottom: 6px; }
.footer-spalte a { color: #33530A; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a {
  font-size: .93rem;
  color: #33530A;
  text-decoration: none;
  transition: color var(--zeit-tipp) linear, transform var(--zeit-tipp) var(--kurve-aus);
  display: inline-block;
}
.footer-nav a:hover { text-decoration: underline; transform: translateX(3px); }
.footer-schluss {
  margin-top: var(--m12);
  padding-top: var(--m6);
  border-top: 1px solid rgba(51, 83, 10, .2);
  font-size: .86rem;
  color: #44521F;
  display: flex;
  justify-content: space-between;
  gap: var(--m5);
  flex-wrap: wrap;
}
.footer-schluss a { color: #33530A; }
.footer-auftritte { display: flex; gap: var(--m3); flex-wrap: wrap; margin-top: var(--m4); }
.footer-auftritte a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: #33530A;
  text-decoration: none;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(51, 83, 10, .18);
  border-radius: var(--bogen-pille);
  padding: 7px 15px;
  transition: background var(--zeit-tipp) linear, transform var(--zeit-tipp) var(--kurve-aus);
}
.footer-auftritte a:hover { background: #fff; transform: translateY(-2px); }
.footer-auftritte svg { width: 15px; height: 15px; flex: none; }

/* ============================================================
   10  ANPASSUNG AN DIE BREITE
   Jede mehrspaltige Anordnung erklärt hier ihren Zusammenbruch.
   ============================================================ */

/* Gemessen am 21.09.2026: bei 1024 px brauchte der Kopf 1066 px, der Knopf
   "Praxis suchen" stand 42 px im Nichts und machte JEDE Seite waagerecht
   scrollbar. Sechs Menüpunkte plus Knopf brauchen zwischen 960 und 1120 px
   eine engere Fassung; darunter übernimmt das Klappmenü. */
@media (max-width: 1120px) {
  .header-inner { gap: var(--m4); padding-left: var(--m4); padding-right: var(--m4); }
  .main-nav { gap: 10px; }
  .nav-punkt > a, .nav-punkt > button { font-size: .74rem; letter-spacing: .03em; }
  .nav-knopf { margin-left: 0; }
  .nav-knopf .btn { padding: 10px 13px; font-size: .72rem; }
  .header-logo img { height: 40px; }
  .hero-marke { right: 0; }
}
/* Nachgezogen am 21.09.2026: physiopark-zeitlos.de hat SIEBEN Menüpunkte plus
   Knopf. Bei 961 px, der engsten Desktop-Breite, ragte die Leiste 22 px über
   das Fenster. Erster Versuch war ein zweiter Medienblock weiter unten in der
   Datei; der stand später und hat DIESE Regel überschrieben, wodurch die
   Leiste von 790 auf 831 px wuchs. Deshalb steht die Änderung hier und nicht
   dort. Lücke 14 -> 10 px, Knopfrand weg, Polster 14 -> 13 px. */

@media (max-width: 1000px) {
  .mit-navi-grid { grid-template-columns: 1fr; gap: var(--m8); }
  .mit-navi { position: static; }
  .mit-navi ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m2);
    border-left: 0;
    padding-bottom: var(--m2);
  }
  .mit-navi a {
    margin-left: 0;
    border: 1px solid var(--linie);
    border-radius: var(--bogen-pille);
    padding: 8px 16px;
    font-size: .88rem;
  }
  .mit-navi a.aktiv { border-color: var(--gruen); }
}

@media (max-width: 960px) {
  .hero-grid,
  .seite-hero-grid,
  .split,
  .team-grid,
  .kontakt-grid { grid-template-columns: 1fr; gap: var(--m10); }
  .hero-bild, .seite-hero-bild { order: -1; }
  .split-kehr .split-bild { order: 0; }
  .hero-bild img { aspect-ratio: 16 / 10; object-position: center 28%; }
  .seite-hero-bild img { aspect-ratio: 16 / 9; }
  .hero-marke { position: static; margin-top: var(--m4); max-width: none; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 232px; }
  .bento-karte.gross, .bento-karte.breit { grid-row: span 1; grid-column: auto; }
  .zahlen-grid { grid-template-columns: 1fr 1fr; gap: var(--m6); }
  .standorte-grid { grid-template-columns: 1fr; }
  .gegenueber { grid-template-columns: 1fr; }
  .leistung.breit { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--m8); }
  .split-versetzt .bild-1 { width: 100%; }
  .split-versetzt .bild-2 { width: 54%; margin-top: -28%; }

  /* Verzahnung: aus nebeneinander wird untereinander, der Ring rückt in die Fuge */
  .verzahnung { grid-template-columns: 1fr; gap: 0; }
  .verzahnung-mitte { width: auto; margin: -20px 0; justify-self: center; }
}

/* Mobiles Menü */
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .main-nav {
    /* NICHT position:fixed. Der Kopf trägt backdrop-filter, und ein Filter
       macht das Element zum Bezugsrahmen auch für fixed-Kinder. inset gegen
       den 70 px hohen Kopf ergab dann ein Menü der Höhe 0: sichtbar war nur
       die erste Zeile, der Rest lag hinter dem Seiteninhalt. Am 21.09.2026
       im Bild gefunden, nicht in der Messung, weil nur left/top/width
       geprüft worden waren und nicht die Höhe. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - var(--kopf-hoehe));
    display: block;
    background: var(--papier-warm);
    padding: var(--m6) var(--m6) var(--m20);
    overflow-y: auto;
    /* Nach OBEN geparkt, nicht nach rechts. Gemessen am 21.09.2026:
       translateX(100%) schob das Menü über den rechten Rand hinaus und
       machte das Dokument auf allen 25 Seiten 720 statt 360 px breit.
       position:fixed hängt am Viewport, also greift overflow-x am body
       dagegen nicht. Negative Koordinaten erzeugen keinen Scrollbereich,
       positive schon. */
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--zeit-wechsel) var(--kurve-aus), visibility var(--zeit-wechsel);
    border-top: 1px solid rgba(145, 199, 61, .2);
  }
  .main-nav.offen { transform: none; visibility: visible; }
  .nav-punkt { border-bottom: 1px solid var(--linie); }
  .nav-punkt > a,
  .nav-punkt > button {
    width: 100%;
    justify-content: space-between;
    padding: 17px 2px;
    font-size: .95rem;
    letter-spacing: .06em;
  }
  .nav-punkt > a::after, .nav-punkt > button::after { display: none; }
  .nav-pfeil { width: 15px; height: 15px; }

  .nav-klapp {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    background: transparent;
    /* Kein Padding am Raster selbst: es wirkt auch bei 0fr und riss im
       geschlossenen Zustand ungleiche Lücken zwischen die Menüpunkte
       (am 21.09.2026 im Bild gesehen). Der Abstand gehört nach innen. */
    padding: 0;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--zeit-wechsel) var(--kurve-aus);
  }
  .nav-klapp-huelle { padding: 0 0 var(--m3) var(--m4); }
  .nav-klapp::before { display: none; }
  .nav-klapp > * { min-height: 0; }
  .nav-klapp-huelle { overflow: hidden; }
  .nav-punkt.offen .nav-klapp { grid-template-rows: 1fr; }
  .nav-klapp a { padding: 12px 14px; }
  .nav-klapp a small { display: none; }
  .nav-klapp .klapp-kopf { display: none; }
  .nav-klapp hr { display: none; }

  .nav-knopf { margin: var(--m6) 0 0; }
  .nav-knopf .btn { width: 100%; justify-content: center; padding: 15px 20px; font-size: .84rem; }

  html.menue-offen, html.menue-offen body { overflow: hidden; }
}

@media (max-width: 760px) {
  :root { --kopf-hoehe: 70px; }
  .hero { padding: var(--m10) 0 var(--m16); }
  .abschnitt, .team-bereich { padding: var(--m16) 0; }
  .abschnitt-schmal { padding: var(--m12) 0; }
  .zahlen, .cta-band { padding: var(--m16) 0; }
  .seite-hero { padding: var(--m10) 0 var(--m10); }
  .weiche { grid-template-columns: 1fr; }
  .zitat-karte { padding: var(--m8) var(--m6) var(--m6); }
  .siegel-zeile { flex-wrap: wrap; gap: var(--m3); }
  .siegel-zeile img { height: 60px; }
  .danke { padding: var(--m12) 0; }
  .aussage { grid-template-columns: 1fr; gap: var(--m4); padding: var(--m8) var(--m6); text-align: left; }
  .strahl { gap: var(--m10); }
  .strahl-schritt { grid-template-columns: 44px 1fr; gap: var(--m4); }
  .strahl-nr { width: 44px; height: 44px; font-size: 1.02rem; border-width: 2.5px; }
  .strahl::before, .strahl::after { left: 21px; }
  .strahl-inhalt { padding: var(--m5) var(--m5); }
  .vorteile-karte { padding: var(--m10) var(--m6) var(--m6); }
  .verzahnung-feld { padding: var(--m6); }
  .slider-kopf { flex-direction: column; align-items: flex-start; gap: var(--m5); }
  .galerie-slider img { height: 190px; }
  .nach-oben { right: var(--m4); bottom: var(--m4); width: 46px; height: 46px; }
  .wahl { padding: var(--m5) var(--m5) var(--m5) 54px; }
  .wahl .haken { left: var(--m4); top: var(--m5); }
  .schritte-leiste { gap: var(--m2); }
  .schritt-punkt span { display: none; }
  .aufklapp-knopf { font-size: 1.02rem; padding: var(--m5) 0; }
  .bento-inhalt { padding: var(--m5); }
  .auszeichnungen { gap: var(--m4); }
  .auszeichnungen img { height: 62px; }
}

@media (max-width: 560px) {
  .formfeld-paar { grid-template-columns: 1fr; gap: 0; }
  .zahlen-grid { grid-template-columns: 1fr 1fr; gap: var(--m5); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--m8); }
  .wegweiser, .leistungen, .werte-grid, .wahl-raster { grid-template-columns: 1fr; }
  .weiche-karte { grid-template-columns: auto 1fr; padding: var(--m4) var(--m5); gap: var(--m4); }
  .weiche-karte .pfeil { display: none; }
  .gegen-spalte { padding: var(--m6); }
  .btn { width: 100%; justify-content: center; }
  .btn-reihe { flex-direction: column; }
  .weiche-nachsatz { flex-direction: column; align-items: flex-start; }
  .wahl-leiste { flex-direction: column; align-items: stretch; text-align: center; }
  .footer-schluss { flex-direction: column; gap: var(--m3); }
}

@media (max-width: 400px) {
  .zahlen-grid { grid-template-columns: 1fr; }
  .header-logo img { height: 38px; }
}

/* ============================================================
   11  BEWEGUNG REDUZIEREN, DRUCK
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .strahl::after { clip-path: none !important; }
  .lesefortschritt { display: none; }
  .bento-karte:hover img { transform: none; }
}

@media print {
  .site-header, .nav-toggle, .lesefortschritt, .nach-oben,
  .cta-band .btn, .mit-navi, .wahl-leiste, .schritte-leiste { display: none !important; }
  .reveal, .reveal-staffel > * { opacity: 1 !important; transform: none !important; }
  .tafel, .schritt, .aufklapp-inhalt { display: block !important; }
  .aufklapp-inhalt { grid-template-rows: 1fr !important; }
  .hero, .seite-hero, .abschnitt-creme, .zahlen, .cta-band, .abschnitt-tief { background: #fff !important; color: #000 !important; }
  .zahlen h2, .cta-band h2, .zahl strong, .abschnitt-tief h2, .abschnitt-tief h3 { color: #000 !important; }
  .zahl span, .cta-band p, .abschnitt-tief { color: #333 !important; }
  body { font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .mit-navi-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   12  NACHTRAG: Formate, Personen, Wegetafel
   ============================================================ */

/* ---------- Formatkarten: die Dauer trägt die Karte ---------- */
.formate { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--m5); }
.format {
  position: relative;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  padding: var(--m6);
  overflow: hidden;
  transition: transform var(--zeit-wechsel) var(--kurve-aus),
              box-shadow var(--zeit-wechsel) var(--kurve-aus),
              border-color var(--zeit-wechsel) linear;
}
.format:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); border-color: var(--gruen); }
.format .dauer {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--gruen-dunkel);
  display: block;
  margin-bottom: var(--m3);
  font-variant-numeric: tabular-nums;
}
.format .dauer small { font-size: .96rem; font-weight: 700; color: var(--tinte-weich); margin-left: 5px; }
.format h3 { font-family: var(--font-text); font-weight: 700; font-size: 1.06rem; color: var(--tinte); margin-bottom: 5px; line-height: 1.3; }
.format p { font-size: .95rem; }
.format::after {
  content: "";
  position: absolute;
  right: -28px; bottom: -28px;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: rgba(145, 199, 61, .1);
  transition: transform var(--zeit-wechsel) var(--kurve-aus);
}
.format:hover::after { transform: scale(1.45); }

/* ---------- Personen ---------- */
.personen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--m8); }
.person { text-align: left; }
.person img {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--bogen-karte);
  box-shadow: var(--schatten-2);
  margin-bottom: var(--m4);
}
.person strong { display: block; font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: 1.04rem; color: var(--tinte); }
.person span { font-family: var(--font-sub); font-style: italic; color: var(--gruen-dunkel); font-size: .98rem; }

/* ---------- Wegetafel: Anschrift, Zeiten, Verkehr nebeneinander ---------- */
.tafel-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--m6); }
.tafel-block {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  padding: var(--m6);
}
.tafel-block h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gruen-mittel);
  margin-bottom: var(--m4);
}
.tafel-block address { font-style: normal; }

@media (max-width: 760px) {
  .format .dauer { font-size: 2.1rem; }
  .person img { max-width: 200px; }
}

/* ============================================================
   13  NACHTRAG: Kopfzeile und Bühnenüberschrift, gemessen
   ============================================================ */

/* Gemessen am 21.09.2026 bei 1440 px: die Kopfzeile lief auf zwei Zeilen,
   weil zwei Menüpunkte umbrachen. Ein zweizeiliger Kopf frisst 15 % der
   Bildhöhe und liest sich als Fehler. Die Beschriftungen sind gekürzt,
   der Umbruch ist zusätzlich gesperrt. */
.nav-punkt > a, .nav-punkt > button { white-space: nowrap; }

/* Gemessen am 21.09.2026: die Bühnenüberschrift trennte Wörter
   ("WIR KOMMEN DA-HIN"), weil Versalien in Montserrat 800 breiter sind als
   die Textspalte. Trennung ist hier falsch, die Überschrift ist kurz genug;
   auf dem Handy bleibt sie erlaubt, dort gibt es keine Alternative. */
@media (min-width: 761px) {
  .hero h1, .seite-hero h1 { hyphens: manual; }
}
/* Die längste Zeile der Bühnenüberschrift ist "UND DANN BLEIBEN WIR." mit
   21 Versalien. Bei 1180 px Bühne und 1.4fr Textspalte stehen dafür 623 px
   zur Verfügung; 2.6rem Montserrat 600 braucht rund 594 px. Wird eines von
   beidem verändert, bricht die Zeile wieder um. Nachmessen, nicht schätzen. */
/* ACHTUNG: in eine Media Query gefasst. Ohne sie stand diese Regel SPÄTER
   im Stylesheet als der Zusammenbruch auf eine Spalte in Abschnitt 10 und
   schlug ihn bei gleicher Spezifität. Ergebnis war am 21.09.2026 eine
   zweispaltige Bühne auf dem Handy: Foto links, Text in einer 150 px
   schmalen Spalte rechts. Der Breitentest fand das nicht, weil nichts
   überlief, sondern alles zusammengedrückt wurde. Nur Hinsehen findet das. */
@media (min-width: 961px) {
  .hero-grid { grid-template-columns: 1.4fr 1fr; }
}
/* Am 21.09.2026 bei 390 px gemessen: die Textspalte ist 342 px breit, die
   längste Zeile der Startseiten-Überschrift ("UND DANN BLEIBEN WIR.") braucht
   bei 31 px Versalien 427 px und wurde getrennt. Bei 22 px sind es 304 px.
   Die Kurve ist so gelegt, dass ab 360 px nichts mehr getrennt wird; bei
   320 px bleibt die Trennung als Netz, sonst liefe das Wort über. */
.hero h1 { font-size: clamp(1.35rem, 2.1vw + .9rem, 2.6rem); }
.seite-hero h1 { font-size: clamp(1.3rem, 2vw + .85rem, 2.65rem); }

/* Gemessen am 21.09.2026: <a> im Kopf war 41,8 px hoch, <button> nur 36,5 px.
   Grund: der Link erbt line-height 1.62 vom body, der Knopf bekommt vom
   Browser "normal". Dadurch saßen Text und Unterstreichung der Menüpunkte
   auf zwei verschiedenen Höhen. */
.nav-punkt > a, .nav-punkt > button { line-height: 1.35; }

/* Gemessen am 360 px am 21.09.2026: "Ohne Verordnungsmanagement" in der
   Überschrift der Gegenüberstellung ragte 9 px über den Rand und schob die
   ganze Seite waagerecht auf. Der Text ist ein anonymes Flex-Kind und hat
   damit min-width:auto, also mindestens die Breite des längsten Worts.
   Der Text steht jetzt in einem span, das sich verkleinern darf. */
.gegen-spalte h3 { flex-wrap: wrap; hyphens: auto; }
.gegen-spalte h3 > span { min-width: 0; overflow-wrap: break-word; }

/* Gemessen bei 320 px am 21.09.2026 (iPhone SE der ersten Reihe):
   zwei lange Komposita sprengten die Spalte. "Verordnungsmanagement" in der
   Leistungskarte, weil der Textteil als Flex-Kind min-width:auto hat, und
   "Berufshaftpflichtversicherung" in der Überschrift einer Rechtsseite.
   Beide brauchen Trennerlaubnis; lang="de" steht auf jeder Seite. */
.leistung > div { min-width: 0; }
.leistung h3, .weg-karte h3, .format h3, .wert h3, .wahl strong,
.textseite h2, .textseite h3, .strahl-inhalt h3, .aufklapp-knopf {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ============================================================
   14  NACHTRAG: Kontrast, am 21.09.2026 an 1512 Textstellen gemessen
   ============================================================ */

/* (1) SCHWER, auf 12 Seiten: "Versorgung anfragen" stand weiss auf weissem
   Knopf. Ursache ist die Kaskade, nicht die Farbwahl: .cta-band a { color:#fff }
   steht SPÄTER im Stylesheet als .btn-hell { color: var(--gruen-tief) } und hat
   dieselbe Spezifität. Gemessen 1,00:1. Zwei Klassen schlagen eine. */
.cta-band .btn-hell { color: var(--gruen-tief); }
.cta-band .btn-hell:hover { color: var(--gruen-nacht); }

/* (2) --gruen-mittel (#578E14) erreicht auf Weiss nur 3,97:1. Als Fläche und
   Rahmen ist das in Ordnung, als Text unter 18,66 px nicht. Die drei Stellen,
   die es als Schriftfarbe nutzten, bekommen --gruen-link (7,4:1). */
.mit-navi h2,
.nav-klapp .klapp-kopf,
.tafel-block h3,
.pfeil-btn { color: var(--gruen-link); }

/* (3) Der Markenpunkt am Satzende ist Teil des Satzes, nicht Dekoration.
   #F88246 erreicht auf hellem Grund 2,54:1, verlangt sind 3:1 für grosse
   Schrift. #D9631A ist derselbe Orangeton, nur tiefer: 3,50:1 auf dem
   Creme-Grund, 3,66:1 auf Weiss. Der reine Zierpunkt in der Pille und im
   Bento bleibt beim hellen Orange, dort trägt er keinen Text. */
.headline .punkt { color: #D9631A; }
.cta-band .headline .punkt,
.abschnitt-tief .headline .punkt,
.zahlen .headline .punkt { color: var(--gruen-leuchte); }

/* (4) Der Verzahnungsring trug weisse Versalien auf #F88246: 2,54:1 bei 11 px.
   Auf --orange-aktion sind es 4,75:1. */
.verzahnung-ring { background: var(--orange-aktion); box-shadow: 0 8px 22px rgba(193, 80, 15, .34); }

/* (5) Ziffer und Anführungszeichen sind Zierrat (aria-hidden) und dürfen leise
   sein. Leise heisst aber gefärbt, nicht durchscheinend: rgba senkt den
   Kontrast unsichtbar mit und macht jede spätere Messung unbrauchbar. */
.wert .nr { color: #DCEBC2; }
.wert:hover .nr { color: #F7C9A8; }
.anfz { color: #AFD473; }

/* ============================================================
   15  OHNE JAVASCRIPT
   Grundlage ist CSS, das Skript verbessert nur. Ohne Skript waren die
   Klappmenüs bisher unerreichbar: ihr Auslöser ist ein <button>, kein Link,
   und die Übersichtsseite eines Zweigs steht nur IN der Klappe.
   ============================================================ */

/* Am Rechner: Überfahren und Tastaturfokus öffnen die Klappe ohne Skript.
   Mit Skript kommen Klick, Escape und das Schliessen beim Wechsel dazu. */
@media (min-width: 961px) {
  .nav-punkt:hover > .nav-klapp,
  .nav-punkt:focus-within > .nav-klapp {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-punkt:hover > button::after,
  .nav-punkt:focus-within > button::after { transform: scaleX(1); }
  .nav-punkt:focus-within .nav-pfeil { transform: rotate(180deg); }
}

/* Auf dem Handy ohne Skript: das Menü steht offen im Fluss, der Hamburger
   verschwindet. Sonst wäre die gesamte Navigation unerreichbar. */
@media (max-width: 960px) {
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .main-nav {
    position: static;
    transform: none;
    visibility: visible;
    inset: auto;
    padding: 0 0 var(--m4);
    max-height: none;
    overflow: visible;
  }
  html:not(.js) .header-inner { flex-wrap: wrap; }
  html:not(.js) .main-nav { flex-basis: 100%; }
  html:not(.js) .nav-klapp { grid-template-rows: 1fr; }
  html:not(.js) .nav-punkt > button { cursor: default; }
}

/* ============================================================
   15b  BAUTEILE FÜR DIE INNENSEITEN (21.09.2026)
   Die Startseite trug Bento, Zahlenband und Stimmen; die Innenseiten
   trugen fünfmal dieselbe weisse Karte. Diese Bauteile geben jeder
   Innenseite eine eigene Gliederung und einen Grund zum Anfassen.
   Alle Maße aus dem 4er-Raster, alle Farben aus den Token oben.
   ============================================================ */

/* ---------- 15b.1 Fall: Text links, gerahmte Zusammenfassung rechts ----------
   Für Tafeln eines Umschalters. Rechts steht immer dasselbe Versprechen
   in derselben Form, damit der Wechsel zwischen den Fällen vergleichbar ist. */
.fall {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--m10);
  align-items: start;
}
.fall-text h3 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--grad-h3);
  color: var(--tinte);
  margin-bottom: var(--m4);
  hyphens: manual;
  overflow-wrap: break-word;
}
.fall-text p { font-size: var(--grad-m); margin-bottom: var(--m4); }
.fall-text p:last-child { margin-bottom: 0; }

.fall-schritt {
  display: flex;
  align-items: center;
  gap: var(--m4);
  margin-top: var(--m6) !important;
  padding: var(--m4) var(--m5);
  border-left: 3px solid var(--gruen);
  background: var(--papier-warm);
  border-radius: 0 var(--bogen-feld) var(--bogen-feld) 0;
  color: var(--tinte);
  font-size: var(--grad-s);
}
.fall-marke {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gruen-dunkel);
  color: #fff;
}
.fall-marke svg { width: 18px; height: 18px; }

.fall-rand {
  border: 1px solid var(--linie-stark);
  border-radius: var(--bogen-karte);
  background: var(--karte-hell);
  padding: var(--m6);
}
.fall-rand .symbol {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #fff;
  color: var(--gruen-dunkel);
  margin-bottom: var(--m4);
}
.fall-rand .symbol svg { width: 23px; height: 23px; }
.fall-rand strong {
  display: block;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tinte);
  margin-bottom: var(--m3);
}
.fall-rand .haken-liste { margin-bottom: 0; }
.fall-rand .weiter { margin-top: var(--m5); }

@media (max-width: 860px) {
  .fall { grid-template-columns: 1fr; gap: var(--m8); }
}

/* ---------- 15b.2 Grosses Symbol in der Aussagekarte ----------
   Die Aussagekarte kannte nur eine Zahl. Wo es nichts zu zählen gibt,
   trägt ein Symbol dieselbe Stelle. */
.symbol-gross {
  width: 72px; height: 72px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--linie-stark);
  color: var(--gruen-dunkel);
}
.symbol-gross svg { width: 34px; height: 34px; }

/* ---------- 15b.3 Zahlensatz: eine Zahl trägt einen Satz ----------
   Auf dem dunklen Band. Anders als das Zahlenband der Startseite steht
   hier EINE Zahl neben einem Gedanken, nicht vier nebeneinander. */
.zahl-satz {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--m12);
  align-items: center;
}
.zahl-satz-zahl {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(3.6rem, 9vw, 7rem);
  line-height: .9;
  color: var(--gruen-leuchte);
  letter-spacing: -.02em;
}
.zahl-satz-text h2 { margin-bottom: var(--m4); }
.zahl-satz-text p { max-width: 54ch; margin-bottom: var(--m5); }

@media (max-width: 860px) {
  .zahl-satz { grid-template-columns: 1fr; gap: var(--m6); }
}

/* ---------- 15b.4 Formatkarten mit Dauer als Träger ----------
   Für die Fortbildungsformate. Die Dauer ist die Entscheidungsgrösse,
   also trägt sie die Karte und nicht die Überschrift. */
.format-tafel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--m10);
  align-items: center;
}
.format-dauer {
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-gross);
  background: linear-gradient(140deg, #FCFEF7, #EEF6DE);
  box-shadow: var(--schatten-gruen);
  padding: var(--m10);
  text-align: center;
}
.format-dauer .zahl {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 4.6rem);
  line-height: 1;
  color: var(--gruen-dunkel);
}
.format-dauer .einheit {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--grad-xs);
  color: var(--tinte);
  margin-top: var(--m2);
}
.format-dauer .zusatz {
  display: block;
  font-family: var(--font-sub);
  font-size: var(--grad-s);
  color: var(--tinte-weich);
  margin-top: var(--m4);
  padding-top: var(--m4);
  border-top: 1px solid var(--linie-stark);
}
.format-tafel h3 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--grad-h3);
  color: var(--tinte);
  margin-bottom: var(--m4);
}
@media (max-width: 860px) {
  .format-tafel { grid-template-columns: 1fr; gap: var(--m8); }
}

/* ---------- 15b.5 Reihe aus Schritten, waagerecht gelesen ----------
   Für Abläufe mit vier Stationen, die KEIN Zeitstrahl sind: hier gibt es
   keine Reihenfolge in der Zeit, sondern vier gleichzeitige Zusagen. */
.zusagen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  overflow: hidden;
}
.zusage {
  background: #fff;
  padding: var(--m8) var(--m6);
  transition: background var(--zeit-wechsel) linear;
}
.zusage:hover { background: var(--papier-warm); }
.zusage .symbol {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--karte-hell);
  color: var(--gruen-dunkel);
  margin-bottom: var(--m4);
}
.zusage .symbol svg { width: 21px; height: 21px; }
.zusage h3 {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tinte);
  margin-bottom: var(--m2);
  line-height: 1.3;
}
.zusage p { font-size: var(--grad-s); }

/* ---------- 15b.5b Säulen: zwei Leitversprechen mit Bild ----------
   Fünf gleich grosse Karten sagen: alles ist gleich wichtig. Die beiden
   Versprechen, wegen derer eine Einrichtung wechselt, bekommen deshalb ein
   Bild und die doppelte Fläche; der Rest steht als Zusagenreihe darunter. */
.saeulen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--m6);
  margin-bottom: var(--m6);
}
.saeule {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  background: #fff;
  overflow: hidden;
  transition: transform var(--zeit-wechsel) var(--kurve-aus),
              box-shadow var(--zeit-wechsel) var(--kurve-aus);
}
.saeule:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); }
.saeule-bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.saeule-bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--kurve-aus);
}
.saeule:hover .saeule-bild img { transform: scale(1.05); }
.saeule-marke {
  position: absolute;
  left: var(--m5); bottom: var(--m5);
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  color: var(--gruen-dunkel);
  box-shadow: var(--schatten-2);
}
.saeule-marke svg { width: 24px; height: 24px; }
.saeule-text { padding: var(--m6); flex: 1 1 auto; }
.saeule-text h3 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.12rem;
  color: var(--tinte);
  margin-bottom: var(--m3);
  line-height: 1.25;
  hyphens: manual;
  overflow-wrap: break-word;
}
.saeule-text p { font-size: var(--grad-s); }
/* Variante ohne Bild: für Versprechen, zu denen es kein ehrliches Foto gibt.
   Am 21.09.2026 stand hier ein Besprechungsraum unter der Überschrift
   "Verordnungsmanagement" - ein echtes Foto, das die Aussage nicht trägt.
   Die Markenfläche sagt nichts Falsches und bricht die Symmetrie bewusst. */
.saeule--marke { background: var(--flaeche-tief); border-color: transparent; }
.saeule--marke .saeule-kopf {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.saeule--marke .saeule-kopf::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 235, 130, .22), transparent 68%);
}
.saeule--marke .saeule-kopf svg { width: 62px; height: 62px; color: var(--gruen-leuchte); position: relative; }
.saeule--marke .saeule-text h3 { color: #fff; }
.saeule--marke .saeule-text p { color: #F2F8E6; }
.saeule--marke:hover { box-shadow: var(--schatten-3); }

@media (max-width: 760px) {
  .saeulen { grid-template-columns: 1fr; }
}

/* ---------- 15b.6 Kontaktwege als Tafeln ----------
   Drei Wege, drei Nummern. Wer den falschen wählt, landet in der falschen
   Warteschleife, deshalb steht je Weg dabei, wofür er gedacht ist. */
.weg-tafel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--m10);
  align-items: start;
}
.weg-nummer {
  display: inline-flex;
  align-items: center;
  gap: var(--m3);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--gruen-dunkel);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--zeit-wechsel) linear;
}
.weg-nummer:hover { border-bottom-color: var(--gruen-dunkel); }
.weg-nummer svg { width: 26px; height: 26px; flex: none; }
.weg-tafel .fall-rand { height: 100%; }
@media (max-width: 860px) {
  .weg-tafel { grid-template-columns: 1fr; gap: var(--m8); }
}

/* ---------- 15b.7 Wertekarten, die sich öffnen lassen ----------
   Sieben Werte sind als Liste zu viel und als Raster gleichförmig.
   Die Karte zeigt den Grundsatz, der Satz dahinter kommt auf Wunsch. */
.wert-liste { border-top: 1px solid var(--linie); }
.wert-zeile { border-bottom: 1px solid var(--linie); }
.wert-zeile .aufklapp-knopf { gap: var(--m5); align-items: center; }
.wert-zeile .wert-nr {
  flex: none;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--gruen);
  width: 36px;
  transition: color var(--zeit-wechsel) linear;
}
.wert-zeile .aufklapp-knopf[aria-expanded="true"] .wert-nr { color: var(--orange-tief); }
.wert-zeile .wert-titel { flex: 1 1 auto; }



/* ============================================================
   15c  WERKZEUGE UND LEBENDIGE FLÄCHEN (22.09.2026)

   Gemessen am 22.09.2026: 19 der 25 Seiten trugen kein Bauteil, das
   man bedienen kann; sieben inhaltliche Seiten trugen kein Bild. Die
   Kostenseiten waren eine schmale Textspalte mit leerer rechter Hälfte.

   Diese Bauteile folgen derselben Regel wie 15b: Interaktion nur dort,
   wo sie eine Frage beantwortet, die der Text offen lässt. Ein
   Schieberegler, der nur hübsch aussieht, ist ein Rückschritt.

   Alle Maße aus dem 4er-Raster, alle Farben aus den Token.
   ============================================================ */

/* ---------- 15c.1 Rechner: eine Zahl, die der Text nicht liefern kann ----------
   „Zwei Prozent Ihres jährlichen Bruttoeinkommens" rechnet niemand im Kopf.
   Der Rechner nimmt nur Zahlen entgegen, die der Besucher selbst eingibt,
   und rechnet ausschließlich die Prozentregel, die im Text daneben steht.
   Er behauptet nicht, die Kasse zu ersetzen — das sagt die Einordnung unter
   dem Ergebnis ausdrücklich. */
.rechner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: var(--m10);
  align-items: start;
  padding: var(--m10);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--bogen-gross);
  box-shadow: var(--schatten-2);
  /* Der Rechner misst SICH SELBST, nicht das Fenster. Am 22.09.2026 stand er
     in der schmalen Spalte der Fristtafel: 370 px breit, zweispaltig, das
     Ergebnis gequetscht — das Fenster war mit 1180 px ja „breit genug".
     Mit container-type entscheidet die Spalte, in der er steht. */
  container-type: inline-size;
  container-name: rechner;
}
@container rechner (max-width: 640px) {
  .rechner { grid-template-columns: 1fr; gap: var(--m8); padding: var(--m6); }
}
/* Netz für Browser ohne Container-Queries und für den Fall, dass der Rechner
   ohne eigenen Container über die ganze Breite steht. */
@media (max-width: 860px) {
  .rechner { grid-template-columns: 1fr; gap: var(--m8); padding: var(--m6); }
}

.rechner-frage {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--grad-h3);
  color: var(--tinte);
  margin: 0 0 var(--m2);
}
.rechner-hinweis {
  font-size: var(--grad-s);
  color: var(--tinte-leise);
  margin: 0 0 var(--m6);
}

.rechner-feld { margin-bottom: var(--m6); }
.rechner-feld > label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--grad-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte);
  margin-bottom: var(--m2);
}

/* Zahl und Regler zeigen denselben Wert und schreiben einander fort. */
.rechner-zahl {
  display: flex;
  align-items: baseline;
  gap: var(--m2);
  border: 1px solid var(--linie-stark);
  border-radius: var(--bogen-feld);
  padding: var(--m3) var(--m4);
  background: var(--papier-warm);
  transition: border-color var(--zeit-tipp) linear, box-shadow var(--zeit-tipp) linear;
}
.rechner-zahl:focus-within {
  border-color: var(--gruen-mittel);
  box-shadow: 0 0 0 3px rgba(145, 199, 61, .28);
}
.rechner-zahl input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--tinte);
  padding: 0;
}
.rechner-zahl input:focus { outline: none; }
/* Die Pfeilchen des Zahlenfeldes stören die Zeile und bringen nichts:
   der Regler daneben macht dieselbe Arbeit besser. */
.rechner-zahl input::-webkit-outer-spin-button,
.rechner-zahl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rechner-zahl input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.rechner-zahl .einheit {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--gruen-mittel);
  flex: 0 0 auto;
}

.rechner-regler {
  width: 100%;
  margin-top: var(--m3);
  accent-color: var(--gruen-mittel);
  cursor: pointer;
}
.rechner-spanne {
  display: flex;
  justify-content: space-between;
  font-size: var(--grad-xs);
  color: var(--tinte-leise);
  margin-top: var(--m1);
}

/* Der Schalter für die chronische Erkrankung: eine Zeile, keine Auswahlliste. */
.rechner-schalter {
  display: flex;
  align-items: flex-start;
  gap: var(--m3);
  padding: var(--m4);
  background: var(--karte-hell);
  border-radius: var(--bogen-feld);
  cursor: pointer;
}
.rechner-schalter input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--gruen-mittel);
  cursor: pointer;
}
.rechner-schalter span {
  font-size: var(--grad-s);
  color: var(--tinte-weich);
  line-height: 1.5;
}
.rechner-schalter strong { color: var(--tinte); display: block; }

/* Das Ergebnis steht auf eigenem Grund, damit es nicht wie Fließtext wirkt. */
.rechner-ergebnis {
  background: var(--flaeche-tief);
  border-radius: var(--bogen-karte);
  padding: var(--m8) var(--m6);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.rechner-ergebnis .marke {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--grad-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ECF9D6;                    /* 4,59:1 am hellsten Verlaufsende */
  display: block;
  margin-bottom: var(--m2);
}
.rechner-ergebnis .betrag {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  line-height: 1.05;
  color: #fff;
  display: block;
  font-variant-numeric: tabular-nums;
}
.rechner-ergebnis .betrag-satz {
  display: block;
  font-size: var(--grad-s);
  color: #F2F8E6;                    /* 4,67:1, wie Abschnitt 16 vorgibt */
  margin-top: var(--m3);
  line-height: 1.55;
}
/* Beim Rechnen kurz aufblitzen, damit sichtbar wird, dass sich etwas tut. */
.rechner-ergebnis .betrag { transition: transform var(--zeit-wechsel) var(--kurve-aus); }
.rechner-ergebnis.frisch .betrag { transform: scale(1.045); }

.rechner-einordnung {
  margin-top: var(--m4);
  font-size: var(--grad-xs);
  color: var(--tinte-leise);
  line-height: 1.6;
}

/* Ohne Skript ist der Rechner nutzlos, aber er darf nicht kaputt dastehen:
   dann verschwindet er, und der Text daneben trägt die Seite allein.
   Der Wähler heisst `html:not(.js)` — `bauen.py` setzt `.js` am Dokument,
   eine Klasse `.kein-js` gibt es hier nicht und würde nie greifen. */
html:not(.js) .rechner { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rechner-ergebnis .betrag { transition: none; }
  .rechner-ergebnis.frisch .betrag { transform: none; }
}


/* ---------- 15c.2 Rechenweg: aus einer Formel werden drei Kacheln ----------
   „10 Euro je Verordnung zuzüglich 10 Prozent des Wertes" steht im Text als
   Halbsatz und geht dort unter. Als drei Glieder mit Rechenzeichen dazwischen
   liest man es in zwei Sekunden. */
.rechenweg {
  display: flex;
  align-items: stretch;
  gap: var(--m3);
  flex-wrap: wrap;
}
.rechenweg-glied {
  flex: 1 1 200px;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  padding: var(--m6) var(--m5);
  text-align: center;
  box-shadow: var(--schatten-1);
}
.rechenweg-glied .gross {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--gruen-mittel);
  line-height: 1.1;
}
.rechenweg-glied .klein {
  display: block;
  font-size: var(--grad-s);
  color: var(--tinte-weich);
  margin-top: var(--m2);
  line-height: 1.5;
}
.rechenweg-zeichen {
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--orange);
  line-height: 1;
  padding: 0 var(--m1);
}
@media (max-width: 720px) {
  .rechenweg { flex-direction: column; }
  .rechenweg-zeichen { align-self: center; padding: var(--m1) 0; }
}


/* ---------- 15c.3 Merkkarte: der eine Satz, der hängen bleiben soll ----------
   Für Aussagen, die rechtlich zählen („Wir dürfen darauf nicht verzichten").
   Bewusst keine Warnfarbe: das ist kein Fehler, sondern eine Tatsache. */
.merk {
  display: flex;
  gap: var(--m5);
  align-items: flex-start;
  padding: var(--m6);
  background: var(--karte-hell);
  border-left: 4px solid var(--gruen-mittel);
  border-radius: 0 var(--bogen-karte) var(--bogen-karte) 0;
}
.merk-zeichen {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  color: var(--gruen-mittel);
}
.merk-zeichen svg { width: 100%; height: 100%; }
.merk p { margin: 0; color: var(--tinte-weich); line-height: 1.65; }
.merk p + p { margin-top: var(--m3); }
.merk strong { color: var(--tinte); }
@media (max-width: 560px) {
  .merk { flex-direction: column; gap: var(--m3); padding: var(--m5); }
}


/* ---------- 15c.4 Zweispaltige Textseite ----------
   Die Kostenseiten standen als 780-px-Spalte links, rechts blieb die halbe
   Fläche leer. Gemessen bei 1440 px: 54 % der Zeile ungenutzt. Hier läuft
   links eine mitlaufende Merkspalte, rechts der Text. Unter 900 px fällt die
   Merkspalte über den Text — sie ist Beiwerk, nicht Voraussetzung. */
.text-paar {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--m16);
  align-items: start;
}
@media (max-width: 900px) {
  .text-paar { grid-template-columns: 1fr; gap: var(--m8); }
}
.text-merk {
  position: sticky;
  top: calc(var(--kopf-hoehe) + var(--m6));
  padding: var(--m6);
  background: var(--papier-warm);
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
}
@media (max-width: 900px) {
  .text-merk { position: static; }
}
.text-merk h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--grad-s);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte);
  margin: 0 0 var(--m4);
}
.text-merk ul { list-style: none; margin: 0; padding: 0; }
.text-merk li {
  font-size: var(--grad-s);
  color: var(--tinte-weich);
  line-height: 1.55;
  padding: var(--m3) 0;
  border-top: 1px solid var(--linie);
}
.text-merk li:first-child { border-top: 0; padding-top: 0; }
.text-merk li strong {
  display: block;
  color: var(--gruen-mittel);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
}


/* ---------- 15c.5 Finder: die Frage, mit der die Leute ankommen ----------
   Die Behandlungsseite sagt selbst: „Die meisten Menschen kommen mit einer
   ärztlichen Verordnung zu uns." Bisher endete diese Frage in einem
   Telefonhinweis. Der Finder filtert die Karten, die ohnehin dastehen —
   er erfindet keinen Inhalt und stellt keine Diagnose, er ordnet nur
   Begriffe den Erklärseiten zu. Was verordnet wird, entscheidet die
   Arztpraxis; das steht unter dem Feld und darf nicht wegfallen.

   Ohne Skript bleibt das Feld verborgen und alle Karten stehen sichtbar. */
.finder { margin-bottom: var(--m12); }
html:not(.js) .finder { display: none; }

.finder-feld {
  display: flex;
  align-items: center;
  gap: var(--m3);
  max-width: 560px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--bogen-pille);
  background: var(--papier);
  padding: var(--m3) var(--m5);
  box-shadow: var(--schatten-1);
  transition: border-color var(--zeit-tipp) linear, box-shadow var(--zeit-tipp) linear;
}
.finder-feld:focus-within {
  border-color: var(--gruen-mittel);
  box-shadow: 0 0 0 3px rgba(145, 199, 61, .28);
}
.finder-feld .lupe { flex: 0 0 auto; width: 20px; height: 20px; color: var(--gruen-mittel); }
.finder-feld .lupe svg { width: 100%; height: 100%; }
.finder-feld input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-text);
  font-size: var(--grad-m);
  color: var(--tinte);
  padding: var(--m1) 0;
}
.finder-feld input:focus { outline: none; }
.finder-feld input::placeholder { color: var(--tinte-leise); }
/* Zurücksetzen erscheint erst, wenn etwas dasteht. */
.finder-leeren {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--tinte-leise);
  font-size: 1.3rem;
  line-height: 1;
  padding: var(--m1) var(--m2);
  cursor: pointer;
  border-radius: var(--bogen-pille);
  visibility: hidden;
}
.finder.gefiltert .finder-leeren { visibility: visible; }
.finder-leeren:hover { color: var(--orange-tief); background: var(--karte-hell); }

/* Schnellwahl: die Kürzel, die tatsächlich auf Verordnungen stehen. */
.finder-kuerzel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m2);
  margin-top: var(--m4);
  align-items: center;
}
.finder-kuerzel .vorsatz {
  font-size: var(--grad-xs);
  color: var(--tinte-leise);
  margin-right: var(--m1);
}
.finder-kuerzel button {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--grad-xs);
  letter-spacing: .04em;
  color: var(--gruen-link);
  background: var(--karte-hell);
  border: 1px solid var(--linie-stark);
  border-radius: var(--bogen-pille);
  padding: var(--m2) var(--m4);
  cursor: pointer;
  transition: background var(--zeit-tipp) linear, color var(--zeit-tipp) linear,
              border-color var(--zeit-tipp) linear;
}
.finder-kuerzel button:hover { background: var(--gruen-leuchte); border-color: var(--gruen-mittel); }
.finder-kuerzel button[aria-pressed="true"] {
  background: var(--gruen-mittel);
  border-color: var(--gruen-mittel);
  color: #fff;
}

.finder-stand {
  margin-top: var(--m4);
  font-size: var(--grad-s);
  color: var(--tinte-weich);
  min-height: 1.5em;
}
.finder-stand strong { color: var(--gruen-mittel); }
.finder-hinweis {
  margin-top: var(--m2);
  font-size: var(--grad-xs);
  color: var(--tinte-leise);
}

/* Eine Karte, die nicht passt, verschwindet — sie wird nicht nur blass.
   Halb sichtbare Treffer sind schlechter als keine. */
.weg-karte[hidden] { display: none !important; }

/* Kein Treffer: ein Satz und der Weg zum Telefon, keine leere Fläche. */
.finder-leer {
  padding: var(--m10) var(--m6);
  text-align: center;
  background: var(--papier-warm);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--bogen-karte);
}
.finder-leer p { margin: 0 0 var(--m3); color: var(--tinte-weich); }
.finder-leer p:last-child { margin-bottom: 0; }


/* ---------- 15c.6 Fristrechner: Zustände statt nur einer Zahl ----------
   Er nutzt die Hülle von 15c.1. Zusätzlich färbt er sich, wenn es eng wird:
   sieben Tage oder weniger warnen, eine abgelaufene Frist steht rot. Die
   Farbe ist hier kein Schmuck, sondern die Aussage. */
.rechner-datum {
  width: 100%;
  border: 1px solid var(--linie-stark);
  border-radius: var(--bogen-feld);
  padding: var(--m3) var(--m4);
  background: var(--papier-warm);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--tinte);
  transition: border-color var(--zeit-tipp) linear, box-shadow var(--zeit-tipp) linear;
}
.rechner-datum:focus {
  outline: none;
  border-color: var(--gruen-mittel);
  box-shadow: 0 0 0 3px rgba(145, 199, 61, .28);
}

/* Das Datum ist länger als ein Geldbetrag: kleinerer Grad, sonst bricht es. */
.rechner-ergebnis .datum {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.2;
  color: #fff;
  display: block;
}

/* Knapp: warmer Grund. Vorbei: der Verlauf weicht einer ruhigen Fläche,
   damit die weisse Schrift sicher über 4,5:1 bleibt — ein Verlauf hat
   einen hellsten Stopp, eine Fläche nicht. */
.frist-knapp .rechner-ergebnis  { background: linear-gradient(160deg, #A24109 0%, #7E3207 100%); }
.frist-vorbei .rechner-ergebnis { background: #8A2B12; }
.frist-knapp .rechner-ergebnis .marke,
.frist-vorbei .rechner-ergebnis .marke { color: #FFE8D8; }
.frist-knapp .rechner-ergebnis .betrag-satz,
.frist-vorbei .rechner-ergebnis .betrag-satz { color: #FFF0E6; }


/* ============================================================
   16  NACHTRAG: Kontrast über Verläufen
   Die erste Kontrastrunde übersprang 457 Stellen, weil dort ein
   Verlauf und keine Farbfläche liegt. Nachgeholt am 21.09.2026:
   je Verlauf den ungünstigsten Farbstopp gegen die Schrift gerechnet.
   Sechs Muster lagen zwischen 4,21 und 4,47 bei verlangten 4,5.
   Nur Farben, keine Maße — diese Regeln dürfen am Dateiende stehen.
   ============================================================ */

/* (1) Fließtext auf dem dunkelgrünen Band: #EAF3DA ergab am hellsten
   Verlaufsende (#4E7B08) 4,41:1. #F2F8E6 ergibt 4,67:1. */
.abschnitt-tief,
.cta-band p,
.zahl span,
.auszeichnungen p,
.abschnitt-tief .weg-karte p { color: #F2F8E6; }

/* (2) Die Pille steht im Hero an dessen grünster Stelle (#EBF5DA):
   --gruen-dunkel ergab dort 4,47:1, --gruen-link ergibt 5,87:1. */
.badge { color: var(--gruen-link); }

/* (3) Der Rahmenknopf ebenda: --orange-aktion ergab 4,21:1,
   --orange-tief ergibt 5,55:1. Die Fläche bleibt --orange-aktion,
   dort steht weisse Schrift auf gefülltem Grund. */
.btn-outline { color: var(--orange-tief); border-color: var(--orange-tief); }
.btn-outline:hover { background: rgba(162, 65, 9, .09); }

/* (4) Der Text der Danke-Seite liegt auf demselben Hero-Grund. */
.danke-text { color: var(--tinte); }

/* (5) Verweise auf dem dunkelgrünen Band, nachgemessen am 21.09.2026.
   --gruen-leuchte (#C8EB82) ergab am hellsten Verlaufsende (#4E7B08) nur
   3,76:1; verlangt sind 4,5:1, weil .weiter mit 13 px unter der Grenze für
   grosse Schrift liegt. #ECF9D6 ergibt 4,59:1 und bleibt grünstichig. */
.abschnitt-tief a { color: #ECF9D6; }

/* Gemessen am 21.09.2026: Eine gesetzte Fuge (&shy;) ist nur ein ZUSÄTZLICHES
   Angebot. Solange hyphens:auto gilt, sucht der Algorithmus weiter eigene
   Stellen und fand in "außerhalb" die Trennung "AUS-SERHALB" — in Versalien
   sichtbar falsch. In Versalüberschriften gelten deshalb nur noch die Fugen,
   die im Text stehen. overflow-wrap bleibt als Netz für den Fall, dass ein
   Wort ohne Fuge doch einmal zu lang wird. */
.fliess h2,
.headline,
.headline span,
.bento-inhalt h3,
.strahl-inhalt h3,
/* Nachgetragen am 22.09.2026: In den Karten des Wegweisers stand
   „Krankengymnas-tik" — der Algorithmus trennte nach der dritten Silbe statt
   an der Fuge des Kompositums. Die Fugen stehen jetzt im Text. */
.weg-karte h3 {
  hyphens: manual;
  overflow-wrap: break-word;
}