/* ==========================================================================
   Rundum Pflegeberatung – Design-System
   Prioritäten: SEO · Barrierefreiheit · Ladezeit · Funktionalität
   Keine Webfonts, kein Framework, keine externen Requests.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marke – tiefes Rosé, aus dem Logo-Ton abgeleitet, kontraststark */
  --brand:          #8c3a46;   /* 7.5:1 auf Weiß – AAA für Fließtext */
  --brand-dark:     #6f2c37;
  --brand-tint:     #fdf4f2;
  --brand-tint-2:   #f8e8e4;
  --brand-line:     #ecd7d2;

  /* Neutralwerte – warm abgestimmt */
  --ink:            #241d1d;   /* 15.6:1 */
  --ink-soft:       #5a4b4b;   /* 8.3:1  */
  --ink-mute:       #6e5f5f;   /* 6.2:1  */
  --surface:        #ffffff;
  --surface-alt:    #faf6f5;
  --line:           #e7dedc;

  --focus:          #1c5fa8;
  --success:        #2f6b46;
  --star:           #a8681a;

  /* Fluide Typografie */
  --step--1: clamp(0.875rem, 0.84rem + 0.17vw, 0.95rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --step-3:  clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --step-4:  clamp(2rem, 1.6rem + 2vw, 3.15rem);

  /* Raster */
  --container: 1140px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(3rem, 7vw, 5.5rem);

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --shadow-s: 0 1px 2px rgba(48, 30, 30, .06), 0 2px 8px rgba(48, 30, 30, .05);
  --shadow-m: 0 2px 4px rgba(48, 30, 30, .05), 0 10px 28px rgba(48, 30, 30, .09);

  --header-h: 72px;      /* feste Höhe der Logo-Leiste */
  --header-offset: 156px; /* Gesamthöhe inkl. Navigation, per JS aktualisiert */

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset / Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-offset) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  text-rendering: optimizeLegibility;
}

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

/* Formularfelder nie breiter als ihr Container – ein <select> richtet sich
   sonst nach der längsten Option und sprengt schmale Bildschirme */
