/* =============================================================
   jobspot Theme - Main Stylesheet
   ============================================================= */

/* -------------------------------------------------------------
   1. Design Tokens
   ------------------------------------------------------------- */
:root {
	--js-primary: #0B2545;
	--js-primary-700: #0a2040;
	--js-primary-50: #f3f6fb;
	--js-accent: #FCA311;
	--js-accent-700: #d98a05;

	--js-ink: #111827;
	--js-ink-soft: #374151;
	--js-muted: #6b7280;
	--js-muted-soft: #9ca3af;
	--js-line: #e5e7eb;
	--js-line-soft: #f3f4f6;
	--js-bg: #ffffff;
	--js-bg-soft: #f9fafb;
	--js-bg-tint: #f4f6fa;

	--js-radius: 12px;
	--js-radius-lg: 18px;
	--js-radius-pill: 999px;

	--js-shadow-sm: 0 1px 2px rgba(11, 37, 69, .04), 0 1px 1px rgba(11, 37, 69, .03);
	--js-shadow: 0 4px 18px rgba(11, 37, 69, .07), 0 2px 4px rgba(11, 37, 69, .04);
	--js-shadow-lg: 0 18px 40px rgba(11, 37, 69, .12), 0 8px 16px rgba(11, 37, 69, .05);

	--js-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--js-font-display: 'Plus Jakarta Sans', var(--js-font-sans);

	--js-container: 1240px;
	--js-gutter: clamp(16px, 4vw, 32px);

	/* Mobile-first type scale - groessere Defaults fuer bessere Lesbarkeit auf kleinen Screens */
	--js-step--1: clamp(.85rem, .8rem + .15vw, .9rem);
	--js-step-0: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
	--js-step-1: clamp(1.15rem, 1.05rem + .3vw, 1.25rem);
	--js-step-2: clamp(1.3rem, 1.18rem + .55vw, 1.55rem);
	--js-step-3: clamp(1.55rem, 1.4rem + .8vw, 1.95rem);
	--js-step-4: clamp(1.85rem, 1.55rem + 1.4vw, 2.5rem);
	--js-step-5: clamp(2.1rem, 1.7rem + 2vw, 3.1rem);
	--js-step-6: clamp(2.3rem, 1.85rem + 2.4vw, 3.8rem);

	--js-cat-color: var(--js-primary);
}

/* -------------------------------------------------------------
   2. Reset / Base
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--js-font-sans);
	font-size: var(--js-step-0);
	line-height: 1.7;
	color: var(--js-ink);
	background: var(--js-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

/* Links sind standardmaessig unterstrichen, Akzentfarbe als Unterstreichung. UI-Elemente entfernen
   die Unterstreichung explizit (Klassen siehe weiter unten). */
