/* proteinpfad – ruhiges, gut lesbares Layout. Mobil zuerst, nur Systemschriften, keine externen Ressourcen. */
:root{
  --bg:#f7f4ee; --paper:#fffdf9; --ink:#1d2b30; --muted:#55666b; --line:#ddd6c8;
  --petrol:#1f4b57; --petrol-2:#2c6474; --sage:#6f8f72; --sage-soft:#e6ede3; --sand:#efe5d3;
  --warn:#8a5a12; --warn-soft:#fbf1dc; --alarm:#8f2d23; --alarm-soft:#fbe9e5;
  --radius:14px; --wrap:70rem; --prose:43rem;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:1.0625rem/1.65 var(--sans);overflow-wrap:break-word}
img,svg{max-width:100%}
a{color:var(--petrol-2);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--petrol);text-decoration-thickness:2px}
:focus-visible{outline:3px solid #c98a2b;outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--petrol);color:#fff;padding:.6rem 1rem;z-index:10}
.skip:focus{left:.5rem;top:.5rem}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.1rem}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.22;color:var(--petrol);letter-spacing:-.005em}
h1{font-size:clamp(1.85rem,6.4vw,2.85rem);margin:.3em 0 .45em;hyphens:manual;text-wrap:balance}
@media (max-width:30rem){h1{hyphens:auto}}
h2{font-size:clamp(1.38rem,4.4vw,1.8rem);margin:2.1em 0 .55em;text-wrap:balance}
@media (max-width:30rem){h2{hyphens:auto}}
h3{font-size:1.18rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1em}
li{margin:.25em 0}
strong{font-weight:650}

/* Kopf */
.site-head{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.6rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--petrol);font:600 1.22rem/1 var(--serif)}
.brand b{color:var(--sage);font-weight:600}
.brand-mark{width:30px;height:30px;flex:none}
.nav a{color:var(--ink);text-decoration:none;padding:.45rem .55rem;border-radius:8px;font-size:.95rem}
.nav a:hover,.nav a[aria-current="page"]{background:var(--sage-soft);color:var(--petrol)}
.nav.desk{display:none}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;padding:.45rem .8rem;border:1px solid var(--line);border-radius:999px;font-size:.95rem;color:var(--petrol)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--sage-soft)}
.menu .nav{position:absolute;right:0;top:calc(100% + .4rem);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(29,43,48,.12);display:flex;flex-direction:column;min-width:13rem;padding:.4rem}
@media (min-width:62rem){.nav.desk{display:flex;flex-wrap:wrap;gap:.1rem}.menu{display:none}}

