/* onlinecasinoerfahrung.net — Wine & Gold (SuperDesign Branch A, re-authored as vanilla CSS)
   Footprint: wine palette · Cinzel + Outfit (self-hosted) · top-nav · soft-shadow · lucide
   No Tailwind, no CDN. */

/* ---------- Self-hosted fonts ---------- */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/cinzel-400.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/cinzel-700.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/outfit-300.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/outfit-400.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/outfit-700.woff2') format('woff2'); }

/* ---------- Design tokens ---------- */
:root {
  --wine-950: #1e020a;   /* page bg */
  --wine-900: #0f0a0c;   /* alt section */
  --wine-black: #0a0708; /* footer */
  --wine: #4c0519;       /* wine accent */
  --wine-panel: #2d1b22; /* card bg */
  --gold-200: #fde68a;
  --gold-600: #d97706;
  --amber-line: rgba(217,119,6,0.30);
  --amber-line-strong: rgba(217,119,6,0.80);
  --red-notice: rgba(69,10,10,0.40);
  --red-line: rgba(153,27,27,0.35);
  --text: #f4ecd8;
  --text-muted: #b9a9a0;
  --radius: 12px;
  --radius-sm: 8px;
  --container: 1200px;
  --shadow-soft: 0 10px 30px -10px rgba(0,0,0,0.5);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: 'Outfit', system-ui, sans-serif; font-weight: 400; line-height: 1.6;
  color: var(--text); background: var(--wine-950); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-200); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { font-family: 'Cinzel', Georgia, serif; line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
/* long German compound nouns (Cinzel, no break opportunity): hyphenate; break only as last resort.
   Relies on lang="de" (set) for correct hyphenation points. hyphenate-limit-chars avoids ugly short splits. */
h1, h2, h3, h4, .card, .card h3, .card p, .rc-name, .rc-usp, .rank-usp, .hero-trust li,
.tile, .info-card, .quiz-label { overflow-wrap: break-word; hyphens: auto; }
html { -webkit-hyphenate-limit-chars: 6 3 2; hyphenate-limit-chars: 6 3 2; }
body { overflow-wrap: break-word; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }

/* ---------- Utilities ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.font-display { font-family: 'Cinzel', Georgia, serif; }
.gold-text { background: linear-gradient(to bottom, var(--gold-200), var(--gold-600));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.wine-gradient { background: linear-gradient(135deg, var(--wine) 0%, var(--wine-950) 100%); position: relative; }
/* Hero with photo background — dark wine overlay keeps gold text readable */
.wine-gradient--hero { position: relative; overflow: hidden; background-size: cover; background-position: center; }
.wine-gradient--hero::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, rgba(30,2,10,.93) 0%, rgba(30,2,10,.74) 52%, rgba(76,5,25,.58) 100%); }
.wine-gradient--hero > .container { position: relative; z-index: 1; }
/* Effekt-Trennlinie am Hero-Fuß (auf ALLEN Seiten): transparent an den Rändern, leuchtender Gold-Kern + Glow */
.wine-gradient::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  z-index: 2; width: min(760px, 86%); height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(253,230,138,.12) 12%, var(--gold-600) 45%, var(--gold-200) 50%, var(--gold-600) 55%, rgba(253,230,138,.12) 88%, transparent 100%);
  box-shadow: 0 0 10px rgba(253,230,138,.35); }
.hero-ratgeber { background-image: url(../assets/hero/jpg/ratgeber-hero-1536w.jpg);
  background-image: image-set(url(../assets/hero/avif/ratgeber-hero-1536w.avif) type("image/avif"), url(../assets/hero/webp/ratgeber-hero-1536w.webp) type("image/webp")); }
.hero-redaktion { background-image: url(../assets/hero/jpg/redaktion-hero-1536w.jpg);
  background-image: image-set(url(../assets/hero/avif/redaktion-hero-1536w.avif) type("image/avif"), url(../assets/hero/webp/redaktion-hero-1536w.webp) type("image/webp")); }
