/* ==========================================================================
   Theraletik Steglitz — component styles
   Vanilla Lumos project: the foundation (tokens + utilities) loads first in
   css/lumos-foundation.css; this file holds component CSS only. No resets,
   :root, body/page_wrap, or u-* utility redefinitions live here.
   ========================================================================== */

/* ==========================================================================
   Header (banner) — floating glass pill nav, sits over the hero
   ========================================================================== */
.nav_wrap {
  position: absolute;
  top: var(--_spacing---space--4);
  left: 0;
  right: 0;
  z-index: 50;
}
.nav_contain.u-container {
  align-items: center;
}
.nav_bar {
  position: relative;
  width: 100%;
  max-width: 49.5rem;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--_spacing---space--2);
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 30%, transparent);
  border-radius: var(--radius--round);
  background-color: color-mix(in hsl, var(--_theme---glass) 35%, transparent);
  backdrop-filter: blur(1.5625rem);
}

/* Logo — pinned to the pill's left edge */
.nav_logo_wrap {
  position: absolute;
  left: var(--_spacing---space--4);
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--2);
  flex: none;
}
.nav_logo_svg {
  width: 2.55rem;
  aspect-ratio: 40.8513 / 29.4668;
  flex-shrink: 0;
  color: var(--_theme---text);
}
.nav_logo_path {
  fill: currentColor;
}
.nav_logo_text {
  font-size: 1.1rem;
  font-weight: var(--_typography---font--primary-semibold);
  letter-spacing: var(--_typography---letter-spacing--tight-2);
  color: var(--_theme---text);
  white-space: nowrap;
}

/* Collapsible group (menu + booking). On desktop it's transparent
   (display: contents) so the menu centers and the booking pins right exactly
   as flow/absolute children of the bar; on mobile it becomes a dropdown. */
.nav_collapse,
.nav_collapse_inner {
  display: contents;
}

/* Centered link menu */
.nav_menu_wrap {
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--1);
  /* State boundary: the menu-open state lives on .nav_wrap (.is-active) and
     would otherwise cascade into every link's active indicator. Reset the
     state channel here so links read only their OWN .is-active. */
  --_state---true: 1;
  --_state---false: 0;
}

/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav_toggle_wrap {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--_spacing---space--3);
  border-radius: var(--radius--round);
  background-color: color-mix(
    in hsl,
    var(--_theme---text) calc(12% + 8% * var(--_trigger---off)),
    transparent
  );
  transition: background-color 250ms;
}
.nav_toggle_svg {
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  color: var(--_theme---text);
}
.nav_toggle_path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.125rem;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav_link_wrap {
  display: flex;
  align-items: center;
  padding: var(--_spacing---space--2) var(--_spacing---space--4);
  border-radius: var(--radius--round);
}
/* Active link is read from --_state (flipped by .is-active on the link itself),
   never selected via .is-active in CSS. --_state---false = 1 when active. The
   --_state / --_trigger channels set on the <a> cascade into this text div. */
.nav_link_text {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-medium);
  white-space: nowrap;
  color: color-mix(
    in hsl,
    color-mix(
        in hsl,
        var(--_theme---text) calc(80% + 20% * var(--_trigger---off)),
        transparent
      )
      calc(100% * var(--_state---true)),
    var(--_theme---accent) calc(100% * var(--_state---false))
  );
  transition: color 250ms;
}

/* Right-pinned booking button */
.nav_actions {
  position: absolute;
  right: var(--_spacing---space--2);
}
.nav_button_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--_spacing---space--3) var(--_spacing---space--5);
  border-radius: var(--radius--round);
  background-color: color-mix(
    in hsl,
    var(--_theme---text) calc(12% + 8% * var(--_trigger---off)),
    transparent
  );
  transition: background-color 250ms;
}
.nav_button_text {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-medium);
  white-space: nowrap;
  color: var(--_theme---text);
}

/* Keep the bar above the megamenu's full-screen dimming overlay */
.nav_contain.u-container {
  position: relative;
  z-index: 3;
}

/* Leistungen megamenu trigger (a nav link with a chevron) */
.nav_megatrigger {
  gap: var(--_spacing---space--1);
}
.nav_megatrigger_chevron {
  width: 1rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  color: var(--_theme---text);
  transition: transform 250ms, color 250ms;
}
.nav_megatrigger_path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.09375rem;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Open state (.is-mega on .nav_wrap, toggled in JS) — Leistungen turns accent
   and the chevron flips. Multi-level nav uses class state, not the single
   --_state channel. */
.nav_wrap.is-mega .nav_megatrigger .nav_link_text {
  color: var(--_theme---accent);
}
.nav_wrap.is-mega .nav_megatrigger_chevron {
  color: var(--_theme---accent);
  transform: rotate(180deg);
}

/* Megamenu — hidden until open */
.nav_mega {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding-top: var(--_spacing---space--3);
  padding-inline: var(--site--margin);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.5rem);
  transition: opacity 250ms, visibility 250ms, transform 250ms;
}
.nav_wrap.is-mega .nav_mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/* Full-screen dim for any open menu/megamenu. pointer-events:none so leaving
   the panel onto the page fires the nav's mouseleave (closes on desktop) and a
   click falls through to the document handler (closes anywhere). */
