/*
Theme Name: StackLog
Theme URI: https://stacklog.net
Description: Custom design system for StackLog — Notes from the stack. Cloud, M365 & Networking. Child theme of Kadence.
Author: StackLog
Template: kadence
Version: 1.2.0
Text Domain: stacklog
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	--sl-bg: #f5f7fb;
	--sl-bg-elevated: #ffffff;
	--sl-bg-soft: #eef1f7;
	--sl-text: #0f172a;
	--sl-text-muted: #56617a;
	--sl-text-faint: #8892a6;
	--sl-border: #e3e7f0;
	--sl-accent: #2563eb;
	--sl-accent-2: #06b6d4;
	--sl-accent-rgb: 37, 99, 235;
	--sl-on-accent: #ffffff;
	--sl-code-bg: #0f1117;
	--sl-code-text: #d9e0ee;
	--sl-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--sl-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 34px -14px rgba(15, 23, 42, .18);
	--sl-shadow-lg: 0 20px 60px -20px rgba(15, 23, 42, .28);
	--sl-radius-lg: 20px;
	--sl-radius: 14px;
	--sl-radius-sm: 9px;

	--sl-cat-cloud: #2563eb;
	--sl-cat-netzwerk: #7c3aed;
	--sl-cat-security: #e11d48;
	--sl-cat-tipps: #16a34a;
	--sl-cat-default: #475569;

	--sl-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html[data-theme="dark"] {
	--sl-bg: #080a10;
	--sl-bg-elevated: #10141d;
	--sl-bg-soft: #141a25;
	--sl-text: #e7ecf6;
	--sl-text-muted: #93a0ba;
	--sl-text-faint: #5c6884;
	--sl-border: #212a3a;
	--sl-accent: #5b9dff;
	--sl-accent-2: #22d3ee;
	--sl-accent-rgb: 91, 157, 255;
	--sl-on-accent: #061024;
	--sl-code-bg: #0a0d14;
	--sl-code-text: #d6deeb;
	--sl-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--sl-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px -16px rgba(0, 0, 0, .75);
	--sl-shadow-lg: 0 24px 70px -20px rgba(0, 0, 0, .8);

	--sl-cat-cloud: #5b9dff;
	--sl-cat-netzwerk: #a78bfa;
	--sl-cat-security: #fb7185;
	--sl-cat-tipps: #4ade80;
	--sl-cat-default: #93a0ba;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]):not([data-theme="dark"]) {
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
	background: var(--sl-bg) !important;
	color: var(--sl-text) !important;
	font-family: var(--sl-font-body);
	transition: background-color .25s ease, color .25s ease;
}

body, input, select, optgroup, textarea { font-family: var(--sl-font-body); }

h1, h2, h3, h4, h5, h6 { color: var(--sl-text) !important; letter-spacing: -0.01em; }

a { color: var(--sl-accent); }

::selection { background: rgba(var(--sl-accent-rgb), .25); }

/* ==========================================================================
   2. Header
   ========================================================================== */

#masthead {
	background: rgba(var(--sl-accent-rgb), 0) !important;
	background-color: color-mix(in srgb, var(--sl-bg-elevated) 88%, transparent) !important;
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid var(--sl-border);
	position: sticky;
	top: 0;
	z-index: 999;
	transition: background-color .25s ease, border-color .25s ease;
}

#masthead .site-main-header-wrap .site-header-row-container-inner,
#masthead .site-top-header-wrap .site-header-row-container-inner,
#masthead .site-bottom-header-wrap .site-header-row-container-inner {
	background: transparent !important;
}

.site-branding .brand { display: inline-flex; align-items: baseline; gap: 2px; }

.site-branding .site-title,
.site-branding .site-title-wrap {
	font-family: var(--sl-font-mono) !important;
	font-weight: 700 !important;
	color: var(--sl-text) !important;
	letter-spacing: -0.02em;
}

.site-branding .site-title::after {
	content: "";
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--sl-text-muted) !important;
	position: relative;
	transition: color .18s ease;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a::after {
	content: "";
	position: absolute;
	left: .6em;
	right: .6em;
	bottom: .35em;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--sl-accent), var(--sl-accent-2));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
	color: var(--sl-text) !important;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover::after,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a::after {
	transform: scaleX(1);
}

.main-navigation .lang-item > a { font-family: var(--sl-font-mono); font-size: 12.5px !important; }

/* Theme toggle switch — fixed floating button, bottom-right */
.sl-toggle {
	appearance: none;
	border: 0;
	background: var(--sl-bg-elevated);
	cursor: pointer;
	padding: 5px;
	display: inline-flex;
	align-items: center;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1001;
	border-radius: 999px;
	border: 1px solid var(--sl-border);
	box-shadow: var(--sl-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}

.sl-toggle:hover { transform: translateY(-2px); box-shadow: var(--sl-shadow-lg); }

.sl-toggle-track {
	width: 46px;
	height: 26px;
	border-radius: 999px;
	background: var(--sl-bg-soft);
	border: 1px solid var(--sl-border);
	position: relative;
	display: inline-block;
	transition: background-color .2s ease;
}

.sl-toggle-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--sl-bg-elevated);
	border: 1px solid var(--sl-border);
	box-shadow: var(--sl-shadow-sm);
	transition: transform .25s cubic-bezier(.4, 0, .2, 1), background-color .2s ease;
}

html[data-theme="dark"] .sl-toggle-thumb { transform: translateX(20px); }

@media (max-width: 767px) {
	.sl-toggle { right: 14px; bottom: 14px; }
}

.sl-toggle-thumb .sl-icon {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 13px;
	height: 13px;
	transition: opacity .25s ease, transform .35s cubic-bezier(.4, 0, .2, 1), color .2s ease;
}

.sl-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); color: #d97706; }
.sl-icon-moon { opacity: 0; transform: rotate(-90deg) scale(.4); color: var(--sl-text-muted); }

html[data-theme="dark"] .sl-icon-sun { opacity: 0; transform: rotate(90deg) scale(.4); }
html[data-theme="dark"] .sl-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); color: #c2c9d6; }

/* ==========================================================================
   3. Hero (blog home)
   ========================================================================== */

.sl-hero {
	position: relative;
	overflow: hidden;
	padding: 4.5rem 1.5rem 3rem;
	margin-bottom: 1rem;
	text-align: center;
	background: var(--sl-bg);
}

.sl-hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--sl-text) 6%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--sl-text) 6%, transparent) 1px, transparent 1px);
	background-size: 42px 42px;
	mask-image: radial-gradient(ellipse 60% 100% at 50% 0%, black 40%, transparent 90%);
	-webkit-mask-image: radial-gradient(ellipse 60% 100% at 50% 0%, black 40%, transparent 90%);
}

.sl-hero-glow {
	position: absolute;
	top: -180px;
	left: 50%;
	transform: translateX(-50%);
	width: 640px;
	height: 420px;
	background: radial-gradient(ellipse at center, rgba(var(--sl-accent-rgb), .35), transparent 70%);
	filter: blur(10px);
	pointer-events: none;
}

.sl-hero-inner { position: relative; max-width: 760px; margin: 0 auto; }

.sl-hero-kicker {
	font-family: var(--sl-font-mono);
	font-size: 13px;
	color: var(--sl-accent-2);
	background: var(--sl-bg-soft);
	border: 1px solid var(--sl-border);
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .45em .9em;
	border-radius: 999px;
	margin: 0 0 1.4rem;
}

.sl-prompt { color: var(--sl-accent); font-weight: 700; }

.sl-cursor { animation: sl-blink 1.1s steps(1) infinite; color: var(--sl-accent-2); }

@keyframes sl-blink { 50% { opacity: 0; } }

.sl-hero-title {
	font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
	line-height: 1.08 !important;
	margin: 0 0 .8rem !important;
	font-weight: 800 !important;
}

.sl-accent-text {
	background: linear-gradient(90deg, var(--sl-accent), var(--sl-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.sl-hero-sub {
	font-size: 1.08rem;
	color: var(--sl-text-muted);
	max-width: 46ch;
	margin: 0 auto 2rem;
}

.sl-hero-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
}

.sl-filter-pill {
	font-family: var(--sl-font-mono);
	font-size: 13px;
	font-weight: 600;
	border: 1px solid var(--sl-border);
	background: var(--sl-bg-elevated);
	color: var(--sl-text-muted);
	padding: .5em 1.1em;
	border-radius: 999px;
	cursor: pointer;
	transition: all .18s ease;
}

.sl-filter-pill:hover { border-color: var(--sl-accent); color: var(--sl-text); }

.sl-filter-pill.is-active {
	background: var(--sl-cat-color, var(--sl-accent));
	border-color: var(--sl-cat-color, var(--sl-accent));
	color: #fff;
}

/* ==========================================================================
   4. Post grid / cards
   ========================================================================== */

#primary, .content-area, .site-main, #main { background: var(--sl-bg) !important; }

.kadence-posts-list.grid-cols { gap: 1.6rem !important; }

.entry.loop-entry {
	background: var(--sl-bg-elevated) !important;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius-lg) !important;
	box-shadow: var(--sl-shadow) !important;
	overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.entry.loop-entry:hover {
	transform: translateY(-4px);
	box-shadow: var(--sl-shadow-lg) !important;
	border-color: color-mix(in srgb, var(--sl-accent) 40%, var(--sl-border));
}

.entry.loop-entry .entry-content-wrap { padding: 1.7rem !important; }

.entry-taxonomies .category-links a {
	font-family: var(--sl-font-mono);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: .3em .7em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--sl-cat-color, var(--sl-cat-default)) 14%, transparent);
	color: var(--sl-cat-color, var(--sl-cat-default));
}

