@import url("https://unpkg.com/prismjs/themes/prism.css");

/* @import url("https://unpkg.com/prismjs/themes/prism-tomorrow.css"); */
:root {
	--color-primary: #0F2644;
	--color-accent: #FECB00;

	--color-text: #0F2644;
	--color-muted: #4a5a70;

	--color-border: #ECECEC;

	--color-bg: #FFFFFF;
	--color-bg-alt: #F7F7F7;

	--max-width: 900px;
	--anchor-offset: 110px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: var(--color-bg);
	color: var(--color-text);
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	border-bottom: 1px solid rgba(15, 38, 68, 0.25);
	transition: border-color 0.2s ease, color 0.2s ease;
}

a:hover {
	border-bottom-color: var(--color-accent);
	color: var(--color-primary);
}

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 20px;
}

.header {
	border-bottom: 1px solid var(--color-border);
	padding: 18px 0;
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 1px 0 rgba(0,0,0,0.04);

}

.header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 5px;

	font-weight: 650;
	font-size: 1.2rem;
	color: var(--color-primary);
	letter-spacing: -0.02em;

	text-decoration: none;
	border-bottom: none;
	/* wichtig wegen globalem a-Style */
}

.brand:hover {
	border-bottom: none;
	/* sicherstellen */
}

.brand__logo {
	height: 35px;
	width: auto;
	display: block;
}

.brand__text {
	line-height: 1;
}

code:not(pre code) {
	background: rgba(15, 38, 68, 0.08);
	/* background: #f6f8fb; */
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
}

nav a {
	margin-left: 20px;
	text-decoration: none;
	color: var(--color-muted);
	font-size: 0.95rem;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

nav a:hover {
	color: var(--color-primary);
	border-bottom-color: var(--color-accent);
}

main {
	/* padding: 60px 0; */
	padding: 80px 0 70px 0;
	flex: 1;
		/* statt 60px */
}

main h1:first-of-type {
	margin-top: 2rem;
	margin-bottom: 1.2rem;
}

h1,
h2,
h3 {
	color: var(--color-primary);
	letter-spacing: -0.03em;
	line-height: 1.2;
	margin: 0 0 0.6em 0;
}

h1 {
	font-size: 2.4rem;
	font-weight: 650;
}

h2 {
	font-size: 1.45rem;
	font-weight: 650;
	margin-top: 2.0rem;
	scroll-margin-top: var(--anchor-offset);
}

h3 {
	scroll-margin-top: var(--anchor-offset);
}
main p:first-of-type {
	max-width: 80ch;
	margin-bottom: 4rem;
}

p {
	margin: 0 0 1.1rem 0;
	max-width: 72ch;
}

.divider {
	border: none;
	height: 2px;
	width: 440px;
	margin: 2.5rem auto;

	background: linear-gradient(to right,
			transparent,
			var(--color-accent),
			transparent);
}

.footer {
	border-top: 1px solid var(--color-border);
	background: #f1f3f6;
	padding: 24px 0;
	color: var(--color-muted);
	font-size: 0.9rem;
	margin-top: 2rem;
}

.footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.footer__right a {
	margin-left: 20px;
	font-size: 0.9rem;
	color: var(--color-muted);
	border-bottom: none;
}

.footer__right a:hover {
	color: var(--color-primary);
}

.footer__left {
	color: var(--color-muted);
}

.two-col {
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 40px;
	align-items: start;
}

.sidebar {
	border-left: 1px solid var(--color-border);
	padding-left: 20px;
}

.postlist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.postlist li {
	margin: 0 0 1.2rem 0;
}

.muted {
	color: var(--color-muted);
	font-size: 0.95rem;
	margin-top: 0.2rem;
}

.meta {
	color: var(--color-muted);
	font-size: 0.9rem;
}

.latest {
	padding: 16px 18px;
	border: 1px solid var(--color-border);
	background: var(--color-bg-alt);
	border-radius: 10px;
	margin: 1.5rem 0 2rem 0;
}

.taglist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.taglist li {
	margin: 0 0 0.6rem 0;
}

@media (max-width: 860px) {
	.two-col {
		grid-template-columns: 1fr;
	}

	.sidebar {
		border-left: none;
		padding-left: 0;
		border-top: 1px solid var(--color-border);
		padding-top: 16px;
		margin-top: 24px;
	}
	.footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer__right a {
		margin-left: 0;
		margin-right: 16px;
	}
}

.prose header {
	margin-bottom: 1.6rem;
	padding-bottom: 1.2rem;
		border-bottom: 2px solid var(--color-border);
}
.prose {
	max-width: 65ch;
}

.post-toc {
	margin: 0 0 2rem 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background: var(--color-bg-alt);
}

.post-toc__title {
	margin: 0 0 0.75rem 0;
	font-size: 0.95rem;
	font-weight: 650;
	color: var(--color-primary);
}

.post-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.post-toc__item {
	margin: 0;
}

.post-toc__item + .post-toc__item {
	margin-top: 0.45rem;
}

.post-toc__item a {
	display: inline-block;
	color: var(--color-muted);
	border-bottom: 1px solid transparent;
}

.post-toc__item a:hover {
	color: var(--color-primary);
	border-bottom-color: var(--color-accent);
}

.post-toc__item--level-3 {
	padding-left: 1rem;
	font-size: 0.96rem;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote {
	max-width: 65ch;
}

hr {
	border: none;
	height: 2px;
	width: min(440px, calc(100vw - 40px));
	max-width: 100%;
	margin: 2.5rem auto;
	background: linear-gradient(to right,
			transparent,
			var(--color-accent),
			transparent);
}

.prose hr {
	border: none;
	height: 2px;
	width: min(440px, 100%);
	max-width: 100%;
	margin: 2.5rem auto;
	background: linear-gradient(to right,
			transparent,
			var(--color-accent),
			transparent);
}

/* Blue divider */
.prose hr.divider-blue {
	border: none;
	height: 2px;
	width: min(440px, 100%);
	max-width: 100%;
	margin: 2.5rem auto;
	background: linear-gradient(to right,
			transparent,
			var(--color-primary),
			transparent);
}

/* Subtle neutral divider */
hr.divider-subtle {
	border: none;
	height: 2px;
	width: min(440px, calc(100vw - 40px));
	max-width: 100%;
	margin: 2rem auto;
	background: linear-gradient(to right,
			transparent,
			rgba(15, 38, 68, 0.18),
			rgba(15, 38, 68, 0.35),
			rgba(15, 38, 68, 0.18),
			transparent);
	opacity: 1;
}

/* Strong accent divider */
.prose hr.divider-strong {
	border: none;
	height: 4px;
	width: min(460px, 100%);
	max-width: 100%;
	margin: 3rem auto;
	background: var(--color-accent);
}

.prose blockquote {
	margin: 1.4rem 0;
	padding: 0.9rem 1rem;

	border-left: 4px solid var(--color-border);
	background: #f8fafc;

	border-radius: 6px;
}

.prose blockquote.tip {
	border-left-color: #2f7de1;
	background: #f2f7ff;
}
.prose blockquote.warn {
	border-left-color: #e5533d;
	background: #fff4f3;
}
.prose blockquote.praxis {
	border-left-color: #0f2644;
	background: #f3f6fa;
}
/* Praxis-Boxen kompakter: Absatz-Margins im Blockquote neutralisieren */
.prose blockquote p {
	margin: 0.35rem 0;
	max-width: none;
	/* optional, falls du inside nicht begrenzen willst */
}

.prose blockquote p:first-child {
	margin-top: 0;
}

.prose blockquote p:last-child {
	margin-bottom: 0;
}

.prose .lead {
	margin: 0.6rem 0 0.8rem 0;
	/* war vorher zu groß */
}

.prose>*:first-child {
	margin-top: 1.6rem;
}

.prose p:first-of-type {
	margin-bottom: 1.2rem;
}

.meta-row {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	flex-wrap: wrap;
	margin: 0.2rem 0 1.2rem 0;
	color: var(--color-muted);
	font-size: 0.9rem;
}

.meta-row .meta {
	color: var(--color-muted);
}

.meta-row .tags {
	color: var(--color-muted);
}

.meta-row .tag {
	color: var(--color-muted);
	border-bottom: 1px solid transparent;
}

.meta-row .tag:hover {
	color: var(--color-primary);
	border-bottom-color: var(--color-accent);
}

.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin: 2.4rem 0 1.2rem 0;
	padding-top: 1.2rem;
	border-top: 1px solid var(--color-border);
}

.post-nav__next {
	text-align: right;
}

.post-nav__label {
	display: inline-block;
	font-size: 0.9rem;
	color: var(--color-muted);
	border-bottom: none;
}

.post-nav__label:hover {
	color: var(--color-primary);
}

.post-nav__title {
	margin-top: 0.3rem;
	font-size: 1rem;
	line-height: 1.35;
}

.post-nav__title a {
	border-bottom-color: rgba(15, 38, 68, 0.18);
}

.post-nav__overview {
	grid-column: span 2;
	text-align: center;
	margin-top: 0.8rem;
	font-size: 0.95rem;
}

.post-nav__overview a {
	color: var(--color-primary);
	border-bottom: 1px solid rgba(15, 38, 68, 0.25);
	
}

.post-nav__overview a:hover {
	border-bottom-color: var(--color-accent);
}

/* pre {
	position: relative;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	overflow: auto;

	background: #0f2644;
	color: #f8fafc;

	font-size: 0.9rem;
	line-height: 1.5;
} */
pre[class*="language-"] {
	position: relative;
	padding: 1.1rem 1.2rem;

	border: 1px solid var(--color-border);
	border-radius: 10px;

	background: #f6f8fb;
	color: #0f2644;

	overflow: auto;

	font-size: 0.9rem;
	line-height: 1.5;
}

pre code {
	background: none;
	padding: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.copy-btn {
	position: absolute;
	top: 10px;
	right: 10px;

	font-size: 0.75rem;
	padding: 4px 8px;

	border-radius: 6px;
	border: 1px solid var(--color-border);

	background: white;
	color: var(--color-muted);
}

.copy-btn:hover {
	border-color: var(--color-accent);
	color: var(--color-primary);
}
.mermaid {
	margin: 2rem 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background: var(--color-bg-alt);
	overflow: auto;
}