/* ===========================================================
   Pestalozzistrasse 9, Birr – «Alle Häuser im Überblick» als
   Modellbühne: Isometrie mit Schildern, Detailfeld daneben,
   kompakte Hauskarten darunter. Ergänzt style.css.
   Gestaltung nach emperio.ch: graue Bühne mit Radius, gerundete
   Schilder ohne Schatten und Oberkante, Statusplaketten mit Radius 6,
   Zustände nur über die Fläche. Keine Versalien, keine Sperrung.
   =========================================================== */

/* ---------- Bühne: Modell links, Detailfeld rechts ---------- */

.iso-oben {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 340px);
  gap: 0 24px; align-items: start;
  background: var(--flaeche); border-radius: var(--radius-karte);
  padding: 24px;
  scroll-margin-top: calc(var(--kopf-hoehe) + 16px);
}
.iso-buehne {
  position: relative; min-width: 0;
  scroll-margin-top: calc(var(--kopf-hoehe) + 16px);
}

/* Fläche mit Schildern, Modell und Stäben. Mit JavaScript hält sie oben
   Platz für die Schilder über der Reihenhauszeile frei. */
.iso-flaeche { position: relative; }
/* Höhe der Zone setzt iso.js (64 px oder mehr) */
.iso-bereit:not(.iso-buchstaben) .iso-flaeche { padding-top: 64px; }
.iso-buchstaben .iso-flaeche { padding-top: 0 !important; }

/* Schilder: ohne JavaScript eine Reihe über dem Modell */
.iso-schilder {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 12px;
}
.iso-bereit .iso-schilder {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  display: block; margin: 0;
}
.iso-schild {
  /* Breite nach Inhalt (auch unabhängig von der Lage), längere Preistexte brechen um */
  width: max-content; min-width: 128px; max-width: 176px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 8px 12px 10px;
  background: #fff; color: var(--titel);
  border: 1px solid transparent; border-radius: var(--radius-klein);
  transition: background-color var(--dauer) var(--tempo), color var(--dauer) var(--tempo), border-color var(--dauer) var(--tempo);
}
.iso-bereit .iso-schild { position: absolute; top: 0; left: 0; cursor: pointer; }
/* drei Zeilen: Name, Preis, Status */
.iso-schild-kopf { display: contents; }
.iso-schild-name { font: 600 15px/19px var(--schrift); color: var(--titel); white-space: nowrap; }
.iso-schild-preis { font: 400 14px/20px var(--schrift); color: var(--text-karte); }
.iso-schild .status { order: 3; margin-top: 4px; padding: 1px 8px; font-size: 12px; line-height: 18px; }