.category-link-cloud { --sl-cat-color: var(--sl-cat-cloud); }
.category-link-netzwerk { --sl-cat-color: var(--sl-cat-netzwerk); }
.category-link-security { --sl-cat-color: var(--sl-cat-security); }
.category-link-tipps { --sl-cat-color: var(--sl-cat-tipps); }

article.category-cloud { --sl-cat-color: var(--sl-cat-cloud); }
article.category-netzwerk { --sl-cat-color: var(--sl-cat-netzwerk); }
article.category-security { --sl-cat-color: var(--sl-cat-security); }
article.category-tipps { --sl-cat-color: var(--sl-cat-tipps); }

.entry.loop-entry .entry-title { font-size: 1.28rem !important; margin: .6rem 0 .5rem !important; }

.entry.loop-entry .entry-title a { color: var(--sl-text) !important; transition: color .15s ease; }
.entry.loop-entry .entry-title a:hover { color: var(--sl-cat-color, var(--sl-accent)) !important; }

.entry-meta { color: var(--sl-text-faint) !important; font-size: 13px; }
.entry-meta .meta-label { display: none; }

.entry-summary p { color: var(--sl-text-muted) !important; font-size: 15px; line-height: 1.65; }

.post-more-link {
	font-family: var(--sl-font-mono);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sl-cat-color, var(--sl-accent)) !important;
	display: inline-flex;
	align-items: center;
	gap: .35em;
}

.post-more-link svg { transition: transform .18s ease; }
.entry.loop-entry:hover .post-more-link svg { transform: translateX(4px); }

.sl-hidden-by-filter { display: none !important; }

/* ==========================================================================
   5. Single post
   ========================================================================== */

.entry.single-entry {
	background: var(--sl-bg-elevated) !important;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius-lg) !important;
	box-shadow: var(--sl-shadow) !important;
}

.single-entry .entry-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem) !important; }

.single-entry .entry-content, .entry-content.single-content {
	color: var(--sl-text) !important;
	font-size: 17px;
	line-height: 1.75;
}

.entry-content a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sl-accent) 50%, transparent); text-underline-offset: 3px; }

#sl-progress-bar {
	position: fixed;
	top: 0; left: 0;
	height: 3px;
	width: 0%;
	background: linear-gradient(90deg, var(--sl-accent), var(--sl-accent-2));
	z-index: 1000;
	transition: width .1s linear;
}

.sl-toc {
	background: var(--sl-bg-soft);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	padding: 1rem 1.3rem;
	margin: 0 0 2rem;
}

.sl-toc-toggle {
	width: 100%;
	background: transparent;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--sl-font-mono);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--sl-text-muted);
	cursor: pointer;
	padding: 0;
}

.sl-toc-chevron { transition: transform .2s ease; }
.sl-toc.is-collapsed .sl-toc-chevron { transform: rotate(-90deg); }

.sl-toc-list { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.sl-toc.is-collapsed .sl-toc-list { display: none; }

.sl-toc-list a {
	color: var(--sl-text-muted);
	text-decoration: none;
	font-size: 14.5px;
	border-left: 2px solid var(--sl-border);
	padding-left: .8em;
	display: block;
	transition: color .15s ease, border-color .15s ease;
}

.sl-toc-list li[data-level="3"] a { padding-left: 1.8em; font-size: 13.5px; }

.sl-toc-list a:hover, .sl-toc-list a.is-active {
	color: var(--sl-accent);
	border-color: var(--sl-accent);
}

/* Code blocks */
.entry-content pre,
.entry-content .wp-block-code {
	background: var(--sl-code-bg) !important;
	border: 1px solid color-mix(in srgb, var(--sl-code-text) 12%, transparent);
	border-radius: var(--sl-radius) !important;
	padding: 1.2rem 1.3rem !important;
	overflow-x: auto;
	position: relative;
}

.entry-content pre code, .entry-content code {
	font-family: var(--sl-font-mono) !important;
	color: var(--sl-code-text) !important;
	font-size: 14px;
}

.entry-content :not(pre) > code {
	background: color-mix(in srgb, var(--sl-accent) 12%, transparent);
	color: var(--sl-accent) !important;
	padding: .15em .4em;
	border-radius: 5px;
}

.sl-code-wrap { position: relative; }

.sl-copy-btn {
	position: absolute;
	top: .7rem;
	right: .7rem;
	font-family: var(--sl-font-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--sl-code-text);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 7px;
	padding: .35em .7em;
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s ease, background .15s ease;
}

.sl-code-wrap:hover .sl-copy-btn { opacity: 1; }
.sl-copy-btn:hover { background: rgba(255, 255, 255, .14); }
.sl-copy-btn.is-copied { color: var(--sl-accent-2); border-color: var(--sl-accent-2); opacity: 1; }

.sl-reading-time {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-family: var(--sl-font-mono);
	font-size: 12.5px;
	color: var(--sl-text-faint);
}

.sl-reading-time::before { content: "⏱"; }

/* ==========================================================================
   6. Comments, search, footer
   ========================================================================== */

.comment-respond, #commentform textarea#comment,
#commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"] {
	background: var(--sl-bg-elevated) !important;
	color: var(--sl-text) !important;
	border-color: var(--sl-border) !important;
}

.comment-respond { background: var(--sl-bg-soft) !important; }

.wp-block-search__input {
	background: var(--sl-bg-elevated) !important;
	color: var(--sl-text) !important;
	border-color: var(--sl-border) !important;
}

.site-footer, .site-footer .site-footer-wrap, #colophon {
	background: var(--sl-code-bg) !important;
	border-top: 1px solid color-mix(in srgb, var(--sl-code-text) 10%, transparent);
}

.site-footer, .site-footer a, .site-footer p { color: color-mix(in srgb, var(--sl-code-text) 85%, transparent) !important; }

.site-footer a:hover { color: var(--sl-accent-2) !important; }

.footer-social-wrap .social-button {
	transition: transform .18s ease, background-color .18s ease;
}

.footer-social-wrap .social-button:hover { transform: translateY(-3px); }

/* ==========================================================================
   7. Motion & accessibility
   ========================================================================== */

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

a:focus-visible, button:focus-visible, .sl-toggle:focus-visible {
	outline: 2px solid var(--sl-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   8. Page hero banner (e.g. "Blog-Übersicht")
   ========================================================================== */

.entry-hero.page-hero-section {
	background: var(--sl-bg-soft) !important;
	border-bottom: 1px solid var(--sl-border);
	position: relative;
	overflow: hidden;
}

.entry-hero.page-hero-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--sl-text) 5%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--sl-text) 5%, transparent) 1px, transparent 1px);
	background-size: 38px 38px;
	mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, black 30%, transparent 85%);
	-webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, black 30%, transparent 85%);
}

.entry-hero-container-inner, .hero-section-overlay {
	background: transparent !important;
}

.entry-hero.page-hero-section .hero-container {
	position: relative;
	padding: 3.2rem 0 !important;
}

.entry-hero.page-hero-section .entry-title {
	font-family: var(--sl-font-mono) !important;
	font-size: clamp(1.7rem, 3.6vw, 2.3rem) !important;
	font-weight: 700 !important;
	margin: 0 !important;
}

.entry-hero.page-hero-section .entry-title::before {
	content: "$ ";
	color: var(--sl-accent);
}

/* ==========================================================================
   9. Search + category toolbar (Gutenberg search/categories blocks)
   ========================================================================== */

.entry-content .wp-block-columns:has(.wp-block-search),
.entry-content .wp-block-columns:has(.wp-block-categories) {
	background: var(--sl-bg-soft);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	padding: 1.2rem 1.4rem !important;
	margin: 0 0 2.2rem !important;
	align-items: end !important;
}

.entry-content .wp-block-search__label,
.entry-content .wp-block-categories__label {
	font-family: var(--sl-font-mono);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--sl-text-faint) !important;
	margin: 0 0 .5rem;
	display: block;
}

.entry-content .wp-block-search__inside-wrapper {
	border: 1px solid var(--sl-border) !important;
	border-radius: var(--sl-radius-sm) !important;
	overflow: hidden;
	background: var(--sl-bg-elevated);
	gap: 0 !important;
}

