/* Wissensseite im Stil „Hochdruck“: nach dem Seiten-Style geladen, nutzt css/tokens.css */
body{font-size:var(--body);line-height:1.5}
h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.1}
h1{font-size:clamp(44px,8vw,104px);line-height:1;letter-spacing:-.04em}
h2{font-size:var(--h3);margin-bottom:var(--s3)}
h3{font-size:20px;letter-spacing:-.02em}
a{text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-width:3px}

/* Einstieg */
header.wand{display:grid;gap:var(--s2);padding-top:var(--s2);padding-bottom:var(--s2)}
.intro{background:var(--stein);border-radius:var(--r-karte);padding:var(--s6)}
.intro .lead{font-size:20px;line-height:1.35;max-width:36em;margin-top:var(--s5);color:var(--text)}
.regel{background:var(--limette);border-radius:var(--r-karte);padding:var(--s6);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s6);min-height:260px}
.regel-satz{font-weight:600;font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-.035em;margin:0;max-width:14em}
.regel p:last-child{margin:0}

/* pH-Skala als Punktreihe */
.ph{background:var(--schwarz);color:#fff;border:0;border-radius:var(--r-karte);padding:var(--s6);margin-top:0}
.ph-inner{padding:0 20px;min-width:720px}
.ph-bar{display:none}
.ph-ticks{margin:0 -20px;font-size:15px;font-weight:600;color:var(--schwarz)}
.ph-ticks span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--limette)}
.ph-ticks span:nth-child(8){background:var(--stein)}
.ph-ticks span:nth-child(n+9){background:none;box-shadow:inset 0 0 0 2px var(--limette);color:var(--limette)}
.ph-marks{margin-top:var(--s2)}
.ph-mark{font-size:14px}
.ph-mark::before{background:#A9A7A0}
.ph-mark.ref{color:#D9D7D0}
.ph-legend{margin:var(--s2) -20px 0;font-size:15px;color:#D9D7D0}
.ph-legend b.a,.ph-legend b.b{color:var(--limette);font-weight:600}

/* Inhalt */
nav.toc{background:var(--stein);backdrop-filter:none;border-bottom:0}
nav.toc a{border:0;background:var(--bg);font-size:15px;font-weight:500;padding:6px 12px}
nav.toc a:hover{background:var(--limette);color:var(--schwarz)}
main>section.wrap{padding-top:var(--s8)}
main>section.wrap+section.wrap{border-top:0;margin-top:0}
.sub,.note{font-size:var(--label)}
button{border:0;background:var(--stein);border-radius:999px;min-height:40px;padding:6px 16px;font-weight:600}
button:hover{background:var(--limette)}

/* Flächen: flach, ohne Rahmen */
.root,.card,.box,.tbl-wrap,.jar,.ph-card{border:0;border-radius:var(--r-karte)}
.root>summary .sym{color:var(--schwarz)}
.box.alert{background:var(--gefahr);color:var(--auf-gefahr)}
.box.alert a,.box.alert .note{color:var(--auf-gefahr)}
.m.d,.lvl.l3{background:var(--gefahr);color:var(--auf-gefahr)}
.rec.diyfirst{border:2px solid var(--schwarz)}
th{background:none;font-size:var(--klein);font-weight:600;color:var(--leise);border-bottom:2px solid var(--schwarz)}
table{font-size:var(--label)}
.m.x{box-shadow:inset 0 0 0 1.5px var(--schwarz)}
.m.s{background:none}
ul.branch,ul.branch>li::before{border-color:var(--linie)}

/* Etiketten und Marker: Limette nie als Text oder Linie auf Hell */
.chip{border:0;background:var(--stein);font-size:13px}
.chip.acid{background:var(--limette);color:var(--schwarz)}
.chip.base{background:var(--schwarz);color:var(--limette)}
.chip.tool,.chip.buy{background:var(--limette-hell);color:var(--schwarz)}
.ph-pill.a{background:var(--limette);color:var(--schwarz)}
.ph-pill.b{background:var(--schwarz);color:var(--limette)}
.ph-pill.n{background:var(--stein);color:var(--schwarz)}
.leaf{background:var(--bg);border:0;border-left:5px solid transparent}
.leaf.buy{border-left-color:var(--schwarz)}
.leaf.no::before{top:0;bottom:0}
.ktag.buy{background:var(--limette)}
.jar{border-top:0}
.jar.a{background:var(--limette)}
.jar.a small{color:var(--schwarz)}
.jar.b{background:var(--schwarz);color:#fff}
.jar.b b{color:var(--limette)}
.jar.b small{color:#D9D7D0}
.jar.o{background:var(--stein)}
.rec dt.cheap,.rec dt.eco{color:var(--schwarz)}
.verdict.tool{color:var(--schwarz)}

@media (max-width:640px){
  .intro,.regel,.ph{padding:var(--s5) var(--s4)}
  .regel{min-height:0}
  main>section.wrap{padding-top:var(--s7)}
}