:root {
    --quick-primary: #e4352f;
    --quick-primary-light: #ef625d;
    --quick-primary-dark: #c82a1e;
    --quick-primary-alpha-20: rgba(228,53,47,0.2);
    --quick-accent: #fbe853;
    --quick-bg-dark: #040109;
    --quick-bg-light: #12151e;
    --quick-bg-card: #181c28;
    --quick-bg-card-hover: #242731;
    --quick-text-primary: #ffffff;
    --quick-text-secondary: rgba(255,255,255,0.7);
    --quick-text-muted: rgba(255,255,255,0.45);
    --quick-success: #22c55e;
    --quick-success-dark: #16a34a;
    --quick-warning: #f59e0b;
    --quick-danger: #ef4444;
    --quick-gradient-primary: linear-gradient(135deg, #e4352f, #fbe853);
    --quick-gradient-dark: linear-gradient(135deg, #040109, #181c28);
    --quick-radius-sm: 5px;
    --quick-radius: 9px;
    --quick-radius-lg: 14px;
    --quick-transition: 0.3s ease;
    --quick-spacing-sm: 10px;
    --quick-font-heading: 'Orbitron', 'Exo 2', sans-serif;
    --quick-font-body: 'Exo 2', sans-serif;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--quick-font-body);
    background-color: var(--quick-bg-dark);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(228,53,47,0.07) 1px, transparent 0);
    background-size: 32px 32px;
    color: var(--quick-text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: var(--quick-primary-light);
    text-decoration: none;
    transition: color var(--quick-transition);
}

a:hover {
    color: var(--quick-accent);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* ============================================================
   3. LAYOUT
   ============================================================ */
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}

.quick-shell,
.quick-shell {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.quick-header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

main,
.quick-art-body {
    grid-area: main;
    min-width: 0;
}

.quick-footer {
    grid-area: footer;
}

/* ============================================================
   4. HEADER
   ============================================================ */
.quick-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    height: 64px;
    background: rgba(4,1,9,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(228,53,47,0.2);
    box-shadow: 0 2px 24px rgba(0,0,0,0.5);
}

.logo-link {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.header-nav a,
.header-nav div {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--quick-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--quick-font-heading);
    color: var(--quick-text-secondary);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color var(--quick-transition), background var(--quick-transition);
    white-space: nowrap;
}

.header-nav a:hover,
.header-nav div:hover {
    color: var(--quick-text-primary);
    background: rgba(228,53,47,0.12);
}

.header-nav a.active {
    color: var(--quick-primary-light);
    background: rgba(228,53,47,0.15);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.btn-login {
    padding: 7px 18px;
    border-radius: var(--quick-radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--quick-font-heading);
    color: var(--quick-text-primary);
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    cursor: pointer;
    transition: all var(--quick-transition);
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-login:hover {
    border-color: var(--quick-primary-light);
    color: var(--quick-primary-light);
    background: rgba(228,53,47,0.1);
}

.btn-register {
    padding: 7px 18px;
    border-radius: var(--quick-radius-sm);
    font-size: 0.82rem;
    font-weight: 700;
    font-family: var(--quick-font-heading);
    color: #fff;
    background: var(--quick-primary);
    cursor: pointer;
    transition: all var(--quick-transition);
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    border: none;
}

.btn-register:hover {
    background: var(--quick-primary-light);
    color: #fff;
    box-shadow: 0 4px 16px rgba(228,53,47,0.4);
    transform: translateY(-1px);
}

.btn-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--quick-radius-sm);
    color: var(--quick-text-secondary);
    cursor: pointer;
    transition: all var(--quick-transition);
    background: rgba(255,255,255,0.05);
}

.btn-search:hover {
    color: var(--quick-text-primary);
    background: rgba(255,255,255,0.1);
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    border-radius: var(--quick-radius-sm);
    background: rgba(255,255,255,0.06);
    transition: background var(--quick-transition);
}

.hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--quick-text-primary);
    border-radius: 2px;
    transition: all var(--quick-transition);
}

.hamburger:hover {
    background: rgba(228,53,47,0.15);
}

/* ============================================================
   5. SIDEBAR
   ============================================================ */
.sidebar {
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    width: 64px;
    background: rgba(18,21,30,0.97);
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 900;
}

.sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--quick-radius-sm);
    color: var(--quick-text-muted);
    cursor: pointer;
    transition: all var(--quick-transition);
    font-size: 1.1rem;
}

.sidebar-item:hover {
    color: var(--quick-text-primary);
    background: rgba(228,53,47,0.15);
    transform: scale(1.05);
}

.sidebar-item.active {
    color: var(--quick-primary-light);
    background: rgba(228,53,47,0.18);
}

.sidebar-item .badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--quick-primary);
    border: 2px solid var(--quick-bg-dark);
}

/* ============================================================
   6. MOBILE MENU
   ============================================================ */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1100;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--quick-transition);
}

.mobile-menu-overlay.active {
    display: block;
    opacity: 1;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    max-width: 90vw;
    height: 100vh;
    background: var(--quick-bg-light);
    border-left: 1px solid rgba(228,53,47,0.2);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--quick-radius-sm);
    color: var(--quick-text-secondary);
    background: rgba(255,255,255,0.06);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--quick-transition);
}

.mobile-menu-close:hover {
    color: #fff;
    background: rgba(228,53,47,0.2);
}

.mobile-menu-body {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-menu-auth {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.mobile-menu-btn {
    flex: 1;
    padding: 10px 12px;
    border-radius: var(--quick-radius-sm);
    background: var(--quick-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: var(--quick-font-heading);
    text-align: center;
    cursor: pointer;
    transition: all var(--quick-transition);
}

.mobile-menu-btn:hover {
    background: var(--quick-primary-light);
}

.mobile-menu-btn.mobile-menu-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--quick-text-secondary);
}

.mobile-menu-btn.mobile-menu-btn-secondary:hover {
    border-color: var(--quick-primary-light);
    color: var(--quick-primary-light);
    background: rgba(228,53,47,0.1);
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--quick-radius-sm);
    color: var(--quick-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--quick-font-heading);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all var(--quick-transition);
}

.mobile-menu-item:hover {
    color: var(--quick-text-primary);
    background: rgba(228,53,47,0.1);
}

.mobile-menu-footer {
    padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
    font-size: 0.75rem;
    color: var(--quick-text-muted);
    text-align: center;
    flex-shrink: 0;
}

/* ============================================================
   7. ARTICLE WRAPPER & PAGE TITLE
   ============================================================ */
.quick-art-body {
    padding: 40px 0;
}

.quick-doc-title,
.quick-doc-title {
    font-family: var(--quick-font-heading);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: var(--quick-text-primary);
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.quick-intro-block,
.quick-intro-block {
    color: var(--quick-text-secondary);
    font-size: 1rem;
    line-height: 1.75;
    max-width: 860px;
}

.quick-intro-block p,
.quick-intro-block p {
    margin-bottom: 14px;
}

.quick-strap,
.quick-strap {
    font-family: var(--quick-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--quick-accent);
    font-style: italic;
    margin-top: 8px;
}

.quick-shell {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* ============================================================
   8. CTA BUTTONS
   ============================================================ */
.quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--quick-radius-sm);
    font-family: var(--quick-font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all var(--quick-transition);
    text-decoration: none;
    border: none;
    white-space: nowrap;
}

.quick-btn-primary {
    background: var(--quick-gradient-primary);
    color: #111;
    box-shadow: 0 4px 20px rgba(228,53,47,0.35);
}

.quick-btn-primary:hover {
    box-shadow: 0 6px 28px rgba(228,53,47,0.55);
    transform: translateY(-2px) scale(1.02);
    color: #000;
}

/* ============================================================
   9. HERO / BANNER
   ============================================================ */
.quick-banner-top,
.quick-banner-top {
    padding: 0 0 32px;
}

.quick-top-grad,
.quick-top-grad {
    background: linear-gradient(135deg, rgba(228,53,47,0.22) 0%, rgba(18,21,30,0.97) 55%, rgba(251,232,83,0.08) 100%);
    border: 1px solid rgba(228,53,47,0.25);
    border-radius: var(--quick-radius-lg);
    padding: 48px 40px;
    position: relative;
    overflow: hidden;
}

.quick-top-grad::before,
.quick-top-grad::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(228,53,47,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.quick-banner-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.quick-banner-label {
    display: inline-block;
    background: var(--quick-primary-alpha-20);
    border: 1px solid rgba(228,53,47,0.4);
    color: var(--quick-primary-light);
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--quick-font-heading);
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.quick-banner-title {
    font-family: var(--quick-font-heading);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    background: var(--quick-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 14px;
}

.quick-banner-text {
    color: var(--quick-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* ============================================================
   10. GAMES SECTION
   ============================================================ */
.quick-gm-section,
.quick-gm-section {
    padding: 32px 0;
}

.games-section-title,
#top-games-h2 {
    font-family: var(--quick-font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--quick-text-primary);
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.quick-gm-grid,
.quick-gm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.quick-game-box,
.quick-game-box {
    position: relative;
    border-radius: var(--quick-radius);
    overflow: hidden;
    background: var(--quick-bg-card);
    border: 1px solid rgba(228,53,47,0.15);
    cursor: pointer;
    aspect-ratio: 3/4;
    transition: transform var(--quick-transition), box-shadow var(--quick-transition);
}

.quick-game-box img,
.quick-game-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--quick-transition);
}

.quick-game-box:hover img,
.quick-game-box:hover img {
    transform: scale(1.06);
}

.quick-gm-skeleton {
    width: 100%;
    height: 100%;
    background: var(--quick-bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--quick-text-muted);
    font-size: 2rem;
}

.quick-gm-overlay,
.quick-gm-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.2) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 12px;
    opacity: 0;
    transition: opacity var(--quick-transition);
}

.quick-game-box:hover .quick-gm-overlay,
.quick-game-box:hover .quick-gm-overlay {
    opacity: 1;
}

.quick-start-btn,
.quick-start-btn {
    background: var(--quick-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--quick-font-heading);
    padding: 7px 20px;
    border-radius: var(--quick-radius-sm);
    cursor: pointer;
    transition: background var(--quick-transition);
    white-space: nowrap;
}

.quick-start-btn:hover,
.quick-start-btn:hover {
    background: var(--quick-primary-light);
}

.quick-tile-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin-bottom: 6px;
    line-height: 1.3;
}

