/*
Theme Name:   The Dutch Griller
Theme URI:    https://thedutchgriller.com
Description:  GeneratePress Child Theme für The Dutch Griller – Dutch Oven und Outdoor Cooking mit Feuer, Gusseisen, Stahl und Keramik.
Author:       Richard Alexander
Author URI:   https://thedutchgriller.com
Template:     generatepress
Version:      2.4.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain:  thedutchgriller
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Single source of truth for color, type and spacing. Change a value here
   and it cascades through every component below.
   ========================================================================== */
:root {
	/* Brand colors */
	--tdg-primary: #1a1a1a;
	--tdg-primary-dark: #0d0d0d;
	--tdg-primary-light: #3a3a3a;
	--tdg-secondary: #8a4a1f;
	--tdg-accent: #b34e10;
	--tdg-accent-dark: #8f3b09;
	--tdg-bg: #faf3e8;
	--tdg-surface: #ffffff;
	--tdg-text: #2b2620;
	--tdg-text-muted: #6b6255;
	--tdg-border: #f0e4d0;
	--tdg-success: #3d6b4f;
	--tdg-danger: #a33b2f;
	--tdg-ember: #ff8a3d;

	/* Type */
	--tdg-font-heading: Georgia, 'Times New Roman', serif;
	--tdg-font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Shape & elevation */
	--tdg-radius-sm: 6px;
	--tdg-radius-md: 10px;
	--tdg-radius-lg: 18px;
	--tdg-shadow-sm: 0 2px 10px rgba(20, 16, 10, 0.08);
	--tdg-shadow-md: 0 10px 30px rgba(20, 16, 10, 0.14);
	--tdg-shadow-ember: 0 6px 20px rgba(210, 96, 26, 0.35);

	/* Layout */
	--tdg-container: 1200px;
	--tdg-container-narrow: 760px;
	--tdg-section-pad: 6rem;
	--tdg-header-h: 84px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
body {
	background: var(--tdg-bg);
	color: var(--tdg-text);
	font-family: var(--tdg-font-body);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
.tdg-modal-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tdg-font-heading);
	color: var(--tdg-primary);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

a { color: var(--tdg-secondary); text-decoration: none; }
a:hover { color: var(--tdg-accent); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
	outline: 3px solid var(--tdg-accent);
	outline-offset: 2px;
}

.container {
	max-width: var(--tdg-container);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.container-narrow {
	max-width: var(--tdg-container-narrow);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.tdg-section { padding-block: var(--tdg-section-pad); }
.tdg-section--tight { padding-block: 3.5rem; }
.tdg-section--surface { background: var(--tdg-surface); }
.tdg-section--primary { background: var(--tdg-primary); color: #fff; }
.tdg-section--primary h2, .tdg-section--primary h3 { color: #fff; }

.tdg-eyebrow {
	display: inline-block;
	font-family: var(--tdg-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tdg-accent);
	margin-bottom: 0.75rem;
}

.tdg-section-head { max-width: 640px; margin-bottom: 2.75rem; }
.tdg-section-head h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); margin: 0 0 0.75rem; }
.tdg-section-head p { color: var(--tdg-text-muted); font-size: 1.08rem; margin: 0; }
.tdg-section-head--center { margin-inline: auto; text-align: center; }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.tdg-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--tdg-font-body);
	font-weight: 600;
	font-size: 0.98rem;
	padding: 0.85rem 1.6rem;
	border-radius: var(--tdg-radius-md);
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.tdg-btn-primary { background: var(--tdg-accent); color: #fff; }
.tdg-btn-primary:hover { background: var(--tdg-accent-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--tdg-shadow-ember); }

.tdg-btn-outline { background: transparent; border-color: currentColor; color: inherit; }
.tdg-btn-outline:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }

.tdg-btn-secondary { background: var(--tdg-primary); color: #fff; }
.tdg-btn-secondary:hover { background: var(--tdg-primary-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--tdg-shadow-md); }

/* ==========================================================================
   4. HEADER & NAVIGATION
   ========================================================================== */
.site-header { background: var(--tdg-bg); border-bottom: 1px solid var(--tdg-border); transition: box-shadow 0.25s ease, background-color 0.25s ease; }

.site-header.tdg-is-stuck {
	position: sticky;
	top: 0;
	z-index: 200;
	box-shadow: var(--tdg-shadow-sm);
	background: rgba(250, 243, 232, 0.96);
	backdrop-filter: saturate(140%) blur(6px);
}

.main-navigation .main-nav ul li a {
	font-family: var(--tdg-font-body);
	font-weight: 600;
	color: var(--tdg-text);
	font-size: 0.97rem;
}
.main-navigation .main-nav ul li a:hover { color: var(--tdg-accent); }
.main-navigation ul ul {
	background: var(--tdg-primary);
	border-top: 3px solid var(--tdg-accent);
}
.main-navigation ul ul a { color: #fff !important; }
.main-navigation ul ul a:hover { color: var(--tdg-ember) !important; }

.tdg-search-toggle {
	background: none;
	border: none;
	color: var(--tdg-text);
	cursor: pointer;
	padding: 0.4rem;
	display: inline-flex;
	margin-inline-start: 0.5rem;
}
.tdg-search-toggle:hover { color: var(--tdg-accent); }

.tdg-search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 16, 10, 0.72);
	z-index: 999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 14vh;
	overflow-y: auto;
}
.tdg-search-overlay[hidden] { display: none; }
.tdg-search-overlay-inner {
	background: var(--tdg-surface);
	border-radius: var(--tdg-radius-lg);
	padding: 1.75rem;
	width: min(560px, 92vw);
	position: relative;
	box-shadow: var(--tdg-shadow-md);
}
.tdg-search-overlay-inner .search-field {
	width: 100%;
	padding: 0.9rem 1rem;
	border: 2px solid var(--tdg-border);
	border-radius: var(--tdg-radius-md);
	font-size: 1.05rem;
	font-family: var(--tdg-font-body);
}
.tdg-search-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--tdg-primary);
	color: #fff;
	font-size: 1.2rem;
	cursor: pointer;
	line-height: 1;
}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.tdg-hero {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.tdg-hero { grid-template-columns: 1.05fr 0.95fr; min-height: 640px; }
}

