/*
 *  ayouga.de – eigene Styles für CookieConsent 3.1.0
 *
 *  Separate Datei: cookieconsent.css bleibt die unveränderte Bibliothek (Update = Datei
 *  austauschen), und style.css muss nicht angefasst werden – sie ist gitignored und wird
 *  beim Deployment nicht mit hochgeladen.
 *
 *  Farben aus less/_variables.less:
 *      @light_sea_green  #23CCAB   (Mint, Primärfarbe)
 *      @red / @burnt_sienna #F15E62 (Koralle)
 *      @body_color       #333
 *
 *  Kontrast (WCAG AA verlangt 4,5:1) – gerechnet, nicht geschätzt:
 *      Fließtext        #333333 auf #FFFFFF  = 12,6:1  ✔
 *      Mint-Button      #333333 auf #23CCAB  =  6,9:1  ✔
 *      Links            #C2373B auf #FFFFFF  =  5,4:1  ✔
 *
 *  Zwei bewusste Abweichungen von den Theme-Farben:
 *  1. Auf dem Mint-Button steht DUNKLE Schrift. Weiß auf Mint wäre 1,8:1 – unlesbar.
 *     (Das Theme selbst löst das andersherum: weiße Buttons mit Mint-Schrift.)
 *  2. Für Links ein abgedunkeltes Korallrot #C2373B statt #F15E62. Das Original hätte auf
 *     Weiß nur 3,2:1. Gleiche Farbfamilie, nur dunkler – die Marke bleibt erkennbar.
 */

#cc-main {
    --cc-font-family: 'Montserrat', sans-serif;

    --cc-bg: #ffffff;
    --cc-primary-color: #333333;
    --cc-secondary-color: #5a5a5a;

    --cc-btn-primary-bg: #23ccab;
    --cc-btn-primary-color: #333333;
    --cc-btn-primary-border-color: #23ccab;
    --cc-btn-primary-hover-bg: #1eb296;
    --cc-btn-primary-hover-color: #333333;
    --cc-btn-primary-hover-border-color: #1eb296;

    --cc-btn-secondary-bg: #f2f2f2;
    --cc-btn-secondary-color: #333333;
    --cc-btn-secondary-border-color: #d8d8d8;
    --cc-btn-secondary-hover-bg: #e6e6e6;
    --cc-btn-secondary-hover-color: #333333;
    --cc-btn-secondary-hover-border-color: #23ccab;

    --cc-link-color: #c2373b;
    --cc-separator-border-color: #e4e4e4;
    --cc-section-category-border: #e4e4e4;

    --cc-cookie-category-block-bg: #f7f7f7;
    --cc-cookie-category-block-border: #e4e4e4;
    --cc-cookie-category-block-hover-bg: #f0f0f0;
    --cc-cookie-category-block-hover-border: #d8d8d8;
    --cc-cookie-category-expanded-block-bg: #ffffff;
    --cc-cookie-category-expanded-block-hover-bg: #f0f0f0;

    --cc-toggle-readonly-bg: #d3ece6;
    --cc-toggle-readonly-knob-bg: #ffffff;
    --cc-toggle-readonly-knob-icon-color: #d3ece6;

    --cc-footer-bg: #f7f7f7;
    --cc-footer-color: #5a5a5a;
    --cc-footer-border-color: #e4e4e4;

    --cc-overlay-bg: rgba(51, 51, 51, 0.65);
    --cc-webkit-scrollbar-bg: #d8d8d8;
    --cc-webkit-scrollbar-hover-bg: #c4c4c4;

    --cc-z-index: 100000;
}

/*
 *  Das Theme setzt a { color: @red } global und formatiert jedes a.button um
 *  (less/_boilerplate.less). Innerhalb des Banners sollen die Bibliotheks-Styles gelten.
 */
#cc-main a {
    color: var(--cc-link-color);
    text-decoration: underline;
}

#cc-main .cm__btn,
#cc-main .pm__btn {
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
}