/*
Theme Name:   KALINA Digest
Theme URI:    https://kalina.si
Description:  Child-Theme für das KI-Digest-Blog im KALINA-CI. Papiergrund, Tinte,
              Signalrot nur als Akzent. Überschreibt das tagDiv-Demo vollständig.
Author:       Kalina
Author URI:   https://kalina.si
Template:     Newspaper
Version:      1.5.0
License:      internal
Text Domain:  kalina-digest
*/

/* ============================================================
   KALINA CI — Tokens (Quelle: mm/kalina-ci, tokens.json)
   ============================================================ */
:root {
	--ink: #0B0F14;
	--bone: #F5F5EF;
	--red: #C1121F;
	--red-dunkel: #A50F1A;
	--steel: #3A4250;
	--muted: #8A94A2;

	--sans: "Helvetica Neue", Helvetica, Arial, "DejaVu Sans", sans-serif;
	--mono: "DejaVu Sans Mono", "SF Mono", Menlo, Consolas, monospace;

	--hairline: rgba(58, 66, 80, 0.18);
	--hairline-stark: rgba(58, 66, 80, 0.32);
	--breite: 1240px;
}

/* ============================================================
   Grundfläche: Papier statt Schwarz
   ============================================================ */
body,
body.td-animation-stack-type0-2,
.td-theme-wrap,
#td-outer-wrap {
	background-color: var(--bone) !important;
	color: var(--ink);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
}

/* tagDiv setzt viele Farben inline über .td-element-style — das Papier gewinnt. */
.td-element-style {
	background-color: transparent !important;
	opacity: 0 !important;
}

a {
	color: var(--ink);
	text-decoration: none;
	transition: color 0.14s ease;
}
a:hover,
a:focus {
	color: var(--red);
}

/* ============================================================
   Kopf: Tinte, Wortmarke, rote Signaturlinie
   ============================================================ */
.kg-header {
	background: var(--ink);
	color: var(--bone);
	border-bottom: 2px solid var(--red);
}

.kg-header-inner {
	max-width: var(--breite);
	margin: 0 auto;
	padding: 18px 24px 0;
}

.kg-brandrow {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 16px;
}

.kg-brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.kg-brand img {
	height: 26px;
	width: auto;
	display: block;
}

.kg-brand-trenner {
	width: 1px;
	height: 22px;
	background: rgba(245, 245, 239, 0.28);
}

.kg-brand-produkt {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}

.kg-datum {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Navigation: eine Zeile, scrollbar statt Umbruch */
.kg-navbar {
	border-top: 1px solid rgba(245, 245, 239, 0.12);
	display: flex;
	align-items: center;
	gap: 0;
}

.kg-nav {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	overflow: visible;
	padding: 0 0 0;
	margin: 0;
	list-style: none;
	flex: 1 1 auto;
	min-width: 0;
}

.kg-nav::-webkit-scrollbar {
	height: 3px;
}
.kg-nav::-webkit-scrollbar-thumb {
	background: var(--steel);
}

.kg-nav li {
	flex: 0 0 auto;
}

.kg-nav a {
	display: block;
	padding: 13px 0;
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(245, 245, 239, 0.82);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.kg-nav a:hover,
.kg-nav .current-menu-item > a {
	color: var(--bone);
	border-bottom-color: var(--red);
}

/* Suche im Kopf */
.kg-suche {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 20px;
	border-left: 1px solid rgba(245, 245, 239, 0.12);
}

.kg-suche input[type="search"] {
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(245, 245, 239, 0.25);
	color: var(--bone);
	font-family: var(--mono);
	font-size: 12px;
	padding: 6px 4px;
	width: 130px;
	outline: none;
}
.kg-suche input[type="search"]::placeholder {
	color: var(--muted);
}
.kg-suche input[type="search"]:focus {
	border-bottom-color: var(--red);
}
.kg-suche button {
	background: transparent;
	border: 0;
	color: var(--muted);
	font-family: var(--mono);
	font-size: 12px;
	cursor: pointer;
	padding: 6px 8px;
}
.kg-suche button:hover {
	color: var(--red);
}

/* ============================================================
   Inhalt
   ============================================================ */
.kg-main {
	max-width: var(--breite);
	margin: 0 auto;
	padding: 34px 24px 60px;
}

.td-container,
.td-pb-row,
.vc_row {
	max-width: 100%;
}

/* Ressort-Titel (tagDiv Block Titles) */
.td-block-title-wrap .td-block-title,
.td-block-title-wrap .td-block-title a,
.td_block_title {
	font-family: var(--sans) !important;
	font-weight: 800 !important;
	font-size: 13px !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--ink) !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 0 10px !important;
	border-bottom: 2px solid var(--ink) !important;
	margin-bottom: 20px !important;
}

.td-block-title span,
.td-block-title .td-block-after,
.td-block-title .td-block-speech {
	display: none !important;
}

/* Artikel-Titel */
.entry-title,
.entry-title a,
.td-module-title a,
.td_module_wrap h3 a {
	font-family: var(--sans) !important;
	font-weight: 700 !important;
	color: var(--ink) !important;
	letter-spacing: -0.015em !important;
	text-decoration: none !important;
}
.entry-title a:hover,
.td-module-title a:hover {
	color: var(--red) !important;
}

/* Kategorie-Label: Signalrot, Mono, keine Fläche */
.td-post-category,
.td-module-meta-info .td-post-category,
.td-category {
	background: transparent !important;
	color: var(--red) !important;
	font-family: var(--mono) !important;
	font-size: 10.5px !important;
	font-weight: 400 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	padding: 0 !important;
	line-height: 1.6 !important;
}
.td-post-category:hover {
	color: var(--red-dunkel) !important;
	background: transparent !important;
}

/* Meta-Zeile */
.td-module-meta-info,
.td-module-meta-info span,
.td-post-date,
.td-module-date,
.td-author-name,
.td-post-author-name {
	font-family: var(--mono) !important;
	font-size: 10.5px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--muted) !important;
}

/* Trennlinien statt Schatten */
.td_module_wrap,
.td-module-container {
	border: 0 !important;
	box-shadow: none !important;
}
.td_module_flex .td-module-container {
	border-bottom: 1px solid var(--hairline) !important;
	padding-bottom: 18px !important;
}

/* Bilder: harte Kante, kein Radius, kein Zoom-Effekt */
.td-module-thumb,
.td-image-container,
.entry-thumb,
.td-thumb-css {
	border-radius: 0 !important;
	box-shadow: none !important;
}
.td-module-thumb img,
.entry-thumb {
	border: 1px solid var(--hairline) !important;
	filter: none !important;
}
.td-module-thumb a:after {
	display: none !important;
}

