/* =========================================================================
   Bonus Crab Casinos — shared design system
   Ported 1:1 from the landing-page reference (look & feel is binding).
   Change a value here once → every page updates after the next build.
   ========================================================================= */

:root{
  --bg:#1a0a2e;
  --bg-2:#240f3d;
  --panel:#2d1450;
  --panel-2:#371a5f;
  --purple:#7b2ff7;
  --purple-bright:#9d4edd;
  --gold:#ffc41f;
  --gold-bright:#ffd95a;
  --ink:#f4ecff;
  --muted:#bba9d6;
  --line:rgba(157,78,221,.28);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --r:20px;
  --display:'Baloo 2',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;

  /* ----- spacing tokens (used everywhere; change once → whole site breathes) ----- */
  --space-section: 92px;    /* vertical padding top/bottom of a <section> */
  --space-block:   40px;    /* vertical gap between blocks/sub-sections in a page */
  --space-card-gap:30px;    /* gap between cards/boxes in a grid or flex row */
  --space-row-gap: 16px;    /* gap between dense list rows (casino list etc.) */
}
@media (max-width:768px){
  :root{
    --space-section: 56px;
    --space-block:   28px;
    --space-card-gap:18px;
    --space-row-gap: 12px;
  }
}

/* generic vertical rhythm: consistent air between stacked blocks.
   A heading hugs the block right after it; everything else gets full air. */
.flow>*+*{margin-top:var(--space-block)}
.flow>:is(h2,h3,.section-head)+*{margin-top:.55rem}
.flow .section-head{margin-bottom:0}
.flow>h2{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:1.15}
.flow>h3{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--gold)}
/* nested article wrappers (.hg-seo, .seo-block) inherit the SAME rhythm as .flow — without this
   their content collapses to margin:0 (global reset): headings hug tables/tiles, p→h2 has no air. */
.hg-seo>*+*,.seo-block>*+*{margin-top:var(--space-block)}
.hg-seo>:is(h2,h3)+*,.seo-block>:is(h2,h3)+*{margin-top:.55rem}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  overflow-x:hidden;
  background-image:
    radial-gradient(900px 600px at 85% -5%, rgba(123,47,247,.35), transparent 60%),
    radial-gradient(700px 500px at 5% 12%, rgba(255,196,31,.10), transparent 55%),
    linear-gradient(180deg,#1a0a2e 0%, #200d36 50%, #190a2c 100%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.display{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.01em}
.gold{color:var(--gold)}
.eyebrow{
  font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);display:inline-block;margin-bottom:14px;
}

/* ---------- top bar ---------- */
header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(12px);
  background:linear-gradient(180deg,rgba(26,10,46,.92),rgba(26,10,46,.6));
  border-bottom:1px solid var(--line);
}
/* min-height statt height: die Leiste DARF auf mittleren Breiten umbrechen — nur
   innerhalb eines Menuepunktes darf sie es nicht (siehe .nav-links a unten). Bei
   fester Hoehe waere die zweite Zeile aus dem Kopf herausgelaufen. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-card-gap);min-height:68px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800}
.brand img{width:42px;height:42px}
.brand-text{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.brand-name{font-size:1.15rem;color:var(--ink)}
.brand-sub{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
/* Neun Menuepunkte passen zwischen 1120px und rund 1400px nicht in eine Zeile.
   Ohne nowrap bricht der Text IM Punkt um ("Beste / Casinos"), was wie zwei
   Menuepunkte aussieht. Jetzt bricht die Leiste zwischen den Punkten um. */
/* margin-right:auto zieht die Menuegruppe an den Markenblock und schiebt alles
   danach (den Knopf) nach rechts aussen. Vorher verteilte justify-content:space-between
   den freien Raum GLEICHMAESSIG auf beide Luecken — gemessen bei 1440px: 303px zwischen
   Marke und erstem Menuepunkt, 20px zwischen letztem Punkt und Knopf.
   ⚠️ space-between bleibt stehen: unterhalb von 1120px ist .nav-links display:none, und
      dann ist es die Regel, die den Hamburger nach rechts stellt. Die auto-Margin ist
      dort wirkungslos, weil das Element nicht rendert. */
.nav-links{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-right:auto}
.nav-links>a,.nav-item>a{white-space:nowrap}
.nav-links a{font-weight:600;font-size:.92rem;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  font-family:var(--display);font-weight:800;font-size:.9rem;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#1a0a00 !important;padding:10px 20px;border-radius:999px;
  box-shadow:0 6px 18px rgba(255,196,31,.35);transition:transform .15s;
}
.nav-cta:hover{transform:translateY(-2px)}
.menu-btn{display:none;background:none;border:0;color:var(--ink);font-size:1.6rem;cursor:pointer}

/* ---------- header dropdowns ---------- */
.nav-item{position:relative;padding-bottom:10px;margin-bottom:-10px}
/* Der Gruppenkopf ist ein <button>, kein Link — er hat kein Ziel, sondern ein Auf/Zu.
   Die Regeln gelten deshalb fuer beide Formen. */
.nav-item>a,.nav-item>.nav-top{font-weight:600;font-size:.92rem;color:var(--muted);transition:color .2s;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  background:none;border:0;padding:0;font-family:inherit}
.nav-item>a::after,.nav-item>.nav-top::after{content:"▾";font-size:.7rem;opacity:.7}
.nav-item:hover>a,.nav-item:hover>.nav-top,.nav-item>.nav-top:focus-visible{color:var(--ink)}
.drop{position:absolute;top:100%;left:0;display:none;flex-direction:column;min-width:220px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:8px;
  box-shadow:var(--shadow);z-index:60}
/* Drei Wege ins Untermenue, additiv: Mauszeiger, Tastatur (aria-expanded ueber
   Enter/Leertaste) und Beruehrung/Klick. Nur mit :hover waere es auf Tablets tot.
   ⚠️ :focus-within haengt am .drop, NICHT am .nav-item — sonst haelt der Fokus, der
   nach Escape auf den Knopf zurueckspringt, das Menue offen und Escape wirkt nicht. */
.nav-item:hover .drop,
.drop:focus-within,
.nav-item>.nav-top[aria-expanded="true"]+.drop{display:flex}
.drop a{padding:9px 12px;border-radius:9px;color:var(--muted);font-size:.9rem;white-space:nowrap;font-weight:600}
.drop a:hover{background:rgba(157,78,221,.18);color:var(--ink)}
.drop a.star::after{content:" ⭐";font-size:.8rem}
.drop .sep{height:1px;background:var(--line);margin:6px 4px}
.drop a.all{color:var(--gold);font-weight:700}

/* ---------- signature claw ---------- */
.claw-rig{
  position:fixed;top:68px;right:8%;z-index:40;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
  transition:transform .25s ease-out;will-change:transform;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));
}
.claw-cable{width:5px;background:linear-gradient(90deg,#3a2658,#6a4a8f 40%,#4a3270);border-radius:3px;box-shadow:inset -1px 0 1px rgba(0,0,0,.3)}
.claw-svg{width:88px;height:auto;margin-top:-2px;display:block}
.claw-svg .grip{animation:clawpinch 3.4s ease-in-out infinite;transform-origin:center top;}
@keyframes clawpinch{0%,100%{transform:rotate(0deg)}48%{transform:rotate(0deg)}60%{transform:rotate(var(--pinch))}74%{transform:rotate(0deg)}}
@media (max-width:760px){.claw-rig{right:10px;transform:scale(.72)}.claw-svg{width:74px}}
@media (prefers-reduced-motion:reduce){.claw-rig{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;padding:90px 0 50px;text-align:center}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5.4vw,3.4rem);margin:0 auto 6px;max-width:22ch}
.hero h1 .ul{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:4px;text-underline-offset:6px}
.hero p.lead{font-size:clamp(1rem,2.2vw,1.18rem);color:var(--muted);max-width:60ch;margin:14px auto 0}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.btn{
  font-family:var(--display);font-weight:700;font-size:1rem;
  padding:14px 28px;border-radius:999px;cursor:pointer;border:0;transition:transform .15s,box-shadow .2s;display:inline-flex;align-items:center;gap:9px;
}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#3a1d00;box-shadow:0 10px 26px rgba(255,196,31,.4)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(255,196,31,.5)}
.btn-ghost{background:rgba(157,78,221,.15);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(157,78,221,.3);transform:translateY(-3px)}
/* periodic glint sweep to draw the eye to the primary CTA */
.btn-shine{position:relative;overflow:hidden}
.btn-shine::after{
  content:"";position:absolute;top:0;left:0;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.65) 50%,transparent 100%);
  transform:translateX(-160%) skewX(-20deg);
  animation:btnShine 6.5s ease-in-out infinite;
}
@keyframes btnShine{0%{transform:translateX(-160%) skewX(-20deg)}38%,100%{transform:translateX(320%) skewX(-20deg)}}
@media (prefers-reduced-motion:reduce){.btn-shine::after{animation:none;display:none}}
.trust{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:34px;color:var(--muted);font-size:.86rem;font-weight:600}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust b{color:var(--gold)}