a {
	color: var(--js-primary);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--js-accent) 55%, transparent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover {
	color: var(--js-accent-700);
	text-decoration-color: var(--js-accent);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--js-font-display);
	font-weight: 700;
	line-height: 1.18;
	color: var(--js-ink);
	margin: 0 0 .5em;
	letter-spacing: -.01em;
}
h1 { font-size: var(--js-step-5); letter-spacing: -.02em; }
h2 { font-size: var(--js-step-4); letter-spacing: -.015em; }
h3 { font-size: var(--js-step-3); }
h4 { font-size: var(--js-step-2); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
hr { border: 0; border-top: 1px solid var(--js-line); margin: 2em 0; }
blockquote {
	margin: 1.8em 0;
	padding: 1.2em 1.5em;
	border-left: 4px solid var(--js-accent);
	background: var(--js-bg-soft);
	border-radius: 0 var(--js-radius) var(--js-radius) 0;
	font-family: var(--js-font-display);
	font-size: var(--js-step-2);
	color: var(--js-ink-soft);
	font-style: italic;
}
code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: .92em; }
pre { background: var(--js-primary); color: #f4f6fa; padding: 1.2em 1.4em; border-radius: var(--js-radius); overflow-x: auto; }
code { background: var(--js-bg-soft); padding: .15em .4em; border-radius: 4px; }
pre code { background: transparent; padding: 0; }

::selection { background: var(--js-accent); color: var(--js-primary); }

/* UI-Elemente entfernen die Default-Unterstreichung. Inhaltslinks bleiben unterstrichen. */
.skip-link,
.cat-badge,
.btn,
.site-title a,
.primary-menu a,
.menu-toggle,
.search-toggle,
.back-to-top,
.share-link,
.page-numbers,
.post-card a,
.hero__main-media,
.hero__main-body .hero__title a,
.hero__side-media,
.hero__side-title a,
.recent-posts-list__thumb,
.recent-posts-list__title,
.category-list a,
.entry-tags a {
	text-decoration: none;
}
/* Titel-Links in Cards/Hero zeigen Unterstreichung beim Hover als Affordance */
.post-card__title a:hover,
.hero__title a:hover,
.hero__side-title a:hover,
.recent-posts-list__title:hover {
	text-decoration: underline;
	text-decoration-color: var(--js-accent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #fff; clip: auto !important; -webkit-clip-path: none; clip-path: none;
	color: var(--js-primary); display: block; font-size: 14px; font-weight: 700;
	height: auto; left: 12px; top: 12px; padding: 12px 16px; text-decoration: none; width: auto; z-index: 100000; border-radius: var(--js-radius);
}

.skip-link {
	position: absolute; top: -100px; left: 0; background: var(--js-primary); color: #fff;
	padding: 12px 18px; z-index: 100001; border-radius: 0 0 var(--js-radius) 0;
}
.skip-link:focus { top: 0; }

.container {
	width: 100%;
	max-width: var(--js-container);
	margin: 0 auto;
	padding-left: var(--js-gutter);
	padding-right: var(--js-gutter);
}

.layout-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	padding-top: 24px;
	padding-bottom: 48px;
}
@media (min-width: 720px) {
	.layout-with-sidebar { padding-top: 32px; padding-bottom: 56px; gap: 48px; }
}
@media (min-width: 1024px) {
	.layout-with-sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; padding-top: 40px; padding-bottom: 64px; }
}

/* -------------------------------------------------------------
   3. Header / Navigation
   ------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled {
	border-bottom-color: var(--js-line);
	box-shadow: var(--js-shadow-sm);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 72px;
}
.site-branding { flex: 0 0 auto; display: flex; align-items: center; }
.site-branding .custom-logo-link img { max-height: 44px; width: auto; }

.site-title {
	margin: 0;
	font-family: var(--js-font-display);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1;
}
@media (min-width: 720px) { .site-title { font-size: 1.55rem; } }
.site-title a {
	color: var(--js-primary);
	display: inline-flex;
	align-items: baseline;
}
.site-title-mark {
	background: var(--js-primary);
	color: #fff;
	padding: 4px 8px;
	margin-right: 2px;
	border-radius: 6px;
	font-weight: 800;
}
.site-title-dot { color: var(--js-accent); }
.site-description {
	display: none;
}

/* Header layout - Mobile-first */
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	flex-wrap: wrap;
}
.site-header__tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.search-toggle, .menu-toggle {
	background: transparent;
	border: 1px solid transparent;
	color: var(--js-ink);
	width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.search-toggle:hover, .menu-toggle:hover { background: var(--js-bg-soft); color: var(--js-primary); }

.menu-toggle { display: inline-flex; flex-direction: column; gap: 4px; order: 3; }
.menu-toggle__bar { display: block; width: 20px; height: 2px; background: var(--js-ink); border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle.is-active .menu-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-active .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .menu-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Primary nav - Mobile drawer */
.main-navigation {
	order: 4;
	flex: 1 0 100%;
}
.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	flex-direction: column;
	gap: 0;
	width: 100%;
	padding: 8px 0 16px;
	border-top: 1px solid var(--js-line);
	margin-top: 8px;
}
.main-navigation.is-open .primary-menu { display: flex; }
.primary-menu > li { position: relative; width: 100%; }
.primary-menu a {
	display: flex;
	width: 100%;
	padding: 14px 6px;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--js-ink);
	border-radius: 6px;
	transition: background .15s ease, color .15s ease;
}
.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a,
.primary-menu .current-cat > a {
	background: var(--js-primary-50);
	color: var(--js-primary);
}
.primary-menu .sub-menu {
	list-style: none;
	padding: 0 0 0 16px;
	margin: 0;
}
.primary-menu .sub-menu a { padding: 10px 8px; font-size: .98rem; }

