/* Aven Dienstleistung · Motion. On every page after styles.css / pages.css, driven by motion.js.
   Start states apply only under html.mo: the <head> script sets it unless the visitor prefers reduced motion
   and removes it again if motion.js did not run. Only opacity, translate, scale and clip-path move, so nothing shifts the layout. */

:root {
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  scroll-padding-top: 112px;
}
@property --ln { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.hero__haus { --rr: 0px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header: stays on screen, hides while scrolling down ---------- */
.header { position: fixed; pointer-events: none; transition: translate .5s var(--ease); }
.header__bar { pointer-events: auto; transition: box-shadow .3s; }
.header.is-unten .header__bar { box-shadow: 0 14px 40px rgba(8, 16, 17, .45); }
.header.is-weg { translate: 0 calc(-100% - 32px); }
.header.is-weg .header__bar { box-shadow: none; }
@media (min-width: 1181px) {
  .header__nav a { padding: 6px 0; background: linear-gradient(currentColor 0 0) 0 100% / 0 1.5px no-repeat; transition: background-size .45s var(--ease), color .15s; }
  .header__nav a:hover, .header__nav a[aria-current="page"] { background-size: 100% 1.5px; }
}
.header__nav.is-open a { animation: menu-ein .5s var(--ease) both; }
.header__nav.is-open a:nth-child(2) { animation-delay: .03s; } .header__nav.is-open a:nth-child(3) { animation-delay: .06s; }
.header__nav.is-open a:nth-child(4) { animation-delay: .09s; } .header__nav.is-open a:nth-child(5) { animation-delay: .12s; }
.header__nav.is-open a:nth-child(6) { animation-delay: .15s; }
@keyframes menu-ein { from { opacity: 0; translate: 0 -8px; } }

/* ---------- Links and buttons ---------- */
.link { padding-bottom: 3px; background: linear-gradient(currentColor 0 0) 0 100% / 0 1.5px no-repeat; transition: background-size .45s var(--ease); }
.link:hover { text-decoration: none; background-size: 100% 1.5px; }
.btn { transition: background-color .2s, color .2s, scale .25s var(--ease); }
.btn:active { scale: .97; }
/* label rolls up, a copy comes from below (motion.js wraps the text) */
.btn__t { display: inline-grid; overflow: hidden; padding-block: .25em; margin-block: -.25em; }
.btn__t > span { grid-area: 1 / 1; transition: translate .55s var(--ease); }
.btn__t > span + span { translate: 0 1.5em; }
@media (hover: hover) {
  .btn:hover .btn__t > span:first-child { translate: 0 -1.5em; }
  .btn:hover .btn__t > span + span { translate: 0 0; }
  .karte-link .photo { transition: opacity .2s, scale .7s var(--ease); }
  .karte-link:hover .photo { opacity: 1; scale: 1.02; }
  .karte-link .link { transition: background-size .45s var(--ease); }
  .karte-link:hover .link { background-size: 100% 1.5px; }
  .kanal .h2 { transition: color .2s; }
}
@media (min-width: 901px) {
  .svc__name { transition: opacity .2s, color .2s, translate .5s var(--ease); }
  .svc img { transition: scale .5s var(--ease); }
  .svc:hover .svc__name, .svc.is-active .svc__name { translate: 10px 0; }
  .svc:hover img { scale: 1.06; }
  .svc__arrow { visibility: visible; opacity: 0; translate: -14px 0; transition: opacity .3s, translate .5s var(--ease); }
  .svc.is-active .svc__arrow { opacity: 1; translate: 0 0; }
}
.cta-gross__pfeil { transition: transform .2s, rotate .6s var(--ease), scale .6s var(--ease); }
.cta-gross__link:hover .cta-gross__pfeil { rotate: -45deg; transform: none; }

/* ---------- FAQ: plus turns into minus, answer slides open ---------- */
.acc__icon::after, .svc__icon::after { transition: transform .45s var(--ease); }
.acc[open] .acc__icon::after, .svc.is-active .svc__icon::after { opacity: 1; transform: translate(-50%, -50%) rotate(180deg); }
.acc summary .h3 { transition: color .2s; }
.acc[open] > p { animation: auf .6s var(--ease) both; }
.svc.is-active + .svc__more { animation: auf .6s var(--ease) both; }
@keyframes auf { from { opacity: 0; translate: 0 -8px; } }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .acc::details-content { block-size: 0; overflow-y: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
  .acc[open]::details-content { block-size: auto; }
}

/* ---------- Lightbox: fades in, photo settles ---------- */
.lightbox { opacity: 0; transition: opacity .3s var(--ease), overlay .3s allow-discrete, display .3s allow-discrete; }
.lightbox[open] { opacity: 1; }
@starting-style { .lightbox[open] { opacity: 0; } }
.lightbox[open] .lightbox__bild img { animation: lb-ein .6s var(--ease) both; }
@keyframes lb-ein { from { opacity: 0; scale: .96; } }

/* ---------- Season: the current one pulses ---------- */
.saison__jetzt { position: relative; }
.saison__jetzt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(196, 237, 134, .55); animation: puls-ring 2.4s ease-out infinite; }
@keyframes puls-ring { 70%, 100% { box-shadow: 0 0 0 12px rgba(196, 237, 134, 0); } }

/* ---------- Map: Garbsen sends out rings, the outer ring turns slowly ---------- */
.pt--big::before, .pt--big::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--lime-400); animation: puls 3s ease-out infinite; }
.pt--big::after { animation-delay: 1.5s; }
@keyframes puls { from { scale: 1; opacity: .9; } to { scale: 4.5; opacity: 0; } }
.karte__ring { animation: dreh 90s linear infinite; }
@keyframes dreh { to { rotate: 360deg; } }

