/* ============================================================
   MK Aesthetic & Longevity — Martyna Klama-Koteluk
   Stylesheet für die gesamte Website (index, impressum, datenschutz)
   ------------------------------------------------------------
   Farbwelt: hell, warmweiß, Akzent Roségold/Taupe (siehe :root).
   Farben hier zentral anpassen — sie wirken auf die ganze Seite.
   ============================================================ */

/* ---------- 1. Design-Token / Farbvariablen ---------- */
:root {
  /* Akzentfarben (Roségold / Taupe / Beige — an das Logo angelehnt) */
  --c-rosegold:       #a98a63;   /* Haupt-Akzent (Logo-Bronze) */
  --c-rosegold-dark:  #8a6f4d;   /* dunklere Variante für Hover/Text auf hell */
  --c-rosegold-light: #d9c3a9;   /* helle Variante für Verläufe/Ränder */
  --c-taupe:          #7c6a58;   /* gedecktes Taupe für Nebentexte */

  /* Flächen */
  --c-bg:        #fdfbf8;        /* Grundfläche: Warmweiß */
  --c-bg-soft:   #f7f1ea;        /* leicht getönte Abschnitte */
  --c-bg-card:   #ffffff;        /* Karten */

  /* Text */
  --c-text:      #3a332c;        /* Haupttext, warmes Dunkelbraun */
  --c-text-soft: #6f6458;        /* Nebentext */
  --c-heading:   #2e2822;        /* Überschriften */

  /* Sonstiges */
  --c-line:      #e9e0d5;        /* feine Trennlinien */
  --shadow-soft: 0 6px 24px rgba(90, 70, 45, 0.10);
  --shadow-hover: 0 10px 32px rgba(90, 70, 45, 0.16);
  --radius: 14px;

  /* Typografie: serifenlose System-Schriften (keine externen Fonts → DSGVO-freundlich) */
  --font-body: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Höhe der fixen Navigation — für Anker-Offsets */
  --nav-height: 72px;
}

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

html {
  scroll-behavior: smooth;
  /* Anker-Sprünge landen unterhalb der fixen Navigation */
  scroll-padding-top: calc(var(--nav-height) + 12px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  color: var(--c-heading);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(1.8rem, 4.5vw, 2.9rem); font-weight: 500; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 500; }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

a { color: var(--c-rosegold-dark); }
a:hover { color: var(--c-rosegold); }

/* Sichtbarer Fokus für Tastaturnutzung (Barrierefreiheit) */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--c-rosegold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 3. Layout-Helfer ---------- */
.container {
  width: min(1140px, 92%);
  margin: 0 auto;
}

.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--soft { background: var(--c-bg-soft); }

.section-head { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; }
.section-head .kicker {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
  color: var(--c-rosegold);
  margin-bottom: 0.6rem;
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.btn--primary {
  background: linear-gradient(135deg, var(--c-rosegold) 0%, var(--c-rosegold-dark) 100%);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn--primary:hover {
  color: #fff;
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--c-rosegold-dark);
  border-color: var(--c-rosegold);
}
.btn--ghost:hover { background: var(--c-rosegold); color: #fff; }

/* ---------- 5. Navigation ---------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-height);
  background: rgba(253, 251, 248, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
  z-index: 100;
}

.site-nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--c-heading);
}
.site-nav__brand img { height: 46px; width: auto; }
.site-nav__brand span {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  list-style: none;
  margin: 0 0 0 2.2rem;
  padding: 0;
  flex: 1;   /* nimmt den Platz rechts vom Logo ein … */
}

/* … damit der Termin-Button per auto-Rand ganz nach rechts rückt
   und links Raum für die Menüpunkte bleibt. */
.site-nav__cta { margin-left: auto; }
.site-nav__links a {
  text-decoration: none;
  color: var(--c-text);
  font-size: 0.98rem;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;   /* Menütitel nie mitten im Wort umbrechen */
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-nav__links a:hover { color: var(--c-rosegold-dark); border-color: var(--c-rosegold-light); }
.site-nav__links .btn { padding: 0.55rem 1.3rem; font-size: 0.92rem; }

/* Burger-Button (nur mobil sichtbar) */
.site-nav__toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}
.site-nav__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--c-heading);
  margin: 6px 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- Mega-Menü („Ästhetik" / „Orthomolekulare Medizin") --- */
.has-mega { position: relative; }

/* Der Kategorie-Button sieht aus wie ein normaler Nav-Link */
.mega-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.98rem;
  color: var(--c-text);
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;   /* „Orthomolekulare Medizin" bleibt einzeilig */
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mega-toggle:hover { color: var(--c-rosegold-dark); border-color: var(--c-rosegold-light); }
.mega-toggle .chevron { transition: transform 0.25s ease; color: var(--c-rosegold); }
.has-mega.is-open .mega-toggle .chevron { transform: rotate(180deg); }

/* Aufklappendes Panel (Desktop: schwebendes Dropdown) */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 265px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 0.6rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 120;
}
.has-mega.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega ul { list-style: none; margin: 0; padding: 0; }

