@font-face {  font-family: 'Raleway';  src: url("../Fonts/Raleway-Light.ttf");}
@font-face {  font-family: 'Exo 2';  src: url("../Fonts/Exo2-Light.otf");}
@font-face {  font-family: 'Satoshi';  src: url("../Fonts/Satoshi-Variable.ttf");}
@font-face {  font-family: 'Fluid Geo';  src: url("../Fonts/FluidGeoVF.ttf");}

/* Main */

html, body { 
    padding: 0;  margin: 0; 
    height: 100%; width: 100%; 
    font-family: 'Satoshi' !important; 
    color: #303030;
    scroll-behavior: smooth;
}

main {  
  padding-top: 80px;
  display: block;
  width: 100%;
  background: #f1f1f1;
}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  margin-bottom: .5rem;
}

h1, h2 {
  font-family: "Exo 2";
  text-align: center;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}
a, a:hover { 
  color: inherit !important;  text-decoration: none !important; 
}

/* Loading Animation*/

#loading {
  -webkit-animation: rotation 4s infinite linear;
  animation: rotation 4s infinite linear;
  width: 100px;
  height: auto;
  margin: auto;
  display: block;
  margin-top: 20%;
}
#load_screen {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100%;
}

@-webkit-keyframes rotation {
  from {
      -webkit-transform: rotate(0deg);
  }
  to {
      -webkit-transform: rotate(359deg);
  }
}
@keyframes rotation {
  from {
      -webkit-transform: rotate(0deg);
  }
  to {
      -webkit-transform: rotate(359deg);
  }
}


/* Header */

.header { 
  font-family: 'Exo 2'; 
  width: 100%; height: 90px;  
  font-variant: all-petite-caps;
  color: #f1f1f1;
  position: fixed; display: flex;
  font-size: 1.7em; 
  padding-top: 5px;
  z-index: 1000; 
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.header_logo  { 
  padding-top: 5px;
  margin-left: 3vw;
}
.logo-image {
  width: auto;
  transition: 0.4s;
}
.header .menu  { 
  float: right;
  margin-right: 50px;
  margin-left: auto;
  padding-top: 10px;
}

.header .menu ul { 
  float: right;
  padding-top: 10px;
}
.header .menu li { 
  line-height: 1.5em; 
  list-style: none; 
  display: inline-grid; 
  padding: 0 8px;
  position: relative;
}
.header .menu .active { 
    color: #eb681d;
}
.header .menu li:before, .header .menu li:after  { 
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
  height: 3px;
  width: 55%;
  background-color: #eb681d;
  position: absolute;
  content: '';
  opacity: 0;
}
.header .menu li:before {
  top: 0;
  left: 0;
}
.header .menu li:after {
  bottom: 0;
  right: 0;
}
.header .menu li:hover:before,
.header .menu li.hover:before,
.header .menu li:hover:after,
.header .menu li.hover:after {
  opacity: 1;
}
.header .menu li:hover:before,
.header .menu li.hover:before {
    left: 45%;
}
.header .menu li:hover:after,
.header .menu li.hover:after {
  right: 45%;
}
.burger{
  display: none;
}

.burger div{
  width: 25px;
  height: 3px;
  background-color: #f1f1f1;
  margin: 5px;
  transition: all 0.3s ease;
}

/* Trailer */
#trailer {
  margin-bottom: 0;
  max-height: 400px;
  text-align: center;
  /*width: -webkit-fill-available;*/
  overflow: hidden;
  -webkit-perspective: 100px;
  perspective: 100px;

  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

/*#trailer, #trailer-home{
  min-height: 100vh;
}*/
#trailer-home {
  margin-bottom: 0;
  min-height: -webkit-fill-available;
  max-height: 100%;
  text-align: center;
  background-color: #3030308f;
  font-size: 3em;
  padding-top: 300px;
  color: #f1f1f1;
}

#trailer-home h1{
  color: #eb681d;
}
#trailer-home p{
  text-transform: uppercase;
  font-size: 0.5em;
}
#trailer-home i:before {
  padding-top: 3em;
  animation-name: hovering;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  cursor: pointer;
  font-size: 0.8em;
}

.error-page-bg {
  margin-bottom: 0;
  min-height: -webkit-fill-available;
  max-height: 100%;
  text-align: center;
  padding-top: 30vh;
  color: #f1f1f1;
}

.error-page-bg h1 {
  font-size: 8em;
  font-weight: bolder;
}
.error-page-bg h6 {
  padding-bottom: 4vh;
}


