/* ============================================================
   LumaMed 89€ · Landingpage
   Hi-fi build · uses LumaMed brand tokens
   ============================================================ */

:root {
  /* brand tokens — mirror DS */
  --lm-creme:           #FFFAF4;
  --lm-dark-blue:       #062B51;
  --lm-clay:            #D37D62;

  --fg1: var(--lm-dark-blue);
  --fg2: rgba(6, 43, 81, 0.72);
  --fg3: rgba(6, 43, 81, 0.48);
  --fg4: rgba(6, 43, 81, 0.32);
  --hairline: var(--lm-dark-blue);
  --hairline-soft: rgba(6, 43, 81, 0.18);
  --hairline-hair: rgba(6, 43, 81, 0.10);

  --font-sans: "Arimo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

  --maxw: 1280px;
  --pad: 64px;

  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 32px;
  --sp-xl: 48px;
  --sp-xxl: 72px;
  --sp-section: 96px;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }
html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0;
}

/* page = continuous gradient field. The body has a stack of radial gradients
   positioned at percentages of total page height — because they overlap and
   share a creme falloff there are no abrupt seams between sections; the page
   reads as one slowly-changing warm surface. */
body {
  background:
    /* Hero · strong top-LEFT (flipped — keep right side clear so it reads as
       the same cream as the video's own background, with no visible frame). */
    radial-gradient(ellipse 65% 20% at 5% 6%,    rgba(250, 153, 111, 0.40), transparent 70%),
    /* Hero · gentle secondary warmth lower-left */
    radial-gradient(ellipse 50% 16% at 0% 15%,   rgba(255, 192, 142, 0.26), transparent 70%),
    /* Wer area · right — softened on mobile via a separate body[data-device="mobile"]
       override; on desktop this keeps a gentle warm anchor on the right. */
    radial-gradient(ellipse 50% 18% at 100% 28%, rgba(250, 153, 111, 0.22), transparent 70%),
    /* Steps · subtle left */
    radial-gradient(ellipse 50% 18% at 5%  40%,  rgba(255, 224, 175, 0.24), transparent 70%),
    /* Service · right warm */
    radial-gradient(ellipse 55% 20% at 95% 52%,  rgba(250, 153, 111, 0.26), transparent 70%),
    /* Deliverable · center subtle */
    radial-gradient(ellipse 45% 16% at 30% 64%,  rgba(255, 192, 142, 0.20), transparent 70%),
    /* USPs · left medium */
    radial-gradient(ellipse 55% 20% at 0%  76%,  rgba(250, 153, 111, 0.22), transparent 70%),
    /* FAQ · right subtle */
    radial-gradient(ellipse 50% 18% at 100% 90%, rgba(255, 192, 142, 0.20), transparent 70%),
    var(--lm-creme);
  position: relative;
  min-height: 100vh;
}

/* baseline typography — strict mirror of LumaMed DS hierarchy */
h1, h2, h3, h4 { margin: 0; color: var(--fg1); letter-spacing: 0; }
h1 { font-size: 74px; font-weight: 500; line-height: 1.2;  }
h2 { font-size: 56px; font-weight: 500; line-height: 1.15; }
h3 { font-size: 38px; font-weight: 400; line-height: 1.2;  }
h4 { font-size: 24px; font-weight: 500; line-height: 1.3;  }
p  { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.45; color: var(--fg1); letter-spacing: 0; }

a { color: var(--fg1); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--lm-dark-blue); color: var(--lm-creme); }

/* ============================================================
   TOOLBAR
   ============================================================ */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 250, 244, 0.86);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--hairline-soft);
  padding: 12px var(--pad);
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font-sans);
  flex-wrap: nowrap;
}
.toolbar .brand {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--fg1);
  white-space: nowrap;
}
.toolbar .brand small {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--fg3);
  margin-left: 16px;
  text-transform: uppercase;
}
.toolbar .spacer { flex: 1; }
.toolbar .right {
  display: flex;
  gap: 28px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg2);
  white-space: nowrap;
}
.toolbar .right a { text-decoration: none; }
.toolbar .right a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.toolbar .city {
  display: flex;
  align-items: center;
  gap: 8px;
}
.toolbar .city::before {
  content: "";
  width: 8px; height: 8px;
  border: 1px solid var(--fg1);
}

/* ============================================================
   PAGE CHASSIS — sections are full-bleed; content is centered
   ============================================================ */
.page-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  position: relative;
  z-index: 1;
}

section {
  padding: var(--sp-section) 0;
  position: relative;
  isolation: isolate;
}

/* per-section sun layer — disabled in this build; gradients live on body */
section[data-sun] .sun { display: none; }

.section-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg3);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.section-tag::before {
  content: "";
  width: 10px; height: 10px;
  border: 1px solid var(--fg1);
  display: inline-block;
}

/* CTA — ghost button per DS hover rules */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: var(--fg1);
  background: transparent;
  padding: 14px 22px;
  border: 1px solid var(--fg1);
  border-radius: 0;
  cursor: pointer;
  letter-spacing: 0;
  transition: background 160ms ease, color 160ms ease;
}
.cta::after {
  content: "\2192";
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 300;
}
.cta:hover { background: var(--fg1); color: var(--lm-creme); }

.cta-primary {
  background: var(--fg1);
  color: var(--lm-creme);
  border-color: var(--fg1);
}
.cta-primary:hover { opacity: 0.92; }

.cta-link {
  color: var(--fg1);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  font-weight: 500;
}
.cta-link:hover { text-decoration-thickness: 2px; }

.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg3);
}

/* ============================================================
   FRAME 1 — HERO variants via [data-hero]
   rich     — kicker + H1 + lead + 3 bullets + CTA + meta (default, current)
   clean    — kicker + H1 + lead + CTA + meta (drops bullets)
   minimal  — H1 + short lead + CTA (drops kicker, bullets, meta)
   ============================================================ */
/* ---- B · minimal — only drop the 3-bullet list, everything else like A,
       but enlarge the 89 € meta line by 50%. Headline and sub width unchanged. */
body[data-hero="minimal"] .hero-values { display: none; }
body[data-hero="minimal"] .hero-meta ,
.lumamed-landing[data-hero="minimal"] .hero-meta { font-size: 16px; }
body[data-hero="minimal"] .hero-price,
.lumamed-landing[data-hero="minimal"] .hero-price,
body[data-hero="minimal"] .hero-sep,
.lumamed-landing[data-hero="minimal"] .hero-sep,
body[data-hero="minimal"] .hero-price-note ,
.lumamed-landing[data-hero="minimal"] .hero-price-note { font-size: 16px; }
body[data-hero="minimal"] .hero-actions ,
.lumamed-landing[data-hero="minimal"] .hero-actions { margin-top: 40px; }

/* ---- legacy "clean" variant — hide bullets, slightly larger headline.
       Not currently exposed in the panel; kept for compatibility. */
body[data-hero="clean"]  .hero-values { display: none; }
body[data-hero="clean"]  .hero h1 ,
.lumamed-landing[data-hero="clean"]  .hero h1 { font-size: 56px; max-width: 14ch; }
body[data-hero="clean"]  .hero-actions ,
.lumamed-landing[data-hero="clean"]  .hero-actions { margin-top: 56px; }

/* ============================================================
   FRAME 1 — HERO (hi-fi)
   ============================================================ */
.hero {
  padding-top: 80px;
  padding-bottom: 120px;
  min-height: calc(100vh - 60px);
}
.hero > .page-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  min-height: inherit;
  height: calc(100vh - 60px - 200px);
  min-height: 620px;
}
.hero-text { max-width: 580px; }
.hero-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg2);
  margin-bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero-kicker::before {
  content: "";
  width: 14px; height: 14px;
  border: 1px solid var(--fg1);
  display: inline-block;
}
.hero h1 {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  max-width: 16ch;
}
.hero h1 em {
  font-style: normal;
}
.hero-sub {
  font-size: 19px;
  line-height: 1.5;
  color: var(--fg2);
  margin-top: 32px;
  max-width: 52ch;
}
.hero-values {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-values li {
  font-size: 16px;
  color: var(--fg1);
  display: flex;
  align-items: baseline;
  gap: 16px;
  line-height: 1.4;
}
.hero-values li::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid var(--fg1);
  flex-shrink: 0;
  position: relative;
  top: 4px;
}

/* ============================================================
   FRAME 1 · HERO BULLETS — three variants via body[data-hero-bullets]
   The default ('caps') is now the indexed mono treatment — the user
   chose it as the working baseline.
     caps      — ALL CAPS, mono, indexed 01/02/03, hairline dividers
     lines     — Larger sans, hairline dividers between, no marker
     clay-dots — Filled warm clay dot + sans, larger text (current rhythm,
                 just stronger color accent)
   ============================================================ */

/* ---- A · caps (default) ---- */
body[data-hero-bullets="caps"] .hero-values {
  margin-top: 32px;
  gap: 0;
  counter-reset: hv;
}
body[data-hero-bullets="caps"] .hero-values li ,
.lumamed-landing[data-hero-bullets="caps"] .hero-values li {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg1);
  padding: 16px 0;
  border-top: 1px solid var(--hairline-soft);
  gap: 20px;
  align-items: center;
  counter-increment: hv;
}
body[data-hero-bullets="caps"] .hero-values li:last-child ,
.lumamed-landing[data-hero-bullets="caps"] .hero-values li:last-child {
  border-bottom: 1px solid var(--hairline-soft);
}
body[data-hero-bullets="caps"] .hero-values li::before ,
.lumamed-landing[data-hero-bullets="caps"] .hero-values li::before {
  content: counter(hv, decimal-leading-zero);
  width: auto;
  height: auto;
  border: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--lm-clay);
  font-weight: 400;
  top: 0;
}

/* ---- B · lines ---- */
body[data-hero-bullets="lines"] .hero-values {
  margin-top: 32px;
  gap: 0;
}
body[data-hero-bullets="lines"] .hero-values li ,
.lumamed-landing[data-hero-bullets="lines"] .hero-values li {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg1);
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline-soft);
  gap: 0;
  line-height: 1.3;
}
body[data-hero-bullets="lines"] .hero-values li:first-child ,
.lumamed-landing[data-hero-bullets="lines"] .hero-values li:first-child {
  border-top: 1px solid var(--hairline-soft);
}
body[data-hero-bullets="lines"] .hero-values li::before ,
.lumamed-landing[data-hero-bullets="lines"] .hero-values li::before { display: none; }

/* ---- C · clay-dots ---- */
body[data-hero-bullets="clay-dots"] .hero-values {
  margin-top: 32px;
  gap: 16px;
}
body[data-hero-bullets="clay-dots"] .hero-values li ,
.lumamed-landing[data-hero-bullets="clay-dots"] .hero-values li {
  font-size: 17px;
  font-weight: 500;
  color: var(--fg1);
  align-items: center;
  gap: 18px;
  line-height: 1.4;
}
body[data-hero-bullets="clay-dots"] .hero-values li::before ,
.lumamed-landing[data-hero-bullets="clay-dots"] .hero-values li::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: var(--lm-clay);
  top: 0;
}
.hero-actions {
  display: grid;
  /* Desktop default layout:
       row 1 — meta (89 € · PKV-erstattungsfähig) standalone, above CTA
       row 2 — CTA on the left, Google reviews on the right
     Mobile overrides to flex-column further down. */
  grid-template-areas:
    "meta  meta"
    "cta   trust";
  grid-template-columns: auto 1fr;
  column-gap: 24px;
  row-gap: 28px;            /* more breathing room between meta and CTA */
  align-items: center;
  justify-items: start;
  margin-top: 28px;         /* closer to the hero text above */
}
.hero-actions > .cta        { grid-area: cta; align-self: baseline; }
.hero-actions > .hero-meta  { grid-area: meta; }
.hero-actions > .hero-trust {
  grid-area: trust;
  margin-top: 0;
  /* Align by BASELINE with the CTA so the stars + label sit on the exact
     same horizontal text line as "Jetzt Anmelden". The CTA button is a
     flex container that publishes its text's baseline to the grid row,
     so baseline-alignment here makes the trust line read as a literal
     continuation of the button text. */
  align-self: baseline;
  display: flex;
  align-items: baseline;
}
.hero-meta {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg1);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.hero-price,
.hero-sep,
.hero-price-note { font-family: inherit; font-size: inherit; letter-spacing: inherit; }

/* ---- C · price-pop: keep all elements, make the 89 € badge big ---- */
body[data-hero="price-pop"] .hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border: 1px solid var(--hairline-soft);
  border-radius: 2px;
  background: rgba(255, 250, 244, 0.65);
}
body[data-hero="price-pop"] .hero-price ,
.lumamed-landing[data-hero="price-pop"] .hero-price {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
}
body[data-hero="price-pop"] .hero-sep ,
.lumamed-landing[data-hero="price-pop"] .hero-sep {
  font-size: 13px;
  color: var(--fg3);
  letter-spacing: 0;
  opacity: 0.6;
}
body[data-hero="price-pop"] .hero-price-note ,
.lumamed-landing[data-hero="price-pop"] .hero-price-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg2);
}

/* Right side: hero animation. Two sources available:
   - WebM with native alpha channel (default) — rendered directly, sharpest.
   - MP4 piped through a WebGL chromakey shader (fallback) — dissolves cream bg.
   Body[data-anim-source] controls which one is shown. */
.hero-media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.hero-media .portrait {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
video.portrait-webm,
video.portrait-mp4-direct,
canvas.portrait-mp4 {
  display: none;
  background: transparent;
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 1 / 1;
}
video.portrait-webm     { image-rendering: auto; }
video.portrait-mp4-direct { image-rendering: auto; }
canvas.portrait-mp4     { image-rendering: -webkit-optimize-contrast; }
body[data-anim-source="webm"]       video.portrait-webm       ,
.lumamed-landing[data-anim-source="webm"]       video.portrait-webm       { display: block; }
body[data-anim-source="mp4"]        canvas.portrait-mp4        ,
.lumamed-landing[data-anim-source="mp4"]        canvas.portrait-mp4        { display: block; }
body[data-anim-source="mp4-direct"] video.portrait-mp4-direct  ,
.lumamed-landing[data-anim-source="mp4-direct"] video.portrait-mp4-direct  { display: block; }
/* default — if attribute unset, show WebM */
body:not([data-anim-source]) video.portrait-webm { display: block; }

/* small technical callout floating over portrait */
.callout {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg1);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.callout::before {
  content: "";
  width: 10px; height: 10px;
  border: 1px solid var(--fg1);
  flex-shrink: 0;
  background: var(--lm-creme);
}
.callout .v {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}
.callout .l {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg3);
}

/* ============================================================
   FRAME 2 — SILOS · 3 variants via body[data-silos]
   Title supports two modes via body[data-silos-title]:
     stacked  — line break between the two sentences (vertical headline)
     wide     — both sentences on one line (full width, no break)

   Layouts:
     split       — Header full · text 1/3 + image 2/3 · 3 pillars below
     wide        — Header full · text full width (centered) ·
                   image full width below · 3 pillars below
     image-first — Header full · image full width · text + 3 pillars below
   ============================================================ */
.silos-header { margin-bottom: 48px; }
.silos-header h2 { max-width: 22ch; }

/* Title break — visible only in stacked mode. */
.silos-title .title-break { display: none; }
body[data-silos-title="stacked"] .silos-title ,
.lumamed-landing[data-silos-title="stacked"] .silos-title { max-width: 22ch; }
body[data-silos-title="stacked"] .silos-title .title-break ,
.lumamed-landing[data-silos-title="stacked"] .silos-title .title-break { display: inline; }
body[data-silos-title="wide"]    .silos-title ,
.lumamed-landing[data-silos-title="wide"]    .silos-title { max-width: none; }

/* ---- Variant A · split (default) ---- */
.silos-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  align-items: start;
}
.silos .media-frame {
  aspect-ratio: auto;
  overflow: hidden;     /* crop the image we shift below */
}
.silos .media-frame img {
  height: auto;
  object-fit: unset;
  /* Crop the left 20% of the portrait (15% earlier + 5% now) so the
     subject sits further right and the visible image grows to fill the
     frame at 1.25× its original width. */
  width: 125%;
  margin-left: -25%;
  /* Bild hat hellbeigen Hintergrund — mit multiply gegen die Creme-Seite
     verschwindet er optisch, das Portrait sitzt frei auf der Seite. */
  mix-blend-mode: multiply;
}

/* ---- Variant B · wide — text & image stacked, full bleed ---- */
body[data-silos="wide"] .silos-grid {
  grid-template-columns: 1fr;
  gap: 40px;
}
body[data-silos="wide"] .silos-text  ,
.lumamed-landing[data-silos="wide"] .silos-text  { max-width: 72ch; margin: 0 auto; text-align: center; }
body[data-silos="wide"] .silos-text .silos-lead ,
.lumamed-landing[data-silos="wide"] .silos-text .silos-lead { max-width: 72ch; margin-left: auto; margin-right: auto; }

/* ---- Variant C · image-first ---- */
body[data-silos="image-first"] .silos-grid {
  grid-template-columns: 1fr;
  gap: 40px;
}
body[data-silos="image-first"] .silos-grid .media-frame ,
.lumamed-landing[data-silos="image-first"] .silos-grid .media-frame { order: -1; }
body[data-silos="image-first"] .silos-text  ,
.lumamed-landing[data-silos="image-first"] .silos-text  { max-width: 72ch; margin: 0 auto; }

/* ---- Variant D · problems-left ----
   Heading + lead full-width on top.
   Below: 3 problems stacked in left column (1fr), image in right column (2fr).
   Built by flattening silos-header / silos-grid / silos-text with
   display: contents, then assigning grid-area to the now-direct grandchildren.
   silos-problems keeps its own flex-column so the 3 problems stay stacked. */
body[data-silos="problems-left"] .silos > .page-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "tag      tag"
    "title    title"
    "lead     lead"
    "problems media";
  column-gap: 56px;
  row-gap: 0;
}
body[data-silos="problems-left"] .silos-header,
.lumamed-landing[data-silos="problems-left"] .silos-header,
body[data-silos="problems-left"] .silos-grid,
.lumamed-landing[data-silos="problems-left"] .silos-grid,
body[data-silos="problems-left"] .silos-text ,
.lumamed-landing[data-silos="problems-left"] .silos-text { display: contents; }

body[data-silos="problems-left"] .silos > .page-inner > .silos-header > .section-tag,

.lumamed-landing[data-silos="problems-left"] .silos > .page-inner > .silos-header > .section-tag,
body[data-silos="problems-left"] .silos .section-tag ,
.lumamed-landing[data-silos="problems-left"] .silos .section-tag { grid-area: tag; }
body[data-silos="problems-left"] .silos-title        ,
.lumamed-landing[data-silos="problems-left"] .silos-title        { grid-area: title; max-width: none; }
body[data-silos="problems-left"] .silos-lead         ,
.lumamed-landing[data-silos="problems-left"] .silos-lead         { grid-area: lead; max-width: none; margin: 0 0 48px; }
/* Portrait on the right column.
   Vertical bounds: top edge of the image lines up with the top of the
   first problem row (.silos-problems top), bottom edge with the bottom
   of the last problem text — i.e. the image fills the exact same
   vertical span as the problems column on the left.
   We stretch the media-frame to the row height, then constrain the image
   to height: 100% with width: auto so its native aspect is preserved
   (no distortion); the column's extra horizontal space hangs to the
   right of the image. */