.hero-home { background-image: url(../assets/hero/jpg/home-hero-1536w.jpg);
  background-image: image-set(url(../assets/hero/avif/home-hero-1536w.avif) type("image/avif"), url(../assets/hero/webp/home-hero-1536w.webp) type("image/webp")); }
.hero-bonus { background-image: url(../assets/hero/jpg/bonus-hero-1536w.jpg);
  background-image: image-set(url(../assets/hero/avif/bonus-hero-1536w.avif) type("image/avif"), url(../assets/hero/webp/bonus-hero-1536w.webp) type("image/webp")); }
.hero-slots { background-image: url(../assets/hero/jpg/slots-hero-1536w.jpg);
  background-image: image-set(url(../assets/hero/avif/slots-hero-1536w.avif) type("image/avif"), url(../assets/hero/webp/slots-hero-1536w.webp) type("image/webp")); }
.hero-sicherheit { background-image: url(../assets/hero/jpg/sicherheit-hero-1536w.jpg);
  background-image: image-set(url(../assets/hero/avif/sicherheit-hero-1536w.avif) type("image/avif"), url(../assets/hero/webp/sicherheit-hero-1536w.webp) type("image/webp")); }
.hero-onlinecasinos { background-image: url(../assets/hero/jpg/onlinecasinos-hero-1536w.jpg);
  background-image: image-set(url(../assets/hero/avif/onlinecasinos-hero-1536w.avif) type("image/avif"), url(../assets/hero/webp/onlinecasinos-hero-1536w.webp) type("image/webp")); }
/* phones: serve the lighter 960w hero (was downloading the full 1536w) */
@media (max-width: 640px) {
  .hero-home { background-image: url(../assets/hero/jpg/home-hero-960w.jpg); background-image: image-set(url(../assets/hero/avif/home-hero-960w.avif) type("image/avif"), url(../assets/hero/webp/home-hero-960w.webp) type("image/webp")); }
  .hero-onlinecasinos { background-image: url(../assets/hero/jpg/onlinecasinos-hero-960w.jpg); background-image: image-set(url(../assets/hero/avif/onlinecasinos-hero-960w.avif) type("image/avif"), url(../assets/hero/webp/onlinecasinos-hero-960w.webp) type("image/webp")); }
  .hero-bonus { background-image: url(../assets/hero/jpg/bonus-hero-960w.jpg); background-image: image-set(url(../assets/hero/avif/bonus-hero-960w.avif) type("image/avif"), url(../assets/hero/webp/bonus-hero-960w.webp) type("image/webp")); }
  .hero-slots { background-image: url(../assets/hero/jpg/slots-hero-960w.jpg); background-image: image-set(url(../assets/hero/avif/slots-hero-960w.avif) type("image/avif"), url(../assets/hero/webp/slots-hero-960w.webp) type("image/webp")); }
  .hero-sicherheit { background-image: url(../assets/hero/jpg/sicherheit-hero-960w.jpg); background-image: image-set(url(../assets/hero/avif/sicherheit-hero-960w.avif) type("image/avif"), url(../assets/hero/webp/sicherheit-hero-960w.webp) type("image/webp")); }
  .hero-ratgeber { background-image: url(../assets/hero/jpg/ratgeber-hero-960w.jpg); background-image: image-set(url(../assets/hero/avif/ratgeber-hero-960w.avif) type("image/avif"), url(../assets/hero/webp/ratgeber-hero-960w.webp) type("image/webp")); }
  .hero-redaktion { background-image: url(../assets/hero/jpg/redaktion-hero-960w.jpg); background-image: image-set(url(../assets/hero/avif/redaktion-hero-960w.avif) type("image/avif"), url(../assets/hero/webp/redaktion-hero-960w.webp) type("image/webp")); }
}

.section { padding: clamp(3rem, 8vw, 6rem) 0; }
/* two plain sections in a row would double their padding → dead gap; collapse the top one */
.section + .section:not(.section--alt):not(.wine-gradient) { padding-top: 0; }
.section--alt { background: var(--wine-900); border-block: 1px solid var(--amber-line); }
.eyebrow { font-family: 'Outfit'; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem;
  color: var(--gold-600); font-weight: 600; }
