/* Standard (Dark) */
        :root {
            --cc-bg: #141a23;
            --cc-text: #e6ebf5;
            --cc-btn-primary-bg: #f6b100;
            --cc-btn-primary-text: #121212;
            --cc-btn-secondary-bg: #1c2230;
            --cc-btn-secondary-text: #e6ebf5;
            --cc-border: #2a3142;
            --cc-link-color: #8ab8ff;
        }

        /* Light Mode via body.light-mode */
        body.light-mode :root,
        body.light-mode {
            --cc-bg: #ffffff;
            --cc-text: #0e1726;
            --cc-btn-primary-bg: #f6b100;
            --cc-btn-primary-text: #121212;
            --cc-btn-secondary-bg: #f2f4f8;
            --cc-btn-secondary-text: #0e1726;
            --cc-border: #dfe5ef;
            --cc-link-color: #2f6ae5;
        }

        .cm__title {
            font-weight: 800;
            letter-spacing: .2px
        }

        .cm__desc {
            line-height: 1.4
        }

/* Mobile Viewport-Fix: CookieConsent v3 positioniert seine Box standardmaessig
   am Viewport-Rand, ohne die maximale Hoehe des Consent-Banners zu begrenzen.
   Auf schmalen/kurzen Displays koennen sonst Text und Buttons aus dem Bild ragen.
   Das bestehende Keyboard-Handling des App-Shell liefert bei Bedarf die Groesse
   des sichtbaren Viewports und die Tastatur-Ueberdeckung. */
@media (max-width: 760px) {
    #cc-main .cm--box {
        box-sizing: border-box !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--app-keyboard-inset, 0px)) !important;
        width: calc(100% - 16px) !important;
        max-width: 620px !important;
        height: auto !important;
        max-height: min(
            calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
            calc(var(--app-visual-viewport-height, 100dvh) - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
        ) !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }

    /* Statt abzuschneiden scrollt der komplette BANNERTEXT mitsamt Buttons.
       Aktionen bleiben dadurch auch bei gedrehter/kleiner Anzeige erreichbar. */
    #cc-main .cm--box .cm__body {
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
    }

    #cc-main .cm--box .cm__texts,
    #cc-main .cm--box .cm__btns {
        flex-shrink: 0 !important;
    }

    #cc-main .cm--box .cm__desc {
        max-height: none !important;
        overflow-y: visible !important;
    }

    /* Auch der ueber die Footer-Links aufrufbare Einstellungsdialog bleibt
       innerhalb des sichtbaren Bereichs; nur dessen Inhalt wird gescrollt. */
    #cc-main .pm--box {
        max-height: min(
            calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
            calc(var(--app-visual-viewport-height, 100dvh) - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
        ) !important;
        min-height: 0 !important;
    }

    #cc-main .pm--box .pm__body {
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/*
 * CookieConsent 3.0.1: Korrektur der mobilen Preferences-Box.
 * Unter 640px setzt die Bibliothek beim Oeffnen transform: translateY(0)
 * !important, waehrend cookies.css global left:50% und eine zentrierende
 * transform:translate(-50%,-50%) vorgibt. So rutscht die Box um die halbe
 * Viewportbreite nach rechts. Mobil ausschliesslich feste Seiten-Inset-Werte
 * verwenden und die urspruengliche vertikale Ein-/Ausblendbewegung erhalten.
 */
@media screen and (max-width: 640px) {
    html #cc-main .pm.pm--box {
        box-sizing: border-box !important;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        top: max(8px, env(safe-area-inset-top, 0px)) !important;
        bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + var(--app-keyboard-inset, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        transform: translateY(1.6em) !important;
    }

    /* Aufgeklappt gewinnt die Bibliotheks-Animation (translateY(0)). */
    html.show--preferences #cc-main .cc--anim .pm.pm--box {
        transform: translateY(0) !important;
    }

    html #cc-main .pm.pm--box .pm__body {
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
    }
}