/* ═══════════════════════════════════════════════════════════════════════════
   Kampagnen-Landingpage „Memory Portals für Familien" — /de/familie/
   Reine Ergänzung zu css/website.css. Tokens, Raster (--max-w 960), Header,
   .intro, .how/.steps/.step, .pricing-card, .pricing-tailored, .waitlist und
   .site-footer kommen unverändert von dort — keine zweite Designsprache.
   Eigenes trägt das Präfix .family-landing-* (Ausnahme: .demo-* für das
   Beispielportal, das den Look von portal.css übernimmt).
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Skip-Link & Fokus ──────────────────────────────────────────────────── */
.family-landing-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--plum);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-size: 13px;
}
.family-landing-skip:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
video:focus-visible,
audio:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* Footer-Linkzeile darf bei 320 px umbrechen — .footer-links hat global kein
   flex-wrap und läuft dort sonst aus dem Viewport. Nur hier korrigiert. */
.site-footer .footer-links { flex-wrap: wrap; justify-content: center; }

/* ── Abschnittsrhythmus ─────────────────────────────────────────────────────
   Wie auf der Produktseite wechseln sich var(--bg) und rgba(255,255,255,0.015)
   ab. .how (Prozess) und .pricing (Preise) bringen ihre Werte schon aus
   website.css mit — hier werden nur die beiden Abschnitte angepasst, die sonst
   dieselbe Fläche wie ihre Nachbarn hätten.

   Reihenfolge: Hero → Feature-Strip (#0d0b10) → hell → dunkel → hell →
   dunkel (Prozess) → hell (Preise) → Warteliste (Verlauf)               */
.intro#was-ist-das { background: rgba(255, 255, 255, 0.015); }
.family-landing-remains { background: var(--bg); }
.featured-portal#beispiel {
  background: rgba(255, 255, 255, 0.015);
  border-bottom: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero — linksbündiger Text auf der freien dunklen Bildfläche
   ═════════════════════════════════════════════════════════════════════════ */
.family-landing-hero {
  position: relative;
  isolation: isolate;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 120px 24px 100px;
  overflow: hidden;
  background: #0d0910;
}
.family-landing-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.family-landing-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;   /* Mutter, Kind, Rahmen und Smartphone bleiben im Bild */
}
/* Gerichteter Verlauf nur über der Textfläche links — das Produkt rechts bleibt klar */
.family-landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 0% 100%, rgba(8, 5, 12, 0.72) 0%, rgba(8, 5, 12, 0.3) 45%, rgba(8, 5, 12, 0) 70%),
    linear-gradient(
      to right,
      rgba(8, 5, 12, 0.92) 0%,
      rgba(8, 5, 12, 0.88) 26%,
      rgba(8, 5, 12, 0.78) 38%,
      rgba(8, 5, 12, 0.5) 50%,
      rgba(8, 5, 12, 0.12) 64%,
      rgba(8, 5, 12, 0) 78%
    );
}
.family-landing-hero-inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.family-landing-hero-copy { max-width: 560px; }
.family-landing-hero h1 {
  font-family: var(--font-hl);
  font-weight: normal;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 24px;
  max-width: 700px;
}
.family-landing-hero-lead {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--text2);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 470px;
}
.family-landing-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.family-landing-hero-micro {
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text2);
}

/* Mobile: hochformatiges Companion-Motiv oben, Text darunter.
   Ein Textblock über dem Bild würde Rahmen und Smartphone verdecken. */