body[data-silos="problems-left"] .silos .media-frame {
  grid-area: media;
  align-self: stretch;
  position: relative;          /* anchor for the absolutely-positioned img */
  overflow: hidden;
  min-height: 0;               /* don't let the img's intrinsic size grow the row */
  aspect-ratio: auto;
  border-radius: 2px;
}
body[data-silos="problems-left"] .silos .media-frame img ,
.lumamed-landing[data-silos="problems-left"] .silos .media-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
  object-fit: contain;
  /* Head top now sits at the top edge of the PNG (whitespace cropped),
     so left-top anchoring puts the man's head directly on the "01 ·
     Silo-Medizin" hairline. */
  object-position: left top;
  mix-blend-mode: normal;
}

/* Problems stacked vertically in the left column. */
body[data-silos="problems-left"] .silos-problems {
  grid-area: problems;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}
body[data-silos="problems-left"] .silos-problems .problem ,
.lumamed-landing[data-silos="problems-left"] .silos-problems .problem {
  padding: 4px 0 4px 20px;     /* keep the hairline visual */
}

/* ---- Pillars under text/image (all variants) ---- */
.silos-problems {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline-soft);
}
.silos h2 { margin-bottom: 24px; }
.silos-lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg2);
  margin-bottom: 40px;
  max-width: 56ch;
}
.problem {
  border-left: 1px solid var(--fg1);
  padding: 4px 0 4px 20px;
}
.problem-h {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.problem-b {
  font-size: 15px;
  color: var(--fg2);
  line-height: 1.5;
}
.media-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* ============================================================
   FRAME 3 — FÜR WEN
   Header full-width above. Grid below: image 2/3 LEFT, text 1/3 RIGHT.
   Mirrors Frame 2 split layout but with sides swapped for visual rhythm.
   ============================================================ */
.wer-header { margin-bottom: 48px; }
.wer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 56px;
  align-items: start;
}
.wer h2 em { font-style: normal; }
.wer p { font-size: 18px; line-height: 1.55; max-width: 54ch; margin-top: 18px; }
.wer p:first-of-type { margin-top: 0; }
.wer .media-frame {
  aspect-ratio: auto;
  overflow: visible;
}
.wer .media-frame img {
  height: auto;
  object-fit: unset;
  mix-blend-mode: multiply;   /* same treatment as Frame 2 — drop the studio bg */
}

/* ---- Frame 2 · Problems numbering variants ----
   Default ("plain"): just the headline + body — no number.
   "inline":  small mono "01 ·" prefix on the same line as the headline.
   "display": large display-serif numeral 01/02/03 above the headline. */
body[data-silos-problems="inline"] .problem-h::before {
  counter-increment: silosProb;
  content: counter(silosProb, decimal-leading-zero) " · ";
  font-family: var(--font-mono);
  font-size: 0.62em;
  letter-spacing: 0.08em;
  color: var(--fg2, var(--fg3));
  vertical-align: 0.18em;
  margin-right: 4px;
  font-weight: 400;
}
body[data-silos-problems="inline"] .silos-problems ,
.lumamed-landing[data-silos-problems="inline"] .silos-problems { counter-reset: silosProb; }

body[data-silos-problems="display"] .silos-problems ,

.lumamed-landing[data-silos-problems="display"] .silos-problems { counter-reset: silosProb; }
body[data-silos-problems="display"] .problem ,
.lumamed-landing[data-silos-problems="display"] .problem {
  position: relative;
  padding-top: 56px;
}
body[data-silos-problems="display"] .problem::before ,
.lumamed-landing[data-silos-problems="display"] .problem::before {
  counter-increment: silosProb;
  content: counter(silosProb, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display, var(--font-serif, serif));
  font-size: 56px;
  line-height: 1;
  font-weight: 400;
  color: var(--fg1);
  letter-spacing: -0.02em;
}
body[data-silos-problems="display"] .problem-h ,
.lumamed-landing[data-silos-problems="display"] .problem-h {
  border-top: 1px solid var(--hairline-soft);
  padding-top: 16px;
  margin-top: 8px;
}

/* ---- Frame 3 · Bullets (caps-style, copied from Frame 1 Layout A) ---- */
.wer-values { display: none; }   /* hidden unless data-wer="bullets" */

body[data-wer="bullets"] .wer-grid {
  grid-template-columns: 1fr 1fr;
}
body[data-wer="bullets"] .wer-values ,
.lumamed-landing[data-wer="bullets"] .wer-values {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  gap: 0;
  counter-reset: wv;
  max-width: 54ch;
}
body[data-wer="bullets"] .wer-values li ,
.lumamed-landing[data-wer="bullets"] .wer-values li {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg1);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  line-height: 1.4;
  counter-increment: wv;
}
/* Only ONE rule, above the first item. The dividers between items and the
   closing bottom rule were removed per request. */
body[data-wer="bullets"] .wer-values li:first-child ,
.lumamed-landing[data-wer="bullets"] .wer-values li:first-child {
  border-top: 1px solid var(--hairline-soft);
}
body[data-wer="bullets"] .wer-values li::before ,
.lumamed-landing[data-wer="bullets"] .wer-values li::before {
  content: counter(wv, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--lm-clay);
  width: auto;
  letter-spacing: 0.06em;
}

/* ============================================================
   FRAME 4 — 3 SCHRITTE (timeline default; cards via tweak)
   ============================================================ */
.steps h2 { margin-bottom: 64px; }

/* ============================================================
   FRAME 4 — TIMELINE
   Each .step is its own 2-col grid: [image 220px] [text].
   No display:contents — that flattened all steps into one grid
   and put all three images in row 1. The continuous vertical
   hairline is the step-body's left border; the last step kills
   its own padding-bottom so the line ends with the last step.
   Mobile collapses to [Zahl 28px] · [Text] — see the .device="mobile"
   block at the bottom of this file.
   ============================================================ */
body[data-process="timeline"] .steps-body {
  display: flex;
  flex-direction: column;
}
body[data-process="timeline"] .step ,
.lumamed-landing[data-process="timeline"] .step {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas: "media body";
  column-gap: 40px;
  align-items: start;
}
body[data-process="timeline"] .step-num     ,
.lumamed-landing[data-process="timeline"] .step-num     { display: none; }
body[data-process="timeline"] .step-media   ,
.lumamed-landing[data-process="timeline"] .step-media   { grid-area: media; }
body[data-process="timeline"] .step-body    ,
.lumamed-landing[data-process="timeline"] .step-body    { grid-area: body; }
body[data-process="timeline"] .step-body ,
.lumamed-landing[data-process="timeline"] .step-body {
  border-left: 1px solid var(--fg1);
  padding: 8px 0 56px 32px;
  position: relative;
}
body[data-process="timeline"] .step:last-child .step-body ,
.lumamed-landing[data-process="timeline"] .step:last-child .step-body { padding-bottom: 0; }
body[data-process="timeline"] .step-body::before ,
.lumamed-landing[data-process="timeline"] .step-body::before {
  content: "";
  position: absolute;
  left: -6px; top: 14px;
  width: 11px; height: 11px;
  background: var(--lm-creme);
  border: 1px solid var(--fg1);
}
body[data-process="timeline"] .step-meta ,
.lumamed-landing[data-process="timeline"] .step-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 8px;
}
body[data-process="timeline"] .step h3 ,
.lumamed-landing[data-process="timeline"] .step h3 { margin-bottom: 12px; }
body[data-process="timeline"] .step p ,
.lumamed-landing[data-process="timeline"] .step p { color: var(--fg2); font-size: 16px; max-width: 56ch; }
body[data-process="timeline"] .step-aside ,
.lumamed-landing[data-process="timeline"] .step-aside {
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg3);
  letter-spacing: 0.02em;
}

/* ---- step-media: 1:1 image in the third column (replaces step-aside) ----
   Three layout variants exposed via body[data-step-media]:
     · "tight" (default) — same width as the old aside (~220px)
     · "bleed"           — wider (~360px), more visual weight
     · "mono"            — image + small mono technical caption underneath
   All variants hide on mobile (the step-aside hide-on-mobile rule covers them). */
body[data-process="timeline"] .step-media {
  margin: 0;
  padding-top: 8px;
  display: block;
  width: 100%;
}
body[data-process="timeline"] .step-media img,
.lumamed-landing[data-process="timeline"] .step-media img,
body[data-process="timeline"] .step-media video ,
.lumamed-landing[data-process="timeline"] .step-media video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
  background: rgba(6, 43, 81, 0.04);
}

/* Step 1 image was background-stripped to PNG transparency; remove the
   subtle creme fill so it sits flush on the page gradient. */
body[data-process="timeline"] .step:first-of-type .step-media img {
  background: transparent;
}

/* ---- Step 1 · CSS card-stack ----
   Vector-rendered version of the "Befunde hochladen" illustration: 4
   slightly-tilted document cards with mono labels. Replaces the rasterised
   PNG so the text stays crisp at any size and the plus signs are dropped.

   The stack is a 1:1 square that matches the size of Steps 2 & 3 below it,
   with cards absolutely-positioned at 25% intervals so all four fit inside
   the square. Font sizes use cqi (container query inline-size) so the text
   scales with the card width — every title stays on a single line. */
.step-media--cards {
  position: relative;
  background: transparent;
}
.step1-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  container-type: inline-size;
  /* Promote to its own compositing layer so the rotated card text gets
     subpixel-AA via the GPU compositor rather than the (blurrier) CPU
     transform path. */
  isolation: isolate;
}
.step1-card {
  position: absolute;
  left: 50%;
  width: 72cqi;
  background: #FFFAF4;
  border: 1px solid rgba(6, 43, 81, 0.10);
  border-radius: 2px;
  padding: 3.4cqi 5cqi;
  display: flex;
  flex-direction: column;
  gap: 1.6cqi;
  transform: translate3d(-50%, 0, 0) translateX(var(--x, 0)) rotate(var(--rot, 0deg));
  transform-origin: center center;
  box-shadow: 0 1px 0 rgba(6, 43, 81, 0.06);
  /* Crisper text on transformed elements. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  backface-visibility: hidden;
}
/* Compressed top→bottom rhythm: cards cluster toward the centre and
   slightly overlap, which keeps every edge inside the 1:1 square even
   with the rotations. */
.step1-card:nth-child(1) { top: 7%;  }
.step1-card:nth-child(2) { top: 31%; }
.step1-card:nth-child(3) { top: 52%; }
.step1-card:nth-child(4) { top: 73%; }
.step1-meta {
  font-family: var(--font-mono);
  font-size: 3.4cqi;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--lm-clay, #D37D62);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.step1-title {
  font-family: var(--font-mono);
  font-size: 6.2cqi;
  font-weight: 400;
  color: var(--fg1, #062B51);
  line-height: 1.1;
  white-space: nowrap;
}

/* ---- Step 2 custom animation: clockwise border draw → tiles fall → colour
   cycle → tiles fade → tiles fly → clockwise border erase → empty pause → loop.
   Single 10s clock drives everything so the phases never desync.
   Phase timing (% of 10s cycle):
       0–14 %  border draws clockwise (top → right → bottom → left)
      14–24 %  tiles fall in (staggered by --i, 16 tiles)
      24–58 %  tiles take risk colour, hold, fade back
      58–70 %  tiles fly out (reverse drop, staggered)
      70–84 %  border erases clockwise (continuing from same origin)
      84–100% empty pause
*/
/* When the hero-meta is the clickable link variant — match the static
   span exactly (no underline, inherit color/weight) so only the cursor
   and the smooth-scroll change. */
.hero-meta--link,
.hero-meta--link:visited {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.hero-meta--link:hover .hero-price-note { text-decoration: underline; text-underline-offset: 3px; }

/* Frame 4 · Step 2 (Muster) — drop the hairline border that wraps the
   16-tile risk grid. Tiles themselves keep their colours. */
.step:nth-of-type(2) .anim-border { display: none; }

/* ============================================================
   Static risk-grid (was animated; user asked for a still image).
   Overrides the keyframe colour cycles further down with solid colour
   per risk class, removes the drop animation, and freezes the border
   stroke so the whole thing reads as a crisp, vector-rendered grid.
   ============================================================ */
.anim-tile,
.anim-tile[style*="risk-red"],
.anim-tile[style*="risk-orange"],
.anim-tile[style*="risk-green"],
.anim-tile[style*="risk-grey"] {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}
.anim-tile[style*="risk-red"]    { background: #C44A37; }
.anim-tile[style*="risk-orange"] { background: #E69A55; }
.anim-tile[style*="risk-green"]  { background: #6BA174; }
.anim-tile[style*="risk-grey"]   { background: rgba(6, 43, 81, 0.14); }
.anim-border rect,
.anim-border path {
  animation: none !important;
  stroke-dashoffset: 0 !important;
  stroke-dasharray: none !important;
}

.step-anim {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6%;
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 8%;
  background: transparent;
  border-radius: 2px;
  overflow: visible;
  position: relative;
}

/* SVG sits behind tiles, fills the .step-anim box. The rect's pathLength=100
   lets us use 0-100 in dasharray/dashoffset regardless of pixel size. */
.anim-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.anim-border rect,
.anim-border path {
  fill: none;
  stroke: var(--hairline-soft);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
  stroke-linecap: square;
  stroke-miterlimit: 4;
  /* Oversize the dash beyond the perimeter (400) so that at dashoffset 0 the
     stroke overruns the closing seam — guaranteed full coverage without any
     pixel-level Z-corner artefact. Erase phase continues to dashoffset -440. */
  stroke-dasharray: 440 440;
  stroke-dashoffset: 440;
  animation: anim-frame 10s linear infinite;
}
@keyframes anim-frame {
  0%        { stroke-dashoffset: 440; }
  /* Held closed for the entire tile-visible block (14% to 70%) */
  14%, 70%  { stroke-dashoffset: 0; }
  84%, 100% { stroke-dashoffset: -440; }
}

.anim-tile {
  /* Solid base background so every tile is ALWAYS visible — guards against
     the colour animation's per-tile delay leaving a tile transparent during
     the pre-delay window. */
  background: rgba(6, 43, 81, 0.14);
  border-radius: 1px;
  /* Two animations on the same element with INDEPENDENT delays:
     1. anim-drop: NO stagger — all 16 tiles fall in together and stay together.
     2. anim-color (per risk variant): staggered by --i, so the colour cycle
        rolls across the grid as a wave even though all tiles are present. */
  animation-name: anim-drop, anim-color;
  animation-duration: 10s, 10s;
  animation-timing-function: cubic-bezier(0.5, 0.05, 0.2, 1), ease-in-out;
  animation-delay: 0s, calc(var(--i) * 0.04s);
  animation-iteration-count: infinite, infinite;
}
@keyframes anim-drop {
  0%, 12%   { transform: translateY(-260%); opacity: 0; }
  22%       { transform: translateY(0);     opacity: 1; }
  60%       { transform: translateY(0);     opacity: 1; }
  72%, 100% { transform: translateY(-260%); opacity: 0; }
}
.anim-tile { --neutral: rgba(6, 43, 81, 0.14); }
.anim-tile[style*="risk-red"]    { animation-name: anim-drop, anim-red; }
.anim-tile[style*="risk-orange"] { animation-name: anim-drop, anim-orange; }
.anim-tile[style*="risk-green"]  { animation-name: anim-drop, anim-green; }
.anim-tile[style*="risk-grey"]   { animation-name: anim-drop, anim-grey; }

/* Colour-in windows sit inside the 22-60% tiles-visible block:
     22-28 % neutral (just dropped, no colour yet)
     28-46 % colour fades in
     46-58 % colour fades back to neutral */
@keyframes anim-red {
  0%,  26% { background: rgba(6, 43, 81, 0.14); }
  36%, 50% { background: #C44A37; }
  62%, 100% { background: rgba(6, 43, 81, 0.14); }
}
@keyframes anim-orange {
  0%,  28% { background: rgba(6, 43, 81, 0.14); }
  38%, 50% { background: #E69A55; }
  62%, 100% { background: rgba(6, 43, 81, 0.14); }
}
@keyframes anim-green {
  0%,  30% { background: rgba(6, 43, 81, 0.14); }
  40%, 50% { background: #6BA174; }
  62%, 100% { background: rgba(6, 43, 81, 0.14); }
}
@keyframes anim-grey {
  0%, 100% { background: rgba(6, 43, 81, 0.14); }
}

/* respect reduced-motion: hold tiles in their drop-in state, no cycle */
@media (prefers-reduced-motion: reduce) {
  .anim-tile { animation: none; background: rgba(6, 43, 81, 0.10); }
  .anim-border rect,
  .anim-border path { animation: none; stroke-dashoffset: 0; }
}

/* ---- Mobile-only bridge for Frame 4 ----
   The hero animation as a square visual between the heading and the steps,
   only shown in the mobile preview. Matches the page padding so it lines
   up with the other mobile-image-bridge sections. */
.steps-mobile-bridge { display: none; }
.steps-mobile-bridge video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--lm-creme);
  border-radius: 2px;
}
body[data-process="timeline"] .step-media figcaption ,
.lumamed-landing[data-process="timeline"] .step-media figcaption {
  display: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
body[data-process="timeline"] .step-media figcaption .sq ,
.lumamed-landing[data-process="timeline"] .step-media figcaption .sq {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid var(--fg1);
}

/* ---- THREE LAYOUT VARIANTS (data-step-media) ----
   A · "tight"  — Quadrat 220px (default, matches mockup)
   B · "bleed"  — größeres Quadrat 320px
   C · "mono"   — Quadrat 260px + kleine Mono-Caption darunter */

body[data-process="timeline"][data-step-media="bleed"] .step {
  grid-template-columns: 320px 1fr;
}
body[data-process="timeline"][data-step-media="mono"] .step ,
.lumamed-landing[data-process="timeline"][data-step-media="mono"] .step {
  grid-template-columns: 260px 1fr;
}
body[data-process="timeline"][data-step-media="mono"] .step-media figcaption ,
.lumamed-landing[data-process="timeline"][data-step-media="mono"] .step-media figcaption {
  display: inline-flex;
}

body[data-process="cards"] .steps-body ,

.lumamed-landing[data-process="cards"] .steps-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
body[data-process="cards"] .step ,
.lumamed-landing[data-process="cards"] .step {
  border-top: 1px solid var(--fg1);
  padding-top: 24px;
}
body[data-process="cards"] .step-num ,
.lumamed-landing[data-process="cards"] .step-num {
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: 56px;
  line-height: 0.9;
  margin-bottom: 16px;
  letter-spacing: 0;
}
body[data-process="cards"] .step-meta ,
.lumamed-landing[data-process="cards"] .step-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
  display: block;
  margin-bottom: 12px;
}
body[data-process="cards"] .step h3 ,
.lumamed-landing[data-process="cards"] .step h3 { margin-bottom: 12px; }
body[data-process="cards"] .step p ,
.lumamed-landing[data-process="cards"] .step p { color: var(--fg2); font-size: 16px; }
body[data-process="cards"] .step-aside ,
.lumamed-landing[data-process="cards"] .step-aside { display: none; }

/* ============================================================
   DROPDOWN LIST — shared across Frame 5, 6, 7
   ============================================================ */
.dd-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--fg1);
}
.dd {
  border-bottom: 1px solid var(--hairline-soft);
}
.dd[open] {
  border-bottom-color: var(--fg1);
}
.dd > summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 56px 28px 56px;
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 24px;
  align-items: baseline;
  transition: background 160ms ease;
}
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary:hover { background: rgba(6, 43, 81, 0.02); }
.dd-ix {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--fg3);
  font-weight: 400;
}
.dd-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  color: var(--fg1);
  line-height: 1.25;
  letter-spacing: 0;
}
.dd-toggle {
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: 28px;
  line-height: 1;
  color: var(--fg1);
  width: 24px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  transition: transform 220ms ease;
}
.dd[open] .dd-toggle { transform: rotate(45deg); }
.dd-body {
  padding: 0 56px 32px 144px;
  max-width: 78ch;
}
.dd-body p {
  font-size: 16px;
  color: var(--fg2);
  line-height: 1.6;
}
.dd-body p + p { margin-top: 12px; }

/* ============================================================
   FRAME 5 — SERVICE & PREIS (variants via data-service)
   default: stacked — lead + price row + dropdowns
   ============================================================ */
.service h2 { margin-bottom: 20px; }
.service-lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg2);
  margin-bottom: 40px;
}
.price-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--fg1);
  border-bottom: 1px solid var(--hairline-soft);
  margin-bottom: 64px;
  flex-wrap: wrap;
}
.price-row .v {
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: 72px;
  line-height: 0.9;
  color: var(--fg1);
  letter-spacing: 0;
}
.price-row .u {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 22px;
  color: var(--fg2);
  margin-left: -16px;
}
.price-row .n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-left: auto;
  max-width: 38ch;
  text-align: right;
  line-height: 1.6;
}

