/* ============================================================================
   /{provider}/ PROVIDER (Hersteller) ARCHIVE — .pv-*
   Reuses .oc-* (hero/toc), .opcard (podium), .oc-crit (trait cards), .sk-* (grid),
   .scard bits (rtp bar), .provider-card (other providers). Per-provider brand accent
   via inline --pv-accent on <main class="pv">.
   ========================================================================== */

/* ---------- template-local hero background token (light #fff / dark #1D1A24) ---------- */
.pv { --pv-hero-bg: #ffffff; }
:root[data-theme="dark"] .pv { --pv-hero-bg: #1D1A24; }

/* FAQ inherits .faq / .faq-item entirely from home.css (global — no provider override) */

/* ---------- hero: two-column (copy + monogram wall) over the motif backdrop (P4) ---------- */
.pv-hero { position: relative; overflow: hidden; background: var(--pv-hero-bg); padding-block: var(--s-96); }
.pv-hero__motif { position: absolute; inset: 0; z-index: 0; }
.pv-hero .container { position: relative; z-index: 1; }
.pv-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-64); align-items: center; }
.pv-hero__copy { min-width: 0; }
.pv-hero__copy h1 { margin: 0 0 var(--s-20); }
.pv-hero__copy h1 .accent { color: var(--pv-accent, var(--accent)); }
.pv-hero__copy .lead { max-width: 42rem; margin: 0; color: var(--ink); }
.pv-hero .eyebrow-pill__dot { background: var(--pv-accent, var(--accent)); }
.pv-nav .oc-toc { margin-top: 0; top: calc(var(--s-32) * -1); }

/* per-provider monogram wall — reuses /spielautomaten/ .sk-hero__wall + .sk-chip, but 2-col
   and the chips are links (glyph-only). Static (no live shuffle — slots.js isn't loaded here). */
.pv-hero__wall { grid-template-columns: repeat(2, 1fr); align-content: start; min-width: 0; }
/* NB: no `transform` transition here — GSAP owns the chip transform for the flip/shuffle
   (hero-wall.js). A CSS transform-transition would double-animate it → janky flip. */
.pv-hero .sk-chip { text-decoration: none; transition: box-shadow .25s ease; }
.pv-hero .sk-chip:hover { box-shadow: var(--shadow-alt, var(--shadow)); }
@media (prefers-reduced-motion: reduce) { .pv-hero .sk-chip { transition: none; } }

/* ---------- Studio-Fakten stat band (P3) ---------- */
/* section = vertical spacing only; the dark panel is now a contained rounded band */
.pv-facts { padding-block: var(--s-48) var(--s-32); }
.pv-facts__band {
  background: var(--panel); color: var(--panel-ink);
  border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); padding: var(--s-32);
  display: grid; grid-template-columns: minmax(0, auto) 1fr; align-items: center; gap: var(--s-32);
}
/* RTP accent panel (highlighted inset card, left) — muted brand gradient (violet→grün) */
.pv-facts__rtp {
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-4);
  padding: var(--s-16) var(--s-24); border-radius: var(--radius-s);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--grad-1) 20%, transparent), color-mix(in srgb, var(--grad-2) 12%, transparent)),
    rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
}
.pv-facts__rtp-l {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; opacity: .6;
}
.pv-facts__rtp-l svg { width: 15px; height: 15px; }
.pv-facts__rtp-v { font-family: var(--font-display); font-weight: 800; line-height: 1; font-size: var(--fs-40); color: #b79bef; }
.pv-facts__rtp-sub { font-size: var(--fs-12); opacity: .55; }
/* the other three facts: icon-chip + stacked value/label, dividers between —
   fill the band and split into three equal thirds */
.pv-facts__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch; gap: var(--s-32);
}
.pv-facts__stat {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-16); text-align: center;
}
.pv-facts__stat + .pv-facts__stat { padding-left: var(--s-32); border-left: 1px solid rgba(255, 255, 255, .1); }
.pv-facts__ico {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-s); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
}
.pv-facts__ico svg { width: var(--s-20); height: var(--s-20); opacity: .7; }
.pv-facts__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pv-facts__body strong { font-family: var(--font-display); font-weight: 800; line-height: 1.15; font-size: var(--fs-32); }
.pv-facts__place .pv-facts__body strong { font-size: var(--fs-24); overflow-wrap: break-word; hyphens: auto; }
.pv-facts .is-green  { color: #37c98a; }
.pv-facts .is-violet { color: #b79bef; }
.pv-facts .is-gold   { color: #E7B24E; }
.pv-facts__body span {
  font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--panel-ink); opacity: .7;
}
.pv-pill {
  display: inline-flex; align-items: center; padding: 4px var(--s-12); border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  color: var(--panel-ink); font-size: var(--fs-14); font-weight: 600; text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
a.pv-pill:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .32); }

/* ---------- "Wo spielen?" casinos section ---------- */
.pv-casinos { background: var(--hero); }

/* ---------- prose (about + editorial) ---------- */
.pv-about { padding-top: var(--s-32); padding-bottom: var(--s-32); }
.pv-about .section-head { max-width: 60rem; margin: 0 auto var(--s-32); }
/* prose → .oc-prose primitive (system.css) */

/* ---------- signature-slot spotlight (P5) ---------- */
.pv-spotlight-sec { padding-top: var(--s-32); }
.pv-spotlight {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--s-40); align-items: center;
  padding: var(--s-32); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: box-shadow .25s ease;
}
.pv-spotlight:hover { box-shadow: var(--shadow); }
.pv-spotlight__poster {
  position: relative; display: grid; place-content: center; height: 100%;
  border-radius: var(--radius-m); overflow: hidden; text-decoration: none;
  background: linear-gradient(155deg, var(--pv-accent, #6b5bbf), var(--pv-accent-deep, #2e2560));
}
/* placeholder monogram — centered; sits behind the future Slotslaunch thumbnail */
.pv-spotlight__glyph { font-family: var(--font-display); font-weight: 800; font-size: 5rem; line-height: 1; color: rgba(255, 255, 255, .92); }
.pv-spotlight__badge {
  position: absolute; top: var(--s-12); left: var(--s-12); padding: 3px var(--s-12); border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .6); color: var(--on-primary); font-size: var(--fs-12); font-weight: 700;
}
.pv-spotlight__body { min-width: 0; }
.pv-spotlight__name { margin: var(--s-8) 0 var(--s-12); }
.pv-spotlight__lead { margin: 0 0 var(--s-16); color: var(--sub); line-height: var(--lh-lead); max-width: 40rem; }
.pv-spotlight__specs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-24) var(--s-48); margin-bottom: var(--s-24); }
.pv-spotlight__rtp { min-width: 12rem; }
/* Volatilität stacked like RTP/Max. Gewinn: label on top, orange pips + value in a <strong> below */
.pv-spotlight__specs .vola { margin-top: 0; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.pv-spotlight__specs .vola__label { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--sub); }
.pv-spotlight__specs .vola strong { display: inline-flex; align-items: center; gap: var(--s-8); font-weight: inherit; }
.pv-spotlight__specs .vola__val { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16); color: var(--ink); margin-left: 0; }
.pv-spotlight__maxwin { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.pv-spotlight__maxwin span { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--sub); }
.pv-spotlight__maxwin strong { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16); }

