/* =========================================================
   Physiotherapie und Manuelle Therapie Tanja Hellwig
   Stylesystem · Altrosa-Farbwelt · Anthrazit-Typografie
   Design-DNA angelehnt an tictoys.de — ruhig, hochwertig
   ========================================================= */

/* ---------------------------------------------------------
   1. RESET & BASE
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Lange deutsche Wörter auf Mobile sicher umbrechen — Fließtext darf mitten im Wort brechen, Überschriften nutzen stattdessen Silbentrennung */
p, li, a, span, blockquote, label {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

img { max-width: 100%; display: block; }
a  { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
h1,h2,h3,h4,h5 { margin: 0; font-weight: 500; }
p { margin: 0; }
hr { border: 0; height: 1px; background: var(--line); margin: 24px 0; }

/* ---------------------------------------------------------
   2. VARIABLES
   --------------------------------------------------------- */
:root {
  /* Altrosa-Palette */
  --rose-deeper:  #8B5362;
  --rose-deep:    #A86876;
  --rose-primary: #C58697;
  --rose-medium:  #D9A8B3;
  --rose-light:   #E9C6CD;
  --rose-powder:  #F3DBE0;
  --rose-blush:   #F9E6E9;
  --rose-mist:    #FDF3F4;
  --rose-cream:   #FBF3F3;

  /* Anthrazit */
  --ink:       #2D2A2F;
  --ink-soft:  #4A464C;
  --ink-mute:  #706B72;
  --ink-faint: #A7A2A8;

  /* Neutral */
  --bg:    #FFFFFF;
  --line:  rgba(45, 42, 47, 0.08);
  --line-soft: rgba(168, 104, 118, 0.15);

  --shadow-xs: 0 1px 3px rgba(45, 42, 47, 0.04);
  --shadow-sm: 0 2px 12px rgba(168, 104, 118, 0.08);
  --shadow-md: 0 16px 40px rgba(168, 104, 118, 0.10);
  --shadow-lg: 0 30px 70px rgba(168, 104, 118, 0.16);

  /* Radii */
  --r-xs:  8px;
  --r-sm:  14px;
  --r-md:  22px;
  --r-lg:  32px;
  --r-xl:  44px;
  --r-pill: 999px;

  /* Spacing */
  --sec-py: clamp(90px, 10vw, 150px);
  --gap:    clamp(24px, 3vw, 40px);
}

/* ---------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.08;
}

h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.3; font-weight: 500; }
h4 { font-size: 1rem; font-weight: 600; letter-spacing: .02em; font-family: 'DM Sans', sans-serif; }

em {
  font-style: italic;
  color: var(--rose-deep);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
}

strong { font-weight: 600; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-deep);
}

.eyebrow--light { color: rgba(255,255,255,0.85); }

.dot-mark {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rose-primary);
  box-shadow: 0 0 0 4px var(--rose-blush);
  display: inline-block;
  flex-shrink: 0;
}
.dot-mark--light { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.18); }

/* ---------------------------------------------------------
   4. LAYOUT UTILS
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(22px, 3vw, 40px);
}

.section      { padding: var(--sec-py) 0; }
.section--sm  { padding: clamp(70px, 7vw, 110px) 0; }
.section--cream { background: var(--rose-cream); }
.section--mist  { background: var(--rose-mist); }
.section--blush { background: var(--rose-blush); }

/* ---------------------------------------------------------
   5. BUTTONS & LINKS
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s, color .25s, border-color .25s;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.btn--primary {
  background: var(--rose-deep);
  color: #fff;
  box-shadow: 0 10px 22px rgba(168, 104, 118, 0.24);
}
.btn--primary:hover {
  background: var(--rose-deeper);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(168, 104, 118, 0.32);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
}
.btn--ghost:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--quiet {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn--quiet:hover {
  background: var(--rose-mist);
  border-color: var(--rose-light);
  color: var(--rose-deep);
}

.btn--light {
  background: #fff;
  color: var(--rose-deeper);
}
.btn--light:hover {
  background: var(--rose-blush);
  transform: translateY(-2px);
}

.btn--outline-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.45);
}
.btn--outline-light:hover {
  background: #fff;
  color: var(--rose-deeper);
  border-color: #fff;
}

.btn--large   { padding: 17px 32px; font-size: 16px; }
.btn--compact { padding: 11px 20px; font-size: 14px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--rose-deep);
  font-size: 15px;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-color .2s, gap .25s, color .2s;
}
.link-arrow:hover { border-color: var(--rose-deep); gap: 12px; }
.link-arrow--ink { color: var(--ink); }
.link-arrow--ink:hover { color: var(--rose-deep); border-color: var(--rose-deep); }

.tag {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--rose-deep);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--rose-light);
}

/* ---------------------------------------------------------
   6. TOPBAR
   --------------------------------------------------------- */
.topbar {
  background: var(--rose-deep);
  color: #fff;
  font-size: 13px;
  padding: 9px 0;
}

.topbar__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.topbar__message {
  color: rgba(255,255,255,0.9);
  font-size: 13.5px;
  letter-spacing: 0.01em;
  font-weight: 500;
}

.topbar__utility {
  display: flex;
  align-items: center;
  gap: 18px;
}

.topbar__link {
  color: rgba(255,255,255,0.92);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  transition: color .2s;
}
.topbar__link:hover { color: #fff; }

.topbar__cta {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 12.5px;
  transition: background .2s;
}
.topbar__cta:hover { background: rgba(255,255,255,0.25); }

/* ---------------------------------------------------------
   7. HEADER / NAVIGATION
   --------------------------------------------------------- */
.site-header {
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 8px 28px rgba(168, 104, 118, 0.08);
}

.site-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px clamp(18px, 3vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  flex-shrink: 0;
}
.logo__svg {
  width: 64px; height: 64px;
  color: var(--rose-deep);
  flex-shrink: 0;
}
.logo__arc {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.5px;
  fill: var(--rose-deep);
}
.logo__mark {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  fill: var(--ink);
}
.logo__type {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.logo__title {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
}
.logo__sub {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-weight: 600;
  margin-top: 3px;
}

/* Main Nav */
.nav { flex: 1; display: flex; justify-content: center; }

.nav__list {
  display: flex;
  gap: 4px;
  align-items: center;
  background: var(--rose-mist);
  padding: 5px;
  border-radius: var(--r-pill);
}

.nav__item {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  transition: background .25s, color .25s;
}
.nav__item:hover { background: var(--rose-blush); color: var(--rose-deep); }
.nav__item--active {
  background: #fff;
  color: var(--rose-deep);
  box-shadow: var(--shadow-sm);
}

.header-utility {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rose-mist);
  color: var(--ink);
  transition: background .2s, color .2s;
}
.icon-btn:hover { background: var(--rose-blush); color: var(--rose-deep); }

.mobile-toggle { display: none; flex-direction: column; gap: 4px; }
.mobile-toggle span {
  width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.mobile-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 20px 20px 26px;
  background: #fff;
  border-top: 1px solid var(--line);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__item {
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-weight: 500;
  color: var(--ink);
}
.mobile-nav__item:hover,
.mobile-nav__item--active {
  background: var(--rose-mist);
  color: var(--rose-deep);
}
.mobile-nav__cta { margin-top: 14px; text-align: center; justify-content: center; }

/* ---------------------------------------------------------
   8. HOME HERO (ruhig · ohne Slider)
   --------------------------------------------------------- */
.home-hero {
  position: relative;
  min-height: clamp(600px, 82vh, 780px);
  overflow: hidden;
  background: var(--rose-cream);
  display: flex;
  align-items: center;
}

.home-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.home-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(45,42,47,0.50) 0%, rgba(45,42,47,0.18) 48%, rgba(45,42,47,0) 90%);
}
.home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: slowZoom 18s ease-out forwards;
}
@keyframes slowZoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.07); }
}

