/* Design-System FS777 — aus fs777.live / fs777strat.live
   Eine Datei fuer alle Seitentypen. Erzeugt nichts, wird nur eingebunden. */

:root{
  --bg:#0b0f0d; --surface:#121815; --line:#1e2a24;
  --green:#00ff7f; --green-dim:#22eb8c; --gold:#e8c45a;
  --text:#eaf2ee; --muted:#93a49c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Der Kopf klebt oben. Ohne diesen Abstand verschwindet die angesprungene
   Ueberschrift dahinter, sobald jemand einen Menuepunkt mit Sprungmarke waehlt. */
[id]{scroll-margin-top:86px}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--green-dim)}

h1,h2,h3,h4{font-family:Oswald,Impact,sans-serif;font-weight:600;letter-spacing:.02em;margin:0}
h1{text-transform:uppercase;font-size:clamp(29px,5.4vw,50px);line-height:1.1}
h2{font-size:clamp(22px,3.2vw,31px);margin-bottom:12px}
h3{font-size:20px}

.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
section.wrap{padding:52px 22px}
header.wrap{padding:56px 22px 8px;text-align:center}
.mitte{text-align:center}
.lead{font-size:clamp(17px,2.3vw,21px);max-width:52ch;margin:18px auto 0;color:var(--text)}
.lead strong{color:var(--green)}
.sub{color:var(--muted);max-width:62ch;margin:14px auto 0}

/* Navigation — funktioniert ohne JavaScript.
   Handy: eine Checkbox oeffnet das Menue (Label = Burger).
   Desktop: Unterpunkte klappen bei :hover und :focus-within auf; :focus-within
   macht sie auch mit der Tastatur erreichbar. */
.nav{border-bottom:1px solid var(--line);background:rgba(11,15,13,.94);
  position:sticky;top:0;z-index:30;backdrop-filter:blur(8px)}
.nav .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:12px;padding-bottom:12px}
.marke{font-family:Oswald,sans-serif;font-weight:600;font-size:19px;color:var(--text);
  text-decoration:none;letter-spacing:.03em;white-space:nowrap;margin-right:auto}
.marke span{color:var(--green)}
.menue-schalter{position:absolute;opacity:0;width:0;height:0}

/* Burger */
.burger{display:block;width:38px;height:34px;border:1px solid var(--line);border-radius:9px;
  position:relative;cursor:pointer;flex:0 0 auto}
.burger span,.burger span::before,.burger span::after{position:absolute;left:9px;width:18px;
  height:2px;background:var(--text);content:"";transition:transform .18s,opacity .18s}
.burger span{top:16px}
.burger span::before{top:-6px;left:0}
.burger span::after{top:6px;left:0}
.menue-schalter:checked~.wrap .burger span{background:transparent}
.menue-schalter:checked~.wrap .burger span::before{transform:translateY(6px) rotate(45deg)}
.menue-schalter:checked~.wrap .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.burger:focus-visible,.menue-schalter:focus-visible~.wrap .burger{outline:2px solid var(--green);
  outline-offset:2px}

.nav nav{flex-basis:100%}
.menue{list-style:none;margin:0;padding:0;display:none}
.menue-schalter:checked~.wrap .menue{display:block;padding:6px 0 10px}
.menue>li>a{display:block;padding:11px 2px;color:var(--text);text-decoration:none;
  font-size:15px}
.menue>li>a[aria-current]{color:var(--green)}
.pfeil{display:inline-block;width:6px;height:6px;margin-left:7px;vertical-align:2px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg)}
.unter{list-style:none;margin:0 0 8px;padding:0 0 0 14px;border-left:1px solid var(--line)}
.unter a{display:block;padding:8px 2px;color:var(--muted);text-decoration:none;font-size:14px}
.unter a:hover,.unter a:focus{color:var(--green)}