.tdg-hero-copy {
	background: var(--tdg-primary);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem 1.5rem;
	position: relative;
	overflow: hidden;
}

.tdg-hero-copy::after {
	content: "";
	position: absolute;
	inset: auto -20% -30% auto;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(210,96,26,0.35), transparent 70%);
	pointer-events: none;
}

@media (min-width: 900px) {
	.tdg-hero-copy { padding: 4rem 4.5rem; }
}

.tdg-hero-copy .tdg-eyebrow { color: var(--tdg-ember); }
.tdg-hero-brand {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 50%;
	margin-bottom: 1.25rem;
	box-shadow: 0 0 0 4px rgba(255,255,255,0.1);
}

.tdg-hero-copy h1 {
	color: #fff;
	font-size: clamp(2.1rem, 1.6rem + 2.3vw, 3.3rem);
	margin: 0 0 1.1rem;
	max-width: 16ch;
}

.tdg-hero-copy p {
	font-size: 1.13rem;
	color: rgba(255,255,255,0.86);
	max-width: 46ch;
	margin: 0 0 2rem;
}

.tdg-hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; position: relative; z-index: 1; }

.tdg-hero-media { position: relative; min-height: 320px; }
.tdg-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* Topic hubs: intentionally text-led until each new cluster has original imagery. */
.tdg-topic-hubs { scroll-margin-top: calc(var(--tdg-header-h) + 1rem); }
.tdg-topic-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.25rem;
}
.tdg-topic-card {
	display: flex;
	flex-direction: column;
	min-height: 245px;
	padding: 1.65rem;
	background: var(--tdg-surface);
	border: 1px solid var(--tdg-border);
	border-top: 5px solid var(--tdg-secondary);
	border-radius: var(--tdg-radius-lg);
	color: var(--tdg-text);
	box-shadow: var(--tdg-shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tdg-topic-card:hover {
	color: var(--tdg-text);
	border-top-color: var(--tdg-accent);
	transform: translateY(-3px);
	box-shadow: var(--tdg-shadow-md);
}
.tdg-topic-card--featured {
	background: var(--tdg-primary);
	border-color: var(--tdg-primary);
	border-top-color: var(--tdg-ember);
	color: #fff;
}
.tdg-topic-card--featured:hover { color: #fff; border-top-color: var(--tdg-ember); }
.tdg-topic-kicker {
	display: inline-block;
	font-size: 0.76rem;
	font-weight: 750;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tdg-accent);
	margin-bottom: 1.1rem;
}
.tdg-topic-card--featured .tdg-topic-kicker { color: var(--tdg-ember); }
.tdg-topic-card h3 { margin: 0 0 0.65rem; font-size: 1.4rem; }
.tdg-topic-card--featured h3 { color: #fff; }
.tdg-topic-card p { color: var(--tdg-text-muted); margin: 0 0 1.25rem; font-size: 0.95rem; }
.tdg-topic-card--featured p { color: rgba(255,255,255,0.8); }
.tdg-topic-card strong { margin-top: auto; color: var(--tdg-secondary); font-size: 0.9rem; }
.tdg-topic-card--featured strong { color: var(--tdg-ember); }

/* Beginner route: a crawlable, task-based path to the cornerstone articles. */
.tdg-startguide { scroll-margin-top: calc(var(--tdg-header-h) + 1rem); }
.tdg-start-path {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1rem;
}
.tdg-start-path a {
	display: block;
	height: 100%;
	padding: 0;
	background: var(--tdg-bg);
	border: 1px solid var(--tdg-border);
	border-radius: var(--tdg-radius-md);
	overflow: hidden;
	color: var(--tdg-primary);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tdg-start-path a:hover {
	color: var(--tdg-primary);
	border-color: var(--tdg-accent);
	transform: translateY(-2px);
	box-shadow: var(--tdg-shadow-sm);
}
.tdg-start-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tdg-border); }
.tdg-start-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.tdg-start-path a:hover .tdg-start-media img { transform: scale(1.03); }
.tdg-start-number {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--tdg-primary);
	color: #fff;
	font-family: var(--tdg-font-heading);
	font-size: 1.15rem;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}
.tdg-start-copy { padding: 1rem 1.1rem 1.2rem; }
.tdg-start-copy span { display: block; color: var(--tdg-text-muted); font-size: 0.82rem; margin-bottom: 0.2rem; }
.tdg-start-copy strong { display: block; line-height: 1.3; }

@media (max-width: 520px) {
	.tdg-start-path { gap: 1.25rem; }
	.tdg-start-media { aspect-ratio: 16 / 9; }
	.tdg-start-copy { padding: 1rem 1.15rem 1.2rem; }
	.tdg-start-copy strong { font-size: 1.1rem; }
}

.tdg-editorial-promise {
	display: grid;
	gap: 2rem;
	background: var(--tdg-primary);
	color: #fff;
	border-radius: var(--tdg-radius-lg);
	padding: clamp(1.7rem, 4vw, 3rem);
}
@media (min-width: 820px) { .tdg-editorial-promise { grid-template-columns: 0.8fr 1.2fr; align-items: start; } }
.tdg-editorial-promise h2 { color: #fff; margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.tdg-editorial-promise ul { margin: 0; padding-left: 1.25rem; }
.tdg-editorial-promise li { margin-bottom: 0.75rem; color: rgba(255,255,255,0.86); }

/* ==========================================================================
   6. CATEGORY CARDS (homepage)
   ========================================================================== */
.tdg-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.75rem;
}

.tdg-category-card {
	position: relative;
	border-radius: var(--tdg-radius-lg);
	overflow: hidden;
	min-height: 320px;
	display: flex;
	align-items: flex-end;
	box-shadow: var(--tdg-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tdg-category-card:hover { transform: translateY(-4px); box-shadow: var(--tdg-shadow-md); }

.tdg-category-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.tdg-category-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,16,10,0) 35%, rgba(13,13,13,0.9) 100%);
	z-index: 1;
}

