/* ============================================================
   brautmoden-oldenburg.de – gemeinsames Design-System (LPs)
   Warme Palette (Creme/Rosé/Beige) · Cormorant Garamond + Jost
   Wird von allen Landingpages via <link rel="stylesheet"> genutzt.
   ============================================================ */

/* --- Selbstgehostete Schriften (DSGVO: kein Google-CDN) --- */
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/cormorant-garamond-latin-300.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/cormorant-garamond-latin-400.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/cormorant-garamond-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/cormorant-garamond-latin-600.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap; src:url('/fonts/cormorant-garamond-latin-400italic.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap; src:url('/fonts/cormorant-garamond-latin-500italic.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/jost-latin-300.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/jost-latin-400.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/jost-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/jost-latin-600.woff2') format('woff2'); }

:root {
  --ink:#2A201D; --rosewood:#3A2925; --heading:#33231F; --warmwhite:#FCF4EF;
  --blush:#EDD2C9; --blush-hi:#F7E7E0; --rose:#C0806B; --link:#9E5236; --peach:#E2A98D;
  --hero-eye:#F4E0D5;
  --t1:#55493F; --t2:#4A4038; --t3:#6A5C50; --t4:#7A6C60;
  --cream1:#EFE7DD; --cream2:#D8CCBE;
  --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --page-bg: radial-gradient(125% 90% at 85% -5%, #F8E8E1 0%, #F2DBD2 52%, #EACFC5 100%);
  --ease: cubic-bezier(.22,.61,.36,1);
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-ui); font-weight:300; color:var(--ink); line-height:1.75;
  background:var(--page-bg); background-attachment:fixed; min-height:100vh; overflow-x:hidden;
}
::selection { background:#ECC8B7; color:#3A2925; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:var(--font-display); font-weight:300; }
h1 em, h2 em, h3 em { font-style:italic; }
:focus-visible { outline:2px solid var(--rose); outline-offset:4px; border-radius:3px; }

/* ---------- Reveal ---------- */
.reveal { opacity:1; }
html.js .reveal { opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--rd,0) * 80ms); will-change:opacity, transform; }
html.js .reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto;} html.js .reveal{opacity:1!important;transform:none!important;transition:none!important;} }

