/*
 * eatbase-Theme für Klaro (Cookie-Consent) — bringt den Banner/Modal in den
 * eatbase-Look der Startseite: tiefes Marken-Blau, blaue Aktions-Buttons,
 * weiche Rundungen und Schatten. Wird NACH klaro.min.css geladen und überschreibt
 * deren CSS-Variablen + ein paar kosmetische Details.
 *
 * Alle Farben laufen über die Variablen in .klaro. Bei Pro-Restaurants mit
 * eigener Markenfarbe stellt StorefrontTheme::headStyle() sie im <head> um
 * (custom/mailbranding), deshalb hier keine festen Hex-Werte in den Regeln.
 */
.klaro {
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --title-font-family: var(--font-family);
    --font-size: 14px;

    /* Aktions-/Akzentfarbe (z. B. „Alle akzeptieren") = eatbase-Blau */
    --green1: #299fd1;
    --green2: #217ea6;
    --green3: #58cdff;
    --button-text-color: #ffffff;

    /* Banner-/Modal-Flächen: tiefes eatbase-Blau statt Klaro-Anthrazit */
    --dark1: #16384a;
    --dark2: #1d4a60;
    --dark3: #265f7a;

    /* Helle Elemente/Trennlinien auf dunklem Grund */
    --light1: #e8f4f9;
    --light2: rgba(255, 255, 255, .22);
    --light3: #cfe6f1;
    --white2: #ffffff;
    --white3: #f2f8fb;

    /* „Speichern"/sekundäre Buttons (blau-grau) */
    --blue1: #2a6f90;
    --blue2: #225a76;

    /* Eigene Variablen dieses Themes */
    --eb-klaro-accept-text: #ffffff;
    --eb-klaro-accept-hover: #217ea6;
    --eb-klaro-toggle: #299fd1;
    --eb-klaro-link: #58cdff;

    --border-radius: 12px;
    --box-shadow-color: rgba(0, 0, 0, .35);
}

/* Weichere Rundungen + Schatten für Notice & Modal (Startseiten-Optik) */
.klaro .cookie-notice:not(.cookie-modal-notice) {
    border-radius: 18px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .32) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
}
.klaro .cookie-modal .cm-modal {
    border-radius: 18px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .32) !important;
}

/* Buttons abrunden + etwas Druck */
.klaro .cm-btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .1px;
}
.klaro .cm-btn.cm-btn-success,
.klaro .cookie-notice .cn-buttons .cm-btn-success {
    background: var(--green1) !important;
    border-color: var(--green1) !important;
    color: var(--eb-klaro-accept-text) !important;
}
.klaro .cm-btn.cm-btn-success:hover {
    background: var(--eb-klaro-accept-hover) !important;
    border-color: var(--eb-klaro-accept-hover) !important;
}

/* Toggle-Schalter in der eatbase-Farbe, wenn aktiv */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
.klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
    background-color: var(--eb-klaro-toggle) !important;
}

/* Links im Banner in der Akzentfarbe */
.klaro .cookie-notice a,
.klaro .cookie-modal a {
    color: var(--eb-klaro-link) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Beschreibung unter den Diensten: Klaro nimmt --dark3, das ist auf der
   dunklen Karte kaum lesbar. */
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-notice .cm-list-description {
    color: var(--light3) !important;
}

/* Aufbau des Hinweises: rundum gleicher Innenabstand, „Einstellungen" in
   eigener Zeile, darunter beide Knöpfe gleich breit über die volle Breite.
   Klaro selbst setzt oben 0 Abstand und rechts je Knopf 7 px Außenrand,
   dadurch saß der Inhalt schief in der Karte. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    padding: 20px !important;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    margin: 0 0 12px !important;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div {
    margin: 0 !important;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
    align-self: flex-start;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    display: flex !important;
    width: 100% !important;
    gap: 8px;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn {
    flex: 1 1 0;
    width: auto !important;
    margin: 0 !important;
    padding: 10px 8px !important;
}