/* css/own/consent.css */

/* Farb-Variablen */
:root{
   --consent-green: #28a745;
   --consent-green-d: #218838;
   --consent-gray: #6c757d;
   --consent-gray-d: #5a6268;
   --consent-blue: #0d6efd;
   --consent-blue-d: #0b5ed7;
   --consent-focus: #005fcc;
   --consent-banner-bg: #fff8f0;
}
/* Banner Hintergrund */
#consent-banner{
   background: var(--consent-banner-bg) !important;
}
/* Zeilen-Layout für die Switches */
#consent-banner .toggle{
   display:flex;
   align-items:center;
   gap:10px;
   padding:6px 0;
}
#consent-banner .toggle label{
   margin:0;
   font-weight:500;
   cursor:pointer;
}
/* Switch (links neben dem Label) */
#consent-banner .switch{
   position:relative !important;
   display:inline-block !important;
   width:48px !important;
   height:26px !important;
   flex-shrink:0 !important;
}
#consent-banner .switch input{
   position:absolute !important;
   inset:0 !important;
   opacity:0 !important;
   cursor:pointer !important;
   z-index:2 !important;
   width:100% !important;
   height:100% !important;
   margin:0 !important;
   padding:0 !important;
   border:0 !important;
   pointer-events:auto !important;
}
#consent-banner .slider{
   position:absolute !important;
   inset:0 !important;
   background:#cfd4da; /* wird unten gezielt ueberschrieben */
   border-radius:999px;
   transition:background .2s ease, box-shadow .2s ease;
   box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
   pointer-events:none !important;
}
/* AUS: Track in neutralem Grau */
#consent-banner .switch input:not(:checked) + .slider{
   background: var(--consent-gray) !important;
}
/* Weißer Knopf */
#consent-banner .slider::before{
   content:"";
   position:absolute;
   left:2px;
   top:2px;
   width:22px;
   height:22px;
   border-radius:50%;
   background:#fff;
   box-shadow:0 1px 2px rgba(0,0,0,.25);
   transition:transform .2s ease;
   z-index:2;
}
/* Symbol im Knopf (X/✓) */
#consent-banner .slider::after{
   content:"\2715"; /* X */
   position:absolute;
   left:2px;
   top:2px;
   width:22px;
   height:22px;
   display:flex;
   align-items:center;
   justify-content:center;
   font-size:14px;
   font-weight:700;
   font-family:"Segoe UI Symbol","Apple Color Emoji","Noto Color Emoji",system-ui,sans-serif;
   color:#6c757d; /* Grau im AUS-Zustand */
   pointer-events:none;
   transition:transform .2s ease, color .2s ease, content .2s ease;
   z-index:3;
}
/* EIN: Track gruen, Knopf nach rechts, ✓ in Gruen */
#consent-banner .switch input:checked + .slider{
   background: var(--consent-green) !important;
}
#consent-banner .switch input:checked + .slider::before{
   transform:translateX(22px);
}
#consent-banner .switch input:checked + .slider::after{
   transform:translateX(22px);
   content:"\2713"; /* ✓ */
   color:#1e7e34;
}
/* Tastatur-Fokus */
#consent-banner .switch input:focus + .slider{
   outline:2px solid var(--consent-focus);
   outline-offset:2px;
}
/* Buttons & Linkleiste */
#consent-banner .actions{
   margin-top:10px;
   display:flex;
   justify-content:space-between;
   align-items:center;
   flex-wrap:wrap;
   gap:8px;
}
#consent-banner .actions .btns{
   display:flex;
   gap:8px;
   flex-wrap:wrap;
}
#consent-banner .actions .links{
   display:flex;
   gap:16px;
   font-size:13px;
}
#consent-banner .actions .links a{
   color:#007bff;
   text-decoration:none;
}
/* Gemeinsamer Button-Look für alle drei Buttons */
#consent-accept-all,
#consent-decline-all,
#consent-save{
   appearance:none;
   -webkit-appearance:none;
   border:none;
   border-radius:6px;
   padding:6px 16px;
   font-weight:600;
   color:#fff;
   box-shadow:0 2px 4px rgba(0,0,0,.2);
   transition:background .2s ease, transform .1s ease, box-shadow .2s ease;
   cursor:pointer;
}
#consent-accept-all:hover,
#consent-decline-all:hover,
#consent-save:hover{
   transform:scale(1.05);
}
#consent-accept-all:focus-visible,
#consent-decline-all:focus-visible,
#consent-save:focus-visible{
   outline:2px solid var(--consent-focus);
   outline-offset:2px;
}
/* Individuelle Farben */
#consent-save{
   background: var(--consent-blue) !important;     /* Speichern = Blau */
   margin-left:12px !important;
}
#consent-save:hover{
   background: var(--consent-blue-d) !important;
}

#consent-accept-all{
   background: var(--consent-green) !important;    /* Alle akzeptieren = Grün (wie Switch EIN) */
}
#consent-accept-all:hover{
   background: var(--consent-green-d) !important;
}

#consent-decline-all{
   background: var(--consent-gray) !important;     /* Alle ablehnen = Grau (wie Switch AUS) */
   color:#fff !important;
}
#consent-decline-all:hover{
   background: var(--consent-gray-d) !important;
}