/* =============================================================================
   Components — header, footer + homepage sections (matched to live design)
   ============================================================================= */

:root { --header-h: 112px; }

/* ---------------------------------------------------------------- Header --- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--at-neutral-l-6); border-bottom: 1px solid var(--at-black-t-6); }
.site-header__utility {
  background: var(--at-primary-d-1); color: var(--at-neutral-l-3);
  font-size: var(--at-text--2xs); letter-spacing: 0.04em;
}
.site-header__utility .container { padding-block: 0.4rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--at-space--s); }
.site-header__util-text { grid-column: 2; text-align: center; }
.site-header__social { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: var(--at-space--s); flex: 0 0 auto; }
.site-header__social a { display: inline-grid; place-items: center; color: var(--at-neutral-l-3); transition: color var(--at-duration--fast) ease; }
.site-header__social a:hover { color: #fff; }
.site-header__social svg { display: block; }

.site-header__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--at-space--m); padding-block: var(--at-space--xs);
}
.site-header__logo { justify-self: center; display: block; }
.site-header__logo img { height: 46px; width: auto; }
.site-header__logo .logo-light { display: none; }

.main-nav ul { display: flex; align-items: center; gap: var(--at-space--m); }
.main-nav--right ul { justify-content: flex-end; }
.main-nav a {
  font-family: var(--font-display); color: var(--color-ink);
  padding-block: 0.25em; border-bottom: 2px solid transparent;
  transition: color var(--at-duration--fast) ease, border-color var(--at-duration--fast) ease; white-space: nowrap;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--color-accent); border-color: var(--color-accent); }

/* Fachbereich dropdown — opens on hover and on keyboard focus */
.main-nav li { position: relative; }
.nav-dropdown {
  position: absolute; top: 100%; left: 0; transform: translateY(6px);
  min-width: 15rem; padding: var(--at-space--2xs) 0; z-index: 120;
  background: var(--at-neutral-l-6); border: 1px solid var(--at-black-t-6);
  border-radius: var(--at-radius--m); box-shadow: var(--at-shadow--l);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--at-duration--fast) ease, transform var(--at-duration--fast) ease, visibility var(--at-duration--fast);
}
/* invisible bridge so the pointer can travel from the link into the menu */
.nav-dropdown::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.main-nav .nav-dropdown ul { display: block; }
/* Specificity must beat `.site-header--transparent .main-nav a { color:#fff }`,
   otherwise the links are white on the light menu (invisible over the hero). */
.site-header .main-nav .nav-dropdown a,
.site-header--transparent .main-nav .nav-dropdown a,
.site-header--transparent.is-scrolled .main-nav .nav-dropdown a {
  display: block; padding: 0.55rem 1.1rem; color: var(--color-ink);
  border-bottom: none; white-space: nowrap;
}
.site-header .main-nav .nav-dropdown a:hover,
.site-header--transparent .main-nav .nav-dropdown a:hover,
.site-header--transparent.is-scrolled .main-nav .nav-dropdown a:hover {
  background: var(--color-band); color: var(--color-accent); border-color: transparent;
}