/* ---- Variant B: 50/50 split — dropdowns left, price card right ---- */
body[data-service="split"] .service-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}
body[data-service="split"] .service .price-row ,
.lumamed-landing[data-service="split"] .service .price-row { display: none; }
body[data-service="split"] .service-side ,
.lumamed-landing[data-service="split"] .service-side {
  position: sticky;
  top: 80px;
  padding: 40px 36px;
  border: 1px solid var(--fg1);
  background: rgba(255, 250, 244, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
body[data-service="split"] .service-side .price-tag ,
.lumamed-landing[data-service="split"] .service-side .price-tag {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-mono);
}
body[data-service="split"] .service-side .price-tag .v ,
.lumamed-landing[data-service="split"] .service-side .price-tag .v {
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: 120px;
  line-height: 0.9;
  letter-spacing: 0;
}
body[data-service="split"] .service-side .price-tag .u ,
.lumamed-landing[data-service="split"] .service-side .price-tag .u {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 32px;
  color: var(--fg2);
}
body[data-service="split"] .service-side hr ,
.lumamed-landing[data-service="split"] .service-side hr {
  border: 0;
  border-top: 1px solid var(--hairline-soft);
  margin: 4px 0;
  width: 100%;
}
body[data-service="split"] .service-side .meta ,
.lumamed-landing[data-service="split"] .service-side .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
  line-height: 1.7;
}
body[data-service="split"] .service-side .cta ,
.lumamed-landing[data-service="split"] .service-side .cta { align-self: flex-start; }

/* ---- Variant C: price-hero — huge centered numbers, dropdowns below ---- */
body[data-service="hero"] .service { text-align: left; }
body[data-service="hero"] .service .price-row ,
.lumamed-landing[data-service="hero"] .service .price-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 48px;
  padding: 56px 0;
  border-top: 1px solid var(--fg1);
  border-bottom: 1px solid var(--fg1);
  margin-bottom: 72px;
}
body[data-service="hero"] .service .price-row .v ,
.lumamed-landing[data-service="hero"] .service .price-row .v {
  font-size: 200px;
  line-height: 0.85;
  letter-spacing: 0;
}
body[data-service="hero"] .service .price-row .u ,
.lumamed-landing[data-service="hero"] .service .price-row .u {
  font-size: 48px;
  margin-left: -32px;
  align-self: end;
  padding-bottom: 18px;
}
body[data-service="hero"] .service .price-row .n ,
.lumamed-landing[data-service="hero"] .service .price-row .n {
  font-size: 13px;
  align-self: end;
  padding-bottom: 18px;
  max-width: 30ch;
}

/* ---- Variant D: rail — dropdowns full-width, narrow right rail w/ price + CTA */
body[data-service="rail"] .service-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
body[data-service="rail"] .service .price-row ,
.lumamed-landing[data-service="rail"] .service .price-row { display: none; }
body[data-service="rail"] .service-side ,
.lumamed-landing[data-service="rail"] .service-side {
  position: sticky;
  top: 80px;
  padding-top: 0;
}
body[data-service="rail"] .service-side .price-tag ,
.lumamed-landing[data-service="rail"] .service-side .price-tag {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--fg1);
  padding-top: 28px;
}
body[data-service="rail"] .service-side .price-tag .v ,
.lumamed-landing[data-service="rail"] .service-side .price-tag .v {
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: 88px;
  line-height: 0.9;
  letter-spacing: 0;
}
body[data-service="rail"] .service-side .price-tag .u ,
.lumamed-landing[data-service="rail"] .service-side .price-tag .u {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 24px;
  color: var(--fg2);
}
body[data-service="rail"] .service-side .meta ,
.lumamed-landing[data-service="rail"] .service-side .meta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg1);
  margin-top: 20px;
  line-height: 1.7;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hairline-soft);
}
body[data-service="rail"] .service-side .meta .meta-strong ,
.lumamed-landing[data-service="rail"] .service-side .meta .meta-strong {
  color: var(--fg1);
  font-weight: 500;
}
body[data-service="rail"] .service-side .cta ,
.lumamed-landing[data-service="rail"] .service-side .cta { margin-top: 24px; }

/* ---- Variant E: matrix — two-column dropdowns, price as caption ---- */
body[data-service="matrix"] .service .price-row { margin-bottom: 48px; }
body[data-service="matrix"] .service .dd-list ,
.lumamed-landing[data-service="matrix"] .service .dd-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--fg1);
  border-bottom: 1px solid var(--fg1);
}
body[data-service="matrix"] .service .dd ,
.lumamed-landing[data-service="matrix"] .service .dd {
  border-bottom: 1px solid var(--hairline-soft);
  border-right: 1px solid var(--hairline-soft);
}
body[data-service="matrix"] .service .dd:nth-child(2n) ,
.lumamed-landing[data-service="matrix"] .service .dd:nth-child(2n) { border-right: 0; }
body[data-service="matrix"] .service .dd > summary ,
.lumamed-landing[data-service="matrix"] .service .dd > summary {
  padding: 24px 32px;
  grid-template-columns: 40px 1fr auto;
  gap: 16px;
}
body[data-service="matrix"] .service .dd-title ,
.lumamed-landing[data-service="matrix"] .service .dd-title { font-size: 18px; }
body[data-service="matrix"] .service .dd-body ,
.lumamed-landing[data-service="matrix"] .service .dd-body { padding: 0 32px 24px 88px; }

/* default: hide all variant-specific containers */
.service-side { display: none; }
body[data-service="split"] .service-side,
.lumamed-landing[data-service="split"] .service-side,
body[data-service="rail"]  .service-side ,
.lumamed-landing[data-service="rail"]  .service-side { display: flex; flex-direction: column; }
body[data-service="rail"]  .service-side ,
.lumamed-landing[data-service="rail"]  .service-side { display: block; }

@media (max-width: 1024px) {
  body[data-service="split"] .service-body,
  .lumamed-landing[data-service="split"] .service-body,
  body[data-service="rail"]  .service-body ,
  .lumamed-landing[data-service="rail"]  .service-body { grid-template-columns: 1fr; gap: 32px; }
  body[data-service="split"] .service-side,
  .lumamed-landing[data-service="split"] .service-side,
  body[data-service="rail"]  .service-side ,
  .lumamed-landing[data-service="rail"]  .service-side { position: static; }
  body[data-service="hero"]  .service .price-row .v ,
  .lumamed-landing[data-service="hero"]  .service .price-row .v { font-size: 120px; }
  body[data-service="matrix"] .service .dd-list ,
  .lumamed-landing[data-service="matrix"] .service .dd-list { grid-template-columns: 1fr; }
  body[data-service="matrix"] .service .dd ,
  .lumamed-landing[data-service="matrix"] .service .dd { border-right: 0; }
}

/* ============================================================
   FRAME 5b — DELIVERABLE
   ============================================================ */
.deliverable-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
.deliverable-text h2 { margin-bottom: 20px; font-size: 40px; }
.deliverable-text p { color: var(--fg2); font-size: 18px; line-height: 1.55; }
.deliverable .media-frame { aspect-ratio: 4 / 3.5; }

/* ============================================================
   FRAME 6 — USPs (dropdown list + image rail)
   ============================================================ */
.usps h2 { margin-bottom: 40px; }
.usps-lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg2);
  max-width: 64ch;
  margin-bottom: 40px;
}
.usps-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.usps-side {
  position: sticky;
  top: 80px;
}
.usps-side .media-frame {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--hairline-soft);
  background: var(--lm-creme);
}
.usps-side .media-frame img {
  mix-blend-mode: multiply;
}

/* ============================================================
   CAROUSEL — Frame 6 right side
   4 images cross-fade; auto-advance every 3s; arrows + dots.
   Square crop (1:1) matches the source images.
   ============================================================ */
.carousel {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--hairline-soft);
  background: var(--lm-creme);
  overflow: hidden;
  user-select: none;
}
.carousel-track {
  position: absolute; inset: 0;
}
.carousel-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.carousel-slide[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 20px;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline-soft);
  background: rgba(255, 250, 244, 0.85);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  color: var(--fg1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 150ms ease, border-color 150ms ease;
  z-index: 2;
}
.carousel-arrow:hover {
  background: var(--fg1);
  border-color: var(--fg1);
  color: var(--lm-creme);
}
.carousel-prev,
.carousel-arrow-prev { left: 12px; }
.carousel-next,
.carousel-arrow-next { right: 12px; }
.carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--fg1);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 150ms ease;
}
.carousel-dot[data-active="true"],
.carousel-dot.is-active {
  background: var(--fg1);
}

/* ============================================================
   FRAME 6 · CAROUSEL — auto-advancing example screens
   - 4 slides cross-fade every 3s (configurable via data-interval).
   - Manual prev/next arrows pause auto-advance on user interaction.
   - Dot indicators below for direct selection + as progress.
   ============================================================ */
.carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 8;          /* portrait, fits the 9:16 mobile-mock screenshots */
  border: 1px solid var(--hairline-soft);
  background: var(--lm-creme);
  overflow: hidden;
}
.carousel-track {
  position: absolute;
  inset: 0;
}
.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.carousel-slide[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
  cursor: zoom-in;
}
.carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  background: var(--lm-creme);
}

/* ---- Lightbox: opens when the active slide is clicked ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6, 43, 81, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  cursor: zoom-out;
}
.lightbox[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  background: var(--lm-creme);
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 250, 244, 0.4);
  background: transparent;
  color: var(--lm-creme);
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease;
}
.lightbox-close:hover {
  background: rgba(255, 250, 244, 0.12);
}

/* Arrow buttons — sit on the frame edges, hairline outline, brand creme bg. */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--lm-creme);
  border: 1px solid var(--hairline-soft);
  color: var(--fg1);
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.carousel-arrow:hover {
  background: var(--fg1);
  color: var(--lm-creme);
  border-color: var(--fg1);
}
.carousel-arrow:focus-visible {
  outline: 2px solid var(--lm-clay);
  outline-offset: 2px;
}
.carousel-arrow-prev { left: 12px; }
.carousel-arrow-next { right: 12px; }

/* Dot indicators — sit centered along the bottom edge of the frame. */
.carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid var(--fg1);
  background: transparent;
  cursor: pointer;
  transition: background 160ms ease;
}
.carousel-dot[data-active="true"] {
  background: var(--fg1);
}
.carousel-dot:focus-visible {
  outline: 2px solid var(--lm-clay);
  outline-offset: 2px;
}

/* ============================================================
   FRAME 7 — FACHÄRZTE (doctor tiles)
   Three layout variants exposed via body[data-experts]:
     A · "row"   (default) — title + intro full-width, 6 tiles in one row
     B · "grid"            — title + intro full-width, 6 tiles in 3×2
     C · "split"           — title + intro 50% left, 6 tiles 3×2 50% right
   ============================================================ */
.experts h2 { margin-bottom: 32px; }
.experts-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 56px;
}
.experts-intro p {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg1);
}
.experts-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}

/* Variant B · 3×2 grid (still under the text block) */
body[data-experts="grid"] .experts-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 720px;
}

/* Variant C · split: title+text 50% left, 3×2 tiles 50% right */
body[data-experts="split"] .experts .page-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 64px;
  row-gap: 0;
}
body[data-experts="split"] .experts .section-tag ,
.lumamed-landing[data-experts="split"] .experts .section-tag { grid-column: 1 / -1; }
body[data-experts="split"] .experts h2 ,
.lumamed-landing[data-experts="split"] .experts h2 { grid-column: 1; margin-bottom: 24px; }
body[data-experts="split"] .experts-intro ,
.lumamed-landing[data-experts="split"] .experts-intro {
  grid-column: 1;
  margin-bottom: 0;
  align-self: start;
}
body[data-experts="split"] .experts-grid ,
.lumamed-landing[data-experts="split"] .experts-grid {
  grid-column: 2;
  grid-row: 2 / span 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-self: start;
}
body[data-experts="split"] .experts-cta ,
.lumamed-landing[data-experts="split"] .experts-cta {
  grid-column: 1 / -1;
  margin-top: 56px;
}
.expert-tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.expert-tile .expert-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(6, 43, 81, 0.04);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.expert-tile .expert-photo image-slot {
  display: block;
  width: 100%;
  height: 100%;
}
.expert-tile .expert-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.expert-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg1);
}
.expert-role {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.10em;
  line-height: 1.4;
  color: var(--fg1);
  text-transform: uppercase;
  margin-top: 2px;
}
.experts-cta {
  margin-top: 48px;
}

/* ============================================================
   FRAME 8 — FAQ (dropdown)
   ============================================================ */
.faq h2 { margin-bottom: 40px; }

/* ============================================================
   FRAME 8 — Erfahrungsberichte (dropdown — same .dd pattern as FAQ)
   ============================================================ */
.stories h2 { margin-bottom: 16px; }
.stories .stories-lead {
  max-width: 720px;
  margin: 0 0 40px 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg2);
}
/* Category prefix inside the dropdown title — small mono tag */
.stories .dd-cat {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lm-clay, #D37D62);
  margin-right: 4px;
}
.stories .dd-body p + p { margin-top: 14px; }
.stories .dd-body strong { font-weight: 600; color: var(--fg1); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  padding: 64px 0 96px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--hairline-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg3);
  flex-wrap: wrap;
  gap: 32px;
}
.foot img { height: 28px; }
.foot .foot-right {
  text-align: right;
  line-height: 1.6;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  :root { --pad: 32px; }
  h1 { font-size: 54px !important; }
  h2 { font-size: 36px !important; }
  .hero { min-height: auto; padding-top: 48px; }
  .hero > .page-inner { grid-template-columns: 1fr; height: auto; }
  .hero h1 { font-size: 48px; }
  .hero-media { min-height: 480px; }
  .silos-grid, .wer-grid, .deliverable-grid { grid-template-columns: 1fr; gap: 48px; }
  body[data-silos="problems-left"] .silos > .page-inner ,
  .lumamed-landing[data-silos="problems-left"] .silos > .page-inner { display: block; }
  /* Keep the side-by-side problems/portrait layout intact when the user
     has explicitly toggled the design into desktop mode — the preview
     iframe is often ≤1024px wide, and collapsing then makes the
     alignment work look broken to the user. */
  body[data-device="desktop"][data-silos="problems-left"] .silos > .page-inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
  body[data-silos="problems-left"] .silos-lead ,
  .lumamed-landing[data-silos="problems-left"] .silos-lead { margin-bottom: 32px; }
  .experts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: none; }
  .experts h2 { max-width: none; }
  /* Split layout collapses to single column at this breakpoint */
  body[data-experts="split"] .experts .page-inner { display: block; }
  body[data-experts="split"] .experts-cta ,
  .lumamed-landing[data-experts="split"] .experts-cta { margin-top: 48px; }
  /* Tablet/narrow: revert to classic num+body, no images.
     .step keeps display:grid, just swap the columns and the slot. */
  body[data-process="timeline"] .step {
    grid-template-columns: 40px 1fr;
    grid-template-areas: "num body";
    column-gap: 16px;
  }
  body[data-process="timeline"] .step-num     ,
  .lumamed-landing[data-process="timeline"] .step-num     { display: block; grid-area: num;
    font-family: var(--font-mono); font-weight: 200; font-size: 28px;
    line-height: 1; text-align: right; padding-top: 6px; color: var(--fg1); }
  body[data-process="timeline"] .step-aside   ,
  .lumamed-landing[data-process="timeline"] .step-aside   { display: none; }
  body[data-process="timeline"] .step-media   ,
  .lumamed-landing[data-process="timeline"] .step-media   { display: none; }
  body[data-process="cards"] .steps-body ,
  .lumamed-landing[data-process="cards"] .steps-body { grid-template-columns: 1fr; }
  .dd > summary { grid-template-columns: 48px 1fr auto; padding: 22px 32px 22px 32px; gap: 16px; }
  .dd-title { font-size: 18px; }
  .dd-body { padding: 0 32px 24px 96px; }
  .price-row .n { text-align: left; margin-left: 0; }
}


/* ============================================================
   DEVICE FRAME — mobile preview = 412px iPhone-width column
   The body keeps its light creme + gradient atmosphere; the content
   column is centered at 412px so the preview reads like a real phone
   layout dropped into a wide page.
   ============================================================ */
body[data-device="mobile"] {
  /* keep body's creme + radial gradient stack — do NOT override */
}

/* Center & constrain the three top-level top-to-bottom containers. */
body[data-device="mobile"] .toolbar,
body[data-device="mobile"] .zones ,
.lumamed-landing[data-device="mobile"] .zones {
  max-width: 412px;
  margin-left: auto;
  margin-right: auto;
}

/* Subtle phone-frame styling — a hairline outline so the column reads as
   a contained surface against the broader gradient field around it.
   The body's gradient stack lives at page-level percentages and only
   shows along the edges (outside the 412px column), so we re-apply the
   same rhythm of warm "suns" scoped to .zones — same 6/17/28/40/52/64/76/90
   vertical anchors, sized in % of the column. This brings the warmth
   *inside* the phone frame instead of leaving the column flat creme. */
