/*
Theme Name: ListingHive Child
Theme URI: https://hivepress.io/themes/listinghive
Template: listinghive
Author: HivePress
Author URI: https://hivepress.io
Description: nfood theme description
Version: 1.2.11.1765396624
Updated: 2025-12-10 20:57:04
*/

/* --- HIER FÄNGT DEIN CODE AN --- */

/* 1. Das Anmelde-Fenster (Login Popup) */
/* Wir sprechen beide möglichen Namen an, um sicherzugehen */
.hp-modal__content,
.fancybox-content {
    border-radius: 25px !important;
    overflow: hidden !important;
    /* Damit Bilder nicht über den Rand lappen */
}

/* 2. Alle Eingabefelder (Input) rund machen */
/* Ich habe die Liste aus deinem Parent-Theme übernommen und angepasst */
input[type='text'],
input[type='password'],
input[type='email'],
input[type='search'],
input[type='tel'],
input[type='number'],
textarea,
select,
.hp-field__input {
    border-radius: 15px !important;
    /* Schön rund */
    border: 1px solid #ddd !important;
    padding: 10px 15px !important;
    /* Mehr Platz im Feld */
}

/* 3. Buttons (Anmelden, Suchen etc.) */
button,
.button,
.hp-btn,
input[type="submit"] {
    border-radius: 50px !important;
    /* Pille-Form */
}

/* 4. Die Inserat-Karten (Listings) auf der Startseite */
.hp-listing--view-block,
.hp-vendor--view-block,
.hp-listing-category--view-block {
    border-radius: 20px !important;
    border: none !important;
    /* Entfernt den harten grauen Rand */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    /* Weicher Schatten statt Rand */
}

/* 5. Bilder in den Karten oben abrunden */
.hp-listing--view-block .hp-listing__image img {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

/* --- HIER HÖRT DEIN CODE AUF --- */

/* =========================================
   MODERNISIERUNG: Soft UI & Card Design
   ========================================= */

/* 1. Die Inserat-Karten (Listings) & Anbieter (Vendors) */
.hp-listing--view-block,
.hp-vendor--view-block,
.hp-listing-category--view-block {
    border: none !important;
    /* Weg mit dem grauen Rand */
    background: #fff !important;
    border-radius: 20px !important;
    /* Runde Ecken */
    /* Weicher, moderner Schatten (Blur) */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
    /* Animation vorbereiten */
    overflow: hidden;
    /* Damit Bilder die runden Ecken nicht kaputt machen */
}

/* 2. Hover-Effekt: Karte schwebt nach oben */
.hp-listing--view-block:hover,
.hp-vendor--view-block:hover {
    transform: translateY(-8px) !important;
    /* Geht 8px nach oben */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
    /* Schatten wird stärker */
}

/* 3. Bilder modernisieren */
.hp-listing__image img {
    border-radius: 0 !important;
    /* Das Bild füllt den oberen Bereich komplett */
    height: 220px !important;
    /* Einheitliche Höhe für alle Bilder erzwingen */
    object-fit: cover !important;
    /* Bild wird zugeschnitten, nicht verzerrt */
}

/* 4. Die Suchleiste (Search Bar) - Der "Airbnb-Look" */
.hp-form--listing-search {
    background: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    /* Pille */
    padding: 10px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
    /* Schwebende Suche */
    max-width: 900px !important;
    /* Nicht zu breit ziehen */
    margin: 0 auto !important;
    /* Zentrieren */
}

/* Die Eingabefelder in der Suche ohne Rand */
.hp-form--listing-search .hp-field__input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}


/* Wir sprechen gezielt den Button im Suchformular an */
.hp-form--listing-search .hp-form__button {
    background-color: #2ecc71 !important;
    /* Dein Grün */
    color: #ffffff !important;
    border-radius: 50px !important;
    /* Rund */
    border: none !important;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4) !important;
    /* Grüner Schatten */
}

/* Hover-Effekt für den Such-Button */
.hp-form--listing-search .hp-form__button:hover {
    background-color: #27ae60 !important;
    /* Dunkleres Grün */
    transform: translateY(-2px) !important;
}

/* 5. Typografie und Abstände in der Karte */
.hp-listing__content {
    padding: 25px !important;
    /* Mehr Luft innen */
}

.hp-listing__title {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
}

/* Metadaten (Preise, Datum) etwas dezenter */
.hp-listing__attributes--primary .hp-listing__attribute {
    color: #555;
    font-weight: 500;
}

/* 6. Footer der Karte (Dünne Linie weg oder weicher machen) */
.hp-listing__footer {
    border-top: 1px solid #f0f0f0 !important;
    /* Sehr helle Linie */
    padding: 15px 25px !important;
}

/* =========================================
   Hintergrundfarbe (Body)
   ========================================= */

body {
    background-color: #f5f7fa !important;
    /* Ein sehr modernes, kühles Hellgrau */
    color: #333 !important;
    /* Textfarbe (Dunkelgrau ist angenehmer als Schwarz) */
}

/* Optional: Falls der Header oben weiß bleiben soll (wie eine Menüleiste) */
.header-navbar {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    /* Leichter Schatten für den Header */
}

/* =========================================
   LOGO GRÖSSE ANPASSEN
   ========================================= */
/* Exakte Anpassung für dein nfood Logo */

.header-logo .custom-logo-link img.custom-logo {
    height: 30px !important;
    /* Hier die Wunschhöhe einstellen (z.B. 50px, 60px) */
    width: auto !important;
    /* Zwingt den Browser, die Breite neu zu berechnen */
    max-width: 100% !important;
}

/* Optional: Den Link-Container anpassen, damit er nicht sperrig ist */
.header-logo .custom-logo-link {
    display: inline-block !important;
    line-height: 0 !important;
    /* Entfernt komische Abstände unter dem Bild */
}

/* --- "Teile dein Essen" Button (Korrigiert) --- */

/* Wir sprechen direkt das Element mit der Klasse an */
.hp-menu__item--listing-submit {
    background-color: #2ecc71 !important;
    /* Dein Grün */
    background-image: none !important;
    /* Entfernt Verläufe vom Theme */
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    border: none !important;
    padding: 12px 30px !important;
    /* Breite anpassen */

    /* Box Shadow für 3D Effekt */
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4) !important;
    transition: all 0.3s ease !important;

    /* Wichtig: Display muss stimmen, damit Padding greift */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Das Icon (Plus) und der Text sollen weiß sein */
.hp-menu__item--listing-submit i,
.hp-menu__item--listing-submit span {
    color: #ffffff !important;
}

/* Hover Effekt (Maus drüber) */
.hp-menu__item--listing-submit:hover {
    background-color: #27ae60 !important;
    /* Dunkleres Grün */
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(46, 204, 113, 0.6) !important;
    color: #fff !important;
}

/* =========================================
   SUCHFILTER MODERNISIEREN
   ========================================= */
/* =========================================
   NUR FILTER-ÜBERSCHRIFT & CHECKBOXEN
   ========================================= */

/* 1. Die Überschrift (Ernährungsweise) im Filter */
/* Wir nutzen die Klasse, die nur um die Checkboxen herum liegt */
.hp-form__field--checkboxes .hp-field__label span {
    text-transform: none !important;
    /* Caps Lock aus */
    font-weight: 700 !important;
    /* Fett */
    font-size: 16px !important;
    /* Gute Größe */
    color: #1a1a1a !important;
    /* Schwarz */
}