@media(min-width:900px){
  .burger{display:none}
  .nav .wrap{flex-wrap:nowrap;gap:26px}
  .nav nav{flex-basis:auto}
  .menue{display:flex;gap:4px;align-items:center}
  .menue>li{position:relative}
  .menue>li>a{padding:9px 12px;border-radius:8px;color:var(--muted);white-space:nowrap}
  .menue>li>a:hover{color:var(--green)}
  .unter{display:none;position:absolute;top:100%;left:0;min-width:232px;margin:0;padding:8px;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 14px 34px rgba(0,0,0,.5)}
  .hat-unter:hover>.unter,.hat-unter:focus-within>.unter{display:block}
  .unter a{padding:9px 12px;border-radius:7px;white-space:nowrap}
  .unter a:hover,.unter a:focus{background:var(--bg);color:var(--green)}
}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--green);
  color:var(--green);border-radius:999px;padding:7px 16px;font:600 12px/1 Inter;
  letter-spacing:.14em;text-transform:uppercase}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.chip{display:inline-block;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:5px 13px;font-size:13px;color:var(--muted);margin:0 6px 6px 0}
.chip-gold{color:var(--gold);border-color:var(--gold)}

/* Karten */
.grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}}
.karte{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:24px 22px;position:relative;display:flex;flex-direction:column}
.karte h3{margin-bottom:6px}
/* Karten in einem Raster sind gleich hoch. Damit die Buttons nicht auf
   verschiedenen Hoehen schweben, wenn eine Marke keinen Bonustext hat,
   wird der erste Button nach unten geschoben. */
.karte .cta{margin-top:auto}
.karte > p:last-of-type{margin-bottom:16px}
.karte.mitte{text-align:center}
.karte-rang{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#04150c;font-family:Oswald,sans-serif;font-size:16px;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center}

/* Buttons */
.cta{display:block;background:var(--green);color:#04150c;text-decoration:none;text-align:center;
  font:600 15px/1 Inter;letter-spacing:.03em;padding:15px;border-radius:10px;
  position:relative;overflow:hidden}
.cta:hover{background:var(--green-dim)}
.cta::after{content:"";position:absolute;inset:0 auto 0 -60%;width:50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  animation:sweep 3.6s infinite}
@keyframes sweep{0%{left:-60%}60%,100%{left:130%}}
.cta-2{display:block;text-align:center;color:var(--muted);text-decoration:none;font-size:14px;
  border:1px solid var(--line);border-radius:10px;padding:13px;margin-top:11px}
.cta-2:hover{color:var(--text);border-color:var(--green-dim)}

/* Fakten */
.fakten{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;
  font-variant-numeric:tabular-nums}
.fakten dt{color:var(--muted);font-size:14px}
.fakten dd{margin:0;font-weight:600;font-size:14px}
.gold{color:var(--gold)}
.gruen{color:var(--green)}

/* Tabellen */
.tabelle-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line)}
th{font-family:Oswald,sans-serif;font-weight:600;color:var(--muted);
  text-transform:uppercase;font-size:12px;letter-spacing:.08em;white-space:nowrap}
tbody tr:hover{background:var(--surface)}

/* Suche */
.suche{width:100%;max-width:420px;margin:0 auto 8px;display:block;padding:14px 17px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font:400 16px Inter,sans-serif}
.suche:focus{outline:none;border-color:var(--green)}
.treffer{text-align:center;color:var(--muted);font-size:14px;margin:12px 0 22px}

/* Liste mit Haken */
.haken{max-width:62ch;margin:22px auto 0;padding:0}
.haken li{list-style:none;padding-left:29px;position:relative;margin-bottom:10px}
.haken li::before{content:"";position:absolute;left:0;top:.55em;width:13px;height:7px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}