/* Menüeinträge: Buttons (öffnen Modals) und Links teilen einen Look */
.mega button,
.mega a {
  display: block;
  width: 100%;
  padding: 0.55rem 1.3rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  color: var(--c-text);
  text-align: left;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.mega button:hover, .mega a:hover,
.mega button:focus-visible, .mega a:focus-visible {
  background: var(--c-bg-soft);
  color: var(--c-rosegold-dark);
}
.mega .mega__hint {
  display: block;
  font-size: 0.78rem;
  color: var(--c-taupe);
  letter-spacing: 0.03em;
}
.mega .mega__divider {
  border-top: 1px solid var(--c-line);
  margin: 0.45rem 0;
}

@media (max-width: 1050px) {
  .site-nav__toggle { display: block; }
  .site-nav__links {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-soft);
    display: none;
    padding: 0.5rem 0 1rem;
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
  }
  .site-nav__links.is-open { display: flex; }
  .site-nav__links li { text-align: center; }
  .site-nav__links a { display: inline-block; padding: 0.7rem 0; }
  .site-nav__brand span { display: none; }
  /* Mobil steht der Termin-Button einfach unten in der Liste */
  .site-nav__cta { margin: 0.6rem auto 0; }

  /* Mega-Menü wird mobil zum Accordion im Burger-Menü */
  .mega-toggle {
    width: 100%;
    justify-content: center;
    padding: 0.7rem 0;
  }
  .mega {
    position: static;
    transform: none;
    min-width: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--c-bg-soft);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  .has-mega.is-open .mega {
    transform: none;
    max-height: 640px;
    padding: 0.4rem 0;
  }
  .mega button, .mega a { text-align: center; padding: 0.55rem 1rem; }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  /* Verlauf bleibt als Grundlage und Fallback, falls das Bild fehlt */
  background:
    radial-gradient(ellipse at 75% 20%, rgba(217, 195, 169, 0.35) 0%, transparent 55%),
    linear-gradient(160deg, #fdfbf8 0%, #f6efe6 55%, #f0e6d8 100%);
  padding-top: calc(var(--nav-height) + clamp(2rem, 6vw, 4.5rem));
  padding-bottom: 0;
  overflow: hidden;
  isolation: isolate;   /* hält Hintergrund + Schleier unter dem Inhalt */
}

/* Großformatiges, unscharfes Hintergrundbild.
   Bewusst größer als der Hero (Skalierung + Überstand), damit beim
   Parallax-Versatz und durch den Weichzeichner keine Kanten sichtbar werden.
   Bildwechsel: einfach das src im <img class="hero__bg-img"> tauschen. */
.hero__bg {
  position: absolute;
  inset: -12% -6%;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Unschärfe bewusst dezent: das Motiv bleibt erkennbar, tritt aber
     hinter Claim und Team-Motiv zurück. Wert hier anpassen, falls es
     schärfer (kleiner) oder weicher (größer) sein soll. */
  filter: blur(7px) saturate(0.9);
  transform: scale(1.1);
  will-change: transform;
}

/* Heller Schleier über dem Bild — sichert die Lesbarkeit von Claim und
   Button und hält die Seite in der ruhigen, hellen Farbwelt. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(253, 251, 248, 0.94) 0%,
      rgba(253, 251, 248, 0.86) 38%,
      rgba(250, 244, 236, 0.62) 65%,
      rgba(247, 238, 227, 0.50) 100%),
    linear-gradient(to bottom, rgba(253, 251, 248, 0.55) 0%, transparent 30%);
}
/* Auf schmalen Schirmen liegt der Text über dem Bild → kräftiger aufhellen */
@media (max-width: 820px) {
  .hero__veil {
    background: linear-gradient(to bottom,
      rgba(253, 251, 248, 0.93) 0%,
      rgba(253, 251, 248, 0.88) 55%,
      rgba(250, 244, 236, 0.75) 100%);
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2rem;
  align-items: end;
}

.hero__text { padding-bottom: clamp(2.5rem, 6vw, 5rem); }

.hero__claim {
  font-weight: 400;
  color: var(--c-heading);
}
.hero__claim strong { font-weight: 600; color: var(--c-rosegold-dark); }

.hero__sub {
  color: var(--c-text-soft);
  max-width: 46ch;
  margin-bottom: 1.8rem;
}

.hero__figure { margin: 0; position: relative; }
.hero__figure img {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  /* das PNG ist freigestellt — steht direkt auf dem Verlauf */
  filter: drop-shadow(0 18px 30px rgba(90, 70, 45, 0.18));
}

/* Namenszuordnung unter dem Team-Bild.
   Liegt über dem unscharfen Hintergrundbild → heller Träger und
   kräftigere Schriftfarbe sichern die Lesbarkeit. */
.hero__names {
  width: fit-content;
  max-width: 100%;
  margin: 0.7rem auto 1.2rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--c-text);
  letter-spacing: 0.04em;
  padding: 0.5rem 1.1rem;
  background: rgba(253, 251, 248, 0.82);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.hero__names strong { color: var(--c-heading); font-weight: 600; }

@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__text { padding-bottom: 0.5rem; text-align: center; }
  .hero__sub { margin-inline: auto; }
}

/* ---------- 7. Intro-Text ---------- */
.intro { text-align: center; }
.intro blockquote {
  margin: 0 auto 1.5rem;
  max-width: 820px;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.6;
  color: var(--c-heading);
  font-weight: 400;
}
.intro__note {
  max-width: 720px;
  margin: 0 auto;
  color: var(--c-text-soft);
  font-size: 0.98rem;
}

/* ---------- 8. Feature-Grid „Warum wir" ----------
   Bewusst festes 3×2-Raster (6 Punkte): Desktop 3 Spalten × 2 Reihen,
   Tablet 2 Spalten, Mobil 1 Spalte. Gleiche Spaltenbreiten und
   gleiche Kartenhöhen pro Reihe → ruhiges, symmetrisches Bild. */
.features {
  display: grid;
  /* minmax(0, …) verhindert, dass lange Wörter die Spalten aufdehnen */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  align-items: stretch;   /* alle Karten einer Reihe gleich hoch */
}
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: minmax(0, 1fr); } }

