/* ==========================================================================
   Klaro – Design für www.dvb-t2hd.de
   Wird NACH klaro.min.css eingebunden. Farben kommen zusätzlich aus
   klaroConfig.styling (javascript/klaro-config.js).

   Website-Vorgaben:  Arial | Grün #99cc00 | Text #333 / #444 |
                      Footer #222 / #111 | Überschriften in Versalien mit „// “
   Hinweis Barrierefreiheit: Weiß auf #99cc00 hat zu wenig Kontrast (ca. 2:1),
   daher dunkle Schrift auf grünen Buttons und dunkleres Grün (#5a7d00) für
   Links auf weißem Grund.
   ========================================================================== */

.klaro {
    --dvb-green: #99cc00;
    --dvb-green-hover: #88b600;
    --dvb-green-text: #5a7d00;   /* Linkfarbe auf Weiß, Kontrast > 4.5:1 */
    --dvb-dark: #222222;
    --dvb-darker: #111111;
    --dvb-text: #444444;
    --dvb-head: #333333;
    font-family: Arial, Helvetica, sans-serif;
}

/* ---------- Grundlagen ---------------------------------------------------- */

.klaro .cookie-notice,
.klaro .cookie-modal {
    color: var(--dvb-text);
}

.klaro .cookie-notice p,
.klaro .cookie-modal p {
    color: var(--dvb-text);
    line-height: 1.5;
}

.klaro .cookie-notice a,
.klaro .cookie-modal a {
    color: var(--dvb-green-text) !important;
    text-decoration: underline;
}

.klaro .cookie-notice a:hover,
.klaro .cookie-modal a:hover {
    color: var(--dvb-head) !important;
}

/* Überschriften wie auf der Website: Versalien + grünes „// “ */
.klaro .cookie-notice h2,
.klaro .cookie-modal .cm-header h1.title {
    margin: 0 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--dvb-head);
}

.klaro .cookie-notice h2::before,
.klaro .cookie-modal .cm-header h1.title::before {
    content: "// ";
    color: var(--dvb-green);
}

/* ---------- Buttons ------------------------------------------------------- */

.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn {
    margin: 0 8px 0 0;
    padding: 11px 20px;
    border: 2px solid transparent;
    border-radius: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

/* Primär: „Alle akzeptieren“ – Website-Grün */
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success.cm-btn-accept-all,
.klaro .cookie-notice .cm-btn.cm-btn-success.cm-btn-accept-all {
    background-color: var(--dvb-green);
    border-color: var(--dvb-green);
    color: var(--dvb-darker);
}

.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all:hover {
    background-color: var(--dvb-green-hover);
    border-color: var(--dvb-green-hover);
}

/* „Ablehnen“ – gleich groß und gleich gut sichtbar (Footer-Dunkelgrau) */
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-danger {
    background-color: var(--dvb-dark);
    border-color: var(--dvb-dark);
    color: #ffffff;
}

.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover {
    background-color: #000000;
    border-color: #000000;
}

/* „Auswahl speichern“ – Rahmen-Button */
.klaro .cookie-modal .cm-btn.cm-btn-accept,
.klaro .cookie-modal .cm-btn.cm-btn-info.cm-btn-accept {
    background-color: #ffffff;
    border-color: var(--dvb-dark);
    color: var(--dvb-dark);
}

.klaro .cookie-modal .cm-btn.cm-btn-accept:hover {
    background-color: #f2f2f2;
}

.klaro .cm-btn:focus-visible,
.klaro .cm-link:focus-visible,
.klaro .cookie-modal .hide:focus-visible,
.klaro .cm-list-input:focus-visible + .cm-list-label .slider {
    outline: 3px solid var(--dvb-green);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- Hinweis-Banner (unten, volle Breite) -------------------------- */

.klaro .cookie-notice:not(.cookie-modal-notice) {
    background-color: #ffffff;
    border-top: 5px solid var(--dvb-green);
    border-radius: 0;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .25);
}

@media (min-width: 1024px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100%;
        max-width: none;
    }
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 30px 22px;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    margin: 0 0 16px;
    font-size: 14px;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
    font-size: 14px;
    font-weight: 700;
    padding: 0;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn {
    margin: 0;
    min-width: 160px;
}

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

@media (max-width: 600px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
        padding: 16px 16px 18px;
    }
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
        flex-direction: column;
    }
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn {
        width: 100%;
    }
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
        text-align: center;
    }
}

