.schwarzes-modul {
  background: #000;
  color: #fff;
  padding: 20px;
}

.container-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

#mod-custom111,
#mod-custom111 .card,
#mod-custom111 .card-body,
#mod-custom111 .moduletable {
  background-color: #f5f5f5 !important;
}

/*!
 * Modul 111 (Home-Projekte) volle Breite bis an den Rand des Browsers, 
 * der Inhalt bleibt jedoch zentriert wie der Rest der Seite.
 * Siehe ff.
*/

.container-breadcrumbs {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.container-breadcrumbs .container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#mod-custom111 {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #f5f5f5 !important;
}

#mod-custom111 .card,
#mod-custom111 .card-body,
#mod-custom111 .moduletable {
  width: 100% !important;
  max-width: none !important;
  background-color: #f5f5f5 !important;
}
#mod-custom111 {
  width: 100%;
}

/*!
 * ff. wird die Standardtemplate Farbe von alternativ Rot auf Schwarz umgestellt.
*/

:root {
  --cassiopeia-color-primary: #000000;
  --cassiopeia-color-link: #000000;
  --cassiopeia-color-hover: #333333;
}

.container-header {
  background-color: #000000 !important;
  background-image: none !important;
}

.container-header .mod-menu > li > a,
.container-header .navbar-brand,
.container-header a {
  color: #ffffff !important;
}

.container-header .mod-menu > li > a:hover,
.container-header a:hover {
  color: #cccccc !important;
}

/*!
 * Aufklappbares Menü Schrift weiß und Hintergrund schwarz
*/

/* Cassiopeia Hauptmenü: Untermenüs schwarz */
.container-header .metismenu.mod-menu ul,
.container-header .metismenu.mod-menu li ul,
.container-header .metismenu.mod-menu .mm-collapse,
.container-header .metismenu.mod-menu .mm-collapsing {
  background-color: #000000 !important;
  background-image: none !important;
}

/* Einzelne Punkte im aufgeklappten Menü */
.container-header .metismenu.mod-menu ul li,
.container-header .metismenu.mod-menu li ul li,
.container-header .metismenu.mod-menu .mm-collapse li {
  background-color: #000000 !important;
}

/* Text und Links im Untermenü weiß */
.container-header .metismenu.mod-menu ul li a,
.container-header .metismenu.mod-menu li ul li a,
.container-header .metismenu.mod-menu .mm-collapse li a,
.container-header .metismenu.mod-menu ul li span,
.container-header .metismenu.mod-menu li ul li span {
  color: #ffffff !important;
  background-color: #000000 !important;
}

/* Hover im Untermenü */
.container-header .metismenu.mod-menu ul li a:hover,
.container-header .metismenu.mod-menu li ul li a:hover,
.container-header .metismenu.mod-menu .mm-collapse li a:hover,
.container-header .metismenu.mod-menu ul li a:focus,
.container-header .metismenu.mod-menu li ul li a:focus {
  color: #ffffff !important;
  background-color: #333333 !important;
}

/* Pfeil / Aufklapp-Button */
.container-header .metismenu.mod-menu .mm-toggler,
.container-header .metismenu.mod-menu .mm-toggler:after {
  color: #ffffff !important;
}

.container-header .mod-menu > li > ul {
  background-color: #000000 !important;
}

.container-header .mod-menu > li > ul a {
  color: #ffffff !important;
  background-color: #000000 !important;
}

.container-header .mod-menu > li > ul a:hover {
  color: #ffffff !important;
  background-color: #333333 !important;
}