.entry-content .wp-block-search__input {
	border: none !important;
	border-radius: 0 !important;
	background: var(--sl-bg-elevated) !important;
	color: var(--sl-text) !important;
	flex: 1;
	min-width: 0;
	padding: .7em .9em !important;
}

.entry-content .wp-block-search__input::placeholder { color: var(--sl-text-faint); }

.entry-content .wp-block-search__button {
	border-radius: 0 !important;
	border: none !important;
	background: var(--sl-accent) !important;
	color: var(--sl-on-accent) !important;
	font-weight: 700 !important;
	padding: .7em 1.3em !important;
	margin: 0 !important;
}

.entry-content .wp-block-search__button:hover { background: var(--sl-accent-2) !important; }

.entry-content select.postform,
.entry-content .wp-block-categories-dropdown select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background: var(--sl-bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2356617a' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right .9em center !important;
	background-size: 12px !important;
	color: var(--sl-text) !important;
	border: 1px solid var(--sl-border) !important;
	border-radius: var(--sl-radius-sm) !important;
	padding: .72em 2.2em .72em .9em !important;
	font-family: var(--sl-font-body);
	font-size: 14.5px;
}

.entry-content select.postform:focus,
.entry-content .wp-block-search__input:focus {
	outline: none;
	border-color: var(--sl-accent) !important;
	box-shadow: 0 0 0 3px rgba(var(--sl-accent-rgb), .18);
}

/* ==========================================================================
   10. Comment form
   ========================================================================== */

.comment-respond {
	padding: 1.8rem !important;
	border-radius: var(--sl-radius-lg) !important;
}

.comment-reply-title {
	font-family: var(--sl-font-mono) !important;
	font-size: 1.15rem !important;
	color: var(--sl-text) !important;
	margin: 0 0 .3rem !important;
	display: flex;
	align-items: baseline;
	gap: .6em;
}

.comment-reply-title small a { font-size: 13px; color: var(--sl-accent); }

.comment-notes {
	display: block;
	color: var(--sl-text-faint) !important;
	font-size: 13.5px;
	margin: 0 0 1.4rem !important;
	line-height: 1.6;
}

.comment-notes span { display: inline; }
.comment-notes .required-field-message { display: block; margin-top: .15em; }
.comment-notes .required { color: var(--sl-cat-security); }

/* Only the form's direct-child paragraphs get spacing here — the
   author/email/url fields live inside .comment-input-wrap and keep
   Kadence's own grid + spacing so its floating-label math stays intact. */
#commentform > p { margin: 0 0 1.1rem !important; }

#commentform textarea#comment,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
	width: 100%;
	transition: border-color .15s ease, box-shadow .15s ease;
}

#commentform textarea#comment:focus,
#commentform input:focus {
	outline: none;
	border-color: var(--sl-accent) !important;
	box-shadow: 0 0 0 3px rgba(var(--sl-accent-rgb), .18);
}

#commentform label.float-label {
	color: var(--sl-text-muted) !important;
	font-size: 13.5px;
	font-weight: 500;
}

#commentform input:focus + label.float-label,
#commentform textarea:focus + label.float-label {
	color: var(--sl-accent) !important;
}

.comment-form-cookies-consent {
	display: flex !important;
	align-items: center;
	gap: .5em;
	font-size: 13px;
	color: var(--sl-text-faint) !important;
}

.comment-form-cookies-consent label { margin: 0 !important; }

#commentform .form-submit { margin-top: .4rem !important; }

#commentform #submit {
	width: 100%;
}


/* ==========================================================================
   11. Footer refresh
   ========================================================================== */

.site-footer {
	position: relative;
	padding-top: 1rem;
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--sl-accent), var(--sl-accent-2), transparent);
}

.site-bottom-footer-inner-wrap {
	align-items: center !important;
}

.sl-footer-brand {
	display: block;
	font-family: var(--sl-font-mono);
	font-weight: 700;
	font-size: 15px;
	color: color-mix(in srgb, var(--sl-code-text) 95%, transparent) !important;
	letter-spacing: -.02em;
}

.sl-footer-tagline {
	display: block;
	font-size: 12.5px;
	color: color-mix(in srgb, var(--sl-code-text) 55%, transparent) !important;
	margin: .25em 0 .6em;
}

.sl-footer-copy {
	display: block;
	font-family: var(--sl-font-mono);
	font-size: 12px;
	color: color-mix(in srgb, var(--sl-code-text) 45%, transparent) !important;
}

.footer-social-wrap .footer-social-inner-wrap { gap: .6em !important; }

.footer-social-wrap .social-button {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .06) !important;
	color: color-mix(in srgb, var(--sl-code-text) 85%, transparent) !important;
	border: 1px solid rgba(255, 255, 255, .1) !important;
}

.footer-social-wrap .social-button:hover {
	background: var(--sl-accent) !important;
	border-color: var(--sl-accent) !important;
	color: var(--sl-on-accent) !important;
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 767px) {
	.sl-hero { padding: 3rem 1.2rem 2rem; }
	.entry.loop-entry .entry-content-wrap { padding: 1.3rem !important; }
	.entry-content .wp-block-columns:has(.wp-block-search),
	.entry-content .wp-block-columns:has(.wp-block-categories) { padding: 1rem !important; }
}

/* ===========================================================================
   13. Editorial refresh (v1.1)
   A lighter, more intentional reading surface with a restrained "signal"
   treatment.  These overrides preserve the existing StackLog structure and
   category system while giving the blog a more current product-editorial feel.
   ======================================================================== */

:root {
	--sl-bg: #f6f8fd;
	--sl-bg-elevated: #ffffff;
	--sl-bg-soft: #eef2fb;
	--sl-text: #10172a;
	--sl-text-muted: #56627c;
	--sl-text-faint: #7d89a3;
	--sl-border: #e0e6f1;
	--sl-accent: #3156e8;
	--sl-accent-2: #0aa89e;
	--sl-accent-rgb: 49, 86, 232;
	--sl-shadow: 0 1px 2px rgba(16, 23, 42, .04), 0 18px 42px -22px rgba(26, 49, 104, .24);
	--sl-shadow-lg: 0 26px 68px -28px rgba(26, 49, 104, .34);
}

html[data-theme="dark"] {
	--sl-bg: #080b14;
	--sl-bg-elevated: #111726;
	--sl-bg-soft: #171f31;
	--sl-text: #eaf0ff;
	--sl-text-muted: #a4b0cb;
	--sl-text-faint: #74829d;
	--sl-border: #24304a;
	--sl-accent: #8ca7ff;
	--sl-accent-2: #5eead4;
	--sl-accent-rgb: 140, 167, 255;
	--sl-code-bg: #0b1020;
}

body {
	background:
		radial-gradient(900px 460px at 12% -10%, rgba(var(--sl-accent-rgb), .12), transparent 68%),
		radial-gradient(720px 380px at 92% 8%, color-mix(in srgb, var(--sl-accent-2) 12%, transparent), transparent 70%),
		var(--sl-bg) !important;
	background-attachment: fixed !important;
}

h1, h2, h3 { text-wrap: balance; }

#masthead {
	box-shadow: 0 8px 26px -22px rgba(15, 23, 42, .46);
}

#masthead::after {
	content: "";
	display: block;
	height: 1px;
	background: linear-gradient(90deg, transparent 4%, color-mix(in srgb, var(--sl-accent) 44%, transparent), color-mix(in srgb, var(--sl-accent-2) 42%, transparent), transparent 96%);
	opacity: .72;
}

.site-branding .site-title::before {
	content: "";
	display: inline-block;
	width: .62em;
	height: .62em;
	margin-right: .42em;
	border-radius: 50%;
	vertical-align: .08em;
	background: linear-gradient(135deg, var(--sl-accent), var(--sl-accent-2));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--sl-accent) 12%, transparent);
}

.sl-hero {
	padding-top: clamp(4.4rem, 8vw, 7rem);
	padding-bottom: clamp(3rem, 6vw, 5.2rem);
	margin: 0 auto 1.35rem;
	max-width: 1440px;
}

.sl-hero::after {
	content: "";
	position: absolute;
	left: max(1.25rem, 4vw);
	right: max(1.25rem, 4vw);
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sl-border) 16%, var(--sl-border) 84%, transparent);
}

.sl-hero-grid { opacity: .78; background-size: 36px 36px; }

.sl-hero-glow {
	top: -210px;
	width: min(760px, 96vw);
	height: 500px;
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--sl-accent) 36%, transparent), transparent 68%);
}

.sl-hero-kicker {
	box-shadow: 0 8px 22px -18px rgba(var(--sl-accent-rgb), .72);
	letter-spacing: .015em;
}

