/*Homepage*/

.dienstleistungenSlide.is-active img{

  transition: 0.3s;
}
.dienstleistungenSlide{
  margin-right: 25% !important;
}

.videoContainer video{
  object-fit: cover;
}

.videoContainer:before {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
}
#download{
    scroll-margin-top: 9rem;
}

#Slider2ndNav li.active p{
  opacity: 1 !important;
  transition: 0.3s;
}
#splide-home-projekte .splide__pagination{
  bottom: -3.5em !important;
}
.slider-info-box{
  margin-right: -20%;
}
.slider-navigation a{
  color: black !important;
}
.homepage-start-banner{
  margin-top: -190px;
}
.circle-progress{
  min-height: 13.5rem;
  min-width: 13.5rem;
  display: block;
}
.circle-progress-value {
	stroke-width: 6px;
	stroke: #44A39D;
}
.circle-progress-circle {
	stroke-width: 2px;
  stroke: #8BC0BC;
}
.circle-progress-text{
  fill: #459e98;
}
.circle-millionen{
  font-size: 0.625rem;
  font-family: 'Montserrat Medium';
  fill: #000;
}
/*Off Market Verkauf*/
.off-market-verkauf .top-navigation nav ul li a, 
.projekte .top-navigation nav ul li a, 
.suchauftrag .top-navigation nav ul li a,
.angebot .top-navigation nav ul li a{
  color: #000 !important;
}
.off-market-verkauf .top-navigation nav ul li.active a, 
.projekte .top-navigation nav ul li.active a, 
.suchauftrag .top-navigation nav ul li.active a,
.angebot .top-navigation nav ul li.active a
{
  font-family: 'Montserrat Medium';
}
.border-bottom-medium.active{
  border-bottom: 8px solid #42A6A0;
}

/*Leistungen*/
.dienstleistungen-side-menu a{
  color: #000;
  font-size: 1.
}
.dienstleistungen-side-menu a:hover{
  font-family: 'Montserrat SemiBold';
  transition: 0.3s;
}
.dienstleistungen-arrow{
  transform: rotate(180deg);
  max-width: 50px;
}
.side-navigation p.active{
  opacity: 1 !important;
}
.leistungen-container{
  min-height: 500px;
}
.leistungen-container:nth-child(2n+2){
  flex-direction: row-reverse;
}
.leistungen .dienstleistung-icon{
  max-width: 50px;
  max-height: 50px;
}
/*Bewerten*/
.step-number h1{
  font-size: 6.25rem !important;
  line-height: 1 !important;
}
/*Impressum*/
.immotrust-impressum h3{
  font-family: 'Montserrat Medium';
}
/*Kontakt*/
::placeholder, form label p {
  font-family: 'Montserrat Medium';
  color: #000 !important;
  font-size: 1rem !important;
  opacity: 0.5 !important;
}
.kontakt-icons{
  max-width: 30px;
  max-height: 30px;
}
/*Suchauftrag*/
.immotrust-col-6{
  flex: 0 0 auto !important;
  width: 50%;
}

.fui-alert{
    padding: 1rem !important;
    margin-bottom: 1rem !important;
}
.fui-alert p{
    margin-bottom: 0px !important;
}