input, select, textarea { max-width: 100%; font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Lange Komposita wie „Pflegeneuordnungsgesetz" sprengen sonst das Raster */
p, li, td, th, dd, dt, blockquote, summary, figcaption {
  overflow-wrap: break-word;
}
@media (max-width: 640px) {
  h1, h2, h3, h4, p, li { hyphens: auto; }
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

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

a { color: var(--brand); text-underline-offset: .2em; }
a:hover { color: var(--brand-dark); }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

/* Sichtbarer, konsistenter Fokusring für Tastaturnutzung */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Layout-Hilfen
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.wrap--narrow { --container: 760px; }

.section { padding-block: var(--section-y); }
.section--tint { background: var(--brand-tint); }
.section--alt  { background: var(--surface-alt); }

.section__head { max-width: 62ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  margin-bottom: .6rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
}

.lead { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.55; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: 1000;
  padding: .75rem 1.25rem;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  --btn-bd: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;                 /* komfortable Zielgröße */
  padding: .7em 1.5em;
  border: 2px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step-0);
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.btn:hover {
  --btn-bg: var(--brand-dark);
  --btn-bd: var(--brand-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-m);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--brand);
  --btn-bd: var(--brand-line);
}
.btn--ghost:hover {
  --btn-bg: var(--brand-tint);
  --btn-bd: var(--brand);
  color: var(--brand-dark);
}

.btn--wide { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block: 1.5rem;
}
.btn-row--center { justify-content: center; }

/* Auf schmalen Bildschirmen volle Breite statt gequetschter Buttons */
@media (max-width: 480px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

.arrow { transition: transform .18s ease; }
.btn:hover .arrow, a:hover > .arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Kopfbereich & Navigation
   -------------------------------------------------------------------------- */
/* Bei geoeffnetem Menue bleibt die Kopfzeile am oberen Bildschirmrand
   stehen; die Seite dahinter wird stillgelegt und das Menue scrollt bei
   Bedarf in sich selbst (siehe Block „Schmale Bildschirme"). */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  padding-block: .5rem;
}

.brand { display: inline-flex; align-items: center; min-height: 44px; flex: 0 1 auto; min-width: 0; }
.brand img { width: min(326px, 100%); height: auto; }

.header__actions { display: flex; align-items: center; gap: .6rem; }

.header__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-height: 44px;
  padding: .5em .9em;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.header__tel:hover { background: var(--brand-tint); }

/* Kopfzeile am PC: Logo und Telefonnummer 50 % groesser. Die Bedingung ist
   das Gegenstueck zur Aufklapp-Navigation weiter unten – Handy und Tablet
   (pointer: coarse) behalten die kompakte Leiste. */
@media (min-width: 901px) and (pointer: fine) {
  .brand img { width: min(489px, 100%); }
  .header__tel { font-size: calc(var(--step--1) * 1.5); }
  .header__tel svg { width: 27px; height: 27px; }
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  padding: .5em .9em;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 650;
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 18px; height: 2px; background: currentColor; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute; left: 0;
  width: 18px; height: 2px;
  background: currentColor;
  transition: transform .2s ease, top .2s ease;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

.site-nav { border-top: 1px solid var(--line); }
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .35rem;
  margin-block: 0;          /* margin-inline bleibt auto (.wrap) */
  padding: .3rem 0;
  list-style: none;
}
.site-nav a {
  display: block;
  padding: .55em .8em;
  /* dieselbe Pillenform wie bei der aktuellen Seite und „Termin buchen" */
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}
.site-nav a:hover { background: var(--brand-tint); color: var(--brand-dark); }
/* Gleiche Form wie der Termin-Button; der fruehere Balken an der
   Unterkante wuerde in den runden Ecken abgeschnitten wirken. */
.site-nav a[aria-current="page"] {
  color: var(--brand);
  background: var(--brand-tint);
  padding-inline: 1.1em;
}
.site-nav .nav-cta {
  margin-left: auto;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  padding-inline: 1.1em;
}
.site-nav .nav-cta:hover { background: var(--brand-dark); color: #fff; }

/* Untermenü – öffnet per Hover und per Tastaturfokus */
.has-sub { position: relative; }
.has-sub > .sub {
  position: absolute;
  top: 100%; left: 0;
  z-index: 20;
  min-width: 17rem;
  margin: 0; padding: .4rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.has-sub:hover > .sub,
.has-sub:focus-within > .sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.sub a { font-weight: 500; white-space: nowrap; }

/* Aufklapp-Navigation nicht nur nach Breite, sondern auch nach Eingabeart:
   Ein Tablet mit 1024 px hat keinen Mauszeiger und kann ein Hover-Menü
   nicht bedienen – dort greift dieselbe Logik wie auf dem Handy. */
@media (max-width: 900px), (pointer: coarse) {
  .nav-toggle { display: inline-flex; }

  /* Telefon wird zur runden Schaltfläche – Zielgröße bleibt 44 px */
  .header__tel span { display: none; }
  .header__tel {
    width: 44px;
    padding: 0;
    border: 1px solid var(--brand-line);
  }
  .header__tel svg { width: 20px; height: 20px; }

  /* Geoeffnetes Menue: die Seite dahinter wird eingefroren (script.js
     merkt sich die Scrollposition und setzt sie beim Schliessen zurueck),
     die Kopfzeile haengt fest am oberen Bildschirmrand - egal, wie weit
     man vorher gescrollt hatte. Das Menue scrollt bei Bedarf in sich. */
  html.nav-is-open body {
    position: fixed;
    inset-inline: 0;
    width: 100%;
    overflow: hidden;
  }
  html.nav-is-open .site-header {
    position: fixed;
    top: 0;
    inset-inline: 0;
  }

  .site-nav { display: none; }
  .site-nav.is-open {
    display: block;
    max-height: calc(100dvh - var(--header-h) - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav__list { flex-direction: column; align-items: stretch; padding-bottom: 1rem; }
  .site-nav a { padding: .8em .9em; font-size: var(--step-0); }
  .site-nav .nav-cta { margin-left: 0; text-align: center; margin-top: .4rem; }

  .has-sub > .sub {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0;
    padding: 0 0 0 .9rem;
    border-left: 2px solid var(--brand-line);
    border-radius: 0;
    margin-bottom: .3rem;
  }
}

/* Ohne JavaScript bleibt die Navigation immer erreichbar */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .site-nav { display: block; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-y);
  background:
    radial-gradient(60rem 30rem at 85% -10%, var(--brand-tint-2), transparent 70%),
    var(--surface);
}
.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}
/* Auf schmalen Bildschirmen zählt, was ohne Scrollen sichtbar ist:
   Überschrift und Handlungsaufforderung stehen vor dem Bild.
   `display: contents` löst den Textblock auf, damit die einzelnen
   Elemente im Grid frei sortiert werden können. */
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero__body { display: contents; }

  .hero .eyebrow  { order: 1; }
  .hero h1        { order: 2; }
  .hero__sub      { order: 3; margin-bottom: 0; }
  .hero .btn-row  { order: 4; margin-block: 0; }
  .hero__media    { order: 5; }
  .hero__text     { order: 6; max-width: none; }
  .hero__list     { order: 7; margin: 0; }
  .hero__meta     { order: 8; margin-top: 0; }

  /* Vollstaendiges Hochformat, dafuer schmaler dargestellt:
     ungeschnitten, aber ohne den Bildschirm zu fuellen. */
  .hero__media img {
    max-width: 280px;
    margin-inline: auto;
  }
}

.hero h1 { margin-bottom: .35em; }
.hero__sub {
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--brand);
  margin-bottom: .8em;
}
.hero__text { color: var(--ink-soft); max-width: 46ch; }

.hero__list { margin: 1.5rem 0; gap: .6rem; }
.hero__list li { font-weight: 500; }

.hero__media img {
  width: 100%;
}

.hero__meta {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-mute);
}
.hero__meta strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   7. Vertrauensleiste
   -------------------------------------------------------------------------- */
