/* EQUORA – Launch-Seite
   Farben: Creme #F7F3EC · Dunkelgrün #1E3A2B · Gold #8B6231 · Braun #5E4330 */

:root{
  --cream:#F7F3EC;
  --white:#FFFFFF;
  --ink:#1E1B17;
  --body:#4F473E;
  --green:#1E3A2B;
  --gold:#8B6231;
  --gold-light:#C9A36B;
  --brown:#5E4330;
  --line:#E8E0D3;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --hdr-h:96px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  padding-top:var(--hdr-h); -webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden}
img{max-width:100%; display:block}
a{color:var(--gold)}

/* ---------- Kopfzeile ---------- */
.hdr{position:fixed; top:0; left:0; right:0; z-index:40; background:var(--white); border-bottom:1px solid var(--line)}
.hdr-inner{height:var(--hdr-h); display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 72px}
.logo{display:flex; padding:0; border:0; background:none}
.logo img{height:58px; width:auto}
.nav{display:flex; gap:32px}
.nav-link{color:var(--ink); text-decoration:none; font-size:15px; cursor:pointer; background:none; border:0; font-family:inherit}
.nav-link:hover,.nav-link.is-active{color:var(--gold)}
.hdr-right{display:flex; align-items:center; gap:16px}

.langbar{display:flex; border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px}
.lang-btn{
  height:40px; min-width:46px; padding:0 12px; border:0; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.08em;
  background:transparent; color:var(--body);
}
.lang-btn.is-active{background:var(--green); color:var(--white)}
.langbar-mobile{display:none}

.burger{
  display:none; width:48px; height:48px; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:12px; background:var(--white); color:var(--ink); cursor:pointer;
}
.burger-close{display:none}
body.menu-open .burger-open{display:none}
body.menu-open .burger-close{display:inline-flex}

.mobile-menu{display:none; flex-direction:column; padding:8px 24px 24px; background:var(--white); border-bottom:1px solid var(--line)}
body.menu-open .mobile-menu{display:flex}
.mobile-menu .nav-link{font-size:18px; padding:14px 0; border-bottom:1px solid #F0EAE0}
.mobile-menu .nav-link:last-child{border-bottom:0}

/* ---------- Seiten ---------- */
.page{display:none}
.page.is-visible{display:block}

/* ---------- Start ---------- */
.hero{display:flex; align-items:center; gap:64px; padding:48px 72px 48px 112px; min-height:560px}
.hero-text{flex:1 1 auto; max-width:700px}
.eyebrow{display:flex; align-items:center; gap:12px; margin:0 0 18px;
  font-size:13px; letter-spacing:.22em; color:var(--gold); font-weight:500}
.eyebrow.centered{justify-content:center}
.eyebrow.small{display:block}
.eyebrow.gold{color:#E4C898; display:block; margin-bottom:14px}
.rule{display:inline-block; width:50px; height:1px; background:currentColor; flex:none}
h1{margin:0 0 22px; font-family:var(--serif); font-weight:600; font-size:clamp(28px,4.2vw,60px); line-height:1.08; white-space:nowrap}
.lead{margin:0 0 26px; font-size:19px; line-height:1.6; color:var(--body); max-width:560px}
.btn{display:inline-block; font-size:16px; font-weight:500; padding:16px 30px; border-radius:999px; text-decoration:none; cursor:pointer; font-family:inherit}
.btn-outline{border:1px solid var(--ink); color:var(--ink); background:none}
.btn-outline:hover{background:var(--ink); color:var(--white)}
.btn-light{background:var(--cream); color:var(--ink); border:0; flex:none}

.hero-img{position:relative; margin:0; width:420px; height:520px; flex:none; border-radius:220px 220px 24px 24px; overflow:hidden}
.hero-img img{width:100%; height:100%; object-fit:cover}
.hero-img figcaption{position:absolute; left:20px; bottom:20px; background:var(--white); border-radius:14px; padding:14px 18px; display:flex; flex-direction:column; gap:2px}
.script{font-family:var(--serif); font-style:italic; font-size:22px; color:var(--ink)}
.script.light{color:var(--cream); font-size:24px}
.tag{font-size:12px; letter-spacing:.16em; color:var(--gold); font-weight:500}

.trust{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:center; gap:0; background:var(--green); padding:28px 72px}
.trust-item{display:flex; align-items:center; gap:16px; padding:0 20px; border-right:1px solid #3C5A49}
.trust-item:last-child{border-right:0}
.trust-item svg{width:40px; height:40px; color:var(--gold-light); flex:none}
.trust-item div{display:flex; flex-direction:column; gap:4px}
.trust-item strong{font-size:14px; letter-spacing:.16em; font-weight:600; color:var(--cream)}
.trust-item span{font-size:14px; color:#CFD8D1}

/* ---------- Produkte ---------- */
.prods{display:flex; flex-direction:column; align-items:center; gap:12px; padding:48px 72px 72px; background:var(--white)}
.prods-title{margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.2vw,44px); line-height:1.14; text-align:center}
.prods-sub{margin:0 0 22px; font-size:17px; color:var(--body); text-align:center}
.pgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; width:100%}
.card{position:relative; display:flex; flex-direction:column; align-items:center; gap:12px;
  background:var(--cream); border-radius:20px; padding:24px 20px 26px; text-align:center}
.badge{position:absolute; top:16px; left:16px; color:var(--white); font-size:11px; font-weight:600;
  letter-spacing:.14em; padding:5px 10px; border-radius:999px}
.card img{width:100%; max-width:170px; height:250px; object-fit:contain; mix-blend-mode:multiply}
.card h3{margin:4px 0 0; font-family:var(--serif); font-weight:600; font-size:26px; letter-spacing:.04em}
.cat{font-size:12px; letter-spacing:.16em; font-weight:600}
.card p{margin:0; font-size:15px; line-height:1.5; color:var(--body)}
.more{font-size:15px; font-weight:500; color:var(--gold); text-decoration:underline; cursor:pointer}

/* ---------- Über EQUORA ---------- */
.about{display:flex; align-items:center; gap:72px; padding:56px 112px; background:var(--white)}
.about-img{width:560px; height:420px; object-fit:cover; border-radius:24px; flex:none}
.about-text{display:flex; flex-direction:column; gap:18px}
.about-text h2{margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.4vw,44px); line-height:1.12}
.nowrap{white-space:nowrap}
.abgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:4px}
.abgrid div{display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--gold-light); padding-top:14px}
.abgrid strong{font-size:16px}
.abgrid span{font-size:15px; color:var(--body); line-height:1.5}