/* Transparent variant (over hero) */
.site-header--transparent { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; transition: background var(--at-duration--medium) ease, box-shadow var(--at-duration--medium) ease; }
.site-header--transparent .site-header__bar { padding-block: var(--at-space--s); }
.site-header--transparent .main-nav a { color: #fff; }
.site-header--transparent .main-nav a:hover, .site-header--transparent .main-nav a[aria-current="page"] { color: #fff; border-color: #fff; }
.site-header--transparent .logo-dark { display: none; }
.site-header--transparent .logo-light { display: block; }
.site-header--transparent .nav-toggle span { background: #fff; }
.site-header--transparent.is-scrolled { background: var(--at-neutral-l-6); box-shadow: var(--at-shadow--m); }
.site-header--transparent.is-scrolled .main-nav a { color: var(--color-ink); }
.site-header--transparent.is-scrolled .main-nav a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.site-header--transparent.is-scrolled .logo-dark { display: block; }
.site-header--transparent.is-scrolled .logo-light { display: none; }
.site-header--transparent.is-scrolled .nav-toggle span { background: var(--color-heading); }

/* Mobile nav */
.nav-toggle { display: none; grid-column: 3; justify-self: end; width: 2.75rem; height: 2.75rem; flex-direction: column; justify-content: center; gap: 5px; }
.nav-toggle span { display: block; height: 2px; background: var(--color-heading); transition: transform var(--at-duration--fast) ease, opacity var(--at-duration--fast) ease; }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav {
  position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); z-index: 99;
  background: var(--at-neutral-l-6); padding: calc(var(--header-h) + var(--at-space--m)) var(--at-space--l) var(--at-space--l);
  transform: translateX(100%); transition: transform var(--at-duration--medium) ease; box-shadow: var(--at-shadow--xl);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__close {
  position: absolute; top: var(--at-space--m); right: var(--at-space--l);
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; color: var(--color-heading); background: var(--at-black-t-6);
  transition: background var(--at-duration--fast) ease, color var(--at-duration--fast) ease;
}
.mobile-nav__close:hover { background: var(--at-primary); color: #fff; }
.mobile-nav ul { display: flex; flex-direction: column; gap: var(--at-space--m); }
.mobile-nav a { font-family: var(--font-display); font-size: var(--at-text--m); color: var(--color-ink); }
/* Fachbereich rows: label links to the page, the chevron expands its groups
   (mobile counterpart of .nav-dropdown — same data, tap instead of hover). */
.mobile-nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--at-space--s); }
.mobile-nav__toggle { display: grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; color: var(--color-ink-muted); transition: background var(--at-duration--fast) ease, color var(--at-duration--fast) ease; }
.mobile-nav__toggle:hover { background: var(--color-band); color: var(--color-accent); }
.mobile-nav__toggle svg { transition: transform var(--at-duration--fast) ease; }
.mobile-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* `.mobile-nav ul { display:flex }` outranks the UA's `[hidden]{display:none}`,
   so the collapsed state has to be re-asserted here. */
.mobile-nav ul.mobile-nav__sub[hidden] { display: none; }
.mobile-nav ul.mobile-nav__sub { gap: var(--at-space--xs); margin: var(--at-space--s) 0 var(--at-space--2xs) var(--at-space--2xs); padding-left: var(--at-space--m); border-left: 2px solid var(--at-primary-l-4); }
.mobile-nav .mobile-nav__sub a { font-family: var(--font-body); font-size: var(--at-text--s); color: var(--color-ink-muted); }
.mobile-nav .mobile-nav__sub a:hover { color: var(--color-accent); }

@media (max-width: 991px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .site-header__bar { grid-template-columns: 1fr auto; }
  .site-header__logo { justify-self: start; }
  body.nav-open { overflow: hidden; }
}

/* ----------------------------------------------------------- Site search --- */
/* Lupe im Header + Such-Dialog (components/search.njk, assets/js/search.js). */
.site-header__end { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: var(--at-space--s); min-width: 0; }
.search-toggle {
  display: grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; color: var(--color-ink);
  transition: background var(--at-duration--fast) ease, color var(--at-duration--fast) ease;
}
.search-toggle:hover, .search-toggle:focus-visible { background: var(--color-band); color: var(--color-accent); }
.site-header--transparent .search-toggle { color: #fff; }
.site-header--transparent .search-toggle:hover { background: var(--at-white-t-5); color: #fff; }
.site-header--transparent.is-scrolled .search-toggle { color: var(--color-ink); }
.site-header--transparent.is-scrolled .search-toggle:hover { background: var(--color-band); color: var(--color-accent); }

.site-search {
  /* Vollflächig transparent, damit ein Klick neben das Panel den Dialog schließt */
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0;
  padding: var(--at-space--xl) var(--at-container-gap) var(--at-space--m);
  border: 0; background: transparent; color: var(--color-ink);
}
.site-search::backdrop { background: var(--at-black-t-3); backdrop-filter: blur(2px); }
.site-search[open] .site-search__panel { animation: site-search-in var(--at-duration--fast) ease; }
@keyframes site-search-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .site-search[open] .site-search__panel { animation: none; } }
body.search-open { overflow: hidden; }

.site-search__panel {
  max-width: 42rem; margin-inline: auto; max-height: 100%; display: flex; flex-direction: column;
  background: var(--color-surface); border-radius: var(--at-radius--m); box-shadow: var(--at-shadow--2xl);
  overflow: hidden;
}
.site-search__bar {
  display: flex; align-items: center; gap: var(--at-space--xs);
  padding: var(--at-space--xs) var(--at-space--xs) var(--at-space--xs) var(--at-space--m);
  border-bottom: 1px solid var(--at-black-t-6);
}
.site-search__icon { flex: 0 0 auto; color: var(--color-accent); }
.site-search__input {
  flex: 1 1 auto; min-width: 0; padding: var(--at-space--xs) 0; border: 0; background: transparent;
  font: inherit; font-size: var(--at-text--m); color: var(--color-heading);
}
.site-search__input:focus { outline: none; }
.site-search__input::placeholder { color: var(--color-ink-muted); }
.site-search__input::-webkit-search-cancel-button { display: none; }
.site-search__bar:focus-within { box-shadow: inset 0 -2px 0 var(--color-accent); }
.site-search__close {
  display: grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; color: var(--color-ink-muted);
  transition: background var(--at-duration--fast) ease, color var(--at-duration--fast) ease;
}
.site-search__close:hover { background: var(--color-band); color: var(--color-heading); }

.site-search__results { overflow-y: auto; padding: var(--at-space--2xs) 0; }
.site-search__hit {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: var(--at-space--xs) var(--at-space--m); color: var(--color-ink);
  border-left: 3px solid transparent;
}
.site-search__hit[aria-selected="true"] { background: var(--at-neutral-l-3); border-left-color: var(--color-accent); }
.site-search__title { font-family: var(--font-display); font-size: var(--at-text--m); color: var(--color-heading); line-height: 1.3; }
.site-search__title mark { background: none; color: var(--color-accent-deep); text-decoration: underline; text-decoration-color: var(--at-primary-l-2); text-underline-offset: 0.18em; }
.site-search__sub { font-size: var(--at-text--xs); color: var(--color-ink-muted); letter-spacing: 0.02em; }

.site-search__empty, .site-search__hint { padding: var(--at-space--m); }
.site-search__empty p { margin: 0; color: var(--color-ink-muted); }
.site-search__empty .site-search__empty-title { font-family: var(--font-display); font-size: var(--at-text--m); color: var(--color-heading); margin-bottom: var(--at-space--3xs); }
.site-search__empty-link { display: inline-block; margin-top: var(--at-space--xs); color: var(--color-accent-deep); font-weight: 500; }
.site-search__empty-link:hover { text-decoration: underline; }
.site-search__hint-title { margin: 0 0 var(--at-space--xs); font-size: var(--at-text--xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-muted); }
.site-search__quick { display: flex; flex-wrap: wrap; gap: var(--at-space--2xs); }
.site-search__quick a {
  display: inline-block; padding: 0.4em 0.9em; border-radius: var(--at-radius--s);
  background: var(--color-band); color: var(--color-heading); font-size: var(--at-text--s);
  transition: background var(--at-duration--fast) ease, color var(--at-duration--fast) ease;
}
.site-search__quick a:hover { background: var(--at-primary); color: #fff; }

/* Zwischen Tablet und breitem Desktop wird es mit der Lupe eng: Abstände straffen */
@media (min-width: 992px) and (max-width: 1279px) {
  .site-header__bar { gap: var(--at-space--s); }
  .main-nav ul { gap: var(--at-space--s); }
  .site-header__end { gap: var(--at-space--3xs); }
  .search-toggle { width: 2.25rem; height: 2.25rem; margin-right: calc(var(--at-space--2xs) * -1); }
}
@media (min-width: 992px) and (max-width: 1149px) {
  .main-nav ul { gap: var(--at-space--xs); }
  .main-nav > ul > li > a, .main-nav nav > ul > li > a { font-size: 0.94em; }
}
@media (max-width: 991px) {
  .site-header__bar { grid-template-columns: 1fr auto auto; gap: var(--at-space--2xs); }
  .site-header__end { grid-column: auto; }
  .nav-toggle { grid-column: auto; }
}
@media (max-width: 600px) {
  .site-search { padding: var(--at-space--xs); }
  .site-search__panel { border-radius: var(--at-radius--s); }
}

/* ------------------------------------------------------------------ Hero --- */
.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center;
  text-align: center; color: #fff; padding: calc(var(--header-h) + var(--at-space--xl)) 0 var(--at-space--2xl);
  overflow: hidden;
}
/* Parallax-Ebene (GMN-56): überhohes Bild, wird von assets/js/parallax.js beim
   Scrollen langsamer mitbewegt; ohne JS bzw. bei prefers-reduced-motion statisch. */
.hero__media, .page-header__media {
  position: absolute; inset: -45% 0; background-size: cover; background-position: center;
  will-change: transform; pointer-events: none;
}
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,32,26,.58) 0%, rgba(38,32,26,.48) 45%, rgba(38,32,26,.72) 100%); }
.hero__inner { position: relative; max-width: 46rem; }
.hero__title { color: #fff; font-size: var(--at-heading--xl); margin-bottom: var(--at-space--m); }
.hero__text { color: rgba(255,255,255,.92); font-size: var(--at-text--m); margin-bottom: var(--at-space--s); margin-inline: auto; max-width: 38rem; }
.hero__lead { max-width: 44rem; font-size: var(--at-text--s); }
.hero__note { color: rgba(255,255,255,.78); font-size: var(--at-text--xs); letter-spacing: 0.03em; margin-bottom: var(--at-space--l); }
.eyebrow--light { color: rgba(255,255,255,.85); }

/* ----------------------------------------------------------------- Intro --- */
.intro__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--at-space--2xl); align-items: center; }
.intro__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center center; border-radius: var(--at-radius--m); box-shadow: var(--at-shadow--m); }
.intro .lead { margin-top: var(--at-space--s); }
.stat { display: flex; align-items: baseline; gap: 0.5rem; margin-top: var(--at-space--l); color: var(--color-ink-muted); font-size: var(--at-text--s); }
.stat__num { font-family: var(--font-display); font-size: var(--at-heading--xl); color: var(--color-accent); line-height: 1; }
/* Gestapelt (GMN-53/55): Einleitungstext vor dem Intro-Bild, sobald das 2-Spalten-Grid umbricht */
@media (max-width: 767px) { .intro__inner { grid-template-columns: 1fr; gap: var(--at-space--l); } .intro__inner .intro__media { order: 1; } }

/* -------------------------------------------------------------- Services --- */
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--at-space--l); }
.service-card { display: flex; flex-direction: column; gap: var(--at-space--s); text-align: center; }
.service-card__media { overflow: hidden; border-radius: var(--at-radius--m); box-shadow: var(--at-shadow--s); }
.service-card__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform var(--at-duration--medium) ease; }
.service-card:hover .service-card__media img { transform: scale(1.05); }
.service-card__title { font-size: var(--at-heading--s); color: var(--color-heading); }
.service-card:hover .service-card__title { color: var(--color-accent); }
.section__cta { margin-top: var(--at-space--xl); display: flex; justify-content: center; }
@media (max-width: 991px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .service-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- Benefits --- */
.benefits__panel { background: var(--at-neutral-l-6); border-radius: var(--at-radius--l); padding: var(--at-space--2xl) var(--at-space--xl); box-shadow: var(--at-shadow--s); }
.benefits__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--at-space--xl); }
.benefit { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--at-space--xs); }
.benefit__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; color: var(--color-accent); margin-bottom: var(--at-space--2xs); }
.benefit__icon svg { width: 100%; height: 100%; }
.benefit h4 { color: var(--color-heading); }
@media (max-width: 767px) { .benefits__grid { grid-template-columns: 1fr; gap: var(--at-space--l); } }

/* ---------------------------------------------------------- Contact CTA --- */
.contact-cta__body { max-width: 44rem; }
.contact-cta .lead { margin-block: var(--at-space--s) var(--at-space--l); }

/* ----------------------------------------------------------- Feature band --- */
.feature-band { height: clamp(220px, 30vw, 380px); background-image: var(--band-img); background-size: cover; background-position: center 30%; }

