/*
  Eigene Produkte im Konfigurator.

  Der Block sitzt zwischen den Kategorien und der Produktliste. Er ist bewusst
  ruhig gehalten: geschlossen ist er eine einzige Zeile, offen ein Formular.
  Wer nur ein Produkt sucht, soll ihn übersehen können.

  Die Größen sind die des Katalogs daneben, nicht die der Website. Der Katalog
  ist eine dichte Auswahlliste mit kleiner Schrift; ein Formular in
  Website-Größe hätte ihn auseinandergerissen. Die Bedienflächen selbst bleiben
  trotzdem hoch genug für einen Daumen.
*/

.eigen {
  margin-top: 10px;
  border: 1px solid #e0e4eb;
  border-radius: 11px;
  background: #fafbfd;
  overflow: hidden;
}

.eigen-oeffner {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 0;
  background: transparent;
  color: #3554c7;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.eigen-oeffner:hover {
  background: #f2f5ff;
}

.eigen-oeffner svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.eigen-oeffner[aria-expanded='true'] svg {
  transform: rotate(45deg);
}

.eigen-inhalt {
  padding: 4px 11px 12px;
  border-top: 1px solid #e6e9f0;
}

.eigen-ruhig {
  margin: 8px 0 0;
  color: #778194;
  font-size: 8px;
  line-height: 1.5;
}

/* Meldungen stehen über dem Formular, damit sie nicht unter dem Knopf
   verschwinden, den man gerade gedrückt hat. */
.eigen-meldung:empty {
  display: none;
}

.eigen-meldung {
  margin: 8px 0 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: #edf1ff;
  color: #3554c7;
  font-size: 8px;
  line-height: 1.45;
}

.eigen-meldung[data-art='fehler'] {
  background: #fdeceb;
  color: #b02a20;
}

.eigen-meldung[data-art='gut'] {
  background: #e9f6ee;
  color: #1d6b3c;
}

.eigen-wechsel {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.eigen-reiter {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #e0e4eb;
  border-radius: 999px;
  background: #fff;
  color: #737d8e;
  font: inherit;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}

.eigen-reiter[aria-pressed='true'] {
  border-color: #1e2b4b;
  background: #1c2741;
  color: #fff;
}

.eigen-formular {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.eigen-feld {
  display: grid;
  gap: 4px;
}

.eigen-feld label {
  color: #8a94a6;
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eigen-feld input,
.eigen-feld select {
  width: 100%;
  min-height: 38px;
  /* Mehr Polster seitlich, sonst klebt der Text in der Rundung. */
  padding: 0 16px;
  border: 1px solid #dfe3ea;
  /* Rund wie die Felder auf der Website, siehe --radius-field. */
  border-radius: 999px;
  background: #fff;
  color: #1e2738;
  font: inherit;
  font-size: 10px;
}

.eigen-feld input[type='file'] {
  /*
    Bleibt eckig. Ein Dateifeld trägt innen den Knopf des Browsers, und der
    sitzt in einer Pille schief. Muss die Rundung der Grundregel überschreiben.
  */
  border-radius: 9px;
  padding: 9px 10px;
  font-size: 8px;
}

.eigen-feld input:focus-visible,
.eigen-feld select:focus-visible {
  outline: 0;
  border-color: #809bff;
  box-shadow: 0 0 0 3px rgba(95, 128, 255, 0.12);
}

/* Ohne diese Zeile blieb ein leerer weißer Kasten stehen, bevor überhaupt ein
   Bild gewählt war: die Regeln darunter setzen eine Größe, und die schlägt das
   versteckte Element. */
.eigen-vorschau[hidden] {
  display: none;
}

.eigen-vorschau {
  justify-self: start;
  width: 54px;
  height: 54px;
  margin-top: 2px;
  border: 1px solid #e2e6ed;
  border-radius: 9px;
  background: #fff;
  object-fit: contain;
}

.eigen-haken {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.eigen-haken input {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  flex: none;
}

.eigen-haken label {
  color: #778194;
  font-size: 7.5px;
  line-height: 1.5;
}

.eigen-haken a {
  color: #3554c7;
  text-decoration: underline;
}

.eigen-haupt {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: #2348db;
  color: #fff;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.eigen-haupt:hover {
  background: #1c3ab4;
}

.eigen-haupt:disabled {
  background: #9aa7d8;
  cursor: default;
}

.eigen-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 10px;
  color: #778194;
  font-size: 8px;
}

.eigen-still {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #e0e4eb;
  border-radius: 999px;
  background: #fff;
  color: #737d8e;
  font: inherit;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}

.eigen-listentitel {
  margin: 14px 0 0;
  color: #8a94a6;
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eigen-liste {
  display: grid;
  gap: 5px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.eigen-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #e2e6ed;
  border-radius: 9px;
  background: #fff;
}

.eigen-listenname {
  min-width: 0;
  overflow: hidden;
  color: #1c2536;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eigen-stand {
  flex: none;
  padding: 3px 6px;
  border-radius: 5px;
  background: #eef1f6;
  color: #687286;
  font-size: 6.5px;
  font-weight: 700;
}

.eigen-stand[data-stand='approved'] {
  background: #e9f6ee;
  color: #1d6b3c;
}

.eigen-stand[data-stand='rejected'] {
  background: #fdeceb;
  color: #b02a20;
}