/* ─────────────────────────────────────────────
   Pre-Launch-Startseite (Relaunch-Entwurf)
   Wird nur von der neuen Startseite + Danke-Seite geladen.
   Baut auf den Variablen aus v2.css auf (.bn-page Scope).
   ───────────────────────────────────────────── */

/* Kein horizontaler Overflow: die Footer-Linkzeile (inkl. der von consent.js
   eingefuegten "Cookie-Einstellungen") umbrechen lassen, und den Seiten-Container
   horizontal clippen. Sonst wird die Seite auf schmalen Screens breiter als das
   Viewport und die sticky-Navbar "wandert" beim Scrollen seitlich. overflow-x:clip
   (nicht hidden) laesst position:sticky intakt. */
.bn-page{overflow-x:clip}
.bn-footer-links{flex-wrap:wrap}

/* Fliesstext auf Lexend angleichen (App-Design-System). Titel/Wortmarke bleiben
   BauhausBugler (eigene Regeln in v2.css), Akzent Burgund #7D0845 + Flaeche Creme
   #FAFAF8 sind bereits gesetzt. */
.bn-page,
.bn-page input,
.bn-page button,
.bn-page textarea,
.bn-page .bn-floatnav-link,
.bn-page .bn-floatnav-cta,
.bn-page .bn-floatnav-lang{font-family:"Lexend",system-ui,-apple-system,sans-serif}

/* Social Proof unter dem Formular */
.bnp-proof{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:15px;font-weight:600;color:var(--bn-burgundy)}
.bnp-proof img{width:20px;height:20px;flex:0 0 auto}

/* Momente: Szenen-Karten */
.bnp-scenes{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:16px;gap:16px;max-width:760px;margin:32px auto 0}
.bnp-scene{position:relative;background:#fff;border:1px solid var(--bn-border);border-radius:var(--bn-radius);padding:22px 24px;font-size:16.5px;line-height:1.55;color:var(--bn-text);box-shadow:0 6px 18px rgba(125,8,69,.06)}
.bnp-scene::before{content:"„";position:absolute;top:2px;left:12px;font-family:"Bauhaus Bugler",var(--bn-sans);font-size:44px;line-height:1;color:var(--bn-amber);opacity:.85}
.bnp-scene p{margin:0;padding-left:18px}
.bnp-scenes-close{max-width:640px;margin:28px auto 0;text-align:center;font-size:17px;line-height:1.7;color:var(--bn-text)}
.bnp-scenes-close strong{color:var(--bn-burgundy)}
@media(max-width:700px){.bnp-scenes{grid-template-columns:1fr}}

/* App-Screenshots */
.bnp-phones{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:28px;gap:28px;max-width:var(--bn-max);margin:40px auto 0}
.bnp-phone{margin:0;text-align:center}
.bnp-phone img{width:100%;max-width:260px;height:auto;border-radius:26px;border:1px solid var(--bn-border);box-shadow:0 18px 40px rgba(46,26,74,.16)}
.bnp-phone figcaption{margin:14px auto 0;max-width:260px;font-size:14.5px;line-height:1.55;color:var(--bn-text-muted)}
.bnp-phone figcaption strong{color:var(--bn-text)}
/* Framed device mockups: the phone frame IS the shape, so drop the rectangular
   border/radius/shadow and cast a soft drop-shadow that follows the phone outline. */
.bnp-phones--device{align-items:start}
.bnp-phone--device img{max-width:236px;border:0;border-radius:0;background:transparent;box-shadow:none;filter:drop-shadow(0 20px 34px rgba(46,26,74,.22))}
@media(max-width:700px){
  .bnp-phones{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:4px 4px 12px;-webkit-overflow-scrolling:touch}
  .bnp-phone{flex:0 0 72%;scroll-snap-align:center}
  .bnp-phone--device{flex:0 0 62%}
}

/* Hero-Produktbild: der Tool-Screen fuellt die rechte (bisher leere) Hero-Spalte.
   Der Screen schwebt mit weichem Lichthof + Schlagschatten vor dem Kind-Foto.
   Auf Mobile ausgeblendet, damit Headline + Formular + CTA der Fokus bleiben
   (der Tool-Screen erscheint ohnehin nochmal in "Das steckt in bloomnow"). */
.bn-hero-voices{display:flex;justify-content:center;align-items:center}
.bn-hero-phone{position:relative;margin:0;width:100%;max-width:300px}
.bn-hero-phone::before{content:"";position:absolute;inset:-10% -14%;z-index:-1;background:radial-gradient(58% 52% at 50% 46%,rgba(255,250,244,.9),rgba(255,250,244,0) 72%)}
.bn-hero-phone img{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 48px rgba(46,26,74,.34))}
@media(max-width:768px){.bn-hero-phone{display:none}}

/* bloomie winkt zum Abschied im Footer (am Glitzerglas bewusst entfernt).
   Bei den Seriositaets-Sektionen (Datenschutz, Fachpersonen) bewusst nicht. */
