/* ========================================================================== GEEKS & GAMES – NEXT-GEN CYBER GAMING DESIGN SYSTEM 2026 ========================================================================== */ :root { --gg-bg-darkest: #05070c; --gg-bg-main: #090d16; --gg-bg-surface: #101626; --gg-bg-surface-hover: #162035; --gg-bg-card: #131b2d; --gg-border: rgba(255, 255, 255, 0.12); --gg-border-highlight: rgba(0, 242, 254, 0.45); --gg-text-white: #ffffff; --gg-text-light: #e2e8f0; --gg-text-muted: #94a3b8; --gg-cyan: #00f2fe; --gg-blue: #38bdf8; --gg-purple: #a855f7; --gg-emerald: #10b981; --gg-grad-primary: linear-gradient(135deg, #00f2fe 0%, #3b82f6 100%); --gg-radius-sm: 8px; --gg-radius-md: 14px; --gg-radius-lg: 20px; --gg-radius-full: 9999px; --gg-glow-cyan: 0 0 25px rgba(0, 242, 254, 0.35); } body, html, #wrap, .main-wrap, .site-content { background-color: var(--gg-bg-darkest) !important; color: var(--gg-text-light) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; scroll-behavior: smooth; } /* Fix Full Bleed Container */ .page-template-no-wrapper .entry-content, .page-template-no-wrapper .site-main, .page-template-no-wrapper #primary { padding: 0 !important; margin: 0 !important; max-width: 100% !important; background: var(--gg-bg-darkest) !important; } /* Bento Grid */ .gg-bento-hero { display: grid; grid-template-columns: 1.8fr 1.1fr 0.95fr; gap: 20px; margin-bottom: 48px; } @media (max-width: 1050px) { .gg-bento-hero { grid-template-columns: 1fr; } } /* Card Transitions */ .gg-card { background: var(--gg-bg-surface); border: 1px solid var(--gg-border); border-radius: var(--gg-radius-md); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 20px rgba(0,0,0,0.4); transition: all 0.25s ease; position: relative; } .gg-card:hover { transform: translateY(-4px); border-color: var(--gg-border-highlight); box-shadow: 0 12px 30px rgba(0, 242, 254, 0.2); } .gg-card-thumb { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; background: #090d16; } .gg-card-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(1.1); transition: transform 0.4s ease; } .gg-card:hover .gg-card-thumb img { transform: scale(1.06); } /* Glassmorphism fuer den Sticky Header */ .gg-site-header { -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); background: rgba(13, 18, 31, 0.82) !important; } /* Hamburger-Button: nur mobil sichtbar */ .gg-hamburger-btn { display: none; background: transparent; border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; width: 44px; height: 44px; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .gg-hamburger-btn span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .gg-hamburger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .gg-hamburger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .gg-hamburger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Drawer-Panel */ .gg-drawer { position: fixed; top: 0; right: 0; width: min(86vw, 340px); height: 100%; background: #0b111d; border-left: 1px solid rgba(255,255,255,0.10); box-shadow: -18px 0 45px rgba(0,0,0,.55); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 100000; display: flex; flex-direction: column; padding: 18px 18px 28px; overflow-y: auto; visibility: hidden; } .gg-drawer.is-open { transform: translateX(0); visibility: visible; } .gg-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.62); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 99999; } .gg-drawer-overlay.is-open { opacity: 1; pointer-events: auto; } .gg-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.10); } .gg-drawer-title { font-weight: 900; color: #fff; font-size: 1rem; letter-spacing: .04em; } .gg-drawer-close { background: transparent; border: 0; color: #94a3b8; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 4px; } .gg-drawer-close:hover { color: #00f2fe; } .gg-drawer ul { list-style: none; margin: 0; padding: 0; } .gg-drawer-link { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 10px; color: #e2e8f0 !important; text-decoration: none; font-weight: 800; font-size: 1rem; border: 1px solid transparent; } .gg-drawer-link:hover, .gg-drawer-link:focus { background: #131b2d; color: #fff !important; border-color: rgba(0,242,254,.45); } .gg-drawer-search { margin: 6px 0 18px; display: flex; gap: 8px; } .gg-drawer-search input { flex: 1; background: #131b2d; border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; padding: 12px 14px; color: #fff; font-size: .95rem; } .gg-drawer-search input::placeholder { color: #64748b; } .gg-drawer-search button { background: linear-gradient(135deg,#00f2fe,#3b82f6); border: 0; border-radius: 10px; padding: 0 16px; color: #041018; font-weight: 900; cursor: pointer; } body.gg-drawer-open { overflow: hidden; } @media (max-width: 980px) { .gg-hamburger-btn { display: flex; } } @media (min-width: 981px) { .gg-drawer, .gg-drawer-overlay { display: none !important; } } (function () { function ready(fn) { if (document.readyState !== 'loading') fn(); else document.addEventListener('DOMContentLoaded', fn); } ready(function () { var header = document.querySelector('.gg-site-header'); if (!header || document.querySelector('.gg-hamburger-btn')) return; // 1) "Startseite" -> "Home" header.querySelectorAll('.gg-nav-link').forEach(function (a) { if (a.textContent.trim().toLowerCase() === 'startseite') a.textContent = 'Home'; }); // 2) Hamburger-Button einsetzen var btn = document.createElement('button'); btn.className = 'gg-hamburger-btn'; btn.setAttribute('aria-label', 'Menü öffnen'); btn.setAttribute('aria-expanded', 'false'); btn.setAttribute('aria-controls', 'gg-drawer'); btn.innerHTML = ''; var right = header.querySelector('.gg-header-right') || header.firstElementChild; right.appendChild(btn); // 3) Drawer + Overlay var overlay = document.createElement('div'); overlay.className = 'gg-drawer-overlay'; var drawer = document.createElement('nav'); drawer.className = 'gg-drawer'; drawer.id = 'gg-drawer'; drawer.setAttribute('aria-label', 'Hauptmenü mobil'); drawer.innerHTML = '
' + 'GEEKS&GAMES' + '' + '
' + '' + '' + '' + '' + ''; document.body.appendChild(overlay); document.body.appendChild(drawer); function open() { drawer.classList.add('is-open'); overlay.classList.add('is-open'); btn.setAttribute('aria-expanded', 'true'); document.body.classList.add('gg-drawer-open'); var f = drawer.querySelector('input[type="search"]'); if (f) setTimeout(function () { f.focus(); }, 260); } function close() { drawer.classList.remove('is-open'); overlay.classList.remove('is-open'); btn.setAttribute('aria-expanded', 'false'); document.body.classList.remove('gg-drawer-open'); btn.focus(); } btn.addEventListener('click', function () { drawer.classList.contains('is-open') ? close() : open(); }); overlay.addEventListener('click', close); drawer.querySelector('.gg-drawer-close').addEventListener('click', close); document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && drawer.classList.contains('is-open')) close(); }); window.addEventListener('resize', function () { if (window.innerWidth > 980 && drawer.classList.contains('is-open')) close(); }); }); })(); /* Hartkodierte Alt-Leiste aus footer.php komplett ausblenden */ .gg-partnerlinks-section { display: none !important; } /* Rohe MageNet-Container unsichtbar, bis sie im Rahmen sitzen */ .mads-block { display: none; } /* Partnerlinks-Rahmen im Footer */ .gg-partnerframe { max-width: 1200px; margin: 28px auto 34px; padding: 18px 22px 20px; background: #0b111d; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; box-sizing: border-box; } .gg-partnerframe-title { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.09em; color: #94a3b8; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); } .gg-partnerframe-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .gg-partnerframe-body .mads-block { display: inline-flex !important; } .gg-partnerframe-body a { display: inline-flex; align-items: center; gap: 6px; background: #131b2d; border: 1px solid rgba(255,255,255,0.12); color: #cbd5e1 !important; font-size: 0.85rem; font-weight: 600; padding: 7px 15px; border-radius: 9999px; text-decoration: none; transition: all .2s ease; } .gg-partnerframe-body a:hover { border-color: rgba(0,242,254,0.55); color: #ffffff !important; transform: translateY(-1px); } @media (max-width: 600px) { .gg-partnerframe { margin: 20px 14px 26px; padding: 16px; } } (function () { function ready(fn) { if (document.readyState !== 'loading') fn(); else document.addEventListener('DOMContentLoaded', fn); } ready(function () { if (document.querySelector('.gg-partnerframe')) return; // 1) Hartkodierte Alt-Leiste(n) aus dem DOM entfernen document.querySelectorAll('.gg-partnerlinks-section').forEach(function (el) { el.remove(); }); // 2) MageNet-Bloecke einsammeln; nur die mit echtem Link zaehlen var blocks = Array.prototype.slice.call(document.querySelectorAll('.mads-block')); var filled = blocks.filter(function (b) { return b.querySelector('a'); }); var empty = blocks.filter(function (b) { return !b.querySelector('a'); }); // leere Container entfernen (Platzhalter des Plugins) empty.forEach(function (b) { b.remove(); }); if (!filled.length) return; // Duplikate mit identischer URL verwerfen -> Link erscheint nur einmal var seen = {}; var keep = []; filled.forEach(function (b) { var a = b.querySelector('a'); var href = (a && a.getAttribute('href')) || ''; if (seen[href]) { b.remove(); return; } seen[href] = true; keep.push(b); }); if (!keep.length) return; // 3) Rahmen bauen und in den Footer haengen var frame = document.createElement('section'); frame.className = 'gg-partnerframe'; frame.setAttribute('aria-label', 'Partnerlinks'); frame.innerHTML = '

Partnerlinks

' + '
'; var body = frame.querySelector('.gg-partnerframe-body'); keep.forEach(function (b) { body.appendChild(b); }); var footer = document.querySelector('footer.site-footer') || document.querySelector('footer') || document.body; if (footer.parentNode && footer.tagName === 'FOOTER') { footer.parentNode.insertBefore(frame, footer); } else { footer.appendChild(frame); } }); })();