.trustbar { border-block: 1px solid var(--line); background: var(--surface-alt); }
.trustbar__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  margin-block: 0;          /* margin-inline bleibt auto (.wrap) */
  padding: 1.5rem 0;
  list-style: none;
}
.trustbar__item {
  display: flex;
  gap: .7rem;
  /* mittig zum ganzen Textblock, nicht auf dessen erster Zeile */
  align-items: center;
  justify-content: center;   /* Zahl und Text mittig in ihrer Spalte */
  text-align: center;
}
.trustbar__num {
  font-size: var(--step-2);
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
}
.trustbar__label { font-size: var(--step--1); color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   8. Karten-Raster
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: var(--brand-line); }
.card h3 { margin-bottom: .45em; color: var(--ink); }
.card p { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; }

/* Ganze Karte klickbar, Linktext bleibt für Screenreader das Ziel */
.card__link { text-decoration: none; color: inherit; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__more {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--brand);
  font-weight: 650;
  font-size: var(--step--1);
}

.card__tag {
  align-self: flex-start;
  margin-bottom: .75rem;
  padding: .25em .7em;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Ablauf-Schritte
   -------------------------------------------------------------------------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 0; padding: 0;
  list-style: none;
}
.steps li {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -.85rem; left: 1.25rem;
  display: grid;
  place-items: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
}
.steps strong { display: block; margin-bottom: .3rem; }
.steps p { font-size: var(--step--1); color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   10. Video
   -------------------------------------------------------------------------- */
/* --- Videoabspieler -------------------------------------------------------
   Das Vorschaubild liegt als poster am <video>; der Abspielknopf wird erst
   von script.js eingeblendet. Ohne JavaScript bleibt der Abspieler des
   Browsers mit Vorschaubild sichtbar und benutzbar.
   ------------------------------------------------------------------------- */
.videoplayer {
  max-width: var(--video-max, 56rem);
  margin-inline: auto;
}
.videoplayer__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--brand-tint);
  box-shadow: var(--shadow-m);
}
.videoplayer__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--brand-tint);
}

.videoplayer__start {
  position: absolute;
  inset: 0;
  /* unten links statt in der Mitte: das Vorschaubild ist eine Textfolie,
     ein mittiger Knopf wuerde die Überschrift verdecken */
  display: grid;
  grid-template-columns: auto auto;
  align-content: end;
  justify-content: start;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: 1rem clamp(.9rem, 3vw, 1.6rem) clamp(1rem, 3.5vw, 1.8rem);
  border: 0;
  background: rgba(255, 255, 255, .2);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s ease;
}
.videoplayer__start:hover { background: rgba(255, 255, 255, .06); }
.videoplayer__start:focus-visible { outline: 3px solid var(--focus); outline-offset: -5px; }
.videoplayer.is-playing .videoplayer__start { display: none; }

.videoplayer__icon {
  display: grid;
  place-items: center;
  width: clamp(52px, 7vw, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 14px 34px -12px rgba(36, 29, 29, .5);
  transition: transform .2s ease, background-color .2s ease;
}
.videoplayer__icon::before {
  content: "";
  width: 32%;
  aspect-ratio: 1 / 1.15;
  margin-left: 12%;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.videoplayer__start:hover .videoplayer__icon { background: var(--brand-dark); transform: scale(1.06); }

.videoplayer__cap {
  padding: .45em 1.1em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-s);
  font-size: var(--step--1);
  font-weight: 650;
}
.videoplayer__cap span { color: var(--ink-mute); font-weight: 500; }

.videoplayer__caption {
  margin-top: .9rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-mute);
  text-align: center;
}