/* ---------- Fachhandel ---------- */
.b2b{display:flex; align-items:center; justify-content:space-between; gap:56px;
  padding:72px 112px; background:var(--brown); color:var(--cream); min-height:420px}
.b2b h2{margin:0 0 14px; font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.2vw,44px); line-height:1.14}
.b2b .lead{color:#EADFD2; margin:0}

/* ---------- Kontakt / Fuss ---------- */
.foot{display:flex; flex-direction:column; justify-content:space-between; gap:48px;
  padding:64px 112px 36px; background:var(--green); color:var(--cream); min-height:420px}
.footrow{display:flex; justify-content:space-between; align-items:flex-start; gap:64px}
.foot-brand{display:flex; flex-direction:column; gap:14px}
.wordmark{font-family:var(--serif); font-size:40px; font-weight:600; letter-spacing:.06em; color:#E4C898}
.footlinks{display:flex; gap:72px; font-size:15px; line-height:1.9; color:#CFD8D1}
.footcol{display:flex; flex-direction:column; align-items:flex-start}
.footcol a{color:#CFD8D1}
.foothead{color:var(--cream); font-weight:600; letter-spacing:.12em; font-size:13px; margin-bottom:6px}
.linkbtn{background:none; border:0; padding:0; font-family:inherit; font-size:15px; line-height:1.9;
  color:#CFD8D1; text-decoration:underline; cursor:pointer; text-align:left}
.disclaimer{margin:0; border-top:1px solid #3C5A49; padding-top:20px; font-size:13px; color:#AEBDB3}

/* ---------- Rechtstexte ---------- */
.legal-overlay{position:fixed; inset:0; z-index:60; display:none; background:rgba(30,27,23,.55);
  padding:32px 16px; overflow-y:auto}
.legal-overlay.is-open{display:block}
.legal-box{position:relative; margin:0 auto; width:100%; max-width:820px; background:var(--white);
  border-radius:20px; padding:40px; font-size:15px; line-height:1.65; color:#35302A; overflow-wrap:break-word}
.legal-close{position:absolute; top:20px; right:20px; width:44px; height:44px; display:flex;
  align-items:center; justify-content:center; border:1px solid var(--line); border-radius:12px;
  background:var(--white); color:var(--ink); cursor:pointer}
.legal-box h1{margin:0 0 20px; font-family:var(--serif); font-weight:600; font-size:clamp(26px,4vw,34px); white-space:normal}
.legal-box h2{margin:24px 0 8px; font-size:17px; font-weight:600}
.legal-box p{margin:0}
.legal-foot{margin:28px 0 0 !important; padding-top:16px; border-top:1px solid var(--line);
  font-size:12px; line-height:1.6; color:#6E665C}

/* ---------- Mittlere Bildschirme ---------- */
@media (max-width:1100px){
  :root{--hdr-h:80px}
  .hdr-inner{padding:0 24px}
  .nav{display:none}
  .burger{display:flex}
  .hero{flex-direction:column; align-items:flex-start; padding:32px 24px 48px; gap:28px; min-height:0}
  h1{white-space:nowrap}
  .hero-img{width:100%; height:340px; border-radius:24px}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; padding:28px 24px}
  .trust-item{border-right:0; padding:0}
  .prods{padding:40px 24px 56px}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about{flex-direction:column; align-items:flex-start; padding:40px 24px 56px; gap:24px}
  .about-img{width:100%; height:280px}
  .b2b{flex-direction:column; align-items:flex-start; padding:40px 24px; gap:22px; min-height:0}
  .foot{padding:40px 24px 28px; min-height:0}
  .footrow{flex-direction:column; gap:28px}
}

/* ---------- Handy ---------- */
@media (max-width:820px){
  :root{--hdr-h:72px}
  .hdr-inner{padding:0 16px}
  .logo img{height:44px}
  .langbar-desktop{display:none}
  .langbar-mobile{display:flex; margin:6px 0 12px; align-self:flex-start}
  .lang-btn{height:38px; min-width:42px; padding:0 10px}
}
@media (max-width:680px){
  .trust{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .abgrid{grid-template-columns:1fr}
  .footlinks{flex-direction:column; gap:24px}
  .legal-box{padding:28px 20px}
  .hero-text .lead{font-size:17px}
}