/* ============================================================
   WRV-Formulare (seit 1.3.0) – Ersatz für Ninja Forms
   Kontraste (WCAG AA) gegen Fläche #1E3A5F bzw. Feld #0E1D31:
   Text #F0EEE4 9,9:1 · Label #B7C2D1 6,4:1 · Fehler #F4A6A6 5,9:1
   Feldrahmen #6C89B0 3,2:1 / 4,7:1 (Nicht-Text-Kontrast ≥ 3:1)
   ============================================================ */

.wrv-form-wrap {
  --wrv-f-field-bg: var(--color-bg-deep, #0E1D31);
  --wrv-f-field-border: #6C89B0;
  --wrv-f-error: #F4A6A6;
  --wrv-f-link: #8FB0D6;
  margin-block: var(--space-6, 1.5rem) var(--space-8, 2rem);
  color: var(--color-text, #F0EEE4);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  scroll-margin-top: 110px;
  color-scheme: dark;
}
.wrv-form-wrap *,
.wrv-form-wrap *::before,
.wrv-form-wrap *::after { box-sizing: border-box; }

/* Turnieranmeldung auf großen Bildschirmen breiter als der Fließtext (.prose 760 px). */
@media (min-width: 1100px) {
  .prose .wrv-form-wrap--turnier {
    width: min(1040px, calc(var(--container, 1240px) - 2 * var(--container-px, 2rem)));
    max-width: none;
  }
}

.wrv-form { display: flex; flex-direction: column; gap: var(--space-5, 1.25rem); margin: 0; }

.wrv-form-note {
  margin: 0 !important;
  font-size: var(--text-sm, 0.9375rem);
  color: var(--color-text-muted, #B7C2D1);
}
.wrv-req { color: var(--wrv-f-error); font-weight: 700; margin-left: 0.15em; }

/* Abschnitte */
.wrv-form-section {
  margin: 0;
  min-width: 0;
  padding: var(--space-6, 1.5rem);
  background: var(--color-surface, #1E3A5F);
  border: 1px solid var(--color-border, #2C4A70);
  border-radius: var(--radius-md, 4px);
}
fieldset.wrv-form-section { padding-top: var(--space-5, 1.25rem); }
.wrv-form-legend {
  float: left;               /* Legend in den Kasten holen (kein Rahmen-Durchbruch) */
  width: 100%;
  margin: 0 0 var(--space-5, 1.25rem);
  padding: 0 0 var(--space-3, 0.75rem);
  border-bottom: 1px solid var(--color-border, #2C4A70);
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  font-weight: 700;
  font-size: var(--text-lg, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text, #F0EEE4);
}
.wrv-form-legend + * { clear: both; }

.wrv-form-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-5, 1.25rem) var(--space-4, 1rem);
}
.wrv-field { grid-column: span 6; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); margin: 0; }
.wrv-field--half { grid-column: span 3; }
.wrv-field--third { grid-column: span 2; }
.wrv-field--twothirds { grid-column: span 4; }
.wrv-field[hidden] { display: none !important; }

/* Labels (wie Vereinsfinder, etwas größer für lange Beschriftungen) */
.wrv-label {
  display: block;
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #B7C2D1);
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Eingabefelder */
.wrv-form input[type="text"],
.wrv-form input[type="email"],
.wrv-form input[type="tel"],
.wrv-form input[type="date"],
.wrv-form input[type="time"],
.wrv-form select,
.wrv-form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 0.7rem 0.85rem;
  background: var(--wrv-f-field-bg);
  border: 1px solid var(--wrv-f-field-border);
  border-radius: var(--radius-sm, 2px);
  color: var(--color-text, #F0EEE4);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-size: 16px;            /* verhindert Zoom auf iOS */
  line-height: 1.4;
  transition: border-color 180ms, background 180ms;
}
.wrv-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23B7C2D1' stroke-width='1.8' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  cursor: pointer;
}
.wrv-form select option { background: #0E1D31; color: #F0EEE4; }
.wrv-form textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.wrv-form input::placeholder,
.wrv-form textarea::placeholder { color: var(--color-text-faint, #9AAABF); opacity: 1; }
.wrv-form input:hover,
.wrv-form select:hover,
.wrv-form textarea:hover { border-color: var(--color-text-muted, #B7C2D1); }
.wrv-form input:focus,
.wrv-form select:focus,
.wrv-form textarea:focus { border-color: var(--color-primary-hover, #6B93BE); background-color: #12243C; outline: none; }
.wrv-form input:focus-visible,
.wrv-form select:focus-visible,
.wrv-form textarea:focus-visible { outline: 2px solid var(--color-gold, #C8A44A); outline-offset: 2px; }
.wrv-form input[type="date"]::-webkit-calendar-picker-indicator,
.wrv-form input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0.9; cursor: pointer; }

.wrv-desc {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted, #B7C2D1) !important;
}

/* Checkbox- und Radiogruppen */
fieldset.wrv-field--group { border: 0; padding: 0; }
fieldset.wrv-field--group > legend { padding: 0; margin-bottom: var(--space-2, 0.5rem); float: left; width: 100%; }
fieldset.wrv-field--group > legend + * { clear: both; }
.wrv-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2, 0.5rem) var(--space-4, 1rem); }
.wrv-options--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wrv-option,
.wrv-field--check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
}
.wrv-field--check { flex-direction: row; flex-wrap: wrap; }
.wrv-option label,
.wrv-field--check label {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 1px;
  font-size: var(--text-sm, 0.9375rem);
  line-height: 1.45;
  color: var(--color-text, #F0EEE4);
  cursor: pointer;
  overflow-wrap: break-word;
}
/* Lange Einzelwörter (z. B. „Schülermannschaft") in schmalen Spalten trennen. */
.wrv-options--cols-4 .wrv-option label { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.wrv-field--check .wrv-error { flex-basis: 100%; padding-left: calc(20px + 0.65rem); }
.wrv-form input[type="checkbox"],
.wrv-form input[type="radio"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--color-accent, #B23A3A);
  cursor: pointer;
}
.wrv-options .wrv-option {
  padding: 0.55rem 0.7rem;
  background: var(--wrv-f-field-bg);
  border: 1px solid var(--color-border, #2C4A70);
  border-radius: var(--radius-sm, 2px);
}
.wrv-options .wrv-option:has(input:checked) { border-color: var(--wrv-f-field-border); background: #142B47; }
.wrv-form-wrap a:not(.btn),
.prose .wrv-form-wrap a:not(.btn) {
  color: var(--wrv-f-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-bottom: 0;
}
.wrv-form-wrap a:not(.btn):hover { color: var(--color-text, #F0EEE4); }

.wrv-form-info {
  margin: 0 0 var(--space-4, 1rem) !important;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-left: 3px solid var(--color-primary, #4F7BAB);
  background: rgba(14, 29, 49, 0.55);
  font-size: var(--text-sm, 0.9375rem);
  line-height: 1.5;
  color: var(--color-text-muted, #B7C2D1) !important;
}
.wrv-form-section .wrv-field--check + .wrv-field--check { margin-top: var(--space-4, 1rem); }

/* Fehler */
.wrv-error {
  margin: 0 !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wrv-f-error) !important;
}
.wrv-error::before { content: "! "; font-weight: 700; }
.wrv-field.has-error input:not([type="checkbox"]):not([type="radio"]),
.wrv-field.has-error select,
.wrv-field.has-error textarea { border-color: #E57373; border-width: 2px; padding: calc(0.7rem - 1px) calc(0.85rem - 1px); }
.wrv-field.has-error select { padding-right: 2.5rem; }
.wrv-field.has-error input[type="checkbox"],
.wrv-field.has-error input[type="radio"] { outline: 2px solid #E57373; outline-offset: 1px; }

.wrv-form-errors,
.wrv-form-success {
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  border-radius: var(--radius-md, 4px);
  scroll-margin-top: 110px;
}
.wrv-form-errors {
  background: rgba(178, 58, 58, 0.16);
  border: 1px solid #E57373;
  border-left-width: 4px;
}
.wrv-form-errors:focus,
.wrv-form-success:focus { outline: 2px solid var(--color-gold, #C8A44A); outline-offset: 3px; }
.wrv-form-errors__title { margin: 0 0 var(--space-2, 0.5rem) !important; font-weight: 600; color: var(--color-text, #F0EEE4) !important; }
.wrv-form-errors ul { margin: 0 0 0 1.2em !important; padding: 0; color: var(--wrv-f-error) !important; }
.wrv-form-errors li { margin: 0 0 var(--space-1, 0.25rem); font-size: var(--text-sm, 0.9375rem); }
.wrv-form-errors a,
.prose .wrv-form-errors a:not(.btn) { color: var(--wrv-f-error); }

.wrv-form-success {
  background: var(--color-surface, #1E3A5F);
  border: 1px solid var(--color-border, #2C4A70);
  border-left: 4px solid var(--color-gold, #C8A44A);
}
.wrv-form-success p { margin: 0 0 var(--space-3, 0.75rem) !important; color: var(--color-text, #F0EEE4) !important; }
.wrv-form-success p:last-child { margin-bottom: 0 !important; }
.wrv-form-success__title {
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  font-weight: 700;
  font-size: var(--text-lg, 1.25rem);
}
.wrv-form-success .btn-ghost,
.prose .wrv-form-success .btn-ghost { color: var(--color-text, #F0EEE4); text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.45); }
.wrv-form-success .btn-ghost:hover { border-color: #fff; }

/* Absenden */
.wrv-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-4, 1rem); align-items: center; }
.wrv-form-submit { cursor: pointer; justify-content: center; min-height: 48px; }
.wrv-form-submit[disabled] { opacity: 0.7; cursor: progress; transform: none; }

/* Honeypot: für Menschen unsichtbar, für Screenreader ausgeblendet */
.wrv-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Tablet */
@media (max-width: 900px) {
  .wrv-field--third,
  .wrv-field--twothirds { grid-column: span 3; }
  .wrv-options--cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobil: einspaltig */
@media (max-width: 640px) {
  .wrv-form-section { padding: var(--space-5, 1.25rem) var(--space-4, 1rem); }
  .wrv-form-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4, 1rem); }
  .wrv-field,
  .wrv-field--half,
  .wrv-field--third,
  .wrv-field--twothirds { grid-column: 1 / -1; }
  .wrv-options,
  .wrv-options--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2, 0.5rem); }
  .wrv-options .wrv-option { padding: 0.55rem 0.5rem; gap: 0.5rem; }
  .wrv-form-legend { font-size: 1.125rem; }
  .wrv-form-submit { width: 100%; }
}
@media (max-width: 360px) {
  .wrv-options,
  .wrv-options--cols-4 { grid-template-columns: minmax(0, 1fr); }
}