/*! dach-sme-website motion 1.1
 *
 * Copy this file unchanged to the bundle root as motion.css and link it
 * BEFORE styles.css. Never edit it. The values a site may set are named in
 * references/motion.md and in the snippets; set them in styles.css or in the
 * markup. Type and colour are inherited from the site.
 *
 * Nothing in here moves on its own. motion.js switches motion on through two
 * classes on <html>:
 *   wm-on    script active, no reduced motion, not a Webcreator capture URL
 *   wm-lauf  self-running motion (M1, M2, T2) not halted by the visitor
 * Without them the page is still and shows all of its content.
 */

/* ── B1–B4 image masks: one per site, on the figure or directly on the img ── */
.wm-maske { display: block; overflow: hidden; margin: 0; }
.wm-maske > img { display: block; width: 100%; height: 100%; object-fit: cover; }
img.wm-maske { object-fit: cover; }
:where(.wm-maske--schild) { --wm-ecke: clamp(14px, 5vw, 44px); }
:where(.wm-maske--schraege) { --wm-schraege: clamp(24px, 9vw, 120px); }
.wm-maske--bogen { border-radius: 999vmax 999vmax 0 0; }
.wm-maske--kreis { aspect-ratio: 1; border-radius: 50%; }
.wm-maske--schild {
  clip-path: polygon(
    var(--wm-ecke) 0, calc(100% - var(--wm-ecke)) 0,
    100% var(--wm-ecke), 100% calc(100% - var(--wm-ecke)),
    calc(100% - var(--wm-ecke)) 100%, var(--wm-ecke) 100%,
    0 calc(100% - var(--wm-ecke)), 0 var(--wm-ecke)
  );
}
.wm-maske--schraege {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--wm-schraege)), 0 100%);
}

/* ── M1 Hero-Zoom: one slow pass, then it rests ── */
.wm-zoom { display: block; overflow: hidden; margin: 0; }
.wm-zoom > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wm-on .wm-zoom > img {
  transform-origin: var(--wm-zoom-punkt, 50% 50%);
  animation: wm-zoom var(--wm-zoom-dauer, 25s) cubic-bezier(0.2, 0.6, 0.3, 1) both paused;
}
.wm-lauf .wm-zoom > img { animation-play-state: running; }
@keyframes wm-zoom {
  from { transform: scale(1); }
  to { transform: scale(var(--wm-zoom-ziel, 1.08)); }
}

/* ── M2 Laufband: a row that can be scrolled by hand; motion.js makes it run ── */
:where(.wm-laufband) { --wm-abstand: 2.5rem; --wm-tempo: 40; --wm-trenner: "/"; }
.wm-laufband { overflow-x: auto; scrollbar-width: none; }
.wm-laufband::-webkit-scrollbar { display: none; }
.wm-laufband-reihe {
  display: flex;
  gap: var(--wm-abstand);
  width: max-content;
  margin: 0;
  padding: 0 var(--wm-abstand) 0 0;
  list-style: none;
  white-space: nowrap;
}
.wm-laufband-reihe > li { display: flex; gap: var(--wm-abstand); }
.wm-laufband-reihe > li::after { content: var(--wm-trenner); opacity: 0.55; }
/* Kept out of a screen reader's way where the browser can. A second declaration
   with var() would win everywhere and erase the separator in older browsers. */
@supports (content: "x" / "") {
  .wm-laufband-reihe > li::after { content: var(--wm-trenner) / ""; }
}
.wm-laufband-spur { display: flex; width: max-content; }
/* Halted, the row can be scrolled by hand again. */
.wm-lauf .wm-laufband--bereit { overflow: hidden; }
.wm-on .wm-laufband--bereit .wm-laufband-spur {
  animation: wm-laufband var(--wm-laufzeit, 40s) linear infinite paused;
}
.wm-lauf .wm-laufband--bereit .wm-laufband-spur { animation-play-state: running; }
.wm-lauf .wm-laufband--bereit:hover .wm-laufband-spur,
.wm-lauf .wm-laufband--bereit:focus-within .wm-laufband-spur,
.wm-lauf .wm-laufband--bereit:focus .wm-laufband-spur { animation-play-state: paused; }
@keyframes wm-laufband {
  to { transform: translateX(calc(-1 * var(--wm-reihe, 50%))); }
}