.nav_overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background-color: color-mix(in hsl, var(--swatch--green-800) 45%, transparent);
  transition: opacity 250ms, visibility 250ms;
}
.nav_wrap.is-mega .nav_overlay,
.nav_wrap.is-active .nav_overlay {
  opacity: 1;
  visibility: visible;
}
.nav_mega_panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 81.5625rem;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--4);
  padding: var(--_spacing---space--4);
  border-radius: 1.5rem;
  background-color: var(--_theme---background);
  box-shadow: 0 0.25rem 1.5rem
    color-mix(in hsl, var(--swatch--dark-900) 32%, transparent);
}
.nav_mega_back {
  display: none;
}
.nav_mega_cols {
  display: flex;
  align-items: stretch;
  gap: var(--_spacing---space--2);
  width: 100%;
}
.nav_mega_col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--5);
  padding: 0.625rem;
  border-radius: 1.25rem;
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 20%, transparent);
  background-color: var(--swatch--green-50);
}
.nav_mega_head {
  width: 100%;
}
.nav_mega_title {
  font-size: 1.75rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1.2;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  color: var(--_theme---text);
  margin-bottom: var(--_spacing---space--3);
}
.nav_mega_desc {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-regular);
  line-height: 1.4;
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
}
.nav_mega_media {
  width: 100%;
  height: 14.375rem;
  overflow: clip;
  border-radius: 1rem;
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 20%, transparent);
  background-color: var(--_theme---background-2);
}
.nav_mega_list {
  list-style: disc;
  padding-left: 1.375rem;
}
.nav_mega_item {
  font-size: 1rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1.4;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  color: var(--_theme---text);
  margin-bottom: var(--_spacing---space--2);
}

/* ==========================================================================
   Hero — full-bleed image with bottom-anchored content + glass services card
   ========================================================================== */
.hero_wrap.u-section {
  position: relative;
  overflow: clip;
  min-height: 90vh;
  justify-content: flex-end;
  padding-top: var(--_spacing---section-space--page-top);
  padding-bottom: var(--_spacing---section-space--main);
}

/* Background layer: photo with the Figma decoration (progressive blur +
   darkening) baked into the image itself — see assets/hero-bg-decorated.png.
   Baking it avoids the hard seam a single CSS backdrop-filter would create. */
.hero_bg_wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
}
/* Image fills the wrap via the global img default (width/height 100%,
   object-fit cover); only the skeleton load colour is component-specific. */
.hero_bg_img {
  background-color: var(--_theme---background-2);
}

/* Content sits above the background */
.hero_contain.u-container {
  position: relative;
  z-index: 1;
}
.hero_layout {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--_spacing---space--6);
  width: 100%;
}
.hero_content {
  flex: 1 1 auto;
  max-width: 50rem;
}

/* Eyebrow badge */
.hero_badge_wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--_spacing---space--2);
  padding: var(--_spacing---space--2) var(--_spacing---space--4);
  border-radius: var(--radius--round);
  background-color: color-mix(in hsl, var(--_theme---glass) 30%, transparent);
  backdrop-filter: blur(0.625rem);
  margin-bottom: var(--_spacing---space--5);
}
.hero_badge_svg {
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  color: var(--_theme---text);
}
.hero_badge_path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--border-width--main);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero_badge_text {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-medium);
  color: var(--_theme---text);
  white-space: nowrap;
}

/* Display headline — three stacked lines, last one accent green */
.hero_title.u-text-style-display {
  display: flex;
  flex-direction: column;
  gap: 0.18em;
  font-weight: var(--_typography---font--primary-medium);
  font-size: clamp(
    2.5rem,
    calc(2.5rem + 4.0625 * ((100vw - 20rem) / 70)),
    6.5625rem
  );
  line-height: 0.9;
  letter-spacing: var(--_typography---letter-spacing--tight-2);
  margin-bottom: var(--_spacing---space--5);
}
.hero_title_line {
  display: block;
}
.hero_title_line.is-accent {
  color: var(--_theme---accent);
}

/* Supporting paragraph */
.hero_text.u-text-style-main {
  display: flex;
  font-weight: var(--_typography---font--primary-medium);
}

/* Services card — frosted green panel */
.hero_card_wrap {
  flex: none;
  width: 22rem;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--5);
  padding: var(--_spacing---space--5) var(--_spacing---space--4);
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 12%, transparent);
  border-radius: var(--radius--main);
  background-color: color-mix(in hsl, var(--_theme---glass) 55%, transparent);
  backdrop-filter: blur(0.9375rem);
  overflow: clip;
}
.hero_card_title {
  font-size: 1.25rem;
  font-weight: var(--_typography---font--primary-bold);
  color: var(--_theme---text);
}
.hero_card_list {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--3);
}
.hero_card_link_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_spacing---space--3);
}
.hero_card_link_text {
  font-size: 1rem;
  font-weight: var(--_typography---font--primary-medium);
  color: color-mix(
    in hsl,
    var(--_theme---text) calc(85% + 15% * var(--_trigger---off)),
    transparent
  );
  transition: color 200ms;
}
.hero_card_link_svg {
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  color: var(--_theme---accent);
  transform: translate(
    calc(0.15rem * var(--_trigger---off)),
    calc(-0.15rem * var(--_trigger---off))
  );
  transition: transform 200ms;
}
.hero_card_link_path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.125rem;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero_card_divider {
  height: var(--border-width--main);
  background-color: color-mix(in hsl, var(--_theme---text) 10%, transparent);
}
.hero_card_button_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: var(--_spacing---space--3) var(--_spacing---space--5);
  border-radius: var(--radius--round);
  border: var(--border-width--main) solid
    color-mix(
      in hsl,
      var(--_theme---text) calc(20% + 10% * var(--_trigger---off)),
      transparent
    );
  background-color: color-mix(
    in hsl,
    var(--_theme---text) calc(10% + 8% * var(--_trigger---off)),
    transparent
  );
  transition: background-color 200ms, border-color 200ms;
}
.hero_card_button_text {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-medium);
  white-space: nowrap;
  color: var(--_theme---text);
}

