/** #c074b2  ROSA **/


/* roboto-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto Flex';
  font-style: bold;
  font-weight: 700;
  src: url('/fonts/roboto_flex_700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/** Fonts auf Arial zurücksetzen **/
:root,
[data-bs-theme="light"] {
  --bs-body-font-family: Arial, sans-serif;
}

.tooltip {
  font-family:
    Arial,
    sans-serif;
}

.popover {
  font-family:
    Arial,
    sans-serif;
}

.btn {
  font-family:
    Arial,
    sans-serif;
}

.masthead h1 {
  font-family: 'Roboto Flex';
}

.signup-section .form-signup input {
  font-family:
    Arial,
    sans-serif;
}

.contact-section .card .h4 {
  font-family:
    Arial,
    sans-serif;
}

/** Ende Font-Rücksetzung **/

.extrapage {
  background-color: #11111b;
  color: #ffffff;
}

.extrapagetitle {
  font-size: 4em;
}


.extrapagebutton {
  background-color: #ffdd00;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.1em;
  cursor: pointer;
  box-shadow:0 8px 16px 0 rgba(0,0,0,0.6);
  border-radius: 10px;
}

.extrapagebutton:hover {
  background-color: #ffee00 !important;
  color: black !important;
}


.navbar { /** Navigationsleiste Mobile **/
  --bs-navbar-color: rgba(255, 255, 255, 1);
  --bs-navbar-hover-color: #ffdd00;
  --bs-link-color: #ffdd00;
  --bs-navbar-toggler-border-color: #ff0000;
}

#mainNav .navbar-brand {
    link-color: #ffdd00;
}

#mainNav {
    background-color: #11111b !important;

}

#mainNav .navbar-brand { /** Text oben links **/
    color: #ffffff;
    background-color: #11111b;
    border-color: #ffffff;
    
}




a {
  color: #ffffff;
}

svg { /** social media icons **/
  vertical-align: middle;
  color: #ffffff;
  /**color: #c074b2;**/
}


.btn-primary {
  --bs-btn-bg: #971b81;
  --bs-btn-hover-bg: #c074b2;
  --bs-btn-hover-border-color: #c074b2;
}

.card {
  color: #000000;
  background-color: rgba(255, 255, 255, 0.1);
}

.contact-section .card hr {
    border-color: #ffdd00;
}

.text-black-50 {
  color: #ffffff;
}

.masthead {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 35rem;
  padding: 15rem 0;
  background: unset; /** macht die Grafik "übergreifender" **/
  background-image: url("../assets/img/ndw-masthead.jpg");
  background-repeat: no-repeat;
  background-color: #11111b;

}


.masthead h1 {
  background-color: #ffffff; /* Semi-transparent overlay */
  letter-spacing: 0.5rem;


}



.about-section {
  background: none;
  background-color: #11111b;
}

.projects-section {
  background-color: #11111b !important;
  color: #ffffff;
}

.contact-section .card {
  border-bottom: 0.25rem solid #ffdd00;
  color: #ffffff;
}


.contact-section .card h4 {
  color: #ffffff;
  border-color: #ffdd00;
}

.projects-section {
  padding: 10rem 0;
  background-color: #11111b !important;
  color: #ffffff;
}

.contact-section {
  background-color: #11111b !important;
}

.footer {
  background-color: #11111b !important;
}

.bg-black {
  background-color: #11111b !important;
}


#mainNav .navbar-toggler {
  color: #ffdd00 !important;
  border-color: #ffdd00 !important;
}

.text-black-50 {
  color: #ffffff !important;

}

.text-white-50 {
  color: #ffffff !important;
}

a:hover {
  color: #ffdd00 !important;
}

.contact-section .social a:hover {
  background-color: #ffdd00 !important;
}

.text-primary { /** Icons für Cards unten **/
  color: #ffffff !important;
}

.projects-section .project-text {
  color: #ffffff !important;
  background-color: #11111b !important;
}

.signup-section {
  padding: 10rem 0;
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0.5) 75%,
      #000 100%
    ),
    url("../assets/img/ndw-footer.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}



.h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: #ffdd00;
}

.spaced-para {
     margin-bottom: 1em;
  }

.px-4 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}