/* ==========================================================================
   COMPONENTS · Header, Menü, Hero, Split-Intro, Footer,
   Chläber-Automat, Popup, Splat-Transition, Toast, Fliege, Social
   ========================================================================== */

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed;inset:0 0 auto 0;
  z-index:60;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:clamp(16px,2.8vw,54px) var(--wrap-r) 0 clamp(20px,7.8vw,150px);
  pointer-events:none;
}
.site-header .logo,.site-header .menu-btn{pointer-events:auto}
.blend{mix-blend-mode:difference}
.logo img{width:clamp(76px,7.9vw,152px);height:auto;transition:transform .3s var(--ease-out)}
.logo:hover img{transform:rotate(-6deg) scale(1.04)}

.menu-btn{
  display:flex;align-items:center;gap:clamp(10px,1.2vw,24px);
  color:var(--paper);
  margin-top:clamp(4px,.8vw,16px);
}
.menu-btn__label{font-weight:700;font-size:clamp(14px,1.05vw,20px);letter-spacing:.06em}
.menu-btn__icon{width:clamp(34px,3.3vw,64px);height:auto;aspect-ratio:64.7/51.79;transition:transform .35s var(--ease-out)}
.menu-btn:hover .menu-btn__icon{transform:rotate(14deg) translateY(-2px)}

/* ==========================================================================
   MENÜ OVERLAY
   ========================================================================== */
.menu{position:fixed;inset:0;z-index:80;visibility:hidden}
.menu.is-open,.menu.is-closing{visibility:visible}
.menu__blob{
  position:absolute;top:0;right:0;
  width:150vmax;height:150vmax;
  transform:translate(42%,-42%) scale(0);
  background:var(--paper);
  border-radius:38% 62% 55% 45% / 48% 42% 58% 52%;
  transition:transform .62s var(--ease-splat);
}
.menu.is-open .menu__blob{transform:translate(30%,-30%) scale(2.2) rotate(20deg)}
.menu__inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(20px,3vw,56px) var(--wrap-r) clamp(24px,3.4vw,64px) var(--wrap-l);
  opacity:0;transition:opacity .25s ease .1s;
}
.menu.is-open .menu__inner{opacity:1}
.menu-close{
  position:absolute;top:clamp(16px,2.8vw,54px);right:var(--wrap-r);
  display:flex;align-items:center;gap:clamp(10px,1.2vw,24px);
  color:var(--ink);
}
.menu-close__label{font-weight:700;font-size:clamp(14px,1.05vw,20px);letter-spacing:.06em}
.menu-close__icon{width:clamp(40px,4vw,78px);height:auto;aspect-ratio:95.23/90.45;--x-fill:var(--paper);transition:transform .35s var(--ease-out)}
.menu-close:hover .menu-close__icon{transform:rotate(-14deg) scale(1.06)}

.menu__nav{display:flex;flex-direction:column}
.menu__nav a{
  position:relative;
  color:var(--ink);
  font-size:var(--fs-nav);
  font-weight:700;text-transform:uppercase;line-height:1.06;
  width:max-content;max-width:100%;
  transform:translateY(30px);opacity:0;
  transition:color .18s ease, transform .5s var(--ease-out), opacity .4s ease;
}
.menu.is-open .menu__nav a{transform:translateY(0);opacity:1}
.menu__nav a:nth-child(1){transition-delay:.10s}
.menu__nav a:nth-child(2){transition-delay:.15s}
.menu__nav a:nth-child(3){transition-delay:.20s}
.menu__nav a:nth-child(4){transition-delay:.25s}
.menu__nav a:nth-child(5){transition-delay:.30s}
.menu__nav a:nth-child(6){transition-delay:.35s}
.menu__arrow{
  display:inline-block;width:0;overflow:hidden;vertical-align:baseline;
  transition:width .22s var(--ease-out);
}
.menu__nav a:hover,.menu__nav a.is-active{color:var(--pink)}
.menu__nav a:hover .menu__arrow,.menu__nav a.is-active .menu__arrow{width:.72em}

