/* andreasvongunten 2026 — Detail-CSS (Tokens + Komponenten-Feinschliff)
   Ergänzt theme.json. Tokens gespiegelt aus dem Open-Design-System (DESIGN.md).
   Immer über semantische Rollen arbeiten (--accent, --text, --link …). */

:root {
	/* Primitive */
	--color-paper: #F5F0E6; --color-paper-warm: #FBF7ED;
	--color-ink: #221F19; --color-ink-soft: #3A3630;
	--color-green: #365A41; --color-green-deep: #26402E; --color-green-bright: #3F6B47;
	--color-green-light: #7FA98A; --color-green-wash: #E4EDE6;
	--color-amber: #9A6B25; --color-amber-text: #7A5416; --color-amber-light: #D9A94E; --color-amber-wash: #F3E7D0;
	--color-red: #A83A2F; --color-red-wash: #F3DAD6;
	--color-neutral-0: #F5F0E6; --color-neutral-100: #EAE3D4; --color-neutral-200: #D9D0BC;
	--color-neutral-300: #B3A992; --color-neutral-400: #857B69; --color-neutral-500: #4E4840; --color-neutral-600: #221F19;

	/* Semantic */
	--bg: var(--color-paper); --bg-elevated: var(--color-paper-warm);
	--surface: var(--color-neutral-100); --surface-strong: var(--color-neutral-200);
	--text: var(--color-ink); --text-soft: var(--color-ink-soft); --text-muted: var(--color-neutral-400); --text-inverse: var(--color-paper);
	--accent: var(--color-green); --accent-hover: var(--color-green-deep);
	--accent-2: var(--color-amber); --accent-2-text: var(--color-amber-text);
	--link: var(--color-green); --link-hover: var(--color-green-deep); --link-visited: var(--color-amber-text);
	--border: var(--color-neutral-200); --border-strong: var(--color-neutral-300); --divider: var(--color-neutral-200);
	--success: var(--color-green-bright); --warning: var(--color-amber); --error: var(--color-red);

	/* Type */
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body: "Spectral", Georgia, "Times New Roman", serif;
	--font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
	--tracking-caps: 0.08em;

	/* System */
	--radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px;
	--shadow-sm: 0 1px 2px 0 #221F1914; --shadow-md: 0 4px 12px -2px #221F191F; --shadow-lg: 0 12px 28px -6px #221F1926;
	--shadow-focus: 0 0 0 3px #365A4133;
	--container-narrow: 680px; --container-md: 880px; --container-wide: 1080px; --container-max: 1240px;
	--nav-height: 72px;
	--ease-standard: cubic-bezier(.2,.7,.2,1); --dur-base: 200ms;
}

::selection { background: var(--color-amber-wash); color: var(--color-ink); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ─── Basis-Typografie ─── */
body {
	font-family: var(--font-body);
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-optical-sizing: auto;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
em, i, cite { font-style: italic; }

/* ─── Editorial-Bausteine (Utility-Klassen für Patterns) ─── */
.avg-kicker {
	font-family: var(--font-body); font-weight: 500; font-size: 14px;
	letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted);
}
.avg-lead { font-size: 22px; line-height: 1.5; color: var(--color-neutral-500); }
.avg-accent-italic { font-family: var(--font-display); font-style: italic; color: var(--accent-2); }

/* ─── Links im Fliesstext ─── */
.entry-content a, .avg-prose a {
	color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.entry-content a:hover, .avg-prose a:hover { color: var(--link-hover); }

/* ─── Blockquote & Pull-Quote ─── */
.wp-block-quote {
	border-left: 4px solid var(--accent); padding-left: 24px; margin-left: 0;
	font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 22px; color: var(--text-soft);
}
.wp-block-quote cite, .wp-block-quote footer { display: block; margin-top: 12px; font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: 14px; color: var(--text-muted); }
.wp-block-pullquote { border: 0; padding: 24px 0; }
.wp-block-pullquote blockquote::before, .wp-block-pullquote blockquote::after { content: "· · ·"; display: block; color: var(--text-muted); font-family: var(--font-display); }
.wp-block-pullquote p { font-family: var(--font-display); font-style: italic; font-size: 28px; color: var(--text); }

/* ─── Badges / Kategorie-Pills ─── */
.avg-badge {
	display: inline-block; padding: 3px 12px; border-radius: var(--radius-full);
	background: var(--accent); color: var(--text-inverse);
	font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: .01em; text-decoration: none;
}
.avg-badge--muted { background: var(--surface); color: var(--color-neutral-500); }

/* ─── Cards (Beitrags-/Themen-Karten) ─── */
.avg-card {
	background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
	transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.avg-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ─── Buttons: sekundär / ghost (primär kommt aus theme.json) ─── */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--color-ink); border: 1px solid var(--color-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--accent); color: var(--accent); }

/* ─── Navigation: aktiver Link ─── */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation a[aria-current="page"] {
	color: var(--accent); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}

/* ─── Footer (dunkle warme Fläche) ─── */
.avg-footer { background: var(--color-neutral-500); color: var(--color-paper); }
.avg-footer a { color: var(--color-paper); }
.avg-footer a:hover { color: var(--color-amber-light); }
.avg-footer .avg-footer__muted { color: var(--color-neutral-200); }

/* ─── Formulare (Basis) ─── */
input[type="text"], input[type="email"], input[type="search"], textarea, select {
	min-height: 44px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	background: var(--color-paper); color: var(--text); font-family: var(--font-body); font-size: 16px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus); border-color: var(--accent); }

