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


@media (max-width: 767px) {
    .dashboard_item {
        flex-direction: column;
    }

    .dashboard_column_chart {
        width: 92vw;
    }

    .dashboard_column_map {
        width: 92vw;
    }

    #mapContainer {
        margin-right: 0px;
    }

    .sewage_disclaimer_responsive {
        display: inherit;
    }

    .sewage_disclaimer_normal {
        display: none;
    }

    .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;
    }
}


@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;
    }

    .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;
    }

    .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;
    }

    .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;
    }

    .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 > 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;
}

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

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

.sewage_info_button_main > .ui-button-icon-left {
    font-size: 1.5rem;
    margin-top: -0.7rem !important;
}

.sewage_info_button{

}

.leaflet_legend {
    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_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: #454545;
    border: 2px solid darkgray;
    border-radius: 5px;
    padding: 5px;
}

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

.vocmap {
    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;
    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;
    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: 3000 !important;
}

:root {
    --sidebar-w: 60px;
    --sidebar-w-expanded: 200px;
    --header-h: 50px;
    --bottom-nav-h: 75px;
    --map-h-min: 360px;
    --map-h-vh: 68dvh;
    --map-h-max: 880px;
    --map-max-w: 2400px;
}

.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);
}

.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 {
    display: none;
}


@media (max-width: 992px), (pointer: coarse) {
    .sidebar {
        display: none !important;
    }

    .content {
        margin-left: 0 !important;
        width: 100% !important;
        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-panel {
        bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 4px);
    }
}

@media (min-width: 993px) and (pointer: fine) {
    .bottom-nav { display: none !important; }
    .sidebar    { display: flex !important; }
}


.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;
}

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

@media (max-width: 480px) {
    .vocmap {
        height: clamp(300px, 65dvh, 720px);
    }
}


.sidebar nav {
    margin-top: 60px;
    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-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);
}

.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;
}

.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;
}

.sidebar {
    top: calc(1.3rem * 1 + 20px);;
    left: 0;
    bottom:0;
    background-color: #333;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;              
}

.sidebar button {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    margin-top: 1rem;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
}

.sidebar .sidebar-footer{
    margin-bottom: 50px;
}

.sidebar nav ul {
    list-style-type: none;
}

.sidebar nav ul li {
    margin: 1rem 0;
    text-align: center;
}

.sidebar nav ul li a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 10px 0;
}

.content {
    margin-left: 60px;
    transition: margin-left 0.3s;
    width: calc(100% - 60px);
    overflow-y: auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.content > .page-wrap,
.content > .content-inner,
.content > .panel:first-child{
    flex: 1 0 auto;
}

/* 4) Auf Mobile: Untere Nav abziehen */
@media (max-width: 992px), (pointer: coarse){
    .content{
        min-height: calc(100dvh - var(--header-h) - env(safe-area-inset-bottom, 0px));
    }
}

#mapContainer {
    position: relative;
}

.map-overlay-panel {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 42vw;
    max-width: 620px;
    min-height: 520px;
    border: 1px solid #ccc;
    box-shadow: -2px 2px 10px rgba(0,0,0,0.25);
    padding: 1rem;
    overflow-y: auto;
    z-index: 1003;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    background: #4e4e4e;
}

.map-overlay-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
    font-weight: bold;
    background: #4e4e4e;
    border-bottom: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(1px);
    margin-top:0;
}

.map-overlay-panel.overlay-full {
    position: fixed;
    inset: 0;
    top: 0;
    padding: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
}

.map-overlay-panel.overlay-full #detailform\:mapOverlayContent {
    max-height: calc(100dvh - 56px);
}

@media (max-width: 1024px) {
    .map-overlay-panel {
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
    }
}


#detailform\:overallSewageChart canvas,
#detailform\:sewageNGSChart canvas,
#detailform\:sewageLineChart canvas {
    touch-action: pan-y !important;
}

.overallSewageChart canvas {
    height: 400px !important;
    max-height: 500px !important;
    min-height: 250px !important;
}

@media (max-width: 1200px) {
    .overallSewageChart canvas {
        height: 400px !important;
    }
}


@media (max-width: 992px) {
    .overallSewageChart canvas {
        height: 360px !important;
    }
}


@media (max-width: 768px) {
    .overallSewageChart canvas {
        height: 320px !important;
    }
}


@media (max-width: 576px) {
    .overallSewageChart canvas {
        height: 300px !important;
    }
}


@media (max-width: 400px) {
    .overallSewageChart canvas {
        height: 280px !important;
    }
}


.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);
}

.sewage-plot-title > button {
    border-color: var(--c-border) !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);
}

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

body.theme-influenza {
    --c-bg: #93030e;
    --c-border: #D32F2F;
    --c-bg-20: rgba(211,47,47,.20);
    --c-glow: rgba(211,47,47,.35);
}

body.theme-rsv {
    --c-bg: #d06307;
    --c-border: #ff7a09;
    --c-bg-20: rgba(255,122,9,.20);
    --c-glow: rgba(255,122,9,.35);
}

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

.bottom-nav {
    position: fixed;
    left: 5px;
    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);
    align-items: center;
    display: flex;
}

.bottom-scroll {
    flex: 1 1 auto;
    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-extra{
    flex: 0 0 auto;
    padding: 0 8px;
    display: flex;
    align-items: center;
}

.bottom-help-btn{
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    color: #e8e8e8 !important; text-decoration: none !important;
}
.bottom-help-btn:hover{ background: rgba(255,255,255,.16); color:#fff !important; }
.bottom-help-btn i{ font-size: 1.1rem; line-height: 1; }

.bottom-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 76px;
    height: 58px;
    padding: 4px 6px;
    text-decoration: none !important;
    color: #fff !important;
    border-radius: 10px;
    background: transparent;
    transition: background .15s, transform .06s;
    scroll-snap-align: center;
    border: 1px solid #d3d3d34a;
}

.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;
}



.sidebar-letter {
    font-size: 1.2rem;
    font-weight: bold;
    margin-right: 8px;
}

.sidebar-section {
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
}

.sidebar-section-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: #ccc;
    margin-bottom: 0.5rem;
}

.pathogen-badge {
    --badge: #666;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font: 700 0.95rem/1 system-ui, sans-serif;
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 6px 16px rgba(0,0,0,.25), 0 0 0 2px rgba(255,255,255,.06) inset;
    background: var(--badge);
}

.badge-s {
    --badge: #037ab0;
}

.badge-i {
    --badge: #D32F2F;
}

.badge-r {
    --badge: #ff7a09;
}

.sidebar .sidebar-btn:not(.active) .pathogen-badge,
.bottom-nav .bottom-btn:not(.active) .pathogen-badge {
    filter: grayscale(.2) brightness(.85);
    opacity: .9;
}

.chartmode-btn {
    display: inline-block;
    width: 36px;
    margin: 0 4px;
    font-weight: bold;
    background-color: #444 !important;
    border: none !important;
}

.chartmode-btn.active {
    background-color: #037ab0 !important;
    color: #fff !important;
}

.map-overlay-panel {
    inset: auto;
    left: 50%;
    transform: translateX(-50%);
    max-height: 80dvh;
    display: flex;
    flex-direction: column;
}

.map-overlay-header {
    cursor: move;
    user-select: none;
}

@media (max-width: 1024px) {
    .map-overlay-panel {
        transform: none;
    }
}


 
 
 

.map-overlay-dialog .map-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    background: #2e2e2e;
    color: #fff;
    user-select: none;
}

.map-overlay-body {
    background: #5a5a5a;
    color: #fff;
    padding: 10px 12px 12px;
    max-height: min(80dvh, 900px);
    overflow: auto;
}

.overlay-inner .sewage-plot-title > button {
    background-color: #295f88 !important;
    border-color: #037ab0 !important;
    color: white !important;
}