/* Excerpt */
.td-excerpt,
.td_module_wrap .td-excerpt {
	font-family: var(--sans) !important;
	font-size: 14.5px !important;
	line-height: 1.62 !important;
	color: var(--steel) !important;
}

/* ============================================================
   Einzelner Beitrag
   ============================================================ */
.td-post-header .entry-title,
.td-post-title {
	font-size: clamp(28px, 4vw, 46px) !important;
	line-height: 1.12 !important;
	font-weight: 800 !important;
	letter-spacing: -0.028em !important;
	color: var(--ink) !important;
}

.td-post-content,
.td-post-content p,
.wp-block-paragraph {
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.72;
	color: #16202b;
}

.td-post-content h2,
.td-post-content h3 {
	font-family: var(--sans);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
	border-bottom: 1px solid var(--hairline);
	padding-bottom: 8px;
}

.td-post-content a {
	color: var(--red-dunkel);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.td-post-content a:hover {
	color: var(--red);
	text-decoration-thickness: 2px;
}

.td-post-content blockquote {
	border-left: 3px solid var(--red);
	background: rgba(58, 66, 80, 0.05);
	padding: 18px 22px;
	margin: 26px 0;
	font-style: normal;
	color: var(--steel);
}

.td-post-content code,
.td-post-content pre {
	font-family: var(--mono);
	font-size: 13.5px;
}
.td-post-content pre {
	background: var(--ink);
	color: var(--bone);
	padding: 18px;
	overflow-x: auto;
	border-radius: 0;
}

.td-post-content img {
	border: 1px solid var(--hairline);
	border-radius: 0;
}

/* ============================================================
   Fuß: Tinte, drei Spalten, Rechtliches
   ============================================================ */
.kg-footer {
	background: var(--ink);
	color: rgba(245, 245, 239, 0.78);
	border-top: 2px solid var(--red);
	margin-top: 40px;
}

.kg-footer-inner {
	max-width: var(--breite);
	margin: 0 auto;
	padding: 46px 24px 30px;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 40px;
}

.kg-footer h4 {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 14px;
	font-weight: 400;
}

.kg-footer p {
	font-size: 14px;
	line-height: 1.65;
	margin: 0 0 14px;
	color: rgba(245, 245, 239, 0.7);
}

.kg-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kg-footer li {
	margin-bottom: 9px;
}

.kg-footer a {
	color: rgba(245, 245, 239, 0.82);
	font-size: 13.5px;
	border-bottom: 1px solid transparent;
}
.kg-footer a:hover {
	color: var(--bone);
	border-bottom-color: var(--red);
}

.kg-footer-brand img {
	height: 22px;
	width: auto;
	margin-bottom: 16px;
	display: block;
}

.kg-footer-unten {
	max-width: var(--breite);
	margin: 0 auto;
	padding: 16px 24px 26px;
	border-top: 1px solid rgba(245, 245, 239, 0.12);
	display: flex;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.kg-footer-unten a {
	color: var(--muted);
	font-size: 11px;
	font-family: var(--mono);
}
.kg-footer-unten a:hover {
	color: var(--red);
}

/* ============================================================
   Seiten (Impressum, Datenschutz, Kontakt)
   ============================================================ */
.kg-seite {
	max-width: 760px;
	margin: 0 auto;
	padding: 10px 0 40px;
}

.kg-seite h1 {
	font-family: var(--sans);
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0 0 8px;
	color: var(--ink);
}

.kg-seite .kg-unterzeile {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 30px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--ink);
}

.kg-seite h2 {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 34px 0 10px;
	color: var(--ink);
}

.kg-seite p,
.kg-seite li {
	font-size: 15.5px;
	line-height: 1.7;
	color: #16202b;
}

.kg-seite a {
	color: var(--red-dunkel);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kg-seite address {
	font-style: normal;
	font-size: 15.5px;
	line-height: 1.7;
	border-left: 3px solid var(--red);
	padding-left: 16px;
	margin: 14px 0 22px;
}

/* ============================================================
   Aufräumen: Demo-Reste, Schatten, Radien, Hover-Spielereien
   ============================================================ */
.td-sub-footer-container,
.td-footer-page,
.td-header-wrap,
#td-mobile-nav,
.td-menu-background,
.td-search-background,
.td-search-wrap-mob {
	display: none !important;
}

.td-icon-vertical-line,
.tdm-social-item-wrap {
	display: none !important;
}

.td-post-sharing,
.td-social-share {
	filter: grayscale(1);
}

::-moz-selection {
	background: var(--red);
	color: var(--bone);
}
::selection {
	background: var(--red);
	color: var(--bone);
}

/* ============================================================
   Responsiv
   ============================================================ */
@media (max-width: 900px) {
	.kg-footer-inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.kg-main {
		padding: 22px 16px 40px;
	}
	.kg-datum {
		display: none;
	}
	.kg-suche {
		padding-left: 12px;
	}
	.kg-suche input[type="search"] {
		width: 90px;
	}
}

@media (max-width: 560px) {
	.kg-header-inner {
		padding: 14px 16px 0;
	}
	.kg-nav {
		gap: 18px;
	}
	.kg-brand-produkt {
		display: none;
	}
	.kg-brand-trenner {
		display: none;
	}
}

/* ============================================================
   Startseite: Aufmacher, Raster, Ressorts
   ============================================================ */
.kg-hero {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 40px;
	align-items: center;
	padding-bottom: 42px;
	margin-bottom: 38px;
	border-bottom: 2px solid var(--ink);
}

.kg-hero-text {
	min-width: 0;
}

.kg-hero-ressort,
.kg-karte-ressort {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--red);
	display: inline-block;
	margin-bottom: 12px;
}
.kg-hero-ressort:hover,
.kg-karte-ressort:hover {
	color: var(--red-dunkel);
}

.kg-hero-titel {
	font-family: var(--sans);
	font-size: clamp(30px, 4.4vw, 52px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
	margin: 0 0 18px;
	color: var(--ink);
}
.kg-hero-titel a {
	color: inherit;
}
.kg-hero-titel a:hover {
	color: var(--red);
}

.kg-hero-textauszug {
	font-size: 16.5px;
	line-height: 1.68;
	color: var(--steel);
	margin: 0 0 22px;
	max-width: 46ch;
}

.kg-hero-meta {
	display: flex;
	align-items: center;
	gap: 22px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.kg-weiter {
	color: var(--red);
	border-bottom: 1px solid var(--red);
	padding-bottom: 2px;
}
.kg-weiter:hover {
	color: var(--red-dunkel);
	border-bottom-color: var(--red-dunkel);
}

.kg-hero-bild img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--hairline);
}

/* Rubrik-Überschrift */
.kg-rubrik {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 2px solid var(--ink);
	padding-bottom: 10px;
	margin: 0 0 24px;
}

.kg-raster {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px 30px;
	margin-bottom: 52px;
}

.kg-raster-sechs {
	grid-template-columns: repeat(6, 1fr);
	gap: 24px 20px;
}

.kg-karte {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.kg-karte-bild {
	display: block;
	margin-bottom: 14px;
}
.kg-karte-bild img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--hairline);
	transition: opacity 0.15s ease;
}
.kg-karte-bild:hover img {
	opacity: 0.86;
}

