/* ==========================================================================
   OnlineSlots.com.de — Automat-Kabinett Design-System
   Archetyp: automat-cabinet-shell · Palette: kabinett-bonbon
   (Tinte #131a2e · Papier #fdfcf8 · Pink #e23e8f · Himmel #3fb6e8 · Butter #f7d354)
   ========================================================================== */

/* ---------- Schriften (self-hosted) ---------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-variabel.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{font-family:'Wix Madefor Text';src:url('../fonts/wix-madefor-text-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Wix Madefor Text';src:url('../fonts/wix-madefor-text-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Wix Madefor Text';src:url('../fonts/wix-madefor-text-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Token ---------- */
:root{
  --tinte:#131a2e; --tinte-2:#1c2440; --tinte-tief:#0c1120;
  --papier:#fdfcf8; --papier-2:#f6f4ec; --linie:#e7e3d6;
  --pink:#e23e8f; --pink-tief:#c22572; --pink-hauch:#fbe3ef;
  --himmel:#3fb6e8; --himmel-tief:#1f8fc0; --himmel-hauch:#e2f4fc;
  --butter:#f7d354; --butter-tief:#d9ad1f; --butter-hauch:#fdf6dd;
  --chrom-hell:#eef1f5; --chrom-mittel:#aab4c2; --chrom-dunkel:#6b7688;
  --text:#1d2438; --gedimmt:#5b6478;
  --schiene:16px;
  --kabinett-breite:min(94vw,1840px);
  /* Motion-Personality „Mechanisch-Präzise": kurz, satt, kein Schweben */
  --takt-kurz:120ms; --takt-mittel:260ms; --takt-lang:520ms;
  --rast:cubic-bezier(.2,.85,.3,1);          /* Einrasten */
  --hebelzug:cubic-bezier(.34,1.56,.64,1);   /* nur Hebel/Walzen: leichter Überschwung */
}

/* ---------- Reset + Basis ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Wix Madefor Text',system-ui,sans-serif;
  background:var(--tinte-tief); color:var(--text); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.02em;color:var(--tinte);line-height:1.15}
img{max-width:100%;height:auto;display:block}
a{color:var(--pink-tief)}

/* Layer 0 — billige Identität */
::selection{background:var(--butter);color:var(--tinte)}
html{scrollbar-color:var(--pink) var(--papier-2)}
:focus-visible{outline:3px solid var(--himmel);outline-offset:2px;border-radius:4px}
::marker{color:var(--pink)}
:root{accent-color:var(--pink)}
hr{border:0;height:8px;margin:2.2rem 0;background:
  repeating-linear-gradient(90deg,var(--chrom-mittel) 0 22px,var(--chrom-hell) 22px 44px);
  border-radius:4px;opacity:.5}

/* ==========================================================================
   KABINETT-SHELL
   ========================================================================== */
.kabinett{max-width:var(--kabinett-breite);margin:0 auto;position:relative;
  background:linear-gradient(180deg,#0f1526,var(--tinte) 120px);
  border-radius:34px;overflow:clip;
}
/* Seitenschienen: beginnen NACH dem Header, enden VOR dem Footer, runde Enden */
.display::before,.display::after{
  content:"";position:absolute;top:0;bottom:0;width:var(--schiene);z-index:40;
  background:linear-gradient(90deg,var(--chrom-dunkel),var(--chrom-hell) 45%,var(--chrom-mittel));
  border-radius:9px;
}
.display::before{left:calc(-1 * var(--schiene))}
.display::after{right:calc(-1 * var(--schiene));transform:scaleX(-1)}

/* --- Marquee-Header --- */
.marquee{position:relative;z-index:30;padding:10px var(--schiene);
  background:linear-gradient(180deg,var(--tinte-tief),var(--tinte))}
/* horizontale Chrom-Leiste unter dem Header — schliesst den Rahmen oben, laeuft in die Schienen */
.marquee::after{content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--schiene));height:var(--schiene);z-index:42;
  background:linear-gradient(180deg,var(--chrom-dunkel),var(--chrom-hell) 45%,var(--chrom-mittel));
  border-radius:0 0 12px 12px}
