/* ==========================================================================
   Malik Akademie – Formularzustände, Auswahlfelder, Teilnehmerzeilen
   ========================================================================== */

/* ------------------------------------------------------------ Auswahlfeld */

select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-color: var(--card);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23044C4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 7 7.5l6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 13px 9px;
  padding-right: 44px;
  font-weight: 600;
  color: var(--ink);
  text-overflow: ellipsis;
}
select:hover { border-color: var(--sage); }
select:focus { background-color: var(--card); }

/* Die Auswahlliste selbst – nur begrenzt gestaltbar, aber lesbar. */
select option { color: var(--ink); background: var(--card); padding: 10px; font-weight: 500; }
select option:disabled { color: var(--ink-3); }

/* Sehr lange Auswahlfelder brauchen keine volle Breite. */
.f--wide select { max-width: 560px; }

/* --------------------------------------------------------- Fehlerzustände */

.has-error input,
.has-error select,
.has-error textarea {
  border-color: var(--err);
  background-color: #FFF7F8;
}
.has-error input:focus,
.has-error select:focus,
.has-error textarea:focus {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(179, 36, 60, .16);
}
.has-error > label,
.has-error > span { color: var(--err); }

.f_error {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 2px 0 0;
  font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--err);
}
.f_error::before {
  content: '!';
  flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px;
  border-radius: 50%; background: var(--err); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}

/* Ankreuzfelder */
.check.has-error { color: var(--err); }
.check.has-error input { outline: 2px solid var(--err); outline-offset: 2px; border-radius: 3px; }
.check.has-error a { color: var(--err); }
.check .f_error { margin-left: 31px; flex-basis: 100%; }

/* Meldung über dem Formular */
#bk-fehler { margin-bottom: 20px; }
#bk-fehler .note_h { font-size: 16px; font-weight: 800; margin: 0 0 4px; }
#bk-fehler .note_p { margin: 0; font-size: 15px; }
#bk-fehler[hidden] { display: none; }

/* ------------------------------------------------------- Teilnehmerzeilen */

.person { align-items: start; }
.person_last { display: flex; gap: 8px; align-items: center; }
.person_last input { flex: 1 1 auto; }
.person_del {
  flex: 0 0 40px; width: 40px; height: 46px;
  background: transparent; border: 1.5px solid var(--line-2); border-radius: var(--r-xs);
  color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.person_del:hover { border-color: var(--err); color: var(--err); background: #FFF7F8; }

.addrow:disabled { opacity: .5; cursor: not-allowed; }

/* Absendeknopf während des Sendens */
button[type=submit]:disabled { opacity: .65; cursor: progress; }

@media (max-width: 860px) {
  .f--wide select { max-width: none; }
  .person_last { grid-column: 1 / -1; }
}