/* ------------------------------------------------------------------ Team --- */
.team__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--at-space--m); margin-bottom: var(--at-space--xl); }
.team__head .section-head { margin-bottom: 0; }
.team__nav { display: flex; gap: var(--at-space--xs); }
.carousel-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--at-primary-l-2); color: var(--color-heading); background: var(--at-neutral-l-6); transition: var(--at-btn-transition); }
.carousel-btn:hover { background: var(--at-primary); color: #fff; border-color: var(--at-primary); }
.team__track { display: flex; gap: var(--at-space--l); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; padding-bottom: var(--at-space--s); scrollbar-width: none; }
.team__track::-webkit-scrollbar { display: none; }
.team-member { flex: 0 0 calc((100% - 2 * var(--at-space--l)) / 3); scroll-snap-align: start; text-align: center; }
.team-member img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: var(--at-radius--m); margin-bottom: var(--at-space--s); box-shadow: var(--at-shadow--s); }
.team-member__name { font-family: var(--font-display); font-size: var(--at-text--m); color: var(--color-heading); }
.team-member__role { font-size: var(--at-text--xs); color: var(--color-ink-muted); }
@media (max-width: 991px) { .team-member { flex-basis: calc((100% - 2 * var(--at-space--l)) / 3); } }
@media (max-width: 767px) { .team-member { flex-basis: calc((100% - var(--at-space--l)) / 2); } }
@media (max-width: 479px) { .team-member { flex-basis: 78%; } }

/* ---------------------------------------------------------- Testimonials --- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--at-space--l); }
/* On the 900px-wide pages (archives, treatment singles, doctors, blog single) three
   cards read cramped — show 2 roomier cards instead. Mobile keeps stacking all. */
@media (min-width: 768px) {
  main.narrow900 .testimonial-grid,
  main.tx-single .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  main.narrow900 .testimonial-card:nth-child(n+3),
  main.tx-single .testimonial-card:nth-child(n+3) { display: none; }
}
.testimonial-card { background: var(--color-surface); border: 1px solid var(--at-black-t-6); border-radius: var(--at-radius--m); padding: var(--at-space--l); box-shadow: var(--at-shadow--s); display: flex; flex-direction: column; gap: var(--at-space--xs); transition: transform var(--at-duration--fast) ease, box-shadow var(--at-duration--fast) ease; }
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--at-shadow--l); }
.testimonial-card__stars { color: var(--at-warning); letter-spacing: 2px; }
.testimonial-card__title { font-family: var(--font-display); font-size: var(--at-heading--s); color: var(--color-heading); }
.testimonial-card__text { color: var(--color-ink-muted); }
.testimonial-card__quote { font-family: var(--font-display); font-size: 3rem; line-height: 0.5; color: var(--at-primary-l-2); margin-bottom: var(--at-space--2xs); }
.testimonial-card__author { display: flex; align-items: center; gap: var(--at-space--xs); margin-top: auto; padding-top: var(--at-space--s); font-weight: 600; font-size: var(--at-text--xs); }
.testimonial-card__name { color: var(--color-heading); }
.avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--at-primary-l-3); color: var(--at-primary-d-3); font-family: var(--font-display); }
.testimonials__more { display: flex; justify-content: center; margin-top: var(--at-space--xl); }
@media (max-width: 767px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Footer --- */
.site-footer { position: relative; overflow: hidden; background: var(--at-primary-d-1); color: var(--at-neutral-l-3); padding-block: var(--at-space--2xl); }
.site-footer__mark { position: absolute; right: -1.5rem; bottom: -2.5rem; width: clamp(170px, 24vw, 320px); height: auto; color: var(--at-neutral-l-6); opacity: 0.07; pointer-events: none; }
.site-footer .container { position: relative; z-index: 1; }
@media (max-width: 767px) { .site-footer__mark { width: 200px; right: -1rem; bottom: -1.5rem; opacity: 0.06; } }
.site-footer__logo { height: 52px; width: auto; margin-bottom: var(--at-space--s); }
.site-footer h4 { color: var(--at-neutral-l-5); font-size: var(--at-text--m); margin-bottom: var(--at-space--s); }
.site-footer a { color: var(--at-neutral-l-3); }
.site-footer a:hover { color: var(--at-neutral-l-6); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--at-space--xl); }
.site-footer__contact p { margin-bottom: 0.35em; }
.site-footer__hours-col { min-width: 300px; }
.site-footer__hours li { display: flex; justify-content: space-between; gap: var(--at-space--s); margin-bottom: 0.35em; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--at-space--s) var(--at-space--l); justify-content: space-between; align-items: center;
  margin-top: var(--at-space--xl); padding-top: var(--at-space--l); border-top: 1px solid var(--at-white-t-5); font-size: var(--at-text--xs);
}
.site-footer__legal { display: flex; gap: var(--at-space--m); }
@media (max-width: 767px) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--at-space--l); } }

/* ----------------------------------------------------- Intro extras (Startseite) --- */
.intro__body .lead + .lead { margin-top: var(--at-space--s); }
.intro__note { margin-top: var(--at-space--s); font-weight: 600; color: var(--color-heading); }
.intro__links { display: flex; flex-wrap: wrap; gap: var(--at-space--s) var(--at-space--m); margin-top: var(--at-space--s); }
.intro__links a { color: var(--color-accent); font-weight: 600; }
.intro__links a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- Focus areas --- */
/* "Unsere Schwerpunkte" — image cards in the live "Unsere Leistungen" style:
   the image fades on hover to reveal the description + an arrow icon; title below. */
.focus-card { display: flex; flex-direction: column; gap: var(--at-space--s); transition: transform var(--at-duration--fast) ease; }
.focus-card:hover { transform: translateY(-4px); }
.focus-card__media {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--at-black-t-6);
  border-radius: var(--at-radius--m); box-shadow: var(--at-shadow--s);
  background: var(--color-surface);
  transition: box-shadow var(--at-duration--medium) ease;
}
.focus-card:hover .focus-card__media { box-shadow: var(--at-shadow--l); }
.focus-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--at-duration--medium) ease, transform var(--at-duration--slow) ease;
}
.focus-card:hover .focus-card__img { opacity: 0; transform: scale(1.06); }
/* arrow icon — hidden until hover; the site's taupe arrow-badge (matches .btn__icon) */
.focus-card__icon {
  position: absolute; top: var(--at-space--s); right: var(--at-space--s); z-index: 2;
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; background: var(--at-primary-l-3); color: var(--at-primary-d-3);
  opacity: 0;
  transition: opacity var(--at-duration--medium) ease, transform var(--at-duration--fast) ease,
              background var(--at-duration--fast) ease, color var(--at-duration--fast) ease;
}
.focus-card:hover .focus-card__icon { opacity: 1; }
.focus-card__icon:hover { background: var(--at-primary); color: #fff; transform: rotate(-45deg); }
/* description — hidden until hover, revealed over the (faded) image */
.focus-card__text {
  position: absolute; inset: 0; z-index: 1;
  padding: 3.5rem var(--at-space--l) var(--at-space--l);
  color: var(--color-ink-muted); font-size: var(--at-text--s); line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden;
  opacity: 0; transition: opacity var(--at-duration--medium) ease;
}
.focus-card__media:hover .focus-card__text { opacity: 1; }
/* title below the card */
.focus-card__title { font-size: var(--at-heading--s); }
.focus-card__title a { color: var(--color-heading); transition: color var(--at-duration--fast) ease; }
.focus-card:hover .focus-card__title a { color: var(--color-accent); }

/* --- text button (label + small icon) --- */
.btn--text { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 500; color: var(--color-accent); }
.btn--text .btn__icon { width: 1.6rem; height: 1.6rem; background: var(--at-primary-l-3); color: var(--at-primary-d-3); }
.btn--text:hover { background: transparent; box-shadow: none; }
.btn--text:hover .btn__icon { transform: translateX(3px); background: var(--at-primary-l-3); }

/* ----------------------------------------------------------------- Doctors --- */
.doctors__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--at-space--xl); }
.doctor-card { background: var(--color-surface); border-radius: var(--at-radius--m); overflow: hidden; box-shadow: var(--at-shadow--s); display: flex; flex-direction: column; }
.doctor-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; }
.doctor-card__body { padding: var(--at-space--l); display: flex; flex-direction: column; gap: var(--at-space--xs); }
.doctor-card__name { font-size: var(--at-heading--m); color: var(--color-heading); }
.doctor-card__role { color: var(--color-accent); font-weight: 600; font-size: var(--at-text--s); }
.doctor-card__memberships { font-size: var(--at-text--xs); color: var(--color-ink-muted); font-style: italic; }
/* Startseite: Ärztinnen-Karten auf gleiche Höhe (Elisa/Ufuk 22.09.) — nur Desktop */
@media (min-width: 768px) { .doctors--home .doctor-card { min-height: 400px; } }
.doctor-card .btn--text { margin-top: var(--at-space--xs); }
@media (max-width: 767px) { .doctors__grid { grid-template-columns: 1fr; } }
/* Variante "stacked" (GMN-69): Ärztinnen untereinander in voller Breite —
   Porträt links (3:4), Text rechts. Skaliert auf beliebig viele Einträge,
   damit neue Ärztinnen ohne Layout-Anpassung ergänzt werden können.
   "stacked-alt": Bildseite alterniert pro Zeile. */
