/* ===================================================================
   PIXELMATE COOKIE BANNER - BASE STYLES
   Minimal CSS - Most styling is done inline for theme compatibility
   =================================================================== */

/* Reset & Isolation - Verhindert Theme-Konflikte
   WICHTIG: !important ist hier bewusst gesetzt. Viele Themes bringen eigene
   Button-/Form-Resets mit !important mit (z.B. "line-height", "height" auf
   button). Ohne !important gewinnt das Theme unabhängig von der Spezifität
   unserer Selektoren, egal wie hoch diese ist. Die Regeln gelten sowohl für
   das Cookie-Banner (#pixelmate-banner) als auch für das separate
   Settings-Modal (.pixelmate-settings-modal), da beide unabhängig vom
   restlichen Seiten-DOM ins body gehängt werden. */
#pixelmate-banner,
#pixelmate-banner *,
#pixelmate-overlay,
.pixelmate-settings-modal,
.pixelmate-settings-modal *,
.pixelmate-settings-modal-overlay,
#pixelmate-revoke-button {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Banner Container - Basis Styles die inline schwer umsetzbar sind */
#pixelmate-banner {
    /* Diese Werte werden inline überschrieben, dienen als Fallback */
    position: fixed ;
    z-index: 999999 ;
    font-family: inherit ;

    /* Verhindert, dass Banner von anderen Elementen überdeckt wird */
    pointer-events: auto ;

    /* Scroll-Verhalten */
    overflow: visible ;

    /* Fallback-Sicherheitsnetz: falls die JS-seitige Höhenberechnung
       (siehe PixelmateBanner.js applyBannerStyles/getMaxHeight) aus
       irgendeinem Grund nicht greift, darf der Banner nie über den
       Viewport hinauswachsen. */
    max-height: 100vh ;
    overflow-y: scroll ;

    /* Theme Reset - verhindert ungewollte Vererbung */
    text-align: left ;
    direction: ltr ;
    unicode-bidi: normal ;

    /* Für bessere Darstellung auf mobilen Geräten */
    -webkit-font-smoothing: antialiased ;
    -moz-osx-font-smoothing: grayscale ;
}

/* Banner Inner Container */
.pixelmate-banner-inner {
    width: 100% ;
    position: relative ;
}

/* Lange, umbruchlose Zeichenketten (z.B. URLs in den Texten) dürfen den Banner
   nicht horizontal sprengen. overflow-wrap bricht sie notfalls innerhalb des Worts um. */
#pixelmate-banner .pixelmate-title,
#pixelmate-banner .pixelmate-text,
#pixelmate-banner .pixelmate-extended-text,
#pixelmate-banner .pixelmate-category-name {
    overflow-wrap: anywhere ;
    word-break: break-word ;
}

/* Dezente, schmale Scrollbalken für die scrollbaren Bereiche (Text/Inner-Container),
   damit lange Inhalte nicht mit einem klobigen System-Scrollbalken auffallen. */
#pixelmate-banner .pixelmate-banner-inner,
#pixelmate-banner .pixelmate-text {
    scrollbar-width: thin ;
}

#pixelmate-banner .pixelmate-banner-inner::-webkit-scrollbar,
#pixelmate-banner .pixelmate-text::-webkit-scrollbar {
    width: 8px ;
}

#pixelmate-banner .pixelmate-banner-inner::-webkit-scrollbar-thumb,
#pixelmate-banner .pixelmate-text::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.5) ;
    border-radius: 4px ;
}

