/* V7 Vegas Royale — gemeinsame Gestaltung fuer alle Unterseiten.
   Wird von index.html, leaderboard.html und shop.html geladen.
   Aenderungen an Farben, Kopf, Fuss oder Karten NUR hier. */

/* =====================================================================
   V7 — "VEGAS ROYALE"
   Das Casino selbst, nicht die Vergleichsseite davor.
   Schwarz, Gold, Tiefrot. Art-deco-Rahmen, Lichterkette wie an einer
   Marquee-Tafel am Strip, Spielkarten-Andeutungen.
   Regel: jeder Text ist EINFARBIG. Farbe entsteht durch Flaeche und
   Licht, nicht durch bunte Buchstaben.
   ===================================================================== */

@font-face{font-family:Sora;src:url(../fonts/sora-400.woff2?v=20260919g) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Sora;src:url(../fonts/sora-600.woff2?v=20260919g) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Sora;src:url(../fonts/sora-700.woff2?v=20260919g) format("woff2");font-weight:700;font-display:swap}

:root{
  --schwarz:#0a0705;
  --tief:#140d09;
  --gold:#d4af37;
  --gold-hell:#f4dd8f;
  --rot:#8b0e1f;
  --creme:#f5ecd8;
  --grau:#94866d;
  /* Ein Raster fuer alle Bloecke - Hero, Filter, Karten und Rangliste
     stehen dadurch auf derselben Achse. Vorher hatte jeder Block seine
     eigene Breite (808/768/1180/848), das sah auf dem Desktop zufaellig aus. */
  --raster:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Sprungziele der Unterleiste nicht unter den klebrigen Kopf schieben */
#liste,#rangliste{scroll-margin-top:76px}
html,body{margin:0;padding:0}
body{
  background:var(--schwarz);color:var(--creme);
  font-family:Sora,system-ui,sans-serif;font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;font-size:inherit}
.num{font-variant-numeric:tabular-nums}

/* Samtvorhang-Stimmung: warmes Licht von oben, Rot aus der Tiefe */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 45% at 50% -8%,rgba(212,175,55,.2),transparent 70%),
    radial-gradient(60% 50% at 50% 108%,rgba(139,14,31,.28),transparent 70%)
}
.korn{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{position:relative;z-index:1}

/* ---------- Lichterkette wie an einer Marquee-Tafel ---------- */
.lichter{display:flex;justify-content:center;gap:14px;padding:12px 0 0;position:relative;z-index:2}
.lichter i{width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 8px var(--gold);animation:gluehen 2.4s ease-in-out infinite}
.lichter i:nth-child(2n){animation-delay:.3s}
.lichter i:nth-child(3n){animation-delay:.7s}
.lichter i:nth-child(5n){animation-delay:1.1s}
@keyframes gluehen{0%,100%{opacity:1}50%{opacity:.22}}

/* ---------- Kopf ---------- */
.kopf{display:flex;align-items:center;gap:16px;padding:16px 26px;position:sticky;top:0;z-index:20;
  background:rgba(10,7,5,.84);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(212,175,55,.22)}
/* Perlweiss statt Gold: hauchfeiner Verlauf hell -> kuehl gibt dem Signet
   einen Metallschimmer, ohne bunt zu werden. */
/* Volles Logo, aber die Luft zwischen MNM und bonus.com ist herausgenommen
   (mnm-logo-kompakt.png). Dadurch bleibt bonus.com lesbar, ohne dass der
   Kopf hoch wird. */
.marke{width:112px;height:39px;
  background:linear-gradient(155deg,#ffffff 0%,#f6f4ef 42%,#dedad2 100%);
  -webkit-mask:url(../logos/mnm-logo-kompakt.png?v=20260921o) left center/contain no-repeat;
  mask:url(../logos/mnm-logo-kompakt.png?v=20260921o) left center/contain no-repeat;font-size:0;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}

/* ---------- Hero im Art-deco-Rahmen ---------- */
.hero{padding:46px 26px 44px;max-width:var(--raster);margin:0 auto;text-align:center;position:relative}
.rahmen{position:relative;padding:44px 26px 40px;
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.28)}
/* Ecken-Winkel statt durchgehendem Kasten - das macht den Deco-Charakter */
.rahmen::before,.rahmen::after{content:"";position:absolute;width:26px;height:26px;
  border:2px solid var(--gold)}
.rahmen::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.rahmen::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.ueber{font-size:10px;font-weight:700;letter-spacing:.42em;color:var(--gold);margin-bottom:22px}
.hero h1{font-size:clamp(32px,8vw,68px);line-height:1.02;color:var(--creme);text-transform:uppercase}
/* Zierlinie mit Raute in der Mitte - eine Geste, kein Kasten */
.zier{display:flex;align-items:center;justify-content:center;gap:12px;margin:26px 0 0}
.zier span{height:1px;width:62px;background:linear-gradient(90deg,transparent,var(--gold))}
.zier span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.zier i{width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.hero p{color:var(--creme);font-size:19px;font-weight:600;line-height:1.45;
  max-width:46ch;margin:24px auto 0;text-shadow:0 2px 10px rgba(0,0,0,.5)}

.stats{display:flex;justify-content:center;margin-top:34px;flex-wrap:wrap}
.stat{padding:0 26px;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:rgba(212,175,55,.3)}
.stat b{display:block;font-size:28px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.stat span{font-size:9.5px;letter-spacing:.2em;color:var(--grau);font-weight:700}

/* ---------- Suchen, filtern, sortieren ---------- */
.suchblock{max-width:var(--raster);margin:0 auto;padding:30px 26px 0}
/* Alles zum Bedienen in einem weichen Kasten, eng gepackt:
   Suche - Filter - Sortierung - Zaehler. */
.filterbox{border-radius:20px;padding:14px 14px 12px;
  background:rgba(20,13,9,.55);box-shadow:inset 0 0 0 1px rgba(212,175,55,.2)}
.suchzeile{display:flex;gap:10px;align-items:center}
.suchfeld{position:relative;flex:1 1 auto;min-width:0}
/* Filter-Knopf rechts neben der Suche, wie im Vorbild */
.filterknopf{flex:none;padding:14px 22px;font-size:14px;font-weight:600;
  color:var(--gold);border-radius:14px;background:transparent;
  box-shadow:inset 0 0 0 1px var(--gold);
  transition:background .2s ease, color .2s ease}
.filterknopf:hover{background:rgba(212,175,55,.12)}
.filterknopf.zu{color:var(--grau);box-shadow:inset 0 0 0 1px rgba(212,175,55,.3)}

/* Zeile: Sortieren + Ansicht */
.sortzeile{display:flex;gap:10px;align-items:center;margin-top:12px}
.sortzeile>label{font-size:13px;color:var(--grau);flex:none}
.sortier{position:relative;flex:1 1 auto;min-width:0}
.sortier select{appearance:none;width:100%;padding:13px 40px 13px 16px;font-family:inherit;
  font-size:14px;font-weight:600;color:var(--creme);
  background:var(--tief);border:0;border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.3);cursor:pointer;
  transition:box-shadow .2s ease}
.sortier select:hover,.sortier select:focus{outline:none;box-shadow:inset 0 0 0 1px var(--gold)}
.sortier::after{content:"";position:absolute;right:17px;top:42%;width:7px;height:7px;
  border-right:2px solid var(--creme);border-bottom:2px solid var(--creme);
  transform:rotate(45deg);pointer-events:none}
/* Ansicht: Liste oder Raster */
.ansicht{display:flex;gap:6px;flex:none}
.ansicht button{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;
  color:var(--grau);box-shadow:inset 0 0 0 1px rgba(212,175,55,.3);transition:.2s}
.ansicht button:hover{color:var(--creme)}
.ansicht button.on{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.ansicht svg{width:20px;height:20px}

.trennlinie{height:1px;background:rgba(212,175,55,.18);margin:16px 0}

.reihe{display:flex;gap:9px;flex-wrap:wrap;margin-top:9px}
.reihe:first-of-type{margin-top:0}

/* Schieberegler Max. Wager */
.wagerzeile{display:flex;gap:14px;align-items:center;margin-top:18px;flex-wrap:wrap}
.wagerblock{flex:1 1 220px;min-width:0}
.wagerblock label{display:block;font-size:13px;color:var(--grau);margin-bottom:9px}
.wagerblock label b{color:var(--creme);font-variant-numeric:tabular-nums}
.wagerblock input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;
  border-radius:999px;background:rgba(212,175,55,.2);outline:none}
.wagerblock input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:999px}
.wagerblock input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:19px;height:19px;border-radius:50%;background:var(--gold);cursor:pointer;
  margin-top:-7px;box-shadow:0 0 0 4px rgba(212,175,55,.2), 0 2px 8px rgba(0,0,0,.6)}
