/* Slot-review page (page-slot-review.php). Own .slr-* namespace; theme-aware via tokens.
   Reuses .ocr-hstars (casino-review.css), .oc-stars (casino.css), .sk-vola (slots.css),
   poster--{prov} gradients (home.css). */

/* ---------- HERO ---------- */
.slr-hero { position: relative; padding-block: var(--s-96); background: linear-gradient(90deg, var(--hero), var(--bg)); }
/* hero content paints ABOVE the static decorative backdrop (.oseg-hero-art, z-index:0 — see casino.css) */
.slr-hero > .container { position: relative; z-index: 1; }
.slr-crumbs { font-size: var(--fs-14); color: var(--sub); margin-bottom: var(--s-20); }
.slr-crumbs a { color: var(--sub); text-decoration: none; }
.slr-crumbs a:hover { color: var(--primary); }
.slr-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.slr-hero__head { max-width: 65rem; margin-bottom: var(--s-32); }
.slr-hero__h1 { margin: 0; }
.slr-hero .accent { color: var(--accent); } /* violet highlight — same pattern as .oc-hero/.ocr .accent */
.slr-hero__sub { color: var(--ink); font-size: var(--fs-lead); margin: var(--s-16) 0 0; }
.slr-hero__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-48); align-items: start; }

/* Steckbrief tabs → segmented pill control (same look as the .pv-sort/.sk-sort blob).
   Scoped to slot-review; operator pages keep the .ocr-tabs underline. casino-review.js
   already sets the indicator's translateX+width from the active tab — here the indicator
   just becomes a full-height filled pill instead of a 2px underline. */
.slr-specs .section-head { justify-content: center; text-align: center; }
.slr .ocr-tabs { text-align: center; }         /* centers the inline-flex pill list */
.slr .ocr-tabs__panels { text-align: left; }    /* keep panel content left-aligned */
.slr .ocr-tabs__list {
  display: inline-flex; flex-wrap: nowrap; gap: var(--s-4); max-width: 100%;
  padding: var(--s-4); border: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: var(--radius-pill); background: var(--surface);
  /* nowrap pills don't fit narrow screens → scroll inside the strip instead of overflowing the page
     (same pattern as .sk-sort / casino-review .ocr-tabs--pill). casino-review.js snaps the active tab
     into view. Always-on: harmless when the tabs fit (no scrollbar shows). */
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slr .ocr-tabs__list::-webkit-scrollbar { display: none; }
.slr .ocr-tabs__tab {
  padding: var(--s-8) var(--s-16); border-radius: var(--radius-pill);
  color: var(--ink); white-space: nowrap;
}
/* white label follows the pill (hover + resting) — .is-current is driven by casino-review.js */
.slr .ocr-tabs__tab.is-current { color: var(--on-primary, #fff); }
.slr .ocr-tabs__tab:focus-visible { border-radius: var(--radius-pill); }
.slr .ocr-tabs__ind {
  top: var(--s-4); bottom: var(--s-4); height: auto;
  border-radius: var(--radius-pill); background: var(--accent);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), width .3s ease, opacity .2s ease;
}
/* demo — poster/teaser stage + persistent action bar below */
.slr-demo { display: grid; gap: var(--s-12); }
.slr-stage { position: relative; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(150deg, var(--pg1, var(--accent)), var(--pg2, var(--primary))); display: grid; }
.slr-stage__poster { align-self: stretch; justify-self: stretch; aspect-ratio: 3 / 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s-8); text-align: center; padding: var(--s-32); color: #fff; }
.slr-stage__poster[hidden] { display: none; } /* explicit display:flex above otherwise beats the [hidden] UA rule */
.slr-stage__poster-prov { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .12em; opacity: .85; margin: 0; }
.slr-stage__poster-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-32); line-height: 1.15; margin: 0; }
/* When real cover art is present it sits above (z-index) and covers these labels anyway — hide
   them so they don't flash before the poster image paints. Kept in the DOM (visibility, not
   display/removal). Slots WITHOUT art keep the labelled gradient as the intended fallback. */
