/* ============================================================
   buchbeiuns.de — Effekte (Scroll-Reveal, Parallax, versetzte Bilder)
   Eigene Datei: ändert style.css/mobile.css nicht.
   Alles nur aktiv, wenn js/effects.js html.fx gesetzt hat.
   ============================================================ */

/* ---------- Scroll-Reveal ---------- */
html.fx [data-fx] {
  opacity: 0;
  translate: 0 36px;
  transition: opacity .9s cubic-bezier(.2,.65,.2,1) var(--fx-d, 0ms), translate .9s cubic-bezier(.2,.65,.2,1) var(--fx-d, 0ms), box-shadow .4s ease, transform .5s cubic-bezier(.2,.65,.2,1);
  will-change: opacity, translate;
}
html.fx [data-fx="left"]  { translate: -48px 0; }
html.fx [data-fx="right"] { translate: 48px 0; }
html.fx [data-fx="zoom"]  { translate: 0 0; scale: .94; transition: opacity .9s cubic-bezier(.2,.65,.2,1) var(--fx-d, 0ms), scale .9s cubic-bezier(.2,.65,.2,1) var(--fx-d, 0ms); }
html.fx [data-fx].fx-in { opacity: 1; translate: 0 0; scale: 1; }

/* ---------- Bild-Enthüllung (Wischeffekt von unten) ---------- */
html.fx .fx-img {
  position: relative;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s cubic-bezier(.77,0,.18,1);
}
html.fx .fx-img.fx-in { clip-path: inset(0 0 0 0); }
html.fx .fx-img > img { scale: 1.18; transition: scale 1.6s cubic-bezier(.2,.65,.2,1); }
html.fx .fx-img.fx-in > img { scale: 1; }

/* ---------- Überschriften: Goldlinie wächst ---------- */
.eyebrow { position: relative; }
html.fx .section-head .eyebrow::after,
html.fx .section-head .eyebrow::after {
  content: "";
  display: block;
  width: 0; height: 2px;
  margin-top: 10px;
  background: var(--gold);
  transition: width 1s .25s cubic-bezier(.2,.65,.2,1);
}
html.fx .section-head.fx-in .eyebrow::after { width: 56px; }
html.fx .text-center .eyebrow::after { margin-left: auto; margin-right: auto; }

/* ---------- Hero: Parallax-Glanz ---------- */
.hero::before { transform: translate3d(0, var(--fx-hero, 0px), 0); will-change: transform; }
html.fx .hero-inner > * { animation: fxHeroIn 1s cubic-bezier(.2,.65,.2,1) both; }
html.fx .hero-inner > *:nth-child(2) { animation-delay: .12s; }
html.fx .hero-inner > *:nth-child(3) { animation-delay: .24s; }
html.fx .hero-inner > *:nth-child(4) { animation-delay: .36s; }
html.fx .hero-inner > *:nth-child(5) { animation-delay: .48s; }
@keyframes fxHeroIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------- Versetzte Karten & Bilder (nur Desktop) ---------- */
@media (min-width: 900px) {
  /* Unterkunftskarten: jede zweite Spalte nach unten versetzt */
  .property-grid { align-items: start; padding-bottom: 56px; }
  .property-grid > .property-card:nth-child(even) { margin-top: 56px; }
  .property-grid > .property-card:hover { box-shadow: 0 24px 50px -18px rgba(36,53,43,.4); }

  /* Split-Bild: goldener Rahmen versetzt dahinter, Bild ragt leicht über */
  .split > img, .split > .fx-img {
    position: relative;
    box-shadow: 0 30px 60px -24px rgba(0,0,0,.5);
  }
  .split { position: relative; }
  .split > .fx-frame { position: relative; }
  .split > .fx-frame::before {
    content: "";
    position: absolute;
    inset: 28px -28px -28px 28px;
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    z-index: 0;
  }
  .split > .fx-frame > img {
    position: relative; z-index: 1;
    width: 100%; display: block;
    border-radius: var(--radius);
    box-shadow: 0 30px 60px -24px rgba(0,0,0,.5);
  }

  /* Galerie: gestaffelt versetzt */
  .gallery { align-items: start; padding-bottom: 32px; }
  .gallery img:nth-child(4n+2) { margin-top: 28px; }
  .gallery img:nth-child(4n+3) { margin-top: 14px; }
  .gallery img:nth-child(4n+4) { margin-top: 42px; }
  .gallery img:hover { transform: scale(1.04); box-shadow: 0 18px 36px -16px rgba(36,53,43,.5); }

  /* Team-Karten: mittlere Karte versetzt */
  .team-grid { align-items: start; padding-bottom: 36px; }
  .team-grid > .team-card:nth-child(2) { margin-top: 36px; }

  /* Zimmertypen: mittlere Karte versetzt */
  .room-types { align-items: start; padding-bottom: 28px; }
  .room-types > .room-type-card:nth-child(even) { margin-top: 28px; }
}

/* ---------- Hover-Effekte ---------- */
.btn { transition: transform .25s ease, box-shadow .25s ease, background .25s, color .25s, border-color .25s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(36,53,43,.5); }
.service-item .icon-circle { transition: transform .5s cubic-bezier(.2,.65,.2,1), background .3s; }
.service-item:hover .icon-circle { transform: translateY(-6px) rotate(-6deg); background: var(--gold); }
.property-card, .team-card, .room-type-card, .fact { transition: box-shadow .4s ease, transform .4s ease; }
.team-card:hover, .room-type-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(36,53,43,.4); }
.property-card .img-wrap { position: relative; }
.property-card .img-wrap::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--gold); transition: width .6s cubic-bezier(.2,.65,.2,1);
}
.property-card:hover .img-wrap::after { width: 100%; }
.property-card img { transition: transform .9s cubic-bezier(.2,.65,.2,1); }
.property-card:hover img { transform: scale(1.07); }

/* ---------- Bergsilhouette: sanft atmend ---------- */
.ridge-divider svg { transition: transform .2s linear; transform: translate3d(var(--fx-ridge, 0px), 0, 0) scaleX(1.04); }

/* ---------- Zitat/Bewertung: Anführungszeichen-Deko ---------- */
.testimonial { position: relative; }
.testimonial::before {
  content: "„"; position: absolute; left: 50%; top: -34px; translate: -50% 0;
  font-family: var(--font-display); font-size: 9rem; line-height: 1;
  color: var(--gold); opacity: .18; pointer-events: none;
}

/* ---------- Weniger Bewegung / Handy-Ansicht / Druck ---------- */
@media (prefers-reduced-motion: reduce) {
  html.fx [data-fx], html.fx .fx-img, html.fx .fx-img > img { opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; clip-path: none !important; transition: none !important; }
  html.fx .hero-inner > * { animation: none; }
  .hero::before, .ridge-divider svg { transform: none !important; }
}
html.m-mode .fx-frame::before { display: none; }
html.m-mode [data-fx] { translate: 0 20px; }
html.m-mode [data-fx].fx-in { translate: 0 0; }
@media (max-width: 899px) {
  .fx-frame::before { display: none; }
}
@media print {
  html.fx [data-fx], html.fx .fx-img, html.fx .fx-img > img { opacity: 1 !important; translate: none !important; scale: 1 !important; clip-path: none !important; }
}