.feature {
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem;
  text-align: center;
  /* füllt die Rasterzelle vollständig aus → identische Kartenhöhen */
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }

.feature__icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3e9dc, #e7d7c2);
  color: var(--c-rosegold-dark);
}
.feature__icon svg { width: 28px; height: 28px; }
.feature h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.feature p { font-size: 0.95rem; color: var(--c-text-soft); margin: 0; }

/* ---------- 9. Behandlungs-Kacheln ----------
   Festes, gleichmäßiges Raster statt auto-fill: 12 Kacheln ergeben so
   Desktop 4+4+4, Tablet 3er-Reihen, Mobil 2er-Reihen — immer voll. */
/* minmax(0, 1fr) statt 1fr: Raster-Spalten dürfen sich sonst von langen,
   unumbrechbaren Wörtern (z. B. „Mikronährstofftherapie") aufdehnen. Das
   führte auf Mobilgeräten zu waagerechtem Überlaufen der ganzen Seite. */
.treatments {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.3rem;
  align-items: start;
}
@media (max-width: 1024px) { .treatments { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .treatments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 0.9rem; } }

.treatment-card {
  position: relative;
  min-width: 0;              /* darf schmaler werden als sein Inhalt */
  border: none;
  border-radius: var(--radius);
  padding: 1.4rem 1rem 1.2rem;
  cursor: pointer;
  text-align: center;
  font: inherit;
  background: transparent;
  transition: transform 0.25s ease;
}
/* Lange Fachwörter dürfen umbrechen bzw. getrennt werden (lang="de") */
.treatment-card h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}
.treatment-card:hover { transform: translateY(-4px); }

/* ---- Medien-Container der Kachel ----------------------------------
   RUNDER RAHMEN, der zwei Inhalte aufnehmen kann — das Layout bleibt
   in beiden Fällen exakt gleich:

     a) Icon  (aktueller Stand):
        <span class="kachel-media">
          <svg class="kachel-media__icon"><use href="#i-botox"/></svg>
        </span>

     b) Foto  (später):
        <span class="kachel-media">
          <img class="kachel-media__img" src="assets/img/…" alt="">
        </span>

   Zum Wechseln also nur den Inhalt des <span class="kachel-media">
   austauschen — Größe, Rundung, Rahmen und Hover bleiben unverändert.
------------------------------------------------------------------- */
.kachel-media {
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--c-rosegold-light);
  box-shadow: var(--shadow-soft);
  /* Roségold/Taupe-Verlauf — trägt das Icon, liegt hinter einem Foto */
  background: linear-gradient(140deg, #f2e6d6 0%, #e2cbaf 55%, #cfae87 100%);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.treatment-card:hover .kachel-media {
  box-shadow: var(--shadow-hover);
  border-color: var(--c-rosegold);
}