.slr-stage__poster:has(.slot-thumb) .slr-stage__poster-prov,
.slr-stage__poster:has(.slot-thumb) .slr-stage__poster-name { visibility: hidden; }
.slr-stage__mount { align-self: stretch; min-height: 22rem; background: var(--surface); }

/* action bar under the stage (persistent) — two buttons side by side, fine print below */
.slr-demo__actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8); align-items: stretch; }
.slr-demo__real, .slr-demo__teaser { width: 100%; }
.slr-demo__age { font-size: var(--fs-12); font-weight: 700; background: rgba(255,255,255,.22);
  padding: 0 var(--s-8); border-radius: var(--radius-pill); margin-left: var(--s-8); }
.slr-demo__fine { grid-column: 1 / -1; font-size: var(--fs-12); color: var(--sub); margin: var(--s-4) 0 0; text-align: center; }

/* Original-Demo dialog (Slotslaunch iframe or graceful fallback) */
.slr-demodlg { width: min(64rem, 94vw); max-width: 94vw; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0; background: var(--surface); color: var(--ink);
  /* scroll the body, not the dialog — keeps the radius + reachable content when shorter than viewport.
     display:flex lives on [open] only (base would beat UA dialog:not([open]){display:none}). */
  max-height: calc(100dvh - var(--s-32)); overflow: hidden; }
.slr-demodlg::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
/* Entrance spring — same pure-CSS [open] keyframe as the Slot-Duell (shared @keyframes slr-pop-in).
   CSS-only on the dialog so a top-layer <dialog> isn't ejected from the top layer by JS transforms. */
.slr-demodlg[open] { display: flex; flex-direction: column; animation: oc-pop-in .32s cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: reduce) { .slr-demodlg, .slr-demodlg[open] { animation: none; } }
.slr-demodlg__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-16);
  padding: var(--s-16) var(--s-20); border-bottom: 1px solid var(--line); margin: 0; }
.slr-demodlg__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-20); line-height: var(--lh-heading); margin: 0; }
.slr-demodlg__close { border: 0; background: none; font-size: var(--fs-28); line-height: 1; cursor: pointer; color: var(--negative); transition: color .25s ease; }
.slr-demodlg__close:hover { color: var(--ink); }
.slr-demodlg__body { flex: 1 1 auto; min-height: 0; padding: var(--s-24); overflow: auto; overscroll-behavior: contain; --sb-color: var(--accent); }
.slr-demogate { text-align: center; max-width: 35rem; margin: 0 auto; display: grid; gap: var(--s-12); padding: var(--s-16) 0; }
.slr-demogate__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-20); line-height: var(--lh-heading); margin: 0; }
.slr-demogate__note { font-size: var(--fs-14); color: var(--sub); margin: 0; }
.slr-demogate__note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: color .25s ease, border-color .25s ease; }
.slr-demogate__note a:hover { color: var(--primary); border-bottom-color: currentColor; }
.slr-demoframe { position: relative; aspect-ratio: 16 / 10; background: #000; border-radius: var(--radius-m); overflow: hidden; }
.slr-demoframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.slr-demofallback { text-align: center; max-width: 34rem; margin: 0 auto; display: grid; gap: var(--s-8); padding: var(--s-24) 0; color: var(--sub); }
.slr-demofallback strong { color: var(--ink); }

/* verdict rail — hero best-casino card reuses .opcard--lead (casino.css) */
.slr-verdict { display: grid; gap: var(--s-16); }
/* slot card: tighter than the hub lead card (scoped overrides — shared .opcard untouched) */
.slr-opcard { padding: var(--s-24); }
.slr-opcard .opcard__logo { margin-top: 0; }
.slr-opcard .opcard__cta { flex-direction: row; }              /* CTAs side by side (hub keeps them stacked) */
.slr-opcard .opcard__cta .btn { flex: 1 1 0; }
.slr-opcard .oc-paychip--more { background: none; border: 0; padding: var(--s-4) 0; font-weight: 400; } /* plain text, not a chip */

/* --- demo-only / no-echtgeld slot variants (hook classes on <main>: .slr--no-demo, .slr--no-echtgeld) --- */
.slr--no-demo .slr-demo__actions { display: flex; flex-direction: column; }        /* single teaser button, full width */
.slr--no-echtgeld .slr-hero__grid { align-items: stretch; }                        /* demo poster + note card equal height */
.slr--no-echtgeld .opcard__terms { font-size: var(--fs-16); text-align: left; }    /* readable GGL note, not tiny terms text */
.slr--no-echtgeld .slr-opcard .opcard__cta { flex-direction: column; }             /* stacked CTAs in the note card */
.slr-rating { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--s-20); }
.slr-rating .eyebrow { margin-bottom: var(--s-8); }
.slr-rating__row { display: flex; align-items: center; gap: var(--s-12); }
.slr-rating__score { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-28); color: var(--ink); }
.slr-rating__score small { font-size: var(--fs-16); color: var(--sub); font-weight: 600; }
.slr-rating__fit { margin: var(--s-12) 0 0; font-size: var(--fs-14); color: var(--primary); font-weight: 600; }

