/* Slotoro-DE — native-Gutenberg fidelity layer, layered on the approved main.css
   (kept verbatim). Page content is now native blocks that keep the design classes;
   these rules re-attach the approved look to the blocks' extra wp-block-* wrappers.
   ===================================================================== */

/* Group inner-container is transparent to layout (this WP renders every core/group
   as <div class="wp-block-group X"><div class="wp-block-group__inner-container">…),
   so the design's grid/flex on the outer div reaches the real children again. */
.wp-block-group > .wp-block-group__inner-container { display: contents; }

/* Belt-and-suspenders for the rule above: any multi-child flex/grid container that
   design relies on (cards side by side, split two-column sections, chip rows…) gets
   the SAME layout re-declared directly on .wp-block-group__inner-container, so the
   real children lay out correctly even if display:contents isn't honoured. */
.grid > .wp-block-group__inner-container { display: grid; gap: 16px; }
.grid-facts > .wp-block-group__inner-container { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.grid-3 > .wp-block-group__inner-container { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.grid-4 > .wp-block-group__inner-container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-cats > .wp-block-group__inner-container { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-2 > .wp-block-group__inner-container { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.grid-2up > .wp-block-group__inner-container { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.split > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; gap: 44px; align-items: center; }
.split > .wp-block-group__inner-container > * { flex: 1 1 340px; min-width: 280px; }
.pros-cons > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.contact-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 20px 0; }
.game-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pay-chips > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; gap: 7px; }
.code-box > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.flex-between > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.icon-row > .wp-block-group__inner-container { display: flex; align-items: center; gap: 12px; }
.split-visual > .wp-block-group__inner-container { display: flex; justify-content: center; }

/* New utility classes for a few home-page wrapper divs that only carried inline
   style="" in the design (dropped by the block converter) with no matching class. */
.icon-row { display: flex; align-items: center; gap: 12px; }
.split-visual { flex: 1 1 300px; display: flex; justify-content: center; }
.grid-2up { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---- inline-style replacements (core blocks drop style="") ---- */
.ml-auto { margin-left: auto; }
.mt-8 { margin-top: 8px; }
.mt-18 { margin-top: 18px; }
.fs-15 { font-size: 15px; }
.fs-13 { font-size: 13px; }
.c-fg { color: var(--c-fg); }
.val-neon { font-size: 16px; color: var(--c-neon); }
.lbl-up { text-transform: uppercase; letter-spacing: .06em; color: var(--c-fg3); font-size: 12px; font-weight: 700; }
.flex-between { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }

/* ---- CTA buttons: design .btn* now sits on the native .wp-block-button wrapper;
        re-point the look onto the <a> and neutralise the wrapper + WP defaults. ---- */
.wp-block-button.btn { display: inline-flex; background: none; box-shadow: none; padding: 0; border-radius: 0; border: 0; }
.wp-block-buttons > .wp-block-button.btn { margin: 0; }
.wp-block-button.btn > .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-b); font-size: 15px; font-weight: 700; text-decoration: none;
  padding: 12px 22px; border-radius: 11px; line-height: 1;
  transition: transform .18s, box-shadow .18s, background .18s, border-color .18s;
}
.wp-block-button.btn-primary > .wp-block-button__link { color: var(--c-ink); background: var(--grad-neon); box-shadow: 0 8px 22px #f6e4004d; font-weight: 800; }
.wp-block-button.btn-primary > .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 14px 38px #f6e40080; }
.wp-block-button.btn-cyan > .wp-block-button__link { color: var(--c-fg); border: 1.5px solid var(--c-cyan); background: #33e6e612; }
.wp-block-button.btn-cyan > .wp-block-button__link:hover { background: #33e6e629; }
.wp-block-button.btn-light > .wp-block-button__link { color: #fff; border: 1.5px solid rgba(255,255,255,.5); background: transparent; }
.wp-block-button.btn-light > .wp-block-button__link:hover { background: #ffffff1a; }
.wp-block-button.btn-lg > .wp-block-button__link { font-size: 16px; padding: 15px 30px; }
/* chevron/arrow that some CTAs carried (inline <svg>) → CSS ::after */
.wp-block-button.btn--arrow > .wp-block-button__link::after {
  content: ""; width: 18px; height: 18px; flex: none; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* keep the CTA row layout that carried these buttons */
.wp-block-buttons.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---- FAQ accordion → native core/details, styled like .faq-item ---- */
.wp-block-details.faq-item { background: var(--c-surf); border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; padding: 0; }
.wp-block-details.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-align: left; padding: 18px 20px; color: var(--c-fg); font-family: var(--font-d); font-size: 16px; font-weight: 700; line-height: 1.35;
}
.wp-block-details.faq-item summary::-webkit-details-marker { display: none; }
.wp-block-details.faq-item summary::after {
  content: ""; flex-shrink: 0; width: 20px; height: 20px; background-color: var(--c-neon); transition: transform .22s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wp-block-details.faq-item[open] summary::after { transform: rotate(180deg); }
.wp-block-details.faq-item > :not(summary) { margin: 0; padding: 0 20px 20px; font-size: 15px; line-height: 1.65; color: var(--c-fg2); max-width: 68ch; }

/* ---- Data tables (core/table) inherit the .tbl / .tbl-wrap design ---- */
.wp-block-table { overflow-x: auto; margin: 18px 0 0; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surf); }
.wp-block-table table { width: 100%; border-collapse: collapse; min-width: 480px; }
.wp-block-table th, .wp-block-table td { padding: 13px 18px; text-align: left; font-size: 14.5px; border-bottom: 1px solid var(--c-line); }
.wp-block-table thead th { font-family: var(--font-d); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-fg3); }

/* ---- core/table lost the design's header-row gradient + key/value emphasis:
   `wp:table` serializes to a bare <figure class="wp-block-table"><table>, so
   none of the design's inline per-cell styling survives. Every design page
   with a <thead> (casino, zahlungen, app, aktionscode, bonus) uses the exact
   same purple->magenta gradient on the header row with bold white text —
   confirmed identical across all five, so this is a safe sitewide rule, not
   casino-specific. First-column bold/bright applies to both header-less
   key/value tables (e.g. casino's spec table) and tables with a header. ---- */
.wp-block-table td:first-child, .wp-block-table th:first-child { font-weight: 700; color: var(--c-fg); }
.wp-block-table td:not(:first-child) { color: var(--c-fg2); }
.wp-block-table thead th {
  background: linear-gradient(90deg, #7d1cb8, #c81e93);
  color: #fff; text-transform: none; letter-spacing: normal; font-size: 14px;
}
/* ---- The casino "Slotoro im Marktvergleich" table specifically highlights its
   "Slotoro" column in neon — scoped via .tbl-compare (added only to that one
   table's wrapper) since this 2nd-column treatment is unique to that table,
   not a pattern shared by the other thead tables above. ---- */
.tbl-compare table tbody td:nth-child(2) { color: var(--c-neon); font-weight: 700; }

/* ---- Steps (group.step-card: step-num paragraph + heading + paragraph) ----
   `>` doesn't actually match here: core/group always renders a
   `.wp-block-group__inner-container` between `.step-card` and its children
   (display:contents, but still a real DOM node), so a direct-child combinator
   selects nothing and this rule was silently dead. Descendant selector fixes it. -- */
.step-card .step-num { margin: 0; }
.step-card .wp-block-heading { margin: 16px 0 6px; font-size: 18px; }
.step-card > p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--c-fg2); }

/* ---- Link cards (group.link-card: linked heading + paragraph) ---- */
.link-card .link-card__t { margin: 0; font-family: var(--font-d); font-weight: 700; font-size: 15px; }
.link-card .link-card__t a { color: var(--c-fg); text-decoration: none; }
.link-card .link-card__d { margin: 4px 0 0; font-size: 13px; color: var(--c-fg3); line-height: 1.45; }

/* ---- Game cards (group.game-card: decorative linked thumb [html] + native meta) ---- */
.game-media { display: block; text-decoration: none; }
.game-meta p { margin: 0; }
.game-meta p:first-child { font-size: 13.5px; font-weight: 700; color: var(--c-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-meta p:last-child { font-size: 11px; font-weight: 600; color: var(--c-fg2); flex-shrink: 0; }

/* ---- span→paragraph promotions: kill default <p> margins so flex/inline layout is unchanged ---- */
.pay-chip, .hero-badge, .chip, .lbl, .val, .big, .game-tag, .hero-bonus-label, .hero-bonus-amt, .link-wrap { margin: 0; }
.eyebrow { margin: 0 0 10px; }

/* ---- "Last updated" line stays a plain editable paragraph ---- */
p.updated { font-size: 12.5px; color: var(--c-fg3); margin: 18px 0 0; }

/* ---- Tab-style game filter hides cards by category class (JS sets .hidden) ---- */
.game-card[hidden] { display: none; }

/* =====================================================================
   Front-page (Startseite) design-fidelity corrections
   Re-attach design specs lost when the block converter dropped inline
   style="" (section backgrounds, card sizing, spacing) or when a utility
   class lost specificity to an element-scoped main.css rule.
   ===================================================================== */

/* ---- Nested-layout fix (games grid + Sicherheit cards) ----
   These design containers became a core/group block: a WRAPPER whose real
   layout lives on the inner .wp-block-group__inner-container (the grid rules at
   the top of this file). When the OUTER wrapper ALSO establishes a grid — from
   main.css (`.game-grid`) or the `.grid-2up` utility below — its single inner
   child is trapped in one track: `auto-fill` keeps the empty tracks so the game
   grid collapses to a 150px-wide column of stacked cards, and the fixed
   `1fr 1fr` strands the four Sicherheit cards in the left half. Keep the grid on
   the inner container only and neutralise the wrapper so the inner child fills
   its full width. (Grid families that use `auto-fit` self-collapse the empty
   tracks and flex wrappers stretch to max-content, so only these two break.) */
.wp-block-group.game-grid,
.wp-block-group.grid-2up { display: block; }
/* main.css's <=400px game-grid override targets the (now-neutralised) wrapper;
   mirror it onto the inner container that now carries the grid. */
@media (max-width: 400px) {
  .game-grid > .wp-block-group__inner-container { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ---- Sicherheit & Lizenz: the design uses a COMPACT card here (padding 20,
        radius 14, icon 26 with no gap, h3 15px/700 margin 12 0 4, p 13px/1.5),
        not the generic .card. .grid-2up is unique to this section, and these
        selectors outrank both .card* and the dropped-to-class .fs-15/.fs-13. -- */
.grid-2up .card { padding: 20px; border-radius: 14px; }
.grid-2up .card svg.ico { width: 26px; height: 26px; margin-bottom: 0; }
.grid-2up .card h3,
.grid-2up .card .wp-block-heading { margin: 12px 0 4px; font-size: 15px; }
.grid-2up .card p { margin: 0; font-size: 13px; line-height: 1.5; }

/* ---- Ein- & Auszahlung: method cards are the compact 16/18 · radius-14
        variant. The "Karten & E-Wallets" label was wrapped in a neutralised
        .fact-card whose inline reset was dropped — strip its surface + the
        gradient accent bar, and match both labels to the design (uppercase,
        weight 600, letter-spacing .08em, 9px bottom gap). ---- */
.split .grid:has(.pay-chips) { gap: 14px; }
.card:has(.pay-chips) { padding: 16px 18px; border-radius: 14px; }
.card .fact-card { background: none; border: 0; padding: 0; }
.card .fact-card::before { display: none; }
.card:has(.pay-chips) .lbl { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--c-fg3); margin-bottom: 9px; }

/* ---- "In 4 Schritten": the section's radial background + top border and the
        centered CTA under the grid were inline-only. Scope to .home so other
        pages' .step-card sections keep their own (flat) background. ---- */
.home .section:has(.step-card) { background: radial-gradient(100% 100% at 50% 0%, #241046, #0a0616); border-top: 1px solid var(--c-line); }
.home .section:has(.step-card) > .wrap > .wp-block-buttons { justify-content: center; margin-top: 32px; }

/* ---- "Alles über Slotoro entdecken" heading kept a 24px bottom gap. ---- */
.home .sec-alt:has(.link-card) > .wrap > h2 { margin-bottom: 24px; }

/* ---- Standalone arrow-link CTAs carried a top margin in the split copy
        columns (payments/mobile 22px) and the info panels (support/RG 18px). -- */
.split .link-wrap { margin-top: 22px; }
.panel .link-wrap { margin-top: 18px; }

/* ---- Final CTA fineprint isn't centered: main.css's generic `.cta-final p`
        rule (meant for the lede paragraph) also matches this <p> and gives it
        `max-width:56ch`; the more specific `.cta-final .fineprint` rule then
        overrides its `margin:16px auto 0` with `margin:22px 0 0`, zeroing the
        auto side-margins that centered that narrower box. Net effect: a 56ch-
        wide box sitting flush left instead of centered. The design has no
        max-width on this line at all — void it so the paragraph spans the
        full (already text-align:center) width again. ---- */
.cta-final .fineprint { max-width: none; }

/* ---- Step numbers (intentional deviation from the approved design) ----
   The design uses color:var(--c-ink) (#12061f, a near-black purple) on the
   yellow step-num circle. Per request, use pure black instead. Scoped (not
   bare `.step-num`) so it outranks main.css's `.step-card p` on specificity;
   descendant combinator per the note above (`>` matches nothing here). ---- */
.step-card .step-num { color: #000000; }

/* ---- Footer layout (intentional deviation from the approved design) ----
   The design spans the brand block across the whole top row (grid-column:1/-1,
   max-width:420px) and, with `repeat(auto-fit, minmax(200px,1fr))`, leaves the
   three link columns bunched in the left tracks with empty tracks on the right.
   Per request, lay the brand + the three link columns on ONE full-width row so
   the columns fill toward the right (Zahlungsmethoden reaches the right edge),
   with the brand kept a little wider for its disclaimer. Reflows to 2-up / 1-up
   on smaller screens (the design's auto-fit reflow is replaced by these). */
.site-footer .ftr-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; align-items: start; }
.site-footer .ftr-brand { grid-column: auto; max-width: 440px; }
@media (max-width: 900px) {
  .site-footer .ftr-grid { grid-template-columns: 1fr 1fr; }
  .site-footer .ftr-brand { grid-column: 1 / -1; max-width: 560px; }
}
@media (max-width: 560px) {
  .site-footer .ftr-grid { grid-template-columns: 1fr; }
  .site-footer .ftr-brand { max-width: none; }
}

/* ---- Payment/crypto chip logos (intentional deviation from the approved
   design) ---- No official brand assets exist in this project, so each chip
   gets a hand-built, brand-colored badge instead of the plain text pill (per
   request, matching the site's existing hand-coded-SVG icon convention rather
   than fetching external logo files). Crypto chips get a currency-symbol
   glyph before the label via ::before; Mastercard gets its twin-circle mark
   via a CSS gradient (no image asset needed). Text stays in the markup for
   accessibility/SEO. A few brand colors are darkened slightly from their
   official tone so white text stays legible at this chip's small size.
   `.pc-*` classes are added only to genuine payment chips — spiele.html
   reuses the bare `.pay-chip` class for game-provider tags and is untouched.
   Scoped to the footer so ACF content chips (casino/spiele/app/zahlungen) keep
   their approved main.css border; the badge redesign only applies to footer. */
.site-footer .pay-chip { display: inline-flex; align-items: center; gap: 6px; border-color: transparent; }
.pay-chip.pc-visa { background: #1a1f71; color: #fff; font-style: italic; font-weight: 800; }
.pay-chip.pc-mastercard { background: var(--c-surf2); border-color: var(--c-line); }
.pay-chip.pc-mastercard::before {
  content: ""; flex-shrink: 0; width: 15px; height: 9px;
  background:
    radial-gradient(circle at 4.5px 4.5px, #eb001b 4.5px, transparent 4.6px),
    radial-gradient(circle at 10.5px 4.5px, #f79e1b 4.5px, transparent 4.6px);
}
.pay-chip.pc-skrill { background: #5f249f; color: #fff; font-weight: 700; }
.pay-chip.pc-neteller { background: #3c7a1e; color: #fff; font-weight: 800; }
.pay-chip.pc-mifinity { background: #0e7a72; color: #fff; font-weight: 700; }
.pay-chip.pc-jeton { background: #c40021; color: #fff; font-weight: 700; }
.pay-chip.pc-paysafecard { background: #0a7fb3; color: #fff; font-weight: 700; }
.pay-chip.pc-bitcoin { background: #f7931a; color: #3a1f00; font-weight: 800; }
.pay-chip.pc-bitcoin::before { content: "₿"; }
.pay-chip.pc-ethereum { background: #4457c7; color: #fff; font-weight: 800; }
.pay-chip.pc-ethereum::before { content: "Ξ"; }
.pay-chip.pc-usdt { background: #1a9172; color: #fff; font-weight: 800; }
.pay-chip.pc-usdt::before { content: "₮"; }
.pay-chip.pc-litecoin { background: #345d9d; color: #fff; font-weight: 800; }
.pay-chip.pc-litecoin::before { content: "Ł"; }

/* =====================================================================
   Casino page design-fidelity corrections
   ===================================================================== */

/* ---- The design gives this page's hero and every section below it a
   uniform 1000px content width (own custom wrapper, not the sitewide
   1240px `.wrap` or 900px `.wrap-narrow`). Casino's markup used a mix of
   both, so section width inconsistently over/undershot the design. New
   utility, scoped to this page's markup only (not touching FAQ, which
   keeps its existing `.wrap-narrow`, or the CTA band, out of scope). ---- */
.wrap-1000 { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
/* Casino's hero padding is its own (34px 20px 56px), not the homepage
   hero's larger 64px 0 72px — scoped to the combo so the home hero
   (`.wrap.hero-in`, still 1240px) is unaffected. */
.wrap-1000.hero-in { padding: 34px 20px 56px; }

/* ---- Quick-link cards (Registrierung & Login / App & Mobile / Ein- &
   Auszahlung): the design wraps the WHOLE tile in one <a>, but as a
   core/group + core/heading pair only the heading text sits inside an
   <a>. The hover lift/border already covers the full box (:hover is
   geometry-based), so only the click target needs to grow — a
   "stretched link" pseudo-element does that without changing the
   block's tagName (keeps it editable in the block editor). ---- */
.link-card { position: relative; }
.link-card__t a::after { content: ""; position: absolute; inset: 0; }

/* ---- Bonus-stage cards (Willkommenspaket im Detail): these use the
   simple `.stat-card` style (not the homepage's fancier `.stage-card`),
   but `.stat-card` is `text-align:center` while the design's own inline
   style for these specific cards has no centering — content should read
   left-aligned. Also matches the design's own grid breakpoint/gap
   (230px/14px, not the shared `.grid-3` utility's 280px/18px). Scoped to
   `.grid-3 .stat-card` — confirmed no other page combines these two
   classes (zahlungen's `.stat-card` usage sits in `.grid-4`, untouched). ---- */
.grid-3 .stat-card { text-align: left; }
/* The actual grid lives on the .wp-block-group__inner-container (see the
   reconciliation rules at the top of this file) — overriding the outer
   .grid-3 wrapper alone has no visible effect since it collapses to a
   single full-width track around that one child. */
.grid-3:has(.stat-card) > .wp-block-group__inner-container { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }

/* ---- License panel ("Vertrauen & Lizenz") and the Freispiele panel are
   both meant to sit in a rounded surface card (design:
   background:var(--c-surf);border:1px solid var(--c-line);
   border-radius:16px) — the same look as the existing `.card` utility
   (--r-lg is 16px, matching exactly). Both sections currently render as
   bare text with no box at all, so the callout treatment is missing
   entirely. Added `.card` to each section's wrapper div in casino.html. ---- */

/* =====================================================================
   INNER-PAGE (landing) DESIGN-FIDELITY PASS  —  second review
   Scoped to .slo-landing / .slo-legal (body_class), so the block-based
   home page, the shared header/footer, the final CTA band (.cta-final)
   and the FAQ accordion (#faq) are never touched. The approved inner
   "dc" designs use: a single-column hero with the breadcrumb INSIDE it,
   a uniform content column (1000px; 1100px on spiele + the app/spiele
   hero), a flat background (no alternating bands), a tighter section
   rhythm, and several section variants (boxed prose cards, gradient
   table headers, cyan step badges) that the generic components dropped.
   ===================================================================== */

/* ---- Uniform content column (design widths, per page) ---- */
.slo-landing .section > .wrap,
.slo-landing .section > .wrap-narrow { max-width: 1000px; }
body[data-page="spiele"].slo-landing .section > .wrap,
body[data-page="spiele"].slo-landing .section > .wrap-narrow { max-width: 1100px; }

/* ---- Flat background: no alternating bands on the approved inner pages ---- */
.slo-landing .sec-alt { background: none; border-top: 0; border-bottom: 0; }

/* ---- Section rhythm (~52px between blocks); FAQ (#faq) left out of scope ---- */
.slo-landing .section:not(#faq) { padding: 28px 0; }
.slo-landing .section-sm:not(#faq) { padding: 22px 0; }

/* ---- Heading scale: design tops out ~30-32px, not the home clamp(...,40px) ---- */
.slo-landing .section:not(#faq) .section-head h2,
.slo-landing .section:not(#faq) > .wrap > h2,
.slo-landing .section:not(#faq) > .wrap-narrow > h2 { font-size: clamp(22px, 2.8vw, 32px); }
.slo-landing .prose h2 { font-size: clamp(22px, 2.6vw, 30px); }

/* =========================  PAGE HERO  ============================= */
.page-hero { position: relative; overflow: hidden;
  background: radial-gradient(120% 110% at 80% 0%, #3a0f7a, #1a0940 45%, #0a0616 74%); }
.page-hero__glow { position: absolute; top: -100px; right: -40px; width: 440px; height: 440px;
  background: radial-gradient(circle, var(--hero-glow, rgba(224,31,154,.32)), transparent 62%);
  filter: blur(28px); pointer-events: none; }
.page-hero__in { position: relative; max-width: 1000px; margin: 0 auto; padding: 34px 20px 56px; }
body[data-page="app"] .page-hero__in,
body[data-page="spiele"] .page-hero__in { max-width: 1100px; }
body[data-page="spiele"] .page-hero__in { padding: 34px 20px 48px; }
body[data-page="erfahrungen"] .page-hero__in { padding: 34px 20px 52px; }

/* one top-right glow, coloured per page (approved values) */
body[data-page="casino"]      { --hero-glow: rgba(224,31,154,.32); }
body[data-page="bonus"]       { --hero-glow: rgba(246,228,0,.16); }
body[data-page="aktionscode"] { --hero-glow: rgba(51,230,230,.16); }
body[data-page="login"]       { --hero-glow: rgba(139,47,214,.30); }
body[data-page="app"]         { --hero-glow: rgba(51,230,230,.18); }
body[data-page="spiele"]      { --hero-glow: rgba(224,31,154,.28); }
body[data-page="zahlungen"]   { --hero-glow: rgba(51,230,230,.16); }
body[data-page="erfahrungen"] { --hero-glow: rgba(246,228,0,.14); }
body[data-page="support"]     { --hero-glow: rgba(51,230,230,.18); }

.page-hero .eyebrow { margin: 0; }
.page-hero h1 { font-family: var(--font-d); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(32px, 4.6vw, 54px); line-height: 1.04; margin: 14px 0 0; text-wrap: balance; }
.page-hero .hero-lede { margin: 18px 0 0; font-size: 17px; line-height: 1.6;
  color: var(--c-fg2); max-width: 64ch; }
.page-hero .cta-row { gap: 13px; margin-top: 26px; }
.page-hero .btn-primary { padding: 14px 26px; box-shadow: 0 10px 28px rgba(246,228,0,.32); }
.page-hero .btn-cyan { padding: 13px 22px; }
.page-hero .updated { margin: 18px 0 0; }

/* Breadcrumb rendered INSIDE the hero / page-header container (approved DOM) */
.page-breadcrumb { font-size: 13px; color: var(--c-fg3); margin: 0 0 22px; }
.page-breadcrumb a { color: var(--c-fg3); text-decoration: none; }
.page-breadcrumb a:hover { color: var(--c-neon); }
.page-breadcrumb .sep { opacity: .5; margin: 0 4px; }
.page-breadcrumb [aria-current] { color: var(--c-fg2); }
.slo-legal .page-breadcrumb { margin-bottom: 20px; }

/* =========================  TABLES  =============================== */
.slo-landing .tbl-wrap { background: none; }
.slo-landing .tbl thead th { background: linear-gradient(90deg, #7d1cb8, #c81e93);
  color: #fff; font-family: var(--font-b); font-weight: 700;
  text-transform: none; letter-spacing: normal; font-size: 14px; }
.slo-landing .tbl.kv td:first-child { width: 34%; color: var(--c-fg); font-weight: 700;
  background: var(--c-surf); }
.slo-landing .tbl tbody tr:nth-child(2n) { background: transparent; }

/* =========================  CARDS  =============================== */
.slo-landing .card { border-radius: 14px; }

/* Boxed prose: licence / terms / conclusion / crypto highlight sit in a
   rounded surface card, full width of the content column. */
.prose-card { background: var(--c-surf); border: 1px solid var(--c-line);
  border-radius: 16px; padding: 28px 26px; }
.prose-card > h2:first-child { margin-top: 0; }

/* Stat cards read left-aligned; their eyebrow is plain (no uppercase/tracking) */
.slo-landing .stat-card { text-align: left; }
.slo-landing .stat-card .stat-eyebrow { font-size: 12px; font-weight: 700;
  color: var(--c-fg3); text-transform: none; letter-spacing: normal; margin: 0; }
.slo-landing .stat-card .big { margin: 8px 0 2px; }
body[data-page="casino"] .grid-3 .stat-card { background: var(--c-surf2); }
body[data-page="zahlungen"] .stat-card { position: relative; overflow: hidden; }
body[data-page="zahlungen"] .stat-card::before { content: ""; position: absolute; top: 0; left: 0;
  width: 34px; height: 3px; background: linear-gradient(90deg, #f6e400, #e01f9a); }
body[data-page="zahlungen"] .stat-card .big { font-size: 22px; }

/* Bonus condition cards: accent bar + smaller figure/heading */
body[data-page="bonus"] .cond-card { position: relative; overflow: hidden; }
body[data-page="bonus"] .cond-card::before { content: ""; position: absolute; top: 0; left: 0;
  width: 36px; height: 3px; background: linear-gradient(90deg, #f6e400, #e01f9a); }
body[data-page="bonus"] .cond-card .big { font-size: 24px; }
body[data-page="bonus"] .cond-card h3 { font-size: 15px; }

/* Step badges: compact cyan chip, not the large neon-gradient one */
.slo-landing .step-num { background: var(--c-cyan); width: 38px; height: 38px;
  border-radius: 10px; font-size: 18px; }
.slo-landing .step-card { border-radius: 14px; padding: 20px; }
.slo-landing .step-card h3 { font-size: 16px; margin: 12px 0 5px; }

/* Panels (support channels / KYC): 16px radius, 26px padding, 19px title, 14px body */
.slo-landing .panel { border-radius: 16px; padding: 26px; }
.slo-landing .panel h3 { font-size: 19px; margin: 14px 0 6px; }
.slo-landing .panel p { font-size: 14px; }

/* Split sections are two surface cards in the design (not bare prose columns) */
.slo-landing .split:has(> .prose) { gap: 16px; align-items: stretch; }
.slo-landing .split > .prose { background: var(--c-surf); border: 1px solid var(--c-line);
  border-radius: 16px; padding: 26px; }
.slo-landing .split > .prose > h2:first-child { margin-top: 0; }
.slo-landing .split > .prose h2 { font-family: var(--font-d); font-weight: 700;
  font-size: 18px; margin: 0 0 10px; }
.slo-landing .split > .prose p, .slo-landing .split > .prose li { font-size: 14.5px; line-height: 1.65; }

/* pros/cons: markup emits <h2> but the design intends a 20px card title
   (the shared .pc h3 rule never matched, so they inherited the huge global h2). */
.slo-landing .pc h2 { font-size: 20px; line-height: 1.25; margin: 0 0 16px; }
.slo-landing .pc.pros h2 { color: var(--c-cyan); }
.slo-landing .pc.cons h2 { color: var(--c-magenta); }

/* Review score bars: purple->cyan fill, 9px track on surf2 */
.slo-landing .score .bar { height: 9px; background: var(--c-surf2); }
.slo-landing .score .bar > i { background: linear-gradient(90deg, #8b2fd6, #33e6e6); }

/* Payment chips: slightly larger pill (approved sizing) */
.slo-landing .pay-chip { font-size: 13px; padding: 7px 13px; border-radius: 8px; }
.slo-landing .pay-chips { gap: 8px; }

/* Spiele game-filter buttons are pills */
body[data-page="spiele"] .game-filter { border-radius: 999px; padding: 10px 18px; }
body[data-page="spiele"] .game-filters { margin-bottom: 22px; }

/* Games "view all" link sits below the grid */
.games-view-all { margin-top: 18px; }

/* Casino quick-link cards: full-tile cards (17px title), not the compact b/span */
body[data-page="casino"] .link-card { border-radius: 14px; padding: 22px; }
body[data-page="casino"] .link-card b { font-size: 17px; }

/* Support "common topics" link cards: a row with a trailing chevron (design),
   not the default stacked title/description. The seed cards are title-only. */
body[data-page="support"] .link-card { flex-direction: row; align-items: center;
  justify-content: space-between; gap: 10px; padding: 16px 18px; border-radius: 12px; }
body[data-page="support"] .link-card b { font-size: 15px; }
body[data-page="support"] .link-card::after { content: ""; flex: none; width: 16px; height: 16px;
  background-color: var(--c-fg3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---- .sec-grad — the approved "In 4 Schritten startklar" band. The static
        build carried this as an inline style on the section; as an ACF-selectable
        background it is a class, so the value lives here (main.css untouched).
        Same declarations as the .home :has(.step-card) rule above, which stays
        for the block-era markup. ---- */
.sec-grad { background: radial-gradient(100% 100% at 50% 0%, #241046, #0a0616); border-top: 1px solid var(--c-line); }