/**
 * CookieHint 2 — Skin "flatline": minimalistisch flach, monochrom, kantig,
 * Versalien-Typografie — mit monochrom invertierter dunkler Variante.
 *
 * Skins sind template-neutral (Scope #redim-cookiehint.redim-tpl) und frei mit
 * jedem Layout-Template kombinierbar; das Template behaelt nur Struktur,
 * Animationen und die dynamischen Farbregeln. Die --redim-cc-skin-*-Variablen
 * speisen die Farb-Fallback-Kette der Templates: Backend-Farbauswahl
 * (--redim-cc-*) > Skin (--redim-cc-skin-*) > Template-Standard.
 *
 * Hell/Dunkel: jede Farbe ist als light-dark(hell, dunkel) definiert und wird
 * ueber die color-scheme-Eigenschaft am Banner aufgeloest — die setzt das
 * Backend-Feld "Farbschema" (Automatisch = Browser entscheidet / Hell /
 * Dunkel). Vor jedem light-dark() steht der helle Wert als Fallback fuer
 * Browser ohne light-dark()-Unterstuetzung; die Skin-Variablen wechseln im
 * @supports-Block am Dateiende.
 *
 * @copyright reDim GmbH | @link https://www.redim.de | @contact team@redim.de
 * @license   GNU General Public License 2.0 or later
 */

#redim-cookiehint.redim-tpl {
    --redim-cc-skin-btn-bg: #222222 !important;
    --redim-cc-skin-btn-fg: #ffffff !important;
    --redim-cc-skin-accent: #222222 !important;
    --redim-cc-skin-surface: #ffffff !important;
    --redim-cc-skin-divider: #dddddd !important;
    background: #ffffff !important;
    background: light-dark(#ffffff, #161616) !important;
    color: #222222 !important;
    color: light-dark(#222222, #ededed) !important;
    border: 1px solid #222222 !important;
    border-color: light-dark(#222222, #ededed) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#redim-cookiehint-top .redim-tpl,
#redim-cookiehint-bottom .redim-tpl { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }

#redim-cookiehint.redim-tpl .headline { font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: #222222 !important; color: light-dark(#222222, #ededed) !important; }
#redim-cookiehint.redim-tpl .cookiecontent { font-size: 12px !important; line-height: 1.6 !important; color: #444444 !important; color: light-dark(#444444, #c2c2c2) !important; }

#redim-cookiehint.redim-tpl .btn { background: #ffffff !important; background: light-dark(#ffffff, #161616) !important; color: #222222 !important; color: light-dark(#222222, #ededed) !important; border: 1px solid #222222 !important; border-color: light-dark(#222222, #ededed) !important; border-radius: 0 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
#redim-cookiehint.redim-tpl .btn:hover { background: #222222 !important; background: light-dark(#222222, #ededed) !important; color: #ffffff !important; color: light-dark(#ffffff, #161616) !important; }
#redim-cookiehint.redim-tpl #cookiehintsubmit:hover,
#redim-cookiehint.redim-tpl #cookiehintsubmitno:hover,
#redim-cookiehint.redim-tpl .redim-cc-accept-all:hover,
#redim-cookiehint.redim-tpl .redim-cc-reject:hover { filter: brightness(1.35) !important; }
#redim-cookiehint.redim-tpl .redim-cc-save { background: #ffffff !important; background: light-dark(#ffffff, #161616) !important; color: #222222 !important; color: light-dark(#222222, #ededed) !important; border: 1px solid #222222 !important; border-color: light-dark(#222222, #ededed) !important; }
#redim-cookiehint.redim-tpl .redim-cc-save:hover { background: #222222 !important; background: light-dark(#222222, #ededed) !important; color: #ffffff !important; color: light-dark(#ffffff, #161616) !important; }

#redim-cookiehint.redim-tpl #cookiehintinfo { margin-top: 10px !important; font-size: 11px !important; }
#redim-cookiehint.redim-tpl #cookiehintinfo a { color: #222222 !important; color: light-dark(#222222, #ededed) !important; text-decoration: underline !important; }

#redim-cookiehint.redim-tpl .redim-cc-cat { border-top: 1px solid #dddddd !important; border-top-color: light-dark(#dddddd, #3a3a3a) !important; border-radius: 0 !important; }
#redim-cookiehint.redim-tpl .redim-cc-cat-desc { color: #666666 !important; color: light-dark(#666666, #9c9c9c) !important; }
#redim-cookiehint.redim-tpl .redim-cc-detail-toggle { color: #666666 !important; color: light-dark(#666666, #9c9c9c) !important; }
#redim-cookiehint.redim-tpl .redim-cc-slider { background-color: #767676 !important; background-color: light-dark(#767676, #8a8a8a) !important; border-radius: 0 !important; }
#redim-cookiehint.redim-tpl .redim-cc-slider::before { border-radius: 0 !important; }
#redim-cookiehint.redim-tpl .redim-cc-cookie-row,
#redim-cookiehint.redim-tpl .redim-cc-cookies { color: #444444 !important; color: light-dark(#444444, #c2c2c2) !important; }
#redim-cookiehint.redim-tpl .redim-cc-cat-count,
#redim-cookiehint.redim-tpl .redim-cc-cookie-meta { color: #666666 !important; color: light-dark(#666666, #9c9c9c) !important; }
#redim-cookiehint.redim-tpl .redim-cc-noscript { color: #444444 !important; color: light-dark(#444444, #c2c2c2) !important; }

#redim-cookiehint.redim-tpl a:focus-visible,
#redim-cookiehint.redim-tpl button:focus-visible,
#redim-cookiehint.redim-tpl .redim-cc-switch input:focus-visible + .redim-cc-slider { outline: 3px solid #222222 !important; outline-color: light-dark(#222222, #ffffff) !important; outline-offset: 2px !important; }

#redim-cookiehint.redim-tpl .redim-cc-watermark,
#redim-cookiehint.redim-tpl .redim-cc-watermark a { color: #666666 !important; color: light-dark(#666666, #9c9c9c) !important; }

/* Skin-Variablen hell/dunkel — separat gegated, weil ein light-dark()-Wert in
   einer Custom Property alte Browser sonst an der NUTZUNGS-Stelle scheitern
   liesse (Fallback-Doppeldeklaration greift durch var() nicht). */
@supports (color: light-dark(#000, #fff)) {
    #redim-cookiehint.redim-tpl {
        --redim-cc-skin-btn-bg: light-dark(#222222, #ededed) !important;
        --redim-cc-skin-btn-fg: light-dark(#ffffff, #161616) !important;
        --redim-cc-skin-accent: light-dark(#222222, #ededed) !important;
        --redim-cc-skin-surface: light-dark(#ffffff, #161616) !important;
        --redim-cc-skin-divider: light-dark(#dddddd, #3a3a3a) !important;
    }
}