/* =========================================================================
   08-template-leistung.css — Behandlungs-Detail (single-behandlungen.php)
   Struktur: Hero · Quick-Info-Leiste · Content (Intro-Callout) ·
             Ergebnis-Band · Related · Arzt-Profil-Band
   ========================================================================= */

.mat-leistung {
  background: var(--c-off-white);
}

/* Hero-Kategorie (Region-Eyebrow) immer in vollem Weiß statt durchscheinend. */
.mat-leistung .mat-hero__name .eyebrow {
  color: var(--c-white);
  margin-bottom: 0;
}

/* Abstand Eyebrow→Titel drastisch enger (Kundenfeedback 2026-07-15, analog
   zum Titel-Hero der Unterseiten): padding-top: 0 neutralisiert das
   24px-Padding der Impreza-Basisstile auf h1. */
.mat-leistung .mat-hero__name .mat-hero__doc {
  padding-top: 0;
  margin-top: var(--space-1);
}

/* M-Signatur oben rechts im Hero — wie auf den Spektrum-Seiten: nur rechts
   leicht angeschnitten (overflow:hidden der __stage), oben voll sichtbar
   (Kundenwunsch 07/2026). */
.mat-leistung .mat-hero__mark {
  position: absolute;
  top: var(--space-3);
  right: -12px;
  width: clamp(120px, 15vw, 205px);
  z-index: 4;
  display: block;
  opacity: 0.95;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.25));
}

.mat-leistung .mat-hero__mark img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 991px) {
  .mat-leistung .mat-hero__mark { display: none; }
}

/* =========================================================================
   ALT-CI-ELEMENTE ENTFERNEN
   Der alte WPBakery-Content enthält teils Komponenten im alten (blauen) CI:
   - "Auf einen Blick"-Box (.cus-sppbb): jetzt redundant, da die Eckdaten oben
     in der Kupfer-Quick-Info-Leiste stehen → ausblenden.
   - blaue Line-Art-Icon-Bilder (.cus-2colimg / .cus-spbbimg): Rastergrafiken,
     nicht sauber umfärbbar → entfernen (Fotos in .cus-kpimg bleiben unberührt).
   - dekoratives blaues Wasserzeichen-Icon der Listen-Boxen (.cus-liboxrow:before).
   ========================================================================= */
/* Fehlmarkup aus dem Alt-Content: <ul> mit nur EINEM <li> voller Absätze
   ist keine echte Aufzählung → Punkt + Einzug entfernen und als normalen
   Fließtext darstellen (Kundenfeedback 07/2026, z. B. Meno Makeover). */
.mat-leistung-content ul:has(> li:only-child) {
  list-style: none;
  padding-left: 0;
  margin-left: 0 !important;
}

.mat-leistung-content ul > li:only-child {
  list-style: none;
}

.mat-leistung-content .cus-sppbb { display: none !important; }

.mat-leistung-content .cus-2colimg,
.mat-leistung-content .cus-spbbimg { display: none !important; }

/* Leere Icon-Spalte des 2-Spalten-Layouts mit einklappen (moderne Browser). */
.mat-leistung-content .w-vwrapper:has( > .cus-2colimg ) { display: none !important; }

.mat-leistung-content .cus-liboxrow::before { display: none !important; }

/* =========================================================================
   QUICK-INFO — horizontale Leiste direkt unter dem Hero (Kupfer-Band)
   ========================================================================= */

.mat-quickbar {
  background: var(--c-accent);
  color: var(--c-white);
  padding-block: var(--space-5);
}

.mat-quickbar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6) var(--space-8);
}

/* Gleichmäßige Verteilung der 3 Spalten ab Tablet */
@media (min-width: 768px) {
  .mat-quickbar__inner {
    justify-content: space-between;
  }
}

/* Mobil untereinander, alle Icons auf einer linken Achse (Kundenfeedback
   2026-08-04) — zentrierte Items hatten je nach Textlänge unterschiedlich
   eingerückt gewirkt. Feste Icon-Spalte hält auch die Texte bündig. */
