/* ─────────────────────────────────────────────────────────────────────────────
   Speakers — Cube-Karussell mit Flip-Karten
   Vorderseite: Foto + Titel + vollständiger Name
   Rückseite (beim Tippen): Kurzvita (scrollbar)
   ───────────────────────────────────────────────────────────────────────────── */

.speakers-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding-top: 14px;
}

/* Swiper-Container + Track (für die Pfeile) ---------------------------------- */
.speakers-track {
  position: relative;
  width: 100%;
}

.speakers-swiper {
  width: 100%;
}

.speakers-swiper .swiper-slide {
  height: auto;                 /* Höhe folgt der Karte (aspect-ratio) */
  overflow: visible;            /* Cube-Drehung der Karte darf in 3D ausbrechen */
}

/* Navigationspfeile ---------------------------------------------------------- */
.speakers-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, rgba(24, 32, 34, 0.1));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--heading, #182022);
  box-shadow: var(--shadow-sm, 0 10px 30px rgba(18, 28, 31, 0.05));
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.speakers-nav:hover {
  background: var(--mint, #9DCAC6);
  color: #fff;
}
.speakers-nav svg { width: 22px; height: 22px; }
.speakers-nav-prev { left: 8px; }
.speakers-nav-next { right: 8px; }
.speakers-nav.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .speakers-nav-prev { left: -10px; }
  .speakers-nav-next { right: -10px; }
}

/* Flip-Karte ----------------------------------------------------------------- */
.speaker-card {
  width: 100%;
  aspect-ratio: 3 / 4;
  perspective: 1200px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Cube-Drehung: Vorder- und Rückseite sind zwei Flächen eines Würfels, die
   beim Antippen um 90° rotieren (wie die Swiper-Cube-Vorlage), kein flacher
   Flip. --cube-depth (= halbe Kartenbreite) wird per JS gesetzt. */
.speaker-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--cube-depth, 160px) * -1));
  transition: transform 0.479s cubic-bezier(0.62, 0.04, 0.3, 1);
}

.speaker-card.is-flipped .speaker-card-inner {
  transform: translateZ(calc(var(--cube-depth, 160px) * -1)) rotateY(-90deg);
}

/* Nach Abschluss der Cube-Drehung flach schalten: Touch-Scrollen funktioniert
   in einer preserve-3d-/gedrehten Fläche nicht zuverlässig. Im flachen 2D-Zustand
   ist die Vita auf dem Handy normal scrollbar. (Wird per JS gesetzt.) */
.speaker-card.is-flat .speaker-card-inner {
  transform: none;
  transform-style: flat;
  transition: none;
}
.speaker-card.is-flat .speaker-card-front { visibility: hidden; }
.speaker-card.is-flat .speaker-card-back { transform: none; }

.speaker-card-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: var(--radius-md, 22px);
  background: var(--paper, #fff);
}

/* Vorderseite = vordere Würfelfläche, Rückseite = rechte Würfelfläche */
.speaker-card-front { transform: rotateY(0deg) translateZ(var(--cube-depth, 160px)); }

/* Vorderseite ---------------------------------------------------------------- */
.speaker-card-front img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.speaker-card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 64px 22px 22px;
  color: #fff;
  text-align: left;
  background: linear-gradient(
    to top,
    rgba(18, 28, 31, 0.82) 0%,
    rgba(18, 28, 31, 0.55) 45%,
    rgba(18, 28, 31, 0) 100%
  );
}

.speaker-card-role {
  margin: 0 0 4px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mint, #9DCAC6);
}

.speaker-card-name {
  margin: 0;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #fff;
}

/* Flip-Hinweis (sprachneutral) ---------------------------------------------- */
.speaker-card-flip {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--heading, #182022);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 16px rgba(18, 28, 31, 0.18);
  transition: transform 0.3s ease, background 0.3s ease;
  pointer-events: none;         /* Klick geht an die Karte */
}

.speaker-card:hover .speaker-card-flip {
  transform: rotate(45deg);
  background: #fff;
}

