/* AJR Digital – Warteliste-Formular (AJR-48)
 * Neutrale Basis-Optik; erbt die Farbtokens der jeweiligen Seite
 * (--accent, --line, --ink, --muted, --r ...) mit Fallbacks.
 * Feinschliff/Abstimmung mit Sophie (Designer) offen – siehe Issue.
 */

.ajr-wl {
  --wl-accent: var(--accent, #E41414);
  --wl-line:   var(--line, #E4E3DC);
  --wl-ink:    var(--ink, #15161B);
  --wl-muted:  var(--muted, #585A61);
  --wl-radius: var(--r-sm, 8px);
  --wl-ok:     #1B7F4B;
  --wl-err:    #B42318;
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0;
  text-align: left;
  font: inherit;
}
.ajr-wl.is-center { margin-left: auto; margin-right: auto; }

.ajr-wl__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ajr-wl__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 13px 14px;
  font-size: 16px;                 /* >=16px: verhindert iOS-Zoom */
  line-height: 1.2;
  color: var(--wl-ink);
  background: #fff;
  border: 1px solid var(--wl-line);
  border-radius: var(--wl-radius);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ajr-wl__input:focus {
  border-color: var(--wl-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-accent) 22%, transparent);
}
.ajr-wl__input[aria-invalid="true"] { border-color: var(--wl-err); }

.ajr-wl__btn {
  flex: 0 0 auto;
  padding: 13px 20px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--wl-accent);
  border: 0;
  border-radius: var(--wl-radius);
  cursor: pointer;
  transition: filter .15s ease, transform .02s ease;
  white-space: nowrap;
}
.ajr-wl__btn:hover { filter: brightness(1.06); }
.ajr-wl__btn:active { transform: translateY(1px); }
.ajr-wl__btn[disabled] { opacity: .6; cursor: default; }

/* Honeypot: für Menschen unsichtbar, für Bots ausfüllbar. */
.ajr-wl__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.ajr-wl__note {
  margin: 8px 2px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--wl-muted);
}
.ajr-wl__note a { color: inherit; text-decoration: underline; }

.ajr-wl__status {
  margin: 10px 2px 0;
  font-size: 14px;
  line-height: 1.45;
  min-height: 0;
}
.ajr-wl.is-ok  .ajr-wl__status { color: var(--wl-ok); font-weight: 600; }
.ajr-wl.is-err .ajr-wl__status { color: var(--wl-err); }

/* Nach Erfolg Eingabe ausblenden – aufgeräumte Bestätigung. */
.ajr-wl.is-ok .ajr-wl__row,
.ajr-wl.is-ok .ajr-wl__note { display: none; }

.ajr-wl.is-busy .ajr-wl__btn { opacity: .6; cursor: default; }