/* ailh-regconsent.css (2026-08-01)
 * Zweck dieser Datei: Aussehen der beiden Zustimmungs-Kontrollkaestchen (AGB, Datenschutz),
 * die bei jeder Kontoanlage aktiv angekreuzt werden muessen.
 * Markup: resources/views/default/panel/authentication/partials/ailh-consent.blade.php
 *
 * Nicht ableitbar / bitte beachten:
 *  - Das Tailwind-Bundle dieses Projekts ist VORKOMPILIERT. Neue Utility-Klassen im Markup
 *    haetten keinerlei Wirkung. Deshalb steht hier ausschliesslich handgeschriebenes CSS mit
 *    eigenem Praefix "ailh-regconsent" (gleiches Muster wie ailh-captcha-hint.css /
 *    ailh-socialprofile.css / ailh-status.css).
 *  - Der Dunkelmodus schaltet ueber die KLASSE body.theme-dark (gesetzt in
 *    panel/layout/partials/mode-script.blade.php), NICHT ueber ein data-theme-Attribut.
 *    Ein [data-theme='dark']-Selektor waere hier wirkungslos.
 *  - Die Kastenhintergruende sind bewusst DECKEND. Damit steht der Kontrast unabhaengig vom
 *    gewaehlten Farbschema fest und kann nicht durch eine Hintergrundgrafik kippen.
 *
 *  - Kontrastwerte (WCAG 2.x, relative Luminanz, gerechnet — nicht geschaetzt):
 *      hell    Text    #1F2933 auf #F6F7F9 = 13,60:1   (AA Fliesstext >= 4,5:1)
 *              Link    #1D4ED8 auf #F6F7F9 =  6,27:1
 *              Link:hover #1E3A8A auf #F6F7F9 = 9,67:1
 *              Kastenrand des Kaestchens #4B5563 auf #F6F7F9 = 7,07:1 (Nicht-Text >= 3:1)
 *              Fokusring #1D4ED8 auf #F6F7F9 = 6,27:1 (Nicht-Text >= 3:1)
 *              Fehler  Text #991B1B auf #FEE2E2 = 6,81:1 | Rand #991B1B = 6,80:1
 *              Fehler  Link #7F1D1D auf #FEE2E2 = 8,05:1
 *      dunkel  Text    #E5E7EB auf #1F2937 = 11,71:1
 *              Link    #93C5FD auf #1F2937 =  8,04:1
 *              Link:hover #BFDBFE auf #1F2937 = 10,21:1
 *              Kastenrand #9CA3AF auf #1F2937 = 5,71:1
 *              Fokusring #93C5FD auf #1F2937 = 8,04:1
 *              Fehler  Text #FCA5A5 auf #7F1D1D = 5,28:1
 *              Fehler  Link #FECACA auf #7F1D1D = 6,79:1
 *    Die Rot-Paare sind identisch zu den bereits geprueften Toenen in ailh-socialprofile.css.
 */

.ailh-regconsent {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background-color: #f6f7f9;
    color: #1f2933;
    font-size: 0.875rem;
    line-height: 1.55;
    text-align: start;
}

.ailh-regconsent__title {
    margin: 0 0 0.25rem;
    color: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
}

/* Die gesamte Zeile ist ein <label> und damit Klickflaeche fuer das Kaestchen.
   Links darin bleiben Links: nach der HTML-Spezifikation loest ein Klick auf
   eingebettete interaktive Inhalte die Label-Aktivierung NICHT aus. */
.ailh-regconsent__item {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin: 0;
    padding: 0.375rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    color: inherit;
    cursor: pointer;
}

.ailh-regconsent__box {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.18rem 0 0;
    border: 2px solid #4b5563;
    border-radius: 0.25rem;
    accent-color: #1d4ed8;
    cursor: pointer;
}

/* Sichtbarer Tastaturfokus. :focus zusaetzlich zu :focus-visible, weil aeltere
   Browser :focus-visible nicht kennen — dort ist ein Ring zu viel besser als keiner. */
.ailh-regconsent__box:focus,
.ailh-regconsent__box:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
}

.ailh-regconsent__text {
    color: inherit;
}

.ailh-regconsent__link {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: underline;
}

.ailh-regconsent__link:hover,
.ailh-regconsent__link:focus {
    color: #1e3a8a;
}

.ailh-regconsent__item--error {
    border-color: #991b1b;
    background-color: #fee2e2;
    color: #991b1b;
}

.ailh-regconsent__item--error .ailh-regconsent__box {
    border-color: #991b1b;
}

.ailh-regconsent__item--error .ailh-regconsent__link {
    color: #7f1d1d;
}

/* ---------- Dunkelmodus ---------- */

.theme-dark .ailh-regconsent {
    background-color: #1f2937;
    color: #e5e7eb;
}

.theme-dark .ailh-regconsent__box {
    border-color: #9ca3af;
    accent-color: #93c5fd;
}

.theme-dark .ailh-regconsent__box:focus,
.theme-dark .ailh-regconsent__box:focus-visible {
    outline-color: #93c5fd;
}

.theme-dark .ailh-regconsent__link {
    color: #93c5fd;
}

.theme-dark .ailh-regconsent__link:hover,
.theme-dark .ailh-regconsent__link:focus {
    color: #bfdbfe;
}

.theme-dark .ailh-regconsent__item--error {
    border-color: #fca5a5;
    background-color: #7f1d1d;
    color: #fca5a5;
}

.theme-dark .ailh-regconsent__item--error .ailh-regconsent__box {
    border-color: #fca5a5;
}

.theme-dark .ailh-regconsent__item--error .ailh-regconsent__link {
    color: #fecaca;
}

/* ---------- ailh-fix 2026-08-01: Newsletter-Kaestchen sichtbar machen ---------- */

/* Das Newsletter-Opt-in steht direkt ueber diesem Block, nutzt aber die Theme-Klasse
   .form-check-input mit einem sehr blassen Rahmen. Hier auf dieselben Werte wie die
   Zustimmungs-Kaestchen gebracht, damit beide gleich gut lesbar sind.
   Ueber die ID adressiert, um die vielfach genutzte Theme-Klasse nicht global zu aendern. */
#newsletter_optin_register {
    border: 2px solid #4b5563;
    border-radius: 0.25rem;
    accent-color: #1d4ed8;
}

#newsletter_optin_register:focus,
#newsletter_optin_register:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
}

.theme-dark #newsletter_optin_register {
    border-color: #9ca3af;
    accent-color: #93c5fd;
}

.theme-dark #newsletter_optin_register:focus,
.theme-dark #newsletter_optin_register:focus-visible {
    outline-color: #93c5fd;
}