/* Auf dem Handy ist die Textfolie im Vorschaubild ohnehin zu klein zum
   Lesen; dort steht nur der Abspielknopf, mittig, und verdeckt nichts.
   Angetippt laeuft das Video im Vollbild - erst dort ist es lesbar. */
@media (max-width: 640px) {
  .videoplayer__start {
    grid-template-columns: auto;
    place-content: center;
    justify-content: center;
    padding: 1rem;
  }
  .videoplayer__cap { display: none; }
  .videoplayer__icon { width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .videoplayer__start, .videoplayer__icon { transition: none; }
  .videoplayer__start:hover .videoplayer__icon { transform: none; }
}
@media (forced-colors: active) {
  .videoplayer__start { background: Canvas; }
  .videoplayer__icon { background: ButtonText; }
  .videoplayer__icon::before { background: Canvas; }
}

/* --------------------------------------------------------------------------
   11. Buchungsauswahl
   -------------------------------------------------------------------------- */
.booking__grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.booking-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--surface);
  border: 2px solid var(--brand-line);
  border-radius: var(--radius-m);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.booking-card:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
  color: inherit;
}
.booking-card p { color: var(--ink-soft); font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   12. Bewertungen
   -------------------------------------------------------------------------- */
.rating-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1rem;
  margin-bottom: 2rem;
  font-weight: 600;
}
.stars { color: var(--star); letter-spacing: .12em; font-size: 1.15rem; }

/* Karussell als natives Scroll-Snap: funktioniert auch ohne JavaScript.
   Karten bleiben gleich hoch (align-items: stretch), sind aber breiter
   und enger gesetzt – dadurch bricht der Text seltener um. */
/* Genau eine Karte auf dem Handy, genau drei auf breiten Schirmen - es
   bleibt nie eine angeschnittene Karte stehen. Die Blaetterknoepfe
   springen seitenweise (siehe script.js). */
.reviews {
  --rv-luecke: clamp(.7rem, 1.4vw, 1.1rem);
  --rv-spalten: 1;
  display: flex;
  gap: var(--rv-luecke);
  margin: 0;
  padding: .3rem .3rem 1rem;
  /* Schnappunkte auf denselben Rand wie das Polster, sonst lugt eine
     Karte um die Polsterbreite hervor */
  scroll-padding-inline: .3rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.reviews::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .reviews { --rv-spalten: 3; } }
.reviews > li {
  flex: 0 0 calc((100% - (var(--rv-spalten) - 1) * var(--rv-luecke)) / var(--rv-spalten));
  scroll-snap-align: start;
}
/* <figure> bringt vom Browser 40 px Seitenrand mit - der liess die Karten
   schmaler wirken und riss grosse Luecken zwischen sie. */
.review { margin: 0; }
.review {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
}
.review .stars { font-size: 1rem; margin: 0; }
.review blockquote { margin: .45rem 0 .8rem; font-size: var(--step--1); line-height: 1.55; color: var(--ink); }
.review figcaption { margin-top: auto; font-size: .82rem; color: var(--ink-mute); font-weight: 600; }

.carousel-nav {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-top: .25rem;
}
.carousel-nav button {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--brand-line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.carousel-nav button:hover { background: var(--brand-tint); border-color: var(--brand); }
.carousel-nav button[disabled] { opacity: .35; cursor: default; }
html:not(.js) .carousel-nav { display: none; }

/* --------------------------------------------------------------------------
   13. FAQ – native <details>, ohne JavaScript bedienbar
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .75rem; }

.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.faq details[open] { border-color: var(--brand-line); box-shadow: var(--shadow-s); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-weight: 650;
  font-size: var(--step-0);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--brand-tint); }

.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 1.4rem; height: 1.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c3a46' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }

.faq__body { padding: 0 1.25rem 1.25rem; color: var(--ink-soft); }
.faq__body > :first-child { margin-top: 0; }
.faq__body strong { color: var(--ink); }

/* Quellenangabe unter einer Antwort */
.faq__source {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--ink-mute);
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: .2em;
  cursor: help;
}

/* Tabelle bleibt auf kleinen Bildschirmen horizontal scrollbar und
   zeigt am Rand einen Schatten als Hinweis darauf */
.table-wrap {
  overflow-x: auto;
  margin: 1rem 0;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent),
    linear-gradient(to left,  var(--surface) 30%, transparent) right,
    radial-gradient(farthest-side at 0 50%, rgba(48,30,30,.14), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(48,30,30,.14), transparent) right;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
