/* Gaming Insider — Design System
   Tokens, Basis-Styles, Komponenten. Dark = Default, Light via [data-theme="light"]. */

:root{--bg:#0a0a0e;--surface:#14141c;--panel:linear-gradient(120deg,#12121a,#15131f);--chrome:rgba(10,10,14,0.72);--text:#f4f4f7;--text2:#c9c9d4;--muted:#8a8a97;--border:rgba(255,255,255,0.08);--slot:#16161f;--inset:rgba(255,255,255,0.06);--accent:#1a7ae8;--deal:#10b981;--veil:linear-gradient(180deg,rgba(10,10,14,0.55) 0%,rgba(10,10,14,0.74) 34%,rgba(10,10,14,0.9) 100%)}
:root[data-theme="light"]{--bg:#eceef4;--surface:#ffffff;--panel:linear-gradient(120deg,#ffffff,#f3f4f8);--chrome:rgba(255,255,255,0.85);--text:#15151d;--text2:#41414d;--muted:#63636f;--border:rgba(12,12,20,0.1);--slot:#e7e8ef;--inset:rgba(12,12,20,0.08);--veil:linear-gradient(180deg,rgba(236,238,244,0.72) 0%,rgba(236,238,244,0.88) 32%,rgba(236,238,244,0.96) 100%)}

/* Durchscheinende Flächen auf Startseite + Archiv-/Suchseiten (kein langer Fließtext):
   --surface für die .gi-card-Kacheln und --panel für den Archiv-Header-Block transparenter
   -> der feste Kinohintergrund scheint klar durch (ohne Blur, wie in der Vorlage).
   Artikel-/Seiten-/Hub-Templates bleiben bewusst opak (bessere Lesbarkeit langer Prosa). */
.home .gi-card,.archive .gi-card,.search .gi-card{--surface:rgba(10,10,14,0.48)}
:root[data-theme="light"] .home .gi-card,:root[data-theme="light"] .archive .gi-card,:root[data-theme="light"] .search .gi-card{--surface:rgba(232,234,240,0.55)}
.archive,.search{--panel:rgba(10,10,14,0.42)}
:root[data-theme="light"] .archive,:root[data-theme="light"] .search{--panel:rgba(235,237,243,0.55)}
/* Paginierung wie Vorlage: zentrierte quadratische Pill-Buttons, aktive Seite im Säulen-Akzent
   (--gi-acc/--gi-acc-soft werden im Archiv inline gesetzt; Fallback = Marken-Akzent). */
.gi-pagination{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.pagination .nav-links{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:36px}
.gi-pagination .page-numbers,.pagination .page-numbers{min-width:42px;height:42px;padding:0 12px;border-radius:11px;border:1px solid var(--border);background:var(--chrome);color:var(--text2);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:all .15s ease}
.gi-pagination a.page-numbers:hover,.pagination a.page-numbers:hover{border-color:var(--gi-acc,var(--accent));color:var(--text)}
.gi-pagination .page-numbers.current,.pagination .page-numbers.current{border-color:var(--gi-acc,var(--accent));background:var(--gi-acc-soft,rgba(26,122,232,0.16));color:var(--text)}
.gi-pagination .page-numbers.dots,.pagination .page-numbers.dots{border:none;background:transparent;color:var(--muted);min-width:auto;padding:0 4px}
.gi-pagination .page-numbers.prev,.gi-pagination .page-numbers.next,.pagination .page-numbers.prev,.pagination .page-numbers.next{width:42px;padding:0}
/* Titelstory-Parallax (hero-parallax.js): Glow und Content folgen der Maus.
   will-change/transition sorgen für flüssiges, weich nachlaufendes Verschieben. */
.gi-hero-glow{will-change:transform;transition:transform .15s ease-out}
.gi-hero-content{will-change:transform;transition:transform .15s ease-out}
/* Titelstory-Beitragsbild: leichter Zoom (Reserve für den Maus/Scroll-Parallax in hero-parallax.js). */
.gi-hero-art-img{transform:scale(1.08);will-change:transform;transition:transform .2s ease-out}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:transparent;color:var(--text);font-family:'Manrope',system-ui,sans-serif;transition:background .3s,color .3s;-webkit-font-smoothing:antialiased}
/* Hintergrundbild: Photo by Florian Olivo on Unsplash (Unsplash License, frei nutzbar) — https://unsplash.com/@florianolv */
.gi-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.gi-bg-img{position:absolute;inset:0;background:url('../img/bg-cinematic.jpg') center/cover no-repeat}
.gi-bg-veil{position:absolute;inset:0;background:var(--veil)}
.gi-bg-glow{position:absolute;inset:0;background:radial-gradient(1100px 700px at 80% 0%,rgba(26,122,232,0.10),transparent 60%),radial-gradient(900px 600px at 5% 100%,rgba(26,122,232,0.10),transparent 60%)}
.gi-bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);background-size:44px 44px;opacity:.5}
body{min-height:100vh}
h1,h2,h3,.gi-head{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em}
a{color:#93c5fd;text-decoration:none}a:hover{color:#1a7ae8}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:900px){.gi-article-grid{grid-template-columns:1fr}.gi-sidebar{position:static}}

/* Keyframes */
@keyframes gi-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes gi-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes gi-pulse{0%,100%{opacity:.5}50%{opacity:.85}}
@keyframes gi-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Card */
.gi-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 22px 18px;transition:transform .22s ease,border-color .22s ease}
.gi-card:hover{transform:translateY(-4px);border-color:rgba(26,122,232,0.45)}
.gi-guide-card{transition:transform .22s ease,border-color .22s ease}
.gi-guide-card:hover{transform:translateY(-3px);border-color:rgba(251,191,36,0.5)}
.gi-card-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;line-height:1.24;color:var(--text);flex:1}