.tdg-category-card-body { position: relative; z-index: 2; padding: 1.75rem; color: #fff; }
.tdg-category-card-body h3 { color: #fff; font-size: 1.4rem; margin: 0 0 0.4rem; }
.tdg-category-card-body p { color: rgba(255,255,255,0.82); font-size: 0.95rem; margin: 0 0 0.9rem; }
.tdg-category-card-link {
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.tdg-category-card a.tdg-category-card-stretch { position: absolute; inset: 0; z-index: 3; }

/* ==========================================================================
   7. POST / CONTENT CARDS
   ========================================================================== */
.tdg-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 1.85rem;
}

.tdg-card {
	background: var(--tdg-surface);
	border: 1px solid var(--tdg-border);
	border-radius: var(--tdg-radius-lg);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tdg-card:hover { transform: translateY(-3px); box-shadow: var(--tdg-shadow-md); }

.tdg-card-thumb-wrap { position: relative; }
.tdg-card-thumb { display: block; aspect-ratio: 4/3; background: var(--tdg-border); overflow: hidden; }
.tdg-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tdg-card-thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, var(--tdg-border), var(--tdg-border) 10px, var(--tdg-bg) 10px, var(--tdg-bg) 20px);
}

.tdg-card-body { padding: 1.4rem 1.5rem 1.6rem; }
.tdg-card-title { font-size: 1.18rem; margin: 0 0 0.55rem; line-height: 1.35; }
.tdg-card-title a { color: var(--tdg-primary); }
.tdg-card-title a:hover { color: var(--tdg-accent); }
.tdg-card-excerpt { color: var(--tdg-text-muted); font-size: 0.96rem; margin: 0 0 0.85rem; }
.tdg-card-meta { font-size: 0.82rem; color: var(--tdg-text-muted); font-weight: 600; }

/* Category "stamp" badge — echoes lettering pressed into a real Dutch oven lid */
.tdg-cat-badge {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	z-index: 2;
	display: inline-block;
	background: var(--tdg-accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	text-shadow: 0 1px 0 rgba(0,0,0,0.25);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 3px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.2);
}
.tdg-cat-badge:hover { color: #fff; }
.tdg-cat-badge.tdg-cat-kaufberatung-zubehor { background: var(--tdg-secondary); }
.tdg-cat-badge.tdg-cat-pflege-technik { background: var(--tdg-primary); }
.tdg-cat-badge.tdg-cat-vergleiche { background: #4a4a4a; }

/* ==========================================================================
   8. NEWSLETTER
   ========================================================================== */
.tdg-newsletter {
	background: var(--tdg-primary);
	color: #fff;
	border-radius: var(--tdg-radius-lg);
	padding: 3rem;
	display: grid;
	gap: 2rem;
	position: relative;
	overflow: hidden;
}
@media (min-width: 800px) { .tdg-newsletter { grid-template-columns: 1fr 1fr; align-items: center; } }
.tdg-newsletter h2, .tdg-newsletter h3 { color: #fff; margin: 0 0 0.6rem; }
.tdg-newsletter p { color: rgba(255,255,255,0.85); margin: 0; }

.tdg-newsletter-form { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.tdg-newsletter-form input[type="text"],
.tdg-newsletter-form input[type="email"] {
	flex: 1 1 180px;
	padding: 0.85rem 1rem;
	border-radius: var(--tdg-radius-md);
	border: none;
	font-family: var(--tdg-font-body);
	font-size: 0.98rem;
}
.tdg-newsletter-form .tdg-btn-primary { flex: 0 0 auto; }
.tdg-newsletter-note { font-size: 0.78rem; color: rgba(255,255,255,0.65); margin-top: 0.6rem; width: 100%; }

.tdg-newsletter--compact { padding: 1.5rem; border-radius: var(--tdg-radius-md); display: block; }
.tdg-newsletter--compact .tdg-newsletter-form { flex-direction: column; }
.tdg-newsletter--compact input { width: 100%; }

.tdg-footer-col .tdg-newsletter--compact { background: rgba(255,255,255,0.08); }

/* ==========================================================================
   9. ABOUT (homepage teaser)
   ========================================================================== */
.tdg-about {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}
@media (min-width: 860px) { .tdg-about { grid-template-columns: 0.85fr 1.15fr; } }
.tdg-about-photo { border-radius: var(--tdg-radius-lg); overflow: hidden; box-shadow: var(--tdg-shadow-sm); aspect-ratio: 4/5; }
.tdg-about-photo img { width: 100%; height: 100%; object-fit: cover; }
.tdg-about-body h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.tdg-about-body p { color: var(--tdg-text-muted); font-size: 1.06rem; }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.tdg-footer-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2.5rem;
	padding-block: 3.5rem;
}
.tdg-footer-col h3 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 1.1rem; }
.tdg-footer-col .tdg-footer-subheading { margin-top: 1.8rem; }
.tdg-footer-col p { color: rgba(255,255,255,0.75); font-size: 0.93rem; }
.tdg-footer-col ul { list-style: none; margin: 0; padding: 0; }
.tdg-footer-col ul li { margin-bottom: 0.55rem; }
.tdg-footer-col ul a { color: rgba(255,255,255,0.78); font-size: 0.93rem; }
.tdg-footer-col ul a:hover { color: var(--tdg-ember); }
.tdg-social-links { display: flex; gap: 0.85rem; margin-top: 1.1rem; }
.tdg-social-links a { color: #fff; }

#colophon, .site-footer { background: var(--tdg-primary-dark); color: rgba(255,255,255,0.7); }
#colophon a, .site-footer a { color: rgba(255,255,255,0.85); }
.site-info { border-top: 1px solid rgba(255,255,255,0.12); padding-block: 1.25rem; font-size: 0.85rem; }

/* ==========================================================================
   11. BREADCRUMBS
   ========================================================================== */
.tdg-breadcrumb-wrap { padding-top: 1.5rem; font-size: 0.85rem; color: var(--tdg-text-muted); }
.tdg-breadcrumbs a { color: var(--tdg-text-muted); }
.tdg-breadcrumbs a:hover { color: var(--tdg-accent); }

/* ==========================================================================
   12. SINGLE POST — meta row, TOC, content typography, tables
   ========================================================================== */
.tdg-single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.88rem;
	color: var(--tdg-text-muted);
	margin: 0.9rem 0 1.6rem;
}
.tdg-meta-sep { opacity: 0.5; }

.tdg-toc,
.toc {
	background: var(--tdg-surface);
	border: 1px solid var(--tdg-border);
	border-left: 4px solid var(--tdg-accent);
	border-radius: var(--tdg-radius-md);
	padding: 1.4rem 1.6rem;
	margin: 0 0 2.2rem;
}
.tdg-toc-title,
.toc h2 { font-family: var(--tdg-font-heading); font-weight: 700; color: var(--tdg-primary); margin: 0 0 0.6rem; border: none; padding-left: 0; font-size: 1.1rem; }
.tdg-toc ol { margin: 0; padding-left: 1.2rem; }
.tdg-toc li { margin-bottom: 0.35rem; }
.tdg-toc li.tdg-toc-sub { list-style: none; margin-left: 1rem; font-size: 0.93rem; }
.tdg-toc a, .toc a { color: var(--tdg-text); }
.tdg-toc a:hover, .toc a:hover { color: var(--tdg-accent); }
.toc ul { list-style: none; padding-left: 0; columns: 2; }
.toc li { margin-bottom: 6px; break-inside: avoid; }

.entry-content { font-size: 1.08rem; }
.entry-content h2 { margin-top: 2.4rem; font-size: 1.55rem; }
.entry-content h3 { margin-top: 1.9rem; font-size: 1.25rem; }
.entry-content blockquote {
	border-left: 4px solid var(--tdg-secondary);
	margin: 1.75rem 0;
	padding: 0.3rem 0 0.3rem 1.4rem;
	font-style: italic;
	color: var(--tdg-text-muted);
}

.entry-content figure.tdg-inline-image {
	margin: 1.8rem 0;
}
.entry-content figure.tdg-inline-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--tdg-radius-md);
}
.entry-content figure.tdg-inline-image figcaption {
	margin-top: 0.55rem;
	color: var(--tdg-text-muted);
	font-size: 0.86rem;
	line-height: 1.45;
}
.entry-content .tdg-ai-note {
	font-size: 0.8rem;
	opacity: 0.78;
}

/* Structured content blocks used by the bundled Kamado articles. */
.entry-content :is(.kurzantwort, .erkenntnisse, .empfehlung, .affiliate-box, .warn, .zutaten) {
	margin: 1.8rem 0;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--tdg-border);
	border-left: 5px solid var(--tdg-accent);
	border-radius: var(--tdg-radius-md);
	background: var(--tdg-surface);
}
.entry-content :is(.kurzantwort, .erkenntnisse, .empfehlung, .affiliate-box, .warn, .zutaten) > :first-child {
	margin-top: 0 !important;
}
.entry-content :is(.kurzantwort, .erkenntnisse, .empfehlung, .affiliate-box, .warn, .zutaten) > :last-child {
	margin-bottom: 0;
}
.entry-content .kurzantwort { background: rgba(179, 78, 16, 0.06); }
.entry-content .erkenntnisse { border-left-color: var(--tdg-success); background: rgba(61, 107, 79, 0.07); }
.entry-content .empfehlung { border-left-color: var(--tdg-secondary); background: rgba(138, 74, 31, 0.07); }
.entry-content .affiliate-box { border-style: dashed; border-left-style: solid; }
.entry-content .warn { border-left-color: var(--tdg-danger); background: rgba(163, 59, 47, 0.07); }
.entry-content .zutaten { border-left-color: var(--tdg-success); }

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.75rem 0;
	font-size: 0.96rem;
	overflow-x: auto;
	display: block;
}
@media (min-width: 700px) { .entry-content table { display: table; } }
.entry-content table th {
	background: var(--tdg-primary);
	color: #fff;
	text-align: left;
	padding: 0.75rem 1rem;
	font-family: var(--tdg-font-heading);
}
.entry-content table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--tdg-border); }
.entry-content table tr:nth-child(even) td { background: rgba(138, 74, 31, 0.05); }