.birnen{display:flex;gap:10px;justify-content:center;padding:7px 0 9px}
.birne{width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 6px var(--pink)}
.birne:nth-child(3n+2){background:var(--himmel);box-shadow:0 0 6px var(--himmel)}
.birne:nth-child(3n){background:var(--butter);box-shadow:0 0 6px var(--butter)}
@media (prefers-reduced-motion: no-preference){
  .birne{animation:gluehen 1.4s infinite alternate}
  .birne:nth-child(3n+2){animation-delay:.45s}
  .birne:nth-child(3n){animation-delay:.9s}
}
@keyframes gluehen{from{opacity:.25}to{opacity:1}}
.marquee-zeile{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:0 clamp(10px,1.8vw,30px)}
.wortmarke{display:flex;align-items:center;gap:10px;text-decoration:none}
.wortmarke svg{flex-shrink:0}
.wortmarke b{font-family:'Archivo';font-weight:900;font-size:1.35rem;color:#fff;letter-spacing:-.02em}
.wortmarke b span{color:var(--pink)}
.leuchtnav{display:flex;gap:6px;flex-wrap:wrap}
.leuchtnav a{
  color:#cfd6e6;text-decoration:none;font-weight:700;font-size:.86rem;padding:8px 13px;border-radius:9px;
  border:1px solid #2a3352;background:linear-gradient(180deg,#1a2340,#141b31);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:color var(--takt-kurz) var(--rast), border-color var(--takt-kurz) var(--rast), box-shadow var(--takt-mittel) var(--rast);
}
.leuchtnav a:hover{color:#fff;border-color:var(--himmel-tief);box-shadow:0 0 8px rgba(63,182,232,.35)}
.leuchtnav a[aria-current="page"],.leuchtnav a.aktiv{color:var(--tinte);background:linear-gradient(180deg,var(--butter),var(--butter-tief));border-color:var(--butter-tief);font-weight:800}

/* --- Glas-Display (Inhalt) --- */
.display{position:relative;margin:0 var(--schiene);background:var(--papier) url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22460%22%20height=%22460%22%20viewBox=%220%200%20460%20460%22%3E%20%3Cg%20opacity=%220.20%22%3E%20%3Ctext%20x=%2238%22%20y=%2286%22%20font-family=%22Arial%20Black,Arial,sans-serif%22%20font-weight=%22900%22%20font-size=%2258%22%20fill=%22%23e23e8f%22%20transform=%22rotate(-14%2060%2060)%22%3E7%3C/text%3E%20%3Cg%20transform=%22translate(330%2040)%20rotate(12)%22%3E%20%3Cpath%20d=%22M14%2030%20Q26%202%2044%200%22%20fill=%22none%22%20stroke=%22%237fbf6a%22%20stroke-width=%225%22%20stroke-linecap=%22round%22/%3E%20%3Cpath%20d=%22M30%2032%20Q38%2010%2044%200%22%20fill=%22none%22%20stroke=%22%237fbf6a%22%20stroke-width=%225%22%20stroke-linecap=%22round%22/%3E%20%3Ccircle%20cx=%2212%22%20cy=%2242%22%20r=%2215%22%20fill=%22%23e23e8f%22/%3E%3Ccircle%20cx=%2234%22%20cy=%2244%22%20r=%2215%22%20fill=%22%23c22572%22/%3E%20%3C/g%3E%20%3Cg%20transform=%22translate(150%20120)%20rotate(-8)%22%3E%20%3Crect%20x=%220%22%20y=%220%22%20width=%2286%22%20height=%2234%22%20rx=%228%22%20fill=%22none%22%20stroke=%22%233fb6e8%22%20stroke-width=%225%22/%3E%20%3Ctext%20x=%2212%22%20y=%2225%22%20font-family=%22Arial%20Black,Arial,sans-serif%22%20font-weight=%22900%22%20font-size=%2220%22%20fill=%22%233fb6e8%22%3EBAR%3C/text%3E%20%3C/g%3E%20%3Cg%20transform=%22translate(48%20210)%20rotate(9)%22%3E%20%3Cpath%20d=%22M24%200%20C10%204%204%2016%204%2030%20L0%2040%20L48%2040%20L44%2030%20C44%2016%2038%204%2024%200%20Z%22%20fill=%22%23d9ad1f%22/%3E%20%3Ccircle%20cx=%2224%22%20cy=%2246%22%20r=%226%22%20fill=%22%23d9ad1f%22/%3E%20%3C/g%3E%20%3Cg%20transform=%22translate(300%20190)%20rotate(-11)%22%3E%20%3Cellipse%20cx=%2226%22%20cy=%2218%22%20rx=%2226%22%20ry=%2217%22%20fill=%22%23d9ad1f%22/%3E%20%3C/g%3E%20%3Cg%20transform=%22translate(180%20300)%20rotate(14)%22%3E%20%3Cpath%20d=%22M24%200%20L48%2024%20L24%2048%20L0%2024%20Z%22%20fill=%22%233fb6e8%22/%3E%20%3C/g%3E%20%3Ctext%20x=%22330%22%20y=%22360%22%20font-family=%22Arial%20Black,Arial,sans-serif%22%20font-weight=%22900%22%20font-size=%2258%22%20fill=%22%23d9ad1f%22%20transform=%22rotate(10%20350%20330)%22%3E7%3C/text%3E%20%3Cg%20transform=%22translate(60%20380)%20rotate(-12)%22%3E%20%3Cpath%20d=%22M26%200%20L32%2018%20L52%2018%20L36%2030%20L42%2050%20L26%2038%20L10%2050%20L16%2030%20L0%2018%20L20%2018%20Z%22%20fill=%22%23e23e8f%22/%3E%20%3C/g%3E%20%3Cg%20transform=%22translate(250%20420)%20rotate(6)%22%3E%20%3Ccircle%20cx=%2214%22%20cy=%2214%22%20r=%2214%22%20fill=%22%233fb6e8%22/%3E%3Ccircle%20cx=%2214%22%20cy=%2214%22%20r=%227%22%20fill=%22%23fdfcf8%22/%3E%20%3C/g%3E%20%3C/g%3E%20%3C/svg%3E") repeat;background-size:400px 400px;
  box-shadow:inset 0 12px 20px -14px rgba(8,12,25,.55), inset 0 -12px 20px -14px rgba(8,12,25,.45)}
.panel{padding:56px clamp(20px,5vw,64px);max-width:1248px;margin-left:auto;margin-right:auto}
.panel.alt{background:var(--papier-2)}
.zahltrenner{height:14px;background:
  repeating-linear-gradient(90deg,var(--chrom-mittel) 0 26px,var(--chrom-hell) 26px 52px);
  border-top:2px solid var(--chrom-dunkel);border-bottom:2px solid var(--chrom-dunkel);opacity:.55}

/* --- Münzschale (Footer) --- */
.schale{position:relative;z-index:30;padding:34px var(--schiene) 26px;
  background:linear-gradient(180deg,var(--tinte),var(--tinte-tief));border-radius:0 0 30px 30px}
/* horizontale Chrom-Leiste ueber dem Footer — schliesst den Rahmen unten, laeuft in die Schienen */
.schale::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--schiene));height:var(--schiene);z-index:42;
  border-radius:12px 12px 0 0;
  background:linear-gradient(0deg,var(--chrom-dunkel),var(--chrom-hell) 45%,var(--chrom-mittel))}
