/* ===========================================================================
   se_form — Frontend (graal-Token-konform, WCAG 2.2 AA)
   Klassen-Präfix »gf-«. Nutzt ausschließlich Theme-Token aus graal.css :root.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Token-Brücke: Dieses Stylesheet wurde gegen ein generisches Token-Vokabular
   (--gm-ocean, --color-*, --space-*, --r-*, --font-body) geschrieben. Das
   gm-Theme (tokens.css) benennt seine Tokens jedoch anders (--gm-primary,
   --gm-text, --gm-border, --gm-radius, --gm-font-body …) und kennt gar keine
   --space-*-Skala. Ohne diese Brücke fallen fast alle Properties aus: der
   Submit-Hintergrund wird transparent (weiße Schrift → unsichtbar) und sämtliche
   Abstände/Spalten kollabieren. Die hier definierten Namen existieren im
   gm-Theme nicht → keine Kollision; die Literale sind Fallback für Fremd-Themes.
   --gm-sun / --gm-sun-light liefert bereits das gm-Theme. */
:root {
  --gm-ocean:        var(--gm-primary, #323E52);
  --font-body:       var(--gm-font-body, 'Inter', system-ui, sans-serif);
  --color-text:      var(--gm-text, #45505f);
  --color-muted:     #6c757d;
  --color-border:    var(--gm-border, #dee2e6);
  --color-primary:   var(--gm-primary, #323E52);
  --color-surface:   var(--gm-white, #fff);
  --color-danger:    var(--gm-danger, #d12020);
  --color-danger-bg: #fdecea;
  --color-ok:        var(--gm-green-dark, #34624D);
  --color-ok-bg:     #e8f4ee;
  --r-input:         var(--gm-radius, .25rem);
  --r-button:        var(--gm-radius, .25rem);
  --r-md:            var(--gm-radius, .25rem);
  --space-3xs: .25rem;
  --space-2xs: .375rem;
  --space-xs:  .5rem;
  --space-sm:  .75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
}

.gf {
  font-family: var(--font-body);
  color: var(--color-text);
  max-width: 760px;
  margin-inline: auto;   /* zentriert im Container (gleicher Abstand links/rechts) */
}

/* ── Grid / Spalten ── */
.gf-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.gf-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.gf-field--full { flex: 1 1 100%; }
.gf-field--half { flex: 1 1 calc(50% - (var(--space-md) / 2)); min-width: 0; }
.gf-field--third { flex: 1 1 calc(33.333% - (var(--space-md) * 2 / 3)); min-width: 0; }
.gf-field--twothirds { flex: 2 1 calc(66.667% - (var(--space-md) * 2 / 3)); min-width: 0; }
@media (max-width: 575.98px) {
  .gf-field--half, .gf-field--third, .gf-field--twothirds { flex: 1 1 100%; }
}

/* ── Labels ── */
.gf-label {
  font-weight: 600;
  font-size: 0.95rem;
}
.gf-req { color: var(--color-danger); }
.gf-sub {
  font-size: 0.825rem;
  color: var(--color-muted);
}

/* ── Eingabefelder ── */
.gf-input {
  width: 100%;
  min-height: 2.75rem;          /* 44px: einheitliche Feldhöhe — <select> ignoriert die geerbte line-height, war sonst 40px */
  padding: var(--space-xs) var(--space-sm);
  font: inherit;
  font-size: max(1rem, 16px);   /* ≥16px: verhindert das iOS-Auto-Zoom beim Fokus */
  color: var(--color-text);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--r-input);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gf-input:hover { border-color: var(--gm-ocean); }
.gf-input:focus-visible {
  outline: none;
  border-color: var(--gm-ocean);
  /* Doppelring: heller Innenring + Ocean-Außenring (≥3:1 auf Weiß, WCAG 1.4.11/2.4.11), klar vom Hover getrennt */
  box-shadow: 0 0 0 2px var(--gm-sun-light), 0 0 0 4px var(--gm-ocean);
}
textarea.gf-input { resize: vertical; min-height: 7rem; }

/* ── Auswahl (radio / checkbox) ── */
.gf-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);   /* row-gap ≥ .75rem: hält Zielabstand bei einspaltiger Mobilanordnung */
  padding-top: var(--space-3xs);
}
.gf-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
}
.gf-choice input {
  width: 1.5rem;              /* 24px — Zielgröße WCAG 2.5.8 / CLAUDE-Regel (vorher 18,4px) */
  height: 1.5rem;
  margin-top: 0.1rem;
  accent-color: var(--gm-ocean);
  flex: 0 0 auto;
}
.gf-choice input:focus-visible {   /* Fokus einheitlich zum Input-Doppelring */
  outline: 2px solid var(--gm-ocean);
  outline-offset: 2px;
}
.gf-choice label { cursor: pointer; }
.gf-consent { align-items: flex-start; }
.gf-consent label { font-size: 0.9rem; }
.gf-choice a { color: var(--color-primary); }

/* ── Statische Elemente ── */
.gf-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xs) 0;
}
.gf-section-label {
  text-align: center;
  color: var(--color-muted);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}
.gf-privacy {
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.5;
}
.gf-privacy a { color: var(--color-primary); }

/* ── Aktionen / Submit ── */
.gf-actions {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: flex-start;
}
.gf-submit {
  font: inherit;
  font-weight: 700;
  color: var(--color-surface, #fff);
  background: var(--gm-ocean);
  border: 1px solid var(--gm-ocean);
  border-radius: var(--r-button);
  padding: var(--space-sm) var(--space-xl);
  min-height: 44px;            /* Touch-Target (WCAG 2.5.8) */
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
/* Hover dunkelt ab (palettengebunden, wie alle Site-Buttons) statt aufzuhellen */
.gf-submit:hover { background: var(--gm-primary-hover, #232c3b); border-color: var(--gm-primary-hover, #232c3b); }
.gf-submit[aria-busy="true"] { opacity: .7; cursor: progress; }
.gf-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gm-sun);
}

/* ── Fehler / Erfolg ── */
/* Fehler-Prominenz: zweiter Kanal (verdickte Kontur via inset-Shadow + zarter Fehler-Hintergrund), nicht nur Border-Farbe */
.gf-field--error .gf-input {
  border-color: var(--color-danger);
  box-shadow: inset 0 0 0 1px var(--color-danger);
  background: var(--color-danger-bg);
}
/* Fehler erreicht auch Radio/Checkbox/Consent (die kein .gf-input rendern) */
.gf-field--error .gf-choices,
.gf-field--error .gf-consent {
  padding-left: var(--space-sm);
  border-left: 3px solid var(--color-danger);
}
.gf-err {
  font-size: 0.825rem;
  color: var(--color-danger);
}
.gf-alert {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-radius: var(--r-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}
.gf-success {
  background: var(--color-ok-bg);
  color: var(--color-ok);
  border-radius: var(--r-md);
  padding: var(--space-md) var(--space-lg);
}
.gf-missing { color: var(--color-muted); }
/* Geschlossenes Formular (Frist abgelaufen / Kontingent erreicht) — neutrale Hinweis-Box */
.gf-closed {
  background: var(--gm-cream, #F5F1E9);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--space-md) var(--space-lg);
  font-weight: 600;
  max-width: 760px;
  margin-inline: auto;
}

/* ── Honeypot — visuell entfernt, aber im DOM (Bot-Falle) ── */
.gf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Skala (1–5): nummerierte Radios als anklickbare Kacheln ── */
.gf-scale { gap: var(--space-2xs); }
.gf-scale .gf-scale-step { position: relative; }
.gf-scale .gf-scale-step input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.gf-scale .gf-scale-step label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;   /* Zielgröße ≥ 24 px (WCAG 2.5.8) mit Reserve */
  min-height: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--r-input);
  background: var(--color-surface, #fff);
  cursor: pointer;
}
.gf-scale .gf-scale-step input:hover + label { border-color: var(--gm-ocean); }
.gf-scale .gf-scale-step input:checked + label {
  background: var(--gm-ocean);
  border-color: var(--gm-ocean);
  color: #fff;
  font-weight: 600;
}
.gf-scale .gf-scale-step input:focus-visible + label {
  outline: 2px solid var(--gm-ocean);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--gm-sun-light);
}
.gf-scale-ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.85em;
  color: var(--color-muted);
  margin-top: var(--space-3xs);
}

/* ── Datei-Upload ── */
.gf-file { padding: var(--space-xs) var(--space-sm); }
.gf-file::file-selector-button {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--r-input);
  padding: var(--space-3xs) var(--space-sm);
  margin-right: var(--space-sm);
  cursor: pointer;
}
.gf-file::file-selector-button:hover { border-color: var(--gm-ocean); }

/* ═══ Goldstandard-Ergänzungen (15.07.2026) ═══ */

/* Native <fieldset>/<legend> für Radio/Checkbox/Skala: Browser-Chrome zurücksetzen,
   Flex-Grid nicht brechen (min-width:0 gegen fieldset-Default min-content). */
fieldset.gf-field { border: 0; margin: 0; padding: 0; min-width: 0; }
legend.gf-label   { padding: 0; }

/* Abschnitts-Gruppierung langer Formulare: <fieldset class="gf-section"><legend class="gf-legend"> */
fieldset.gf-section { border: 0; margin: 0 0 var(--space-lg); padding: 0; min-width: 0; }
fieldset.gf-section + fieldset.gf-section { margin-top: var(--space-sm); }
.gf-legend {
  width: 100%;
  margin: 0 0 var(--space-sm);
  padding: 0 0 var(--space-3xs);
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gm-heading, #323E52);
}

/* WCAG 1.4.1 »Use of Color«: Links in Consent/Datenschutz/HTML nicht nur farblich */
.gf-choice a,
.gf-consent label a,
.gf-privacy a,
.gf-html a { text-decoration: underline; }

/* Pflichtfeld-Legende + Fehler-Zusammenfassung (mit Sprunglinks) */
.gf-reqkey    { font-size: .825rem; color: var(--color-muted); margin: 0 0 var(--space-md); }
.gf-alert-list { margin: var(--space-2xs) 0 0; padding-left: 1.25rem; }
.gf-alert-list a { color: var(--color-danger); }
#gf-errsum:focus-visible { outline: 2px solid var(--color-danger); outline-offset: 3px; }

/* Skala: Token statt hartem #fff (Token-Disziplin) */
.gf-scale .gf-scale-step input:checked + label { color: var(--color-surface, #fff); }

@media (max-width: 575.98px) {
  .gf-actions { justify-content: stretch; }
  .gf-submit  { width: 100%; }   /* volle Daumenreichweite auf Mobil */
}