/* ==========================================================================
   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 samt Kordeln erst zeigen, wenn das Bild da ist und home.js die
   Kordeln daran ausgerichtet hat (vorher stünden sie in der CSS-Grundstellung
   falsch bzw. hinge ein halb geladenes Bild) – dann weich einblenden */
.plakette__pendel>img{transition:opacity .6s ease}
html:not(.kein-js) .plakette:not(.is-bereit) .plakette__pendel>img{opacity:0}
.plakette__fleiga{
  position:absolute;top:41.5vh;left:50%;
  width:clamp(230px,23.5vw,460px);max-width:none;height:auto;
  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-select:none;-webkit-user-drag:none;
  -webkit-touch-callout:none;
  will-change:transform;
  touch-action:none;
}
.plakette__fleiga.is-grab{cursor:grabbing}
/* Desktop: der Titel (Black, ab --wrap-l) darf nicht auf dem silbernen Flügel
   liegen (weiss auf hellgrau). Die Plakette rückt darum so weit nach rechts,
   dass der sichtbare Flügel auf Höhe jeder Titelzeile erst nach ihr beginnt.
   home.js misst --titel-rechts (je Zeile rechter Rand minus Flügeleinzug auf
   ihrer Höhe, das Maximum); ohne JS gilt die Schätzung für «FASNACHT»
   (≈5.5em). Luft 12px + 1.5vw deckt das sanfte Grundschaukeln ab. */
@media (min-width:821px){
  .hero--plakette{
    --fleiga-w:clamp(230px,23.5vw,460px);
    --titel-rechts:calc(var(--wrap-l) + 5.5 * var(--fs-display));
  }
  .plakette__pendel{
    left:clamp(64%,
      calc(var(--titel-rechts) + 12px + 1.5vw + .5 * var(--fleiga-w)),
      calc(100% - var(--wrap-r) - .5 * var(--fleiga-w)));
  }
}
/* der Titel liegt über der Plakette – Zeiger gehen durch ihn hindurch
   (im Editor/Feedback bleibt er anklickbar) */
html:not([data-modus="bearbeiten"]) .hero--plakette .hero__title{pointer-events:none}

/* ==========================================================================
   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__list:not(:has(.agenda__item)){border-bottom:0}
.agenda__item{border-top:2px solid var(--paper);scroll-margin-top:120px}
.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__date>span:first-child{display:block}
.agenda__year{display:block;font-weight:400;font-size:var(--fs-meta);margin-top:.4em;letter-spacing:.02em}
.agenda__year:empty,.agenda__loc:empty{display:none}
.agenda__what .h3{display:block;margin-bottom:.35em;overflow-wrap:break-word;hyphens:manual}
.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);
}
/* zugeklappt: Inhalt auch für Tastatur und Screenreader weg */
.agenda__body>div{overflow:hidden;visibility:hidden;transition:visibility 0s .5s}
.agenda__item.is-open .agenda__body{grid-template-rows:1fr}
.agenda__item.is-open .agenda__body>div{visibility:visible;transition-delay:0s}
.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:empty{display:none}
.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}
/* Einträge «weitere» erst nach Klick auf «Weitere Events» (vergangene bleiben weg) */
.agenda__item.ist-spaeter{display:none}
.agenda__more{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:clamp(28px,3vw,56px) auto 0;
  color:var(--paper);
}
.agenda__more[hidden]{display:none}
.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__more-aus,.agenda__more.is-open .agenda__more-an{display:none}
.agenda__more.is-open .agenda__more-aus{display:inline}

/* ==========================================================================
   COLLAGE «Mitglied werden?»
   Der Text steht in derselben Spalte und Breite wie alle Fliesstexte. Die
   Fotos hängen am Textblock: A darüber, B links daneben, C und D darunter.
   Der Abstand («Luft») rechnet die Parallax-Verschiebung ein: nav.js macht
   aus data-speed s wirksam k = s/(1+s); gegenüber dem Text verschiebt sich
   ein Foto höchstens um k/(2(1-k)) · (Fensterhöhe + Fotohöhe). So läuft nie
   ein Foto hinter dem Text durch – auch nicht ohne Parallax (Editor,
   reduzierte Bewegung), da stehen sie einfach mit Abstand.
   ========================================================================== */