/* White rounded lip that previews the next (light) section */
.hero_base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 4rem;
  background-color: var(--swatch--light-50);
  border-top-left-radius: 2.5rem;
  border-top-right-radius: 2.5rem;
  box-shadow: 0 0.25rem 0.25rem
    color-mix(in hsl, var(--swatch--green-800) 25%, transparent);
}

/* ==========================================================================
   Stats — "Theraletik in Zahlen": centered intro + photo fan + figures
   ========================================================================== */
.stats_contain.u-container {
  align-items: center;
}

/* Centered intro */
.stats_header {
  width: 100%;
}
.stats_eyebrow {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-medium);
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
  margin-bottom: var(--_spacing---space--4);
}
.stats_title.u-text-style-h2 {
  display: flex;
  flex-direction: column;
  font-weight: var(--_typography---font--primary-medium);
  font-size: clamp(
    2rem,
    calc(2rem + 1.4375 * ((100vw - 20rem) / 70)),
    3.4375rem
  );
  line-height: 1.1;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  margin-bottom: var(--_spacing---space--4);
}
.stats_title_line {
  display: block;
}
.stats_title_line.is-accent {
  color: var(--_theme---accent);
}
.stats_text.u-text-style-main {
  display: flex;
  font-weight: var(--_typography---font--primary-medium);
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
}

/* Photo fan — scalable visual composition (em relative to 1cqw on _inner) */
.stats_visual_wrap {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 58.2rem;
  aspect-ratio: 931 / 500;
}
.stats_visual_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1cqw;
  position: absolute;
  inset: 0;
}
.stats_visual_card {
  position: absolute;
  overflow: clip;
  border-radius: 2.15em;
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--swatch--light-100) 25%, transparent);
  box-shadow: 0 1em 5em color-mix(in hsl, var(--swatch--dark-900) 30%, transparent);
  background-color: var(--_theme---background-2);
}
.stats_visual_card.is-center {
  width: 43em;
  aspect-ratio: 400 / 481;
  z-index: 3;
}
.stats_visual_card.is-left {
  width: 37em;
  aspect-ratio: 344 / 413;
  z-index: 1;
  transform: translateX(-29.9em) translateY(1.4em) rotate(-6deg);
}
.stats_visual_card.is-right {
  width: 37em;
  aspect-ratio: 344 / 413;
  z-index: 1;
  transform: translateX(28.9em) translateY(1.4em) rotate(6deg);
}
.stats_visual_img {
  border-radius: inherit;
}

/* Figures */
.stats_row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--_spacing---space--5);
  width: 100%;
}
.stats_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_spacing---space--3);
  width: 15rem;
  flex: none;
}
.stats_number {
  font-size: clamp(
    2rem,
    calc(2rem + 0.8125 * ((100vw - 20rem) / 70)),
    2.8125rem
  );
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  color: var(--_theme---accent);
  text-align: center;
}
.stats_label {
  font-size: 1rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1.4;
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
  text-align: center;
}
.stats_divider {
  width: var(--border-width--main);
  height: 3.34rem;
  background-color: var(--_theme---border);
  flex: none;
}

/* ==========================================================================
   Leistungen — expanding service cards (hover/click to open; first open)
   The open vs collapsed look is driven by --_state (.is-active on each card,
   toggled in JS). Desktop: horizontal accordion (width via flex-grow, fixed
   height, contents cross-fade). Mobile: vertical accordion (height collapse).
   ========================================================================== */
.leistungen_wrap.u-section {
  position: relative;
  overflow: clip;
  padding-top: clamp(7.5rem, calc(7.5rem + 5 * ((100vw - 20rem) / 70)), 12.5rem);
  padding-bottom: clamp(
    7.5rem,
    calc(7.5rem + 5 * ((100vw - 20rem) / 70)),
    12.5rem
  );
}

/* Light rounded caps that blend the dark panel into the light sections */
.leistungen_cap {
  position: absolute;
  left: 0;
  right: 0;
  height: 4rem;
  background-color: var(--swatch--light-50);
  z-index: 3;
}
.leistungen_cap_top {
  top: 0;
  border-bottom-left-radius: 2.5rem;
  border-bottom-right-radius: 2.5rem;
}
.leistungen_cap_bottom {
  bottom: 0;
  border-top-left-radius: 2.5rem;
  border-top-right-radius: 2.5rem;
}

/* Decorative lime glows */
.leistungen_glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
.leistungen_glow_a {
  width: 46rem;
  height: 33rem;
  left: -16rem;
  bottom: 3rem;
  background-image: radial-gradient(
    closest-side,
    color-mix(in hsl, var(--_theme---accent) 16%, transparent),
    transparent
  );
}
.leistungen_glow_b {
  width: 35rem;
  height: 40rem;
  right: -10rem;
  top: -12rem;
  background-image: radial-gradient(
    closest-side,
    color-mix(in hsl, var(--_theme---accent) 13%, transparent),
    transparent
  );
}

.leistungen_contain.u-container {
  position: relative;
  z-index: 1;
}