/* casino section now reuses the shared .oc-podium / .opcard component (casino.css) */

/* ---------- TOC ---------- */
.slr-toc { position: sticky; top: var(--header-h); z-index: 15; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.slr-toc__row { display: flex; gap: var(--s-8); overflow-x: auto; padding: var(--s-12) 0; scrollbar-width: none; }
.slr-toc__row::-webkit-scrollbar { display: none; }
.slr-toc__row a { flex: none; font-size: var(--fs-14); font-weight: 600; color: var(--sub); text-decoration: none; padding: var(--s-8) var(--s-16); border-radius: var(--radius-pill); border: 1px solid transparent; }
.slr-toc__row a:hover { color: var(--ink); }
.slr-toc__row a.is-active { color: var(--primary); border-color: var(--line); background: var(--bg); }

/* ---------- TABBED SPEC ---------- */
/* Tab shell reuses casino-review's .ocr-tabs component (styles + animation live in casino-review.css). */
.slr-specs { padding-top: var(--s-48); }
.slr-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8); margin: 0; }
.slr-facts > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--s-16) var(--s-20); }
.slr-facts dt { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .06em; color: var(--sub); }
.slr-facts dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16); color: var(--ink); }
.slr-facts dd a { color: var(--ink); text-decoration: none; transition: color .25s ease; }
.slr-facts dd a:hover { color: var(--primary); }

/* risk panel */
.slr-risk { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--s-24); }
.slr-risk__label { display: block; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .06em; color: var(--sub); margin-bottom: 0; }
/* RTP: label + value on one row (value right-aligned), gradient bar below — mirrors home's .scard__rtp. */
/* Extra breathing room between RTP and Volatilität only (grid gap is uniform → margin widens just this gap). */
.slr-risk__vola { margin-left: var(--s-48); }
.slr-risk__rtp-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-8); margin-bottom: var(--s-2); }
.slr-bar { position: relative; height: .6rem; background: var(--line); border-radius: 999px; overflow: hidden; }
.slr-bar__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 1s cubic-bezier(.4,0,.2,1); }
.slr-bar__num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16); color: var(--ink); }
/* Volatilität: rectangular gold .vola__bar pips (home.css) with the viewport fill-in (stars.js). */
.slr-risk__volabar { display: flex; align-items: center; gap: var(--s-12); }
.slr-risk__volaval { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16); color: var(--ink); }
.slr-risk__maxval { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16); color: var(--ink); }

/* feature checklist */
.slr-featlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-12); }
.slr-featlist li { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-12) var(--s-16); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); font-size: var(--fs-14); }
.slr-featlist li svg { flex: none; }
.slr-featlist .is-on { color: var(--ink); font-weight: 600; }
.slr-featlist .is-on svg { color: var(--primary); }
.slr-featlist .is-off { color: var(--sub); opacity: .6; }

/* interactive Feature-Explorer block (headline + note + mount) */
.slr-features { margin-top: var(--s-40); }
.slr-features__h { margin-bottom: var(--s-8); padding-left: var(--s-20); border-left: var(--s-4) solid var(--nav-gold); }
.slr-features__note { font-size: var(--fs-19); color: var(--sub); margin-bottom: var(--s-20); }

/* prose → .oc-prose primitive (system.css); rtp / seealso below.
   Slot-review only: let prose fill .container--narrow instead of the 60rem cap. */
