/* ===== UX-Layer (WCAG 2.2 + 3 Vorschau, wissenschaftliche Patterns) ===== */
/* Fitts: Targets >= 44px. Doherty: schnelles Feedback. Miller: 7+/-2. Gestalt-Naehe via Spacing. */

:root {
  --ux-tap-min: 44px;
  --ux-radius-card: 0.625rem;
  --ux-shadow-sm: 0 1px 2px rgba(15, 44, 69, 0.06), 0 1px 1px rgba(15, 44, 69, 0.04);
  --ux-shadow-md: 0 4px 12px rgba(15, 44, 69, 0.08), 0 1px 3px rgba(15, 44, 69, 0.06);
  --ux-shadow-focus: 0 0 0 4px color-mix(in srgb, var(--color-primary, #21588F) 28%, transparent);
  --ux-transition: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --ux-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ux-touch-pad: 0.625rem 0.875rem;
  --ux-text-max: 70ch;
  --ux-focus-color: #1A4773;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ux-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55), 0 1px 1px rgba(0, 0, 0, 0.4);
    --ux-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
    --ux-shadow-focus: 0 0 0 4px color-mix(in srgb, var(--color-primary, #4a7ba7) 38%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Skip-Link (WCAG 2.4.1) */
.skip-link { position: absolute; left: -9999px; top: 0; padding: 0.625rem 1rem; background: var(--color-bg-primary, #fff); color: var(--color-primary, #21588F); border: 2px solid var(--color-primary, #21588F); border-radius: 4px; z-index: 9999; font-weight: 700; }
.skip-link:focus, .skip-link:focus-visible { left: 0.5rem; top: 0.5rem; outline: 3px solid var(--ux-focus-color, #1A4773); outline-offset: 2px; }

/* Focus-Visible global (WCAG 2.4.11) */
:focus-visible { outline: 3px solid var(--ux-focus-color, #1A4773); outline-offset: 2px; border-radius: 3px; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible { box-shadow: var(--ux-shadow-focus); outline-offset: 3px; }

/* Tap-Target-Mindestmass (WCAG 2.5.8 / 2.5.5 AAA) */
button, .btn, .nav-link, [role="button"] { min-height: var(--ux-tap-min); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: var(--ux-touch-pad); }
input[type="text"], input[type="email"], input[type="search"], textarea, select { min-height: var(--ux-tap-min); padding: 0.625rem 0.75rem; }

/* Form-Hierarchie + Validierung */
.form-group { display: grid; gap: 0.375rem; margin-bottom: 1rem; }
.form-group label { font-weight: 600; color: var(--color-text-primary, #111); }
.form-group .hint { font-size: 0.875rem; color: var(--color-text-secondary, #666); }
.form-group .err { font-size: 0.875rem; color: var(--color-error, #dc3545); font-weight: 600; }
input:invalid:not(:placeholder-shown) { border-color: var(--color-error, #dc3545); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error, #dc3545) 18%, transparent); }
input:user-valid { border-color: var(--color-success, #28a745); }
.required-asterisk { color: var(--color-error, #dc3545); margin-left: 0.125rem; }

/* Status-Messages (WCAG 4.1.3) */
[role="status"], [role="alert"] { padding: 0.625rem 0.875rem; border-radius: var(--ux-radius-card); margin: 0.75rem 0; font-weight: 500; }
[role="status"]:empty, [role="alert"]:empty { display: none; }
[role="status"] { background: var(--color-info-bg, #d1ecf1); color: var(--color-info-text, #0c5460); border-left: 4px solid var(--color-info, #17a2b8); }
[role="alert"] { background: var(--color-error-bg, #f8d7da); color: var(--color-error-text, #721c24); border-left: 4px solid var(--color-error, #dc3545); }

/* Reflow 320px (WCAG 1.4.10) */
img, svg, video { max-width: 100%; height: auto; }

/* Lesbarkeit Text-Spalten */
p, .lead, .prose { max-width: var(--ux-text-max); }

/* Loading-State */
[aria-busy="true"] { cursor: progress; opacity: 0.7; pointer-events: none; }
.spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ux-spin 0.7s linear infinite; }
@keyframes ux-spin { to { transform: rotate(360deg); } }

/* Visually-hidden Helper (WCAG 1.3.1) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }