/* ==========================================================================
   Public Sales-Seiten (/sales/events, /sales/competition, /sales/crew)
   --------------------------------------------------------------------------
   Build-UNABHAENGIGER Marken-Akzent-Layer. Das Competition-GOLD laeuft ueber die
   semantische --cita-gold-*-Token-Subpalette (Raw-Hex nur citastyle.css) und ECHTE
   CSS-Regeln — NICHT ueber Tailwind-Arbitrary-Utilities (text-[#C7A24B] …), die je
   nach Tailwind-Purge im precompiled Bundle fehlen koennen (vgl. start-dashboard.css).
   Layout/Typo der Seite nutzt weiter Standard-Tailwind; nur die Akzentfarbe laeuft
   hierueber. Fill vs. Text sind getrennt (--sales-cta-* fuer Solid-Fill, --sales-accent
   fuer AA-Text) — so bleibt der CTA in Light UND Dark kontraststark.

   Der Seiten-Root traegt `class="sales-page sales--<intent>"`; die Akzent-Vars
   schalten damit zwischen Events-Cyan, Competition-Gold und Crew-Violett.
   ========================================================================== */

.sales-page {
  --sales-accent: #22d3ee;
  --sales-accent-strong: #06b6d4;
  --sales-accent-soft: rgba(34, 211, 238, 0.12);
  --sales-accent-border: rgba(34, 211, 238, 0.32);
  /* CTA-Fill/Ink getrennt vom Text-Akzent (Default = Akzent selbst; Competition
     ueberschreibt auf theme-invariantes Gold + --cita-gold-contrast). */
  --sales-cta-fill: var(--sales-accent);
  --sales-cta-fill-strong: var(--sales-accent-strong);
  --sales-cta-ink: var(--cita-ink);
}
.sales-page.sales--events {
  --sales-accent: #22d3ee;
  --sales-accent-strong: #06b6d4;
  --sales-accent-soft: rgba(34, 211, 238, 0.12);
  --sales-accent-border: rgba(34, 211, 238, 0.32);
}
.sales-page.sales--competition {
  /* Text/Icon = theme-aware --cita-gold-text (AA in Dark UND Light); Fill/Border ueber
     die Gold-Subpalette. Kein Light-Override fuer --sales-accent noetig (Token schaltet). */
  --sales-accent: var(--cita-gold-text);
  --sales-accent-strong: var(--cita-gold-gradient-from);
  --sales-accent-soft: var(--cita-gold-soft);
  --sales-accent-border: var(--cita-gold-border);
  /* CTA: heller, theme-invarianter Solid-Fill + dunkler Ink (7.8:1 in beiden Themes). */
  --sales-cta-fill: var(--cita-gold);
  --sales-cta-fill-strong: var(--cita-gold-strong);
  --sales-cta-ink: var(--cita-gold-contrast);
}
.sales-page.sales--crew {
  /* Crew-Violett — kein Clash mit Events-Cyan / Competition-Gold (S-25). */
  --sales-accent: #a78bfa;
  --sales-accent-strong: #8b5cf6;
  --sales-accent-soft: rgba(167, 139, 250, 0.12);
  --sales-accent-border: rgba(167, 139, 250, 0.34);
}

/* --- Akzent-Helfer (Strukturelemente konsumieren die Var) --- */
.sales-page .sales-accent-text { color: var(--sales-accent); }
.sales-page .sales-accent-bg { background-color: var(--sales-accent-soft); }
.sales-page .sales-accent-border { border-color: var(--sales-accent-border) !important; }

/* Icons: lucide-SVG zeichnet mit stroke="currentColor" -> Akzent erben. */
.sales-page .sales-icon { color: var(--sales-accent); display: inline-flex; }

/* Gradient-Headline (WOW) — build-unabhaengig aus den Akzent-Vars. */
.sales-page .sales-gradient-text {
  background-image: linear-gradient(90deg, var(--sales-accent), var(--sales-accent-strong));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* CTA — solider Fill-Verlauf, dunkler Ink fuer Kontrast (Fill/Ink token-getrennt). */
.sales-page .sales-cta {
  background-image: linear-gradient(90deg, var(--sales-cta-fill), var(--sales-cta-fill-strong));
  color: var(--sales-cta-ink);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.sales-page .sales-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
.sales-page .sales-cta:focus-visible {
  outline: 3px solid var(--sales-accent);
  outline-offset: 2px;
}

/* Hero-Glow — radial, akzentgetoent, dezent animiert (reduced-motion safe). */
.sales-page .sales-hero-glow {
  background: radial-gradient(circle at 50% 30%, var(--sales-accent) 0%, transparent 62%);
  opacity: 0.16;
  filter: blur(100px);
}
@keyframes salesGlowDrift {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50% { transform: translate(-50%, 3%) scale(1.07); }
}
.sales-page .sales-hero-glow--animated { animation: salesGlowDrift 12s ease-in-out infinite; }

/* Card-Hover-Lift (USP + Plan-Teaser). */
.sales-page .sales-card {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.sales-page .sales-card:hover {
  transform: translateY(-4px);
  border-color: var(--sales-accent-border);
}

/* FAQ-Accordion: natives <details> + Plus->X-Rotation beim Öffnen (kein JS,
   build-sicher statt Tailwind-Arbitrary-Variant group-open). */
.sales-page .sales-faq-icon { transition: transform 0.2s ease; }
.sales-page details[open] .sales-faq-icon { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .sales-page .sales-faq-icon { transition: none; }
  .sales-page .sales-hero-glow--animated { animation: none; }
  .sales-page .sales-card { transition: none; }
  .sales-page .sales-card:hover { transform: none; }
  /* WCAG 2.3.3: AOS 2.3.4 honoriert prefers-reduced-motion nicht selbst —
     die [data-aos]-Scroll-Animationen (Fade-up) hier hart neutralisieren. */
  .sales-page [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Light-Mode: Akzent fuer Kontrast abdunkeln (Cyan/Violett kraeftiger). Competition
   schaltet --sales-accent bereits ueber --cita-gold-text (kein Hex noetig); nur der
   Gradient-Headline-Stop wird auf --cita-gold-muted gezogen (Large-Text >=3:1 auf Weiss). */
:root[data-theme="light"] .sales-page.sales--competition {
  --sales-accent-strong: var(--cita-gold-muted);
}
:root[data-theme="light"] .sales-page.sales--events {
  --sales-accent: #0e7490;
  --sales-accent-strong: #0891b2;
}
:root[data-theme="light"] .sales-page.sales--crew {
  --sales-accent: #6d28d9;
  --sales-accent-strong: #7c3aed;
}