/* Pflegeplan für deine Kaffeemaschine. Farben wie die Leser-Rückmeldung (kd-rm) und die Produktlinks (css/produktlinks.css).
   Kleine Texte #4a5561 (Kontrast rund 7:1 auf #faf6f4), seit 30.10.2026 statt #62707c (4,7:1). */
.kd-pp{border:1px solid #e3d9d5;border-left:4px solid #996b5c;background:#faf6f4;padding:20px 22px 8px;margin:1.5em 0;border-radius:6px}
.kd-pp *,.kd-pp *::before,.kd-pp *::after{box-sizing:border-box}
.kd-pp p{margin:0 0 .6em}
.kd-pp-titel{font-size:1.25em;font-weight:700;margin:0 0 .3em}
.kd-pp-feld{margin:0 0 1.1em}
.kd-pp label,.kd-pp-label{display:block;font-weight:700;margin:0 0 .3em}
.kd-pp select,.kd-pp input[type=text],.kd-pp input[type=number]{width:100%;max-width:360px;padding:8px 10px;border:1px solid #cdbfb9;border-radius:4px;background:#fff;font-size:1em;color:#222}
.kd-pp input:focus,.kd-pp select:focus,.kd-pp button:focus-visible,.kd-pp a:focus-visible,.kd-pp summary:focus-visible{outline:2px solid #7d5446;outline-offset:1px}
.kd-pp [hidden]{display:none!important}

/* Geräteauswahl: Suchfeld mit Liste */
.kd-pp-suche{position:relative;max-width:420px}
.kd-pp-suche input[type=text]{max-width:none}
.kd-pp .kd-pp-liste{position:absolute;z-index:20;left:0;right:0;top:100%;margin:2px 0 0;padding:4px 0;list-style:none;background:#fff;border:1px solid #cdbfb9;border-radius:4px;max-height:340px;max-height:min(50vh,340px);overflow-y:auto;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.kd-pp .kd-pp-liste li{margin:0;padding:7px 12px;cursor:pointer;line-height:1.3}
.kd-pp .kd-pp-liste li[aria-selected=true]{background:#996b5c;color:#fff}
.kd-pp .kd-pp-liste li[aria-selected=true] .kd-pp-nr{color:#f3e9e5}
.kd-pp .kd-pp-liste .kd-pp-gruppe{font-size:.78em;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#7d5446;cursor:default;padding:10px 12px 2px}
.kd-pp .kd-pp-liste .kd-pp-leer{color:#4a5561;cursor:default}
.kd-pp .kd-pp-liste .kd-pp-fehlt{border-top:1px solid #e3d9d5;margin-top:4px;padding-top:9px}
.kd-pp-nr{display:block;font-size:.8em;color:#4a5561;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Wasserhärte mit Einheit, Teststreifen, Art der Maschine */
.kd-pp-mit-einheit{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.kd-pp-mit-einheit input[type=text]{flex:1 1 150px;max-width:220px}
.kd-pp-streifen{display:flex;flex-wrap:wrap;gap:8px}
.kd-pp .kd-pp-streifen button{padding:8px 16px;border:1px solid #996b5c;border-radius:4px;background:#fff;color:#4a332b;cursor:pointer;font-size:1em;line-height:1.2}
.kd-pp .kd-pp-streifen button[aria-checked=true]{background:#996b5c;color:#fff}
.kd-pp .kd-pp-einheit button{padding:8px 12px}
.kd-pp-zwei{display:flex;gap:16px;flex-wrap:wrap}
.kd-pp-zwei > div{flex:0 1 160px;min-width:0}

/* Knöpfe */
.kd-pp .kd-pp-knopf{display:inline-block;padding:10px 18px;border-radius:4px;background:#996b5c;color:#fff;border:1px solid #996b5c;cursor:pointer;font-weight:700;font-size:1em;line-height:1.3;text-decoration:none;text-align:center}
.kd-pp .kd-pp-knopf:hover{background:#7d5446;border-color:#7d5446;color:#fff}
.kd-pp .kd-pp-knopf-hell{background:#fff;color:#4a332b}
.kd-pp .kd-pp-knopf-hell:hover{background:#f3e9e5;color:#4a332b}
.kd-pp .kd-pp-knopf-klein{padding:4px 10px;border:1px solid #996b5c;border-radius:4px;background:#fff;color:#4a332b;cursor:pointer;font-size:.92em;font-weight:600}
.kd-pp-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 .5em}

/* Ergebnis: Kurzfassung, darunter zugeklappt Schritte und alle Angaben */
.kd-pp-ergebnis{border-top:1px solid #e3d9d5;margin-top:1.2em;padding-top:1em}
.kd-pp-ergebnis h3{margin:0 0 .2em;font-size:1.2em}
.kd-pp-kurz{background:#fff;border:1px solid #e3d9d5;border-radius:6px;padding:2px 16px;margin:.4em 0 12px}
.kd-pp-zeile{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:4px 14px;padding:12px 0;border-top:1px solid #efe7e3}
.kd-pp-zeile:first-child{border-top:0}
.kd-pp-zeile-titel{font-weight:700;color:#7d5446}
.kd-pp-zeile-wert > p,.kd-pp-zeile-wert > div{margin:.4em 0 0}
.kd-pp-zeile-wert > p:first-child,.kd-pp-zeile-wert > div:first-child{margin-top:0}
.kd-pp-zeile-wert strong{font-size:1.05em}
.kd-pp-kalender + .kd-pp-kalender{margin-top:.8em}
.kd-pp-kalender .kd-pp-unter{margin:0 0 .4em}
.kd-pp-hinweis{background:#fff7d6;border:1px solid #e6d27a;border-radius:4px;padding:8px 10px;margin:.5em 0;font-size:.95em}
.kd-pp-klein{font-size:.88em;color:#4a5561;margin:.3em 0 .6em}
.kd-pp-unter{font-weight:600;margin:.8em 0 .2em}
.kd-pp-kern{font-size:1.05em;font-weight:700;margin:.4em 0}
.kd-pp-warnung{color:#a01d00}
.kd-pp-quelle{font-size:.85em;color:#4a5561}
.kd-pp-quelle a,a.kd-pp-quelle{color:#4a5561}
.kd-pp-widerspruch{color:#a05a00;cursor:help}
.kd-pp details{margin:0 0 .8em}
.kd-pp summary{cursor:pointer;color:#7d5446;font-weight:600}
.kd-pp details.kd-pp-mehr{background:#fff;border:1px solid #e3d9d5;border-radius:6px;padding:12px 16px;margin:0 0 12px}
.kd-pp details.kd-pp-mehr > summary{color:#4a332b;font-weight:700}
.kd-pp details.kd-pp-mehr[open] > summary{margin-bottom:.6em}
.kd-pp details.kd-pp-rechner{margin:.6em 0 0}
.kd-pp details.kd-pp-rechner[open]{background:#faf6f4;border-radius:4px;padding:8px 10px}
.kd-pp-abschnitt{border-top:1px solid #efe7e3;padding:10px 0 2px}
.kd-pp-abschnitt h4{margin:0 0 .4em;font-size:1.05em}
.kd-pp-abschnitt ul{margin:0 0 .8em;padding-left:1.3em}
.kd-pp-abschnitt li{margin:0 0 .3em}
.kd-pp-schritte{margin:0 0 .8em;padding-left:1.6em}
.kd-pp-schritte li{margin:0 0 .45em;padding-left:.2em}
.kd-pp .kd-produktlink{margin:0 0 .3em}
.kd-pp .kd-produktlink a{display:inline-block;background-color:#B80000;color:#fff;font-weight:700;line-height:1.4;padding:12px 20px;border-radius:6px;text-decoration:none}
.kd-pp .kd-produktlink a:hover{background-color:#8F0000;color:#fff}
.kd-pp .kd-produktlink a::after{content:"*"}
@media(max-width:768px){
	.kd-pp{padding:16px 14px 6px}
	.kd-pp-kurz{padding:2px 12px}
	.kd-pp-zeile{grid-template-columns:minmax(0,1fr);gap:2px}
	.kd-pp details.kd-pp-mehr{padding:10px 12px}
	.kd-pp .kd-produktlink a{display:block;text-align:center}
	.kd-pp-knoepfe > *{flex:1 1 140px}
}