/* ==========================================================================
   Reels-Karussell — 3D-Bühne für Daniels 9:16-Clips
   --------------------------------------------------------------------------
   Grundzustand (ohne JavaScript): eine normale Wischleiste mit Vorschaubild
   und Bildunterschrift je Clip. Nichts ist versteckt.
   reels.js setzt danach .is-3d (Drehbühne) oder .is-flat (Wischleiste mit
   Bedienleiste, bei "Bewegung reduzieren"). Beide Modi haben exakt dieselbe
   Höhe wie der Grundzustand — es springt nichts.
   Alle Klassen beginnen mit .reels, damit nichts mit style.css kollidiert.
   ========================================================================== */


.reels{
  --reels-blue:#7bd6ff;
  --reels-pink:#ff7ac5;
  --reels-text:#fdfdff;
  --reels-muted:#d2d5fa;
  --reels-card-bg:#0b0e22;
  --reels-radius:18px;
  --reels-bar:56px;

  position:relative;
  container-type:inline-size;
  color:var(--reels-text);
  font-family:"Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-tap-highlight-color:transparent;
}
/* bis an die Kante der umgebenden .section-inner (deren Innenabstand ist --gutter) */
.reels--bleed{ margin-inline:calc(var(--gutter, 0px) * -1); }

/* ---------- Bühne / Leiste ---------------------------------------------- */

.reels__viewport{
  /* Kartenbreite: 62 % der Bauteilbreite, aber nie höher als ~71 % der
     kleinen Fensterhöhe (svh ändert sich nicht beim Scrollen -> kein Springen) */
  --reels-w:clamp(180px, 56vw, 320px);
  --reels-h:calc(var(--reels-w) * 16 / 9);
  --reels-top:16px;

  position:relative;
  height:calc(var(--reels-h) * 1.17 + var(--reels-top) + 12px);
}
@supports (width:1cqw) and (height:1svh){
  .reels__viewport{ --reels-w:clamp(180px, min(62cqw, 40svh), 330px); }
}

.reels__list{
  list-style:none;
  margin:0;
  height:100%;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:var(--reels-top) max(var(--gutter, 16px), calc(50% - var(--reels-w) / 2)) 0;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.reels__list::-webkit-scrollbar{ display:none; }

.reels__item{
  flex:0 0 var(--reels-w);
  width:var(--reels-w);
  margin:0;
  padding:0;
  scroll-snap-align:center;
}

/* ---------- Karte -------------------------------------------------------- */

.reels__card{
  position:relative;
  margin:0;
  width:100%;
  aspect-ratio:9 / 16;
  border-radius:var(--reels-radius);
  overflow:hidden;
  isolation:isolate;
  background:var(--reels-card-bg);
}
.reels__card img,
.reels__card video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border:0;
  border-radius:var(--reels-radius);
}
.reels__card video{
  z-index:1;
  opacity:0;
  transition:opacity .18s ease;   /* kurz: erstes Bild = Poster, kein Doppelbild */
}
.reels__card.is-playing video{ opacity:1; }

