/* ==============================================
   ALLGEMEINES STYLING FÜR DIE FAHRZEUGLISTE
============================================== */

/* Container für alle Fahrzeuge */
.mobilede-listings {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

/* ==============================================
   STYLING FÜR EINZELNES FAHRZEUG (.mobilede-car)
============================================== */

.mobilede-car {
    width: 100%;
    max-width: 800px;
    transition: all 0.3s ease-in-out;
    display: flex;              /* Standard: Spalten-Layout (Bild oben, Info unten) */
    flex-direction: column;
    align-items: center;
    text-align: center;
  	background-color: #F7F7F7;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

/* ==============================================
   GALERIE FÜR FAHRZEUGBILDER
============================================== */

.mobilede-gallery {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.mobilede-gallery img {
    width: 100% !important;      /* Bild füllt Container-Breite */
    height: 350px !important;    /* Feste Höhe (anpassen nach Bedarf) */
    object-fit: cover !important;/* Bild wird zentriert und zugeschnitten */
    border-radius: 5px;
}

/* Allgemeiner Preisstil (etwas fetter) */
.mobilede-price {
    font-weight: 700 !important;
}

/* ==============================================
   INFO-BEREICH (Titel, Beschreibung, Details)
============================================== */

.mobilede-info {
    padding: 30px;
    text-align: center;   /* Standard: zentriert */
}

.mobilede-info h3 {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: left;
    margin-bottom: 5px;
}

/* ==============================================
   TITEL- & PREIS-HEADER (.mobilede-info-header)
============================================== */

.mobilede-info-header {
    display: flex;
    justify-content: space-between; /* Titel links, Preis rechts */
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.mobilede-info-header .mobilede-title {
    text-align: left;
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
}

.mobilede-info-header .mobilede-price {
    text-align: right;
    margin: 0 !important;
    font-size: 1.3rem;
    color: #28a745;
    font-weight: bold;
}

/* Model-Description (unterhalb des Titels) */
.model-description {
    font-size: 1.0rem;
    text-align: left;
    color: #666;
    margin: 4px 0 10px;  /* Abstand zum Titel */
}

/* ==============================================
   BUTTON-STYLING
============================================== */

.mobilede-button {
    display: inline-block;
    text-decoration: none;
    background: #007bff; /* ggf. dynamisch überschrieben */
    color: white;        /* ggf. dynamisch überschrieben */
    padding: 8px 15px;   /* ggf. dynamisch überschrieben */
    border-radius: 5px;  /* ggf. dynamisch überschrieben */
    text-align: center;
    transition: 0.3s;
    margin-bottom: 0px !important;
    float: right;
}

.mobilede-button:hover {
    background: #0056b3; /* ggf. dynamisch überschrieben */
}

/* ==============================================
   ALLGEMEINE TEXTSTILE IM INFO-BEREICH
============================================== */

.mobilede-info p {
    font-size: 1.0rem;
    margin: 0px 0;
}

.mobilede-info strong {
    font-weight: bold;
    color: #333;
}

/* ==============================================
   SPALTEN-REGELN (columns-X) – VOM DASHBOARD
============================================== */

.mobilede-listings.columns-2 .mobilede-car {
    width: calc(50% - 20px);
    max-width: none;
}

.mobilede-listings.columns-3 .mobilede-car {
    width: calc(33.33% - 20px);
    max-width: none;
}

.mobilede-listings.columns-4 .mobilede-car {
    width: calc(25% - 20px);
    max-width: none;
}

.mobilede-listings.columns-5 .mobilede-car {
    width: calc(20% - 20px);
    max-width: none;
}

/* ==============================================
   LAYOUT FÜR DETAIL-BLÖCKE (SPALTENANSICHT)
============================================== */

/* Container für Laufleistung, Getriebe, etc. */
.mobilede-details {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px;                  /* Abstand zwischen den Blöcken */
    margin-top: 10px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
}

/* ------------------------------------------------------ Einstellungen für Mobile Ansicht in der Spaltenansicht*/

@media (max-width: 768px) {
   .mobilede-listings.layout-mobile-column .mobilede-details .mobilede-detail-col {
        width: calc(50% - 10px);
        box-sizing: border-box;
        padding: 0;
        text-align: left;
    }
      .mobilede-listings.layout-mobile-column .mobilede-gallery img {
        height: 200px !important;
        object-fit: cover;
    }
     .mobilede-listings.layout-mobile-column .mobilede-car {
        width: 100% !important;
        max-width: 100% !important;
    }
      .mobilede-listings.layout-mobile-column .mobilede-info {
 		padding: 20px;
 		text-align: center;
	}
      /* Schriftgrößen für Titel & Model-Description verkleinern */
  	 .mobilede-listings.layout-mobile-column .mobilede-info h3 {
        font-size: 1.0rem;
        font-weight: bold;
        text-align: left;
        margin-bottom: 0px;
      	margin-top: 0px;
    }
      .mobilede-listings.layout-mobile-column .model-description {
        font-size: 0.9rem !important;
        text-align: left;
        color: #666;
        margin-top: 2px;
      	margin-bottom: 20px;
        line-height: 1.2;
    }
      /* Detail-Blöcke enger zusammenrücken */
    .mobilede-listings.layout-mobile-column .mobilede-details {
        display: flex !important;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 2px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
        margin-bottom: 20px;
    }
      /* Label und Value sehr klein, kein Abstand */
    .mobilede-listings.layout-mobile-column .detail-label {
        display: block;
        font-size: 0.7rem !important;
        color: #666;
        font-weight: normal;
        margin-top: 0px !important;
      	margin-bottom: 0px !important;
    }
    .mobilede-listings.layout-mobile-column .detail-value {
        display: block;
        font-size: 0.8rem !important;
        font-weight: 700;
        color: #242424;
        margin-top: 0px !important;
      	margin-bottom: 5px !important;
    }
  
    /* Preis in Row-Ansicht mobil kleiner und rot */
    .mobilede-listings.layout-mobile-column .mobilede-price {
        color: #C8081B !important;
        font-size: 1.0rem !important;
      	font-weight: 900 !important;
    }

    /* Button in Column-Ansicht mobil: rot, kleiner */
    .mobilede-listings.layout-mobile-column .mobilede-button {
        background: #C8081B;
        color: white;
        padding: 10px 10px;
        border-radius: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        text-decoration: none;
        font-size: 0.9rem !important;
    }
   /* Footer (Preis + Button) in einer Zeile, kleiner Abstand */
    .mobilede-listings.layout-mobile-column .mobilede-info-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;
    }

    /* Entferne Margin im Detail-Wrapper und Label */
    .mobilede-listings.layout-mobile-column .detail-wrapper {
        margin: 0px;
        padding-top: 0px;
        padding-right: 0px;
      	padding-bottom: 0px;
        padding-left: 0px;
    }
    .mobilede-listings.layout-mobile-column .detail-label {
        margin: 0 !important;
        line-height: 1.0;
    }
  
  
}




/* Desktop: 3 Spalten für die Detail-Blöcke */
@media (min-width: 769px) {
    .mobilede-details .mobilede-detail-col {
        width: calc(33.33% - 20px);
        box-sizing: border-box;
        padding: 0;
        text-align: left;
    }
}

/* Mobile: hier 3 Spalten (33.33%) – 
   kann auf 2 Spalten (50%) geändert werden, falls gewünscht */
@media (max-width: 768px) {
    .mobilede-details .mobilede-detail-col {
        width: calc(33.33% - 20px);
        box-sizing: border-box;
        padding: 0;
        text-align: left;
    }
}

/* ==============================================
   DETAILBLOCK-STYLING (Label + Value)
============================================== */

.detail-wrapper {
    margin-bottom: 5px;
}

.detail-label {
    display: block;
    font-size: 0.8rem;
    color: #666;
    font-weight: normal;
}

.detail-value {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #242424;
    margin-top: 0;
}

/* ==============================================
   FOOTER (Preis + Button)
============================================== */

.mobilede-info-footer {
    display: flex;
    justify-content: space-between; /* Preis links, Button rechts */
    align-items: center;
    margin-top: 10px;
}

/* ==============================================
   ROW-ANSICHT (layout-row)
============================================== */

/* layout-row wird vom Plugin hinzugefügt, wenn Zeilenansicht gewünscht ist */
.mobilede-listings.layout-row {
    display: block !important;  /* Container als Block */
}

/* Fahrzeug-Container in der Row-Ansicht: 
   Bild links, Info rechts (Desktop) */
.mobilede-listings.layout-row .mobilede-car {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
}

/* Galerie 350px breit am Desktop */
.mobilede-listings.layout-row .mobilede-gallery {
    width: 350px !important;
    flex-shrink: 0; /* verhindert, dass das Bild gequetscht wird */
}

/* Info-Bereich nimmt den restlichen Platz ein */
.mobilede-listings.layout-row .mobilede-info {
    flex: 1;
    padding-left: 20px; /* etwas Abstand zum Bild */
  	padding-top: 10px;
  	padding-right:10px;
  	padding-bottom:10px;
}

/* Detail-Blöcke in der Row-Ansicht behalten 
   das gleiche Spaltenlayout wie in der Spaltenansicht */
.mobilede-listings.layout-row .mobilede-details {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
}

/* ------------------------------------------------------ Einstellungen für Mobile Ansicht in der Zeilenansicht*/
@media (max-width: 769px) {
    /* In der Mobile-Zeilenansicht: Detail-Blöcke in 3 Spalten */
  .mobilede-listings.layout-mobile-row .mobilede-details {
      display: flex !important;
      flex-wrap: wrap;
      gap: 5px !important; /* Abstand zwischen den Spalten */
      text-align: left !important;
  }
  .mobilede-listings.layout-mobile-row .mobilede-details .mobilede-detail-col {
      width: calc(50% - 2px) !important;
      box-sizing: border-box;
      padding: 0;
      text-align: left;
  }
  
   .mobilede-listings.layout-mobile-row .mobilede-car {
      display: flex !important;
      flex-direction: row !important;
      width: 100% !important;
      max-width: 100% !important;
      align-items: flex-start !important;
      text-align: left !important;
      margin-top: 5px !important;
      box-shadow: 0px 0px 5px 0px rgba(22,32,47,0.11);
      border-radius: 5px;
  }
      
    .mobilede-listings.layout-mobile-row .mobilede-gallery {
        width: 33.33% !important;
        height: 100% !important;
      	flex-shrink: 0;
      	overflow: hidden; 
        border-radius: 5px 0px 0px 5px;
    }
    .mobilede-listings.layout-mobile-row .mobilede-gallery img {
        width: 100% !important;
        height: 100% !important;
      	object-fit: cover !important;
    }
    .mobilede-listings.layout-mobile-row .mobilede-info {
        flex: 1;
        padding-left: 20px; /* etwas Abstand zum Bild */
  		padding-top: 10px;
  		padding-right:10px;
  		padding-bottom:10px;
    }
   
    .mobilede-listings.layout-mobile-row .mobilede-details {
        display: flex !important;
        flex-wrap: wrap;
        gap: 2px !important;
        margin-top: 2px !important;
      	padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }
     .mobilede-listings.layout-mobile-row .detail-label {
        display: block;
        font-size: 0.4rem !important;
        color: #666;
        font-weight: normal;
        margin-top: 0px !important;
      	margin-bottom: 0px !important;
    }
    .mobilede-listings.layout-mobile-row .detail-value {
        display: block;
        font-size: 0.5rem !important;
        font-weight: 700;
        color: #242424;
        margin-top: 0px !important;
      	margin-bottom: 5px !important;
    }


    .mobilede-listings.layout-mobile-row .mobilede-price {
        color: #C8081B !important;
        font-size: 0.6rem !important;
      	font-weight: 900 !important;
    }
    .mobilede-listings.layout-mobile-row .mobilede-button {
        background: #C8081B;
        color: white;
        padding: 5px 10px 5px 10px;
        border-radius: 2px;
        margin: 0;
        font-size: 0.6rem !important;
    }
    .mobilede-listings.layout-mobile-row .mobilede-info-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;
    }
    .mobilede-listings.layout-mobile-row .detail-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }
  
  .mobilede-listings.layout-mobile-row .mobilede-info h3 {
        font-size: 0.6rem;
        font-weight: bold;
        text-align: left;
        margin-bottom: 0px;
      	margin-top: 0px;
    }
      .mobilede-listings.layout-mobile-row .model-description {
        font-size: 0.5rem !important;
        text-align: left;
        color: #666;
        margin-top: 2px;
      	margin-bottom: 10px;
        line-height: 1.2;
    }
}


/* ==============================================
   BUTTON-LINKS: UNTERSTREICHUNG ENTFERNEN
============================================== */

a.mobilede-button,
a.mobilede-button:link,
a.mobilede-button:visited,
a.mobilede-button:hover,
a.mobilede-button:active {
    text-decoration: none !important;
}


/* ----------------------------------------------------------------------------Styling für das Filterformular */
.mobilede-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    background: #f5f5f5 !important;
    padding: 15px;
    border: 1px solid #F5F5F5 !important;
    border-radius: 0px;
    margin-bottom: 20px;
}