@media (max-width: 700px) {
  .family-landing-hero {
    display: block;
    min-height: 0;
    padding: 0 0 48px;
    background: var(--bg);
  }
  .family-landing-hero-media {
    position: relative;
    inset: auto;
    display: block;
    height: 44vh;
    min-height: 280px;
    max-height: 400px;
  }
  .family-landing-hero-media img { object-position: center 60%; }
  .family-landing-hero-media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 88px;
    background: linear-gradient(rgba(17, 17, 17, 0), var(--bg));
  }
  .family-landing-hero::before { display: none; }
  .family-landing-hero-inner { padding: 20px 20px 0; }
  .family-landing-hero-copy { max-width: none; }
  .family-landing-hero h1 { font-size: clamp(1.75rem, 7.4vw, 2.3rem); margin-bottom: 18px; }
  .family-landing-hero-lead { margin-bottom: 26px; font-size: 1rem; max-width: none; }
}
/* 320 px: Bildhöhe zurücknehmen, damit der CTA above the fold bleibt */
@media (max-width: 360px) {
  .family-landing-hero-media { height: 36vh; min-height: 230px; }
  .family-landing-hero h1 { margin-bottom: 14px; }
  .family-landing-hero-lead { margin-bottom: 22px; }
}
@media (max-width: 480px) {
  .family-landing-hero-actions { flex-direction: column; align-items: stretch; }
  .family-landing-hero-actions .btn-primary { max-width: 280px; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Was wirklich bleibt — redaktioneller Moment, keine Karte, keine Icons
   ═════════════════════════════════════════════════════════════════════════ */
.family-landing-remains {
  padding: 120px 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.family-landing-remains-inner { max-width: 680px; margin: 0 auto; }
.family-landing-remains .section-label { margin-bottom: 36px; }
.family-landing-remains-lead {
  font-family: var(--font-hl);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 36px;
}
.family-landing-remains-close {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text2);
  max-width: 560px;
  margin: 0 auto;
}
.family-landing-remains-close::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: rgba(200, 169, 110, 0.5);
  margin: 0 auto 36px;
}
@media (max-width: 700px) { .family-landing-remains { padding: 80px 20px; } }

/* ── Was ist ein Memory Portal?: Bild links, Copy rechts ────────────────── */
.family-landing-intro-media { display: block; }
/* Das Erklärbild ist hochformatig (4:5). `height: auto` ist nötig, weil die
   width/height-Attribute am <img> sonst beide Dimensionen definit machen; und
   das 1:1 aus website.css würde auf Mobile oben und unten beschneiden. */
.intro-inner .intro-visual { height: auto; }
@media (max-width: 768px) {
  .intro-inner .intro-visual { aspect-ratio: auto; }
}
@media (max-width: 768px) {
  /* Auf Mobile zuerst die Copy — das Erklärbild ist detailreich und wirkt
     erst, wenn man weiss, worauf man schaut. */
  .intro-inner .intro-text { order: 1; }
  .intro-inner .family-landing-intro-media { order: 2; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Beispielportal-Sektion — nutzt die bestehende .featured-portal-Komponente
   (Header, Drei-Spalten-Grid, .featured-img-wrap, .featured-caption-desc).
   Hier stehen nur die Ergänzungen, die es dort noch nicht gibt.
   ═════════════════════════════════════════════════════════════════════════ */

/* Ruhiger Einleitungsblock mit begrenzter Zeilenlänge */
.family-landing-example-intro {
  max-width: 62ch;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.family-landing-example-intro p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text2);
}
.family-landing-example-intro p + p { margin-top: 16px; }

.family-landing-steps-title {
  font-family: var(--font-hl);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  font-weight: normal;
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

/* Die Interaktionsbilder liegen quer (3:2) — .featured-img-wrap erwartet 4:5
   und würde Rahmen und Smartphone beschneiden.
   `height: auto` ist nötig: die width/height-Attribute am <img> machen sonst
   beide Dimensionen definit und `aspect-ratio` wird ignoriert. */
.family-landing-steps .featured-img-wrap img { aspect-ratio: 3 / 2; height: auto; }
.family-landing-steps .featured-img-wrap { margin-bottom: 16px; }
.family-landing-step-title {
  font-family: var(--font-hl);
  font-size: 1.05rem;
  font-weight: normal;
  margin-bottom: 8px;
}
/* Unter 860 px untereinander statt in drei schmalen Spalten */
@media (max-width: 860px) {
  .family-landing-steps { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Störer ────────────────────────────────────────────────────────────────
   Aufbau von .intro-quote aus website.css: Goldbalken links, leichte
   Goldtönung, Radius nur rechts. Der gesättigte Balken gibt der Tönung die
   Referenz, die ihr als reine Fläche gefehlt hat (Gold bei 5 % liest sich
   sonst eher oliv). Rechts blutet jeweils ein Bild ins Panel und wird per
   mask-image weich eingeblendet — keine harte Bildkante.
   Zwei Instanzen: Übergang zur Demo (Mitte) und Abbinder (Seitenende).    */
.family-landing-stoerer {
  padding: clamp(2.25rem, 4.5vw, 3rem) clamp(1.75rem, 4vw, 3rem);
  background: rgba(200, 169, 110, 0.08);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.family-landing-stoerer-body { position: relative; z-index: 1; max-width: 58%; }

.family-landing-stoerer-visual {
  position: absolute;
  top: 0;
  /* 50 px über die rechte Panelkante hinaus: das Motiv rückt nach rechts,
     die Textzeilen laufen nicht mehr auf die Rahmenkante zu. overflow:hidden
     am Panel beschneidet den Überstand. */
  right: -50px;
  bottom: 0;
  width: 54%;
  display: block;
  pointer-events: none;
}
.family-landing-stoerer-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.82;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 42%, #000 78%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 42%, #000 78%);
}
@media (max-width: 820px) {
  .family-landing-stoerer-body { max-width: none; }
  .family-landing-stoerer-visual { display: none; }
}

/* Störer 1 — Übergang zur Demo. Mias gerahmtes Signature-Foto: genau das,
   was man im echten Produkt berührt. Bewusste Wiederholung von Schritt 1,
   rein dekorativ (alt="" + aria-hidden). */
.family-landing-demo-cta { margin: clamp(3.5rem, 7vw, 5.5rem) 0 0; }
.family-landing-demo-cta .family-landing-stoerer-visual img { object-position: 38% center; }
.family-landing-demo-cta h3 {
  font-family: var(--font-hl);
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.9rem);
  font-weight: normal;
  line-height: 1.3;
  margin-bottom: 16px;
  max-width: 32ch;
}
.family-landing-demo-cta p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text2);
  max-width: 72ch;
}
.family-landing-demo-cta p + p { margin-top: 14px; }
.family-landing-demo-cta .btn-ghost { margin-top: 30px; }

.family-landing-cta-micro {
  margin-top: 22px !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  max-width: 68ch;
}
.family-landing-ai-note {
  margin-top: 22px !important;
  padding-top: 18px;
  border-top: 1px solid rgba(200, 169, 110, 0.25);
  font-size: 12px !important;
  line-height: 1.7 !important;
  /* zurückhaltend, aber lesbar — --text3 läge bei 3,3:1 */
  color: var(--text2) !important;
  max-width: 72ch;
}

/* ── Prozess, Schritt 02: geteilte Motivdarstellung ─────────────────────────
   Foto 60 %, Artwork 40 % — beide Optionen gleich klar beschriftet, damit das
   Artwork nicht als einzige Form des Portalbilds erscheint. */
.family-landing-step-split {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 4px;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--card-bg);
}
.family-landing-step-part { position: relative; overflow: hidden; }
.family-landing-step-part img { width: 100%; height: 100%; object-fit: cover; }
.family-landing-step-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 6px 6px;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

/* Die width/height-Attribute am <img> machen beide Dimensionen definit —
   ohne height:auto greift das aspect-ratio aus .step-img nicht und das Bild
   rendert in voller Originalhöhe. */
#prozess .step-img { height: auto; }

/* ── Preise: zwei Karten statt drei ─────────────────────────────────────── */
.family-landing-cards--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 64px;
}
@media (max-width: 960px) { .family-landing-cards--two { grid-template-columns: 1fr; } }

