/* ===================================================================
   CONSENT — Korrekturen am Cookie-Banner (Klaro).

   Wird NACH klaro-custom.css geladen und lässt diese Datei unberührt.
   Nach einem Review gehören diese Regeln direkt in klaro-custom.css,
   dann kann diese Datei entfallen.

   Behoben werden zwei Dinge, die auf Mobil zusammen auftreten:

   1. Der Banner stapelte Text, Link und beide Buttons untereinander
      und wurde dadurch ~450px hoch — mehr als die Hälfte eines
      iPhone-Bildschirms. Der Haupt-CTA der Seite lag darunter.

   2. Banner und Sticky-Leiste (Call/WhatsApp/Book) haben beide
      z-index 9999 und bottom 0 — zwei fixierte Leisten übereinander.
      Welche oben lag, entschied die Ladereihenfolge.

      Den Banner per CSS höher zu setzen funktioniert nicht:
      klaro-config.js schreibt alle 200 ms `bottom: 0 !important`
      direkt ins style-Attribut, und das schlägt jedes Stylesheet.
      Deshalb ruht stattdessen die Sticky-Leiste, solange der
      Consent offen ist — site-enhance.js setzt dafür .consent-open.
   =================================================================== */

/* Solange der Cookie-Hinweis sichtbar ist, gibt es nur ihn. */
.consent-open .gnav-sticky-cta { display: none !important; }
.consent-open body { padding-bottom: 0; }

@media (max-width: 600px) {

    #klaro .cookie-notice,
    .cookie-notice {
        padding: 14px 16px !important;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .cookie-notice .cn-body {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        text-align: left !important;   /* zentrierter Fließtext liest sich schlechter */
    }

    .cookie-notice .cn-body p {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    /* Buttons nebeneinander statt gestapelt — halbiert die Höhe und
       hält beide Optionen gleich prominent (DSGVO-konform). */
    .cookie-notice .cn-ok {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .cookie-notice .cn-buttons {
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .cookie-notice button.cm-btn {
        flex: 1 1 0 !important;
        width: auto !important;
        min-height: 44px !important;   /* Touch-Ziel */
        padding: 10px 8px !important;
        font-size: 14px !important;
    }

    .cookie-notice a.cn-learn-more {
        align-self: flex-start !important;
        font-size: 13px !important;
    }
}

/* Der Banner ist ein Dialog über dem Inhalt — er gehört über die
   Sticky-Leiste, nicht auf dieselbe Ebene. */
#klaro { z-index: 10000 !important; }