:root {
	--nav-bg: #007EC1;
	--nav-text: #FAFAFA;
	--nav-active-bg: #00406E;
	--nav-active-text: #FAFAFA;
	--table-header-bg: #00406E;
	--table-header-text: #FAFAFA;
	--heading-color: #00406E;
	--table-text: #000824;
	--table-bg: #F2F2F2;
	--page-bg: #E6E6E6;
	--info-table-bg: #F2F2F2;
	--info-table-text: #00406E;
	--classification-color: #007EC1;
	--button-bg: var(--nav-bg);
	--button-text: var(--nav-text);
}



body {
	background-color: var(--page-bg);
	font-family:"Arial";
	font-size:13px;
	margin: 0;
}

/* Zentraler Seiten-Wrapper: bis 1140px wie bisher (Desktop unverändert),
   darunter volle Breite mit schmalem Seitenrand. */
.page {
	max-width: 1140px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* "Zum Inhalt springen": nur bei Tastaturfokus sichtbar. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--nav-active-bg);
	color: var(--nav-active-text);
	padding: 8px 14px;
	z-index: 100;
}
.skip-link:focus {
	left: 8px;
	top: 8px;
}



h1, h2, h3, .page-title {
	color: var(--heading-color);
	text-align:center;
	}
.page-title { font-size:28px; }
h1 { font-size:28px; }
h2 { font-size:18px; }
h3 { font-size:12px; }



a:link, a:hover, a:focus, a:active, a:visited {
	color: var(--heading-color);
}

a.th:link, a.th:hover, a.th:focus, a.th:active, a.th:visited {
	color: var(--nav-text);
}

/* Sichtbarer Tastaturfokus für alle interaktiven Elemente. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.nav-link:focus-visible {
	outline: 3px solid #B1C800;
	outline-offset: 2px;
}



/* ===== Header ===== */
.site-header {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr) 240px;
	align-items: center;
	background-color: var(--info-table-bg);
	color: var(--info-table-text);
	border: 1px solid var(--info-table-bg);
	box-sizing: border-box;
}

.site-logo {
	justify-self: center;
	max-width: 100%;
	height: auto;
}

.site-meta {
	display: grid;
	grid-template-columns: 290px 1fr;
	margin: 0;
	font-size: 1.1em;
	font-family: Arial, Helvetica, sans-serif;
}
.site-meta-row { display: contents; }
.site-meta dt,
.site-meta dd {
	margin: 0;
	padding: 3px 7px 2px 7px;
	min-height: 24px;
	box-sizing: border-box;
}

.classification {
	color: var(--classification-color);
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	margin: 0;
}

.header-rule {
	margin: 24px 0;
}



/* ===== Navigation ===== */
.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 40px 0;
	padding: 0;
}
.site-nav li {
	flex: 1 1 20%;
	min-width: 140px;
	display: flex;
}
.nav-link {
	flex: 1;
	font-family:Arial, Helvetica, sans-serif;
	border:1px solid #FAFAFA;
	text-align:center;
	color: var(--nav-text);
	background-color: var(--nav-bg);
	line-height: 2.0;
	font-size:14px;
	padding:3px 7px 2px 7px;
	text-decoration: none;
	box-sizing: border-box;
}
.nav-link.active {
	background-color: var(--nav-active-bg);
	color: var(--nav-active-text);
	font-weight: bold;
}
.nav-link:link, .nav-link:hover, .nav-link:focus,
.nav-link:active, .nav-link:visited {
	color: var(--nav-text);
}
.nav-link.active:link, .nav-link.active:visited { color: var(--nav-active-text); }



/* ===== Breite Tabellen: eigener horizontal scrollbarer Container ===== */
.table-scroll {
	overflow-x: auto;
	max-width: 100%;
}



td.list-filter-cell {
	border: none;
	background-color: transparent;
	padding: 5px 7px;
	}

input.list-search,
select.list-filter {
	width: 100%;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: var(--table-text);
	background-color: var(--table-bg);
	border: 1px solid #007EC1;
	padding: 5px 7px;
	}


table.list {
	margin:auto;
	border-collapse:collapse;
	table-layout: fixed;
	width: 100%;
	min-width: 1140px;
}

th.list {
	font-family:Arial, Helvetica, sans-serif;
	border:1px solid #007EC1;
	text-align:left;
	color: var(--table-header-text);
	background-color: var(--table-header-bg);
	line-height: 2.5;
	height:44px;
	padding:3px 7px 2px 7px;
	}

th.list.sortable-col:hover {
	background-color: #007EC1;
	}

/* Sortier-Button füllt die Kopfzelle und sieht aus wie deren Text,
   ist aber per Tab fokussierbar und per Enter/Leertaste bedienbar. */
button.sort-button {
	all: unset;
	display: block;
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
	user-select: none;
	color: var(--table-header-text);
	font-family: Arial, Helvetica, sans-serif;
	text-align: inherit;
	}

