/* Beispielanzeigen als Coverflow - Stylesheet der React-Insel src/components/rw/AnzeigenReel.tsx.
   Eigene Datei wie if-flow.css, damit die Insel vollstaendig beschrieben ist und nicht am
   <style>-Block von reichweite.html haengt. Eingebunden im <head> von reichweite.html.
   Gleiche Mechanik wie die Filmrolle auf ImmoFilm, aber auf hellem Grund: die Nachbarkarten
   treten ueber Deckkraft und Drehung zurueck, nicht ueber brightness() - ein abgedunkeltes Weiss
   sieht auf #f8f9fa nach Fehler aus. */
/* Fuenf Karten auf einer Buehne, die mittlere steht frontal, die Nachbarn drehen sich weg.
   --rw-reel-b ist die Kartenbreite, der Versatz steht in Prozent davon und waechst deshalb mit
   der Karte mit. Jeder Zustand haengt an data-pos, die Komponente setzt nur dieses Attribut. */
/* Unter 640 px ist die Karte fast so breit wie der Inhalt (17.5rem auf 390 px): die Anzeige ist der
   Kern der Seite und muss auf dem Handy lesbar sein; von den Nachbarn bleibt ein Streifen sichtbar. */
.rw-reel { --rw-reel-b: 17.5rem; --rw-reel-v1: 72%; --rw-reel-v2: 130%; }
@media (min-width: 640px)  { .rw-reel { --rw-reel-b: 18rem; } }
@media (min-width: 768px)  { .rw-reel { --rw-reel-b: 20rem; } }
@media (min-width: 1024px) { .rw-reel { --rw-reel-b: 22rem; } }
@media (min-width: 1280px) { .rw-reel { --rw-reel-b: 24rem; } }

/* Alle Karten liegen in einer Rasterzelle uebereinander. Damit bestimmt die hoechste Karte die
   Hoehe der Buehne - anders als bei den Filmkarten (fixes 9:16) ist die Hoehe einer Anzeige nicht
   aus der Breite ableitbar: Absenderzeile, Anzeigentext und Formularzeile kommen zum Motiv hinzu. */
.rw-reel-buehne { position: relative; display: grid; grid-template-columns: var(--rw-reel-b); justify-content: center; align-items: start; perspective: 1400px; }
.rw-reel-karte { position: relative; grid-area: 1 / 1; width: var(--rw-reel-b); transform-origin: center center; transition: transform 800ms cubic-bezier(.25,1,.5,1), opacity 800ms cubic-bezier(.25,1,.5,1), filter 800ms ease, box-shadow 800ms ease; }
.rw-reel-karte[data-pos="0"]    { transform: translateX(0) scale(1); opacity: 1; z-index: 30; box-shadow: 0 30px 70px rgba(11,25,32,0.18); }
.rw-reel-karte[data-pos="1"]    { transform: translateX(var(--rw-reel-v1)) scale(0.84) rotateY(-24deg); opacity: 0.55; z-index: 20; box-shadow: 0 18px 40px rgba(11,25,32,0.10); }
.rw-reel-karte[data-pos="-1"]   { transform: translateX(calc(var(--rw-reel-v1) * -1)) scale(0.84) rotateY(24deg); opacity: 0.55; z-index: 20; box-shadow: 0 18px 40px rgba(11,25,32,0.10); }
.rw-reel-karte[data-pos="2"]    { transform: translateX(var(--rw-reel-v2)) scale(0.68) rotateY(-38deg); opacity: 0.25; z-index: 10; filter: blur(1px); }
.rw-reel-karte[data-pos="-2"]   { transform: translateX(calc(var(--rw-reel-v2) * -1)) scale(0.68) rotateY(38deg); opacity: 0.25; z-index: 10; filter: blur(1px); }
.rw-reel-karte[data-pos="fern"] { transform: scale(0.4); opacity: 0; z-index: 0; }

/* Die Nachbarkarten sind Ziele: ihre Flaeche holt sie in die Mitte. Der Knopf liegt ueber der
   ganzen Karte, die mittlere Karte traegt keinen. */
.rw-reel-wahl { position: absolute; inset: 0; z-index: 2; cursor: pointer; border-radius: inherit; }
.rw-reel-wahl:focus-visible { outline: 2px solid #2453ff; outline-offset: -6px; }

/* Der Anzeigentext haelt Zeilen frei, damit die Motive aller Karten auf einer Linie beginnen:
   drei Zeilen auf der schmalen Karte, ab 1024 px zwei - dort ist die Karte 22rem breit und kein
   Text laenger als zwei Zeilen. 1.32rem ist eine Zeile (0.88rem x 1.5), das 1rem obendrauf ist
   das pb-4 der Klasse: min-height rechnet mit box-sizing: border-box, also mit dem Innenabstand. */
.rw-reel-text { min-height: calc(3 * 1.32rem + 1rem); }
@media (min-width: 1024px) { .rw-reel-text { min-height: calc(2 * 1.32rem + 1rem); } }

.rw-reel-punkt { height: 0.5rem; width: 0.5rem; border-radius: 999rem; background: rgba(0,0,0,0.18); transition: width 300ms ease, background-color 300ms ease; }
.rw-reel-punkt[aria-current="true"] { width: 1.75rem; background: #000000; }
.rw-reel-punkt:focus-visible { outline: 2px solid #2453ff; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .rw-reel-karte, .rw-reel-punkt { transition: none; }
}