/* ─────────────────────────────────────────────────────────────
   Asado und Wein — Bild-Effekte & Animationen (Fotos José-Shooting)
   Rein CSS + minimales externes JS (CSP-konform, kein Inline-Skript).
   Respektiert prefers-reduced-motion.
   ───────────────────────────────────────────────────────────── */

/* Sanftes Einblenden, sobald ein Bild geladen ist */
.photo-fade{opacity:0;transition:opacity .9s ease}
.photo-fade.loaded{opacity:1}

/* Ken-Burns — langsamer Zoom/Schwenk für Hero & Bänder */
@keyframes auwKenburns{0%{transform:scale(1.02)}100%{transform:scale(1.14) translate(-1.5%,-1.5%)}}
.kenburns img,.kenburns > .kb{animation:auwKenburns 22s ease-out both;will-change:transform}
.ph-bg.kenburns{animation:auwKenburns 24s ease-out both;will-change:transform}

/* Hero-Foto (rechte Spalte) */
.hero-photo{position:relative;aspect-ratio:4/5;border-radius:var(--r-xl,26px);overflow:hidden;
  box-shadow:var(--sh,0 30px 70px rgba(16,37,66,.22));background:var(--cream,#fbf5da)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 60%,rgba(147,0,52,.14));pointer-events:none}

/* Foto-Weltkarten mit Zoom bei Hover */
.world-card{position:relative;overflow:hidden;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end}
.world-card .world-photo{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.001);transition:transform 1s cubic-bezier(.2,.7,.2,1);z-index:0}
.world-card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,37,66,.10) 0%,rgba(16,37,66,.45) 45%,rgba(16,37,66,.86) 100%)}
.world-card:hover .world-photo,.world-card:focus-visible .world-photo{transform:scale(1.09)}
.world-card > *{position:relative;z-index:2}
.world-card:hover{transform:translateY(-4px)}

/* Parallax-Band (Zitat) */
.parallax{position:relative;background-size:cover;background-position:center;background-attachment:fixed;overflow:hidden}
.parallax .parallax-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,37,66,.55),rgba(16,37,66,.74))}
@media (max-width:900px){.parallax{background-attachment:scroll}}

/* Bild-Zoom in Karten (Produkt/Erlebnis) */
.card-zoom{overflow:hidden}
.card-zoom img,.card-zoom .ph-cover{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card-zoom:hover img,.card-zoom:hover .ph-cover{transform:scale(1.06)}

/* Reveal-Varianten (baut auf vorhandenem .reveal → .in auf) */
.reveal.rv-left{transform:translateX(-34px)}
.reveal.rv-right{transform:translateX(34px)}
.reveal.rv-zoom{transform:scale(.93)}
.reveal.in.rv-left,.reveal.in.rv-right,.reveal.in.rv-zoom{transform:none}
.reveal[data-delay="1"]{transition-delay:.12s}
.reveal[data-delay="2"]{transition-delay:.24s}
.reveal[data-delay="3"]{transition-delay:.36s}
.reveal[data-delay="4"]{transition-delay:.48s}

/* Foto-Galerie (Über uns) */
.foto-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:180px;gap:14px}
.foto-grid figure{margin:0;overflow:hidden;border-radius:var(--r,16px);box-shadow:var(--sh-sm,0 10px 30px rgba(16,37,66,.10))}
.foto-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.foto-grid figure:hover img{transform:scale(1.07)}
.foto-grid .g-tall{grid-column:span 5;grid-row:span 2}
.foto-grid .g-wide{grid-column:span 7;grid-row:span 1}
.foto-grid .g-box {grid-column:span 4;grid-row:span 1}
.foto-grid .g-wide2{grid-column:span 7;grid-row:span 1}
@media (max-width:760px){
  .foto-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .foto-grid .g-tall{grid-column:span 2;grid-row:span 2}
  .foto-grid .g-wide,.foto-grid .g-box,.foto-grid .g-wide2{grid-column:span 2}
}

/* Vollflächiges Foto-Hero (Shop-/Seiten-Header) */
.photo-hero{position:relative;min-height:clamp(280px,42vh,460px);display:flex;align-items:flex-end;overflow:hidden;border-radius:var(--r-xl,26px)}
.photo-hero .ph-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.photo-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,37,66,.12),rgba(16,37,66,.72))}
.photo-hero .ph-content{position:relative;z-index:2;padding:clamp(1.4rem,4vw,2.6rem);color:#fff}
.photo-hero .ph-content h1{color:#fff;margin:0}

@media (prefers-reduced-motion: reduce){
  .kenburns img,.kenburns>.kb{animation:none}
  .photo-fade{transition:none;opacity:1}
  .world-card .world-photo,.card-zoom img,.foto-grid img{transition:none}
}