.doctors--stacked .doctors__grid, .doctors--stacked-alt .doctors__grid { grid-template-columns: 1fr; gap: var(--at-space--l); }
.doctors--stacked .doctor-card, .doctors--stacked-alt .doctor-card { flex-direction: row; align-items: stretch; }
.doctors--stacked-alt .doctor-card:nth-child(even) { flex-direction: row-reverse; }
.doctors--stacked .doctor-card__media, .doctors--stacked-alt .doctor-card__media { flex: 0 0 min(320px, 38%); position: relative; }
.doctors--stacked .doctor-card__media img, .doctors--stacked-alt .doctor-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center top; }
.doctors--stacked .doctor-card__body, .doctors--stacked-alt .doctor-card__body { flex: 1; justify-content: center; padding: var(--at-space--xl); }
@media (max-width: 767px) {
  .doctors--stacked .doctor-card, .doctors--stacked-alt .doctor-card, .doctors--stacked-alt .doctor-card:nth-child(even) { flex-direction: column; }
  .doctors--stacked .doctor-card__media, .doctors--stacked-alt .doctor-card__media { flex: none; position: static; }
  .doctors--stacked .doctor-card__media img, .doctors--stacked-alt .doctor-card__media img { position: static; aspect-ratio: 4 / 3; height: auto; }
  .doctors--stacked .doctor-card__body, .doctors--stacked-alt .doctor-card__body { padding: var(--at-space--l); }
}

/* --------------------------------------------------------------- Statement --- */
.statement { text-align: center; }
.statement__inner { max-width: 50rem; margin-inline: auto; }
/* Gap between statement blocks — Elisa 31.08.: "2–3 Leerzeilen mehr" → doubled (was --at-space--2xl). */
.statement__inner + .statement__inner { margin-top: calc(var(--at-space--2xl) * 2); }
.statement .lead { margin-top: var(--at-space--s); font-size: var(--at-text--m); }
/* Aufzählung aus „**Stichwort:** Erklärung“-Absätzen (GMN-112): linksbündig im zentrierten Block */
.statement__list { list-style: none; margin: var(--at-space--m) auto 0; padding: 0; max-width: 44rem; text-align: left; display: grid; gap: var(--at-space--s); }
.statement__list li { position: relative; padding-left: var(--at-space--m); color: var(--color-ink-muted); font-size: var(--at-text--s); line-height: 1.6; }
.statement__list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--color-accent); }
.statement__list strong, .intro .lead strong { color: var(--color-heading); font-weight: 600; }

/* ---------------------------------------------------------------- Location --- */
.location__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--at-space--2xl); align-items: start; }
.location__block { margin-bottom: var(--at-space--l); }
.location__block h4 { color: var(--color-heading); margin-bottom: var(--at-space--2xs); }
.location__address strong { color: var(--color-heading); }
.location__hours li { display: flex; justify-content: space-between; gap: var(--at-space--m); padding-block: 0.25em; border-bottom: 1px solid var(--at-black-t-6); }
.location__contact a { color: var(--color-accent); font-weight: 600; }
.location__map { position: sticky; top: calc(var(--header-h) + var(--at-space--s)); }
.location__map iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--at-radius--m); box-shadow: var(--at-shadow--m); display: block; }
.location__map .btn--text, .contact-info__map .btn--text { margin-top: var(--at-space--s); }
@media (max-width: 767px) { .location__inner { grid-template-columns: 1fr; gap: var(--at-space--l); } .location__map { position: static; } }

/* Click-to-load map (consent gate) — placeholder matches the iframe footprint */
.map-embed { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--at-radius--m); overflow: hidden; box-shadow: var(--at-shadow--m); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-embed__consent { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--at-space--m); padding: var(--at-space--l); text-align: center; background: var(--color-band); }
.map-embed__note { max-width: 34ch; margin: 0; font-size: var(--at-text--s); color: var(--color-ink-muted); }
.map-embed__note a { color: var(--color-accent); text-decoration: underline; }

/* -------------------------------------------------------------------- FAQ --- */
.faq-list { display: flex; flex-direction: column; gap: var(--at-space--s); }
.faq-item { background: var(--color-surface); border: 1px solid var(--at-black-t-6); border-radius: var(--at-radius--m); padding: 0 var(--at-space--l); box-shadow: var(--at-shadow--s); }
.faq-item__q { display: flex; align-items: center; justify-content: space-between; gap: var(--at-space--m); padding: var(--at-space--m) 0; cursor: pointer; font-family: var(--font-display); font-size: var(--at-heading--xs); color: var(--color-heading); list-style: none; }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__chev { color: var(--color-accent); transition: transform var(--at-duration--fast) ease; flex: 0 0 auto; }
.faq-item[open] .faq-item__chev { transform: rotate(180deg); }
.faq-item__a { padding-bottom: var(--at-space--m); color: var(--color-ink-muted); }

/* ------------------------------------------------------------- Review widget --- */
.review-widget { display: flex; flex-direction: column; gap: var(--at-space--m); align-items: center; text-align: center; }
.review-widget__placeholder { background: var(--color-surface); border: 1px dashed var(--at-primary-l-2); border-radius: var(--at-radius--m); padding: var(--at-space--xl); max-width: 48rem; }
.review-widget__stars { color: var(--at-warning); font-size: var(--at-heading--m); letter-spacing: 3px; }
.review-widget__links { display: flex; flex-wrap: wrap; gap: var(--at-space--m); justify-content: center; }
.review-widget__links a { color: var(--color-accent); font-weight: 600; }
/* Consent-gated external reviews widget (Elfsight) — same look as the map gate. */
.review-embed { width: 100%; max-width: 60rem; margin-inline: auto; border-radius: var(--at-radius--m); overflow: hidden; }
.review-embed__consent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--at-space--m); padding: var(--at-space--xl) var(--at-space--l); text-align: center; background: var(--color-surface); border: 1px dashed var(--at-primary-l-2); border-radius: var(--at-radius--m); }
.review-embed__note { max-width: 44ch; margin: 0; font-size: var(--at-text--s); color: var(--color-ink-muted); }
.review-embed__note a { color: var(--color-accent); text-decoration: underline; }
.review-embed--loaded { border-radius: 0; }

/* =============================================================================
   Interior pages — page-header, checklist, category accordion, quote,
   highlights, contact form, blog. Added for archive/about/blog/contact build.
   ============================================================================= */

.section-head__lead { margin-top: var(--at-space--s); }
.section--paper { background: var(--color-surface); }

