/* Operator-review SPOKE (/online-casino/{slug}/) — StarGames pilot.
   Own ocr-* prefix; ALL selectors scoped under .ocr so nothing can leak to the /online-casino/ hub.
   Loads AFTER home.css + casino.css → reuses tokens, .btn, .eyebrow*, .section-head*, .anim-line-*,
   .oc-toc__* (jump-nav), .oc-paychip, .oc-stars, .scard, .faq-item, .eyebrow-pill. */

.ocr-section { scroll-margin-top: calc(var(--header-h, 82px) + 5rem); }
.ocr-note { margin: var(--s-16) 0 0; font-size: var(--fs-12); color: var(--sub); }
.ocr-terms { margin: 0; font-size: var(--fs-12); color: var(--sub); }
.ocr .accent { color: var(--accent); }

/* ---------- 1 · HERO ---------- */
.ocr-hero { position: relative; background: linear-gradient(90deg, var(--hero), var(--bg)); padding-block: var(--s-96); }
/* hero content paints ABOVE the static decorative backdrop (.oseg-hero-art, z-index:0 — see casino.css) */
.ocr-hero > .container { position: relative; z-index: 1; }
/* jump-nav: centering + spacing now live on the shared base .oc-toc (casino.css) — used by all pages */

/* Right-edge section rail (.ocr-rail) → moved to the GLOBAL system.css so any page with the
   markup gets it (driven by the shared assets/js/toc-rail.js). */

.ocr-hero__grid { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s-32) var(--s-24); }
.ocr-hero__grid > * { min-width: 0; }
.ocr-hero__logo { display: grid; place-content: center; height: 100%; padding: var(--s-20);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-m); }
.ocr-hero__logo img { width: 150px; height: 60px; object-fit: contain; }

.ocr-hero__head { display: grid; }
#ocr-h1 { font-size: var(--fs-h2); margin-bottom: var(--s-8); }
/* Rating = one unified panel: [stars + Redaktionswertung] · big score · divider · green fit note (11b). */
.ocr-hero__rateline { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s-16) var(--s-24); margin: var(--s-16) 0 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--s-16) var(--s-24); }
.ocr-rate__stars { display: flex; flex-direction: column; gap: var(--s-4); }
.ocr-rate__label { font-family: var(--font-display); font-size: var(--fs-12); color: var(--sub); }
.ocr-hero__score { display: inline-flex; align-items: baseline; gap: .1em; font-family: var(--font-display); }
.ocr-hero__score strong { font-weight: 700; font-size: var(--fs-36); line-height: 1; color: var(--nav-gold); }
.ocr-hero__score span { font-size: var(--fs-16); color: var(--sub); }
.ocr-fit { display: inline-flex; align-items: center; font-size: var(--fs-16); font-weight: 700; color: var(--primary);
  border-left: 1px solid var(--line); padding-left: var(--s-24); }
/* rating-star base rules moved to system.css (site-wide widget); operator-specific tweaks below */
.ocr-hero__verdict { margin: 0; max-width: 60rem; color: var(--ink); }

/* Container 2 — facts + bonus + CTAs + terms, stacked in its own grid below the identity block. */
.ocr-hero__meta { display: grid; row-gap: var(--s-16); margin-top: var(--s-24); }

/* Fact tiles: separate mini-cards, gold icon tile left of a label/value stack; last value (Lizenz) in green. */
.ocr-facts { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-16); }
.ocr-fact { display: flex; align-items: center; gap: var(--s-16); min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--s-16);
  transition: box-shadow .25s ease, transform .25s ease; }
.ocr-fact:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow); }
.ocr-fact__ico { flex-shrink: 0; display: grid; place-content: center; width: var(--s-56); height: var(--s-56);
  background: var(--hero); border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--nav-gold); }
.ocr-fact__ico .oc-ico { width: var(--s-24); height: var(--s-24); }
.ocr-fact__body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.ocr-fact__label { font-size: var(--fs-10); text-transform: uppercase; letter-spacing: .05em; color: var(--sub); }
.ocr-fact__value { font-family: var(--font-display); font-size: var(--fs-20); line-height: 1.15; color: var(--ink); }