/* ---------- Services band (Startseite) ---------- */
.band { overflow: hidden; border-block: 1px solid var(--pine-700); padding: 26px 0; user-select: none; }
.band__spur { display: flex; width: max-content; will-change: transform; }
.band__gruppe { display: flex; align-items: center; flex: none; }
.band__gruppe span { display: flex; align-items: center; font: 500 clamp(36px, calc(64 * var(--u)), 64px)/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.band__gruppe span::after { content: ""; width: .22em; height: .22em; margin: 0 .55em; border-radius: 50%; background: var(--lime-400); }
.band__gruppe span:nth-child(even) { color: var(--lime-400); }
@media (max-width: 900px) { .band { padding: 18px 0; } }

/* ---------- Step line (So starten wir): inline SVG, drawn by scroll ---------- */
.weg__linie { overflow: visible; }
.weg__linie path { fill: none; stroke: var(--lime-400); stroke-width: 2.43; }
.schritt__pill { transition: background-color .4s, color .4s, opacity .5s, scale .6s var(--ease); }
.schritt p { transition: opacity .6s var(--ease), translate .7s var(--ease); }

/* ---------- Page to page: soft cross-fade, the header stays ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .header { view-transition-name: kopf; }
  ::view-transition-old(root) { animation: .25s var(--ease-io) both vt-aus; }
  ::view-transition-new(root) { animation: .55s var(--ease) both vt-ein; }
  @keyframes vt-aus { to { opacity: 0; } }
  @keyframes vt-ein { from { opacity: 0; translate: 0 20px; } }
}

/* ============ Reveal on scroll (classes set by motion.js) ============ */
@media screen {
  /* until motion.js has marked the page, keep the content back to avoid a flash */
  .mo:not(.mo-an) main, .mo:not(.mo-an) .footer { opacity: 0; }

  /* transitions switch on only after the start states are in place (mo-an), so nothing fades out first */
  .mo.mo-an :is(.rv, .rv-l, .rv-r, .rv-pop, .rv-fade, .rv-zoom):not(.is-done) {
    transition: opacity .9s var(--ease) var(--d, 0s), translate 1.1s var(--ease) var(--d, 0s), scale 1s var(--ease) var(--d, 0s);
  }
  .mo .rv:not(.is-in) { opacity: 0; translate: 0 36px; }
  .mo .rv-l:not(.is-in) { opacity: 0; translate: -48px 0; }
  .mo .rv-r:not(.is-in) { opacity: 0; translate: 48px 0; }
  .mo .rv-pop:not(.is-in) { opacity: 0; scale: .5; }
  .mo .rv-fade:not(.is-in) { opacity: 0; }
  .mo.mo-an .rv-zoom:not(.is-done) { transition-duration: 1.4s, 1.1s, 2s; }
  .mo .rv-zoom:not(.is-in) { opacity: 0; scale: 1.08; }

  /* photos: a curtain opens upwards while the picture settles from a slight zoom
     (waiting photos are only transparent, not clipped: a clipped image is skipped by lazy loading and by the observer) */
  .mo .rv-img:not(.is-in) { opacity: 0; }
  .mo .rv-img.is-in:not(.is-done) { animation: vorhang 1.3s var(--ease) var(--d, 0s) both, setzen 1.7s var(--ease) var(--d, 0s) both; }

  /* headings: every word rises out of its own line */
  .mo .rv-w:not(.is-done) .w { clip-path: inset(-.25em -.15em -.32em -.15em); }
  .mo .rv-w .w, .mo .rv-w .w__i { display: inline-block; }
  .mo.mo-an .rv-w:not(.is-done) .w__i { transition: translate 1.15s var(--ease) calc(var(--d, 0s) + var(--wi) * 45ms); }
  .mo .rv-w:not(.is-in) .w__i { translate: 0 150%; }

  /* giant words: letter by letter */
  .mo .rv-ch:not(.is-split) { opacity: 0; }
  .mo .rv-ch:not(.is-done) { clip-path: inset(-.3em -.3em -.25em -.3em); }
  .mo .rv-ch .ch { display: inline-block; }
  .mo.mo-an .rv-ch:not(.is-done) .ch { transition: translate 1.3s var(--ease) calc(var(--d, 0s) + var(--ci) * 45ms); }
  .mo .rv-ch:not(.is-in) .ch { translate: 0 135%; }

  /* rows: the top line draws from the left, the content follows */
  .mo .rv-ln:not(.is-done) { border-top-color: transparent; background: linear-gradient(var(--lc, var(--pine-700)) 0 0) 0 0 / var(--ln) 1px no-repeat border-box; }
  .mo.mo-an .rv-ln:not(.is-done) { transition: --ln 1.4s var(--ease) var(--d, 0s); }
  .mo .rv-ln:not(.is-in) { --ln: 0%; }
  .mo.mo-an .rv-ln:not(.is-done) > * { transition: opacity .9s var(--ease) calc(var(--d, 0s) + .15s), translate 1.1s var(--ease) calc(var(--d, 0s) + .15s); }
  .mo .rv-ln:not(.is-in) > * { opacity: 0; translate: 0 18px; }
  .mo .schritte li.rv-ln { --lc: var(--lime-400); }
  @media (max-width: 900px) { .mo .zahl.rv-ln:not(.is-done) { background: var(--pine-700); } }

  /* the Protokoll fills itself in */
  .mo.mo-an .blatt.rv:not(.is-done) .blatt__punkte li { transition: opacity .5s calc(var(--d, 0s) + .5s + var(--pi) * .28s); }
  .mo.mo-an .blatt.rv:not(.is-done) .blatt__punkte li::before { transition: scale .5s var(--ease) calc(var(--d, 0s) + .5s + var(--pi) * .28s); }
  .mo .blatt.rv:not(.is-in) .blatt__punkte li { opacity: .25; }
  .mo .blatt.rv:not(.is-in) .blatt__punkte li::before { scale: 0; }
  .mo.mo-an .dok__notes li:not(.is-done)::after { transition: scale .9s var(--ease) calc(var(--d, 0s) + .3s); }
  .mo .dok__notes--l li::after { transform-origin: right; }
  .mo .dok__notes--r li::after { transform-origin: left; }
  .mo .dok__notes li:not(.is-in)::after { scale: 0 1; }

  /* map */
  .mo .karte__line.rv-fade.is-in:not(.is-done) { animation: linie 1s var(--ease) var(--d, 0s) both; }
  .mo .karte__line[src*="links"] { transform-origin: right; }
  .mo .karte__line[src*="rechts"] { transform-origin: left; }

  /* step line, desktop: steps light up when the line reaches them, the newest one is filled */
  @media (min-width: 901px) {
    .mo .weg .schritt:not(.is-an) .schritt__pill { opacity: .3; scale: .86; }
    .mo .weg .schritt:not(.is-an) p { opacity: 0; translate: 0 14px; }
    .mo .weg .schritt.is-jetzt .schritt__pill { background: var(--lime-400); color: var(--forest-900); }
  }
  @media (max-width: 900px) {
    .mo .schritt.rv::after { transform-origin: top; }
    .mo.mo-an .schritt.rv:not(.is-done)::after { transition: scale 1s var(--ease) calc(var(--d, 0s) + .3s); }
    .mo .schritt.rv:not(.is-in)::after { scale: 1 0; }
  }
}

/* ============ Scroll-linked depth (browsers with scroll-driven animations) ============ */
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    @media (min-width: 901px) {
      .hero__haus { animation: tiefe-haus linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
      .mo .hero__haus.rv-img.is-in:not(.is-done) {
        animation: vorhang 1.3s var(--ease) var(--d, 0s) both, setzen 1.7s var(--ease) var(--d, 0s) both, tiefe-haus linear both;
        animation-timeline: auto, auto, scroll(root); animation-range: normal, normal, 0 100vh;
      }
      .hero__aven { animation: tiefe-aven linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
      .hero__dl { animation: tiefe-dl linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
      .ihero__wort { animation: tiefe-wort linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    }
    /* Kennen Sie das?: the row in the middle of the screen is the bright one */
    .zeile { animation: fokus linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes vorhang { from { clip-path: inset(94.6% 5.4% 5.4% 5.4% round var(--rr, 16px)); } to { clip-path: inset(0 round var(--rr, 16px)); } }
@keyframes setzen { from { scale: 1.12; } }
@keyframes linie { from { scale: 0 1; } }
@keyframes tiefe-haus { to { translate: 0 14%; } }
@keyframes tiefe-aven { to { translate: 0 38%; } }
@keyframes tiefe-dl { to { translate: 0 120%; opacity: 0; } }
@keyframes tiefe-wort { to { translate: 0 22%; opacity: .35; } }
@keyframes fokus { 0%, 100% { opacity: .45; } 22%, 78% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .saison__jetzt::after, .pt--big::before, .pt--big::after, .karte__ring { animation: none; }
}