caption { text-align: left; font-weight: 600; padding-bottom: .5rem; color: var(--ink-soft); }
th, td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { background: var(--brand-tint); color: var(--ink); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Kontakt-Abschluss
   -------------------------------------------------------------------------- */
.cta-band {
  padding-block: var(--section-y);
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color: #fff;
}
.cta-band h2, .cta-band p { color: #fff; }
.cta-band p { opacity: .93; }
.cta-band .btn {
  --btn-bg: #fff;
  --btn-fg: var(--brand-dark);
  --btn-bd: #fff;
}
.cta-band .btn:hover { --btn-bg: var(--brand-tint); color: var(--brand-dark); }
.cta-band .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255,255,255,.65);
}
.cta-band .btn--ghost:hover { --btn-bg: rgba(255,255,255,.14); color: #fff; }

/* --------------------------------------------------------------------------
   15. Fußbereich
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
  background: var(--ink);
  color: #e8dedc;
  font-size: var(--step--1);
}
.site-footer a { color: #f3e7e5; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer__grid h2 {
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .9rem;
}
.footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
/* Zielgröße ≥ 24 px (WCAG 2.5.8) für freistehende Links */
.footer__grid ul a,
.footer__bottom nav a { display: inline-block; padding-block: .3rem; }

/* Auf Touchgeräten großzügiger: 44 px, damit auch weniger
   treffsichere Finger zuverlässig landen */
@media (max-width: 860px), (pointer: coarse) {
  .footer__grid ul { gap: 0; }
  .footer__grid ul a,
  .footer__bottom nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }
  .footer__bottom nav { gap: 0 1.25rem; }
}
.footer__grid p { color: #cdbfbd; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-top: 1.5rem;
  color: #bdaeac;
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* ==========================================================================
   TEIL B – Bausteine der Unterseiten
   ========================================================================== */


/* --- Seitenkopf der Unterseiten ------------------------------------------- */
.pagehead {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
  background:
    radial-gradient(50rem 24rem at 80% -20%, var(--brand-tint-2), transparent 70%),
    var(--surface);
}
.pagehead__inner { max-width: 60ch; }
/* Ohne Bild bliebe rechts die halbe Seite leer: Ueberschrift ueber die
   volle Breite, Fliesstext weiterhin auf lesbarer Zeilenlaenge. */
.pagehead:not(.pagehead--split) .pagehead__inner { max-width: none; }
.pagehead:not(.pagehead--split) .pagehead__inner > p,
.pagehead:not(.pagehead--split) .pagehead__inner > ul,
.pagehead:not(.pagehead--split) .pagehead__inner > ol { max-width: 70ch; }
.pagehead h1 { margin-bottom: .3em; }
.pagehead .lead { margin-bottom: 1em; }

.pagehead--split .pagehead__inner { max-width: none; }
.pagehead--split .wrap {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
}
.pagehead--split img { border-radius: 0; box-shadow: none; }
@media (max-width: 800px) {
  /* minmax(0, …) statt 1fr: sonst diktiert der längste Wortbestandteil
     die Spaltenbreite und die Seite wird breiter als der Bildschirm */
  .pagehead--split .wrap { grid-template-columns: minmax(0, 1fr); }
  .pagehead--split .pagehead__media { order: 2; max-width: 22rem; margin-inline: auto; }
  .pagehead--split img { aspect-ratio: 3 / 2; object-fit: cover; object-position: center 22%; }
}

/* --- Fließtextbereiche ---------------------------------------------------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.8em; font-size: var(--step-2); }
.prose h3 { margin-top: 1.5em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }

/* Folgt innerhalb eines Abschnitts ein neuer Block, der mit einer
   Zwischenueberschrift beginnt, braucht er Luft nach oben. Ohne diese Regel
   klebt z. B. „Typische Anliegen" direkt am Absatz davor, weil die
   Ueberschrift das erste Kind eines neuen Bausteins ist und dort bewusst
   keinen eigenen Abstand hat. */
.section > .wrap > * + :is(h2, h3),
.section > .wrap > * + :is(div, aside, section, article):has(> :is(h2, h3):first-child) {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--brand); }

/* --- Hakenliste -----------------------------------------------------------
   Bewusst KEIN Grid auf dem <li>: dort wuerde jeder Inhalt nach einem
   <strong> zu einem eigenen Rasterfeld und in der schmalen Hakenspalte
   Wort fuer Wort umbrechen. Ein absolut positionierter Haken vertraegt
   beliebigen Inhalt. */