body[data-device="mobile"] .zones {
  background:
    /* Hero · strong top-right */
    radial-gradient(ellipse 80% 14% at 95% 5%,   rgba(250, 153, 111, 0.34), transparent 70%),
    /* Below hero · soft bottom-left */
    radial-gradient(ellipse 75% 12% at 0%  16%,  rgba(255, 192, 142, 0.22), transparent 70%),
    /* Wer area · right */
    radial-gradient(ellipse 70% 12% at 100% 27%, rgba(250, 153, 111, 0.22), transparent 70%),
    /* Steps · subtle left */
    radial-gradient(ellipse 70% 12% at 5%  39%,  rgba(255, 224, 175, 0.24), transparent 70%),
    /* Service · right warm */
    radial-gradient(ellipse 75% 13% at 95% 51%,  rgba(250, 153, 111, 0.26), transparent 70%),
    /* Deliverable · center subtle */
    radial-gradient(ellipse 65% 10% at 30% 63%,  rgba(255, 192, 142, 0.20), transparent 70%),
    /* USPs · left medium */
    radial-gradient(ellipse 75% 13% at 0%  75%,  rgba(250, 153, 111, 0.22), transparent 70%),
    /* FAQ · right subtle */
    radial-gradient(ellipse 70% 12% at 100% 89%, rgba(255, 192, 142, 0.20), transparent 70%),
    var(--lm-creme);
  outline: 1px solid var(--hairline-soft);
  outline-offset: 0;
  overflow: hidden;          /* clip any decorative suns */
  position: relative;
}
body[data-device="mobile"] .toolbar ,
.lumamed-landing[data-device="mobile"] .toolbar {
  border-left: 1px solid var(--hairline-soft);
  border-right: 1px solid var(--hairline-soft);
}

/* Hide the section-level "sun" gradients — they'd leak outside the column. */
body[data-device="mobile"] .sun { display: none; }

/* Soften the body's warm radials on mobile — on a narrow viewport the
   "right" hotspots end up squarely behind the hero/animation seam and look
   like a hard color step. Re-paint a calmer version: less saturation,
   pushed further off the right edge and lower down, so the animation
   bridge sits on a near-uniform creme and the transition into Frame 2 is
   imperceptible. */
body[data-device="mobile"] {
  background:
    /* Hero · only the top-LEFT warmth stays — softer */
    radial-gradient(ellipse 80% 18% at 0% 4%,     rgba(250, 153, 111, 0.30), transparent 70%),
    radial-gradient(ellipse 70% 14% at 0% 12%,    rgba(255, 192, 142, 0.20), transparent 70%),
    /* Wer area · pushed further down + off-screen right, much lighter */
    radial-gradient(ellipse 60% 16% at 115% 42%,  rgba(250, 153, 111, 0.14), transparent 70%),
    /* Service · right, lower & softer */
    radial-gradient(ellipse 65% 18% at 110% 60%,  rgba(250, 153, 111, 0.16), transparent 70%),
    /* USPs · left, gentle */
    radial-gradient(ellipse 70% 18% at -10% 80%,  rgba(250, 153, 111, 0.14), transparent 70%),
    /* FAQ · right subtle */
    radial-gradient(ellipse 60% 16% at 110% 94%,  rgba(255, 192, 142, 0.14), transparent 70%),
    var(--lm-creme) !important;
}

/* Mobile scale: tighter padding, smaller hierarchy. */
body[data-device="mobile"]         { --pad: 20px; }
body[data-device="mobile"] section ,
.lumamed-landing[data-device="mobile"] section { padding: 64px 0; }

/* Typography — DS hierarchy scaled for ~412px viewport. */
body[data-device="mobile"] h1 { font-size: 38px !important; line-height: 1.15; }
body[data-device="mobile"] h2 ,
.lumamed-landing[data-device="mobile"] h2 { font-size: 30px !important; line-height: 1.18; }
body[data-device="mobile"] h3 ,
.lumamed-landing[data-device="mobile"] h3 { font-size: 22px !important; line-height: 1.25; }
body[data-device="mobile"] p,
.lumamed-landing[data-device="mobile"] p,
body[data-device="mobile"] li ,
.lumamed-landing[data-device="mobile"] li { font-size: 15px; line-height: 1.5; }

/* Section tag — smaller, more breathing room above titles. */
body[data-device="mobile"] .section-tag { font-size: 10px; margin-bottom: 20px; gap: 10px; }
body[data-device="mobile"] .section-tag::before ,
.lumamed-landing[data-device="mobile"] .section-tag::before { width: 8px; height: 8px; }

/* ---------- HERO (Frame 1) ---------- */
body[data-device="mobile"] .hero { min-height: auto; padding-top: 32px; padding-bottom: 64px; }
body[data-device="mobile"] .hero > .page-inner ,
.lumamed-landing[data-device="mobile"] .hero > .page-inner {
  grid-template-columns: 1fr;
  height: auto;
  min-height: 0;
  gap: 32px;
}
/* Put the animation BELOW the text on mobile — most landing pages do this
   so the first thing in the viewport is the headline. */
body[data-device="mobile"] .hero-text  { order: 1; }
body[data-device="mobile"] .hero-media ,
.lumamed-landing[data-device="mobile"] .hero-media { order: 2; min-height: 0; }
body[data-device="mobile"] .hero h1    ,
.lumamed-landing[data-device="mobile"] .hero h1    { font-size: 38px !important; max-width: none; line-height: 1.15; font-weight: 500; }
body[data-device="mobile"] .hero-kicker ,
.lumamed-landing[data-device="mobile"] .hero-kicker { font-size: 10px; margin-bottom: 20px; gap: 10px; }
body[data-device="mobile"] .hero-kicker::before ,
.lumamed-landing[data-device="mobile"] .hero-kicker::before { width: 10px; height: 10px; }
body[data-device="mobile"] .hero-sub ,
.lumamed-landing[data-device="mobile"] .hero-sub { font-size: 15px; margin-top: 18px; max-width: none; }
body[data-device="mobile"] .hero-values ,
.lumamed-landing[data-device="mobile"] .hero-values { margin-top: 24px; gap: 10px; }
body[data-device="mobile"] .hero-values li ,
.lumamed-landing[data-device="mobile"] .hero-values li { font-size: 14px; gap: 12px; }
body[data-device="mobile"] .hero-values li::before ,
.lumamed-landing[data-device="mobile"] .hero-values li::before { width: 8px; height: 8px; top: 3px; }

/* In caps variant the index number (01/02/03) must sit centered with the
   text — including when the text wraps to 2 lines on narrow screens.
   align-items:center on the li already does this, but the base mobile rule
   set top:3px on ::before, which knocks it off-center. Reset to 0 here. */
body[data-device="mobile"][data-hero-bullets="caps"] .hero-values li {
  align-items: center;
}
body[data-device="mobile"][data-hero-bullets="caps"] .hero-values li::before ,
.lumamed-landing[data-device="mobile"][data-hero-bullets="caps"] .hero-values li::before {
  top: 0;
  position: static;
  /* small alignment nudge: counter glyphs in JetBrains Mono have a touch of
     descender padding; -1px corrects optical centering at small sizes */
  margin-top: -1px;
}
body[data-device="mobile"] .hero-actions ,
.lumamed-landing[data-device="mobile"] .hero-actions { margin-top: 28px; gap: 16px; }
body[data-device="mobile"] .hero-actions .cta ,
.lumamed-landing[data-device="mobile"] .hero-actions .cta { padding: 12px 18px; font-size: 14px; }
body[data-device="mobile"] .hero-meta ,
.lumamed-landing[data-device="mobile"] .hero-meta {
  font-size: 14px !important;
  color: #000 !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  white-space: normal;
  text-shadow: none;
  filter: none;
  opacity: 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
body[data-device="mobile"] .hero-price,
.lumamed-landing[data-device="mobile"] .hero-price,
body[data-device="mobile"] .hero-sep,
.lumamed-landing[data-device="mobile"] .hero-sep,
body[data-device="mobile"] .hero-price-note ,
.lumamed-landing[data-device="mobile"] .hero-price-note {
  font-size: 14px !important;
  color: #000 !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  filter: none !important;
}
body[data-device="mobile"] .hero-price ,
.lumamed-landing[data-device="mobile"] .hero-price { font-weight: 700 !important; }

/* ============================================================
   Hero · Trustindex widget — minimal container + 3 style variants.
   ============================================================
   Variant via body[data-reviews]:
     · 'badge' — compact card width (default)
     · 'wide'  — full text-column width, hairline above
     · 'text'  — hide the widget, show a custom mono "★★★★★ 196 Google-
                  Bewertungen ↗" link instead. */
.hero-trust {
  margin-top: 22px;
  max-width: 520px;
  position: relative;
  z-index: 50;
  display: block;
}
.hero-trust-mount {
  background: transparent;
  border: 0;
  padding: 0;
  position: relative;
  z-index: 50;
}
/* Device-scoped visibility — only the matching widget loader is shown */
body[data-device="desktop"] .hero-trust-mobile  { display: none; }
body[data-device="mobile"]  .hero-trust-desktop ,
.lumamed-landing[data-device="mobile"]  .hero-trust-desktop { display: none; }

/* Custom text mark — hidden by default; shown for data-reviews="text" */
.hero-trust-text {
  display: none;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: var(--fg1, #1a1a1a);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0;
  line-height: 1;
  white-space: nowrap;       /* keep on one line so visual center matches CTA */
  transition: color .15s ease;
}
.hero-trust-text-label { line-height: 1; }
.hero-trust-text:hover { color: #000; }
.hero-trust-text-stars {
  color: #F4B400;
  font-size: 14px;
  letter-spacing: 1px;
  font-family: var(--font-sans);
  line-height: 1;
  /* Sit on the same baseline as the mono label so the two read as one
     continuous text line. */
  display: inline-block;
}
.hero-trust-text-arrow {
  font-size: 12px;
  color: var(--fg2, #5a4f44);
  margin-left: 2px;
}

/* ---- Variant B · wide ----
   Full hero-text-column width, hairline above to anchor it as a footer-style
   trust line under the hero. Try to neutralize the widget's own grey card. */
body[data-reviews="wide"] .hero-trust {
  max-width: 100%;
  width: 100%;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-soft);
}
body[data-reviews="wide"] .hero-trust-mount,
.lumamed-landing[data-reviews="wide"] .hero-trust-mount,
body[data-reviews="wide"] .hero-trust-mount > div,
.lumamed-landing[data-reviews="wide"] .hero-trust-mount > div,
body[data-reviews="wide"] .hero-trust-mount iframe ,
.lumamed-landing[data-reviews="wide"] .hero-trust-mount iframe {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---- Variant C · text ----
   Widget hidden completely. Custom mono text mark sits in its place. */
body[data-reviews="text"] .hero-trust-mount { display: none !important; }
body[data-reviews="text"] .hero-trust-text  ,
.lumamed-landing[data-reviews="text"] .hero-trust-text  { display: inline-flex !important; }
body[data-reviews="text"] .hero-trust       ,
.lumamed-landing[data-reviews="text"] .hero-trust       { margin-top: 18px; }

/* Mobile: full-width regardless of variant (matches the man-portrait below) */
body[data-device="mobile"] .hero-trust { max-width: 100%; width: 100%; margin-top: 18px; }
body[data-device="mobile"] .hero-trust-mount ,
.lumamed-landing[data-device="mobile"] .hero-trust-mount { width: 100%; }
body[data-device="mobile"] .hero-trust-mount > *,
.lumamed-landing[data-device="mobile"] .hero-trust-mount > *,
body[data-device="mobile"] .hero-trust-mount [class*="ti-widget"],
.lumamed-landing[data-device="mobile"] .hero-trust-mount [class*="ti-widget"],
body[data-device="mobile"] .hero-trust-mount iframe ,
.lumamed-landing[data-device="mobile"] .hero-trust-mount iframe {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* Stacking: the hero is lifted above all following sections so the
   widget's popup (rendered inside the trust mount) overlays Frame 2 / 3 /
   bridges instead of being painted over. Applies on both devices. */
.hero { position: relative; z-index: 40; }
.silos,
.wer,
.steps,
.service,
.usps,
.experts,
.faq,
.mobile-image-bridge { position: relative; z-index: 1; }

/* Hero animation/canvas — fit width, cap height so it doesn't dominate. */
body[data-device="mobile"] .hero-media video.portrait-webm,
body[data-device="mobile"] .hero-media video.portrait-mp4-direct,
.lumamed-landing[data-device="mobile"] .hero-media video.portrait-mp4-direct,
body[data-device="mobile"] .hero-media canvas.portrait-mp4 ,
.lumamed-landing[data-device="mobile"] .hero-media canvas.portrait-mp4 {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

/* HEADER OFF EVERYWHERE — user request: kein Header, weder Mobile noch Desktop. */
.toolbar { display: none; }

/* ---------- MOBILE OVERRIDES (per user request) ----------
   On mobile: no hero animation. The Frame 2 portrait (frame2.png) is shown
   as a full-width bridge band between Frame 1 and Frame 2 — natural aspect
   ratio (no crop), padding matching the text. */
body[data-device="mobile"] .hero-media   { display: none; }
body[data-device="mobile"] .hero         ,
.lumamed-landing[data-device="mobile"] .hero         { padding-bottom: 32px; }

/* Stack the CTA + price meta vertically (no longer side-by-side). */
/* Mobile: revert to single-column flex so DOM order (CTA → meta → trust)
   becomes the visual stack. Reset grid-template-areas to clear the
   desktop layout. */
body[data-device="mobile"] .hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-template-areas: none;
  gap: 12px;
}
body[data-device="mobile"] .hero-actions .cta ,
.lumamed-landing[data-device="mobile"] .hero-actions .cta { width: auto; align-self: flex-start; }
body[data-device="mobile"] .hero-actions .hero-trust ,
.lumamed-landing[data-device="mobile"] .hero-actions .hero-trust {
  align-self: flex-start;
  /* Kill the extra desktop margin-top so the trust line sits at the flex
     gap distance (12px) below the price-line, not 12+18=30px. */
  margin-top: 0;
}
/* Tighten the flex gap between CTA → price → trust slightly on mobile so
   the two info lines under "Jetzt anmelden" feel like part of the same
   block, not three separated chunks. */
body[data-device="mobile"] .hero-actions { gap: 6px; row-gap: 6px; }
/* Keep some air between the CTA and the first info line below it. */
body[data-device="mobile"] .hero-actions .cta { margin-bottom: 6px; }

/* The mobile-only image bridge between Frame 1 and Frame 2.
   Default: hidden everywhere. Shown only on mobile. */
.mobile-image-bridge { display: none; }
body[data-device="mobile"] .mobile-image-bridge ,
.lumamed-landing[data-device="mobile"] .mobile-image-bridge {
  display: block;
  padding: 0;                     /* section padding handled by inner */
}
body[data-device="mobile"] .mobile-image-bridge .page-inner ,
.lumamed-landing[data-device="mobile"] .mobile-image-bridge .page-inner {
  padding: 0 var(--pad);          /* matches text padding */
}
body[data-device="mobile"] .mobile-image-bridge img,
.lumamed-landing[data-device="mobile"] .mobile-image-bridge img,
body[data-device="mobile"] .mobile-image-bridge video ,
.lumamed-landing[data-device="mobile"] .mobile-image-bridge video {
  display: block;
  width: 100%;
  height: auto;                   /* keep natural ratio — no crop */
  border: 1px solid var(--hairline-soft);
  mix-blend-mode: multiply;       /* match Frame 2 desktop — drop the gray bg */
}

/* Frame 1 bridge (the man + risk-callout portrait sitting directly under
   the hero) — full-bleed: no gray hairline, no horizontal page padding,
   so the rightmost callout tile touches the right edge of the screen
   and the image reads larger. The other two bridges (Frame 2 doctor
   photo and Frame 3 360° animation) keep their default treatment. */
/* Frame 1 bridge (the man + risk-callout portrait sitting directly under
   the hero) — keeps the standard page padding so the image has a margin
   on the left/right (matching where the gray hairline used to be), but
   the gray border itself is removed. With the PNG's whitespace cropped,
   width:100% inside the padded inner gives the largest possible portrait
   — the rightmost callout tiles touch the image's right edge. */
body[data-device="mobile"] .mobile-image-bridge[data-screen-label="01b Bild"] img {
  border: 0;
  width: 100%;
  height: auto;
  mix-blend-mode: normal;
}

/* The 360° animation bridge: no border, and the section paints itself with
   the flat creme so the orange hero gradient stops cleanly above it — that
   way the video's own cream multiplies onto a uniform color and reads as
   "part of the page" instead of a pasted-in tile. The seam itself is
   feathered with a top mask so the gradient fades into the creme. */
body[data-device="mobile"] .mobile-image-bridge--video {
  background: var(--lm-creme);
  position: relative;
  z-index: 1;                     /* above body gradient */
  margin-top: -8px;               /* tuck slightly into the hero so the
                                     gradient falloff disappears under it */
  padding-top: 8px;
}
body[data-device="mobile"] .mobile-image-bridge--video::before ,
.lumamed-landing[data-device="mobile"] .mobile-image-bridge--video::before {
  /* short fade strip ABOVE the section: creme at the section edge,
     transparent toward the hero — hides the orange tail without a hard line. */
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 140px;
  background: linear-gradient(to top, var(--lm-creme), transparent);
  pointer-events: none;
}
body[data-device="mobile"] .mobile-image-bridge--video::after ,
.lumamed-landing[data-device="mobile"] .mobile-image-bridge--video::after {
  /* mirror fade BELOW the section so we don't pop back into the orange
     wer-right gradient with a hard seam. */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 140px;
  background: linear-gradient(to bottom, var(--lm-creme), transparent);
  pointer-events: none;
}
body[data-device="mobile"] .mobile-image-bridge--video video ,
.lumamed-landing[data-device="mobile"] .mobile-image-bridge--video video {
  border: 0;                       /* no gray edge around the animation */
}

/* ============================================================
   FRAME 1 — Mobile-only additions (price line + 3-step mini-strip)
   Controlled by body[data-hero-mobile]:
     • default        — hide both (current standard layout)
     • price-line     — show price-line below body copy, above CTA
     • steps-mini     — show 3-step strip below body copy (before bullets)
     • both           — show both: price-line + steps-mini
     • steps-top      — show steps-mini ABOVE body copy as a teaser
   All these only apply on body[data-device="mobile"]. On desktop these
   elements stay hidden.
   ============================================================ */
.hero-priceline,
.hero-steps-mini { display: none; }

body[data-device="mobile"] .hero-priceline ,

.lumamed-landing[data-device="mobile"] .hero-priceline {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg1);
  margin: 12px 0 0 0;
}
body[data-device="mobile"] .hero-priceline strong ,
.lumamed-landing[data-device="mobile"] .hero-priceline strong { font-weight: 600; }

body[data-device="mobile"] .hero-steps-mini ,

.lumamed-landing[data-device="mobile"] .hero-steps-mini {
  margin: 18px 0 4px 0;
  padding: 18px 0;
  border-top: 1px solid var(--hairline-soft, rgba(6,43,81,0.12));
  border-bottom: 1px solid var(--hairline-soft, rgba(6,43,81,0.12));
}
body[data-device="mobile"] .hsm-title ,
.lumamed-landing[data-device="mobile"] .hsm-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg1);
  opacity: 0.7;
  margin-bottom: 14px;
  line-height: 1.2;
}
body[data-device="mobile"] .hsm-row ,
.lumamed-landing[data-device="mobile"] .hsm-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 6px;
}
body[data-device="mobile"] .hsm-step ,
.lumamed-landing[data-device="mobile"] .hsm-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  min-width: 0;
}
body[data-device="mobile"] .hsm-icon ,
.lumamed-landing[data-device="mobile"] .hsm-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lm-dark-blue, #062B51);
}
body[data-device="mobile"] .hsm-icon svg ,
.lumamed-landing[data-device="mobile"] .hsm-icon svg { width: 100%; height: 100%; }
body[data-device="mobile"] .hsm-label ,
.lumamed-landing[data-device="mobile"] .hsm-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--fg1);
  letter-spacing: 0.02em;
}
body[data-device="mobile"] .hsm-arrow ,
.lumamed-landing[data-device="mobile"] .hsm-arrow {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--fg1);
  opacity: 0.4;
  line-height: 1;
  align-self: center;
  padding-top: 8px;
}

