/* ==========================================================================
   RHEIN PHYSIO – Unterseiten
   Seitenkopf · Brotkrümel · Kurz erklärt · Beschwerden · Kosten · Für wen · Person
   Fragen · Passt dazu · Buchungsseite · Ratgeber-Verweis · Preisliste · Praxis · Konzept
   Zwei Spalten · Karriere · Formular · Zitat und Werdegang · Textseiten
   ========================================================================== */

/* ---------- 1 · Seitenkopf ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(2rem, 5vh, 3.5rem);
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(.5rem, 2vh, 2rem));
  padding-bottom: clamp(1.25rem, 2.6vh, 2.25rem);
  background: var(--mist);
  overflow: clip;
}
.page-hero__grid { display: grid; gap: var(--space-m); }
.page-hero__eyebrow { margin-bottom: clamp(.9rem, 2vh, 1.5rem); }
.page-hero__title {
  font-size: var(--fs-page);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.045em;
  color: var(--ink);
  text-wrap: balance;
}
/* Der Verlauf liegt auf den einzelnen Wörtern: Jedes ist eine eigene Fläche (Auftritt Wort für Wort).
   Die Fläche reicht über die Zeile hinaus nach oben – sonst fehlen Großbuchstaben mit Umlaut die Punkte. */
.page-hero__title em .split-inner {
  background: linear-gradient(96deg, var(--blue-700) 8%, var(--teal-700) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: .24em .06em 0 0;
  margin-top: -.24em;
}
.page-hero__title .split-word { clip-path: inset(-.3em -.14em -.22em -.06em); }
.page-hero__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text); max-width: 33em; margin-top: clamp(1.25rem, 3vh, 2.25rem); text-wrap: pretty; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.5rem, 3.4vh, 2.5rem); }
/* Hinweis auf freie Termine: steht über den Knöpfen und rückt sie näher heran */
.page-hero .slots--hero, .booking .slots--hero { margin-top: clamp(1.25rem, 2.8vh, 2rem); }
.page-hero .slots--hero + .page-hero__actions { margin-top: 1rem; }
.anim .page-hero__actions { animation-delay: .5s; }
.anim .page-hero .hero__facts { animation-delay: .7s; }

.page-hero__media { aspect-ratio: 3 / 2; border-radius: var(--r-xl); overflow: hidden; background: var(--foam); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Porträt aus Orbit (Seite der Praxisleitung): immer Hochformat, das Gesicht bleibt im Bild */
.page-hero__media--portrait { aspect-ratio: 4 / 5; }
.page-hero__media--portrait picture { display: block; width: 100%; height: 100%; }
.page-hero__media--portrait img { object-position: 50% 20%; }
.anim .page-hero__media img { animation: settle 1.9s var(--ease) both; }
@keyframes settle { from { scale: 1.14; } to { scale: 1; } }

@media (min-width: 60em) {
  .page-hero { min-height: min(100vh, 66rem); min-height: min(100svh, 66rem); }
  .page-hero--plain { min-height: 0; padding-bottom: var(--space-l); }
  .page-hero__grid {
    /* Das Bild richtet sich auch nach der Höhe des Bildschirms, damit die Kurzfakten sichtbar bleiben */
    grid-template-columns: minmax(0, 1fr) clamp(18rem, min(36vw, (100vh - 20rem) * .8), 38rem);
    grid-template-columns: minmax(0, 1fr) clamp(18rem, min(36vw, (100svh - 20rem) * .8), 38rem);
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: end;
  }
  .page-hero--plain .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero__media { aspect-ratio: 4 / 5; }
}

.error-page { min-height: 72vh; justify-content: center; padding-bottom: calc(var(--space-section) + var(--r-xl)); }

/* Brotkrümel */
.breadcrumb { margin-bottom: clamp(1rem, 2.6vh, 2rem); font-size: .8125rem; line-height: 1.3; color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: ""; width: .4em; height: .4em; margin: 0 .85em 0 .7em; border-top: 1px solid currentColor; border-right: 1px solid currentColor; rotate: 45deg; opacity: .7; }
.breadcrumb a { padding-block: .7rem; color: var(--text); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; transition: text-decoration-color .3s, color .3s; }
.breadcrumb a:hover { color: var(--ink); text-decoration-color: currentColor; }
.breadcrumb [aria-current] { padding-block: .7rem; color: var(--ink); font-weight: 400; }

/* ---------- 2 · Kurz erklärt ---------- */
.explain { padding-block: var(--space-section) calc(var(--space-section) * .7); background: var(--mist); }
.explain__grid { display: grid; gap: var(--space-m); }
.explain__head { display: grid; gap: var(--space-m); align-content: start; }
.explain__body { display: grid; gap: var(--space-m); }
.explain__text { display: grid; gap: 1em; max-width: 39em; }
.explain__list { display: grid; gap: 1.1rem; padding-top: var(--space-m); border-top: 1px solid var(--line); }
.explain__list h3 { font-size: var(--fs-label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-800); }
.explain__list .checks { color: var(--ink); }
@media (min-width: 46em) { .explain__list .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); } }
@media (min-width: 60em) {
  .explain__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(3rem, 7vw, 9rem); align-items: start; }
  .explain__head { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}

