/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* Styling für den zentrierten Filter-Button im mobilen Menü */
.wd-nav-mobile .menu-button-filter > a {
    background-color: #568ebf; 
    color: white !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    text-align: center;
    border-radius: 5px;
    margin: 15px; 
    padding: 12px 10px !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================================================
   FZV ERLEBNIS-SHORTCODES & KARTEN STYLING
   ========================================================================== */

/* 2. Action-Level Tooltip (Ganze Zeile ist der Trigger) */
.fzv-action-hover-trigger:hover .fzv-question-icon { color: #568ebf; }
.fzv-action-hover-trigger .fzv-tooltip-text { visibility: hidden; width: 250px; background-color: #333; color: #fff; text-align: left; border-radius: 8px; padding: 12px; position: absolute; z-index: 10006; bottom: 100%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 13px; line-height: 1.5; box-shadow: 0 5px 15px rgba(0,0,0,0.3); pointer-events: none; margin-bottom: 10px; }
.fzv-action-hover-trigger .fzv-tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; }
.fzv-action-hover-trigger:hover .fzv-tooltip-text { visibility: visible; opacity: 1; }

/* 4. Angebot Details Inklusive/Exklusive */
.custom-listing ul { list-style-type: disc !important; padding-left: 20px !important; } 
.custom-listing li { margin-bottom: 8px !important; } 
.custom-listing li::before { content: none !important; }

/* 8. Buchungstool Iframe - Schatten Variante (Focus Mode) */
.iframe-card-wrapper { 
    width: 100%; 
    padding: 30px 0; /* Rand oben und unten */
}
.booking-iframe { 
    width: 1px; 
    min-width: 100%; 
    border: 0; 
    min-height: 600px; 
}

/* Der Container im Normalzustand */
.booking-highlight { 
    position: relative; 
    border-radius: 16px; /* Schöne runde Ecken */
    overflow: hidden; 
    background: white; 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sehr leichter Basis-Schatten */
}

/* Der Container im aktivierten Zustand (Focus Mode) */
.booking-highlight.shadow-active { 
    z-index: 9999; 
    transform: scale(1.02); /* Kommt dem User ganz leicht entgegen */
    box-shadow: 0 25px 60px rgba(0,0,0,0.3) !important; /* Prominenter, weicher Schatten */
}

/* 9. Floating Booking Button */
.fzv-side-stack { position: fixed; top: 50%; right: 0; transform: translateY(-50%); background-color: #568ebf; color: #ffffff !important; padding: 15px 12px; border-radius: 12px 0 0 12px; z-index: 999; box-shadow: -5px 0 20px rgba(0,0,0,0.2); display: flex; flex-direction: column; align-items: center; text-decoration: none !important; transition: all 0.3s ease; cursor: pointer; }
.cta-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta-item i { font-size: 22px; margin-bottom: 5px; }
.cta-label { font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
.cta-divider { width: 60%; height: 1px; background-color: rgba(255,255,255,0.3); margin: 12px 0; }
.fzv-side-stack:hover { padding-right: 20px; background-color: #45739e; }
@media (max-width: 1390px) { .fzv-side-stack { padding: 12px 10px; } .cta-label { display: none; } .cta-item i { margin-bottom: 0; font-size: 24px; } .cta-divider { margin: 15px 0; } }
html { scroll-behavior: smooth; }

/* Verschenken / Erleben Tab Button Hover */
.fzv-tab-button:hover { background-color: #45739e !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-1px); }

/* 11. Erlebnis-Finder & Map Styling */
.wd-sidebar-opener, .woodmart-sidebar-opener, .wd-side-hidden-opener { display: none !important; visibility: hidden !important; opacity: 0 !important; }
.fzv-controls-container { background:#fff; border-radius:15px; border:1px solid #eee; padding:25px; margin-bottom:30px; box-shadow:0 10px 30px rgba(0,0,0,0.05); position: relative; z-index: 100; }
#map-filters { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 25px; }
.map-filter-btn { padding: 10px 22px; border: 2px solid #568ebf; background: #fff; color: #568ebf; border-radius: 30px; font-weight: 600; transition: 0.3s; cursor: pointer !important; white-space: nowrap; }
.map-filter-btn.active, .map-filter-btn:hover { background: #568ebf; color: #fff; }
#fzv-floating-ui-container { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 999; pointer-events: none; }
.fzv-floating-btn { pointer-events: auto; padding: 12px 25px; border-radius: 50px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 5px 20px rgba(0,0,0,0.2); font-size: 13px; border: 1px solid rgba(0,0,0,0.1); transition: 0.3s; }
.filter-btn { background: #568ebf; color: #fff; animation: fzv-pulse-btn 2.5s infinite; }
.scroll-btn { background: #fff; color: #333; opacity: 0; transform: translateY(20px); pointer-events: none; }
.scroll-btn.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fzv-premium-list-group { background: #fff; border: 1px solid #eee; border-radius: 12px; margin-bottom: 20px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.fzv-list-header { background: #f8f9fa; padding: 15px 20px; font-weight: 700; font-size: 16px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.fzv-badge { background: #568ebf; color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 20px; }
.fzv-list-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #f5f5f5; text-decoration: none !important; transition: 0.2s; }
.fzv-list-item:last-child { border-bottom: none; }
.fzv-list-item:hover { background: #f0f7ff; padding-left: 25px; }
.fzv-item-title { color: #333; font-weight: 600; font-size: 15px; }
.fzv-item-meta { color: #568ebf; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.fzv-item-meta i { font-size: 12px; opacity: 0.5; }
#fzv-mobile-header, #fzv-menu-overlay { display: none; }

/* --------------------------------------------------------------------------
   HIER WAR DER FEHLER: Die Klammer des Mobile-Bereichs fehlte! 
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .fzv-controls-container { position: fixed; top: 0; left: -100%; width: 85%; height: 100%; z-index: 10001; margin: 0; border-radius: 0; transition: 0.4s ease; overflow-y: auto; padding: 30px 20px; }
    .fzv-controls-container.open { left: 0; }
    #fzv-mobile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
    #fzv-menu-overlay.active { display: block !important; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; }
    #global-erlebnis-map { height: 450px !important; }
    #fzv-floating-ui-container { bottom: 20px; }
    .dim-close-btn { width: 100%; text-align: center; } 
    #dim-overlay { padding: 10px; }
} /* <--- DIESE KLAMMER HAT GEFEHLT! */


@media (min-width: 768px) { #fzv-mobile-filter-trigger { display: none !important; } }
.fzv-card-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100%; height: 42px; border-radius: 4px; text-decoration: none !important; font-size: 13px; font-weight: 700; transition: 0.3s; line-height: 1 !important; cursor: pointer !important; }
.fzv-card-btn.blue { background: #568ebf; color: #fff !important; }
.erlebnis-card { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.05); border:1px solid #eee; transition:0.3s; display: flex; flex-direction: column; min-height: 380px; }
@keyframes fzv-pulse-btn { 0% { box-shadow: 0 0 0 0 rgba(86, 142, 191, 0.6); } 70% { box-shadow: 0 0 0 15px rgba(86, 142, 191, 0); } 100% { box-shadow: 0 0 0 0 rgba(86, 142, 191, 0); } }

/* ==========================================================================
   FZV RADIUS BUTTONS (Anstelle des Sliders)
   ========================================================================== */
.fzv-radius-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.radius-btn {
    padding: 8px 20px;
    border: 2px solid #568ebf;
    background: #fff;
    color: #568ebf;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.radius-btn.active, .radius-btn:hover {
    background: #568ebf;
    color: #fff;
    box-shadow: 0 4px 10px rgba(86, 142, 191, 0.2);
    transform: translateY(-1px);
}

/* ==========================================================================
   FZV ACTION-ROW (Zentriert) & TOGGLE-SWITCH DESIGN
   ========================================================================== */

.fzv-action-row {
    display: flex;
    flex-direction: column; /* Stapelt den Switch und die Buttons übereinander */
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    width: 100%;
}

.fzv-action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Diese Styles für die Buttons haben gefehlt: */
.fzv-main-btn, .fzv-secondary-btn { padding: 10px 24px; border-radius: 30px; font-weight: 600; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s ease; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
.fzv-main-btn { background-color: #568ebf; color: #ffffff !important; box-shadow: 0 4px 10px rgba(86, 142, 191, 0.3); }
.fzv-main-btn:hover { background-color: #45739e; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(86, 142, 191, 0.4); }
.fzv-secondary-btn { background-color: #f4f7f9; color: #568ebf !important; border: 1px solid #dbe6f0; }
.fzv-secondary-btn:hover { background-color: #e2ecf4; color: #45739e !important; }

/* Modernes Switch-Design statt langweiliger Checkbox */
.fzv-switch-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 600;
    color: #444;
}

.fzv-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

.fzv-switch input { opacity: 0; width: 0; height: 0; }

.fzv-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc; transition: .4s; border-radius: 24px;
}

.fzv-slider:before {
    position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background-color: white; transition: .4s; border-radius: 50%;
}

.fzv-switch input:checked + .fzv-slider { background-color: #568ebf; }
.fzv-switch input:checked + .fzv-slider:before { transform: translateX(22px); }

/* Akkordeon Hover-Effekt */
.fzv-list-header { cursor: pointer; transition: background 0.3s ease; }
.fzv-list-header:hover { background-color: #f0f7ff; }

/* ==========================================================================
   MOBILE MAP POPUP FIX (Ohne Bild, Fokus auf Inhalt & Usability)
   ========================================================================= */

@media (max-width: 767px) {
    /* 1. BILD KOMPLETT AUSBLENDEN */
    .gm-style-iw-d img {
        display: none !important;
    }

    /* 2. Haupt-Container: Schöner weisser Kasten mit sauberen Rändern */
    .gm-style-iw.gm-style-iw-c {
        padding: 16px !important; 
        max-width: 260px !important; 
        border-radius: 8px !important; 
    }

  /* 3. Unseren eigenen Texten den optischen Schubs nach unten geben */
.elementor-widget-woocommerce-product-price .price .fzv-price-prefix,
.elementor-widget-woocommerce-product-price .price .fzv-price-suffix {
    display: inline-block !important;
    transform: translateY(4px) !important; /* <--- DAS IST DER TRICK! */
    line-height: 1 !important;
}
    .gm-style-iw-d::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }

    /* 4. Texte: Zentriert und mit Sicherheitsabstand zum "X" */
    .gm-style-iw-d h3, 
    .gm-style-iw-d .fzv-item-title {
        margin: 5px 0 8px 0 !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        /* Verhindert, dass ein langer Titel unter dem Schliessen-X verschwindet */
        padding-right: 20px !important; 
        padding-left: 20px !important;
    }
    
    .gm-style-iw-d p {
        margin: 0 0 15px 0 !important;
        font-size: 14px !important;
        text-align: center !important;
        font-weight: bold !important; /* Preis etwas hervorheben, da das Bild fehlt */
    }

    /* 5. Button: Gross, klickbar und sicher im Kasten */
    .gm-style-iw-d .fzv-card-btn,
    .gm-style-iw-d .button {
        display: block !important;
        width: calc(100% - 10px) !important;
        margin: 0 auto 10px auto !important;
        box-sizing: border-box !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 13px !important;
        text-align: center !important;
    }

    /* 6. Anfahrtszeit-Link */
    .gm-style-iw-d a:not(.button):not(.fzv-card-btn) {
        display: block !important;
        text-align: center !important;
        font-size: 13px !important;
        margin-top: 5px !important;
        margin-bottom: 2px !important;
    }
}

/* ==========================================================================
   BEWERTUNGEN (Mobile Swiping & Zentrierung)
   ========================================================================== */
.fzv-reviews-grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px; /* Platz für den Scrollbalken */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* Auf dem Handy nimmt eine Karte 85% Breite ein, man sieht den Rand der nächsten */
.fzv-review-card {
    flex: 0 0 85%; 
    scroll-snap-align: center;
}

/* Ab Tablet/Desktop greift das normale 3er-Grid */
@media (min-width: 768px) {
    .fzv-reviews-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow-x: visible;
    }
    .fzv-review-card {
        flex: auto;
    }
}

/* Flightbase Text auf Mobile zentrieren */
@media (max-width: 767px) {
    .fzv-trust-reviews > div[style*="text-align: right"] {
        text-align: center !important;
    }
}

/* Die einzelne Bewertungskarte */
.fzv-review-card {
    background-color: #f8f9fa;
    padding: 25px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    text-align: center;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.fzv-review-card:hover {
    transform: translateY(-5px);
}

/* Goldene Sterne */
.fzv-review-stars {
    color: #FFD700;
    font-size: 16px;
    margin-bottom: 15px;
}

.fzv-review-stars i {
    margin: 0 2px;
}

/* Der Bewertungstext */
.fzv-review-text {
    font-style: italic;
    color: #555;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
}

/* Der Name des Kunden */
.fzv-review-author {
    font-weight: 700;
    color: #222;
    font-size: 14px;
}

/* ==========================================================================
   PREIS WIDGET ABSTAND (Für Elementor Container-Layout)
   ========================================================================== */
.elementor-widget-woocommerce-product-price .price {
    margin-bottom: 0 !important;
    line-height: 0.75 !important; 
}

/* Falls die Text-Widgets auch eigene Abstände haben */
.elementor-widget-text-editor .elementor-text-editor,
.elementor-widget-heading .elementor-heading-title {
    margin-bottom: 0 !important;
    line-height: 1 !important;
}

/* ==========================================================================
   FLUGINFOS HORIZONTAL-LAYOUT (Custom HTML Wrapper)
   ========================================================================== */
.fzv-fluginfos-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    width: 100%;
}

.fzv-fluginfos-wrapper .fzv-info-row {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 0 !important;
    flex: 1 1 120px;
    max-width: 200px;
}

/* Icon nach oben, gross und blau */
.fzv-fluginfos-wrapper .fzv-info-row i {
    font-size: 28px !important;
    margin-bottom: 12px !important;
    color: #568ebf !important;
}

/* Titel (Flugdauer etc.) */
.fzv-fluginfos-wrapper .fzv-info-row strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    color: #333;
}

/* ==========================================================================
   KUNDENSTIMMEN (Trust-Cards)
   ========================================================================== */

.fzv-trust-reviews {
    margin: 40px 0;
    padding: 20px 0;
}

.fzv-reviews-title {
    font-size: 22px !important;
    font-weight: 700;
    margin-bottom: 25px !important;
    text-align: center;
    color: #333;
}

/* Grid Verhalten (Flexbox & Scroll) */
.fzv-reviews-grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 15px; /* Etwas mehr Platz nach unten */
    cursor: grab;
    
    /* Scrollbalken verstecken */
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

.fzv-reviews-grid::-webkit-scrollbar {
    display: none; 
}

.fzv-reviews-grid.fzv-active-drag {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* Karten Styling */
.fzv-review-card {
    background: #fdfdfd;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
    user-select: none;
    
    /* Desktop: 3 Karten nebeneinander */
    flex: 0 0 calc(33.333% - 14px); 
}

/* TABLET & MOBILE Anpassung */
@media (max-width: 1024px) {
    .fzv-review-card {
        /* Feste Breite von z.B. 320 Pixeln, damit die Boxen nicht in die Breite wachsen */
        flex: 0 0 320px; 
        
        /* Eine kleine Sicherheitsregel: Auf winzigen Handys darf die Box maximal 85% des Displays einnehmen, damit sie nicht über den Bildschirmrand hinausragt */
        max-width: 85vw; 
    }
}

/* NEU: Container für die Buttons unten */
.fzv-reviews-controls {
    display: flex;
    justify-content: center; /* Zentriert die Buttons. Für rechtsbündig: flex-end nutzen */
    gap: 15px; /* Abstand zwischen den beiden Buttons */
    margin-top: 10px;
}

/* Gemeinsames Button Styling für Links und Rechts */
.fzv-scroll-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #dddddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

.fzv-scroll-btn:hover {
    background-color: #f5f5f5;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* Buttons auf Mobile verstecken (optional, falls Wischen bevorzugt wird) */
@media (max-width: 768px) {
    .fzv-reviews-controls {
        display: none;
    }
}

/* ==========================================================================
   STANDORT TEXT EXPANDER (2 ACF FELDER)
   ========================================================================== */

.fzv-standort-text-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

/* Abstand zwischen den Textteilen, wenn Teil 2 offen ist */
.fzv-standort-teil-2 {
    margin-top: 15px; 
    /* Ein weicher Übergang (Fade-In), wenn es von display:none auf display:block wechselt */
    animation: fadeInText 0.4s ease-in-out;
}

@keyframes fadeInText {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Der "Mehr anzeigen" Button */
.fzv-read-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #568ebf; /* Eure blaue Hauptfarbe */
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    margin-top: 10px;
    transition: color 0.3s ease;
}

.fzv-read-more-toggle:hover {
    color: #3b6b94; /* Etwas dunkler beim Hover */
    text-decoration: underline;
}

/* Icon-Ausrichtung im Button */
.fzv-read-more-toggle i {
    font-size: 12px;
    transition: transform 0.3s;
}

/* ==========================================================================
   TAB-LISTEN ZENTRIERUNG (Voraussetzungen & Inbegriffen)
   ========================================================================== */

/* Die Wrapper, die wir vorhin im PHP hinzugefügt haben */
.tab-voraussetzungen-wrapper ul,
.tab-angebot-wrapper ul {
    /* Setzt die Liste als Inline-Block, damit sie nur so breit wird wie ihr Inhalt */
    display: inline-block; 
    
    /* Hebt die Standard-Polsterung von Listen auf, um ungewollte Verschiebungen zu verhindern */
    padding-left: 0; 
}

/* Sorgt dafür, dass die einzelnen Listen-Elemente untereinander stehen bleiben */
.tab-voraussetzungen-wrapper li,
.tab-angebot-wrapper li {
    text-align: left; /* Text innerhalb des Listen-Elements bleibt linksbündig ausgerichtet */
}

/* Optional: Den "Nicht inbegriffen" Custom-Text auch zentrieren, falls gewünscht */
.tab-angebot-wrapper .custom-listing {
     display: flex;
     justify-content: center;
}
.tab-angebot-wrapper .custom-listing > * {
     text-align: left;
}

/* Versteckt den leeren Link-Text, damit er keinen Platz wegnimmt */
li.trennlinie-quer a {
    display: none !important; 
}

/* Erstellt die eigentliche Linie */
li.trennlinie-quer {
    border-bottom: 2px solid #5a7b97; /* Dicke, Art und Farbe der Linie (hier passend zu deinem blauen Button) */
    margin: 15px 20px; /* Abstand: 15px nach oben/unten, 20px nach links/rechts */
    pointer-events: none; /* Verhindert, dass man versehentlich darauf klicken kann */
    width: auto;
}

/* ==========================================================================
   TEXT EXPANDER (Mehr anzeigen für Kategorieseiten)
   ========================================================================== */
.fzv-text-expander {
    transition: max-height 0.5s ease-in-out;
}

.fzv-text-expander.fzv-is-collapsed {
    max-height: 300px; /* Zeigt ca. 5-6 Zeilen Text, den Rest versteckt es */
    overflow: hidden;
    /* Blendet den Text sanft transparent aus, egal welche Hintergrundfarbe! */
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

.fzv-text-expander-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #568ebf;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    margin-top: 5px;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.fzv-text-expander-btn:hover {
    color: #3b6b94;
    text-decoration: underline;
}

/* ==========================================================================
   MOBILE INLINE FILTER (Sichtbar für Kategorieseiten)
   ========================================================================== */
@media (max-width: 767px) {
    .fzv-controls-container.fzv-static-mobile {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        z-index: 10;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        overflow: visible;
    }
}

/* Finaler Fix für die Flaggengröße im Woodmart-Sidebar-Menü */
.wd-nav-vertical li.weglot-lang a::before,
.wd-nav-vertical li.weglot-language a::before {
    width: 32px !important;
    height: 24px !important;
    min-width: 32px !important;
    
    /* WICHTIG: Erhöht die Container-Größe für das Pseudo-Element */
    font-size: 32px !important; 
    line-height: 24px !important;
    
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Verhindert, dass Woodmart das Element verschiebt */
    margin-right: 0 !important; 
}

/* Falls es im eingeklappten Zustand zentriert sein muss */
.wd-sidebar-collapsed .wd-nav-vertical li.weglot-lang a::before,
.wd-sidebar-collapsed .wd-nav-vertical li.weglot-language a::before {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   STYLING FÜR GOOGLE MAPS MARKER CLUSTERER (Zusammengefasste Marker)
   ========================================================================== */

/* 1. Versteckt das Standard-Bild von Google */
.cluster img {
    display: none !important;
}

/* 2. Erstellt den blauen FZV-Kreis mit weissem Rand */
.cluster {
    width: 40px !important;
    height: 40px !important;
    background-color: #568ebf !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    border: 3px solid #ffffff !important;
    font-weight: bold !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    cursor: pointer !important;
}

/* 3. Kleiner Hover-Effekt für die Interaktion */
.cluster:hover {
    background-color: #45739e !important;
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
}

/* ==========================================================================
   MOBILE OPTIMIERUNG FÜR TAB-BOXEN (Große Icons ausblenden)
   ========================================================================== */
@media (max-width: 767px) {
    /* Blendet nur das große Icon direkt neben dem Text aus */
    .tab-voraussetzungen-wrapper > div > i,
    .tab-angebot-wrapper > div > i,
    .tab-verschenken-wrapper > div > i,
    .tab-wetter-wrapper > div > i,
    .tab-beschreibung-wrapper > div > i {
        display: none !important;
    }

    /* Reduziert zusätzlich das Padding leicht, um mobil noch mehr Platz zu gewinnen */
    .tab-voraussetzungen-wrapper > div,
    .tab-angebot-wrapper > div,
    .tab-verschenken-wrapper > div,
    .tab-wetter-wrapper > div,
    .tab-beschreibung-wrapper > div {
        padding: 15px 20px !important;
    }
}

/* ==========================================================================
   MOBILE FIX: FLUGINFOS (Highlights) ANPASSEN FÜR FLOATING BUTTON
   ========================================================================== */
@media (max-width: 767px) {
    .fzv-fluginfos-wrapper {
        gap: 15px !important; /* Holt die Icons etwas näher zusammen */
        padding-right: 45px !important; /* WICHTIG: Schutzzone für den schwebenden Bestellbutton */
        padding-left: 10px !important; /* Leichter optischer Ausgleich auf der linken Seite */
        justify-content: space-evenly !important;
    }
    
    .fzv-fluginfos-wrapper .fzv-info-row {
        flex: 0 1 40% !important; /* Verhindert, dass sich die Boxen zu stark in die Breite dehnen */
        margin-bottom: 20px !important; /* Etwas mehr Luft nach unten */
    }
}