html {
    box-sizing: border-box;
    margin: auto;
    padding: 0;
}
a {
    padding-left: 0px;
    text-decoration: none;
    inline-size: block;
}

p {
    display: block; /* Corrected from font-display to display */
    font-family: Calibri;
    font-size: 20px;
    line-height: 1.2;
    padding: 0.5em;
    text-align: justify;
}

.navbar1 {
    background: #e60000;
    color: #fff;
    height: 90px;
}

.container {
    max-width: 1200px;
    width:100%;
    margin: auto;
    display: flex;
    justify-content: center;
}

img {
    max-width: 100%;
    pointer-events: none;
}

.logo {
    height: 90px;
    display: inline-block;
    margin:none;
    /* Ensure the initial state is clear of any unwanted styling */
    filter: none;
    opacity: 1;
    transition: none; /* Prevent any transition effects */    
}

.navbar1 .container {
    justify-content: space-between;
    align-items: center;
}

.title1, .title2 {
    font-size: 24px;
    font-weight: bold;
    margin-right: 0.5rem;
    color: #fff;
    margin-block-start: 0;
    margin-block-end: 0;
}
.titeltext {
    display: flex;
    flex-direction: column;
    justify-content:space-around;
    align-items: center;
}

.titeltext h1 {
    margin: 0; /* Set margin to 0 */
    padding: 0; /* Reset padding */
}

.titeltext h1:first-child {
    margin-bottom: -10px; /* Adjust margin bottom as needed */
}

.titeltext h1:last-child {
    margin-top: -10px; /* Adjust margin top as needed */
}

h1 {
    font-size: 30px; 
    font-family: Calibri;
    font-weight: bold;      
    text-align: left;  
    color: #e60000;
}

h2 {
    font-size: 24px;
    font-family: Calibri;    
    font-weight: bold;
    text-align: left;
    color: #e60000;
    line-height: 1.2;
}

.titelbild {
    flex-grow: 1;
    border-radius: 10px;
    max-width: 40%;
    height: auto;
}

.header1 {
    margin: 0.5rem;  
}

.header1 .container {
    justify-content: space-between;
    align-items: flex-start;  
}

.headersingle {
    margin: 0.5rem;  
}

.anmerkung {
    margin: 0.5rem;  
}

.anmerkung .container {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;  
}

.legende {
    margin: 0.5rem;  
}

.headersingle .container {
    flex-direction: column;
    justify-content: left; 
}

.bilder .container {
    justify-content: center;
    align-items: center;
}

.bilder .container img {
    margin-right: 2rem; /* Adjust the margin as needed */
}

.uebersicht {
    margin: 0.5rem;
}

.uebersicht .container {
    justify-content: space-between;
    align-items: center;
}

.badelist {
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-radius: 10px;
    padding: 0.5em;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
}

.filter:hover {
    color: #e60000;
}

.map {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: center; 
    border-radius: 10px;
    margin-left: 0.5rem;  
} 

.karte {
    display: flex;
    align-items: center; 
    margin: 0.5rem;    
}

th {
    font-weight: bold;
    color: #e60000;
    text-align: center;
    background-color: #e6e6e6;
    border: 1px solid #b8b8b8;
    padding: 0.2rem;    
}

td {
    border: 1px solid #b8b8b8;
    padding: 0.2rem; 
}

tr:nth-child(even) {
    background-color: #fafafa;
}

tr:hover {
    background-color: #b8b8b8;
}

.view {
    display: flex;
    align-items: center; 
    margin: 0.5rem;    
    justify-content: center;
}

.weiteres {
    margin: 0.5rem;
}

.weiteres .container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Adjust spacing between items as needed */
}

.infos {
    display: flex;
    align-items: center;
    width: 100%; /* Adjust this width as needed */
    margin-bottom: 20px; /* Space between rows */
}

.infos a {
    text-decoration: none;
    color: inherit;
}

.infos span, .infos strong {
    display: block;
}

.infos img {
    width: 150px; /* Set width to 150px */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Optional: add some spacing between the image and text */
}

.container a {
    text-decoration: none; /* Remove underline from the link */
}

.container a:hover {
    text-decoration: underline; /* Apply underline only on hover */
    box-shadow: none; /* Remove any box shadow */
    background-color: transparent; /* Remove any background color change */
}
.container .datatable {
    /* Ensure the table fits within the flex container */
    max-width: 100%;
    width: auto;
    display: flex;
    align-items: center;
}
.table td, .table th {
    padding: 0.05rem;
}
.table {
    margin-top: 0rem;
    margin-bottom: 0rem;
}
.view .container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.footer1 {
    background: #b8b8b8;    
    height: 20px;
}

.footerInner {
    background: #e6e6e6;
    height: 50px;
    align-items: center;
}

.footerInner a {
    text-decoration: none;
    font-family: Calibri;
    font-size: 18px;
    font-weight: bold;
}

.footerInner .container {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.webgis-result-table {
    background: red;
    text-align: center;
}

.webgis-result-table.feature {
    min-width: fit-content;
}
.webgis-result-table-cell {
    background: #fff;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: none;
}

.leaflet-marker-icon,.leaflet-popup {
    opacity:0.05;
}

.leaflet-popup {
    margin-bottom: 0px;
}

.leaflet-marker-icon leaflet-zoom-animated leaflet-interactive {
    opacity:0.1;
}

@media (max-width: 768px) {
    .footer1 {
        height: 10px;
    }
    .footerInner {
        height: 30px;
    }
    .footerInner a {
        font-size: 10px;
    }
    .header1 .container {
        flex-direction: column;
        padding-top: 20px;
        text-align: center;
    }
    .uebersicht .container,
    .bilder .container,
    .anmerkung .container,
    .legende .container {
        display: block;
        text-align: center;
    }
    .bilder .container {
        margin:0%;
    }
    .bilder .container img {
        margin-right: 0rem; /* Adjust the margin as needed */
    }
    h1, h2 {
        text-align: center;
    }
    .datatable, .view .container .datatable {
        display: none;
    }
    .datatable2, .datatable-small {
        display: flex;
        justify-content: center;
    }
    .titelbild {
        display: none;
    }
}

@media (min-width: 768px) {
    .datatable {
        display: flex;
    }
    .datatable2, .view .container .datatable-small {
        display: none;
    }
}

@media (max-width: 550px) {
    .weiteres .container img {
        display: none;
    }
    .weiteres .container .infos {
        justify-content: center;
    }
    .legende .container {
        justify-content: center;
    }
    .title1, .title2 {
        font-size: 16px;
    }
}

.blue-text {
    background-color: #0000E6;
    color: #fff;
}

.green-text {
    background-color: #008a00;
    color: #fff;
}

.yellow-text {
    background-color: #ffca02;
    color: #000;
}

.red-text {
    background-color: #e60000;
    color: #fff;
}

.blau-text {
    color: #00b0f0;
    background-color: #fff;
}

.gruen-text {
    color: #008a00;
    background-color: #fff;
}

.gelb-text {
    color: #ffca02;
    background-color: #000;
}

.rot-text {
    color: #e60000;
    background-color: #fff;
}
.schwarz-text {
    color: #000000;
    background-color: #fff;
}