.btn-view-all-games {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: rgba(228,53,47,0.12);
    border: 1px solid rgba(228,53,47,0.3);
    border-radius: var(--quick-radius-sm);
    color: var(--quick-primary-light);
    font-size: 0.85rem;
    font-weight: 700;
    font-family: var(--quick-font-heading);
    cursor: pointer;
    transition: all var(--quick-transition);
    margin-top: 8px;
}

.btn-view-all-games:hover {
    background: rgba(228,53,47,0.2);
    color: #fff;
}

/* ============================================================
   11. CONTENT SECTIONS
   ============================================================ */
.quick-content-block,
.quick-content-block {
    padding: 40px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.quick-content-block h2 {
    font-family: var(--quick-font-heading);
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-weight: 800;
    color: var(--quick-text-primary);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.quick-content-block h3 {
    font-family: var(--quick-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--quick-text-primary);
    margin-top: 24px;
    margin-bottom: 10px;
}

.quick-content-block h4 {
    font-family: var(--quick-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--quick-text-primary);
    margin-bottom: 6px;
}

.quick-content-block p {
    color: var(--quick-text-secondary);
    font-size: 0.97rem;
    line-height: 1.75;
    margin-bottom: 14px;
}

.quick-content-block ul {
    list-style: none;
    padding: 0;
    margin-bottom: 14px;
}

.quick-content-block ul li {
    position: relative;
    padding-left: 18px;
    color: var(--quick-text-secondary);
    font-size: 0.97rem;
    line-height: 1.7;
    margin-bottom: 6px;
}

.quick-content-block ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--quick-primary-light);
    font-size: 0.75rem;
    top: 4px;
}

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
    border-radius: var(--quick-radius);
}

.quick-summary-grid,
.quick-content-block table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.quick-summary-grid th,
.quick-content-block table th {
    background: rgba(228,53,47,0.15);
    color: var(--quick-text-primary);
    font-family: var(--quick-font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 10px 14px;
    text-align: left;
    letter-spacing: 0.03em;
    border-bottom: 1px solid rgba(228,53,47,0.2);
}

.quick-summary-grid td,
.quick-content-block table td {
    padding: 9px 14px;
    color: var(--quick-text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: top;
    line-height: 1.5;
}

.quick-summary-grid tr:last-child td,
.quick-content-block table tr:last-child td {
    border-bottom: none;
}

.quick-summary-grid tr:nth-child(even) td,
.quick-content-block table tr:nth-child(even) td {
    background: rgba(255,255,255,0.02);
}

/* ============================================================
   12. PROMO CODE
   ============================================================ */
.quick-promo-spot {
    background: linear-gradient(135deg, rgba(228,53,47,0.15), rgba(251,232,83,0.08));
    border: 1px solid rgba(228,53,47,0.35);
    border-radius: var(--quick-radius);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
}

.quick-promo-chip {
    background: var(--quick-primary);
    border-radius: var(--quick-radius-sm);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-deal-ico {
    font-size: 1.4rem;
    color: #fff;
}

.quick-voucher-body {
    flex: 1;
    min-width: 0;
}

.quick-deal-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--quick-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.quick-deal-code {
    font-family: var(--quick-font-heading);
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--quick-accent);
    letter-spacing: 0.08em;
}

.quick-code-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--quick-primary);
    color: #fff;
    border-radius: var(--quick-radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--quick-font-heading);
    cursor: pointer;
    transition: all var(--quick-transition);
    border: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.quick-code-copy:hover {
    background: var(--quick-primary-light);
    transform: translateY(-1px);
}

/* ============================================================
   13. TIMELINE
   ============================================================ */
.quick-flow,
.quick-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 20px 0;
    position: relative;
}

.quick-flow::before,
.quick-flow::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--quick-primary), transparent);
    z-index: 0;
}

.quick-step-row,
.quick-step-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 0;
    position: relative;
    z-index: 1;
}

.quick-stage-no,
.quick-stage-no {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--quick-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--quick-font-heading);
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 0 0 3px rgba(228,53,47,0.2);
}

.quick-flow-text,
.quick-flow-text {
    flex: 1;
    padding-top: 8px;
}

.quick-roadmap-head,
.quick-roadmap-head {
    font-family: var(--quick-font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--quick-text-primary);
    margin-bottom: 4px;
}

.quick-flow-desc,
.quick-flow-desc {
    font-size: 0.88rem;
    color: var(--quick-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   14. STATS GRID
   ============================================================ */
.quick-metric-grid,
.quick-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.quick-metric-card,
.quick-metric-card {
    background: var(--quick-bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--quick-radius);
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    transition: transform var(--quick-transition), border-color var(--quick-transition), box-shadow var(--quick-transition);
}

.quick-num-glyph,
.quick-num-glyph {
    font-size: 1.4rem;
    color: var(--quick-primary-light);
    margin-bottom: 4px;
}

.quick-kpi-val,
.quick-kpi-val {
    font-family: var(--quick-font-heading);
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--quick-text-primary);
    line-height: 1.1;
}

.quick-metric-lab,
.quick-metric-lab {
    font-size: 0.75rem;
    color: var(--quick-text-muted);
    font-weight: 500;
    text-align: center;
}

/* ============================================================
   15. INFO BOX
   ============================================================ */
.quick-msg-box,
.quick-msg-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: var(--quick-radius);
    margin: 16px 0;
    border: 1px solid transparent;
}

.quick-note-warn,
.quick-note-warn {
    background: rgba(245,158,11,0.1);
    border-color: rgba(245,158,11,0.3);
}

.quick-note-ok,
.quick-note-ok {
    background: rgba(34,197,94,0.1);
    border-color: rgba(34,197,94,0.3);
}

.quick-note-ico,
.quick-note-ico {
    flex-shrink: 0;
    font-size: 1.1rem;
    margin-top: 2px;
}

.quick-note-warn .quick-note-ico {
    color: var(--quick-warning);
}

.quick-note-ok .quick-note-ico {
    color: var(--quick-success);
}

.quick-note-body,
.quick-note-body {
    flex: 1;
    font-size: 0.88rem;
    color: var(--quick-text-secondary);
    line-height: 1.6;
}

.quick-note-body strong,
.quick-note-body strong {
    color: var(--quick-text-primary);
}

/* ============================================================
   16. QUICK TABLE
   ============================================================ */
.quick-summary-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin-bottom: 16px;
}

