/* PORTAL-STYLESHEET
 * main.css enthält das Inhaltsraster (einschließlich Sidebar) sowie alle
 * redaktionellen Komponenten. Globale Grundlagen und Navigation stehen in general.css.
 */


/* === VARIABLEN DES HAUPTINHALTS ============================================
 * Diese Werte werden ausschließlich von Artikelgestaltung, Sidebar, Pagination
 * oder Inhaltskomponenten verwendet und bleiben deshalb aus general.css heraus.
 */
:root {
	/* Akzente und Textfarben des redaktionellen Inhalts. */
	--color-title: var(--color-brand-green);
	--color-title-border: var(--color-brand-green);
	--color-article-highlight: #800000;
	--color-text-blockquote: #555555;
	--color-text-caption: #666666;
	--color-text-superscript: #aaaaaa;

	/* Nebenflächen und Rahmen für Artikel, Bilder, Tabellen und Referenzziele. */
	--color-bg-subtle: #f9f9f9;
	--color-bg-light: #f4f4f4;
	--color-bg-sidebar: #f1f3f0;
	--color-border-figure: #eeeeee;
	--color-border-medium: #cccccc;
	--color-bg-figure: #fcfcfc;
	--color-bg-table-stripe: #fafafa;
	--color-bg-table-header: #e8eaed;
	--color-bg-reference-target: rgba(255, 235, 59, 0.2);
	--color-bg-source-target: #fff9e6;

	/* Modulares Box-/Argumentationssystem. */
	--color-box-bg: #f8f9fa;
	--color-box-text: #2d3748;
	--color-box-border-light: #e2e8f0;
	--color-argument-accent: #5a6b7c;
	--color-box-info-bg: #ebf8ff;
	--color-box-info-border: #3182ce;
	--color-box-info-border-soft: rgba(49, 130, 206, 0.15);
	--color-box-callout-bg: #fff5f5;
	--color-box-callout-border: #e53e3e;

	/* Pagination und Kapitelübersicht (TOC). */
	--color-article-nav-primary: #2c3e50;
	--color-article-nav-accent: #27ae60;

	/* Desktop-Seitenraster: Hauptinhalt + Sidebar + Spaltenabstand. */
	--layout-content-width: 900px;
	--layout-sidebar-width: 240px;
	--layout-column-gap: 35px;

	/* Innenabstände des Hauptinhalts und seiner Komponenten. */
	--panel-padding: 20px;
	--panel-inner-padding: 12px;
	--main-content-padding-top: 30px;
	--content-block-spacing: 30px;
}

.main-layout {
	display: flex;
	justify-content: flex-start;
	gap: var(--layout-column-gap);
	align-items: start;
	width: 100%;
}


/* === HAUPTINHALT =========================================================== */

.main-content {
	flex: 0 0 var(--layout-content-width);
	max-width: 100%;
	background: var(--color-bg-content);
	box-shadow: 0 0 15px rgba(0,0,0,0.05);
	padding: var(--main-content-padding-top) var(--panel-padding) var(--panel-padding);
}

/* === STATUSHINWEISE & ARTIKEL-METADATEN =================================== */
.portal-notice {
	margin-bottom: 20px;
	border-style: solid;
	border-width: 1px;
	border-radius: 6px;
}

.portal-notice-draft {
	padding: 16px;
	background: #fff3cd;
	color: #856404;
	border-color: #ffeeba;
}

.portal-notice-preview {
	padding: 10px 14px;
	background: #e2e3e5;
	color: #383d41;
	border-color: #d6d8db;
	font-size: 0.85em;
}

.article-meta {
	margin-top: 40px;
	padding-top: 15px;
	border-top: 1px solid var(--color-border-soft);
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

/* === MEHRSEITIGE ARTIKEL ==================================================
 * Von index.php aus pagebreak-Markern erzeugt. */
.article-pagination {
	font-size: 0.9rem;
	color: var(--color-text-main);
}

.article-pagination.pagination-top {
	margin: 0 0 25px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--color-border-soft);
}

.article-pagination.pagination-bottom {
	margin: 40px 0 20px;
	padding-top: 20px;
	border-top: 2px solid var(--color-border-soft);
}

.pagination-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.pagination-info {
	color: var(--color-text-muted);
}

.pagination-list {
	display: flex;
	align-items: center;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	gap: 5px;
}

.pagination-list li {
	margin: 0 !important;
}

