/* ──────────────────────────────────────────────────────────────────────────
   Muster (/muster), Neubau 11.10.2026 nach KONZEPT-2026-10-11.md.
   Eigene Datei, damit parallele Arbeiten an stil.css nicht kollidieren. Präfix .mu-.
   Phil: „Muster kleiner und eigene Unterseite mit Modellen, auch das Musterhaus."
   Oben die drei Exposés als Verzeichnis mit Haarlinien neben dem Titel, darunter
   die Modelle in drei verschiedenen Kompositionen (keine Kachelreihe).
   Farben nur aus stil.css: --tinte, --akzent, --band, --leise, --linie, --weiss.
   ────────────────────────────────────────────────────────────────────────── */

.mu-teil { position: relative; padding-block: var(--abschnitt); background: var(--weiss); }
.mu-teil--band { background: var(--band); }
.mu-titel { margin-top: clamp(14px, 1.4vw, 24px); }
.mu-satz { margin-top: clamp(16px, 1.6vw, 28px); }
.mu-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.6vw, 40px); }
.mu-kopf figure, .mu-teil figure { margin: 0; }
.mu-kopf img, .mu-teil img { display: block; width: 100%; height: auto; }
.mu-art { font-size: .75rem; line-height: 1.3; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.mu-h3 { margin-top: 10px; color: var(--tinte); font-weight: 400; letter-spacing: -.03em; line-height: 1.08; font-size: clamp(1.625rem, 2.2vw, 2.75rem); text-wrap: balance; }
.mu-h3 + .t-text { margin-top: clamp(14px, 1.4vw, 22px); }

/* ── 1. Auftakt: Titel links, Verzeichnis der drei Exposés rechts ────────── */
.mu-kopf { padding: calc(var(--kopf) + clamp(36px, 5vw, 100px)) 0 var(--abschnitt); background: var(--weiss); }
.mu-kopf__innen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 40px; align-items: center; }
.mu-kopf__text { grid-column: 1 / span 5; }
.mu-kopf .t-aussage { max-width: 20em; }
.mu-liste { grid-column: 7 / -1; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linie); }
.mu-eintrag {
  position: relative; display: grid; grid-template-columns: clamp(170px, 14vw, 290px) minmax(0, 1fr);
  column-gap: clamp(20px, 2.2vw, 40px); align-items: center; padding-block: clamp(18px, 1.8vw, 30px); border-top: 1px solid var(--linie);
}
.mu-eintrag::before { content: ""; position: absolute; left: 0; top: -1px; width: 34px; height: 1px; background: var(--akzent); }
.mu-eintrag__bild { display: block; border-radius: 4px; overflow: hidden; border: 1px solid var(--linie-fein); box-shadow: 0 24px 40px -30px rgba(16, 24, 32, .4); }
.mu-eintrag__bild img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .5s var(--weich); }
.mu-eintrag__bild:hover img { transform: scale(1.03); }
.mu-eintrag__titel { margin-top: 6px; color: var(--tinte); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; font-size: clamp(1.1875rem, 1.4vw, 1.625rem); }
.mu-eintrag__text > p:not(.mu-art):not(.mu-eintrag__weg) { margin-top: 6px; font-size: .9375rem; line-height: 1.5; color: var(--text); max-width: 30em; text-wrap: pretty; }
.mu-eintrag__weg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.mu-eintrag__weg .knopf { padding: 9px 16px; font-size: .9375rem; }
.mu-eintrag__weg em { font-style: normal; font-size: .8125rem; color: var(--leise); overflow-wrap: anywhere; }

/* ── 2. Modelle ──────────────────────────────────────────────────────────── */
.mu-zeile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 22px; align-items: end; }
.mu-zeile > div { grid-column: 1 / span 6; }
.mu-zeile > p { grid-column: 8 / -1; }

.mu-haus, .mu-wohnung, .mu-paar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); }

/* Musterhaus: groß, frei auf dem Band, Text rechts */
.mu-haus { margin-top: clamp(32px, 3.6vw, 72px); align-items: center; row-gap: 24px; }
.mu-haus__bild { grid-column: 1 / span 8; }
.mu-haus__text { grid-column: 9 / -1; padding-top: 18px; border-top: 1px solid var(--linie); }

/* Drei Einrichtungen: ein großes Bild, zwei kleine übereinander */
.mu-wohnung { margin-top: clamp(64px, 7vw, 140px); row-gap: clamp(18px, 1.6vw, 28px); align-items: start; }
.mu-wohnung__text { grid-column: 1 / span 3; grid-row: 1 / span 2; padding-top: 18px; border-top: 1px solid var(--linie); }
.mu-wohnung__eins { grid-column: 4 / span 6; grid-row: 1 / span 2; }
.mu-wohnung__zwei { grid-column: 10 / -1; grid-row: 1; }
.mu-wohnung__drei { grid-column: 10 / -1; grid-row: 2; }
/* Das Modell füllt im Standbild nur die Mitte: der Rahmen schneidet den leeren Rand weg. */
.mu-rahmen { display: block; overflow: hidden; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .9); background: #eef3f8; box-shadow: 0 30px 60px -46px rgba(16, 24, 32, .45); }
.mu-rahmen img { transform: scale(1.22); }
.mu-wohnung figcaption { margin-top: 10px; font-size: .8125rem; color: var(--leise); }

