body {
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.container {
  position: sticky;
  top: 0;
  display: grid;
  grid-gap: 10vw;
  grid-template-columns: auto;
  grid-template-areas:
    "nav nav nav nav nav nav";
  color: white;
  text-shadow: 1.5px 2px 0px purple;
  font-weight: bold;
  align-items: start;
  width: 100%;
  height: 0px;
  opacity: 100%;
  z-index: 100;
}

.box {
  font-size: 120%;
  opacity: 100%;
  z-index: 100;
  height: 70px;
  display: flex;
  justify-content: center; /* Zentriert horizontal */
  align-items: center; /* Zentriert vertikal */
  flex-direction: column; /* Falls du auch Text oder andere Inhalte in der Box hast */
}

.nav {
  background-color: transparent;
  transition: background-color 0.5s ease-in-out; /* Weiche Übergänge */
  grid-area: nav;
  grid-template-columns: 295px 1fr 105px 95px 130px 105px 4%;
  grid-row: 0;
  display: grid;
  height: 65px;
  opacity: 100%;
  z-index: 100;
}

.logoBar {
  grid-column: 1;
  grid-row: 1;
}

.textBar {
  grid-column: 2;
  grid-row: 1;
  text-align: center;
  visibility: hidden;
}

.homeBar {
  text-align: right;
  grid-column: 3;
  grid-row: 1;
}

.setsBar {
  text-align: center;
  grid-column: 4;
  grid-row: 1;
}

.serviceBar {
  text-align: center;
  grid-column: 5;
  grid-row: 1;
}

.contactBar {
  text-align: left;
  grid-column: 6;
  grid-row: 1;
}

/* profile symbol (image) size */
.container img {
  height: 75px;
  width: auto;
  margin-top: 23px;  /* Abstand nach unten */
  margin-left: 15px; /* Automatisch nach rechts schieben */
}

a:link {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
  text-decoration: none;
}

/* mobile stuff*/
.containerMobile {
  position: sticky;
  top: 0;
  display: grid;
  grid-gap: 10vw;
  grid-template-columns: auto;
  grid-template-areas:
    "nav nav nav";
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  text-shadow: 2px 4px 0px purple;
  /* anders als bei der nicht mobilen Ansicht*/
  font-size: 28px;
  font-weight: bold;
  align-items: center;
  width: 100%;
  height: 120px;
  opacity: 100%;
  z-index: 100;
}

@media (max-width: 800px) {
  .containerMobile {
    height: auto;
  }
}

.navMobile {
  grid-area: nav;
  grid-template-columns: 300px 1fr 125px;
  grid-row: 0;
  display: grid;
  height: 115%;
  opacity: 100%;
  z-index: 100;
}

.containerMobile img {
  height: 70px;
  width: auto;
}

.textBarMobile {
  text-align: center;
}

.menuBar img {
  height: 70px;
  width: 85px;
}

.menuBar {
  grid-column: 3;
  grid-row: 1;
}

/* Popup Form Profile */
h1 {
  text-align: center;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  z-index: 100;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 0;
  padding: 5%;
  /*40px*/
  background-color: rgba(169, 167, 167, 0.7);
  border-radius: 5%;
  /*40px*/
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  width: 55%;
  /*500px*/
  max-width: 80%;
  /*80%*/
  /* Begrenze die Breite auf 80% des Viewports */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.behindPopup {
  z-index: 1;
  height: 100%;
}

.popup .content {
  max-height: 30%;
  overflow: auto;
}

/* Profile Popup Buttons inside */
.button {
  display: block;
  text-align: center;
  font-size: 55px;
  background-color: rgb(0, 44, 58);
  box-shadow: 2px 4px 0px purple;
  padding: 34px 30px;
  /*leeren raum neben dem Button top rigth bootum left*/
  border: none;
  border-radius: 40px;
  cursor: pointer;
  width: auto;
  margin-bottom: 10px;
}

/* Normal Button */
.normalButton {
  display: block;
  text-align: center;
  font-size: 30px;
  background-color: rgb(0, 44, 58);
  box-shadow: 2px 4px 0px purple;
  padding: 25px 30px;
  /*leeren raum neben dem Button top rigth bootum left*/
  border: none;
  border-radius: 30px;
  cursor: pointer;
  width: auto;
  margin-bottom: 10px;
}

@media (max-height: 600px) {
  .popup {
    padding: 0% 5% 0% 5%;
    width: 40%;
  }

  .button {
    font-size: 27.5px;
    padding: 17px 15px;
    /*leeren raum neben dem Button top rigth bootum left*/
    border-radius: 20px;
    margin-bottom: 5px;
  }
}

/*trigger for displaing*/
.containerMobile {
  display: none;
}

@media (max-width: 1000px) {
  .containerMobile {
    display: block;
  }

  .container {
    display: none;
  }
}

#ServicesButton,
#SetsButton,
#ContactButton,
#HomeButton {
  display: inline-block;
  position: relative;
  padding-bottom: 5px; /* Abstand zum Text */
  cursor: pointer;
}

#HomeButton::after,
#SetsButton::after,
#ContactButton::after,
#ServicesButton::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* Höhe des Unterstrichs */
  background-color: rgb(255, 255, 255);
  transform: scaleX(0); /* Startet unsichtbar */
  transform-origin: right; /* Startet von rechts */
  transition: transform 0.3s ease-in-out;
}

#HomeButton:hover::after,
#SetsButton:hover::after,
#ContactButton:hover::after,
#ServicesButton:hover::after {
  transform: scaleX(1); /* Unterstrich wird sichtbar */
  transform-origin: left; /* Balken kommt von links */
}



.popupButton1:hover,
.popupButton2:hover,
.popupButton3:hover,
.popupButton4:hover {
  color: #c1bebe;

  .button,
  .normalButton {
    box-shadow: 0px 0px 0px purple;
    background-color: rgb(1, 31, 40);
  }
}


/* Cookie stuff*/
/* Style the cookie banner container */
cookie-banner {
  display: block;
  text-align: center;
  position: fixed;
  bottom: 5%;
  background-color: rgba(169, 167, 167, 0.9);
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

/* Style the title inside the cookie banner */
cookie-banner h1[slot="title"] {
  font-size: 60px;
  font-weight: bold;
  margin: 0;
}

/* Style the text inside the cookie banner */
cookie-banner div[slot="text"] {
  font-size: 40px;
}

/* Add a button for closing the cookie banner */
cookie-banner button {
  display: inline-block;
  padding: 20px 40px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 20px;
}

/* Style the button on hover */
cookie-banner button:hover {
  background-color: #0056b3;
}