* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }


  body {
  background-image: url("HintergrundBild.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  }

.phone-container {
  width: 100%;
  max-width: 1000px;
  height: 100vh;
  overflow-y: auto;               /* Scrollbar erscheint bei Bedarf */
  overflow-x: hidden;
  position: relative;
  margin: 0 auto;
  color: rgb(255, 255, 255);
  text-align: justify;
  background-color: white;
  /* Firefox Scrollbar-Styling */
  scrollbar-width: thin;                         /* "auto", "thin", "none" */
  scrollbar-color: #645f5f #f0f0f0;                 /* Grifffarbe + Spurfarbe */
}


/* WebKit Scrollbar-Styling (Chrome, Safari, Edge) */
.phone-container::-webkit-scrollbar {
  width: 12px;                                    /* Breite der Scrollleiste */
}

.phone-container::-webkit-scrollbar-track {
  background: #f0f0f0;                            /* Hintergrund der Spur */
  border-radius: 6px;
}

.phone-container::-webkit-scrollbar-thumb {
  background-color: #888;                         /* Farbe des "Griffs" */
  border-radius: 6px;
  border: 2px solid #f0f0f0;                      /* Abstand zur Spur */
}

.phone-container::-webkit-scrollbar-thumb:hover {
  background-color: #555;                         /* Farbe beim Hover */
}

.begrüßung {
   font-size: 1.2em;
  color: blue;
  font-style: italic;
  margin-bottom: 0.5em;
   text-align: center;
}


h1 {
  font-weight: bold;
  color: black;
  text-align: center;           /* Zentriert die Überschrift */
  margin-top: 20px;
  margin-bottom: 0px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  hyphens: auto;
  font-size: 1.5em;
  letter-spacing: 1px;
}


h2 {

  font-weight: normal;
  color: black;
  text-align: left;

  margin-top: 20px;            /* Abstand nach oben */
  margin-bottom: 0px;         /* Abstand nach unten */
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; hyphens: auto; font-size: 1.4em;
  letter-spacing: 1px;         /* Abstand zwischen Buchstaben */
}

h3 {

  font-weight: normal;
  color: black;
  text-align: left;

  margin-top: 20px;            /* Abstand nach oben */
  margin-bottom: 0px;         /* Abstand nach unten */
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; hyphens: auto; font-size: 1.3em;
  letter-spacing: 1px;         /* Abstand zwischen Buchstaben */
}

 .text {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; hyphens: auto; margin-left: 3%; margin-right: 3%; font-size: 120%; color: black;}
 .text p {
  margin-bottom: 1.5rem;
}

.Wellen {
      background-color: white;
      display: flex;
      width: 70%;
      margin: auto;
      justify-content: center;
      align-items: center;
      position: relative; /* wichtig für das Overlay */

    }

    .Wellen img {
      width: 95%;
    }

    .overlay-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none; /* damit Klicks durchgehen */
      background-color: rgba(255, 255, 255,);
     }

  .Ball {width: 20%; margin-left: 10%; display: flex;}

 .navbar {
  position: fixed;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
 z-index: 3;
  display: flex;
  justify-content: space-around;
  background-color: rgb(136, 136, 214);
  top: 0;
  left: 0;
}

.navbar li
{
float: left;
}

 .navbar li a
 {
  display: block;
  padding: 7px;
  text-decoration: none;
  color: white;
 }

.navbar li a:hover {
  background-color: lightblue;
}

.hallo
{
color: white;
width: 100px;
height: 50px;
background-color: blue;
}

.WelleProzent
{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:white;
  width: 90%; margin: auto;

}

.popup
{
  display: none;
  position: relative;
  z-index: 1;
  border: 1px solid rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
  padding: 10px;
  resize: both;
  overflow: auto;
  width: 100%;
}

.popup-content {margin-bottom: 0px;
}

.popup-header
{
  display: flex;
  justify-content: flex-end;
}

.close
{
  font-size: 20px;
  cursor: pointer;
}

.image
{
  max-width: 100%;
  max-height: 100%;
}

.trigger
{
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:white;
  width: 70%; margin: auto;
  height: auto;
  background-color: white;
}

.größereAnsicht
{
  font-size: 50%;
}


/* Dropdown Button */
.dropdown {
  position: fixed;
  display: inline-block;
}


.dropbtn {
  font-size: 16px;
}


.dropbtn {
  padding: 10px 16px;
  cursor: pointer;
  background: #f787a9;
  color: #050000;
  border: none;
  border-radius: 10px;
  margin-left: 5px;
}

/* Dropdown Inhalt */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 100px;
  border: 1px solid #ccc;
  z-index: 1;
}

/* Zeilen-Layout */
.dropdown-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid #eee;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item img {
  width: 32px;
  height: auto;
  margin-right: 20px;
}

/* Hover */
.dropdown-item:hover {
  background: #f2f2f2;
}

/* Anzeigen bei Hover */
.dropdown:hover .dropdown-content {
  display: block;
}