/* Drei Punkte als Karten */
.points { display: grid; gap: 1rem; margin-top: var(--space-l); }
.point { display: grid; gap: .8rem; align-content: start; padding: clamp(1.5rem, 2.2vw, 2.4rem); border-radius: var(--r-l); background: var(--white); }
.point__num {
  display: grid; place-items: center; justify-self: start;
  width: 3.5rem; height: 2.1rem; margin-bottom: .6rem;
  border-radius: .7rem;
  background: var(--teal-300); color: var(--ink);
  font-size: .9375rem; font-weight: 400; font-variant-numeric: tabular-nums;
  rotate: 6deg;
}
.point:nth-child(even) .point__num { rotate: -6deg; background: var(--blue); }
.point h3 { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); }
.point p { font-size: var(--fs-small); line-height: 1.6; }
@media (min-width: 52em) { .points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.75rem); } }

/* ---------- 3 · Beschwerden ---------- */
.complaints { padding-block: calc(var(--space-section) * .3) calc(var(--space-section) * .8); background: var(--mist); }
.rows { border-top: 1px solid var(--line); }
.row { display: grid; gap: .9rem; padding-block: clamp(1.6rem, 3vw, 2.75rem); border-bottom: 1px solid var(--line); }
.row__num { font-size: .8125rem; font-weight: 500; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--blue-800); }
.row__title { font-size: clamp(1.9rem, 8vw, 2.75rem); font-weight: 300; letter-spacing: -.04em; line-height: 1.02; color: var(--ink); text-wrap: balance; }
.row__body { display: grid; gap: 1.1rem; max-width: 40em; }
.row__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.row__tags li { padding: .4em .9em; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--line); font-size: .8125rem; font-weight: 400; line-height: 1.2; color: var(--ink); }
@media (min-width: 60em) {
  .row { grid-template-columns: 3.5rem minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(1.5rem, 3vw, 3.5rem); align-items: baseline; }
  .row__title { font-size: clamp(2.25rem, 3.5vw, 4rem); }
}

/* ---------- 4 · Ablauf (dunkle Fläche aus main.css) ---------- */
/* Bei vielen Stationen bleibt der Text links stehen, während der Flusslauf vorbeizieht */
@media (min-width: 60em) {
  .direct--page .direct__grid { align-items: start; }
  .direct--page .direct__copy { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}
.facts { display: grid; width: 100%; max-width: 35rem; border-top: 1px solid var(--line-light); }
.facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding-block: .85rem; border-bottom: 1px solid var(--line-light); font-size: var(--fs-small); line-height: 1.5; }
.facts dt { color: var(--blue); font-weight: 400; }
.facts dd { color: rgba(255, 255, 255, .88); }

/* ---------- 5 · Kosten ---------- */
.costs { padding-block: calc(var(--space-section) * .8) var(--space-section); background: var(--mist); }
.payers { display: grid; gap: 1rem; }
.payer {
  display: grid; grid-template-rows: auto 1fr auto; gap: .9rem; justify-items: start;
  padding: clamp(1.5rem, 2.2vw, 2.4rem);
  border-radius: var(--r-l);
  background: var(--white);
}
.payer h3 { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); }
.payer p { font-size: var(--fs-small); line-height: 1.62; max-width: 38em; }
.payer .link-arrow { font-size: var(--fs-small); margin-top: .4rem; }
@media (min-width: 46em) { .payers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.75rem); } }
@media (min-width: 72em) { .payers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.costs__img { margin-top: var(--space-l); }
.costs__img-inner { aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; background: var(--foam); }
.costs__img-inner img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 46em) { .costs__img-inner { aspect-ratio: 21 / 9; } }