.suchauftrag-form .fui-i{
    width: 100% !important;
}
.immotrust-input .fui-input{
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #707070 !important;
  font-family: 'Montserrat Medium' !important;
  padding-left: 0px !important;
  padding-top: 1.5rem!important;
  padding-bottom: 1.5rem!important;
  background: transparent !important;
}
.fui-select{
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #707070 !important;
  padding-top: 1.5rem!important;
  padding-bottom: 1.5rem!important;
  padding-left: 0px !important;
  font-family: 'Montserrat Medium' !important;

}
.immotrust-textarea .fui-input{
  border: 1px solid #707070 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.immotrust-textarea .fui-label{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem!important;
  margin-bottom: 0px !important;
}
.fui-input, .fui-input::placeholder, .fui-label, .fui-radio label , .fui-select{
  text-transform: uppercase;
  color: #919191 !important;
  font-family: 'Montserrat Medium';
  font-size: 1rem !important;
  opacity: 1 !important;
}
.fui-field:not(.fui-type-hidden-field){
  margin-bottom: 0px !important;
}
.suchauftrag-button .fui-btn{
  margin-top: 1.5rem !important;
  padding-right: 3rem!important;
  padding-left: 3rem!important;
  padding-top: 1rem!important;
  padding-bottom: 1rem!important;
  border-radius: var(--bs-border-radius-sm)!important;
  text-transform: uppercase!important;
  align-items: center!important;
  border: 0!important;
  background-color: #459e98 !important;
  width: 50%;
  font-family: 'Montserrat SemiBold';
  letter-spacing: 2px;
}
.form-kontakt-group .fui-group{
    padding: 0px !important;
    border: 0 !important;   
}
.form-kontakt-group{
    padding-top: 1.5rem !important;;
    padding-bottom: 1.5rem !important;
}
.fui-legend{
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
    font-family: 'Montserrat SemiBold';
    margin-bottom: 0px !important;
  }
.immotrust-upload{
    padding-top: 1.5rem;
}
.immotrust-upload .fui-label{
    padding-bottom: 1.5rem;
}
.immotrust-upload .fui-input{
    border: 1px solid #707070 !important;
    border-radius: 0px;
    padding: 1rem;
}
/*Bsprechung Vereinbaren Popup*/
.extra-consent-gap{
  display: none !important;
}

/* ==========================================================================
   Heading-Level vs. Optik (Dokument-Outline, siehe CHANGES.md Task 1)
   Headings werden in global.css per Tag gestylt (h1{}, h2{}). Wird ein Heading
   nur aus Outline-Gruenden umgetaggt, haelt eine dieser Klassen die Optik
   exakt auf dem alten Stand. Werte sind 1:1 aus global.css gespiegelt --
   werden dort die h1/h2-Groessen geaendert, muessen sie hier mitgezogen werden.
   ========================================================================== */

/* <h2> das aussieht wie das fruehere <h1> (Demotion, z. B. home.twig) */
.h1-visual{
  font-size: 3.125rem !important;
  line-height: 3.125rem !important;
  margin-bottom: 0px !important;
}
@media (max-width: 1440px){
  .h1-visual{
    font-size: 2.525rem !important;
    line-height: 2.625rem !important;
  }
}
@media (max-width: 576px){
  .h1-visual{
    font-size: 1.85rem !important;
    line-height: 2rem !important;
  }
}

/* <h1> das aussieht wie das fruehere <h2> (Promotion der Seiten-Ueberschrift) */
.h2-visual{
  font-size: 2.125rem !important;
  line-height: 1.2 !important;
  font-family: 'Montserrat Medium';
  margin-bottom: 0px !important;
}
@media (max-width: 576px){
  .h2-visual{
    font-size: 1.65rem !important;
  }
}

/* <h1> das aussieht wie das fruehere <h5> (Promotion der Projekt-Detailueberschrift) */
.h5-visual{
  font-size: 1rem !important;
  line-height: 1.375rem !important;
}

/* Dekorative Schrittnummer, frueher <h1> in .step-number (bewerten/finanzierung) */
.step-number .step-number-value{
  font-size: 6.25rem !important;
  line-height: 1 !important;
}

/* Bild-Seitenverhaeltnis schuetzen (Audit O6).
   Die Vorlagen geben jetzt intrinsische width/height auf <img> aus, damit der
   Browser den Platz vor dem Laden reservieren kann (weniger Layout-Shift/CLS).
   Ohne height:auto wuerde ein CSS-breitengesteuertes Bild (z.B. .w-100) auf die
   Pixelhoehe aus dem Attribut gezwungen und dadurch verzerrt.
   Bewusst ein reiner Element-Selektor: schwaecher als JEDE Klasse, deshalb
   behalten .vh-50, .object-fit-cover & Co. unveraendert die Oberhand. */
img{
  height: auto;
}