/* CSS Document */

/********** FARBEN **********/

:root {
    --v-footer: #0e182a; 
    --v-dark: #252525;
    --v-light: #ffffff;
    --v-rosa1: #fbf6f1;
    --v-rosa2: #fae6d7;
    --v-rosa3: #ecc7ac;
    --v-rosa4: #d75959;
    --bs-gray-100: #fefefe;
    --bs-gray-200: #f6f7f9;
    --bs-gray-300: #cacaca;
    --bs-gray-400: #aab0bc;
    --bs-gray-500: #959ca9;
    --bs-gray-600: #60697b;
    --bs-gray-700: #2f353a;
    --bs-gray-800: #21262c;
    --bs-gray-900: #1e2228;
    --bs-priceline: #edeff3
}

/************** FARBEN ****************/

.bm-footer {
  background-color: var(--v-footer);
  }
  
.bm-bg-rosa1 {
  background-color: var(--v-rosa1);
  } 
  
.bm-bg-rosa2 {
  background-color: var(--v-rosa2);
  } 
  
.bm-bg-rosa3 {
  background-color: var(--v-rosa3);
  }       

.bm-bg-light {
  background-color: var(--v-light);
  }   
    
.bm-bg-gray1 {
  background-color: var(--bs-gray-100);
  } 

.bm-bg-gray2 {
  background-color: var(--bs-gray-200);
  } 
  
.bm-bg-gray3 {
  background-color: var(--bs-gray-300);
  } 
  
.bm-bg-gray4 {
  background-color: var(--bs-gray-400);
  } 
  
.bm-bg-gray5 {
  background-color: var(--bs-gray-500);
  } 

.bm-bg-gray6 {
  background-color: var(--bs-gray-600);
  } 

.bm-bg-gray7 {
  background-color: var(--bs-gray-700);
  }                 

.bm-bg-gray8 {
  background-color: var(--bs-gray-800);
  } 

.bm-bg-gray9 {
  background-color: var(--bs-gray-900);
  } 
    
.bm-text-rosa1 {
  color: var(--v-rosa1);
  }  
  
.bm-text-rosa2 {
  color: var(--v-rosa2);
  } 
      
.bm-text-rosa3 {
  color: var(--v-rosa3);
  }  
  
.bm-text-rosa4 {
  color: var(--v-rosa4);
  }  
  
.bm-text-light {
  color: var(--v-light);
  }
  
  
  
body {
  color: var(--v-dark);
}     
   
    
/**************** HEADLINES *******************/

h1,
h2,
h3,
h4,
h5,
h6
{  
    font-family: 'Open Sans', sans-serif;   
    font-weight: 700;
    color: var(--v-dark);
} 

/* p */
p {
  font-family: 'Open Sans', sans-serif;   
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  p {
    font-size: 0.8rem;
  }
}

/* DISPLAY-1 große Headlines dünn*/
.display-1 {
  font-family: 'Open Sans', sans-serif;   
  font-size: 2.1rem;
  font-weight: 300;
  line-height: 1.2;
}

@media screen and (max-width: 768px) {
  .display-1 {
    font-size: 1.5rem;
  }
}


/* DISPLAY-2 Zwischenheadline*/
.display-2 {
  font-family: 'Open Sans', sans-serif; 
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

@media screen and (max-width: 768px) {
  .display-2 {
    font-size: 1.0rem;
  }
}



/* DISPLAY-3 Startheadline*/
.display-3 {
  font-family: 'Open Sans', sans-serif;   
  font-size: 2.8rem;
  font-weight: 300;
  line-height: 1.2;
}

@media screen and (max-width: 768px) {
  .display-3 {
    font-size: 2.0rem;
  }
}

/* DISPLAY-4 Mini headlines*/
.display-4 {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;   
}

@media screen and (max-width: 768px) {
  .display-4 {
    font-size: 0.8rem;
    font-weight: 700;
  }
}

/* DISPLAY-5 Angebotsfragen */
.display-5 {
  font-family: 'Open Sans', sans-serif; 
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
}

@media screen and (max-width: 768px) {
  .display-5 {
    font-size: 1.3rem;
    font-weight: 300;
  }
}

/* DISPLAY-6 Bilduntertitel */
.display-6 {
    font-family: 'Open Sans', sans-serif;   
    font-weight: 600;
    font-size: 1.0rem;
    color: var(--v-dark);
}

@media screen and (max-width: 768px) {
  .display-6 {
    font-size: 0.8rem;
  }
}

/* DISPLAY-7 fliesstext zu small */
.display-7 { 
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--v-dark);
}

@media screen and (max-width: 768px) {
  .display-7 {
    font-size: 0.7rem;
  }
}

/* DISPLAY-8 kleiner als p aber größer als small */
.display-8 { 
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--v-dark);
    line-height: 1.5;
}

@media screen and (max-width: 768px) {
  .display-8 {
    font-size: 0.65rem;
  }
}