.page-link {
	display: inline-block;
	padding: 6px 12px;
	background-color: var(--color-bg-light);
	color: var(--color-text-main);
	text-decoration: none;
	border-radius: var(--radius-frame-border);
	border: 1px solid var(--color-border-soft);
	font-weight: 600;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease;
}

.page-link.active {
	background-color: var(--color-article-nav-primary);
	color: #ffffff !important;
	border-color: var(--color-article-nav-primary);
	cursor: default;
}

a.page-link:hover {
	background-color: var(--color-article-nav-accent);
	color: #ffffff !important;
	border-color: var(--color-article-nav-accent);
}

.pagination-item-all {
	margin-left: 12px !important;
	padding-left: 12px;
	border-left: 1px solid var(--color-border-soft);
}

.page-link.view-switch {
	background-color: transparent;
	border-style: dashed;
}

.page-link.view-switch:hover {
	border-style: solid;
}

.pagination-next-preview {
	margin-top: 15px;
	padding: 10px 14px;
	background-color: var(--color-bg-subtle);
	border-left: 3px solid var(--color-article-nav-accent);
	text-align: right;
}

.pagination-next-preview a {
	font-weight: 700;
	text-decoration: none;
}

/* Die kompakte Navigation ist standardmäßig ausgeblendet. */
.pagination-desktop-only {
	display: list-item;
}

.pagination-ellipsis {
	display: none;
}

@media (max-width: 500px) {
	.pagination-desktop-only {
		display: none;
	}

	.pagination-ellipsis {
		display: list-item;
	}
}

/* Kapitelübersicht innerhalb der oberen Pagination. */
.article-toc {
	background-color: var(--color-box-bg);
	border: 1px solid var(--color-border-soft);
	border-radius: 6px;
	padding: 15px 20px;
	margin-bottom: 25px;
}

.toc-title {
	display: block;
	margin-bottom: 10px;
	font-size: 1rem;
	color: var(--color-text-main);
	border-bottom: 1px solid var(--color-border-soft);
	padding-bottom: 8px;
}

.toc-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.toc-item {
	margin: 0 !important;
	font-size: 0.95rem;
}

.toc-link {
	text-decoration: none;
	color: var(--color-article-nav-primary);
	display: block;
	padding: 4px 8px;
	border-radius: var(--radius-frame-border);
	transition: background-color 0.2s ease;
}

.toc-link:hover {
	background-color: rgba(0,0,0,0.05);
}

.toc-item.active .toc-link {
	font-weight: 700;
	background-color: var(--color-article-nav-primary);
	color: #ffffff;
	cursor: default;
}

/* === GLOBALE LINKS ======================================================== */

a {
/*	color: #0000EE;
	text-decoration: underline;
	text-underline-offset: 2px; */
}

a:hover {
	color: #245b1c;
}

a:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 3px;
}

/* === Kategorie-Seiten: -> an Links */
/*
.image-grid figcaption h3 a::after {
	content: " →";
}
*/

