*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-core);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--text-heading)}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-5)}
@media(min-width:768px){.container{padding:0 var(--space-6)}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Type roles --- */
.eyebrow{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-eyebrow);line-height:1.4}
.eyebrow--paper{color:var(--text-on-inverse-muted)}
.eyebrow--forest{color:var(--green-800)}
.display{font-family:var(--font-core);font-weight:400;line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--text-heading)}
.display--xl{font-size:var(--fs-display-xl)}.display--l{font-size:var(--fs-display-l)}.display--m{font-size:var(--fs-display-m)}.display--s{font-size:var(--fs-display-s)}
.display--paper{color:var(--text-on-inverse)}
.lead{max-width:var(--measure-body);color:var(--text-body)}
.lead--paper{color:var(--text-on-inverse-muted)}
.heading{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.heading .lead{margin-top:var(--space-1)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-3)}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:13px 28px;font-family:var(--font-core);font-size:var(--fs-body-s);font-weight:600;letter-spacing:var(--ls-button);text-transform:uppercase;text-decoration:none;line-height:1;border:1.5px solid transparent;border-radius:var(--radius-pill);cursor:pointer;background:var(--green-800);color:var(--paper-100);transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.btn:hover{background:var(--green-900);transform:translateY(-1px)}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:2px solid var(--green-400);outline-offset:2px}
.btn--sm{padding:9px 20px;font-size:var(--fs-micro)}
.btn--lg{padding:17px 38px}
.btn--secondary{background:transparent;color:var(--green-800);border-color:var(--green-800)}
.btn--secondary:hover{background:var(--green-800);color:var(--paper-100)}
.btn--ghost{background:transparent;color:var(--text-heading);padding:0;border:0}
.btn--ghost:hover{background:transparent;transform:none;text-decoration:underline;text-underline-offset:4px}
.btn--inverse{background:var(--paper-100);color:var(--green-800)}
.btn--inverse:hover{background:var(--white)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.btn--full{display:flex;width:100%}

/* --- Badge --- */
.badge{display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--radius-pill);border:1px solid transparent;font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--ls-button);text-transform:uppercase;line-height:1;background:var(--sand-200);color:var(--green-800)}
.badge--inverse{background:rgba(241,240,236,.14);color:var(--paper-100);border-color:var(--line-on-inverse)}
.badges{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* --- Accent band (Signatur-Motiv) --- */
.band{display:flex;width:100%;height:var(--band-h)}
.band--thin{height:var(--band-h-thin)}
.band>span{display:block}
.band--header>span:nth-child(1){flex:3.2;background:var(--green-400)}
.band--header>span:nth-child(2){flex:2.1;background:var(--clay-400)}
.band--header>span:nth-child(3){flex:3.6;background:var(--stone-300)}
.band--header>span:nth-child(4){flex:2.4;background:transparent}
.band--full>span:nth-child(1){flex:3;background:var(--green-400)}
.band--full>span:nth-child(2){flex:2;background:var(--clay-400)}
.band--full>span:nth-child(3){flex:3.4;background:var(--stone-300)}
.band--full>span:nth-child(4){flex:2.6;background:var(--green-800)}
.band--short>span:nth-child(1){flex:2;background:var(--green-400)}
.band--short>span:nth-child(2){flex:1.2;background:var(--clay-400)}
.band--short>span:nth-child(3){flex:1.6;background:var(--green-800)}
.band-stacked .band--top>span:nth-child(1){flex:6.4;background:transparent}
.band-stacked .band--top>span:nth-child(2){flex:3.6;background:var(--green-800)}

/* --- Header --- */
.site-header{background:var(--surface-page)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.site-header .logo img{height:52px;width:auto}
@media(min-width:768px){.site-header .container{padding-top:22px;padding-bottom:22px}.site-header .logo img{height:64px}}

/* --- Sections --- */
.section{padding:var(--section-y) 0}
.section--sand{background:var(--surface-sand)}
.section--forest{background:var(--surface-inverse)}
.section--deep{background:var(--surface-inverse-deep)}
.split{display:grid;gap:var(--space-7);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr .9fr;gap:var(--space-9)}.split--rev{grid-template-columns:.85fr 1fr}.split--rev>.split__media{order:-1}}

/* --- Blob image --- */
.blob{position:relative;width:100%;aspect-ratio:1/1}
.blob--wide{aspect-ratio:16/10}
.blob::before,.blob::after{content:"";position:absolute;opacity:.9}
.blob::before{inset:-6% -8% 22% 26%;background:var(--clay-400);border-radius:var(--blob-2)}
.blob::after{inset:26% 30% -8% -10%;background:var(--green-400);border-radius:var(--blob-3)}
.blob--sagelight::before{background:var(--green-200)}
.blob--clayfirst::after{background:var(--clay-400)}.blob--clayfirst::before{background:var(--green-400)}
.blob img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;transition:transform var(--dur-slow) var(--ease-out-soft)}
.blob:hover img{transform:scale(1.02)}
.blob--plain::before,.blob--plain::after{display:none}
.blob--plain{max-width:560px;margin:0 auto}
@media(max-width:899px){.blob{max-width:420px;margin:0 auto}.blob--wide{max-width:100%}}