.sl-hero-title {
	font-size: clamp(2.25rem, 5.3vw, 4.4rem);
	line-height: .98;
	letter-spacing: -.055em;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

.sl-accent-text {
	background: linear-gradient(104deg, var(--sl-accent), var(--sl-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.sl-hero-sub { max-width: 610px; margin-left: auto; margin-right: auto; }

.sl-filter-pill {
	box-shadow: 0 6px 14px -14px rgba(16, 23, 42, .6);
	transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}

.sl-filter-pill:hover { transform: translateY(-2px); }

.kadence-posts-list.grid-cols { gap: clamp(1.2rem, 2vw, 1.8rem) !important; }

.entry.loop-entry {
	position: relative;
	border-color: color-mix(in srgb, var(--sl-border) 88%, transparent);
	box-shadow: 0 2px 4px rgba(16, 23, 42, .025), var(--sl-shadow) !important;
}

.entry.loop-entry::before {
	content: "";
	position: absolute;
	left: 1.3rem;
	right: 1.3rem;
	top: 0;
	height: 3px;
	border-radius: 0 0 999px 999px;
	background: linear-gradient(90deg, var(--sl-cat-color, var(--sl-accent)), color-mix(in srgb, var(--sl-cat-color, var(--sl-accent)) 12%, transparent));
	opacity: .66;
	transition: opacity .22s ease, left .22s ease, right .22s ease;
}

.entry.loop-entry:hover::before { left: .8rem; right: .8rem; opacity: 1; }

.entry.loop-entry .entry-content-wrap { padding: 1.85rem !important; }

.entry.loop-entry .entry-title {
	font-size: clamp(1.22rem, 1.5vw, 1.42rem) !important;
	line-height: 1.22;
	letter-spacing: -.025em;
}

.entry-summary p { font-size: 15.5px; }

.post-more-link { margin-top: .2rem; }

.entry.single-entry {
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(16, 23, 42, .025), var(--sl-shadow) !important;
}

.entry.single-entry::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--sl-accent), var(--sl-accent-2));
}

.single-entry .entry-title {
	font-size: clamp(2rem, 4vw, 3.35rem) !important;
	line-height: 1.05;
	letter-spacing: -.04em;
}

.sl-toc {
	background: linear-gradient(135deg, color-mix(in srgb, var(--sl-accent) 7%, var(--sl-bg-soft)), var(--sl-bg-soft));
	box-shadow: inset 3px 0 0 color-mix(in srgb, var(--sl-accent) 68%, transparent);
}

.entry-content pre,
.entry-content .wp-block-code {
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--sl-accent) 9%, transparent), transparent 42%),
		var(--sl-code-bg) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 28px -22px rgba(0, 0, 0, .72);
}

.wp-block-search__button,
#commentform #submit {
	background: linear-gradient(110deg, var(--sl-accent), color-mix(in srgb, var(--sl-accent) 72%, var(--sl-accent-2))) !important;
	border-color: transparent !important;
	box-shadow: 0 10px 20px -14px rgba(var(--sl-accent-rgb), .85);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.wp-block-search__button:hover,
#commentform #submit:hover {
	transform: translateY(-2px);
	filter: saturate(1.08) brightness(1.04);
	box-shadow: 0 14px 24px -14px rgba(var(--sl-accent-rgb), .96);
}

.sl-toggle {
	box-shadow: 0 12px 28px -18px rgba(15, 23, 42, .62);
}

@media (max-width: 767px) {
	body { background-attachment: scroll !important; }
	.site-branding .site-title::before { box-shadow: none; }
	.sl-hero { padding-top: 3.7rem; padding-bottom: 2.8rem; }
	.sl-hero-grid { background-size: 28px 28px; }
	.entry.loop-entry .entry-content-wrap { padding: 1.45rem !important; }
	.entry.loop-entry::before { left: 1rem; right: 1rem; }
	.single-entry .entry-title { font-size: clamp(1.85rem, 10vw, 2.5rem) !important; }
}

/* Interactive topic navigator */
.sl-radar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: .7rem;
	max-width: 880px;
	margin: 1.65rem auto .45rem;
	text-align: left;
}

.sl-radar-card {
	--sl-radar-color: var(--sl-accent);
	appearance: none;
	position: relative;
	min-height: 106px;
	padding: 1rem;
	overflow: hidden;
	text-align: left;
	font-family: var(--sl-font-body);
	color: var(--sl-text);
	background: color-mix(in srgb, var(--sl-bg-elevated) 86%, transparent);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	cursor: pointer;
	box-shadow: var(--sl-shadow-sm);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.sl-radar-card::after {
	content: "";
	position: absolute;
	width: 84px;
	height: 84px;
	right: -32px;
	bottom: -42px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sl-radar-color) 17%, transparent);
	transition: transform .24s ease, background-color .18s ease;
}

.sl-radar-card:hover,
.sl-radar-card:focus-visible,
.sl-radar-card.is-active {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--sl-radar-color) 62%, var(--sl-border));
	box-shadow: var(--sl-shadow);
}

.sl-radar-card:hover::after,
.sl-radar-card:focus-visible::after,
.sl-radar-card.is-active::after {
	transform: scale(1.55);
	background: color-mix(in srgb, var(--sl-radar-color) 24%, transparent);
}

.sl-radar-card.is-active {
	background: color-mix(in srgb, var(--sl-radar-color) 10%, var(--sl-bg-elevated));
}

.sl-radar-card--all { --sl-radar-color: var(--sl-accent); }

.sl-radar-card > * { position: relative; z-index: 1; display: block; }

.sl-radar-card-kicker {
	margin-bottom: .42rem;
	font-family: var(--sl-font-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sl-radar-color);
}

.sl-radar-card strong {
	font-size: 15.5px;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.sl-radar-card-count {
	margin-top: .55rem;
	font-size: 12px;
	color: var(--sl-text-faint);
}

.sl-filter-status {
	min-height: 1.4em;
	margin: .85rem 0 0;
	font-family: var(--sl-font-mono);
	font-size: 12px;
	color: var(--sl-text-faint);
}

@media (max-width: 767px) {
	.sl-radar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: 1.3rem; }
	.sl-radar-card { min-height: 96px; padding: .85rem; }
}

/* The hero is injected into Kadence's post grid. Make it a full-row intro
   panel so article cards can never occupy its visual space. */
#archive-container > .sl-hero,
.kadence-posts-list.grid-cols > .sl-hero {
	grid-column: 1 / -1 !important;
	width: 100%;
	margin-top: .35rem;
	margin-bottom: .8rem;
	border: 1px solid color-mix(in srgb, var(--sl-accent) 14%, var(--sl-border));
	border-radius: clamp(22px, 3vw, 34px);
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--sl-accent) 8%, var(--sl-bg-elevated)), transparent 55%),
		linear-gradient(315deg, color-mix(in srgb, var(--sl-accent-2) 8%, var(--sl-bg-elevated)), var(--sl-bg-elevated));
	box-shadow: 0 24px 56px -38px rgba(25, 49, 108, .54);
}

#archive-container > .sl-hero .sl-hero-inner,
.kadence-posts-list.grid-cols > .sl-hero .sl-hero-inner {
	max-width: 960px;
}

@media (max-width: 767px) {
	#archive-container > .sl-hero,
	.kadence-posts-list.grid-cols > .sl-hero {
		border-radius: 20px;
		margin-top: 0;
	}
}

/* ==========================================================================
   9. Conversion, resilient forms and responsive fallbacks
   ========================================================================== */

.sl-hero-actions,
.sl-404-actions,
.sl-cookie-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .75rem;
}

.sl-hero-actions { margin: 1.5rem 0 1.7rem; }

.sl-button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;
	padding: .72rem 1rem;
	font: 700 .875rem/1 var(--sl-font-body);
	text-decoration: none !important;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}

.sl-button--primary {
	color: #fff !important;
	background: linear-gradient(112deg, var(--sl-accent), var(--sl-accent-2));
	box-shadow: 0 13px 22px -15px rgba(var(--sl-accent-rgb), .95);
}

.sl-button--primary:hover,
.sl-button--primary:focus-visible {
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 16px 28px -14px rgba(var(--sl-accent-rgb), 1);
}

.sl-button--secondary {
	color: var(--sl-text) !important;
	background: color-mix(in srgb, var(--sl-bg-elevated) 84%, transparent);
	border-color: var(--sl-border);
	box-shadow: var(--sl-shadow-sm);
}

.sl-button--secondary:hover,
.sl-button--secondary:focus-visible {
	color: var(--sl-text) !important;
	border-color: color-mix(in srgb, var(--sl-accent) 52%, var(--sl-border));
	transform: translateY(-2px);
}

.sl-button:focus-visible,
.sl-radar-card:focus-visible,
.sl-filter-pill:focus-visible,
.sl-mobile-cta:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--sl-accent) 52%, transparent);
	outline-offset: 3px;
}

