/* =====================================================================
   Quiznight 2 · DER GRIFF ZUM MARKTPLATZ · ONLINE (marktgriff.js)
   Der dritte Platz in der unteren Reihe des Schaufensters von Akt 3
   (finale.css: .fn-schau — eine große Karte, darunter zwei kleine): der FÄCHER
   aus drei Titelbildern, darunter die Taste „Marktplatz". Die große Karte behält
   so ihre Höhe; die zwei kleinen geben je ein Drittel ihrer Breite ab.
   Am Fernseher baut marktgriff.js den Griff nicht — die Raster-Regel gilt darum
   nur für Schaufenster, in denen er steht (:has(> .fm)).
   Maß: --sk (1cqmin der Bühne, wie die Set-Karte). Farben: die Rollen der Bühne
   (--acc, --acc2, --g0, --t0, --t1) und Weiß/Schwarz als Licht und Schatten, wie
   setkarte.css. Bewegt wird nur transform und opacity.
   ===================================================================== */
.fn-schau:has(> .fm) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fn-schau[data-n="2"]:has(> .fm) .fn-karte:not(.gross) { grid-column: 1 / 3; }

/* ---- Der Griff: EIN Knopf. Rundung, Schatten und Glasrahmen wie die Set-Karte — er steht in derselben Szene, ist aber keine Karte (.sk / .fn-karte). ---- */
.fm { --fm-grund: color-mix(in srgb, var(--g0, #0a0a10) 82%, #000); --fk-b: calc(var(--sk) * 15.4); --fk-h: calc(var(--sk) * 8.8); --fk-x: calc(var(--sk) * 3.6);
  position: relative; display: block; min-width: 0; min-height: 0; appearance: none; border: 0; margin: 0; padding: 0; font: inherit; color: #fff; text-align: left; cursor: pointer; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--sk) * 2.4); background: radial-gradient(120% 80% at 50% 0, color-mix(in srgb, var(--acc) 30%, transparent), transparent 70%), var(--fm-grund);
  box-shadow: calc(var(--sk) * .6) calc(var(--sk) * 1.4) calc(var(--sk) * 3.2) rgba(0, 0, 0, .55); transition: transform .28s cubic-bezier(.2, .8, .2, 1); -webkit-tap-highlight-color: transparent; }
.fn-rechts.da .fn-blatt .fm { animation: fn-karte .55s var(--k-schnapp) 250ms backwards; }
.fm:hover, .fm:focus-visible { transform: translateY(calc(var(--sk) * -.5)) scale(1.012); }
.fm:active { transform: scale(.985); transition-duration: .08s; }
.fm:focus-visible { outline: .4cqmin solid #fff; outline-offset: .3cqmin; }
.fm-rahmen { position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1);
  box-shadow: inset 0 0 0 max(1px, calc(var(--sk) * .22)) rgba(255, 255, 255, .24), inset calc(var(--sk) * .5) calc(var(--sk) * .6) calc(var(--sk) * 1.2) rgba(255, 255, 255, .12); }
.fm:hover .fm-rahmen, .fm:focus-visible .fm-rahmen { box-shadow: inset 0 0 0 max(1.5px, calc(var(--sk) * .4)) color-mix(in srgb, var(--acc2) 62%, #fff), inset calc(var(--sk) * .5) calc(var(--sk) * .6) calc(var(--sk) * 1.2) rgba(255, 255, 255, .16); }

/* ---- DER FÄCHER: drei Karten; die vordere hebt ab und dreht nach hinten, die nächste rückt mit Schwung nach (data-p · data-heb · data-unten · data-vor: marktgriff.js). ---- */
.fm .mkf { position: absolute; left: 0; right: 0; top: calc(var(--sk) * 1.2); bottom: calc(var(--sk) * 8); z-index: 1; }
.fm .mkf-k { position: absolute; left: 50%; top: 50%; width: var(--fk-b); height: var(--fk-h); margin: calc(var(--fk-h) / -2) 0 0 calc(var(--fk-b) / -2); border-radius: calc(var(--sk) * 1.2); overflow: hidden; background: var(--fm-grund);
  box-shadow: 0 0 0 max(1.5px, calc(var(--sk) * .28)) rgba(255, 255, 255, .92), 0 calc(var(--sk) * .7) calc(var(--sk) * 1.8) rgba(0, 0, 0, .6);
  transition: transform .9s cubic-bezier(.5, 0, .25, 1), opacity .45s ease-out, z-index 0s linear .3s; will-change: transform; }
.fm .mkf-k i { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; background-color: var(--fm-grund); }
.fm .mkf-k[data-p="0"] { transform: none; z-index: 3; transition: transform .9s cubic-bezier(.3, 1.36, .45, 1), opacity .45s ease-out, z-index 0s linear .3s; }
.fm .mkf-k[data-p="1"] { transform: translate(calc(var(--fk-x) * -1), calc(var(--sk) * .4)) rotate(-8deg) scale(.82); z-index: 1; }
.fm .mkf-k[data-p="2"] { transform: translate(var(--fk-x), calc(var(--sk) * .4)) rotate(7deg) scale(.82); z-index: 2; }
.fm .mkf-k[data-heb] { transform: translate(calc(var(--sk) * -.6), calc(var(--sk) * -.9)) rotate(-3deg) scale(1.05); z-index: 4; transition: transform .24s cubic-bezier(.3, 0, .3, 1); }
.fm .mkf-k[data-unten] { z-index: 0 !important; }
.fm .mkf-k::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.fm .mkf-k[data-p="1"]::after, .fm .mkf-k[data-p="2"]::after { opacity: .38; }
.fm .mkf[data-vor] .mkf-k { transform: translateY(calc(var(--sk) * 1.4)) scale(.8) !important; opacity: 0; transition: none; }

/* ---- DIE TASTE: unten über die Breite des Platzes, in der Farbe der Bühne (wie „Jetzt spielen", nur kleiner) — Fächer und Taste sind EIN Stück. ---- */
.fm-taste { position: absolute; z-index: 4; left: calc(var(--sk) * 1.4); right: calc(var(--sk) * 1.4); bottom: calc(var(--sk) * 1.4); height: calc(var(--sk) * 5.4); min-height: 26px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--sk) * .8);
  padding: 0 calc(var(--sk) * .9) 0 calc(var(--sk) * 2); border-radius: 99px; white-space: nowrap; color: var(--auf-acc, #fff); pointer-events: none;
  background: linear-gradient(120deg, color-mix(in srgb, var(--acc) 88%, #fff), var(--acc) 46%, color-mix(in srgb, var(--acc) 74%, #000));
  box-shadow: 0 calc(var(--sk) * .8) calc(var(--sk) * 2) rgba(0, 0, 0, .5), inset 0 0 0 max(1px, calc(var(--sk) * .24)) rgba(255, 255, 255, .46), inset 0 calc(var(--sk) * .5) calc(var(--sk) * .8) rgba(255, 255, 255, .22); }
.fm-taste b { font: 800 max(11px, calc(var(--sk) * 2.2))/1 var(--f-body); }
.fm-taste i { flex: none; box-sizing: border-box; width: calc(var(--sk) * 3.6); height: calc(var(--sk) * 3.6); min-width: 18px; min-height: 18px; padding: calc(var(--sk) * .85); border-radius: 50%; background: color-mix(in srgb, var(--auf-acc, #fff) 18%, transparent); transition: transform var(--d-kurz) var(--k-schnapp); }
.fm-taste i svg { display: block; width: 100%; height: 100%; }
.fm:hover .fm-taste i, .fm:focus-visible .fm-taste i { transform: translateX(calc(var(--sk) * .4)) scale(1.08); }

/* ---- DER PLATZHALTER nach dem Tipp: liegt über dem Schaufenster. Schlicht — hier wird nichts gestaltet, nichts gewählt und nichts gestartet. ---- */
.fn-rechts:has(.fm) { position: relative; }
.fn-rechts[data-fmoffen] > :not(.fm-platz) { visibility: hidden; }
.fm-platz { position: absolute; inset: 0; z-index: 8; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 1.3cqmin; padding: 2.2cqmin; box-sizing: border-box; border-radius: 2.4cqmin; color: #fff;
  background: color-mix(in srgb, var(--g0, #0a0a10) 90%, #000); box-shadow: inset 0 0 0 max(1px, .22cqmin) rgba(255, 255, 255, .24), .6cqmin 1.4cqmin 3.2cqmin rgba(0, 0, 0, .55); animation: fn-ein .26s var(--k-ein) both; }
.qo-schirm .fm-platz { bottom: 3cqmin; }
.fm-pkopf { display: flex; align-items: center; gap: 1.2cqmin; }
.fm-pkopf b { font: 900 max(12px, 3.2cqmin)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.fm-pkopf i { margin-left: auto; font: 800 max(9px, 1.5cqmin)/1 var(--f-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase; padding: .7cqmin 1.1cqmin; border-radius: .9cqmin; background: #fff; color: #0a0a10; }
.fm-platz p { margin: 0; font: 600 max(10px, 2cqmin)/1.3 var(--f-body); color: var(--t1, rgba(255, 255, 255, .8)); }
.fm-psets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 1.2cqmin; min-height: 0; }
.fm-pset { position: relative; overflow: hidden; min-height: 0; border-radius: 1.6cqmin; background: color-mix(in srgb, var(--g0, #0a0a10) 70%, #000); box-shadow: inset 0 0 0 max(1px, .2cqmin) rgba(255, 255, 255, .2); }
.fm-pset i { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; }
.fm-pset::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .82)); }
.fm-pset b { position: absolute; z-index: 1; left: 1.2cqmin; right: 1.2cqmin; bottom: 1cqmin; font: 900 max(10px, 2.3cqmin)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; text-shadow: 0 .3cqmin 1.4cqmin rgba(0, 0, 0, .8); }
.fm-pset.fm-serif b { font-family: "Playfair Display", serif; font-style: italic; text-transform: none; }
.fm-pset.fm-pixel b { font: 400 max(9px, 1.5cqmin)/1.2 "Press Start 2P", monospace; }
.fm-pset u { position: absolute; z-index: 1; right: .8cqmin; top: .8cqmin; text-decoration: none; font: 800 max(9px, 1.4cqmin)/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; padding: .6cqmin 1cqmin; border-radius: 99px; background: var(--acc2); color: var(--auf-acc2, #14141a); }
.fm-pset.an { box-shadow: inset 0 0 0 max(2px, .5cqmin) var(--acc2); }
.fm-zurueck { justify-self: start; appearance: none; border: 0; margin: 0; cursor: pointer; white-space: nowrap; font: 800 max(11px, 2.4cqmin)/1 var(--f-body); padding: 1.5cqmin 2.8cqmin; border-radius: 10cqmin;
  color: var(--auf-acc, #fff); background: linear-gradient(120deg, color-mix(in srgb, var(--acc) 88%, #fff), var(--acc) 46%, color-mix(in srgb, var(--acc) 74%, #000)); box-shadow: inset 0 0 0 .24cqmin rgba(255, 255, 255, .46); }
.fm-zurueck:focus-visible { outline: .4cqmin solid #fff; outline-offset: .3cqmin; }

/* Reduzierte Bewegung: EIN stehendes Bild — nichts wandert, nichts zieht, nichts atmet. */
@media (prefers-reduced-motion: reduce) { .fm, .fm *, .fm-platz { animation: none !important; transition: none !important; } }