/* ═══ Zimmerfahrt (zimmerfahrt.js) ═══════════════════════════════════════
   Vorlage-1-Baustein seit 21.09.2026 (Vorbild St. Veit). Diese Datei ist die
   Kopiervorlage — unveraendert in jedes Haus kopieren, Farben und Schrift
   kommen aus den Variablen des Hauses (--display, --oliv, --band ...).
   ACHTUNG: Kein overflow:hidden auf .zf oder .zf-spur (killt sticky) — beschnitten
      wird in .zf-buehne. */
.zf{ position:relative; background:var(--band,#f4f1ec); }
.zf-kopf{ padding:clamp(4.5rem,10vw,8rem) clamp(1.4rem,6vw,5rem) clamp(1.6rem,3vw,2.4rem);
  max-width:1340px; margin:0 auto; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.zf-kopf > div{ max-width:44rem; }
.zf-zaehler{ display:none; align-items:baseline; gap:.5rem; font-family:var(--sans); color:var(--text-leise);
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; margin:0; }
.zf.zf-an .zf-zaehler{ display:flex; position:absolute; top:clamp(6.5rem,13vh,8.5rem); right:clamp(1.4rem,6vw,5rem); }
.zf-zaehler b{ font-family:var(--display,var(--sans,Georgia,serif));   /* Anzeigeschrift des Hauses, sonst seine Grundschrift */ font-weight:500; font-size:clamp(2.4rem,4vw,3.6rem);
  color:var(--oliv); letter-spacing:0; line-height:1; font-variant-numeric:tabular-nums; }
.zf-spur{ position:relative; }
.zf-buehne{ position:relative; }
.zf-reihe{ display:flex; gap:clamp(1rem,2vw,1.8rem); padding:0 clamp(1.4rem,6vw,5rem) clamp(2rem,4vw,3rem);
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.zf-reihe::-webkit-scrollbar{ display:none; }
.zf-karte{ position:relative; flex:none; width:min(78vw,430px); scroll-snap-align:center; margin:0;
  background:#fff; border-radius:10px; overflow:hidden; --licht:1;
  box-shadow:0 30px 60px -38px rgba(36,27,27,.45); transform-origin:50% 60%; }
.zf-bild{ position:relative; aspect-ratio:4/3.1; overflow:hidden; background:var(--band-tief); }
.zf-bild img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.06); will-change:transform; }
/* Galerie beim Ueberfahren: die Fotos liegen deckungsgleich in .zf-lagen,
   die Fahrt verschiebt die ganze Lage (nicht mehr das einzelne Bild). */
.zf-lagen{ position:absolute; inset:0; transform:scale(1.06); will-change:transform; }
.zf-lagen img{ transform:none !important; opacity:0; transition:opacity .35s ease; }
.zf-lagen img.an{ opacity:1; }
.zf-punkte{ position:absolute; left:14px; right:14px; bottom:12px; z-index:2; display:flex; gap:5px;
  opacity:0; transition:opacity .3s ease; pointer-events:none; }
.zf-punkte i{ flex:1; height:2px; border-radius:2px; background:rgba(255,255,255,.45);
  box-shadow:0 0 4px rgba(0,0,0,.25); transition:background .25s ease; }
.zf-punkte i.an{ background:#fff; }
@media (hover:hover){ .zf-bild[data-galerie]:hover .zf-punkte{ opacity:1; } }
.zf-bild::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(20,14,14,.34), rgba(20,14,14,0) 45%);
  opacity:calc(1 - var(--licht) * .6); }
.zf-text{ padding:clamp(1.1rem,1.8vw,1.6rem) clamp(1.2rem,2vw,1.8rem) clamp(1.4rem,2vw,1.9rem); }
.zf-text .zf-mass{ display:flex; gap:.9rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sand-tief); margin:0 0 .55rem; }
.zf-text h3{ font-family:var(--display,var(--sans,Georgia,serif));   /* Anzeigeschrift des Hauses, sonst seine Grundschrift */ font-weight:600; font-size:clamp(1.25rem,1.7vw,1.55rem);
  letter-spacing:.02em; line-height:1.15; margin:0 0 .6rem; color:var(--tinte); }
