/* ZZ-Loader (Operator 02.11.2026): erster Besuch, bis der Film spielbereit ist. Varianten ?loader=a|b|c (ZZR-107). */
.zzld{position:fixed;inset:0;z-index:2147483000;background:#F3EEE4;color:#141311;display:grid;place-items:center;
  transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .6s ease}
.zzld.weg{transform:translateY(-100%)}
.zzld-marke{font-family:var(--zz-logo,"Zaba Logo"),serif;font-weight:700;text-transform:uppercase;line-height:1;white-space:nowrap;
  font-size:clamp(34px,7vw,96px);letter-spacing:0}
/* a: Wortmarke zieht sich zu ZZ zusammen (wie der Header) */
.zzld-a .zzld-marke span{display:inline-block;overflow:hidden;vertical-align:top;max-width:4em;transition:max-width 1s cubic-bezier(.65,0,.35,1),opacity .6s}
.zzld-a .zzld-marke .z{max-width:none}
.zzld-a.zu .zzld-marke span:not(.z){max-width:0;opacity:0}
.zzld-a.zu .zzld-marke{letter-spacing:-.2em}
/* b: ZZ-Monogramm wird gezeichnet */
.zzld-b svg{width:clamp(120px,22vw,220px);height:auto;overflow:visible}
.zzld-b text{font-family:var(--zz-logo,"Zaba Logo"),serif;font-weight:700;font-size:100px;letter-spacing:-20px;fill:transparent;stroke:#141311;stroke-width:1.2;
  stroke-dasharray:600;stroke-dashoffset:600;animation:zzld-zeichnen 1.6s cubic-bezier(.65,0,.35,1) forwards,zzld-fuellen .5s 1.4s forwards}
@keyframes zzld-zeichnen{to{stroke-dashoffset:0}}
@keyframes zzld-fuellen{to{fill:#141311}}
/* c: Linie mit Ladestand, Vorhang oeffnet sich oben/unten */
.zzld-c{background:transparent;display:block}
.zzld-c .h{position:absolute;left:0;right:0;height:50%;background:#F3EEE4;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.zzld-c .h.o{top:0}.zzld-c .h.u{bottom:0}
.zzld-c .mitte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(320px,70vw);text-align:center;z-index:1;transition:opacity .4s}
.zzld-c .linie{height:1px;background:color-mix(in srgb,#141311 20%,#F3EEE4);margin-top:20px;position:relative}
.zzld-c .linie i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:#141311;transition:width .3s}
.zzld-c .zzld-marke{font-size:clamp(28px,5vw,56px);letter-spacing:-.2em}
.zzld-c.weg{transform:none}
.zzld-c.weg .h.o{transform:translateY(-100%)}.zzld-c.weg .h.u{transform:translateY(100%)}.zzld-c.weg .mitte{opacity:0}
/* d: FEAR | BELIEVE-Schnitt im Vollbild (harte Schnitte Ink/Paper), Ende ZZ auf Paper */
.zzld-d{background:#141311}
.zzld-d .bild{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.zzld-d .bild.i{background:#141311;color:#F3EEE4}.zzld-d .bild.p{background:#F3EEE4;color:#141311}
.zzld-d .zzld-headline{font-family:var(--zz-h1,"Glock Grotesk"),sans-serif;font-weight:700;text-transform:uppercase;line-height:1;letter-spacing:0;
  font-size:clamp(44px,15.5vw,250px);margin:0}
.zzld-d .bild:nth-child(1){animation:zzld-blitz .2s steps(1) 0s forwards}
.zzld-d .bild:nth-child(2){animation:zzld-blitz .2s steps(1) .2s forwards}
.zzld-d .bild:nth-child(3){animation:zzld-blitz .2s steps(1) .4s forwards}
.zzld-d .bild:nth-child(4){animation:zzld-blitz .2s steps(1) .6s forwards}
.zzld-d .bild:nth-child(5){animation:zzld-bleib .1s steps(1) .8s forwards}
@keyframes zzld-blitz{0%{opacity:1}99%{opacity:1}100%{opacity:0}}
@keyframes zzld-bleib{to{opacity:1}}
.zzld-d .zzld-marke{font-size:clamp(96px,22vw,260px);letter-spacing:-.2em}
/* e: erstes Filmbild (Tueren zu) im Vollbild mit ZZ; danach blendet es weg und die Tueren gehen auf */
.zzld-e{background:#141311 center/cover no-repeat;transition:opacity .7s ease}
.zzld-e.weg{transform:none;opacity:0}
.zzld-e .zzld-marke{color:#F3EEE4;font-size:clamp(96px,22vw,260px);letter-spacing:-.2em;animation:zzld-atmen 1.6s ease-in-out infinite alternate}
.zzld-e .linie{position:absolute;left:50%;bottom:calc(48px + env(safe-area-inset-bottom,0px));width:min(240px,50vw);height:1px;transform:translateX(-50%);background:rgba(243,238,228,.25)}
.zzld-e .linie i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:#F3EEE4;transition:width .3s}
@keyframes zzld-atmen{from{opacity:.55}to{opacity:1}}

@media (prefers-reduced-motion:reduce){.zzld,.zzld *{transition:none!important;animation:none!important}}
/* Cookie-Banner erst nach dem Loader */
html.zzld-an #zz-consent{visibility:hidden!important}