/* ---------- 6 · Für wen ---------- */
.cases { padding-block: 0 var(--space-section); background: var(--mist); }
.cases__grid { display: grid; gap: var(--space-l); }
.cases__img > div { aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; background: var(--foam); }
.cases__img img { width: 100%; height: 100%; object-fit: cover; }
.cases__body { display: grid; gap: var(--space-m); align-content: start; }
.cases__list { border-top: 1px solid var(--line); }
.cases__list li { display: grid; gap: .45rem; padding-block: clamp(1.2rem, 1.8vw, 1.6rem); border-bottom: 1px solid var(--line); }
.cases__list h3 { font-size: clamp(1.2rem, 1.5vw, 1.45rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.cases__list p { font-size: var(--fs-small); line-height: 1.6; max-width: 40em; }
@media (min-width: 60em) {
  .cases__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 7.5vw, 9.5rem); align-items: start; }
  .cases__media { position: sticky; top: calc(var(--header-h) + 2rem); }
  .cases__img > div { aspect-ratio: 4 / 5; }
}

/* Wer untersucht */
.person {
  display: grid; gap: var(--space-m);
  margin-top: var(--space-l);
  padding: clamp(1.75rem, 4vw, 4rem);
  border-radius: var(--r-xl);
  background: var(--foam);
}
.person__head { display: grid; gap: 1rem; align-content: start; }
.person__name { font-size: clamp(2.2rem, 3.6vw, 3.9rem); font-weight: 300; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.person__role { font-size: var(--fs-small); line-height: 1.5; color: var(--text); max-width: 24em; }
.person__body { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.person__list { font-size: var(--fs-small); color: var(--ink); align-content: start; }
@media (min-width: 60em) {
  .person { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); column-gap: clamp(2rem, 4vw, 5rem); }
}

/* ---------- 7 · Fragen ---------- */
.questions { padding-block: var(--space-section); background: var(--foam); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.questions__grid { display: grid; gap: var(--space-l); }
.questions__head { display: grid; gap: var(--space-m); align-content: start; }
.questions__more { font-size: var(--fs-small); max-width: 24em; }
.questions__more a { white-space: nowrap; }
@media (min-width: 60em) {
  .questions__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(3rem, 7vw, 9rem); align-items: start; }
  .questions__head { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}

/* ---------- 8 · Passt dazu ---------- */
.related { padding-block: 0 var(--space-section); background: var(--foam); }
.related__list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.related__link {
  position: relative; isolation: isolate;
  display: grid; grid-template-rows: auto 1fr auto; gap: .8rem;
  height: 100%;
  padding: clamp(1.5rem, 2.2vw, 2.4rem);
  border-radius: var(--r-l);
  background: var(--mist);
  color: var(--ink);
  overflow: hidden;
}
.related__link::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--blue);
  border-radius: 50% 50% 0 0 / 60% 60% 0 0;
  transform: translateY(102%);
  transition: transform .75s var(--ease), border-radius .75s var(--ease);
}
.related__link h3 { font-size: clamp(1.5rem, 2.2vw, 2.2rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.08; }
.related__link p { font-size: var(--fs-small); line-height: 1.55; color: var(--text); transition: color .5s; }
.related__arrow { display: grid; place-items: center; justify-self: end; width: 3rem; height: 3rem; margin-top: .5rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .5s var(--ease), color .5s, rotate .6s var(--ease); }
.related__arrow svg { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) {
  .related__link:hover::before { transform: none; border-radius: 0; }
  .related__link:hover p { color: var(--ink); }
  .related__link:hover .related__arrow { background: var(--ink); color: var(--white); rotate: -45deg; }
}
@media (min-width: 52em) { .related__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.75rem); } }

/* ---------- 9 · Buchungsseite ---------- */
.booking {
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(.5rem, 2vh, 2rem));
  padding-bottom: var(--space-l);
  background: var(--mist);
}
.booking__grid { display: grid; gap: var(--space-m); }
.booking__copy { min-width: 0; }
.booking__copy .eyebrow { margin-bottom: clamp(.8rem, 1.8vh, 1.4rem); }
.booking__title { font-size: clamp(2.6rem, 11vw, 4.1rem); }
.booking .page-hero__lead { margin-top: clamp(1rem, 2.4vh, 1.75rem); }

.booking__points { display: grid; gap: .9rem; max-width: 35em; padding-top: var(--space-m); border-top: 1px solid var(--line); }
.booking__points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; font-size: var(--fs-small); line-height: 1.55; }
.booking__points svg { width: 1.45rem; height: 1.45rem; margin-top: .08em; color: var(--blue-700); }
.booking__points strong { color: var(--ink); }
.booking__points a { white-space: nowrap; }