.speaker-card-flip svg {
  width: 20px;
  height: 20px;
}

/* Rückseite ------------------------------------------------------------------ */
.speaker-card-back {
  transform: rotateY(90deg) translateZ(var(--cube-depth, 160px));
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--paper-tint, #f8fbfb) 0%, #fff 60%);
  border: 1px solid var(--line, rgba(24, 32, 34, 0.1));
}

.speaker-card-back::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--mint, #9DCAC6), var(--rose, #F7CCE8));
}

.speaker-card-back-head {
  padding: 26px 26px 12px;
}

.speaker-card-back .speaker-card-role {
  position: static;
  color: var(--mint-deep, #6e9d99);
}

.speaker-card-back-name {
  margin: 2px 0 0;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--heading, #182022);
}

.speaker-card-bio {
  flex: 1;
  min-height: 0;               /* erlaubt Scrollen im Flex-Kind */
  overflow-y: auto;
  padding: 4px 26px 26px;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--text-soft, #516064);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;          /* vertikales Touch-Scrollen erlauben */
}

.speaker-card-bio p {
  margin: 0 0 10px;
}

/* dezenter Scrollbalken */
.speaker-card-bio {
  scrollbar-width: thin;
  scrollbar-color: var(--mint, #9DCAC6) transparent;
}
.speaker-card-bio::-webkit-scrollbar {
  width: 6px;
}
.speaker-card-bio::-webkit-scrollbar-thumb {
  background: var(--mint, #9DCAC6);
  border-radius: 3px;
}

/* Schließen-/Zurück-Hinweis auf der Rückseite */
.speaker-card-back .speaker-card-flip {
  background: var(--mint, #9DCAC6);
  color: #fff;
  box-shadow: 0 6px 16px rgba(110, 157, 153, 0.4);
}
.speaker-card:hover .speaker-card-back .speaker-card-flip {
  transform: rotate(-45deg);
}

/* Pagination ----------------------------------------------------------------- */
.speakers-carousel .swiper-pagination {
  position: static;
  margin-top: 16px;
}
.speakers-carousel .swiper-pagination-bullet {
  background: var(--line-strong, rgba(24, 32, 34, 0.16));
  opacity: 1;
  transition: width 0.3s ease, background 0.3s ease;
}
.speakers-carousel .swiper-pagination-bullet-active {
  width: 22px;
  border-radius: 5px;
  background: var(--mint-deep, #6e9d99);
}

/* Hinweiszeile unter dem Karussell ------------------------------------------ */
.speakers-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-soft, #516064);
}
.speakers-hint svg {
  width: 16px;
  height: 16px;
  color: var(--mint-deep, #6e9d99);
}

/* Mobile --------------------------------------------------------------------- */
@media (max-width: 480px) {
  .speaker-card-name { font-size: 1.3rem; }
  .speaker-card-bio { font-size: 0.9rem; }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  .speaker-card-inner { transition-duration: 0.001ms; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Speaker — 3D-Ring (ziehen zum Drehen) → Detail-Popup (Klick aufs Foto)
   Reine CSS-3D + Vanilla-JS-Rotation (kein Framework). Klick öffnet das
   bestehende Detail-Overlay (Bild + dunkles Info-Panel) per FLIP.
   ─────────────────────────────────────────────────────────────────────────── */
.speakers-ring-stage {
  margin-top: 24px;
  height: 500px;
  perspective: 1500px;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}
.speakers-ring-spin {
  position: absolute;
  left: 50%; top: 50%;
  width: 250px; height: 350px;
  margin: -175px 0 0 -125px;
  transform-style: preserve-3d;
  cursor: grab;
  will-change: transform;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.speakers-ring-spin.grabbing { cursor: grabbing; }
.sp-ring-item {
  position: absolute;
  left: 0; top: 0;
  width: 250px; height: 350px;
  border-radius: 18px;
  overflow: hidden;
  background-color: #e9eded;
  background-size: cover;
  background-position: center;
  box-shadow: 0 20px 46px rgba(18, 28, 31, 0.30);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  cursor: pointer;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  transition: opacity .35s ease, filter .3s ease;
}
.speakers-ring-spin:hover .sp-ring-item { filter: brightness(0.72); }
.speakers-ring-spin .sp-ring-item:hover { filter: none; }
.sp-ring-item:focus-visible { box-shadow: 0 0 0 3px var(--mint), 0 20px 46px rgba(18, 28, 31, 0.30); }
.sp-ring-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 38px 14px 16px;
  background: linear-gradient(to top, rgba(15, 20, 21, 0.9), rgba(15, 20, 21, 0));
  color: #fff;
  pointer-events: none;
}
.sp-ring-cap h3 { font-family: Georgia, serif; font-size: 1.05rem; line-height: 1.2; margin: 0 0 3px; color: #fff; }
.sp-ring-cap p {
  font-size: 0.78rem; opacity: 0.92; margin: 0; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-bio { display: none; }

/* Pfeile zum Drehen */
.ring-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  color: var(--heading, #182022);
  box-shadow: 0 8px 20px rgba(18, 28, 31, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.ring-nav:hover { background: #fff; }
.ring-nav:active { transform: translateY(-50%) scale(0.94); }
.ring-nav-prev { left: 10px; }
.ring-nav-next { right: 10px; }
.ring-nav svg { width: 22px; height: 22px; display: block; }

/* Mobil: schwebenden WhatsApp-Button ausblenden, solange die Vita offen ist */
@media (max-width: 600px) {
  body.sp-detail-open .whatsapp-float { display: none; }
}
@media (max-width: 600px) {
  .speakers-ring-stage { height: 400px; perspective: 1200px; }
  .speakers-ring-spin { width: 172px; height: 240px; margin: -120px 0 0 -86px; }
  .sp-ring-item { width: 172px; height: 240px; }
  .sp-ring-cap { padding: 30px 11px 12px; }
  .sp-ring-cap h3 { font-size: 0.9rem; }
  .sp-ring-cap p { font-size: 0.68rem; }
  .ring-nav { width: 38px; height: 38px; }
  .ring-nav-prev { left: 2px; }
  .ring-nav-next { right: 2px; }
}
@media (max-width: 380px) {
  .speakers-ring-stage { height: 360px; }
  .speakers-ring-spin { width: 150px; height: 210px; margin: -105px 0 0 -75px; }
  .sp-ring-item { width: 150px; height: 210px; }
}

.speakers-detail {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 5vh 20px;
}
.speakers-detail[hidden] { display: none; }
.sp-detail-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 20, 21, 0.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sp-detail-card {
  position: relative; z-index: 1;
  width: min(440px, 92vw);
  max-height: 90vh; overflow-y: auto;
  background: #fff; border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transform-origin: top left;
  display: flex; flex-direction: column;
  scrollbar-width: none;
}
.sp-detail-card::-webkit-scrollbar { display: none; }
.sp-detail-img {
  width: 100%; height: auto; max-height: 48vh;
  object-fit: cover; object-position: center 22%;
  display: block; flex: 0 0 auto;
  position: sticky; top: 0; z-index: 2;  /* Bild bleibt sichtbar, Text scrollt darunter */
}
.sp-detail-content {
  background: var(--heading, #182022); color: #fff;
  padding: 22px 24px 26px;
  animation: spSlideDown .55s ease both;
}
@keyframes spSlideDown {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.sp-detail-name { font-family: Georgia, serif; font-size: 1.6rem; line-height: 1.2; margin: 0 0 5px; color: #fff; }
.sp-detail-role { color: var(--mint); font-size: 0.9rem; font-weight: 600; margin: 0 0 14px; }
.sp-detail-bio p { line-height: 1.6; font-size: 0.92rem; margin: 0 0 10px; color: rgba(255, 255, 255, 0.86); }
.sp-detail-bio p:last-child { margin-bottom: 0; }
.sp-detail-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.92); color: #182022; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: background .2s ease;
}
.sp-detail-close:hover { background: #fff; }
.sp-detail-close svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .sp-detail-content { animation: none; }
}