/*************************************************************************************************************
 * 01. SCHRIFTARTEN
 * Eigene Webfonts für die Anwendung
 *************************************************************************************************************/

@font-face {
	font-family: 'Roboto';
	src: url("fonts/Roboto/Roboto-Light.ttf");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto';
	src: url("fonts/Roboto/Roboto-Regular.ttf");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto Condensed';
	src: url("fonts/Roboto_Condensed/RobotoCondensed-Light.ttf");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto Condensed';
	src: url("fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto Condensed';
	src: url("fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf");
	font-weight: 600;
	font-style: normal;
}

/*************************************************************************************************************
 * 02. CSS-VARIABLEN
 * Zentrale Farben, Abstände und Standardwerte
 *************************************************************************************************************/

:root {
	/* Hauptfarbe */
	--FWA-Farbe: #6592bc;

	/* Basisfarben */
	--color-header-bg: #36444e;
	--color-text: #000000;
	--color-white: #ffffff;
	--color-border-light: #e6e7e9;
	--color-border-medium: #dddddd;
	--color-hover-light: #eeeeee;
	--color-hover-box: #f9f9f9;
	--color-hover-border: #cccccc;
	--color-callout-border: rgba(33, 37, 41, 0.4);

	/* Abstände und Rundungen */
	--radius-default: 0.5rem;
	--space-xxs: 0.2rem;
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
}

/*************************************************************************************************************
 * 03. BASIS-EINSTELLUNGEN
 *************************************************************************************************************/

body {
	font-family: Roboto, Arial, Verdana, sans-serif;
	font-size: 16px;
}

/*************************************************************************************************************
 * 04. GRID / SEITENLAYOUT
 * Breite des Inhaltsbereichs auf größeren Displays
 *************************************************************************************************************/

@media (min-width: 992px) {

	body.floating.fullcontent .page-columns,
	body.docked.fullcontent .page-columns {
		grid-template-columns:
			[screen-start] 20rem [body-start] 2rem [body-content-start] minmax(500px, 100vw) [body-content-end] 2rem [screen-end];
	}
}

/*************************************************************************************************************
 * 05. HEADER / NAVIGATION
 *************************************************************************************************************/

header>nav.navbar {
	background-color: var(--color-header-bg);
	border-bottom: 10px solid var(--FWA-Farbe);
}

header .navbar-logo {
	min-height: 4rem;
}

header .navbar-brand-container {
	align-items: flex-end;
}

header .navbar-brand:has(span.navbar-title) {
	font-size: 1.5rem;
	margin-bottom: 0.2rem;
}

header .quarto-navbar-tools .bi {
	font-size: 1.25rem;
}

/*************************************************************************************************************
 * 06. HAUPTINHALTSBEREICH
 *************************************************************************************************************/

div#quarto-content a:not(.shariff-button a) {
	color: var(--color-text);
}

div#quarto-content a:hover:not(.shariff-button a):not(footer a):not(a.tile) {
	color: var(--FWA-Farbe);
	text-decoration: none;
}

div#quarto-content .anchored>a.anchorjs-link {
	display: none;
}

div#quarto-content .quarto-title-meta-heading {
	display: none;
}

/*************************************************************************************************************
 * 07. SIDEBAR
 *************************************************************************************************************/

div#quarto-content>nav#quarto-sidebar div.sidebar-menu-container>ul>li.sidebar-item {
	border-left: 2px solid var(--color-border-light);
}

div#quarto-content>nav#quarto-sidebar div.sidebar-menu-container>ul>li.sidebar-item:has(.active) {
	border-left: 2px solid var(--FWA-Farbe);
	background-color: var(--color-border-light);
}

div#quarto-content>nav#quarto-sidebar .sidebar-item {
	margin: 0;
	padding-top: 0.2rem;
	padding-right: 0.6rem;
	padding-bottom: 0.2rem;
	padding-left: 0.6rem;
}

