/* ===========================================================================
   LUXOMES - Animationsschicht
   Wie responsive.css: eine Datei, die build.py inline in jede Seite legt.
   Bewegung entsteht ausschliesslich ueber Attribute im Markup, kein Init-Code
   pro Seite, keine externe Bibliothek.

   Bausteine
     .lx-r                Auftritt beim Hereinscrollen (Richtung, Versatz)
     [data-lx-split]      Headline erscheint Wort fuer Wort hinter einer Maske
     [data-lx-scrub]      Buehne mit --p (0..1) aus der Scrollposition
     [data-lx-zoom]       Bild zoomt langsam beim Durchscrollen
     [data-lx-count]      Zahl laeuft beim Auftritt hoch
     [data-lx-marquee]    endloses Laufband (Standorte)
     .lx-lift .lx-line    Karten-Hover, Linie die sich zeichnet
     #lx-prog             Lesefortschritt
     body.lx-scrolled     ab 40 px gescrollt (Navigation verdichten)
     body.lx-nav-up       Navigation ausgefahren (Scrollrichtung nach unten)
   =========================================================================== */

:root {
  --lx-sage: #6B7F5C;
  --lx-sage-deep: #46543B;
  --lx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lx-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --lx-dur: 0.9s;
}

/* ---------- 1) Auftritt beim Scrollen ---------------------------------- */
/* Versteckt wird nur bei aktivem JS. Ohne JS, bei Skriptfehler oder im
   Prerender bleibt jeder Inhalt sichtbar. */
.lx-armed .lx-r {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity var(--lx-dur) var(--lx-ease),
              transform var(--lx-dur) var(--lx-ease),
              clip-path var(--lx-dur) var(--lx-ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.lx-armed .lx-r[data-lx-from="left"]  { transform: translate3d(-34px, 0, 0); }
.lx-armed .lx-r[data-lx-from="right"] { transform: translate3d(34px, 0, 0); }
.lx-armed .lx-r[data-lx-from="scale"] { transform: scale(0.93); }
.lx-armed .lx-r[data-lx-from="down"]  { transform: translate3d(0, -26px, 0); }
/* Bildkacheln: Vorhang faehrt von unten weg, das Bild steht dabei still */
.lx-armed .lx-r[data-lx-from="curtain"] {
  transform: none;
  opacity: 1;
  clip-path: inset(0 0 100% 0);
}
.lx-r.lx-on { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* ---------- 2) Headline Wort fuer Wort -------------------------------- */
[data-lx-split] .lx-w { display: inline-block; overflow: hidden; vertical-align: top; }
.lx-armed [data-lx-split] .lx-w > i {
  display: inline-block;
  font-style: inherit;
  transform: translate3d(0, 108%, 0);
  transition: transform 1s var(--lx-ease);
  transition-delay: calc(var(--i, 0) * 0.06s + var(--d, 0s));
}
[data-lx-split].lx-on .lx-w > i { transform: none; }

/* ---------- 3) Bildzoom beim Durchscrollen ---------------------------- */
/* Nur unter .lx-armed, sonst stuenden die Bilder ohne JS dauerhaft auf
   scale(1.16), weil --z dann seinen Startwert 0 behaelt. */
[data-lx-zoom] { overflow: hidden; }
.lx-armed [data-lx-zoom] > img,
.lx-armed [data-lx-zoom] > picture > img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1.16 - var(--z, 0) * 0.16));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Auf luxomes.com tragen die Bildflaechen (.ph) ihr Bild als background-image,
   das <img> darin ist ein 1x1-Pixel fuer Crawler. Fuer diese Faelle zoomt ein
   Pseudo-Element, das den Hintergrund erbt. Es entsteht erst mit .lx-armed. */
.lx-armed [data-lx-zoom][data-lx-bg] { position: relative; }
.lx-armed [data-lx-zoom][data-lx-bg]::before {
  content: '';
  position: absolute; inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(calc(1.16 - var(--z, 0) * 0.16));
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}

/* ---------- 4) Zahlen ------------------------------------------------- */
[data-lx-count], [data-lx-scrubcount] { font-variant-numeric: tabular-nums; }

/* ---------- 5) Laufband ----------------------------------------------- */
[data-lx-marquee] { overflow: hidden; display: flex; }
[data-lx-marquee] > .lx-track {
  display: flex; flex: none; gap: var(--gap, 3rem);
  padding-right: var(--gap, 3rem);
  animation: lxMarquee var(--speed, 34s) linear infinite;
}
[data-lx-marquee]:hover > .lx-track { animation-play-state: paused; }
@keyframes lxMarquee { to { transform: translate3d(-100%, 0, 0); } }

/* ---------- 6) Karten, Linien, Buttons -------------------------------- */
.lx-lift { transition: transform 0.45s var(--lx-ease), box-shadow 0.45s var(--lx-ease-soft); }
.lx-lift:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(28, 29, 24, 0.14); }

.lx-line { position: relative; }
.lx-line::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; opacity: 0.35;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s var(--lx-ease) 0.1s;
}
.lx-r.lx-on .lx-line::after, .lx-line.lx-on::after { transform: scaleX(1); }

.lx-cta { position: relative; overflow: hidden; isolation: isolate; }
.lx-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--lx-sage-deep);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.5s var(--lx-ease);
}
.lx-cta:hover::before { transform: none; }

/* ---------- 7) Navigation --------------------------------------------- */
.lx-js .lx-nav {
  transition: transform 0.5s var(--lx-ease), padding 0.4s var(--lx-ease-soft),
              background-color 0.4s var(--lx-ease-soft), box-shadow 0.4s var(--lx-ease-soft);
}
body.lx-nav-up .lx-nav { transform: translate3d(0, -102%, 0); }
body.lx-scrolled .lx-nav { box-shadow: 0 1px 0 rgba(28, 29, 24, 0.1); }

/* ---------- 8) Lesefortschritt ---------------------------------------- */
#lx-prog {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 9995;
  background: var(--lx-sage); pointer-events: none;
  transform: scaleX(var(--sp, 0)); transform-origin: 0 50%;
}

@media (prefers-reduced-motion: reduce) {
  .lx-armed .lx-r, .lx-r { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .lx-armed [data-lx-split] .lx-w > i { transform: none !important; transition: none !important; }
  [data-lx-zoom] > img, [data-lx-zoom] > picture > img,
  .lx-armed [data-lx-zoom][data-lx-bg]::before { transform: none !important; }
  [data-lx-marquee] > .lx-track { animation: none !important; }
  .lx-line::after { transform: scaleX(1) !important; transition: none !important; }
  body.lx-nav-up .lx-nav { transform: none !important; }
  #lx-prog { display: none; }
}