.quick-summary-grid th {
    background: rgba(228,53,47,0.12);
    color: var(--quick-text-primary);
    font-family: var(--quick-font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 10px 14px;
    text-align: left;
    letter-spacing: 0.03em;
    border-bottom: 1px solid rgba(228,53,47,0.2);
}

.quick-summary-grid td {
    padding: 9px 14px;
    color: var(--quick-text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: top;
}

.quick-summary-grid tr:last-child td {
    border-bottom: none;
}

.quick-summary-grid tr:nth-child(even) td {
    background: rgba(255,255,255,0.02);
}

/* ============================================================
   17. WEEKLY CASHBACK
   ============================================================ */
.quick-back-section {
    padding: 32px 0;
}

.quick-back-card {
    background: var(--quick-bg-card);
    border: 1px solid rgba(228,53,47,0.2);
    border-radius: var(--quick-radius-lg);
    overflow: hidden;
}

.quick-cb-spot {
    background: linear-gradient(135deg, rgba(228,53,47,0.2), rgba(228,53,47,0.05));
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(228,53,47,0.15);
}

.quick-back-mark {
    font-size: 2rem;
    color: var(--quick-primary-light);
}

.quick-cb-num {
    font-family: var(--quick-font-heading);
    font-size: 2rem;
    font-weight: 900;
    color: var(--quick-text-primary);
    line-height: 1;
}

.quick-refund-lab {
    font-size: 0.85rem;
    color: var(--quick-text-muted);
    margin-top: 4px;
}

.quick-back-body {
    padding: 20px 28px;
}

.quick-refund-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.quick-cb-fig {
    text-align: center;
    padding: 12px;
    background: rgba(255,255,255,0.04);
    border-radius: var(--quick-radius-sm);
}

.quick-cb-fnum {
    font-family: var(--quick-font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--quick-text-primary);
}

.quick-back-fcap {
    font-size: 0.72rem;
    color: var(--quick-text-muted);
    margin-top: 2px;
}

/* ============================================================
   18. PROVIDER TAGS
   ============================================================ */
.quick-prov-grid,
.quick-prov-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.quick-vendor-chip,
.quick-vendor-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: rgba(228,53,47,0.1);
    border: 1px solid rgba(228,53,47,0.25);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--quick-text-secondary);
    transition: all var(--quick-transition);
    cursor: default;
    white-space: nowrap;
}

.quick-vendor-chip:hover,
.quick-vendor-chip:hover {
    background: rgba(228,53,47,0.2);
    color: var(--quick-text-primary);
    border-color: rgba(228,53,47,0.45);
}

/* ============================================================
   19. SECURITY BADGES
   ============================================================ */
.quick-sec-block2,
.quick-sec-block2 {
    padding: 32px 0;
}

.quick-trust-grid,
.quick-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.quick-safe-chip,
.quick-safe-chip {
    background: var(--quick-bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--quick-radius);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all var(--quick-transition);
}

.quick-safe-chip:hover,
.quick-safe-chip:hover {
    background: var(--quick-bg-card-hover);
    border-color: rgba(228,53,47,0.25);
}

.quick-sec-mark,
.quick-sec-mark {
    font-size: 1.5rem;
    color: var(--quick-primary-light);
}

.quick-guard-title,
.quick-guard-title {
    font-family: var(--quick-font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--quick-text-primary);
}

.quick-sec-text,
.quick-sec-text {
    font-size: 0.82rem;
    color: var(--quick-text-muted);
    line-height: 1.55;
}

/* ============================================================
   20. WHEEL OF FORTUNE
   ============================================================ */
.quick-spin-block {
    padding: 32px 0;
}

.quick-fortune-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.quick-fortune-box {
    background: var(--quick-bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--quick-radius);
    overflow: hidden;
    transition: all var(--quick-transition);
}

.quick-fortune-box:hover {
    border-color: rgba(228,53,47,0.3);
    background: var(--quick-bg-card-hover);
}

.quick-wh-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(228,53,47,0.06);
}

.quick-wh-ico {
    font-size: 1.3rem;
    color: var(--quick-primary-light);
}

.quick-wh-name {
    font-family: var(--quick-font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--quick-text-primary);
    flex: 1;
}

.quick-prize-cost {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--quick-accent);
    background: rgba(251,232,83,0.1);
    padding: 3px 8px;
    border-radius: 4px;
}

.quick-fortune-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.quick-fortune-grid td {
    padding: 7px 14px;
    color: var(--quick-text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.quick-fortune-grid tr:last-child td {
    border-bottom: none;
}

/* ============================================================
   21. BONUS SHOP
   ============================================================ */
.quick-sh-section,
.quick-sh-section {
    padding: 32px 0;
}

.quick-bonus-shop-grid,
.quick-bonus-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.quick-bonus-shop-card,
.quick-bonus-shop-card {
    background: var(--quick-bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--quick-radius);
    overflow: hidden;
    transition: all var(--quick-transition);
}

.quick-bonus-shop-card:hover,
.quick-bonus-shop-card:hover {
    border-color: rgba(228,53,47,0.3);
    background: var(--quick-bg-card-hover);
}

.quick-bonus-shop-head,
.quick-bonus-shop-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(228,53,47,0.07);
}

.quick-market-glyph,
.quick-market-glyph {
    font-size: 1.3rem;
    color: var(--quick-primary-light);
}

.quick-sh-cat,
.quick-sh-cat {
    font-family: var(--quick-font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--quick-text-primary);
    flex: 1;
}

.quick-market-count,
.quick-market-count {
    font-size: 0.75rem;
    color: var(--quick-text-muted);
    background: rgba(255,255,255,0.06);
    padding: 3px 8px;
    border-radius: 4px;
}

.quick-bonus-shop-table,
.quick-bonus-shop-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.quick-bonus-shop-table th,
.quick-bonus-shop-table th {
    background: rgba(255,255,255,0.04);
    color: var(--quick-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 8px 14px;
    text-align: left;
}

.quick-bonus-shop-table td,
.quick-bonus-shop-table td {
    padding: 8px 14px;
    color: var(--quick-text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.quick-bonus-shop-table tr:last-child td,
.quick-bonus-shop-table tr:last-child td {
    border-bottom: none;
}

/* ============================================================
   22. SPRACHEN UND LÄNDER
   ============================================================ */
.quick-loc-block {
    padding: 32px 0;
}

.quick-lang-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.quick-loc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--quick-text-secondary);
    transition: all var(--quick-transition);
}

.quick-loc-chip:hover {
    background: rgba(255,255,255,0.08);
    color: var(--quick-text-primary);
}

.quick-block-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    margin: 16px 0;
}

.quick-ban-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--quick-text-muted);
}

/* ============================================================
   23. SITE SCREENSHOT
   ============================================================ */
.quick-shot-wrap,
.quick-shot-wrap {
    display: block;
    border-radius: var(--quick-radius-lg);
    overflow: hidden;
    border: 1px solid rgba(228,53,47,0.2);
    margin: 24px auto;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    max-width: 1280px;
    width: 100%;
}

.quick-snap,
.quick-snap {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.quick-section-image-wrap {
    display: block;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 24px;
    border-radius: var(--quick-radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}

.quick-section-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   24. FAQ
   ============================================================ */
.quick-help-block,
.quick-help-block {
    padding: 40px 0;
}

.quick-help-list,
.quick-help-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.quick-help-item,
.quick-help-item {
    background: var(--quick-bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--quick-radius);
    overflow: hidden;
    transition: border-color var(--quick-transition);
}

.quick-help-item:hover,
.quick-help-item:hover {
    border-color: rgba(228,53,47,0.25);
}

.quick-fq-title,
.quick-fq-title {
    padding: 14px 18px;
    font-family: var(--quick-font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--quick-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background var(--quick-transition);
    user-select: none;
}

.quick-fq-title::after,
.quick-fq-title::after {
    content: '+';
    font-size: 1.2rem;
    color: var(--quick-primary-light);
    font-weight: 400;
    flex-shrink: 0;
    transition: transform var(--quick-transition);
}

.quick-help-item.open .quick-fq-title::after,
.quick-help-item.open .quick-fq-title::after {
    transform: rotate(45deg);
}

.quick-fq-title:hover,
.quick-fq-title:hover {
    background: rgba(228,53,47,0.06);
}

.quick-fq-text,
.quick-fq-text {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding var(--quick-transition);
}

.quick-help-item.open .quick-fq-text,
.quick-help-item.open .quick-fq-text {
    max-height: 600px;
    padding: 0 18px 14px;
}

.quick-fq-text div,
.quick-fq-text div {
    font-size: 0.88rem;
    color: var(--quick-text-secondary);
    line-height: 1.7;
}

/* ============================================================
   25. FOOTER
   ============================================================ */
.quick-footer {
    background: linear-gradient(180deg, #0a0c14 0%, #040109 100%);
    border-top: 1px solid rgba(228,53,47,0.2);
    padding: 40px 0 24px;
    grid-area: footer;
}

.quick-footer-top {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.quick-footer-cols {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 32px;
    margin-bottom: 32px;
}

.footer-col strong {
    display: block;
    font-family: var(--quick-font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--quick-text-primary);
    margin-bottom: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-col ul li {
    font-size: 0.85rem;
}

.footer-col ul li a,
.footer-col ul li div {
    color: var(--quick-text-muted);
    cursor: pointer;
    transition: color var(--quick-transition);
    font-size: 0.85rem;
    text-decoration: none;
}

.footer-col ul li a:hover,
.footer-col ul li div:hover {
    color: var(--quick-text-secondary);
}

.quick-footer-bottom,
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.78rem;
    color: var(--quick-text-muted);
}

.quick-footer-badges,
.footer-badges {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quick-age-stamp,
.quick-age-stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--quick-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    font-family: var(--quick-font-heading);
}

.quick-tls-mark,
.quick-tls-mark {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 6px;
    color: var(--quick-success);
    font-size: 0.75rem;
    font-weight: 600;
}

.quick-footer-copyright {
    font-size: 0.78rem;
    color: var(--quick-text-muted);
}

.quick-footer-disclaimer,
.footer-disclaimer {
    font-size: 0.78rem;
    color: var(--quick-text-muted);
    line-height: 1.65;
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 8px;
}

/* ============================================================
   26. UTILITY
   ============================================================ */
div[data-rutohe] {
    cursor: pointer;
}

.quick-block-title {
    font-family: var(--quick-font-heading);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 800;
    color: var(--quick-text-primary);
    margin-bottom: 18px;
    letter-spacing: -0.01em;
}

#quick-scroll-prog {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--quick-gradient-primary);
    z-index: 9999;
    transition: width 0.1s linear;
}

#quick-fixed-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(18,21,30,0.98);
    border-top: 2px solid var(--quick-primary);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 800;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-wrap: wrap;
}

.quick-fixed-bonus {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--quick-text-secondary);
    flex: 1;
}

.quick-float-acts {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-float-btn {
    padding: 9px 20px;
    background: var(--quick-gradient-primary);
    color: #111;
    border-radius: var(--quick-radius-sm);
    font-size: 0.85rem;
    font-weight: 800;
    font-family: var(--quick-font-heading);
    cursor: pointer;
    transition: all var(--quick-transition);
    white-space: nowrap;
}

.quick-float-btn:hover {
    box-shadow: 0 4px 16px rgba(228,53,47,0.4);
    transform: translateY(-1px);
}

.quick-pin-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: var(--quick-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--quick-transition);
    border: none;
}

.quick-pin-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.15);
}