.reels__cap{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:14px 14px 16px;
  pointer-events:none;
  border-radius:var(--reels-radius);
  background:linear-gradient(to top, rgba(4,5,12,.92) 0%, rgba(4,5,12,.62) 26%, rgba(4,5,12,0) 50%);
  /* feine Kante als Innenschatten: folgt der Rundung auch in Safari */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.reels__tags{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.reels__format,
.reels__note{
  padding:5px 9px 4px;
  border-radius:999px;
  font-size:.62rem;
  font-weight:500;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(6,8,20,.58);
  border:1px solid rgba(255,255,255,.2);
  text-shadow:none;
}
/* kleiner Zusatz, z. B. „Nur Edit“ */
.reels__note{
  font-size:.56rem;
  letter-spacing:.12em;
  color:var(--reels-muted);
  background:rgba(6,8,20,.42);
  border-color:rgba(255,255,255,.12);
}
.reels__client{
  display:block;
  font-size:1rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.01em;
}
.reels__meta{
  display:block;
  margin-top:5px;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--reels-muted);
}
/* kurze Beschreibung je Clip; auf der Drehbühne nur auf der aktiven Karte */
.reels__desc{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  margin-top:7px;
  font-size:.7rem;
  line-height:1.42;
  color:rgba(253,253,255,.84);
  transition:opacity .45s ease;
}
.reels.is-3d .reels__item:not(.is-active) .reels__desc{ opacity:0; }

/* Link in der Karte (Stadtseite / Veranstalter); auf der Bühne nur auf der aktiven Karte */
.reels__link{
  display:inline-block;
  margin-top:8px;
  padding:5px 10px 4px;
  border-radius:999px;
  border:1px solid rgba(123,214,255,.45);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--reels-blue);
  background:rgba(6,8,20,.5);
  pointer-events:auto;
  transition:opacity .45s ease;
}
.reels__link:hover{ border-color:var(--reels-blue); background:rgba(123,214,255,.14); }
.reels.is-3d .reels__item:not(.is-active) .reels__link{ opacity:0; pointer-events:none; }

/* Fortschrittslinie und Abspielknopf (beides von reels.js eingefügt) */
.reels__progress{
  position:absolute;
  left:16px; right:16px; bottom:8px;
  z-index:3;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--reels-blue), var(--reels-pink));
  transform-origin:0 50%;
  transform:scaleX(0);
  pointer-events:none;
}
.reels__card.is-playing .reels__progress{
  animation:reels-progress var(--reels-dur, 8s) linear forwards;
}
.reels.is-paused .reels__progress,
.reels.is-scrolling .reels__progress{ animation-play-state:paused; }
/* beim Drehen läuft kein Clip zu Ende – Linie erst im Stopp-Modus zeigen */
.reels.is-auto .reels__progress{ opacity:0; }
@keyframes reels-progress{ to{ transform:scaleX(1); } }

.reels__play{
  position:absolute;
  left:50%; top:50%;
  z-index:5;
  width:58px; height:58px;
  margin:-29px 0 0 -29px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(6,8,20,.55);
  color:#fff;
  cursor:pointer;
  box-shadow:0 0 0 6px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.45);
  transition:transform .2s ease, opacity .25s ease, border-color .2s ease;
}
.reels__play svg{ width:20px; height:20px; margin-left:3px; }
.reels__play:hover{ transform:scale(1.06); border-color:var(--reels-blue); }
.reels__card.is-playing .reels__play{ opacity:0; pointer-events:none; }

/* ---------- Bedienleiste ------------------------------------------------- */

.reels__bar{
  height:var(--reels-bar);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 var(--gutter, 16px);
}
.reels__hint{
  margin:0;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--reels-muted);
  opacity:.75;
}
.reels__btn{
  flex:0 0 auto;
  width:44px; height:44px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:var(--reels-text);
  cursor:pointer;
  transition:border-color .17s ease-out, box-shadow .26s ease-out, transform .17s ease-out, background .26s ease-out;
}
.reels__btn svg{ width:18px; height:18px; }
.reels__btn:hover{
  border-color:rgba(123,214,255,.6);
  background:rgba(123,214,255,.08);
  box-shadow:0 0 18px rgba(123,214,255,.22), 0 0 26px rgba(255,122,197,.12);
}
.reels__btn:active{ transform:scale(.94); }
.reels__btn:focus-visible,
.reels__play:focus-visible{ outline:2px solid var(--reels-blue); outline-offset:3px; }
.reels__btn[hidden]{ display:none !important; }
.reels__btn--pause{ margin-left:6px; }
.reels__btn--pause .reels__i-play,
.reels.is-paused .reels__btn--pause .reels__i-pause{ display:none; }
.reels.is-paused .reels__btn--pause .reels__i-play{ display:block; }

