:root {
  /* Dauern — 700 ms ist die harte Obergrenze des Systems */
  --mo-dur-1: 100ms;   /* Druckpunkt, :active                         */
  --mo-dur-2: 180ms;   /* Hover, Fokus, Oberflächenwechsel            */
  --mo-dur-3: 260ms;   /* Place — etwas wird abgesetzt                */
  --mo-dur-4: 420ms;   /* Mark und Move                               */
  --mo-dur-5: 640ms;   /* Load — die einzige große Bewegung           */

  /* Easings — jede Kurve hat eine physikalische Begründung           */
  --mo-ease-load:  cubic-bezier(.20, .60, .20, 1.00); /* schwer, kommt satt zum Stehen */
  --mo-ease-move:  cubic-bezier(.40, .00, .20, 1.00); /* gleichmäßiger Transport       */
  --mo-ease-place: cubic-bezier(.22, 1.00, .36, 1.00); /* setzt auf, ohne zu federn    */
  --mo-ease-mark:  cubic-bezier(.65, .00, .35, 1.00); /* Strichansatz, klarer Abriss   */
  --mo-ease-route: linear;                            /* eine Strecke hat ein Tempo    */

  /* Distanzen — mehr als 20 px gibt es nicht */
  --mo-dist-s: 6px;
  --mo-dist-m: 12px;
  --mo-dist-l: 20px;

  /* Staffelung */
  --mo-stagger: 60ms;      /* Schrittweite  */
  --mo-stagger-max: 4;     /* mehr Elemente werden nicht gestaffelt */
}

/* Mobil: kürzer, kürzere Wege, keine Staffelung. */
@media (max-width: 60rem) {
  :root {
    --mo-dur-3: 200ms;
    --mo-dur-4: 320ms;
    --mo-dur-5: 480ms;
    --mo-dist-s: 3px;
    --mo-dist-m: 7px;
    --mo-dist-l: 10px;
    --mo-stagger: 0ms;
  }
}

/* Patterns carry strohmann-mo-* classes: matching attributes are set by the
   module so Gutenberg's serialized block comments stay byte-for-byte aligned. */
[data-mo] { transition-timing-function: var(--mo-ease-place); }
/*
 * Startzustaende haengen an data-motion, nicht allein an html.js: Die Klasse
 * setzt ein Inline-Skript vor dem ersten Paint, das Attribut erst das geladene
 * Motion-Modul. Ohne diese Kopplung blieben Load- und Place-Inhalte dauerhaft
 * unsichtbar, wenn das Modul nicht laedt oder frueh abbricht.
 */
html.js[data-motion] .strohmann-mo-load, html.js[data-motion] [data-mo="load"] { opacity: 0; transform: translateY(var(--mo-dist-m)); transition: transform var(--mo-dur-5) var(--mo-ease-load), opacity var(--mo-dur-5) linear; }
html.js[data-motion] .strohmann-mo-place, html.js[data-motion] [data-mo="place"] { opacity: 0; transform: translateY(var(--mo-dist-s)); transition: transform var(--mo-dur-3) var(--mo-ease-place), opacity var(--mo-dur-3) linear; }
html.js[data-motion] [data-mo="move"] { opacity: 0; transform: translateY(var(--mo-dist-s)); transition: transform var(--mo-dur-4) var(--mo-ease-move), opacity var(--mo-dur-4) linear; }
/*
 * Die Zeige-Regel muss die Versteck-Regeln darueber schlagen. Sie stand
 * vorher ohne Praefix da und verlor damit gegen jede von ihnen: Elemente
 * bekamen zwar data-mo-state="in", blieben aber auf opacity 0 — dauerhaft
 * und fuer jeden Besucher. Unsichtbar waren dadurch unter anderem die drei
 * Beweiszeilen der Startseite (Pfarrhaus, Bankfilialen, Erlangen), die
 * Grossziffern der Umzugsberichte und das Abschlussbild. Sichtbarkeit von
 * Inhalt darf nie von einer Spezifitaetsfrage abhaengen.
 */