/* Verhindert Theme-spezifische Link-Styles */
#pixelmate-banner a,
.pixelmate-settings-modal a {
    color: inherit !important;
    text-decoration: inherit !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#pixelmate-banner a:hover,
#pixelmate-banner a:focus,
#pixelmate-banner a:active,
#pixelmate-banner a:visited,
.pixelmate-settings-modal a:hover,
.pixelmate-settings-modal a:focus,
.pixelmate-settings-modal a:active,
.pixelmate-settings-modal a:visited {
    color: inherit !important;
    text-decoration: inherit !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    outline: 2px solid currentColor ;
    outline-offset: 2px ;
}

/* Button Reset - Verhindert Theme-Button-Styles
   line-height/height/box-sizing sind hier explizit gesetzt, weil genau diese
   Eigenschaften erfahrungsgemäß von Theme-Button-Resets (oft selbst mit
   !important) überschrieben werden und dadurch Buttons/Tabs im Banner bzw.
   Settings-Modal verschieben oder verzerren. Gilt auch für den freistehenden
   Floating-Revoke-Button (#pixelmate-revoke-button), der außerhalb von
   #pixelmate-banner direkt ins body gehängt wird und daher von den
   #pixelmate-banner-Selektoren sonst nicht erfasst würde. */
#pixelmate-banner button,
.pixelmate-settings-modal button,
#pixelmate-revoke-button {
    box-sizing: border-box !important;
    line-height: normal !important;
    height: auto !important;

    /* Entfernt Browser-Default-Styles */
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* Cursor */
    cursor: pointer !important;

    /* Verhindert Text-Selektion */
    -webkit-user-select: none ;
    -moz-user-select: none ;
    -ms-user-select: none ;
    user-select: none ;

    /* Theme "Global Button Style" Overrides (z.B. Kadence): Viele Themes
       setzen auf `button` global einen Verlauf/Schatten via background-image
       bzw. box-shadow. background-color allein (auch mit !important) kann
       ein zusätzlich gesetztes background-image nicht verdrängen, da beide
       Longhands unabhängig voneinander kaskadieren. Daher hier explizit
       zurücksetzen, die eigentliche Farbe kommt weiterhin aus dem
       Inline-Style (background-color) aus PixelmateBanner.js/SettingsModal.js. */
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Manche Themes (u.a. Kadence) implementieren den Hover-"Fill"-Effekt ihrer
   globalen Button-Styles über ::before/::after Pseudo-Elemente, die farbig
   über den Button gelegt werden. Da Pseudo-Elemente nicht per Inline-Style
   auf dem echten Button-Element erreichbar sind, muss das hier per Stylesheet
   deaktiviert werden - sonst schlägt der Theme-Hintergrund beim Hover durch,
   obwohl die Textfarbe korrekt von Pixelmate kommt. */
#pixelmate-banner button::before,
#pixelmate-banner button::after,
.pixelmate-settings-modal button::before,
.pixelmate-settings-modal button::after,
#pixelmate-revoke-button::before,
#pixelmate-revoke-button::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}

/* Button Hover States */
#pixelmate-banner button:hover,
.pixelmate-settings-modal button:hover,
#pixelmate-revoke-button:hover {
    opacity: 0.9 ;
    transform: translateY(-1px) ;
    background-image: none !important;
    box-shadow: none !important;
}

#pixelmate-banner button:active,
.pixelmate-settings-modal button:active,
#pixelmate-revoke-button:active {
    transform: translateY(0) ;
}

#pixelmate-banner button:focus,
.pixelmate-settings-modal button:focus,
#pixelmate-revoke-button:focus {
    outline: 2px solid currentColor ;
    outline-offset: 2px ;
}

/* Verhindert Theme-Heading-Styles */
#pixelmate-banner h1,
#pixelmate-banner h2,
#pixelmate-banner h3,
#pixelmate-banner h4,
#pixelmate-banner h5,
#pixelmate-banner h6,
.pixelmate-settings-modal h1,
.pixelmate-settings-modal h2,
.pixelmate-settings-modal h3,
.pixelmate-settings-modal h4,
.pixelmate-settings-modal h5,
.pixelmate-settings-modal h6 {
    font-family: inherit !important;
    font-size: inherit ;
    font-weight: inherit ;
    line-height: inherit ;
    color: inherit ;
    margin: inherit ;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-transform: none ;
    letter-spacing: normal ;
}

