/*
Theme Name: Kruemels KI-Blog
Theme URI: https://kruemel.4lima.de
Author: Kruemels Blog
Author URI: https://kruemel.4lima.de
Description: Dark editorial WordPress theme for Kruemels KI-Blog with configurable sections, Yoast-friendly SEO fallbacks, performance-conscious assets and accessible components.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: kruemels-ki-blog
Tags: blog, news, dark, accessibility-ready, custom-logo, featured-images, translation-ready
*/

:root { --kb-bg:#0b0d0d; --kb-surface:#121616; --kb-surface-2:#18201e; --kb-text:#f3eee4; --kb-muted:#9da9a2; --kb-line:rgba(243,238,228,.14); --kb-accent:#e5ad4b; --kb-accent-2:#a9c7ac; --kb-serif:Georgia,"Times New Roman",serif; --kb-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --kb-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace; --kb-max:1240px; --kb-radius:18px; --kb-shadow:0 22px 70px rgba(0,0,0,.28); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--kb-bg); color:var(--kb-text); font-family:var(--kb-sans); line-height:1.7; font-size:16px; }
body:has(.site-header.is-scrolled) { --kb-line:rgba(243,238,228,.2); }
a { color:inherit; text-underline-offset:3px; }
a:hover { color:var(--kb-accent); }
img { display:block; max-width:100%; height:auto; }
.container { width:min(calc(100% - 40px),var(--kb-max)); margin-inline:auto; }
.screen-reader-text { position:absolute!important; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap; }
.screen-reader-text:focus { clip:auto!important; clip-path:none; width:auto; height:auto; padding:12px 16px; background:var(--kb-accent); color:#16130e; z-index:9999; }
.skip-link { position:absolute; left:12px; top:12px; }
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--kb-line); background:rgba(11,13,13,.86); backdrop-filter:blur(18px); }
.header-inner { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--kb-accent); color:#17130b; font-family:var(--kb-serif); font-weight:700; }
.brand-copy strong { display:block; font-family:var(--kb-serif); font-size:1.1rem; letter-spacing:-.02em; }
.brand-copy small { display:block; color:var(--kb-muted); font:10px var(--kb-mono); letter-spacing:.14em; text-transform:uppercase; }
.primary-nav ul { display:flex; gap:26px; list-style:none; padding:0; margin:0; }
.primary-nav a { color:var(--kb-muted); font-size:.82rem; font-weight:700; letter-spacing:.09em; text-decoration:none; text-transform:uppercase; }
.primary-nav a:hover, .current-menu-item>a { color:var(--kb-text); }
.menu-toggle { display:none; border:1px solid var(--kb-line); background:transparent; color:var(--kb-text); border-radius:10px; padding:10px 12px; cursor:pointer; }
.hero { padding:clamp(62px,10vw,130px) 0 64px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); align-items:end; gap:clamp(36px,7vw,100px); }
.kicker { color:var(--kb-accent); font:700 .74rem var(--kb-mono); letter-spacing:.16em; text-transform:uppercase; }
.hero h1 { max-width:760px; margin:18px 0 24px; font:400 clamp(3.3rem,7vw,7.6rem)/.91 var(--kb-serif); letter-spacing:-.07em; }
.hero h1 em { color:var(--kb-accent); font-style:normal; }
.hero-intro { max-width:590px; color:var(--kb-muted); font-size:1.14rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border:1px solid var(--kb-line); border-radius:999px; font-size:.85rem; font-weight:700; text-decoration:none; }
.button-primary { background:var(--kb-accent); border-color:var(--kb-accent); color:#17130b; }
.button-primary:hover { color:#17130b; filter:brightness(1.08); }
.hero-visual { position:relative; }
.hero-visual img { width:100%; aspect-ratio:1.07; object-fit:cover; border-radius:var(--kb-radius); filter:saturate(.8) contrast(1.08); box-shadow:var(--kb-shadow); }
.hero-note { position:absolute; right:-18px; bottom:-18px; max-width:220px; padding:18px; background:var(--kb-surface-2); border:1px solid var(--kb-line); border-radius:14px; box-shadow:var(--kb-shadow); color:var(--kb-muted); font:12px/1.5 var(--kb-mono); }
.section { padding:64px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px; }
.section-heading h2 { margin:0; font:400 clamp(2rem,4vw,3.6rem)/1 var(--kb-serif); letter-spacing:-.05em; }
.section-heading p { margin:0; max-width:360px; color:var(--kb-muted); }
.section-link { color:var(--kb-accent); font-size:.82rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.topic-nav { display:flex; flex-wrap:wrap; gap:10px; border-top:1px solid var(--kb-line); border-bottom:1px solid var(--kb-line); padding:18px 0; }
.topic-nav a { padding:8px 13px; border:1px solid var(--kb-line); border-radius:999px; color:var(--kb-muted); font:11px var(--kb-mono); text-decoration:none; text-transform:uppercase; }
.topic-nav a:hover { border-color:var(--kb-accent); color:var(--kb-accent); }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { min-width:0; overflow:hidden; border:1px solid var(--kb-line); border-radius:var(--kb-radius); background:var(--kb-surface); }
.card-image { display:block; aspect-ratio:1.5; overflow:hidden; }
.card-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card-image img { transform:scale(1.035); }
.card-body { padding:20px; }
.card-meta, .post-meta { color:var(--kb-muted); font:11px var(--kb-mono); letter-spacing:.05em; text-transform:uppercase; }
.card h2, .card h3 { margin:12px 0 10px; font:400 clamp(1.45rem,2.2vw,2rem)/1.07 var(--kb-serif); letter-spacing:-.04em; }
.card h2 a, .card h3 a { text-decoration:none; }
.card p { margin:0; color:var(--kb-muted); font-size:.92rem; }
.featured-card { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid var(--kb-line); border-radius:var(--kb-radius); background:var(--kb-surface); }
.featured-card .card-image { display:block; aspect-ratio:auto; min-height:330px; }
.featured-card .card-body { align-self:center; padding:clamp(24px,5vw,64px); }
.featured-card h3 { font-size:clamp(2rem,4vw,4.4rem); }
.archive-header { padding:70px 0 34px; }
.archive-header h1 { margin:12px 0; font:400 clamp(3rem,7vw,7rem)/.92 var(--kb-serif); letter-spacing:-.07em; }
.single-wrap { padding:70px 0; }
.single-header { max-width:900px; margin:0 auto 42px; }
.single-header h1 { margin:16px 0 22px; font:400 clamp(2.8rem,6vw,6.5rem)/.94 var(--kb-serif); letter-spacing:-.065em; }
.single-featured { width:100%; max-height:640px; object-fit:cover; border-radius:var(--kb-radius); margin:0 auto 45px; }
.entry-content { max-width:720px; margin-inline:auto; font-family:var(--kb-serif); font-size:1.18rem; }
.entry-content h2, .entry-content h3 { margin:2.2em 0 .65em; font-family:var(--kb-sans); line-height:1.12; letter-spacing:-.03em; }
.entry-content h2 { font-size:1.9rem; }
.entry-content h3 { font-size:1.35rem; }
.entry-content p { margin:0 0 1.4em; }
.entry-content a { color:var(--kb-accent); }
.entry-content blockquote { margin:2em 0; padding:14px 24px; border-left:3px solid var(--kb-accent); color:var(--kb-accent-2); font-size:1.45rem; }
.newsletter { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; padding:clamp(26px,5vw,60px); border-radius:var(--kb-radius); background:var(--kb-accent-2); color:#122018; }
.newsletter h2 { margin:0; font:400 clamp(2rem,4vw,4rem)/1 var(--kb-serif); letter-spacing:-.05em; }
.newsletter p { margin:12px 0 0; max-width:480px; }
.site-footer { margin-top:40px; padding:55px 0 24px; border-top:1px solid var(--kb-line); }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; }
.footer-grid h2 { margin:0 0 12px; font:400 1.7rem var(--kb-serif); }
.footer-grid p, .footer-grid li { color:var(--kb-muted); font-size:.9rem; }
.footer-grid ul { list-style:none; margin:0; padding:0; }
.footer-grid li+li { margin-top:8px; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:48px; padding-top:18px; border-top:1px solid var(--kb-line); color:var(--kb-muted); font:11px var(--kb-mono); }
@media (max-width:800px) { .container { width:min(calc(100% - 28px),var(--kb-max)); } .header-inner { min-height:68px; } .menu-toggle { display:block; } .primary-nav { display:none; width:100%; } .primary-nav.is-open { display:block; } .primary-nav ul { flex-direction:column; gap:14px; padding:18px 0; } .header-inner { flex-wrap:wrap; } .hero-grid,.featured-card,.newsletter { grid-template-columns:1fr; } .hero h1 { font-size:clamp(3.2rem,15vw,6.5rem); } .hero-note { right:10px; bottom:10px; } .featured-card .card-image { aspect-ratio:1.35; min-height:0; } .post-grid { grid-template-columns:1fr; } .post-grid .card:nth-child(n+3) { display:none; } .section-heading { align-items:start; flex-direction:column; } .footer-grid { grid-template-columns:1fr; gap:28px; } .footer-bottom { flex-direction:column; gap:8px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }
:focus-visible { outline:3px solid var(--kb-accent); outline-offset:4px; }