.lead { font-size: 1.15rem; color: var(--text-muted); max-width: 60ch; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Outfit'; font-weight: 600;
  padding: .8rem 1.5rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.btn--gold { background: linear-gradient(to bottom, var(--gold-200), var(--gold-600)); color: #2a1206; }
.btn--gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); text-decoration: none; }
.btn--ghost { background: transparent; border-color: var(--amber-line); color: var(--gold-200); }
.btn--ghost:hover { border-color: var(--amber-line-strong); text-decoration: none; }

/* ---------- Header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--wine-950);
  border-bottom: 1px solid var(--amber-line); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
.logo { display: inline-flex; align-items: center; }
.logo svg { height: 34px; width: auto; }
.main-nav { display: none; gap: 1.8rem; }
.main-nav a { color: var(--text); font-weight: 600; font-size: .95rem; }
.main-nav a:hover { color: var(--gold-200); text-decoration: none; }
.nav-toggle { background: none; border: 1px solid var(--amber-line); border-radius: var(--radius-sm);
  color: var(--gold-200); padding: .5rem .8rem; cursor: pointer; font-size: 1.5rem; line-height: 1; }
@media (min-width: 1024px) { .main-nav { display: flex; } .nav-toggle { display: none; } }
/* keep the hamburger visible down to 320px — never shrink the toggle, scale the logo instead */
.nav-toggle { flex-shrink: 0; }
.logo { flex-shrink: 1; min-width: 0; }
@media (max-width: 420px) { .site-header .bar { gap: .5rem; } .logo svg { height: 27px; } }

/* ---------- Cards / ranking ---------- */
.grid { display: grid; gap: 1.25rem; }
.card { background: var(--wine-panel); border: 1px solid var(--amber-line); border-radius: var(--radius);
  padding: 1.5rem; }
.card-hover { transition: transform .18s, border-color .18s, box-shadow .18s; }
.card-hover:hover { transform: translateY(-4px); border-color: var(--amber-line-strong); box-shadow: var(--shadow-soft); }
.rank-list { display: grid; gap: 1rem; }
.rank-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 1rem 1.25rem; align-items: center;
  background: var(--wine-panel); border: 1px solid var(--amber-line); border-radius: var(--radius); padding: 1.25rem; }
.rank-num { font-family: 'Cinzel'; font-size: 1.4rem; color: var(--gold-200); text-align: center; }
.logo-chip { display: inline-flex; align-items: center; justify-content: center; background: #fff;
  border-radius: 6px; padding: 4px 8px; }
.logo-chip img { height: 24px; width: auto; max-width: 110px; display: block; }
/* Таблични лога: equal-area canvas (еднаква пропорция) → един width уеднаквява визуалната им тежина */
.rank-head .logo-chip img,
.rc-brand .logo-chip img { height: auto; width: 128px; max-width: 100%; }
@media (max-width: 640px) {
  .rank-head .logo-chip img,
  .rc-brand .logo-chip img { width: 104px; }
}
.rank-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rank-rating { color: var(--gold-200); font-weight: 600; }
@media (max-width: 640px) { .rank-card { grid-template-columns: 36px 1fr; } .rank-card .rank-cta { grid-column: 1 / -1; } }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600;
  padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--amber-line-strong); color: var(--gold-200); }
.badge--ggl { color: var(--gold-200); border-color: var(--amber-line-strong); }
.badge--new { color: #7fe3a4; border-color: rgba(127,227,164,.4); }

/* ---------- Finder (Finde dein Casino filter) ---------- */
.finder { background: var(--wine-900); border: 1px solid var(--amber-line-strong); border-radius: var(--radius);
  padding: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; }
.finder label { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .6rem 1rem; border: 1px solid var(--amber-line); border-radius: 999px; font-weight: 600; }
.finder input:checked + label,
.finder label:has(input:checked) { border-color: var(--gold-600); background: rgba(217,119,6,.12); }

/* ---------- Method / criteria ---------- */
.criteria { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1.25rem; }

/* ---------- FAQ accordion ---------- */
.faq-item { border: 1px solid var(--amber-line); border-radius: var(--radius-sm); margin-bottom: .75rem;
  background: var(--wine-panel); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1rem 1.25rem; display: flex;
  justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--text); }
