/* =============================================================================
   improvements.css — Druckerei Mende
   Gezielte Kontrast-, Lesbarkeits- und Barrierefreiheits-Korrekturen

   ZWECK: Dieses File ist ein reines ADDON zu main.css.
          Kein Redesign, keine Strukturänderungen — ausschließlich minimale,
          WCAG-2.1-AA-orientierte Korrekturen an Kontrast, Schriftgröße,
          Fokus-Sichtbarkeit und mobilen Touch-Targets.

   EINBINDUNG: <link rel="stylesheet" href="css/improvements.css">
               → Muss NACH main.css eingebunden werden.

   Erstellt:  2026-05-22
   Basis:     Audit main.css (3529 Zeilen) + admin.css (708 Zeilen)
   Standard:  WCAG 2.1 Level AA
   ============================================================================= */


/* =============================================================================
   1. CSS-TOKEN-KORREKTUREN
   Überschreibt Token-Werte aus :root in main.css durch verbesserte Werte.
   ============================================================================= */
:root {

  /* FIX ▸ --text-secondary-color
     Problem:  #5d5c5c auf #241f1f Hintergrund → Kontrast ≈ 2.5:1 (WCAG-FAIL)
     Ursache:  Zu dunkles Grau auf sehr dunklem Hintergrund.
     Lösung:   Warmer Grauton #9a9690 → Kontrast ≈ 5.5:1 (WCAG-AA ✓)
     Wirkung:  Alle Elemente, die var(--text-secondary-color) nutzen, werden
               automatisch verbessert (z. B. Meta-Texte, Hilfstexte, Labels). */
  --text-secondary-color: #9a9690;

  /* FIX ▸ --focus-ring
     Problem:  rgba(226, 220, 200, 0.35) — Deckkraft 35% → bei hellem Umgebungslicht
               kaum sichtbar; WCAG SC 2.4.7 verlangt klar erkennbaren Fokusindikator.
     Lösung:   Deckkraft auf 70% erhöht. Farbe und Radius unverändert. */
  --focus-ring: 0 0 0 3px rgba(226, 220, 200, 0.70);
}


/* =============================================================================
   2. GLOBALE FORM-PLACEHOLDER
   ============================================================================= */

/* FIX ▸ Placeholder-Deckkraft generell zu niedrig
   Problem:  Viele Felder haben opacity ~0.42–0.45 → grenzwertig lesbar.
   Lösung:   Einheitlich auf 0.65 angehoben. Kein visueller Kontrast-Verlust,
             da der dunkle Feldhintergrund (rgba(51,51,51,0.92)) beibehalten wird.
   Hinweis:  Placeholder ist kein Ersatz für <label> — diese Korrektur verbessert
             nur die Lesbarkeit des Hinweistexts. */
input::placeholder,
textarea::placeholder {
  opacity: 0.65;
}


/* =============================================================================
   3. KARTEN-SUCHE
   ============================================================================= */

/* FIX ▸ .karten-search-hint — Doppel-Failure
   Problem A: font-size: 11px → unter WCAG-Mindestgröße für lesbaren Hilfstext.
   Problem B: opacity: 0.5 → auf dunklem Hintergrund nur ~1.8:1 effektiver Kontrast.
   Lösung:   Schriftgröße auf 13px (0.8125rem), Deckkraft auf 0.78 erhöht.
             Design-Tonalität (dezenter Hilfstext) bleibt erhalten. */
.karten-search-hint {
  font-size: 0.8125rem; /* 13px */
  opacity:   0.78;
}

/* FIX ▸ .ks-clear (Clear-Button Suchfeld)
   Problem:  opacity: 0.4 → Button kaum als klickbares Element erkennbar.
   Lösung:   Ruhezustand auf 0.62 angehoben; Hover bleibt über main.css erhalten. */
.karten-search-wrap .ks-clear {
  opacity: 0.62;
}

/* FIX ▸ Placeholder im Karten-Suchfeld (spezifische Überschreibung)
   main.css setzt hier explizit opacity: 0.45 — dieser Block überschreibt gezielt. */
.karten-search-wrap input::placeholder {
  opacity: 0.65;
}


/* =============================================================================
   4. WARENKORB / WUNSCHLISTE
   ============================================================================= */

