@media (max-width: 500px) {
	.foerder_logo_footer {
		width: 80vw !important;
	}
}

@media (max-width: 767px) {
	.dashboard_item{
		flex-direction: column;
	}
	.dashboard_column_chart{
		/*height:550px;*/
		width:92vw;
	}
	.dashboard_column_map{
		width:92vw;
	}
	#mapContainer{
		margin-right:0px;
	}
	.sewage_disclaimer_responsive{
		display: inherit;
	}
	.sewage_disclaimer_normal{
		display: none;
	}
	/*.vocChart{*/
	/*	width:94vw;*/
	/*}*/
	/*.vocmap{*/
	/*	!*width:93vw;*!*/
	/*	height:60vh;*/
	/*	min-height: 300px;*/
	/*}*/
	.leaflet_legend {
		font-size:10px;
	}
	.leaflet_legend_title{
		font-size: 12px;
	}
	.leaflet_legend i {
		width: 13px;
		height: 13px;
	}
	.foerder_logo_footer {
		width: 80vw;
	}
	.amelag_logo_footer{
		width: 40vw;
	}
	.dashboard_footer {
		display: flex;
		flex-direction: column;
	}
	.sewage_header > h1 {
		font-size: 26px;
	}
	#page_content{
		margin-left: 0vw;
		margin-right: 0;
		/*background-position-x: 0px;*/
	}

}
@media (min-width: 768px) and (max-width: 991px) {
	#mapContainer{
		margin-right:25px;
	}
	.dashboard_column_chart{
		height:750px;
		width:47vw;
	}
	.dashboard_column_map{
		width:47vw;
	}
	.dashboard_item{
		flex-direction: row;
	}
	.sewage_disclaimer_responsive{
		display: inherit;
	}
	.sewage_disclaimer_normal{
		display: none;
	}
	/*.vocChart{*/
	/*	width:47vw;*/
	/*}*/
	/*.vocmap{*/
	/*	!*width:98vw;*!*/
	/*	!*width:47vw;*!*/
	/*	height:76%;*/
	/*	!*height:450px;*!*/
	/*	min-height: 400px;*/
	/*}*/
	.leaflet_legend i {
		width: 13px;
		height: 13px;
	}
	.leaflet_legend {
		font-size:11px;
	}
	.leaflet_legend_title{
		font-size: 13px;
	}
	.foerder_logo_footer {
		width: 50vw;
	}
	.amelag_logo_footer{
		width: unset;
	}
	.dashboard_footer {
		display: flex;
		flex-direction: column;
	}

}
@media (min-width: 992px) and (max-width: 1199px) {
	#mapContainer{
		margin-right:25px;
	}
	.dashboard_column_chart{
		height:750px;
		width:47vw;
	}
	.dashboard_column_map{
		width:47vw;
	}

	.dashboard_item{
		flex-direction: row;
	}
	.sewage_disclaimer_responsive{
		display: none;
	}
	.sewage_disclaimer_normal{
		display: inherit;
	}
	/*.vocChart{*/
	/*	width:44vw;*/

	/*}*/
	.leaflet_legend i {
		width: 15px;
		height: 15px;
	}
	.leaflet_legend {
		font-size:12px;
	}
	.leaflet_legend_title{
		font-size: 15px;
	}
	.foerder_logo_footer {
		width: 35vw;
	}
	.amelag_logo_footer{
		width:14vw;
	}
	.dashboard_footer {
		display: flex;
		flex-direction: row;
	}
	/*.vocmap{*/
	/*	!*width:48vw;*!*/
	/*	!*height:75vh;*!*/
	/*	height:100vh;*/
	/*	min-height: 400px;*/
	/*}*/
	.sewage_header {
		text-align: left;
	}


}
@media (min-width: 1200px) {
	#mapContainer{
		margin-right:25px;
	}
	.dashboard_column_chart{
		height:750px;
		width:47vw;
	}
	.dashboard_column_map{
		width:47vw;
	}
	.dashboard_item{
		flex-direction: row;
	}
	.sewage_disclaimer_responsive{
		display: none;
	}
	.sewage_disclaimer_normal{
		display: inherit;
	}
	/*.vocChart{*/
	/*	width:47vw;*/
	/*}*/
	/*.vocmap{*/
	/*	!*width:48vw;*!*/
	/*	height:100vh;*/
	/*	!*height:80vh;*!*/
	/*	!*height:750px;*!*/
	/*}*/
	.leaflet_legend i {
		width: 20px;
		height: 20px;
	}
	.leaflet_legend {
		font-size:12px;
	}
	.leaflet_legend_title{
		font-size: 16px;
	}
	.foerder_logo_footer {
		width: 30vw;
	}
	.amelag_logo_footer{
		width:14vw;
	}
	.dashboard_footer {
		display: flex;
		flex-direction: row;
	}
	.sewage_header {
		text-align: left;
	}
}