.faq-item summary::after { content: '+'; color: var(--gold-200); font-size: 1.5rem; line-height: 1; flex: none; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item > div { padding: 0 1.25rem 1.1rem; }
.faq-item > div p { margin: 0; color: var(--text-muted); }
ul { padding-left: 1.2rem; } ul li { margin-bottom: .4rem; color: var(--text-muted); }

/* ---------- Responsible-gambling notice ---------- */
.rg-notice { background: var(--red-notice); border-block: 1px solid var(--red-line); font-size: .9rem;
  color: var(--text-muted); }
.rg-notice strong { color: var(--text); }

/* ---------- Footer ---------- */
.site-footer { background: var(--wine-black); border-top: 1px solid var(--amber-line); padding-block: 4rem 2rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 2rem; }
.site-footer .foot-h { color: var(--gold-200); font-size: .9rem; letter-spacing: .05em; }
.site-footer a { color: var(--text-muted); font-weight: 400; display: block; padding: .2rem 0; }
.footer-legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--amber-line);
  font-size: .82rem; color: var(--text-muted); }

/* ---------- Interaction signature: "measured reveal" (reduced-motion-safe, no-JS-safe) ---------- */
.oce-fade{opacity:0;transform:translateY(11px);transition:opacity .45s ease,transform .55s ease}
.oce-fade.oce-shown{opacity:1;transform:none}
.main-nav a{transition:color .2s ease}
/* active (current) page link — само цвят, без линия */
.main-nav a[aria-current="page"]{color:var(--gold-200)}
/* hamburger toggle: цвят/борд при отваряне, без въртене */
.nav-toggle{transition:color .2s ease,border-color .2s ease}
.nav-toggle[aria-expanded="true"]{border-color:var(--gold-600);color:var(--gold-200)}
@media (max-width:1023px){
  .site-header .bar{position:relative}
  .main-nav{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;position:absolute;top:100%;left:0;right:0;
    background:var(--wine-950);border-bottom:1px solid var(--amber-line);z-index:60;
    max-height:0;opacity:0;overflow:hidden;pointer-events:none;padding:0 1.25rem;
    transition:max-height .32s ease,opacity .25s ease,padding .32s ease}
  .main-nav a{align-self:flex-start}
  .main-nav.open{max-height:70vh;opacity:1;overflow:auto;pointer-events:auto;padding:1rem 1.25rem}
}
@media (max-width:1023px) and (prefers-reduced-motion: reduce){ .main-nav{transition:none} }
@media (prefers-reduced-motion: reduce){.oce-fade{opacity:1;transform:none;transition:none}}

/* ---------- Auszahlungs-Duell (home interactive) ---------- */
.duell { background: var(--wine-900); border: 1px solid var(--amber-line-strong); border-radius: var(--radius); padding: 1.5rem; }
.duell-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: 1.5rem; }
.duell-controls label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .9rem; }
.duell-controls select { background: var(--wine-950); color: var(--text); border: 1px solid var(--amber-line); border-radius: var(--radius-sm); padding: .55rem .7rem; font-family: inherit; min-width: 170px; }
.duell-methods { display: inline-flex; gap: .4rem; }
.du-m { background: transparent; border: 1px solid var(--amber-line); color: var(--text); border-radius: 999px; padding: .5rem .9rem; cursor: pointer; font-weight: 600; font-family: inherit; }
.du-m.is-on { border-color: var(--gold-600); background: rgba(217,119,6,.14); color: var(--gold-200); }
.duell-arena { display: grid; gap: 1rem; }
.duell-lane { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head head" "track time"; gap: .4rem 1rem; align-items: center; }
.duell-head { grid-area: head; display: flex; align-items: center; gap: .6rem; }
.duell-track { grid-area: track; height: 16px; background: var(--wine-950); border: 1px solid var(--amber-line); border-radius: 999px; overflow: hidden; }
.duell-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(to right, var(--wine), var(--gold-600)); }
.duell-fill.win { background: linear-gradient(to right, var(--gold-600), var(--gold-200)); }
.duell-time { grid-area: time; font-weight: 600; color: var(--gold-200); white-space: nowrap; }
.duell-note { margin-top: 1.25rem; font-size: .82rem; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce){ .duell-fill { transition: none !important; } }