/* ---------- section frame ---------- */
section{padding:var(--space-section) 0;position:relative;scroll-margin-top:80px}
/* EINE LINKE KANTE (25.08.2026). Vorher lief der Seitenkopf zentriert (H1 und lead bei
   407px), waehrend Fliesstext, H2, Tabellen und Casinozeilen bei 182px begannen — ein
   Sprung von 225px auf derselben Seite, auf allen 26 Seiten identisch.
   max-width bleibt: die 62ch begrenzen die Zeilenlaenge und sind der Grund, warum der
   Block ueberhaupt schmaler ist als die Spalte. Nur die Zentrierung faellt weg. */
.section-head{text-align:left;max-width:62ch;margin:0 0 42px}
.section-head h1,.section-head h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.6vw,2.3rem);margin-bottom:12px}
.section-head p{color:var(--muted)}
/* review top row: small "Casino review" eyebrow LEFT + verified badge RIGHT (wraps on mobile) */
.review-top{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.review-top .eyebrow{margin-bottom:0}
.verified-badge{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;color:var(--muted);
  background:rgba(95,227,155,.08);border:1px solid rgba(95,227,155,.32);border-radius:999px;padding:4px 12px}
.verified-badge .vchk{color:#5fe39b;font-weight:800}

/* ---------- payment deposit-limit table (EUR | USD) ---------- */
.limits{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.limits th,.limits td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.limits thead th{font-family:var(--display);font-weight:700;color:var(--gold);background:var(--panel-2)}
.limits tbody td{color:var(--ink);font-weight:600}
.limits tr:last-child td{border-bottom:0}
.closing-cta{font-weight:600;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--r);padding:16px 20px}
@media(max-width:560px){
  .limits thead{display:none}
  .limits td{display:block;width:100%;border-bottom:1px solid var(--line)}
  .limits td::before{content:attr(data-label) ": ";color:var(--gold);font-weight:700;font-family:var(--display)}
}

/* ---------- video clips (portrait 9:16) ---------- */
.clips{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
.clip{
  position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:#11061f;box-shadow:var(--shadow);
  aspect-ratio:9/16;width:300px;max-width:88vw;cursor:pointer;
}
.clip video{width:100%;height:100%;object-fit:cover;display:block}
.clip .clip-thumb{width:100%;height:100%;object-fit:cover;display:block}
.clip .clip-label{
  position:absolute;left:12px;top:12px;z-index:3;
  font-family:var(--display);font-weight:700;font-size:.8rem;
  background:rgba(26,10,46,.85);color:var(--gold);padding:6px 14px;border-radius:999px;border:1px solid var(--line);
  pointer-events:none;
}
.clip-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:74px;height:74px;border-radius:50%;border:0;cursor:pointer;
  background:radial-gradient(circle at 38% 32%,var(--gold-bright),var(--gold));
  box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 8px rgba(255,196,31,.18);
  display:flex;align-items:center;justify-content:center;transition:transform .18s,box-shadow .2s;
}
.clip:hover .clip-play{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 12px 32px rgba(0,0,0,.55),0 0 0 12px rgba(255,196,31,.22)}
.clip-play .tri{
  width:0;height:0;margin-left:5px;
  border-left:22px solid #2a1500;border-top:14px solid transparent;border-bottom:14px solid transparent;
}
.clip::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.15), rgba(0,0,0,.35));
  transition:opacity .2s;
}
.clip.playing::after{display:none}
.clip.playing{cursor:default}
.clip .soon{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;
  font-family:var(--display);font-weight:700;font-size:.72rem;color:var(--muted);
  background:rgba(26,10,46,.8);padding:5px 12px;border-radius:999px;border:1px solid var(--line);
}

/* ---------- how to play ---------- */
.play-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.play-img{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.play-infographic{background:#61018c;display:flex;align-items:center;justify-content:center;padding:18px}
.play-infographic img{max-width:100%;height:auto;border-radius:10px;display:block}
.steps{display:flex;flex-direction:column;gap:18px}
.step{display:flex;gap:16px;align-items:flex-start}
.step .n{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.1rem;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#3a1d00;box-shadow:0 6px 14px rgba(255,196,31,.3)
}
.step h4{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:2px}
.step p{color:var(--muted);font-size:.93rem}

/* ---------- prizes table ---------- */
.prize-table{width:100%;border-collapse:collapse;background:var(--panel);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.prize-table th{font-family:var(--display);text-align:left;padding:16px 20px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:rgba(0,0,0,.25)}
.prize-table td{padding:16px 20px;border-top:1px solid var(--line);font-size:.95rem}
.prize-table td:first-child{font-size:1.5rem;width:64px;text-align:center}
.prize-table td b{color:var(--gold-bright);font-family:var(--display)}
.prize-table tr:hover td{background:rgba(157,78,221,.08)}
/* named variant: symbol cell shows emoji + word (e.g. "💎 Diamond") — not just an emoji */
.prize-table.prize-named td:first-child{font-size:1rem;width:auto;text-align:left;font-weight:700;color:var(--ink);white-space:nowrap}

/* ---------- casino cards / podium ---------- */
.casinos{display:flex;flex-direction:column;gap:40px;align-items:center;margin-top:58px}
/* Reihenabstand = Blockabstand + 32px. Die 32px sind KEIN neuer Wert, sondern der
   Ueberhang der groessten Medaille (.medal.gold{top:-32px}) — so steht die Rangmuenze
   der zweiten Reihe immer frei ueber der Karte darueber. Spaltenabstand = Blockabstand. */
.casino-row{display:flex;gap:calc(var(--space-block) + 32px) var(--space-block);justify-content:center;align-items:stretch;flex-wrap:wrap;width:100%}
.ccard{width:290px;max-width:100%;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:var(--r);padding:42px 22px 26px;text-align:center;
  box-shadow:var(--shadow);position:relative;overflow:visible;transition:transform .2s,border-color .2s;
}
.ccard:hover{transform:translateY(-6px);border-color:var(--gold)}
/* PODIUMSKARTEN: Knoepfe unten buendig, beide gleich breit (25.08.2026).
   Vorher folgte der Knopf direkt auf den Bonustext. Die Karten sind durch
   .casino-row{align-items:stretch} zwar gleich HOCH, aber Golisimos Bonustext ist
   mit 81px doppelt so hoch wie die uebrigen 40px — gemessen stand sein Knopf
   dadurch 45px tiefer als der der Nachbarkarten (358 gegen 313). Gleich hoch ist
   eben nicht dasselbe wie buendig.
   flex-column + margin-top:auto schiebt den Knopfbereich ans untere Ende, egal wie
   lang der Text darueber ist. Das Teilraster gibt beiden Knoepfen dieselbe Breite —
   vorher richtete sich der Testbericht-Knopf nach seinem eigenen Text (116px) und
   der Markenknopf nach dem Rest (244px).
   ⚠️ Auf .casino-row GESCOPT, nicht auf .ccard: die Reviewkarte (.ccard.review-cta)
      ist dieselbe Klasse, steht aber in keiner .casino-row und hat ihr eigenes
      Zeilenlayout — eine globale Regel haette sie mitgerissen.
   ⚠️ Gemessen: Karteninnenbreite 244px, groesster Knopfbedarf 170px, zwei
      nebeneinander braeuchten 296px. Die Knoepfe stehen also immer untereinander;
      auto-fit haelt das offen, falls die Karte spaeter breiter wird. */
.casino-row .ccard{display:flex;flex-direction:column}
.casino-row .ccard .card-cta{margin-top:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5rem),1fr));gap:10px}
.casino-row .ccard .play,.casino-row .ccard .review{width:100%;text-align:center;justify-content:center}
/* Bis 23.08.2026 stand hier eine Siegerpodest-Anordnung: order 1/2/3 auf p2/p1/p3,
   dazu p1 um 26px angehoben. Das war fuer DREI Karten gedacht. Bei fuenf Karten haben
   Rang 4 und 5 gar kein order, fallen damit auf den Default 0 und ruecken VOR die drei —
   sichtbare Reihenfolge 4 5 2 1 3. Entfernt; die Karten stehen jetzt in Dokument-
   reihenfolge, also 1 2 3 4 5. Die goldene Hervorhebung von Rang 1 bleibt. */