/* === ARTIKELTYPOGRAFIE & TEXTHELFER ======================================= */
h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: 1.65rem; line-height: 1.2; margin-top: 0; margin-bottom: 0.6em; padding-bottom: 8px; color: var(--color-title); border-bottom: 2.5px solid var(--color-title-border); }
h2 { font-size: 1.4rem; margin-top: 1.25em; margin-bottom: 0.3em; color: var(--color-text-main); }
h3 { font-size: 1.25rem; margin-top: 1.15em; margin-bottom: 0.3em; color: var(--color-border-dark); }
h4 { font-size: 1.15rem; margin-top: 1.05em; margin-bottom: 0.3em; color: var(--color-text-main); font-weight: 650; }
h5 { font-size: 1.05rem; margin-top: 0.95em; margin-bottom: 0.3em; color: var(--color-text-main); font-weight: 600; font-style: italic; }
h6 { font-size: 0.95rem; margin-top: 0.8em; margin-bottom: 0.3em; color: var(--color-border-dark); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

.heading-group { margin-bottom: 0.5em; }
.heading-group:has(h1) { margin-bottom: 0.8em; }
.heading-group :is(h1, h2, h3, h4, h5) { margin-top: 0; margin-bottom: 0; }
.heading-group :is(h2, h3, h4) { padding-bottom: 3px; border-bottom: 1.6px solid currentColor; }

.sub-heading { display: block; font-size: 0.9rem; color: var(--color-text-muted); font-weight: 600; margin-top: 2px; }
.heading-group h1 + .sub-heading { font-size: 1.2rem; }
.heading-group h2 + .sub-heading { font-size: 1.15rem; }
.heading-group h3 + .sub-heading { font-size: 1.05rem; }
.heading-group h4 + .sub-heading { font-size: 1.00rem; }

strong, b { font-weight: 600; }
p { margin-bottom: 1.2em; margin-top: 0; text-align: left; hyphens: auto; }
hr { border: 0; height: 1px; background-color: var(--color-border-soft); margin: 1.6rem 0; }
.separator { border: 0;	 border-top: 1px solid #dedede;	 margin: 0.5em 0; }

ul, ol { margin: 0.5em 0; padding-left: 1.5rem; }
li { margin-bottom: 0.6em; line-height: 1.5; }
ul ul, ol ol, ul ol, ol ul { margin-top: 0.4em; margin-bottom: 0.4em; }

.main-content article ul { list-style: disc; padding-left: 25px; margin-bottom: 1.5rem; }
.dash-list { list-style-type: none !important; }
.dash-list li::before { content: "- "; }

.justified { text-align: justify; hyphens: auto; text-justify: inter-word; }
.justified + .justified { margin-top: -0.5em; }
.centered { text-align: center; }
.highlight { font-weight: 600; color: var(--color-article-highlight); }
.term { border-bottom: 1px dotted var(--color-text-muted); cursor: help; }
.prominent { font-size: 1.3em; font-weight: 700; }

/* Optionale Hinweis-Symbole für redaktionelle Hervorhebungen. */
.icon-hint::before {
	content: "💡";
	margin-right: 0.35em;
}

.icon-warning::before {
	content: "⚠";
	margin-right: 0.35em;
}

blockquote {
	font-style: italic;
	font-size: 1.1rem;
	margin: 30px 40px;
	padding-left: 20px;
	border-left: 3px solid var(--color-border-medium);
	color: var(--color-text-blockquote);
}
.author-note { font-size: 0.85rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 1px; }
sup, .justified p::after { font-size: 0.75rem; color: var(--color-text-superscript); }

/* === BILDER & TEXTUMFLUSS ================================================== */
figure {
	margin: var(--content-block-spacing) 0;
	padding: 10px;
	background-color: var(--color-bg-figure);
	border: 1px solid var(--color-border-figure);
	display: table;
}
figure img { max-width: 100%; height: auto; display: block; }
figcaption {
	padding: 10px 5px 5px;
	font-family: sans-serif;
	font-size: 0.85rem;
	color: var(--color-text-caption);
	display: table-caption;
	caption-side: bottom;
}

figure.align-right { float: right; margin: 10px 0 20px 30px; max-width: 40%; }
figure.align-left { float: left; margin: 10px 30px 20px 0; max-width: 50%; }
figure.center { margin: 20px auto; display: block; text-align: center; }
figure.center-compact { margin: 20px auto; display: block; text-align: center; max-width: 50%; }
.clear { clear: both; }

@media (max-width: 600px) {
	figure.align-right, figure.align-left { float: none; margin: 20px 0; max-width: 100%; display: table; }
}

/* === TABELLEN =============================================================
 * Wrapper scrollt horizontal; erste Spalte bleibt sticky. */
.table-container {
	overflow-x: auto;
	margin: var(--content-block-spacing) 0;
	-webkit-overflow-scrolling: touch;
}

table {
	width: 100%;
	min-width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-family: sans-serif;
	font-size: 0.95rem;
}

/* Eine Tabelle, die sich an den verfügbaren Platz anpasst */
table.table-constrained {
	width: auto;
	min-width: 0;
	max-width: 400px;
}

caption {
	caption-side: top;
	text-align: left;
	font-size: 1.0rem;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-border-dark);
	padding: 5px 15px 12px;
}

thead th {
	background-color: var(--color-bg-table-header);
	color: var(--color-text-main);
	text-align: left;
	padding: 12px 15px;
	font-weight: 600;
	border-bottom: 2px solid var(--color-border-medium);
}

td {
	padding: 12px 15px;
	vertical-align: top;
	border-bottom: 1px solid var(--color-border-soft);
}

tr:nth-child(even) td {
	background-color: var(--color-bg-table-stripe);
}

/* Dezente Tabellenvariante für Tabellen ohne starken Zebra-Kontrast. */
table.table-subtle tr:nth-child(even) td {
	background-color: transparent;
}

table.table-subtle td {
	border-bottom-color: var(--color-border-soft);
}

/* Eigene Hintergründe/z-index verhindern Durchscheinen der sticky Spalte. */
.table-container th:first-child,
.table-container td:first-child {
	position: sticky;
	left: 0;
	box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);
}

