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

  /* Styling für die Smartphone-Oberfläche */
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(58, 49, 49);
    margin: 0;
  }

  .phone-container {
    width: 100%; /* Breite des Smartphones relativ zur Viewport-Breite */
    max-width: 400px; /* Maximal zulässige Breite */  
    height: 100vh; /* Höhe des Smartphones relativ zur Viewport-Höhe */
    max-height: auto; /* Maximal zulässige Höhe */
    overflow: hidden;
    background: #fffefe;
    position: relative;
    margin: 0 auto;
    user-select: none;
  }

  .screen {
    background: rgb(20, 20, 20); /* Farbe des Bildschirms */
    padding: 0px;
    overflow-y: auto; /* Scrollbar hinzufügen, wenn Inhalt über Bildschirmgröße hinausgeht */
  }

  #table1 {
width: 100%;
height: 9.25vh;
border-collapse: collapse;
background-color: rgb(20, 20, 20);
font-size: 150%;
}

td {
border: 1px solid black;
text-align: center;
}


.row1 {
height: 30%;
font-size: 100%;
color: rgb(121, 121, 255);
}

.row2 {
height: 30%;
font-size: 100%;
color: rgb(248, 248, 2);
}

.globus {color: rgb(255, 255, 255); transform-origin: center;}

.pfeilUnterstreichung 
{
text-decoration: none;
}

.spieldatum 
{
width: 40%;

margin: auto;
box-sizing: border-box; 

border-radius: 10px; 
color: white; 
line-height: 100%;

}
#table2 {
width: 100%;
height: 5.75vh;
border-collapse: collapse;
background-color: rgb(20, 20, 20);


}

td {
border: 1px solid black;
text-align: center;
}

.platzhalter {
width: 20%;
}

    #myBtn {
    transform: rotate(90deg); transform-origin: center;
    text-align: center;
    
    background-color: rgb(20, 20, 20);
    color: white;
    padding: 0px;
    font-size: 30px;
    border: none;
    cursor: pointer;
    }
    
    /* Button mit hover */
    #drei-punkte:hover {
    outline: 0;
    color: yellow;
    }
    
    /* Dropdown Content (Hidden by Default) */
    #dropdown-content {
    display: none;
    position: absolute;
    background-color: rgb(245, 245, 245);
    min-width: 200px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1;
    right: 3%;
    top: 16%;
    text-align: left;
    border-radius: 10px;
    }
    
    /* Links inside the dropdown */
    #dropdown-content a {
    color: black;
    padding: 12px;
    text-decoration: none;
    display: block
    }
    
    /* Change color of dropdown links on hover */
    #dropdown-content a:hover {
    background-color: white;
    }

.spieldatum {
width: 50%;
}

#datum-farbe {color: yellow;}

#birth-days {font-size: 120%;}

#table3 {
width: 100%;
height: 68vh;
border-collapse: collapse;

background-color: rgb(20, 20, 20);
border-color: white;
}

td {
border: 1px solid rgb(20, 20, 20);
text-align: center;
}

.col1 {
width: 40%;
color: white;
font-size: 100%;


}

.col2 {
width: 20%;
color: rgb(61, 207, 61);
font-size: 130%;

}

.col3 {
width: 20%;
color: rgb(255, 126, 126);
font-size: 130%;

}

.col4 {
width: 20%;
color: rgb(154, 154, 224);
font-size: 130%;
}

.datumeingabe {  
width: 90%;
height: 90%;
margin: auto;
box-sizing: border-box; font-size: 100%; 
background-color: rgb(63, 32, 32); 
border-radius: 5px;
border-color:  rgb(255, 255, 255);
color: rgb(255, 255, 255); 
display: flex;
align-items: center;
justify-content: center;
font-size: 120%;
}

input[type="date"] {
outline: none;
}

.table4 {
width: 100%;
height: 7vh;
border-collapse: collapse;
font-size: 100%;
background-color: rgb(20, 20, 20);

}

td {
border: 1px solid black;
text-align: center;
}

/* Breite der Spalten */
.average {
width: 40%;
color: white;
font-size: 120%;
text-align: center;
}

.team-body {
width: 20%;
}

.team-soul {
width: 20%;
}

.team-spirit {
width: 20%;
}

#table5 {
width: 100%;
height: 10vh;
border-collapse: collapse;

font-size: 100%;
color: rgb(255, 255, 255);
}

td {
border: 1px solid black;
text-align: center;
}

.ads {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
background-color: rgb(161, 141, 141);
border-radius: 8px;
}

.tasten {
width: 20%;
background-color: rgb(20, 20, 20);
border-radius: 10px;
}

.enter-button {
font-size: 160%;
color: white;
width: 93%;
height: 93%;
border-radius: 10px;
background-color:#393D47;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
background-color:  rgb(56, 56, 97);
}

.del-button {
font-size: 135%;
color: white;
width: 93%;
height: 93%;
border-radius: 10px;
background-color:#393D47;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
background-color:  rgb(56, 56, 97);
}

.ergebnis-bereich {
background-color: rgb(63, 32, 32); 
width: 90%; 
height:90%; 
border-radius: 5px; 
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}

.end-ergebnis-bereich {background-color:  rgb(63, 32, 32); 
width: 90%; 
height: 90%;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;

}

.modal 
 {
display: none;
position: fixed;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 98%;
height: 98%;
border-radius: 20px;
overflow: scroll;
scrollbar-width: none;
background-color:white;
width: 550px; 
margin: auto;
text-align: left;
           
}

.fixed-top {
  position: sticky;
  top: 20px;
  background-color: #f1ecec; /* Hintergrundfarbe der oberen Zeile */
  padding: 5px;
  width: 100%;
  border-radius: 30px;
  display: flex; /* Aktiviert das Flex-Modell */
  align-items: center; /* Zentriert das Kind vertikal relativ zum Elternelement */
  z-index: 1; /* Stellen Sie sicher, dass die obere Zeile über dem scrollbaren Inhalt bleibt */
}

.scrollable-content {
  padding-top: 30px; /* Platz für die feste obere Zeile */
}

.modal-content 
{
background-color: #ffffff;
margin: 0% auto;
padding: 20px;
border: 0px solid #463434;
width: 100%;
color: black;
}

.h4 {  
  position: absolute;
  left: 3%; /* Am linken Rand positionieren */
} 

.close
{
color: #aaa;
position: absolute;
right: 3%; /* Am rechten Rand positionieren */
font-size: 40px;
font-weight: bold;
}

.close:hover,
.close:focus 
{
color: black;
text-decoration: none;
cursor: pointer;
}

.p
{
hyphens: auto;
}

.text {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; hyphens: auto; margin-left: 3%; margin-right: 3%; font-size: 70%;}