.dws-seitenstruktur-kopfbereich {
    background-image: url('/fileadmin/kircheingueterslohde/headerbackground.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    
    display: flex;
    flex-direction: column;
}


/* HEADER */

header {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: #fff; /* wichtig, damit Inhalt nicht durchscheint */
}

header h1 a {
  text-decoration: none;
  color: white !important;
}

/* NAVIGATION */

    .nav-item, .nav-link {
      color: var(--bs-primary) !important;
      font-size: 1.2rem;
      font-weight: bold;
    }

    .nav-item:hover, .nav-link:hover, .nav-item:active, .nav-link:active, .nav-link.active, .nav-item.active  {
      background-color: var(--bs-primary) !important;
      color: white !important;
    }


.offcanvas-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.offcanvas-header {
    background-image: url("https://typo3.dawesys.de/fileadmin/kircheingueterslohde/logochristenrat.png");
    background-repeat: no-repeat;
    background-position: center left;
    background-size: auto 60px; /* Höhe vom Logo */
    margin-left: 30px; 
    margin-top: 0.5rem;      
    margin-bottom: 0.5rem;   
}

    .offcanvas-body .nav-item:hover,
    .offcanvas-body .nav-link:hover,
    .offcanvas-body .nav-item:active,
    .offcanvas-body .nav-link:active  {
      background-color: var(--bs-primary);
      color: white !important;
    }

    .offcanvas hr {
      display: none;
    }

    .navbar-nav {
      width: 100%;              /* ganze Breite nutzen */
      display: flex;
      justify-content: space-evenly; /* gleichmäßige Abstände */
    }

    .nav-item {
      flex: 1 1 auto;       /* jeder Link füllt gleichmäßig */
      text-align: center;   /* optional, Text zentrieren */
    }

    .nav-item .nav-link {
      display: block;       /* damit die gesamte Fläche klickbar ist */
      width: 100%;
    }

    .offcanvas-body {
      background-color: var(--bs-secondary);
    }

    .dropdown-item {
      background-color: var(--bs-secondary);
      margin-bottom: 4px;
    }

    .dropdown-menu {
      background-color: var(--bs-secondary);
      padding-top: 4px;
    }

    .navbar-toggler {
      border: none;
    }
/* FOOTER */

footer p a {
  color: white !important;
}