/* =========================================================================
   KompetenzTEAM KJP — Gestaltungssystem

   Gestaltungssprache uebernommen aus der bestehenden Seite Haus der Therapie
   (`01_Aktive-Kunden/Katja-Udolph-Haus-der-Therapie/src/_shared/site.css`
   und `hdt.css`), auf Anweisung von Sebastian am 07.09.2026. Uebernommen:
   cremefarbener Papiergrund, abwechselnd getoente Abschnitte, zweifarbige
   Fraunces-Ueberschrift mit kursivem Akzentwort, Kicker aus kurzem Strich
   und gesperrten Versalien, Faktenchips, Knoepfe mit sichtbarer Unterkante,
   handschriftliche Randnotizen, Notizzettel mit Klebeband.

   NICHT uebernommen ist die Farbe: dort Marine und Orange, hier die Vorgabe
   aus dem KJP-Konzept, aus dem Logo gemessen (Petrol #4EACAC, Violett
   #644183, Altrosa #D8CCCC). Ebenfalls nicht uebernommen der harte Radius
   von 3 px: das Konzept verlangt ausdruecklich abgerundete Ecken. In der
   Vorlage sind Knoepfe und Chips ohnehin gerundet, nur Karten sind kantig.

   Kontraste sind mit tools/kontrast-gate.py geprueft.
   ========================================================================= */

:root {
  --petrol-100: #E6F3F3;
  --petrol-200: #C4E3E3;
  --petrol-400: #4EACAC;
  --petrol-600: #2A8585;
  --petrol-700: #1F6F6F;
  --petrol-900: #124F4F;

  --lila-100: #F1ECF5;
  --lila-200: #DCCFE6;
  --lila-400: #9A7BB5;
  --lila-600: #7A55A0;
  --lila-700: #644183;

  --creme:    #FBF8F3;
  --creme-2:  #F6F0E7;
  --nude-50:  #FBF7F6;
  --nude-100: #F5EEEB;
  --nude-200: #EFE4E0;
  --nude-300: #E3D2CD;
  --papier:   #FFFFFF;

  --tinte:      #23262B;
  --tinte-weich:#565D66;
  /* 25.09.2026 von #6E767F abgedunkelt: der alte Ton kam nur auf Weiss ueber
     4.5:1, stand aber auf Creme (Brotkrumen 4.35:1) und in der Fusszeile auf
     Creme-2 (4.06:1). Das Kontrast-Gate hatte ihn nur auf Weiss gemessen. */
  --tinte-leise:#666E77;

  --weiss: #FFFFFF;
  --linie: #E7DCD2;
  --linie-stark: #D6C7C2;

  --r-s:  8px;
  --r-m:  14px;
  --r-l:  20px;
  --r-xl: 28px;
  --r-pille: 999px;

  --schatten-s: 0 1px 2px rgba(35, 38, 43, .05);
  --schatten-m: 0 4px 16px rgba(35, 38, 43, .06);
  --schatten-l: 0 12px 40px rgba(35, 38, 43, .09);

  --breite: 1180px;
  --breite-schmal: 760px;
  --luft: clamp(1.25rem, 4.5vw, 3.25rem);

  --schrift-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* 13.09.2026: von Fraunces auf Source Serif 4 gewechselt. Katja Udolph wollte
     "etwas weniger verschnoerkelt", und praxis-udolph.de benutzt dieselbe
     Kombination - der Verbund sah aus wie ihre Einzelpraxis. Source Serif hat
     ruhigere Serifen und geringeren Strichkontrast, bleibt aber eine Serife und
     traegt damit den Papiercharakter weiter. Vergleich: /dashboard/schriften */
  --schrift-titel: 'Source Serif 4', 'Fraunces', Georgia, serif;
  --schrift-hand: 'Caveat', 'Segoe Script', cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: clamp(1rem, .96rem + .22vw, 1.075rem);
  line-height: 1.72;
  color: var(--tinte);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.14;
  color: var(--tinte);
  margin: 0 0 .5em;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 1.4rem + 3.1vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .55vw, 1.45rem); }
h4 { font-size: 1.075rem; font-family: var(--schrift-text); font-weight: 700; }

/* Zweifarbige Ueberschrift wie in der Vorlage. */
h1 em, h2 em { font-style: italic; color: var(--lila-700); font-weight: 600; }
.punkt { color: var(--petrol-700); }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--petrol-700); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--petrol-900); }
::selection { background: var(--petrol-400); color: #fff; }

:focus-visible { outline: 3px solid var(--lila-700); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--petrol-900); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r-s) 0;
  z-index: 999; text-decoration: none;
}
.skip:focus { left: 0; }

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

section { padding-block: clamp(3rem, 7vw, 6.5rem); }
section.eng { padding-block: clamp(2.25rem, 5vw, 4rem); }

.flaeche-nude   { background: var(--nude-100); }
.flaeche-nude2  { background: var(--nude-200); }
.flaeche-lila   { background: var(--lila-100); }
.flaeche-petrol { background: var(--petrol-100); }
.flaeche-creme  { background: var(--creme-2); }
.flaeche-papier { background: var(--papier); }

.mitte { text-align: center; }
.mitte .abschnitt__kopf { margin-inline: auto; }

.abschnitt__kopf { max-width: 58ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.abschnitt__kopf p { color: var(--tinte-weich); font-size: 1.075em; }

/* Kicker: kurzer Strich plus gesperrte Versalien. */
.augbraue {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--schrift-text);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--petrol-700);
  margin-bottom: .9rem;
}
.augbraue::before {
  content: ""; flex: none; width: 26px; height: 2px;
  background: var(--petrol-400); border-radius: 2px;
}
.augbraue--lila { color: var(--lila-700); }
.augbraue--lila::before { background: var(--lila-400); }
.mitte .augbraue { justify-content: center; }

.hand {
  font-family: var(--schrift-hand); font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  color: var(--lila-700); line-height: 1.3; margin: 0;
}

/* Ankuendigungsleiste, aus der Vorlage. */
.leiste {
  background: var(--petrol-900); color: #fff;
  font-size: .875rem; text-align: center;
  padding: .55rem var(--luft); line-height: 1.5;
}
.leiste b { font-weight: 700; }
.leiste::before {
  content: ""; display: inline-block;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--petrol-400); margin-right: .55rem; vertical-align: middle;
}