.map-overlay-dialog .ui-dialog-titlebar.ui-widget-header {
    background: #4e4e4e !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

@media (max-width: 1024px) {

    .map-overlay-body {
        max-height: calc(100dvh - var(--overlay-title-h));
    }
}


.ui-widget-overlay {
    z-index: 2000 !important;
}

.map-overlay-dialog .ui-dialog-title {
    width: 100% !important;
    white-space: normal !important;
    font-size: 1.1rem;
    line-height: 1.3;
    padding-right: 2rem;
}

:root {
    --overlay-title-h: 56px;
}

.map-overlay-dialog .ui-dialog-titlebar.ui-widget-header {
    display: flex;
    align-items: center;
    height: auto !important;
    min-height: var(--overlay-title-h);
    border: 0;
    padding: 0;
    cursor: move;
}

.map-overlay-dialog .ui-dialog-titlebar .ui-dialog-title {
    flex: 1 1 auto;
    width: auto !important;
    margin: 0;
    padding: 0;
}

.map-overlay-dialog .map-overlay-header .sewage-plot-title {
    white-space: normal;               
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);  
    line-height: 1.3;
}

.map-overlay-dialog .map-overlay-header {
    width: 100%;
}

.map-overlay-dialog .map-overlay-header .sewage-plot-title {
    font-size: 1.25rem;
    line-height: 1.25;
    white-space: normal;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.map-overlay-dialog .map-overlay-header > div:last-child {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
    white-space: nowrap;
}

.map-overlay-dialog .map-overlay-header > div:last-child a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    text-decoration: none;
    color: #fff !important;
    background: transparent;
}

.map-overlay-dialog .map-overlay-header > div:last-child a:hover {
    background: rgba(255,255,255,.15);
}

.map-overlay-dialog .map-overlay-header > div:last-child i.pi {
    font-size: 1.1rem;
    line-height: 1;
}

@media (max-width:600px), (pointer:coarse) {
    .map-overlay-dialog .map-overlay-header > div:last-child a {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .map-overlay-dialog .map-overlay-header > div:last-child i.pi {
        font-size: 1.25rem;
    }
}


.map-overlay-dialog .ui-widget-header a {
    color: #fff !important;
}

.map-overlay-dialog.ui-dialog {
    position: fixed;
    top: 10vh;
    left: auto;
    z-index: 2001 !important;
    inset: 10vh var(--overlay-gutter) auto var(--overlay-gutter);  
    width: auto !important;
    max-width: 1800px;
    max-height: 86dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid var(--c-border);
    border-radius: 10px;
    box-shadow: -2px 8px 26px rgba(0,0,0,.55);
}

@media (min-width:1600px) {
    .map-overlay-dialog.ui-dialog {
        max-width: 82vw;
    }
}


@media (min-width:1920px) {
    .map-overlay-dialog.ui-dialog {
        max-width: 80vw;
    }
}


@media (min-width:2560px) {
    .map-overlay-dialog.ui-dialog {
        max-width: 77vw;
    }
}


.map-overlay-dialog.ui-dialog.ui-resizable-resizing {
    max-width: none !important;
    min-width: 360px !important;
}

.map-overlay-dialog.ui-dialog.ui-draggable {
    transform: none !important;
}

.map-overlay-dialog .ui-dialog-content.ui-widget-content {
    flex: 1 1 auto;
    min-width: 0;
    overflow: auto;
    max-height: calc(86dvh - var(--overlay-title-h)) !important;
    background: #4e4e4e !important;
    color: #fff !important;
    padding: 12px !important;
    box-sizing: border-box;
}

.map-overlay-dialog.ui-dialog.ui-dialog-maximized {
    inset: 16px !important;
    left: 16px !important;
    top: 16px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 8px;
    min-width: 0 !important;
    max-width: none !important;
}

.map-overlay-dialog.ui-dialog.ui-dialog-maximized
.ui-dialog-content.ui-widget-content {
    max-height: calc(100dvh - var(--overlay-title-h) - 32px) !important;
}

.map-overlay-dialog.ui-dialog {
    min-width: 70vw;
    max-width: 1200px;
}

.map-overlay-dialog .ui-dialog-titlebar {
    flex: 0 0 auto;
}

.map-overlay-dialog .ui-dialog-content {
    flex: 1 1 auto;
    overflow: auto;
    height: auto !important;
    width: auto !important;
    padding: 12px !important;
    max-height: calc(86dvh - var(--overlay-title-h)) !important;
}

@media (min-width:601px) and (max-width:1024px) {
    .map-overlay-dialog.ui-dialog {
        width: 92vw;
        max-height: 88dvh;
    }
}


.map-overlay-dialog .ui-resizable-se {
    width: 28px;
    height: 28px;
    right: 6px;
    bottom: 6px;
    cursor: nwse-resize;
    background: rgba(0,0,0,0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-overlay-dialog .ui-resizable-se::after {
    content: "\f58d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
    color: rgba(255,255,255,0.85);
}

@media (pointer: coarse) {
    .map-overlay-dialog .ui-resizable-se {
        width: 28px;
        height: 28px;
    }
}


@media (max-width:600px), (pointer:coarse) {
    .map-overlay-dialog.ui-dialog {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #4e4e4e !important;
        overflow: hidden !important;
        z-index: 2005 !important;
    }

    .map-overlay-dialog .ui-dialog-content.ui-widget-content {
        background: #4e4e4e !important;
        max-height: none !important;
        height: calc(100dvh - var(--overlay-title-h)) !important;
        padding-bottom: calc(env(safe-area-inset-bottom,0px) + 8px) !important;
        box-sizing: border-box;
        overflow: auto !important;
    }

    .map-overlay-dialog .ui-resizable-handle {
        display: none !important;
    }
}


.overlay-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 8px 4px;
    margin: 0 0 8px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.switch-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none !important;
    color: #fff !important;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    transition: background .15s, box-shadow .15s, transform .06s;
}

.switch-chip:hover {
    background: rgba(255,255,255,.10);
    transform: translateY(-1px);
}

.switch-chip.active {
    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);
}

.switch-chip .chip-label {
    font-size: .9rem;
    white-space: nowrap;
}

.switch-chip .pathogen-badge {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width:600px) {
    .overlay-switcher {
        gap: 6px;
    }

    .switch-chip {
        flex: 1 1 calc(50% - 6px);
        justify-content: flex-start;
        padding: 10px 12px;
        border-radius: 14px;
    }
}


.chart-actions .chartAction.ui-button {
    background: #5f5f5f !important;
    border-color: rgba(255,255,255,.25) !important;
    color: #fff !important;
    transition: background .2s, border-color .2s, transform .1s;
}

.chart-actions .chartAction.ui-button:hover {
    background: #707070 !important;
    border-color: rgba(255,255,255,.35) !important;
    transform: translateY(-1px);
}

.chart-actions .chartAction.ui-button:active {
    background: #4c4c4c !important;
    transform: translateY(0);
}

.chart-actions .chartAction .ui-button-icon-left {
    color: #fff !important;
}

.map-overlay-dialog .map-overlay-header,
.map-overlay-dialog .ui-dialog-content.ui-widget-content {
    min-width: 0;
}

@media (max-width: 1024px) {
    .map-overlay-dialog.ui-dialog {
        inset: 6vh max(12px, 3vw) auto max(12px, 3vw);
        max-height: calc(100dvh - 6vh);
    }

    .map-overlay-dialog .ui-dialog-content.ui-widget-content {
        max-height: calc(100dvh - var(--overlay-title-h)) !important;
    }
}


.badge-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    white-space: nowrap;
}

.badge-pill.level-0 {
    background-color: #239b5c;
}

.badge-pill.level-1 {
    background-color: #66bb6a;
}

.badge-pill.level-2 {
    background-color: #ff9800;
}

.badge-pill.level-3 {
    background-color: #f44336;
}

.badge-pill.level-4 {
    background-color: #b71c1c;
}

.circle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.1rem;
    height: 2rem;
    min-width: 4.2rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    background: #4caf50;
    box-shadow: 0 2px 4px rgba(0,0,0,.25),
            0 0 0 1px rgba(255,255,255,.08) inset;
}

.circle-badge.level-0 {
    background-color: #5fae40;
}

.circle-badge.level-1 {
    background-color: #22A884;
}

.circle-badge.level-2 {
    background-color: #2A788E;
}

.circle-badge.level-3 {
    background-color: #414487;
}

.circle-badge.level-4 {
    background-color: #440154;

}