/* „Weiter“: erscheint, sobald der Besucher angehalten hat */
.reels__btn--resume{
  width:auto;
  padding:0 16px 0 13px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:999px;
  border:1px solid transparent;
  background:
    linear-gradient(#0d1130, #0d1130) padding-box,
    linear-gradient(120deg, var(--reels-blue), var(--reels-pink)) border-box;
  font:600 .72rem/1 "Space Grotesk", system-ui, sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:0 0 18px rgba(123,214,255,.22), 0 0 24px rgba(255,122,197,.16);
  animation:reels-pop .35s ease-out;
}
.reels__btn--resume svg{ width:14px; height:14px; }
.reels__btn--resume:hover{
  background:
    linear-gradient(#141a44, #141a44) padding-box,
    linear-gradient(120deg, var(--reels-blue), var(--reels-pink)) border-box;
}
@keyframes reels-pop{ from{ opacity:0; transform:scale(.88); } }

.reels__count{
  min-width:4.9em;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.45em;
  font-family:"Bebas Neue", "Space Grotesk", sans-serif;
  font-size:1.35rem;
  line-height:1;
  letter-spacing:.08em;
  color:rgba(255,255,255,.45);
  font-variant-numeric:tabular-nums;
  user-select:none;
}
.reels__count b{
  font-weight:400;
  font-size:1.2em;
  background:linear-gradient(120deg, #8ae1ff, var(--reels-pink));
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
.reels__count i{
  display:inline-block;
  width:22px; height:1px;
  align-self:center;
  background:rgba(255,255,255,.3);
}
/* schmale Handys: Leiste mit „Weiter“ muss in ~325 px passen */
@container (max-width:420px){
  .reels__bar{ gap:7px; }
  .reels__btn{ width:40px; height:40px; }
  .reels__btn--resume{ width:auto; padding:0 13px 0 11px; }
  .reels__btn--pause{ margin-left:2px; }
  .reels__count{ min-width:4.3em; font-size:1.2rem; }
  .reels__count i{ width:14px; }
}

.reels__sr{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- 3D-Bühne (nur wenn reels.js läuft) --------------------------- */

.reels.is-3d .reels__viewport{
  overflow:hidden;
  overflow:clip;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  outline:none;
}
.reels.is-3d .reels__viewport:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(123,214,255,.55);
  border-radius:var(--reels-radius);
}
.reels.is-dragging .reels__viewport{ cursor:grabbing; }

.reels.is-3d .reels__list{
  display:block;
  position:relative;
  padding:0;
  overflow:visible;
  scroll-snap-type:none;
}
.reels.is-3d .reels__item{
  position:absolute;
  left:50%;
  top:var(--reels-top);
  margin-left:calc(var(--reels-w) / -2);
  /* will-change setzt reels.js nur für die sichtbaren Karten (wenige Grafikebenen) */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.reels.is-3d .reels__card img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }

/* Abdunklung der Seitenkarten: Deckkraft setzt reels.js. Eigene Rundung,
   denn Safari schneidet solche Ebenen in 3D-Karten nicht an der Karte ab. */
.reels__shade{
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:var(--reels-radius);
  background:#04050c;
  opacity:0;
  pointer-events:none;
}

/* Verlaufsschleife um die Kante der aktiven Karte (von reels.js eingefügt).
   Ohne Maske: Verlauf im border-box, Karte im padding-box – rundet in Safari sauber.
   Animiert wird nur opacity; beim Seiten-Scrollen pausiert; schwache Geräte: statisch. */
/* angehaltene Karte (Video bleibt auf dem letzten Bild stehen): keine Fortschrittslinie */
.reels__card.is-held .reels__progress{ animation:none; opacity:0; }

.reels__ring{
  position:absolute;
  inset:0;
  z-index:4;
  border-radius:var(--reels-radius);
  border:1.5px solid transparent;
  background:linear-gradient(150deg, var(--reels-blue), var(--reels-pink)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease;
}
.reels.is-3d .reels__item.is-active .reels__ring{ opacity:.9; }
.reels.is-ring-anim .reels__item.is-active .reels__ring{ animation:reels-ring 2.8s ease-in-out infinite; }
.reels.is-scrolling .reels__ring,
.reels.is-dragging .reels__ring{ animation-play-state:paused; }
@keyframes reels-ring{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* Ein weicher, statischer Schein hinter der Mitte – keine Kopie der Karte,
   keine Spiegelung, keine animierten Farben oder Schatten. */
.reels__glow{
  position:absolute;
  left:50%;
  top:calc(var(--reels-top) + var(--reels-h) * .5);
  width:calc(var(--reels-w) * 1.9);
  height:calc(var(--reels-h) * 1.05);
  transform:translate(-50%, -50%);
  pointer-events:none;
  background:
    radial-gradient(closest-side at 40% 42%, rgba(123,214,255,.30), transparent),
    radial-gradient(closest-side at 62% 60%, rgba(255,122,197,.24), transparent);
  opacity:.85;
}

/* ---------- Flache Leiste mit Bedienung (Bewegung reduzieren) ----------- */

.reels.is-flat .reels__list{ scroll-behavior:auto; }
.reels.is-flat .reels__item.is-active .reels__cap{
  box-shadow:inset 0 0 0 1.5px rgba(123,214,255,.7);
}

@media (hover:hover){
  .reels.is-3d .reels__item:not(.is-active) .reels__card{ cursor:pointer; }
}

@media (prefers-reduced-motion:reduce){
  .reels__card video,
  .reels__btn,
  .reels__play{ transition:none; }
}

/* ---------- Volles Behind-the-Scenes-Video neben dem Karussell ------------
   Desktop: Karussell links, Player rechts. Handy: Player unter dem Karussell.
   Natives <video controls preload="none">: ohne JS bedienbar, lädt erst beim Klick. */
.reels-duo{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:28px;
  align-items:start;
}
@media (min-width:1024px){
  .reels-duo{ grid-template-columns:minmax(0, 1fr) 300px; gap:36px; }
  .reels-duo .reels--bleed{ margin-inline:calc(var(--gutter, 0px) * -1) 0; }
}
.reels-bts{
  margin:0;
  max-width:300px;
  margin-inline:auto;
  color:#fdfdff;
  font-family:"Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.reels-bts__frame{
  position:relative;
  aspect-ratio:9 / 16;
  border-radius:18px;
  overflow:hidden;
  background:#0b0e22;
  border:1px solid rgba(255,255,255,.12);
}
.reels-bts__frame video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:18px;
  background:#0b0e22;
}
.reels-bts__cap{
  margin:12px 2px 0;
  text-align:left;
}
.reels-bts__kicker{
  display:block;
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#d2d5fa;
}
.reels-bts__title{
  display:block;
  margin-top:4px;
  font-size:1rem;
  font-weight:600;
  line-height:1.25;
}
.reels-bts__text{
  display:block;
  margin-top:6px;
  font-size:.78rem;
  line-height:1.5;
  color:rgba(253,253,255,.82);
}

/* ---------- Überschrift des Karussell-Abschnitts -------------------------
   Statt der Serifenschrift der Seite: Space Grotesk (selbst gehostet, liegt
   schon in /fonts), eng gesetzt, mit Verlauf – ruhig und modern. */
/* Überschrift über dem Karussell: eigene Klassen und doppelte Spezifität, damit die
   Seiten-Regeln für .section h2 (Playfair) nicht greifen – reels.css nach style.css laden */
.reels-head{ text-align:center; margin-bottom:22px; }
.reels-head p.reels-head__eyebrow{
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(210,213,250,.72);
  margin:0 0 12px;
}
.reels-head h2.reels-head__title{
  font-family:"Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight:600;
  font-size:clamp(1.7rem, 4.2vw, 2.6rem);
  line-height:1.08;
  letter-spacing:-.025em;
  margin:0 0 10px;
  background:linear-gradient(100deg, #ffffff 0%, #dfe6ff 55%, #ffb6e2 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
.reels-head p.reels-head__sub{
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:.95rem;
  font-weight:400;
  letter-spacing:.005em;
  color:rgba(210,213,250,.85);
  margin:0;
}