.wagerblock input[type=range]::-moz-range-thumb{width:19px;height:19px;border:0;border-radius:50%;
  background:var(--gold);cursor:pointer;box-shadow:0 0 0 4px rgba(212,175,55,.2)}
.zuruecksetzen{flex:none;padding:13px 22px;font-size:14px;font-weight:600;color:var(--grau);
  border-radius:14px;box-shadow:inset 0 0 0 1px rgba(212,175,55,.3);transition:.2s}
.zuruecksetzen:hover{color:var(--creme);box-shadow:inset 0 0 0 1px var(--gold)}

/* Fusszeile der Box */
.boxfuss{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:16px;flex-wrap:wrap;font-size:12px;color:#6f6450}
.boxfuss .rechts{color:#5e5443}
.suchfeld svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--grau);pointer-events:none}
.suchfeld input{width:100%;padding:14px 40px 14px 44px;font-family:inherit;font-size:14px;
  color:var(--creme);background:var(--tief);border:0;border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.3);transition:box-shadow .22s ease, background .22s ease}
.suchfeld input::placeholder{color:#6f6450}
.suchfeld input:focus{outline:none;background:rgba(212,175,55,.06);
  box-shadow:inset 0 0 0 1px var(--gold), 0 0 0 4px rgba(212,175,55,.1)}
.suchfeld .leeren{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:none;place-items:center;color:var(--grau);font-size:17px;
  border-radius:50%;transition:.16s}
.suchfeld .leeren.da{display:grid}
.suchfeld .leeren:hover{color:var(--gold)}
/* Schnellfilter-Pillen, wie im Vorbild: gemischte Schrift, nicht geschrien */
.reihe button{padding:11px 20px;font-size:14px;font-weight:500;color:var(--creme);
  border-radius:999px;background:rgba(212,175,55,.04);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.26);
  transition:color .2s ease, box-shadow .2s ease, background .2s ease}
.reihe button:hover{box-shadow:inset 0 0 0 1px var(--gold);background:rgba(212,175,55,.1)}
.reihe button.on{color:var(--schwarz);font-weight:700;
  background:linear-gradient(135deg,#a3801f,#d4af37 26%,#f7e6a6 50%,#d4af37 74%,#a3801f);
  box-shadow:0 5px 18px rgba(212,175,55,.28), inset 0 1px 0 rgba(255,255,255,.4)}
.reihe button:active{transform:scale(.98)}
.leer{max-width:var(--raster);margin:0 auto;padding:40px 26px 90px;text-align:center;color:var(--grau)}
.leer b{display:block;font-size:19px;color:var(--creme);margin-bottom:10px}
.leer button{margin-top:18px;padding:12px 22px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--schwarz);
  background:linear-gradient(135deg,#a3801f,#d4af37 26%,#f7e6a6 50%,#d4af37 74%,#a3801f)}

/* ---------- Karten mit Goldkante ---------- */
/* Oben 34 px Luft: das Band "HIER ZOCK ICH" ragt ueber die Kartenkante
   hinaus und stiess sonst in die Filterbox. */
.liste{max-width:var(--raster);margin:0 auto;padding:34px 26px 80px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(336px,1fr));gap:20px}
/* Listenansicht: eine Spalte, schmaler */
.liste.einspaltig{grid-template-columns:1fr;max-width:820px}

/* Ab 1500 px vier Karten je Reihe: die acht Casinos stehen dann in zwei
   vollen Reihen statt 3+3+2 mit Loch unten rechts. */
@media(min-width:1500px){
  :root{--raster:1480px}
  .liste{grid-template-columns:repeat(4,1fr)}
  /* Der Hero-Rahmen bleibt auf der Achse, nur sein Text wird begrenzt -
     eine Ueberschrift ueber 1480 px liest sich sonst auseinandergezogen. */
  .rahmen{padding-left:max(26px,calc((100% - 900px) / 2));
          padding-right:max(26px,calc((100% - 900px) / 2))}
}
.karte{position:relative;padding:26px 24px 24px;background:var(--tief);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.22);
  display:flex;flex-direction:column;gap:17px;
  opacity:0;translate:0 22px;transition:opacity .5s ease, translate .5s ease, box-shadow .2s}
.karte.da{opacity:1;translate:none}
/* Kein starrer Goldrahmen mehr beim Ueberfahren - nur ein leiser Hinweis.
   Der volle Goldschein kommt erst, wenn man eine Karte antippt, und dann
   nur bei dieser einen (siehe .karte.gewaehlt). */
.karte:hover{box-shadow:inset 0 0 0 1px rgba(212,175,55,.45), 0 18px 44px rgba(0,0,0,.6)}
.karte.gewaehlt{box-shadow:inset 0 0 0 2px var(--gold),
  0 0 0 1px rgba(212,175,55,.35), 0 0 34px rgba(212,175,55,.42), 0 18px 48px rgba(0,0,0,.66);
  animation:aufbluehen .5s ease}