/* Article hero header (used inside the imported <header> of each post) */
article > header.tdg-post-hero {
	background: var(--tdg-primary);
	color: #fff;
	padding: 2.4rem 2rem;
	margin-bottom: 2rem;
	border-radius: var(--tdg-radius-lg);
	border-bottom: 6px solid var(--tdg-accent);
}
article > header.tdg-post-hero h1 { color: #fff; margin: 6px 0 10px; }
article > header.tdg-post-hero .byline { color: rgba(255,255,255,0.7); font-family: var(--tdg-font-body); font-size: 14px; margin: 0; }

/* ==========================================================================
   13. SHORTCODE COMPONENTS — FAQ, Recipe card, Pros/Cons, Affiliate disclosure
   ========================================================================== */
.tdg-faq { margin: 2.2rem 0; }
.tdg-faq-item,
.faq-item { border-bottom: 1px solid var(--tdg-border); background: none; border-radius: 0; padding: 0; margin-bottom: 0; }
.tdg-faq-question {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	font-family: var(--tdg-font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--tdg-primary);
	padding: 1.1rem 2rem 1.1rem 0;
	cursor: pointer;
	position: relative;
}
.tdg-faq-question::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	color: var(--tdg-accent);
	transition: transform 0.2s ease;
}
.tdg-faq-item[data-open="true"] .tdg-faq-question::after { transform: translateY(-50%) rotate(45deg); }
.tdg-faq-answer { padding: 0 0 1.2rem; color: var(--tdg-text-muted); }
.tdg-js .tdg-faq-answer { display: none; }
.tdg-js .tdg-faq-item[data-open="true"] .tdg-faq-answer { display: block; }

