/* ===============================
   Farben
================================ */
:root{
  --blue:#004C97;
  --red:#CC0000;
}

/* ===============================
   Gesamthintergrund
================================ */
body.site{
  background:#e9eef5;
  color:#1e1e1e;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.6;
  margin:0;
}

/* ===============================
   Header
================================ */
.container-header{
  background:var(--blue)!important;
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.header .container-nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:8px;
  padding-bottom:6px;
}

/* ===============================
   Logo
================================ */
.navbar-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:4px;
}

.site-logo{
  display:block;
  max-height:48px;
  width:auto;
}

/* Sicherheitshalber alten Text ausblenden */
.site-title,
.site-description,
.brand-text{
  display:none !important;
}

/* ===============================
   Hauptmenü
================================ */
.header .mod-menu,
.header .mod-menu ul{
  display:flex !important;
  justify-content:center !important;
  align-items:center;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
}

.header .mod-menu ul{
  gap:20px;
}

.header .mod-menu a{
  color:#fff !important;
  padding:6px 8px;
  border-bottom:2px solid transparent;
  text-decoration:none;
  font-weight:500;
  transition:all .2s;
}

.header .mod-menu a:hover,
.header .mod-menu .active a,
.header .mod-menu .current a{
  border-bottom:2px solid var(--red);
}

/* ===============================
   Content-Bereich
================================ */
.container-component{
  max-width:1000px;
  margin:2rem auto;
  padding:1.5rem;
  position:relative;
  z-index:1;
}

.container-component::before{
  content:"";
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0.25;
  z-index:-1;
}

body.bg1 .container-component::before{
  background-image:url("/images/bilder/IMG_7413.jpg");
}

body.bg2 .container-component::before{
  background-image:url("/images/bilder/IMG_7437.jpg");
}

body.bg3 .container-component::before{
  background-image:url("/images/bilder/IMG_7481.jpg");
}

.container-component img{
  border-radius:6px;
}

.container-component img[align="right"],
img[style*="float: right"]{
  margin-left:16px;
  margin-bottom:8px;
  max-width:240px;
  height:auto;
}

/* ===============================
   Typografie
================================ */
h1,h2,h3{
  color:var(--blue);
  font-weight:600;
  margin-top:1.2rem;
}

a{
  color:var(--blue);
  text-decoration:none;
}

a:hover{
  color:var(--red);
}

/* ===============================
   Footer
================================ */
.container-footer{
  background:var(--blue);
  color:#fff;
  text-align:center;
  padding:14px 0;
}

.container-footer .mod-menu,
.container-footer .mod-menu ul,
.container-footer ul{
  display:flex !important;
  justify-content:center !important;
  align-items:center;
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
}

.container-footer .mod-menu ul,
.container-footer ul{
  gap:12px;
}

.container-footer a{
  color:#fff !important;
  border-bottom:2px solid transparent;
  text-decoration:none;
}

.container-footer a:hover{
  border-bottom:2px solid var(--red);
}

/* ===============================
   Responsive
================================ */
@media (max-width:768px){

  .site-logo{
    max-height:40px;
  }

  .header .mod-menu ul,
  .container-footer .mod-menu ul,
  .container-footer ul{
    flex-wrap:wrap;
    gap:10px;
  }

  .container-component{
    padding:1rem;
  }
}