html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  font-family: "Myriad", sans-serif;
  background-image: url('../img/background-kachel.webp');
  background-attachment: fixed;
  max-width: 2400px;
  margin:0 auto;
}

input {
  width: 80%;
  height: 40px;
  background-color: #dfddd8;
  border: 1px solid gray;
}

input,
textarea {
  background-color: #dfddd8;
  border: 1px solid gray;
}

input[type="submit"] {
  background-color: #1b2a55;
  color: white;
  border: none;
  font-weight: bold;
}

input[type="checkbox"] {
  width: 20px;
  margin: 0px 8px 0px 0px;
  position: relative;
  top: 10px
}

.bblau {
  background-color: #1b2a55;
}

.blau {
  color: #1b2a55;
}

.bold {
  font-weight: bold;
}

.uppercase {
  text-transform: uppercase;
}

.zitat {
  position: relative;
  font-style: italic;
}

.zitat::before {
  content: "\00AB";
  position: absolute;
  left: -16px;
}

h1 {
  font-size: 4vw;
  font-weight: bold;
  text-transform: uppercase;
}

h2 {
  font-size: 2.4vw;
  font-weight: bold;
  text-transform: uppercase;
}

.bold,
.strong {
  font-weight: bold;
}

#hauptmenue {
  position: absolute;
  top: 50px;
}

#hauptmenue ul {
  background-color: white;
  padding: 20px;
}

#hauptmenue .small {
  font-weight: normal;
}

#kontakt-menu {
  position: sticky;
  left: 0;
  top: 40%;
  z-index: 9;
  width: 52px;
  background-color: #1b2a55;
  border-radius: 0 10px 10px 0;
  border: 2px solid #c7b299;
  border-left: none;
  padding: 10px 0;
}

#kontakt-menu a img {
  display: block;
  padding: 6px 0;
  transition-duration: 1s;
}

#kontakt-menu a img:hover {
  transform: scale(1.2);
  transition-duration: 1s;
}

#start {
  background-image: url('../img/baer-xs.webp');
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: scroll;
  background-color: black;
}

#start a {
  text-decoration: none;
  color: white;
  padding: 10px 5px;
  transition-duration: 0.6s
}

#start a:hover {
  text-decoration: none;
  color: black;
  background-color: white;
  transition-duration: 0.6s
}

#logo a:hover {
  background-color: transparent;
}

#scrollspy {
  z-index: 9;
}

#scrollspy2 {
  top: 44px;
}

#scrollspy ul li {
  display: inline !important;
  position: relative;
  left: -34px
}

#scrollspy a {
  display: none
}

#scrollspy a.active {
  display: inline;
  color: #1b2a55;
  text-decoration: none;
  text-transform: uppercase;
}

.riss-oben {
  background-image: url('../img/riss-oben.webp');
  background-repeat: repeat-x;
  position: relative;
  margin-top: -20px;
  margin-left: -2px;
}

.riss-oben2 {
  background-image: url('../img/riss-oben.webp');
  background-repeat: repeat-x;
  position: relative;
  margin-top: -20px;
  top: -80px !important;
}

#sticky-header {
  background-image: url('../img/background-kachel.webp');
  background-attachment: fixed;
  height: 128px;
  #margin-top: -100px;
  width: 100%;

}

#sticky-header .row {
  #background-image: url('../img/background-kachel.webp');
  #background-attachment: fixed;
  height: 58px;
  margin-top: -128px;
  width: 100%;
}

#sch img {
  #position: absolute;
  #top: -128px !important;
  ;
  width: 100%;
  max-width: 100% !important;
  ;
  height: 10px !important;
}

#sticky-header img {
  height: 100px;
  position: relative;
  top: 60px !important;
  max-width: 768px;
}

#sticky-header .navbar-toggler {
  border: none;
  z-index: 99;
}

#sticky-header .navbar-toggler:focus {
  box-shadow: none;
}

.collapsed .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28153, 134, 117, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28153, 134, 117, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#sticky-header .navbar-nav {
  position: relative;
  top: 40px
}

#sticky-header #menu {
  position: relative;
  top: 40px;
}

#sticky-header nav a {
  display: inline;
  font-weight: bold;
  color: #1b2a55;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px 20px;
}

#sticky-header .navbar-toggler {
  margin-right: 0%;
  transition-duration: 0.6s;
}

#sticky-header .navbar-toggler:not(.collapsed) {
  transform: rotate(90deg);
  transition-duration: 0.6s;
}

#sticky-header nav .dropdown-menu {
  background-color: #1b2a55;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0px !important;
}

#sticky-header nav a.dropdown-item,
#sticky-header nav a {
  background-color: transparent;
  display: block;
  #margin: 0;
  #padding: 0;
  transition-duration: 0.6s;
}

#sticky-header nav a.dropdown-item {
  color: white;
}

#sticky-header nav a.dropdown-item:hover {
  #transform: scale(1.2);
  background-color: white;
  color: #1b2a55;
  transition-duration: 0.6s;
}

#sticky-header nav a:hover {
  background-color: #1b2a55;
  color: white;
  display: block;
  #margin: 0;
  #padding: 0;
  #transform: scale(1.2);
  transition-duration: 0.6s;
}

.headline h1 {
  color: white;
  font-size: 8vw;
  font-weight: bold;
}

#baerenauge::after {
  content: "\A";
  white-space: pre;
}

.kasten {
  background-color: transparent;
  color: white;
}

#scrollspywrapper .riss-oben {
  height: 163px;
  top: -120px;
}

#scrollspywrapper {
  #background-image: url('../img/background-kachel.webp');
  position: relative;
  top: -50px;
  background-attachment: fixed;

}

.spektrum .topline,
.spektrum h1 {
  color: #1b2a55;
  text-transform: uppercase;
}

