/* Klaro im PDL-Design */
.klaro{
  --font-family:'IBM Plex Sans',system-ui,sans-serif;
  --title-font-family:'Space Grotesk',system-ui,sans-serif;
  --font-size:14px;
  --border-radius:10px;
  --dark1:#033136;
  --dark2:#2A5857;
  --dark3:#0B3233;
  --light1:#F4F1EC;
  --light2:#C5D6D2;
  --light3:#8FB5AF;
  --white2:#2A5857;
  --white3:#F4F1EC;
  --green1:#FF6B4A;
  --green2:#FF6B4A;
  --green3:#F2552F;
  --blue1:#2A5857;
  --blue2:#8FB5AF;
  --button-text-color:#12211F;
  --notice-left:20px;
  --notice-right:auto;
  --notice-bottom:20px;
  --notice-max-width:460px;
  --box-shadow-color:rgba(3,49,54,.35);
}

/* Banner */
.klaro .cookie-notice:not(.cookie-modal-notice){box-shadow:0 18px 40px rgba(3,49,54,.28)}
.klaro .cookie-notice .cn-body{padding:22px 22px 18px!important}
.klaro .cookie-notice .cn-body p{color:#C5D6D2;line-height:1.55;margin:0 0 4px}
.klaro .cookie-notice .cn-body h2,
.klaro .cookie-modal .cm-header h1{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;letter-spacing:-.01em;color:#F4F1EC}
.klaro .cookie-notice .cn-body h2{font-size:18px;margin:0 0 8px}
.klaro .cookie-notice a,
.klaro .cookie-modal a{color:#F4F1EC;text-decoration:underline;text-underline-offset:3px}
.klaro .cookie-notice a:hover,
.klaro .cookie-modal a:hover{color:#FF6B4A}
.klaro .cookie-notice .cn-body .cn-ok{display:flex!important;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-start!important;margin-top:16px!important}
.klaro .cookie-notice .cn-body .cn-ok .cn-buttons{display:contents!important}
.klaro .cookie-notice .cn-body .cn-ok .cn-learn-more{order:1;display:inline-block!important;width:auto!important;flex:0 0 auto;font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:600;font-size:14px;line-height:1.2;padding:11px 16px;margin:0!important;border:1.5px solid;border-radius:6px;text-decoration:none!important;transition:background-color .15s,border-color .15s}

/* Buttons */
.klaro .cm-btn{font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:600;font-size:14px;line-height:1.2;padding:11px 16px!important;margin:0!important;border-radius:6px!important;border:1.5px solid transparent!important;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.klaro .cm-btn,
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all,
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cm-btn-accept,
.klaro .cookie-notice .cn-learn-more{background:#FF6B4A!important;color:#12211F!important;border-color:#FF6B4A!important}
.klaro .cm-btn:hover,
.klaro .cookie-notice .cn-learn-more:hover{background:#F2552F!important;border-color:#F2552F!important;color:#12211F!important}
.klaro .cm-btn:focus-visible,
.klaro a:focus-visible,
.klaro input:focus-visible + .cm-list-label .slider{outline:2px solid #FF6B4A;outline-offset:2px}

/* Einstellungen (Modal) */
.klaro .cookie-modal .cm-modal.cm-klaro{border-radius:10px;box-shadow:0 24px 60px rgba(3,49,54,.4)}
.klaro .cookie-modal .cm-bg{background:rgba(11,50,51,.55)}
.klaro .cookie-modal .cm-header,
.klaro .cookie-modal .cm-body,
.klaro .cookie-modal .cm-footer{border-color:#2A5857!important}
.klaro .cookie-modal .cm-header p,
.klaro .cookie-modal .cm-body p{color:#C5D6D2}
.klaro .cookie-modal .cm-footer-buttons{display:flex;flex-wrap:wrap;gap:10px}
.klaro .cookie-modal .cm-list-title{font-weight:600;color:#F4F1EC}
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider{background-color:#FF6B4A}
.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider{background-color:#8FB5AF;opacity:.6}
.klaro .cookie-modal .cm-close svg,
.klaro .cookie-modal .hide svg{stroke:#F4F1EC}
.klaro .cookie-modal .cm-powered-by{display:none}

@media (max-width:1023px){
  .klaro .cookie-notice:not(.cookie-modal-notice){left:0!important;right:0!important;bottom:0!important;max-width:none!important;border-radius:10px 10px 0 0!important}
}