/* Bonus banner: --surface bg + --line border + --radius-m, decorative chips (ocr-bonus.png) bleed off the
   right edge (transparent left). padding-right reserves the chip zone so the CTA never sits under the art;
   background-origin:border-box keeps the chips pinned to the true right edge regardless of that padding. */
.ocr-bonusbar { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4) var(--s-32);
  padding: var(--s-20) var(--s-32);
  background-color: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; transition: box-shadow .25s ease; }
/* decorative chips confined to the right reserve so they can never bleed under the CTAs (art is a 5705×392 strip) */
.ocr-bonusbar::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 420px; z-index: 0;
  background: url(../img/ocr-bonus-v2.png) right center / cover no-repeat; pointer-events: none;
  clip-path: polygon(125px 0, 100% 0, 100% 100%, 0 100%); }
.ocr-bonusbar > * { position: relative; z-index: 1; }
.ocr-bonusbar:hover { box-shadow: var(--shadow); }
.ocr-bonusbar__text { display: grid; gap: var(--s-4); min-width: max-content; }  /* keep the offer on one line; force the CTAs to wrap below instead of colliding */
.ocr-bonusbar__label { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .05em; color: var(--sub); }
.ocr-bonusbar__amount { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-24); line-height: var(--lh-heading); color: var(--ink); }
.ocr-bonusbar__amount span { color: var(--primary); white-space: nowrap; }
.ocr-bonusbar__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s-12); flex-shrink: 0; }
.ocr-bonusbar__actions .btn { min-width: 11rem; }
.ocr-bonusbar__terms { flex-basis: 100%; margin: 0; }   /* own full-width row under the offer, not cramped beside it */
@media (max-width: 47.9375rem) {
  .ocr-hero__grid { grid-template-columns: 1fr; gap: var(--s-24); }
  .ocr-bonusbar { padding-right: var(--s-32); }
  .ocr-bonusbar::after { display: none; }
  .ocr-bonusbar__actions { margin-left: 0; width: 100%; }
}
.ocr-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-bottom: var(--s-12); }

/* ---------- 2 · JUMP-NAV — now the hub-style .oc-toc inside the hero (casino.css), no sticky bar ---------- */

/* ---------- 3 · RATING SCORECARD ---------- */
.ocr-rating { padding-top: var(--s-48); }
.ocr-scorecard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-32) var(--s-48); align-items: center;
  margin-top: var(--s-32); padding: var(--s-32); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); box-shadow: 0 6px 22px transparent; transition: box-shadow .25s ease; }
.ocr-scorecard:hover { box-shadow: var(--shadow); }
.ocr-scorecard__overall { height: 100%; }
/* overall = dark rounded box (12b): big score · von 5 · gold stars · GESAMTWERTUNG (pinned to the bottom) */
.ocr-overall { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2);
  min-width: 11rem; height: 100%; padding: var(--s-24) var(--s-32); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-m); }
.ocr-overall__score { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-48); line-height: 1; color: var(--panel-ink); }
.ocr-overall__of { font-size: var(--fs-12); color: var(--panel-ink); opacity: .7; }
/* stars inside the dark overall box: muted on-panel base (empty), gold fill — same fill-in as the hero */
.ocr-overall .ocr-hstars { gap: .12em; }
.ocr-overall .ocr-hstar { color: color-mix(in srgb, var(--panel-ink) 25%, transparent); }
.ocr-overall__label { margin: auto 0 0; font-size: var(--fs-12); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--panel-ink); opacity: .7; }
.ocr-scorecard__bars { list-style: none; margin: 0; padding: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-24) var(--s-48); }
.ocr-score-bar__top { display: flex; align-items: center; gap: var(--s-8); margin-bottom: var(--s-8); }
.ocr-score-bar__ico { flex: none; display: grid; place-content: center; width: var(--s-28); height: var(--s-28);
  background: var(--hero); border: 1px solid color-mix(in srgb, var(--nav-gold) 15%, transparent);
  border-radius: var(--radius-xs); color: var(--nav-gold); }
.ocr-score-bar__ico .oc-ico { width: var(--s-16); height: var(--s-16); }
.ocr-score-bar__label { flex: 0 1 auto; min-width: 0; position: relative; font-size: var(--fs-14); color: var(--sub);
  transition: color .25s ease; }
