/*
Theme Name: Retro Minimal Blog
Theme URI: https://www.jungsi.de
Author: Jungsi
Author URI: https://www.jungsi.de
Description: Ein modernes, minimalistisches Blog/Magazin-Theme für Retro-Themen. Mit Dark Mode, Gutenberg-Unterstützung, Social Media Widget und optimierter Performance für Desktop und Mobile.
Version: 1.4.6
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: minimal-blog
Tags: blog, magazine, minimal, dark-mode, gutenberg, responsive, retro
*/

:root {
  --color-bg:          #edeae4;
  --color-surface:     #f8f6f2;
  --color-card:        #ffffff;
  --color-text:        #1a1a1a;
  --color-text-muted:  #6b6b6b;
  --color-border:      #e8e8e4;
  --color-accent:      #c8502a;
  --color-accent-dark: #a33f20;
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-sans:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --size-xs:   0.75rem;
  --size-sm:   0.875rem;
  --size-base: 1rem;
  --size-lg:   1.125rem;
  --size-xl:   1.25rem;
  --size-2xl:  1.5rem;
  --size-3xl:  1.875rem;
  --size-4xl:  2.25rem;
  --size-5xl:  3rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.10);
  --container:      1200px;
  --container-text: 740px;
  --transition: 0.2s ease;
}

/* DARK MODE */
[data-theme="dark"] {
  --color-bg:          #18181b;
  --color-surface:     #1f1f23;
  --color-card:        #27272a;
  --color-text:        #e8e8e4;
  --color-text-muted:  #a0a0a8;
  --color-border:      #3a3a3f;
  --color-accent:      #e8734a;
  --color-accent-dark: #c8502a;
}
[data-theme="dark"] .site-header { background: #18181b; }
[data-theme="dark"] .site-header__card { box-shadow: 0 4px 16px rgba(0,0,0,.4); background: #27272a; }
[data-theme="dark"] .post-card { box-shadow: 0 2px 8px rgba(0,0,0,.3); }
[data-theme="dark"] .post-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.4); }
[data-theme="dark"] .widget { box-shadow: 0 2px 8px rgba(0,0,0,.3); }
[data-theme="dark"] .single-article { box-shadow: 0 4px 16px rgba(0,0,0,.4); }
[data-theme="dark"] .site-footer__card { box-shadow: 0 4px 16px rgba(0,0,0,.4); }
[data-theme="dark"] .hero-post { box-shadow: 0 4px 16px rgba(0,0,0,.4); }
[data-theme="dark"] img { filter: brightness(.92) contrast(1.02); }
[data-theme="dark"] .single-hero-image img { filter: brightness(.88) contrast(1.02); }
/* Dark Mode Logo umschalten */
.logo-dark { display: none !important; }
.logo-light { display: block; }

[data-theme="dark"] .logo-light { display: none !important; }
[data-theme="dark"] .logo-dark  { display: block !important; }
[data-theme="dark"] .logo-dark img {
    height: auto;
    max-height: 120px;
    max-width: 500px;
    object-fit: contain;
    filter: none !important;
}

/* Im Dark Mode kein Invertier-Filter auf Logo */
[data-theme="dark"] .site-branding img {
    filter: none !important;
}

/* Pagination im Dark Mode */
[data-theme="dark"] .pagination a,
[data-theme="dark"] .pagination span {
    background: var(--color-card);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
[data-theme="dark"] .pagination .current {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}
[data-theme="dark"] .pagination a:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* Zurück-nach-oben-Button im Dark Mode */
[data-theme="dark"] #back-to-top-btn {
    background: var(--color-card) !important;
    color: var(--color-text) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] #back-to-top-btn:hover {
    background: var(--color-accent) !important;
    color: #fff !important;
}

