header {
  height: 70px; /* Höhe des headers */
}

/* Seitenstruktur als Wrapper – nimmt den ganzen Platz ein */
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* wichtig: viewport-Höhe */
    
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* optional – zentriert Inhalte vertikal, kann auch entfernt werden */
  }

h2 {
  text-align: center;
  font-size: 1.6em;
  font-weight: bold;
  margin: 20px 0;
  color: rgb(80, 50, 10); /* z. B. ein leicht bräunlicher Ton passend zu den orangen Rahmen */
}

.form-area {
 /* background-color: rgb(240, 240, 240); */
  padding: 20px;
  border-radius: 10px;
  max-width: 500px;
  margin: 40px auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 20;
}

/* außerhalb der .form-area-Regel */
.error {
  color: red;
}

.success {
  color: green;
}

label {
  display: block;
  margin-top: 10px;
  
}

input {
  width: 100%;
  padding: 6px;
  background-color:rgba(255,165,79, 0.2); 
}

button {
  margin-top: 15px;
  padding: 10px;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  background-color: rgb(200, 100, 0);border-radius: 5px;
  border: 2px solid rgb(255, 140, 0);
  color: rgb(255,255,255);
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
    background-color: rgb(255, 140, 0);
    transform: translateY(-3px);
  }