div#quarto-content>nav#quarto-sidebar ul.sidebar-section a.active {
	font-weight: bold;
}

/*************************************************************************************************************
 * 08. DOKUMENTINHALT – TYPOGRAFIE
 *************************************************************************************************************/

div#quarto-content>main#quarto-document-content p {
	text-align: justify;
}

div#quarto-content>main#quarto-document-content h1,
div#quarto-content>main#quarto-document-content h3,
div#quarto-content>main#quarto-document-content h4,
div#quarto-content>main#quarto-document-content h5,
div#quarto-content>main#quarto-document-content h6 {
	font-weight: 500;
}

div#quarto-content>main#quarto-document-content h1.title {
	font-size: 2rem;
}

div#quarto-content>main#quarto-document-content h2 {
	font-size: 1rem;
	color: var(--FWA-Farbe);
	border: none;
	padding-bottom: 0;
}

/*************************************************************************************************************
 * 09. CALLOUT-BOXEN
 *************************************************************************************************************/

div#quarto-content>main#quarto-document-content div.callout-note.callout {
	border-color: var(--color-callout-border);
	border-left-color: var(--FWA-Farbe);
}

div#quarto-content>main#quarto-document-content .callout.callout-style-simple .callout-body {
	margin-bottom: 0;
}

div#quarto-content>main#quarto-document-content div.callout.callout-note .callout-icon::before {
	background-image: url(Infobutton.svg);
}

/*************************************************************************************************************
 * 10. ALLGEMEINE CONTENT-BLÖCKE
 *************************************************************************************************************/

div#quarto-content>main#quarto-document-content div.cell {
	margin-bottom: 25px;
}

/*************************************************************************************************************
 * 11. DATATABLES – LAYOUT
 *************************************************************************************************************/

div#quarto-content>main#quarto-document-content div.dataTables_wrapper.no-footer {
	display: flex;
	flex-wrap: wrap;
}

div#quarto-content>main#quarto-document-content div.dataTables_wrapper.no-footer:has(.dataTables_scroll) {
	overflow-x: hidden;
}

div#quarto-content>main#quarto-document-content div.dataTables_wrapper.no-footer:not(:has(.dataTables_filter)) .dt-buttons {
	min-width: 100%;
}

div#quarto-content>main#quarto-document-content div.dt-buttons,
div#quarto-content>main#quarto-document-content div.dataTables_filter,
div#quarto-content>main#quarto-document-content div.dataTables_info,
div#quarto-content>main#quarto-document-content div.dataTables_paginate,
div#quarto-content>main#quarto-document-content div.dataTables_length {
	flex: 1 0 0;
	float: none;
	align-content: center;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

div#quarto-content>main#quarto-document-content div.dataTables_paginate {
	text-align: center;
	flex-grow: 2;
}

div#quarto-content>main#quarto-document-content div.dataTables_wrapper.no-footer:has(> div.dataTables_paginate:last-child)>div.dataTables_paginate {
	text-align: end;
}

div#quarto-content>main#quarto-document-content div.dataTables_length {
	text-align: end;
}

div#quarto-content>main#quarto-document-content div.dataTables_wrapper.no-footer:has(> div.dataTables_length:first-child)>div.dataTables_length {
	text-align: start;
}

div#quarto-content>main#quarto-document-content div.dataTables_scroll {
	overflow-x: scroll;
	scrollbar-width: none;
	clear: none;
}

div#quarto-content>main#quarto-document-content button.dt-button {
	border-radius: var(--radius-default);
	background-color: var(--FWA-Farbe);
	color: var(--color-white);
}

/*************************************************************************************************************
 * 12. DATATABLES – PAGINATION
 *************************************************************************************************************/

div#quarto-content>main#quarto-document-content div.dataTables_paginate>a.paginate_button:first-child {
	border-radius: 0.5rem 0 0 0.5rem;
}

div#quarto-content>main#quarto-document-content a.paginate_button {
	border: 1px solid;
	margin: 0;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