.podium .ccard.p1{border-color:rgba(255,196,31,.55);box-shadow:0 22px 60px rgba(255,196,31,.22),var(--shadow)}
/* Bonus-hub podium teasers only (scoped — home podium untouched). Card #1 is raised -26px
   and its gold medal overhangs the card top ~32px → ~58px of visual overflow above the row.
   Inside .flow the wrapper follows a .section-head, whose rule
   (.flow>:is(h2,h3,.section-head)+*{margin-top:.55rem}) was overriding .casinos{margin-top:58px}
   down to ~9px, so the medal collided with the explainer text. padding-top contains the medal
   INSIDE the wrapper; margin-top restores clear air below the text. Specificity (0,3,0) beats the
   flow rule (0,2,0). */
.flow .casinos.bonus-podium{margin-top:var(--space-block);padding-top:86px}
@media(max-width:760px){.flow .casinos.bonus-podium{padding-top:48px}}

/* Review "Special Features" cards (specialFeatureCards) — equal portrait cards, NO podium
   stagger / medals. Same card tokens as the bonus cards; stacks on mobile like the podium. */
.sf-row{display:flex;gap:var(--space-card-gap);justify-content:center;flex-wrap:wrap;margin:6px 0}
.sf-card{flex:1 1 0;min-width:240px;max-width:300px;display:flex;flex-direction:column;text-align:center;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--r);padding:24px 20px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.sf-card:hover{transform:translateY(-5px);border-color:var(--gold)}
.sf-card h3{font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--ink);margin:0 0 8px}
.sf-card p{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0 0 18px;flex:1}
.sf-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}

/* Bonus Crab alternatives cards (/casinos/without-bonus-crab/) — logo on top, USP teaser, Review + Visit */
.alt-row{display:flex;gap:var(--space-card-gap);justify-content:center;flex-wrap:wrap;margin:6px 0}
.alt-card{flex:1 1 0;min-width:260px;max-width:340px;display:flex;flex-direction:column;text-align:center;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--r);padding:24px 22px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.alt-card:hover{transform:translateY(-5px);border-color:var(--gold)}
.alt-head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:12px}
.alt-card h3{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--ink);margin:0}
.alt-usp{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0 0 18px;flex:1}
.alt-usp b{color:var(--ink)}
.alt-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.alt-btn{width:100%;justify-content:center;padding:12px 16px;font-size:.95rem}
.alt-reasons{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;text-align:left}
.alt-reasons li{position:relative;padding-left:30px;color:var(--muted);line-height:1.55}
.alt-reasons li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;color:#5fe39b}
.alt-reasons li b{color:var(--ink)}
@media(max-width:760px){.alt-row{flex-direction:column;align-items:center}.alt-card{width:100%;max-width:440px;flex:0 0 auto}}

/* crypto-bonus module (Bitcoin & future coin pages) — hooks, highlighted rows, badges, type cards */
.cb-hooks{display:flex;gap:var(--space-card-gap);flex-wrap:wrap;margin:18px 0 0}
.cb-hook{flex:1 1 280px;display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(123,47,247,.16),rgba(255,196,31,.10));border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;box-shadow:var(--shadow)}
.cb-hook span:last-child{color:var(--ink);font-size:.96rem;line-height:1.4}
.cb-num{font-family:var(--display);font-weight:800;font-size:2.3rem;line-height:1;color:var(--gold-bright);flex:0 0 auto}
.cb-row .cb-val{color:var(--gold-bright);font-weight:600}
.cb-badge{display:inline-block;align-self:flex-start;margin-top:5px;font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:rgba(157,78,221,.24);color:var(--ink)}
.cb-badge.cb-low{background:linear-gradient(180deg,#7ef2b0,#5fe39b);color:#0c2a1a;box-shadow:0 3px 12px rgba(95,227,155,.3)}
.cb-types{display:flex;flex-wrap:wrap;gap:var(--space-card-gap);margin:6px 0}
.cb-type{flex:1 1 280px;min-width:240px;background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow)}
.cb-type h3{font-family:var(--display);font-weight:800;font-size:1.12rem;color:var(--ink);margin:0 0 6px}
.cb-type p{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0}
.cb-type p b{color:var(--gold-bright)}
.cb-check{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.cb-check li{position:relative;padding-left:30px;color:var(--muted);line-height:1.55}
.cb-check li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;color:#5fe39b}
.cb-check li b{color:var(--ink)}

/* no-deposit free-spins offer cards (Wolfy/Stupid) — reuse .sf-card; prominent wager-free badge */
.nd-card .wf-badge{align-self:center;display:inline-flex;align-items:center;gap:5px;font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:#0c2a1a;background:linear-gradient(180deg,#7ef2b0,#5fe39b);border-radius:999px;padding:5px 14px;margin-bottom:12px;box-shadow:0 4px 14px rgba(95,227,155,.32)}
.nd-card .nd-offer{flex:0 0 auto;color:var(--ink);font-size:1rem;margin:0 0 10px}
.nd-card .nd-offer b{color:var(--gold-bright)}
.nd-code{color:var(--muted);font-size:.92rem;margin:0 0 16px}
.nd-code b{color:var(--gold-bright);font-family:var(--display);letter-spacing:.06em}
.nd-tc{color:var(--muted);font-size:.76rem;opacity:.85;margin:10px 0 0}

/* Wolfy no-deposit highlight block — landscape "bonus card", distinct blue→violet accent + gold code */
.nd-hl{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;justify-content:space-between;background:linear-gradient(135deg,rgba(90,160,255,.16),rgba(150,90,230,.18));border:1px solid rgba(120,150,255,.4);border-radius:var(--r);padding:22px 26px;box-shadow:var(--shadow);margin:8px 0}
.nd-hl-main{display:flex;flex-direction:column;gap:6px;min-width:240px;flex:1}
.nd-live{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#ff7a7a}
.nd-dot{width:9px;height:9px;border-radius:50%;background:#ff4d4d;animation:ndpulse 1.8s infinite}
@keyframes ndpulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.55)}70%{box-shadow:0 0 0 10px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
@media(prefers-reduced-motion:reduce){.nd-dot{animation:none}}
.nd-hl-spins{font-family:var(--display);font-weight:800;font-size:2rem;line-height:1.05;color:var(--gold-bright)}
.nd-hl-meta{color:var(--muted);font-size:.9rem;margin-top:-2px}
.nd-hl-meta b{color:var(--ink)}
.nd-hl-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--display);font-weight:800;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:#0c2a1a;background:linear-gradient(180deg,#7ef2b0,#5fe39b);border-radius:999px;padding:5px 13px;margin-top:6px}
.nd-badge-copy{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.nd-badge-copy .nd-code-val{text-decoration:underline;text-underline-offset:2px}
.nd-badge-copy .nd-copy-ic{font-size:.9em}
.nd-hl-cashout{color:var(--muted);font-size:.85rem}
.nd-hl-cashout b{color:var(--gold-bright)}
.nd-hl-cta{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:230px}
.nd-hl-code{color:var(--muted);font-size:.82rem;text-align:center}
.nd-copy{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;cursor:pointer;font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:.08em;color:var(--gold-bright);background:rgba(0,0,0,.28);border:1px dashed var(--gold);border-radius:10px;padding:8px 14px;width:100%}
.nd-copy:hover{background:rgba(255,196,31,.12)}
.nd-copy.copied{border-style:solid;color:#5fe39b;border-color:#5fe39b}
.nd-copy-ic{font-size:.9rem;opacity:.8}
.nd-hl-cta .btn{justify-content:center}
@media(max-width:640px){.nd-hl{flex-direction:column;align-items:stretch}.nd-hl-cta{min-width:0}.nd-hl-code{text-align:left}}

/* review payment tiles — compact responsive grid (wraps to ~2 cols on mobile, no overflow) */
.pay-row{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0}
.pay-tile{flex:1 1 150px;min-width:138px;max-width:230px;display:flex;flex-direction:column;gap:3px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:14px;padding:13px 16px;box-shadow:var(--shadow);text-decoration:none;
  transition:transform .2s,border-color .2s}
.pay-tile:hover{transform:translateY(-3px);border-color:var(--gold)}
.pay-name{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink)}
.pay-limit{color:var(--muted);font-size:.85rem}

/* review contact block — support + complaints email + neutral help note */
.contact-card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);margin:6px 0}
.contact-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:6px 0}
.contact-row+.contact-row{border-top:1px solid var(--line)}
.contact-label{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);min-width:96px}
.contact-mail{color:var(--ink);font-size:.97rem;word-break:break-word}
.contact-mail:hover{color:var(--gold-bright)}
.contact-note{color:var(--muted);font-size:.85rem;line-height:1.55;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}