.table-container td:first-child {
	z-index: 2;
	background-color: var(--color-bg-content);
}

.table-container tr:nth-child(even) td:first-child {
	background-color: var(--color-bg-table-stripe);
}

.table-container thead th:first-child {
	z-index: 3;
	background-color: var(--color-bg-table-header);
}

/* === MODULARES BOX-SYSTEM ==================================================
 * Basis .box plus Summary-, Argument-, Info-, Callout- und Details-Varianten. */
.box {
	background-color: var(--color-box-bg);
	border: 1px solid var(--color-box-border-light);
	color: var(--color-box-text);
	padding: 25px 30px;
	margin: var(--content-block-spacing) 0;
	border-radius: var(--radius-frame-border);
}

.box > *:last-child { margin-bottom: 0; }

.box-title {
	display: block;
	font-weight: 700;
	font-style: normal;
	color: var(--color-box-text);
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 1px;
	margin-bottom: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding-bottom: 6px;
}

.box.box-summary { background-color: var(--color-bg-light); border-left: 6px solid var(--color-article-highlight); }
.box.box-summary .box-title { color: var(--color-article-highlight); border-bottom-color: rgba(128, 0, 0, 0.15); }
.box.box-argument { border-left: 6px solid var(--color-argument-accent); }
.box.box-info {
	background-color: var(--color-box-info-bg);
	border-color: var(--color-box-info-border-soft);
	border-left: 6px solid var(--color-box-info-border);
}
.box.box-info .box-title { border-bottom-color: var(--color-box-info-border-soft); }
.box.box-callout {
	background-color: var(--color-box-callout-bg);
	border-color: rgba(229, 62, 62, 0.15);
	border-left: 6px solid var(--color-box-callout-border);
}
.box.box-callout .box-title { border-bottom-color: rgba(229, 62, 62, 0.15); }
.box.box-separator { border-left: 0; }

.box-details {
	background-color: var(--color-box-bg);
	border: 1px solid var(--color-box-border-light);
	border-left: 1px solid var(--color-argument-accent);
	padding: 15px 20px;
	transition: background-color 0.2s ease;
}
.box-details summary {
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-argument-accent);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0;
	margin: 0;
	user-select: none;
}
.box-details summary::-webkit-details-marker { display: none; }
.box-details summary::after { content: "+"; font-size: 1.3em; font-weight: 600; color: var(--color-argument-accent); transition: transform 0.2s ease; }
.box-details summary:hover { opacity: 0.8; }
.box-details[open] { background-color: #ffffff; }
.box-details[open] summary { border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 10px; margin-bottom: 15px; }
.box-details[open] summary::after { content: "−"; }

/* === SPEZIELLE ARTIKELKOMPONENTEN ========================================= */
/* Timeline */
.timeline {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	position: relative;
	margin: 2rem 0;
}
.timeline::before {
	content: '';
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 8rem;
	width: 2px;
	background-color: var(--color-border-soft);
	z-index: 1;
}
.timeline-event {
	display: grid;
	grid-template-columns: 8rem 1fr;
	gap: 0;
	position: relative;
	z-index: 2;
}
.timeline-time {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--color-text-muted);
	text-align: right;
	padding-right: 1.5rem;
}
.timeline-content {
	position: relative;
	padding-left: 1.5rem;
}
.timeline-content::before {
	content: '';
	position: absolute;
	left: -0.25em;
	top: 0.35em;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #ffffff;
	border: 2px solid var(--color-border-dark);
	box-sizing: border-box;
}
.timeline-content h4 { margin: 0 0 0.25rem 0; font-size: 1rem; line-height: 1.3; }
.timeline-content p { margin: 0; font-size: 0.95rem; color: var(--color-text-main); }

@media (max-width: 600px) {
	.timeline::before { left: 0.5rem; }
	.timeline-event { grid-template-columns: 1fr; padding-left: 1.5rem; gap: 0.25rem; }
	.timeline-time { text-align: left; padding-right: 0; }
	.timeline-content { padding-left: 0; }
	.timeline-content::before { left: -1.25rem; }
}