/* animated underline (scaleX; text-decoration can't transition) — grows from the left on hover, exits right on leave */
.ocr-score-bar__label::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right center; transition: transform .25s ease; }
.ocr-score-bar__label:hover { color: var(--accent); }
.ocr-score-bar__label:hover::after { transform: scaleX(1); transform-origin: left center; }
.ocr-score-bar__val { flex: none; margin-left: auto; font-family: var(--font-display); font-size: var(--fs-14); color: var(--ink);
  font-variant-numeric: tabular-nums; background: var(--hero); border: 1px solid color-mix(in srgb, var(--nav-gold) 15%, transparent);
  border-radius: var(--radius-xs); padding: var(--s-2) var(--s-8); }
.ocr-score-bar__track { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.ocr-score-bar__track i { display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 1s cubic-bezier(.65, 0, .35, 1); }
@media (prefers-reduced-motion: reduce) { .ocr-score-bar__track i { transition: none; } }

/* ---------- 4 · VORTEILE / NACHTEILE ---------- */
.ocr-pc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-24); }
.ocr-pc__grid > * { min-width: 0; }
.ocr-pc__col { padding: var(--s-32); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.ocr-pc__col h3 { margin: 0 0 var(--s-16); }
.ocr-pc__col--pro { border-left: 3px solid var(--positive); }
.ocr-pc__col--con { border-left: 3px solid var(--negative); }
.ocr-pc__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-12); }
.ocr-pc__col li { display: flex; gap: var(--s-12); font-size: var(--fs-16); color: var(--ink); line-height: var(--lh-lead); }
.ocr-pc__mark { flex: none; font-weight: 800; }
.ocr-pc__mark--pro { color: var(--positive); }
.ocr-pc__mark--con { color: var(--negative); }

/* ---------- 5 · BONUS ---------- */
.ocr-bonus__layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--s-32); align-items: stretch;
  padding: var(--s-32); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.ocr-bonus__layout > * { min-width: 0; }
.ocr-bonus__headline { display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s-32) var(--s-20); text-align: center; background: var(--hero);
  border: 1px solid var(--line); border-radius: var(--radius-m); }
.ocr-bonus__amount { margin: 0 0 var(--s-20); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-24); color: var(--ink); line-height: var(--lh-heading); }
.ocr-bonus__amount span { display: block; margin-top: var(--s-4); font-size: var(--fs-19); color: var(--primary); }
.ocr-bonus__headline .btn { width: 100%; }
.ocr-bonus__headline .ocr-terms { margin-top: var(--s-12); }
.ocr-bonus__terms { position: relative; margin: 0; display: flex; flex-direction: column; }
/* sliding green highlight — JS positions it via --hl-y / --hl-h; default rests on the first (Willkommensbonus) row */
.ocr-bonus__hl { position: absolute; left: 0; right: 0; top: 0; z-index: 0;
  height: var(--hl-h, 0px); transform: translateY(var(--hl-y, 0px));
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  border-radius: var(--radius-s); pointer-events: none;
  transition: transform .38s cubic-bezier(.4, 0, .2, 1), height .38s cubic-bezier(.4, 0, .2, 1); }
.ocr-bonus__row { position: relative; z-index: 1; display: flex; align-items: baseline; gap: var(--s-12);
  padding: var(--s-16); }
.ocr-bonus__row dt { color: var(--sub); font-size: var(--fs-16); white-space: nowrap; transition: color .25s ease; }
.ocr-bonus__row dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16);
  color: var(--ink); text-align: right; transition: color .25s ease; }
/* dotted leader connecting label → value (lifted to sit on the text mid-line) */
.ocr-bonus__leader { flex: 1 1 auto; min-width: var(--s-24); align-self: baseline;
  border-bottom: 2px dotted var(--line); transform: translateY(-0.3em); transition: border-color .25s ease; }
/* active row (default first; JS moves it on hover): green text, leader tucked away inside the blob */
.ocr-bonus__row.is-active dt,
.ocr-bonus__row.is-active dd { color: var(--primary); }
.ocr-bonus__row.is-active .ocr-bonus__leader { border-bottom-color: transparent; }
@media (prefers-reduced-motion: reduce) { .ocr-bonus__hl { transition: none; } }

/* ---------- 6 · ZAHLUNGSMETHODEN ---------- */
.ocr-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); }
.ocr-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14);
  background: var(--surface); }
