/* ===== 1-tokens.css ===== */
/* ==========================================================================
   Design-Tokens — PhysioPlus Lichtenau
   Alle Farben, Schriftgrößen und Abstände der Seite sind hier definiert.
   Wer etwas global ändern will, ändert es hier und nirgends sonst.
   ========================================================================== */

@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit.woff2') format('woff2-variations'),
       url('fonts/outfit.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter.woff2') format('woff2-variations'),
       url('fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Marke ------------------------------------------------------------ */
  --gruen:        #94C85D;  /* Logo-Grün. Nur auf dunklem Grund oder als Fläche. */
  --gruen-tief:   #4B7722;  /* Grün für Text/Links auf hellem Grund (AA-konform) */
  --gruen-dunkel: #3B5F1A;  /* Hover-Zustand */
  --gruen-hell:   #EEF5E3;  /* zarte Flächen */
  --gruen-rand:   #D4E6BB;

  /* --- Flächen ---------------------------------------------------------- */
  --sand:     #FAF9F6;  /* Grundton der Seite: warmes Off-White */
  --sand-2:   #F3F1EA;  /* abgesetzte Sektionen */
  --weiss:    #FFFFFF;
  --linie:    #E4E1D8;

  /* --- Text ------------------------------------------------------------- */
  --tinte:    #1E231F;  /* Fließtext und Überschriften */
  --tinte-2:  #4C554D;  /* Sekundärtext, Bildunterschriften */
  --tinte-3:  #656C66;  /* Metaangaben */

  /* --- Bühne (dunkle Scrollytelling-Sektion) ---------------------------- */
  --buehne:      #191C17;
  --buehne-2:    #232720;
  --buehne-text: #F2F3EF;
  --buehne-text-2: rgba(242, 243, 239, 0.72);

  /* --- Signal (Schmerzpunkt im Scrollytelling) -------------------------- */
  --signal:      #E8734A;
  --signal-weich: rgba(232, 115, 74, 0.22);

  /* --- Typografie ------------------------------------------------------- */
  --schrift-titel: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-text:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Grundgröße bewusst 18px statt 16px — viele unserer Besucher sind älter. */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.125rem;
  --t-md:   1.25rem;
  --t-lg:   clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --t-xl:   clamp(1.75rem, 1.35rem + 1.8vw, 2.625rem);
  --t-2xl:  clamp(2.25rem, 1.55rem + 3.1vw, 3.75rem);
  --t-3xl:  clamp(2.75rem, 1.6rem + 5vw, 5.25rem);

  /* --- Raster und Abstände ---------------------------------------------- */
  --breite:      1200px;
  --breite-eng:  none;
  --lesebreite:  64ch;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);

  --s-1: 0.375rem;
  --s-2: 0.75rem;
  --s-3: 1.25rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 7rem;
  --s-8: 10rem;

  /* --- Formen ----------------------------------------------------------- */
  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 24px;
  --radius-xl: 36px;

  --schatten-1: 0 1px 2px rgba(30, 35, 31, 0.05), 0 2px 8px rgba(30, 35, 31, 0.04);
  --schatten-2: 0 2px 4px rgba(30, 35, 31, 0.05), 0 12px 32px rgba(30, 35, 31, 0.08);
  --schatten-3: 0 8px 24px rgba(30, 35, 31, 0.10), 0 32px 64px rgba(30, 35, 31, 0.12);

  /* --- Bewegung --------------------------------------------------------- */
  --zeit:       260ms;
  --zeit-lang:  600ms;
  --kurve:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --kurve-weich: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Wer Animationen abgeschaltet hat, bekommt keine. Ohne Ausnahme. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===== 2-base.css ===== */
/* ==========================================================================
   Grundlagen — Reset, Typografie, Layout-Primitive
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Damit Sprungmarken nicht unter dem Sticky-Header landen */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--t-base);
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); letter-spacing: -0.03em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); font-weight: 600; }

p { margin: 0 0 var(--s-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--gruen-tief);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--zeit) var(--kurve);
}
a:hover { color: var(--gruen-dunkel); }

/* Fokus muss man sehen können — immer, überall. */
:focus-visible {
  outline: 3px solid var(--gruen-tief);
  outline-offset: 3px;
  border-radius: 2px;
}
.buehne :focus-visible,
.fuss :focus-visible { outline-color: var(--gruen); }

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

ul, ol { margin: 0 0 var(--s-3); padding-left: 1.3em; }
li { margin-bottom: var(--s-1); }

strong, b { font-weight: 600; }

hr {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: var(--s-5) 0;
}

::selection { background: var(--gruen); color: var(--tinte); }


/* --- Layout-Primitive ----------------------------------------------------- */

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

.wrap--eng { max-width: 860px; }
.wrap--weit { max-width: 1440px; }

.abschnitt { padding-block: clamp(3.5rem, 8vw, var(--s-7)); }
.abschnitt--klein { padding-block: clamp(2.5rem, 5vw, var(--s-6)); }
.abschnitt--sand { background: var(--sand-2); }
.abschnitt--weiss { background: var(--weiss); }

.lese { max-width: var(--lesebreite); }
.lese p { font-size: var(--t-md); line-height: 1.7; }

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

/* Sprunglink: erster Tab-Stop auf jeder Seite */
.sprunglink {
  position: absolute;
  top: -100px; left: var(--s-3);
  z-index: 200;
  background: var(--tinte);
  color: var(--weiss);
  padding: var(--s-2) var(--s-3);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 500;
  text-decoration: none;
  transition: top var(--zeit) var(--kurve);
}
.sprunglink:focus { top: 0; color: var(--weiss); }


/* --- Typografische Bausteine ---------------------------------------------- */

.kicker {
  font-family: var(--schrift-titel);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gruen-tief);
  margin: 0 0 var(--s-2);
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.kicker::before {
  content: '';
  width: 1.8em;
  height: 2px;
  background: var(--gruen);
  flex: none;
}
.kicker--zentriert { justify-content: center; }
.buehne .kicker { color: var(--gruen); }

.vorspann {
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--tinte-2);
  max-width: 58ch;
}

.klein {
  font-size: var(--t-sm);
  color: var(--tinte-3);
}


/* --- Buttons -------------------------------------------------------------- */

.btn {
  --btn-bg: var(--gruen-tief);
  --btn-fg: var(--weiss);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid transparent;
  border-radius: 100px;
  font-family: var(--schrift-titel);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--zeit) var(--kurve),
              box-shadow var(--zeit) var(--kurve),
              background-color var(--zeit) var(--kurve);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--schatten-2);
}
.btn:active { transform: translateY(0); }

.btn--hell {
  --btn-bg: var(--gruen);
  --btn-fg: var(--tinte);
}
.btn--rand {
  --btn-bg: transparent;
  --btn-fg: var(--tinte);
  border-color: var(--linie);
}
.btn--rand:hover { border-color: var(--tinte); }
/* Auf dunklem Grund braucht der Umriss-Button helle Schrift. */
.buehne .btn--rand,
.aufruf .btn--rand,
.fuss .btn--rand {
  --btn-fg: var(--buehne-text);
  border-color: rgba(242, 243, 239, 0.32);
}
.buehne .btn--rand:hover,
.aufruf .btn--rand:hover,
.fuss .btn--rand:hover { border-color: var(--buehne-text); }

.btn--gross { min-height: 3.5rem; padding: 1rem 2rem; font-size: var(--t-md); }

.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

/* Textlink mit Pfeil, der beim Hover anzieht */
.pfeil-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--schrift-titel);
  font-weight: 600;
  text-decoration: none;
}
.pfeil-link::after {
  content: '→';
  transition: transform var(--zeit) var(--kurve);
}
.pfeil-link:hover::after { transform: translateX(4px); }


/* --- Bilder --------------------------------------------------------------- */