.slr .oc-prose { max-width: 100%; }
.slr-rtp p:not(.eyebrow):not(.slr-seealso) { font-size: var(--fs-19); color: var(--sub); margin-top: 0; margin-bottom: var(--s-20); }
.slr-rtp p:not(.eyebrow):not(.slr-seealso):last-child { margin-bottom: 0; }
.slr-seealso { font-size: var(--fs-14); color: var(--sub); }
.slr-seealso a,
.slr-demo__fine a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: color .25s ease, border-color .25s ease; }
.slr-seealso a:hover,
.slr-demo__fine a:hover { color: var(--primary); border-bottom-color: currentColor; }
/* RTP → compare CTA callout (opens the Slot-Duell popup; contextual under the vola chart) */
.slr-duellcta { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-16); align-items: center;
  margin: var(--s-20) 0 var(--s-16); padding: var(--s-24); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.slr-duellcta__copy { min-width: 0; }
.slr-duellcta__title { margin: 0 0 var(--s-4) !important; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-20) !important; line-height: var(--lh-heading); color: var(--ink) !important; }
.slr-duellcta__text { margin: 0; font-size: var(--fs-14) !important; color: var(--sub); }
.slr-vola-chart { margin: var(--s-24) 0 var(--s-20); padding: var(--s-24); border: 1px dashed var(--line); border-radius: var(--radius-m); background: var(--surface); }
.slr-note { font-size: var(--fs-12); color: var(--sub); font-style: italic; margin: 0; }

/* bilanz */
.slr-bilanz { background: var(--hero); }
.slr-bilanz__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-24); }
.slr-bilanz__card { border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--s-32); background: var(--surface); }
.slr-bilanz__card h3 { margin: 0 0 var(--s-16); }
.slr-bilanz__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-12); }
.slr-bilanz__card li { display: flex; align-items: flex-start; gap: var(--s-12); font-size: var(--fs-16); }
.slr-bilanz__card li svg { flex: none; margin-top: .2rem; }
.slr-bilanz__card--pro { border-left: 3px solid var(--positive); }
.slr-bilanz__card--pro li svg { color: var(--positive); }
.slr-bilanz__card--con { border-left: 3px solid var(--negative); }
.slr-bilanz__card--con li svg { color: var(--negative); }

/* fazit */
.slr-fazit { padding-top: var(--s-32); }
.slr-fazit__box { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s-24) var(--s-48); align-items: flex-start; background: var(--panel); color: var(--panel-ink); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-32); }
.slr-fazit__rating { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--s-8); }
.slr-fazit__score { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-48); line-height: 1; color: var(--nav-gold); }
.slr-fazit__of { font-size: var(--fs-12); opacity: .7; }
.slr-fazit__rating .ocr-hstar { color: color-mix(in srgb, var(--panel-ink) 25%, transparent); }
.slr-fazit__label { margin: 0; font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.slr-fazit__box .eyebrow { color: var(--nav-gold); margin: 0 0 var(--s-12); opacity: 1; }
.slr-fazit__box h2 { margin: 0 0 var(--s-16); color: inherit; }
.slr-fazit__box p { margin: 0 0 var(--s-24); opacity: .8; }
.slr-fazit__box .slr-fazit__label { margin: 0; opacity: .7; }
.slr-fazit__cta { background: var(--primary); color: var(--on-primary); }

/* other slots */
.slr-other { padding-bottom: var(--s-32); }
.slr-other__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }
/* exactly 3 tiles → 3 columns (no 2+1 orphan); 2 or 4 keep the 2-col default. Desktop-only so the
   mobile 1-col stack (below) isn't out-specified by :has(). */
@media (min-width: 64rem) {
  .slr-other__grid:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
}
.slr-otile { display: flex; align-items: center; gap: var(--s-16); padding: var(--s-16); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .18s, box-shadow .18s, transform .18s; }
.slr-otile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--nav-gold); }
.slr-otile__glyph { flex: none; width: var(--s-48); height: var(--s-48); display: grid; place-content: center; border-radius: var(--radius-s); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-24); color: var(--on-primary); background: linear-gradient(150deg, var(--pg1, var(--accent)), var(--pg2, var(--primary))); }
.slr-otile__body { display: flex; flex-direction: column; min-width: 0; }
.slr-otile__name { font-weight: 700; font-size: var(--fs-16); line-height: var(--lh-lead); }
.slr-otile__meta { font-size: var(--fs-12); color: var(--sub); }
.slr-otile .slr-arrow { margin-left: auto; flex: none; color: var(--nav-gold); }

