/* ══════════════════════════════════════════ RESET ══════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } .reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 6px; background: linear-gradient(90deg, #F5A623, #34D399); z-index: 300; pointer-events: none; transition: width 60ms linear; } body { background: #0B1221 !important; background-image: none !important; overflow-x: hidden; } a { color: inherit; text-decoration: none; } /* ── NAV ── */ @media (min-width: 1024px) { .site-nav.show-quicknav .nav-inner { display: flex; justify-content: center; align-items: center; gap: 16px; } .site-nav.show-quicknav .nav-center { order: 1; flex: 0 0 auto; justify-content: flex-start; } .site-nav.show-quicknav .nav-center > :not(.nav-logo) { display: none; } .site-nav.show-quicknav .nav-left-spacer { order: 2; flex: 0 0 auto; width: auto; } .site-nav.show-quicknav .nav-quicknav { order: 3; display: flex; flex: 0 0 auto; } .site-nav.show-quicknav .nav-actions { display: none; } /* Hamburger: borderless larger bars, vertically centered */ .site-nav.show-quicknav .nav-hamburger { display: flex; align-self: center; background: transparent; border: none; width: auto; height: auto; padding: 8px; gap: 6px; } .site-nav.show-quicknav .nav-hamburger:hover { background: rgba(255,255,255,0.06); border-radius: 8px; } .site-nav.show-quicknav .nav-hamburger .hb-bar { width: 24px; height: 4px; border-radius: 999px; } /* Divider between hamburger and quicknav */ .site-nav.show-quicknav .nav-quicknav::before { content: ''; display: block; width: 2px; height: 26px; background: rgba(255,255,255,0.22); margin: 0 12px 0 4px; align-self: center; flex: 0 0 auto; border-radius: 1px; } } /* Smooth fade transitions for swap elements */ .nav-quicknav, .nav-hamburger { transition: opacity 0.25s ease; } .site-nav .nav-center > :not(.nav-logo) { transition: opacity 0.2s ease; } .nav-quicknav { display: none; align-items: center; gap: 4px; justify-content: center; flex-wrap: nowrap; } .nqn-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: rgba(240,244,248,0.55); font-size: var(--badge-size); font-weight: 600; transition: background 0.2s ease, color 0.2s ease; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .nqn-item:hover { background: rgba(255,255,255,0.05); color: rgba(240,244,248,0.85); } .nqn-item.active { color: var(--color-heading); background: rgba(255,255,255,0.08); } .nqn-icon { width: 18px; display: inline-flex; justify-content: center; align-items: center; font-size: var(--badge-size); } @media (max-width: 1023px) { .site-nav.show-quicknav .nav-inner { display: flex !important; } .site-nav.show-quicknav .nav-quicknav { display: none; } } .site-nav.scrolled { background: rgba(11,18,33,0.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 1px 0 rgba(255,255,255,0.04); } .site-nav .nav-center { display: flex; align-items: center; justify-content: center; gap: 4px; } .site-nav .nav-logo { display: flex; align-items: center; justify-content: center; padding: 0 24px; transition: opacity 0.3s ease, transform 0.3s ease; } .site-nav .nav-logo:hover { opacity: 0.85; transform: scale(1.03); } .site-nav .nav-logo { display: flex; align-items: center; } .site-nav .nav-logo-img { height: 34px; width: auto; display: block; align-self: center; filter: drop-shadow(0 0 24px rgba(245,166,35,0.3)); } .site-nav .nav-link { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: var(--badge-size); font-weight: 500; color: rgba(240,244,248,0.48); border-radius: 10px; transition: color 0.2s ease, background 0.2s ease; white-space: nowrap; cursor: pointer; text-decoration: none; } .site-nav .nav-link:hover { color: rgba(240,244,248,0.85); background: rgba(255,255,255,0.05); } .site-nav .nav-link.active { color: #F5A623; background: rgba(245,166,35,0.08); } .site-nav .nav-link.active::after { content: ''; position: absolute; bottom: 4px; left: 14px; right: 14px; height: 2px; background: #F5A623; border-radius: 1px; } .site-nav .nav-link-icon { font-size: var(--label-size); opacity: 0.5; } .site-nav .nav-left-spacer { width: 36px; } .site-nav .nav-actions { display: flex; align-items: center; gap: 8px; } .site-nav .nav-search { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: rgba(240,244,248,0.48); cursor: pointer; font-size: var(--label-size); transition: color 0.2s ease, background 0.2s ease; } .site-nav .nav-search:hover { color: var(--color-heading); background: rgba(255,255,255,0.08); } .site-nav .nav-cta { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: 50px; background: linear-gradient(135deg, #F5A623, #FFB940); color: #0B1221; font-size: var(--badge-size); font-weight: 700; white-space: nowrap; transition: opacity 0.2s ease, transform 0.2s ease; } .site-nav .nav-cta:hover { opacity: 0.9; transform: translateY(-1px); } .nav-hamburger { display: none; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: background 0.2s ease, border-color 0.2s ease; } .nav-hamburger:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); } .nav-hamburger .hb-bar { display: block; width: 16px; height: 3px; border-radius: 999px; transition: background 0.2s ease, transform 0.3s ease, opacity 0.2s ease; } .nav-hamburger .hb-bar-1 { background: #1FB67A; } .nav-hamburger .hb-bar-2 { background: #F4BD46; } .nav-hamburger .hb-bar-3 { background: #3889D9; } .nav-hamburger.open .hb-bar-1 { transform: translateY(8px) rotate(45deg); background: var(--color-heading); } .nav-hamburger.open .hb-bar-2 { opacity: 0; } .nav-hamburger.open .hb-bar-3 { transform: translateY(-8px) rotate(-45deg); background: var(--color-heading); } .nav-dropdown-wrap { position: relative; } .nav-dropdown-arrow { font-size: var(--badge-size); opacity: 0.4; transition: transform 0.2s ease, opacity 0.2s ease; margin-left: 2px; } .nav-dropdown-wrap.open .nav-dropdown-arrow { transform: rotate(180deg); opacity: 0.8; } .nav-dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 224px; background: rgba(11,18,33,0.98); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 300; } .nav-dropdown-wrap.open .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown-group { font-family: var(--font-mono); font-size: var(--badge-size); text-transform: uppercase; letter-spacing: 1.5px; color: rgba(240,244,248,0.48); padding: 8px 12px 4px; } .nav-dropdown-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 6px 4px; } .nav-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: var(--badge-size); font-weight: 500; color: rgba(240,244,248,0.65); transition: color 0.15s ease, background 0.15s ease; white-space: nowrap; text-decoration: none; } .nav-dropdown-item:hover { color: var(--color-heading); background: rgba(255,255,255,0.09); } .nav-dropdown-item.active { color: #F5A623; } .nav-dropdown-item i { font-size: var(--badge-size); width: 18px; text-align: center; opacity: 0.65; } .nav-dropdown-item:hover i { opacity: 0.8; } .nav-dropdown-item:hover i { opacity: 0.85; } #casinosDropWrap .nav-dropdown { left: 0; transform: translateX(0) translateY(-6px); } #casinosDropWrap.open .nav-dropdown { transform: translateX(0) translateY(0); } #magazinDropWrap .nav-dropdown { left: auto; right: 0; transform: translateX(0) translateY(-6px); } #magazinDropWrap.open .nav-dropdown { transform: translateX(0) translateY(0); } .mobile-menu { position: fixed; top: calc(72px + var(--td-h)); left: 0; right: 0; bottom: 0; z-index: 199; background: rgba(11,18,33,0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: flex; flex-direction: column; padding: 24px; gap: 4px; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1); overflow-y: auto; } .mobile-menu.open { transform: translateX(0); } .mobile-menu .mobile-menu-link { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; font-size: var(--btn-size); font-weight: var(--btn-fw); color: rgba(240,244,248,0.6); transition: background 0.2s ease, color 0.2s ease; text-decoration: none; } .mobile-menu .mobile-menu-link:hover { background: rgba(255,255,255,0.05); color: var(--color-heading); } .mobile-menu .mobile-menu-link i { font-size: var(--btn-size); width: 24px; text-align: center; opacity: 0.5; } .mobile-menu .mobile-menu-group-label { font-family: var(--font-mono); font-size: var(--badge-size); text-transform: uppercase; letter-spacing: 1.5px; color: rgba(240,244,248,0.48); padding: 14px 18px 4px; } .mobile-menu .mobile-menu-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 8px 0; } .mobile-menu .mobile-menu-cta { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 100px; background: linear-gradient(135deg, #F5A623, #FFB940); color: #0B1221; font-size: var(--label-size); font-weight: 700; margin-top: 12px; transition: opacity 0.2s ease; text-decoration: none; } .mobile-menu .mobile-menu-cta:hover { opacity: 0.9; } /* ══════════════════════════════════════════ HERO ══════════════════════════════════════════ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-hero) 0 var(--space-lg); overflow: hidden; } .hero .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero .hero-bg-image { position: absolute; inset: 0; background: linear-gradient(-45deg,#0B1221,#1e0d2a,#0d1e17,#1e1208,#14091e,#0B1221); background-size: 500% 500%; animation: v2MeshMove 18s ease infinite; opacity: 1; } .hero .hero-bg-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,18,33,0.3) 0%, rgba(11,18,33,0.92) 65%, #0B1221 100%); } .hero .hero-content { position: relative; z-index: 1; max-width: 1400px; width: 100%; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: stretch; } .hero .hero-left { display: flex; flex-direction: column; justify-content: center; } .hero .hero-tagline { font-size: var(--badge-size); font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 24px; animation: heroFadeUp 0.6s ease-out both; } .hero .hero-headline { font-family: var(--font-display); font-size: var(--h1-size); font-weight: var(--h1-fw); line-height: var(--h1-lh); letter-spacing: -2px; color: var(--color-heading); margin-bottom: var(--h1-mb); animation: heroFadeUp 0.6s 0.1s ease-out both; } .hero .hero-headline-red { color: #E8304A; font-style: italic; } .hero .hero-sub { font-size: var(--btn-size); color: rgba(240,244,248,0.78); line-height: 1.7; max-width: 520px; margin-bottom: 24px; animation: heroFadeUp 0.6s 0.2s ease-out both; } .hero .hero-sub strong { color: rgba(240,244,248,0.85); font-weight: 600; } .hero .hero-stats-row { display: flex; gap: 32px; margin-bottom: 40px; animation: heroFadeUp 0.6s 0.25s ease-out both; } .hero .hero-stat-num { font-family: var(--font-display); font-size: var(--h3-size); font-weight: 900; line-height: 1; letter-spacing: -1px; } .hero .hero-stat-num-red { color: #E8304A; } .hero .hero-stat-num-green { color: #1DB87B; } .hero .hero-stat-num-gold { color: #F5A623; } .hero .hero-stat-label { font-size: var(--badge-size); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(240,244,248,0.52); margin-top: 4px; } .hero .hero-cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; border-radius: 100px; background: #F5A623; color: #0B1221; font-size: var(--btn-size); font-weight: 700; cursor: pointer; transition: background 0.25s ease, transform 0.2s ease; border: none; animation: heroFadeUp 0.6s 0.3s ease-out both; width: fit-content; } .hero .hero-cta:hover { background: #FFB940; transform: scale(1.03); } .hero .hero-card { position: relative; border-radius: 20px; overflow: hidden; background: #152234; box-shadow: 0 32px 80px rgba(0,0,0,0.5); animation: heroFadeRight 0.7s 0.15s ease-out both; cursor: pointer; } .hero .hero-card-image { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.55); transition: filter 0.5s ease, transform 0.5s ease; } .hero .hero-card:hover .hero-card-image { filter: brightness(0.7); transform: scale(1.03); } .hero .hero-card-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; background: rgba(245,166,35,0.92); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #0B1221; font-size: var(--h5-size); padding-left: 4px; box-shadow: 0 8px 32px rgba(245,166,35,0.35); transition: transform 0.3s ease, box-shadow 0.3s ease; z-index: 2; } .hero .hero-card:hover .hero-card-play { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 12px 40px rgba(245,166,35,0.5); } .hero .hero-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 36px 32px; background: linear-gradient(0deg, rgba(11,18,33,0.95) 0%, rgba(11,18,33,0.7) 50%, rgba(11,18,33,0.15) 80%, transparent 100%); } .hero .hero-card-author { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .hero .hero-card-author-name { font-size: var(--label-size); font-weight: 700; color: var(--color-heading); } .hero .hero-card-author-role { font-size: var(--badge-size); color: rgba(240,244,248,0.72); display: flex; align-items: center; gap: 5px; } .hero .hero-card-author-logo { height: 13px; width: auto; display: inline-block; filter: brightness(0) invert(1); opacity: 0.85; vertical-align: middle; } .hero .hero-card-label { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #F5A623; margin-bottom: 10px; } .hero .hero-card-title { font-family: var(--font-display); font-size: var(--h5-size); font-weight: 800; color: var(--color-heading); line-height: 1.2; } .hero .hero-card-quote { position: relative; margin: 0; padding: 0; } .hero .hero-card-quote-mark { display: block; font-size: var(--h5-size); line-height: 1; color: #F5A623; opacity: 0.55; margin-bottom: 8px; } .hero .hero-card-quote p { font-family: var(--font-display); font-size: var(--h6-size); font-style: italic; font-weight: 700; color: var(--color-heading); line-height: 1.4; letter-spacing: -0.2px; margin: 0; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroFadeRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @media (max-width: 1023px) { .hero .hero-content { grid-template-columns: 1fr; gap: 32px; } .hero .hero-headline { font-size: var(--h2-size); } .hero .hero-card { aspect-ratio: 16/10; max-width: 100%; order: -1; } } @media (max-width: 767px) { .hero { padding: 104px 0 var(--space-lg); } .hero .hero-headline { font-size: var(--h1-size); letter-spacing: -1px; } .hero .hero-stats-row { flex-wrap: wrap; gap: 20px; } .hero .hero-stat-num { font-size: var(--h1-size); } } /* ══════════════════════════════════════════ TOP-10 PROVIDERS SLIDER ══════════════════════════════════════════ */ .top-providers { padding: var(--space-sm) 0 var(--space-md); background: #0B1221; overflow: hidden; } .top-providers .top-providers-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .top-providers .top-providers-slider { padding: 40px 40px; } .top-providers .top-providers-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; } .top-providers .top-providers-eyebrow { font-size: var(--badge-size); line-height: var(--badge-lh); font-weight: var(--badge-fw); text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 12px; } .top-providers .top-providers-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-fw); line-height: var(--h2-lh); letter-spacing: -1px; } .top-providers .top-providers-heading-gold { color: #F5A623; font-style: italic; } .top-providers .top-providers-header-right { display: flex; align-items: center; gap: 16px; } .top-providers .top-providers-link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--label-size); line-height: var(--label-lh); font-weight: var(--label-fw); color: rgba(240,244,248,0.65); transition: color 0.2s ease; } .top-providers .top-providers-link:hover { color: #F5A623; } .top-providers .top-providers-arrows { display: flex; gap: 6px; } .top-providers .tp-arrow { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: rgba(240,244,248,0.65); font-size: var(--label-size); cursor: pointer; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .top-providers .tp-arrow:hover { color: var(--color-heading); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); } .top-providers .tp-arrow.swiper-button-disabled { opacity: 0.25; pointer-events: none; } .top-providers .provider-card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 14px rgba(0,0,0,0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; height: auto; } .top-providers .provider-card:hover { border-color: rgba(245,166,35,0.25); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .top-providers .provider-card-rank { position: absolute; top: 12px; right: 16px; font-family: var(--font-display); font-size: var(--h1-size); font-weight: 900; color: rgba(245,166,35,0.2); line-height: 1; pointer-events: none; } .top-providers .provider-card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .top-providers .provider-card-logo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: white; overflow: hidden; padding: 6px 14px; border-radius: 10px; height: 44px; } .top-providers .provider-card-logo-img { width: auto; height: 100%; max-width: 140px; object-fit: contain; display: block; } .top-providers .provider-card-name { font-family: var(--font-display); font-size: var(--h5-size); font-weight: 800; color: var(--color-heading); text-transform: uppercase; } .top-providers .provider-card-type { font-size: var(--badge-size); color: rgba(240,244,248,0.58); margin-top: 2px; } .top-providers .provider-card-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .top-providers .provider-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; font-size: var(--badge-size); font-weight: 600; } .top-providers .provider-badge-ggl { background: rgba(29,184,123,0.08); border: 1px solid rgba(29,184,123,0.2); color: #1DB87B; padding: 6px 12px 6px 8px; } .top-providers .provider-badge-ggl-logo { height: 28px; width: auto; display: block; } .top-providers .provider-rating { display: flex; align-items: center; gap: 6px; } .top-providers .provider-rating-num { font-family: var(--font-display); font-size: var(--h4-size); font-weight: 900; color: #F5A623; line-height: 1; } .top-providers .provider-rating-stars { display: flex; gap: 2px; color: #F5A623; font-size: var(--badge-size); } .top-providers .provider-rating-star-empty { color: rgba(245,166,35,0.25); } .top-providers .provider-rating-label { font-size: var(--badge-size); color: rgba(240,244,248,0.52); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .top-providers .provider-card-features { font-size: var(--badge-size); color: rgba(240,244,248,0.65); line-height: 1.5; flex: 1; } .top-providers .provider-card-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 12px; background: #1DB87B; color: var(--color-heading); font-size: var(--table-head-size); line-height: var(--table-head-lh); font-weight: var(--table-head-fw); transition: opacity 0.2s ease, transform 0.2s ease; width: 100%; margin-top: auto; } .top-providers .provider-card-cta:hover { opacity: 0.9; transform: translateY(-1px); } .top-providers .swiper { overflow: visible; } .top-providers .swiper-slide { height: auto; transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0.85; transform: scale(1); } .top-providers .swiper-slide .provider-card { transition: border-color 0.8s ease, box-shadow 0.8s ease, background 0.8s ease, padding 0.8s ease; } .top-providers .swiper-slide-active { opacity: 1; transform: scale(1); z-index: 1; } .top-providers .swiper-slide-next { opacity: 0.8; transform: scale(1); } .top-providers .swiper-slide-prev { opacity: 0.8; transform: scale(1); } .top-providers .swiper-slide:hover { opacity: 1; transform: scale(1.06); z-index: 2; } .top-providers .swiper-slide:hover .provider-card { background: rgba(245,166,35,0.12); border-color: rgba(245,166,35,0.45); } .top-providers .swiper-slide:hover .provider-card-rank { color: rgba(245,166,35,0.3); } .top-providers .swiper-slide:hover .provider-card-cta { background: #F5A623; box-shadow: 0 8px 24px rgba(245,166,35,0.25); } /* ══════════════════════════════════════════ SPIELBANKEN SLIDER ══════════════════════════════════════════ */ .spielbanken { padding: var(--space-sm) 0 var(--space-lg); background: #0B1221; overflow: hidden; } .spielbanken .spielbanken-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .spielbanken .spielbanken-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; } .spielbanken .spielbanken-eyebrow { font-size: var(--badge-size); line-height: var(--badge-lh); font-weight: var(--badge-fw); text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 12px; } .spielbanken .spielbanken-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-fw); line-height: var(--h2-lh); letter-spacing: -1px; } .spielbanken .spielbanken-heading-gold { color: #F5A623; font-style: italic; } .spielbanken .spielbanken-header-right { display: flex; align-items: center; gap: 16px; } .spielbanken .spielbanken-link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--label-size); line-height: var(--label-lh); font-weight: var(--label-fw); color: rgba(240,244,248,0.65); transition: color 0.2s ease; } .spielbanken .spielbanken-link:hover { color: #F5A623; } .spielbanken .sb-arrows { display: flex; gap: 6px; } .spielbanken .sb-arrow { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: rgba(240,244,248,0.65); font-size: var(--label-size); cursor: pointer; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .spielbanken .sb-arrow:hover { color: var(--color-heading); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); } .spielbanken .spielbanken-slider { padding: 32px 40px; } .spielbanken .swiper { overflow: visible; } .spielbanken .swiper-slide { height: auto; transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0.85; transform: scale(1); } .spielbanken .swiper-slide .sb-card { transition: border-color 0.8s ease, box-shadow 0.8s ease, background 0.8s ease; } .spielbanken .swiper-slide-active { opacity: 1; transform: scale(1); z-index: 1; } .spielbanken .swiper-slide-next { opacity: 0.8; transform: scale(1); } .spielbanken .swiper-slide-prev { opacity: 0.8; transform: scale(1); } .spielbanken .swiper-slide:hover { opacity: 1; transform: scale(1.05); z-index: 2; } .spielbanken .swiper-slide:hover .sb-card { background: rgba(245,166,35,0.1); border-color: rgba(245,166,35,0.4); } .spielbanken .swiper-slide:hover .sb-card-cta { background: #F5A623; color: #0B1221; border-color: #F5A623; } .spielbanken .sb-card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; height: 100%; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .spielbanken .sb-card:hover { border-color: rgba(245,166,35,0.2); box-shadow: 0 16px 48px rgba(0,0,0,0.25); } .spielbanken .sb-card-img { width: 100%; height: 160px; object-fit: cover; display: block; } .spielbanken .sb-card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .spielbanken .sb-card-rank { position: absolute; top: 12px; left: 14px; font-family: var(--font-display); font-size: var(--label-size); font-weight: 800; color: #0B1221; background: #F5A623; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; z-index: 2; } .spielbanken .sb-card-name { font-family: var(--font-display); font-size: var(--body-size); font-weight: 800; color: var(--color-heading); text-transform: uppercase; line-height: 1.2; } .spielbanken .sb-card-city { font-size: var(--badge-size); color: rgba(240,244,248,0.58); display: flex; align-items: center; gap: 5px; } .spielbanken .sb-card-city i { font-size: var(--badge-size); color: rgba(245,166,35,0.5); } .spielbanken .sb-card-desc { font-size: var(--badge-size); color: rgba(240,244,248,0.58); line-height: 1.5; flex: 1; } .spielbanken .sb-card-rating { display: flex; align-items: center; gap: 6px; } .spielbanken .sb-card-rating-num { font-family: var(--font-display); font-size: var(--h5-size); font-weight: 900; color: #F5A623; line-height: 1; } .spielbanken .sb-card-rating-stars { display: flex; gap: 1px; color: #F5A623; font-size: var(--badge-size); } .spielbanken .sb-card-rating-star-empty { color: rgba(245,166,35,0.25); } .spielbanken .sb-card-rating-label { font-size: var(--badge-size); color: rgba(240,244,248,0.50); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .spielbanken .sb-card-cta { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(240,244,248,0.82); font-size: var(--badge-size); font-weight: 700; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; width: 100%; margin-top: auto; } .spielbanken .sb-card-cta:hover { background: rgba(245,166,35,0.1); border-color: rgba(245,166,35,0.3); color: #F5A623; } @media (max-width: 1023px) { .spielbanken .spielbanken-inner { padding: 0 24px; } .spielbanken .spielbanken-slider { padding: 32px 24px; } .spielbanken .spielbanken-heading { font-size: var(--h1-size); } } @media (max-width: 767px) { .spielbanken { padding: 16px 0 60px; } .spielbanken .spielbanken-inner { padding: 0 16px; } .spielbanken .spielbanken-slider { padding: 28px 16px; } .spielbanken .spielbanken-heading { font-size: var(--h4-size); } .spielbanken .spielbanken-header-right { display: none; } } @media (max-width: 389px) { .spielbanken .spielbanken-inner { padding: 0 12px; } .spielbanken .spielbanken-slider { padding: 24px 12px; } .spielbanken .spielbanken-heading { font-size: var(--h4-size); } } /* ══════════════════════════════════════════ 7. MOMENTS — Two-column scenario cards (Barena "Offres" pattern) ══════════════════════════════════════════ */ .moments { padding: var(--space-lg) 0; background: #0B1221; } .moments .moments-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr; gap: 80px; } .moments .moment-block { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } .moments .moment-img { border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; background: #152234; } .moments .moment-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.7); transition: filter 0.4s, transform 0.4s; } .moments .moment-img:hover img { filter: brightness(0.85); transform: scale(1.02); } .moments .moment-body { } .moments .moment-heading { font-family: var(--font-display); font-size: var(--h3-size); font-weight: 900; line-height: 1; letter-spacing: -1px; margin-bottom: 20px; text-transform: uppercase; } .moments .moment-heading-red { color: #E8304A; } .moments .moment-heading-green { color: #1DB87B; } .moments .moment-text { font-size: var(--btn-size); color: rgba(240,244,248,0.72); line-height: 1.7; margin-bottom: 24px; } .moments .moment-text strong { color: rgba(240,244,248,0.75); font-weight: 600; } .moments .moment-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .moments .moment-list-item { display: flex; align-items: center; gap: 12px; font-size: var(--label-size); font-weight: 600; color: rgba(240,244,248,0.82); } .moments .moment-list-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: var(--badge-size); flex-shrink: 0; } .moments .moment-list-icon-red { background: rgba(232,48,74,0.1); color: #E8304A; } .moments .moment-list-icon-green { background: rgba(29,184,123,0.1); color: #1DB87B; } .moments .moment-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 12px; font-size: var(--label-size); font-weight: 700; margin-top: 24px; transition: opacity 0.2s, transform 0.2s; } .moments .moment-cta:hover { opacity: 0.85; transform: translateX(3px); } .moments .moment-cta-red { background: #E8304A; color: var(--color-heading); } .moments .moment-cta-green { background: #1DB87B; color: var(--color-heading); } @media (min-width: 768px) { .moments .moment-block { grid-template-columns: 1fr 1fr; } } /* ══════════════════════════════════════════ ANIMATIONS ══════════════════════════════════════════ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════ SCHWARZMARKT DEEP-DIVE ══════════════════════════════════════════ */ .deep-dive { padding: var(--space-lg) 0; background: #0E1A2C; } .deep-dive .deep-dive-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .deep-dive .deep-dive-eyebrow { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .deep-dive .deep-dive-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #E8304A; flex-shrink: 0; } .deep-dive .deep-dive-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-fw); line-height: var(--h2-lh); letter-spacing: -2px; margin-bottom: var(--h2-mb); } .deep-dive .deep-dive-heading-red { color: #E8304A; font-style: italic; } .deep-dive .deep-dive-text { font-size: var(--body-size); color: rgba(240,244,248,0.78); line-height: 1.7; max-width: 640px; margin-bottom: 48px; } .deep-dive .deep-dive-text strong { color: rgba(240,244,248,0.85); font-weight: 600; } .deep-dive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; } .dd-card { background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.4s ease; position: relative; overflow: hidden; transform-style: preserve-3d; perspective: 800px; } .dd-card::before { content: ''; position: absolute; top: var(--mouse-y, 50%); left: var(--mouse-x, 50%); width: 280px; height: 280px; background: radial-gradient(circle, rgba(245,166,35,0.12) 0%, transparent 70%); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.4s ease; z-index: 0; } .dd-card:hover::before { opacity: 1; } .dd-card:hover { border-color: rgba(245,166,35,0.25); background: rgba(255,255,255,0.04); box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06); } .dd-card > * { position: relative; z-index: 1; } /* Staggered reveal */ .dd-card { opacity: 0; transform: translateY(24px); } .dd-card.dd-revealed { opacity: 1; transform: translateY(0); } .dd-card:nth-child(1) { transition-delay: 0s; } .dd-card:nth-child(2) { transition-delay: 0.1s; } .dd-card:nth-child(3) { transition-delay: 0.2s; } .dd-card:nth-child(4) { transition-delay: 0.3s; } .dd-card-icon { font-size: var(--body-size); } .dd-card-title { font-family: var(--font-display); font-size: var(--body-size); font-weight: 800; color: var(--color-heading); text-transform: uppercase; letter-spacing: 0.3px; } .dd-card-desc { font-size: var(--badge-size); color: rgba(240,244,248,0.65); line-height: 1.55; } .deep-dive-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 100px; background: #E8304A; color: var(--color-heading); font-size: var(--label-size); font-weight: 700; transition: background 0.25s ease, transform 0.2s ease; } .deep-dive-cta:hover { background: #f0465e; transform: scale(1.03); } @media (min-width: 768px) { .deep-dive .deep-dive-heading { font-size: var(--h1-size); } } @media (max-width: 767px) { .deep-dive { padding: var(--space-lg) 0; } .deep-dive-grid { grid-template-columns: 1fr; } .deep-dive .deep-dive-heading { font-size: var(--h1-size); } } @media (max-width: 389px) { .deep-dive { padding: var(--space-md) 12px; } } /* ══════════════════════════════════════════ DEUTSCHLANDKARTE ══════════════════════════════════════════ */ .map-section { padding: var(--space-lg) 0; background: #0B1221; position: relative; overflow: hidden; } .map-section::before { content: ''; position: absolute; top: 50%; left: 30%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,255,255,0.015) 0%, transparent 70%); transform: translate(-50%, -50%); pointer-events: none; } .map-section .map-section-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; } .map-section .map-section-eyebrow { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .map-section .map-section-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #F5A623; flex-shrink: 0; } .map-section .map-section-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-fw); line-height: var(--h2-lh); letter-spacing: -2px; margin-bottom: var(--h2-mb); } .map-section .map-section-heading-gold { color: #F5A623; font-style: italic; } .map-section .map-section-text { font-size: var(--body-size); color: rgba(240,244,248,0.78); line-height: 1.7; max-width: none; margin-bottom: var(--space-sm); } .map-section .map-section-text strong { color: rgba(240,244,248,0.85); font-weight: 600; } .map-section .map-section-note { font-size: var(--label-size); color: rgba(240,244,248,0.65); line-height: 1.7; max-width: 640px; margin-top: 32px; } .map-section .map-section-note strong { color: rgba(240,244,248,0.75); font-weight: 600; } .map-section .map-legend { display: flex; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; } .map-section .map-legend-item { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: var(--badge-lh); font-weight: var(--badge-fw); color: rgba(240,244,248,0.78); } .map-section .map-legend-dot { width: 14px; height: 14px; border-radius: 4px; } .map-section .map-legend-dot-slots { background: rgba(245,166,35,0.25); border: 1px solid rgba(245,166,35,0.5); } .map-section .map-legend-dot-casino { background: rgba(29,184,123,0.25); border: 1px solid rgba(29,184,123,0.6); position: relative; } .de-map-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 4px; } .de-map-table td { padding: 6px 10px; font-size: var(--badge-size); color: rgba(240,244,248,0.7); vertical-align: middle; } .de-map-table td:first-child { color: rgba(240,244,248,0.92); font-weight: 600; } .de-map-table td:last-child { text-align: right; white-space: nowrap; color: rgba(240,244,248,0.5); } .de-map-table i { color: #F5A623; margin-right: 4px; } .de-map-table-title { margin: 16px 0 6px; font-size: var(--badge-size); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: rgba(240,244,248,0.48); } .de-map-sb-link { color: inherit; text-decoration: none; transition: color 0.2s ease; } .de-map-sb-link:hover { color: #F5A623; } .de-map-sb-score { display: inline-block; font-family: var(--font-mono); font-weight: 800; color: #F5A623; background: rgba(245,166,35,0.12); padding: 2px 8px; border-radius: 6px; } .de-map-table-sb td:nth-child(2) { text-align: right; color: rgba(240,244,248,0.5); white-space: nowrap; } .de-map-table-sb td:last-child { width: 1%; } /* Spielbanken-Liste mit Bild */ .de-map .de-map-sb-list { display: flex; flex-direction: column; gap: 6px; } .de-map .de-map-sb-item { display: flex; position: relative; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; } .card-stretch-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .de-map .de-map-sb-item:hover { border-color: rgba(245,166,35,0.25); background: rgba(255,255,255,0.04); } .de-map .de-map-sb-thumb { flex-shrink: 0; width: 56px; height: 40px; border-radius: 7px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; } .de-map .de-map-sb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .de-map .de-map-sb-thumb-ph { background: rgba(245,166,35,0.1); color: rgba(245,166,35,0.6); } .de-map .de-map-sb-thumb-ph i { font-size: 15px; } .de-map .de-map-sb-info { flex: 1; min-width: 0; } .de-map .de-map-sb-name { font-size: 14px; font-weight: 700; color: rgba(240,244,248,0.88); line-height: 1.25; } .de-map .de-map-sb-item:hover .de-map-sb-name { color: #F5A623; } .de-map .de-map-sb-city { font-size: var(--badge-size); color: rgba(240,244,248,0.5); display: flex; align-items: center; gap: 4px; } .de-map .de-map-sb-city i { font-size: 10px; color: #F5A623; } .map-section .map-legend-dot-casino::after { content: ''; position: absolute; inset: -3px; border-radius: 6px; border: 1px solid rgba(29,184,123,0.3); animation: mapCasinoPulse 2s ease-in-out infinite; } .map-section .map-legend-dot-default { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); } @keyframes mapCasinoPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.3); } } @keyframes mapGlowPulse { 0%, 100% { filter: drop-shadow(0 0 6px rgba(29,184,123,0.3)); } 50% { filter: drop-shadow(0 0 14px rgba(29,184,123,0.5)); } } .de-map { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: stretch; } /* SVG Map Container */ .de-map .de-map-svg { position: relative; background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.07); border-radius: 24px; padding: var(--space-sm) 40px; display: flex; align-items: center; justify-content: center; } .de-map .de-map-svg svg { width: 100%; max-width: 560px; height: auto; shape-rendering: geometricPrecision; } /* State shapes — smooth anti-aliased rendering */ .de-map .de-map-svg .bl-shape { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.18); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; cursor: pointer; transition: fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease, stroke-width 0.3s ease; paint-order: stroke fill; } .de-map .de-map-svg .bl-shape:hover { fill: rgba(245,166,35,0.14); stroke: rgba(245,166,35,0.7); stroke-width: 1.8; filter: drop-shadow(0 0 8px rgba(245,166,35,0.25)); } .de-map .de-map-svg .bl-shape.bl-active { fill: rgba(245,166,35,0.18); stroke: #F5A623; stroke-width: 2.2; filter: drop-shadow(0 0 12px rgba(245,166,35,0.35)); } .de-map .de-map-svg .bl-shape.bl-clicked { fill: rgba(245,166,35,0.32); stroke: #FFB940; stroke-width: 3; filter: drop-shadow(0 0 18px rgba(245,166,35,0.6)); } .de-map .de-map-svg .bl-shape.bl-casino.bl-clicked { fill: rgba(29,184,123,0.4); stroke: #34F199; stroke-width: 3; filter: drop-shadow(0 0 20px rgba(29,184,123,0.6)); } /* Casino state shapes — prominent green with smooth edges */ .de-map .de-map-svg .bl-shape.bl-casino { fill: rgba(29,184,123,0.12); stroke: rgba(29,184,123,0.5); stroke-width: 1.5; animation: mapGlowPulse 3s ease-in-out infinite; } .de-map .de-map-svg .bl-shape.bl-casino:hover { fill: rgba(29,184,123,0.25); stroke: #1DB87B; stroke-width: 2; filter: drop-shadow(0 0 10px rgba(29,184,123,0.35)); animation: none; } .de-map .de-map-svg .bl-shape.bl-casino.bl-active { fill: rgba(29,184,123,0.3); stroke: #22E88F; stroke-width: 2.5; filter: drop-shadow(0 0 16px rgba(29,184,123,0.5)); animation: none; } /* State labels */ .de-map .de-map-svg .bl-label { font-size: var(--card-meta-size); line-height: var(--card-meta-lh); fill: rgba(240,244,248,0.35); text-anchor: middle; pointer-events: none; font-family: var(--font-mono); font-weight: var(--card-meta-fw); letter-spacing: 0.5px; } .de-map .de-map-svg .bl-label-casino { fill: rgba(29,184,123,0.6); font-weight: 700; } /* Info Panel */ .de-map .de-map-panel { display: flex; flex-direction: column; position: sticky; top: 100px; background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.07); border-radius: 24px; overflow: hidden; max-height: calc(100vh - 140px); } .de-map .de-map-panel.panel-casino { border-color: rgba(29,184,123,0.15); } .de-map .de-map-panel-scroll { padding: 32px; overflow-y: auto; flex: 1; transition: opacity 0.22s ease; display: flex; flex-direction: column; } .de-map #mapCta { margin-top: auto; } .de-map .de-map-panel-scroll.is-switching { opacity: 0.15; } .de-map .de-map-panel-scroll::-webkit-scrollbar { width: 3px; } .de-map .de-map-panel-scroll::-webkit-scrollbar-track { background: transparent; } .de-map .de-map-panel-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; } /* Panel hint */ .de-map .de-map-panel-hint { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); margin-bottom: 20px; font-size: var(--label-size); color: rgba(240,244,248,0.58); } .de-map .de-map-panel-hint i { color: rgba(240,244,248,0.50); font-size: var(--label-size); flex-shrink: 0; } /* State header */ .de-map .de-map-state-header { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.05); } .de-map .de-map-state-name { font-family: var(--font-display); font-size: var(--h3-size); font-weight: 900; color: var(--color-heading); text-transform: uppercase; line-height: 1.1; margin-bottom: 4px; } .de-map .de-map-state-sub { font-size: var(--card-meta-size); line-height: var(--card-meta-lh); color: rgba(240,244,248,0.58); font-weight: var(--card-meta-fw); } /* Casino banner */ .de-map .de-map-casino-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: rgba(29,184,123,0.06); border: 1px solid rgba(29,184,123,0.15); margin-bottom: 16px; } .de-map .de-map-casino-banner-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(29,184,123,0.1); display: flex; align-items: center; justify-content: center; color: #1DB87B; font-size: var(--btn-size); flex-shrink: 0; } .de-map .de-map-casino-banner-text { display: flex; flex-direction: column; gap: 1px; } .de-map .de-map-casino-banner-title { font-size: var(--label-size); font-weight: 700; color: #1DB87B; } .de-map .de-map-casino-banner-sub { font-size: var(--badge-size); color: rgba(240,244,248,0.65); } /* Facts — compact inline rows instead of grid cards */ .de-map .de-map-facts { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; } .de-map .de-map-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .de-map .de-map-fact:last-child { border-bottom: none; } .de-map .de-map-fact-label { font-size: 16px; line-height: var(--card-meta-lh); font-weight: var(--card-meta-fw); color: rgba(240,244,248,0.72); display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .de-map .de-map-fact-label i { font-size: var(--badge-size); color: rgba(240,244,248,0.50); } .de-map .de-map-fact-value { font-size: var(--label-size); font-weight: 600; color: rgba(240,244,248,0.85); text-align: right; line-height: 1.3; } .de-map .de-map-fact-full { flex-direction: column; align-items: flex-start; gap: 4px; } .de-map .de-map-fact-full .de-map-fact-value { text-align: left; font-weight: 500; color: rgba(240,244,248,0.55); font-size: var(--badge-size); } .de-map .de-map-fact-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--badge-size); font-weight: 700; padding: 3px 9px; border-radius: 5px; } .de-map .de-map-fact-badge-legal { background: rgba(29,184,123,0.1); color: #1DB87B; } .de-map .de-map-fact-badge-ggl { background: rgba(245,166,35,0.08); color: #F5A623; } .de-map .de-map-fact-badge-aufbau { background: rgba(55,138,221,0.08); color: #378ADD; } /* Section divider */ .de-map .de-map-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0 16px; } /* Tabs */ .de-map .de-map-tabs { display: flex; gap: 4px; padding: 4px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; margin-bottom: 16px; } .de-map .de-map-tab { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border-radius: 9px; font-size: var(--badge-size); font-weight: 700; color: rgba(240,244,248,0.65); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; background: transparent; border: none; white-space: normal; line-height: 1.2; text-align: center; } .de-map .de-map-tab i { flex-shrink: 0; } .de-map .de-map-tab:hover { color: rgba(240,244,248,0.88); background: rgba(255,255,255,0.03); } .de-map .de-map-tab.tab-active { color: var(--color-heading); background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.2); } .de-map .de-map-tab.tab-active i { color: #F5A623; } .de-map .de-map-tab i { font-size: var(--badge-size); color: rgba(240,244,248,0.52); transition: color 0.2s ease; } .de-map .de-map-tab-count { font-size: var(--badge-size); font-weight: 800; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,0.06); color: rgba(240,244,248,0.58); margin-left: 2px; } .de-map .de-map-tab.tab-active .de-map-tab-count { background: rgba(245,166,35,0.15); color: #F5A623; } .de-map .de-map-tab-panel { display: none; } .de-map .de-map-tab-panel.tab-panel-active { display: block; } /* Spielbanken list — compact rows */ .de-map .de-map-sb-list { display: flex; flex-direction: column; gap: 2px; } .de-map .de-map-sb-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; transition: background 0.15s ease; } .de-map .de-map-sb-item:hover { background: rgba(255,255,255,0.03); } .de-map .de-map-sb-icon { color: rgba(240,244,248,0.48); font-size: var(--badge-size); flex-shrink: 0; width: 18px; text-align: center; } .de-map .de-map-sb-info { flex: 1; min-width: 0; } .de-map .de-map-sb-name { font-size: 16px; line-height: var(--label-lh); font-weight: var(--label-fw); color: rgba(240,244,248,0.75); } .de-map .de-map-sb-city { font-size: var(--badge-size); color: rgba(240,244,248,0.52); } /* Top Anbieter cards */ .de-map .de-map-anbieter-list { display: flex; flex-direction: column; gap: 6px; } .de-map .de-map-anbieter-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); transition: border-color 0.2s ease, background 0.2s ease; } .de-map .de-map-anbieter-card:hover { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.035); } .de-map .de-map-anbieter-rank { font-family: var(--font-mono); font-size: var(--badge-size); font-weight: 500; color: rgba(240,244,248,0.52); width: 22px; text-align: center; flex-shrink: 0; } .de-map .de-map-anbieter-logo { flex-shrink: 0; width: 72px; height: 46px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 6px; } .de-map .de-map-anbieter-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .de-map .de-map-anbieter-info { flex: 1; min-width: 0; } .de-map .de-map-anbieter-name { font-size: 16px; font-weight: 700; color: rgba(240,244,248,0.85); margin-bottom: 0; line-height: 1.2; } .de-map .de-map-anbieter-bonus { font-size: var(--badge-size); color: rgba(240,244,248,0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .de-map .de-map-anbieter-rating { display: flex; align-items: center; gap: 3px; flex-shrink: 0; } .de-map .de-map-anbieter-rating-num { font-family: var(--font-mono); font-size: var(--card-meta-size); line-height: var(--card-meta-lh); font-weight: var(--card-meta-fw); color: rgba(240,244,248,0.55); } .de-map .de-map-anbieter-rating-star { color: rgba(245,166,35,0.5); font-size: var(--badge-size); } .de-map .de-map-anbieter-rating-pct { font-family: var(--font-display); font-size: var(--h5-size); font-weight: 900; color: #F5A623; line-height: 1; flex-shrink: 0; } .de-map .de-map-anbieter-cta { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 16px; border-radius: 8px; background: #1DB87B; border: 1px solid #1DB87B; color: #fff; font-size: var(--badge-size); font-weight: 700; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; flex-shrink: 0; white-space: nowrap; text-decoration: none; } .de-map .de-map-anbieter-cta:hover { background: #22E88F; border-color: #22E88F; color: #fff; transform: translateY(-1px); } /* ── Landes-Casino mit Live-Spielen (SH/BY/BW) ── */ .de-map .de-map-livecasino { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(245,166,35,0.18); } .de-map .de-map-lc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 700; font-size: 15px; color: #F5A623; margin-bottom: 10px; } .de-map .de-map-lc-head i { font-size: var(--badge-size); } .de-map .de-map-lc-sub { font-family: var(--font-mono); font-size: var(--badge-size); font-weight: 500; letter-spacing: 0.3px; text-transform: none; color: rgba(240,244,248,0.48); } .de-map .lc-card { background: rgba(245,166,35,0.05); border-color: rgba(245,166,35,0.18); } .de-map .lc-card:hover { border-color: rgba(245,166,35,0.35); background: rgba(245,166,35,0.08); } .de-map .lc-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 5px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.3px; vertical-align: middle; } .de-map .lc-status-aktiv { background: rgba(29,184,123,0.16); color: #34D399; } .de-map .lc-status-kuerze { background: rgba(245,166,35,0.16); color: #F5A623; } .de-map .lc-status-aufbau { background: rgba(255,255,255,0.07); color: rgba(240,244,248,0.5); } /* cta-live erbt das grüne Basis-Styling von .de-map-anbieter-cta */ .de-map .de-map-lc-soon { flex-shrink: 0; padding: 7px 14px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.14); color: rgba(240,244,248,0.48); font-size: var(--badge-size); font-weight: 600; white-space: nowrap; } /* Main CTA */ .de-map .de-map-main-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 24px; border-radius: 12px; background: #1DB87B; color: var(--color-heading); font-size: var(--label-size); font-weight: 700; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; border: none; text-decoration: none; margin-top: 20px; white-space: nowrap; } .de-map .de-map-main-cta:hover { background: #22cc8e; transform: translateY(-1px); } .de-map .de-map-main-cta.cta-ggl { background: #F5A623; border: none; color: #0B1221; } .de-map .de-map-main-cta.cta-ggl:hover { background: #ffb738; color: #0B1221; } /* All-states link (below map grid) */ .de-map-all-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; font-size: var(--label-size); line-height: var(--label-lh); font-weight: var(--label-fw); color: rgba(240,244,248,0.58); transition: color 0.2s ease; text-decoration: none; } .de-map-all-link:hover { color: rgba(240,244,248,0.88); } .de-map-all-link i { font-size: var(--badge-size); } @media (min-width: 768px) { .map-section .map-section-heading { font-size: var(--h1-size); } } @media (min-width: 1200px) { .de-map .de-map-svg svg { max-width: 580px; } } @media (max-width: 1023px) { .de-map { grid-template-columns: 1fr; gap: 20px; align-items: start; } .de-map .de-map-panel { position: static; max-height: none; } .de-map .de-map-svg { min-height: 360px; } .de-map .de-map-svg svg { max-width: 420px; } } @media (max-width: 767px) { .map-section { padding: var(--space-sm) 20px var(--space-md); } .map-section .map-section-heading { font-size: var(--h2-size); } .map-section .map-section-text { font-size: var(--label-size); margin-bottom: 16px; } .map-section .map-legend { gap: 12px; margin-bottom: 16px; } .map-section .map-legend-item { font-size: var(--badge-size); } .de-map { gap: 16px; } .de-map .de-map-svg { min-height: unset; padding: 12px 8px; } .de-map .de-map-svg svg { max-width: 260px; } .de-map .de-map-panel { border-radius: 16px; } .de-map .de-map-panel-scroll { padding: 16px; } .de-map .de-map-panel-hint { padding: 10px 14px; font-size: var(--badge-size); margin-bottom: 14px; } .de-map .de-map-panel-hint i { font-size: var(--badge-size); } .de-map .de-map-state-name { font-size: var(--h5-size); } .de-map .de-map-state-type { font-size: var(--label-size); margin-bottom: 12px; } .de-map .de-map-anbieter-card { flex-wrap: wrap; } .de-map .de-map-anbieter-logo { width: 58px; height: 40px; } .de-map .de-map-anbieter-bonus { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; } .de-map .de-map-anbieter-cta { width: 100%; } .de-map .de-map-anbieter-list { gap: 4px; } .de-map .de-map-tabs { gap: 3px; padding: 3px; } .de-map .de-map-tab { flex-direction: column; gap: 3px; padding: 8px 3px; font-size: 11px; line-height: 1.12; } .de-map .de-map-tab i { font-size: 13px; } .de-map .de-map-tab-count { margin-left: 0; padding: 1px 6px; font-size: 10px; } .de-map .de-map-main-cta { font-size: var(--badge-size); padding: 12px 16px; gap: 6px; } } @media (max-width: 389px) { .map-section { padding: var(--space-sm) 12px var(--space-md); } .de-map .de-map-svg { padding: 8px 4px; } .de-map .de-map-svg svg { max-width: 220px; } .de-map .de-map-tab { padding: 9px 6px; font-size: 10px; } } /* ══════════════════════════════════════════ SPIELOTHEKEN GRID ══════════════════════════════════════════ */ /* ══════════════════════════════════════════ SPIELOTHEKEN GRID ══════════════════════════════════════════ */ .spielo-section { padding: var(--space-lg) 0; background: #0B1221; overflow: hidden; } .spielo-section .spielo-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-md); align-items: center; } .spielo-section .spielo-right { display: flex; flex-direction: column; } .spielo-section .spielo-eyebrow { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .spielo-section .spielo-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #1DB87B; } .spielo-section .spielo-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-fw); line-height: var(--h2-lh); letter-spacing: -2px; margin-bottom: var(--h2-mb); } .spielo-section .spielo-heading-green { color: #1DB87B; font-style: italic; } .spielo-section .spielo-text { font-size: var(--body-size); color: rgba(240,244,248,0.72); line-height: 1.7; max-width: 460px; margin-bottom: 32px; } .spielo-section .spielo-text strong { color: rgba(240,244,248,0.85); font-weight: 600; } .spielo-section .spielo-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; border-radius: 100px; background: #1DB87B; color: var(--color-heading); font-size: var(--label-size); font-weight: 700; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; border: none; width: fit-content; text-decoration: none; } .spielo-section .spielo-cta:hover { background: #24cc8e; transform: scale(1.03); } .spielo-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); height: 520px; gap: 8px; } .spielo-grid .sp-cell { width: 100%; height: 100%; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, opacity 0.8s ease, box-shadow 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .spielo-grid .sp-cell:hover { transform: scale(1.08); z-index: 2; box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .spielo-grid .sp-cell img { width: 72%; max-height: 55%; object-fit: contain; transition: transform 0.3s ease; } .spielo-grid .sp-cell:hover img { transform: scale(1.08); } @media (min-width: 768px) { .spielo-section .spielo-heading { font-size: var(--h1-size); } } @media (max-width: 1023px) { .spielo-section .spielo-inner { grid-template-columns: 1fr; gap: 40px; } .spielo-grid { height: 400px; } } @media (max-width: 767px) { .spielo-section { padding: var(--space-lg) 24px; } .spielo-section .spielo-heading { font-size: var(--h1-size); } .spielo-grid { height: 300px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); } } /* ══════════════════════════════════════════ GRID HOVER POPUP ══════════════════════════════════════════ */ /* ══════════════════════════════════════════ SHUFFLE GRID ══════════════════════════════════════════ */ .shuffle-section { padding: var(--space-lg) 0; background: #0B1221; overflow: hidden; } .shuffle-section .shuffle-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-md); align-items: center; } .shuffle-section .shuffle-left { display: flex; flex-direction: column; } .shuffle-section .shuffle-eyebrow { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .shuffle-section .shuffle-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #F5A623; } .shuffle-section .shuffle-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-fw); line-height: var(--h2-lh); letter-spacing: -2px; margin-bottom: var(--h2-mb); } .shuffle-section .shuffle-heading-red { color: #F5A623; font-style: italic; } .shuffle-section .shuffle-text { font-size: var(--body-size); color: rgba(240,244,248,0.72); line-height: 1.7; max-width: 460px; margin-bottom: 32px; } .shuffle-section .shuffle-text strong { color: rgba(240,244,248,0.85); font-weight: 600; } .shuffle-section .shuffle-cta { display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; gap: 10px; padding: 14px 32px; border-radius: 100px; background: #3889D9; color: var(--color-heading); font-size: var(--label-size); font-weight: 700; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; border: none; } .shuffle-section .shuffle-cta:hover { background: #4FA0EB; transform: scale(1.03); } .shuffle-section .shuffle-cta--disabled { background: rgba(255,255,255,0.06); color: rgba(240,244,248,0.48); cursor: default; } .shuffle-section .shuffle-cta--disabled:hover { background: rgba(255,255,255,0.06); transform: none; } .shuffle-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); height: 460px; gap: 10px; } .shuffle-grid .sg-cell { width: 100%; height: 100%; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.015) 100%) !important; border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 14px rgba(0,0,0,0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.3s ease, opacity 0.8s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .shuffle-grid .sg-cell:hover { transform: scale(1.05); z-index: 2; background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%) !important; border-color: rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 12px 28px rgba(0,0,0,0.5); } .shuffle-grid .sg-cell img { height: 40%; max-width: 80%; width: auto; object-fit: contain; opacity: 0.92; transition: transform 0.3s ease, opacity 0.3s ease; } .shuffle-grid .sg-cell:hover img { transform: scale(1.06); opacity: 1; } /* Per-logo height tuning — keep visual weight consistent regardless of intrinsic aspect */ .shuffle-grid .sg-cell img[src*="amatic"] { height: 30%; } .shuffle-grid .sg-cell img[src*="evolution"] { height: 35%; } .shuffle-grid .sg-cell img[src*="elk-light"] { height: 40%; } .shuffle-grid .sg-cell img[src*="hacksaw"] { height: 35%; } .shuffle-grid .sg-cell img[src*="hoelle"] { height: 50%; } .shuffle-grid .sg-cell img[src*="netent"] { height: 40%; } .shuffle-grid .sg-cell img[src*="nlc"] { height: 55%; } .shuffle-grid .sg-cell img[src*="kalamba"] { height: 38%; } .shuffle-grid .sg-cell img[src*="pushgaming"] { height: 45%; } .shuffle-grid .sg-cell img[src*="redtiger"] { height: 50%; } .shuffle-grid .sg-cell img[src*="games-global"] { height: 40%; } .shuffle-grid .sg-cell img[src*="playngo"] { height: 40%; } .shuffle-grid .sg-cell img[src*="relax"] { height: 35%; } .shuffle-grid .sg-cell img[src*="wazdan"] { height: 35%; } .shuffle-grid .sg-cell img[src*="aristocrat"] { height: 38%; } @media (min-width: 768px) { .shuffle-section .shuffle-heading { font-size: var(--h1-size); } } @media (max-width: 1023px) { .shuffle-section .shuffle-inner { grid-template-columns: 1fr; gap: 40px; } .shuffle-grid { height: 400px; } } @media (max-width: 767px) { .shuffle-section { padding: var(--space-lg) 24px; } .shuffle-section .shuffle-heading { font-size: var(--h1-size); } .shuffle-grid { height: auto; grid-template-columns: none; grid-template-rows: repeat(4, 80px); grid-auto-flow: column; grid-auto-columns: 140px; gap: 10px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding: 0 24px; padding: 4px 24px 12px; margin: 0 -24px; scrollbar-width: thin; scrollbar-color: rgba(245,166,35,0.4) rgba(255,255,255,0.05); } .shuffle-grid::-webkit-scrollbar { height: 6px; } .shuffle-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; } .shuffle-grid::-webkit-scrollbar-thumb { background: rgba(245,166,35,0.4); border-radius: 4px; } .shuffle-grid .sg-cell { scroll-snap-align: start; min-width: 140px; } } /* ══════════════════════════════════════════ VERGLEICHSTABELLE ══════════════════════════════════════════ */ .compare-section { padding: var(--space-lg) 0; background: #0E1A2C; overflow-x: clip; } .compare-section .compare-section-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .compare-section .compare-section-eyebrow { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .compare-section .compare-section-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #378ADD; flex-shrink: 0; } .compare-section .compare-section-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-fw); line-height: var(--h2-lh); letter-spacing: -2px; margin-bottom: var(--h2-mb); } .compare-section .compare-section-heading-blue { color: #378ADD; font-style: italic; } .compare-section .compare-section-text { font-size: var(--body-size); color: rgba(240,244,248,0.78); line-height: 1.7; max-width: 640px; margin-bottom: var(--space-sm); } .compare-section .compare-section-text strong { color: rgba(240,244,248,0.85); font-weight: 600; } .compare-section .compare-section-note { font-size: var(--label-size); color: rgba(240,244,248,0.65); line-height: 1.7; max-width: 100%; margin-top: 12px; margin-bottom: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .compare-section .compare-section-note strong { color: rgba(240,244,248,0.75); font-weight: 600; } .compare-table { display: flex; flex-direction: column; gap: 16px; } .compare-card { background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .compare-card:hover { border-color: rgba(55,138,221,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 40px rgba(0,0,0,0.4); transform: translateY(-2px); } .compare-card.card-featured { border-color: rgba(245,166,35,0.25); background: linear-gradient(180deg, rgba(245,166,35,0.07) 0%, rgba(245,166,35,0.02) 100%); box-shadow: inset 0 1px 0 rgba(245,166,35,0.15), 0 4px 20px rgba(0,0,0,0.3); } .compare-card.card-featured:hover { border-color: rgba(245,166,35,0.45); box-shadow: inset 0 1px 0 rgba(245,166,35,0.2), 0 12px 40px rgba(245,166,35,0.12); } .compare-card-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.04); } .compare-card-title { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: var(--body-size); font-weight: 800; color: rgba(240,244,248,0.7); } .compare-card-rank { color: rgba(245,166,35,0.4); font-size: var(--h6-size); } .card-featured .compare-card-rank { color: #F5A623; } .compare-card-badge { display: inline-flex; align-items: center; gap: 5px; font-family: 'Inter', sans-serif; font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 12px; border-radius: 100px; } .compare-badge-testsieger { background: rgba(245,166,35,0.12); color: #F5A623; } .compare-badge-topspielo { background: rgba(55,138,221,0.1); color: #378ADD; } .compare-badge-merkur { background: rgba(29,184,123,0.1); color: #1DB87B; } .compare-card-body { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 24px; align-items: center; padding: 24px 28px; } .compare-card-logo { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.5); border-radius: 16px; padding: 10px 18px; height: 76px; width: 150px; flex-shrink: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,1); } .compare-card-logo img { height: 100%; width: auto; max-width: 120px; object-fit: contain; display: block; } .compare-card-logo-icon i { font-size: 34px; color: #b8932f; line-height: 1; } .compare-card-logo-monogram { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(135deg, #b8932f, #8a6d1f); color: #fff; font-weight: 700; font-size: 26px; line-height: 1; } .compare-card-info { display: flex; flex-direction: column; gap: 6px; } .compare-card-bonus { font-size: var(--body-size); font-weight: 800; color: var(--color-heading); line-height: 1.3; } .compare-card-bonus span { display: block; font-size: var(--badge-size); line-height: var(--badge-lh); font-weight: var(--badge-fw); color: rgba(240,244,248,0.65); margin-top: 2px; } .compare-card-meta { display: flex; flex-wrap: wrap; gap: 12px; } .compare-card-meta-item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--badge-size); color: rgba(240,244,248,0.65); } .compare-card-meta-item i { font-size: var(--badge-size); } .compare-card-meta-item.meta-ggl { color: #1DB87B; font-weight: 600; } .compare-card-rating { display: flex; flex-direction: column; align-items: center; gap: 4px; } .compare-card-rating-num { font-family: var(--font-display); font-size: var(--h1-size); font-weight: 900; color: #F5A623; line-height: 1; } .compare-card-rating-num sup { font-size: var(--h4-size); font-weight: 900; vertical-align: super; line-height: 0; } .compare-card-rating-label { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(240,244,248,0.58); } .compare-card-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 12px; background: #1DB87B; color: var(--color-heading); font-size: var(--table-head-size); line-height: var(--table-head-lh); font-weight: var(--table-head-fw); transition: background 0.2s ease, transform 0.15s ease; white-space: nowrap; text-decoration: none; } .compare-card-cta:hover { background: #22cc8a; transform: translateY(-2px); } .card-featured .compare-card-cta { background: #F5A623; color: #0B1221; } .card-featured .compare-card-cta:hover { background: #FFB940; } /* ── Live-Casino-Reiter (landeslizenziert SH/BY/BW) ── */ .compare-card-live { border-color: rgba(245,166,35,0.18); } .compare-card-live .compare-card-body { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .compare-card-live .compare-card-info { flex: 1; min-width: 200px; } .compare-card-badge.lc-st-aktiv { background: rgba(29,184,123,0.16); color: #34D399; } .compare-card-badge.lc-st-kuerze { background: rgba(245,166,35,0.16); color: #F5A623; } .compare-card-badge.lc-st-aufbau { background: rgba(255,255,255,0.07); color: rgba(240,244,248,0.55); } .compare-card-meta-item.meta-license { color: #F5A623; } /* cta-live erbt das grüne Basis-Styling von .compare-card-cta */ .compare-card-soon { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.16); color: rgba(240,244,248,0.5); font-weight: 700; font-size: var(--badge-size); white-space: nowrap; } /* EEAT Trust Bar */ .compare-trust-bar { display: flex; align-items: center; gap: 20px; padding: 16px 20px; border-radius: 14px; background: rgba(29,184,123,0.04); border: 1px solid rgba(29,184,123,0.12); margin-bottom: 28px; flex-wrap: wrap; } .compare-trust-reviewer { display: flex; align-items: center; gap: 10px; } .compare-trust-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(29,184,123,0.3); flex-shrink: 0; } .compare-trust-reviewer-info { display: flex; flex-direction: column; } .compare-trust-reviewer-name { font-size: var(--badge-size); font-weight: 700; color: rgba(240,244,248,0.85); } .compare-trust-reviewer-role { font-size: var(--badge-size); color: rgba(240,244,248,0.58); } .compare-trust-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.08); flex-shrink: 0; } .compare-trust-meta { display: flex; align-items: center; gap: 6px; font-size: var(--badge-size); font-weight: 600; color: rgba(240,244,248,0.65); } .compare-trust-meta i { font-size: var(--badge-size); color: rgba(29,184,123,0.6); } .compare-trust-meta strong { color: rgba(240,244,248,0.7); font-weight: 700; } .compare-trust-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 8px; background: rgba(29,184,123,0.08); border: 1px solid rgba(29,184,123,0.15); font-size: var(--badge-size); font-weight: 700; color: #1DB87B; } @media (max-width: 767px) { .compare-trust-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; } .compare-trust-divider { display: none; } .compare-trust-reviewer { padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); } .compare-trust-bar > p { margin: 0; } .compare-trust-badge { width: 100%; justify-content: center; } } .compare-methodology { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 12px; background: rgba(55,138,221,0.04); border: 1px solid rgba(55,138,221,0.1); margin-top: 28px; margin-bottom: 24px; font-size: var(--badge-size); color: rgba(240,244,248,0.72); line-height: 1.6; } .compare-methodology i { color: rgba(55,138,221,0.5); font-size: var(--label-size); margin-top: 3px; flex-shrink: 0; } .compare-methodology a { color: #378ADD; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .compare-methodology a:hover { color: #60A5FA; } /* Card-level EEAT */ .compare-card-updated { display: flex; align-items: center; gap: 5px; font-size: var(--badge-size); color: rgba(240,244,248,0.50); font-weight: 500; } .compare-card-updated i { font-size: var(--badge-size); color: rgba(29,184,123,0.5); } /* Table Mode Switcher */ .compare-mode { display: flex; align-items: center; gap: 0; margin-bottom: 28px; border-bottom: 2px solid rgba(255,255,255,0.06); } .compare-mode-tab { position: relative; padding: 12px 24px; font-size: var(--table-head-size); line-height: var(--table-head-lh); font-weight: var(--table-head-fw); color: rgba(240,244,248,0.58); background: none; border: none; cursor: pointer; transition: color 0.25s ease; display: flex; align-items: center; gap: 8px; } .compare-mode-tab:hover { color: rgba(240,244,248,0.82); } .compare-mode-tab.mode-active { color: rgba(240,244,248,0.9); } .compare-mode-tab::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: transparent; border-radius: 2px; transition: background 0.25s ease; } .compare-mode-tab.mode-active::after { background: #378ADD; } .compare-mode-tab i { font-size: var(--badge-size); opacity: 0.5; } .compare-mode-tab.mode-active i { opacity: 1; } .compare-mode-count { font-size: var(--badge-size); font-weight: 800; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,0.06); color: rgba(240,244,248,0.52); margin-left: 2px; } .compare-mode-tab.mode-active .compare-mode-count { background: rgba(55,138,221,0.15); color: #378ADD; } /* Filter Bar */ .compare-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .compare-filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 100px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: rgba(240,244,248,0.78); font-size: var(--badge-size); line-height: var(--badge-lh); font-weight: var(--badge-fw); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; white-space: nowrap; } .compare-filter-btn:hover { border-color: rgba(55,138,221,0.3); color: rgba(240,244,248,0.8); background: rgba(55,138,221,0.06); } .compare-filter-btn.filter-active { background: rgba(55,138,221,0.12); border-color: rgba(55,138,221,0.4); color: #378ADD; } .compare-filter-btn i { font-size: var(--badge-size); opacity: 0.6; } .compare-filter-btn.filter-active i { opacity: 1; } .compare-filter-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; } .compare-filter-sort select { appearance: none; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 8px 32px 8px 12px; color: rgba(240,244,248,0.82); font-size: var(--badge-size); line-height: var(--badge-lh); font-weight: var(--badge-fw); font-family: inherit; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(240,244,248,0.3)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color 0.2s ease; } .compare-filter-sort select:hover { border-color: rgba(55,138,221,0.3); } .compare-filter-sort select option { background: #152234; color: #F0F4F8; } .compare-filter-count { display: none; } /* Spielbanken Mode Cards */ .compare-table-lokal { display: none; } .compare-table-lokal .compare-card-body { grid-template-columns: auto 1fr auto auto; } .compare-card-location { display: flex; align-items: center; gap: 5px; font-size: var(--badge-size); color: rgba(240,244,248,0.58); } .compare-card-location i { font-size: var(--badge-size); color: rgba(245,166,35,0.5); } .compare-card-features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .compare-card-feature { display: inline-flex; align-items: center; gap: 4px; font-size: var(--badge-size); color: rgba(240,244,248,0.58); } .compare-card-feature i { font-size: var(--badge-size); color: rgba(245,166,35,0.4); } .compare-filters-lokal { display: none; } /* Expanded Details — redesigned */ .compare-card-details { display: none; padding: 0 28px 28px; } .compare-card.card-open .compare-card-details { display: block; padding-top: 24px; } .cd-top-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 24px; } /* Category Ratings */ .cd-ratings { display: flex; flex-direction: column; gap: 0; } .cd-section-title { font-size: var(--badge-size); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(240,244,248,0.52); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .cd-section-title i { font-size: var(--badge-size); color: rgba(55,138,221,0.5); } .cd-rating-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.03); } .cd-rating-row:last-child { border-bottom: none; } .cd-rating-label { font-size: var(--badge-size); line-height: var(--badge-lh); font-weight: var(--badge-fw); color: rgba(240,244,248,0.82); width: 140px; flex-shrink: 0; } .cd-rating-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; position: relative; } .cd-rating-fill { height: 100%; border-radius: 3px; transition: width 0.8s cubic-bezier(0.22,0.61,0.36,1); } .cd-rating-fill-excellent { background: linear-gradient(90deg, #1DB87B, #34D399); } .cd-rating-fill-good { background: linear-gradient(90deg, #378ADD, #60A5FA); } .cd-rating-fill-ok { background: linear-gradient(90deg, #F5A623, #FBBF24); } .cd-rating-fill-weak { background: linear-gradient(90deg, #E8304A, #F87171); } .cd-rating-value { font-family: var(--font-mono); font-size: var(--badge-size); font-weight: 500; color: rgba(240,244,248,0.78); width: 36px; text-align: right; flex-shrink: 0; } /* Key Facts Grid */ .cd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .cd-facts > .cd-section-title { grid-column: 1 / -1; } .cd-fact { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.03); } .cd-fact:nth-of-type(even) { border-left: 1px solid rgba(255,255,255,0.03); } .cd-fact:nth-last-of-type(-n+2) { border-bottom: none; } .cd-fact-label { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(240,244,248,0.48); } .cd-fact-value { font-size: var(--table-head-size); line-height: var(--table-head-lh); font-weight: var(--table-head-fw); color: rgba(240,244,248,0.75); display: flex; align-items: center; gap: 6px; } .cd-fact-value i { font-size: var(--badge-size); } .cd-fact-value .fact-yes { color: #1DB87B; } .cd-fact-value .fact-no { color: rgba(240,244,248,0.48); } .cd-fact-value .fact-highlight { color: #F5A623; } /* Payment & Providers */ .cd-meta-col { display: flex; flex-direction: column; gap: 20px; } .cd-tag-group { display: flex; flex-direction: column; gap: 8px; } .cd-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; } .cd-detail-tag { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,0.03); font-size: var(--badge-size); font-weight: 600; color: rgba(240,244,248,0.55); border: 1px solid rgba(255,255,255,0.05); transition: border-color 0.2s ease, background 0.2s ease; } .cd-detail-tag:hover { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); } .cd-detail-tag i { font-size: var(--badge-size); color: rgba(240,244,248,0.58); } /* Verdict + Pro/Con bottom row */ .cd-bottom-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.04); } .cd-verdict { display: flex; flex-direction: column; gap: 10px; } .cd-verdict-text { font-size: var(--label-size); color: rgba(240,244,248,0.78); line-height: 1.65; } .cd-verdict-text strong { color: rgba(240,244,248,0.8); font-weight: 600; } .cd-review-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; background: rgba(55,138,221,0.08); border: 1px solid rgba(55,138,221,0.15); color: #378ADD; font-size: var(--badge-size); font-weight: 700; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; width: fit-content; margin-top: auto; } .cd-review-link:hover { background: rgba(55,138,221,0.14); border-color: rgba(55,138,221,0.3); } .cd-review-link--soon { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: rgba(240,244,248,0.48); cursor: default; } .cd-review-link--soon:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); } .cd-reviewer { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.04); } .cd-reviewer img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.12); flex-shrink: 0; } .cd-reviewer-meta { font-size: var(--badge-size); line-height: 1.35; color: rgba(240,244,248,0.48); } .cd-reviewer-meta strong { color: rgba(240,244,248,0.7); font-weight: 700; } /* Fazit-Footer: Autoreninfo links, "Zum Testbericht" rechtsbündig auf gleicher Höhe */ .cd-verdict-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.04); } .cd-verdict-footer .cd-reviewer { margin-top: 0; padding-top: 0; border-top: none; min-width: 0; } .cd-verdict-footer p { margin: 0; flex-shrink: 0; } .cd-verdict-footer .cd-review-link { margin: 0 0 0 auto; flex-shrink: 0; white-space: nowrap; } /* Desktop (3-Spalten): Autoreninfo + "Zum Testbericht" als eigene, volle Breite UNTER Fazit/Vor-/Nachteile — getrennt durch eine Linie, ohne die Spalten zu kreuzen. */ @media (min-width: 900px) { .cd-bottom-row { position: relative; padding-bottom: 74px; } .cd-bottom-row .cd-verdict-footer { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.10); } .cd-bottom-row .cd-review-link { position: static; margin: 0 0 0 auto; } } .cd-pro, .cd-con { font-size: var(--label-size); line-height: 1.65; } .cd-pro ul, .cd-con ul { margin: 0; padding: 0; list-style: none; } .cd-pro p, .cd-con p, .cd-verdict p { margin: 0; } .cd-pro-title, .cd-con-title { font-size: var(--badge-size); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .cd-pro-title { color: #1DB87B; } .cd-con-title { color: #E8304A; } .cd-pro-title i, .cd-con-title i { font-size: var(--badge-size); } .cd-pro li, .cd-con li { font-size: var(--label-size); color: rgba(240,244,248,0.78); padding: 4px 0 4px 22px; position: relative; list-style: none; line-height: 1.5; } .cd-pro li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: var(--badge-size); position: absolute; left: 0; top: 6px; color: #1DB87B; } .cd-con li::before { content: '\f00d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: var(--badge-size); position: absolute; left: 0; top: 6px; color: #E8304A; } .compare-card-toggle { display: inline-flex; align-items: center; justify-content: center; align-self: center; justify-self: center; padding: 9px 16px; cursor: pointer; font-size: var(--badge-size); font-weight: 700; color: rgba(240,244,248,0.72); gap: 6px; white-space: nowrap; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .compare-card-toggle:hover { color: var(--color-heading); background: rgba(245,166,35,0.12); border-color: rgba(245,166,35,0.40); } .compare-card-toggle i { transition: transform 0.3s ease; font-size: var(--badge-size); } .compare-card.card-open .compare-card-toggle i { transform: rotate(180deg); } @media (min-width: 768px) { .compare-section .compare-section-heading { font-size: var(--h1-size); } } @media (max-width: 899px) { .compare-card-body { grid-template-columns: 1fr; gap: 16px; text-align: center; } .compare-card-logo { margin: 0 auto; } .compare-card-info { align-items: center; } .compare-card-meta { justify-content: center; } .compare-card-rating { flex-direction: row; gap: 8px; } .compare-card-rating-num { font-size: var(--h4-size); } .compare-card-cta { justify-content: center; width: 100%; } .cd-top-grid { grid-template-columns: 1fr; } .cd-bottom-row { grid-template-columns: 1fr; } .compare-filter-sort { margin-left: 0; width: 100%; } } @media (max-width: 767px) { .compare-section { padding: var(--space-md) 0; } .compare-section .compare-section-inner { padding: 0 20px; } .compare-section .compare-section-heading { font-size: var(--h2-size); } .compare-section .compare-section-note { white-space: normal; overflow: visible; text-overflow: clip; } /* Mode Tabs — full width, compact */ .compare-mode { margin: 0 0 20px; } .compare-mode-tab { padding: 10px 16px; font-size: var(--badge-size); flex: 1; justify-content: center; } /* Filter — horizontal scroll strip, no wrap */ .compare-filters { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 -20px 20px; padding: 4px 20px 12px; scrollbar-width: thin; scrollbar-color: rgba(55,138,221,0.35) rgba(255,255,255,0.06); -webkit-overflow-scrolling: touch; } .compare-filters::-webkit-scrollbar { height: 3px; } .compare-filters::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 2px; } .compare-filters::-webkit-scrollbar-thumb { background: rgba(55,138,221,0.4); border-radius: 2px; } .compare-filter-btn { flex-shrink: 0; padding: 7px 14px; font-size: var(--badge-size); } .compare-filter-sort { margin-left: 0; width: 100%; margin-bottom: 16px; } .compare-filter-count { margin-bottom: 14px; } /* Cards — horizontal scroll on mobile */ .compare-table { flex-direction: row; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 12px; margin: 0 -20px; padding: 4px 20px 12px; scrollbar-width: thin; scrollbar-color: rgba(55,138,221,0.35) rgba(255,255,255,0.06); } .compare-table::-webkit-scrollbar { height: 3px; } .compare-table::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 2px; } .compare-table::-webkit-scrollbar-thumb { background: rgba(55,138,221,0.4); border-radius: 2px; } .compare-card { flex-shrink: 0; width: calc(100vw - 56px); scroll-snap-align: start; } .compare-card-header { flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: 6px; padding: 12px 16px; } .compare-card-title { font-size: var(--badge-size); } .compare-card-body { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto auto; grid-template-areas: "logo rating" "info info" "cta cta" "toggle toggle"; gap: 12px; padding: 14px 16px 16px; text-align: center; } .compare-card-toggle { grid-area: toggle; justify-self: stretch; width: 100%; } .compare-card-logo { grid-area: logo; width: 100%; height: 72px; margin: 0; border-radius: 12px; padding: 8px 14px; align-self: stretch; } .compare-card-logo img { max-width: 100%; height: 100%; object-fit: contain; } .compare-card-info { grid-area: info; align-items: center; gap: 10px; } .compare-card-bonus { font-size: var(--h3-size); font-weight: 800; line-height: 1.2; width: 100%; box-sizing: border-box; padding: 12px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; } .compare-card-meta { grid-area: auto; justify-content: center; gap: 8px; flex-wrap: wrap; } .compare-card-meta-item { font-size: var(--badge-size); } .compare-card-rating { grid-area: rating; flex-direction: column; align-items: center; justify-content: center; gap: 2px; align-self: stretch; min-width: 104px; padding: 8px 16px; border-radius: 14px; background: linear-gradient(160deg, rgba(245,166,35,0.16) 0%, rgba(245,166,35,0.04) 100%); border: 1px solid rgba(245,166,35,0.30); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 16px -8px rgba(245,166,35,0.45); } .compare-card-rating-num { font-size: var(--h3-size); color: #F5A623; } .compare-card-rating-label { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: rgba(245,166,35,0.92); } .compare-card-body > p { display: contents; } .compare-card-cta { grid-area: cta; display: flex; justify-content: center; justify-self: stretch; width: 100%; box-sizing: border-box; padding: 14px 20px; } .cd-top-grid { grid-template-columns: 1fr; } .cd-bottom-row { grid-template-columns: 1fr; } .cd-rating-label { width: 110px; } } @media (max-width: 389px) { .compare-section .compare-section-inner { padding: 0 12px; } .compare-filters { margin: 0 -12px 16px; padding: 4px 12px 10px; } .compare-table { margin: 0 -12px; padding: 4px 12px 12px; } .compare-card { width: calc(100vw - 36px); } } /* ══════════════════════════════════════════ E-E-A-T REDAKTION ══════════════════════════════════════════ */ .eeat { padding: var(--space-lg) 0; background: #0B1221; } .eeat-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .eeat-eyebrow { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .eeat-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #1DB87B; flex-shrink: 0; } .eeat-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-fw); line-height: var(--h2-lh); letter-spacing: -2px; margin-bottom: var(--h2-mb); } .eeat-heading-green { color: #1DB87B; font-style: italic; } .eeat-text { font-size: var(--body-size); color: rgba(240,244,248,0.78); line-height: 1.7; max-width: 700px; margin-bottom: 56px; } .eeat-text strong { color: rgba(240,244,248,0.85); font-weight: 600; } .eeat-lead { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 36px; margin-bottom: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.3s ease; } .eeat-lead:hover { border-color: rgba(29,184,123,0.2); } .eeat-lead-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(29,184,123,0.3); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .eeat-lead-info { } .eeat-lead-role { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #1DB87B; margin-bottom: 6px; } .eeat-lead-name { font-family: var(--font-display); font-size: var(--h4-size); font-weight: 900; color: var(--color-heading); line-height: 1.1; margin-bottom: 8px; } .eeat-lead-creds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .eeat-lead-cred { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 100px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); font-size: var(--badge-size); font-weight: 600; color: rgba(240,244,248,0.78); } .eeat-lead-cred i { font-size: var(--badge-size); color: rgba(240,244,248,0.52); } .eeat-lead-bio { font-size: var(--label-size); color: rgba(240,244,248,0.72); line-height: 1.65; max-width: 540px; } .eeat-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 48px; } .eeat-member { background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.3s ease, transform 0.3s ease; } .eeat-member:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-3px); } .eeat-member-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.08); } .eeat-member-name { font-family: var(--font-display); font-size: var(--h6-size); font-weight: 800; color: var(--color-heading); } .eeat-member-title { font-size: var(--badge-size); font-weight: 600; color: rgba(240,244,248,0.58); margin-top: -4px; } .eeat-member-focus { display: inline-flex; align-items: center; gap: 4px; font-size: var(--badge-size); font-weight: 600; padding: 4px 12px; border-radius: 100px; background: rgba(245,166,35,0.08); color: #F5A623; border: 1px solid rgba(245,166,35,0.15); } .eeat-member-bio { font-size: var(--badge-size); color: rgba(240,244,248,0.65); line-height: 1.55; } .eeat-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .eeat-trust-item { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 24px; text-align: center; } .eeat-trust-num { font-family: var(--font-display); font-size: var(--h1-size); font-weight: 900; color: #F5A623; line-height: 1; margin-bottom: 6px; } .eeat-trust-label { font-size: var(--badge-size); font-weight: 600; color: rgba(240,244,248,0.58); } @media (min-width: 768px) { .eeat-heading { font-size: var(--h1-size); } } @media (max-width: 1023px) { .eeat-team { grid-template-columns: 1fr 1fr; } .eeat-trust { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .eeat { padding: var(--space-lg) 0; } .eeat-heading { font-size: var(--h1-size); } .eeat-lead { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 20px; } .eeat-lead-creds { justify-content: center; } .eeat-lead-bio { max-width: 100%; } .eeat-team { grid-template-columns: 1fr; } .eeat-trust { grid-template-columns: 1fr 1fr; } } /* ══════════════════════════════════════════ EDITORIAL (News & Videos) ══════════════════════════════════════════ */ .editorial { padding: var(--space-lg) 0; background: #0E1A2C; } .editorial-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .editorial-header { margin-bottom: 40px; } .editorial-header-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px; flex-wrap: wrap; } .editorial-header-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; } .editorial-trust-strip { display: inline-flex; align-items: center; gap: 18px; padding: 14px 22px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; } .ed-trust-item { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; } .ed-trust-item strong { font-family: var(--font-display); font-size: var(--h5-size); font-weight: 900; color: #F5A623; } .ed-trust-item span { font-size: var(--badge-size); font-weight: 700; color: rgba(240,244,248,0.72); text-transform: uppercase; letter-spacing: 0.7px; } .ed-trust-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.08); } .editorial-authors { display: flex; flex-wrap: wrap; gap: 8px; } .ed-author-pill { display: inline-flex; position: relative; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 100px; cursor: pointer; text-decoration: none; transition: border-color 0.25s ease, background 0.25s ease; } .ed-author-pill:hover { border-color: rgba(29,184,123,0.4); background: rgba(29,184,123,0.05); } .ed-author-pill > img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,0.08); } .ed-author-pill-lead > img { width: 34px; height: 34px; border-color: rgba(29,184,123,0.5); } .ed-author-pill-info { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; } .ed-author-pill-name { font-size: var(--badge-size); font-weight: 700; color: rgba(240,244,248,0.88); white-space: nowrap; } .ed-author-pill-role { font-size: var(--badge-size); font-weight: 600; color: rgba(240,244,248,0.72); display: flex; align-items: center; gap: 6px; white-space: nowrap; } .ed-author-pill-badge { display: inline-flex; padding: 2px 7px; border-radius: 4px; background: rgba(29,184,123,0.15); color: #1DB87B; font-size: var(--badge-size); font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; } .ed-verified-inline { display: inline-flex; align-items: center; color: #1DB87B; font-size: var(--badge-size); margin-left: 4px; } .ed-verified-label { display: inline-flex; align-items: center; gap: 4px; color: #1DB87B; font-weight: 700; } .editorial-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; } .editorial-verify { display: inline-flex; align-items: center; gap: 10px; font-size: var(--badge-size); color: rgba(240,244,248,0.82); font-weight: 500; } .editorial-verify i { color: #1DB87B; font-size: var(--btn-size); flex-shrink: 0; } .editorial-verify strong { color: rgba(240,244,248,0.85); font-weight: 700; } .editorial-verify-sep { color: rgba(240,244,248,0.48); margin: 0 4px; } .editorial-verify-link { color: rgba(240,244,248,0.78); text-decoration: underline; text-decoration-color: rgba(240,244,248,0.45); text-underline-offset: 2px; transition: color 0.2s ease, text-decoration-color 0.2s ease; } .editorial-verify-link:hover { color: #1DB87B; text-decoration-color: #1DB87B; } .editorial-eyebrow { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .editorial-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #E8304A; flex-shrink: 0; } .editorial-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-fw); line-height: var(--h2-lh); letter-spacing: -2px; } .editorial-heading-red { color: #E8304A; font-style: italic; } .editorial-tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.03); border-radius: 12px; padding: 4px; border: 1px solid rgba(255,255,255,0.06); } .editorial-tab { padding: 8px 20px; border-radius: 8px; font-size: var(--badge-size); font-weight: 700; color: rgba(240,244,248,0.65); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .editorial-tab:hover { color: rgba(240,244,248,0.7); } .editorial-tab.tab-active { background: rgba(255,255,255,0.06); color: var(--color-heading); } .editorial-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-bottom: 32px; } .editorial-hero-main { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16/10; background: #152234; } .editorial-hero-main > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; filter: brightness(0.55); transition: filter 0.4s ease, transform 0.4s ease; position: relative; z-index: 1; } .editorial-hero-main:hover > img { filter: brightness(0.65); transform: scale(1.02); } .editorial-hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 28px 24px; background: linear-gradient(to top, rgba(5,10,20,0.98) 0%, rgba(5,10,20,0.88) 40%, rgba(5,10,20,0.4) 70%, transparent 100%); z-index: 2; pointer-events: none; } .editorial-hero-overlay a { pointer-events: auto; } .editorial-hero-imgcaption { position: absolute; top: 12px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: var(--badge-size); color: rgba(255,255,255,0.72); background: rgba(5,10,20,0.55); padding: 4px 10px; border-radius: 7px; letter-spacing: 0.3px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .editorial-hero-imgcaption i { font-size: var(--badge-size); opacity: 0.7; } .editorial-hero-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 6px; font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; } .editorial-hero-title { font-family: var(--font-display); font-size: var(--h4-size); font-weight: 900; color: var(--color-heading); line-height: 1.1; margin-bottom: 10px; } .editorial-hero-excerpt { font-size: var(--label-size); color: rgba(240,244,248,0.65); line-height: 1.55; margin-bottom: 14px; max-width: 500px; } .editorial-hero-meta { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); } .editorial-hero-author-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(245,166,35,0.3); flex-shrink: 0; } .editorial-hero-metatext { min-width: 0; } .editorial-hero-byline { font-size: var(--label-size); line-height: 1.4; color: rgba(240,244,248,0.85); } .editorial-hero-byline strong { color: #fff; font-weight: 700; } .editorial-hero-role { color: rgba(240,244,248,0.6); } .editorial-hero-sub { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-family: var(--font-mono); font-size: var(--badge-size); color: rgba(240,244,248,0.5); } .editorial-hero-sub i { color: #F5A623; opacity: 0.8; margin-right: 5px; } /* Hero: solo (no sidebar) → full width, capped height so overlay is always visible */ .editorial-hero--solo { grid-template-columns: 1fr; } .editorial-hero--solo .editorial-hero-main { aspect-ratio: unset; height: 400px; max-height: 420px; } .editorial-hero--solo .editorial-hero-overlay { padding: 36px 40px 32px; } .editorial-hero--solo .editorial-hero-title { font-size: clamp(1.3rem, 2.8vw, 1.9rem); max-width: 760px; } .editorial-hero--solo .editorial-hero-excerpt { max-width: 640px; } /* Hero: no featured image — gradient placeholder with subtle decoration */ .editorial-hero-main--no-img { background: linear-gradient(160deg, #1c3355 0%, #102240 45%, #0b1829 100%); } .editorial-hero-main--no-img::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 50% at 82% 18%, rgba(232,48,74,0.11) 0%, transparent 65%), radial-gradient(ellipse 45% 55% at 12% 78%, rgba(55,138,221,0.09) 0%, transparent 65%); pointer-events: none; z-index: 0; } .editorial-hero-main--no-img .editorial-hero-overlay { z-index: 1; background: linear-gradient(to top, rgba(9,14,26,0.98) 0%, rgba(9,14,26,0.65) 55%, transparent 100%); } .editorial-hero-sidebar { display: flex; flex-direction: column; gap: 10px; } .editorial-hero-sidebar .editorial-side-card:nth-child(4) { display: none; } .editorial-side-card { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: start; flex: 1; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 14px rgba(0,0,0,0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .editorial-side-card:hover { border-color: rgba(255,255,255,0.16); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 24px rgba(0,0,0,0.35); } .editorial-side-card-img { width: 88px; height: 68px; border-radius: 8px; object-fit: cover; display: block; } .editorial-side-card-tag { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .editorial-side-card-title { font-family: var(--font-display); font-size: var(--btn-size); font-weight: 800; color: var(--color-heading); line-height: 1.2; margin-bottom: 6px; } .editorial-side-card-footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .editorial-side-card-date { font-size: var(--badge-size); color: rgba(240,244,248,0.48); } .editorial-side-card-date-dot { width: 2px; height: 2px; border-radius: 50%; background: rgba(240,244,248,0.2); flex-shrink: 0; } .editorial-side-card-author { display: flex; align-items: center; gap: 5px; } .editorial-side-card-author-img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.1); } .editorial-side-card-author-name { font-size: var(--badge-size); font-weight: 600; color: rgba(240,244,248,0.55); } .ed-tag-ggl { background: rgba(232,48,74,0.12); color: #E8304A; } .ed-tag-bgh { background: rgba(245,166,35,0.12); color: #F5A623; } .ed-tag-markt { background: rgba(55,138,221,0.1); color: #378ADD; } .ed-tag-interview { background: rgba(29,184,123,0.1); color: #1DB87B; } .ed-tag-video { background: rgba(168,85,247,0.1); color: #A855F7; } .editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; } .ed-filter-hide { display: none !important; } .ed-filter-show { animation: edFadeIn 0.3s ease both; } @keyframes edFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .editorial-card { background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 14px rgba(0,0,0,0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .editorial-card:hover { border-color: rgba(255,255,255,0.16); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 32px rgba(0,0,0,0.4); } .editorial-card-img { width: 100%; height: 180px; object-fit: cover; display: block; } .editorial-card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; } .editorial-card-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 6px; font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; align-self: flex-start; } .editorial-card-title { font-family: var(--font-display); font-size: var(--h6-size); font-weight: 800; color: var(--color-heading); line-height: 1.2; } .editorial-card-excerpt { font-size: var(--badge-size); color: rgba(240,244,248,0.65); line-height: 1.55; } .editorial-card-footer { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .editorial-card-author-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .editorial-card-author-name { font-size: var(--badge-size); font-weight: 600; color: rgba(240,244,248,0.78); } .editorial-card-footer-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(240,244,248,0.2); } .editorial-card-date { font-size: var(--badge-size); color: rgba(240,244,248,0.50); } .editorial-video-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; } .editorial-video { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; background: #152234; cursor: pointer; } .editorial-video img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.55); transition: filter 0.4s ease, transform 0.4s ease; } .editorial-video:hover img { filter: brightness(0.7); transform: scale(1.02); } .editorial-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; background: rgba(245,166,35,0.92); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #0B1221; font-size: var(--h6-size); box-shadow: 0 8px 32px rgba(245,166,35,0.3); transition: transform 0.25s ease; } .editorial-video:hover .editorial-video-play { transform: translate(-50%, -50%) scale(1.08); } .editorial-video-dur { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.8); color: var(--color-heading); font-size: var(--badge-size); font-weight: 700; padding: 4px 10px; border-radius: 8px; font-family: var(--font-mono); } .editorial-video-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, transparent 100%); } .editorial-video-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 6px; font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .editorial-video-title { font-family: var(--font-display); font-size: var(--body-size); font-weight: 800; color: var(--color-heading); line-height: 1.2; } .editorial-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: rgba(240,244,248,0.78); font-size: var(--table-head-size); line-height: var(--table-head-lh); font-weight: var(--table-head-fw); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; text-decoration: none; } .editorial-more-btn:hover { border-color: rgba(255,255,255,0.2); color: var(--color-heading); background: rgba(255,255,255,0.03); } .editorial-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 56px 24px; border-radius: 16px; border: 1px dashed rgba(255,255,255,0.12); background: rgba(255,255,255,0.02); } .editorial-empty .editorial-empty-icon { font-size: var(--h3-size); color: rgba(240,244,248,0.35); margin-bottom: 4px; } .editorial-empty .editorial-empty-title { font-family: var(--font-display); font-size: var(--h5-size); font-weight: 800; color: var(--color-heading); } .editorial-empty .editorial-empty-text { font-size: var(--body-size); color: rgba(240,244,248,0.6); line-height: 1.6; max-width: 420px; } @media (min-width: 768px) { .editorial-heading { font-size: var(--h1-size); } } @media (max-width: 1023px) { .editorial-hero { grid-template-columns: 1fr; } .editorial-hero-sidebar { flex-direction: row; overflow-x: auto; } .editorial-side-card { min-width: 280px; } .editorial-grid { grid-template-columns: 1fr 1fr; } .editorial-video-row { grid-template-columns: 1fr; } .editorial-trust-strip { width: 100%; justify-content: center; flex-wrap: wrap; row-gap: 12px; } } @media (max-width: 767px) { .editorial { padding: var(--space-lg) 0; } .editorial-heading { font-size: var(--h1-size); } .editorial-header-top { flex-direction: column; align-items: flex-start; gap: 18px; } .editorial-header-bottom { flex-direction: column; align-items: stretch; gap: 16px; } .editorial-hero-title { font-size: var(--h5-size); } .editorial-hero-sidebar { flex-direction: column; } .editorial-side-card { min-width: 0; } .editorial-grid { grid-template-columns: 1fr; } .editorial-tabs { flex-wrap: wrap; } .editorial-trust-strip { padding: 12px 14px; gap: 10px; } .ed-trust-item strong { font-size: var(--body-size); } .ed-trust-item span { font-size: var(--badge-size); letter-spacing: 0.4px; } .ed-trust-divider { height: 18px; } .ed-author-pill-info { display: none; } .ed-author-pill-lead .ed-author-pill-info { display: flex; } .editorial-footer { flex-direction: column; align-items: stretch; } .editorial-verify { justify-content: flex-start; } .editorial-more-btn { width: 100%; justify-content: center; } } /* ══════════════════════════════════════════ NEWSLETTER ══════════════════════════════════════════ */ .newsletter { padding: var(--space-lg) 0; background: #0E1A2C; } .newsletter .newsletter-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .newsletter .newsletter-card { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; background: linear-gradient(135deg, rgba(29,184,123,0.1) 0%, rgba(29,184,123,0.03) 40%, rgba(255,255,255,0.015) 100%); border: 1px solid rgba(29,184,123,0.28); border-radius: 28px; padding: 52px 56px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.35), 0 0 80px rgba(29,184,123,0.06); } .newsletter .newsletter-card-accent { position: absolute; top: -120px; right: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(29,184,123,0.35) 0%, transparent 70%); pointer-events: none; } .newsletter .newsletter-card-glow { position: absolute; bottom: -80px; left: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(245,166,35,0.12) 0%, transparent 70%); pointer-events: none; } .newsletter .newsletter-copy { position: relative; z-index: 2; } .newsletter .newsletter-action { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; } .newsletter .newsletter-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(29,184,123,0.18); border: 1px solid rgba(29,184,123,0.4); color: #1DB87B; font-size: var(--h5-size); margin-bottom: 18px; box-shadow: 0 8px 20px rgba(29,184,123,0.15); } .newsletter .newsletter-card-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--badge-size); font-weight: 800; text-transform: uppercase; letter-spacing: 2.2px; color: rgba(29,184,123,0.95); margin-bottom: 14px; } .newsletter .newsletter-card-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #1DB87B; box-shadow: 0 0 8px rgba(29,184,123,0.6); } .newsletter .newsletter-card-title { font-family: var(--font-display); font-size: var(--h2-size); font-weight: 900; line-height: 1.0; letter-spacing: -1.8px; color: var(--color-heading); margin-bottom: 16px; } .newsletter .newsletter-card-title-green { color: #1DB87B; font-style: italic; } .newsletter .newsletter-card-desc { font-size: var(--label-size); color: rgba(240,244,248,0.88); line-height: 1.65; margin-bottom: 26px; } .newsletter .newsletter-stats { display: flex; align-items: center; gap: 18px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.07); } .newsletter .newsletter-stat { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; } .newsletter .newsletter-stat strong { font-family: var(--font-display); font-size: var(--h5-size); font-weight: 900; color: var(--color-heading); letter-spacing: -0.3px; } .newsletter .newsletter-stat span { font-size: var(--badge-size); font-weight: 700; color: rgba(240,244,248,0.72); text-transform: uppercase; letter-spacing: 0.6px; } .newsletter .newsletter-stat-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.08); } .newsletter .newsletter-form { position: relative; display: flex; gap: 6px; padding: 6px; background: rgba(11,18,33,0.6); border: 1px solid rgba(255,255,255,0.12); border-radius: 100px; transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .newsletter .newsletter-form:focus-within { border-color: rgba(29,184,123,0.6); background: rgba(11,18,33,0.8); box-shadow: 0 0 0 4px rgba(29,184,123,0.14), 0 8px 24px rgba(0,0,0,0.25); } .newsletter .newsletter-input { flex: 1; min-width: 0; padding: 14px 22px; background: transparent; border: none; color: var(--color-heading); font-size: var(--label-size); font-family: inherit; outline: none; } .newsletter .newsletter-input::placeholder { color: rgba(240,244,248,0.65); } .newsletter .newsletter-submit { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: #1DB87B; border: none; border-radius: 100px; color: var(--color-heading); font-size: var(--label-size); font-weight: 800; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; font-family: inherit; box-shadow: 0 8px 22px rgba(29,184,123,0.3); } .newsletter .newsletter-submit:hover { background: #22E88F; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(29,184,123,0.45); } .newsletter .newsletter-submit i { font-size: var(--badge-size); } .newsletter .newsletter-trust { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--badge-size); color: rgba(240,244,248,0.78); } .newsletter .newsletter-trust span { display: inline-flex; align-items: center; gap: 6px; } .newsletter .newsletter-trust i { color: rgba(29,184,123,0.8); font-size: var(--badge-size); } .newsletter .newsletter-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (min-width: 1024px) { .newsletter .newsletter-card-title { font-size: var(--h2-size); } } @media (max-width: 899px) { .newsletter { padding: var(--space-lg) 28px; } .newsletter .newsletter-card { grid-template-columns: 1fr; gap: 32px; padding: 44px 36px; text-align: center; } .newsletter .newsletter-copy { display: flex; flex-direction: column; align-items: center; } .newsletter .newsletter-card-title { font-size: var(--h3-size); } .newsletter .newsletter-card-desc { max-width: 520px; } .newsletter .newsletter-stats { justify-content: center; } .newsletter .newsletter-trust { justify-content: center; } } @media (max-width: 600px) { .newsletter { padding: var(--space-md) 18px; } .newsletter .newsletter-card { padding: 36px 24px 30px; border-radius: 22px; gap: 28px; } .newsletter .newsletter-card-title { font-size: var(--h4-size); } .newsletter .newsletter-card-desc { font-size: var(--label-size); } .newsletter .newsletter-stats { gap: 12px; padding-top: 18px; flex-wrap: wrap; } .newsletter .newsletter-stat strong { font-size: var(--body-size); } .newsletter .newsletter-stat span { font-size: var(--badge-size); letter-spacing: 0.4px; } .newsletter .newsletter-stat-divider { height: 22px; } .newsletter .newsletter-form { flex-direction: column; border-radius: 18px; padding: 8px; gap: 6px; } .newsletter .newsletter-submit { width: 100%; justify-content: center; border-radius: 14px; padding: 14px 20px; } .newsletter .newsletter-input { padding: 12px 14px; text-align: center; } .newsletter .newsletter-trust { gap: 12px; font-size: var(--badge-size); } } @media (max-width: 389px) { .newsletter { padding: 48px 14px; } } /* ══════════════════════════════════════════ STORY — ECHTE FÄLLE ══════════════════════════════════════════ */ .story-cases { padding: 120px 0; background: #0B1221; position: relative; min-height: 100vh; display: flex; align-items: center; } .story-cases-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; width: 100%; } .story-cases-head { max-width: 720px; margin: 0 auto 56px; text-align: center; } .story-cases-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--badge-size); font-weight: 800; text-transform: uppercase; letter-spacing: 2.5px; color: rgba(232,48,74,0.85); margin-bottom: 18px; } .story-cases-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #E8304A; } .story-cases-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: 900; line-height: 0.98; letter-spacing: -1.5px; color: var(--color-heading); margin-bottom: 18px; } .story-cases-heading-red { color: #E8304A; font-style: italic; } .story-cases-intro { font-size: var(--btn-size); color: rgba(240,244,248,0.55); line-height: 1.65; } .story-cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .case-card { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; } .case-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.08); transition: background 0.3s ease; } /* Farb-Akzent am oberen Rand entfernt - Farbcodierung via Avatar-Kreis + Tag */ .case-card:hover { border-color: rgba(255,255,255,0.14); transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,0.3); } .case-card-top { display: flex; align-items: center; gap: 12px; } .case-card-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, rgba(245,166,35,0.25) 0%, rgba(232,48,74,0.2) 100%); border: 1px solid rgba(245,166,35,0.3); color: var(--color-heading); font-family: var(--font-display); font-size: var(--label-size); font-weight: 900; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.5px; } .case-card-ident { flex: 1; min-width: 0; } .case-card-name { font-family: var(--font-display); font-size: var(--body-size); font-weight: 800; color: var(--color-heading); text-transform: uppercase; letter-spacing: 0.3px; line-height: 1; margin-bottom: 4px; } .case-card-meta { font-size: var(--badge-size); color: rgba(240,244,248,0.65); } .case-card-tag { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; font-size: var(--badge-size); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; } .case-tag-loss { background: rgba(232,48,74,0.12); color: #E8304A; } .case-tag-switch { background: rgba(245,166,35,0.12); color: #F5A623; } .case-tag-legal { background: rgba(55,138,221,0.12); color: #378ADD; } .case-card-loss .case-card-avatar { background: rgba(232,48,74,0.15); border-color: rgba(232,48,74,0.45); color: #E8304A; } .case-card-switch .case-card-avatar { background: rgba(245,166,35,0.15); border-color: rgba(245,166,35,0.45); color: #F5A623; } .case-card-legal .case-card-avatar { background: rgba(55,138,221,0.15); border-color: rgba(55,138,221,0.45); color: #378ADD; } .case-card-block { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.04); } .case-card-block-good { background: rgba(29,184,123,0.05); border-color: rgba(29,184,123,0.15); } .case-card-label { font-size: var(--badge-size); font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(240,244,248,0.72); display: inline-flex; align-items: center; gap: 5px; } .case-card-label-good { color: #1DB87B; } .case-card-label-good i { font-size: var(--badge-size); } .case-card-block p { font-size: var(--badge-size); color: rgba(240,244,248,0.88); line-height: 1.55; margin: 0; } .case-card-block strong { color: rgba(240,244,248,0.92); font-weight: 700; } .case-card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--badge-size); font-weight: 700; color: rgba(240,244,248,0.7); padding: 10px 4px 4px; border-top: 1px solid rgba(255,255,255,0.06); transition: color 0.2s ease, gap 0.2s ease; text-decoration: none; } .case-card-link:hover { color: var(--color-heading); gap: 12px; } .case-card-link i { font-size: var(--badge-size); } .story-cases-disclaimer { margin-top: 32px; padding: 14px 18px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; font-size: var(--badge-size); color: rgba(240,244,248,0.72); line-height: 1.5; display: flex; align-items: flex-start; gap: 10px; } .story-cases-disclaimer i { color: rgba(245,166,35,0.55); font-size: var(--badge-size); flex-shrink: 0; margin-top: 1px; } @media (min-width: 768px) { .story-cases-heading { font-size: var(--h1-size); } } @media (max-width: 1023px) { .story-cases { padding: 80px 0; } .journey { padding: 80px 0; } .story-cases-heading { font-size: var(--h3-size); } .story-cases-grid { display: flex; flex-direction: row; overflow-x: auto; gap: 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: rgba(245,166,35,0.4) rgba(255,255,255,0.06); } .story-cases-grid::-webkit-scrollbar { height: 3px; } .story-cases-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 2px; } .story-cases-grid::-webkit-scrollbar-thumb { background: rgba(245,166,35,0.45); border-radius: 2px; } .case-card { min-width: 300px; max-width: 340px; flex-shrink: 0; scroll-snap-align: start; } .cases-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; } .cases-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.18); border: none; padding: 0; cursor: pointer; transition: background 0.25s ease, transform 0.25s ease; flex-shrink: 0; } .cases-dot.is-active { background: #F5A623; transform: scale(1.25); } } @media (max-width: 767px) { .story-cases { padding: 60px 0; } .journey { padding: 80px 0; } .story-cases-head { margin-bottom: 32px; } .story-cases-heading { font-size: var(--h2-size); } .story-cases-intro { font-size: var(--label-size); } .case-card { min-width: 280px; max-width: 85vw; padding: 22px; gap: 14px; } .case-card-tag { padding: 3px 8px; font-size: var(--badge-size); } .case-card-name { font-size: var(--btn-size); } } /* ══════════════════════════════════════════ STORY — UNSERE GESCHICHTE ══════════════════════════════════════════ */ .story-mission { padding: var(--space-lg) 0; background: #0E1A2C; position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; } .story-mission-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; width: 100%; } .story-mission-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; } .story-mission-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--badge-size); font-weight: 800; text-transform: uppercase; letter-spacing: 2.5px; color: rgba(29,184,123,0.9); margin-bottom: 18px; } .story-mission-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #1DB87B; } .story-mission-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: 900; line-height: 0.98; letter-spacing: -1.5px; color: var(--color-heading); margin-bottom: 28px; } .story-mission-heading-green { color: #1DB87B; font-style: italic; } .story-mission-text { font-size: var(--btn-size); color: rgba(240,244,248,0.82); line-height: 1.7; margin-bottom: 18px; } .story-mission-text strong { color: rgba(240,244,248,0.92); font-weight: 700; } .story-mission-quote { position: relative; margin: 32px 0 0; padding: 24px 28px 22px; background: rgba(29,184,123,0.05); border-left: 3px solid #1DB87B; border-radius: 0 14px 14px 0; } .story-mission-quote-mark { position: absolute; top: 16px; right: 20px; font-size: var(--h4-size); color: rgba(29,184,123,0.18); line-height: 1; } .story-mission-quote p { font-family: var(--font-display); font-size: var(--h5-size); font-style: italic; font-weight: 600; color: var(--color-heading); line-height: 1.35; margin: 0 0 10px; letter-spacing: -0.2px; } .story-mission-quote cite { display: block; font-size: var(--badge-size); font-style: normal; font-weight: 700; color: rgba(29,184,123,0.85); text-transform: uppercase; letter-spacing: 1.2px; } .story-mission-milestones { list-style: none; padding: 0; margin: 0; position: relative; } .story-mission-milestones::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 7px; width: 2px; background: linear-gradient(180deg, rgba(29,184,123,0.5) 0%, rgba(245,166,35,0.4) 50%, rgba(232,48,74,0.4) 100%); border-radius: 2px; transform: scaleY(0); transform-origin: top center; transition: transform 1.3s cubic-bezier(0.22,0.61,0.36,1) 0.1s; } .story-mission-milestones.revealed::before { transform: scaleY(1); } .story-mission-milestones.section-reveal { opacity: 1; transform: none; } .milestone { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding-left: 36px; padding-bottom: 28px; } .milestone:last-child { padding-bottom: 0; } .milestone-marker { position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #0E1A2C; border: 2px solid #1DB87B; box-shadow: 0 0 0 4px rgba(29,184,123,0.15); } .milestone:nth-child(2) .milestone-marker { border-color: #F5A623; box-shadow: 0 0 0 4px rgba(245,166,35,0.15); } .milestone:nth-child(3) .milestone-marker { border-color: #E8304A; box-shadow: 0 0 0 4px rgba(232,48,74,0.15); } .milestone:nth-child(4) .milestone-marker { border-color: #3B82F6; box-shadow: 0 0 0 4px rgba(59,130,246,0.15); } .milestone:nth-child(5) .milestone-marker { border-color: #FFFFFF; box-shadow: 0 0 0 4px rgba(255,255,255,0.15); } .milestone-year { font-family: var(--font-display); font-size: var(--h3-size); font-weight: var(--h3-fw); color: var(--color-heading); line-height: 1; letter-spacing: -1px; align-self: start; } .milestone:nth-child(1) .milestone-year { color: #1DB87B; } .milestone:nth-child(2) .milestone-year { color: #F5A623; } .milestone:nth-child(3) .milestone-year { color: #E8304A; } .milestone:nth-child(4) .milestone-year { color: #3B82F6; } .milestone:nth-child(5) .milestone-year { color: #FFFFFF; } .milestone-body { } .milestone-title { font-family: var(--font-display); font-size: var(--h6-size); font-weight: 800; color: var(--color-heading); text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 8px; } .milestone-text { font-size: var(--label-size); color: rgba(240,244,248,0.55); line-height: 1.6; margin: 0; } .milestone-text strong { color: rgba(240,244,248,0.88); font-weight: 700; } @media (min-width: 768px) { .story-mission-heading { font-size: var(--h1-size); } } @media (max-width: 1023px) { .story-mission { padding: 90px 0; } .story-mission-grid { grid-template-columns: 1fr; gap: 56px; } .story-mission-heading { font-size: var(--h3-size); } } @media (max-width: 767px) { .story-mission { padding: var(--space-lg) 20px; } .story-mission-heading { font-size: var(--h1-size); margin-bottom: 20px; } .story-mission-text { font-size: var(--label-size); } .story-mission-quote { padding: 18px 22px; } .story-mission-quote p { font-size: var(--body-size); } .milestone { grid-template-columns: 60px 1fr; gap: 14px; padding-left: 30px; padding-bottom: 22px; } .milestone-year { font-size: var(--h4-size); } .milestone-title { font-size: var(--body-size); } .milestone-text { font-size: var(--badge-size); } } /* ══════════════════════════════════════════ ZONE C: ADDON SHOWCASE - Ikke Hüftgold ══════════════════════════════════════════ */ /* ADDON SHOWCASE - Ikke Hüftgold */ .addon-showcase-section { padding: var(--space-lg) 0; background: #0E1A2C; overflow: hidden; } .addon-showcase-section .addon-wrap { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .addon-showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .addon-showcase-content { display: flex; flex-direction: column; } .addon-showcase-badge { display: none !important; } align-items: center; gap: 8px; background: linear-gradient(135deg, rgba(245,166,35,0.15) 0%, rgba(245,166,35,0.05) 100%); color: #F5A623; padding: 8px 18px; border-radius: 50px; font-size: var(--badge-size); line-height: var(--badge-lh); font-weight: var(--badge-fw); width: fit-content; margin-bottom: 24px; border: 1px solid rgba(245,166,35,0.2); } .addon-showcase-badge svg { width: 16px; height: 16px; } .addon-showcase-badge i { font-size: var(--label-size); } .addon-showcase-content h2 { font-family: var(--font-display); font-size: var(--h2-size); font-weight: 900; line-height: 0.95; letter-spacing: -2px; color: var(--color-heading); margin-bottom: 20px; } .addon-showcase-content h2 span { color: #F5A623; font-style: italic; } .addon-showcase-content > p { font-size: var(--body-size); color: rgba(240,244,248,0.72); line-height: 1.7; max-width: 480px; margin-bottom: 32px; } .addon-showcase-content > p:has(.addon-download-btn) { max-width: none; } .addon-features-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; } .addon-feature-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.2s ease, background 0.2s ease; } .addon-feature-card:hover { border-color: rgba(245,166,35,0.2); background: rgba(255,255,255,0.04); } .addon-feature-card-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(245,166,35,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .addon-feature-card-icon svg { width: 20px; height: 20px; color: #F5A623; stroke: #F5A623; } .addon-feature-card-text h3 { font-size: var(--label-size); font-weight: 700; color: var(--color-heading); margin-bottom: 2px; } .addon-feature-card-text p { font-size: var(--badge-size); color: rgba(240,244,248,0.65); line-height: 1.4; } .addon-download-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: 12px; background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.3); color: #F5A623; font-size: var(--label-size); font-weight: 700; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; margin-bottom: 12px; width: 100%; } .addon-download-btn:hover { background: rgba(245,166,35,0.2); border-color: rgba(245,166,35,0.5); transform: translateY(-1px); } .addon-download-btn svg { width: 24px; height: 24px; flex-shrink: 0; } .addon-download-btn-soon { cursor: default; pointer-events: none; } .addon-download-btn-soon:hover { background: rgba(245,166,35,0.12); border-color: rgba(245,166,35,0.3); transform: none; } .addon-download-btn-soon-tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 100px; background: rgba(11,18,33,0.35); border: 1px solid rgba(245,166,35,0.45); color: #F5A623; font-size: var(--badge-size); font-weight: 700; letter-spacing: 0.4px; margin-left: 8px; } .addon-platforms { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; } .addon-platforms-label { font-size: var(--badge-size); color: rgba(240,244,248,0.48); font-weight: 600; width: 100%; margin-bottom: 2px; } .addon-platform-pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); color: rgba(240,244,248,0.82); font-size: var(--badge-size); line-height: var(--badge-lh); font-weight: var(--badge-fw); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; cursor: pointer; text-decoration: none; flex: 1; } .addon-platform-pill:hover { border-color: rgba(245,166,35,0.35); color: rgba(240,244,248,0.9); background: rgba(255,255,255,0.06); } .addon-platform-pill i { font-size: var(--label-size); opacity: 0.7; } .addon-platform-pill:hover i { opacity: 1; } .addon-platform-soon { opacity: 0.3; cursor: default; pointer-events: none; } .addon-platform-soon span { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(240,244,248,0.50); background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 4px; margin-left: 2px; } .addon-stats-inline { display: flex; gap: 32px; } .addon-stat-item .value { font-family: var(--font-display); font-size: var(--h4-size); font-weight: 900; color: #F5A623; line-height: 1; } .addon-stat-item .label { font-size: var(--badge-size); color: rgba(240,244,248,0.52); margin-top: 4px; } /* Ikke Visual Stage */ .addon-visual-stage { position: relative; min-height: 580px; } .ikke-hero { position: relative; z-index: 2; cursor: pointer; } .ikke-hero-glow { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 400px; height: 400px; background: radial-gradient(circle, rgba(245,166,35,0.2) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 0; } .ikke-hero-img { position: relative; z-index: 1; width: 100%; max-width: 480px; height: auto; border-radius: 24px; object-fit: cover; box-shadow: 0 32px 64px rgba(0,0,0,0.3), 0 0 0 3px rgba(245,166,35,0.25); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease; } .ikke-hero:hover .ikke-hero-img { transform: scale(1.02); box-shadow: 0 36px 72px rgba(0,0,0,0.35), 0 0 0 3px rgba(245,166,35,0.5); } .ikke-hero-name-tag { position: absolute; bottom: 20px; left: 20px; z-index: 3; background: rgba(11,18,33,0.9); backdrop-filter: blur(12px); padding: 12px 20px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 2px; } .ikke-hero-name-tag-top { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.1); } .ikke-hero-name-tag-logo { height: 20px; width: auto; display: block; border-radius: 2px; } .ikke-hero-name-tag strong { font-size: var(--btn-size); color: var(--color-heading); font-weight: 700; } .ikke-hero-name-tag span { font-size: var(--badge-size); color: #F5A623; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* Speech Bubble */ .ikke-speech-bubble { position: absolute; top: 20px; right: -20px; z-index: 5; max-width: 260px; animation: floatBubble 4s ease-in-out infinite; } @keyframes floatBubble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .ikke-speech-bubble-content { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 18px; padding: 18px 22px; box-shadow: 0 12px 40px rgba(0,0,0,0.18); } .ikke-speech-bubble-text { font-size: var(--card-meta-size); font-weight: var(--card-meta-fw); color: rgba(15,25,40,0.82); line-height: var(--card-meta-lh); font-style: italic; } .ikke-speech-bubble-arrow { position: absolute; bottom: -10px; left: 40px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #ffffff; font-size: 0; } /* Browser Mockup Float */ .addon-browser-float { position: absolute; bottom: 20px; right: -40px; z-index: 4; width: 320px; background: linear-gradient(135deg, #1E3A5F 0%, #0F172A 100%); border-radius: 16px; padding: 16px; box-shadow: 0 24px 48px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); transition: transform 0.3s ease; } .addon-browser-float:hover { transform: translateY(-4px); } .browser-header { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(0,0,0,0.2); border-radius: 8px 8px 0 0; } .browser-dots { display: flex; gap: 6px; } .browser-dot { width: 8px; height: 8px; border-radius: 50%; } .browser-dot.red { background: #ff5f57; } .browser-dot.yellow { background: #febc2e; } .browser-dot.green { background: #28c840; } .browser-url { flex: 1; font-size: var(--badge-size); color: rgba(240,244,248,0.78); background: rgba(255,255,255,0.06); padding: 5px 10px; border-radius: 4px; display: flex; align-items: center; gap: 6px; } .screenshot-container { overflow: hidden; border-radius: 0 0 4px 4px; } .screenshot-slides { display: flex; transition: transform 0.6s ease; } .screenshot-slide { flex: 0 0 100%; } .screenshot-real { position: relative; aspect-ratio: 16/10; overflow: hidden; } .screenshot-real-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .screenshot-overlay-badge { position: absolute; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 10px; gap: 6px; } .screenshot-overlay-badge.overlay-success { background: linear-gradient(180deg, transparent 0%, rgba(16,185,129,0.85) 100%); } .screenshot-overlay-badge.overlay-danger { background: linear-gradient(180deg, transparent 0%, rgba(239,68,68,0.85) 100%); } .screenshot-overlay-badge.overlay-info { background: linear-gradient(180deg, transparent 0%, rgba(55,138,221,0.85) 100%); } .screenshot-overlay-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; } .screenshot-overlay-icon svg { width: 24px; height: 24px; stroke: white; } .screenshot-overlay-icon.overlay-icon-danger svg { stroke: white; } .screenshot-overlay-icon.overlay-icon-info svg { stroke: white; } .screenshot-overlay-badge span { font-size: var(--badge-size); font-weight: 700; color: var(--color-heading); } @media (max-width: 1100px) { .addon-showcase-grid { grid-template-columns: 1fr; gap: 48px; } .addon-visual-stage { min-height: 500px; } .addon-browser-float { right: 0; } } @media (max-width: 767px) { .addon-showcase-section { padding: var(--space-md) 0 32px; } .addon-showcase-section .addon-wrap { padding: 0 24px; } .addon-showcase-content h2 { font-size: var(--h1-size); } .addon-stats-inline { flex-wrap: wrap; gap: 24px; } .addon-visual-stage { min-height: auto; } .ikke-hero-img { max-width: 100%; } .ikke-speech-bubble { position: absolute; top: -28px; right: 12px; max-width: 180px; margin-top: 0; } .addon-browser-float { position: relative; bottom: auto; right: auto; width: 100%; margin-top: 20px; margin-bottom: 28px; } .addon-download-btn { padding: 12px 18px; gap: 8px; font-size: var(--badge-size); flex-wrap: wrap; } .addon-download-btn-soon-tag { margin-left: 0; padding: 2px 8px; font-size: 11px; letter-spacing: 0.4px; white-space: nowrap; flex-shrink: 0; } .shuffle-section { padding: 32px 24px var(--space-md); } .shuffle-section .shuffle-inner { gap: 24px; } .shuffle-section .shuffle-heading { font-size: var(--h2-size); letter-spacing: -1px; line-height: 1.05; } .shuffle-section .shuffle-text { font-size: var(--label-size); margin-bottom: 22px; } .shuffle-section .shuffle-cta { padding: 11px 22px; font-size: var(--badge-size); } .ikke-speech-bubble { display: none; } .ikke-hero { width: 100%; max-width: 100%; border-radius: 16px; overflow: hidden; margin-top: 20px; } } /* ══════════════════════════════════════════ RESPONSIVE: TABLET (max 1023px) ══════════════════════════════════════════ */ @media (max-width: 1023px) { .top-providers .top-providers-inner { padding: 0 24px; } .top-providers .top-providers-slider { padding: 40px 24px; } .top-providers .top-providers-heading { font-size: var(--h1-size); } .top-providers .top-providers-link span { display: none; } .top-providers .top-providers-link i { display: none; } } /* ══════════════════════════════════════════ RESPONSIVE: MOBILE (max 767px) ══════════════════════════════════════════ */ @media (max-width: 767px) { .hero .hero-sub { font-size: var(--label-size); margin-bottom: 28px; } .hero .hero-cta { padding: 14px 28px; font-size: var(--label-size); } .hero .hero-card-play { width: 56px; height: 56px; font-size: var(--body-size); } .hero .hero-card-title { font-size: var(--h6-size); } .hero .hero-card-quote p { font-size: var(--body-size); } .hero .hero-card-quote-mark { font-size: var(--h6-size); margin-bottom: 5px; } .hero .hero-card-label { font-size: var(--badge-size); } .hero .hero-card-author-name { font-size: var(--badge-size); } .hero .hero-card-author-role { font-size: var(--badge-size); } .hero .hero-card-overlay { padding: 24px 20px; } .top-providers { padding: var(--space-md) 0 var(--space-lg); } .top-providers .top-providers-inner { padding: 0 16px; } .top-providers .top-providers-slider { padding: 36px 16px; } .top-providers .top-providers-heading { font-size: var(--h4-size); } .top-providers .top-providers-header { margin-bottom: 24px; } .top-providers .top-providers-header-right { display: none; } .top-providers .provider-card { padding: 20px; gap: 12px; } .top-providers .provider-card-rank { font-size: var(--h2-size); top: 10px; right: 12px; } .top-providers .provider-card-logo { height: 36px; padding: 5px 10px; } .top-providers .provider-card-logo-img { max-width: 110px; } .top-providers .provider-rating-num { font-size: var(--h5-size); } .top-providers .provider-rating-stars { font-size: var(--badge-size); } .top-providers .provider-card-features { font-size: var(--badge-size); } .top-providers .provider-card-cta { padding: 10px 16px; font-size: var(--badge-size); } .moments { padding: var(--space-lg) 0; } .moments .moment-heading { font-size: var(--h1-size); } } /* ══════════════════════════════════════════ RESPONSIVE: SMALL MOBILE (max 389px) ══════════════════════════════════════════ */ @media (max-width: 389px) { .hero { padding: 104px 0 48px; } .hero .hero-headline { font-size: var(--h1-size); } .hero .hero-stat-num { font-size: var(--h4-size); } .hero .hero-stat-label { font-size: var(--badge-size); } .hero .hero-cta { padding: 12px 24px; font-size: var(--badge-size); } .top-providers .top-providers-inner { padding: 0 12px; } .top-providers .top-providers-slider { padding: 32px 12px; } .top-providers .top-providers-heading { font-size: var(--h4-size); } .moments { padding: var(--space-md) 12px; } .site-footer { padding: 36px 12px; } } /* —— Hero Typewriter —— */ .hero-typewriter-cursor { display: inline-block; width: 3px; height: 0.85em; background: #E8304A; margin-left: 4px; vertical-align: middle; animation: twBlink 0.8s ease-in-out infinite; } @keyframes twBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } } /* —— Hero Ticker —— */ .hero-ticker { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; overflow: hidden; max-width: 480px; animation: heroFadeUp 0.6s 0.28s ease-out both; } .hero-ticker-label { font-size: var(--badge-size); font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: #E8304A; flex-shrink: 0; display: flex; align-items: center; gap: 6px; } @keyframes livePulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(232,48,74,0.5); } 50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(232,48,74,0); } } .hero-ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: #E8304A; animation: livePulse 1.5s ease-in-out infinite; } .hero-ticker-track { flex: 1; overflow: hidden; position: relative; height: 20px; } .hero-ticker-inner { display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1); } .hero-ticker-item { font-size: var(--badge-size); color: rgba(240,244,248,0.82); line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero-ticker-item strong { color: rgba(240,244,248,0.9); font-weight: 600; } /* —— Story Progress Bar —— */ .story-progress-bar { position: fixed; top: calc(72px + var(--td-h)); left: 0; right: 0; z-index: 199; height: 56px; background: rgba(11,18,33,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; padding: 0 24px; opacity: 0; transform: translateY(-56px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .story-progress-bar.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .story-progress-bar .spb-inner { display: flex; align-items: center; gap: 4px; max-width: 1400px; width: 100%; justify-content: center; overflow-x: auto; scrollbar-width: none; } .story-progress-bar .spb-inner::-webkit-scrollbar { display: none; } .story-phase-dot { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: rgba(240,244,248,0.55); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; white-space: nowrap; flex-shrink: 0; } .story-phase-dot:hover { background: rgba(255,255,255,0.05); color: rgba(240,244,248,0.85); } .story-phase-dot.active { color: var(--color-heading); background: rgba(255,255,255,0.08); } .spb-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--badge-size); } .story-phase-dot-label { font-size: var(--badge-size); font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; } @media (max-width: 1023px) { .story-progress-bar { top: calc(64px + var(--td-h)); height: 48px; transform: translateY(-48px); } .story-phase-dot-label { display: none; } .story-phase-dot { padding: 8px 10px; } } @media (max-width: 767px) { .story-progress-bar { display: none; } } /* —— Scroll Animations —— */ .section-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.22,0.61,0.36,1), transform 0.8s cubic-bezier(0.22,0.61,0.36,1); } .section-reveal.revealed { opacity: 1; transform: translateY(0); } /* Staggered children — fade up one by one */ .stagger-children > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.22,0.61,0.36,1), transform 0.6s cubic-bezier(0.22,0.61,0.36,1); } .stagger-children.revealed > *:nth-child(1) { transition-delay: 0s; } .stagger-children.revealed > *:nth-child(2) { transition-delay: 0.1s; } .stagger-children.revealed > *:nth-child(3) { transition-delay: 0.12s; } .stagger-children.revealed > *:nth-child(4) { transition-delay: 0.18s; } .stagger-children.revealed > *:nth-child(5) { transition-delay: 0.24s; } .stagger-children.revealed > *:nth-child(6) { transition-delay: 0.3s; } .stagger-children.revealed > * { opacity: 1; transform: translateY(0); } /* Slide from left */ .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s cubic-bezier(0.22,0.61,0.36,1), transform 0.7s cubic-bezier(0.22,0.61,0.36,1); } .reveal-left.revealed { opacity: 1; transform: translateX(0); } /* Slide from right */ .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s cubic-bezier(0.22,0.61,0.36,1), transform 0.7s cubic-bezier(0.22,0.61,0.36,1); } .reveal-right.revealed { opacity: 1; transform: translateX(0); } /* Scale up */ .reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.7s cubic-bezier(0.22,0.61,0.36,1), transform 0.7s cubic-bezier(0.22,0.61,0.36,1); } .reveal-scale.revealed { opacity: 1; transform: scale(1); } /* Soft gradient divider between sections */ .section-divider { height: 120px; background: linear-gradient(180deg, transparent 0%, rgba(14,26,44,0.5) 40%, rgba(11,18,33,0.5) 60%, transparent 100%); pointer-events: none; margin: -60px 0; position: relative; z-index: 1; } .section-divider-glow { height: 1px; background: linear-gradient(90deg, transparent 10%, rgba(245,166,35,0.15) 50%, transparent 90%); position: absolute; top: 50%; left: 0; right: 0; } .section-divider--soft { height: 64px; margin: -32px 0; background: none; } .section-divider--soft .section-divider-glow { background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.05) 50%, transparent 75%); } /* Parallax image */ .parallax-img { transition: transform 0.1s linear; will-change: transform; } /* ══════════════════════════════════════════ CASINO REVIEWS ══════════════════════════════════════════ */ .casino-reviews { padding: var(--space-lg) 0; background: #0B1221; } .casino-reviews .reviews-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .casino-reviews .reviews-eyebrow { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .casino-reviews .reviews-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #F5A623; } .casino-reviews .reviews-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-fw); line-height: var(--h2-lh); letter-spacing: -2px; margin-bottom: var(--h2-mb); } .casino-reviews .reviews-heading-gold { color: #F5A623; font-style: italic; } .casino-reviews .reviews-text { font-size: var(--body-size); color: rgba(240,244,248,0.72); line-height: 1.7; max-width: 640px; margin-bottom: 48px; } .casino-reviews .reviews-text strong { color: rgba(240,244,248,0.85); font-weight: 600; } .casino-reviews .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .casino-reviews .review-card { background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .casino-reviews .review-card:hover { border-color: rgba(245,166,35,0.25); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.25); } .casino-reviews .review-card-top { display: flex; align-items: center; gap: 14px; } .casino-reviews .review-card-logo { display: inline-flex; align-items: center; justify-content: center; background: white; border-radius: 10px; padding: 6px 14px; height: 44px; flex-shrink: 0; } .casino-reviews .review-card-logo img { height: 100%; width: auto; max-width: 120px; object-fit: contain; } .casino-reviews .review-card-info { flex: 1; } .casino-reviews .review-card-name { font-family: var(--font-display); font-size: var(--h6-size); font-weight: 800; color: var(--color-heading); text-transform: uppercase; } .casino-reviews .review-card-type { font-size: var(--badge-size); color: rgba(240,244,248,0.58); } .casino-reviews .review-card-rating { display: flex; align-items: center; gap: 8px; } .casino-reviews .review-card-rating-num { font-family: var(--font-display); font-size: var(--h4-size); font-weight: 900; color: #F5A623; line-height: 1; } .casino-reviews .review-card-rating-stars { display: flex; gap: 2px; color: #F5A623; font-size: var(--badge-size); } .casino-reviews .review-card-rating-count { font-size: var(--badge-size); color: rgba(240,244,248,0.52); } .casino-reviews .review-card-desc { font-size: var(--label-size); color: rgba(240,244,248,0.72); line-height: 1.6; } .casino-reviews .review-card-tags { display: flex; gap: 6px; flex-wrap: wrap; } .casino-reviews .review-tag { font-size: var(--badge-size); font-weight: 600; padding: 4px 10px; border-radius: 6px; } .casino-reviews .review-tag-pro { background: rgba(29,184,123,0.1); color: #1DB87B; } .casino-reviews .review-tag-con { background: rgba(232,48,74,0.06); color: rgba(232,48,74,0.6); } .casino-reviews .review-card-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(240,244,248,0.82); font-size: var(--badge-size); font-weight: 700; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; margin-top: auto; } .casino-reviews .review-card-cta:hover { background: rgba(245,166,35,0.1); border-color: rgba(245,166,35,0.3); color: #F5A623; } .casino-reviews .review-card.review-featured { border-color: rgba(245,166,35,0.2); background: rgba(245,166,35,0.04); } .casino-reviews .review-featured-badge { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #F5A623; background: rgba(245,166,35,0.1); padding: 4px 10px; border-radius: 6px; align-self: flex-start; } @media (max-width: 1023px) { .casino-reviews .reviews-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .casino-reviews { padding: var(--space-lg) 24px; } .casino-reviews .reviews-grid { grid-template-columns: 1fr; } .casino-reviews .reviews-heading { font-size: var(--h1-size); } } /* ══════════════════════════════════════════ SPIELBANKEN FEATURED ══════════════════════════════════════════ */ .spielbanken-featured { padding: var(--space-lg) 0; background: #0B1221; } .spielbanken-featured .sf-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .spielbanken-featured .sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .spielbanken-featured .sf-card { position: relative; border-radius: 20px; overflow: hidden; height: 400px; cursor: pointer; } .spielbanken-featured .sf-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, filter 0.5s ease; filter: brightness(0.5); } .spielbanken-featured .sf-card:hover img { transform: scale(1.04); filter: brightness(0.65); } .spielbanken-featured .sf-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px; background: linear-gradient(0deg, rgba(11,18,33,0.9) 0%, transparent 100%); } .spielbanken-featured .sf-card-name { font-family: var(--font-display); font-size: var(--h4-size); font-weight: 900; color: var(--color-heading); text-transform: uppercase; margin-bottom: 4px; } .spielbanken-featured .sf-card-city { font-size: var(--badge-size); color: rgba(240,244,248,0.78); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .spielbanken-featured .sf-card-city i { color: #F5A623; font-size: var(--badge-size); } .spielbanken-featured .sf-card-details { display: flex; gap: 16px; flex-wrap: wrap; } .spielbanken-featured .sf-detail { font-size: var(--badge-size); color: rgba(240,244,248,0.65); display: flex; align-items: center; gap: 5px; } .spielbanken-featured .sf-detail i { color: rgba(245,166,35,0.5); font-size: var(--badge-size); } @media (max-width: 767px) { .spielbanken-featured { padding: var(--space-lg) 24px; } .spielbanken-featured .sf-grid { grid-template-columns: 1fr; } .spielbanken-featured .sf-card { height: 300px; } } /* ══════════════════════════════════════════ JOURNEY / ZEITSTRAHL ══════════════════════════════════════════ */ .journey { padding: 120px 0; background: #0B1221; position: relative; overflow: hidden; } .journey::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(245,166,35,0.06) 0%, transparent 70%); pointer-events: none; } .journey-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; text-align: center; position: relative; z-index: 1; } .journey-eyebrow { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 20px; display: inline-flex; align-items: center; gap: 10px; } .journey-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #F5A623; flex-shrink: 0; } .journey-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-fw); line-height: var(--h2-lh); letter-spacing: -2px; margin-bottom: var(--h2-mb); } .journey-heading-gold { color: #F5A623; font-style: italic; } .journey-text { font-size: var(--body-size); color: rgba(240,244,248,0.78); line-height: 1.7; max-width: 640px; margin: 0 auto 64px; } .journey-timeline { position: relative; padding: 28px 20px 24px; background: transparent; border: 1px solid rgba(245,166,35,0.15); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .journey-timeline::before { content: ''; position: absolute; top: -1px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, rgba(245,166,35,0.5), rgba(245,166,35,0.85), rgba(245,166,35,0.5), transparent); border-radius: 2px; } .journey-track { position: absolute; top: 58px; left: 6%; right: 6%; height: 3px; background: rgba(0,0,0,0.6); border-radius: 2px; z-index: 0; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.8); } .journey-track-fill { position: absolute; left: 0; top: 0; height: 100%; width: var(--timeline-progress, 0%); background: linear-gradient(90deg, #1DB87B 0%, #F5A623 60%, #E8304A 100%); border-radius: 2px; transition: width 0.35s ease; box-shadow: 0 0 10px rgba(245,166,35,0.7), 0 0 20px rgba(245,166,35,0.3); } .journey-nodes { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; list-style: none; padding: 0; margin: 0; z-index: 1; } .journey-node { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; } .journey-node.is-visible { opacity: 1; transform: translateY(0); } .journey-node:nth-child(1).is-visible { transition-delay: 0.05s; } .journey-node:nth-child(2).is-visible { transition-delay: 0.12s; } .journey-node:nth-child(3).is-visible { transition-delay: 0.19s; } .journey-node:nth-child(4).is-visible { transition-delay: 0.26s; } .journey-node:nth-child(5).is-visible { transition-delay: 0.33s; } .journey-node:nth-child(6).is-visible { transition-delay: 0.40s; } .journey-node:nth-child(7).is-visible { transition-delay: 0.47s; } .journey-node a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; padding: 10px 4px; border-radius: 12px; transition: background 0.25s ease; cursor: pointer; } .journey-node a:hover { background: rgba(245,166,35,0.04); } /* Slot reel window */ .journey-node-icon { width: 56px; height: 56px; border-radius: 10px; background: linear-gradient(160deg, #111929 0%, #080d18 100%); border: 1.5px solid rgba(245,166,35,0.22); display: inline-flex; align-items: center; justify-content: center; color: rgba(240,244,248,0.55); font-size: 18px; transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease; position: relative; z-index: 2; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.03), 0 4px 12px rgba(0,0,0,0.4); } .journey-node-icon::after { content: ''; position: absolute; inset: 0; border-radius: 9px; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 50%); pointer-events: none; } .journey-node a:hover .journey-node-icon { border-color: #F5A623; color: #F5A623; transform: translateY(-3px); background: linear-gradient(160deg, #1a2035 0%, #0d1220 100%); box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 16px rgba(245,166,35,0.35), 0 8px 24px rgba(245,166,35,0.2); } .journey-node.is-active .journey-node-icon { border-color: #F5A623; color: #0a0d15; background: linear-gradient(160deg, #f7b733, #e8930a); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 20px rgba(245,166,35,0.6), 0 0 40px rgba(245,166,35,0.25), 0 8px 24px rgba(245,166,35,0.4); animation: journeyPulse 2.4s ease-in-out infinite; } @keyframes journeyPulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 20px rgba(245,166,35,0.6), 0 0 40px rgba(245,166,35,0.25), 0 8px 24px rgba(245,166,35,0.4); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 28px rgba(245,166,35,0.85), 0 0 56px rgba(245,166,35,0.35), 0 8px 24px rgba(245,166,35,0.5); } } .journey-node-label { font-family: var(--font-display); font-size: var(--label-size); font-weight: 800; color: rgba(240,244,248,0.85); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; } .journey-node-desc { font-size: var(--badge-size); font-weight: 500; color: rgba(240,244,248,0.48); line-height: 1.3; } .journey-node a:hover .journey-node-label { color: var(--color-heading); } .journey-node.is-active .journey-node-label { color: #F5A623; } @media (min-width: 768px) { .journey-heading { font-size: var(--h1-size); } } @media (max-width: 1023px) { .journey-heading { font-size: var(--h3-size); } .journey-text { margin-bottom: 48px; } .journey-nodes { grid-template-columns: repeat(4, 1fr); gap: 24px; row-gap: 36px; } .journey-track { display: none; } } @media (max-width: 767px) { .journey { padding: var(--space-md) 0; } .journey-eyebrow { padding: 0 20px; } .journey-heading { font-size: var(--h2-size); padding: 0 20px; } .journey-text { font-size: var(--label-size); margin-bottom: 28px; max-width: 100%; padding: 0 20px; } .journey-timeline { padding: 20px 0 20px; border-radius: 0; border-left: none; border-right: none; overflow: hidden; } .journey-timeline::before { display: none; } .journey-track { display: none; } .journey-nodes { display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 10px; padding: 8px 20px 20px; scrollbar-width: thin; scrollbar-color: rgba(245,166,35,0.4) rgba(255,255,255,0.06); } .journey-nodes::-webkit-scrollbar { height: 3px; } .journey-nodes::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 2px; } .journey-nodes::-webkit-scrollbar-thumb { background: rgba(245,166,35,0.45); border-radius: 2px; } .journey-node { flex-shrink: 0; width: 88px; scroll-snap-align: start; } .journey-node a { gap: 8px; padding: 8px 4px; } .journey-node-icon { width: 64px; height: 64px; font-size: 22px; border-radius: 12px; } .journey-node-label { font-size: 10px; letter-spacing: 0.3px; } .journey-node-desc { display: none; } } @media (prefers-reduced-motion: reduce) { .journey-node { opacity: 1; transform: none; transition: none; } .journey-node.is-active .journey-node-icon { animation: none; } .journey-track-fill { transition: none; } } /* ══════════════════════════════════════════ GAMES DISCOVER ══════════════════════════════════════════ */ .games-discover { padding: var(--space-lg) 0; background: #0B1221; overflow: hidden; } .games-discover-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .games-discover-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; } .games-discover-heading { font-family: var(--font-display); font-size: var(--h4-size); font-weight: 900; color: var(--color-heading); letter-spacing: -0.5px; margin: 0; line-height: 1; } .games-discover-more { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 100px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: rgba(240,244,248,0.75); font-size: var(--badge-size); font-weight: 700; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .games-discover-more:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: var(--color-heading); } .games-discover-more i { font-size: var(--badge-size); opacity: 0.65; } .games-discover-tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; } .games-tab { padding: 8px 18px; border-radius: 100px; background: transparent; border: 1px solid rgba(255,255,255,0.1); color: rgba(240,244,248,0.55); font-size: var(--badge-size); font-weight: 700; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; font-family: inherit; white-space: nowrap; } .games-tab:hover { color: var(--color-heading); border-color: rgba(255,255,255,0.2); } .games-tab.games-tab-active { background: #F5A623; border-color: #F5A623; color: #0B1221; } .games-discover-scroller { position: relative; margin: 0 -40px; padding: 0 40px; } .games-discover-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 176px); gap: 14px; list-style: none; margin: 0; padding: 4px 2px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; } .games-discover-list::-webkit-scrollbar { height: 4px; } .games-discover-list::-webkit-scrollbar-track { background: transparent; } .games-discover-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; } .game-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; transition: transform 0.25s ease; cursor: pointer; } .game-card:hover { transform: translateY(-4px); } .game-card-cover { position: relative; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; box-shadow: 0 8px 22px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.08); transition: box-shadow 0.25s ease, transform 0.25s ease; } .game-card-cover::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18) 0%, transparent 55%), linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.35) 100%); pointer-events: none; z-index: 2; } .game-card-cover.has-img::after { background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45) 100%); } .game-card:hover .game-card-cover { box-shadow: 0 14px 32px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.18); } .game-card-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; transition: transform 0.4s ease; } .game-card:hover .game-card-cover-img { transform: scale(1.05); } .game-card-badge { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); color: var(--color-heading); font-size: var(--badge-size); font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; z-index: 3; } .game-card-cover-emoji { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); font-size: var(--h2-size); line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); z-index: 2; } .game-card-cover-title { position: relative; font-family: var(--font-display); font-size: var(--body-size); font-weight: 900; color: var(--color-heading); line-height: 0.95; text-transform: uppercase; letter-spacing: 0.2px; text-shadow: 0 2px 6px rgba(0,0,0,0.6); z-index: 3; } .game-card-cover.has-img .game-card-cover-emoji, .game-card-cover.has-img .game-card-cover-title { display: none; } .game-card-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; } .game-card-title { font-size: var(--badge-size); font-weight: 700; color: rgba(240,244,248,0.92); line-height: 1.2; } .game-card-provider { font-size: var(--badge-size); color: rgba(240,244,248,0.72); font-weight: 500; } .games-discover-next { position: absolute; right: 8px; top: calc(50% - 22px); transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(15,22,40,0.92); border: 1px solid rgba(255,255,255,0.12); color: rgba(240,244,248,0.8); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--label-size); box-shadow: 0 10px 24px rgba(0,0,0,0.4); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; z-index: 3; } .games-discover-next:hover { background: #F5A623; color: #0B1221; transform: translateY(-50%) scale(1.05); } @media (min-width: 768px) { .games-discover-heading { font-size: var(--h4-size); } .games-discover-list { grid-auto-columns: minmax(180px, 200px); gap: 16px; } .game-card-cover-emoji { font-size: var(--h1-size); } } @media (max-width: 767px) { .games-discover { padding: 64px 20px; } .games-discover-header { margin-bottom: 18px; } .games-discover-heading { font-size: var(--h5-size); } .games-discover-more { padding: 8px 14px; font-size: var(--badge-size); } .games-discover-tabs { gap: 6px; overflow-x: auto; flex-wrap: nowrap; margin-left: -20px; margin-right: -20px; padding: 0 20px 4px; scrollbar-width: none; } .games-discover-tabs::-webkit-scrollbar { display: none; } .games-tab { padding: 7px 14px; font-size: var(--badge-size); } .games-discover-scroller { margin: 0 -20px; padding: 0 20px; } .games-discover-list { grid-auto-columns: minmax(140px, 150px); gap: 12px; } .game-card-cover-emoji { font-size: var(--h3-size); } .games-discover-next { display: none; } } /* ══════════════════════════════════════════ MARQUEE ══════════════════════════════════════════ */ .marquee { padding: 20px 0; overflow: hidden; background: #0E1A2C; border-top: 1px solid rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.04); } .marquee .marquee-track { display: flex; align-items: center; gap: 0; white-space: nowrap; animation: marqueeScroll 30s linear infinite; } .marquee .marquee-item { font-family: var(--font-display); font-size: var(--body-size); font-weight: 700; font-style: italic; letter-spacing: 1px; color: rgba(240,244,248,0.48); padding: 0 24px; flex-shrink: 0; } .marquee .marquee-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(245,166,35,0.4); flex-shrink: 0; } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ══════════════════════════════════════════ USPs ══════════════════════════════════════════ */ .usps { padding: var(--space-lg) 0; background: #0B1221; } .usps .usps-eyebrow { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 20px; max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 40px; } .usps .usps-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-fw); line-height: var(--h2-lh); letter-spacing: -2px; max-width: 1400px; margin: 0 auto var(--h2-mb); padding: 0 40px; } .usps .usps-heading-green { color: #1DB87B; font-style: italic; } .usps .usps-sub { font-size: var(--body-size); color: rgba(240,244,248,0.65); line-height: 1.7; max-width: 560px; margin-bottom: 56px; max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 40px; } .usps .usps-grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1400px; margin: 0 auto; padding: 0 40px; } .usps .usp-card { background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.3s, background 0.3s; } .usps .usp-card:hover { border-color: rgba(245,166,35,0.2); background: rgba(255,255,255,0.04); } .usps .usp-card-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: var(--h5-size); background: rgba(245,166,35,0.08); color: #F5A623; } .usps .usp-card-title { font-family: var(--font-display); font-size: var(--h5-size); font-weight: 800; color: var(--color-heading); text-transform: uppercase; letter-spacing: 0.3px; } .usps .usp-card-desc { font-size: var(--label-size); color: rgba(240,244,248,0.65); line-height: 1.6; } @media (min-width: 768px) { .usps .usps-grid { grid-template-columns: 1fr 1fr; } .usps .usps-heading { font-size: var(--h1-size); } } @media (min-width: 1024px) { .usps .usps-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .usps { padding: var(--space-lg) 0; } .usps .usps-eyebrow { padding: 0 20px; } .usps .usps-heading { font-size: var(--h1-size); padding: 0 20px; } .usps .usps-sub { padding: 0 20px; } .usps .usps-grid { padding: 0 20px; } } /* ══════════════════════════════════════════ FINAL CTA ══════════════════════════════════════════ */ .final-cta { padding: var(--space-lg) 40px; background: #0B1221; text-align: center; position: relative; overflow: hidden; } .final-cta .final-cta-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(245,166,35,0.06) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .final-cta .final-cta-heading { font-family: var(--font-display); font-size: var(--h1-size); font-weight: 900; line-height: 0.93; letter-spacing: -3px; margin-bottom: 20px; position: relative; z-index: 1; } .final-cta .final-cta-heading-gold { color: #F5A623; font-style: italic; } .final-cta .final-cta-sub { font-size: var(--body-size); color: rgba(240,244,248,0.65); margin-bottom: 40px; position: relative; z-index: 1; } .final-cta .final-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 20px 48px; border-radius: 100px; background: #F5A623; color: #0B1221; font-size: var(--body-size); font-weight: 700; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: background 0.25s ease, transform 0.2s ease; border: none; position: relative; z-index: 1; } .final-cta .final-cta-btn:hover { background: #FFB940; transform: scale(1.04); } .final-cta .final-cta-note { font-size: var(--badge-size); color: rgba(240,244,248,0.48); margin-top: 16px; position: relative; z-index: 1; } @media (min-width: 768px) { .final-cta .final-cta-heading { font-size: var(--h1-size); letter-spacing: -4px; } } @media (min-width: 1200px) { .final-cta .final-cta-heading { font-size: var(--h1-size); letter-spacing: -5px; } } @media (max-width: 767px) { .final-cta { padding: var(--space-lg) 16px; } .final-cta .final-cta-heading { font-size: var(--h1-size); letter-spacing: -2px; } .final-cta .final-cta-sub { font-size: var(--label-size); } .final-cta .final-cta-btn { padding: 16px 36px; font-size: var(--btn-size); } } /* ══════════════════════════════════════════ GGL WHITELIST ══════════════════════════════════════════ */ .ggl-section { padding: var(--space-lg) 0; background: #0E1A2C; } .ggl-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .ggl-eyebrow { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .ggl-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #1DB87B; flex-shrink: 0; } .ggl-heading { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-fw); line-height: var(--h2-lh); letter-spacing: -2px; margin-bottom: var(--h2-mb); } .ggl-heading-green { color: #1DB87B; font-style: italic; } .ggl-text { font-size: var(--body-size); color: rgba(240,244,248,0.78); line-height: 1.7; max-width: none; margin-bottom: 40px; } .ggl-text strong { color: rgba(240,244,248,0.85); font-weight: 600; } .ggl-checker { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 32px; margin-bottom: 48px; } .ggl-checker-title { font-family: var(--font-display); font-size: var(--h5-size); font-weight: 800; color: var(--color-heading); margin-bottom: 6px; display: flex; align-items: center; gap: 10px; } .ggl-checker-sub { font-size: var(--label-size); color: rgba(240,244,248,0.65); margin-bottom: 20px; } .ggl-checker-form { display: flex; gap: 8px; } .ggl-checker-input { flex: 1; padding: 14px 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; color: var(--color-heading); font-size: var(--btn-size); font-family: inherit; outline: none; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .ggl-checker-input::placeholder { color: rgba(240,244,248,0.50); } .ggl-checker-input:focus { border-color: rgba(29,184,123,0.5); box-shadow: 0 0 0 4px rgba(29,184,123,0.1); } .ggl-checker-btn { padding: 14px 28px; border-radius: 14px; background: #1DB87B; border: none; color: var(--color-heading); font-size: var(--label-size); font-weight: 700; font-family: inherit; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; white-space: nowrap; } .ggl-checker-btn:hover { background: #22cc8e; transform: translateY(-1px); } .ggl-checker-result { margin-top: 20px; padding: 20px; border-radius: 14px; display: none; } .ggl-checker-result.result-legal { background: rgba(29,184,123,0.07); border: 1px solid rgba(29,184,123,0.22); display: flex; align-items: flex-start; gap: 16px; } .ggl-checker-result.result-illegal { background: rgba(232,48,74,0.07); border: 1px solid rgba(232,48,74,0.18); display: flex; align-items: flex-start; gap: 16px; } .ggl-result-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: var(--body-size); flex-shrink: 0; } .result-legal .ggl-result-icon { background: rgba(29,184,123,0.12); color: #1DB87B; } .result-illegal .ggl-result-icon { background: rgba(232,48,74,0.1); color: #E8304A; } .ggl-result-body { flex: 1; } .ggl-result-status { font-family: var(--font-display); font-size: var(--h5-size); font-weight: 900; margin-bottom: 3px; } .result-legal .ggl-result-status { color: #1DB87B; } .result-illegal .ggl-result-status { color: #E8304A; } .ggl-result-name { font-size: var(--label-size); font-weight: 700; color: var(--color-heading); margin-bottom: 4px; } .ggl-result-detail { font-size: var(--badge-size); color: rgba(240,244,248,0.72); } .ggl-result-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .ggl-result-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 7px; font-size: var(--badge-size); font-weight: 600; } .ggl-result-tag-ok { background: rgba(29,184,123,0.08); border: 1px solid rgba(29,184,123,0.2); color: #1DB87B; } .ggl-result-tag-err { background: rgba(232,48,74,0.08); border: 1px solid rgba(232,48,74,0.18); color: #E8304A; } .ggl-stats { display: flex; gap: 40px; margin-bottom: 28px; flex-wrap: wrap; } .ggl-stat { display: flex; flex-direction: column; gap: 3px; } .ggl-stat-num { font-family: var(--font-display); font-size: var(--h1-size); font-weight: 900; color: #F5A623; line-height: 1; } .ggl-stat-label { font-size: var(--badge-size); font-weight: 700; color: rgba(240,244,248,0.52); text-transform: uppercase; letter-spacing: 0.7px; } .ggl-search-wrap { position: relative; margin-bottom: 16px; } .ggl-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: rgba(240,244,248,0.50); font-size: var(--badge-size); pointer-events: none; } .ggl-search { width: 100%; padding: 13px 16px 13px 44px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; color: var(--color-heading); font-size: var(--label-size); font-family: inherit; outline: none; transition: border-color 0.25s ease; } .ggl-search::placeholder { color: rgba(240,244,248,0.28); } .ggl-search:focus { border-color: rgba(29,184,123,0.35); } .ggl-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; } .ggl-filter-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 100px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); color: rgba(240,244,248,0.65); font-size: var(--badge-size); font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; font-family: inherit; } .ggl-filter-btn:hover { border-color: rgba(29,184,123,0.25); color: rgba(240,244,248,0.7); } .ggl-filter-btn.ggl-active { background: rgba(29,184,123,0.1); border-color: rgba(29,184,123,0.3); color: #1DB87B; } .ggl-table-wrap { background: rgba(255,255,255,0.018); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; overflow: hidden; } .ggl-table { width: 100%; border-collapse: separate; border-spacing: 0; } .ggl-table thead tr { border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.015); } .ggl-table th { padding: 12px 16px; text-align: left; font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(240,244,248,0.48); } .ggl-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.15s ease; } .ggl-table tbody tr:last-child { border-bottom: none; } .ggl-table tbody tr:hover { background: rgba(255,255,255,0.02); } .ggl-table td { padding: 13px 16px; font-size: var(--label-size); color: rgba(240,244,248,0.7); vertical-align: middle; } .ggl-table td:first-child { font-weight: 600; color: rgba(240,244,248,0.88); } .ggl-domain-tag { display: inline-flex; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); font-size: var(--badge-size); font-family: var(--font-mono); color: rgba(240,244,248,0.72); margin: 2px; } .ggl-badge-legal { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 100px; background: rgba(29,184,123,0.08); border: 1px solid rgba(29,184,123,0.18); font-size: var(--badge-size); font-weight: 700; color: #1DB87B; } .ggl-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: #1DB87B; display: inline-block; } .ggl-art-tag { display: inline-flex; padding: 3px 8px; border-radius: 6px; background: rgba(245,166,35,0.06); border: 1px solid rgba(245,166,35,0.12); font-size: var(--badge-size); font-weight: 600; color: rgba(245,166,35,0.65); margin: 2px; } .ggl-load-more { display: flex; align-items: center; justify-content: center; padding: 16px; border-top: 1px solid rgba(255,255,255,0.04); } .ggl-load-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 10px; background: transparent; border: 1px solid rgba(255,255,255,0.08); color: rgba(240,244,248,0.72); font-size: var(--badge-size); line-height: var(--badge-lh); font-weight: var(--badge-fw); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; font-family: inherit; } .ggl-load-more-btn:hover { border-color: rgba(255,255,255,0.15); color: rgba(240,244,248,0.8); background: rgba(255,255,255,0.03); } .ggl-empty { padding: 48px 20px; text-align: center; color: rgba(240,244,248,0.52); font-size: var(--label-size); } .ggl-empty i { display: block; font-size: var(--h4-size); margin-bottom: 10px; opacity: 0.4; } .ggl-cards { display: none; flex-direction: column; gap: 8px; } .ggl-card { background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.2s ease; } .ggl-card:hover { border-color: rgba(255,255,255,0.1); } .ggl-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ggl-card-name { font-size: var(--label-size); font-weight: 700; color: var(--color-heading); } .ggl-card-domains { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .ggl-card-art { font-size: var(--badge-size); color: rgba(240,244,248,0.58); } .ggl-source { margin-top: 20px; font-size: var(--badge-size); color: rgba(240,244,248,0.48); display: flex; align-items: center; gap: 6px; } .ggl-source i { color: rgba(29,184,123,0.45); } @media (min-width: 768px) { .ggl-heading { font-size: var(--h1-size); } } @media (max-width: 1023px) { .ggl-checker-form { flex-direction: column; } .ggl-checker-btn { width: 100%; text-align: center; } } @media (max-width: 767px) { .ggl-section { padding: var(--space-lg) 0; } .ggl-inner { padding: 0 20px; } .ggl-heading { font-size: var(--h1-size); } .ggl-table-wrap { display: none; } .ggl-cards { display: flex; } .ggl-stats { gap: 24px; } .ggl-stat-num { font-size: var(--h4-size); } .ggl-filters { flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; margin-bottom: 20px; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: rgba(29,184,123,0.35) rgba(255,255,255,0.06); -webkit-overflow-scrolling: touch; } .ggl-filters::-webkit-scrollbar { height: 3px; } .ggl-filters::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 2px; } .ggl-filters::-webkit-scrollbar-thumb { background: rgba(29,184,123,0.4); border-radius: 2px; } .ggl-filter-btn { flex-shrink: 0; } .ggl-source { display: block; line-height: 1.7; margin-top: 16px; } .ggl-source i { margin-right: 4px; } } .ggl-mobile-load-more { display: none; margin-top: 12px; } @media (max-width: 389px) { .ggl-section { padding: var(--space-md) 0; } .ggl-inner { padding: 0 12px; } .ggl-filters { margin-bottom: 16px; } } /* ══════════════════════════════════════════ GGL CHECKER REDESIGN ══════════════════════════════════════════ */ /* Section background with subtle radial pattern */ .ggl-section { position: relative; } .ggl-section::before { content: none; } .ggl-section .ggl-inner { position: relative; z-index: 1; } /* Live dot — pulsing green */ .ggl-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1DB87B; box-shadow: 0 0 0 0 rgba(29,184,123,0.6); animation: gglPulse 2s infinite; vertical-align: middle; margin-right: 4px; flex-shrink: 0; } @keyframes gglPulse { 0% { box-shadow: 0 0 0 0 rgba(29,184,123,0.6); } 70% { box-shadow: 0 0 0 8px rgba(29,184,123,0); } 100% { box-shadow: 0 0 0 0 rgba(29,184,123,0); } } .ggl-eyebrow .ggl-live-dot { margin-right: 2px; } /* Inline link in headline text */ .ggl-text-link { color: rgba(240,244,248,0.88); text-decoration: underline; text-decoration-color: rgba(29,184,123,0.4); text-underline-offset: 3px; transition: color 0.2s ease; } .ggl-text-link:hover { color: #1DB87B; } /* Asymmetric grid: input left + ticker right */ .ggl-checker-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; margin-bottom: 24px; align-items: stretch; } .ggl-checker { position: relative; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 22px; padding: 30px; margin-bottom: 0; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 12px 40px -12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04); } .ggl-checker::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(245,166,35,0.3), transparent); } /* Provenance meta-row — pill-style */ .ggl-checker-meta { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 100px; font-size: var(--badge-size); color: rgba(240,244,248,0.7); flex-wrap: wrap; } .ggl-checker-meta strong { color: var(--color-heading); font-weight: 700; } .ggl-checker-meta-sep { color: rgba(240,244,248,0.48); margin: 0 4px; } /* Form: input + arrow button */ .ggl-checker-form { display: flex; gap: 10px; align-items: stretch; position: relative; } .ggl-checker-input { flex: 1; padding: 18px 24px; background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.1); border-radius: 16px; color: var(--color-heading); font-size: var(--body-size); font-family: inherit; outline: none; transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; letter-spacing: 0.2px; font-weight: 500; } .ggl-checker-input::placeholder { color: rgba(240,244,248,0.50); letter-spacing: 0; font-weight: 400; } .ggl-checker-input:focus { border-color: rgba(29,184,123,0.6); background: rgba(255,255,255,0.07); box-shadow: 0 0 0 5px rgba(29,184,123,0.12), 0 8px 24px -8px rgba(29,184,123,0.3); } .ggl-checker-btn { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, #1DB87B 0%, #16a06b 100%); border: none; color: var(--color-heading); font-size: var(--body-size); font-family: inherit; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 8px 20px -6px rgba(29,184,123,0.5); } .ggl-checker-btn:hover { transform: translateX(3px) scale(1.02); box-shadow: 0 12px 28px -6px rgba(29,184,123,0.7); } .ggl-checker-btn:active { transform: translateX(2px) scale(0.98); } .ggl-checker-btn.is-loading i { animation: gglSpin 0.8s linear infinite; } @keyframes gglSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* Quick-tests row */ .ggl-quick-tests { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ggl-quick-label { font-size: var(--badge-size); color: rgba(240,244,248,0.78); margin-right: 4px; } .ggl-quick-btn { padding: 6px 14px; font-size: var(--badge-size); font-family: inherit; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: rgba(240,244,248,0.88); cursor: pointer; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; font-weight: 500; } .ggl-quick-btn:hover { color: var(--color-heading); background: rgba(29,184,123,0.12); border-color: rgba(29,184,123,0.4); transform: translateY(-1px); } /* Demo: rotating example result (default state) */ .ggl-checker-demo { display: none !important; } .ggl-checker-demo.is-hidden { display: none !important; } /* Colored quick-test chips */ .ggl-quick-btn { display: inline-flex; align-items: center; gap: 7px; } .ggl-quick-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: box-shadow 0.2s ease; } .ggl-quick-legal { background: rgba(29,184,123,0.07); border-color: rgba(29,184,123,0.22); } .ggl-quick-illegal { background: rgba(232,48,74,0.06); border-color: rgba(232,48,74,0.2); } .ggl-quick-legal .ggl-quick-dot { background: #1DB87B; box-shadow: 0 0 6px rgba(29,184,123,0.55); } .ggl-quick-illegal .ggl-quick-dot { background: #E8304A; box-shadow: 0 0 6px rgba(232,48,74,0.5); } .ggl-quick-legal:hover { background: rgba(29,184,123,0.16); border-color: rgba(29,184,123,0.5); color: #1DB87B; } .ggl-quick-illegal:hover { background: rgba(232,48,74,0.12); border-color: rgba(232,48,74,0.45); color: #E8304A; } .ggl-quick-legal:hover .ggl-quick-dot { box-shadow: 0 0 10px rgba(29,184,123,0.8); } .ggl-quick-illegal:hover .ggl-quick-dot { box-shadow: 0 0 10px rgba(232,48,74,0.75); } .ggl-demo-badge { position: absolute; top: 10px; right: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(240,244,248,0.72); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 100px; } .ggl-demo-badge i { font-size: var(--badge-size); opacity: 0.6; } .ggl-demo-rows { position: relative; } .ggl-demo-row { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; transform: translateY(6px); pointer-events: none; } .ggl-demo-row[data-demo-active="1"] { position: relative; opacity: 1; transform: translateY(0); } .ggl-demo-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: var(--label-size); flex-shrink: 0; } .ggl-demo-icon-legal { background: rgba(29,184,123,0.12); color: #1DB87B; } .ggl-demo-icon-illegal { background: rgba(232,48,74,0.12); color: #E8304A; } .ggl-demo-body { flex: 1; min-width: 0; padding-right: 100px; } .ggl-demo-status { font-family: var(--font-display); font-size: var(--btn-size); font-weight: 800; line-height: 1; margin-bottom: 4px; letter-spacing: 0; } .ggl-demo-row-legal .ggl-demo-status { color: #1DB87B; } .ggl-demo-row-illegal .ggl-demo-status { color: #E8304A; } .ggl-demo-detail { font-size: var(--badge-size); color: rgba(240,244,248,0.55); line-height: 1.5; } .ggl-demo-detail strong { color: rgba(240,244,248,0.9); font-weight: 700; } /* Result box — JS-rendered */ .ggl-checker-result { margin-top: 20px; display: none; } .ggl-checker-result.is-active { display: block; animation: gglFadeIn 0.4s ease; } @keyframes gglFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Result card wrapper */ .ggl-result-card { border-radius: 16px; overflow: hidden; } /* Banner */ .ggl-result-banner { display: flex; align-items: center; gap: 16px; padding: 20px 24px; } .is-illegal .ggl-result-banner { background: rgba(232,48,74,0.12); border-bottom: 1px solid rgba(232,48,74,0.2); } .is-legal .ggl-result-banner { background: rgba(29,184,123,0.1); border-bottom: 1px solid rgba(29,184,123,0.18); } .ggl-result-banner-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .is-illegal .ggl-result-banner-icon { background: rgba(232,48,74,0.15); color: #E8304A; } .is-legal .ggl-result-banner-icon { background: rgba(29,184,123,0.15); color: #1DB87B; } .ggl-result-status { font-family: var(--font-display); font-size: var(--h5-size); font-weight: 900; line-height: 1; margin-bottom: 4px; } .is-illegal .ggl-result-status { color: #E8304A; } .is-legal .ggl-result-status { color: #1DB87B; } .ggl-result-domain { font-size: var(--label-size); font-weight: 600; color: rgba(240,244,248,0.75); } /* Body */ .ggl-result-body { padding: 20px 24px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-top: none; border-radius: 0 0 16px 16px; display: flex; flex-direction: column; gap: 16px; } .ggl-result-detail { font-size: var(--badge-size); color: rgba(240,244,248,0.72); line-height: 1.6; } .ggl-result-detail strong { color: rgba(240,244,248,0.92); } /* License facts grid (legal case) */ .ggl-result-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.06); } .ggl-result-fact { font-size: var(--badge-size); color: rgba(240,244,248,0.65); } .ggl-result-fact strong { display: block; color: rgba(240,244,248,0.85); font-weight: var(--badge-fw); font-size: var(--badge-size); line-height: var(--badge-lh); margin-top: 1px; } /* Spielarten tags */ .ggl-result-tags { display: flex; flex-wrap: wrap; gap: 5px; } .ggl-result-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 7px; font-size: var(--badge-size); font-weight: 600; } .ggl-result-tag-ok { background: rgba(29,184,123,0.08); border: 1px solid rgba(29,184,123,0.2); color: #1DB87B; } .ggl-result-tag-err { background: rgba(232,48,74,0.08); border: 1px solid rgba(232,48,74,0.18); color: #E8304A; } /* Deep-link to compare-card review */ .ggl-result-review-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; background: rgba(29,184,123,0.12); border: 1px solid rgba(29,184,123,0.28); color: #1DB87B; font-size: var(--badge-size); font-weight: 700; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; text-decoration: none; } .ggl-result-review-link:hover { background: rgba(29,184,123,0.2); transform: translateY(-1px); } .ggl-result-review-link strong { font-weight: 800; } /* BGH collapsible (illegal case) */ .ggl-result-bgh { background: rgba(245,166,35,0.06); border: 1px solid rgba(245,166,35,0.18); border-radius: 10px; padding: 0; overflow: hidden; } .ggl-result-bgh summary { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: var(--badge-size); font-weight: 700; color: #F5A623; cursor: pointer; list-style: none; user-select: none; } .ggl-result-bgh summary::-webkit-details-marker { display: none; } .ggl-result-bgh summary i:first-child { font-size: var(--badge-size); flex-shrink: 0; } .ggl-result-bgh summary strong { flex: 1; } .ggl-bgh-arrow { font-size: 10px !important; opacity: 0.7; transition: transform 0.25s ease; } .ggl-result-bgh[open] .ggl-bgh-arrow { transform: rotate(180deg); } .ggl-result-bgh-text { padding: 0 14px 12px; font-size: var(--badge-size); color: rgba(240,244,248,0.78); line-height: 1.6; } .ggl-result-bgh-text strong { color: #F5A623; font-weight: 700; } .ggl-result-bgh-text a { color: #F5A623; text-decoration: underline; text-underline-offset: 2px; } /* Top-3 alternatives (illegal case) */ .ggl-result-alts { display: flex; flex-direction: column; gap: 10px; } .ggl-result-alts-title { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(240,244,248,0.55); display: flex; align-items: center; gap: 7px; } .ggl-result-alts-title i { color: #1DB87B; } .ggl-result-alts-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; } .ggl-result-alt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(29,184,123,0.04); border: 1px solid rgba(29,184,123,0.14); text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .ggl-result-alt:hover { background: rgba(29,184,123,0.09); border-color: rgba(29,184,123,0.32); transform: translateX(2px); } .ggl-result-alt-avatar { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--label-size); font-weight: 900; color: var(--color-heading); flex-shrink: 0; text-transform: uppercase; } .ggl-result-alt-info { flex: 1; min-width: 0; } .ggl-result-alt-name { font-size: var(--label-size); font-weight: 700; color: var(--color-heading); line-height: 1.2; } .ggl-result-alt-domain { font-size: var(--badge-size); color: rgba(240,244,248,0.48); margin-top: 1px; } .ggl-result-alt-rating { font-family: var(--font-display); font-size: var(--h5-size); font-weight: 900; color: #F5A623; line-height: 1; flex-shrink: 0; } .ggl-result-alt-cta { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px; background: #1DB87B; color: #fff; font-size: var(--badge-size); font-weight: 700; flex-shrink: 0; white-space: nowrap; transition: background 0.18s ease, transform 0.12s ease; } .ggl-result-alt-cta:hover { background: #17a06b; transform: translateY(-1px); } .ggl-result-alt-cta i { font-size: 10px; } .ggl-result-alt { cursor: pointer; } .ggl-result-alt-logo { width: 52px; height: 36px; border-radius: 8px; background: #fff; border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; padding: 4px; } .ggl-result-alt-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .ggl-result-alt-bonus { font-size: var(--badge-size); color: #1DB87B; font-weight: 600; margin-top: 1px; line-height: 1.3; } /* Inline addon upsell (in result-box footer) */ .ggl-result-addon-upsell { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: rgba(245,166,35,0.04); border: 1px solid rgba(245,166,35,0.12); font-size: var(--badge-size); color: rgba(240,244,248,0.58); line-height: 1.5; } .ggl-result-addon-upsell i { color: #F5A623; flex-shrink: 0; } .ggl-result-addon-upsell a { color: #F5A623; text-decoration: underline; text-underline-offset: 2px; } /* Live ticker (right column) */ .ggl-ticker { position: relative; background: linear-gradient(155deg, rgba(15,24,42,0.98) 0%, rgba(11,18,33,0.8) 100%); border: 1px solid rgba(255,255,255,0.1); border-radius: 22px; padding: 26px 24px; display: flex; flex-direction: column; gap: 0; box-shadow: 0 16px 48px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06); overflow: hidden; } .ggl-ticker::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(245,166,35,0.35), transparent); } .ggl-ticker-eyebrow { font-family: var(--font-mono); font-size: var(--badge-size); font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: rgba(245,166,35,0.7); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .ggl-ticker-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #F5A623; box-shadow: 0 0 10px rgba(245,166,35,0.7); animation: gglPulse 2s infinite; flex-shrink: 0; } .ggl-ticker-num { font-family: var(--font-display); font-size: var(--h1-size); font-weight: var(--h1-fw); line-height: 1; color: var(--color-heading); letter-spacing: -1px; text-shadow: 0 0 40px rgba(29,184,123,0.3); } .ggl-ticker-num.has-data { color: #e8f8f2; } .ggl-ticker-label { font-size: var(--badge-size); color: rgba(240,244,248,0.72); font-weight: 500; margin-top: 4px; margin-bottom: 20px; } .ggl-ticker-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 0 0 16px; } .ggl-ticker-stat { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .ggl-ticker-stat-head { display: flex; align-items: center; gap: 8px; } .ggl-ticker-stat-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .ggl-dot-green { background: #1DB87B; box-shadow: 0 0 8px rgba(29,184,123,0.6); } .ggl-dot-gold { background: #F5A623; box-shadow: 0 0 8px rgba(245,166,35,0.5); } .ggl-ticker-stat-name { flex: 1; font-size: var(--badge-size); color: rgba(240,244,248,0.78); } .ggl-ticker-stat-head strong { font-size: var(--badge-size); font-weight: 700; color: rgba(240,244,248,0.9); min-width: 28px; text-align: right; } .ggl-ticker-bar-track { height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; } .ggl-ticker-bar-fill { height: 100%; border-radius: 2px; width: 0%; transition: width 1.4s cubic-bezier(0.4,0,0.2,1); } .ggl-bar-green { background: linear-gradient(90deg, #1DB87B, #22cc8e); box-shadow: 0 0 8px rgba(29,184,123,0.4); } .ggl-bar-gold { background: linear-gradient(90deg, #F5A623, #FFB940); box-shadow: 0 0 8px rgba(245,166,35,0.35); } .ggl-dot-blue { background: #3B82F6; box-shadow: 0 0 8px rgba(59,130,246,0.5); } .ggl-dot-purple { background: #A855F7; box-shadow: 0 0 8px rgba(168,85,247,0.5); } .ggl-bar-blue { background: linear-gradient(90deg, #3B82F6, #60A5FA); box-shadow: 0 0 8px rgba(59,130,246,0.35); } .ggl-bar-purple { background: linear-gradient(90deg, #A855F7, #C084FC); box-shadow: 0 0 8px rgba(168,85,247,0.35); } .ggl-ticker-foot { margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07); } .ggl-ticker-foot-num { font-family: var(--font-display); font-size: var(--h2-size); font-weight: 900; color: #F5A623; line-height: 1; letter-spacing: -0.5px; text-shadow: 0 0 24px rgba(245,166,35,0.35); } .ggl-ticker-foot-label { font-size: var(--badge-size); color: rgba(240,244,248,0.65); margin-top: 4px; line-height: 1.4; } /* Compact addon strip */ .ggl-addon-strip { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 14px; background: linear-gradient(90deg, rgba(245,166,35,0.06) 0%, rgba(245,166,35,0.02) 100%); border: 1px solid rgba(245,166,35,0.15); margin-bottom: 32px; transition: border-color 0.2s ease, background 0.2s ease; cursor: pointer; } .ggl-addon-strip:hover { background: rgba(245,166,35,0.08); border-color: rgba(245,166,35,0.3); } .ggl-addon-strip-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(245,166,35,0.12); display: flex; align-items: center; justify-content: center; color: #F5A623; font-size: var(--label-size); flex-shrink: 0; } .ggl-addon-strip-text { flex: 1; font-size: var(--badge-size); color: rgba(240,244,248,0.55); line-height: 1.4; } .ggl-addon-strip-text strong { color: var(--color-heading); font-weight: 700; } .ggl-addon-strip-cta { display: flex; align-items: center; gap: 5px; font-size: var(--badge-size); font-weight: 700; color: #F5A623; flex-shrink: 0; padding: 6px 12px; border-radius: 8px; background: rgba(245,166,35,0.1); } .ggl-addon-strip-cta i { font-size: var(--badge-size); } /* Section bridge between Whitelist and compare-table */ .section-bridge { padding: 24px 40px 32px; background: #0E1A2C; } .section-bridge-inner { max-width: 860px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; } .section-bridge-line { width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.18)); } .section-bridge-text { font-size: var(--body-size); color: rgba(240,244,248,0.78); line-height: 1.5; max-width: none; margin: 0; font-style: italic; } .section-bridge-text strong { color: rgba(240,244,248,0.85); font-style: normal; font-weight: 700; } .section-bridge-arrow { width: 36px; height: 36px; border-radius: 50%; background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.3); display: flex; align-items: center; justify-content: center; color: #F5A623; font-size: var(--label-size); animation: bridgeBob 2.5s ease-in-out infinite; } @keyframes bridgeBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* GGL badge on compare-cards (Step 8 — bidirectional link) */ .compare-card-meta-item.meta-ggl { cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .compare-card-meta-item.meta-ggl:hover { background: rgba(29,184,123,0.12); border-color: rgba(29,184,123,0.4); } .compare-card-meta-item.meta-ggl[data-ggl-clickable="1"]::after { content: " ↗"; opacity: 0.6; font-size: var(--badge-size); } /* Whitelist-table row highlight (deep-link target) */ .ggl-table tr.is-highlighted, .ggl-card.is-highlighted { animation: gglHighlight 2.4s ease-out; } @keyframes gglHighlight { 0% { background: rgba(29,184,123,0.3); } 100% { background: transparent; } } /* Responsive */ @media (max-width: 1023px) { .ggl-checker-grid { grid-template-columns: 1fr; } .ggl-ticker { order: -1; } .ggl-ticker-num { font-size: var(--h3-size); } } @media (max-width: 767px) { .ggl-checker-grid { min-width: 0; } .ggl-ticker { padding: 20px 16px; min-width: 0; width: 100%; box-sizing: border-box; } .ggl-ticker-stat-head { min-width: 0; } .ggl-ticker-bar-track { min-width: 0; } .ggl-checker { padding: 22px 18px; min-width: 0; } .ggl-checker-input { font-size: var(--btn-size); padding: 14px 18px; } .ggl-checker-btn { width: 48px; height: 48px; } .ggl-result-facts { grid-template-columns: 1fr; } .ggl-result-banner { padding: 16px 18px; gap: 12px; } .ggl-result-body { padding: 16px 18px; } .ggl-result-alts-list { grid-template-columns: 1fr; } .ggl-result-alt { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "logo info" "cta cta"; gap: 12px; align-items: center; } .ggl-result-alt-logo, .ggl-result-alt-avatar { grid-area: logo; } .ggl-result-alt-info { grid-area: info; } .ggl-result-alt-cta { grid-area: cta; justify-content: center; width: 100%; padding: 12px; } .ggl-addon-strip { flex-direction: column; align-items: flex-start; gap: 10px; } .section-bridge { padding: 16px 20px 24px; } .section-bridge-text { font-size: var(--label-size); } .ggl-checker-meta { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; } .ggl-checker-meta::-webkit-scrollbar { display: none; } .ggl-quick-tests { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -18px; padding: 2px 18px 8px; scrollbar-width: none; } .ggl-quick-tests::-webkit-scrollbar { display: none; } .ggl-quick-label { flex-shrink: 0; white-space: nowrap; } .ggl-quick-btn { flex-shrink: 0; } } /* === END GGL CHECKER REDESIGN === */ /* ══════════════════════════════════════════ SLOT DER WOCHE ══════════════════════════════════════════ */ .sotw-section { padding: var(--space-lg) 0; background: #0F1827; position: relative; overflow: hidden; } .sotw-section::before { content: ''; position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(245,166,35,0.06) 0%, transparent 60%); pointer-events: none; } .sotw-section::after { content: ''; position: absolute; bottom: -150px; left: -100px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(29,184,123,0.04) 0%, transparent 60%); pointer-events: none; } .sotw-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; } /* Editorial header */ .sotw-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .sotw-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: rgba(245,166,35,0.85); } .sotw-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #F5A623; box-shadow: 0 0 12px rgba(245,166,35,0.5); animation: gglPulse 2.5s infinite; } .sotw-kw-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: var(--badge-size); font-weight: 700; letter-spacing: 1px; color: rgba(240,244,248,0.82); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 100px; } .sotw-kw-pill i { font-size: var(--badge-size); opacity: 0.7; } .sotw-heading { font-family: var(--font-display); font-size: var(--h1-size); font-weight: 900; line-height: 0.92; letter-spacing: -2px; margin-bottom: 40px; color: var(--color-heading); } .sotw-heading-accent { color: #FF5E6C; font-style: italic; } .sotw-sub { font-size: var(--label-size); color: rgba(240,244,248,0.78); margin-bottom: 0; line-height: 1.6; } .sotw-sub strong { color: rgba(240,244,248,0.85); font-weight: 600; } /* === Tab Switcher (Slots / Live Casino) === */ .sotw-tabs { display: inline-flex; gap: 4px; padding: 5px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 100px; margin-bottom: 32px; } .sotw-tab { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; border-radius: 100px; background: transparent; border: 0; color: rgba(240,244,248,0.55); font-size: var(--badge-size); font-weight: 700; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease; font-family: inherit; letter-spacing: 0.2px; } .sotw-tab:hover { color: var(--color-heading); background: rgba(255,255,255,0.04); } .sotw-tab.is-active { background: linear-gradient(135deg, #F5A623 0%, #E8901A 100%); color: #1a0822; box-shadow: 0 6px 20px -4px rgba(245,166,35,0.5); } .sotw-tab i { font-size: var(--badge-size); } .sotw-tab-panel { display: none; } .sotw-tab-panel.is-active { display: block; animation: sotwTabIn 0.4s ease; } @keyframes sotwTabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Live-brand frame (no logo image) — text-based provider card */ .sotw-hero-live-frame { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 12px 22px; gap: 2px; } .sotw-hero-live-brand { font-family: var(--font-display); font-size: var(--h5-size); font-weight: 900; color: #1a0822; line-height: 1; letter-spacing: -0.3px; } .sotw-hero-live-brand-sub { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(26,8,34,0.55); } /* Archive thumbnail icon variant for live (no slot image) */ .sotw-archive-thumb-live { background: linear-gradient(135deg, rgba(245,166,35,0.18) 0%, rgba(245,166,35,0.05) 100%); display: flex; align-items: center; justify-content: center; color: #F5A623; font-size: var(--h5-size); } /* === New Full-Width Hero Banner === */ .sotw-hero-banner { position: relative; margin-top: 48px; border-radius: 32px; overflow: hidden; background: linear-gradient(155deg, #1A1F33 0%, #131A2B 50%, #0E1626 100%); box-shadow: 0 32px 80px -24px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); } .sotw-hero-banner-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 480px 1fr; gap: 48px; padding: 48px; align-items: center; } /* Image side */ .sotw-hero-image-side { display: flex; flex-direction: column; gap: 14px; align-items: center; } .sotw-hero-image-tag { display: inline-flex; align-items: center; padding: 8px 16px; background: transparent; color: #F5A623; font-size: var(--badge-size); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 100px; border: 2px solid #F5A623; box-shadow: 0 0 12px rgba(245,166,35,0.2); } /* Info side (right) */ .sotw-hero-info { display: flex; flex-direction: column; gap: 22px; min-width: 0; } /* Pragmatic Play branding — full wordmark on white pill */ .sotw-hero-pragmatic { display: inline-flex; align-items: center; gap: 14px; padding: 10px 18px 10px 14px; background: linear-gradient(135deg, rgba(245,166,35,0.07) 0%, rgba(255,255,255,0.03) 60%, rgba(29,184,123,0.05) 100%); border: 1px solid rgba(245,166,35,0.22); border-left: 3px solid rgba(245,166,35,0.65); border-radius: 100px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); align-self: flex-start; } .sotw-hero-pragmatic-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: rgba(245,166,35,0.85); padding: 3px 8px; background: rgba(245,166,35,0.10); border: 1px solid rgba(245,166,35,0.25); border-radius: 100px; line-height: 1; flex-shrink: 0; } .sotw-hero-pragmatic-frame { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; flex-shrink: 0; } .sotw-hero-pragmatic-logo { height: 34px; width: auto; max-width: 200px; display: block; opacity: 0.96; filter: brightness(1.05); } .sotw-hero-pills .sotw-hero-pill:nth-child(4) { display: none; } .sotw-hero-pragmatic-verified { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(29,184,123,0.95); padding: 3px 10px 3px 8px; background: rgba(29,184,123,0.08); border: 1px solid rgba(29,184,123,0.25); border-radius: 100px; line-height: 1; white-space: nowrap; flex-shrink: 0; } .sotw-hero-pragmatic-verified i { font-size: 10px; } /* ── Hero Rating (prominent score block) ── */ .sotw-hero-rating { display: inline-flex; align-items: center; gap: 16px; padding: 12px 20px 12px 14px; background: linear-gradient(135deg, rgba(245,166,35,0.14) 0%, rgba(245,166,35,0.05) 100%); border: 1px solid rgba(245,166,35,0.32); border-left: 3px solid #F5A623; border-radius: 14px; box-shadow: 0 8px 24px -8px rgba(245,166,35,0.30), inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); align-self: flex-start; margin-top: 4px; } .sotw-hero-rating-score-block { display: inline-flex; align-items: baseline; padding: 4px 12px; background: rgba(245,166,35,0.18); border: 1px solid rgba(245,166,35,0.4); border-radius: 10px; line-height: 1; } .sotw-hero-rating-score { font-family: var(--font-display); font-size: 32px; font-weight: 900; color: #F5A623; letter-spacing: -1px; line-height: 1; } .sotw-hero-rating-score-max { font-size: 14px; font-weight: 700; color: rgba(240,244,248,0.5); margin-left: 2px; letter-spacing: 0; } .sotw-hero-rating-details { display: flex; flex-direction: column; gap: 4px; } .sotw-hero-rating-stars { display: inline-flex; gap: 2px; color: #F5A623; font-size: 13px; line-height: 1; } .sotw-hero-rating-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(245,166,35,0.95); line-height: 1; } @media (max-width: 767px) { .sotw-hero-rating { padding: 10px 14px 10px 10px; gap: 12px; } .sotw-hero-rating-score { font-size: 26px; } .sotw-hero-rating-stars { font-size: 11px; } .sotw-hero-rating-label { font-size: 10px; } } .sotw-hero-banner-tagline { font-size: var(--body-size); line-height: 1.55; color: rgba(240,244,248,0.7); max-width: 560px; } .sotw-tested-by { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: var(--badge-size); color: rgba(240,244,248,0.6); } .sotw-tested-by strong { color: rgba(240,244,248,0.85); font-weight: 700; } .sotw-tested-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(29,184,123,0.35); flex-shrink: 0; } .sotw-hero-banner-tagline strong { color: var(--color-heading); font-weight: 700; } /* Stats Pills row */ .sotw-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; } .sotw-hero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: rgba(0,0,0,0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.12); border-radius: 100px; font-size: var(--badge-size); color: rgba(240,244,248,0.88); font-weight: 600; letter-spacing: 0.2px; } .sotw-hero-pill i { font-size: var(--badge-size); color: #F5A623; } .sotw-hero-pill > span { color: rgba(240,244,248,0.72); font-weight: 500; } .sotw-hero-pill strong { color: var(--color-heading); font-weight: 800; font-size: var(--badge-size); } /* Big Demo Action */ .sotw-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .sotw-hero-demo-banner { display: inline-flex; align-items: center; gap: 16px; padding: 16px 26px; border-radius: 16px; background: linear-gradient(135deg, #1DB87B 0%, #16A06A 100%); color: #fff; font-size: var(--label-size); font-weight: 800; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none; box-shadow: 0 12px 32px -8px rgba(29,184,123,0.55); border: 0; font-family: inherit; text-align: left; } .sotw-hero-demo-banner:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(29,184,123,0.7); } .sotw-hero-demo-banner > i { font-size: var(--body-size); } .sotw-hero-demo-banner-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; } .sotw-hero-demo-banner-text strong { font-size: var(--body-size); font-weight: 800; color: #fff; } .sotw-hero-demo-banner-text span { font-size: var(--label-size); opacity: 0.88; font-weight: 500; color: #fff; } /* ── Demo Modal ── */ .sotw-demo-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .sotw-demo-modal[hidden] { display: none; } .sotw-demo-modal.is-open { opacity: 1; pointer-events: auto; } .sotw-demo-backdrop { position: absolute; inset: 0; background: rgba(5,10,20,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; } .sotw-demo-frame { position: relative; width: 100%; max-width: 1100px; max-height: 92vh; display: flex; flex-direction: column; background: #0B1221; border: 1px solid rgba(245,166,35,0.25); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04); transform: scale(0.96); transition: transform 0.25s cubic-bezier(0.23,1,0.32,1); } .sotw-demo-modal.is-open .sotw-demo-frame { transform: scale(1); } .sotw-demo-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: linear-gradient(180deg, rgba(245,166,35,0.10) 0%, rgba(245,166,35,0.03) 100%); border-bottom: 1px solid rgba(255,255,255,0.06); } .sotw-demo-title { font-family: var(--font-display); font-size: var(--btn-size); font-weight: 800; color: var(--color-heading); } .sotw-demo-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(240,244,248,0.85); font-size: 16px; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s; flex-shrink: 0; padding: 0; } .sotw-demo-close:hover { background: rgba(232,48,74,0.18); border-color: rgba(232,48,74,0.4); color: #FF6B8A; transform: rotate(90deg); } .sotw-demo-stage { position: relative; flex: 1; min-height: 0; background: #050a14; aspect-ratio: 16/9; } .sotw-demo-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; z-index: 1; } .sotw-demo-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: rgba(240,244,248,0.55); font-size: var(--badge-size); pointer-events: none; z-index: 0; } .sotw-demo-loader i { color: #F5A623; font-size: var(--label-size); } .sotw-demo-consent { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 24px; background: #050a14; text-align: center; } .sotw-demo-consent[hidden] { display: none; } .sotw-demo-consent .sotw-demo-consent-box { max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .sotw-demo-consent .sotw-demo-consent-title { font-family: var(--font-display); font-size: var(--h6-size); font-weight: 800; color: var(--color-heading); } .sotw-demo-consent .sotw-demo-consent-text { font-size: var(--badge-size); line-height: 1.6; color: rgba(240,244,248,0.65); } .sotw-demo-consent .sotw-demo-consent-btn { margin-top: 6px; padding: 11px 22px; border-radius: 10px; border: 0; cursor: pointer; font-family: var(--font-display); font-size: var(--table-head-size); font-weight: 700; background: #1FB67A; color: #0c1116; transition: filter 0.2s ease; } .sotw-demo-consent .sotw-demo-consent-btn:hover { filter: brightness(1.08); } .sotw-demo-footer { padding: 10px 20px; background: rgba(11,18,33,0.6); border-top: 1px solid rgba(255,255,255,0.04); font-size: var(--badge-size); color: rgba(240,244,248,0.5); display: flex; align-items: center; gap: 8px; } .sotw-demo-footer i { color: rgba(245,166,35,0.7); } body.sotw-demo-locked { overflow: hidden; } @media (max-width: 767px) { .sotw-demo-modal { padding: 0; } .sotw-demo-frame { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; } .sotw-demo-stage { aspect-ratio: auto; } } /* ═══════════════════════════════════════════════════════ SOTW V2 — Vergleichs-Layout ═══════════════════════════════════════════════════════ */ .sotw-v2-wrap { margin: 0; padding: 0; } .sotw-v2 { background: linear-gradient(165deg, #1a1f2e 0%, #0E1A2C 60%, #0B1221 100%); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6); } /* Meta header strip */ .sotw-v2-meta-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 24px; background: rgba(11,18,33,0.6); border-bottom: 1px solid rgba(255,255,255,0.05); font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.6px; } .sotw-v2-meta-cell { color: rgba(240,244,248,0.48); } .sotw-v2-meta-brand { font-weight: 800; color: rgba(240,244,248,0.7); } .sotw-v2-meta-center { text-align: center; color: rgba(240,244,248,0.55); } .sotw-v2-meta-right { text-align: right; color: #F5A623; } .sotw-v2-meta-right i { font-size: 11px; color: #F5A623; margin-right: 2px; } /* Hero grid */ .sotw-v2-hero { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 32px; padding: 32px; align-items: start; } /* Cover */ .sotw-v2-cover { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.5); aspect-ratio: 1/1; background: #0a0e18; } .sotw-v2-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; } .sotw-v2-cover-pill { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: rgba(11,18,33,0.88); border: 1px solid rgba(245,166,35,0.35); border-radius: 10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .sotw-v2-cover-pill-sotw { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: #F5A623; } .sotw-v2-cover-pill-sotw i { font-size: 12px; color: #F5A623; } /* Provider-Block links neben Score (Glas-Effekt wie Software-Provider-Cells) */ .sotw-v2-provider { display: inline-flex; align-items: center; justify-content: center; padding: 16px 22px; min-width: 180px; min-height: 76px; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.015) 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 14px rgba(0,0,0,0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); flex-shrink: 0; margin-right: 6px; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .sotw-v2-provider:hover { background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%); border-color: rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 12px 28px rgba(0,0,0,0.5); transform: translateY(-1px); } .sotw-v2-provider-logo { height: 44px; width: auto; max-width: 180px; display: block; margin: 0 auto; opacity: 0.92; filter: brightness(1.05); transition: opacity 0.3s ease; } .sotw-v2-provider:hover .sotw-v2-provider-logo { opacity: 1; } /* Score row */ .sotw-v2-content { display: flex; flex-direction: column; gap: 24px; } .sotw-v2-score-row { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.06); } .sotw-v2-score { font-family: var(--font-display); font-size: 64px; font-weight: 900; line-height: 0.9; color: #F5A623; letter-spacing: -3px; text-shadow: 0 0 40px rgba(245,166,35,0.25); } .sotw-v2-score-meta { display: flex; flex-direction: column; gap: 4px; } .sotw-v2-score-max { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.4px; color: rgba(240,244,248,0.48); } .sotw-v2-score-label { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--color-heading); line-height: 1.1; } .sotw-v2-score-label em { color: #F5A623; font-style: italic; font-weight: 900; } /* Stats — 4-Spalten in einer Zeile */ .sotw-v2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .sotw-v2-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; min-width: 0; } .sotw-v2-stat-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(240,244,248,0.48); display: flex; align-items: center; gap: 6px; line-height: 1.2; } .sotw-v2-stat-label::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #F5A623; box-shadow: 0 0 6px rgba(245,166,35,0.6); flex-shrink: 0; } .sotw-v2-stat-value { font-family: var(--font-display); font-size: 26px; font-weight: 900; color: var(--color-heading); line-height: 1; letter-spacing: -1px; } .sotw-v2-stat-unit { font-size: 15px; font-weight: 700; color: rgba(240,244,248,0.55); margin-left: 2px; letter-spacing: 0; } .sotw-v2-stat-sub { font-size: 11px; color: rgba(240,244,248,0.48); line-height: 1.4; margin-top: 4px; } /* Author inline (under score) */ .sotw-v2-author-inline { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 100px; align-self: flex-start; } .sotw-v2-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(245,166,35,0.4); flex-shrink: 0; } .sotw-v2-author-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sotw-v2-author-meta strong { font-size: var(--badge-size); font-weight: 700; color: var(--color-heading); line-height: 1.2; } .sotw-v2-author-meta span { font-size: 11px; color: rgba(240,244,248,0.5); line-height: 1.2; } /* Demo CTA (großer Banner wie im Original) */ .sotw-v2-demo-cta { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 26px; background: linear-gradient(135deg, #1DB87B 0%, #16A06A 100%); color: #fff; font-size: var(--label-size); font-weight: 800; border: 0; border-radius: 16px; cursor: pointer; box-shadow: 0 12px 32px -8px rgba(29,184,123,0.55); transition: transform 0.2s, box-shadow 0.2s; font-family: inherit; text-align: center; width: 100%; } .sotw-v2-demo-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(29,184,123,0.7); } .sotw-v2-demo-cta-icon { font-size: var(--body-size); flex-shrink: 0; } .sotw-v2-demo-cta-text { display: inline-flex; flex-direction: row; align-items: baseline; gap: 8px; line-height: 1.2; flex-wrap: wrap; justify-content: center; } .sotw-v2-demo-cta-text strong { font-size: var(--body-size); font-weight: 800; color: #fff; } .sotw-v2-demo-cta-text span { font-size: var(--label-size); opacity: 0.78; font-weight: 500; color: #fff; } /* Quote strip */ .sotw-v2-quote-strip { position: relative; margin: 0 32px 32px; padding: 22px 24px; background: linear-gradient(135deg, rgba(245,166,35,0.06) 0%, rgba(255,255,255,0.025) 100%); border: 1px solid rgba(245,166,35,0.2); border-left: 3px solid rgba(245,166,35,0.65); border-radius: 14px; } .sotw-v2-quote-mark { position: absolute; top: -10px; left: 12px; font-family: var(--font-display); font-size: 56px; font-weight: 900; line-height: 1; color: rgba(245,166,35,0.4); pointer-events: none; } .sotw-v2-quote-text { font-size: var(--label-size); line-height: 1.6; color: rgba(240,244,248,0.85); margin: 0 0 16px; padding-left: 8px; font-style: italic; } .sotw-v2-quote-text strong { color: #F5A623; font-weight: 700; font-style: normal; } .sotw-v2-quote-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); } .sotw-v2-quote-foot-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--badge-size); color: rgba(240,244,248,0.7); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 5px 12px; line-height: 1.4; } .sotw-v2-quote-foot-item i { font-size: var(--badge-size); color: rgba(245,166,35,0.65); } .sotw-v2-quote-foot-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--badge-size); font-weight: 600; color: #F5A623; background: rgba(245,166,35,0.10); border: 1px solid rgba(245,166,35,0.25); border-radius: 20px; padding: 5px 12px; text-decoration: none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s; line-height: 1.4; margin-left: auto; } .sotw-v2-quote-foot-link:hover { background: rgba(245,166,35,0.18); border-color: rgba(245,166,35,0.4); transform: translateY(-1px); } /* V1 Take-Card als Quote innerhalb V2 — passende Margin */ .sotw-v2-take-wrap { margin: 0 32px 32px; } @media (max-width: 767px) { .sotw-v2-take-wrap { margin: 0 16px 24px; } } @media (max-width: 900px) { .sotw-v2-hero { grid-template-columns: 1fr; padding: 24px; gap: 24px; } .sotw-v2-cover { max-width: 100%; width: 100%; margin: 0; } .sotw-v2-score { font-size: 48px; } .sotw-v2-score-label { font-size: 18px; } .sotw-v2-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; } .sotw-v2-stat-value { font-size: 22px; } .sotw-v2-meta-header { grid-template-columns: 1fr 1fr; padding: 10px 16px; gap: 8px; font-size: 10px; } .sotw-v2-meta-center { display: none; } .sotw-v2-quote-strip { margin: 0 16px 24px; padding: 18px 16px; } .sotw-v2-demo-cta { padding: 14px 18px; } .sotw-v2-demo-cta-text strong { font-size: var(--btn-size); } } @media (max-width: 600px) { /* Score-Row: Provider auf eigene Zeile, Score + Meta zusammen in 2. Zeile */ .sotw-v2-score-row { flex-wrap: wrap; gap: 14px 14px; align-items: center; } .sotw-v2-provider { flex: 0 0 100%; min-width: 0; max-width: none; width: 100%; margin-right: 0; padding: 18px 22px; min-height: 88px; } .sotw-v2-provider-logo { height: 56px; max-width: 260px; } .sotw-v2-score { font-size: 56px; flex-shrink: 0; } .sotw-v2-score-meta { flex: 1 1 auto; min-width: 0; } .sotw-v2-score-label { font-size: 17px; line-height: 1.2; } } @media (max-width: 560px) { .sotw-v2-stats { grid-template-columns: 1fr; } .sotw-v2-cover-pill { padding: 8px 10px; } .sotw-v2-cover-pill-sotw { font-size: 11px; letter-spacing: 0.8px; } } @media (max-width: 420px) { .sotw-v2-hero { padding: 18px; gap: 18px; } .sotw-v2-provider { padding: 16px 18px; min-height: 76px; } .sotw-v2-provider-logo { height: 46px; max-width: 220px; } .sotw-v2-score { font-size: 48px; } .sotw-v2-score-label { font-size: 15px; } .sotw-v2-score-max { font-size: 11px; letter-spacing: 1px; } .sotw-v2-stat-value { font-size: 20px; } .sotw-v2-take-wrap { margin: 0 12px 18px; } } /* Editorial flow (single column under hero) */ .sotw-flow { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; } /* legacy compat — old grid no longer used but selectors retained for safety */ .sotw-grid { display: contents; } .sotw-hero-col { display: contents; } .sotw-hero { position: relative; } /* Hero background decorations — candy theme */ .sotw-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .sotw-hero-blob { position: absolute; border-radius: 50%; filter: blur(50px); opacity: 0.30; } .sotw-hero-blob-1 { top: -60px; left: -40px; width: 220px; height: 220px; background: radial-gradient(circle, #FF6BC8 0%, transparent 65%); animation: sotwBlob 12s ease-in-out infinite; } .sotw-hero-blob-2 { bottom: -80px; right: -60px; width: 280px; height: 280px; background: radial-gradient(circle, #FFB84D 0%, transparent 65%); animation: sotwBlob 14s ease-in-out infinite reverse; } .sotw-hero-blob-3 { top: 40%; left: 60%; width: 180px; height: 180px; background: radial-gradient(circle, #B66BFF 0%, transparent 65%); animation: sotwBlob 10s ease-in-out infinite; animation-delay: -3s; } @keyframes sotwBlob { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(20px, -10px) scale(1.08); } 66% { transform: translate(-15px, 15px) scale(0.95); } } .sotw-hero-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 24px 24px; opacity: 0.4; mask-image: radial-gradient(circle at center, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 75%); } /* Hero frame — main composition */ .sotw-hero-frame { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; } .sotw-hero-corner-badge { position: absolute; top: 18px; left: 18px; display: flex; align-items: center; padding: 7px 12px; background: rgba(0,0,0,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.12); border-radius: 100px; } .sotw-hero-corner-badge img { height: 16px; width: auto; opacity: 0.95; filter: brightness(1.4); } .sotw-hero-tag { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; padding: 6px 12px; background: linear-gradient(135deg, #F5A623 0%, #E8901A 100%); color: #1a0822; font-size: var(--badge-size); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; border-radius: 100px; box-shadow: 0 8px 20px -6px rgba(245,166,35,0.6); } /* Image presentation — much bigger display (400×400 from 200 source) with glow */ .sotw-hero-image-wrap { position: relative; isolation: isolate; padding: 14px; border-radius: 28px; background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 24px 60px -18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08); } .sotw-hero-image-wrap::before { content: ''; position: absolute; inset: -2px; border-radius: 30px; background: linear-gradient(135deg, rgba(255,107,200,0.18), rgba(255,94,108,0.14)); z-index: 0; filter: blur(24px); opacity: 0.5; } .sotw-hero-img { display: block; position: relative; z-index: 1; width: 400px; height: 400px; max-width: 100%; border-radius: 22px; object-fit: cover; transition: transform 0.5s ease; box-shadow: 0 16px 40px -8px rgba(0,0,0,0.55); image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } .sotw-hero-banner:hover .sotw-hero-img { transform: scale(1.02); } .sotw-hero-demo { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 14px; background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.3); color: #F5A623; font-size: var(--label-size); font-weight: 700; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; text-decoration: none; } .sotw-hero-demo:hover { background: rgba(245,166,35,0.2); border-color: rgba(245,166,35,0.55); transform: translateY(-2px); } .sotw-hero-demo i { font-size: var(--badge-size); } .sotw-hero-caption { font-size: var(--badge-size); color: rgba(240,244,248,0.65); text-align: center; line-height: 1.5; padding: 0 8px; } /* Content column */ .sotw-content { display: flex; flex-direction: column; gap: 32px; } /* Stats grid — full-width horizontal 4-cell bar */ .sotw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 24px 8px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin-top: 24px; } .sotw-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 28px; border-right: 1px solid rgba(255,255,255,0.06); } .sotw-stat:last-child { border-right: 0; } .sotw-stat-label { display: inline-flex; align-items: center; gap: 7px; font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(240,244,248,0.78); } .sotw-stat-label i { font-size: var(--badge-size); color: rgba(245,166,35,0.75); } .sotw-stat-value { font-family: var(--font-display); font-size: 50px; font-weight: 900; line-height: 0.95; color: var(--color-heading); letter-spacing: -1px; } .sotw-stat-unit { font-size: var(--h5-size); font-weight: 700; color: rgba(240,244,248,0.78); margin-left: 2px; } .sotw-stat-bar { height: 5px; background: rgba(255,255,255,0.06); border-radius: 100px; overflow: hidden; margin-top: 3px; } .sotw-stat-bar-fill { height: 100%; background: linear-gradient(90deg, #1DB87B 0%, #34D399 100%); border-radius: 100px; box-shadow: 0 0 10px rgba(29,184,123,0.4); } .sotw-stat-dots { display: flex; gap: 3px; margin-top: 3px; } .sotw-dot { flex: 1; max-width: 24px; height: 4px; border-radius: 100px; background: rgba(255,255,255,0.1); } .sotw-dot.is-on { background: #F5A623; box-shadow: 0 0 6px rgba(245,166,35,0.4); } .sotw-stat-sub { font-size: var(--badge-size); color: rgba(240,244,248,0.48); line-height: 1.5; } .sotw-stat-sub i { font-size: var(--badge-size); color: #1DB87B; margin-right: 2px; } /* Editorial take */ .sotw-take { position: relative; padding: 0; border-radius: 0; background: transparent; border: 0; } .sotw-take-author-card { display: flex; flex-direction: column; gap: 14px; margin-top: 0; padding: 20px 22px 16px; background: linear-gradient(155deg, rgba(245,166,35,0.06) 0%, rgba(245,166,35,0.015) 60%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(245,166,35,0.22); border-radius: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: relative; } .sotw-take-body { display: grid; grid-template-columns: minmax(220px, 260px) 1fr; gap: 22px; align-items: stretch; } .sotw-take-identity { display: flex; flex-direction: row; align-items: center; gap: 14px; padding-right: 22px; border-right: 1px solid rgba(245,166,35,0.18); } .sotw-take-identity .sotw-take-avatar-wrap { flex-shrink: 0; } .sotw-take-quote-block { position: relative; padding-top: 2px; } .sotw-take-quote-mark { position: absolute; top: -8px; left: -4px; font-family: var(--font-display); font-size: 56px; font-weight: 900; line-height: 1; color: rgba(245,166,35,0.22); z-index: 0; pointer-events: none; } .sotw-take-quote { position: relative; z-index: 1; font-size: var(--label-size); line-height: 1.6; color: rgba(240,244,248,0.85); margin: 0; padding-left: 14px; font-style: italic; } .sotw-take-quote strong { color: #F5A623; font-weight: 700; font-style: normal; } .sotw-take-author-top { display: flex; align-items: center; gap: 14px; } .sotw-take-avatar-wrap { position: relative; flex-shrink: 0; } .sotw-take-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; border: 1.5px solid rgba(245,166,35,0.45); box-shadow: 0 0 0 2px rgba(11,18,33,1), 0 0 0 3px rgba(245,166,35,0.18); } .sotw-take-avatar-badge { position: absolute; bottom: -3px; right: -3px; width: 16px; height: 16px; border-radius: 50%; background: #1DB87B; border: 2px solid #0B1221; display: flex; align-items: center; justify-content: center; font-size: 7px; color: #fff; box-shadow: 0 0 8px rgba(29,184,123,0.4); } .sotw-take-author-info { flex: 1; min-width: 0; } .sotw-take-author-info::before { content: 'Getestet von'; display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(245,166,35,0.7); margin-bottom: 2px; } .sotw-take-name { font-size: var(--table-head-size); font-weight: 800; color: var(--color-heading); line-height: 1.2; } .sotw-take-role { font-size: var(--badge-size); color: rgba(240,244,248,0.55); margin-top: 2px; } .sotw-take-identity .sotw-take-author-info { text-align: left; } .sotw-take-rating { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.25); border-radius: 100px; margin-right: auto; } .sotw-take-rating-score { font-family: var(--font-display); font-size: 18px; font-weight: 900; color: #F5A623; line-height: 1; letter-spacing: -0.5px; padding: 2px 8px; background: rgba(245,166,35,0.15); border-radius: 100px; display: inline-flex; align-items: baseline; } .sotw-take-rating-score-max { font-size: 10px; font-weight: 700; color: rgba(240,244,248,0.5); margin-left: 1px; letter-spacing: 0; } .sotw-take-rating-stars { display: inline-flex; gap: 1px; color: #F5A623; font-size: 11px; line-height: 1; } .sotw-take-rating-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(245,166,35,0.95); line-height: 1; } .sotw-take-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); } .sotw-take-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--badge-size); color: rgba(240,244,248,0.7); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 5px 12px; line-height: 1.4; } .sotw-take-meta-item i { font-size: var(--badge-size); color: rgba(245,166,35,0.65); } .sotw-take-meta-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--badge-size); font-weight: 600; color: #F5A623; background: rgba(245,166,35,0.10); border: 1px solid rgba(245,166,35,0.25); border-radius: 20px; padding: 5px 12px; text-decoration: none; transition: background 0.2s, border-color 0.2s, transform 0.2s; line-height: 1.4; margin-left: auto; } .sotw-take-meta-link:hover { background: rgba(245,166,35,0.18); border-color: rgba(245,166,35,0.4); transform: translateY(-1px); } .sotw-take-meta-link--soon { color: rgba(240,244,248,0.48); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); cursor: default; } .sotw-take-meta-link--soon:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); transform: none; } .sotw-take-meta-link--soon i { color: rgba(240,244,248,0.48); } .sotw-take-meta-link i { font-size: var(--badge-size); } /* Counter-arguments */ .sotw-cons { padding: 22px 24px; border-radius: 16px; background: rgba(232,48,74,0.04); border: 1px solid rgba(232,48,74,0.18); } .sotw-cons-title { font-size: var(--badge-size); font-weight: 800; color: #E8304A; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .sotw-cons-title i { font-size: var(--badge-size); } .sotw-cons-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .sotw-cons-list li { font-size: var(--badge-size); color: rgba(240,244,248,0.88); line-height: 1.6; padding-left: 16px; position: relative; } .sotw-cons-list li::before { content: '·'; position: absolute; left: 0; color: rgba(232,48,74,0.6); font-weight: 900; font-size: var(--body-size); line-height: 1; top: 4px; } .sotw-cons-list li strong { color: rgba(240,244,248,0.95); font-weight: 700; } /* Providers (where legally available) */ .sotw-providers { padding: 24px; border-radius: 20px; background: rgba(29,184,123,0.05); border: 1px solid rgba(29,184,123,0.2); } .sotw-providers-title { display: flex; align-items: center; gap: 8px; font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(29,184,123,0.85); margin-bottom: 16px; } .sotw-providers-dot { width: 6px; height: 6px; border-radius: 50%; background: #1DB87B; box-shadow: 0 0 8px rgba(29,184,123,0.5); } .sotw-providers-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .sotw-provider { display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 12px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .sotw-provider:hover { background: rgba(29,184,123,0.08); border-color: rgba(29,184,123,0.35); transform: translateX(3px); } .sotw-provider-logo-frame { display: flex; align-items: center; justify-content: center; width: 100px; height: 44px; border-radius: 10px; background: white; padding: 6px 10px; flex-shrink: 0; box-shadow: 0 2px 8px -2px rgba(0,0,0,0.25); } .sotw-provider-logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .sotw-provider-info { flex: 1; min-width: 0; } .sotw-provider-name { font-family: var(--font-display); font-size: var(--body-size); font-weight: 800; color: var(--color-heading); line-height: 1.05; letter-spacing: -0.2px; } .sotw-provider-meta { font-size: var(--badge-size); color: rgba(240,244,248,0.78); margin-top: 4px; display: flex; align-items: center; gap: 6px; } .sotw-provider-rating { display: inline-flex; align-items: center; gap: 4px; color: #F5A623; font-weight: 700; } .sotw-provider-rating i { font-size: var(--badge-size); } .sotw-provider-ggl { display: inline-flex; align-items: center; gap: 4px; color: #1DB87B; font-weight: 700; } .sotw-provider-ggl i { font-size: var(--badge-size); } .sotw-provider-sep { color: rgba(240,244,248,0.48); } .sotw-provider-cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: rgba(29,184,123,0.12); border: 1px solid rgba(29,184,123,0.25); border-radius: 100px; color: #1DB87B; font-size: var(--badge-size); font-weight: 700; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; flex-shrink: 0; } .sotw-provider-cta i { font-size: var(--badge-size); } .sotw-provider:hover .sotw-provider-cta { background: #1DB87B; color: var(--color-heading); transform: translateX(2px); } .sotw-provider:hover .sotw-provider-cta { border-color: #1DB87B; } .sotw-cta-all { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; background: #1DB87B; color: var(--color-heading); font-size: var(--badge-size); font-weight: 700; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; text-decoration: none; } .sotw-cta-all:hover { background: #22cc8e; transform: translateY(-1px); } .sotw-cta-all i { font-size: var(--badge-size); } /* Mini archive */ .sotw-archive { margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.06); } .sotw-archive-title { display: flex; align-items: center; gap: 8px; font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(240,244,248,0.65); margin-bottom: 16px; } .sotw-archive-title i { font-size: var(--badge-size); } .sotw-archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .sotw-archive-card { position: relative; padding: 14px; border-radius: 16px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease; display: flex; align-items: center; gap: 14px; } .sotw-archive-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(245,166,35,0.3); transform: translateY(-2px); } .sotw-archive-thumb { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 12px -4px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); } .sotw-archive-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sotw-archive-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .sotw-archive-kw { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(245,166,35,0.75); } .sotw-archive-name { font-family: var(--font-display); font-size: var(--h6-size); font-weight: 800; color: var(--color-heading); line-height: 1.05; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sotw-archive-foot { font-size: var(--badge-size); color: rgba(240,244,248,0.72); display: flex; align-items: baseline; gap: 2px; } .sotw-archive-score { font-family: var(--font-display); font-size: var(--body-size); color: #F5A623; font-weight: 800; line-height: 1; } .sotw-archive-foot-sep { color: rgba(240,244,248,0.52); margin: 0 2px; } .sotw-archive-foot-max { color: rgba(240,244,248,0.78); font-size: var(--badge-size); } .sotw-archive-more { background: linear-gradient(135deg, rgba(245,166,35,0.1) 0%, rgba(245,166,35,0.04) 100%); border-color: rgba(245,166,35,0.25); justify-content: center; } .sotw-archive-more:hover { background: rgba(245,166,35,0.15); border-color: rgba(245,166,35,0.5); } .sotw-archive-more-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(245,166,35,0.18); display: flex; align-items: center; justify-content: center; color: #F5A623; font-size: var(--label-size); flex-shrink: 0; transition: background 0.2s ease, transform 0.2s ease; } .sotw-archive-more:hover .sotw-archive-more-icon { background: #F5A623; color: #1a0822; transform: translateX(3px); } .sotw-archive-more-text { font-size: var(--badge-size); font-weight: 700; color: rgba(240,244,248,0.7); line-height: 1.3; } /* Slot der Woche — In-place-Switch (Klick auf Archiv-Karte zeigt alten Slot) */ .sotw-feature:not(.is-active) { display: none; } .sotw-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: rgba(240,244,248,0.85); font-size: var(--badge-size); font-weight: 700; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .sotw-back:hover { background: rgba(245,166,35,0.15); border-color: rgba(245,166,35,0.5); } .sotw-archive-card { cursor: pointer; } .sotw-archive-card-active { background: rgba(245,166,35,0.14); border-color: rgba(245,166,35,0.55); } .sotw-archive-hidden { display: none; } .sotw-compact-note { font-size: var(--badge-size); color: rgba(240,244,248,0.6); line-height: 1.6; margin-top: 14px; } /* Responsive */ @media (max-width: 1023px) { .sotw-hero-banner-grid { grid-template-columns: 1fr; gap: 32px; padding: 36px; } .sotw-hero-image-side { max-width: 380px; margin: 0 auto; width: 100%; } .sotw-hero-img { width: 320px; height: 320px; } .sotw-stats { grid-template-columns: repeat(2, 1fr); padding: 24px; gap: 24px; } .sotw-stat { border-right: 0; padding: 0; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 16px; } .sotw-stat:nth-child(n+3) { padding-bottom: 0; padding-top: 16px; border-bottom: 0; } .sotw-stat:nth-child(odd) { padding-right: 16px; } .sotw-stat:nth-child(even) { padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.06); } .sotw-archive-grid { grid-template-columns: repeat(2, 1fr); } .sotw-heading { font-size: var(--h2-size); } .sotw-hero-banner-tagline { font-size: var(--btn-size); } } @media (max-width: 767px) { .sotw-section { padding: 80px 0; } .sotw-inner { padding: 0 20px; } .sotw-heading { font-size: var(--h3-size); } .sotw-hero-banner-grid { padding: 28px 20px; gap: 24px; } .sotw-hero-img { width: 240px; height: 240px; } .sotw-hero-image-wrap { padding: 14px; } .sotw-stats { grid-template-columns: 1fr; padding: 18px; gap: 14px; } .sotw-stat, .sotw-stat:nth-child(n) { border: 0 !important; padding: 8px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; } .sotw-stat:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; } .sotw-stat-value { font-size: var(--h4-size); } .sotw-hero-pragmatic { flex-wrap: wrap; gap: 10px; padding: 8px 14px; } .sotw-hero-pragmatic-frame { padding: 0; } .sotw-hero-pragmatic-logo { height: 26px; max-width: 150px; } .sotw-hero-pragmatic-verified { padding: 3px 8px; } .sotw-hero-demo-banner { padding: 14px 20px; gap: 12px; } .sotw-hero-demo-banner-text strong { font-size: var(--label-size); } .sotw-hero-demo-banner-text span { font-size: var(--badge-size); } .sotw-take { padding: 0; } .sotw-take-author-card { padding: 18px 16px 14px; gap: 12px; } .sotw-take-body { grid-template-columns: 1fr; gap: 14px; } .sotw-take-identity { padding-right: 0; padding-bottom: 14px; border-right: 0; border-bottom: 1px solid rgba(245,166,35,0.18); } .sotw-take-quote { font-size: var(--badge-size); padding-left: 12px; } .sotw-take-quote-mark { font-size: 44px; top: -6px; left: -2px; } .sotw-take-avatar { width: 40px; height: 40px; } .sotw-take-rating { width: 100%; justify-content: flex-start; margin-right: 0; } .sotw-take-rating-score { font-size: 16px; padding: 2px 6px; } .sotw-take-rating-stars { font-size: 10px; } .sotw-take-rating-label { font-size: 9px; } .sotw-take-meta { gap: 6px; } .sotw-take-meta-item { flex: 1; justify-content: center; } .sotw-take-meta-link { width: 100%; justify-content: center; margin-left: 0; margin-top: 4px; } .sotw-archive-grid { display: flex; flex-direction: row; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: rgba(245,166,35,0.4) rgba(255,255,255,0.06); } .sotw-archive-grid::-webkit-scrollbar { height: 3px; } .sotw-archive-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 2px; } .sotw-archive-grid::-webkit-scrollbar-thumb { background: rgba(245,166,35,0.45); border-radius: 2px; } .sotw-archive-card { min-width: 200px; flex-shrink: 0; scroll-snap-align: start; } .sotw-archive-more { min-width: 140px; flex-shrink: 0; grid-column: unset; padding: 12px; } } /* === END SLOT DER WOCHE === */ /* ── 1. Animated gradient mesh (hero background) ── */ @keyframes v2MeshMove { 0% { background-position: 0% 50%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 50%; } } /* ── 2. Floating hero particles ── */ .v2-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .v2-particle { position: absolute; border-radius: 50%; animation: v2FloatUp linear infinite; } @keyframes v2FloatUp { 0% { transform: translateY(105vh) scale(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 0.5; } 100% { transform: translateY(-40px) scale(1.4); opacity: 0; } } /* ── 3. Hero headline — fluid + red word reveal ── */ .hero .hero-headline { font-size: var(--h1-size) !important; } @keyframes v2RedReveal { from { opacity: 0; transform: translateX(-16px); letter-spacing: 6px; filter: blur(6px); } to { opacity: 1; transform: translateX(0); letter-spacing: -2px; filter: blur(0); } } .hero .hero-headline-red { display: inline-block; animation: heroFadeUp 0.6s 0.1s ease-out both, v2RedReveal 1s 0.75s cubic-bezier(0.22,1,0.36,1) both !important; } /* ── 4. Hero CTA — pulsing gold glow ── */ @keyframes v2CtaGlow { 0%,100% { box-shadow: 0 8px 28px rgba(245,166,35,0.30); } 50% { box-shadow: 0 12px 56px rgba(245,166,35,0.68), 0 0 120px rgba(245,166,35,0.10); } } .hero .hero-cta { box-shadow: 0 8px 28px rgba(245,166,35,0.3) !important; animation: heroFadeUp 0.6s 0.3s ease-out both, v2CtaGlow 3s 2s ease-in-out infinite !important; } /* ── 5. Nav CTA — subtle outlined (matches casino.de standard) ── */ .site-nav .nav-cta { background: rgba(255,255,255,0.06) !important; color: rgba(240,244,248,0.7) !important; border: 1px solid rgba(255,255,255,0.1) !important; font-weight: var(--badge-fw) !important; animation: none !important; } .site-nav .nav-cta:hover { color: var(--color-heading) !important; background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.18) !important; } /* ── 6. Winner card — color-cycling glow ── */ @keyframes v2WinnerGlow { 0% { box-shadow: 0 0 0 1px rgba(245,166,35,0.55), 0 16px 48px rgba(245,166,35,0.16); border-color: rgba(245,166,35,0.50); } 33% { box-shadow: 0 0 0 1px rgba(29,184,123,0.55), 0 16px 48px rgba(29,184,123,0.16); border-color: rgba(29,184,123,0.50); } 66% { box-shadow: 0 0 0 1px rgba(232,48,74,0.45), 0 16px 48px rgba(232,48,74,0.12); border-color: rgba(232,48,74,0.45); } 100% { box-shadow: 0 0 0 1px rgba(245,166,35,0.55), 0 16px 48px rgba(245,166,35,0.16); border-color: rgba(245,166,35,0.50); } } .compare-card.card-featured { animation: v2WinnerGlow 6s ease-in-out infinite !important; } /* ── 7. Testsieger badge shimmer ── */ @keyframes v2Shimmer { from { background-position:-250% center; } to { background-position:250% center; } } .compare-badge-testsieger { background: linear-gradient(90deg, rgba(245,166,35,0.07), rgba(245,166,35,0.30) 38%, rgba(255,210,80,0.42) 50%, rgba(245,166,35,0.30) 62%, rgba(245,166,35,0.07)) !important; background-size: 300% auto !important; animation: v2Shimmer 2.5s linear infinite !important; } /* ── 8. Section backgrounds — dark chapter colours ── */ .deep-dive { background: #0e0b14 !important; } .story-cases { background: #0B1221 !important; } .ggl-section { background: #0B1221 !important; } /* Accent divider lines per section theme */ .deep-dive::before { content:''; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:180px; height:2px; background:linear-gradient(90deg,transparent,rgba(232,48,74,0.6),transparent); } .story-cases::before { content:''; display:block; position:absolute; top:56px; left:50%; transform:translateX(-50%); width:120px; height:1px; background:linear-gradient(90deg,transparent,rgba(232,48,74,0.35),transparent); } .ggl-section::after { content:''; display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:180px; height:2px; background:linear-gradient(90deg,transparent,rgba(29,184,123,0.55),transparent); z-index:1; } /* ── 9. Reading progress bar — hidden ── */ .reading-progress { display: none !important; } /* ── 10. Noise texture overlay (premium touch) ── */ body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:10000; opacity:0.018; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* ── 11. Deep-dive heading — bigger on desktop ── */ @media (min-width: 1024px) { .deep-dive .deep-dive-heading { font-size: var(--h2-size) !important; } } /* ── 12. Improved card depth on hover ── */ .top-providers .provider-card:hover { box-shadow: 0 28px 72px rgba(0,0,0,0.5), 0 0 0 1px rgba(245,166,35,0.18) !important; } /* ── 13. GGL checker scanning line on loading ── */ .ggl-checker-btn { position:relative; overflow:hidden; } @keyframes v2ScanLine { from { top:-2px; opacity:0.8; } to { top:100%; opacity:0; } } .ggl-checker-btn.is-loading::before { content:''; position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.8),transparent); animation: v2ScanLine 0.7s linear infinite; pointer-events:none; z-index:2; } /* ── 14. Countup styling ── */ .v2-countup { font-variant-numeric:tabular-nums; display:inline; } /* ── 15. Mobile: disable noise + reduce particles ── */ @media (max-width:767px) { body::before { display:none; } .hero .hero-headline { font-size: var(--h1-size) !important; } } /* ── 16. prefers-reduced-motion: no animations ── */ @media (prefers-reduced-motion: reduce) { .hero .hero-bg-image, .v2-particle, .v2-countup, .compare-card.card-featured, .compare-badge-testsieger, .site-nav .nav-cta, .hero .hero-cta { animation: none !important; } } /* ──────────────────────────────────────────────────────── 1. HERO BACKGROUND — Image restored + Mesh in gradient ──────────────────────────────────────────────────────── */ /* Restore the original image at slightly higher opacity */ .hero .hero-bg-image { background: url('/wp-content/themes/casinode/images/site/hero-bg.jpg') center center / cover no-repeat !important; opacity: 0.22 !important; animation: none !important; } /* Mesh animation lives in the gradient overlay layer. Layer 1: dark reading-comfort fade (static). Layer 2: saturated colour mesh (animated). */ .hero .hero-bg-gradient { background: linear-gradient(180deg, rgba(11,18,33,0.08) 0%, rgba(11,18,33,0.82) 58%, #0B1221 100%), linear-gradient(-45deg, rgba(32,6,48,0.80), rgba(4,32,18,0.75), rgba(36,18,4,0.80), rgba(18,4,40,0.78), rgba(4,24,28,0.72), rgba(32,6,48,0.80)) !important; background-size: 100% 100%, 700% 700% !important; animation: v2MeshMove 9s ease infinite !important; } /* Redefine keyframe: more waypoints → smoother colour shift */ @keyframes v2MeshMove { 0% { background-position: center, 0% 50%; } 14% { background-position: center, 60% 10%; } 28% { background-position: center, 100% 30%; } 43% { background-position: center, 80% 90%; } 57% { background-position: center, 20% 100%; } 71% { background-position: center, 0% 70%; } 85% { background-position: center, 40% 20%; } 100% { background-position: center, 0% 50%; } } /* ──────────────────────────────────────────────────────── 2. SEAMLESS SECTION TRANSITIONS Each boundary resolved individually: hero (#0B1221) ↓ story-cases (#110812) map-section (#0B1221) compare-section (#0E1A2C) ggl-section (#0B1221) ↓ addon (#0E1A2C) sotw-section (#0F1827) shuffle+games (#0B1221) ↓ editorial (#0E1A2C) story-mission (#0E1A2C) ──────────────────────────────────────────────────────── */ /* story-cases: matches journey + body — no color break */ .story-cases { background: #0B1221 !important; } /* map-section stays flat #0B1221 */ .map-section { background: #0B1221 !important; } /* ggl-section: now sits below the map (#0B1221) → flat, no top fade (seamless) */ .ggl-section { background: #0B1221 !important; } /* compare-section: flat #0E1A2C, ggl-section fades in below */ .compare-section { background: #0E1A2C !important; } /* journey stays flat #0B1221 */ /* sotw-section: fades in from #0B1221 (journey above), stays #0F1827, fades to #0B1221 (shuffle below) */ .sotw-section { background: linear-gradient(180deg, #0B1221 0%, #0F1827 8%, #0F1827 92%, #0B1221 100%) !important; } /* shuffle-section stays #0B1221 */ .shuffle-section { background: #0B1221 !important; } /* addon-showcase: between ggl (#0B1221) and sotw (#0B1221) — fade in/out symmetrically */ .addon-showcase-section { background: linear-gradient(180deg, #0B1221 0%, #0E1A2C 9%, #0E1A2C 91%, #0B1221 100%) !important; } /* editorial: now directly after games-discover (#0B1221) — fade in from #0B1221 */ .editorial { background: linear-gradient(180deg, #0B1221 0%, #0E1A2C 8%, #0E1A2C 100%) !important; } /* story-mission: flat #0E1A2C (follows editorial which is also #0E1A2C) */ .story-mission { background: #0E1A2C !important; } /* marquee sits between editorial and footer */ .marquee { background: #0E1A2C !important; } /* ──────────────────────────────────────────────────────── 3. SECTION DIVIDERS — gradient fades (visible colour blend) ──────────────────────────────────────────────────────── */ .section-divider { height: 200px !important; background: transparent !important; /* let section gradients do the work */ margin: -100px 0 !important; pointer-events: none; position: relative; z-index: 2; } .section-divider-glow { top: 50% !important; height: 1px; background: linear-gradient(90deg, transparent 5%, rgba(245,166,35,0.08) 25%, rgba(255,255,255,0.05) 50%, rgba(29,184,123,0.08) 75%, transparent 95%) !important; } /* ──────────────────────────────────────────────────────── 4. DEEP-DIVE reset (no separate section exists) ──────────────────────────────────────────────────────── */ .deep-dive { background: transparent !important; } /* ──────────────────────────────────────────────────────── 5. MISC — shadow bleed on hero into journey ──────────────────────────────────────────────────────── */ .hero { box-shadow: 0 60px 120px -20px rgba(11,18,33,1) !important; } /* ──────────────────────────────────────────────────────── 6. SEAMLESS REVEAL — section backgrounds stay solid CSS opacity:0 on section hides its background too, exposing body bg (#0B1221) at section boundaries. Fix: section stays opaque, only inner wrapper animates. ──────────────────────────────────────────────────────── */ .story-cases.section-reveal, .editorial.section-reveal, .story-mission.section-reveal, .addon-showcase-section.section-reveal { opacity: 1 !important; transform: none !important; } .story-cases.section-reveal .story-cases-inner, .editorial.section-reveal .editorial-inner, .story-mission.section-reveal .story-mission-inner, .addon-showcase-section.section-reveal .addon-wrap { opacity: 0; transform: translateY(24px); transition: opacity 0.75s cubic-bezier(0.22,0.61,0.36,1), transform 0.75s cubic-bezier(0.22,0.61,0.36,1); } .story-cases.revealed .story-cases-inner, .editorial.revealed .editorial-inner, .story-mission.revealed .story-mission-inner, .addon-showcase-section.revealed .addon-wrap { opacity: 1; transform: translateY(0); } /* ── Reveal safety net (progressive enhancement) ── * Scroll-Reveal-Inhalt darf nie dauerhaft unsichtbar bleiben. Ohne JS (der * Observer setzt .revealed nie) oder bei prefers-reduced-motion werden ALLE * Reveal-Zustände — inkl. der sektionsspezifischen Inner-Wrapper — auf sichtbar * gezwungen. Normale Nutzer (JS aktiv + Bewegung erlaubt) sehen die Animationen * unverändert; dann greift dieser Block nicht. */ @media (scripting: none), (prefers-reduced-motion: reduce) { .section-reveal, .stagger-children > *, .reveal-left, .reveal-right, .reveal-scale, .story-cases.section-reveal .story-cases-inner, .editorial.section-reveal .editorial-inner, .story-mission.section-reveal .story-mission-inner, .addon-showcase-section.section-reveal .addon-wrap { opacity: 1 !important; transform: none !important; } } /* ──────────────────────────────────────────────────────── 7. HERO PERSONA CARDS — ATF intent selector ──────────────────────────────────────────────────────── */ .hero-persona-intro { font-size: var(--label-size); color: rgba(240,244,248,0.65); margin: 20px 0 18px; line-height: 1.5; } .hero-persona-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .hpg-card { border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.22s ease, box-shadow 0.22s ease; position: relative; } .hpg-card:hover { transform: translateY(-4px); } .hpg-card--danger { background: rgba(232,48,74,0.07); border: 1px solid rgba(232,48,74,0.25); box-shadow: 0 8px 32px -8px rgba(232,48,74,0.18); } .hpg-card--danger:hover { box-shadow: 0 16px 48px -8px rgba(232,48,74,0.28); } .hpg-card--safe { background: rgba(29,184,123,0.07); border: 1px solid rgba(29,184,123,0.25); box-shadow: 0 8px 32px -8px rgba(29,184,123,0.14); } .hpg-card--safe:hover { box-shadow: 0 16px 48px -8px rgba(29,184,123,0.24); } .hpg-card-img { width: 100%; height: 100px; object-fit: cover; display: block; filter: brightness(0.75) saturate(0.9); } .hpg-card-body { padding: 20px 20px 18px; flex: 1; display: flex; flex-direction: column; gap: 14px; } .hpg-card-heading { font-family: var(--font-display); font-size: var(--btn-size); font-weight: 800; line-height: 1.25; letter-spacing: -0.1px; color: var(--color-heading); margin: 0; } .hpg-card--danger .hpg-card-heading em { color: #E8304A; font-style: normal; } .hpg-card--safe .hpg-card-heading em { color: #1DB87B; font-style: normal; } .hpg-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; } .hpg-list li { font-size: var(--badge-size); color: rgba(240,244,248,0.72); display: flex; align-items: center; gap: 7px; line-height: 1.35; } .hpg-list li i { flex-shrink: 0; font-size: var(--badge-size); } .hpg-card--danger .hpg-list li i { color: #E8304A; } .hpg-card--safe .hpg-list li i { color: #1DB87B; } .hpg-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 10px; font-size: var(--label-size); font-weight: 700; cursor: pointer; text-decoration: none; width: 100%; margin-top: auto; transition: filter 0.18s ease; letter-spacing: 0.2px; } .hpg-cta:hover { filter: brightness(1.12); } .hpg-card--danger .hpg-cta { background: #E8304A; color: var(--color-heading); } .hpg-card--safe .hpg-cta { background: #1DB87B; color: var(--color-heading); } @media (max-width: 767px) { .hero-persona-grid { grid-template-columns: 1fr; gap: 12px; } .hpg-card-img { height: 80px; } .hpg-card--safe { order: -1; } .hpg-card--danger { order: 0; } } /* ──────────────────────────────────────────────────────── 8. JOURNEY QUICKNAV — compact ATF strip + slot reel icons ──────────────────────────────────────────────────────── */ .journey { padding: 56px 0 var(--space-md) !important; } .journey::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 64px; background: linear-gradient(to bottom, transparent 0%, #0B1221 100%); pointer-events: none; z-index: 2; } /* Slot reel: icon wrapper clips the spinning icon */ .journey-node-icon { position: relative; overflow: hidden; } /* Lock bounce when reel stops */ @keyframes slotLock { 0% { transform: scale(1) translateY(0); color: inherit; } 18% { transform: scale(1.55) translateY(-5px); color: #F5A623; filter: drop-shadow(0 0 8px rgba(245,166,35,0.7)); } 45% { transform: scale(0.82) translateY(3px); color: #F5A623; } 68% { transform: scale(1.12) translateY(-1px); } 85% { transform: scale(0.96) translateY(0); } 100% { transform: scale(1) translateY(0); color: inherit; filter: none; } } .journey-node-icon.slot-locked { animation: slotLock 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both; } /* Spinning icon blur — reel-strip effect */ @keyframes slotSpin { 0% { transform: translateY(0) scaleY(1); filter: blur(0px); } 25% { transform: translateY(-7px) scaleY(0.6); filter: blur(2.5px); } 50% { transform: translateY(0) scaleY(1); filter: blur(0px); } 75% { transform: translateY(5px) scaleY(0.6); filter: blur(2.5px); } 100% { transform: translateY(0) scaleY(1); filter: blur(0px); } } .journey-node-icon.slot-spinning i { animation: slotSpin 0.09s linear infinite; } @media (max-width: 767px) { .journey { padding: var(--space-md) 20px 48px !important; } } /* ═══════════════════════════════════════════════════════ COMMUNITY AUTH MODAL ═══════════════════════════════════════════════════════ */ .cm-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity 0.25s ease} .cm-overlay.cm-open{opacity:1;pointer-events:all} .cm-backdrop{position:absolute;inset:0;background:rgba(5,10,20,0.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .cm-box{position:relative;width:100%;max-width:420px;background:#0f1a2b;border:1px solid rgba(255,255,255,0.09);border-radius:20px;padding:32px 28px 24px;box-shadow:0 32px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(29,184,123,0.08);transform:translateY(18px) scale(0.97);transition:transform 0.3s cubic-bezier(.22,1,.36,1);overflow:hidden} .cm-overlay.cm-open .cm-box{transform:translateY(0) scale(1)} .cm-box::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:240px;height:1px;background:linear-gradient(90deg,transparent,rgba(29,184,123,0.5),transparent)} .cm-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);color:rgba(240,244,248,0.5);font-size:var(--label-size);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color 0.2s ease,color 0.2s ease,border-color 0.2s ease;line-height:1} .cm-close:hover{background:rgba(255,255,255,0.1);color:rgba(240,244,248,0.9);border-color:rgba(255,255,255,0.15)} .cm-header{display:flex;align-items:center;gap:14px;margin-bottom:24px} .cm-icon-wrap{width:46px;height:46px;border-radius:14px;background:rgba(29,184,123,0.12);border:1px solid rgba(29,184,123,0.25);display:flex;align-items:center;justify-content:center;color:#1DB87B;font-size:var(--h6-size);flex-shrink:0} .cm-title{font-size:var(--body-size);font-weight:800;color:rgba(240,244,248,0.95);line-height:1.2} .cm-sub{font-size:var(--badge-size);color:rgba(240,244,248,0.48);margin-top:2px;line-height:1.4} .cm-tabs{display:flex;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:3px;gap:3px;margin-bottom:24px} .cm-tab{flex:1;padding:9px 12px;border-radius:8px;border:none;background:transparent;color:rgba(240,244,248,0.48);font-size:var(--badge-size);font-weight:700;cursor:pointer;transition:background-color 0.2s ease,color 0.2s ease;font-family:inherit} .cm-tab.cm-tab--active{background:#1DB87B;color:var(--color-heading);box-shadow:0 4px 14px rgba(29,184,123,0.3)} .cm-tab:not(.cm-tab--active):hover{color:rgba(240,244,248,0.8);background:rgba(255,255,255,0.06)} .cm-panel--hidden{display:none} .cm-form{display:flex;flex-direction:column;gap:14px} .cm-field{display:flex;flex-direction:column;gap:5px} .cm-label{font-size:var(--badge-size);font-weight:600;color:rgba(240,244,248,0.5);letter-spacing:0.3px} .cm-input-wrap{position:relative;display:flex;align-items:center} .cm-input{width:100%;padding:11px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);border-radius:10px;color:rgba(240,244,248,0.9);font-size:var(--label-size);font-family:inherit;transition:border-color 0.2s ease,background 0.2s ease;outline:none;box-sizing:border-box} .cm-input-wrap .cm-input{padding-right:42px} .cm-input::placeholder{color:rgba(240,244,248,0.2)} .cm-input:focus{border-color:rgba(29,184,123,0.5);background:rgba(29,184,123,0.04)} .cm-pw-toggle{position:absolute;right:12px;background:none;border:none;color:rgba(240,244,248,0.48);font-size:var(--label-size);cursor:pointer;padding:4px;transition:color 0.2s ease;line-height:1} .cm-pw-toggle:hover{color:rgba(240,244,248,0.7)} .cm-forgot{display:block;text-align:right;font-size:var(--badge-size);color:rgba(29,184,123,0.8);text-decoration:none;margin-top:4px;transition:color 0.2s ease} .cm-forgot:hover{color:#1DB87B} .cm-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer} .cm-check input[type=checkbox]{width:16px;height:16px;margin-top:1px;accent-color:#1DB87B;flex-shrink:0;cursor:pointer} .cm-check span{font-size:var(--badge-size);color:rgba(240,244,248,0.48);line-height:1.5} .cm-link{color:rgba(29,184,123,0.8);text-decoration:none} .cm-link:hover{color:#1DB87B} .cm-btn-primary{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px 20px;border-radius:12px;border:none;background:#1DB87B;color:var(--color-heading);font-size:var(--label-size);font-weight:800;cursor:pointer;transition:background 0.2s ease,transform 0.15s ease,box-shadow 0.2s ease;font-family:inherit;box-shadow:0 8px 24px rgba(29,184,123,0.28);letter-spacing:0.2px} .cm-btn-primary:hover{background:#19a36d;transform:translateY(-1px);box-shadow:0 12px 30px rgba(29,184,123,0.38)} .cm-btn-primary:active{transform:translateY(0)} .cm-or{display:flex;align-items:center;gap:10px;font-size:var(--badge-size);color:rgba(240,244,248,0.48);font-weight:600;letter-spacing:0.5px;text-transform:uppercase} .cm-or::before,.cm-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,0.07)} .cm-btn-social{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 20px;border-radius:12px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);color:rgba(240,244,248,0.75);font-size:var(--badge-size);font-weight:600;cursor:pointer;transition:background-color 0.2s ease,border-color 0.2s ease,color 0.2s ease;font-family:inherit} .cm-btn-social:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.18);color:rgba(240,244,248,0.95)} .cm-switch-line{margin-top:16px;text-align:center;font-size:var(--badge-size);color:rgba(240,244,248,0.48)} .cm-switch-btn{background:none;border:none;color:#1DB87B;font-size:var(--badge-size);font-weight:700;cursor:pointer;padding:0;font-family:inherit;transition:opacity 0.2s ease} .cm-switch-btn:hover{opacity:0.8;text-decoration:underline} .cm-trust{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.06)} .cm-trust span{display:flex;align-items:center;gap:5px;font-size:var(--badge-size);color:rgba(240,244,248,0.48);font-weight:600} .cm-trust i{color:rgba(29,184,123,0.6);font-size:var(--badge-size)} @media(max-width:480px){.cm-box{padding:24px 18px 20px;border-radius:16px}.cm-trust{gap:12px}.cm-trust span{font-size:var(--badge-size)}} /* Error / success messages inside modal */ .cm-msg{font-size:var(--badge-size);font-weight:600;border-radius:8px;padding:0;max-height:0;overflow:hidden;transition:padding 0.2s,max-height 0.2s,margin 0.2s} .cm-msg:not(:empty){padding:10px 14px;max-height:60px;margin-bottom:8px} .cm-msg--error{background:rgba(232,48,74,0.12);color:#E8304A;border:1px solid rgba(232,48,74,0.2)} .cm-msg--ok{background:rgba(29,184,123,0.12);color:#1DB87B;border:1px solid rgba(29,184,123,0.2)} /* Nav user chip (logged-in state) */ .nav-user-chip{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:100px;cursor:default} .nav-user-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0} .nav-user-name{font-size:var(--badge-size);font-weight:700;color:var(--color-heading);white-space:nowrap} .nav-user-logout{background:none;border:none;color:rgba(240,244,248,0.5);cursor:pointer;padding:2px 4px;font-size:var(--badge-size);transition:color 0.2s;line-height:1} .nav-user-logout:hover{color:#E8304A} /* FAB compose box */ .fab-compose{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(255,255,255,0.03);border-top:1px solid rgba(255,255,255,0.06)} .fab-compose-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0} .fab-compose-input{flex:1;min-width:0;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:8px 14px;color:var(--color-heading);font-size:var(--badge-size);font-family:inherit;outline:none;transition:border-color 0.2s} .fab-compose-input:focus{border-color:rgba(29,184,123,0.4);background:rgba(255,255,255,0.07)} .fab-compose-input::placeholder{color:rgba(240,244,248,0.4)} .fab-compose-send{width:32px;height:32px;border-radius:50%;background:#1DB87B;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:background 0.2s,transform 0.15s} .fab-compose-send:hover{background:#22E88F;transform:scale(1.08)} .fab-compose-send:disabled{opacity:0.5;cursor:not-allowed} /* New post animation */ .fab-post--new{animation:fabPostIn 0.4s cubic-bezier(0.22,1,0.36,1) both} @keyframes fabPostIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}} /* ══════════════════════════════════════════ INNER CONTAINER MOBILE PADDING All section inners use padding: 0 40px on desktop. Reduce horizontally on smaller screens. ══════════════════════════════════════════ */ @media (max-width: 1023px) { .hero .hero-content, .moments .moments-inner, .deep-dive .deep-dive-inner, .map-section .map-section-inner, .spielo-section .spielo-inner, .shuffle-section .shuffle-inner, .compare-section .compare-section-inner, .eeat-inner, .editorial-inner, .newsletter .newsletter-inner, .story-cases-inner, .story-mission-inner, .casino-reviews .reviews-inner, .spielbanken-featured .sf-inner, .journey-inner, .games-discover-inner, .ggl-inner { padding-left: 24px; padding-right: 24px; } } @media (max-width: 767px) { .hero .hero-content, .moments .moments-inner, .deep-dive .deep-dive-inner, .map-section .map-section-inner, .spielo-section .spielo-inner, .shuffle-section .shuffle-inner, .compare-section .compare-section-inner, .eeat-inner, .editorial-inner, .newsletter .newsletter-inner, .story-cases-inner, .story-mission-inner, .casino-reviews .reviews-inner, .spielbanken-featured .sf-inner, .journey-inner, .games-discover-inner, .ggl-inner { padding-left: 20px; padding-right: 20px; } } @media (max-width: 389px) { .hero .hero-content, .moments .moments-inner, .deep-dive .deep-dive-inner, .map-section .map-section-inner, .spielo-section .spielo-inner, .shuffle-section .shuffle-inner, .compare-section .compare-section-inner, .eeat-inner, .editorial-inner, .newsletter .newsletter-inner, .story-cases-inner, .story-mission-inner, .casino-reviews .reviews-inner, .spielbanken-featured .sf-inner, .journey-inner, .games-discover-inner, .ggl-inner { padding-left: 12px; padding-right: 12px; } } /* ── GLOBAL BODY TEXT OPACITY 0.85 ─────────────────────────────────────── */ .hero .hero-sub, .hero-persona-intro, .moments .moment-text, .deep-dive .deep-dive-text, .map-section .map-section-text, .map-section .map-section-note, .spielo-section .spielo-text, .shuffle-section .shuffle-text, .compare-section .compare-section-text, .compare-section .compare-section-note, .cd-verdict-text, .eeat-text, .eeat-lead-bio, .casino-reviews .reviews-text, .journey-text, .ggl-text, .section-bridge-text, .sotw-sub, .sotw-hero-banner-tagline, .story-mission-text, .story-cases-intro, .story-cases-disclaimer, .milestone-text, .usps .usps-sub, .final-cta .final-cta-sub, .addon-showcase-content > p { color: rgba(240,244,248,0.85); } .hero .hero-sub strong, .moments .moment-text strong, .deep-dive .deep-dive-text strong, .map-section .map-section-text strong, .map-section .map-section-note strong, .spielo-section .spielo-text strong, .shuffle-section .shuffle-text strong, .compare-section .compare-section-text strong, .compare-section .compare-section-note strong, .cd-verdict-text strong, .eeat-text strong, .casino-reviews .reviews-text strong, .ggl-text strong, .section-bridge-text strong, .sotw-sub strong, .story-mission-text strong, .story-cases-intro strong, .milestone-text strong { color: rgba(240,244,248,0.95); } /* ── GGL SECTION — VISUAL UPGRADE ────────────────────────────────────────── */ /* Checker: bigger input, more prominent form area */ .ggl-checker-form { gap: 10px; } .ggl-checker-input { padding: 16px 22px; font-size: var(--btn-size); border-radius: 16px; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.12); } .ggl-checker-input:focus { border-color: rgba(29,184,123,0.6); box-shadow: 0 0 0 4px rgba(29,184,123,0.12), inset 0 0 0 1px rgba(29,184,123,0.2); } .ggl-checker-btn { padding: 16px 32px; border-radius: 16px; font-size: var(--btn-size); letter-spacing: 0.3px; box-shadow: 0 4px 20px rgba(29,184,123,0.3); } .ggl-checker-btn:hover { box-shadow: 0 6px 28px rgba(29,184,123,0.45); } /* Quick-test chips — more visible with green accent */ .ggl-quick-btn { padding: 7px 15px; border-radius: 100px; background: rgba(29,184,123,0.06); border: 1px solid rgba(29,184,123,0.16); color: rgba(240,244,248,0.82); font-size: var(--badge-size); font-weight: 600; } .ggl-quick-btn:hover { background: rgba(29,184,123,0.14); border-color: rgba(29,184,123,0.45); color: #1DB87B; transform: translateY(-1px); } .ggl-quick-label { color: rgba(240,244,248,0.48); font-size: var(--badge-size); } /* Demo rows — more breathing room */ .ggl-demo-rows { min-height: 60px; } .ggl-demo-icon { width: 40px; height: 40px; border-radius: 12px; font-size: var(--btn-size); } .ggl-demo-status { font-size: var(--label-size); font-weight: 800; } .ggl-demo-detail { font-size: var(--badge-size); color: rgba(240,244,248,0.62); } /* Stats ticker — premium feel */ .ggl-ticker { background: linear-gradient(155deg, rgba(12,22,42,1) 0%, rgba(8,15,30,0.95) 100%); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 20px 60px -12px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(29,184,123,0.05); } .ggl-ticker-num { font-size: clamp(52px, 8vw, 80px); letter-spacing: -2px; text-shadow: 0 0 60px rgba(29,184,123,0.4), 0 0 20px rgba(29,184,123,0.2); } .ggl-ticker-label { font-size: var(--badge-size); color: rgba(240,244,248,0.55); margin-bottom: 22px; } .ggl-ticker-stat { margin-bottom: 16px; } .ggl-ticker-bar-track { height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; } .ggl-ticker-bar-fill { height: 5px; border-radius: 3px; } .ggl-dot-green { background: #1DB87B; box-shadow: 0 0 6px rgba(29,184,123,0.7); } .ggl-dot-gold { background: #F5A623; box-shadow: 0 0 6px rgba(245,166,35,0.7); } .ggl-bar-green { background: linear-gradient(90deg, rgba(29,184,123,0.7), #1DB87B); } .ggl-bar-gold { background: linear-gradient(90deg, rgba(245,166,35,0.7), #F5A623); } .ggl-dot-blue { background: #3B82F6; box-shadow: 0 0 6px rgba(59,130,246,0.7); } .ggl-dot-purple { background: #A855F7; box-shadow: 0 0 6px rgba(168,85,247,0.7); } .ggl-bar-blue { background: linear-gradient(90deg, rgba(59,130,246,0.7), #3B82F6); } .ggl-bar-purple { background: linear-gradient(90deg, rgba(168,85,247,0.7), #A855F7); } .ggl-ticker-foot-num { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.5px; text-shadow: 0 0 32px rgba(245,166,35,0.45); } .ggl-ticker-stat-head strong { font-size: var(--label-size); font-weight: 800; color: #fff; } /* Addon strip — full card feel */ .ggl-addon-strip { padding: 18px 24px; border-radius: 16px; background: linear-gradient(90deg, rgba(245,166,35,0.08) 0%, rgba(245,166,35,0.03) 100%); border: 1px solid rgba(245,166,35,0.22); gap: 16px; } .ggl-addon-strip:hover { background: linear-gradient(90deg, rgba(245,166,35,0.13) 0%, rgba(245,166,35,0.06) 100%); border-color: rgba(245,166,35,0.38); } .ggl-addon-strip-icon { width: 44px; height: 44px; border-radius: 12px; font-size: var(--btn-size); background: rgba(245,166,35,0.15); border: 1px solid rgba(245,166,35,0.2); box-shadow: 0 0 20px rgba(245,166,35,0.15); } .ggl-addon-strip-text { font-size: var(--label-size); color: rgba(240,244,248,0.65); } .ggl-addon-strip-text strong { font-size: var(--label-size); } .ggl-addon-strip-cta { padding: 8px 16px; border-radius: 10px; background: rgba(245,166,35,0.15); border: 1px solid rgba(245,166,35,0.3); font-size: var(--label-size); font-weight: 700; gap: 7px; } /* Filter buttons — more impact */ .ggl-filter-btn { padding: 8px 16px; font-size: var(--badge-size); font-weight: 600; letter-spacing: 0.1px; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease; } .ggl-filter-btn:hover { background: rgba(29,184,123,0.07); border-color: rgba(29,184,123,0.22); color: rgba(240,244,248,0.82); } .ggl-filter-btn.ggl-active { background: rgba(29,184,123,0.13); border-color: rgba(29,184,123,0.4); color: #1DB87B; box-shadow: 0 0 12px rgba(29,184,123,0.1); } /* Table — better readability */ .ggl-table th { padding: 14px 18px; font-size: var(--badge-size); color: rgba(240,244,248,0.48); letter-spacing: 1.2px; } .ggl-table td { padding: 15px 18px; font-size: var(--label-size); } .ggl-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.012); } .ggl-table tbody tr:hover { background: rgba(29,184,123,0.04); } .ggl-domain-tag { font-size: var(--badge-size); padding: 4px 10px; border-radius: 7px; } .ggl-art-tag { font-size: var(--badge-size); padding: 4px 10px; border-radius: 7px; } .ggl-badge-legal { padding: 5px 12px; font-size: var(--badge-size); } /* ── GGL UNIFIED LAYOUT ─────────────────────────────────────────────────── */ /* Hide addon strip */ .ggl-addon-strip { display: none !important; } /* Grid → full width single column */ .ggl-checker-grid { grid-template-columns: 1fr; gap: 16px; } /* Unified input group: input + chips = one bordered container */ .ggl-input-group { border: 1px solid rgba(255,255,255,0.18); border-radius: 18px; background: rgba(255,255,255,0.96); overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 4px 24px rgba(0,0,0,0.25); } .ggl-input-group:focus-within { border-color: rgba(29,184,123,0.6); box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 0 0 4px rgba(29,184,123,0.15); } .ggl-input-group .ggl-checker-form { padding: 6px; border-bottom: none; align-items: center; } .ggl-input-group .ggl-quick-tests { display: none; } .ggl-input-group .ggl-checker-input { background: transparent; border: none; border-radius: 0; box-shadow: none !important; padding: 16px 18px; color: #0a1628; font-size: var(--btn-size); } .ggl-input-group .ggl-checker-input::placeholder { color: rgba(10,22,40,0.45); } .ggl-input-group .ggl-checker-input:focus { border: none; box-shadow: none !important; outline: none; } .ggl-input-group .ggl-checker-btn { border-radius: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; width: auto; font-size: var(--badge-size); font-weight: 700; letter-spacing: 0.3px; height: 44px; flex-shrink: 0; } .ggl-input-group .ggl-checker-btn i { font-size: var(--badge-size); } .ggl-input-group .ggl-quick-tests { padding: 9px 14px 11px; background: rgba(0,0,0,0.03); } .ggl-input-group .ggl-quick-label { color: rgba(10,22,40,0.45); } .ggl-input-group .ggl-quick-btn { color: rgba(10,22,40,0.7); background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); } .ggl-input-group .ggl-quick-legal { background: rgba(29,184,123,0.08); border-color: rgba(29,184,123,0.22); color: rgba(10,22,40,0.75); } .ggl-input-group .ggl-quick-illegal { background: rgba(232,48,74,0.06); border-color: rgba(232,48,74,0.18); color: rgba(10,22,40,0.75); } .ggl-input-group .ggl-quick-legal:hover { background: rgba(29,184,123,0.15); color: #0d7a52; } .ggl-input-group .ggl-quick-illegal:hover { background: rgba(232,48,74,0.1); color: #b01e32; } /* Ticker → compact horizontal stats row */ .ggl-ticker { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 22px; border-radius: 14px; box-shadow: none; } .ggl-ticker::before { display: none; } .ggl-ticker-eyebrow { display: none; } .ggl-ticker-divider { display: none; } .ggl-ticker-num { font-size: var(--h4-size); letter-spacing: -0.5px; text-shadow: none; color: #1DB87B; line-height: 1; margin-right: 2px; } .ggl-ticker-num.has-data { color: #1DB87B; } .ggl-ticker-label { font-size: var(--badge-size); margin: 0 20px 0 0; white-space: nowrap; color: rgba(240,244,248,0.5); } .ggl-ticker-stat { flex-direction: row; align-items: center; gap: 7px; margin-bottom: 0; padding: 5px 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 100px; } .ggl-ticker-bar-track { display: none; } .ggl-ticker-stat-head { gap: 6px; } .ggl-ticker-stat-head strong { font-size: var(--badge-size); font-weight: 800; color: #fff; min-width: auto; } .ggl-ticker-foot { border-top: none; padding-top: 0; margin-top: 0; margin-left: auto; display: flex; align-items: center; gap: 8px; } .ggl-ticker-foot-num { font-size: var(--h5-size); letter-spacing: -0.3px; text-shadow: none; } .ggl-ticker-foot-label { margin-top: 0; white-space: nowrap; font-size: var(--badge-size); } /* ── GGL MOBILE FIXES ───────────────────────────────────────────────────── */ @media (max-width: 1023px) { /* Keep input + button in one row inside the white container */ .ggl-input-group .ggl-checker-form { flex-direction: row !important; } .ggl-input-group .ggl-checker-btn { width: auto !important; } } @media (max-width: 767px) { /* Input group: single row, compact */ .ggl-input-group .ggl-checker-form { flex-direction: row !important; padding: 4px; } .ggl-input-group .ggl-checker-input { padding: 12px 14px; font-size: var(--label-size); } .ggl-input-group .ggl-checker-btn { width: auto !important; height: 40px; padding: 0 14px; font-size: var(--badge-size); } /* Meta line: allow wrapping, prevent overflow */ .ggl-checker-meta { font-size: 11px; padding: 5px 10px; white-space: normal; } /* Ticker: full-width wrap, no auto-margin pushing foot off */ .ggl-ticker { padding: 12px 16px; gap: 6px 10px; } .ggl-ticker-num { font-size: var(--h4-size); } .ggl-ticker-label { margin-right: 8px; white-space: normal; } .ggl-ticker-foot { margin-left: 0; } .ggl-ticker-foot-num { font-size: var(--label-size); } .ggl-ticker-foot-label { white-space: normal; } .ggl-ticker-stat { padding: 4px 10px; } } /* ──────────────────────────────────────────────────────────── Fix: fehlendes Leerzeichen vor dem farbigen Akzent-Span in Section-Headings (Markup klebt das Akzentwort ans erste Wort, z. B. „Echte Situationen.Echte Konsequenzen."). Zentral hier statt in jeder Section/Template; bleibt umbruchfähig. ──────────────────────────────────────────────────────────── */ .story-mission-heading-green::before, .story-cases-heading-red::before, .map-section-heading-gold::before, .ggl-heading-green::before, .compare-section-heading-blue::before, .shuffle-heading-red::before, .editorial-heading-red::before { content: "\0020"; } /* ════════════════════════════════════════════════════════════ GlüStV-Berater — Startseiten-Sektion (#gluestvBerater) Volle-Breite 2-Spalten-Layout (Text | Karte) im Muster der Nachbarsektionen; H1-Heading-Größe wie diese. Linke Spalte als Flex-Column: Intro oben, Datenquelle unten an die Kartenkante gepinnt (margin-top:auto) → kein Leerraum. ════════════════════════════════════════════════════════════ */ .gluestv-section { padding: var(--space-lg) 0; background: #090C15; } .gluestv-section .gluestv-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .gluestv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 60px; align-items: stretch; } .gluestv-intro { display: flex; flex-direction: column; } .gluestv-eyebrow { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; } .gluestv-eyebrow-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #F5A623; flex-shrink: 0; } .gluestv-heading { font-family: var(--font-display); font-size: var(--h1-size); font-weight: var(--h1-fw); line-height: var(--h1-lh); letter-spacing: -2px; margin: 0 0 var(--h1-mb); } .gluestv-heading-gold { color: #F5A623; font-style: italic; } .gluestv-lead { font-size: var(--body-size); line-height: var(--body-lh); color: rgba(240,244,248,0.72); max-width: 600px; margin: 0; } .gluestv-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .gluestv-points li { display: flex; align-items: center; gap: 11px; font-size: var(--body-size); color: rgba(240,244,248,0.82); } .gluestv-points i { color: #1DB87B; flex-shrink: 0; } /* Stat-Kacheln */ .gluestv-stats { display: flex; gap: 14px; margin-top: 32px; } .gluestv-stat { flex: 1; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 16px; } .gluestv-stat-num { display: block; font-family: var(--font-display); font-size: var(--h4-size); font-weight: 800; color: #F5A623; line-height: 1.1; } .gluestv-stat-label { display: block; margin-top: 4px; font-size: var(--caption-size); text-transform: uppercase; letter-spacing: 1px; color: rgba(240,244,248,0.55); } /* Datenquelle ans untere Spaltenende (bündig mit Kartenunterkante) */ .gluestv-source { margin: 30px 0 0; margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 10px; font-size: var(--caption-size); line-height: var(--caption-lh); color: rgba(240,244,248,0.50); } .gluestv-source i { color: #F5A623; font-size: 16px; flex-shrink: 0; } /* Berater-Karte füllt die rechte Spalte */ .gluestv-section .gluestv-faq { margin: 0; max-width: none; } @media (max-width: 980px) { .gluestv-grid { grid-template-columns: 1fr; gap: 36px; } .gluestv-source { margin-top: 28px; } } @media (max-width: 640px) { .gluestv-section .gluestv-inner { padding: 0 16px; } .gluestv-stats { flex-wrap: wrap; } .gluestv-stat { flex: 1 1 calc(50% - 7px); } } /* ════════════════════════════════════════════════════════════ Legalitäts-Hub (#legalHub) — Tab-Sektion, die die bestehenden Sektionen #gglWhitelist (Lizenz-Abfrage) und #gluestvBerater (GlüStV-Berater) UNVERÄNDERT in Panels wickelt. IDs/JS bleiben; die eigenen Eyebrows/Überschriften der Tools werden ausgeblendet, weil der Hub Rahmen + Titel liefert. ════════════════════════════════════════════════════════════ */ .legal-hub { padding: var(--space-lg) 0; background: #0E1A2C; } .legal-hub-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; } .legal-hub-eyebrow { font-size: var(--badge-size); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: rgba(240,244,248,0.50); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; } .legal-hub-dot { width: 8px; height: 8px; border-radius: 50%; background: #1DB87B; flex-shrink: 0; box-shadow: 0 0 0 0 rgba(29,184,123,0.6); animation: gglPulse 2s infinite; } .legal-hub-heading { font-family: var(--font-display); font-size: var(--h1-size); font-weight: var(--h1-fw); line-height: var(--h1-lh); letter-spacing: -2px; margin: 0 0 16px; } .legal-hub-heading-gold { color: #F5A623; font-style: italic; } .legal-hub-lead { font-size: var(--body-size); line-height: var(--body-lh); color: rgba(240,244,248,0.72); max-width: none; margin: 0; } /* Tab-Leiste (Segmented Control) */ .legal-hub-tabs { display: inline-flex; gap: 6px; margin: 30px 0 0; padding: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; flex-wrap: wrap; } .legal-hub-tab { font-family: var(--font-body); font-size: var(--btn-size); font-weight: 600; color: rgba(240,244,248,0.70); background: transparent; border: none; cursor: pointer; padding: 11px 20px; border-radius: 10px; display: inline-flex; align-items: center; gap: 9px; transition: background .18s, color .18s; } .legal-hub-tab i { font-size: 15px; } .legal-hub-tab:hover { color: #fff; } .legal-hub-tab.is-active { background: linear-gradient(135deg, #ffce6e, #f5a623); color: #1a1205; } .legal-hub-panels { margin-top: 26px; } .legal-hub-panel { display: none; } .legal-hub-panel.is-active { display: block; } /* Im Hub: Fließtext (Sync-/Intro-Zeile) volle Breite, Abstände gestrafft */ .legal-hub .ggl-text { max-width: none; margin-bottom: 26px; } /* Innere Sektionen entschlacken: eigenes Chrome + eigene Überschriften weg */ /* !important nötig, da .ggl-section an anderer Stelle mit background:#0B1221 !important gesetzt ist */ .legal-hub .ggl-section, .legal-hub .gluestv-section { padding: 0; background: transparent !important; } .legal-hub .ggl-inner, .legal-hub .gluestv-inner { max-width: none; padding: 0; } .legal-hub .ggl-eyebrow, .legal-hub .ggl-heading, .legal-hub .gluestv-intro { display: none; } .legal-hub .gluestv-grid { display: block; } .legal-hub .gluestv-faq { margin: 0; max-width: none; } @media (max-width: 640px) { .legal-hub-inner { padding: 0 16px; } .legal-hub-tabs { display: flex; } .legal-hub-tab { flex: 1; justify-content: center; padding: 11px 12px; } }