/* Newsletter-/Warteliste-Anmeldung: Ergaenzung zu .v4-form/.v4-field aus v4.css.
   v4.css selbst wird nicht angefasst (siehe Bauauftrag), diese Datei kommt danach. */

.v4-form[data-anmelden] { flex-wrap: wrap; gap: 14px 12px; align-items: start; }
.v4-form[data-anmelden] .v4-field { padding-top: 2px; }

.anmelden-check {
  flex: 1 1 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(251, 243, 237, .78);
}
.anmelden-check input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--paper-w, #fbf3ed);
}

.anmelden-hinweis {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(251, 243, 237, .62);
  max-width: 52ch;
}
.anmelden-hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.anmelden-status {
  flex: 1 1 100%;
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(251, 243, 237, .92);
}
.anmelden-status.is-error { color: #ffd9cf; }

/* Variante auf hellem Grund (z. B. Datenschutzseite oder helle Sektionen):
   Elternelement traegt .on-paper, faellt sonst auf die dunkle Default-Farbe zurueck. */
.on-paper .anmelden-check,
.on-paper .anmelden-hinweis { color: var(--ink-soft); }
.on-paper .anmelden-check input { accent-color: var(--terra-700); }
.on-paper .anmelden-status { color: var(--ink); }

.cf-turnstile { flex: 1 1 100%; }

@media (max-width: 899px) {
  .v4-form[data-anmelden] .v4-field { flex-basis: 100%; }
}

/* ---------- Warteliste (form[data-warteliste]) ----------
   Eigenstaendig, haengt nicht an v4.css (auch auf Seiten nur mit salita.css nutzbar).
   Standard: dunkler Grund (.sec-dark). Auf hellem Grund Elternelement mit .on-paper. */
.wl-form { display: grid; gap: 18px; margin-top: 22px; max-width: 560px; }
.wl-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wl-form legend { padding: 0; margin-bottom: 10px; font-size: 14px; color: rgba(251, 243, 237, .78); }
.wl-choice { display: grid; gap: 8px; }
.wl-choice label {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 14px; border: 1px solid rgba(251, 243, 237, .32); border-radius: 10px;
  font-size: 15px; line-height: 1.35; color: rgba(251, 243, 237, .92);
}
.wl-choice label:has(input:checked) { border-color: var(--paper-w, #fbf3ed); background: rgba(251, 243, 237, .08); }
.wl-choice input { width: 16px; height: 16px; flex: none; accent-color: var(--paper-w, #fbf3ed); margin: 0; }
.wl-choice .wl-first { font-weight: 600; }
.wl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.wl-field { display: grid; gap: 8px; font-size: 14px; color: rgba(251, 243, 237, .78); }
.wl-field input, .wl-field textarea {
  font: inherit; font-size: 1.05rem; color: var(--paper-w, #fbf3ed); background: transparent;
  border: 0; border-bottom: 2px solid rgba(251, 243, 237, .45); padding: 10px 0; border-radius: 0; width: 100%;
}
.wl-field textarea { resize: vertical; min-height: 84px; }
.wl-field input::placeholder, .wl-field textarea::placeholder { color: rgba(251, 243, 237, .45); }
.wl-field input:focus, .wl-field textarea:focus { outline: none; border-bottom-color: var(--paper-w, #fbf3ed); }
.wl-note { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(251, 243, 237, .88); max-width: 52ch; }
.wl-form .btn { justify-self: start; }
.wl-form .btn[disabled] { opacity: .6; cursor: default; }
.wl-form .anmelden-hinweis { margin: 0; }
.wl-form .anmelden-status { margin: 0; }
.wl-erfolg { margin: 22px 0 0; font-size: 1.1rem; line-height: 1.5; color: var(--paper-w, #fbf3ed); max-width: 44ch; }
.wl-erfolg[hidden], .wl-form[hidden], .wl-form [hidden] { display: none; }

.on-paper .wl-form legend, .on-paper .wl-field { color: var(--ink-soft); }
.on-paper .wl-field input, .on-paper .wl-field textarea { color: var(--ink); border-bottom-color: var(--line); }
.on-paper .wl-choice label { color: var(--ink); border-color: var(--line); }
.on-paper .wl-note, .on-paper .wl-erfolg { color: var(--ink); }

@media (max-width: 899px) {
  .wl-row { grid-template-columns: 1fr; }
}