/* Objektdarstellung — ergaenzt modern-style.css, ohne sie anzufassen.
   Angelegt 01.09.2026. Nutzt die vorhandenen Farbvariablen aus :root, damit
   die Seite sich nicht wie ein Fremdkoerper anfuehlt. */

.objekt-kopf {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 22px;
    margin-bottom: 26px;
}
.objekt-status {
    display: inline-block;
    background: var(--background-accent);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--border-radius);
    margin-bottom: 14px;
}
.objekt-kopf h2 { margin: 0 0 8px; line-height: 1.25; }
.objekt-adresse {
    color: var(--text-secondary);
    font-size: 1.0625rem;
    margin: 0 0 18px;
}
.objekt-adresse i { color: var(--accent-color); margin-right: 8px; }

/* Eckdaten: die vier Zahlen, auf die zuerst geschaut wird */
.objekt-eckdaten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}
.objekt-eckdaten > div {
    background: var(--background-primary);
    padding: 16px 18px;
}
.objekt-eckdaten .wert {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.objekt-eckdaten .schild {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

/* Galerie. Das erste Bild gross, der Rest als Raster darunter. */
.objekt-galerie { margin: 30px 0; }
.objekt-galerie a { display: block; overflow: hidden; border-radius: var(--border-radius); }
.objekt-galerie img { width: 100%; height: 100%; object-fit: cover; display: block;
    transition: var(--transition); }
.objekt-galerie a:hover img { transform: scale(1.03); }
.galerie-gross { margin-bottom: 12px; }
.galerie-gross img { max-height: 460px; }
.galerie-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.galerie-raster a { aspect-ratio: 4 / 3; }
/* Der Grundriss wird nicht beschnitten — sonst fehlt die Haelfte des Plans. */
.galerie-raster a.plan { background: var(--background-secondary); }
.galerie-raster a.plan img { object-fit: contain; }

/* Fliesstextbloecke */
.objekt-text { margin: 30px 0; }
.objekt-text h3 {
    font-size: 1.125rem;
    margin: 26px 0 10px;
    color: var(--text-primary);
}
.objekt-text h3:first-child { margin-top: 0; }
.objekt-text p { color: var(--text-secondary); line-height: 1.75; margin: 0 0 12px; }

/* Datenliste */
.objekt-daten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 40px;
    margin: 12px 0 0;
}
.objekt-daten > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9375rem;
}
.objekt-daten dt { color: var(--text-light); margin: 0; }
.objekt-daten dd { color: var(--text-primary); margin: 0; text-align: right; font-weight: 500; }

/* Abschluss: Anfrage */
.objekt-anfrage {
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 26px;
    margin-top: 34px;
    text-align: center;
}
.objekt-anfrage h3 { margin: 0 0 8px; }
.objekt-anfrage p { color: var(--text-secondary); margin: 0 0 18px; }
.objekt-knopf {
    display: inline-block;
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 13px 26px;
    border-radius: var(--border-radius);
    transition: var(--transition);
}
.objekt-knopf:hover { background: var(--primary-dark); }
.objekt-knopf i { margin-right: 8px; }

.objekt-hinweis {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 640px) {
    .objekt-eckdaten { grid-template-columns: repeat(2, 1fr); }
    .galerie-raster { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .objekt-daten dd { text-align: right; }
}