/* Gewerbe und Lage: klein links versetzt, groß rechts */
.mu-paar { margin-top: clamp(64px, 7vw, 140px); row-gap: 40px; align-items: start; }
.mu-paar__lage { grid-column: 1 / span 5; grid-row: 1; margin-top: clamp(40px, 6vw, 120px); }
.mu-paar__gewerbe { grid-column: 7 / -1; grid-row: 1; }
.mu-paar figcaption { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
.mu-paar figcaption p:last-child { margin-top: 6px; font-size: .9375rem; line-height: 1.5; color: var(--text); max-width: 30em; }

/* Ausschnitt aus einem Bildschirmfoto: der Rahmen schneidet, das Bild wird verschoben.
   Werte in Prozent der Rahmenbreite (margin-top rechnet ebenfalls von der Breite). */
.mu-schnitt { overflow: hidden; border-radius: 4px; background: var(--weiss); box-shadow: 0 34px 64px -48px rgba(16, 24, 32, .45); }
.mu-schnitt img { max-width: none; }
/* Gewerbe: nur das Modell rechts im Kopf des Exposés (720er Maße: x 315 bis 680, y 92 bis 250) */
.mu-schnitt--gewerbe { aspect-ratio: 365 / 158; }
.mu-schnitt--gewerbe img { width: 197.3%; margin-left: -86.3%; margin-top: -25.2%; }
/* Lage: nur die Karte, ohne Kopfleiste und Text (720er Maße: x 258 bis 695, y 78 bis 352) */
.mu-schnitt--lage { aspect-ratio: 437 / 268; }
.mu-schnitt--lage img { width: 164.8%; margin-left: -59%; margin-top: -17.85%; }

.mu-herkunft { margin-top: clamp(48px, 5vw, 96px); }

/* ── 3. Schluss ──────────────────────────────────────────────────────────── */
.mu-schluss__innen { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mu-schluss .t-aussage { max-width: 26em; }
.mu-schluss .mu-knoepfe { justify-content: center; }

/* ── Schmalere Fenster ──────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .mu-kopf__text { grid-column: 1 / span 5; }
  .mu-liste { grid-column: 6 / -1; }
  .mu-wohnung__text { grid-column: 1 / -1; grid-row: 1; }
  .mu-wohnung__eins { grid-column: 1 / span 8; grid-row: 2 / span 2; }
  .mu-wohnung__zwei { grid-column: 9 / -1; grid-row: 2; }
  .mu-wohnung__drei { grid-column: 9 / -1; grid-row: 3; }
}
@media (max-width: 900px) {
  .mu-kopf__text, .mu-liste, .mu-zeile > div, .mu-zeile > p, .mu-haus__bild, .mu-haus__text,
  .mu-paar__lage, .mu-paar__gewerbe { grid-column: 1 / -1; }
  .mu-paar__gewerbe { grid-row: 1; }
  .mu-paar__lage { grid-row: 2; margin-top: 0; width: 82%; }
  .mu-wohnung__eins { grid-column: 1 / -1; grid-row: 2; }
  .mu-wohnung__zwei { grid-column: 1 / span 6; grid-row: 3; }
  .mu-wohnung__drei { grid-column: 7 / -1; grid-row: 3; }
}
@media (max-width: 560px) {
  .mu-eintrag { grid-template-columns: 112px minmax(0, 1fr); align-items: start; column-gap: 16px; }
  .mu-eintrag__weg em { display: none; }
  .mu-paar__lage { width: 100%; }
}
/* Handy, 11.10.2026: Die drei Muster sind der Inhalt der Seite, also groß statt Briefmarke:
   Bild über die volle Breite, darunter Art, Titel, Satz und Knopf. */
@media (max-width: 560px) {
  .mu-eintrag { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding-block: 22px 26px; }
  .mu-eintrag__titel { font-size: 1.3125rem; text-wrap: balance; }
  .mu-eintrag__text > p:not(.mu-art):not(.mu-eintrag__weg) { font-size: 1rem; }
  .mu-eintrag__weg { margin-top: 16px; }
  .mu-eintrag__weg .knopf { width: 100%; min-height: 48px; }
  .mu-wohnung, .mu-paar { margin-top: 48px; }
  .mu-schluss__innen { align-items: stretch; }
}