/* Desktop nav (Tablet ab) */
@media (min-width: 900px) {
	.site-header__inner { min-height: 72px; gap: 32px; flex-wrap: nowrap; }
	.site-header__tools { margin-left: 0; }
	.menu-toggle { display: none; }
	.main-navigation { order: 0; flex: 1 1 auto; display: flex; justify-content: center; }
	.primary-menu {
		display: flex;
		flex-direction: row;
		gap: 4px;
		width: auto;
		padding: 0;
		border-top: 0;
		margin-top: 0;
		flex-wrap: wrap;
	}
	.primary-menu > li { width: auto; }
	.primary-menu a {
		display: inline-flex;
		width: auto;
		padding: 10px 14px;
		font-size: .95rem;
		border-radius: 8px;
	}
	.primary-menu .sub-menu {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		min-width: 220px;
		background: #fff;
		border: 1px solid var(--js-line);
		border-radius: var(--js-radius);
		box-shadow: var(--js-shadow-lg);
		padding: 8px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
		z-index: 30;
	}
	.primary-menu li:hover > .sub-menu,
	.primary-menu li:focus-within > .sub-menu {
		opacity: 1; visibility: visible; transform: translateY(0);
	}
	.primary-menu .sub-menu a { padding: 8px 12px; }
}

.site-header__search {
	border-top: 1px solid var(--js-line);
	background: #fff;
	padding: 16px 0;
}
.site-header__search .search-form {
	max-width: 640px;
	margin: 0 auto;
}

.search-form {
	display: flex;
	align-items: stretch;
	gap: 0;
	background: var(--js-bg-soft);
	border: 1px solid var(--js-line);
	border-radius: var(--js-radius-pill);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.search-form:focus-within {
	border-color: var(--js-primary);
	box-shadow: 0 0 0 4px rgba(11, 37, 69, .08);
}
.search-form .search-field {
	flex: 1 1 auto;
	border: 0;
	background: transparent;
	padding: 12px 20px;
	font: inherit;
	color: var(--js-ink);
	outline: none;
}
.search-form .search-submit {
	border: 0;
	background: var(--js-primary);
	color: #fff;
	padding: 0 22px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	transition: background .15s ease;
}
.search-form .search-submit:hover { background: var(--js-primary-700); }

/* Reading progress */
.reading-progress {
	height: 3px;
	background: transparent;
	position: relative;
	overflow: hidden;
}
.reading-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--js-primary), var(--js-accent));
	transition: width .1s ease-out;
}
body:not(.single) .reading-progress { display: none; }

/* -------------------------------------------------------------
   4. Category badge
   ------------------------------------------------------------- */
.cat-badge {
	--cat-color: var(--js-primary);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cat-color);
	background: color-mix(in srgb, var(--cat-color) 12%, transparent);
	border-radius: var(--js-radius-pill);
	transition: background .15s ease, color .15s ease;
}
.cat-badge:hover {
	background: var(--cat-color);
	color: #fff;
}