.ocr-table th, .ocr-table td { text-align: left; padding: var(--s-12) var(--s-20); }
.ocr-table thead th { font-family: var(--font-display); font-size: var(--fs-12); text-transform: uppercase;
  letter-spacing: .05em; color: var(--sub); background: var(--bg); border-bottom: 1px solid var(--line); }
.ocr-table tbody tr { border-bottom: 1px solid var(--line); }
.ocr-table tbody tr:last-child { border-bottom: 0; }
.ocr-table td { color: var(--ink); }
.ocr-table td[data-th="Methode"] { font-weight: 700; font-family: var(--font-display); }
.ocr-table__grouprow th { background: var(--hero); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-12);
  text-transform: uppercase; letter-spacing: .05em; color: var(--sub); padding: var(--s-8) var(--s-20); }
.ocr-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: var(--s-8); }
.ocr-dot--fast { background: var(--primary); }
.ocr-dot--std  { background: var(--nav-gold); }
.ocr-dot--slow { background: var(--sub); }

/* ---------- 7 · SPIELANGEBOT: uses .slots-grid + .scard (home.css) ---------- */

/* ---------- DETAILS block ---------- */
.ocr-details { background: var(--hero); }

/* ---------- 8 · TABS (CSS radio) ---------- */
.ocr-tabs { display: block; }
.ocr-tabs__list { position: relative; display: flex; flex-wrap: wrap; gap: var(--s-8); margin-bottom: var(--s-24); border-bottom: 1px solid var(--line); }
.ocr-tabs__tab { position: relative; z-index: 1; cursor: pointer; padding: var(--s-12) var(--s-20); background: none; border: 0;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-14); color: var(--sub);
  transition: color .2s ease; }
.ocr-tabs__tab:hover { color: var(--ink); }
.ocr-tabs__tab[aria-selected="true"] { color: var(--accent); }
.ocr-tabs__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
/* gliding active-indicator — same liquid feel as the jump-nav blob (two speeds → stretch/settle) */
.ocr-tabs__ind { position: absolute; bottom: -1px; left: 0; height: 2px; width: 0; background: var(--accent);
  transform: translateX(0); opacity: 0;
  transition: transform .42s cubic-bezier(.34,1.56,.64,1), width .55s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; }
.ocr-tabs__ind.is-ready { opacity: 1; }
.ocr-tabs__panels { position: relative; overflow: hidden; }
.ocr-tabs__panel[hidden] { display: none; }

/* ---- pill variant (.ocr-tabs--pill): filled blob glides under the active/hovered tab (mirrors .pv-sort);
        panels sit in a white card with icon-rows (.ocr-flist). ---- */
.ocr-tabs--pill .ocr-tabs__list { display: inline-flex; flex-wrap: nowrap; gap: 0; max-width: 100%;
  margin-bottom: var(--s-16); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); border-bottom: 1px solid var(--line);
  /* nowrap tabs don't fit narrow screens → scroll instead of overflowing the page (same pattern as
     the .oc-toc nav). Scrollbar hidden so it never clips the pill's rounded corners; casino-review.js
     scrolls the active tab into view + maps vertical wheel → horizontal. */
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ocr-tabs--pill .ocr-tabs__list::-webkit-scrollbar { display: none; }
.ocr-tabs--pill .ocr-tabs__tab { flex: none; padding: var(--s-8) var(--s-20); border-radius: var(--radius-pill);
  color: var(--ink); white-space: nowrap; }
.ocr-tabs--pill .ocr-tabs__tab:hover { color: var(--ink); }
.ocr-tabs--pill .ocr-tabs__tab[aria-selected="true"] { color: var(--ink); }
.ocr-tabs--pill .ocr-tabs__tab.is-current { color: var(--on-primary, #fff); }
.ocr-tabs--pill .ocr-tabs__ind { top: var(--s-4); bottom: auto; height: calc(100% - var(--s-8)); width: 0;
  background: var(--accent); border-radius: var(--radius-pill);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), width .3s ease, opacity .2s ease; }
.ocr-tabs--pill .ocr-tabs__panels { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-32); }
@media (prefers-reduced-motion: reduce) { .ocr-tabs--pill .ocr-tabs__ind { transition: opacity .2s ease; } }