/* ---------- Eyebrow / Section head ---------- */
.eyebrow { font-family:var(--font-ui); font-weight:400; text-transform:uppercase; letter-spacing:5px; font-size:12px; color:var(--link); display:inline-block; }
.sec-head { max-width:760px; margin:0 auto; text-align:center; }
.sec-head h2 { font-size:clamp(28px,5vw,42px); color:var(--heading); line-height:1.12; margin-top:12px; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-ui); font-weight:400; font-size:15px; letter-spacing:.3px; padding:16px 32px; border-radius:100px; border:1px solid transparent; cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s ease, color .35s ease, border-color .35s ease; white-space:nowrap; }
.btn--dark { background:var(--rosewood); color:var(--warmwhite); box-shadow:0 14px 40px -16px rgba(58,41,37,.5); }
.btn--dark:hover { transform:translateY(-3px); box-shadow:0 20px 52px -18px rgba(58,41,37,.55); }
.btn--light { background:rgba(252,244,239,.72); color:var(--rosewood); border-color:rgba(255,255,255,.6); box-shadow:0 12px 40px -18px rgba(78,50,46,.3); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.btn--light:hover { background:rgba(252,244,239,.92); transform:translateY(-3px); }
.btn--outline { background:transparent; border-color:rgba(58,41,37,.3); color:var(--rosewood); }
.btn--outline:hover { background:var(--rosewood); color:var(--warmwhite); border-color:transparent; transform:translateY(-3px); }
.btn--wa { background:#25623f; color:#fff; box-shadow:0 14px 40px -18px rgba(37,98,63,.6); }
.btn--wa:hover { transform:translateY(-3px); background:#1f4f33; }

/* ---------- Header ---------- */
.hdr { position:fixed; top:14px; left:0; right:0; z-index:60; width:calc(100% - 2*clamp(12px,3vw,28px)); max-width:1320px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 14px 12px clamp(20px,3vw,30px); border-radius:999px; background:rgba(246,230,223,.5); backdrop-filter:blur(16px) saturate(1.35); -webkit-backdrop-filter:blur(16px) saturate(1.35); border:1px solid rgba(255,255,255,.5); box-shadow:0 10px 40px -18px rgba(78,50,46,.35); transition:background .5s ease, box-shadow .5s ease; }
.hdr.scrolled { background:rgba(246,230,223,.85); box-shadow:0 16px 46px -16px rgba(78,50,46,.45); }
.logo { line-height:1; }
.logo__name { font-family:var(--font-display); font-weight:500; font-size:clamp(21px,4vw,25px); letter-spacing:.5px; color:var(--heading); display:block; }
.logo__place { font-family:var(--font-ui); font-weight:400; font-size:10px; text-transform:uppercase; letter-spacing:4px; color:var(--link); margin-top:3px; }
.nav { display:flex; align-items:center; gap:clamp(16px,3vw,32px); }
.nav__link { display:none; font-family:var(--font-ui); font-weight:400; font-size:13px; text-transform:uppercase; letter-spacing:2px; color:var(--t2); transition:color .3s ease; }
.nav__link:hover { color:var(--rose); }
.nav__cta { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-size:13px; text-transform:uppercase; letter-spacing:2px; padding:11px 22px; border-radius:100px; color:var(--rosewood); background:rgba(255,255,255,.32); border:1px solid rgba(58,41,37,.28); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .35s ease, color .35s ease, border-color .35s ease; }
.nav__cta::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--rose); }
.nav__cta:hover { background:var(--rosewood); color:var(--warmwhite); border-color:transparent; }
@media (min-width:840px){ .nav__link{ display:inline-block; } }

/* ---------- Breadcrumb ---------- */
.crumb { max-width:var(--maxw); margin:0 auto; padding:calc(84px + 14px) var(--gutter) 0; }
.crumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:8px; font-family:var(--font-ui); font-size:12.5px; letter-spacing:.4px; color:var(--t4); }
.crumb li::after { content:'·'; margin-left:8px; color:var(--cream2); }
.crumb li:last-child::after { content:''; }
.crumb a:hover { color:var(--rose); }
.crumb li[aria-current] { color:var(--t2); }

