/* ==========================================================================
   Reels von Instagram (s-reels), Modul inc/sections/reels.php
   Wird nur auf Seiten mit dem Modul geladen (inc/reels.php).
   Farben nur über die --f-Tokens der Fläche, damit das Modul auf jeder
   Hintergrundfläche funktioniert.
   ========================================================================== */

/* ---------------------------------------------------------------- Karussell
   Alle Karten liegen übereinander in der Mitte, das Skript schiebt sie per
   transform an ihren Platz. Breite 24vw zwischen 240 und 330 px, Hochformat 9:16. */
.s-reels-buehne{
  --w:clamp(240px,24vw,330px);
  position:relative;height:calc(var(--w) * 16 / 9);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;
}
.s-reels-buehne:focus-visible{outline:3px solid var(--f-deko);outline-offset:6px;border-radius:1.6rem}
.s-reels-karte{
  position:absolute;top:0;left:50%;width:var(--w);height:100%;margin-left:calc(var(--w) / -2);
  transition:transform .55s var(--easing-out),opacity .55s var(--easing-out);will-change:transform;
}
.s-reels-buehne.is-start .s-reels-karte{transition:none}
/* Ohne Skript stehen nur die erste Karte und ihre Info da. */
.s-reels-buehne:not(.is-bereit) .s-reels-karte:not([data-i="0"]){opacity:0}
.s-reels-media{
  position:relative;width:100%;height:100%;overflow:hidden;cursor:pointer;
  border-radius:1.5rem;background:var(--ink);-webkit-tap-highlight-color:transparent;
}
.s-reels-media img,
.s-reels-media video{width:100%;height:100%;object-fit:cover;display:block}
.s-reels-media video{background:#000}
/* Standbild und Abspielknopf tragen display-Regeln, die das hidden-Attribut sonst überstimmen. */
.s-reels-media [hidden]{display:none!important}
.s-reels-karte:not(.is-aktiv) .s-reels-media{filter:saturate(.6)}
.s-reels-karte.is-aktiv .s-reels-media{box-shadow:0 22px 60px rgba(23,19,26,.24)}
.s-reels-karte:not(.is-aktiv) .s-reels-play{visibility:hidden}

.s-reels-play{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;padding:0;display:block}
.s-reels-abspielen{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 22px rgba(23,19,26,.3);transition:transform .25s var(--easing-out);
}
.s-reels-abspielen svg{width:27px;height:27px;fill:var(--beere);display:block;margin-left:3px}
.s-reels-play:hover .s-reels-abspielen,
.s-reels-play:focus-visible .s-reels-abspielen{transform:translate(-50%,-50%) scale(1.08)}
.s-reels-play:focus-visible{outline:3px solid var(--weiss);outline-offset:-6px;border-radius:1.5rem}
.s-reels-extern-hinweis{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);white-space:nowrap;
  font-family:'Sora',sans-serif;font-weight:600;font-size:.95rem;color:var(--weiss);
  padding:.5rem 0 .2rem;border-bottom:2px solid var(--petrol);text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.s-reels-badge{
  position:absolute;top:1rem;left:1rem;z-index:2;
  font-family:'Inter',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--auf-beere);background:var(--beere);padding:.45rem .9rem;border-radius:999px;
}

/* ---------------------------------------------------------------- Steuerung */
.s-reels-steuerung{display:flex;align-items:center;justify-content:center;gap:1.75rem;margin-top:2.5rem}
.s-reels-pfeil{
  width:3rem;height:3rem;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:transparent;border:0;border-radius:50%;color:var(--f-titel);cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1.5px var(--f-btn2-linie);
  transition:background-color .3s var(--easing),color .3s var(--easing),box-shadow .3s var(--easing);
}
.s-reels-pfeil:hover,
.s-reels-pfeil:focus-visible{background:var(--f-btn-bg);color:var(--f-btn-fg);box-shadow:none}
.s-reels-pfeil svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.s-reels-punkte{display:flex;gap:.7rem}
/* Trefferfläche 24 px für Finger, sichtbarer Punkt 8 px */
.s-reels-punkt{
  position:relative;width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:color-mix(in srgb,var(--f-titel) 22%,transparent);
  transition:background .3s var(--easing),transform .3s var(--easing);
}
.s-reels-punkt::after{content:"";position:absolute;inset:-8px}
.s-reels-punkt:hover{background:color-mix(in srgb,var(--f-titel) 45%,transparent)}
.s-reels-punkt[aria-current="true"]{background:var(--f-btn-bg);transform:scale(1.35)}
.s-reels-zaehler{
  font-family:'Sora',sans-serif;font-weight:600;font-size:.9rem;letter-spacing:.08em;
  color:var(--f-titel);min-width:4rem;text-align:center;
}

/* ---------------------------------------------------------------- Caption */
.s-reels-info{max-width:40rem;margin:2.5rem auto 0;padding-inline:var(--pad);text-align:center}
.s-reels-datum{
  font-size:var(--t-kicker);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f-akzent);margin-bottom:.9rem;
}
.s-reels-text{font-size:var(--t-text);line-height:1.65;color:var(--f-text);overflow-wrap:anywhere}
.s-reels-text p{margin:0 0 .7em}
.s-reels-text p:last-child{margin:0}
.s-reels-text.is-zu{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.s-reels-links{display:flex;justify-content:center;gap:.5rem 2rem;flex-wrap:wrap}
.s-reels-mehr,
.s-reels-insta{
  position:relative;font-family:'Sora',sans-serif;font-weight:600;font-size:1rem;line-height:normal;
  color:var(--f-titel);padding:.75rem 0 .35rem;margin-top:1.3rem;
  border:0;border-radius:0;background:transparent;cursor:pointer;
  box-shadow:inset 0 -2px 0 var(--f-strich);
  transition:color .3s var(--easing);
}
.s-reels-mehr:hover,.s-reels-mehr:focus-visible,
.s-reels-insta:hover,.s-reels-insta:focus-visible{color:var(--f-kicker)}
.s-reels-mehr[hidden]{display:none}

.s-reels-fuss{text-align:center;margin-top:3rem}

/* ---------------------------------------------------------------- Mobil
   Karte 68 Prozent der Breite, links und rechts schauen die Nachbarn hervor. */
@media (max-width:767px){
  .s-reels-buehne{--w:68vw}
  .s-reels-abspielen{width:58px;height:58px}
  .s-reels-abspielen svg{width:22px;height:22px}
  .s-reels-steuerung{margin-top:2rem;gap:1.4rem}
  .s-reels-info{margin-top:2rem}
  .s-reels-fuss{margin-top:2.4rem}
}

@media (prefers-reduced-motion:reduce){
  .s-reels-karte,.s-reels-abspielen{transition:none}
}