@media (min-width: 2600px) {
	#mapContainer{
		margin-right:25px;
	}
	.dashboard_column{
		height:950px;
	}
}


.foerder_logo{
	max-height: 100px;
	max-width: 90vw;
	margin: 8px;
}

.amelag_logo_footer{
	max-height: 79px;
	max-width: 210px;
	margin: 8px;
}

.foerder_logo_footer{
	margin:6px;
}

.leaflet-popup-content{
	font-size:13px !important;
}

.sewage-plot-title{
	font-size: 20px;
	font-weight: bold;
	padding: 5px;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	margin-top: 5px;
	margin-bottom: 5px;
}

.sewage-plot-title > button{
	margin-left: 20px;
	min-width: 35px;
	height: 35px;
	background-color: #295f88 !important;
	color:white !important;
}

.sewage-plot-title > button:focus{
	margin-left: 20px;
	min-width: 35px;
	height: 35px;
	/*background-color: #295f88;*/
}



.sewage-info-card{
	width: 40rem;
	background: #17364e !important;
	border: 5px solid #295f88 !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: normal;
}

.sewage_disclaimer_normal .title{
	display: block;
	font-size: 20px;
	margin-bottom: 15px;
	font-weight: bold;
}

.sewage_info_button_main > .ui-button-icon-left{
	/*color: #55c0de;*/
	font-size: 1.5rem;
	margin-top: -0.7rem !important;
}

.leaflet_legend {
	/*line-height: 20px;*/
	color: white;
	background-color: #303030eb;
	padding: 5px;
	border-radius: 5px;
	border: 2px solid white;
}
.leaflet_legend_title{
	font-weight:bold;
	margin-bottom: 5px;
	cursor: pointer;
	display: flex;
	align-items: center;
	flex-direction: row;
}

.leaflet_tooltip_lineage{
	font-weight: bold;
}
.leaflet_legend_entry{
	margin-bottom:1px;
	display: flex;
	flex-direction: row;
}

.leaflet_legend i {
	float: left;
	margin-right: 8px;
}



.sewage_information{
	margin-bottom: 10px;
}

.sewage_information .ui-accordion-header {
	border-radius: 4px !important;
	background-color: #17364e !important;
	color: white !important;
}

.sewage_information .ui-accordion-content {
	border: none !important;
	padding: 0.2rem !important;
	background: none !important;
	color:white !important;
	line-height: inherit !important;
}

.sewage_citation{
	font-size: 10px;
	position: relative;
	text-align: right;
	background: #424242;
	bottom: 15px;
	padding-right: 5px;
}

/*.dashboard_item{*/
/*	!*flex-direction: row;*!*/
/*	margin-top:10px;*/
/*}*/

.dashboard_footer{
	justify-content: space-around;
	align-items: center;
	background-color: #0c0c0c;
	padding-top:10px;
	padding-bottom: 15px;
}

.sewage_header{
	padding: 10px;
	background: #2e2e2e;
	margin: 0px 0px 10px 0px;
	border-radius: 4px;
	text-align: center;
}

#overviewChart{
	background-color: #4e4e4e;
	border: 2px solid darkgray;
	border-radius: 5px;
	padding: 5px;
}


#mapContainer{
	background-color: #4e4e4e;
	border: 2px solid darkgray;
	border-radius: 5px;
	margin-top:25px;
	padding-bottom:10px;

}

.vocmap{
	/*border: 2px solid darkgray;*/
	/*border-radius: 5px;*/
	margin-left:10px;
	margin-right:10px;
	font-size:12px;
	margin-bottom: 10px;
	position:relative;
}

.vocChart{
	border:2px solid darkgray;
	border-radius: 5px;
	min-height:25vh;
	padding:5px 10px 5px 5px;
	overflow-y: auto;
	overflow-x: hidden;
}

#sewageDetail_content{
	background-color: #5a5a5a;
	color:white;
}

.sewage-info-card .title{
	display: block;
	font-size: 20px;
	margin-bottom: 15px;
	font-weight: bold;
}

.leaflet_legend {
	margin-bottom: 20px !important;
}

.ui-widget-overlay {
	opacity: 1 !important;
}