.home-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 120px 0 140px;
}

.home-hero__panel {
  max-width: 620px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  border-radius: var(--r-xl);
  padding: clamp(36px, 4vw, 56px) clamp(34px, 4vw, 60px);
  box-shadow: var(--shadow-lg);
  animation: panelRise .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes panelRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.home-hero__title {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 1.04;
  margin: 18px 0 22px;
  font-weight: 400;
}

.home-hero__sub {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: var(--ink-soft);
  margin-bottom: 32px;
  max-width: 520px;
  line-height: 1.6;
}

.home-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Sekundärer Text-Link unter den CTAs */
.home-hero__tertiary {
  margin-top: 18px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 500;
  transition: color .2s, gap .25s;
}
.home-hero__tertiary:hover { color: var(--rose-deep); gap: 12px; }
.home-hero__tertiary svg { color: var(--rose-deep); }

/* =========================================================
   FACT STRIP — ruhiger Vertrauensstreifen unter dem Hero
   ========================================================= */
.fact-strip {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 22px 0 24px;
}
.fact-strip__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 44px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fact-strip__list li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.fact-strip__list li svg {
  color: var(--rose-deep);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .fact-strip__list { gap: 10px 28px; font-size: 13.5px; }
  .fact-strip__list li { font-size: 13.5px; }
}

/* ---------------------------------------------------------
   9. PAGE HERO (Unterseiten · kompakt)
   --------------------------------------------------------- */
.page-hero {
  position: relative;
  padding: clamp(90px, 10vw, 150px) 0 clamp(80px, 9vw, 130px);
  background: var(--rose-cream);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 20%, var(--rose-blush) 0%, transparent 55%),
    radial-gradient(circle at 10% 90%, var(--rose-mist) 0%, transparent 40%);
  z-index: 0;
  opacity: 0.9;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

.page-hero__title {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1.05;
  margin: 20px 0 20px;
  font-weight: 400;
}

.page-hero__lead {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 620px;
  line-height: 1.65;
}

.page-hero__breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 20px;
}
.page-hero__breadcrumb a { color: var(--rose-deep); font-weight: 600; }
.page-hero__breadcrumb a:hover { text-decoration: underline; }
.page-hero__breadcrumb svg { opacity: 0.5; }

/* Divider */
.divider {
  display: block;
  width: 100%;
  height: 70px;
}
.divider--bottom { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; }
.divider--top    { position: absolute; left: 0; right: 0; top: -1px; z-index: 3; }

/* ---------------------------------------------------------
   10. SECTION HEAD
   --------------------------------------------------------- */
.section-head {
  margin-bottom: clamp(44px, 5vw, 72px);
  max-width: 780px;
}
.section-head__title {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  margin: 18px 0 16px;
  line-height: 1.06;
  font-weight: 400;
}
.section-head__lead {
  color: var(--ink-mute);
  font-size: 1.05rem;
  max-width: 620px;
  line-height: 1.65;
}
.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head--center .eyebrow,
.section-head--center .section-head__lead {
  margin-left: auto;
  margin-right: auto;
}
.section-head--center .section-head__lead { display: block; }
.section-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 60px;
  align-items: end;
}
.section-head--split .section-head__lead { margin: 0; padding-bottom: 6px; }

/* ---------------------------------------------------------
   11. HOME · INTRO
   --------------------------------------------------------- */
.intro {
  padding: var(--sec-py) 0;
  background: #fff;
}

.intro__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}

.intro__col--left { max-width: 580px; }

.intro__title {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.04;
  margin-top: 20px;
  font-weight: 400;
}

.intro__body {
  padding-top: clamp(20px, 3vw, 60px);
  max-width: 480px;
}

.intro__lead {
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 20px;
  font-weight: 500;
}

.intro__body > p:not(.intro__lead) {
  color: var(--ink-mute);
  margin-bottom: 30px;
  line-height: 1.75;
}

/* ---------------------------------------------------------
   12. SERVICES GRID (Kachel-Übersicht)
   --------------------------------------------------------- */
.services { padding: var(--sec-py) 0; background: var(--rose-cream); }
.services--white { background: #fff; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  border: 1px solid var(--line);
  color: var(--ink);
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.service-card__media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
}
.service-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.service-card:hover .service-card__media img { transform: scale(1.05); }