/* ---------- LP-Hero ---------- */
.lp-hero { position:relative; max-width:var(--maxw); margin:18px auto 0; padding:clamp(40px,7vw,86px) var(--gutter); border-radius:30px; overflow:hidden; }
.lp-hero__bg { position:absolute; inset:0; background-size:cover; background-position:60% 40%; z-index:0; }
/* Desktop: Ausschnitt höher setzen, damit das Gesicht nicht unter dem Header abgeschnitten wird (Mobile behält 40%) */
@media (min-width:840px){ .lp-hero__bg{ background-position:60% 8%; } }
.lp-hero__bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(78,50,46,.34) 0%, rgba(78,50,46,.12) 40%, rgba(78,50,46,.62) 100%); }
.lp-hero__in { position:relative; z-index:1; max-width:720px; }
.lp-hero__eye { color:var(--hero-eye); }
.lp-hero h1 { font-size:clamp(30px,6vw,52px); line-height:1.08; color:var(--warmwhite); margin:14px 0 18px; text-shadow:0 2px 30px rgba(40,25,22,.4); }
.lp-hero h1 em { color:#E9B7A0; }
.lp-hero__sub { font-size:clamp(15px,2.2vw,18px); color:#F4E6DE; max-width:52ch; margin-bottom:28px; line-height:1.6; }
.lp-hero__cta { display:flex; flex-wrap:wrap; gap:13px; }

/* ---------- Trust-Bar ---------- */
.trust { max-width:var(--maxw); margin:0 auto; padding:clamp(26px,5vw,50px) var(--gutter) 0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px); }
.trust__item { display:flex; align-items:center; gap:11px; font-family:var(--font-ui); font-weight:400; font-size:14.5px; line-height:1.3; color:var(--t1); background:rgba(252,244,239,.55); border:1px solid rgba(255,255,255,.6); border-radius:16px; padding:15px 18px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 12px 34px -20px rgba(78,50,46,.32); }
.trust__ic { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--rose); color:var(--warmwhite); font-size:12px; }
@media (max-width:820px){ .trust{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .trust{ grid-template-columns:1fr; } }

/* ---------- Prosa-/Content-Sektionen ---------- */
.sec { max-width:var(--maxw); margin:0 auto; padding:clamp(44px,7vw,86px) var(--gutter); }
.sec--narrow { max-width:820px; }
.sec h2 { font-size:clamp(26px,4.4vw,38px); color:var(--heading); line-height:1.14; margin-bottom:18px; }
.sec h2 em { color:var(--rose); }
.sec h3 { font-family:var(--font-display); font-weight:500; font-size:clamp(19px,2.8vw,23px); color:var(--heading); margin:26px 0 8px; }
.sec p { font-size:clamp(15.5px,1.9vw,17px); color:var(--t2); line-height:1.85; margin-bottom:1.05em; }
.sec p:last-child { margin-bottom:0; }
.sec .eyebrow { margin-bottom:2px; }

/* ---------- Warum-/Vorteilsliste ---------- */
.checklist { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:15px 40px; margin:28px 0; }
.checklist li { display:flex; gap:13px; align-items:flex-start; font-family:var(--font-ui); font-weight:300; font-size:15.5px; line-height:1.6; color:var(--t1); }
.checklist li::before { content:'✓'; color:var(--rose); font-weight:600; flex:0 0 auto; margin-top:1px; }
@media (max-width:720px){ .checklist{ grid-template-columns:1fr; } }

/* ---------- Stil-Pills ---------- */
.pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.pill { font-family:var(--font-ui); font-size:13.5px; letter-spacing:.4px; color:var(--rosewood); background:rgba(252,244,239,.6); border:1px solid rgba(226,169,141,.4); border-radius:100px; padding:9px 18px; }

/* ---------- Designer-Grid ---------- */
.brand-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; background:rgba(58,41,37,.1); border:1px solid rgba(58,41,37,.1); border-radius:14px; overflow:hidden; margin:24px 0; }
.brand { background:rgba(252,244,239,.55); padding:20px 16px; text-align:center; font-family:var(--font-display); font-weight:400; font-size:17px; color:var(--heading); }

/* ---------- FAQ ---------- */
.faq__list { margin-top:26px; }
.faq__item { border-bottom:1px solid rgba(58,41,37,.14); }
.faq__item summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:22px 2px; font-family:var(--font-display); font-weight:500; font-size:clamp(18px,2.5vw,21px); color:var(--heading); }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary::after { content:'+'; font-family:var(--font-ui); font-weight:300; font-size:26px; line-height:1; color:var(--rose); flex:0 0 auto; transition:transform .3s var(--ease); }
.faq__item[open] summary::after { transform:rotate(45deg); }
.faq__item p { margin:0 2px; padding:0 0 24px; font-size:15.5px; line-height:1.78; color:var(--t2); max-width:66ch; }

/* ---------- CTA-Band ---------- */
.cta { max-width:var(--maxw); margin:0 auto; padding:clamp(50px,8vw,100px) var(--gutter); text-align:center; }
.cta h2 { font-size:clamp(30px,5vw,46px); color:var(--heading); line-height:1.12; margin:12px 0 14px; }
.cta h2 em { color:var(--rose); }
.cta p { max-width:60ch; margin:0 auto 30px; color:var(--t2); font-size:clamp(15px,2vw,17px); }
.cta__btns { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ---------- Info-/Kontaktkarten ---------- */
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,40px); }
@media (max-width:760px){ .info-grid{ grid-template-columns:1fr; } }
.info__lbl { font-family:var(--font-ui); font-weight:500; text-transform:uppercase; letter-spacing:2px; font-size:11px; color:var(--link); margin-bottom:6px; }
.info__val { font-family:var(--font-display); font-size:19px; color:var(--heading); line-height:1.5; }
.info__val a:hover { color:var(--rose); }