/* Variante a) Fine-Line-Icon */
.kachel-media__icon {
  width: 54px;
  height: 54px;
  color: #fff;
  transition: transform 0.45s ease;
}
.treatment-card:hover .kachel-media__icon { transform: scale(1.08); }

/* Variante b) rundes Foto — füllt denselben Kreis vollständig aus */
.kachel-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* leichte Beruhigung, damit alle Fotos in einer Farbstimmung liegen */
  filter: saturate(0.94);
  transition: transform 0.45s ease, filter 0.45s ease;
}
.treatment-card:hover .kachel-media__img {
  transform: scale(1.07);          /* sanfter Zoom */
  filter: brightness(1.05);        /* leichtes Aufhellen */
}

/* Modifier für farbintensive Aufnahmen (z. B. ein rotes LED-Rotlichtfoto):
   nimmt die Sättigung stärker herunter, damit die Kachel nicht aus der
   ruhigen Roségold-Reihe ausbricht.  →  class="kachel-media kachel-media--muted" */
.kachel-media--muted .kachel-media__img {
  filter: saturate(0.5) brightness(1.12) contrast(0.95);
}

@media (max-width: 700px) {
  .kachel-media { width: 118px; height: 118px; }
  .kachel-media__icon { width: 44px; height: 44px; }
  /* etwas kleiner, damit lange Fachwörter ruhiger umbrechen */
  .treatment-card { padding: 1.2rem 0.5rem 1rem; }
  .treatment-card h3 { font-size: 0.97rem; }
}

.treatment-card h3 { margin: 0; font-size: 1.06rem; }
.treatment-card__sub {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.83rem;
  color: var(--c-taupe);
  letter-spacing: 0.05em;
}
.treatment-card__more {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--c-rosegold-dark);
  font-weight: 600;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.treatment-card:hover .treatment-card__more { opacity: 1; }

/* ---------- 10. Modals ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(46, 40, 34, 0.55);
  backdrop-filter: blur(3px);
}
.modal[hidden] { display: none; }

.modal__dialog {
  background: var(--c-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  width: min(720px, 100%);
  max-height: min(84vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-soft);
}
.modal__header h3 { margin: 0; font-size: 1.25rem; }

.modal__close {
  flex: none;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--c-bg-card);
  color: var(--c-heading);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 0.2s ease, color 0.2s ease;
}
.modal__close:hover { background: var(--c-rosegold); color: #fff; }

.modal__content {
  padding: 1.4rem 1.6rem 1.8rem;
  overflow-y: auto;   /* Inhalt innerhalb des Modals scrollbar */
}
.modal__content h4 {
  font-size: 1.02rem;
  margin: 1.3em 0 0.3em;
  color: var(--c-rosegold-dark);
}
.modal__content h4:first-child { margin-top: 0; }
.modal__content ul { margin: 0.3em 0 1em; padding-left: 1.2em; }
.modal__content li { margin-bottom: 0.35em; }

/* Kein Hintergrund-Scrollen bei offenem Modal (Klasse setzt main.js) */
body.modal-open { overflow: hidden; }

/* ---- Blättern durch die Behandlungen einer Kategorie ----
   Die Leiste wird von main.js in jedes Behandlungs-Modal eingefügt
   (siehe Abschnitt „Modal-Navigation"). */
.modal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 1.6rem;
  border-top: 1px solid var(--c-line);
  background: var(--c-bg-soft);
  flex: none;
}

.modal__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-bg-card);
  color: var(--c-rosegold-dark);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.modal__nav-btn:hover { background: var(--c-rosegold); color: #fff; box-shadow: var(--shadow-soft); }
.modal__nav-btn svg { width: 16px; height: 16px; }

/* Kategorie und Position, z. B. „Ästhetik · 3 / 12" */
.modal__nav-pos {
  font-size: 0.82rem;
  color: var(--c-taupe);
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .modal__nav { padding: 0.8rem 1rem; gap: 0.4rem; }
  .modal__nav-btn { padding: 0.5rem 0.8rem; font-size: 0.82rem; }
  /* Auf kleinen Schirmen nur die Pfeile zeigen, Beschriftung ausblenden */
  .modal__nav-btn span { display: none; }
  .modal__nav-pos { font-size: 0.76rem; }
}

/* ---------- Back-to-Top-Button ----------
   Fixiert unten rechts; erscheint erst nach etwas Scrollen. */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-rosegold-light);
  border-radius: 50%;
  background: var(--c-bg-card);
  color: var(--c-rosegold-dark);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  z-index: 90;               /* unter Navigation (100) und Modal (200) */
  /* ausgeblendet, bis genug gescrollt wurde */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease,
              visibility 0.3s, background 0.2s ease, color 0.2s ease;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover {
  background: var(--c-rosegold);
  color: #fff;
  box-shadow: var(--shadow-hover);
}
.to-top svg { width: 20px; height: 20px; }