.service-card__body {
  padding: 26px 28px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.service-card__body h3 { margin-bottom: 8px; }
.service-card__body p {
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.service-card__arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--rose-blush);
  color: var(--rose-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  align-self: flex-start;
  transition: background .3s, color .3s, transform .3s;
}
.service-card:hover .service-card__arrow {
  background: var(--rose-deep);
  color: #fff;
  transform: translateX(3px);
}

/* ---------------------------------------------------------
   EXPERTISE — Kompakte Schwerpunkte auf der Startseite
   --------------------------------------------------------- */
.expertise {
  padding: var(--sec-py) 0;
  background: var(--rose-mist);
}
.expertise__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.expertise__item {
  background: #fff;
  padding: 24px 26px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.expertise__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: transparent;
}
.expertise__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--rose-blush);
  color: var(--rose-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.expertise__body h3 {
  font-size: 1rem;
  margin-bottom: 4px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.expertise__body p {
  color: var(--ink-mute);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 1180px) {
  .expertise__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .expertise__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   PROFILE HIGHLIGHTS — „Was Patienten schätzen" (Über uns)
   --------------------------------------------------------- */
.profile__highlights {
  margin-top: 28px;
  padding: 22px 26px 24px;
  background: var(--rose-mist);
  border-radius: var(--r-md);
  border: 1px solid var(--rose-light);
}
.profile__highlights h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 14px;
}
.profile__highlights-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.profile__highlights-list li {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 22px;
  position: relative;
}
.profile__highlights-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 2px;
  background: var(--rose-deep);
  border-radius: 2px;
}

/* ---------------------------------------------------------
   TESTIMONIALS — Social Proof / Patientenstimmen
   --------------------------------------------------------- */
.testimonials {
  padding: var(--sec-py) 0;
  background: var(--rose-cream);
}
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 40px;
}
.testimonial {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 30px 30px 26px;
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.testimonial:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.testimonial__stars {
  display: flex;
  gap: 2px;
  color: var(--rose-deep);
  margin-bottom: 16px;
}
.testimonial blockquote {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 20px;
  flex: 1;
  font-style: normal;
}
.testimonial figcaption {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.testimonial figcaption strong {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}
.testimonial figcaption span {
  font-size: 13px;
  color: var(--rose-deep);
  font-weight: 500;
}
.testimonials__foot {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 12px 18px;
  background: #fff;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.google-badge__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--rose-deep);
}
.google-badge strong {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}
@media (max-width: 1180px) {
  .testimonials__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   PROCESS — Ihr erster Termin (Ablauf + Realitäts-Fakten)
   --------------------------------------------------------- */
.process {
  padding: var(--sec-py) 0;
  background: #fff;
}

.process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 14px;
}

.process-step {
  padding: 32px 30px 30px;
  background: var(--rose-mist);
  border-radius: var(--r-lg);
  transition: background .3s, transform .3s;
  position: relative;
}
.process-step:hover {
  background: var(--rose-blush);
  transform: translateY(-3px);
}

.process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--rose-deep);
  color: #fff;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.process-step h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  font-weight: 500;
  font-family: 'Fraunces', serif;
}

.process-step p {
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 14.5px;
}

.process__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 24px 10px;
  background: var(--rose-cream);
  border-radius: var(--r-lg);
  margin-top: 16px;
}

.process__fact {
  padding: 6px 28px;
  border-right: 1px solid var(--line);
}
.process__fact:last-child { border-right: 0; }

.process__fact .label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-weight: 700;
  margin-bottom: 6px;
}

.process__fact p {
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.45;
  margin: 0;
  font-weight: 500;
}

.process__cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 1180px) {
  .process__grid { grid-template-columns: 1fr; }
  .process__facts { grid-template-columns: 1fr; padding: 20px 24px; }
  .process__fact {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px 4px;
  }
  .process__fact:last-child { border-bottom: 0; padding-bottom: 4px; }
}

/* ---------------------------------------------------------
   INDICATIONS — Hilft bei ... (beschwerdeorientierter Einstieg)
   --------------------------------------------------------- */
.indications {
  padding: var(--sec-py) 0;
  background: var(--rose-cream);
}

.indications__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.indication {
  background: #fff;
  padding: 28px 26px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  color: var(--ink);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.indication:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.indication__icon {
  width: 44px; height: 44px;
  background: var(--rose-mist);
  color: var(--rose-deep);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}

.indication h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.08rem;
  margin-bottom: 6px;
  line-height: 1.25;
}
.indication p {
  color: var(--ink-mute);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 14px;
  flex: 1;
}
.indication__arrow {
  color: var(--rose-deep);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
  transition: gap .25s;
}
.indication:hover .indication__arrow { gap: 10px; }

/* ---------------------------------------------------------
   CREDENTIALS — Fachliche Schwerpunkte (Über uns)
   --------------------------------------------------------- */
.credentials {
  padding: var(--sec-py) 0;
  background: var(--rose-cream);
}
.credentials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.credential {
  background: #fff;
  padding: 28px 28px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.credential:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.credential__label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-weight: 700;
  padding: 5px 11px;
  background: var(--rose-blush);
  border-radius: var(--r-pill);
  margin-bottom: 16px;
}
.credential h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  font-weight: 500;
  font-family: 'Fraunces', serif;
}
.credential p {
  color: var(--ink-mute);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   HINT-BOX — „Rezept schon da?"-Hinweise
   --------------------------------------------------------- */
.hint-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  background: var(--rose-mist);
  border-radius: var(--r-md);
  border: 1px solid var(--rose-light);
  margin: 30px 0 0;
}
.hint-box__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--rose-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hint-box__body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.hint-box__body strong {
  color: var(--ink);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.hint-box__body a {
  color: var(--rose-deep);
  font-weight: 600;
}
.hint-box__body a:hover { text-decoration: underline; }

.hint-box--light {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}
.hint-box--light .hint-box__icon {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.hint-box--light .hint-box__body,
.hint-box--light .hint-box__body strong {
  color: #fff;
}
.hint-box--light .hint-box__body a {
  color: var(--rose-light);
}

/* Responsive */
@media (max-width: 1180px) {
  .indications__grid { grid-template-columns: repeat(2, 1fr); }
  .credentials__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .indications__grid,
  .credentials__grid { grid-template-columns: 1fr; }
  .hint-box { flex-direction: column; gap: 10px; padding: 16px 18px; }
}

/* ---------------------------------------------------------
   13. BENEFITS (Warum wir)
   --------------------------------------------------------- */
.benefits { padding: var(--sec-py) 0; background: #fff; }

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.benefit {
  background: var(--rose-mist);
  border-radius: var(--r-lg);
  padding: 34px 30px 32px;
  transition: transform .4s, background .4s, box-shadow .4s;
}
.benefit:hover {
  transform: translateY(-4px);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.benefit__icon {
  width: 52px; height: 52px;
  background: #fff;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rose-deep);
  margin-bottom: 22px;
  box-shadow: var(--shadow-xs);
}
.benefit:hover .benefit__icon { background: var(--rose-blush); }

.benefit h3 { font-size: 1.15rem; margin-bottom: 8px; }
.benefit p {
  color: var(--ink-mute);
  line-height: 1.6;
  font-size: 14.5px;
}

/* ---------------------------------------------------------
   14. HOME · PRAXIS-EINBLICK (3 Bilder)
   --------------------------------------------------------- */
.praxis-teaser {
  position: relative;
  padding: calc(var(--sec-py) + 30px) 0 var(--sec-py);
  background: var(--rose-cream);
}

.praxis-teaser__head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 50px;
  align-items: end;
  margin-bottom: 50px;
}
.praxis-teaser__head .section-head__lead { padding-bottom: 4px; }

.praxis-teaser__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 20px;
  margin-bottom: 50px;
}

.praxis-teaser__cell {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #fff;
  position: relative;
}
.praxis-teaser__cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.praxis-teaser__cell:hover img { transform: scale(1.04); }
.praxis-teaser__cell--tall { grid-row: span 2; }

.praxis-teaser__cta {
  display: flex;
  justify-content: flex-end;
}

/* ---------------------------------------------------------
   15. HOME · ABOUT TEASER
   --------------------------------------------------------- */
.about-teaser { padding: var(--sec-py) 0; background: #fff; }

.about-teaser__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.about-teaser__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 460px;
  box-shadow: var(--shadow-md);
}
.about-teaser__media img { width: 100%; height: 100%; object-fit: cover; }

.about-teaser__body > h2 { margin: 18px 0 22px; font-weight: 400; }
.about-teaser__body p {
  color: var(--ink-mute);
  line-height: 1.75;
  margin-bottom: 18px;
  max-width: 520px;
}
.about-teaser__body p.lead {
  font-size: 1.1rem;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 16px;
}
.about-teaser__cta { margin-top: 16px; }

.about-teaser__signature {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ink);
  margin-top: 8px;
  display: inline-block;
}
.about-teaser__signature small {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-size: 12px;
  color: var(--rose-deep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 2px;
}

/* ---------------------------------------------------------
   16. HOME · INFOS TEASER
   --------------------------------------------------------- */
.info-teaser {
  position: relative;
  padding: calc(var(--sec-py) + 30px) 0 var(--sec-py);
  background: var(--rose-mist);
}

.info-teaser__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 40px;
}

.info-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 32px 32px 30px;
  display: flex;
  flex-direction: column;
  transition: transform .3s, box-shadow .3s;
}
.info-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.info-card__num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--rose-deep);
  margin-bottom: 14px;
  line-height: 1;
}
.info-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.info-card p {
  color: var(--ink-mute);
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 18px;
  flex: 1;
}
.info-card__link {
  color: var(--rose-deep);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  transition: gap .25s;
}
.info-card:hover .info-card__link { gap: 10px; }

