/* =============================================================================
   Referenzen, Variante 2: Karten fliegen aus der Tiefe nach vorn
   (referenzen.html, Steuerung in assets/js/ref-flight.js)

   Vor einem animierten Punktfeld-Hintergrund (zwei Ebenen mit Spalt in der Mitte,
   Vorlage: vorlagen/169483-841382895.mp4) kommen die Referenz-Karten aus dem
   Fluchtpunkt in der Mitte nach vorn: erst klein, blass und unscharf, dann
   groesser und schaerfer, am Ende ziehen sie am Betrachter vorbei und geben den
   Blick auf die naechste frei.

   Ohne JavaScript oder bei prefers-reduced-motion bleibt es ein ruhiges Raster
   (.rf ohne .is-live): alle Karten stehen nebeneinander, der Hintergrund ist ein
   einzelnes Standbild.
   ============================================================================= */

.rf {
  --rf-hz: 51%;                       /* Hoehe des Horizonts (Spalt) von oben, wie im Video */
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  background: #001632;
  color: #eaf6fb;
  overflow: hidden;
}

.rf__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* Ohne WebGL: ruhiger Verlauf mit hellem Horizont */
.rf:not(.has-gl) {
  background:
    linear-gradient(180deg, transparent calc(var(--rf-hz) - 2px), rgba(63, 170, 255, 0.45) var(--rf-hz), transparent calc(var(--rf-hz) + 2px)),
    radial-gradient(90% 55% at 50% var(--rf-hz), rgba(8, 74, 168, 0.55), transparent 70%),
    #001632;
}

