/**
 * TRUE CARE – Behandlung Einzelseite
 * Shopify-Style PDP: sticky Sidebar (1/3) + scrollender Content (2/3)
 * Mobile First | BEM | nur variables.css Werte
 */

/* ═══════════════════════════════════════════════════
   WRAPPER & GRID
   ═══════════════════════════════════════════════════ */

.behandlung-single {
  background-color: var(--color-bg-light);
}

/* Mobile: Flex-Column – natürliche DOM-Reihenfolge: Content (Hero) zuerst, Sidebar darunter */
.behandlung-single__container {
  display: flex;
  flex-direction: column;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-lg) 0;
}

/* Desktop: 2/3 + 1/3 Grid.
   align-items: start ist KRITISCH damit position:sticky funktioniert.
   Kein overflow auf diesem Element. */
@media (min-width: 1024px) {
  .behandlung-single__container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
    padding-top: var(--spacing-4xl);
  }
}

/* Luft zwischen Container-Oberkante und Hero Bild (Problem 2) */
.behandlung-single__content {
  padding-top: var(--spacing-xl);
}

@media (min-width: 1024px) {
  .behandlung-single__content {
    padding-top: var(--spacing-2xl);
  }
}

/* ═══════════════════════════════════════════════════
   STICKY SIDEBAR
   .behandlung-single__sticky ist direktes Grid-Kind (kein Wrapper-Div).
   Mobile: natürliche DOM-Reihenfolge → Content (Hero) zuerst, Sidebar darunter
   Desktop: align-self: start KRITISCH → Grid-Zeile ist so hoch wie Content-Spalte,
            damit position:sticky Scroll-Raum hat. Kein overflow, keine feste Höhe.
   ═══════════════════════════════════════════════════ */

.behandlung-single__sticky {
  order: 0;
  margin-top: var(--spacing-xl);
  margin-bottom: 0;
  background-color: var(--color-bg-light);
  border: none;
  border-radius: var(--border-radius-md);
  box-shadow: none;
  padding: var(--spacing-xl);
}

@media (min-width: 1024px) {
  .behandlung-single__sticky {
    order: 0;
    margin-top: 0;
    margin-bottom: 0;
    align-self: start; /* KRITISCH: kein stretch */
    position: sticky;
    top: 150px; /* Fixer Header (~135px) + 15px Abstand */
    padding: var(--spacing-2xl);
  }
}

.behandlung-single__sidebar-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.behandlung-single__sidebar-titel {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}

@media (min-width: 1024px) {
  .behandlung-single__sidebar-titel {
    font-size: var(--font-size-3xl);
  }
}

.behandlung-single__sidebar-kurztext {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-md);
}

.behandlung-single__sidebar-divider {
  border: none;
  border-top: 1px solid var(--color-secondary);
  margin: var(--spacing-lg) 0;
}

.behandlung-single__sidebar-preis {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.behandlung-single__sidebar-ab {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.behandlung-single__sidebar-preis-wert {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-regular);
  color: var(--color-primary);
  line-height: 1;
}

.behandlung-single__sidebar-preisliste-link {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: var(--letter-spacing-wide);
  transition: color var(--transition-fast);
  margin-bottom: var(--spacing-xs);
}

.behandlung-single__sidebar-preisliste-link:hover {
  color: var(--color-primary-dark);
}

.behandlung-single__sidebar-cta {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--color-accent);
  color: var(--color-text-inverted);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--spacing-md) var(--spacing-lg);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.behandlung-single__sidebar-cta:hover {
  background-color: var(--color-accent-dark);
}

/* ═══════════════════════════════════════════════════
   HERO BILD
   ═══════════════════════════════════════════════════ */

.behandlung-single__hero {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-secondary);
  margin-bottom: var(--spacing-2xl);
}

@media (min-width: 768px) {
  .behandlung-single__hero {
    aspect-ratio: 16 / 9;
  }
}

.behandlung-single__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.behandlung-single__hero-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-secondary);
}

/* ═══════════════════════════════════════════════════
   INTRO (Label + Headline + Haupttext)
   ═══════════════════════════════════════════════════ */

.behandlung-single__intro {
  margin-bottom: var(--spacing-2xl);
}

.behandlung-single__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}

.behandlung-single__headline {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
  .behandlung-single__headline {
    font-size: var(--font-size-3xl);
  }
}

.behandlung-single__headline-kursiv {
  font-style: italic;
  display: block;
  color: var(--color-primary);
}

