/* ══════════════════════════════════════════════════════════════════════
   KOMPOSITION mit wechselnden Bildern — aus St. Veit (24.09.2026)
   Bereich „Aktiv“: grosses Hochformat links, Quadrat unten rechts, das
   ueber die Kante ragt. Beide Rahmen wechseln ihre Bilder im Takt
   (bildwechsel.js), versetzt, damit nie beide gleichzeitig blenden.
   Kommt beim Scrollen herein, sobald der Abschnitt .sicht bekommt.
   ══════════════════════════════════════════════════════════════════════ */
html.pro .haus-komposition{ position:relative; width:87%; margin:0 auto; }
html.pro .haus-komposition figure{ position:relative; margin:0; overflow:hidden; background:var(--band-tief);
  border-radius:8px; box-shadow:0 30px 66px -34px rgba(22,17,14,.5); opacity:0;
  transition:transform .8s var(--ruhig), opacity 1.1s var(--ruhig), box-shadow .6s var(--ruhig); }
html.pro .haus-komposition figure img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; opacity:0; transition:opacity .85s var(--ruhig); }
html.pro .haus-komposition figure img.an{ opacity:1; }
html.pro .haus-komposition .hk-main{ width:80%; aspect-ratio:4/5; transform:translateY(46px) scale(1.05); }
html.pro .haus-komposition .hk-ecke{ position:absolute; width:42%; aspect-ratio:1; z-index:2; }
html.pro .hk-br{ bottom:4%; right:0; transform:translate(46px,46px) rotate(6deg) scale(.8); transition-delay:.24s; }
html.pro .sicht .haus-komposition figure{ opacity:1; }
html.pro .sicht .hk-main, html.pro .sicht .hk-br{ transform:none; }
@media (hover:hover){
  html.pro .sicht .hk-main:hover{ transform:scale(1.025); box-shadow:0 44px 90px -34px rgba(22,17,14,.6); }
  html.pro .sicht .hk-br:hover{ transform:translate(10px,10px) scale(1.05) rotate(2deg); box-shadow:0 30px 60px -22px rgba(22,17,14,.6); }
}
@media (max-width:760px){
  html.pro .hk-main{ width:82%; }
  html.pro .hk-ecke{ width:44%; }
  html.pro .hk-br{ transform:translate(18px,18px) rotate(5deg) scale(.85); }
}

/* Wellness: das Kachelbild (kachelbild.css) in der Bildspalte etwas
   schmaler, damit es neben dem kurzen Text nicht zu hoch wird. */
html.pro #komfort .kachelbild{ width:84%; margin:0 auto; }

/* Kueche: dieselbe Komposition gespiegelt (Hauptbild rechts, Quadrat
   unten links), wie Genuss in St. Veit. */
html.pro .genuss-komposition .hk-main{ margin-left:auto; }
html.pro .genuss-komposition .hk-br{ right:auto; left:0; transform:translate(-46px,46px) rotate(-6deg) scale(.8); }
html.pro .sicht .genuss-komposition .hk-br{ transform:none; }
@media (hover:hover){
  html.pro .sicht .genuss-komposition .hk-br:hover{ transform:translate(-10px,10px) scale(1.05) rotate(-2deg); }
}
@media (max-width:760px){ html.pro .genuss-komposition .hk-br{ transform:translate(-18px,18px) rotate(-5deg) scale(.85); } }

/* ══ Bildpaar neu (David 30.09.): zwei runde Hochformate nebeneinander, das zweite
   tiefer versetzt — kein Überlappen, kein Rahmen, kein Schatten. Muss HIER stehen,
   weil diese Datei nach seite.css lädt. ══ */
html.pro .haus-komposition{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,2vw,1.6rem);align-items:start;width:100%}
html.pro .haus-komposition figure{border-radius:clamp(16px,1.8vw,26px);box-shadow:none;max-height:74vh}
html.pro .haus-komposition .hk-main,html.pro .haus-komposition .hk-ecke{position:relative;inset:auto;width:auto;aspect-ratio:3/4;margin:0;z-index:auto}
html.pro .haus-komposition .hk-ecke{margin-top:clamp(2.5rem,7vw,6rem)}
html.pro .haus-komposition .hk-main,html.pro .hk-br,html.pro .genuss-komposition .hk-br{transform:translateY(40px)}
html.pro .sicht .haus-komposition .hk-main,html.pro .sicht .hk-br,html.pro .sicht .genuss-komposition .hk-br{transform:none}
@media (hover:hover){
  html.pro .sicht .hk-main:hover,html.pro .sicht .hk-br:hover,html.pro .sicht .genuss-komposition .hk-br:hover{transform:translateY(-4px);box-shadow:none}
}
/* gespiegelt (Küche): kleines Bild links, versetzt */
html.pro .genuss-komposition .hk-br{order:-1}
@media (max-width:760px){
  html.pro .haus-komposition .hk-main,html.pro .haus-komposition .hk-ecke{width:auto}
  html.pro .hk-br,html.pro .genuss-komposition .hk-br{transform:translateY(24px)}
}