/* ---------- 11. Vergleichsblock als Carousel ----------
   Ein Slide pro Behandlung. Alle Slides haben denselben Aufbau in
   derselben Reihenfolge (Titel → Beschreibung → Beispiele → Ideal für),
   damit sich die Behandlungen direkt vergleichen lassen. */
/* Gemeinsame Inhaltsbreite für Carousel, „Kurz erklärt" und den
   Abschluss-Block — dadurch fluchtet der ganze Abschnitt ruhig. */
:root { --breite-vergleich: 980px; }

.carousel {
  position: relative;
  max-width: var(--breite-vergleich);
  margin: 0 auto 3rem;
}

/* Sichtfenster: zeigt genau einen Slide.
   Die Höhe wird von main.js auf den aktiven Slide gesetzt und weich
   überblendet — so entsteht unter kürzeren Slides kein Leerraum. */
.carousel__viewport {
  overflow: hidden;
  border-radius: var(--radius);
  transition: height 0.45s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.carousel__track {
  display: flex;
  align-items: flex-start;   /* jede Karte behält ihre eigene Höhe */
  transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0.4rem;   /* Luft, damit der Kartenschatten nicht abschneidet */
  display: flex;
}

/* Karte im Slide — feste Struktur, damit die Blöcke auf jedem Slide
   an derselben Stelle stehen. */
.compare-card {
  flex: 1;                 /* füllt die Slide-Breite */
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-top: 4px solid var(--c-rosegold-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.7rem clamp(1.1rem, 3vw, 2.1rem) 1.5rem;
  display: grid;
  /* Zeilen: Titel | Beschreibung | Listenbereich | Button.
     Inhalt packt nach oben (align-content: start), damit der Button
     direkt unter den Listen sitzt statt am Kartenboden zu „schweben".
     Die Kartenhöhe bleibt über alle Slides gleich — nichts springt. */
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 0.15rem;
  min-height: 300px;
}

/* Listenbereich: „Beispiele" und „Ideal für" liegen NEBENEINANDER,
   jede Liste intern zweispaltig. Die Kartenbreite wird damit in vier
   Spalten genutzt — kompakt statt hoch und leer. */
.compare-card__listen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1.6rem;
  align-content: start;
}
@media (max-width: 620px) {
  /* Auf schmalen Schirmen untereinander und je einspaltig */
  .compare-card__listen { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}
.compare-card h3 { font-size: 1.18rem; margin-bottom: 0.25rem; }
.compare-card > p { font-size: 0.92rem; color: var(--c-text-soft); margin-bottom: 0.5rem; }
.compare-card__label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-rosegold);
  margin: 0.45em 0 0.3em;
  font-weight: 600;
}
.compare-card ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.9rem;
  color: var(--c-text-soft);
  columns: 2;              /* zwei Unterspalten je Block → 4 insgesamt */
  column-gap: 1.1rem;
}
.compare-card li {
  break-inside: avoid;
  margin-bottom: 0.3em;
  overflow-wrap: break-word;
}
/* Button zentriert und dicht unter den Listen */
.compare-card .btn {
  justify-self: center;
  margin-top: 1.1rem;
  font-size: 0.88rem;
  padding: 0.5rem 1.1rem;
}
@media (max-width: 620px) {
  .compare-card { min-height: 360px; }
  .compare-card ul { columns: 1; }   /* schmal: alles einspaltig */
}

/* --- Steuerung: Pfeile --- */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-bg-card);
  color: var(--c-rosegold-dark);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  z-index: 2;
}
.carousel__arrow:hover { background: var(--c-rosegold); color: #fff; box-shadow: var(--shadow-hover); }
.carousel__arrow svg { width: 20px; height: 20px; }
.carousel__arrow--prev { left: -14px; }
.carousel__arrow--next { right: -14px; }
/* Auf schmalen Schirmen unter den Slide rücken, damit nichts überlappt */
@media (max-width: 900px) {
  .carousel__arrow { top: auto; bottom: -62px; transform: none; }
  .carousel__arrow--prev { left: calc(50% - 62px); }
  .carousel__arrow--next { right: calc(50% - 62px); }
  .carousel { margin-bottom: 5.5rem; }
}

/* --- Steuerung: Punkte --- */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.4rem;
}
.carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--c-rosegold-light);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.carousel__dot:hover { background: var(--c-rosegold); }
.carousel__dot[aria-selected="true"] {
  background: var(--c-rosegold-dark);
  transform: scale(1.35);
}