/* Static (non-accordion) FAQ items from imported articles — always visible */
.faq-item h3 { font-family: var(--tdg-font-heading); font-weight: 700; font-size: 1.05rem; color: var(--tdg-primary); padding: 1.1rem 0 0.4rem; margin: 0; }
.faq-item p { padding-bottom: 1.1rem; color: var(--tdg-text-muted); margin: 0; }

.tdg-recipe-card {
	border: 1px solid var(--tdg-border);
	border-radius: var(--tdg-radius-lg);
	padding: 1.8rem;
	margin: 2rem 0;
	background: var(--tdg-surface);
}
.tdg-recipe-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0.5rem 0 1.4rem; padding: 1rem 0; border-top: 1px solid var(--tdg-border); border-bottom: 1px solid var(--tdg-border); }
.tdg-recipe-meta div { font-size: 0.85rem; color: var(--tdg-text-muted); }
.tdg-recipe-meta strong { display: block; color: var(--tdg-primary); font-family: var(--tdg-font-heading); font-size: 1.05rem; }
.tdg-recipe-columns { display: grid; gap: 1.8rem; }
@media (min-width: 700px) { .tdg-recipe-columns { grid-template-columns: 1fr 1.4fr; } }
.tdg-recipe-columns h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.tdg-recipe-columns ul, .tdg-recipe-columns ol { padding-left: 1.2rem; }
.tdg-recipe-columns li { margin-bottom: 0.5rem; }

