/*
Theme Name: Geeksandgames Klartext – Index
Theme URI: https://geeksandgames.de/
Author: Geeksandgames Redaktion
Description: Eigenständiges Editorial-Theme für Games, Hardware und Ratgeber mit Index-Marke und optimierter mobiler Darstellung.
Version: 1.1.7
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: geeksandgames-klartext
*/

/* Klartext Magazin: newspaper-white reading fields, graphite ink, Source Serif 4 headlines with open spacing, and Editorial Red as a functional reading mark. */
:root { --gg-paper:#fffdf8; --gg-paper-dark:#f4f0e8; --gg-ink:#17191c; --gg-muted:#61707c; --gg-red:#e94b3c; --gg-red-dark:#9e3329; --gg-rule:rgba(23,25,28,.15); --gg-content:1280px; --gg-headline:"Source Serif 4",Georgia,serif; }
* { box-sizing:border-box; }
html { overflow-x:clip; scroll-behavior:smooth; }
body { margin:0; overflow-x:clip; background:var(--gg-paper); color:var(--gg-ink); font-family:"IBM Plex Sans",Arial,sans-serif; text-rendering:optimizeLegibility; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
.gg-container { width:min(100% - 40px,var(--gg-content)); margin-inline:auto; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { position:fixed; z-index:100; top:12px; left:12px; width:auto; height:auto; margin:0; padding:10px 14px; clip:auto; background:var(--gg-red); color:#fff; }

.utility-bar { background:var(--gg-ink); color:var(--gg-paper); font-size:10px; font-weight:700; }
.utility-bar .gg-container { min-height:32px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.utility-bar a { transition:color .16s cubic-bezier(.23,1,.32,1); }
.utility-bar a:hover { color:#f4a098; }
.site-header { position:sticky; top:0; z-index:50; border-bottom:1px solid var(--gg-rule); background:rgba(255,253,248,.96); backdrop-filter:blur(10px); }
.masthead { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; }
.brand { display:flex; align-items:center; gap:12px; min-width:max-content; }
.brand-mark { width:48px; height:48px; object-fit:contain; }
.brand-mark-index { display:block; width:48px; height:48px; background:linear-gradient(var(--gg-red) 0 0) 0 7px/39px 7px no-repeat,linear-gradient(var(--gg-red) 0 0) 8px 21px/28px 7px no-repeat,linear-gradient(var(--gg-red) 0 0) 0 35px/44px 7px no-repeat; }
.brand-name { display:block; font-family:"DM Serif Display",Georgia,serif; font-size:30px; line-height:.9; letter-spacing:-.065em; }
.brand-name em { color:var(--gg-red); font-style:normal; }
.brand-tagline { display:block; margin-top:5px; color:#64707a; font-size:8px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.menu-toggle { display:none; border:0; background:var(--gg-ink); color:#fff; width:42px; height:42px; align-items:center; justify-content:center; }
.primary-nav .menu, .primary-nav ul { display:flex; align-items:stretch; gap:25px; margin:0; padding:0; list-style:none; }
.primary-nav a { position:relative; display:flex; min-height:76px; align-items:center; font-size:13px; font-weight:700; transition:color .18s cubic-bezier(.23,1,.32,1); }
.primary-nav a::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background:var(--gg-red); transform:scaleX(0); transform-origin:left; transition:transform .18s cubic-bezier(.23,1,.32,1); }
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current_page_item > a { color:var(--gg-red); }
.primary-nav a:hover::after, .primary-nav .current-menu-item > a::after, .primary-nav .current_page_item > a::after { transform:scaleX(1); }
.header-search { border:0; background:transparent; color:var(--gg-ink); width:42px; height:42px; display:grid; place-items:center; font-size:20px; transition:color .18s cubic-bezier(.23,1,.32,1); }
.header-search:hover { color:var(--gg-red); }

.gg-tag { display:inline-flex; border-left:3px solid var(--gg-red); padding-left:8px; color:var(--gg-red-dark); font-size:10px; font-weight:700; letter-spacing:.16em; line-height:1.2; text-transform:uppercase; }
.gg-tag--inverse { border-color:#f4a098; color:#f4a098; }
.gg-page-title { margin:16px 0 0; font-family:var(--gg-headline); font-size:clamp(48px,6.6vw,102px); line-height:.88; letter-spacing:-.042em; }
.gg-page-deck { max-width:630px; margin:28px 0 0; color:var(--gg-muted); font-size:20px; line-height:1.5; }
.gg-button-link { display:inline-flex; align-items:center; gap:10px; margin-top:24px; border-bottom:2px solid var(--gg-red); padding-bottom:7px; font-size:14px; font-weight:700; transition:color .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1); }
.gg-button-link:hover { color:var(--gg-red); transform:translateX(3px); }

.gg-home-top { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.72fr); gap:32px; padding-block:56px 64px; }
.gg-lead { border-top:1px solid var(--gg-ink); padding-top:24px; }
.gg-lead-grid { display:grid; grid-template-columns:.95fr 1.05fr; align-items:end; gap:28px; padding-top:28px; }
.gg-lead h1 { margin:0; font-family:var(--gg-headline); font-size:clamp(46px,5.2vw,88px); line-height:.94; letter-spacing:-.038em; overflow-wrap:normal; }
.gg-lead-title-link { display:block; transition:color .18s cubic-bezier(.23,1,.32,1); }
.gg-lead-title-link:hover { color:var(--gg-red); }
.gg-lead-title-link:focus-visible { outline:3px solid var(--gg-red); outline-offset:6px; }
.gg-lead p { max-width:480px; margin:28px 0 0; color:var(--gg-muted); font-size:18px; line-height:1.55; }
.gg-lead-image { position:relative; aspect-ratio:4/5; overflow:hidden; background:#111; }
.gg-lead-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.23,1,.32,1); }
.gg-lead-image:hover img { transform:scale(1.025); }
.gg-image-meta { position:absolute; left:0; bottom:0; border-top:4px solid var(--gg-red); padding:10px 16px; background:var(--gg-paper); color:var(--gg-ink); font-size:12px; font-weight:700; }
.gg-rail { border-left:2px solid var(--gg-red); padding-left:28px; }
.gg-rail-title { margin:8px 0 18px; color:var(--gg-red-dark); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.gg-list-item { display:grid; grid-template-columns:1fr auto; gap:18px; border-top:1px solid var(--gg-rule); padding:20px 0; }
.gg-list-item:first-of-type { border-top:0; padding-top:0; }
.gg-list-item h3 { margin:7px 0 0; font-family:var(--gg-headline); font-size:23px; line-height:1.12; letter-spacing:-.025em; transition:color .18s cubic-bezier(.23,1,.32,1); }
.gg-list-item:hover h3 { color:var(--gg-red); }
.gg-list-item p { margin:8px 0 0; color:var(--gg-muted); font-size:14px; line-height:1.45; }
.gg-list-item .arrow { margin-top:20px; color:var(--gg-red); transition:transform .18s cubic-bezier(.23,1,.32,1); }
.gg-list-item:hover .arrow { transform:translateX(4px); }

.gg-section { border-bottom:1px solid var(--gg-rule); padding-block:52px 64px; }
.gg-section--paper-dark { border-top:4px solid var(--gg-red); background:var(--gg-paper-dark); }
.gg-section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; border-bottom:1px solid var(--gg-ink); padding-bottom:12px; }
.gg-section-heading h2 { margin:8px 0 0; font-family:var(--gg-headline); font-size:clamp(38px,4vw,52px); line-height:.98; letter-spacing:-.035em; }
.gg-section-heading a { color:var(--gg-red); font-size:12px; font-weight:700; }
.gg-feature-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:32px; margin-top:32px; }
.gg-story-image { display:block; text-align:left; }
.gg-story-image .story-thumb { aspect-ratio:16/8; overflow:hidden; background:#ddd8cf; }
.gg-story-image .story-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.23,1,.32,1); }
.gg-story-image:hover .story-thumb img { transform:scale(1.025); }
.gg-story-image h3 { margin:10px 0 0; font-family:var(--gg-headline); font-size:clamp(34px,3.5vw,60px); line-height:1; letter-spacing:-.035em; transition:color .18s cubic-bezier(.23,1,.32,1); }
.gg-story-image:hover h3 { color:var(--gg-red); }
.gg-story-image p { margin:14px 0 0; color:var(--gg-muted); font-size:14px; line-height:1.55; }
.gg-story-stack { display:block; }

.gg-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:32px; }
.gg-card { display:block; text-align:left; }
.gg-card-thumb { aspect-ratio:4/3; overflow:hidden; background:#ddd8cf; }
.gg-card-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.23,1,.32,1); }
.gg-card:hover img { transform:scale(1.025); }
.gg-card h3 { margin:12px 0 0; font-family:var(--gg-headline); font-size:30px; line-height:1.06; letter-spacing:-.028em; transition:color .18s cubic-bezier(.23,1,.32,1); }
.gg-card:hover h3 { color:var(--gg-red); }
.gg-card p { margin:10px 0 0; color:var(--gg-muted); font-size:14px; line-height:1.45; }
.gg-pagination { margin-top:44px; }
.gg-pagination .nav-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.gg-pagination .page-numbers { min-width:38px; padding:9px 11px; border:1px solid var(--gg-rule); color:var(--gg-muted); font-size:13px; font-weight:700; text-align:center; transition:background-color .18s cubic-bezier(.23,1,.32,1),color .18s cubic-bezier(.23,1,.32,1),border-color .18s cubic-bezier(.23,1,.32,1); }
.gg-pagination a.page-numbers:hover, .gg-pagination .page-numbers.current { border-color:var(--gg-red); background:var(--gg-red); color:#fff; }
.gg-pagination.is-js-active { display:none; }
.gg-load-more { display:flex; align-items:center; justify-content:center; gap:16px; min-height:74px; margin-top:28px; border-top:1px solid var(--gg-rule); color:var(--gg-muted); font-size:13px; font-weight:700; text-align:center; }
.gg-loading-index { display:none; position:relative; width:45px; height:24px; flex:0 0 45px; }
.gg-loading-index i { position:absolute; left:0; display:block; height:5px; background:var(--gg-red); transform:scaleX(.42); transform-origin:left center; opacity:.5; }
.gg-loading-index i:nth-child(1) { top:1px; width:39px; }
.gg-loading-index i:nth-child(2) { top:10px; left:8px; width:27px; }
.gg-loading-index i:nth-child(3) { top:19px; width:45px; }
.gg-load-more[data-state="loading"] { color:var(--gg-red-dark); }
.gg-load-more[data-state="loading"] .gg-loading-index { display:block; }
.gg-load-more[data-state="loading"] .gg-loading-index i { animation:gg-index-loading 900ms cubic-bezier(.77,0,.175,1) infinite alternate; }
.gg-load-more[data-state="loading"] .gg-loading-index i:nth-child(2) { animation-delay:120ms; }
.gg-load-more[data-state="loading"] .gg-loading-index i:nth-child(3) { animation-delay:240ms; }
.gg-load-more[data-state="complete"] { color:var(--gg-muted); }
.gg-load-more[data-state="complete"]::before { content:""; display:block; width:28px; height:3px; background:var(--gg-red); }
.gg-load-more[data-state="fallback"] .gg-load-more__button { border-color:var(--gg-red); }
@keyframes gg-index-loading { from { transform:scaleX(.42); opacity:.42; } to { transform:scaleX(1); opacity:1; } }
.gg-load-more__button { border:1px solid var(--gg-ink); background:var(--gg-paper); color:var(--gg-ink); padding:10px 14px; font-size:13px; font-weight:700; transition:background-color .18s cubic-bezier(.23,1,.32,1),color .18s cubic-bezier(.23,1,.32,1); }
.gg-load-more__button:hover, .gg-load-more__button:focus-visible { background:var(--gg-ink); color:#fff; }
.gg-platform-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:32px; }
.gg-platform { border-top:4px solid var(--gg-ink); padding-top:14px; transition:border-color .18s cubic-bezier(.23,1,.32,1); }
.gg-platform:hover { border-color:var(--gg-red); }
.gg-platform img { aspect-ratio:4/3; width:100%; object-fit:cover; }
.gg-platform h3 { margin:14px 0 0; font-size:25px; letter-spacing:-.045em; }
.gg-platform p { color:var(--gg-muted); font-size:14px; line-height:1.45; }
.gg-dark-section { background:var(--gg-ink); color:var(--gg-paper); padding-block:56px; }
.gg-dark-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:32px; }
.gg-dark-grid h2 { margin:12px 0 0; font-family:var(--gg-headline); font-size:clamp(40px,4vw,54px); line-height:.98; letter-spacing:-.035em; }
.gg-dark-cards { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.gg-dark-cards article { border-top:1px solid rgba(255,255,255,.22); padding-top:20px; }
.gg-dark-cards h3 { margin:10px 0 0; font-size:25px; line-height:1.03; letter-spacing:-.045em; }
.gg-dark-cards p { color:#d3d7db; font-size:14px; line-height:1.5; }

.gg-subnav { display:flex; flex-wrap:wrap; gap:14px 20px; border-top:1px solid var(--gg-ink); padding-top:16px; font-size:12px; font-weight:700; }
.gg-subnav a { transition:color .18s cubic-bezier(.23,1,.32,1); }
.gg-subnav a:hover { color:var(--gg-red); }
.gg-page-hero { background:var(--gg-paper-dark); border-bottom:1px solid var(--gg-rule); padding-block:42px 54px; }
.gg-page-hero-grid { display:grid; grid-template-columns:1.1fr .9fr; align-items:end; gap:36px; }
.gg-breadcrumbs { color:var(--gg-muted); font-size:11px; font-weight:700; }
.gg-breadcrumbs a { transition:color .18s cubic-bezier(.23,1,.32,1); }
.gg-breadcrumbs a:hover { color:var(--gg-red); }

.gg-content-wrap { display:grid; grid-template-columns:180px minmax(0,1fr); gap:52px; max-width:1100px; margin:auto; padding-block:64px; }
.gg-toc { position:sticky; top:140px; border-left:3px solid var(--gg-red); padding-left:14px; height:max-content; }
.gg-toc p { margin:0 0 14px; color:var(--gg-red-dark); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.gg-toc a { display:block; margin:0 0 10px; color:var(--gg-muted); font-size:12px; font-weight:700; }
.gg-entry { font-size:18px; line-height:1.75; }
.gg-entry > p:first-child { border-left:4px solid var(--gg-red); background:var(--gg-paper-dark); padding:24px; font-size:19px; }
.gg-entry h2 { margin:48px 0 16px; font-family:var(--gg-headline); font-size:clamp(38px,4vw,52px); line-height:1; letter-spacing:-.035em; }
.gg-entry a { color:var(--gg-red-dark); font-weight:700; text-decoration:underline; text-decoration-color:var(--gg-red); text-decoration-thickness:2px; text-underline-offset:4px; }
.gg-article-head { max-width:1040px; padding-block:56px 36px; }
.gg-article-head h1 { margin:24px 0 0; font-family:var(--gg-headline); font-size:clamp(46px,6vw,94px); line-height:.92; letter-spacing:-.04em; }
.gg-article-deck { max-width:720px; margin:26px 0 0; color:var(--gg-muted); font-size:20px; line-height:1.5; }
.gg-meta { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:28px; border-top:1px solid var(--gg-rule); padding-top:14px; color:var(--gg-muted); font-size:12px; font-weight:700; }
.gg-hero-image { width:min(100% - 40px,var(--gg-content)); margin:auto; aspect-ratio:16/8; object-fit:cover; }


/* Klartext Magazin: dedicated single-column service pages for legal and accessibility information. */
.gg-static-page { min-height:60vh; }
.gg-static-page-head { max-width:1040px; padding-block:56px 28px; }
.gg-static-page-head .gg-tag { margin-top:20px; }
.gg-static-page-head h1 { max-width:900px; margin:18px 0 0; font-family:"Source Serif 4",Georgia,serif; font-size:clamp(48px,6vw,88px); line-height:.94; letter-spacing:-.045em; }
.gg-static-page-content { width:min(100% - 40px,860px); margin-inline:auto; padding-block:28px 76px; }
.gg-static-page-content .gg-entry { font-size:18px; }
.gg-static-page-content .gg-entry h2 { margin-top:52px; }
.gg-static-page-content .gg-entry h3 { margin:34px 0 12px; font-family:"Source Serif 4",Georgia,serif; font-size:30px; line-height:1; letter-spacing:-.025em; }
.gg-static-page-content .gg-entry h4 { margin:28px 0 8px; font-size:16px; }
.gg-static-page-content .gg-entry ul, .gg-static-page-content .gg-entry ol { padding-left:24px; }

.site-footer { border-top:4px solid var(--gg-red); background:var(--gg-paper-dark); padding-block:48px; }
.footer-inner { display:flex; align-items:end; justify-content:space-between; gap:32px; border-top:1px solid var(--gg-rule); padding-top:28px; }
.footer-brand { display:flex; align-items:center; gap:12px; }
.footer-brand img, .footer-brand .brand-mark-index { width:56px; height:56px; object-fit:contain; }
.footer-brand strong { display:block; font-family:"DM Serif Display",Georgia,serif; font-size:40px; line-height:.85; letter-spacing:-.06em; }
.footer-brand small { display:block; margin-top:7px; color:var(--gg-muted); font-size:9px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.footer-nav { display:flex; flex-wrap:wrap; gap:14px 24px; color:#57616b; font-size:11px; font-weight:700; }

@media (max-width:900px) {
  .masthead { min-height:72px; } .menu-toggle { display:flex; } .header-search { margin-left:auto; } .primary-nav { position:absolute; top:100%; left:0; right:0; overflow:hidden; max-height:0; border-top:0; background:var(--gg-paper); transition:max-height .22s cubic-bezier(.23,1,.32,1),border-color .22s cubic-bezier(.23,1,.32,1); } .primary-nav.is-open { max-height:420px; border-top:1px solid var(--gg-rule); } .primary-nav .menu, .primary-nav ul { display:block; padding:8px 20px 16px; } .primary-nav a { min-height:48px; border-bottom:1px solid var(--gg-rule); } .gg-home-top, .gg-feature-grid, .gg-page-hero-grid, .gg-dark-grid { grid-template-columns:1fr; } .gg-lead-grid { grid-template-columns:1fr; } .gg-lead-image { max-height:560px; aspect-ratio:16/9; } .gg-rail { border-left:0; border-top:2px solid var(--gg-red); padding:20px 0 0; } .gg-cards { grid-template-columns:repeat(2,1fr); } .gg-platform-grid { grid-template-columns:repeat(2,1fr); } .gg-content-wrap { grid-template-columns:1fr; } .gg-toc { display:none; }
}
@media (max-width:620px) {
  .gg-container { width:min(100% - 40px,var(--gg-content)); } .brand-mark { width:44px; height:44px; } .brand-name { font-size:27px; } .brand-tagline { max-width:170px; font-size:7px; } .gg-home-top { padding-block:36px 40px; } .gg-lead h1 { font-size:clamp(42px,11.5vw,56px); line-height:.98; letter-spacing:-.03em; } .gg-page-title { font-size:clamp(46px,13.5vw,64px); line-height:.92; } .gg-section { padding-block:44px; } .gg-section-heading h2, .gg-dark-grid h2 { font-size:36px; } .gg-cards { grid-template-columns:1fr; } .gg-platform-grid { grid-template-columns:1fr 1fr; } .gg-dark-cards { grid-template-columns:1fr; gap:8px; } .footer-inner { align-items:flex-start; flex-direction:column; } .gg-article-head h1 { font-size:clamp(44px,12vw,62px); line-height:.96; } .gg-entry { font-size:17px; } .gg-entry h2 { font-size:36px; }
}
@media (max-width:620px) {
  .masthead { min-height:66px; gap:12px; }
  .brand { gap:8px; }
  .brand-mark-index { width:40px; height:40px; background:linear-gradient(var(--gg-red) 0 0) 0 5px/32px 6px no-repeat,linear-gradient(var(--gg-red) 0 0) 7px 18px/23px 6px no-repeat,linear-gradient(var(--gg-red) 0 0) 0 31px/36px 6px no-repeat; }
  .brand-name { font-size:24px; }
  .brand-tagline { display:none; }
  .header-search, .menu-toggle { width:38px; height:38px; }
}
@media (max-width:620px) { .gg-load-more { align-items:stretch; flex-direction:column; padding:18px 0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

@media (max-width:620px) {
  .gg-static-page-head { padding-block:38px 20px; }
  .gg-static-page-head h1 { font-size:clamp(42px,12vw,62px); }
  .gg-static-page-content { padding-block:22px 54px; }
}