.circle-badge.level--1 {
    background-color: #888;
}

.circle-badge.inline {
    display: inline-block;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.85rem;
    line-height: 1.2;
    vertical-align: middle;
    margin-right: 6px;
    margin-bottom: 3px;
}


.overview-title-with-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.activity-card {
    display: flex;
    gap: 18px;
    padding: 16px 18px;
    border-radius: 8px;
    border-color: var(--c-border) !important;
    background: #454545;
    border: 2px solid;
    box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
    color: #111827;
    margin: 10px 0 18px 0;
}

.activity-left {
    flex: 0 0 auto;
}

.activity-right {
    flex: 1 1 auto;
    min-width: 0;
}

.activity-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.activity-text {
    line-height: 1.35;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.activity-meta {
    margin-top: 6px;
    font-size: .85rem;
    opacity: .8;
}

.theme-sarscov2 .activity-card,
.theme-influenza .activity-card,
.theme-rsv .activity-card {
    background: #454545;
    color: #f3f4f6;
    border-color: rgba(255,255,255,.25);
}

.activity-title {
    color: #fff;
}


.activity-meta {
    color: rgba(255,255,255,.75);
}

.activity-card .circle-badge {
    letter-spacing: .03em;
}

.activity-card {
    position: relative;
}



.trend-block {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: 1.1rem;
}

.trend-row {
    padding: 5px;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.trend-row .label {
    flex: 0 0 250px;
    font-weight: 600;
    opacity: .9;
}

.value-with-icon {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.chart-actions {
    margin-top: 0;
    margin-bottom: 5px;
}

.chart-actions .chartAction:focus,
.chart-actions .chartAction.ui-state-focus {
    box-shadow: none !important;
    outline: none !important;
}

.chart-actions .ui-button .ui-icon {
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
}

.content-inner {
    max-width: 2200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

#overviewChart,
#mapContainer {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--bayvoc-gutter);
    padding-right: var(--bayvoc-gutter);
}

.map-frame,
.vocmap {
    width: 98%;
    box-sizing: border-box;
}

.overlay-switcher .switcher-row {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
}

.overlay-switcher .chip-row {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.locSelect {
    min-width: 220px;
}

.loc-select-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #ddd;
}

@media (max-width: 600px) {
    .locSelect {
        min-width: 100%;
    }

    .overlay-switcher .chip-row {
        width: 100%;
    }
}


.ui-selectonemenu-panel.loc-select-panel {
    z-index: 11050 !important;
}

.map-hint-wrapper {
    display: flex;
    justify-content: center;
    margin: 0 0 10px 0;
}

.map-hint-box {
    background: rgba(255,255,255,0.08);      /* leicht transparent statt weiß */
    color: #f2f2f2;                          /* hellgrauer Text */
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 8px 12px;
    font: 0.95rem/1.4 system-ui, sans-serif;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: center;
    text-align: center;
}

.map-hint-box i {
    opacity: .9;
}

.leaflet_legend {
    pointer-events: auto;
}

.map-tooltip {
    z-index: 4000;
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: block;
}

@media (min-width: 601px) {
    .mobile-only {
        position: absolute !important;
        left: -10000px !important;
        top: auto !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
    }
}


@media (max-width: 600px) {
    .desktop-only {
        display: none !important;
    }
}


.mobile-dark .p-datatable-header,
.mobile-dark .p-datatable-thead > tr > th {
    background: #1f1f1f;
    color: #ddd;
    border-color: #3c3c3c;
}

.mobile-dark .p-datatable-tbody > tr {
    background: #2b2b2b;
    border-color: #3c3c3c;
}

.mobile-dark .p-datatable-tbody > tr > td {
    border-color: #3c3c3c;
    color: #f1f1f1;
}

.mobile-dark .p-paginator {
    background: #1f1f1f;
    color: #cfcfcf;
    border-color: #3c3c3c;
}

.mobile-dark .p-inputgroup,
.mobile-dark .p-inputtext {
    background: #2b2b2b;
    color: #eee;
    border-color: #454545;
}

.mobile-dark .p-inputgroup-addon {
    background: #2b2b2b;
    color: #bbb;
    border-color: #454545;
}

.loc-name {
    font-weight: 600;
}

.muted {
    color: #c8c8c8;
}

.chip {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    border: 1px solid rgba(0,0,0,.2);
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.6rem;
    padding: 0 .5rem;
    border-radius: 999px;
    font-weight: 800;
    border: 1px solid rgba(0,0,0,.25);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.mobile-dark.ui-datatable .ui-datatable-tablewrapper {
    background: #2b2b2b;
    border: 1px solid #3c3c3c;
    border-radius: 12px;
    overflow: hidden;
}

.mobile-dark.ui-datatable thead th {
    background: #1f1f1f;
    color: #ddd;
    border-color: #3c3c3c;
}

.mobile-dark.ui-datatable .ui-datatable-data > tr {
    background: #2b2b2b;
}

.mobile-dark.ui-datatable .ui-datatable-data > tr:nth-child(even) {
    background: #2f2f2f;
}

.mobile-dark.ui-datatable .ui-datatable-data > tr > td {
    border-top: 1px solid #3c3c3c;
    color: #f1f1f1;
}

.mobile-dark.ui-datatable .ui-paginator.ui-widget-header {
    background: #1f1f1f;
    color: #cfcfcf;
    border-color: #3c3c3c;
}

.mobile-dark.ui-datatable .ui-paginator .ui-state-default {
    background: transparent;
    color: #ddd;
    border: 0;
}

.mobile-dark.ui-datatable .ui-paginator-page.ui-state-active {
    background: #3a3a3a;
    border-radius: 8px;
}

.mobile-dark.ui-datatable .ui-reflow-label {
    color: #cfcfcf;
}

.mobile-dark.ui-datatable .ui-reflow-dropdown {
    background: #2b2b2b;
    color: #eee;
    border: 1px solid #454545;
}

.mobile-only .ui-inputtext {
    background: #2b2b2b;
    color: #eee;
    border: 1px solid #454545;
}

.mobile-only .p-inputgroup-addon {
    background: #2b2b2b;
    color: #bbb;
    border: 1px solid #454545;
}

@media (max-width:600px) {
    .mobile-dark.ui-datatable .ui-datatable-reflow .ui-datatable-data > tr > td {
        padding-top: .35rem;
        padding-bottom: .35rem;
    }
}


#detailform\:mobileTable .chip.lvl-0 {
    background-color: #7AD151;
    color: #091a0a;
    border-color: #7AD15155;
}

#detailform\:mobileTable .chip.lvl-1 {
    background-color: #22A884;
    color: #061a14;
    border-color: #22A88455;
}

#detailform\:mobileTable .chip.lvl-2 {
    background-color: #2A788E;
    color: #eef8ff;
    border-color: #2A788E66;
}

#detailform\:mobileTable .chip.lvl-3 {
    background-color: #414487;
    color: #f3f5ff;
    border-color: #41448766;
}

#detailform\:mobileTable .chip.lvl-4 {
    background-color: #440154;
    color: #fff7ff;
    border-color: #44015466;
}

#detailform\:mobileTable .chip.lvl-none {
    background-color: #5c6770;
    color: #e9ecef;
    border-color: #5c677066;
}

#detailform\:mobileTable .chip.trend-down {
    background-color: #F7E225;
    color: #1b1b1b;
    border-color: #F7E22555;
}

#detailform\:mobileTable .chip.trend-down-light {
    background-color: #FFD65A;
    color: #1b1b1b;
    border-color: #FFD65A55;
}

#detailform\:mobileTable .chip.trend-flat {
    background-color: #F39C34;
    color: #1b1b1b;
    border-color: #F39C3455;
}

#detailform\:mobileTable .chip.trend-up-light {
    background-color: #D24B3D;
    color: #ffffff;
    border-color: #D24B3D55;
}

#detailform\:mobileTable .chip.trend-up {
    background-color: #8B1A1A;
    color: #ffffff;
    border-color: #8B1A1A55;
}

#detailform\:mobileTable .chip.no-data {
    background-color: #6C757D;
    color: #ffffff;
    border-color: #6C757D55;
}

#detailform\:mobileTable .chip {
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
}