/* Argumentationsdiagramme */
.argument-map {
	margin: 1.25rem 0 1.5rem;
}

.argument-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
}

.argument-node {
	display: inline-block;
	flex: 0 1 auto;
	width: auto;
	max-width: 13rem;
	margin: 0;
	padding: 0.4rem 0.65rem;
	background-color: var(--color-box-bg);
	border: 1px solid var(--color-box-border-light);
	border-radius: var(--radius-frame-border);
	font-size: 0.92rem;
	line-height: 1.3;
	text-align: center;
}

.argument-arrow,
.argument-arrow-left,
.argument-arrow-right,
.argument-arrow-both,
.argument-arrow-equiv {
	display: inline-block;
	flex: 0 0 auto;
	margin: 0;
	color: var(--color-border-dark);
	font-size: 2.0rem;
	line-height: 1;
}

.argument-arrow::before {
	content: "→";
}

.argument-arrow-right::before {
	content: "→";
}

.argument-arrow-left::before {
	content: "←";
}

.argument-arrow-both::before {
	content: "↔";
}

.argument-arrow-equiv::before {
	content: "⇔";
}

.argument-arrow-up,
.argument-arrow-down,
.argument-arrow-both-vertical,
.argument-arrow-equiv-vertical {
	display: block;
	width: 100%;
	margin: 0.35rem 0;
	text-align: center;
	color: var(--color-border-dark);
	font-size: 1.8rem;
	line-height: 1;
}

.argument-arrow-down::before {
	content: "↓";
}

.argument-arrow-up::before {
	content: "↑";
}

.argument-arrow-both-vertical::before {
	content: "↕";
}

.argument-arrow-equiv-vertical::before {
	content: "⇕";
}

.argument-conclusion {
	font-weight: 600;
	background-color: var(--color-bg-light);
	border-color: var(--color-article-highlight);
}

/* Mehrspaltiger Text; mobil einspaltig. */
.text-columns {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 2.5rem;
	margin-bottom: 1.5em;
}
.text-columns > .column {
	width: 100%;
	min-width: 0;
	text-align: justify;
	hyphens: auto;
	border-left: 1px solid var(--color-border-soft);
	padding-left: 1.25rem;
}
.text-columns > .column:first-child { border-left: none; padding-left: 0; }

@media (max-width: 768px) {
	.text-columns { grid-auto-flow: row; }
	.text-columns > .column { border-left: none; padding-left: 0; }
}

/* Bilderraster; standardmäßig 3 Spalten. --cols kann pro Raster gesetzt werden.
 * Für zwei Spalten bevorzugt class="image-grid cols-2"; das vermeidet Inline-Styles.
 * Unter 600px wird unabhängig davon immer einspaltig dargestellt. */
.image-grid {
	--cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	gap: 20px;
	margin: var(--content-block-spacing) 0;
	width: 100%;
}
.image-grid.cols-2 { --cols: 2; }
.image-grid figure { display: block; width: auto; margin: 0; }
.image-grid figure img {
	width: 100%;
	/* height: 200px; */
	object-fit: cover;
	border-radius: var(--radius-frame-border);
}
.image-grid figcaption { display: block; width: 100%; padding: 10px 5px 0; }

@media (max-width: 600px) { .image-grid { grid-template-columns: 1fr; } }

/* === QUELLENARCHIV & ZITATSYSTEM ==========================================
 * index.php filtert das Archiv je Unterseite auf verwendete Quellen. */
.footnote-link { text-decoration: none; color: var(--color-brand-green); font-size: 0.85em; font-weight: 600; white-space: nowrap; }
.footnote-link:hover { color: var(--color-accent-red); text-decoration: underline; }

ol li:target { background-color: var(--color-bg-reference-target); transition: background-color 0.5s ease; border-radius: var(--radius-frame-border); }