.kopf { background: var(--creme); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 60; }
.kopf__zeile { display: flex; align-items: center; gap: 1rem; min-height: 76px; padding-block: .6rem; }

.marke { display: flex; align-items: center; gap: .75rem; text-decoration: none; margin-right: auto; min-width: 0; }
.marke img { width: auto; height: 54px; flex: none; }
.marke__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.marke__name { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.1rem; color: var(--tinte); letter-spacing: -.015em; }
.marke__slogan { font-size: .68rem; color: var(--petrol-700); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: .1rem; }
.nav a {
  position: relative; display: inline-block;
  padding: .68rem .7rem; border-radius: var(--r-s);
  color: var(--tinte-weich); text-decoration: none;
  font-size: .93rem; font-weight: 600;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute;
  left: .7rem; right: .7rem; bottom: .35rem; height: 2px;
  background: var(--petrol-400); border-radius: 2px;
  transform: scaleX(0); transition: transform .18s ease;
}
.nav a:not(.btn):hover { color: var(--petrol-900); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav a[aria-current="page"]:not(.btn) { color: var(--petrol-900); }
.nav a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); }

/* .nav a ist spezifischer als .btn. Befund Astra, 07.09.2026. */
.nav a.btn { display: inline-flex; color: var(--weiss); margin-left: .5rem; }

.nav__schalter {
  display: none; align-items: center; gap: .5rem;
  background: var(--papier); border: 1px solid var(--linie-stark);
  border-radius: var(--r-pille); padding: .55rem .95rem; min-height: 44px;
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--tinte); cursor: pointer;
}

@media (max-width: 1000px) {
  .nav__schalter { display: inline-flex; flex: none; }
  .nav {
    position: absolute; inset-inline: var(--luft); top: calc(100% + .5rem);
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: var(--papier); border: 1px solid var(--linie);
    border-radius: var(--r-m); padding: .6rem; box-shadow: var(--schatten-l);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: .8rem 1rem; }
  .nav a:not(.btn)::after { display: none; }
  .nav a.btn { justify-content: flex-start; margin-left: 0; margin-top: .35rem; }
  .marke__slogan { display: none; }
}

@media (max-width: 420px) {
  .marke img { height: 36px; }
  .marke { gap: .5rem; }
  .marke__name { font-size: .96rem; }
  .nav__schalter span { display: none; }
  .nav__schalter { padding: .55rem .7rem; }
  .kopf__zeile { min-height: 64px; gap: .55rem; }
}

/* Knoepfe mit sichtbarer Unterkante, aus der Vorlage. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: var(--r-s);
  border: 1px solid var(--petrol-900);
  background: linear-gradient(180deg, var(--petrol-700) 0%, var(--petrol-900) 100%);
  color: var(--weiss);
  font: inherit; font-weight: 700; font-size: .96rem;
  text-decoration: none; cursor: pointer; min-height: 48px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 0 0 var(--petrol-900), 0 6px 14px -4px rgba(18,79,79,.38);
  transition: transform .16s ease, box-shadow .16s ease;
}
.btn:hover {
  color: var(--weiss); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 0 0 var(--petrol-900), 0 10px 20px -6px rgba(18,79,79,.42);
}
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(0,0,0,.12), 0 1px 0 0 var(--petrol-900); }
.btn svg { flex: none; }

.btn--lila {
  background: linear-gradient(180deg, var(--lila-700) 0%, #4E3268 100%);
  border-color: #4E3268;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 0 0 #4E3268, 0 6px 14px -4px rgba(78,50,104,.38);
}

/* background muss ausdruecklich zurueck auf transparent, sonst erbt der
   Umriss den Verlauf von .btn: petrolfarbener Text auf petrolfarbenem
   Grund. Genau diese Falle ist in der Vorlage kommentiert. */
.btn--rand {
  background: transparent; color: var(--petrol-700);
  border: 1px solid var(--petrol-600);
  box-shadow: 0 2px 0 0 var(--petrol-200);
}
.btn--rand:hover { background: var(--petrol-100); color: var(--petrol-900); box-shadow: 0 3px 0 0 var(--petrol-200); }

.btn--gross { padding: 1rem 1.9rem; font-size: 1.02rem; min-height: 54px; }

.btn-reihe { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.mitte .btn-reihe { justify-content: center; }
.btn-reihe--mitte { justify-content: center; margin-top: 1.75rem; }
.btn-reihe--mitte-l { justify-content: center; margin-top: 2rem; }

@media (max-width: 560px) {
  .btn { padding: .8rem 1.1rem; text-align: center; }
  .btn--gross { padding: .9rem 1.2rem; font-size: .98rem; }
  .btn-reihe { width: 100%; }
  .btn-reihe > .btn { flex: 1 1 100%; }
}

.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.mitte .chips { justify-content: center; }
.chip, .ort {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--papier); border: 1px solid var(--linie-stark);
  border-radius: var(--r-pille); padding: .48rem 1rem;
  font-size: .9rem; font-weight: 600; color: var(--tinte);
}
.chip svg, .ort svg { color: var(--petrol-600); flex: none; }
.chip--tint { background: var(--petrol-100); border-color: var(--petrol-200); }
.orte { display: flex; flex-wrap: wrap; gap: .55rem; }
.mitte .orte { justify-content: center; }

.hero {
  position: relative;
  background:
    radial-gradient(ellipse at 82% 0%, rgba(78,172,172,.13) 0, transparent 58%),
    radial-gradient(ellipse at 0% 100%, rgba(100,65,131,.07) 0, transparent 55%),
    var(--creme);
  padding-block: clamp(2.5rem, 5.5vw, 4.5rem) clamp(2.25rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--linie);
}

/* Das Logo steht schon in der Kopfzeile. Es darf den Einstieg nicht
   beherrschen, sonst sind die drei Wege erst nach dem Scrollen sichtbar.
   Befund Honey, 07.09.2026. Deshalb 1.35fr zu .65fr statt haelftig, und
   unter 900 px faellt der Notizzettel ganz weg. */
.hero__gitter {
  display: grid; grid-template-columns: 1.35fr .65fr;
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
}
@media (max-width: 900px) {
  .hero__gitter { grid-template-columns: 1fr; }
  .hero__bild { display: none; }
}