div#quarto-content>main#quarto-document-content a.paginate_button.disabled:hover,
div#quarto-content>main#quarto-document-content a.paginate_button.disabled:active {
	cursor: no-drop;
}

div#quarto-content>main#quarto-document-content a.paginate_button:hover:not(.disabled),
div#quarto-content>main#quarto-document-content a.paginate_button:active:not(.disabled) {
	background: var(--color-hover-light);
	border-color: #000;
	color: var(--bs-body-color) !important;
}

div#quarto-content>main#quarto-document-content a.paginate_button.current {
	background: var(--FWA-Farbe);
	border-color: #000;
	color: var(--color-white) !important;
}

div#quarto-content>main#quarto-document-content div.dataTables_paginate>span>a.paginate_button:first-child {
	border-left: 0;
}

div#quarto-content>main#quarto-document-content div.dataTables_paginate>span>a.paginate_button {
	border-right: 0;
}

div#quarto-content>main#quarto-document-content div.dataTables_paginate>span>span.ellipsis {
	border: 1px solid;
	border-right: 0;
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
	cursor: default;
}

div#quarto-content>main#quarto-document-content div.dataTables_paginate>a.paginate_button:last-child {
	border-radius: 0 0.5rem 0.5rem 0;
}

/*************************************************************************************************************
 * 13. DATATABLES – TABELLENDESIGN
 *************************************************************************************************************/

div#quarto-content>main#quarto-document-content table thead th {
	border-bottom: 4px solid var(--color-border-medium);
}

div#quarto-content>main#quarto-document-content table tbody tr:hover td {
	background-color: var(--FWA-Farbe);
	color: var(--color-white);
}

div#quarto-content>main#quarto-document-content table.dataTable thead>tr>th.sorting:before,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>th.sorting:after,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>th.sorting_asc:before,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>th.sorting_asc:after,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>th.sorting_desc:before,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>th.sorting_desc:after,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>th.sorting_asc_disabled:before,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>th.sorting_asc_disabled:after,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>th.sorting_desc_disabled:before,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>th.sorting_desc_disabled:after,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>td.sorting:before,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>td.sorting:after,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>td.sorting_asc:before,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>td.sorting_asc:after,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>td.sorting_desc:before,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>td.sorting_desc:after,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>td.sorting_asc_disabled:before,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>td.sorting_asc_disabled:after,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>td.sorting_desc_disabled:before,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>td.sorting_desc_disabled:after {
	padding: 1px;
	color: #000;
	opacity: 0.2;
}

div#quarto-content>main#quarto-document-content table.dataTable thead>tr>th.sorting_asc:before,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>th.sorting_desc:after,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>td.sorting_asc:before,
div#quarto-content>main#quarto-document-content table.dataTable thead>tr>td.sorting_desc:after {
	opacity: 1;
}

div#quarto-content>main#quarto-document-content table.mit-summe>tbody>tr:last-child>td {
	font-weight: bold;
	border-color: #000;
	border-top-width: 2px;
	border-bottom-width: 1px;
}

@media (min-width: 993px) {
	div#quarto-content>main#quarto-document-content div.alert-table {
		display: none;
	}
}

/*************************************************************************************************************
 * 14. GRAFIKEN / PLOTS / WIDGETS
 *************************************************************************************************************/

div#quarto-content>main#quarto-document-content div.gt_heading {
	font-weight: bold;
}

div#quarto-content>main#quarto-document-content div.plotly.html-widget.html-widget-static-bound.js-plotly-plot:not(.html-fill-item) {
	height: 100% !important;
	padding: 0.5rem;
}

div#quarto-content>main#quarto-document-content .cell-output-display:not(.no-overflow-x) {
	overflow-x: visible;
}

div#quarto-content>main#quarto-document-content div#spalte-karte div.leaflet.html-widget.html-widget-static-bound.leaflet-container.leaflet-touch.leaflet-fade-anim {
	max-height: 250px;
}