/* 2. Sicherheits-Regel: Falls Listings noch fett sind, machen wir sie normal */
.hp-listing__title {
    font-weight: 600 !important;
    /* Normales Fett für Titel */
    letter-spacing: 0 !important;
}

.hp-listing__attribute {
    font-weight: 400 !important;
    /* Normaler Text für Attribute im Inserat */
}

/* 3. Die Checkboxen (Kästchen & Text) */
.hp-field--checkbox span {
    font-size: 15px !important;
    font-weight: 400 !important;
    /* Normaler Text, nicht fett */
    color: #444 !important;
}

.hp-field--checkbox input[type="checkbox"] {
    accent-color: #2ecc71 !important;
    /* nfood Grün */
    width: 18px !important;
    height: 18px !important;
    vertical-align: middle !important;
}

/* =========================================
   FILTER-BUTTON MODERNISIEREN
   ========================================= */

/* 1. Das Aussehen des Buttons */
/* Wir sprechen ihn über den Footer-Container an, damit es nur diesen Button trifft */
.hp-page__sidebar .hp-form__footer .hp-form__button {
    background-color: #2ecc71 !important;
    /* Dein nfood-Grün */
    color: #ffffff !important;
    /* Weiße Schrift */
    font-size: 16px !important;
    font-weight: 700 !important;
    /* Fett */
    border-radius: 50px !important;
    /* Komplett rund (Pille) */
    border: none !important;

    width: 100% !important;
    /* Macht den Button so breit wie die Spalte */
    padding: 12px 0 !important;
    /* Macht ihn höher/klickbarer */
    margin-top: 0px !important;
    /* Etwas Abstand zu den Checkboxen oben drüber */

    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3) !important;
    /* Grüner Schatten */
    transition: all 0.3s ease !important;
}

/* 2. Hover-Effekt (Maus drüber) */
.hp-page__sidebar .hp-form__footer .hp-form__button:hover {
    background-color: #27ae60 !important;
    /* Etwas dunkleres Grün */
    transform: translateY(-3px) !important;
    /* Schwebt leicht nach oben */
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.5) !important;
}


/* =========================================
   TRENNLINIE IN DER SUCHE ENTFERNEN
   ========================================= */

/* 1. Den Strich zwischen den Feldern entfernen */
.hp-form--listing-search .hp-form__field,
.hp-form--listing-search .hp-form__field:not(:last-child) {
    border-right: none !important;
    /* Weg mit dem Strich */
    border-bottom: none !important;
    /* Sicherheitshalber auch unten */
}

/* 2. Abstand zwischen den Feldern schaffen */
.hp-form--listing-search .hp-form__field {
    margin-right: 10px !important;
    /* Luft zwischen "Was" und "Wo" */
}

/* 3. Auf dem Handy müssen die Felder untereinander Abstand haben */
@media only screen and (max-width: 768px) {
    .hp-form--listing-search .hp-form__field {
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }
}


/* =========================================
   MOBILE FINAL FIX (Komplettpaket)
   ========================================= */