.schale-schlitz{max-width:520px;margin:0 auto 30px;height:56px;border-radius:16px;
  background:linear-gradient(180deg,#080c18,#111831);border:2px solid #2a3352;
  box-shadow:inset 0 6px 14px rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;
  color:#8b96b3;font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.schale-raster{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:26px;color:#aab4c9;font-size:.9rem;padding:0 12px}
.schale-raster h4{font-family:'Archivo';color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.schale-raster a{display:block;color:#aab4c9;text-decoration:none;margin-bottom:8px;transition:color var(--takt-kurz) var(--rast)}
.schale-raster a:hover{color:var(--butter)}
.schale-recht{margin-top:26px;padding:14px 12px 0;border-top:1px solid #232c4a;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#77809b;font-size:.8rem}
.alter18{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--pink);color:var(--pink);font-weight:900;font-size:.78rem}

/* --- Hebel (Signature-Moment #1) --- */
.hebel{position:fixed;right:4px;top:90px;z-index:60;
  width:26px;height:calc(100vh - 160px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border:0;background:none;cursor:pointer;padding:0}
.hebel-stange{width:9px;height:var(--stangenhoehe,calc(100% - 43px));background:linear-gradient(90deg,var(--chrom-dunkel),var(--chrom-hell),var(--chrom-mittel));border-radius:5px}
.hebel-knauf{width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#ff8ec4,var(--pink) 55%,var(--pink-tief));
  box-shadow:0 4px 12px rgba(226,62,143,.6);position:relative;z-index:2}
.hebel-stange{margin-top:-17px}  /* Stange laeuft unter dem Knauf durch */
.hebel-fuss{width:22px;height:26px;background:linear-gradient(180deg,var(--chrom-mittel),var(--chrom-dunkel));border-radius:6px 6px 10px 10px}
@media (prefers-reduced-motion: no-preference){
  .hebel-stange{transition:height 130ms linear}
  .hebel:hover .hebel-knauf{transform:scale(1.1)}
  .hebel.gezogen .hebel-knauf{transform:translateY(12px)}
  .hebel-knauf{transition:transform var(--takt-mittel) var(--rast)}
}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
@media(max-width:1100px){
  .hebel{right:1px;width:20px;top:70px;height:calc(100vh - 140px)}
  .hebel-knauf{width:24px;height:24px}
  .hebel-stange{width:6px;margin-top:-12px}
  .hebel-fuss{width:15px;height:18px}
}

/* ==========================================================================
   KOMPONENTEN
   ========================================================================== */

/* Hero */
.buehne{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.panel.buehne{max-width:1420px}
.buehne > div:first-child{max-width:920px}

.plakette{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--pink);color:var(--pink-tief);
  font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 14px;margin-bottom:22px}
.buehne h1{font-size:clamp(2.3rem,4.8vw,3.9rem);margin-bottom:20px}
.wort-pink{color:var(--pink)} .wort-himmel{color:var(--himmel-tief)} .wort-butter{color:var(--butter-tief)}
.vorspann{font-size:1.15rem;color:var(--gedimmt);max-width:34rem;margin:0 auto 24px}
.artikel .vorspann{max-width:none;margin:0 0 24px}
.punkte{display:flex;gap:20px;flex-wrap:wrap;font-weight:700;font-size:.92rem;color:var(--gedimmt)}
.punkte span i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px}
.punkte .p1 i{background:var(--pink)} .punkte .p2 i{background:var(--himmel)} .punkte .p3 i{background:var(--butter-tief)}

/* Walzen-Fenster (Slot-O-Mat Rahmen) */
.walzenkasten{background:linear-gradient(180deg,var(--tinte-2),var(--tinte));border-radius:26px;padding:22px;position:relative;
  border:5px solid var(--chrom-mittel);outline:2px solid var(--chrom-dunkel);box-shadow:0 24px 48px -18px rgba(10,14,28,.5)}
.walzenkasten .titel{font-family:'Archivo';font-weight:900;color:#fff;text-align:center;letter-spacing:.14em;font-size:1.05rem;margin-bottom:14px}

/* Gewinntabelle (Ranking = Paytable) */
.zahltafel-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.zahltafel-kopf h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.zahltafel-kopf .unterzeile{color:var(--gedimmt);font-size:.95rem}
.zahltafel{width:100%;border-collapse:separate;border-spacing:0 12px}
.zahltafel th{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gedimmt);text-align:left;padding:0 16px}
.zahltafel td{background:#fff;padding:18px 16px;vertical-align:middle;border-top:1.5px solid var(--linie);border-bottom:1.5px solid var(--linie)}
.zahltafel tr td:first-child{border-left:1.5px solid var(--linie);border-radius:16px 0 0 16px}
.zahltafel tr td:last-child{border-right:1.5px solid var(--linie);border-radius:0 16px 16px 0}
@media (prefers-reduced-motion: no-preference){
  .zahltafel tbody tr{transition:box-shadow var(--takt-mittel) var(--rast)}
  .zahltafel tbody tr:hover{box-shadow:0 0 0 2px var(--butter), 0 10px 26px -14px rgba(20,26,46,.35)}
}
.zahltafel .platz{font-family:'Archivo';font-weight:900;font-size:1.5rem;color:var(--butter-tief);width:52px}
.logo-chip{width:132px;height:62px;border-radius:12px;background:#fff;border:2px solid var(--papier-2);
  box-shadow:0 3px 10px -4px rgba(20,26,46,.25);display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-chip img{width:100%;height:100%;object-fit:contain;padding:6px;image-rendering:-webkit-optimize-contrast}
.anbieter{display:flex;align-items:center;gap:14px}
.anbieter .nm{font-family:'Archivo';font-weight:900;font-size:1.08rem}
.anbieter .liz{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--himmel-tief);text-transform:uppercase}
.wertung{font-family:'Archivo';font-weight:900;font-size:1.35rem}
.wertung small{font-size:.75rem;color:var(--gedimmt);font-weight:700}
.fakten{font-size:.82rem;color:var(--gedimmt);line-height:1.8}
.fakten b{color:var(--text)}
.etikett{display:inline-block;padding:5px 11px;border-radius:8px;font-size:.74rem;font-weight:800}
.etikett.himmel{background:var(--himmel-hauch);color:var(--himmel-tief)}
.etikett.pink{background:var(--pink-hauch);color:var(--pink-tief)}
.etikett.butter{background:var(--butter-hauch);color:var(--butter-tief)}

/* Buttons — „Hebel-Druck" Feedback */
.knopf{display:inline-block;background:linear-gradient(180deg,var(--pink),var(--pink-tief));color:#fff;text-decoration:none;
  font-family:'Archivo';font-weight:800;padding:12px 22px;border-radius:11px;border:0;cursor:pointer;
  box-shadow:0 4px 0 var(--pink-tief)}
.knopf:active{transform:translateY(3px);box-shadow:0 1px 0 var(--pink-tief)}
.knopf.himmel{background:linear-gradient(180deg,var(--himmel),var(--himmel-tief));box-shadow:0 4px 0 var(--himmel-tief)}
.knopf.himmel:active{box-shadow:0 1px 0 var(--himmel-tief)}
.knopf.gross{font-size:1rem;padding:13px 30px;box-shadow:0 6px 0 var(--pink-tief),0 12px 22px -8px rgba(226,62,143,.55)}

/* Merkkasten — site-eigene Callout-Behandlung (KEIN border-l-4/Stock-Label) */
.merkkasten{background:#fff;border:2px solid var(--tinte);border-radius:16px;padding:20px 22px 20px 58px;position:relative;margin:1.6rem 0}
.merkkasten::before{content:"";position:absolute;left:18px;top:20px;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#fff 0 18%,transparent 19%),conic-gradient(var(--pink) 0 33%,var(--himmel) 33% 66%,var(--butter) 66%)}
.merkkasten b:first-child{font-family:'Archivo';display:block;margin-bottom:4px}

/* Regel-/Feature-Karten mit Farbleiste OBEN (bewusst nicht border-left) */
.regeln{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.regel{border-radius:18px;padding:26px;border:1.5px solid var(--linie);background:#fff;position:relative;overflow:hidden}
.regel::before{content:"";position:absolute;left:0;right:0;top:0;height:7px}
.regel.r1::before{background:var(--pink)} .regel.r2::before{background:var(--himmel)} .regel.r3::before{background:var(--butter)}
.regel .nr{font-family:'Archivo';font-weight:900;font-size:1.9rem}
.regel.r1 .nr{color:var(--pink)} .regel.r2 .nr{color:var(--himmel-tief)} .regel.r3 .nr{color:var(--butter-tief)}
.regel h3{font-size:1.02rem;margin:8px 0}
.regel p{font-size:.9rem;color:var(--gedimmt)}

/* FAQ */
.fragen details{background:#fff;border:1.5px solid var(--linie);border-radius:14px;padding:18px 20px;margin-bottom:12px}
.fragen summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary h3{font-size:1rem;display:inline;margin:0}
.fragen summary .zeiger{color:var(--pink);font-weight:900;transition:transform var(--takt-kurz) var(--rast)}
.fragen details[open]{border-color:var(--himmel)}
.fragen details[open] .zeiger{transform:rotate(45deg)}
.fragen details p{margin-top:12px;color:var(--gedimmt);font-size:.94rem}

/* Artikel-Typografie (Content-Seiten) */
.artikel h2{font-size:clamp(1.45rem,2.6vw,2rem);margin:2.4rem 0 .9rem}
.artikel h3{font-size:1.12rem;margin:1.7rem 0 .6rem}
.artikel p{margin-bottom:1rem}
.artikel ul,.artikel ol{margin:0 0 1.1rem 1.3rem}
.artikel li{margin-bottom:.4rem}
.artikel a{text-decoration:none;background-image:linear-gradient(90deg,var(--pink),var(--pink));background-repeat:no-repeat;
  background-size:100% 2px;background-position:0 100%;padding-bottom:2px}
@media (prefers-reduced-motion: no-preference){
  .artikel a{background-size:0% 2px;transition:background-size var(--takt-mittel) var(--rast)}
  .artikel a:hover{background-size:100% 2px}
}
.artikel table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.92rem}
.artikel table th{background:var(--tinte);color:#fff;font-family:'Archivo';font-weight:700;text-align:left;padding:10px 12px}
.artikel table td{padding:10px 12px;border-bottom:1.5px solid var(--linie);background:#fff}
.artikel table tr:nth-child(even) td{background:var(--papier-2)}
.brotkrumen{font-size:.82rem;color:var(--gedimmt);margin-bottom:18px}
.brotkrumen a{color:var(--gedimmt);text-decoration:none}
.brotkrumen a:hover{color:var(--pink-tief)}

/* Walzen-Stopp Reveal (Signature-Reveal; nur mit JS-Klasse, no-JS = alles sichtbar) */
@media (prefers-reduced-motion: no-preference){
  .js .walzenstopp{opacity:0;transform:translateY(14px)}
  .js .walzenstopp.eingerastet{opacity:1;transform:none;
    transition:opacity var(--takt-lang) var(--rast), transform var(--takt-lang) var(--hebelzug)}
  .js .walzenstopp:nth-child(2){transition-delay:90ms}
  .js .walzenstopp:nth-child(3){transition-delay:180ms}
}

/* Responsive */
@media(max-width:920px){
  :root{--schiene:13px}
  .buehne{grid-template-columns:1fr}
  .regeln{grid-template-columns:1fr}
  .schale-raster{grid-template-columns:1fr 1fr}
  .zahltafel .fakten-spalte{display:none}
}

/* RTP-Datenbank Tabelle (außerhalb .artikel) */
.artikel-rtp{width:100%;border-collapse:collapse;font-size:.9rem}
.artikel-rtp th{background:var(--tinte);color:#fff;font-family:'Archivo';font-weight:700;text-align:left;padding:10px 12px;position:sticky;top:0}
.artikel-rtp td{padding:9px 12px;border-bottom:1.5px solid var(--linie);background:#fff}
.artikel-rtp tr:nth-child(even) td{background:var(--papier)}

/* Demo-Spielhalle (SlotsLaunch Click-to-Play) — Kabinett-Glaspanel-Optik */
.demo-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem;margin-top:1.2rem}
.demo-kachel{margin:0;border:1.5px solid var(--linie);border-radius:18px;overflow:hidden;background:#fff}
.demo-buehne{position:relative;aspect-ratio:16/10;background:var(--tinte);display:grid;place-items:center}
.demo-buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82}
.demo-buehne iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.demo-buehne.laeuft{aspect-ratio:16/10}
.demo-start{position:relative;z-index:1;font-family:'Archivo';font-weight:700;font-size:.95rem;color:var(--tinte);background:var(--butter);border:2px solid var(--tinte);border-radius:999px;padding:.6rem 1.3rem;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:transform 120ms var(--rast)}
.demo-start:hover{transform:scale(1.05)}
.demo-start span{font-size:.8rem}
.demo-kachel figcaption{padding:.7rem 1rem;font-size:.88rem;font-weight:600;color:var(--tinte)}

/* Review-Header mit Anbieter-Logo (+ Text-Chip-Fallback) */
.review-titel{display:flex;align-items:center;gap:.65rem}
.review-logo{flex:0 0 auto;width:132px;height:62px;border-radius:12px;background:#fff;border:1.5px solid var(--linie);display:grid;place-items:center;overflow:hidden}
.review-logo img{width:100%;height:100%;object-fit:contain;padding:4px;image-rendering:-webkit-optimize-contrast}
.review-logo.text-chip{font-family:'Archivo';font-weight:900;font-size:.85rem;color:#fff;background:var(--tinte);letter-spacing:.03em}
.mini-anbieter{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.mini-anbieter img{width:110px;height:50px;object-fit:contain;image-rendering:-webkit-optimize-contrast;background:#fff;border:1.5px solid var(--linie);border-radius:8px;padding:3px}
.logo-chip.dunkel,.review-logo.dunkel,.mini-anbieter img.dunkel{background:var(--tinte);border-color:var(--tinte)}

/* Knopf innerhalb von .artikel: das Underline-Draw-Treatment (.artikel a) darf
   den Button-Verlauf nicht ueberschreiben; Tabellen im Artikel scrollen im
   eigenen Kasten statt das Panel zu sprengen. */
.artikel a.knopf{background:linear-gradient(180deg,var(--pink),var(--pink-tief));color:#fff}
.artikel a.knopf.himmel{background:linear-gradient(180deg,var(--himmel),var(--himmel-tief))}
.knopf{white-space:nowrap}
.zahltafel{display:block;overflow-x:auto}


/* Fakten-Banderole — dunkles Glas-Display mit grossen Kennzahlen */
.banderole{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;margin:2rem 0;
  background:linear-gradient(180deg,var(--tinte-2),var(--tinte-tief));border:2px solid #2a3352;border-radius:18px;overflow:hidden;
  box-shadow:inset 0 6px 18px rgba(0,0,0,.5)}
.banderole > div{padding:18px 16px;text-align:center;background:rgba(255,255,255,.02)}
.banderole b{display:block;font-family:'Archivo';font-weight:900;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.02em;color:var(--butter)}
.banderole > div:nth-child(3n+2) b{color:var(--himmel)}
.banderole > div:nth-child(3n) b{color:var(--pink)}
.banderole span{display:block;color:#aab4c9;font-size:.82rem;font-weight:600;margin-top:4px;line-height:1.35}

/* Inhalts-Chips — Sprungmarken im Leuchtnav-Stil */
.inhalts-chips{display:flex;flex-wrap:wrap;gap:8px;margin:1.4rem 0 2rem}
.inhalts-chips a{color:var(--tinte);text-decoration:none;font-weight:700;font-size:.85rem;padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--linie);background:#fff;transition:border-color var(--takt-kurz) var(--rast),box-shadow var(--takt-mittel) var(--rast)}
.inhalts-chips a:hover{border-color:var(--himmel-tief);box-shadow:0 0 8px rgba(63,182,232,.35)}

/* Kurz-Fakten — kompakte Steckbrief-Tabelle mit Chrom-Kopf */
.kurzfakten{width:100%;border-collapse:collapse;margin:1.6rem 0;border-radius:14px;overflow:hidden;border:1.5px solid var(--linie)}
.kurzfakten caption{caption-side:top;text-align:left;font-family:'Archivo';font-weight:900;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinte);padding:10px 14px;
  background:linear-gradient(180deg,var(--chrom-hell),var(--chrom-mittel));border:1.5px solid var(--linie);border-bottom:0;border-radius:14px 14px 0 0}
.kurzfakten th{width:38%;text-align:left;padding:10px 14px;font-size:.88rem;color:var(--gedimmt);font-weight:600;background:var(--papier-2);border-bottom:1.5px solid var(--linie)}
.kurzfakten td{padding:10px 14px;font-size:.92rem;background:#fff;border-bottom:1.5px solid var(--linie);font-weight:600;color:var(--tinte)}
.kurzfakten tr:last-child th,.kurzfakten tr:last-child td{border-bottom:0}

/* FAQ-Ueberschrift: Luft zwischen Titel und erstem Accordion */
.fragen h2{margin-bottom:22px}

/* Hersteller-Chip: kleines Studio-Logo vor dem Namen (RTP-Datenbank) */
.hersteller-chip{display:inline-flex;align-items:center;gap:8px}
.hersteller-chip img{width:20px;height:20px;object-fit:contain;flex:0 0 auto}

/* Burger-Navigation (Mobil + Tablet) — Checkbox-Hack, laeuft ohne JS */
.nav-schalter{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.burger{display:none;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;width:46px;height:44px;align-items:center;
  border:1px solid #2a3352;border-radius:9px;background:linear-gradient(180deg,#1a2340,#141b31)}
.burger span{width:22px;height:2.5px;border-radius:2px;background:#cfd6e6;
  transition:transform var(--takt-mittel) var(--rast),opacity var(--takt-kurz) var(--rast)}
@media(max-width:1100px){
  .marquee-zeile{position:relative}
  .burger{display:flex}
  .leuchtnav{display:none;position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:60;
    flex-direction:column;background:linear-gradient(180deg,var(--tinte-2),var(--tinte-tief));
    border:1px solid #2a3352;border-radius:14px;padding:12px;gap:8px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
  .leuchtnav a{text-align:center;font-size:.95rem;padding:12px}
  .nav-schalter:checked ~ .leuchtnav{display:flex}
  .nav-schalter:checked + .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-schalter:checked + .burger span:nth-child(2){opacity:0}
  .nav-schalter:checked + .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* Hero-Text (Startseite): zentriert */
.buehne > div:first-child{margin-left:auto;margin-right:auto;text-align:center}
.punkte{justify-content:center}



/* ===== Mobil + Tablet: Tabellen als Karten, KEIN horizontaler Scroll ===== */
@media(max-width:1100px){
  .mobil-karten,.mobil-karten tbody,.mobil-karten tr,.mobil-karten td{display:block}
  .mobil-karten{overflow:visible;border:0}
  .mobil-karten thead{display:none}
  .mobil-karten tr{background:#fff;border:1.5px solid var(--linie);border-radius:14px;margin-bottom:12px;padding:12px 16px}
  .mobil-karten td{border:0;padding:6px 0;background:none}
  .mobil-karten td::before{content:attr(data-label);display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gedimmt);font-weight:700;margin-bottom:1px}
  .mobil-karten td:first-child{font-weight:800;font-size:1.02rem}
  .artikel-rtp th{position:static}
  .artikel-rtp tr:nth-child(even) td{background:none}

  .zahltafel{overflow:visible}
  .zahltafel tbody,.zahltafel tr,.zahltafel td{display:block}
  .zahltafel thead{display:none}
  .zahltafel tr{position:relative;background:#fff;border:1.5px solid var(--linie);border-radius:16px;margin-bottom:14px;padding:14px 16px}
  .zahltafel td{border:0;padding:5px 0;background:none}
  .zahltafel tr td:first-child,.zahltafel tr td:last-child{border:0;border-radius:0}
  .zahltafel .platz{position:absolute;top:8px;right:16px;width:auto;font-size:1.3rem}
  .zahltafel .anbieter{flex-wrap:wrap;padding-right:30px}
  .zahltafel .anbieter .nm{white-space:normal;overflow-wrap:anywhere}
  .zahltafel .knopf{display:block;text-align:center;margin-top:6px}
}

/* Diagramm-Figuren in Artikeln — Chrom-Kopf wie .kurzfakten, SVG-Body */
figure.diagramm{margin:1.8rem 0;border:1.5px solid var(--linie);border-radius:14px;overflow:hidden;background:#fff}
figure.diagramm .diagramm-kopf{font-family:'Archivo';font-weight:900;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinte);padding:10px 14px;
  background:linear-gradient(180deg,var(--chrom-hell),var(--chrom-mittel));border-bottom:1.5px solid var(--linie)}
figure.diagramm svg{display:block;width:100%;height:auto;background:#fff}
figure.diagramm figcaption{padding:10px 14px;font-size:.82rem;color:var(--gedimmt);border-top:1.5px solid var(--linie)}