/* Dark Mode Toggle Button */
.btn-darkmode {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-muted);
    padding: .4rem .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
    font-size: 1rem;
    line-height: 1;
}
.btn-darkmode:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.btn-darkmode svg { width: 16px; height: 16px; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--size-base); line-height: 1.7; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
h1 { font-size: clamp(var(--size-3xl), 5vw, var(--size-5xl)); }
h2 { font-size: clamp(var(--size-2xl), 3.5vw, var(--size-4xl)); }
h3 { font-size: clamp(var(--size-xl), 2.5vw, var(--size-3xl)); }
p { margin-bottom: 1.5em; }
p:last-child { margin-bottom: 0; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.container--text { max-width: var(--container-text); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

/* HEADER IMAGE */
.site-header-image { width: 100%; overflow: hidden; line-height: 0; }
.site-header-image img { width: 100%; height: auto; max-height: 220px; object-fit: cover; display: block; }

/* HEADER – sticky, kein eigener Hintergrund, nur Abstand */
.site-header {
    background: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 100;
    padding-block: .4rem;
}

/* Header-Card: weißer Hintergrund, Schatten, abgerundete Ecken */
.site-header__card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    /* kein overflow:hidden – sonst werden Dropdown-Menüs abgeschnitten */
}

/* Branding-Zeile: Logo links, Aktionen rechts */
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.75rem 2rem;
    min-height: 140px;
}
.site-branding a { display: flex; align-items: center; gap: .75rem; transition: opacity var(--transition); }
.site-branding a:hover { opacity: .7; }

/* Logo – Größe über CSS, width/height-Attribute werden per PHP entfernt.
   Breites Logo (z.B. 600x120): max-width begrenzt die Breite,
   height:auto sorgt für korrekte Proportionen. */
.site-branding a img,
.site-branding .custom-logo {
    width: auto;
    height: auto;
    max-height: 120px;
    max-width: 500px;
    object-fit: contain;
    display: block;
}

.site-title { font-family: var(--font-serif); font-size: var(--size-xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--color-text); }
.site-description { font-size: var(--size-xs); color: var(--color-text-muted); letter-spacing: .08em; text-transform: uppercase; display: block; margin-top: .15rem; }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.btn-search { background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: .5rem; border-radius: var(--radius-sm); display: flex; align-items: center; transition: color var(--transition); }
.btn-search:hover { color: var(--color-text); }
.btn-search svg { width: 18px; height: 18px; }

/* Navigationsleiste innerhalb der Card */
.site-header__nav {
    border-top: 1px solid var(--color-border);
    background: var(--color-card);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: visible;
}
.site-header__nav .container-inner {
    display: flex;
    align-items: center;
    padding-inline: 1.5rem;
}
.main-navigation { flex: 1; }
.main-navigation ul { display: flex; align-items: center; gap: 0; width: 100%; list-style: none; margin: 0; padding: 0; background: transparent; }
.main-navigation > ul > li { flex: 1; text-align: center; background: transparent; }
/* Basis-Navigationsstile – werden vom Mega Menü Plugin überschrieben */
.main-navigation a,
.main-navigation ul a,
.main-navigation ul li a {
    display: block;
    padding: .7rem .5rem;
    font-family: var(--font-sans);
    font-size: var(--size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    background: transparent;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}
.main-navigation a:hover,
.main-navigation ul li a:hover,
.main-navigation .current-menu-item > a {
    color: var(--color-text);
    background: transparent;
    border-bottom-color: var(--color-accent);
    text-decoration: none;
}

/* Mobile toggle */
.menu-toggle { display: none; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .4rem .6rem; cursor: pointer; color: var(--color-text); font-size: var(--size-sm); font-weight: 500; gap: .4rem; align-items: center; }

/* HERO */
.hero-section { padding-block: 1rem 1.5rem; }
.hero-post { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; background: var(--color-card); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-md); }
.hero-post__media { aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-border); }
.hero-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hero-post:hover .hero-post__media img { transform: scale(1.03); }
.hero-post__content { display: flex; flex-direction: column; gap: 1rem; }
.hero-post__category { display: inline-flex; align-items: center; font-size: var(--size-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--color-accent); padding: .2rem .75rem; border-radius: 100px; text-decoration: none; transition: background var(--transition); }

