/* =============================================================================
   zz-footer.css — Footer zabazingo.com v2 (Operator 27.10.2026)
   Gruppen ZABA & ZINGO · Support · Legal · Folgen; Telefon klappt auf (Hoehe mit
   Anlauf und Auslauf), ab 900 px Spalten. Varianten ?footer=a|b|c fuer die Marke
   unten (a Wortmarke, b DBE gross, c Wortmarke volle Breite).
   Raster v1: <600 Rand 24, ab 900 Rand 48 / Steg 24, ab 1280 Rand 64; 8er-Abstaende.
   nur Paper/Ink, keine Zwischentoene (ZZR-057, Operator 27.10.2026), Logo-Schrift nur Wortmarke, DBE, DON’T BELIEVE EVERYTHING
   und BREAK THE PATTERN (ZZR-002/003), sonst PP Neue Montreal; eckig.
   ============================================================================= */
@font-face{font-family:"PP Neue Montreal";src:url("../fonts/PPNeueMontreal-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("../fonts/PPNeueMontreal-Semibold.otf") format("opentype");font-weight:500 700;font-display:swap}
@font-face{font-family:"NotoSerifDisplay";src:url("../fonts/NotoSerifDisplay_ExtraCondensed-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
.zzf{--zzf-paper:#F3EEE4;--zzf-ink:#141311;--zzf-mid:#141311;--zzf-line:#141311;
  --zzf-rand:24px;--zzf-steg:16px;--zzf-sans:"PP Neue Montreal",system-ui,sans-serif;--zzf-logo:"NotoSerifDisplay",Didot,serif;
  --zzf-kurve:cubic-bezier(.65,0,.35,1);
  position:relative;z-index:30;background:var(--zzf-paper);color:var(--zzf-ink);font:400 15px/1.5 var(--zzf-sans);letter-spacing:0;
  -webkit-font-smoothing:antialiased}
@media (min-width:900px){.zzf{--zzf-rand:48px;--zzf-steg:24px}}
@media (min-width:1280px){.zzf{--zzf-rand:64px}}
.zzf *{box-sizing:border-box;border-radius:0;margin:0}
.zzf ul{list-style:none;padding:0}
.zzf a{color:inherit;text-decoration:none}
.zzf button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;appearance:none;text-align:left}
.zzf :focus-visible{outline:2px solid var(--zzf-ink);outline-offset:2px}

/* Abschluss-Screen */
.zzf-ende{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.zzf-ende-text{flex:1;display:grid;place-items:center;padding:0 var(--zzf-rand);container-type:inline-size}
.zzf-headline{font-family:var(--zzf-logo);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1;
  font-size:min(9rem,10.4cqi);white-space:nowrap;text-align:center}
.zzf-weiter{align-self:center;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;margin-bottom:calc(24px + env(safe-area-inset-bottom,0px));
  font-size:12px;letter-spacing:.14em;text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){.zzf-weiter svg{animation:zzf-ab 1.8s var(--zzf-kurve) infinite}}
@keyframes zzf-ab{0%,100%{transform:none}50%{transform:translateY(4px)}}

/* Footer: Telefon zuerst */
.zzf-footer{padding:16px var(--zzf-rand) calc(24px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--zzf-line)}
.zzf-gruppe{border-bottom:1px solid var(--zzf-line)}
.zzf-g-titel{font:inherit}
.zzf-g-titel button,.zzf-g-fest{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.zzf-plus{flex:none;transition:transform .5s var(--zzf-kurve)}
.zzf-plus path:first-child{transition:opacity .3s var(--zzf-kurve)}
[aria-expanded=true] .zzf-plus{transform:rotate(180deg)}
[aria-expanded=true] .zzf-plus path:first-child{opacity:0}
/* Aufklappen: Hoehe 0fr -> 1fr, eine Kurve mit Anlauf und Auslauf. */
.zzf-g-inhalt{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--zzf-kurve),opacity .4s var(--zzf-kurve);opacity:0}
.zzf-g-inhalt>ul{min-height:0;overflow:hidden}
.zzf-g-titel:has([aria-expanded=true])+.zzf-g-inhalt{grid-template-rows:1fr;opacity:1}
.zzf-g-inhalt li:last-child{padding-bottom:16px}
.zzf-g-inhalt a,.zzf-g-inhalt button,.zzf-folgt{display:flex;align-items:center;min-height:40px;font-size:15px;line-height:1.3}
.zzf-folgt{color:var(--zzf-mid)}
.zzf-icons{display:flex;flex-wrap:wrap;gap:8px 12px;padding-bottom:16px}
.zzf-icon{display:grid;place-items:center;width:44px;height:44px;margin-left:-10px}
.zzf-icon+.zzf-icon{margin-left:0}
.zzf .zzf-land{display:flex;align-items:center;gap:8px;min-height:56px;width:100%;font-size:14px;border-bottom:1px solid var(--zzf-line)}
.zzf-schluss{text-align:center;padding-top:40px;container-type:inline-size}
.zzf-mark{font-family:var(--zzf-logo);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1;white-space:nowrap;font-size:28px}
.zzf-dbe{font-family:var(--zzf-logo);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;margin-top:8px;white-space:nowrap}
.zzf-copy{font-size:12px;color:var(--zzf-mid);margin-top:16px}
.zzf a:hover,.zzf-g-inhalt button:hover,.zzf-land:hover span{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px}

/* Varianten der Marke unten */
.zzf-v-b .zzf-mark{font-size:min(16rem,44cqi);letter-spacing:.04em}
.zzf-v-c .zzf-mark{font-size:min(14rem,16.2cqi)}
/* Variante D (Nude Project): unten nur der Markensatz, von Rand zu Rand des Rasters (links am
   Seitenrand, letzter Buchstabe am rechten Seitenrand), Unterlaenge schliesst unten ab; Groesse setzt zz-footer.js. */
.zzf-v-d .zzf-footer{padding-bottom:0}
.zzf-v-d .zzf-schluss{text-align:left;padding-top:48px;overflow:hidden}
.zzf-v-d .zzf-mark{position:relative;display:inline-block;text-transform:none;letter-spacing:0;line-height:normal;font-size:100px;white-space:nowrap;vertical-align:bottom}
.zzf-v-d .zzf-tm{position:absolute;right:0;top:.12em;font-size:.16em;line-height:1;font-family:var(--zzf-sans);font-weight:500}
.zzf-v-d .zzf-social{padding-top:16px}

/* Desktop: alle Gruppen offen in Spalten */
@media (min-width:900px){
  .zzf-footer{padding:64px var(--zzf-rand) 32px}
  .zzf-gruppen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--zzf-steg)}
  .zzf-gruppe{border:0}
  .zzf-g-titel button{pointer-events:none;min-height:0;margin-bottom:16px}
  .zzf-g-fest{min-height:0;margin-bottom:16px}
  .zzf-plus{display:none}
  .zzf-g-inhalt{grid-template-rows:1fr;opacity:1;transition:none}
  .zzf-g-inhalt a,.zzf-g-inhalt button,.zzf-folgt{min-height:32px;font-size:14px}
  .zzf .zzf-land{width:auto;margin-top:48px;border:0;min-height:48px}
  .zzf-schluss{padding-top:48px;border-top:1px solid var(--zzf-line);margin-top:16px}
  .zzf-v-a .zzf-mark{font-size:32px}
  .zzf-v-d .zzf-gruppen{grid-template-columns:repeat(3,minmax(0,1fr)) auto}
  .zzf-v-d .zzf-schluss{border-top:0;padding-top:64px}
}
@media (prefers-reduced-motion:reduce){.zzf-g-inhalt,.zzf-plus{transition:none}}

/* Variante E (Operator 28.10.2026): wild, Richtung Nude Project. Abschluss-Screen Paper, Footer Ink.
   Glock nur an Headline-Klassen, immer Versalien (ZZR-011); jede Zeile randgenau (zz-footer.js). */
.zzf-v-e .zzf-ende-text{display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-width:0}
.zzf-block{display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;white-space:nowrap;overflow:visible}
.zzf-fit{display:block;line-height:1;font-size:100px}
.zzf-desk{display:none}
.zzf-v-e .zzf-headline{font-family:var(--zz-h1,"Glock Grotesk"),sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:0;text-align:left;font-size:inherit}
.zzf-v-e .zzf-headline .zzf-fit+.zzf-fit{margin-top:.04em}
.zzf-v-e .zzf-weiter{margin-top:0}
.zzf-v-e .zzf-footer{background:var(--zzf-ink);color:var(--zzf-paper);border-top:0;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  --zzf-line:#F3EEE4;--zzf-mid:#F3EEE4}
.zzf-v-e :focus-visible{outline-color:currentColor}
.zzf-v-e .zzf-gruppe,.zzf-v-e .zzf-land{border-color:var(--zzf-paper)}
.zzf-v-e .zzf-g-titel button,.zzf-v-e .zzf-g-fest{font-size:13px;letter-spacing:.16em}
.zzf-v-e .zzf-g-inhalt a,.zzf-v-e .zzf-g-inhalt button,.zzf-v-e .zzf-folgt{font-size:17px;min-height:44px}
/* Unterstrich faehrt von links ein */
.zzf-v-e .zzf-g-inhalt a,.zzf-v-e .zzf-g-inhalt button{background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/0 1px no-repeat;
  transition:background-size .45s var(--zzf-kurve);width:fit-content}
.zzf-v-e .zzf-g-inhalt a:hover,.zzf-v-e .zzf-g-inhalt button:hover,.zzf-v-e .zzf-g-inhalt a:focus-visible{background-size:100% 1px;text-decoration:none}
.zzf-v-e .zzf-icon{transition:transform .35s var(--zzf-kurve)}
.zzf-v-e .zzf-icon:hover{transform:translateY(-3px)}
.zzf-v-e .zzf-schluss{text-align:left;padding-top:56px;overflow:hidden}
.zzf-headline-dbe{font-family:var(--zz-h1,"Glock Grotesk"),sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:0}
.zzf-v-e .zzf-headline-dbe .zzf-fit{line-height:1}
.zzf-v-e .zzf-headline-dbe .zzf-fit+.zzf-fit{margin-top:.1em}
.zzf-v-e .zzf-headline-dbe .zzf-fit{position:relative}
.zzf-v-e .zzf-tm{position:absolute;right:0;top:-.42em;font-size:.14em;line-height:1;font-family:var(--zzf-sans);font-weight:500;letter-spacing:0}
@media (min-width:900px){
  .zzf-v-e .zzf-footer{padding-top:80px}
  .zzf-v-e .zzf-gruppen{grid-template-columns:repeat(3,minmax(0,1fr)) auto}
  .zzf-v-e .zzf-g-inhalt a,.zzf-v-e .zzf-g-inhalt button,.zzf-v-e .zzf-folgt{font-size:16px;min-height:36px}
  .zzf-v-e .zzf-schluss{border-top:0;padding-top:96px}
  .zzf-v-e .zzf-tel{display:none}
  .zzf-v-e .zzf-desk{display:block}
}

/* Scroll-Hinweis wie Zara: Text, darunter eine Linie, die nach unten laeuft */
.zzf-v-e .zzf-weiter{flex-direction:column;gap:12px}
.zzf-v-e .zzf-weiter svg{display:none}
.zzf-v-e .zzf-weiter::after{content:"";display:block;width:1px;height:64px;background:currentColor;transform-origin:50% 0}
@media (prefers-reduced-motion:no-preference){.zzf-v-e .zzf-weiter::after{animation:zzf-linie 1.8s var(--zzf-kurve) infinite}}
@keyframes zzf-linie{0%{transform:scaleY(0);transform-origin:50% 0}45%{transform:scaleY(1);transform-origin:50% 0}55%{transform:scaleY(1);transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}
/* Zwischenstopp in der Seite: Hoehe unter dem Header, Linie laenger wie bei Zara */
.zzf-zwischen .zzf-ende{min-height:calc(100vh - var(--zz-s-8,64px));min-height:calc(100svh - var(--zz-s-8,64px))}
@media (min-width:900px){.zzf-v-e .zzf-weiter::after{height:120px}}
/* Variante e: am Ende faehrt ein Overlay in Paper mit ZABA & ZINGO von unten ueber DONT BELIEVE EVERYTHING */
.zzf-v-e .zzf-schluss{position:sticky;bottom:0;z-index:1;background:var(--zzf-ink)}
.zzf-deckel{display:none}
.zzf-v-e .zzf-deckel{display:flex;align-items:flex-end;position:relative;z-index:2;overflow:hidden;background:var(--zzf-ink);color:var(--zzf-paper);
  margin-left:calc(-1 * var(--zzf-rand));margin-right:calc(-1 * var(--zzf-rand));padding:0 var(--zzf-rand) calc(16px + env(safe-area-inset-bottom,0px))}
.zzf-v-e .zzf-footer{padding-bottom:0}
.zzf-deckel-marke{font-family:var(--zzf-logo);font-weight:700;text-transform:uppercase;letter-spacing:0;width:100%}
.zzf-deckel-marke .zzf-fit{line-height:.8}

/* Operator 28.10.: Luft in Paper ueber dem Footer, Stopp dort; Overlay in der Farbe des Footers.
   Modus: light (BELIEVE) = Footer Ink, dark (FEAR) = Footer Paper, Overlay jeweils gleich. */
.zzf-luft{background:var(--zzf-paper);scroll-snap-align:start;scroll-snap-stop:always}
body[data-theme="dark"] .zzf-luft{background:var(--zzf-ink)}
body[data-theme="dark"] .zzf-v-e .zzf-footer,body[data-theme="dark"] .zzf-v-e .zzf-schluss,body[data-theme="dark"] .zzf-v-e .zzf-deckel{background:var(--zzf-paper);color:var(--zzf-ink);--zzf-line:#141311;--zzf-mid:#141311}