:root{
  --text:#6a7373;
  --text-soft:#7a8484;
  --red:#9E142C;
}


*,
:after,
:before {
	box-sizing: border-box
}



html,body{ height:100%; }

html, body{
  overflow-x: clip;   /* verhindert horizontale Scrollbars durch translateX */
}

body{
  overflow-y: clip;   /* verhindert vertikales „Flackern“ durch Animation/Reflow */
}

/* Fallback für Browser ohne overflow: clip */
@supports not (overflow: clip){
  html, body{ overflow-x: hidden; }
  body{ overflow-y: hidden; }
}

body.page{
  margin:0;
  background:#fff;
  color:var(--text);
   font-family: "interstate", Arial,Helvetica,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.wrap{
  width: min(1600px, 100%);
  margin: 0 auto;
  padding-left: clamp(22px, 5vw, 110px);
  padding-right: clamp(22px, 5vw, 110px);
  padding-top:65px;
  padding-bottom: 40px;
}

/* TOP */
.top{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  padding: 0;
}

.top-left-col{
  display:flex;
  justify-content:flex-end;
}

.coming-block{
  width: min(480px, 100%);
  text-align:right;
}

.h-coming{
  font-size:48px;
  font-weight:300;
  margin:0 0 14px;
  color:var(--text);
}

.p-coming{
  font-size:20px;
  font-weight:300;
  line-height:1.45;
  margin:0;
  color:var(--text-soft);
}

.top-right-col{
  display:flex;
  justify-content:flex-start;
}

.logo-block{
  width:100%;
  text-align:center;
}

.logo{
  width:min(740px, 100%);
  height:auto;
  display:block;
  /*margin:0 auto;*/
  margin: 0 5% 0 5%;
}

/* FOOTER */
.footer{
  flex: 1 1 auto;
  background:var(--red);
  color:#fff;
  display:flex;
  align-items:flex-start;
}

.footer-wrap{
  width:100%;
  padding-top: 52px;
  padding-bottom: 34px;
}

.contacts{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(34px, 4.3vw, 86px);
  align-items:start;
}

.contact .name{
  font-weight:600;
  font-size:15px;
  margin:0 0 14px;
}

.contact div,
.contact a{
  font-size:16px;
  font-weight:300;
  line-height:1.55;
  color:#fff;
  text-decoration:none;
  display:block;
}

.contact a:hover{ text-decoration:underline; }

   .contact .name {
    font-size: 17px;
   }

.footer-bottom{
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  padding-top: 56px;
}

.impressum{
  font-size:13px;
  font-weight:300;
  color:#fff;
  text-decoration:none;
}
.impressum:hover{ text-decoration:underline; }


/* IMPRESSUM PAGE */
.page-impressum{
  display:block;
}

.impressum-page{
     margin:30px auto 0 auto;
  }

 .impressum-page  .logo-block {
      text-align: center;
      margin:0 auto;
      max-width:30%;
    }

.impressum-page{
  min-height: 100vh;
  display:flex;
  align-items:center;
  background:#fff;
  padding: 60px 0;
}

.impressum-content{
  max-width: 980px;
  margin: 0 auto;
  text-align:center;
}

.impressum-content h1{
  font-size:48px;
  font-weight:300;
  margin:0 0 30px;
  color:var(--text);
}

.impressum-content p{
  font-size:20px;
  font-weight:300;
  line-height:1.6;
  color:var(--text-soft);
  margin: 0 0 22px;
}

.impressum-content strong{
  color:var(--text);
  font-weight:600;
}

.impressum-back{
  margin-top: 34px;
}

.impressum-back a{
  color: var(--text);
  text-decoration:none;
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.impressum-back a:hover{
  border-bottom-color: rgba(0,0,0,.5);
}



/* LOADER */

/* Den Hintergrund abdunkeln oder über die Seite legen */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Hintergrundfarbe des Loaders */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Immer im Vordergrund */
}

.lds-ellipsis,
.lds-ellipsis div {
  box-sizing: border-box;
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33.33333px;
  width: 13.33333px;
  height: 13.33333px;
  border-radius: 50%;
  background: currentColor;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}




/* Desktop  tuning */
@media (min-width: 1200px){
  .top{ height: 620px; }
  .footer{ min-height: 460px; }
  .coming-block{ transform: translateY(-30px); }
  .logo-block{ transform: translate(-10px, -18px); }
  .logo{ width: min(760px, 100%); }

}

/* Desktop tuning */
@media (991.98px <= width <= 1400px) {
  
  .p-coming{
  font-size:18px;
}
  
}

/* MOBILE */
@media (max-width: 991.98px){


  html, body{
  overflow-x:  unset; 
  overflow: visible;
}

  
  body.page{ display:block; }

  .wrap{
    width:100%;
    padding-left: 28px;
    padding-right: 28px;
  }

  .top{
    height:auto;
    padding: 26px 0 18px;
    display:block;
  }

  .top-left-col,
  .top-right-col{ display:block; }

  .logo-block{
    text-align:left;
    transform:none;
    margin: 0 0 16px;
  }

  .logo{
    width: 200px;
    max-width: 70vw;
    margin:0;
  }

  .page-impressum .logo {
     margin:0 auto;
  }

  .impressum-page .logo-block {
    text-align: center;
    margin: 0 auto 30px auto;
    max-width: 100%;
    
}

  .coming-block{
    width:100%;
    text-align:left;
    transform:none;
    margin-top: 10px;
  }

  /* Mobile Typo */
  .h-coming{
    font-size:35px;
    margin: 0 0 10px;
  }

  .p-coming{
    font-size:16px;
    line-height:1.45;
  }

  .footer{
    min-height:auto;
    display:block;
  }

  .footer-wrap{
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .contacts{
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .footer-bottom{
    justify-content:right;
    padding-top: 34px;
  }


   .contacts .contact {
    margin-bottom:25px;
   }

   .contact .name {
    font-size: 17px;
   }

}


@media (max-width: 991.98px){
  .impressum-page{
    align-items:flex-start;
    padding: 36px 0 60px;
  }

  .impressum-content h1{
    font-size:35px;
    margin-bottom: 22px;
  }

  .impressum-content p{
    font-size:16px;
    line-height:1.6;
  }

  .wrap{
  padding-top:0px;
  padding-bottom: 0px;
}

  
  
  
}


@media (min-width: 992px) {
    .g-lg-5, .gx-lg-5 {
        --bs-gutter-x: 1.5rem;
    }
}