/* Mobile zuerst: Logo, Demo-Button, danach Navigation. */
.header--landing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 20px}
.header--landing .brand-logo{width:clamp(104px,30vw,150px);max-width:100%}
.demo-shop-button{display:flex;justify-content:center;align-items:center;justify-self:end;min-width:44px;min-height:44px;border-radius:12px;padding:4px}
.demo-shop-button img{display:block;width:clamp(100px,28vw,138px);max-width:100%;height:auto}
.demo-shop-button:hover,.demo-shop-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.landing-nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;font-size:14px;font-weight:650}
.landing-nav a{display:flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
.header .landing-nav a:hover{color:var(--accent)}
.landing-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;padding:40px 0}
.landing-hero>*{min-width:0}
.landing-hero h1{font-size:clamp(2.15rem,8vw,4.2rem);overflow-wrap:anywhere}
.landing-hero .lead{font-size:16px;max-width:570px}
.landing-statement{border:1px solid var(--line);border-radius:24px;padding:26px 22px;border-top:3px solid var(--accent)}
.landing-statement>p{font-size:clamp(2.5rem,9vw,4.7rem);font-weight:700;line-height:1.04;letter-spacing:-.05em;margin:24px 0}
.landing-statement .eyebrow{font-size:9px;letter-spacing:1px;flex-wrap:wrap}
.landing-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.landing-pills span{border:1px solid var(--line);border-radius:30px;padding:7px 12px;font-size:12px}
.landing-section{padding:36px 0;border-top:1px solid var(--line);scroll-margin-top:24px}
.landing-section .grid{grid-template-columns:minmax(0,1fr)}
.landing-section-head{max-width:680px;margin-bottom:30px}
.landing-section-head h2,.landing-license h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.15;letter-spacing:-.04em}
.landing-section h3{font-size:1.2rem;line-height:1.35;margin:0 0 12px}
.landing-section .card p{margin-bottom:0}
.landing-example{overflow-wrap:anywhere}
.landing-license{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:20px;padding:24px;scroll-margin-top:24px;margin-bottom:36px}
.landing-license p:last-child{margin-bottom:0}
.landing-faq{padding-bottom:0}
.landing-faq details{border-bottom:1px solid var(--line);padding:12px 0}
.landing-faq summary{padding:12px 0;line-height:1.5}
.landing-faq details p{max-width:760px;font-size:15px;margin:8px 0 20px}
.landing-faq summary:hover{color:var(--accent)}
@media(min-width:700px){
 .landing-nav{display:flex;flex-wrap:wrap;gap:8px 24px}
 .landing-section .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .landing-hero .lead{font-size:18px}
}
@media(min-width:1000px){
 .header--landing{grid-template-columns:180px minmax(126px,1fr) max-content;gap:24px}
 .header--landing .brand-logo{width:180px}
 .demo-shop-button{justify-self:center}
 .demo-shop-button img{width:118px}
 .landing-nav{grid-column:auto;justify-content:flex-end;gap:8px 22px}
 .landing-hero{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;padding:80px 0 68px}
 .landing-hero h1{font-size:clamp(2.4rem,4.8vw,4.2rem)}
 .landing-statement{padding:40px 32px}
 .landing-statement>p{margin:42px 0}
 .landing-license{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;padding:40px;margin-bottom:56px}
 .landing-section{padding:56px 0}
 .landing-section .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .landing-faq{padding-bottom:0}
}