/* ---------- slot grid: de-monotonized tiles (P2) ---------- */
.pv-grid .sk-tile__poster { position: relative; filter: hue-rotate(var(--pv-hue, 0deg)); }
.pv-grid .sk-tag { cursor: default; }

/* ---------- Load-more (only when >6 slots) ---------- */
/* no-JS fallback cap by position; JS switches to per-tile [hidden] so the re-flow filter stays correct */
.pv-grid.is-collapsed > .sk-tile:nth-child(n+7) { display: none; }
.pv-more { display: flex; justify-content: center; margin-top: var(--s-32); }
.pv-more__btn { min-width: 16rem; }
/* RTP bar/value reuse the shared .sk-rtp component (slots.css) + canonical .scard__rtp-bar.
   Keep the spotlight RTP value at fs-16 so it matches Volatilität/Max. Gewinn. */
.pv-spotlight .scard__rtp-top strong { font-size: var(--fs-16); }

/* ---------- sort control (P6) ---------- */
.pv-sort { position: relative; display: inline-flex; align-items: center; padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.pv-sort__btn { position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: var(--s-8) var(--s-16); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-14); color: var(--ink); transition: color .25s ease; }
.pv-sort__btn.is-current { color: var(--on-primary, #fff); }   /* white label follows the pill (hover + resting) */
.pv-sort__pill { position: absolute; top: var(--s-4); left: var(--s-4); z-index: 0; height: calc(100% - var(--s-8));
  border-radius: var(--radius-pill); background: var(--pv-accent, var(--primary)); transition: transform .3s cubic-bezier(.34,1.56,.64,1), width .3s ease; }
@media (prefers-reduced-motion: reduce) { .pv-sort__pill { transition: none; } }

/* ---------- trait cards (reuses the home .rules-grid component — gold top-border + trace hover,
   no number, no accent underline) — provider shows 4 traits, so override the 5-col default ---------- */
.pv-traits { grid-template-columns: repeat(4, 1fr); margin-bottom: var(--s-64); }
@media (max-width: 63.9375rem) { .pv-traits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 47.9375rem) { .pv-traits { grid-template-columns: 1fr; } }

/* editorial prose blocks — centered column */
.pv-editorial .section-head { justify-content: center; text-align: center; }
/* slots section-head: give the sort control a fixed column so a longer H2 wraps in its own
   column instead of squeezing the sort. Only on laptop+ (>=64rem/1024px) where there's room;
   tablet & phone fall back to the base column layout. Only when the sort exists (>=8 slots). */
@media (min-width: 64rem) {
  .pv-slots .section-head:has(.pv-sort) { display: grid; grid-template-columns: minmax(0, 1fr) 17.75rem; align-items: end; }
}
.pv-block + .pv-block { margin-top: var(--s-48); }
/* section headings now live inside .oc-prose (styled by the primitive) */

/* ---------- Andere Hersteller (P7 — reuses .provider-card) ---------- */
.pv-others__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); margin-top: var(--s-32); }

/* ---------- responsive ---------- */
@media (max-width: 63.9375rem) {
  .pv-hero { padding-top: var(--s-64); }
  .pv-hero__grid { grid-template-columns: 1fr; gap: var(--s-40); }
  .pv-facts__band { grid-template-columns: 1fr; gap: var(--s-20); }
  .pv-facts__rtp { align-items: center; text-align: center; }
  .pv-facts__stat { justify-content: flex-start; }
  .pv-spotlight { grid-template-columns: 1fr; gap: var(--s-32); }
  .pv-spotlight__poster { aspect-ratio: 3 / 2; }
  .pv-others__grid { grid-template-columns: 1fr; }
}
@media (max-width: 47.9375rem) {
  .pv-facts__list { flex-direction: column; gap: var(--s-24); }
  .pv-facts__stat + .pv-facts__stat { padding-left: 0; border-left: 0; }
  .pv-facts__body strong { font-size: var(--fs-28); }
  .pv-spotlight__specs { gap: var(--s-8) var(--s-32); }
  .pv-spotlight { grid-template-columns: minmax(0, 1fr); gap: var(--s-24); padding: var(--s-24); }
}