@media (max-width: 767px) {
  .mat-quickbar__inner {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-5);
  }

  .mat-quickbar__item {
    align-items: flex-start;
    width: 100%;
  }

  .mat-quickbar__icon {
    flex: 0 0 44px;
    width: 44px;
    justify-content: flex-start;
  }
}

.mat-quickbar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 1 auto;
}

.mat-quickbar__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.mat-quickbar__icon img {
  width: auto;
  height: 34px;
  /* SVG nutzt currentColor (schwarz) → auf Kupfer weiß einfärben */
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.mat-quickbar__label {
  font-weight: var(--fw-semibold);
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  margin-bottom: 2px;
}

.mat-quickbar__value {
  font-size: var(--t-meta);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.85);
}

/* =========================================================================
   BODY — einspaltiger Lesefluss
   ========================================================================= */

/* Zweispaltiges Body-Grid: Intro-Box links, FAQ-Content rechts. */
.mat-leistung-body__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 992px) {
  .mat-leistung-body__grid {
    /* Sidebar breiter (340 -> 420). Container wird um denselben Betrag
       verbreitert (1320 -> 1400), damit die Content-Spalte gleich breit bleibt. */
    grid-template-columns: 420px 1fr;
    gap: var(--space-10);
    max-width: 1400px;
  }
}

/* Ohne Intro-Block: einspaltig, lesbare Maximalbreite. */
.mat-leistung-body__grid--single {
  display: block;
  max-width: 820px;
}

/* ----- Intro-Box (links) ----- */
.mat-leistung-intro {
  background: var(--c-muted);
  color: var(--c-white);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

/* Linke Spalte: Intro-Box + „Was wir noch anbieten" untereinander.
   Bewusst NICHT sticky — läuft normal im Fluss mit (Kundenwunsch). */
.mat-leistung-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* „Was wir noch anbieten" in der Sidebar — Spektrum-Card-Stil, vertikal. */
.mat-leistung-related-side__title {
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  margin: var(--space-1) 0 var(--space-4);
  color: var(--c-dark);
}

.mat-leistung-related-side__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* Kompaktere (quadratische) Bildhöhe als im großen Grid, damit die 3 Karten
   in der schmalen Spalte nicht zu hoch werden — vertikales Label passt weiterhin. */
.mat-leistung-related-side .mat-feat-card__media {
  aspect-ratio: 1 / 1;
}

.mat-leistung-intro__text {
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
}

.mat-leistung-intro__text :last-child {
  margin-bottom: 0;
}

.mat-leistung-intro__text p {
  color: var(--c-white);
  margin-bottom: var(--space-3);
}

/* Intro-Text vereinheitlichen: normale Schrift, linksbündig — überschreibt
   Inline-Styles aus dem Content (z. B. font-weight:bold / text-align:center). */
.mat-leistung-intro__text,
.mat-leistung-intro__text p,
.mat-leistung-intro__text strong,
.mat-leistung-intro__text b {
  font-weight: var(--fw-regular) !important;
}

.mat-leistung-intro__text,
.mat-leistung-intro__text p {
  text-align: left !important;
}

/* Höhere Spezifität als a.btn (0,1,1), sonst bleibt es inline-flex und
   margin-inline:auto kann nicht zentrieren. */
.mat-leistung-intro .mat-leistung-intro__cta {
  margin-top: var(--space-5);
  /* zentriert, aber kompakt (nur so breit wie der Text) */
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

/* Schrift bleibt in allen Zuständen weiß; Hover nur über Fläche + Lift. */
.mat-leistung-intro__cta,
.mat-leistung-intro__cta:hover,
.mat-leistung-intro__cta:focus-visible {
  color: var(--c-white) !important;
}

.mat-leistung-intro__cta:hover,
.mat-leistung-intro__cta:focus-visible {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
  box-shadow: 0 6px 18px rgba(34, 39, 37, 0.22);
  transform: translateY(-1px);
}

/* Fließtext — Poppins Light, 16px, #222725.
   #content + !important schlägt die Altlasten .us_custom_*{color:#333!important}. */
#content .mat-leistung-content {
  color: var(--c-dark);
  font-size: 16px;
  line-height: 1.6;
  font-weight: var(--fw-light);
}

#content .mat-leistung-content p,
#content .mat-leistung-content li {
  font-weight: var(--fw-light) !important;
  color: var(--c-dark) !important;
}