#quick-popup-msg {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--quick-success-dark);
    color: #fff;
    padding: 10px 22px;
    border-radius: var(--quick-radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

#quick-popup-msg.quick-popup-msg-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.quick-rv {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.quick-vis {
    opacity: 1;
    transform: translateY(0);
}

.quick-card-stagger {
    opacity: 0;
    animation: fd-scale-in 0.4s ease-out both;
}

/* ============================================================
   27. BREADCRUMB
   ============================================================ */
.quick-bc {
    padding: 10px 0;
    margin-bottom: 12px;
}

.quick-path-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-trail-item {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--quick-text-muted);
}

.quick-trail-item a {
    color: var(--quick-text-muted);
    text-decoration: none;
    transition: color var(--quick-transition);
}

.quick-trail-item a:hover {
    color: var(--quick-primary-light);
}

.quick-trail-item + .quick-trail-item::before {
    content: '/';
    margin: 0 6px;
    color: rgba(255,255,255,0.2);
    font-size: 0.75rem;
}

.quick-crumb-now {
    color: var(--quick-text-secondary);
    font-weight: 500;
}

/* ============================================================
   28. MOTION & PAGE LOAD ANIMATIONS
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

    @keyframes fd-fade-up {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fd-fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes fd-scale-in {
        from {
            opacity: 0;
            transform: scale(0.96);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .quick-doc-title,
    .quick-doc-title {
        animation: fd-fade-up 0.5s ease-out both;
    }

    .quick-intro-block,
    .quick-intro-block {
        animation: fd-fade-up 0.5s ease-out 0.15s both;
    }

    .quick-banner-top,
    .quick-banner-top {
        animation: fd-fade-in 0.5s ease-out 0.25s both;
    }

    .quick-gm-section,
    .quick-gm-section {
        animation: fd-fade-up 0.5s ease-out 0.35s both;
    }

    .quick-game-box:nth-child(1),
    .quick-game-box:nth-child(1) {
        animation: fd-scale-in 0.4s ease-out 0s both;
    }

    .quick-game-box:nth-child(2),
    .quick-game-box:nth-child(2) {
        animation: fd-scale-in 0.4s ease-out 0.05s both;
    }

    .quick-game-box:nth-child(3),
    .quick-game-box:nth-child(3) {
        animation: fd-scale-in 0.4s ease-out 0.10s both;
    }

    .quick-game-box:nth-child(4),
    .quick-game-box:nth-child(4) {
        animation: fd-scale-in 0.4s ease-out 0.15s both;
    }

    .quick-game-box:nth-child(5),
    .quick-game-box:nth-child(5) {
        animation: fd-scale-in 0.4s ease-out 0.20s both;
    }

    .quick-game-box:nth-child(6),
    .quick-game-box:nth-child(6) {
        animation: fd-scale-in 0.4s ease-out 0.25s both;
    }

    .quick-game-box:nth-child(7),
    .quick-game-box:nth-child(7) {
        animation: fd-scale-in 0.4s ease-out 0.30s both;
    }

    .quick-game-box:nth-child(8),
    .quick-game-box:nth-child(8) {
        animation: fd-scale-in 0.4s ease-out 0.35s both;
    }

    .quick-game-box:hover,
    .quick-game-box:hover {
        transform: scale(1.04);
        box-shadow: 0 24px 48px rgba(0,0,0,0.5);
    }

    .quick-metric-card:hover,
    .quick-metric-card:hover {
        transform: translateY(-4px);
        border-left: 3px solid var(--quick-primary);
    }

}

/* ============================================================
   29. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* --- 1320px --- */
