/* ========================================================================
   Punkt „Kein …" oben in optionalen Konfigurator-Schritten (js/cfg-kein.js)
   ------------------------------------------------------------------------
   Gleiche Karte wie die Optionen, nur flach: eine Zeile, Name links, Pille
   rechts. Die Werte kommen aus css/productdetails.css (Abschnitte „Variante B"
   und Rahmen der .config-item), weil die Karte bewusst kein .config-item ist.

   Drei Zustände, gleiche Sprache wie bei Pflicht-Schritten:
     * eine Option ist gewählt   weiße Karte, Pille „Auswählen"
     * nichts gewählt, unberührt grauer Rahmen, Pille „Gewählt" in Grau
     * selbst bestätigt          grüner Rahmen, Pille „Gewählt" in Grün
   Bestätigt heißt: Klick auf die Karte (cfg-st-done) oder „Weiter" im
   Schritt (data-csk-selbst, gesetzt in js/cfg-dialog.js).
   ======================================================================== */
#cfg-container .config-item-list .cs-kein {
  position: relative;
  margin: 0 0 9px;
  padding: 0;
  list-style: none;
}
/* Das Feld bleibt für die Tastatur erreichbar, sichtbar ist die Karte. */
#cfg-container .cs-kein__feld {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
#cfg-container .cs-kein__karte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid #d7dbcf;
  border-radius: 12px;
  background: #fff;
  color: #2f3e46;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}
#cfg-container .cs-kein__karte::after {
  content: "Auswählen";
  flex: 0 0 auto;
  padding: 7px 15px;
  border: 1.5px solid #e7ebe0;
  border-radius: 999px;
  background: #fff;
  color: #6a7b59;
  font-size: .87rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#cfg-container .cs-kein__karte:hover::after {
  background: #cbd8a6;
  border-color: #cbd8a6;
  color: #333;
}
#cfg-container .cs-kein__feld:focus-visible + .cs-kein__karte::after {
  border-color: #7a9a4e;
  box-shadow: 0 0 0 3px rgba(122, 154, 78, .22);
}

/* Nichts gewählt, unberührt: wie eine Vorbelegung im Pflicht-Schritt. */
#cfg-container .cs-kein__feld:checked + .cs-kein__karte {
  padding: 9.5px 12.5px;
  border: 1.5px solid #aab4b8;
  background: #f7f9fa;
}
#cfg-container .cs-kein__feld:checked + .cs-kein__karte::after {
  content: "Gewählt";
  padding-left: 30px;
  background: var(--cs-haken-weiss) no-repeat left 12px center / 11px 11px, #aab4b8;
  border-color: #aab4b8;
  color: #fff;
}

/* Selbst bestätigt: wie eine gewählte Option. */
#cfg-container .cfg-st-done .cs-kein__feld:checked + .cs-kein__karte,
#cfg-container [data-csk-selbst] .cs-kein__feld:checked + .cs-kein__karte {
  padding: 9px 12px;
  border: 2px solid #7a9a4e;
  border-radius: 16px;
  background: #eaf1dc;
}
#cfg-container .cfg-st-done .cs-kein__feld:checked + .cs-kein__karte::after,
#cfg-container [data-csk-selbst] .cs-kein__feld:checked + .cs-kein__karte::after {
  background: var(--cs-haken-weiss) no-repeat left 12px center / 11px 11px, #7a9a4e;
  border-color: #7a9a4e;
}

/* Zusammenstellung: der Text ersetzt „nichts gewählt", siehe css/productdetails.css. */
#cfg-container.cfg-nur-summary tbody.summary > tr > td.cfg-summary-item[data-cs-kein]:not(:has(.row))::before {
  content: attr(data-cs-kein);
}
#cfg-container.cfg-nur-summary tbody.summary > tr.csk-gewaehlt > td.cfg-summary-item[data-cs-kein]:not(:has(.row))::before {
  color: #2f3e46;
}