/* ==========================================================================
   SUJETS · Sujet-Blöcke, Archiv-Strip, Lightbox
   (Hero: Fundament-Muster .hero--cutout in components.css)
   ========================================================================== */

/* Desktop: die Fliege beginnt rechts vom Titel (wie Über uns) */
@media (min-width:821px){
  #hero .hero__cutout video,#hero .hero__cutout>img{left:20vw}
}

/* ==========================================================================
   SUJET-BLÖCKE (Kundenwunsch: deutlich grösser, Bild fast randabfallend)
   ========================================================================== */
.sujet-block{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  gap:clamp(24px,2.4vw,48px);
  align-items:center;
  padding:clamp(60px,7vw,140px) clamp(12px,1.4vw,28px) clamp(60px,7vw,140px) var(--wrap-l);
}
/* Schrift an die Textspalte gebunden (cqi): FIMBULWINTER passt ganz hinein,
   längere Namen trennen bzw. brechen um statt ins Bild zu laufen */
.sujet-block__text{min-width:0;container-type:inline-size}
.sujet-block__head{display:flex;flex-direction:column}
.sujet-block__year{display:block;font-size:clamp(64px,36cqi,176px);line-height:.9}
.sujet-block__name{
  display:block;font-size:clamp(26px,12cqi,64px);line-height:1;margin:.22em 0 0;
  overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;
}
.sujet-block__name:empty{display:none}
.sujet-block__lieder{display:flex;flex-direction:column;gap:clamp(16px,1.7vw,32px);margin-top:clamp(26px,2.8vw,54px)}
.sujet-block__gruppe:not(:has(dd)){display:none}
.sujet-block dt{font-size:var(--fs-meta);font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.45em}
.sujet-block dd{font-size:clamp(15px,1.2vw,23px);font-weight:400;line-height:1.35}
.sujet-block dd b{font-weight:700}
.sujet-block dd span{color:var(--grey)}
.sujet-block__verkauf{display:flex;flex-direction:column;align-items:flex-start;gap:.6em;margin-top:clamp(26px,2.8vw,54px)}
.sujet-block__verkauf[hidden],.sujet-block__verkauf [hidden]{display:none}
.sujet-block__verkauf-label{font-size:var(--fs-meta);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pink)}
.sujet-block__verkauf-titel{font-size:clamp(18px,1.5vw,28px);font-weight:var(--fw-titel);line-height:1.15;text-transform:uppercase}
.sujet-block__verkauf-text{font-size:clamp(15px,1.2vw,23px);line-height:1.35;max-width:38em}
.sujet-block__verkauf-knopf{margin-top:.5em;background:var(--pink);border-color:var(--pink);color:var(--paper)}
.sujet-block__verkauf-knopf:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.sujet-block__img{overflow:hidden}
.sujet-block__img img,.sujet-block__img video{display:block;width:100%;height:auto;transition:transform .7s var(--ease-out)}
@media (hover:hover){
  .sujet-block__img:hover img,.sujet-block__img:hover video{transform:scale(1.04)}
}

/* ==========================================================================
   ARCHIV
   ========================================================================== */
