/* DeclutterData · Namenskonventions-Prüfer (nur Werkzeug und Regeltabelle).
   Tokens, Schriften, Kopf, Footer, .in, .tag, .xb, .kick5, .crumbs, .wv, .vgl-t, .hinweis, .faq kommen aus site.css.
   Alles unter .np (Werkzeug) und .np-regeln (Regeltabelle), damit nichts anderes berührt wird. */
:root{--np-feld:#FFFFFF;--np-ok:#5C8A00;--np-warn:#D49A00;--np-fehler:#C8423B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--np-feld:#121212}}
:root[data-theme="dark"]{--np-feld:#121212}

.np [hidden]{display:none!important}
.np-karte{background:var(--box);border-radius:20px;padding:clamp(18px,3vw,30px);box-shadow:0 11px 37px var(--shadow-soft);display:grid;gap:18px}
.np-felder{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
@media (max-width:640px){.np-felder{grid-template-columns:1fr}}
.np label{display:block;font:700 15px/1.4 var(--font-body);color:var(--heading);margin-bottom:6px}
.np label small{font-weight:400;color:var(--muted)}
.np input,.np select,.np textarea{width:100%;font:16px/1.5 var(--font-body);color:var(--heading);background:var(--np-feld);border:2px solid var(--muted);border-radius:12px;padding:10px 14px}
.np select{appearance:auto}
.np textarea{min-height:200px;resize:vertical;font:15px/1.6 var(--font-mono);white-space:pre;overflow:auto}
.np input:focus-visible,.np select:focus-visible,.np textarea:focus-visible{outline:3px solid var(--primary);outline-offset:1px;border-color:var(--secondary)}
.np input::placeholder,.np textarea::placeholder{color:var(--muted);opacity:1}
.np-hilfe{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}
.np-hilfe code,.np-regeln code,.np-t code,.np-schritte code{font:14px/1.5 var(--font-mono);background:color-mix(in srgb,var(--secondary) 10%,transparent);color:var(--heading);padding:1px 6px;border-radius:6px;overflow-wrap:break-word}
.np-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.np .xb{font:700 16px/1.4 var(--font-body);padding:10px 24px;justify-content:center;gap:10px}
.np .xb:hover,.np .xb:focus-visible{background:var(--primary);border-color:var(--secondary);color:var(--on-primary)}
.np .xb .ic{width:18px;height:18px}
.np .xb.ghost{background:transparent;color:var(--blue-text);border-color:var(--blue-text);box-shadow:none}
.np .xb.ghost:hover,.np .xb.ghost:focus-visible{background:var(--secondary);border-color:var(--secondary);color:var(--on-secondary)}
.np .xb[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.np .xb[disabled]:hover{background:var(--secondary);border-color:var(--primary);color:var(--on-secondary)}
.np .xb.ghost[disabled]:hover{background:transparent;border-color:var(--blue-text);color:var(--blue-text)}
.np-fehler{margin:0;padding:12px 16px;border-radius:12px;border:2px solid var(--np-fehler);background:color-mix(in srgb,var(--np-fehler) 12%,var(--box));color:var(--heading);font-weight:600;line-height:1.5}
.np-status{margin:0;min-height:1.4em;font-size:14px;color:var(--muted)}
.np-ergebnis{margin-top:clamp(24px,3vw,36px);scroll-margin-top:110px;display:grid;gap:16px}
.np-ergebnis h2{font:800 clamp(22px,2.4vw,28px)/1.25 var(--font-heading);color:var(--heading);margin:0}
.np-zaehler{display:flex;flex-wrap:wrap;gap:10px}
.np-chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:5px 14px 5px 8px;background:var(--box);border:2px solid var(--hairline);font:700 15px/1.3 var(--font-body);color:var(--heading)}
.np-sym{width:22px;height:22px;flex:none;border-radius:50%;padding:4px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ok>.np-sym{background:var(--np-ok)}
.warn>.np-sym{background:var(--np-warn);stroke:#2B2D32}
.fehler>.np-sym{background:var(--np-fehler)}
.np-box{border-radius:20px;overflow:hidden;background:var(--box);box-shadow:0 11px 37px var(--shadow-soft)}
.np-t{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.np-t th,.np-t td{padding:12px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--hairline)}
.np-t thead th{border-top:0;font:700 15px var(--font-heading);color:var(--heading);background:color-mix(in srgb,var(--secondary) 9%,transparent)}
.np-t td{color:var(--heading)}
.np-t code{white-space:normal;overflow-wrap:break-word;word-break:normal}
.np-st{display:inline-flex;align-items:center;gap:8px;font-weight:700;white-space:nowrap}
.np-fallback{display:grid;gap:8px}
.np-fallback textarea{min-height:120px}
.np-platzhalter{margin:0;font-size:14px;color:var(--muted)}
@media (min-width:701px){.np-t{table-layout:fixed}.np-t th:nth-child(1){width:14%}.np-t th:nth-child(2){width:14%}.np-t th:nth-child(3){width:25%}.np-t th:nth-child(4){width:27%}.np-t th:nth-child(5){width:20%}}
@media (max-width:700px){
  .np-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .np-t,.np-t tbody,.np-t tr,.np-t td{display:block;width:auto}
  .np-t tr{padding:14px 16px;border-top:1px solid var(--hairline)}
  .np-t tbody tr:first-child{border-top:0}
  .np-t td{padding:0;border:0;margin-top:8px}
  .np-t td:first-child{margin-top:0}
  .np-t td::before{content:attr(data-l);display:block;font:700 12px var(--font-heading);letter-spacing:1.4px;text-transform:uppercase;color:var(--blue-text);margin-bottom:2px}
  .np-t td:first-child::before{display:none}
}

/* Anleitung: nummerierte Schritte stehen in site.css (.schritte); hier nur Code im Fließtext */
.np-schritte code{font-weight:400}

/* Regeltabelle (Baustein .vgl-t, hier mit fünf Spalten und Erklärung unter dem Objektnamen) */
.np-regeln .vgl-t th small{display:block;margin-top:6px;font:400 14px/1.5 var(--font-body);color:var(--muted)}
.np-regeln .vgl-t td{overflow-wrap:break-word}
.np-regeln .vgl-t td:nth-child(2){width:auto}
@media (min-width:701px){.np-regeln .vgl-t{table-layout:fixed}.np-regeln .vgl-t thead th:nth-child(1){width:21%}.np-regeln .vgl-t thead th:nth-child(2){width:26%}.np-regeln .vgl-t thead th:nth-child(3){width:28%}.np-regeln .vgl-t thead th:nth-child(4){width:25%}.np-regeln .vgl-t tbody th{width:auto}.np-regeln .vgl-t td:nth-child(2){width:auto}}
.np-regeln .vgl-t.neutral td:last-child{color:inherit}
.np-regeln .vgl-t .np-nein{color:var(--heading)}
.np-gut{margin-top:22px}