@media (hover: hover) { .iso-bereit .iso-schild:hover { border-color: var(--gruen-dunkel); } }
.iso-schild.ist-fokus { border-color: var(--gruen-dunkel); }
.iso-schild.ist-tastenfokus { outline: 2px solid var(--gruen-dunkel); outline-offset: 2px; }
/* Zurücktretende Schilder: Schrift gedämpft, aber gut lesbar */
.iso-schild.ist-blass .iso-schild-name, .iso-schild.ist-blass .iso-schild-preis { color: #757575; }
.iso-schild.ist-reserviert .iso-schild-preis, .iso-schild.ist-verkauft .iso-schild-preis { color: #757575; }
/* Gewähltes Haus: dunkelgrün wie die Kontur im Modell, Plakette invertiert */
.iso-schild.ist-aktiv { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); }
.iso-schild.ist-aktiv .iso-schild-name { color: #fff; }
.iso-schild.ist-aktiv .iso-schild-preis { color: var(--text-auf-dunkel); }
.iso-schild.ist-aktiv .status { background: #fff; color: var(--gruen-dunkel); }
.iso-schild.ist-aktiv.ist-reserviert .status { background: var(--status-reserviert-flaeche); color: var(--status-reserviert-text); }
.iso-schild.ist-aktiv.ist-verkauft .status { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #fff; }

/* Modell */
.iso-bild { position: relative; }
.iso-modell { display: block; width: 100%; height: auto; overflow: visible; }
.iso-modell .f {
  fill: var(--n);
  stroke: rgba(40, 28, 22, 0.34); stroke-width: 0.7; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dauer-lang) var(--tempo), stroke var(--dauer-lang) var(--tempo);
}
.iso-bereit .iso-modell .f { cursor: pointer; }
.iso-modell .f.ist-reserviert { fill: var(--r); }
.iso-modell .f.ist-verkauft { fill: var(--g); }
.iso-modell .f.ist-blass { fill: var(--b); stroke: rgba(40, 28, 22, 0.16); }
.iso-modell .f.ist-blass.ist-reserviert { fill: var(--rb); }
.iso-modell .f.ist-blass.ist-verkauft { fill: var(--gb); }
/* Abgewandte Dachseiten: stehen im Bild hinter dem Nachbarhaus, deshalb neutral und nicht wählbar */
.iso-modell .f.hinten { pointer-events: none; }
.iso-modell.hat-betonung .f.hinten { fill: var(--b); stroke: rgba(40, 28, 22, 0.16); }
.iso-modell .garten { stroke: rgba(30, 70, 30, 0.28); }
/* Linien: vertikale Vertiefungen im Verputz, Ziegelreihen */
.iso-modell .l {
  fill: none; stroke: rgba(60, 40, 28, 0.2); stroke-width: 0.6;
  vector-effect: non-scaling-stroke; pointer-events: none;
  transition: stroke-opacity var(--dauer-lang) var(--tempo);
}
.iso-modell .ziegel { stroke: rgba(60, 15, 8, 0.2); }
.iso-modell .l.ist-verkauft { stroke: rgba(0, 0, 0, 0.12); }
.iso-modell .l.ist-blass { stroke-opacity: 0.35; }
.iso-modell .fuge, .iso-modell .fuge-dach {
  fill: none; stroke: rgba(40, 28, 22, 0.5); stroke-width: 0.9;
  vector-effect: non-scaling-stroke; pointer-events: none;
}
.iso-modell .iso-schatten { pointer-events: none; }
/* ungerichtet: kein Sonnenstand, keine Himmelsrichtung */
.iso-modell .weich { fill: var(--petrol); opacity: 0.16; filter: url(#iso-weich); }
.iso-modell .kontakt { fill: var(--petrol); opacity: 0.22; filter: url(#iso-weich-kontakt); }
.iso-modell .kontur { display: none; pointer-events: none; }
.iso-modell .kontur.ist-fokus { display: inline; filter: url(#iso-kontur-gruen); }
.iso-modell .kontur.ist-aktiv { display: inline; filter: url(#iso-kontur-petrol); }
/* Auswahlflächen: nur für Tastatur und Bildschirmleser, Maus und Finger treffen die Flächen */
.iso-modell .haus-feld { pointer-events: none; }
.iso-modell .treffer { fill: none; }

/* Stäbe vom Schild zum First (von iso.js gezeichnet) */
.iso-linien {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 100%; height: 100%; overflow: visible; pointer-events: none;
}
.iso-linien .halo { stroke: #fff; stroke-opacity: 0.85; stroke-width: 3; }
.iso-linien .strich { stroke: var(--gruen-dunkel); stroke-opacity: 0.7; stroke-width: 1; }
.iso-linien circle { fill: #fff; stroke: var(--gruen-dunkel); stroke-width: 1.5; }
.iso-linien g { transition: opacity var(--dauer) var(--tempo); }
.iso-linien g.ist-blass { opacity: 0.45; }
.iso-linien g.ist-fokus .strich { stroke: var(--gruen); stroke-opacity: 1; stroke-width: 1.5; }
.iso-linien g.ist-aktiv .strich { stroke: var(--gruen-dunkel); stroke-opacity: 1; stroke-width: 1.8; }
.iso-linien g.ist-aktiv circle { fill: var(--gruen-dunkel); stroke: #fff; }

/* Buchstaben am First: bei Schildern nur Ankerpunkt, sonst Marker als Kreis.
   Nur für den Bildschirm, der Druck hat eigene Regeln. */
.iso-punkte { position: absolute; inset: 0; pointer-events: none; }
.iso-punkt { position: absolute; width: 0; height: 0; overflow: hidden; color: transparent; }
.iso-buchstaben .iso-schilder, .iso-buchstaben .iso-linien { display: none; }
@media screen {
.iso-buchstaben .iso-punkt {
  width: 28px; height: 28px; overflow: visible;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, calc(-100% - 7px));
  background: #fff; color: var(--gruen-dunkel);
  border: 1px solid var(--gruen-dunkel); border-radius: 50%;
  font: 600 14px/1 var(--schrift);
  pointer-events: auto; cursor: pointer;
  transition: background-color var(--dauer) var(--tempo), color var(--dauer) var(--tempo), border-color var(--dauer) var(--tempo);
}
/* senkrechter Stab vom Kreis zum First */
.iso-buchstaben .iso-punkt::after {
  content: ""; position: absolute; left: 50%; top: calc(100% + 1px);
  width: 1.5px; height: 7px; margin-left: -0.75px; background: var(--gruen-dunkel);
}
/* Zurücktretende Buchstaben: heller Rand, Schrift voll lesbar */
.iso-buchstaben .iso-punkt.ist-blass { border-color: var(--grau); }
.iso-buchstaben .iso-punkt.ist-reserviert { background: var(--flaeche); color: #6b6b6b; border-color: var(--grau); }
.iso-buchstaben .iso-punkt.ist-verkauft { background: var(--hellgrau); color: var(--text-weich); border-color: var(--grau); }
.iso-buchstaben .iso-punkt.ist-aktiv { background: var(--gruen-dunkel); color: #fff; border-color: var(--gruen-dunkel); }
.iso-buchstaben .iso-punkt.ist-tastenfokus { outline: 2px solid var(--gruen-dunkel); outline-offset: 2px; }
.iso-buchstaben .iso-bild { margin-top: 30px; }
}

.iso-fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 2px 24px; margin-top: 16px;
  font-size: 14px; line-height: 1.4; color: var(--text-leise);
}
.iso-buehne .legende-garten::before { background: #93bd7f; }
/* Hinweise zur Auswahl nur, wenn die Auswahl auch funktioniert */
.iso-hinweis { display: none; color: var(--gruen-dunkel); font-weight: 500; }
.iso-js .iso-hinweis { display: inline; }

/* ---------- Detailfeld neben dem Modell: weisse Infokarte ---------- */

.haus-detail.iso-detail {
  margin: 0; padding: 24px;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: #fff; border: 0; border-radius: var(--radius-infokarte); color: var(--text);
}
.iso-detail .detail-kopf { margin-bottom: 18px; }
.iso-detail .detail-kopf .vorzeile { margin-bottom: 4px; font-weight: 400; color: var(--text-kurz); }
.iso-detail .detail-kopf h3 { font-size: var(--groesse-h3); line-height: 1.2; margin-bottom: 12px; }
.iso-detail .detail-werte {
  gap: 14px 18px; margin: 0 0 20px; padding: 16px 0;
  border-top: 1px solid var(--linie-hell); border-bottom: 1px solid var(--linie-hell);
}
.iso-detail .detail-werte dt { font-size: 14px; line-height: 1.4; color: var(--text-leise); }
.iso-detail .detail-werte dd { font: 600 20px/1.3 var(--schrift); color: var(--titel); }
.iso-detail .detail-preis { margin-bottom: 18px; gap: 8px 12px; }
.iso-detail .detail-preis > span:first-child { font: 600 28px/1.2 var(--schrift); color: var(--gruen-dunkel); }
.iso-detail .detail-knoepfe { flex-direction: column; gap: 12px; }
.iso-detail .detail-knoepfe .btn { width: 100%; min-height: 56px; padding: 10px 20px; }
.iso-detail > .kleingedruckt { margin-top: 18px; }
.detail-modell { display: none; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--text-weich); }
.iso-js .detail-modell { display: flex; }
.detail-modell a { color: var(--gruen-dunkel); font-weight: 600; }
.detail-modell-marke { flex: none; width: 18px; height: 18px; fill: #fff; stroke: var(--gruen-dunkel); stroke-width: 2.2; stroke-linejoin: round; }
/* Modell steht daneben: kein Sprunglink nötig */
.iso-oben .detail-modell-link { display: none; }

/* ---------- Kompakte Hauskarten ohne Grafik ---------- */

.iso-karten { margin-top: 16px; gap: 16px; }
.iso-karten .haus-karte { padding: 20px; }
.iso-karten .haus-typ { margin-bottom: 12px; }
.iso-karten .haus-werte {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 10px 12px;
  margin-bottom: 14px; padding: 12px 0;
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.iso-karten .haus-werte div { flex-direction: column-reverse; justify-content: flex-end; gap: 0; padding: 0; border: 0; }
.iso-karten .haus-werte dt { font-size: 12px; line-height: 1.35; }
.iso-karten .haus-werte dd { font-size: 15px; line-height: 1.3; }
.iso-karten .haus-fuss { margin-top: 10px; }

/* ---------- Anpassungen ---------- */

@media (max-width: 1279px) {
  .iso-karten { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .iso-karten .haus-karte { padding: 16px; }
  .iso-karten .haus-name { font-size: 22px; }
}

/* Bis 1100 px: Detailfeld unter der Bühne, Häuserliste darunter. Die Grenze liegt
   bewusst über dem allgemeinen Umbruch (1023 px): Neben dem Detailfeld fänden die
   Schilder unter etwa 1080 px keinen Platz mehr, iso.js zeigte dann Buchstaben.
   Schilder, solange sie ohne Überlappung Platz finden (iso.js), sonst Buchstaben. */
@media (max-width: 1100px) {
  .iso-oben { display: block; background: none; padding: 0; border-radius: 0; }
  .iso-buehne { background: var(--flaeche); border-radius: var(--radius-karte); padding: 20px 24px 18px; }
  .iso-bild { width: min(100%, 760px); margin-left: auto; margin-right: auto; }
  .iso-oben .detail-modell-link { display: inline; }

  .haus-detail.iso-detail {
    margin-top: 16px; padding: 24px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "kopf abschluss" "werte abschluss" "klein klein";
    gap: 16px 32px; align-items: start;
    background: var(--flaeche); border-radius: var(--radius-infokarte);
    --text-leise: #6b6b6b;
  }
  .iso-detail .detail-kopf { grid-area: kopf; margin: 0; }
  .iso-detail .detail-werte { grid-area: werte; margin: 0; border-color: var(--linie); }
  .iso-detail .detail-abschluss { grid-area: abschluss; }
  .iso-detail > .kleingedruckt { grid-area: klein; margin: 0; }

  .iso-karten { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
  .iso-karten .haus-karte {
    display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2.2fr) auto;
    grid-template-areas: "name werte preis" "typ werte fuss";
    column-gap: 24px; row-gap: 2px; align-items: center;
    padding: 14px 20px;
  }
  .iso-karten .haus-name { grid-area: name; font-size: 20px; }
  .iso-karten .haus-typ { grid-area: typ; margin: 0; }
  .iso-karten .haus-werte { grid-area: werte; display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; padding: 0; border: 0; }
  .iso-karten .haus-werte div { flex-direction: row; align-items: baseline; gap: 5px; }
  .iso-karten .haus-werte dd { order: -1; font-size: 14px; }
  .iso-karten .haus-werte dt { font-size: 13px; }
  .iso-karten .haus-preis { grid-area: preis; margin: 0; text-align: right; font-size: 18px; }
  .iso-karten .haus-fuss { grid-area: fuss; margin: 0; justify-content: flex-end; gap: 14px; }
}

@media (max-width: 760px) {
  /* Bühne bis an den Bildschirmrand wie die Objektbox von emperio.ch auf dem Handy */
  .iso-buehne { margin-left: calc(-1 * var(--seitenrand)); margin-right: calc(-1 * var(--seitenrand)); padding: 16px; }
  .iso-fuss { flex-direction: column; gap: 4px; font-size: 13px; }
  .iso-modell .kontur.ist-fokus { filter: url(#iso-kontur-gruen-dick); }
  .iso-modell .kontur.ist-aktiv { filter: url(#iso-kontur-petrol-dick); }

  /* Preis und Anfrage direkt unter dem Namen, damit sie nach einem Tipp ins Modell sichtbar sind */
  .haus-detail.iso-detail {
    padding: 20px 16px; gap: 14px;
    grid-template-columns: 1fr; grid-template-areas: "kopf" "abschluss" "werte" "klein";
  }
  .iso-detail .detail-kopf h3 { margin-bottom: 8px; }
  .iso-detail .detail-preis { margin-bottom: 14px; }
  .iso-detail .detail-preis > span:first-child { font-size: 24px; }
  .iso-detail .detail-werte { gap: 12px 20px; padding: 14px 0; }
  .iso-detail .detail-werte dd { font-size: 18px; }

  .iso-karten .haus-karte {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name status" "typ typ" "werte werte" "preis mehr";
    row-gap: 0; padding: 14px 16px;
  }
  .iso-karten .haus-name { font-size: 20px; }
  .iso-karten .haus-typ { margin-bottom: 8px; }
  .iso-karten .haus-werte { gap: 0 12px; }
  .iso-karten .haus-werte div { flex-direction: row; padding: 0; }
  .iso-karten .haus-werte dd { font-size: 14px; }
  .iso-karten .haus-werte dt { font-size: 13px; }
  .iso-karten .haus-fuss { display: contents; }
  .iso-karten .haus-fuss .status { grid-area: status; justify-self: end; }
  .iso-karten .haus-mehr { grid-area: mehr; justify-self: end; align-self: end; }
  .iso-karten .haus-preis { text-align: left; font-size: 17px; margin-top: 10px; }
}

@media screen and (max-width: 760px) {
  .iso-buchstaben .iso-punkt { width: 26px; height: 26px; font-size: 13px; }
}

/* Bei reduzierter Bewegung setzt style.css alle Übergänge auf 0.01 ms. Dann
   würden auch Abstände animiert, die iso.js setzt und sofort misst; deshalb
   in der Bühne gar keine Übergänge. */
@media (prefers-reduced-motion: reduce) {
  .iso-buehne, .iso-buehne *, .iso-buehne *::before, .iso-buehne *::after { transition: none !important; }
}

/* ---------- Druck ----------
   Die Schilder liegen am Bildschirm pixelgenau über dem Modell. Beim Drucken
   ändert sich die Breite, deshalb dort Buchstaben (Lage in Prozent) statt
   Schildern; Preise und Status stehen in den Hauskarten. */
@media print {
  #haeuser .titelzeile { break-after: avoid; page-break-after: avoid; }
  .iso-oben { display: block; background: none; padding: 0; }
  .iso-buehne { margin: 0; padding: 0; background: none; break-inside: avoid; }
  .iso-flaeche { padding-top: 0 !important; }
  .iso-schilder, .iso-linien, .iso-hinweis, .detail-modell, .iso-modell .kontur { display: none !important; }
  #haeuser .status, .iso-buehne .legende-garten::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .iso-bild { width: 78%; margin: 34px auto 0; }
  .iso-modell .f.ist-blass { fill: var(--n); }
  .iso-modell .f.ist-blass.ist-reserviert { fill: var(--r); }
  .iso-modell .f.ist-blass.ist-verkauft { fill: var(--g); }
  .iso-modell.hat-betonung .f.hinten { fill: var(--n); stroke: rgba(40, 28, 22, 0.34); }
  .iso-punkt {
    width: 24px; height: 24px; overflow: visible;
    display: flex; align-items: center; justify-content: center;
    transform: translate(-50%, calc(-100% - 6px));
    background: #fff; color: var(--gruen-dunkel);
    font: 600 13px/1 var(--schrift);
    border: 1px solid var(--gruen-dunkel); border-radius: 50%;
  }
  .iso-punkt.ist-reserviert, .iso-punkt.ist-verkauft { border-color: var(--grau); color: var(--text-weich); }
  .haus-detail.iso-detail { display: none; }
  .iso-karten { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .iso-karten .haus-karte { break-inside: avoid; }
  .iso-karten .haus-karte.ist-gewaehlt { background: var(--flaeche); color: var(--text); }
  .iso-karten .haus-karte.ist-gewaehlt .haus-name, .iso-karten .haus-karte.ist-gewaehlt .haus-preis,
  .iso-karten .haus-karte.ist-gewaehlt .haus-werte dd { color: var(--titel); }
  .iso-karten .haus-karte.ist-gewaehlt .haus-typ, .iso-karten .haus-karte.ist-gewaehlt .haus-werte dt { color: var(--text-leise); }
  .haus-mehr { display: none; }
}

/* ---------- 3D-Modell (3d/modell3d.js) ----------
   Das weisse Modell liegt deckungsgleich unter der SVG. Die SVG bleibt die
   Bedienebene (Klick, Tastatur, Schilder, Konturen), ihre Flächen werden nur
   unsichtbar. Ohne WebGL bleibt die SVG-Isometrie sichtbar, im Druck ebenso. */
.iso-3d { position: absolute; left: 0; top: 0; pointer-events: none; }
@media screen {
  .iso-3d-aktiv .iso-modell { position: relative; z-index: 1; }
  .iso-3d-aktiv .iso-modell .f, .iso-3d-aktiv .iso-modell .l,
  .iso-3d-aktiv .iso-modell .fuge, .iso-3d-aktiv .iso-modell .fuge-dach { fill-opacity: 0; stroke-opacity: 0; }
  .iso-3d-aktiv .iso-modell .iso-schatten { display: none; }
}
@media print { .iso-3d { display: none; } }
@media screen { .iso-3d-aktiv .legende-garten::before { background: #cfe6dc; } }