.carouselItem{
	width:95vw;
	border: 1px solid #ababab;
	border-radius: 4px;
	padding: 7px;
	margin-bottom: 5px;
}

.trendItem {
	display: flex;
	/*flex-direction: row;*/
	align-items: flex-end;
}

.trend_entry{
	padding:3px;
}

.map-tooltip{
	font-size:12px !important;
	color:white !important;
	background-color: #205f86 !important;
}

.fa-stack .cornered-lr {
	position: absolute;
	bottom: 0px !important;
	text-align: right;
	line-height: 1em;
	text-shadow: 1px 1px 1px #000;
}
.yellow {
	color: yellow !important;
}


#ngs-legend-container.legend-flow .legend-list{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 16px;     /* Zeilen- / Spaltenabstand */
    margin:0;
    padding:0;
}
#ngs-legend-container.legend-flow .legend-item{
    display:inline-flex;
    align-items:center;
    cursor:pointer;
    white-space:nowrap;
    font-size:12px;
    color:white;
}
#ngs-legend-container.legend-flow .legend-swatch{
    width:12px; height:12px; border:1px solid rgba(255,255,255,.6);
    margin-right:8px; border-radius:2px; display:inline-block;
}

.ui-dialog.loadingDialogCustom {
    z-index: 2000 !important;
}

/* ===== Vars ======================================================= */
:root{
    --sidebar-w: 60px;
    --sidebar-w-expanded: 200px;
    --header-h: 50px;                 /* deine Top-Bar */
    --bottom-nav-h: 64px;             /* Bottom-Nav Höhe (mobil) */
    --map-h-min: 360px;
    --map-h-vh: 68dvh;   /* Kartenhöhe */
    --map-h-max: 880px;  /* obere Kante für große Screens */
    --map-max-w: 2400px;
}

/* ===== Sidebar (Desktop) ========================================= */
.sidebar{
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
    display:flex; flex-direction:column; align-items:center;
    background:#333; color:#fff; transition: width .25s; overflow:hidden;
}
.sidebar.expanded{ width: var(--sidebar-w-expanded); }

/* Content verschieben per Sibling-Selector */
.sidebar + .content{
    margin-left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
    transition: margin-left .25s, width .25s;
}
.sidebar.expanded + .content{
    margin-left: var(--sidebar-w-expanded);
    width: calc(100% - var(--sidebar-w-expanded));
}

/* ===== Bottom-Nav vs. Sidebar ==================================== */
.sidebar { display:flex; }
.bottom-nav { display:none; }

@media (max-width: 992px), (pointer: coarse){
    .sidebar{ display:none !important; }
    .content{
        margin-left:0 !important; width:100% !important;
        /* Abstand, damit Bottom-Nav nichts überdeckt */
        padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    }
    .bottom-nav{
        display:block;
        height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        z-index:1100;
    }
    /* Map-Overlay endet oberhalb der Bottom-Nav */
    .map-overlay-panel{
        bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 4px);
    }
}

/* ===== Kartenhöhe (vereinheitlicht) =============================== */
/* Alte verteilte Regeln wie .vocmap {height:60vh} / 76% / 100vh bitte entfernen */
.vocmap{
    height: clamp(var(--map-h-min), var(--map-h-vh), var(--map-h-max));
    min-height: var(--map-h-min);
    margin: 0 10px 10px 10px;
    position: relative;
}

.map-frame{
    width: min(96vw, var(--map-max-w));
    margin: 0 auto;                /* mittig */
}

/* falls du lieber den äußeren Container nutzt */
#mapContainer{
    width: min(96vw, var(--map-max-w));
    margin-left: auto;
    margin-right: auto;
}

/* Wenn du auf sehr kleinen Phones etwas mehr Höhe willst */
@media (max-width: 480px){
    .vocmap{
        height: clamp(300px, 65dvh, 720px);
    }
}

/* Wenn ein fixierter Header oben Platz wegnimmt, kann man (optional) rechnen:
   .vocmap { height: min(820px, calc(100dvh - var(--header-h) - 24px)); }
*/

/* ===== Sidebar-Buttons (aus deinem Setup, leicht gestrafft) ====== */
.sidebar nav{ margin-top:10px; width:100%; }
.sidebar nav ul{ list-style:none; margin:0; padding:0; }
.sidebar nav li{ margin:4px 0; }