.collage{
  --spalte:calc(var(--wrap-l) + var(--text-einzug));
  --luft:24px;
  --titel-abstand:clamp(120px,14vw,270px);
  --fuss:clamp(60px,8vw,150px);
  /* Fotos: Breite, Höhe und Parallax-Faktor k/(2(1-k)) zu ihrem data-speed */
  --a-w:18vw; --a-h:calc(var(--a-w) * 1.25); --a-f:.121;  /* 0.24 */
  --b-w:22vw; --b-h:var(--b-w);              --b-f:.19;   /* 0.38 */
  --c-w:28vw; --c-h:calc(var(--c-w) * .667); --c-f:.08;   /* 0.16 */
  --d-w:17vw; --d-h:calc(var(--d-w) * 1.25); --d-f:.15;   /* 0.30 */
  --a-luft:calc(var(--a-f) * (100vh + var(--a-h)) + var(--luft));
  --b-luft:calc(var(--b-f) * (100vh + var(--b-h)) + var(--luft));
  --c-luft:calc(var(--c-f) * (100vh + var(--c-h)) + var(--luft));
  --d-luft:calc(var(--d-f) * (100vh + var(--d-h)) + var(--luft));
  position:relative;
  padding-top:clamp(90px,11vw,210px);
  overflow:clip;
}
.collage .h2{position:relative;z-index:3;max-width:8em;box-sizing:content-box}
.collage__text{
  position:relative;z-index:2;
  margin-left:var(--spalte);margin-right:var(--wrap-r);
  /* gleiche Breite wie jeder Fliesstext: 34em in Fliesstextgrösse, höchstens
     46rem wie .scrolly__text (greift ab ≈1500px) */
  font-size:var(--fs-body);max-width:min(34em, 46rem);
  margin-top:var(--titel-abstand);
  /* Platz für C und D darunter (D liegt tiefer) */
  padding-bottom:calc(var(--d-luft) + var(--d-h) + var(--fuss));
}
.collage__text>.body-copy,.collage__text>.pill{position:relative;z-index:1}
.collage__text .pill{margin-top:clamp(26px,3vw,56px)}
.collage__imgs{
  position:absolute;left:0;right:0;top:0;
  /* genau der Textblock (ohne den Platz darunter) */
  bottom:calc(var(--d-luft) + var(--d-h) + var(--fuss));
  z-index:0;pointer-events:none;
}
/* je Foto ein Medien-Platz: die Hülle zählt fürs Layout nicht, ein Video
   trägt die Klasse des Bildes (collage__img-a …) */
.collage__medien{display:contents}
.collage__imgs img,.collage__imgs video{position:absolute;object-fit:cover;max-width:none;will-change:transform}
/* A: über dem Text, rechts */
.collage__img-a{
  width:var(--a-w);height:var(--a-h);
  left:calc(62vw - var(--spalte));
  bottom:calc(100% + var(--a-luft));
}
/* B: links neben dem Text, ausserhalb der Textspalte; Abstand zum Titel
   (+40px: der Titel fährt beim Einblenden [data-reveal] von unten ein) */
.collage__img-b{
  width:var(--b-w);height:var(--b-h);
  right:calc(100% + 4vw);
  top:max(3vw, calc(var(--b-luft) - var(--titel-abstand) + 40px));
}
/* C: unter dem Text, rechts */
.collage__img-c{
  width:var(--c-w);height:var(--c-h);
  left:calc(54vw - var(--spalte));
  top:calc(100% + var(--c-luft));
}
/* D: unter dem Text, links und tiefer */
.collage__img-d{
  width:var(--d-w);height:var(--d-h);
  left:calc(22vw - var(--spalte));
  top:calc(100% + var(--d-luft));
}

/* ==========================================================================
   BEARBEITEN (?edit / ?feedback): Plakette nicht ziehbar, Agenda offen, Fotos
   anklickbar (tauschbar)
   ========================================================================== */
