:root{
  --ink:#141b24; --ink2:#36424f; --muted:#5d6b78; --line:#dde3e9; --line2:#eef2f5;
  --bg:#eef1f5; --card:#fff; --sand:#faf7f1;
  --sig:#b4121f; --sig-bg:#fdeceb; --warn:#8a5a00; --warn-bg:#fdf3e0;
  --ok:#0f6b4f; --link:#0a4e8a;
  --r:10px; --sh:0 1px 2px rgba(20,27,36,.07), 0 6px 18px -12px rgba(20,27,36,.18);
  --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.62 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  overflow-wrap:break-word;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--link)}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4{line-height:1.22; margin:0 0 .5em; overflow-wrap:break-word; hyphens:auto; font-weight:700}
h1{font-size:clamp(1.55rem,1.15rem + 2.1vw,2.3rem); letter-spacing:-.015em}
h2{font-size:clamp(1.2rem,1.05rem + .8vw,1.45rem)}
h3{font-size:1.07rem}
p{margin:0 0 .9em}
ul,ol{margin:0 0 1em; padding-left:1.25em}
li{margin:.3em 0}
hr{border:0; border-top:1px solid var(--line); margin:1.8rem 0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 16px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px}
.skip:focus{left:8px; top:8px; z-index:9; background:#fff; padding:8px 12px; border:2px solid var(--ink)}

/* ---- Kopf ---- */
.top{background:#fff; border-bottom:1px solid var(--line)}
.top__bar{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; padding:12px 0}
.mark{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); flex:0 0 auto}
.mark svg{flex:0 0 auto}
.mark__w{font-weight:800; font-size:1.3rem; letter-spacing:-.02em}
.mark__s{display:block; font-weight:400; font-size:.72rem; color:var(--muted); letter-spacing:.02em}
.top__nav{display:flex; flex-wrap:wrap; gap:4px 14px; margin-left:auto}
.top__nav a{color:var(--ink2); text-decoration:none; font-size:.93rem; font-weight:600; padding:4px 0; border-bottom:2px solid transparent}
.top__nav a:hover,.top__nav a[aria-current]{border-bottom-color:var(--sig); color:var(--ink)}
.sbox{display:flex; gap:6px; border-top:1px solid var(--line2); padding:9px 0}
.sbox input{flex:1 1 auto; min-width:0; font:inherit; font-size:.95rem; padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:#fcfdfe}
.sbox button{font:inherit; font-size:.92rem; font-weight:700; padding:8px 15px; border:0; border-radius:8px; background:var(--ink); color:#fff; cursor:pointer}

/* ---- Hero ---- */
.hero{background:linear-gradient(180deg,#fff 0,#fbfcfd 100%); border-bottom:1px solid var(--line); padding:22px 0 20px}
.hero p{color:var(--ink2); max-width:62ch; margin:0}
.hero h1{margin-bottom:.35em}
.stand{display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:.86rem; color:var(--muted); background:#f4f7fa; border:1px solid var(--line); border-radius:999px; padding:4px 12px}
.stand b{color:var(--ink); font-variant-numeric:tabular-nums}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok); flex:0 0 auto}
@media(max-width:560px){ .stand{display:block; border-radius:10px; padding:9px 13px; line-height:1.75} .stand .dot{display:none} }

main{padding:22px 0 40px}
.lead{color:var(--ink2); max-width:68ch}

/* ---- Filter ---- */
.filter{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:13px; margin:0 0 20px; box-shadow:var(--sh)}
.filter__grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); align-items:end}
.filter label{display:block; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:4px}
.filter select{width:100%; font:inherit; font-size:.95rem; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:#fcfdfe; color:var(--ink)}
.filter button{font:inherit; font-weight:700; font-size:.95rem; padding:9px 18px; border:0; border-radius:8px; background:var(--sig); color:#fff; cursor:pointer}
.filter__clear{font-size:.86rem; align-self:center}

/* ---- Karten ---- */
.cards{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,318px),1fr)); margin:0; padding:0; list-style:none}
.card{min-width:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); display:flex; flex-direction:column; overflow:hidden}
.card__top{display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding:12px 14px 0}
.card__body{padding:9px 14px 14px; display:flex; flex-direction:column; flex:1 1 auto}
.card__d{font-variant-numeric:tabular-nums; font-weight:800; font-size:1.02rem; letter-spacing:-.01em}
.card h3{margin:0 0 7px; font-size:1.04rem; line-height:1.3}
.card h3 a{color:var(--ink); text-decoration:none}
.card h3 a:hover{text-decoration:underline; text-decoration-color:var(--sig)}
.card__m{font-size:.87rem; color:var(--muted); margin:0 0 9px}
.card__f{margin-top:auto; padding-top:8px; border-top:1px solid var(--line2); font-size:.8rem; color:var(--muted)}