/* ------------------------------------------------------- Page header (sub-hero) --- */
.page-header { position: relative; background: var(--color-band); padding: var(--at-space--2xl) 0; text-align: center; }
/* Only compensate for the header height when it is transparent/fixed over the page-header. */
.site-header--transparent + main .page-header { padding-top: calc(var(--header-h) + var(--at-space--xl)); }
.page-header--image { position: relative; overflow: hidden; color: #fff; }
.page-header__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,36,31,.58) 0%, rgba(40,36,31,.40) 45%, rgba(40,36,31,.70) 100%); }
.page-header__inner { position: relative; max-width: 50rem; margin-inline: auto; }
.page-header--image .page-header__title { color: #fff; }
.page-header__title { font-size: var(--at-heading--xl); margin-bottom: var(--at-space--s); }
.page-header__text { font-size: var(--at-text--m); color: var(--color-ink-muted); margin-inline: auto; max-width: 42rem; margin-bottom: var(--at-space--l); }
.page-header--image .page-header__text { color: rgba(255,255,255,.92); }
.page-header .btn { margin-top: var(--at-space--xs); }

/* ------------------------------------------------------------------ Checklist --- */
/* "Auf einen Blick" — oat panel, each item a white card with taupe left-border (design file) */
.checklist__panel { background: var(--color-band); border-radius: var(--at-radius--l); padding: var(--at-space--2xl) var(--at-space--xl); }
.checklist__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--at-space--s) var(--at-space--m); }
.checklist__item { display: flex; gap: var(--at-space--s); align-items: flex-start; color: var(--color-ink-muted); background: var(--color-surface); padding: var(--at-space--l) var(--at-space--m); border-radius: var(--at-radius--s); border-left: 3px solid var(--at-primary-l-1); box-shadow: var(--at-shadow--s); line-height: 1.55; }
.checklist__icon { display: grid; place-items: center; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; color: var(--at-primary); margin-top: 0.05rem; }
.checklist__icon svg { width: 100%; height: 100%; }
@media (max-width: 767px) { .checklist__list { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- Category accordion --- */
.cat-acc { display: flex; flex-direction: column; gap: var(--at-space--s); max-width: 60rem; margin-inline: auto; }
.cat-acc__group { background: var(--color-surface); border: 1px solid var(--at-black-t-6); border-radius: var(--at-radius--m); box-shadow: var(--at-shadow--s); overflow: hidden; scroll-margin-top: calc(var(--header-h) + var(--at-space--m)); }
.cat-acc__summary { display: flex; align-items: center; gap: var(--at-space--m); padding: var(--at-space--m) var(--at-space--l); cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--at-heading--xs); color: var(--color-heading); }
.cat-acc__summary::-webkit-details-marker { display: none; }
.cat-acc__group-title { flex: 1; }
.cat-acc__chev { color: var(--color-accent); transition: transform var(--at-duration--fast) ease; flex: 0 0 auto; }
.cat-acc__group[open] .cat-acc__chev { transform: rotate(180deg); }
.cat-acc__body { padding: 0 var(--at-space--l) var(--at-space--m); }
.cat-acc__intro { margin-bottom: var(--at-space--s); }
.cat-acc__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem var(--at-space--l); }
.cat-acc__link { display: flex; align-items: center; justify-content: space-between; gap: var(--at-space--s); padding: 0.6rem 0; border-bottom: 1px solid var(--at-black-t-6); color: var(--color-ink); transition: color var(--at-duration--fast) ease; }
.cat-acc__link:hover { color: var(--color-accent); }
.cat-acc__link--static { cursor: default; }
.cat-acc__link--static:hover { color: var(--color-ink); }
.cat-acc__arrow { color: var(--color-accent); opacity: 0; transform: translateX(-4px); transition: opacity var(--at-duration--fast) ease, transform var(--at-duration--fast) ease; flex: 0 0 auto; }
.cat-acc__link:hover .cat-acc__arrow { opacity: 1; transform: translateX(0); }
@media (max-width: 767px) { .cat-acc__list { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- Quote --- */
.quote-section .quote-block:not(.quote-block--photo) { max-width: 54rem; margin-inline: auto; text-align: center; position: relative; padding: var(--at-space--xl) var(--at-space--xl) var(--at-space--l); background: var(--color-band); border-radius: var(--at-radius--l); }
.quote-block__mark { font-family: var(--font-display); font-size: 5rem; line-height: 0.6; color: var(--at-primary-l-2); display: block; margin-bottom: var(--at-space--xs); }
.quote-block__text { font-family: var(--font-display); font-size: var(--at-heading--s); line-height: 1.5; color: var(--color-heading); }
.quote-block__author { margin-top: var(--at-space--m); }
.quote-block__name { display: block; font-weight: 600; color: var(--color-accent); }
.quote-block__role { display: block; font-size: var(--at-text--xs); color: var(--color-ink-muted); }

/* -------------------------------------------------------------- Highlights --- */
.highlights__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: var(--at-space--xl); }
.highlight { display: flex; flex-direction: column; gap: var(--at-space--2xs); }
.highlight__title { font-size: var(--at-heading--s); color: var(--color-heading); margin-bottom: var(--at-space--2xs); }
.highlight .btn--text { margin-top: auto; padding-top: var(--at-space--xs); }

/* ----------------------------------------------------------- Contact form --- */
.contact-layout__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--at-space--2xl); align-items: start; }
.contact-form { background: var(--color-surface); border-radius: var(--at-radius--l); padding: var(--at-space--xl); box-shadow: var(--at-shadow--s); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--at-space--m); }
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--at-space--m); }
.field label { font-weight: 600; font-size: var(--at-text--xs); color: var(--color-heading); }
.field input, .field textarea, .field select {
  font: inherit; font-size: var(--at-text--s); color: var(--color-ink);
  padding: 0.7rem 0.9rem; border: 1px solid var(--at-primary-l-2); border-radius: var(--at-radius--s);
  background: var(--color-canvas); transition: border-color var(--at-duration--fast) ease, box-shadow var(--at-duration--fast) ease;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--at-primary-l-3); }
.field textarea { resize: vertical; min-height: 8rem; }
.field--check { flex-direction: row; align-items: flex-start; gap: var(--at-space--xs); }
.field--check input { margin-top: 0.2rem; }
.field--check label { font-weight: 400; font-size: var(--at-text--xs); color: var(--color-ink-muted); }
.contact-form__status { margin-top: var(--at-space--m); padding: var(--at-space--s) var(--at-space--m); border-radius: var(--at-radius--s); font-size: var(--at-text--xs); }
.contact-form__status.is-ok { background: var(--at-primary-l-3); color: var(--at-primary-d-3); }
.contact-form__status.is-error { background: hsla(0, 60%, 50%, 0.12); color: var(--color-danger, #a23); }
.contact-form__note { margin-top: var(--at-space--s); font-size: var(--at-text--2xs); color: var(--color-ink-muted); }
@media (max-width: 991px) { .contact-layout__inner { grid-template-columns: 1fr; gap: var(--at-space--xl); } }
@media (max-width: 479px) { .contact-form__row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- Blog --- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--at-space--xl); }
.post-card { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--at-radius--m); overflow: hidden; box-shadow: var(--at-shadow--s); transition: transform var(--at-duration--fast) ease, box-shadow var(--at-duration--fast) ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--at-shadow--l); }
.post-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-band); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--at-duration--medium) ease; }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { display: flex; flex-direction: column; gap: var(--at-space--xs); padding: var(--at-space--l); flex: 1; }
.post-card__cat { font-size: var(--at-text--2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); }
.post-card__title { font-size: var(--at-heading--xs); color: var(--color-heading); }
.post-card:hover .post-card__title { color: var(--color-accent); }
.post-card__excerpt { color: var(--color-ink-muted); font-size: var(--at-text--s); }
.post-card .btn--text { margin-top: auto; padding-top: var(--at-space--xs); }
@media (max-width: 991px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .post-grid { grid-template-columns: 1fr; } }

/* Blog single prose */
.prose { max-width: var(--at-blog-width, 46rem); margin-inline: auto; }
.prose > * + * { margin-top: var(--at-space--m); }
.prose h2 { font-size: var(--at-heading--m); margin-top: var(--at-space--xl); }
.prose h3 { font-size: var(--at-heading--s); margin-top: var(--at-space--l); }
.prose p, .prose li { color: var(--color-ink-muted); }
.prose ul { display: flex; flex-direction: column; gap: var(--at-space--2xs); padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.6rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent); }
.prose .lead { font-size: var(--at-text--m); color: var(--color-ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--at-text--s); margin-top: var(--at-space--m); }
.prose th, .prose td { text-align: left; padding: var(--at-space--xs) var(--at-space--s); border-bottom: 1px solid var(--color-band); vertical-align: top; }
.prose th { font-family: var(--font-display); font-weight: 600; color: var(--color-heading); background: var(--color-band); }
.prose td { color: var(--color-ink-muted); }
.prose--center { text-align: center; }
.prose--center ul.error-links { display: inline-flex; flex-flow: row wrap; justify-content: center; gap: var(--at-space--s) var(--at-space--l); margin-top: var(--at-space--m); }
.prose--center ul.error-links li { padding-left: 0; }
.prose--center ul.error-links li::before { display: none; }
.prose--center ul.error-links a { color: var(--color-accent); font-weight: 600; }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--at-space--s) var(--at-space--m); align-items: center; justify-content: center; margin-bottom: var(--at-space--l); font-size: var(--at-text--xs); color: var(--color-ink-muted); }
.post-meta__cat { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); }
.contact-info__map { margin-top: var(--at-space--l); }
.contact-info__map iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--at-radius--m); box-shadow: var(--at-shadow--m); display: block; }
.contact-info .btn { margin-top: var(--at-space--xs); }
.contact-form__title { font-size: var(--at-heading--s); margin-bottom: var(--at-space--m); }

/* =============================================================================
   Treatment Single — facts, ablauf, treatment-areas, combinations, related,
   quote-with-photo. Token-styled, adapted from input/design/*.html.
   ============================================================================= */

