/* Gemeinsames Skelett der statischen Seiten. Tokens wie in src/styles.css. */
:root {
  --dur-1: 120ms; --dur-2: 240ms; --dur-3: 480ms; --dur-4: 800ms;
  --ease-out: cubic-bezier(.2,.8,.2,1); --ease-in-out: cubic-bezier(.6,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.3,.64,1);
  --shift-1: 8px; --shift-2: 16px; --shift-3: 28px; --stagger: 70ms;
}
.ico { display: inline-block; width: 1.05em; height: 1.05em; flex: 0 0 auto; vertical-align: -.15em; }
:is(.cta, .btn, .dl, .go, button) { display: inline-flex; align-items: center; justify-content: center; gap: .4em; }
:is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--gold, #e8b968); outline-offset: 3px; }
[id] { scroll-margin-top: 6rem; }

html[data-motion="calm"] {
  --dur-3: 240ms; --dur-4: 240ms;
  --shift-1: 0px; --shift-2: 0px; --shift-3: 0px; --stagger: 0ms;
}
html:not([data-motion="full"]) :is(.card, .post, .live, .rev, .cta, .btn, ol.steps li):hover {
  transform: none;
}
html[data-motion="calm"] *, html[data-motion="calm"] *::before, html[data-motion="calm"] *::after {
  transition-property: color, background-color, border-color, opacity, box-shadow, fill, filter;
  transition-duration: var(--dur-1);
  transition-timing-function: var(--ease-out);
}
html[data-motion="off"] {
  --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms;
  --shift-1: 0px; --shift-2: 0px; --shift-3: 0px; --stagger: 0ms;
}
html[data-motion="off"], html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* Kurze Überblendung zwischen Dokumenten; kein Verschieben benannter Gruppen. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation: none; }
::view-transition-old(*) { animation: htDocumentOut var(--dur-2) var(--ease-in-out) both; }
::view-transition-new(*) { animation: htDocumentIn var(--dur-2) var(--ease-out) both; }
@keyframes htDocumentOut { to { opacity: 0; } }
@keyframes htDocumentIn { from { opacity: 0; } }
html[data-motion="off"]::view-transition { display: none; }
html[data-motion="off"]::view-transition-group(*),
html[data-motion="off"]::view-transition-old(*), html[data-motion="off"]::view-transition-new(*) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html, html *, html *::before, html *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :is(.card, .post, .live, .rev, .cta, .btn, ol.steps li):hover { transform: none; }
  ::view-transition { display: none; }
}