/* icon-row facts list (Casino-Details / Support panels) — distinct from the hero .ocr-facts grid */
.ocr-flist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ocr-flist__row { display: flex; align-items: center; gap: var(--s-20); padding: var(--s-16) 0;
  border-bottom: 1px solid var(--line); }
.ocr-flist__row:last-child { border-bottom: 0; }
.ocr-flist__row:first-child { padding-top: 0; }
.ocr-flist__row:last-child { padding-bottom: 0; }
.ocr-flist__ico { flex: none; display: grid; place-content: center; width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-m); }
.ocr-flist__ico svg { width: 1.35rem; height: 1.35rem; }
.ocr-flist__ico--v    { background: color-mix(in srgb, var(--accent) 14%, transparent);  color: var(--accent); }
.ocr-flist__ico--g    { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.ocr-flist__ico--gold { background: color-mix(in srgb, var(--star) 16%, transparent);    color: var(--star); }
.ocr-flist__label { color: var(--sub); font-size: var(--fs-16); }
.ocr-flist__val { margin-left: auto; text-align: right; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-16); color: var(--ink); }
@media (max-width: 47.9375rem) {
  .ocr-flist__row { gap: var(--s-12); }
  .ocr-flist__label { font-size: var(--fs-14); }
}
/* fade + slide-in when a panel becomes active */
.ocr-tabs__panel.is-enter { animation: ocrPanelIn .32s ease both; }
@keyframes ocrPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .ocr-tabs__ind { transition: opacity .2s ease; }
  .ocr-tabs__panel.is-enter { animation: none; }
}

.ocr-kv { width: 100%; border-collapse: collapse; font-size: var(--fs-16); }
.ocr-kv th, .ocr-kv td { text-align: left; padding: var(--s-12) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ocr-kv tr:last-child th, .ocr-kv tr:last-child td { border-bottom: 0; }
.ocr-kv th { width: 16rem; color: var(--sub); font-weight: 600; }
.ocr-kv td { color: var(--ink); }
.ocr-tabs__panel p { color: var(--sub); line-height: var(--lh-lead); margin: 0 0 var(--s-16); }
.ocr-tabs__panel p:last-child { margin-bottom: 0; }
.ocr-tabs__panel strong { color: var(--ink); }
.ocr-legal-note { display: inline-flex; align-items: center; gap: var(--s-8); font-size: var(--fs-14); font-weight: 600; }
.ocr-schutz { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-12); }
.ocr-schutz li { padding-left: var(--s-16); border-left: 2px solid var(--nav-gold); color: var(--sub); line-height: var(--lh-lead); }
.ocr-schutz strong { color: var(--ink); }

/* ---------- 9 · EDITORIAL PROSE — text → .oc-prose primitive (system.css) ---------- */
.ocr-analyse .section-head { max-width: 60rem; margin-left: auto; margin-right: auto; }

/* ---------- 10 · STEPS — vertical spine timeline (numbered circles + cards, connected chain) ---------- */
.ocr-steps { background: var(--hero); }
.ocr-steps__list { list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: flex; flex-direction: column; gap: var(--s-16); }
.ocr-step { counter-increment: step; position: relative; min-width: 0;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-24); align-items: start; }
/* connecting spine — runs from this circle's bottom into the gap to the next circle (behind the circles) */
.ocr-step:not(:last-child)::before { content: ''; position: absolute; left: 1.5rem; transform: translateX(-50%);
  top: 3rem; bottom: calc(-1 * var(--s-16)); width: 2px; background: var(--line); z-index: 0; }
