/* Custom Site 1.2 – overrides for confirmed Camino selectors only.
   This file is loaded only when customSite.useCustomColors is enabled. */

/* Header */
.header {
  background: var(--custom-header-background, #222222);
  color: var(--custom-header-text, #FFFFFF);
}
.header a { color: inherit; }

/* Desktop navigation */
@media (min-width: 1280px) {
  .header__nav-list {
    background: var(--custom-navigation-background, #222222);
  }
  .header__nav-item {
    color: var(--custom-navigation-text, #FFFFFF);
  }
  .header__nav-item:hover {
    background: var(--custom-navigation-hover-background, #575761);
    color: var(--custom-navigation-hover-text, #FFFFFF);
  }
  .header__nav-item--active {
    color: var(--custom-navigation-active, #2274BB);
  }
  .header__nav-item--active:before {
    background-color: var(--custom-navigation-active, #2274BB);
  }
}

/* Mobile/open menu */
.header__menu--open {
  background: var(--custom-navigation-background, #222222);
  color: var(--custom-navigation-text, #FFFFFF);
}
.header__menu--open .header__nav-list {
  background: var(--custom-navigation-background, #222222);
}
.header__menu--open .header__nav-item {
  color: var(--custom-navigation-text, #FFFFFF);
}
.header__menu--open .header__nav-item:hover,
.header__menu--open .header__nav-item:focus-visible {
  background: var(--custom-navigation-hover-background, #575761);
  color: var(--custom-navigation-hover-text, #FFFFFF);
}
.header__menu--open .header__nav-item--active {
  color: var(--custom-navigation-active, #2274BB);
}

/* Main content area (Camino component class confirmed) */
.component--page-area {
  background-color: var(--custom-main-background, #F6F7F8);
  color: var(--custom-main-text, #222222);
}
.component--page-area h1,
.component--page-area h2,
.component--page-area h3,
.component--page-area h4,
.component--page-area h5,
.component--page-area h6 {
  color: var(--custom-main-heading, #222222);
}
.component--page-area a {
  color: var(--custom-main-link, #2274BB);
}

/* Footer */
.footer {
  background: var(--custom-footer-background, #B2B2BE);
  color: var(--custom-footer-text, #222222);
}
.footer a {
  color: var(--custom-footer-link, #2274BB);
}
.footer__meta {
  border-top-color: var(--custom-footer-border, #575761);
}

/* Benutzeranzeige oberhalb der Navigation */
/* ==========================================
   Bootstrap Package – Header und Navigation
   ========================================== */

/* Header-Grundstruktur */
#page-header {
    width: 100%;
}

#page-header .container-mainnavigation {
    width: 100%;
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    flex-direction: column;
}

/* Benutzeranzeige */
.custom-userbar {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 8px 0;
}

/* Logo und Navigation in einer Zeile */
.custom-brand-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

/* Logo */
.custom-brand-navigation .navbar-brand {
    flex-shrink: 0;
    margin-right: 24px;
}

/* Desktop-Navigation */
@media (min-width: 992px) {
    .custom-brand-navigation #mainnavigation {
        display: flex !important;
        flex: 1 1 auto;
        width: auto;
    }

    .custom-brand-navigation .navbar-nav {
        flex-direction: row;
        margin-left: 0;
    }
}

/* Mobile */
@media (max-width: 991.98px) {
    .custom-brand-navigation {
        flex-wrap: wrap;
    }

    .custom-brand-navigation #mainnavigation {
        flex-basis: 100%;
        width: 100%;
    }
}