.kg-karte-titel {
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.015em;
	margin: 0 0 10px;
	color: var(--ink);
}
.kg-karte-titel a {
	color: inherit;
}
.kg-karte-titel a:hover {
	color: var(--red);
}

.kg-karte-meta {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: auto;
}

.kg-karte-klein .kg-karte-titel {
	font-size: 14px;
	line-height: 1.3;
}

@media (max-width: 1024px) {
	.kg-raster-sechs {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.kg-hero {
		grid-template-columns: 1fr;
		gap: 22px;
		padding-bottom: 30px;
	}
	.kg-hero-bild {
		order: -1;
	}
	.kg-raster,
	.kg-raster-sechs {
		grid-template-columns: repeat(2, 1fr);
		gap: 26px 20px;
	}
}

@media (max-width: 560px) {
	.kg-raster,
	.kg-raster-sechs {
		grid-template-columns: 1fr;
	}
	.kg-hero-textauszug {
		font-size: 15.5px;
	}
}

/* ============================================================
   Mobil zuerst — Fassung 1.1
   Kein horizontaler Überlauf, keine Scrollbalken in der Leiste,
   Ressorts als aufklappbares Raster, Tags im Theme.
   ============================================================ */

/* --- 1. Grundschutz gegen Querscrollen ---------------------- */
html {
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
}
body.kg-body {
	overflow-x: clip;
	max-width: 100%;
}
.kg-main,
.kg-header,
.kg-footer,
.kg-raster,
.kg-ressort-raster {
	min-width: 0;
	max-width: 100%;
}
.kg-main img,
.kg-main svg,
.kg-main video,
.kg-main iframe {
	max-width: 100%;
	height: auto;
}
.kg-artikel-titel,
.kg-karte-titel,
.kg-ressort-karte-name,
.kg-hero-titel {
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* --- 2. Ressortleiste --------------------------------------- */
.kg-navbar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	min-width: 0;
}

/* Mobil: die lange Leiste weicht dem Aufklapper. */
.kg-nav {
	display: none;
}
.kg-nav-mobil {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
}
.kg-nav-mobil > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	cursor: pointer;
	list-style: none;
	font-family: var(--mono, monospace);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink, #0B0F14);
	border: 1px solid var(--line, rgba(11, 15, 20, .18));
	background: transparent;
	user-select: none;
}
.kg-nav-mobil > summary::-webkit-details-marker {
	display: none;
}
.kg-nav-mobil > summary::after {
	content: "▾";
	margin-left: auto;
	font-size: 11px;
	color: var(--muted, #8A94A2);
}
.kg-nav-mobil[open] > summary::after {
	content: "▴";
}
.kg-nav-mobil-anzahl {
	font-size: 11px;
	color: var(--bone, #F5F5EF);
	background: var(--red, #C1121F);
	padding: 1px 6px;
	line-height: 1.6;
}
.kg-nav-mobil-raster {
	position: static;
	margin: 8px 0 0;
	padding: 10px;
	list-style: none;
	background: var(--bone, #F5F5EF);
	border: 1px solid var(--line, rgba(11, 15, 20, .18));
	box-shadow: 0 18px 40px rgba(11, 15, 20, .14);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2px;
	max-height: none;
	overflow: visible;
}
.kg-nav-mobil-raster li {
	min-width: 0;
}
.kg-nav-mobil-raster a {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 9px 8px;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--ink, #0B0F14);
	text-decoration: none;
	border-bottom: 1px solid rgba(11, 15, 20, .07);
	min-width: 0;
}
.kg-nr-name {
	min-width: 0;
	overflow-wrap: anywhere;
}
.kg-nav-mobil-raster .kg-nr-zahl {
	margin-left: auto;
	font-family: var(--mono, monospace);
	font-size: 11.5px;
	color: var(--muted, #8A94A2);
}
.kg-nr-alle a {
	color: var(--red, #C1121F);
	font-family: var(--mono, monospace);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-bottom: 0;
}
.kg-nav-alle a {
	color: var(--red, #C1121F);
}

/* --- 3. Suche ----------------------------------------------- */
.kg-suche {
	display: flex;
	align-items: center;
	gap: 0;
	min-width: 0;
	flex: 1 1 160px;
	background: #0B0F14;
	border: 1px solid rgba(11, 15, 20, .35);
}
/* Weiss auf Schwarz — vorher stand hier var(--ink): dunkle Schrift im dunklen
   Kopfband, beim Tippen war der Text praktisch unsichtbar. Der Platzhalter
   blieb grau, deshalb fiel es erst bei der Eingabe auf. */
.kg-suche input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	border: 0;
	background: #0B0F14;
	padding: 9px 10px;
	font-size: 15px; /* verhindert Zoom auf iOS */
	color: #F5F5EF;
	-webkit-text-fill-color: #F5F5EF; /* Safari setzt sonst eigenes color */
	caret-color: #F5F5EF;
	font-family: inherit;
	outline: none;
	border-radius: 0;
}
.kg-suche input[type="search"]::placeholder {
	color: rgba(245, 245, 239, .55);
	opacity: 1; /* Firefox blendet Platzhalter sonst weiter ab */
}
.kg-suche input[type="search"]::-webkit-search-cancel-button {
	display: none;
}
.kg-suche:focus-within {
	border-color: var(--red, #C1121F);
}
.kg-suche button {
	border: 0;
	background: transparent;
	padding: 8px 10px;
	cursor: pointer;
	font-size: 16px;
	color: #F5F5EF;
}
.kg-suche button:hover {
	color: var(--red, #C1121F);
}
.kg-suche-gross {
	flex: 1 1 100%;
	max-width: 420px;
	margin: 14px 0 0;
}

/* --- 4. Raster: eine Spalte zuerst -------------------------- */
.kg-raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin: 0 0 32px;
}
.kg-karte {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: transparent;
	border: 0;
	padding: 0;
}
.kg-karte-bild {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin: 0 0 10px;
	background: rgba(11, 15, 20, .05);
}
.kg-karte-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kg-karte-ressort {
	font-family: var(--mono, monospace);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--red, #C1121F);
	text-decoration: none;
	margin: 0 0 4px;
}
.kg-karte-titel {
	font-size: clamp(17px, 4.4vw, 21px);
	line-height: 1.24;
	margin: 0 0 6px;
	font-weight: 600;
	letter-spacing: -.01em;
}
.kg-karte-titel a {
	color: var(--ink, #0B0F14);
	text-decoration: none;
}
.kg-karte-titel a:hover {
	color: var(--red, #C1121F);
}
.kg-karte-meta {
	font-family: var(--mono, monospace);
	font-size: 11.5px;
	color: var(--muted, #8A94A2);
	margin-top: auto;
}
.kg-karte-text {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--steel, #3A4250);
	margin: 0 0 8px;
}
.kg-karte-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 8px;
}

/* --- 5. Aufmacher ------------------------------------------- */
.kg-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding: 18px 0 26px;
	border-bottom: 1px solid var(--line, rgba(11, 15, 20, .14));
	margin: 0 0 26px;
}
.kg-hero-titel {
	font-size: clamp(24px, 6.4vw, 40px);
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 6px 0 10px;
}
.kg-hero-textauszug {
	font-size: clamp(15px, 3.8vw, 17px);
	line-height: 1.55;
	color: var(--steel, #3A4250);
	margin: 0 0 14px;
	max-width: 60ch;
}
.kg-hero-bild {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	order: -1;
}
.kg-hero-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- 6. Artikel --------------------------------------------- */
.kg-artikel {
	max-width: 760px;
	margin: 0 auto;
	padding: 20px 0 10px;
}
.kg-artikel-kopf {
	margin: 0 0 22px;
}
.kg-artikel-kopf.kg-mit-banner {
	padding: 0;
}
.kg-artikel-banner {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: 0 0 18px;
	background: var(--ink, #0B0F14);
}
.kg-artikel-ressort {
	font-family: var(--mono, monospace);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--red, #C1121F);
	text-decoration: none;
}
.kg-artikel-titel {
	font-size: clamp(25px, 6.2vw, 41px);
	line-height: 1.12;
	letter-spacing: -.022em;
	margin: 8px 0 12px;
	font-weight: 650;
}
.kg-artikel-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: var(--mono, monospace);
	font-size: 12px;
	color: var(--muted, #8A94A2);
	padding: 0 0 14px;
	border-bottom: 1px solid var(--line, rgba(11, 15, 20, .14));
}
.kg-meta-trenner {
	opacity: .5;
}
.kg-artikel-koerper {
	font-size: clamp(16px, 4.2vw, 18px);
	line-height: 1.68;
	color: var(--ink, #0B0F14);
}
.kg-artikel-koerper p {
	margin: 0 0 1.05em;
}
.kg-artikel-koerper h2 {
	font-size: clamp(20px, 5vw, 25px);
	line-height: 1.25;
	margin: 1.6em 0 .5em;
}
.kg-artikel-koerper h3 {
	font-size: clamp(18px, 4.4vw, 21px);
	margin: 1.4em 0 .4em;
}
.kg-artikel-koerper a {
	color: var(--red, #C1121F);
	text-underline-offset: 2px;
}
.kg-artikel-koerper ul,
.kg-artikel-koerper ol {
	padding-left: 1.25em;
	margin: 0 0 1.05em;
}
.kg-artikel-koerper li {
	margin: 0 0 .45em;
}
/* Kein Querscrollen im Text: Tabellen und Code passen sich an. */
.kg-artikel-koerper table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 14px;
	margin: 0 0 1.2em;
}
.kg-artikel-koerper table th,
.kg-artikel-koerper table td {
	padding: 7px 9px;
	border-bottom: 1px solid var(--line, rgba(11, 15, 20, .14));
	word-break: break-word;
	overflow-wrap: anywhere;
	text-align: left;
}
.kg-artikel-koerper pre {
	white-space: pre-wrap;
	word-break: break-word;
	overflow: visible;
}
.kg-artikel-koerper code {
	word-break: break-word;
}
.kg-artikel-koerper figure {
	margin: 0 0 1.2em;
	max-width: 100%;
}

/* --- 7. Schlagwörter (im Theme, nicht im Text) -------------- */
.kg-artikel-tags {
	margin: 30px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--line, rgba(11, 15, 20, .14));
}
.kg-tags-titel {
	font-family: var(--mono, monospace);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted, #8A94A2);
	margin: 0 0 10px;
	font-weight: 500;
}
.kg-tags-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.kg-tag {
	display: inline-block;
	font-family: var(--mono, monospace);
	font-size: 12px;
	line-height: 1;
	padding: 7px 11px;
	border: 1px solid var(--line, rgba(11, 15, 20, .2));
	color: var(--steel, #3A4250);
	text-decoration: none;
	background: transparent;
	transition: background .12s linear, color .12s linear, border-color .12s linear;
}
.kg-tag:hover,
.kg-tag:focus-visible {
	background: var(--ink, #0B0F14);
	border-color: var(--ink, #0B0F14);
	color: var(--bone, #F5F5EF);
}
.kg-artikel-tags .kg-tag {
	font-size: 12.5px;
	padding: 9px 13px;
}

/* --- 8. Blättern -------------------------------------------- */
.kg-artikel-blatt {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 30px 0 10px;
}
.kg-blatt {
	display: block;
	padding: 12px 14px;
	border: 1px solid var(--line, rgba(11, 15, 20, .16));
	text-decoration: none;
	min-width: 0;
}
.kg-blatt-label {
	display: block;
	font-family: var(--mono, monospace);
	font-size: 11px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--muted, #8A94A2);
	margin: 0 0 4px;
}
.kg-blatt-titel {
	display: block;
	font-size: 15px;
	line-height: 1.3;
	color: var(--ink, #0B0F14);
}
.kg-blatt:hover {
	border-color: var(--ink, #0B0F14);
}

/* --- 9. Kategorie-Kopf -------------------------------------- */
.kg-ressort-kopf {
	margin: 0 0 24px;
	padding: 18px 0 0;
}
.kg-ressort-banner {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: 0 0 16px;
	background: var(--ink, #0B0F14);
}
.kg-ressort-marke {
	font-family: var(--mono, monospace);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--red, #C1121F);
}
.kg-ressort-titel {
	font-size: clamp(26px, 7vw, 44px);
	line-height: 1.08;
	letter-spacing: -.025em;
	margin: 6px 0 8px;
}
.kg-ressort-beschreibung {
	font-size: 16px;
	line-height: 1.55;
	color: var(--steel, #3A4250);
	max-width: 62ch;
	margin: 0 0 8px;
}
.kg-ressort-zahl {
	font-family: var(--mono, monospace);
	font-size: 12px;
	color: var(--muted, #8A94A2);
	margin: 0;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--line, rgba(11, 15, 20, .14));
}

/* --- 10. Ressort-Übersicht ---------------------------------- */
.kg-ressort-raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0 0 40px;
}
.kg-ressort-karte {
	display: block;
	position: relative;
	text-decoration: none;
	color: var(--bone, #F5F5EF);
	overflow: hidden;
	background: var(--ink, #0B0F14);
	min-width: 0;
}
.kg-ressort-karte-bild {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	opacity: .88;
	transition: opacity .15s linear, transform .25s ease;
}
.kg-ressort-karte:hover .kg-ressort-karte-bild {
	opacity: 1;
	transform: scale(1.02);
}
.kg-ressort-karte-text {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 12px 12px;
}
.kg-ressort-karte-name {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
}
.kg-ressort-karte-zahl {
	margin-left: auto;
	font-family: var(--mono, monospace);
	font-size: 11px;
	color: var(--muted, #8A94A2);
	white-space: nowrap;
}

/* --- 11. Seitenkopf, Paginierung, Leerzustand ---------------- */
.kg-seite-kopf {
	margin: 22px 0 23px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--line, rgba(11, 15, 20, .14));
}
.kg-seite-titel {
	font-size: clamp(26px, 7vw, 46px);
	line-height: 1.06;
	letter-spacing: -.03em;
	margin: 0 0 6px;
}
.kg-seite-unter {
	font-family: var(--mono, monospace);
	font-size: 12.5px;
	color: var(--muted, #8A94A2);
	margin: 0;
}
.kg-seiten {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 0 0 40px;
	font-family: var(--mono, monospace);
	font-size: 12.5px;
}
.kg-seiten .page-numbers {
	display: inline-block;
	padding: 7px 11px;
	border: 1px solid var(--line, rgba(11, 15, 20, .16));
	text-decoration: none;
	color: var(--steel, #3A4250);
}
.kg-seiten .page-numbers.current {
	background: var(--ink, #0B0F14);
	border-color: var(--ink, #0B0F14);
	color: var(--bone, #F5F5EF);
}
.kg-leer {
	font-size: 16px;
	color: var(--steel, #3A4250);
	padding: 30px 0 50px;
}
.kg-404 {
	padding: 6px 0 60px;
}

/* --- 12. Größere Geräte ------------------------------------- */
@media (min-width: 560px) {
	.kg-nav-mobil-raster {
		grid-template-columns: 1fr 1fr;
	}
	.kg-raster {
		grid-template-columns: 1fr 1fr;
	}
	.kg-ressort-raster {
		grid-template-columns: 1fr 1fr;
	}
	.kg-artikel-blatt {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 900px) {
	/* Ab hier die echte Leiste: umbrechend statt scrollend. */
	.kg-nav-mobil {
		display: none;
	}
	.kg-nav {
		display: flex;
	}
	.kg-raster {
		grid-template-columns: repeat(3, 1fr);
		gap: 22px;
	}
	.kg-raster-sechs {
		grid-template-columns: repeat(3, 1fr);
	}
	.kg-ressort-raster {
		grid-template-columns: repeat(3, 1fr);
		gap: 18px;
	}
	.kg-hero {
		grid-template-columns: 1.05fr .95fr;
		gap: 30px;
		align-items: center;
		padding: 26px 0 34px;
	}
	.kg-hero-bild {
		order: 0;
	}
	.kg-artikel {
		padding-top: 30px;
	}
}

@media (min-width: 1240px) {
	.kg-raster-sechs {
		grid-template-columns: repeat(6, 1fr);
	}
	.kg-ressort-raster {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ============================================================
   KI-Zeitstrahl (Ressortseiten)
   Zwölf Epochen als Leiste; die Epoche des Ressorts steht in Rot.
   Unter 900 px: Segmentleiste plus zweispaltige Legende — kein
   horizontaler Scrollbalken, alle Epochen bleiben lesbar.
   ============================================================ */
.kg-zeitstrahl-band {
	margin: 0 0 30px;
	padding: 18px 0 20px;
	border-top: 1px solid var(--hairline-stark);
	border-bottom: 1px solid var(--hairline);
}

.kg-zeitstrahl-kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.kg-zeitstrahl-titel {
	margin: 0;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
}

.kg-zeitstrahl-titel::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 9px;
	background: var(--red);
	vertical-align: 1px;
}

.kg-zeitstrahl-zaehler {
	margin: 0;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.kg-zeitstrahl-schwerpunkt {
	display: none;
}

.kg-zeitstrahl {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.kg-epoche {
	position: relative;
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0 3px;
	text-align: center;
}

.kg-epoche::before {
	content: "";
	position: absolute;
	top: 28px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--hairline-stark);
}

.kg-epoche:first-child::before {
	left: 50%;
}

.kg-epoche:last-child::before {
	right: 50%;
}

.kg-epoche-jahr {
	display: block;
	height: 20px;
	line-height: 20px;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: -0.01em;
	color: var(--muted);
	white-space: nowrap;
}

.kg-epoche-punkt {
	position: relative;
	z-index: 1;
	display: block;
	width: 7px;
	height: 7px;
	margin: 5px auto 0;
	border: 1px solid var(--hairline-stark);
	border-radius: 50%;
	background: var(--bone);
	box-sizing: border-box;
}

.kg-epoche-name {
	display: block;
	margin-top: 8px;
	font-size: 10px;
	line-height: 1.25;
	color: var(--muted);
	overflow-wrap: anywhere;
	hyphens: auto;
}

.kg-epoche.is-marke .kg-epoche-punkt {
	border-color: var(--steel);
	background: var(--steel);
}

.kg-epoche.is-marke .kg-epoche-name {
	color: var(--steel);
}

.kg-epoche.is-aktiv .kg-epoche-jahr {
	color: var(--red);
	font-weight: 700;
}

.kg-epoche.is-aktiv .kg-epoche-punkt {
	width: 11px;
	height: 11px;
	margin-top: 3px;
	border-color: var(--red);
	background: var(--red);
	box-shadow: 0 0 0 4px rgba(193, 18, 31, 0.14);
}

.kg-epoche.is-aktiv .kg-epoche-name {
	color: var(--ink);
	font-weight: 700;
}

.kg-zeitstrahl-legende {
	display: none;
}

.kg-zeitstrahl-satz {
	margin: 18px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--hairline);
	max-width: 96ch;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--steel);
}

.kg-zeitstrahl-quelle {
	margin: 6px 0 0;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kg-zeitstrahl-quelle a {
	color: var(--muted);
	text-decoration: none;
	border-bottom: 1px solid var(--hairline-stark);
	padding-bottom: 1px;
}

.kg-zeitstrahl-quelle a:hover,
.kg-zeitstrahl-quelle a:focus {
	color: var(--red);
	border-bottom-color: var(--red);
}

.kg-zeitstrahl-marke {
	margin-right: 9px;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--red);
	white-space: nowrap;
}

@media (max-width: 900px) {
	.kg-zeitstrahl-schwerpunkt {
		display: flex;
		align-items: baseline;
		gap: 10px;
		flex-wrap: wrap;
		margin: 12px 0 0;
	}

	.kg-zs-name {
		font-size: 15px;
		font-weight: 700;
		color: var(--ink);
	}

	.kg-zs-jahr {
		font-family: var(--mono);
		font-size: 10.5px;
		color: var(--red);
	}

	.kg-zeitstrahl {
		display: flex;
		gap: 3px;
		margin-top: 12px;
	}

	.kg-epoche {
		flex: 1 1 0;
		padding: 0;
	}

	.kg-epoche::before {
		display: none;
	}

	.kg-epoche-jahr,
	.kg-epoche-name {
		display: none;
	}

	.kg-epoche-punkt,
	.kg-epoche.is-aktiv .kg-epoche-punkt {
		width: 100%;
		height: 7px;
		margin: 0;
		border: 0;
		border-radius: 1px;
		background: var(--hairline-stark);
		box-shadow: none;
	}

	.kg-epoche.is-marke .kg-epoche-punkt {
		background: var(--steel);
	}

	.kg-epoche.is-aktiv .kg-epoche-punkt {
		background: var(--red);
	}

	.kg-zeitstrahl-legende {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1px 16px;
		list-style: none;
		margin: 12px 0 0;
		padding: 0;
	}

	.kg-zl-eintrag {
		display: flex;
		align-items: baseline;
		gap: 7px;
		min-width: 0;
		margin: 0;
		padding: 2px 0;
		font-size: 11.5px;
		line-height: 1.4;
		color: var(--muted);
	}

	.kg-zl-jahr {
		flex: 0 0 auto;
		font-family: var(--mono);
		font-size: 9px;
		line-height: 1.5;
		color: var(--muted);
		white-space: nowrap;
	}

	.kg-zl-name {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.kg-zl-eintrag.is-marke {
		color: var(--steel);
	}

	.kg-zl-eintrag.is-aktiv,
	.kg-zl-eintrag.is-aktiv .kg-zl-jahr {
		color: var(--red);
		font-weight: 700;
	}

	.kg-zeitstrahl-satz {
		margin-top: 14px;
		font-size: 13px;
	}
}

@media (max-width: 340px) {
	.kg-zeitstrahl-legende {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============================================================
   Erklärseite (Template KALINA Erklärung)
   Breiter als die Rechtstexte, damit die Zuordnungstabellen lesbar
   bleiben; Tabellen laufen im eigenen Container waagerecht, damit
   der Seitenkörper nicht überläuft.
   ============================================================ */
.kg-erklaerung {
	max-width: 980px;
	margin: 0 auto;
	padding: 10px 0 48px;
}

.kg-erklaerung h1 {
	font-family: var(--sans);
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0 0 8px;
	color: var(--ink);
}

.kg-erklaerung .kg-unterzeile {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 26px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--ink);
}

.kg-erk-beispiel {
	margin: 0 0 8px;
	padding: 14px 0 4px;
	background: rgba(58, 66, 80, 0.04);
}

.kg-erk-beispiel figcaption {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 0 0 6px;
	border-bottom: 1px solid var(--hairline);
}

.kg-erk-beispiel .kg-zeitstrahl-band {
	margin: 0;
	border-bottom: 0;
}

.kg-erk-koerper h2 {
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 40px 0 12px;
	padding-top: 14px;
	border-top: 1px solid var(--hairline-stark);
	color: var(--ink);
}

.kg-erk-koerper h3 {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 700;
	margin: 24px 0 8px;
	color: var(--ink);
}

.kg-erk-koerper p,
.kg-erk-koerper li {
	font-size: 15.5px;
	line-height: 1.72;
	color: #16202b;
}

.kg-erk-koerper p {
	margin: 0 0 14px;
}

.kg-erk-koerper ul,
.kg-erk-koerper ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.kg-erk-koerper li {
	margin: 0 0 8px;
}

.kg-erk-koerper a {
	color: var(--red-dunkel);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kg-erk-koerper code,
.kg-erk-koerper kbd {
	font-family: var(--mono);
	font-size: 13px;
	background: rgba(58, 66, 80, 0.08);
	padding: 1px 5px;
	border-radius: 2px;
}

.kg-erk-lead {
	font-size: 18px !important;
	line-height: 1.6 !important;
	margin: 18px 0 22px !important;
	color: var(--ink) !important;
	max-width: 760px;
}

.kg-erk-kasten {
	border-left: 3px solid var(--red);
	background: rgba(193, 18, 31, 0.05);
	padding: 14px 18px;
	margin: 0 0 20px;
}

.kg-erk-kasten p:last-child {
	margin-bottom: 0;
}

.kg-erk-tabelle {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 10px;
	border-top: 2px solid var(--ink);
}

.kg-erk-tabelle table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	line-height: 1.55;
	min-width: 640px;
}

.kg-erk-tabelle caption {
	caption-side: top;
	text-align: left;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.02em;
	color: var(--steel);
	padding: 0 0 8px;
}

.kg-erk-tabelle th,
.kg-erk-tabelle td {
	text-align: left;
	vertical-align: top;
	padding: 9px 10px;
	border-bottom: 1px solid var(--hairline);
	color: #16202b;
}

.kg-erk-tabelle thead th {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
	border-bottom: 1px solid var(--hairline-stark);
	white-space: nowrap;
}

.kg-erk-tabelle tbody th {
	font-weight: 700;
	color: var(--ink);
}

.kg-erk-slug {
	display: block;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 400;
	color: var(--steel);
	opacity: 0.8;
	letter-spacing: 0.02em;
	margin-top: 2px;
}

.kg-erk-jahr,
.kg-erk-nr {
	font-family: var(--mono);
	white-space: nowrap;
	color: var(--muted);
}

.kg-erk-nr {
	width: 34px;
}

.kg-erk-fokus {
	color: var(--red-dunkel);
	font-weight: 700;
	white-space: nowrap;
}

.kg-erk-idx {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 400;
	color: var(--muted);
}

.kg-erk-ms {
	font-size: 13px;
	color: #2a3542;
}

.kg-erk-toc {
	border: 1px solid var(--hairline-stark);
	padding: 14px 18px;
	margin: 0 0 24px;
}

.kg-erk-toc p {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 8px;
}

.kg-erk-toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 24px;
}

.kg-erk-toc li {
	margin: 0 0 5px;
	font-size: 14px;
	line-height: 1.5;
	break-inside: avoid;
}

.kg-erk-regeln {
	counter-reset: regel;
	list-style: none;
	padding-left: 0 !important;
}

.kg-erk-regeln li {
	counter-increment: regel;
	position: relative;
	padding-left: 42px;
	margin-bottom: 14px !important;
}

.kg-erk-regeln li::before {
	content: counter(regel, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 2px;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--red-dunkel);
}

.kg-erk-regeln b,
.kg-erk-koerper b {
	color: var(--ink);
}

.kg-erk-fuss {
	margin-top: 34px;
	padding-top: 12px;
	border-top: 1px solid var(--hairline);
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0.04em;
}

@media (max-width: 700px) {
	.kg-erklaerung {
		padding: 4px 0 32px;
	}
	.kg-erk-toc {
		grid-template-columns: minmax(0, 1fr);
	}
	.kg-erk-koerper p,
	.kg-erk-koerper li {
		font-size: 15px;
	}
	.kg-erk-tabelle table {
		font-size: 12.5px;
		min-width: 560px;
	}
	.kg-erk-tabelle th,
	.kg-erk-tabelle td {
		padding: 8px 8px;
	}
}

/* ============================================================
   Zeitstrahl: Epochen als Links, Suchmaske, Übersichtsseiten
   ============================================================ */
.kg-epoche-link,
.kg-zl-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.kg-epoche-link {
	height: 100%;
}

.kg-epoche-link:hover .kg-epoche-name,
.kg-epoche-link:focus-visible .kg-epoche-name,
.kg-zl-link:hover .kg-zl-name,
.kg-zl-link:focus-visible .kg-zl-name {
	color: var(--red);
}

.kg-epoche-link:focus-visible,
.kg-zl-link:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 3px;
}

.kg-epoche:hover .kg-epoche-punkt {
	border-color: var(--red);
}

/* Suchmaske im Band und auf den Übersichtsseiten */
.kg-zs-suche {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
}

.kg-zs-suche-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.kg-zs-suche-epoche,
.kg-zs-suche-feld {
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.3;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--hairline-stark);
	border-radius: 0;
	padding: 8px 10px;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.kg-zs-suche-epoche {
	max-width: 210px;
	padding-right: 26px;
	background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%), linear-gradient(135deg, var(--steel) 50%, transparent 50%);
	background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.kg-zs-suche-feld {
	flex: 1 1 220px;
	min-width: 160px;
}

.kg-zs-suche-feld::placeholder {
	color: var(--muted);
	opacity: 1;
}

.kg-zs-suche-epoche:focus,
.kg-zs-suche-feld:focus {
	outline: none;
	border-color: var(--red);
	box-shadow: 0 0 0 1px var(--red);
}

.kg-zs-suche-knopf {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bone);
	background: var(--ink);
	border: 1px solid var(--ink);
	padding: 9px 16px;
	cursor: pointer;
}

.kg-zs-suche-knopf:hover,
.kg-zs-suche-knopf:focus {
	background: var(--red);
	border-color: var(--red);
}

.kg-zs-suche-band {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--hairline);
}

/* Startseite /zeitstrahl/ */
.kg-zs-start,
.kg-zs-epoche {
	max-width: 1180px;
	margin: 0 auto;
}

.kg-zs-kopf {
	margin: 6px 0 30px;
	padding-bottom: 22px;
	border-bottom: 2px solid var(--ink);
}

.kg-zs-titel {
	font-family: var(--sans);
	font-size: clamp(28px, 4vw, 46px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin: 6px 0 14px;
}

.kg-zs-einleitung {
	max-width: 760px;
	font-size: 16.5px;
	line-height: 1.65;
}

.kg-zs-einleitung p {
	margin: 0 0 12px;
}

.kg-zs-liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.kg-zs-karte {
	margin: 0;
	border-top: 2px solid var(--ink);
	background: rgba(58, 66, 80, 0.035);
}

.kg-zs-karte-link {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		"nr jahr"
		"name name"
		"teaser teaser"
		"fuss fuss";
	align-items: baseline;
	gap: 4px 10px;
	height: 100%;
	padding: 14px 16px 12px;
	color: inherit;
	text-decoration: none;
}

.kg-zs-karte-nr {
	grid-area: nr;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0.08em;
}

.kg-zs-karte-jahr {
	grid-area: jahr;
	justify-self: end;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--steel);
}

.kg-zs-karte-name {
	grid-area: name;
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	margin-top: 2px;
}

.kg-zs-karte-teaser {
	grid-area: teaser;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--steel);
	margin-top: 2px;
}

.kg-zs-karte-fuss {
	grid-area: fuss;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--hairline);
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.kg-zs-pfeil {
	color: var(--red);
	font-size: 13px;
}

.kg-zs-karte-link:hover .kg-zs-karte-name,
.kg-zs-karte-link:focus-visible .kg-zs-karte-name {
	color: var(--red);
}

.kg-zs-karte-link:hover .kg-zs-pfeil {
	transform: translateX(3px);
	transition: transform 0.15s ease;
}

.kg-zs-hinweis {
	font-size: 14px;
	color: var(--muted);
}

.kg-zs-hinweis a {
	color: var(--red-dunkel);
}

/* Epochenseite */
.kg-zs-epoche-kopf {
	margin: 4px 0 22px;
	padding-bottom: 18px;
	border-bottom: 2px solid var(--ink);
}

.kg-zs-brotkrumen {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 8px;
}

.kg-zs-brotkrumen a {
	color: var(--steel);
	text-decoration: none;
	border-bottom: 1px solid var(--hairline-stark);
}

.kg-zs-epoche-titel {
	font-family: var(--sans);
	font-size: clamp(26px, 3.6vw, 40px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0 0 10px;
}

.kg-zs-epoche-meta {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0;
}

.kg-zs-epoche-jahre {
	color: var(--red-dunkel);
	font-weight: 700;
}

.kg-zs-trenner {
	margin: 0 6px;
}

.kg-zs-epoche-text {
	max-width: 760px;
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 20px;
}

.kg-zs-epoche-text p {
	margin: 0 0 14px;
}

.kg-zs-epoche-text h2 {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 28px 0 10px;
	padding-top: 12px;
	border-top: 1px solid var(--hairline-stark);
}

.kg-zs-epoche-text ul {
	margin: 0 0 14px;
	padding-left: 20px;
}

.kg-zs-epoche-text li {
	margin: 0 0 6px;
}

.kg-zs-epoche > .kg-zs-suche {
	margin: 18px 0 26px;
	padding: 12px 0;
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
}

.kg-zs-artikel-titel {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 4px;
	padding-top: 10px;
	border-top: 2px solid var(--ink);
}

.kg-zs-artikel-regel {
	font-size: 13.5px;
	color: var(--muted);
	margin: 0 0 18px;
	max-width: 760px;
}

.kg-zs-blättern {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 34px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--hairline-stark);
}

.kg-zs-blättern a {
	display: grid;
	gap: 3px;
	max-width: 46%;
	text-decoration: none;
	color: inherit;
}

.kg-zs-next {
	margin-left: auto;
	text-align: right;
}

.kg-zs-richtung {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.kg-zs-nachbar {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ink);
}

.kg-zs-blättern a:hover .kg-zs-nachbar {
	color: var(--red);
}

@media (max-width: 900px) {
	.kg-zs-liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

@media (max-width: 620px) {
	.kg-zs-liste {
		grid-template-columns: minmax(0, 1fr);
	}
	.kg-zs-suche-epoche,
	.kg-zs-suche-feld,
	.kg-zs-suche-knopf {
		flex: 1 1 100%;
		max-width: 100%;
		width: 100%;
	}
	.kg-zs-blättern {
		flex-direction: column;
	}
	.kg-zs-blättern a,
	.kg-zs-next {
		max-width: 100%;
		margin-left: 0;
		text-align: left;
	}
}

.kg-zs-lead {
	font-size: 19px;
	line-height: 1.6;
	color: var(--ink);
	margin: 0 0 16px;
	max-width: 720px;
}

@media (max-width: 620px) {
	.kg-zs-lead {
		font-size: 17px;
	}
}

/* Trefferflächen im Band auf schmalen Geräten: Der Streifen ist dort nur
   noch ein Index aus zwölf Segmenten; ohne Zuschlag wäre jedes Segment
   ein Ziel von rund 30 × 7 Pixeln. Die Legende darunter bleibt der
   genaue Weg, der Streifen der schnelle. */
@media (max-width: 900px) {
	.kg-epoche-link {
		padding: 12px 0 4px;
	}
	.kg-zl-link {
		padding: 5px 0;
	}
	.kg-zeitstrahl-legende {
		margin-top: 6px;
	}
}

/* Zeitstrahl im Fuß: der einzige Einstieg, der nicht an einem Ressort hängt. */
.kg-footer-zs {
	margin-top: 10px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kg-footer-zs a {
	color: var(--muted);
	text-decoration: none;
	border-bottom: 1px solid var(--hairline-stark);
}

.kg-footer-zs a:hover,
.kg-footer-zs a:focus {
	color: var(--red);
	border-bottom-color: var(--red);
}

.kg-footer-zs span {
	margin: 0 6px;
	color: var(--hairline-stark);
}

/* Belege: Quellenblöcke an den Epochenseiten und die Belegseite.
   Die Belege stehen bewusst in derselben Schrift wie der Fließtext —
   eine kleinere Schrift würde sie wie Kleingedrucktes aussehen lassen,
   und genau das sind sie nicht. */
.kg-belege-intro,
.kg-belege-lead {
	max-width: 68ch;
	font-size: 17px;
	line-height: 1.65;
	color: var(--steel);
}

ol.kg-belege {
	max-width: 68ch;
	margin: 18px 0 0;
	padding-left: 0;
	list-style: none;
	counter-reset: beleg;
}

ol.kg-belege li {
	position: relative;
	padding: 12px 0 12px 40px;
	border-top: 1px solid var(--hairline);
	font-size: 15.5px;
	line-height: 1.6;
	counter-increment: beleg;
}

ol.kg-belege li::before {
	content: "[" counter(beleg) "]";
	position: absolute;
	left: 0;
	top: 13px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--red);
}

.kg-belege-hinweis {
	max-width: 72ch;
	margin: 28px 0 8px;
	padding: 22px 24px;
	border-left: 3px solid var(--red);
	background: rgba(58, 66, 80, 0.04);
}

.kg-belege-hinweis h2 {
	margin-top: 0;
	font-size: 20px;
}

.kg-belege-hinweis p {
	margin: 0 0 12px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--steel);
}

.kg-belege-hinweis p:last-child {
	margin-bottom: 0;
}

.kg-belege-scroll {
	overflow-x: auto;
	margin: 18px 0 8px;
	border-top: 2px solid var(--ink);
}

table.kg-belege-tabelle {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: 14.5px;
	line-height: 1.55;
}

table.kg-belege-tabelle th,
table.kg-belege-tabelle td {
	padding: 12px 14px 12px 0;
	vertical-align: top;
	text-align: left;
	border-bottom: 1px solid var(--hairline);
}

table.kg-belege-tabelle thead th {
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

table.kg-belege-tabelle tbody th {
	width: 190px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}

table.kg-belege-tabelle td.kg-belege-quelle {
	width: 42%;
	font-size: 13.5px;
	color: var(--steel);
}

ul.kg-belege-epochen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 6px 24px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

ul.kg-belege-epochen a {
	display: block;
	padding: 7px 0;
	border-bottom: 1px solid var(--hairline);
	font-size: 15px;
	text-decoration: none;
}

p.kg-belege-fuss {
	margin-top: 32px;
	padding-top: 14px;
	border-top: 1px solid var(--hairline);
	font-size: 13.5px;
	color: var(--muted);
}

.kg-quelle-trenner {
	color: var(--hairline-stark);
}

/* Auf schmalen Geräten wird aus der Tabelle ein Stapel: eine Zeile
   mit drei Spalten würde dort nur seitlich weggeschoben, und der Beleg
   ist der Teil, den man am ehesten lesen will. */
@media (max-width: 700px) {
	.kg-belege-scroll {
		overflow-x: visible;
		border-top-width: 1px;
	}
	table.kg-belege-tabelle {
		display: block;
		min-width: 0;
		width: 100%;
	}
	table.kg-belege-tabelle thead {
		display: none;
	}
	table.kg-belege-tabelle tbody,
	table.kg-belege-tabelle tr,
	table.kg-belege-tabelle th,
	table.kg-belege-tabelle td {
		display: block;
		width: auto;
	}
	table.kg-belege-tabelle tr {
		padding: 16px 0 14px;
		border-bottom: 1px solid var(--hairline);
	}
	table.kg-belege-tabelle tbody th {
		padding: 0 0 6px;
		font-family: var(--mono);
		font-size: 10.5px;
		font-weight: 400;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--muted);
	}
	table.kg-belege-tabelle td {
		padding: 0 0 10px;
		border-bottom: 0;
		font-size: 15px;
	}
	table.kg-belege-tabelle td.kg-belege-quelle {
		padding: 0 0 0 12px;
		border-left: 2px solid var(--hairline-stark);
		font-size: 13.5px;
	}
}