@media only screen and (max-width: 768px) {

    /* 1. Der Filter-Button (Weiß/Grün) */
    body .hp-button--listing-filter {
        margin-top: 50px !important;
        margin-bottom: 20px !important;
        background-color: #ffffff !important;
        color: #2ecc71 !important;
        border: 2px solid #2ecc71 !important;
        border-radius: 50px !important;
        padding: 12px 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    /* 2. Container-Abstand der Felder */
    body .hp-form__field {
        margin-bottom: 15px !important;
        /* Wichtigster Abstand! */
        margin-right: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    /* 3. Die Eingabefelder selbst (Textposition) */
    body input.hp-field--search,
    body input.hp-field--text {
        /*padding-left: 100px !important;*/
        height: 50px !important;
        border-radius: 50px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. Spezial: Standort-Feld (Platz für Icon rechts) */
    body .hp-field--location input.hp-field--text {
        padding-right: 50px !important;
    }

    /* 5. Icon im Standortfeld */
    body .hp-field--location>a {
        right: 15px !important;
    }

    /* 6. Der Suchen-Button (Lupe) */
    body .hp-form--listing-search .hp-form__button {
        width: 100% !important;
        margin-top: 0px !important;
        border-radius: 50px !important;
        height: 50px !important;
    }
}


/* =========================================
   FIX: ABSTÄNDE SUCHE (Final & Korrigiert)
   ========================================= */

/* --- DESKTOP --- */
@media (min-width: 768px) {

    /* 1. Der weiße Kasten */
    body .hp-form--listing-search {
        display: flex !important;
        align-items: center !important;
        padding: 20px !important;
        /* Abstand zwischen Felder-Block und Suchen-Button */
        gap: 30px !important;
    }

    /* 2. Die Gruppe der beiden Eingabefelder */
    body .hp-form--listing-search .hp-form__fields {
        display: flex !important;
        width: 100% !important;
        /* HIER KORRIGIERT: "50px" zusammengeschrieben */
        gap: 50px !important;
        margin: 0 !important;
    }

    /* 3. Die Felder selbst */
    body .hp-form--listing-search .hp-form__field {
        margin: 0 !important;
        border: none !important;
        width: 100% !important;
    }
}

/* --- HANDY --- */
@media (max-width: 767px) {

    /* 1. Container: Untereinander */
    body .hp-form--listing-search {
        display: block !important;
        padding: 20px !important;
    }

    /* 2. Abstände nach unten */
    body .hp-form__field--search {
        margin-bottom: 20px !important;
    }

    /* 3. Button Abstand nach oben */
    body .hp-form__footer {
        margin-top: 20px !important;
    }

    /* 4. FIX FÜR VERSCHOBENEN TEXT IM FELD */
    /* Wir zwingen den Text nach links */
    body .hp-form--listing-search input[type="text"],
    body .hp-form--listing-search input[type="search"] {
        padding-left: 20px !important;
        /* Normaler Abstand links */
        text-align: left !important;
        /* Text linksbündig */
        height: 50px !important;
        /* Schöne Höhe für Finger */
    }

    /* Spezialfall: Standortfeld hat rechts ein Icon, daher rechts Platz lassen */
    body .hp-field--location input[type="text"] {
        padding-right: 40px !important;
    }
}

/* =========================================
   FIX: ANMELDEN-BUTTON (nfood Style)
   ========================================= */

/* 1. Der Button im Normalzustand */
body .hp-form__button.button-primary,
body input[type="submit"].button-primary {
    background-color: #2ecc71 !important;
    /* Dein nfood Grün */
    color: #ffffff !important;
    /* Weiße Schrift */
    border: none !important;
    /* Kein Rand */
    border-radius: 50px !important;
    /* Runde Pille */

    padding: 12px 30px !important;
    /* Innenabstand für gute Größe */
    font-weight: 700 !important;
    /* Fett */
    font-size: 15px !important;

    /* Der grüne 3D-Schatten */
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4) !important;

    /* Animation vorbereiten */
    transition: all 0.3s ease !important;
}

/* 2. Hover-Effekt (Maus drüber) */
body .hp-form__button.button-primary:hover,
body input[type="submit"].button-primary:hover {
    background-color: #27ae60 !important;
    /* Etwas dunkleres Grün */
    transform: translateY(-3px) !important;
    /* Schwebt 3 Pixel nach oben */
    box-shadow: 0 8px 25px rgba(46, 204, 113, 0.6) !important;
    /* Schatten wird größer */
    color: #ffffff !important;
}

/* 3. Klick-Effekt (Wenn man draufdrückt) */
body .hp-form__button.button-primary:active,
body input[type="submit"].button-primary:active {
    transform: translateY(-1px) !important;
    /* Geht kurz runter (Klick-Gefühl) */
    box-shadow: 0 2px 10px rgba(46, 204, 113, 0.4) !important;
}


/* Standard */
.wp-bottom-menu-item,
.wp-bottom-menu-item span,
.wp-bottom-menu-item i {
    color: #999 !important;
}

/* Aktiv – ICON + TEXT */
.wp-bottom-menu-item.is-active,
.wp-bottom-menu-item.is-active span,
.wp-bottom-menu-item.is-active i {
    color: #2ecc71 !important;
}

/* --- HIVEPRESS PROFIL-MENÜ NACH OBEN VERSCHIEBEN (TAB-STYLE) --- */

@media (max-width: 9999px) {
    /* Immer anwenden (auch Desktop) */

    /* Layout des Containers ändern */
    .hp-account-page .hp-row {
        display: flex;
        flex-direction: column;
        /* Stapelt Menü über den Inhalt */
    }

    /* Die Sidebar selbst */
    .hp-account-page .hp-page__sidebar {
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
        /* Trennlinie unten */
        padding-bottom: 10px;
    }

    /* Das Menü im Inneren horizontal machen */
    .hp-account-page .hp-menu--account-sidebar {
        display: flex;
        flex-wrap: nowrap;
        /* Kein Umbruch wenn möglich */
        overflow-x: auto;
        /* Scrollbar, falls Bildschrim zu klein */
        gap: 15px;
        /* Abstand zwischen den Links */
    }

    /* Einzelne Menüpunkte stylen */
    .hp-account-page .hp-menu__item--account-sidebar {
        border: none !important;
        background: #f5f5f5;
        /* Hintergrund grau */
        border-radius: 20px;
        /* Runde Ecken (Chip-Style) */
        white-space: nowrap;
    }

    .hp-account-page .hp-menu__item--account-sidebar a {
        padding: 8px 15px !important;
        display: block;
    }

    /* Aktiver Menüpunkt grün */
    .hp-account-page .hp-menu__item--account-sidebar.hp-menu__item--current {
        background: #2ecc71 !important;
        /* Dein Grün */
    }

    .hp-account-page .hp-menu__item--account-sidebar.hp-menu__item--current a {
        color: #fff !important;
    }
}

/* ================================================= */
/* DER "SMARTE" FIX (OHNE BODY-KLASSE) */
/* ================================================= */

/* 1. Sidebar ausblenden */
/* Logik: Wenn die Sidebar das "User-Account-Menü" enthält -> WEG DAMIT! */
aside.hp-page__sidebar:has(.hp-menu--user-account) {}

/* 2. Inhalt breit machen */
/* Logik: Wenn der Inhalt DIREKT neben dieser ausgeblendeten Sidebar liegt -> 100% BREITE */
aside.hp-page__sidebar:has(.hp-menu--user-account)+.hp-page__content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-right: 0 !important;
}

/* 3. Sicherheitshalber für die Zeile */
.hp-row:has(.hp-menu--user-account) {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* ================================================= */
/* HANDY FIX: Luft an den Seiten (Padding) */
/* ================================================= */

@media (max-width: 767px) {
    aside.hp-page__sidebar:has(.hp-menu--user-account)+.hp-page__content {
        padding-right: 15px !important;
        /* Abstand rechts */
        padding-left: 15px !important;
        /* Abstand links */
        box-sizing: border-box !important;
        /* WICHTIG: Damit die Seite nicht breiter als 100% wird */
    }
}


/* ================================================= */
/* FIX: ANMELDE-FENSTER TEXT (Padding Reset) */
/* ================================================= */

@media (max-width: 768px) {
    /* Wir müssen das 100px Padding aus dem "Mobile Final Fix" überschreiben */
    /* Wir zielen auf alle Eingabefelder innerhalb eines Popups (.hp-modal) */

    .hp-modal input.hp-field--text,
    .hp-modal input[type="text"],
    .hp-modal input[type="email"],
    .hp-modal input[type="password"] {
        padding-left: 15px !important;
        /* Normaler Abstand statt 100px */
    }
}


/* ================================================= */
/* 1. SWITCH BUTTONS DESIGN (Raster/Liste Umschalter) */
/* ================================================= */

.hp-view-switcher {
    display: flex;
    justify-content: flex-end;
    /* Rechtsbündig */
    margin-bottom: 20px;
    gap: 10px;
    width: 100%;
}

.hp-btn-switch {
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 50px !important;
    color: #555 !important;
    padding: 8px 15px !important;
    /* Etwas breiter für Text */
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Aktiver Zustand (Grün) */
.hp-btn-switch.active,
.hp-btn-switch:hover {
    background: #2ecc71 !important;
    color: #ffffff !important;
    border-color: #2ecc71 !important;
    box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
}


/* ================================================= */
/* 2. LIST VIEW LOGIK (Aktiviert durch JS Body-Klasse) */
/* ================================================= */

/* Nur wenn body die Klasse "hp-view-active-list" hat */
body.hp-view-active-list .hp-grid__item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 15px !important;
}

*

/* Der Container der Karte */
body.hp-view-active-list .hp-listing--view-block {
    display: flex !important;
    flex-direction: row !important;
    /* WICHTIG: "stretch" sorgt dafür, dass Bild & Text gleich hoch sind */
    align-items: stretch !important;
    min-height: 140px !important;
    /* Damit das Bild links sauber abgeschnitten wird */
    overflow: hidden !important;
}

/* Bild-Container Links */
body.hp-view-active-list .hp-listing--view-block .hp-listing__image {
    flex: 0 0 140px !important;
    /* Feste Breite */
    width: 140px !important;
    /* WICHTIG für den "Weißen Raum Fix": */
    height: auto !important;
    min-height: 100% !important;
    /* Muss so hoch sein wie der Text */
    padding: 0 !important;
    margin: 0 !important;
}

/* Das Bild selbst */
body.hp-view-active-list .hp-listing--view-block .hp-listing__image img {
    width: 100% !important;
    /* WICHTIG: Bild muss den ganzen Container füllen (kein weißer Raum) */
    height: 100% !important;
    object-fit: cover !important;
    /* Bild wird zugeschnitten, nicht verzerrt */

    /* WICHTIG: Ecken-Logik */
    /* Oben-Links: 20px | Oben-Rechts: 0 | Unten-Rechts: 0 | Unten-Links: 20px */
    border-radius: 20px 0 0 20px !important;
}

/* Inhalt Rechts */
body.hp-view-active-list .hp-listing--view-block .hp-listing__content {
    flex: 1 !important;
    padding: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Titel */
body.hp-view-active-list .hp-listing__title {
    font-size: 16px !important;
    margin-bottom: 5px !important;
}

/* Footer & Buttons */
body.hp-view-active-list .hp-listing--view-block .hp-listing__footer {
    position: static !important;
    margin-top: auto !important;
    padding-bottom: 5px !important;
    padding-right: 5px !important;
    border: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

/* ================================================= */
/* 3. HOVER EFFEKTE FÜR KARTEN (GRID & LISTE) */
/* ================================================= */

/* Grundzustand: Animation vorbereiten */
.hp-listing--view-block {
    transition: all 0.3s ease !important;
    /* Weicher Übergang für alles */
    border: 1px solid transparent !important;
    /* Platzhalter */
    /* Wichtig: Damit der Zoom nicht über die runden Ecken hinausgeht */
    overflow: hidden !important;
}

/* HOVER ZUSTAND (Maus drüber) - Die Karte schwebt */
.hp-listing--view-block:hover {
    transform: translateY(-5px) !important;
    /* Schwebt 5px nach oben */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
    /* Schatten wird tiefer/stärker */
    background-color: #ffffff !important;
    z-index: 10 !important;
    /* Stellt sicher, dass die schwebende Karte über anderen liegt */
}

/* BILD-ZOOM EFFEKT (Der "Wow"-Effekt) */
.hp-listing--view-block:hover .hp-listing__image img {
    transform: scale(1.05) !important;
    /* Zoomt 5% rein */
    transition: transform 0.5s ease !important;
    /* Langsamer Zoom */
}

/* Sicherheitshalber: Container begrenzt das Bild */
.hp-listing__image {
    overflow: hidden !important;
    /* Schneidet überstehendes Bild beim Zoom ab */
    border-radius: 20px !important;
    /* Erzwingt die Rundung auch beim Zoom */
}


/* ================================================= */
/* 4. HOVER EFFEKTE FÜR ICONS (NUR IN DEN CARDS) */
/* ================================================= */

/* --- GRUNDZUSTAND --- */
/* WICHTIG: Wir setzen .hp-listing--view-block davor. */
/* Das beschränkt alles auf die Kacheln/Liste. */

.hp-listing--view-block .hp-listing__action,
.hp-listing--view-block .hp-listing__action i {
    color: #bbbbbb !important;
    /* Standard Grau */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    text-decoration: none !important;
}

/* Icons etwas größer machen */
.hp-listing--view-block .hp-listing__action i {
    font-size: 20px !important;
    display: inline-block;
}

/* ------------------------------------------------- */
/* 1. FAVORIT (HERZ) -> ROT */
/* ------------------------------------------------- */

/* Hover Zustand */
.hp-listing--view-block .hp-listing__action--favorite:hover,
.hp-listing--view-block .hp-listing__action--favorite:hover i {
    color: #ff4757 !important;
    /* Herz-Rot */
    transform: scale(1.2);
    /* Icon wird größer */
}

/* Aktiv Zustand (bereits geliked) */
.hp-listing--view-block .hp-listing__action--active.hp-listing__action--favorite,
.hp-listing--view-block .hp-listing__action--active.hp-listing__action--favorite i {
    color: #ff4757 !important;
    /* Bleibt Rot */
}

/* ------------------------------------------------- */
/* 2. NACHRICHT / ALLES ANDERE -> GRÜN */
/* ------------------------------------------------- */

/* Alle Buttons außer Favorit */
.hp-listing--view-block .hp-listing__action:not(.hp-listing__action--favorite):hover,
.hp-listing--view-block .hp-listing__action:not(.hp-listing__action--favorite):hover i {
    color: #2ecc71 !important;
    /* nfood Grün */
    transform: scale(1.2);
    /* Icon wird größer */
}


/* ================================================= */
/* 5. UNIFORMITY FIX (GLEICHE HÖHE & TEXT-LIMIT) */
/* ================================================= */

/* --- A. TITEL BEGRENZEN (Grid & Liste) --- */
/* Schneidet den Titel nach max. 2 Zeilen mit "..." ab */
.hp-listing__title:not(td) {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    /* Anzahl der Zeilen */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3em !important;
    /* Zeilenhöhe */
    max-height: 2.6em !important;
    /* 2 Zeilen * 1.3em */
    margin-bottom: 5px !important;
}

/* --- B. BESCHREIBUNG / ATTRIBUTE BEGRENZEN --- */
/* Schneidet den Text unter dem Titel nach 2 Zeilen ab */
.hp-listing__attributes,
.hp-listing__description {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* --- C. GRID ANSICHT: KARTEN GLEICH HOCH MACHEN --- */

/* 1. Die Grid-Spalte auf volle Höhe zwingen */
.hp-grid__item {
    display: flex !important;
}

/* 2. Die Karte auf 100% Höhe ziehen */
.hp-listing--view-block {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    /* Wichtig für Grid */
    justify-content: space-between !important;
    /* Drückt Footer nach unten */
}

/* 3. Inhalt soll den Platz füllen */
.hp-listing__content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 4. Footer ganz nach unten drücken (im Grid) */
.hp-listing__footer {
    margin-top: auto !important;
}


/* --- D. LIST VIEW SPEZIAL-FIX --- */
/* Da wir oben flex-direction:column für Grid gesetzt haben, */
/* müssen wir für die Liste wieder auf 'row' zurückstellen */

body.hp-view-active-list .hp-listing--view-block {
    flex-direction: row !important;
    /* Zurück zu nebeneinander */
    height: 140px !important;
    /* Feste Höhe für die Karte */
    max-height: 140px !important;
    /* Darf nicht wachsen */
    overflow: hidden !important;
    /* Alles was übersteht, abschneiden */
}

/* Titel in der Liste: Nur 1 Zeile, damit es sauber bleibt */
body.hp-view-active-list .hp-listing__title:not(td) {
    -webkit-line-clamp: 1 !important;
    max-height: 1.3em !important;
}

/* Attribute in der Liste: Max 2 Zeilen */
body.hp-view-active-list .hp-listing__attributes {
    font-size: 13px !important;
    /* Etwas kleinerer Text */
    color: #777 !important;
    margin-top: 5px !important;
}


/* ================================================= */
/* 6. MOBILE LISTEN-ANSICHT (KOMPAKT & FESTE HÖHE) */
/* ================================================= */

@media (max-width: 767px) {

    /* 1. Die Karte: FESTE HÖHE */
    body.hp-view-active-list .hp-listing--view-block {
        position: relative !important;
        height: 110px !important;
        min-height: 110px !important;
        max-height: 110px !important;
        overflow: hidden !important;
        align-items: flex-start !important;
        padding-bottom: 0 !important;
        border-bottom: 1px solid #eee !important;
    }

    /* 2. Bild: Links fixiert */
    body.hp-view-active-list .hp-listing--view-block .hp-listing__image {
        flex: 0 0 110px !important;
        width: 110px !important;
        height: 110px !important;
    }

    body.hp-view-active-list .hp-listing--view-block .hp-listing__image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 20px 0 0 20px !important;
    }

    /* 3. Inhalt: LÜCKEN ENTFERNEN (Hier ist die Magie) */
    body.hp-view-active-list .hp-listing--view-block .hp-listing__content {
        /* Weniger Abstand oben (5px statt 8px) */
        padding: 5px 10px 0 10px !important;
        width: 100% !important;
        height: 110px !important;
        overflow: hidden !important;

        /* Flexbox benutzen, um Elemente eng aneinander zu packen */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 0px !important;
        /* Zwingt den Abstand zwischen Elementen auf 0 */
    }

    /* 4. Titel: Kompakt */
    body.hp-view-active-list .hp-listing__title:not(td) {
        font-size: 15px !important;
        /* Kein Abstand nach unten! */
        margin-bottom: 2px !important;
        margin-top: 0 !important;
        line-height: 1.1 !important;
        /* Zeilen enger zusammen */

        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* 5. Standort / Details: Abstand weg */
    body.hp-view-active-list .hp-listing__details {
        margin-bottom: 2px !important;
        /* Minimaler Abstand */
        margin-top: 0 !important;
        line-height: 1 !important;
    }

    /* 6. Eigenschaften: Kompakt */
    body.hp-view-active-list .hp-listing__attributes {
        margin-top: 0px !important;
        /* Kein Abstand nach oben */
        margin-bottom: 0px !important;
        line-height: 1 !important;
    }

    /* Dein Style für Eigenschaften-Icons */
    body.hp-view-active-list .hp-listing__attributes--ternary {
        display: inline-block !important;
        font-size: 0px !important;
        color: #000000 !important;
        margin-right: 8px !important;
        /* Verhindert, dass leere Zeilen Platz wegnehmen */
        min-height: 0 !important;
    }

    /* Datum weg */
    body.hp-view-active-list .hp-listing__created-date {
        display: none !important;
    }

    /* 7. ICONS (Herz/Nachricht) */
    body.hp-view-active-list .hp-listing--view-block .hp-listing__footer {
        position: absolute !important;
        bottom: 5px !important;
        right: 5px !important;
        background: transparent !important;
        z-index: 10 !important;
        display: flex !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ================================================= */
/* 7. FINALER FIX: NUR ICONS (FÜR GRID & LISTE) */
/* ================================================= */

/* 1. Text verstecken - Wir sprechen BEIDE Ansichten direkt an */
.hp-listing__attributes--ternary,
body.hp-view-active-list .hp-listing__attributes--ternary {
    font-size: 0 !important;
    /* Text weg */
    line-height: 0 !important;
    display: inline-block !important;
    min-height: 0 !important;
    /* Verhindert leere Zeilen */
    margin: 0 !important;
    color: transparent !important;
    /* Zur Sicherheit text unsichtbar */
}

/* 2. Icons sichtbar machen - Wir sprechen BEIDE Ansichten an */
.hp-listing__attributes--ternary i,
body.hp-view-active-list .hp-listing__attributes--ternary i {
    font-size: 15px !important;
    /* Icon Größe */
    color: #555555 !important;
    /* Icon Farbe (Dunkelgrau) */
    margin-right: 8px !important;
    /* Abstand rechts */
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 3. Container begrenzen (Damit alles in EINER Reihe bleibt) */
.hp-listing__attributes,
body.hp-view-active-list .hp-listing__attributes {
    height: 24px !important;
    /* Platz für exakt eine Zeile Icons */
    overflow: hidden !important;
    /* Alles was nicht passt, wird abgeschnitten */
    margin-top: 5px !important;
    /* Kleiner Abstand zum Titel */
    display: block !important;
}

/* ================================================= */
/* FILTER FIX: ICONS IMMER SICHTBAR (Hinter Text) */
/* ================================================= */

/* 1. Die System-Checkbox verstecken */
.hp-form__field--checkboxes input[type="checkbox"] {
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    z-index: -1 !important;
}

/* 2. Label Layout */
.hp-form__field--checkboxes label {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    cursor: pointer;
    margin-bottom: 5px !important;
}

/* 3. Text einrücken (Platz für das Theme-Kästchen links lassen) */
.hp-form__field--checkboxes input+span {
    margin-left: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 4. DAS IST DER FIX: Das Element hinter dem Text ZWINGEND anzeigen */
/* Wir überschreiben die Theme-Regel, die sagt "nur anzeigen wenn checked" */
.hp-form__field--checkboxes input+span::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block !important;
    margin-left: 8px !important;
    font-size: 15px !important;
    line-height: 1 !important;

    /* HIER DIE MAGIE: */
    opacity: 1 !important;
    /* Immer sichtbar machen! */
    visibility: visible !important;
    transform: none !important;
    /* Keine Zoom-Effekte vom Theme */
    content: "" !important;
    /* Platzhalter resetten */
    position: static !important;
    /* Nicht wild herumschweben lassen */
    width: auto !important;
    height: auto !important;
    background: transparent !important;
}

/* --- ICONS ZUORDNEN --- */

/* VEGAN (ID 2) */
.hp-form__field--checkboxes input[value="2"]+span::after {
    content: "\f06c" !important;
    color: #2ecc71 !important;
}

/* VEGETARISCH (ID 3) */
.hp-form__field--checkboxes input[value="3"]+span::after {
    content: "\f787" !important;
    color: #e67e22 !important;
}

/* GLUTENFREI (ID 4) */
.hp-form__field--checkboxes input[value="4"]+span::after {
    content: "\f7ec" !important;
    color: #f1c40f !important;
}

/* LAKTOSEFREI (ID 5) */
.hp-form__field--checkboxes input[value="5"]+span::after {
    content: "\f7a0" !important;
    color: #3498db !important;
}

/* HALAL (ID 6) */
.hp-form__field--checkboxes input[value="6"]+span::after {
    content: "\f699" !important;
    color: #9b59b6 !important;
}

/* 5. Aktiver Zustand (Text wird fett/grün beim Auswählen) */
/* Da wir ::after für das Icon nutzen, ist der normale Haken weg. */
/* Wir nutzen Farbe als Feedback. */
.hp-form__field--checkboxes input:checked+span {
    color: #2ecc71 !important;
    font-weight: 700 !important;
}

/* ================================================= */
/* SWITCHER NUR AUF DER SUCHE/ARCHIV ANZEIGEN */
/* ================================================= */
/* 1. Auf der Startseite ausblenden */
body.home .hp-view-switcher {
    display: none !important;
}

/* 2. Auf der Einzel-Ansicht (bei "Ähnliche Gerichte") ausblenden */
body.single-hp_listing .hp-view-switcher {
    display: none !important;
}

.hp-listings.hp-block.hp-table .hp-view-switcher {
    display: none !important;
}


/* 3. Auf Nutzer-Profilen (Vendor Page) ausblenden (Optional) */
/* Falls du es dort auch nicht willst, entferne die Kommentarsymbole */
/*
body.hp-template-vendor-view .hp-view-switcher {
    display: none !important;
}
*/

/* ================================================= */
/* PROFI-FOOTER DESIGN (Option B) */
/* ================================================= */

/* 1. Der Container (Weiß & Sauber) */
.site-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #eaeaea !important;
    /* Feine Linie oben */
    padding-top: 60px !important;
    padding-bottom: 20px !important;
    margin-top: 60px !important;
    /* Abstand zum Inhalt */
}

/* 2. Überschriften in den Spalten */
.site-footer h2,
.site-footer h3,
.widget__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
    /* GROSSBUCHSTABEN */
    letter-spacing: 1px !important;
}

/* 3. Texte & Links (Grau) */
.site-footer p,
.site-footer li a,
.site-footer .textwidget {
    color: #777777 !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    text-decoration: none !important;
}

/* 4. Hover-Effekt für Links (Grün) */
.site-footer li a:hover,
.site-footer p a:hover {
    color: #2ecc71 !important;
    padding-left: 5px !important;
    /* Kleiner Ruck nach rechts */
    transition: all 0.2s ease !important;
}

/* Listen-Punkte entfernen */
.site-footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-footer li {
    margin-bottom: 10px !important;
}

/* 5. Die Copyright-Leiste ganz unten */
.footer-navbar {
    margin-top: 40px !important;
    padding-top: 20px !important;
    border-top: 1px solid #f5f5f5 !important;
    /* Trennlinie */
    display: flex !important;
    justify-content: space-between !important;
    /* Links Text, Rechts Menü */
    flex-wrap: wrap !important;
}

/* Copyright Text */
.footer-navbar__copyright {
    color: #bbb !important;
    font-size: 13px !important;
}

/* Das Menü ganz unten (Impressum/Datenschutz) */
.footer-navbar__menu ul {
    display: flex !important;
    gap: 20px !important;
}

.footer-navbar__menu li a {
    color: #999 !important;
    font-weight: 500 !important;
}

/* HANDY ANPASSUNG */
@media (max-width: 768px) {
    .site-footer {
        text-align: center !important;
        /* Auf Handy alles zentrieren */
    }

    .footer-navbar {
        justify-content: center !important;
        gap: 15px !important;
    }

    .footer-navbar__menu ul {
        justify-content: center !important;
    }
}

/* ================================================= */
/* FINALER FOOTER-LINIEN FIX */
/* ================================================= */

/* 1. DIE UNGEWOLLTE LINIE ENTFERNEN (Widgets) */
/* Wir sprechen den Container und mögliche innere Elemente an */
.footer-widgets,
.site-footer .footer-widgets,
.footer-widgets .row {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    /* Lücke schließen */
}

/* 2. DIE GEWOLLTE LINIE (Navbar) */
.footer-navbar {
    /* Wir nutzen border-top als Trennlinie ZWISCHEN Widgets und Copyright */
    border-top: 1px solid #f5f5f5 !important;

    /* Falls du wirklich eine Linie ganz unten am Seitenende wolltest, */
    /* ändere das oben zu "border-bottom" und mach hier "border-top: none" */

    border-bottom: none !important;
    /* Unten keine Linie, sieht sauberer aus */

    margin-top: 0 !important;
    padding-top: 20px !important;
}

/* ================================================= */
/* 1. GLOBAL: FOOTER CLEANUP (Desktop & Mobile)      */
/* ================================================= */

/* Grüne Balken bei Titeln entfernen */
.widget__title::after,
.widget__title::before {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Titel Styling */
.widget__title {
    margin-bottom: 15px !important;
    padding-bottom: 0 !important;
    border: none !important;
}

/* Links im oberen Footer (Widgets) grau machen */
.footer-widgets a {
    text-decoration: none !important;
    color: #555 !important;
}

/* ================================================= */
/* 2. MOBILE OPTIMIERUNG (Alles unter 768px)         */
/* ================================================= */

@media (max-width: 1024px) {

    /* --- A. WP BOTTOM MENU (Die "Insel") --- */
    .wp-bottom-menu {
        bottom: 10px !important;
        left: 2.5% !important;
        width: 95% !important;
        background-color: #ffffff !important;
        border-radius: 20px !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        overflow: hidden !important;
        z-index: 9999 !important;
    }

    /* Styling der Menü-Icons */
    .wp-bottom-menu-item {
        padding: 10px 0 !important;
    }

    .wp-bottom-menu-item i {
        font-size: 22px !important;
        margin-bottom: 4px !important;
    }

    .wp-bottom-menu-item .wpbm-title {
        font-size: 10px !important;
        font-weight: 500 !important;
    }


    /* --- B. OBERER FOOTER (Widgets) --- */
    /* Alles zentrieren */
    .footer-widgets {
        text-align: center !important;
    }

    .footer-widgets .widget,
    .footer-widgets .textwidget {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }


    /* --- C. UNTERER FOOTER (Einfach & Zentriert) --- */

    /* Platz schaffen, damit Text nicht hinter der Insel verschwindet */
    .site-footer {
        padding-bottom: 100px !important;
    }

    /* Menü Container zentrieren */
    .footer-navbar__menu ul {
        display: flex !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* Listenelemente */
    .footer-navbar__menu li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        /* Oder inline-block, je nachdem wie du es willst */
        text-align: center !important;
        width: 100% !important;
    }

    /* Der Text selbst (Links) */
    .footer-navbar__menu li a {
        font-size: 11px !important;
        color: #999 !important;
        text-decoration: none !important;
        line-height: 1.5 !important;
    }
}

/* ================================================= */
/* FOOTER FINAL: WIDGETS OBEN + COPYRIGHT UNTEN */
/* ================================================= */

/* 1. Die alte Standard-Leiste (Navbar) komplett ausblenden */
.footer-navbar {
    display: none !important;
}

/* 2. Den Widget-Bereich flexibel machen (damit wir umbrechen können) */
.footer-widgets .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* 3. DAS 4. WIDGET (Unser Copyright) -> Volle Breite & Neue Zeile */
/* Wir greifen das letzte Element in der Reihe */
.footer-widgets .row>div:last-child {
    flex: 0 0 100% !important;
    /* Volle Breite erzwingen */
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 30px !important;
    /* Abstand nach oben zu den anderen Widgets */
    padding-top: 20px !important;
    border-top: 1px solid #eee !important;
    /* Feine Trennlinie */
    text-align: center !important;
    /* Alles zentrieren */
}

/* 4. Styling für deinen Text (Grau & Klein) */
.nfood-legal-line {
    font-size: 11px !important;
    color: #999 !important;
}

.nfood-legal-line a {
    color: #999 !important;
    text-decoration: none !important;
}

.nfood-legal-line .separator {
    margin: 0 5px !important;
    color: #ddd !important;
}

/* 5. Platz für die Insel auf dem Handy */
@media (max-width: 768px) {
    .footer-widgets {
        padding-bottom: 110px !important;
        /* Viel Luft unten */
    }
}

/* ================================================= */
/* 1. GLOBAL: "0 LISTINGS" IMMER AUSBLENDEN */
/* ================================================= */
.hp-listing-category__count {
    display: none !important;
}

/* ================================================= */
/* 2. HANDY KATEGORIEN: 3 STÜCK NEBENEINANDER */
/* ================================================= */

@media (max-width: 768px) {

    /* A. Der Container: Wir erzwingen ein 3er-Gitter */
    .hp-listing-categories .hp-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        /* 3 gleich große Spalten */
        gap: 8px !important;
        /* Kleiner Abstand dazwischen */
        margin: 0 !important;
        /* Keine negativen Ränder vom Theme */
        width: 100% !important;
    }

    /* B. Die Spalten (Items): Ränder entfernen! */
    /* Das war das Problem vorher: Das Theme hat hier Padding, das wir löschen müssen */
    .hp-listing-categories .hp-grid__item {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        /* WICHTIG: Innenabstand auf 0 */
        margin: 0 !important;
        flex: none !important;
    }

    /* C. Die Karte selbst */
    .hp-listing-category--view-block {
        border: none !important;
        background: transparent !important;
        text-align: center !important;
        margin-bottom: 0 !important;
    }

    /* D. Das Bild */
    .hp-listing-category__image {
        width: 100% !important;
        margin-bottom: 5px !important;
    }

    .hp-listing-category__image img {
        width: 100% !important;
        /*aspect-ratio: 1 / 1 !important; /* Macht die Bilder quadratisch */
        height: auto !important;
        object-fit: cover !important;
        border-radius: 15px !important;
        /* Moderne runde Ecken */
        display: block !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    }

    /* E. Der Name (Arabisch, Deutsch...) */
    .hp-listing-category__name {
        font-size: 11px !important;
        /* Passende Größe für 3 Spalten */
        font-weight: 600 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        /* Verhindert, dass lange Wörter das Layout sprengen */
    }
}


/* ================================================= */
/* GLOBAL FIX: STANDORT-FELD (Mapbox Style Reset) */
/* Gilt für Desktop & Handy */
/* ================================================= */

/* 1. Den Container von Mapbox durchsichtig machen */
.hp-form__field--location .mapboxgl-ctrl-geocoder,
.hp-form__field--location .mapboxgl-ctrl {
    background-color: transparent !important;
    /* Weiß weg */

}


/* ================================================= */
/* STANDORT-SUCHVORSCHLÄGE (Mapbox Dropdown) */
/* ================================================= */

/* 1. Der Container (Die Liste selbst) */
.suggestions-wrapper .suggestions {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 15px !important;
    /* Schön rund wie deine App */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    /* Schöner Schatten */
    margin-top: 10px !important;
    /* Abstand zum Eingabefeld */
    overflow: hidden !important;
    /* Damit nichts über die Ecken steht */
    padding: 0 !important;

    /* Falls es hinter anderen Dingen verschwindet: */
    position: absolute !important;
    z-index: 1000 !important;
    width: 100% !important;
}

/* 2. Die einzelnen Einträge (Zeilen) */
.suggestions-wrapper .suggestions li {
    padding: 12px 15px !important;
    /* Genug Platz für den Finger */
    border-bottom: 1px solid #f5f5f5 !important;
    /* Ganz feine Trennlinie */
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* Letzter Eintrag braucht keine Linie */
.suggestions-wrapper .suggestions li:last-child {
    border-bottom: none !important;
}

/* 3. HOVER & AKTIV (Wenn man drüberfährt oder auswählt) */
.suggestions-wrapper .suggestions li:hover,
.suggestions-wrapper .suggestions li.active {
    background-color: #f0fdf4 !important;
    /* Ganz helles nfood-Grün */
    padding-left: 20px !important;
    /* Kleiner Ruck nach rechts als Feedback */
}

/* 4. Der Text (Straßenname) */
.mapboxgl-ctrl-geocoder--suggestion-title {
    font-weight: 700 !important;
    color: #333 !important;
    font-size: 14px !important;
    margin-bottom: 2px !important;
}

/* 5. Der Text (Stadt/Land) */
.mapboxgl-ctrl-geocoder--suggestion-address {
    color: #888 !important;
    font-size: 12px !important;
}

/* Wenn ausgewählt, Textfarbe anpassen */
.suggestions-wrapper .suggestions li:hover .mapboxgl-ctrl-geocoder--suggestion-title,
.suggestions-wrapper .suggestions li.active .mapboxgl-ctrl-geocoder--suggestion-title {
    color: #2ecc71 !important;
    /* Dein Grün */
}

/* ================================================= */
/* MAPBOX BRANDING AUSBLENDEN */
/* ================================================= */

.mapboxgl-ctrl-geocoder--powered-by {
    display: none !important;
}


/* ================================================= */
/* FIX: WEISSES LOCH ZWISCHEN BILD UND TITEL */
/* ================================================= */

/* 1. Den Container zwingen, den Platzhalter zu ignorieren */
.hp-listing--view-block .hp-listing__image {
    aspect-ratio: auto !important;
    /* WICHTIG: Überschreibt das HTML-Style */
    height: auto !important;
    /* Soll sich dem Inhalt anpassen */
    margin-bottom: 0 !important;
    background: transparent !important;
    line-height: 0 !important;
    /* Killt Text-Abstand */
}

/* 2. Das Bild definiert die Höhe */
.hp-listing--view-block .hp-listing__image img {
    height: 220px !important;
    /* Deine gewünschte Höhe */
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    /* Verhindert Rand unten */
    margin: 0 !important;
}

/* 3. Den Header-Bereich auf 0 setzen */
.hp-listing--view-block .hp-listing__header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
}

/* 4. Den Inhalt (Titel) nach oben rücken */
.hp-listing--view-block .hp-listing__content {
    /* Oben nur 12px Abstand, damit es nah am Bild ist */
    padding: 12px 20px 20px 20px !important;

    /* Falls Flexbox genutzt wird, Lücken schließen */
    gap: 0 !important;
}

/* 5. Titel-Abstand nach oben killen */
.hp-listing--view-block .hp-listing__title {
    margin-top: 0 !important;
}



/* ================================================= */
/* RADIUS SLIDER STEUERUNG (Wer ist wann sichtbar?) */
/* ================================================= */

/* --- 1. GLOBAL (DESKTOP) --- */
/* Standard: Alter Slider AN, Neuer Slider AUS */

/* Den neuen manuellen Slider verstecken wir am PC */
.nfood-mobile-slider {
    display: none !important;
}

/* Den alten HivePress Slider lassen wir am PC in Ruhe */
.hp-field--number-range .ui-slider {
    display: block !important;
}


/* --- 2. MOBILE (HANDY) --- */
/* Hier drehen wir den Spieß um */

@media (max-width: 768px) {

    /* A. Den kaputten alten Slider verstecken */
    .hp-field--number-range .ui-slider {
        display: none !important;
    }

    /* B. Unseren neuen Slider ANZEIGEN & Stylen */
    .nfood-mobile-slider {
        display: block !important;
        width: 100% !important;
        height: 6px !important;
        margin-top: 15px !important;
        background: #e0e0e0 !important;
        border-radius: 5px !important;
        outline: none !important;
        -webkit-appearance: none;
        /* Wichtig für Chrome/Safari */
        accent-color: #2ecc71;
        /* Färbt den Balken grün */
    }

    /* Den Knopf stylen (Webkit) */
    .nfood-mobile-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 24px;
        height: 24px;
        background: #2ecc71;
        border: 3px solid #fff;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }

    /* Den Knopf stylen (Firefox) */
    .nfood-mobile-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
        background: #2ecc71;
        border: 3px solid #fff;
        border-radius: 50%;
        cursor: pointer;
    }
}

/* ================================================= */
/* HEADER: SCHWEBENDE INSEL (Floating Pill) */
/* ================================================= */

.header-navbar {
    /* 1. Die Form: Eine Insel */
    width: 95% !important;
    max-width: 1200px !important;
    /* Nicht zu breit auf Riesen-Monitoren */
    margin: 15px auto !important;
    /* 15px Abstand von oben, horizontal zentriert */
    border-radius: 50px !important;
    /* Runde Pille */

    /* 2. Der Look: Modern & Sauber */
    background-color: rgba(255, 255, 255, 0.95) !important;
    /* Leicht transparent */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    /* Weicher Schatten */
    border: 1px solid rgba(0, 0, 0, 0.02) !important;
    /* Ganz feiner Rand */

    /* 3. Die Position: Mitscrollen (Sticky) */
    position: sticky !important;
    top: 15px !important;
    /* Klebt 15px vom oberen Rand weg */
    z-index: 2 !important;
    /* Immer ganz oben liegen */

    /* Innenabstand anpassen, damit es mittig wirkt */
    padding: 10px 20px !important;
}

/* Optional: Den Container innen etwas aufräumen */
.header-navbar .container {
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* HANDY ANPASSUNG */
@media (max-width: 768px) {
    .header-navbar {
        width: 92% !important;
        /* Auf dem Handy etwas breiter */
        top: 10px !important;
        /* Etwas näher am Rand */
        margin: 10px auto !important;
        padding: 10px 15px !important;
        border-radius: 20px !important;
        /* Etwas weniger rund auf dem Handy, spart Platz */
    }
}

/* ================================================= */
/* MOBILE MENÜ: ALLES SOFORT SICHTBAR (Expand All) */
/* ================================================= */

@media (max-width: 768px) {

    /* 1. UNTERMENÜS IMMER ANZEIGEN */
    /* Wir überschreiben das Verstecken vom Theme */
    .header-navbar__burger .sub-menu {
        display: block !important;
        /* Sofort sichtbar */
        position: static !important;
        /* Normaler Fluss, kein Schweben */
        box-shadow: none !important;
        /* Kein Schatten nötig */
        background: transparent !important;
        /* Hintergrund passend */
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* 2. PFEILE ENTFERNEN (Die "Dropdown"-Indikatoren) */
    .header-navbar__burger .menu-item-has-children>a::after,
    .header-navbar__burger .menu-item-has-children::after {
        display: none !important;
        content: none !important;
    }

    /* 3. OPTIK DER LISTEN-ELEMENTE */
    /* Damit man erkennt, was Hauptpunkt und was Unterpunkt ist */

    /* Der Hauptpunkt (Dein Name / Account) */
    .header-navbar__burger .menu-item--user-account>a {
        font-weight: 800 !important;
        color: #333 !important;
        font-size: 18px !important;
        padding-bottom: 5px !important;
        border-bottom: none !important;
        /* Keine Linie direkt unter dem Namen */
    }

    /* Die Unterpunkte (Gerichte, Nachrichten...) */
    .header-navbar__burger .sub-menu li a {
        font-size: 16px !important;
        color: #666 !important;
        /* Etwas heller als der Haupttitel */
        display: flex !important;

    }

    /* Icons in den Unterpunkten grün färben */
    .header-navbar__burger .sub-menu i {
        color: #2ecc71 !important;
        margin-right: 10px !important;
    }
}

/* ================================================= */
/* KATEGORIE DROPDOWN (Mapbox Style) */
/* ================================================= */

/* 1. DAS FELD SELBST (Geschlossen) - Transparent wie gewünscht */
.select2-container--default .select2-selection--single {
    background-color: transparent !important;
    background: transparent !important;
    border: 1px solid #ddd !important;
    border-radius: 15px !important;
    height: 45px !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #333 !important;
    padding-left: 15px !important;
    font-size: 16px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 10px !important;
}

/* 2. DAS DROPDOWN (Die Liste) - Mapbox Style */
.select2-dropdown {
    background-color: #ffffff !important;
    /* Reinweiß */
    border: none !important;
    /* Kein Standard-Rand */
    border-radius: 15px !important;
    /* Runde Ecken */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    /* Der "Mapbox"-Schatten */
    margin-top: 10px !important;
    /* Abstand zum Feld */
    overflow: hidden !important;
    /* Sauberer Beschnitt */
    z-index: 99999 !important;
    padding: 0 !important;
}

/* 3. DIE EINTRÄGE (Zeilen) */
.select2-results__option {
    padding: 12px 15px !important;
    /* Viel Platz (wie bei Mapbox) */
    border-bottom: 1px solid #f5f5f5 !important;
    /* Feine Trennlinie */
    font-size: 14px !important;
    color: #333 !important;
    transition: all 0.2s ease !important;
    /* Weiche Animation */
    cursor: pointer !important;
}

/* Letzter Eintrag braucht keine Linie */
.select2-results__option:last-child {
    border-bottom: none !important;
}

/* 4. HOVER EFFEKT (Der "Nudge" nach rechts) */
/* Das ist der Highlight-Status bei Select2 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f0fdf4 !important;
    /* Ganz helles Grün */
    color: #2ecc71 !important;
    /* Text wird Grün */
    padding-left: 20px !important;
    /* Rutscht nach rechts */
    font-weight: 600 !important;
}

/* 5. SUCHFELD IM DROPDOWN (Falls vorhanden) */
.select2-search--dropdown {
    padding: 10px !important;
}

.select2-search__field {
    border-radius: 50px !important;
    /* Suchfeld auch rund */
    border: 1px solid #eee !important;
    padding: 8px 15px !important;
    outline: none !important;
}

/* ================================================= */
/* FIX: DROPDOWN HÖHE (Mehr anzeigen, weniger Scrollen) */
/* ================================================= */

/* Wir erlauben der Liste, bis zu 400px hoch zu werden */
/* (Das reicht für ca. 8-10 Einträge ohne Scrollen) */
.select2-results__options {
    max-height: 400px !important;
}

/* Optional: Auf dem Handy nicht ganz so riesig, damit Tastatur Platz hat */
@media (max-width: 768px) {
    .select2-results__options {
        max-height: 50vh !important;
        /* Maximal halber Bildschirm */
    }
}

/* ================================================= */
/* BREAKPOINT ÄNDERN: DESKTOP-MENÜ BIS 768px */
/* ================================================= */

/* Wir überschreiben die Theme-Regel (1024px) */
@media (min-width: 769px) {

    /* 1. Burger-Menü ausblenden (schon ab 769px) */
    .header-navbar__burger {
        display: none !important;
    }

    /* 2. Desktop-Menü einblenden (schon ab 769px) */
    .header-navbar__menu {
        display: flex !important;
        /* Oder block, je nach Theme */
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
    }

    /* Falls das Theme das Menü versteckt hat, holen wir es zurück */
    .header-navbar__end {
        display: flex !important;
        align-items: center !important;
    }
}

/* ================================================= */
/* FIX: BILDER-KARUSSELL (Slider) ANPASSEN */
/* ================================================= */
/* ================================================= */
/* FIX: BILDER-KARUSSELL (Slider) ANPASSEN */
/* ================================================= */

/* 1. Den Slider-Container zwingen, exakt 220px hoch zu sein */
.hp-listing--view-block .hp-listing__image-slider,
.hp-listing--view-block .hp-listing__image-slider .slick-list,
.hp-listing--view-block .hp-listing__image-slider .slick-track {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    margin-bottom: 0 !important;
    /* Kein Abstand nach unten */
    aspect-ratio: auto !important;
    /* Ignoriert HTML-Format */
}

/* 2. Die Bilder IM Slider zwingen, sich anzupassen */
.hp-listing--view-block .hp-listing__image-slider img {
    height: 220px !important;
    /* Exakt wie die Einzelbilder */
    width: 100% !important;
    /* Volle Breite */
    object-fit: cover !important;
    /* Zuschneiden, nicht verzerren */
    border-radius: 0 !important;
    /* Ecken macht der Haupt-Container */
    display: block !important;
    margin: 0 !important;
}

/* 3. Lücken schließen */
.hp-listing--view-block .hp-listing__image-slider .slick-slide {
    margin: 0 !important;
    padding: 0 !important;
    height: 220px !important;
    /* Zentriert das Bild */
    align-items: center;
}

/* 4. Pfeile (Links/Rechts) hübsch machen */
/* Damit sie nicht komisch am Rand kleben */
.hp-listing--view-block .slick-arrow {
    z-index: 5 !important;
    width: 30px !important;
    height: 30px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    color: #333 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.hp-listing--view-block .slick-arrow:hover {
    background: #fff !important;
    color: #2ecc71 !important;
    /* Dein Grün */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Positionierung der Pfeile */
.hp-listing--view-block .slick-prev {
    left: 10px !important;
}

.hp-listing--view-block .slick-next {
    right: 10px !important;
}

/*Make the location link non-clickable for listings #hivepress #geolocation*/
.hp-listing--view-block .hp-listing__location a {
    pointer-events: none;
}