#content .mat-leistung-content p {
  margin-bottom: var(--space-4);
}

/* Aktualisierungsdatum — klein/dezent, über der ersten H2 (SEO). */
#content .mat-leistung-content .mat-leistung-updated {
  font-size: var(--t-meta) !important;
  font-weight: var(--fw-regular) !important;
  color: var(--c-muted) !important;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin: 0 0 var(--space-4) !important;
}

.mat-leistung-updated time {
  font-weight: var(--fw-medium);
}

/* ----- Inhaltsverzeichnis (aufklappbar, natives <details>) ----- */
.mat-toc {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-white);
  margin: 0 0 var(--space-6);
  overflow: hidden;
}

.mat-toc__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--fw-regular);
  color: var(--c-dark);
  font-size: var(--t-body);
}

.mat-toc__summary::-webkit-details-marker { display: none; }

.mat-toc__summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-right: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease);
}

.mat-toc[open] .mat-toc__summary::after { transform: rotate(-135deg); }

.mat-toc__summary:hover { color: var(--c-accent); }

.mat-toc__list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-top: 1px solid var(--c-line);
}

.mat-toc__list li { margin: 0; }

.mat-toc__list a {
  display: block;
  padding: var(--space-1) 0;
  color: var(--c-dark-soft);
  text-decoration: none;
  font-size: var(--t-meta);
  line-height: 1.45;
}

.mat-toc__list a:hover {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Anker-Offset (Sticky-Header) + sanftes Scrollen für die TOC-Sprünge. */
html { scroll-behavior: smooth; }
#content .mat-leistung-content h2 { scroll-margin-top: 100px; }

/* H2-Fragen — Figma: Poppins SemiBold 48 / Zeilenhöhe 57 / #91837E.
   #content (id des <main>) gibt ID-Spezifität, um die Altlasten-Regeln aus dem
   Theme-Options-Custom-CSS (z. B. h2#h-bvkw{color:#333!important}) zu schlagen. */
#content .mat-leistung-content h2 {
  font-size: clamp(30px, 3.4vw + 6px, 48px) !important;
  line-height: 1.19 !important; /* 57 / 48 */
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0 !important;
  color: var(--c-muted) !important;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

#content .mat-leistung-content h3 {
  font-weight: var(--fw-semibold) !important;
  color: var(--c-muted) !important;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

#content .mat-leistung-content h2:first-child,
#content .mat-leistung-content h3:first-child {
  margin-top: 0;
}

.mat-leistung-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Video-Embed */
.mat-leistung-video {
  margin-top: var(--space-6);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-dark);
}

.mat-leistung-video iframe,
.mat-leistung-video video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* =========================================================================
   ERGEBNIS-BAND (dunkel) — nur sichtbar, wenn Meta 'ergebnis' gepflegt ist
   ========================================================================= */