/* FIX ▸ .cart-empty (Leertext Wunschliste)
   Problem:  rgba(228, 223, 207, 0.50) auf dunklem Hintergrund ≈ 2.8:1 (WCAG-FAIL).
   Lösung:   Deckkraft auf 0.82 → ≈ 4.6:1 (WCAG-AA ✓).
             Visuelle Dezenz bleibt erhalten (nicht voller Primärfarbe). */
.cart-empty {
  color: rgba(228, 223, 207, 0.82);
}


/* =============================================================================
   5. PRODUKT-BESCHREIBUNGEN
   ============================================================================= */

/* FIX ▸ .product-item__desc
   Problem:  rgba(228, 223, 207, 0.70) → ≈ 3.9:1 — Grenzfall, fällt bei
             dunklerem Bildschirm oder suboptimaler Kalibrierung unter 4.5:1.
   Lösung:   0.70 → 0.86 → sicherer WCAG-AA-Pass (≈ 4.8:1). */
.product-item__desc {
  color: rgba(228, 223, 207, 0.86);
}


/* =============================================================================
   6. TYPOGRAFIE-KORREKTUREN
   ============================================================================= */

/* FIX ▸ .media-block__text h2 — CSS-Tippfehler font-weight
   Problem:  main.css enthält `font-weight: b` — kein gültiger CSS-Wert.
             Browser ignorieren die Deklaration → Rendering als font-weight: normal (400).
             Visuell wirkt die Überschrift zu leicht.
   Lösung:   Explizit bold (700) gesetzt. Schriftbild und Layout unverändert. */
.media-block__text h2 {
  font-weight: 700;
}

/* FIX ▸ .modal-content h3 — unpräzises CSS-Keyword
   Problem:  `font-size: large` ist ein Browser-Keyword ohne feste px-Entsprechung.
             Rendering variiert je nach Browser und User-Stylesheet (ca. 18–20px).
   Lösung:   Explizit 1.25rem (≈ 20px) — entspricht dem häufigsten Browser-Rendering
             von `large` und fügt sich in die bestehende Größenhierarchie ein. */
.modal-content h3 {
  font-size: 1.25rem;
}


/* =============================================================================
   7. FOKUS-STATES
   Ergänzende Fokus-Sichtbarkeit für interaktive Elemente ohne eigenes
   :focus-visible in main.css.
   WCAG SC 2.4.7 (AA): Fokus für Tastaturbedienung muss sichtbar sein.
   WCAG SC 2.4.11 (AA, WCAG 2.2): Fokus darf nicht vollständig verdeckt werden.
   ============================================================================= */

/* Links — Basis-Fokusring ergänzt */
a:focus-visible {
  outline:        var(--focus-outline);   /* 2px solid #f8e7b4 aus main.css */
  outline-offset: 3px;
  border-radius:  2px;
}

/* Navigations-Buttons (Pfeile, Sections) */
.nav-btn:focus-visible,
.karten-filter-btn:focus-visible,
[data-section]:focus-visible {
  outline:        var(--focus-outline);
  outline-offset: 3px;
}

/* Cookie-Banner Close-Button */
.cb-close:focus-visible {
  outline:        2px solid #888;
  outline-offset: 3px;
  border-radius:  4px;
}


/* =============================================================================
   8. MOBILE TOUCH-TARGETS
   WCAG SC 2.5.5 (AAA): 44×44 CSS-px empfohlen.
   WCAG SC 2.5.8 (AA, WCAG 2.2): Minimum 24×24 CSS-px.
   Nur auf mobilen Viewports aktiv — Desktop-Layout unverändert.
   ============================================================================= */

@media (max-width: 768px) {

  /* FIX ▸ Kleine Aktions-Buttons auf Touch-Geräten minimal auf 44×44px vergrößert.
     Padding-basiert um das umgebende Layout nicht zu verschieben. */
  .karten-wishlist-btn,
  .cart-remove-btn,
  .ks-clear {
    min-width:      44px;
    min-height:     44px;
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
  }
}


/* =============================================================================
   9. REDUCED-MOTION — SICHERHEITSNETZ
   main.css implementiert prefers-reduced-motion bereits für GSAP-Animationen.
   Dieser Block ergänzt reine CSS-Transitions, die noch nicht abgedeckt sind.
   WCAG SC 2.3.3 (AAA) / Best Practice für Vestibularsensitivität.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .karten-card,
  .karten-card *,
  .product-item,
  .product-item * {
    transition: none !important;
    animation:  none !important;
    transform:  none !important;
  }
}


/* =============================================================================
   10. FAQ-FRAGEN KONTRAST
   ============================================================================= */