@keyframes aufbluehen{
  0%  {box-shadow:inset 0 0 0 1px rgba(212,175,55,.3), 0 0 0 rgba(212,175,55,0), 0 18px 44px rgba(0,0,0,.6)}
  55% {box-shadow:inset 0 0 0 2px var(--gold), 0 0 0 6px rgba(212,175,55,.2), 0 0 52px rgba(212,175,55,.6), 0 18px 48px rgba(0,0,0,.66)}
  100%{box-shadow:inset 0 0 0 2px var(--gold), 0 0 0 1px rgba(212,175,55,.35), 0 0 34px rgba(212,175,55,.42), 0 18px 48px rgba(0,0,0,.66)}
}
.karte.top{box-shadow:inset 0 0 0 2px rgba(212,175,55,.75)}
.karte.top::before{content:"HIER ZOCK ICH";position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--schwarz);
  background:linear-gradient(135deg,#a3801f 0%,#d4af37 26%,#f7e6a6 50%,#d4af37 74%,#a3801f 100%);
  padding:8px 20px;white-space:nowrap;
  box-shadow:0 4px 16px rgba(212,175,55,.34), inset 0 1px 0 rgba(255,255,255,.45)}

.k-kopf{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
/* Groesser (Quelle ist 240x120, bleibt also scharf) und mit Tiefe:
   Schatten nach unten, heller Saum nach oben. */
.k-logo{width:124px;height:62px;flex:none;background-size:contain;background-repeat:no-repeat;
  background-position:left center;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.75)) drop-shadow(0 1px 0 rgba(255,255,255,.35));
  transition:transform .25s ease, filter .25s ease}
.karte:hover .k-logo{transform:translateY(-2px) scale(1.03);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.8)) drop-shadow(0 1px 0 rgba(255,255,255,.5))}
.k-typ{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.16em;padding:5px 10px;
  color:var(--gold);box-shadow:inset 0 0 0 1px rgba(212,175,55,.42);white-space:nowrap}
/* wagerfrei ist das staerkste Verkaufsargument - darf groesser sein als die anderen Typen */
.k-typ.frei{font-size:11px;letter-spacing:.14em;padding:6px 12px;
  color:var(--schwarz);background:var(--gold);box-shadow:none}

/* Die Bonuszahl ist das Schaufenster der Karte - sie bekommt Tiefe wie
   eine gravierte Tafel, dahinter ein leiser Lichtschein. */
.k-zahlblock{position:relative;padding:4px 0 2px}
.k-zahlblock::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:190px;height:120px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(212,175,55,.16),transparent 72%)}
.k-zahl{display:flex;align-items:baseline;gap:9px;line-height:.86;position:relative}
.k-zahl b{font-size:66px;letter-spacing:-.045em;color:var(--gold);
  text-shadow:0 3px 0 rgba(0,0,0,.55), 0 -1px 0 rgba(247,230,166,.45), 0 10px 26px rgba(212,175,55,.2)}
.k-zahl i{font-style:normal;font-size:26px;font-weight:700;color:var(--gold-hell);
  text-shadow:0 2px 0 rgba(0,0,0,.45)}
/* Gehoert zur Zahl - also dieselbe Behandlung, nur eine Stufe kleiner.
   Kein Kaestchen, das den Zusammenhang zerschneidet. */
.k-unter{margin-top:6px;font-size:22px;font-weight:700;letter-spacing:-.02em;
  color:var(--gold-hell);line-height:1.1;
  text-shadow:0 2px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(247,230,166,.3)}

/* Die harten Fakten sind das, wonach verglichen wird - eigener Block mit
   Goldkante statt kleiner grauer Zeile. */
/* drei getrennte Kacheln statt einem geteilten Kasten */
.k-fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.k-fakten>div{text-align:center;position:relative;padding:12px 6px;min-width:0;
  border-radius:12px;background:rgba(212,175,55,.06);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.24);transition:box-shadow .2s ease}
.karte:hover .k-fakten>div{box-shadow:inset 0 0 0 1px rgba(212,175,55,.4)}
.k-fakten span{display:block;font-size:9.5px;letter-spacing:.14em;color:var(--grau);
  font-weight:700;margin-bottom:6px}
.k-fakten b{font-size:19px;color:var(--creme);letter-spacing:-.01em;
  display:block;overflow:hidden;text-overflow:ellipsis}
/* Darf umbrechen statt abgeschnitten zu werden - bei vier Spalten ist die
   Kachel zu schmal fuer "Non-Sticky" in einer Zeile. */
.k-typwert{font-size:13.5px!important;white-space:normal;line-height:1.2;
  overflow:visible!important;text-overflow:clip!important}
.gut{color:var(--gold)}

/* Verlauf statt flachem Gold: dunkles Altgold in den Ecken, Champagner in der
   Mitte - der Knopf bekommt Woelbung und tritt aus der Karte heraus. */
.k-cta{display:block;text-align:center;margin-top:auto;padding:16px;font-weight:700;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--schwarz);
  background:linear-gradient(135deg,#a3801f 0%,#d4af37 26%,#f7e6a6 50%,#d4af37 74%,#a3801f 100%);
  box-shadow:0 6px 20px rgba(212,175,55,.2), inset 0 1px 0 rgba(255,255,255,.4);
  transition:.18s;position:relative;overflow:hidden}
.karte:hover .k-cta{box-shadow:0 10px 28px rgba(212,175,55,.34), inset 0 1px 0 rgba(255,255,255,.55)}
.k-cta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-130%);transition:transform .7s}
.karte:hover .k-cta::after{transform:translateX(130%)}
/* vorher #6f6450 auf dunklem Grund - praktisch unsichtbar */
.k-mehr{display:flex;align-items:center;justify-content:center;gap:7px;
  text-align:center;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau);padding:4px 0;transition:color .16s}
.k-mehr:hover{color:var(--gold)}
.k-mehr::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .22s}
.k-mehr.auf::after{transform:rotate(225deg) translate(-2px,-2px)}
.k-det{display:none;font-size:13px;color:var(--grau);line-height:1.6}
.k-det.on{display:block}
.d-titel{font-size:9.5px;font-weight:700;letter-spacing:.18em;color:var(--gold);
  margin:0 0 9px;text-transform:uppercase}
.d-titel+.d-titel,.d-block+.d-block{margin-top:16px}
/* Einzahlungs-Staffel */
.d-stufe{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;
  padding:8px 11px;border-radius:10px;background:rgba(212,175,55,.05);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.16);margin-bottom:6px}