/* -------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------- */
.hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-bottom: 48px;
}
@media (min-width: 900px) {
	.hero { grid-template-columns: 2fr 1fr; gap: 32px; margin-bottom: 56px; }
}
.hero__main {
	position: relative;
	background: #fff;
	border-radius: var(--js-radius-lg);
	overflow: hidden;
	box-shadow: var(--js-shadow);
	display: flex;
	flex-direction: column;
}
.hero__main-media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--js-bg-tint);
	overflow: hidden;
	position: relative;
}
@media (min-width: 640px) { .hero__main-media { aspect-ratio: 16 / 10; } }
@media (min-width: 900px) { .hero__main-media { aspect-ratio: 16 / 9; } }
.hero__main-media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(11, 37, 69, .35) 0%, rgba(11, 37, 69, 0) 45%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.hero__main:hover .hero__main-media::after { opacity: 1; }
.hero__main-media .hero__img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .6s ease;
}
.hero__main:hover .hero__main-media .hero__img { transform: scale(1.04); }
/* Universeller Bild-Platzhalter (wird verwendet, wenn weder Featured noch Inline-Bild gefunden wurden) */
.post-fallback {
	--cat-color: var(--js-primary);
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: #fff;
	background:
		radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(255,255,255,.08), transparent 40%),
		linear-gradient(135deg, var(--cat-color), color-mix(in srgb, var(--cat-color) 65%, #000 35%));
	overflow: hidden;
}
.post-fallback::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%),
		linear-gradient(-45deg, rgba(255,255,255,.05) 25%, transparent 25%);
	background-size: 24px 24px;
	opacity: .4;
}
.post-fallback__letter {
	position: relative;
	font-family: var(--js-font-display);
	font-weight: 800;
	font-size: clamp(2.4rem, 7vw, 4.5rem);
	line-height: 1;
	letter-spacing: -.04em;
	color: rgba(255,255,255,.95);
	text-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.post-fallback__label {
	position: relative;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.16);
	color: #fff;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
/* Kleinere Varianten des Platzhalters */
.hero__side-img.post-fallback .post-fallback__letter,
.recent-posts-list__thumb-img.post-fallback .post-fallback__letter {
	font-size: 1.8rem;
}
.recent-posts-list__thumb-img.post-fallback .post-fallback__label,
.hero__side-img.post-fallback .post-fallback__label { display: none; }
.hero__main-body {
	padding: 24px clamp(20px, 3vw, 32px) 28px;
	display: flex; flex-direction: column; gap: 12px;
}

/* Hero-Main OHNE Bild: editoriales Layout mit Akzent-Balken */
.hero__main--no-media {
	background: linear-gradient(135deg, #fff 0%, var(--js-bg-soft) 100%);
	border-left: 6px solid var(--js-accent);
	position: relative;
	overflow: hidden;
}
.hero__main--no-media::before {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(252, 163, 17, .1), transparent 70%);
	pointer-events: none;
}
.hero__main--no-media::after {
	content: '';
	position: absolute;
	bottom: -80px;
	left: 30%;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(11, 37, 69, .06), transparent 70%);
	pointer-events: none;
}
.hero__main--no-media .hero__main-body {
	padding: 40px clamp(24px, 4vw, 40px) 36px;
	gap: 16px;
	position: relative;
}
.hero__main--no-media .hero__title { font-size: var(--js-step-5); }
.hero__title {
	font-size: var(--js-step-4);
	margin: 0;
	line-height: 1.15;
}
.hero__title a { color: var(--js-ink); transition: color .15s ease; }
.hero__title a:hover { color: var(--js-primary); }
.hero__excerpt { color: var(--js-muted); margin: 0; }
.hero__meta { color: var(--js-muted-soft); font-size: .85rem; display: flex; gap: 8px; align-items: center; }

.hero__side {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}
.hero__side-item {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--js-line);
	border-radius: var(--js-radius);
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hero__side-item:hover { transform: translateY(-2px); box-shadow: var(--js-shadow); border-color: transparent; }

/* Bildbereich nur wenn Bild da ist */
.hero__side-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--js-bg-tint);
	position: relative;
}
.hero__side-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hero__side-item:hover img.hero__side-img { transform: scale(1.05); }

.hero__side-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px;
	min-width: 0;
}
.hero__side-title {
	font-family: var(--js-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	letter-spacing: -.005em;
}
.hero__side-title a { color: var(--js-ink); }
.hero__side-title a:hover { color: var(--js-primary); }
.hero__side-meta { font-size: .8rem; color: var(--js-muted-soft); }

/* Wenn KEIN Bild da ist: groesseres Padding, akzentuierter Hintergrund, Akzent-Border */
.hero__side-item.no-media {
	background: linear-gradient(135deg, #fff 0%, var(--js-bg-soft) 100%);
	border-left: 4px solid var(--js-accent);
}
.hero__side-item.no-media .hero__side-body { padding: 20px 22px; gap: 10px; }
.hero__side-item.no-media .hero__side-title { font-size: 1.1rem; }

/* -------------------------------------------------------------
   6. Post grid / cards
   ------------------------------------------------------------- */
.post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}
@media (min-width: 640px) {
	.post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
	.post-grid { grid-template-columns: repeat(2, 1fr); }
}

.post-card {
	background: #fff;
	border-radius: var(--js-radius-lg);
	overflow: hidden;
	border: 1px solid var(--js-line);
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--js-shadow-lg); border-color: transparent; }
.post-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--js-bg-tint);
	position: relative;
}
@media (min-width: 640px) { .post-card__media { aspect-ratio: 16 / 10; } }
.post-card__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(11, 37, 69, .25) 0%, rgba(11, 37, 69, 0) 50%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.post-card:hover .post-card__media::after { opacity: 1; }
.post-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .post-card__img { transform: scale(1.05); }
.post-card__body {
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
}
.post-card__title {
	font-size: var(--js-step-2);
	margin: 0;
	line-height: 1.25;
}
.post-card__title a { color: var(--js-ink); }
.post-card__title a:hover { color: var(--js-primary); }
.post-card__excerpt { color: var(--js-muted); margin: 0; font-size: .95rem; line-height: 1.55; }
.post-card__meta { font-size: .8rem; color: var(--js-muted-soft); margin-top: auto; padding-top: 8px; display: flex; gap: 8px; align-items: center; }
.meta-sep { color: var(--js-muted-soft); }

