/* Omnino Effekte — gemeinsame High-End-Schicht aller Kundenseiten.
   Regeln (nicht verhandelbar):
   - Verstecken NUR hinter html.js — ohne JavaScript ist ALLES sichtbar.
   - prefers-reduced-motion schaltet jede Bewegung ab.
   - Nur transform/opacity (ruckelfrei), keine Layout-Animationen.
   Quelle: werk/effekte/ — bau.py spielt die aktuelle Fassung in jede Seite ein.
   NICHT im Kundenordner editieren, der naechste Bau ueberschreibt es. */

/* ---------- Auftritt (ersetzt und erweitert .reveal) ---------- */
html.js .reveal, html.js [data-fx] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
html.js [data-fx="links"]  { transform: translateX(-34px); }
html.js [data-fx="rechts"] { transform: translateX(34px); }
html.js [data-fx="zoom"]   { transform: scale(.94); }
html.js [data-fx="weich"]  { transform: none; transition-duration: 1.1s; }
html.js .reveal.in, html.js [data-fx].fx-da { opacity: 1; transform: none; }

/* ---------- Bilder: Grundhaltung ---------- */
.fx-bild { position: relative; overflow: hidden; border-radius: var(--radius, 16px); }
.fx-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Ken-Burns: langsames Atmen grosser Bilder */
html.js .fx-kenburns img { animation: fxKenburns 22s ease-in-out infinite alternate; }
@keyframes fxKenburns { from { transform: scale(1); } to { transform: scale(1.09) translateY(-1.5%); } }

/* Parallax bewegt nur transform; Wert setzt effekte.js */
html.js [data-fx-parallax] { will-change: transform; }

/* ---------- Eintauchen (Dive): Bild fuellt auf Klick den Schirm ---------- */
.fx-dive { cursor: zoom-in; }
.fx-dive img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) { .fx-dive:hover img { transform: scale(1.04); } }
.fx-tauch {
  position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center;
  background: rgba(8,7,6,.94); opacity: 0; transition: opacity .45s ease; padding: 3vmin;
}
.fx-tauch.da { opacity: 1; }
.fx-tauch img {
  max-width: 94vw; max-height: 88vh; width: auto; height: auto; border-radius: 10px;
  box-shadow: 0 30px 90px rgba(0,0,0,.55); transform: scale(.92); transition: transform .55s cubic-bezier(.22,1,.36,1);
  cursor: zoom-out;
}
.fx-tauch.da img { transform: scale(1); }
html.js .fx-tauch.da img.fx-treiben { animation: fxTreiben 16s ease-in-out infinite alternate; }
@keyframes fxTreiben { from { transform: scale(1); } to { transform: scale(1.045); } }
.fx-tauch figcaption {
  position: absolute; left: 0; right: 0; bottom: 3.2vmin; text-align: center;
  color: #F5F2EC; font-size: .95rem; letter-spacing: .02em; opacity: .85; padding: 0 6vmin;
}
.fx-tauch .fx-zu {
  position: absolute; top: 2.4vmin; right: 2.8vmin; width: 44px; height: 44px; border: 0;
  border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.fx-tauch .fx-zu:hover, .fx-tauch .fx-zu:focus-visible { background: rgba(255,255,255,.25); outline: 2px solid #fff3; }
html.fx-halt { overflow: hidden; }

/* ---------- Video-Held ---------- */
.fx-video { position: relative; overflow: hidden; }
.fx-video video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Karte ---------- */
.fx-karte { margin: 0; }
.fx-karte img { display: block; width: 100%; height: auto; border-radius: var(--radius, 16px); }
.fx-karte figcaption { font-size: .78rem; opacity: .7; margin-top: .45rem; }
.fx-karte figcaption a { color: inherit; }

/* ---------- Bewertungen ---------- */
.fx-stimmen { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fx-stimme { border: 1px solid var(--line, #0002); border-radius: var(--radius, 16px); padding: 1.1rem 1.2rem; background: var(--paper, #fff); }
.fx-stimme .sterne { letter-spacing: .12em; color: var(--accent, #B8860B); font-size: .95rem; }
.fx-stimme p { margin: .55rem 0 .7rem; line-height: 1.55; }
.fx-stimme .wer { font-size: .85rem; opacity: .75; }
.fx-stimmen-fuss { font-size: .78rem; opacity: .7; margin-top: .9rem; line-height: 1.5; }
.fx-stimmen-fuss a { color: inherit; }

/* ---------- Ruhe fuer alle, die es wollen ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js [data-fx] { opacity: 1; transform: none; transition: none; }
  html.js .fx-kenburns img, html.js .fx-tauch.da img.fx-treiben { animation: none; }
  .fx-dive img, .fx-tauch, .fx-tauch img { transition: none; }
}