/* IsoProfil theme – motion. Approved 09.10.2026: 24 effects, codes as on the test page
   Animationen/startseite-animationen.html; choice, history and how to change it: Animationen/freigabe.md.
   Movement only with .m-on – set in the head when the visitor has not asked for reduced motion (inc/setup.php);
   .m-first marks the first page of a visit. Colour feedback works without motion. Only transform, translate, scale,
   opacity and clip-path move: no layout shift. Hover effects only where a real pointer hovers; keyboard focus gets the
   same feedback. Elements are hidden only after assets/js/motion.js has marked them (below the visible area). */

:root {
  --m-t: 1;                                          /* tempo of all effects: 1.2 = 20 % slower */
  --m-out: cubic-bezier(.16, 1, .3, 1);              /* entering: quick start, long soft landing */
  --m-inout: cubic-bezier(.65, 0, .35, 1);           /* wipes and bars: mechanical, precise */
  --m-hover: cubic-bezier(.2, .7, .2, 1);            /* state changes */
  --m-lift: 0 24px 44px -22px rgba(0, 28, 49, .5), 0 8px 16px -10px rgba(0, 28, 49, .2);
  --m-glow: 0 12px 26px -12px rgba(120, 170, 0, .9);
}

@keyframes m-up { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes m-up-sm { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes m-drop { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
@keyframes m-word { from { opacity: .12; translate: 0 .35em; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes m-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-wipe-back { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-bar { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes m-pop { 0% { opacity: 0; scale: .3; } 60% { opacity: 1; scale: 1.2; } 100% { opacity: 1; scale: 1; } }
@keyframes m-pulse { from { box-shadow: 0 0 0 0 rgba(178, 236, 40, .8); } to { box-shadow: 0 0 0 18px rgba(178, 236, 40, 0); } }
@keyframes m-in-right { from { opacity: 0; translate: calc(100% + 24px) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes m-arrow { 0% { translate: 0 0; } 45% { translate: 150% -150%; } 45.1% { translate: -150% 150%; } 100% { translate: 0 0; } }
@keyframes m-arrow-r { 0% { translate: 0 0; } 45% { translate: 150% 0; } 45.1% { translate: -150% 0; } 100% { translate: 0 0; } }
@keyframes m-arrow-l { 0% { translate: 0 0; } 45% { translate: -150% 0; } 45.1% { translate: 150% 0; } 100% { translate: 0 0; } }
@keyframes m-ring { 0%, 100% { rotate: 0deg; } 12% { rotate: -16deg; } 24% { rotate: 14deg; } 36% { rotate: -12deg; } 48% { rotate: 10deg; } 60% { rotate: -6deg; } 72% { rotate: 3deg; } }
@keyframes m-press { 0% { scale: .92; } 60% { scale: 1.05; } 100% { scale: 1; } }
@keyframes m-roll { from { opacity: 0; translate: 0 .5em; } to { opacity: 1; translate: 0 0; } }
@keyframes m-failsafe { to { opacity: 1; } }

/* ---------- A · on load ---------- */
/* A1 header glides in – first page of a visit only (service bar and bar of menu A, the phone bar) */
.m-on.m-first :is(.hd-util, .hd-bar, .mob-bar) { animation: m-drop calc(var(--m-t) * 700ms) var(--m-out) both; }
.m-on.m-first .hd-bar { animation-delay: calc(var(--m-t) * 80ms); }

/* A2 headlines word by word (words split by motion.js) – home hero, page heads, news heads. They start faint, not invisible:
   the headline counts as painted from the first frame (Largest Contentful Paint). Until the split they wait faint; the
   failsafe shows them if the script fails. The lines below follow; the head photos never move (they are the LCP element). */
.m-on :is(.hero__title, .phero__inner > h1, .shero h1):not(.m-split) { opacity: .12; animation: m-failsafe 0s calc(var(--m-t) * 2s) forwards; }
.m-on .m-split .m-w { display: inline-block; animation: m-word calc(var(--m-t) * 900ms) var(--m-out) both; animation-delay: calc(var(--m-t) * (120ms + var(--i, 0) * 70ms)); }
.m-on .hero .btn-row > * { animation: m-up calc(var(--m-t) * 800ms) var(--m-out) both; animation-delay: calc(var(--m-t) * (700ms + var(--i, 0) * 100ms)); }
.m-on :is(.phero__inner > :not(h1), .shero .crumbs, .shero .meta) { animation: m-up calc(var(--m-t) * 800ms) var(--m-out) both; animation-delay: calc(var(--m-t) * (550ms + var(--i, 0) * 100ms)); }

/* A3 lime line under „20x“ – drawn after the headline, then it stays */
.hero__title .hl { position: relative; }
.hero__title .hl::after { content: ""; position: absolute; left: .02em; right: -.04em; bottom: .02em; height: .1em; border-radius: .05em; background: var(--c-accent); transform-origin: left center; pointer-events: none; }
.m-on .hero__title .hl::after { animation: m-bar calc(var(--m-t) * 800ms) var(--m-inout) both; animation-delay: calc(var(--m-t) * 1000ms); }

/* A5 quick contact slides in, the phone sends two lime pulses – first page of a visit only */
.m-on.m-first .side-contact { animation: m-in-right calc(var(--m-t) * 800ms) var(--m-out) both; animation-delay: calc(var(--m-t) * 1100ms); }
.m-on.m-first .side-contact > a:first-child { animation: m-pulse calc(var(--m-t) * 1100ms) ease-out 2; animation-delay: calc(var(--m-t) * 2100ms); }

/* ---------- B · on scroll (motion.js marks elements below the visible area, .m-in when they come into view) ---------- */
/* B1 texts, B2 cards */
.m-on .m-rv--up:not(.m-in) { opacity: 0; }
.m-on .m-rv--up.m-in { animation: m-up calc(var(--m-t) * 800ms) var(--m-out) both; animation-delay: calc(var(--m-t) * var(--m-d, 0ms)); }

/* B3 (images open like an extruded profile) switched off 13.10.2026 – user: „bitte abschalten“ */

/* B4 key figures: suffix pops up in lime when the counter (site.js, 1.6 s) lands, labels glide in */
.m-on .stats.m-rv-stats:not(.m-in) :is(.stat__suf, .stat__label) { opacity: 0; }
.m-on .stats.m-rv-stats.m-in .stat__suf { animation: m-pop calc(var(--m-t) * 650ms) var(--m-hover) both; animation-delay: calc(1350ms + var(--i, 0) * 90ms); }
.m-on .stats.m-rv-stats.m-in .stat__label { animation: m-up-sm calc(var(--m-t) * 700ms) var(--m-out) both; animation-delay: calc(250ms + var(--i, 0) * 90ms); }

/* B5 references: the new slide opens in paging direction, text follows, the number rolls (after the first click) */
.ref__text > :nth-child(2) { --i: 1; }
.ref__text > :nth-child(3) { --i: 2; }
.ref__text > :nth-child(4) { --i: 3; }
.m-on .refs.m-touched .ref.is-active .ref__text > * { animation: m-up calc(var(--m-t) * 700ms) var(--m-out) both; animation-delay: calc(var(--m-t) * (80ms + var(--i, 0) * 70ms)); }
.m-on .refs.m-touched .ref.is-active .ref__media > * { animation: m-wipe calc(var(--m-t) * 900ms) var(--m-inout) both; }
.m-on .refs.m-touched.m-back .ref.is-active .ref__media > * { animation-name: m-wipe-back; }
.m-on .refs__count .m-roll { display: inline-block; animation: m-roll calc(var(--m-t) * 500ms) var(--m-out) both; }

/* B6 news bar fills once */
.m-on .m-rv--bar i { transform-origin: left center; }
.m-on .m-rv--bar:not(.m-in) i { scale: 0 1; }
.m-on .m-rv--bar.m-in i { animation: m-bar calc(var(--m-t) * 1400ms) var(--m-inout) both; animation-delay: calc(var(--m-t) * 300ms); }

/* B8 collage with depth – motion.js moves the three pictures at different speeds */
.m-on .collage > div { will-change: transform; }

/* ---------- C · hover, focus and click ---------- */
/* C1 buttons: light reflex, lift with lime glow, give way on click (the light blue mega menu button keeps its own hover) */
.btn:not(.btn--ghost):not(.btn--white):not(.mega__cta) { position: relative; isolation: isolate; overflow: hidden; }
.btn:not(.btn--ghost):not(.btn--white):not(.mega__cta)::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .75) 47%, rgba(255, 255, 255, .75) 53%, transparent 70%); translate: -101% 0; pointer-events: none; }
.m-on .btn:not(.btn--ghost):not(.btn--white):not(.mega__cta) { transition: background-color .2s, border-color .2s, color .2s, transform calc(var(--m-t) * 300ms) var(--m-hover), box-shadow calc(var(--m-t) * 300ms) var(--m-hover); }
@media (hover: hover) and (pointer: fine) {
  .m-on .btn:not(.btn--ghost):not(.btn--white):not(.mega__cta):hover::after { translate: 101% 0; transition: translate calc(var(--m-t) * 750ms) var(--m-hover); }
  .m-on .btn:not(.btn--ghost):not(.btn--white):not(.mega__cta):hover { transform: translateY(-2px); box-shadow: var(--m-glow); }
}
.btn:not(.btn--ghost):not(.btn--white):not(.mega__cta):focus-visible { box-shadow: var(--m-glow); }
.m-on .btn:not(.btn--ghost):not(.btn--white):not(.mega__cta):active { transform: translateY(0) scale(.97); transition-duration: 80ms; }

/* C2 outline and white buttons fill with navy from the left */
.btn--ghost { background: transparent linear-gradient(var(--c-primary), var(--c-primary)) no-repeat left center / 0% 100%; }
.btn--white { background: var(--c-white) linear-gradient(var(--c-primary), var(--c-primary)) no-repeat left center / 0% 100%; }
.m-on :is(.btn--ghost, .btn--white) { transition: background-size calc(var(--m-t) * 450ms) var(--m-hover), color .3s, border-color .3s; }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: transparent linear-gradient(var(--c-primary), var(--c-primary)) no-repeat left center / 100% 100%; }
  .btn--white:hover { background: var(--c-white) linear-gradient(var(--c-primary), var(--c-primary)) no-repeat left center / 100% 100%; }
}
.btn--ghost:focus-visible { background: transparent linear-gradient(var(--c-primary), var(--c-primary)) no-repeat left center / 100% 100%; color: var(--c-white); }
.btn--white:focus-visible { background: var(--c-white) linear-gradient(var(--c-primary), var(--c-primary)) no-repeat left center / 100% 100%; color: var(--c-white); }

/* C3 text links get a lime underline that moves down (the lime line of the menu items is part of nav.css) */
:is(.link, .txt a) { transition: color .2s, text-decoration-color .25s, text-underline-offset .25s var(--m-hover); }
:is(.chips-nav a, a.chip-row) { transition: background-color .2s, color .2s; }
@media (hover: hover) and (pointer: fine) {
  :is(.link, .txt a):hover { text-decoration-line: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
}

/* C4 mega menu: the panel glides down, then its columns one after the other (cards lift and rows show their arrow: nav.css) */
.m-on .hd-pnl.is-open > .hd-pg > * { animation: m-up-sm calc(var(--m-t) * 420ms) var(--m-out) both; }
.m-on .hd-pnl.is-open > .hd-pg > :nth-child(2) { animation-delay: calc(var(--m-t) * 60ms); }
.m-on .hd-pnl.is-open > .hd-pg > :nth-child(3) { animation-delay: calc(var(--m-t) * 120ms); }

/* C5 teaser cards lift, the photo zooms slowly, the label turns lime */
.m-on .teaser { transition: transform calc(var(--m-t) * 400ms) var(--m-hover), box-shadow calc(var(--m-t) * 400ms) var(--m-hover); }
.m-on .teaser .teaser__bg { transition: transform calc(var(--m-t) * 700ms) var(--m-hover); }
.teaser .pill { transition: background-color .3s; }
.teaser:focus-visible { box-shadow: var(--m-lift); }
.teaser:focus-visible .pill { background: var(--c-accent); }
@media (hover: hover) and (pointer: fine) {
  .teaser:hover { box-shadow: var(--m-lift); }
  .m-on .teaser:hover { transform: translateY(-6px); }
  .m-on .teaser:hover .teaser__bg { transform: scale(1.08); transition-duration: calc(var(--m-t) * 1100ms); }
  .teaser:hover .pill { background: var(--c-accent); }
}

/* C6 news cards get a surface: light area with shadow, date lime, arrow button navy. On desktop 12 px more room around
   the content (negative margin + padding – the text does not move) */
@media (min-width: 1025px) { .nc { margin: -12px; padding: 22px; } }
.nc { border-radius: var(--r); transition: background-color .3s, box-shadow .3s; }
.m-on .nc { transition: background-color .3s, box-shadow .3s, transform calc(var(--m-t) * 400ms) var(--m-hover); }
.nc :is(.date, .sq) { transition: background-color .25s, color .25s; }
.nc:focus-visible { background: #F3F6F8; }
@media (hover: hover) and (pointer: fine) {
  .nc:hover { background: #F3F6F8; box-shadow: 0 20px 36px -26px rgba(0, 28, 49, .55); }
  .m-on .nc:hover { transform: translateY(-4px); }
  .nc:hover .date { background: var(--c-accent); color: var(--c-primary); }
  .nc:hover .sq { background: var(--c-primary); color: var(--c-accent); }
}

/* C7 arrows fly out in their direction and come back from the other side (cards, reference and image sliders) */
.sq { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .m-on :is(.teaser, .nc):hover .sq svg { animation: m-arrow calc(var(--m-t) * 600ms) var(--m-inout); }
  .m-on :is(.refs, .hero-nav) [data-next]:hover svg { animation: m-arrow-r calc(var(--m-t) * 600ms) var(--m-inout); }
  .m-on :is(.refs, .hero-nav) [data-prev]:hover svg { animation: m-arrow-l calc(var(--m-t) * 600ms) var(--m-inout); }
}

/* C8 competence fields and product cards: icon turns navy/lime, photo zooms. The competence field symbol spins and the
   cards do not lift (they are not links); the product cards are links – their arrow flies through (C7) and the picture
   lifts with a shadow */
:is(.kf, .pcard) .ib__icon { transition: background-color .3s, color .3s; }
.pcard .ib__icon { overflow: hidden; }
.m-on .kf .ib__icon svg { transition: transform calc(var(--m-t) * 600ms) var(--m-hover); }
.m-on :is(.kf .kf__img, .pcard .pcard__img) img { transition: transform calc(var(--m-t) * 1000ms) var(--m-hover); }
.m-on .pcard .pcard__img { transition: transform calc(var(--m-t) * 400ms) var(--m-hover), box-shadow calc(var(--m-t) * 400ms) var(--m-hover); }
.pcard:focus-visible .pcard__img { box-shadow: var(--m-lift); }
@media (hover: hover) and (pointer: fine) {
  :is(.kf, .pcard):hover .ib__icon { background: var(--c-primary); color: var(--c-accent); }
  .m-on .kf:hover .ib__icon svg { transform: rotate(180deg); }
  .m-on .kf:hover .kf__img img { transform: scale(1.05); }
  .m-on .pcard:hover .ib__icon svg { animation: m-arrow calc(var(--m-t) * 600ms) var(--m-inout); }
  .m-on .pcard:hover .pcard__img { transform: translateY(-5px); box-shadow: var(--m-lift); }
  .m-on .pcard:hover .pcard__img img { transform: scale(1.07); }
}

/* C9 accordions open and close smoothly (grid rows 0fr → 1fr; hidden for screen readers once closed) */
.acc__item { display: grid; grid-template-rows: auto 0fr; transition: background-color .3s; }
.acc__item.is-open { grid-template-rows: auto 1fr; }
.acc__panel { min-height: 0; overflow: hidden; }
.acc__item:not(.is-open) .acc__panel { display: block; padding-bottom: 0; visibility: hidden; }
.acc__btn { transition: color .3s; }
.m-on .acc__item { transition: grid-template-rows calc(var(--m-t) * 450ms) var(--m-hover), background-color .3s; }
.m-on .acc__panel { transition: padding-bottom calc(var(--m-t) * 450ms) var(--m-hover), visibility 0s linear calc(var(--m-t) * 450ms); }
.m-on .acc__item.is-open .acc__panel { transition: padding-bottom calc(var(--m-t) * 450ms) var(--m-hover), visibility 0s; }
@media (hover: hover) and (pointer: fine) { .acc__item:not(.is-open):hover { background: var(--c-chip); } }

/* C10 form: lime line on the active field, chips lift and spring when chosen, the step bar glides */
.fi { transition: border-color .25s, box-shadow .25s; }
.fi:focus { border-bottom-color: var(--c-primary); box-shadow: inset 0 -2px 0 var(--c-accent); }
.chip span { transition: background-color .2s, color .2s, box-shadow .2s; }
.m-on .chip span { transition: background-color .2s, color .2s, box-shadow .2s, transform calc(var(--m-t) * 250ms) var(--m-hover); }
.m-on .chip input:checked + span { animation: m-press calc(var(--m-t) * 400ms) var(--m-hover); }
.m-on .steps-bar i { transition: width calc(var(--m-t) * 700ms) var(--m-inout); }
.m-on .step.is-active { animation: m-up-sm calc(var(--m-t) * 500ms) var(--m-out) both; }
@media (hover: hover) and (pointer: fine) {
  .chip:hover span { box-shadow: 0 10px 18px -12px rgba(0, 28, 49, .55); }
  .m-on .chip:hover span { transform: translateY(-2px); }
}

/* C11 quick contact: the phone rings, hints glide out; social and share icons turn navy with lime and lift */
.m-on .side-contact .tip { translate: 10px 0; transition: opacity .2s, translate calc(var(--m-t) * 300ms) var(--m-out); }
.m-on .side-contact a:is(:hover, :focus-visible) .tip { translate: 0 0; }
:is(.social a, .share .sq) { transition: background-color .25s, color .25s, box-shadow .25s; }
.m-on :is(.social a, .share .sq) { transition: background-color .25s, color .25s, box-shadow .25s, transform calc(var(--m-t) * 300ms) var(--m-hover); }
:is(.social a, .share .sq):focus-visible { background: var(--c-primary); color: var(--c-accent); }
@media (hover: hover) and (pointer: fine) {
  .m-on .side-contact a[href^="tel:"]:hover svg { animation: m-ring calc(var(--m-t) * 800ms) ease-in-out; }
  :is(.social a, .share .sq):hover { background: var(--c-primary); color: var(--c-accent); box-shadow: 0 12px 20px -12px rgba(0, 28, 49, .7); }
  .m-on :is(.social a, .share .sq):hover { transform: translateY(-3px); }
}

/* ---------- D · details ---------- */
/* D1 while scrolling the service bar moves away and the bar gets a stronger shadow (movement: nav.css, html.nv-scrolled) */
.nv-scrolled .hd-bar { box-shadow: 0 14px 34px -14px rgba(0, 28, 49, .38); }
/* logged-in editors: the sticky header stops below the WordPress admin bar (32 px, 46 px on narrow screens; below 600 px
   the admin bar scrolls away) – otherwise the admin bar covers the top of the header */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* D3 smooth scrolling to anchors (e.g. „Anfrage stellen“ → form) */
html.m-on { scroll-behavior: smooth; }
.sec { scroll-margin-top: 16px; }