/* Header */
.leistungen_header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--_spacing---space--6);
  width: 100%;
}
.leistungen_intro {
  width: 100%;
  max-width: 43.5rem;
}
.leistungen_eyebrow {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-medium);
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
  margin-bottom: var(--_spacing---space--4);
}
.leistungen_title.u-text-style-h2 {
  display: flex;
  flex-direction: column;
  font-weight: var(--_typography---font--primary-medium);
  font-size: clamp(
    2rem,
    calc(2rem + 1.4375 * ((100vw - 20rem) / 70)),
    3.4375rem
  );
  line-height: 1.2;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  margin-bottom: var(--_spacing---space--4);
}
.leistungen_title_line {
  display: block;
}
.leistungen_title_line.is-accent {
  color: var(--_theme---accent);
}
.leistungen_text.u-text-style-main {
  display: flex;
  font-weight: var(--_typography---font--primary-medium);
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
}
.leistungen_actions {
  flex: none;
}
.leistungen_button_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--_spacing---space--3) var(--_spacing---space--5);
  border-radius: var(--radius--round);
  background-color: color-mix(
    in hsl,
    var(--_theme---button-primary--background) calc(100% * var(--_trigger---on)),
    var(--_theme---button-primary--background-hover)
      calc(100% * var(--_trigger---off))
  );
  transition: background-color 250ms;
}
.leistungen_button_text {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-medium);
  white-space: nowrap;
  color: color-mix(
    in hsl,
    var(--_theme---button-primary--text) calc(100% * var(--_trigger---on)),
    var(--_theme---button-primary--text-hover) calc(100% * var(--_trigger---off))
  );
}

/* Cards row */
.leistungen_cards {
  display: flex;
  align-items: stretch;
  gap: var(--_spacing---space--5);
  width: 100%;
}
.leistungen_card_wrap {
  position: relative;
  flex-grow: calc(1 + 1.4 * var(--_state---false));
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 0;
  height: 35.5rem;
  overflow: clip;
  border-style: solid;
  border-width: var(--border-width--main);
  border-radius: 1.25rem;
  background-color: color-mix(
    in hsl,
    color-mix(in hsl, var(--swatch--light-100) 5%, transparent)
      calc(100% * var(--_state---true)),
    var(--swatch--green-50) calc(100% * var(--_state---false))
  );
  border-color: color-mix(
    in hsl,
    color-mix(in hsl, var(--swatch--light-100) 20%, transparent)
      calc(100% * var(--_state---true)),
    color-mix(in hsl, var(--swatch--green-700) 20%, transparent)
      calc(100% * var(--_state---false))
  );
  transition: flex-grow 450ms, background-color 400ms, border-color 400ms;
}

/* Expanded content (visible when active) */
.leistungen_card_open {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.625rem;
  opacity: var(--_state---false);
  transition: opacity 350ms;
}
.leistungen_card_head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: var(--_spacing---space--5);
  padding: var(--_spacing---space--4);
  border-radius: 0.75rem;
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--swatch--green-700) 20%, transparent);
  background-color: var(--swatch--green-100);
}
.leistungen_card_num {
  flex: none;
  font-size: 1.75rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  color: var(--swatch--green-700);
}
.leistungen_card_copy {
  flex: 1 1 0;
  min-width: 0;
}
.leistungen_card_title {
  font-size: 1.75rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  color: var(--swatch--green-700);
  margin-bottom: var(--_spacing---space--2);
}
.leistungen_card_desc {
  font-size: 1rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1.4;
  color: color-mix(in hsl, var(--swatch--green-700) 60%, transparent);
}
.leistungen_card_media {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow: clip;
  border-radius: 0.75rem;
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--swatch--green-700) 20%, transparent);
  background-color: var(--_theme---background-2);
}
.leistungen_card_img {
  border-radius: inherit;
}

/* Collapsed content (visible when NOT active) */
.leistungen_card_closed {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_spacing---space--5);
  padding: var(--_spacing---space--5);
  opacity: var(--_state---true);
  transition: opacity 350ms;
}
.leistungen_card_label_wrap {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leistungen_card_label {
  transform: rotate(-90deg);
  white-space: nowrap;
  font-size: 1.75rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  color: var(--_theme---accent);
}
.leistungen_card_index {
  flex: none;
  font-size: 1.75rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  color: var(--_theme---accent);
}

/* ==========================================================================
   Warum Theraletik — 2×2 feature cards (image + number + title + copy)
   ========================================================================== */
.warum_contain.u-container {
  gap: var(--_spacing---space--8);
}

/* Header */
.warum_header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--_spacing---space--6);
  width: 100%;
}
.warum_intro {
  width: 100%;
  max-width: 35.3rem;
}
.warum_eyebrow {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-medium);
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
  margin-bottom: var(--_spacing---space--4);
}
.warum_title.u-text-style-h2 {
  display: flex;
  flex-direction: column;
  font-weight: var(--_typography---font--primary-medium);
  font-size: clamp(
    2rem,
    calc(2rem + 1.4375 * ((100vw - 20rem) / 70)),
    3.4375rem
  );
  line-height: 1.1;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
}
.warum_title_line {
  display: block;
}
.warum_title_line.is-accent {
  color: var(--_theme---accent);
}
.warum_lead {
  flex: none;
  width: 100%;
  max-width: 24.8rem;
}
.warum_lead_text {
  font-size: 1rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1.4;
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
}