.hero h1 { margin-bottom: .3em; }
.hero__lead {
  font-size: clamp(1.05rem, .98rem + .45vw, 1.22rem);
  color: var(--tinte-weich); max-width: 52ch; margin-bottom: 1.4rem;
}

/* Notizzettel mit Klebeband, aus der Vorlage. */
.hero__bild {
  position: relative; background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  box-shadow: var(--schatten-l); transform: rotate(-1.2deg);
}
.hero__bild::before {
  content: ""; position: absolute; top: -11px; left: 50%;
  width: 104px; height: 22px;
  transform: translateX(-50%) rotate(1.6deg);
  background: rgba(232,220,196,.85);
  border: 1px solid rgba(203,184,154,.5); border-radius: 2px;
}
.hero__marke {
  display: block; text-align: center;
  font-family: var(--schrift-hand); font-weight: 600;
  color: var(--lila-700); font-size: 1.2rem; margin-top: .6rem;
}

.wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.2vw, 1.5rem); }
@media (max-width: 880px) { .wege { grid-template-columns: 1fr; } }

/* Rasterkinder haben von sich aus min-width: auto; ein langes Wort zwingt
   die Spalte sonst auf seine Mindestbreite. break-word reicht nicht,
   anywhere schon. */
.wege > *, .karten > *, .team > *, .bloecke > *, .eckdaten > *,
.btn-reihe > *, .schritte > *, .standortkarten > * { min-width: 0; }
.weg p, .karte p, .person h3, .block p, .eckdatum dd, .haken li,
.faq p, .faq__text, .schritte p { overflow-wrap: anywhere; hyphens: auto; }

.weg {
  display: flex; flex-direction: column;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--r-l); padding: clamp(1.4rem, 2.8vw, 1.9rem);
  box-shadow: var(--schatten-s);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  text-decoration: none; color: inherit;
}
.weg:hover { box-shadow: var(--schatten-l); transform: translateY(-3px); border-color: var(--petrol-200); color: inherit; }

/* Drei Wege, drei Papiersorten. Das Motiv passt jeweils zum Inhalt, damit es
   Gestaltung bleibt und nicht Dekoration: Lernblock fuer die Weiterbildung,
   Register fuer die Kooperation, Ticket fuer die Einzelseminare. Vorher waren
   es drei identische Karten, die sich nur in der Symbolfarbe unterschieden.
   07.09.2026, Auftrag Sebastian. */
.weg { border-radius: 4px; }

/* 1 Lernblock: Lochrand und Randlinie, aber KEINE Linien hinter dem Text.
   Die erste Fassung legte ein Linienraster unter den ganzen Absatz. Am Bild
   gesehen lief es quer durch die Schrift und sass nicht auf der Grundlinie,
   das las sich als Darstellungsfehler. Ein Kontrast-Gate findet so etwas
   nicht, weil die Schriftfarbe unveraendert bleibt. 07.09.2026. */
.weg--block { padding-left: clamp(2.7rem, 4.6vw, 3.4rem); }
.weg--block::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: clamp(1.9rem, 3.2vw, 2.4rem);
  border-right: 1px solid #D8B9BF;
  background: radial-gradient(circle at center, #C9D6CF 0 3px, transparent 3.6px) center top 26px / 100% 34px repeat-y;
}
/* 2 Register: Reiter an der Oberkante */
.weg--register { border-radius: 0 10px 4px 4px; }
.weg--register::before {
  /* Der Reiter muss auf dem Blatt sitzen, nicht darueber schweben: gleiche
     Flaeche wie die Karte, Rand nur oben und seitlich. */
  content: ""; position: absolute; top: -11px; right: 20px; width: 64px; height: 12px;
  border-radius: 5px 5px 0 0; background: var(--papier);
  border: 1px solid var(--linie); border-bottom: 0;
  box-shadow: inset 0 3px 0 var(--lila-200);
}
/* 3 Ticket: Kante links und harter Schlagschatten wie gestapeltes Papier */
.weg--ticket {
  border-left: 4px solid var(--petrol-400); border-radius: 0 4px 4px 0;
  box-shadow: 4px 5px 0 rgba(35, 38, 43, .06);
}
.weg--ticket:hover { box-shadow: 4px 5px 0 rgba(35, 38, 43, .06), var(--schatten-l); }
.weg { position: relative; }
.weg__icon {
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: var(--r-m); background: var(--petrol-100);
  color: var(--petrol-700); margin-bottom: 1.1rem;
}
.weg:nth-child(2) .weg__icon { background: var(--lila-100); color: var(--lila-700); }
.weg:nth-child(3) .weg__icon { background: var(--nude-200); color: #8A5A4E; }
.weg h3 { margin-bottom: .4em; }
.weg p { color: var(--tinte-weich); font-size: .97rem; flex: 1; }
.weg__mehr {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem;
  font-weight: 700; font-size: .94rem; color: var(--petrol-700);
}
.weg:hover .weg__mehr { color: var(--petrol-900); }
.weg:hover .weg__mehr svg { transform: translateX(3px); }
.weg__mehr svg { transition: transform .2s ease; }

.karten { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
.karten--2 { grid-template-columns: repeat(2, 1fr); }
.karten--3 { grid-template-columns: repeat(3, 1fr); }
/* Im Dreier stehen die Titel unterschiedlich lang nebeneinander ("Supervision"
   einzeilig, "Theoretische Weiterbildung" zweizeilig). Ohne reservierte zweite
   Zeile beginnt der Fliesstext je Karte auf anderer Hoehe. 13.09.2026. */
@media (min-width: 881px) { .karten--3 .karte h3 { min-height: 2.4em; } }
.karten--4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px) { .karten--3 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .karten--2, .karten--4 { grid-template-columns: 1fr; } }

.karte { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r-l); padding: clamp(1.4rem, 2.6vw, 1.9rem); }
.karte--nude { background: var(--nude-50); }
.karte h3 { margin-bottom: .45em; }
.karte p { color: var(--tinte-weich); }
.karte p:last-child { margin-bottom: 0; }
.karte__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-s); background: var(--petrol-100);
  color: var(--petrol-700); margin-bottom: 1rem;
}
.karte__icon--lila { background: var(--lila-100); color: var(--lila-700); }