/* Overlay Basis */
#pixelmate-overlay {
    /* Inline Styles überschreiben diese Werte */
    position: fixed ;
    pointer-events: none ;
    z-index: 999998 ;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    #pixelmate-banner {
        /* Mobile spezifische Anpassungen */
        max-width: calc(100vw - 40px) ;
        max-height: calc(100vh - 40px) ;
    }

    /* Mobile Button Anpassungen */
    #pixelmate-banner .pixelmate-buttons {
        flex-direction: column ;
        gap: 8px ;
    }

    #pixelmate-banner button {
        width: 100% ;
        text-align: center ;
    }

    /* Mobile Text Anpassungen */
    #pixelmate-banner .pixelmate-banner-inner {
        flex-direction: column ;
        text-align: center ;
    }

    /* Settings-Modal Footer-Buttons ("Auswahl speichern", "Alle ablehnen",
       "Alle akzeptieren") stehen im Footer standardmäßig nebeneinander
       (siehe SettingsModal.js). Auf schmalen Bildschirmen reicht der Platz
       dafür nicht aus - die Buttons werden abgeschnitten/verdeckt. Daher
       hier untereinander anordnen, analog zum Cookie-Banner. */
    .pixelmate-settings-modal .pixelmate-modal-footer {
        flex-direction: column !important;
    }

    .pixelmate-settings-modal .pixelmate-modal-footer button {
        width: 100% !important;
    }

    /* Fallback-Scroll für den Content-Bereich auf Mobilgeräten. Das eigentliche
       Höhen-Capping/Scrollen übernehmen inzwischen die Inline-Styles (innerer
       Container + Fließtext, an der Viewport-Höhe orientiert); overflow-y:auto
       vermeidet einen dauerhaft sichtbaren Scrollbalken. */
    #pixelmate-banner .pixelmate-banner-content {
        width: 100% ;
        overflow-y: auto ;
    }

    /* Banner-Style "Leiste unten" (echte volle Leiste, siehe
       PixelmateBanner.js getBarLayoutHTML()): die 3 (bzw. 2 ohne Kategorien)
       nebeneinander liegenden Spalten werden auf schmalen Bildschirmen
       untereinander gestapelt statt gequetscht. !important überschreibt hier
       bewusst die Inline-Styles (row/stretch), die für Desktop/Tablet gesetzt
       werden. */
    #pixelmate-banner .pixelmate-bar-columns {
        flex-direction: column !important;
    }

    #pixelmate-banner .pixelmate-bar-col {
        width: 100% !important;
        overflow-y: visible !important;
    }
}

/* Sehr kleine Bildschirme */
@media (max-width: 480px) {
    #pixelmate-banner {
        font-size: 13px ;
        line-height: 1.4 ;
    }
}

/* Print Styles - Banner nicht drucken */
@media print {
    #pixelmate-banner,
    #pixelmate-overlay {
        display: none ;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    #pixelmate-banner {
        border: 2px solid currentColor ;
    }

    #pixelmate-banner button {
        border: 2px solid currentColor ;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    #pixelmate-banner,
    #pixelmate-banner *,
    #pixelmate-overlay {
        animation-duration: 0.01ms ;
        animation-iteration-count: 1 ;
        transition-duration: 0.01ms ;
        scroll-behavior: auto ;
    }
}

/* Dark Mode Support - Fallback falls keine Farben definiert */
@media (prefers-color-scheme: dark) {
    #pixelmate-banner {
        color: #ffffff ;
        background-color: #2d3748 ;
    }

    /* Nur wenn keine expliziten Farben gesetzt sind */
    #pixelmate-banner[style*="background-color: #ffffff"] {
        background-color: #2d3748 ;
    }

    #pixelmate-banner[style*="color: #333333"] {
        color: #ffffff ;
    }
}

/* ===================================================================
   CONTENT BLOCKER BANNER (YouTube, Vimeo, eingebetteter Inhalt)
   Die eigentliche Optik der Karte (mittig, max. 300x200px, dunkel-
   transparent, backdrop-filter: blur(25px), Schriftgrößen, Button, ...)
   wird bewusst INLINE per JS gesetzt (siehe ContentBlocker.js,
   createConsentBanner()) und NICHT über diese Klassen - Themes können ihr
   eigenes CSS mit höherer Priorität/nach diesem Stylesheet laden, und ein
   fehlendes/überschriebenes Plugin-Stylesheet darf niemals dazu führen,
   dass die Karte unformatiert und unzentriert im DOM-Fluss landet.
   Diese Datei übernimmt hier nur noch die progressive Verbesserung für
   extrem schmale Container (z.B. Video-Listen mit <200px Spaltenbreite):
   Checkbox/Link bzw. Titel/Text stufenlos ausblenden, damit der
   Freischalten-Button immer sichtbar bleibt. Ohne dieses Stylesheet
   bleibt die Karte trotzdem korrekt zentriert und lesbar - dieser Teil
   ist reine Kür, keine Voraussetzung für ein funktionierendes Banner.
   =================================================================== */