/* ------------------------------------------------------------------ Facts --- */
/* White card, two-tone label/value rows (design file .facts) */
.facts-table { background: var(--color-surface); border: 1px solid var(--at-black-t-6); border-radius: var(--at-radius--m); overflow: hidden; box-shadow: var(--at-shadow--s); }
.facts-table__row { display: grid; grid-template-columns: 1fr 1.6fr; border-bottom: 1px solid var(--color-band); }
.facts-table__row:last-child { border-bottom: none; }
.facts-table__label { color: var(--color-ink-muted); padding: var(--at-space--s) var(--at-space--m); background: var(--color-canvas); font-size: var(--at-text--xs); }
.facts-table__value { color: var(--color-heading); padding: var(--at-space--s) var(--at-space--m); font-weight: 500; font-size: var(--at-text--xs); }
@media (max-width: 599px) { .facts-table__row { grid-template-columns: 1fr; } .facts-table__label { background: var(--color-band); } }

/* ----------------------------------------------------------------- Ablauf --- */
.ablauf__inner--media { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--at-space--2xl); align-items: start; }
.ablauf__media { position: sticky; top: calc(var(--header-h) + var(--at-space--m)); align-self: start; }
.ablauf__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: var(--at-radius--m); box-shadow: var(--at-shadow--m); }
.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--at-space--m); padding-bottom: var(--at-space--l); position: relative; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 1.1rem; top: 2.4rem; bottom: 0; width: 2px; background: var(--at-primary-l-2); }
.step__num { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--at-primary); color: #fff; font-family: var(--font-display); font-size: var(--at-text--s); position: relative; z-index: 1; }
.step__name { font-family: var(--font-display); font-size: var(--at-heading--xs); color: var(--color-heading); margin-bottom: 0.2rem; }
.step__desc { color: var(--color-ink-muted); }
.step__sub { margin-top: var(--at-space--xs); display: flex; flex-direction: column; gap: 0.2rem; }
.step__sub li { position: relative; padding-left: 1.2rem; color: var(--color-ink-muted); font-size: var(--at-text--xs); }
.step__sub li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--color-accent); }
@media (max-width: 767px) { .ablauf__inner--media { grid-template-columns: 1fr; gap: var(--at-space--l); } .ablauf__media { position: static; } .ablauf__media img { aspect-ratio: 16 / 10; } }

/* ------------------------------------------------------- Treatment areas --- */
/* Filled-taupe accordion boxes with thumbnail + circular chevron (design file .acc-item) */
.areas-list { display: flex; flex-direction: column; gap: 8px; }
.area-item { border-radius: var(--at-radius--m); overflow: hidden; box-shadow: var(--at-shadow--s); }
.area-item__summary { display: flex; align-items: stretch; gap: 0; cursor: pointer; list-style: none; background: var(--at-primary-l-1); transition: background var(--at-duration--fast) ease; }
.area-item__summary::-webkit-details-marker { display: none; }
.area-item__thumb { flex: 0 0 auto; display: grid; place-items: center; width: 3.4rem; background: var(--at-primary); color: #fff; }
.area-item__name { flex: 1; display: flex; align-items: center; padding: var(--at-space--m) var(--at-space--m); font-family: var(--font-display); font-size: var(--at-heading--xs); color: #fff; line-height: 1.35; }
.area-item__chev { flex: 0 0 auto; align-self: center; margin-right: var(--at-space--m); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); color: #fff; transition: transform var(--at-duration--fast) ease, background var(--at-duration--fast) ease; }
.area-item:hover .area-item__summary { background: var(--at-primary); }
.area-item[open] .area-item__summary { background: var(--at-primary-d-1); }
.area-item[open] .area-item__chev { transform: rotate(180deg); background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.7); }
/* Bild-Variante (GMN-58): Foto statt Männchen-Icon. Kachel ist immer quadratisch
   (Seitenlänge = Zeilenhöhe, via aspect-ratio); Bild mittig hineingecroppt und
   absolut positioniert, damit es die Zeilenhöhe nicht beeinflusst — unabhängig
   vom Format des hochgeladenen Bildes. */
.area-item__thumb--img { width: 5rem; height: 5rem; align-self: center; display: block; padding: 0; position: relative; overflow: hidden; }
.area-item__thumb--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.area-item__body { background: var(--color-band); color: var(--color-ink-muted); padding: var(--at-space--m) var(--at-space--l) var(--at-space--l); border-top: 1px solid var(--at-black-t-6); }
.area-item__sub { margin-top: var(--at-space--s); display: flex; flex-direction: column; gap: var(--at-space--s); border-left: 2px solid var(--at-primary); padding-left: var(--at-space--m); }
.area-sub-row strong { color: var(--color-heading); display: block; margin-bottom: 0.15rem; }
.area-sub-row p { color: var(--color-ink-muted); }

/* ----------------------------------------------------------- Combinations --- */
/* Cards with taupe gradient header (design file .kombi-card / .kombi-img) */
.kombi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--at-space--l); }
.kombi-card { background: var(--color-surface); border: 1px solid var(--at-black-t-6); border-radius: var(--at-radius--m); overflow: hidden; box-shadow: var(--at-shadow--s); display: flex; flex-direction: column; transition: transform var(--at-duration--fast) ease, box-shadow var(--at-duration--fast) ease; }
.kombi-card:hover { transform: translateY(-3px); box-shadow: var(--at-shadow--l); }
.kombi-card__img { height: 5.5rem; display: grid; place-items: center; background: linear-gradient(135deg, var(--at-primary-l-1), var(--at-primary-d-1)); color: rgba(255,255,255,.7); overflow: hidden; }
/* Foto-Variante (GMN-65): füllt den Kartenkopf, mittig gecroppt */
.kombi-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.kombi-card__body { padding: var(--at-space--l); display: flex; flex-direction: column; gap: var(--at-space--xs); flex: 1; }
.kombi-card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--at-heading--xs); color: var(--color-heading); }
.kombi-card .btn--text { margin-top: auto; padding-top: var(--at-space--xs); }

/* --------------------------------------------------------------- Related --- */
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--at-space--l); }
.rel-card { background: var(--color-surface); border-radius: var(--at-radius--m); overflow: hidden; box-shadow: var(--at-shadow--s); display: flex; flex-direction: column; transition: transform var(--at-duration--fast) ease, box-shadow var(--at-duration--fast) ease; }
.rel-card:hover { transform: translateY(-4px); box-shadow: var(--at-shadow--l); }
.rel-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.rel-card__media { aspect-ratio: 16 / 10; display: grid; place-items: center; background: linear-gradient(135deg, var(--at-primary-l-1), var(--at-primary-d-1)); color: rgba(255,255,255,.6); overflow: hidden; }
.rel-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.rel-card__body { padding: var(--at-space--l); display: flex; flex-direction: column; gap: var(--at-space--2xs); flex: 1; }
.rel-card__title { font-family: var(--font-display); font-size: var(--at-heading--xs); color: var(--color-heading); }
.rel-card__sub { font-size: var(--at-text--s); }
.rel-card__arrow { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: var(--at-space--xs); color: var(--color-accent); font-family: var(--font-display); font-weight: 500; }
.rel-card__arrow:hover svg { transform: translateX(3px); }
.rel-card__arrow svg { transition: transform var(--at-duration--fast) ease; }

/* Ärzteseiten: Porträt im Intro hochkant statt 3:2 (Fotos sind nativ Hochformat) */
main.doctor .intro__media img { aspect-ratio: 3 / 4; }

/* --------------------------------------------------- Mitgliedschaften --- */
/* Monochrome Logo-Wall: einheitliche Karten, Logos entsättigt (Farbe bei Hover). */
/* GMN-84: festes 4er-Grid, alle Logos nebeneinander; die Sektion bricht auf den
   900px-Ärzteseiten als einziges Element auf 1200px aus. Mobil 2x2. */
.memberships__row { display: grid; grid-template-columns: repeat(var(--m-cols, 4), minmax(0, 280px)); justify-content: center; gap: var(--at-space--m); list-style: none; margin: 0 auto; padding: 0; max-width: 1200px; }
main.doctor .memberships .container { max-width: 1200px; }
@media (max-width: 700px) { .memberships__row { grid-template-columns: repeat(min(var(--m-cols, 2), 2), minmax(0, 280px)); } }
.membership {
  display: grid; place-items: center; grid-template: minmax(0, 1fr) / minmax(0, 1fr); /* Bild nie größer als die Karte (GMN-105) */
  width: auto; height: 7.25rem; padding: var(--at-space--m);
  background: var(--color-surface); border: 1px solid var(--at-primary-l-4); border-radius: var(--at-radius--m);
  box-shadow: var(--at-shadow--s);
}
/* Farbige Logos (GMN-68, Elisa 05.08.): keine Entsättigung mehr — die Originalfarben
   wirken dezent genug; leichte Aufhellung in Ruhe, volle Präsenz bei Hover. */
