/* ═══════════════════════════════════════════════════════════════════════
   Holi-Hero der Startseite

   Aufbau nach der Vorlage aus dem Codex-Entwurf: Porträt in der Mitte,
   gelbes Pulver zieht von links herein, blaues von rechts, dazu schwebende
   Partikel. Der Text fliegt von links und rechts ein.

   Ergänzt: die animierte Bildmarke sitzt rechts oben, auf halber Größe.
   Auf dem dunklen Grund wird das Logo-Grau zu Weiß (.marke-hell) — das
   Cyan bleibt unverändert, damit die Hausfarbe erhalten bleibt.

   Fotos: Holi-Fotoshooting Thomas Leibeseder, info.iq-foto.at
   ═══════════════════════════════════════════════════════════════════════ */

.holi{position:relative;overflow:hidden;background:#050a0f;color:#f4f6f6;
      min-height:min(94svh,900px);display:flex;flex-direction:column;
      background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                       linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
      background-size:42px 42px}
.holi::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(circle at 60% 42%,transparent 0 22%,rgba(2,5,8,.28) 68%),
             linear-gradient(90deg,rgba(5,10,15,.28),transparent 52%,rgba(5,10,15,.3))}

/* ── Bühne: Porträt, Pulver, Partikel ──────────────────────────────── */
.holi-buehne{position:absolute;inset:0;z-index:1;overflow:hidden}
/* Zwei Bewegungen zugleich, bewusst auf getrennte Eigenschaften gelegt:
   portraetEin blendet einmalig auf (opacity), portraetAtmen laeuft endlos
   (transform: scale). Die Zentrierung liegt auf translate und bleibt davon
   unberuehrt — sonst wuerde das Skalieren das Bild aus der Mitte schieben.
   20 Sekunden je Runde: langsam genug, dass man es eher spuert als sieht. */
.holi-portraet{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  height:min(112%,940px);width:auto;max-width:62vw;object-fit:contain;
  filter:saturate(1.05) contrast(1.05);
  opacity:0;
  animation:portraetEin 2s ease-out .1s forwards,
            portraetAtmen 20s ease-in-out 2s infinite;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%)}
@keyframes portraetEin{to{opacity:1}}
@keyframes portraetAtmen{0%,100%{transform:scale(1)}50%{transform:scale(1.38)}}

/* Huelle um beide Wolken. Sie startet unsichtbar und blendet in der ersten
   Sekunde auf. Das faengt den Moment ab, in dem die Bilder noch unterwegs
   sind — ohne die Huelle blitzen sie beim Eintreffen hart auf.
   Die Opazitaet muss auf der Huelle liegen, nicht auf den Bildern selbst:
   dort steuert sie bereits der Wurf-Ablauf. */
.holi-wolken{position:absolute;inset:0;opacity:0;
             animation:wolkenEin 1s ease-out .1s forwards}
@keyframes wolkenEin{to{opacity:1}}

.holi-pulver{position:absolute;top:50%;width:100vw;height:auto;max-width:none;z-index:3;
             object-fit:contain;mix-blend-mode:screen;pointer-events:none;
             will-change:transform,opacity}
/* Ablauf: das Pulver schießt schnell herein, wird langsamer und blendet
   am Ende aus. Danach beginnt der Wurf von vorn. Deshalb "infinite" statt
   "infinite alternate" — sonst würde die Grafik rückwärts wieder
   hinausgezogen, was wie ein Rückspulen aussieht.
   Die Kurve ease-out macht den Anfang schnell und den Ausklang ruhig. */
.holi-pulver.gelb{left:0; animation:pulverLinks  9s ease-out infinite}
.holi-pulver.blau{right:0;animation:pulverRechts 9s ease-out infinite .9s}
@keyframes pulverLinks{
  0%  {transform:translate(-100%,-50%) scale(.92); opacity:0}
  7%  {opacity:.92}
  72% {opacity:.85}
  100%{transform:translate(-6%,-50%) scale(1.12);  opacity:0}}
@keyframes pulverRechts{
  0%  {transform:translate(100%,-50%) scale(.92); opacity:0}
  7%  {opacity:.92}
  72% {opacity:.85}
  100%{transform:translate(6%,-50%) scale(1.12);  opacity:0}}

/* ── Schwebende Marken im Hero ──────────────────────────────────────────
   Kleine Schriftzüge und Fadenkreuze, die langsam auf und ab wandern.
   Sie liegen über der Bühne, aber unter dem Text — rein dekorativ. */
.holi-marker{position:absolute;z-index:7;pointer-events:none;
             font-family:var(--schrift-h);font-weight:600;font-size:19px;line-height:1.35;
             letter-spacing:.16em;text-transform:uppercase;color:#d1d7da;
             text-shadow:0 2px 10px rgba(0,0,0,.75);will-change:transform}
.holi-marker.eins{left:3%;top:32%;border-left:1px solid #f7d51c;padding-left:11px;
                  animation:schweben 7s ease-in-out infinite}
