/* Intro-Animation Startseite – nur aktiv, wenn <html> die Klasse li-run trägt (siehe Skript im <head>) */
html.li-run{overflow:hidden}
/* sofortige Abdeckung, bis das Skript das Overlay aufgebaut hat (verhindert kurzes Aufblitzen der Seite) */
html.li-run:not(.li-built) body::after{content:"";position:fixed;inset:0;background:#364B3E;z-index:1000}
html.li-run .site-header .brand img{visibility:hidden}

.li-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  background-color:#364B3E;transition:background-color .9s ease .1s;cursor:pointer}
.li-overlay.s-fly{background-color:rgba(54,75,62,0)}

.li-logo{width:clamp(170px,26vw,320px);will-change:transform;transition:transform .95s cubic-bezier(.55,0,.2,1)}
.li-svg{display:block;width:100%;height:auto;overflow:visible;
  transform:translateX(41.5%);transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.s-words .li-svg{transform:none}

/* Farben: auf Grün weiß + Salbei (#87A18D), am Ziel Originalfarben des Logos (Schwarz + #60766F) */
.li-ink{fill:#fff;transition:fill .9s ease}
.li-acc{fill:#87A18D;transition:fill .9s ease}
.s-fly .li-ink{fill:#000}
.s-fly .li-acc{fill:#60766F}

/* 1. das Plus */
.li-plus{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2) rotate(-90deg);
  transition:opacity .5s ease,transform .8s cubic-bezier(.3,1.35,.4,1),fill .9s ease}
.s-plus .li-plus{opacity:1;transform:none}

/* 2. die Buchstaben bauen sich auf */
.li-w path{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:translateY(35%);
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1),fill .9s ease}
.s-words .li-w path{opacity:1;transform:none}
.s-words .li-w1 path{transition-delay:calc(var(--i) * 45ms + 200ms),calc(var(--i) * 45ms + 200ms),0s}
.s-words .li-w2 path{transition-delay:calc(var(--i) * 45ms + 560ms),calc(var(--i) * 45ms + 560ms),0s}
.s-words .li-w3 path{transition-delay:calc(var(--i) * 45ms + 880ms),calc(var(--i) * 45ms + 880ms),0s}

/* 3. danach blendet die Überschrift im Hero ein */
@keyframes li-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.li-done .hero h1{animation:li-up .9s cubic-bezier(.2,.7,.2,1) both}
html.li-done .hero-sub{animation:li-up .9s cubic-bezier(.2,.7,.2,1) .15s both}
/* Überschrift bleibt verborgen, bis das Logo angekommen ist */
html.li-run .hero h1,html.li-run .hero-sub{opacity:0}