.bild {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sand-2);
}
.bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bild--hoch { aspect-ratio: 4 / 5; }
.bild--quer { aspect-ratio: 3 / 2; }
.bild--breit { aspect-ratio: 16 / 9; }


/* --- Sanftes Einblenden beim Scrollen ------------------------------------- */

.auftritt {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--zeit-lang) var(--kurve-weich),
              transform var(--zeit-lang) var(--kurve-weich);
}
.auftritt.ist-da { opacity: 1; transform: none; }

/* Ohne JavaScript bleibt nichts unsichtbar. */
.kein-js .auftritt { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .auftritt { opacity: 1; transform: none; }
}

/* Die erste Überschrift eines Lesetexts braucht keinen Abstand nach oben —
   den gibt schon der Abschnitt. */
.lese > h2:first-child { margin-top: 0 !important; }


/* ===== 3-komponenten.css ===== */
/* ==========================================================================
   Komponenten — Kopf, Fuß, Karten, Hero, Öffnungszeiten
   ========================================================================== */

/* --- Statusband ganz oben ------------------------------------------------- */

.statusband {
  background: var(--tinte);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--t-sm);
}
.statusband__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  min-height: 2.75rem;
  padding-block: 0.4rem;
}
.statusband a { color: inherit; text-decoration: none; }
.statusband a:hover { color: var(--gruen); text-decoration: underline; }
.statusband__rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
@media (max-width: 640px) {
  .statusband__rechts .verstecken-mobil { display: none; }
}

/* Live-Status „geöffnet / geschlossen".
   Die Zeile steht von Anfang an im Layout und wird nur eingeblendet — sonst
   ruckt beim Einblenden die ganze Seite nach unten. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 1.6em;
  font-weight: 500;
  opacity: 0;
  transition: opacity var(--zeit) var(--kurve);
}
.status.ist-da { opacity: 1; }
/* Auf schmalen Geräten nur den Kernsatz, damit die Zeile nicht umbricht. */
@media (max-width: 560px) {
  .statusband [data-status-zusatz] { display: none; }
}
.status__punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tinte-3);
  flex: none;
}
.status--offen .status__punkt {
  background: var(--gruen);
  box-shadow: 0 0 0 0 rgba(148, 200, 93, 0.7);
  animation: puls 2.6s var(--kurve-weich) infinite;
}
.status--zu .status__punkt { background: #C9744F; }
@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgba(148, 200, 93, 0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(148, 200, 93, 0); }
  100% { box-shadow: 0 0 0 0 rgba(148, 200, 93, 0); }
}


/* --- Kopfzeile ------------------------------------------------------------ */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 246, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--zeit) var(--kurve),
              box-shadow var(--zeit) var(--kurve);
}
.kopf.ist-gescrollt {
  border-bottom-color: var(--linie);
  box-shadow: 0 1px 20px rgba(30, 35, 31, 0.05);
}
.kopf__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 4.5rem;
}

.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 46px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav a {
  padding: 0.55rem 0.85rem;
  border-radius: 100px;
  font-family: var(--schrift-titel);
  font-size: 1rem;
  font-weight: 500;
  color: var(--tinte);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--zeit) var(--kurve), color var(--zeit) var(--kurve);
}
.nav a:hover { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.nav a[aria-current='page'] {
  background: var(--gruen-hell);
  color: var(--gruen-dunkel);
  font-weight: 600;
}

.kopf__aktion { display: flex; align-items: center; gap: var(--s-2); flex: none; }

/* Aufklappbares Untermenü Therapie */
.nav__gruppe { position: relative; }
.nav__schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.55rem 0.85rem;
  background: none;
  border: 0;
  border-radius: 100px;
  font-family: var(--schrift-titel);
  font-size: 1rem;
  font-weight: 500;
  color: var(--tinte);
  cursor: pointer;
  transition: background-color var(--zeit) var(--kurve);
}
.nav__schalter:hover { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.nav__schalter.ist-aktiv { background: var(--gruen-hell); color: var(--gruen-dunkel); font-weight: 600; }
.nav__ersatz[aria-current='page'] { background: var(--gruen-hell); color: var(--gruen-dunkel); font-weight: 600; }
.nav__schalter svg {
  width: 0.7em; height: 0.7em;
  transition: transform var(--zeit) var(--kurve);
}
.nav__schalter[aria-expanded='true'] svg { transform: rotate(180deg); }

.nav__klapp {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 300px;
  padding: var(--s-3);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-3);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--zeit) var(--kurve),
              transform var(--zeit) var(--kurve),
              visibility var(--zeit);
}
/* Lange Listen (elf Therapieverfahren) zweispaltig */
.nav__klapp--breit { min-width: 460px; grid-template-columns: 1fr 1fr; }
.nav__klapp.ist-offen {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__klapp a {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  white-space: normal;
}
.nav__klapp a span {
  font-family: var(--schrift-text);
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--tinte-3);
}
.nav__klapp a:hover span { color: var(--gruen-dunkel); }

/* Burger */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: none;
  border: 1px solid var(--linie);
  border-radius: 100px;
  cursor: pointer;
}
.burger__striche { position: relative; width: 20px; height: 2px; }
.burger__striche::before,
.burger__striche::after,
.burger__striche span {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--tinte);
  border-radius: 2px;
  transition: transform var(--zeit) var(--kurve), opacity var(--zeit) var(--kurve);
}
.burger__striche::before { top: -6px; }
.burger__striche span { top: 0; }
.burger__striche::after { top: 6px; }
.burger[aria-expanded='true'] .burger__striche::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__striche span { opacity: 0; }
.burger[aria-expanded='true'] .burger__striche::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav, .kopf__aktion .btn { display: none; }
  .burger { display: inline-flex; }
}

/* --- Rückfallebene ohne JavaScript ---------------------------------------
   Das Klappmenü und das mobile Menü brauchen JavaScript. Ist keines da,
   zeigen wir stattdessen die Navigation offen an — umgebrochen, wenn der
   Platz nicht reicht. Niemand soll ohne Navigation dastehen. */

.nav__ersatz { display: none; }
.kein-js .nav__schalter { display: none; }
.kein-js .nav__ersatz { display: inline-block; }
.kein-js .burger { display: none !important; }
.kein-js .mobilmenue { display: none; }

@media (max-width: 1080px) {
  .kein-js .kopf__inner { flex-wrap: wrap; padding-block: var(--s-2); }
  .kein-js .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    order: 3;
    padding-bottom: var(--s-2);
  }
  .kein-js .kopf__aktion .btn { display: inline-flex; }
}

/* Mobiles Menü */
.mobilmenue {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--sand);
  padding: var(--s-4) var(--gutter) var(--s-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--zeit-lang) var(--kurve), visibility var(--zeit-lang);
}
.mobilmenue.ist-offen { transform: none; visibility: visible; }
.mobilmenue__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
  min-height: 4.5rem;
}
.mobilmenue__liste { list-style: none; margin: 0; padding: 0; }
.mobilmenue__liste > li { border-bottom: 1px solid var(--linie); }
.mobilmenue__liste a {
  display: block;
  padding: 0.9rem 0;
  font-family: var(--schrift-titel);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--tinte);
  text-decoration: none;
}
.mobilmenue__liste a:hover { color: var(--gruen-tief); }
/* Die elf Therapieseiten würden das Menü sonst dreimal so lang machen. */
.mobilmenue__falt summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
  font-family: var(--schrift-titel);
  font-size: var(--t-md);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.mobilmenue__falt summary::-webkit-details-marker { display: none; }
.mobilmenue__falt summary::after {
  content: '';
  width: 0.65rem; height: 0.65rem;
  border-right: 2px solid var(--gruen-tief);
  border-bottom: 2px solid var(--gruen-tief);
  transform: rotate(45deg) translateY(-25%);
  transition: transform var(--zeit) var(--kurve);
}
.mobilmenue__falt[open] summary::after { transform: rotate(-135deg) translateY(-25%); }

