:root{--bg:#EEF3F7;--ink:#0F2230;--mut:#4A6172;--panel:#fff;--line:#CBD8E2;--deep:#082235;--deep2:#0E3A55;--on:#EAF4FB;--q:#2FB0F5;--ocker:#C4622D;--ockink:#9A4318;--btn:#0B6EAE;--btni:#fff;--ok:#8DB10A;--okink:#4F6B00;--mid:#C9A227;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#08171F;--ink:#E4EEF5;--mut:#9DB4C4;--panel:#0E2735;--line:#1F4357;--deep:#051520;--btn:#2FB0F5;--btni:#04202E;--ockink:#E58A57;--okink:#B5D44A}}
:root[data-theme="dark"]{--bg:#08171F;--ink:#E4EEF5;--mut:#9DB4C4;--panel:#0E2735;--line:#1F4357;--deep:#051520;--btn:#2FB0F5;--btni:#04202E;--ockink:#E58A57;--okink:#B5D44A}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 "Source Serif 4",Georgia,"Times New Roman",serif}
h1,h2,h3,button,.ui{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
h1{font-size:clamp(2.1rem,6vw,3.6rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 1rem;font-weight:700}
h2{font-size:clamp(1.5rem,4vw,2.2rem);line-height:1.12;letter-spacing:-.015em;margin:0 0 .8rem;font-weight:700}
h3{margin:0 0 .3rem;font-size:1.2rem;font-weight:700}
p{margin:0 0 1rem;max-width:64ch}
a{color:inherit}
button{font-size:1rem;cursor:pointer;min-height:44px}
:focus-visible{outline:3px solid var(--q);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.top{background:var(--deep);color:var(--on)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;min-height:60px;gap:16px}
.logo{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:700;text-decoration:none;font-size:1.1rem}
.top nav{display:flex;gap:20px;font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:.95rem;align-items:center}
.top nav a{text-decoration:none;opacity:.85}.top nav a:hover{opacity:1}

.go{background:var(--q);color:#06222A;padding:8px 14px;border-radius:99px;opacity:1!important}
.hero{background:var(--deep);color:var(--on);padding:36px 0 56px}
.hero .wrap{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:860px){.hero .wrap{grid-template-columns:1.15fr .85fr;align-items:center}}
.hero p.lead{font-size:1.2rem;opacity:.9}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:1.4rem 0 .6rem}
.chip{background:transparent;color:var(--on);border:1.5px solid #3E6F94;border-radius:99px;padding:8px 16px}
.chip:hover{border-color:var(--q)}
.chip[aria-pressed="true"]{background:var(--q);color:#06222A;border-color:var(--q)}
.cap{min-height:7.5em;font-size:1rem;opacity:.95}
.btn{display:inline-block;background:var(--btn);color:var(--btni);border:0;border-radius:10px;padding:10px 18px;font-weight:500;text-decoration:none;font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.5}
.hero .btn{background:var(--q);color:#06222A}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
figure{margin:0}
#well{width:100%;max-width:380px;height:auto;display:block;margin:0 auto}
#well *{transition:opacity .5s,transform .6s}
#well #o,#well #sa,#well #sl{opacity:0}
#well[data-s="eng"] #o{opacity:.8}#well[data-s="braun"] #o{opacity:1}
#well[data-s="sand"] #sa{opacity:1}#well[data-s="schleim"] #sl{opacity:1}
#well #wat{transform-box:fill-box;transform-origin:bottom}
#well[data-s="luft"] #wat{transform:scaleY(.28)}
@media(prefers-reduced-motion:reduce){#well *{transition:none}html{scroll-behavior:auto}}
section.s{padding:56px 0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,4vw,32px)}
.prog{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--mut);font-size:.95rem;margin-bottom:.4rem}
.opts{display:grid;gap:10px;margin:1rem 0}
.opt{text-align:left;background:var(--bg);color:var(--ink);border:1.5px solid var(--line);border-radius:10px;padding:12px 16px}
.opt:hover{border-color:var(--btn)}
.hint{color:var(--mut);font-size:.98rem}
.res{border-left:5px solid var(--btn);padding:2px 0 2px 18px;margin:1.4rem 0}.res.second{border-color:var(--line)}
.tag{display:inline-block;font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:.9rem;color:var(--ockink);border:1.5px solid var(--ockink);border-radius:99px;padding:1px 12px;margin-bottom:.5rem}
.warn{background:rgba(196,98,45,.12);border-left:5px solid var(--ocker);padding:12px 16px;border-radius:0 10px 10px 0;margin:1rem 0}
ul{padding-left:1.2rem;margin:.3rem 0 .8rem}li{margin-bottom:.3rem}
.rows{border-top:1px solid var(--line)}
.row{display:grid;gap:10px;padding:26px 0;border-bottom:1px solid var(--line)}
@media(min-width:760px){.row{grid-template-columns:220px 1fr;gap:32px}}
.row p{margin:0 0 .8rem}
.row.pr .pic{max-width:none;margin:0}.row.pr h3{font-size:1.45rem;margin-bottom:.5rem}
@media(min-width:760px){.row.pr{grid-template-columns:minmax(0,360px) 1fr;gap:36px;align-items:center}}
.phead{display:grid;gap:18px;margin:0 0 1.2rem;align-items:start}@media(min-width:640px){.phead{grid-template-columns:220px 1fr}}
.pimg{display:block;width:100%;max-width:260px;height:auto;background:#fff;border-radius:14px;padding:10px;border:1px solid var(--line)}.phead .kurz{margin-bottom:1rem}
.buy{display:grid;gap:10px;margin:1rem 0 .4rem}@media(min-width:700px){.buy.row3{grid-template-columns:repeat(3,1fr)}.buy.row2{grid-template-columns:repeat(2,1fr)}}
.buylabel{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:.85rem;color:var(--mut);letter-spacing:.04em;text-transform:uppercase}
.buybtn{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#96BE0A;color:#102000;text-decoration:none;font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1.1rem;padding:16px 20px;border-radius:12px;box-shadow:0 3px 0 rgba(16,32,0,.35);min-height:56px}
.buybtn:hover{background:#A8D40C;transform:translateY(-1px)}.buybtn:active{transform:translateY(1px);box-shadow:none}.buybtn b{font-weight:700}.buybtn span{font-size:1.4rem;line-height:1}
.buynote{font-size:.92rem;color:var(--mut);margin:.4rem 0 0}
.photo{margin:1.4rem 0}.photo img{display:block;width:100%;height:auto;border-radius:12px}.photo.sm{max-width:360px}.photo figcaption{margin-top:6px}
.calc{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.calc{grid-template-columns:1fr 1fr;align-items:start}}
label{display:block;font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;margin-bottom:12px}
input{width:100%;font:inherit;font-size:1.2rem;padding:10px 12px;margin-top:4px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.meter{height:14px;background:var(--line);border-radius:99px;overflow:hidden;margin:.6rem 0}
.meter i{display:block;height:100%;width:0;background:var(--btn);transition:width .5s}
.big{font:700 3rem/1 "Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
dl{margin:1rem 0;display:grid}
dl div{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
@media(min-width:600px){dl div{grid-template-columns:190px 1fr;gap:20px}}
dt{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--mut)}dd{margin:0}
.crumb{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:.95rem;color:var(--mut);margin-bottom:1.2rem}
.crumb a{text-underline-offset:3px}
.art{max-width:720px;margin:0 auto;padding:36px 20px 64px}
.art h1{font-size:clamp(1.9rem,5vw,2.8rem)}
.art h2{margin-top:2.4rem;font-size:1.5rem}
.kurz{font-size:1.2rem;border-left:5px solid var(--btn);padding-left:18px;margin:0 0 1.5rem}
.amp{display:grid;gap:10px;margin:1rem 0}
.amp div{border-left:6px solid var(--ok);padding:4px 0 4px 14px}
.amp div.m{border-color:var(--mid)}.amp div.r{border-color:var(--ocker)}
.src{margin-top:2.4rem;padding:16px 18px;border:1px dashed var(--line);border-radius:10px;font-size:.95rem;color:var(--mut)}
.src p{margin:0 0 .5rem}
.cta{margin-top:2.4rem;background:var(--deep);color:var(--on);border-radius:14px;padding:24px}
.cta h2{margin-top:0;color:var(--on)}.cta .btn{background:var(--q);color:#06222A}
.plist{border-top:1px solid var(--line)}
.plist a.it{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none}
@media(min-width:700px){.plist a.it{grid-template-columns:1fr 230px;gap:24px;align-items:center}}
.plist a.it:hover b{text-decoration:underline}
.badge{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:.88rem;border-radius:99px;padding:2px 12px;border:1.5px solid var(--line);color:var(--mut);justify-self:start}
.badge.ok{border-color:var(--ok);color:var(--okink)}
.tight{margin:0}
.logo{display:flex;align-items:center;gap:10px}.logoimg{height:34px;width:auto;display:block}
.figlink{display:block}.figcap{text-align:center;margin-top:10px;font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}.figcap a{color:var(--q)}
.badge.mid{border-color:var(--mid);color:var(--ockink)}
.pic{display:block;max-width:440px;margin:0 0 14px;border-radius:12px;overflow:hidden;line-height:0}.pic svg,.pichero svg{width:100%;height:auto;display:block}
.pichero{margin:0 0 1.4rem}.pichero svg{border-radius:14px}
.cmp{border-collapse:collapse;width:100%;min-width:680px;font-size:.98rem}.cmp th,.cmp td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}.cmp th{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--mut);font-weight:500}
.fgrid{display:grid;gap:20px;margin:1rem 0 1.6rem}@media(min-width:760px){.fgrid{grid-template-columns:300px 1fr;align-items:start}}
.zbtn{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 .9rem}
.zbtn button{background:transparent;color:var(--ink);border:1.5px solid var(--line);border-radius:99px;padding:6px 14px}
.zbtn button[aria-pressed="true"]{background:var(--btn);color:var(--btni);border-color:var(--btn)}
.zn{fill:rgba(47,176,245,0);stroke:rgba(47,176,245,0);cursor:pointer}.zn:hover{fill:rgba(47,176,245,.12)}.zn.on{fill:rgba(47,176,245,.22);stroke:#2FB0F5;stroke-width:2}
#fsvg{width:100%;max-width:300px;height:auto;display:block;margin:0 auto;border-radius:14px}
footer{background:var(--deep);color:var(--on);padding:32px 0;font-size:.95rem}
footer p{max-width:70ch;opacity:.85;margin:0 0 .5rem}

.longtext{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line,#d9ded6)}
.longtext h3{margin-top:2.2rem}
.longtext .toc{background:#f3f6f1;border-radius:12px;padding:1rem 1.2rem 1rem 1rem;margin:1.4rem 0}
.longtext .toc ol{margin:.4rem 0 0 1.3rem;padding:0}
.longtext .toc li{margin:.25rem 0}
.longtext figure svg{width:100%;height:auto;display:block}
.longtext .cmp{overflow-x:auto}
.longtext{scroll-margin-top:5rem}.longtext h3{scroll-margin-top:5rem}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:1rem 0 .4rem;max-width:none}.legend .lg{display:inline-flex;align-items:center;gap:5px}.legend svg{width:16px;height:16px}
.pcards{display:grid;gap:18px;margin:1rem 0 1.4rem}@media(min-width:760px){.pcards{grid-template-columns:1fr 1fr}}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column}
.pcard h3{margin:0 0 .2rem;font-size:1.3rem}.pcard .hint{margin:0 0 .6rem}
.chk{list-style:none;margin:.4rem 0 1.1rem;padding:0;border-top:1px solid var(--line)}
.chk li{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.chk .ci{color:var(--btn);padding-top:1px}.chk .cl{line-height:1.35}.chk .cl .hint{font-size:.88rem;margin:0}
.chk .si{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:56px;font-size:.72rem;font-family:var(--sans,inherit)}
.chk .sw{color:var(--mut)}
.st-ok .si,.lg.st-ok{color:var(--gr)}.st-part .si,.lg.st-part{color:#A8820E}.st-no .si,.lg.st-no{color:var(--ockink)}.st-na .si,.lg.st-na{color:var(--mut)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .st-part .si,:root:not([data-theme="light"]) .lg.st-part{color:var(--mid)}}
.pbtn{margin-top:auto;align-self:flex-start;background:var(--btn);color:var(--btni)}
.plist:empty{display:none}

.phead.nopic{display:block}.phead.nopic .kurz{max-width:60ch}.phead.nopic .buy{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,260px));gap:12px}

.more{margin:.2rem 0 1.2rem}.more a{font-family:var(--sans,inherit);font-weight:700;color:var(--btn)}.more a::after{content:" →"}

.chkres{margin-top:1.4rem;scroll-margin-top:16px}.chkres:empty{display:none}.chkres:focus{outline:none}
.chkres{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.sum{list-style:none;margin:0 0 1rem;padding:0}.sum li{display:grid;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--line);grid-template-columns:1fr auto;align-items:baseline}
.sum .sq{grid-column:1/3;color:var(--mut);font-size:.92rem}.sum b{font-weight:500}
.lnk{background:none;border:0;color:var(--btn);text-decoration:underline;padding:4px 2px;min-height:0;font-size:.95rem}
.opt.sel{border-color:var(--q);box-shadow:inset 0 0 0 1px var(--q)}

.faqlist{border-top:1px solid var(--line);margin:1.4rem 0 2rem}
.faqlist details{border-bottom:1px solid var(--line)}
.faqlist summary{cursor:pointer;list-style:none;padding:16px 36px 16px 2px;font-size:1.1rem;font-weight:700;position:relative;min-height:44px}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:1.6rem;font-weight:400;color:var(--gr);transition:transform .2s}
.faqlist details[open] summary::after{transform:rotate(45deg)}
.faqlist summary:hover{color:var(--gr)}
.faqlist details p{margin:0 0 1.1rem;max-width:64ch}

/* Vier Dinge: Überschriften und Button in Markengrün */
:root{--gr:#5F8000;--grt:#587700;--grb:#96BE0A;--grk:#10200A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--gr:#96BE0A;--grt:#A9D12A}}
:root[data-theme="dark"]{--gr:#96BE0A;--grt:#A9D12A}
.row.pr h3{color:var(--gr)}
.row.pr .btn.ghost{color:var(--grt);border:2px solid var(--gr);font-weight:700;transition:background .2s,color .2s,border-color .2s}
.row.pr .btn.ghost:hover,.row.pr .btn.ghost:focus-visible{background:var(--grb);border-color:var(--grb);color:var(--grk)}

.top{position:relative;z-index:50}
.menubtn{display:none;width:48px;height:48px;padding:0;border-radius:50%;border:1.5px solid #3E6F94;background:#0E3A55;cursor:pointer;position:relative;transition:background .25s,border-color .25s}
.menubtn:hover{border-color:var(--q)}
.menubtn .mb{position:absolute;inset:0;display:block}
.menubtn i{position:absolute;left:13px;height:3px;border-radius:3px;background:var(--q);transition:transform .35s cubic-bezier(.6,-.3,.3,1.4),width .3s,opacity .2s,top .3s,background .3s}
.menubtn .b1{top:15px;width:22px}.menubtn .b2{top:22.5px;width:14px;background:#6FD0FF}.menubtn .b3{top:30px;width:18px}
.menubtn:hover .b2{width:22px}
.menubtn .dr{width:7px;height:7px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);left:30px;top:10px;background:#96BE0A;opacity:0}
.top.open .menubtn{background:var(--q);border-color:var(--q)}
.top.open .menubtn i{background:#06222A}
.top.open .menubtn .b1{top:22.5px;width:22px;transform:rotate(45deg)}
.top.open .menubtn .b2{opacity:0;width:0}
.top.open .menubtn .b3{top:22.5px;width:22px;transform:rotate(-45deg)}
.top.open .menubtn .dr{animation:drip .9s ease-out .15s 1}
@keyframes drip{0%{opacity:0;transform:translateY(-6px) rotate(-45deg)}25%{opacity:1}100%{opacity:0;transform:translateY(30px) rotate(-45deg)}}
.mxtra{display:none}
@media(max-width:760px){
.menubtn{display:block}
.top nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:6px 20px 24px;background:var(--deep2);border-top:1px solid #1F4357;box-shadow:0 18px 30px rgba(0,0,0,.35);max-height:calc(100vh - 60px);overflow:auto}
.top.open nav{display:flex;animation:mnav .28s ease-out}
.top nav>a{font-size:1.45rem;font-weight:700;opacity:1;padding:15px 2px;border-bottom:1px solid #1F4357;display:flex;justify-content:space-between;align-items:center}
.top nav>a::after{content:"→";color:var(--q);font-weight:400}
.top nav>a.go{background:var(--q);color:#06222A;border-radius:99px;padding:14px 20px;margin-top:16px;border:0}.top nav>a.go::after{color:#06222A}
.top.open nav>a,.top.open .mxtra{animation:mitem .4s ease-out backwards}
.top.open nav>a:nth-child(2){animation-delay:.04s}.top.open nav>a:nth-child(3){animation-delay:.08s}.top.open nav>a:nth-child(4){animation-delay:.12s}.top.open nav>a:nth-child(5){animation-delay:.16s}
.mxtra{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;align-items:center}
.mxtra .mxl{flex-basis:100%;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;opacity:.7}
.mxtra a{font-size:1rem;opacity:1;border:1.5px solid #3E6F94;border-radius:99px;padding:8px 14px}
}
@keyframes mnav{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes mitem{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.menubtn i,.top.open nav,.top.open nav>a,.top.open .mxtra,.top.open .menubtn .dr{animation:none!important;transition:none!important}}

.skip{position:absolute;left:-999px;top:0;background:var(--q);color:#06222A;padding:10px 14px;z-index:99;border-radius:0 0 8px 0}.skip:focus{left:0}
footer .flinks a{color:var(--on)}footer .flinks{opacity:.9}
mark{background:#FFE9A8;color:#3a2a00;padding:0 3px;border-radius:3px}
code{font-size:.92em}
.fwrap{display:grid;gap:28px;grid-template-columns:1fr}@media(min-width:900px){.fwrap{grid-template-columns:1fr 300px;align-items:start}}
.fadv{font-size:.85rem;opacity:.8}.fadv a{color:var(--on)}
.fnav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 .9rem;font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}.fnav a{color:var(--on)}
.adslot{justify-self:start}@media(min-width:900px){.adslot{justify-self:end}}
.adlab{display:block;font:500 .75rem/1 "Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin:0 0 6px}
.adbox{display:flex;flex-direction:column;justify-content:space-between;width:300px;height:250px;max-width:100%;padding:18px;border-radius:10px;background:linear-gradient(145deg,#0E3A55,#0B6EAE);border:1px solid #3E6F94;color:#EAF4FB;text-decoration:none}
.adbox:hover{border-color:var(--q)}.adk{font:500 .8rem/1 "Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;opacity:.75}.adh{font-size:1.45rem;line-height:1.15}.adt{font-size:.95rem;line-height:1.4}
.adgo{align-self:flex-start;background:#96BE0A;color:#10200A;font:700 .95rem/1 "Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;padding:10px 14px;border-radius:99px}
@media print{.top,footer,.chips,.skip{display:none}body{background:#fff;color:#000}}

/* ===== Modernes Design (Okt 2026): Grün-Tinte, helle Kopfzeile, Hero, Inhaltsrail ===== */
:root{--bg:#FAFBF8;--ink:#10200A;--mut:#4A5A44;--panel:#fff;--line:#DDE5D6;--mist:#EEF3EA;--deep:#10200A;--deep2:#1A3012;--on:#EEF3EA;--q:#96BE0A;--btn:#10200A;--btni:#fff;--okink:#4F6B00}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0B150A;--ink:#E8F0E2;--mut:#A3B59B;--panel:#122110;--line:#243A1D;--mist:#16280F;--deep:#0A1408;--btn:#96BE0A;--btni:#10200A}}
:root[data-theme="dark"]{--bg:#0B150A;--ink:#E8F0E2;--mut:#A3B59B;--panel:#122110;--line:#243A1D;--mist:#16280F;--deep:#0A1408;--btn:#96BE0A;--btni:#10200A}
body{font-family:Inter,"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.65}
h1,h2,h3{letter-spacing:-.022em}
.btn{border-radius:99px;padding:11px 22px;font-weight:600}
.btn.ghost{border-color:var(--line)}
.hero .btn,.cta .btn{background:var(--q);color:#10200A}
.top{background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}
.top nav a{opacity:1;color:var(--mut)}.top nav a:hover{color:var(--ink)}
.top nav a.go,.top nav>a.go{background:var(--ink);color:var(--bg)}
.menubtn{border-color:var(--line);background:var(--panel)}
.menubtn i{background:var(--ink)}.menubtn .b2{background:var(--gr)}
.top.open .menubtn{background:var(--ink);border-color:var(--ink)}.top.open .menubtn i{background:var(--bg)}
.hero .chip{border-color:rgba(238,243,234,.35)}.hero .chip[aria-pressed="true"]{color:#10200A}
.figcap a{color:var(--gr)}.hero .figcap a{color:var(--q)}
.skip{color:#10200A}
@media(max-width:760px){
.top nav{background:var(--bg);border-top:1px solid var(--line);box-shadow:0 18px 30px rgba(16,32,10,.18)}
.top nav>a{color:var(--ink);border-bottom-color:var(--line)}.top nav>a::after{color:var(--gr)}
.top nav>a.go{background:var(--ink);color:var(--bg)}.top nav>a.go::after{color:var(--bg)}
.mxtra a{border-color:var(--line);color:var(--ink)}
}
.adbox{background:linear-gradient(145deg,#1A3012,#4D6B0A);border-color:#5F8000}
/* Hero der Unterseiten */
.phero{background:var(--deep);color:var(--on);padding:44px 0 52px}
.phero .wrap{display:grid;gap:28px;align-items:center}
@media(min-width:860px){.phero.withfig .wrap{grid-template-columns:1.1fr .9fr;gap:48px}}
.phero .crumb{color:rgba(238,243,234,.75);margin-bottom:1rem}.phero .crumb a{color:inherit}
.phero h1{color:#fff;font-size:clamp(2rem,5vw,3.1rem);line-height:1.06;margin:0;max-width:20ch}
.phero:not(.withfig) h1{max-width:28ch}
.phero .pichero{margin:0}.phero .pichero svg{border-radius:20px;max-height:300px}
.phero .pichero .hint{color:rgba(238,243,234,.7);margin:.5rem 0 0;font-size:.88rem}
/* Inhalt mit Rail */
.pbody{max-width:1080px;margin:0 auto;padding:0 20px}
.pbody .art{max-width:none;padding:36px 0 72px;margin:0}
.pbody:not(.hastoc) .art{max-width:860px;margin:0 auto}
@media(min-width:980px){.pbody.hastoc{display:grid;grid-template-columns:230px minmax(0,1fr);gap:3.5rem}.pbody.hastoc .art{max-width:760px}}
.rail{display:none}
@media(min-width:980px){.rail{display:block}}
.toc{position:sticky;top:20px;margin-top:2.2rem;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.2rem;box-shadow:0 10px 30px -14px rgba(16,32,10,.3);font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.toc b{display:block;font-size:.95rem;margin-bottom:.3rem}
.toc a{display:block;padding:.35rem 0 .35rem .8rem;border-left:2px solid var(--line);color:var(--mut);font-size:.93rem;line-height:1.35;text-decoration:none;margin-top:.1rem}
.toc a:hover{color:var(--ink)}.toc a.on{border-left-color:var(--q);color:var(--ink);font-weight:600}
.art h2{font-size:clamp(1.55rem,3.4vw,1.95rem);margin-top:2.6rem;scroll-margin-top:16px}
.art p{max-width:68ch}
.kurz{font-size:1.1rem;background:var(--mist);border-radius:18px;border-left:6px solid var(--q);padding:1.2rem 1.5rem;margin:0 0 1.8rem}
.kurz{max-width:none}
.panel,.pcard,.chkres{border-radius:18px}
.amp div{background:var(--panel);border:1px solid var(--line);border-left-width:6px;border-radius:14px;padding:12px 16px}
.amp div{border-left-color:var(--q)}.amp div.m{border-left-color:var(--mid)}.amp div.r{border-left-color:var(--ocker)}
.src{border-radius:14px}.warn{border-radius:14px}
.photo img,.pichero svg,.pic{border-radius:16px}
.cta{border-radius:22px;padding:1.6rem 1.8rem;display:grid;gap:.2rem 1.6rem;align-items:center}
.cta h2{font-size:1.35rem;margin:0}.cta p{margin:0;opacity:.85;max-width:none}
@media(min-width:700px){.cta{grid-template-columns:1fr auto}.cta>h2,.cta>p{grid-column:1}.cta>a{grid-column:2;grid-row:1/span 2}}
@media(max-width:699px){.cta .btn{margin-top:.8rem;justify-self:start}}
.cta .btn{font-weight:700;white-space:nowrap}
.faqlist summary:hover{color:var(--gr)}
.longtext .toc{position:static;margin:1.4rem 0;box-shadow:none;background:var(--mist)}
.longtext .toc a{border:0;padding:.15rem 0}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .toc a.on{color:var(--ink)}}

/* Dosierrechner */
.dosecta{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;align-items:center;margin:1.4rem 0;padding:1.2rem 1.4rem;background:var(--mist);border:2px solid var(--q);border-radius:20px;text-decoration:none;color:var(--ink)}
.dosecta .dci{color:var(--gr);display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--panel)}
.dosecta .dct{display:grid;gap:2px}.dosecta .dct b{font-size:1.15rem}.dosecta .dct span{color:var(--mut);font-size:.98rem}
.dosecta .btn{grid-column:1/-1;justify-self:start;background:var(--ink);color:var(--bg)}
.dosecta:hover{border-color:var(--gr)}
@media(min-width:760px){.dosecta{grid-template-columns:auto 1fr auto}.dosecta .btn{grid-column:auto}}
.dmore{display:inline-block;margin-top:auto;font-weight:700;color:var(--gr)}.dmore+.pbtn{margin-top:.7rem}
.dose{display:grid;gap:18px;margin:1rem 0}
@media(min-width:720px){.dose{grid-template-columns:minmax(0,1fr) 330px;align-items:start}.dside{position:sticky;top:16px}}
.dform label{margin-bottom:14px}.dform input[type=text],.dform input:not([type]){font-size:1.1rem}
.dform .hint{display:block;font-weight:400;font-size:.88rem;margin-top:2px;font-family:Inter,system-ui,sans-serif}
.dform .lnk{margin:-6px 0 12px;padding:2px}
.dconc{border:0;padding:0;margin:0}.dconc legend{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;margin-bottom:8px;padding:0}
.dconc label.rad{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer}
.dconc label.rad input{width:auto;margin:3px 0 0;accent-color:#5F8000}
.dconc label.rad:has(input:checked){border-color:var(--q);background:var(--mist)}
.dfig svg{width:100%;height:auto;display:block;border-radius:16px}
.dres h3{margin:0 0 .4rem}.dres .big{margin:.2rem 0 .4rem;color:var(--gr)}
.dres .sum li{grid-template-columns:1fr auto}.dres .sum li>span:first-child{color:var(--mut)}
.dpack{background:var(--mist);border-radius:12px;padding:.8rem 1rem}
.dres:focus{outline:none}
.dform input.ex{color:#A9B3A5}
.dform input.bad{border-color:#C62828;background:#FDECEA;color:#7A1010}
.dform .miss{display:block;color:#C62828;font-weight:600;font-size:.9rem;margin-top:3px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .dform input.ex{color:#5E6E5A}:root:not([data-theme="light"]) .dform input.bad{background:#3A1614;color:#FFB4AB;border-color:#FF8A80}:root:not([data-theme="light"]) .dform .miss{color:#FF8A80}}
.dgo{margin-top:.4rem;width:100%}
/* Warnhinweise: Blau aus dem Logo (#00A0F0). Ausnahme: Fehler im Dosierrechner bleiben rot. */
:root{--logoblue:#00A0F0}
.warn{background:rgba(0,160,240,.10);border-left-color:var(--logoblue)}
.tag{color:var(--ink);border-color:var(--logoblue)}
.amp div.r{border-left-color:var(--logoblue);border-color:var(--logoblue)}
.st-no .si,.lg.st-no{color:var(--logoblue)}.st-no .si .sw{color:var(--mut)}
.badge.mid{color:var(--ink)}
#dres .warn{background:rgba(196,98,45,.12);border-left-color:#C4622D}
.dhead{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:2.6rem 0 .6rem}
.dhead h2{margin:0;color:var(--gr)}
.dhead .dci{flex:none;color:var(--gr);display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--mist)}
.dhead .dci svg{width:40px;height:40px}
.dpack a{font-weight:700;white-space:nowrap}