/**
 * CookieHint and Consent — Skin "glass": Glasmorphismus — halbtransparente,
 * weichgezeichnete Flaeche (backdrop-filter), feine helle Kante, tiefer weicher
 * Schatten, Pill-Buttons, Petrol-Akzent — mit dunkler Variante (Rauchglas).
 *
 * 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 (Backend-Feld
 * "Farbschema"). 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. Alle Deklarationen tragen !important
 * (Haertung gegen Seiten-/Theme-CSS).
 *
 * @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: #0f766e !important;
    --redim-cc-skin-btn-fg: #ffffff !important;
    --redim-cc-skin-accent: #0f766e !important;
    --redim-cc-skin-surface: #f7f9fc !important;
    --redim-cc-skin-divider: rgba(31, 41, 55, 0.12) !important;
    --redim-cc-skin-knob: #ffffff !important;
    --redim-cc-skin-muted: #4b5563 !important;
    /* Solid fallback first (no backdrop-filter support), then the glass. */
    background: #f7f9fc !important;
    background: light-dark(rgba(255, 255, 255, 0.86), rgba(17, 24, 39, 0.84)) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
    backdrop-filter: blur(18px) saturate(1.4) !important;
    color: #1f2937 !important;
    color: light-dark(#1f2937, #e5e7eb) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-color: light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.14)) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 24px 64px light-dark(rgba(15, 23, 42, 0.28), rgba(0, 0, 0, 0.6)), inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.06)) !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 .redim-cc-headline { font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.01em; color: #111827 !important; color: light-dark(#111827, #ffffff) !important; }
#redim-cookiehint.redim-tpl .redim-cc-content { font-size: 13px !important; line-height: 1.6; color: #4b5563 !important; color: light-dark(#4b5563, #cbd5e1) !important; }

#redim-cookiehint.redim-tpl .redim-cc-btn { background: rgba(255, 255, 255, 0.6) !important; background: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08)) !important; color: #1f2937 !important; color: light-dark(#1f2937, #e5e7eb) !important; border: 1px solid rgba(31, 41, 55, 0.55) !important; border-color: light-dark(rgba(31, 41, 55, 0.55), rgba(255, 255, 255, 0.5)) !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important; }
#redim-cookiehint.redim-tpl .redim-cc-btn:hover { background: rgba(255, 255, 255, 0.9) !important; background: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.16)) !important; }
#redim-cookiehint.redim-tpl #cookiehintsubmit,
#redim-cookiehint.redim-tpl #cookiehintsubmitno,
#redim-cookiehint.redim-tpl .redim-cc-accept-all,
#redim-cookiehint.redim-tpl .redim-cc-reject { border-color: transparent !important; box-shadow: 0 8px 20px rgba(15, 118, 110, 0.25) !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 { box-shadow: inset 0 0 0 2px currentColor !important; }
#redim-cookiehint.redim-tpl .redim-cc-save { background: rgba(255, 255, 255, 0.94) !important; background: light-dark(rgba(255, 255, 255, 0.94), rgba(36, 42, 54, 0.94)) !important; color: #1f2937 !important; color: light-dark(#1f2937, #e5e7eb) !important; border: 1px solid rgba(31, 41, 55, 0.14) !important; border-color: light-dark(rgba(31, 41, 55, 0.14), rgba(255, 255, 255, 0.16)) !important; }
#redim-cookiehint.redim-tpl .redim-cc-save:hover { background: rgba(255, 255, 255, 1) !important; background: light-dark(rgba(255, 255, 255, 1), rgba(48, 55, 68, 0.96)) !important; }

#redim-cookiehint.redim-tpl #cookiehintinfo { margin-top: 12px !important; font-size: 12px !important; }
#redim-cookiehint.redim-tpl #cookiehintinfo a { color: #0f766e !important; color: light-dark(#0f766e, #2dd4bf) !important; text-decoration: none !important; }
#redim-cookiehint.redim-tpl #cookiehintinfo a:hover { text-decoration: underline !important; }

#redim-cookiehint.redim-tpl .redim-cc-cat { border-top: 1px solid rgba(31, 41, 55, 0.12) !important; border-top-color: light-dark(rgba(31, 41, 55, 0.12), rgba(255, 255, 255, 0.14)) !important; border-radius: 0 !important; }
#redim-cookiehint.redim-tpl .redim-cc-cat-desc { color: #4b5563 !important; color: light-dark(#4b5563, #cbd5e1) !important; }
#redim-cookiehint.redim-tpl .redim-cc-detail-toggle { color: #4b5563 !important; color: light-dark(#4b5563, #cbd5e1) !important; }
#redim-cookiehint.redim-tpl .redim-cc-slider { background-color: #6b7484 !important; background-color: light-dark(#6b7484, #8b9ab1) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15) !important; }
#redim-cookiehint.redim-tpl .redim-cc-cookie-row,
#redim-cookiehint.redim-tpl .redim-cc-cookies { color: #1f2937 !important; color: light-dark(#1f2937, #e5e7eb) !important; }
#redim-cookiehint.redim-tpl .redim-cc-cat-count,
#redim-cookiehint.redim-tpl .redim-cc-cookie-meta { color: #4b5563 !important; color: light-dark(#4b5563, #cbd5e1) !important; }
#redim-cookiehint.redim-tpl .redim-cc-noscript { color: #4b5563 !important; color: light-dark(#4b5563, #cbd5e1) !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 #0f766e !important; outline-color: light-dark(#0f766e, #2dd4bf) !important; outline-offset: 2px !important; }

#redim-cookiehint.redim-tpl .redim-cc-watermark,
#redim-cookiehint.redim-tpl .redim-cc-watermark a { color: #4b5563 !important; color: light-dark(#4b5563, #cbd5e1) !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(#0f766e, #2dd4bf) !important;
        --redim-cc-skin-btn-fg: light-dark(#ffffff, #111827) !important;
        --redim-cc-skin-accent: light-dark(#0f766e, #2dd4bf) !important;
        /* Bewusst transparent: Die Sticky-"Auswahl speichern"-Zeile der Panel-Layouts
           (flyout-*, drawer) malt damit KEINE zweite Schicht auf die halbtransparente
           Glaskarte — jede eigene Farbe (auch die Kartenfarbe selbst) addiert sich sonst
           auf und wird als heller Kasten sichtbar. Das Verdecken des durchscrollenden
           Inhalts uebernimmt hier der deckende Speichern-Button (backdrop-filter kann es
           nicht: verschachtelt in der gefilterten Karte erfasst er den Karteninhalt nicht).
           Der Fallback oben bleibt #f7f9fc — ohne light-dark() ist die Karte solide. */
        --redim-cc-skin-surface: transparent !important;
        /* Der Scroll-Schatten gehoert zum Balken — ohne Flaeche bliebe nur ein
           grauer Hof um den Button stehen. */
        --redim-cc-skin-surface-shadow: none !important;
        --redim-cc-skin-divider: light-dark(rgba(31, 41, 55, 0.12), rgba(255, 255, 255, 0.14)) !important;
        --redim-cc-skin-knob: light-dark(#ffffff, #111827) !important;
        --redim-cc-skin-muted: light-dark(#4b5563, #cbd5e1) !important;
    }
}