html.js[data-motion] [data-mo][data-mo-state="in"], [data-mo][data-mo-state="in"] { opacity: 1; transform: none; transition-delay: calc(min(var(--i, 0), var(--mo-stagger-max)) * var(--mo-stagger)); }
.strohmann-umzugsberichte__grid > :nth-child(1) .strohmann-plate { --i: 0; }
.strohmann-umzugsberichte__grid > :nth-child(2) .strohmann-plate { --i: 1; }
.strohmann-umzugsberichte__grid > :nth-child(3) .strohmann-plate { --i: 2; }

html.js .strohmann-mo-route::before { transform: scaleX(0); transform-origin: left; transition: transform var(--mo-dur-2) var(--mo-ease-route); }
html.js .strohmann-mo-route[data-mo-state="in"]::before { transform: scaleX(1); }
html.js .strohmann-ablauf-r2__nr::after { transform: skewX(-14deg) scaleX(0); transform-origin: left; transition: transform 320ms var(--mo-ease-mark); transition-delay: calc(var(--i, 0) * var(--mo-stagger) + var(--mo-dur-2)); }
html.js .strohmann-mo-route[data-mo-state="in"] .strohmann-ablauf-r2__nr::after { transform: skewX(-14deg) scaleX(1); }

/* Mark and route leave their content readable and animate only their marks. */
html.js .strohmann-mo-mark::before, html.js .strohmann-mo-mark .strohmann-keil, html.js .strohmann-mo-mark .strohmann-kbox__box::before, html.js .strohmann-mo-mark .strohmann-kbox__box::after { transition: transform var(--mo-dur-4) var(--mo-ease-mark); }
html.js h2.strohmann-mo-mark::before { transition-duration: 320ms; }
html.js .strohmann-mo-mark::before, html.js .strohmann-mo-mark .strohmann-keil { transform: skewX(-14deg) scaleY(0); transform-origin: top; }
html.js .strohmann-mo-mark .strohmann-kbox__box::before { transform: rotate(42deg) scaleX(0); transform-origin: left center; }
html.js .strohmann-mo-mark .strohmann-kbox__box::after { transform: rotate(-42deg) scaleX(0); transform-origin: left center; transition-delay: 90ms; }
.strohmann-kbox.strohmann-mo-mark > li:nth-child(2) .strohmann-kbox__box::before { transition-delay: 110ms; }
.strohmann-kbox.strohmann-mo-mark > li:nth-child(2) .strohmann-kbox__box::after { transition-delay: 200ms; }
.strohmann-kbox.strohmann-mo-mark > li:nth-child(3) .strohmann-kbox__box::before { transition-delay: 220ms; }
.strohmann-kbox.strohmann-mo-mark > li:nth-child(3) .strohmann-kbox__box::after { transition-delay: 310ms; }
.strohmann-kbox.strohmann-mo-mark > li:nth-child(4) .strohmann-kbox__box::before { transition-delay: 330ms; }
.strohmann-kbox.strohmann-mo-mark > li:nth-child(4) .strohmann-kbox__box::after { transition-delay: 420ms; }
.strohmann-mo-mark[data-mo-state="in"]::before, .strohmann-mo-mark[data-mo-state="in"] .strohmann-keil { transform: skewX(-14deg) scaleY(1); }
.strohmann-mo-mark[data-mo-state="in"] .strohmann-kbox__box::before { transform: rotate(42deg) scaleX(1); }
.strohmann-mo-mark[data-mo-state="in"] .strohmann-kbox__box::after { transform: rotate(-42deg) scaleX(1); }