/* Der Kalender: Die Fläche ist von Anfang an so hoch wie das geöffnete Formular */
.calendar {
  --h: 67.5rem; --s: 1; --guide-top: 29.375rem;
  position: relative;
  height: var(--h);
  margin-inline: calc(var(--gutter) * -.5);
  border-radius: var(--r-l);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line), 0 2.5rem 5rem -3rem rgba(14, 42, 58, .4);
  overflow: hidden;
}
@media (max-width: 36em) { .calendar { --h: 72rem; } }
@media (max-width: 29em) { .calendar { --h: 76rem; } }
@media (max-width: 25em) { .calendar { --h: 80rem; } }
@media (max-width: 21em) { .calendar { --h: 86rem; } }
@media (min-width: 40em) { .calendar { margin-inline: 0; } }

.calendar:focus { outline: none; }
.calendar__frame { width: 100%; max-width: none; height: 100%; border: 0; background: transparent; }
/* Schmale Bildschirme: Der Rahmen rechnet mit 404 px Breite und wird passend verkleinert,
   damit alle fünf Tage ohne Querscrollen sichtbar sind (setzt das Skript) */
.calendar.is-sized .calendar__frame { width: var(--fw); height: calc(100% / var(--s)); transform: scale(var(--s)); transform-origin: 0 0; }

.calendar__guide {
  position: absolute; inset: var(--guide-top) 0 0;
  display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: clamp(1.1rem, 2vw, 1.6rem); align-content: start; justify-items: start;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background: var(--white);
  border-top: 1px solid var(--line);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.calendar.is-active .calendar__guide { opacity: 0; transform: translateY(1rem); pointer-events: none; }
/* Ohne JavaScript lässt sich der Wegweiser nicht ausblenden – dann bleibt die Fläche frei */
.no-js .calendar__guide { display: none; }

.guide { display: grid; gap: .9rem; width: 100%; }
.guide li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; font-size: var(--fs-small); line-height: 1.45; color: var(--text); }
.guide strong { display: block; font-size: 1.0625rem; color: var(--ink); font-weight: 400; letter-spacing: -.015em; }
.guide__num {
  display: grid; place-items: center;
  width: 3.1rem; height: 1.9rem;
  border-radius: .65rem;
  background: var(--foam); color: var(--ink);
  font-size: .875rem; font-weight: 400; font-variant-numeric: tabular-nums;
  rotate: -6deg;
}
.guide li:nth-child(even) .guide__num { rotate: 6deg; }
.guide li:first-child .guide__num { background: var(--teal-300); }
.calendar__show { font-size: var(--fs-small); }
.calendar__photo { width: 100%; min-height: 0; height: 100%; border-radius: var(--r-m); overflow: hidden; background: var(--foam); }
.calendar__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (min-width: 46em) {
  .guide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .guide li { grid-template-columns: minmax(0, 1fr); gap: .8rem; align-items: start; align-content: start; }
}

/* Platzhalter: lokale Vorschau oder Laden erst nach Zustimmung */
.calendar--local, .calendar--consent { height: auto; min-height: 26rem; display: grid; }
.calendar__placeholder { display: grid; gap: 1rem; align-content: center; justify-items: start; max-width: 38rem; padding: clamp(1.75rem, 4vw, 3.5rem); }
.calendar__placeholder > svg { width: 2.4rem; height: 2.4rem; color: var(--blue-700); }
.calendar__placeholder h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.1; color: var(--ink); text-wrap: balance; }
.calendar__placeholder p { font-size: var(--fs-small); line-height: 1.6; }

.booking__provider { margin-top: 1rem; font-size: .8125rem; line-height: 1.55; color: var(--muted); }

.booking__aside { display: grid; gap: 1.1rem; align-content: start; justify-items: start; padding: clamp(1.5rem, 2.2vw, 2.25rem); border-radius: var(--r-l); background: var(--foam); }
.booking__aside h2 { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); }
.booking__aside > p:not(.open-status) { font-size: var(--fs-small); }
.booking__contact { display: flex; flex-wrap: wrap; gap: .6rem; }
.booking__hours { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem 1rem; font-size: var(--fs-small); color: var(--ink); font-variant-numeric: tabular-nums; }
.booking__hours > div { display: contents; }
.booking__hours dt { color: var(--muted); }

@media (min-width: 60em) {
  .booking__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "copy kalender" "punkte kalender" "seite kalender";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(2.5rem, 5vw, 6rem);
    align-items: start;
  }
  .booking__copy { grid-area: copy; }
  .booking__points { grid-area: punkte; }
  .booking__calendar { grid-area: kalender; }
  /* Die letzte Zeile füllt die Höhe des Kalenders – der Kasten bleibt beim Ausfüllen im Blick */
  .booking__aside { grid-area: seite; position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .booking__title { font-size: clamp(3.2rem, 5.2vw, 6.25rem); }
}