.bn-footer{position:relative}
.bn-footer-bloomie{display:block;width:88px;height:auto;margin:0 auto 4px;filter:drop-shadow(0 6px 12px rgba(46,26,74,.12))}
@media(max-width:600px){.bn-footer-bloomie{width:72px}}

/* Glitzerglas-Demo (interaktives Tool, ersetzt das statische Box-Breathing) */
.bnp-jar{max-width:520px;margin:34px auto 0;border-radius:24px;padding:20px 18px 16px;text-align:center;background:#fbf6f0;border:1px solid var(--bn-border);transition:background .4s ease,border-color .4s ease}
.bnp-jar.is-dark{background:#1c1622;border-color:#2e2740}
.bnp-jar.is-calm{background:#eef1ee;border-color:#dfe3df}
.bnp-jar-modes{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(0,0,0,.05);margin:0 0 12px;font-size:13.5px}
.bnp-jar.is-dark .bnp-jar-modes{background:rgba(255,255,255,.08)}
.bnp-jar-modes button{border:0;background:transparent;border-radius:999px;padding:7px 16px;font-family:inherit;font-weight:500;color:#6b6b72;cursor:pointer;transition:background .2s,color .2s}
.bnp-jar.is-dark .bnp-jar-modes button{color:#b3a9bf}
.bnp-jar-modes button.is-active{background:#fff;color:var(--bn-burgundy);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.bnp-jar.is-dark .bnp-jar-modes button.is-active{background:#3a3350;color:#e7ddf5}
.bnp-jar-canvas{display:block;width:100%;max-width:440px;height:460px;margin:0 auto;touch-action:manipulation;cursor:pointer}
.bnp-jar-hint{text-align:center;margin:6px 0 0;font-size:14px;color:#8a7f86}
.bnp-jar.is-dark .bnp-jar-hint{color:#b3a9bf}
@media(max-width:520px){.bnp-jar-canvas{height:400px}}

/* Modi-Beweis: nur 2 (spaeter 3) Geraete, zentriert statt volle 3-Spalten-Breite */
.bnp-modes{grid-template-columns:repeat(2,minmax(0,240px));justify-content:center}
.bnp-modes .bnp-phone figcaption{font-weight:600;color:var(--bn-text)}

/* Kern-Nutzen als Text unter den Modus-Screens (bewusst ohne eigene Screenshots,
   damit die Konkurrenz nicht den vollen Funktionsumfang sieht) */
.bnp-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;max-width:var(--bn-max);margin:44px auto 0}
.bnp-benefit{text-align:center}
.bnp-benefit-ill{display:flex;align-items:center;justify-content:center;width:96px;height:96px;margin:0 auto 12px;border-radius:50%;background:rgba(125,8,69,.07)}
.bnp-benefit-ill img{width:72px;height:72px;display:block}
.bnp-benefit h3{margin:0 0 6px;font-family:"Lexend",system-ui,sans-serif;font-weight:600;font-size:18px;color:var(--bn-burgundy)}
.bnp-benefit p{margin:0 auto;max-width:280px;color:var(--bn-text-muted);font-size:15px;line-height:1.55}
/* FAQ: Illustration statt Icon */
.bn-faq-icon img{width:56px;height:56px;display:block}
@media(max-width:980px){.bnp-benefits{grid-template-columns:repeat(2,1fr);max-width:620px}}
@media(max-width:700px){.bnp-benefits{grid-template-columns:1fr;gap:22px;max-width:420px}}

/* bloomie Mini-Absatz (KI-Assistent) */
.bnp-bloomie{display:flex;align-items:center;gap:22px;max-width:640px;margin:40px auto 0;padding:22px 26px;background:rgba(125,8,69,.05);border:1px solid var(--bn-border);border-radius:20px;text-align:left}
.bnp-bloomie-ill{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:#fff}
.bnp-bloomie-ill img{width:60px;height:60px;display:block}
.bnp-bloomie h3{margin:0 0 5px;font-family:"Lexend",system-ui,sans-serif;font-weight:600;font-size:18px;color:var(--bn-burgundy)}
.bnp-bloomie p{margin:0;color:var(--bn-text-muted);font-size:15px;line-height:1.55}
@media(max-width:560px){.bnp-bloomie{flex-direction:column;text-align:center;gap:14px}}

/* Sekundaerzeile ueber den Feature-Chips */
.bnp-more{text-align:center;color:var(--bn-text-muted);font-size:14.5px;margin:40px 0 0}

/* Feature-Chips */
.bnp-chips{display:flex;flex-wrap:wrap;justify-content:center;grid-gap:10px;gap:10px;max-width:780px;margin:16px auto 0}
.bnp-chip{background:#fff;border:1px solid var(--bn-border);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--bn-text-muted);white-space:normal}

/* Box-Breathing-Schritte */
.bnp-breath{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:16px;gap:16px;max-width:var(--bn-max);margin:36px auto 0}
.bnp-breath-step{background:#fff;border:1px solid var(--bn-border);border-radius:var(--bn-radius);padding:22px 16px;text-align:center}
.bnp-breath-num{font-family:"Bauhaus Bugler",var(--bn-sans);font-size:38px;font-weight:700;line-height:1;color:var(--bn-amber);margin-bottom:10px}
.bnp-breath-step h3{margin:0 0 4px;font-size:17px;color:var(--bn-burgundy)}
.bnp-breath-step p{margin:0;font-size:14px;color:var(--bn-text-muted)}
@media(max-width:700px){.bnp-breath{grid-template-columns:repeat(2,1fr)}}

/* Gründerinnen-Abschnitt */
.bnp-founder{display:grid;grid-template-columns:132px 1fr;grid-gap:28px;gap:28px;max-width:760px;margin:36px auto 0;align-items:start}
.bnp-founder-avatar{width:132px;height:132px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 8px 24px rgba(125,8,69,.18)}
.bnp-founder blockquote{margin:0;padding:0 0 0 20px;border-left:3px solid var(--bn-amber);font-size:18px;line-height:1.65;color:var(--bn-text)}
.bnp-founder-name{margin:14px 0 0;padding-left:23px;font-weight:600;color:var(--bn-burgundy)}
.bnp-founder-role{margin:2px 0 0;padding-left:23px;font-size:14px;color:var(--bn-text-muted)}
@media(max-width:700px){
  .bnp-founder{grid-template-columns:1fr;justify-items:center;text-align:center}
  .bnp-founder blockquote{border-left:0;padding:0;border-top:3px solid var(--bn-amber);padding-top:18px}
  .bnp-founder-name,.bnp-founder-role{padding-left:0}
}

/* Sticky-CTA (nur mobil, erscheint wenn das Hero-Formular aus dem Bild ist) */
.bnp-stickycta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;justify-content:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(250,250,248,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--bn-border)}
.bnp-stickycta.is-visible{display:flex}
.bnp-stickycta a{display:block;width:100%;max-width:380px;text-align:center;background:var(--bn-burgundy);color:#fff;text-decoration:none;font-weight:600;font-size:16px;border-radius:999px;padding:13px 28px}
@media(min-width:900px){.bnp-stickycta{display:none!important}}
/* Wenn die mobile Sticky-CTA sichtbar ist, den bloomie-Button darueber heben,
   damit die Giraffe den "Jetzt kostenlos vormerken"-Text nicht verdeckt.
   (#bloomie-root wird per JS ans Ende von <body> gehaengt, also nach der Leiste
   > Geschwister-Selektor greift. Beim offenen Chat-Panel nicht anheben, damit
   das Panel unten verankert bleibt und oben nicht abgeschnitten wird.) */
@media(max-width:899px){
  #bnp-stickycta.is-visible ~ #bloomie-root:not(:has(.bloomie-panel.open)){
    bottom:calc(84px + env(safe-area-inset-bottom));
    transition:bottom .2s ease;
  }
}

/* Danke-Seite */
.bnp-danke{max-width:620px;margin:0 auto;padding:110px 24px 64px;text-align:center}
.bnp-danke-icon{width:64px;height:64px;margin:0 auto 20px;display:block}
.bnp-danke h1{font-family:"Bauhaus Bugler",var(--bn-sans);font-weight:700;font-size:40px;color:var(--bn-burgundy);margin:0 0 14px}
.bnp-danke-lead{font-size:17px;line-height:1.7;color:var(--bn-text-muted);margin:0 auto;max-width:480px}
.bnp-card{background:#fff;border:1px solid var(--bn-border);border-radius:var(--bn-radius);box-shadow:0 6px 18px rgba(125,8,69,.06);padding:26px 24px;margin:28px auto 0;text-align:center}
.bnp-card h2{margin:0 0 8px;font-size:19px;color:var(--bn-burgundy)}
.bnp-card p{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--bn-text-muted)}
.bnp-share{display:flex;flex-wrap:wrap;justify-content:center;grid-gap:12px;gap:12px}
.bnp-share a,.bnp-share button{display:inline-block;border:1.5px solid var(--bn-burgundy);background:#fff;color:var(--bn-burgundy);font-weight:600;font-size:15px;font-family:inherit;border-radius:999px;padding:10px 22px;text-decoration:none;cursor:pointer}
.bnp-share a:hover,.bnp-share button:hover{background:var(--bn-burgundy);color:#fff}
.bnp-play-btn{display:inline-block;background:var(--bn-burgundy);color:#fff;font-weight:600;font-size:15px;border-radius:999px;padding:12px 26px;text-decoration:none}
.bnp-danke-back{display:inline-block;margin-top:32px;font-size:14px;color:var(--bn-text-muted)}