div#quarto-content>main#quarto-document-content #hover-info {
	border: 1px solid var(--color-hover-border);
	padding: 10px;
	margin-top: 2em;
	background-color: var(--color-hover-box);
	min-height: 80px;
}

div#quarto-content>main#quarto-document-content g.sankey-node rect.node-rect {
	stroke-width: 0 !important;
	stroke: transparent !important;
	shape-rendering: crispEdges;
}

/*************************************************************************************************************
 * 15. DOWNLOAD-BUTTON
 *************************************************************************************************************/

div#quarto-content>main#quarto-document-content a.btn-download {
	border-radius: var(--radius-default);
	color: var(--color-white);
	padding: 0.5em 1em;
	border: 1px solid rgba(0, 0, 0, 0.3);
	font-size: 0.88em;
	line-height: 1.6em;
	white-space: nowrap;
	overflow: hidden;
	background: linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
	background-color: var(--FWA-Farbe);
	user-select: none;
	text-decoration: none;
	outline: none;
	text-overflow: ellipsis;
	-webkit-appearance: button;
	text-transform: none;
	margin: 0;
}

/*************************************************************************************************************
 * 16. SPEZIALANPASSUNGEN FÜR DIAGRAMME
 * Individuelle Höhen, Interaktionen und Darstellungsanpassungen für Sonderdiagramme
 *************************************************************************************************************/

div#quarto-content>main#quarto-document-content .half_pie .cell,
div#quarto-content>main#quarto-document-content .half_pie .cell .main-svg,
div#quarto-content>main#quarto-document-content .half_pie .user-select-none.svg-container,
div#quarto-content>main#quarto-document-content .half_pie_obr .cell,
div#quarto-content>main#quarto-document-content .half_pie_obr .cell .main-svg,
div#quarto-content>main#quarto-document-content .half_pie_obr .user-select-none.svg-container {
	height: 230px !important;
}

div#quarto-content>main#quarto-document-content .half_pie .cell g.slice:nth-of-type(1) path {
	pointer-events: none !important;
}

div#quarto-content>main#quarto-document-content .parl svg.main-svg {
	height: 300px;
}

div#quarto-content>main#quarto-document-content .columns.drei {
	display: flex;
}

/*************************************************************************************************************
 * 17. KACHEL- / TILE-GRID
 *************************************************************************************************************/

div#quarto-content>main#quarto-document-content div.tile-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	justify-content: center;
}

@media (min-width: 768px) {
	div#quarto-content>main#quarto-document-content div.tile-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	div#quarto-content>main#quarto-document-content div.tile-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

div#quarto-content>main#quarto-document-content div.tile-grid>a.tile {
	border: 4px solid var(--color-white);
	border-radius: var(--radius-default);
	padding: 1.1rem 1.2rem;
	background: var(--color-white);
	box-shadow: 0 0 8px rgb(0 0 0 / 18%), 0 4px 8px rgb(0 0 0 / 36%);
	text-decoration: none;
	min-width: 100%;
}

div#quarto-content>main#quarto-document-content div.tile-grid>a.tile>h3 {
	margin-top: 0;
	min-height: 65px;
	text-align: center;
	word-break: break-word;
	hyphens: auto;
}

div#quarto-content>main#quarto-document-content div.tile-grid>a.tile>img {
	max-width: 100%;
}

div#quarto-content>main#quarto-document-content div.tile-grid>a.tile:hover,
div#quarto-content>main#quarto-document-content div.tile-grid>a.tile:active {
	border-color: var(--FWA-Farbe);
}

div#quarto-content>main#quarto-document-content div.tile-grid>a.tile>div:last-child {
	text-align: center;
}

/*************************************************************************************************************
 * 18. LIZENZBEREICH
 *************************************************************************************************************/

div#quarto-content>main#quarto-document-content ol[type="1"]>li:has(ul)>p {
	margin-bottom: 0;
}