.bloecke { display: grid; gap: 1rem; }
.block {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 2.5vw, 1.6rem);
  align-items: start; background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--r-l); padding: clamp(1.25rem, 2.6vw, 1.75rem);
}
.block__nr {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-pille); background: var(--lila-100);
  color: var(--lila-700); font-family: var(--schrift-titel);
  font-weight: 600; font-size: 1.1rem;
}
.block h3 { font-size: 1.12rem; margin-bottom: .3em; }
.block p { color: var(--tinte-weich); margin-bottom: 0; font-size: .97rem; }
.block__vertiefung { margin-top: .6rem; font-size: .9rem; color: var(--tinte-leise); }
@media (max-width: 560px) { .block { grid-template-columns: 1fr; gap: .85rem; } }

/* Eckdaten als einzeln liegende Kärtchen statt als fugenlose Tabelle. Eine
   randlose Rastertabelle ist die Standardform jeder generierten Seite; hier
   liegen jetzt kleine Blätter nebeneinander, jedes mit farbiger Oberkante.
   07.09.2026. */
.eckdaten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.1rem);
}
.eckdatum {
  background: var(--papier); padding: clamp(1.25rem, 2.5vw, 1.6rem);
  border: 1px solid var(--linie); border-top: 3px solid var(--petrol-400);
  border-radius: 3px; box-shadow: 0 1px 2px rgba(35, 38, 43, .05);
}
.eckdatum:nth-child(2) { border-top-color: var(--lila-400); }
.eckdatum:nth-child(3) { border-top-color: var(--nude-300); }
.eckdatum:nth-child(4) { border-top-color: var(--petrol-200); }
.eckdatum--breit {
  grid-column: 1 / -1;
  /* Ueber die volle Breite wirkt eine farbige Oberkante wie ein Trennbalken.
     Die Loesung war zuerst ein Seitenstreifen links; der traegt aber keine
     Bedeutung und ist genau das wiederholte Muster, das eine Seite generiert
     aussehen laesst. Jetzt schlicht der gleiche feine Rahmen wie bei den
     Geschwistern. 08.09.2026, Massstab: farbige Kante nur fuer Papiermotiv
     oder echten Hinweis. */
  border: 1px solid var(--linie);
}
.eckdatum dt { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--petrol-700); margin-bottom: .5rem; }
.eckdatum dd { margin: 0; font-size: 1.02rem; color: var(--tinte); }
.eckdatum dd strong { font-weight: 700; }

.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.2vw, 1.5rem); }
@media (max-width: 980px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team { grid-template-columns: 1fr; } }

/* Vier Personenkarten, bewusst NICHT gleich. Vier identische weisse Karten mit
   Initialkreis und viermal derselben Rollenzeile waren der Grund, warum die
   Seite wie eine Vorlage aussah (Befund Sebastian, 07.09.2026). Die Motive
   stammen aus dem Designspielplatz: Notizzettel, Klebeband, Karteireiter und
   Eselsohr. Die Rollenzeile steht jetzt einmal in der Einleitung statt vier
   Mal unter den Namen. */
.person {
  position: relative; background: var(--papier); border: 1px solid var(--linie);
  border-radius: 3px; padding: clamp(1.5rem, 2.8vw, 1.9rem) clamp(1.2rem, 2.4vw, 1.5rem) clamp(1.35rem, 2.6vw, 1.7rem);
  box-shadow: 0 1px 2px rgba(35, 38, 43, .05), 0 6px 18px -12px rgba(35, 38, 43, .28);
}
/* Leicht unterschiedliche Neigung. Bewusst klein: es soll wie abgelegtes
   Papier wirken, nicht wie ein Effekt. */
.person:nth-child(1) { transform: rotate(-.7deg); }
.person:nth-child(2) { transform: rotate(.5deg); }
.person:nth-child(3) { transform: rotate(-.35deg); }
.person:nth-child(4) { transform: rotate(.8deg); }
@media (prefers-reduced-motion: reduce) { .person { transform: none; } }

/* 1 Notizzettel mit Klebestreifen */
.person--zettel { background: var(--nude-100); }
.person--zettel::before {
  content: ""; position: absolute; top: -10px; left: 50%; width: 84px; height: 22px;
  transform: translateX(-50%) rotate(-5deg);
  background: repeating-linear-gradient(102deg, #a9c8c0 0 11px, #cec0d1 11px 22px);
  opacity: .72; clip-path: polygon(3% 0, 97% 6%, 100% 96%, 2% 100%);
}
/* 2 Karteikarte mit Reiter */
.person--reiter { border-radius: 0 8px 3px 3px; }
.person--reiter::before {
  content: ""; position: absolute; top: -9px; right: 16px; width: 52px; height: 12px;
  border-radius: 3px 3px 0 0; background: var(--petrol-100);
  border: 1px solid #A9C8C8; border-bottom: 0;
}
/* 3 Blatt mit Eselsohr */
.person--eselsohr::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  /* Die Ecke zeigt die Rueckseite des Blattes, also eine Spur dunkler als die
     Karte. Mit lila-100 auf Weiss war sie mit 1.05:1 praktisch unsichtbar und
     sah nach Darstellungsfehler aus statt nach Falz. */
  border: 16px solid transparent; border-right-color: var(--nude-200); border-bottom-color: var(--nude-200);
  filter: drop-shadow(-2px -2px 2px rgba(35, 38, 43, .16));
}
/* 4 Randnotiz: ruhiges Blatt mit farbiger Kante statt eines vierten Motivs.
   Vier Gimmicks nebeneinander waeren wieder ein Muster. */
.person--rand { border-left: 3px solid var(--lila-700); border-radius: 0 3px 3px 0; }
/* 5 aufgeklebtes Bild, sobald ein Portraet freigegeben ist */
.person--bild { background: #fff; }

.person__kranz {
  width: 60px; height: 60px; margin-bottom: .9rem; display: grid; place-items: center;
  border-radius: var(--r-pille); background: var(--nude-200); color: var(--lila-700);
  font-family: var(--schrift-titel); font-weight: 600; font-size: 1.2rem;
}
.person--reiter .person__kranz { background: var(--petrol-100); color: var(--petrol-900); }
.person--eselsohr .person__kranz { background: var(--lila-100); color: var(--lila-700); }
.person__foto { width: 60px; height: 60px; margin-bottom: .9rem; border-radius: var(--r-pille); object-fit: cover; }
.person h3 { font-size: 1.08rem; margin-bottom: .35em; }
.person__ort {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--schrift-hand); font-size: 1.02rem; color: var(--petrol-700);
}