body[data-device="mobile"][data-hero-mobile="price-line"]  .hero-priceline,

.lumamed-landing[data-device="mobile"][data-hero-mobile="price-line"]  .hero-priceline,
body[data-device="mobile"][data-hero-mobile="both"]        .hero-priceline,
.lumamed-landing[data-device="mobile"][data-hero-mobile="both"]        .hero-priceline,
body[data-device="mobile"][data-hero-mobile="steps-top"]   .hero-priceline ,
.lumamed-landing[data-device="mobile"][data-hero-mobile="steps-top"]   .hero-priceline { display: block; }

body[data-device="mobile"][data-hero-mobile="steps-mini"]  .hero-steps-mini,

.lumamed-landing[data-device="mobile"][data-hero-mobile="steps-mini"]  .hero-steps-mini,
body[data-device="mobile"][data-hero-mobile="both"]        .hero-steps-mini,
.lumamed-landing[data-device="mobile"][data-hero-mobile="both"]        .hero-steps-mini,
body[data-device="mobile"][data-hero-mobile="steps-top"]   .hero-steps-mini ,
.lumamed-landing[data-device="mobile"][data-hero-mobile="steps-top"]   .hero-steps-mini { display: block; }

body[data-device="mobile"][data-hero-mobile="steps-top"] .hero-text ,

.lumamed-landing[data-device="mobile"][data-hero-mobile="steps-top"] .hero-text { display: flex; flex-direction: column; }
body[data-device="mobile"][data-hero-mobile="steps-top"] .hero-kicker    ,
.lumamed-landing[data-device="mobile"][data-hero-mobile="steps-top"] .hero-kicker    { order: 1; }
body[data-device="mobile"][data-hero-mobile="steps-top"] h1              ,
.lumamed-landing[data-device="mobile"][data-hero-mobile="steps-top"] h1              { order: 2; }
body[data-device="mobile"][data-hero-mobile="steps-top"] .hero-steps-mini,
.lumamed-landing[data-device="mobile"][data-hero-mobile="steps-top"] .hero-steps-mini{ order: 3; margin-top: 24px; }
body[data-device="mobile"][data-hero-mobile="steps-top"] .hero-sub       ,
.lumamed-landing[data-device="mobile"][data-hero-mobile="steps-top"] .hero-sub       { order: 4; }
body[data-device="mobile"][data-hero-mobile="steps-top"] .hero-priceline ,
.lumamed-landing[data-device="mobile"][data-hero-mobile="steps-top"] .hero-priceline { order: 5; }
body[data-device="mobile"][data-hero-mobile="steps-top"] .hero-values    ,
.lumamed-landing[data-device="mobile"][data-hero-mobile="steps-top"] .hero-values    { order: 6; }
body[data-device="mobile"][data-hero-mobile="steps-top"] .hero-actions   ,
.lumamed-landing[data-device="mobile"][data-hero-mobile="steps-top"] .hero-actions   { order: 7; }
body[data-device="mobile"][data-hero-mobile="steps-top"] .hero-media     ,
.lumamed-landing[data-device="mobile"][data-hero-mobile="steps-top"] .hero-media     { order: 8; }

body[data-device="mobile"][data-hero-mobile="price-line"] .hero-meta,

.lumamed-landing[data-device="mobile"][data-hero-mobile="price-line"] .hero-meta,
body[data-device="mobile"][data-hero-mobile="both"]       .hero-meta,
.lumamed-landing[data-device="mobile"][data-hero-mobile="both"]       .hero-meta,
body[data-device="mobile"][data-hero-mobile="steps-top"]  .hero-meta ,
.lumamed-landing[data-device="mobile"][data-hero-mobile="steps-top"]  .hero-meta { display: none; }

/* Hide the original Frame 2 & Frame 3 portraits — they live in the bridges now. */
body[data-device="mobile"] .silos .media-frame,
body[data-device="mobile"] .wer   .media-frame ,
.lumamed-landing[data-device="mobile"] .wer   .media-frame { display: none; }

/* ---------- 2-COL SECTIONS — all collapse to single column ---------- */
body[data-device="mobile"] .silos-grid,
body[data-device="mobile"] .wer-grid,
.lumamed-landing[data-device="mobile"] .wer-grid,
body[data-device="mobile"] .deliverable-grid ,
.lumamed-landing[data-device="mobile"] .deliverable-grid { grid-template-columns: 1fr; gap: 32px; }

/* problems-left layout collapses to a single column on mobile */
body[data-device="mobile"][data-silos="problems-left"] .silos > .page-inner {
  display: block;
}
body[data-device="mobile"][data-silos="problems-left"] .silos-lead ,
.lumamed-landing[data-device="mobile"][data-silos="problems-left"] .silos-lead { margin-bottom: 32px; }
body[data-device="mobile"] .media-frame ,
.lumamed-landing[data-device="mobile"] .media-frame { aspect-ratio: 4 / 3; }

/* Problem list (Frame 2) — tighter */
body[data-device="mobile"] .problem { padding-left: 14px; }
body[data-device="mobile"] .problem-h ,
.lumamed-landing[data-device="mobile"] .problem-h { font-size: 20px; margin-bottom: 6px; }
body[data-device="mobile"] .problem-b ,
.lumamed-landing[data-device="mobile"] .problem-b { font-size: 14px; }

/* ---------- PROCESS (Frame 4) ---------- */
body[data-device="mobile"] .steps h2 { margin-bottom: 40px; }
body[data-device="mobile"][data-process="timeline"] .step ,
.lumamed-landing[data-device="mobile"][data-process="timeline"] .step {
  grid-template-columns: 28px 1fr;
  grid-template-areas: "num body";
  column-gap: 14px;
}
body[data-device="mobile"][data-process="timeline"] .step-aside ,
.lumamed-landing[data-device="mobile"][data-process="timeline"] .step-aside { display: none; }
body[data-device="mobile"][data-process="timeline"] .step-media ,
.lumamed-landing[data-device="mobile"][data-process="timeline"] .step-media { display: none; }
body[data-device="mobile"][data-process="timeline"] .step-num ,
.lumamed-landing[data-device="mobile"][data-process="timeline"] .step-num {
  display: block;
  grid-area: num;
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: 20px;
  line-height: 1;
  text-align: right;
  padding-top: 6px;
  letter-spacing: 0;
  color: var(--fg1);
}
/* Show the bridge animation only in mobile preview */
body[data-device="mobile"] .steps-mobile-bridge {
  display: block;
  margin: 0 0 40px;
}
body[data-device="mobile"][data-process="timeline"] .step-body ,
.lumamed-landing[data-device="mobile"][data-process="timeline"] .step-body { padding: 6px 0 36px 16px; }
body[data-device="mobile"][data-process="timeline"] .step-body::before ,
.lumamed-landing[data-device="mobile"][data-process="timeline"] .step-body::before { width: 9px; height: 9px; left: -5px; top: 12px; }
body[data-device="mobile"][data-process="timeline"] .step h3 ,
.lumamed-landing[data-device="mobile"][data-process="timeline"] .step h3 { font-size: 20px !important; margin-bottom: 6px; }
body[data-device="mobile"][data-process="timeline"] .step p ,
.lumamed-landing[data-device="mobile"][data-process="timeline"] .step p { font-size: 14px; }
body[data-device="mobile"][data-process="cards"] .steps-body ,
.lumamed-landing[data-device="mobile"][data-process="cards"] .steps-body { grid-template-columns: 1fr; gap: 20px; }

/* ---------- DROPDOWNS (used in Frame 5, 6, 7) ---------- */
body[data-device="mobile"] .dd > summary {
  grid-template-columns: 28px 1fr 18px;
  padding: 18px 0;
  gap: 12px;
}
body[data-device="mobile"] .dd-ix ,
.lumamed-landing[data-device="mobile"] .dd-ix { font-size: 10px; }
body[data-device="mobile"] .dd-title ,
.lumamed-landing[data-device="mobile"] .dd-title { font-size: 15px !important; font-weight: 500; line-height: 1.3; }
body[data-device="mobile"] .dd-toggle ,
.lumamed-landing[data-device="mobile"] .dd-toggle { font-size: 22px; }
body[data-device="mobile"] .dd-body ,
.lumamed-landing[data-device="mobile"] .dd-body { padding: 0 0 18px 40px; }
body[data-device="mobile"] .dd-body p ,
.lumamed-landing[data-device="mobile"] .dd-body p { font-size: 14px; line-height: 1.55; }

/* ---------- SERVICE & PRICE (Frame 5) — all variants flatten ---------- */
body[data-device="mobile"] .service-lead { font-size: 15px; margin-bottom: 32px; }
body[data-device="mobile"][data-service="split"] .service-body,
.lumamed-landing[data-device="mobile"][data-service="split"] .service-body,
body[data-device="mobile"][data-service="rail"]  .service-body ,
.lumamed-landing[data-device="mobile"][data-service="rail"]  .service-body {
  grid-template-columns: 1fr;
  gap: 32px;
}
/* Place price card ABOVE list on mobile for both split & rail */
body[data-device="mobile"][data-service="split"] .service-side,
body[data-device="mobile"][data-service="rail"]  .service-side ,
.lumamed-landing[data-device="mobile"][data-service="rail"]  .service-side {
  position: static;
  order: -1;
  padding: 24px 22px;
}
body[data-device="mobile"][data-service="split"] .service-side .price-tag .v,
.lumamed-landing[data-device="mobile"][data-service="split"] .service-side .price-tag .v,
body[data-device="mobile"][data-service="rail"]  .service-side .price-tag .v ,
.lumamed-landing[data-device="mobile"][data-service="rail"]  .service-side .price-tag .v { font-size: 68px; }

/* RAIL variant on mobile — user request: the price block (Investition · 89 €)
   sits BELOW the dropdowns. The dd-list comes first; the price card is the
   natural footer of the section. Also: the meta lines (PKV-erstattungsfähig /
   100 % anrechenbar auf Folgeleistungen) must be black + readable, not the
   grayed mono-label color they inherit from the desktop rail style. */
body[data-device="mobile"][data-service="rail"]  .service-side {
  order: 1;                  /* explicit: AFTER the .dd-list */
  padding: 28px 0 0;
}
body[data-device="mobile"][data-service="rail"] .service-side .meta ,
.lumamed-landing[data-device="mobile"][data-service="rail"] .service-side .meta {
  color: var(--fg1);         /* dark blue — the brand's 'black' */
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
}
body[data-device="mobile"][data-service="rail"] .service-side .meta .meta-strong ,
.lumamed-landing[data-device="mobile"][data-service="rail"] .service-side .meta .meta-strong {
  color: var(--fg1);
  font-weight: 500;
}

/* USPs (Frame 6) — user request: drop the lead sentence on mobile.
   Only the heading, image and toggles remain. */
body[data-device="mobile"] .usps-lead { display: none; }
body[data-device="mobile"][data-service="hero"]  .service .price-row ,
.lumamed-landing[data-device="mobile"][data-service="hero"]  .service .price-row {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 24px 0;
}
body[data-device="mobile"][data-service="hero"]  .service .price-row .v ,
.lumamed-landing[data-device="mobile"][data-service="hero"]  .service .price-row .v { font-size: 96px; }
body[data-device="mobile"][data-service="hero"]  .service .price-row .u ,
.lumamed-landing[data-device="mobile"][data-service="hero"]  .service .price-row .u { margin-left: 0; padding-bottom: 0; }
body[data-device="mobile"][data-service="hero"]  .service .price-row .n ,
.lumamed-landing[data-device="mobile"][data-service="hero"]  .service .price-row .n { padding-bottom: 0; max-width: none; }
body[data-device="mobile"][data-service="matrix"] .service .dd-list ,
.lumamed-landing[data-device="mobile"][data-service="matrix"] .service .dd-list { grid-template-columns: 1fr; }
body[data-device="mobile"][data-service="matrix"] .service .dd ,
.lumamed-landing[data-device="mobile"][data-service="matrix"] .service .dd { border-right: 0; }
body[data-device="mobile"][data-service="default"] .service .price-row ,
.lumamed-landing[data-device="mobile"][data-service="default"] .service .price-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
body[data-device="mobile"][data-service="default"] .service .price-row .v ,
.lumamed-landing[data-device="mobile"][data-service="default"] .service .price-row .v { font-size: 60px; }
body[data-device="mobile"][data-service="default"] .service .price-row .n ,
.lumamed-landing[data-device="mobile"][data-service="default"] .service .price-row .n { text-align: left; margin-left: 0; max-width: none; }

/* ---------- DELIVERABLE (Frame 5b) ---------- */
body[data-device="mobile"] .deliverable-text h2 { font-size: 26px !important; }

/* ---------- USPs (Frame 6) ---------- */
body[data-device="mobile"] .usps-lead { font-size: 15px; }
body[data-device="mobile"] .usps-body ,
.lumamed-landing[data-device="mobile"] .usps-body { grid-template-columns: 1fr; gap: 32px; }
body[data-device="mobile"] .usps-side ,
.lumamed-landing[data-device="mobile"] .usps-side { position: static; order: -1; }
body[data-device="mobile"] .usps-grid ,
.lumamed-landing[data-device="mobile"] .usps-grid { grid-template-columns: 1fr; gap: 20px; }

/* ---------- EXPERTS (Frame 7) ---------- */
body[data-device="mobile"] .experts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px; max-width: none !important; }
body[data-device="mobile"] .experts-intro p ,
.lumamed-landing[data-device="mobile"] .experts-intro p { font-size: 16px; }
body[data-device="mobile"] .experts h2 ,
.lumamed-landing[data-device="mobile"] .experts h2 { max-width: none; }
body[data-device="mobile"] .experts-intro ,
.lumamed-landing[data-device="mobile"] .experts-intro { margin-bottom: 32px; }
/* Mobile collapses any split layout back to a single stack */
body[data-device="mobile"] .experts .page-inner { display: block; }
body[data-device="mobile"] .experts-cta ,
.lumamed-landing[data-device="mobile"] .experts-cta { margin-top: 32px; }

/* ---------- TOOLBAR — compact, drop the secondary links ---------- */
body[data-device="mobile"] .toolbar {
  padding: 12px 20px;
  gap: 12px;
  background: rgba(255, 250, 244, 0.94);
}
body[data-device="mobile"] .toolbar .brand small ,
.lumamed-landing[data-device="mobile"] .toolbar .brand small { display: none; }
body[data-device="mobile"] .toolbar .right ,
.lumamed-landing[data-device="mobile"] .toolbar .right { font-size: 10px; gap: 14px; }
body[data-device="mobile"] .toolbar .city ,
.lumamed-landing[data-device="mobile"] .toolbar .city { display: none; }
/* Keep only 2 main links on mobile */
body[data-device="mobile"] .toolbar .right a:nth-child(n+4) { display: none; }

/* ---------- FOOTER ---------- */
body[data-device="mobile"] .foot {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 40px 0 56px;
  font-size: 11px;
}
body[data-device="mobile"] .foot img ,
.lumamed-landing[data-device="mobile"] .foot img { height: 24px; }


/* ============================================================
   TABLET BREAKPOINT (768px – 1180px)
   Real viewport-driven layout for iPad Portrait/Landscape, Surface,
   larger Android tablets. Independent of the data-device toggle.
   ============================================================ */

/* Fluid type baseline — interpolate between mobile and desktop sizes so the
   transitions across breakpoints are smooth. Applied at the root so cascade
   wins are predictable. */
