:root {
  --hauptfarbe:#d3d3c5;
  --schriftfarbe-dunkel:#333333;
  --schriftfarbe-hell:#fffff7;
}

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-size: 1rem;
  background-image:url(../Images/bg.png);
  background-size: cover;
  color:var(--schriftfarbe-hell);
}

* {
  box-sizing:border-box;
}
.navbar-brand img{
  height:150px;
}

.navbar-brand {
	right: 0;
	position: absolute;
} 
button.navbar-toggler {
  position: relative;
  right:10px;
}

.navbar {
  width:30em;
}

a.nav-link.btn.btn-outline-warning.btnnav {
  color:var(--schriftfarbe-hell)
}
a.nav-link.btn.btn-outline-warning.btnnav:hover {
  color:var(--schriftfarbe-dunkel)
}
#navbarNavDropdown {
  background: transparent;
  position: relative;
  right:10px;
}

@media (max-width: 1024px) {
  .navbar-nav {
    flex-direction: row !important;
    justify-content: space-around;
    width: 100%;
  }
  .nav-item {
    flex: 1;
    text-align: left;
  }
  .btnnav {
    width: 100%;
  }
}

@media (max-width: 650px) {
.navbar-collapse.collapse.show ul.navbar-nav{
    width: 320px;
    background:rgba(219, 209, 209, 0.8) ;
    text-align: left;
  }
  .btnnav{
   text-align: left;
  }
  .navbar-nav {
    flex-direction: column !important;
    width: 100%;
  }
  .nav-item {
    text-align: left;
  }
  .btnnav {
    width: 100%;
    margin-bottom: 5px;
  }
}

.underline {
  position: relative;
  display: inline-block;
}
.underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px; /* Abstand vom Text */
  height: 3px; /* Dicke der Unterstreichung */
  background-color: var(--schriftfarbe-hell); /* Farbe der Unterstreichung */
}