/* Premium-Effekte Startseite: Jahreszeiten im Startbild + Rundgang (Kamerafahrt beim Scrollen). Ergänzt styles.css. */
/* overflow-x: clip statt hidden (styles.css): hidden schaltet position: sticky im Rundgang aus. Ältere Browser ohne clip behalten hidden. */
html, body { overflow-x: clip; }

/* ---------- Jahreszeiten ---------- */
.hero-media .jz-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity 1.4s ease, transform 6s ease-out; }
.hero-media .jz-bild.is-aktiv { opacity: 1; transform: scale(1); }
.jz { margin: 0 0 1.6em; }
.jz-titel { margin: 0 0 .5em; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.jz-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; }
.jz-knoepfe button { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; padding: 0 1rem;
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(20,30,22,.35); color: #fff;
  font: 600 .95rem/1 var(--sans); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .25s, border-color .25s, transform .15s; }
.jz-knoepfe button:hover { background: rgba(255,255,255,.18); }
.jz-knoepfe button:active { transform: translateY(1px); }
.jz-knoepfe button[aria-pressed="true"] { background: #fff; color: var(--fir-deep); border-color: #fff; }
.jz-knoepfe button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.jz-text { margin: .7em 0 0; min-height: 1.5em; font-size: 1rem; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.jz-ki { margin: .35em 0 0; font-size: .75rem; opacity: .8; text-shadow: 0 1px 6px rgba(0,0,0,.4); }

@media (prefers-reduced-motion: reduce) {
  .hero-media .jz-bild { transition: none; transform: none; }
}
.footer-bildnachweis { flex-basis: 100%; font-size: .8rem; opacity: .75; margin: .5rem 0 0; }
@media (min-width: 900px) { .footer-inner { flex-wrap: wrap; } }
@media (max-width: 599px) {
  .hero-media .jz-bild { object-position: 32% 50%; }
  .jz-knoepfe { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
  .jz-knoepfe button { flex-direction: column; justify-content: center; gap: .15rem; min-height: 54px; padding: .3rem .1rem; border-radius: 12px; font-size: .74rem; }
  .jz-knoepfe button .jz-sym { font-size: 1.15rem; line-height: 1; }
}

/* ---------- Rundgang (Kamerafahrt beim Scrollen) ---------- */
.rundgang { position: relative; height: 620vh; background: #14201a; color: #fff; }
.rg-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.rg-buehne video { width: 100%; height: 100%; object-fit: cover; display: block; background: #14201a; }
.rg-buehne::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,16,12,.45) 0%, rgba(10,16,12,0) 30%, rgba(10,16,12,0) 55%, rgba(10,16,12,.7) 100%); }
.rg-kopf { position: absolute; z-index: 2; top: clamp(4.5rem, 10vh, 6rem); left: 0; right: 0; }
.rg-kopf .eyebrow { color: var(--amber); }
.rg-kopf h2 { margin: .2em 0 0; font-size: clamp(1.7rem, 6vw, 2.8rem); text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.rg-texte { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(2.5rem, 9vh, 5rem); }
.rg-text { position: absolute; left: 20px; right: 20px; bottom: 0; max-width: 34rem; opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease; }
.rg-text.is-sichtbar { opacity: 1; transform: none; }
.rg-text b { display: block; font: 600 clamp(1.4rem, 5vw, 2rem)/1.15 var(--serif); margin-bottom: .25em; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.rg-text span { font-size: 1.02rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.rg-balken { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 4px; background: var(--terra); transform: scaleX(0); transform-origin: 0 50%; }
.rg-hinweis { position: absolute; z-index: 2; right: 12px; bottom: 12px; margin: 0; font-size: .72rem; opacity: .75; }
@media (min-width: 900px) { .rg-text { left: max(20px, calc((100vw - var(--wrap)) / 2 + 20px)); } }
/* reduzierte Bewegung: normales Video statt Scroll-Film */
.rundgang.rg-ruhig { height: auto; padding: 3rem 0; }
.rundgang.rg-ruhig .rg-buehne { position: relative; height: auto; }
.rundgang.rg-ruhig .rg-buehne::after, .rundgang.rg-ruhig .rg-texte, .rundgang.rg-ruhig .rg-balken { display: none; }
.rundgang.rg-ruhig .rg-kopf { position: static; padding-bottom: 1rem; }