.mobilmenue__unter { list-style: none; margin: 0 0 var(--s-3); padding: 0 0 0 var(--s-3); }
.mobilmenue__unter li { border: 0; }
.mobilmenue__unter a {
  font-size: var(--t-base);
  font-weight: 400;
  padding: 0.5rem 0;
  color: var(--tinte-2);
}
.mobilmenue .btn-reihe { margin-top: var(--s-4); }
.mobilmenue .btn { width: 100%; }


/* --- Hero ----------------------------------------------------------------- */

.hero { position: relative; padding-block: clamp(2.5rem, 6vw, var(--s-6)) 0; }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--s-5); }
}
@media (min-width: 1180px) {
  .hero__grid { gap: var(--s-6); }
}

/* Etwas kleiner als die größte Stufe: So bleibt die Zeile „Das Zentrum für"
   zusammen und die Überschrift braucht nur zwei Zeilen. */
.hero h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 3.5rem); margin-bottom: var(--s-3); }
.hero h1 em {
  font-style: normal;
  color: var(--gruen-tief);
  /* Der Unterstrich wächst beim Laden an — eine kleine Geste, kein Spektakel. */
  background-image: linear-gradient(var(--gruen), var(--gruen));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 0.32em;
  animation: unterstrich 1.1s var(--kurve) 0.5s forwards;
}
@keyframes unterstrich { to { background-size: 100% 0.32em; } }
/* Ab Tablet steht der hervorgehobene Teil auf einer eigenen Zeile: zwei Zeilen
   statt drei, und der Unterstrich läuft genau unter dem Text. */
@media (min-width: 700px) {
  .hero h1 em { display: block; width: fit-content; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 em { background-size: 100% 0.32em; animation: none; }
}

.hero__text > p { font-size: var(--t-md); color: var(--tinte-2); max-width: 46ch; }
/* Auf dem Handy sonst dreizeilig: enger gesetzt passt die Zeile in zwei. */
@media (max-width: 560px) {
  .hero .kicker { font-size: var(--t-xs); letter-spacing: 0.08em; }
}
.hero .btn-reihe { margin-top: var(--s-4); }
/* Etwas schmaler als sonst, damit beide Buttons am Desktop nebeneinander passen */
.hero .btn--gross { padding-inline: 1.5rem; }

.hero__bild {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--schatten-3);
}
/* Auf dem Handy quadratisch und oben ausgerichtet: Porträtfotos behalten so den Kopf */
@media (max-width: 899px) {
  .hero__bild { aspect-ratio: 1 / 1; }
  .hero .hero__bild img { object-position: 50% 0%; }
}
.hero__bild img {
  width: 100%; height: 100%; object-fit: cover;
  /* Auf dem Handy ist der Ausschnitt quer: oben ausrichten, damit Köpfe drin bleiben */
  object-position: 50% 20%;
}

/* Siegel, das über der Bildecke sitzt */
.hero__siegel {
  position: absolute;
  left: calc(var(--s-3) * -1);
  bottom: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 17rem;
  padding: var(--s-2) var(--s-3);
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten-2);
}
.hero__siegel img { width: 54px; height: auto; border-radius: var(--radius-sm); }
.hero__siegel p { font-size: var(--t-xs); line-height: 1.4; color: var(--tinte-2); margin: 0; }
.hero__siegel strong { display: block; color: var(--tinte); font-size: var(--t-sm); }
@media (max-width: 560px) { .hero__siegel { left: var(--s-2); max-width: 14rem; } }

/* Kennzahlenleiste unter dem Hero */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--linie);
}
.kennzahl__wert {
  display: block;
  font-family: var(--schrift-titel);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--tinte);
  letter-spacing: -0.03em;
}
.kennzahl__wert span { color: var(--gruen-tief); }
.kennzahl__text { font-size: var(--t-sm); color: var(--tinte-2); margin: var(--s-1) 0 0; }


/* --- Karten --------------------------------------------------------------- */

.raster {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
.raster--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }

/* Bento: eine große Kachel führt, die übrigen ordnen sich darum.
   Die Zellenzahl geht genau auf, es bleibt nirgends ein Loch. */
.bento {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > :first-child,
  .bento > :last-child { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento > :first-child { grid-column: span 2; grid-row: span 2; }
  .bento > :last-child { grid-column: auto; }
}

/* Die große Kachel: Das Foto füllt, was der Text übrig lässt. */
.karte--gross .karte__inhalt { flex: none; }
.karte--gross h3 { font-size: var(--t-lg); }
.karte--gross p { font-size: var(--t-base); }
@media (min-width: 1000px) {
  .karte--gross .karte__bild { aspect-ratio: auto; flex: 1; min-height: 240px; }
}
/* Hochformat-Foto im Querformat-Ausschnitt: oben ausrichten, sonst fehlen die Köpfe. */
.karte--gross .karte__bild img { object-position: 50% 18%; }

/* Abschnittskopf: eine Spalte, nicht Überschrift links und Kleingedrucktes rechts. */
.abschnitt__kopf { max-width: 52ch; margin-bottom: var(--s-5); }

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-lg);
  transition: transform var(--zeit) var(--kurve),
              box-shadow var(--zeit) var(--kurve),
              border-color var(--zeit) var(--kurve);
}
.karte:hover {
  transform: translateY(-3px);
  border-color: var(--gruen-rand);
  box-shadow: var(--schatten-2);
}
.karte__kuerzel {
  align-self: flex-start;
  margin-bottom: var(--s-2);
  padding: 0.2rem 0.6rem;
  background: var(--gruen-hell);
  border-radius: 100px;
  font-family: var(--schrift-titel);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gruen-dunkel);
}
.karte h3 { margin-bottom: var(--s-2); font-size: var(--t-md); }
.karte p { font-size: var(--t-sm); color: var(--tinte-2); line-height: 1.6; }
.karte__fuss { margin-top: auto; padding-top: var(--s-3); }
/* Ganze Karte klickbar, ohne den Link-Text zu verlieren */
.karte__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

.karte--bild { padding: 0; overflow: hidden; }
.karte--bild .karte__bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand-2); }
.karte--bild .karte__bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--zeit-lang) var(--kurve);
}
.karte--bild:hover .karte__bild img { transform: scale(1.04); }
.karte--bild .karte__inhalt { display: flex; flex-direction: column; flex: 1; padding: var(--s-3) var(--s-4) var(--s-4); }
/* Ohne Foto trägt der innere Block die Spalte, damit „Mehr erfahren" unten bleibt. */
.karte:not(.karte--bild) > .karte__inhalt { display: flex; flex-direction: column; flex: 1; }


/* --- Versprechen (drei Gründe) -------------------------------------------- */

.versprechen {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  counter-reset: v;
}
.versprechen__punkt { counter-increment: v; }
.versprechen__punkt::before {
  content: counter(v, decimal-leading-zero);
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--schrift-titel);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gruen-tief);
}
.versprechen__punkt h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.versprechen__punkt p { color: var(--tinte-2); font-size: var(--t-base); }


/* --- Öffnungszeiten ------------------------------------------------------- */

.zeiten {
  border: 1px solid var(--linie);
  border-radius: var(--radius-lg);
  background: var(--weiss);
  overflow: hidden;
}
.zeiten__kopf {
  padding: var(--s-3) var(--s-4);
  background: var(--gruen-hell);
  border-bottom: 1px solid var(--gruen-rand);
}
.zeiten__kopf h3 { margin: 0; font-size: var(--t-md); }
.zeiten__liste { list-style: none; margin: 0; padding: var(--s-2) var(--s-4) var(--s-4); }
.zeiten__liste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linie);
  margin: 0;
}
.zeiten__liste li:last-child { border-bottom: 0; }
.zeiten__tag { font-weight: 500; }
.zeiten__zeit { font-variant-numeric: tabular-nums; color: var(--tinte-2); text-align: right; }
.zeiten__liste li[data-heute] { color: var(--gruen-dunkel); }
.zeiten__liste li[data-heute] .zeiten__tag { font-weight: 700; }
.zeiten__liste li[data-heute] .zeiten__zeit { color: var(--gruen-dunkel); font-weight: 600; }
.zeiten__liste li[data-heute] .zeiten__tag::after {
  content: 'heute';
  margin-left: 0.6em;
  padding: 0.1rem 0.45rem;
  background: var(--gruen);
  border-radius: 100px;
  font-family: var(--schrift-titel);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tinte);
  text-transform: uppercase;
}
.zeiten__hinweis { padding: 0 var(--s-4) var(--s-4); font-size: var(--t-sm); color: var(--tinte-3); }