.info-teaser__foot {
  display: flex;
  justify-content: center;
  padding-top: 16px;
}

/* ---------------------------------------------------------
   17. CLOSING CTA (ruhig)
   --------------------------------------------------------- */
.closing {
  padding: var(--sec-py) 0;
  background: #fff;
}

.closing__card {
  background: var(--rose-deep);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(48px, 6vw, 80px) clamp(36px, 5vw, 80px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.closing__card::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rose-primary) 0%, transparent 60%);
  top: -160px; right: -100px;
  opacity: 0.35;
}
.closing__card::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rose-medium) 0%, transparent 60%);
  bottom: -120px; left: -80px;
  opacity: 0.25;
}

.closing__title {
  color: #fff;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.06;
  margin-bottom: 20px;
  font-weight: 400;
  position: relative;
  z-index: 1;
}
.closing__title em { color: var(--rose-light); }
.closing__lead {
  color: rgba(255,255,255,0.9);
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto 36px;
  position: relative;
  z-index: 1;
}

.closing__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.closing__info {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.18);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: left;
  position: relative;
  z-index: 1;
}
.closing__info > div { }
.closing__info .label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
  font-weight: 600;
}
.closing__info a, .closing__info p {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  line-height: 1.4;
  color: #fff;
  font-weight: 500;
}
.closing__info a:hover { color: var(--rose-light); }

/* ---------------------------------------------------------
   18. FOOTER
   --------------------------------------------------------- */
.site-footer {
  background: var(--rose-cream);
  color: var(--ink-soft);
  padding: 90px 0 34px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr 2.3fr;
  gap: 60px;
  margin-bottom: 60px;
}

.footer__brand { max-width: 340px; }

.footer__logo {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 2rem;
  color: var(--ink);
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}
.footer__logo-sub {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-weight: 600;
  margin-bottom: 18px;
}

.footer__tag {
  color: var(--ink-mute);
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 22px;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px;
}
.footer__col h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: var(--ink);
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col li,
.footer__col li a {
  color: var(--ink-mute);
  font-size: 14.5px;
  transition: color .2s;
}
.footer__col li a:hover { color: var(--rose-deep); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--ink-mute);
  flex-wrap: wrap;
  gap: 12px;
}
.footer__legal {
  display: flex;
  gap: 24px;
}
.footer__legal a:hover { color: var(--rose-deep); }

/* =========================================================
   UNTERSEITEN · SPEZIFISCHE KOMPONENTEN
   ========================================================= */

/* ---------------------------------------------------------
   19. SERVICE DETAIL BLOCK (/leistungen)
   --------------------------------------------------------- */
.service-detail {
  padding: clamp(70px, 7vw, 110px) 0;
}
.service-detail:nth-child(even) { background: var(--rose-mist); }

.service-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.service-detail:nth-child(even) .service-detail__grid {
  direction: rtl;
}
.service-detail:nth-child(even) .service-detail__grid > * { direction: ltr; }

.service-detail__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 520px;
  box-shadow: var(--shadow-md);
}
.service-detail__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.service-detail__body { max-width: 540px; }
.service-detail__title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  margin: 16px 0 20px;
  font-weight: 400;
}
.service-detail__lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 22px;
}
.service-detail__desc {
  color: var(--ink-mute);
  line-height: 1.75;
  margin-bottom: 32px;
}

.spec-block {
  margin-bottom: 20px;
  padding: 20px 24px;
  background: rgba(255,255,255,0.6);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.service-detail:nth-child(even) .spec-block {
  background: #fff;
  border-color: transparent;
}
.spec-block__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose-deep);
  display: block;
  margin-bottom: 10px;
}
.spec-block ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spec-block li {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
}
.spec-block li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 2px;
  background: var(--rose-deep);
  border-radius: 2px;
}
.spec-block p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ---------------------------------------------------------
   20. PROFILE (/ueber-uns)
   --------------------------------------------------------- */
.profile {
  padding: var(--sec-py) 0;
  background: #fff;
}

.profile__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}

.profile__portrait {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 480px;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 120px;
}
.profile__portrait img { width: 100%; height: 100%; object-fit: cover; }
.profile__portrait-badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  padding: 14px 20px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.profile__portrait-badge strong {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  display: block;
  line-height: 1;
}
.profile__portrait-badge span {
  font-size: 12px;
  color: var(--rose-deep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

.profile__body h2 { margin: 16px 0 20px; font-weight: 400; }
.profile__lead {
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 20px;
  font-weight: 500;
}
.profile__body > p:not(.profile__lead) {
  color: var(--ink-mute);
  line-height: 1.75;
  margin-bottom: 22px;
  max-width: 560px;
}

.profile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
  margin-bottom: 36px;
}

.profile__sign {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 2rem;
  color: var(--ink);
  display: block;
  margin-top: 20px;
  line-height: 1;
}

/* ---------------------------------------------------------
   21. VALUES / PRINCIPLES  (/ueber-uns)
   --------------------------------------------------------- */
.values {
  padding: var(--sec-py) 0;
  background: var(--rose-cream);
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 20px;
}

.value {
  background: #fff;
  padding: 32px 30px 30px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  transition: transform .3s, box-shadow .3s;
}
.value:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.value__num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--rose-deep);
  margin-bottom: 14px;
  line-height: 1;
}
.value h3 { font-size: 1.2rem; margin-bottom: 10px; }
.value p {
  color: var(--ink-mute);
  line-height: 1.65;
  font-size: 15px;
}