.membership img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--at-duration--fast) ease;
}
.membership:hover img { opacity: 1; }
/* Nur-weiß gelieferte Logovarianten: invertieren, damit sie auf hellem Grund sichtbar sind */
.membership--invert img, .membership--invert:hover img { filter: invert(1) grayscale(1); }
.membership__abbr { font-family: var(--font-display); font-weight: 500; font-size: var(--at-heading--s); color: var(--color-ink-muted); }
@media (max-width: 620px) { .membership { height: 6.5rem; padding: var(--at-space--s); } }

/* --------------------------------------------------- Quote with photo --- */
/* Photo left, gradient content panel, faint serif mark (design file .zitat-wrap) */
.quote-block--photo { display: grid; grid-template-columns: 13rem 1fr; gap: 0; align-items: stretch; text-align: left; max-width: 100%; border: 1px solid var(--at-black-t-6); border-radius: var(--at-radius--l); overflow: hidden; box-shadow: var(--at-shadow--l); padding: 0; }
.quote-block__photo { position: relative; }
.quote-block__photo img { width: 100%; height: 100%; min-height: 17rem; object-fit: cover; object-position: center top; }
.quote-block--photo .quote-block__content { position: relative; padding: var(--at-space--l) var(--at-space--xl); display: flex; flex-direction: column; justify-content: center; background: linear-gradient(135deg, var(--color-surface), var(--color-band)); }
.quote-block--photo .quote-block__mark { position: absolute; top: 0.5rem; left: 1.25rem; font-size: 5rem; opacity: 0.25; margin: 0; }
.quote-block--photo .quote-block__text { font-style: italic; position: relative; z-index: 1; }
@media (max-width: 767px) { .quote-block--photo { grid-template-columns: 1fr; } .quote-block__photo img { min-height: 14rem; } .quote-block--photo .quote-block__content { padding: var(--at-space--xl); } }

/* =============================================================================
   Treatment Single — width + the single-only section components (Facts, Ablauf,
   Treatment-Areas, Combinations, Related, photo Quote). These render ONLY on
   single pages. All SHARED elements (hero, section heads, FAQ, checklist, CTA,
   intro, tints) now use the global design language below, so every page is
   consistent — see "Unified design language". Colors here use theme tokens so
   they match the rest of the site.
   ============================================================================= */
main.tx-single .container { max-width: 1100px; }

/* FAKTEN — white card, 1fr/1.6fr rows, muted label / dark value */
main.tx-single .facts-table { background: var(--color-surface); border: 1px solid var(--at-black-t-6); border-radius: var(--at-radius--m); box-shadow: var(--at-shadow--s); }
main.tx-single .facts-table__row { grid-template-columns: 1fr 1.6fr; border-bottom: 1px solid var(--color-band); }
main.tx-single .facts-table__label { background: var(--color-canvas); color: var(--color-ink-muted); font-size: var(--at-text--xs); padding: 0.7rem 1.1rem; }
main.tx-single .facts-table__value { color: var(--color-heading); font-weight: 500; font-size: var(--at-text--xs); padding: 0.7rem 1.1rem; }

/* ABLAUF — 48px num column, taupe circle, connecting line, dash substeps */
main.tx-single .ablauf__inner--media { grid-template-columns: 1fr 1fr; gap: var(--at-space--xl); }
main.tx-single .ablauf__media img { border-radius: var(--at-radius--m); }
main.tx-single .step { grid-template-columns: 48px 1fr; gap: 0; padding-bottom: 0; }
main.tx-single .step:not(:last-child)::before { display: none; }
main.tx-single .step__num { width: 32px; height: 32px; background: var(--at-primary); font-size: var(--at-text--s); }
main.tx-single .step__body { padding: 3px 0 1.75rem 10px; position: relative; }
main.tx-single .step:not(:last-child) .step__body::before { content: ""; position: absolute; left: -22px; top: 38px; bottom: 6px; width: 1.5px; background: var(--at-primary-l-2); }
main.tx-single .step__name { font-size: var(--at-heading--xs); color: var(--color-heading); margin-bottom: 5px; }
main.tx-single .step__desc { color: var(--color-ink-muted); line-height: 1.85; }
main.tx-single .step__sub { padding-left: 14px; border-left: 2.5px solid var(--at-primary-l-3); margin-top: 10px; }
main.tx-single .step__sub li { font-size: var(--at-text--xs); color: var(--color-ink-muted); padding: 3px 0; }
main.tx-single .step__sub li::before { content: "– "; background: none; position: static; width: auto; height: auto; border-radius: 0; color: var(--color-accent); }

/* BEHANDLUNGSBEREICHE — filled taupe boxes, 72px thumb, white text, circular chev */
main.tx-single .areas-list { gap: 8px; }
main.tx-single .area-item__thumb { width: 72px; background: var(--at-primary); }
main.tx-single .area-item__thumb--img { width: 5rem; }
/* Mobil: 56px breit, Grundfall 56x56; bricht der Titel mehrzeilig um, füllt das
   Bild die volle Zeilenhöhe (weiterhin mittig gecroppt). */
@media (max-width: 620px) {
  .area-item__thumb--img, main.tx-single .area-item__thumb--img { width: 3.5rem; height: auto; min-height: 3.5rem; align-self: stretch; }
}
main.tx-single .area-item__summary { background: var(--at-primary-l-1); }
main.tx-single .area-item:hover .area-item__summary { background: var(--at-primary); }
main.tx-single .area-item[open] .area-item__summary { background: var(--at-primary-d-1); }
main.tx-single .area-item__name { font-size: var(--at-text--m); padding: .95rem 1.2rem; }
main.tx-single .area-item__chev { width: 28px; height: 28px; border-color: rgba(255,255,255,.5); }
main.tx-single .area-item__body { background: var(--color-band); padding: .75rem 1.2rem 1.3rem; }
main.tx-single .area-item__body p { color: var(--color-ink-muted); line-height: 1.85; }
main.tx-single .area-item__sub { border-left: 2px solid var(--at-primary-l-1); }
main.tx-single .area-sub-row strong { color: var(--color-heading); }
main.tx-single .area-sub-row p { color: var(--color-ink-muted); }

/* KOMBINATIONEN — 3-col, gradient image header, card */
main.tx-single .kombi-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--at-space--m); }
main.tx-single .kombi-card__img { height: 250px; }
main.tx-single .kombi-card__title { font-size: var(--at-heading--xs); }
main.tx-single .kombi-card__text { font-size: var(--at-text--xs); line-height: 1.65; }

/* PASSEND DAZU — 2-col, gradient image, card */
main.tx-single .related-grid { grid-template-columns: repeat(3, 1fr); gap: var(--at-space--m); }
@media (min-width: 621px) and (max-width: 820px) { main.tx-single .related-grid { grid-template-columns: repeat(2, 1fr); } }
main.tx-single .rel-card__media { aspect-ratio: auto; height: 250px; }
main.tx-single .rel-card__title { font-size: var(--at-heading--xs); }

/* ZITAT — photo + gradient content panel (single-only photo variant) */
main.tx-single .quote-block--photo { grid-template-columns: 0.6fr 1.4fr; }
main.tx-single .quote-block__photo img { min-height: 280px; }
@media (max-width: 620px) { main.tx-single .kombi-grid, main.tx-single .related-grid { grid-template-columns: 1fr; } }

@media (max-width: 620px) {
  main.tx-single .checklist__list, main.tx-single .kombi-grid, main.tx-single .related-grid { grid-template-columns: 1fr; }
  main.tx-single .quote-block--photo { grid-template-columns: 1fr; }
  main.tx-single .intro__media { float: none; width: 100%; margin: 0 0 1.5rem; }
  main.tx-single .ablauf__inner--media { grid-template-columns: 1fr; }
}

/* =============================================================================
   Design-review fixes (2026-06-22): footer contrast, container widths,
   no-orphan grids, heading rhythm.
   ============================================================================= */

/* Footer: address <p> was inheriting the dark base p color on the dark footer.
   Make all footer body text the same light tone as the links. */
.site-footer p { color: var(--at-neutral-l-3); }
.site-footer .muted { color: var(--at-neutral-l-4); }

/* Container widths — global wrapper is 1200px (home/about/contact/blog-archive).
   `narrow900` = 900px reading column for text-heavy pages (Impressum, Datenschutz,
   blog single, doctors, styleguide) — long line lengths hurt readability there. */