.hero-post__title a { color: var(--color-text); transition: color var(--transition); }
.hero-post__title a:hover { color: var(--color-accent); }
.hero-post__excerpt { font-size: var(--size-lg); color: var(--color-text-muted); line-height: 1.6; }
.hero-post__meta { display: flex; align-items: center; gap: 1rem; font-size: var(--size-sm); color: var(--color-text-muted); padding-top: .5rem; border-top: 1px solid var(--color-border); }
.author-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--color-border); flex-shrink: 0; }
/* Zentraler "Weiterlesen"-Button */
.more-btn-wrap {
    margin-top: 1rem;
    margin-bottom: 0;
}
.more-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: var(--size-sm);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: gap var(--transition), border-color var(--transition);
    padding: 0;
    background: none;
    box-shadow: none;
}
.more-btn::after {
    content: '→';
    font-size: 1em;
    transition: transform var(--transition);
}
.more-btn:hover {
    color: var(--color-accent-dark);
    border-bottom-color: var(--color-accent);
    background: none;
    box-shadow: none;
    transform: none;
    gap: .55rem;
}
.more-btn:hover::after { transform: translateX(3px); }

/* MAIN */
.site-main { padding-block: .75rem 3rem; }
.content-sidebar-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--color-text); }
.section-heading h2 { font-size: var(--size-2xl); }
.section-heading .view-all { font-size: var(--size-sm); font-weight: 500; color: var(--color-accent); display: flex; align-items: center; gap: .3rem; transition: gap var(--transition); }
.section-heading .view-all:hover { gap: .6rem; }

/* POST LIST */
.post-list { display: flex; flex-direction: column; gap: 1.25rem; }
.post-card { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; padding: 1.5rem; background: var(--color-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); align-items: start; transition: box-shadow var(--transition), transform var(--transition); }
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-card__thumbnail { aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: var(--color-border); flex-shrink: 0; }
.post-card__thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.post-card:hover .post-card__thumbnail img { transform: scale(1.05); }
.post-card__body { display: flex; flex-direction: column; gap: .5rem; justify-content: center; }
.post-card__category { display: inline-block; font-size: var(--size-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--color-accent); padding: .2rem .65rem; border-radius: 100px; text-decoration: none; transition: background var(--transition); }
.post-card__title { font-family: var(--font-sans); font-size: var(--size-xl); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.post-card__title a { color: var(--color-text); transition: color var(--transition); }
.post-card__title a:hover { color: var(--color-accent); }
.post-card__meta { display: flex; align-items: center; gap: .75rem; font-size: var(--size-xs); color: var(--color-text-muted); margin-bottom: .75rem; }
.post-card__meta .separator { color: var(--color-border); }

/* Artikelinhalt in der Karte */
.post-card__content { font-size: var(--size-sm); line-height: 1.75; color: var(--color-text); }
.post-card__content p { margin-bottom: 1em; }
.post-card__content p:last-child { margin-bottom: 0; }
.post-card__content h2, .post-card__content h3, .post-card__content h4 { font-family: var(--font-sans); margin-top: 1.25em; margin-bottom: .4em; }
.post-card__content img { border-radius: var(--radius-sm); margin-block: .75em; max-width: 100%; }
.post-card__content ul, .post-card__content ol { list-style: revert; padding-left: 1.25em; margin-bottom: 1em; }
.post-card__content blockquote { border-left: 2px solid var(--color-accent); padding: .5rem 1rem; background: var(--color-bg); font-style: italic; margin-block: 1em; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Hero content text block */
.hero-post__content-text { font-size: var(--size-sm); line-height: 1.75; color: var(--color-text); margin-top: .5rem; }
.hero-post__content-text p { margin-bottom: 1em; }
.hero-post__content-text p:last-child { margin-bottom: 0; }

/* PAGINATION */
.pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.pagination a, .pagination span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); font-size: var(--size-sm); font-weight: 500; transition: background var(--transition), color var(--transition); border: 1px solid var(--color-border); color: var(--color-text-muted); }
.pagination a:hover { background: var(--color-bg); color: var(--color-text); }
.pagination .current { background: var(--color-text); color: #fff; border-color: var(--color-text); }

/* SIDEBAR */
.sidebar { display: flex; flex-direction: column; gap: 2.5rem; }
.widget { background: var(--color-card); border: none; border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-md); }
.widget-title { font-family: var(--font-sans); font-size: var(--size-lg); font-weight: 700; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--color-border); }
.widget_categories ul { display: flex; flex-direction: column; gap: .5rem; }
.widget_categories li a { display: flex; align-items: center; justify-content: space-between; font-size: var(--size-sm); color: var(--color-text-muted); padding: .4rem 0; transition: color var(--transition); }
.widget_categories li a:hover { color: var(--color-accent); }
.widget_recent_entries ul { display: flex; flex-direction: column; gap: 1rem; }
.widget_recent_entries li a { font-size: var(--size-sm); font-weight: 500; color: var(--color-text); line-height: 1.4; transition: color var(--transition); }
.widget_recent_entries li a:hover { color: var(--color-accent); }
.widget_recent_entries .post-date { display: block; font-size: var(--size-xs); color: var(--color-text-muted); margin-top: .2rem; }
.widget_search .search-form { display: flex; gap: .5rem; }
.widget_search .search-field { flex: 1; padding: .5rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--size-sm); background: var(--color-bg); color: var(--color-text); outline: none; transition: border-color var(--transition); }
.widget_search .search-field:focus { border-color: var(--color-text); }
.widget_search .search-submit { background: var(--color-text); color: #fff; border: none; padding: .5rem .75rem; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--size-sm); font-weight: 500; transition: background var(--transition); }
.widget_search .search-submit:hover { background: var(--color-accent); }

/* SINGLE POST – Card mit vollbreitem Hero-Bild */
.single-article {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-block: 1rem;
}

/* Hero-Bild: vollbreit, keine seitlichen Abstände */
.single-hero-image {
    width: 100%;
    max-height: 480px;
    overflow: hidden;
    line-height: 0;
}
.single-hero-image img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Inhalt: zentriert in Lesebreite */
.single-article__inner {
    max-width: var(--container-text);
    margin-inline: auto;
    padding: 2.5rem 2rem;
}

.single-post-header { padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); margin-bottom: 0; }
.single-post-header .post-title {
    margin-top: .75rem;
    margin-bottom: 1.25rem;
    font-family: var(--font-sans);
    font-size: clamp(var(--size-2xl), 3.5vw, var(--size-4xl));
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
}
.post-meta-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; font-size: var(--size-sm); color: var(--color-text-muted); }
.post-meta-bar .author { display: flex; align-items: center; gap: .75rem; }
.post-meta-bar .author img { width: 40px; height: 40px; border-radius: 50%; }
.post-meta-bar .author-name { font-weight: 600; color: var(--color-text); }