/* Arbeitsweise (3 Schritte) */
.workflow {
  padding: var(--sec-py) 0;
  background: #fff;
}

.workflow__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 20px;
}

.workflow-step {
  padding: 30px;
  background: var(--rose-mist);
  border-radius: var(--r-lg);
  position: relative;
  transition: background .3s;
}
.workflow-step:hover { background: var(--rose-blush); }
.workflow-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rose-deep);
  color: #fff;
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 18px;
}
.workflow-step h3 { font-size: 1.2rem; margin-bottom: 10px; }
.workflow-step p {
  color: var(--ink-soft);
  line-height: 1.65;
  font-size: 15px;
}

/* ---------------------------------------------------------
   22. PRAXIS PAGE (/praxis)
   --------------------------------------------------------- */
.atmosphere {
  padding: var(--sec-py) 0;
  background: #fff;
}

.atmosphere__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.atmosphere__body { max-width: 540px; }
.atmosphere__body h2 { margin: 16px 0 20px; font-weight: 400; }
.atmosphere__lead {
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 18px;
  font-weight: 500;
}
.atmosphere__body > p:not(.atmosphere__lead) {
  color: var(--ink-mute);
  line-height: 1.75;
  margin-bottom: 24px;
}

.atmosphere__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 26px;
}
.atmosphere__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}
.atmosphere__list li svg {
  color: var(--rose-deep);
  flex-shrink: 0;
  margin-top: 3px;
}

.atmosphere__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 5 / 6;
  box-shadow: var(--shadow-md);
  max-width: 520px;
  margin-left: auto;
}
.atmosphere__media img { width: 100%; height: 100%; object-fit: cover; }

/* Gallery */
.gallery {
  padding: var(--sec-py) 0;
  background: var(--rose-cream);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 260px 260px;
  gap: 20px;
}
.gallery__cell {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
}
.gallery__cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.gallery__cell:hover img { transform: scale(1.05); }
.gallery__cell--tall { grid-row: span 2; }
.gallery__cell--wide { grid-column: span 2; }

.room-list {
  padding: var(--sec-py) 0;
  background: #fff;
}
.room-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px;
}
.room {
  background: var(--rose-mist);
  border-radius: var(--r-lg);
  padding: 34px 30px 32px;
  transition: background .3s;
}
.room:hover { background: var(--rose-blush); }
.room__icon {
  width: 46px; height: 46px;
  background: #fff;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rose-deep);
  margin-bottom: 18px;
}
.room h3 { font-size: 1.15rem; margin-bottom: 8px; }
.room p {
  color: var(--ink-mute);
  line-height: 1.6;
  font-size: 14.5px;
}

/* ---------------------------------------------------------
   23. INFO ACCORDION (/patienteninfos)
   --------------------------------------------------------- */
.info-page {
  padding: var(--sec-py) 0;
  background: #fff;
}

.info-page__wrap {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accordion {
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow .3s, border-color .3s;
  border: 1px solid var(--line);
}
.accordion:hover { border-color: var(--rose-light); }
.accordion[open] {
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.accordion summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion__num {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--rose-deep);
  background: var(--rose-blush);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.accordion__icon {
  margin-left: auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--rose-mist);
  position: relative;
  transition: background .3s, transform .3s;
  flex-shrink: 0;
}
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--rose-deep);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.accordion__icon::before { width: 13px; height: 2px; }
.accordion__icon::after  { width: 2px;  height: 13px; }
.accordion[open] .accordion__icon { background: var(--rose-deep); }
.accordion[open] .accordion__icon::before { background: #fff; }
.accordion[open] .accordion__icon::after  { opacity: 0; }

.accordion__body {
  padding: 0 28px 28px;
  color: var(--ink-mute);
  line-height: 1.75;
  font-size: 15.5px;
}
.accordion__body p { max-width: 720px; margin-bottom: 12px; }
.accordion__body p:last-child { margin-bottom: 0; }
.accordion__body ul {
  list-style: disc;
  padding-left: 20px;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Checkliste */
.checklist {
  padding: var(--sec-py) 0;
  background: var(--rose-cream);
}
.checklist__card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: clamp(40px, 5vw, 60px);
  box-shadow: var(--shadow-sm);
  max-width: 860px;
  margin: 0 auto;
}
.checklist__title {
  font-size: 1.7rem;
  margin-bottom: 12px;
  font-weight: 400;
}
.checklist__lead {
  color: var(--ink-mute);
  margin-bottom: 28px;
}
.checklist__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px;
}
.checklist__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 0;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.checklist__item svg {
  color: var(--rose-deep);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------------------------------------------------------
   24. CONTACT PAGE (/kontakt)
   --------------------------------------------------------- */
.contact-page { padding: var(--sec-py) 0; background: #fff; }

.contact-page__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 5vw, 70px);
  align-items: start;
}

.contact-info-card {
  background: var(--rose-cream);
  border-radius: var(--r-xl);
  padding: clamp(36px, 4vw, 50px);
  position: sticky;
  top: 120px;
}
.contact-info-card h3 {
  font-size: 1.4rem;
  margin-bottom: 24px;
  font-weight: 400;
}
.contact-info-card__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 30px;
}
.contact-info-card__list > div {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}
.contact-info-card__list > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.contact-info-card__label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 8px;
  font-weight: 700;
}
.contact-info-card__list a,
.contact-info-card__list p {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
}
.contact-info-card__list a:hover { color: var(--rose-deep); }
.contact-info-card__cta {
  width: 100%;
  justify-content: center;
}
.contact-info-card__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.contact-info-card__actions .btn {
  width: 100%;
  justify-content: center;
  padding: 13px 18px;
  font-size: 14.5px;
}

