/* hubot-sans-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hubot Sans';
  font-style: normal;
  font-weight: 200;
  src: url('../bauelemente/hubot-sans-v4-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* hubot-sans-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hubot Sans';
  font-style: italic;
  font-weight: 200;
  src: url('../bauelemente/hubot-sans-v4-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* hubot-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hubot Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../bauelemente/hubot-sans-v4-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* hubot-sans-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hubot Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../bauelemente/hubot-sans-v4-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* hubot-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hubot Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../bauelemente/hubot-sans-v4-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* hubot-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hubot Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../bauelemente/hubot-sans-v4-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* hubot-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hubot Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../bauelemente/hubot-sans-v4-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* hubot-sans-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hubot Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../bauelemente/hubot-sans-v4-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* hubot-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hubot Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../bauelemente/hubot-sans-v4-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* hubot-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hubot Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../bauelemente/hubot-sans-v4-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
  font-family: 'Hubot Sans';
  color: #063429;   
}

footer {z-index: 99;}

option {font-family: Arial, Helvetica, sans-serif}

a {text-decoration: none; color: #063429;}

.letterpacing {letter-spacing: 1px;}
.lignumplanFontsize {font-size: 1.3em;}

.fontColorGold {color: rgb(209, 192, 137)}
.fontColorGold80 {color: rgb(212, 175, 53, .8)}
.bgColorGold {background-color:rgb(212, 175, 53)!important}
.bgColorGoldLight {background-color: #fdfbf5!important}
.borderColorGold {border: 1px solid rgb(212, 175, 53)!important;}

.centered-text {
  position: absolute;
  top: 50%;           /* Vertikale Mitte */
  left: 50%;          /* Horizontale Mitte */
  transform: translate(-50%, -50%);  /* Zentrieren */  
  /* background: rgba(255, 255, 255, 0.9);   Halbtransparenter Hintergrund */   
}

.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(6, 52, 41, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(235, 230, 220);;
  text-align: center;
  padding: 1rem;
  opacity: 1; /* dauerhaft sichtbar */
  pointer-events: none;
  z-index: 1;  
}

.haustypen {
  font-size: clamp(1rem, 1vw + .7rem, 1.8rem);
}

@media (min-width: 576px)  {
  .haustypen {
    font-size: clamp(1rem, 1vw + .7rem, 1.8rem);
  }
}

@media (max-width: 577px)  {
  .haustypen {
  font-size: clamp(1.7rem, 1vw + 1rem, 2rem);
  }
}

.overlay-text {
  font-size: clamp(1.7rem, 1vw + 1rem, 1.9rem);
  font-weight: bold;
  white-space: normal; /* erlaubt normale Umbrüche */
  overflow-wrap: break-word; /* bricht nur, wenn nötig */   
}

@media ((min-width: 578px) and (max-width: 1050px)) {
  .overlay-text {
  font-size: clamp(1rem, 1vw + .7rem, 1.5rem);  
  } 
}

.overlay-div {
  position: relative;
  background: url('../holzmodulbau-mit-vorgefertigten-raummodulen/moderner-holzbau.jpg');  
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; 
}

@media (max-width: 420px) {
  .overlay-text {
  font-size: clamp(1.3rem, 1vw + 1.3rem, 1.7rem);  
  } 
.overlay-div h3 {
   font-size: 1.5rem;  
  }
  .overlay-div h2 {
   font-size: 1.1rem; 
   letter-spacing: 0px!important; 
  }
  .overlay-div i {
   display: none; 
  }
}

@media (max-width: 768px) {
  .overlay-div {
    background: url('../holzmodulbau-mit-vorgefertigten-raummodulen/moderner-holzbau-mobil.jpg');
    background-repeat: no-repeat; 
  }
  .overlay-div h2 {
   font-size: 1.2rem;     
  }
}

.overlay-div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
     rgba(6, 52, 41, .4) 0%,
    rgba(6, 52, 41, .7) 30%,
    rgba(6, 52, 41, 0.7) 50%,
    rgba(6, 52, 41, .6) 100%
  ); 
  z-index: 0; /* unter den Text */
}

.overlay-div .lignumplanBorderColorBeige1,
.overlay-div h3,
.overlay-div p {
  position: relative;
  z-index: 2; /* über das Overlay */  
}