.sl-hero-filters.is-loading {
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sl-hero-filters.is-loading::after {
	content: "Themen werden geladen\2026";
	font: 600 .75rem/1 var(--sl-font-mono);
	letter-spacing: .04em;
	color: var(--sl-text-faint);
}

/* 404 */
.sl-404-page {
	width: min(100% - 2rem, 1120px);
	margin: clamp(2rem, 7vw, 6rem) auto;
}

.sl-404 {
	position: relative;
	overflow: hidden;
	padding: clamp(2rem, 6vw, 5rem);
	text-align: center;
	background:
		linear-gradient(130deg, color-mix(in srgb, var(--sl-accent) 11%, var(--sl-bg-elevated)), transparent 58%),
		linear-gradient(310deg, color-mix(in srgb, var(--sl-accent-2) 10%, var(--sl-bg-elevated)), var(--sl-bg-elevated));
	border: 1px solid color-mix(in srgb, var(--sl-accent) 20%, var(--sl-border));
	border-radius: clamp(22px, 3vw, 34px);
	box-shadow: var(--sl-shadow-lg);
}

.sl-404 > :not(.sl-404-grid) { position: relative; z-index: 1; }

.sl-404-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(color-mix(in srgb, var(--sl-border) 60%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--sl-border) 60%, transparent) 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: linear-gradient(to bottom, black, transparent 80%);
	opacity: .42;
}

.sl-404-terminal {
	width: min(100%, 620px);
	margin: 0 auto 2rem;
	padding: 1.1rem 1.25rem;
	text-align: left;
	color: #d6deeb;
	background: #0d111a;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 12px;
	box-shadow: 0 22px 35px -24px rgba(0,0,0,.95);
	font: 500 clamp(.68rem, 1.8vw, .82rem)/1.65 var(--sl-font-mono);
}

.sl-404-terminal-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #fb7185; }
.sl-404-terminal-dot:nth-child(2) { background: #fbbf24; }
.sl-404-terminal-dot:nth-child(3) { background: #34d399; }
.sl-404-terminal p { margin: .8rem 0 0; overflow-wrap: anywhere; }
.sl-404-terminal-prompt { color: #22d3ee; }
.sl-404-terminal-error { color: #fb7185; }
.sl-404-kicker,
.sl-cookie-kicker { margin: 0 0 .65rem; color: var(--sl-accent); font: 800 .72rem/1 var(--sl-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.sl-404 h1 { max-width: 780px; margin: 0 auto; font-size: clamp(2rem, 5vw, 4.25rem); line-height: .98; letter-spacing: -.055em; }
.sl-404-copy { max-width: 610px; margin: 1.25rem auto 1.8rem; color: var(--sl-text-muted); font-size: clamp(1rem, 1.8vw, 1.15rem); }
.sl-404-search { width: min(100%, 560px); margin: 2.4rem auto 0; text-align: left; }
.sl-404-search label { display: block; margin-bottom: .55rem; font-weight: 700; color: var(--sl-text); }
.sl-404-search-row { display: flex; gap: .6rem; }
.sl-404-search-row input { min-width: 0; flex: 1; min-height: 46px; padding: .75rem .9rem; color: var(--sl-text); background: var(--sl-bg-elevated); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-sm); }

/* Form validation and submission feedback: applies to current and future forms. */
form .sl-field-error { display: block; margin-top: .35rem; color: #dc2626; font-size: .8rem; font-weight: 650; }
html[data-theme="dark"] form .sl-field-error { color: #fb7185; }
form :is(input, textarea, select)[aria-invalid="true"] { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.13) !important; }
form :is(input, textarea, select):focus-visible { outline: 3px solid color-mix(in srgb, var(--sl-accent) 45%, transparent); outline-offset: 1px; }
form.is-submitting :is(button[type="submit"], input[type="submit"]) { position: relative; pointer-events: none; opacity: .76; }
form.is-submitting :is(button[type="submit"], input[type="submit"])::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-left: .5em; vertical-align: -.12em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sl-spin .65s linear infinite; }
@keyframes sl-spin { to { transform: rotate(360deg); } }

/* Consent UI is dependency-free and only appears after a privacy page exists. */
.sl-cookie-banner {
	position: fixed;
	left: max(1rem, env(safe-area-inset-left));
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 1003;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: min(100% - 2rem, 880px);
	margin: 0 auto;
	padding: 1.1rem 1.2rem;
	color: var(--sl-text);
	background: color-mix(in srgb, var(--sl-bg-elevated) 94%, transparent);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	box-shadow: var(--sl-shadow-lg);
	backdrop-filter: blur(16px);
}
.sl-cookie-banner[hidden] { display: none; }
.sl-cookie-copy h2 { margin: 0 0 .35rem; font-size: 1rem; }
.sl-cookie-copy p { max-width: 540px; margin: 0 0 .45rem; color: var(--sl-text-muted); font-size: .875rem; }
.sl-cookie-copy a { font-size: .82rem; font-weight: 700; }
.sl-cookie-actions { flex: 0 0 auto; }

/* Small screens get a permanent, thumb-friendly way back to the current guides. */
.sl-mobile-cta { display: none; }

@media (max-width: 1024px) {
	.sl-hero { padding-left: clamp(1.35rem, 5vw, 3rem); padding-right: clamp(1.35rem, 5vw, 3rem); }
	.sl-radar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	body:has(.sl-mobile-cta) { padding-bottom: 5.5rem; }
	.sl-hero-actions { gap: .55rem; margin: 1.3rem 0 1.45rem; }
	.sl-hero-actions .sl-button { flex: 1 1 185px; }
	.sl-404-page { width: min(100% - 1rem, 1120px); margin: 1rem auto 3rem; }
	.sl-404 { padding: 1.4rem 1rem 1.65rem; border-radius: 20px; }
	.sl-404-terminal { padding: .9rem; margin-bottom: 1.45rem; }
	.sl-404-search-row { flex-direction: column; }
	.sl-404-search-row .sl-button { width: 100%; }
	.sl-cookie-banner { bottom: calc(4.75rem + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: .9rem; padding: 1rem; }
	.sl-cookie-actions .sl-button { flex: 1 1 0; min-width: 0; padding-left: .7rem; padding-right: .7rem; }
	.sl-mobile-cta { position: fixed; right: max(.75rem, env(safe-area-inset-right)); bottom: max(.75rem, env(safe-area-inset-bottom)); left: max(.75rem, env(safe-area-inset-left)); z-index: 1002; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: .8rem 1rem; color: #fff !important; background: linear-gradient(112deg, var(--sl-accent), var(--sl-accent-2)); border-radius: 999px; box-shadow: 0 15px 28px -14px rgba(var(--sl-accent-rgb), .92); font-size: .9rem; font-weight: 800; text-decoration: none !important; }
	.sl-toggle { right: 16px; bottom: 73px; z-index: 1003; }
}

@media (max-width: 430px) {
	.sl-hero-actions { display: grid; grid-template-columns: 1fr; }
	.sl-radar { grid-template-columns: 1fr; }
	.sl-404-actions { display: grid; grid-template-columns: 1fr; }
	.sl-404-actions .sl-button { width: 100%; }
	.sl-cookie-actions { display: grid; grid-template-columns: 1fr; }
}

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

/* ===========================================================================
   15. Dark terminal reset (v1.3)
   A deliberately quiet CLI surface: charcoal, one signal colour, no blue
   glow or decorative colour transitions. The home intro is now outside the
   archive grid, so its layout is independent from the article cards.
   ======================================================================== */

:root {
	--sl-bg: #0c0d0e;
	--sl-bg-elevated: #141516;
	--sl-bg-soft: #1a1c1d;
	--sl-text: #ecebe7;
	--sl-text-muted: #a8aaa8;
	--sl-text-faint: #777a78;
	--sl-border: #313334;
	--sl-accent: #e7bb70;
	--sl-accent-2: #e7bb70;
	--sl-accent-rgb: 231, 187, 112;
	--sl-on-accent: #211709;
	--sl-code-bg: #0a0b0c;
	--sl-code-text: #e4e2dd;
	--sl-shadow-sm: none;
	--sl-shadow: none;
	--sl-shadow-lg: none;
	--sl-radius-lg: 10px;
	--sl-radius: 7px;
	--sl-radius-sm: 5px;
	--sl-cat-cloud: #c3bfae;
	--sl-cat-netzwerk: #d7bd7d;
	--sl-cat-security: #e59a82;
	--sl-cat-tipps: #c6a4d3;
	--sl-cat-default: #a8aaa8;
}

html[data-theme="dark"] {
	--sl-bg: #0c0d0e;
	--sl-bg-elevated: #141516;
	--sl-bg-soft: #1a1c1d;
	--sl-text: #ecebe7;
	--sl-text-muted: #a8aaa8;
	--sl-text-faint: #777a78;
	--sl-border: #313334;
	--sl-accent: #e7bb70;
	--sl-accent-2: #e7bb70;
	--sl-accent-rgb: 231, 187, 112;
	--sl-on-accent: #211709;
	--sl-code-bg: #0a0b0c;
	--sl-code-text: #e4e2dd;
}

html[data-theme="light"] {
	--sl-bg: #f4f2ed;
	--sl-bg-elevated: #ffffff;
	--sl-bg-soft: #e9e7e1;
	--sl-text: #201f1b;
	--sl-text-muted: #635f58;
	--sl-text-faint: #817b72;
	--sl-border: #dad4c9;
	--sl-accent: #8b5e21;
	--sl-accent-2: #8b5e21;
	--sl-accent-rgb: 139, 94, 33;
	--sl-on-accent: #ffffff;
}

body {
	background: var(--sl-bg) !important;
	background-attachment: scroll !important;
}

#masthead {
	background: color-mix(in srgb, var(--sl-bg-elevated) 96%, transparent) !important;
	backdrop-filter: blur(12px);
	box-shadow: none;
}

#masthead::after,
.site-footer::before { display: none; }

.site-branding .site-title::before {
	border-radius: 1px;
	background: var(--sl-accent);
	box-shadow: none;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a::after {
	background: var(--sl-accent);
	border-radius: 0;
}

.sl-hero {
	max-width: none;
	margin: 0 0 2.75rem;
	padding: clamp(1rem, 2vw, 1.8rem) 0 0;
	text-align: left;
	background: transparent;
	overflow: visible;
}

.sl-hero::after,
.sl-hero-glow { display: none; }

.sl-hero-grid {
	inset: 1rem 0 0;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--sl-border) 56%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--sl-border) 56%, transparent) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: none;
	-webkit-mask-image: none;
	opacity: .22;
}

.sl-hero-inner { max-width: 1120px; }

.sl-console {
	position: relative;
	border: 1px solid var(--sl-border);
	border-radius: 8px;
	background: var(--sl-bg-elevated);
	box-shadow: none;
	overflow: hidden;
}

.sl-console-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 42px;
	padding: 0 .95rem;
	border-bottom: 1px solid var(--sl-border);
	background: var(--sl-code-bg);
	font: 600 .72rem/1 var(--sl-font-mono);
	letter-spacing: .02em;
	color: var(--sl-text-muted);
}

.sl-console-name::before { content: "● ● ●"; margin-right: .7rem; color: var(--sl-text-faint); letter-spacing: .12em; }
.sl-console-status { display: inline-flex; align-items: center; gap: .45rem; color: var(--sl-accent); }
.sl-console-status i { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sl-accent) 12%, transparent); }

.sl-console-body { position: relative; padding: clamp(2rem, 5vw, 4.35rem); }

.sl-hero-kicker {
	padding: 0;
	margin: 0 0 1.05rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: .79rem;
	color: var(--sl-text-muted);
}

.sl-prompt,
.sl-cursor,
.sl-accent-text { color: var(--sl-accent); }

.sl-accent-text {
	background: none;
	-webkit-text-fill-color: currentColor;
}

.sl-hero-title {
	max-width: 760px;
	margin: 0 0 1rem !important;
	font: 700 clamp(2.5rem, 6vw, 5rem)/.98 var(--sl-font-mono) !important;
	letter-spacing: -.07em;
}

.sl-hero-sub { max-width: 620px; margin: 0 0 1.75rem; font-size: 1rem; }
.sl-hero-actions { justify-content: flex-start; margin: 0 0 2.4rem; }

.sl-button {
	min-height: 42px;
	border-radius: 5px;
	box-shadow: none;
	font-family: var(--sl-font-mono);
	font-size: .78rem;
}

.sl-button--primary,
.wp-block-search__button,
#commentform #submit {
	background: var(--sl-accent) !important;
	color: var(--sl-on-accent) !important;
	box-shadow: none;
}

