.container-header {
  background-color: #000000!important;
  background-image: none!important;
  --cassiopeia-color-primary: #ffffff;
  --cassiopeia-color-link: #710000;
  --cassiopeia-color-hover: #ffffff;
  box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
}

.container-header .mod-menu {
   justify-content: center;
  background-color: #710000!important;
   padding: 50;
   color:#ffffff;
  }

.metismenu.mod-menu .parent > ul {
  background-color: #710000!important;
     justify-content: center;
  color: #ffffff;}
  
.metismenu.mod-menu .mm-toggler {
  background-color: #710000!important;
  color: #ffffff;
   justify-content: center;}
  
.metismenu.mod-menu .mm-collapsing {
  background-color: #710000!important;
  color: #ffffff;
     justify-content: center;
}


.metismenu.mod-menu .mm-collapse {
  background: #ffffff;
     justify-content: center;
}
.metismenu.mod-menu .mm-collapse .metismenu-item a {
  color: #ffffff;
}
.sidebar-right.card {
  background-color: #710000;
     
	box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
  }
.bottom-a.card  {
  background-color: #710000;
     color:#b2cc3a;
	box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
}
.bottom-b.card  {
 background: #710000;
     color:#b2cc3a;
     justify-content: center;
   padding: 50;
   color:#b2cc3a;
  position: center;
  box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
}
.main-top.card {
  
   color:#ffffff;
   box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
  
}

.breadcrumbs.card
{
   background-color: #710000;
   color:#ffffff;
	box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
}
  
.debug.card {
    background-color: #710000;
     color:#b2cc3a;  
  justify-content: center;
   padding: 50;
   position: center;
  box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
  }

.footer {
    background: #710000;
     color:#b2cc3a;
     justify-content: center;
   padding: 50;
  position: center;
  box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
  }

.countdown {
  background: #710000;
     color:#b2cc3a;
     justify-content: center;
   padding: 50;
  position: center;
  box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
  
}

.container-banner {
z-index:1;}

/* Container für alle Mitglieder */
.vorstand-container {
  display: flex;         /* Aktiviert Flexbox */
  flex-wrap: wrap;       /* WICHTIG: Erlaubt den Zeilenumbruch auf kleinen Bildschirmen */
  justify-content: center; /* Zentriert die Boxen horizontal */
  gap: 20px;             /* Definiert den Abstand zwischen den Boxen */
  /* ----- HIER SIND DIE NEUEN ZEILEN ----- */

  /* Setzt die maximale Breite des gesamten Blocks */
  /* (4x 300px Boxen) + (3x 20px Abstand) = 1260px */
  /* Wir geben etwas Puffer und sagen z.B. 1300px */
  max-width: 1300px; 
  
  /* Zentriert den Container selbst auf der Seite */
  margin-left: auto;
  margin-right: auto;
}

/* Die einzelne Box für ein Mitglied */
.vorstand-mitglied {
  flex-basis: 300px;
  flex-grow: 0;  /* <--- AUF 0 ÄNDERN */
  flex-shrink: 1;
  /* min-width und max-width können wir vereinfachen */
  width: 300px; /* Setze eine feste Basisbreite */
  max-width: 100%; /* Erlaube dem Element, auf Handys schmaler zu sein */

  /* Ästhetik (optional, aber empfohlen) */
  text-align: center;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* Das Bild innerhalb der Box */
.vorstand-mitglied img {
  width: 100%;    /* Bild füllt die Box-Breite aus */
  height: auto;   /* Höhe passt sich automatisch an */
  display: block;
}

/* Der Text-Block unter dem Bild */
.vorstand-text {
  padding: 16px;
  line-height: 1.5; /* Bessere Lesbarkeit */
  background-color: #000;  /* Oder 'black' */
  color: #fff;             /* Oder 'white' */
}

.vorstand-text p {
  margin: 0; /* Entfernt den Standard-Abstand von Absätzen */
}

/* Erzwungener Zeilenumbruch */
.flex-break {
  flex-basis: 100%; /* Nimmt 100% Breite ein */
  height: 0;        /* Ist unsichtbar */
  margin: 0;        /* Nimmt keinen Raum ein */
  padding: 0;
}