/* Safety & Support zone — help-centre wayfinder chips (static, not links) + pro-tips box */
.help-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.help-chip{display:inline-block;background:rgba(157,78,221,.16);border:1px solid var(--line);color:var(--ink);font-size:.86rem;font-weight:600;padding:6px 12px;border-radius:999px}
.tips-box{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--r);padding:14px 20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:16px}
.tips-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:#5fe39b;background:rgba(95,227,155,.12);border:1px solid rgba(95,227,155,.28)}
.tips-box ul{flex:1;margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.tips-box li{color:var(--muted);font-size:.92rem;line-height:1.55}
.tips-box li strong{color:var(--gold-bright);font-family:var(--display)}
@media (max-width:480px){
  .tips-box{align-items:flex-start;gap:12px;padding:14px 16px}
  .tips-ic{margin-top:2px;width:26px;height:26px}
}

/* Home "Top 10" — ranks 6–10 as wide full-width bars under the podium. Single column
   (NOT the 2-col .listgrid), max-width = the podium's 3-card span so bars line up with it. */
.bars-head{text-align:center;margin-top:34px}
.home-bars{display:flex;flex-direction:column;gap:var(--space-row-gap);max-width:930px;margin:10px auto 0}
.sf-btn{width:100%;justify-content:center;padding:12px 16px;font-size:.95rem}
@media(max-width:760px){
  .sf-row{flex-direction:column;align-items:center}
  .sf-card{width:100%;max-width:420px;flex:0 0 auto}
}
.ccard .medal{
  position:absolute;top:-28px;left:50%;transform:translateX(-50%);
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:1.5rem;color:#3a1d00;
  box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 2px 4px rgba(255,255,255,.5),inset 0 -4px 6px rgba(0,0,0,.25);
  border:3px solid rgba(255,255,255,.25);z-index:3;
}
.ccard .medal::after{content:"";position:absolute;inset:6px;border-radius:50%;border:2px dashed rgba(0,0,0,.15)}
.medal.gold{background:radial-gradient(circle at 38% 32%,#fff3c4,#ffd23f 45%,#e0a200);width:64px;height:64px;font-size:1.7rem;top:-32px}
.medal.silver{background:radial-gradient(circle at 38% 32%,#ffffff,#d7dde6 45%,#a7b0bd);color:#33404f}
.medal.bronze{background:radial-gradient(circle at 38% 32%,#ffe0c2,#d98e52 45%,#a96326);color:#3a210a}
.medal.plain{background:linear-gradient(180deg,var(--panel-2),#241046);color:var(--gold);border:2px solid var(--gold);box-shadow:0 8px 18px rgba(0,0,0,.4);width:48px;height:48px;font-size:1.3rem}
.medal.plain::after{display:none}
.ccard .cname{font-family:var(--display);font-weight:800;font-size:1.3rem;margin:6px 0 4px}
.ccard.p1 .cname{font-size:1.5rem}
.ccard .pay{color:var(--muted);font-size:.82rem;margin-bottom:14px}
.ccard .bonus{
  background:rgba(255,196,31,.1);border:1px dashed rgba(255,196,31,.5);border-radius:14px;
  padding:14px;margin-bottom:16px;
}
.ccard .bonus .big{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--gold);line-height:1.1}
.ccard .bonus .sub{font-size:.78rem;color:var(--muted);margin-top:4px}
/* Zwei Knoepfe nebeneinander in einer Podiumskarte: der Markenknopf traegt seit dem
   25.08.2026 den Markennamen und ist damit bis zu 93px breiter als das fruehere
   "Jetzt spielen". Ohne nowrap quetscht er sich in die Restbreite und wird bei der
   einen Karte mit Testbericht-Knopf DREIZEILIG (gemessen: Platz 5 der Startseite,
   118px, 3 Zeilen). nowrap macht seine Mindestbreite ehrlich, wrap laesst ihn dann
   unter den Testbericht rutschen statt umzubrechen. Beide Zeilen wirken nur
   zusammen — nowrap allein wuerde ueberlaufen statt umbrechen. */
.ccard .card-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.ccard .play{flex:1;white-space:nowrap;display:block;font-family:var(--display);font-weight:700;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#3a1d00;padding:13px;border-radius:12px;box-shadow:0 8px 20px rgba(255,196,31,.3);transition:transform .15s}
.ccard .play:hover{transform:scale(1.03)}
.ccard .review{flex:0 0 auto;display:flex;align-items:center;font-family:var(--display);font-weight:700;background:rgba(157,78,221,.18);color:var(--ink);border:1px solid var(--line);padding:13px 16px;border-radius:12px;transition:transform .15s,background .2s}
.ccard .review:hover{background:rgba(157,78,221,.34);transform:scale(1.03)}
.ccard .tc{margin-top:10px;font-size:.72rem;color:var(--muted);letter-spacing:.04em}

/* review bonus/CTA block — same elements & styling, only the LAYOUT differs from the
   home podium cards: stacked on mobile (default), full-width horizontal row on desktop.
   Scoped to .review-cta so the home/list .ccard cards stay portrait. */
.ccard.review-cta{width:100%;max-width:460px;margin-inline:auto;padding:26px 22px}
.ccard.review-cta:hover{transform:none;border-color:var(--line)}
.review-cta .rc-id{display:flex;flex-direction:column;align-items:center;gap:2px}
@media(min-width:700px){
  /* flex-wrap ist das Sicherheitsventil, nicht Kosmetik: unterhalb von rund 780px
     passen Logo, Name, Bonuskasten und Knopf nicht mehr nebeneinander. Ohne Ventil
     muesste einer von ihnen unter seine Mindestbreite — und weil keiner das darf,
     lief stattdessen die Karte ueber. Mit Ventil rutscht der Knopf in die zweite
     Zeile. Dasselbe Mittel wie bei .crow (25.08.2026), aus demselben Grund. */
  .ccard.review-cta{max-width:none;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:28px;
    text-align:left;padding:22px 28px}
  .review-cta .rc-id{flex:0 0 auto;min-width:150px}
  .review-cta .review-logo{margin:0 auto 6px}
  .review-cta .bonus{flex:1;margin-bottom:0;text-align:center}
  .review-cta .play{flex:0 0 auto;display:inline-block;padding:14px 30px}
  /* Der Knopf war geschuetzt (flex:0 0 auto), sein KASTEN nicht: .card-cta hatte hier
     keine Regel und fiel auf den Vorgabewert 0 1 auto. Weil .bonus mit Basis 0% kein
     Schrumpfgewicht traegt, fiel die gesamte Verkleinerung auf den Knopfkasten — der
     schrumpfte, der Knopf darin nicht, und ragte heraus. Ein Schutz am Kind wirkt
     nicht gegen sein Elternteil; beide muessen ihn tragen.
     ⚠️ ALLEIN loest diese Regel es NICHT — gemessen: der Ueberlauf wandert dann vom
     Knopf auf die Karte (neon54, 700-770px, bis +73px). Wirksam wird sie erst mit dem
     flex-wrap daneben. Wer das Ventil entfernt, holt den Fehler zurueck. */
  .review-cta .card-cta{flex:0 0 auto}
}

/* ---------- casino logos (transparent; fixed square box → all identical size) ----------
   Central control: change --logo-size (or the per-context sizes) in ONE place. */
.casino-logo{object-fit:contain;display:block;background:transparent;flex:0 0 auto}
.logo-mini{width:56px;height:56px}                 /* casino list rows */
.card-logo{width:90px;height:90px;margin:0 auto 12px}  /* home podium */
.review-logo{width:108px;height:108px;margin:0 auto 8px} /* review header */
.crow .cinfo{flex:1 1 auto;min-width:0}
.crow-rank{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#3a1d00;font-family:var(--display);font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center}
@media (max-width:560px){
  .logo-mini{width:48px;height:48px}
  .card-logo{width:76px;height:76px}
  .review-logo{width:92px;height:92px}
  /* casino rows: let the Play/Review buttons drop to their own full-width line */
  /* Die vier frueheren Flex-Regeln (.crow flex-wrap, .actions width/margin, .go flex:1)
     sind mit dem Raster gegenstandslos: der Knopfbereich spannt ohnehin die volle Breite
     und die Knoepfe fuellen ihre Spur. Ersatzlos entfallen, nicht auskommentiert. */
}

/* ---------- xl feature ---------- */
.xl{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:28px;padding:40px;box-shadow:var(--shadow)}
.xl-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center}
.xl h3{font-family:var(--display);font-weight:800;font-size:1.7rem;margin-bottom:10px}
.xl .price{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--gold);margin:14px 0}
.xl ul{list-style:none;margin:16px 0;display:flex;flex-direction:column;gap:10px}
.xl li{display:flex;gap:10px;color:var(--muted)}
.xl li::before{content:"◆";color:var(--gold)}
.xl-img{border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
/* XL prize comparison (image-free fallback) */
.xl-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.xl-col{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;text-align:center}
.xl-col.x{border-color:rgba(255,196,31,.55)}
.xl-col h5{font-family:var(--display);font-weight:800;font-size:1rem;margin-bottom:12px;color:var(--ink)}
.xl-col.x h5{color:var(--gold)}
.xl-col .row{display:flex;justify-content:space-between;gap:8px;font-size:.86rem;padding:7px 0;border-top:1px solid var(--line)}
.xl-col .row:first-of-type{border-top:0}
.xl-col .row b{font-family:var(--display);color:var(--gold-bright)}

/* ---------- crab games ---------- */
.games{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-card-gap)}
.game{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.game .tag{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:999px;display:inline-block;margin-bottom:12px}
.tag.bonus{background:rgba(255,196,31,.14);color:var(--gold)}
.tag.cash{background:rgba(123,47,247,.22);color:var(--purple-bright)}
.game h3{font-family:var(--display);font-weight:800;font-size:1.4rem;margin-bottom:8px}
.game p{color:var(--muted);font-size:.93rem;margin-bottom:14px}
.game ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.game li{display:flex;gap:10px;font-size:.9rem}
.game li b{font-family:var(--display);color:var(--gold-bright)}
.game li::before{content:"›";color:var(--gold);font-weight:700}
.cashgames{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-card-gap);margin-top:var(--space-block)}
.cg{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;text-align:center}
/* linked variant cards (Cash Crab machines block → game pages) */
a.cg{text-decoration:none;color:inherit;transition:border-color .2s,transform .15s}
a.cg:hover{border-color:var(--gold);transform:translateY(-2px)}
.cg .mult{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--gold)}
.cg .gname{font-family:var(--display);font-weight:700;font-size:.95rem;margin:6px 0 4px}
.cg .gdesc{font-size:.78rem;color:var(--muted)}

/* ---------- tips ---------- */
.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-card-gap)}
.tip{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow);transition:transform .2s}
.tip:hover{transform:translateY(-4px)}
.tip .ti{font-size:1.8rem;margin-bottom:10px}
.tip h4{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:6px}
.tip p{color:var(--muted);font-size:.9rem}

/* ---------- comparison ---------- */
.cmp{width:100%;border-collapse:collapse;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.cmp th,.cmp td{padding:14px 18px;text-align:left;border-top:1px solid var(--line);font-size:.92rem}
.cmp thead th{font-family:var(--display);background:rgba(0,0,0,.28);color:var(--gold);font-size:.85rem}
.cmp tbody th{font-weight:600;color:var(--ink);background:rgba(157,78,221,.07)}
.cmp td{color:var(--muted)}
.cmp .b-col{color:var(--gold-bright)}

/* ---------- which casino ---------- */
.haslist{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.haspanel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.haspanel h4{font-family:var(--display);font-weight:700;margin-bottom:18px;font-size:1.1rem}
.haspanel.yes h4{color:#5fe39b}
.haspanel.no h4{color:#ff7b7b}
.crablist{display:flex;flex-direction:column;gap:12px}
/* ⚠️ flex-wrap:wrap in der BASIS, nicht erst ab 760px: eine Zeile mit ZWEI Knoepfen
   (Testbericht + Marke) passt zwischen 761px und rund 800px nicht mehr nebeneinander
   und lief um 7 bis 12 Pixel ueber. Jetzt rutschen die Knoepfe in genau diesem Band
   von selbst in die zweite Zeile; der 760px-Block darunter macht daraus zusaetzlich
   volle Breite. Betrifft die 9 Zeilen mit Testbericht. */
/* RASTER statt Umbruch (25.08.2026). Vorher: display:flex + flex-wrap:wrap. Das hat den
   Ueberlauf zwar verhindert, aber jede Zeile brach bei IHRER eigenen Textlaenge um —
   gemessen auf /bonuskrabbe-casino/ bei 1440px: 3 verschiedene Knopfkanten und 5
   verschiedene Zeilenhoehen, 23 von 25 Zeilen gestapelt, 2 einreihig. Ein Raster gibt
   allen Zeilen dieselben Spaltenkanten, unabhaengig vom Text.
   Aufbau: Logo | Name+Bonus  /  Knopfbereich ueber die volle Breite darunter.
   ⚠️ Warum die Knoepfe UNTER dem Text stehen und nicht daneben: die Zeile ist in der
   zweispaltigen Liste nur 326px (768px) bis 500px (1440px) breit. Eine feste Knopfspalte
   von 183px (breitester Markenknopf, gemessen) liesse dem Bonustext dort 63 bis 237px —
   bei 768px unmoeglich. Nebeneinander waere nur oberhalb von rund 1040px moeglich, und
   ein Aufbau, der nur auf grossen Schirmen gilt, ist genau das Chaos, das hier weg soll. */
.crow{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 12px;
  background:rgba(157,78,221,.07);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;transition:border-color .2s,transform .15s;
}
.crow:hover{border-color:var(--gold);transform:translateY(-2px)}
.crow .cinfo{display:flex;flex-direction:column;gap:3px;min-width:0}
.crow .cn{font-family:var(--display);font-weight:700;font-size:1rem;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.crow .cn .mk{font-size:.95rem}
.crow .cbonus{font-size:.74rem;color:var(--gold);font-weight:600;padding-left:23px;line-height:1.25}
.yes .crow .cn .mk{color:#5fe39b}
.no .crow .cn .mk{color:#ff7b7b}
.crow .go{
  flex:0 0 auto;font-family:var(--display);font-weight:700;font-size:.82rem;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#3a1d00;
  padding:9px 16px;border-radius:10px;box-shadow:0 5px 14px rgba(255,196,31,.3);transition:transform .15s;white-space:nowrap;
}
.crow .go:hover{transform:scale(1.05)}
.no .crow .go{background:rgba(157,78,221,.25);color:var(--ink);box-shadow:none;border:1px solid var(--line)}
/* lean featured tile — data_only payment-record casinos (e.g. GreatSpin on the PayPal page):
   prominent name + a muted "Accepts <method>" line + a clear gold Visit button. Logo optional;
   when absent the row simply has no logo box (never an empty/broken one). */
.crow.lean .cinfo{gap:4px}
.crow.lean .cn{font-size:1.08rem}
.crow.lean .cnote{font-size:.78rem;color:var(--muted);font-weight:500;line-height:1.25}
/* full casinos-list page */
/* ⚠️ minmax(0,1fr) statt 1fr: Grid-Items haben min-width:auto, die Spur waechst also
   auf die MIN-CONTENT-Breite ihres Inhalts. Eine Casinozeile mit nicht umbrechendem
   Knopf sprengte damit den Container — bei 768px lief die Seite 78px ueber, und mit
   dem gestylten Knopf (Polsterung + nowrap) waeren es 240px geworden. minmax(0,...)
   erlaubt der Spur zu schrumpfen; .crow .cinfo hat min-width:0 bereits. */
.listgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-row-gap);margin-top:10px}
/* single-column variant — wide full-width bars (hidden-gems page, like the home ranks 6–10) */
.listgrid.onecol{grid-template-columns:1fr}
/* subtle "Trusted since <year>" badge — inline in the name line: <name> [BADGE] ✓
   inline-flex + line-height:1 so the caps text is centred exactly on the name/check line. */
.gem-badge{display:inline-flex;align-items:center;line-height:1;margin:0;
  font-family:var(--display);font-weight:700;font-size:.62rem;letter-spacing:.04em;
  text-transform:uppercase;color:#5fe39b;background:rgba(95,227,155,.12);
  border:1px solid rgba(95,227,155,.3);border-radius:999px;padding:3px 9px;white-space:nowrap}
/* progressive-disclosure "Show more": hidden rows stay in the HTML, just not shown */
.crow.lm-hidden{display:none}
.lm-more{display:flex;justify-content:center;margin-top:var(--space-row-gap)}
/* gold OUTLINE button — clearly gold/visible, but distinct from the solid gold "View all" CTA */
.lm-btn{cursor:pointer;background:rgba(255,196,31,.10);color:var(--gold-bright);
  border:1.5px solid var(--gold);box-shadow:none}
.lm-btn .lm-count{opacity:.8;font-weight:700}
.lm-btn:hover{background:rgba(255,196,31,.2);color:var(--gold-bright);
  transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,196,31,.28)}
/* Knopfbereich: eigenes Teilraster ueber die volle Zeilenbreite. auto-fit + minmax gibt
   EINEN Umschaltpunkt fuer ALLE Zeilen — sie sind alle gleich breit, also springen sie
   gemeinsam von zwei Spalten auf eine, nie einzeln nach Textlaenge.
   11.5rem = 184px deckt den breitesten Markenknopf (183px, "Zu Boomerang.bet Casino",
   gemessen ueber alle 46 Marken). min(100%,...) verhindert, dass die Spur breiter wird
   als die Zeile — das ist der Ueberlaufschutz, der vorher am flex-wrap hing.
   Nebenwirkung, gewollt: bei zwei Knoepfen sind beide exakt gleich breit. */
.crow .actions{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5rem),1fr));gap:8px}
.crow .actions .go{width:100%;text-align:center}
.crow .go.ghost{background:rgba(157,78,221,.2);color:var(--ink);box-shadow:none;border:1px solid var(--line)}
.list-h{font-family:var(--display);font-weight:800;font-size:1.25rem;margin:30px 0 4px}
.list-h.yes{color:#5fe39b}
.list-h.no{color:#ff7b7b}
@media (max-width:760px){.listgrid{grid-template-columns:1fr}}

/* ---------- faq ---------- */
/* FAQ heading centres to match the centred .faq cards (the block reads as one unit). */
.faq-head{text-align:left}
/* Die FAQ-Karten standen bei 330px, ihre Ueberschrift zentriert darueber. Beides folgt
   jetzt derselben Kante wie der uebrige Text. ⚠️ Damit ist die Zentrierung vom 30.06.2026
   zurueckgenommen: sie war damals richtig, WEIL die Karten mittig standen — die
   Ueberschrift folgt den Karten, nicht umgekehrt. Stehen die Karten links, waere eine
   zentrierte Ueberschrift darueber neu schief. */
.faq{max-width:780px;margin:0;display:flex;flex-direction:column;gap:12px}
details{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:4px 20px;transition:background .2s}
details[open]{background:var(--panel-2)}
summary{font-family:var(--display);font-weight:600;font-size:1.02rem;padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-size:1.5rem;font-family:var(--display);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);padding:0 0 18px;font-size:.94rem}
details p a{color:var(--gold-bright);font-weight:600;text-decoration:underline;text-underline-offset:2px}
details p a:hover{color:var(--gold)}

/* ---------- affiliate programs (/affiliate-programs/) ---------- */
.netgrid{display:flex;flex-direction:column;gap:var(--space-card-gap)}
.netcard{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--r);padding:24px 26px;box-shadow:var(--shadow);scroll-margin-top:90px}
.netcard-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.netcard-head h2{font-family:var(--display);font-weight:800;font-size:1.4rem;margin:0}
.net-count{flex:0 0 auto;font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--gold);
  background:rgba(255,196,31,.1);border:1px solid rgba(255,196,31,.32);border-radius:999px;padding:4px 12px}
.net-desc{color:var(--muted);margin:12px 0 16px}
.net-cta{margin-bottom:18px}
.net-soon{display:inline-block;font-weight:600;font-size:.86rem;color:var(--muted);
  background:rgba(157,78,221,.12);border:1px dashed var(--line);border-radius:999px;padding:10px 18px}
.net-casinos-label{display:block;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.net-chips{display:flex;flex-wrap:wrap;gap:8px}
.net-chip{display:inline-flex;align-items:center;font-weight:600;font-size:.84rem;color:var(--ink);
  background:rgba(157,78,221,.16);border:1px solid var(--line);border-radius:10px;padding:6px 12px;transition:background .2s}
.net-chip:hover{background:rgba(157,78,221,.34)}

/* ---------- note box ---------- */
.note{background:rgba(255,196,31,.08);border-left:4px solid var(--gold);border-radius:0 14px 14px 0;padding:18px 22px;margin:var(--space-block) auto 0;max-width:760px}
/* the closing 18+ banner needs clear, symmetric air above (the section padding sits below it).
   Beats the .flow heading-hug rule (0,2,0) that otherwise squashed it to .55rem when it follows a heading. */
.flow>.note{margin-top:var(--space-section)}
.note b{color:var(--gold)}
.note p{color:var(--muted);font-size:.92rem}

/* ---------- teaser cards (reviews / guides / news) ---------- */
.teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-card-gap)}
.teaser{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s;display:block}
.teaser:hover{transform:translateY(-4px);border-color:var(--gold)}
.teaser .ti{font-size:1.8rem;margin-bottom:10px}
.teaser h3{font-family:var(--display);font-weight:800;font-size:1.2rem;margin-bottom:6px}
.teaser p{color:var(--muted);font-size:.9rem}
.teaser .soon-tag{display:inline-block;margin-top:12px;font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:rgba(255,196,31,.12);border:1px solid var(--line);padding:4px 10px;border-radius:999px}

/* ---------- referral CTA (subtle external app link, not a hard sell) ---------- */
.referral-cta{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);text-align:center;margin:var(--space-block) 0}
.referral-cta h3{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--ink);margin:0 0 8px}
.referral-cta p{color:var(--muted);font-size:.92rem;line-height:1.55;max-width:62ch;margin:0 auto 16px}

/* ---------- news cards ---------- */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-card-gap)}
.news-card{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);color:var(--ink);transition:transform .15s,border-color .15s}
.news-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.news-thumb{aspect-ratio:16/9;overflow:hidden}
.news-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.news-thumb.ph{display:flex;align-items:center;justify-content:center;font-size:2.4rem;background:radial-gradient(circle at 50% 38%,var(--purple),var(--bg-2))}
.news-body{padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.news-date{font-size:.76rem;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.news-card h3{font-family:var(--display);font-weight:800;font-size:1.15rem;margin:0;line-height:1.25}
.news-card p{color:var(--muted);font-size:.9rem;margin:0}
.news-more{margin-top:8px;color:var(--gold-bright);font-weight:600;font-size:.88rem}
.news-hero{border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.news-hero img{width:100%;height:auto;display:block}
/* review hero (under H1, above the top CTA) — full content width, keeps its own aspect (no CLS/stretch) */
.review-hero{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow)}
.news-video{text-align:center}
.news-video.portrait video{width:100%;max-width:340px;aspect-ratio:9/16;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);background:#11061f;display:inline-block;object-fit:cover}
.news-video iframe{width:100%;max-width:340px;aspect-ratio:9/16;border:0;border-radius:var(--r);box-shadow:var(--shadow)}

/* ---------- Top 3 casinos block (news etc.) ---------- */
.top3-h{font-family:var(--display);font-weight:800;font-size:1.4rem;text-align:center;margin-bottom:20px}
.top3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-card-gap)}
.t3card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--r);padding:28px 16px 18px;box-shadow:var(--shadow)}
.t3rank{position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#3a1d00;font-family:var(--display);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.t3name{font-family:var(--display);font-weight:800;font-size:1.05rem}
.t3bonus{font-size:.82rem;color:var(--gold);font-weight:600;line-height:1.35}
.t3cta{display:flex;gap:8px;margin-top:8px;width:100%}
.t3cta a{flex:1;font-family:var(--display);font-weight:700;font-size:.82rem;padding:10px;border-radius:10px;text-align:center;transition:transform .15s}
.t3cta a:hover{transform:translateY(-2px)}
.t3cta .play{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#3a1d00;box-shadow:0 6px 16px rgba(255,196,31,.3)}
.t3cta .review{background:rgba(157,78,221,.2);color:var(--ink);border:1px solid var(--line)}
@media (max-width:680px){.top3-grid{grid-template-columns:1fr}}

/* ---------- SEO text block under category lists ---------- */
.seo-block{max-width:760px;margin:var(--space-block) auto 0;text-align:center}
.seo-block h2{font-family:var(--display);font-weight:800;font-size:1.4rem;margin:0 0 10px}
.seo-block p{color:var(--muted);line-height:1.75;margin:0}

/* ---------- final cta ---------- */
.final{text-align:center;background:
  radial-gradient(600px 300px at 50% 0%,rgba(123,47,247,.4),transparent 70%);
  border-radius:28px;padding:56px 24px;border:1px solid var(--line);margin-top:20px}
.final h2{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,4vw,2.5rem);margin-bottom:14px}
.final p{color:var(--muted);max-width:54ch;margin:0 auto 26px}

/* ---------- review pros/cons + bonus steps ---------- */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-card-gap)}
.proscons .game ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.proscons .game li{display:flex;gap:10px;font-size:.92rem;color:var(--muted)}
.proscons .game li::before{content:"›";color:var(--gold);font-weight:700}
.bonus-steps{list-style:none;display:flex;flex-direction:column;gap:8px;margin:6px 0 8px}
.bonus-steps li{display:flex;gap:10px;color:var(--muted);font-size:.93rem}
.bonus-steps li::before{content:"◆";color:var(--gold);font-size:.7rem;margin-top:.4em}
@media (max-width:680px){.proscons{grid-template-columns:1fr}}