.sources-list { margin-top: 32px; padding: 18px; color: #777; line-height: 1.4; }
.sources-list h3 { font-size: 0.95rem; margin-bottom: 10px; }
dl dd ul { margin-bottom: 0 !important; padding-bottom: 0 !important; }

.source-archive {
	margin-top: 60px;
	padding: 25px 20px 15px;
	border-top: 3px solid var(--color-border-soft);
	background-color: var(--color-bg-light);
	font-size: 0.82rem;
	color: var(--color-text-muted);
	line-height: 1.2;
}
.source-archive-title {
	margin-top: 0;
	margin-bottom: 15px;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.source-archive ol { margin: 0; padding-left: 20px; }
.source-archive li { margin-bottom: 6px; }

.source-archive dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 12px;
	margin: 0;
	padding: 0;
}
.source-archive dt, .source-archive dd { margin: 0; }
.source-archive dt { font-weight: normal; }
.source-archive dd { margin-bottom: 6px; }

.source-archive li:target,
.source-archive dt:target,
.source-archive dd:target {
	background-color: var(--color-bg-source-target);
	color: var(--color-text-main);
	padding: 2px 5px;
	border-radius: 3px;
}

.back-link { display: inline-block; white-space: nowrap; text-decoration: none; margin-left: 0.3em; opacity: 0.5; transition: opacity 0.2s ease; }
.back-link::after { content: "\2191"; font-family: sans-serif; }
.back-link:hover { opacity: 1; }

/* === TASTATURFOKUS: INHALT ================================================
 * Ergänzt general.css um Fokusindikatoren für Bedienelemente im Hauptinhalt.
 */
.page-link:focus-visible,
.box-details summary:focus-visible,
.back-link:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 3px;
}

/* Zoombare Bilder */