/* Brotkrumen, Meta */
.crumbs{font-size:.88rem;color:var(--muted);padding-top:1rem;max-width:var(--prose)}
.crumbs a{color:var(--muted)}
.updated,.meta{font-size:.9rem;color:var(--muted)}
.kicker{font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;color:var(--sage);font-weight:650;margin:1.4rem 0 0}
.lead{font-size:1.16rem;color:#2d3e43}

/* Seitenrahmen */
.page{padding:.4rem 0 3rem}
.prose{max-width:var(--prose)}
.page .wrap.prose{margin-left:auto;margin-right:auto}

/* Hinweiskästen */
.note,.disclosure{border-radius:var(--radius);padding:.85rem 1rem;margin:1.1rem 0;font-size:.95rem;line-height:1.55}
.note p{margin:0}
.note.health{background:var(--sand);border-left:4px solid var(--petrol)}
.note.med{background:var(--warn-soft);border-left:4px solid var(--warn)}
.note.alarm{background:var(--alarm-soft);border-left:4px solid var(--alarm);color:#3d1510}
.note.privacy{background:var(--sage-soft);border-left:4px solid var(--sage)}
.disclosure{background:var(--sage-soft);border-left:4px solid var(--sage)}
.nodiag{font-size:.95rem;background:var(--paper);border:1px dashed var(--line);border-radius:10px;padding:.6rem .85rem}
.nem{font-size:.95rem;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem}
.tag-ew{display:inline-block;font-size:.72rem;line-height:1.3;padding:.1rem .45rem;border-radius:999px;background:#efe9dd;color:#5b4a2b;vertical-align:.12em;white-space:nowrap}
.ad-label{display:inline-block;font-size:.72rem;padding:.05rem .4rem;border-radius:4px;background:#fff1c9;color:#5d4300;border:1px solid #e5cf8f;vertical-align:.12em}

/* Kästen und Listen */
.box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;margin:1.2rem 0}
.box > :last-child{margin-bottom:0}
.box h2,.box h3{margin-top:.2em}
.key{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--sage);border-radius:var(--radius);padding:1rem 1.1rem;margin:1.2rem 0}
.key > :last-child{margin-bottom:0}
.key h2,.key h3{margin-top:.15em}
.check{list-style:none;padding:0}
.check li{position:relative;padding-left:1.9rem;margin:.55em 0}
.check li::before{content:"";position:absolute;left:0;top:.28em;width:1.1rem;height:1.1rem;border:2px solid var(--sage);border-radius:4px;background:var(--paper)}
ol.steps{padding-left:1.3rem}
.toc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem 1rem;font-size:.95rem}
.toc ol{margin:.3rem 0 0;padding-left:1.2rem}

/* Tabellen: mobil gestapelt */
.table-wrap{margin:1.2rem 0}
table.data{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--paper);border-radius:var(--radius)}
table.data caption{text-align:left;font-size:.88rem;color:var(--muted);padding:.2rem 0 .6rem;caption-side:top}
table.data th,table.data td{padding:.55rem .7rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
table.data th{background:#eef1ec;color:var(--petrol);font-weight:650}
@media (max-width:40rem){
  table.data thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.data,table.data tbody,table.data tr,table.data td{display:block;width:100%}
  table.data tr{border:1px solid var(--line);border-radius:12px;margin:0 0 .7rem;padding:.35rem .2rem;background:var(--paper)}
  table.data td{border:0;padding:.3rem .7rem;display:flex;gap:.8rem;justify-content:space-between}
  table.data td::before{content:attr(data-label);color:var(--muted);font-size:.85rem;flex:0 0 45%}
  table.data td:first-child{font-weight:650;color:var(--petrol)}
  table.data td:first-child::before{display:none}
}

/* Startseite */
.hero{background:linear-gradient(180deg,var(--paper),var(--bg));border-bottom:1px solid var(--line);padding:2.2rem 0 2rem}
.hero h1{max-width:40rem}
.hero .lead{max-width:40rem}
.hero-grid{display:grid;gap:1.5rem}
@media (min-width:62rem){.hero-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:center}}
.hero-aside{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.hero-aside h2{font-size:1.2rem;margin:.1em 0 .6em}
.hero-aside ol{margin:0;padding-left:1.3rem}
.hero-aside li{margin:.45em 0}
.promise{display:inline-block;background:var(--petrol);color:#fff;border-radius:999px;padding:.45rem 1rem;font-size:.95rem;margin:.2rem 0 1rem}
.cta{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.3rem 0 .4rem}
.btn{display:inline-block;background:var(--petrol);color:#fff;text-decoration:none;padding:.75rem 1.2rem;border-radius:999px;font-weight:600;border:2px solid var(--petrol);cursor:pointer;font:inherit;font-weight:600}
.btn:hover{background:var(--petrol-2);color:#fff}
.btn.ghost{background:transparent;color:var(--petrol)}
.btn.ghost:hover{background:var(--sage-soft)}
.topics{display:grid;gap:.8rem;grid-template-columns:1fr;margin:1.2rem 0}
@media (min-width:40rem){.topics{grid-template-columns:1fr 1fr}}
@media (min-width:62rem){.topics{grid-template-columns:repeat(4,1fr)}}
.topic{display:flex;flex-direction:column;gap:.35rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;text-decoration:none;color:var(--ink);transition:border-color .15s}
.topic strong{font-family:var(--serif);color:var(--petrol);font-size:1.1rem;line-height:1.25}
.topic span{font-size:.93rem;color:var(--muted)}
.topic:hover{border-color:var(--sage)}
.cols{display:grid;gap:1rem}
@media (min-width:48rem){.cols{grid-template-columns:1fr 1fr}}
.section{padding:1rem 0}

/* Rechner */
.calc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;margin:1.2rem 0}
.calc fieldset{border:0;padding:0;margin:0 0 1rem}
.calc legend{font-weight:650;color:var(--petrol);margin-bottom:.4rem;padding:0}
.fields{display:grid;gap:.8rem;grid-template-columns:1fr}
@media (min-width:36rem){.fields{grid-template-columns:repeat(3,1fr);align-items:end}}
.calc label{display:block;font-size:.95rem}
.calc input[type=number],.calc select{display:block;width:100%;margin-top:.25rem;padding:.6rem .7rem;font:inherit;border:1px solid #bfb7a6;border-radius:10px;background:#fff;color:var(--ink)}
.calc .opt{display:flex;gap:.6rem;align-items:flex-start;margin:.45rem 0}
.calc .opt input{margin-top:.3rem;width:1.1rem;height:1.1rem;flex:none}
.calc .hint{font-size:.85rem;color:var(--muted);margin:.25rem 0 0}
.calc .err{color:var(--alarm);font-size:.92rem;min-height:1.2em;margin:.4rem 0}
.result{margin-top:1.2rem}
.result[hidden]{display:none}
.res-grid{display:grid;gap:.7rem;grid-template-columns:1fr}
@media (min-width:36rem){.res-grid{grid-template-columns:1fr 1fr}}
.res{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem}
.res .lbl{display:block;font-size:.88rem;color:var(--muted)}
.res .val{display:block;font:600 1.5rem/1.2 var(--serif);color:var(--petrol);margin:.15rem 0}
.res.main{background:var(--sage-soft);border-color:#c9d6c4}
.res .sub{font-size:.88rem;color:var(--muted)}
.blocked{background:var(--warn-soft);border-left:4px solid var(--warn);border-radius:12px;padding:.9rem 1rem}
.examples{font-size:.95rem}

/* FAQ */
details.faq{background:var(--paper);border:1px solid var(--line);border-radius:12px;margin:.6rem 0;padding:0}
details.faq summary{cursor:pointer;padding:.85rem 1rem;font-weight:650;color:var(--petrol);list-style-position:outside}
details.faq > :not(summary){margin-left:1rem;margin-right:1rem}
details.faq[open]{padding-bottom:.4rem}

/* Quellen */
.sources{margin-top:2.6rem;border-top:1px solid var(--line);padding-top:.6rem;font-size:.92rem}
.sources h2{font-size:1.3rem;margin-top:1rem}
.sources ul{padding-left:1.1rem}
.sources li{margin:.4em 0}

/* Fuß */
.site-foot{background:#1d3640;color:#e6ece9;padding:2rem 0 2.4rem;font-size:.92rem;margin-top:2rem}
.site-foot .wrap{display:grid;gap:1.4rem}
@media (min-width:48rem){.site-foot .wrap{grid-template-columns:2fr 1fr 1fr}}
.site-foot a{color:#e6ece9}
.site-foot nav{display:flex;flex-direction:column;gap:.35rem}
.foot-promise{margin:.6rem 0;color:#fff;font-weight:600}
.foot-health,.foot-amazon{color:#c4d0cd;font-size:.86rem;margin:.4rem 0 0}

@media print{.site-head,.site-foot,.crumbs,.menu{display:none}body{background:#fff}.note,.box{break-inside:avoid}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}