.archive{padding:clamp(70px,8vw,150px) 0 clamp(90px,10vw,190px)}
.archive .h2{margin-bottom:clamp(10px,1.2vw,22px)}
.archive__hint{margin-bottom:clamp(30px,3.4vw,64px);color:var(--grey)}
.archive__strip{
  display:flex;gap:clamp(16px,2vw,38px);
  overflow-x:auto;
  padding:10px var(--wrap-r) 26px var(--wrap-l);
  scrollbar-width:none;
  cursor:grab;
  scroll-behavior:auto;
}
.archive__strip::-webkit-scrollbar{display:none}
.archive__strip.is-dragging{cursor:grabbing;scroll-snap-type:none}
.archive__strip.is-dragging .acard{pointer-events:none}
.acard{
  display:block;flex:0 0 clamp(230px,22vw,400px);
  padding:0;text-align:left;cursor:inherit;
  user-select:none;-webkit-user-select:none;
}
.acard img,.acard video{
  display:block;width:100%;aspect-ratio:16/11;object-fit:cover;
  filter:grayscale(1);
  transition:filter .4s ease, transform .4s var(--ease-out);
  pointer-events:none;-webkit-user-drag:none;
}
.acard:hover img,.acard:focus-visible img,.acard:hover video,.acard:focus-visible video{filter:grayscale(0);transform:scale(1.03)}
/* nach der Lightbox kommt der Fokus auf die Karte zurück – nach Tippen ohne Hervorhebung */
html[data-eingabe="zeiger"] .acard:focus-visible:not(:hover) img,
html[data-eingabe="zeiger"] .acard:focus-visible:not(:hover) video{filter:grayscale(1);transform:none}
.acard__year{display:block;font-weight:700;font-size:clamp(26px,2.4vw,46px);margin-top:.5em;line-height:1}
.acard__title{display:block;font-size:var(--fs-meta);color:var(--grey);text-transform:uppercase;font-weight:700;margin-top:.35em}
.acard__title:empty{display:none}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox{position:fixed;inset:0;z-index:88;display:none}
.lightbox.is-open{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,40px);padding:70px clamp(12px,4vw,80px) 40px;animation:lbIn .3s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lightbox__backdrop{
  position:absolute;inset:0;
  background:rgba(24,24,24,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.lightbox__figure{position:relative;z-index:2;max-width:min(1100px,82vw);text-align:left}
.lightbox__figure img,.lightbox__figure video{max-height:72vh;width:auto;max-width:100%;margin:0 auto}
/* Bild oder Video (sujets.js zeigen) */
.lightbox__figure [hidden]{display:none}
.lightbox__figure figcaption{display:flex;gap:18px;align-items:baseline;margin-top:16px}
.lightbox__figure #lbYear{font-weight:700;font-size:clamp(26px,2.6vw,50px)}
.lightbox__figure #lbTitle{font-weight:700;text-transform:uppercase;color:var(--grey);font-size:var(--fs-meta)}
.lightbox__nav{position:relative;z-index:2;width:clamp(38px,3.4vw,62px);height:clamp(38px,3.4vw,62px);color:var(--paper);flex:none;transition:transform .25s var(--ease-out),color .2s}
.lightbox__nav:hover{color:var(--pink)}
.lightbox__nav--prev{transform:rotate(90deg)}
.lightbox__nav--prev:hover{transform:rotate(90deg) scale(1.15)}
.lightbox__nav--next{transform:rotate(-90deg)}
.lightbox__nav--next:hover{transform:rotate(-90deg) scale(1.15)}
.lightbox__nav svg{width:100%;height:100%}

@media (prefers-reduced-motion:reduce){
  .sujet-block__img img,.acard img,.sujet-block__img video,.acard video{transition:none}
  .sujet-block__img:hover img,.acard:hover img,.acard:focus-visible img,
  .sujet-block__img:hover video,.acard:hover video,.acard:focus-visible video{transform:none}
  .lightbox.is-open{animation:none}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .sujet-block{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
}
@media (max-width:820px){
  /* Jahr + Name, dann Bild randabfallend, dann die Lieder */
  .sujet-block{grid-template-columns:minmax(0,1fr);gap:0;padding:clamp(48px,12vw,72px) var(--wrap-r) clamp(48px,12vw,72px) var(--wrap-l)}
  .sujet-block__text{display:contents}
  .sujet-block__head{order:1}
  .sujet-block__img{order:2;margin:26px calc(-1 * var(--wrap-r)) 0 calc(-1 * var(--wrap-l))}
  .sujet-block__lieder{order:3;margin-top:28px}
  .sujet-block__verkauf{order:4;margin-top:28px}
  .sujet-block__year{font-size:clamp(64px,21vw,104px)}
  .sujet-block__name{font-size:clamp(26px,7.8vw,42px)}
  .sujet-block dd{font-size:16px}

  .archive__strip{scroll-snap-type:x mandatory;scroll-padding-left:var(--wrap-l);cursor:auto}
  .acard{flex-basis:min(68vw,300px);scroll-snap-align:start}

  .lightbox.is-open{flex-direction:column;gap:0;padding:84px 16px 110px}
  .lightbox__figure{max-width:100%}
  .lightbox__figure img,.lightbox__figure video{max-height:62vh}
  .lightbox__nav{position:absolute;bottom:34px;width:48px;height:48px}
  .lightbox__nav--prev{left:calc(50% - 72px)}
  .lightbox__nav--next{right:calc(50% - 72px)}
}