@container (max-width: 280px) {
    .pixelmate-content-banner-consent-option,
    .pixelmate-content-banner-link {
        display: none ;
    }
}

@container (max-width: 200px) {
    /* Die inline gesetzte clamp()-Polsterung der Karte erreicht bei dieser
       Breite ohnehin schon ihren Mindestwert - keine zusätzliche Regel
       nötig (und eine externe !important-Regel könnte das inline gesetzte
       !important auf .pixelmate-content-banner ohnehin nicht überschreiben). */
    .pixelmate-content-banner-title,
    .pixelmate-content-banner-text {
        display: none ;
    }
}

/* ===================================================================
   CLOUDFLARE TURNSTILE SICHERHEITS-MODAL
   Wird beim Absenden eines geschützten Formulars angezeigt, bevor das
   Turnstile-Script von challenges.cloudflare.com nachgeladen wird.
   =================================================================== */
.pixelmate-turnstile-modal-overlay {
    position: fixed ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 100% ;
    background: rgba(0, 0, 0, 0.6) ;
    z-index: 1000000 ;
    opacity: 0 ;
    transition: opacity 0.2s ease ;
}

.pixelmate-turnstile-modal-overlay.pixelmate-turnstile-modal-visible {
    opacity: 1 ;
}

.pixelmate-turnstile-modal {
    position: fixed ;
    top: 50% ;
    left: 50% ;
    transform: translate(-50%, -50%) scale(0.95) ;
    width: 90% ;
    max-width: 420px ;
    background: #ffffff ;
    color: #333333 ;
    border-radius: 8px ;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) ;
    padding: 24px ;
    z-index: 1000001 ;
    opacity: 0 ;
    transition: opacity 0.2s ease, transform 0.2s ease ;
    box-sizing: border-box ;
}

.pixelmate-turnstile-modal.pixelmate-turnstile-modal-visible {
    opacity: 1 ;
    transform: translate(-50%, -50%) scale(1) ;
}

.pixelmate-turnstile-modal-title {
    margin: 0 0 12px 0 ;
    font-size: 18px ;
    font-weight: 600 ;
}

.pixelmate-turnstile-modal-text {
    margin: 0 0 16px 0 ;
    font-size: 14px ;
    line-height: 1.5 ;
}

.pixelmate-turnstile-modal-status {
    font-size: 13px ;
    color: #666 ;
    min-height: 18px ;
    margin-bottom: 8px ;
}

.pixelmate-turnstile-modal-widget {
    display: flex ;
    justify-content: center ;
    margin-bottom: 8px ;
}

.pixelmate-turnstile-modal-actions {
    display: flex ;
    justify-content: flex-end ;
    gap: 12px ;
    margin-top: 8px ;
}

.pixelmate-turnstile-modal-btn {
    border: none ;
    padding: 10px 18px ;
    font-size: 14px ;
    font-weight: 600 ;
    border-radius: 4px ;
    cursor: pointer ;
    white-space: nowrap ;
}

.pixelmate-turnstile-modal-btn-primary {
    background: #0073aa ;
    color: #ffffff ;
}

.pixelmate-turnstile-modal-btn-secondary {
    background: transparent ;
    color: #666 ;
}

/* Focus-visible Support für bessere Accessibility */
#pixelmate-banner button:focus:not(:focus-visible) {
    outline: none ;
}

#pixelmate-banner button:focus-visible {
    outline: 2px solid currentColor ;
    outline-offset: 2px ;
}

/* HINWEIS: .pixelmate-sr-only und die vergrößerten Klickflächen für die
   Toggle-/Akkordeon-Icons (WCAG 2.5.8) werden in PixelmateBanner.js durch
   injectA11yStyles() zusätzlich früh injiziert. So bleiben die kritischen
   A11y-Regeln auch bei verzögertem oder optimiertem CSS-Laden sofort aktiv. */