/* ---------- „Kurz erklärt" — hervorgehobener Block ----------
   Weiße Karte mit dezentem Schatten, gerahmt von zwei zentrierten
   Akzentlinien, die nur 75 % der Breite einnehmen. */
.quick-box {
  max-width: var(--breite-vergleich);
  margin: 0 auto 2.5rem;
  text-align: center;
}

/* Trennlinien ober- und unterhalb: 75 % Breite, zentriert, Roségold */
.quick-box__rule {
  width: 75%;
  height: 1px;
  margin: 0 auto;
  border: none;
  background: linear-gradient(to right,
    transparent 0%,
    var(--c-rosegold-light) 15%,
    var(--c-rosegold) 50%,
    var(--c-rosegold-light) 85%,
    transparent 100%);
}

.quick-box__card {
  background: var(--c-bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  margin: 1.8rem 0;
}
.quick-box__card h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin-bottom: 0.4rem;
}
.quick-box__intro {
  color: var(--c-text-soft);
  font-size: 0.96rem;
  margin-bottom: 1.6rem;
}

.quick-facts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .quick-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .quick-facts { grid-template-columns: 1fr; } }

.quick-fact {
  background: var(--c-bg-soft);
  border-radius: var(--radius);
  padding: 1.2rem 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--c-text-soft);
}
.quick-fact strong {
  display: block;
  color: var(--c-heading);
  font-size: 0.98rem;
  margin-bottom: 0.55rem;
}
/* Feine Akzentlinie unter jeder Behandlungs-Überschrift — dieselbe
   Optik wie die Linien ober-/unterhalb des Blocks, nur kurz. */
.quick-fact strong::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 0.5rem auto 0;
  background: linear-gradient(to right,
    transparent 0%,
    var(--c-rosegold) 50%,
    transparent 100%);
}

/* Fine-Line-Icon-Badge (ersetzt die früheren Emojis) */
.icon-badge {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3e9dc, #e7d7c2);
  color: var(--c-rosegold-dark);
  margin-bottom: 0.45rem;
}
.icon-badge svg { width: 22px; height: 22px; }

/* Kleines Inline-Icon neben Überschriften (Vergleichskarten, Modals) */
.icon-inline {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -3px;
  margin-right: 0.45rem;
  color: var(--c-rosegold);
}

.compare-outro {
  max-width: var(--breite-vergleich);
  margin: 0 auto;
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  box-shadow: var(--shadow-soft);
}

/* ---------- 12. Über Martyna ---------- */
.about {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 820px) { .about { grid-template-columns: 1fr; } }

.about__figure { margin: 0; }
.about__figure img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.about__quote {
  font-size: 1.02rem;
  color: var(--c-text);
}

/* 4 anklickbare Icon-Karten (Accordion) */
.about-icons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2.2rem;
  /* WICHTIG: Ohne align-items:start streckt das Raster die Nachbarkarte
     einer Reihe auf die Höhe der geöffneten Karte. Die Nachbarkarte sah
     dadurch aus, als würde sie „leer mitaufgehen". Jede Karte behält nun
     ihre eigene Höhe. */
  align-items: start;
}
@media (max-width: 560px) { .about-icons { grid-template-columns: 1fr; } }

.about-icon {
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.about-icon__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.2s ease;
}
.about-icon__toggle:hover { background: var(--c-bg-soft); }
.about-icon__badge {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3e9dc, #e7d7c2);
  color: var(--c-rosegold-dark);
}
.about-icon__badge svg { width: 22px; height: 22px; }
.about-icon__toggle strong { display: block; font-size: 0.98rem; color: var(--c-heading); }
.about-icon__toggle small { display: block; font-size: 0.85rem; color: var(--c-text-soft); }
.about-icon__chevron {
  margin-left: auto;
  flex: none;
  transition: transform 0.25s ease;
  color: var(--c-rosegold);
}
.about-icon__toggle[aria-expanded="true"] .about-icon__chevron { transform: rotate(180deg); }

