@charset "utf-8";

/* outfit-100 - 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: 'Outfit';
  font-style: normal;
  font-weight: 100;
  src: url('../oekologisch-bauen/outfit-v15-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-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: 'Outfit';
  font-style: normal;
  font-weight: 200;
  src: url('../oekologisch-bauen/outfit-v15-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-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: 'Outfit';
  font-style: normal;
  font-weight: 300;
  src: url('../oekologisch-bauen/outfit-v15-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-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: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('../oekologisch-bauen/outfit-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-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: 'Outfit';
  font-style: normal;
  font-weight: 500;
  src: url('../oekologisch-bauen/outfit-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-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: 'Outfit';
  font-style: normal;
  font-weight: 600;
  src: url('../oekologisch-bauen/outfit-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-700 - 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: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('../oekologisch-bauen/outfit-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-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: 'Outfit';
  font-style: normal;
  font-weight: 800;
  src: url('../oekologisch-bauen/outfit-v15-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
  font-family: 'Outfit';  	    
  overflow-x: hidden;
  color: #4a442a;
  }

a {color: #4a442a; text-decoration: none;}
th, td {padding-top: 0px!important; padding-bottom: 0px!important; padding-left: 0px!important; color: rgb(74, 68, 42, .7)!important;} 
th {color: rgb(74, 68, 42)!important;}
.borderFirm {border-color: rgb(174, 212, 98)!important;}
.colorFirm {color: rgb(74, 68, 42)!important;}
.colorFirm50 {color: rgb(74, 68, 42, .7)!important;}
.borderFirm50 {border-color: rgb(74, 68, 42, .7);}
.eigenleistung {border-color: rgb(238, 236, 225)!important;}
.ausbauhaus {background-color: rgb(238, 236, 225, .93);}

.ms-n2 {
  margin-left: -0.5rem !important;
}

.holzrahmenbau {
  /* Das ist der entscheidende Befehl für das Quadrat: */
  aspect-ratio: 1 / 1;  
  /* --- Optional, aber empfohlen --- */
  /* Damit der Text exakt in der Mitte des Quadrats zentriert wird: */
  display: flex;
  align-items: center;
  justify-content: center; 
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;   
 }

 /* Der Zustand, wenn die Maus darüber schwebt */
.holzrahmenbau:hover {
  /* Verschiebt die Box um 10 Pixel nach oben */
  transform: translateY(-10px);
  
  /* Optional: Ein leichter Schatten verstärkt den "Abhebe-Effekt" */
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.quick-overview-wrapper:hover .overview-content {
    display: block!important;
    animation: slideInFromTop 0.4s ease forwards;
    -webkit-animation: slideInFromTop 0.4s ease forwards; /* Fallback für Safari und ältere Browser */
}

@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Webkit-Prefix für @keyframes */
@-webkit-keyframes slideInFromTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

/* Das Overlay, das sich über den Bildschirm legt */
.image-overlay {
  display: none; /* Unsichtbar beim Laden der Seite */
  position: fixed;
  z-index: 9999; /* Legt sich über alle anderen Elemente */
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85); /* Dunkler, halbtransparenter Hintergrund */
  align-items: center; /* Vertikale Zentrierung */
  justify-content: center; /* Horizontale Zentrierung */
}

/* Das vergrößerte Bild im Overlay */
.image-overlay img {
  max-width: 90%;
  max-height: 90vh; /* Verhindert, dass das Bild höher als der Bildschirm wird */
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  border-radius: 4px;
}

/* Das "X" zum Schließen */
.close-overlay {
  position: absolute;
  top: 20px;
  right: 40px;
  color: white;
  font-size: 70px;
  font-weight: 100;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.close-overlay:hover {
  color: #ccc;
}

/* Styling für beide Pfeile */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* Exakt vertikal zentrieren */
  color: white;
  font-size: 130px;  
  font-weight: 100;
  cursor: pointer;
  transition: 0.3s;
  user-select: none; /* Verhindert das versehentliche Markieren als Text */
  padding: 15px 25px;
  z-index: 10000;
}


/* Position links */
.prev-btn {
  left: 20px;
}

/* Position rechts */
.next-btn {
  right: 20px;
}



@media (max-width: 575.98px) {
  .ausbauhaus {margin-top: 2em!important; padding: 4px!important;}
  .ausbauhaus h2 {letter-spacing: 1px!important; font-size: 1.7em!important; padding: 3px}
  .ausbauhaus h3 {font-size: 1em;} 
  .bungalow90 .holzrahmenbau p, .bungalow106 .holzrahmenbau p {font-size: 1.2em!important;}
  .bungalow90 .holzrahmenbau table, .bungalow106 .holzrahmenbau table {font-size: 1.1em!important;}   
}

/* applies to small devices (landscape phones, less than 768px) */
@media (min-width: 575.98px) and (max-width: 767.98px) {
  .ausbauhaus {margin-top: 3em!important; padding: 4px!important;}
  .ausbauhaus h2 {letter-spacing: 1px!important; font-size: 1.8em!important; padding: 3px; white-space: nowrap;}
  .ausbauhaus h3 {font-size: 1em;}  
}

/*` applies to medium devices (tablets, less than 992px) */
@media (min-width: 767.98px) and (max-width: 991.98px) { 
  .ausbauhaus {margin-top: 3em!important; padding: 4px!important;}
  .ausbauhaus h2 {letter-spacing: 1px!important; font-size: 2.5em!important; padding: 3px; white-space: nowrap;}
  .ausbauhaus h3 {font-size: 1em;}
   #leistungen h4 {font-size: 1.25em!important; letter-spacing: 1px!important;}
   #leistungen p {font-size: .9em!important; margin-top: 1.6em!important;}
   .produktion p {min-height: .2rem!important; height: .2rem!important;}
   .bildarchiv p {min-height: 1.1rem!important; height: 1.1rem!important;}
 }

/* applies to large devices (desktops, less than 1200px) */
@media (min-width: 991.98px) and (max-width: 1199.98px) {
  .ausbauhaus {margin-top: 5em!important; padding: 5px!important;}
  .ausbauhaus h2 {font-size: 3.3em!important; padding: 3px; white-space: nowrap;}
  .ausbauhaus h3 {font-size: 1.6em;}
   #leistungen h4 {font-size: 1.7em!important; letter-spacing: 2px!important;}
   #leistungen p {font-size: 1.2em!important; margin-top: 1.6em!important;}
   .produktion p {min-height: .3rem!important; height: .3rem!important;}
   .bildarchiv p {min-height: 1.5rem!important; height: 1.5rem!important;}
}

/* applies to x-large devices (large desktops, less than 1400px) */
@media (min-width: 1199.98px) {
  .ausbauhaus h2 {white-space: nowrap;}
}

/* applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1199.98px) {  
  .bungalow90 .holzrahmenbau, .bungalow106 .holzrahmenbau {
  /* Das ist der entscheidende Befehl für das Quadrat: */
  aspect-ratio: 1 / .5;  
  /* --- Optional, aber empfohlen --- */
  /* Damit der Text exakt in der Mitte des Quadrats zentriert wird: */
  display: flex;
  align-items: center;
  justify-content: center;    
 } 
}