/*
 * 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;
}

/* Handy und Tablet: Klaro legt den Hinweis unter 1024 px von Kante zu Kante
   an den unteren Rand. Stattdessen eine schwebende Karte mit Abstand zum
   Rand, mittig und höchstens 440 px breit. Die untere Kante hält Abstand zur
   Home-Leiste am iPhone. */
@media (max-width: 1023px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        max-width: 440px !important;
        margin: 0 auto !important;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
        padding: 16px !important;
    }
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
        gap: 12px;
    }
}