/* ---- Titel ------------------------------------------------------------------ */
.rf__head {
  position: absolute;
  z-index: 3;
  top: calc(var(--header-h, 88px) + 1.2rem);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: calc(100% - 2rem);
  text-align: center;
  padding: 0.7rem 1.6rem 0.8rem;
  border-radius: 16px;
  /* eigener dunkler Grund, damit der Titel auch ueber hellen Karten lesbar bleibt */
  background: rgba(2, 14, 32, 0.62);
  border: 1px solid rgba(127, 227, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}
.rf__eyebrow {
  display: block;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(234, 246, 251, 0.6);
  margin-bottom: 0.5rem;
}
.rf__title {
  margin: 0;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #eaf6fb;
  text-shadow: 0 2px 18px rgba(0, 12, 30, 0.7);
}

/* ---- Bühne mit den Karten ---------------------------------------------------- */
.rf__stage {
  position: relative;
  z-index: 2;
  min-height: 100svh;
}
.rf__list {
  list-style: none;
  margin: 0;
  padding: calc(var(--header-h, 88px) + 7rem) var(--space-md, 1.5rem) 4rem;
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  max-width: 78rem;
  margin-inline: auto;
}

/* ---- Karte ----------------------------------------------------------------------
   Jede Referenz ist ein SET aus Monitor (Desktop-Ansicht) und Handy (mobile Ansicht, echte
   Aufnahmen: assets/img/referenzen/<name>-hoch.webp). Das Handy steht vor dem Monitor und bewegt
   sich beim Anflug leicht anders als er (naeher an der Kamera, wandert nach aussen, schwebt) -
   dadurch lebt das Set statt starr zu stehen. Die Bilder sind nur Muster; ein Klick fuehrt auf die
   Originalseite. Alle Masse in cqw (Anteil der Kartenbreite), damit die Rahmen mitskalieren.
   Die Beschriftung steht UNTER dem Geraet, nicht auf dem Bild. */
.rf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  container-type: inline-size;
  color: #eaf6fb;
}
.rf-set { position: relative; width: 100%; }
.rf-dev {
  position: relative;
  width: 100%;
  padding: 1.5cqw 1.5cqw 4.4cqw;
  border-radius: 2cqw;
  background: linear-gradient(165deg, #1b2740 0%, #0a1224 60%, #0d1730 100%);
  box-shadow: 0 5cqw 9cqw rgba(0, 6, 20, 0.7), 0 0 0 0.25cqw rgba(160, 200, 255, 0.28), inset 0 0.3cqw 0 rgba(255, 255, 255, 0.14);
  transition: box-shadow 250ms ease;
}
/* Kamera-Punkt oben, Hersteller-Mulde in der Kinnleiste */
.rf-dev::before {
  content: "";
  position: absolute;
  top: 0.55cqw;
  left: 50%;
  width: 0.7cqw;
  height: 0.7cqw;
  margin-left: -0.35cqw;
  border-radius: 50%;
  background: #04080f;
  box-shadow: inset 0 0 0 0.15cqw #26324d;
}
.rf-dev::after {
  content: "";
  position: absolute;
  bottom: 1.5cqw;
  left: 50%;
  width: 3.2cqw;
  height: 0.5cqw;
  margin-left: -1.6cqw;
  border-radius: 0.3cqw;
  background: rgba(160, 200, 255, 0.28);
}
.rf-dev__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0.6cqw;
  background: #021a38;
  box-shadow: 0 0 0 0.12cqw #000;
}
.rf-dev__screen::after {                 /* leichte Glasreflexion */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 30%);
}
.rf-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
/* Staender: Hals und Fuss */
.rf-stand {
  position: relative;
  width: 100%;
  height: 7cqw;
  margin-top: -0.2cqw;
}
.rf-stand::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 12cqw;
  height: 5cqw;
  margin-left: -6cqw;
  background: linear-gradient(90deg, #0b1326 0%, #2a3858 45%, #0b1326 100%);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}
.rf-stand::after {
  content: "";
  position: absolute;
  top: 4.4cqw;
  left: 50%;
  width: 30cqw;
  height: 1.6cqw;
  margin-left: -15cqw;
  border-radius: 50%;
  background: linear-gradient(180deg, #34425f 0%, #0b1326 100%);
  box-shadow: 0 1.4cqw 2.4cqw rgba(0, 6, 20, 0.6);
}

/* Textblock als technische Statuskarte (HUD): dunkle Glasflaeche, Eckmarken, Scanlinien, Statuschip */
.rf-card__body {
  --hud: #7fe3ff;
  position: relative;
  width: 94%;
  margin-top: 0.8cqw;
  padding: 2.2cqw 3cqw 2.4cqw;
  text-align: center;
  display: grid;
  gap: 0.9cqw;
  justify-items: center;
  background: linear-gradient(160deg, rgba(10, 28, 52, 0.82), rgba(3, 10, 24, 0.9));
  border: 1px solid rgba(63, 216, 255, 0.22);
  border-radius: 1.6cqw;
  box-shadow: inset 0 0 3.4cqw rgba(40, 140, 230, 0.12), 0 2cqw 4cqw rgba(0, 0, 0, 0.5);
  transition: border-color 250ms ease, box-shadow 250ms ease, background-color 250ms ease;
  overflow: hidden;
}
/* Eckmarken und Leuchtkante oben */
.rf-card__body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(#3fd8ff, #3fd8ff) left top / 2.4cqw 1px no-repeat,
    linear-gradient(#3fd8ff, #3fd8ff) left top / 1px 2.4cqw no-repeat,
    linear-gradient(#3fd8ff, #3fd8ff) right bottom / 2.4cqw 1px no-repeat,
    linear-gradient(#3fd8ff, #3fd8ff) right bottom / 1px 2.4cqw no-repeat;
  filter: drop-shadow(0 0 4px #3fd8ff);
  transition: filter 250ms ease;
}
/* Scanstrahl, der beim Ueberfahren einmal durchlaeuft */
.rf-card__body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 30%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(127, 227, 255, 0.28), transparent);
}
.rf-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  padding: 0.5cqw 1.8cqw;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: max(0.66rem, 1.9cqw);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hud);
  background: rgba(127, 227, 255, 0.1);
  border: 1px solid rgba(127, 227, 255, 0.4);
  border-radius: 999px;
}
.rf-card__tag { transition: background-color 250ms ease, border-color 250ms ease, letter-spacing 250ms ease; }
.rf-card__title { transition: text-shadow 250ms ease; }
.rf-card__go { transition: filter 250ms ease, letter-spacing 250ms ease, transform 250ms ease; }
.rf-card__tag::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #5dffb0;
  box-shadow: 0 0 8px #5dffb0;
  animation: rf-blink 1.8s ease-in-out infinite;
}
@keyframes rf-blink { 50% { opacity: 0.25; } }
.rf-card__title {
  margin: 0;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: max(1.15rem, 4.8cqw);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 0 18px rgba(127, 227, 255, 0.45);
}
.rf-card__text {
  margin: 0;
  max-width: 62ch;
  font-size: max(0.82rem, 2.5cqw);
  line-height: 1.5;
  color: #d6e8f5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rf-card__go {
  margin-top: 0.6cqw;
  padding: 0.7cqw 2.4cqw;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: max(0.74rem, 2.1cqw);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #021226;
  background: linear-gradient(90deg, #7fe3ff, #4db4ff);
  clip-path: polygon(0.9cqw 0, 100% 0, calc(100% - 0.9cqw) 100%, 0 100%);
  box-shadow: 0 0 14px rgba(127, 227, 255, 0.5);
}
/* Die ganze Karte ist der Link */
.rf-card__link { position: absolute; inset: 0; z-index: 2; border-radius: 2cqw; }
.rf-card__link:focus-visible { outline: 3px solid #7fe3ff; outline-offset: 4px; }

/* Handy: Container, damit die Rahmenmasse (cqw) auf die Handybreite bezogen sind */
.rf-phone {
  position: absolute;
  right: -4%;
  bottom: -5cqw;
  width: 23%;
  z-index: 2;
  container-type: inline-size;
  transform-origin: 50% 100%;
  will-change: transform;
}
.rf__item[data-side="l"] .rf-phone { right: auto; left: -4%; }
.rf-phone__body {
  position: relative;
  padding: 3cqw;
  border-radius: 13cqw;
  background: linear-gradient(160deg, #222f4a 0%, #0a1224 55%, #101a34 100%);
  box-shadow: 0 9cqw 14cqw rgba(0, 6, 20, 0.75), 0 0 0 0.6cqw rgba(160, 200, 255, 0.3), inset 0 0.8cqw 0 rgba(255, 255, 255, 0.14);
}
.rf-phone__body::before {                  /* Kamerainsel */
  content: "";
  position: absolute;
  top: 4.4cqw;
  left: 50%;
  width: 24cqw;
  height: 5.6cqw;
  margin-left: -12cqw;
  border-radius: 3cqw;
  background: #02050b;
  z-index: 3;
}
.rf-phone__body::after {                   /* Einschalttaste */
  content: "";
  position: absolute;
  top: 26cqw;
  right: -1.3cqw;
  width: 1.3cqw;
  height: 16cqw;
  border-radius: 0 0.8cqw 0.8cqw 0;
  background: #2a3858;
}
.rf-phone__screen {
  position: relative;
  aspect-ratio: 9 / 18.4;
  overflow: hidden;
  border-radius: 10cqw;
  background: #021a38;
}
.rf-phone__screen::after {                 /* Glasreflexion */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 32%);
}
.rf-phone .rf-card__media { object-position: top center; }

/* Bewegung im Bild: die Seite "lebt" - langsames Ein- und Auszoomen, je Bild versetzt */
.rf.is-live .rf-card__media {
  transform-origin: 50% 0;
  animation: rf-pan 11s ease-in-out infinite alternate;
}
.rf.is-live .rf-phone .rf-card__media { animation-duration: 8.5s; animation-direction: alternate-reverse; }
.rf.is-live .rf__item:nth-child(2n) .rf-card__media { animation-delay: -4s; }
.rf.is-live .rf__item:nth-child(3n) .rf-card__media { animation-delay: -7s; }
@keyframes rf-pan {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.09) translateY(-2.2%); }
}

/* ---- Live: Karten fliegen ----------------------------------------------------- */
.rf.is-live .rf__list {
  display: block;
  padding: 0;
  max-width: none;
  margin: 0;
  position: absolute;
  inset: 0;
}
.rf.is-live .rf__item {
  position: absolute;
  left: 50%;
  top: var(--rf-hz);
  width: 22rem;     /* wird vom JS je Format und Buehnengroesse gesetzt */
  /* Position und Groesse setzt das JS pro Frame (translate3d + scale) */
  transform: translate3d(-50%, -50%, 0) scale(0.05);
  transform-origin: 50% 50%;
  opacity: 0;
  will-change: transform, opacity, filter;
  pointer-events: none;
}
.rf.is-live .rf__item.is-front { pointer-events: auto; }
/* Beim Ueberfahren leuchtet das Geraet */
.rf.is-live .rf__item.is-front:hover .rf-dev,
.rf.is-live .rf__item.is-front:focus-within .rf-dev {
  box-shadow: 0 5cqw 9cqw rgba(0, 6, 20, 0.7), 0 0 0 0.3cqw rgba(127, 227, 255, 0.85), 0 0 7cqw rgba(63, 170, 255, 0.45), inset 0 0.3cqw 0 rgba(255, 255, 255, 0.18);
}

.rf__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 767px) {
    .rf-card__title { font-size: 1.2rem; }
  .rf-card__text { font-size: 0.85rem; }
}