#detailform\:mobileTableContainer,
#detailform\:mobileTable {
    --tbl-bg: #2f3236;
    --tbl-head: #3a3f44;
    --tbl-border: #4d5359;
    --txt: #f0f0f0;
}

#detailform\:mobileTable .ui-datatable-scrollable-header,
#detailform\:mobileTable thead th.ui-state-default {
    background: var(--tbl-head) !important;
    color: var(--txt) !important;
    border-color: var(--tbl-border) !important;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
}

#detailform\:mobileTable .ui-datatable-scrollable-body {
    border-color: var(--tbl-border) !important;
    background: var(--tbl-bg);
}

#detailform\:mobileTable .th-filter .ui-column-filter,
#detailform\:mobileTable thead .ui-column-filter {
    background: rgba(255,255,255,.05);
    border: 1px solid var(--tbl-border);
    color: var(--txt);
}

#detailform\:mobileTable tr {
    cursor: default;
}

#detailform\:mobileTable .ui-state-hover,
#detailform\:mobileTable .ui-widget-content:hover {
    background: transparent !important;
}

#detailform\:mobileTable tbody td {
    padding: 10px 12px !important;
    border-top: 1px solid rgba(255,255,255,.06);
}


#detailform\:mobileTable .row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
}

#detailform\:mobileTable .row-action .pi {
    font-size: 1.25rem;
    line-height: 1;
    color: #7ec3ff;
}

#detailform\:mobileTable .row-action:hover {
    background: rgba(255,255,255,.12);
    text-decoration: none;
}

#detailform\:mobileTable .loc-name {
    color: #fff;
    font-weight: 600;
}

#detailform\:mobileTable .chip {
    display: inline-flex;
    align-items: center;
    gap: .5ch;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    color: #eaeaea;
}

:root {
    --txt: #f0f0f0;
    --tbl-bg: #2f3236;
    --tbl-head: #3a3f44;
    --tbl-border: #4d5359;
    --wval-0: #5EA943;
    --wval-0-fg: #091a0a;
    --wval-1: #22A884;
    --wval-1-fg: #061a14;
    --wval-2: #2A788E;
    --wval-2-fg: #ffffff;
    --wval-3: #414487;
    --wval-3-fg: #ffffff;
    --wval-4: #440154;
    --wval-4-fg: #ffffff;
    --trend-down: #F7E225;
    --trend-down-fg: #1b1b1b;
    --trend-down-light: #FFD65A;
    --trend-down-light-fg: #1b1b1b;
    --trend-flat: #F39C34;
    --trend-flat-fg: #1b1b1b;
    --trend-up-light: #D24B3D;
    --trend-up-light-fg: #fff;
    --trend-up: #8B1A1A;
    --trend-up-fg: #fff;
    --no-data: #6C757D;
    --no-data-fg: #fff;
    --overlay-gutter: clamp(12px, 3vw, 28px);
}

.table-card {
    background: #262b30;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid var(--c-border);
    box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 6px 18px rgba(0,0,0,.25);
}

.pf-table-dark.ui-datatable {
    color: var(--txt);
}

.pf-table-dark .ui-datatable-scrollable-header,
.pf-table-dark thead th.ui-state-default {
    background: var(--tbl-head) !important;
    color: var(--txt) !important;
    border-color: var(--tbl-border) !important;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
}

.pf-table-dark .ui-datatable-scrollable-body {
    background: var(--tbl-bg);
    border-color: var(--tbl-border) !important;
}

.pf-table-dark .ui-datatable-data > tr:nth-child(even) td {
    background: rgba(255,255,255,.015);
}

.pf-table-dark tbody td {
    border-top: 1px solid rgba(255,255,255,.06) !important;
    padding: 10px 12px !important;
}

.pf-table-dark .ui-column-filter {
    background: rgba(255,255,255,.05);
    border: 1px solid var(--tbl-border);
    color: var(--txt);
}

.pf-table-dark .action-col {
    width: 52px;
    text-align: center;
}

.pf-table-dark .row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(127,224,255,.35);
}

.pf-table-dark .row-action .pi {
    font-size: 1.25rem;
    color: #7ec3ff;
}

.pf-table-dark .row-action:hover {
    background: rgba(127,224,255,.10);
    border-color: rgba(127,224,255,.55);
}

.pf-table-dark tr {
    cursor: default;
}

.pf-table-dark .ui-state-hover {
    background: transparent !important;
}

.chip {
    align-items: center;
    gap: .5ch;
}

.chip.lvl-0 {
    background: var(--wval-0);
    color: var(--wval-0-fg);
}

.chip.lvl-1 {
    background: var(--wval-1);
    color: var(--wval-1-fg);
}

.chip.lvl-2 {
    background: var(--wval-2);
    color: var(--wval-2-fg);
}

.chip.lvl-3 {
    background: var(--wval-3);
    color: var(--wval-3-fg);
}

.chip.lvl-4 {
    background: var(--wval-4);
    color: var(--wval-4-fg);
}

.chip.lvl-none {
    background: var(--no-data);
    color: var(--no-data-fg);
}

.chip.trend-down {
    background: var(--trend-down);
    color: var(--trend-down-fg);
}

.chip.trend-down-light {
    background: var(--trend-down-light);
    color: var(--trend-down-light-fg);
}

.chip.trend-flat {
    background: var(--trend-flat);
    color: var(--trend-flat-fg);
}

.chip.trend-up-light {
    background: var(--trend-up-light);
    color: var(--trend-up-light-fg);
}

.chip.trend-up {
    background: var(--trend-up);
    color: var(--trend-up-fg);
}

.chip.no-data {
    background: var(--no-data);
    color: var(--no-data-fg);
}




@media (min-width:601px) {
    .mobile-only {
        position: absolute!important;
        left: -10000px!important;
        top: auto!important;
        width: 1px!important;
        height: 1px!important;
        overflow: hidden!important;
    }
}


@media (max-width:600px) {
    .desktop-only {
        display: none!important;
    }
}


#detailform\:mobileTableHeader {
    padding: 10px 12px;
}

.pf-table-dark {
    --tbl-head: #3a3f44;
    --tbl-row: #2b2f33;
    --tbl-row-alt: #30353a;
    --tbl-border: #4d5359;
    --txt: #e9edf2;
}

#detailform\:mobileTable.pf-table-dark .ui-datatable-scrollable-header,
#detailform\:mobileTable.pf-table-dark thead th {
    background: var(--tbl-head) !important;
    color: var(--txt) !important;
    border-color: var(--tbl-border) !important;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
}

#detailform\:mobileTable.pf-table-dark .ui-datatable-scrollable-body,
#detailform\:mobileTable.pf-table-dark .ui-datatable-scrollable-body table,
#detailform\:mobileTable.pf-table-dark .ui-datatable-data > tr,
#detailform\:mobileTable.pf-table-dark .ui-datatable-data > tr > td,
#detailform\:mobileTable.pf-table-dark .ui-widget-content {
    background: var(--tbl-row) !important;
    color: var(--txt) !important;
    border-color: var(--tbl-border) !important;
}

#detailform\:mobileTable.pf-table-dark .ui-datatable-data > tr:nth-child(even) {
    background: var(--tbl-row-alt) !important;
}

#detailform\:mobileTable.pf-table-dark .ui-datatable-data > tr > td {
    border-top: 1px solid var(--tbl-border) !important;
    padding: 10px 12px !important;
}

#detailform\:mobileTable.pf-table-dark .action-col {
    width: 52px;
    text-align: center;
}

#detailform\:mobileTable.pf-table-dark .row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
}

#detailform\:mobileTable.pf-table-dark .row-action .pi {
    font-size: 1.25rem;
    color: #7ec3ff;
}

#detailform\:mobileTable.pf-table-dark .row-action:hover {
    background: rgba(255,255,255,.12);
}

.panel {
    margin: 0 auto 16px;
    background: #454545;
    border: 2px solid var(--c-border);
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}