.d-nr{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--grau);white-space:nowrap}
.d-wert{font-size:14px;font-weight:700;color:var(--creme)}
.d-fs{font-size:11px;color:var(--grau);white-space:nowrap}
.d-code{display:inline-block;margin-left:6px;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  color:var(--gold);padding:2px 7px;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.4)}
.d-zusatz{grid-column:1/-1;font-size:10.5px;color:#6f6450;margin-top:2px}
/* Eckdaten als Paare */
.d-liste{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px}
.d-liste dt{color:#6f6450;font-weight:700;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding-top:2px}
.d-liste dd{margin:0;color:var(--creme)}
.d-text{font-size:12.5px;color:var(--grau);line-height:1.65}
/* Zahlungsmethoden als Icon-Reihe */
.d-pay{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.d-pay .chip{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 9px;
  border-radius:8px;background:rgba(245,236,216,.07);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.2)}
.d-pay .chip svg{width:16px;height:16px;fill:var(--creme);flex:none}
/* Marken ohne freies Icon: Name als Chip, damit die Liste vollstaendig bleibt */
.d-pay .chip b{font-size:10.5px;font-weight:600;color:var(--creme);white-space:nowrap}
.d-pay .chip.nurtext b{font-size:11px}
.d-payzeile{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:start;margin-bottom:10px}
.d-payzeile>span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#6f6450;padding-top:8px;white-space:nowrap}

/* Offene Punkte sichtbar machen statt verschweigen */
.d-luecke{padding:10px 12px;border-radius:10px;font-size:12px;color:#d8c9a4;
  background:rgba(139,14,31,.18);box-shadow:inset 0 0 0 1px rgba(139,14,31,.5)}
.d-luecke b{display:block;color:var(--creme);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:4px}
.d-quelle{margin-top:14px;font-size:10px;color:#5e5443;letter-spacing:.04em}

/* ---------- Rangliste ---------- */
/* Rangliste bewusst schmaler als die Karten - eine Tabelle ueber die
   volle Breite zieht Rang und Betrag zu weit auseinander. */
.rang{max-width:980px;margin:0 auto;padding:0 26px 80px}
.rang-kasten{position:relative;padding:34px 30px 30px;background:var(--tief);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.28)}
/* gleiche Eckwinkel wie im Hero-Rahmen - haelt die Handschrift zusammen */
.rang-kasten::before,.rang-kasten::after{content:"";position:absolute;width:26px;height:26px;
  border:2px solid var(--gold)}
.rang-kasten::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.rang-kasten::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.rang-band{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  font-size:9px;font-weight:700;letter-spacing:.2em;color:var(--creme);
  background:var(--rot);padding:5px 14px;white-space:nowrap}
.rang-kopf{text-align:center;margin-bottom:8px}
.rang-kopf .ueber{margin-bottom:14px}
.rang-kopf h2{font-size:clamp(24px,5vw,38px);color:var(--creme);text-transform:uppercase}
.rang-eck{display:flex;justify-content:center;flex-wrap:wrap;margin:24px 0 6px}
.rang-eck div{padding:0 24px;position:relative;text-align:center}
.rang-eck div+div::before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;
  background:rgba(212,175,55,.3)}
.rang-eck b{display:block;font-size:22px;line-height:1.2;color:var(--creme);
  font-variant-numeric:tabular-nums}
.rang-eck span{font-size:9.5px;letter-spacing:.2em;color:var(--grau);font-weight:700}

.rl-titel{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
  padding:0 14px 10px;margin-top:22px;
  font-size:9px;font-weight:700;letter-spacing:.18em;color:#6f6450;
  border-bottom:1px solid rgba(212,175,55,.2)}
.rl-titel span:last-child{text-align:right}
.rl-zeile{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
  padding:13px 14px;border-bottom:1px solid rgba(212,175,55,.1);transition:background .16s}
.rl-zeile:last-child{border-bottom:0}
.rl-zeile:hover{background:rgba(212,175,55,.05)}
.rl-rang{font-size:15px;font-weight:700;color:var(--grau);font-variant-numeric:tabular-nums}
.rl-podest .rl-rang{color:var(--gold);font-size:19px}
/* Raute hinter den ersten drei Raengen - Deco statt Pokal-Emoji */
.rl-podest .rl-rang{position:relative;display:inline-grid;place-items:center;
  width:30px;height:30px}
.rl-podest .rl-rang::before{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px var(--gold);transform:rotate(45deg)}
.rl-name{font-size:14.5px;color:var(--creme);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-podest .rl-name{font-weight:700}
.rl-wert{font-size:14.5px;font-weight:700;color:var(--creme);text-align:right}
.rang-fuss{margin-top:18px;font-size:12px;color:#6f6450;line-height:1.7;text-align:center}

@media(max-width:640px){
  .rang{padding:0 16px 70px}
  .rang-kasten{padding:30px 16px 24px}
  .rl-titel,.rl-zeile{grid-template-columns:38px 1fr auto;gap:8px;padding-left:6px;padding-right:6px}
  /* 2x2 statt Umbruch in einer Reihe - sonst stehen die Trennstriche verloren herum */
  .rang-eck{display:grid;grid-template-columns:1fr 1fr;gap:20px 0}
  .rang-eck div{padding:0}
  .rang-eck div+div::before{display:none}
  .rang-eck b{font-size:19px}
}

/* ---------- Fuß ---------- */
.fuss{text-align:center;padding:36px 26px 80px;color:#6f6450;font-size:12.5px;line-height:1.9;
  border-top:1px solid rgba(212,175,55,.2)}
.fuss a{color:var(--grau);text-decoration:underline}
/* volles Logo (MNM + bonus.com) im Fuss */
.fuss .dom{display:block;width:210px;height:76px;margin:0 auto 16px;
  background:linear-gradient(155deg,#ffffff 0%,#f6f4ef 42%,#dedad2 100%);
  -webkit-mask:url(../logos/mnm-logo-2609.png?v=20260921o) center/contain no-repeat;
  mask:url(../logos/mnm-logo-2609.png?v=20260921o) center/contain no-repeat;font-size:0;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.6))}
.socials{display:flex;gap:10px;justify-content:center;margin:0 0 18px}
.socials a{display:grid;place-items:center;width:38px;height:38px;color:var(--grau);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.26);transition:.16s}
.socials a:hover{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);transform:translateY(-2px)}
.socials svg{width:19px;height:19px}
.tw{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-decoration:none;transition:.16s;margin-left:auto}
.tw .pkt{width:7px;height:7px;border-radius:50%;background:currentColor}
.tw.live{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.tw.live .pkt{animation:gluehen 1.6s ease-in-out infinite;box-shadow:0 0 10px currentColor}
.tw.offline{color:var(--grau);box-shadow:inset 0 0 0 1px rgba(212,175,55,.26)}
.tw small{font-weight:600;opacity:.75}
/* ---------- Feste Leiste unten (Handy/Tablet) ----------
   Rangliste und Shop sollen ohne Scrollen
   erreichbar sein. Am Desktop nicht noetig - dort ist alles sichtbar. */
/* ---------- Menue im Kopf (ab Tablet/Desktop) ----------
   Dieselben Punkte wie die feste Leiste unten, nur oben ausgeklappt -
   unten wird sie ab 1181 px ausgeblendet. */
.kopfmenue{display:flex;align-items:center;gap:4px;margin-left:22px}
.kopfmenue a,.kopfmenue span{display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:var(--grau);white-space:nowrap;transition:.2s}
.kopfmenue a:hover{color:var(--creme);background:rgba(212,175,55,.1)}
.kopfmenue a.an{color:var(--gold);box-shadow:inset 0 0 0 1px rgba(212,175,55,.4)}
.kopfmenue svg{width:16px;height:16px;flex:none}
.kopfmenue .soon{color:#5e5443;cursor:default}
.kopf .tw{margin-left:auto}
@media(max-width:1180px){
  .kopfmenue{display:none}
}

.unterleiste{display:none}
@media(max-width:1180px){
  .unterleiste{position:fixed;left:0;right:0;bottom:0;z-index:70;
    /* Spaltenzahl richtet sich nach der Zahl der Punkte (aktuell 5) - nie umbrechen */
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    background:rgba(10,7,5,.96);backdrop-filter:blur(14px);
    border-top:1px solid rgba(212,175,55,.26);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .unterleiste a,.unterleiste span{display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:5px;padding:9px 3px 8px;min-height:58px;
    font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--grau);text-align:center;line-height:1.15}
  .unterleiste svg{width:20px;height:20px;flex:none}
  .unterleiste a:active{background:rgba(212,175,55,.1)}
  .unterleiste a.an{color:var(--gold)}
  .unterleiste .soon{color:#5e5443}
  .unterleiste .tw-unten{color:#a970ff}
  /* Platz schaffen, damit die Leiste nichts verdeckt */
  body{padding-bottom:70px}
  .zurueck{bottom:78px}
}

/* Vorschau-Hilfe, kein Teil der Seite: klein und zurueckhaltend, damit
   sie keinen Kartentext verdeckt. Beim Live-Gang faellt sie ganz weg. */
.zurueck{position:fixed;left:10px;bottom:10px;z-index:40;font-size:9px;font-weight:700;opacity:.4;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;color:var(--schwarz);background:var(--gold);
  transition:opacity .16s}
.zurueck:hover{opacity:1}

@media(max-width:640px){
  .hero{padding:30px 16px 30px}
  /* gleiches Seitenmass wie Karten und Rangliste, sonst steht die
     Filterbox 10 px weiter innen als alles darunter */
  .suchblock{padding:24px 16px 0}
  .rahmen{padding:32px 16px 28px}
  /* padding-top MUSS bleiben - sonst stoesst das Band "HIER ZOCK ICH"
     wieder in die Filterbox (genau das war der Fehler). */
  .liste{padding:34px 16px 90px;gap:14px}
  .kopf{padding:14px 16px}
  .k-zahl b{font-size:48px}
  .filter{padding:26px 16px}
  .lichter{gap:10px}
  /* die drei Kennzahlen bleiben in EINER Reihe - sonst haengt der
     Trennstrich der umgebrochenen Zahl frei in der Luft */
  .stats{flex-wrap:nowrap}
  .stat{padding:0 12px}
  .stat b{font-size:21px}
  .stat span{font-size:8px;letter-spacing:.12em}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .karte{opacity:1!important;translate:none!important}
}


/* ---------- Unterseiten (Leaderboard, Shop) ---------- */
/* Das Logo im Kopf ist jetzt ein Link zurueck zur Startseite. */
.marke{display:block;cursor:pointer}
.fuss .dom{cursor:pointer}

.sobald{max-width:720px;margin:0 auto;padding:36px 30px 40px;border-radius:20px;
  background:rgba(20,13,9,.55);box-shadow:inset 0 0 0 1px rgba(212,175,55,.2);
  text-align:center}
.sobald h3{font-size:19px;color:var(--creme);margin-bottom:20px}
.sobald ol{display:inline-block;text-align:left;margin:0;padding:0 0 0 22px;
  color:var(--grau);font-size:14.5px;line-height:1.9}
.sobald ol li::marker{color:var(--gold);font-weight:700}
.sobald .klein{margin:22px 0 0;font-size:12.5px;color:#6f6450;line-height:1.7}
.zurueck-knopf{display:inline-block;margin-top:24px;padding:14px 26px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--schwarz);border-radius:999px;
  background:linear-gradient(135deg,#a3801f,#d4af37 26%,#f7e6a6 50%,#d4af37 74%,#a3801f);
  box-shadow:0 6px 20px rgba(212,175,55,.24), inset 0 1px 0 rgba(255,255,255,.4);
  transition:.2s}
.zurueck-knopf:hover{box-shadow:0 10px 28px rgba(212,175,55,.34), inset 0 1px 0 rgba(255,255,255,.55)}

/* Auf den Unterseiten steht die Rangliste allein - etwas mehr Luft oben */
body[data-seite="leaderboard"] .rang,
body[data-seite="shop"] .rang{padding-top:10px}

@media(max-width:640px){
  .sobald{padding:28px 18px 30px;border-radius:16px}
}

/* ---------- Wandernde Lichter am Rahmen ----------
   Zwei Lichtpunkte laufen um den Art-deco-Rahmen, wie die Gluehbirnen an
   einer Marquee-Tafel. Zwei Ebenen uebereinander:
   .lauf        = die scharfe Linie auf der Rahmenkante
   .lauf.schein = dieselbe Bewegung, unscharf und breiter -> der Glow.
   Ohne die zweite Ebene verschluckt die 2 px schmale Kante das Licht.
   Technik: rotierender Kegel-Verlauf, von dem eine Maske nur den Rand
   freigibt - dadurch wandert das Licht die Kante entlang.
   Eingesetzt von rahmen.js, damit keine Seite HTML nachziehen muss. */
.rahmen{isolation:isolate}
.lauf{position:absolute;inset:0;pointer-events:none;z-index:0;padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  overflow:hidden}
.lauf.schein{inset:-7px;padding:9px;filter:blur(7px);opacity:.9;z-index:-1}

.lauf::before,.lauf::after{content:"";position:absolute;
  top:50%;left:50%;width:150%;aspect-ratio:1;translate:-50% -50%;
  background:conic-gradient(from 0deg,
    transparent 0 45.5%,
    rgba(212,175,55,.55) 47.8%,
    rgba(255,250,235,1) 50%,
    rgba(212,175,55,.55) 52.2%,
    transparent 54.5%);
  animation:umlauf 8s linear infinite}
/* zweites Licht auf der Gegenseite */
.lauf::after{animation-delay:-4s}

@keyframes umlauf{to{rotate:1turn}}

@media(prefers-reduced-motion:reduce){
  .lauf::before,.lauf::after{animation:none}
}

/* ---------- Shop: Praemien-Gitter ---------- */
.shop-gitter{max-width:var(--raster);margin:0 auto;padding:10px 26px 56px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.shop-karte{background:var(--tief);border-radius:16px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.22);
  display:flex;flex-direction:column;text-align:center;
  opacity:0;translate:0 22px;transition:opacity .5s ease, translate .5s ease, box-shadow .2s}
.shop-karte.da{opacity:1;translate:none}
.shop-karte{position:relative}
/* Bestands-Schild: echte Stueckzahl, bei 1 in Rot. Steht unter dem Preis
   (order), nicht im Bild - dort verdeckte es das MNM-Logo. */
.shop-bestand{order:3;align-self:center;margin:0 0 14px;padding:5px 12px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#140d09;
  background:linear-gradient(135deg,#d4af37,#f4dd8f)}
.shop-knopf{order:4}
.shop-karte .shop-preis{margin-bottom:10px}
.shop-bestand.knapp{color:#fff;background:linear-gradient(135deg,#8b0e1f,#c4162f)}
.shop-karte:hover{box-shadow:inset 0 0 0 1px rgba(212,175,55,.45), 0 18px 44px rgba(0,0,0,.6)}
.shop-karte img{display:block;width:100%;height:auto;aspect-ratio:1}
.shop-karte h3{font-size:15.5px;color:var(--creme);margin:16px 14px 6px;line-height:1.3}
.shop-preis{margin:0 14px;font-size:12px;letter-spacing:.06em;color:var(--grau)}
.shop-preis b{font-size:19px;letter-spacing:0;color:var(--gold);font-variant-numeric:tabular-nums}
.shop-knopf{margin:16px 14px 18px;padding:11px 10px;border-radius:12px;font-size:12.5px;font-weight:600;
  color:#6f6450;box-shadow:inset 0 0 0 1px rgba(212,175,55,.2);cursor:default;margin-top:auto}
.shop-karte .shop-preis{margin-bottom:16px}
@media(max-width:560px){
  .shop-gitter{grid-template-columns:repeat(2,1fr);gap:12px;padding:6px 14px 44px}
  .shop-karte h3{font-size:13.5px;margin:12px 8px 4px}
  .shop-preis{margin:0 6px;font-size:10.5px;letter-spacing:.02em;white-space:nowrap}
  .shop-preis b{font-size:15.5px}
  .shop-knopf{margin:0 8px 12px;font-size:11.5px;padding:9px 6px}
  .shop-bestand{margin:0 0 10px;padding:4px 9px;font-size:9.5px}
}

/* Zusatz unter dem Bonustext (z.B. 24 Casino: 50 FS ohne Einzahlung).
   Bewusst leiser als .k-unter - es ist die Draufgabe, nicht das Angebot. */
.k-zusatz{margin-top:5px;font-size:13px;font-weight:600;letter-spacing:.01em;
  color:var(--creme);opacity:.88;line-height:1.3}
@media(max-width:520px){.k-zusatz{font-size:12px}}

/* ---------- MNM Coins: Konto im Kopf, Shop-Knoepfe, Dialog (coins.js) ---------- */
.konto{position:relative;display:flex;align-items:center;margin-left:4px}
.konto-login{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700;
  color:#140d09;background:linear-gradient(135deg,#d4af37,#f4dd8f);white-space:nowrap;transition:.2s}
.konto-login:hover{box-shadow:0 6px 20px rgba(212,175,55,.35)}
.konto-knopf{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;color:var(--creme);background:var(--tief);box-shadow:inset 0 0 0 1px rgba(212,175,55,.35)}
.konto-knopf img{width:26px;height:26px;border-radius:50%;display:block}
.konto-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.konto-coins{color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.konto-coins::after{content:" Coins";font-weight:600;color:var(--grau);font-size:10.5px}
.konto-menue{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;padding:6px;border-radius:14px;z-index:30;
  background:#1a110b;box-shadow:inset 0 0 0 1px rgba(212,175,55,.3), 0 18px 44px rgba(0,0,0,.7)}
.konto-menue a,.konto-menue button{display:block;width:100%;padding:10px 12px;border:0;border-radius:9px;text-align:left;cursor:pointer;
  font:inherit;font-size:13px;color:var(--creme);background:transparent}
.konto-menue a:hover,.konto-menue button:hover{background:rgba(212,175,55,.12);color:var(--gold)}
.shop-knopf.aktiv{cursor:pointer;color:var(--gold);box-shadow:inset 0 0 0 1px rgba(212,175,55,.55);border:0;font-family:inherit;background:transparent;transition:.2s}
.shop-knopf.aktiv:hover{background:rgba(212,175,55,.12)}
.shop-knopf.gold{color:#140d09;background:linear-gradient(135deg,#d4af37,#f4dd8f);box-shadow:none;font-weight:700}
.shop-knopf.gold:hover{background:linear-gradient(135deg,#d4af37,#f4dd8f);box-shadow:0 8px 24px rgba(212,175,55,.35)}
.shop-knopf:disabled{opacity:.55;cursor:default}
.shop-dialog{max-width:min(420px,calc(100vw - 32px));padding:28px 24px 22px;border:0;border-radius:20px;text-align:center;
  color:var(--creme);background:#1a110b;box-shadow:inset 0 0 0 1px rgba(212,175,55,.4), 0 30px 80px rgba(0,0,0,.8)}
.shop-dialog::backdrop{background:rgba(5,3,2,.78);backdrop-filter:blur(4px)}
.shop-dialog h3{font-size:20px;margin:0 0 14px}
.shop-dialog p{margin:0 0 12px;font-size:14.5px;line-height:1.6}
.shop-dialog p b{color:var(--gold)}
.shop-dialog .klein{font-size:12.5px;color:var(--grau)}
.dialog-knoepfe{display:flex;gap:10px;margin-top:20px}
.dialog-knoepfe .shop-knopf{flex:1;margin:0;padding:12px 10px;font-size:13.5px;order:0}
@media(max-width:560px){
  .konto-name{display:none}
  .konto-coins::after{content:""}
  .konto-knopf:not(:has(img)){padding-left:12px}
  .konto-login{padding:7px 11px;font-size:11px}
  .konto-knopf{padding:4px 10px 4px 4px}
}

/* ---------- Reiter im Leaderboard, Coin-Rangliste, Meine Coins (coins.js) ---------- */
.reiter{display:flex;justify-content:center;gap:8px;margin:0 auto 26px;padding:0 26px}
.reiter button{padding:11px 22px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;
  color:var(--grau);background:var(--tief);box-shadow:inset 0 0 0 1px rgba(212,175,55,.25);transition:.2s}
.reiter button:hover{color:var(--creme)}
.reiter button.an{color:#140d09;background:linear-gradient(135deg,#d4af37,#f4dd8f);box-shadow:none}
.coin-zeile{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
  box-shadow:inset 0 -1px 0 rgba(212,175,55,.1)}
.coin-zeile .rl-rang{font-weight:700;color:var(--grau);font-variant-numeric:tabular-nums}
.coin-zeile.top1 .rl-rang,.coin-zeile.top2 .rl-rang,.coin-zeile.top3 .rl-rang{color:var(--gold)}
.coin-wer{display:flex;align-items:center;gap:10px;min-width:0;font-weight:600;color:var(--creme)}
.coin-wer span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coin-wer img,.coin-ohne{width:28px;height:28px;border-radius:50%;flex:none}
.coin-ohne{display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;color:var(--gold);background:#241a12}
.coin-wer em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.12em;padding:3px 7px;border-radius:999px;color:#140d09;background:var(--gold);flex:none}
.coin-zahl{color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.coin-zeile.ich{background:rgba(212,175,55,.1);box-shadow:inset 0 0 0 1px rgba(212,175,55,.55)}
.coin-luecke{text-align:center;color:var(--grau);padding:4px 0;letter-spacing:.3em}
.coin-leer{text-align:center;color:var(--grau);font-size:13.5px;padding:22px 10px;margin:0}
.rang-fuss a{color:var(--gold)}
.mc-kasten{max-width:720px;margin:0 auto 22px;padding:26px 24px;border-radius:20px;background:var(--tief);box-shadow:inset 0 0 0 1px rgba(212,175,55,.22)}
.mc-kasten h3{font-size:17px;color:var(--creme);margin:0 0 14px}
.mc-kasten .klein{margin:16px 0 0;font-size:12px;color:#6f6450;line-height:1.6}
.mc-zeile{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;box-shadow:inset 0 -1px 0 rgba(212,175,55,.1)}
.mc-zeile b{display:block;color:var(--creme);font-size:14.5px}
.mc-zeile small{color:var(--grau);font-size:12px}
.mc-status{flex:none;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.mc-status.offen{color:#140d09;background:linear-gradient(135deg,#d4af37,#f4dd8f)}
.mc-status.erledigt{color:#9fe3b0;box-shadow:inset 0 0 0 1px rgba(120,210,150,.5)}
.mc-status.abgelehnt{color:#f0a3ad;box-shadow:inset 0 0 0 1px rgba(196,22,47,.6)}
.mc-betrag{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.mc-betrag.plus{color:#9fe3b0}.mc-betrag.minus{color:#f0a3ad}
@media(max-width:560px){
  .reiter{padding:0 14px;margin-bottom:18px}.reiter button{flex:1;padding:11px 8px}
  .coin-zeile{grid-template-columns:44px 1fr auto;padding:10px 8px;gap:8px}
  .mc-kasten{padding:20px 16px;border-radius:16px}
  .mc-zeile{flex-wrap:wrap;gap:6px}
}

/* ---------- Admin-Arbeitsplatz (admin.html / admin.js) ---------- */
.hero-klein .rahmen{padding-top:34px;padding-bottom:30px}
.hero-klein h1{font-size:clamp(26px,5vw,40px)}
.ad{max-width:1020px}
.ad-warnung{max-width:720px;margin:0 auto 10px;padding:13px 16px;border-radius:12px;font-size:13.5px;font-weight:600;line-height:1.5;
  color:#ffd7dc;background:rgba(139,14,31,.28);box-shadow:inset 0 0 0 1px rgba(196,22,47,.7)}
.ad-zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:720px;margin:18px auto 22px}
.ad-zahlen div{padding:16px 8px;border-radius:14px;text-align:center;background:var(--tief);box-shadow:inset 0 0 0 1px rgba(212,175,55,.22)}
.ad-zahlen b{display:block;font-size:22px;color:var(--gold);font-variant-numeric:tabular-nums}
.ad-zahlen span{font-size:8.5px;letter-spacing:.16em;color:var(--grau);font-weight:700}
.ad-kasten h4{font-size:12px;letter-spacing:.14em;color:var(--grau);margin:26px 0 4px;text-transform:uppercase}
.ad-kasten .ad-oben{margin:-6px 0 16px}
.ad-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.ad-kopf h3{margin:0}
.ad-umschalter{display:flex;gap:4px}
.ad-umschalter button,.ad-knopf{padding:8px 13px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-size:12px;font-weight:700;
  color:var(--grau);background:transparent;box-shadow:inset 0 0 0 1px rgba(212,175,55,.3);transition:.2s;white-space:nowrap}
.ad-umschalter button.an{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.ad-knopf{color:var(--creme)}.ad-knopf:hover{box-shadow:inset 0 0 0 1px var(--gold)}
.ad-knopf.gold{color:#140d09;background:linear-gradient(135deg,#d4af37,#f4dd8f);box-shadow:none}
.ad-knopf.rot{color:#f0a3ad;box-shadow:inset 0 0 0 1px rgba(196,22,47,.6)}
.ad-zeile{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;box-shadow:inset 0 -1px 0 rgba(212,175,55,.1)}
.ad-zeile.schmal{padding:9px 0}.ad-zeile.blass{opacity:.55}
.ad-links{min-width:0}.ad-links b{display:block;color:var(--creme);font-size:14.5px}
.ad-links small,.ad-rechts small{display:block;color:var(--grau);font-size:12px;line-height:1.55;overflow-wrap:anywhere}
small.ad-ok{color:#9fe3b0}small.ad-rot{color:#f0a3ad;font-weight:600}
.ad-rechts{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;flex:none;max-width:330px}
.ad-rechts small{flex-basis:100%;text-align:right}
.ad input:not([type=checkbox]){width:100%;padding:10px 12px;border:0;border-radius:10px;font:inherit;font-size:13.5px;color:var(--creme);
  background:#0e0906;box-shadow:inset 0 0 0 1px rgba(212,175,55,.25)}
.ad input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--gold)}
.ad-rechts input{flex-basis:100%}
.ad-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ad-form label{display:grid;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--grau)}
.ad-form .breit,.ad-form .ad-vorschau,.ad-form button{grid-column:1/-1}
.ad-form button{margin:0;padding:13px;font-size:14px;order:0}
.ad-vorschau{min-height:20px;padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.5;color:var(--creme);background:#0e0906}
.ad-vorschau:empty{display:none}
.ad-vorschau.rot{color:#f0a3ad}.ad-vorschau.gruen{color:#9fe3b0}
.ad-vorschau.gelb{color:#f4dd8f;box-shadow:inset 0 0 0 1px rgba(244,221,143,.6)}
.ad-pz{display:grid;grid-template-columns:1.6fr 1fr .7fr .5fr auto;align-items:center;gap:10px;padding:9px 0;box-shadow:inset 0 -1px 0 rgba(212,175,55,.1)}
.ad-pz.kopf span{font-size:9px;letter-spacing:.14em;font-weight:700;color:var(--grau)}
.ad-pz b{font-size:13.5px;color:var(--creme)}
.ad-pz input[type=checkbox]{width:18px;height:18px;accent-color:#d4af37}
@media(max-width:640px){
  .ad-zahlen{grid-template-columns:1fr 1fr}
  .ad-zeile{flex-direction:column;align-items:stretch}
  .ad-rechts{max-width:none;justify-content:flex-start}.ad-rechts small{text-align:left}
  .ad-form{grid-template-columns:1fr}
  .ad-pz{grid-template-columns:1fr 1fr auto;row-gap:6px}
  .ad-pz b{grid-column:1/-1}.ad-pz.kopf{display:none}
}

/* ---------- Twitch-Login-Knoepfe: Twitch-Lila + Twitch-Zeichen (ueberschreibt das Gold der Knoepfe) ---------- */
.twitch-knopf,.zurueck-knopf.twitch-knopf{display:inline-flex;align-items:center;gap:8px;color:#fff;background:#9146ff;box-shadow:none}
.twitch-knopf:hover,.zurueck-knopf.twitch-knopf:hover{background:#772ce8;box-shadow:0 8px 24px rgba(145,70,255,.45)}
.twitch-knopf svg{width:16px;height:16px;flex:none}
.zurueck-knopf.twitch-knopf svg{width:18px;height:18px}
@media(max-width:560px){ .konto-login.twitch-knopf{gap:6px} .konto-login.twitch-knopf svg{width:14px;height:14px} }

/* ---------- Dashboard: Ziel-Balken, Wege zu Coins, FAQ (meine-coins.html) ---------- */
.mc-platz{margin-top:10px!important;font-size:14px!important;font-weight:600!important;color:var(--grau)!important}
.mc-platz b{color:var(--gold)}.mc-platz a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.mc-ziel{text-align:center}
.mc-ziel-kopf{display:grid;gap:8px;margin-bottom:18px}
.mc-ziel-kopf .ueber{margin:0}
.mc-ziel-kopf b{font-size:clamp(20px,4vw,26px);color:var(--creme)}
.mc-balken{height:14px;border-radius:999px;background:#0e0906;box-shadow:inset 0 0 0 1px rgba(212,175,55,.25);overflow:hidden}
.mc-balken i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#a3801f,#d4af37 55%,#f4dd8f);
  box-shadow:0 0 14px rgba(212,175,55,.55);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.mc-ziel-text{margin:14px 0 0;font-size:13.5px;line-height:1.65;color:var(--grau)}
.mc-breit{max-width:980px;margin:0 auto}
.mc-h2{font-size:clamp(22px,4.4vw,32px);color:var(--creme);text-align:center;text-transform:uppercase;line-height:1.15;margin:0 0 10px}
.mc-unter{text-align:center;color:var(--grau);font-size:14px;margin:0 0 26px}
.mc-wege{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.mc-weg{position:relative;padding:26px 24px 22px;border-radius:18px;background:var(--tief);box-shadow:inset 0 0 0 1px rgba(212,175,55,.22)}
.mc-weg.top{box-shadow:inset 0 0 0 2px rgba(212,175,55,.7)}
.mc-nr{position:absolute;top:-13px;left:22px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  font-size:13px;font-weight:700;color:#140d09;background:linear-gradient(135deg,#d4af37,#f4dd8f)}
.mc-weg h3{font-size:17px;color:var(--creme);margin:0 0 6px}
.mc-wert{display:block;font-size:15px;color:var(--gold);margin-bottom:12px}
.mc-weg p{margin:0 0 10px;font-size:13.5px;line-height:1.65;color:#cdbf9f}
.mc-weg p b{color:var(--creme)}
.mc-weg .mc-so{color:var(--grau)}
.mc-weg .mc-hinweis{margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:12.5px;color:#f4dd8f;background:rgba(212,175,55,.08)}
.faq{max-width:760px;margin:24px auto 0;display:grid;gap:10px}
.faq details{border-radius:14px;background:var(--tief);box-shadow:inset 0 0 0 1px rgba(212,175,55,.22);transition:box-shadow .2s}
.faq details[open]{box-shadow:inset 0 0 0 1px rgba(212,175,55,.6)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;cursor:pointer;list-style:none;
  font-size:15px;font-weight:600;color:var(--creme)}
.faq summary::-webkit-details-marker{display:none}
/* Pfeil nach unten, dreht sich beim Oeffnen nach oben */
.faq summary::after{content:"";flex:none;width:9px;height:9px;margin-top:-4px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .25s ease, margin .25s ease}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq summary:hover{color:var(--gold)}
.faq summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:14px}
.faq details p{margin:0;padding:0 20px 19px;font-size:14px;line-height:1.7;color:#cdbf9f}
.faq details p b{color:var(--creme)}.faq a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.mc-fuss{text-align:center;margin:26px 0 0;font-size:12px;color:#6f6450}
@media(max-width:700px){
  .mc-wege{grid-template-columns:1fr;gap:20px}
  .mc-weg{padding:24px 18px 18px}
  .faq summary{padding:15px 16px;font-size:14px}.faq details p{padding:0 16px 16px;font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){ .mc-balken i,.faq summary::after{transition:none} }
.mc-kombi{max-width:680px;margin:26px auto 0;text-align:center;font-size:15px;font-weight:600;line-height:1.6;color:var(--creme)}

/* ---------- Instagram-Knopf ueberall dort, wo „schick mir eine DM" steht (oeffnet direkt den Chat) ---------- */
.insta-knopf{display:inline-flex;align-items:center;gap:9px;margin:4px 0 2px;padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:700;
  color:#fff;text-decoration:none!important;background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);transition:.2s}
.insta-knopf:hover{filter:brightness(1.1);box-shadow:0 8px 24px rgba(220,39,67,.4)}
.insta-knopf svg{width:18px;height:18px;flex:none}
.insta-knopf.twitch{background:#9146ff}.insta-knopf.twitch:hover{background:#772ce8;filter:none;box-shadow:0 8px 24px rgba(145,70,255,.45)}
.mc-schritte{margin:0 0 12px;padding-left:20px;font-size:13.5px;line-height:1.7;color:#cdbf9f}
.mc-schritte li::marker{color:var(--gold);font-weight:700}
.faq details p + p{padding-top:0;margin-top:-6px}
@media(max-width:700px){ .insta-knopf{display:flex;justify-content:center} }

/* `hidden` muss IMMER gewinnen. Ohne diese Regel ueberstimmt jedes eigene display (flex/grid) das Attribut —
   so waren die Leaderboard-Reiter auf Adressen ohne Coin-App sichtbar, aber ohne Funktion. */
[hidden]{display:none!important}

/* ---------- Untere Leiste: Login / Dashboard ganz rechts (coins.js) ---------- */
@media(max-width:1180px){
  .unterleiste .konto-unten.login{color:#fff;background:#9146ff}
  .unterleiste .konto-unten.login:active{background:#772ce8}
  .unterleiste .konto-unten.drin{color:var(--gold);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums}
  .unterleiste .konto-unten img,.unterleiste .konto-unten .coin-ohne{width:22px;height:22px;border-radius:50%;flex:none;font-size:10px}
  /* oben reicht am Handy dann der kompakte Knopf: nur das Zeichen, der Text steht unten */
  .konto-login.twitch-knopf span{display:none}
  .konto-login.twitch-knopf{padding:8px 10px}
}