/* Form */
.form-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: clamp(36px, 4vw, 56px);
  border: 1px solid var(--line);
}
.form-card h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  font-weight: 400;
}
.form-card__lead {
  color: var(--ink-mute);
  margin-bottom: 30px;
  font-size: 15px;
  line-height: 1.6;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__field--full { grid-column: 1 / -1; }
.form__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.form__input,
.form__textarea,
.form__select {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--rose-mist);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  padding: 14px 18px;
  transition: border-color .2s, background .2s;
  width: 100%;
}
.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--rose-deep);
  background: #fff;
}
.form__textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
  font-family: inherit;
}
.form__check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-top: 8px;
}
.form__check input {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--rose-deep);
}
.form__check a { color: var(--rose-deep); font-weight: 600; text-decoration: underline; }
.form__submit {
  margin-top: 24px;
  width: 100%;
  justify-content: center;
}
.form__note {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-top: 16px;
  text-align: center;
}

/* Map placeholder */
.directions {
  padding: var(--sec-py) 0;
  background: var(--rose-cream);
}
.directions__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
}
.directions__body h2 { margin: 16px 0 18px; font-weight: 400; }
.directions__body p {
  color: var(--ink-mute);
  line-height: 1.7;
  margin-bottom: 16px;
  max-width: 480px;
}
.directions__map {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--rose-mist) 0%, var(--rose-powder) 100%);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.directions__map::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 22% 32%, rgba(168,104,118,0.10) 0%, transparent 42%),
    radial-gradient(circle at 78% 72%, rgba(168,104,118,0.14) 0%, transparent 44%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.4) 0%, transparent 60%);
}
.directions__map::after {
  content: '';
  position: absolute;
  left: -10%; right: -10%; top: 55%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(168,104,118,0.22) 0 6px, transparent 6px 14px);
  transform: rotate(-6deg);
}
.directions__pin {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  padding: 14px 20px 14px 16px;
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px rgba(168,104,118,0.2);
  z-index: 1;
  white-space: nowrap;
}
.directions__pin-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--rose-deep);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.directions__pin-text strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.1;
}
.directions__pin-text span {
  display: block;
  font-size: 11.5px;
  color: var(--rose-deep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 4px;
}

/* Anfahrts-Fakten im Body */
.directions__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 40px;
  margin-top: 28px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.directions__fact .label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-weight: 700;
  margin-bottom: 6px;
}
.directions__fact p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 640px) {
  .directions__facts { grid-template-columns: 1fr; gap: 22px; }
  .directions__pin { padding: 12px 16px 12px 14px; }
  .directions__pin-text strong { font-size: 16px; }
}

/* ---------------------------------------------------------
   25. LEGAL PAGES (Impressum · Datenschutz)
   --------------------------------------------------------- */
.legal {
  padding: var(--sec-py) 0;
  background: #fff;
}
.legal__wrap {
  max-width: 820px;
  margin: 0 auto;
}
.legal__toc {
  background: var(--rose-mist);
  border-radius: var(--r-lg);
  padding: 26px 30px;
  margin-bottom: 50px;
}
.legal__toc h3 {
  font-size: 1.05rem;
  margin-bottom: 14px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-size: 13px;
}
.legal__toc ol {
  list-style: decimal;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink-soft);
}
.legal__toc a {
  color: var(--ink-soft);
  transition: color .2s;
}
.legal__toc a:hover { color: var(--rose-deep); }

.legal__section {
  margin-bottom: 48px;
  scroll-margin-top: 120px;
}
.legal__section h2 {
  font-size: 1.6rem;
  margin-bottom: 14px;
  font-weight: 400;
}
.legal__section h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  margin: 20px 0 10px;
  font-weight: 500;
}
.legal__section p,
.legal__section li {
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 14px;
  font-size: 15.5px;
}
.legal__section ul {
  list-style: disc;
  padding-left: 22px;
  margin: 10px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.legal__section a {
  color: var(--rose-deep);
  font-weight: 500;
  text-decoration: underline;
}

/* ---------------------------------------------------------
   26. REVEAL UTIL
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------
   27. RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1180px) {
  .services__grid,
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
  .info-teaser__grid { grid-template-columns: 1fr; gap: 16px; }
  .values__grid,
  .workflow__grid,
  .room-list__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr; }
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 260px);
  }
  .gallery__cell--tall { grid-row: span 1; }
  .gallery__cell--wide { grid-column: span 2; }
  .closing__info { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .nav { display: none; }
  .mobile-toggle { display: flex; }
  .mobile-nav:not([hidden]) { display: flex; }

  .topbar__inner { flex-direction: column; text-align: center; gap: 8px; padding-bottom: 2px; }
  .topbar__utility { justify-content: center; flex-wrap: wrap; }

  .home-hero {
    min-height: 620px;
    padding: 60px 0;
  }
  .home-hero__inner { padding: 60px 0 80px; }
  .home-hero__panel {
    max-width: 100%;
    padding: 32px 28px;
  }

  .page-hero { padding: 70px 0 60px; }

  .intro__grid,
  .praxis-teaser__head,
  .about-teaser__grid,
  .profile__grid,
  .atmosphere__grid,
  .directions__grid,
  .contact-page__grid,
  .section-head--split { grid-template-columns: 1fr; gap: 30px; }

  .profile__portrait,
  .contact-info-card { position: static; }
  .about-teaser__media,
  .profile__portrait,
  .atmosphere__media { max-width: 100%; }

  .praxis-teaser__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 260px);
  }
  .praxis-teaser__cell--tall { grid-row: span 1; }

  .service-detail__grid { grid-template-columns: 1fr; }
  .service-detail:nth-child(even) .service-detail__grid { direction: ltr; }
  .service-detail__media { max-width: 100%; }

  .checklist__grid { grid-template-columns: 1fr; }
  .closing__info { grid-template-columns: 1fr; gap: 20px; text-align: center; }

  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

@media (max-width: 640px) {
  :root { --sec-py: 70px; }

  .site-header__inner { padding: 12px 16px; gap: 12px; }
  .logo__svg { width: 50px; height: 50px; }
  .logo__type { display: none; }

  .services__grid,
  .benefits__grid,
  .info-teaser__grid,
  .values__grid,
  .workflow__grid,
  .room-list__grid { grid-template-columns: 1fr; }

  .gallery__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 260px);
  }
  .gallery__cell--wide { grid-column: span 1; }

  .home-hero__actions,
  .closing__actions { flex-direction: column; width: 100%; }
  .home-hero__actions .btn,
  .closing__actions .btn { width: 100%; }

  .form__row { grid-template-columns: 1fr; }

  .footer__cols { grid-template-columns: 1fr; gap: 24px; }
  .footer__bottom { flex-direction: column; text-align: center; }

  .accordion summary { padding: 18px 22px; font-size: 1.05rem; gap: 12px; }
  .accordion__body { padding: 0 22px 22px; }

  .header-utility .btn--compact { padding: 9px 14px; font-size: 13px; }
  .closing__card { padding: 40px 28px; }
}

/* =========================================================
   STICKY MOBILE CTA — Phase 3
   ========================================================= */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 28px rgba(168, 104, 118, 0.10);
  gap: 8px;
}
.sticky-cta__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: transform .15s ease, background .2s ease;
}
.sticky-cta__btn--phone {
  background: var(--rose-mist);
  color: var(--rose-deep);
  border: 1px solid var(--rose-light);
}
.sticky-cta__btn--phone:hover,
.sticky-cta__btn--phone:active { background: var(--rose-blush); }
.sticky-cta__btn--termin {
  background: var(--rose-deep);
  color: #fff;
  box-shadow: 0 6px 16px rgba(168, 104, 118, 0.28);
}
.sticky-cta__btn--termin:hover,
.sticky-cta__btn--termin:active { background: var(--rose-deeper); }
.sticky-cta__btn:active { transform: scale(0.98); }

