:root{--tanne:#0d4f33;--tanne-2:#093a25;--blatt:#688d3f;--limette:#afca0b;--wiese:#eff8c9;--wiese-2:#f7fbe6;--sonne:#ffb600;--orange:#ee7445;--tinte:#1d2a22;--grau:#56655b;--linie:#dbe6c6;--weiss:#fff;--schatten:0 10px 30px rgba(13,79,51,.10)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--weiss);color:var(--tinte);font:400 16px/1.7 "Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--tanne)}
h1,h2,h3{font-family:Nunito,"Nunito Sans",system-ui,sans-serif;font-weight:800;line-height:1.22;color:var(--tinte);margin:0 0 .6em}
h1{font-size:clamp(1.7rem,1.1rem + 2.2vw,2.6rem)}
h2{font-size:clamp(1.35rem,1rem + 1.3vw,1.95rem)}
h3{font-size:1.15rem}
h3.gross{font-size:clamp(1.35rem,1rem + 1.3vw,1.95rem)}
p{margin:0 0 1em}
.rahmen{width:min(1120px,100% - 32px);margin-inline:auto}
.schmal{width:min(780px,100% - 32px);margin-inline:auto}
.leiste{background:var(--tanne);color:#e9f3d2;font-size:.82rem;text-align:center;padding:6px 16px}
.leiste span+span::before{content:"·";margin:0 .7em;color:var(--limette)}
.kopf{background:linear-gradient(90deg,#f8fcdf,#ecf9d8);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:20}
.kopf__in{display:flex;align-items:center;gap:22px;min-height:76px}
.kopf__logo{flex:0 0 auto}
.kopf__logo img{width:min(300px,46vw)}
.kopf__nav{display:flex;gap:26px;margin-right:auto}
.kopf__nav a{text-decoration:none;color:var(--tinte);font-weight:600;padding:6px 0;border-bottom:2px solid transparent}
.kopf__nav a:hover,.kopf__nav a[aria-current]{border-bottom-color:var(--tanne)}
.kopf .knopf{width:236px}
.kopf__burger{display:none;background:none;border:1px solid var(--linie);border-radius:8px;width:44px;height:40px;padding:0;cursor:pointer;color:var(--tanne)}
.kopf__burger svg{width:22px;height:22px;margin:auto;display:block}
.knopf{display:block;background:none;border:0;padding:0;cursor:pointer;width:100%;max-width:100%;transition:transform .15s}
.knopf img{width:100%;height:auto}
.knopf:hover{transform:translateY(-1px)}
.knopf:focus-visible{outline:3px solid var(--sonne);outline-offset:3px;border-radius:40px}
.pfad{font-size:.85rem;color:var(--grau);padding:16px 0 4px}
.pfad a{color:var(--grau)}
.pfad__sep{margin:0 .5em}
/* Startbild: Markenbanner Wiese */
.wiese{position:relative;background:#f1f6c3}
.wiese__bild img{width:100%;aspect-ratio:1464/625;object-fit:cover}
.wiese__text{position:absolute;right:max(16px,calc((100% - 1120px)/2));top:50%;transform:translateY(-50%);width:min(500px,44%);background:rgba(255,255,255,.86);padding:28px 30px;border-radius:18px;box-shadow:var(--schatten)}
.wiese__text h1{color:var(--tanne);margin-bottom:.4em}
.wiese__text p{color:var(--grau);margin-bottom:.9em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.chips li{font-size:.78rem;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--wiese);color:var(--tanne)}
.chips li:nth-child(2){background:#fff1cc;color:#7a5200}
.chips li:nth-child(3){background:#e4efe0}
.wiese__text .knopf{max-width:330px}
/* zentrierter Text auf Verlauf */
.frage{background:linear-gradient(140deg,#f6fbd4 0%,#e3f8cf 60%,#d9f6d4 100%);padding:56px 0}
.frage ul{padding-left:1.2em;margin:0 0 1.1em}
.frage li{margin:.25em 0}
.frage b{color:var(--tanne)}
/* Bild/Text-Reihen */
.reihe{padding:56px 0}
.reihe__paar{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.reihe__paar+.reihe__paar{margin-top:48px}
.reihe__paar:nth-child(even) .reihe__bild{order:2}
.reihe__bild{background:#fff;border-radius:14px;box-shadow:var(--schatten);padding:18px}
.reihe__kick{color:var(--blatt);font-weight:700;font-size:.92rem;margin-bottom:.4em}
.reihe__preis{font:800 1.4rem Nunito,sans-serif;color:var(--tanne);margin:.2em 0 .8em}
.reihe__preis small{font:400 .8rem "Nunito Sans",sans-serif;color:var(--grau);margin-left:.4em}
.reihe .knopf{max-width:320px}
/* Schritte */
.schritte{padding:48px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.schritte ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.schritte li{position:relative;counter-increment:s;padding-top:58px}
.schritte li::before{content:counter(s);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;border:2px dashed var(--blatt);display:grid;place-items:center;font:800 1.1rem Nunito,sans-serif;color:var(--tanne);background:var(--wiese-2)}
.schritte li:not(:last-child)::after{content:"";position:absolute;top:22px;left:56px;right:-10px;border-top:2px dashed #b9cf8f}
.schritte b{display:block;font-family:Nunito,sans-serif;font-size:1.05rem;color:var(--tanne);margin-bottom:4px}
.schritte span{font-size:.92rem;color:var(--grau)}
/* Produktfamilie */
.familie{padding:56px 0}
.familie__sub{color:var(--grau);margin-top:-.3em}
.karten{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:24px}
.karte{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;box-shadow:var(--schatten);background:#fff;position:relative}
.karte__bild{display:block;aspect-ratio:1/1;background:#fff;padding:14px}
.karte__bild img{width:100%;height:100%;object-fit:contain}
.karte__marke{position:absolute;left:12px;top:12px;background:#fff7d6;color:#6b4b00;font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:999px;border:1px solid #f3dc8a}
.karte__fuss{background:linear-gradient(180deg,#f2fbe1,#e7f8dc);padding:16px 16px 18px;text-align:center;display:flex;flex-direction:column;gap:8px;flex:1}
.karte__name{font:800 1.02rem/1.3 Nunito,sans-serif;color:var(--tinte);text-decoration:none}
.karte h2,.karte h3{font-size:1rem;line-height:1.3}
.vorteile__solo{max-width:min(560px,100%);margin:0 auto;border-radius:12px}
.karte__text{font-size:.88rem;color:var(--grau);margin:0}
.karte__wert{font:800 1.15rem Nunito,sans-serif;color:var(--tanne);margin-top:auto}
.karte__wert small{display:block;font:400 .75rem "Nunito Sans",sans-serif;color:var(--grau)}
.karte__sterne{font-size:.8rem;color:var(--grau);display:flex;justify-content:center;align-items:center;gap:6px}
.stern{display:inline-block;position:relative;width:86px;height:15px;background:linear-gradient(90deg,#d8dccf 0 0);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 15'%3E%3Cg fill='%23000'%3E%3Cpath id='a' d='M7.5 0l2.2 4.7 5.1.6-3.8 3.5 1 5.1-4.5-2.6L3 13.9l1-5.1L.2 5.3l5.1-.6z'/%3E%3Cuse href='%23a' x='17.6'/%3E%3Cuse href='%23a' x='35.2'/%3E%3Cuse href='%23a' x='52.8'/%3E%3Cuse href='%23a' x='70.4'/%3E%3C/g%3E%3C/svg%3E") 0 0/86px 15px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 15'%3E%3Cg fill='%23000'%3E%3Cpath id='a' d='M7.5 0l2.2 4.7 5.1.6-3.8 3.5 1 5.1-4.5-2.6L3 13.9l1-5.1L.2 5.3l5.1-.6z'/%3E%3Cuse href='%23a' x='17.6'/%3E%3Cuse href='%23a' x='35.2'/%3E%3Cuse href='%23a' x='52.8'/%3E%3Cuse href='%23a' x='70.4'/%3E%3C/g%3E%3C/svg%3E") 0 0/86px 15px no-repeat}
.stern i{position:absolute;inset:0 auto 0 0;background:var(--sonne)}
/* Vorteile */
.vorteile{padding:48px 0;background:var(--wiese-2)}
.vorteile__raster{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}
.vorteile__raster img{border-radius:10px;width:100%}
/* Band */
.band img{width:100%}
/* Vergleich */
.vergleich{padding:56px 0}
.tafel{width:100%;border-collapse:collapse;margin-top:18px;font-size:.95rem}
.tafel th,.tafel td{border-bottom:1px solid var(--linie);padding:12px 14px;text-align:left;vertical-align:top}
.tafel thead th{background:none;vertical-align:bottom}
.tafel thead img{width:110px;height:110px;object-fit:contain;margin-bottom:6px}
.tafel thead a{font:800 .98rem/1.3 Nunito,sans-serif;color:var(--tinte);text-decoration:none}
.tafel tbody th{background:#f3f5ef;color:var(--grau);font-weight:600;width:22%}
.tafel tfoot td{border:0;padding-top:16px}
.tafel tfoot .knopf{max-width:250px}
/* Stimmen */
.stimmen{padding:56px 0;background:#f2f8e4}
.stimmen__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.stimme{background:#fff;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 8px rgba(13,79,51,.06)}
.stimme b{font-family:Nunito,sans-serif;color:var(--tinte)}
.stimme__text{font-size:.92rem;color:#38463d}
.stimme__text p{margin:0 0 .6em}
.stimme__mehr summary{cursor:pointer;color:var(--blatt);font-weight:700;font-size:.85rem;margin-bottom:.5em}
.stimme__mehr[open] summary{display:none}
.stimme footer{margin-top:auto;font-size:.8rem;color:var(--grau);display:flex;flex-direction:column;gap:2px}
.stimme footer strong{color:var(--tinte);font-weight:700}
.stimme footer a{color:var(--blatt);font-weight:600}
/* FAQ */
.fragen{padding:56px 0}
.fragen__paar{display:grid;grid-template-columns:1fr 2fr;gap:48px}
.fragen__links a{display:inline-block;margin-top:8px;border:1.5px solid var(--tanne);color:var(--tanne);border-radius:999px;padding:7px 18px;text-decoration:none;font-weight:700;font-size:.9rem}
.akk{border-top:1px solid var(--linie)}
.akk details{border-bottom:1px solid var(--linie)}
.akk summary{cursor:pointer;list-style:none;padding:15px 36px 15px 0;font-weight:700;position:relative}
.akk summary::-webkit-details-marker{display:none}
.akk summary::after{content:"+";position:absolute;right:4px;top:11px;width:22px;height:22px;border:1px solid var(--linie);border-radius:50%;display:grid;place-items:center;font-weight:400;color:var(--tanne)}
.akk details[open] summary::after{content:"–"}
.akk details p{padding:0 0 14px;margin:0;color:#3b4a40}
/* SEO */
.wissen{padding:48px 0 56px;border-top:1px solid var(--linie)}
.wissen h3{margin-top:1.4em;color:var(--tanne)}
.hinweis{background:#fff7e0;border-left:4px solid var(--sonne);padding:12px 16px;border-radius:6px;font-size:.92rem}
/* Fuss */
.fuss{background:var(--tanne);color:#dbe9cf;padding:48px 0 22px;margin-top:0}
.fuss__raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:28px}
.fuss h4{font:800 .95rem Nunito,sans-serif;color:#fff;margin:0 0 10px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin:0 0 6px}
.fuss a{color:#dbe9cf;text-decoration:none;font-size:.92rem}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss address{font-style:normal;font-size:.92rem;line-height:1.6}
.fuss__tafel{width:210px;margin-bottom:12px;border-radius:4px}
.fuss__unten{border-top:1px solid rgba(255,255,255,.18);margin-top:30px;padding-top:16px;font-size:.82rem;color:#b9d0b0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* Kategorie */
.kat{padding:8px 0 40px}
.kat__intro{max-width:780px;color:#3b4a40}
/* PDP */
.pdp{padding:6px 0 30px}
.pdp__titel{font-size:clamp(1.45rem,1rem + 1.6vw,2.1rem);margin:.3em 0 .25em}
.pdp__kick{color:var(--blatt);font-weight:700;margin:0 0 18px}
.pdp__oben{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:start}
.galerie__gross{border:1px solid var(--linie);border-radius:12px;padding:14px;background:#fff}
.galerie__gross img{width:100%;aspect-ratio:1/1;object-fit:contain}
.galerie__mini{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.galerie__mini button{border:1px solid var(--linie);border-radius:8px;padding:3px;background:#fff;cursor:pointer}
.galerie__mini button.gewaehlt{border-color:var(--tanne);box-shadow:0 0 0 2px var(--limette)}
.galerie__mini img{aspect-ratio:1/1;object-fit:contain;width:100%}
.preisbox{background:var(--wiese-2);border:1px solid var(--linie);border-radius:14px;padding:22px}
.preisbox__label{font-size:.85rem;color:var(--grau);margin:0}
.preisbox__wert{font:800 2rem Nunito,sans-serif;color:var(--tanne);margin:0}
.preisbox__mwst{font-size:.82rem;color:var(--grau);margin:0 0 12px}
.preisbox__sterne{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--grau);margin-bottom:14px}
.preisbox ul{margin:16px 0 0;padding-left:1.1em;font-size:.93rem}
.preisbox li{margin:.3em 0}
.kenn{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0;padding:16px;border-radius:12px;background:#f6f7f3}
.kenn div{display:flex;gap:10px;align-items:center;font-size:.86rem;color:var(--grau)}
.kenn svg{flex:0 0 34px;width:34px;height:34px;color:var(--tanne)}
.kenn b{display:block;color:var(--tinte);font-size:.92rem}
.pdp__unten{display:grid;grid-template-columns:1.6fr 1fr;gap:36px;align-items:start}
.pdp__unten .akk summary{font-family:Nunito,sans-serif;font-size:1.08rem}
.daten{width:100%;border-collapse:collapse;font-size:.92rem;margin-bottom:16px}
.daten th,.daten td{padding:8px 10px;border-bottom:1px solid var(--linie);text-align:left;vertical-align:top}
.daten th{width:38%;color:var(--grau);font-weight:600;background:#f6f7f3}
.dazu h2{font-size:1.2rem}
.dazu__liste{display:grid;gap:12px}
.mini{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:center;border:1px solid var(--linie);border-radius:10px;padding:8px;text-decoration:none;color:var(--tinte)}
.mini img{width:76px;height:76px;object-fit:contain}
.mini b{display:block;font-size:.92rem;line-height:1.3}
.mini span{font-size:.85rem;color:var(--tanne);font-weight:700}
/* Ratgeber */
.ratgeber{padding:6px 0 48px}
.ratgeber__lede{font-weight:700;font-size:1.05rem}
.inhalt{background:#fbfaf3;border:1px solid #ece6cf;border-radius:12px;padding:16px 20px;margin:18px 0 26px}
.inhalt b{font-family:Nunito,sans-serif}
.inhalt ol{margin:.5em 0 0;padding-left:1.2em}
.inhalt a{text-decoration:none}
.ratgeber h2{margin-top:1.5em}
.empf{margin-top:30px;padding:22px;border-radius:14px;background:var(--wiese-2);border:1px solid var(--linie)}
.empf .karten{grid-template-columns:repeat(3,1fr)}
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:24px 0 40px}
.hub a{display:block;text-decoration:none;color:var(--tinte);border-radius:14px;overflow:hidden;box-shadow:var(--schatten);background:#fff}
.hub img{aspect-ratio:16/10;object-fit:cover;width:100%}
.hub div{padding:14px 16px 18px}
.hub b{display:block;font:800 1.05rem/1.3 Nunito,sans-serif;margin-bottom:6px}
.hub span{font-size:.9rem;color:var(--grau)}
/* Service */
.seite{padding:6px 0 56px}
.seite address{font-style:normal;background:var(--wiese-2);border:1px solid var(--linie);border-radius:10px;padding:14px 18px;margin:0 0 1em}
.seite ol,.seite ul{padding-left:1.3em}
.seite li{margin:.3em 0}
.post{display:inline-block;font:800 1.1rem Nunito,sans-serif;color:var(--tanne);background:#fff;border:2px dashed var(--blatt);border-radius:10px;padding:10px 16px;margin:0 0 1em;text-decoration:none}
.leer{padding:70px 0;text-align:center}
.leer ul{list-style:none;padding:0;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
@media (max-width:960px){
 .kopf__nav{display:none;position:absolute;left:0;right:0;top:100%;background:#f8fcdf;flex-direction:column;gap:0;padding:6px 16px 14px;border-bottom:1px solid var(--linie)}
 .kopf.nav-auf .kopf__nav{display:flex}
 .kopf__nav a{padding:10px 0}
 .kopf__burger{display:block;margin-left:auto}
 .kopf .knopf{width:186px}
 .karten{grid-template-columns:repeat(2,1fr)}
 .reihe__paar,.pdp__oben,.pdp__unten,.fragen__paar{grid-template-columns:1fr;gap:28px}
 .reihe__paar:nth-child(even) .reihe__bild{order:0}
 .stimmen__raster,.hub,.empf .karten{grid-template-columns:repeat(2,1fr)}
 .schritte ol{grid-template-columns:repeat(2,1fr)}
 .schritte li::after{display:none}
 .fuss__raster{grid-template-columns:1fr 1fr}
 .wiese__text{position:static;transform:none;width:auto;margin:-40px 16px 0;padding:22px}
}
@media (max-width:600px){
 .kopf{position:relative}
 .kopf__in{gap:10px 12px;min-height:0;flex-wrap:wrap;padding:10px 0 12px}
 .kopf__logo img{width:min(230px,60vw)}
 .kopf .knopf{width:236px;flex:0 0 236px;margin:0 auto;order:3}
 .kopf__nav{order:4}
 .stimmen__raster,.hub,.empf .karten,.vorteile__raster{grid-template-columns:1fr}
 .karten{gap:12px}
 .karte__fuss{padding:12px 10px 14px}
 .karte__text{display:none}
 .kenn{grid-template-columns:1fr}
 .galerie__mini{grid-template-columns:repeat(4,1fr)}
 .tafel,.tafel thead,.tafel tbody,.tafel tfoot,.tafel tr,.tafel th,.tafel td{display:block;width:100%}
 .tafel thead tr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
 .tafel thead th:first-child{display:none}
 .tafel thead th{border:0;padding:4px;text-align:center;font-size:.8rem}
 .tafel thead img{width:72px;height:72px;margin:0 auto 4px}
 .tafel thead a{font-size:.8rem}
 .tafel tbody tr{border-bottom:1px solid var(--linie);padding:8px 0}
 .tafel tbody th{background:none;padding:4px 0;border:0;color:var(--tanne);font-weight:800}
 .tafel tbody td{border:0;padding:2px 0 2px 0;font-size:.9rem}
 .tafel tbody td::before{content:attr(data-k) ": ";font-weight:700;color:var(--grau)}
 .tafel tfoot tr{display:grid;gap:8px}
 .tafel tfoot td{padding:0}
 .tafel tfoot td::before{content:attr(data-k);display:block;font-size:.8rem;font-weight:700;color:var(--grau);margin-bottom:2px}
 .tafel tfoot td:first-child{display:none}
 .fuss__raster{grid-template-columns:1fr}
}