/*
 * Batix CD-Formular, v1 (inhalte/gemeinsam/cd/formular-v1.css)
 *
 * Optik des Anmeldeformulars aus dem Prototyp (Werkbank, Formular auf Marine), passend zum
 * Baustein bausteine/anmeldung-v1.html: .form-panel (Element mit data-cx="anmeldung" auf der
 * Seite), .reg-form, .form-row, .form-field, .form-checkbox, .field-error, .form-actions,
 * .form-note, .form-status, .form-success und der Honeypot .cx-hp. Neu gegenüber dem Prototyp:
 * Zustandstext (.form-zustand), Auswahlfeld (select), Hilfetext (.form-hilfe), Sperre zur
 * Stichzeit (.reg-form.cx-gesperrt), Testmodus-Hinweis (.preview-note auch im Formular).
 *
 * Gestaltet für dunklen Hintergrund (Marine-Band). Eine Seite darf eigenes CSS darüberlegen
 * (assets/seite.css nach dieser Datei laden; KONZEPT 5.5). Voraussetzung: tokens-v1.css,
 * basis-v1.css, icons-v1.css.
 * Nur anhängen: Diese Datei wird nie geändert, eine Änderung ergibt formular-v2.css (KONZEPT 9.6).
 * Vor dem ersten Release auf bx51 korrigiert (14.10.2026): Fokusrahmen der Checkboxen (inhalte/README.md).
 */

/* Fokusrahmen im Formular in Apple statt Marine (wie .section-register im Prototyp, Werkbank Z. 373):
   Auf dem Marine-Band wäre der Rahmen von :focus-visible (basis-v1.css) sonst unsichtbar
   (Absende-Button, Link Datenschutzhinweise, Kalender-Button der Danke-Meldung). */
.form-panel {
  --focus: var(--apple);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 40px;
}
.reg-form { display: flex; flex-direction: column; gap: 18px; }
.reg-form[hidden] { display: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
}
.form-field label .optional { text-transform: none; letter-spacing: 0; font-weight: 400; }
.form-field input:not([type="checkbox"]),
.form-field textarea,
.form-field select {
  font-family: var(--font-body); font-size: 0.95rem; color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px; padding: 14px 18px; width: 100%;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none; appearance: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
/* Textfelder zeigen den Fokus über Rahmen und Schatten; Checkboxen behalten ihren Fokusrahmen (siehe .form-checkbox) */
.form-field input:not([type="checkbox"]):focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none; border-color: var(--apple-60); background-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px var(--apple-60);
}
.form-field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.form-field [aria-invalid="true"] { border-color: var(--danger-bg); box-shadow: 0 0 0 1px var(--danger-bg); }

/* Auswahlfeld: Pfeil aus zwei Verläufen (keine Grafik, keine data:-URI) */
.form-field select {
  padding-right: 48px; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.72) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.form-field select option { color: var(--anthrazit); background: var(--white); }

.form-hilfe { font-size: 0.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }

.field-error {
  align-self: flex-start;
  font-size: 0.8rem; font-weight: 600; line-height: 1.4;
  color: var(--danger); background: var(--danger-bg);
  border-radius: 8px; padding: 4px 10px;
}
.field-error[hidden] { display: none; }

.form-checkbox { display: flex; gap: 12px; align-items: flex-start; }
.form-checkbox input[type="checkbox"] {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--apple); cursor: pointer;
}
.form-field .form-checkbox label {
  font-size: 0.88rem; font-weight: 400; line-height: 1.55; letter-spacing: 0;
  text-transform: none; color: rgba(255, 255, 255, 0.78); cursor: pointer;
}
.form-checkbox input[aria-invalid="true"] { outline: 2px solid var(--danger-bg); outline-offset: 2px; }
/* Fokusrahmen der Checkboxen (Datenschutz, Zusatzfelder; WCAG 2.4.7): --focus ist im .form-panel Apple,
   Kontrast 5,3:1 auf dem Panel über Marine (mindestens 3:1). Steht nach der Fehlermarkierung, damit der Fokus
   auch an einem markierten Feld sichtbar ist; den Fehler zeigt dann weiter der Text darunter. */
.form-checkbox input[type="checkbox"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.form-checkbox a { color: var(--apple-60); font-weight: 600; text-underline-offset: 3px; }
.form-checkbox a:hover { color: var(--white); }

.form-actions {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-top: 6px;
}
.form-note { font-size: 0.8rem; color: rgba(255, 255, 255, 0.72); }
.form-status { font-size: 0.88rem; font-weight: 600; color: var(--danger-bg); }
.form-status:empty { display: none; }

/* Honeypot bx_website – für Menschen unsichtbar, muss leer bleiben (KONZEPT 6.3) */
.cx-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Sperre zur Stichzeit (cx-v1.js; maßgeblich bleibt der Server mit 409) */
.reg-form.cx-gesperrt .form-field,
.reg-form.cx-gesperrt .form-row { opacity: 0.6; }

.form-success,
.form-zustand { text-align: left; }
.form-success[hidden] { display: none; }
.form-success:focus { outline: none; }
.form-success > .bxfr,
.form-zustand > .bxfr { font-size: 3rem; color: var(--apple); margin-bottom: 20px; }
.form-success h3,
.form-zustand h3 { color: var(--white); font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 14px; }
.form-success p { color: rgba(255, 255, 255, 0.78); margin-bottom: 28px; }
.form-zustand p { color: rgba(255, 255, 255, 0.78); }
.form-zustand p + p { margin-top: 12px; }
.form-success .preview-note,
.preview-note {
  margin: 20px 0 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.72);
}

/* Mehrzeilige Texte aus event.json (erfolgText, hinweisNachSchluss): Zeilenumbrüche zeigen */
.cx-mehrzeilig { white-space: pre-line; }

@media (max-width: 640px) {
  .form-panel { padding: 28px 22px; }
  .form-row { grid-template-columns: 1fr; }
  .form-actions .btn { width: 100%; }
}