/* Bewegung für die Konzeptseiten (gehört zu bewegung.js).
   Alle versteckten Startzustände hängen an .bewegt: ohne JavaScript oder mit „weniger Bewegung“ steht alles sofort da. */

/* Lenis (weiches Scrollen) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Überschriften steigen Wort für Wort aus einer unsichtbaren Kante */
.bewegt .woerter .wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.bewegt .woerter .wort-innen {
  display: inline-block; transform: translateY(108%) rotate(4deg); transform-origin: 0 100%;
  transition: transform 1s cubic-bezier(.16, .84, .24, 1) calc(var(--n, 0) * 55ms);
}
.bewegt .woerter.da .wort-innen { transform: none; }

/* Strichzeichnungen zeichnen sich selbst, Strich für Strich */
.bewegt .zeichnet .strich {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s cubic-bezier(.45, 0, .2, 1) calc(var(--n, 0) * 90ms);
}
.bewegt .zeichnet.gezeichnet .strich { stroke-dashoffset: 0; }

/* Listen und Tabellen bauen sich Zeile für Zeile auf */
.bewegt .staffel > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease calc(var(--n, 0) * 90ms), transform .9s cubic-bezier(.16, .84, .24, 1) calc(var(--n, 0) * 90ms);
}
.bewegt .staffel.da > * { opacity: 1; transform: none; }
/* Tabellenzeilen: transform auf <tr> geht nicht überall, deshalb nur Deckkraft und die Zellen schieben */
.bewegt tbody.staffel > tr { transform: none; }
.bewegt tbody.staffel > tr > * { transform: translateX(-14px); transition: transform .8s cubic-bezier(.16, .84, .24, 1) calc(var(--n, 0) * 70ms); }
.bewegt tbody.staffel.da > tr > * { transform: none; }

/* ---------- Tischlerei ---------- */
.stamm { display: block; width: 100%; height: auto; will-change: transform; }
.bewegt .stamm .ring {
  transform-box: view-box; transform-origin: 48.5% 51%;
  transform: scale(.02); opacity: 0;
  transition: transform 1.6s cubic-bezier(.16, .84, .24, 1) calc(var(--n, 0) * 45ms), opacity .4s ease calc(var(--n, 0) * 45ms);
}
.bewegt .stamm.gewachsen .ring { transform: none; opacity: 1; }

/* Musterbrett: die drei Oberflächen legen sich hin und heben sich, wenn man drüberfährt */
.bewegt .brett.staffel > * { transform: translateY(40px) rotate(-2deg); }
.bewegt .brett.staffel.da > * { transform: none; }
.brett-feld { transition: transform .5s cubic-bezier(.16, .84, .24, 1), box-shadow .5s; }
@media (hover: hover) {
  .bewegt .brett.da > .brett-feld:hover { transform: translateY(-8px); transition-delay: 0s; }
}

/* Ablauf: ein Maßband läuft über die fünf Schritte, je weiter man scrollt */
.massband { position: relative; }
.massband::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 6px;
  background: var(--laerche, #A5481F);
  transform-origin: 0 50%; transform: scaleX(var(--fort, 0));
}
.massband li .nr { transition: color .4s; }
@media (max-width: 760px) { .massband::before { display: none; } }

/* ---------- Friseur ---------- */
.schere { transition: translate .1s linear; }
.bewegt .zeichnet .nordlicht {
  transform-box: fill-box; transform-origin: 50% 0;
  transform: scaleY(0); opacity: 0;
  transition: transform 1.6s cubic-bezier(.16, .84, .24, 1) .5s, opacity 1s ease .5s;
}
.bewegt .zeichnet.gezeichnet .nordlicht { transform: none; opacity: 1; }

/* ---------- Gasthaus ---------- */
.saege { will-change: transform; }
.bewegt .tisch .platz {
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: scale(0); opacity: 0;
  transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) calc(.6s + var(--x, 0) * 1.4s), opacity .3s ease calc(.6s + var(--x, 0) * 1.4s);
}
.bewegt .tisch .gezeichnet .platz { transform: none; opacity: 1; }
.bewegt .woche-liste.staffel > li.heute { transition-delay: 0s; }