/* Post-Card OHNE Bild: hochwertiges editoriales Text-Layout */
.post-card.no-media {
	background: linear-gradient(135deg, #fff 0%, var(--js-bg-soft) 100%);
	border-left: 5px solid var(--js-accent);
	position: relative;
	overflow: hidden;
}
.post-card.no-media::before {
	content: '';
	position: absolute;
	top: -40px;
	right: -40px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(252, 163, 17, .08), transparent 70%);
	pointer-events: none;
}
.post-card.no-media .post-card__body {
	padding: 28px 28px 26px;
	gap: 14px;
}
.post-card.no-media .post-card__title {
	font-size: var(--js-step-3);
	line-height: 1.2;
}
.post-card.no-media .post-card__excerpt {
	font-size: 1rem;
	color: var(--js-ink-soft);
	-webkit-line-clamp: 4;
	line-clamp: 4;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-grid--compact .post-card__title { font-size: 1.1rem; }
.post-grid--compact .post-card__excerpt { display: none; }

/* -------------------------------------------------------------
   7. Single article
   ------------------------------------------------------------- */
.single-article { max-width: 760px; }
.single-entry-header { margin-bottom: 32px; }
.single-entry-header .cat-badge { margin-bottom: 16px; }
.single-entry-header .entry-title {
	font-size: var(--js-step-6);
	margin: 0 0 16px;
	line-height: 1.1;
}
.entry-lede {
	font-size: var(--js-step-2);
	color: var(--js-muted);
	line-height: 1.5;
	margin: 0 0 20px;
	font-family: var(--js-font-display);
	font-weight: 500;
}
.entry-meta {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
	font-size: .9rem; color: var(--js-muted);
	padding: 16px 0;
	border-top: 1px solid var(--js-line);
	border-bottom: 1px solid var(--js-line);
}
.entry-author { font-weight: 600; color: var(--js-ink-soft); }

.entry-featured {
	margin: 0 calc(-1 * var(--js-gutter)) 40px;
	background: var(--js-bg-tint);
	overflow: hidden;
	position: relative;
}
@media (min-width: 720px) {
	.entry-featured {
		margin: 0 0 48px;
		border-radius: var(--js-radius-lg);
		box-shadow: var(--js-shadow);
	}
}
.entry-featured__img { width: 100%; height: auto; display: block; }
.entry-featured__caption {
	font-size: .9rem;
	color: var(--js-muted);
	padding: 12px 16px;
	font-style: italic;
	border-top: 1px solid var(--js-line-soft);
	background: var(--js-bg);
}

.entry-content {
	font-size: 1.1rem;
	line-height: 1.78;
	color: var(--js-ink-soft);
}
@media (min-width: 720px) { .entry-content { font-size: 1.15rem; } }
.entry-content > * + * { margin-top: 1.3em; }
.entry-content p { max-width: 68ch; }
.entry-content h2 {
	font-size: var(--js-step-3);
	margin-top: 2em;
	color: var(--js-ink);
	letter-spacing: -.01em;
}
.entry-content h3 { font-size: var(--js-step-2); margin-top: 1.7em; color: var(--js-ink); }
.entry-content h4 { font-size: var(--js-step-1); margin-top: 1.5em; color: var(--js-ink); }
/* Inhaltslinks sind explizit und deutlich unterstrichen */
.entry-content a {
	color: var(--js-primary);
	text-decoration: underline;
	text-decoration-color: var(--js-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	font-weight: 500;
}
.entry-content a:hover {
	color: var(--js-accent-700);
	text-decoration-thickness: 2.5px;
}
.entry-content img {
	border-radius: var(--js-radius);
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}
.entry-content figure { margin: 1.5em 0; }
.entry-content figure img { margin: 0; }
.entry-content figcaption {
	font-size: .9rem;
	color: var(--js-muted);
	text-align: center;
	margin-top: 8px;
	font-style: italic;
}
.entry-content ul, .entry-content ol { padding-left: 1.4em; max-width: 64ch; }
.entry-content li { margin-bottom: .5em; line-height: 1.7; }
.entry-content li > p { margin: 0; }
.entry-content .alignwide { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.entry-content .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
@media (min-width: 1024px) {
	.entry-content .alignwide { margin-left: -80px; margin-right: -80px; max-width: calc(100% + 160px); }
	.entry-content .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
}

.entry-footer {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--js-line);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.entry-tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.entry-tags li {
	font-size: .8rem;
}
.entry-tags a {
	display: inline-block;
	padding: 4px 10px;
	background: var(--js-bg-soft);
	border-radius: var(--js-radius-pill);
	color: var(--js-ink-soft);
}
.entry-tags a:hover { background: var(--js-primary); color: #fff; }

.entry-footer__share { display: flex; align-items: center; gap: 8px; }
.share-label { font-size: .82rem; color: var(--js-muted); font-weight: 600; margin-right: 4px; }
.share-link {
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--js-bg-soft);
	color: var(--js-ink-soft);
	border-radius: 50%;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.share-link:hover { background: var(--js-primary); color: #fff; transform: translateY(-2px); }

/* Related */
.related-posts {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--js-line);
}
.section-title {
	font-size: var(--js-step-2);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.section-title::before {
	content: '';
	flex: 0 0 8px;
	height: 22px;
	background: var(--js-accent);
	border-radius: 2px;
}

/* -------------------------------------------------------------
   8. Page header / archive
   ------------------------------------------------------------- */
.page-header, .archive-header {
	padding: 0 0 32px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--js-line);
}
.archive-kicker {
	--cat-color: var(--js-primary);
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cat-color);
	margin-bottom: 8px;
}
.archive-title, .page-title {
	font-size: var(--js-step-5);
	margin: 0 0 8px;
}
.archive-description {
	color: var(--js-muted);
	font-size: 1.05rem;
	max-width: 60ch;
}
.archive-description p { margin: 0; }

/* -------------------------------------------------------------
   9. Sidebar / Widgets
   ------------------------------------------------------------- */
.widget-area {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
@media (min-width: 1024px) {
	.widget-area {
		position: sticky;
		top: 96px;
		align-self: start;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		padding-right: 4px;
	}
	.widget-area::-webkit-scrollbar { width: 6px; }
	.widget-area::-webkit-scrollbar-thumb { background: var(--js-line); border-radius: 3px; }
}

.widget {
	background: #fff;
	border: 1px solid var(--js-line);
	border-radius: var(--js-radius-lg);
	padding: 20px 22px;
}
.widget-title {
	font-size: 1rem;
	font-family: var(--js-font-display);
	font-weight: 700;
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.widget-title::before {
	content: '';
	flex: 0 0 6px;
	height: 16px;
	background: var(--js-accent);
	border-radius: 2px;
}
.widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.widget ul li {
	padding: 8px 0;
	border-bottom: 1px solid var(--js-line-soft);
}
.widget ul li:last-child { border-bottom: 0; }
.widget ul li a { color: var(--js-ink-soft); font-weight: 500; }
.widget ul li a:hover { color: var(--js-primary); }

.recent-posts-list { display: flex; flex-direction: column; gap: 6px; }
.recent-posts-list__item {
	display: flex !important;
	gap: 12px;
	align-items: center;
	padding: 10px 0 !important;
}
.recent-posts-list__thumb {
	display: block;
	flex: 0 0 64px;
	width: 64px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
	background: var(--js-bg-tint);
	position: relative;
}
.recent-posts-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-posts-list__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.recent-posts-list__title {
	font-family: var(--js-font-display);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.35;
	color: var(--js-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.recent-posts-list__date { font-size: .75rem; color: var(--js-muted-soft); }

/* Ohne Bild: kleiner Akzent-Balken links statt Bild */
.recent-posts-list__item.no-media {
	padding-left: 12px !important;
	border-left: 3px solid var(--js-accent);
}

.category-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	font-weight: 500;
}
.cat-dot {
	--cat-color: var(--js-primary);
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--cat-color);
	flex: 0 0 10px;
}
.category-list a {
	--cat-color: var(--js-primary);
}
.category-list .cat-dot { background: var(--cat-color); }
.cat-count {
	margin-left: auto;
	font-size: .75rem;
	color: var(--js-muted-soft);
	background: var(--js-bg-soft);
	padding: 2px 8px;
	border-radius: var(--js-radius-pill);
}

/* -------------------------------------------------------------
   10. Footer
   ------------------------------------------------------------- */
.site-footer {
	margin-top: 56px;
	background: var(--js-primary);
	color: #c7d5e8;
	padding: 56px 0 28px;
}
.site-footer a { color: #e8eef7; }
.site-footer a:hover { color: var(--js-accent); }
.site-footer__widgets {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
	margin-bottom: 40px;
}
@media (min-width: 720px) {
	.site-footer__widgets { grid-template-columns: repeat(3, 1fr); }
}
.site-footer .widget {
	background: transparent;
	border: 0;
	padding: 0;
}
.site-footer .widget-title { color: #fff; }
.site-footer .widget-title::before { background: var(--js-accent); }
.site-footer .widget ul li {
	border-bottom-color: rgba(255, 255, 255, .08);
}
.site-footer .widget ul li a { color: #c7d5e8; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .9rem;
}
.site-footer__brand {
	display: flex;
	gap: 12px;
	align-items: baseline;
}
.footer-logo strong { color: #fff; font-family: var(--js-font-display); font-size: 1.1rem; font-weight: 800; }
.footer-tagline { color: #9eb1cc; }
.footer-menu {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; gap: 20px; flex-wrap: wrap;
}
.footer-menu a {
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .35);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
.footer-menu a:hover {
	color: var(--js-accent);
	text-decoration-color: var(--js-accent);
}

/* -------------------------------------------------------------
   11. Pagination
   ------------------------------------------------------------- */
.navigation.pagination, .pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
}
.nav-links {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 10px;
	font-weight: 600;
	color: var(--js-ink-soft);
	background: var(--js-bg-soft);
	transition: background .15s ease, color .15s ease;
}
.page-numbers:hover { background: var(--js-primary-50); color: var(--js-primary); }
.page-numbers.current { background: var(--js-primary); color: #fff; }
.page-numbers.dots { background: transparent; }

/* -------------------------------------------------------------
   12. Buttons / utilities
   ------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--js-radius-pill);
	font-weight: 600;
	font-size: .95rem;
	border: 0;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, color .15s ease;
	text-decoration: none;
}
.btn--primary { background: var(--js-primary); color: #fff; }
.btn--primary:hover { background: var(--js-primary-700); color: #fff; transform: translateY(-1px); }
.btn--accent { background: var(--js-accent); color: var(--js-primary); }
.btn--accent:hover { background: var(--js-accent-700); transform: translateY(-1px); }

/* -------------------------------------------------------------
   13. 404 / Empty states
   ------------------------------------------------------------- */
.error-404 {
	text-align: center;
	padding: 80px 0;
	max-width: 720px;
	margin: 0 auto;
}
.error-404__code {
	font-family: var(--js-font-display);
	font-weight: 800;
	font-size: clamp(5rem, 12vw, 9rem);
	background: linear-gradient(135deg, var(--js-primary), var(--js-accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
	letter-spacing: -.03em;
	margin-bottom: 8px;
}
.error-404__title { margin: 0 0 12px; }
.error-404__text { color: var(--js-muted); font-size: 1.1rem; }
.error-404__search { max-width: 460px; margin: 24px auto; }

.no-results {
	padding: 40px 0;
	text-align: center;
}
.no-results__title { margin-bottom: 8px; }
.no-results__text { color: var(--js-muted); margin-bottom: 20px; }

/* -------------------------------------------------------------
   14. Back-to-top
   ------------------------------------------------------------- */
.back-to-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--js-primary);
	color: #fff;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--js-shadow-lg);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, background .15s ease;
	z-index: 40;
	transform: translateY(10px);
}
.back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.back-to-top:hover { background: var(--js-primary-700); }

/* -------------------------------------------------------------
   15. Kleinere Mobile-Anpassungen (Mobile-first - hier nur Details)
   ------------------------------------------------------------- */
/* Mobile-first heisst: Default ist mobile, kein extra Block noetig. */

/* -------------------------------------------------------------
   16. Print
   ------------------------------------------------------------- */
@media print {
	.site-header, .site-footer, .widget-area, .entry-footer__share, .back-to-top, .reading-progress { display: none !important; }
	body { color: #000; background: #fff; }
	a { color: #000; text-decoration: underline; }
}