.holi-marker.zwei{right:4%;top:64%;color:var(--marke);border-right:1px solid var(--marke);
                  padding-right:11px;text-align:right;
                  animation:schweben 9s ease-in-out infinite 1.2s}
/* Die sieben weiteren Schriftzüge aus dem Codex-Entwurf. Positionen von
   dort übernommen, versetzte Laufzeiten, damit nichts im Gleichschritt
   wippt. Sie tragen keinen Strich — sonst wird der Hero unruhig. */
.holi-marker.drei  {left:4%; top:70%;animation:schweben  8s ease-in-out infinite -1s}
/* Rechts oben sitzt die animierte Bildmarke: rund 30 % der Breite, vom
   oberen Rand etwa 12 % bis 28 %. In diesem Feld darf kein Schriftzug
   stehen, sonst liegt Text hinter dem Logo. Deshalb beginnt die rechte
   Spalte erst unterhalb von 30 %. */
.holi-marker.vier  {right:5%;top:36%;animation:schweben  9s ease-in-out infinite -2s;text-align:right}
.holi-marker.fuenf {left:19%;top:11%;animation:schweben 10s ease-in-out infinite -3s}
.holi-marker.sechs {right:22%;top:33%;animation:schweben  8s ease-in-out infinite -4s;text-align:right}
.holi-marker.sieben{left:3%; top:48%;animation:schweben 11s ease-in-out infinite -5s}
.holi-marker.acht  {right:3%;top:44%;animation:schweben  9s ease-in-out infinite -6s;text-align:right}
.holi-marker.neun  {left:50%;bottom:15%;animation:schweben 10s ease-in-out infinite -2s}

/* Mausversatz. Er läuft über die Variablen --px/--py und die Eigenschaft
   translate — getrennt von transform, das für das Schweben reserviert ist.
   Beides gleichzeitig auf transform würde sich gegenseitig überschreiben.
   .neun behält dabei seine Zentrierung. */
.holi-marker,.holi-kreuz{translate:var(--px,0px) var(--py,0px);
                         transition:translate .5s cubic-bezier(.2,.7,.3,1)}
.holi-marker.neun{translate:calc(-50% + var(--px,0px)) var(--py,0px)}
.holi-kreuz{position:absolute;z-index:7;pointer-events:none;color:#f7d51c;
            font:22px/1 ui-monospace,Consolas,monospace;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.holi-kreuz.eins{left:9%;top:17%;animation:schweben 8s ease-in-out infinite .4s}
.holi-kreuz.zwei{right:13%;bottom:22%;color:var(--marke);
                 animation:schweben 10s ease-in-out infinite 2s}
@keyframes schweben{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-14px)}}
/* Am Handy stören die Schriftzüge den Text — und eine Maus gibt es dort
   ohnehin nicht. Ab 1100px zeigen wir nur die kräftigsten vier, darunter
   gar keine. */
@media(max-width:1100px){
  .holi-marker.drei,.holi-marker.vier,.holi-marker.sieben,
  .holi-marker.acht,.holi-marker.neun{display:none}}
@media(max-width:820px){.holi-marker,.holi-kreuz{display:none}}

/* ── Kopfzeile im Hero ─────────────────────────────────────────────── */
.holi-kopf{position:relative;z-index:20;display:flex;align-items:center;gap:1.5rem;
           flex-wrap:wrap;padding-block:1.1rem;border-bottom:1px solid rgba(255,255,255,.1)}