.sidebar .sidebar-btn{
    display:flex; align-items:center; gap:12px;
    width: calc(100% - 16px); margin:6px 8px; padding:10px 12px;
    min-height:48px; border-radius:12px; text-decoration:none !important;
    color:#fff !important; background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.06);
    transition: background .15s, transform .06s, box-shadow .15s, border-color .15s;
    filter: brightness(.85);
}
.sidebar .sidebar-btn:hover,
.sidebar .sidebar-btn:focus{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.18);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.sidebar .sidebar-icon{ font-size:1.25rem; width:28px; text-align:center; flex:0 0 28px; }
.sidebar .sidebar-label{ font-size:.95rem; white-space:nowrap; }

.sidebar:not(.expanded) .sidebar-label{ display:none; }
.sidebar:not(.expanded) .sidebar-btn{ justify-content:center; padding:10px; }

.sidebar.expanded .sidebar-icon{ display:none; }
.sidebar.expanded .sidebar-btn{ justify-content:flex-start; }

.sidebar .sidebar-btn.active{
    filter: none;
    background: var(--c-bg-20);
    border-color: var(--c-border);
    box-shadow: 0 0 0 1px var(--c-border) inset, 0 8px 24px rgba(0,0,0,.28);
}

/* Toggle-Button kompakt, rem-basiert */
.sidebar .sidebar-toggle.ui-button.ui-button-icon-only{
    width:2.8rem !important; height:2.8rem !important;
    margin: .6rem auto .8rem; border-radius:.75rem;
    display:flex; align-items:center; justify-content:center;
}
@media (max-width:600px){
    .sidebar .sidebar-toggle.ui-button.ui-button-icon-only{
        width:3.2rem !important; height:3.2rem !important; border-radius:1rem;
    }
}
.sidebar .sidebar-toggle .ui-button-icon-left{
    position: static !important; display:flex; align-items:center; justify-content:center;
    width:100%; height:100%; margin-left: 1.6rem !important;
    margin-top: 0.3rem !important; line-height:1; font-size:1.2rem; background:none !important;
}

/* Farbstreifen je Pathogen (optional) */
.sidebar .sidebar-btn{ position:relative; overflow:hidden; }
.sidebar .sidebar-btn::before{
    content:""; position:absolute; inset:0 auto 0 0; width:4px; opacity:.75; background:transparent;
}



.bottom-nav .bottom-btn{ filter: brightness(.85); }
.bottom-nav .bottom-btn.active{
    filter: none;
    background: var(--c-bg-20);
    outline: 1px solid var(--c-border);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

/* Info-Icon-Buttons in Titelleisten */
.sewage-plot-title > button{
    background-color: var(--c-bg) !important;
    border-color: var(--c-border) !important;
    color:white !important;
}

.themed-border{
    border-color: var(--c-border) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}



body.theme-sarscov2 .sidebar .sidebar-btn[data-code="SARSCOV2"].active,
body.theme-sarscov2 .bottom-nav .bottom-btn[data-code="SARSCOV2"].active{
    background:#205f86; border-color:#0288D1; box-shadow:0 6px 16px rgba(2,136,209,.25);
}

body.theme-influenza .sidebar .sidebar-btn[data-code="INFLUENZA"].active,
body.theme-influenza .bottom-nav .bottom-btn[data-code="INFLUENZA"].active{
    background:#93030e; border-color:#D32F2F; box-shadow:0 6px 16px rgba(211,47,47,.25);
}

body.theme-rsv .sidebar .sidebar-btn[data-code="RSV"].active,
body.theme-rsv .bottom-nav .bottom-btn[data-code="RSV"].active{
    background:#d06307; border-color:#ff7a09; box-shadow:0 6px 16px rgba(255,122,9,.25);
}

:root{
    --c-bg:#295f88; --c-border:#037ab0; --c-bg-20:rgba(3,122,176,.2); --c-glow:rgba(3,122,176,.35);
}

/* Bottom Bar (Layout) */
.bottom-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:1100;
    height: var(--bottom-nav-h);
    background: rgba(34,34,34,0.98);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.bottom-scroll{
    display:flex; align-items:center; gap:8px; height:100%;
    overflow-x:auto; padding:0 8px;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.bottom-btn{
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; min-width:76px; height:48px; padding:4px 6px;
    text-decoration:none !important; color:#fff !important;
    border-radius:10px; background:transparent;
    transition: background .15s, transform .06s; scroll-snap-align:center;
}
.bottom-btn i{ font-size:1.25rem; line-height:1; }
.bottom-btn span{ font-size:.78rem; white-space:nowrap; }
.bottom-btn:hover{ background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.bottom-btn.more-btn{ min-width:60px; }