/* ─── Fokus & Skip-Link (A11y) ─── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.avg-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--accent); color: var(--text-inverse); padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0;
}
.avg-skip-link:focus { left: 0; }

/* ─── hr Zierlinie ─── */
.wp-block-separator { border: 0; border-top: 1px solid var(--divider); max-width: 100%; }
.wp-block-separator.is-style-dots::before { content: "· · ·"; color: var(--text-muted); font-family: var(--font-display); }

/* ═══════════════ Chunk B — Header, Footer, Home ═══════════════ */

/* ─── Brand-Lockup (Header + Footer) ─── */
.avg-brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
.avg-brand__icon { display:inline-flex; }
.avg-brand__word { font-family:var(--font-display); font-weight:600; font-size:22px; letter-spacing:-0.01em; white-space:nowrap; }
.avg-brand__com { color:var(--accent-2-text); }
.avg-brand--footer { margin-bottom:16px; }
.avg-brand--footer .avg-brand__word { color:var(--color-paper); }

/* ─── Header: sticky ─── */
.avg-header { position:sticky; top:0; z-index:200; }
.avg-nav a { color:var(--text); text-decoration:none; }
.avg-nav a:hover { color:var(--accent); }
.wp-block-search.avg-search .wp-block-search__button {
	background:transparent; border:1px solid var(--border); border-radius:var(--radius-full);
	width:40px; height:40px; color:var(--text); padding:0;
}
.wp-block-search.avg-search .wp-block-search__button:hover { background:var(--surface); border-color:var(--border-strong); }

/* ─── Home: Beitrags-Karten ─── */
.avg-post-grid .avg-card { overflow:hidden; }
.avg-post-grid .wp-block-post-featured-image { margin-bottom:4px; }
.avg-post-grid .wp-block-post-featured-image img { border-radius:8px; aspect-ratio:4/3; object-fit:cover; width:100%; }
.avg-badge-terms { text-transform:none; }
.avg-badge-terms a {
	display:inline-block; padding:3px 12px; border-radius:var(--radius-full);
	background:var(--accent); color:var(--text-inverse) !important; text-decoration:none;
	font-family:var(--font-body); font-size:13px; font-weight:500;
}
.avg-post-grid .wp-block-post-title { line-height:1.2; margin:2px 0; }
.avg-post-grid .wp-block-post-title a { color:var(--text); text-decoration:none; }
.avg-post-grid .wp-block-post-title a:hover { color:var(--accent); }
.avg-post-grid .wp-block-post-excerpt { color:var(--text-soft); font-size:16px; }
.avg-post-grid .wp-block-post-excerpt__more-link { display:inline-block; margin-top:8px; color:var(--link); font-weight:500; text-decoration:none; }

