/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved by My WordPress Agent */
/*
 * Pixelmate: Einstellungs-Modal auf schmalen Bildschirmen bedienbar halten.
 *
 * Das Plugin baut das Modal komplett mit Inline-Styles auf (SettingsModal.js).
 * Diese Datei korrigiert zwei Stellen, an denen das auf dem Telefon bricht.
 *
 * Das Plugin hat fuer Teil 1 schon eine eigene Regel in
 * assets/public/css/pixelmate.css. Diese Datei wird im Frontend aber nie
 * eingebunden: sie wird nur von der Admin-Vorschau geladen
 * (pixelmate-design-templates.js, #pixelmate-preview-css). Die Korrektur
 * wirkt deshalb nur in der Vorschau, nicht auf der Website.
 *
 * Hier stehen nur die noetigen Regeln, nicht die ganze Plugin-CSS. Die Datei
 * enthaelt 49 weitere !important-Regeln, die im Frontend noch nie aktiv waren.
 * Ein Consent-Banner ist der falsche Ort fuer einen Blindtest.
 *
 * Geprueft gegen Plugin-Version 5.0.16.
 */

/* ------------------------------------------------------------------
 * 1. Fuss-Knoepfe
 *
 * Der Footer bekommt inline "display: flex !important" ohne
 * flex-direction, steht also in einer Reihe. Auf einem Telefon ist die
 * Reihe breiter als das Modal: "Alle ablehnen" fiel ganz heraus,
 * "Alle akzeptieren" wurde links abgeschnitten. Der Besucher sah den
 * Zustimmen-Knopf nicht mehr.
 *
 * flex-wrap gilt in jeder Breite als Sicherheitsnetz: passen die
 * Knoepfe, aendert sich nichts; passen sie nicht, brechen sie um statt
 * abzuschneiden.
 * ------------------------------------------------------------------ */

.pixelmate-settings-modal .pixelmate-modal-footer {
    flex-wrap: wrap !important;
}

@media (max-width: 768px) {
    .pixelmate-settings-modal .pixelmate-modal-footer {
        flex-direction: column !important;
        align-items: stretch !important;
    }

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

/* ------------------------------------------------------------------
 * 2. Reiter "Einstellungen" / "Datenauskunft"
 *
 * Zwei Fehler an derselben Stelle.
 *
 * Optik: Das Theme gibt jedem button border-radius: 50px. Das Plugin
 * setzt zwar "border: none", aber nie den Radius zurueck, und zeichnet
 * dann eine 3px-Unterkante. Ergebnis: eine gerade Linie unter einer
 * runden Pille, also eine angeschnittene Ellipse statt eines Reiters.
 * Radius zuruecksetzen. Die Unterkante liest sich dann als Reiter gegen
 * die Trennlinie, die der Modal-Header ohnehin schon zieht.
 *
 * Breite: Die Reihe bekommt 0,740 der Fensterbreite. Bei 14px Schrift
 * und 20px Innenabstand braucht sie 338px, also ein 457px breites
 * Fenster. Kein Telefon ist so breit, "Datenauskunft" lief also auf
 * jedem Geraet ueber den Rand. Mit 12px und 10px Innenabstand sind es
 * 262px, das passt ab 354px Fensterbreite und damit auf jedes Telefon
 * ab 360px. Ist es doch enger, scrollt die Reihe seitlich, statt
 * abzuschneiden.
 *
 * Farbe und border-bottom-color bleiben unangetastet: switchTab() in
 * SettingsModal.js setzt genau diese zwei Eigenschaften inline und ohne
 * !important. Eine !important-Regel hier wuerde die Aktiv-Markierung
 * einfrieren, und der Besucher saehe nicht mehr, welcher Reiter offen ist.
 * ------------------------------------------------------------------ */

.pixelmate-settings-modal .pixelmate-modal-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pixelmate-settings-modal .pixelmate-modal-tabs::-webkit-scrollbar {
    display: none;
}

.pixelmate-settings-modal .pixelmate-tab-btn {
    border-radius: 0 !important;
    flex: 1 0 auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    text-align: center !important;
}

@media (max-width: 480px) {
    .pixelmate-settings-modal .pixelmate-tab-btn {
        font-size: 12px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}