body .ui-widget.sewage-plot-title, .sewage-plot-title {
    font-size: clamp(1.3rem, 1.6vw + 0.6rem, 1.6rem);
    font-weight: bold;
    padding: 5px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.map-overlay-header.sewage-plot-title {
    border-bottom: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 15px !important;
    padding-top: 15px;
}

.map-overlay-header.sewage-plot-title .title-row  {
    border-bottom: none !important;
}

.title-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.title-row, .title-row * { font-size: inherit; line-height: inherit; }

 
.title-row .sewage_info_button.ui-button.ui-button-icon-only {
    width: 42px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 6px;
    line-height: 1 !important;
    background: rgba(255,255,255,0.08) !important;  
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #ffffff !important;                      
    transition: background 0.2s ease, transform 0.1s ease;
}

 
.title-row .sewage_info_button.ui-button.ui-button-icon-only:hover {
    background: rgba(255,255,255,0.18) !important;
    transform: translateY(-1px);
}

 
.title-row .sewage_info_button.ui-button.ui-button-icon-only:active,
.title-row .sewage_info_button.ui-button.ui-button-icon-only:focus,
.title-row .sewage_info_button.ui-button.ui-button-icon-only.ui-state-active,
.title-row .sewage_info_button.ui-button.ui-button-icon-only.ui-state-focus {
    background: rgba(255,255,255,0.22) !important;
    box-shadow: none !important;
    outline: none !important;
}



.view-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

.view-toggle .btn {
    font: inherit;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #666;
    background: #2d2d2d;
    color: #eee;
    cursor: pointer;
}

.view-toggle .btn:hover {
    background: #3a3a3a;
}

.hidden {
    display: none !important;
}

.content-inner > .panel {
    box-sizing: border-box;
    max-width: 1280px;
    margin: 0 auto 24px;
    padding: 12px 16px;
}

.panel {
    position: relative;
}

.view-switch .toggle-chip {
    appearance: none;
    border: 1px solid #6aa4c3;
    background: #2a2a2a;
    color: #dbefff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.view-switch .toggle-chip:hover {
    background: #5a5a5a;
}

 
@media (max-width: 600px) {
    .view-switch .toggle-chip {
        padding: 10px 14px;
        font-size: 14px;
    };
}

@media (min-width: 1600px) {
    .sewage-plot-title {
        font-size: 1.7rem;
    }
}

.table-card .action-col {
    width: 56px !important;
    min-width: 56px !important;
    text-align: center;
}

.table-card .row-action {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #3e3e3e;
}

.table-card .row-action i {
    font-size: 1rem;
}

.table-card .ui-datatable table {
    table-layout: fixed;
}

@media (max-width: 900px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }
}


.panel.chartBorder,
.panel.map-wrapper,
.panel.table-card {
    max-width: 1200px;
    margin: 0 auto;
}

.toggle-chip {
    appearance: none;
    border: 1px solid #6aa4c3;
    background: #2a2a2a;
    color: #dbefff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.toggle-chip:hover {
    background: #333;
}

@media (max-width: 600px) {
    .toggle-chip {
        padding: 10px 14px;
        font-size: 14px;
    }
}



#mobileTableContainer .ui-datatable th,
#mobileTableContainer .ui-datatable td {
    overflow: hidden;
    white-space: nowrap;
}

.panel.map-wrapper,
.panel.table-card {
    position: relative;
}

:root {
    --bayvoc-max: 1600px;
    --bayvoc-gutter: clamp(8px, 2vw, 24px);
}

.content .activity-card,
.content .panel {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--bayvoc-gutter);
    padding-right: var(--bayvoc-gutter);
}

#mobileTableContainer .ui-datatable .action-col {
    width: 15%;
    padding-right: 8px;
}

.content .panel,
.content .activity-card {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.view-switch .toggle-chip {
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

@media (max-width: 600px) {
    .view-switch .toggle-chip {
        padding: 10px 14px;
        font-size: 14px;
    }
}


.vocmap {
    width: 100%;
}

#mobileTableContainer .ui-datatable .col-loc {
    width: 44%;
}

#mobileTableContainer .ui-datatable .col-cat {
    width: 38%;
}

#mobileTableContainer .ui-datatable .action-col { width: 56px; min-width: 56px; }

#detailform\:mobileTable.ui-datatable,
#detailform\:mobileTable .ui-datatable-scrollable-header,
#detailform\:mobileTable .ui-datatable-scrollable-body {
    width: auto !important;
}

#detailform\:mobileTable th,
#detailform\:mobileTable td {
    box-sizing: border-box;
}

@media (min-width: 1200px) and (max-width: 1599px) {
    :root {
        --bayvoc-max: clamp(1100px, 94vw, 1600px);
    }
}


@media (min-width: 1920px) {
    :root {
        --bayvoc-max: clamp(1200px, 88vw, 1900px);
    }
}


@media (max-width: 600px) {
    .content .panel {
        padding-inline: 10px;
    }
}


.content-inner {
    padding-inline: var(--bayvoc-gutter);
}

.content-inner > .activity-card,
.content-inner > .panel,
.content-inner > .sewage_header,
#detailform\:disclaimer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

body.bayvoc {
    --rail-max: clamp(1100px, 92vw, 1800px);
    --rail-gutter: clamp(8px, 2vw, 24px);
}

body.bayvoc .content-inner {
    width: min(96vw, var(--rail-max));
    max-width: var(--rail-max);
    margin: 0 auto;
    padding-inline: var(--rail-gutter);
    box-sizing: border-box;
}

body.bayvoc .content-inner > .panel,
body.bayvoc .content-inner > .activity-card,
body.bayvoc .content-inner > .sewage_header,
body.bayvoc .content-inner > #detailform\:disclaimer,
body.bayvoc #overviewChart,
body.bayvoc #mapContainer {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

body.bayvoc .panel.chartBorder,
body.bayvoc .panel.map-wrapper,
body.bayvoc .panel.table-card,
body.bayvoc .content .panel,
body.bayvoc .content-inner > .panel {
    max-width: none !important;
    width: 100% !important;
}

body.bayvoc #detailform\:mobileTable.ui-datatable,
body.bayvoc #detailform\:mobileTable .ui-datatable-scrollable-header,
body.bayvoc #detailform\:mobileTable .ui-datatable-scrollable-body {
    width: 100% !important;
    box-sizing: border-box;
}

body.bayvoc .map-frame,
body.bayvoc .vocmap {
    width: 100% !important;
    margin: 0 !important;
}

.content-inner {
    margin-inline: auto;
}

.content-inner > .activity-card,
.content-inner > .panel,
.content-inner > .sewage_header,
#detailform\:disclaimer {
    margin-inline: 0 !important;
}



body {
    color: #e9edf2;
}

html, body, .content {
    overflow-x: clip;

}

.sewage-plot-title {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
}

@media (max-width:600px) {
    .view-switch .toggle-chip {
        padding: 10px 14px;
        font-size: 14px;
    }
}


 
html.sewage {
    font-size: clamp(13px, 1.6vw + 0.5rem, 16px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    line-height: 1.5;
}

 
@media (max-width: 600px), (pointer: coarse) {
    body { line-height: 1.55; }

     
    .map-overlay-dialog .map-overlay-header .sewage-plot-title {
        font-size: clamp(1.05rem, 3.8vw, 1.35rem);
        line-height: 1.25;
        white-space: normal;
    }
    .map-overlay-body { font-size: 1rem; }

    .map-overlay-dialog .toggle-max {
        display: none !important;
    }
     
    .bottom-btn span,
    .map-hint-box,
    .loc-select-label,
    .chip .chip-label,
    .pf-table-dark .ui-datatable-data > tr > td,
    .pf-table-dark thead th,
    .mobile-only .ui-inputtext,
    .map-tooltip,
    #ngs-legend-container.legend-flow .legend-item {
        font-size: 1rem;
    }

     
    .chip { font-size: .95rem; }
    .pathogen-badge { font-size: .95rem; }

     
    .toggle-chip,
    .chart-actions .ui-button {
        font-size: 1rem;
    }
}

 
@media (max-width: 600px) {
    .sewage-plot-title {
        font-size: clamp(1.1rem, 4vw, 1.35rem);
        line-height: 1.25;
    }
}