/* ─── Home: Themen-Grid ─── */
.avg-themen__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.avg-topic {
	display:flex; flex-direction:column; gap:6px; padding:20px 22px; text-decoration:none; color:var(--text);
	background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-md);
	transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.avg-topic:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.avg-topic__badge {
	width:34px; height:34px; border-radius:var(--radius-full); background:var(--accent); color:var(--text-inverse);
	display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:16px;
}
.avg-topic__name { font-family:var(--font-display); font-weight:600; font-size:22px; margin-top:6px; }
.avg-topic__count { font-size:14px; color:var(--text-muted); }

/* ─── Footer: Spalten-Links, Social, Regel ─── */
.avg-footer__links { list-style:none; margin:0; padding:0; }
.avg-footer__links li { margin:0; }
.avg-footer__links a { display:block; padding:6px 0; color:var(--color-paper); text-decoration:none; opacity:.9; font-size:16px; }
.avg-footer__links a:hover { opacity:1; text-decoration:underline; text-underline-offset:3px; }
.avg-socials { margin-top:16px; }
.avg-footer__rule { border-top:1px solid rgba(245,240,230,.16); margin:40px 0 0; }

/* ─── Newsletter-CTA ─── */
.avg-newsletter .avg-lead { color:var(--text-soft); }

/* ─── Responsive ─── */
@media (max-width:900px){ .avg-themen__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .avg-themen__grid{ grid-template-columns:1fr; } }

/* ═══════════════ Chunk C — Single, Listing, Fixes ═══════════════ */

