.container-header {
    background-color: #17365c; /* Replace with your color code */
    background-image: none;
    padding: 10px 10; /* Passe den inneren Abstand an */
    min-height: 100px;
 display: flex; /* Aktiviert Flexbox für den Container */
    align-items: center; /* Zentriert die Elemente vertikal */
    flex-wrap: wrap; /* Erlaubt das Umbrechen der Elemente */
     justify-content: flex-start; /* Platziert das Logo und das Menü am Anfang */
}
.container-footer {
    background-color: #17365c; /* Replace with your color code */
    background-image: none;
  
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: rgb(52, 109, 140);
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

.button:hover {
  background-color:#17365c;
}


.grey {
      color:rgb(111,117,125);
      font-size: 3px;
     }


.main-bottom{border:none;}

.item-page p, .item-page li {
    font-size: 19px;
}

/*second-logo class, is not in place on webpage*/
.second-logo {
    position: relative;
    /*left: calc(100%); /* Positioniert das Logo 7em rechts vom Menü */
    /* Weitere Stile für das zweite Logo */
    
    width: 170px; /* Beispiel für die Breite des Logos */
}

/* Headlines for images in the responsive case */
@media(max-width: 768px){
  .image_headlines{text-align:left;}
}

/* Standard-CSS für alle Bildschirmgrößen */
.mod-menu {
    align-self: flex-start;
    flex-wrap: wrap;
    flex: 1;
    margin-left: 0;
    padding-left: 0;
}

/* CSS für Desktop-Ansicht */
@media (min-width: 1200px) {
    .mod-menu {
       /* left:-16%;*/
    position: relative;
    align-self: center; /* Zentriert das Menü vertikal im Flexbox-Container */
  flex-wrap: wrap; /* Erlaubt das Umbrechen der Elemente */
    flex: 1; /* Verhindert, dass das Menü den verbleibenden Platz einnimmt */
    }
}




.metismenu.mod-menu .metismenu-item>ul{background-color:#f4f6f9;}




        .image-box {
            display: inline-block;
            border: 1px solid rgb(52, 109, 140);
            padding: 10px;
            margin: 20px;
            text-align: center;
          box-sizing: border-box;
        }
        .image-box img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        .image-box .caption {
            margin-top: 10px;
            color: #000000;
        }

@media (max-width: 600px) {
    .image-box {
        display: block;
        width: 100%;
      margin: 0;
      box-sizing: border-box;
    }

    .image-box img {
        margin-top: 10px;
    }

  div[style*="display: flex"] {
        flex-direction: column;
        align-items: flex-start;
    }
}



.float-start {
  position:relative;
    margin-left: 40px;
    right: 30px;
   top: 20px;
}






table{
   font-size: 1em; 
   color:#000000;
  width:100%;
  border-width: 1px;
  background-color: #f4f6f9;
   border-collapse:collapse;}
table caption {
   text-align: left; 
   font-size: 1.25em; 
   font-weight:bold;
   padding-bottom: 0.5em;}
table th, table td {
   padding: 0.25em;
   border: 1px solid #DDD;
    vertical-align: top;
  
}
table td {width:25%;}
table th[scope=col] {
   border-bottom: 2px solid #DDD; 
   color:#FFF; 
   background-color:#17365c;}
table th[scope=row] {
   border-right: 2px solid #DDD; 
   color:#FFF;}


.single-cell-table {
  width: 25%;
}
.single-cell-table td {
  width: 100%; 
}
@media (max-width: 1200px) {
  .single-cell-table {
    width: 100%;
  }
   .single-cell-table td {
      border-bottom: 1px solid #eee;
    width: 100%;
    display: block; 
     text-align: left;
  }
}

.two-cell-table {
  width: 50%;
}
.two-cell-table td {
  width: 50%;
  vertical-align: top;
}

@media (max-width: 1200px) {
  .two-cell-table {
    width: 100%;
  }
  .two-cell-table td {
    width: 100%;
    display: block;
    border-bottom: 1px solid #eee;
    text-align: left;
  }
}

/* Responsive Tabelle */
@media (max-width: 1200px) {
    table {
        width: 100%;
      background-color: #f4f6f9;
        overflow-x: auto;
      border-collapse:collapse;
    }

    thead {
        display: none;
    }

 

    table td {
        display: block;
        text-align: right;
        padding: 8px 10px;
        border-bottom: 1px solid #eee;
        position: relative;
        min-height: 40px;
      width:100%;
    }

    td:before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 8px;
        font-weight: bold;
        text-align: left;
        width: 40%;
    }

  

    img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        object-fit: contain;
    }

    /* Footer-Korrektur */
    .container-footer {
        clear: both;
        
    left: 0;
    bottom: 0;
    width: 100%;
    
      
        background-color: #17365c;
        padding: 20px;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1);

    }

    /* Container für Tabelle und Footer */
    .table-container {
        position: relative;
        z-index: 1;
        padding-bottom: 0px; /* Platz für den Footer */
    }
}



body{
  --bs-body-color:#000000;
  --heading-color: #346d8c;
  --link-color: #346d8c;
  
    

}






.hintergrund-box {
    background-color: #f4f6f9; /* Hintergrundfarbe */
    border-left: 5px solid #005A9C; /* Linker farbiger Rand */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.hintergrund-box p:last-child {
    margin-bottom: 0; /* Entfernt den letzten Abstand in der Box */
}

.box-container {
            display: flex;
            flex-wrap: wrap;
            gap: 5px 20px; /* Abstand zwischen den Boxen */
        }

.box-item {
            flex: 1 1 calc(50% - 10px); /* Flex-Grow, Flex-Shrink, Flex-Basis */
            min-width: 0; /* Erlaubt das Schrumpfen der Boxen */
        }

.bild-im-text {
            display: inline-block;
            margin-left: 55px;
            vertical-align: middle;
        }


  .hintergrund-button {
            background-color: #f4f6f9; /* Hintergrundfarbe */
            border-left: 5px solid #005A9C; /* Linker farbiger Rand */
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 0 4px 4px 0; /* Nur die rechten Ecken abgerundet */
            border: none; /* Entfernt den Standard-Border des Links */
            cursor: pointer; /* Ändert den Cursor in einen Zeiger */
            font-family: inherit; /* Erbt die Schriftart der Umgebung */
            font-size: inherit; /* Erbt die Schriftgröße der Umgebung */
            text-align: left; /* Linksbündiger Text */
            width: 100%; /* Vollständige Breite */
            box-sizing: border-box; /* Beachtet Padding und Border in der Breite */
            text-decoration: none; /* Entfernt die Unterstreichung */
            color: inherit; /* Erbt die Textfarbe der Umgebung */
            display: inline-block; /* Erlaubt die Verwendung von Breite und Höhe */
            position: relative;
            z-index: 1;
        }

        .hintergrund-button:hover {
            background-color: #e0e4e8; /* Hover-Effekt */
        }

        .hintergrund-button:active {
            background-color: #d0d4d8; /* Active-Effekt */
        }

        .hintergrund-button p:last-child {
            margin-bottom: 0; /* Entfernt den letzten Abstand in der Box */
        }
@media (max-width: 600px) {
    .bild-im-text {
        display: block;
        margin-left: 0;
        margin-top: 10px;
        margin-bottom: 10px;
        max-width: 100%;
        height: auto;
    }
}



        .large-text {
            font-size: 20px;
        }
 


        .blau {
            color: rgb(52, 109, 140);
          font-size: 18px;
        }



        .image-box {
            display: inline-block;
            border: 1px solid rgb(52, 109, 140);
            padding: 10px;
            margin: 20px;
            text-align: center;
        }
        .image-box img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        .image-box .caption {
            margin-top: 10px;
            color: #000000;
          font-size: 15px;
        }





.accordion-header-link {
  display: block;
  cursor: pointer;
  color: rgb(52, 109, 140);
  text-decoration: underline;
  padding: 0.2em 0;
  font-size: inherit; /* normale Textgröße */
  background: none;
  border: none;
}
.accordion-header-link.active {
  color: #0056b3;
  font-weight: bold;
}
.accordion-item,
.accordion-header,
.accordion-collapse,
.accordion-body {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  margin: 10px;
  padding: 0;
  font-size: 19px;
}
.accordion-body {
  padding: 0.5em 0 1em 0;
}
.sub-accordion-item,
.sub-accordion-header,
.sub-accordion-collapse,
.sub-accordion-body {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  margin-left: 10px;
  padding: 0;
}
.sub-accordion-body {
  padding: 0.5em 0 1em 0;
}

/* Wrapper for google maps and picture */
.map-image-wrapper {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px; /* Abstand zwischen den Elementen */
  justify-content: center;
}

.map-block,
.image-block {
  width: 600px;
  max-width: 100%;
}

.image-block img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive: auf kleinen Bildschirmen untereinander und gleiche Breite */
@media (max-width: 650px) {
  .map-image-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  .map-block,
  .image-block {
    width: 100%;
    max-width: 100%;
  }
}