/* ==========================================================================
   COMPONENTS · Header, Menü, Hero, Split-Intro, Medien-Platz, Bereiche,
   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.ohne-uebergang,.menu.ohne-uebergang *{transition:none!important}
.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:var(--fw-titel);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{
  /* Box = Versalhöhe (Grundlinie bis Oberkante der Grossbuchstaben):
     der Pfeil sitzt darin mittig und damit optisch mittig zum Wort */
  display:inline-flex;align-items:center;
  width:0;height:.71em;overflow:hidden;vertical-align:baseline;
  transition:width .22s var(--ease-out);
}
.menu__arrow svg{flex:none;width:.42em;height:.62em;margin-right:.24em}
.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,
.menu__nav a:focus-visible .menu__arrow{width:.66em}

.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;pointer-events:none;
  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:.2em;margin-bottom:-.2em}
.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}

/* Freigestelltes Objekt rechts – gleiche Position wie die Fliege auf Home.
   Die Videos haben einen Grund von #1f1f1f, fast gleich wie --ink: das Video
   wird um 14vw nach rechts geschoben (Objektmitte bei 64vw), die linke Kante
   blendet weich aus, damit keine Naht sichtbar ist. */
.hero--cutout{background:var(--ink)}
/* das Objekt reicht (v. a. 821–1100 px) hinter den Titel: dezenter Schatten für Kontrast */
.hero--cutout .hero__title{text-shadow:0 2px 28px rgba(32,32,32,.6)}
.hero__cutout{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__cutout video,.hero__cutout img{
  position:absolute;top:0;left:14vw;
  width:100%;height:100%;max-width:none;
  object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%);
}
/* freigestelltes Bild (transparentes WebP) statt Video: kleiner, eingepasst */
.hero__cutout--bild img{
  left:auto;right:calc(36vw - min(23vw,340px));top:16%;
  width:min(46vw,680px);height:68%;
  object-fit:contain;-webkit-mask-image:none;mask-image:none;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.55));
}

/* Hintergrund-Videos ohne Bedienelemente des Browsers (iOS legt sonst z. B. im
   Stromsparmodus einen Play-Knopf über das Poster) */
video[data-autoplay]::-webkit-media-controls,
video[data-autoplay]::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}

/* 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)}}

/* ==========================================================================
   SCROLL-SEQUENZ (Home «Wir sind Tradition» / «Unser Haufen», Über uns,
   Fleiga werden, Gönner werden): Vollbild → gerahmt (Zoom-out), dann
   Titelzeilen und Text. Die Bewegung setzt nav.js pro Frame.
   ========================================================================== */