.behandlung-single__haupttext {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.behandlung-single__haupttext p {
  margin-bottom: var(--spacing-md);
}

.behandlung-single__haupttext p:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════
   INFO-KACHELN (3 Spalten mit Trennlinien)
   ═══════════════════════════════════════════════════ */

.behandlung-single__info-kacheln {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  margin-bottom: var(--spacing-2xl);
}

.behandlung-single__kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-md);
  border-right: 1px solid var(--color-secondary);
}

.behandlung-single__kachel:last-child {
  border-right: none;
}

.behandlung-single__kachel-icon {
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  display: block;
  line-height: 1;
}

.behandlung-single__kachel-icon svg {
  width: 22px;
  height: 22px;
}

.behandlung-single__kachel-wert {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-2xs);
}

@media (min-width: 768px) {
  .behandlung-single__kachel-wert {
    font-size: var(--font-size-xl);
  }
}

.behandlung-single__kachel-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════
   ABLAUF STEPPER – v1.3.5
   Vertikale Timeline mit EXAKTER Linie zwischen Kreismittelpunkten.
   Linie per li::before mit bottom: -26px (überbrückt gap zum nächsten Kreis).
   Horizontale Trennlinien per li::after.
   ═══════════════════════════════════════════════════ */

.behandlung-single__ablauf {
  padding: var(--spacing-3xl) 0;
  margin-bottom: var(--spacing-2xl);
}

.behandlung-single__ablauf-titel {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-3xl);
}

@media (min-width: 768px) {
  .behandlung-single__ablauf-titel {
    font-size: var(--font-size-3xl);
  }
}

.behandlung-single__ablauf-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.behandlung-single__ablauf-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* Spacing zwischen Steps (außer letztem) */
.behandlung-single__ablauf-item:not(:last-child) {
  padding-bottom: 64px;
}

/* Vertikale Verbindungslinie: startet EXAKT in Mitte dieses Kreises (top: 26px = 52px/2),
   endet EXAKT in Mitte des nächsten Kreises (bottom: -26px überbrückt den gap). */
.behandlung-single__ablauf-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 26px;
  transform: translateX(-50%);
  top: 26px;
  bottom: -26px;
  width: 1px;
  background: var(--color-secondary);
  z-index: 0;
}

/* Horizontale Trennlinie: beginnt NACH dem Kreis (52px + 24px gap), endet rechts */
.behandlung-single__ablauf-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(52px + 24px);
  right: 0;
  bottom: 32px; /* Mittig im 64px padding: 32px über + 32px unter der Linie */
  height: 1px;
  background: var(--color-secondary);
}

.behandlung-single__ablauf-nr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: var(--border-radius-full);
  background-color: var(--color-bg-light);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background-color 450ms ease-out, color 450ms ease-out, border-color 450ms ease-out;
}

/* Aktiver Schritt: Gold gefüllt, Zahl weiß und fett */
.behandlung-single__ablauf-item.ist-aktiv .behandlung-single__ablauf-nr {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  font-weight: var(--font-weight-bold);
}

/* padding-top zentriert erste Titelzeile (20px lg * 1.2 = 24px) auf Kreismitte:
   (52 - 24) / 2 = 14px */
.behandlung-single__ablauf-content {
  padding-top: 14px;
  flex: 1;
  min-width: 0;
}

.behandlung-single__ablauf-name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-tight);
}

@media (min-width: 768px) {
  .behandlung-single__ablauf-name {
    font-size: var(--font-size-xl);
  }
}

.behandlung-single__ablauf-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
  max-width: 480px;
}

/* Mobile (< 768px): 44px Kreise, sofort aktiv */
@media (max-width: 767px) {
  .behandlung-single__ablauf-item:not(:last-child) {
    padding-bottom: 48px;
  }

  .behandlung-single__ablauf-item:not(:last-child)::before {
    left: 22px; /* 44px / 2 */
    top: 22px;
    bottom: -22px;
  }

  .behandlung-single__ablauf-item:not(:last-child)::after {
    left: calc(44px + 24px);
    bottom: 24px; /* Mittig im 48px padding */
  }

  .behandlung-single__ablauf-nr {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: var(--font-size-xs);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    font-weight: var(--font-weight-bold);
    transition: none;
  }

  /* padding-top für 44px Kreis: (44 - 24) / 2 = 10px */
  .behandlung-single__ablauf-content {
    padding-top: 10px;
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .behandlung-single__ablauf-nr {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════
   BILDERGALERIE (3 quadratische Kacheln)
   ═══════════════════════════════════════════════════ */

.behandlung-single__galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: var(--spacing-2xl);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.behandlung-single__galerie-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-secondary);
}

.behandlung-single__galerie-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.behandlung-single__galerie-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-secondary);
}

/* ═══════════════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════════════ */

.behandlung-single__faq {
  margin-bottom: var(--spacing-2xl);
}

