/* Klaro im Look der Seite. Klaro liest seine Farben aus diesen Variablen, der Rest überschreibt klaro.css. */
.klaro{
  --font-family:inherit;--title-font-family:inherit;--font-size:calc(15*var(--u));
  --dark1:var(--ink);--dark2:#2A302D;--dark3:#3A413D;
  --light1:var(--paper);--light2:#AEB4AF;--light3:#AEB4AF;
  --green1:var(--green);--green2:var(--green);--green3:var(--deep);
  --blue1:var(--green);--blue2:var(--green);--red1:transparent;
  --white1:var(--paper);--white2:var(--paper2);--white3:var(--paper);
  --button-text-color:var(--ink);--border-radius:0;--border-width:1.5px;
  --box-shadow-color:rgba(16,19,18,.25);
  --notice-max-width:calc(460*var(--u));--notice-left:var(--pad);--notice-bottom:calc(24*var(--u));--notice-right:auto;
}
.klaro .cookie-notice:not(.cookie-modal-notice){border:1.5px solid #3A413D;box-shadow:none}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body{padding:calc(24*var(--u))}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p{line-height:1.5;margin:0 0 calc(18*var(--u))}
.klaro .cookie-notice .cn-body .cn-ok{flex-wrap:wrap;gap:calc(12*var(--u))}
.klaro .cookie-notice .cn-body .cn-buttons{display:flex;gap:calc(10*var(--u))}
.klaro .cookie-notice .cn-body .cn-buttons button.cm-btn{margin:0}

.klaro .cookie-modal .cm-btn,.klaro .cookie-notice .cm-btn{
  font-weight:600;padding:calc(11*var(--u)) calc(18*var(--u));margin-right:calc(8*var(--u));
  border:1.5px solid var(--green);background:var(--green);color:var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)
}
.klaro .cookie-modal .cm-btn:hover,.klaro .cookie-notice .cm-btn:hover{background:var(--paper);border-color:var(--paper)}
/* Ablehnen gleich groß und gleich gut lesbar wie Annehmen */
.klaro .cookie-modal .cm-btn.cm-btn-danger,.klaro .cookie-notice .cm-btn.cm-btn-danger{background:transparent;border-color:var(--paper);color:var(--paper)}
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,.klaro .cookie-notice .cm-btn.cm-btn-danger:hover{background:var(--paper);color:var(--ink)}
.klaro .cookie-modal .cm-btn.cm-btn-accept,.klaro .cookie-notice .cm-btn.cm-btn-accept{background:transparent;border-color:var(--green);color:var(--paper)}
.klaro .cookie-modal .cm-btn.cm-btn-accept:hover{background:var(--green);color:var(--ink)}
.klaro .cookie-modal a,.klaro .cookie-notice a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.klaro .cookie-modal .cm-list-description{color:#AEB4AF}
.klaro .cookie-notice .cn-learn-more{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.klaro .cm-btn:focus-visible,.klaro a:focus-visible,.klaro input:focus-visible+.cm-list-label .slider{outline:2px solid var(--green);outline-offset:2px}

.klaro .cookie-modal .cm-modal.cm-klaro{border:1.5px solid #3A413D;box-shadow:none}
.klaro .cookie-modal .cm-modal .cm-header,.klaro .cookie-modal .cm-modal .cm-body,.klaro .cookie-modal .cm-modal .cm-footer{padding:calc(24*var(--u))}
.klaro .cookie-modal .cm-modal .cm-header h1{font-size:calc(22*var(--u));font-weight:700}
.klaro .cookie-modal .cm-modal .cm-footer-buttons{gap:calc(10*var(--u));flex-wrap:wrap}
.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn{margin:0}
.klaro .cookie-modal .cm-list-input:checked+.cm-list-label .slider{background-color:var(--green)}

@media (max-width:760px){
  .klaro{--notice-left:16px;--notice-right:16px;--notice-bottom:16px;--font-size:15px}
  .klaro .cookie-notice:not(.cookie-modal-notice){max-width:none}
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cn-buttons{display:flex;width:100%}
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cn-buttons button.cm-btn{flex:1;margin:0}
}