/* ============================================================
   EOM Heroes — eom-premium.css (Premium-Pass Unterseiten, 23.07.)
   Wird NUR von den 6 Unterseiten geladen (schulen, kitas, firmen,
   kooperationen, ueber-uns, kontakt). index.html + heldenbox.html
   sind eingefroren und haben ihre eigenen Inline-Styles.
   Basis-Tokens kommen aus eom-site.css (V3.1-Marke).
   ============================================================ */

/* ---- Kein horizontales Wackeln: Richtungs-Reveals (translateX ±32px)
       dürfen im Vor-Zustand keinen Scrollbalken erzeugen ---- */
body{overflow-x:hidden}

/* ---- Heldenreise-Fortschritt: Teal-Linie, Gold-Stern am Ziel
       (identisch zur Startseite; Elemente injiziert eom-site.js) ---- */
#progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--teal);transform:scaleX(0);transform-origin:left;z-index:80}
#progressStar{position:fixed;top:7px;right:8px;width:16px;height:16px;fill:var(--gold);opacity:0;transform:scale(.5);transition:opacity .4s,transform .4s cubic-bezier(.2,.7,.2,1);z-index:81}
#progressStar.lit{opacity:1;transform:scale(1)}

/* ---- Warmer Gold-Marker unterm Schlüsselwort (Signature-Sprache
       der Startseite, sparsam: EIN Wort pro Seite) ---- */
.hl{position:relative;white-space:nowrap;font-style:normal}
.hl::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.06em;height:.22em;background:var(--gold);opacity:.38;border-radius:3px;z-index:-1}

/* ---- Richtungs-Reveals (Über uns: Gründer-Blöcke wechselseitig) ---- */
.js .reveal.from-l{transform:translateX(-32px)}
.js .reveal.from-r{transform:translateX(32px)}
.js .reveal.from-l.in,.js .reveal.from-r.in{transform:none}

/* ---- „Aufblühen" (Kitas: Säulen kommen sanft-federnd) ---- */
.js .reveal.bloom{transform:translateY(14px) scale(.94);transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
.js .reveal.bloom.in{transform:none}

/* ---- Google-Badge: Sterne füllen sich nacheinander (Kooperationen) ---- */
.js .badge-block.reveal .star{opacity:0;transform:scale(.3);transition:opacity .45s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.js .badge-block.reveal.in .star{opacity:1;transform:scale(1)}
.js .badge-block.reveal.in .star:nth-child(1){transition-delay:.05s}
.js .badge-block.reveal.in .star:nth-child(2){transition-delay:.16s}
.js .badge-block.reveal.in .star:nth-child(3){transition-delay:.27s}
.js .badge-block.reveal.in .star:nth-child(4){transition-delay:.38s}
.js .badge-block.reveal.in .star:nth-child(5){transition-delay:.49s}

/* ---- Modul-Faden (Schulen: Linie zeichnet sich durch 01→02→03) ---- */
.faden-wrap{position:relative}
#modulFaden{position:absolute;left:11px;top:0;bottom:0;width:2px;background:rgba(250,246,236,.38);transform:scaleY(0);transform-origin:top;border-radius:2px}
.faden-wrap .module-num{position:relative;display:inline-block;background:var(--teal-flat);padding:8px 0;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.faden-wrap .module.lit .module-num{transform:scale(1.22)}
@media(max-width:820px){
  #modulFaden{display:none}
  /* ohne Faden braucht die Modul-Nummer keinen Ausstanz-Patch (verursachte h-Overflow) */
  .faden-wrap .module-num{display:revert;background:transparent;padding:0;transform:none!important}
}

/* ---- Count-up-Zahlen (Firmen): der data-count-Span im <b> darf NICHT
       von der .stat span-Unterzeilen-Regel (klein/grau/block) erfasst werden ---- */
.stat b span[data-count]{font-size:inherit;color:inherit;display:inline;margin-top:0}

/* ---- Verfügbarkeits-Puls (Kontakt; von der Startseite übernommen) ---- */
.avail{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--teal-hover);margin:18px 0 0}
.avail-dot{width:10px;height:10px;border-radius:999px;background:var(--teal);position:relative;flex:none}
.avail-dot::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:2px solid var(--teal);opacity:.5;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.6}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}

/* ---- Formular-Mikrointeraktion (Kontakt) ---- */
.form-row:focus-within label{color:var(--teal)}

/* ---- Reduced Motion: alles ruhig, alles sichtbar ---- */
@media (prefers-reduced-motion: reduce){
  #modulFaden{transform:scaleY(1)}
  .js .reveal.from-l,.js .reveal.from-r,.js .reveal.bloom{transform:none;opacity:1}
  .js .badge-block.reveal .star{opacity:1;transform:none}
  .avail-dot::after{animation:none;opacity:0}
}