/* Styling für zoombare Bilder im Artikel */
img.zoomable {
	cursor: zoom-in;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

img.zoomable:hover {
	opacity: 0.92;
}

/* Modal Overlay */
.lightbox-modal {
	border: none;
	background: rgba(20, 35, 25, 0.92); /* Dunkles Portal-Grün (#142319) */
	color: #fff;
	padding: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	z-index: 9999;
}

.lightbox-modal[open] {
	display: grid;
	place-items: center;
}

.lightbox-container {
	position: relative;
	max-width: 92vw;
	max-height: 92vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.lightbox-container img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.lightbox-close {
	position: absolute;
	top: -45px;
	right: 0;
	background: none;
	border: none;
	color: #dfe9dc;
	font-size: 2.2rem;
	cursor: pointer;
	padding: 0.2rem 0.5rem;
	line-height: 1;
	transition: color 0.2s;
}

.lightbox-close:hover {
	color: #ffffff;
}

/* === SIDEBAR =============================================================== */

.sidebar {
	min-height: 100vh;
	position: sticky;
	top: 0;
	margin-top: 0;
	flex: 0 0 var(--layout-sidebar-width);
	background-color: var(--color-bg-sidebar);
	padding: 0px var(--panel-inner-padding);
	border-left: 1.6px solid var(--color-brand-green);
	height: fit-content;
}

/* Optionales Efeu-Hintergrundbild */
.sidebar-efeu-background {
	position: absolute;
	top: 0;
	left: var(--panel-inner-padding);
	right: var(--panel-inner-padding);
	min-height: 100%;
	background-image: url("images/sidebar-efeu.webp");
	background-repeat: repeat-y;
	background-position: center top;
	background-size: 85% auto;
/*	pointer-events: none; */
}

.sidebar-text {
	background-color: rgba(255, 255, 255, 0.85);
	padding: 8px;
	border-radius: 5px;
	color: #222;
	line-height: 1.5;
}

/* 1215px entspricht dem aktuellen --layout-max-width; Custom Properties können nicht als Media-Query-Grenze verwendet werden. */
@media (max-width: 1215px) {
	.sidebar { display: none; }
}


/* === SIDEBAR: REDAKTIONELLE MODULE =========================================
 * Ergänzt die bestehende Sidebar aus dem Hauptlayout.
 * Verwendet vorhandene Farb-, Abstands- und Rahmenvariablen.
 */

/* Äußerer Sidebar-Inhalt */
.sidebar-text {
	padding: 8px;
}

/* Einzelne Module */
.sidebar-module {
	margin-bottom: 1.25em;
	padding: 0.75em;
	background-color: var(--color-box-bg);
	color: var(--color-box-text);
	border: 1px solid var(--color-box-border-light);
	border-radius: var(--radius-frame-border);
	line-height: 1.45;
}

.sidebar-module > *:last-child {
	margin-bottom: 0;
}

/* Modulüberschriften */
.sidebar-module-title {
	display: block;
	margin: 0 0 0.65em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--color-box-border-light);
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.3;
}

/* Neutrale redaktionelle Kategorien */
.sidebar-category {
	display: block;
	margin: 0.9em 0 0.35em;
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.3;
}

.sidebar-category:first-child {
	margin-top: 0;
}

/* Linklisten */
.sidebar-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar-links li {
	margin: 0 0 0.4em;
	padding: 0;
	line-height: 1.4;
}

/* Normale Textlinks:
 * Farbe und grundlegende Linkdarstellung kommen aus den allgemeinen
 * Linkregeln der Website.
 */
.sidebar-link {
	display: inline;
}

/* Kompakte Artikelkarten */
.sidebar-link-card {
	display: block;
	margin: 0 0 0.55em;
	padding: 0.5em 0.6em;
	border: 1px solid var(--color-box-border-light);
	border-radius: var(--radius-frame-border);
	background-color: rgba(255, 255, 255, 0.7);
	line-height: 1.35;
}

.sidebar-link-card:last-child {
	margin-bottom: 0;
}

.sidebar-link-card:hover {
	background-color: #ffffff;
}

/* Beschreibung unter einem Kartenlink */
.sidebar-link-description {
	display: block;
	margin-top: 0.25em;
	font-size: 0.85em;
	line-height: 1.35;
	color: var(--color-text-muted);
}

/* Buttons */
.sidebar-button {
	display: block;
	margin: 0.5em 0;
	padding: 0.55em 0.7em;
	border: 1px solid var(--color-border-medium);
	border-radius: var(--radius-frame-border);
	background-color: var(--color-bg-light);
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.3;
}

.sidebar-button:hover {
	background-color: var(--color-bg-subtle);
}

/* Primärer Button: bewusst eine der wenigen Akzentvarianten */
.sidebar-button-primary {
	background-color: var(--color-article-nav-primary);
	border-color: var(--color-article-nav-primary);
	color: #ffffff;
}

.sidebar-button-primary:hover {
	background-color: var(--color-article-nav-accent);
	border-color: var(--color-article-nav-accent);
	color: #ffffff;
}

/* Lesepfad: eigenständige Artikel in einer Reihenfolge */
.sidebar-reading-path {
	background-color: var(--color-bg-box, #f8f9fa);
	padding: 12px;
	border-radius: var(--radius-frame-border);
}

.sidebar-reading-path h3 {
	margin-top: 0;
	margin-bottom: 10px;
}

.sidebar-intro {
	font-size: 0.9rem;
	margin-bottom: 16px;
}

.sidebar-reading-item {
	padding: 10px 0;
	border-bottom: 1px solid var(--color-border-medium);
}

.sidebar-reading-item:last-child {
	border-bottom: none;
}

.sidebar-reading-item a {
	display: block;
	font-weight: 600;
	text-decoration: none;
	margin-bottom: 4px;
}

.sidebar-reading-item p {
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--color-text-muted);
	margin: 0;
}

.sidebar-reading-item.is-current {
	background-color: var(--color-bg-light);
	padding: 10px;
	border-radius: var(--radius-frame-border);
}

ol.sidebar-reading-path > li {
	list-style: none;
	position: relative;
	margin: 0 0 0.65em;
	padding-left: 2em;
	counter-increment: reading-step;
	line-height: 1.4;
}

ol.sidebar-reading-path > li::before {
	content: counter(reading-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background-color: var(--color-bg-light);
	border: 1px solid var(--color-border-medium);
	text-align: center;
	line-height: 1.4em;
	font-size: 0.85em;
	font-weight: 600;
}

/* Aktueller Artikel im Lesepfad */
.sidebar-reading-path .is-current {
	font-weight: 700;
}

.sidebar-reading-path .is-current::before {
	background-color: var(--color-article-nav-primary);
	border-color: var(--color-article-nav-primary);
	color: #ffffff;
}

/* Kleine Zusatzinformationen */
.sidebar-meta {
	display: block;
	margin-top: 0.25em;
	font-size: 0.9em;
	color: var(--color-text-muted);
	line-height: 1.3;
}

/* Besondere Modulvarianten: sparsam einsetzen */
/* Redaktionell hervorgehobenes Modul */
.sidebar-module-featured {
	background-color: var(--color-bg-light);
	border-left: 1px solid var(--color-box-callout-border);
}

/* Inhaltlicher Hinweis / besondere Aufmerksamkeit */
.sidebar-module-highlight {
	background-color: var(--color-box-info-bg);
	border-color: var(--color-box-info-border-soft);
}

/* Letzte Elemente ohne unnötigen Außenabstand */
.sidebar-module p:last-child,
.sidebar-module ul:last-child,
.sidebar-module ol:last-child {
	margin-bottom: 0;
}