.profilbild {
  width: 200px; /* Größe anpassen */
  height: 200px;
  border-radius: 50%;          /* macht das Bild kreisrund */
  object-fit: cover;           /* passt das Bild in den Kreis ein */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); /* weicher Schatten außen */
}

/* Menü bündig mit Content */
.container-header .mod-menu {
  margin-left: 0;   /* evtl. auch -1rem ausprobieren */
}

.container-header .grid-child {
  padding-left: 0;  /* nimmt den Standard-Einzug raus */
}

.container-header nav {
  padding-left: 0 !important;
}

.container-header {
  background-color: #FFFFFF;
  background-image: none;
}

/* Alle Menülinks im Header */
.container-header .metismenu-item > a {
  color: #8AB6E6 !important;   /* Blau als Standard */
  text-decoration: none;       /* optional: Unterstreichung entfernen */
}

/* Hover-Effekt */
.container-header .metismenu-item > a:hover {
  color: #1f4a80 !important;   /* etwas dunkleres Blau */
}

/* Aktiver Menüpunkt (das mit aria-current="page") */
.container-header .metismenu-item > a[aria-current="page"] {
  color: #1f4a80 !important;   /* gleich wie Hover oder nach Wunsch */
  font-weight: bold;           /* optional Hervorhebung */
}

/* Menü-Toggler (Pfeile rechts neben Einträgen) */
.container-header .mm-toggler {
  color: #8AB6E6 !important;       /* falls Symbol als Font/Icon */
  background: none !important;     /* sicherstellen, dass kein weißer BG drüberliegt */
}

/* wenn Pfeil über ::after erzeugt wird */
.container-header .mm-toggler::after {
  border-color: #8AB6E6 !important; /* für CSS-Caret */
  color: #8AB6E6 !important;
}

.container-header .mm-toggler svg,
.container-header .mm-toggler i {
  fill: #8AB6E6 !important;
  color: #8AB6E6 !important;
}


/* Hamburger-Button-Rahmen + Symbol */
.container-header .navbar-toggler {
  border-color: #8AB6E6 !important; /* Rahmen */
  color: #8AB6E6 !important;        /* Symbolfarbe */
}

/* Falls die Striche über ::before/::after erzeugt werden */
.container-header .navbar-toggler-icon {
  background-image: none !important;          /* Original-Icon entfernen */
  position: relative;
}

.container-header .navbar-toggler-icon::before,
.container-header .navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #8AB6E6; /* Farbe für die Striche */
}

.container-header .navbar-toggler-icon::before {
  top: 0.3rem;
}
.container-header .navbar-toggler-icon::after {
  bottom: 0.3rem;
}



.container-footer {
  background-color: #8AB6E6;
  background-image: none;
}


/* Alle H1-H4 blau */
h1, h2, h3, h4, h5, h6 {
    color: #8AB6E6 !important;
}

/* Desktop */

.responsive-table .text-cell {
  width: 60%;
  vertical-align: top;
  padding-right: 30px; /* horizontaler Abstand zwischen Text und Bild */
}

.responsive-table .image-cell {
  width: 35%;
  vertical-align: top;
}

/* Mobile Ansicht */
@media (max-width: 768px) {
  .responsive-table, 
  .responsive-table tr, 
  .responsive-table td {
    display: block;       /* Zellen untereinander */
    width: 100% !important;
    padding: 0;           /* Standard-Padding reset */
  }

  .responsive-table .text-cell { 
    margin-top: 35px;
    margin-bottom: 35px; /* vertikaler Abstand zwischen Text und Bild */ 
  } 
  
  .responsive-table .image-cell img {
   width: 100%; /* Bild volle Breite */ 
   height: auto;
   margin-top: 35px;
   margin-bottom: 35px; /* vertikaler Bild und dann wieder Text */ 
  }
  
}

.tt, .tt th, .tt td {
    border: 1px solid #000;
    border-collapse: collapse;
}