@media (max-width: 600px), (pointer: coarse) {
    .chart-actions .ui-button.chartAction {
        width: 42px !important;
        height: 32px !important;
        border-radius: 10px;
        font-size: 1rem !important;          
    }

    .chart-actions .chartAction .ui-button-icon-left {
        font-size: 1.1rem !important;        
    }

     
    .chart-actions .chartAction + .chartAction {
        margin-left: 4px;
    }
}

@media (max-width: 600px), (pointer: coarse) {
    .chartAction.dragToggle {
        display: none !important;
    }
}

.activity-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: #3f3f3f;
    border: 2px solid #444;
    border-radius: 8px;
    padding: 1.2rem;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.activity-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.activity-card-head{
    font-size: 1.25rem;
    font-weight: 700;
    margin: 2px 0 8px;
    color: #fff;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding-bottom: 6px;
}

.activity-entry {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    padding: .75rem .9rem;
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
    align-items: flex-start;
    gap: .8rem;
}

@media (max-width: 760px) {
    .activity-entry {
        flex-direction: column;
        align-items: flex-start;
    }
}


.activity-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.activity-entry {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.activity-left {
    flex-shrink: 0;
}

.activity-right .activity-title {
    font-weight: 600;
    margin-bottom: .15rem; font-size: 1.1rem;
}

.activity-right .activity-text {
    line-height: 1.4;
    margin-bottom: .15rem;
}

.activity-right .activity-meta {
    font-size: 0.9rem;
    opacity: 0.85;
}

@media (max-width: 600px), (pointer:coarse) {
    .activity-entry       { padding: .6rem .7rem; gap: .6rem; }
    .activity-right .activity-title { font-size: 1rem; }
    .circle-badge         { height: 1.6rem; min-width: 3.2rem; font-size: .72rem; padding: 0 .7rem; }
}

@media (max-width: 600px), (pointer:coarse) {
    .circle-badge {
        height: 1.8rem;
        min-width: 3.6rem;
        font-size: 0.72rem;
        padding: 0 0.9rem;
        border-radius: 0.9rem;
    }
}

.badge-pill.inline {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 2px 8px;
    margin-left: .45rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .85rem;
    vertical-align: baseline;
}

 
@media (max-width: 600px), (pointer: coarse) {
    .badge-pill.inline { padding: 2px 7px; font-size: .82rem; margin-left: .4rem; }
}

.awesome-marker-icon-wval-verylow  { background-position: -891px 0; }
.awesome-marker-icon-wval-low      { background-position: -927px 0; }
.awesome-marker-icon-wval-moderate { background-position: -963px 0; }
.awesome-marker-icon-wval-high     { background-position: -999px 0; }
.awesome-marker-icon-wval-veryhigh { background-position: -1035px 0; }
 
 

 
.dashboard_footer {
    background:#000;
    color:#fff;
    width:100%;
    box-sizing:border-box;
    text-align:center;
    padding-top:10px;
}

 
.dashboard_footer .footer-title {
    color:#037ab0;
    font-weight:700;
    text-align:center;
    margin-bottom:6px;
    font-size:1rem;
    line-height:1.2;
    white-space: nowrap;
    margin-left: 20px;
}

 
.dashboard_footer .footer-logos {
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap: clamp(10px, 3vw, 28px);
    padding: 4px 12px max(14px, env(safe-area-inset-bottom, 8px));
    margin: 0 auto;
    max-width: 1600px;
    box-sizing:border-box;
}

 
.dashboard_footer .footer-logos .logo-item {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    min-width:180px;
    text-decoration:none;
}

 
.dashboard_footer .footer-logos .foerder_logo_footer {
    width:auto !important;
    height:clamp(70px, 12vw, 110px) !important;  
    max-width:min(80vw, 460px);
    object-fit:contain;
    display:block;
}

 
.dashboard_footer .footer-logos .amelag_logo_footer {
    width:auto !important;
    height:clamp(60px, 10vw, 90px) !important;
    max-width:min(70vw, 540px);
    object-fit:contain;
    display:block;
}

 
@media (max-width: 600px) {
    .dashboard_footer .footer-title { font-size:1rem; margin-bottom:8px; margin-left: 0; }
    .dashboard_footer .footer-logos { gap:16px 20px; }
    .dashboard_footer .footer-logos .logo-item { min-width:140px; }
}

 
@media (min-width: 601px) and (max-width: 991px) {
    .dashboard_footer .footer-logos { gap:18px 24px; }
    .dashboard_footer .footer-logos .foerder_logo_footer {
        height:clamp(80px, 9vw, 120px) !important;
    }
    .dashboard_footer .footer-logos .amelag_logo_footer {
        height:clamp(70px, 8vw, 100px) !important;
    }
}

 
@media (min-width: 992px) {
    .dashboard_footer .footer-logos { gap:20px 30px; }
    .dashboard_footer .footer-logos .foerder_logo_footer {
        height:clamp(68px, 7vw, 96px) !important;
    }
    .dashboard_footer .footer-logos .amelag_logo_footer {
        height:clamp(60px, 6vw, 86px) !important;
    }
}


.sewage_info_button_main.ui-button {
    background-color: #14364e !important;
    color: #fff !important;
    font-weight: 600;
    border: 1px solid #295f88 !important;
    border-radius: 6px;
    padding: 8px 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    transition: background .2s ease, transform .1s ease, box-shadow .2s ease, border-color .2s ease;
}

 
.sewage_info_button_main.ui-button:hover {
    background-color: #1c4a69 !important;
    border-color: #2d6e97 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

 
.sewage_info_button_main.ui-button:active {
    background-color: #0f2a3b !important;
    transform: translateY(0);
    box-shadow: inset 0 0 6px rgba(0,0,0,.4);
}

 
.sewage_info_button_main.ui-button:focus,
.sewage_info_button_main.ui-button.ui-state-focus {
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(3,122,176,.45) !important;  
}


.sewage_info_button.ui-button {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 6px;
    padding: 6px 10px;
    transition: background .2s, transform .1s, box-shadow .2s, border-color .2s;
}
.sewage_info_button.ui-button:hover {
    background: rgba(255,255,255,.18) !important;
    transform: translateY(-1px);
}
.sewage_info_button.ui-button:focus,
.sewage_info_button.ui-button.ui-state-focus {
    outline: none !important;
    box-shadow: none !important;
}
.sewage_info_button.ui-button:active {
    background: rgba(255,255,255,.22) !important;
    transform: translateY(0);
}

body.theme-sarscov2 .sewage_info_button_main.ui-button {
    background: #205f86 !important;
    border-color: #037ab0 !important;
}
body.theme-sarscov2 .sewage_info_button_main.ui-button:hover {
    background: #2a719e !important;
}

body.theme-influenza .sewage_info_button_main.ui-button {
    background: #93030e !important;
    border-color: #d32f2f !important;
}
body.theme-influenza .sewage_info_button_main.ui-button:hover {
    background: #a30a16 !important;
}


body.theme-rsv .sewage_info_button_main.ui-button {
    background: #d06307 !important;
    border-color: #ff7a09 !important;
}
body.theme-rsv .sewage_info_button_main.ui-button:hover {
    background: #dc740f !important;
}

:root{
    --bg:#333;
    --text:#ffffff;
    --border:#6b6b6b;
    --accent:#6fb8ff;
}




.app-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1002;
    padding:1.3rem 1rem;
    background:#222;
    color:#d8d8d8;
    display:flex;align-items:center;justify-content:space-between;
    box-shadow:0 4px 14px rgba(0,0,0,.35);
    border-bottom: 1px solid #4c4c4c;
}
.brand-link{
    display:flex; align-items:center; gap:.5rem;
    color:#fff; text-decoration:none; font-weight:600; letter-spacing:.2px;
}

.brand-icon{
    color:var(--c-border);
    font-size:1.25rem;
    animation:wave 3s ease-in-out infinite; 
    will-change:transform, opacity;
}


.brand-text{
    display:inline-block;
    transition: color .2s ease, letter-spacing .2s ease, transform .2s ease;
    position: relative;
}


.brand-text::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-2px;
    height:2px; background:var(--c-border);
    transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
}


.app-header a.brand-link,
.app-header a.brand-link:link,
.app-header a.brand-link:visited {
    color: #fff;
    text-decoration: none !important;
}

