/* Riff-Karussell (assets/js/card-carousel.js).
 *
 * Aufgebaut wie das Paket-Karussell der Bubblemakers-Seite: Drehbühne mit
 * großer Kachel in der Mitte, Nachbarn kippen nach hinten weg, Punkte darunter.
 *
 * Jede Regel hängt an Klassen, die erst das Skript setzt. Ohne JavaScript
 * bleibt damit das ursprüngliche Raster stehen und ist voll benutzbar.
 *   .fd-kar--3d     Drehbühne
 *   .fd-kar--reihe  schlichte Wischreihe bei reduzierter Bewegung */

.fd-kar{ --fd-kar-breite:min(340px, 80vw); position:relative; }

.fd-kar-buehne{ position:relative; }

/* Überschreibt das Raster darunter (.reef-grid / .sites-grid). */
.fd-kar .fd-kar-liste{ margin-bottom:0; }
.fd-kar-schwimmer{ position:relative; height:100%; isolation:isolate; }
.fd-kar-schwimmer > a{ position:relative; height:100%; box-sizing:border-box; }

.fd-kar-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------------------------------------------------------------------------
   Schlichte Reihe (reduzierte Bewegung)
   --------------------------------------------------------------------------- */
.fd-kar--reihe .fd-kar-liste{
  display:flex; grid-template-columns:none; gap:20px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  padding:12px 4px 22px;
  scrollbar-width:none;
}
.fd-kar--reihe .fd-kar-liste::-webkit-scrollbar{ display:none; }
.fd-kar--reihe .fd-kar-karte{ flex:0 0 var(--fd-kar-breite); scroll-snap-align:center; }
.fd-kar--reihe .fd-kar-pfeil[disabled]{ opacity:0; pointer-events:none; }

/* ---------------------------------------------------------------------------
   Drehbühne
   --------------------------------------------------------------------------- */
.fd-kar--3d .fd-kar-buehne{
  /* Seitenkacheln dürfen nicht über den Bildschirmrand hinausragen. */
  overflow-x:clip;
  perspective:1500px;
  perspective-origin:50% 40%;
  padding:26px 0 18px;
  touch-action:pan-y;
  -webkit-user-select:none; user-select:none;
  cursor:grab;
}
.fd-kar--zieht .fd-kar-buehne{ cursor:grabbing; }

.fd-kar--3d .fd-kar-liste{
  display:block; position:relative;
  height:var(--fd-kar-hoehe, 460px);
  padding:0; overflow:visible;
  transform-style:preserve-3d;
}

.fd-kar--3d .fd-kar-karte{
  position:absolute; top:0; left:50%;
  width:var(--fd-kar-breite); height:100%;
  margin-left:calc(var(--fd-kar-breite) / -2);
  transform-style:preserve-3d;
  will-change:transform, opacity;
}

/* Beim Messen der natürlichen Kachelhöhe */
.fd-kar--messen .fd-kar-karte,
.fd-kar--messen .fd-kar-schwimmer,
.fd-kar--messen .fd-kar-schwimmer > a{ height:auto !important; }

/* Wippen wie auf Wellen. Liegt auf der inneren Hülle, weil das transform der
   äußeren in jedem Bild vom Skript gesetzt wird. */
.fd-kar--3d .fd-kar-schwimmer{
  animation:fd-kar-schwimmen 3.8s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * -.62s);
}
@keyframes fd-kar-schwimmen{
  0%,100% { transform:translateY(0) rotate(0deg); }
  50%     { transform:translateY(-9px) rotate(.7deg); }
}

/* Die Kachel selbst hebt sich auf der Bühne nicht noch einmal an – das
   Karussell bewegt sie schon. */