/* ---------- Hero: desktop 2-col (text stack left, duell right); mobile H1 → duell → text ---------- */
.hero-grid { display: flex; flex-direction: column; gap: 1.5rem; }
.hero-main { display: contents; }                 /* mobile: text+below flatten so order works */
.hero-text { order: 1; } .hero-side { order: 2; } .hero-below { order: 3; }
.hero-text h1 { margin-bottom: 0; }
.hero-side .duell { margin: 0 auto; } .hero-side .eyebrow { margin-top: 0; }
.eyebrow { overflow-wrap: anywhere; }
@media (min-width: 1024px){
  .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: start; }
  .hero-main { display: flex; flex-direction: column; gap: 1.1rem; }   /* left column = independent stack, no gap artifact */
}
@media (max-width: 640px){ .eyebrow { letter-spacing: .1em; font-size: .72rem; } }

/* ---------- Centered content layout ---------- */
main .container, .rg-notice .container { text-align: center; }
.hero-text, .hero-below { text-align: center; }
.lead { margin-inline: auto; }
figure, .duell, .finder, .criteria, .grid, .rank-list, .faq { margin-inline: auto; }
figure img { margin-inline: auto; }
/* readability islands: keep text left INSIDE the centered block */
main ul, main ol { display: inline-block; text-align: left; margin-inline: auto; }
.faq-item summary, .faq-item > div { text-align: left; }
.rank-card, .rank-card .rank-cta { text-align: left; }
.rank-card .rank-cta { text-align: right; }
.footer-grid { text-align: left; }
.duell, .bc-out, #bonus-calc .bc-row { text-align: left; }

/* ---------- Homepage hero: dial down the two top headings (less crowded on desktop) ---------- */
.hero-text h1 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
.hero-side h2 { font-size: clamp(1.2rem, 2.1vw, 1.6rem); }

/* ---------- Mobile H1 fit (avoid horizontal overflow of long German words) ---------- */
@media (max-width: 640px){
  .hero-text h1 { font-size: clamp(1.5rem, 6.4vw, 2.2rem); overflow-wrap: break-word; hyphens: auto; }
  h1, h2 { overflow-wrap: break-word; }
}

/* ---------- Duell responsive (stack controls on phone; prevents horizontal overflow) ---------- */
@media (max-width: 640px){
  .duell-controls { flex-direction: column; align-items: stretch; }
  .duell-controls label { width: 100%; }
  .duell-controls select { min-width: 0; width: 100%; }
  .duell-methods { width: 100%; }
  .du-m { flex: 1; text-align: center; }
  #du-go { width: 100%; }
  .duell-lane { grid-template-columns: 1fr; grid-template-areas: "head" "track" "time"; }
  .duell-time { text-align: left; }
}
.duell, .hero-side, .hero-grid { max-width: 100%; }

/* ---------- Prevent horizontal overflow on small screens ---------- */
html, body { overflow-x: clip; max-width: 100%; }
@media (max-width: 640px){ .duell-methods { flex-wrap: wrap; } .du-m { flex: 1 1 30%; } }

/* keep hero duell compact on desktop */
@media (min-width:1024px){ .hero-side { max-width: 440px; margin-inline: auto; } .hero-side .duell { max-width: 100%; } }

/* ---------- Hero trust-list (SEO + visual balance) ---------- */
.hero-trust { list-style: none; padding: 0; margin: 1.1rem auto 0; display: inline-block; text-align: left; }
.hero-trust li { position: relative; padding-left: 1.7rem; margin: .5rem 0; color: var(--text); font-weight: 600; }
.hero-trust li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--gold-600); font-weight: 700; }

/* ---------- Filter sits directly above the ranking table ---------- */
#casino-finder { margin: 1.5rem auto 1.25rem; }
#casino-finder + p { margin-top: .25rem; }   /* counter line, if any */