.app-header a.brand-link:hover,
.app-header a.brand-link:focus {
    color: inherit;              
    text-decoration: none !important;
}

.app-header .brand-icon{
    color: var(--c-border);
    font-size: 1.75rem;
    animation: wave 3s ease-in-out infinite;
    will-change: transform, opacity;
}


.app-header .brand-text{
    display: inline-block;
    position: relative;
    transition: transform .22s ease, color .22s ease, letter-spacing .22s ease;
    will-change: transform;
}

.app-header .brand-text::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-2px;
    height:2px; background:var(--c-border);
    transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
}

.app-header a.brand-link:hover .brand-text{
    color:#e6eef4;
    letter-spacing:.24px;
    transform: translateY(-2px);  
}

.app-header a.brand-link:hover .brand-text::after{
    transform:scaleX(1);
}


@keyframes wave{
    0%{
        transform:translateY(0);opacity:1;
    }
    50%{
              
             opacity:.5;
    }
    100%{
        transform:translateY(0);opacity:1;
    }
}


.sewage_method.page-wrap {
    max-width: 1000px;
    margin: calc(1.3rem * 2 + 60px) auto 40px;
    padding: 0 16px;
}


.sewage_method .hero {
    background: #222222;
    color: var(--text);
    border: 1px solid #5a5a5a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
    margin-bottom: 22px;
}
.sewage_method .hero-head {
    padding: 1rem 1.2rem;
    background: #292929;
    border-bottom: 1px solid #51565c;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .2px;
    display: flex; align-items: center; gap: .6rem;
}
.sewage_method .hero-body {
    padding: 1rem 1.2rem;
    color: var(--text);
    background: #3c3c3c;
    line-height: 1.6;
}


.page-wrap.sewage_method h1 {
    background: #2c3d4e;
    color: #ffffff;
    padding: 17px 22px;
    border-radius: 10px;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 3.5rem;
    margin-bottom: 1.8rem;
    letter-spacing: 0.2px;
    box-shadow: 0 0 12px rgba(0,0,0,0.35);
}

.page-wrap.sewage_method .panel {
    background: #454545;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.40);
    margin: 22px 0;
    padding-left:0;
    padding-right:0;
}


.page-wrap.sewage_method .panel-head {
    background: #292929;                                
    border-bottom: 1px solid #4e5560;
    padding: .85rem 1.2rem;
    display: flex; align-items: center; gap: .6rem;
}
.page-wrap.sewage_method .panel-head {
    display: flex;
    align-items: stretch;          /* <— wichtig: Höhe = Höhe des Headers */
    gap: 0.5rem;
}

.page-wrap.sewage_method .panel-head::before {
    content: "";
    flex: 0 0 4px;                 /* 4px breite „Säule“ reservieren */
    background: var(--accent);
    border-radius: 2px;
    align-self: stretch;           /* falls align-items später geändert wird */
    min-height: 1.2em;             /* Einzeilig => trotzdem sichtbar */
}

.page-wrap.sewage_method .panel-head h2 {
    margin: 0;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 750;
    letter-spacing: 0.3px;
    line-height: 1.3;
}



.page-wrap.sewage_method .panel-body {
    color: #f2f5f8;                                      
    line-height: 1.6;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding: 1.2rem;                                     
}
.sewage_method .panel-body code {
    background: #2f3338;
    border: 1px solid #4b525a;
    border-radius: 6px;
    padding: .35rem .5rem;
}

.page-wrap.sewage_method .panel-body ul {
    margin: 0.75rem 0 0.5rem 1.2rem;
}
.page-wrap.sewage_method .panel-body li {
    margin-bottom: 0.5rem;
}
.page-wrap.sewage_method .panel-body li::marker {
    color: rgba(180, 220, 255, 0.7);
}


.page-wrap.sewage_method .panel-body p strong,
.page-wrap.sewage_method .panel-body strong {
    color: #ffffff;
    font-weight: 800;
}
.page-wrap.sewage_method .kicker {
    display: block;
    margin-bottom: .25rem;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: .2px;
}


.page-wrap.sewage_method .panel-body a,
.page-wrap.sewage_method .panel-body .indexsystem {
    color: #9fd0ff;
    text-decoration: none;
}
.page-wrap.sewage_method .panel-body a:hover {
    text-decoration: underline;
}


.circle-badge.inline {
    display: inline-block;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.85rem;
    line-height: 1.2;
    vertical-align: middle;
    margin-right: 6px;
    margin-bottom: 3px;
    color: #fff;
    font-weight: 600;
}

.math-formula {
    background: #2f3338;
    border: 1px solid #4b525a;
    border-radius: 6px;
    padding: 0.6rem 1rem;
    margin: 1rem 0;
    font-size: 1.05rem;
    text-align: center;
    color: #e9eef6;
    height:100px;
}


body .wval-table.ui-datatable {
    background-color: #333;
    border: 1px solid #444;
    border-radius: 8px;
}


body .wval-table.ui-datatable thead th,
body .wval-table.ui-datatable .ui-datatable-thead > tr > th,
body .wval-table.ui-datatable thead th.ui-state-default {
    background-color: #3f3f3f !important;
    color: #f0f0f0 !important;
    border-color: #555 !important;
    font-weight: 600;
}


body .wval-table.ui-datatable .ui-datatable-data > tr,
body .wval-table.ui-datatable .ui-datatable-data > tr.ui-widget-content {
    background-color: #383838;
    color: #e6e6e6;
}


body .wval-table.ui-datatable .ui-datatable-data > tr > td {
    border-top: 1px solid #444;
}
body .wval-table.ui-datatable .ui-datatable-data > tr:nth-child(even) > td {
    background-color: #343434;
}


body .wval-table.ui-datatable .ui-datatable-data > tr.ui-state-hover > td {
    background-color: #444;
}
body .wval-table.ui-datatable .ui-datatable-data > tr.ui-state-highlight > td {
    background-color: #5050a0 ;
    color: #fff;
}

body .wval-table .ui-paginator {
    background-color: #333;
    color: #ccc;
    border-top: 1px solid #444;
}
body .wval-table .ui-datatable-data > tr.ui-datatable-odd {
    background-color: rgba(255,255,255,0.08);  
}

body .wval-table .ui-datatable-data > tr.ui-datatable-even {
    background-color: rgba(255,255,255,0.02);
}

@media (max-width: 640px) {
    body .wval-table .ui-datatable-data > tr {
        margin-bottom: 0.6rem;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 0 4px rgba(0,0,0,0.4);
    }
    body .wval-table .ui-datatable-data > tr.ui-datatable-odd {
        background-color: rgba(255,255,255,0.12) !important;
    }
    body .wval-table .ui-datatable-data > tr.ui-datatable-even {
        background-color: rgba(255,255,255,0.06) !important;
    }
    body .wval-table .ui-datatable-data td {
        padding: 0.4rem 0.6rem;
        border: none;
    }
}

.katex-display { overflow-x:auto; max-width:100%; height: 100%; }


.wval-legend-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:#2b2b2b;
    border:1px solid #3d3d3d;
    border-radius:8px;
    overflow:hidden;
}
.wval-legend-table thead th{
    background:#3f3f3f;
    color:#fff;
    text-align:left;
    padding:10px 12px;
    border-right:1px solid #3d3d3d;
    font-weight:600;
}
.wval-legend-table thead th:last-child{ border-right:0; }

.wval-legend-table tbody td{
    padding:10px 12px;
    border-right:1px solid #3d3d3d;
}
.wval-legend-table tbody td:last-child{ border-right:0; }
.wval-legend-table tbody tr{
    background:#383838;
}
.wval-legend-table tbody tr:nth-child(even){
    background:#343434;
}
.wval-legend-table tbody tr:last-child td{
    border-bottom:0;
}


.wval-legend-wrap{
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 12px rgba(0,0,0,.35);
    border-radius:8px;
}

@media (max-width: 480px){
    .wval-legend-table thead th,
    .wval-legend-table tbody td{ padding:8px 10px; font-size: 0.9rem; }
}

.wval-legend { row-gap: .25rem; }
.wval-legend > [class*="col-"] { padding: .25rem 0 !important; }
.wval-badge-col .circle-badge { display: inline-block; }