.zf-text p{ margin:0; font-size:.95rem; line-height:1.6; color:var(--text); }
.zf-balken{ position:relative; height:2px; margin:0 clamp(1.4rem,6vw,5rem); background:var(--linie); }
.zf-balken i{ position:absolute; inset:0; background:var(--oliv); transform-origin:0 50%; transform:scaleX(0); }
.zf-fuss{ padding:clamp(1.2rem,2vw,1.8rem) clamp(1.4rem,6vw,5rem) clamp(4rem,8vw,6.5rem);
  max-width:1340px; margin:0 auto; color:var(--text-leise); font-size:.92rem; }

/* Die Fahrt (breite Schirme, mit Bewegung) */
.zf.zf-an .zf-buehne{ position:sticky; top:-1px; height:calc(100dvh + 2px); overflow:hidden;   /* 1 px Ueberstand: sonst blitzt bei Rundung der Seitengrund durch */
  display:flex; flex-direction:column; justify-content:center; }
.zf.zf-an .zf-reihe{ overflow:visible; width:max-content; scroll-snap-type:none;
  padding-left:max(clamp(1.4rem,6vw,5rem), calc(50% - 215px));
  padding-right:max(clamp(1.4rem,6vw,5rem), calc(50% - 215px));
  will-change:transform; }
.zf.zf-an .zf-karte{ will-change:transform; transform-origin:50% 50%; }
/* Gemeinsame Perspektive fuer den Bogen der Karten (zimmerfahrt.js).
   preserve-3d auf der Reihe, damit ihr eigener Versatz die Tiefe der
   Karten nicht flachdrueckt. */
.zf.zf-an .zf-buehne{ perspective:1700px; perspective-origin:50% 45%; }
.zf.zf-an .zf-reihe{ transform-style:preserve-3d; pointer-events:none; }
/* ⛔ Die Karten stehen im Bogen HINTER der Ebene der Reihe (translateZ
   negativ) — ohne diese zwei Zeilen faengt die Reihe jede Maus ab, und
   die Zimmergalerie reagiert nicht (gemessen 18.09.2026). */
.zf.zf-an .zf-karte{ pointer-events:auto; }
.zf.zf-an .zf-balken{ margin-top:clamp(.4rem,1vh,1rem); }
@media (max-width:860px){ .zf-balken{ display:none; } }

/* Handy (24.09.2026, Olaga): die Angaben brachen mitten im Wert um
   („CA. 19–22 / M²", „AB € / 81"). Jeder Wert bleibt jetzt ganz, die
   Reihe darf dafuer in eine zweite Zeile gehen. */
.zf-text .zf-mass{ flex-wrap:wrap; row-gap:.35rem; }
.zf-text .zf-mass span{ white-space:nowrap; }

/* Niedrige Fenster (27.09.2026, Stilfserhof): bei ~580 px Fensterhoehe waren
   die Karten hoeher als der Platz unter der Kopfzeile — sie liefen oben unter
   den Kopf und die Fahrt wirkte kaputt. Jetzt haelt die Buehne genau die
   gemessene Kopfhoehe frei (--zf-kopf, setzt zimmerfahrt.js), die Kartenbreite
   richtet sich auch nach der Hoehe, und in sehr niedrigen Fenstern wird der
   Kartentext auf zwei Zeilen gekuerzt. Grosse Schirme bleiben bei 430 px. */
.zf.zf-an .zf-buehne{ padding-top:var(--zf-kopf, clamp(64px, 9vh, 96px)); box-sizing:border-box; }
.zf.zf-an .zf-karte{ width:max(230px, min(430px, 78vw, calc((100dvh - var(--zf-kopf, 80px) - 250px) * 1.25))); }
.zf.zf-an .zf-zaehler{ top:calc(var(--zf-kopf, 80px) + 1rem); }
@media (max-height:680px){
  .zf.zf-an .zf-text p:not(.zf-mass){ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}