/* ---------- Einstellungs-Dialog ------------------------------------------ */

.klaro .cookie-modal .cm-bg {
    background: rgba(17, 17, 17, .65);
}

.klaro .cookie-modal .cm-modal.cm-klaro {
    background-color: #ffffff;
    color: var(--dvb-text);
    border-radius: 0;
    border-top: 5px solid var(--dvb-green);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}

@media (min-width: 660px) {
    .klaro .cookie-modal .cm-modal.cm-klaro {
        max-width: 720px;
    }
}

.klaro .cookie-modal .cm-modal .cm-header {
    padding: 22px 28px 16px;
    border-bottom: 1px solid #dddddd;
}

.klaro .cookie-modal .cm-modal .cm-header h1.title {
    padding-right: 44px;   /* Platz für das Schließen-Kreuz */
}

.klaro .cookie-modal .cm-modal .cm-header p {
    font-size: 14px;
    margin: 0;
}

/* Schließen-Kreuz */
.klaro .cookie-modal .cm-modal .hide {
    top: 18px;
    right: 18px;
}

.klaro .cookie-modal .cm-modal .hide svg {
    stroke: var(--dvb-head);
}

.klaro .cookie-modal .cm-modal .hide:hover svg {
    stroke: var(--dvb-green);
}

.klaro .cookie-modal .cm-modal .cm-body {
    padding: 8px 28px;
}

/* Kategorien */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose {
    padding: 14px 0 14px 66px;
    border-bottom: 1px solid #eeeeee;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose:last-child {
    border-bottom: 0;
}

.klaro .cookie-modal .cm-list-title,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-list-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dvb-head);
}

.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p {
    color: var(--dvb-text);
    font-size: 13px;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required {
    color: #666666;
    font-size: 12px;
    padding-left: .4em;
}

/* „Alle Dienste“-Schalter oben */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose.cm-toggle-all {
    border-top: 0;
    border-bottom: 2px solid var(--dvb-green);
    padding-top: 10px;
}

/* Aufklappbare Dienste je Kategorie */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-caret a {
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-content.expanded {
    margin-top: 10px;
    padding: 4px 14px;
    background: #f5f5f5;
    border-left: 3px solid var(--dvb-green);
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service {
    padding: 10px 0 10px 60px;
    border-bottom: 1px solid #e3e3e3;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service:last-child {
    border-bottom: 0;
}

/* Schalter: eckig wie die Website */
.klaro .cookie-modal .cm-list-label .slider,
.klaro .cookie-modal .cm-list-label .slider.round {
    border-radius: 0;
    box-shadow: inset 0 0 0 1px #c8c8c8;
}

.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .cookie-modal .cm-list-label .slider.round::before {
    border-radius: 0;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
    background-color: var(--dvb-green);
    box-shadow: none;
}

.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider,
.klaro .cookie-modal .cm-list-input.only-required + .cm-list-label .slider {
    background-color: #b8dc4d;
    opacity: 1;
}

/* Footer des Dialogs */
.klaro .cookie-modal .cm-modal .cm-footer {
    padding: 16px 28px 20px;
    border-top: 1px solid #dddddd;
    background: #f7f7f7;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
    margin: 0;
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn-accept-all {
    margin-left: auto;
}

@media (max-width: 600px) {
    .klaro .cookie-modal .cm-modal .cm-header,
    .klaro .cookie-modal .cm-modal .cm-body,
    .klaro .cookie-modal .cm-modal .cm-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
    .klaro .cookie-modal .cm-modal .cm-footer-buttons {
        flex-direction: column-reverse;
    }
    .klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
        width: 100%;
        margin-left: 0;
    }
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
    display: none;
}

/* Globale h1-/button-Regeln aus global.css im Klaro-Modal neutralisieren */
.klaro .cookie-modal .cm-modal .cm-header h1.title {
  position: static;
  top: auto;
  left: auto;
  background: none;
  padding: 0 44px 0 0;
  color: var(--dvb-head);
}

.klaro .cookie-modal .cm-modal .hide {
  width: auto;
  min-height: 0;
  left: auto;
  padding: 4px;
  line-height: 0;
}