.menu__footer{
  position:absolute;left:var(--wrap-l);right:var(--wrap-r);bottom:clamp(24px,3.6vw,70px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}

/* social */
.social{display:flex;align-items:center;gap:clamp(14px,1.5vw,28px)}
.social__label{font-size:var(--fs-meta)}
.social a svg{width:clamp(20px,1.6vw,30px);height:clamp(20px,1.6vw,30px);transition:transform .25s var(--ease-out),color .2s}
.social a:hover svg{transform:translateY(-3px) rotate(-8deg);color:var(--pink)}
.social--dark{color:var(--ink)}

/* ==========================================================================
   HERO (Basis + Varianten)
   ========================================================================== */
.hero{
  position:relative;
  height:100vh;height:100svh;
  min-height:560px;
  overflow:hidden;
  display:flex;align-items:center;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(32,32,32,.55) 0%, rgba(32,32,32,.1) 55%, rgba(32,32,32,0) 75%);
}
.hero--plain .hero__media::after{background:rgba(32,32,32,.18)}
.hero__title{
  position:relative;z-index:2;
  padding-left:var(--wrap-l);padding-right:var(--wrap-r);
}
.hero__title .line{display:block;overflow:hidden;padding-top:.12em;margin-bottom:-.12em}
.hero__title .line>span{display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease-out)}
body.is-shown .hero__title .line>span{transform:translateY(0)}
.hero__title .line:nth-child(2)>span{transition-delay:.08s}
.hero__title .line:nth-child(3)>span{transition-delay:.16s}

/* Scroll-Hinweis */
.scroll-cue{
  position:absolute;left:50%;bottom:26px;z-index:3;
  transform:translateX(-50%);
  color:var(--paper);opacity:.8;
  animation:cue 1.8s ease-in-out infinite;
  transition:opacity .4s;
  pointer-events:none;
}
.scroll-cue svg{width:26px;height:26px}
.scroll-cue.is-hidden{opacity:0}
@keyframes cue{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}

/* ==========================================================================
   SPLIT-INTRO (Fleiga werden / Gönner werden)
   ========================================================================== */
.split-intro{
  position:relative;
  padding-block:clamp(110px,14vw,260px) clamp(60px,7vw,130px);
}
.split-intro__img{
  position:absolute;top:clamp(70px,9vw,170px);right:var(--wrap-r);
  width:min(42vw,720px);z-index:1;
}
.split-intro__img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.split-intro .h2{position:relative;z-index:2;max-width:7em}
.split-intro__text{
  position:relative;z-index:2;
  margin-top:clamp(30px,7vw,140px);
  margin-left:clamp(0px,19vw,380px);
  text-shadow:0 2px 22px rgba(32,32,32,.7);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer__cta{padding-block:clamp(80px,10vw,190px) clamp(60px,7vw,130px)}
.footer__cta .h-display{cursor:default}
.footer__cta .h-display a{transition:color .2s}
.footer__cta .h-display a:hover{color:var(--pink)}
.footer__light{
  background:var(--paper);color:var(--ink);
  padding:clamp(48px,5.5vw,104px) var(--wrap-r) clamp(28px,3vw,56px) var(--wrap-l);
}
.footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr auto;
  gap:clamp(28px,4vw,72px);
  align-items:start;
}
/* jede Spalte: Überschrift → Inhalt, gleicher Rhythmus */
.footer__col{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,1.8vw,32px)}
.footer__grid .h3{margin:0}
.footer__addr{font-size:var(--fs-meta);font-weight:700;text-transform:uppercase;line-height:1.7}
.footer__col--social .social{padding-top:.2em}
.footer__legal{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px 40px;flex-wrap:wrap;
  margin-top:clamp(48px,6vw,100px);
  padding-top:clamp(18px,2.2vw,34px);
  padding-left:clamp(0px,2.5vw,48px);   /* Abstand zum fixen Chläber-Badge */
  border-top:1px solid rgba(32,32,32,.16);
  font-size:var(--fs-meta);
}
.footer__legal-links{display:flex;gap:clamp(18px,2.6vw,48px);flex-wrap:wrap}
.footer__legal a:hover{color:var(--pink)}

