/*
Theme Name: PageUpgrade Starter
Theme URI: https://pageupgrade.io
Author: PageUpgrade
Author URI: https://pageupgrade.io
Description: Minimales Theme für PageUpgrade. Sticky Footer, SEO, TOC + Scroll-Spy, Reading Progress, 6 Farbschemen, Content-Inserts.
Version: 1.2.9
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: pgu-starter
*/

/* Reset — nur das Nötigste */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; }
img { max-width: 100%; height: auto; display: block; }

/* ── Sticky Footer Layout ──────────────────────────────── */
html { height: 100%; }
body {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--pgu-body-bg, #ffffff);
}
body > main,
body > #main,
main#main {
    flex: 1 0 auto !important;
}
body > footer {
    flex-shrink: 0 !important;
    margin-top: auto;
}

/* ── Theme-Basis-Styles ──────────────────────────────────
   NUR Body-Defaults. Wir uebersteuern NICHT den Inhalt von
   Pages — sonst werden KI-generierte Salespages zerstoert.
   Frueher hatten wir aggressive body h1, body section etc.
   Regeln, die haben das Layout ueberall kaputt gemacht.
─────────────────────────────────────────────────────────── */
body {
    font-family: var(--pgu-font, system-ui, -apple-system, sans-serif);
    font-size: 15px;
    line-height: 1.5;
    color: #475569;
}
/* HINWEIS: Die ehemals aggressiven body button / body a Regeln
   wurden entfernt — sie haben Inline-Styles ueberschrieben. */

/* ── Shortcode-Container: Perfektes Rendering ────────────
   Alles was über [pgu_page] eingebunden wird, rendert
   exakt wie vom KI-Code vorgesehen.
─────────────────────────────────────────────────────────── */
.pgu-page-embed,
.pgu-page-embed * {
    max-width: none;
}
.pgu-page-embed {
    font-family: initial;
    font-size: initial;
    line-height: normal;
    color: initial;
    all: initial;
    display: block;
}
.pgu-page-embed section { padding: initial; margin: initial; }
.pgu-page-embed h1 { font-size: initial; margin: initial; color: initial; }
.pgu-page-embed h2 { font-size: initial; margin: initial; color: initial; }
.pgu-page-embed h3 { font-size: initial; margin: initial; color: initial; }
.pgu-page-embed a { color: initial; }
.pgu-page-embed img { max-width: 100%; border-radius: initial; }
.pgu-page-embed button,
.pgu-page-embed a[style*="padding"] {
    font-size: initial !important;
    padding: initial !important;
    border-radius: initial !important;
}
.pgu-page-embed div > div { max-width: none; }