/*whatsapp-icon*/
.whatsapp {
    position: fixed;
    z-index: 2000;
    font-size: 3em;
    color: #f1f1f1;
    width: auto;
    height: auto;
    border-radius: 30em;
    padding: 0 0.1em;
    /* max-width: fit-content; */
    right: 5vw;
    bottom: 10vh;
    background-color: #23b33a;
}

.icon-down-open:hover {
  color: #eb681b;
}

/* Background Image */
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax__layer img {
  display: block;
  position: absolute;
  top: 0;
  max-width: -webkit-fill-available;
  height: auto;
  opacity: 0.1;
}

.parallax__layer__1 {
  -webkit-transform: translateZ(-250px) scale(3.5);
          transform: translateZ(-250px) scale(3.5);
}

.bg-image {
  height: 50vh;
  font-family: 'Exo 2';
  color: #f1f1f1;
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  text-align: center;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-image-bodytext {
  filter: drop-shadow(2px 4px 6px #303030);
  font-size: 1.4em;
  width: 60vw;
}

.bg-image-repeat {
  background-attachment: fixed;
  background-repeat: repeat;
  background-size: 3px;
}



.btn-orange{
  background-color: #eb681b;
  padding: 10px;
  border-radius: 3px;
  text-transform: uppercase;
  color: #f1f1f1 !important;
}
.btn-light{
  color: #f1f1f1 !important;
}

.text-right{
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.container{
  padding: 5em 0 !important;
}

.full-width-container{
  background-color: #e8e8e8;
  width: 100%;
  padding-top: 10vh;
  overflow: hidden;
}

.container.title{
  margin-top: 20vh;
  margin-left: 12vw;
}

.light-grey.welcoming {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  background-color: #f1f1f1;
}

.title h1 {
  font-size: 5em;
  font-weight: bold;
  text-shadow: 2px 1px 0 #5a5858;
  text-align: left;
  mix-blend-mode: hard-light;
  color: #eb681b;
}

.title h5{
    padding-bottom: 10px;
    border-bottom: 1px solid #eb681b;
    text-align: left;
    font-family: 'Satoshi';
    letter-spacing: normal;
}

.map {
  background-color: #f1f1f1;
}
.gmnoprint.gm-style-mtc-bbw {
    display: none;
}
.grey {
  background-color: #e7e7e7;
}

/* Der mindshape-Wrapper, der vor Consent gerendert wird */
.cookie-consent-replacement {
  position: relative;
  min-height: 460px;              /* Höhe der späteren Map */
  overflow: hidden;
}

/* Statisches Platzhalterbild als Hintergrund (lokal!) */
.cookie-consent-replacement::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/fileadmin/map-placeholder.png") center/cover no-repeat;
  z-index: 0;                     /* liegt unter Button/Text */
}

/* Inhalt (Container/Row/Button) über das Bild legen */
.cookie-consent-replacement > .container {
  position: relative;
  z-index: 2;
}
.cookie-consent-replacement .col-12 {
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cookie-consent-replacement .col-12 > a[href*="datenschutz"] {
  margin-top: auto;              /* drückt diese Zeile nach unten */
  white-space: nowrap;
  opacity: 0.95;
}
.cookie-consent-replacement .col-12 > a[href*="datenschutz"],
.cookie-consent-replacement .col-12 > a[href*="impressum"] {
  font: 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  text-decoration: underline;
  padding: 5px;
  z-index: 3;
}
.cookie-consent-replacement .col-12 > a[href*="datenschutz"] + * {
  margin: 0 .4rem;
}


/* Button als halbtransparentes Overlay aufziehen */
.cookie-consent-replacement .accept.btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 360px;
  margin-top: 50px;
  padding: 24px;
  background: rgba(0,0,0,.45);
  color: #fff !important;
  border: 0;
  cursor: pointer;
  text-align: center;
  font: 600 15px/1.4 Satoshi,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}





/*Footer*/
footer{
  background-color: #303030;
  color: #f1f1f1;
  padding-bottom: 5px;
  margin-top: -10px;
}
footer h1, footer h2{
  font-size: 1.5em;
  text-align: left;
  margin: 6vh 0 2vh 0;
  border-bottom: solid 1px #eb681d;
}

footer h3, footer h4, footer h5, footer h6 {
  font-family: 'Exo 2';
  margin-bottom: 0;
  font-size: 1.2em;
  text-align: left;
}
footer p {
  margin-top: 0;
  margin-bottom: 0;
}

footer ul {
  list-style: none;
}

.social-media {
  font-size: 1.5em;
  margin-right: 5px;
  box-shadow: 5px 5px 5px #232323, -4px -4px 5px #3d3d3d;
  border-radius: 20px;
  padding: 5px;
}

/*Formular Beschreibung ausblenden*/
span.help-block {
    display: none;
}

/*Kontakt*/
.contact {
  background-color: #f1f1f1;
/*opacity: 0.7;
background-image: radial-gradient(#434348 0.25px, #f1f1f1 0.25px);
background-size: 5px 5px;*/
}
.contact-info {
  text-align: center;
  padding-bottom: 70px;
}
.contact-info i, .contact-info h6 {
  color: #eb681d;
  text-transform: uppercase;
}

.contact-info i{
  font-size: 1.2em;
}

.contact-info-column:nth-child(2) {
  border-right: 1px solid #eb681d;
  border-left: 1px solid #eb681d;
}

/*Formular*/
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea{
  width: 100%;
  background-color: #f1f1f1;
  font-family: 'Satoshi';
}
.form-label {
  display: none;
}
footer .btn.btn-primary {
  color: #f1f1f1;
}

#spektrum-video {
  position: fixed;
  z-index: -1;

  width: 100%;
  height: auto;
  top: -10px;
  right: 0;
}

.metanavigation{
  text-align: center;
  font-size: 0.8em;
  margin-bottom: 0;
  border-top: solid 1px #515151;
}
.metanavigation li{
  list-style: none; 
  display: inline-grid;
  padding: 5px;
}
.metanavigation li:hover{
  color: #eb681d;
}

.copyright-section {
  text-align: center;
  font-size: 0.8em;
}
.bg-image-bodytext {
    font-size: 1.2em;
    width: 85vw;
}





@supports (-webkit-touch-callout: none) {
  #trailer {
    background-attachment: scroll; 
    background-size: auto 100vh;
  }
}