/* number circle */
.ocr-step__num { position: relative; z-index: 1; display: grid; place-content: center; width: 3rem; height: 3rem;
  border-radius: 50%; border: 2px solid var(--line); background: var(--surface);
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-18); }
.ocr-step__num::before { content: counter(step); }
.ocr-step:nth-child(3n+1) .ocr-step__num { border-color: var(--primary); color: var(--primary); }
.ocr-step:nth-child(3n+2) .ocr-step__num { border-color: var(--accent);  color: var(--accent); }
.ocr-step:nth-child(3n+3) .ocr-step__num { border-color: var(--star);    color: var(--star); }
/* card */
.ocr-step__card { padding: var(--s-24); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); transition: box-shadow .25s ease, transform .25s ease; }
.ocr-step__card:hover { box-shadow: var(--shadow); transform: translateY(-0.25rem); }
@media (prefers-reduced-motion: reduce) { .ocr-step__card { transition: none; } .ocr-step__card:hover { transform: none; } }
.ocr-step__title { display: flex; align-items: center; gap: var(--s-12); margin: 0 0 var(--s-8); font-size: var(--fs-20); }
.ocr-step__ico { flex: none; display: inline-grid; place-content: center; }
.ocr-step__ico svg { width: 1.5rem; height: 1.5rem; }
.ocr-step:nth-child(3n+1) .ocr-step__ico { color: var(--primary); }
.ocr-step:nth-child(3n+2) .ocr-step__ico { color: var(--accent); }
.ocr-step:nth-child(3n+3) .ocr-step__ico { color: var(--star); }
.ocr-step p { margin: 0; font-size: var(--fs-16); color: var(--sub); line-height: var(--lh-lead); }

/* ---------- 11 · FAZIT — dark --panel box with rating column (mirrors the slot-review .slr-fazit) ---------- */
.ocr-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); }
.ocr-fazit__rating { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--s-8); }
.ocr-fazit__score { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-48); line-height: 1; color: var(--nav-gold); }
.ocr-fazit__of { font-size: var(--fs-12); opacity: .7; }
.ocr-fazit__rating .ocr-hstar { color: color-mix(in srgb, var(--panel-ink) 25%, transparent); }
.ocr-fazit__label { margin: 0; font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.ocr-fazit__box .eyebrow { color: var(--nav-gold); margin: 0 0 var(--s-12); opacity: 1; }
.ocr-fazit__box h2 { margin: 0 0 var(--s-16); color: inherit; }
.ocr-fazit__box > div > p { color: inherit; opacity: .8; line-height: var(--lh-body); margin: 0 0 var(--s-24); }
.ocr-fazit__box .ocr-hero__cta { margin-bottom: var(--s-16); }
.ocr-fazit__box .ocr-terms { color: inherit; opacity: .7; margin: 0; }
@media (max-width: 47.9375rem) {
  .ocr-fazit__box { grid-template-columns: 1fr; align-items: center; text-align: center; gap: var(--s-16); }
}

/* ---------- 13 · ALTERNATIVEN ---------- */
/* casino name → logo on a dark --panel tile (same treatment as the header search Top-Casinos) */
.ocr-alts__logo { display: inline-grid; place-content: center; width: 10rem; height: 4rem; padding: var(--s-8) var(--s-16);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-m); }
.ocr-alts__logo img { width: 100%; height: auto; object-fit: contain; }
/* rating: violet badge with the animated gold stars stacked below */
.ocr-alts__rate { display: inline-flex; flex-direction: column; gap: var(--s-4); }
.ocr-alts__badge { display: block; text-align: center; background: var(--accent); color: var(--on-primary);
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-16); padding: var(--s-4) var(--s-12); border-radius: var(--radius-s); }
.ocr-alts__bonus { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16); color: var(--ink); }

/* ---------- 14 · RG STRIP ---------- */
/* responsible-gambling note → now the shared .rgg-rgnote light band (casino.css) */

.ocr-table .btn { min-width: 8rem; }

