/* ─────────────────────────────────────────────
   Montique — SEO-Landingpages (/wuerfelregal, /modulares-regalsystem, …)
   Design & Development · siondesign.de
   Nutzung: <main id="main" class="landing"> mit section/h2, .duo, .faq, .cta-band
   ───────────────────────────────────────────── */

.landing{max-width:1200px;margin:0 auto;padding:clamp(140px,18vw,200px) var(--pad) clamp(80px,10vw,140px)}
.landing .crumb{font-size:12.5px;letter-spacing:.02em;color:var(--muted);margin:0 0 clamp(24px,3vw,36px)}
.landing .crumb a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.landing h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.6vw,76px);line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin:0 0 22px;max-width:18ch}
.landing .lead{font-size:clamp(17px,1.4vw,20px);line-height:1.65;color:var(--body);max-width:56ch;margin:0}
.landing section{margin-top:clamp(56px,8vw,96px)}
.landing h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin:0 0 18px;max-width:26ch}
.landing p{color:var(--body);line-height:1.66;max-width:62ch;margin:0 0 16px}
.landing ul{color:var(--body);line-height:1.66;max-width:62ch;margin:0 0 16px;padding-left:20px}
.landing li{margin-bottom:8px}
.landing figure{margin:clamp(32px,5vw,56px) 0 0}

/* Text-Bild-Paar */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(28px,4.5vw,64px);align-items:center}
.duo figure{margin:0}

/* Merkmal-Chips unter dem Lead (Spezifität > .landing ul/li) */
.landing .chips{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 0;padding:0;list-style:none;max-width:none}
.landing .chips li{font-size:12.5px;letter-spacing:.06em;color:var(--body);border:1px solid var(--hairline);padding:9px 16px;white-space:nowrap;margin:0}

/* Dunkle Akzent-Karte mit Kennzahlen (Stil der Material-Sektion) */
.dark-card{background:var(--dark);color:#FAF9F6;padding:clamp(36px,5.5vw,72px) clamp(28px,4.5vw,64px)}
.dark-card h2{color:#FAF9F6}
.dark-card p{color:var(--dark-body);max-width:58ch}
.dark-card a{color:#FAF9F6;text-decoration:underline;text-underline-offset:3px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:28px 40px;margin:0 0 clamp(24px,3.5vw,40px)}
.stats dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--dark-mut);margin:0 0 10px}
.stats dd{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1;color:#FAF9F6}
.stats dd small{display:block;margin-top:8px;font-family:var(--sans);font-size:13px;color:var(--dark-body)}

/* FAQ als Akkordeon — nativ (<details>), voll indexierbar, ohne JS */
.faq details{border-top:1px solid var(--hairline)}
.faq details:last-of-type{border-bottom:1px solid var(--hairline)}
.faq summary{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:22px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.8vw,22px);line-height:1.3;color:var(--ink);margin:0}
.faq summary .ind{flex:none;width:22px;height:22px;position:relative;align-self:center}
.faq summary .ind::before,.faq summary .ind::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transition:transform .3s ease}
.faq summary .ind::before{width:15px;height:1.5px;transform:translate(-50%,-50%)}
.faq summary .ind::after{width:1.5px;height:15px;transform:translate(-50%,-50%)}
.faq details[open] summary .ind::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq summary:hover h3{color:var(--accent)}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.faq details p{margin:0;padding:0 46px 24px 0;max-width:70ch}
@media (max-width:640px){.faq details p{padding-right:0}}
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* Abschluss-CTA */
.cta-band{margin-top:clamp(64px,9vw,110px);background:var(--panel);padding:clamp(40px,6vw,64px) clamp(24px,4vw,48px);text-align:center}
.cta-band h2{max-width:none;margin-bottom:12px}
.cta-band p{margin:0 auto 28px;max-width:52ch}
.cta-band .cta-row{justify-content:center;margin-top:0}

/* Querverweis-Leiste zu Schwester-Seiten */
.related{margin-top:clamp(40px,6vw,64px);padding-top:24px;border-top:1px solid var(--hairline);font-size:14.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px 28px}
.related a{color:var(--body);text-decoration:underline;text-underline-offset:3px}