/* --- Kontaktblock --------------------------------------------------------- */

.kontaktliste { list-style: none; margin: 0; padding: 0; }
.kontaktliste li {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  padding: var(--s-2) 0;
  margin: 0;
}
.kontaktliste svg { width: 1.3em; height: 1.3em; flex: none; margin-top: 0.15em; color: var(--gruen-tief); }
.kontaktliste a { text-decoration: none; font-weight: 500; }
.kontaktliste a:hover { text-decoration: underline; }
.kontaktliste span { display: block; font-size: var(--t-sm); color: var(--tinte-3); }


/* --- Handlungsaufforderung ------------------------------------------------ */

.aufruf {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, var(--s-6));
  background: var(--tinte);
  border-radius: var(--radius-xl);
  color: var(--buehne-text);
  text-align: center;
}
.aufruf::before {
  /* weicher grüner Lichtschein, rein dekorativ */
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  width: min(780px, 120%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(148, 200, 93, 0.22) 0%, transparent 62%);
  pointer-events: none;
}
.aufruf > * { position: relative; }
.aufruf h2 { color: var(--buehne-text); margin-bottom: var(--s-3); }
.aufruf p { color: var(--buehne-text-2); max-width: 52ch; margin-inline: auto; font-size: var(--t-md); }
.aufruf .btn-reihe { justify-content: center; margin-top: var(--s-4); }


/* --- Fußzeile ------------------------------------------------------------- */

.fuss {
  background: var(--tinte);
  color: var(--buehne-text-2);
  padding-block: var(--s-6) var(--s-4);
  font-size: var(--t-sm);
}
.fuss__grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  padding-bottom: var(--s-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.fuss__grid > div:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .fuss__grid > div:first-child { grid-column: auto; } }
.fuss h4 {
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--buehne-text);
  margin-bottom: var(--s-3);
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.5rem; }
.fuss a { color: var(--buehne-text-2); text-decoration: none; }
.fuss a:hover { color: var(--gruen); text-decoration: underline; }
.fuss__logo { margin-bottom: var(--s-3); }
.fuss__logo img { height: 42px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-top: var(--s-4);
  font-size: var(--t-xs);
  color: var(--tinte-3);
}
.fuss__unten a { color: var(--tinte-3); }
.fuss__sozial { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.fuss__sozial a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  transition: background-color var(--zeit) var(--kurve), border-color var(--zeit) var(--kurve);
}
.fuss__sozial a:hover { background: var(--gruen); border-color: var(--gruen); color: var(--tinte); }
.fuss__sozial svg { width: 1.2em; height: 1.2em; }


/* --- Seitenkopf der Unterseiten ------------------------------------------- */

.seitenkopf { padding-block: clamp(2.5rem, 6vw, var(--s-6)) var(--s-4); }
.seitenkopf h1 { max-width: 20ch; }
.seitenkopf .vorspann { margin-top: var(--s-3); font-size: var(--t-lg); line-height: 1.5; }

.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  list-style: none;
  margin: 0 0 var(--s-3);
  padding: 0;
  font-size: var(--t-sm);
  color: var(--tinte-3);
}
.brotkrumen li { margin: 0; display: flex; align-items: center; gap: 0.5em; }
.brotkrumen li:not(:last-child)::after { content: '/'; color: var(--linie); }
.brotkrumen a { color: var(--tinte-3); text-decoration: none; }
.brotkrumen a:hover { color: var(--gruen-tief); text-decoration: underline; }


/* --- Inhaltstypen auf Detailseiten ---------------------------------------- */

.detail {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 940px) {
  .detail { grid-template-columns: 1.4fr 1fr; gap: var(--s-6); }
  .detail__rand { position: sticky; top: 6.5rem; }
}

.nutzen { list-style: none; margin: 0; padding: 0; }
.nutzen li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--s-2);
  line-height: 1.55;
}
.nutzen li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 1.1rem; height: 0.55rem;
  border-left: 2.5px solid var(--gruen-tief);
  border-bottom: 2.5px solid var(--gruen-tief);
  transform: rotate(-45deg);
}

.faltliste { border-top: 1px solid var(--linie); }
.faltliste details {
  border-bottom: 1px solid var(--linie);
}
.faltliste summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  font-family: var(--schrift-titel);
  font-size: var(--t-md);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faltliste summary::-webkit-details-marker { display: none; }
.faltliste summary::after {
  content: '';
  flex: none;
  width: 0.7rem; height: 0.7rem;
  border-right: 2px solid var(--gruen-tief);
  border-bottom: 2px solid var(--gruen-tief);
  transform: rotate(45deg) translateY(-25%);
  transition: transform var(--zeit) var(--kurve);
}
.faltliste details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.faltliste details > div { padding-bottom: var(--s-3); color: var(--tinte-2); max-width: var(--lesebreite); }

/* Schrittfolge (Ablauf einer Behandlung) */
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.schritte li {
  position: relative;
  counter-increment: s;
  padding: 0 0 var(--s-4) var(--s-5);
  margin: 0;
}
.schritte li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  background: var(--weiss);
  border: 2px solid var(--gruen);
  border-radius: 100px;
  font-family: var(--schrift-titel);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--gruen-dunkel);
}
.schritte li::after {
  content: '';
  position: absolute;
  left: 1.125rem; top: 2.5rem; bottom: 0.5rem;
  width: 2px;
  background: var(--gruen-rand);
}
.schritte li:last-child { padding-bottom: 0; }
.schritte li:last-child::after { display: none; }
.schritte h3 { font-size: var(--t-base); margin-bottom: var(--s-1); padding-top: 0.3rem; }
.schritte p { color: var(--tinte-2); font-size: var(--t-base); }

/* Team */
.team { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.team__person { text-align: center; }
.team__mono {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-bottom: var(--s-3);
  background: var(--gruen-hell);
  border-radius: 100px;
  font-family: var(--schrift-titel);
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--gruen-dunkel);
  letter-spacing: 0.02em;
}
.team__person h3 { font-size: var(--t-base); margin-bottom: 0.15rem; }
.team__person p { font-size: var(--t-sm); color: var(--tinte-2); margin: 0; }
.team__person .klein { display: block; margin-top: 0.3rem; }

/* Hinweiskasten */
.hinweis {
  padding: var(--s-3) var(--s-4);
  background: var(--gruen-hell);
  border-left: 3px solid var(--gruen);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-base);
}
.hinweis p:last-child { margin-bottom: 0; }

/* Formular */
.feld { margin-bottom: var(--s-3); }
.feld label { display: block; margin-bottom: 0.4rem; font-weight: 500; font-size: var(--t-sm); }
.feld input, .feld select, .feld textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--tinte);
}
.feld textarea { min-height: 8rem; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--gruen-tief); }
.feld--zwei { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .feld--zwei { grid-template-columns: 1fr 1fr; } }


/* --- Band: breiter Hinweis mit Aktion (Bewegungstyp-Test) ---------------- */