@media (max-width: 700px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 78px; }
  body.nav-open .sticky-cta { display: none; }
  body.nav-open { padding-bottom: 0; }
}

/* =========================================================
   FOCUS STATES & REDUCED MOTION — Accessibility
   ========================================================= */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--rose-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* Skip-Link — Tastatur-Accessibility */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  padding: 10px 18px;
  background: var(--rose-deep);
  color: #fff;
  z-index: 100;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: top .2s ease;
  box-shadow: var(--shadow-md);
}
.skip-link:focus {
  top: 12px;
  outline: none;
}

/* =========================================================
   32. HOME-FAQ — Schnell-FAQ auf der Startseite
   ========================================================= */
.home-faq {
  padding: var(--sec-py) 0;
  background: var(--rose-cream);
}
.home-faq__wrap {
  max-width: 820px;
  margin: 36px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-faq__cta {
  margin-top: 32px;
  text-align: center;
}

/* Slim accordion variant for home-faq (tighter padding, flatter look) */
.accordion--slim {
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--rose-light);
  box-shadow: none;
}
.accordion--slim > summary {
  padding: 18px 22px;
  font-size: 16.5px;
  font-weight: 600;
}
.accordion--slim .accordion__body {
  padding: 0 22px 20px;
}
.accordion--slim .accordion__body p {
  font-size: 15.5px;
  line-height: 1.65;
}

/* =========================================================
   33. TESTIMONIALS NUDGE — Aufforderung zur Google-Bewertung
   ========================================================= */
.testimonials__nudge {
  max-width: 640px;
  margin: 18px auto 0;
  font-size: 14.5px;
  color: var(--ink-mute);
  line-height: 1.6;
  text-align: center;
}
.testimonials__nudge a {
  color: var(--rose-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.testimonials__nudge a:hover { color: var(--rose-deeper); }

/* =========================================================
   34. FORM ENHANCEMENTS — Required-Marker, Hint, Success, Collapse
   ========================================================= */
.form__req {
  color: var(--rose-deep);
  font-weight: 700;
  margin-left: 3px;
}
.form__hint {
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 13.5px;
  margin-left: 6px;
}

.form__more {
  margin: 4px 0 8px;
  border-top: 1px dashed var(--rose-light);
  padding-top: 16px;
}
.form__more > summary {
  cursor: pointer;
  color: var(--rose-deep);
  font-weight: 600;
  font-size: 14.5px;
  padding: 6px 0;
  list-style: none;
  user-select: none;
}
.form__more > summary::-webkit-details-marker { display: none; }
.form__more > summary::before {
  content: "+";
  display: inline-block;
  margin-right: 10px;
  font-weight: 700;
  transition: transform .18s ease;
}
.form__more[open] > summary::before { content: "−"; }
.form__more > summary:hover { color: var(--rose-deeper); }

/* Success panel after form submit */
.form__success {
  padding: 40px 32px;
  text-align: center;
  color: var(--ink);
}
.form__success[hidden] { display: none; }
.form__success-icon {
  color: var(--rose-deep);
  margin-bottom: 14px;
}
.form__success h4 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--ink);
}
.form__success p {
  max-width: 440px;
  margin: 0 auto 10px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.form__success-fallback {
  font-size: 14.5px;
  color: var(--ink-mute);
  margin-top: 18px;
}
.form__success-fallback a {
  color: var(--rose-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   35. LANDING PAGE — Themenseiten (manuelle-therapie etc.)
   ========================================================= */
.topic-hero {
  padding: calc(var(--sec-py) * 0.9) 0 calc(var(--sec-py) * 0.7);
  background: linear-gradient(180deg, var(--rose-cream) 0%, #fff 100%);
}
.topic-hero__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
}
.topic-hero__lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 20px;
  max-width: 680px;
}
.topic-hero__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.topic-section {
  padding: calc(var(--sec-py) * 0.8) 0;
}
.topic-section--mist { background: var(--rose-mist); }
.topic-section__inner {
  max-width: 820px;
  margin: 0 auto;
}
.topic-section__inner h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 20px;
}
.topic-section__inner h2 em {
  font-style: italic;
  color: var(--rose-deep);
}
.topic-section__inner p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 16px;
  max-width: 720px;
}
.topic-section__inner ul {
  list-style: none;
  padding: 0;
  margin: 18px 0;
}
.topic-section__inner ul li {
  position: relative;
  padding: 8px 0 8px 26px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.topic-section__inner ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 12px;
  height: 2px;
  background: var(--rose-deep);
  border-radius: 2px;
}

.topic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 28px;
}
.topic-card {
  background: #fff;
  border: 1px solid var(--rose-light);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-xs);
}
.topic-card h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--ink);
}
.topic-card p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 700px) {
  .topic-grid { grid-template-columns: 1fr; gap: 18px; }
  .topic-hero__lead { font-size: 18px; }
  .form__success { padding: 32px 20px; }
  .form__success h4 { font-size: 22px; }
}

/* Legal: Kontext-Hinweis auf Platzhalter-Daten (Impressum) */
.legal__note {
  font-size: 13.5px;
  color: var(--ink-mute);
  background: var(--rose-mist);
  border-left: 3px solid var(--rose-primary);
  padding: 10px 14px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-top: 12px;
  line-height: 1.55;
}

/* =========================================================
   38. TOPIC TRUST STRIP — kleiner Fact-Row unter Landing-Hero
   ========================================================= */
.topic-trust {
  padding: 28px 0;
  background: #fff;
  border-bottom: 1px solid var(--rose-light);
}
.topic-trust__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  max-width: 980px;
  margin-left: auto; margin-right: auto;
}
.topic-trust__list li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.topic-trust__list svg {
  color: var(--rose-deep);
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .topic-trust { padding: 22px 0; }
  .topic-trust__list { gap: 12px 18px; }
  .topic-trust__list li { font-size: 14px; }
}