/* Button */
.gi-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;font-weight:700;font-size:14px;font-family:'Manrope',sans-serif;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.gi-btn:hover{transform:translateY(-1px)}
.gi-btn-primary{background:linear-gradient(135deg,#1a7ae8,#0f2a5c);color:#fff;box-shadow:0 6px 18px rgba(26,122,232,0.35)}
.gi-btn-secondary{background:rgba(255,255,255,0.03);border-color:var(--border);color:var(--text2)}
.gi-btn-ghost{background:transparent;border-color:var(--border);color:var(--text2)}

/* Badge */
.gi-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.gi-badge-accent{background:var(--accent)}
.gi-badge-deal{background:var(--deal);color:#04120c}

/* Section header */
.gi-section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.gi-section-header .gi-kicker{display:block;font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px;color:var(--accent)}
.gi-section-header h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:32px;letter-spacing:-0.02em;color:var(--text)}

/* Meta */
.gi-meta{font-size:12px;font-weight:600;color:var(--muted)}

/* Avatare (get_avatar ignoriert style-Arg -> rund + kein Schrumpfen via .avatar-Klasse) */
img.avatar{border-radius:50%;flex-shrink:0}

/* Grid */
.gi-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.gi-grid-2{grid-template-columns:repeat(2,1fr)}
.gi-grid-4{grid-template-columns:repeat(4,1fr)}

/* Artikel-Body Prosa (single.php .gi-body) */
.gi-body p{font-size:17.5px;line-height:1.75;color:var(--text2);margin-bottom:22px}
.gi-body h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;letter-spacing:-0.02em;color:var(--text);margin:44px 0 16px;scroll-margin-top:90px}
.gi-body h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-0.01em;color:var(--text);margin:32px 0 12px;scroll-margin-top:90px}
.gi-body ul{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.gi-body ol{margin:0 0 22px;padding-left:22px;color:var(--text2);font-size:17px;line-height:1.6;display:flex;flex-direction:column;gap:8px}
.gi-body li{position:relative;font-size:17px;line-height:1.6;color:var(--text2)}
.gi-body ul li{padding-left:26px}
.gi-body ul li::before{content:'';position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:#1a7ae8}
.gi-body a{font-weight:600;border-bottom:1px solid rgba(26,122,232,0.4)}
.gi-body strong{color:var(--text);font-weight:700}
.gi-body figure{margin:34px 0}
.gi-body figure img{display:block;width:100%;border-radius:16px;border:1px solid var(--border)}
.gi-body figcaption{margin-top:10px;font-size:13px;color:var(--muted);text-align:center}
.gi-bild-platzhalter{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;border-radius:16px;border:1px solid var(--border);background:var(--panel);overflow:hidden;padding:18px;text-align:center}
.gi-bild-platzhalter[data-ratio="4:3"]{aspect-ratio:4/3}
.gi-bild-platzhalter[data-ratio="1:1"]{aspect-ratio:1/1}
.gi-bild-platzhalter[data-ratio="3:2"]{aspect-ratio:3/2}
.gi-bild-platzhalter-hint{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--chrome);border:1px solid var(--border);border-radius:999px;padding:4px 12px}
.gi-bild-platzhalter figcaption{margin:0;font-size:14.5px;font-weight:600;color:var(--text2)}
.gi-body blockquote{position:relative;border-left:3px solid #1a7ae8;padding:6px 0 6px 22px;margin:0 0 34px;font-size:19px;line-height:1.65;color:var(--text);font-weight:500;font-style:normal}
.gi-body blockquote p{font-size:19px;color:var(--text);font-weight:500;margin:0}
.gi-body img{max-width:100%;height:auto;border-radius:12px}

/* Tabellen im Artikel-Body (z. B. Systemanforderungen Min/Empfohlen) */
.gi-body table{width:100%;border-collapse:collapse;margin:0 0 34px}
.gi-body table caption{caption-side:top;text-align:left;font-size:13px;color:var(--muted);margin-bottom:8px}
.gi-body th,.gi-body td{padding:12px 16px;text-align:left;font-size:14.5px;line-height:1.5;color:var(--text2);border-bottom:1px solid var(--border)}
.gi-body thead th{background:var(--panel);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;color:var(--text);white-space:nowrap}
.gi-body tbody tr:last-child td{border-bottom:none}
.gi-body-table-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--border);margin:0 0 34px}
.gi-body-table-wrap table{margin:0}

