/* Reset some default styling */
body {
  font-family: Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background-image: url('hintergrund.jpg');
  background-size: cover;
  background-attachment: fixed;  
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
}

/* Create a container for the grid */
.container {
  width: 100%;
  max-width: 90%; /* Adjust as needed */
  margin: 0 auto;
}

/* Create rows to contain columns */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0px;
}

.col-1 { width: 8.33333%; }
.col-2 { width: 16.66667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333%; }
.col-5 { width: 41.66667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33333%; }
.col-8 { width: 66.66667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333%; }
.col-11 { width: 91.66667%; }
.col-12 { width: 100%; }

.col-5-1 { 
  width: 20%;
  @media (max-width: 1400px) {
    width: 25%;
  }
  @media (max-width: 768x) {
    width: 100%;
  }
}
.col-5-2 { width: 40%;}
.col-5-3 { width: 60%;}
.col-5-4 { width: 80%;}
.col-5-5 { width: 100%;}

/* Responsive breakpoints */
@media (max-width: 991px) {
  /* Reset column widths for mobile devices */
.col-0-mobile { width: 0%; }
.col-1-mobile { width: 8.33333%; }
.col-2-mobile { width: 16.66667%; }
.col-3-mobile { width: 25%; }
.col-4-mobile { width: 33.33333%; }
.col-5-mobile { width: 41.66667%; }
.col-6-mobile { width: 50%; }
.col-7-mobile { width: 58.33333%; }
.col-8-mobile { width: 66.66667%; }
.col-9-mobile { width: 75%; }
.col-10-mobile { width: 83.33333%; }
.col-11-mobile { width: 91.66667%; }
.col-12-mobile { width: 100%; }


}

.img-logo {
  width: 200px;
  margin-top: 15px;
  @media (min-width: 1400px) {
    width: 300px;
    margin-top: 0px;
  }
}

.header-objekt {
  margin: 10px;
  border-radius: 5px;

}

.content-objekt {

  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
  background-color: #484E42;
  color: #fff;
}

.content-border {

  border: 1px #484E42 solid;
}

.objekt-link{

  color: #fff;
  text-decoration: none;
}

.content-objekt-img {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.content-objekt-img img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease; /* Übergangseffekt auf die Transformationsänderung */
}

.content-objekt-img:hover img {
  transform: scale(1.2); /* Vergrößert das Bild um 20% beim Überfahren */
}

.search-objekt {
  margin-top: 15px; margin-bottom: 15px;
}

.search-input {
  font-size: 18px;
  margin-left: 5px;
  width: 80%; 
  border: 0px; 
  background-color: transparent;
  outline: none; /* Hier wird der Fokus-Rahmen entfernt */
  color: #A8A789;
}

.search-select {
  font-size: 18px;
  margin-left: 5px;
  width: 100%; 
  border: 0px; 
  background-color: transparent;
  outline: none; /* Hier wird der Fokus-Rahmen entfernt */
  color: #A8A789;
}

#vergroessertesBild {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Transparenter Hintergrund */
  justify-content: center;
  align-items: center;
}

#vergroessertesBild img {
  width: 90%;
  height: 90%;
  object-fit: contain; /* Proportionales Skalieren des Bildes */
  border-radius: 5px;
  cursor: pointer; /* Linkpointer hinzufügen */
}