/* ==========================================================================
   CHLÄBER-BADGE + AUTOMAT
   ========================================================================== */
.chlaeber-badge{
  position:fixed;left:clamp(14px,4vw,76px);bottom:clamp(14px,2.4vw,46px);
  z-index:55;
  width:clamp(84px,7.5vw,145px);
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.45));
  transition:transform .3s var(--ease-out);
  animation:badgepulse 6s ease-in-out infinite;
}
.chlaeber-badge:hover{transform:rotate(-7deg) scale(1.09);animation-play-state:paused}
@keyframes badgepulse{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-5deg)}94%{transform:rotate(4deg)}97%{transform:rotate(-2deg)}}

.automat{position:fixed;inset:0;z-index:90;display:none}
.automat.is-open{display:block}
.automat__backdrop{
  position:absolute;inset:0;
  background:rgba(24,24,24,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.automat__stage{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(30px,5vw,100px);
  padding:70px clamp(20px,5vw,90px) 30px;
  flex-wrap:wrap;
}
.overlay-close{
  position:absolute;top:clamp(16px,2.6vw,50px);right:var(--wrap-r);z-index:5;
  width:clamp(46px,4vw,78px);color:var(--paper);--x-fill:var(--ink);
  transition:transform .3s var(--ease-out);
}
.overlay-close:hover{transform:rotate(-12deg) scale(1.08)}
.overlay-close svg{width:100%;height:auto;aspect-ratio:95.23/90.45}

.automat__machine-wrap{display:flex;flex-direction:column;align-items:center;gap:26px}
.automat__machine{
  width:min(340px,72vw);
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.5));
}
.automat__machine.is-shaking{animation:shake .6s ease-in-out}
@keyframes shake{
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(-2.4deg) translateX(-5px)}
  30%{transform:rotate(2deg) translateX(5px)}
  45%{transform:rotate(-1.6deg)}
  60%{transform:rotate(1.2deg)}
  80%{transform:rotate(-.6deg)}
}
.machine__dome{
  height:230px;
  border:5px solid var(--paper);
  border-bottom:0;
  border-radius:170px 170px 0 0;
  background:linear-gradient(160deg, rgba(250,250,250,.16), rgba(250,250,250,.03) 55%);
  position:relative;overflow:hidden;
}
.machine__pile{position:absolute;inset:auto 10px 0 10px;height:62%}
.capsule{
  position:absolute;bottom:0;
  width:58px;height:58px;border-radius:50%;
  border:4px solid var(--paper);
  overflow:hidden;background:#fff;
}
.capsule--pink{border-color:var(--pink)}
.capsule img{width:100%;height:100%;object-fit:contain;padding:5px}
.machine__panel{
  background:var(--pink);
  border:5px solid var(--paper);
  padding:22px 24px 26px;
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  gap:14px 18px;align-items:center;
}
.machine__title{
  font-weight:700;font-size:26px;line-height:1;letter-spacing:.02em;
  color:var(--paper);text-transform:uppercase;
}
.machine__knob{
  grid-row:1 / span 2;grid-column:2;
  width:96px;height:96px;border-radius:50%;
  background:var(--paper);
  border:5px solid var(--ink);
  position:relative;cursor:grab;
  transition:transform .12s;
  touch-action:none;
}
.machine__knob:active{cursor:grabbing}
.machine__knob-grip{
  position:absolute;left:50%;top:8px;bottom:8px;width:14px;
  transform:translateX(-50%);
  background:var(--ink);border-radius:8px;
}
.machine__slot{
  height:46px;background:var(--ink);
  border-radius:6px;
  box-shadow:inset 0 6px 14px rgba(0,0,0,.7);
  position:relative;overflow:visible;
}
.machine__feet{display:flex;justify-content:space-between;padding:0 26px}
.machine__feet span{width:52px;height:26px;background:var(--paper)}
.automat__hint{font-size:var(--fs-meta);color:var(--paper);opacity:.85;text-align:center;max-width:300px}