/* ─── Fix 1: Kategorie-Pills als Pill-Reihe, auf max. 2 begrenzt ─── */
.avg-badge-terms { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.avg-badge-terms .wp-block-post-terms__separator { display:none; }
.avg-badge-terms a {
	display:inline-block; padding:3px 12px; border-radius:var(--radius-full);
	background:var(--accent); color:var(--text-inverse) !important; text-decoration:none;
	font-family:var(--font-body); font-size:13px; font-weight:500;
}
.avg-badge-terms a:hover { background:var(--accent-hover); }
.avg-post-grid .avg-badge-terms a:nth-of-type(n+3) { display:none; }   /* Cards: max 2 */
.avg-badge-terms--single a:nth-of-type(n+2) { display:none; }          /* Single: nur Hauptkategorie */

/* ─── Fix 2: sauberer 4:3-Bildzuschnitt in Karten ─── */
.avg-post-grid .wp-block-post-featured-image { margin:0 0 4px; }
.avg-post-grid .wp-block-post-featured-image img {
	aspect-ratio:4/3; object-fit:cover; width:100%; height:auto; display:block; border-radius:8px;
}

/* ─── Single: Zurück-Link, Kicker-Reihe, Byline ─── */
.avg-back a { color:var(--text-muted); text-decoration:none; }
.avg-back a:hover { color:var(--text); }
.avg-kicker-row { align-items:center; }
.avg-kicker-row .wp-block-post-date { color:var(--text-muted); font-size:14px; }
.avg-byline { color:var(--text-muted); align-items:center; }
.avg-byline__author { color:var(--text); font-weight:500; margin:0; }
.avg-byline .wp-block-post-date { margin:0; }

/* ─── Single: Prosa (aus DESIGN.md patterns-article) ─── */
.avg-prose { font-size:18px; line-height:1.6; }
.avg-prose > p:first-of-type { font-size:22px; line-height:1.35; color:var(--color-neutral-500); }
.avg-prose p { margin:0 0 24px; }
.avg-prose h2 { font-family:var(--font-display); font-weight:600; font-size:34px; line-height:1.3; margin:48px 0 16px; letter-spacing:-.01em; }
.avg-prose h3 { font-family:var(--font-display); font-weight:600; font-size:28px; margin:32px 0 12px; }
.avg-prose h4 { font-family:var(--font-display); font-weight:600; font-size:22px; margin:24px 0 12px; }
.avg-prose a { color:var(--link); text-underline-offset:3px; }
.avg-prose a:hover { color:var(--link-hover); }
.avg-prose ul, .avg-prose ol { padding-left:22px; margin:0 0 24px; }
.avg-prose ul li { list-style:none; position:relative; margin-bottom:8px; }
.avg-prose ul li::before { content:"•"; color:var(--accent); position:absolute; left:-18px; top:0; font-size:20px; line-height:1; }
.avg-prose ol { list-style:none; counter-reset:step; padding-left:36px; }
.avg-prose ol li { counter-increment:step; position:relative; margin-bottom:8px; }
.avg-prose ol li::before { content:counter(step)"."; font-family:var(--font-display); font-weight:500; color:var(--accent); position:absolute; left:-32px; top:0; width:24px; text-align:right; }
.avg-prose blockquote { border-left:4px solid var(--accent); margin:32px 0; padding:6px 0 6px 20px; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:22px; color:var(--text-soft); line-height:1.3; }
.avg-prose blockquote cite { display:block; margin-top:8px; font-style:normal; font-size:14px; color:var(--text-muted); font-family:var(--font-body); font-weight:400; }
.avg-prose figure { margin:48px 0; }
.avg-prose figcaption { font-size:14px; color:var(--figure-caption); margin-top:10px; text-align:center; font-style:italic; }
.avg-prose hr { border:0; border-top:1px solid var(--divider); margin:48px 0; }
.avg-prose code { font-family:var(--font-mono); background:var(--surface); padding:2px 6px; border-radius:3px; font-size:.9em; }
.avg-prose pre { font-family:var(--font-mono); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 20px; overflow:auto; font-size:16px; line-height:1.5; margin:0 0 24px; }
.avg-prose img { border-radius:var(--radius-md); }

/* ─── Single: Tags, Autor-Box, CTA-Band ─── */
.avg-taglist { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.avg-taglist .wp-block-post-terms__separator { display:none; }
.avg-taglist a { background:var(--surface); color:var(--text) !important; text-decoration:none; padding:6px 12px; border-radius:var(--radius-full); font-size:14px; border:1px solid var(--border); }
.avg-taglist a:hover { background:var(--surface-strong); }
.avg-author-box { align-items:flex-start; border:1px solid var(--border); border-radius:var(--radius-md); }
.avg-author-box__portrait { flex:0 0 72px; width:72px; height:72px; border-radius:var(--radius-full); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; color:var(--accent); font-size:22px; border:1px solid var(--border); }
.avg-cta-band { border:1px solid var(--border); border-radius:var(--radius-md); }

/* ─── Pagination ─── */
.avg-pagination { gap:6px; font-family:var(--font-body); }
.avg-pagination .wp-block-query-pagination-numbers .page-numbers {
	padding:6px 12px; border-radius:var(--radius-sm); color:var(--text); text-decoration:none;
}
.avg-pagination .page-numbers.current { background:var(--accent); color:var(--text-inverse); }
.avg-pagination a.page-numbers:hover { background:var(--surface); }
.avg-pagination .wp-block-query-pagination-previous, .avg-pagination .wp-block-query-pagination-next { color:var(--link); font-weight:500; text-decoration:none; }

/* ─── Suche als Seiten-Feld ─── */
.avg-search--page .wp-block-search__inside-wrapper { max-width:480px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; }

/* ═══════════════ Feinschliff — Header-Ausrichtung ═══════════════ */
/* Logo + Wortmarke exakt auf einer Höhe mit Nav/Suche vertikal zentrieren */
.avg-header .wp-block-group.is-layout-flex { align-items: center; }
.avg-brand__icon svg { display: block; }
.avg-brand { gap: 14px; }

/* ═══════════════ Feinschliff v2 — Header grösser & exakt ausgerichtet ═══════════════ */
/* Wortmarke grösser */
.avg-brand__word { font-size: 27px; }
/* Nav-Menüpunkte grösser & auf einer Linie mit Logo */
.avg-header .avg-nav a,
.avg-header .avg-nav .wp-block-navigation-item__label { font-size: 19px; line-height: 1; }
/* Suche-Button etwas grösser, mit Nav-Höhe */
.wp-block-search.avg-search .wp-block-search__button { width: 44px; height: 44px; }
.wp-block-search.avg-search .wp-block-search__button svg { width: 20px; height: 20px; }
/* Beide Header-Seiten vertikal exakt zentrieren + etwas mehr Luft */
.avg-header > .wp-block-group.is-layout-flex { align-items: center; min-height: 72px; }
.avg-header .avg-nav .wp-block-navigation__container { align-items: center; }
.avg-brand { align-items: center; }