/* ===== Effekte irinalefey.com ===== */

/* 1 Galerie: gestaffeltes Einblenden */
.fx-stagger .galerie-raster picture{opacity:0;transform:translateY(34px) scale(.97);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.fx-stagger .galerie-raster picture.sichtbar{opacity:1;transform:none}

/* 2 Hover: sanfter Zoom und Goldrahmen */
.fx-hover .galerie-raster picture,.fx-hover .karte picture{position:relative;overflow:hidden;border-radius:4px}
.fx-hover .galerie-raster img,.fx-hover .karte img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter 1s}
.fx-hover .galerie-raster picture::before{content:"";position:absolute;inset:10px;border:1px solid rgba(217,191,143,.95);border-radius:2px;opacity:0;transform:scale(1.04);transition:opacity .6s,transform .8s;z-index:2;pointer-events:none}
@media (hover:hover){
  .fx-hover .galerie-raster picture:hover img{transform:scale(1.07)}
  .fx-hover .galerie-raster picture:hover::before{opacity:1;transform:none}
  .fx-hover .karte:hover img{transform:scale(1.05)}
}

/* 3 Großansicht mit Blättern */
.fx-box{position:fixed;inset:0;z-index:95;background:rgba(30,20,15,.96);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .45s}
.fx-box.offen{opacity:1;pointer-events:auto}
.fx-box img{max-width:calc(100% - 140px);max-height:86vh;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.5);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.fx-box img.wechsel{opacity:0;transform:scale(.97)}
.fx-box button{position:absolute;background:none;border:1px solid rgba(217,191,143,.6);color:#D9BF8F;width:52px;height:52px;border-radius:50%;font-size:22px;cursor:pointer;transition:background .3s,color .3s}
.fx-box button:hover{background:#D9BF8F;color:#2B1D16}
.fx-box .zurueckb{left:28px;top:50%;transform:translateY(-50%)}
.fx-box .weiter{right:28px;top:50%;transform:translateY(-50%)}
.fx-box .zu{right:28px;top:24px;width:44px;height:44px;font-size:20px}
.fx-box .zaehler{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#D9BF8F;font-family:var(--serif);font-style:italic;font-size:17px;letter-spacing:.06em}
@media (max-width:700px){
  .fx-box img{max-width:100%;max-height:78vh}
  .fx-box .zurueckb,.fx-box .weiter{top:auto;bottom:12px;transform:none;width:44px;height:44px}
  .fx-box .zurueckb{left:20px}.fx-box .weiter{right:20px}
}

/* 4 Gemischtes Raster: einzelne große Kacheln */
.fx-raster .galerie-raster{grid-auto-flow:dense}
.fx-raster .galerie-raster picture.gross{grid-column:span 2;grid-row:span 2}
.fx-raster .galerie-raster picture.gross img{aspect-ratio:auto;height:100%}

/* 5 Langsamer Zoom im Headerbild */
.fx-kenburns .hero .rahmen picture{display:block;overflow:hidden}
.fx-kenburns .hero .rahmen img{animation:kenburns 26s ease-out forwards;transform-origin:62% 35%}
@keyframes kenburns{from{transform:scale(1.0)}to{transform:scale(1.1)}}

/* 6 Header-Text nacheinander */
.fx-intro .hero .einblenden:first-child{opacity:1;transform:none;transition:none}
.fx-intro .hero .einblenden:first-child > *{opacity:0;transform:translateY(18px)}
.fx-intro.los .hero .einblenden:first-child > *{animation:intro 1s cubic-bezier(.2,.7,.2,1) forwards}
.fx-intro.los .hero .einblenden:first-child > :nth-child(2){animation-delay:.15s}
.fx-intro.los .hero .einblenden:first-child > :nth-child(3){animation-delay:.35s}
.fx-intro.los .hero .einblenden:first-child > :nth-child(4){animation-delay:.55s}
.fx-intro.los .hero .einblenden:first-child > :nth-child(5){animation-delay:.75s}
@keyframes intro{to{opacity:1;transform:none}}

/* 8 Tiefenwirkung beim Scrollen */
.fx-parallax .ueber picture{overflow:hidden;border-radius:4px}
.fx-parallax .ueber picture img{transform:scale(1.14) translateY(var(--px,0px));transition:transform .1s linear;will-change:transform}

/* 9 Goldlinie unter Überschriften */
.fx-linie main h2::after{content:"";display:block;width:70px;height:1px;background:linear-gradient(90deg,var(--gold),var(--orange));margin-top:18px;transform:scaleX(0);transform-origin:left center;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .35s}
.fx-linie main .kopftext h2::after,.fx-linie main .presse h2::after{margin-left:auto;margin-right:auto;transform-origin:center}
.fx-linie main .sichtbar h2::after,.fx-linie main h2.sichtbar::after{transform:scaleX(1)}

/* 10 Preisliste gleitet ein */
.fx-preise .preisliste .preis{opacity:0;transform:translateX(-18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.fx-preise .preisliste.sichtbar .preis{opacity:1;transform:none}
.fx-preise .preisliste.sichtbar .preis:nth-child(2){transition-delay:.08s}
.fx-preise .preisliste.sichtbar .preis:nth-child(3){transition-delay:.16s}
.fx-preise .preisliste.sichtbar .preis:nth-child(4){transition-delay:.24s}
.fx-preise .preisliste.sichtbar .preis:nth-child(5){transition-delay:.32s}
.fx-preise .preisliste.sichtbar .preis:nth-child(6){transition-delay:.40s}
.fx-preise .preisliste.sichtbar .preis:nth-child(7){transition-delay:.48s}
.fx-preise .preisliste.sichtbar .preis:nth-child(8){transition-delay:.56s}

/* Bewegung reduzieren: alles aus */
@media (prefers-reduced-motion:reduce){
  .fx-stagger .galerie-raster picture,.fx-intro .hero .einblenden:first-child > *,.fx-preise .preisliste .preis{opacity:1!important;transform:none!important;animation:none!important}
  .fx-kenburns .hero .rahmen img,.fx-parallax .ueber picture img{animation:none!important;transform:none!important}
  .fx-linie main h2::after{transform:scaleX(1)!important;transition:none!important}
}

/* 7 Bilder weich einblenden (Unschärfe löst sich, Bild zoomt leicht zurück) */
.fx-weich .ueber picture img,.fx-weich .karte picture img{opacity:0;filter:blur(10px);scale:1.08;transition:opacity 1.6s ease,filter 1.6s ease,scale 2.2s cubic-bezier(.2,.7,.2,1)}
.fx-weich .karte picture{display:block;overflow:hidden}
.fx-weich .ueber picture.sichtbar img,.fx-weich .karte.sichtbar picture img{opacity:1;filter:none;scale:1}

/* ===== Duo-Bereich auf dem Handy ===== */
@media (max-width:900px){
  /* C: großes Bild, überlappende Textkarte, zweites Bild darunter */
  .duo-mobil .duo{gap:0}
  .duo-mobil .duo-bilder{display:contents}
  .duo-mobil .duo-bilder picture:nth-child(1){order:1;margin:0 -24px}
  .duo-mobil .duo-bilder picture:nth-child(1) img{border-radius:0;box-shadow:none;height:420px;width:100%;object-fit:cover;object-position:center 40%}
  .duo-mobil .duo-text{order:2;position:relative;z-index:2;background:#fff;border-radius:8px;padding:28px 24px 30px;margin:-70px 8px 0;box-shadow:var(--schatten)}
  .duo-mobil .duo-bilder picture:nth-child(2){display:block;order:3;width:100%;margin:24px 0 0}
  .duo-mobil .duo-bilder picture:nth-child(2) img{height:440px;width:100%;object-fit:cover;object-position:center 30%;border-radius:4px}
}
@media (max-width:520px){.duo-mobil .duo-bilder picture:nth-child(1){margin:0 -16px}}
@media (prefers-reduced-motion:reduce){
  .fx-weich picture img{opacity:1!important;filter:none!important;scale:1!important;transition:none!important}
}