/* Sonderfälle: offen lesbar, kein Akkordeon */
.notes { padding-block: calc(var(--space-section) * .7) var(--space-section); background: var(--mist); }
.notes__list { border-top: 1px solid var(--line); }
.note { display: grid; gap: .8rem; padding-block: clamp(1.4rem, 2.4vw, 2.25rem); border-bottom: 1px solid var(--line); }
.note h3 { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -.025em; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.note__body { display: grid; gap: .9rem; justify-items: start; max-width: 44em; }
.note__body .link-arrow { font-size: var(--fs-small); }
@media (min-width: 60em) {
  .note { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 5vw, 6rem); align-items: baseline; }
}

/* Vorbereitung */
.prep { padding-block: var(--space-section); background: var(--foam); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.prep__grid { display: grid; gap: var(--space-l); }
.prep__copy { display: grid; gap: var(--space-m); align-content: start; justify-items: start; }
.prep__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
@media (min-width: 60em) {
  .prep__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 7vw, 9rem); align-items: start; }
  .prep__copy { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}

/* ---------- 10 · Ergänzungen zu Seitenkopf, Zeilen und Kosten ---------- */
.page-hero__note { margin-top: 1rem; font-size: var(--fs-small); color: var(--muted); max-width: 36em; }
.hero__facts a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--blue-700); }
@media (hover: hover) { .hero__facts a:hover { text-decoration-color: currentColor; } }

/* Zeilen mit Verweisen und Sprungmarke */
.row__links { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; }
.row__links .link-arrow { font-size: var(--fs-small); }
.row:target .row__num { color: var(--teal-700); }

/* Zeilen auf dunkler Fläche (Anwendungen) */
.direct--rows .section-head__text { color: rgba(255, 255, 255, .8); }
.rows--dark { border-top-color: var(--line-light); }
.rows--dark .row { border-bottom-color: var(--line-light); }
.rows--dark .row__num { color: var(--blue); }
.rows--dark .row__title { color: var(--white); }
.rows--dark .row__tags li { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: var(--white); font-variant-numeric: tabular-nums; }
.rows--dark .row__tags li:first-child { background: var(--teal-300); box-shadow: none; color: var(--ink); }
.rows--dark .row:target .row__num { color: var(--teal-300); }

/* Nach der dunklen Fläche braucht der nächste Abschnitt weniger Luft – die Welle bringt sie mit */
.direct + .explain { padding-top: calc(var(--space-section) * .4); }

/* Zusatz unter einem Abschnitt (KG Neuro) */
.extra { padding-block: 0 calc(var(--space-section) * .15); background: var(--mist); }
.extra .points { margin-top: 0; }
.extra__note, .costs__note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem;
  max-width: 48em; margin-top: var(--space-m);
  font-size: var(--fs-small); line-height: 1.55; color: var(--muted);
}
.extra__note svg, .costs__note svg { width: 1.4rem; height: 1.4rem; margin-top: .1em; color: var(--blue-700); }

/* ---------- 11 · Aus dem Ratgeber ---------- */
.advice { padding-block: 0 var(--space-section); background: var(--foam); }
.advice__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; margin-bottom: 1.5rem; }
/* Beginnt die helle Fläche erst hier, bekommt sie die runden Ecken */
.cases + .advice, .costs + .advice { padding-top: var(--space-section); border-radius: var(--r-xl) var(--r-xl) 0 0; }