.check-list, .hero__list { list-style: none; padding: 0; display: grid; }
.check-list { gap: .7rem; }
.check-list li, .hero__list li { position: relative; padding-left: 2.1em; }
.check-list li::before, .hero__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .12em;
  width: 1.35em; height: 1.35em;
  border-radius: 50%;
  background: var(--brand-tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c3a46' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .8em no-repeat;
}

/* --- Hinweiskästen -------------------------------------------------------- */
.note {
  margin-block: 1.5rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border-radius: var(--radius-m);
  border: 1px solid var(--brand-line);
  background: var(--brand-tint);
}
.note > :first-child { margin-top: 0; }
.note h2, .note h3 { font-size: var(--step-1); margin-bottom: .5em; }

.note--quiet { background: var(--surface-alt); border-color: var(--line); }
.note--accent { border-left: 4px solid var(--brand); }
.note--source { background: var(--surface-alt); border-color: var(--line); font-size: var(--step--1); color: var(--ink-mute); }
.note--source a { color: var(--ink-soft); }

/* --- Download-Kasten ------------------------------------------------------ */
.download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Abstand kommt vom Abschnitt; mehrere Karten stehen dicht beieinander */
  margin-block: 0;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}
.download + .download { margin-top: .9rem; }
.download__text { flex: 1 1 16rem; min-width: 0; }
.download__text strong { display: block; margin-bottom: .15rem; }
.download__text span {
  display: block;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-soft);
}
.download__text p { font-size: var(--step--1); color: var(--ink-soft); margin: .25rem 0 0; }
.download strong { font-size: var(--step-0); }

/* --- Artikel mit Seitenspalte --------------------------------------------- */
.article {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  align-items: start;
}
@media (max-width: 900px) {
  .article { grid-template-columns: minmax(0, 1fr); }
  .article__side { order: 2; }
}
.article__side {
  position: sticky;
  top: calc(var(--header-offset) + 1rem);
  display: grid;
  gap: 1rem;
}
@media (max-width: 900px) { .article__side { position: static; } }

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-mute);
}

/* --- Linklisten ----------------------------------------------------------- */
.link-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .1rem;
}
/* Variante mit Kästen statt Zeilen (z. B. weiterführende Quellen) */
.link-list > a.note {
  display: block;
  /* .link-list a setzt padding:.4rem 0 – das schlaegt .note. Deshalb hier
     ausdruecklich wieder Innenabstand geben. */
  padding: clamp(1.1rem, 3vw, 1.5rem);
  min-height: 0;
  margin-block: 0;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, background-color .2s ease;
}
.link-list > a.note + a.note { margin-top: .75rem; }
.link-list > a.note strong { display: block; color: var(--brand); margin-bottom: .2rem; }
.link-list > a.note span { display: block; font-size: var(--step--1); color: var(--ink-soft); }
.link-list > a.note:hover { border-color: var(--brand); background: var(--brand-tint-2); }
.link-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: .5em;
  padding: .4rem 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.link-list li:last-child a { border-bottom: 0; }
.link-list a:hover { color: var(--brand); }
.link-list a::after { content: "→"; margin-left: auto; color: var(--brand); }

/* --- Kontaktformular ------------------------------------------------------ */
.form { display: grid; gap: 1.1rem; max-width: 38rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: var(--step--1); }
.field .hint { font-size: .82rem; color: var(--ink-mute); }
.field input, .field select, .field textarea {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: .7em .9em;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font-size: max(16px, var(--step-0));  /* verhindert Zoom beim Fokus in iOS */
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; }
.field--check input { width: 22px; min-height: 22px; height: 22px; margin-top: .25rem; }
.field--check label { font-weight: 400; font-size: var(--step--1); }
.required { color: var(--brand); }

.form-status { padding: 1rem 1.25rem; border-radius: var(--radius-m); font-weight: 600; }
.form-status--ok { background: #eaf5ee; color: var(--success); border: 1px solid #bfdfcb; }
.form-status--error { background: var(--brand-tint); color: var(--brand-dark); border: 1px solid var(--brand-line); }

/* ==========================================================================
   TEIL C – Bausteine, die aus dem alten Markup stammen und im neuen
   Design-System noch keine Entsprechung hatten.
   ========================================================================== */

/* --- Überschrift über einem FAQ-Block -------------------------------------- */
.faq-title {
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  font-size: var(--step-3);
  text-align: center;
}

/* --- Meta-Angaben über einem Ratgeber-Beitrag ------------------------------ */
.meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin: 0 0 1.5rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--line);
  list-style: none;
  font-size: var(--step--1);
  color: var(--ink-mute);
}
.meta-list li { display: flex; align-items: center; gap: .9rem; }
.meta-list li + li::before { content: "·"; color: var(--brand-line); }