th.list.sortable-col .sort-button::after {
	content: "\2195";
	float: right;
	opacity: 0.5;
	}
th.list.sort-asc .sort-button::after {
	content: "\2191";
	opacity: 1;
	}
th.list.sort-desc .sort-button::after {
	content: "\2193";
	opacity: 1;
	}


td.list {
	font-family:Arial, Helvetica, sans-serif;
	border:1px solid #007EC1;
	text-align:left;
	color: var(--table-text);
	background-color: var(--table-bg);
	height:24px;
	overflow-wrap: break-word;
	padding:3px 7px 2px 7px;
}

th.list-num, td.list-num {
	text-align: right;
}



table.card {
	margin:auto;
	border-collapse:collapse;
	table-layout: fixed;
	width: 100%;
	min-width: 1140px;
}

th.card {
	font-family:Arial, Helvetica, sans-serif;
	border:1px solid #007EC1;
	text-align:center;
	color: var(--table-header-text);
	background-color: var(--table-header-bg);
	line-height: 2.0;
	font-size:20px;
	padding:3px 7px 2px 7px;
	}

td.card {
	font-family:Arial, Helvetica, sans-serif;
	border:1px solid #007EC1;
	text-align:left;
	color: var(--table-text);
	background-color: var(--table-bg);
	height:24px;
	overflow-wrap: break-word;
	padding:3px 7px 2px 7px;
}

td.card-num {
	text-align: right;
}



th.card_subheader {
	font-family:Arial, Helvetica, sans-serif;
	border:1px solid #007EC1;
	text-align:center;
	color: var(--heading-color);
	line-height: 1.5;
	font-size:14px;
	padding:3px 7px 2px 7px;
	}

th.card_subheader-num {
	text-align: right;
	}



a.map-button:link, a.map-button:hover, a.map-button:focus,
a.map-button:active, a.map-button:visited {
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: var(--button-text);
	background-color: var(--button-bg);
	border: 1px solid var(--button-bg);
	padding: 8px 18px;
	text-decoration: none;
	}

a.map-button:hover {
	background-color: var(--nav-active-bg);
	border-color: var(--nav-active-bg);
	}



/* ===== Detailseite: Info-Card + Mini-Map nebeneinander, bricht um ===== */
.detail-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
}
.detail-info {
	flex: 0 1 700px;
	min-width: 0;
}
.detail-info table.card { min-width: 0; }
.detail-map {
	flex: 0 1 420px;
	min-width: 0;
}
/* Unter 820px bricht die Mini-Map unter die Info-Card um. */
@media (max-width: 820px) {
	.detail-info, .detail-map { flex-basis: 100%; }
}



/* ===== Ownership-Map-Seite ===== */
.map-scroll {
	max-width: 100%;
	margin: auto;
	overflow-x: auto;
}



/* ===== Footer ===== */
.site-footer {
	font-family:Arial, Helvetica, sans-serif;
	color: var(--table-text);
	background-color: var(--table-bg);
	padding: 16px;
	margin-top: 60px;
	box-sizing: border-box;
}
.site-footer p { margin: 6px 0; }



/* ===== Hub-/Verteilerseite ===== */
.hub { max-width: 900px; margin: 0 auto; }
.hub-section { margin: 0 0 32px 0; }
.hub-heading {
	text-align: left;
	border-bottom: 2px solid var(--table-header-bg);
	padding-bottom: 4px;
	margin-bottom: 16px;
}
.hub-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.hub-link {
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	background-color: var(--table-bg);
	border: 1px solid var(--table-header-bg);
	color: var(--heading-color);
	text-decoration: none;
}
.hub-link:hover, .hub-link:focus {
	background-color: var(--nav-bg);
	color: var(--nav-text);
}
.hub-link-label { display: block; font-weight: bold; }
.hub-link-desc { display: block; margin-top: 4px; font-size: 0.9em; }

/* ===== System-Info & statische Inhaltsseiten ===== */
.static-page {
	max-width: 800px;
	margin: 0 auto;
	color: var(--table-text);
	line-height: 1.5;
}
.static-page h2, .static-page h3 { text-align: left; color: var(--heading-color); }
.static-page a:link, .static-page a:visited { color: var(--heading-color); }

.sysinfo { margin: 0 0 24px 0; }
.sysinfo-row { display: grid; grid-template-columns: 200px 1fr; padding: 4px 0; }
.sysinfo-row dt { font-weight: bold; }
.sysinfo-row dd { margin: 0; }
.sysinfo-list { margin: 8px 0 24px 0; padding-left: 20px; }
.sysinfo-list li { margin: 4px 0; }

/* ===== Responsive: schmale Screens ===== */
@media (max-width: 1139px) {
	.page { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 1000px) {
	.site-header {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		padding: 12px 0;
		row-gap: 4px;
	}
	.site-meta { grid-template-columns: max-content 1fr; text-align: left; }
	.classification { margin-top: 8px; }
}