/* --- Basis-Styling für die Bildergalerie (Desktop & Tablet) --- */

.abm-gallery-container {
    margin: 20px 0;
}
.abm-gallery-main-image {
    position: relative; /* Wichtig für die Positionierung der Pfeile */
    margin-bottom: 15px;
    padding: 0 10%; /* Schafft Platz für die Pfeile links und rechts */
}
.abm-gallery-main-image img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #eee; /* Optional: Ein dezenter Rahmen */
}

/* Thumbnails (Desktop & Tablet) */
.abm-gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}
.abm-gallery-thumb {
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.7;
}
.abm-gallery-thumb:hover {
    opacity: 1;
}
.abm-gallery-thumb.active {
    border-color: #9C7500; /* Ihre Primärfarbe */
    opacity: 1;
}
.abm-gallery-thumb img {
    width: 100%;
    height: 75px;
    object-fit: cover;
    display: block;
}

/* Pfeile (Desktop & Tablet) */
.abm-gallery-arrow {
    font-family: "ETmodules";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    font-size: 60px;
    color: #575656;
    cursor: pointer;
    transition: color 0.3s ease;
}
.abm-gallery-arrow:hover {
    color: #000;
}
.abm-gallery-arrow-prev {
    left: 0;
}
.abm-gallery-arrow-next {
    right: 0;
}


/* --- ANPASSUNGEN FÜR DIE HANDY-ANSICHT (unter 767px) --- */
@media screen and (max-width: 767px) {

    /* Hauptbild nimmt die volle Breite ein, kein seitlicher Abstand mehr */
    .abm-gallery-main-image {
        padding: 0;
    }

    .abm-gallery-main-image img {
        border: none; /* Kein Rahmen auf dem Handy */
    }

    /* Thumbnails komplett ausblenden */
    .abm-gallery-thumbnails {
        display: none;
    }

    /* Pfeile anpassen und über das Bild legen */
    .abm-gallery-arrow {
        height: 50px;
        width: 50px;
        font-size: 48px;
        line-height: 48px;
        background-color: #9c7500;
        color: #fff; /* Weiße Pfeile */
    }

    .abm-gallery-arrow:hover {
        color: #fff;
    }
}

/* --- Styling für das Immobilien-Status-Banner --- */

.abm-status-banner {
    z-index: 10;
    padding: 10px 50px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

/* Spezifische Farben für jeden Status */
.abm-status-reserviert {
    background-color: #293979; /* Orange für "Reserviert" */
}

.abm-status-verkauft {
    background-color: #293979; /* Rot für "Verkauft" */
}

/* --- Styling für die Immobilien-Fakten-Tabelle --- */
.abm-facts-container {
    margin: 30px 0;
}

.abm-facts-group {
    margin-bottom: 40px;
}

.abm-facts-group ul {
    padding-bottom: 0px;
}

.abm-facts-group-headline {
    font-size: 1.4em;
    border-bottom: 1px solid #9C7500; /* Dezente Trennlinie */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.abm-facts-list {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Spalte 1: 33%, Spalte 2: 66% */
    gap: 12px 20px; /* Vertikaler und horizontaler Abstand */
    margin: 0;
    padding: 0;
}

.abm-facts-list dt { /* Das Label (z.B. "Wohnfläche") */
    font-weight: normal;
}

.abm-facts-list dd { /* Der Wert (z.B. "150 m²") */
    margin: 0; /* Wichtig, um den Browser-Standard zurückzusetzen */
}

/* Styling für die Ausstattungs-Liste */
.abm-facts-features-list {
    list-style-type: disc;
    padding-left: 20px;
}

.abm-facts-features-list li {
    margin-bottom: 8px;
}

/* Styling für die Ausstattungs-Liste */
.abm-facts-ausstattung-list {
    list-style-type: disc;
    padding-left: 20px;
}

.abm-facts-ausstattung-list li {
    margin-bottom: 8px;
}