.rf.is-live { touch-action: pan-y; }


/* Hover und Tastaturfokus der Statuskarte */
.rf.is-live .rf__item.is-front:hover .rf-card__body,
.rf.is-live .rf__item.is-front:focus-within .rf-card__body {
  border-color: rgba(127, 227, 255, 0.85);
  box-shadow: inset 0 0 6cqw rgba(63, 170, 255, 0.4);
}
.rf.is-live .rf__item.is-front:hover .rf-card__body::before,
.rf.is-live .rf__item.is-front:focus-within .rf-card__body::before { filter: drop-shadow(0 0 8px rgba(127, 227, 255, 1)); }
.rf.is-live .rf__item.is-front:hover .rf-card__body::after,
.rf.is-live .rf__item.is-front:focus-within .rf-card__body::after { animation: rf-scan 900ms ease-out 1; }
@keyframes rf-scan { 0% { left: -30%; opacity: 1; } 100% { left: 100%; opacity: 1; } }
.rf.is-live .rf__item.is-front:hover .rf-card__tag,
.rf.is-live .rf__item.is-front:focus-within .rf-card__tag { background: rgba(127, 227, 255, 0.22); border-color: #7fe3ff; letter-spacing: 0.26em; }
.rf.is-live .rf__item.is-front:hover .rf-card__title,
.rf.is-live .rf__item.is-front:focus-within .rf-card__title { text-shadow: 0 0 22px rgba(127, 227, 255, 0.9); }
.rf.is-live .rf__item.is-front:hover .rf-card__go,
.rf.is-live .rf__item.is-front:focus-within .rf-card__go { filter: brightness(1.2) saturate(1.2); letter-spacing: 0.18em; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .rf-card__tag::before { animation: none; }
  .rf-card__body::after { display: none; }
}

/* ---- Festgepinnte Buehne ---------------------------------------------------------
   Die Buehne bleibt waehrend eines Scroll-Korridors stehen (sticky); das Scrollen treibt dabei das
   Rondell an. Erst danach schiebt sich der Footer ins Bild und verdeckt nichts Wichtiges. */
.rf-pin.is-pinned { height: 100svh; }   /* die Seite scrollt dort nicht: Mausrad und Wischen treiben die Karten (ref-flight.js) */
.rf-pin.is-pinned > .rf { position: sticky; top: 0; height: 100svh; min-height: 0; }
.rf-pin.is-pinned .rf__stage { height: 100%; min-height: 0; }

.rf-dock { display: none; }   /* nur bis 900 px sichtbar (Handy, Tablet), am Desktop steht die Karte in der Referenz selbst */
@media (max-width: 900px) {
  .rf .rf-card__body { visibility: hidden; }
  .rf-dock { display: block;
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; padding: 0; transition: opacity 250ms ease; cursor: pointer;
    max-width: 26rem; margin-inline: auto;   /* Tablet: die Karte bleibt kompakt und mittig, sonst ueberragt sie die Referenzen */
    container-type: inline-size;
  }
  .rf-dock .rf-card__body { visibility: visible; width: 100%; margin: 0; padding: 3.2cqw 5cqw 3.6cqw; gap: 1.6cqw; border-radius: 14px; }
  .rf-dock .rf-card__title { font-size: 1.3rem; }
  .rf-dock .rf-card__text { font-size: 0.86rem; }
}