.band {
  display: grid;
  gap: var(--s-4);
  align-items: center;
  padding: clamp(1.75rem, 4vw, var(--s-5));
  background: var(--gruen-hell);
  border: 1px solid var(--gruen-rand);
  border-radius: var(--radius-xl);
}
@media (min-width: 800px) { .band { grid-template-columns: 1.4fr 1fr; } }
.band h2 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.band p { color: var(--tinte-2); max-width: 48ch; }
.band__aktion { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
@media (min-width: 800px) { .band__aktion { align-items: flex-end; text-align: right; } }


/* --- Große Zahl (Kassenzuschuss) ----------------------------------------- */

.zahl-kasten {
  padding: clamp(1.75rem, 4vw, var(--s-5));
  background: var(--tinte);
  border-radius: var(--radius-xl);
  color: var(--buehne-text);
}
.zahl-kasten__wert {
  margin: 0 0 var(--s-2);
  font-family: var(--schrift-titel);
  font-size: clamp(3rem, 2rem + 5vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gruen);
}
.zahl-kasten__text { font-size: var(--t-md); line-height: 1.55; }
.zahl-kasten .klein { color: var(--buehne-text-2); margin-top: var(--s-3); }


/* --- Karten mit aufklappbarem Mehr --------------------------------------- */

.karte__mehr { margin-top: auto; padding-top: var(--s-2); }
.karte__mehr summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--schrift-titel);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--gruen-tief);
  cursor: pointer;
  list-style: none;
}
.karte__mehr summary::-webkit-details-marker { display: none; }
.karte__mehr summary::after { content: '+'; font-size: 1.1em; transition: transform var(--zeit) var(--kurve); }
.karte__mehr[open] summary::after { transform: rotate(45deg); }
.karte__mehr p { margin-top: var(--s-2); }

.kursgruppe { font-size: var(--t-lg); margin: var(--s-5) 0 var(--s-3); }
.kursgruppe:first-of-type { margin-top: var(--s-2); }

/* Externe Links sichtbar als solche kennzeichnen */
.pfeil-link--extern::after { content: '↗'; }
.pfeil-link--extern:hover::after { transform: translate(2px, -2px); }


/* --- Der Weg in vier Schritten (ErgoPlus) --------------------------------
   Am Desktop nebeneinander mit einer Linie, die sich beim Hineinscrollen
   von links nach rechts zieht. Auf dem Handy untereinander. */

.weg {
  position: relative;
  display: grid;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.weg__schritt { position: relative; margin: 0; padding-left: 3.5rem; }
.weg__nr {
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  background: var(--sand);
  border: 2px solid var(--gruen);
  border-radius: 100px;
  font-family: var(--schrift-titel);
  font-weight: 700;
  color: var(--gruen-dunkel);
}
.weg__schritt h3 { font-size: var(--t-md); margin: 0.45rem 0 var(--s-1); }
.weg__schritt p { color: var(--tinte-2); font-size: var(--t-base); }

@media (min-width: 900px) {
  .weg { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
  .weg__schritt { padding-left: 0; padding-top: 4.25rem; }
  .weg__nr { width: 3.25rem; height: 3.25rem; font-size: var(--t-md); }
  .weg::before {
    content: '';
    position: absolute;
    left: 1.6rem; right: 12%;
    top: 1.6rem;
    height: 2px;
    background: var(--gruen);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.4s var(--kurve-weich) 0.2s;
  }
  .weg.ist-da::before, .kein-js .weg::before { transform: scaleX(1); }
}
/* Der Container selbst soll beim Auftritt nicht rutschen — nur die Linie zieht. */
.weg.auftritt { transform: none; }
@media (prefers-reduced-motion: reduce) { .weg::before { transform: scaleX(1); } }

/* Lange Aufzählungen zweispaltig */
@media (min-width: 700px) {
  .nutzen--spalten { columns: 2; column-gap: var(--s-5); }
  .nutzen--spalten li { break-inside: avoid; }
}


/* --- Formulare ----------------------------------------------------------- */

/* Lockfeld für Bots: aus dem sichtbaren Bereich geschoben, nicht display:none,
   weil manche Bots versteckte Felder daran erkennen. */
.lockfeld {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.haken {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  line-height: 1.5;
  cursor: pointer;
}
.haken input {
  flex: none;
  width: 1.3rem; height: 1.3rem;
  margin-top: 0.1rem;
  accent-color: var(--gruen-tief);
}

.feld input[type='file'] {
  min-height: auto;
  padding: 0.75rem;
  background: var(--weiss);
  font-size: var(--t-sm);
  cursor: pointer;
}
.feld input[type='file']::file-selector-button {
  margin-right: 0.9rem;
  padding: 0.5rem 1rem;
  background: var(--gruen-hell);
  border: 1px solid var(--gruen-rand);
  border-radius: 100px;
  font-family: var(--schrift-titel);
  font-weight: 600;
  color: var(--gruen-dunkel);
  cursor: pointer;
}

.formular button[disabled] { opacity: 0.65; cursor: wait; transform: none; }

.formular__meldung { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--tinte-2); }
.formular__meldung:empty { display: none; }
.formular__meldung--fehler {
  padding: var(--s-2) var(--s-3);
  background: #FBEAE4;
  border-left: 3px solid #C9744F;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: #6B2A12;
  font-weight: 500;
}

.formular__erfolg {
  padding: var(--s-5) var(--s-4);
  background: var(--gruen-hell);
  border: 1px solid var(--gruen-rand);
  border-radius: var(--radius-lg);
  text-align: center;
}
.formular__erfolg:focus { outline: none; }
.formular__erfolg-titel {
  font-family: var(--schrift-titel);
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--gruen-dunkel);
  margin-bottom: var(--s-2);
}


/* --- Partner (Kooperationen) --------------------------------------------- */

.partner { flex-direction: row; align-items: center; gap: var(--s-4); }
.partner__logo {
  flex: none;
  width: 96px; height: 96px;
  object-fit: contain;
}
.partner h3 { margin-bottom: var(--s-1); }

@media (min-width: 700px) {
  .versprechen--zwei { grid-template-columns: repeat(2, 1fr); }
}


/* --- Hero als Doppelbild (Startseite) ------------------------------------
   Oben das Foto aus dem Trainingsbereich, unten links versetzt eine
   Behandlung. Der helle Rahmen um das untere Foto trennt die beiden. */

.hero__duo { position: relative; aspect-ratio: 4 / 5; }
.hero__duo-oben,
.hero__duo-unten {
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--schatten-3);
}
.hero__duo-oben { top: 0; right: 0; width: 78%; height: 68%; }
.hero__duo-unten {
  bottom: 0; left: 0; width: 60%; height: 50%;
  border: 6px solid var(--sand);
  border-radius: calc(var(--radius-xl) + 6px);
}
.hero__duo img { width: 100%; height: 100%; object-fit: cover; }
.hero__duo-oben img { object-position: 50% 15%; }

@media (max-width: 899px) {
  .hero__duo { aspect-ratio: 1 / 1; max-width: 520px; margin-inline: auto; width: 100%; }
}


/* --- Hero: sanfte Tiefe beim Scrollen ------------------------------------- */
/* Scroll-gesteuerte Animation, komplett ohne JavaScript. Browser, die das
   nicht können, zeigen die Fotos einfach still. */
@supports (animation-timeline: view()) {
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .hero__duo-oben,
    .hero__duo-unten {
      animation: schweben linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    .hero__duo-unten { animation-name: schweben-gegen; }
  }
}
@keyframes schweben      { from { transform: translateY(10px); } to { transform: translateY(-16px); } }
@keyframes schweben-gegen { from { transform: translateY(-8px); } to { transform: translateY(14px); } }


/* ===== 4-story.css ===== */
/* ==========================================================================
   Der Weg zurück in die Bewegung — Scrollytelling
   --------------------------------------------------------------------------
   Aufbau: links eine Bühne, die beim Scrollen stehen bleibt, rechts vier
   Kapitel, die vorbeilaufen. Der rote Faden ist ein Bewegungsradius, der
   sich von einem engen Winkel auf den vollen Radius öffnet.

   Ohne JavaScript stehen alle Kapitel lesbar untereinander (.kein-js).
   ========================================================================== */

