/* Modal Basis – kompakter */
.consent-modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:rgba(0,0,0,.55);
  z-index:1001;
  padding:12px; /* etwas weniger Außenabstand */
}
[hidden]{display:none!important}

.consent-dialog{
  background:#fff; color:#1a1a1a;
  width:min(520px, 92vw);      /* schmaler als zuvor */
  max-height:88vh;             /* leicht kleiner */
  overflow:auto;               /* Inhalt scrollt innerhalb */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  word-break:break-word;
  border-radius:10px;          /* etwas kleinerer Radius */
  padding:16px 18px;           /* kompakteres Padding */
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  font-family:"Poppins",Arial,sans-serif;
  font-size:.95rem;            /* minimale Reduktion */
  line-height:1.5;
}

#consent-title{
  margin:0 0 8px;
  font-size:1.2rem;            /* etwas kleiner */
  border-bottom:2px solid #e3d6b4;
  padding-bottom:.3rem;
}

/* Tabs */
.consent-tabs{
  display:flex; gap:6px; flex-wrap:wrap;
  margin:.25rem 0 .8rem;
  border-bottom:1px solid #eee;
}
.consent-tabs .tab{
  background:transparent; border:0;
  padding:7px 9px;               /* kompakter */
  border-radius:6px 6px 0 0;
  cursor:pointer; font-weight:600;
  transition:background .2s ease, color .2s ease;
  font-size:.95rem;
}
.consent-tabs .tab:hover{ background:#f6f6f6 }
.consent-tabs .tab.is-active{
  background:#e3d6b4; color:#1a1a1a; /* CI-Farbe für aktiven Tab */
}
.tab-panel{ margin-top:.15rem }
.tab-panel[hidden]{display:none!important}
.tab-panel.is-active{ padding-bottom:6px } /* Luft über Buttons */

/* Text */
.lead{ margin:.35rem 0 .9rem; line-height:1.55 }
.muted{ color:#555 }

/* Switch-Liste */
.switch-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px;        /* engeres Grid */
}
.switch-row{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid #eee; border-radius:8px; /* kompakter */
  padding:8px 10px;                         /* kompakter */
}
.switch-row small{ color:#555; font-size:.85rem }

/* Switch (custom) – Standard: schwarz, aktiv: gold */
/* Notwendig wird unten separat auf grau gesetzt */
.switch{ position:relative; display:inline-block; width:44px; height:24px } /* etwas kleiner */
.switch input{ opacity:0; width:0; height:0 }
.slider{
  position:absolute; cursor:pointer; inset:0;
  background:#000;                 /* Standard: schwarz für optionale Kategorien */
  border-radius:24px; transition:.2s;
}
.slider:before{
  content:""; position:absolute; height:18px; width:18px;
  left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s
}
/* Aktiv: Gold wie Buttons */
input:checked + .slider{ background:#e3d6b4 }
input:checked + .slider:before{ transform:translateX(20px) }

/* Disabled-Style generisch (falls mal weitere disabled sind) */
input:disabled + .slider{ background:#bdbdbd; cursor:not-allowed }

/* „Notwendig“: immer grau (disabled) + Schieber rechts fixiert */
#consent-necessary:disabled + .slider{ background:#bdbdbd !important }
#consent-necessary:disabled + .slider:before{ transform:translateX(20px) }

/* Buttons – kompakter */
.consent-actions{
  display:flex; gap:8px; justify-content:flex-end; margin-top:12px
}
.consent-actions button{
  background:#e3d6b4; color:#1a1a1a; border:0;
  padding:7px 12px;              /* kleiner */
  border-radius:5px; cursor:pointer; font-weight:600;
  font-size:.9rem;               /* kleiner */
  transition:transform .12s ease, opacity .12s ease
}
.consent-actions button:hover{ opacity:.9; transform:translateY(-1px) }
.consent-actions .ghost{ background:transparent; color:#333; border:1px solid #ccc }
.details-list{ margin:.35rem 0 0 .9rem }

/* Fokus-Style (A11y) */
.consent-tabs .tab:focus-visible,
.consent-actions button:focus-visible,
.switch input:focus-visible + .slider{
  outline:3px solid #e3d6b4; outline-offset:2px; border-radius:6px
}

/* Responsive Tweaks */
@media (max-width:560px){
  .consent-actions{ flex-direction:column; align-items:stretch; gap:8px }
  .consent-actions button{ width:100% }
  .switch-row{ flex-direction:column; align-items:flex-start; gap:6px }
}
@media (max-width:400px){
  #consent-title{ font-size:1.1rem }
  .lead{ font-size:.92rem }
  .consent-tabs .tab{ font-size:.9rem; padding:6px 8px }
}

/* Optional Dark Theme (einfach class="consent-dialog dark" setzen) */
.consent-dialog.dark{ background:#1a1a1a; color:#f2f2f2 }
.consent-dialog.dark #consent-title{ border-bottom-color:#e3d6b4; color:#fff }
.consent-dialog.dark .tab.is-active{ background:#e3d6b4; color:#1a1a1a }
.consent-dialog.dark .switch-row{ border-color:#333 }
.consent-dialog.dark .switch-row small{ color:#bbb }
.consent-dialog.dark .consent-actions button{ background:#e3d6b4; color:#1a1a1a }
.consent-dialog.dark .consent-actions .ghost{ border-color:#666; color:#ddd }