/* --- Handlungsaufruf am Ende eines Beitrags -------------------------------- */
.article-cta {
  margin-top: 2.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-m);
  background: var(--brand-tint);
}
.article-cta > p:first-child { margin-top: 0; font-weight: 500; }
.article-cta .btn-row { margin-bottom: 0; }

/* --- Hinweisfeld „Pflegegrad online einschätzen" --------------------------- */
.calculator-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-block: 2rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-m);
  background:
    radial-gradient(40rem 18rem at 90% -40%, var(--brand-tint-2), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow-s);
}
.calculator-panel__content { flex: 1 1 22rem; }
.calculator-panel__content > :last-child { margin-bottom: 0; }
.calculator-panel__eyebrow {
  margin: 0 0 .4rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
}
.calculator-panel__content h2 { font-size: var(--step-2); margin-bottom: .4em; }
.calculator-panel__content p { color: var(--ink-soft); }
.calculator-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  flex: 0 1 auto;
}
@media (max-width: 640px) {
  .calculator-panel__actions { width: 100%; flex-direction: column; }
  .calculator-panel__actions .btn { width: 100%; }
}

/* --- Nummerierte Ablaufliste ----------------------------------------------- */
.steps-list {
  counter-reset: schritt;
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps-list li {
  position: relative;
  padding: 1.1rem 1.25rem 1.1rem 3.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}
.steps-list li::before {
  counter-increment: schritt;
  content: counter(schritt);
  position: absolute;
  left: 1.1rem;
  top: 1.05rem;
  display: grid;
  place-items: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
}
.steps-list strong { display: block; margin-bottom: .2rem; }
.steps-list br { display: none; }

/* --- Abschlussnachweis (Über mich) ----------------------------------------- */
.badge-panel { margin-block: 2rem; }
.badge-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}
/* Das Bild liegt mit 520 px vor – hier bewusst klein gehalten */
.abschluss-badge {
  width: clamp(120px, 28vw, 160px);
  height: auto;
  flex: 0 0 auto;
}
.badge-copy { flex: 1 1 16rem; min-width: 0; }
.badge-copy > :first-child { margin-top: 0; }
.badge-copy h2, .badge-copy h3 { font-size: var(--step-1); margin-bottom: .3em; }
.badge-copy p { color: var(--ink-soft); font-size: var(--step--1); }
.badge-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-top: .75rem;
  font-size: var(--step--1);
}
.badge-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- Video ----------------------------------------------------------------- */

/* --- Hinweis unter dem Kontaktformular ------------------------------------- */
.form-note {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--brand-line);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--surface-alt);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-soft);
}
.form-note strong { color: var(--ink); }

/* --- Kleinteile ------------------------------------------------------------ */
.md-guide-kicker,
.external-guides-intro {
  color: var(--ink-soft);
}
.md-guide-kicker {
  margin: 0 0 .4rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
}
.external-guides-note {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--ink-mute);
}

/* --- Reste aus dem Pflegegradrechner --------------------------------------- */
.pgcalc-compactintro { margin-bottom: 1.5rem; }
.pgcalc-compactintro__lead { color: var(--ink-soft); margin-bottom: 1rem; }

.pgcalc-specialcase {
  margin-top: 1.25rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-m);
  background: var(--surface);
}
.pgcalc-specialcase > br { display: none; }
.pgcalc-specialcase > h2,
.pgcalc-specialcase > h3 { font-size: var(--step-1); margin-top: 0; }
.pgcalc-specialcase__options {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}
.pgcalc-specialcase__option {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 48px;
  padding: .5rem 1rem;
  border: 2px solid var(--brand-line);
  border-radius: var(--radius-m);
  background: var(--surface);
  font-weight: 600;
  font-size: var(--step--1);
  cursor: pointer;
}
.pgcalc-specialcase__option:hover { border-color: var(--brand); }
.pgcalc-specialcase__option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-dark);
}

.pgcalc-specialnote {
  display: inline-block;
  margin-top: .5rem;
  padding: .25em .7em;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}
.pflegegrad-result { margin-top: 2rem; }
.pgcalc-printsheet__details { margin-top: 1rem; }


/* --- Aufklapper im Rechner als Schaltflaeche erkennbar --------------------
   Vorher nur eine Textzeile ohne Rahmen; jetzt dieselbe Anmutung wie die
   uebrigen Aufklapper der Seite, inklusive Pfeil und Zielgroesse. */
