/* Consent surfaces share the site's editorial typography and neutral palette. */
.klaro {
  --dark1: #f7f7f3;
  --light1: #171916;
  --dark2: #e8eae3;
  --dark3: #565e4f;
  --light2: #d7dcd0;
  --light3: #626b57;
  --white2: #e0e5d8;
  --white3: #c5cbbd;
  --green1: #171916;
  --green2: #30362a;
  --green3: #6f2fa9;
  --blue1: #171916;
  --blue2: #6f2fa9;
  --button-text-color: #171916;
  --border-radius: 16px;
  --font-family: var(--font-body), Arial, sans-serif;
  --title-font-family: var(--font-display), Arial, sans-serif;
  --notice-max-width: 430px;
  --notice-right: 24px;
  --notice-bottom: 24px;
}
.klaro .cookie-modal,
.klaro .cookie-notice { font-family: var(--font-body), Arial, sans-serif; color: #171916; font-size: 13px; line-height: 1.7; }
.klaro .cookie-notice:not(.cookie-modal-notice) {
  background: #f7f7f3;
  border: 1px solid #d2d7cb;
  border-radius: 16px;
  box-shadow: 0 12px 45px rgba(23,25,22,.12);
  overflow: hidden;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { padding: 24px; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body::before {
  content: 'Deine Privatsphäre.';
  display: block;
  font-family: var(--font-display), Arial, sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.04em;
  margin-bottom: 12px;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p { margin: 0; color: #565e4f; line-height: 1.8; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more { flex-basis: 100%; flex-grow: 0; font-size: 12px; font-weight: 600; color: #6f2fa9; text-decoration: underline; text-underline-offset: 4px; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { display: flex; flex-wrap: wrap; width: 100%; gap: 10px; margin: 0; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn { flex: 1; margin: 0; }
.klaro .cookie-modal .cm-btn,
.klaro .cookie-notice .cm-btn {
  background: #f7f7f3;
  color: #171916;
  border: 1px solid #bfc7b4;
  border-radius: 999px;
  padding: 11px 16px;
  min-height: 44px;
  font-family: var(--font-body), Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  box-shadow: none;
  transition: background .2s;
}
.klaro .cookie-modal .cm-btn:hover,
.klaro .cookie-notice .cm-btn:hover { background: #e8eae3; }
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success-var,
.klaro .cookie-notice .cm-btn.cm-btn-info { background: #171916; color: #fff; border-color: #171916; }
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-success-var:hover,
.klaro .cookie-modal .cm-btn.cm-btn-info:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success-var:hover,
.klaro .cookie-notice .cm-btn.cm-btn-info:hover { background: #30362a; }
.klaro .cm-btn:focus-visible,
.klaro a:focus-visible { outline: 2px solid #6f2fa9; outline-offset: 4px; }
.klaro .cookie-modal .cm-bg { background: rgba(23,25,22,.45); backdrop-filter: blur(5px); }
.klaro .cookie-modal .cm-modal.cm-klaro { background: #f7f7f3; border: 1px solid #d2d7cb; border-radius: 20px; box-shadow: 0 24px 80px rgba(23,25,22,.18); max-height: calc(100dvh - 48px); }
.klaro .cookie-modal .cm-modal .cm-header { border-bottom-color: #d2d7cb; padding: 26px 28px 20px; }
.klaro .cookie-modal .cm-modal .cm-header h1 { font-family: var(--font-display), Arial, sans-serif; font-size: 32px; font-weight: 500; letter-spacing: -.04em; }
.klaro .cookie-modal .cm-modal .cm-header p,
.klaro .cookie-modal .cm-modal .cm-body p { color: #565e4f; font-size: 13px; line-height: 1.8; }
.klaro .cookie-modal .cm-modal .cm-body { padding: 24px 28px; }
.klaro .cookie-modal .cm-modal .cm-footer { background: #efefea; border-top-color: #d2d7cb; padding: 20px 28px; }
.klaro .cookie-modal .cm-modal .cm-footer-buttons { gap: 10px; flex-wrap: wrap; }
.klaro .cookie-modal .cm-modal .cm-footer-buttons > div { display: flex; flex-wrap: wrap; gap: 10px; }
.klaro .cookie-modal .cm-modal .cm-header .hide { border-radius: 50%; background: #e8eae3; }
.klaro .cookie-modal .cm-modal .cm-body a { color: #6f2fa9; text-decoration: underline; text-underline-offset: 3px; }
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider { background: #171916; }
.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider { background: #647a46; }
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a { color: #626b57; }
@media (max-width: 1023px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) { width: calc(100% - 24px); max-width: 430px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (max-width: 659px) {
  .klaro .cookie-modal .cm-modal.cm-klaro { width: calc(100% - 24px); left: 12px; }
}
@media (max-width: 540px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { padding: 20px; }
  .klaro .cookie-modal .cm-modal.cm-klaro { max-height: calc(100dvh - 24px); }
  .klaro .cookie-modal .cm-modal .cm-header,
  .klaro .cookie-modal .cm-modal .cm-body,
  .klaro .cookie-modal .cm-modal .cm-footer { padding: 20px; }
  .klaro .cookie-modal .cm-modal .cm-header h1 { font-size: 27px; }
}
