/*
 * Klaro Consent-Banner + Einstellungs-Modal im mainwerk-Design:
 * weiße Karte mittig, Emerald-Akzent (--accent), abgerundete Ecken, dunkle Sekundär-Buttons.
 */
body .klaro {
  font-family: inherit;
  --green1: #10B981; --green2: #0A0A0A; --blue1: #0A0A0A; --dark2: #0A0A0A;
  --button-text-color: #FFFFFF; --border-radius: 12px;
  --mw-accent: #10B981; --mw-dark: #0A0A0A; --mw-white: #FFFFFF; --mw-muted: rgba(10,10,10,.68);
}

/* abgedunkelter Hintergrund hinter dem zentrierten Banner */
body .klaro:has(.cookie-notice:not(.cookie-modal-notice))::before {
  content: ''; position: fixed; inset: 0; z-index: 1599; background: rgba(10,10,10,.5);
  animation: mw-consent-fade .3s ease both;
}
@keyframes mw-consent-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mw-consent-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
body .klaro .cookie-notice:focus, body .klaro .cookie-modal .cm-modal:focus { outline: none; }
body .klaro .cm-btn:focus-visible, body .klaro a:focus-visible { outline: 2px solid var(--mw-accent); outline-offset: 3px; }

/* ---- Banner ---- */
body .klaro .cookie-notice:not(.cookie-modal-notice) {
  position: fixed; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%);
  width: calc(100% - 40px); max-width: 580px; max-height: calc(100vh - 40px); overflow-y: auto;
  z-index: 1600; background: var(--mw-white); color: var(--mw-dark);
  border-radius: 18px; border: 1px solid rgba(10,10,10,.06);
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
  animation: mw-consent-in .4s cubic-bezier(.2,.8,.2,1) both;
}
body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { position: relative; padding: 2.1rem 2.25rem 1.9rem; margin: 0; }
/* Impressum-Link unten rechts, neben "Einstellungen bearbeiten" (gleicher Stil) */
body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p a.cn-imprint {
  position: absolute; right: 2.25rem; bottom: 1.9rem; margin: 0 !important;
  font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mw-dark) !important; text-decoration: none !important;
  border-bottom: 2px solid var(--mw-accent); padding-bottom: 2px;
}
body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p a.cn-imprint:hover { color: var(--mw-accent) !important; }
body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body h2 {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; color: var(--mw-dark);
  margin: 0 0 .7rem; display: flex; align-items: center; gap: .65rem;
}
body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body h2::before {
  content: ''; width: 42px; height: 42px; flex-shrink: 0;
  background: url('/assets/cookie.svg') center/contain no-repeat;
}
body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  font-size: .93rem; line-height: 1.65; color: var(--mw-muted); margin: 0 0 1.3rem;
}
body .klaro .cookie-notice a, body .klaro .cookie-modal a {
  color: var(--mw-accent); text-decoration: underline; text-underline-offset: 2px;
}
body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-ok {
  display: flex !important; flex-direction: column-reverse !important; align-items: stretch !important;
  gap: .7rem; margin: 0 !important;
}
body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons { display: flex !important; gap: .6rem; margin: 0 !important; width: 100%; }
body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-buttons .cm-btn { flex: 1 1 0; }
body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more {
  display: inline-block !important; width: auto !important; align-self: flex-start !important; margin: 0 !important;
  color: var(--mw-dark) !important; font-weight: 600; font-size: .82rem; letter-spacing: .02em;
  text-decoration: none !important; border-bottom: 2px solid var(--mw-accent); padding-bottom: 2px;
}
body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-learn-more:hover { color: var(--mw-accent) !important; }