/* Systemanforderungen-Karten (gamehub.js baut das aus der Minimal/Empfohlen-Tabelle im .gi-body) */
.gi-sysreq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 34px}
@media (max-width:640px){.gi-sysreq-grid{grid-template-columns:1fr}}

/* Editionen-Karten (gamehub.js baut das aus der Edition/Preis/Enthält-Tabelle im .gi-body) */
.gi-editions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 34px}
@media (max-width:820px){.gi-editions-grid{grid-template-columns:1fr}}

/* FAQ-Akkordeon (gamehub.js baut das aus H3/Fließtext im .gi-body) */
.gi-faq{display:flex;flex-direction:column;gap:10px;margin:0 0 34px}
.gi-faq-item{border-radius:14px;border:1px solid var(--border);background:var(--panel);overflow:hidden}
.gi-faq-item button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border:none;background:transparent;cursor:pointer;text-align:left;font-family:'Manrope',sans-serif}
.gi-faq-item button .gi-faq-q{font-size:15.5px;font-weight:700;color:var(--text)}
.gi-faq-item button .gi-faq-icon{width:26px;height:26px;flex-shrink:0;border-radius:8px;background:rgba(26,122,232,0.14);color:#5da8f0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;line-height:1;transition:transform .2s ease}
.gi-faq-item[aria-expanded="true"] .gi-faq-icon{transform:rotate(180deg)}
.gi-faq-item .gi-faq-a{margin:0;padding:0 20px 20px;font-size:14.5px;line-height:1.65;color:var(--text2)}
.gi-faq-item .gi-faq-a[hidden]{display:none}

/* Kommentarformular (alle Felder im Theme-Look) */
.comment-respond{margin-top:28px}
.comment-reply-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;color:var(--text);margin-bottom:14px}
.comment-form{display:flex;flex-direction:column;gap:14px}
.comment-form p{margin:0}
.comment-form label{display:inline-block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:6px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;padding:11px 14px;border:1px solid var(--border);background:rgba(150,150,160,0.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text);border-radius:10px;font-family:'Manrope',sans-serif;font-size:14.5px;line-height:1.6}
.comment-form textarea{min-height:84px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:rgba(26,122,232,0.5)}
.comment-form-cookies-consent{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.comment-form-cookies-consent input{width:auto}
.comment-form-cookies-consent label{margin:0}

/* Kommentarliste — verschachtelte Antworten einrücken (Karten-Look kommt inline aus gi_comment) */
.gi-comments ol ol{margin:14px 0 0 26px}

/* Header-Nav: kein Umbruch, auch bei zugewiesenem echten primary-Menü */
.gi-header nav a{white-space:nowrap;padding:9px 14px;font-weight:600;font-size:14.5px}

/* Suchformular (searchform.php) — glassy, kompakt, mit Lupen-Icon */
.gi-search{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:rgba(150,150,160,0.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);min-width:180px}
.gi-search input[type=search]{flex:1;border:none;background:transparent;color:var(--text);font-size:14px;font-family:'Manrope',sans-serif;outline:none;min-width:0}
.gi-search input[type=search]::placeholder{color:var(--muted)}
/* Header-Suche: als Icon-Button eingeklappt, Input fährt bei Klick aus (wie Vorlage) */
.gi-hsearch{position:relative;display:inline-flex;align-items:center;flex-shrink:0}
.gi-hsearch-form{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.gi-hsearch-input{width:0;opacity:0;height:40px;padding:0;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:14px;font-family:'Manrope',sans-serif;outline:none;transition:width .28s ease,opacity .18s ease,padding .28s ease}
.gi-hsearch-input::placeholder{color:var(--muted)}
.gi-hsearch.is-open .gi-hsearch-input{width:230px;opacity:1;padding:0 46px 0 14px}
.gi-hsearch-btn{position:relative;z-index:1;width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gi-hsearch-btn:hover{color:var(--text)}
/* Header-Hauptnavigation — greift für ein zugewiesenes wp_nav_menu (.gi-nav-menu) UND den
   Fallback (.gi-pillar-nav): Listen-Marker weg, Links als Pills, Hover + aktiver Menüpunkt. */
.gi-primary-nav ul{display:flex;align-items:center;gap:4px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.gi-primary-nav li{list-style:none;margin:0;padding:0}
.gi-primary-nav a{display:inline-block;padding:9px 14px;border-radius:9px;font-weight:600;font-size:14.5px;line-height:1;white-space:nowrap;text-decoration:none;color:var(--text2);transition:background .15s ease,color .15s ease}
.gi-primary-nav a:hover{color:var(--text);background:var(--inset)}
.gi-primary-nav .current-menu-item>a,.gi-primary-nav .current-menu-parent>a,.gi-primary-nav .current_page_item>a,.gi-primary-nav .current_page_parent>a{color:var(--text);background:var(--inset)}
/* Topbar-Utility-Menü (Jobs/Kontakt/Impressum) — zugewiesenes Menü ODER Fallback gi_topbar_nav(). */
.gi-topbar-menu{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0}
.gi-topbar-menu li{list-style:none;margin:0;padding:0}
.gi-topbar-menu a{color:var(--muted);text-decoration:none}
.gi-topbar-menu a:hover{color:var(--text2)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Werbung (#191) — reservierter Platz gegen CLS, dezentes „Anzeige"-Label */
.gi-ad{margin:28px auto;max-width:100%;text-align:center;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gi-ad-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.gi-ad .adsbygoogle{display:block;width:100%}
/* reservierte Mindesthöhen je Slot -> kein Layout-Shift, auch ohne Consent/Fill */
.gi-ad--article-top{min-height:120px}
.gi-ad--article-end{min-height:250px}
.gi-ad--home-infeed{min-height:250px}