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

  
  body {
    background-image: url("HintergrundBild.jpg");
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(0, 0, 0,);
    margin: 0;
  }

.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%;
}