/* ── M3 Status: motion.js replaces the plain hours line; the dot is optional chrome ── */
.wm-status[data-wm-offen]::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-inline-end: 0.5em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.08em;
}
.wm-status[data-wm-offen="nein"]::before { opacity: 0.4; }
.wm-status-zusatz { margin-inline-start: 0.3em; font-size: 0.8em; opacity: 0.75; white-space: nowrap; }

/* ── M4 Versatz: photos drift against each other while the page scrolls ── */
.wm-on .wm-versatz [data-wm-scroll] {
  transform: translate3d(0, calc(var(--wm-p, 0) * var(--wm-weg, -8vh)), 0);
  will-change: transform;
}

/* ── M5 Fotoreihe: swipe sideways, no script ── */
:where(.wm-fotoreihe) { --wm-breite: 78%; --wm-abstand: 1rem; }
@media (min-width: 760px) {
  :where(.wm-fotoreihe) { --wm-breite: 38%; }
}
.wm-fotoreihe {
  display: flex;
  gap: var(--wm-abstand);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.wm-fotoreihe > * { flex: 0 0 var(--wm-breite); margin: 0; scroll-snap-align: start; }
.wm-fotoreihe img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── M6 Zähler: the final number is in the HTML; digits keep their width ── */
.wm-zahl { font-variant-numeric: tabular-nums; }

/* ── T1 Achse: the headline grows bolder or wider while it scrolls away.
   motion.js sets --wm-von to the headline's own weight or width, so the page
   opens exactly as it stands without motion; --wm-fett-bis / --wm-breit-bis
   are the end values (default: 300 heavier, 25 % wider). ── */
.wm-on .wm-achse--bereit.wm-achse--fett {
  font-weight: calc(var(--wm-von) + var(--wm-p, 0) * (var(--wm-fett-bis) - var(--wm-von)));
}
.wm-on .wm-achse--bereit.wm-achse--breit {
  font-stretch: calc((var(--wm-von) + var(--wm-p, 0) * (var(--wm-breit-bis) - var(--wm-von))) * 1%);
}

/* ── T2 Wortwechsel: the first word is in the HTML, the others wait hidden.
   All words share one grid cell in every state, so the line is as wide as
   the longest word with or without motion and the headline never re-wraps. ── */
:where(.wm-wechsel) { --wm-takt: 2600; }
.wm-wechsel { display: inline-grid; }
.wm-wechsel > .wm-wort { grid-area: 1 / 1; white-space: nowrap; }
.wm-wechsel > .wm-wort[hidden] { display: block !important; visibility: hidden; }
.wm-wechsel--bereit > .wm-wort {
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.wm-wechsel--bereit > .wm-wort.wm-aktiv { opacity: 1; transform: none; }

/* ── T3 Zitat: words gain their full colour as the quote arrives ── */
:where(.wm-zitat) { --wm-matt: 0.45; }
.wm-on .wm-zitat:not(.wm-ruhe) .wm-w {
  opacity: clamp(var(--wm-matt), calc(var(--wm-p, 0) * (var(--wm-n, 1) + 3) - var(--wm-i, 0)), 1);
  transition: opacity 0.2s linear;
}

/* ── S1 / S2 Stationen: three stations; stacked blocks without motion.
   motion.js marks a section wm-ruhe when its stage cannot stick (an ancestor
   scrolls or clips); it then stays stacked instead of losing two stations. ── */
:where(.wm-buehne) { --wm-stapel: 3rem; }
.wm-buehne { display: grid; gap: var(--wm-stapel); }
.wm-station { margin: 0; }
.wm-on .wm-stationen:not(.wm-ruhe) { height: 250vh; }
.wm-on .wm-stationen:not(.wm-ruhe) > .wm-buehne {
  position: sticky;
  top: calc(var(--wm-oben, 0px) + var(--wm-kopf, 0px));
  height: calc(100vh - var(--wm-oben, 0px) - var(--wm-kopf, 0px));
  gap: 0;
  overflow: hidden;
}
/* The small viewport height keeps the stage clear of a phone's toolbars. In its
   own block, because a second declaration with var() would win even where svh
   is unknown and leave the stage without a height. */
@supports (height: 100svh) {
  .wm-on .wm-stationen:not(.wm-ruhe) { height: 250svh; }
  .wm-on .wm-stationen:not(.wm-ruhe) > .wm-buehne { height: calc(100svh - var(--wm-oben, 0px) - var(--wm-kopf, 0px)); }
}
.wm-on .wm-stationen:not(.wm-ruhe) .wm-station {
  grid-area: 1 / 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.wm-on .wm-stationen:not(.wm-ruhe) .wm-station > img,
.wm-on .wm-stationen:not(.wm-ruhe) .wm-station > figure { min-height: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.wm-on .wm-stationen:not(.wm-ruhe) .wm-station > figure > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wm-on .wm-stationen:not(.wm-ruhe) > .wm-buehne:not([data-wm-schritt]) > .wm-station:nth-child(1),
.wm-on .wm-stationen:not(.wm-ruhe) > .wm-buehne[data-wm-schritt="0"] > .wm-station:nth-child(1),
.wm-on .wm-stationen:not(.wm-ruhe) > .wm-buehne[data-wm-schritt="1"] > .wm-station:nth-child(2),
.wm-on .wm-stationen:not(.wm-ruhe) > .wm-buehne[data-wm-schritt="2"] > .wm-station:nth-child(3) { opacity: 1; pointer-events: auto; }

/* ── A1 Aufbau: below the first screen the page builds up as it scrolls and
   falls back at the lower edge when it scrolls back. motion.js chooses the
   parts (wm-auf--bereit) and only starts with the visitor's own scrolling, so
   a page nobody has scrolled, or that a script scrolls, shows all of its
   content. Only the waiting state is written here: a part that has arrived
   carries nothing from this file and stands exactly as it does without
   motion. wm-auf--zug lends it a transition for the one move; wm-auf--weg
   marks the parts that may be shifted while they wait. ── */
@media screen and (prefers-reduced-motion: no-preference) {
  .wm-on .wm-auf--zug {
    transition:
      opacity var(--wm-auf-dauer, 0.6s) ease,
      translate var(--wm-auf-dauer, 0.6s) cubic-bezier(0.2, 0.6, 0.3, 1) !important;
  }
  .wm-on .wm-auf--bereit:not(.wm-da):not(:focus-within) { opacity: 0 !important; }
  .wm-on .wm-auf--bereit.wm-auf--weg:not(.wm-da):not(:focus-within) {
    translate: 0 var(--wm-auf-weg, 1.5rem) !important;
  }
  /* The target of an in-page link stands where the link expects it. */
  .wm-on .wm-auf--bereit.wm-auf--weg:not(.wm-da):not(:focus-within):target { translate: none !important; }
  .wm-on .wm-auf--bereit.wm-auf--weg:not(.wm-da):not(:focus-within):has(:target) { translate: none !important; }
}

/* ── Stop control for self-running motion (motion.js adds it to the page foot) ── */
.wm-halt {
  min-height: 44px;
  padding: 0.75rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  opacity: 0.8;
  cursor: pointer;
}
.wm-halt[hidden] { display: none; }

/* ── Belt to the braces: reduced motion never animates, whatever the classes say ── */
@media (prefers-reduced-motion: reduce) {
  .wm-zoom > img, .wm-laufband-spur { animation: none !important; }
  .wm-wort, .wm-station, .wm-w { transition: none !important; }
}

/* ── On paper the page is the still page: every station, every word, no control ── */
@media print {
  .wm-zoom > img, .wm-laufband-spur { animation: none !important; transform: none !important; }
  .wm-on .wm-stationen { height: auto !important; }
  .wm-on .wm-stationen > .wm-buehne { position: static !important; height: auto !important; gap: var(--wm-stapel) !important; overflow: visible !important; }
  .wm-on .wm-stationen .wm-station { display: block !important; grid-area: auto !important; opacity: 1 !important; transition: none !important; }
  .wm-on .wm-stationen .wm-station > img,
  .wm-on .wm-stationen .wm-station > figure,
  .wm-on .wm-stationen .wm-station > figure > img { height: auto !important; }
  .wm-on .wm-zitat .wm-w { opacity: 1 !important; transition: none !important; }
  .wm-on .wm-versatz [data-wm-scroll] { transform: none !important; }
  .wm-halt { display: none !important; }
}