.lignumplanBgColor {background-color: #063429;}
.lignumplanBgColorBeige {background-color: rgb(250, 248, 244);}
.lignumplanBgColor10 {background-color: rgb(6, 52, 41, .1);}
.lignumplanBgColor50 {background-color: rgb(6, 52, 41, .5);}
.lignumplanBgColorBeige50 {background-color: rgba(253, 249, 242, 0.5);}
.bgLight90 {background-color: rgb(248, 249, 250, .8);}
.lignumplanBgColorBeigeFull {background-color: rgb(250, 248, 244);}
.lignumplanColor {color: rgb(6, 52, 41);}
.lignumplanColorBeige {color: rgb(235, 230, 220);}
.lignumplanColorBrown {color: rgb(78, 73, 63);}
.lignumplanColorBrown50 {color: rgb(78, 73, 63, .5);}
.lignumplanBorderColor {border: 1px solid rgb(6, 52, 41, .2);}
.lignumplanBorderColor5 {border: 5px solid rgb(6, 52, 41);}
.lignumplanBorderColorBottom {border-bottom: 2px solid rgb(6, 52, 41)!important;}
.lignumplanBorderColorBeige {border: 3px solid rgb(235, 230, 220);}
.lignumplanBorderColorBeige4 {border: 4px solid rgb(218, 202, 170);}
.lignumplanBorderColorBeige1 {border: 1px solid rgb(218, 202, 170);}

@media (max-width: 767.98px) {
  .centered-text h1 {
    font-size: 1.2em!important;       
  } 
  .holztafelbauweise h2 {
    font-size: 1.35em!important;  
  }
}

.mouseoverUp {
  transition: transform 0.3s ease;
} 

.mouseoverUp:hover {
  transform: translateY(-20px);
}

.mouseoverZoomOut {
  transition: transform 0.3s ease; 
} 

.mouseoverZoomOut:hover {
  transform: scale(1.05);  
}

.mouseoverZoom {
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.mouseoverZoom:hover {
  transform: scale(1.05);
  background-color: #063429!important;
  color: white; /* Textfarbe */
}

.mouseoverZoom:hover .icon i {
  color: white;
  transform: translateX(20px);
}

.icon i { 
  display: inline-block; /* wichtig für transform! */
  transition: transform 0.3s ease, color 0.3s ease;
}

.navbar {
  overflow: hidden;  
}

/* Subnav */
.subnav {
  float: left;
  overflow: hidden;
}

.subnav .subnavbtn {  
  border: none;
  outline: none;  
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  color: #063429;
}

.subnav-content {
  display: none;
  position: absolute;
  left: 0;  
  width: 100%;  
  z-index: 1;
}

.subnav-content a { 
  color: #000;
  text-decoration: none;
}

.subnav:hover .subnav-content {
  display: block;
}
/* Subnav Ende */

/* Subnav mobil */
.subnav { 
  overflow: hidden;
}
.subnav-mobil .subnavbtn-mobil {  
  border: none;
  outline: none;  
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  color: #063429;
}

.subnav-content-mobil {
  display: none;  
  left: 0;  
  width: 100%;  
  z-index: 1;
}

.subnav-content-mobil a { 
  color: #000;
  text-decoration: none;
}

.subnav-mobil.is-open .subnav-content-mobil {
  display: block;
}
/* Subnav mobil Ende */

.navbar-toggler span {
    display: block;
    background-color: #063429;;
    height: 4px;
    width: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
  }
  
  .navbar-toggler span:nth-child(1) {
    margin-top: 0.3em;
  }
  
  .navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
  }
  
  .navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
  }
  
  .navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg);
  }
  
  .navbar-toggler span:nth-child(1) {
    transform: translate(0%, 0%) rotate(0deg);
  }
  
  .navbar-toggler span:nth-child(2) {
    opacity: 1;
  }
  
  .navbar-toggler span:nth-child(3) {
    transform: translate(0%, 0%) rotate(0deg);
  }


  .animation {
    animation: myAnim .5s ease 0s 1 normal forwards;
    opacity: 0;
  }

  @keyframes myAnim {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.animation2 {    
    animation: myAnim2 1s ease 0s 1 normal forwards;
}

@keyframes myAnim2 {
	0% {
		height: 0px;
	}

	100% {
		height: 40px;
	}
}

.animation3 {    
    animation: myAnim3 .5s ease-out .3s 1 normal forwards;
    opacity: 0;
}

@keyframes myAnim3 {
	0% {
		opacity: 0;
		transform: translateY(-50px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.animation4 {   
animation: myAnim4 .5s ease-out .6s 1 normal forwards;
opacity: 0;
}

@keyframes myAnim4 {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.animation5 {    
  animation: myAnim5 .5s ease 0s 1 normal forwards;
}


@keyframes myAnim5 {
	0% {  
		opacity: 0;
		transform: translateY(-30px);
	}

	100% {    
		opacity: 1;
		transform: translateY(0);
	}
}

.animation6 {    
  animation: myAnim6 1s ease-in-out 0s 1 normal backwards;
}


@keyframes myAnim6 {
	0% {
    transform: translateY(40px);
		opacity: 0;		
	}

	100% {
    transform: translateY(0px);
		opacity: 1;		
	}
}

#myHeader {    
    transition: top 0.3s ease;
  }

.hidden {
    top: -160px; /* Höhe des Headers */
  }

  @media (max-width: 767.98px) {
    .hidden {
        top: 0px; /* Höhe des Headers */
      } 
  }

  .slider-container {
    position: relative;
    width: 100%;
    height: 396px;
    max-width: 800px;
    margin: auto;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.slider {
    position: relative;
    height: 396px;
    width: 100%;
}

.slider img {
    width: 100%;
    display: block;
}

.before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    clip: rect(0, 400px, 300px, 0); /* Adjust the width of the visible area */
}

.slider-handle {
    position: absolute;
    top: 0;
    left: 400px; /* Starting position of the handle */
    width: 10px;
    height: 100%;
    background-color: #f00;
    cursor: ew-resize; /* Change cursor style when hovering over the handle */
    z-index: 2;
}

#myHeader {    
    transition: top 0.3s ease;
  }

.hidden {
    top: -40px; /* Höhe des Headers */
  }

  @media (max-width: 767.98px) {
    .hidden {
        top: 0px; /* Höhe des Headers */
      } 
  }

.list-group-item {background: none!important;}
.accordion-button {color: #063429!important; background-color: rgb(235, 230, 220, .5)!important;}
.accordion-item:active {border:none!important;}
.accordion-button:focus {box-shadow: none!important;}

.accordion-button .bi {
  transition: transform 0.3s ease;
}

.accordion-button.fw-bold .bi {
  transform: rotate(90deg);
}
.accordion li {
    margin: .3em;
    padding-left: .4em;
}

.fs-responsive {
  font-size: 2.3rem; 
}

@media (min-width: 768px) {
  .fs-responsive {
    font-size: 2.7rem; 
  }
}

.fs-responsive-small {
  font-size: 1.7rem; 
}

@media (min-width: 768px) {
  .fs-responsive-small {
    font-size: 2.2rem; 
  }
}