.tag{display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.055em; padding:3px 8px; border-radius:5px; white-space:nowrap}
.tag--r{background:var(--sig-bg); color:var(--sig)}
.tag--w{background:var(--warn-bg); color:var(--warn)}
.tag--k{background:#eef2f6; color:var(--ink2)}

.g{display:inline-block; font-size:.74rem; font-weight:700; padding:3px 8px; border-radius:5px; border:1px solid currentColor; white-space:nowrap}
.g--keime{color:#8f0f26} .g--chemie{color:#5b3a94} .g--fremdkoerper{color:#0b5578}
.g--allergen{color:#8a5a00} .g--toxin{color:#8a3300} .g--verletzung{color:#a0121f} .g--sonstiges{color:#4f5a66}
.g--brand{color:#a33b00} .g--elektrik{color:#2a5d9e} .g--technik{color:#3f6150} .g--arznei{color:#6b3a7a}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 1em; padding:0; list-style:none}
.chips li{margin:0}
.chip{display:inline-block; font-size:.85rem; text-decoration:none; color:var(--ink2); background:#f3f6f9; border:1px solid var(--line); border-radius:999px; padding:4px 11px}
a.chip:hover{background:#e9eef4; color:var(--ink)}

/* ---- Inhaltsblöcke ---- */
.block{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px; margin:0 0 18px; box-shadow:var(--sh)}
.block--sand{background:var(--sand); border-color:#ecdfc6}
.block--sig{background:var(--sig-bg); border-color:#f3cfcc}
.block h2{margin-top:0}
.block>:last-child{margin-bottom:0}

.dl{display:grid; gap:0; margin:0}
.dl>div{display:grid; grid-template-columns:1fr; gap:1px 16px; padding:11px 0; border-top:1px solid var(--line2)}
.dl>div:first-child{border-top:0; padding-top:0}
.dl dt{font-size:.79rem; font-weight:800; text-transform:uppercase; letter-spacing:.045em; color:var(--muted)}
.dl dd{margin:0; white-space:pre-line; overflow-wrap:anywhere}
@media(min-width:620px){ .dl>div{grid-template-columns:minmax(170px,30%) 1fr} .dl dt{padding-top:2px} }

.meta{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:0 0 16px; font-size:.9rem; color:var(--muted)}
.meta b{color:var(--ink); font-variant-numeric:tabular-nums}

.bc{font-size:.85rem; color:var(--muted); margin:0 0 14px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:4px 7px}
.bc li{margin:0}
.bc li+li::before{content:"›"; margin-right:7px; color:#9aa6b2}

.shots{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr)); margin:0 0 1em; padding:0; list-style:none}
.shots img{border:1px solid var(--line); border-radius:8px; background:#fff}
.shots figcaption{font-size:.74rem; color:var(--muted); margin-top:4px}
.shots figure{margin:0}

.cols{display:grid; gap:18px; grid-template-columns:1fr}
.cols>*{min-width:0}
@media(min-width:900px){ .cols{grid-template-columns:minmax(0,1fr) 300px} }
.side .block{padding:15px}
.side h2{font-size:1.02rem}
.side ul{list-style:none; padding:0; margin:0}
.side li{border-top:1px solid var(--line2); padding:9px 0; font-size:.93rem}
.side li:first-child{border-top:0; padding-top:0}
.side .d{display:block; font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums}

.hubs{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr)); list-style:none; padding:0; margin:0}
.hubs a{display:block; background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; text-decoration:none; color:var(--ink); font-size:.93rem; font-weight:600}
.hubs a:hover{border-color:#b9c4cf; background:#fbfcfd}
.hubs span{display:block; font-weight:400; font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums}

.pager{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:22px 0 0; font-size:.93rem}
.pager a,.pager span{padding:8px 13px; border:1px solid var(--line); border-radius:8px; background:#fff; text-decoration:none; color:var(--ink2)}
.pager span{color:#9aa6b2}
.pager a:hover{border-color:#b9c4cf}

/* ---- Werbeflächen (leer, keine Netzwerke eingebunden) ---- */
.ad{margin:18px 0; display:flex; align-items:center; justify-content:center; background:#e7ebf0; border:1px dashed #cfd7e0; border-radius:var(--r); color:#a7b2bd; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase}
.ad--top{height:110px}
.ad--inline{height:250px}
.ad--side{height:600px}
@media(max-width:899px){ .ad--side{height:250px} }

/* ---- Fuß ---- */
.foot{background:#141b24; color:#b9c4cf; margin-top:10px; padding:28px 0 32px; font-size:.9rem}
.foot a{color:#dfe6ec}
.foot__grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.foot h2{color:#fff; font-size:.8rem; text-transform:uppercase; letter-spacing:.09em; margin:0 0 9px}
.foot ul{list-style:none; padding:0; margin:0}
.foot li{margin:0 0 6px}
.foot address{font-style:normal; line-height:1.7}
.foot__end{border-top:1px solid #2a3542; margin-top:22px; padding-top:16px; color:#8795a3; font-size:.84rem}
.foot__end p{margin:0 0 .5em}

/* ---- Textseiten ---- */
.prosa{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); padding:22px 20px 26px; max-width:76ch}
.prosa h2{margin-top:1.7em; font-size:1.18rem}
.prosa h3{margin-top:1.3em}
.prosa>:first-child{margin-top:0}
.prosa address{font-style:normal; line-height:1.75; margin:0 0 1em}
.prosa code{background:#f1f4f7; border:1px solid var(--line); border-radius:5px; padding:1px 5px; font-size:.88em; word-break:break-all}
.mailbox{font-size:1.12rem; font-weight:700; background:var(--sand); border:1px solid #ecdfc6; border-radius:8px; padding:13px 15px; word-break:break-word}

.qgrid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); margin:0 0 1.4em}
.qcard{min-width:0; background:#fbfcfd; border:1px solid var(--line); border-radius:8px; padding:14px}
.qcard h3{margin:0 0 .4em}
.qcard p{font-size:.92rem; color:var(--ink2)}
.kv{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0; font-size:.86rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0; font-weight:700; font-variant-numeric:tabular-nums}
.note{font-size:.88rem; color:var(--muted)}
.empty{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 18px; text-align:center; color:var(--muted)}