/* ---------- 12 · Preisliste ---------- */
.pricelist { padding-block: 0 calc(var(--space-section) * .8); background: var(--mist); }
.pricegroup { display: grid; gap: var(--space-m); padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line); }
.pricegroup__head { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.pricegroup__title { font-size: clamp(2rem, 3.6vw, 3.75rem); font-weight: 300; letter-spacing: -.04em; line-height: 1.02; color: var(--ink); text-wrap: balance; }
.pricegroup__text { font-size: var(--fs-small); line-height: 1.6; max-width: 26em; }
.pricegroup__head .link-arrow { font-size: var(--fs-small); }
@media (min-width: 60em) {
  .pricegroup { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(3rem, 7vw, 9rem); align-items: start; }
  .pricegroup__head { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.prices { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prices th, .prices td { padding: clamp(.95rem, 1.5vw, 1.35rem) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; font-weight: 300; }
.prices thead th { padding-top: 0; padding-bottom: .8rem; border-bottom-color: var(--line-strong); font-size: var(--fs-label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-800); }
.prices tbody th { padding-right: 1rem; }
.prices__name { display: block; font-size: clamp(1.0625rem, 1.45vw, 1.4rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.28; color: var(--ink); }
.prices__more { display: inline-block; margin-top: .15rem; padding-block: .3rem; font-size: .8125rem; font-weight: 400; color: var(--blue-800); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.prices .prices__time { width: 4.9em; padding-right: .75rem; white-space: nowrap; font-size: var(--fs-small); color: var(--muted); }
.prices .prices__price { width: 5.2em; text-align: right; white-space: nowrap; }
.prices td.prices__price { font-size: clamp(1.0625rem, 1.45vw, 1.4rem); font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
@media (hover: hover) { .prices__more:hover { color: var(--ink); } }
@media (min-width: 46em) { .prices .prices__time { width: 8em; } .prices .prices__price { width: 7em; } }

.pricenote {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start;
  padding: clamp(1.5rem, 2.4vw, 2.5rem);
  border-radius: var(--r-l);
  background: var(--foam);
}
.pricenote > svg { width: 1.6rem; height: 1.6rem; margin-top: .2rem; color: var(--blue-700); }
.pricenote h3 { margin-bottom: .5rem; font-size: var(--fs-h3); font-weight: 400; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); }
.pricenote p { max-width: 52em; font-size: var(--fs-small); line-height: 1.62; }
.pricenote__date { margin-top: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- 13 · Praxis ---------- */
.practice--page { padding-top: calc(var(--space-section) * .35); }
.package { padding-block: calc(var(--space-section) * .5) calc(var(--space-section) * .7); background: var(--mist); }
.package .gallery { margin-top: var(--space-l); }

.direct__address { font-size: var(--fs-lead); line-height: 1.45; color: var(--white); }
.access { display: grid; border-top: 1px solid var(--line-light); }
.access li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; row-gap: .45rem; padding-block: clamp(1.4rem, 2.2vw, 2rem); border-bottom: 1px solid var(--line-light); }
.access svg { grid-row: 1 / span 2; width: 2rem; height: 2rem; margin-top: .15rem; color: var(--blue); }
.access h3 { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -.025em; line-height: 1.15; color: var(--white); }
.access p { grid-column: 2; font-size: var(--fs-small); line-height: 1.6; }

.leader { padding-block: var(--space-section) calc(var(--space-section) * .6); background: var(--foam); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.leader .person { margin-top: 0; background: var(--white); }

/* ---------- 14 · Konzept ---------- */
.method--page { padding-bottom: calc(var(--space-section) * .7); }
.cases--foam { padding-top: calc(var(--space-section) * .3); background: var(--foam); }
.cases--foam .cases__img > div { background: var(--mist); }

/* Bild und Liste: Einträge mit Symbol, Stichworte, Einleitung */
.page-hero + .cases { padding-top: calc(var(--space-section) * .6); }
.cases__body .lead { margin-top: calc(var(--space-m) * -.3); }
.cases__list--icons li { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1rem; }
.cases__list--icons svg { grid-row: 1 / span 2; width: 1.9rem; height: 1.9rem; margin-top: .1rem; color: var(--blue-700); }
.cases__list--icons p { grid-column: 2; }
.cases__chips { display: grid; gap: .9rem; justify-items: start; }
.cases__chips h3 { font-size: var(--fs-label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-800); }
.cases__chips p { font-size: var(--fs-small); line-height: 1.6; max-width: 40em; }
.cases__body > .link-arrow { justify-self: start; }

/* ---------- 15 · Zwei Spalten: Gedanke links, Liste rechts ---------- */
.duo { padding-block: var(--space-section) calc(var(--space-section) * .7); background: var(--mist); }
.duo--foam { padding-block: var(--space-section); background: var(--foam); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.duo__grid { display: grid; gap: var(--space-l); }
.duo__head { display: grid; gap: var(--space-m); align-content: start; justify-items: start; }
.duo__body { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.duo__body .lead { margin-bottom: .75rem; }
.duo__body .duo__actions { margin-top: 1rem; }
.duo__label { font-size: var(--fs-label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-800); }
.duo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
@media (min-width: 60em) {
  .duo__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 7vw, 9rem); align-items: start; }
  .duo__head { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}

/* Eckdaten unter der Überschrift (Stellenanzeige) */
.keyfacts { display: grid; gap: .9rem; width: 100%; max-width: 34rem; }
.keyfacts dl { border-top: 1px solid var(--line); }
.keyfacts dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding-block: .8rem; border-bottom: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.5; }
.keyfacts dt { color: var(--blue-800); font-weight: 400; }
.keyfacts dd { color: var(--ink); }

/* Ein Abschnitt schiebt sich mit runden Ecken über den vorherigen */
.lift { position: relative; z-index: 2; margin-top: calc(var(--r-xl) * -1); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.package.lift { padding-top: var(--space-section); }
main > section:has(+ .lift) { padding-bottom: calc(var(--space-section) + var(--r-xl)); }

/* ---------- 16 · Karriere und Stellenanzeige ---------- */
.career__grid--top { align-items: start; }
.career__list { margin-top: .5rem; color: var(--ink); }
.career__list svg { color: var(--ink); }
.career__list li { font-size: var(--fs-body); }
.bonus { display: grid; gap: .6rem; padding: clamp(1.4rem, 2.2vw, 2.25rem); border-radius: var(--r-m); background: var(--ink); color: rgba(255, 255, 255, .82); }
.bonus h3 { font-size: clamp(1.5rem, 2.3vw, 2.3rem); font-weight: 300; letter-spacing: -.04em; line-height: 1.05; color: var(--white); text-wrap: balance; }
.bonus p { font-size: var(--fs-small); line-height: 1.6; }

/* ---------- 17 · Formular ---------- */
.message__hints { display: grid; gap: .9rem; max-width: 34em; padding-top: var(--space-m); border-top: 1px solid var(--line); }
.message__hints li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; font-size: var(--fs-small); line-height: 1.55; }
.message__hints svg { width: 1.45rem; height: 1.45rem; margin-top: .08em; color: var(--blue-700); }
.message__hints a, .notice a, .choice a {
  color: var(--ink); font-weight: 400;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--blue-700);
}

.form {
  --error: #A12A1C;
  display: grid; gap: clamp(1.25rem, 2vw, 1.75rem);
  padding: clamp(1.5rem, 3vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--white);
}
.form__pair { display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); }
@media (min-width: 40em) { .form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Köder für Maschinen: für Menschen nicht sichtbar und nicht erreichbar */
.form__trap { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }

.field { display: grid; gap: .5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend { padding: 0; font-size: var(--fs-small); font-weight: 400; color: var(--ink); }
.field > legend { margin-bottom: .5rem; }
.field__req { color: var(--blue-800); }
.field__hint { font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.field__error { font-size: .8125rem; line-height: 1.45; font-weight: 400; color: var(--error); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field textarea {
  width: 100%; min-height: 3.5rem;
  padding: .85em 1.1em;
  border: 0; border-radius: var(--r-s);
  background: var(--mist);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: inherit; font-size: 1.0625rem; font-weight: 300; line-height: 1.4; color: var(--ink);
  transition: box-shadow .3s, background-color .3s;
}
.field textarea { min-height: 9.5rem; resize: vertical; }
.field input:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; border-radius: var(--r-s); background: var(--white); }
.field.is-invalid input[type="text"], .field.is-invalid input[type="tel"], .field.is-invalid input[type="email"], .field.is-invalid textarea { box-shadow: inset 0 0 0 2px var(--error); }

.choices { display: flex; flex-wrap: wrap; gap: .6rem; }
.choice { position: relative; display: inline-flex; align-items: center; gap: .75rem; min-height: 3.25rem; font-size: var(--fs-small); line-height: 1.45; color: var(--ink); cursor: pointer; }
.choices .choice { padding: .6em 1.25em .6em 1em; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .3s, box-shadow .3s; }
.choices .choice:has(input:checked) { background: var(--foam); box-shadow: inset 0 0 0 1.5px var(--ink); }
.choices .choice:has(input:focus-visible) { outline: 2px solid var(--blue-700); outline-offset: 3px; }
.choice input { flex: none; width: 1.35rem; height: 1.35rem; margin: 0; accent-color: var(--ink); cursor: pointer; }
.choices .choice input:focus-visible { outline: none; }
.choice--check { align-items: flex-start; min-height: 0; font-weight: 300; color: var(--text); }
.choice--check input { margin-top: .12em; }
.field.is-invalid .choice--check input { outline: 2px solid var(--error); outline-offset: 2px; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.form__legend { font-size: .8125rem; color: var(--muted); }

.notice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.1rem; align-items: start;
  padding: clamp(1.4rem, 2.4vw, 2.25rem);
  border-radius: var(--r-l);
  background: var(--white);
  font-size: var(--fs-small); line-height: 1.6;
}
.notice > svg { width: 1.6rem; height: 1.6rem; margin-top: .15rem; color: var(--blue-700); }
.notice h2, .notice h3 { margin-bottom: .4rem; font-size: var(--fs-h3); font-weight: 400; letter-spacing: -.025em; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.notice ul { display: grid; gap: .3rem; margin-top: .4rem; }
.notice--ok > svg { padding: .2rem; border-radius: 50%; background: var(--teal-300); color: var(--ink); }
.notice--error { box-shadow: inset 0 0 0 2px #A12A1C; }
.notice--error > svg { color: #A12A1C; }
.notice--error a { text-decoration-color: #A12A1C; }

/* ---------- 18 · Person: Zitat und Werdegang ---------- */
.says { padding-block: 0 var(--space-section); background: var(--mist); }
.says--foam { padding-block: var(--space-section); background: var(--foam); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.says__grid { display: grid; gap: var(--space-m); }
.says__head { display: grid; gap: var(--space-m); align-content: start; }
/* Ein ganzer Satz als Überschrift: kleiner als sonst, damit er in die schmale Spalte passt */
.says__head .display { font-size: clamp(1.9rem, 6.4vw, 2.6rem); line-height: 1.04; }
/* Statt eines Anführungszeichens: zwei Wirbel der Bildmarke */
.says__mark { position: relative; display: block; width: 4.25rem; height: 3.4rem; }
.says__mark::before, .says__mark::after { content: ""; position: absolute; left: 0; height: 1.45rem; border-radius: .7rem; }
.says__mark::before { top: 0; width: 100%; background: var(--teal-300); rotate: 6deg; }
.says__mark::after { bottom: 0; width: 76%; background: var(--blue); rotate: -6deg; }
.quote { display: grid; gap: var(--space-m); }
.quote blockquote p {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.55rem, 5.6vw, 2.2rem); line-height: 1.24; letter-spacing: -.012em;
  color: var(--ink);
  max-width: 25em;
  text-wrap: pretty;
}
.quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .9em; font-size: var(--fs-small); font-weight: 400; color: var(--ink); }
.quote figcaption::before { content: ""; width: 2.5rem; height: 1px; background: var(--line-strong); }
.quote figcaption span { font-weight: 300; color: var(--muted); }
@media (min-width: 60em) {
  .says__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(3rem, 7vw, 9rem); align-items: start; }
  .says__head { position: sticky; top: calc(var(--header-h) + 2.5rem); }
  .quote blockquote p { font-size: clamp(1.9rem, 2.75vw, 3.25rem); }
  .says__head .display { font-size: clamp(2rem, 2.9vw, 3.4rem); }
}
/* Nach dem Zitat auf heller Fläche folgt die dunkle mit eigener Welle */
.says + .direct { margin-top: 0; }
.explain:has(+ .says) { padding-bottom: var(--space-l); }

/* Zertifikate und Fortbildungen auf dunkler Fläche: Jahr, Bezeichnung, Verweis */
.vita { display: grid; border-top: 1px solid var(--line-light); }
.vita li { display: grid; gap: .35rem; padding-block: clamp(1.2rem, 2vw, 1.75rem); border-bottom: 1px solid var(--line-light); }
.vita__year { font-size: var(--fs-small); font-weight: 400; color: var(--blue); font-variant-numeric: tabular-nums; }
.vita__title { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -.025em; line-height: 1.2; color: var(--white); text-wrap: balance; }
.vita__more { justify-self: start; margin-top: .2rem; font-size: var(--fs-small); }
@media (min-width: 40em) {
  .vita li { grid-template-columns: 7.25rem minmax(0, 1fr); column-gap: 1.25rem; align-items: baseline; }
  .vita__more { grid-column: 2; }
}

/* ---------- 19 · Textseiten (Impressum, Datenschutz, Sprache) ---------- */
.legal { background: var(--mist); }
.legal .article__grid { padding-top: 0; }
.legal__part { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.legal .prose h2 { margin-top: 0; font-size: clamp(2rem, 3.4vw, 3.4rem); letter-spacing: -.04em; line-height: 1.04; }
.legal .prose h2 + h3 { margin-top: 1.4em; }
.legal .prose h3 { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.legal .prose a { overflow-wrap: anywhere; }
/* Widerspruch gegen die Statistik: Stand dieses Browsers und die Schaltfläche dazu in einer Zeile */
.legal__wahl { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; scroll-margin-top: calc(var(--header-h) + 2.5rem); }
.legal__wahl p { min-width: 0; }
.toc__part { font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.toc .toc__part a { display: inline-block; padding-block: .35rem; font-size: inherit; font-weight: inherit; }
.toc .toc__part a::before { content: none; }
.toc__part + ol { margin-top: -.6rem; }
.toc ol + .toc__part { margin-top: .5rem; }
/* Auf schmalen Bildschirmen reichen die beiden Teile als Sprungziele */
@media (max-width: 59.99em) { .legal .toc ol { display: none; } .legal .toc { gap: .2rem; } .legal .toc__title { margin-bottom: .6rem; } }

@media print {
  .form, .advice, .gallery__nav { display: none !important; }
  .prices th, .prices td { padding: .4rem 0; }
}