/* =====================================================================
   BELLE — WARME SKIN  ·  liegt ÜBER landing-redesign.css
   Ziel: boutique / redaktionell / warm / weiblich (wie die Vorschau,
   die Frederik gefallen hat). Redesign strukturiert + zeigt alle
   Sektionen; diese Datei macht die Oberfläche warm.
   ===================================================================== */

/* ---------- Grundfläche: warme Creme ---------- */
body.funnel{ background:#f4efe9 !important; }
.funnel .final,
.funnel section{ background-color:transparent; }

/* ---------- Warme, redaktionelle Serifen-Schrift ---------- */
.funnel h1, .funnel h2, .funnel h3,
.funnel .eyebrow, .funnel .hero-action-title,
.funnel .price-main, .funnel .vs-head, .funnel .about-name,
.funnel .band b, .funnel .num-big, .funnel blockquote,
.funnel .rev-who, .funnel .step-t, .funnel .faq-item h3{
  font-family:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif !important;
}
.funnel h1{ letter-spacing:-.4px !important; line-height:1.09 !important; font-weight:600 !important; }
.funnel h2{ letter-spacing:-.3px !important; font-weight:600 !important; }
.funnel .eyebrow{ letter-spacing:2px !important; }

/* ---------- Weiche Creme-Karten statt harter/technischer Flächen ---------- */
.funnel .pain-card, .funnel .feat-card, .funnel .about-card, .funnel .faq-item,
.funnel .growth-item, .funnel .step, .funnel .rev-card, .funnel .vs-col,
.funnel .ease-card, .funnel .ease-assist, .funnel .opt-item, .funnel .price-card,
.funnel .insta-card, .funnel .smart-demo, .funnel .hero-action-panel, .funnel .about-photo-wrap{
  background:#fffdf9 !important;
  border:1px solid rgba(143,91,118,.13) !important;
  border-radius:20px !important;
  box-shadow:0 22px 50px -28px rgba(112,69,92,.30) !important;
  color:#3c3638 !important;
}
.funnel .vs-good{ background:#eef6f0 !important; border-color:rgba(47,111,77,.16) !important; }

/* ---------- Dunkle Bänder: kaltes Charcoal -> warmes Plum/Rosé (Schrift bleibt hell) ---------- */
/* Zahlen-Bänder + finale CTA: warmes Plum (dunkel), weiße Inline-Schrift bleibt lesbar */
.funnel .numbers, .funnel .final{
  background:linear-gradient(140deg,#3a2833 0%,#5b3c50 52%,#7c5169 100%) !important;
}
.funnel .numbers > *, .funnel .final > *{ background:transparent !important; box-shadow:none !important; }

/* ---------- Buttons / Akzente warm ---------- */
.funnel .btn-rose, .funnel .btn.btn-rose{
  background:linear-gradient(135deg,#9a627f,#70455c) !important;
  box-shadow:0 16px 34px -12px rgba(112,69,92,.5) !important;
}

/* ---------- Hero-Foto (ersetzt Chat-Mock) ---------- */
.funnel .hv-photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;max-width:410px;margin:0 auto;
  box-shadow:0 30px 66px -28px rgba(112,69,92,.5) !important;border:1px solid rgba(255,255,255,.6)}
.funnel .hv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.funnel .hv-chat{position:absolute;left:14px;right:14px;bottom:14px;background:#fffdf9;border-radius:16px;
  box-shadow:0 18px 40px -16px rgba(112,69,92,.5);border:1px solid rgba(42,35,39,.08);padding:12px 14px;text-align:left}
.funnel .hv-chat-top{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#2a2327;margin-bottom:5px}
.funnel .hv-chat-dot{width:8px;height:8px;border-radius:50%;background:#3bbd7e;box-shadow:0 0 0 3px rgba(59,189,126,.16)}
.funnel .hv-chat p{margin:0;font-size:13px;line-height:1.5;color:#4a4145;font-family:var(--sans,system-ui)}

/* ---------- Hero: Gesichter in der Trust-Zeile ---------- */
.funnel .hero-avatars{display:inline-flex;vertical-align:middle;margin-right:9px}
.funnel .hero-avatars img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-9px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.funnel .hero-avatars img:first-child{margin-left:0}

/* ---------- „Während du arbeitest" — Fürsorge-Foto + Overlay + 1-2-3 ---------- */
.funnel .care-wrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(22px,4vw,44px);
  align-items:center;max-width:960px;margin:0 auto;text-align:left}
.funnel .care-media{position:relative}
.funnel .care-media img{width:100%;border-radius:22px;box-shadow:0 26px 60px -26px rgba(112,69,92,.42);display:block}
.funnel .care-note{position:absolute;left:12px;right:12px;bottom:14px;background:#fffdf9;border-radius:14px;
  box-shadow:0 18px 40px -16px rgba(112,69,92,.45);border:1px solid rgba(42,35,39,.08);padding:11px 13px;display:flex;gap:10px;align-items:center}
.funnel .care-note-ic{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#8f5b76,#70455c);
  display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.funnel .care-note-ic svg{width:16px;height:16px}
.funnel .care-note b{font-size:12.5px;color:#2a2327;display:block;line-height:1.3}
.funnel .care-note span{font-size:11.5px;color:#2f9d6a;font-weight:600}
.funnel .care-flow{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;align-items:center}
.funnel .care-st{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#2a2327;background:#fffdf9;
  border:1px solid rgba(42,35,39,.10);border-radius:999px;padding:7px 12px}
.funnel .care-st i{width:18px;height:18px;border-radius:50%;background:rgba(143,91,118,.12);color:#70455c;
  font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;font-style:normal}
.funnel .care-ar{color:#8f857f}

/* ---------- Salon-Band (echtes Team-Foto) ---------- */
.funnel .salon-band{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 30px 64px -30px rgba(112,69,92,.45)}
.funnel .salon-band img{width:100%;display:block}
.funnel .salon-cap{position:absolute;left:0;right:0;bottom:0;padding:28px 26px 20px;
  background:linear-gradient(transparent,rgba(30,20,26,.6));color:#fff;text-align:left}
.funnel .salon-cap b{font-family:Georgia,serif;font-size:clamp(18px,2.2vw,23px);font-weight:600;display:block;color:#fff}
.funnel .salon-cap span{font-size:13.5px;opacity:.92}

/* ---------- Hero: Chips als Pillen + Aktions-Bereich (kein Redesign da -> selbst stylen) ---------- */
.funnel .hero-proof{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 0}
.funnel .hero-proof span{display:inline-flex;align-items:center;gap:7px;background:#fffdf9;
  border:1px solid rgba(42,35,39,.10);border-radius:999px;padding:8px 14px;font-size:13.5px;color:#2a2327;
  box-shadow:0 8px 20px -12px rgba(112,69,92,.22)}
.funnel .hero-proof i{color:#8f5b76;font-size:16px}
.funnel .hero-action-panel{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;margin:24px 0 0}
.funnel .hero-action-title{font-family:Georgia,serif !important;font-size:19px;font-weight:600;color:#2a2327;margin:0 0 6px}
.funnel .hero-action-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:14px 0 4px}
.funnel .hero-soft-link{color:#70455c;text-decoration:underline;text-underline-offset:3px;font-weight:500;font-size:15px;white-space:nowrap}
.funnel .problem-panel{max-width:820px;margin:0 auto;text-align:center}

/* ---------- „vorher/nachher": Text dunkel (war weiß, jetzt Creme-Karten) ---------- */
.funnel .vs-col{ color:#3c3638 !important; }
.funnel .vs-col li{ color:#3c3638 !important; }
.funnel .vs-head{ color:#2a2327 !important; }

@media (max-width:760px){ .funnel .care-wrap{grid-template-columns:1fr} }

/* ---------- Alle „verschlankten" Sektionen wieder zeigen — NUR Version A (lang) ---------- */
.funnel-a .press, .funnel-a .growth, .funnel-a .about, .funnel-a .reviews, .funnel-a .trust-bar,
.funnel-a .smart, .funnel-a .numbers, .funnel-a .steps,
.funnel-a section:has(.band),
.funnel-a section[style*="padding:64px 0 26px"],
.funnel-a section[style*="padding:78px 0 70px"]{ display:block !important; }

/* ---------- Barrierefreiheit + Screenshot: bei reduced-motion Einblendungen aus ---------- */
@media (prefers-reduced-motion: reduce){
  .funnel .reveal{ opacity:1 !important; transform:none !important; }
}
/* Footer besser lesbar (war mattes Grau auf Weiß = kaum lesbar) */
.funnel footer{ color:#574e48 !important; }
.funnel footer span{ opacity:1 !important; color:#6b625d !important; }

/* „Bekannt aus"-Logos größer (waren v.a. mobil zu klein) – Proportionen behalten */
.funnel .press-logos{ gap:24px 48px !important; }
.funnel .press-logos img:nth-child(1){ height:34px !important; }
.funnel .press-logos img:nth-child(2){ height:32px !important; }
.funnel .press-logos img:nth-child(3){ height:38px !important; }
.funnel .press-logos img:nth-child(4){ height:54px !important; }
.funnel .press-logos img:nth-child(5){ height:56px !important; }
.funnel .press-logos img:nth-child(6){ height:46px !important; }
@media (max-width:600px){
  .funnel .press-logos{ gap:18px 30px !important; }
  .funnel .press-logos img:nth-child(1){ height:30px !important; }
  .funnel .press-logos img:nth-child(2){ height:28px !important; }
  .funnel .press-logos img:nth-child(3){ height:33px !important; }
  .funnel .press-logos img:nth-child(4){ height:47px !important; }
  .funnel .press-logos img:nth-child(5){ height:49px !important; }
  .funnel .press-logos img:nth-child(6){ height:40px !important; }
}

/* Funnel v3: zwei eigenständige, mobile Einstiege statt identischer Varianten. */
.funnel .hero-action-row .btn{
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.funnel .hero-url-note{
  max-width:620px;
  font-size:14px;
  line-height:1.55;
  color:#655b5f;
}
.funnel .trust{
  font-size:13px;
  line-height:1.45;
}
.funnel .hero-action-panel + .hero-proof{
  margin-top:15px;
}
.funnel .hero-action-panel .hero-action-row{
  margin-top:0;
}
.funnel .hero-action-panel .hero-url-note{
  margin:9px 0 0;
}
.funnel .hv-chat p b{
  color:#2a2327;
  font-weight:700;
}
.funnel-b .hero{
  background-color:#f8f4f0 !important;
}
.funnel-b .hero .eyebrow{
  color:#2f6f4d !important;
}
.funnel-b .hero-action-panel{
  padding-left:16px !important;
  border-left:3px solid rgba(47,111,77,.48) !important;
  border-radius:0 !important;
}
.funnel-b .hv-chat{
  border-left:4px solid #2f6f4d;
}
@media (min-width:901px){
  .funnel .hero h1{
    font-size:clamp(48px,4.5vw,66px) !important;
  }
  .funnel .hv-chat{
    right:25%;
  }
}
.funnel-b .hv-try{
  background:#2f6f4d !important;
  color:#fff !important;
  border-color:#2f6f4d !important;
  text-shadow:0 1px 1px rgba(0,0,0,.16);
  box-shadow:0 14px 30px -12px rgba(47,111,77,.55) !important;
}
.funnel-b .hv-try:hover,
.funnel-b .hv-try:focus-visible{
  background:#245b3e !important;
  border-color:#245b3e !important;
  color:#fff !important;
}
@media (max-width:700px){
  .funnel .hero-grid{
    gap:24px !important;
  }
  .funnel .hero-proof{
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
  }
  .funnel .hero-proof span{
    width:100%;
    box-sizing:border-box;
    border-radius:12px;
    padding:9px 11px;
  }
  .funnel .hero-action-panel{
    margin-top:20px !important;
  }
  .funnel .hero-action-row{
    display:grid;
    grid-template-columns:1fr;
    gap:11px;
    margin-top:12px;
  }
  .funnel .hero-action-row .btn,
  .funnel .hero-soft-link{
    width:100%;
    box-sizing:border-box;
    text-align:center;
  }
  .funnel .hero-soft-link{
    padding:8px 4px;
  }
  .funnel .hv-photo{
    aspect-ratio:5/4;
    max-width:none;
  }
  .funnel .hv-chat{
    left:10px;
    right:10px;
    bottom:10px;
    padding:10px 12px;
  }
  .funnel .hv-chat p{
    font-size:12.5px;
    line-height:1.42;
  }
  .funnel-b .hero-action-panel{
    padding-left:12px !important;
  }
}

/* Exit-Popup: das verschachtelte <b> im Untertext ("gilt 14 Tage …") erbte den
   riesigen grünen Preis-Stil vom "249 €" → auf normale kleine Fettung zurücksetzen. */
.funnel #exitOffer .exit-price span,
.funnel #exitOffer .exit-price span b{
  font-family:var(--sans) !important;
  font-size:13px !important;
  font-weight:400 !important;
  color:var(--muted) !important;
  line-height:1.45 !important;
  display:inline !important;
}
.funnel #exitOffer .exit-price span b{ font-weight:700 !important; color:var(--ink) !important; }

/* Mobil: unten rechts Platz für die Chat-Bubble lassen – Sticky-Kaufleiste liegt
   nicht mehr darunter (vorher überlappte die Bubble den „Preis ansehen"-Button). */
@media (max-width:600px){
  .funnel .sticky-cta{ right:78px !important; padding:10px 6px 10px 10px !important; justify-content:flex-start !important; }
  .funnel .sticky-cta .sticky-inner{ padding:6px 7px 6px 15px !important; gap:8px !important; max-width:none !important; }
  .funnel .sticky-cta .btn{ padding:11px 15px !important; font-size:13.5px !important; white-space:nowrap !important; }
  .funnel .sticky-cta .sc-price{ font-size:13px !important; }
  .funnel .sticky-cta .sc-price span{ font-size:10.5px !important; line-height:1.25 !important; }
}