/* Massgeschneiderte Lösungen: sichtbar untergeordnet, keine dritte Karte.
   Gleiche Breite wie die beiden Paketkarten darüber — .pricing-inner ist
   1100 px breit, dadurch stand der Block sonst über die Karten hinaus und
   sah aus wie ein Fehler. Innen etwas enger gesetzt, damit die Copy bei
   820 px noch Platz hat. */
.family-landing-tailored { margin-bottom: 0; }
.family-landing-tailored .pricing-tailored-headline { font-size: 1.3rem; }

/* Die Adresse sichtbar unter dem Button: ein mailto-Link laeuft ins Leere,
   wenn kein Mailprogramm registriert ist — und das ist bei Webmail-Nutzern
   am Desktop haeufig. So bleibt der Weg trotzdem offen. */
.pricing-tailored-mail {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text3);
}
.pricing-tailored-mail a {
  color: var(--text2);
  border-bottom: 1px solid rgba(200, 169, 110, 0.4);
  word-break: break-word;
}
.pricing-tailored-mail a:hover { color: var(--primary); border-bottom-color: var(--primary); }
/* Trefferflaeche auf 44px, ohne die Schrift zu vergroessern — wie im
   Touch-Target-Block von website.css. */
.pricing-tailored-mail a { position: relative; display: inline-block; }
.pricing-tailored-mail a::after { content: ""; position: absolute; inset: -14px 0; z-index: 1; }