.tdg-pros-cons { display: grid; gap: 1.2rem; margin: 1.8rem 0; }
@media (min-width: 600px) { .tdg-pros-cons { grid-template-columns: 1fr 1fr; } }
.tdg-pros, .tdg-cons { border-radius: var(--tdg-radius-md); padding: 1.3rem 1.4rem; }
.tdg-pros { background: rgba(61, 107, 79, 0.09); border: 1px solid rgba(61, 107, 79, 0.3); }
.tdg-cons { background: rgba(163, 59, 47, 0.07); border: 1px solid rgba(163, 59, 47, 0.25); }
.tdg-pros h4 { color: var(--tdg-success); margin-top: 0; }
.tdg-cons h4 { color: var(--tdg-danger); margin-top: 0; }
.tdg-pros ul, .tdg-cons ul { margin: 0; padding-left: 1.1rem; }

.tdg-affiliate-disclosure {
	background: rgba(138, 74, 31, 0.08);
	border: 1px dashed var(--tdg-secondary);
	border-radius: var(--tdg-radius-md);
	padding: 1rem 1.3rem;
	font-size: 0.88rem;
	color: var(--tdg-text-muted);
	margin: 1.8rem 0;
}

.tdg-methodology {
	background: var(--tdg-surface);
	border: 1px solid var(--tdg-border);
	border-left: 5px solid var(--tdg-success);
	border-radius: var(--tdg-radius-md);
	padding: 1.35rem 1.5rem;
	margin: 2.5rem 0;
}
.tdg-methodology h2 { font-size: 1.2rem; margin: 0 0 0.75rem; }
.tdg-methodology p { margin: 0.5rem 0; }
.tdg-methodology ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.tdg-methodology-date { color: var(--tdg-text-muted); font-size: 0.88rem; }

