/* für INDEX und INSERT */

body {
    font-family: Arial, sans-serif;
    background-image: url('background.jpg'); /* Passe den Dateinamen des Hintergrundbilds an */
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: visible; /* Überlauf auf "visible" ändern, um das Scrollen zu ermöglichen */
    overflow-x: hidden; /* Seitliches Scrollen verhindern */
    text-align: center;
  }

p {
  text-align: center;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}

.required {
    background-image:url('required-field.png');
    background-position:top right;
    background-repeat:no-repeat;
    padding-right:10px;
}

h1 {
    text-align: center;
    font-size: 40px;
}

h3 {
    text-align: center;
    font-size: 25px;
}

ul {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.zentriert {
    text-align: center;
}

.button_start {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
  font-size: 20px;
}

.button_start:hover {
    background-color: #0056b3;
}

.button_input {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
  font-size: 20px;
}

.button_input:hover {
    background-color: #0056b3;
}

.button_insert {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
  font-size: 20px;
}

.button_insert:hover {
  background-color: blue;
  color: white;
}

/* Formular-Styling */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

label {
    font-weight: bold;
    font-size: 25px;
}

input[type="text"] {
    width: 300px;
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input[type="password"] {
    width: 300px;
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

select {
    width: 300px;
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input[type="submit"] {

}

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

.bottom_text {
  position: relative; /* Position auf dem Bildschirm fixieren */
  bottom: 0; /* Am unteren Rand positionieren */
  left: 0;
  width: 100%; /* Volle Breite einnehmen */
  text-align: center;
  font-weight: bold;
  padding: 10px; /* Etwas Abstand zum Rand hinzufügen */
  font-family: arial, sans-serif;

}

.styled-message {
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  font-family: Arial;
}