/**
 * PFAD:  templates/credit12/css/cookiehint-custom.css
 *        (Dateiname/Ort anpassbar - Inhalt muss nach dem CSS des Plugins CookieHint
 *        geladen werden, z. B. in deine bestehende eigene Template-CSS einfügen)
 *
 * Zweck: Anpassung des Layouts von "CookieHint and Consent" (reDim GmbH) an das
 *        Seitendesign: abgerundete Buttons und runde Toggle-Schalter.
 *        TEST: "Alle akzeptieren", "Alle ablehnen" und die Toggler (an) zusätzlich im
 *        Bootstrap-Stil "success subtle" (hellgrün).
 *        Cookie-Symbol: Font Awesome "cookie-bite" statt PNG.
 *
 * Hinweise:
 *  - Das Plugin setzt seine Eigenschaften mit !important und nutzt in seinem eigenen CSS
 *    die doppelte ID "#redim-cookiehint#redim-cookiehint" (Spezifität 2 IDs). Eine
 *    Regel mit 1 ID + Klassen verliert dagegen. Deshalb nutzen die Regeln hier die
 *    ID dreifach ("#redim-cookiehint#redim-cookiehint#redim-cookiehint", 3 IDs) und
 *    !important. Damit gewinnen sie unabhängig von der Ladereihenfolge.
 *  - Der Radius kommt aus der Variable --c12-cc-radius. Standard: Bootstrap-Radius der
 *    Seite (--bs-border-radius, Bootstrap 5.3) mit Rückfall auf .5rem. Zum Ändern nur
 *    die Variable anpassen.
 *  - Breite und Position des Banners werden hier NICHT verändert.
 */

#redim-cookiehint#redim-cookiehint#redim-cookiehint {
    --c12-cc-radius: var(--bs-border-radius, .5rem);
}

/* ---------------------------------------------------------------
 * Buttons: "Alle akzeptieren", "Alle ablehnen", "Cookie-Einstellungen",
 * "Auswahl speichern" und die Links im <noscript>-Fall
 * --------------------------------------------------------------- */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-btn {
    border-radius: var(--c12-cc-radius) !important;
}

/* ---------------------------------------------------------------
 * TEST: nur "Alle akzeptieren" und "Alle ablehnen" in Bootstrap "success subtle"
 * Zum Zurückstellen diesen Block löschen.
 * --------------------------------------------------------------- */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-accept-all,
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-reject {
    background: var(--bs-success-bg-subtle, #d1e7dd) !important;
    color: var(--bs-success-text-emphasis, #0a3622) !important;
    border: 1px solid var(--bs-success-border-subtle, #a3cfbb) !important;
}

/* ---------------------------------------------------------------
 * Toggle-Schalter (Kategorien und einzelne Cookies)
 *   .redim-cc-slider          = Schiene (Grundform)
 *   .redim-cc-slider::before  = Knopf
 * --------------------------------------------------------------- */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-slider {
    border-radius: 24px !important;
}

#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-slider::before {
    border-radius: 50% !important;
}

/* ---------------------------------------------------------------
 * TEST: Toggler im Zustand "an" (auch die immer aktiven) in Bootstrap "success subtle"
 * Zum Zurückstellen diesen Block löschen.
 * Hinweis: Der Knopf bleibt weiß (Plugin-Standard) und ist auf der hellen Schiene
 * schlecht sichtbar. Bei Bedarf separat färben (.redim-cc-slider::before).
 * --------------------------------------------------------------- */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-switch input:checked + .redim-cc-slider,
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-switch input[aria-disabled="true"] + .redim-cc-slider {
    background-color: var(--bs-success-bg-subtle, #d1e7dd) !important;
}

/* ---------------------------------------------------------------
 * Cookie-Symbol: PNG ausblenden, stattdessen Font Awesome "cookie-bite"
 *   Zeichencode laut deiner Font-Awesome-CSS: .fa-cookie-bite { --fa: "\f564" }
 *   Das <img> im Banner ist 26 x 24 px (span.redim-cc-icon).
 *   Schrift: Font Awesome legt in :root die Variable --fa-font-solid an (bei FA 6 so
 *   belegt, für 7.1.0 von mir NICHT geprüft). Fehlt sie, gilt der Rückfall mit dem
 *   Familiennamen "Font Awesome 7 Free" (Annahme). Bleibt das Symbol leer oder als
 *   Kästchen, stimmt der Name nicht -> aus der Regel .fa-solid in deiner FA-CSS
 *   übernehmen.
 *   Die Farbe kommt aus der Template-Variable --c12-color (:root, rgb(0, 60, 120));
 *   ist sie nicht gesetzt, gilt die Textfarbe des Banners (currentColor).
 * --------------------------------------------------------------- */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-icon img {
    display: none !important;
}

#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-icon::before {
    content: "\f564";
    content: "\f564" / "";
    font: var(--fa-font-solid, normal 900 1em/1 "Font Awesome 7 Free") !important;
    font-size: 26px !important;
    color: var(--c12-color, currentColor) !important;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------
 * Runder Button zum erneuten Öffnen der Cookie-Einstellungen:
 *   <button class="redim-cc-reopen"><img src=".../little_cookie.png" width="24" height="22"></button>
 * Gleiche Umstellung wie beim Banner: PNG ausblenden, Font-Awesome-Symbol "cookie-bite".
 * Ein-/Ausblenden am Seitenende steuert script.js (direkt über diese Klasse).
 * Der Button liegt (nach dem HTML, das du gezeigt hast) nicht nachweislich in
 * #redim-cookiehint; deshalb hier kein ID-Selektor, sondern der Klassenname dreifach
 * (Spezifität höher als einfache Plugin-Regeln) und !important. Ob das reicht, habe
 * ich nicht geprüft - die Regeln des Buttons im Plugin-CSS kenne ich nicht.
 * Rahmen, Größe und Position des Buttons bleiben unverändert.
 * --------------------------------------------------------------- */
body button.redim-cc-reopen.redim-cc-reopen.redim-cc-reopen img {
    display: none !important;
}

/* Grundzustand: unsichtbar. script.js blendet den Button nur am Seitenende ein,
 * indem es visibility/opacity/pointer-events direkt am Element setzt (inline mit
 * !important schlägt diese Regel). Läuft das Skript nicht, bleibt der Button
 * unsichtbar - das zeigt einen Fehler im Skript deutlich an. */
body button.redim-cc-reopen.redim-cc-reopen.redim-cc-reopen {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body button.redim-cc-reopen.redim-cc-reopen.redim-cc-reopen::before {
    content: "\f564";
    content: "\f564" / "";
    font: var(--fa-font-solid, normal 900 1em/1 "Font Awesome 7 Free") !important;
    font-size: 22px !important;
    color: var(--c12-color, currentColor) !important;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------
 * "Immer aktiv"-Marke: im Plugin bereits rund (999px). Hier nur zur Sicherheit.
 * --------------------------------------------------------------- */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-always-on {
    border-radius: 999px !important;
}