html { margin-top: 0 !important; scroll-behavior: smooth; background: #12150F; height: 100%; }
body { margin-top: 0 !important; }
#wpadminbar { display: none !important; }
:root {
--green: #3DD639; --green-light: #72F56E; --white: #FFFFFF;
--dark: #12150F; --dark2: #181D17; --dark3: #212921;
--card-bg: rgba(13,17,13,0.6); --card-bg-strong: rgba(13,17,13,0.94); --border: rgba(61,214,57,0.18);
--border-strong: rgba(61,214,57,0.35); --text: #E8F0E8; --muted: #E8F0E8;
--radius-card: 16px; --radius-btn: 8px;
}
/* === PROFIL-SECTION === */
#profil, #spiele { padding: 60px 5vw 80px; max-width: 1100px; margin: 0 auto; }
.profil-guest { max-width: 460px; margin: 0 auto; text-align: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 40px 28px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 16px 44px rgba(0,0,0,0.4); }
.profil-guest h2 { font-family: var(--font-display), sans-serif; font-size: 1.8rem; letter-spacing: 0.5px; margin-bottom: 10px; }
.profil-guest p { color: var(--muted); opacity: .8; font-size: 0.92rem; margin-bottom: 24px; }
/* Login-Buttons in der Gast-Karte (Profil + Spiele): untereinander, volle Breite, mit Beschriftung.
(Die Nav-Regel "nur Icon auf dem Handy" gilt hier bewusst nicht.) */
.profil-guest > div { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 300px; margin: 0 auto; }
.profil-guest .nav-login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0; padding: 13px 18px; font-size: 0.95rem; }
.profil-guest .nav-login-btn span { display: inline; }
.profil-guest .nav-login-btn svg { width: 18px; height: 18px; }
.profil-header { display: flex; align-items: center; gap: 20px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; flex-wrap: wrap; margin-bottom: 12px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 16px 44px rgba(0,0,0,0.4); }
.profil-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--green); flex-shrink: 0; }
.profil-avatar-fallback { width: 72px; height: 72px; border-radius: 50%; background: var(--dark2); border: 2px solid var(--green); display: flex; align-items: center; justify-content: center; font-family: var(--font-display), sans-serif; font-size: 28px; color: var(--green); flex-shrink: 0; }
.profil-header h2 { font-family: var(--font-display), sans-serif; font-size: 1.7rem; letter-spacing: 0.5px; margin-bottom: 6px; }
.profil-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; padding: 4px 12px; border-radius: 100px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--muted); opacity: .85; margin: 2px 4px 2px 0; }
.profil-chip.twitch { color: #fff; background: #9146FF; border-color: #9146FF; opacity: 1; }
.profil-chip.kick { color: #08130a; background: #53FC18; border-color: #53FC18; opacity: 1; }
.profil-link-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.profil-link-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; padding: 5px 12px; border-radius: 100px; text-decoration: none; border: 1px solid var(--border); color: var(--muted); background: rgba(255,255,255,0.04); }
.profil-link-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.profil-link-btn.profil-link-kick { color: #53FC18; border-color: rgba(83,252,24,0.4); background: rgba(83,252,24,0.1); }
.profil-link-btn.profil-link-kick:hover { background: rgba(83,252,24,0.2); }
.profil-link-btn.profil-link-twitch { color: #b98bff; border-color: rgba(145,70,255,0.4); background: rgba(145,70,255,0.1); }
.profil-link-btn.profil-link-twitch:hover { background: rgba(145,70,255,0.2); }
.profil-section-title { font-family: var(--font-display), sans-serif; font-size: 1.2rem; letter-spacing: 0.5px; margin: 30px 0 12px; color: var(--green); }
.profil-stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px; }
.profil-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 18px; text-align: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.profil-stat-card .num { font-family: var(--font-display), sans-serif; font-size: 1.9rem; color: var(--green); }
.profil-stat-card .label { font-size: 0.78rem; color: var(--muted); opacity: .75; margin-top: 2px; }
.botrix-tier-grid { display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; }
.botrix-tier-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; text-align:center; min-width:140px; flex:1 1 140px; }
.botrix-tier-card .val { font-family: var(--font-display), sans-serif; font-size: 1.3rem; color: var(--green); }
.botrix-tier-card .pts { font-size: 0.78rem; color: var(--muted); margin: 2px 0 10px; }
.botrix-tier-card button { width:100%; padding:9px 10px; border-radius:8px; border:none; background:var(--green); color:#08130a; font-weight:700; font-size:0.85rem; cursor:pointer; }
.botrix-tier-card button:disabled { background:#333; color:#888; cursor:not-allowed; }
.botrix-result { margin-top:14px; font-size:0.9rem; }
.slot-badge { font-family: sans-serif; font-size:0.65rem; letter-spacing:.5px; text-transform:uppercase; background:rgba(255,193,7,.15); color:#ffc107; border:1px solid rgba(255,193,7,.4); border-radius:6px; padding:2px 7px; margin-left:8px; vertical-align:middle; }
/* === SPIELE-LOBBY === */
.spiele-lobby { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px; margin-top:6px; }
.spiele-tile { position:relative; display:flex; flex-direction:column; gap:14px; text-align:left; width:100%; min-height:210px; padding:20px 20px 18px; color:var(--text); font:inherit; cursor:pointer; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-card, 16px); overflow:hidden; transition:border-color .2s, transform .2s, box-shadow .2s; }
.spiele-tile::before { content:''; position:absolute; inset:0; background:var(--tile-glow); opacity:.9; pointer-events:none; }
.spiele-tile > * { position:relative; }
.spiele-tile:hover, .spiele-tile:focus-visible { border-color:var(--tile-accent); transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.4); outline:none; }
.spiele-tile:focus-visible { box-shadow:0 0 0 3px var(--tile-accent); }
.spiele-tile--slot { --tile-accent:#ffc107; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(255,193,7,.20), transparent 60%); }
.spiele-tile--razor { --tile-accent:#3dd639; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(61,214,57,.20), transparent 60%); }
.spiele-tile-icon { font-size:3.2rem; line-height:1; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.spiele-tile-name { font-family:var(--font-display), sans-serif; font-size:1.7rem; letter-spacing:.5px; line-height:1.1; color:var(--white); }
.spiele-tile-meta { font-size:.8rem; line-height:1.5; color:var(--muted); }
.spiele-tile-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.spiele-tile-play { background:var(--tile-accent); color:#08130a; font-weight:800; font-size:.85rem; letter-spacing:.06em; padding:9px 20px; border-radius:999px; }
.spiele-back { display:inline-flex; align-items:center; gap:8px; margin:0 0 4px; padding:9px 16px; background:var(--dark2); color:var(--text); border:1px solid var(--border); border-radius:999px; font-size:.85rem; font-weight:700; cursor:pointer; transition:border-color .15s, color .15s; }
.spiele-back:hover, .spiele-back:focus-visible { border-color:var(--green); color:var(--green-light); outline:none; }
.spiele-view[hidden], .spiele-lobby[hidden] { display:none; }
@media (prefers-reduced-motion: reduce) { .spiele-tile { transition:none; } .spiele-tile:hover { transform:none; } }
/* === SLOT (Triple Diamond): Automaten-Layout === */
.slot-box { position:relative; padding:22px 18px 18px; text-align:center; background: radial-gradient(120% 70% at 50% 0%, rgba(61,214,57,.10), transparent 62%), var(--card-bg); border-color: rgba(61,214,57,.28); box-shadow: 0 18px 44px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); }
.slot-inner { width:100%; max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
/* Kennzahlen: Guthaben / Einsatz / letzte Auszahlung */
.slot-topbar { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.slot-stat { background:rgba(0,0,0,.28); border:1px solid var(--border); border-radius:12px; padding:9px 8px 8px; min-width:0; }
.slot-stat-l { display:block; font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.slot-stat-v { display:block; font-family:var(--font-display), sans-serif; font-size:1.25rem; line-height:1.1; letter-spacing:.02em; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot-stat.gold .slot-stat-v { color:#ffc107; }
@keyframes slotBump { 0% { transform:scale(1); } 35% { transform:scale(1.12); } 100% { transform:scale(1); } }
.slot-stat-v.bump { animation: slotBump .5s ease-out; }
/* Automat: goldener Rahmen, Payline-Pfeile links/rechts */
.slot-machine { position:relative; width:fit-content; max-width:100%; margin:4px auto 0; padding:0 24px; }
.slot-machine::before, .slot-machine::after { content:''; position:absolute; top:50%; margin-top:-10px; border-top:10px solid transparent; border-bottom:10px solid transparent; filter:drop-shadow(0 0 5px rgba(255,193,7,.7)); }
.slot-machine::before { left:0; border-left:14px solid #ffc107; }
.slot-machine::after { right:0; border-right:14px solid #ffc107; }
.slot-reels { position:relative; display:flex; gap:14px; width:fit-content; max-width:100%; margin:0 auto; padding:16px; border:3px solid transparent; border-radius:22px; background: linear-gradient(180deg,#080b08,#131a13) padding-box, linear-gradient(150deg,#f7dc7a 0%,#a9801c 38%,#2f8f2c 72%,#3dd639 100%) border-box; box-shadow: inset 0 0 26px rgba(0,0,0,.65), 0 0 34px rgba(61,214,57,.12), 0 10px 30px rgba(0,0,0,.45); transition: box-shadow .3s ease; }
.slot-reels::after { content:''; position:absolute; left:6px; right:6px; top:50%; height:2px; margin-top:-1px; background:rgba(255,193,7,.6); box-shadow:0 0 8px rgba(255,193,7,.7); pointer-events:none; z-index:3; }
.slot-reel { --cell:98px; position:relative; width:132px; height:calc(var(--cell) * 3); overflow:hidden; background:linear-gradient(180deg,#0d120d 0%,#1c251c 50%,#0d120d 100%); border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow: inset 0 0 14px rgba(0,0,0,.6); }
.slot-reel::before { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 68%, rgba(0,0,0,.75) 100%); }
.slot-reel::after { content:''; position:absolute; left:0; right:0; top:33.333%; height:33.334%; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(255,193,7,.07), rgba(255,193,7,.03)); border-top:1px solid rgba(255,193,7,.18); border-bottom:1px solid rgba(255,193,7,.18); }
.slot-strip { will-change: transform; transform: translate3d(0,0,0); }
.slot-cell { height:var(--cell); display:flex; align-items:center; justify-content:center; font-size:3.7rem; line-height:1; user-select:none; }
.slot-cell-img { width:calc(var(--cell) * .76); height:calc(var(--cell) * .76); object-fit:contain; pointer-events:none; user-select:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
.slot-reel.spin .slot-cell-img { filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) blur(.3px); }
.slot-reel.win .slot-cell-img { filter:drop-shadow(0 0 9px rgba(61,214,57,.85)); }
.slot-pay-icon { width:1.35em; height:1.35em; object-fit:contain; vertical-align:-.32em; margin:0 1px; }
.slot-cell-img { width:calc(var(--cell) * .76); height:calc(var(--cell) * .76); object-fit:contain; pointer-events:none; user-select:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
.slot-reel.spin .slot-cell-img { filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) blur(.3px); }
.slot-reel.win .slot-cell-img { filter:drop-shadow(0 0 9px rgba(61,214,57,.85)); }
.slot-pay-icon { width:1.35em; height:1.35em; object-fit:contain; vertical-align:-.32em; margin:0 1px; }
.slot-reel.spin .slot-strip { filter: blur(1.6px); }
@keyframes slotThud { 0% { transform: translateY(0); } 40% { transform: translateY(3px); } 100% { transform: translateY(0); } }
.slot-reel.landed { animation: slotThud .18s ease-out; }
@keyframes slotWinPulse { 0%,100% { box-shadow: 0 0 0 rgba(61,214,57,0); } 50% { box-shadow: 0 0 22px rgba(61,214,57,.9), inset 0 0 16px rgba(61,214,57,.45); } }
.slot-reel.win { border-color: var(--green); animation: slotWinPulse .7s ease-in-out 3; }
.slot-box.slot-win .slot-reels { box-shadow: inset 0 0 26px rgba(0,0,0,.65), 0 0 40px rgba(61,214,57,.4), 0 10px 30px rgba(0,0,0,.45); }
/* Ergebnis-Anzeige (feste Höhe, damit nichts springt) */
.slot-result { min-height:2.8em; display:flex; align-items:center; justify-content:center; padding:0 6px; font-size:1rem; font-weight:700; line-height:1.3; }
.slot-result.win { color:var(--green-light); font-family:var(--font-display), sans-serif; font-size:1.4rem; letter-spacing:.03em; text-shadow:0 0 18px rgba(61,214,57,.55); }
.slot-result.win.big { color:#ffc107; font-size:1.75rem; text-shadow:0 0 22px rgba(255,193,7,.6); animation: slotBump .6s ease-out; }
.slot-result.lose { color: var(--muted); }
/* Bedienung: Einsatz-Stepper, Schnellwahl, Drehen, Autoplay, Sound */
.slot-controls { display:flex; flex-direction:column; gap:14px; }
.slot-bet-row { display:flex; flex-direction:column; align-items:center; gap:10px; }
.slot-stepper { display:inline-flex; align-items:stretch; background:var(--dark2); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.slot-step { width:48px; background:transparent; color:var(--text); border:none; font-size:1.35rem; line-height:1; cursor:pointer; transition:background .15s, color .15s; }
.slot-step:hover:not(:disabled) { background:rgba(61,214,57,.14); color:var(--green-light); }
.slot-step:disabled { color:#555; cursor:not-allowed; }
.slot-controls input { width:130px; text-align:center; background:transparent; color:var(--white); border:none; border-left:1px solid var(--border); border-right:1px solid var(--border); border-radius:0; padding:12px 8px; font-family:var(--font-display), sans-serif; font-size:1.35rem; letter-spacing:.03em; -moz-appearance:textfield; appearance:textfield; }
.slot-controls input::-webkit-outer-spin-button, .slot-controls input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.slot-controls input:focus { outline:none; background:rgba(61,214,57,.06); }
.slot-controls input:disabled { opacity:.6; }
.slot-quick { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.slot-quick button { min-width:56px; background:var(--dark2); color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:7px 13px; font-size:.78rem; font-weight:700; cursor:pointer; transition:border-color .15s, color .15s, background .15s; }
.slot-quick button:hover:not(:disabled) { border-color:var(--green); color:var(--text); }
.slot-quick button.on { background:rgba(61,214,57,.16); border-color:var(--green); color:var(--green-light); }
.slot-quick button:disabled { opacity:.55; cursor:not-allowed; }
.slot-actions { display:flex; flex-direction:column; gap:10px; }
.slot-spin-btn { width:100%; background:linear-gradient(180deg,#5cf05a,#2fb82c); color:#08130a; border:none; border-radius:12px; padding:15px 28px; font-weight:800; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; box-shadow:0 6px 20px rgba(61,214,57,.35), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .12s ease, box-shadow .2s ease, filter .2s ease; }
.slot-spin-btn:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 10px 26px rgba(61,214,57,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.slot-spin-btn:active:not(:disabled) { transform:translateY(1px); }
.slot-spin-btn:disabled { background:#2a2f2a; color:#7d857d; box-shadow:none; cursor:not-allowed; }
.slot-tools { display:flex; gap:8px; align-items:stretch; justify-content:center; }
.slot-auto-wrap { display:flex; gap:6px; align-items:stretch; }
.slot-auto-wrap select { width:auto; padding:0 10px; background:var(--dark2); color:inherit; border:1px solid var(--border); border-radius:10px; font-size:.85rem; cursor:pointer; }
.slot-auto-btn { background:var(--dark2); color:inherit; border:1px solid var(--green); border-radius:10px; padding:10px 18px; font-weight:700; font-size:.85rem; cursor:pointer; transition:background .15s; }
.slot-auto-btn:hover:not(:disabled) { background:rgba(61,214,57,.12); }
.slot-auto-btn.on { background:#e05555; border-color:#e05555; color:#fff; animation: slotAutoPulse 1.4s ease-in-out infinite; }
.slot-auto-btn:disabled { border-color:var(--border); color:#777; cursor:not-allowed; }
@keyframes slotAutoPulse { 0%,100% { box-shadow:0 0 0 rgba(224,85,85,0); } 50% { box-shadow:0 0 12px rgba(224,85,85,.7); } }
.slot-sound-btn { background:var(--dark2); color:inherit; border:1px solid var(--border); border-radius:10px; padding:0 14px; font-size:1.05rem; cursor:pointer; line-height:1; transition:border-color .15s; }
.slot-sound-btn:hover { border-color: var(--green); }
/* Gewinntabelle als Kachel-Raster */
.slot-pay-title { font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.slot-paytable { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:6px; text-align:left; }
.slot-paytable > span { display:flex; align-items:center; justify-content:space-between; gap:8px; background:rgba(0,0,0,.25); border:1px solid var(--border); border-radius:10px; padding:7px 10px; font-size:.82rem; color:var(--text); white-space:nowrap; }
.slot-paytable b { color:#ffc107; font-family:var(--font-display), sans-serif; font-size:1rem; letter-spacing:.03em; }
.slot-info { padding-top:12px; border-top:1px solid var(--border); font-size:.72rem; line-height:1.5; color:var(--muted); opacity:.9; }
@media (max-width:480px) {
.slot-box { padding:16px 12px 14px; }
.slot-topbar { gap:6px; }
.slot-stat-v { font-size:1.05rem; }
.slot-machine { padding:0 14px; }
.slot-reel { --cell:56px; width:74px; }
.slot-cell { font-size:2.1rem; }
.slot-reels { gap:8px; padding:9px; }
.slot-result.win { font-size:1.2rem; }
.slot-result.win.big { font-size:1.45rem; }
}
@media (max-width:360px) { .slot-reel { --cell:50px; width:64px; } .slot-cell { font-size:1.8rem; } }
@media (prefers-reduced-motion: reduce) { .slot-result.win.big, .slot-stat-v.bump, .slot-reel.win, .slot-reel.landed, .slot-auto-btn.on { animation:none; } .slot-spin-btn { transition:none; } }
/* === GLÜCKSRAD (tägliche Bonusdrehung) === */
.wheel-box { position:relative; padding:22px 18px 18px; text-align:center; background: radial-gradient(120% 70% at 50% 0%, rgba(255,193,7,.09), transparent 62%), var(--card-bg); border-color: rgba(255,193,7,.28); box-shadow: 0 18px 44px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); }
.wheel-inner { width:100%; max-width:420px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:16px; }
.wheel-wrap { position:relative; width:min(280px, 68vw); height:min(280px, 68vw); margin:6px auto 0; }
.wheel-pointer { position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:22px solid #ffc107; filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)); z-index:3; }
.wheel-circle { position:relative; width:100%; height:100%; border-radius:50%; border:6px solid transparent; background: var(--wheel-gradient, conic-gradient(#3dd639 0 100%)) padding-box, linear-gradient(150deg,#f7dc7a 0%,#a9801c 38%,#2f8f2c 72%,#3dd639 100%) border-box; box-shadow: inset 0 0 22px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.45); transition: transform 4.2s cubic-bezier(.17,.67,.16,1); will-change: transform; }
.wheel-seg-label { position:absolute; top:50%; left:50%; width:50%; height:2px; display:flex; align-items:center; justify-content:flex-end; padding-right:14px; transform-origin:0% 50%; font-family: var(--font-display), sans-serif; font-size:1.05rem; color:#0a0f0a; text-shadow:0 1px 0 rgba(255,255,255,.25); pointer-events:none; }
.wheel-hub { position:absolute; top:50%; left:50%; width:19%; height:19%; transform:translate(-50%,-50%); border-radius:50%; background: radial-gradient(circle at 35% 30%, #fff7d6, #ffc107 55%, #a9801c 100%); box-shadow: 0 3px 10px rgba(0,0,0,.5), inset 0 0 0 3px rgba(0,0,0,.25); z-index:2; }
.wheel-spin-btn { width:100%; max-width:280px; background:linear-gradient(180deg,#ffe37a,#ffc107); color:#241a00; border:none; border-radius:12px; padding:15px 28px; font-weight:800; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; box-shadow:0 6px 20px rgba(255,193,7,.35), inset 0 1px 0 rgba(255,255,255,.45); transition:transform .12s ease, box-shadow .2s ease, filter .2s ease; }
.wheel-spin-btn:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.05); }
.wheel-spin-btn:active:not(:disabled) { transform:translateY(1px); }
.wheel-spin-btn:disabled { background:#2a2f2a; color:#7d857d; box-shadow:none; cursor:not-allowed; }
.wheel-cooldown { font-size:.82rem; color:var(--muted); }
.wheel-cooldown strong { color:var(--text); font-variant-numeric:tabular-nums; }
.wheel-result { min-height:1.6em; font-size:1.05rem; font-weight:700; color:var(--green-light); font-family: var(--font-display), sans-serif; letter-spacing:.03em; }
.wheel-result.zero { color: var(--muted); font-family:inherit; font-weight:600; font-size:.92rem; }
@keyframes wheelWinPulse { 0%,100% { box-shadow: 0 0 0 rgba(255,193,7,0); } 50% { box-shadow: 0 0 26px rgba(255,193,7,.85); } }
.wheel-circle.win { animation: wheelWinPulse .7s ease-in-out 3; }
@media (max-width:480px) { .wheel-wrap { width:min(220px, 62vw); height:min(220px, 62vw); } .wheel-seg-label { font-size:.85rem; padding-right:10px; } }
@media (prefers-reduced-motion: reduce) { .wheel-circle { transition:transform .3s linear; } .wheel-circle.win { animation:none; } }
.lb-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:14px 0; }
.lb-bar input, .lb-bar select { background: var(--dark2); color: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 0.85rem; }
.lb-bar input { flex: 1 1 160px; min-width: 0; }
.lb-bar button { background: var(--green); color: #08130a; border: none; border-radius: 8px; padding: 9px 16px; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.lb-bar label { font-size: 0.8rem; color: var(--muted); display:flex; align-items:center; gap:6px; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.lb-table th, .lb-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.lb-table th { color: var(--muted); font-weight: 600; font-size: 0.78rem; }
.lb-table tr:last-child td { border-bottom: none; }
.lb-table tr.lb-me td { background: rgba(61,214,57,0.10); font-weight: 700; }
.lb-scroll { overflow-x: auto; }
@media (max-width: 600px) { .lb-table th:nth-child(3), .lb-table td:nth-child(3), .lb-table th:nth-child(5), .lb-table td:nth-child(5) { display: none; } .lb-table th, .lb-table td { padding: 10px 8px; } }
.botrix-nolink { color: var(--muted); font-size:0.85rem; margin-top:6px; }
.profil-panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.profil-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 0.88rem; gap: 10px; }
.profil-row:last-child { border-bottom: none; }
.profil-row .name { font-weight: 600; }
.profil-row .meta { color: var(--muted); opacity: .7; font-size: 0.74rem; margin-top: 2px; }
.profil-row .val { font-family: var(--font-display), sans-serif; font-size: 1.05rem; color: var(--green); white-space: nowrap; }
.profil-empty { padding: 26px 20px; text-align: center; color: var(--muted); opacity: .75; font-size: 0.88rem; }
.profil-badge { padding: 4px 12px; border-radius: 20px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.profil-badge.st-offen { background: rgba(255,193,7,0.15); color: #ffc107; }
.profil-badge.st-ok { background: rgba(61,214,57,0.15); color: var(--green); }
.profil-badge.st-no { background: rgba(229,72,77,0.15); color: #ff8f92; }
.profil-rejected-list { display: flex; flex-direction: column; gap: 12px; }
.profil-rejected-item { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--card-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.profil-rejected-item .r-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.profil-rejected-item .r-title { font-weight: 600; font-size: 0.88rem; }
.profil-rejected-item .r-meta { color: var(--muted); opacity: .7; font-size: 0.74rem; margin-top: 2px; }
.profil-rejected-item .r-reason { margin-top: 10px; font-size: 0.82rem; background: rgba(229,72,77,0.08); border: 1px solid #e5484d; color: #ff8f92; border-radius: 8px; padding: 10px 12px; }
.profil-rejected-item .r-reason strong { color: #ff8f92; }
.profil-rejected-item .r-noreason { margin-top: 10px; font-size: 0.82rem; color: var(--muted); opacity: .75; }
.btn-resubmit { display: inline-flex; align-items: center; gap: 6px; background: #ffc107; color: #08130a; font-weight: 700; padding: 8px 14px; border-radius: 8px; text-decoration: none; font-size: 0.82rem; margin-top: 10px; }
.btn-resubmit:hover { filter: brightness(0.95); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body), sans-serif; background: var(--dark); color: var(--text); overflow-x: hidden; overflow-y: auto; min-height: 100vh; min-height: 100dvh; height: 100%; display: flex; flex-direction: column; }
.page-main { flex: 1 0 auto; display: block; width: 100%; }
body.agegate-active { overflow: hidden; }
#agegate-overlay { position: fixed !important; inset: 0 !important; z-index: 999999 !important; display: flex; align-items: center; justify-content: center; background: rgba(8,10,8,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 20px; transition: opacity 0.4s ease; }
#agegate-box { background: #181D17; border: 1px solid rgba(61,214,57,0.35); border-radius: 20px; padding: 48px 40px; max-width: 480px; width: 100%; text-align: center; box-shadow: 0 0 60px rgba(61,214,57,0.1), 0 0 120px rgba(61,214,57,0.05); }
#agegate-logo { font-family: 'Bebas Neue', sans-serif; font-size: 2.8rem; letter-spacing: 0.06em; margin-bottom: 20px; line-height: 1; }
#agegate-logo .num { color: #3DD639; } #agegate-logo .word { color: #FFFFFF; }
#agegate-logo img.brand-logo-img { height: 90px; width: auto; display: block; margin: 0 auto; }
#agegate-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(61,214,57,0.1); border: 1px solid rgba(61,214,57,0.3); border-radius: 100px; padding: 6px 18px; font-size: 0.82rem; font-weight: 600; color: #3DD639; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 22px; }
#agegate-title { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: #FFFFFF; letter-spacing: 0.04em; margin-bottom: 14px; line-height: 1.1; }
#agegate-sub { color: #A3B5A3; font-size: 0.92rem; line-height: 1.65; margin-bottom: 30px; }
#agegate-confirm { display: block; width: 100%; background: #3DD639; color: #080A08; font-weight: 700; font-size: 1rem; padding: 15px; border-radius: 10px; border: none; cursor: pointer; transition: background .2s, box-shadow .2s; box-shadow: 0 0 28px rgba(61,214,57,0.3); margin-bottom: 14px; font-family: inherit; letter-spacing: 0.02em; }
#agegate-confirm:hover { background: #72F56E; box-shadow: 0 0 44px rgba(61,214,57,0.5); }
#agegate-leave { display: block; color: #A3B5A3; font-size: 0.85rem; text-decoration: none; margin-bottom: 22px; transition: color .2s; }
#agegate-leave:hover { color: #E8F0E8; }
#agegate-legal { color: #93A593; font-size: 0.75rem; line-height: 1.6; border-top: 1px solid rgba(61,214,57,0.1); padding-top: 18px; margin-top: 6px; }
@media (max-width: 640px), (orientation: landscape) and (max-height: 640px) {
.hero-bg {
background-image:
radial-gradient(ellipse 70% 55% at 50% -5%, rgba(61,214,57,0.14) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 85% 85%, rgba(61,214,57,0.07) 0%, transparent 55%),
radial-gradient(ellipse 30% 30% at 10% 70%, rgba(61,214,57,0.05) 0%, transparent 50%),
linear-gradient(180deg, rgba(6,8,6,0.62) 0%, rgba(8,11,8,0.55) 35%, rgba(6,8,6,0.72) 100%),
url("/420jackpot-bg-mobile.jpg?v=1787431469") !important;
background-image:
radial-gradient(ellipse 70% 55% at 50% -5%, rgba(61,214,57,0.14) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 85% 85%, rgba(61,214,57,0.07) 0%, transparent 55%),
radial-gradient(ellipse 30% 30% at 10% 70%, rgba(61,214,57,0.05) 0%, transparent 50%),
linear-gradient(180deg, rgba(6,8,6,0.62) 0%, rgba(8,11,8,0.55) 35%, rgba(6,8,6,0.72) 100%),
url("/420jackpot-bg-mobile.jpg?v=1787431469") !important;
/* Eigenes Hochkant-Bild (Motive über die volle Höhe verteilt) statt des
zugeschnittenen Desktop-Panoramas - deshalb wieder "cover", das Bild
ist ja jetzt fürs Handy-Format gebaut und muss nicht mehr reingezoomt/
oben abgeschnitten werden. */
background-size: cover, cover, cover, cover, cover !important;
background-position: center, center, center, center, center top !important;
background-attachment: scroll !important;
}
}
@media (max-width: 480px) { #agegate-box { padding: 32px 22px; } #agegate-logo { font-size: 2.2rem; } #agegate-title { font-size: 1.6rem; } }
.hero-bg {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
/* Eigenes Hintergrundbild (420 Jackpot Motiv) - dezent entsättigt + leicht abgedunkelt, aber kräftiger als vorher */
filter: saturate(0.75) brightness(0.8) contrast(1.05);
background-image:
/* Grünes Neon-Overlay über dem Bild, damit es zur Seite passt und Text lesbar bleibt */
radial-gradient(ellipse 70% 55% at 50% -5%, rgba(61,214,57,0.14) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 85% 85%, rgba(61,214,57,0.07) 0%, transparent 55%),
radial-gradient(ellipse 30% 30% at 10% 70%, rgba(61,214,57,0.05) 0%, transparent 50%),
linear-gradient(180deg, rgba(6,8,6,0.70) 0%, rgba(8,11,8,0.65) 35%, rgba(6,8,6,0.78) 100%),
url("/420jackpot-bg.jpg?v=1787431469");
background-image:
radial-gradient(ellipse 70% 55% at 50% -5%, rgba(61,214,57,0.14) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 85% 85%, rgba(61,214,57,0.07) 0%, transparent 55%),
radial-gradient(ellipse 30% 30% at 10% 70%, rgba(61,214,57,0.05) 0%, transparent 50%),
linear-gradient(180deg, rgba(6,8,6,0.70) 0%, rgba(8,11,8,0.65) 35%, rgba(6,8,6,0.78) 100%),
url("/420jackpot-bg.jpg?v=1787431469");
background-size: cover, cover, cover, cover, cover;
background-position: center, center, center, center, center 30%;
background-repeat: no-repeat;
background-attachment: fixed;
animation: bgBreathe 10s ease-in-out infinite;
}
.hero-bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; }
@keyframes bgBreathe { 0%, 100% { filter: saturate(0.75) brightness(0.8) contrast(1.05); } 50% { filter: saturate(0.8) brightness(0.84) contrast(1.08); } }
@media (prefers-reduced-motion: reduce) { .hero-bg { animation: none !important; } }
/* === Desktop: Hintergrund genauso hell wie auf dem Handy ===
Auf dem Handy nutzt .hero-bg ein eigenes, helleres Bild + ein dünneres
Verlaufs-Overlay. Damit der Desktop-Hintergrund optisch genauso hell wirkt,
wird hier (nur ab 641px) der Verlauf deutlich leichter gemacht und der
Filter aufgehellt - das Originalbild und die Position bleiben unverändert. */
@media (min-width: 641px) {
.hero-bg {
filter: saturate(0.9) brightness(1.05) contrast(1.0) !important;
animation: bgBreatheDesktop 10s ease-in-out infinite !important;
background-image:
radial-gradient(ellipse 70% 55% at 50% -5%, rgba(61,214,57,0.14) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 85% 85%, rgba(61,214,57,0.07) 0%, transparent 55%),
radial-gradient(ellipse 30% 30% at 10% 70%, rgba(61,214,57,0.05) 0%, transparent 50%),
linear-gradient(180deg, rgba(6,8,6,0.45) 0%, rgba(8,11,8,0.35) 35%, rgba(6,8,6,0.55) 100%),
url("/420jackpot-bg.jpg?v=1787431469") !important;
background-image:
radial-gradient(ellipse 70% 55% at 50% -5%, rgba(61,214,57,0.14) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 85% 85%, rgba(61,214,57,0.07) 0%, transparent 55%),
radial-gradient(ellipse 30% 30% at 10% 70%, rgba(61,214,57,0.05) 0%, transparent 50%),
linear-gradient(180deg, rgba(6,8,6,0.45) 0%, rgba(8,11,8,0.35) 35%, rgba(6,8,6,0.55) 100%),
url("/420jackpot-bg.jpg?v=1787431469") !important;
}
}
@keyframes bgBreatheDesktop { 0%, 100% { filter: saturate(0.9) brightness(1.05) contrast(1.0); } 50% { filter: saturate(0.95) brightness(1.1) contrast(1.02); } }
/* === KONTRASTZONE HINTER DEM HERO-TEXT ===
Eigener, vom Foto unabhängiger dunkler Fleck genau hinter Titel/Subtext,
damit Lesbarkeit immer garantiert ist - unabhängig vom Bild dahinter. */
#home { position: relative; }
#home::before {
content: '';
position: absolute;
top: -5%; left: 50%; transform: translateX(-50%);
width: min(900px, 92vw); height: 115%;
background: radial-gradient(ellipse 60% 55% at 50% 35%, rgba(6,8,6,0.55) 0%, transparent 72%);
pointer-events: none;
z-index: 0;
}
/* === DEKO-ICONS (freigestellte Motive) ===
Platzhalter-System für Schritt 3: einzelne freigestellte Bilder (Slot-Walzen,
Roulette, Karten, Geldscheine) statt eines vollflächigen Fotos. Motive sitzen
nur an den Rändern, die Textspalte in der Mitte bleibt immer frei.
Bild einfach einfügen: 
*/
.hero-deco { position: absolute; z-index: 0; pointer-events: none; opacity: 0.85; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5)); max-width: 220px; height: auto; }
.hero-deco--tl { top: 6%; left: 2vw; width: 15vw; }
.hero-deco--tr { top: 4%; right: 2vw; width: 16vw; }
.hero-deco--bl { bottom: 4%; left: 3vw; width: 13vw; }
.hero-deco--br { bottom: 6%; right: 3vw; width: 14vw; }
/* Auf schmalen Screens raus, damit sie den Text nicht bedrängen */
@media (max-width: 900px) { .hero-deco { display: none; } }
/* === FUNKELN === */
.sparkle-bg { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.sparkle-dot {
position: absolute;
border-radius: 50%;
will-change: transform, opacity;
animation: sparkleTwinkle ease-in-out infinite;
filter: drop-shadow(0 0 4px currentColor);
}
@keyframes sparkleTwinkle {
0%, 100% { opacity: 0; transform: scale(0.4); }
50% { opacity: 0.9; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .sparkle-bg { display: none; } }
/* === ENDE FUNKELN === */
/* === RAUCH (kombiniert mit dem Funkeln) ===
Wenige, große, weiche Schwaden statt vieler kleiner Partikel - dadurch
performant (kein Partikel-System) und wirkt ruhiger neben dem Funkeln.
mix-blend-mode: screen sorgt dafür, dass sich der Rauch mit dem dunklen
Hintergrund vermischt, statt wie ein hartes graues Overlay zu wirken. */
.smoke-bg { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.smoke-puff {
position: absolute;
border-radius: 50%;
mix-blend-mode: screen;
will-change: transform, opacity;
animation: smokeDrift ease-in-out infinite;
}
@keyframes smokeDrift {
0% { opacity: 0; transform: translate(0, 0) scale(0.85); }
15% { opacity: 0.28; }
50% { opacity: 0.4; transform: translate(var(--drift-x), var(--drift-y)) scale(1.15); }
85% { opacity: 0.22; }
100% { opacity: 0; transform: translate(calc(var(--drift-x) * 1.6), calc(var(--drift-y) * 1.6)) scale(1.35); }
}
@media (prefers-reduced-motion: reduce) { .smoke-bg { display: none; } }
/* === ENDE RAUCH === */
nav#nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; padding: 0 5vw; height: 68px; background: linear-gradient(180deg, var(--dark2) 0%, var(--dark3) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-strong); box-shadow: 0 4px 28px rgba(0,0,0,0.5), 0 1px 0 rgba(61,214,57,0.1); }
/* Da die Nav jetzt "fixed" ist (raus aus dem normalen Layout-Fluss), braucht
der Inhalt direkt darunter einen Abstand in Höhe der Nav, sonst würde er
unter der Leiste verschwinden. Wird per JS live auf die tatsächliche
Nav-Höhe gesetzt (--nav-h), da die Höhe auf Handy variabel ist. */
.page-main { padding-top: var(--nav-h, 68px); }
.nav-logo { font-family: var(--font-display), sans-serif; font-size: 2.1rem; letter-spacing: 0.06em; text-decoration: none; user-select: none; justify-self: start; display: inline-flex; align-items: center; }
.nav-logo .num { color: var(--green); } .nav-logo .word { color: var(--white); }
.nav-logo img.brand-logo-img { height: 60px; width: auto; display: block; }
.nav-tabs { display: flex; align-items: center; gap: 2px; list-style: none; justify-self: center; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 100px; padding: 5px; }
.nav-tabs li a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 100px; text-decoration: none; font-size: 0.87rem; font-weight: 600; color: var(--muted); transition: color .2s, background .2s, box-shadow .2s; cursor: pointer; white-space: nowrap; }
.nav-tabs li a svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-tabs li a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.nav-tabs li a.active { color: var(--dark); background: linear-gradient(135deg, var(--green-light), var(--green)); box-shadow: 0 0 18px rgba(61,214,57,0.4); font-weight: 700; }
.nav-tabs li a.active svg { stroke: var(--dark); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: var(--dark); font-weight: 700; padding: 9px 22px 9px 16px; border-radius: var(--radius-btn); font-size: 0.88rem; text-decoration: none; transition: background .2s, transform .15s, box-shadow .2s; white-space: nowrap; box-shadow: 0 0 20px rgba(61,214,57,0.3); }
.nav-cta:hover { background: var(--green-light); transform: translateY(-1px); box-shadow: 0 0 32px rgba(61,214,57,0.5); }
.nav-cta .play-ico { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(8,10,8,0.25); border-radius: 50%; }
.nav-cta .play-ico svg { width: 7px; height: 8px; fill: var(--dark); margin-left: 1px; }
.lang-switch { display: flex; align-items: center; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 100px; padding: 3px; gap: 2px; flex-shrink: 0; }
.lang-btn { color: var(--muted); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 100px; text-decoration: none; transition: background .2s, color .2s, box-shadow .2s; }
.lang-btn:hover { color: var(--text); }
.lang-btn.active { background: var(--green); color: var(--dark); box-shadow: 0 0 14px rgba(61,214,57,0.4); }
.nav-login-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(61,214,57,0.1); border: 1px solid rgba(61,214,57,0.35); color: var(--text); font-weight: 600; font-size: 0.84rem; padding: 8px 16px; border-radius: var(--radius-btn); text-decoration: none; white-space: nowrap; transition: background .2s, transform .15s; cursor: pointer; font-family: inherit; }
.nav-login-btn:hover { background: rgba(61,214,57,0.18); transform: translateY(-1px); }
.nav-login-btn svg { width: 15px; height: 15px; flex-shrink: 0; fill: var(--green); }
.nav-login-btn.nav-login-twitch { background: rgba(145,70,255,0.12); border-color: rgba(145,70,255,0.4); }
.nav-login-btn.nav-login-twitch:hover { background: rgba(145,70,255,0.22); }
.nav-login-btn.nav-login-twitch svg { fill: #9146FF; }
.nav-login-btn.nav-login-twitch span { transition: color .2s; }
.nav-login-btn.nav-login-twitch:hover span { color: #9146FF; }
.nav-login-btn.nav-login-kick { background: rgba(83,252,24,0.12); border-color: rgba(83,252,24,0.4); }
.nav-login-btn.nav-login-kick:hover { background: rgba(83,252,24,0.22); }
.nav-login-btn.nav-login-kick svg { fill: #53FC18; }
.nav-login-btn.nav-login-kick span { transition: color .2s; }
.nav-login-btn.nav-login-kick:hover span { color: #53FC18; }
/* === MAIL-LOGIN/REGISTRIERUNG MODAL === */
#email-auth-overlay { position: fixed; inset: 0; z-index: 999998; display: none; align-items: center; justify-content: center; background: rgba(8,10,8,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 20px; }
#email-auth-overlay.open { display: flex; }
#email-auth-box { background: #181D17; border: 1px solid rgba(61,214,57,0.35); border-radius: 20px; padding: 36px 34px; max-width: 400px; width: 100%; box-shadow: 0 0 60px rgba(61,214,57,0.1), 0 0 120px rgba(61,214,57,0.05); position: relative; }
#email-auth-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--muted); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
#email-auth-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }
#email-auth-tabs { display: flex; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 100px; padding: 3px; gap: 2px; margin-bottom: 24px; }
.email-auth-tab { flex: 1; text-align: center; padding: 8px 10px; border-radius: 100px; font-size: 0.82rem; font-weight: 700; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; user-select: none; }
.email-auth-tab.active { background: var(--green); color: var(--dark); }
#email-auth-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; color: #fff; letter-spacing: 0.04em; margin-bottom: 18px; text-align: center; }
.email-auth-field { margin-bottom: 14px; }
.email-auth-field label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.email-auth-input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text); font-size: 0.92rem; padding: 11px 14px; border-radius: 8px; font-family: inherit; outline: none; transition: border-color .2s; }
.email-auth-input:focus { border-color: var(--border-strong); }
#email-auth-submit { display: block; width: 100%; background: var(--green); color: var(--dark); font-weight: 700; font-size: 0.96rem; padding: 13px; border-radius: 10px; border: none; cursor: pointer; transition: background .2s, box-shadow .2s; box-shadow: 0 0 24px rgba(61,214,57,0.3); margin-top: 6px; font-family: inherit; }
#email-auth-submit:hover { background: var(--green-light); box-shadow: 0 0 36px rgba(61,214,57,0.5); }
#email-auth-error { color: #ff6b6b; font-size: 0.82rem; margin-top: 10px; text-align: center; display: none; }
/* === LOGIN-CHOICE OVERLAY (Auswahl Twitch/Kick, v.a. mobile Bottom-Bar) === */
#login-choice-overlay { position: fixed; inset: 0; z-index: 999998; display: none; align-items: center; justify-content: center; background: rgba(8,10,8,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 20px; }
#login-choice-overlay.open { display: flex; }
#login-choice-box { background: #181D17; border: 1px solid rgba(61,214,57,0.35); border-radius: 20px; padding: 32px 30px; max-width: 340px; width: 100%; box-shadow: 0 0 60px rgba(61,214,57,0.1), 0 0 120px rgba(61,214,57,0.05); position: relative; }
#login-choice-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--muted); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
#login-choice-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }
#login-choice-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: #fff; letter-spacing: 0.04em; margin-bottom: 18px; text-align: center; }
#login-choice-buttons { display: flex; flex-direction: column; gap: 10px; }
/* Buttons mit Icon + Name (die Nav-Regel "nur Icon auf dem Handy" gilt hier bewusst nicht) */
#login-choice-buttons .nav-login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 18px; font-size: 1rem; }
#login-choice-buttons .nav-login-btn span { display: inline; }
#login-choice-buttons .nav-login-btn svg { width: 20px; height: 20px; }
.nav-account { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 100px; padding: 5px 6px 5px 14px; }
.nav-account .nav-account-name { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.nav-account .nav-account-name:hover { color: var(--green); }
.nav-account .nav-logout-btn { color: var(--muted); font-size: 0.76rem; font-weight: 700; text-decoration: none; background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 100px; transition: background .2s, color .2s; }
.nav-account .nav-logout-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
@media (max-width: 640px) {
.nav-login-btn { font-size: 0.78rem; padding: 7px 13px; }
.nav-account .nav-account-name { max-width: 80px; }
}
.nav-burger { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px; width: 38px; height: 38px; flex-shrink: 0; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--white); transition: transform .2s ease, opacity .2s ease; }
/* === MOBILE BOTTOM-BAR (App-Style Quick-Nav) === */
#mobile-bottombar { display: none; }
@media (max-width: 900px) {
#mobile-bottombar {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; z-index: 200;
justify-content: space-evenly; align-items: center;
padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
background: rgba(13,17,13,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--border); box-shadow: 0 -8px 28px rgba(0,0,0,0.4);
}
body { padding-bottom: 64px; }
}
.bb-item { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1 1 0; min-width: 0; padding: 5px 2px; color: var(--muted); text-decoration: none; cursor: pointer; transition: color .2s; position: relative; }
.bb-item svg { width: 21px; height: 21px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bb-item span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
#mobile-bottombar { overflow: hidden; }
#mobile-bottombar .bb-item svg { width: 23px; height: 23px; }
@media (max-width: 420px) { .bb-item span { font-size: 0.6rem; letter-spacing: 0.01em; } }
@media (max-width: 360px) { .bb-item span { font-size: 0.54rem; letter-spacing: 0; } .bb-item svg { width: 20px; height: 20px; } }
.bb-item.active { color: var(--green); }
.bb-item.active svg { filter: drop-shadow(0 0 6px rgba(61,214,57,0.6)); }
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 900px) {
nav#nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; height: auto; padding: 12px 4vw; position: fixed; gap: 8px; }
.nav-burger { display: flex; order: 1; position: relative; z-index: 1; flex-shrink: 0; }
.nav-logo { order: 2; font-size: 1.5rem; white-space: nowrap; flex-shrink: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nav-logo img.brand-logo-img { height: 46px; }
.nav-right { order: 3; margin-left: 0; position: relative; z-index: 1; flex-shrink: 1; min-width: 0; }
.nav-right .nav-cta { display: none; }
.nav-right .nav-login-btn, .nav-right .nav-account { display: none; }
.nav-tabs {
order: 4; position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
flex-direction: column; gap: 0; justify-self: auto;
background: var(--dark2); border: none; border-bottom: 1px solid var(--border);
border-radius: 0; padding: 0;
box-shadow: 0 16px 28px rgba(0,0,0,0.45);
max-height: 0; overflow: hidden; transition: max-height .25s ease;
}
.nav-tabs li a { border-radius: 0; }
.nav-tabs li a.active { box-shadow: none; }
.nav-tabs.open { max-height: 60vh; overflow-y: auto; }
.nav-tabs li { width: 100%; }
.nav-tabs li a { width: 100%; padding: 15px 5vw; border-radius: 0; font-size: 0.95rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-tabs .nav-cta-item { padding: 14px 5vw 16px; }
.nav-tabs .nav-cta-item a.nav-cta { display: flex; justify-content: center; width: 100%; box-sizing: border-box; padding: 11px 16px; font-size: 0.85rem; }
.nav-tabs .nav-login-item { padding: 14px 5vw; display: flex; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-tabs .nav-login-item .nav-login-btn { width: 100%; justify-content: center; }
.nav-tabs .nav-login-item .nav-login-btn span { display: inline; }
.nav-tabs .nav-login-item .nav-account { width: 100%; justify-content: space-between; }
.nav-tabs .nav-login-item .nav-account-name { max-width: none; }
/* Login/Account-Bereich lebt auf Mobile nur noch in der Bottom-Bar
(Profil-Icon) - im Hamburger-Menü würde er sich sonst doppeln. */
.nav-tabs .nav-login-item { display: none; }
}
@media (min-width: 901px) {
.nav-tabs .nav-cta-item { display: none; }
.nav-tabs .nav-login-item { display: none; }
}
/* Admin-Schalter (giveaway-admin.php -> "Login-Buttons"): blendet den
Twitch-Login-Button bzw. den Login-Button der mobilen Bottom-Bar komplett
aus - auf Desktop UND Handy gleichermaßen. */
body.hide-twitch .nav-right .nav-login-btn.nav-login-twitch,
body.hide-twitch .nav-tabs .nav-login-item .nav-login-btn.nav-login-twitch,
body.hide-twitch .profil-guest .nav-login-btn.nav-login-twitch { display: none; }
body.hide-kick .nav-right .nav-login-btn.nav-login-kick,
body.hide-kick .nav-tabs .nav-login-item .nav-login-btn.nav-login-kick,
body.hide-kick .profil-guest .nav-login-btn.nav-login-kick { display: none; }
/* Leeres nav-login-item ausblenden: nur wenn WEDER Mail-Login-Button NOCH
ein noch aktiver OAuth-Button (Twitch/Kick) übrig bleibt. */
body.hide-twitch.hide-kick .nav-tabs .nav-login-item:not(:has(.email-auth-open-btn)) { display: none; }
body.hide-login #mobile-bottombar .bb-login-btn { display: none; }
@media (max-width: 400px) {
.nav-logo { font-size: 1.1rem; }
.nav-logo img.brand-logo-img { height: 38px; }
.lang-btn { font-size: 0.68rem; padding: 4px 9px; }
.nav-cta { padding: 6px 11px; font-size: 0.72rem; }
.nav-login-btn span { display: none; } /* nur Icon anzeigen, Text weg wegen Platz */
.nav-login-btn { padding: 7px 10px; }
.nav-right .nav-account .nav-account-name { display: none; }
.nav-right .nav-account { padding: 4px 4px 4px 10px; }
.nav-right { gap: 8px; }
}
#home { position: relative; z-index: 1; padding: 76px 5vw 48px; text-align: center; }
.hero-content { position: relative; z-index: 1; }
.hero-kicker { font-family: var(--font-display), sans-serif; font-size: 1.1rem; letter-spacing: 0.1em; margin-bottom: 14px; opacity: 0.75; animation: fadeUp .6s ease both; }
.hero-kicker .num { color: var(--green); } .hero-kicker .word { color: var(--white); }
.hero-kicker img.brand-logo-img { height: 120px; width: auto; display: block; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(61,214,57,0.1); border: 1px solid rgba(61,214,57,0.3); border-radius: 100px; padding: 6px 18px; font-size: 0.82rem; font-weight: 600; color: var(--green); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 18px; animation: fadeUp .6s .05s ease both; }
.hero-title-main { font-family: var(--font-display), sans-serif; font-size: clamp(2.6rem, 6.5vw, 4.6rem); line-height: 1.05; letter-spacing: 0.02em; color: var(--white); margin-bottom: 16px; animation: fadeUp .6s .1s ease both; }
.hero-title-main .accent { color: var(--green); animation: titleGlow 2.6s ease-in-out infinite; }
@keyframes titleGlow { 0%, 100% { text-shadow: 0 0 18px rgba(61,214,57,0.35); } 50% { text-shadow: 0 0 34px rgba(61,214,57,0.75), 0 0 8px rgba(114,245,110,0.5); } }
@media (prefers-reduced-motion: reduce) { .hero-title-main .accent { animation: none; } }
.hero-title { font-family: var(--font-display), sans-serif; font-size: clamp(3.5rem, 10vw, 7.5rem); line-height: 0.93; letter-spacing: 0.02em; margin-bottom: 26px; animation: fadeUp .6s .1s ease both; }
.hero-title .num { color: var(--green); } .hero-title .word { color: var(--white); }
.hero-title-sub { font-size: 0.55em; color: var(--muted); letter-spacing: 0.08em; }
@media (max-width: 900px) { .hero-title-sub { font-size: 0.68em; } }
.hero-sub { font-size: clamp(1rem, 2vw, 1.18rem); color: var(--muted); max-width: 500px; margin: 0 auto 26px; line-height: 1.65; font-weight: 300; animation: fadeUp .6s .2s ease both; }
.hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; animation: fadeUp .6s .3s ease both; }
.btn-primary { background: var(--green); color: var(--dark); font-weight: 700; padding: 14px 32px; border-radius: 10px; font-size: 1rem; text-decoration: none; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 0 32px rgba(61,214,57,0.3); }
.btn-primary:hover { background: var(--green-light); transform: translateY(-2px); box-shadow: 0 0 52px rgba(61,214,57,0.5); }
.btn-ghost { border: 1px solid var(--border); color: var(--text); font-weight: 500; padding: 14px 32px; border-radius: 10px; font-size: 1rem; text-decoration: none; transition: border-color .2s, background .2s; }
.btn-ghost:hover { border-color: var(--green); background: rgba(61,214,57,0.05); color: var(--green); }
.stats-strip { position: relative; z-index: 1; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 0 5vw 56px; animation: fadeUp .6s .4s ease both; }
.stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 22px 36px; text-align: center; backdrop-filter: blur(8px); transition: border-color .25s, box-shadow .25s; }
.stat-card:hover { border-color: var(--border-strong); box-shadow: 0 0 24px rgba(61,214,57,0.1); }
.stat-num { font-family: var(--font-display), sans-serif; font-size: 2.5rem; color: var(--green); line-height: 1; }
.stat-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 5px; }
.section { position: relative; z-index: 1; padding: 80px 5vw 40px; display: none; scroll-margin-top: 90px; }
.section.active { display: block; }
.section-header { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-bottom: 56px; text-align: center; gap: 16px; }
.section-title { font-family: var(--font-display), sans-serif; font-size: clamp(3.2rem, 7vw, 5.6rem); line-height: 0.98; letter-spacing: 0.025em; color: var(--white); text-transform: uppercase; }
.section-title .accent { color: var(--green); }
.section-sub { color: var(--muted); font-size: clamp(0.95rem, 1.4vw, 1.08rem); max-width: 420px; line-height: 1.6; }
.casino-ticker { position: sticky; top: var(--nav-h, 68px); z-index: 60; margin: -80px -5vw 44px; overflow: hidden; background: linear-gradient(180deg, var(--dark2) 0%, var(--dark3) 100%); border-bottom: 1px solid var(--border-strong); padding: 15px 0; box-shadow: 0 4px 20px rgba(0,0,0,0.35); }
.casino-ticker::before, .casino-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none; }
.casino-ticker::before { left: 0; background: linear-gradient(90deg, var(--dark2), transparent); }
.casino-ticker::after { right: 0; background: linear-gradient(270deg, var(--dark3), transparent); }
.casino-ticker-track { display: flex; width: max-content; animation: casinoTickerScroll linear infinite; animation-duration: var(--ct-duration, 45s); }
.casino-ticker-track:hover { animation-play-state: paused; }
.casino-ticker-item { display: flex; align-items: center; gap: 10px; padding: 0 26px; white-space: nowrap; font-size: 0.92rem; border-right: 1px solid var(--border); flex-shrink: 0; }
.casino-ticker-item .ct-name { color: var(--muted); opacity: .8; font-weight: 500; }
.casino-ticker-item .ct-bonus { color: var(--green); font-weight: 700; }
.casino-ticker-item .ct-logo-wrap { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: var(--dark3); border: 1px solid var(--border); border-radius: 9px; flex-shrink: 0; overflow: hidden; }
.casino-ticker-item .ct-logo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9px; }
@media (max-width: 640px) { .casino-ticker-item .ct-logo-wrap { width: 26px; height: 26px; border-radius: 8px; } .casino-ticker-item .ct-logo { border-radius: 8px; } }
@keyframes casinoTickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .casino-ticker { margin: -60px -4vw 32px; padding: 12px 0; } .casino-ticker-item { padding: 0 18px; font-size: 0.84rem; } }
@media (prefers-reduced-motion: reduce) { .casino-ticker-track { animation: none; } }
.cc-hero { position: relative; z-index: 1; text-align: center; margin-bottom: 56px; }
.cc-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(61,214,57,0.1); border: 1px solid rgba(61,214,57,0.3); border-radius: 100px; padding: 6px 18px; font-size: 0.78rem; font-weight: 600; color: var(--green); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 22px; }
.cc-hero-title { font-family: var(--font-display), sans-serif; font-size: clamp(3.2rem, 8vw, 6.2rem); line-height: 1.03; letter-spacing: 0.02em; color: var(--white); margin-bottom: 20px; text-transform: uppercase; }
.cc-hero-title .accent { color: var(--green); }
.cc-hero-sub { font-size: clamp(0.92rem, 1.6vw, 1.02rem); color: var(--muted); max-width: 480px; margin: 0 auto 36px; line-height: 1.6; font-weight: 300; }
.cc-hero-stats { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .cc-hero-stats .stat-card { padding: 16px 22px; } }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.giveaway-campaign{margin-bottom:28px;}
@keyframes gcnSlideIn{from{opacity:0;transform:translateY(-18px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes gcnGlow{0%,100%{box-shadow:0 0 0 rgba(61,214,57,0);}50%{box-shadow:0 0 22px rgba(61,214,57,0.22);}}
@keyframes gcnIconPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.16);}}
.giveaway-campaign .section-title{position:relative;display:inline-block;}
.giveaway-campaign-notice{position:relative;display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,rgba(61,214,57,0.12),rgba(61,214,57,0.03));border:1px solid rgba(61,214,57,0.35);border-radius:var(--radius-card);padding:18px 44px 18px 18px;margin-bottom:22px;animation:gcnSlideIn .6s cubic-bezier(.16,1,.3,1) both, gcnGlow 3.2s ease-in-out .6s infinite;}
.giveaway-campaign-notice .gcn-icon{font-size:1.4rem;line-height:1;flex-shrink:0;animation:gcnIconPulse 2.4s ease-in-out .6s infinite;}
.giveaway-campaign-notice .gcn-body{min-width:0;}
.giveaway-campaign-notice .gcn-title{font-weight:700;color:var(--green);margin-bottom:6px;font-size:1rem;}
.giveaway-campaign-notice .gcn-text{font-size:0.9rem;line-height:1.65;color:var(--text);opacity:.95;}
.giveaway-campaign-notice .gcn-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer;padding:6px;border-radius:8px;transition:color .15s,background .15s;}
.giveaway-campaign-notice .gcn-close:hover{color:var(--text);background:rgba(255,255,255,0.06);}
@media (max-width:480px){ .giveaway-campaign-notice{padding:16px 40px 16px 14px;gap:10px;} }
/* Notifier "Doppelte Tickets aktiv" (Giveaway-Tab + Badge an den Tab-Buttons) */
@keyframes gmbGlow{0%,100%{box-shadow:0 0 0 rgba(255,183,3,0);}50%{box-shadow:0 0 26px rgba(255,183,3,0.28);}}
@keyframes gmbDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.7);}}
.giveaway-multi-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,rgba(255,183,3,0.16),rgba(255,183,3,0.04));border:1px solid rgba(255,183,3,0.5);border-radius:var(--radius-card);padding:16px 20px;margin-bottom:22px;animation:gcnSlideIn .6s cubic-bezier(.16,1,.3,1) both, gmbGlow 2.8s ease-in-out .6s infinite;}
.giveaway-multi-banner .gmb-badge{flex-shrink:0;min-width:58px;height:58px;padding:0 8px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(135deg,#ffd166,#ffb703);color:#1a1200;font-weight:800;font-size:1.45rem;letter-spacing:-.02em;}
.giveaway-multi-banner .gmb-body{min-width:0;}
.giveaway-multi-banner .gmb-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.05rem;color:#ffb703;margin-bottom:4px;}
.giveaway-multi-banner .gmb-dot{width:9px;height:9px;border-radius:50%;background:#ffb703;flex-shrink:0;animation:gmbDot 1.4s ease-in-out infinite;}
.giveaway-multi-banner .gmb-text{font-size:0.92rem;line-height:1.55;color:var(--text);}
.giveaway-multi-banner .gmb-hint{font-size:0.78rem;color:var(--muted);margin-top:3px;}
@media (max-width:480px){ .giveaway-multi-banner{padding:14px;gap:12px;} .giveaway-multi-banner .gmb-badge{min-width:48px;height:48px;font-size:1.2rem;border-radius:13px;} }
.gm-badge{display:inline-flex;align-items:center;justify-content:center;background:#ffb703;color:#1a1200;font-size:0.62rem;font-weight:800;line-height:1;padding:3px 6px;border-radius:999px;letter-spacing:.02em;animation:gmbDot 1.6s ease-in-out infinite;}
.bb-item .gm-badge{position:absolute;top:0;left:calc(50% + 6px);padding:2px 5px;font-size:0.52rem;}
@media (prefers-reduced-motion:reduce){ .giveaway-multi-banner,.giveaway-multi-banner .gmb-dot,.gm-badge{animation:none;} }
.giveaway-campaign-banner{display:block;width:100%;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--border);margin-bottom:22px;}
.giveaway-campaign-banner img{width:100%;height:auto;display:block;transition:transform .3s;}
.giveaway-campaign-banner:hover img{transform:scale(1.015);}
.giveaway-campaign-meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px;}
/* "Werbe-Fernseher": Fließtext läuft wie ein Abspann von unten nach oben durch,
eingerahmt in ein simples CSS-TV-Gehäuse passend zum Neon/Dark-Theme. */
.giveaway-campaign-tv{position:relative;margin:0 0 26px;padding:18px 18px 30px;background:linear-gradient(155deg,#232323,#0c0c0c);border-radius:24px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 12px 30px rgba(0,0,0,0.45),inset 0 0 0 2px rgba(255,255,255,0.03);}
.giveaway-campaign-tv-cam{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);}
.giveaway-campaign-tv-screen{position:relative;height:230px;overflow:hidden;border-radius:14px;background:radial-gradient(circle at 50% 0%,rgba(61,214,57,0.10),#050505 72%);border:1px solid rgba(61,214,57,0.28);box-shadow:inset 0 0 40px rgba(0,0,0,0.85);}
.giveaway-campaign-tv-screen::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,0.025) 0px,rgba(255,255,255,0.025) 1px,transparent 2px,transparent 3px);pointer-events:none;}
.giveaway-campaign-intro{position:absolute;left:0;right:0;top:100%;margin:0;padding:0 24px;font-size:0.95rem;line-height:1.65;color:var(--text);opacity:.95;animation:gct-crawl var(--gct-speed, 70s) linear infinite;}
@keyframes gct-crawl{from{transform:translateY(0);}to{transform:translateY(-100%);}}
@media (max-width: 640px){
.giveaway-campaign-intro{animation-duration:calc(var(--gct-speed, 70s) * 1.55);}
}
@media (prefers-reduced-motion: reduce){
.giveaway-campaign-tv{background:none;border:none;box-shadow:none;padding:0;}
.giveaway-campaign-tv-cam{display:none;}
.giveaway-campaign-tv-screen{height:auto;overflow:visible;background:none;border:none;box-shadow:none;}
.giveaway-campaign-tv-screen::after{display:none;}
.giveaway-campaign-intro{position:static;animation:none;padding:0;max-width:820px;}
}
.gcm-chip{display:inline-flex;align-items:center;gap:7px;background:var(--card-bg);border:1px solid var(--border);border-radius:100px;padding:9px 16px;font-size:0.85rem;color:var(--text);backdrop-filter:blur(8px);}
.gcm-chip strong{color:var(--green);}
.giveaway-campaign-prizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:22px;}
.gcp-item{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:16px 12px;text-align:center;backdrop-filter:blur(8px);}
.gcp-item.is-first{border-color:var(--green);box-shadow:0 0 22px rgba(61,214,57,0.25);}
.gcp-rank{font-family:var(--font-display),sans-serif;font-size:0.85rem;color:var(--muted);letter-spacing:0.06em;margin-bottom:6px;}
.gcp-item.is-first .gcp-rank{color:var(--green);}
.gcp-prize{font-weight:600;font-size:0.86rem;margin-bottom:4px;color:var(--text);}
.gcp-value{font-family:var(--font-display),sans-serif;font-size:1.35rem;color:var(--green);letter-spacing:0.02em;}
/* Countdown bis zur Auslosung ("Auslosung in") */
.giveaway-campaign-timer{margin-bottom:26px;}
.gct-countdown{display:flex;gap:12px;flex-wrap:wrap;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-card);padding:22px;backdrop-filter:blur(8px);}
.gct-cd-item{flex:1;min-width:70px;text-align:center;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:14px;padding:14px 8px;}
.gct-cd-num{font-family:var(--font-display),sans-serif;font-size:clamp(1.8rem,5vw,2.4rem);line-height:1;color:var(--green);text-shadow:0 0 18px rgba(61,214,57,0.4);}
.gct-cd-label{margin-top:6px;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
/* Animiertes Balkendiagramm für die Gewinne */
.giveaway-campaign-gewinne{margin-bottom:22px;}
.gcg-bars{display:flex;align-items:stretch;justify-content:center;gap:clamp(8px,2vw,20px);height:260px;max-width:720px;margin:6px auto 0;padding:6px 2px 0;}
.gcg-bar-col{flex:1;max-width:100px;display:flex;flex-direction:column;align-items:center;min-width:0;}
.gcg-bar-value{font-family:var(--font-display),sans-serif;color:var(--green);font-size:0.85rem;margin-bottom:8px;white-space:nowrap;}
.gcg-bar-area{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;}
.gcg-bar{width:100%;max-width:54px;background:linear-gradient(180deg,var(--green-light),var(--green));border-radius:10px 10px 4px 4px;transform-origin:bottom;animation:gcg-grow .8s cubic-bezier(.22,.9,.3,1) both;box-shadow:0 0 16px rgba(61,214,57,0.3);}
.gcg-bar-col.is-first .gcg-bar{box-shadow:0 0 24px rgba(61,214,57,0.6);}
.gcg-bar-rank{margin-top:10px;font-size:0.7rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.gcg-bar-col.is-first .gcg-bar-rank{color:var(--green);}
.gcg-bar-prize{font-size:0.78rem;font-weight:600;color:var(--text);text-align:center;margin-top:2px;line-height:1.25;}
@keyframes gcg-grow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@media (max-width:640px){
.gcg-bars{height:210px;}
.gcg-bar-value{font-size:0.72rem;}
.gcg-bar-prize{font-size:0.68rem;}
}
@media (prefers-reduced-motion: reduce){
.gcg-bar{animation:none;}
}
.giveaway-campaign-cta{display:flex;width:fit-content;align-items:center;justify-content:center;gap:8px;background:var(--green);color:var(--dark);font-weight:700;padding:13px 26px;border-radius:var(--radius-btn);text-decoration:none;font-size:0.95rem;box-shadow:0 0 20px rgba(61,214,57,0.3);transition:background .2s, transform .15s, box-shadow .2s;margin:0 auto 10px;}
.giveaway-campaign-cta:hover{background:var(--green-light);transform:translateY(-1px);box-shadow:0 0 32px rgba(61,214,57,0.5);}
.giveaway-campaign-note{font-size:0.82rem;color:var(--muted);opacity:.8;margin:0 0 22px;text-align:center;}
.giveaway-campaign-terms{background:transparent;border:none;border-radius:var(--radius-card);padding:26px 0;}
.gct-faq-heading{font-family:var(--font-display),sans-serif;font-size:1.05rem;letter-spacing:0.3px;margin:0 0 16px;color:var(--green);}
.gct-faq-grid.faq-grid{grid-template-columns:1fr 1fr;max-width:none;margin:0;gap:10px;}
@media (max-width:760px){ .gct-faq-grid.faq-grid{grid-template-columns:1fr;} }
.gct-faq-grid .faq-item{padding:16px 18px;}
.gct-faq-grid .faq-q{font-size:0.92rem;}
.gct-faq-grid .faq-a{font-size:0.86rem;}
.giveaway-campaign-profile-link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;padding:12px 22px;color:var(--green);font-weight:700;font-size:0.9rem;text-decoration:none;background:rgba(0,255,0,0.06);border:1px solid rgba(0,255,0,0.25);border-radius:999px;transition:background .2s,border-color .2s,transform .2s;}
.giveaway-campaign-profile-link:hover{background:rgba(0,255,0,0.12);border-color:var(--green);transform:translateY(-1px);}
.giveaway-campaign-profile-link svg{width:15px;height:15px;flex-shrink:0;transition:transform .2s;}
.giveaway-campaign-profile-link:hover svg{transform:translateX(3px);}
@media (max-width:480px){ .giveaway-campaign-terms{padding:20px;} }
.giveaway-terms-box{background:var(--hintergrund2, #181D17);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:22px 26px;margin-top:28px;}
.giveaway-terms-box h3{margin:0 0 12px;font-size:17px;}
.giveaway-terms-box ul{margin:0;padding-left:20px;color:var(--textGedaempft, #E8F0E8);font-size:14px;line-height:1.7;}
.giveaway-tickets-box{background:var(--hintergrund2, #181D17);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:22px 26px;margin-top:28px;}
.giveaway-tickets-box h3{margin:0 0 16px;font-size:17px;color:var(--green);}
.gtt-table-wrap{overflow-x:auto;}
.gtt-table{width:100%;border-collapse:collapse;font-size:0.86rem;}
.gtt-table th{text-align:left;padding:10px 14px;color:var(--muted);font-weight:600;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.3px;border-bottom:1px solid var(--border);white-space:nowrap;}
.gtt-table td{padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap;}
.gtt-table tr:last-child td{border-bottom:none;}
.gtt-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:0.74rem;font-weight:700;}
.gtt-st-offen{background:rgba(255,193,7,0.15);color:#ffc107;}
.gtt-st-ok{background:rgba(61,214,57,0.15);color:var(--green);}
.gtt-st-no{background:rgba(229,72,77,0.15);color:#ff8f92;}
.gtt-empty{color:var(--muted);opacity:.75;font-size:0.88rem;padding:10px 2px;}
.giveaway-embed{margin-top:24px;}
.giveaway-embed h3{margin:0 0 12px;font-size:17px;}
.giveaway-ticket-mount{width:100%;min-height:200px;border:1px solid rgba(255,255,255,0.08);border-radius:16px;background:transparent;padding:20px;box-sizing:border-box;}
.giveaway-ticket-loading{color:var(--muted);text-align:center;padding:40px 0;}
.giveaway-ticket-error{color:var(--muted);text-align:center;padding:40px 0;}
.giveaway-embed-locked{background:var(--hintergrund2, #181D17);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:30px;text-align:center;color:var(--textGedaempft, #E8F0E8);}
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; backdrop-filter: blur(8px); position: relative; }
.card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 24px rgba(61,214,57,0.1); }
.card-thumb { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; font-size: 3.2rem; background: linear-gradient(135deg, var(--dark2), var(--dark3)); border-bottom: 1px solid var(--border); overflow: hidden; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 22px; }
.card-tag { display: inline-block; background: rgba(61,214,57,0.1); color: var(--green); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; margin-bottom: 12px; border: 1px solid rgba(61,214,57,0.2); }
.card-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; line-height: 1.35; color: var(--white); }
.card-desc { color: var(--muted); font-size: 0.88rem; line-height: 1.55; margin-bottom: 18px; }
.card-bonus { font-family: var(--font-display), sans-serif; font-size: 1.9rem; color: var(--green); margin-bottom: 14px; letter-spacing: 0.04em; }
.card-btn { display: block; text-align: center; background: var(--green); color: var(--dark); font-weight: 700; font-size: 0.88rem; padding: 11px; border-radius: var(--radius-btn); text-decoration: none; transition: background .2s, box-shadow .2s; }
.card-btn:hover { background: var(--green-light); }
.ribbon { position: absolute; top: 16px; right: -8px; background: var(--green); color: var(--dark); font-size: 0.7rem; font-weight: 800; padding: 4px 14px 4px 10px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); letter-spacing: 0.06em; text-transform: uppercase; }
/* === Suche + Filter in EINER gemeinsamen Box ===
.cs-filter-combo ist der äußere Rahmen (Card-Look inkl. Blur/Shadow),
Suchfeld und Filter-Accordion sitzen darin ohne eigene Border/Radius/Shadow
und werden nur durch eine dünne Trennlinie voneinander abgesetzt. */
.cs-filter-combo { max-width: 900px; margin: 0 auto 32px; background: var(--card-bg-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 16px 44px rgba(0,0,0,0.4); overflow: hidden; transition: border-color .2s; }
.cs-filter-combo:focus-within { border-color: var(--border-strong); }
.casino-filters-bar { display: flex; flex-direction: column; gap: 20px; background: transparent; border: none; border-radius: 0; padding: 20px 28px 24px; box-shadow: none; }
.cf-accordion { margin: 0; }
.cf-accordion-toggle { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; background: transparent; border: none; border-top: 1px solid var(--border); border-radius: 0; padding: 16px 24px; font-family: inherit; font-size: 0.98rem; font-weight: 700; color: var(--text); cursor: pointer; transition: background .2s; }
.cf-accordion-toggle:hover { background: rgba(255,255,255,0.02); }
.cf-accordion-toggle svg { flex-shrink: 0; }
.cf-accordion-toggle > svg:first-child { width: 17px; height: 17px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; }
.cf-chevron { width: 17px; height: 17px; margin-left: auto; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.cf-accordion[open] .cf-chevron { transform: rotate(180deg); }
.cf-accordion-toggle { list-style: none; }
.cf-accordion-toggle::-webkit-details-marker { display: none; }
.cf-accordion-toggle .cf-chevron { transition: transform .2s ease; margin-left: auto; }
.cf-panel-inner { display: flex; flex-direction: column; gap: 20px; }
.cs-search-wrap { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; background: transparent; border: none; border-radius: 0; padding: 16px 24px; margin: 0; }
.cs-search-wrap > svg:first-child { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; }
.cs-search-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 0.98rem; font-weight: 500; }
.cs-search-input::placeholder { color: var(--muted); opacity: .6; font-weight: 400; }
.cs-search-clear { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.06); border: none; cursor: pointer; padding: 0; }
.cs-search-clear svg { width: 11px; height: 11px; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; }
.cs-search-clear:hover { background: rgba(255,255,255,0.12); }
.cs-search-clear.show { display: flex; }
.cf-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cf-group-label { color: var(--muted); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; white-space: nowrap; }
.cf-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--card-bg); border: 1px solid var(--border); color: var(--muted); font-size: 0.82rem; font-weight: 600; padding: 8px 16px; border-radius: 100px; cursor: pointer; transition: all .2s; font-family: inherit; white-space: nowrap; }
.filter-chip:hover { border-color: var(--border-strong); color: var(--text); }
.filter-chip.active { background: rgba(61,214,57,0.14); border-color: rgba(61,214,57,0.45); color: var(--green); }
.filter-chip.active::before { content: '✓'; font-size: 0.78rem; }
.cf-bottom-row { justify-content: space-between; padding-top: 4px; border-top: 1px solid var(--border); }
.cf-reset { display: inline-flex; align-items: center; gap: 7px; background: var(--card-bg); border: 1px solid var(--border-strong); color: var(--text); font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; padding: 8px 16px; border-radius: 100px; transition: all .2s; white-space: nowrap; }
.cf-reset svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.cf-reset:hover:not(:disabled) { color: var(--green); border-color: var(--green); background: rgba(61,214,57,0.12); }
.cf-reset:disabled { opacity: 0.45; cursor: default; }
.cf-results { color: var(--muted); font-size: 0.82rem; }
.cf-results strong { color: var(--green); font-weight: 700; }
@media (max-width: 640px) { .casino-filters-bar { padding: 22px 18px 20px; } .cf-row { gap: 10px; } .cf-group-label { width: 100%; } .cf-bottom-row { flex-direction: column; align-items: flex-start; gap: 12px; } }
.cf-range-row { gap: 28px; align-items: flex-start; }
.cf-range-group { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 8px; }
.cf-range-head { display: flex; align-items: center; justify-content: space-between; }
.cf-range-value { color: var(--green); font-size: 0.84rem; font-weight: 700; }
.cf-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 100px; background: rgba(255,255,255,0.08); outline: none; cursor: pointer; }
.cf-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 2px solid var(--dark); box-shadow: 0 0 10px rgba(61,214,57,0.5); transition: transform .15s; }
.cf-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.cf-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 2px solid var(--dark); box-shadow: 0 0 10px rgba(61,214,57,0.5); cursor: pointer; }
@media (max-width: 640px) { .cf-range-row { flex-direction: column; gap: 16px; } }
.casino-list { display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto; }
/* === Listen-/Kachelansicht-Umschalter ===
Standard bleibt die bestehende Listenansicht (.casino-list ohne Zusatzklasse).
Im Kachel-Modus (.view-grid) wird aus der Liste ein responsives Grid und die
Karten selbst werden - auch ab 900px, wo sie sonst zur horizontalen
Zeile werden - wieder vertikal gestapelt (Header/Body/Footer übereinander). */
.cv-toggle-row { display: flex; justify-content: flex-end; max-width: 900px; margin: 0 auto 16px; }
.cv-toggle { display: inline-flex; background: var(--card-bg-strong); border: 1px solid var(--border); border-radius: 100px; padding: 4px; gap: 4px; }
.cv-toggle-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 100px; border: none; background: transparent; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; padding: 0; }
.cv-toggle-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cv-toggle-btn:hover { color: var(--text); }
.cv-toggle-btn.active { background: var(--green); color: var(--dark); }
.casino-list.view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); max-width: 1200px; align-items: start; }
.casino-list.view-grid .casino-card { display: flex; flex-direction: column; }
@media (min-width: 900px) {
.casino-list.view-grid .casino-card { grid-template-columns: none; }
.casino-list.view-grid .cc-header { grid-column: auto; grid-row: auto; border-right: none; border-bottom: 1px solid var(--border); }
.casino-list.view-grid .cc-body { grid-column: auto; grid-row: auto; }
.casino-list.view-grid .cc-footer { grid-column: auto; grid-row: auto; border-left: none; border-top: 1px solid var(--border); }
}
/* === Wheel-Ansicht ("wie an einer Uhr drehen") ===
Dritte Ansicht neben Liste/Kachel: kompakte Karten in vertikalem
Scroll-Snap-Container. Die Karte in der Mitte bleibt volle Breite/Deckkraft,
alle anderen skalieren per JS (scale/width/opacity) nach Abstand zur Mitte -
siehe wheelUpdate() weiter unten im Script. */
.casino-wheel-outer { position: relative; height: min(700px, 78vh); max-width: 900px; margin: 0 auto 20px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, black 8%, black 92%, transparent 100%); }
.wheel-scroll { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wheel-scroll::-webkit-scrollbar { display: none; }
/* Prozentuale Spacer (statt fester px-Werte): passen sich automatisch an
die Höhe von .casino-wheel-outer an, damit auch die erste/letzte Karte
bis zur Mitte gescrollt werden kann. */
.wheel-spacer { height: 50%; }
/* Die Wheel-Karte ist jetzt dieselbe volle .casino-card (Header/Body/Footer
mit allen Bonus-Details) wie in der Listenansicht - "wheel-item" liefert
nur noch scroll-snap, Abstand und die Transform-Transition für den
Dreh-/Skalierungseffekt aus updateWheel(). Optik/Layout kommt von .casino-card. */
.wheel-item { scroll-snap-align: center; margin: 0 auto 24px; transition: transform .15s ease-out, width .15s ease-out, opacity .15s ease-out, border-color .15s; width: 100%; }
/* ".casino-card.wheel-item" (zwei Klassen = höhere Spezifität) statt nur
".wheel-item", damit die spätere "@media (min-width:900px) .casino-card
{display:grid}"-Regel (gleiche Spezifität wie ein einfaches ".wheel-item")
hier nicht gewinnt - genau das gleiche Prinzip wie bei
".casino-list.view-grid .casino-card" oben für die Kachelansicht. */
.casino-card.wheel-item { display: flex; flex-direction: column; }
@media (min-width: 900px) {
.casino-card.wheel-item { grid-template-columns: none; }
.casino-card.wheel-item .cc-header { grid-column: auto; grid-row: auto; border-right: none; border-bottom: 1px solid var(--border); }
.casino-card.wheel-item .cc-body { grid-column: auto; grid-row: auto; }
.casino-card.wheel-item .cc-footer { grid-column: auto; grid-row: auto; border-left: none; border-top: 1px solid var(--border); }
}
.wheel-hint { text-align: center; color: var(--muted); font-size: 0.82rem; margin: 0 0 40px; }
@media (max-width: 560px) {
.casino-wheel-outer { height: min(640px, 82vh); max-width: 100%; }
}
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1120px; margin: 0 auto; }
.faq-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px 26px; backdrop-filter: blur(8px); transition: border-color .25s, box-shadow .25s; cursor: pointer; }
.faq-item:hover { border-color: var(--border-strong); box-shadow: 0 8px 32px rgba(61,214,57,0.1); }
.faq-q-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.faq-q { font-weight: 700; font-size: 1rem; color: var(--white); line-height: 1.4; }
.faq-toggle { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--green); transition: transform .25s, background .25s; margin-top: 1px; }
.faq-toggle svg { width: 12px; height: 12px; stroke: var(--green); stroke-width: 2.4; fill: none; }
.faq-item.open .faq-toggle { background: rgba(61,214,57,0.12); transform: rotate(45deg); }
.faq-a { color: var(--muted); font-size: 0.9rem; line-height: 1.65; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease; margin-top: 0; }
.faq-item.open .faq-a { max-height: 260px; opacity: 0.88; margin-top: 14px; }
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; } }
.casino-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; backdrop-filter: blur(8px); transition: border-color .25s, box-shadow .25s; position: relative; }
.casino-card:hover { border-color: var(--border-strong); box-shadow: 0 8px 32px rgba(61,214,57,0.12); }
.cc-number { position: absolute; top: 16px; left: 16px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: var(--green); border: 1px solid rgba(0,0,0,0.25); color: #08130A; font-size: 0.92rem; font-weight: 800; display: flex; align-items: center; justify-content: center; font-family: var(--font-display), sans-serif; letter-spacing: 0.02em; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.cc-number.gold { background: #FFC832; border-color: rgba(0,0,0,0.25); color: #1A1000; }
.cc-number.silver { background: #D8D8E4; border-color: rgba(0,0,0,0.25); color: #14141C; }
.cc-number.bronze { background: #D9873F; border-color: rgba(0,0,0,0.25); color: #1A0F04; }
.cc-header { display: flex; flex-direction: column; align-items: center; padding: 32px 24px 20px; border-bottom: 1px solid var(--border); background: rgba(61,214,57,0.03); position: relative; }
.cc-icon { width: 80px; height: 80px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; background: var(--dark3); border: 1px solid var(--border); overflow: hidden; margin-bottom: 12px; }
.cc-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.cc-name { font-weight: 700; color: var(--white); font-size: 1.2rem; margin-bottom: 4px; text-align: center; }
.cc-stars-wrap { display: flex; align-items: center; gap: 8px; }
.cc-stars-svg { display: flex; gap: 2px; }
.cc-stars-svg svg { width: 18px; height: 18px; }
.cc-rating-num { color: var(--green); font-weight: 700; font-size: 0.9rem; }
.cc-code-badge { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; background: rgba(61,214,57,0.1); border: 1px dashed rgba(61,214,57,0.45); border-radius: 8px; padding: 5px 8px 5px 12px; font-size: 0.82rem; letter-spacing: 0.03em; }
.cc-code-label { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; }
.cc-code-value { color: var(--green-light); font-weight: 800; letter-spacing: 0.05em; }
.cc-code-copy { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; background: rgba(61,214,57,0.14); border: none; cursor: pointer; padding: 0; margin-left: 2px; transition: background .2s, transform .15s; }
.cc-code-copy:hover { background: rgba(61,214,57,0.28); }
.cc-code-copy:active { transform: scale(0.92); }
.cc-code-copy svg { width: 13px; height: 13px; fill: none; stroke: var(--green-light); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.cc-code-copy.copied svg { stroke: var(--green); }
.cc-body { padding: 18px 24px; display: flex; flex-direction: column; gap: 12px; }
.cc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cc-label { color: var(--text); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.cc-bonus-big { font-family: var(--font-display), sans-serif; font-size: 1.6rem; color: var(--green); letter-spacing: 0.03em; line-height: 1; text-shadow: 0 0 20px rgba(61,214,57,0.35); font-variant-numeric: tabular-nums; }
.cc-bonus-big.is-counting { animation: cc-bonus-pulse 1.4s ease-out; }
@keyframes cc-bonus-pulse {
0% { text-shadow: 0 0 0px rgba(61,214,57,0); }
45% { text-shadow: 0 0 26px rgba(61,214,57,0.65); }
100% { text-shadow: 0 0 20px rgba(61,214,57,0.35); }
}
.cc-divider { height: 1px; background: rgba(255,255,255,0.05); }
.cc-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-pill { font-size: 0.75rem; padding: 4px 10px 4px 6px; border-radius: 100px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.cc-pill-icon { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.cc-badge-wager { background: rgba(255,255,255,0.05); color: var(--text); font-weight: 500; padding: 5px 14px; border-radius: 100px; font-size: 0.82rem; display: inline-block; }
.cc-badge-empty { color: var(--muted); font-size: 0.82rem; }
.cc-badge-fs { background: rgba(61,214,57,0.08); color: var(--green-light); font-weight: 700; padding: 5px 14px; border-radius: 100px; font-size: 0.82rem; border: 1px solid rgba(61,214,57,0.15); display: inline-block; }
.cc-infobox { background: rgba(255,255,255,0.025); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; display: none; grid-template-columns: 1fr; gap: 16px; }
.casino-card.cc-open .cc-infobox { display: grid; }
.cc-infobox-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cc-infobox-col:not(:first-child) { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 14px; }
.cc-infobox-head { display: flex; align-items: center; gap: 7px; color: var(--green); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.cc-license-name { color: var(--text); font-size: 0.9rem; font-weight: 600; }
.cc-features-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.cc-features-list li { color: var(--text); font-size: 0.82rem; line-height: 1.4; padding-left: 14px; position: relative; }
.cc-features-list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(61,214,57,0.6); }
.cc-toggle-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 0.92rem; padding: 12px; border-radius: var(--radius-btn); cursor: pointer; transition: background .2s, border-color .2s; font-family: inherit; width: 100%; margin-bottom: 10px; }
.cc-toggle-btn:hover { background: rgba(255,255,255,0.09); border-color: var(--border-strong); }
.cc-toggle-arrow { transition: transform .2s; font-size: 0.7rem; display: inline-block; }
.casino-card.cc-open .cc-toggle-arrow { transform: rotate(180deg); }
.cc-footer { padding: 16px 24px; border-top: 1px solid var(--border); }
.cc-btn { display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center; background: var(--green); color: var(--dark); font-weight: 700; font-size: 1rem; padding: 14px; border-radius: var(--radius-btn); text-decoration: none; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 0 20px rgba(61,214,57,0.25); }
.cc-btn:hover { background: var(--green-light); transform: translateY(-1px); box-shadow: 0 0 36px rgba(61,214,57,0.45); }
.cc-btn .play-ico { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(8,10,8,0.25); border-radius: 50%; }
.cc-btn .play-ico svg { width: 8px; height: 9px; fill: var(--dark); margin-left: 1px; }
@media (min-width: 900px) {
.casino-card { display: grid; grid-template-columns: 200px 1fr 220px; }
.cc-header { grid-column: 1; grid-row: 1 / 3; border-bottom: none; border-right: 1px solid var(--border); justify-content: center; padding: 24px 18px; }
.cc-body { grid-column: 2; grid-row: 1 / 3; padding: 20px 24px; }
.cc-footer { grid-column: 3; grid-row: 1 / 3; border-top: none; border-left: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.cc-toggle-btn { margin-bottom: 0; }
}
.tw-stream-wrap { max-width: 1200px; margin: 0 auto; }
.tw-live-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(61,214,57,0.1); border: 1px solid rgba(61,214,57,0.3); border-radius: 100px; padding: 5px 16px; font-size: 0.78rem; font-weight: 700; color: var(--green); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 20px; }
.tw-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; animation: livepulse 1.5s infinite; }
.tw-embed-grid { display: grid; grid-template-columns: 1fr 340px; gap: 0; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border); }
.tw-player-wrap { position: relative; padding-top: 56.25%; background: var(--dark2); }
.tw-player-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.tw-chat-wrap { background: var(--dark2); border-left: 1px solid var(--border); position: relative; min-height: 480px; }
.tw-chat-wrap iframe { width: 100%; height: 100%; min-height: 480px; border: none; display: block; }
.tw-actions { margin-top: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.brand-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--card-bg); border: 1px solid var(--border); color: var(--text); font-weight: 700; font-size: 0.88rem; padding: 10px 22px; border-radius: var(--radius-btn); text-decoration: none; backdrop-filter: blur(8px); transition: transform .25s, border-color .25s, box-shadow .25s, color .25s; }
.brand-pill:hover { transform: translateY(-4px); border-color: var(--brand, var(--border-strong)); color: var(--brand, var(--text)); box-shadow: 0 8px 32px rgba(61,214,57,0.1), 0 0 40px -8px var(--brand, transparent); }
.brand-pill-icon { width: 18px; height: 18px; object-fit: contain; filter: brightness(0) invert(1); flex-shrink: 0; }
.brand-pill-sm { padding: 10px 18px; font-size: 13px; gap: 7px; white-space: nowrap; }
.brand-pill-sm .brand-pill-icon { width: 15px; height: 15px; }
.tw-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #4a4a4a; display: inline-block; flex-shrink: 0; transition: background .3s, box-shadow .3s; }
.tw-status-dot.is-live { background: var(--green); box-shadow: 0 0 6px rgba(61,214,57,0.8); animation: livepulse 1.5s infinite; }
.tw-live-badge.is-live-text { color: var(--green); }
.tw-hint { color: var(--muted); font-size: 0.8rem; }
@keyframes livepulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.tw-facade-label { color: var(--text); font-weight: 700; font-size: 0.95rem; }
.tw-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle at 50% 40%, rgba(61,214,57,0.12), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 14px), linear-gradient(180deg, var(--dark3), var(--dark2)); text-align: center; padding: 24px; }
.tw-loading .spin { display: inline-block; width: 36px; height: 36px; border: 3px solid rgba(61,214,57,0.2); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
@media (max-width: 768px) { .tw-embed-grid { grid-template-columns: 1fr; } .tw-chat-wrap { border-left: none; border-top: 1px solid var(--border); } .tw-chat-wrap iframe { min-height: 620px; } .tw-chat-wrap { min-height: 620px; } }
.bh-section { margin-top: 40px; max-width: 1200px; margin-left: auto; margin-right: auto; }
.bh-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.bh-title-wrap { display: flex; align-items: center; gap: 10px; }
.bh-icon-badge { width: 34px; height: 34px; border-radius: 9px; background: rgba(61,214,57,0.12); border: 1px solid rgba(61,214,57,0.35); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.bh-title { font-family: var(--font-display), sans-serif; font-size: 2.1rem; letter-spacing: 0.03em; color: var(--white); line-height: 1; text-transform: uppercase; }
.bh-title .accent { color: var(--green); }
.bh-live-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(61,214,57,0.1); border: 1px solid rgba(61,214,57,0.3); border-radius: 100px; padding: 5px 14px; font-size: 0.74rem; font-weight: 700; color: var(--green); letter-spacing: 0.06em; text-transform: uppercase; }
.clips-wrap { position: relative; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--dark2); min-height: 280px; }
.clips-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.clips-facade { position: static; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 24px; background: radial-gradient(circle at 50% 35%, rgba(61,214,57,0.10), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 14px), linear-gradient(180deg, var(--dark3), var(--dark2)); text-align: center; }
.clips-facade:hover .clips-play-circle { transform: scale(1.07); box-shadow: 0 0 50px rgba(61,214,57,0.6); }
.clips-play-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 36px rgba(61,214,57,0.45); transition: transform .2s, box-shadow .2s; font-size: 1.6rem; }
.clips-facade-label { color: var(--text); font-weight: 700; font-size: 0.95rem; }
.clips-facade-sub { color: var(--muted); font-size: 0.8rem; max-width: 280px; line-height: 1.5; }
.clips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: center; gap: 18px; padding: 20px; align-items: start; }
.clip-card { position: relative; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--dark2); cursor: pointer; transition: border-color .25s, transform .25s, box-shadow .25s; }
.clip-card:hover { border-color: rgba(61,214,57,0.4); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.clip-thumb-wrap { position: relative; padding-top: 56.25%; background: var(--dark3); overflow: hidden; }
.clip-thumb-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.15); transition: background .2s; }
.clip-card:hover .clip-play-overlay { background: rgba(0,0,0,0.35); }
.clip-play-btn { width: 46px; height: 46px; border-radius: 50%; background: rgba(61,214,57,0.92); display: flex; align-items: center; justify-content: center; color: var(--dark); font-size: 1.05rem; box-shadow: 0 0 24px rgba(61,214,57,0.5); transition: transform .2s; }
.clip-card:hover .clip-play-btn { transform: scale(1.12); }
.clip-duration { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,0.75); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.clip-meta { padding: 12px 14px 14px; }
.clip-title { color: var(--text); font-weight: 700; font-size: 0.85rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.clip-sub { color: var(--muted); font-size: 0.73rem; }
.clip-embed-wrap { position: relative; padding-top: 56.25%; background: #000; }
.clip-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.clips-empty { padding: 40px 24px; text-align: center; color: var(--muted); font-size: 0.88rem; }
.clips-loading-grid { display: flex; align-items: center; justify-content: center; padding: 60px 24px; }
.social-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.social-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 32px 24px; text-align: center; transition: transform .25s, border-color .25s, box-shadow .25s; backdrop-filter: blur(8px); text-decoration: none; color: inherit; display: block; width: 200px; flex-shrink: 0; }
.social-card:hover { transform: translateY(-4px); border-color: var(--brand, var(--border-strong)); box-shadow: 0 8px 32px rgba(61,214,57,0.1), 0 0 40px -8px var(--brand, transparent); }
.social-icon-wrap { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid var(--border); transition: background .3s, box-shadow .3s, border-color .3s; }
.social-card:hover .social-icon-wrap { background: color-mix(in srgb, var(--brand, var(--green)) 18%, transparent); border-color: var(--brand, var(--border-strong)); box-shadow: 0 0 28px 2px var(--brand, transparent); }
.social-icon { width: 28px; height: 28px; display: block; object-fit: contain; filter: brightness(0) invert(1); transition: filter .3s; }
.social-name { font-family: var(--font-display), sans-serif; font-size: 1.5rem; letter-spacing: 0.05em; margin-bottom: 6px; color: var(--white); }
.social-handle { color: var(--green); font-size: 0.88rem; font-weight: 600; margin-bottom: 14px; transition: color .3s; }
.social-card:hover .social-handle { color: var(--brand, var(--green)); }
.social-desc { color: var(--muted); font-size: 0.84rem; line-height: 1.55; }
/* Gleiches Grundgerüst wie die Nav (Farbverlauf-Richtung gespiegelt,
gleicher Blur, gleiche Border/Shadow-Logik), aber deutlich transparenter
als der Header, damit der Footer sich sichtbar vom Header abhebt und
der Hintergrund stärker durchscheint. */
footer { position: relative; z-index: 1; background: linear-gradient(0deg, var(--dark3) 0%, rgba(13,17,13,0.96) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--border-strong); padding: 20px 5vw 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; box-shadow: 0 -4px 28px rgba(0,0,0,0.35), 0 -1px 0 rgba(61,214,57,0.1); flex-shrink: 0; }
.footer-logo { font-family: var(--font-display), sans-serif; font-size: 1.9rem; letter-spacing: 0.08em; }
.footer-logo .num { color: var(--green); } .footer-logo .word { color: var(--white); }
.footer-logo img.brand-logo-img { height: 80px; width: auto; display: block; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--muted); font-size: 0.84rem; text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--green); }
.footer-legal { color: var(--muted); font-size: 0.75rem; line-height: 1.65; max-width: 560px; margin-top: 8px; }
.footer-copy { color: var(--muted); font-size: 0.74rem; margin-top: 4px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) { .section { padding: 60px 4vw 36px; } .stats-strip { padding: 0 4vw 60px; } .cc-icon { width: 100px; height: 100px; } footer { padding-top: 18px; } }
.bh-stats-wrap { max-width: 1000px; margin: 0 auto; }
.bh-stats-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.bh-stats-kpi-grid.row2 { grid-template-columns: repeat(4, 1fr); }
.bh-kpi { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px 18px; backdrop-filter: blur(8px); transition: border-color .25s, box-shadow .25s; }
.bh-kpi:hover { border-color: var(--border-strong); box-shadow: 0 0 20px rgba(61,214,57,0.1); }
.bh-kpi-label { color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 8px; }
.bh-kpi-val { font-family: var(--font-display), sans-serif; font-size: 1.9rem; color: var(--green); line-height: 1; letter-spacing: 0.02em; }
.bh-kpi-val.red { color: #e05555; }
.bh-kpi-sub { color: var(--muted); font-size: 0.75rem; margin-top: 5px; line-height: 1.4; }
.bh-stats-highlight-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.bh-highlight { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px 22px; backdrop-filter: blur(8px); display: flex; align-items: center; gap: 18px; transition: border-color .25s, box-shadow .25s; }
.bh-highlight:hover { border-color: var(--border-strong); box-shadow: 0 0 20px rgba(61,214,57,0.1); }
.bh-highlight-icon { font-size: 2.2rem; flex-shrink: 0; }
.bh-highlight-label { color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 4px; }
.bh-highlight-title { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: 2px; }
.bh-highlight-val { font-family: var(--font-display), sans-serif; font-size: 1.7rem; color: var(--green); line-height: 1; }
.bh-highlight-sub { color: var(--muted); font-size: 0.76rem; margin-top: 3px; }
.bh-stats-top-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; }
.bh-top-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px 18px; backdrop-filter: blur(8px); }
.bh-top-box-head { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.bh-top-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); gap: 8px; }
.bh-top-item:last-child { border-bottom: none; }
.bh-top-name { color: var(--text); font-size: 0.84rem; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-top-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bh-top-multi { color: var(--green); font-size: 0.8rem; font-weight: 700; }
.bh-top-count { background: rgba(61,214,57,0.1); border: 1px solid rgba(61,214,57,0.2); color: var(--muted); font-size: 0.72rem; padding: 2px 8px; border-radius: 100px; }
.bh-stats-loading { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 0.95rem; }
.bh-stats-loading .spin { display: inline-block; width: 32px; height: 32px; border: 3px solid rgba(61,214,57,0.2); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; margin-bottom: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.bh-stats-err { text-align: center; padding: 40px; color: #e05555; font-size: 0.9rem; background: var(--card-bg); border: 1px solid rgba(224,85,85,0.2); border-radius: var(--radius-card); }
.bh-refresh-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; padding: 6px 14px; border-radius: 100px; cursor: pointer; font-family: inherit; transition: all .2s; margin-top: 12px; }
.bh-refresh-btn:hover { border-color: var(--green); color: var(--green); }
.bh-section-sub { color: var(--muted); font-size: 0.85rem; margin: -8px 0 18px; max-width: 520px; line-height: 1.5; }
/* Weekly calendar strip */
.sched-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 16px; }
.sched-day-cell { position: relative; background: var(--dark2); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 6px 12px; text-align: center; overflow: hidden; transition: border-color .2s, background .2s, transform .15s, box-shadow .2s; }
.sched-day-cell.has-stream { cursor: pointer; }
.sched-day-cell.has-stream:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.sched-day-cell.is-today { border-color: rgba(61,214,57,0.45); background: rgba(61,214,57,0.06); }
.sched-day-cell.is-selected { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 8px 24px -8px rgba(61,214,57,0.55); background: rgba(61,214,57,0.09); }
.sched-day-abbr { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 5px; }
.sched-day-num { font-family: var(--font-display), sans-serif; font-size: 1.35rem; color: var(--white); line-height: 1; margin-bottom: 9px; }
.sched-day-cell.is-today .sched-day-num, .sched-day-cell.is-selected .sched-day-num { color: var(--green); }
.sched-day-icon { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px; font-size: 0.9rem; line-height: 1; min-height: 16px; overflow: hidden; max-width: 100%; }
.sched-day-cell:not(.has-stream) .sched-day-abbr, .sched-day-cell:not(.has-stream) .sched-day-num { opacity: 0.32; }
.sched-day-live { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #e05555; animation: schedPulseLive 1.4s ease-in-out infinite; }
/* Detail panel for selected day */
.sched-hero { position: relative; overflow: hidden; background: linear-gradient(150deg, rgba(61,214,57,0.09), rgba(13,17,13,0.92) 60%); border: 1px solid rgba(61,214,57,0.4); border-radius: var(--radius-card); padding: 26px 28px; box-shadow: 0 0 44px -12px rgba(61,214,57,0.25); transition: opacity .15s; }
.sched-hero.is-empty { background: linear-gradient(150deg, rgba(255,255,255,0.02), rgba(13,17,13,0.92) 60%); border-color: var(--border); box-shadow: none; }
.sched-hero-glow { position: absolute; top: -70px; right: -60px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(61,214,57,0.22), transparent 70%); pointer-events: none; }
.sched-hero-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.sched-hero-tag { display: inline-flex; align-items: center; gap: 7px; background: rgba(61,214,57,0.15); border: 1px solid rgba(61,214,57,0.4); color: var(--green); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 6px 13px; border-radius: 100px; }
.sched-hero-cd { font-size: 0.85rem; font-weight: 700; color: var(--green-light); font-family: monospace; letter-spacing: 0.02em; }
.sched-hero-cd.is-live { color: #fff; background: #e05555; padding: 5px 13px; border-radius: 100px; font-family: inherit; animation: schedPulseLive 1.4s ease-in-out infinite; }
@keyframes schedPulseLive { 0%, 100% { box-shadow: 0 0 0 rgba(224,85,85,0.55); } 50% { box-shadow: 0 0 18px rgba(224,85,85,0.75); } }
.sched-hero-main { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.sched-hero-icon { flex-shrink: 0; width: 62px; height: 62px; border-radius: 15px; background: rgba(61,214,57,0.12); border: 1px solid rgba(61,214,57,0.35); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; }
.sched-hero-day { color: var(--green); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.sched-hero-title { font-family: var(--font-display), sans-serif; font-size: 1.65rem; color: var(--white); letter-spacing: 0.02em; line-height: 1.15; margin-bottom: 4px; }
.sched-hero-sub { color: var(--muted); font-size: 0.86rem; }
.sched-hero-actions { position: relative; z-index: 1; display: flex; gap: 10px; }
.sched-hero-actions .brand-pill { flex: 1; justify-content: center; }
.sched-slot-tabs { position: relative; z-index: 1; display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.sched-slot-tab { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--muted); font-size: 0.78rem; font-weight: 600; padding: 7px 14px; border-radius: 100px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.sched-slot-tab:hover { border-color: var(--border-strong); }
.sched-slot-tab.is-active { background: rgba(61,214,57,0.14); border-color: var(--green); color: var(--green-light); }
.sched-slot-tab.is-live { border-color: #e05555; color: #fff; background: rgba(224,85,85,0.18); }
@media (max-width: 700px) {
.sched-week-grid { gap: 5px; }
.sched-day-cell { padding: 10px 3px 9px; }
.sched-day-abbr { font-size: 0.56rem; }
.sched-day-num { font-size: 1.05rem; margin-bottom: 6px; }
}
@media (max-width: 560px) {
.sched-hero { padding: 20px; }
.sched-hero-main { flex-direction: column; align-items: flex-start; gap: 14px; }
.sched-hero-actions { flex-direction: column; }
}
@media (max-width: 768px) { .bh-stats-kpi-grid, .bh-stats-kpi-grid.row2 { grid-template-columns: repeat(2, 1fr); } .bh-stats-highlight-row { grid-template-columns: 1fr; } .bh-stats-top-row { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .bh-stats-kpi-grid, .bh-stats-kpi-grid.row2 { grid-template-columns: repeat(2, 1fr); } .bh-kpi-val { font-size: 1.5rem; } }
/* === CHATBOT WIDGET === */
.cw-launcher { position: fixed; bottom: 24px; right: 24px; z-index: 9998; width: 60px; height: 60px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 24px rgba(61,214,57,0.45); transition: transform .2s, box-shadow .2s; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cw-launcher:hover { transform: scale(1.07); box-shadow: 0 0 36px rgba(61,214,57,0.6); }
.cw-launcher svg { width: 26px; height: 26px; fill: var(--dark); }
.cw-badge { position: absolute; top: -4px; right: -4px; background: #e05555; color: #fff; font-size: 0.62rem; font-weight: 700; padding: 2px 6px; border-radius: 100px; }
.cw-panel { position: fixed; bottom: 96px; right: 24px; z-index: 9999; width: 360px; max-width: calc(100vw - 32px); height: 480px; max-height: calc(100dvh - 140px); background: var(--dark2); border: 1px solid var(--border-strong); border-radius: var(--radius-card); box-shadow: 0 20px 60px rgba(0,0,0,0.5); display: none; flex-direction: column; overflow: hidden; isolation: isolate; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cw-panel.open { display: flex; }
.cw-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(61,214,57,0.04); }
.cw-head-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--white); font-size: 0.95rem; }
.cw-status-line { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.cw-status-line .cw-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #666; flex-shrink: 0; }
.cw-status-line.online .cw-status-dot { background: #3dd639; }
.cw-status-line.offline .cw-status-dot { background: #e05555; }
.cw-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 4px; }
.cw-close:hover { color: var(--text); }
.cw-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--dark2); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.cw-msg { max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 0.85rem; line-height: 1.45; white-space: pre-wrap; }
.cw-msg.bot { align-self: flex-start; background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid var(--border); }
.cw-msg.user { align-self: flex-end; background: var(--green); color: var(--dark); font-weight: 500; }
.cw-typing { align-self: flex-start; color: var(--muted); font-size: 0.8rem; padding: 6px 13px; }
.cw-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); flex-shrink: 0; }
.cw-input { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text); padding: 10px 14px; border-radius: 100px; font-size: 0.85rem; font-family: inherit; outline: none; }
.cw-input:focus { border-color: var(--border-strong); }
.cw-send { width: 46px; height: 46px; border-radius: 50%; background: var(--green); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 0 14px rgba(61,214,57,0.35); }
.cw-send:hover { background: var(--green-light); transform: scale(1.05); box-shadow: 0 0 22px rgba(61,214,57,0.5); }
.cw-send:active { transform: scale(0.95); }
.cw-send:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
.cw-send svg { width: 22px; height: 22px; stroke: var(--dark); margin-left: 2px; }
.cw-disclaimer { font-size: 0.66rem; color: var(--muted); text-align: center; padding: 0 14px 10px; line-height: 1.4; flex-shrink: 0; }
.cw-body-guest { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px; }
.cw-guest-msg { color: var(--text); font-size: 0.9rem; line-height: 1.5; }
.cw-login-btn { display: inline-block; background: var(--green); color: var(--dark); font-weight: 700; font-size: 0.88rem; padding: 11px 22px; border-radius: 100px; border: none; cursor: pointer; text-decoration: none; font-family: inherit; transition: background .2s, box-shadow .2s; box-shadow: 0 0 24px rgba(61,214,57,0.3); }
.cw-login-btn:hover { background: var(--green-light); box-shadow: 0 0 36px rgba(61,214,57,0.5); }
@media (max-width: 900px) {
/* Bottombar (App-Style Quick-Nav) ist in diesem Breakpoint sichtbar und beansprucht
Platz am unteren Bildschirmrand - Chat-Launcher/-Panel müssen darüber schweben,
statt sich damit zu überschneiden. */
.cw-launcher { bottom: calc(24px + 64px + env(safe-area-inset-bottom)); }
.cw-panel { bottom: calc(96px + 64px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 140px - 64px - env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) { .cw-panel { right: 12px; left: 12px; width: auto; bottom: calc(90px + 64px + env(safe-area-inset-bottom)); height: 64dvh; } .cw-launcher { right: 16px; bottom: calc(16px + 64px + env(safe-area-inset-bottom)); } }
/* ========================================================================
=== POLISH-LAYER: Scroll-Reveal & Hover-Effekte für Überschriften/Bilder ===
Rein additiv - überschreibt keine bestehenden Regeln, sondern ergänzt sie.
======================================================================== */
/* --- Scroll-Reveal-Basis (wird per JS als Klasse gesetzt, siehe unten) ---
Bewusst als Keyframe-Animation statt als Transition: Die alte transition-Regel von .reveal-el wurde von
späteren Regeln (.section-title, .card, .social-card ...) überschrieben - dadurch sprangen Überschriften
und Karten ohne Fade ein, und der Stagger-Delay hat auch das Hover verzögert. Als Animation gibt es
keine Konflikte mit den Hover-Transitions mehr. */
.reveal-el { opacity: 0; }
.reveal-el.in-view { opacity: 1; animation: revealUp .8s cubic-bezier(.16,1,.3,1) backwards; }
.reveal-el.reveal-img.in-view { animation-name: revealZoom; }
@keyframes revealUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes revealZoom { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
/* Leichter Stagger für Grids (Karten), abhängig von Position im Container */
.cards-grid > .reveal-el:nth-child(2), .casino-list > .reveal-el:nth-child(2) { animation-delay: .08s; }
.cards-grid > .reveal-el:nth-child(3), .casino-list > .reveal-el:nth-child(3) { animation-delay: .16s; }
.cards-grid > .reveal-el:nth-child(4), .casino-list > .reveal-el:nth-child(4) { animation-delay: .24s; }
.cards-grid > .reveal-el:nth-child(n+5), .casino-list > .reveal-el:nth-child(n+5) { animation-delay: .3s; }
/* Sanftes Einblenden beim Tab-Wechsel (vorher hat der Inhalt hart umgeschaltet) */
.section.active { animation: sectionFadeIn .45s ease backwards; }
@keyframes sectionFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* --- Überschriften: Unterstrich wird "gezeichnet" (Linie + leuchtender Funkenkopf) + Glanz beim Hover ---
Linie und Funke laufen als Keyframe-Animation mit identischer Dauer/Kurve, damit der Funke exakt an der
Linienspitze bleibt. Die Breite (nicht scaleX) wird animiert, damit Verlauf und Rundung nicht verzerren. */
.section-title, .cc-hero-title { position: relative; display: inline-block; transition: text-shadow .4s ease; }
.section-title::after, .cc-hero-title::after {
content: ''; position: absolute; left: 2px; bottom: -10px; height: 3px; width: 0; opacity: 0;
background: linear-gradient(90deg, var(--green), var(--green-light) 65%, rgba(114,245,110,0));
border-radius: 3px; box-shadow: 0 0 12px rgba(61,214,57,0.5);
transition: width .6s cubic-bezier(.16,1,.3,1);
}
.section-title::before, .cc-hero-title::before {
content: ''; position: absolute; left: 2px; bottom: -11.5px; width: 6px; height: 6px; margin-left: -3px;
border-radius: 50%; background: #eaffe8; opacity: 0; pointer-events: none;
box-shadow: 0 0 8px 2px rgba(114,245,110,0.95), 0 0 18px 5px rgba(61,214,57,0.55);
}
.section-title.in-view::after, .cc-hero-title.in-view::after {
width: 72px; opacity: 1; animation: titleLineDraw 1s cubic-bezier(.22,1,.36,1) .3s backwards;
}
.section-title.in-view::before, .cc-hero-title.in-view::before {
animation: titleLineSpark 1s cubic-bezier(.22,1,.36,1) .3s backwards;
}
@keyframes titleLineDraw { from { width: 0; } to { width: 72px; } }
@keyframes titleLineSpark { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(72px); opacity: 0; } }
@media (hover: hover) {
.section-title.in-view:hover::after, .cc-hero-title.in-view:hover::after { width: 120px; }
}
.section-title:hover, .cc-hero-title:hover { text-shadow: 0 0 26px rgba(61,214,57,0.4); }
.section-title:hover .accent, .cc-hero-title:hover .accent, .hero-title-main:hover .accent { animation: titleGlow 1.4s ease-in-out infinite; }
.bh-title, .card-title { transition: color .3s ease, text-shadow .3s ease; }
.bh-title-wrap:hover .bh-title { text-shadow: 0 0 18px rgba(61,214,57,0.45); }
.card:hover .card-title, .casino-card:hover .card-title { color: var(--green-light); }
/* Kleines Shimmer-Sweep über den Akzent-Text beim Hover (dezent, kein Dauerloop) */
.section-title .accent, .cc-hero-title .accent, .hero-title-main .accent {
background-image: linear-gradient(100deg, var(--green) 40%, var(--green-light) 50%, var(--green) 60%);
background-size: 220% 100%; background-position: 0% 0%;
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--green);
transition: background-position .9s ease;
}
.section-title:hover .accent, .cc-hero-title:hover .accent, .hero-title-main:hover .accent { background-position: 100% 0%; }
/* --- Bilder & Karten: Zoom, Licht-Sweep und weicher Schatten beim Hover --- */
.card-thumb { position: relative; }
.card-thumb img { transition: transform .6s cubic-bezier(.16,1,.3,1), filter .6s ease; }
.card:hover .card-thumb img { transform: scale(1.08); filter: brightness(1.06) saturate(1.12); }
.card-thumb::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
transform: translateX(-130%); transition: transform .85s ease;
}
.card:hover .card-thumb::after { transform: translateX(130%); }
.card { transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 0 1px var(--border-strong); }
.casino-card { transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s; }
.casino-card:hover { transform: translateY(-4px); }
.ct-logo-wrap, .casino-ticker-item .ct-logo-wrap { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.casino-ticker-item:hover .ct-logo-wrap { transform: scale(1.12) rotate(-2deg); box-shadow: 0 0 16px rgba(61,214,57,0.35); }
.stat-card, .profil-stat-card { transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s; }
.stat-card:hover, .profil-stat-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
.footer-logo, .nav-logo img.brand-logo-img, #agegate-logo img.brand-logo-img { transition: transform .4s cubic-bezier(.16,1,.3,1), filter .4s ease; }
.footer-logo:hover, .nav-logo:hover img.brand-logo-img { transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(61,214,57,0.45)); }
/* Respektiert Nutzer, die reduzierte Bewegung bevorzugen */
@media (prefers-reduced-motion: reduce) {
.reveal-el, .reveal-el.in-view { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
.section.active { animation: none !important; }
.section-title::after, .cc-hero-title::after { width: 72px !important; opacity: 1 !important; animation: none !important; transition: none !important; }
.section-title::before, .cc-hero-title::before { display: none !important; }
.card:hover, .casino-card:hover, .stat-card:hover, .profil-stat-card:hover,
.card:hover .card-thumb img, .casino-ticker-item:hover .ct-logo-wrap,
.footer-logo:hover, .nav-logo:hover img.brand-logo-img { transform: none !important; }
.section-title .accent, .cc-hero-title .accent, .hero-title-main .accent { transition: none !important; }
}
/* === SEO-LAYER: Seiten-Überschrift (H1), Infotext, Sprachhinweis === */
.page-h1 {
display: table; position: relative; z-index: 2;
margin: 0 auto 22px; padding: 7px 16px 7px 30px;
font-family: var(--font-body, 'Outfit'), system-ui, sans-serif;
font-size: 0.78rem; font-weight: 600; line-height: 1.3;
letter-spacing: 0.16em; text-transform: uppercase; text-align: center;
color: var(--green-light);
background: rgba(61,214,57,0.08);
border: 1px solid var(--border-strong); border-radius: 999px;
box-shadow: 0 0 24px rgba(61,214,57,0.12), inset 0 0 12px rgba(61,214,57,0.06);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.page-h1::before {
content: ''; position: absolute; left: 13px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green);
}
/* solange JS den H1 noch nicht in den Bereich gesetzt hat */
.page-main > .page-h1 { margin-top: 28px; }
@media (max-width: 640px) { .page-h1 { font-size: 0.7rem; letter-spacing: 0.12em; padding: 6px 13px 6px 26px; margin-bottom: 16px; } }
.seo-info { position: relative; z-index: 1; padding: 8px 5vw 72px; }
.seo-info[hidden] { display: none; }
.seo-info-inner {
max-width: 1100px; margin: 0 auto; padding: 36px clamp(20px, 4vw, 44px);
background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card);
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
color: rgba(232,240,232,0.82); font-size: 0.95rem; line-height: 1.7;
}
.seo-info h2 { font-family: var(--font-display), sans-serif; font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: 0.02em; line-height: 1.1; color: var(--white); margin: 0 0 14px; }
.seo-info h3 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin: 0 0 12px; }
.seo-info p { margin: 0 0 14px; max-width: 76ch; }
.seo-info ul, .seo-info ol { margin: 0; padding-left: 1.2em; }
.seo-info li { margin: 0 0 6px; }
.seo-info li::marker { color: var(--green); }
.seo-info strong { color: var(--white); font-weight: 600; }
.seo-info code { font-family: inherit; font-size: 0.85em; font-weight: 700; letter-spacing: 0.04em; color: var(--green-light); background: rgba(61,214,57,0.1); border: 1px dashed var(--border-strong); border-radius: 6px; padding: 1px 7px; }
.seo-info a { color: var(--green-light); text-decoration: underline; text-decoration-color: rgba(114,245,110,0.35); text-underline-offset: 3px; }
.seo-info a:hover { text-decoration-color: currentColor; }
.seo-info-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px 40px; margin: 26px 0 22px; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.seo-info-rg { font-size: 0.82rem; color: rgba(232,240,232,0.6); }
.seo-info-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.seo-info-links span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(232,240,232,0.55); margin-right: 4px; }
.seo-info .seo-info-links a { text-decoration: none; font-size: 0.86rem; font-weight: 600; color: var(--text); padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.02); transition: border-color .2s, color .2s, background .2s; }
.seo-info .seo-info-links a:hover { color: var(--green-light); border-color: var(--border-strong); background: rgba(61,214,57,0.08); }
@media (max-width: 640px) { .seo-info { padding-bottom: 48px; } .seo-info-inner { font-size: 0.9rem; } }
.lang-hint {
position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9000;
display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
padding: 10px 10px 10px 18px; font-size: 0.88rem; color: var(--text);
background: rgba(18,21,15,0.94); border: 1px solid var(--border-strong); border-radius: 999px;
box-shadow: 0 12px 40px rgba(0,0,0,0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.lang-hint-go { white-space: nowrap; font-weight: 700; color: var(--dark); background: var(--green); padding: 7px 14px; border-radius: 999px; text-decoration: none; }
.lang-hint-close { flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.lang-hint-close:hover { background: rgba(255,255,255,0.08); }
@media (max-width: 640px) { .lang-hint { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); font-size: 0.8rem; gap: 8px; } .lang-hint > span { display: none; } }
/* === DESIGN-FEINSCHLIFF === */
/* Sichtbarer Fokus für Tastatur-Nutzer (Maus-Klicks bleiben ohne Rahmen) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
outline: 2px solid var(--green-light); outline-offset: 3px; border-radius: 6px;
}
.faq-q-row { cursor: pointer; }
/* Casinos: zweite große Überschrift unter dem Hero etwas zurücknehmen (Hero bleibt der Blickfang) */
#casinos .section-header .section-title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
#casinos .section-header { margin-bottom: 36px; gap: 10px; }
/* Casino-Karte: Button-Text nicht mehr zweizeilig */
.cc-toggle-btn { white-space: nowrap; }
@media (min-width: 900px) { .casino-list:not(.view-grid) .cc-toggle-btn { font-size: 0.86rem; padding: 12px 10px; } }
/* Handy: Kennzahlen im Hero nebeneinander und gleich breit */
@media (max-width: 640px) {
.cc-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 360px; margin: 0 auto; }
.cc-hero-stats .stat-card { width: auto; min-width: 0; padding: 14px 10px; }
.cc-hero-stats .stat-label { font-size: 0.68rem; letter-spacing: 0.08em; }
}
/* Footer: Marke, Seiten, Rechtliches, 18+ */
footer#footer { align-items: stretch; text-align: left; gap: 0; padding: 48px 5vw 28px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 32px 40px; max-width: 1180px; width: 100%; margin: 0 auto; }
.footer-brand .footer-logo { display: inline-block; }
.footer-brand .footer-logo img.brand-logo-img { height: 64px; }
.footer-tagline { color: rgba(232,240,232,0.7); font-size: 0.88rem; line-height: 1.6; margin-top: 12px; max-width: 32ch; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-col-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
.footer-col a { color: rgba(232,240,232,0.78); font-size: 0.9rem; text-decoration: none; transition: color .2s; }
.footer-col a:hover { color: var(--green-light); }
.footer-rg { flex-direction: row; align-items: flex-start; gap: 14px; }
.footer-18 { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #E5484D; color: #FF6B6F; font-weight: 800; font-size: 0.92rem; letter-spacing: -0.02em; }
.footer-rg .footer-legal { margin-top: 0; max-width: none; font-size: 0.78rem; color: rgba(232,240,232,0.62); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; max-width: 1180px; width: 100%; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid var(--border); }
.footer-bottom .footer-copy { margin: 0; color: rgba(232,240,232,0.55); }
.footer-lang { display: flex; gap: 16px; }
.footer-lang a { color: rgba(232,240,232,0.6); font-size: 0.8rem; text-decoration: none; }
.footer-lang a[aria-current="true"], .footer-lang a:hover { color: var(--green-light); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand, .footer-rg { grid-column: 1 / -1; } }
@media (max-width: 640px) {
footer#footer { padding: 36px 6vw calc(96px + env(safe-area-inset-bottom, 0px)); }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
.js-pending #seo-info, .js-pending #footer, .js-pending .page-main > #page-h1 { visibility: hidden; }