/* Callout box (used throughout imported articles) */
.tdg-callout,
.callout {
	background: var(--tdg-primary);
	color: #fff;
	padding: 22px 24px;
	border-radius: var(--tdg-radius-md);
	margin: 2rem 0;
}
.tdg-callout strong, .callout strong { color: var(--tdg-ember); }

.tdg-comparison-table-wrap { overflow-x: auto; margin: 1.8rem 0; }

/* Publication-review notes used by the Kamado article importer. */
.entry-content .tdg-editorial-note,
.entry-content .tdg-safety-note,
.entry-content .tdg-intent-note,
.entry-content .tdg-source-box {
	border: 1px solid var(--tdg-border);
	border-left: 5px solid var(--tdg-secondary);
	border-radius: var(--tdg-radius-md);
	background: var(--tdg-surface);
	padding: 1rem 1.2rem;
	margin: 1.5rem 0;
}
.entry-content .tdg-safety-note { border-left-color: var(--tdg-danger); background: rgba(163, 59, 47, 0.06); }
.entry-content .tdg-intent-note { border-left-color: var(--tdg-success); background: rgba(61, 107, 79, 0.06); }
.entry-content .tdg-source-box { margin-top: 2.75rem; }
.entry-content .tdg-source-box h2 { margin-top: 0; }
.entry-content .tdg-source-box ul { margin-bottom: 0.75rem; }
.entry-content .tdg-source-note,
.entry-content .tdg-ai-note { color: var(--tdg-text-muted); font-size: 0.86rem; }
.entry-content .tdg-fact-table { overflow-x: auto; margin-block: 2rem; }

