/* brand-quizlix.css — Quizlix US-Conversion Color Override
 * Wird NACH tailwind.min.css geladen, überschreibt qtPink/qtPurple-Akzente.
 * Stand 2026-05-04. Scope: nur Quizlix/PQT-Stack.
 */

:root {
    --quizlix-primary: #2563EB;     /* trust blue */
    --quizlix-cta: #EF4444;         /* CTA red */
    --quizlix-cta-hover: #dc2626;   /* CTA red darker */
    --quizlix-cta-alt: #F97316;     /* CTA orange */
    --quizlix-yellow: #FACC15;      /* funky yellow */
    --quizlix-success: #22C55E;     /* success green */
    --quizlix-bg-dark: #0F172A;
    --quizlix-text: #111827;
    --quizlix-text-muted: #6B7280;
}

/* ─── CTA-Buttons: alle Haupt-CTAs werden Quizlix-Rot ─────────────── */

a.btn-cta,
button.btn-cta,
.btn-cta,
a.cta-primary,
button.cta-primary,
.cta-primary,
a.qt-lp-cta,
button.qt-lp-cta,
.qt-lp-cta,
.bg-gradient-to-r.from-pink-500,
.bg-gradient-to-r.from-purple-500,
.bg-gradient-to-r.from-fuchsia-500,
.bg-gradient-to-r.from-purple-600,
.bg-gradient-to-r.from-pink-600,
.bg-gradient-to-r.from-fuchsia-600,
[class*="from-purple-"][class*="to-pink-"],
[class*="from-pink-"][class*="to-purple-"],
[class*="from-qtPink"],
[class*="from-qtPurple"],
.bg-qtPink,
.bg-qtPurple,
.bg-purple-500,
.bg-purple-600,
.bg-pink-500,
.bg-pink-600,
.bg-fuchsia-500,
.bg-fuchsia-600,
button[type="submit"].btn-primary,
a.btn-primary {
    background: var(--quizlix-cta) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 700 !important;
    transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, .35) !important;
}
a.btn-cta:hover,
button.btn-cta:hover,
.btn-cta:hover,
a.cta-primary:hover,
button.cta-primary:hover,
.cta-primary:hover,
a.qt-lp-cta:hover,
button.qt-lp-cta:hover,
.qt-lp-cta:hover,
.bg-gradient-to-r.from-pink-500:hover,
.bg-gradient-to-r.from-purple-500:hover,
.bg-gradient-to-r.from-purple-600:hover,
.bg-gradient-to-r.from-pink-600:hover,
[class*="from-purple-"][class*="to-pink-"]:hover,
[class*="from-pink-"][class*="to-purple-"]:hover,
[class*="from-qtPink"]:hover,
[class*="from-qtPurple"]:hover,
.bg-qtPink:hover,
.bg-qtPurple:hover,
.bg-purple-500:hover,
.bg-purple-600:hover,
.bg-pink-500:hover,
.bg-pink-600:hover,
.bg-fuchsia-500:hover,
.bg-fuchsia-600:hover,
button[type="submit"].btn-primary:hover,
a.btn-primary:hover {
    background: var(--quizlix-cta-hover) !important;
    background-image: none !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, .5) !important;
}

/* ─── Text-Akzente die rosa/lila waren werden Quizlix-Blau ─────── */
.text-qtPink,
.text-qtPurple,
.text-pink-500,
.text-purple-500,
.text-fuchsia-500,
[class*="from-qtPink"][class*="bg-clip-text"],
[class*="from-qtPurple"][class*="bg-clip-text"] {
    color: var(--quizlix-primary) !important;
    -webkit-text-fill-color: var(--quizlix-primary) !important;
    background-image: none !important;
}

/* Headline-Gradient (Pink-zu-Purple) → Solid Blau für Trust */
h1[class*="bg-clip-text"][class*="from-pink"],
h1[class*="bg-clip-text"][class*="from-purple"],
h1[class*="bg-clip-text"][class*="from-fuchsia"],
.bg-clip-text.text-transparent[class*="from-qt"] {
    background-image: none !important;
    color: var(--quizlix-primary) !important;
    -webkit-text-fill-color: var(--quizlix-primary) !important;
}

/* ─── Background: Dark-Bereiche werden #0F172A ──────────────── */
.bg-qtBg {
    background-color: var(--quizlix-bg-dark) !important;
}

/* ─── Border/Ring auf CTA-Akzente ──────────────────────────── */
.border-qtPink,
.border-qtPurple,
.ring-qtPink,
.ring-qtPurple {
    border-color: var(--quizlix-primary) !important;
}

/* ─── Success-State (Quiz richtige Antwort) ───────────────── */
.answer-correct,
.btn-success,
.text-green-500,
.bg-green-500 {
    background-color: var(--quizlix-success) !important;
    color: #FFFFFF !important;
}

/* ─── Form-Focus auf Trust-Blau ───────────────────────────── */
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--quizlix-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important;
}