/* Grid + cards */
.warum_grid.u-grid-above {
  --_column-count---value: 2;
  grid-column-gap: var(--_spacing---space--5);
  grid-row-gap: var(--_spacing---space--5);
}
.warum_card_wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 1.3125rem;
  padding: var(--_spacing---space--4);
  overflow: clip;
  border-radius: 1.25rem;
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 10%, transparent);
  background-color: var(--swatch--green-50);
}
.warum_card_scribble {
  position: absolute;
  top: -1rem;
  right: -3rem;
  z-index: 0;
  width: 19.4rem;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
.warum_card_media {
  position: relative;
  z-index: 1;
  flex: none;
  width: 15.6875rem;
  height: 20.9375rem;
  overflow: clip;
  border-radius: 1rem;
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 20%, transparent);
  background-color: var(--_theme---background-2);
}
.warum_card_img {
  border-radius: inherit;
}
.warum_card_body {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: var(--_spacing---space--5);
  padding-bottom: var(--_spacing---space--5);
}
.warum_card_num {
  font-size: 1.75rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  color: var(--_theme---text);
}
.warum_card_title {
  font-size: 1.5rem;
  font-weight: var(--_typography---font--primary-bold);
  line-height: 1;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  color: var(--_theme---text);
  margin-bottom: var(--_spacing---space--3);
}
.warum_card_desc {
  font-size: 1rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1.4;
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
}

/* ==========================================================================
   Praxis Einblicke — image carousel (Swiper)
   ========================================================================== */
.about_contain.u-container {
  gap: var(--_spacing---space--8);
}

/* Header */
.about_header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--_spacing---space--6);
  width: 100%;
}
.about_intro {
  width: 100%;
  max-width: 48rem;
}
.about_eyebrow {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-medium);
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
  margin-bottom: var(--_spacing---space--4);
}
.about_title.u-text-style-h2 {
  display: flex;
  flex-direction: column;
  font-weight: var(--_typography---font--primary-medium);
  font-size: clamp(
    2rem,
    calc(2rem + 1.4375 * ((100vw - 20rem) / 70)),
    3.4375rem
  );
  line-height: 1.1;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  margin-bottom: var(--_spacing---space--4);
}
.about_title_line {
  display: block;
}
.about_title_line.is-accent {
  color: var(--_theme---accent);
}
.about_lead {
  width: 100%;
  max-width: 30rem;
}
.about_lead_text {
  font-size: 1rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1.4;
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
}

/* Prev / next buttons */
.about_nav {
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--4);
  flex: none;
}
.about_nav_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--_spacing---space--3) var(--_spacing---space--5);
  border-radius: var(--radius--round);
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 10%, transparent);
  background-color: color-mix(
    in hsl,
    transparent calc(100% * var(--_trigger---on)),
    var(--swatch--green-50) calc(100% * var(--_trigger---off))
  );
  transition: background-color 250ms, opacity 250ms;
}
.about_nav_btn.is-next {
  background-color: color-mix(
    in hsl,
    var(--swatch--green-50) calc(100% * var(--_trigger---on)),
    var(--_theme---accent) calc(100% * var(--_trigger---off))
  );
}
.about_nav_btn.swiper-button-disabled {
  opacity: 0.35;
}
.about_nav_svg {
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  color: var(--_theme---text);
}
.about_nav_path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.125rem;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Slider */
.about_slider {
  width: 100%;
  overflow: clip;
}
/* Scope with .swiper-slide: Swiper's bundle CSS loads after this file and sets
   .swiper-slide { display: block }, so the combo (0,2,0) is needed to keep the
   slide a flex column — otherwise `gap` is ignored and media/caption touch. */
.about_slide.swiper-slide {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--5);
  height: auto;
}
.about_slide_media {
  width: 100%;
  aspect-ratio: 800 / 514;
  overflow: clip;
  border-radius: 1.5rem;
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 20%, transparent);
  background-color: var(--_theme---background-2);
}
.about_slide_img {
  border-radius: inherit;
}
.about_slide_caption {
  font-size: 1.375rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  color: var(--_theme---text);
}

/* ==========================================================================
   Patientenstimmen — testimonials carousel (slides bleed past the container;
   only the SECTION clips, the slider keeps overflow visible)
   ========================================================================== */
.testi_wrap.u-section {
  position: relative;
  overflow: clip;
  padding-bottom: clamp(
    7.5rem,
    calc(7.5rem + 5 * ((100vw - 20rem) / 70)),
    12.5rem
  );
}
.testi_cap_bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4rem;
  z-index: 2;
  background-color: var(--swatch--green-700);
  border-top-left-radius: 2.5rem;
  border-top-right-radius: 2.5rem;
}
.testi_contain.u-container {
  position: relative;
  z-index: 1;
  gap: var(--_spacing---space--8);
}

/* Header */
.testi_header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--_spacing---space--6);
  width: 100%;
}
.testi_intro {
  width: 100%;
  max-width: 35.3rem;
}
.testi_eyebrow {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-medium);
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
  margin-bottom: var(--_spacing---space--4);
}
.testi_title.u-text-style-h2 {
  display: flex;
  flex-direction: column;
  font-weight: var(--_typography---font--primary-medium);
  font-size: clamp(
    2rem,
    calc(2rem + 1.4375 * ((100vw - 20rem) / 70)),
    3.4375rem
  );
  line-height: 1.1;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
}
.testi_title_line {
  display: block;
}
.testi_title_line.is-accent {
  color: var(--_theme---accent);
}
.testi_lead {
  flex: none;
  width: 100%;
  max-width: 24.8rem;
}
.testi_lead_text {
  font-size: 1rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1.4;
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
}