.drop-capsule{
  position:fixed;z-index:95;
  width:64px;height:64px;border-radius:50%;
  border:4px solid var(--pink);
  background:#fff;
  overflow:hidden;
  pointer-events:none;
}
.drop-capsule img{width:100%;height:100%;object-fit:contain;padding:6px}

.automat__result[hidden]{display:none!important}
.automat__result{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  max-width:min(420px,84vw);
}
.automat__sticker-wrap{
  transform:rotate(-5deg);
}
.automat__sticker-wrap img{
  max-width:min(380px,74vw);max-height:44vh;object-fit:contain;
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.55));
  animation:stickerpop .55s var(--ease-out) both;
}
@keyframes stickerpop{
  0%{transform:scale(.2) rotate(14deg);opacity:0}
  70%{transform:scale(1.06) rotate(-2deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}
.automat__sticker-name{font-weight:700;text-transform:uppercase;font-size:clamp(18px,1.6vw,28px);text-align:center}
.automat__actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center}
.automat__count{font-size:var(--fs-meta);color:var(--grey)}

.confetti{position:fixed;z-index:96;width:12px;height:12px;pointer-events:none}

/* ==========================================================================
   POPUP
   ========================================================================== */
.popup{position:fixed;inset:0;z-index:85;display:none}
.popup.is-open{display:block}
.popup__backdrop{
  position:absolute;inset:0;
  background:rgba(24,24,24,.6);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.popup__card{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:var(--paper);
  padding:clamp(10px,1.2vw,18px);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
  animation:popin .5s var(--ease-out) both;
}
@keyframes popin{
  0%{transform:translate(-50%,-46%) scale(.86);opacity:0}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1}
}
.popup__card img{max-height:min(78vh,860px);max-width:min(86vw,620px);width:auto;height:auto}
.popup__close{
  position:absolute;top:-54px;right:-6px;
  width:44px;height:44px;border-radius:50%;
  background:var(--paper);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease-out), background .2s, color .2s;
}
.popup__close:hover{transform:rotate(90deg);background:var(--pink);color:var(--paper)}
.popup__close svg{width:20px;height:20px}

/* ==========================================================================
   PAGE SPLAT / TOAST / FLY
   ========================================================================== */
.page-splat{
  position:fixed;z-index:75;
  left:50%;top:50%;
  width:160vmax;height:160vmax;
  margin:-80vmax 0 0 -80vmax;
  background:var(--paper);
  border-radius:42% 58% 50% 50% / 55% 44% 56% 45%;
  transform:scale(0) rotate(0deg);
  pointer-events:none;
}
.page-splat.is-in{transition:transform .5s var(--ease-splat);transform:scale(1.2) rotate(24deg)}
.page-splat.is-cover{transform:scale(1.2) rotate(24deg)}
.page-splat.is-out{transition:transform .55s var(--ease-splat);transform:scale(0) rotate(-30deg)}

.toast{
  position:fixed;left:50%;bottom:clamp(24px,4vw,70px);z-index:100;
  transform:translateX(-50%) translateY(24px);
  background:var(--paper);color:var(--ink);
  font-size:var(--fs-meta);font-weight:700;
  padding:.9em 1.6em;border-radius:999px;
  opacity:0;pointer-events:none;
  transition:opacity .3s, transform .3s var(--ease-out);
  box-shadow:0 16px 44px rgba(0,0,0,.4);
}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}