/* ---- Buttons (Banner + Modal) ---- */
body .klaro .cm-btn {
  white-space: nowrap; border-radius: 10px !important; margin: 0 !important; padding: .8rem 1.1rem !important;
  cursor: pointer; line-height: 1.2; font-family: inherit; font-size: .9rem; font-weight: 700; letter-spacing: .01em;
  border: 0 !important; transition: background .2s, color .2s, transform .1s;
}
body .klaro .cm-btn:active { transform: translateY(1px); }
/* primär: Alle akzeptieren */
body .klaro .cm-btn.cm-btn-success:not(.cm-btn-info), body .klaro .cm-btn.cm-btn-accept-all {
  background: var(--mw-dark) !important; color: var(--mw-white) !important;
}
body .klaro .cm-btn.cm-btn-success:not(.cm-btn-info):hover, body .klaro .cm-btn.cm-btn-accept-all:hover { background: var(--mw-accent) !important; }
/* sekundär: Auswahl speichern */
body .klaro .cm-btn.cm-btn-info, body .klaro .cm-btn.cm-btn-accept {
  background: var(--mw-accent) !important; color: var(--mw-white) !important;
}
body .klaro .cm-btn.cm-btn-info:hover, body .klaro .cm-btn.cm-btn-accept:hover { background: var(--mw-dark) !important; }
/* tertiär: Nur notwendige */
body .klaro .cm-btn.cm-btn-danger, body .klaro .cm-btn.cn-decline, body .klaro .cm-btn.cm-btn-decline {
  background: #F2F4F6 !important; color: var(--mw-dark) !important;
}
body .klaro .cm-btn.cm-btn-danger:hover, body .klaro .cm-btn.cn-decline:hover, body .klaro .cm-btn.cm-btn-decline:hover {
  background: var(--mw-dark) !important; color: var(--mw-white) !important;
}

/* ---- Einstellungs-Modal ---- */
body .klaro .cookie-modal .cm-bg { background: rgba(10,10,10,.55); }
body .klaro .cookie-modal .cm-modal.cm-klaro {
  background: var(--mw-white); color: var(--mw-dark); border-radius: 18px; border: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
}
body .klaro .cookie-modal .cm-header { padding: 1.6rem 1.8rem 1.1rem; border-bottom: 1px solid rgba(10,10,10,.08); }
body .klaro .cookie-modal .cm-header h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: var(--mw-dark); margin: 0 0 .4rem; }
body .klaro .cookie-modal .cm-header p, body .klaro .cookie-modal .cm-body p, body .klaro .cookie-modal .cm-list-description {
  color: var(--mw-muted); font-size: .92rem; line-height: 1.6;
}
body .klaro .cookie-modal .cm-body { padding: 1rem 1.8rem; }
body .klaro .cookie-modal .cm-list-title, body .klaro .cookie-modal .cm-purpose .cm-list-title { color: var(--mw-dark); font-weight: 700; }
body .klaro .cookie-modal .cm-required { color: var(--mw-accent); }
body .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider { background-color: var(--mw-accent); }
body .klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider { background-color: rgba(16,185,129,.45); }
body .klaro .cookie-modal .cm-footer { padding: 1.1rem 1.8rem 1.5rem; border-top: 1px solid rgba(10,10,10,.08); }
body .klaro .cookie-modal .cm-footer-buttons { display: flex !important; flex-wrap: nowrap !important; gap: .6rem; }
body .klaro .cookie-modal .cm-footer-buttons .cm-btn { flex: 1 1 auto; }
body .klaro .cookie-modal .cm-powered-by, body .klaro .cookie-notice .cm-powered-by { display: none; }
body .klaro .cookie-modal .hide:focus { outline: none; }
body .klaro .cookie-modal .hide:focus-visible { outline: 2px solid var(--mw-accent); outline-offset: 3px; }

/* ---- Mobil: Banner-Titel in einer Zeile ---- */
@media (max-width: 640px) {
  body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { padding: 1.6rem 1.3rem 1.4rem; }
  body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body h2 {
    white-space: nowrap; font-size: 4.1vw; gap: .45rem; margin-bottom: .8rem;
  }
  body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body h2::before { width: 26px; height: 26px; }
  body .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p a.cn-imprint { right: 1.3rem; bottom: 1.4rem; }
}