html[data-modus="bearbeiten"] .plakette__fleiga{cursor:default;touch-action:auto}
html[data-modus="bearbeiten"] .agenda__body{grid-template-rows:1fr}
html[data-modus="bearbeiten"] .agenda__body>div{visibility:visible}
html[data-modus="bearbeiten"] .agenda__item.ist-spaeter{display:block}
html[data-modus="bearbeiten"] .agenda__more .agenda__more-aus{display:inline}
html[data-modus="bearbeiten"] .agenda__more .agenda__more-an{display:inline}
/* «sichtbar bis» (Feld nur fürs Backend, Datums-Wähler): im Editor unter dem Datum */
html[data-modus="bearbeiten"] .agenda__date[data-bis]::after{
  content:"sichtbar bis " attr(data-bis);
  display:block;margin-top:.6em;
  font-size:var(--fs-meta);font-weight:400;letter-spacing:0;text-transform:none;color:var(--grey);
}
/* vergangene Termine: auf der Seite ausgeblendet (home.js), im Editor abgeblendet */
html[data-modus="bearbeiten"] .agenda__item.ist-vorbei{opacity:.5}
html[data-modus="bearbeiten"] .agenda__item.ist-vorbei .agenda__what::after{
  content:"Vorbei – auf der Seite ausgeblendet";
  display:block;margin-top:.6em;font-size:var(--fs-meta);color:var(--pink);
}
html[data-modus="bearbeiten"] .collage__imgs img{pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  .plakette__fleiga{cursor:default}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:820px){
  /* wie die freigestellten Heros: Plakette oben, Titel darunter; der
     Schatten bleibt fürs Schaukeln über den Titel */
  .hero--plakette{align-items:flex-end;padding-bottom:20vh}
  .hero--plakette .hero__title{padding-top:0;text-shadow:0 2px 26px rgba(32,32,32,.85),0 0 3px rgba(32,32,32,.55)}
  .plakette__pendel{left:50%;top:-20vh}
  .plakette__fleiga{top:33vh;width:min(56vw,250px,27vh);touch-action:pan-y}
  .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__body-grid>span:first-child{display:none}
  .agenda__cta{grid-column:1;grid-row:2}
  .agenda__prog{grid-row:1}
  /* symmetrisch: links und rechts derselbe Rand (Kundenwunsch) */
  .agenda__list{margin-right:0}

  /* Collage mobil: alle vier Fotos mit Parallax, zwei über und zwei unter
     dem Text (volle Spaltenbreite – daneben ist kein Platz) */
  .collage{
    padding-top:clamp(70px,18vw,120px);
    /* A steht rechts neben dem Titel: nur so breit, wie neben «MITGLIED»
       (≈5.15em) Platz ist */
    --a-w:min(40vw, calc(100vw - var(--wrap-l) - var(--wrap-r) - 5.4 * var(--fs-h2) - 12px));
    --b-w:44vw; --c-w:50vw; --d-w:42vw;
    --b-versatz:16vw;
    --fuss:48px;
  }
  /* über dem Text: C links (näher, langsamste), A rechts (höher) */
  .collage__text{
    margin-right:var(--wrap-r);max-width:none;
    --titel-abstand:calc(var(--c-luft) * 2 + var(--c-h) + 40px);
    padding-bottom:calc(var(--b-luft) + var(--b-versatz) + var(--b-h) + var(--fuss));
  }
  .collage__imgs{bottom:calc(var(--b-luft) + var(--b-versatz) + var(--b-h) + var(--fuss))}
  .collage__img-c{left:0;top:auto;bottom:calc(100% + var(--c-luft))}
  .collage__img-a{left:auto;right:0;bottom:calc(100% + var(--a-luft))}
  /* unter dem Text: D links, B rechts und tiefer */
  .collage__img-d{left:0;top:calc(100% + var(--d-luft))}
  .collage__img-b{right:0;top:calc(100% + var(--b-luft) + var(--b-versatz))}
}