/* responsible gambling → now the shared .rgg-rgnote band (casino.css) */

/* inline link-button (looks like a link, behaves like a button) */
.slr-linkbtn { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent); text-decoration: underline; }
.slr-linkbtn:hover { color: var(--primary); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- D · volatility model chart ---------- */
.slr-vchart__svg { display: block; width: 100%; height: auto; }
.slr-vchart__base { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.slr-vchart__line { stroke-width: 2; opacity: .35; stroke-linejoin: round; stroke-linecap: round; }
.slr-vchart__line--low { stroke: var(--primary); }
.slr-vchart__line--high { stroke: var(--accent); }
.slr-vchart__line.is-match { opacity: 1; stroke-width: 3.5; }
.slr-vchart__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-16); margin-block: var(--s-12) var(--s-8); font-size: var(--fs-14); }
.slr-vchart__key { display: inline-flex; align-items: center; gap: var(--s-8); color: var(--sub); }
.slr-vchart__key::before { content: ""; width: 1.1rem; height: .2rem; border-radius: 2px; background: currentColor; }
.slr-vchart__key--low { color: var(--primary); }
.slr-vchart__key--high { color: var(--accent); }
.slr-vchart__key.is-match { font-weight: 700; }
.slr-vchart__note { color: var(--sub); font-size: var(--fs-12); }

/* ---------- C · Slot-Duell dialog ---------- */
.slr-duell { width: min(92vw, 40rem); max-width: 40rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); padding: 0; box-shadow: var(--shadow);
  /* scroll the body, not the dialog — overflow:hidden clips to the radius so a scrollbar can't eat the corners.
     display:flex lives on [open] only (base would beat UA dialog:not([open]){display:none}). */
  max-height: calc(100dvh - var(--s-32)); overflow: hidden;
  transform: translateY(0) scale(1); transition: opacity .15s ease, transform .32s cubic-bezier(.34,1.56,.64,1); }
.slr-duell[open] { display: flex; flex-direction: column; animation: oc-pop-in .32s cubic-bezier(.34,1.56,.64,1); } /* shared spring — casino.css @keyframes oc-pop-in */
.slr-duell::backdrop { background: rgba(18,15,12,.55); backdrop-filter: blur(2px); }
.slr-duell__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); padding: var(--s-20) var(--s-24); border-bottom: 1px solid var(--line); }
.slr-duell__head h3 { margin: 0; font-size: var(--fs-20); }
.slr-duell__close { font: inherit; font-size: var(--fs-28); line-height: 1; background: none; border: 0; color: var(--negative); cursor: pointer; padding: 0 var(--s-4); transition: color .25s ease; }
.slr-duell__close:hover { color: var(--ink); }
.slr-duell__pick { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-12); padding: var(--s-24) var(--s-24) var(--s-12); }
.slr-duell__vs strong { color: var(--primary); }
.slr-duell__pick select { font: inherit; font-size: var(--fs-14); font-weight: 600; padding: var(--s-12) var(--s-40) var(--s-12) var(--s-16);
  border: 1px solid var(--line); border-radius: var(--radius-pill); background-color: var(--surface); color: var(--ink);
  flex: 1 1 12rem; min-width: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236B6157' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-16) center; background-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease; }
[data-theme="dark"] .slr-duell__pick select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%239D9790' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.slr-duell__pick select:hover { border-color: var(--nav-gold); }
.slr-duell__pick select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
/* vertical scroll region: table + CTAs scroll together on a short viewport (head + pick stay pinned) */
.slr-duell__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; --sb-color: var(--accent); }
/* body scrolls the wide comparison table HORIZONTALLY only (vertical growth handled by __scroll).
   overscroll-behavior-x:contain stops a horizontal over-swipe from chaining, but the Y axis stays
   auto so a vertical wheel over the table falls through to the modal's vertical scroll (__scroll). */