/* Slider — relative box that holds the swiper + edge arrows */
.testi_slider_wrap {
  position: relative;
  width: 100%;
}
.testi_slider.swiper {
  overflow: visible;
  width: 100%;
}
/* Equal-height slides. The flex column MUST be scoped with .swiper-slide:
   Swiper's bundle CSS loads after this file and sets .swiper-slide{display:block},
   so a single-class .testi_card{display:flex} loses and the window↔text `gap`
   gets ignored. The combo (0,2,0) keeps the card a flex column. */
.testi_track.swiper-wrapper {
  align-items: stretch;
}
.testi_card.swiper-slide {
  width: 27.3125rem;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--6);
}

/* Card: a flex column so it GROWS with the testimonial text — the window stays
   fixed at the top and the text flows below it (never overlapping). */
.testi_card {
  position: relative;
  padding: 3.5rem 3.5rem 3rem;
  overflow: clip;
  border-radius: 1rem;
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 20%, transparent);
  background-color: var(--_theme---background-2);
}
/* The base (.testi_card_bg) and the focus copy (.testi_card_focus) are the SAME
   image at the SAME crop (both fill the card, object-fit cover, same
   object-position) → it reads as ONE photo. The whole base is BLURRED by a
   backdrop-filter overlay (.testi_card_bg_blur) — using backdrop-filter instead
   of filter:blur() avoids the transparent edge-fuzz. The focus copy is sharp
   and clip-path'd to exactly the window region, sitting ABOVE the blur, so the
   window shows the crisp version that lines up pixel-for-pixel behind it. */
.testi_card_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
}
.testi_card_bg_img {
  object-position: center 25%;
}
.testi_card_bg_blur {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(0.625rem);
  background-color: color-mix(in hsl, var(--swatch--dark-900) 40%, transparent);
}
.testi_card_focus {
  position: absolute;
  inset: 0;
  z-index: 1;
  object-position: center 25%;
  clip-path: inset(3.5rem 3.5rem calc(100% - 22.5rem) 3.5rem round 0.5rem);
}
.testi_card_scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 55%;
  background-image: linear-gradient(
    to bottom,
    transparent,
    color-mix(in hsl, var(--swatch--dark-900) 35%, transparent)
  );
}
/* The window is just the frame: a fixed-height block (matching the clip-path
   region) that draws the light border around the sharp focus. */
.testi_card_window {
  position: relative;
  z-index: 3;
  flex: none;
  width: 100%;
  height: 19rem;
  border-radius: 0.5rem;
  border: 0.09375rem solid
    color-mix(in hsl, var(--swatch--light-100) 45%, transparent);
}
.testi_card_body {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--5);
}
.testi_card_quote {
  font-size: 1.375rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1.2;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  color: var(--swatch--light-100);
}
.testi_card_person {
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--3);
}
.testi_card_name {
  font-size: 1rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1;
  color: var(--swatch--light-100);
  white-space: nowrap;
}
.testi_card_role {
  font-size: 0.75rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1.2;
  color: color-mix(in hsl, var(--swatch--light-100) 60%, transparent);
  white-space: nowrap;
}

/* Edge arrows — overflow the container, centred on the cards */
.testi_nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: var(--radius--round);
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--swatch--light-100) 10%, transparent);
  background-color: color-mix(
    in hsl,
    var(--swatch--green-700) calc(100% * var(--_trigger---on)),
    var(--swatch--green-800) calc(100% * var(--_trigger---off))
  );
  backdrop-filter: blur(0.9375rem);
  transition: background-color 250ms, opacity 250ms;
}
.testi_nav.is-prev {
  left: 0;
  transform: translate(-50%, -50%);
}
.testi_nav.is-next {
  right: 0;
  transform: translate(50%, -50%);
}
.testi_nav.swiper-button-disabled {
  opacity: 0.35;
}
.testi_nav_svg {
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  color: var(--swatch--light-100);
}
.testi_nav_path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.125rem;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   CTA + Footer
   ========================================================================== */
.footer_wrap.u-section {
  padding-top: var(--_spacing---section-space--small);
  padding-bottom: var(--_spacing---space--5);
}
.footer_contain.u-container {
  gap: var(--_spacing---space--8);
}

/* CTA card */
.cta_card {
  position: relative;
  width: 100%;
  min-height: 28.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: clip;
  padding: var(--_spacing---space--6);
  border-radius: 1.25rem;
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 20%, transparent);
}
.cta_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta_overlay {
  position: absolute;
  inset: 0;
  background-color: color-mix(in hsl, var(--swatch--dark-900) 35%, transparent);
}
.cta_fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70%;
  background-image: linear-gradient(
    to bottom,
    transparent,
    color-mix(in hsl, var(--swatch--dark-900) 35%, transparent)
  );
}
.cta_content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_spacing---space--6);
  width: 100%;
  max-width: 37rem;
}
.cta_copy {
  width: 100%;
}
.cta_title.u-text-style-h1 {
  display: flex;
  flex-direction: column;
  font-weight: var(--_typography---font--primary-medium);
  font-size: clamp(
    2rem,
    calc(2rem + 2.375 * ((100vw - 20rem) / 70)),
    4.375rem
  );
  line-height: 1;
  letter-spacing: var(--_typography---letter-spacing--tight-1);
  margin-bottom: var(--_spacing---space--3);
}
.cta_title_line {
  display: block;
}
.cta_title_line.is-accent {
  color: var(--_theme---accent);
}
.cta_text {
  width: 100%;
  max-width: 32.5rem;
  margin-inline: auto;
}
.cta_text_p {
  font-size: 1rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1.4;
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
}
.cta_button_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--_spacing---space--3) var(--_spacing---space--5);
  border-radius: var(--radius--round);
  background-color: color-mix(
    in hsl,
    var(--_theme---button-primary--background) calc(100% * var(--_trigger---on)),
    var(--_theme---button-primary--background-hover)
      calc(100% * var(--_trigger---off))
  );
  transition: background-color 250ms;
}
.cta_button_text {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-medium);
  white-space: nowrap;
  color: color-mix(
    in hsl,
    var(--_theme---button-primary--text) calc(100% * var(--_trigger---on)),
    var(--_theme---button-primary--text-hover) calc(100% * var(--_trigger---off))
  );
}

