:root {
  --background-color-body: rgb(228, 225, 214);
  --font-color-body: black;
  --font-color-title: black;
  --font-color-hover: red;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/Fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

body,
html {
  height: 100%;
  margin: 0;
}

body {
  background-color: var(--background-color-body);
  font-size: .9em;
  font-family: 'Open Sans', sans-serif;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f5f5f5; /* colore di sfondo chiaro */
  color: #666;               /* colore testo */
  text-align: center;
  padding: 10px 0;
  font-size: 0.9em;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* leggero ombreggiamento sopra */
  z-index: 1000; /* sempre sopra gli altri elementi */
}
footer a {
  color: #666;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

.only-mobile {
  display: none;
}

ul li a {
  text-decoration: none;
  color: black;
}

nav {
  position: fixed;
  width: 100%;
  height: 90px;
  font-size: 15px;
  background-color: black;
  z-index: 1;
}

nav ul {
    list-style-type: none;
  padding: 0;
  text-align: center;
  display: flex;
  justify-content: center; /* Centra gli elementi orizzontalmente */

}

nav a {
  text-decoration: none;
}

#logo {
height: 3vw;
margin-right: 80px;
}

#image-container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  z-index: -1;
}

#image-container img {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  object-fit: cover;
  height: 100%;
  width: 100%;
  transition: opacity 3s ease;
}

.fade-in {
  opacity: 1;
  z-index: -1;
}

.fade-out {
  opacity: 0;
  z-index: -2;
}

#thumbnail-popup {
  max-width: 20vw;
}

#thumbnail * {
  display: block;
}

#thumbnail {
  padding: 20px;
  background: var(--background-color-body);
  position: absolute;
  right: 0px;
  bottom: -200px;
  transition: bottom 3s;
}

.center-text {
  text-align: center;
}

#flyer-preview-div {
  padding-top: 20px;
}

#flyer-preview {
  box-shadow: 10px 10px 10px gray;
  transition: all .2s ease-in-out;
}

#flyer-preview:hover {
  cursor: pointer;
  transform: scale(1.1);
}

#thumbnail.up {
  bottom: 0px;
}

#thumbnail:hover {
  cursor: pointer;
}

#thumbnail.hidden {
  display: none;
}

#popup-image {
  display: block;
  background-color: rgba(0, 0, 0, 0.9);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#popup-image.hidden {
  display: none;
}

.collapsible {
  display: none;
}

#menu-content li:hover .collapsible {
  display: block;
}

#container {
  height: 100vh;
}

#infoBox {
  width: 300px;
  overflow-y: auto;
  background-color: rgb(190, 190, 190);
  padding: 30px;
  border-radius: 0 5px 5px 0;
  height: calc(100vh - 110px); /* Die maximale Höhe ist die Bildschirmhöhe abzüglich 100px (für den Abstand zum oberen Rand) */
}

#tab {
  position: relative;
  background: linear-gradient(to left, rgb(247, 247, 0), rgb(190, 190, 190));
  padding: 10px;
  top: 200px;
  height: 100px;
  width: 40px;
  border-radius: 0 15px 15px 0;
  text-align: center;
  writing-mode: vertical-rl;
  border-top: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

#sidebar {
  position: fixed;
  display: flex;
  top: 90px;
  left: 0;
  left: -380px;
  transition: left 1s;
  }

#sidebar:hover {
  left: 0;
}

#menu-content {
  flex-direction: row;
  justify-content: space-between;
  width: 55vw;
  margin-left: 15vw;
  margin-top: auto;
  display: flex;
  align-items: center;
  top: 20%;
  position: relative;
}


#menu-content a {
  color: white !important;
  }

#menu-content li {
  min-width: 100px;
 text-align: center;
}

#menu-content ul li:hover {
  background-color: rgb(30, 30, 30);
}

#menu-content ul li {
  border-radius: 0;
padding-top: 10px;
padding-bottom: 10px;
 padding-left: 20px;
  padding-right: 20px;
}

#menu-content li:hover ul {
  height: auto;
}

#menu-content ul {
  position: absolute;
  border-radius: 4px;
  box-shadow: 0 8px 16px 0 #000;
  background-color: black;
  padding-top: 30px;
 margin-left: 0;
}

.plusminus {
  display: none;
  cursor: auto;
}

.kontakt-adresse.collapsible.collapsed {
  display: block;
}


#headerPP,
.rowPP {
  display: table-row;
}

.tablePP {
  border-spacing: 1em;
}

#headerPP {
  font-weight: 700;
}

#hoerprobenContent {
  max-width: 400px;
}

#hoerprobenContent li {
  padding-bottom: 20px;
}

.colPP {
  display: table-cell;
  padding-right: 20px;
}

.rowPP .colPP:first-child {
  font-weight: 400;
}

.rounded-corners {
  border-radius: 10px;
}

.padding-main-page {
  padding: 10vh 25vw;
}


/* Minimum aspect ratio */
@media (min-aspect-ratio: 3/4) {
#image-container {
height: 120vh;
}

  #image-container img {
  top: -17%;
  }
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 16/9) {
  #image-container {
  display: block;
  }
}