/* DISPLAY-9 Zitat */
.display-9 {
  font-family: 'Open Sans', sans-serif;   
  font-size: 2.0rem;
  font-weight: 300;
  line-height: 1.2;
}

@media screen and (max-width: 992px) {
  .display-9 {
    font-size: 1.7rem;
  }
}

@media screen and (max-width: 768px) {
  .display-9 {
    font-size: 1.5rem;
  }
}

/* DISPLAY-10 Oberschrift*/
.display-10 {
  font-family: 'Open Sans', sans-serif;   
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

@media screen and (max-width: 768px) {
  .display-10 {
    font-size: 0.7rem;
    font-weight: 700;
  }
}

/* DISPLAY-11 Termine ganze Breite */
.display-11 {
  font-family: 'Open Sans', sans-serif; 
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}

@media screen and (max-width: 768px) {
  .display-11 {
    font-size: 1.0rem;
  }
}

.lead {
  font-size: 1.1rem;
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  .lead {
    font-size: 1.0rem;
  }
}
  


/*************** HEADLINE END *************/

/************* LINIEN *******************/  
 
/* Thick red border */
hr {
  color: #dadcdf;

}

hr.price {
  color: var(--bs-priceline);
}

.underline {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  font-weight: 600;
}
.underline:after {
  content: "";
  display: block;
  background: var(--bs-pale-primary);
  border-radius: 0rem;
  position: absolute;
  width: 100%;
  height: 40%;
  left: 0%;
  bottom: 0%;
  z-index: -1;
  margin-top: 0;
  transition: all 0.2s ease-in-out;
}

.underline-fett {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  font-weight: 700;
}
.underline-fett:after {
  content: "";
  display: block;
  background: var(--bs-pale-primary);
  border-radius: 0rem;
  position: absolute;
  width: 100%;
  height: 40%;
  left: 0%;
  bottom: 0%;
  z-index: -1;
  margin-top: 0;
  transition: all 0.2s ease-in-out;
}


.divider-rosa1 {
  color: var(--v-rosa1);
  } 
  
.divider-rosa2 {
  color: var(--v-rosa2);
  }
  
body,
.icon-blob span,
.icon-blob h3,
.icon-blob p,
.icon-blob .step {
    font-family: 'Open Sans', sans-serif !important;
}   

.tags-bg  {
  font-size: 0.6rem;
  line-height: 1rem;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.35rem 0.7rem 0.3rem;
  background: var(--bs-soft-primary);
  color: var(--v-dark);
  }
  
.tags2-bg  {
  font-size: 0.6rem;
  line-height: 1rem;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.2rem 0.5rem 0.2rem;
  background: var(--bs-soft-primary);
  color: var(--v-dark);
  }
    
  
.card {
  border-radius: 0;
}  

a {
  font-weight: 600;
}

/* Stellt den Container des Videos responsiv ein */
.responsive-video {
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    padding-top: 25px; 
    height: 0;
}

/* Stellt das iframe des Videos so ein, dass es den Container voll ausfüllt */
.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.rahmen {
  border: 0.15rem solid;
  border-color: var(--bs-pale-primary);
  }
  
.divider-icon {
  border: 0;
  position: relative;
  margin: 4.5rem 0;
}
.divider-icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  color: var(--bs-pale-primary);
}
.divider-icon:before,
.divider-icon:after {
  position: absolute;
  top: 50%;
  content: "";
  border-top: 1px solid var(--bs-gray-300););
  width: calc(50% - 1.5rem);
}
.divider-icon:before {
  left: 0;
}
.divider-icon:after {
  right: 0;
}  

.table {
  --bs-table-color: #252525;
  --bs-table-active-color: #252525;
}

.check {
  width:40px;
}

@media screen and (max-width: 768px) {
  .check {
    width:30px;
  }
}

.terminbild {
  width:100px;
}

@media screen and (max-width: 768px) {
  .terminbild {
    width:70px;
  }
}

@media (min-width: 767px) {
.ticket {
    background-image: url(../../assets/img/ticketlinie.svg); background-repeat: repeat-y;
  }
}  

@media (max-width: 766px) {
.ticket {
    background-image: url(../../assets/img/ticketlinie_waagrecht.svg); background-repeat: repeat-x;
  }
} 

.termin-border {
  border-left: 0.1rem solid var(--bs-priceline);
}

.btn.btn-circle.btn-play {
  width: 2.5rem;
  height: 2.5rem;
  font-size: calc(1.355rem + 1.26vw);
}

/* Formulare */
.InputfieldHeader.form-label {
  display: none;
}


.InputfieldContent > button {
  display: block;
  margin: 1rem auto 0 auto;
}

.pw-no-select {
  font-size: 0.8rem;
}

.fb-fieldset {
  border: none;
  background: none;
  padding: 0 !important;
  margin: 0;
}

.fb-border-bottom {
  border-bottom: 1px solid var(--bs-gray-300);
}

.Inputfield .card-body {
  padding: 0;
}

.display-0 {
font-size: 2.5rem;
font-weight: 300;
}