/* Themen-Links */
.themen{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.themen a{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:12px 18px;color:var(--text);text-decoration:none;font-size:14px}
.themen a:hover{border-color:var(--green);color:var(--green)}

/* Demo-Rahmen */
.demo{position:relative;padding-top:62%;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;margin-bottom:8px}
.demo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.pausiert{border-color:var(--gold)}
.pausiert-hinweis{color:var(--gold);font-size:13px;margin-top:10px}

footer{border-top:1px solid var(--line);margin-top:36px;padding:34px 22px;text-align:center;
  color:var(--muted);font-size:13px}
footer .warn{color:var(--text);font-weight:600}
footer nav{margin-bottom:14px;display:flex;gap:15px;justify-content:center;flex-wrap:wrap}
footer nav a{color:var(--muted);text-decoration:none}
footer nav a:hover{color:var(--green)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}

/* ---- Bausteine der Themenseiten (frueher je Seite inline) ---- */
.box-gut{border-color:var(--green)}
.box-gut h3{color:var(--green)}
.kurz{text-align:center;font-family:Oswald,sans-serif;font-size:clamp(19px,2.6vw,26px);
  color:var(--gold);margin:34px auto 0;max-width:36ch;line-height:1.3}

/* No-Deposit-Karte: wagerfrei ist das Merkmal, nicht eine Spalte */
.wagerfree{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#04150c;font:600 12px/1 Inter;letter-spacing:.16em;
  text-transform:uppercase;padding:8px 18px;border-radius:999px;white-space:nowrap}
.offer{margin:10px 0 2px;font-size:19px}
.num{font-family:Oswald,sans-serif;font-size:44px;color:var(--gold);vertical-align:-4px;
  margin-right:6px;font-variant-numeric:tabular-nums}
.spiel{color:var(--muted);margin:0 0 20px}
.spiel strong{color:var(--text)}
.code{color:var(--gold);letter-spacing:.1em}
.frei{color:var(--green)}

/* Podest der Non-Sticky-Seite */
.podest{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){.podest{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.podest{grid-template-columns:repeat(3,1fr)}}
.modell{color:var(--green);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0}
.offen{color:var(--muted);font-size:13px;margin:8px 0 18px;font-style:italic}
.hinweis{text-align:center;color:var(--muted);font-size:14px;max-width:58ch;margin:32px auto 0;
  border-top:1px solid var(--line);padding-top:24px}

/* Geruestseiten */
.geruest{min-height:52vh;display:grid;place-items:center;text-align:center;padding:40px 22px}

/* Logo und Platzhalter — gleiche Groesse, gleiche Ecken, gleicher Platz.
   Heller Grund ist Absicht: viele Casino-Logos sind fuer weisse Seiten
   gezeichnet und tragen dunkle Schrift. Auf dem dunklen Hintergrund der Seite
   waeren sie ohne die helle Kachel unsichtbar.
   Der Platzhalter ist keine Fehlanzeige, sondern ein Monogramm in einer festen
   Farbe je Marke — er soll wie eine Gestaltungsentscheidung wirken. */
.logo{display:grid;place-items:center;width:56px;height:56px;border-radius:15px;
  background:#f4f7f5;border:1px solid var(--line);overflow:hidden;
  margin:0 auto 12px;flex:none}
.logo img{width:100%;height:100%;object-fit:contain;padding:7px;display:block}
.logo-mono{font-family:Oswald,Impact,sans-serif;font-weight:600;font-size:20px;
  letter-spacing:.03em;color:#fff;border-color:rgba(255,255,255,.16)}
.logo-gross{width:96px;height:96px;border-radius:24px;margin-bottom:20px}
.logo-gross img{padding:12px}
.logo-gross.logo-mono{font-size:34px}
/* In der Karte sitzt das Logo ueber der Ueberschrift; der Rang-Kreis sass
   dort vorher allein und braucht jetzt etwas mehr Luft nach oben. */
.karte .logo{margin-top:2px}

/* Fliesstext im Review — schmalere Spalte als der Rest, damit die Zeilen
   lesbar bleiben. Ohne Begrenzung laufen sie ueber die volle Breite und das
   Auge verliert beim Zeilenwechsel die Spur. */
.fliess{max-width:68ch;margin:0 auto}
.fliess p{margin:0 0 15px}
.fliess p:last-child{margin-bottom:0}
.fliess strong{color:var(--text)}

/* Helle Logos auf dunkler Kachel. Welches Logo welche Kachel bekommt, steht in
   daten/logos.json und wird aus der mittleren Helligkeit der Datei bestimmt -
   ein weisser Schriftzug auf heller Kachel waere unsichtbar. */
.logo-dunkel{background:#151c19;border-color:#2b3a33}