/* ==========================================================================
   HOME · Pendel-Plakette, Scroll-Sequenzen, Agenda, Collage
   ========================================================================== */

/* Pendel-Plakette (Home-Hero) */
.hero--plakette{
  background:radial-gradient(100vh 100vh at 64% 24%, #2b2b2b 0%, var(--ink) 62%);
}
.plakette{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.plakette__pendel{
  position:absolute;left:64%;top:-26vh;
  width:2px;height:150vh;
  transform-origin:50% 0;
  will-change:transform;
}
.plakette__strang{
  position:absolute;top:0;left:50%;
  width:clamp(22px,2vw,38px);height:35vh;max-width:none;
  object-fit:cover;
  transform-origin:50% 0;
}
.plakette__strang--l{transform:translateX(calc(-50% - 6.5vw)) rotate(17deg)}
.plakette__strang--r{transform:translateX(calc(-50% + 6.5vw)) rotate(-17deg)}
.plakette__fleiga{
  position:absolute;top:41.5vh;left:50%;
  width:clamp(230px,23.5vw,460px);max-width:none;
  transform:translateX(-50%);
  transform-origin:50% 10%;
  pointer-events:auto;cursor:grab;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.55));
  user-select:none;-webkit-user-drag:none;
  will-change:transform;
  touch-action:none;
}
.plakette__fleiga.is-grab{cursor:grabbing}

/* ==========================================================================
   SCROLLY (Mood / Haufen)
   ========================================================================== */
.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:transform, width, height;
}
.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%);
}
.scrolly__title .line{display:block;overflow:hidden;padding-top:.12em;margin-bottom:-.12em}
.scrolly__title .line>span{display:inline-block;transform:translateY(115%)}
.scrolly__text{
  position:absolute;z-index:3;
  left:calc(var(--wrap-l) + 18vw);right:var(--wrap-r);
  top:56%;
  opacity:0;transform:translateY(60px);
  max-width:46em;
}
.scrolly__text .pill{margin-top:clamp(24px,2.6vw,50px)}

/* ==========================================================================
   AGENDA
   ========================================================================== */
.agenda{padding-block:clamp(80px,10vw,190px) clamp(70px,8vw,150px)}
.agenda .h2{margin-bottom:clamp(40px,4.5vw,86px)}
.agenda__list{border-bottom:2px solid var(--paper);margin-right:var(--wrap-r)}
.agenda__item{border-top:2px solid var(--paper)}
.agenda__head{
  display:grid;
  grid-template-columns:minmax(150px,19vw) 1fr auto;
  gap:clamp(16px,2.5vw,48px);
  align-items:start;
  width:100%;text-align:left;
  padding:clamp(22px,2.6vw,50px) 0 clamp(22px,2.6vw,50px);
}
.agenda__date{font-weight:700;font-size:clamp(38px,4.6vw,88px);line-height:.9;text-transform:uppercase}
.agenda__year{display:block;font-weight:400;font-size:var(--fs-meta);margin-top:.4em;letter-spacing:.02em}
.agenda__what .h3{display:block;margin-bottom:.35em}
.agenda__loc{display:block;font-size:var(--fs-meta);font-weight:400}
.agenda__chev{
  align-self:start;
  width:clamp(26px,1.9vw,36px);height:clamp(26px,1.9vw,36px);
  color:var(--paper);
  transition:transform .4s var(--ease-out);
  margin-top:.4em;
}
.agenda__item.is-open .agenda__chev{transform:rotate(180deg)}
.agenda__body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease-out);
}
.agenda__body>div{overflow:hidden}
.agenda__item.is-open .agenda__body{grid-template-rows:1fr}
.agenda__body-grid{
  display:grid;
  grid-template-columns:minmax(150px,19vw) 1fr minmax(30%,38%);
  gap:clamp(16px,2.5vw,48px);
  padding-bottom:clamp(26px,3vw,56px);
}
.agenda__cta{grid-column:2}
.agenda__prog{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,26px)}
.agenda__prog-item{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.agenda__prog-item svg{width:clamp(18px,1.3vw,24px);height:clamp(18px,1.3vw,24px);margin-top:.15em}
.agenda__prog-item .meta{display:block}
.agenda__more{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:clamp(28px,3vw,56px) auto 0;
  color:var(--paper);
}
.agenda__more svg{width:24px;height:24px;transition:transform .4s var(--ease-out)}
.agenda__more.is-open svg{transform:rotate(180deg)}
.agenda__more span{font-size:var(--fs-meta)}
.agenda__item.is-extra{display:none}
.agenda__list.show-extra .agenda__item.is-extra{display:block}

/* ==========================================================================
   COLLAGE (Mitglied werden Teaser)
   ========================================================================== */
.collage{position:relative;padding:clamp(90px,11vw,210px) 0 clamp(90px,10vw,190px);overflow:clip}
.collage .h2{position:relative;z-index:3;max-width:8em}
.collage__imgs{position:absolute;inset:0;z-index:1;pointer-events:none}
.collage__imgs img{
  position:absolute;object-fit:cover;aspect-ratio:1/1;
  will-change:transform;
}
.collage__img-a{width:clamp(140px,23vw,440px);right:calc(var(--wrap-r) + 2vw);top:4%}
.collage__img-b{width:clamp(130px,23vw,440px);left:calc(var(--wrap-l) - 1vw);top:44%}
.collage__img-c{width:clamp(170px,30vw,580px);left:46%;top:30%}
.collage__img-d{width:clamp(150px,29vw,570px);left:34%;top:82%}
.collage__text{
  position:relative;z-index:3;
  margin:clamp(280px,30vw,560px) 0 0 clamp(0px,19vw,380px);
  max-width:44em;
  text-shadow:0 2px 24px rgba(32,32,32,.65);
}
.collage__text .pill{margin-top:clamp(26px,3vw,56px);text-shadow:none}
.collage__spacer{height:clamp(120px,16vw,320px)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:820px){
  .plakette__pendel{left:50%;top:-20vh}
  .plakette__fleiga{top:34vh;width:min(64vw,300px)}
  .scrolly{height:260vh}
  .scrolly__text{left:var(--wrap-l);right:var(--wrap-r);top:48%}
  .scrolly__title{top:42%}
  .agenda__head{grid-template-columns:1fr auto;grid-template-rows:auto auto}
  .agenda__date{grid-column:1;font-size:44px}
  .agenda__what{grid-column:1;grid-row:2}
  .agenda__chev{grid-column:2;grid-row:1}
  .agenda__body-grid{grid-template-columns:1fr;gap:18px}
  .agenda__cta{grid-column:1}
  .collage__text{margin-left:0;margin-top:66vw}
  .collage__img-a{width:46vw;right:var(--wrap-r);top:5%}
  .collage__img-b{width:44vw;left:var(--wrap-l);top:16%}
  .collage__img-c{display:none}
  .collage__img-d{display:none}
}