/* Footer */
.footer_divider {
  width: 100%;
  height: var(--border-width--main);
  background-color: color-mix(in hsl, var(--_theme---text) 12%, transparent);
}
.footer_main {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--_spacing---space--6);
  width: 100%;
}
.footer_brand {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--5);
  width: 18rem;
  flex: none;
}
.footer_logo_wrap {
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--2);
  flex: none;
}
.footer_logo_svg {
  width: 2.55rem;
  aspect-ratio: 40.8513 / 29.4668;
  flex-shrink: 0;
  object-fit: contain;
}
.footer_logo_text {
  font-size: 1.1rem;
  font-weight: var(--_typography---font--primary-semibold);
  letter-spacing: var(--_typography---letter-spacing--tight-2);
  color: var(--_theme---text);
  white-space: nowrap;
}
.footer_tagline {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-regular);
  line-height: 1.5;
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
}
.footer_cols {
  display: flex;
  align-items: flex-start;
  gap: var(--_spacing---space--7);
}
.footer_col {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--5);
}
.footer_col_title {
  font-size: 1rem;
  font-weight: var(--_typography---font--primary-medium);
  line-height: 1.5;
  color: var(--_theme---text);
  white-space: nowrap;
}
.footer_links,
.footer_col_body {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--3);
}
.footer_link {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-regular);
  line-height: 1.5;
  white-space: nowrap;
  color: color-mix(
    in hsl,
    var(--_theme---text) calc(60% + 40% * var(--_trigger---off)),
    transparent
  );
  transition: color 200ms;
}
.footer_address,
.footer_hours {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-regular);
  line-height: 1.5;
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
}
.footer_social {
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--4);
}
.footer_social_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--radius--round);
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 10%, transparent);
  background-color: color-mix(
    in hsl,
    var(--_theme---text) calc(10% + 8% * var(--_trigger---off)),
    transparent
  );
  backdrop-filter: blur(0.75rem);
  transition: background-color 250ms;
}
.footer_social_icon {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

/* Back to Top */
.footer_totop {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--4);
}
.footer_totop_text {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-regular);
  line-height: 1.5;
  white-space: nowrap;
  color: color-mix(
    in hsl,
    var(--_theme---text) calc(60% + 40% * var(--_trigger---off)),
    transparent
  );
  transition: color 200ms;
}
.footer_totop_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--radius--round);
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 10%, transparent);
  background-color: color-mix(
    in hsl,
    var(--_theme---text) calc(10% + 8% * var(--_trigger---off)),
    transparent
  );
  backdrop-filter: blur(0.625rem);
}
.footer_totop_svg {
  width: 0.875rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  color: var(--_theme---text);
}
.footer_totop_path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.125rem;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bottom bar */
.footer_bottom {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--5);
  width: 100%;
}
.footer_legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_spacing---space--4);
  width: 100%;
}
.footer_copy {
  font-size: 0.875rem;
  font-weight: var(--_typography---font--primary-regular);
  line-height: 1.5;
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
}
.footer_legal_links {
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--2);
}
.footer_legal_sep {
  color: color-mix(in hsl, var(--_theme---text) 40%, transparent);
}

/* ==========================================================================
   Responsive — threshold containers declared on page_wrap
   ========================================================================== */
@container threshold-large (width < 62em) {
  .hero_layout {
    flex-direction: column;
    align-items: stretch;
    gap: var(--_spacing---space--6);
  }
  .hero_content {
    max-width: none;
  }
  .hero_card_wrap {
    width: 100%;
  }

  /* Leistungen → vertical accordion (height collapse instead of width) */
  .leistungen_header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_spacing---space--5);
  }
  .leistungen_intro {
    max-width: none;
  }
  .leistungen_cards {
    flex-direction: column;
  }
  .leistungen_card_wrap {
    flex-grow: 0;
    flex-basis: auto;
    width: 100%;
    height: auto;
  }
  .leistungen_card_open {
    position: static;
    max-height: calc(var(--_state---false) * 60rem);
    overflow: clip;
    transition: max-height 450ms, opacity 350ms;
  }
  .leistungen_card_head {
    flex-direction: column;
    gap: var(--_spacing---space--3);
  }
  .leistungen_card_num,
  .leistungen_card_title {
    font-size: 1.25rem;
  }
  .leistungen_card_media {
    flex: none;
    height: 15.625rem;
  }
  .leistungen_card_closed {
    position: static;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: var(--_spacing---space--5);
    padding: var(--_spacing---space--4);
    max-height: calc(var(--_state---true) * 12rem);
    overflow: clip;
    transition: max-height 450ms, opacity 350ms;
  }
  .leistungen_card_label_wrap {
    flex: none;
  }
  .leistungen_card_label {
    transform: none;
  }
  .leistungen_cap {
    height: 3rem;
  }
  .leistungen_cap_top {
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
  }
  .leistungen_cap_bottom {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
  }
}

