nav {
  background-color: #f2f2f2;
}

.menu-style {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menu-element {
  display: inline;
}

p {
  font-family: 'Gorgia';
  font-size: 18px;
}

li {
  margin-bottom: 10px;
}

li a {
  display: inline-block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

li a:hover {
  background-color: #555;
  color: #fff;
}

.portrait {
  display: none;
}

.container {
  display:flex;
  justify-content: center;
  align-items: center;
}

.accordion-container {
  justify-content:center;
  align-items:center;
}

#personal-div {
  background-color: #000000;
  color: #ffffff;
}

.centered-content {
  /*width: 50%; /* 50% ist nur für große Desktops*/
  width: 100%;
  padding-left: 0vw;
  padding-right: 0vw;
}

.banner {
  background-image: none;
  background-size:contain;
  background-position: center;
  background-repeat:repeat-repeat-x;
  height: 120px; /* Höhe ohne Bild */
}

.text {
  flex: 1;
}

.image {
  flex: 1;
}

.divider {
  border-top: 1px solid white;
}


#image-grid {
  background-color: #444444;
  color: #ffffff;
}

.table-with-border {
  border-collapse: separate;
  border-spacing: 10px; /* Abstand zwischen den Zellen */
}

td {
  padding: 5px; /* Abstand in den Zellen */
}

.grid-container {
  display:block;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px; /* optional: Füge Abstand zwischen den Bildern hinzu */

  /*width: 800px; /* Breite des Quadrats anpassen */
  /*height: 600px; /* Höhe des Quadrats anpassen */
  width: 100%;
  height: 100%;
}

.grid-item {
  overflow: hidden; /* Optional: Verhindere, dass Bilder überlaufen */
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
 background-color: #111111;
 color: #ffffff;
 font-size: 18px;
 cursor: pointer;
 padding: 30px;
 width: 100%;
 text-align: middle;
 border: none;
 outline: none;
 transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
 background-color: #ccc;
}


/* Style the accordion panel. Note: hidden by default */
.panel {
 padding: 0 18px;
 background-color: white;
 display: none;
 overflow: hidden;
}

@media only screen and (min-width: 800px) {
  .banner {
    background-image: url("pics/banner_tools_1.png");
    height: 15vw; /* Höhe des Banners anpassen */
    background-repeat:repeat;
  }

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px; /* optional: Füge Abstand zwischen den Bildern hinzu */

    width: 800px; /* Breite des Quadrats anpassen */
    height: 600px; /* Höhe des Quadrats anpassen */
    /*width: 40vw;
    height: 30vw;*/
  }

  .centered-content {
    /*width: 50%;*/
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .portrait {
    display: block;
  }
}