h1 {
  font-size: clamp(34px, 5.8vw, 88px) !important;
  line-height: 1.04;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(28px, 4.2vw, 56px) !important;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
h3 {
  font-size: clamp(20px, 2.4vw, 30px) !important;
  line-height: 1.18;
}
.hero-sub,
.silos-lead,
.wer-lead {
  font-size: clamp(16px, 1.5vw, 21px) !important;
  line-height: 1.5;
}

@media (min-width: 768px) and (max-width: 1180px) {
  /* Container padding scales with viewport */
  .page-inner { padding-left: clamp(28px, 5vw, 64px); padding-right: clamp(28px, 5vw, 64px); }

  /* ---- HERO: keep two-column (text + media) on tablets ≥820px;
     stack only on narrow portrait tablets (<820px). Forces 60/40
     so the headline still gets primary visual weight. */
  .hero > .page-inner,
  body[data-device="desktop"] .hero > .page-inner,
  .lumamed-landing[data-device="desktop"] .hero > .page-inner {
    grid-template-columns: 1.4fr 1fr !important;
    gap: clamp(28px, 4vw, 56px) !important;
    align-items: center !important;
  }
  .hero-media {
    min-height: clamp(360px, 50vw, 540px) !important;
    aspect-ratio: 1 / 1 !important;
  }
  /* Hero CTA row stays vertical on tablet so the trust line lives below the CTA. */
  .hero-actions { gap: 14px !important; }

  /* ---- FRAME 2 SILOS: stay side-by-side but rebalance the columns.
     Desktop uses 1fr / 2fr; tablet gets 1fr / 1.4fr so the problems
     column has more room for body copy on narrower screens. */
  body[data-silos="problems-left"] .silos > .page-inner,
  .lumamed-landing[data-silos="problems-left"] .silos > .page-inner {
    grid-template-columns: 1fr 1.4fr !important;
    column-gap: clamp(24px, 3.5vw, 40px) !important;
  }

  /* ---- FRAME 3 WER: stay two-column (heading / bullets) */
  .wer-grid { grid-template-columns: 1fr 1fr !important; gap: clamp(28px, 4vw, 56px) !important; }

  /* ---- FRAME 4 STEPS: keep the timeline rail on tablet but compress media size.
     Each step is "media / body" 220px-fixed media → fluid media. */
  body[data-process="timeline"] .step,
  .lumamed-landing[data-process="timeline"] .step {
    grid-template-columns: clamp(160px, 22vw, 220px) 1fr !important;
    gap: clamp(20px, 3vw, 40px) !important;
  }

  /* ---- FRAME 5 EXPERTS: 3-up on portrait, stay 3-up on landscape too.
     Doctor tiles are square-ish; gap shrinks. */
  .experts-grid { grid-template-columns: repeat(3, 1fr) !important; gap: clamp(16px, 2vw, 28px) !important; }
  /* Narrow tablets: drop to 2-up so faces stay readable. */
  @media (max-width: 880px) {
    .experts-grid { grid-template-columns: repeat(2, 1fr) !important; }
  }

  /* ---- FRAME 6 USPs: stay 2-column on tablet */
  .usps-grid { grid-template-columns: repeat(2, 1fr) !important; gap: clamp(20px, 2.5vw, 32px) !important; }

  /* ---- FRAME 6.5 Carousel: 2 visible slides instead of 1 (mobile) / 3 (desktop).
     The carousel JS handles wrap-around; CSS controls slide width. */
  .carousel-slide { flex-basis: 50% !important; min-width: 50% !important; }

  /* ---- FRAME 7 STORIES & FRAME 9 FAQ: 2-column dropdown grid on tablet ≥900px.
     The .dd-list is a flex column today; we flip it to a CSS grid for tablet. */
  @media (min-width: 900px) {
    .stories .dd-list,
    .faq .dd-list {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      column-gap: clamp(20px, 2.5vw, 36px) !important;
      row-gap: 0 !important;
    }
  }

  /* ---- FRAME 8 SERVICE: 2-column layout on tablet (intro left, table right).
     Default desktop also uses a rail; we just tighten the ratio. */
  body[data-service="rail"] .service-body,
  .lumamed-landing[data-service="rail"] .service-body {
    grid-template-columns: 1fr 1.5fr !important;
    column-gap: clamp(24px, 3.5vw, 48px) !important;
  }

  /* ---- HIDE the mobile-only bridges on tablet (they exist for the iPhone
     preview column only). The desktop layout already handles imagery
     inline in Frames 2 & 3. */
  .mobile-image-bridge { display: none !important; }
  body[data-device="mobile"] .mobile-image-bridge,
  .lumamed-landing[data-device="mobile"] .mobile-image-bridge { display: block !important; }

  /* ---- Topbar / toolbar tighten */
  .toolbar { padding: 14px clamp(20px, 4vw, 48px) !important; }
  .toolbar .right { gap: clamp(14px, 1.8vw, 22px) !important; }

  /* ---- Bullets / chips: fluid sizing */
  .hero-values li,
  .wer-values li,
  .usps-bullet { font-size: clamp(13px, 1.2vw, 15px) !important; }
}

/* Narrow tablet portrait (768–819px) — collapse the hero to one column so
   the headline doesn't get cramped, but keep all other tablet rules. */
@media (min-width: 768px) and (max-width: 819px) {
  .hero > .page-inner {
    grid-template-columns: 1fr !important;
  }
  .hero-media { min-height: clamp(280px, 60vw, 420px) !important; }
}

/* ============================================================
   v1.0.7 — WORDPRESS-PATCH (final, im Live-Browser getestet)
   ============================================================
   Inhalte aus v1.0.6 plus:
   - Frame 3 (Wer/Für Menschen) auf 50/50 Layout statt 1/3 2/3
   - Image-Slot Bilder werden per JS gesetzt (siehe lumamed-landing.js)
   ============================================================ */

/* (1) Animations-Slot: nur das aktive Video zeigen */
.lumamed-landing[data-anim-source] .hero-media video.portrait-webm,
.lumamed-landing[data-anim-source] .hero-media video.portrait-mp4-direct,
.lumamed-landing[data-anim-source] .hero-media canvas.portrait-mp4 {
  display: none !important;
}
.lumamed-landing[data-anim-source="webm"] .hero-media video.portrait-webm,
.lumamed-landing[data-anim-source="mp4-direct"] .hero-media video.portrait-mp4-direct,
.lumamed-landing[data-anim-source="mp4"] .hero-media canvas.portrait-mp4 {
  display: block !important;
}

/* (2) Hero darf wachsen */
.lumamed-landing .hero {
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
}
.lumamed-landing .hero > .page-inner {
  grid-template-rows: auto !important;
  grid-auto-rows: auto !important;
  align-items: center !important;
  height: auto !important;
  max-height: none !important;
}

/* (3) Hero-Media: kein Stretch */
.lumamed-landing .hero-media {
  min-height: 0 !important;
  max-height: 700px !important;
  height: auto !important;
  align-self: center !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
}
.lumamed-landing .hero-media video,
.lumamed-landing .hero-media canvas {
  max-height: 700px !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* (4) Hero h1 fluid responsive */
.lumamed-landing .hero h1 {
  font-size: clamp(34px, 5vw, 60px) !important;
  line-height: 1.08 !important;
}
.lumamed-landing .hero-sub {
  font-size: clamp(15px, 1.4vw, 18px) !important;
}

/* (5) Hero-Actions: CTA nicht stauchen */
.lumamed-landing .hero-actions {
  grid-template-columns: max-content 1fr !important;
}
.lumamed-landing .hero-actions a.cta {
  white-space: nowrap !important;
  min-width: max-content !important;
}

/* (6) Mobile-Bridges im Desktop verstecken */
.lumamed-landing[data-device="desktop"] .steps-mobile-bridge,
.lumamed-landing[data-device="desktop"] .frame-bridge,
.lumamed-landing[data-device="desktop"] .mobile-bridge,
.lumamed-landing[data-device="desktop"] .mobile-image-bridge {
  display: none !important;
}

/* (7) Carousel-Pfeile (Frame 6) */
.lumamed-landing .carousel-arrow {
  background: #062b51 !important;
  border: none !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(6, 43, 81, 0.25) !important;
  z-index: 5 !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}
.lumamed-landing .carousel-arrow:hover {
  transform: scale(1.08) !important;
  background: #0a3a6b !important;
}
.lumamed-landing .carousel-arrow svg,
.lumamed-landing .carousel-arrow svg * {
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 2 !important;
  width: 22px !important;
  height: 22px !important;
}
.lumamed-landing .carousel-dot {
  background: rgba(6, 43, 81, 0.25) !important;
  border: none !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}
.lumamed-landing .carousel-dot[data-active="true"],
.lumamed-landing .carousel-dot.active {
  background: #062b51 !important;
}

/* (8) Image-Slot Initialen-Fallback (falls Bild nicht geladen) */
.lumamed-landing image-slot::part(empty) {
  background: linear-gradient(135deg, #fef1e6, #fde0c8) !important;
  font-size: 42px !important;
  font-weight: 600 !important;
  color: #062b51 !important;
  letter-spacing: 1px !important;
}

/* (9) NEU v1.0.7: Frame 3 (Wer/Für Menschen) auf 50/50 statt 1/3 2/3 */
.lumamed-landing .wer .page-inner,
.lumamed-landing .wer-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(32px, 4vw, 64px) !important;
  align-items: center !important;
}
.lumamed-landing .wer .media-frame img,
.lumamed-landing .wer .media-frame {
  width: 100% !important;
  height: auto !important;
  max-height: 600px !important;
  object-fit: cover !important;
}

/* (10) Mobile-Responsive < 900px */
@media (max-width: 900px) {
  .lumamed-landing .hero > .page-inner,
  .lumamed-landing .silos > .page-inner,
  .lumamed-landing .wer .page-inner,
  .lumamed-landing .wer-grid,
  .lumamed-landing .experts .page-inner,
  .lumamed-landing .usps .page-inner,
  .lumamed-landing .service .service-body,
  .lumamed-landing .silos-problems {
    grid-template-columns: 1fr !important;
  }
  .lumamed-landing .experts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .lumamed-landing .hero h1 {
    font-size: clamp(28px, 7vw, 42px) !important;
  }
  .lumamed-landing h2 {
    font-size: clamp(24px, 5vw, 36px) !important;
  }
  .lumamed-landing .hero-actions {
    grid-template-columns: 1fr !important;
  }
  .lumamed-landing image-slot::part(empty) {
    font-size: 32px !important;
  }
}

/* (11) Tablet 901-1180px */
@media (min-width: 901px) and (max-width: 1180px) {
  .lumamed-landing .hero h1 {
    font-size: clamp(40px, 4.5vw, 56px) !important;
  }
  .lumamed-landing .experts-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
/* ============================================================================
   LumaMed Landing v1.0.8 Patch
   - Frame 2 (Silos): 50/50 Grid, Bild rechts, Text mit Luft links
   - Frame 6 (USPs): Carousel Grid mit absoluten Slides (Hoehensync per JS)
   - Frame 7 (Stories): Jahre linksbuendig auf gleicher x-Position
   ============================================================================ */

/* ---------- Frame 2: Silos 50/50 ---------- */
.lumamed-landing .silos > .page-inner,
.lumamed-landing[data-silos="problems-left"] .silos > .page-inner,
body[data-silos="problems-left"] .silos > .page-inner {
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(32px, 4vw, 64px) !important;
  align-items: center !important;
}

/* ---------- Frame 6: USPs Carousel Layout ---------- */
.lumamed-landing .usps-body {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(32px, 4vw, 64px) !important;
  align-items: start !important;
}

.lumamed-landing .usps .carousel {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
}

.lumamed-landing .usps .carousel-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.lumamed-landing .usps .carousel-slide image-slot,
.lumamed-landing .usps .carousel-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.lumamed-landing .usps .carousel-arrow svg,
.lumamed-landing .usps .carousel-prev svg,
.lumamed-landing .usps .carousel-next svg {
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
}

/* ---------- Frame 7: Stories - Jahre linksbuendig ---------- */
.lumamed-landing .stories .dd summary {
  display: flex !important;
  align-items: center !important;
  gap: clamp(16px, 2vw, 32px) !important;
}

.lumamed-landing .stories .dd-title {
  display: block !important;
  font-size: 22px !important;
  flex: 1 1 auto !important;
}

.lumamed-landing .stories .dd-cat {
  display: inline-block !important;
  min-width: 200px !important;
  text-align: left !important;
}

.lumamed-landing .stories .dd-ix {
  flex: 0 0 auto !important;
}

.lumamed-landing .stories .dd-toggle {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

/* ---------- Mobile Fallback (<= 900px) ---------- */
@media (max-width: 900px) {
  .lumamed-landing .silos > .page-inner,
  .lumamed-landing[data-silos="problems-left"] .silos > .page-inner,
  body[data-silos="problems-left"] .silos > .page-inner {
    grid-template-columns: 1fr !important;
  }

  .lumamed-landing .usps-body {
    grid-template-columns: 1fr !important;
  }

  .lumamed-landing .usps .carousel {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    max-height: none !important;
  }

  .lumamed-landing .stories .dd-cat {
    min-width: 120px !important;
  }

  .lumamed-landing .stories .dd-title {
    font-size: 18px !important;
  }
}
/* ============================================================================
   LumaMed Landing v1.0.9 Mobile-Patch
   - Hero: page-inner grid minmax-protection, hero-actions vertical stack
   - Silos: single column on mobile
   - Steps: single column (step-media hidden) — fixes 10,000px broken layout
   - Experts: role/name font-size bumped for mobile readability
   - Section padding compacted on mobile
   ============================================================================ */

@media (max-width: 900px) {

  /* ---------- Hero ---------- */
  .lumamed-landing .hero > .page-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }

  .lumamed-landing .hero-actions {
    grid-template-columns: 1fr !important;
    grid-template-areas: "meta" "cta" "trust" !important;
    justify-items: center !important;
    gap: 20px 0 !important;
  }

  .lumamed-landing .hero-trust,
  .lumamed-landing .hero-trust-text {
    white-space: normal !important;
    justify-self: center !important;
  }

  /* ---------- Silos ---------- */
  .lumamed-landing .silos > .page-inner {
    grid-template-columns: 1fr !important;
  }

  /* ---------- Steps (CRITICAL FIX) ---------- */
  .lumamed-landing .step {
    grid-template-columns: 1fr !important;
    grid-template-areas: "num" "body" !important;
    gap: 12px !important;
  }

  .lumamed-landing .step-num {
    grid-area: num !important;
  }

  .lumamed-landing .step-body {
    grid-area: body !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ---------- Experts ---------- */
  .lumamed-landing .expert-role,
  .lumamed-landing [class*="expert-role"] {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .lumamed-landing .expert-name,
  .lumamed-landing [class*="expert-name"] {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  /* ---------- Section padding compactation ---------- */
  .lumamed-landing .hero,
  .lumamed-landing .silos,
  .lumamed-landing .wer,
  .lumamed-landing .steps,
  .lumamed-landing .experts,
  .lumamed-landing .usps,
  .lumamed-landing .stories,
  .lumamed-landing .service,
  .lumamed-landing .faq {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}
/* ============================================================================
   LumaMed Landing v1.1.0 Mobile-Polish
   - Bumps small labels (section-tag, hero-kicker, step-meta) to 12px
   - Touch targets: carousel-dots 44x44, cta-link/hero-meta-link 44px+
   - hero-trust-text adequate tap area
   - Foot/mono-label 12px
   ============================================================================ */

@media (max-width: 900px) {

  /* ---------- Small label legibility (>= 12px) ---------- */
  .lumamed-landing .hero-kicker,
  .lumamed-landing .section-tag {
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
  }

  .lumamed-landing .step-meta {
    font-size: 12px !important;
  }

  .lumamed-landing .hero-trust-text-label {
    font-size: 13px !important;
  }

  .lumamed-landing .mono-label,
  .lumamed-landing .foot-right {
    font-size: 12px !important;
  }

  /* ---------- Touch targets >= 44x44 ---------- */
  .lumamed-landing .carousel-dot,
  .lumamed-landing .usps .carousel-dot {
    width: 14px !important;
    height: 14px !important;
    padding: 15px !important;
    box-sizing: content-box !important;
    background-clip: content-box !important;
  }
  /* The active-dot colour rule elsewhere uses the `background` shorthand, which
     resets background-clip to border-box — that made the active dot fill the
     whole 44px tap area (a giant dark circle) while the inactive dots stayed
     small. Re-clip it to the 14px content box so the active indicator is the
     same size as the others, just dark blue. */
  .lumamed-landing .carousel-dot[data-active="true"],
  .lumamed-landing .carousel-dot.active {
    background-clip: content-box !important;
  }

  .lumamed-landing .cta-link {
    padding: 12px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }

  .lumamed-landing .hero-meta--link,
  .lumamed-landing .hero-meta.hero-meta--link {
    padding: 12px 8px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .lumamed-landing .hero-trust-text {
    padding: 10px 0 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
}
/* ============================================================================
   LumaMed Landing v1.1.5 Mobile-Polish + Desktop-Story-Fix
   - Hide silos-problems on mobile (only the man-bridge needed)
   - Hide bridge 2 (frame3.webp), keep bridge 1 (man) + bridge 3 (video)
   - Steps: number inline with body (num body grid)
   - USPs: hide carousel-dots, toggles-first/carousel-below order
   - Service: toggles-first/price-CTA-below order
   - Stories body: aligned with title via margin-left on mobile
   - Experts: name min-height to align role text across 2-line names
   - Desktop: Stories body alignment fix (105px padding-left)
   ============================================================================ */

@media (max-width: 900px) {
  /* Hide hero animation on mobile */
  .lumamed-landing .hero .hero-media { display: none !important; }

  /* Hide desktop silos cards on mobile (man-bridge replaces) */
  .lumamed-landing .silos-problems { display: none !important; }

  /* Hide bridge 2 (frame3.webp); keep bridge 1 (man) and bridge 3 (video) */
  .lumamed-landing .mobile-image-bridge[data-screen-label="02b Bild"] {
    display: none !important;
  }

  /* Steps: number inline with body */
  .lumamed-landing .step {
    grid-template-columns: auto 1fr !important;
    grid-template-areas: "num body" !important;
    column-gap: 16px !important;
    align-items: start !important;
  }
  .lumamed-landing .step-num {
    grid-area: num !important;
    font-size: 20px !important;
    align-self: start !important;
    min-width: 24px !important;
  }
  .lumamed-landing .step-body {
    grid-area: body !important;
    min-width: 0 !important;
  }

  /* USPs: hide dots, toggles first, carousel below */
  .lumamed-landing .usps .carousel-dots { display: none !important; }
  .lumamed-landing .usps-body {
    display: flex !important;
    flex-direction: column !important;
  }
  .lumamed-landing .usps-body .dd-list { order: 1 !important; }
  .lumamed-landing .usps-body .usps-side,
  .lumamed-landing .usps-body .carousel {
    order: 2 !important;
    margin-top: 32px !important;
  }

  /* Service: toggles first, price/CTA below */
  .lumamed-landing .service-body {
    display: flex !important;
    flex-direction: column !important;
  }
  .lumamed-landing .service-list { order: 1 !important; }
  .lumamed-landing .service-side {
    order: 2 !important;
    margin-top: 32px !important;
  }

  /* Stories body aligned with title */
  .lumamed-landing .stories .dd-body {
    padding-left: 0 !important;
    margin-left: 30px !important;
  }

  /* Experts name min-height so role aligns across rows */
  .lumamed-landing .expert-name {
    min-height: 2.6em !important;
    display: flex !important;
    align-items: flex-start !important;
  }
}

@media (min-width: 901px) {
  /* Desktop: align stories body with title (different from FAQ/Service) */
  .lumamed-landing .stories .dd-body {
    padding-left: 105px !important;
  }
}

/* ============================================================================
   LumaMed Landing v1.1.5 Patch
   - Frame 2 Spacing: only column-gap, no row-gap (was breaking desktop spacing)
   - Mobile: bring back bridge 2 (frame3.webp) — only video was meant to be hidden
   - Mobile: video bridge cream background (cover page gradient bleeding)
   - Mobile: tighten silos tag/title spacing
   - Fullscreen carousel overlay for USPs (click slide to open)
   ============================================================================ */

/* Frame 2 / Silos: only horizontal gap, no vertical */
.lumamed-landing .silos > .page-inner,
.lumamed-landing[data-silos="problems-left"] .silos > .page-inner,
body[data-silos="problems-left"] .silos > .page-inner {
  column-gap: clamp(32px, 4vw, 64px) !important;
  row-gap: 0 !important;
  gap: 0 clamp(32px, 4vw, 64px) !important;
}

@media (max-width: 900px) {
  /* Bring back bridge 2 (frame3.webp) — only video was supposed to be hidden */
  .lumamed-landing .mobile-image-bridge[data-screen-label="02b Bild"] {
    display: block !important;
  }

  /* Video bridge: solid cream background covers page gradient on sides */
  .lumamed-landing .mobile-image-bridge--video {
    background: var(--lm-creme, #fffaf4) !important;
  }
  .lumamed-landing .mobile-image-bridge--video .page-inner {
    background: var(--lm-creme, #fffaf4) !important;
  }
  .lumamed-landing .mobile-image-bridge--video video {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  .lumamed-landing .mobile-image-bridge--video::before,
  .lumamed-landing .mobile-image-bridge--video::after {
    background: var(--lm-creme, #fffaf4) !important;
  }

  /* Silos: tighten tag-title-lead spacing */
  .lumamed-landing .silos .section-tag {
    margin-bottom: 12px !important;
  }
  .lumamed-landing .silos-title {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
}

/* ============================================================================
   Fullscreen carousel overlay for USPs (Frame 6 between Frame 6 & 7)
   ============================================================================ */
.lumamed-landing .usps .carousel-slide {
  cursor: zoom-in;
}

.lumamed-fullscreen-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

.lm-fs-img {
  max-width: 92vw;
  max-height: 85vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.lm-fs-close, .lm-fs-prev, .lm-fs-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  cursor: pointer;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 32px;
  line-height: 1;
  transition: background 0.2s;
  z-index: 2;
  padding: 0;
}

.lm-fs-close:hover, .lm-fs-prev:hover, .lm-fs-next:hover,
.lm-fs-close:focus, .lm-fs-prev:focus, .lm-fs-next:focus {
  background: rgba(255, 255, 255, 0.22);
  outline: none;
}

.lm-fs-close { top: 20px; right: 20px; font-size: 28px; }
.lm-fs-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lm-fs-next { right: 20px; top: 50%; transform: translateY(-50%); }

.lm-fs-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.55);
  padding: 8px 16px;
  border-radius: 20px;
  letter-spacing: 0.04em;
}

@media (max-width: 600px) {
  .lm-fs-close { top: 16px; right: 16px; width: 48px; height: 48px; font-size: 24px; }
  .lm-fs-prev { left: 8px; width: 48px; height: 48px; }
  .lm-fs-next { right: 8px; width: 48px; height: 48px; }
  .lm-fs-img { max-width: 96vw; }
}

/* ============================================================================
   v2.1.0 PATCHES — Sept 2026
   - FOUC fix: critical hide-until-loaded
   - Frame 7 Stories: 50/50 layout with woman image
   - Frame 8 Service: 50/50 (was 1fr 1.5fr)
   - Frame 6 USPs carousel: fixed width (no growth on toggle open)
   - Fullscreen carousel: white slide bg
   - Reviews section styling
   ============================================================================ */

/* --- FOUC: hide wrapper until styles ready, then fade in --- */
.lumamed-landing:not(.lm-ready) {
  visibility: hidden !important;
}
.lumamed-landing.lm-ready {
  visibility: visible;
  animation: lm-fade-in 0.3s ease-out;
}
@keyframes lm-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Frame 7 Stories: 50/50 layout (woman image left, content right) --- */
.lumamed-landing .stories .page-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: clamp(32px, 4vw, 64px) !important;
  align-items: center !important;
}
.lumamed-landing .stories-media {
  display: flex;
  justify-content: center;
  align-items: center;
}
.lumamed-landing .stories-media img {
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
}
.lumamed-landing .stories-content {
  min-width: 0;
}

/* --- Frame 8 Service: 50/50 split (was 1fr 1.5fr) --- */
body[data-service="rail"] .service-body,
.lumamed-landing[data-service="rail"] .service-body,
.lumamed-landing .service-body {
  grid-template-columns: 1fr 1fr !important;
}

/* --- Frame 6 USPs: fix carousel width so it does NOT grow when toggles open --- */
.lumamed-landing .usps-body {
  align-items: start !important;
}
.lumamed-landing .usps .carousel,
.lumamed-landing .usps-side {
  /* Fix width via max-width and aspect-ratio. dd-list can grow vertically, carousel stays put */
  width: 100% !important;
  align-self: start !important;
  position: sticky !important;
  top: 24px !important;
}
.lumamed-landing .usps .carousel-slide {
  /* Lock aspect ratio so carousel never grows in height with dd-list */
  position: absolute !important;
  inset: 0 !important;
}
.lumamed-landing .usps .carousel {
  /* Lock height to a sensible max — no growth from outside */
  aspect-ratio: 4 / 5 !important;
  max-height: 700px !important;
  height: auto !important;
}

/* --- Fullscreen carousel: ensure cream/white slide bg --- */
.lumamed-fullscreen-overlay {
  background: rgba(0, 0, 0, 0.92) !important;
}
.lm-fs-img {
  background: #fffaf4 !important;  /* same creme as page */
  padding: 8px !important;
  border-radius: 6px !important;
}

/* --- Reviews section (before FAQ) --- */
.lumamed-landing .reviews {
  padding-top: 96px;
  padding-bottom: 96px;
  position: relative;
}
.lumamed-landing .reviews .reviews-title {
  margin-bottom: 16px;
}
.lumamed-landing .reviews .reviews-lead {
  margin-bottom: 48px;
  max-width: 720px;
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--lm-ink-soft, #4b5b6a);
}
.lumamed-landing .reviews-widget {
  min-height: 200px;
}
html { scroll-behavior: smooth; }

/* --- Frame 7 Stories non-breakable "Jahre" — handled via JS but enforce with nowrap fallback --- */
.lumamed-landing .stories .dd-cat-years {
  white-space: nowrap;
}

/* --- Mobile (<= 900px) --- */
@media (max-width: 900px) {
  /* Stories: stack column on mobile */
  .lumamed-landing .stories .page-inner {
    grid-template-columns: 1fr !important;
    row-gap: 32px !important;
  }
  .lumamed-landing .stories-media {
    order: 2;
  }
  .lumamed-landing .stories-content {
    order: 1;
  }
  .lumamed-landing .stories-media img {
    max-width: 320px;
  }
  
  /* Service: already stacked on mobile via existing rules */
  
  /* USPs: no sticky, no aspect lock on mobile */
  .lumamed-landing .usps .carousel,
  .lumamed-landing .usps-side {
    position: static !important;
  }
  .lumamed-landing .usps .carousel {
    aspect-ratio: 4 / 3 !important;
  }
  
  /* Reviews: less padding */
  .lumamed-landing .reviews {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* ============================================================================
   v2.1.1 PATCHES — Mobile polish
   ============================================================================ */

/* (1) Mobile: ensure no widget overflows viewport horizontally */
@media (max-width: 900px) {
  .lumamed-landing,
  .lumamed-landing img,
  .lumamed-landing video,
  .lumamed-landing svg,
  .lumamed-landing canvas,
  .lumamed-landing image-slot {
    max-width: 100% !important;
  }
  .lumamed-landing .page-inner,
  .lumamed-landing .usps .carousel,
  .lumamed-landing .usps-side,
  .lumamed-landing .carousel-slide {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .lumamed-landing .usps .carousel {
    overflow: hidden !important;
  }
  /* Carousel slide images: never overflow */
  .lumamed-landing .carousel-slide img,
  .lumamed-landing .carousel-slide image-slot {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
  }
}

/* (2) Mobile hero-actions: tight spacing, all left-aligned */
@media (max-width: 900px) {
  .lumamed-landing .hero-actions {
    grid-template-areas: "meta" "cta" "trust" !important;
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    text-align: left !important;
    gap: 8px 0 !important;
    margin-top: 16px !important;
  }
  .lumamed-landing .hero-actions .hero-meta,
  .lumamed-landing .hero-actions .hero-meta--link,
  .lumamed-landing .hero-actions .cta,
  .lumamed-landing .hero-actions .hero-trust,
  .lumamed-landing .hero-actions .hero-trust-text {
    justify-self: start !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .lumamed-landing .hero-actions .hero-meta,
  .lumamed-landing .hero-actions .hero-meta--link {
    padding: 4px 0 !important;
    min-height: 24px !important;
  }
  .lumamed-landing .hero-actions .hero-trust,
  .lumamed-landing .hero-actions .hero-trust-text {
    padding: 4px 0 !important;
    min-height: 24px !important;
    margin-top: 4px !important;
  }
  .lumamed-landing .hero-actions .cta {
    margin-top: 16px !important;
    align-self: start !important;
  }
}

/* (4) Frame 4 Steps: smooth gradient transition (no hard line) */
.lumamed-landing .steps {
  background: transparent !important;
}
.lumamed-landing .steps .page-inner {
  background: transparent !important;
}
.lumamed-landing .steps,
.lumamed-landing .experts,
.lumamed-landing .usps,
.lumamed-landing .stories {
  position: relative;
  z-index: 1;
}
/* Smooth out section transitions — remove any sharp ::before/::after that might cause lines */
@media (max-width: 900px) {
  .lumamed-landing section {
    background-color: transparent !important;
  }
}

/* (5) Frame 7 Stories: woman sticky on scroll */
@media (min-width: 901px) {
  .lumamed-landing .stories-media {
    position: sticky !important;
    top: 80px !important;
    align-self: start !important;
    transition: top 0.3s ease-out;
  }
  .lumamed-landing .stories .page-inner {
    align-items: start !important;
  }
}

/* (6) Reviews: less margin between title and lead (since lead is shorter now) */
.lumamed-landing .reviews .reviews-lead {
  margin-bottom: 32px;
}

/* ============================================================================
   v2.1.2 PATCHES
   - USPs grid forced 50/50 — no growth from open toggles
   - Restore body bg gradient (don't let inline FOUC fix override it)
   ============================================================================ */

/* USPs body — FORCE 50/50 on desktop, no auto-fit */
@media (min-width: 901px) {
  .lumamed-landing .usps-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: clamp(32px, 4vw, 64px) !important;
    align-items: start !important;
  }
  /* Right column: carousel locked to its aspect ratio, never wider than its 50% column */
  .lumamed-landing .usps .carousel,
  .lumamed-landing .usps-side {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    position: sticky !important;
    top: 80px !important;
    align-self: start !important;
  }
}

/* The body background gradient must stay (don't clobber it with the FOUC color override) */
body {
  /* Restore the radial-gradient set in the main CSS */
  background-color: var(--lm-creme, #fffaf4);
}

/* ============================================================================
   v2.1.3 PATCHES
   - Frame 7: Frau-Unterkante auf dd-list-Unterkante alignen (Desktop)
   ============================================================================ */

@media (min-width: 901px) {
  /* Page-inner: stretch columns to equal height — beide Spalten enden auf derselben Hoehe */
  .lumamed-landing .stories .page-inner {
    align-items: stretch !important;
  }

  /* stories-media: container fills column height, image absolute bottom-anchored */
  .lumamed-landing .stories-media {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    /* Remove sticky from v2.1.1 - conflicts with bottom-align constraint */
    top: auto !important;
  }

  .lumamed-landing .stories-media img {
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

/* ============================================================================
   v2.1.4 PATCHES
   - USPs carousel: FORCE fixed right-column width — no growth from toggles
   - Frame 2 Silos: 50/50 layout with toggles left, larger image right
   ============================================================================ */

/* --- USPs: fixed-width right column on desktop --- */
@media (min-width: 901px) {
  .lumamed-landing .usps-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 500px !important;
    gap: clamp(32px, 4vw, 64px) !important;
    align-items: start !important;
  }
  .lumamed-landing .usps .carousel,
  .lumamed-landing .usps-side {
    width: 500px !important;
    max-width: 500px !important;
    height: 625px !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    position: relative !important;
    /* No sticky here — fixed position simpler */
  }
  .lumamed-landing .usps .carousel-slide {
    position: absolute !important;
    inset: 0 !important;
  }
}

/* --- Frame 2 Silos: 50/50 with content left, image right --- */
@media (min-width: 901px) {
  .lumamed-landing .silos > .page-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "content media" !important;
    column-gap: clamp(32px, 4vw, 64px) !important;
    row-gap: 0 !important;
    align-items: stretch !important;
  }
  .lumamed-landing .silos-content {
    grid-area: content !important;
  }
  .lumamed-landing .silos-media {
    grid-area: media !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .lumamed-landing .silos-media img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
  /* Silos-content typography & spacing */
  .lumamed-landing .silos-header { margin-bottom: 24px !important; }
  .lumamed-landing .silos-lead { margin-bottom: 32px !important; }

  /* Hide the old silos-grid wrappers (legacy from non-restructured layout) */
  .lumamed-landing .silos-grid,
  .lumamed-landing .silos-problems {
    display: none !important;
  }
  /* But show the new silos-toggles */
  .lumamed-landing .silos-toggles {
    display: block !important;
  }
}

/* Mobile: silos stacks; content first then image */
@media (max-width: 900px) {
  .lumamed-landing .silos > .page-inner {
    display: block !important;
  }
  /* On mobile keep mobile-image-bridge as the visual, so hide silos-media inline image */
  .lumamed-landing .silos-media {
    display: none !important;
  }
  /* Silos-toggles look like regular toggles on mobile */
  .lumamed-landing .silos-toggles {
    display: block !important;
  }
}

/* Silos-toggles inherit dd styling — small overrides for context */
.lumamed-landing .silos-toggles .dd summary {
  cursor: pointer;
}

/* ============================================================================
   v2.1.5 PATCHES
   - USPs carousel: width FIXED 500px, height STRETCHES to dd-list height
   - Top edge = first toggle top, bottom edge = last toggle bottom
   ============================================================================ */
@media (min-width: 901px) {
  .lumamed-landing .usps-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 500px !important;
    gap: clamp(32px, 4vw, 64px) !important;
    align-items: stretch !important;
  }
  .lumamed-landing .usps-side,
  .lumamed-landing .usps .carousel {
    width: 500px !important;
    max-width: 500px !important;
    /* Override v2.1.4 fixed height + aspect-ratio */
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    position: relative !important;
    align-self: stretch !important;
  }
  /* Slides absolute-positioned inside the stretched container */
  .lumamed-landing .usps .carousel-slide {
    position: absolute !important;
    inset: 0 !important;
  }
  .lumamed-landing .usps .carousel-slide img,
  .lumamed-landing .usps .carousel-slide image-slot {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* ============================================================================
   v2.1.6 PATCH — fix USPs carousel collapsing
   ============================================================================ */
@media (min-width: 901px) {
  /* usps-side is the grid item — it stretches via align-self: stretch */
  .lumamed-landing .usps-side {
    width: 500px !important;
    max-width: 500px !important;
    height: auto !important;          /* let grid stretch */
    aspect-ratio: auto !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }
  /* Carousel inside usps-side must fill its parent's stretched height */
  .lumamed-landing .usps .carousel {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .lumamed-landing .usps .carousel-slide {
    position: absolute !important;
    inset: 0 !important;
  }
  .lumamed-landing .usps .carousel-slide img,
  .lumamed-landing .usps .carousel-slide image-slot {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ============================================================================
   v2.1.8 PATCH — kill leftover position offset on usps-side
   v2.1.2 had `top: 80px !important` for sticky; sticky was removed but
   top remained, shifting the right column 80px down.
   ============================================================================ */
@media (min-width: 901px) {
  .lumamed-landing .usps-side {
    /* Clear any leftover position offsets */
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    inset: auto !important;
    /* Re-state the stretch behavior */
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    height: auto !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }
  .lumamed-landing .usps .carousel {
    flex: 1 1 auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
  }
}

/* ============================================================================
   v2.2.0 PATCH — Stories-Frau sticky wiederherstellen
   ============================================================================ */
@media (min-width: 901px) {
  .lumamed-landing .stories .page-inner {
    align-items: start !important;  /* allow sticky in right column */
  }
  .lumamed-landing .stories-media {
    position: sticky !important;
    top: 80px !important;
    align-self: start !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    /* Clear any leftover from v2.1.3 */
    display: block !important;
  }
  .lumamed-landing .stories-media img {
    /* Override v2.1.3 absolute positioning so image flows normally */
    position: static !important;
    transform: none !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }
}

/* ============================================================================
   v2.2.1 PATCH — Mobile Hero: CTA padding restoration + tighter trust spacing
   - CTA had padding-left/right: 0 (killed internal padding), restore proper button padding
   - Gap between 89€ and ★★★★★ stars: reduce to one line
   ============================================================================ */
@media (max-width: 900px) {
  /* Override the v2.1.1 bulk rule that nullified CTA padding */
  .lumamed-landing .hero-actions .cta,
  .lumamed-landing .hero-actions a.cta.cta-primary {
    padding: 14px 28px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    margin: 16px 0 0 !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    align-self: start !important;
    justify-self: start !important;
  }

  /* Tighten the gap between 89€ row and stars/trust row */
  .lumamed-landing .hero-actions {
    gap: 4px 0 !important;
  }
  .lumamed-landing .hero-actions .hero-meta,
  .lumamed-landing .hero-actions .hero-meta--link {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 20px !important;
    margin: 0 !important;
  }
  .lumamed-landing .hero-actions .hero-trust,
  .lumamed-landing .hero-actions .hero-trust-text {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    min-height: 20px !important;
  }
}

/* ============================================================================
   v2.2.2 PATCH — Stories Frau Bottom-Align (sticky entfernt)
   - v2.2.0 hatte sticky aktiviert für "Frau folgt scroll" — aber dadurch
     ging bottom-align verloren
   - Jetzt: bottom-align prioritisieren wie v2.1.3; bei Toggle-Open bleibt
     Frau bottom-aligned, was bedeutet sie ist im unteren Teil des row
     immer noch sichtbar
   ============================================================================ */
@media (min-width: 901px) {
  .lumamed-landing .stories .page-inner {
    align-items: stretch !important;
  }
  .lumamed-landing .stories-media {
    /* Override v2.2.0 sticky */
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
    align-self: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }
  .lumamed-landing .stories-media img {
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

/* ============================================================================
   v2.2.3 PATCH — Frame 2 Silos: Mann bottom-aligned + 3 Toggles horizontal
   ============================================================================ */
@media (min-width: 901px) {
  .lumamed-landing .silos > .page-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "content media"
      "toggles toggles" !important;
    grid-template-rows: auto auto !important;
    column-gap: clamp(32px, 4vw, 64px) !important;
    row-gap: 32px !important;
    align-items: end !important;  /* bottom-align row 1 contents */
  }
  .lumamed-landing .silos-content {
    grid-area: content !important;
    align-self: end !important;  /* bottom of text aligned to row bottom */
  }
  .lumamed-landing .silos-media {
    grid-area: media !important;
    align-self: end !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
  }
  .lumamed-landing .silos-media img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
  /* Toggles row: 3 toggles horizontal, full width */
  .lumamed-landing .silos-toggles {
    grid-area: toggles !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: clamp(16px, 2vw, 24px) !important;
    margin-top: 32px !important;
  }
  .lumamed-landing .silos-toggles .dd {
    /* Each toggle gets its own column slot */
    border-top: 1px solid var(--hairline, rgba(0,0,0,0.12)) !important;
    border-bottom: 1px solid var(--hairline, rgba(0,0,0,0.12)) !important;
  }
  /* Hide old (legacy) silos-grid/problems on desktop */
  .lumamed-landing .silos-grid,
  .lumamed-landing .silos-problems {
    display: none !important;
  }
}

/* Mobile: stack everything */
@media (max-width: 900px) {
  .lumamed-landing .silos > .page-inner {
    display: block !important;
  }
  .lumamed-landing .silos-media {
    display: none !important;
  }
  /* Mobile toggles single column, like before */
  .lumamed-landing .silos-toggles {
    display: block !important;
    margin-top: 24px !important;
  }
  .lumamed-landing .silos-toggles .dd {
    display: block !important;
  }
}

/* ============================================================================
   v2.2.4 PATCH — Frame 2 Toggles refinements
   - Borders top + bottom same thickness on each toggle (no parent dd-list border)
   - Real visual gap between toggles (grid gap + per-toggle borders)
   - align-items: start so opening one doesn't stretch the others
   ============================================================================ */
@media (min-width: 901px) {
  .lumamed-landing .silos-toggles {
    align-items: start !important;  /* each col expands to its own content height */
  }
  /* Remove any parent border that creates a "connected" top line */
  .lumamed-landing .silos-toggles {
    border-top: none !important;
    border-bottom: none !important;
  }
  /* Each toggle has identical 1px borders top + bottom */
  .lumamed-landing .silos-toggles .dd {
    border-top: 1px solid var(--hairline, rgba(0,0,0,0.12)) !important;
    border-bottom: 1px solid var(--hairline, rgba(0,0,0,0.12)) !important;
    border-left: none !important;
    border-right: none !important;
    /* When a toggle is open in this row, it expands its own column only */
    align-self: start !important;
  }
  /* Hidden content collapses to 0 height by default for <details> */
}

/* ============================================================================
   v2.2.5 PATCH — Frau sticky-bottom, capped at toggle-bottom
   - align-items: end → row 1 bottom-aligned (Frau bottom = lead-text bottom for stories)
   - position: sticky; bottom: 24px → folgt scroll, kann nicht UNTER Frau-Natural-Position
   - max-height vw-capped damit Image im viewport bleibt
   ============================================================================ */
@media (min-width: 901px) {
  .lumamed-landing .stories .page-inner {
    align-items: end !important;  /* bottom-align grid row */
  }
  .lumamed-landing .stories-media {
    /* Override v2.2.2 (position: relative; align-self: stretch) */
    position: sticky !important;
    bottom: 24px !important;
    top: auto !important;
    align-self: end !important;
    width: 100% !important;
    height: fit-content !important;
    max-height: calc(100vh - 120px) !important;
    overflow: hidden !important;
    display: block !important;
  }
  .lumamed-landing .stories-media img {
    /* Override v2.2.2 (position: absolute) — sticky positioning on the wrapper handles this */
    position: static !important;
    transform: none !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    margin: 0 auto !important;
  }
}

/* ============================================================================
   v2.2.6 PATCH — Frame 2 Toggles refinements (Desktop)
   - dd-ix (01/02/03) MUCH bigger + clay accent color
   - Gap between ix and title halved → more space for title
   - Title wraps less, body text has more room
   ============================================================================ */
@media (min-width: 901px) {
  .lumamed-landing .silos-toggles .dd summary {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;  /* was clamp(16,2vw,32) — now half */
    padding: 18px 12px !important;
  }
  .lumamed-landing .silos-toggles .dd-ix {
    font-family: var(--font-mono, monospace) !important;
    font-size: 36px !important;  /* much bigger */
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    color: var(--lm-clay, #D37D62) !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
  }
  .lumamed-landing .silos-toggles .dd-title {
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    flex: 1 1 auto !important;
    color: var(--lm-dark-blue, #062B51) !important;
  }
  .lumamed-landing .silos-toggles .dd-toggle {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  .lumamed-landing .silos-toggles .dd-body {
    padding: 0 12px 18px 60px !important;  /* indented to align under title, not under number */
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================================
   v2.2.7 PATCH — Frame 2 Mann groesser (Desktop)
   - Bild ueberlaeuft die rechte Spalte nach links und nach oben
   - Bottom-right bleibt fixiert (kein Layout-Sprung)
   ============================================================================ */
@media (min-width: 901px) {
  .lumamed-landing .silos > .page-inner {
    overflow: visible !important;
  }
  .lumamed-landing .silos-media {
    overflow: visible !important;
    position: relative !important;
  }
  .lumamed-landing .silos-media img {
    width: 120% !important;
    max-width: none !important;
    margin-left: -20% !important;
    margin-top: -10% !important;
    object-fit: contain !important;
    object-position: bottom right !important;
  }
}

/* ============================================================================
   v2.2.8 PATCH — Frame 2 Text rechts ~5% einrücken
   - Texte (Titel + Lead) sollen nicht ganz bis zum Bild reichen
   ============================================================================ */
@media (min-width: 901px) {
  .lumamed-landing .silos-content {
    padding-right: 5% !important;
  }
}

/* ============================================================================
   v2.3.0 PATCHES
   1. Frame 6 USPs Mobile: position relative on carousel + reduce 50% height
   2. Frame 7 Stories Mobile: title → media → toggles order
   3. Frame 7 Stories Desktop: title width allows 3 lines, woman JS-sticky with cap
   4. Gradient continuity on Mobile
   ============================================================================ */

/* (1) USPs Mobile: fix carousel sizing — carousel must be position:relative so
       slide/track size to it correctly; reduce height by ~50% */
@media (max-width: 900px) {
  .lumamed-landing .usps .carousel {
    position: relative !important;
    aspect-ratio: 16 / 9 !important;  /* shorter than 4/3 */
    max-height: 240px !important;
    overflow: hidden !important;
  }
  .lumamed-landing .usps .carousel-track {
    position: absolute !important;
    inset: 0 !important;
  }
  .lumamed-landing .usps .carousel-slide {
    position: absolute !important;
    inset: 0 !important;
  }
  .lumamed-landing .usps .carousel-slide img,
  .lumamed-landing .usps .carousel-slide image-slot {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;  /* contain so text not cut */
    object-position: center !important;
    background: var(--lm-creme, #fffaf4) !important;
    padding: 0 !important;
  }
}

/* (2) Frame 7 Stories Mobile: order — title-block → media → toggles-block */
@media (max-width: 900px) {
  .lumamed-landing .stories .page-inner {
    display: flex !important;
    flex-direction: column !important;
  }
  .lumamed-landing .stories-content {
    display: flex !important;
    flex-direction: column !important;
  }
  .lumamed-landing .stories-title-block { order: 1 !important; }
  .lumamed-landing .stories-media {
    order: 2 !important;
    margin: 24px 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  .lumamed-landing .stories-content {
    order: 3 !important;  /* not in same flex layer, but ok */
  }
  .lumamed-landing .stories-toggles-block { order: 3 !important; }
  /* But stories-media is sibling of stories-content; need them at right order */
  /* Need to switch: page-inner is the flex container with stories-content + stories-media */
}

/* Need stories-content NOT contain media. Use grid on page-inner with explicit order */
@media (max-width: 900px) {
  .lumamed-landing .stories .page-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "media"
      "toggles" !important;
    row-gap: 24px !important;
  }
  .lumamed-landing .stories-content {
    display: contents !important;  /* let title-block + toggles-block participate in grid */
  }
  .lumamed-landing .stories-title-block { grid-area: title !important; }
  .lumamed-landing .stories-media {
    grid-area: media !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
  }
  .lumamed-landing .stories-media img {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .lumamed-landing .stories-toggles-block { grid-area: toggles !important; }
}

/* (3a) Frame 7 Stories Desktop: title 3 lines — limit title width */
@media (min-width: 901px) {
  .lumamed-landing .stories-title-block h2,
  .lumamed-landing .stories-content h2 {
    max-width: 400px !important;  /* forces wrap to ~3 lines */
  }
}

/* (3b) Frame 7 Stories Desktop: JS-sticky behavior — use position:fixed via JS, 
   fallback CSS sets up position:relative */
@media (min-width: 901px) {
  .lumamed-landing .stories .page-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "title media"
      "toggles media" !important;
    column-gap: clamp(32px, 4vw, 64px) !important;
    align-items: start !important;
  }
  .lumamed-landing .stories-content {
    display: contents !important;
  }
  .lumamed-landing .stories-title-block {
    grid-area: title !important;
  }
  .lumamed-landing .stories-toggles-block {
    grid-area: toggles !important;
  }
  .lumamed-landing .stories-media {
    grid-area: media !important;
    /* No CSS sticky — JS will handle "follow + cap" */
    position: relative !important;
    align-self: start !important;
    overflow: visible !important;
  }
  .lumamed-landing .stories-media img {
    /* JS will set transform: translateY */
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 540px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    will-change: transform !important;
    transition: transform 0.12s ease-out !important;
  }
}

/* (4) Gradient continuity: ensure no section has its own background that would
       interrupt the body radial-gradients */
.lumamed-landing section,
.lumamed-landing .page-inner {
  background: transparent !important;
}
/* Exception: bridge-video keeps its creme bg */
.lumamed-landing .mobile-image-bridge--video,
.lumamed-landing .mobile-image-bridge--video .page-inner {
  background: var(--lm-creme, #fffaf4) !important;
}

/* ============================================================================
   v2.3.1 PATCHES
   - Frame 6 Mobile Carousel: +30% Höhe (max-height 240 → 312)
   - Frame 7 Stories Desktop: Title max-width vergrößert für 3 Zeilen statt 5
   ============================================================================ */
@media (max-width: 900px) {
  .lumamed-landing .usps .carousel {
    max-height: 312px !important;  /* +30% from 240 */
    aspect-ratio: 4 / 3 !important;  /* slightly taller than 16/9 */
  }
}

@media (min-width: 901px) {
  .lumamed-landing .stories-title-block h2,
  .lumamed-landing .stories-content h2 {
    max-width: 600px !important;  /* allow 3 lines instead of 5 */
  }
}

/* ============================================================================
   v2.3.2 PATCH — Mobile Hero CTA → 89€ Abstand vergroessern
   ============================================================================ */
@media (max-width: 900px) {
  .lumamed-landing .hero-actions .cta,
  .lumamed-landing .hero-actions a.cta.cta-primary {
    margin: 16px 0 16px !important;  /* more bottom-margin = mehr Luft zur naechsten Zeile */
  }
  /* Or: bump the gap between cta row and meta row */
  .lumamed-landing .hero-actions .hero-meta,
  .lumamed-landing .hero-actions .hero-meta--link {
    margin-top: 8px !important;
  }
}

/* ============================================================================
   v2.3.3 PATCHES
   - Title 3 lines (max-width 750)
   - Frau bottom-aligned with toggle bottom (align-items: end on stories page-inner)
   - Image-slot visibility fully restored (counter old PHP hide that crept into shadow img)
   ============================================================================ */

/* (1) Force image-slot AND shadow img visible — counter any visibility:hidden inheritance */
.lumamed-landing image-slot,
.lumamed-landing .expert-tile image-slot {
  visibility: visible !important;
}
/* Shadow DOM cannot be styled directly; rely on visibility inheritance + no parent rule */

/* (2) Stories Desktop title — 3 lines, more horizontal space */
@media (min-width: 901px) {
  .lumamed-landing .stories-title-block h2,
  .lumamed-landing .stories-content h2 {
    max-width: 750px !important;
  }
}

/* (3) Frame 7 Desktop: stories grid bottom-aligned, woman bottom-aligned to toggle bottom */
@media (min-width: 901px) {
  .lumamed-landing .stories .page-inner {
    align-items: end !important;
  }
  .lumamed-landing .stories-media {
    align-self: end !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    overflow: visible !important;
  }
  .lumamed-landing .stories-media img {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    display: block !important;
  }
}

/* ============================================================================
   v2.3.4 PATCHES
   - Stories Desktop: wider title column (1.3fr 1fr) for 3-line title
   - Stories Desktop: hardcode dd-body padding-left to bypass flaky JS timing
   ============================================================================ */
@media (min-width: 901px) {
  .lumamed-landing .stories .page-inner {
    grid-template-columns: 1.3fr 1fr !important;
  }
  /* Title wider — allow 3 lines */
  .lumamed-landing .stories-title-block h2,
  .lumamed-landing .stories-content h2 {
    max-width: 1000px !important;
  }
  /* Hardcode body padding to bypass JS race condition.
     Title is offset by dd-ix width + flex gap = ~101px from summary */
  .lumamed-landing .stories .dd-body {
    padding-left: 101px !important;
  }
}

/* ============================================================================
   v2.3.5 PATCH — Fullscreen carousel: bessere Sichtbarkeit Buttons + Close-Animation
   ============================================================================ */

/* Buttons jetzt deutlich sichtbar (rgba 0.35 statt 0.12) */
.lm-fs-close, .lm-fs-prev, .lm-fs-next {
  background: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  width: 56px !important;
  height: 56px !important;
  font-size: 28px !important;
  z-index: 10 !important;
}
.lm-fs-close:hover, .lm-fs-prev:hover, .lm-fs-next:hover {
  background: rgba(255, 255, 255, 0.55) !important;
}

/* Mobile: kleiner aber immer noch sichtbar */
@media (max-width: 600px) {
  .lm-fs-close, .lm-fs-prev, .lm-fs-next {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
  }
  .lm-fs-prev { left: 8px !important; }
  .lm-fs-next { right: 8px !important; }
}

/* Close-Animation: schneller Fade-Out für visuelle Bestätigung */
.lumamed-fullscreen-overlay {
  transition: opacity 0.15s ease-out !important;
}
.lumamed-fullscreen-overlay.lm-fs-closing {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================================
   v2.3.6 PATCH — Frame 2 Silos: kein Text-Bild Overlap bei mittleren Breiten
   Mann-Bild bleibt nur bei breiten Desktops (>=1300px) ausserhalb der Spalte.
   ============================================================================ */
@media (max-width: 1299px) and (min-width: 901px) {
  .lumamed-landing .silos-media img {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
}
/* >=1300px: das v2.2.7 oversize-Verhalten bleibt erhalten */
@media (min-width: 1300px) {
  .lumamed-landing .silos-media img {
    width: 120% !important;
    margin-left: -20% !important;
    margin-top: -10% !important;
  }
}

/* ============================================================================
   v2.3.7 PATCH — Stories: Toggles immer untereinander, 50/50 Layout
   ============================================================================ */
@media (min-width: 901px) {
  .lumamed-landing .stories .page-inner {
    grid-template-columns: 1fr 1fr !important;  /* echtes 50/50, nicht mehr 1.3fr */
  }
  .lumamed-landing .stories .dd-list,
  .lumamed-landing .stories-toggles-block,
  .lumamed-landing .stories-toggles-block .dd-list {
    display: block !important;
    columns: auto !important;
    grid-template-columns: 1fr !important;
  }
  .lumamed-landing .stories .dd {
    display: block !important;
    width: 100% !important;
  }
}


/* ============================================================
   V2.x FIX — langes CTA-Label: auf kleinen Screens umbrechen lassen,
   damit der Hero-Button nicht abgeschnitten wird (überschreibt das
   globale white-space:nowrap auf .hero-actions a.cta).
   ============================================================ */
@media (max-width: 900px){
  .lumamed-landing .hero-actions a.cta{
    white-space: normal !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
.lumamed-landing[data-device="mobile"] .hero-actions a.cta{
  white-space: normal !important;
  min-width: 0 !important;
  max-width: 100% !important;
}


/* ============================================================
   V2.x MOBILE — (1) Preiszeile in Clay, (2) Fachärzte-Frame (05,
   „Erkenntnisse aus 40.000 Patienten") direkt unter den Hero mit
   der Google-Bewertung schieben. Nur Phone (<680px) — Tablet und
   Desktop behalten die Originalreihenfolge.
   ============================================================ */
@media (max-width: 680px){
  .lumamed-landing .hero-priceline-v2,
  .lumamed-landing .hero-priceline{
    color: var(--lm-clay, #D37D62) !important;
    text-transform: uppercase;
  }
  .lumamed-landing .zones{ display: flex; flex-direction: column; }
  .lumamed-landing .zones > *{ order: 10; min-width: 0; }
  .lumamed-landing .zones > .hero{ order: 1; }
  .lumamed-landing .zones > .experts{ order: 2; }

  /* Fachärzte-Frame: Ärzte-Kacheln (inkl. Name + Bezeichnung) VOR der
     Überschrift „Erkenntnisse aus 40.000 …" (nur Phone). !important +
     Attribut-Selektor nötig: body[data-device="mobile"] .experts .page-inner
     setzt sonst display:block mit höherer Spezifität. */
  .lumamed-landing[data-device="mobile"] .experts .page-inner,
  body[data-device="mobile"] .experts .page-inner{
    display: flex !important; flex-direction: column !important;
  }
  .lumamed-landing .experts .page-inner > *{ order: 10; min-width: 0; }
  .lumamed-landing .experts .page-inner > .section-tag{ order: 1; }
  .lumamed-landing .experts .page-inner > h2{ order: 2; }
  .lumamed-landing .experts .page-inner > .experts-grid{ order: 3; margin-top: 24px; }
  .lumamed-landing .experts .page-inner > .experts-intro{ order: 4; margin-top: 40px; }
  .lumamed-landing .experts .page-inner > .experts-cta{ order: 5; }

  /* Abstand Google-Bewertung → Ärzte-Kacheln halbiert (160 → 80px):
     je 40px aus Hero-padding-bottom und Experts-padding-top. */
  .lumamed-landing[data-device="mobile"] section.hero{ padding-bottom: 24px !important; }
  .lumamed-landing[data-device="mobile"] section.experts{ padding-top: 24px !important; }
  /* Überschrift steht jetzt VOR den Kacheln: Abstand Google-Bewertung → Überschrift
     bleibt 80px (Hero-pb 24 + Experts-pt 24 + Trust-Margin), kein Extra-Versatz. */
  .lumamed-landing[data-device="mobile"] .experts .page-inner > h2{ margin-top: 0 !important; }

  /* Preiszeile, erste Zeile: bold + so skaliert, dass sie exakt so breit
     ist wie Zeile 2 (37 Zeichen Mono @12px ≙ 34 Zeichen @13.06px). */
  .lumamed-landing[data-device="mobile"] .hpl-part1{
    display: block;
    font-weight: 700;
    /* Einzeilig auf JEDER Gerätebreite: 35 Mono-Zeichen ≙ 21em.
       Größe folgt dem Viewport (Spaltenbreite = 100vw − 40px Padding),
       gedeckelt bei 16.5px. Auf einem 370px-iPhone ergibt das ~15.4px. */
    font-size: min(16.5px, calc((100vw - 42px) / 21.2));
    white-space: nowrap;
    text-align: center;
  }
  /* Etwas Luft über der Kosten-Zeile (schlägt das margin-!important der
     einschaetzung-Variante per höherer Spezifität). */
  .lumamed-landing[data-device="mobile"][data-hero-cta="einschaetzung"] .hero-priceline-v2{
    margin-top: 16px !important;
  }
  /* 4) Die Analyse-Animation (Frame 03b) entfällt auf Mobile. */
  .lumamed-landing .mobile-image-bridge--video{ display: none !important; }
}


/* iOS Safari: automatische Text-Vergrößerung deaktivieren — sie verfälschte
   die berechneten Headline-/Kosten-Größen auf echten iPhones. */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }