/*
* ============================================================
* BAUCHGEBURT — BRAND CSS 2026
* Quelle: https://bauchgeburt.com/Bauchgeburt-Brand-2026-FIN.html
*
* Einbinden:
*
*
* Schriften (separat im laden):
*
* ============================================================
*/
/* ---- Tokens ---- */
:root {
--c-snow:#FBFAF6; --c-cream:#EFEBE4; --c-mist:#E4EAEF;
--c-ink:#001C39; --c-ink-soft:#5A6478;
--c-coral:#E2553F; --c-coral-soft:#F7D3C8;
--c-sage:#B8C2A8; --c-sage-deep:#4D5C41;
--bg:var(--c-snow); --bg-soft:var(--c-cream); --bg-mist:var(--c-mist); --bg-dark:var(--c-ink);
--fg:var(--c-ink); --fg-soft:var(--c-ink-soft); --fg-on-dark:var(--c-snow);
--accent:var(--c-coral); --accent-soft:var(--c-coral-soft);
--rule:rgba(0,28,57,.12); --rule-soft:rgba(0,28,57,.06); --rule-on-dark:rgba(251,250,246,.16);
--font-sans:"Geist","Helvetica Neue",Arial,sans-serif;
--font-serif:"Fraunces","Georgia",serif;
--t-display:clamp(44px,7vw,84px);
--t-h1:clamp(34px,5.2vw,65px);
--t-h2:clamp(28px,4vw,46px);
--t-h3:24px; --t-lead:19px; --t-body:18px; --t-small:14px; --t-micro:12px;
--shadow-2:0 12px 32px -16px rgba(0,28,57,.12);
--shadow-3:0 20px 60px -20px rgba(0,28,57,.16);
--shadow-4:0 36px 80px -28px rgba(0,28,57,.22);
--ease:cubic-bezier(.2,0,0,1); --dur:200ms;
--maxw:1080px; --radius:20px;
}
/* ---- Reset ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--bg); color:var(--fg);
font-family:var(--font-sans); font-size:var(--t-body); line-height:1.6;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* ---- Typografie ---- */
h1,h2,h3{font-family:var(--font-sans); font-weight:600; font-style:normal; line-height:1.1; letter-spacing:-.015em}
h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3)}
/* em überall = Fraunces italic coral (Brand-Regel) */
em,.em{font-family:var(--font-serif); font-style:italic; font-weight:500; color:var(--accent); letter-spacing:0}
p{max-width:62ch}
.lead{font-size:var(--t-lead); color:var(--fg-soft); line-height:1.55}
/* ---- Layout ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
section{padding:72px 0; border-bottom:1px solid var(--rule-soft)}
.eyebrow{font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase;
color:var(--accent); font-weight:600; margin-bottom:16px}
.center{text-align:center}
.center .eyebrow{text-align:center; width:100%; max-width:none}
.mt{margin-top:28px}
/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer;
background:var(--accent); color:#fff; font-family:var(--font-sans);
font-weight:500; font-size:15px; text-decoration:none;
padding:14px 32px; border-radius:999px; border:0;
transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
box-shadow:var(--shadow-2)}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-3)}
.btn--lg{padding:17px 40px; font-size:16px}
.btn--ghost{background:transparent; color:var(--fg); border:1.5px solid var(--rule)}
.btn--ghost:hover{background:var(--bg-soft)}
/* ---- Sticky CTA ---- */
.sticky{position:fixed; left:0; right:0; bottom:0; z-index:50;
background:rgba(251,250,246,.92); backdrop-filter:blur(10px);
border-top:1px solid var(--rule); padding:12px 16px;
display:flex; align-items:center; justify-content:space-between; gap:14px;
transform:translateY(120%); transition:transform var(--dur) var(--ease)}
.sticky.show{transform:translateY(0)}
.sticky__txt{font-size:var(--t-small); font-weight:500}
.sticky__txt span{display:block; color:var(--fg-soft); font-size:var(--t-micro)}
.sticky .btn{padding:12px 22px; font-size:var(--t-small)}
@media(max-width:560px){.sticky__txt span{display:none}}
/* ---- Hero ---- */
.hero{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%); padding:72px 0 64px}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.hero h1{margin-bottom:20px; max-width:18ch}
.hero .lead{margin-bottom:32px; max-width:52ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.trust{margin-top:18px; font-size:var(--t-small); color:var(--fg-soft)}
.trust b{color:var(--fg); font-weight:600}
.hero__media{display:flex; align-items:center; justify-content:center}
.hero__media img{width:100%; max-width:560px; height:auto; display:block}
@media(max-width:860px){
.hero{padding:56px 0 48px}
.hero__grid{grid-template-columns:1fr; gap:8px}
.hero__media{order:-1; margin-bottom:8px}
.hero__media img{max-width:340px}
.hero h1,.hero .lead{max-width:100%}
.hero__cta .btn{width:100%; justify-content:center}
}
/* ---- Listen ---- */
.checklist{list-style:none; display:grid; gap:14px; margin-top:24px; max-width:64ch}
.checklist li{position:relative; padding-left:34px; line-height:1.5}
.checklist li::before{content:"\2715"; position:absolute; left:0; top:1px;
color:var(--accent); font-weight:700}
.benefits li::before{content:"\2713"; color:var(--c-sage-deep)}
/* ---- Cards ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:36px}
.card{background:var(--bg); border:1px solid var(--rule); border-radius:var(--radius);
padding:28px; box-shadow:var(--shadow-2)}
.card__tag{font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase;
color:var(--accent); font-weight:600; margin-bottom:14px; display:block}
.card h3{margin:10px 0 6px; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word}
.card .pages{font-size:var(--t-micro); color:var(--fg-soft); margin-bottom:12px}
.card p{font-size:var(--t-small); color:var(--fg-soft)}
/* ---- Section-Varianten ---- */
.section--soft{background:var(--bg-soft); border-bottom:1px solid var(--rule-soft)}
/* Dunkle Sektion (Ink) */
.section--dark{background:var(--bg-dark); color:var(--fg-on-dark); border:0}
.section--dark .eyebrow{color:var(--accent-soft)}
.section--dark h2{color:var(--fg-on-dark); margin-bottom:20px; max-width:18ch}
.section--dark p{color:rgba(251,250,246,.82); margin-bottom:16px}
.section--dark .hard{color:var(--fg-on-dark); font-family:var(--font-sans); font-weight:600;
font-size:var(--t-h3); line-height:1.3; max-width:24ch; margin:24px 0 28px}
.section--dark .hard em{font-family:var(--font-serif); font-style:italic; font-weight:500; color:var(--accent-soft)}
/* ---- Value-Stack ---- */
.value-stack{margin-top:28px; padding:24px; background:var(--bg-mist); border-radius:var(--radius);
font-size:var(--t-lead)}
.price-old{text-decoration:line-through; color:var(--fg-soft); font-weight:500}
.price-new{color:var(--accent); font-weight:700}
/* ---- Offer-Box ---- */
.offer{background:var(--bg); border:1.5px solid var(--accent); border-radius:var(--radius);
padding:40px; max-width:560px; margin:36px auto 0; text-align:center; box-shadow:var(--shadow-4)}
.offer h3{font-size:var(--t-h3); margin-bottom:8px}
.offer__meta{font-size:var(--t-small); color:var(--fg-soft); margin-bottom:22px}
.offer__price{font-family:var(--font-sans); font-weight:600; font-size:clamp(40px,7vw,64px); line-height:1; margin-bottom:6px}
.offer__price .price-old{font-size:.45em; margin-right:14px}
.offer__note{font-size:var(--t-micro); color:var(--fg-soft); margin-top:18px}
.offer .btn{margin-top:8px}
/* ---- Über mich ---- */
.about{display:grid; grid-template-columns:200px 1fr; gap:36px; align-items:start}
.about__photo{aspect-ratio:1; border-radius:var(--radius); background:var(--bg-mist); overflow:hidden;
display:flex; align-items:center; justify-content:center; color:var(--fg-soft);
font-size:var(--t-micro); text-align:center; border:1px solid var(--rule-soft)}
.about__photo img{width:100%; height:100%; object-fit:cover; object-position:center top}
@media(max-width:640px){.about{grid-template-columns:1fr}.about__photo{max-width:200px}}
/* ---- FAQ ---- */
.faq{display:grid; gap:0; max-width:760px; margin-top:28px}
.faq details{border-bottom:1px solid var(--rule); padding:18px 0}
.faq summary{cursor:pointer; font-weight:600; font-size:var(--t-lead); list-style:none;
display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-size:24px; transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px; color:var(--fg-soft)}
/* ---- Close ---- */
.close{background:var(--bg-soft); text-align:center}
.close h2{max-width:20ch; margin:0 auto 18px}
.close p{margin:0 auto 28px}
/* ---- Footer ---- */
footer{background:var(--bg-dark); color:rgba(251,250,246,.72); padding:48px 0 110px; border:0}
footer .disclaimer{font-size:var(--t-small); line-height:1.6; max-width:none; width:100%; margin-bottom:24px;
padding:20px; background:rgba(251,250,246,.05); border:1px solid var(--rule-on-dark); border-radius:14px}
footer a{color:var(--fg-on-dark)}
footer .meta{font-size:var(--t-micro); display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center}
footer .meta .brand{font-family:var(--font-serif); font-size:var(--t-body); color:var(--fg-on-dark)}