@font-face {
  font-family: Jost;
  src: url(../fonts/Jost-Light.ttf) format("truetype");
}

body {
  background-color: #ddb68e;
  font-family: Jost, sans-serif;
}

.banner {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin: 0 auto;
}

.banner img {
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.flex-container {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}

.inhalt {
  margin: 0 auto;
  position: relative;
  right: 120px;
}

.info {
  width: 200px;
  grid-area: sidebar;
  padding: 20px;
  text-align: left;
}

.info span {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .info {
    visibility: hidden;
  }
}

@media (min-width: 1200px) {
  .info {
    visibility: visible;
  }
}

.kommode {
  padding-top: 40px;
  text-align: center;
  font-size: 4em;
  width: 598px;
}

.element img {
  width: 300px;
  height: auto;
  overflow: hidden;
  padding-bottom: 0;
}

.element p {
  text-align: center;
  font-size: 0.5em;
  padding-top: 0;
}

.kommode h2 {
  font-size: 1em;
  border: 2px solid black;
  padding: 5px;
  display: block;
  color: black;
  text-decoration: none;
  transition: transform 750ms ease-out 200ms;
  margin: 0;
}

.kommode .selectable:hover {
  color: #ddb68e;
  background: black;
}

.kommode .selected {
  color: #ddb68e;
  background: black;
  transform: scale(1.1);
}

.kommode > .info {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 750ms, opacity 0.5s 750ms;
}

.kommode:hover > .info {
  visibility: visible;
  opacity: 1;
}

.schub {
  display: block;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

.schub.offen {
  max-height: 99em;
  transition: max-height 0.75s ease-in-out;
}

.schub_inhalt {
  border: 2px solid black;
  padding: 1em;
  height: 100%;
}

.block {
  padding: 20px;
  min-width: 120px;
  max-width: 200px;
  display: block;
}