/* ── Blog-Content: Ebenfalls korrekt rendern ────────────── */
.pgu-blog-content,
.pgu-blog-content * { max-width: none; }
.pgu-blog-content { font-size: 16px; line-height: 1.8; color: #334155; font-family: var(--pgu-font, system-ui, -apple-system, sans-serif); }
.pgu-blog-content img { max-width: 100%; }
.pgu-blog-content h1 { font-size: 28px; color: #0f172a; }
.pgu-blog-content h2 { font-size: 22px; color: #0f172a; }
.pgu-blog-content h3 { font-size: 18px; color: #1e293b; }
.pgu-blog-content a { color: var(--pgu-accent, #2563eb); }
.pgu-blog-content a:hover { color: var(--pgu-accent-hover, #1d4ed8); }
.pgu-blog-content blockquote { border-left-color: var(--pgu-border-accent, #e2e8f0); background: var(--pgu-bg-soft, #f8fafc); }
.pgu-blog-content button,
.pgu-blog-content a[style*="padding"] { font-size: initial !important; padding: initial !important; border-radius: initial !important; }

/* ── Artikel/Header/Footer: Nicht stören ────────────────── */
article, article *, article div > div { max-width: none; }
article { font-family: var(--pgu-font, system-ui, -apple-system, sans-serif); }
header[style], footer[style] { all: unset; display: block; }
header[style] *, footer[style] * { max-width: none; }
header[style] a, footer[style] a { color: initial; }
header[style] img { max-width: initial; }

/* ── Kategorie-Pills im Blog ────────────────────────────── */
.pgu-cat-pill { transition: background 0.2s; }
.pgu-cat-pill:hover { background: var(--pgu-bg-soft, #f1f5f9) !important; }

/* ── Sharing Buttons: Akzentfarbe ────────────────────────── */
.pgu-share-btn { transition: opacity 0.2s; }
.pgu-share-btn:hover { opacity: 0.85; }

/* ── Breadcrumbs ─────────────────────────────────────────── */
nav[aria-label="Breadcrumb"] { font-family: var(--pgu-font, system-ui, -apple-system, sans-serif); }
nav[aria-label="Breadcrumb"] a:hover { color: var(--pgu-accent, #2563eb) !important; }

/* ── Mobile Polish ───────────────────────────────────────── */
@media(max-width:768px) {
    .pgu-blog-content { font-size: 15px !important; }
    .pgu-blog-content h2 { font-size: 20px !important; margin-top: 36px !important; }
    .pgu-blog-content h3 { font-size: 17px !important; }
    .pgu-blog-content blockquote { margin: 20px -8px !important; padding: 16px 20px !important; }
    .pgu-blog-content pre { margin: 16px -8px !important; border-radius: 8px !important; font-size: 12px !important; }
    article { padding-left: 16px !important; padding-right: 16px !important; }
    .pgu-card h2 { font-size: 15px !important; }
    aside { width: 100% !important; position: static !important; }
    .pgu-with-sidebar { flex-direction: column !important; }
    .pgu-reading-progress { height: 2px !important; }
}

/* ══════════════════════════════════════════════════════════
   HIGHCLASS POLISH
   ══════════════════════════════════════════════════════════ */

/* ── Typografie: Vertikaler Rhythmus (8px Baseline) ───── */
.pgu-blog-content { --rhythm: 8px; }
.pgu-blog-content p { margin: 0 0 calc(var(--rhythm) * 3); }
.pgu-blog-content h2 {
    font-size: 24px; font-weight: 800; color: #0f172a;
    margin: calc(var(--rhythm) * 7) 0 calc(var(--rhythm) * 2);
    padding-bottom: calc(var(--rhythm) * 1.5);
    border-bottom: 2px solid var(--pgu-border-accent, #e2e8f0);
    letter-spacing: -0.01em;
}
.pgu-blog-content h3 {
    font-size: 19px; font-weight: 700; color: #1e293b;
    margin: calc(var(--rhythm) * 5) 0 calc(var(--rhythm) * 1.5);
    letter-spacing: -0.005em;
}
.pgu-blog-content ul, .pgu-blog-content ol {
    margin: 0 0 calc(var(--rhythm) * 3); padding-left: 24px;
}
.pgu-blog-content li { margin-bottom: calc(var(--rhythm) * 1); }

/* ── Drop Cap (erster Buchstabe) ─────────────────────── */
.pgu-blog-content.pgu-dropcap > p:first-of-type::first-letter {
    float: left;
    font-size: 3.4em;
    font-weight: 800;
    line-height: 0.8;
    margin: 4px 12px 0 0;
    color: var(--pgu-accent, #2563eb);
}

/* ── Elegante Trennlinien ────────────────────────────── */
.pgu-blog-content hr {
    border: none; margin: calc(var(--rhythm) * 5) auto;
    height: 1px; max-width: 120px;
    background: linear-gradient(90deg, transparent, var(--pgu-border-accent, #cbd5e1), transparent);
}

/* ── Artikel-Karten: Premium Hover ───────────────────── */
.pgu-card { position: relative; }
.pgu-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.08); transform: translateY(-4px); }
.pgu-card:hover img { transform: scale(1.06); }
.pgu-card h2 a {
    background-image: linear-gradient(var(--pgu-accent, #2563eb), var(--pgu-accent, #2563eb));
    background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
    transition: background-size 0.3s, color 0.2s;
}
.pgu-card:hover h2 a { background-size: 100% 2px; }

/* ── Sharing Buttons: Hover Elevation ────────────────── */
.pgu-share-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* ── TOC: Active State ───────────────────────────────── */
.pgu-toc-link.active {
    color: var(--pgu-accent, #2563eb) !important;
    background: var(--pgu-bg-soft, #f1f5f9) !important;
    font-weight: 600 !important;
}

/* ── Smooth Scroll ───────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Reading Progress Bar ────────────────────────────── */
.pgu-reading-progress {
    position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
    background: var(--pgu-accent, #2563eb);
    transition: width 0.1s linear;
    pointer-events: none;
}

/* ── Back to Top Button ──────────────────────────────── */
.pgu-back-top {
    position: fixed; bottom: 24px; right: 24px; z-index: 998;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--pgu-accent, #2563eb); color: #fff;
    border: none; cursor: pointer; font-size: 18px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
    display: flex; align-items: center; justify-content: center;
}
.pgu-back-top.visible { opacity: 1; transform: translateY(0); }
.pgu-back-top:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.18); }

/* ── Sidebar Visual Container ────────────────────────── */
aside > * {
    border-radius: 14px;
}
aside::before {
    content: ''; display: block; width: 1px; height: 100%;
    background: linear-gradient(var(--pgu-border-accent, #e2e8f0), transparent);
    position: absolute; left: -20px; top: 0;
}
aside { position: relative; }

/* ── Ähnliche Artikel: Premium Cards ─────────────────── */
.pgu-related-card { position: relative; overflow: hidden; }
.pgu-related-card::after {
    content: 'Weiterlesen →'; position: absolute; bottom: 0; left: 0; right: 0;
    padding: 12px 14px; font-size: 12px; font-weight: 700;
    color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.6));
    opacity: 0; transition: opacity 0.3s; text-align: right;
}
.pgu-related-card:hover::after { opacity: 1; }
.pgu-related-card:hover img { transform: scale(1.05); }
.pgu-related-card img { transition: transform 0.5s; }


/* ── Blog-Karte Hover: Lesbarkeits-Garantie ─────────────── */
.pgu-card h2 a:hover {
    color: var(--pgu-accent, #2563eb) !important;
}