/* /opt/christianschoch/html/js/klaro-kompakt.css
   Job 1125, Stufe 1 (Vorschau) — kompakte, freundliche Cookie-Karte.
   Additive Datei, wird von KEINER Live-Seite eingebunden (nur von den beiden
   Vorschau-Seiten unter /vorschau-tracking/ und /vorschau-banner-sie/).
   Laedt NACH klaro-custom.css und etwaigem Seiten-CSS (klaro-*.css) — alle Regeln
   hier sind mindestens so spezifisch wie dort UND stehen spaeter im Dokument, damit
   sie bei gleicher Spezifitaet gewinnen. Technik (mustConsent, default, Dienste)
   bleibt unberuehrt, hier wird nur die Optik der Notice-Leiste und des Modals
   angefasst.

   Deckt beide bestehenden Erstkontakt-Formen ab:
   - Notice-Leiste unten (mustConsent:false, z.B. klaro-config.js)
   - Modal als erste Ebene (mustConsent:true, z.B. klaro-config-startseite.js) —
     siehe INVENTAR.md, das ist vorhandenes Klaro-Verhalten, nicht etwas, das diese
     CSS-Datei aendert.
*/

/* ===================== KARTE: GROESSE, POSITION, OPTIK ===================== */

#klaro .cookie-notice:not(.cookie-modal-notice),
#klaro .cookie-modal .cm-modal {
    max-width: 420px !important;
    width: calc(100% - 32px) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px rgba(4, 35, 68, 0.18) !important;
    border: 1px solid #e7e9ee !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Notice: unten links andocken statt unten mittig. */
#klaro .cookie-notice:not(.cookie-modal-notice) {
    left: 24px !important;
    right: auto !important;
    bottom: 24px !important;
    top: auto !important;
    transform: none !important;
    padding: 18px 20px !important;
}

/* Modal: aus der Bildschirmmitte loesen, unten links andocken wie die Notice.
   Klaro zentriert das Modal per position:relative + top:50% + transform:translateY(-50%)
   im fullscreen Overlay — wir ersetzen das durch eine feste Verankerung am Viewport. */
#klaro .cookie-modal .cm-modal {
    position: fixed !important;
    top: auto !important;
    left: 24px !important;
    bottom: 24px !important;
    margin: 0 !important;
    transform: none !important;
    max-height: min(82vh, 560px) !important;
    overflow-y: auto !important;
}

/* Hintergrund hoechstens leicht abgedunkelt (Klaro-Default war rgba(0,0,0,0.5)). */
#klaro .cm-bg {
    background: rgba(4, 35, 68, 0.14) !important;
}

/* ===================== TEXT, KOPF, ABSTAENDE ===================== */

#klaro .cookie-notice .cn-body p,
#klaro .cookie-notice > p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

#klaro .cookie-modal .cm-modal .cm-header {
    padding: 20px 20px 10px !important;
}
#klaro .cookie-modal .cm-modal .cm-header h1,
#klaro .cookie-modal .cm-modal .cm-header .title {
    font-size: 17px !important;
    margin-bottom: 6px !important;
}
#klaro .cookie-modal .cm-modal .cm-header p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
}
#klaro .cookie-modal .cm-modal .cm-body {
    padding: 4px 20px 8px !important;
}
#klaro .cookie-modal .cm-modal .cm-footer {
    padding: 14px 20px 16px !important;
}

/* ===================== DREI GLEICHWERTIGE BUTTONS ===================== */

/* Notice: die Lern-mehr-Verlinkung und die Decline/Accept-Buttons liegen im Markup
   in zwei getrennten Wrappern (.cn-learn-more direkt, .cn-buttons als Gruppe).
   display:contents loest die Gruppe optisch auf, ohne das Markup zu aendern — danach
   regelt 'order' allein die Reihenfolge: Ablehnen, Einstellungen, Akzeptieren. */
#klaro .cookie-notice .cn-ok {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin-top: 14px !important;
}
#klaro .cookie-notice .cn-buttons {
    display: contents !important;
}
#klaro .cookie-notice .cn-decline { order: 1 !important; }
#klaro .cookie-notice .cn-learn-more { order: 2 !important; }
#klaro .cookie-notice .cn-buttons .cm-btn-success { order: 3 !important; }

/* Modal-Footer: Reihenfolge im Markup ist bereits Ablehnen / Auswahl speichern /
   Akzeptieren — hier nur noch untereinander statt in einer Reihe. */
#klaro .cookie-modal .cm-modal .cm-footer,
#klaro .cookie-modal .cm-modal .cm-footer-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* Alle Buttons (Notice + Modal): exakt gleiche Groesse, Schrift, Farbe — keine
   Ampel-Logik (gruen=ja/rot=nein), keine optisch hervorgehobene Option. */
#klaro .cookie-notice .cm-btn,
#klaro .cookie-notice .cn-learn-more,
#klaro .cookie-modal .cm-modal .cm-footer .cm-btn {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 11px 16px !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    color: #042344 !important;
    border: 1.5px solid #042344 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
/* klaro-custom.css hat fuer button.cm-btn.cm-btn-success/-accept/-accept-all eine
   hoehere Spezifitaet (#klaro button.cm-btn.cm-btn-success = 1 ID + 2 Klassen + 1 Typ)
   als die allgemeine Notice-Regel oben (1 ID + 2 Klassen + 0 Typ) und gewinnt sonst den
   blauen Hintergrund zurueck, egal in welcher Reihenfolge die Dateien geladen werden.
   Hier gezielt mit einer dritten Klasse ueberboten, damit auch der Akzeptieren-Button
   in der Notice-Leiste weiss/umrandet bleibt wie Ablehnen und Einstellungen. */
#klaro .cookie-notice button.cm-btn.cm-btn-success,
#klaro .cookie-notice button.cm-btn.cm-btn-accept,
#klaro .cookie-notice button.cm-btn.cm-btn-accept-all,
#klaro .cookie-notice button.cm-btn.cm-btn-danger {
    background: #ffffff !important;
    color: #042344 !important;
    border: 1.5px solid #042344 !important;
}
#klaro .cookie-notice .cm-btn:hover,
#klaro .cookie-notice .cn-learn-more:hover,
#klaro .cookie-modal .cm-modal .cm-footer .cm-btn:hover {
    background: #042344 !important;
    color: #ffffff !important;
}
#klaro .cookie-notice button.cm-btn.cm-btn-success:hover,
#klaro .cookie-notice button.cm-btn.cm-btn-accept:hover,
#klaro .cookie-notice button.cm-btn.cm-btn-accept-all:hover,
#klaro .cookie-notice button.cm-btn.cm-btn-danger:hover {
    background: #042344 !important;
    color: #ffffff !important;
}

#klaro .cookie-modal .cm-modal .cm-powered-by {
    text-align: center !important;
    font-size: 10px !important;
    margin-top: 4px !important;
}

/* ===================== MOBIL: VOLLE BREITE UNTEN ===================== */

@media (max-width: 480px) {
    #klaro .cookie-notice:not(.cookie-modal-notice),
    #klaro .cookie-modal .cm-modal {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 85vh !important;
    }
}