.scrolly{position:relative;height:320vh}
.scrolly--short{height:280vh}
.scrolly__sticky{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.scrolly__frame{
  position:absolute;inset:0;
  overflow:hidden;
  will-change:clip-path;
}
.scrolly__frame video,.scrolly__frame img{width:100%;height:100%;object-fit:cover}
.scrolly__shade{position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none}
.scrolly__title{
  position:absolute;z-index:3;
  left:var(--wrap-l);top:50%;transform:translateY(-50%);
  pointer-events:none;
}
.scrolly__title .line{display:block;overflow:hidden;padding-top:.2em;margin-bottom:-.2em}
.scrolly__title .line>span{display:inline-block;transform:translateY(115%)}
.scrolly__text{
  position:absolute;z-index:3;
  left:calc(var(--wrap-l) + var(--text-einzug));right:var(--wrap-r);
  top:56%;
  opacity:0;transform:translateY(60px);
  max-width:46em;
}
.scrolly__text .pill{margin-top:clamp(24px,2.6vw,50px)}
/* Tastaturfokus im Text: sichtbar machen, auch wenn nav.js noch ausgeblendet hat */
.scrolly__text:focus-within{opacity:1!important;transform:none!important;pointer-events:auto!important}
.scrolly:focus-within .scrolly__shade{opacity:.82!important}

/* ==========================================================================
   MEDIEN-PLATZ (data-medien, jeder Bildplatz): Video oder Bild.
   nav.js lässt das Video stehen, setzt die Adresse aus bloxs ein oder nimmt
   es heraus – dann steht das gebundene Bild dort. Das Video steht direkt vor
   dem Bild (gleiche Klasse). Im Editor: das Bild (zum Tauschen) und unten die
   Video-Adresse als Textfeld; data-medien="klein" (Karten, Listen, Collage,
   Popup): nur das Bild, das Video wählt man im Backend.
   ========================================================================== */
[data-medien] video~img,
.medien__feld{display:none}
html[data-modus="bearbeiten"] [data-medien]{pointer-events:auto}
html[data-modus="bearbeiten"] [data-medien] video{display:none}
html[data-modus="bearbeiten"] [data-medien] video~img{display:block}
html[data-modus="bearbeiten"] .medien__feld{
  display:block;position:absolute;z-index:6;
  left:var(--wrap-l);bottom:clamp(16px,2vw,32px);
  max-width:min(calc(100% - var(--wrap-l) - var(--wrap-r)),46em);
  padding:.6em .9em;border-radius:8px;
  background:rgba(32,32,32,.92);color:var(--paper);
  font-size:14px;font-weight:400;line-height:1.45;text-align:left;overflow-wrap:anywhere;
}
/* im Hero oben unter dem Kopf: unten liegt die Leiste des Editors */
html[data-modus="bearbeiten"] .hero .medien__feld{top:clamp(110px,9vw,150px);bottom:auto}
html[data-modus="bearbeiten"] .medien__feld::before{content:"Video statt Bild (im Backend hochladen oder Adresse einer .mp4, leer = Bild): ";color:var(--grey)}
html[data-modus="bearbeiten"] .medien__feld.ist-ungueltig::after{content:" – keine Videodatei (YouTube/Vimeo spielt hier nicht), es steht das Bild";color:var(--pink)}
html[data-modus="bearbeiten"] .medien__video{display:inline-block;min-width:6em}
html[data-modus="bearbeiten"] [data-medien="klein"] .medien__feld{display:none}

/* ==========================================================================
   BEREICHE (Aufbau der Seite unter dem Hero, nav.js bereiche()): die Liste
   selbst zeigt nichts, ihre neuen Bild-/Video-Bereiche stehen als Scroll-
   Sequenz im Fluss der Seite. Im Editor steht an ihrer Stelle, welche festen
   Bereiche die Seite hat; herausgenommene feste Bereiche sind blass.
   ========================================================================== */
.bereich .pill[href="#"],.bereich .pill:has(> span:empty){display:none}
html[data-modus="bearbeiten"] .bereiche{
  padding:clamp(20px,2vw,32px) var(--wrap-r) 0 var(--wrap-l);
  font-size:var(--fs-meta);line-height:1.5;color:var(--grey);
}
html[data-modus="bearbeiten"] .bereiche::before{content:"Aufbau dieser Seite: Reihenfolge, neue Bild-/Video-Bereiche und herausgenommene Bereiche im Backend unter «Bereiche» – oder hier mit «+ eintrag» und «einträge ordnen». Feste Bereiche: " attr(data-feste)}
html[data-modus="bearbeiten"] .bereiche[data-unbekannt]::after{content:" · Unbekannt (Namen prüfen): " attr(data-unbekannt);color:var(--pink)}
html[data-modus="bearbeiten"] [data-abschnitt].ist-entfernt>*{opacity:.4}
html[data-modus="bearbeiten"] [data-abschnitt].ist-entfernt::before{
  content:"Herausgenommen – fehlt in «Bereiche», auf der Seite ausgeblendet";
  display:block;position:relative;z-index:5;
  padding:14px var(--wrap-r) 14px var(--wrap-l);
  font-size:var(--fs-meta);color:var(--pink);
}

/* ==========================================================================
   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{
  /* schaut nur vom unteren Bildschirmrand heraus; Hover/Fokus zieht ihn hoch */
  position:fixed;left:clamp(14px,4vw,76px);bottom:0;
  z-index:55;
  width:clamp(84px,7.5vw,145px);
  transform:translateY(52%) rotate(-5deg);
  transform-origin:50% 100%;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.45));
  transition:transform .4s var(--ease-out);
}
.chlaeber-badge img{width:100%;height:auto;animation:badgepulse 6s ease-in-out infinite}
.chlaeber-badge:hover,.chlaeber-badge:focus-visible{transform:translateY(8%) rotate(-8deg)}
html.scrollt .chlaeber-badge:not(:focus-visible){transform:translateY(104%) rotate(-5deg)}
.chlaeber-badge:hover img,.chlaeber-badge:focus-visible img{animation-play-state:paused}
/* nach dem Automaten kommt der Fokus auf den Badge zurück: nach Tippen/Klicken
   bleibt er trotzdem in der Ruhelage und taucht beim Scrollen ab */
