/* Sektion wohnung: CSS nur für #wohnung. Papier, Planblatt links, Fenster rechts. */
#wohnung > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); grid-template-rows: auto auto auto 1fr; align-content: start; }
#wohnung h2 { grid-column: 1 / span 8; grid-row: 1; max-width: none; margin-bottom: var(--s-7); }
#wohnung .w-text { grid-column: 9 / span 4; grid-row: 1; align-self: start; }
#wohnung .w-text p { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }

#wohnung .planbox { grid-column: 1 / span 6; grid-row: 2; position: relative; background: var(--white); border-top: 3px solid var(--igc-blue); padding: 36px 24px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); height: 356px; }
#wohnung .dimline { position: absolute; left: 24px; right: 24px; top: 14px; height: 12px; }
#wohnung .dimline::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--igc-blue); transform-origin: left; }
#wohnung .dimline i { position: absolute; top: 0; width: 1px; height: 12px; background: var(--igc-blue); transform: rotate(45deg); }
#wohnung .dimline i:nth-child(1) { left: 0; } #wohnung .dimline i:nth-child(2) { left: 50%; } #wohnung .dimline i:nth-child(3) { right: 0; }
#wohnung .planbox figure { position: relative; overflow: hidden; margin: 0; }
#wohnung .planbox img { display: block; width: 100%; height: 100%; object-fit: contain; }
#wohnung .tag { position: absolute; left: 0; bottom: 0; padding: 8px 16px; background: var(--white); color: var(--igc-blue); }

#wohnung .feat { grid-column: 1 / span 6; grid-row: 3; margin-top: var(--s-5); display: block; column-count: 2; column-gap: var(--s-5); }
#wohnung .feat li { position: relative; display: grid; break-inside: avoid; font-size: 15px; line-height: 1.4; }
#wohnung .partner { grid-column: 1 / span 6; grid-row: 4; margin-top: var(--s-4); font-size: 14px; line-height: 1.45; color: var(--ink-2); max-width: 62ch; }

#wohnung .windows { grid-column: 7 / span 6; grid-row: 2 / span 3; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 14px; align-items: end; min-height: 0; }
#wohnung .win { position: relative; overflow: hidden; margin: 0; background: var(--white); height: var(--hh); box-shadow: inset 0 0 0 10px var(--white); }
#wohnung .win img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; }
#wohnung .win:hover img { scale: 1.03; transition: scale .8s var(--ease-out); }

/* Bewegung nur mit .mo; Endzustand bei --p: 1 */
.mo #wohnung .dimline::before { transform: scaleX(clamp(0, (var(--p, 1) - .2) / .5, 1)); }
.mo #wohnung .win img { clip-path: inset(calc((1 - clamp(0, (var(--p, 1) - var(--d)) / .45, 1)) * 50%) 0); }

@media (max-width: 1023px) {
  #wohnung h2, #wohnung .w-text, #wohnung .planbox, #wohnung .feat, #wohnung .partner, #wohnung .windows { grid-column: 1 / -1; grid-row: auto; }
  #wohnung h2 { margin-bottom: var(--s-6); }
  #wohnung .w-text { margin-bottom: var(--s-6); }
  #wohnung .windows { height: 340px; margin-top: var(--s-6); }
}
@media (max-width: 767px) {
  /* Telefon: zwei Grundrisse untereinander in voller Breite, zwei Fenster zu halber Breite */
  #wohnung .planbox { height: auto; grid-template-columns: 1fr; row-gap: var(--s-5); padding: 36px 16px 16px; }
  #wohnung .planbox img { height: auto; }
  #wohnung .windows { grid-template-columns: 1fr 1fr; height: 360px; gap: 10px; }
  #wohnung .win--3 { display: none; }
}
@media (max-width: 639px) {
  #wohnung .dimline { left: 16px; right: 16px; }
  #wohnung .feat { column-count: 1; }
  #wohnung .windows { gap: 8px; }
}

/* niedrige Fenster (kleine Laptops): Sektion wächst mit dem Inhalt, nie unter einem Bildschirm */
@media (min-width: 1024px) {
  #wohnung { height: auto; min-height: calc(var(--h, 1) * 100svh); }
  #wohnung > .wrap { height: auto; }
}

/* kleine Laptops (1024 bis 1279): zwei breitere Fenster statt drei Streifen, Liste einspaltig */
@media (min-width: 1024px) and (max-width: 1279px) {
  #wohnung .windows { grid-template-columns: 1fr 1fr; align-self: start; height: 560px; }
  #wohnung .win--3 { display: none; }
  #wohnung .feat { column-count: 1; }
}