/* ============================================================
 * Trailoflex v8.4 — Deploy-Layer CSS-Overrides
 * ============================================================
 * Wird NACH dem Vite-Haupt-Bundle geladen und überschreibt gezielt
 * A11y- und Perf-Findings ohne Bundle-Rebuild.
 *
 * v8.4-Hotfix: Cookie-Banner-Regeln vollständig entfernt — der
 * v8.3-Positionierungs-Fix hat die DOM-Struktur des Consent-Cards
 * gebrochen (Titel/Text stand außerhalb des Container-Rechtecks,
 * Buttons überlagerten den Rest). Cookie-Banner läuft jetzt wieder
 * mit der Original-Vite-Positionierung. Der LCP-Kandidat bleibt
 * dadurch weiterhin der Cookie-Banner-Text — dieser Punkt wird
 * anders angegangen (siehe CHANGELOG-v8.4.md Abschnitt 3).
 * ============================================================ */

/* -----------------------------------------------------------
 * A11y-Fix 1: Kontrast auf .btn-primary
 * -----------------------------------------------------------
 * Weißer Text auf hellem Grün (#13C528 aktuell im Bundle) hat
 * nur ~3.6:1 — WCAG AA verlangt ≥4.5:1 für Text unter 18px.
 * Dunkler Text auf dem gleichen Grün liegt bei ~10:1. Marke
 * bleibt grün, nur die Schrift wird dunkel.
 * ----------------------------------------------------------- */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled {
  color: #0B1D0F !important;
}
.btn-primary svg { color: #0B1D0F !important; }

/* -----------------------------------------------------------
 * A11y-Fix 2: bymueller-Footer-Link sichtbar unterstrichen
 * -----------------------------------------------------------
 * Aktuell nur hover:underline. WCAG „Links durch Farbe erkennbar"
 * verlangt einen sichtbaren visuellen Marker im Ruhezustand für
 * Textlinks außerhalb der Navigation.
 * ----------------------------------------------------------- */
footer a[href*="bymueller.com"] {
  text-decoration: underline dotted !important;
  text-decoration-color: rgba(168, 173, 181, 0.5) !important;
  text-underline-offset: 2px !important;
}
footer a[href*="bymueller.com"]:hover,
footer a[href*="bymueller.com"]:focus {
  text-decoration-color: currentColor !important;
}

/* -----------------------------------------------------------
 * Perf-Fix 1: Splash-Ring auf GPU-composite umbauen
 * -----------------------------------------------------------
 * Der animierte Ring (.sp-arc) wird ursprünglich per
 * stroke-dashoffset animiert — läuft auf Main-Thread und
 * fällt bei PageSpeed als „non-composited" negativ auf.
 *
 * Fix: statt dashoffset dreht sich der ganze <svg> um seinen
 * Mittelpunkt — läuft als transform: rotate() auf der GPU.
 * Der Ring-Look bleibt visuell identisch weil bereits eine
 * runde SVG-Form ist.
 * ----------------------------------------------------------- */
#splash .sp-ring-svg {
  animation: tfSplashSpin 1.6s linear infinite !important;
  transform-origin: 50% 50% !important;
  will-change: transform;
}
#splash .sp-arc {
  animation: none !important;
  stroke-dasharray: 240 767 !important;
  stroke-dashoffset: 0 !important;
}
@keyframes tfSplashSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* -----------------------------------------------------------
 * Perf-Fix 2: Splash-Logo-Pulse composite
 * -----------------------------------------------------------
 * Original animiert filter (Main-Thread). Umbau auf
 * transform + opacity (GPU-Composite, identischer Puls-Look).
 * ----------------------------------------------------------- */
#splash .sp-logo {
  animation: tfSplashPulse 1.8s ease-in-out infinite !important;
  will-change: transform, opacity;
}
@keyframes tfSplashPulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.05); opacity: 1;    }
}

/* -----------------------------------------------------------
 * `prefers-reduced-motion` Respekt
 * -----------------------------------------------------------
 * Splash-Animationen bei User-Präferenz für weniger Bewegung
 * deaktivieren (Vestibular-Störungen etc.).
 * ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #splash .sp-ring-svg,
  #splash .sp-logo {
    animation: none !important;
  }
}