.pgcalc-compactinfo {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  overflow: hidden;
}
.pgcalc-compactinfo[open] {
  border-color: var(--brand-line);
  box-shadow: var(--shadow-s);
}
.pgcalc-compactinfo > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: .9rem 1.15rem;
  font-weight: 650;
  font-size: var(--step-0);
  color: var(--brand);
  cursor: pointer;
  list-style: none;
}
.pgcalc-compactinfo > summary::-webkit-details-marker { display: none; }
.pgcalc-compactinfo > summary:hover { background: var(--brand-tint); }
.pgcalc-compactinfo > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 1.3rem; height: 1.3rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c3a46' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .2s ease;
}
.pgcalc-compactinfo[open] > summary::after { transform: rotate(180deg); }
.pgcalc-compactinfo__body { padding: 0 1.15rem 1.15rem; }
.pgcalc-compactinfo__body > :first-child { margin-top: 0; }


/* --- Einwilligungen im Kontaktformular ------------------------------------ */
.consent-wrap {
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface-alt);
}
.consent-wrap + .consent-wrap { margin-top: .75rem; }
.consent-wrap--sensitive { border-color: var(--brand-line); background: var(--brand-tint); }

.consent-label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .75rem;
  cursor: pointer;
  /* Zielgroesse: die gesamte Zeile ist anklickbar */
  min-height: 44px;
}
.consent-label input[type="checkbox"] {
  width: 22px; height: 22px;
  margin: .15rem 0 0;
  accent-color: var(--brand);
  flex: 0 0 auto;
  cursor: pointer;
}
.consent-text { font-size: var(--step--1); line-height: 1.55; color: var(--ink-soft); }
.consent-text a { color: var(--brand); }

.is-hidden { display: none !important; }

/* --- Statusmeldung nach dem Absenden -------------------------------------- */
/* Das Feld enthaelt einen Zeilenumbruch und ist damit nicht :empty –
   es wurde deshalb als leerer Kasten sichtbar. Jetzt zaehlt der Zustand. */
#form-status:not(.is-success):not(.is-error) { display: none; }
#form-status {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-m);
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}
#form-status.is-success {
  background: #eaf5ee;
  border-color: #bfdfcb;
  color: var(--success);
}
#form-status.is-error {
  background: var(--brand-tint);
  border-color: var(--brand-line);
  color: var(--brand-dark);
}

/* --------------------------------------------------------------------------
   16. Bewegung – sparsam und abschaltbar
   -------------------------------------------------------------------------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   17. Hoher Kontrast & Druck
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   16b. Feinschliff für Touch und kleine Bildschirme
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --section-y: 2.75rem; }

  .section__head { margin-bottom: 1.5rem; }
  .card, .booking-card { padding: 1.15rem; }
  .faq summary { padding: 1rem; }
  .faq__body { padding: 0 1rem 1rem; }

  /* Karussell laeuft bis an den Seitenrand, die Karte bleibt aber
     vollstaendig: genau eine Karte je Ansicht, nichts lugt hervor. */
  .reviews {
    /* Luecke = Seitenrand: dann steht die naechste Karte exakt hinter
       dem Rand und lugt nicht hervor. */
    --rv-luecke: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }

  .trustbar__list { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .trustbar__item { flex-direction: column; gap: .1rem; align-items: center; }
  .trustbar__num { font-size: var(--step-1); }

  .steps li { padding: 1.4rem 1.1rem 1.1rem; }
}

/* Zeigefinger statt Mauszeiger: Hover-Effekte, die auf Touch
   „kleben" bleiben würden, werden dort abgeschaltet */
@media (hover: none) {
  .card:hover, .booking-card:hover, .btn:hover { transform: none; box-shadow: var(--shadow-s); }
}

@media (forced-colors: active) {
  .card, .booking-card, .faq details, .steps li { border: 1px solid CanvasText; }
  .btn { border: 2px solid ButtonText; }
}

@media print {
  .site-header, .cta-band, .carousel-nav, .btn-row, .videoplayer { display: none; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .faq details { border: 0; }
  .faq__body { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* --- Pflegegradrechner: Einstieg und Rechner gehoeren zusammen -------------
   Beide standen als eigene Abschnitte untereinander, mit vollem
   Abschnittspolster dazwischen - auf dem Bildschirm zwei klaffende Luecken.
   ------------------------------------------------------------------------- */
.pagehead + .section:has(> .wrap > .pgcalc-compactintro) {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.section:has(> .wrap > .pgcalc-compactintro) { padding-bottom: 0; }
.section:has(> .wrap > .pgcalc-shell) { padding-top: clamp(1.25rem, 3vw, 2rem); }