.sl-button--primary:hover,
.sl-button--primary:focus-visible,
.wp-block-search__button:hover,
#commentform #submit:hover { transform: none; filter: brightness(.94); box-shadow: none; }

.sl-button--secondary { background: transparent; border-color: var(--sl-border); box-shadow: none; }
.sl-button--secondary:hover,
.sl-button--secondary:focus-visible { transform: none; border-color: var(--sl-accent); }

.sl-topic-index { border-top: 1px solid var(--sl-border); padding-top: 1.15rem; }
.sl-topic-index-head { display: flex; justify-content: space-between; margin-bottom: .65rem; font: 600 .69rem/1 var(--sl-font-mono); letter-spacing: .06em; color: var(--sl-text-faint); text-transform: uppercase; }

.sl-radar {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	max-width: none;
	margin: 0;
	border: 1px solid var(--sl-border);
	border-radius: 5px;
	overflow: hidden;
	background: var(--sl-code-bg);
}
.sl-radar[hidden] { display: none; }

.sl-radar-card {
	min-height: 0;
	padding: .82rem .9rem;
	border: 0;
	border-right: 1px solid var(--sl-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--sl-text-muted);
	transform: none !important;
}
.sl-radar-card:last-child { border-right: 0; }
.sl-radar-card::after { display: none; }
.sl-radar-card:hover,
.sl-radar-card:focus-visible,
.sl-radar-card.is-active { border-color: var(--sl-border); box-shadow: none; background: color-mix(in srgb, var(--sl-accent) 9%, transparent); }
.sl-radar-card.is-active { color: var(--sl-text); box-shadow: inset 0 -2px 0 var(--sl-accent); }
.sl-radar-card-kicker { margin-bottom: .42rem; color: var(--sl-text-faint); font-size: .65rem; }
.sl-radar-card strong { font: 700 .82rem/1.25 var(--sl-font-mono); letter-spacing: -.02em; }
.sl-radar-card-count { margin-top: .45rem; color: var(--sl-text-faint); font-size: .71rem; }
.sl-filter-status { min-height: 0; margin: .8rem 0 0; color: var(--sl-text-faint); text-align: left; }

.sl-archive-intro {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 2rem;
	margin: 0 0 1.1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--sl-border);
}
.sl-archive-intro p { margin: 0; color: var(--sl-text-muted); }
.sl-archive-intro > div > p { margin-bottom: .45rem; font: 600 .69rem/1 var(--sl-font-mono); letter-spacing: .06em; color: var(--sl-accent); text-transform: uppercase; }
.sl-archive-intro h2 { margin: 0; font: 700 clamp(1.3rem, 2vw, 1.75rem)/1.1 var(--sl-font-mono) !important; letter-spacing: -.04em; }
.sl-archive-intro > p { max-width: 42ch; font-size: .88rem; text-align: right; }

#archive-container { margin-top: 0; }
.kadence-posts-list.grid-cols { gap: 1rem !important; }
.entry.loop-entry { border: 1px solid var(--sl-border); border-radius: 7px !important; box-shadow: none !important; }
.entry.loop-entry:hover { transform: translateY(-2px); border-color: var(--sl-text-faint); box-shadow: none !important; }
.entry.loop-entry::before { left: 0; right: auto; width: 3px; height: 100%; border-radius: 0; background: var(--sl-cat-color, var(--sl-accent)); opacity: .72; }
.entry.loop-entry:hover::before { left: 0; right: auto; opacity: 1; }
.entry.loop-entry .entry-content-wrap { padding: 1.45rem 1.45rem 1.45rem 1.65rem !important; }
.entry-taxonomies .category-links a { padding: 0; border-radius: 0; background: transparent; color: var(--sl-accent); }
.entry.loop-entry .entry-title a:hover,
.post-more-link { color: var(--sl-accent) !important; }
.site-footer { padding-top: 0; border-top: 1px solid var(--sl-border); }
.sl-footer-legal-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .65rem 1.25rem; width: 100%; margin-top: .9rem; text-align: center; }
.sl-footer-legal { display: inline-block; margin: 0; color: color-mix(in srgb, var(--sl-code-text) 72%, transparent) !important; font: 600 .72rem/1.5 var(--sl-font-mono); text-decoration: none; }
.sl-footer-legal-en { display: none !important; }
html[lang^="en"] .sl-footer-legal-de { display: none !important; }
html[lang^="en"] .sl-footer-legal-en { display: inline-block !important; }
.sl-footer-legal:hover { color: var(--sl-accent) !important; }