html[data-eingabe="zeiger"] .chlaeber-badge:focus-visible:not(:hover){transform:translateY(52%) rotate(-5deg)}
html[data-eingabe="zeiger"].scrollt .chlaeber-badge:focus-visible:not(:hover){transform:translateY(104%) rotate(-5deg)}
@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,.capsule video{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:focus-visible{outline-color:var(--paper);box-shadow:0 0 0 6px var(--ink)}
html[data-eingabe="zeiger"] .machine__knob:focus-visible{box-shadow:none}
.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,.drop-capsule video{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 [hidden]{display:none}
.automat__sticker-wrap img,.automat__sticker-wrap video{
  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,
.splat-ankunft .page-splat{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%}
  /* freigestellte Heros: Objekt oben, Titel darunter – auf allen Seiten
     gleich (Home-Plakette und Sujets ziehen in ihrem CSS nach) */
  .hero--cutout{align-items:flex-end;padding-bottom:20vh}
  .hero--cutout .hero__title{padding-top:0}
  .hero__cutout video,.hero__cutout>img{left:0;top:4%;height:62%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 80%,transparent 100%)}
  .hero__cutout--bild img{right:auto;left:50%;top:10%;width:min(70vw,320px);height:52%;transform:translateX(-50%)}
  .scrolly{height:260vh}
  .scrolly__text{left:var(--wrap-l);right:var(--wrap-r)}
  /* der Titel wandert beim Abdunkeln 26vh hoch – so bleibt er unter dem Logo frei */
  html:not([data-modus="bearbeiten"]):not(.ohne-bewegung) .scrolly__title{top:47%}
  html:not([data-modus="bearbeiten"]):not(.ohne-bewegung) .scrolly__text{top:51%}
  .footer__grid{grid-template-columns:1fr;gap:34px}
  /* Platz für den Chläber-Badge am unteren Rand */
  .footer__light{padding-bottom:96px}
  .footer__legal{justify-content:flex-start;gap:18px 28px;margin-top:40px;padding-left:0}
  .automat__stage{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:26px;overflow-y:auto;justify-content:flex-start;padding-top:84px;padding-bottom:40px}
  .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}
  /* Badge mobil kleiner; die Beschriftung «Chläber Automat» ist ganz zu sehen
     (Kundenwunsch). Beim Scrollen taucht er ab, verdeckt also nur in Ruhe etwas. */
  .chlaeber-badge{width:72px;transform:translateY(46%) rotate(-5deg)}
  .chlaeber-badge:hover,.chlaeber-badge:focus-visible{transform:translateY(12%) rotate(-8deg)}
  html[data-eingabe="zeiger"] .chlaeber-badge:focus-visible:not(:hover){transform:translateY(46%) rotate(-5deg)}
  /* Tippziele mindestens 44 px */
  .menu-btn,.menu-close{min-height:44px;padding-block:8px}
  .menu__nav a{min-height:44px;display:flex;align-items:center}
  .social a{min-width:44px;min-height:44px;display:inline-grid;place-items:center}
  .social{gap:4px}
  .pill{min-height:44px;display:inline-flex;align-items:center}
  /* Listen mobil symmetrisch: links und rechts derselbe Rand (Kundenwunsch Agenda) */
  .agenda__list,.faq,.members__grid,.benefits__grid{margin-right:0}
}
@media (max-width:380px){
  /* lange E-Mail-Pills (passivtaetscher@…) dürfen nicht überlaufen */
  .footer .pill,.menu__footer .pill{font-size:13px;padding-inline:1em}
}

