/* aufbau: Mechanik des Cover-Aufbaus. Alle Zeiten und die Farbe kommen aus aufbau.js als
   Variablen (--aufbau-farbe, --aufbau-dauer, --aufbau-vorhang, --d je Element).
   Haengt an tokens.css. Abschalten: Datei weglassen, dann steht alles sofort. */
:root{--expo:cubic-bezier(.16,1,.3,1)}
.aufbau{position:relative;width:100%;--aufbau-farbe:var(--akzent);--aufbau-dauer:1500ms;--aufbau-vorhang:1500ms}
.aufbau .ebene{position:absolute;inset:0}
.aufbau .ebene.platz{position:relative}                 /* die erste Ebene traegt die Hoehe */
/* overflow:hidden = Maske wie bei lenis.dev: die Buchstaben tauchen an der Grundlinie auf */
.aufbau .wortmarke{width:100%;height:auto;display:block;overflow:hidden}
.aufbau .farbe .b path{fill:var(--aufbau-farbe);stroke:var(--aufbau-farbe)}
.aufbau .tinte .b path{fill:currentColor;stroke:currentColor}
.aufbau .b path.linie{fill:none !important}   /* gezeichnete Linien (Pfeil) nicht fuellen */
.aufbau .tinte .b.akzent path{fill:transparent;stroke:transparent}   /* Aussparung: Farbe scheint durch */

/* Startlage: Buchstaben unter ihrer Zeile, Tinte-Ebene unter dem Schirm */
.aufbau.is-start .b{transform:translateY(115%);transform-box:fill-box}
.aufbau.is-start .ebene.tinte{transform:translateY(100vh)}
.is-start.mit-auf{opacity:0;transform:translateY(1.2em)}
/* von unten: kein Maskieren, die Teile kommen vom unteren Bildrand (Referenz lenis.dev) */
.aufbau.von-unten .wortmarke{overflow:visible}
.aufbau.von-unten.is-start .b{transform:translateY(calc(var(--weg-u) * 1px))}
.is-start.mit-auf.mit-unten{opacity:1;transform:translateY(var(--weg))}
.is-lauf.mit-auf.mit-unten{transition:transform var(--aufbau-dauer) var(--expo) var(--d)}
/* Lauf */
.aufbau.is-lauf .b{transform:translateY(0);transition:transform var(--aufbau-dauer) var(--expo);transition-delay:var(--d)}
.aufbau.is-lauf .ebene.tinte{transform:translateY(0);transition:transform var(--aufbau-dauer) var(--expo) var(--aufbau-vorhang)}
.is-lauf.mit-auf{opacity:1;transform:translateY(0);transition:transform var(--aufbau-dauer) var(--expo) var(--d),opacity calc(var(--aufbau-dauer) * .5) linear var(--d)}
/* Endlage */
.aufbau.is-fertig .b,.aufbau.is-fertig .ebene.tinte{transform:none;transition:none}
.is-fertig.mit-auf{opacity:1;transform:none;transition:none}
/* Elemente, die erst nach dem Aufbau erscheinen (ohne eigene Bewegung) */
.nach-aufbau{opacity:0;transition:opacity .4s linear}
.aufbau-fertig .nach-aufbau{opacity:1}
@media (prefers-reduced-motion:reduce){
  .aufbau .b,.aufbau .ebene.tinte,.mit-auf{transform:none !important;transition:none !important;opacity:1 !important}
  .nach-aufbau{opacity:1}
}