/* ── Abbinder am Seitenende ─────────────────────────────────────────────────
   Störer 2: Absprung zur Produktseite. Motiv ist deren Hero — gerahmtes
   Signature Artwork plus Portal auf dem Handy. Zeigt, dass ein Memory Portal
   auch ganz anders aussehen kann als Mias Signature-Foto. */
.family-landing-outro {
  /* 24 px seitlich wie .featured-portal, damit der Abbinder exakt so breit
     steht wie der Störer in der Beispielportal-Sektion. */
  padding: clamp(3.5rem, 7vw, 5.5rem) 24px clamp(4rem, 8vw, 6rem);
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.family-landing-outro-inner { max-width: var(--max-w); margin: 0 auto; }
/* Kein 50-px-Überstand wie beim ersten Störer: hier sitzt das Smartphone am
   rechten Bildrand und würde sonst angeschnitten. Etwas breitere Bildspalte,
   damit vom 1693 × 929-Motiv seitlich kaum etwas wegfällt. */
.family-landing-outro-panel .family-landing-stoerer-visual { right: 0; width: 62%; }
.family-landing-outro-panel .family-landing-stoerer-visual img { object-position: right center; }
.family-landing-outro-panel .family-landing-stoerer-body { max-width: 50%; }
.family-landing-outro-panel h2 {
  font-family: var(--font-hl);
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.9rem);
  font-weight: normal;
  line-height: 1.3;
  margin-bottom: 16px;
}
.family-landing-outro-panel p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text2);
  max-width: 54ch;
}
.family-landing-outro-panel .btn-ghost { margin-top: 28px; }
/* Mobil: das Bild ist ausgeblendet, also darf der Text die ganze Breite haben.
   Muss hier stehen und nicht im 820-px-Block weiter oben — die Regel
   .family-landing-outro-panel .family-landing-stoerer-body ist spezifischer
   und wuerde ein dortiges max-width: none sonst ueberschreiben. */
@media (max-width: 820px) {
  .family-landing-outro-panel .family-landing-stoerer-body { max-width: none; }
  .family-landing-outro-panel p { max-width: none; }
}

/* ── Warteliste ─────────────────────────────────────────────────────────── */
.family-landing-package-hint {
  font-size: 12px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary) !important;
  margin-bottom: 20px !important;
}
.family-landing-form-error {
  display: none;
  font-size: 13px;
  color: #e0938c;
  margin-bottom: 12px;
}
.family-landing-form-error.is-visible { display: block; }
.waitlist-success strong {
  display: block;
  font-family: var(--font-hl);
  font-size: 1.3rem;
  font-weight: normal;
  color: var(--secondary);
  margin-bottom: 8px;
}
.family-landing-success-hint {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text2);
}

/* Zweiter Absatz steht unter dem Formular: oben Luft zum Formular, unten
   weniger als die 36 px aus .waitlist p, damit die Hinweiszeile dazugehört. */
.family-landing-waitlist-followup { margin-top: 28px; margin-bottom: 20px !important; }

/* Sekundärer Absprung zur Produktseite — deutlicher als vorher, aber weiterhin
   ohne Button, damit er dem Wartelisten-CTA nicht Konkurrenz macht. */
.family-landing-more {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.family-landing-more-lead {
  font-family: var(--font-hl);
  font-size: 1.05rem !important;
  color: var(--text) !important;
  margin-bottom: 12px !important;
}
.family-landing-more p {
  font-size: 13.5px !important;
  color: var(--text2) !important;
  line-height: 1.8 !important;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0 !important;
}
.family-landing-more a {
  display: inline-block;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--text2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.family-landing-more a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* ── Header: „Beispielportal ansehen" als sekundärer Button ─────────────
   Gleiche Masse wie .nav-cta, aber Ghost-Variante, damit die Warteliste der
   sichtbar primäre CTA bleibt. */
.nav-cta--ghost {
  background: transparent;
  color: var(--text2);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.nav-cta--ghost:hover {
  background: rgba(200, 169, 110, 0.08);
  border-color: var(--primary);
  color: var(--primary);
}
@media (max-width: 720px) { .nav-cta--ghost { display: none; } }

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn-primary:hover { transform: none; }
}