.about-icon__panel {
  padding: 0 1.1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.about-icon__panel.is-open { padding: 0 1.1rem 1.1rem; }
.about-icon__panel p { font-size: 0.93rem; color: var(--c-text-soft); margin: 0; }

/* ---------- 13. Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
@media (max-width: 820px) { .team-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.team-card {
  background: var(--c-bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.team-card img {
  width: 100%;
  aspect-ratio: 3 / 3.4;
  object-fit: cover;
  object-position: top center;
}
.team-card__body { padding: 1.3rem 1.4rem 1.5rem; }
.team-card__body h3 { margin-bottom: 0.15rem; font-size: 1.12rem; }
.team-card__role {
  font-size: 0.88rem;
  color: var(--c-rosegold-dark);
  letter-spacing: 0.04em;
  margin-bottom: 0.7rem;
}
.team-card__quote { font-size: 0.95rem; color: var(--c-text-soft); font-style: italic; margin: 0; }

/* ---------- 14. Praxis-Impressionen ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* ---------- 15. FAQ-Accordion (leicht, offen, viel Weißraum) ----------
   Kein Kasten pro Frage, sondern feine Trennlinien; links ein runder
   Icon-Button in der Akzentfarbe, der von Plus auf Minus wechselt. */
.faq { max-width: 860px; margin: 0 auto; }

.faq-item {
  border-bottom: 1px solid var(--c-line);   /* feine Trennlinie */
}
.faq-item:first-child { border-top: 1px solid var(--c-line); }

.faq-item__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem 0.4rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-heading);
  text-align: left;
  transition: color 0.2s ease;
}
.faq-item__toggle:hover { color: var(--c-rosegold-dark); }

/* Runder Plus/Minus-Button in der Akzentfarbe.
   Steht im HTML nach dem Fragetext (rein dekorativ, aria-hidden) und
   wird per order links davor gezogen. */
.faq-item__icon {
  order: -1;
  flex: none;
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3e9dc, #e7d7c2);
  color: var(--c-rosegold-dark);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
/* Plus aus zwei Strichen — der senkrechte verschwindet beim Öffnen */
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.faq-item__icon::before { width: 14px; height: 2px; }              /* waagerecht */
.faq-item__icon::after  { width: 2px;  height: 14px; }             /* senkrecht  */

.faq-item__toggle:hover .faq-item__icon {
  background: var(--c-rosegold);
  color: #fff;
}
.faq-item__toggle[aria-expanded="true"] .faq-item__icon {
  background: var(--c-rosegold);
  color: #fff;
  transform: rotate(180deg);
}
/* geöffnet: senkrechter Strich weg → aus dem Plus wird ein Minus */
.faq-item__toggle[aria-expanded="true"] .faq-item__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
}

.faq-item__panel {
  max-height: 0;
  overflow: hidden;
  /* Antwort auf Höhe der Frage eingerückt (Icon-Breite + Abstand) */
  padding: 0 0.4rem 0 calc(38px + 1.1rem + 0.4rem);
  transition: max-height 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), padding 0.4s ease;
}
.faq-item__panel.is-open { padding-bottom: 1.6rem; }
.faq-item__panel p {
  color: var(--c-text-soft);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0;
  /* zarter Akzentstrich links am Antworttext */
  border-left: 2px solid var(--c-rosegold-light);
  padding-left: 1.1rem;
}
@media (max-width: 560px) {
  .faq-item__toggle { font-size: 0.99rem; gap: 0.8rem; padding: 1.2rem 0.2rem; }
  .faq-item__panel { padding-left: calc(38px + 0.8rem + 0.2rem); }
}

/* ---------- 16. Buchung / Bewertungen ---------- */
.booking {
  text-align: center;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(217, 195, 169, 0.35) 0%, transparent 55%),
    linear-gradient(160deg, #f6efe6 0%, #efe4d3 100%);
}
.booking .btn--primary { font-size: 1.1rem; padding: 1rem 2.6rem; }
.booking__reviews {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.review-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--c-text);
  font-size: 0.95rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: var(--c-text); }