@media (min-width: 550px) {
  h2 {
    font-size: 2.3em;
  } 
  h3{
    font-size: 1.6em;
  }

  #trailer-home h1 {
    font-size: 1.5em;
  }
  .ce-textpic, .ce-image, .ce-nowrap .ce-bodytext, .ce-gallery, .ce-row, .ce-uploads li, .ce-uploads div {
    overflow: visible !important;
  }
}

@media (min-aspect-ratio: 16/9){
  #spektrum-video {
    width: 100%;
    height: auto;
  }
}
@media (max-aspect-ratio: 16/9){
  #spektrum-video {
    width: auto;
    height: 100%;
  }
}

@media screen and (max-width:768px){
  
  .container {
    width: 90%;
  }
  .container.title {
    margin-top: 25vh;
    margin-left: 5vw;
  }

  .ce-textpic, .ce-image, .ce-nowrap .ce-bodytext, .ce-gallery, .ce-row, .ce-uploads li, .ce-uploads div {
    overflow: visible !important;
  }
  .frame-indent {
    margin-left: 10%;
    margin-right: 10%;
  }
  .contact-info-column:nth-child(2) {
    border-top: 1px solid #eb681d;
    border-bottom: 1px solid #eb681d;
    border-left: none;
    border-right: none;
  }

  #trailer h1 {
    font-size: 2.6em;
  }

  .ce-gallery img {
    max-width: 90vw;
    height: auto;
  } 

  body{
    text-align: center;
    font-size: 1.3em;
  }
  p{
    padding: 0 4vw;
  }
  h1, h2, h3, h4, h5, h6 {
    text-align: center;
  }
  
  footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
    text-align: center;
  }
   h2 {
    font-size: 2em;
  } 
  h3{
    font-size: 1.3em;
  }

  #spektrum-video {
    width: auto;
    height: 100vh;
  }

  .menu {
    position: absolute;
    right: 0px;
    height: 99vh;
    background-color: #303030ed;
    display: flex;
    flex-direction: column;
    margin-right: 0px !important;
    align-items: center;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }

  .menu ul {
    margin-top: 80px;
  }

  .menu li {
    opacity: 0;
    display: list-item !important;
  }

  .burger{
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
  }
  .menu-active {
    transform: translateX(0%);
  }
  .header .menu li:before, .header .menu li:after  { 
    -webkit-transition: none;
    transition: none;
    height: 0;
    width: 0;  
  }
  .title h1 {
    font-size: 3em;
  }

  .light-grey.welcoming {
    background-size: 200%;
    background-position-y: bottom;
    background-position-x: right;
  }
}


  @keyframes menuItemFade {
    from{
      opacity: 0;
      transform: translateX(50px);
    }
    to{
      opacity: 1;
      transform: translateX(0px);
    }
  }

  .toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  .toggle .line2 {
    opacity: 0;
  }
  .toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
  }


.ce-gallery img {
    border-radius: 10px;
}

@keyframes hovering {
  from {transform:translate(0, 0px);}
  50% {transform:translate(0, -25px);}
  to {transform: translate(0, -0px);}
}