/* FIX ▸ .faq-question — Kontrast-Failure (kritisch)
   Problem:  var(--primary-color) = #c00505 auf Modal-Hintergrund #2a2929
             → gemessenes Kontrastverhältnis: ~1.98:1 (WCAG-FAIL, Minimum 4.5:1)
   Ursache:  Dunkles Rot auf fast-schwarzem Hintergrund.
   Lösung:   Helles Rosé-Rot #f07070 → Kontrast ~4.53:1 (WCAG-AA ✓)
             Bleibt im Rot-Ton des Markendesigns, wirkt deutlich lesbarer.
   Wirkung:  Alle h3.faq-question im FAQ-Modal werden automatisch verbessert. */
.faq-question {
  color: #f07070;
}


/* =============================================================================
   11. KARTEN-SUCHE — FOKUS-INDIKATOR ERGÄNZEN
   ============================================================================= */

/* FIX ▸ .karten-search-wrap input — outline:none unterdrückt Fokusring
   Problem:  main.css enthält `outline: none` für dieses Input → Tastaturnutzer
             sehen keinen Fokus-Indikator. Verletzt WCAG SC 2.4.7 (Minimum AA).
   Lösung:   :focus-visible ergänzt sichtbaren Ring (überschreibt outline:none).
             :focus-visible greift nur bei Tastatur-/Keyboard-Navigation —
             Maus-Klick bleibt unverändert (kein visueller Rückschritt). */
.karten-search-wrap input:focus-visible {
  outline:        var(--focus-outline);   /* 2px solid #f8e7b4 */
  outline-offset: 2px;
}


/* =============================================================================
   12. KONTAKTFORMULAR — FOKUS-INDIKATOR STÄRKEN
   ============================================================================= */

/* FIX ▸ Kontaktformular-Felder — outline:0 entfernt nativen Fokusring
   Problem:  main.css setzt `outline: 0` auf alle :focus-Zustände. Die dort
             ergänzte box-shadow (0 0 0 3px rgba(192,5,5,0.15)) ist bei
             Windows High-Contrast-Mode und einigen Systemthemen unsichtbar,
             da box-shadow in HCM häufig ignoriert wird.
             Verletzt WCAG SC 2.4.7 (AA) und SC 2.4.11 (WCAG 2.2 AA).
   Lösung:   Zusätzlicher outline-Ring via :focus-visible — er überlagert outline:0
             wegen höherer Spezifität und tritt nur bei Keyboard-Navigation auf.
   Wichtig:  Die bestehende box-shadow in main.css bleibt als visuelle Verstärkung
             erhalten; dieser Block ergänzt sie, ersetzt sie nicht. */
.contact-form input[type="text"]:focus-visible,
.contact-form input[type="email"]:focus-visible,
.contact-form textarea:focus-visible {
  outline:        var(--focus-outline);
  outline-offset: 2px;
}


/* =============================================================================
   13. PRODUKT-BILD — HOVER-ZOOM REDUCED-MOTION
   ============================================================================= */

/* FIX ▸ #imageContainer img:hover — transform:scale ohne reduced-motion-Check
   Problem:  main.css enthält `transform: scale(1.05)` auf Hover, aber kein
             prefers-reduced-motion-Guard speziell für dieses Element.
   Lösung:   Zoom bei aktivierter Reduzierungs-Präferenz deaktivieren. */
@media (prefers-reduced-motion: reduce) {
  #imageContainer img:hover {
    transform: none !important;
  }

  /* Analog: Team-Bilder */
  .zoom:hover {
    transform: none !important;
  }

  /* Back-to-top Pfeil-Animation */
  .back-to-top svg {
    animation: none !important;
  }
}


/* =============================================================================
   HINWEISE ZUR EINBINDUNG IN index.php
   =============================================================================

   In index.php direkt nach der main.css-Zeile einfügen:

       <link rel="stylesheet" href="css/improvements.css">

   Die bestehende main.css darf NICHT verändert werden.
   improvements.css ist vollständig rückgängig machbar: Datei entfernen = Revert.

   ============================================================================= */