.mobilede-filter-field {
    flex: 1;
    min-width: 150px;
    display: flex;
    flex-direction: column;
}

.mobilede-filter-field label {
    font-size: 0.9em;
    margin-bottom: 10px;
  	font-weight: 600;
    color: #333;
}

.mobilede-filter-field input,
.mobilede-filter-field select {
    padding: 8px;
    border: 1px solid #F5F5F5;
    border-radius: 3px;
    font-size: 0.9em;
}

.mobilede-filter-field input {
	border-radius: 3px;
  	border: solid;
    border: 1px;
  	border-color: red;

}

#mobilede_search {
	width: 100%;
  	border: 1px solid #F5F5F5;
  	border-radius: 3px;
  	padding: 8px;
  	transition: all .3s;
}


/*-------------------------------------------------------------------------Pagination Abschgnitt*/

/* Container der Pagination */
.mobilede-pagination {
    text-align: center;
    margin-top: 20px;
  	margin-bottom: 20px;
}

/* Allgemeine Einstellungen für alle Pagination-Links */
.mobilede-pagination a,
.mobilede-pagination span {
    display: inline-block;
    padding: 10px;
    margin: 0px;
    border: 1px solid #f5f5f5;
    border-radius: 0px;
    text-decoration: none !important;
    font-size: 0.9em;
}

/* Für die aktiven Seiten (aktuelle Seite) */
.mobilede-pagination-current {
    background-color: #C8081B;
    color: #fff;
    border-color: #0073aa;
}

/* Hover-Effekte für die Links */
.mobilede-pagination a:hover {
    background-color: #f0f0f0;
}

/* Spezifisch für "Previous" und "Next" */
.mobilede-pagination-prev,
.mobilede-pagination-next {
    font-weight: bold;
}