/* styles.css */
.mynav {
  background-color: #99B3DA;
  overflow: hidden;
  padding: 10px;
  text-align: center;
}

.mynav a {
  display: inline-block;
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 10px;
  margin: 0 20px;
  text-decoration: none;
  font-size: 1.2vw;
}

.mynav a:hover {
  background-color: #ddd;
  color: black;
}

.Daten {
  justify-content: center;
  justify-items: center;
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  padding-right: 10px;
  width: 50%;
}

.Member {
  justify-content: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}

.name,
.rolle,
.clock,
.sparten {
  color: red;
  font-size: 1.1vw;
  padding-left: 10px;

  @media screen and (min-width:800px) {
    color: rgb(255, 255, 255);
    font-size: 1.1vw;
    padding-left: 10px;
  }
}

.headerzeile {
  background-color:#99B3DA;
  display: inline-flex;
  vertical-align: middle;
}

.anmeldezeile {
  background-color: lightcyan;
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 30vh;
}

.anmeldezeile h2 {
  text-align: center;
  color: green;
}

.anmeldezeile form {
  margin: 0 auto;
  max-width: 400px;
  width: 100%;
  background-color: lightcyan;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

input[type="text"],
input[type="password"],
input[type="submit"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

.Überschrift {
  color: rgb(54, 7, 7);
  font-size: 1.5vw;
  padding-left: 10px;
  padding-right: 10px;
  width: 50%;
  white-space: nowrap;

  @media screen and (min-width:800px) {
    color: rgb(54, 7, 7);
    font-size: 1.5vw;
    padding-left: 10px;
    width: 50%;
    white-space: nowrap;
  }
}

  .btn_kategorie{
    border: none; /* Keine Rahmenlinie */
    border-radius: 8px; /* Abgerundete Ecken */
    width: 250px; 
    padding: 10px 20px; /* Innenabstand (oben/unten, rechts/links) */
    font-size: 16px; /* Schriftgröße */
    font-family: 'Arial', sans-serif; /* Schriftart */
    cursor: pointer; /* Zeigt den Klick-Cursor an */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Schattierung für 3D-Effekt */
    transition: background-color 0.3s, transform 0.2s; /* Sanfte Übergänge */
  }

  .btn_kategorie:hover {
    background-color: #3B78C4; /* Hintergrundfarbe bei Hover */
    transform: translateY(-3px); /* Leichtes Heben bei Hover */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Größerer Schatten bei Hover */
}