/* --- Kurzfakten --- */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5) var(--space-6)}
@media(min-width:900px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{display:flex;flex-direction:column;gap:var(--space-2)}
.fact::before{content:"";width:34px;height:3px;background:var(--green-400)}
.fact__label{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-heading)}
.fact__value{font-size:var(--fs-body-s);color:var(--text-body)}

/* --- Benefit cards --- */
.cards{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media(min-width:600px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-panel);background:var(--surface-card);color:var(--text-body);box-shadow:var(--shadow-card)}
.card::before{content:"";width:34px;height:3px;background:var(--green-400)}
.card h3{font-size:var(--fs-body-l);font-weight:500;line-height:var(--lh-tight);letter-spacing:.02em;text-transform:uppercase;color:var(--text-heading);overflow-wrap:anywhere;hyphens:auto}
.card p{font-size:var(--fs-body-s)}
.benefits-head{display:grid;gap:var(--space-6);align-items:end;margin-bottom:var(--space-7)}
@media(min-width:900px){.benefits-head{grid-template-columns:1fr 1fr;gap:var(--space-9)}}

/* --- Bullet list (∞) --- */
.bullets{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.bullets li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:start;font-size:var(--fs-body-s);color:var(--text-on-inverse-muted)}
.bullets li::before{content:"∞";color:var(--green-200);font-size:1.15em;line-height:var(--lh-body)}
.bullets--forest li{color:var(--text-body)}.bullets--forest li::before{color:var(--green-400)}
.two-col{display:grid;gap:var(--space-7)}
@media(min-width:768px){.two-col{grid-template-columns:1fr 1fr;gap:var(--space-8)}}

/* --- Info block --- */
.info{display:flex;flex-direction:column;gap:var(--space-2)}
.info__label{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-eyebrow)}
.info--paper .info__label{color:var(--green-200)}
.info__lines{font-size:var(--fs-body-s);color:var(--text-body)}
.info--paper .info__lines{color:var(--text-on-inverse-muted)}
.info--paper a{color:var(--paper-100)}
.stack{display:flex;flex-direction:column;gap:var(--space-6);justify-content:center}

