/* Landingpage v2 (Go-Live 05.10.2026) — aus dem Labor «Hero ruhig» übernommen.
   Ein Hauptweg pro Variante, der Film als Einladung statt als zweite Überschrift,
   Ablauf «Finden. Holen. Behalten.», mehr Luft. Gilt für E und D gleich. */

/* ————— Film-Teaser (Fassung B): Kicker + Titel klein, Play + Dauer, kein «Film ansehen» ————— */
.mfx-teaser__sound{ display: none !important; }
.mfx-teaser__cta{
  height: 34px !important;
  padding: 0 12px 0 4px !important;
  gap: 7px !important;
  font-size: 12.5px !important;
}
.mfx-teaser__play{ width: 26px !important; height: 26px !important; }
.mfx-teaser__play svg{ width: 11px; height: 11px; }
.mfx-teaser__cta-time{ display: inline !important; font-size: 12px !important; color: #0a6d83 !important; }
.mfx-teaser__copy{ max-width: 56% !important; }
.hero-media.mfx-slot .mfx-teaser__title{ font-size: 15px !important; margin-top: 4px !important; }
.hero-media.mfx-slot .mfx-teaser__cta{ margin-top: 10px !important; }
.photo-card .mfx-teaser__title{ font-size: 22px !important; }
.photo-card .mfx-teaser__cta{ margin-top: 12px !important; }
.hero-media.mfx-slot .mfx-teaser__scrim{
  background: linear-gradient(90deg, rgba(8, 30, 37, 0.78) 0%, rgba(8, 30, 37, 0.45) 38%, rgba(8, 30, 37, 0) 62%) !important;
}

/* ————— Handy: Film steht UNTER Hauptzeile + Untertitel, direkt über dem Knopf ————— */
.hero-copy .hero-media.hero-film{
  margin: 0 0 22px;
  height: clamp(170px, 46vw, 210px);
}
.hero-copy .hero-media.hero-film .mfx-teaser__video{ object-position: 62% 30% !important; }
@media (max-width: 720px){
  .hero{ padding-top: 34px; padding-bottom: 52px; }
  .hero .hero-copy h1{ margin: 0 0 14px; line-height: 1.12; }
  .hero .hero-copy p.muted{ margin-bottom: 22px; line-height: 1.6; }
  .hero-copy .hero-microcopy{ margin-top: 14px !important; }
  .hero-copy .hero-proof{ margin-top: 10px; }
}

/* ————— Kopf-Knopf erst, wenn der Hero-Knopf aus dem Bild ist (sonst zweimal dasselbe) ————— */
.site-header .btn-header-cta{ transition: opacity .25s ease, transform .25s ease, visibility .25s; }
body.lp-hero-cta-sichtbar .site-header .btn-header-cta{
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
}

/* ————— Ablauf: Finden · Holen · Behalten ————— */
.landing-ablauf .ra-head{ margin: 0 0 22px; }
.landing-ablauf .ra-head h2{
  margin: 0;
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.landing-ablauf .ra-head h2 .title-punch{ color: hsl(var(--primary)); }
.landing-ablauf .ra-head p{
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}
.ra-steps{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.ra-step{
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 20px;
  box-shadow: 0 10px 26px -18px rgba(2, 8, 23, 0.22);
}
/* dünne Verbindung zwischen den Bildern: «das ist ein Weg, keine Liste» */
.ra-step:not(:last-child)::after{
  content: "";
  position: absolute;
  left: calc(18px + 38px);
  top: calc(18px + 76px + 6px);
  width: 2px;
  height: calc(100% - 76px - 12px + 14px);
  background: linear-gradient(180deg, hsl(191 86% 39% / .35), hsl(191 86% 39% / .08));
  border-radius: 2px;
}
.ra-media{
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background-color: hsl(30 95% 94%);
  background-repeat: no-repeat;
  background-size: auto 112%;
  background-position: 50% 45%;
  box-shadow: inset 0 0 0 1px hsl(30 60% 86%);
}
.ra-body{ min-width: 0; }
.ra-kicker{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: hsl(191 86% 33%);
}
.ra-num{ color: hsl(var(--muted-foreground)); letter-spacing: .06em; }
.ra-tag{
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: hsl(25 55% 22%);
  background: hsl(30 95% 90%);
  border-radius: 999px;
  padding: 3px 9px;
}
.ra-step h3{
  margin: 6px 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: hsl(var(--foreground));
}
.ra-step p{ margin: 0; font-size: 14.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.ra-step p strong{ color: hsl(var(--foreground)); font-weight: 700; }
.ra-foot{ margin-top: 22px; }
.ra-foot .ra-cta{ width: 100%; justify-content: center; }
.ra-micro{ margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); text-align: center; }
.ra-accent{ color: hsl(191 86% 36%); font-weight: 700; }
@media (min-width: 900px){
  .landing-ablauf .ra-head{ text-align: center; margin-bottom: 34px; }
  .ra-steps{ grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .ra-step{ grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden; }
  .ra-step:not(:last-child)::after{ display: none; }
  .ra-media{
    width: 100%;
    height: auto;
    aspect-ratio: 2406 / 1024;
    border-radius: 0;
    background-size: cover;
    background-position: center;
    box-shadow: none;
  }
  .ra-body{ padding: 20px 22px 24px; }
  .ra-step h3{ font-size: 20px; }
  .ra-foot{ display: flex; flex-direction: column; align-items: center; margin-top: 30px; }
  .ra-foot .ra-cta{ width: auto; padding-left: 28px; padding-right: 28px; }
}