.standortkarten { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.2vw, 1.5rem); }
@media (max-width: 700px) { .standortkarten { grid-template-columns: 1fr; } }

/* Briefkopfband in den Praxiskarten. Die Praxen liefern ihre Marken als
   unterschiedlich breite Briefkoepfe (3,25:1, 3,59:1 und 2,02:1). Ein festes
   Seitenverhaeltnis fuer das Band plus object-fit: contain stellt sie auf eine
   gemeinsame Grundlinie, ohne eine Marke zu beschneiden oder zu verzerren.
   Weisse Flaeche, weil alle Vorlagen auf Weiss gezeichnet sind und auf dem
   Sandton des Papiers ihren eigenen Rand zeigen wuerden. 13.09.2026. */
/* grid-template-rows: minmax(0, 1fr) ist hier die tragende Zeile, nicht
   Kosmetik. Ohne sie ist die einzige Rasterzeile automatisch bemessen, das
   "height: 100%" am Bild hat dann keinen festen Bezug und faellt auf die
   natuerliche Bildhoehe zurueck. Das Band waechst mit dem Bild, und
   aspect-ratio greift nur dort, wo gar kein Bild liegt.
   Gemessen am 13.09.2026 auf der Livesseite, Befund Astra, selbst
   nachgemessen auf fuenf Breiten: bei 1440 px waren die vier Baender
   167,20 / 154,84 / 246,72 / 144,75 px hoch statt viermal 144,76. Nur der
   leere Platzhalter traf das Verhaeltnis. Mit definiter Zeile plus
   min-height: 0 kann der Inhalt das Band nicht mehr aufblaehen.
   Gegenprobe: tools/logoband-pruefen.mjs. */
.praxis__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  place-items: center;
  aspect-ratio: 16 / 5; margin-bottom: 1.15rem;
  background: #FFF; border: 1px solid var(--linie); border-radius: var(--r-s);
  padding: clamp(.7rem, 1.8vw, 1.05rem);
}
.praxis__kopf > * { min-width: 0; min-height: 0; }
.praxis__kopf img { width: 100%; height: 100%; object-fit: contain; }
.praxis__kopf--offen {
  background: var(--nude-50); border-style: dashed;
  color: var(--tinte-leise); font-size: .93rem; text-align: center; line-height: 1.7;
}

.schritte { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.schritte > li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--r-l); padding: clamp(1.15rem, 2.4vw, 1.6rem);
}
.schritte__nr {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-pille); background: var(--petrol-100);
  color: var(--petrol-900); font-family: var(--schrift-titel); font-weight: 600;
}
/* Die Karte hat drei Kinder (Nummer, Ueberschrift, Text) in einem
   Zweispalter. Ohne diese Regel landet der Text in Spalte 1 der zweiten
   Zeile, also unter der Nummer statt neben ihr. Befund Astra, 07.09.2026. */
.schritte > li > :not(.schritte__nr) { grid-column: 2; }
@media (max-width: 560px) { .schritte > li > :not(.schritte__nr) { grid-column: 1; } }
.schritte h3 { font-size: 1.08rem; margin-bottom: .25em; }
.schritte p { color: var(--tinte-weich); font-size: .96rem; margin-bottom: 0; }
@media (max-width: 560px) { .schritte > li { grid-template-columns: 1fr; gap: .8rem; } }

/* Fragenblock statt Kartenstapel.
   Vorher sechs gleich grosse weisse Kaesten mit Plus am Rand, also genau das
   Muster, das jede generierte Seite benutzt (Befund Sebastian, 08.09.2026).
   Jetzt ein liniertes Blatt: eine Randlinie links, die Fragen als Zeilen mit
   Haarlinie dazwischen, das Fragezeichen handschriftlich in der Spalte davor.
   Keine Karte je Frage, keine Seitenstreifen. Die Antwort ruecken wir ein wie
   eine Randnotiz. */
.faq {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: clamp(.4rem, 1.4vw, .8rem) clamp(1rem, 2.4vw, 1.6rem);
  padding-left: clamp(3rem, 6vw, 4.2rem);
  box-shadow: 0 1px 2px rgba(35, 38, 43, .05), 0 10px 30px -22px rgba(35, 38, 43, .3);
}
/* Randlinie und Lochung als eigene Ebene, nicht als border-left. */
.faq::before {
  content: ""; position: absolute; left: clamp(2.1rem, 4.4vw, 3rem); top: 0; bottom: 0;
  width: 1px; background: #D8B9BF;
}
/* Lochung bewusst weggelassen. Am Bild gesehen: die Loecher liegen auf einem
   festen Raster, die Fragen sind unterschiedlich hoch, dadurch sitzt kein Loch
   auf einer Zeile und eines kollidierte mit dem Fragezeichen. Randlinie und
   handschriftliches Fragezeichen tragen das Motiv allein. Ausserdem hat die
   Lernblock-Karte auf der Startseite bereits eine Lochung; zweimal dasselbe
   Motiv waere wieder ein Muster. 08.09.2026. */

.faq > details { border-top: 1px solid var(--linie); }
.faq > details:first-of-type { border-top: 0; }

.faq summary {
  cursor: pointer; list-style: none;
  position: relative;
  padding: 1.15rem 2.2rem 1.15rem 0;
  font-family: var(--schrift-titel);
  font-weight: 600; font-size: clamp(1.02rem, .98rem + .2vw, 1.15rem);
  line-height: 1.35; color: var(--tinte);
  min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
/* Handschriftliches Fragezeichen in der Randspalte. */
.faq summary::before {
  content: "?"; position: absolute;
  left: calc(-1 * clamp(1.55rem, 3.3vw, 2.3rem)); top: 1rem;
  font-family: var(--schrift-hand); font-weight: 700;
  font-size: 1.5rem; line-height: 1; color: var(--lila-600);
  transition: color .35s cubic-bezier(.22, 1, .36, 1);
}
.faq > details[open] summary::before { color: var(--lila-700); }
/* Winkel statt Plus, dreht sich beim Aufklappen. */
.faq summary::after {
  content: ""; position: absolute; right: .25rem; top: 1.55rem;
  width: 9px; height: 9px;
  border-right: 2px solid var(--petrol-700); border-bottom: 2px solid var(--petrol-700);
  transform: rotate(45deg);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.faq > details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--petrol-900); }

/* Aufklappen ueber grid-template-rows, nicht ueber height. */
.faq__falte { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.22, 1, .36, 1); }
.faq > details[open] .faq__falte { grid-template-rows: 1fr; }
.faq__falte > div { overflow: hidden; }

.faq__text,
.faq > details p {
  margin: 0 0 1.15rem;
  padding: 0 0 0 1.1rem;
  color: var(--tinte-weich);
  font-size: .98rem;
  max-width: 68ch;
}
.faq > details p + p { margin-top: -.55rem; }

@media (prefers-reduced-motion: reduce) {
  .faq__falte, .faq summary::after, .faq summary::before { transition: none; }
}

.abschnittsnav { display: flex; flex-wrap: wrap; gap: .55rem; padding-top: 1.25rem; }
.abschnittsnav a {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--papier); border: 1px solid var(--linie-stark);
  border-radius: var(--r-pille); padding: .5rem 1rem;
  font-size: .9rem; font-weight: 600; color: var(--petrol-700);
  text-decoration: none; min-height: 44px;
}
.abschnittsnav a:hover { background: var(--petrol-100); color: var(--petrol-900); }

.textverweis { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--petrol-700); text-decoration: none; }
.textverweis:hover { color: var(--petrol-900); text-decoration: underline; }

/* Redaktioneller Zweispalter: links Kicker und Ueberschrift, rechts der
   Fliesstext. Frueher stand hier "auto 1fr" mit Kartenhintergrund, gedacht
   fuer Symbol plus Text. In dieser Verwendung ergab das eine sehr schmale
   rechte Spalte. Befund Astra, 07.09.2026. */
.redaktion {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 3.25rem); align-items: start;
}
.redaktion > * { min-width: 0; }
/* Die linke Spalte tragen Kicker, Ueberschrift und Vorspann, die rechte den
   ganzen Inhalt. Seit die Kooperationsseite dort drei ausfuehrliche Antworten
   zeigt, ist die rechte Spalte rund dreimal so hoch, und links stand eine
   grosse leere Sandflaeche. Deshalb klebt der Kopf am Scrollen mit; 7.5rem,
   weil die Kopfzeile selbst klebt und rund 90 px hoch ist. 13.09.2026. */
@media (min-width: 881px) {
  .redaktion > *:first-child { position: sticky; top: 7.5rem; }
}
.redaktion__text { color: var(--tinte-weich); font-size: .99rem; }
.redaktion__text h3 { font-family: var(--schrift-text); font-size: 1.02rem; font-weight: 700; margin-top: 1.4em; }
.redaktion__text h3:first-child { margin-top: 0; }
.redaktion__text :last-child { margin-bottom: 0; }
@media (max-width: 880px) { .redaktion { grid-template-columns: 1fr; } }

.haken { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.haken li { display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: start; color: var(--tinte-weich); }
.haken li svg { margin-top: .3em; color: var(--petrol-600); }
.haken li strong { color: var(--tinte); font-weight: 700; }

/* Textliste ohne Symbol. Warum eigens: .haken li ist ein Raster aus 24 px und
   1fr fuer Symbol plus Text. Ein li ohne Symbol schiebt seinen Text als
   anonymes Rasterkind in die 24-px-Spalte, dann steht der Absatz senkrecht und
   wird tausende Pixel hoch. Genau das ist am 08.09.2026 auf /kontakt und
   /rahmenbedingungen passiert. Ein Ueberlauftest sieht es nicht, weil nichts
   seitwaerts herausragt. Befund Astra an der gerenderten Gesamtansicht. */
.liste-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.liste-punkte li {
  color: var(--tinte-weich); padding-left: 1.4rem; position: relative;
}
.liste-punkte li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--petrol-400);
}
.liste-punkte li strong { color: var(--tinte); font-weight: 700; }

