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 v2 === */
  .pf-hero { position:relative; display:grid; grid-template-columns: 1fr minmax(240px, 340px); gap:24px; align-items:center; padding:26px 28px; margin-bottom:14px;
    background: radial-gradient(120% 140% at 0% 0%, rgba(61,214,57,.16), transparent 55%), var(--card-bg); border:1px solid var(--border-strong); border-radius: var(--radius-card);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 16px 44px rgba(0,0,0,.45); }
  .pf-id { display:flex; align-items:center; gap:18px; min-width:0; }
  .pf-id .profil-avatar, .pf-id .profil-avatar-fallback { width:84px; height:84px; box-shadow: 0 0 0 4px rgba(61,214,57,.15), 0 0 26px rgba(61,214,57,.35); }
  .pf-id-txt { min-width:0; }
  .pf-id h2 { font-family: var(--font-display), sans-serif; font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing:.5px; line-height:1.05; margin:0 0 8px; color: var(--white); overflow-wrap:anywhere; }
  .pf-chips { display:flex; flex-wrap:wrap; gap:6px; }
  .pf-chips .profil-chip { margin:0; }
  .pf-balance { background: rgba(0,0,0,.25); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
  .pf-bal-l { font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color: rgba(232,240,232,.6); font-weight:700; }
  .pf-bal-v { font-family: var(--font-display), sans-serif; font-weight:800; font-size: 2.3rem; line-height:1.05; color: var(--green); text-shadow: 0 0 22px rgba(61,214,57,.35); }
  .pf-bal-none { font-size:.85rem; color: rgba(232,240,232,.75); margin-top:4px; }
  .pf-prog { margin-top:10px; }
  .pf-prog-bar { height:8px; border-radius:99px; background: rgba(255,255,255,.07); overflow:hidden; }
  .pf-prog-bar span { display:block; height:100%; border-radius:99px; background: linear-gradient(90deg, #2fae2c, var(--green-light)); box-shadow: 0 0 12px rgba(61,214,57,.5); }
  .pf-prog-txt { font-size:.76rem; color: rgba(232,240,232,.75); margin-top:6px; }
  .pf-prog-txt b { color: var(--text); }
  .pf-link { color: var(--green); font-weight:700; text-decoration:none; }
  .pf-id-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
  .pf-id-actions .profil-link-btn { margin:0; }
  .pf-logout { display:inline-flex; align-items:center; font-size:.74rem; font-weight:700; color: rgba(232,240,232,.65); text-decoration:none; padding:6px 12px; border-radius:99px; border:1px solid var(--border); background: rgba(255,255,255,.03); transition: color .15s, border-color .15s, background .15s; }
  .pf-logout:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,.06); }
  .pf-chips .profil-chip svg { width:13px; height:13px; flex-shrink:0; }
  .pf-logo { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; }
  .pf-logo svg { width:17px; height:17px; }
  .pf-logo--twitch { background:#9146FF; color:#fff; } .pf-logo--kick { background:#53FC18; color:#08130a; }
  .pf-notice { display:block; margin: 0 0 10px; padding: 11px 16px; border-radius:12px; border:1px solid var(--border-strong); background: rgba(61,214,57,.08); color: var(--text); text-decoration:none; font-size:.88rem; }
  .pf-notice b { color: var(--green); }
  .pf-notice--gold { border-color: rgba(255,193,7,.55); background: linear-gradient(90deg, rgba(255,193,7,.16), rgba(255,193,7,.04)); }
  .pf-notice--gold b { color: #ffc107; }
  .pf-tabs { display:flex; gap:4px; padding:4px; margin: 6px 0 18px; border:1px solid var(--border); border-radius:999px; background: var(--card-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow-x:auto; scrollbar-width:none; }
  .pf-tabs::-webkit-scrollbar { display:none; }
  .pf-tab { flex:1 0 auto; border:0; background:transparent; color: rgba(232,240,232,.7); font: inherit; font-size:.86rem; font-weight:700; padding:9px 16px; border-radius:999px; cursor:pointer; white-space:nowrap; transition: background .15s, color .15s; }
  .pf-tab:hover { color: var(--text); }
  .pf-tab.on { background: var(--green); color:#08130a; }
  .pf-tab-n { display:inline-block; min-width:18px; padding:1px 6px; border-radius:99px; background:#ff5a5f; color:#fff; font-size:.68rem; margin-left:4px; }
  .pf-tab.on .pf-tab-n { background:#08130a; color: var(--green); }
  .pf-panel[hidden] { display:none; }
  .pf-panel > .profil-section-title:first-child { margin-top: 0; }
  .pf-kpi { text-align:left; font: inherit; color: inherit; cursor:pointer; transition: border-color .15s, transform .15s; }
  .pf-kpi:hover { border-color: var(--border-strong); transform: translateY(-2px); }
  .pf-kpis .n { font-size: 1.7rem; }
  .pf-quick { display:grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin-top:4px; }
  .pf-q { display:grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap:12px; align-items:center; text-align:left; padding:14px 16px; border-radius:14px; border:1px solid var(--border); background: var(--card-bg); color: var(--text); text-decoration:none; font: inherit; cursor:pointer; transition: border-color .15s, transform .15s; }
  .pf-q:hover { border-color: var(--border-strong); transform: translateY(-2px); }
  .pf-q span { grid-row: span 2; font-size:1.6rem; }
  .pf-q b { font-size:.92rem; }
  .pf-q small { font-size:.72rem; color: rgba(232,240,232,.62); }
  .pf-records .hof-chips { margin-top: 2px; }
  @media (max-width: 760px) {
    .pf-hero { grid-template-columns: 1fr; padding:22px 18px 18px; gap:16px; }
    .pf-id .profil-avatar, .pf-id .profil-avatar-fallback { width:64px; height:64px; }
    .pf-bal-v { font-size: 2rem; }
    .pf-tabs { border-radius:14px; }
    .pf-tab { padding:9px 12px; font-size:.8rem; }
  }
  @media (max-width: 560px) {
    .pf-id { flex-direction:column; text-align:center; gap:12px; }
    .pf-id-txt { width:100%; }
    .pf-chips, .pf-id-actions { justify-content:center; }
    .pf-id h2 { font-size:1.6rem; }
    .pf-id h2.pf-name-md { font-size:1.35rem; }
    .pf-id h2.pf-name-sm { font-size:1.12rem; }
    .pf-tabs { display:grid; grid-template-columns: 1fr 1fr; gap:4px; overflow:visible; }
    .pf-tab { padding:9px 8px; }
    .pf-quick { grid-template-columns: 1fr 1fr; gap:10px; }
    .pf-q { grid-template-columns: 1fr; row-gap:2px; padding:12px; }
    .pf-q span { grid-row:auto; font-size:1.4rem; margin-bottom:2px; }
    .pf-q b { font-size:.86rem; }
    .pf-records .hof-chip { padding:10px 12px; }
  }
  /* Profil v3: Level-Chips, Erfolge, Konto */
  .pf-bx { display: contents; }
  .pf-chip-gold { color:#1a1300 !important; background:#ffc107 !important; border-color:#ffc107 !important; opacity:1 !important; font-weight:700; }
  .pf-badge-strip { margin: 12px 0 14px; }
  .pf-badge-strip-in { display:flex; align-items:center; gap:14px; width:100%; padding:12px 16px; border-radius:14px; border:1px solid var(--border); background: var(--card-bg); color: var(--text); font: inherit; cursor:pointer; text-align:left; transition: border-color .15s; }
  .pf-badge-strip-in:hover { border-color: var(--border-strong); }
  .pf-bs-l { font-size:.86rem; white-space:nowrap; } .pf-bs-l b { color: var(--green); }
  .pf-bs-icons { flex:1; min-width:0; display:flex; gap:6px; font-size:1.3rem; overflow:hidden; }
  .pf-bs-icons small { font-size:.78rem; color: rgba(232,240,232,.65); align-self:center; }
  .pf-bs-more { font-size:.8rem; font-weight:700; color: var(--green); white-space:nowrap; }
  .pf-badge-cat { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: rgba(232,240,232,.6); margin: 18px 0 8px; }
  .pf-badge-cat:first-child { margin-top: 0; }
  .pf-badge-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap:10px; }
  .pf-badge { position:relative; padding:14px; border-radius:14px; border:1px solid var(--border); background: rgba(255,255,255,.02); text-align:center; opacity:.6; }
  .pf-badge.on { opacity:1; background: radial-gradient(120% 90% at 50% 0%, rgba(61,214,57,.16), transparent 65%), var(--card-bg); border-color: var(--border-strong); }
  .pf-badge.new { border-color:#ffc107; box-shadow: 0 0 0 2px rgba(255,193,7,.25), 0 0 22px rgba(255,193,7,.25); }
  .pf-badge-ic { font-size:2rem; line-height:1.1; margin-bottom:6px; filter: grayscale(1); }
  .pf-badge.on .pf-badge-ic { filter:none; }
  .pf-badge-n { font-weight:800; font-size:.88rem; }
  .pf-badge-d { font-size:.72rem; color: rgba(232,240,232,.65); margin-top:3px; line-height:1.35; }
  .pf-badge-s { font-size:.7rem; color: var(--green); margin-top:6px; font-weight:700; }
  .pf-badge:not(.on) .pf-badge-s { color: rgba(232,240,232,.6); }
  .pf-badge-p { height:5px; border-radius:99px; background: rgba(255,255,255,.08); margin-top:8px; overflow:hidden; }
  .pf-badge-p span { display:block; height:100%; background: var(--green); border-radius:99px; }
  .pf-badge-new { font-size:.6rem; background:#ffc107; color:#1a1300; padding:1px 6px; border-radius:6px; vertical-align:middle; }
  .pf-toast { position:fixed; left:50%; bottom:90px; transform: translate(-50%, 20px); opacity:0; z-index:99990; padding:12px 18px; border-radius:14px; background: rgba(13,17,13,.96); border:1px solid #ffc107; color: var(--text); font-size:.9rem; box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: opacity .3s, transform .3s; pointer-events:none; max-width: calc(100vw - 32px); }
  .pf-toast.show { opacity:1; transform: translate(-50%, 0); }
  .pf-toast b { color:#ffc107; }
  .pf-form { padding:18px; display:flex; flex-direction:column; gap:14px; }
  .pf-field { display:flex; flex-direction:column; gap:6px; }
  .pf-field > span { font-size:.78rem; font-weight:700; letter-spacing:.04em; color: rgba(232,240,232,.75); }
  .pf-field input, .pf-field select, .pf-field textarea { background: rgba(0,0,0,.3); border:1px solid var(--border); color: var(--text); border-radius:10px; padding:10px 12px; font: inherit; font-size:.92rem; max-width:420px; }
  .pf-field input:focus, .pf-field select:focus, .pf-field textarea:focus { outline:none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(61,214,57,.15); }
  .pf-field small { font-size:.74rem; color: rgba(232,240,232,.6); line-height:1.4; max-width:560px; }
  .pf-form-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .pf-form-msg { font-size:.82rem; } .pf-form-msg.ok { color: var(--green); } .pf-form-msg.bad { color:#ff8f92; }
  .pf-linked { padding:4px 0; }
  .pf-link-row { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border); }
  .pf-link-row:last-child { border-bottom:0; }
  .pf-link-ic { font-size:1.2rem; } .pf-link-main { flex:1; display:flex; flex-direction:column; } .pf-link-main small { font-size:.74rem; color: rgba(232,240,232,.6); }
  .pf-danger-t { color:#ff8f92 !important; }
  .pf-danger { padding:16px 18px; border-color: rgba(229,72,77,.35) !important; }
  .pf-danger p { font-size:.84rem; color: rgba(232,240,232,.8); line-height:1.5; margin:0 0 8px; }
  .pf-del summary { cursor:pointer; color:#ff8f92; font-weight:700; font-size:.86rem; margin-top:6px; }
  .pf-del .pf-form { padding:14px 0 0; }
  .pf-btn-danger { background:#e5484d; color:#fff; border:0; border-radius:10px; padding:10px 16px; font: inherit; font-weight:800; font-size:.86rem; cursor:pointer; }
  .pf-btn-danger:hover { background:#ff5a5f; }
  @media (max-width: 560px) {
    .pf-tabs { grid-template-columns: 1fr 1fr 1fr; }
    .pf-tab { font-size:.74rem; padding:9px 4px; }
    .pf-badge-grid { grid-template-columns: 1fr 1fr; }
    .pf-badge-strip-in { flex-wrap:wrap; gap:8px; }
    .pf-bs-icons { flex-basis:100%; order:3; }
  }
  /* === Profil v4 (v95): ruhiger Kopf, Statistik-Leiste, Reiter als Kacheln am Handy === */
  .pf-main { min-width:0; display:flex; flex-direction:column; gap:14px; }
  .pf-id { align-items:center; }
  .pf-id-txt { flex:1; }
  .pf-id h2 { margin:0 0 6px; }
  .pf-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; font-size:.8rem; color: rgba(232,240,232,.62); }
  .pf-mini { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; }
  .pf-mini svg { width:13px; height:13px; }
  .pf-since { margin-left:2px; }
  .pf-hero .pf-logout { align-self:flex-start; gap:6px; flex-shrink:0; }
  .pf-logout-ic { width:14px; height:14px; }
  .pf-stats { display:grid; grid-template-columns: repeat(3, 1fr); border:1px solid var(--border); border-radius:14px; background: rgba(0,0,0,.22); overflow:hidden; max-width:520px; }
  .pf-stat { padding:10px 12px; text-align:center; min-width:0; }
  .pf-stat + .pf-stat { border-left:1px solid var(--border); }
  .pf-stat-v { display:flex; align-items:center; justify-content:center; gap:6px; font-family: var(--font-display), sans-serif; font-size:1.25rem; font-weight:800; line-height:1.1; color: var(--text); white-space:nowrap; }
  .pf-stat-ic { font-size:1rem; }
  .pf-stat[data-k="level"] b { color:#ffc107; }
  .pf-stat-l { font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color: rgba(232,240,232,.55); font-weight:700; margin-top:3px; }
  .pf-stats.is-loading b { opacity:.35; animation: pfPulse 1.1s ease-in-out infinite; }
  .pf-stats.is-empty b { color: rgba(232,240,232,.4) !important; }
  @keyframes pfPulse { 50% { opacity:.12; } }
  .pf-hero .pf-id-actions { margin-top:0; }
  .pf-tab { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
  .pf-tab-n { margin-left:0; }
  @media (max-width: 760px) {
    .pf-stats { max-width:none; }
  }
  @media (max-width: 560px) {
    .pf-hero { padding:16px 14px 14px; gap:12px; }
    .pf-main { gap:12px; }
    .pf-id { flex-direction:row; text-align:left; gap:12px; align-items:center; }
    .pf-id .profil-avatar, .pf-id .profil-avatar-fallback { width:56px; height:56px; flex-shrink:0; }
    .pf-id h2 { font-size:1.35rem; margin-bottom:4px; }
    .pf-id h2.pf-name-md { font-size:1.15rem; }
    .pf-id h2.pf-name-sm { font-size:1rem; }
    .pf-meta { font-size:.74rem; }
    .pf-hero .pf-logout { width:36px; height:36px; padding:0; justify-content:center; align-self:center; }
    .pf-hero .pf-logout-t { display:none; }
    .pf-logout-ic { width:16px; height:16px; }
    .pf-stat { padding:9px 6px; }
    .pf-stat-v { font-size:1.08rem; gap:4px; }
    .pf-stat-ic { font-size:.85rem; }
    .pf-stat-l { font-size:.6rem; letter-spacing:.06em; }
    .pf-balance { padding:12px 14px; }
    .pf-bal-v { font-size:1.8rem; }
    .pf-hero .pf-id-actions { justify-content:flex-start; }
    .pf-tabs { grid-template-columns: repeat(3, 1fr); gap:6px; padding:6px; border-radius:16px; }
    .pf-tab { position:relative; flex-direction:column; gap:2px; padding:8px 4px; border-radius:12px; font-size:.72rem; }
    .pf-tab-ic { font-size:1.15rem; line-height:1; }
    .pf-tab-t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
    .pf-tab-n { position:absolute; top:4px; right:8px; }
  }
  /* v95: Übersicht – weniger Kästen */
  .hof-kpis.pf-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .pf-chev { display:none; }
  @media (max-width: 560px) {
    .hof-kpis.pf-kpis { display:block; border:1px solid var(--border); border-radius:14px; background: var(--card-bg); overflow:hidden; margin-bottom:12px; }
    .pf-kpis .pf-kpi { display:grid; grid-template-columns: 1fr auto auto; grid-template-areas: "l n c" "w n c"; align-items:center; column-gap:10px; width:100%; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; padding:12px 14px; backdrop-filter:none; -webkit-backdrop-filter:none; }
    .pf-kpis .pf-kpi:last-child { border-bottom:0; }
    .pf-kpis .pf-kpi:hover { transform:none; background: rgba(255,255,255,.03); }
    .pf-kpis .pf-kpi .l { grid-area:l; margin:0; font-size:.8rem; text-transform:none; letter-spacing:0; color: var(--text); font-weight:700; }
    .pf-kpis .pf-kpi .who { grid-area:w; margin-top:2px; font-size:.72rem; color: rgba(232,240,232,.6); }
    .pf-kpis .pf-kpi .n { grid-area:n; font-size:1.25rem; }
    .pf-chev { display:block; grid-area:c; font-size:1.3rem; color: rgba(232,240,232,.4); }
    .pf-badge-strip { margin: 0 0 12px; }
    .pf-badge-strip-in { flex-wrap:nowrap; gap:10px; padding:12px 14px; }
    .pf-bs-icons { flex-basis:auto; order:0; font-size:1.1rem; }
    .pf-bs-more { font-size:0; } .pf-bs-more::after { content:'›'; font-size:1.3rem; color: rgba(232,240,232,.4); }
    .pf-q--dup { display:none; }
    .pf-quick { grid-template-columns: 1fr 1fr; gap:8px; }
    .pf-q { grid-template-columns: auto 1fr; padding:10px 12px; column-gap:8px; }
    .pf-q span { grid-row: span 2; font-size:1.2rem; margin:0; }
    .pf-q small { font-size:.66rem; }
    .pf-records .hof-chips { display:block; border:1px solid var(--border); border-radius:14px; background: var(--card-bg); overflow:hidden; }
    .pf-records .hof-chip { display:flex; justify-content:space-between; align-items:center; gap:10px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; padding:11px 14px; }
    .pf-records .hof-chip:last-child { border-bottom:0; }
    .pf-records .hof-chip .l { font-size:.82rem; color: var(--text); font-weight:700; }
    .pf-records .hof-chip .v { margin:0; font-size:1rem; white-space:nowrap; }
    .pf-records .hof-chip small { display:none; }
  }
  /* Support-Tickets im Profil */
  .sup-box { padding: 0; }
  .sup-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--border); }
  .sup-head p { margin: 0; font-size: .9rem; opacity: .85; max-width: 520px; line-height: 1.5; }
  .sup-head .nav-cta { border: 0; cursor: pointer; font-family: inherit; }
  .sup-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 18px; background: none; border: 0; border-top: 1px solid var(--border); color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .sup-row:first-child { border-top: 0; }
  .sup-row:hover { background: rgba(61,214,57,.06); }
  .sup-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .sup-row-title { font-weight: 700; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sup-row-meta { font-size: .78rem; opacity: .65; }
  .sup-dot-i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5a5f; margin-right: 7px; vertical-align: middle; box-shadow: 0 0 8px rgba(255,90,95,.8); }
  .profil-badge.sup-st-closed { background: rgba(232,240,232,.08); color: rgba(232,240,232,.6); }
  .sup-new-badge { font-family: var(--font-body, inherit); font-size: .7rem; font-weight: 700; letter-spacing: 0; padding: 3px 9px; border-radius: 12px; background: #ff5a5f; color: #fff; vertical-align: middle; margin-left: 6px; }
  .sup-notice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,90,95,.45); background: rgba(255,90,95,.10); color: var(--text); text-decoration: none; font-size: .92rem; }
  .sup-notice b { color: var(--green); }
  /* Punkt INNERHALB des Namens-Links (der Link schneidet überstehende Inhalte wegen "…" ab) */
  .nav-account-name.sup-dot { position: relative; padding-right: 14px; }
  .nav-account-name.sup-dot::after { content: ''; position: absolute; top: 50%; right: 1px; width: 8px; height: 8px; margin-top: -6px; border-radius: 50%; background: #ff5a5f; box-shadow: 0 0 6px rgba(255,90,95,.9); }
  html.sup-lock, html.sup-lock body { overflow: hidden; }
  .sup-modal { position: fixed; inset: 0; z-index: 2147482500; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,7,4,.78); }
  .sup-modal[hidden] { display: none; }
  .sup-dialog { position: relative; width: 100%; max-width: 620px; max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; background: var(--card-bg-strong); border: 1px solid var(--border-strong); border-radius: 18px; padding: 22px 20px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
  .sup-x { position: sticky; top: 0; float: right; width: 38px; height: 38px; margin: -8px -6px 0 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--dark2); color: var(--text); font-size: 1rem; cursor: pointer; z-index: 2; }
  .sup-title { margin: 0 0 4px; font-family: var(--font-display), sans-serif; font-size: 1.25rem; color: var(--green); overflow-wrap: anywhere; }
  .sup-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
  .sup-label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 700; opacity: .9; }
  .sup-label[hidden] { display: none; }
  .sup-form input[type=text], .sup-form select, .sup-form textarea { width: 100%; box-sizing: border-box; background: var(--dark); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 11px 12px; font: inherit; font-size: .95rem; font-weight: 400; }
  .sup-form textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
  .sup-form input:focus, .sup-form select:focus, .sup-form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(61,214,57,.15); }
  .sup-file { font-size: .82rem; font-weight: 400; color: var(--text); }
  .sup-file::file-selector-button { margin-right: 10px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--dark3); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
  .sup-file::file-selector-button:hover { border-color: var(--green); }
  .sup-prev { display: flex; gap: 8px; flex-wrap: wrap; }
  .sup-prev img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
  .sup-prev:empty { display: none; }
  .sup-err { color: #ff8f92; font-size: .86rem; min-height: 0; }
  .sup-err:empty { display: none; }
  .sup-send { align-self: flex-start; border: 0; cursor: pointer; font-family: inherit; }
  .sup-send:disabled { opacity: .6; cursor: default; }
  .sup-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .sup-close-t { background: none; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-btn); padding: 9px 14px; font: inherit; font-size: .85rem; cursor: pointer; }
  .sup-close-t:hover { border-color: #ff8f92; color: #ff8f92; }
  .sup-ticket-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-right: 40px; }
  .sup-thread { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; max-height: 46vh; overflow: auto; padding: 2px; }
  .sup-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
  .sup-msg.me { align-self: flex-end; background: rgba(61,214,57,.14); border: 1px solid rgba(61,214,57,.35); border-bottom-right-radius: 4px; }
  .sup-msg.team { align-self: flex-start; background: var(--dark3); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
  .sup-msg-meta { font-size: .72rem; opacity: .65; margin-bottom: 4px; }
  .sup-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .sup-imgs img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
  .sup-closed-note { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(232,240,232,.06); font-size: .88rem; opacity: .85; }
  @media (max-width: 560px) {
    .sup-modal { padding: 0; align-items: flex-end; }
    .sup-dialog { max-height: 92dvh; border-radius: 18px 18px 0 0; padding: 18px 16px max(16px, env(safe-area-inset-bottom)); }
    .sup-head { padding: 14px; } .sup-row { padding: 12px 14px; }
    .sup-thread { max-height: 50vh; }
  }

  .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; }
  .cas-shop { display:flex; flex-direction:column; gap:8px; padding:16px 18px; }
  .cas-lbl { font-size:.8rem; color:var(--muted); font-weight:600; margin-top:6px; }
  .cas-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
  .cas-pick { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:10px; border:1px solid var(--border); background:var(--card-bg); color:var(--text); font-weight:600; font-size:.85rem; cursor:pointer; text-align:left; min-width:0; }
  .cas-pick img { width:28px; height:28px; object-fit:contain; border-radius:6px; flex:none; }
  .cas-pick span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cas-pick.on, .cas-amt.on { border-color:var(--green); box-shadow:0 0 0 2px rgba(61,214,57,.35); }
  .cas-amounts { margin-top:0; }
  .cas-amt { cursor:pointer; font:inherit; color:inherit; }
  .cas-amt:disabled { opacity:.45; cursor:not-allowed; }
  .cas-user { padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--card-bg); color:var(--text); font-size:.9rem; max-width:360px; }
  .cas-redeem { align-self:flex-start; padding:10px 18px; border-radius:8px; border:none; background:var(--green); color:#08130a; font-weight:700; cursor:pointer; margin-top:4px; }
  .cas-redeem:disabled { background:#333; color:#888; cursor:not-allowed; }
  .cas-help { font-size:.75rem; color:var(--muted); margin-top:-2px; }
  .cas-crypto { font-family: ui-monospace, Menlo, Consolas, monospace; font-size:.8rem; max-width:520px; }
  .shop-wk { margin-top:12px; padding:9px 13px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.03); font-size:.82rem; line-height:1.45; }
  .shop-wk.full { border-color:rgba(255,152,0,.5); background:rgba(255,152,0,.08); color:#ffcc80; }
  .cas-shop .shop-wk { margin-top:4px; }
  .profil-badge.st-fix { background:rgba(255,152,0,.15); color:#ffb74d; border:1px solid rgba(255,152,0,.4); }
  .psc-fix { border-left:3px solid #ffb74d; padding-left:10px; color:#ffcc80; }
  .cas-fix { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
  .psc-crypto { word-break:break-all; font-family: ui-monospace, Menlo, Consolas, monospace; font-size:.85em; }
  .botrix-delivery { margin-top:12px; padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:rgba(61,214,57,.06); font-size:.82rem; line-height:1.5; color:var(--text); }
  .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 { max-width:1000px; margin:6px auto 0; }
  .spiele-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
  .spiele-grid > .spiele-tile { flex:0 0 calc((100% - 32px) / 3); width:auto; }
  @media (max-width: 900px) { .spiele-grid > .spiele-tile { flex-basis:calc((100% - 16px) / 2); } }
  @media (max-width: 520px) { .spiele-grid > .spiele-tile { flex-basis:100%; } }
  .spiele-search { display:flex; align-items:center; gap:10px; max-width:420px; margin:0 auto 18px; padding:0 16px; height:48px; border-radius:999px;
                   background:var(--card-bg); border:1px solid var(--border); transition:border-color .15s; }
  .spiele-search:focus-within { border-color:var(--green); }
  .spiele-search svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; }
  .spiele-search input { flex:1; min-width:0; height:100%; background:transparent; border:0; outline:none; color:var(--text); font:inherit; font-size:.95rem; }
  .spiele-search input::placeholder { color:var(--muted); }
  .spiele-search:focus-within { box-shadow:0 0 0 3px rgba(61,214,57,.15); }
  .spiele-search input, .spiele-search input:focus, .spiele-search input:focus-visible { outline:none !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; -webkit-appearance:none; appearance:none; }
  .spiele-search input::-webkit-search-decoration, .spiele-search input::-webkit-search-results-button { -webkit-appearance:none; }
  .spiele-search input::-webkit-search-cancel-button { -webkit-appearance:none; width:16px; height:16px; cursor:pointer; opacity:.7;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa7a0' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat; }
  .spiele-search input::-webkit-search-cancel-button:hover { opacity:1; }
  .spiele-empty { text-align:center; color:var(--muted); margin:18px 0 0; }
  .spiele-tile[hidden] { display:none; }
  .spiele-tile-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .spiele-tile-top .slot-badge { margin-left:0; }
  .spiele-tile-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .spiele-tile--soon { cursor:default; border-style:dashed; background:rgba(255,255,255,.02); --tile-accent:var(--border); --tile-glow:none; }
  .spiele-tile--soon:hover { transform:none; box-shadow:none; border-color:var(--border); }
  .spiele-tile--soon .spiele-tile-icon { opacity:.6; }
  .spiele-tile--soon .spiele-tile-name { color:var(--muted); }
  .spiele-tile-soon { color:var(--muted); font-weight:700; font-size:.85rem; padding:9px 0; }
  .spiele-tile { position:relative; display:flex; flex-direction:column; gap:12px; text-align:left; width:100%; min-height:236px; height:100%; 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--roulette { --tile-accent:#e9c46a; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(233,196,106,.20), transparent 60%); }
  .spiele-tile--ruediger { --tile-accent:#5cb8ff; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(92,184,255,.22), transparent 60%); }
  .spiele-tile--chicken { --tile-accent:#3dd639; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(61,214,57,.22), transparent 60%); }
  .spiele-tile--friedhelm { --tile-accent:#f7cf5a; --tile-glow:radial-gradient(120% 90% at 85% 0%, rgba(247,207,90,.22), transparent 60%); }
  .spiele-tile--ruediger .spiele-tile-name, .spiele-tile--friedhelm .spiele-tile-name { white-space:normal; font-size:1.35rem; }
  .spiele-tile-icon svg { display:block; width:1em; height:1em; }
  .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:flex-end; 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; }
  /* === HALL OF FAME + RANGLISTE (Spiele-Tab) === */
  .hof, .spiele-lb { --hof-muted: rgba(232,240,232,.62); --hof-gold: #ffc107; max-width: 1000px; margin: 0 auto; }
  .hof { margin-top: 40px; }
  /* Zwischenüberschriften im Spiele-Tab: Spiele / Hall of Fame / Punkte-Rangliste */
  .spiele-subhead { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; font-family: var(--font-display), sans-serif; font-weight: 800;
    font-size: clamp(1.35rem, 3.6vw, 1.75rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; color: var(--white); text-align: center; }
  .spiele-subhead::before, .spiele-subhead::after { content: ''; flex: 1; height: 1px; min-width: 24px; background: linear-gradient(90deg, transparent, var(--border-strong)); }
  .spiele-subhead::after { background: linear-gradient(270deg, transparent, var(--border-strong)); }
  .spiele-subhead > span { white-space: nowrap; }
  .spiele-subhead--games { max-width: 1000px; margin: 0 auto 16px; }
  .spiele-soon { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 1000px; margin: 14px auto 0; padding: 11px 16px;
    border: 1px dashed var(--border); border-radius: 12px; background: rgba(255,255,255,.02); color: rgba(232,240,232,.7); font-size: .84rem; text-align: center; }
  .spiele-soon b { color: var(--text); }
  .spiele-soon[hidden] { display: none; }
  .hof-head { text-align: center; margin-bottom: 18px; }
  .hof-pts-m { display: none; }
  .hof-title { font-family: var(--font-display), sans-serif; font-weight: 900; font-size: clamp(1.9rem, 5vw, 2.7rem); letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; margin: 0 0 6px; color: var(--white); }
  .hof-title span { color: var(--green); }
  .hof-sub { color: var(--hof-muted); font-size: .9rem; margin: 0 0 16px; }
  .hof-seg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--card-bg); }
  .hof-seg button, .hof-tabs button { border: 0; background: transparent; color: var(--hof-muted); font: inherit; font-weight: 700; cursor: pointer; border-radius: 999px; }
  .hof-seg button { padding: 7px 16px; font-size: .82rem; }
  .hof-seg button.on, .hof-tabs button.on { background: var(--green); color: #08130a; }
  .hof-seg button:focus-visible, .hof-tabs button:focus-visible { outline: 2px solid var(--green-light); outline-offset: 2px; }
  .hof-body { min-height: 320px; transition: opacity .2s; }
  .hof-body.is-loading { opacity: .55; }
  .hof-loading, .hof-empty { color: var(--hof-muted); text-align: center; padding: 26px 10px; font-size: .88rem; }
  .hof-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
  .hof-kpi { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-width: 0; }
  .hof-kpi .n { font-family: var(--font-display), sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--green); }
  .hof-kpi .l { font-size: .7rem; color: var(--hof-muted); margin-top: 7px; text-transform: uppercase; letter-spacing: .08em; }
  .hof-kpi .who { font-size: .8rem; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hof-kpi.hl { border-color: rgba(255,193,7,.45); background: linear-gradient(180deg, rgba(255,193,7,.12), var(--card-bg)); }
  .hof-kpi.hl .n { color: var(--hof-gold); }
  .hof-grid2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
  .hof-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-width: 0; }
  .hof-card h3 { margin: 0 0 10px; font-size: .95rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .hof-card h3 small { color: var(--hof-muted); font-weight: 600; font-size: .75rem; }
  .hof-tabs { display: inline-flex; gap: 4px; }
  .hof-tabs button { padding: 4px 11px; font-size: .74rem; border: 1px solid var(--border); }
  .hof-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
  .hof-table td { padding: 9px 6px; border-top: 1px solid rgba(61,214,57,.10); vertical-align: middle; }
  .hof-table tr:first-child td { border-top: 0; }
  .hof-rk { width: 28px; font-weight: 800; color: var(--hof-muted); }
  .hof-rk.g1 { color: #ffd54a; } .hof-rk.g2 { color: #cfd8dc; } .hof-rk.g3 { color: #e0915a; }
  .hof-pl { font-weight: 700; overflow-wrap: anywhere; }
  .hof-gm { font-size: .74rem; color: var(--hof-muted); margin-top: 2px; }
  .hof-pts { text-align: right; white-space: nowrap; font-weight: 700; color: var(--green); }
  .hof-x { font-family: var(--font-display), sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--hof-gold); text-align: right; white-space: nowrap; }
  .hof-me td { background: rgba(61,214,57,.09); }
  .hof-gap td { text-align: center; color: var(--hof-muted); padding: 2px; border-top: 0; }
  .hof-you { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #08130a; background: var(--green); padding: 2px 7px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
  .hof-reels { letter-spacing: 1px; }
  .hof-num { display: inline-block; min-width: 1.6em; text-align: center; padding: 0 5px; border-radius: 5px; color: #fff; font-weight: 800; font-size: .92em; }
  .hof-num--r { background: #c42a36; } .hof-num--b { background: #262a2b; border: 1px solid rgba(255,255,255,.15); } .hof-num--g { background: #1d8a4a; }
  .hof-feed { display: flex; flex-direction: column; gap: 8px; }
  .hof-fi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(61,214,57,.12); border-radius: 12px; background: rgba(255,255,255,.02); font-size: .82rem; }
  .hof-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: rgba(61,214,57,.10); flex-shrink: 0; }
  .hof-ic--slot { background: rgba(255,193,7,.13); } .hof-ic--roulette { background: rgba(233,196,106,.14); }
  .hof-ft { flex: 1; min-width: 0; }
  .hof-ft small { display: block; color: var(--hof-muted); font-size: .72rem; margin-top: 2px; }
  .hof-fi .hof-x { font-size: 1rem; }
  .hof-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
  .hof-gcard { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; background: var(--card-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .hof-gcard::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--hof-glow); }
  .hof-gcard > * { position: relative; }
  .hof-gcard--slot { --hof-glow: radial-gradient(120% 90% at 85% 0%, rgba(255,193,7,.16), transparent 60%); }
  .hof-gcard--razor { --hof-glow: radial-gradient(120% 90% at 85% 0%, rgba(61,214,57,.18), transparent 60%); }
  .hof-gcard--roulette { --hof-glow: radial-gradient(120% 90% at 85% 0%, rgba(233,196,106,.18), transparent 60%); }
  .hof-ghd { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1rem; margin-bottom: 8px; }
  .hof-ghd span { font-size: 1.6rem; }
  .hof-row { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.06); }
  .hof-row span { color: var(--hof-muted); }
  .hof-row b { text-align: right; overflow-wrap: anywhere; }
  .hof-mine { margin-top: 14px; }
  .hof-chips { display: flex; gap: 10px; flex-wrap: wrap; }
  .hof-chip { flex: 1 1 220px; border: 1px solid var(--border); border-radius: 14px; padding: 11px 14px; background: rgba(61,214,57,.05); }
  .hof-chip .l { font-size: .75rem; color: var(--hof-muted); }
  .hof-chip .v { font-weight: 800; font-size: 1.1rem; margin-top: 2px; }
  .hof-chip .v em { font-style: normal; color: var(--hof-gold); font-size: .85rem; margin-left: 6px; }
  .hof-chip .v.hof-none { font-weight: 600; font-size: .85rem; color: var(--hof-muted); }
  .hof-chip small { display: block; font-size: .68rem; color: var(--hof-muted); margin-top: 2px; }
  .hof-foot { text-align: center; color: var(--hof-muted); font-size: .74rem; margin: 14px 0 0; }
  .spiele-lb { margin-top: 46px; }
  .spiele-lb .hof-head { margin-bottom: 4px; }
  .lb-moved { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: var(--text); text-decoration: none; font-size: .9rem; }
  .lb-moved b { margin-left: auto; color: var(--green); white-space: nowrap; }
  .lb-moved:hover b, .lb-moved:focus-visible b { color: var(--green-light); }
  @media (max-width: 860px) { .hof-kpis { grid-template-columns: repeat(2, 1fr); } .hof-grid2 { grid-template-columns: 1fr; } }
  /* Handy: Spiel-Kacheln kompakt nebeneinander (Symbol | Name + Eckdaten | Spielen), damit alle Spiele oben auf einen Blick passen */
  @media (max-width: 600px) {
    .spiele-grid { gap: 10px; }
    .spiele-grid > .spiele-tile { flex-basis: 100%; }
    .spiele-tile { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon name badge" "icon meta play"; align-items: center;
      column-gap: 14px; row-gap: 2px; min-height: 0; height: auto; padding: 14px 14px 14px 16px; }
    .spiele-tile-top { display: contents; }
    .spiele-tile-icon { grid-area: icon; font-size: 2.4rem; width: 2.9rem; display: flex; justify-content: center; }
    .spiele-tile .spiele-tile-top .slot-badge { grid-area: badge; position: static; justify-self: end; align-self: end; margin: 0 0 6px; font-size: .58rem; padding: 1px 6px; white-space: nowrap; }
    .spiele-tile-name { grid-area: name; font-size: 1.15rem; letter-spacing: .3px; align-self: end; }
    .spiele-tile--ruediger .spiele-tile-name, .spiele-tile--friedhelm .spiele-tile-name { font-size: 1.05rem; }
    .spiele-tile-meta { grid-area: meta; font-size: .74rem; line-height: 1.4; align-self: start; }
    .spiele-tile-foot { grid-area: play; margin: 0; align-self: start; justify-self: end; }
    .spiele-tile-play { padding: 8px 14px; font-size: .78rem; }
    .spiele-tile:hover, .spiele-tile:focus-visible { transform: none; }
    .spiele-soon { font-size: .78rem; padding: 10px 12px; }
    .hof, .spiele-lb { margin-top: 34px; }
    .spiele-subhead { font-size: 1.2rem; gap: 10px; }
    .spiele-subhead::before, .spiele-subhead::after { min-width: 14px; }
    .hof-sub { font-size: .82rem; margin-bottom: 12px; }
    .hof-seg { display: flex; width: 100%; }
    .hof-seg button { flex: 1; padding: 8px 6px; }
    .hof-kpis { gap: 8px; }
    .hof-kpi { padding: 12px; }
    .hof-kpi .n { font-size: 1.5rem; }
    .hof-kpi .l { font-size: .62rem; letter-spacing: .06em; }
    .hof-grid2, .hof-games { gap: 10px; }
    .hof-card { padding: 14px 12px; }
    .hof-card h3 { font-size: .9rem; }
    .hof-table { font-size: .82rem; }
    .hof-table td { padding: 8px 4px; }
    .hof-rk { width: 22px; }
    .hof-table td.hof-pts { display: none; }
    .hof-pts-m { display: block; font-family: inherit; font-size: .72rem; font-weight: 700; color: var(--green); margin-top: 1px; }
    .hof-gname { display: none; }
    .hof-x { font-size: 1.05rem; }
    .hof-fi { padding: 8px; gap: 8px; font-size: .8rem; }
    .hof-ic { width: 30px; height: 30px; font-size: 1rem; }
    .hof-gcard { padding: 12px 14px; }
    .hof-chip { flex-basis: 100%; }
    .lb-bar { margin: 10px 0; }
  }
  @media (max-width: 420px) { .hof-kpi .n { font-size: 1.55rem; } .hof-card { padding: 14px 12px; } .hof-table td { padding: 8px 4px; } .hof-x { font-size: 1rem; } }
  /* v95: Punkte-Rangliste */
  .lb-bar select { cursor:pointer; }
  .lb-info { font-size:.78rem; color: var(--hof-muted, rgba(232,240,232,.62)); margin-left:auto; }
  .lb-table td.lb-pos { width:56px; font-weight:800; color: rgba(232,240,232,.75); font-variant-numeric: tabular-nums; }
  .lb-medal { font-size:1.2rem; }
  .lb-table td.lb-name b { font-weight:700; overflow-wrap:anywhere; }
  .lb-sub { display:none; }
  .lb-lvl-pill { display:inline-block; min-width:34px; text-align:center; padding:2px 8px; border-radius:99px; background: rgba(255,193,7,.14); color:#ffc107; font-weight:800; font-size:.8rem; }
  .lb-table td.lb-pts { font-weight:800; color: var(--green); font-variant-numeric: tabular-nums; white-space:nowrap; }
  .lb-table td.lb-wt { color: rgba(232,240,232,.75); white-space:nowrap; }
  .lb-table tr.lb-top1 td { background: rgba(255,193,7,.07); }
  .lb-table tr.lb-top2 td, .lb-table tr.lb-top3 td { background: rgba(255,255,255,.03); }
  .lb-table tr.lb-top td:first-child { box-shadow: inset 3px 0 0 rgba(255,193,7,.7); }
  .lb-table tr.lb-top2 td:first-child { box-shadow: inset 3px 0 0 rgba(200,210,220,.6); }
  .lb-table tr.lb-top3 td:first-child { box-shadow: inset 3px 0 0 rgba(205,127,50,.7); }
  .lb-table tr.lb-me td { background: rgba(61,214,57,.12) !important; }
  .lb-table tr.lb-gap td { text-align:center; color: rgba(232,240,232,.4); padding:4px; letter-spacing:.3em; }
  @media (max-width: 600px) {
    .lb-bar { display:grid; grid-template-columns: 1fr auto; gap:8px; }
    .lb-bar input { grid-column: 1 / -1; }
    .lb-bar button { order:2; } .lb-bar label { order:1; }
    .lb-info { grid-column: 1 / -1; margin:0; order:3; }
    .lb-table td.lb-pos { width:38px; text-align:center; }
    .lb-sub { display:block; font-size:.72rem; font-weight:500; color: rgba(232,240,232,.6); margin-top:2px; }
    .lb-table td.lb-pts { text-align:right; }
    .lb-table th:nth-child(4) { text-align:right; }
  }

  .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; }
  /* Punkte-Shop-Bestellungen + Rubbellos */
  .psc-order { padding: 16px 20px; border-bottom: 1px solid var(--border); }
  .psc-order:last-child { border-bottom: none; }
  .psc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
  .psc-title { font-weight:600; font-size:0.95rem; }
  .psc-meta { color: var(--muted); opacity:.75; font-size:0.74rem; margin-top:2px; }
  .psc-steps { display:flex; gap:6px; margin:14px 0 4px; font-size:0.7rem; color: var(--muted); }
  .psc-step { flex:1; text-align:center; padding-top:8px; border-top:3px solid var(--border); }
  .psc-step.done { border-top-color: var(--green); color: var(--green); }
  .psc-step.bad { border-top-color:#e5484d; color:#ff8f92; }
  .psc-note { margin-top:10px; font-size:0.82rem; color: var(--muted); }
  .psc-hint { font-size:0.82rem; color: var(--muted); margin:12px 0 8px; }
  .psc-box { position:relative; width:100%; max-width:340px; height:84px; border-radius:12px; overflow:hidden; background:#0a0f0a; border:1px solid var(--green); user-select:none; -webkit-user-select:none; }
  .psc-code { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Courier New',monospace; font-size:1.3rem; font-weight:700; letter-spacing:2px; color: var(--green); padding:0 8px; text-align:center; word-break:break-all; }
  .psc-box canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; transition:opacity .5s; }
  .psc-box canvas.gone { opacity:0; pointer-events:none; }
  .psc-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
  .psc-btn { background: var(--green); color:#08130a; font-weight:700; border:0; border-radius:8px; padding:8px 14px; font-size:0.82rem; cursor:pointer; }
  .psc-btn.ghost { background:transparent; color: var(--green); border:1px solid var(--green); }
  .psc-err { color:#ff8f92; font-size:0.78rem; margin-top:6px; }
  /* Shop-Bestellungen kompakt: Zeilen für erledigte/abgelehnte Bestellungen */
  .psc-panel .psc-order { padding: 14px 18px; }
  .psc-row { padding: 10px 18px; border-bottom: 1px solid var(--border); }
  .psc-panel > :last-child { border-bottom: 0; }
  .psc-row-top { display: flex; align-items: center; gap: 10px; }
  .psc-row-ic { width: 22px; text-align: center; flex-shrink: 0; font-size: .95rem; }
  .psc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .psc-row-main b { font-size: .86rem; font-weight: 600; }
  .psc-row-main small { font-size: .72rem; color: var(--muted); opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .psc-row .profil-badge { flex-shrink: 0; }
  .psc-row--no .psc-row-main b { opacity: .7; }
  .psc-btn.sm { padding: 6px 11px; font-size: .74rem; flex-shrink: 0; }
  .psc-row .psc-box { margin: 10px 0 0 32px; height: 60px; max-width: 300px; width: calc(100% - 32px); }
  .psc-row .psc-actions { margin: 6px 0 0 32px; }
  .psc-row .psc-err { margin-left: 32px; }
  .psc-row .psc-err:empty { display: none; }
  .psc-hist-label { padding: 10px 18px 2px; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); opacity: .6; }
  .psc-more-btn { display: block; width: 100%; background: none; border: 0; border-top: 1px solid var(--border); color: var(--green); font: inherit; font-weight: 600; font-size: .8rem; padding: 10px; cursor: pointer; }
  .psc-more-btn:hover { background: rgba(61,214,57,.05); }
  .psc-row-btn { order: -1; flex-shrink: 0; margin-left: auto; }
  .psc-row-main { order: -2; } .psc-row-ic { order: -3; }
  @media (max-width: 480px) {
    .psc-row { padding: 10px 14px; }
    .psc-row-top { flex-wrap: wrap; row-gap: 8px; }
    .psc-row-main { flex: 1 1 0; }
    .psc-row-main small { white-space: normal; }
    .psc-row-btn { order: 5; flex-basis: 100%; margin-left: 0; padding-left: 32px; }
  }
  .profil-header h2 { overflow-wrap: anywhere; min-width: 0; }
  .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: var(--font-display), 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: var(--font-display), 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=1791669000") !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%),
        image-set(url("/420jackpot-bg-mobile.webp?v=1791669000") type("image/webp"), url("/420jackpot-bg-mobile.jpg?v=1791669000") type("image/jpeg")) !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=1791669000");
    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%),
      image-set(url("/420jackpot-bg.webp?v=1791669000") type("image/webp"), url("/420jackpot-bg.jpg?v=1791669000") type("image/jpeg"));
    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=1791669000") !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%),
        image-set(url("/420jackpot-bg.webp?v=1791669000") type("image/webp"), url("/420jackpot-bg.jpg?v=1791669000") type("image/jpeg")) !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: <img class="hero-deco hero-deco--tl" src="/deco/slot.png" alt=""> */
  .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: var(--font-display), 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: var(--font-display), 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; }
  @media (min-width: 1200px) { .nav-account .nav-account-name { max-width: 180px; } }
  .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-live{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;margin:-34px auto 22px;text-align:center;}
  .gct-live-txt{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:clamp(0.92rem,1.4vw,1.05rem);}
  .gct-live-dot{width:9px;height:9px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 0 0 rgba(255,77,77,.6);animation:gctLivePulse 1.6s ease-out infinite;flex:none;}
  @keyframes gctLivePulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.6);}70%{box-shadow:0 0 0 9px rgba(255,77,77,0);}100%{box-shadow:0 0 0 0 rgba(255,77,77,0);}}
  .gct-live-btns{display:inline-flex;gap:8px;}
  .gct-live-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:100px;font-weight:700;font-size:0.92rem;text-decoration:none;color:#fff;border:1px solid;transition:background .2s,transform .2s;}
  .gct-live-btn:hover{transform:translateY(-1px);}
  .gct-live-twitch{background:rgba(145,70,255,0.14);border-color:rgba(145,70,255,0.5);} .gct-live-twitch svg{color:#9146FF;} .gct-live-twitch:hover{background:rgba(145,70,255,0.26);}
  .gct-live-kick{background:rgba(83,252,24,0.10);border-color:rgba(83,252,24,0.45);} .gct-live-kick svg{color:#53FC18;} .gct-live-kick:hover{background:rgba(83,252,24,0.2);}
  @media (prefers-reduced-motion: reduce){ .gct-live-dot{animation:none;} }
  .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-lbls { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 8px; }
  .cc-lbl { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgba(61,214,57,0.14); color: var(--green, #3DD639); border: 1px solid rgba(61,214,57,0.35); }
  .cc-excl { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: linear-gradient(90deg, #3DD639, #9bf58f); color: #08130a; font-weight: 800; font-size: 0.9rem; text-align: center; }
  .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-notice { background: rgba(255,193,7,0.1); border: 1px solid rgba(255,193,7,0.45); color: #ffd666; border-radius: var(--radius-card); padding: 12px 16px; margin-bottom: 12px; font-weight: 600; font-size: 0.92rem; }
  .sched-badge { display: inline-block; vertical-align: middle; margin-left: 10px; font-family: inherit; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; background: var(--c); color: #0b0f0b; }
  .sched-hero.is-off .sched-hero-ttl, .sched-hero.is-off .sched-hero-day { text-decoration: line-through; opacity: 0.55; }
  .sched-hero.is-off { border-color: rgba(229,72,77,0.45); box-shadow: none; }
  .sched-hero-info { margin-top: 8px; font-size: 0.86rem; color: var(--white); }
  .sched-hero-cd.is-off { color: #ff8f92; font-family: inherit; }
  .sched-slot-tab.is-off { text-decoration: line-through; opacity: 0.6; }
  .sched-day-flag { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); }
  .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%; min-width: 0; padding: 9px 13px; border-radius: 14px; font-size: 0.85rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
  .cw-panel.cw-kb .cw-offline, .cw-panel.cw-kb .cw-disclaimer { display: none !important; }
  .cw-panel.cw-kb .cw-head { padding: 10px 14px; }
  .cw-panel.cw-kb .cw-input-row { padding: 8px 10px; }
  @media (max-width: 480px) { .cw-offline { font-size: 0.7rem; padding: 7px 12px; } }
  .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-msg .cw-time { display: block; font-size: 0.62rem; opacity: .6; margin-top: 3px; font-weight: 400; }
  .cw-msg.user .cw-time { text-align: right; }
  .cw-msg.auto { background: rgba(255,193,7,0.08); border-color: rgba(255,193,7,0.35); font-size: 0.8rem; }
  .cw-seen { align-self: flex-end; font-size: 0.65rem; color: var(--muted); margin-top: -6px; }
  .cw-typing { font-size: 0.72rem; color: var(--muted); font-style: italic; padding: 0 14px 6px; min-height: 18px; flex-shrink: 0; background: var(--dark2); }
  .cw-typing:empty { min-height: 0; padding: 0; }
  .cw-offline { display: none; font-size: 0.74rem; line-height: 1.4; padding: 9px 14px; background: rgba(224,85,85,0.10); border-bottom: 1px solid rgba(224,85,85,0.3); color: var(--text); flex-shrink: 0; }
  .cw-offline a { color: var(--green); font-weight: 700; }
  .cw-panel.is-offline .cw-offline { display: block; }
  .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; }

  /* === 420 SIGNATURE MOTION (v75) – auffällig, aber hochwertig === */

  /* 1) Überschriften steigen aus einer unsichtbaren Linie auf (Masken-Reveal) */
  .section-title.reveal-el.in-view, .cc-hero-title.reveal-el.in-view {
    animation: titleRise .9s cubic-bezier(.19,1,.22,1) backwards;
  }
  @keyframes titleRise {
    from { opacity: 0; transform: translateY(0.45em); clip-path: inset(0 0 100% 0); filter: blur(6px); }
    60%  { filter: blur(0); }
    to   { opacity: 1; transform: translateY(0); clip-path: inset(-20% -10% -40% -10%); }
  }
  /* Überschriften einfarbig: Weiß + Akzentwort in Markengrün (kein Farbverlauf) */
  .section-title .accent, .cc-hero-title .accent, .hero-title-main .accent {
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: var(--green); color: var(--green); animation: none; transition: text-shadow .4s ease;
  }
  .section-title:hover .accent, .cc-hero-title:hover .accent, .hero-title-main:hover .accent { text-shadow: 0 0 24px rgba(61,214,57,0.55); }
  .section-title, .cc-hero-title { text-wrap: balance; }
  .section-sub { text-wrap: pretty; }
  .section-header .section-sub { animation: none; }
  .section-title.in-view + .section-sub { animation: subFade .8s ease .35s backwards; }
  @keyframes subFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* 2) Unterstrich mit Funkenkopf – mittig unter der Überschrift */
  .section-title::after, .cc-hero-title::after { left: 50%; margin-left: -36px; transition: width .5s cubic-bezier(.16,1,.3,1), margin-left .5s cubic-bezier(.16,1,.3,1); }
  .section-title::before, .cc-hero-title::before { left: 50%; margin-left: -39px; }
  .section-title.in-view::after, .cc-hero-title.in-view::after { animation-delay: .45s; }
  .section-title.in-view::before, .cc-hero-title.in-view::before { animation-delay: .45s; }
  @media (hover: hover) {
    .section-title.in-view:hover::after, .cc-hero-title.in-view:hover::after { width: 120px; margin-left: -60px; }
  }

  /* 3) Karten: weich aus der Unschärfe ins Bild */
  @keyframes revealUp { from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
  .reveal-el.in-view { animation-duration: .85s; }

  /* 4) Cursor-Spotlight + leuchtender Rand, der der Maus folgt (nur mit Maus) */
  @media (hover: hover) and (pointer: fine) {
    .casino-card, .social-card, .stat-card, .card { --mx: 50%; --my: 0%; }
    .social-card, .stat-card { position: relative; }
    .casino-card::before, .social-card::before, .stat-card::before, .card::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
      padding: 1px; opacity: 0; transition: opacity .35s ease;
      background: radial-gradient(260px circle at var(--mx) var(--my), rgba(114,245,110,0.9), rgba(61,214,57,0.25) 40%, transparent 70%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
    }
    .casino-card::after, .social-card::after, .stat-card::after {
      content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
      opacity: 0; transition: opacity .35s ease;
      background: radial-gradient(420px circle at var(--mx) var(--my), rgba(61,214,57,0.09), transparent 60%);
    }
    .casino-card:hover::before, .social-card:hover::before, .stat-card:hover::before, .card:hover::before,
    .casino-card:hover::after, .social-card:hover::after, .stat-card:hover::after { opacity: 1; }
  }

  /* 5) "Jetzt spielen": regelmäßiger Lichtstreifen – zieht den Blick, ohne zu blinken */
  .cc-btn { position: relative; overflow: hidden; isolation: isolate; }
  .cc-btn::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; z-index: 1;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-18deg); animation: ctaShine 5.5s cubic-bezier(.4,0,.2,1) 2s infinite;
  }
  .casino-list > .casino-card:nth-child(2) .cc-btn::after { animation-delay: 2.6s; }
  .casino-list > .casino-card:nth-child(3) .cc-btn::after { animation-delay: 3.2s; }
  @keyframes ctaShine { 0% { transform: translateX(0) skewX(-18deg); } 22%, 100% { transform: translateX(430%) skewX(-18deg); } }

  /* 6) Scroll-Fortschritt: schmale Neon-Linie ganz oben */
  .scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 10001; pointer-events: none;
    background: linear-gradient(90deg, var(--green), var(--green-light));
    box-shadow: 0 0 10px rgba(61,214,57,0.8);
    transform-origin: 0 50%; transform: scaleX(0);
  }

  /* Altersabfrage: Titel ist kein H2 mehr (gehört nicht in die Seitengliederung) */
  #agegate-title { margin-top: 0; }

  @media (prefers-reduced-motion: reduce) {
    .section-title.reveal-el.in-view, .cc-hero-title.reveal-el.in-view, .section-title.in-view + .section-sub,
    .section-title .accent, .cc-hero-title .accent, .hero-title-main .accent, .cc-btn::after { animation: none !important; }
    .scroll-progress { display: none; }
  }

  /* === MARKE v77: Schrift Big Shoulders Display === */
  :root { --font-display: 'Big Shoulders Display'; --font-body: 'Outfit'; }
  /* Bebas war eine reine Großbuchstaben-Schrift -> Versalien beibehalten, damit das Erscheinungsbild gleich bleibt */
  #agegate-logo, #agegate-title, #email-auth-title, #login-choice-title, .bh-highlight-val, .bh-kpi-val, .botrix-tier-card .val,
  .card-bonus, .cc-bonus-big, .cc-number, .footer-logo, .gcg-bar-value, .gcp-rank, .gcp-value, .gct-cd-num, .gct-faq-heading,
  .hero-kicker, .hero-title, .hero-title-main, .nav-logo, .profil-avatar-fallback, .profil-guest h2, .profil-header h2, .profil-row .val,
  .profil-section-title, .profil-stat-card .num, .sched-day-num, .sched-hero-title, .slot-paytable b, .slot-result.win, .slot-stat-v,
  .social-name, .spiele-tile-name, .stat-num, .wheel-result, .wheel-seg-label, .section-title, .cc-hero-title, .bh-title {
    text-transform: uppercase;
  }
  .section-title, .cc-hero-title, .hero-title-main { letter-spacing: 0.005em; line-height: 1.02; }
  .cc-number { font-family: var(--font-body), sans-serif; font-weight: 800; font-size: 0.85rem; letter-spacing: -0.02em; }

  /* === HINTERGRUND v78: Bild veredelt, ohne Dauer-Filter, blendet beim Scrollen ins Dunkle === */
  .hero-bg, .hero-bg[style] { animation: none !important; }
  .hero-bg { filter: saturate(0.85) brightness(0.95) contrast(1.05) !important; }
  /* grüne Farbstimmung über dem Foto (Markenlook statt Fremdbild) */
  .hero-bg::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(40,150,45,0.42) 0%, rgba(30,110,35,0.38) 100%);
    mix-blend-mode: color;
  }
  /* Vignette (Ränder dunkler, Blick zur Mitte) + Abdunkeln beim Scrollen */
  .bg-shade {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 110% 85% at 50% 25%, transparent 35%, rgba(6,9,6,0.72) 100%);
  }
  .bg-shade::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,14,9,0.86), rgba(10,14,9,0.94));
    opacity: var(--bg-dim, 0); will-change: opacity;
  }

  /* === iOS-FIX v80: Auf Handys/Tablets keine Effekte, die fixierte Elemente verrutschen lassen ===
     iOS Safari positioniert fixierte Ebenen (untere Navigationsleiste, Chat-Button) beim Scrollen
     falsch, wenn darunter Mischmodi, Unschärfe-Animationen oder pro Frame veränderte Fixed-Ebenen liegen.
     Desktop behält alle Effekte. */
  @media (max-width: 900px), (pointer: coarse) {
    .hero-bg::after { mix-blend-mode: normal; background: linear-gradient(180deg, rgba(20,70,22,0.22), rgba(10,40,12,0.30)); }
    .bg-shade::after { display: none; }
    .bg-shade { background: radial-gradient(ellipse 120% 80% at 50% 20%, transparent 30%, rgba(6,9,6,0.78) 100%); }
    .scroll-progress { display: none; }
    @keyframes revealUpM   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
    @keyframes titleRiseM  { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
    .reveal-el.in-view { animation-name: revealUpM; }
    .reveal-el.reveal-img.in-view { animation-name: revealZoom; }
    .section-title.reveal-el.in-view, .cc-hero-title.reveal-el.in-view { animation-name: titleRiseM; }
    .cc-btn::after { animation: none; display: none; }
  }