.strohmann-leistungen-az__row:hover .strohmann-keil, .strohmann-leistungen-az__row:focus-within .strohmann-keil { transform: skewX(-14deg) scaleX(3.4); transform-origin: left; transition: transform var(--mo-dur-2) var(--mo-ease-load); }
.is-style-signal .wp-block-button__link { transition: transform var(--mo-dur-1) var(--mo-ease-place), background-color var(--wp--custom--transition) ease, color var(--wp--custom--transition) ease; }
.is-style-signal .wp-block-button__link:active { transform: translateY(1px); }

/* Nutzerinitiiert: die einzige Layout-Ausnahme für Details-Inhalte. */
.strohmann-faq details > .strohmann-faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mo-dur-4) var(--mo-ease-move); }
.strohmann-faq details > .strohmann-faq__answer > * { min-height: 0; overflow: hidden; }
.strohmann-faq details[open] > .strohmann-faq__answer { grid-template-rows: 1fr; }

.strohmann-site-header { position: relative; border-bottom-color: var(--wp--preset--color--ink); }
.strohmann-site-header::after { position: absolute; right: 0; bottom: calc(-1 * var(--wp--custom--header-accent)); left: 0; height: var(--wp--custom--header-accent); background: var(--wp--preset--color--brand-yellow); content: ""; transform: scaleX(1); transform-origin: left; }
@supports (animation-timeline: scroll(root)) {
  html:not([data-motion="reduced"]) .strohmann-site-header::after { animation: strohmann-route 1s var(--mo-ease-route) both; animation-timeline: scroll(root); }
}
@keyframes strohmann-route { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.strohmann-sticky { transition: background-color 200ms var(--mo-ease-route), color 200ms var(--mo-ease-route); }
html[data-surface="ink"] .strohmann-sticky { background: var(--wp--preset--color--brand-yellow); color: var(--wp--preset--color--ink); }
html[data-surface="ink"] .strohmann-sticky__phone, html[data-surface="ink"] .strohmann-sticky__cta { background: transparent; color: var(--wp--preset--color--ink); }
html[data-surface="ink"] .strohmann-sticky a { color: var(--wp--preset--color--ink); }

.strohmann-gruss__smiley .strohmann-gruss__eye-closed { opacity: 0; }
.strohmann-mo-wink[data-mo-state="in"] .strohmann-gruss__eye-open { animation: strohmann-wink-open 180ms step-end 1; }
.strohmann-mo-wink[data-mo-state="in"] .strohmann-gruss__eye-closed { animation: strohmann-wink-closed 180ms step-end 1; }
@keyframes strohmann-wink-open { 50% { opacity: 0; } }
@keyframes strohmann-wink-closed { 50% { opacity: 1; } }

@media (max-width: 60rem) { .strohmann-leistungen-az__row .strohmann-keil { transform: skewX(-14deg) scaleX(1.8); transform-origin: left; } }
@media (max-width: 60rem) { .strohmann-kbox.strohmann-mo-mark .strohmann-kbox__box::before, .strohmann-kbox.strohmann-mo-mark .strohmann-kbox__box::after { transition-delay: 0ms; } }
@media (max-width: 60rem) { html.js .strohmann-mo-route::before { transform: scaleY(0); transform-origin: top; } html.js .strohmann-mo-route[data-mo-state="in"]::before { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  /* Jedes Motion-Element steht sofort im Endzustand. */
  [data-mo] { opacity: 1 !important; transform: none !important; }
  .strohmann-h2-keil h2::before { transform: skewX(-14deg) !important; }
  .strohmann-kbox__box::before  { transform: rotate(42deg)  !important; }
  .strohmann-kbox__box::after   { transform: rotate(-42deg) !important; }
  .strohmann-site-header::after { transform: none !important; } /* Streckenband voll */
  .strohmann-mo-route::before { transform: none !important; }
  .strohmann-ablauf-r2__nr::after { transform: skewX(-14deg) scaleX(1) !important; transition: none !important; }
}

html[data-motion="reduced"] .strohmann-sticky, html[data-motion="reduced"] .strohmann-faq__answer { transition: none; }
html[data-motion="reduced"] .strohmann-gruss__smiley * { animation: none !important; }

/* Route: the static default is the arrived scene; only html.js opts in to motion. */
.strohmann-fahrt { --strohmann-section-y: calc(var(--wp--custom--section-y) * 1.5); --strohmann-section-bg: var(--wp--preset--color--paper); --fahrt-w: clamp(200px, 24vw, 280px); position: relative; height: clamp(180px, 26vh, 260px); overflow: hidden; }
/*
 * Die Bühnenelemente werden über Insets positioniert, nicht über den Textfluss.
 * Ohne max-width:none deckelt das Constrained-Layout sie auf contentSize
 * (760 px) — die Routenlinie endete dann 200 px vor dem Fahrzeug, der Wagen
 * stand sichtbar neben seiner eigenen Strecke.
 */
.strohmann-fahrt__route, .strohmann-fahrt__fahrzeug, .strohmann-fahrt__stop { max-width: none !important; }
.strohmann-fahrt__route { position: absolute; right: max(24px, calc((100% - var(--wp--style--global--wide-size, 1240px)) / 2)); bottom: 28px; left: max(24px, calc((100% - var(--wp--style--global--wide-size, 1240px)) / 2)); height: 2px; background: var(--wp--preset--color--ink); transform-origin: left; }
.strohmann-fahrt__fahrzeug { position: absolute; right: max(24px, calc((100% - var(--wp--style--global--wide-size, 1240px)) / 2)); bottom: 28px; width: var(--fahrt-w); aspect-ratio: 880 / 400; }
.strohmann-fahrt__fahrzeug svg { display: block; width: 100%; height: 100%; overflow: visible; }
.strohmann-fahrt__rad { transform-box: fill-box; transform-origin: center; }
.strohmann-fahrt__stop { position: absolute; z-index: 1; margin: 0; padding: 3px 7px; border: 1px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--surface); font-size: var(--wp--preset--font-size--small); line-height: 1.2; }
.strohmann-fahrt__stop--start { bottom: 46px; left: max(24px, calc((100% - var(--wp--style--global--wide-size, 1240px)) / 2)); }
.strohmann-fahrt__stop--gostenhof { bottom: 63px; left: 37%; }
.strohmann-fahrt__stop--altstadt { bottom: 42px; left: 57%; }
/* Über dem Fahrzeug, nicht darauf: Die Kofferhöhe ergibt sich aus der Breite
   und dem viewBox-Verhältnis 880:400. */
.strohmann-fahrt__stop--ziel { right: max(24px, calc((100% - var(--wp--style--global--wide-size, 1240px)) / 2)); bottom: calc(28px + var(--fahrt-w) * 400 / 880 + 12px); }
html.js[data-motion="full"] .strohmann-fahrt__fahrzeug { right: auto; left: max(24px, calc((100% - var(--wp--style--global--wide-size, 1240px)) / 2)); }
html.js[data-motion="full"] .strohmann-fahrt__route { transform: scaleX(0); }
html.js[data-motion="full"] .strohmann-fahrt__stop--ziel { opacity: 0; transform: translateY(var(--mo-dist-s)); transition: opacity var(--mo-dur-3) linear, transform var(--mo-dur-3) var(--mo-ease-place); }
html.js[data-motion="full"] .strohmann-fahrt.is-arrived .strohmann-fahrt__stop--ziel { opacity: 1; transform: none; }
html[data-kb="open"] .strohmann-fahrt__fahrzeug, html[data-kb="open"] .strohmann-fahrt__route, html[data-kb="open"] .strohmann-fahrt__rad { transition: none !important; animation-play-state: paused !important; }
@media (max-width: 60rem) { .strohmann-fahrt__stop--gostenhof, .strohmann-fahrt__stop--altstadt { display: none; } html.js[data-motion="full"] .strohmann-fahrt.is-mobile-enter .strohmann-fahrt__fahrzeug { transition: transform var(--mo-dur-5) var(--mo-ease-move); } html.js[data-motion="full"] .strohmann-fahrt.is-mobile-enter .strohmann-fahrt__rad { transition: transform var(--mo-dur-5) var(--mo-ease-move); } }
@media (prefers-reduced-motion: reduce) { .strohmann-fahrt__route { transform: scaleX(1) !important; } .strohmann-fahrt__fahrzeug { right: max(24px, calc((100% - var(--wp--style--global--wide-size, 1240px)) / 2)); left: auto; transform: none !important; } .strohmann-fahrt__rad { transform: none !important; } .strohmann-fahrt__stop--ziel { opacity: 1 !important; transform: none !important; } }
/*
 * Alle drei Bewegungen haengen an EINER benannten Timeline des Bandes.
 * Vorher war jedes Element sein eigenes view()-Subjekt — die Routenlinie
 * skalierte sich damit selbst auf Breite 0, ihre Timeline meldete daraufhin
 * Fortschritt 0, und sie blieb auf 0 stehen: Das Fahrzeug fuhr, die Linie
 * wurde nie gezeichnet. Ein Subjekt, das sich nicht selbst wegskalieren
 * kann, loest die Rueckkopplung und haelt Fahrzeug, Linie und Raeder
 * zwangslaeufig synchron.
 */
@media (min-width: 60.001rem) and (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		html.js[data-motion="full"] .strohmann-fahrt.is-css-route { view-timeline: --strohmann-fahrt block; view-timeline-inset: 0% 15%; }
		html.js[data-motion="full"] .strohmann-fahrt.is-css-route .strohmann-fahrt__fahrzeug,
		html.js[data-motion="full"] .strohmann-fahrt.is-css-route .strohmann-fahrt__route,
		html.js[data-motion="full"] .strohmann-fahrt.is-css-route .strohmann-fahrt__stop--ziel,
		html.js[data-motion="full"] .strohmann-fahrt.is-css-route .strohmann-fahrt__rad { animation-timeline: --strohmann-fahrt; animation-timing-function: linear; animation-fill-mode: both; animation-duration: auto; }
		html.js[data-motion="full"] .strohmann-fahrt.is-css-route .strohmann-fahrt__fahrzeug { animation-name: strohmann-fahrt-x; }
		html.js[data-motion="full"] .strohmann-fahrt.is-css-route .strohmann-fahrt__route { animation-name: strohmann-fahrt-line; }
		html.js[data-motion="full"] .strohmann-fahrt.is-css-route .strohmann-fahrt__rad { animation-name: strohmann-fahrt-wheel; }
		/*
		 * Die Ziel-Plate haengt an derselben Timeline, nicht an einem
		 * animationend-Ereignis: Scroll-gekoppelte Animationen feuern das nie,
		 * die Plate waere dauerhaft unsichtbar geblieben — und mit ihr ein
		 * Inhaltselement. Inhalt darf nicht von Bewegung abhaengen.
		 */
		html.js[data-motion="full"] .strohmann-fahrt.is-css-route .strohmann-fahrt__stop--ziel { animation-name: strohmann-fahrt-ziel; }
	}
}

@keyframes strohmann-fahrt-ziel {
	0%, 88% { opacity: 0; transform: translateY(var(--mo-dist-s)); }
	100% { opacity: 1; transform: none; }
}
@keyframes strohmann-fahrt-x { to { transform: translate3d(var(--fahrt-d), 0, 0); } }
@keyframes strohmann-fahrt-line { to { transform: scaleX(1); } }
/* Die Raddrehung kommt fertig als Winkel aus measure(): CSS darf Länge nicht
   durch Länge teilen, calc(var(--fahrt-d) / var(--fahrt-r)) waere ungueltig
   und die ganze Animation wuerde verworfen — das Fahrzeug wuerde mit
   stehenden Raedern gleiten. */
@keyframes strohmann-fahrt-wheel { to { transform: rotate(var(--fahrt-turn, 0deg)); } }