/* Gemeinsames Aussehen aller Seiten, angelehnt an nelhiebel.de: Rot, Anthrazit, Weiss. */
:root{
  --rot:#bb0e1c; --rot-tief:#8f0a15; --kohle:#181a1a; --text:#2b2d2d; --grau:#676b6c;
  --linie:#d9dbda; --flaeche:#f3f3f1; --gruen:#2a7a4b; --gruen-bg:#e6f3ea; --rot-bg:#fbe9ea;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 "Segoe UI","Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--flaeche)}
a{color:var(--rot-tief)}
:focus-visible{outline:3px solid #1d6fd6;outline-offset:2px}

/* Kopf: weiss mit Logo wie auf nelhiebel.de */
.kopf{background:#fff;border-bottom:1px solid var(--linie);display:flex;align-items:center;gap:20px;padding:0 24px;min-height:68px;flex-wrap:wrap}
.marke{display:flex;align-items:center;padding:10px 0}
.marke img{display:block;height:48px;width:auto}
.produkt{font-weight:600;color:var(--grau);border-left:1px solid var(--linie);padding-left:18px}
.umgebung{background:var(--rot);color:#fff;font-size:12px;font-weight:600;padding:2px 8px;border-radius:2px}
.kopf nav{display:flex;align-self:stretch;flex:1}
.kopf nav a{display:flex;align-items:center;color:var(--grau);text-decoration:none;font-weight:600;padding:0 16px;border-bottom:3px solid transparent}
.kopf nav a[aria-current=page]{color:var(--kohle);border-bottom-color:var(--rot)}
.kopf nav a:hover{color:var(--kohle)}
.konto{display:flex;align-items:center;gap:14px;margin-left:auto}
.konto a{color:var(--kohle);text-decoration:none;font-weight:600}
.konto a[aria-current=page]{text-decoration:underline}
.konto form{margin:0}

/* Inhalt */
main{max-width:920px;margin:32px auto;padding:0 24px 60px}
main.schmal{max-width:460px}
h1{font-size:26px;line-height:1.2;margin:0 0 6px}
h2{font-size:19px;margin:32px 0 10px}
.lage{margin:0 0 24px;color:var(--grau);max-width:70ch}
.karte{background:#fff;border:1px solid var(--linie);padding:22px 24px}

/* Formulare */
label{display:block;font-weight:600;font-size:15px;margin:16px 0 5px}
label:first-of-type{margin-top:0}
input[type=text],input[type=email],input[type=password],select{width:100%;font:inherit;color:inherit;padding:9px 11px;border:1px solid #b9bcbb;border-radius:3px;background:#fff}
.klein{font-size:14px;color:var(--grau);margin:4px 0 0}
button,.knopf{font:inherit;font-weight:600;color:#fff;background:var(--rot);border:1px solid var(--rot);padding:9px 18px;border-radius:3px;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.knopf:hover{background:var(--rot-tief);border-color:var(--rot-tief)}
button.zweit{background:#fff;color:var(--text);border-color:#b9bcbb}
button.zweit:hover{border-color:var(--kohle);background:#fff}
button.still{background:#fff;color:var(--text);border-color:#b9bcbb;padding:5px 12px;font-size:14px}
button.still:hover{border-color:var(--kohle);background:#fff}
.knoepfe{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.haken{display:flex;align-items:center;gap:8px;font-weight:400;margin-top:16px}
.haken input{width:18px;height:18px}

/* Meldungen */
.meldung{background:var(--gruen-bg);color:var(--gruen);padding:10px 16px;margin:0 0 18px;font-weight:600}
.fehler{background:var(--rot-bg);color:var(--rot-tief);padding:10px 16px;margin:0 0 18px;font-weight:600}

/* Listen und Tabellen */
.pruefliste{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--linie)}
.pruefliste li{display:grid;grid-template-columns:26px 220px 1fr;gap:4px 10px;padding:13px 18px;border-bottom:1px solid #ecedec}
.pruefliste li:last-child{border-bottom:0}
.punkt{width:14px;height:14px;border-radius:50%;margin-top:5px;background:var(--gruen)}
.fehlt .punkt{background:#fff;border:3px solid var(--rot)}
.name{font-weight:600}
.wert{color:var(--grau)}
.hilfe{grid-column:2/4;color:var(--rot-tief)}
table{border-collapse:collapse;width:100%;background:#fff;border:1px solid var(--linie)}
th{font-size:13.5px;font-weight:600;color:var(--grau);text-align:left;padding:9px 14px;border-bottom:1px solid var(--linie)}
td{padding:11px 14px;border-bottom:1px solid #ecedec;vertical-align:top}
tr.aus td{color:var(--grau)}
details summary{cursor:pointer;color:var(--rot-tief);font-weight:600}
details form{margin-top:12px;padding:14px;background:var(--flaeche);min-width:260px}

@media (max-width:640px){
  .pruefliste li{grid-template-columns:26px 1fr}.wert,.hilfe{grid-column:2}
  .kopf{padding:8px 14px}.kopf nav{flex-basis:100%;order:3;min-height:42px}
}

/* Leistungsverzeichnis */
.pfad{margin:0 0 8px;font-size:14px}
.zahl{text-align:right;white-space:nowrap}
.kopfknoepfe{margin:0 0 18px}
.suche{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.suche input[type=search]{flex:1 1 320px;font:inherit;padding:9px 11px;border:1px solid #b9bcbb;border-radius:3px;background:#fff}
.sr{position:absolute;left:-9999px}
table.lv td{padding:8px 14px}
table.lv .oz{white-space:nowrap;color:var(--grau);font-variant-numeric:tabular-nums}
table.lv tr.gruppe td{background:var(--flaeche);font-weight:700;border-top:1px solid var(--linie)}
table.lv tr.gruppe.t0 td{background:var(--kohle);color:#fff}
table.lv tr.hinweis td{color:var(--grau)}
table.lv summary{cursor:pointer;color:inherit;font-weight:inherit}
table.lv tr.pos summary{font-weight:600}
table.lv tr.hinweis summary{font-weight:400;color:var(--grau)}
.lang{margin-top:8px;padding:10px 12px;background:var(--flaeche);font-size:14.5px;max-width:80ch;font-weight:400;color:var(--text)}
.meta{margin:4px 0 0;font-size:13.5px;color:var(--grau)}
.marke-art{background:var(--rot-bg);color:var(--rot-tief);padding:1px 7px;font-weight:600}
details.loeschen{margin-top:36px}