/* ==========================================================================
   Vergissmeinnicht – Barrierefreiheit (WCAG 2.2 AA + ausgew. AAA, COGA)
   ========================================================================== */

/* --- Sichtbarer Fokus (2.4.7 / 2.4.13) --- */
:focus-visible {
  outline: 3px solid var(--vm-primary-deep);
  outline-offset: 3px;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--vm-primary-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Bewegung reduzieren (2.3.3) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Touch-/Klickziele ≥ 44px (2.5.8) --- */
button, input[type="submit"], input[type="button"],
.wp-element-button, .ast-button, .elementor-button,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="search"],
select, textarea {
  min-height: var(--vm-target);
}

/* --- Kein Blocksatz (1.4.8) --- */
p, li { text-align: left; }

/* --- Skip-Link --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vm-primary-deep);
  color: #fff;
  padding: .75rem 1rem;
  z-index: 100000;
  border-radius: 0 0 var(--vm-radius) 0;
}
.skip-link:focus { left: 0; }

/* --- Formulare: sichtbare Labels, weiche Ränder --- */
label { font-weight: 600; display: inline-block; margin-bottom: .25rem; }
input, select, textarea {
  border: 2px solid var(--vm-border);
  border-radius: 8px;
  padding: .6rem .75rem;
  background: #fff;
  color: var(--vm-ink);
  font-size: var(--vm-fs-base);
}
input::placeholder, textarea::placeholder { color: var(--vm-ink-muted); opacity: 1; }

/* Pflichtfeld-Markierung */
.vm-required, .required { color: var(--vm-error); }

/* --- Fehler/Erfolg: nie Farbe allein → Icon + Text --- */
.vm-error, .elementor-message-danger { color: var(--vm-error); }
.vm-error::before, .elementor-message-danger::before { content: "\26A0"; margin-right: .4rem; }
.vm-success, .elementor-message-success { color: var(--vm-success); }
.vm-success::before, .elementor-message-success::before { content: "\2713"; margin-right: .4rem; }

/* Bilder responsiv */
img { max-width: 100%; height: auto; }