/* Reset-ish */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	background: var(--color-bg);
}

html,
body {
	height: 100%;
}

main {
	flex: 1;
}

.page-frame {
	background: var(--color-bg);
	margin-inline: auto;
	min-height: 100vh;

	display: flex;
	flex-direction: column;
}

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

/* Layout Container */
.container {
	width: min(var(--width-content), 100% - var(--space-s));
	margin-inline: auto;
	padding-block: var(--space-s);
}

.container-wide {
	width: min(var(--width-wide), 100% - var(--space-s));
	margin-inline: auto;
	padding-block: var(--space-s);
}

.site-header {
	padding: 1.2rem 0;
}

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

.site-footer {
	margin-top: 4rem;
	padding: 2rem 0;
	/*border-top: 1px solid var(--color-accent); */
}

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

.article-body {
	display: flex;
	gap: 2rem;
	/* Abstand zwischen Sidebar und Content */
	align-items: flex-start;
	/* verhindert vertikales Zentrieren */
}

/* Sidebar links */
.article-sidebar {
	width: 220px;
	/* oder 200–260px */
	flex-shrink: 0;
	/* verhindert, dass sie kleiner gedrückt wird */
}

/* Artikel-Content rechts */
.article-content {
	flex: 1;
	min-width: 0;
	/* wichtig für korrektes Textwrapping */
}

.article-sidebar nav ul {
	list-style: none;
	padding-left: 0;
	border-left: 2px solid var(--color-accent);
	margin-left: 0.4rem;
}

.article-sidebar nav li::before {
	content: "";
}

.article-sidebar nav li {
	margin-bottom: 0.8rem;
	padding-left: 1rem;
}

.article-sidebar nav a {
	text-decoration: none;
	color: var(--color-text);
	font-weight: 500;
}

.article-sidebar nav a:hover {
	color: var(--color-accent);
}