main.narrow900 .container { max-width: 900px; }
/* The four category hubs (`narrow900 hub`) keep every narrow-page behaviour but run
   at 1100px, matching the treatment singles. Doubled class so it wins on specificity
   (0,3,1) rather than source order. */
main.narrow900.hub .container { max-width: 1100px; }

/* No-orphan grids — column count from item count (set in the component markup).
   4 items => 2x2 (never 3+1); 3 items => 3-up; 2 => 2-up. Tablet 2-up, phone 1-up. */
.benefits__grid, .highlights__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.benefits__grid.g-cols-2, .highlights__grid.g-cols-2,
.benefits__grid.g-cols-4, .highlights__grid.g-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 991px) {
  .benefits__grid, .highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .benefits__grid, .highlights__grid,
  .benefits__grid.g-cols-2, .benefits__grid.g-cols-4,
  .highlights__grid.g-cols-2, .highlights__grid.g-cols-4 { grid-template-columns: 1fr; }
}

/* Focus areas (5 items): centered flex wrap so the last row is centered, not a
   left-aligned orphan. */
.focus-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--at-space--xl) var(--at-space--l); }
.focus-grid > .focus-card { flex: 1 1 300px; max-width: 360px; }
@media (max-width: 560px) { .focus-grid > .focus-card { flex-basis: 100%; max-width: none; } }

/* =============================================================================
   Unified design language (2026-06-22) — promotes the distinctive elements from
   the Botulinumtoxin reference to ALL pages so the site is consistent: the
   taupe FAQ accordion, the eyebrow "secbar" accent, and a tighter section
   heading. Shared components now look identical on singles, archives, home, etc.
   ============================================================================= */

/* Eyebrow accent rule ("secbar") under every section eyebrow (not the light
   hero eyebrow). Centered under the eyebrow text in any alignment. */
.eyebrow:not(.eyebrow--light)::after {
  content: ""; display: block; width: 32px; height: 1.5px;
  background: var(--at-primary-l-1); margin: 0.5rem auto 0;
}

/* Section heading: one consistent (smaller) size across the site. */
.section-head h2 { font-size: var(--at-heading--m); }

/* FAQ — taupe accordion everywhere (was white cards on archives/home). */
.faq-item { background: var(--color-band); border: none; border-radius: var(--at-radius--m); padding: 0 var(--at-space--l); box-shadow: var(--at-shadow--s); overflow: hidden; }
.faq-item__q { color: var(--color-heading); }
.faq-item[open] .faq-item__q { color: var(--color-accent-deep, var(--color-heading)); }
.faq-item__chev { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--at-primary-l-1); color: var(--color-accent); flex: 0 0 auto; }
.faq-item[open] .faq-item__chev { background: var(--at-primary); border-color: var(--at-primary); color: #fff; }
.faq-item__a { color: var(--color-ink-muted); }

/* Body paragraphs ~15px everywhere on desktop. The .lead emphasis paragraphs
   (intro, statement, blog, section leads) were 1.25x (~18.75px) and read too
   large; bring them to body size, keeping emphasis via muted color + line-height. */
.lead, .section-head__lead, .statement .lead, .prose .lead, .intro .lead {
  font-size: var(--at-text--s);
  line-height: 1.8;
}

/* Quote text — consistent 17px across all quote elements (was ~24px). */
.quote-block__text,
main.tx-single .quote-block--photo .quote-block__text { font-size: 17px; line-height: 1.7; }

/* ~15px for facts label/value, kombi card text, quote role (were ~12px). */
.facts-table__label, main.tx-single .facts-table__label,
.facts-table__value, main.tx-single .facts-table__value,
.kombi-card__text, main.tx-single .kombi-card__text,
.quote-block__role { font-size: var(--at-text--s); }

/* Legal-page review notice callout */
.notice { max-width: var(--at-blog-width, 46rem); margin: 0 auto var(--at-space--l); padding: var(--at-space--m) var(--at-space--l); background: var(--color-band); border-left: 3px solid var(--at-primary); border-radius: var(--at-radius--s); font-size: var(--at-text--s); color: var(--color-ink-muted); }

/* ------------------------------------------------ Individueller Mauszeiger --- */
/* GMN-57: brauner Punkt folgt dem Zeiger; über Links/Buttons größer + blurry
   (Referenz: Mouse-Follower-Effekt der alten WordPress-Seite). Das Element wird
   von assets/js/cursor.js nur auf (pointer: fine)-Geräten eingefügt. */
.wz-cursor {
  position: fixed; top: 0; left: 0; z-index: 99999;
  pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease;
}
.wz-cursor::before {
  content: ""; position: absolute; top: -24px; left: -24px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--at-secondary);
  transform: scale(0.2);
  transition: transform 0.25s ease-in-out, filter 0.25s ease-in-out, opacity 0.25s ease;
}
.wz-cursor.is-visible { opacity: 1; }
/* Hover dezenter (GMN-80, Elisa 05.08.): kleinerer "Schatten", geringere Deckkraft */
.wz-cursor.is-hover::before { transform: scale(0.5); filter: blur(8px); opacity: 0.18; }

/* ------------------------------------------- Termin-CTA als Parallax-Band --- */
/* GMN-87: CTA und Footer-Bild-Band verschmolzen — Bild + Hero-Overlay, Inhalt
   zentriert, max. 600px hoch; Parallax-Ebene wie in den Heros. */
.contact-cta--band { position: relative; overflow: hidden; min-height: clamp(360px, 72vh, 720px); display: grid; place-items: center; text-align: center; color: #fff; }
.contact-cta__media { position: absolute; inset: -45% 0; background-size: cover; background-position: center; will-change: transform; pointer-events: none; }
.contact-cta__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,32,26,.58) 0%, rgba(38,32,26,.48) 45%, rgba(38,32,26,.72) 100%); }
.contact-cta--band .container { position: relative; }
.contact-cta--band .contact-cta__body { margin-inline: auto; }
.contact-cta--band h2 { color: #fff; }
.contact-cta--band .lead { color: rgba(255,255,255,.92); }

/* --------------------------------------------- VKZ-Siegel im Seitenkopf --- */
/* GMN-88: kleines Siegel-Element rechts unten im Hero der Phlebologie-Seite;
   mobil übergreifend zwischen Hero-Bild und weißer Fläche. */
.page-header__wrap { position: relative; }
.page-header__badge {
  position: absolute; right: 2rem; bottom: 1.5rem; z-index: 2;
  height: 110px; width: auto;
  background: var(--color-surface); padding: 0.5rem;
  border: 1px solid var(--at-primary-l-4); border-radius: var(--at-radius--m);
  box-shadow: var(--at-shadow--m);
}
@media (max-width: 620px) {
  /* Mobil: horizontal zentriert, übergreifend; min. 40px Abstand zum CTA-Button
     über zusätzliches Bottom-Padding des Heros (Feedback Ufuk 08.08.) */
  .page-header__badge { right: auto; left: 50%; transform: translateX(-50%); bottom: -2.25rem; height: 88px; }
  .page-header__wrap .page-header { padding-bottom: calc(var(--at-space--2xl) + 48px); }
}

/* GMN-88: Zertifikatsbild auf der Phlebologie-Kachel — erscheint wie der
   Beschreibungstext erst beim Hover, unterhalb des Textes. */
.focus-card__badge {
  position: absolute; left: 50%; bottom: var(--at-space--l); transform: translateX(-50%);
  z-index: 2; height: 96px; width: auto; opacity: 0;
  background: var(--color-surface); padding: 0.4rem; border-radius: var(--at-radius--s);
  box-shadow: var(--at-shadow--s);
  transition: opacity var(--at-duration--medium) ease;
}
.focus-card:hover .focus-card__badge { opacity: 1; }

/* -------------------------------------- Intro-Variante "stacked" (GMN-89) --- */
/* Pilot Phlebologie: zentrierter Einleitungstext direkt nach dem Hero, darunter
   ein großes 16:10-Bild in Content-Breite. Aktivierung per intro.layout = "stacked". */
.intro--stacked .intro__inner { grid-template-columns: 1fr; text-align: center; gap: var(--at-space--xl); }
.intro--stacked .intro__media { order: 1; }
.intro--stacked .intro__media img { aspect-ratio: 16 / 10; }
.intro--stacked .intro__body { max-width: 56rem; margin-inline: auto; }
main.tx-single .intro--stacked .intro__media { margin: 0; }
.intro--stacked .intro .lead, .intro--stacked .lead { font-size: var(--at-text--m); }