/* ================= RESPONSIVE ================= */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .ocr-hero__rateline { flex-wrap: nowrap; }
}
@media (max-width: 63.9375rem) {
  .ocr-hero { padding-top: var(--s-64); }
  .ocr-hero__logo { justify-self: start; }
  .ocr-bonusbar { flex-direction: column; align-items: flex-start; gap: var(--s-16) var(--s-32); }
  .ocr-bonusbar__terms { flex-basis: auto; }
  .ocr-bonusbar__actions { margin-left: 0; }
  .ocr-bonusbar::after { display: none; }
  .ocr-facts { grid-template-columns: repeat(2, 1fr); }
  .ocr-scorecard { grid-template-columns: 1fr; }
  .ocr-scorecard__bars { grid-template-columns: 1fr; gap: var(--s-16); }
  .ocr-pc__grid, .ocr-bonus__layout { grid-template-columns: 1fr; }
  .ocr-steps__list { grid-template-columns: 1fr; }
  .oc-toc__nav { overflow-x: auto; scrollbar-width: none; }
  .oc-toc__nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 47.9375rem) {
  .ocr-hero__rateline { display: flex; }
  .ocr-hero__meta { margin-top: var(--s-16); }
  .ocr-bonusbar { padding: var(--s-24); align-items: center; text-align: center; }
  .ocr-bonusbar__text { display: flex; flex-direction: column; min-width: 0; }
  .ocr-bonusbar__actions .btn { min-width: 0; width: 100%; }
  .ocr-hero__logo { width: 100%; }
  .ocr-fit { display: flex; flex: 0 0 100%; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line); padding-top: var(--s-12); }
  .ocr-facts { grid-template-columns: minmax(0, 1fr); gap: var(--s-16); }
  .ocr-bonus__layout { padding: var(--s-24); }
  /* bonus terms → stacked list (label over value, no dotted leader) */
  .ocr-bonus__row { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .ocr-bonus__row dt { white-space: normal; }
  .ocr-bonus__row dd { text-align: left; }
  .ocr-bonus__leader { display: none; }
  .ocr-flist__val { font-size: var(--fs-14); }
  .ocr-tabs--pill .ocr-tabs__panels { padding: var(--s-24); }
  .ocr-scorecard { padding: var(--s-24); }
  .ocr-pc__col { padding: var(--s-24); }
}
@media (max-width: 47.9375rem) {
  .ocr-fazit__box { padding: var(--s-24); gap: 0; }
  .ocr-fazit__box > div:last-child { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: var(--s-24); }
  .ocr-fazit__box .ocr-hero__cta .btn { width: 100%; }
  .ocr-fazit__head { flex-direction: column; align-items: flex-start; gap: var(--s-16); }
  .ocr-kv th { width: auto; }
  /* stacked payment/alt tables → card rows via data-th labels */
  .ocr-table, .ocr-table thead, .ocr-table tbody, .ocr-table tr, .ocr-table td { display: block; width: 100%; }
  .ocr-table thead { display: none; }
  .ocr-table tbody tr { padding: var(--s-12) var(--s-16); }
  .ocr-table__grouprow { padding: 0 !important; }
  .ocr-table__grouprow th { display: block; }
  .ocr-table td { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); padding: var(--s-4) 0; border: 0; }
  .ocr-table td::before { content: attr(data-th); font-weight: 700; color: var(--sub); font-family: var(--font-display); font-size: var(--fs-12); }
}
@media (max-width: 47.9375rem) {
  /* Alternativen table → centered operator cards (logo/stars/CTA are self-evident, drop data-th labels) */
  .ocr-table--alts tbody tr { padding: var(--s-20) var(--s-16); }
  .ocr-table--alts td { flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: var(--s-8); padding: var(--s-8) 0; }
  .ocr-table--alts td::before { display: none; }
  .ocr-table--alts .ocr-alts__rate { align-items: center; }
  .ocr-table--alts .btn { min-width: 10rem; }
}

/* Responsive fixes 2026-07-16 (standardized breakpoints) */
@media (min-width: 85rem) {
  .ocr-bonusbar { padding-right: 25rem; } /* right art reserve only ≥1360 where the strip has room */
}
@media (min-width: 64rem) and (max-width: 84.9375rem) {
  .ocr-fact__value { font-size: var(--fs-16); } /* laptop band 1024–1359 */
}
@media (max-width: 84.9375rem) {
  .ocr-bonusbar::after { filter: sepia(1); }
}

/* Narrow-phone (≤460) polish */
@media (max-width: 28.75rem) {
  /* bonus CTA: widen + shrink so it fits one line; balance the wrap for long operator names */
  .ocr-bonus__headline { padding-inline: var(--s-12); }
  .ocr-bonus__headline .btn { font-size: var(--fs-14); padding-inline: var(--s-12); text-wrap: balance; }
  /* flist: long values → own full-width line, left-aligned under the label */
  .ocr-flist__row { flex-wrap: wrap; gap: var(--s-4) var(--s-12); }
  .ocr-flist__val { margin-left: 0; text-align: left; flex-basis: 100%; padding-left: calc(2.75rem + var(--s-12)); }
  /* steps: tuck the number circles in, give the cards more width */
  .ocr-step { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-16); }
  .ocr-step__num { width: 2.5rem; height: 2.5rem; font-size: var(--fs-16); }
  .ocr-step:not(:last-child)::before { left: 1.25rem; top: 2.5rem; }
}