/* ---------- Footer + Regionen ---------- */
.footer { background:rgba(58,41,37,.04); border-top:1px solid rgba(58,41,37,.1); margin-top:clamp(30px,6vw,70px); }
.footer__in { max-width:var(--maxw); margin:0 auto; padding:clamp(44px,6vw,72px) var(--gutter) 30px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(24px,4vw,54px); }
@media (max-width:820px){ .footer__in{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__in{ grid-template-columns:1fr; } }
.footer__brand p { font-size:14px; color:var(--t3); line-height:1.7; margin-top:14px; max-width:34ch; }
.footer__col h3 { font-family:var(--font-ui); font-weight:500; text-transform:uppercase; letter-spacing:2px; font-size:11px; color:var(--link); margin-bottom:14px; }
.footer__col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer__col a { font-size:14px; color:var(--t2); transition:color .25s ease; }
.footer__col a:hover { color:var(--rose); }
.footer__social { display:flex; gap:12px; margin-top:16px; }
.footer__social a { width:38px; height:38px; border-radius:50%; border:1px solid rgba(58,41,37,.2); display:inline-flex; align-items:center; justify-content:center; color:var(--rosewood); transition:background .3s, color .3s, border-color .3s; }
.footer__social a:hover { background:var(--rosewood); color:var(--warmwhite); border-color:transparent; }
.footer__social svg { width:17px; height:17px; fill:currentColor; }
.footer__bottom { max-width:var(--maxw); margin:0 auto; padding:18px var(--gutter) 30px; border-top:1px solid rgba(58,41,37,.1); display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; font-size:12.5px; color:var(--t4); }
.footer__bottom a:hover { color:var(--rose); }

/* ---------- Sticky Mobile-CTA ---------- */
.sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; grid-template-columns:1fr 1fr; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(246,230,223,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,.6); box-shadow:0 -8px 30px -14px rgba(78,50,46,.4); }
.sticky-cta .btn { width:100%; padding:14px 16px; font-size:14px; }
@media (max-width:840px){ .sticky-cta{ display:grid; } body{ padding-bottom:76px; } }

/* ---------- Bewertungen / Stimmen unserer Bräute ---------- */
.voices { max-width:var(--maxw,1180px); margin:0 auto; padding:clamp(44px,7vw,86px) var(--gutter); }
.voices__head { max-width:760px; margin:0 auto; text-align:center; }
.voices__head h2 { font-family:var(--font-display); font-weight:300; font-size:clamp(26px,4.4vw,38px); color:var(--heading); line-height:1.14; margin-top:10px; }
.voices__head h2 em { font-style:italic; color:var(--rose); }
.voices__rating { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:14px; font-family:var(--font-ui); font-weight:300; font-size:15px; color:var(--t2); }
.voices__rating strong { font-weight:500; color:var(--heading); }
.voices__stars { color:var(--rose); letter-spacing:2px; font-size:17px; line-height:1; }
.voices__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,22px); margin-top:36px; }
.voice { display:flex; flex-direction:column; gap:15px; background:rgba(252,244,239,.6); border:1px solid rgba(255,255,255,.6); border-radius:20px; padding:26px 24px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 14px 40px -24px rgba(78,50,46,.4); }
.voice__stars { color:var(--rose); letter-spacing:2px; font-size:15px; line-height:1; }
.voice__quote { font-family:var(--font-display); font-weight:400; font-style:italic; font-size:18px; line-height:1.5; color:var(--rosewood); flex:1 0 auto; }
.voice__cap { display:flex; flex-direction:column; gap:2px; }
.voice__by { font-family:var(--font-ui); font-weight:500; font-size:14px; letter-spacing:.3px; color:var(--heading); }
.voice__src { font-family:var(--font-ui); font-weight:400; font-size:11px; text-transform:uppercase; letter-spacing:1.6px; color:var(--t4); }
@media (max-width:900px){ .voices__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .voices__grid{ grid-template-columns:1fr; } }