/* XS: Badge leicht kleiner, damit nichts umbrecht */
@media (max-width: 420px){
    .wval-badge-col .circle-badge{
        font-size: .85rem;
        padding: .2rem .5rem;
    }
}

/* Optional: links feste Min-Breite ab MD, damit die Texte exakt bündig starten */
@media (min-width: 768px){
    .wval-badge-col{ min-width: 10rem; }
}

.chart-hint {
    margin-top: 8px;
    font-size: 0.95rem;
    color: #ddd;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    opacity: .9;
}


@media (min-width: 601px) {
    .chart-hint { display: none !important; }
}


.sidebar-section { margin-top: 1rem; padding-top: .5rem; text-align: center; }
.sidebar-section-title { font-size: .9rem; font-weight: 700; color: #ccc; }

/* Unterliste eingerückt – NUR innerhalb eines <li>! */
.sidebar-subgroup { margin: 0 8px 6px; }
.sidebar-sub {
    margin: 4px 8px 8px;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,.08);
}
.sidebar-sub .sidebar-btn {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .9rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}

/* Aktiver Eintrag: farbiger Streifen links in deiner Theme-Farbe */
.sidebar .sidebar-btn { position: relative; overflow: hidden; }
.sidebar .sidebar-btn::before {
    content: "";
    position: absolute; inset: 0 auto 0 0;
    width: 4px; background: transparent; opacity: .9;
}
.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);
}
.sidebar .sidebar-btn.active::before { background: var(--c-border); }


:root{
    --page-max: 1000px;                          /* nach Geschmack */
    --page-gutter: clamp(12px, 2.2vw, 28px);     /* responsiver Außenabstand */
}

/* überall saubere Berechnung */
*, *::before, *::after { box-sizing: border-box; }

/* Kopfbereichhöhe responsiv, damit Abstände stimmen */
:root{ --header-h: clamp(56px, 2.2rem + 2vh, 76px); }

/* Haupt-Content spalte */
.content{
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* Seitencontainer: statt 96vw -> Maxbreite + Gutter-Padding */
.sewage_method.page-wrap,
.timeline-wrap{
    width: min(100%, var(--page-max));
    margin: 0 auto 16px;
    padding-inline: var(--page-gutter);
    box-sizing: border-box;
}

/* Überschriftbereich auf Info-Seiten nicht unter dem Header kleben */
.sewage_method.page-wrap{
    margin-top: calc(var(--header-h) + 20px);
}

/* Inhalt füllt den Rest → Footer sitzt unten */
.content > .page-wrap,
.content > .content-inner { flex: 1 0 auto; }

/* Mobile: Platz für Bottom-Nav lassen */
@media (max-width: 992px), (pointer: coarse){
    .content{
        min-height: calc(100dvh - env(safe-area-inset-bottom, 0px));
    }
}

.subheadline {
    font-size: clamp(1.3rem, 1.5vw + 0.4rem, 1.5rem);
    font-weight: 700;
    color: #e9f4ff;
    margin: 2rem auto 1.5rem;
    padding: .6rem 1.2rem;
    background: rgba(255,255,255,.06);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.1);
    letter-spacing: .3px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.bottom-nav ul,
.bottom-scroll,
.bottom-nav li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.bottom-btn {
    height: 60px;
}

@media (max-width: 420px) {
    :root {
        --bottom-nav-h: 72px; /* Leiste etwas höher */
    }
    .bottom-btn {
        height: 64px;
    }
    .bottom-btn i { font-size: 1.35rem; }
    .bottom-btn span { font-size: .9rem; }
}

/* Sehr klein (z. B. 320px) noch einen Tick mehr Platz */
@media (max-width: 360px) {
    :root { --bottom-nav-h: 76px; }
    .bottom-btn {
        min-width: 92px;
        height: 68px;
    }
}

/* iPhone mit Notch: etwas mehr Abstand nach unten */
.bottom-nav {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
}

/* (falls noch nicht gesetzt) Bulletpoints im Scroll-UL entfernen */
.bottom-scroll { list-style: none; }
.bottom-scroll > li { list-style: none; }


.bottom-extra .bottom-btn {
    height: 64px;
    min-width: 96px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
}
.bottom-extra .bottom-btn:hover {
    background: rgba(255,255,255,.14);
}

.bottom-btn.active {
    background: var(--c-bg-20);
    border-color: var(--c-border);
    color: #fff !important;
    box-shadow:
            0 0 0 1px var(--c-border) inset,
            0 8px 24px rgba(0, 0, 0, .28),
            0 0 12px var(--c-glow);
}

[id$="sewageLineChart"].chart-autoH canvas,
[id$="sewageNGSChart"].chart-autoH canvas {
    height: 390px !important;
}

/* Mittelgroße Screens */
@media (max-width: 900px) {
    [id$="sewageLineChart"].chart-autoH canvas,
    [id$="sewageNGSChart"].chart-autoH canvas {
        height: 350px !important;
    }
}

/* Kleine Displays / Touch */
@media (max-width: 600px), (pointer: coarse) {
    [id$="sewageLineChart"].chart-autoH canvas,
    [id$="sewageNGSChart"].chart-autoH canvas {
        height: 320px !important;
    }
}

#sewage-growl-form\:toast_container .ui-growl-item-container.ui-state-highlight {
    background: linear-gradient(180deg, #3a3d44 0%, #2a2c31 100%);
    opacity: .98;
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 0.35rem solid #2196f3;
    border-radius: 0.625rem;
    color: #f0f0f0;
    box-shadow:
            0 0.375rem 1.125rem rgba(0,0,0,0.55),
            0 0 0.375rem rgba(33,150,243,0.3);

}

#sewage-growl-form\:toast_container .ui-growl-item-container.ui-state-highlight:hover {
    box-shadow:
            0 8px 24px rgba(0,0,0,0.65),
            0 0 10px rgba(33,150,243,0.45);
    transform: translateY(-1px);
}

#sewage-growl-form\:toast_container > .ui-growl-item-container.ui-growl-info  { border-left-color: #2196F3 !important; }
#sewage-growl-form\:toast_container > .ui-growl-item-container.ui-growl-warn  { border-left-color: #FFD54F  !important; }
#sewage-growl-form\:toast_container > .ui-growl-item-container.ui-growl-error { border-left-color: #E53935  !important; }
#sewage-growl-form\:toast_container > .ui-growl-item-container.ui-growl-fatal { border-left-color: #D81B60 !important; }

#sewage-growl-form\:toast_container .ui-growl-item-container .ui-growl-item {
    padding:0.7rem;
}
#sewage-growl-form\:toast_container .ui-growl-title {
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 2px;
}

#sewage-growl-form\:toast_container .ui-growl-message {
   width:85%;
}

#sewage-growl-form\:toast_container .ui-growl-message p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: #dcdcdc;
}

/* Icon leicht abgesetzt, harmoniert mit dem Glow */
#sewage-growl-form\:toast_container .ui-growl-image {
    background: rgba(33,150,243,0.12);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64b5f6;
    border: 1px solid rgba(33,150,243,0.35);
}
/* Warn/Error: passende Tönung für das Kreis-Icon */
#sewage-growl-form\:toast_container .ui-growl-warn .ui-growl-image {
    background: rgba(255,193,7,.15); border-color: rgba(255,193,7,.38); color: #FFD54F;
}
#sewage-growl-form\:toast_container .ui-growl-error .ui-growl-image {
    background: rgba(244,67,54,.15); border-color: rgba(244,67,54,.38); color: #EF9A9A;
}

/* Close-Icon */
#sewage-growl-form\:toast_container .ui-growl-icon-close {
    top: 10px; right: 10px;
    color: #9aa3ad; opacity: .9;
    transition: color .15s ease, opacity .15s ease;
}
#sewage-growl-form\:toast_container .ui-growl-icon-close:hover {
    color: #fff; opacity: 1;
}

/* Container-Position (falls noch nicht gesetzt) */
#sewage-growl-form\:toast_container.ui-growl {
    position: fixed; top: 20px; right: 20px;
    width: 340px; z-index: 2147483647 !important;
}