/* ==========================================================================
   BLOXS: Bearbeiten (?edit) und Feedback (?feedback)
   Das Kopfskript setzt html[data-modus="bearbeiten"]. Dann darf nichts über
   Texten und Bildern liegen, und nichts Verstecktes bleibt versteckt.
   ========================================================================== */
html[data-modus="bearbeiten"] .chlaeber-badge,
html[data-modus="bearbeiten"] .fly,
html[data-modus="bearbeiten"] .popup,
html[data-modus="bearbeiten"] .page-splat{display:none!important}
html[data-modus="bearbeiten"] [data-reveal]{opacity:1;transform:none}
html[data-modus="bearbeiten"] .scrolly__title,html[data-modus="bearbeiten"] .hero__title{pointer-events:auto}
html[data-modus="bearbeiten"] .faq__a{grid-template-rows:1fr}
html[data-modus="bearbeiten"] .faq__q svg{transform:rotate(180deg)}
html[data-modus="bearbeiten"] .hero__title .line>span,
html[data-modus="bearbeiten"] .scrolly__title .line>span{transform:none!important}
/* Scroll-Sequenzen im Editor und bei «Bewegung reduzieren»: stehen still und
   zeigen Bild, Titel und Text untereinander (nav.js setzt html.ohne-bewegung) */
html[data-modus="bearbeiten"] .scrolly,html.ohne-bewegung .scrolly{height:auto}
html[data-modus="bearbeiten"] .scrolly__sticky,html.ohne-bewegung .scrolly__sticky{
  position:relative;height:auto;min-height:100vh;padding-block:12vh;
  flex-direction:column;align-items:stretch;justify-content:center;gap:4vh;
}
html[data-modus="bearbeiten"] .scrolly__frame,html.ohne-bewegung .scrolly__frame{clip-path:none!important}
html[data-modus="bearbeiten"] .scrolly__shade,html.ohne-bewegung .scrolly__shade{opacity:.7!important}
html[data-modus="bearbeiten"] .scrolly__title,html.ohne-bewegung .scrolly__title{position:relative;top:auto;left:auto;transform:none!important;align-self:flex-start;margin-left:var(--wrap-l)}
html[data-modus="bearbeiten"] .scrolly__text,html.ohne-bewegung .scrolly__text{position:relative;left:auto;right:auto;top:auto;opacity:1!important;transform:none!important;pointer-events:auto!important;margin-left:calc(var(--wrap-l) + var(--text-einzug));margin-right:var(--wrap-r)}
html.ohne-bewegung .scrolly__title .line>span{transform:none!important}

/* ohne JavaScript (oder bevor es läuft): alles sofort sichtbar */
html.kein-js [data-reveal]{opacity:1;transform:none}
html.kein-js .hero__title .line>span{transform:none}

/* Schnappschüsse für Crawler ohne JavaScript (werkzeug/vorrendern.mjs): bis
   cms.js sie ersetzt, unsichtbar mit Platz; ohne cms.js bleiben sie stehen */
html:not(.kein-js):not([data-geladen]):not([data-ohne-cms]) .vorgerendert{visibility:hidden}