@container threshold-medium (width < 48em) {
  /* Bar becomes logo (left) + hamburger (right) */
  .nav_bar {
    justify-content: space-between;
  }
  .nav_logo_wrap {
    position: static;
  }
  .nav_toggle_wrap {
    display: flex;
  }

  .nav_toggle_wrap {
    position: relative;
    z-index: 2;
  }

  /* Level 1: menu drops into a LIGHT panel of rows below the bar, revealed by
     .is-active (--_state---false flips to 1). */
  .nav_collapse {
    display: block;
    position: absolute;
    top: calc(100% + var(--_spacing---space--2));
    left: 0;
    right: 0;
    z-index: 1;
    overflow: clip;
    max-height: calc(var(--_state---false) * 40rem);
    opacity: var(--_state---false);
    border-radius: 1.5rem;
    background-color: var(--swatch--light-50);
    transition: max-height 350ms, opacity 250ms;
  }
  .nav_collapse_inner {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .nav_menu_wrap {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }
  .nav_link_wrap {
    width: 100%;
    justify-content: space-between;
    padding: var(--_spacing---space--3) var(--_spacing---space--4);
    border-radius: 0;
    border-bottom: var(--border-width--main) solid
      color-mix(in hsl, var(--swatch--green-700) 10%, transparent);
  }
  .nav_link_text {
    color: color-mix(in hsl, var(--swatch--green-700) 80%, transparent);
  }
  .nav_actions {
    display: none;
  }
  /* Leistungen row → dark text + a right chevron (taps into level-2) */
  .nav_megatrigger .nav_link_text {
    color: var(--swatch--green-700);
  }
  .nav_megatrigger_chevron,
  .nav_wrap.is-mega .nav_megatrigger_chevron {
    color: var(--swatch--green-700);
    transform: rotate(-90deg);
  }

  /* Level 2 replaces level 1: hide the menu while the megamenu is open */
  .nav_wrap.is-mega .nav_collapse {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
  }
  /* Level 2: the megamenu becomes a full-width scrollable panel over the menu */
  .nav_mega {
    top: calc(100% + var(--_spacing---space--2));
    padding-top: 0;
    z-index: 2;
  }
  .nav_mega_panel {
    max-width: none;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    gap: var(--_spacing---space--3);
    padding: 0;
    box-shadow: none;
  }
  .nav_mega_back {
    display: flex;
    align-items: center;
    gap: var(--_spacing---space--2);
    width: 100%;
    padding: var(--_spacing---space--3) var(--_spacing---space--4);
  }
  .nav_mega_back_svg {
    width: 1rem;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    color: var(--swatch--green-700);
  }
  .nav_mega_back_path {
    fill: none;
    stroke: currentColor;
    stroke-width: 0.09375rem;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .nav_mega_back_text {
    font-size: 0.875rem;
    font-weight: var(--_typography---font--primary-regular);
    color: color-mix(in hsl, var(--swatch--green-700) 80%, transparent);
  }
  .nav_mega_cols {
    flex-direction: column;
    gap: var(--_spacing---space--3);
    padding: 0 var(--_spacing---space--4) var(--_spacing---space--4);
  }
  .nav_mega_title {
    font-size: 1.25rem;
  }
  .nav_mega_item {
    font-size: 0.875rem;
  }

  /* Smaller corner radius on the section lip (Figma mobile = 24px) */
  .hero_base {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
  }

  /* Warum: header stacks, cards become column (image on top) */
  .warum_header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_spacing---space--4);
  }
  .warum_lead {
    max-width: none;
  }
  .warum_card_wrap {
    flex-direction: column;
    gap: var(--_spacing---space--5);
  }
  .warum_card_media {
    width: 100%;
    height: 14.5625rem;
  }
  .warum_card_body {
    justify-content: flex-start;
    gap: var(--_spacing---space--4);
    padding-top: var(--_spacing---space--3);
    padding-bottom: var(--_spacing---space--3);
  }

  /* Praxis carousel: header stacks (arrows below), slides a touch squarer */
  .about_header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_spacing---space--5);
  }
  .about_intro,
  .about_lead {
    max-width: none;
  }
  .about_slide_media {
    aspect-ratio: 4 / 3;
  }

  /* Testimonials: header stacks, one card per view (taller card) */
  .testi_header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_spacing---space--5);
  }
  .testi_intro,
  .testi_lead {
    max-width: none;
  }
  .testi_card.swiper-slide {
    width: 100%;
  }
  .testi_card {
    padding: 1.75rem;
  }
  .testi_card_focus {
    clip-path: inset(1.75rem 1.75rem calc(100% - 18.75rem) 1.75rem round 0.5rem);
  }
  .testi_card_window {
    height: 17rem;
  }
  .testi_nav {
    width: 3rem;
    height: 3rem;
  }
  .testi_nav_svg {
    width: 1.2rem;
  }

  /* CTA + Footer stack */
  .cta_card {
    min-height: 20rem;
    padding: var(--_spacing---space--6) var(--_spacing---space--4);
  }
  .footer_main {
    flex-direction: column;
    gap: 5rem;
  }
  .footer_cols {
    flex-wrap: wrap;
    gap: var(--_spacing---space--7);
    width: 100%;
  }
  .footer_legal {
    flex-direction: column;
    align-items: center;
    gap: var(--_spacing---space--4);
  }

  /* Figures stack vertically with horizontal dividers */
  .stats_row {
    flex-direction: column;
    gap: var(--_spacing---space--4);
  }
  .stats_item {
    width: 100%;
  }
  .stats_divider {
    width: 100%;
    height: var(--border-width--main);
  }
}