.hinweis {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  background: var(--lila-100); border: 1px solid var(--lila-200);
  border-left: 4px solid var(--lila-700); border-radius: var(--r-m);
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
}
.hinweis svg { color: var(--lila-700); margin-top: .15em; }
.hinweis p { margin-bottom: 0; color: var(--tinte); font-size: .97rem; }
.hinweis strong { font-weight: 700; }
.hinweis--offen { background: #FFF8E8; border-color: #F0DDB0; border-left-color: #B07D1A; }
.hinweis--offen svg { color: #8A6212; }

.zitat {
  font-family: var(--schrift-titel);
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.7rem);
  line-height: 1.42; color: var(--tinte);
  border-left: 4px solid var(--petrol-400);
  padding-left: clamp(1.1rem, 3vw, 1.9rem); margin: 0; max-width: 46ch;
}
.mitte .zitat { margin-inline: auto; }
.zitat--luft { margin-block: 1.5rem 2rem; }

.abschluss {
  background: linear-gradient(160deg, var(--petrol-900) 0%, var(--petrol-700) 58%, #2E6C7E 100%);
  color: var(--weiss); border-radius: var(--r-xl);
  padding: clamp(2.25rem, 5vw, 3.75rem); text-align: center;
}
.abschluss h2 { color: var(--weiss); }
.abschluss h2 em, .abschluss .punkt { color: #BFE6E0; }
.abschluss p { color: rgba(255,255,255,.9); max-width: 52ch; margin-inline: auto; }
.abschluss .btn { background: var(--weiss); color: var(--petrol-900); border-color: rgba(255,255,255,.6); box-shadow: 0 2px 0 0 rgba(0,0,0,.22); }
.abschluss .btn:hover { background: var(--nude-100); color: var(--petrol-900); }
.abschluss .btn--rand { background: transparent; color: var(--weiss); border-color: rgba(255,255,255,.55); box-shadow: 0 2px 0 0 rgba(0,0,0,.18); }
.abschluss .btn--rand:hover { background: rgba(255,255,255,.12); color: var(--weiss); }
.abschluss a:not(.btn) { color: var(--weiss); }
.abschluss__nachsatz { margin-top: 1.25rem; font-size: .92rem; }

.fuss { background: var(--creme-2); border-top: 1px solid var(--linie); padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.75rem; }
/* Vier Bereiche seit dem 08.09.2026, vorher drei. Mit drei Spalten fiel der
   vierte am Desktop allein in Zeile 2 und liess eine grosse Restflaeche
   stehen. Befund Astra an der gerenderten Gesamtansicht. */
.fuss__gitter { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(1.5rem, 3.4vw, 2.6rem); }
@media (max-width: 980px) { .fuss__gitter { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fuss__gitter { grid-template-columns: 1fr; } }
/* 25.09.2026: h4 -> h2. Auf jeder Seite sprang die Gliederung vom letzten h2
   des Inhalts direkt auf die h4 der Fusszeile; die Barrierefreiheitsseite
   sagt aber "durchgehende Ueberschriftenordnung". Optik unveraendert. */
.fuss h2.fuss__kopf {
  font-family: var(--schrift-text); font-weight: 700; line-height: 1.4;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinte-leise); margin-bottom: .9rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fuss a { color: var(--tinte-weich); text-decoration: none; font-size: .94rem; }
.fuss a:hover { color: var(--petrol-700); text-decoration: underline; }
.fuss p { color: var(--tinte-weich); font-size: .94rem; }
.fuss__marke { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.fuss__marke img { height: 54px; width: auto; }
.fuss__unten {
  margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: 1.5rem;
  border-top: 1px solid var(--linie-stark);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  font-size: .88rem; color: var(--tinte-leise);
}

.krumen { font-size: .86rem; color: var(--tinte-leise); padding-top: 1.5rem; }
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.krumen li::after { content: "\203A"; margin-left: .4rem; color: var(--linie-stark); }
.krumen li:last-child::after { content: ""; }
.krumen a { color: var(--tinte-leise); }

.seitenkopf {
  background: radial-gradient(ellipse at 85% 0%, rgba(78,172,172,.12) 0, transparent 60%), var(--creme);
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 3.75rem);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf h1 { max-width: 22ch; }
.seitenkopf__lead { font-size: clamp(1.03rem, .98rem + .4vw, 1.18rem); color: var(--tinte-weich); max-width: 58ch; margin-bottom: 0; }

.rechtstext { max-width: 72ch; }
.rechtstext h2 { font-size: 1.35rem; margin-top: 2.25em; }
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext h3 { font-size: 1.08rem; margin-top: 1.75em; font-family: var(--schrift-text); font-weight: 700; }
.rechtstext ul { padding-left: 1.15rem; color: var(--tinte-weich); }
.rechtstext li { margin-bottom: .4rem; }
.rechtstext address { font-style: normal; }
.rechtstext code { background: var(--nude-100); border-radius: 4px; padding: .1em .35em; font-size: .92em; }

/* Nur noch auf den Rechtsseiten im Einsatz. Auf den Marketingseiten wird
   Unbestaetigtes nicht markiert, sondern gar nicht erst behauptet.
   Befund Honey, 07.09.2026. */
.pruefen {
  display: inline-block; background: #FFF3D6;
  /* 07.09.2026: Rahmen von #C08A1E auf #A87610 abgedunkelt. Der alte Wert lag
     mit 2.76:1 auf der eigenen Sandflaeche unter den 3:1 aus WCAG 1.4.11 und
     stand in keinem Paar des Kontrast-Gates, war also unbemerkt. Jetzt 3.62:1. */
  border: 1px dashed #A87610; border-radius: var(--r-s);
  padding: .1em .5em; font-family: var(--schrift-text);
  font-size: .9em; font-weight: 700; color: #7A5510;
}

/* Zweite Stufe neben .pruefen: Angaben, die wir aus einer Primaerquelle
   belegt haben. Die Kundin muss sie nur bestaetigen, nicht heraussuchen.
   Bewusst optisch anders als .pruefen, damit die beiden Stufen sich beim
   Ueberfliegen nicht vermischen. 07.09.2026. */
.vorbereitet {
  display: inline-block; background: #E4EFE9;
  border: 1px solid #3F6B52; border-radius: var(--r-s);
  padding: .1em .5em; font-family: var(--schrift-text);
  font-size: .9em; font-weight: 700; color: #234634;
}

.nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stapel > * + * { margin-top: var(--abstand, 1.25rem); }
.abstand-s  { margin-top: 1rem; }
.abstand-m  { margin-top: 1.5rem; }
.abstand-l  { margin-top: 2rem; }
.abstand-xl { margin-top: 2.5rem; }
.ohne-oben  { padding-top: 0; }
.abschnitt__kopf.mitte { margin-inline: auto; text-align: center; }
.lead { font-size: 1.1rem; }
.lead-weich { color: var(--tinte-weich); font-size: 1.1rem; }
.notiz { margin-top: 1.5rem; color: var(--tinte-leise); font-size: .95rem; }

/* =========================================================================
   Rechtsseiten mit Seitenleiste, 25.09.2026 (bau/rechtsseiten.mjs)
   Auftrag Sebastian: Impressum, Datenschutz und Barrierefreiheit so schoen
   wie die uebrigen Seiten, mit Seitenleiste, aktivem Inhaltsverzeichnis und
   brauchbaren Informationen. Vorbild ist Katjas Praxisseite; die Bauteile
   sind die dieser Seite: Eckdaten-Kaertchen, Notizzettel mit Klebeband,
   Chips wie .abschnittsnav.
   ========================================================================= */
.rechts-bereich { padding-top: clamp(2.25rem, 5vw, 3.5rem); }
.rechts-kurz { margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }
.rechts-kurz dd a { font-weight: 600; }
/* Nur an den gesetzten Trennstellen trennen. Mit hyphens: auto brach der
   Browser "Nieder-sachsen" und "Psychotherapeutenkam-mer". */
.rechts-kurz dd { hyphens: manual; }

.rechts {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start;
}
.rechts__text { grid-column: 1; grid-row: 1; min-width: 0; max-width: 70ch; }
/* Die Leiste klebt mit wie der Kopf der Redaktionsspalte (7.5rem, weil die
   Kopfzeile selbst klebt). Ist das Fenster niedriger als die Leiste, scrollt
   sie in sich; das Innenpolster haelt Klebeband, Schatten und Fokusrahmen
   innerhalb der Schnittkante. */
.rechts__leiste {
  grid-column: 2; grid-row: 1; min-width: 0;
  position: sticky; top: 6.5rem;
  max-height: calc(100vh - 7.5rem); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 1.5rem; align-content: start;
  padding: 16px 8px 12px;
}

.rechts-toc__titel {
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinte-leise); margin: 0 0 .55rem;
}
.rechts-toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px dashed var(--linie-stark); }
.rechts-toc li { border-bottom: 1px dashed var(--linie-stark); }
.rechts-toc a {
  position: relative; display: flex; gap: .8rem; align-items: baseline;
  padding: .4rem .6rem .4rem .9rem; margin-block: 2px;
  color: var(--tinte-weich); text-decoration: none;
  font-size: .92rem; line-height: 1.4; border-radius: var(--r-s);
  transition: color .15s ease, background-color .15s ease;
}
.rechts-toc a::before {
  content: ""; position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 3px;
  border-radius: 3px; background: var(--petrol-400);
  transform: scaleY(0); transition: transform .18s ease;
}
.rechts-toc__nr {
  flex: none; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; color: var(--tinte-leise);
}
.rechts-toc a:hover { color: var(--petrol-900); background: var(--petrol-100); }
.rechts-toc a:hover .rechts-toc__nr { color: var(--petrol-900); }
.rechts-toc a[aria-current="location"] { color: var(--petrol-900); font-weight: 600; background: var(--petrol-100); }
.rechts-toc a[aria-current="location"]::before { transform: scaleY(1); }
.rechts-toc a[aria-current="location"] .rechts-toc__nr { color: var(--lila-700); }

/* Notizzettel mit Klebeband wie .hero__bild, nur leiser gedreht. */
.rechts-karte {
  position: relative; background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 1.7rem 1.35rem 1.35rem; box-shadow: var(--schatten-m);
  transform: rotate(-.7deg);
}
.rechts-karte::before {
  content: ""; position: absolute; top: -11px; left: 50%;
  width: 96px; height: 22px;
  transform: translateX(-50%) rotate(1.6deg);
  background: rgba(232,220,196,.85);
  border: 1px solid rgba(203,184,154,.5); border-radius: 2px;
}
.rechts-karte__titel { font-size: 1.32rem; margin-bottom: .45rem; }
.rechts-karte p { color: var(--tinte-weich); font-size: .94rem; line-height: 1.6; }
.rechts-karte__knoepfe { display: grid; gap: .6rem; margin-top: 1.15rem; }
.rechts-karte__knoepfe .btn { width: 100%; }

.rechts__abschnitt { scroll-margin-top: 6rem; }
.rechts__abschnitt + .rechts__abschnitt {
  margin-top: clamp(1.9rem, 3.6vw, 2.6rem); padding-top: clamp(1.9rem, 3.6vw, 2.6rem);
  border-top: 1px solid var(--linie);
}
.rechts__text > .hinweis { margin-bottom: clamp(1.9rem, 3.6vw, 2.6rem); }
.rechtstext .rechts__abschnitt h2 {
  display: flex; align-items: baseline; gap: .75rem;
  font-size: clamp(1.4rem, 1.22rem + .7vw, 1.72rem); margin: 0 0 .7em;
}
.rechts__nr {
  flex: none; font-family: var(--schrift-text); font-size: .76rem; font-weight: 700;
  letter-spacing: .08em; font-variant-numeric: tabular-nums;
  color: var(--lila-700); background: var(--lila-100);
  border-radius: var(--r-pille); padding: .2em .6em; transform: translateY(-.25em);
}
/* Eigene Spanne, damit der Titel schrumpfen und trennen darf. Als nackter
   Text im Flex-Rahmen blieb er so breit wie sein laengstes Wort und ragte bei
   320 px heraus ("Passwortgeschuetzter"). */
.rechts__titel { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.rechtstext .rechts__abschnitt h3 { margin-top: 1.4em; }
.rechtstext .rechts__abschnitt h3:first-of-type { margin-top: 0; }
.rechts-adresse {
  display: inline-block; font-style: normal; line-height: 1.75;
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 1.05rem 1.4rem; box-shadow: var(--schatten-s);
}

.rechts__ende {
  margin-top: clamp(2.75rem, 5.5vw, 3.75rem); padding-top: 2rem;
  border-top: 1px solid var(--linie-stark);
}
.rechts__stand { font-size: .88rem; color: var(--tinte-leise); margin-bottom: 1.6rem; }
/* .rechtstext h2 ist spezifischer als .augbraue und wuerde Groesse und
   Abstand ueberschreiben. */
.rechtstext h2.augbraue { font-size: .78rem; margin: 0 0 .9rem; }
.rechts-weiter { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; }
.rechts-weiter > * { min-width: 0; }
.rechts-weiter__karte {
  display: grid; grid-template-columns: 1fr auto; gap: .25rem .9rem; align-items: center;
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 1.1rem 1.25rem; box-shadow: var(--schatten-s);
  color: var(--tinte); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rechts-weiter__titel { grid-column: 1; font-family: var(--schrift-titel); font-weight: 600; font-size: 1.12rem; line-height: 1.25; }
.rechts-weiter__text { grid-column: 1; font-size: .9rem; line-height: 1.5; color: var(--tinte-weich); }
.rechts-weiter__pfeil { grid-column: 2; grid-row: 1 / span 2; color: var(--petrol-600); transition: transform .15s ease; }
.rechts-weiter__karte:hover { color: var(--tinte); border-color: var(--petrol-200); box-shadow: var(--schatten-m); transform: translateY(-1px); }
.rechts-weiter__karte:hover .rechts-weiter__pfeil { transform: translateX(3px); }

/* Unter 1000 px keine Leiste: das Verzeichnis steht vor dem Text als Chips
   wie die Abschnittsnavigation, die Karte darunter gerade statt gedreht. */
@media (max-width: 1000px) {
  .rechts { grid-template-columns: 1fr; gap: 2.25rem; }
  .rechts__leiste, .rechts__text { grid-column: 1; grid-row: auto; }
  .rechts__leiste { position: static; max-height: none; overflow: visible; padding: 0; gap: 2rem; }
  .rechts-toc ol { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; }
  .rechts-toc li { border: 0; }
  .rechts-toc a {
    align-items: center; gap: .5rem; margin: 0; min-height: 44px;
    padding: .45rem .95rem; border-radius: var(--r-pille);
    background: var(--papier); border: 1px solid var(--linie-stark);
    font-size: .88rem; font-weight: 600; color: var(--petrol-700);
  }
  .rechts-toc a::before { display: none; }
  .rechts-karte { transform: none; }
  .rechts-karte__knoepfe { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .rechts-toc a, .rechts-toc a::before, .rechts-weiter__karte, .rechts-weiter__pfeil { transition: none; }
}