/* ============================================================
   PATCH: Buttons aufhübschen + Darkmode sauber
   (lädt NACH deinem bevorzugten Block)
   ============================================================ */

/* ---- Farb-Tokens (Fallbacks, gern auf CI anpassen) ---- */
:root{
  --primary:       var(--primary, #10b981);
  --primary-600:   var(--primary-600, #059669);
  --info:          #2563eb;
  --info-600:      #1d4ed8;

  --bg:            #ffffff;
  --bg-2:          #f6f7f9;
  --bg-3:          #eef1f5;
  --text:          #0f172a;
  --text-subtle:   #334155;
  --muted:         #64748b;
  --border:        #e5e7eb;
}

/* ---- Darkmode Variablen ---- */
html.dark{
  --bg:            #0f1317;
  --bg-2:          #0b0f13;
  --bg-3:          #141a20;
  --text:          #e5ebf2;
  --text-subtle:   #cbd5e1;
  --muted:         #93a1b3;
  --border:        #1e2833;

  --primary:       #10b981;
  --primary-600:   #059669;
  --info:          #3b82f6;
  --info-600:      #2563eb;
}

/* ================= BUTTONS ================= */
.klaro .cm-btn{
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-weight: 800 !important;
  border: 1px solid transparent !important;
  transition: transform .06s ease, filter .18s ease, background .2s ease !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  border-radius: 25px !important;
}
.klaro .cm-btn:active{ transform: translateY(1px); }
.klaro .cm-btn:disabled{ opacity:.55; cursor:not-allowed; }

/* Primary (Alle akzeptieren / grün) */
.klaro .cm-btn-success,
.klaro .cm-btn-accept,
.klaro .cm-btn-accept-all{
  background: linear-gradient(180deg, #0A5A52,  #0A5A52) !important;
  color:#fff !important;
  box-shadow: 0 8px 20px rgba(16,185,129,.25);
}
.klaro .cm-btn-success:hover{ filter:brightness(.98); }

/* Info (Auswahl speichern / blau) */
.klaro .cm-btn-info{
  background: linear-gradient(180deg, var(--info), var(--info-600)) !important;
  color:#fff !important;
  box-shadow: 0 8px 20px rgba(37,99,235,.25);
}

/* Secondary/Neutral (Alle ablehnen) */
.klaro .cm-btn-danger,
.klaro .cm-btn-close{
  background: var(--bg-3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.klaro .cm-btn-danger:hover,
.klaro .cm-btn-close:hover{ background: var(--bg-2) !important; }

/* Footer-Buttons im Grid (dein Layout bleibt) */
.klaro .cm-footer .cm-footer-buttons{
  display:grid !important; grid-template-columns:1fr 1fr 1fr !important; gap:10px !important;
}

/* Link-Button in der Notice ("Einstellungen öffnen") */
.klaro .cookie-notice .cm-link.cn-learn-more{
  display:block; width:100%;
  padding:12px 14px; font-weight:700;
  border-radius:10px; border:1px dashed var(--border);
  background:transparent; color:var(--text) !important;
}
.klaro .cookie-notice .cm-link.cn-learn-more:hover{ background: var(--bg-3); }

/* ================= DARK THEME ================= */
/* Modal & Header/Bodies */
html.dark .klaro .cm-modal.cm-klaro{
  background: var(--bg) !important; color:var(--text) !important; border:1px solid var(--border) !important;
}
html.dark .klaro .cm-modal .cm-header{
  background: linear-gradient(180deg, var(--bg), var(--bg-2)) !important;
  border-bottom: 1px solid var(--border) !important;
}
html.dark .klaro .cm-modal .cm-body{ background: var(--bg) !important; }

/* Cards */
html.dark .klaro .cm-purpose,
html.dark .klaro .cm-service{
  background: var(--bg-2) !important; border-color: var(--border) !important;
}
html.dark .klaro .cm-purpose > .cm-list-label{
  background: var(--bg) !important; border-bottom-color: var(--border) !important;
}

/* Notice */
html.dark .klaro .cookie-notice{
  background: var(--bg) !important; border:1px solid var(--border) !important;
}
html.dark .klaro .cookie-notice .cn-body{
  background: linear-gradient(180deg, var(--bg), var(--bg-2)) !important;
}
html.dark .klaro p,
html.dark .klaro h2,
html.dark .klaro li,
html.dark .klaro span{ color: var(--text-subtle) !important; }
html.dark .klaro .cm-list-title,
html.dark .klaro strong{ color: var(--text) !important; }
html.dark .klaro a{ color: var(--info) !important; }

/* Switch-Kontraste im Darkmode (Track + Knob) */
html.dark .klaro .cm-switch .slider{ background:#344150 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important; }
html.dark .klaro .cm-switch .slider::before{ background:#0b0f13 !important; }
html.dark .klaro .cm-list-input:checked + .cm-list-label .slider{ background: var(--primary) !important; }

/* Cookie-Notice Buttons bei sehr kleinen Screens */
@media (max-width:380px){
  .klaro .cookie-notice .cn-buttons{ display:grid; grid-template-columns:1fr !important; gap:10px; }
}


/* Position */
@media (min-width:1024px){
  #klaro-cookie-notice {
    left: 20px;
  }
}