:root {
  --brand-blue: #02529C;
  --brand-accent: #DC1E35;
  --text-light: #FFFFFF;
}

.text-accent {
  color: var(--brand-accent) !important;
}

/* Headings */
h1,h2,h3,h4,h5,h6 {
  color: var(--brand-blue) !important;
}

/* Buttons überall */
button,
.btn {
  background-color: var(--brand-blue) !important;
  border-color:     var(--brand-blue) !important;
  color:            var(--text-light) !important;
}
button:hover,
button:focus,
.btn:hover,
.btn:focus {
  color: var(--brand-accent) !important;
}

/* Navbar Basis */
#mainNav {
  background: var(--brand-blue) !important;
  padding: 6px 0;
  display: flex;
  align-items: center; /* Logo & Inhalte mittig */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 1000;
}
#mainNav .container {
  display: flex;
  align-items: center;
  height: 100%;
}
#mainNav .nav-link {
  color: var(--text-light) !important;
  padding: 0 1rem;
  font-weight: 500;
  transition: color .2s, background-color .2s;
}

.navbar-brand img {
  height: 128px;   /* fixe Logo-Höhe */
  width: auto;     /* verhindert Verzerrungen */
  display: block;
}

#mainNav .nav-link:hover,
#mainNav .nav-link:focus {
  color: var(--brand-accent) !important;
}

#mainNav .nav-link.active,
#mainNav .nav-link:active {
  color: var(--brand-accent) !important;
  font-weight: 600;
}

/* Mobile Collapse Menü */
@media (max-width: 991px) {
  #mainNav .navbar-collapse {
    background: var(--brand-blue);
    position: absolute;
    top: 100%; /* direkt unter der Navbar */
    left: 0;
    width: 100%;
    padding: 0;
    z-index: 999;

    /* Smooth Transition */
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
  }

  #mainNav .navbar-collapse.show {
    max-height: 500px; /* ausreichend groß, ggf. anpassen */
    padding: 1rem 0;
  }

  #mainNav .nav-link {
    padding: .5rem 1rem;
  }
  #mainNav .nav-link:hover,
  #mainNav .nav-link:focus {
    background: rgba(245,183,0,0.1) !important; /* Accent-Hintergrund */
    color: var(--brand-accent) !important;
  }
  #mainNav .nav-link.active {
    color: var(--brand-accent) !important;
    background: rgba(245,183,0,0.15) !important;
  }
}

/* Footer */
#mainFooter {
  background: var(--brand-blue);
  color: var(--text-light);
}
#mainFooter a {
  color: var(--text-light);
  text-decoration: underline;
  padding: 0 .5rem;
}
#mainFooter a:hover {
  color: var(--brand-accent);
}

#btnScrollTop {
  display: none;
  position: fixed !important;   /* immer relativ zum Viewport */
  bottom: 24px;
  right: 24px;
  width: 70px;
  height: 70px;
  background: var(--brand-accent) !important;
  border-radius: 50%;
  border: 3px solid var(--brand-accent) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  cursor: pointer;
  opacity: 0.9;
  z-index: 2000; /* höher, damit nichts überdeckt */
  transition: background 0.3s ease, transform 0.2s ease, opacity 0.2s;
  display: flex;               /* mittig zentrieren */
  align-items: center;
  justify-content: center;
  margin: 0 !important;        /* verhindert Einfluss von Containern */
}

#btnScrollTop:hover {
  border-color: var(--brand-blue) !important;
  transform: scale(1.05);
  opacity: 1;
}

#btnScrollTop img {
   width: 100%;
  height: 100;
  object-fit: contain;
}

/* Mobile (max. 767px) */
@media (max-width: 767px) {
  #btnScrollTop {
    right: 16px !important;
    bottom: 16px !important;
    width: 54px;
    height: 54px;
    border-width: 2px; /* dünnerer Rand */
  }

  #btnScrollTop img {
    width: 100%;
  height: 100%;
  }
}

/* Kontaktinfos-Styling */
.contact-info p {
  margin-bottom: 1rem;
}
a {
  color: var(--brand-blue);
  text-decoration: none;
}
a:hover {
  color: var(--brand-accent);
  text-decoration: underline;
}