/* =========================================================
   39. EXPERTISE BYLINE — E-E-A-T-Signal auf Landing-Pages
   ========================================================= */
.expertise-byline {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 820px;
  margin: 0 auto;
  padding: 22px 24px;
  background: var(--rose-mist);
  border: 1px solid var(--rose-light);
  border-radius: var(--r-md);
}
.expertise-byline__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--rose-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rose-light);
}
.expertise-byline__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14.5px;
  line-height: 1.5;
}
.expertise-byline__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.expertise-byline__name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
}
.expertise-byline__credentials {
  color: var(--ink-soft);
  font-size: 14px;
}
.expertise-byline__link {
  margin-top: 4px;
  color: var(--rose-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14px;
  align-self: flex-start;
}
.expertise-byline__link:hover { color: var(--rose-deeper); }

@media (max-width: 640px) {
  .expertise-byline {
    flex-direction: column;
    padding: 18px 20px;
    gap: 14px;
  }
}

/* =========================================================
   40. OUTCOME + TIPS GRID — Prognose und Alltagstipps
   auf Symptomseiten (nutzt existierendes topic-* System)
   ========================================================= */
.outcome-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.outcome-list li {
  background: #fff;
  border: 1px solid var(--rose-light);
  border-radius: var(--r-md);
  padding: 16px 18px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.outcome-list li strong {
  display: block;
  color: var(--ink);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 17px;
  margin-bottom: 4px;
}

/* Reset ul-list-marker inherited for outcome lists inside topic-section */
.topic-section__inner .outcome-list li::before { display: none; }
.topic-section__inner .outcome-list li { padding-left: 18px; }

/* =========================================================
   36. FORM PRODUCTION — Error, Noscript, Honeypot, Loading
   ========================================================= */
.form__honeypot {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.form__noscript {
  background: var(--rose-mist);
  border: 1px solid var(--rose-light);
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0 0 18px;
  line-height: 1.55;
}
.form__noscript a {
  color: var(--rose-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form__error {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 24px 0 8px;
  padding: 20px 22px;
  background: #FDECEE;
  border: 1px solid #E8B5BD;
  border-radius: var(--r-md);
  color: #6E2A38;
}
.form__error[hidden] { display: none; }
.form__error-icon { color: #A03544; flex-shrink: 0; margin-top: 2px; }
.form__error h4 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 6px;
  color: #6E2A38;
}
.form__error p {
  margin: 0 0 6px;
  font-size: 14.5px;
  line-height: 1.55;
}
.form__error a {
  color: #6E2A38;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form__submit.is-loading {
  opacity: 0.7;
  cursor: progress;
  position: relative;
}
.form__submit.is-loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: phh-spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes phh-spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   37. CONSENT BANNER — DSGVO-konformes Analytics-Opt-In
   ========================================================= */
.consent-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  background: #fff;
  border: 1px solid var(--rose-light);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px rgba(45, 42, 47, 0.18);
  padding: 20px 22px;
  animation: phh-consent-in .4s ease both;
}
@keyframes phh-consent-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.consent-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  max-width: 1180px;
  margin: 0 auto;
}
.consent-banner__text {
  flex: 1 1 360px;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.consent-banner__text a {
  color: var(--rose-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.consent-banner__btn {
  padding: 10px 18px;
  font-size: 14px;
  min-width: 120px;
}

@media (max-width: 700px) {
  .consent-banner { left: 8px; right: 8px; bottom: 82px; padding: 16px 18px; }
  .consent-banner__actions { width: 100%; }
  .consent-banner__btn { flex: 1; min-width: 0; }
}

/* Sticky-CTA räumt für Banner zur Seite — Banner über Sticky */
body.nav-open .consent-banner { display: none; }

/* =========================================================
   41. MOBILE EDGE-CASE SAFETY — 320px bis 414px
   ========================================================= */
@media (max-width: 480px) {
  /* Heldentitel kleiner + saubere Silbentrennung bei Komposita */
  .home-hero__title { font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 1.08; }
  .page-hero__title { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.08; }
  .closing__title   { font-size: clamp(1.8rem, 8vw, 2.3rem); line-height: 1.1; }

  /* Panel-Padding minimal, damit Überschrift mehr Platz hat */
  .home-hero__panel { padding: 28px 22px; }
}

@media (max-width: 400px) {
  .topbar { font-size: 12.5px; padding: 8px 0; }
  .topbar__message { font-size: 12.5px; }
  .topbar__link { font-size: 12.5px; }
  .topbar__cta { padding: 5px 12px; font-size: 12.5px; }
  .topbar__inner { gap: 6px; padding: 0 12px; }

  .site-header__inner { padding: 10px 12px; gap: 8px; }
  .header-utility .btn--compact { padding: 8px 12px; font-size: 12.5px; }
  .header-utility .btn--compact svg { width: 14px; height: 14px; }

  .home-hero__panel { padding: 24px 18px; }
  .home-hero__actions .btn { font-size: 14.5px; padding: 14px 18px; }

  .page-hero { padding: 60px 0 40px; }

  /* Topic-Trust: auf ganz schmalen Screens jede Zeile eigene Reihe */
  .topic-trust__list { flex-direction: column; gap: 10px; align-items: flex-start; }

  .topic-hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .topic-hero__actions .btn { width: 100%; }

  .closing__card { padding: 32px 20px; }

  /* Expertise-Byline nicht zusammenquetschen */
  .expertise-byline { padding: 16px 18px; }
  .expertise-byline__icon { width: 40px; height: 40px; }

  /* Consent-Banner schmaler */
  .consent-banner { padding: 14px 16px; bottom: 78px; }
  .consent-banner__text { font-size: 13.5px; }

  /* Sticky-CTA Button-Text kompakter */
  .sticky-cta__btn { font-size: 13.5px; padding: 12px 8px; gap: 6px; }

  /* Container-Padding reduzieren für mehr nutzbare Breite */
  .container { padding: 0 16px; }

  /* Form-Row bei 2-Feldern auf 400px schon einspaltig */
  .form__row { grid-template-columns: 1fr; }

  /* Footer-Spalten eng */
  .footer__cols { gap: 20px; }

  /* Google-Maps Pin-Element soll nicht überlaufen */
  .directions__map,
  .directions__pin { max-width: 100%; }
}

/* Zusätzliche Sicherheit: keine fixed-width Elemente dürfen über Viewport hinausragen */
img, svg, video, iframe, table { max-width: 100%; }

/* Print safety */
@media print {
  .topbar, .site-header, .mobile-nav, .sticky-cta, .closing__actions, .home-hero__actions, .consent-banner { display: none; }
}