.slr-duell__body { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding: 0 var(--s-24) var(--s-24); --sb-color: var(--accent); }
.slr-duell__hint { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--s-24); text-align: center; }
.slr-duell__table { width: 100%; border-collapse: collapse; }
.slr-duell__table th, .slr-duell__table td { padding: var(--s-12); text-align: center; border-bottom: 1px solid var(--line); font-size: var(--fs-14); }
.slr-duell__table thead th { font-family: var(--font-display); font-size: var(--fs-16); }
.slr-duell__table tbody th { text-align: left; color: var(--sub); font-weight: 600; }
.slr-duell__table td.is-win { background: color-mix(in srgb, var(--line) 40%, transparent); color: var(--ink); font-weight: 800; }
/* pinned footer — stays put + fully visible while the wide comparison table scrolls in the body */
.slr-duell__foot { flex: none; padding: var(--s-24); border-top: 1px solid var(--line); }
.slr-duell__foot[hidden] { display: none; }
.slr-duell__cta { display: flex; gap: var(--s-8); }
.slr-duell__cta .btn { flex: 1; }
@media (prefers-reduced-motion: reduce) {
  .slr-duell, .slr-duell[open] { animation: none; transition: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 63.9375rem) {
  .slr-hero { padding-top: var(--s-64); }
  .slr-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
  .slr-specs .section-head { align-items: center; }
  .slr-risk { grid-template-columns: 2fr 1.5fr 1fr; }
  .slr-risk__vola { margin-left: var(--s-16); }
  .slr-bilanz__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 47.9375rem) {
  .slr-facts, .slr-featlist, .slr-risk, .slr-bilanz__grid, .slr-other__grid { grid-template-columns: 1fr; }
  .slr-risk { gap: var(--s-16); }
  .slr-featlist { gap: var(--s-8); }
  .slr-risk__vola { margin-left: 0; } /* single-column on phones — no leading gap */
  .slr-duellcta { grid-template-columns: minmax(0, 1fr); }
  .slr-duellcta__copy { text-align: center; }
  .slr-seealso { text-align: center; }
  .slr-bilanz__card { padding: var(--s-24); }
  .slr-fazit { padding-top: var(--s-24); }
  .slr-other { padding-bottom: var(--s-24); }
  .slr-fazit__box { grid-template-columns: 1fr; align-items: center; text-align: center; gap: var(--s-24); padding: var(--s-24); }
  .slr-fazit__box > div:last-child { padding-top: var(--s-24); border-top: 1px solid rgba(255, 255, 255, .1); }
  .slr-demodlg__title { font-size: var(--fs-17); }
  .slr-duell__pick select { flex: 0 0 100%; }
  .slr-duell__table { min-width: 36rem; }
  .slr-duell__cta { flex-direction: column; }
  .slr-toc { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .slr-bar__fill, .slr-otile { transition: none; }
  .slr-otile:hover { transform: none; }
}

/* Responsive fix 2026-07-16 — laptop↓ (≤1359px): single-column demo actions (long DE labels) */
@media (max-width: 84.9375rem) {
  .slr-demo__actions { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet only (768–1023px): demo back to 2-col, smaller opcard CTA, 3-tile other-grid → 1-col.
   Placed AFTER the ≤1359 rule so the 2-col demo wins over the minmax(1fr) at tablet widths. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .slr-opcard .opcard__cta .btn { padding: var(--s-12) var(--s-16); }
  .slr-demo__actions { grid-template-columns: repeat(2, 1fr); }
  .slr-other__grid:has(> :last-child:nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
}

/* Narrow phone (≤460px): stack the operator-card CTAs + fluid-scale the demo action labels. */
@media (max-width: 28.75rem) {
  .slr-opcard .opcard__cta { flex-direction: column; }
  .slr-demo__real, .slr-demo__teaser { font-size: clamp(0.875rem, 0.2rem + 3vw, 1.0625rem); }
  .slr-risk__rtp-top { margin-bottom: var(--s-4); }
  .slr-bar__num { font-size: var(--fs-14); }
  .slr-demodlg__body .btn { font-size: clamp(0.875rem, 0.2rem + 3vw, 1.0625rem); }
}