/* ---------- feature article prose ---------- */
.prose{max-width:820px;margin:0 auto}
.prose h2{font-family:var(--display);font-weight:800;font-size:1.5rem;margin:30px 0 10px}
.prose h3{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--gold);margin:26px 0 8px}
.prose h4{font-family:var(--display);font-weight:700;font-size:1.05rem;margin:20px 0 6px}
.prose p{color:var(--muted);margin:0 0 14px;line-height:1.75}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{color:var(--muted);margin:0 0 16px;padding-left:1.3rem;display:flex;flex-direction:column;gap:7px}
.prose li{line-height:1.65}
.prose a{color:var(--gold-bright)}
/* gold CTA buttons inside prose keep their dark button text (not the gold link colour above) */
.prose a.btn-gold{color:#3a1d00}
.prose blockquote{border-left:4px solid var(--gold);background:rgba(255,196,31,.07);border-radius:0 12px 12px 0;
  padding:12px 18px;margin:0 0 16px;color:var(--ink);font-style:italic}
/* Centred figures in feature articles (screenshots) — image + caption centred, responsive. */
.prose figure{margin:22px auto;text-align:center;max-width:100%}
.prose figure img{display:block;margin:0 auto;max-width:100%;height:auto;border-radius:14px;
  box-shadow:var(--shadow)}
.prose figcaption{margin-top:10px;color:var(--muted);font-size:.85rem;line-height:1.5;
  max-width:560px;margin-left:auto;margin-right:auto}

/* Cash Crab game screenshots — same centred look as .prose figures, for the .flow crab-game pages.
   `.small` = compact UI rule cards (Three Pointer). Reuses the existing tokens, no new architecture. */
.cc-fig{margin:22px auto;text-align:center;max-width:560px}
.cc-fig img{display:block;margin:0 auto;max-width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow)}
.cc-fig.small{max-width:340px}
.cc-fig figcaption{margin-top:10px;color:var(--muted);font-size:.85rem;line-height:1.5;max-width:560px;margin-left:auto;margin-right:auto}

