/* --------------------------------------------------------------
   swix-cookie-consent-layout.css
   SWIX: Layout-Varianten fuer das Gambio-Cookie-Consent-Panel (.as-oil).
   Wird nach dem Modul-CSS geladen. Ohne Body-Klasse (Modul inaktiv
   oder Position "bottom") greift hier keine Regel -> Originalverhalten.

   Alle Regeln sind auf "body.swix-cc--center ..." gescoped, damit die
   bestehenden Bottom-Styles unangetastet bleiben. Kein !important noetig:
   oil.js haengt seine eigenen Styles per <style>-Tag ein (nicht inline),
   unsere Selektoren gewinnen ueber Spezifitaet.
   -------------------------------------------------------------- */

/* ============================================================
   Position "center": .as-oil selbst wird zum Viewport-Overlay
   (bewusst KEIN transform hier - .as-oil traegt bereits
   z-index: 2147483647 und waere mit transform ein Containing Block
   fuer alles darin; das wuerde z.B. ein Backdrop-Element mit
   position:fixed an .as-oil statt am Viewport verankern)
   ============================================================ */
body.swix-cc--center .as-oil {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 1rem;
    /* Seite bleibt standardmaessig bedienbar - nur das Panel selbst faengt Klicks ab */
    pointer-events: none;
}

body.swix-cc--center .as-oil-content-overlay {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: var(--swix-cc-max-width, 560px);
    max-height: 85vh;
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: 8px;
    pointer-events: auto;
    animation: swix-cc-scale-in .2s ease-out;
}

/* Der urspruengliche Zwei-Spalten-Ausschnitt (Text 70% / Buttons 25%, ab 768px)
   ist fuer die volle Breite der unteren Leiste gedacht und wirkt im schmalen
   Modal zu eng - deshalb hier einspaltig stapeln. */
body.swix-cc--center .as-oil-l-wrapper-layout-max-width .as-oil__heading-intro-description,
body.swix-cc--center .as-oil-l-wrapper-layout-max-width .as-oil-l-buttons {
    float: none;
    width: 100%;
}

/* Option "Hintergrund abdunkeln" */
body.swix-cc--center.swix-cc--dimmed .as-oil {
    background-color: rgba(0, 0, 0, .5);
    animation: swix-cc-fade-in .2s ease-out;
}

/* Option "Seiteninteraktion sperren": .as-oil faengt wieder Klicks ab + kein Body-Scroll.
   swix-cc--locked wird per JS nur gesetzt, solange .as-oil im DOM vorhanden ist. */
body.swix-cc--center.swix-cc--locked .as-oil {
    pointer-events: auto;
}

body.swix-cc--locked {
    overflow: hidden;
}

/* Sanftes Einblenden, respektiert reduzierte Bewegung */
@keyframes swix-cc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes swix-cc-scale-in {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    body.swix-cc--center .as-oil,
    body.swix-cc--center .as-oil-content-overlay {
        animation: none;
    }
}

/* Responsive: auf sehr kleinen Viewports etwas weniger Rand, mehr nutzbare Hoehe.
   Bewusst keine eigene "Bottom-Sheet"-Variante fuer Mobile: das zentrierte Modal
   mit kleinem Rand (calc via padding) funktioniert bei 360px Breite bereits gut
   und vermeidet einen zweiten Layout-Modus, der separat gepflegt werden muesste. */
@media (max-width: 480px) {
    body.swix-cc--center .as-oil {
        padding: .75rem;
    }

    body.swix-cc--center .as-oil-content-overlay {
        max-height: 90vh;
    }
}