.fly{
  position:fixed;left:0;top:0;z-index:70;
  width:clamp(30px,2.6vw,46px);
  color:#fff;mix-blend-mode:difference;
  display:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));
}
.fly.is-on{display:block}
.fly svg{width:100%;height:auto}
.fly svg.fly__alive{aspect-ratio:64.7/51.79}
.fly svg.fly__dead{aspect-ratio:95.23/90.45;--x-fill:transparent}
.fly__dead{display:none}
.fly.is-dead{mix-blend-mode:normal;color:var(--pink)}
.fly.is-dead .fly__alive{display:none}
.fly.is-dead .fly__dead{display:block;animation:flysplat .4s var(--ease-out) both}
@keyframes flysplat{0%{transform:scale(.5)}60%{transform:scale(1.5)}100%{transform:scale(1.15)}}
.fly__label{
  position:absolute;left:50%;top:-1.9em;
  transform:translateX(-50%) rotate(-8deg);
  font-weight:700;color:var(--pink);
  font-size:15px;letter-spacing:.05em;
  display:none;white-space:nowrap;
}
.fly.is-dead .fly__label{display:block;animation:popin2 .3s var(--ease-out) both}
@keyframes popin2{0%{opacity:0;transform:translateX(-50%) scale(.4) rotate(-8deg)}100%{opacity:1;transform:translateX(-50%) scale(1) rotate(-8deg)}}

/* ==========================================================================
   FLIEGENSCHWARM (Idle-Easteregg): Fliegen um den Zeiger + Klatschen-Cursor
   ========================================================================== */
.fly--swarm{z-index:71;pointer-events:auto}
body.swat-mode,
body.swat-mode *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Crect x='15.5' y='18' width='5' height='16' rx='2.5' fill='%23FAFAFA' stroke='%23202020' stroke-width='1.4'/%3E%3Crect x='7' y='1.5' width='22' height='19' rx='5' fill='%23D400AE' stroke='%23202020' stroke-width='1.6'/%3E%3Cpath d='M12 5v12M18 5v12M24 5v12M9 8.5h18M9 13.5h18' stroke='%23FAFAFA' stroke-width='1.5' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") 18 11, pointer;
}
.swat-ring{
  position:fixed;z-index:97;
  width:16px;height:16px;margin:-8px 0 0 -8px;
  border:3px solid var(--pink);border-radius:50%;
  pointer-events:none;
  animation:swatring .45s var(--ease-out) forwards;
}
@keyframes swatring{0%{transform:scale(.4);opacity:1}100%{transform:scale(3.4);opacity:0}}

/* ==========================================================================
   RESPONSIVE (Komponenten)
   ========================================================================== */
@media (max-width:1100px){
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .site-header{padding:16px 20px 0 20px}
  .logo img{width:84px}
  .hero{min-height:520px}
  .hero__title{padding-top:14vh;text-align:center;width:100%}
  .footer__grid{grid-template-columns:1fr;gap:34px}
  /* Platz für den fixen Chläber-Badge, damit er Social/Rechtliches nicht verdeckt */
  .footer__light{padding-bottom:130px}
  .footer__legal{justify-content:flex-start;gap:18px 28px;margin-top:40px;padding-left:0}
  .split-intro__img{position:relative;top:auto;right:auto;width:100%;margin:26px 0}
  .split-intro__text{margin-left:0}
  .automat__stage{flex-direction:column;gap:26px;overflow-y:auto;justify-content:flex-start;padding-top:84px}
  .automat__machine{width:min(280px,78vw)}
  .machine__dome{height:180px}
  .popup__close{top:-52px;right:0}
  .menu__footer{flex-direction:column;align-items:flex-start;gap:18px}
  .chlaeber-badge{width:84px}
}
@media (max-width:380px){
  /* lange E-Mail-Pills (passivtaetscher@…) dürfen nicht überlaufen */
  .footer .pill,.menu__footer .pill{font-size:13px;padding-inline:1em}
}