#objektschutz,
#sicherheit,
#detektei,
#zertifikate {
  color: #1b2a55;
  padding-top: 200px;
  position: relative;
  top: -300px;
}

.spektrum h1 {
  font-size: 8vw;
  font-weight: bold;
}

.lstext {
  line-height: 32px;
}

#ueber-uns {
  background-image: url('../img/back_ueber_uns.webp');
  background-size: cover;
  color: white;
}

#ueber-uns h1 {
  font-size: 6vw;
}

#zertifikate #downloads a {
  color: white;
  text-decoration: none;
}

#carouselSicherheit .active .d-none {
  display: block !important;
}

.carousel-indicators {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: left;
  padding: 0;
  margin-right: 0%;
  margin-bottom: 0rem;
  margin-left: 0%;
  list-style: none
}

.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 100%;
  height: 100%;
  padding: 0;
  margin-right: 0px;
  margin-left: 0px;
  text-indent: 0px;
  cursor: pointer;
  background-color: transparent;
  background-clip: padding-box;
  border: 0;
  border-top: 0px solid transparent;
  border-bottom: 0px solid transparent;
  opacity: 1;
  transition: opacity .6s ease
}

.carousel-indicators .active {
  opacity: 1 !important;
  ;
}

.wrapper-carousel {
  background-color: #1b2a55;
  color: white;
}

.carousel-item {
  min-height: 10vw;
}

.carousel-item a {
  color: #c7b299;
  text-decoration: none;
}

#carouselSicherheit h1 {
  font-size: 6vw;
}

#downloads,
#downloads a {
  color: white;
  text-decoration: none;
}

.aktuell {
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #1b2a55;
}

.kontakt-slogan {
  position: absolute;
  bottom: 80px;
  font-weight: bold;
}

.kontakt-picto {
  max-width: 100%;
}

.k1 {
  position: absolute;
  bottom: 20px;
  color: #736357
}

.k2 {
  position: absolute;
  bottom: 0;
  font-weight: bold;
  text-decoration: none;
}

.k2 a {
  font-weight: bold;
  text-decoration: none;
  color: #1b2a55;
}

#zertifikate h1,
#kontaktformular h1,
#impressum h2,
#datenschutz h2 {
  font-size: 6vw;
  font-weight: bold;
}

#claim {
  font-weight: bold;
  color: white;
  font-size: 5vw;
  opacity: 0;
}

#pfeil-runter {
  opacity: 0;
}

#toplogo {
  max-width: 36vh;
  opacity: 0;
}

#auge div p:nth-of-type(1) {
  font-size: 24px;
}

#auge div p:nth-of-type(2) {
  font-size: 18px;
}

#auge div p:nth-of-type(3) {
  font-size: 24px;
  margin-top: 6vh
}

#ueber-uns .zitat {
  font-size: 4.2vw
}

textarea {
  max-width: 100%;
}

#auge a {
  color: #c7b299;
}

#footer a {
  color: #998675;
  text-decoration: none;
}

@media (max-width: 767px) {

  #sich1,
  #sich2,
  #sich3 {
    width: 14vw;
  }

  .aktuell {
    width: 0;
    height: 0;
    margin: 0 auto;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #1b2a55;
    position: relative;
    top: 6px;
  }
}

@media (min-width: 768px) {
  #start {
    background-image: url('../img/baer_gross.webp');
    background-size: cover;
  }

  #claim {
    font-size: 3.3vw;
  }

  .headline h1 {
    font-size: 6vw;
  }

  #carouselSicherheit h1 {
    font-size: 3vw;
  }

  .spektrum h1 {
    font-size: 4vw;
  }

  #zertifikate h1,
  #kontaktformular h1,
  #ueber-uns h1,
  #impressum h2,
  #datenschutz h2 {
    font-size: 4vw;
  }

  #ueber-uns .zitat {
    font-size: 3vw;
  }
}

@media (min-width: 992px) {
  #claim {
    font-size: 2vw;
  }

  #toplogo {
    max-width: 40vh;
  }

  .headline h1 {
    font-size: 5vw;
  }

  #zertifikate h1,
  #kontaktformular h1,
  #ueber-uns h1,
  #impressum h2,
  #datenschutz h2 {
    font-size: 3vw;
  }

  #ueber-uns .zitat {
    font-size: 2.2vw
  }
}


@media (min-width: 1200px) {
  #claim {
    font-weight: bold;
    color: white;
    font-size: 1.8vw;
  }

  #toplogo {
    max-width: 50vh;
  }

  .headline h1 {
    font-size: 4vw;
  }

  #auge p:nth-of-type(1) {
    font-size: 1.6vw;
  }

  #auge p:nth-of-type(2) {
    font-size: 1vw;
  }

  #auge p:nth-of-type(3) {
    font-size: 1.2vw;
    margin-top: 6vh
  }

  #sticky-header {
    width: 90%;
    position: sticky !important;
    ;
  }

  #ueber-uns .zitat {
    font-size: 1.4vw
  }
}


#impressum,
#datenschutz {
  color: #1b2a55;
}



#sich1 {
  animation: rotieren 10s 0s infinite forwards linear;
}

#sich2 {
  animation: rotieren 10s 0s infinite forwards linear;
}

#sich3 {
  animation: rotieren 10s 0s infinite forwards linear;
}

#toplogo {
  animation: einblenden 3s 1.5s forwards;
}

#claim {
  animation: einblenden 3s 2.5s forwards;
}

#pfeil-runter {
  animation: einblenden 3s 3.5s forwards;
}

@keyframes rotieren {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

@keyframes einblenden {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media (min-width: 2000px) {
  h1{
    font-size: 60px!important;
  }
}