/* =====================================================================
   Startseite
   ===================================================================== */

/* --- Text und Bild nebeneinander -------------------------------------- */

.zweispalt {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--raum-xl);
    align-items: center;
}

/* Bild links, Text rechts */
.zweispalt--gedreht .zweispalt__text {
    order: 2;
}

.zweispalt__text > :last-child {
    margin-bottom: 0;
}

.zweispalt__bild {
    margin: 0;
    position: relative;
}

.zweispalt__bild img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

/* Angedeutete Rahmenlinie hinter dem Bild - gibt der Seite Tiefe,
   ohne ein weiteres Bild zu kosten. */
.zweispalt__bild::before {
    content: "";
    position: absolute;
    inset: var(--raum-s) calc(var(--raum-s) * -1) calc(var(--raum-s) * -1) var(--raum-s);
    border: 1px solid var(--farbe-akzent);
    border-radius: var(--radius);
    opacity: 0.28;
    z-index: -1;
}

.zweispalt--gedreht .zweispalt__bild::before {
    inset: var(--raum-s) var(--raum-s) calc(var(--raum-s) * -1) calc(var(--raum-s) * -1);
}

.unterschrift {
    font-family: var(--schrift-titel);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--farbe-akzent);
}

/* --- Eckdatenband ------------------------------------------------------ */

.eckdaten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--raum-m);
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.eckdaten__punkt {
    margin: 0;
    padding: 0 var(--raum-s);
}

/* Trennlinien nur zwischen den Punkten, nicht aussen */
.eckdaten__punkt + .eckdaten__punkt {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.eckdaten__zahl {
    display: block;
    font-family: var(--schrift-titel);
    font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
    line-height: 1.1;
    color: #fff;
}

.eckdaten__text {
    display: block;
    margin-top: var(--raum-2xs);
    font-size: 0.9rem;
    color: #b3ae9f;
}

/* --- Wohnungsvorschau --------------------------------------------------- */

.wohnungsraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--raum-m);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wohnungsraster li {
    margin: 0;
}

.wohnungskarte {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wohnungskarte:hover,
.wohnungskarte:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--schatten-tief);
    color: inherit;
}

.wohnungskarte__bild {
    display: block;
    overflow: hidden;
}

.wohnungskarte__bild img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.wohnungskarte:hover .wohnungskarte__bild img {
    transform: scale(1.05);
}

.wohnungskarte__text {
    display: block;
    padding: var(--raum-s) var(--raum-m) var(--raum-m);
}

.wohnungskarte__name {
    display: block;
    font-family: var(--schrift-titel);
    font-size: 1.3rem;
    color: var(--farbe-tinte);
}

.wohnungskarte__kurz {
    display: block;
    margin-top: 0.1rem;
    color: var(--farbe-akzent);
    font-size: 0.95rem;
}

.wohnungskarte__daten {
    display: block;
    margin-top: var(--raum-xs);
    padding-top: var(--raum-xs);
    border-top: 1px solid var(--farbe-linie);
    font-size: 0.88rem;
    color: var(--farbe-tinte-leise);
}

.abschnitt__abschluss {
    margin-top: var(--raum-l);
    margin-bottom: 0;
    text-align: center;
}

.zweispalt .abschnitt__abschluss {
    text-align: left;
}

/* --- Mobil --------------------------------------------------------------- */

@media (max-width: 62rem) {
    .zweispalt {
        grid-template-columns: 1fr;
        gap: var(--raum-l);
    }

    /* Auf schmalen Bildschirmen steht das Bild immer oben */
    .zweispalt--gedreht .zweispalt__text {
        order: 0;
    }

    .zweispalt__bild {
        order: -1;
    }

    .zweispalt__bild img {
        aspect-ratio: 3 / 2;
    }

    .zweispalt__bild::before {
        display: none;
    }

    .zweispalt .abschnitt__abschluss {
        text-align: center;
    }
}

@media (max-width: 44rem) {
    .eckdaten {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--raum-s);
    }

    /* Bei zwei Spalten passen die Trennlinien nicht mehr */
    .eckdaten__punkt + .eckdaten__punkt {
        border-left: 0;
    }

    .eckdaten__punkt {
        padding: var(--raum-xs) 0;
    }
}