/* Contact Form 7: readable fields, validation feedback and a clear sending state. */
.wpcf7-form .sl-contact-fields > p { margin: 0 0 1.15rem; }
.wpcf7-form .sl-contact-fields label { color: var(--sl-text); font: 600 .82rem/1.5 var(--sl-font-mono); }
.wpcf7-form-control:not(.wpcf7-submit) { width: 100%; margin-top: .35rem; padding: .78rem .9rem; border: 1px solid var(--sl-border); border-radius: 5px; background: var(--sl-bg-elevated); color: var(--sl-text); font: 400 .95rem/1.5 var(--sl-font-body); }
.wpcf7-form-control:not(.wpcf7-submit):focus { border-color: var(--sl-accent); outline: 2px solid color-mix(in srgb, var(--sl-accent) 28%, transparent); outline-offset: 1px; }
.wpcf7-form textarea.wpcf7-form-control { min-height: 180px; resize: vertical; }
.wpcf7-form .sl-contact-privacy { color: var(--sl-text-muted); font-size: .83rem; line-height: 1.65; }
.wpcf7-form .sl-contact-privacy a { color: var(--sl-accent); }
.wpcf7-form .wpcf7-not-valid { border-color: #d65e68 !important; }
.wpcf7-form .wpcf7-not-valid-tip { display: block; margin-top: .35rem; color: #ff858d; font-size: .8rem; }
.wpcf7 form .wpcf7-response-output { margin: 1rem 0 0; padding: .8rem 1rem; border: 1px solid var(--sl-border); border-radius: 5px; color: var(--sl-text); font-size: .88rem; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #398c70; background: color-mix(in srgb, #398c70 12%, var(--sl-bg-elevated)); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { border-color: #b9525b; background: color-mix(in srgb, #b9525b 12%, var(--sl-bg-elevated)); }
.wpcf7-form.submitting .sl-contact-submit { opacity: .62; cursor: wait; }
.wpcf7-form .wpcf7-spinner { background-color: var(--sl-accent); }

/* Brevo newsletter: one focused, accessible signup surface per language. */
.sl-newsletter-confirmation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 1280px;
	margin: clamp(1rem, 2.5vw, 2rem) auto 0;
	padding: clamp(1.2rem, 3vw, 1.8rem);
	border: 1px solid color-mix(in srgb, #42b883 52%, var(--sl-border));
	border-radius: 8px;
	background: linear-gradient(115deg, color-mix(in srgb, #42b883 15%, var(--sl-bg-elevated)), var(--sl-bg-elevated));
	box-shadow: var(--sl-shadow);
}

.sl-newsletter-confirmation-kicker {
	margin: 0 0 .45rem !important;
	color: #42b883 !important;
	font: 800 .72rem/1 var(--sl-font-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.sl-newsletter-confirmation h2 {
	margin: 0 0 .45rem !important;
	font: 750 clamp(1.3rem, 3vw, 1.8rem)/1.1 var(--sl-font-mono) !important;
	letter-spacing: -.045em;
}

.sl-newsletter-confirmation p:not(.sl-newsletter-confirmation-kicker) {
	max-width: 65ch;
	margin: 0;
	color: var(--sl-text-muted);
}

.sl-newsletter-confirmation .sl-button { flex: 0 0 auto; }

@media (max-width: 640px) {
	.sl-newsletter-confirmation { align-items: flex-start; flex-direction: column; }
}

.sl-newsletter-page {
	max-width: 760px;
	margin: clamp(1.5rem, 4vw, 3.5rem) auto;
	padding: clamp(1.4rem, 4vw, 2.5rem);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	background: linear-gradient(135deg, color-mix(in srgb, var(--sl-accent) 8%, var(--sl-bg-elevated)), var(--sl-bg-elevated) 58%);
	box-shadow: var(--sl-shadow);
}

.sl-newsletter-kicker {
	margin: 0 0 .7rem !important;
	color: var(--sl-accent) !important;
	font: 800 .72rem/1 var(--sl-font-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.sl-newsletter-page h1 {
	max-width: 15ch;
	margin: 0 0 .85rem !important;
	font: 750 clamp(2rem, 5vw, 3.75rem)/.98 var(--sl-font-mono) !important;
	letter-spacing: -.06em;
}

.sl-newsletter-intro { max-width: 56ch; color: var(--sl-text-muted); font-size: 1.04rem; line-height: 1.7; }
.sl-newsletter-page .sib_signup_form { max-width: 560px; margin: 1.6rem 0 1.15rem; }
.sl-newsletter-page .sib_signup_form p { margin: 0 0 1rem; }
.sl-newsletter-page .sib_signup_form label { display: inline-block; margin-bottom: .45rem; color: var(--sl-text); font: 700 .8rem/1.45 var(--sl-font-mono); }
.sl-newsletter-page .sib_signup_form input[type="email"] {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: .75rem .9rem;
	border: 1px solid var(--sl-border);
	border-radius: 5px;
	background: var(--sl-bg-elevated);
	color: var(--sl-text);
	font: 400 1rem/1.4 var(--sl-font-body);
}
.sl-newsletter-page .sib_signup_form input[type="email"]:focus { border-color: var(--sl-accent); outline: 3px solid color-mix(in srgb, var(--sl-accent) 28%, transparent); outline-offset: 1px; }
.sl-newsletter-page .sib-default-btn {
	min-height: 46px;
	margin: .15rem 0 0 !important;
	padding: .72rem 1.05rem !important;
	border: 0 !important;
	border-radius: 5px !important;
	background: linear-gradient(110deg, var(--sl-accent), color-mix(in srgb, var(--sl-accent) 72%, var(--sl-accent-2))) !important;
	color: var(--sl-on-accent) !important;
	font: 800 .82rem/1 var(--sl-font-mono) !important;
	letter-spacing: .015em;
	box-shadow: 0 10px 20px -14px rgba(var(--sl-accent-rgb), .9);
}
.sl-newsletter-page .sib-default-btn:hover,
.sl-newsletter-page .sib-default-btn:focus-visible { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04); }
.sl-newsletter-page .sl-newsletter-form-note,
.sl-newsletter-privacy { color: var(--sl-text-muted); font-size: .84rem; line-height: 1.65; }
.sl-newsletter-page :is(.sl-newsletter-form-note, .sl-newsletter-privacy) a { color: var(--sl-accent); }
.sl-newsletter-page .sib_msg_disp { margin: 0 0 1rem; }
.sl-newsletter-page .sib-alert-message { margin: 0; padding: .75rem .9rem; border: 1px solid var(--sl-border); border-radius: 5px; font-size: .9rem; }
.sl-newsletter-page .sib-alert-message-success { border-color: #398c70; background: color-mix(in srgb, #398c70 12%, var(--sl-bg-elevated)); }
.sl-newsletter-page .sib-alert-message-error,
.sl-newsletter-page .sib-alert-message-warning { border-color: #b9525b; background: color-mix(in srgb, #b9525b 12%, var(--sl-bg-elevated)); }
.sl-newsletter-page .cf-turnstile { margin-top: 1.1rem; }

/* Kadence archive pagination: compact numbered controls with a clear current page. */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .45rem; margin: 2.2rem auto 3rem; }
.pagination .page-numbers { display: inline-flex; justify-content: center; align-items: center; min-width: 2.55rem; min-height: 2.55rem; padding: .35rem .65rem; border: 1px solid var(--sl-border); border-radius: 4px; color: var(--sl-text-muted); font: 600 .78rem/1 var(--sl-font-mono); text-decoration: none; }
.pagination a.page-numbers:hover { border-color: var(--sl-accent); color: var(--sl-accent); }
.pagination .page-numbers.current { border-color: var(--sl-accent); background: var(--sl-accent); color: var(--sl-on-accent); }

/* Code blocks use a persistent terminal toolbar so language and copy action
   stay clear on touch devices as well as desktop. */
.entry-content .sl-code-wrap {
	margin: 1.5rem 0;
	overflow: hidden;
	border: 1px solid #343537;
	border-radius: 10px;
	background: #101113;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}
.entry-content .sl-code-wrap pre,
.entry-content .sl-code-wrap .wp-block-code {
	margin: 0 !important;
	padding: 1.15rem 1.25rem 1.25rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #101113 !important;
	box-shadow: none !important;
	white-space: pre;
	overscroll-behavior-x: contain;
}
.entry-content .sl-code-wrap pre code {
	display: block;
	color: #e6e4df !important;
	font-family: 'Cascadia Code', 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace !important;
	font-size: .86rem;
	line-height: 1.8;
	tab-size: 2;
}
.sl-code-toolbar {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: 46px;
	padding: .45rem .7rem .45rem .85rem;
	border-bottom: 1px solid #303234;
	background: #1b1d1f;
}
.sl-code-window-controls { display: inline-flex; align-items: center; gap: .38rem; flex: 0 0 auto; }
.sl-code-window-dot { width: .62rem; height: .62rem; border-radius: 50%; background: #6f7273; }
.sl-code-window-dot:first-child { background: #e7a36f; }
.sl-code-window-dot:nth-child(2) { background: #d8bd87; }
.sl-code-window-dot:nth-child(3) { background: #aa9b8a; }
.sl-code-language-group { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.sl-code-language {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	min-width: 0;
	color: #d7d4ce;
	font: 600 .76rem/1 var(--sl-font-mono);
	letter-spacing: .015em;
}
.sl-code-language::before {
	display: none;
	content: '';
}
.sl-code-powershell .sl-code-language::before {
	display: inline-grid;
	width: 1.35rem;
	height: 1.2rem;
	place-items: center;
	border: 1px solid #67563a;
	border-radius: 4px;
	color: #e7bb70;
	background: #28231a;
	font: 800 .57rem/1 var(--sl-font-mono);
	content: 'PS';
}
.sl-copy-btn {
	position: static;
	flex: 0 0 auto;
	opacity: 1;
	min-height: 31px;
	padding: .35rem .65rem;
	color: #d7d4ce !important;
	background: #242628;
	border: 1px solid #3d4041;
	border-radius: 5px;
	font: 600 .69rem/1 var(--sl-font-mono);
	letter-spacing: .02em;
}
.sl-copy-btn:hover,
.sl-copy-btn:focus-visible { color: #211709 !important; background: #e7bb70; border-color: #e7bb70; }
.sl-copy-btn.is-copied { color: #211709 !important; background: #e7bb70; border-color: #e7bb70; }
.sl-token-command { color: #e7bb70 !important; }
.sl-token-parameter { color: #c6a4d3 !important; }
.sl-token-variable { color: #d5bd8f !important; }
.sl-token-string { color: #c9a878 !important; }
.sl-token-comment { color: #858b8b !important; font-style: italic; }
.sl-token-number { color: #dfa477 !important; }
.sl-token-operator { color: #aeb5be !important; }
.entry-content .sl-code-wrap pre::-webkit-scrollbar { height: 9px; }
.entry-content .sl-code-wrap pre::-webkit-scrollbar-track { background: #17191a; }
.entry-content .sl-code-wrap pre::-webkit-scrollbar-thumb { background: #494745; border: 2px solid #17191a; border-radius: 99px; }

@media (max-width: 767px) {
	.sl-hero { margin-bottom: 2rem; padding-top: .75rem; }
	.sl-console-body { padding: 1.5rem 1.1rem; }
	.sl-console-bar { padding: 0 .8rem; }
	.sl-console-name::before { margin-right: .45rem; }
	.sl-console-status { font-size: .63rem; }
	.sl-hero-title { font-size: clamp(2.25rem, 12vw, 3.3rem) !important; }
	.sl-hero-actions { margin-bottom: 1.7rem; }
	.sl-topic-index-head { align-items: start; gap: .5rem; line-height: 1.35; }
	.sl-radar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sl-radar-card:nth-child(2n) { border-right: 0; }
	.sl-radar-card:nth-child(n + 3) { border-top: 1px solid var(--sl-border); }
	.sl-archive-intro { align-items: start; flex-direction: column; gap: .7rem; }
	.sl-archive-intro > p { text-align: left; }
	.sl-mobile-cta { border-radius: 5px; background: var(--sl-accent); color: var(--sl-on-accent) !important; box-shadow: none; }
	.entry-content .sl-code-wrap { margin: 1.15rem 0; border-radius: 8px; }
	.entry-content .sl-code-wrap pre,
	.entry-content .sl-code-wrap .wp-block-code { padding: .9rem !important; }
	.entry-content .sl-code-wrap pre code { font-size: .77rem; line-height: 1.72; }
	.sl-code-toolbar { min-height: 43px; padding-inline: .65rem; }
	.sl-code-window-controls { gap: .3rem; }
	.sl-code-window-dot { width: .54rem; height: .54rem; }
	.sl-copy-btn { min-height: 29px; padding-inline: .55rem; }
}

/* Article continuation and related guides: a readable terminal index instead
   of a second, visually competing card grid. */
.post-navigation {
	margin: 2.2rem 0 0;
	padding: 0;
	border: 1px solid var(--sl-border);
	border-radius: 7px;
	background: var(--sl-bg-elevated);
}

.post-navigation .nav-links > div { width: 100%; }
.post-navigation .nav-links a {
	display: block;
	padding: 1.05rem 1.2rem;
	color: var(--sl-text) !important;
	font: 700 .92rem/1.45 var(--sl-font-mono);
	text-decoration: none;
}
.post-navigation .nav-links a:hover { color: var(--sl-accent) !important; }
.post-navigation .post-navigation-sub { margin-bottom: .35rem; }
.post-navigation .post-navigation-sub small { color: var(--sl-accent); font: 600 .68rem/1 var(--sl-font-mono); letter-spacing: .06em; text-transform: uppercase; }

.entry-related {
	margin-top: 3.5rem !important;
	padding: 2.5rem 0 0 !important;
	border-top: 1px solid var(--sl-border);
	background: transparent !important;
}
.entry-related .entry-related-inner,
.entry-related .entry-related-inner-content { max-width: none; }
.entry-related-title {
	margin: 0 0 1rem !important;
	font: 700 clamp(1.3rem, 2vw, 1.65rem)/1.1 var(--sl-font-mono) !important;
	letter-spacing: -.045em;
	color: var(--sl-text) !important;
}
.entry-related-title::before { content: "// "; color: var(--sl-accent); }
.entry-related .splide__track { overflow: visible; }
.entry-related .kadence-posts-list.grid-cols { gap: .8rem !important; }
.entry-related .entry.loop-entry {
	min-height: 100%;
	border-color: var(--sl-border);
	border-radius: 6px !important;
	background: var(--sl-bg-elevated) !important;
}
.entry-related .entry.loop-entry::before { background: var(--sl-accent); }
.entry-related .entry.loop-entry .entry-content-wrap { padding: 1.1rem 1.1rem 1.05rem 1.3rem !important; }
.entry-related .entry-taxonomies { margin-bottom: .6rem; }
.entry-related .entry-taxonomies .category-links a { font-size: .64rem; }
.entry-related .entry.loop-entry .entry-title {
	margin: 0 0 .75rem !important;
	font: 700 .95rem/1.35 var(--sl-font-mono) !important;
	letter-spacing: -.025em;
}
.entry-related .entry.loop-entry .entry-title a { color: var(--sl-text) !important; }
.entry-related .entry.loop-entry .entry-title a:hover { color: var(--sl-accent) !important; }
.entry-related .posted-by,
.entry-related .entry-summary,
.entry-related .entry-footer { display: none !important; }
.entry-related .entry-meta { display: block; font: .7rem/1.4 var(--sl-font-mono); color: var(--sl-text-faint) !important; }
.entry-related .posted-on::before { content: "updated "; color: var(--sl-accent); }
.entry-related .splide__pagination { position: static; margin-top: 1.1rem; }
.entry-related .splide__pagination__page { width: 6px; height: 6px; margin: 0 .25rem; border-radius: 0; background: var(--sl-text-faint); opacity: .48; }
.entry-related .splide__pagination__page.is-active { width: 18px; transform: none; background: var(--sl-accent); opacity: 1; }
.entry-related .splide__arrow { width: 32px; height: 32px; border: 1px solid var(--sl-border); border-radius: 4px; background: var(--sl-bg-elevated); opacity: 1; }
.entry-related .splide__arrow svg { fill: var(--sl-text-muted); }
.entry-related .splide__arrow:hover { border-color: var(--sl-accent); }

@media (max-width: 767px) {
	.post-navigation .nav-links a { padding: .95rem 1rem; }
	.entry-related { margin-top: 2.6rem !important; padding-top: 2rem !important; }
	.entry-related .entry.loop-entry .entry-content-wrap { padding: 1rem 1rem 1rem 1.2rem !important; }
}

/* ---------- Autor mit Avatar (Beitrag, Karten, Blog-Übersicht) ---------- */
.entry-meta .posted-by { display: inline-flex; align-items: center; gap: .45rem; }
.entry-meta .author-avatar { display: inline-flex; margin: 0 !important; }
.entry-meta .author-avatar img,
.entry-meta img.avatar { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--sl-border); object-fit: cover; }
.single-entry .entry-meta .author-avatar img,
.single-entry .entry-meta img.avatar { width: 28px; height: 28px; }

/* Blog-Übersicht (Query-Loop-Raster auf „Blog-Übersicht“ / „Blog overview“) */
.sl-overview-card {
	height: 100%;
	background: var(--sl-bg-elevated);
	border: 1px solid var(--sl-border);
	border-radius: 7px;
	transition: transform .15s ease, border-color .15s ease;
}
.sl-overview-card:hover { transform: translateY(-2px); border-color: var(--sl-text-faint); }
.sl-overview-card .sl-overview-cover { margin: -30px -30px 1.2rem !important; }
.sl-overview-card .sl-overview-cover img {
	width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: contain;
	border-radius: 7px 7px 0 0; background: var(--sl-bg-soft);
}
.sl-overview-card .wp-block-post-title { font-size: 1.2rem; line-height: 1.3; margin: 0 0 .6rem; }
.sl-overview-card .wp-block-post-title a { color: var(--sl-text); text-decoration: none; }
.sl-overview-card .wp-block-post-title a:hover { color: var(--sl-accent); }
.sl-overview-card .wp-block-post-excerpt { color: var(--sl-text-muted); font-size: 15px; line-height: 1.65; }
.sl-overview-byline { gap: .5rem; color: var(--sl-text-faint); font-size: 13px; margin-top: 1rem; }
.sl-overview-byline .wp-block-post-author { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.sl-overview-byline .wp-block-post-author__avatar { margin: 0; display: inline-flex; }
.sl-overview-byline .wp-block-post-author__avatar img { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--sl-border); }
.sl-overview-byline .wp-block-post-author__name { margin: 0; font-size: 13px; }
.sl-overview-byline .wp-block-post-author__name a { color: var(--sl-text-muted); text-decoration: none; }
.sl-overview-byline .wp-block-post-date { font-size: 13px; }
.sl-overview-byline .wp-block-post-date::before { content: "•"; margin-right: .5rem; }