/* ---------------------------------------------------------
   custom-properties.css
   Zentrale Design-Tokens + Barrierefreiheits-Basisschicht
   fuer redesign.flex-cap.de (Amerce-Template-Umbau, TSK-0556)

   Wird auf allen Seiten NACH styles.css eingebunden, damit die
   hier gesetzten Regeln (u.a. Fokus-Stile, Skip-Link, reduzierte
   Bewegung, Touch-Ziele) Vorrang vor den Template-Defaults haben,
   ohne styles.css selbst grossflaechig anfassen zu muessen.

   Enthaelt bewusst KEINE Text-/Bild-/Struktur-Aenderungen, nur
   Code-/Darstellungsqualitaet (Farben nur dort leicht nachgeschaerft,
   wo es um WCAG-Kontrast geht).
 ------------------------------------------------------------------------------ */

:root {
  /* ---- Abstands-Skala (ergaenzt die bereits vorhandenen Farb-Tokens
     aus styles.css, die dort bewusst unangetastet bleiben) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Typografie-Skala (Referenz auf bereits genutzte fs-Werte,
     als Custom Properties fuer neue/gepflegte Komponenten) ---- */
  --fs-100: 10px;
  --fs-200: 12px;
  --fs-300: 14px;
  --fs-400: 16px;
  --fs-500: 18px;
  --fs-600: 20px;
  --fs-700: 24px;
  --fs-800: 28px;
  --fs-900: 32px;

  /* ---- Radius / Transition-Tokens ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;

  /* ---- Barrierefreiheit: Fokus- und Touch-Ziel-Tokens ---- */
  --focus-ring-color: #1857CC;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --touch-target-min: 44px;

  /* ---- WCAG-nachgeschaerfte Textfarben (ersetzen ausschliesslich
     zu kontrastarme Werte aus dem urspruenglichen :root in styles.css;
     Markenfarben bleiben optisch nahezu identisch) ---- */
  --text-3-aa: #6b6b70;
  --success-aa: #2f8a1d;
}

/* =================================================================
   SKIP LINK
   ================================================================= */
.skip-link {
  position: absolute;
  top: -48px;
  left: 8px;
  z-index: 10000;
  background: var(--bg-3, #2C2762);
  color: #ffffff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 8px;
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* =================================================================
   FOKUS-STILE
   Das Template entfernt an keiner Stelle explizit den Outline, aber
   es setzt auch nirgendwo einen konsistenten, gut sichtbaren Fokus-
   Stil. Wir definieren hier einen einheitlichen, deutlich sichtbaren
   :focus-visible-Ring fuer alle interaktiven Elemente.
   ================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.nav-icon-item:focus-visible,
.btn-open-menu:focus-visible,
#goTop:focus-visible,
.icon-close-popup:focus-visible,
.toggle-pass:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
  outline-offset: var(--focus-ring-offset) !important;
  border-radius: var(--radius-sm);
}

/* Bei Maus-/Touch-Bedienung keinen Fokusring erzwingen, aber bei
   Tastaturbedienung (focus-visible) immer sichtbar -- kein Entfernen
   von Fokus-Stilen, nur kein doppelter Ring wo bereits eine eigene
   Hover/Active-Optik existiert. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* =================================================================
   PREFERS-REDUCED-MOTION
   Deckt sowohl den generischen Fall ab (Transitions/Animationen
   ueber alle Elemente) als auch die WOW.js-Eigenheit: WOW.js setzt
   vor dem Einblenden ein Inline-style="visibility: hidden" auf jedes
   .wow-Element und entfernt es erst beim Scrollen ins Blickfeld. Ein
   normales (nicht-!important) CSS-Statement kann ein Inline-Style
   nicht ueberschreiben -- hier bewusst !important, um Inhalte fuer
   Reduced-Motion-Nutzer sofort sichtbar zu machen, statt dauerhaft
   auf "hidden" stehen zu bleiben.
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .wow,
  [class*="animate__"] {
    visibility: visible !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =================================================================
   TOUCH-ZIELE
   Icon-only interaktive Elemente (Header-Icons, Menue-Toggle,
   Nach-oben-Button, Schliessen-Buttons, Passwort-Sichtbar-Umschalter,
   Mengen-/Paginierungs-Buttons) auf die von WCAG 2.5.8 empfohlene
   Mindestgroesse von 44x44px anheben, ohne die bestehende Optik
   (Icon-Groesse, Abstaende im Layout) zu veraendern -- ueber
   min-width/min-height auf der bereits vorhandenen Flex-Box.
   ================================================================= */
#goTop,
.btn-open-menu,
.nav-icon-item,
.icon-close-popup,
.toggle-pass,
.btn-quantity,
.pag-item {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =================================================================
   KONTRAST-NACHSCHAERFUNG
   cl-text-3 (Footer-/Meta-Text, Preise durchgestrichen etc.) nutzt
   im Original #B1B2B7 -- auf weissem/hellem Grund faellt das unter
   2,2:1 Kontrast (WCAG-Minimum fuer Fliesstext: 4,5:1). Wir heben
   die Textfarbe an, ABER NUR auf hellem Grund: auf dunklem Grund
   (Footer, sonstige .bg-dark-Bereiche) hat der Original-Farbton auf
   Schwarz bereits ca. 9,9:1 Kontrast -- eine pauschale Aufhellung
   wuerde dort das Gegenteil bewirken (auf ca. 4,0:1 absinken).
   Deshalb gezielt scope-begrenzt statt global auf .cl-text-3.
   ================================================================= */
.cl-text-3 {
  color: var(--text-3-aa) !important;
}
.tf-footer .cl-text-3,
.bg-dark .cl-text-3,
.type-white .cl-text-3 {
  color: var(--text-3) !important;
}

/* Kleine Erfolgs-Icons (Checkmark-Badges, Bewertungs-Verifiziert-Icon)
   nutzen var(--success) auf 12px-Glyphen -- Original faellt mit 2,98:1
   unter das WCAG-Minimum fuer kleinen Text/Icons. Nur die konkreten,
   betroffenen Selektoren werden nachgeschaerft, die Fortschrittsbalken-
   Fuellung (grossflaechige Nicht-Text-Flaeche, unkritisch) bleibt beim
   Original-Gruenton. */
.popup-shopping-cart .cart-threshold .tf-progress-ship .value:before,
.testimonial-v01 .tes_author .author-verified .icon,
.notification-progress .round::after {
  color: var(--success-aa) !important;
}