.container-footer .mod-menu {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

:root {
  --cassiopeia-color-primary: #003571;
  --cassiopeia-color-link: #003571;
  --cassiopeia-color-hover: #314d93;
  --link-color: #003571;
  --link-hover-color: #314d93;
}

h1, h2, h3, h4, h5, h6 {
  color: #003571;
}

/* Hintergrund: Millimeterpapier + zwei Zahnräder (Firmenfarbe #003571, sehr dezent) */
body {
  --zahnrad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23003571' fill-opacity='.06' fill-rule='evenodd' d='M182,100 L199.9,105.4 L198.5,117 L179.9,118.2 L173.9,135.6 L187.6,148.2 L181.4,158 L164.1,151.1 L151.1,164.1 L158,181.4 L148.2,187.6 L135.6,173.9 L118.2,179.9 L117,198.5 L105.4,199.9 L100,182 L81.8,179.9 L72.5,196.2 L61.5,192.3 L64.4,173.9 L48.9,164.1 L33.5,174.7 L25.3,166.5 L35.9,151.1 L26.1,135.6 L7.7,138.5 L3.8,127.5 L20.1,118.2 L18,100 L.1,94.6 L1.5,83 L20.1,81.8 L26.1,64.4 L12.4,51.8 L18.6,42 L35.9,48.9 L48.9,35.9 L42,18.6 L51.8,12.4 L64.4,26.1 L81.8,20.1 L83,1.5 L94.6,.1 L100,18 L118.2,20.1 L127.5,3.8 L138.5,7.7 L135.6,26.1 L151.1,35.9 L166.5,25.3 L174.7,33.5 L164.1,48.9 L173.9,64.4 L192.3,61.5 L196.2,72.5 L179.9,81.8Z M130,100 A30,30 0 1,0 70,100 A30,30 0 1,0 130,100Z M158.6,127.5 A11,11 0 1,0 136.6,127.5 A11,11 0 1,0 158.6,127.5Z M111,155 A11,11 0 1,0 89,155 A11,11 0 1,0 111,155Z M63.4,127.5 A11,11 0 1,0 41.4,127.5 A11,11 0 1,0 63.4,127.5Z M63.4,72.5 A11,11 0 1,0 41.4,72.5 A11,11 0 1,0 63.4,72.5Z M111,45 A11,11 0 1,0 89,45 A11,11 0 1,0 111,45Z M158.6,72.5 A11,11 0 1,0 136.6,72.5 A11,11 0 1,0 158.6,72.5Z'/%3E%3C/svg%3E");
  background-color: #fff;
  background-image:
    var(--zahnrad),
    var(--zahnrad),
    linear-gradient(to bottom, rgba(0,53,113,.12) 1px, transparent 1px),
    linear-gradient(to right,  rgba(0,53,113,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,53,113,.07) 1px, transparent 1px),
    linear-gradient(to right,  rgba(0,53,113,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,53,113,.04) 1px, transparent 1px),
    linear-gradient(to right,  rgba(0,53,113,.04) 1px, transparent 1px);
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat;
  background-position: right 5% bottom 10%, left 3% top 30%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-size: 380px 380px, 300px 300px, 100px 100px, 100px 100px, 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-attachment: fixed, fixed, scroll, scroll, scroll, scroll, scroll, scroll;
}

/* Beitragsbereich als weiße Fläche über dem Millimeterpapier */
main {
  background: #fff;
  padding: 1.5rem;
  margin-top: .75rem;
  border-radius: .375rem;
  box-shadow: 0 1px 3px rgba(0, 53, 113, .15), 0 4px 14px rgba(0, 53, 113, .08);
}

/* Linkes Menü und Brotkrumenleiste als weiße Flächen über dem Millimeterpapier */
.container-sidebar-left .card,
.mod-breadcrumbs {
  background: #fff;
  border-radius: .375rem;
  /*box-shadow: 0 1px 3px rgba(0, 53, 113, .15), 0 4px 14px rgba(0, 53, 113, .08); */
}
.container-sidebar-left .card { border: 0; }
.mod-breadcrumbs { margin-bottom: 0; }

/* Firmen-Logo kleiner skalieren, damit es auch auf dem Smartphone funktioniert */
/* Das originale SVG für das Logo liegt unter System/Template Style extended */
.container-header .navbar-brand img {
  width: 260px;
  max-width: 100%;
  height: auto;
}

/* Kompaktere Kopfzeile */
/* Das ergibt in meinem Test bei Full-HD eine Kopfzeile von 151 px (vorher 250 px), das Logo ist dann 240×87 px groß. */
.container-header .navbar-brand img {
  width: 240px;
  max-width: 100%;
  height: auto;
}
.container-header .navbar-brand { padding: .5rem 0 0; }
.container-header .container-nav { padding-top: 0; padding-bottom: .5rem; }

/* Untermenüs im linken Menü immer aufgeklappt, Pfeil-Button ausblenden */
.container-sidebar-left .mod-menu__sub {
  display: block !important;
  padding-left: 1rem;
}
/* Untermenüs im linken Menü immer aufgeklappt, Pfeil-Button ausblenden */
.container-sidebar-left .mod-menu__toggle-sub {
  display: none;
}

/* Wenn der Text kürzer ist als das Bild, rutschen nachfolgende Überschriften ansonsten neben das Bild. */
h2, h3 { clear: both; }

/* Fußleiste dauerhaft am unteren Fensterrand sichtbar */
.container-footer {
  position: sticky;
  bottom: 0;
  z-index: 1000;
  margin-top: 0;
}

/* Fußleiste kleiner machen */
.container-footer .grid-child {
  padding-top: .4rem;
  padding-bottom: .4rem;
}
.container-footer .mod-menu { margin: 0; }

/* Blickfang im Startbild */
img.blickfang {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center 55%;
  margin: 0 0 2rem;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
@media (max-width: 576px) { img.blickfang { height: 150px; } }

/* Kacheln und Kontaktkasten auf der Startseite */
.kachel {
  border: 1px solid rgba(0, 53, 113, .15);
  border-top: 4px solid #003571;
  border-radius: .375rem;
}
.kachel a.mehr { font-weight: 600; text-decoration: none; }
.kachel a.mehr::after { content: " \2192"; }
.kontaktbox { background: #f0f4fb; border-radius: .375rem; }

/* Alle Überschriften blau erzwingen */
:root { --heading-color: #003571; }