@media (max-width: 1320px) {
    .quick-shell,
    .quick-shell {
        max-width: 100%;
        padding: 0 20px;
    }

    .quick-gm-grid,
    .quick-gm-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .quick-metric-grid,
    .quick-metric-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

/* --- 1040px --- */
@media (max-width: 1040px) {
    body {
        grid-template-columns: 56px 1fr;
    }

    .sidebar {
        width: 56px;
    }

    .sidebar-item {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .quick-header {
        gap: 16px;
        padding: 0 16px;
    }

    .header-nav {
        gap: 2px;
    }

    .header-nav a,
    .header-nav div {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .quick-gm-grid,
    .quick-gm-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }

    .quick-trust-grid,
    .quick-trust-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .quick-bonus-shop-grid,
    .quick-bonus-shop-grid {
        grid-template-columns: 1fr;
    }

    .quick-footer-cols {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 24px;
    }
}

/* --- 790px (MOBILE) --- */
@media (max-width: 790px) {
    /* CRITICAL mobile rules */
    .btn-login {
        display: none;
    }

    .btn-search {
        display: none;
    }

    .header-nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    /* Body layout: no sidebar on mobile */
    body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "footer";
    }

    .sidebar {
        display: none;
    }

    /* Header adjustments */
    .quick-header {
        padding: 0 14px;
        height: 58px;
        gap: 10px;
    }

    .logo-img {
        height: 32px;
    }

    /* Shell padding */
    .quick-shell,
    .quick-shell {
        padding: 0 14px;
    }

    /* Games grid */
    .quick-gm-grid,
    .quick-gm-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    /* Stats grid */
    .quick-metric-grid,
    .quick-metric-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Hero banner */
    .quick-top-grad,
    .quick-top-grad {
        padding: 28px 20px;
        border-radius: var(--quick-radius);
    }

    .quick-banner-title {
        font-size: 1.5rem;
    }

    /* Content sections */
    .quick-content-block {
        padding: 28px 0;
    }

    .quick-content-block h2 {
        font-size: 1.25rem;
    }

    /* Security grid */
    .quick-trust-grid,
    .quick-trust-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Shop grid */
    .quick-bonus-shop-grid,
    .quick-bonus-shop-grid {
        grid-template-columns: 1fr;
    }

    /* Wheel grid */
    .quick-fortune-list {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .quick-footer-cols {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .quick-footer-bottom,
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Promo code */
    .quick-promo-spot {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .quick-code-copy {
        width: 100%;
        justify-content: center;
    }

    /* Timeline */
    .quick-flow::before,
    .quick-flow::before {
        left: 20px;
    }

    /* Fixed CTA */
    #quick-fixed-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 14px;
    }

    .quick-float-acts {
        justify-content: space-between;
    }

    .quick-float-btn {
        flex: 1;
        text-align: center;
    }

    /* Section images */
    .quick-section-image-wrap {
        border-radius: var(--quick-radius);
    }

    .quick-shot-wrap {
        border-radius: var(--quick-radius);
        margin: 16px auto;
    }

    /* Cashback */
    .quick-cb-spot {
        padding: 18px 16px;
        flex-wrap: wrap;
    }

    .quick-refund-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Extra small devices */
@media (max-width: 420px) {
    .quick-gm-grid,
    .quick-gm-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-metric-grid,
    .quick-metric-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-footer-cols {
        grid-template-columns: 1fr;
    }

    .quick-banner-title {
        font-size: 1.3rem;
    }

    .mobile-menu-auth {
        flex-direction: column;
    }
}
/* ── HERO BANNER SIZING (post-patch) ─────────────── */
.quick-top-grad {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* banner.png как фон hero — на эталонах сети linear-gradient(...) + url(); */
.quick-top-grad {
    background-image:
        linear-gradient(135deg, rgba(4,1,9,0.86) 0%, rgba(4,1,9,0.66) 52%, rgba(228,53,47,0.34) 100%),
        url('/images/banner.png');
    background-image:
        linear-gradient(135deg, rgba(4,1,9,0.86) 0%, rgba(4,1,9,0.66) 52%, rgba(228,53,47,0.34) 100%),
        image-set(url('/images/banner.avif') type('image/avif'), url('/images/banner.webp') type('image/webp'), url('/images/banner.png') type('image/png'));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/* ── BREADCRUMB LIST MARKERS (post-patch) ────────── */
ol.quick-path-list { list-style-type: none !important; padding-left: 0 !important; margin: 0 !important; }

/* ── OVERFLOW FIX (post-patch) ───────────────────── */
html { overflow-x: clip !important; }
body { display: block !important; overflow-x: clip !important; width: 100%; }
/* H1 size cap — 20% smaller than default */
[class*="-doc-title"], main h1:first-child { font-size: clamp(1.45rem, 3.2vw, 2.1rem) !important; }
/* Kill any grid-area LLM put on structural elements */
.quick-header, main, .quick-footer, footer { grid-area: unset !important; }
/* Header: always flex, single row */
.quick-header { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 80px !important; padding: 0 20px !important; }
/* Toast: hidden by default via opacity (translateX alone not enough) */
#quick-popup-msg { opacity: 0 !important; }
.quick-popup-msg-show { opacity: 1 !important; transform: translateX(0) !important; }

/* ── MOBILE GRID FIX (post-patch) ────────────────── */
@media (max-width: 790px) {
    [class*="-gm-grid"] { grid-template-columns: repeat(2, 1fr) !important; }
    [class*="-metric-grid"] { grid-template-columns: repeat(2, 1fr) !important; }
    [class*="-prov-grid"] { grid-template-columns: repeat(3, 1fr) !important; }
    [class*="-footer-cols"] { grid-template-columns: 1fr 1fr !important; }
    [class*="-shell"] { max-width: 100% !important; padding: 0 15px !important; box-sizing: border-box !important; }
    main, [class*="-art-body"] { margin: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
    main > div:first-child,
    main > [class*="-shell"]:first-child { padding-top: 80px !important; }
    main { overflow: visible !important; }
    body { overflow-x: clip !important; }
}

/* ── GAMES GRID MOBILE FIX (post-patch) ─────────── */
@media (max-width: 790px) {
    .quick-gm-grid, [class*="-gm-grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .quick-game-box, [class*="-game-box"] {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .quick-gm-section .quick-shell,
    [class*="-gm-section"] [class*="-shell"] {
        padding: 0 10px !important;
        overflow: hidden !important;
    }
}

/* ── LAYOUT (post-patch, canonical flow-based) ───── */
/* body: normal block flow, no grid */
body { display: block; min-height: 100vh; }
.quick-header { position: sticky; top: 0; z-index: 1000; width: 100%; }
.sidebar { position: fixed; left: 0; top: 80px; bottom: 0; width: 64px; z-index: 999; overflow-y: auto; }
main { display: block !important; margin-left: 64px; min-width: 0; max-width: 100%; overflow: hidden; }
.quick-footer { margin-left: 64px; }
@media (max-width: 1040px) {
    .sidebar { width: 56px !important; }
    main { margin-left: 56px !important; }
    .quick-footer { margin-left: 56px !important; }
}
@media (max-width: 790px) {
    .sidebar { display: none !important; }
    main { margin-left: 0 !important; overflow: visible !important; width: 100% !important; max-width: 100% !important; }
    .quick-footer { margin-left: 0 !important; }
    [class*="-shell"] { max-width: 100% !important; padding: 0 15px !important; box-sizing: border-box !important; }
    [class*="-gm-grid"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    [class*="-metric-grid"] { grid-template-columns: repeat(2, 1fr) !important; }
    [class*="-prov-grid"] { grid-template-columns: repeat(3, 1fr) !important; }
    [class*="-footer-cols"] { grid-template-columns: 1fr 1fr !important; }
}

/* ── COMPLIANCE BLOCKS (post-patch) ─────────────────── */
/* Container styling only — typography (h2 gradient, h3 color, p opacity) is
   inherited from .quick-content-block which is ALSO applied to this section.
   Do not override font-size/color here or it will break visual consistency
   with other content sections. */
.quick-responsible-gaming, section.responsible-gaming {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: rgba(255,255,255,0.02);
    border-left: 3px solid var(--quick-primary, rgba(255,255,255,0.2));
    border-radius: 6px;
}
.footer-license-info, .license-info {
    font-size: 0.78rem;
    color: var(--quick-text-muted, rgba(255,255,255,0.6));
    line-height: 1.6;
    padding: 0.5rem 0 1rem 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-license-info span, .license-info span {
    display: inline-block;
}
a.dmca-badge {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    opacity: 0.85;
    transition: opacity 0.2s;
}
a.dmca-badge:hover { opacity: 1; }
a.dmca-badge img {
    height: 28px;
    width: auto;
    display: block;
}
@media (max-width: 600px) {
    a.dmca-badge img { height: 24px; }
    .footer-license-info, .license-info { font-size: 0.72rem; }
}


/* ============================================================
   26. BREADCRUMB + FAQ ALIAS CLASSES  (post-build, CSS check fix)
   ============================================================ */
.quick-breadcrumb {
    margin: 0 0 18px;
    font-size: 0.8rem;
    font-family: var(--quick-font-body);
}
.quick-breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.quick-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--quick-text-muted);
}
.quick-breadcrumb-item + .quick-breadcrumb-item::before {
    content: '/';
    color: var(--quick-text-muted);
    margin-right: 2px;
}
.quick-breadcrumb-item a {
    color: var(--quick-primary-light);
    text-decoration: none;
    transition: color var(--quick-transition);
}
.quick-breadcrumb-item a:hover { color: var(--quick-accent); }
.quick-breadcrumb-current { color: var(--quick-text-secondary); }

.quick-faq-item {
    background: var(--quick-bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--quick-radius);
    overflow: hidden;
    transition: border-color var(--quick-transition);
}
.quick-faq-item:hover { border-color: rgba(228,53,47,0.25); }
.quick-faq-question {
    padding: 14px 18px;
    font-family: var(--quick-font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--quick-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
}
.quick-faq-answer {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding var(--quick-transition);
}
.quick-faq-item.open .quick-faq-answer {
    max-height: 600px;
    padding: 0 18px 14px;
}
.quick-faq-answer div {
    font-size: 0.88rem;
    color: var(--quick-text-secondary);
    line-height: 1.7;
}
/* крошка из одного звена — визуальный шум: на морде и в каноне её нет вовсе */
@media (max-width: 640px) {
    .quick-breadcrumb { font-size: 0.75rem; }
}

/* ====== 27. HEADER / MOBILE LAYOUT (post-build) ====== */
/* Вордмарк 7.6:1 (2447x321): по высоте 40px он занимает 305px, и «десктопная»
   шапка перестаёт помещаться уже на 1150px — шаблонная точка перелома 790px для
   такого логотипа слишком низкая. Поэтому бургер-раскладка держится до 1040px,
   а высота логотипа растёт ступенями по мере появления места. width:auto
   обязателен: с фиксированной шириной широкий вордмарк раздавит. */
@media (max-width: 1170px) {
    .header-nav { display: none; }
    .hamburger { display: flex; }
    .header-actions .btn-login,
    .header-actions .btn-register,
    .header-actions .btn-search { display: none; }
}
@media (max-width: 790px) {
    .logo-img { height: 30px; width: auto; }
    .mobile-menu-header .logo-img { height: 30px; width: auto; }
    /* первый блок статьи: 80px сверху на телефоне — избыточно */
    /* шаблонный post-patch ставит 80px !important на первый блок — перебиваем
       тем же весом, иначе правило проигрывает молча */
    main.quick-art-body > .quick-shell:first-child { padding-top: 20px !important; }
}
@media (min-width: 791px) and (max-width: 1170px) {
    .logo-img { height: 40px; width: auto; }
}
@media (min-width: 1171px) and (max-width: 1320px) {
    .logo-img { height: 46px; width: auto; }
}
@media (min-width: 1321px) {
    .logo-img { height: 54px; width: auto; }
}

/* у вопроса FAQ два индикатора: инлайновый chevron из разметки и «+» из CSS,
   который ещё и поворачивается при открытии — инлайновый убираем */
.quick-faq-question > .fa-chevron-down { display: none; }

/* ==========================================================================
   QW2 — Telemetrie-Layer  (Redesign 2026-08-17)
   Bildwelt: Formel-1-Timing. Startampel, Sektor-Tower, Kerbs, Tabellenziffern.
   ========================================================================== */

:root{
  --qw2-void:#07060B;
  --qw2-carbon:#111019;
  --qw2-carbon-2:#191825;
  --qw2-line:rgba(255,255,255,.09);
  --qw2-line-2:rgba(255,255,255,.16);
  --qw2-red:#E4352F;
  --qw2-red-dim:#8c1f1b;
  --qw2-gold:#FBE853;
  --qw2-purple:#B583FF;      /* schnellster Sektor */
  --qw2-green:#3DDC84;
  --qw2-txt:#fff;
  --qw2-txt-2:rgba(255,255,255,.74);
  --qw2-txt-3:rgba(255,255,255,.46);
  --qw2-mono:'Orbitron',ui-monospace,'SFMono-Regular',monospace;
  --qw2-sans:'Exo 2',system-ui,sans-serif;
  --qw2-shell:1180px;
  --qw2-ease:cubic-bezier(.22,.61,.36,1);
}

/* Lange deutsche Überschriften vertragen kein Orbitron — Exo 2 800 statt dessen.
   Orbitron bleibt für Kurzformen: Eyebrows, Ziffern, Buttons, Sektor-Chips. */
.quick-art-body h2,
.quick-art-body h3,
.quick-art-body h4,
.qw2-h{
  font-family:var(--qw2-sans);
  font-weight:800;
  letter-spacing:-.015em;
}
.quick-art-body h2{ font-size:clamp(1.45rem,1.05rem + 1.6vw,2.15rem); line-height:1.14; }
.quick-art-body h3{ font-size:clamp(1.12rem,.98rem + .6vw,1.42rem); line-height:1.2; }

.qw2-eyebrow{
  font-family:var(--qw2-mono);
  font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--qw2-txt-3);
  display:inline-flex; align-items:center; gap:.6em;
}
.qw2-eyebrow::before{
  content:""; width:26px; height:2px; background:var(--qw2-red); display:block;
}

/* ---------- Kerb: rot-weißer Randstein als Trenner ---------------------- */
.qw2-kerb{
  height:7px; width:100%;
  background:repeating-linear-gradient(135deg,
    var(--qw2-red) 0 14px, #f3f0ee 14px 28px);
  opacity:.85;
}
.qw2-kerb--thin{ height:4px; opacity:.55; }

/* ======================= HERO ============================================ */
.qw2-hero{
  position:relative;
  min-height:clamp(560px,80svh,780px);
  display:flex; align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--qw2-line);
}
.qw2-hero__media{
  position:absolute; inset:0; z-index:-2;
}
.qw2-hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:62% 45%;
  transform:scale(1.04);
}
.qw2-hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(7,6,11,.86) 0%, rgba(7,6,11,.34) 38%, rgba(7,6,11,.93) 88%, var(--qw2-void) 100%),
    linear-gradient(94deg, rgba(7,6,11,.94) 6%, rgba(7,6,11,.45) 46%, rgba(7,6,11,.1) 78%);
}
.qw2-hero__inner{
  width:100%; max-width:var(--qw2-shell); margin:0 auto;
  padding:clamp(88px,12vh,140px) clamp(18px,4vw,34px) clamp(34px,5vh,58px);
}

/* Startampel — fünf Lichter, gehen beim Laden aus (wie beim Rennstart) */
.qw2-lights{ display:flex; gap:10px; margin-bottom:22px; }
.qw2-lights span{
  width:15px; height:15px; border-radius:50%;
  background:#2a1113; border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}
.qw2-lights span.on{
  background:radial-gradient(circle at 34% 30%, #ff6a63, var(--qw2-red) 62%, #6d100c);
  box-shadow:0 0 14px 2px rgba(228,53,47,.75), inset 0 1px 2px rgba(255,255,255,.3);
  border-color:rgba(255,120,110,.5);
}

.qw2-hero h1.quick-doc-title{
  font-family:var(--qw2-sans); font-weight:800;
  font-size:clamp(1.85rem,1.15rem + 2.5vw,3.25rem);
  line-height:1.05; letter-spacing:-.025em;
  margin:0 0 18px; max-width:17ch;
  text-wrap:balance;
}
.qw2-hero h1 .qw2-hl{
  background:linear-gradient(100deg,var(--qw2-gold) 12%,#fff8c8 52%,var(--qw2-gold) 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.qw2-hero__lede{
  font-size:clamp(.98rem,.93rem + .2vw,1.08rem); line-height:1.6;
  color:var(--qw2-txt-2); max-width:56ch; margin:0 0 26px;
}
.qw2-hero__offer{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:22px;
}
.qw2-hero__fig{
  font-family:var(--qw2-mono); font-weight:900;
  font-size:clamp(1.7rem,1.1rem + 2.2vw,2.7rem);
  letter-spacing:-.02em; color:var(--qw2-gold);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 34px rgba(251,232,83,.28);
}
.qw2-hero__fig small{ font-size:.44em; color:var(--qw2-txt-2); font-weight:700; letter-spacing:.04em; }

.qw2-cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.qw2-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--qw2-mono); font-weight:800; font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none;
  padding:15px 30px; border-radius:3px; cursor:pointer;
  border:1px solid transparent; position:relative; overflow:hidden;
  transition:transform .18s var(--qw2-ease), box-shadow .18s var(--qw2-ease), background .18s;
}
.qw2-btn--primary{
  background:linear-gradient(96deg,var(--qw2-red),#ff5c46 58%,var(--qw2-gold));
  color:#150402;
  box-shadow:0 8px 26px -8px rgba(228,53,47,.75);
}
.qw2-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(228,53,47,.9); }
.qw2-btn--ghost{
  background:rgba(255,255,255,.04); color:var(--qw2-txt);
  border-color:var(--qw2-line-2); backdrop-filter:blur(6px);
}
.qw2-btn--ghost:hover{ background:rgba(255,255,255,.09); border-color:var(--qw2-txt-3); }
.qw2-btn:focus-visible{ outline:2px solid var(--qw2-gold); outline-offset:3px; }

.qw2-hero__note{
  margin-top:16px; font-size:.74rem; color:var(--qw2-txt-3); letter-spacing:.01em;
}

/* ======================= BOXENSTOPP / TIMING TOWER ======================= */
.qw2-pit{ background:var(--qw2-void); padding:clamp(38px,6vh,64px) 0 clamp(30px,5vh,52px); }
.qw2-pit__shell{ max-width:var(--qw2-shell); margin:0 auto; padding:0 clamp(18px,4vw,34px); }
.qw2-pit__head{ display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
.qw2-pit__head h2{ margin:6px 0 0; }
.qw2-pit__stamp{
  font-family:var(--qw2-mono); font-size:.66rem; letter-spacing:.16em;
  color:var(--qw2-txt-3); text-transform:uppercase; white-space:nowrap;
}

.qw2-tower{
  border:1px solid var(--qw2-line);
  border-radius:4px;
  background:linear-gradient(180deg,var(--qw2-carbon-2),var(--qw2-carbon));
  overflow:hidden;
}
.qw2-row{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  gap:16px; align-items:center;
  padding:15px 18px;
  border-bottom:1px solid var(--qw2-line);
  position:relative;
}
.qw2-row:last-child{ border-bottom:0; }
.qw2-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--qw2-sector,var(--qw2-line-2));
}
.qw2-row:hover{ background:rgba(255,255,255,.022); }
.qw2-sector{
  font-family:var(--qw2-mono); font-weight:800; font-size:.68rem; letter-spacing:.06em;
  color:var(--qw2-sector,var(--qw2-txt-3));
  border:1px solid var(--qw2-sector,var(--qw2-line-2));
  border-radius:2px; padding:5px 0; text-align:center;
  opacity:.9;
}
.qw2-row__lab{ min-width:0; }
.qw2-row__lab b{ display:block; font-weight:700; font-size:.97rem; letter-spacing:-.005em; }
.qw2-row__lab span{ display:block; font-size:.79rem; color:var(--qw2-txt-3); margin-top:3px; line-height:1.45; }
.qw2-row__val{
  font-family:var(--qw2-mono); font-weight:800;
  font-size:clamp(1.02rem,.9rem + .5vw,1.35rem);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  color:var(--qw2-sector,var(--qw2-txt)); text-align:right; white-space:nowrap;
}
.qw2-row--s1{ --qw2-sector:var(--qw2-purple); }
.qw2-row--s2{ --qw2-sector:var(--qw2-gold); }
.qw2-row--s3{ --qw2-sector:var(--qw2-green); }
.qw2-row--s4{ --qw2-sector:#7fd2ff; }
.qw2-row--s5{ --qw2-sector:var(--qw2-red); }

.qw2-pit__foot{
  margin-top:14px; font-size:.76rem; color:var(--qw2-txt-3); line-height:1.6;
  display:flex; gap:8px; align-items:flex-start;
}
.qw2-pit__foot i{ color:var(--qw2-txt-3); margin-top:.2em; }

/* ======================= SEKTOR-NAV (linke Schiene) ===================== */
.qw2-tower-nav{
  position:fixed; left:0; top:0; bottom:0; width:74px; z-index:60;
  background:linear-gradient(180deg,rgba(12,11,18,.97),rgba(7,6,11,.99));
  border-right:1px solid var(--qw2-line);
  display:none; flex-direction:column; padding:84px 0 20px;
  overflow-y:auto; scrollbar-width:none;
}
.qw2-tower-nav::-webkit-scrollbar{ display:none; }
.qw2-tower-nav a{
  display:block; padding:9px 8px 9px 12px; text-decoration:none;
  border-left:2px solid transparent; position:relative;
}
.qw2-tower-nav a i{
  font-family:var(--qw2-mono); font-style:normal; font-weight:700; font-size:.6rem;
  color:var(--qw2-txt-3); letter-spacing:.06em; display:block;
}
.qw2-tower-nav a b{
  display:block; font-size:.6rem; font-weight:600; line-height:1.25;
  color:var(--qw2-txt-3); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis;
}
.qw2-tower-nav a:hover b, .qw2-tower-nav a:hover i{ color:var(--qw2-txt-2); }
.qw2-tower-nav a.is-here{ border-left-color:var(--qw2-red); background:rgba(228,53,47,.08); }
.qw2-tower-nav a.is-here i{ color:var(--qw2-red); }
.qw2-tower-nav a.is-here b{ color:var(--qw2-txt); }
@media (min-width:1280px){
  .qw2-tower-nav{ display:flex; }
  body.qw2-has-tower .quick-art-body,
  body.qw2-has-tower .quick-footer,
  body.qw2-has-tower .qw2-hero{ padding-left:74px; }
  body.qw2-has-tower .qw2-hero__inner{ padding-left:clamp(18px,3vw,30px); }
}

/* ======================= SCHNELLCHECK-STREIFEN ========================== */
.qw2-quick{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--qw2-line); border-bottom:1px solid var(--qw2-line);
  background:rgba(7,6,11,.62); backdrop-filter:blur(8px);
  margin-top:28px;
}
.qw2-quick div{ padding:14px 16px; border-right:1px solid var(--qw2-line); }
.qw2-quick div:last-child{ border-right:0; }
.qw2-quick dt{
  font-family:var(--qw2-mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--qw2-txt-3); margin-bottom:5px;
}
.qw2-quick dd{
  margin:0; font-family:var(--qw2-mono); font-weight:800;
  font-size:clamp(.95rem,.85rem + .35vw,1.18rem);
  font-variant-numeric:tabular-nums; color:var(--qw2-txt);
}

/* ======================= BILD-RAHMEN ==================================== */
.qw2-figure{ margin:26px 0; }
.qw2-figure picture{ display:block; border:1px solid var(--qw2-line); border-radius:4px; overflow:hidden; }
.qw2-figure img{ display:block; width:100%; height:auto; }
.qw2-figure figcaption{
  margin-top:9px; font-size:.76rem; color:var(--qw2-txt-3);
  display:flex; gap:8px; align-items:baseline;
}
.qw2-figure figcaption::before{
  content:""; width:16px; height:2px; background:var(--qw2-red); flex:none; transform:translateY(-.35em);
}

/* ======================= MOBILE ========================================= */
@media (max-width:640px){
  .qw2-hero{ min-height:auto; }
  .qw2-hero__inner{ padding:78px 18px 30px; }
  .qw2-hero__media img{ object-position:58% 42%; }
  .qw2-quick{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .qw2-quick div:nth-child(2){ border-right:0; }
  .qw2-quick div:nth-child(1),.qw2-quick div:nth-child(2){ border-bottom:1px solid var(--qw2-line); }
  .qw2-row{ grid-template-columns:44px minmax(0,1fr); gap:12px 12px; padding:13px 14px; }
  .qw2-row__val{ grid-column:2; text-align:left; margin-top:2px; }
  .qw2-cta-row .qw2-btn{ flex:1 1 100%; }
}
@media (min-width:641px) and (max-width:900px){
  .qw2-quick{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion:reduce){
  .qw2-lights span{ transition:none !important; }
  .qw2-hero__media img{ transform:none; }
  .qw2-btn:hover{ transform:none; }
}

/* ---- Hero-Feinschliff: an Sticky-Header andocken, Textspalte verbreitern ---- */
body.qw2-has-tower .quick-art-body{ padding-top:0; }
.quick-art-body > .qw2-hero:first-child{ margin-top:0; }
.qw2-hero{ min-height:clamp(520px,74svh,700px); }
.qw2-hero__inner{ padding-top:clamp(56px,7vh,86px); padding-bottom:clamp(26px,4vh,44px); }
.qw2-hero h1.quick-doc-title{ max-width:21ch; font-size:clamp(1.8rem,1.05rem + 2.35vw,3rem); }
.qw2-hero__lede{ max-width:52ch; margin-bottom:20px; }
.qw2-hero__offer{ margin-bottom:18px; }
/* Rechte Bildhälfte abdunkeln, damit der helle Asphalt nicht mit der Type kämpft */
.qw2-hero__scrim{
  background:
    linear-gradient(180deg, rgba(7,6,11,.82) 0%, rgba(7,6,11,.3) 34%, rgba(7,6,11,.9) 84%, var(--qw2-void) 100%),
    linear-gradient(94deg, rgba(7,6,11,.95) 4%, rgba(7,6,11,.62) 42%, rgba(7,6,11,.34) 70%, rgba(7,6,11,.5) 100%);
}

/* ---- Alt-Offset der entfernten Icon-Sidebar (64px) neutralisieren ---------
   Die Schiene ist jetzt die Sektor-Navigation und existiert erst ab 1280px. */
main{ margin-left:0 !important; }
.quick-footer{ margin-left:0 !important; }
@media (min-width:1280px){
  body.qw2-has-tower main{ margin-left:74px !important; }
  body.qw2-has-tower .quick-footer{ margin-left:74px !important; }
  body.qw2-has-tower .quick-art-body{ padding-left:0; }
  body.qw2-has-tower .qw2-hero{ padding-left:0; }
}

/* ---- Hero auf schmalen Viewports: Bild sichtbar lassen ------------------
   Der horizontale Scrim (94deg) deckt bei 390px die gesamte Breite ab und
   schluckt das Motiv komplett — dort trägt nur der vertikale Verlauf. */
@media (max-width:820px){
  .qw2-hero__scrim{
    background:linear-gradient(180deg,
      rgba(7,6,11,.72) 0%, rgba(7,6,11,.42) 26%, rgba(7,6,11,.8) 62%,
      rgba(7,6,11,.96) 88%, var(--qw2-void) 100%);
  }
  .qw2-hero__media img{ object-position:64% 40%; }
  .qw2-hero__inner{ padding-top:clamp(40px,6vh,64px); }
}
/* „+ 200 Freispiele" nicht als Waise umbrechen lassen */
.qw2-hero__fig{ display:inline-block; }
.qw2-hero__fig small{ white-space:nowrap; display:inline-block; }
@media (max-width:520px){
  .qw2-hero__offer{ display:block; }
  .qw2-hero__fig{ display:block; line-height:1.06; }
  .qw2-hero__fig small{ display:block; margin-top:6px; font-size:.5em; }
}

/* ======================= PRÜFSTEMPEL + PRO/CONTRA ======================= */
.qw2-verdict{ padding:clamp(30px,5vh,52px) 0 clamp(24px,4vh,40px); background:var(--qw2-void); }
.qw2-stamp-row{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:26px; }
.qw2-stamp{
  font-size:.76rem; color:var(--qw2-txt-3); display:inline-flex; align-items:center; gap:.5em;
}
.qw2-stamp i{ color:var(--qw2-red); font-size:.85em; }
.qw2-stamp time{ color:var(--qw2-txt-2); font-variant-numeric:tabular-nums; }

.qw2-pro-con{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.qw2-pc{
  border:1px solid var(--qw2-line); border-radius:4px; padding:20px 22px 22px;
  background:linear-gradient(180deg,var(--qw2-carbon-2),var(--qw2-carbon));
  position:relative; overflow:hidden;
}
.qw2-pc::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; }
.qw2-pc--pro::before{ background:var(--qw2-green); }
.qw2-pc--con::before{ background:var(--qw2-red); }
.qw2-pc__h{
  display:flex; align-items:center; gap:.6em;
  font-size:1.05rem !important; margin:0 0 14px; letter-spacing:-.01em;
}
.qw2-pc__ico{
  width:26px; height:26px; flex:none; border-radius:3px;
  display:grid; place-items:center; font-family:var(--qw2-mono); font-weight:900; font-size:1rem;
}
.qw2-pc--pro .qw2-pc__ico{ background:rgba(61,220,132,.14); color:var(--qw2-green); }
.qw2-pc--con .qw2-pc__ico{ background:rgba(228,53,47,.14); color:var(--qw2-red); }
.qw2-pc ul{ margin:0; padding:0; list-style:none; }
.qw2-pc li{
  position:relative; padding-left:20px; margin-bottom:10px;
  font-size:.9rem; line-height:1.55; color:var(--qw2-txt-2);
}
.qw2-pc li:last-child{ margin-bottom:0; }
.qw2-pc li::before{
  content:""; position:absolute; left:2px; top:.62em; width:7px; height:2px;
}
.qw2-pc--pro li::before{ background:var(--qw2-green); }
.qw2-pc--con li::before{ background:var(--qw2-red); }

/* ---- Inline-CTA zwischen den Abschnitten ---- */
.qw2-cta-inline{
  margin-top:26px; padding:18px 20px; border:1px solid var(--qw2-line); border-radius:4px;
  background:linear-gradient(96deg,rgba(228,53,47,.1),rgba(251,232,83,.05) 62%,transparent);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.qw2-cta-inline--tight{ margin:22px 0 4px; }
.qw2-cta-inline__note{ font-size:.75rem; color:var(--qw2-txt-3); }

/* ======================= STRECKENPLAN (Inhaltsverzeichnis) ============== */
.qw2-toc{ padding:0 0 clamp(26px,4vh,44px); background:var(--qw2-void); }
.qw2-toc__h{ margin:0 0 16px; font-size:1.18rem !important; }
.qw2-toc__h .qw2-eyebrow{ display:block; margin-bottom:8px; }
.qw2-toc__list{
  list-style:none; counter-reset:toc; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:1px;
  border:1px solid var(--qw2-line); border-radius:4px; overflow:hidden;
  background:var(--qw2-line);
}
.qw2-toc__list li{ counter-increment:toc; background:var(--qw2-carbon); }
.qw2-toc__list a{
  display:flex; gap:11px; align-items:baseline; padding:12px 15px;
  color:var(--qw2-txt-2); text-decoration:none; font-size:.88rem; line-height:1.35;
  transition:background .16s, color .16s;
}
.qw2-toc__list a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--qw2-mono); font-size:.66rem; font-weight:700; color:var(--qw2-red);
  flex:none; letter-spacing:.04em;
}
.qw2-toc__list a:hover{ background:var(--qw2-carbon-2); color:var(--qw2-txt); }
.qw2-toc__list a:focus-visible{ outline:2px solid var(--qw2-gold); outline-offset:-2px; }

@media (max-width:720px){
  .qw2-pro-con{ grid-template-columns:1fr; }
  .qw2-cta-inline{ flex-direction:column; align-items:stretch; gap:12px; }
  .qw2-cta-inline .qw2-btn{ width:100%; }
}

/* ---- Spielkacheln: kein Beschnitt -------------------------------------
   Der Container ist 3/4 hoch, die Artworks sind gemischt (1:1, 2:3, 3:4).
   Mit object-fit:cover werden quadratische Logos links und rechts
   abgeschnitten — genau das war auf „Hotfire Diamonds" und „Razor Shark"
   zu sehen. contain zeigt das Motiv vollständig, der Rahmen trägt den Rest. */
.quick-game-box{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(228,53,47,.16), transparent 62%),
    linear-gradient(180deg,#171622,#0d0c14);
}
.quick-game-box img{
  object-fit:contain !important;
  padding:8px;
  box-sizing:border-box;
}
.quick-game-box:hover img{ transform:scale(1.04); }

/* Eyebrow im Streckenplan-Titel: display:block hat das Flex-Layout gekippt,
   dadurch lag der rote Strich auf der Schrift. */
.qw2-toc__h .qw2-eyebrow{ display:flex; width:fit-content; margin-bottom:8px; }

/* Hero-Kennzahl und ihr Zusatz brauchen Luft — auf /auszahlung/ klebte
   „Bearbeitung nach Antrag" direkt an „3 Werktage". */
.qw2-hero__fig small{ margin-left:.5em; }
@media (max-width:520px){ .qw2-hero__fig small{ margin-left:0; } }

/* ---- Kontextverweis am Abschnittsende ---------------------------------- */
.qw2-seealso{
  display:flex; gap:10px; align-items:baseline; margin:18px 0 0;
  padding:12px 15px; border-left:2px solid var(--qw2-red);
  background:rgba(255,255,255,.025); border-radius:0 3px 3px 0;
  font-size:.88rem; color:var(--qw2-txt-3);
}
.qw2-seealso i{ color:var(--qw2-red); font-size:.8em; }
.qw2-seealso a{ color:var(--qw2-gold); text-decoration:none; border-bottom:1px solid rgba(251,232,83,.35); }
.qw2-seealso a:hover{ border-bottom-color:var(--qw2-gold); }

/* ---- Querverweise am Seitenende ---------------------------------------- */
.qw2-crosslink{ padding:clamp(26px,4vh,44px) 0; background:var(--qw2-void); border-top:1px solid var(--qw2-line); }
.qw2-crosslink ul{
  list-style:none; margin:14px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;
  border:1px solid var(--qw2-line); border-radius:4px; overflow:hidden; background:var(--qw2-line);
}
.qw2-crosslink li{ background:var(--qw2-carbon); }
.qw2-crosslink a{
  display:block; padding:14px 16px; color:var(--qw2-txt-2); text-decoration:none;
  font-size:.9rem; transition:background .16s,color .16s;
}
.qw2-crosslink a:hover{ background:var(--qw2-carbon-2); color:var(--qw2-txt); }
.qw2-crosslink a::before{ content:"→ "; color:var(--qw2-red); }

/* ---- Header-Nav: jetzt vier echte Links statt zwei Offer-Trigger ------- */
.header-nav a[data-qw2nav]{ white-space:nowrap; }
@media (max-width:1280px){ .header-nav a[data-qw2nav]{ display:none; } }

/* Nav-Links liefen erst ab 1280px, das Burger-Menü verschwindet aber schon
   bei 1170px — dazwischen blieb nur „CASINO" stehen. Beide auf dieselbe
   Schwelle ziehen, damit keine tote Zone entsteht. */
@media (max-width:1280px){ .header-nav a[data-qw2nav]{ display:inline-flex; } }
@media (max-width:1170px){ .header-nav a[data-qw2nav]{ display:none; } }

/* Der horizontale Scrim war für breite Viewports gerechnet; bei 1024px liegt
   der sichtbare Ausschnitt komplett in seiner opaken Zone und das Motiv
   verschwindet. Schwelle von 820 auf 1100 gezogen. */
@media (max-width:1100px){
  .qw2-hero__scrim{
    background:linear-gradient(180deg,
      rgba(7,6,11,.74) 0%, rgba(7,6,11,.4) 28%, rgba(7,6,11,.82) 64%,
      rgba(7,6,11,.96) 88%, var(--qw2-void) 100%);
  }
  .qw2-hero__media img{ object-position:62% 42%; }
}

/* ---- CLS-Fix für die Prüfstempel-Zeile ---------------------------------
   Die Font-Awesome-Glyphen sind vor dem Laden der Icon-Schrift 0 breit und
   dehnen sich danach aus; auf den Rechtsseiten steht der Stempel direkt unter
   dem H1 und schob den folgenden Absatz nach unten (CLS 0.169 auf /datenschutz/,
   0.167 auf /agb/). Platz vorab reservieren, Zeilenhöhe festnageln. */
.qw2-stamp i{
  display:inline-block;
  width:1em;
  text-align:center;
  flex:none;
}
.qw2-stamp{
  min-height:1.35em;
  align-items:center;
}
.qw2-stamp-row{
  min-height:1.35em;
  align-items:center;
  contain:layout;
}
/* Die Stempelzeile direkt unter dem H1 bekommt zusätzlich festen Abstand,
   damit ein Umbruch bei schmalen Viewports die Folgeelemente nicht verschiebt. */
main > .quick-shell > .qw2-stamp-row{ margin:10px 0 18px; }

/* Auf schmalen Viewports bricht die Stempelzeile um, und sobald die Icon-Schrift
   nachlädt, ändert sich die Zeilenzahl — daher der Rest-CLS auf /agb/ und /faq/.
   Dort die Icon-Abhängigkeit ganz entfernen und die Höhe deterministisch machen. */
@media (max-width:760px){
  .qw2-stamp-row{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-height:auto;
  }
  .qw2-stamp{
    min-height:1.5em;
    line-height:1.5;
  }
  .qw2-stamp i{ display:none; }
}