/* ---------- Ranking CTA: space out rating / Zum Casino / Zur Erfahrung ---------- */
.rank-cta { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.rank-cta .btn { margin: 0; }

/* ---------- Ranking score-bars ("Erfahrung in Zahlen") ---------- */
.rank-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem 1rem; margin-top: .7rem; }
.rank-scores .sc span { display: block; font-size: .72rem; color: var(--text-muted); margin-bottom: .25rem; white-space: nowrap; text-align: center; }
.rank-scores .sc span b { color: var(--gold-200); }
.rank-scores .sc em { display: block; height: 8px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.rank-scores .sc i { display: block; height: 100%; width: var(--v, 0); border-radius: 999px;
  background: linear-gradient(to right, var(--wine), var(--gold-600)); transition: width 1.1s cubic-bezier(.4,0,.2,1); }
.rank-scores.prep .sc i { width: 0; }
@media (prefers-reduced-motion: reduce){ .rank-scores .sc i { transition: none; } }
@media (max-width: 620px){ .rank-scores { grid-template-columns: 1fr 1fr; } }

/* solo category score-bar (one metric, wider) */
.rank-scores--solo { grid-template-columns: 1fr; max-width: 260px; }
@media (max-width: 620px){ .rank-scores--solo { max-width: none; } }

/* USP / highlight line in category ranking cards */
.rank-usp { margin: .55rem 0 .1rem; font-size: .84rem; font-style: italic; color: var(--gold-200); opacity: .9; max-width: 52ch; }

/* ---------- Category ranking card: 4 cells (brand+bonus | bar | usp | cta) ---------- */
.rank-card--cat { grid-template-columns: minmax(180px,220px) minmax(170px,1fr) 1.5fr auto; align-items: center; gap: 1rem 1.6rem; }
.rank-card--cat .rc-brand { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; }
.rank-card--cat .rc-rank { font-family: 'Cinzel', serif; color: var(--gold-200); font-size: .95rem; }
.rank-card--cat .rc-name { font-weight: 700; font-size: 1.05rem; }
.rank-card--cat .rc-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.rank-card--cat .rc-bonus { color: var(--text-muted); font-size: .9rem; }
.rank-card--cat .rc-bar { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.rank-card--cat .rc-bar .rank-scores { margin: 0; max-width: none; width: 100%; }
.rank-card--cat .rc-bonus { color: var(--gold-200); font-weight: 600; font-size: .92rem; text-align: center; }
.rank-card--cat .rc-usp { text-align: center; }
.rank-card--cat .rc-usp .rank-usp { margin: 0; }
@media (max-width: 820px){
  .rank-card--cat { grid-template-columns: 1fr; gap: .8rem; text-align: center; }
  .rank-card--cat .rc-brand { align-items: center; text-align: center; }
  .rank-card--cat .rc-usp { text-align: center; }
  .rank-card--cat .rank-cta { align-items: center; }
}

/* category card: center rating + buttons within the CTA cell (rating centered over the button) */
.rank-card--cat .rank-cta { align-items: center; text-align: center; }

/* ---------- RTP-Duell (slots) — home-duell proportions ---------- */
.rtp-duell { max-width: 640px; margin-inline: auto; }
.rtp-controls { flex-direction: column; align-items: stretch; gap: .8rem; }
.rtp-controls label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; text-align: left; }
.rtp-controls label b { color: var(--gold-200); }
.rtp-controls input[type=range] { width: 100%; accent-color: var(--gold-600); }

/* ---------- Info-card (sicherheit-lizenz hero) ---------- */
.info-card { text-align: left; }
.info-card .eyebrow { margin-top: 0; }
.info-card h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: .8rem; }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { position: relative; padding-left: 1.8rem; margin: .7rem 0; color: var(--text-muted); font-size: .93rem; }
.info-list li b { color: var(--text); }
.info-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--gold-600); font-weight: 700; }

