/* ==========================================================================
   70 JAHRE · Jubiläums-Hero, Save the Date, Countdown, Beiträge, Hinweis
   ========================================================================== */

/* ---------- Hero: Video + schaukelndes Jubiläumslogo ---------- */
.hero--jubi .hero__media{pointer-events:none}
.hero--jubi .hero__media::after{background:rgba(32,32,32,.25)}
.hero__jubititel{position:relative;z-index:2;margin:0 auto;font-size:inherit;line-height:0}
.hero__jubilogo{
  width:clamp(230px,30vw,560px);
  transform-origin:50% -180%;
  animation:sway 5.5s ease-in-out infinite;
}
@keyframes sway{0%,100%{transform:rotate(2.2deg)}50%{transform:rotate(-2.2deg)}}

/* ---------- Save the Date + Countdown ---------- */
.savethedate{padding-block:clamp(90px,11vw,210px) clamp(40px,5vw,90px)}
.savethedate__wow{
  color:var(--pink);
  font-size:clamp(52px,8.6vw,165px);
  transform:rotate(-4deg) skewX(-6deg);
  transform-origin:left bottom;
  width:max-content;max-width:100%;
}
.savethedate .h2{font-size:clamp(28px,3.4vw,66px);margin-top:clamp(20px,2.4vw,46px)}
.countdown{
  display:flex;gap:clamp(18px,3.5vw,70px);
  margin-top:clamp(40px,4.5vw,86px);
  flex-wrap:wrap;
}
.countdown__cell{min-width:clamp(64px,7vw,140px)}
.countdown__num{font-weight:700;font-size:clamp(40px,4.8vw,92px);line-height:1;font-variant-numeric:tabular-nums}
.countdown__lbl{font-size:var(--fs-meta);margin-top:.5em;text-transform:uppercase;letter-spacing:.05em;color:var(--grey)}

/* Ziel des Countdowns: Quelle für jubi.js, nur im Bearbeitungsmodus sichtbar */
.countdown__ziel{display:none}
html[data-modus="bearbeiten"] .countdown__ziel{display:block;margin-top:clamp(18px,2vw,36px);color:var(--grey)}
html[data-modus="bearbeiten"] .countdown__ziel::before{content:"Countdown läuft bis: "}
html[data-modus="bearbeiten"] .countdown__ziel.ist-ungueltig::after{content:" – Datum nicht lesbar (Beispiel: 27.01.2028 19:00)";color:var(--pink)}

/* ---------- Beiträge (Sammlung jubi-beitraege) ----------
   Bild und Text im Wechsel links/rechts; ohne Bild steht der Text in der
   Fliesstext-Spalte. Leere Sammlung = keine Sektion (ausser im Editor,
   dort hängt bloxs den «+ eintrag»-Knopf an die Liste). Eine Videodatei im
   Feld «videolink» spielt jubi.js im Bildplatz ab (.hat-film), jeder andere
   Link wird zum Knopf «Video ansehen». */
.beitraege{padding-block:clamp(40px,5vw,90px)}
.beitraege:not(:has(.beitrag)),
.beitraege.ist-leer{display:none}
html[data-modus="bearbeiten"] .beitraege{display:block}
html[data-modus="bearbeiten"] .beitraege__liste:not(:has(.beitrag)){min-height:clamp(60px,6vw,110px)}
.beitraege__liste{display:flex;flex-direction:column;gap:clamp(60px,7vw,130px)}

.beitrag{
  display:grid;
  grid-template-columns:minmax(320px,44%) 1fr;
  gap:clamp(20px,3vw,60px);
  align-items:center;
  padding-left:var(--wrap-l);padding-right:var(--wrap-r);
}
.beitrag:nth-of-type(even){grid-template-columns:1fr minmax(320px,44%)}
.beitrag:nth-of-type(even) .beitrag__bild{order:2}
.beitrag__bild{overflow:hidden}
.beitrag__bild img,.beitrag__bild video{width:100%;height:auto;max-height:min(72vh,760px);object-fit:cover}
.beitrag__bild img{transition:transform .7s var(--ease-out)}
.beitrag__bild:hover img{transform:scale(1.04)}
.beitrag__bild video{background:#000}
.beitrag__bild>video~img{display:none}
.beitrag__titel{
  font-size:clamp(28px,3.4vw,66px);
  font-weight:var(--fw-titel);
  text-transform:uppercase;
  line-height:.95;
  max-width:12em;
  overflow-wrap:break-word;hyphens:auto; /* lange Komposita aus dem Hub */
}
.beitrag__text{min-width:0}
.beitrag__lauftext{margin-top:clamp(14px,1.6vw,30px);overflow-wrap:break-word}
.beitrag__titel:empty,
.beitrag__lauftext:empty{display:none}
.beitrag__titel:empty + .beitrag__lauftext{margin-top:0}
/* Video-Knopf nur mit Link (ohne Wert bleibt href="#") und nur, wenn das Video nicht schon im Bildplatz läuft */
.beitrag__video{margin-top:clamp(18px,2vw,36px)}
.beitrag__video[href="#"],.beitrag.hat-film .beitrag__video{display:none}

/* ohne Bild und ohne Video: nur Text, in der Fliesstext-Spalte */
.beitrag:not(.hat-film):has(img:not([src])){display:block;padding-left:calc(var(--wrap-l) + var(--text-einzug))}
.beitrag:not(.hat-film) .beitrag__bild:has(img:not([src])){display:none}
@media (prefers-reduced-motion:reduce){
  .beitrag__bild:hover img{transform:none}
}

/* ---------- Hinweis ---------- */
.jubi-note{padding-block:clamp(40px,5vw,90px) clamp(80px,10vw,190px)}
.jubi-note .h2{font-size:clamp(26px,2.9vw,56px);max-width:14em}
.jubi-note:has(.h2:empty){padding-block:0 clamp(40px,5vw,90px)}
html[data-modus="bearbeiten"] .jubi-note .h2:empty{min-height:1em;min-width:6em}

/* ---------- Bearbeiten / Bewegung ---------- */
html[data-modus="bearbeiten"] .hero__jubilogo{animation:none}
@media (prefers-reduced-motion:reduce){
  .hero__jubilogo{animation:none}
}

/* ---------- Mobil ---------- */
@media (max-width:820px){
  .beitraege__liste{gap:56px}
  .beitrag,
  .beitrag:nth-of-type(even){grid-template-columns:1fr;gap:22px}
  .beitrag:nth-of-type(even) .beitrag__bild{order:0}
  .beitrag__titel{font-size:clamp(26px,7.4vw,40px)}
}
@media (max-width:380px){
  /* vier Zellen auf einer Zeile */
  .countdown{flex-wrap:nowrap;gap:14px}
  .countdown__cell{min-width:0}
  .countdown__num{font-size:36px}
  .countdown__lbl{font-size:12px;letter-spacing:.02em}
}