/* ENTRY CONTENT */
.entry-content { padding-block: 2rem 0; font-size: var(--size-lg); line-height: 1.8; }
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.post-card__content h2,
.post-card__content h3,
.post-card__content h4,
.post-card__content h5,
.post-card__content h6,
.hero-post__content-text h2,
.hero-post__content-text h3,
.hero-post__content-text h4,
.hero-post__content-text h5,
.hero-post__content-text h6 { margin-top: 1.25em; margin-bottom: .5em; }

/* Überschriften im Artikel: klare Größenhierarchie, alle gut lesbar */
/* Überschriften-Hierarchie im Artikel (Fließtext = 1.125rem)
   H1: 2.5rem  – Playfair Display
   H2: 2.0rem  – Playfair Display
   H3: 1.75rem – Playfair Display
   H4: 1.5rem  – DM Sans fett
   H5: 1.3rem  – DM Sans fett
   H6: 1.15rem – DM Sans fett, Großbuchstaben */
/* Einzelseite: volle Größenhierarchie */
.entry-content h1 { font-family: var(--font-sans); font-size: 2.5rem;  font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.entry-content h2 { font-family: var(--font-sans); font-size: 2.0rem;  font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.entry-content h3 { font-family: var(--font-sans); font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.entry-content h4 { font-family: var(--font-sans); font-size: 1.5rem;  font-weight: 700; line-height: 1.3; }
.entry-content h5 { font-family: var(--font-sans); font-size: 1.3rem;  font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.entry-content h6 { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .05em; }

/* Beitragskarten (Startseite): kompaktere Größen damit Überschriften nicht zu dominant wirken */
.post-card__content h1, .hero-post__content-text h1 { font-family: var(--font-sans); font-size: 1.5rem;  font-weight: 700; line-height: 1.3; }
.post-card__content h2, .hero-post__content-text h2 { font-family: var(--font-sans); font-size: 1.3rem;  font-weight: 700; line-height: 1.3; }
.post-card__content h3, .hero-post__content-text h3 { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.post-card__content h4, .hero-post__content-text h4 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.post-card__content h5, .hero-post__content-text h5 { font-family: var(--font-sans); font-size: 1.0rem;  font-weight: 700; line-height: 1.4; }
.post-card__content h6, .hero-post__content-text h6 { font-family: var(--font-sans); font-size: 0.9rem;  font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .05em; }
.entry-content p { margin-bottom: 1.5em; }
.entry-content a { color: var(--color-accent); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--transition); }
.entry-content a:hover { text-decoration-color: var(--color-accent); }
.entry-content blockquote { border-left: 3px solid var(--color-accent); margin-inline: 0; padding: 1rem 1.5rem; background: var(--color-bg); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-family: var(--font-serif); font-size: var(--size-xl); font-style: italic; margin-block: 2em; }
.entry-content code { font-family: var(--font-mono); font-size: .875em; background: var(--color-bg); border: 1px solid var(--color-border); padding: .15em .4em; border-radius: var(--radius-sm); }
.entry-content pre { background: #1a1a1a; color: #e8e8e4; padding: 1.5rem; border-radius: var(--radius-md); overflow-x: auto; margin-block: 2em; }
.entry-content pre code { background: none; border: none; padding: 0; color: inherit; font-size: var(--size-sm); }
.entry-content ul, .entry-content ol { list-style: revert; padding-left: 1.5em; margin-bottom: 1.5em; }
.entry-content li { margin-bottom: .5em; }
.entry-content > p > img,
.entry-content > .wp-block-image img,
.entry-content > figure > img {
    border-radius: var(--radius-md);
    margin-block: 1.5em;
}

.entry-content > figure {
    margin-block: 2em;
}
.entry-content figcaption { text-align: center; font-size: var(--size-sm); color: var(--color-text-muted); margin-top: .5rem; }

/* GUTENBERG BLOCKS */
.wp-block-image img { border-radius: var(--radius-md); }
.wp-block-quote { border-left: 3px solid var(--color-accent) !important; }
.wp-block-separator { border-color: var(--color-border) !important; }
.wp-block-code { border-radius: var(--radius-md) !important; }
.wp-block-button__link { background: var(--color-text) !important; border-radius: var(--radius-md) !important; transition: background var(--transition) !important; }
.wp-block-button__link:hover { background: var(--color-accent) !important; }

/* POST TAGS */
.post-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.tag-item { background: var(--color-bg); border: 1px solid var(--color-border); padding: .3rem .75rem; border-radius: 100px; font-size: var(--size-xs); font-weight: 500; color: var(--color-text-muted); transition: border-color var(--transition), color var(--transition); }
.tag-item:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* AUTHOR BOX */
.author-box { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 2rem; display: flex; gap: 1.5rem; align-items: flex-start; margin-top: 3rem; }
.author-box__avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--color-border); }
.author-box__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-box__name { font-family: var(--font-sans); font-size: var(--size-xl); font-weight: 700; margin-bottom: .5rem; }
.author-box__bio { font-size: var(--size-sm); color: var(--color-text-muted); line-height: 1.6; }

/* RELATED POSTS */
.related-posts { margin-top: 4rem; padding-top: 2rem; border-top: 2px solid var(--color-text); }
.related-posts h3 { font-size: var(--size-2xl); margin-bottom: 1.5rem; }
.related-posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.related-post-card { display: flex; flex-direction: column; gap: .75rem; }
.related-post-card__thumb { aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; background: var(--color-border); }
.related-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.related-post-card:hover .related-post-card__thumb img { transform: scale(1.05); }
.related-post-card__category { font-size: var(--size-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); }
.related-post-card__title { font-family: var(--font-sans); font-size: var(--size-lg); font-weight: 700; line-height: 1.3; }
.related-post-card__title a { color: var(--color-text); transition: color var(--transition); }
.related-post-card__title a:hover { color: var(--color-accent); }

/* FOOTER */
.site-footer { background: var(--color-bg); padding-block: 1.25rem 0; margin-top: 1rem; }
.site-footer__card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2.5rem 2rem 1.5rem;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-border); }
.footer-brand .site-title { color: var(--color-text); }
.footer-brand .site-description { color: var(--color-text-muted); margin-top: .25rem; }
.footer-brand p { font-size: var(--size-sm); color: var(--color-text-muted); margin-top: 1rem; }
.footer-col h4 { font-family: var(--font-sans); font-size: var(--size-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-col a { font-size: var(--size-sm); color: var(--color-text-muted); transition: color var(--transition); }
.footer-col a:hover { color: var(--color-accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 1.25rem; font-size: var(--size-xs); color: var(--color-text-muted); }
.footer-bottom a { color: var(--color-text-muted); transition: color var(--transition); }
.footer-bottom a:hover { color: var(--color-accent); }

/* 404 */
.error-404 { text-align: center; padding-block: 6rem; }
.error-404 .error-code { font-family: var(--font-serif); font-size: clamp(5rem, 15vw, 10rem); font-weight: 700; color: var(--color-border); line-height: 1; margin-bottom: 1rem; }
.error-404 p { color: var(--color-text-muted); max-width: 480px; margin-inline: auto; margin-bottom: 2rem; }
.btn-primary { display: inline-flex; align-items: center; gap: .5rem; background: var(--color-text); color: #fff; font-size: var(--size-sm); font-weight: 600; padding: .75rem 1.5rem; border-radius: var(--radius-md); transition: background var(--transition); }
.btn-primary:hover { background: var(--color-accent); }

/* COMMENTS */
.comments-area { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.comments-title { font-size: var(--size-2xl); margin-bottom: 2rem; }
.comment-list { display: flex; flex-direction: column; gap: 1.5rem; }
.comment { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; }
.comment .comment-author { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.comment .fn { font-weight: 600; font-size: var(--size-sm); }
.comment .comment-metadata { font-size: var(--size-xs); color: var(--color-text-muted); }
.comment-content p { font-size: var(--size-sm); color: var(--color-text-muted); }
.comment-respond { margin-top: 2rem; }
.comment-respond h3 { font-size: var(--size-xl); margin-bottom: 1.25rem; }
.comment-form p { margin-bottom: 1rem; }
.comment-form input, .comment-form textarea { width: 100%; padding: .65rem .875rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--size-sm); background: var(--color-bg); color: var(--color-text); outline: none; transition: border-color var(--transition); }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--color-text); }
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form .submit { background: var(--color-text); color: #fff; border: none; padding: .7rem 1.5rem; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--size-sm); font-weight: 600; cursor: pointer; transition: background var(--transition); }
.comment-form .submit:hover { background: var(--color-accent); }

/* SKIP LINK */
.skip-link { position: absolute; top: -40px; left: 0; background: var(--color-accent); color: #fff; padding: .5rem 1rem; z-index: 999; border-radius: 0 0 var(--radius-sm) 0; font-size: var(--size-sm); transition: top var(--transition); }
.skip-link:focus { top: 0; }

/* WORDPRESS NAVIGATION RESET – verhindert blauen Block-Style-Hintergrund */
:root {
    --navigation-color: var(--color-text-muted);
    --navigation-link-color: var(--color-text-muted);
    --navigation-overlay-background-color: transparent;
    --navigation-submenu-background-color: transparent;
    --wp--style--block-gap: 0;
}
.main-navigation,
.main-navigation ul,
.main-navigation li,
.main-navigation a,
#site-navigation,
#site-navigation ul,
#site-navigation li,
#site-navigation a,
nav.main-navigation {
    background-color: transparent !important;
    background: transparent !important;
}
/* WordPress Block-Nav setzt manchmal eine gap-Variable */
.wp-block-navigation,
.wp-block-navigation__container {
    background: transparent !important;
    background-color: transparent !important;
}


/* SOCIAL MEDIA WIDGET */
.social-links-widget { display: flex; flex-direction: column; gap: .5rem; }
.social-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .85rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--size-sm);
    font-weight: 600;
    color: #fff;
    transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
    background: var(--color-text);
}
.social-link:hover { opacity: .88; transform: translateX(3px); }
.social-link__icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; }
.social-link__icon svg { width: 20px; height: 20px; }
.social-link--facebook  { background: #1877f2; }
.social-link--instagram { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.social-link--youtube   { background: #ff0000; }
.social-link--twitter   { background: #000; }
.social-link--mastodon  { background: #6364ff; }
.social-link--rss       { background: #f26522; }


/* HEADER SUCHFELD (permanent) */
.header-search-inline {
    display: flex;
    align-items: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.header-search-inline:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(200,80,42,.15);
}
.header-search-input {
    border: none;
    background: transparent;
    padding: .45rem .75rem;
    font-family: var(--font-sans);
    font-size: var(--size-sm);
    color: var(--color-text);
    width: 180px;
    outline: none;
}
.header-search-input::placeholder { color: var(--color-text-muted); }
.header-search-inline .btn-search {
    border: none;
    border-left: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    padding: .45rem .6rem;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background var(--transition), color var(--transition);
}
.header-search-inline .btn-search:hover {
    background: var(--color-accent);
    color: #fff;
    border-left-color: var(--color-accent);
}
.header-search-inline .btn-search svg { width: 16px; height: 16px; }

/* SEITE OHNE TITEL: weniger Abstand oben */
.no-page-title .site-main { padding-block-start: .5rem; }
.no-page-title .container > * { padding-block-start: .5rem; }

/* SUCHERGEBNISSE */
.search-header {
    padding-block: 1.5rem 2rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 2rem;
}
.search-header h1 {
    font-family: var(--font-sans);
    font-size: var(--size-2xl);
    font-weight: 700;
    color: var(--color-text);
}
.search-header h1 span {
    color: var(--color-accent);
}
.search-result-count {
    font-size: var(--size-sm);
    color: var(--color-text-muted);
    margin-top: .35rem;
}


/* RESPONSIVE */
@media (max-width: 800px) {
  .content-sidebar-wrap { grid-template-columns: 1fr; }
  .sidebar { display: grid; grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* iPad Querformat & kleinere Desktops: Suchfeld schmaler */
@media (max-width: 1024px) {
  .header-search-input { width: 130px; }
}
/* iPad Hochformat (810px) und kleiner: Hamburger-Menü */
@media (max-width: 1024px) {
  .menu-toggle { display: flex; }
  .site-header__nav .main-navigation { display: none; }
  .site-header__nav .main-navigation.is-open { display: block; width: 100%; }
  .main-navigation.is-open ul { flex-direction: column !important; }
  .main-navigation.is-open > ul > li { text-align: left !important; flex: unset !important; }
  .main-navigation.is-open a { padding: .6rem 1.5rem !important; border-bottom: 1px solid var(--color-border) !important; border-left: none !important; }
}
@media (max-width: 768px) {
  .hero-post { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.25rem; }
  .post-card:hover { transform: none; }
  .post-card { grid-template-columns: 120px 1fr; gap: 1rem; }
  .related-posts__grid { grid-template-columns: 1fr; }
  .site-header-image img { max-height: 140px; }
  .footer-grid { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }
  .header-search-input { width: 120px; font-size: var(--size-xs); }
}
@media (max-width: 480px) {
  .post-card { grid-template-columns: 1fr; }
  .author-box { flex-direction: column; }
  .header-search-input { width: 90px; }
}
@media print {
  .site-header, .sidebar, .site-footer, .related-posts, .comments-area { display: none; }
  .content-sidebar-wrap { grid-template-columns: 1fr; }
}
/* Gutenberg-Galerie – saubere Minimal-Anpassung */
.wp-block-gallery {
    margin-block: 1.5em;
}

.wp-block-gallery.has-nested-images {
    gap: 1rem;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
    margin: 0 !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 !important;
    border-radius: var(--radius-sm);
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    margin-top: .4rem;
    padding: 0;
    text-align: center;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--size-xs);
}

/* Galerie darf keine globalen Einzelbild-Abstände erben */
.entry-content .wp-block-gallery img,
.entry-content .wp-block-gallery figure {
    margin: 0 !important;
}