.buehne {
  position: relative;
  background: var(--buehne);
  color: var(--buehne-text);
  /* Die Sektion hellt im letzten Kapitel auf — das ist der eigentliche Effekt. */
  transition: background-color 900ms var(--kurve-weich),
              color 900ms var(--kurve-weich);
}
.buehne h2, .buehne h3 { color: inherit; }

/* Letztes Kapitel: der Besucher scrollt sich aus dem Dunkel heraus. */
.buehne[data-kapitel='4'] {
  background: var(--sand);
  color: var(--tinte);
}
.buehne[data-kapitel='4'] .story__kapitel p { color: var(--tinte-2); }
.buehne[data-kapitel='4'] .story__nr { color: var(--tinte-3); }
.buehne[data-kapitel='4'] .story__fortschritt { background: var(--linie); }
.buehne[data-kapitel='4'] .story__marke { border-color: var(--linie); }
.buehne[data-kapitel='4'] .rom__grund { stroke: rgba(30, 35, 31, 0.22); }
.buehne[data-kapitel='4'] .rom__skala { stroke: rgba(30, 35, 31, 0.16); }
.buehne[data-kapitel='4'] .rom__wert { fill: var(--tinte); }
.buehne[data-kapitel='4'] .rom__einheit { fill: var(--tinte-3); }
/* Im hellen Zustand braucht der Umriss-Button wieder dunkle Schrift,
   sonst steht weiß auf hellem Grund. */
.buehne[data-kapitel='4'] .btn--rand {
  --btn-fg: var(--tinte);
  border-color: var(--linie);
}
.buehne[data-kapitel='4'] .btn--rand:hover { border-color: var(--tinte); }

.buehne__intro {
  padding-block: clamp(3rem, 8vw, var(--s-7)) 0;
  text-align: center;
}
.buehne__intro h2 { max-width: 18ch; margin-inline: auto; }
.buehne__intro p {
  max-width: 50ch;
  margin-inline: auto;
  color: var(--buehne-text-2);
  font-size: var(--t-md);
  transition: color 900ms var(--kurve-weich);
}
.buehne[data-kapitel='4'] .buehne__intro p { color: var(--tinte-2); }


/* --- Grundgerüst ---------------------------------------------------------- */

.story {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding-block: var(--s-5) var(--s-6);
}
@media (min-width: 900px) {
  .story {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    padding-block: var(--s-6) var(--s-8);
  }
}

/* Die Bühne bleibt stehen, während der Text vorbeizieht. */
.story__buehne {
  position: sticky;
  top: 5rem;
  z-index: 1;
  align-self: start;
}
@media (min-width: 900px) {
  .story__buehne {
    /* Ohne feste Höhe springt das Sticky-Element beim Kapitelwechsel. */
    height: min(74vh, 640px);
    /* Senkrecht mittig festhalten, aber nie unter die Kopfzeile. Bewusst ohne
       transform: Eine Verschiebung würde auch wirken, solange die Bühne noch
       nicht klebt, und sie dann über die Überschrift darüber schieben. */
    top: max(5.5rem, calc((100vh - min(74vh, 640px)) / 2));
  }
}
@media (max-width: 899px) {
  .story__buehne {
    top: 4.75rem;
    height: min(46vh, 380px);
    margin-inline: calc(var(--gutter) * -1);
    /* Schmal liegt die Bühne über dem Text: Der Text läuft darunter durch,
       statt über das Foto. Sonst ist er im hellen letzten Kapitel kaum lesbar. */
    z-index: 3;
  }
}
/* Zu flache Fenster vertragen kein Sticky — dann einfach stapeln. */
@media (max-height: 520px) {
  .story__buehne { position: static; height: auto; }
}

.story__rahmen {
  position: relative;
  height: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--buehne-2);
  transition: background-color 900ms var(--kurve-weich);
}
.buehne[data-kapitel='4'] .story__rahmen { background: var(--gruen-hell); }
@media (max-width: 899px) {
  .story__rahmen { border-radius: 0; }
}


/* --- Fotoebene ------------------------------------------------------------ */

.story__fotos { position: absolute; inset: 0; }
.story__foto {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1100ms var(--kurve-weich), transform 1600ms var(--kurve-weich);
}
.story__foto img { width: 100%; height: 100%; object-fit: cover; }
.story__foto.ist-da { opacity: 1; transform: scale(1); }
/* Ohne JavaScript wechselt nichts — dann bleibt das erste Foto stehen,
   damit die Bühne nicht leer ist. */
.kein-js .story__foto:first-child { opacity: 1; transform: none; }

/* Dunkler Verlauf über dem Foto, damit die Grafik lesbar bleibt */
.story__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg,
    rgba(25, 28, 23, 0.82) 0%,
    rgba(25, 28, 23, 0.52) 48%,
    rgba(25, 28, 23, 0.72) 100%);
  transition: opacity 900ms var(--kurve-weich);
}
.buehne[data-kapitel='4'] .story__foto::after { opacity: 0.12; }


/* --- Bewegungsradius ------------------------------------------------------ */

.rom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Grundlinie: die Ausgangsstellung, von der aus gemessen wird */
.rom__grund {
  stroke: rgba(242, 243, 239, 0.3);
  stroke-width: 2;
  stroke-dasharray: 5 7;
  transition: stroke 900ms var(--kurve-weich);
}

/* Skalenstriche alle 15 Grad */
.rom__skala {
  stroke: rgba(242, 243, 239, 0.22);
  stroke-width: 2;
  transition: stroke 900ms var(--kurve-weich);
}

/* Der Bogen selbst: stroke-dasharray zählt dank pathLength in Grad. */
.rom__bogen {
  fill: none;
  stroke: var(--gruen);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: var(--rom, 26) 360;
  transition: stroke-dasharray 1100ms var(--kurve-weich),
              stroke 900ms var(--kurve-weich);
}
/* Auf hellem Grund trägt das Logo-Grün zu wenig — hier das dunklere nehmen. */
.buehne[data-kapitel='4'] .rom__bogen,
.buehne[data-kapitel='4'] .rom__zeiger-linie { stroke: var(--gruen-tief); }
.buehne[data-kapitel='4'] .rom__zeiger-kopf { fill: var(--gruen-tief); }
.buehne[data-kapitel='4'] .rom__flaeche { stroke: var(--gruen-tief); }
/* Ein Kreis mit halbem Radius und einer stroke-width in Höhe des vollen Radius
   füllt genau die Scheibe vom Drehpunkt bis zum Bogen — so entsteht der Sektor
   ohne einen Pfad, der bei jedem Kapitel neu berechnet werden müsste. */
.rom__flaeche {
  stroke: var(--gruen);
  stroke-dasharray: var(--rom, 26) 360;
  opacity: 0.13;
  transition: stroke-dasharray 1100ms var(--kurve-weich),
              opacity 900ms var(--kurve-weich);
}
.buehne[data-kapitel='1'] .rom__flaeche { opacity: 0.06; }
.buehne[data-kapitel='4'] .rom__flaeche { opacity: 0.2; }

/* Der Zeiger, der die erreichte Stellung markiert */
.rom__zeiger {
  transform-box: view-box;
  transform-origin: 240px 380px;
  transform: rotate(calc(var(--rom, 26) * -1deg));
  transition: transform 1100ms var(--kurve-weich);
}
.rom__zeiger-linie { stroke: var(--gruen); stroke-width: 3; stroke-linecap: round; }
.rom__zeiger-kopf { fill: var(--gruen); }

.rom__drehpunkt { fill: var(--buehne-text); }
.buehne[data-kapitel='4'] .rom__drehpunkt { fill: var(--tinte); }