/* ---------- Tooltip (hover desktop / tap mobile) ---------- */
.tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: .45rem; }
.tip-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--gold-600); background: transparent;
  color: var(--gold-200); font-family: 'Outfit', sans-serif; font-size: .8rem; font-weight: 700; font-style: italic;
  line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tip-box { position: absolute; top: 135%; right: 0; left: auto; width: 280px; max-width: calc(100vw - 2rem); white-space: normal;
  background: var(--wine-panel); border: 1px solid var(--amber-line-strong); border-radius: 10px; padding: .85rem 1rem;
  font-family: 'Outfit', sans-serif; font-size: .85rem; font-weight: 400; font-style: normal; line-height: 1.5;
  color: var(--text); text-align: left; box-shadow: var(--shadow-soft); z-index: 80;
  visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; }
.tip:hover .tip-box, .tip:focus-within .tip-box, .tip.open .tip-box { visibility: visible; opacity: 1; }
@media (max-width: 640px){ .tip-box { left: auto; right: 0; transform: none; } }

/* ---------- Scroll-to-top button ---------- */
.to-top { position: fixed; right: 1.1rem; bottom: 1.1rem; width: 46px; height: 46px; border-radius: 50%;
  background: var(--wine-panel); border: 1px solid var(--amber-line-strong); color: var(--gold-200);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  box-shadow: var(--shadow-soft); z-index: 90;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s, transform .2s, visibility .2s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--gold-600); color: var(--gold-100, var(--gold-200)); }
.to-top:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ .to-top { transition: none; } }

/* ---------- Heading spacing: give content headings top+bottom margin ---------- */
main h2 { margin-top: 1.9rem; margin-bottom: .6rem; }
main h3 { margin-top: 1.3rem; margin-bottom: .45rem; }
main h4 { margin-top: 1.1rem; margin-bottom: .4rem; }
/* keep hero headings tight to their eyebrow, and embedded headings unchanged */
.hero-grid h2 { margin-top: .4rem; }
.rank-card h3, .rank-card--cat .rc-name, .faq-item summary h3 { margin-top: 0; }
.info-card h2 { margin-top: .4rem; }

/* ---------- Casino-Finder Quiz (online-casinos hero) ---------- */
.quiz { text-align: left; background: var(--wine-900); border: 1px solid var(--amber-line-strong); border-radius: var(--radius); padding: 1.5rem; }
/* ATF-Widget allein in einer Reihe (mobil/gestapelt): Text zentrieren */
@media (max-width: 1023px){
  .quiz { text-align: center; }
  .quiz-opts { justify-content: center; }
  .quiz-cta { align-items: center; }
}
.quiz .eyebrow { margin-top: 0; }
.quiz h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-top: .3rem; }
.quiz-q { margin: .85rem 0; }
.quiz-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.quiz-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.quiz-opts button { background: transparent; border: 1px solid var(--amber-line); color: var(--text);
  border-radius: 999px; padding: .4rem .85rem; cursor: pointer; font-family: inherit; font-size: .85rem; }
.quiz-opts button.is-on { border-color: var(--gold-600); background: rgba(217,119,6,.14); color: var(--gold-200); }
.quiz-go { margin-top: 1.1rem; }
.quiz-result { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--amber-line); }
.quiz-hit { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.quiz-hit strong { display: block; }
.quiz-why { display: block; font-size: .82rem; color: var(--gold-200); }
.quiz-hl { font-size: .85rem; color: var(--text-muted); margin: .3rem 0 .8rem; }
.quiz-cta { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }

/* Fast-payout table: name above logo (left), GGL centered in the empty middle zone */
.rank-card--payout { grid-template-columns: 44px minmax(150px,190px) 1fr auto; }
.rank-card--payout .rc-brand2 { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
.rank-card--payout .rc-brand2 .rc-name { font-weight: 700; font-size: 1.05rem; }
.rank-card--payout .rc-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; }
.rank-card--payout .rc-desc { color: var(--text-muted); font-size: .9rem; margin: 0; }
@media (max-width: 640px) {
  .rank-card--payout { grid-template-columns: 1fr; text-align: center; }
  .rank-card--payout .rank-num { display: none; }
  .rank-card--payout .rank-cta { grid-column: 1 / -1; align-items: center; text-align: center; }
}

/* Footer copyright line */
.footer-copy { text-align: center; color: var(--text-muted); font-size: .8rem; margin: 1.25rem 0 0; }