/*************************************************************************************************************
 * 19. SHARIFF / SHARE-BEREICH
 *************************************************************************************************************/

div#quarto-content div#shariff {
	text-align: center;
}

div#quarto-content div#shariff ul.orientation-horizontal {
	justify-content: center;
}

div#quarto-content div#shariff h2#shariff_share {
	font-size: 1.25rem;
}

/*************************************************************************************************************
 * 20. FOOTER
 *************************************************************************************************************/

div#quarto-content footer {
	border-bottom: 16px solid var(--FWA-Farbe);
	padding-bottom: 10px;
}

div#quarto-content footer img {
	max-height: 4rem;
	margin: auto;
	display: block;
}

div#quarto-content footer .copy,
div#quarto-content footer .copy:hover,
div#quarto-content footer .copy:focus {
	cursor: default;
	text-decoration: none;
	padding: 0 0.4em 0 0.6em;
}

div#quarto-content footer a.footer-link {
	text-decoration: none;
	padding: 0 0.4em 0 0.6em;
}

/*************************************************************************************************************
 * 21. MOBILE ANSICHT
 * Anpassungen für Tablets und Smartphones
 *************************************************************************************************************/

@media (max-width: 992px) {
	header .navbar>div.navbar-container {
		padding: 0;
		justify-content: flex-end;
		-webkit-justify-content: flex-end;
	}

	header .navbar .navbar-container>.navbar-brand-container {
		flex-wrap: wrap;
		margin-right: auto !important;
	}

	header .navbar-logo {
		min-height: 2rem;
	}

	header .navbar-brand:has(span.navbar-title) {
		font-size: 1rem;
	}

	header .navbar #quarto-search {
		margin-left: 0;
	}

	header h1.quarto-secondary-nav-title {
		font-size: calc(0.825rem + 0.9vw);
	}

	div#quarto-content nav#quarto-sidebar {
		max-width: 100%;
	}

	div#quarto-content nav#quarto-sidebar span.menu-text {
		white-space: pre-line;
	}

	div#quarto-content header#title-block-header>div.quarto-title-meta {
		grid-template-columns: repeat(1, 1fr);
	}

	div#quarto-content section#herausgeber>p,
	div#quarto-content section#systembetrieb>p,
	div#quarto-content section#verantwortlicher-und-datenschutzbeauftragter>p {
		text-align: start;
	}

	div#quarto-content div.quarto-layout-row {
		flex-direction: row-reverse;
		flex-wrap: wrap-reverse;
	}

	div#quarto-content div#spalte-text,
	div#quarto-content div#spalte-karte {
		flex-basis: 100% !important;
		margin-right: 0;
	}

	div#quarto-content div.dataTables_wrapper> :not(:first-child) {
		display: none;
	}

	div#quarto-content div.alert-table>p {
		margin: 0;
		text-align: center !important;
	}

	div#quarto-content footer img {
		max-height: 2rem;
	}
}

/*************************************************************************************************************
 * 22. TOUCH-GERÄTE OHNE HOVER
 * Sankey-Diagramme ausblenden und Hinweistext einblenden
 *************************************************************************************************************/

div.alert-sankey {
	display: none;
}

@media (hover: none), (pointer: coarse) {
	.sankey {
		display: none;
	}

	div.alert-sankey {
		display: inherit;
	}

	div.alert-sankey>p {
		margin: 0;
		text-align: center !important;
	}
}

/*************************************************************************************************************
 * 23. DRUCK
 *************************************************************************************************************/
@media print {
	body {
		padding-top: 0 !important;
	}

	nav#quarto-sidebar {
		display: none;
	}

	.tab-content > .tab-pane:not(:last-child) {
		border-bottom: 1px solid;
	}

	.tab-content > .tab-pane:not(.active) {
		display: block !important;
	}

	.plotly {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
	}

	div#shariff {
		display: none;
	}
}