/* ==========================================================================
   Waldschenke Schömberg – Bewegung (seit 24.10.2026)
   Ergänzt main.css. Ohne JavaScript bleibt alles sichtbar; Klassen wie .kommt setzt erst bewegung.js.
   „Bewegung reduzieren“ schaltet alles ab: siehe Regel ganz unten und die Grundregel in main.css.
   Restaurant und Hochzeit dezent, Minidorf darf verspielt sein.
   ========================================================================== */

:root { --weich: cubic-bezier(.2, .8, .2, 1); }

/* ---------- 1 Startbild: Ken-Burns, Stempel, Wort für Wort, Wellenlinie ---------- */
.hero--start .hero__media img { transform-origin: 55% 60%; animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.stempel { display: inline-block; padding: .12em .55em; margin-left: .1em; border: 1.5px solid currentColor; border-radius: 4px; transform: rotate(-3deg); animation: stempel .7s .25s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes stempel { 0% { opacity: 0; transform: scale(1.9) rotate(-14deg); } 70% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(-3deg); } }
.hero--start .hero__title .wort { display: inline-block; animation: aufsteigen .8s var(--weich) both; animation-delay: calc(.55s + var(--i, 0) * .11s); }
@keyframes aufsteigen { from { opacity: 0; transform: translateY(.55em); } to { opacity: 1; transform: none; } }
.hero__welle { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; z-index: 1; overflow: hidden; pointer-events: none; }
.hero__welle svg { display: block; width: 200%; height: 100%; animation: welle 22s linear infinite; }
.hero__welle path { fill: none; stroke: rgba(255, 255, 255, .26); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hero__welle path + path { stroke: rgba(255, 255, 255, .16); }
@keyframes welle { to { transform: translateX(-50%); } }

/* ---------- 11 Jahreszeiten-Deko (Canvas aus bewegung.js) ---------- */
.hero__deko { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* ---------- 2 Scroll-Reveal ---------- */
.kommt { opacity: 0; translate: 0 24px; }
.kommt.ist-da { opacity: 1; translate: 0 0; transition: opacity .7s var(--weich), translate .8s var(--weich); }

/* ---------- 3 Hover und Fokus ---------- */
.btn { transition-duration: .3s; }
.card, .week-card, .room-card, .occasion, .price-card, .ride, .world-tile, .map-card { transition: transform .35s var(--weich), box-shadow .35s var(--weich); }
.card__media, .week-card__media, .room-card__media, .ride__media { overflow: hidden; }
.card__media img, .week-card__media img, .room-card__media img, .ride__media img { transition: transform .6s var(--weich); }
.world-tile__media img, .gallery__item img { transition: transform .6s var(--weich); }
.link-arrow::after { content: "\2192"; display: inline-block; margin-left: .3em; transition: transform .25s var(--weich); }
.week-card__link::after { transition: transform .25s var(--weich); }
@media (hover: hover) {
  .card:hover, .week-card:hover, .room-card:hover, .occasion:hover, .price-card:hover, .ride:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  .world-tile:hover { transform: translateY(-4px); }
  .card:hover .card__media img, .week-card:hover .week-card__media img, .room-card:hover .room-card__media img, .ride:hover .ride__media img,
  .world-tile:hover .world-tile__media img, .gallery__item:hover img { transform: scale(1.06); }
  .link-arrow:hover::after, .world-tile:hover .link-arrow::after, .card:hover .link-arrow::after, .week-card__link:hover::after { transform: translateX(5px); }
  .world-minidorf .ride:hover { transform: translateY(-6px) rotate(-.6deg); }
}
.card:focus-within, .week-card:focus-within, .room-card:focus-within, .price-card:focus-within, .world-tile:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.world-tile:focus-visible .world-tile__media img, .gallery__item:focus-visible img { transform: scale(1.06); }
.link-arrow:focus-visible::after, .world-tile:focus-visible .link-arrow::after, .week-card__link:focus-visible::after { transform: translateX(5px); }
.world-tile:focus-visible, .gallery__item:focus-visible { outline: 3px solid var(--brass-2); outline-offset: 3px; }
/* Hochzeit bleibt ruhiger */
.world-hochzeit .card:hover, .world-hochzeit .price-card:hover, .world-hochzeit .room-card:hover { transform: translateY(-3px); }

/* ---------- 4 Kopf wird beim Scrollen schlanker ---------- */
.site-header { transition: box-shadow .3s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 28px -16px rgba(21, 43, 29, .4); }
@media (min-width: 1061px) {
  .site-header__inner { transition: min-height .3s ease; }
  .site-header.is-scrolled .site-header__inner { min-height: 64px; }
}
/* Sprungmarken landen unter dem Kopf (Höhe inkl. Unternavigation setzt bewegung.js) */
:where([id]) { scroll-margin-top: calc(var(--kopf-hoehe, var(--header-h)) + 14px); }

/* ---------- 5 Seitenübergänge (Browser ohne Unterstützung wechseln wie bisher) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-aus .22s ease both; }
  ::view-transition-new(root) { animation: vt-ein .34s ease both; }
  .site-header { view-transition-name: kopf; }
  .mobile-cta { view-transition-name: leiste; }
}
@keyframes vt-aus { to { opacity: 0; } }
@keyframes vt-ein { from { opacity: 0; } }

/* ---------- 6 Wochenangebote: „Heute“ / „Als Nächstes“ ---------- */
.week-card__badge { position: absolute; right: 12px; top: 12px; padding: .38rem .8rem; border-radius: 999px; background: var(--brass); color: #fff; font: 700 .74rem var(--font-sans); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(176, 141, 87, .45); animation: badge-pop .5s .3s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes badge-pop { from { opacity: 0; transform: scale(.6); } }
.week-card.ist-heute { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--brass-2), var(--shadow-lg); }
.week-card.ist-naechstes { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass-2) 55%, transparent), var(--shadow); }
.week-card.ist-naechstes .week-card__badge { background: var(--white); color: var(--brass); box-shadow: 0 6px 16px rgba(21, 43, 29, .18); }
@media (hover: hover) { .week-card.ist-heute:hover { transform: translateY(-8px); } }
@media (max-width: 760px) { .week .grid--3 { padding-top: 10px; } .week-card__badge { right: auto; left: 12px; top: 50px; } }

/* ---------- 7 Live-Status mit pulsierendem Punkt ---------- */
.status--open::before { animation: puls 2s ease-out infinite; }
.status--bald::before { background: #ffb257; animation: puls-bald 2s ease-out infinite; }
.status--later::before { background: #E3CFA3; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(91, 211, 122, .65); } 70%, 100% { box-shadow: 0 0 0 9px rgba(91, 211, 122, 0); } }
@keyframes puls-bald { 0% { box-shadow: 0 0 0 0 rgba(255, 178, 87, .65); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 178, 87, 0); } }
.hours .status--open::before { background: #2f9a52; }
.header__status { display: none; }
@media (min-width: 1320px) {
  .header__status:not(:empty) { display: inline-flex; }
  .header__status .status { background: transparent; color: var(--fg); padding: .35rem .2rem; backdrop-filter: none; font-weight: 600; white-space: nowrap; }
  .header__status .status--open::before { background: #2f9a52; }
}

/* ---------- 8 Zähler ---------- */
.facts--zaehler { margin: 0 0 clamp(28px, 4vw, 44px); }
.facts--zaehler .fact__num { font-variant-numeric: tabular-nums; }

/* ---------- 9 Lightbox: Fade und Scale ---------- */
.lightbox { opacity: 0; transition: opacity .26s ease; }
.lightbox.ist-offen { opacity: 1; }
.lightbox__figur { margin: 0; display: grid; place-items: center; transform: scale(.94); transition: transform .4s var(--weich); }
.lightbox.ist-offen .lightbox__figur { transform: none; }
.lightbox__bild { transition: opacity .25s ease; }
.lightbox__bild.ist-weg { opacity: 0; }
.lightbox__btn:focus-visible { outline: 2px solid var(--brass-3); outline-offset: 2px; }
.lightbox__count { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .78); font-size: .85rem; }

/* ---------- 10 Minidorf: Eisenbahn-Streifen ---------- */
.dorfbahn { height: max(96px, 13.34vw); overflow: hidden; background: var(--sand); }
.dorfbahn svg { display: block; width: 100%; height: 100%; }
.dorfbahn__zug { animation: dorfbahn-fahrt 24s linear infinite; }
@keyframes dorfbahn-fahrt { from { transform: translateX(-240px); } to { transform: translateX(1240px); } }
.dorfbahn__wackeln { animation: dorfbahn-wackeln .5s ease-in-out infinite alternate; }
@keyframes dorfbahn-wackeln { to { transform: translateY(-1.2px); } }
.dorfbahn__dampf circle { transform-box: fill-box; transform-origin: center; animation: dampf 1.5s ease-out infinite; opacity: 0; }
.dorfbahn__dampf circle:nth-child(2) { animation-delay: .5s; }
.dorfbahn__dampf circle:nth-child(3) { animation-delay: 1s; }
@keyframes dampf { 0% { opacity: .9; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(-26px, -30px) scale(1.9); } }
.dorfbahn__fahne { transform-box: fill-box; transform-origin: left center; animation: fahne 1.6s ease-in-out infinite alternate; }
@keyframes fahne { to { transform: skewY(9deg) scaleX(.86); } }
.dorfbahn__wolke { animation: wolken 60s linear infinite alternate; }
@keyframes wolken { to { transform: translateX(80px); } }

/* ---------- 12 Feste Leiste unten (Handy) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .mobile-cta { transition: translate .55s var(--weich); }
  html.js .mobile-cta:not(.ist-sichtbar) { translate: 0 115%; }
  html.js .mobile-cta.sofort { transition: none; }
}
.mobile-cta .btn--primary { position: relative; overflow: hidden; }
.mobile-cta .btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); pointer-events: none; opacity: 0; }
.mobile-cta.schimmert .btn--primary::after { animation: schimmer 1.2s .75s ease-in-out both; }
@keyframes schimmer { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }

/* ---------- 13 Footer: Wasserlinie mit Ente ---------- */
.footer__see { position: relative; height: 46px; margin: 1.5rem 0 calc(-2rem - 1px); overflow: hidden; container-type: inline-size; pointer-events: none; }
.footer__welle { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; overflow: hidden; }
.footer__welle svg { display: block; width: 200%; height: 100%; animation: welle 26s linear infinite; }
.footer__welle path { fill: rgba(191, 230, 247, .16); }
.footer__ente { position: absolute; left: 0; bottom: 8px; width: 48px; height: 34px; animation: ente-schwimmt 32s linear infinite; }
.footer__ente svg { display: block; animation: ente-wippt 1.7s ease-in-out infinite alternate; transform-origin: 50% 80%; }
@keyframes ente-schwimmt {
  0% { transform: translateX(8px) scaleX(1); }
  48% { transform: translateX(calc(100cqw - 56px)) scaleX(1); }
  50% { transform: translateX(calc(100cqw - 56px)) scaleX(-1); }
  98% { transform: translateX(8px) scaleX(-1); }
  100% { transform: translateX(8px) scaleX(1); }
}
@keyframes ente-wippt { to { transform: translateY(2.5px) rotate(-4deg); } }

/* ---------- Bewegung reduzieren: alles steht, nichts bleibt versteckt ---------- */
@media (prefers-reduced-motion: reduce) {
  .kommt { opacity: 1 !important; translate: none !important; }
  .hero--start .hero__media img, .hero--start .hero__title .wort, .stempel { animation: none !important; transform: none; }
  .stempel { transform: rotate(-3deg); }
  .footer__ente { transform: translateX(24px); }
  .hero__deko { display: none; }
}