/* ==========================================================================
   14. ROADMAP / STEP CARDS
   ========================================================================== */
.tdg-roadmap { display: grid; gap: 1.5rem; counter-reset: tdg-step; }
.tdg-roadmap-step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.3rem;
	align-items: start;
	background: var(--tdg-surface);
	border: 1px solid var(--tdg-border);
	border-radius: var(--tdg-radius-lg);
	padding: 1.6rem;
}
.tdg-roadmap-step .tdg-step-num {
	counter-increment: tdg-step;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tdg-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--tdg-font-heading);
	font-weight: 700;
}
.tdg-roadmap-step .tdg-step-num::before { content: counter(tdg-step); }
.tdg-roadmap-step h3 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.tdg-roadmap-step p { margin: 0; color: var(--tdg-text-muted); font-size: 0.96rem; }

/* ==========================================================================
   15. AUTHOR BOX & RELATED POSTS
   ========================================================================== */
.tdg-author-box {
	display: flex;
	gap: 1.3rem;
	align-items: flex-start;
	background: var(--tdg-surface);
	border: 1px solid var(--tdg-border);
	border-radius: var(--tdg-radius-lg);
	padding: 1.6rem;
	margin: 2.5rem 0;
}
.tdg-author-avatar { border-radius: 50%; flex-shrink: 0; }
.tdg-author-name { margin: 0 0 0.4rem; font-size: 1rem; }
.tdg-author-bio { color: var(--tdg-text-muted); font-size: 0.94rem; margin: 0 0 0.6rem; }
.tdg-link { font-weight: 700; font-size: 0.9rem; }

.tdg-related-posts { margin: 3rem 0; }
.tdg-section-title { font-size: 1.4rem; margin-bottom: 1.4rem; }

/* ==========================================================================
   16. SIDEBAR WIDGETS
   ========================================================================== */
.tdg-widget { background: var(--tdg-surface); border: 1px solid var(--tdg-border); border-radius: var(--tdg-radius-lg); padding: 1.5rem; margin-bottom: 1.75rem; }
.tdg-widget-title { font-size: 1.02rem; margin: 0 0 1rem; padding-bottom: 0.7rem; border-bottom: 2px solid var(--tdg-border); }
.tdg-popular-posts-list { list-style: none; margin: 0; padding: 0; }
.tdg-popular-posts-list li { display: flex; gap: 0.8rem; margin-bottom: 1rem; }
.tdg-popular-posts-list img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--tdg-radius-sm); flex-shrink: 0; }
.tdg-popular-posts-list a { font-size: 0.92rem; font-weight: 600; color: var(--tdg-primary); line-height: 1.4; }
.tdg-popular-posts-list a:hover { color: var(--tdg-accent); }

/* ==========================================================================
   17. CATEGORY INTRO HEADERS
   ========================================================================== */
.tdg-cat-hero {
	display: grid;
	gap: 2rem;
	align-items: center;
	padding-block: 3rem;
}
@media (min-width: 860px) { .tdg-cat-hero { grid-template-columns: 1.1fr 0.9fr; } }
.tdg-cat-hero-media { border-radius: var(--tdg-radius-lg); overflow: hidden; aspect-ratio: 5/4; box-shadow: var(--tdg-shadow-sm); }
.tdg-cat-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.tdg-cat-hero h1 { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); margin: 0 0 1rem; }
.tdg-cat-hero p { color: var(--tdg-text-muted); font-size: 1.08rem; }
.tdg-empty-topic {
	grid-column: 1 / -1;
	max-width: 760px;
	background: var(--tdg-surface);
	border: 1px solid var(--tdg-border);
	border-radius: var(--tdg-radius-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}
.tdg-empty-topic h2 { margin-top: 0; }
.tdg-empty-topic p { color: var(--tdg-text-muted); }

/* ==========================================================================
   18. RESPONSIVE: small screens
   ========================================================================== */
@media (max-width: 599px) {
	:root { --tdg-section-pad: 3.25rem; }
	.tdg-newsletter { padding: 2rem 1.5rem; }
	.tdg-author-box { flex-direction: column; }
	.tdg-topic-card { min-height: 210px; }
}