/* --- Form --- */
.form-card{background:var(--surface-card);border-radius:var(--radius-panel);box-shadow:var(--shadow-card);padding:var(--space-5);margin-top:var(--space-6)}
@media(min-width:768px){.form-card{padding:var(--space-6)}}
.steps{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-6)}
.steps__label{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-eyebrow)}
.steps__bar{display:flex;gap:var(--space-1)}
.steps__bar span{flex:1;height:3px;background:var(--stone-300);transition:background var(--dur-base) var(--ease-standard)}
.steps__bar span.is-done{background:var(--green-800)}
.panel{display:none;flex-direction:column;gap:var(--space-5)}
.panel.is-active{display:flex}
.panel__title{font-size:var(--fs-display-s);font-weight:400;line-height:var(--lh-display);text-transform:uppercase;color:var(--text-heading)}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field__label{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-heading)}
.field__hint{font-size:var(--fs-body-s);color:var(--text-muted);margin-top:-4px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{width:100%;padding:14px var(--space-4);background:var(--field-bg);border:1px solid var(--field-border);border-radius:var(--radius-field);font-family:var(--font-core);font-size:16px;line-height:var(--lh-body);color:var(--text-body);outline:none;transition:border-color var(--dur-base) var(--ease-standard)}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field textarea:focus{border-color:var(--field-border-focus)}
.field input::placeholder,.field textarea::placeholder{color:var(--field-placeholder)}
.field.has-error .field__label{color:var(--status-error)}
.field.has-error input,.field.has-error textarea{border-color:var(--status-error)}
.field__error{display:none;font-size:var(--fs-body-s);color:var(--status-error)}
.field.has-error .field__error{display:block}
.grid-2{display:grid;gap:var(--space-4)}
@media(min-width:600px){.grid-2{grid-template-columns:1fr 1fr}}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-flex;align-items:center;padding:11px 18px;border-radius:var(--radius-pill);border:1.5px solid var(--green-800);font-size:var(--fs-body-s);line-height:1;color:var(--green-800);background:transparent;cursor:pointer;transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);user-select:none}
.chip input:checked+span{background:var(--green-800);color:var(--paper-100)}
.chip input:focus-visible+span{outline:2px solid var(--green-400);outline-offset:2px}
.chip span:hover{background:var(--sand-200)}
.chip input:checked+span:hover{background:var(--green-900)}
.file{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:14px var(--space-4);border:1px dashed var(--field-border);border-radius:var(--radius-field);font-size:var(--fs-body-s);color:var(--field-placeholder);cursor:pointer;background:transparent}
.file.has-file{color:var(--text-body);border-style:solid;border-color:var(--green-400)}
.file input{display:none}
.file b{font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-button);text-transform:uppercase;color:var(--green-800);white-space:nowrap}
.check{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:start;font-size:var(--fs-body-s);color:var(--text-body);cursor:pointer}
.check input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--green-800)}
.check.has-error{color:var(--status-error)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-2)}
.form-error{display:none;padding:var(--space-4);border-radius:var(--radius-panel);background:var(--sand-200);color:var(--status-error);font-size:var(--fs-body-s)}
.form-error.is-visible{display:block}
.success{display:none;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.success.is-active{display:flex}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.next-steps{display:flex;flex-direction:column;gap:var(--space-5)}
.next-steps ol{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-4);counter-reset:s}
.next-steps li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:start;font-size:var(--fs-body-s);color:var(--text-body)}
.next-steps li::before{counter-increment:s;content:counter(s);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--green-800);color:var(--paper-100);font-size:var(--fs-eyebrow);font-weight:500}

/* --- Footer --- */
.site-footer{background:var(--footer-bg);color:var(--text-on-inverse-muted)}
.site-footer .container{display:grid;gap:var(--space-7);padding-top:var(--space-8);padding-bottom:var(--space-8)}
@media(min-width:768px){.site-footer .container{grid-template-columns:1.2fr 1fr 1fr}}
.site-footer .logo img{height:60px;width:auto}
.site-footer p{font-size:var(--fs-body-s);max-width:38ch}
.site-footer .legal{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--fs-body-s)}
.site-footer .legal a{color:var(--paper-100);text-decoration:none}
.site-footer .legal a:hover{text-decoration:underline}
.site-footer .credit{grid-column:1/-1;font-size:var(--fs-micro);letter-spacing:.04em;color:var(--green-500);margin-top:var(--space-4)}

/* --- Sticky CTA (mobil) --- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--space-4) calc(10px + env(safe-area-inset-bottom));background:rgba(241,240,236,.96);border-top:1px solid var(--line-hairline);transform:translateY(110%);transition:transform var(--dur-base) var(--ease-standard)}
.sticky-cta.is-visible{transform:none}
@media(min-width:768px){.sticky-cta{display:none}}
body.has-sticky{padding-bottom:72px}

/* --- Consent --- */

/* --- Legal pages --- */
.legal-page{max-width:var(--container-narrow);margin:0 auto;padding:var(--section-y) var(--space-5)}
.legal-page h1{margin-bottom:var(--space-6)}
.legal-page h2{font-size:var(--fs-title);font-weight:500;text-transform:uppercase;letter-spacing:.02em;color:var(--text-heading);margin:var(--space-7) 0 var(--space-3)}
.legal-page p,.legal-page li{font-size:var(--fs-body-s);max-width:70ch}
.legal-page p+p{margin-top:var(--space-3)}
.legal-page ul{padding-left:20px;margin:var(--space-3) 0}
.todo{background:var(--sand-200);padding:2px 6px;border-radius:3px;color:var(--clay-600)}

/* --- Reveal --- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-reveal) var(--ease-out-soft),transform var(--dur-reveal) var(--ease-out-soft)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn,.blob img,.chip span{transition:none}}