/* Villa Schwalbe – Grundriss-Grafik und Etagenstapel (Startseite und Grundriss-Seite) */

.grundriss { width: 100%; height: auto; }
.grundriss .raum { fill: color-mix(in srgb, var(--c) 16%, white); stroke: #2c363c; stroke-width: 3; stroke-linejoin: miter; transition: fill .3s var(--ease-out); }
.grundriss .zone:hover .raum, .grundriss .zone:focus-visible .raum { fill: color-mix(in srgb, var(--c) 40%, white); }
.grundriss .zone:focus-visible { outline: none; }
.grundriss .zone:focus-visible .raum { stroke: var(--tinte); stroke-width: 4; }
.grundriss .draussen { fill: rgba(255, 255, 255, .85); stroke: #5d6b73; stroke-width: 1.6; stroke-dasharray: 5 4; }
.grundriss .raum-label { font: 600 10.5px var(--font-text); fill: #3a464c; pointer-events: none; }
.grundriss .nummer { fill: #1d2529; }
.grundriss .nummer-text { font: 800 11px var(--font-text); fill: #fff; pointer-events: none; }
.grundriss .kern rect { fill: #eef1f2; stroke: #2c363c; stroke-width: 3; }
.grundriss .kern .aufzug { fill: none; stroke: #2c363c; stroke-width: 1.5; }
.grundriss .kern .stufe { stroke: #6f7d84; stroke-width: 1.4; }
.grundriss .kern text { font: 600 10.5px var(--font-text); fill: #3a464c; }
.grundriss .seiten-label { font: 700 13px var(--font-text); fill: var(--text); letter-spacing: .02em; }
.grundriss .meer { fill: none; stroke: var(--see); stroke-width: 3; }
.grundriss .nummer { stroke: #fff; stroke-width: 2; }
.grundriss .sued { --c: var(--sued); } .grundriss .west { --c: var(--west); } .grundriss .see { --c: var(--see); }

/* ---------- Etagenstapel ---------- */
.etagen-stapel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.stapel-hinweis { font-size: .84rem; font-weight: 700; color: var(--petrol); margin-bottom: .4rem; }
.stapel { position: relative; height: clamp(320px, 27vw, 400px); perspective: 1400px; }
.scheibe {
  position: absolute; left: 2%; width: 66%; top: calc((2 - var(--i)) * 27% + 3%); padding: 0; border: 0; background: none; cursor: pointer;
  z-index: calc(var(--i) + 1); transform: rotateX(57deg) rotateZ(-36deg); transform-origin: 50% 50%;
  transition: transform .5s var(--ease-out), opacity .35s var(--ease-out), filter .35s var(--ease-out);
}
.scheibe:focus-visible { outline: none; }
.scheibe-plan {
  display: block; padding: 3%; border-radius: 8px; background: rgba(255, 255, 255, .97);
  box-shadow: 0 0 0 1px rgba(8, 63, 77, .18), 0 10px 0 -1px #b9c8cf, 0 10px 0 0 rgba(8, 63, 77, .18), 0 26px 34px -12px rgba(8, 63, 77, .45);
  transition: box-shadow .35s var(--ease-out);
}
.scheibe .grundriss .raum-label, .scheibe .grundriss .nummer-text, .scheibe .grundriss .seiten-label, .scheibe .grundriss .meer, .scheibe .grundriss .kern .stufe { display: none; }
.scheibe .grundriss .raum, .scheibe .grundriss .kern rect { stroke-width: 5; }
.scheibe .grundriss .nummer { r: 18px; }
.scheibe:not(.ist-aktiv) { filter: saturate(.35) brightness(1.03); }
.scheibe.ist-aktiv { transform: translateY(-18px) rotateX(57deg) rotateZ(-36deg); opacity: 1; filter: none; }
.scheibe.ist-aktiv .scheibe-plan { box-shadow: 0 0 0 3px var(--tuerkis), 0 10px 0 -1px #b9c8cf, 0 10px 0 2px var(--tuerkis), 0 34px 40px -12px rgba(8, 63, 77, .5); }
.scheibe:hover { opacity: 1; }
.scheibe:focus-visible .scheibe-plan { box-shadow: 0 0 0 4px var(--tinte), 0 10px 0 -1px #b9c8cf, 0 34px 40px -12px rgba(8, 63, 77, .5); }
.stapel-namen { position: absolute; inset: 0; list-style: none; padding: 0; margin: 0; pointer-events: none; z-index: 5; }
.stapel-namen li {
  position: absolute; right: 0; top: calc((2 - var(--i)) * 27% + 10%);
  font: 500 1rem var(--font-kopf); color: var(--text); transition: color .3s var(--ease-out), transform .3s var(--ease-out);
  pointer-events: auto; cursor: pointer; padding: .4rem 0 .4rem .4rem;
}
.stapel-namen li::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: .4rem; vertical-align: middle; background: currentColor; opacity: .5; }
.stapel-namen li.ist-aktiv { color: var(--petrol); font-weight: 500; transform: translateX(-4px); }

.stapel-plan { padding: clamp(1rem, 2vw, 1.5rem); border-radius: var(--radius); background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px rgba(8, 63, 77, .1), var(--schatten-leicht); }
@media (prefers-reduced-motion: no-preference) { .stapel-plan:not([hidden]) { animation: plan-auf .45s var(--ease-out) both; } }
@keyframes plan-auf { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.stapel-titel { font-size: 1.4rem; margin-bottom: .3rem; }
.stapel-liste { list-style: none; padding: 0; margin-top: .8rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.stapel-liste li { display: grid; gap: .15rem; align-content: start; padding: .75rem .85rem; border-radius: 12px; background: var(--flaeche); font-size: .84rem; }
.stapel-liste li > a { color: var(--tinte); text-decoration: none; font-size: .95rem; }
.stapel-liste li > a::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: .45rem; border-radius: 3px; background: var(--c); }
.stapel-liste li > a:hover { color: var(--petrol); text-decoration: underline; }
.stapel-liste .plan-preis { margin-top: .2rem; font-weight: 600; color: var(--tinte); }
.stapel-liste .plan-preis b { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stapel-liste .hinweis-bestaetigen { display: block; }
.stapel-liste .plan-hinweis { grid-column: 1 / -1; display: flex; gap: .5rem; align-items: center; background: transparent; padding: .2rem; }
.stapel-liste .plan-hinweis .icon { color: var(--petrol); }
.stapel-liste .sued { --c: var(--sued); } .stapel-liste .west { --c: var(--west); } .stapel-liste .see { --c: var(--see); }

@media (max-width: 760px) {
  .etagen-stapel { grid-template-columns: 1fr; }
  .stapel { height: 330px; max-width: 380px; }
  .scheibe { left: 9%; width: 56%; }
  .stapel-liste { grid-template-columns: 1fr; }
  .stapel-plan .grundriss .raum-label, .stapel-plan .grundriss .kern text { display: none; }
  .stapel-plan .grundriss .nummer { r: 19px; }
  .stapel-plan .grundriss .nummer-text { font-size: 15px; }
  .stapel-plan .grundriss .seiten-label { font-size: 20px; }
}