.review-badge .stars { color: #e8b03c; letter-spacing: 0.1em; }

/* ---------- 17. Footer ---------- */
.site-footer {
  background: #2e2822;
  color: #cfc5b8;
  padding: 3rem 0 2rem;
  font-size: 0.95rem;
}
.site-footer a { color: #e7d7c2; text-decoration: none; }
.site-footer a:hover { color: #fff; }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (max-width: 700px) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer h4 {
  color: #fff;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.8rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer__logo { height: 54px; width: auto; margin-bottom: 0.8rem; }

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.2rem;
  text-align: center;
  font-size: 0.85rem;
  color: #a3988a;
}

/* ---------- 17b. Preisliste ---------- */
.price-group { margin-bottom: 3rem; }
.price-group__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}
.price-group__head .icon-badge { margin-bottom: 0; }
.price-group__head h2 { margin: 0; font-size: 1.5rem; }

/* Tabelle in einer Karte; auf schmalen Schirmen seitlich scrollbar */
.price-table-wrap {
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow-x: auto;
}
.price-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.97rem;
}
.price-table th,
.price-table td {
  padding: 0.95rem 1.3rem;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.price-table thead th {
  background: var(--c-bg-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-rosegold-dark);
  font-weight: 600;
  white-space: nowrap;
}
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table tbody tr { transition: background 0.18s ease; }
.price-table tbody tr:hover { background: var(--c-bg-soft); }
.price-table th[scope="row"] { font-weight: 600; color: var(--c-heading); }
.price-table .price-detail { color: var(--c-text-soft); font-size: 0.93rem; }
.price-table .price-value {
  white-space: nowrap;
  font-weight: 600;
  color: var(--c-rosegold-dark);
  text-align: right;
}

.price-note {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.93rem;
  color: var(--c-text-soft);
  background: var(--c-bg-soft);
  border-radius: var(--radius);
  padding: 1.2rem 1.6rem;
}

/* ---- Preisliste auf Mobilgeräten ----
   Waagerechtes Scrollen in einer Tabelle ist auf dem Handy unangenehm.
   Deshalb wird die Tabelle unter 760px zu einer Liste aus Karten
   umgebaut: pro Behandlung eine Karte mit Name, Details und Preis
   untereinander. Der Tabellenkopf wird ausgeblendet (die Bedeutung
   ergibt sich aus der Anordnung), die Tabellensemantik bleibt für
   Screenreader über die scope-Attribute erhalten. */
@media (max-width: 760px) {
  .price-table-wrap {
    /* kein Scrollcontainer mehr — die Karten tragen die Optik */
    overflow-x: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  .price-table { min-width: 0; display: block; font-size: 1rem; }
  .price-table thead { display: none; }
  .price-table tbody { display: block; }

  .price-table tr {
    display: block;
    background: var(--c-bg-card);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1rem 1.15rem;
    margin-bottom: 0.85rem;
  }
  .price-table tbody tr:hover { background: var(--c-bg-card); }

  /* Behandlungsname als Überschrift der Karte */
  .price-table th[scope="row"] {
    display: block;
    border: none;
    padding: 0;
    font-size: 1.02rem;
    line-height: 1.4;
  }

  /* Details darunter, ruhig und kleiner */
  .price-table .price-detail {
    display: block;
    border: none;
    padding: 0.3rem 0 0;
  }

  /* Preis abgesetzt durch eine feine Linie, linksbündig */
  .price-table .price-value {
    display: block;
    border: none;
    text-align: left;
    padding: 0.6rem 0 0;
    margin-top: 0.6rem;
    border-top: 1px solid var(--c-line);
    font-size: 1.02rem;
  }

  /* Leere Detailzelle würde sonst eine Lücke erzeugen */
  .price-table .price-detail:empty { display: none; }
}

/* ---------- 18. Rechtsseiten (Impressum / Datenschutz) ---------- */
.legal {
  padding-top: calc(var(--nav-height) + 3rem);
  max-width: 820px;
}
.legal h1 { margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.3rem; margin-top: 2.2rem; }
.legal address { font-style: normal; }

/* ---------- 19. Scroll-Reveal-Animationen ----------
   Die Klasse .reveal wird per JavaScript vergeben (main.js) und
   .is-visible beim Reinscrollen gesetzt. Ohne JavaScript oder bei
   prefers-reduced-motion bleibt alles normal sichtbar. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- 20. Ruhiger Hero-Akzent ----------
   Ein sehr langsamer, weicher Lichtschimmer im Hero-Verlauf.
   Stört die Lesbarkeit nicht und wird bei reduzierter Bewegung
   abgeschaltet. */
.hero { position: relative; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 30% 30%,
              rgba(255, 250, 242, 0.55) 0%, transparent 70%);
  animation: hero-shimmer 16s ease-in-out infinite alternate;
}
.hero > .container { position: relative; }   /* Inhalt über dem Schimmer */

@keyframes hero-shimmer {
  from { transform: translateX(-4%); opacity: 0.5; }
  to   { transform: translateX(5%);  opacity: 0.9; }
}

/* ---------- 21. Reduzierte Bewegung respektieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; } /* alles sofort sichtbar */
  .hero::before { display: none; }
}