/* ============================================================
   CookieConsent Theme – Lila / Purple
   ============================================================ */

:root {
    /* ── Primärfarbe ── */
    --cc-primary-color:              #6743ea;
    --cc-secondary-color:            #475569;

    /* ── Buttons ── */
    --cc-btn-primary-bg:             #6743ea;
    --cc-btn-primary-border-color:   #6743ea;
    --cc-btn-primary-color:          #ffffff;
    --cc-btn-primary-hover-bg:       #5b2fd9;
    --cc-btn-primary-hover-border-color: #5b2fd9;
    --cc-btn-primary-hover-color:    #ffffff;

    --cc-btn-secondary-bg:           transparent;
    --cc-btn-secondary-border-color: #d4c8f5;
    --cc-btn-secondary-color:        #5b4a8a;
    --cc-btn-secondary-hover-bg:     #f5f1fe;
    --cc-btn-secondary-hover-border-color: #b8a0f0;
    --cc-btn-secondary-hover-color:  #6743ea;
    --cc-btn-border-radius:          14px;

    /* ── Hintergründe ── */
    --cc-bg:                         #ffffff;
    --cc-overlay-bg:                 rgba(15, 23, 42, 0.55);

    /* ── Cookie-Kategorie-Blöcke ── */
    --cc-cookie-category-block-bg:              #f5f1fe;
    --cc-cookie-category-block-border:          #e9d5ff;
    --cc-cookie-category-block-hover-bg:        #ede8fd;
    --cc-cookie-category-block-hover-border:    #c4b5fd;
    --cc-cookie-category-expanded-block-bg:     #faf5ff;
    --cc-cookie-category-expanded-block-hover-bg: #f5f1fe;

    /* ── Toggle-Switch ── */
    --cc-toggle-on-bg:               #6743ea;
    --cc-toggle-on-knob-bg:          #ffffff;
    --cc-toggle-off-bg:              #cbd5e1;
    --cc-toggle-off-knob-bg:         #ffffff;
    --cc-toggle-readonly-bg:         #e2e8f0;
    --cc-toggle-readonly-knob-bg:    #94a3b8;

    /* ── Links ── */
    --cc-link-color:                 #6743ea;

    /* ── Footer (Einstellungs-Modal) ── */
    --cc-footer-bg:                  #faf5ff;
    --cc-footer-border-color:        #e9d5ff;
    --cc-footer-color:               #475569;

    /* ── Sonstiges ── */
    --cc-separator-border-color:     #e9d5ff;
    --cc-section-category-border:    #e9d5ff;
    --cc-font-family:                'Inter', system-ui, -apple-system, sans-serif;
    --cc-modal-border-radius:        18px;
    --cc-modal-margin:               1rem;
    --cc-z-index:                    2147483647;
}

/* ============================================================
   "Blind Click" Optimierung – Accept-Button visuell dominant
   ============================================================ */

/* ── Accept-Button: fett, groß, zentriert ── */
#cc-main .cm__btn[data-role="all"] {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    padding: 0.85rem 2.2rem !important;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 18px rgba(103, 67, 234, 0.35);
    min-width: 200px;
}

#cc-main .cm__btn[data-role="all"]:hover {
    box-shadow: 0 6px 24px rgba(103, 67, 234, 0.5);
    transform: translateY(-1px);
}

/* ── "Nur notwendige" Button: dezent, wie ein Textlink ── */
#cc-main .cm__btn[data-role="necessary"] {
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    padding: 0.5rem 0.8rem !important;
    opacity: 0.7;
    border-color: transparent !important;
    background: transparent !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

#cc-main .cm__btn[data-role="necessary"]:hover {
    opacity: 1;
    background: transparent !important;
}

/* ── "Einstellungen" Button: noch dezenter ── */
#cc-main .cm__btn[data-role="show"],
#cc-main .cm__btn--settings {
    font-weight: 400 !important;
    font-size: 0.82rem !important;
    padding: 0.4rem 0.6rem !important;
    opacity: 0.55;
    border-color: transparent !important;
    background: transparent !important;
}

#cc-main .cm__btn[data-role="show"]:hover,
#cc-main .cm__btn--settings:hover {
    opacity: 0.8;
    background: transparent !important;
}

/* ── Button-Reihenfolge: Accept ganz oben, Rest drunter ── */
#cc-main .cm__btn-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

#cc-main .cm__btn-group .cm__btn[data-role="all"] {
    order: -1 !important;
    width: 100% !important;
}

/* ── Subtiler Puls-Effekt nach 2s für unentschlossene Nutzer ── */
@keyframes cc-pulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(103, 67, 234, 0.35); }
    50%      { box-shadow: 0 4px 30px rgba(103, 67, 234, 0.6); }
}

#cc-main .cm__btn[data-role="all"] {
    animation: cc-pulse 2.5s ease-in-out 2s 3;
}