.holi-kopf .haupt-nav a{color:#dfe4e6}
.holi-kopf .haupt-nav a:hover,.holi-kopf .haupt-nav a[aria-current]{color:var(--marke)}
.holi-kopf .haupt-nav a[aria-current]::after{background:var(--marke)}
.holi-kopf .logo img{height:32px;filter:brightness(0) invert(1)}

/* ── Bildmarke rechts oben, halbe Größe ────────────────────────────── */
.holi-marke{position:absolute;right:clamp(1rem,4vw,4rem);top:clamp(6.5rem,12vh,9rem);
            z-index:9;width:min(26vw,340px);pointer-events:none}
.holi-marke .marke-anim{width:100%;height:auto;
                        filter:drop-shadow(0 6px 26px rgba(0,0,0,.6))}
/* Auf dunklem Grund: Grau wird Weiß, Cyan bleibt Hausfarbe */
.marke-hell .m-zeile2 path,
.marke-hell .m-stufe{fill:#fff}
@media(max-width:1100px){
  .holi-marke{width:min(38vw,280px);top:auto;bottom:7.5rem;right:1.25rem;opacity:.9}
  /* Die Bildmarke wandert hier nach rechts unten — genau auf das untere
     Fadenkreuz. Deshalb weicht das Kreuz in diesem Bereich. */
  .holi-kreuz.zwei{display:none}}
@media(max-width:700px){.holi-marke{display:none}}

/* ── Text ──────────────────────────────────────────────────────────── */
.holi-text{position:relative;z-index:8;flex:1;display:flex;flex-direction:column;
           justify-content:center;align-items:center;text-align:center;
           padding:clamp(2rem,6vh,4.5rem) clamp(1.25rem,8vw,9rem);
           background:radial-gradient(ellipse at center,rgba(3,8,12,.1) 0,rgba(3,8,12,.2) 40%,transparent 68%)}
.holi-augenbraue{font-family:var(--schrift-h);font-weight:600;font-size:12px;letter-spacing:.17em;
                 text-transform:uppercase;color:#c3cbcf;margin:0 0 1.6rem;opacity:0;
                 animation:sanftRein .8s ease .05s forwards}
.holi-augenbraue i{display:inline-block;width:27px;height:2px;background:#f7d51c;
                   vertical-align:middle;margin-right:12px}
.holi h1{font-family:var(--schrift-h);color:#fff;font-weight:600;margin:0;max-width:1100px;
         font-size:clamp(2.9rem,7.2vw,7.4rem);line-height:.86;letter-spacing:-.05em;
         text-shadow:0 3px 22px rgba(0,0,0,.8)}
.holi h1 .zeile{display:block;opacity:0;will-change:transform,opacity}
.holi h1 em{font-style:normal;color:var(--marke)}
.zeile-links {animation:textVonLinks 1.15s cubic-bezier(.2,.75,.25,1) forwards}
.zeile-rechts{animation:textVonRechts 1.15s cubic-bezier(.2,.75,.25,1) .22s forwards}
.zeile-links2{animation:textVonLinks 1.15s cubic-bezier(.2,.75,.25,1) .44s forwards}
.holi-lead{font-size:clamp(15px,1.2vw,19px);line-height:1.7;color:#d1d6d8;max-width:56ch;
           margin:2.2rem auto;text-shadow:0 2px 12px #000;opacity:0;
           animation:textVonRechts 1s cubic-bezier(.2,.75,.25,1) .68s forwards}
.holi-knoepfe{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center}
.holi-knoepfe .btn:first-child{opacity:0;animation:textVonLinks .95s cubic-bezier(.2,.75,.25,1) .9s forwards}
.holi-knoepfe .btn:last-child {opacity:0;animation:textVonRechts .95s cubic-bezier(.2,.75,.25,1) 1.05s forwards}
.btn-holi{background:var(--marke);color:#00131c;border:0;font-weight:600}
.btn-holi:hover{background:#fff;color:#050a0f}
.btn-holi-rand{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.btn-holi-rand:hover{background:#fff;color:#050a0f;border-color:#fff}

@keyframes textVonLinks {0%{transform:translateX(-42vw);opacity:0;filter:blur(7px)}
                         75%{filter:blur(0)}100%{transform:none;opacity:1;filter:blur(0)}}
@keyframes textVonRechts{0%{transform:translateX(42vw);opacity:0;filter:blur(7px)}
                         75%{filter:blur(0)}100%{transform:none;opacity:1;filter:blur(0)}}
@keyframes sanftRein{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}

/* ── Kennzahlen-Leiste am Fuß ──────────────────────────────────────── */
.holi-fuss{position:relative;z-index:10;border-top:1px solid rgba(255,255,255,.1)}
.holi-fuss .behaelter{display:flex;align-items:center;gap:clamp(1rem,4vw,3.5rem);flex-wrap:wrap;
                      padding-block:1.1rem;font-family:var(--schrift-h);font-weight:600;
                      font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#8e999f}
.holi-fuss .scrollhinweis{margin-right:auto}
.holi-fuss div{display:flex;align-items:baseline;gap:.6rem}
.holi-fuss b{font-size:21px;color:#fff;letter-spacing:0;font-variant-numeric:tabular-nums}
@media(max-width:700px){.holi-fuss .scrollhinweis{display:none}}

/* Bildnachweis unter die Kennzahlenleiste, damit er nicht hineinragt */
.holi-nachweis{position:relative;z-index:11;margin:0;padding:.5rem clamp(1rem,4vw,2rem);
               text-align:right;font-size:11px;color:rgba(255,255,255,.38);
               background:rgba(0,0,0,.35)}
.holi-nachweis a{color:inherit}
.holi-nachweis a:hover{color:var(--marke)}

@media (prefers-reduced-motion:reduce){
  .holi-pulver,.holi-partikel,.holi-marker,.holi-kreuz{animation:none!important}
  /* Ohne Bewegung kein Aufblenden — Wolken und Portraet muessen aber
     sichtbar sein, sonst bliebe der Hero bei abgeschalteter Animation leer. */
  .holi-wolken{animation:none!important;opacity:1!important}
  .holi-portraet{animation:none!important;opacity:1!important;transform:none!important}
  .holi-pulver.gelb{transform:translate(-4%,-50%)}
  .holi-pulver.blau{transform:translate(3%,-50%)}
  .holi h1 .zeile,.holi-augenbraue,.holi-lead,.holi-knoepfe .btn{
    animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
}