.behandlung-single__faq-titel {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xl);
}

.behandlung-single__faq-liste {
  display: flex;
  flex-direction: column;
}

.behandlung-single__faq-item {
  border-bottom: 1px solid var(--color-secondary);
}

.behandlung-single__faq-item:first-child {
  border-top: 1px solid var(--color-secondary);
}

.behandlung-single__faq-frage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast);
}

.behandlung-single__faq-frage:hover {
  color: var(--color-primary);
}

.behandlung-single__faq-icon {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-light);
  color: var(--color-primary);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
  line-height: 1;
}

/* accordion.js setzt .is-open auf das .js-faq-item */
.js-faq-item.is-open .behandlung-single__faq-icon {
  transform: rotate(45deg);
}

.behandlung-single__faq-antwort {
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  transition: max-height 300ms ease, padding 300ms ease;
}

.js-faq-item.is-open .behandlung-single__faq-antwort {
  max-height: 600px;
  padding: 0 0 var(--spacing-xl);
}

/* ═══════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════ */

.behandlung-single__testimonials {
  margin-bottom: var(--spacing-2xl);
}

.behandlung-single__testimonials-titel {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xl);
}

.behandlung-single__testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .behandlung-single__testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.behandlung-single__testimonial-card {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-xl);
}

.behandlung-single__testimonial-sterne {
  margin-bottom: var(--spacing-md);
}

.behandlung-single__stern {
  font-size: var(--font-size-md);
  color: var(--color-secondary);
}

.behandlung-single__stern--voll {
  color: var(--color-primary);
}

.behandlung-single__testimonial-text {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-style: italic;
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--spacing-md);
}

.behandlung-single__testimonial-name {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-style: normal;
  color: var(--color-text-secondary);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════
   ÄHNLICHE BEHANDLUNGEN (außerhalb Grid, volle Breite)
   ═══════════════════════════════════════════════════ */

.behandlung-single__related {
  background-color: var(--color-bg-white);
  padding: var(--spacing-4xl) 0;
  margin-top: var(--spacing-2xl);
}

.behandlung-single__related .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.behandlung-single__related-titel {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2xl);
}

.behandlung-single__related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .behandlung-single__related-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.behandlung-single__related-card {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background-color: var(--color-bg-light);
  transition: box-shadow var(--transition-normal);
}

.behandlung-single__related-card:hover {
  box-shadow: var(--shadow-md);
}

.behandlung-single__related-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.behandlung-single__related-img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.behandlung-single__related-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.behandlung-single__related-card:hover .behandlung-single__related-img {
  transform: scale(1.04);
}

.behandlung-single__related-img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-secondary);
}

.behandlung-single__related-body {
  padding: var(--spacing-md) var(--spacing-lg);
}

.behandlung-single__related-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2xs);
  line-height: var(--line-height-snug);
}

.behandlung-single__related-preis {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════
   STICKY ENDET BEI RELATED (via JS class .sticky-released)
   ═══════════════════════════════════════════════════ */

/* sticky-released wird jetzt via inline style in main.js gesetzt */

/* ═══════════════════════════════════════════════════
   WIRKT EFFEKTIV GEGEN (Indikationen-Sektion)
   Mobile First: 1 Spalte → 2 Spalten ab 768px
   ═══════════════════════════════════════════════════ */

.behandlung-single__wirkt-gegen {
  margin-bottom: var(--spacing-2xl);
}

.behandlung-single__wirkt-gegen-header {
  margin-bottom: var(--spacing-xl);
}

.behandlung-single__wirkt-gegen-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.behandlung-single__wirkt-gegen-headline {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin: 0;
}

@media (min-width: 768px) {
  .behandlung-single__wirkt-gegen-headline {
    font-size: var(--font-size-3xl);
  }
}

/* Grid: 1 Spalte Mobile, 2 Spalten ab 768px */
.behandlung-single__wirkt-gegen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .behandlung-single__wirkt-gegen-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Einzelne Kachel: weißer Hintergrund, dezenter Border, abgerundete Ecken */
.behandlung-single__wirkt-kachel {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
}

/* Rundes Icon-Badge: gold, dezenter Hintergrund */
.behandlung-single__wirkt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--border-radius-full);
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Fallback für Browser ohne color-mix */
@supports not (background-color: color-mix(in srgb, red 10%, transparent)) {
  .behandlung-single__wirkt-icon {
    background-color: rgba(183, 149, 111, 0.12);
  }
}

.behandlung-single__wirkt-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Text rechts, vertikal zentriert (durch align-items: center auf Kachel) */
.behandlung-single__wirkt-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-regular);
}