.fd-kar--3d .fd-kar-schwimmer > .reef-card,
.fd-kar--3d .fd-kar-schwimmer > .site-card,
.fd-kar--3d .fd-kar-schwimmer > .kurs-card{
  transform:none;
  box-shadow:0 14px 34px rgba(2,40,50,.14);
  transition:box-shadow .3s ease, border-color .3s ease;
}
.fd-kar--3d .fd-kar-schwimmer > .reef-card:hover,
.fd-kar--3d .fd-kar-schwimmer > .site-card:hover,
.fd-kar--3d .fd-kar-schwimmer > .kurs-card:hover{ transform:none; }
.fd-kar--3d .fd-kar-karte--vorn .fd-kar-schwimmer > .reef-card,
.fd-kar--3d .fd-kar-karte--vorn .fd-kar-schwimmer > .site-card,
.fd-kar--3d .fd-kar-karte--vorn .fd-kar-schwimmer > .kurs-card{
  box-shadow:0 30px 60px rgba(2,40,50,.28);
  border-color:var(--teal, #0eb6a8);
}

/* Die hinteren Kacheln treten zurück. Eine Deckschicht statt eines Filters,
   der in jedem Bild neu gerechnet werden müsste. */
.fd-kar--3d .fd-kar-schwimmer::after{
  content:''; position:absolute; inset:0; z-index:2;
  border-radius:20px;
  background:rgba(6,42,61,.22);
  opacity:1; transition:opacity .35s ease;
  pointer-events:none;
}
.fd-kar--3d .fd-kar-karte--vorn .fd-kar-schwimmer::after{ opacity:0; }
.fd-kar--3d .fd-kar-karte:not(.fd-kar-karte--vorn){ cursor:pointer; }

/* Blasen, die hinter der gerade eingerasteten Kachel aufsteigen */
.fd-kar--3d .fd-kar-schwimmer::before{
  content:''; position:absolute; z-index:-1;
  left:-14%; right:-14%; bottom:0; height:70%;
  background:
    radial-gradient(circle at 10% 90%, rgba(138,233,244,.9) 0 7px, transparent 8px),
    radial-gradient(circle at 22% 70%, rgba(255,255,255,.85) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 85%, rgba(14,182,168,.7) 0 9px, transparent 10px),
    radial-gradient(circle at 78% 60%, rgba(255,255,255,.85) 0 5px, transparent 6px),
    radial-gradient(circle at 95% 40%, rgba(53,214,232,.8) 0 6px, transparent 7px),
    radial-gradient(circle at 4% 45%, rgba(255,212,0,.7) 0 5px, transparent 6px);
  opacity:0;
  pointer-events:none;
}
.fd-kar--3d .fd-kar-karte--blubb .fd-kar-schwimmer::before{
  animation:fd-kar-blasen 1.3s cubic-bezier(.3,.6,.4,1) both;
}
@keyframes fd-kar-blasen{
  0%   { opacity:0; transform:translateY(20px) scale(.8); }
  25%  { opacity:1; }
  100% { opacity:0; transform:translateY(-160px) scale(1.15); }
}

/* ---------------------------------------------------------------------------
   Pfeile
   --------------------------------------------------------------------------- */
.fd-kar-pfeil{
  position:absolute; top:50%; z-index:200;
  width:54px; height:54px; padding:0;
  display:grid; place-items:center;
  border-radius:50%; border:2.5px solid rgba(13,51,85,.16);
  background:#fff; color:var(--navy, #0d3355);
  box-shadow:0 12px 30px rgba(2,40,50,.2);
  cursor:pointer;
  transform:translateY(-50%);
  transition:transform .18s cubic-bezier(.3,1.5,.5,1), border-color .2s ease,
             color .2s ease, opacity .25s ease;
}
.fd-kar-pfeil svg{ width:26px; height:26px; display:block; }
[dir=rtl] .fd-kar-pfeil svg{ transform:scaleX(-1); }
.fd-kar-pfeil:hover{ border-color:var(--teal, #0eb6a8); color:var(--teal-text, #0b7d73);
  transform:translateY(-50%) scale(1.1); }
.fd-kar-pfeil:active{ transform:translateY(-50%) scale(.92); }
.fd-kar-pfeil:focus-visible{ outline:3px solid var(--accent, #FFD400); outline-offset:3px; }

/* Neben der vorderen Kachel, auf breiten Schirmen über den Seitenkacheln. */
.fd-kar-zurueck{ left:max(0px, calc(50% - var(--fd-kar-breite) / 2 - 150px)); }
.fd-kar-vor{ right:max(0px, calc(50% - var(--fd-kar-breite) / 2 - 150px)); }
[dir=rtl] .fd-kar-zurueck{ left:auto; right:max(0px, calc(50% - var(--fd-kar-breite) / 2 - 150px)); }
[dir=rtl] .fd-kar-vor{ right:auto; left:max(0px, calc(50% - var(--fd-kar-breite) / 2 - 150px)); }

/* ---------------------------------------------------------------------------
   Punkte
   --------------------------------------------------------------------------- */
.fd-kar-punkte{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-top:8px;
}
.fd-kar-punkt{
  width:12px; height:12px; padding:0;
  border:0; border-radius:999px;
  background:rgba(13,51,85,.2);
  cursor:pointer;
  transition:width .3s cubic-bezier(.3,1.4,.5,1), background .2s ease;
}
.fd-kar-punkt:hover{ background:var(--teal, #0eb6a8); }
.fd-kar-punkt[aria-current="true"]{ width:34px;
  background:linear-gradient(90deg, var(--teal, #0eb6a8), var(--accent, #FFD400)); }
.fd-kar-punkt:focus-visible{ outline:3px solid var(--accent, #FFD400); outline-offset:2px; }

.fd-kar--allein .fd-kar-pfeil,
.fd-kar--allein .fd-kar-punkte{ display:none !important; }

/* Am Telefon wandern die Pfeile unter die Bühne, links und rechts der Punkte. */
@media (max-width:560px){
  .fd-kar-pfeil{ top:auto; bottom:-46px; width:46px; height:46px; transform:none; }
  .fd-kar-pfeil svg{ width:22px; height:22px; }
  .fd-kar-pfeil:hover{ transform:scale(1.08); }
  .fd-kar-pfeil:active{ transform:scale(.92); }
  .fd-kar-zurueck, [dir=rtl] .fd-kar-vor{ left:0; right:auto; }
  .fd-kar-vor, [dir=rtl] .fd-kar-zurueck{ right:0; left:auto; }
  .fd-kar-punkte{ margin-top:20px; padding-inline:56px; min-height:30px; align-items:center; }
  .fd-kar--reihe .fd-kar-pfeil{ bottom:-40px; }
}

@media (prefers-reduced-motion:reduce){
  .fd-kar-schwimmer{ animation:none !important; }
  .fd-kar-pfeil, .fd-kar-punkt{ transition:none; }
}