/* Mutlantik — das Bilderkarussell.
 *
 * Ein großes Bild vorn, links und rechts je zwei kleinere, die schräg nach
 * hinten gedreht sind. Jede Karte trägt ihre Lage in Variablen, die das Skript
 * beim Blättern neu setzt:
 *
 *   --weit   waagerechter Versatz, in Kartenbreiten
 *   --dreh   Drehung um die senkrechte Achse
 *   --gross  Maßstab
 *
 * Die Bewegung macht eine Transition — keine Animationsbibliothek.
 */

.faecher {
  /* Eine Kartenbreite. Alles andere — Versatz, Pfeile, Ring — rechnet damit. */
  --kb: clamp(280px, 34vw, 720px);
  --gleiten: cubic-bezier(.22, .8, .24, 1);
  position: relative;
  margin-top: var(--r7);
}

/* Die äußeren Karten ragen über den Bildschirmrand. Das allein macht das
   Dokument breiter, das Telefon zoomt die ganze Seite heraus, und sie lässt
   sich seitlich schieben. Beschnitten wird am Abschnitt (volle Breite), clip
   statt hidden, damit senkrecht nichts abgeschnitten wird. */
.faecher-abschnitt { overflow-x: clip; }

/* Der Weg zum ganzen Bestand steht mittig unter dem Karussell, nicht am Rand */
.faecher-abschnitt .abschnitt-wege { justify-content: center; }

.faecher-buehne {
  position: relative;
  height: calc(var(--kb) * .75 + 3.5rem);
  perspective: 1600px;
  perspective-origin: 50% 45%;
}

.faecher-karte {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--kb);
  aspect-ratio: 4 / 3;

  --weit: 0;
  --dreh: 0deg;
  --gross: 1;

  transform:
    translate(-50%, -50%)
    translateX(calc(var(--weit) * var(--kb)))
    rotateY(var(--dreh))
    scale(var(--gross));
  transform-origin: center;

  /* Ein dunkler Rahmen wie bei einem gerahmten Bild */
  border: 3px solid #1D160F;
  border-radius: 3px;
  background: #FCFBF8;
  box-shadow:
    0 22px 44px -8px rgba(21, 15, 8, .38),
    0 3px 8px rgba(21, 15, 8, .16);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;

  transition:
    transform .7s var(--gleiten),
    opacity .5s ease,
    filter .5s ease;
}

/* Hinten stehende Karten treten zurück */
.faecher-karte.ist-hinten { filter: brightness(.86) saturate(.9); }
.faecher-karte.ist-fort { opacity: 0; pointer-events: none; }

.faecher-bild {
  display: block;
  width: 100%;
  height: 100%;
  /* Passepartout: das Stück muss ganz zu sehen sein */
  padding: 10px;
}
.faecher-bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.faecher-karte.ist-vorn:focus-visible {
  outline: 3px solid var(--messing);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- Bedienung */

/* Deckt genau die vordere Karte ab, fängt aber keine Klicks — nur die Pfeile */
.faecher-bedienung {
  position: absolute;
  z-index: 20;
  top: 50%;
  left: 50%;
  width: var(--kb);
  aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.faecher-pfeil {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(29, 22, 15, .58);
  color: #FCFBF8;
  cursor: pointer;
  pointer-events: auto;
  transform: translateY(-50%);
  transition: background .2s var(--ruhig), transform .2s var(--ruhig);
}
.faecher-pfeil.zurueck { left: 14px; }
.faecher-pfeil.vor { right: 14px; }
.faecher-pfeil svg { width: 20px; height: 20px; }
.faecher-pfeil:hover { background: var(--messing); }
.faecher-pfeil:active { transform: translateY(-50%) scale(.94); }
.faecher-pfeil:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(252, 251, 248, .9), 0 0 0 6px var(--messing);
}

/* Der Ring zeigt, wann das Karussell von selbst weiterblättert */
.faecher-uhr {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  transform: rotate(-90deg);
}
.faecher-uhr circle { fill: none; stroke-width: 3.5; }
.faecher-uhr-grund { stroke: rgba(29, 22, 15, .16); }
.faecher-uhr-lauf {
  stroke: var(--messing);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.faecher.laeuft .faecher-uhr-lauf {
  animation: faecher-uhr var(--takt, 5s) linear forwards;
}
.faecher.haelt .faecher-uhr-lauf { animation-play-state: paused; }
.faecher:not(.blaettert) .faecher-bedienung { display: none; }

@keyframes faecher-uhr { to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------------ Tafel */

.faecher-tafel {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--r4);
  flex-wrap: wrap;
  min-height: 2.6em;
  margin-top: var(--r5);
  text-align: center;
}
.faecher-titel {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  color: var(--tinte);
  max-width: 46ch;
}
.faecher-preis {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  color: var(--messing);
  white-space: nowrap;
}

/* ------------------------------------------------------ Ohne Skript */

/* Solange kein Skript läuft, stehen die Karten in einer Reihe zum Wischen */
.faecher:not(.bereit) .faecher-buehne {
  height: auto;
  display: flex;
  gap: var(--r4);
  overflow-x: auto;
  perspective: none;
  padding-bottom: var(--r3);
}
.faecher:not(.bereit) .faecher-karte {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 min(80vw, 360px);
  width: auto;
  transform: none;
}
.faecher:not(.bereit) .faecher-bedienung,
.faecher:not(.bereit) .faecher-tafel { display: none; }

/* ------------------------------------------------------------------ Handy */

@media (max-width: 700px) {
  .faecher { --kb: 72vw; }
  .faecher-pfeil { width: 40px; height: 40px; }
  .faecher-pfeil.zurueck { left: 8px; }
  .faecher-pfeil.vor { right: 8px; }
}

/* --------------------------------------------------------- Ruhige Fassung */

@media (prefers-reduced-motion: reduce) {
  .faecher-karte { transition: opacity .2s ease, filter .2s ease; }
  .faecher-uhr { display: none; }
}