/* Schmerzpunkt — pulsiert nur im ersten Kapitel */
.rom__schmerz { opacity: 0; transition: opacity 700ms var(--kurve-weich); }
.buehne[data-kapitel='1'] .rom__schmerz { opacity: 1; }
.rom__schmerz-kern { fill: var(--signal); }
.rom__schmerz-hof {
  fill: var(--signal);
  opacity: 0.3;
  transform-box: view-box;
  transform-origin: 240px 380px;
  animation: schmerz 2.4s var(--kurve-weich) infinite;
}
@keyframes schmerz {
  0%   { transform: scale(0.6); opacity: 0.45; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rom__schmerz-hof { animation: none; opacity: 0.3; }
}

/* Gradanzeige */
.rom__tafel {
  fill: rgba(25, 28, 23, 0.58);
  transition: fill 900ms var(--kurve-weich);
}
.buehne[data-kapitel='4'] .rom__tafel { fill: rgba(250, 249, 246, 0.82); }

.rom__wert {
  fill: var(--buehne-text);
  font-family: var(--schrift-titel);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.03em;
  transition: fill 900ms var(--kurve-weich);
}
.rom__einheit {
  fill: var(--buehne-text-2);
  font-family: var(--schrift-titel);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: fill 900ms var(--kurve-weich);
}


/* --- Textspalte ----------------------------------------------------------- */

.story__text { position: relative; z-index: 2; }

.story__kapitel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78vh;
  padding-block: var(--s-4);
}
@media (max-width: 899px) {
  .story__kapitel { min-height: 62vh; }
}
.story__kapitel:last-child { min-height: 70vh; }

.story__nr {
  font-family: var(--schrift-titel);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--buehne-text-2);
  margin-bottom: var(--s-2);
  transition: color 900ms var(--kurve-weich);
}
.story__kapitel h3 {
  font-size: var(--t-xl);
  margin-bottom: var(--s-3);
  max-width: 16ch;
}
.story__kapitel p {
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--buehne-text-2);
  max-width: 44ch;
  transition: color 900ms var(--kurve-weich);
}

/* Kapitel treten langsam hervor, wenn sie an der Reihe sind. */
@media (min-width: 900px) {
  .story__kapitel { opacity: 0.28; transition: opacity 700ms var(--kurve-weich); }
  .story__kapitel.ist-aktiv { opacity: 1; }
  .kein-js .story__kapitel { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .story__kapitel { opacity: 1 !important; }
}

.story__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  align-self: flex-start;
  margin-top: var(--s-4);
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  border: 1px solid rgba(242, 243, 239, 0.22);
  border-radius: 100px;
  font-size: var(--t-sm);
  transition: border-color 900ms var(--kurve-weich);
}
.story__marke b {
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  background: var(--gruen);
  border-radius: 100px;
  color: var(--tinte);
  font-family: var(--schrift-titel);
  font-size: var(--t-xs);
  font-weight: 700;
}

.story__kapitel .btn-reihe { margin-top: var(--s-4); }


/* --- Fortschrittsanzeige -------------------------------------------------- */

.story__fortschritt {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: rgba(242, 243, 239, 0.14);
  border-radius: 3px;
  transition: background-color 900ms var(--kurve-weich);
}
.story__fortschritt i {
  display: block;
  width: 100%;
  height: var(--anteil, 0%);
  background: var(--gruen);
  border-radius: 3px;
  transition: height 300ms linear;
}
@media (max-width: 899px) { .story__fortschritt { display: none; } }
@media (min-width: 900px) {
  .story__text {
    padding-left: var(--s-4);
    /* Polster, damit die Bühne während des letzten Kapitels stehen bleibt:
       Das Sticky-Element klebt nur so lange, wie seine Rasterzeile reicht —
       und die ist so hoch wie diese Textspalte. */
    padding-bottom: 22vh;
  }
}


/* ===== 5-einwilligung.css ===== */
/* ==========================================================================
   Einwilligung: Banner, Einstellungen, Platzhalter für externe Inhalte
   --------------------------------------------------------------------------
   „Alle akzeptieren“ und „Nur notwendige“ sehen bewusst gleich aus. Eine
   Einwilligung ist nur wirksam, wenn Ablehnen genauso leicht ist wie Zustimmen.
   ========================================================================== */

/* --- Banner beim ersten Besuch ------------------------------------------- */

.einwilligung {
  position: fixed;
  z-index: 120;
  left: var(--gutter);
  bottom: var(--gutter);
  width: min(26rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--s-4);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-xl);
  box-shadow: var(--schatten-3);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--tinte-2);
  animation: einwilligung-rein 500ms var(--kurve-weich) both;
}
.einwilligung[hidden] { display: none; }
@keyframes einwilligung-rein {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .einwilligung { animation: none; }
}

.einwilligung__titel {
  margin-bottom: var(--s-2);
  font-family: var(--schrift-titel);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--tinte);
}
.einwilligung__titel::before {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.55em;
  vertical-align: 0.1em;
  background: var(--gruen);
  border-radius: 50%;
}

.einwilligung__knoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.einwilligung__knoepfe .btn {
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  font-size: var(--t-sm);
}

.einwilligung__mehr,
.fuss__knopf {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.einwilligung__mehr {
  display: block;
  margin: var(--s-3) auto 0;
  min-height: 2.75rem;
  color: var(--tinte-2);
}
.einwilligung__mehr:hover,
.fuss__knopf:hover { color: var(--tinte); }
.fuss .fuss__knopf:hover { color: var(--weiss); }
.kein-js .fuss__knopf { display: none; }

/* Auf schmalen Bildschirmen über die volle Breite, aber flach */
@media (max-width: 559px) {
  .einwilligung {
    left: var(--s-2);
    right: var(--s-2);
    bottom: var(--s-2);
    width: auto;
    padding: var(--s-3);
  }
  .einwilligung__mehr { margin-top: var(--s-1); }
}


/* --- Fenster mit den Einstellungen --------------------------------------- */

.einstellungen {
  width: min(34rem, calc(100vw - 2 * var(--s-3)));
  max-height: calc(100vh - 2 * var(--s-3));
  padding: 0;
  background: var(--weiss);
  color: var(--tinte-2);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--schatten-3);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.einstellungen::backdrop {
  background: rgba(30, 35, 31, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.einstellungen__innen { padding: var(--s-4); }

.einstellungen__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.einstellungen__kopf h2 {
  font-size: var(--t-lg);
  color: var(--tinte);
}
.einstellungen__zu {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.5rem -0.5rem 0 0;
  background: none;
  border: 1px solid var(--linie);
  border-radius: 50%;
  color: var(--tinte);
  cursor: pointer;
}
.einstellungen__zu svg { width: 1.1rem; height: 1.1rem; }
.einstellungen__zu:hover { border-color: var(--tinte); }

.einstellungen__liste {
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie);
}
.einstellungen__dienst { border-bottom: 1px solid var(--linie); }
.einstellungen__dienst label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-3);
  cursor: pointer;
}
.einstellungen__dienst strong {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--schrift-titel);
  font-size: var(--t-base);
  color: var(--tinte);
}
.einstellungen__dienst .klein { display: block; }


/* --- Schalter (Checkbox als Kippschalter) --------------------------------- */

.schalter {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 3.25rem;
  height: 1.9rem;
  margin: 0;
  background: #C9CCC5;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color var(--zeit) var(--kurve);
}
.schalter::after {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--weiss);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform var(--zeit) var(--kurve);
}
.schalter:checked { background: var(--gruen-tief); }
.schalter:checked::after { transform: translateX(1.35rem); }
.schalter:disabled { cursor: default; opacity: 0.55; }
.schalter:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }


/* --- Instagram-Abschnitt und Platzhalter ---------------------------------- */

.insta {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}
@media (min-width: 900px) {
  .insta { grid-template-columns: 1fr 1.15fr; gap: var(--s-6); }
}
.insta__text { max-width: 44ch; }

