*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--body)/1.55 var(--font-text);min-height:100vh;display:flex;flex-direction:column}
main{flex:1;padding-top:var(--s6);padding-bottom:var(--s8);width:100%}
h1,h2,h3{font-family:var(--font-titel);font-weight:600;line-height:1.1;letter-spacing:-.03em;margin:0;text-wrap:balance}
h1{font-size:var(--h1)} h1:focus{outline:none}
h1.gross{font-size:var(--h0);line-height:.95;letter-spacing:-.04em}
h2{font-size:var(--h3)} h3{font-size:var(--h4)}
p{margin:0}
a{color:var(--primaer);text-underline-offset:3px} a:hover{color:var(--primaer-dunkel)}
:focus-visible{outline:3px solid var(--primaer);outline-offset:2px;border-radius:6px}

/* Wasserhärte im Kopf */
.haerte{border:0;margin:0;padding:0;display:flex;align-items:center;gap:var(--s2)}
.haerte legend{float:left;font-size:var(--klein);color:#A9A7A0;padding:0;margin-right:var(--s2);line-height:36px}
.segmente{display:inline-flex;gap:2px;background:#2A2A28;border-radius:999px;padding:3px}
.segmente label{cursor:pointer}
.segmente input{position:absolute;opacity:0;width:1px;height:1px}
.segmente span{display:block;padding:6px 14px;border-radius:999px;font-size:var(--klein);font-weight:600;color:#fff}
.segmente input:checked+span{background:var(--limette);color:var(--schwarz)}
.segmente input:focus-visible+span{outline:3px solid var(--limette);outline-offset:2px}

/* Schrank: die sieben DIY-Reiniger, immer sichtbar */
.schrank{position:sticky;top:0;z-index:10;background:var(--stein)}
.schrank .wrap{padding-top:var(--s3);padding-bottom:var(--s3)}
.schrank-reihe{position:relative;display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;padding:3px;margin:-3px}
.schrank-reihe::-webkit-scrollbar{display:none}
.schrank-info{font-size:var(--klein);font-weight:600;margin-top:var(--s2)}
.schrank-info:empty{display:none}
@media (min-width:641px){.schrank-info{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}}
.r-extras{display:contents}
.r-gruppe{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.r-gruppe.alltag{flex:2 0 auto}.r-gruppe.option{flex:1 0 auto}.r-gruppe.special{flex:4 0 auto;margin-left:var(--s3)}
.r-titel{font-size:13px;font-weight:600;color:var(--leise);white-space:nowrap}
.r-karten{display:flex;gap:var(--s2);flex:1}
.schrank[data-modus="fokus"] .r-gruppe,.schrank[data-modus="fokus"] .r-karten{display:contents}
.schrank[data-modus="fokus"] .r-titel{display:none}
.r-karte{--k:var(--neutral);--kt:var(--neutral-text);flex:1 1 0;min-width:112px;display:flex;flex-direction:column;gap:var(--s1);padding:var(--s2) var(--s3);border:1.5px solid transparent;border-radius:var(--r-control);background:var(--karte);box-shadow:var(--schatten-s);text-decoration:none;color:var(--text);transition:flex-grow .25s,flex-basis .25s,min-width .25s,background-color .25s}
.r-karte:hover{box-shadow:var(--schatten-m);color:var(--text)}
.r-karte small{color:inherit}
.r-karte.acid{--k:var(--saeure);--kt:var(--saeure-text)}
.r-karte.base,.r-karte.pur{--k:var(--base);--kt:var(--base-text)}
.r-karte.kauf{--k:var(--kueche);--kt:var(--kueche-text)}
.r-karte.werkzeug{--k:var(--primaer-hell);--kt:var(--primaer-dunkel)}
.r-icon{width:32px;height:32px;border-radius:50%;background:var(--k);color:var(--kt);display:grid;place-items:center;flex:none}
.r-icon svg{width:20px;height:20px}
.r-text{min-width:0}
.r-karte b{font-weight:600;font-size:var(--klein);line-height:1.25;display:block}
.r-karte small{font-size:13px;line-height:1.25;display:block}
/* Alltag ist gefüllt, Optional weiß, Special nur gestrichelt. Pink bleibt der Gefahr vorbehalten. */
.r-karte.alltag,.r-karte.alltag:hover{background:var(--k);color:var(--kt)}
.r-karte.alltag .r-icon{background:transparent}
.r-karte.alltag b{font-size:var(--label)}
.r-karte.special{background:transparent;box-shadow:none;border:1.5px solid var(--schwarz)}
.r-karte.special:hover{background:var(--karte)}
/* Start: Specials rücken klein zu zwei mal zwei zusammen */
@media (min-width:641px){
  .schrank[data-modus="start"] .special .r-karten{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1) var(--s2)}
  .schrank[data-modus="start"] .r-karte.special{flex-direction:row;align-items:center;gap:var(--s2);padding:2px var(--s2);min-width:0}
  .schrank[data-modus="start"] .r-karte.special small{display:none}
}
/* unterwegs: nur Icon und Name */
.schrank[data-modus="kompakt"] .r-karte{flex-direction:row;align-items:center;gap:var(--s2);padding:var(--s1) var(--s2)}
.schrank[data-modus="kompakt"] small{display:none}
.schrank[data-modus="kompakt"] .r-karte{flex:1 0 auto;min-width:0}
/* beim Fall: Passendes groß, der Rest klein und grau */
.schrank[data-modus="fokus"] .r-karte{flex-direction:row;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3) var(--s1) var(--s1)}
.r-karte.aus,.r-karte.aus:hover{flex:0 0 44px;min-width:44px;padding:var(--s1)!important;justify-content:center;background:transparent;color:var(--text);box-shadow:none;border-color:transparent}
.r-karte.aus .r-icon{background:var(--linie);color:var(--leise)}
.r-karte.aus .r-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.r-karte.aus:hover .r-icon{background:var(--k);color:var(--kt)}
.r-karte.an,.r-karte.tabu{flex:0 0 auto;min-width:0;white-space:nowrap}
.r-karte.an{background:var(--k);box-shadow:0 0 0 2px var(--schwarz);border-color:transparent}
.r-karte.an .r-icon{background:transparent}
.r-karte.an b,.r-karte.an small{color:var(--kt)}
.r-karte.an b{font-size:var(--label)}
.r-karte.tabu{background:var(--gefahr-hell);box-shadow:0 0 0 2px var(--gefahr-text);border-color:transparent}
.r-karte.tabu b{text-decoration:line-through}
.r-karte.tabu b,.r-karte.tabu small{color:var(--gefahr-text)}
.r-karte.tabu .r-icon{background:#fff;color:var(--gefahr-text)}
@media (max-width:640px){
  .schrank .wrap{padding-top:var(--s2);padding-bottom:var(--s2)}
  .schrank-reihe{margin-left:calc(var(--s4) * -1);margin-right:calc(var(--s4) * -1);padding-left:var(--s4);padding-right:var(--s4)}
  .schrank[data-modus="start"] .r-karte{flex-direction:row;align-items:center;gap:var(--s2);padding:var(--s1) var(--s2);flex:1 0 auto;min-width:0}
  .schrank[data-modus="start"] small{display:none}
  .diagnose{flex-direction:column;gap:var(--s3)}
  .r-karte.an,.r-karte.tabu{order:-1}
  .r-karte{min-height:44px}
  .r-gruppe.alltag,.r-gruppe.option,.r-gruppe.special{flex:0 0 auto}
}

/* Start */
.held{display:grid;grid-template-columns:2fr 1fr;gap:var(--s2);margin-bottom:var(--s7)}
.held-text{background:var(--limette);border-radius:var(--r-karte);padding:var(--s6);min-height:440px;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s7)}
.held-text p{font-size:20px;line-height:1.35;max-width:22em}
.punkte{background:var(--stein);border-radius:var(--r-karte);padding:var(--s5);display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-content:center}
.punkte i{aspect-ratio:1;border-radius:50%;background:#D6D3CC}
.punkte i.an{background:var(--limette)}
@media (max-width:760px){.held{grid-template-columns:1fr}.punkte{display:none}.held-text{min-height:300px;padding:var(--s5)}}
.tuer+.tuer{margin-top:var(--s7)}
.tuer+.tuer.dunkel{margin-top:var(--s5)}
.tuer h2{margin-bottom:var(--s4)}
.kacheln{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
@media (max-width:640px){.kacheln{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}.kachel{min-height:120px;padding:var(--s3)}.kachel b{font-size:17px}.kachel.farbig{min-height:150px;padding:var(--s3)}.kachel.farbig b{font-size:21px}.haerte{order:3;width:100%}.tuer.dunkel{padding:var(--s5) var(--s4)}.tuer.dunkel .kacheln{grid-template-columns:1fr}.tuer.dunkel .kachel b{font-size:22px}}
.kachel{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4) var(--s4) var(--s4);min-height:136px;border-radius:var(--r-karte);text-decoration:none;color:var(--text);background:var(--karte);box-shadow:var(--schatten-s);transition:transform .15s,box-shadow .15s}
.kachel:hover{transform:translateY(-3px);box-shadow:var(--schatten-m);color:var(--text)}
.kachel b{font:600 var(--h4)/1.2 var(--font-titel);letter-spacing:-.02em;display:block}
.kachel small{font-size:var(--klein);color:var(--leise);display:block;margin-top:2px}
.kachel .icon{width:44px;height:44px;border-radius:50%;background:var(--limette);color:var(--schwarz);display:grid;place-items:center;flex:none}
.kachel .icon svg{width:24px;height:24px}
.kachel.farbig{background:var(--f);color:var(--ft)}
.kachel.farbig small{color:var(--ft)}
.kachel.farbig{justify-content:space-between;min-height:220px;padding:var(--s4) var(--s4) var(--s4)}
.kachel.farbig b{font-size:26px;letter-spacing:-.025em;line-height:1.1}
.kachel.farbig small{color:var(--leise);font-size:var(--label)}
.kachel.klein.farbig{min-height:0;justify-content:center}
.kachel.klein.farbig b{font-size:var(--h4)}
/* Symptome: dunkle Tafel, Namen groß */
.tuer.dunkel{background:var(--schwarz);color:#fff;border-radius:var(--r-karte);padding:var(--s6)}
.tuer.dunkel h2{color:var(--limette)}
.tuer.dunkel .kacheln{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--s4) var(--s5)}
.tuer.dunkel .kachel,.tuer.dunkel .kachel:hover{flex-direction:row;align-items:center;min-height:0;padding:0;background:none;color:#fff;box-shadow:none;transform:none}
.tuer.dunkel .kachel:hover b{color:var(--limette)}
.tuer.dunkel .kachel .icon{background:none;color:var(--limette);box-shadow:inset 0 0 0 2px var(--limette)}
.tuer.dunkel .kachel b{font-size:26px;letter-spacing:-.03em;line-height:1.15}
.tuer.dunkel .kachel small{color:#D9D7D0}
.tuer.dunkel :focus-visible{outline-color:var(--limette)}
.kachel:hover .icon{animation:wackeln .4s ease-in-out}
@keyframes wackeln{25%{transform:rotate(-9deg)}60%{transform:rotate(7deg)}}
.kachel.klein{min-height:0;justify-content:center;padding:var(--s4)}
.f-bad{--f:var(--bad);--ft:var(--bad-text)} .f-wc{--f:var(--wc);--ft:var(--wc-text)} .f-kueche{--f:var(--kueche);--ft:var(--kueche-text)}
.f-waesche{--f:var(--waesche);--ft:var(--waesche-text)} .f-wohnen{--f:var(--wohnen);--ft:var(--wohnen-text)}

/* Wege */
.pfad{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);font-size:var(--klein);color:var(--leise);margin-bottom:var(--s4);padding:0;list-style:none}
.pfad li+li::before{content:"›";margin-right:var(--s2)}
.eyebrow{font-weight:600;font-size:var(--label);color:var(--primaer);margin-bottom:var(--s1)}
.unter{color:var(--leise);margin-top:var(--s2);font-size:20px}
.block{margin-top:var(--s6)}
.block>h2{margin-bottom:var(--s3)}
.tipp{margin-top:var(--s5);background:var(--primaer-hell);border-radius:var(--r-control);padding:var(--s3) var(--s4);max-width:44em}
.liste{display:grid;gap:var(--s3);list-style:none;margin:0;padding:0}
.zeile{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--karte);border-radius:var(--r-control);box-shadow:var(--schatten-s);text-decoration:none;color:var(--text)}
.zeile:hover{box-shadow:var(--schatten-m);color:var(--text)}
.zeile-icon{width:36px;height:36px;border-radius:50%;background:var(--primaer-hell);color:var(--primaer-dunkel);display:grid;place-items:center;flex:none}
.zeile-icon svg{width:20px;height:20px}
.zeile-text{flex:1;min-width:0}
.zeile b{font-weight:600;display:block}
.zeile small{font-size:var(--klein);color:var(--leise);display:block}
.hilft{font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;white-space:nowrap;flex:none;background:var(--neutral);color:var(--neutral-text)}
.hilft.acid{background:var(--saeure);color:var(--saeure-text)}
.hilft.base,.hilft.pur{background:var(--base);color:var(--base-text)}
.hilft.kauf{background:var(--kueche);color:var(--kueche-text)}
.hilft.werkzeug{background:var(--primaer-hell);color:var(--primaer-dunkel)}
.einsatz{margin-top:var(--s3)}
.liste.block{margin-top:var(--s5)}
@media (max-width:640px){.zeile .hilft{display:none}}

/* Etiketten */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;white-space:nowrap;background:var(--ok-hell);color:var(--ok)}
.tag.no{background:var(--gefahr-hell);color:var(--gefahr-text)}

/* Fallkarte */
.fall{max-width:720px}
.diagnose{display:flex;gap:var(--s4);align-items:flex-start}
.fall .diagnose{margin-top:0}
.diagnose-icon{width:48px;height:48px;border-radius:50%;background:var(--limette);color:var(--schwarz);display:grid;place-items:center;flex:none}
.diagnose-icon svg{width:28px;height:28px}
.diagnose .eyebrow{color:var(--leise)}
.diagnose h1{font-size:var(--h2)}
.diagnose-was{margin-top:var(--s2);font-size:18px}
.diagnose .tag{margin-top:var(--s3)}
.achtung{margin:0;padding-left:1.2em}
.achtung li+li{margin-top:var(--s1)}
.fall .karte{background:var(--karte);border-radius:var(--r-karte);box-shadow:var(--schatten-s);padding:var(--s5);margin-top:var(--s4)}
.karte h2{font-size:var(--h4);margin-bottom:var(--s3)}
.karte>p+p{margin-top:var(--s2)}
.dosis{display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s4);margin:0}
.dosis dt{font-weight:600} .dosis dd{margin:0}
@media (max-width:640px){.dosis{grid-template-columns:1fr}.dosis dd{margin-bottom:var(--s2)}}
.wasser{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--linie);font-size:var(--label)}
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);counter-reset:s}
.schritte label{display:flex;gap:var(--s3);align-items:flex-start;cursor:pointer;padding:var(--s1) 0}
.schritte input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--primaer);flex:none}
.schritte input:checked+span{color:var(--leise);text-decoration:line-through}
.blitz{font:600 var(--h3)/1.2 var(--font-titel);letter-spacing:-.03em;color:var(--primaer);margin-top:var(--s3)}
.schutz{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.schutz li{font-size:var(--klein);font-weight:600;padding:3px 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--text)}
.material-wahl{display:flex;flex-wrap:wrap;gap:var(--s2)}
.material-wahl a{font-size:var(--klein);font-weight:500;padding:6px 14px;border-radius:999px;text-decoration:none;color:var(--text);background:var(--stein)}
.material-wahl a:hover{box-shadow:0 0 0 1.5px var(--primaer)}
.material-wahl a[aria-current]{background:var(--schwarz);color:var(--limette)}
.meldung{margin-top:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-control)}
.meldung p+p{margin-top:var(--s1)}
.meldung.tabu{background:var(--gefahr);color:var(--auf-gefahr)}
.meldung.tabu a,.meldung.tabu a:hover{color:var(--auf-gefahr);font-weight:600}
.meldung.vorsicht{background:var(--primaer-hell)}
.meldung.ok{background:var(--ok-hell);color:var(--ok)}
.fuss{color:var(--leise);font-size:var(--klein);padding:var(--s5) 0;border-top:1px solid var(--linie)}

/* Aufsteigende Punkte, wenn alle Schritte erledigt sind */
.blase{position:fixed;bottom:-60px;border-radius:50%;pointer-events:none;z-index:20;background:var(--limette);box-shadow:0 0 0 2px var(--schwarz);animation:steigen var(--t) ease-in forwards}
@keyframes steigen{to{transform:translate(var(--x),-110vh)}}
@media (prefers-reduced-motion:reduce){
  .kachel,.kachel:hover,.r-karte{transition:none;transform:none}
  .kachel:hover .icon{animation:none}
}

/* Tippziele auf dem Handy (L-40, C-09) */
@media (max-width:640px){
  .segmente span{padding:11px 16px}
  .material-wahl a{padding:12px 14px}
}