.mat-result {
  background: var(--c-dark);
  color: var(--c-white);
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 768px) {
  .mat-result {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.mat-result__media {
  min-height: 220px;
  overflow: hidden;
}

.mat-result__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mat-result__box {
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}

.mat-result__text {
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  font-weight: var(--fw-light);
}

.mat-result__text p {
  margin: 0 0 var(--space-2);
}

.mat-result__text p:last-child {
  margin-bottom: 0;
}

/* =========================================================================
   RELATED — „Was wir noch anbieten"
   ========================================================================= */

.mat-leistung-related {
  background: var(--c-off-white);
}

.mat-leistung-related__head {
  text-align: center;
  margin-bottom: var(--space-6);
}

.mat-leistung-related__head h2 {
  margin-top: var(--space-1);
}

/* =========================================================================
   ARZT-PROFIL-BAND (Kupfer)
   ========================================================================= */

.mat-docband {
  position: relative;
  background: var(--c-accent);
  color: var(--c-white);
  padding-block: var(--space-12);
  /* Abstand zum darüberliegenden Related-Block (berücksichtigt das oben
     überlappende Foto, das ~185px nach oben ragt). */
  margin-top: var(--space-24);
  /* horizontal clippen (Watermark), aber vertikal Überlauf des Fotos zulassen */
  overflow-x: clip;
}

/* Auf Mobil ragt das Foto nicht heraus → kein Extra-Abstand nötig. */
@media (max-width: 767px) {
  .mat-docband {
    margin-top: var(--space-8);
  }
}

.mat-docband__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 768px) {
  .mat-docband__inner {
    grid-template-columns: 1.3fr 0.7fr;
  }
}

.mat-docband__name {
  /* !important, um eine evtl. dunkle globale Headline-Farbe zu überschreiben */
  color: var(--c-white) !important;
  margin: 0 0 var(--space-1);
}

.mat-docband__role {
  font-weight: var(--fw-medium);
  margin: 0 0 var(--space-4);
  color: var(--c-white);
}

.mat-docband__text {
  max-width: 52ch;
  margin: 0 0 var(--space-5);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.92);
}

/* Outline-Button (weißer Rahmen, weiße Schrift) wie im Design */
.mat-docband .btn {
  background: transparent;
  border-color: var(--c-white);
  color: var(--c-white);
}

.mat-docband .btn:hover,
.mat-docband .btn:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--c-white);
  color: var(--c-white);
  box-shadow: none;
}

.mat-docband__media {
  position: relative;
  z-index: 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 420px;
  margin-inline: auto;
}

/* Foto ragt oben aus dem Band heraus (überlappend in den Bereich darüber).
   align-self:start verankert das Foto am Zeilenanfang; der negative margin-top
   zieht es über die obere Band-Polsterung (--space-12 = 96px) hinaus nach oben. */
@media (min-width: 768px) {
  .mat-docband__media {
    align-self: start;
    margin-top: -185px;
  }
}

.mat-docband__media img:not(.mat-docband__mark) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Kreis-Script-Wasserzeichen klein, links unten IM Foto, weiß */
.mat-docband__mark {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  width: 90px;
  height: auto;
  opacity: 0.9;
  z-index: 2;
  pointer-events: none;
  /* reines Weiß erzwingen (Pattern-Grafik im SVG) */
  filter: brightness(0) invert(1);
}

/* =========================================================================
   MOBILE REIHENFOLGE — muss am Dateiende stehen
   ========================================================================= */

/* „Weitere Behandlungen" gehören ans SEITENENDE, nicht zwischen Intro-Box und
   Fließtext (Kundenfeedback 2026-08-04). Die Sidebar wird per display:contents
   aufgelöst, damit ihre beiden Blöcke eigenständig sortierbar sind.
   Achtung: .mat-leistung-side wird weiter oben auf display:flex gesetzt —
   dieser Block muss deshalb danach kommen. */
@media (max-width: 991px) {
  .mat-leistung-body__grid {
    display: flex;
    flex-direction: column;
  }

  .mat-leistung-side { display: contents; }

  .mat-leistung-intro        { order: 1; }
  .mat-leistung-content      { order: 2; }
  .mat-leistung-related-side { order: 3; }
}

/* Inhaltsverzeichnis: FAQ-Fragen (H3) eine Stufe eingerückt, damit die
   Gliederung sichtbar bleibt (Heading-Umbau 2026-08-04). */
.mat-toc__item--l3 { padding-left: var(--space-3); }
.mat-toc__item--l3 > a { font-size: var(--t-meta); opacity: 0.88; }