/* Die Box ist immer gleich hoch, ob Platzhalter oder geladen: kein Springen.
   Sichtbar sind der Profilkopf und etwa zwei Reihen Beiträge, der Rest lässt
   sich im Rahmen scrollen. */
.extern {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 560px;
  justify-self: center;
  overflow: hidden;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-xl);
  box-shadow: var(--schatten-2);
}
.extern__inhalt iframe {
  height: 520px;
  height: calc(8.25rem + 67cqi);
}
/* Der Platzhalter darf wachsen, falls der Text auf kleinen Bildschirmen mehr
   Platz braucht als die Instagram-Ansicht später. */
.extern__platzhalter {
  min-height: 520px;
  min-height: calc(8.25rem + 67cqi);
}
.extern__inhalt iframe {
  display: block;
  width: 100%;
  border: 0;
}
.ist-geladen .extern__platzhalter { display: none; }

.extern__platzhalter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  background:
    radial-gradient(circle at 20% 15%, rgba(148, 200, 93, 0.18), transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(148, 200, 93, 0.14), transparent 50%),
    var(--sand);
}
.extern__platzhalter .klein { max-width: 34ch; color: var(--tinte-2); }
.extern__platzhalter .btn-reihe { margin-top: var(--s-2); justify-content: center; }
.extern__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--s-1);
  background: var(--weiss);
  border-radius: 50%;
  box-shadow: var(--schatten-1);
  color: var(--gruen-tief);
}
.extern__icon svg { width: 1.6rem; height: 1.6rem; }
.extern__titel {
  line-height: 1.25;
  font-family: var(--schrift-titel);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--tinte);
}
.extern__alternativ { margin-top: var(--s-1); }


/* ===== 6-dunkel.css ===== */
/* ==========================================================================
   Dunkles Design
   --------------------------------------------------------------------------
   Wird nur eingebunden, wenn in werk/marken.py DESIGN = 'dunkel' steht. Die
   helle Fassung bleibt darunter vollständig erhalten: DESIGN = 'hell' setzen,
   neu bauen, fertig.

   Der Großteil passiert über die Farb-Tokens. Darunter folgen die Stellen, an
   denen eine Farbe im hellen Design eine feste Rolle hatte (etwa „Tinte“ als
   dunkler Hintergrund der Fußzeile) und deshalb eigens gesetzt werden muss.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Marke: Auf Schwarz trägt das Logo-Grün selbst, für Links und Knöpfe */
  --gruen:        #94C85D;
  --gruen-tief:   #94C85D;
  --gruen-dunkel: #B4DC88;  /* Hover: auf Dunkel heller statt dunkler */
  --gruen-hell:   #1A2215;  /* zarte grüne Flächen */
  --gruen-rand:   #34452A;

  /* Flächen: warmes Schwarz statt kaltem Grau */
  --sand:     #0F110E;  /* Grundton der Seite */
  --sand-2:   #151813;  /* abgesetzte Sektionen */
  --weiss:    #1B1E19;  /* Karten, Kästen, Felder */
  --linie:    #2B3028;

  /* Text */
  --tinte:    #EEF0EA;
  --tinte-2:  #B7BDB2;
  --tinte-3:  #969D92;

  /* Bühne: noch eine Spur tiefer als die Seite */
  --buehne:   #090A08;
  --buehne-2: #121510;

  --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --schatten-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
  --schatten-3: 0 8px 24px rgba(0, 0, 0, 0.5), 0 32px 64px rgba(0, 0, 0, 0.55);
}

/* Die Tiefe der Seite: ein kaum sichtbarer grüner Schimmer oben */
body {
  background:
    radial-gradient(ellipse 80% 50% at 85% -10%, rgba(148, 200, 93, 0.07), transparent 60%),
    var(--sand);
  background-attachment: fixed;
}

::selection { background: var(--gruen); color: #0F110E; }


/* --- Flächen, die im hellen Design „Tinte“ als Hintergrund hatten -------- */

.statusband { background: #070806; border-bottom: 1px solid var(--linie); }
.fuss { background: #070806; border-top: 1px solid var(--linie); }
.fuss__logo img { filter: none; opacity: 1; }
.fuss .fuss__knopf:hover { color: var(--tinte); }

.aufruf,
.zahl-kasten {
  background:
    radial-gradient(ellipse 70% 90% at 50% 120%, rgba(148, 200, 93, 0.16), transparent 70%),
    var(--weiss);
  border: 1px solid var(--linie);
}

.sprunglink { background: var(--gruen); color: #0F110E; }
.sprunglink:focus { color: #0F110E; }

/* Kopfzeile: dunkles Milchglas */
.kopf { background: rgba(15, 17, 14, 0.82); }
.kopf.ist-gescrollt { box-shadow: 0 1px 0 var(--linie), 0 8px 30px rgba(0, 0, 0, 0.45); }


/* --- Grün als Fläche: Schrift darauf muss dunkel sein -------------------- */

.btn { --btn-fg: #0F110E; }
.btn--hell { --btn-fg: #0F110E; }
.btn--rand { --btn-fg: var(--tinte); }
.fuss__sozial a:hover { color: #0F110E; }
.story__marke b { color: #0F110E; }

/* Unterstrich der Hauptüberschrift: grüne Schrift auf dunklerem Grünband */
.hero h1 em {
  background-image: linear-gradient(rgba(148, 200, 93, 0.26), rgba(148, 200, 93, 0.26));
}


/* --- Einzelne Bausteine --------------------------------------------------- */

/* Hinweis-Kasten (z. B. rechtliche Hinweise) */
.formular__meldung--fehler {
  background: rgba(201, 116, 79, 0.12);
  border-left-color: #C9744F;
  color: #F0C3AE;
}

/* Bilder wirken auf Schwarz sonst heller als gewollt */
.hero__duo-unten { border-color: var(--sand); }

/* Schalter im Einwilligungsfenster */
.schalter { background: #3A4036; }
.schalter::after { background: var(--tinte); }
.schalter:checked::after { background: #0F110E; }


/* --- Scrollytelling ------------------------------------------------------- */
/* Auf der hellen Seite kippte Kapitel 4 von Dunkel nach Hell. Auf der dunklen
   Seite bleibt es dunkel, dafür leuchtet am Ende das Grün auf. */

.buehne[data-kapitel='4'] {
  background:
    radial-gradient(ellipse 70% 60% at 30% 60%, rgba(148, 200, 93, 0.14), transparent 70%),
    var(--buehne);
  color: var(--buehne-text);
}
.buehne[data-kapitel='4'] .story__kapitel p,
.buehne[data-kapitel='4'] .buehne__intro p { color: var(--buehne-text-2); }
.buehne[data-kapitel='4'] .story__nr { color: var(--gruen); }
.buehne[data-kapitel='4'] .story__fortschritt { background: rgba(242, 243, 239, 0.14); }
.buehne[data-kapitel='4'] .story__marke { border-color: rgba(148, 200, 93, 0.45); }
.buehne[data-kapitel='4'] .story__rahmen { background: var(--buehne-2); }
.buehne[data-kapitel='4'] .story__foto::after { opacity: 0.55; }
.buehne[data-kapitel='4'] .rom__grund { stroke: rgba(242, 243, 239, 0.3); }
.buehne[data-kapitel='4'] .rom__skala { stroke: rgba(242, 243, 239, 0.22); }
.buehne[data-kapitel='4'] .rom__wert { fill: var(--buehne-text); }
.buehne[data-kapitel='4'] .rom__einheit { fill: var(--buehne-text-2); }
.buehne[data-kapitel='4'] .rom__tafel { fill: rgba(9, 10, 8, 0.62); }
.buehne[data-kapitel='4'] .rom__drehpunkt { fill: var(--buehne-text); }
.buehne[data-kapitel='4'] .rom__flaeche { opacity: 0.24; }
.buehne[data-kapitel='4'] .btn--rand {
  --btn-fg: var(--buehne-text);
  border-color: rgba(242, 243, 239, 0.32);
}