/* ---------- legal / prose pages ---------- */
.legal{max-width:780px;margin:0 auto;padding:30px 0}
.legal h1{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,4vw,2.4rem);margin-bottom:18px}
.legal h2{font-family:var(--display);font-weight:700;font-size:1.25rem;margin:26px 0 8px;color:var(--ink)}
.legal p{color:var(--muted);margin-bottom:12px}
.legal a{color:var(--gold)}
.legal .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow);margin:14px 0}
.back{display:inline-block;margin:8px 0 18px;color:var(--muted);font-weight:600}
.back:hover{color:var(--gold)}

/* ---------- footer ---------- */
/* Jurisdiction notice (/ca/ only) — quiet disclosure block above the footer.
   Set off by a border and a slightly lifted background, deliberately NOT a banner:
   no signal colour, no icon, no interaction. See CLAUDE.md 13 (21.08.2026). */
.jnotice{margin-top:60px;padding:26px 0;background:rgba(45,20,80,.35);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.jnotice .wrap{max-width:900px}
.jnotice h2{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:10px}
.jnotice p{color:var(--muted);font-size:.85rem;line-height:1.6;margin-bottom:8px}
.jnotice p:last-child{margin-bottom:0}
/* the notice already carries the gap above the footer */
.jnotice + footer{margin-top:0}
/* Footer-Abstaende (25.08.2026): der Block wirkte gedrungen. Alle vier Werte haengen an
   --space-block statt an festen Zahlen und skalieren damit auf Mobil mit (dort 28px).
   Nur Abstaende — keine neue Spalte, kein neuer Baustein. */
footer{border-top:1px solid var(--line);margin-top:var(--space-section);padding:calc(var(--space-block) * 1.2) 0;color:var(--muted);font-size:.85rem}
/* Rechtszeile: Impressum und Datenschutz. Pflichtangaben, deshalb auf JEDER Seite. */
.foot-links{margin-top:10px;text-align:center;font-size:.78rem;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.foot-links a{color:#8d7caf;transition:color .2s}
.foot-links a:hover{color:var(--gold)}
.foot-links span{color:#6b5c89}
/* ⚠️ Stand vorher: repeat(6,1fr) — aus dem EN-Footer uebernommen, der sechs Spalten
   fuehrt. Der DE-Footer hat VIER: jede Spalte bekam nur ein Sechstel der Breite, und
   die langen Labels brachen an den Bindestrichen ("Beste Bonus-Crab-" / "Casinos").
   auto-fit statt einer festen Zahl, damit eine fuenfte Spalte spaeter nichts bricht. */
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-card-gap);align-items:start}
.foot-col h4{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:18px}
.foot-col a{display:block;padding:6px 0;color:var(--muted);font-size:.86rem}
.foot-col a:hover{color:var(--gold)}
.foot-col a.all{color:var(--gold);font-weight:600}
/* trust footer: top bar */
.foot-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-bottom:calc(var(--space-block) * .6);margin-bottom:calc(var(--space-block) * .7);border-bottom:1px solid var(--line)}
.foot-bar .lic-badge{justify-self:start}
.foot-bar .foot-brand{justify-self:center;text-align:center}
.foot-bar-rechts{justify-self:end}
.lic-badge{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#6ee7a8,#2bbd78);color:#06381a;font-family:var(--display);font-weight:800;font-size:.82rem;padding:7px 14px;border-radius:999px;transition:filter .15s}
a.lic-badge:hover{filter:brightness(1.08)}
.foot-bar .foot-brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--ink)}
.foot-bar .foot-brand img{width:34px;height:34px}
.socials{display:inline-flex;gap:14px;align-items:center}
.socials a{color:var(--muted);display:inline-flex;transition:color .15s,transform .15s}
.socials a:hover{color:var(--gold);transform:translateY(-2px)}
.socials:empty::after{content:"";}
/* responsible-gambling block */
.rg-block{text-align:center;max-width:780px;margin:var(--space-block) auto 0;border-top:1px solid var(--line);padding-top:32px}
.rg-block p{color:var(--muted);font-size:.9rem;line-height:1.7;margin:0 0 14px}
.rg-block a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line)}
.rg-block a:hover{text-decoration-color:var(--muted)}
.help-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 22px;max-width:640px;margin:0 auto;text-align:center}
.help-box p{margin:0 0 7px;line-height:1.55}
.help-box p:last-child{margin-bottom:0}
.help-main{font-size:.95rem;color:var(--ink)}
.help-main b{color:var(--gold);font-family:var(--display)}
.help-sub{font-size:.9rem}
.help-mini{font-size:.78rem;color:var(--muted)}
/* trust badge row */
.trust-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px;margin-top:calc(var(--space-block) * .7)}
.trust-row a{color:var(--muted);font-weight:600;font-size:.86rem}
.trust-row a:hover{color:var(--ink)}
.age-badge{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#ff4d4d;color:#fff;font-family:var(--display);font-weight:800;font-size:.78rem;flex:0 0 auto}
.tp-link{display:inline-flex;align-items:center}
.tp-logo{height:26px;width:auto;display:block}
.tp-fallback{display:inline-flex;align-items:center;gap:8px}
.tp-fallback .tp-stars{display:inline-flex;gap:2px}
.tp-fallback .tp-stars i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:#00b67a;border-radius:3px;color:#fff;font-size:11px;font-style:normal;line-height:1}
.tp-fallback .tp-word{font-family:var(--display);font-weight:800;font-size:1rem;color:var(--ink)}
.rg-bar{margin-top:28px;border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.8rem;line-height:1.6;color:#8d7caf}
.rg-bar .age{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);margin:0;flex:0 0 auto}
.rg-bar .age .badge{background:#ff4d4d;color:#fff;font-family:var(--display);font-weight:800;border-radius:8px;padding:3px 8px;font-size:.8rem}
.rg-bar a{color:var(--gold)}
.legal-line{margin-top:calc(var(--space-block) * .5);text-align:center;font-size:.74rem;color:#6b5c89;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.legal-line a{color:#8d7caf;transition:color .2s}
.legal-line a:hover{color:var(--gold)}
@media (max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}
  .foot-bar{grid-template-columns:1fr;justify-items:center;text-align:center}
  .foot-bar .lic-badge,.foot-bar .foot-brand,.foot-bar-rechts{justify-self:center}
  .foot-bar-rechts{display:none}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ---------- breadcrumbs ---------- */
/* "Last updated" pill — its own CENTERED row, directly above the page H1 (all page types) */
/* Die Pruefzeile sass mit 14px unter dem Kopf und hatte 92px bis zur H1 (das
   section-padding). Sie klebte damit an der Kopfleiste statt zwischen Kopf und
   Ueberschrift zu sitzen. Beide Abstaende jetzt auf --space-block, also gleich. */
.upd-bar{display:flex;justify-content:center;padding-top:var(--space-block)}
.upd-bar + section{padding-top:var(--space-block)}
.upd-pill{white-space:nowrap}
.crumbs{padding:18px 0 0;font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold)}
.crumbs .sep{opacity:.5}
.crumbs [aria-current=page]{color:var(--ink);font-weight:600}

/* ---------- in-text auto links ---------- */
.ilink{color:var(--gold-bright);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,196,31,.5)}
.ilink:hover{color:var(--gold)}

/* ---------- internal-link panel (grouped review links) ---------- */
.linkpanel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.lp-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.lp-label{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);min-width:110px;padding-top:7px}
.lp-links{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.chip-link{display:inline-block;background:rgba(157,78,221,.16);border:1px solid var(--line);color:var(--ink);font-size:.86rem;font-weight:600;padding:6px 12px;border-radius:999px;transition:background .15s,border-color .15s}
.chip-link:hover{background:rgba(157,78,221,.32);border-color:var(--gold)}

/* ---------- related / similar casinos ---------- */
.relgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-card-gap)}
.relcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--r);padding:18px 14px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.relcard:hover{transform:translateY(-3px);border-color:var(--gold)}
.relcard .rc-name{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink)}
.relcard .rc-bonus{font-size:.78rem;color:var(--muted);line-height:1.4}
@media (max-width:560px){.lp-label{min-width:0}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- responsive ---------- */
/* nav collapses earlier (7 dropdowns + Canada switch are wide; full bar only >1120px = .wrap cap) */
@media (max-width:1120px){
  .nav-links{display:none}
  .menu-btn{display:block}
  .nav-links.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;
    background:var(--bg-2);padding:14px 22px;border-bottom:1px solid var(--line);max-height:80vh;overflow:auto;gap:4px}
  .nav-links.open .nav-item{padding:0;margin:0;width:100%}
  /* Im Hamburger ist die Gruppe eine Ueberschrift, die Punkte stehen offen darunter —
     es verschwindet nichts hinter einem zweiten Tipp. */
  .nav-links.open .nav-item>a,.nav-links.open .nav-item>.nav-top{display:flex;padding:10px 0;font-size:1rem;width:100%;text-align:left;color:var(--gold)}
  .nav-links.open .nav-item>a::after,.nav-links.open .nav-item>.nav-top::after{display:none}
  .nav-links.open .drop{position:static;display:flex;box-shadow:none;border:0;background:transparent;
    padding:0 0 8px 14px;min-width:0}
  .nav-links.open .nav-cta{margin-top:8px;text-align:center}
}
@media (max-width:880px){
  .casinos,.tips,.haslist,.teasers{grid-template-columns:1fr}
  .play-grid,.xl-grid,.games{grid-template-columns:1fr}
  .cashgames{grid-template-columns:1fr 1fr}
  .clips{grid-template-columns:1fr}
  .play-grid{gap:26px}
  /* Die drei Podest-Ausnahmen von frueher sind entfallen: seit 23.08.2026 gilt die
     lineare Anordnung auf ALLEN Breiten, dieser Block musste sie nicht mehr aufheben. */
  .casinos{gap:34px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  section{padding:42px 0}
  .hero{padding:34px 0 26px}
  .section-head{margin-bottom:30px}
  .claw-rig{right:6px;transform:scale(.62);transform-origin:top right}
  .trust{flex-direction:column;gap:12px;align-items:center;margin-top:26px}
  .hero-cta{gap:10px}
  .hero-cta .btn{width:100%;justify-content:center}
  .clip{width:100%;max-width:360px}
  .prize-table th,.prize-table td{padding:12px 10px;font-size:.9rem}
  .prize-table td:first-child{font-size:1.3rem;width:40px}
  .cmp thead{display:none}
  .cmp tbody th,.cmp td{display:block;width:100%;border:0;padding:4px 16px}
  .cmp tbody tr{display:block;border-top:1px solid var(--line);padding:12px 0}
  .cmp tbody th{font-family:var(--display);color:var(--gold);background:none;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;padding-bottom:6px}
  .cmp td::before{content:attr(data-label);display:inline-block;min-width:96px;color:var(--muted);font-weight:600;margin-right:6px}
  .xl{padding:26px 20px}
  .final{padding:40px 18px}
  .final .btn{width:100%;justify-content:center}
}
@media (max-width:480px){
  .cashgames{grid-template-columns:1fr}
  .xl-compare{grid-template-columns:1fr}
}