/*
 * GastroTotal-Anpassungen für Klaro! – gemeinsam für Shop und WordPress.
 * Nach klaro.min.css laden. Alle Regeln sind auf .klaro.gt-klaro gescoped und wirken
 * nicht auf die Seite. Umgekehrt werden Theme-/Bootstrap-Styles der Seiten, die in das
 * Banner hineinwirken könnten (Links, Absätze, Buttons, Überschriften), neutralisiert.
 */

.klaro.gt-klaro {
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
}

/* Über Sticky-Header (z-index 9999) */
.klaro.gt-klaro .cookie-notice:not(.cookie-modal-notice) {
    z-index: 10000;
    box-shadow: 0 10px 40px rgba(15, 25, 41, 0.35);
}

.klaro.gt-klaro .cookie-modal {
    z-index: 10001;
}

.klaro.gt-klaro .cookie-modal .cm-bg {
    background: rgba(15, 25, 41, 0.6);
}

/* Seiten-Styles neutralisieren */
.klaro.gt-klaro p,
.klaro.gt-klaro ul,
.klaro.gt-klaro li {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.klaro.gt-klaro h1,
.klaro.gt-klaro h2,
.klaro.gt-klaro .cm-header .title {
    font-family: var(--title-font-family, inherit);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    text-transform: none;
    letter-spacing: normal;
    margin: 0 0 0.5em;
}

.klaro.gt-klaro a,
.klaro.gt-klaro a:visited {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.klaro.gt-klaro a:hover,
.klaro.gt-klaro a:focus-visible {
    color: #e84e0f;
}

.klaro.gt-klaro .cn-body {
    padding: 20px 22px;
}

.klaro.gt-klaro .cn-body p {
    margin: 0 0 1em;
    color: rgba(255, 255, 255, 0.85);
}

/* Buttons wie im Shop: Radius 4px, Montserrat 600 */
.klaro.gt-klaro .cm-btn {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: none;
    text-transform: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.klaro.gt-klaro .cm-btn.cm-btn-success,
.klaro.gt-klaro .cm-btn.cm-btn-accept-all {
    background-color: #e84e0f;
    border-color: #e84e0f;
    color: #ffffff;
}

.klaro.gt-klaro .cm-btn.cm-btn-success:hover,
.klaro.gt-klaro .cm-btn.cm-btn-accept-all:hover {
    background-color: #c73d0c;
    border-color: #c73d0c;
}

/* Sekundär: "Nur notwendige", "Auswahl speichern", "Einstellungen" – Outline */
.klaro.gt-klaro .cm-btn.cm-btn-danger,
.klaro.gt-klaro .cm-btn.cm-btn-decline,
.klaro.gt-klaro .cm-btn.cm-btn-info,
.klaro.gt-klaro .cm-btn.cm-btn-accept {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.klaro.gt-klaro .cm-btn.cm-btn-danger:hover,
.klaro.gt-klaro .cm-btn.cm-btn-decline:hover,
.klaro.gt-klaro .cm-btn.cm-btn-info:hover,
.klaro.gt-klaro .cm-btn.cm-btn-accept:hover {
    border-color: #e84e0f;
    color: #ffffff;
}

.klaro.gt-klaro .cm-btn:focus-visible {
    outline: 2px solid #e84e0f;
    outline-offset: 2px;
}

.klaro.gt-klaro .cn-ok {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.klaro.gt-klaro .cn-ok .cm-btn {
    margin: 0;
}

.klaro.gt-klaro .cn-learn-more {
    margin-right: auto;
}

/* Modal */
.klaro.gt-klaro .cookie-modal .cm-modal.cm-klaro {
    border-radius: 4px;
}

.klaro.gt-klaro .cookie-modal .cm-modal .cm-header,
.klaro.gt-klaro .cookie-modal .cm-modal .cm-body,
.klaro.gt-klaro .cookie-modal .cm-modal .cm-footer {
    padding: 20px 24px;
}

.klaro.gt-klaro .cookie-modal .cm-modal .cm-footer-buttons {
    gap: 8px;
}

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

.klaro.gt-klaro .cookie-modal .hide {
    background: transparent;
    border: 0;
    color: #ffffff;
}

.klaro.gt-klaro input[type="checkbox"] {
    /* Checkbox bleibt unsichtbar (Klaro nutzt .slider), Theme-Styles dürfen sie nicht einblenden */
    appearance: none;
}

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

    .klaro.gt-klaro .cn-ok .cm-btn {
        flex: 1 1 100%;
        text-align: center;
    }

    .klaro.gt-klaro .cn-learn-more {
        margin-right: 0;
        order: 3;
    }
}