body {
  padding: 0; /* Entfernt den Standard-Padding */
  font-family: "Montserrat", sans-serif; /* Setzt die Schriftart auf "Montserrat" */
  color: black; /* Setzt die Textfarbe auf Schwarz */
}

/* Style the form content */
.form-content {
  overflow: hidden; /* Verhindert, dass der Inhalt überläuft */
  clear: both; /* Klärt floatende Elemente */
}

/* Style the input fields */
button,
datalist,
fieldset,
input,
legend,
optgroup,
option,
output,
select,
textarea {
  padding: 10px; /* Fügt Padding hinzu */
  font-size: 1em; /* Setzt die Schriftgröße auf 1em */
  font-family: "Montserrat", sans-serif; /* Setzt die Schriftart auf "Montserrat" */
  border-radius: 10px; /* Macht die Ecken der Eingabefelder rund */
  border: 1px solid #777; /* Setzt eine graue Rahmenlinie */
}

fieldset {
  border: none; /* Entfernt die Rahmenlinie um das Formular */
}

/* Style the labels */
label {
  font-size: 1em; /* Setzt die Schriftgröße auf 1em */
  font-family: "Montserrat", sans-serif; /* Setzt die Schriftart auf "Montserrat" */
}

.next-button {
  background-color: #d3e5ff; /* Setzt die Hintergrundfarbe auf ein helles Blau */
  font-family: "Montserrat", sans-serif; /* Setzt die Schriftart auf "Montserrat" */
  color: black; /* Setzt die Schriftfarbe auf Schwarz */
  padding: 10px 20px; /* Fügt Padding hinzu */
  border: none; /* Entfernt die Rahmenlinie */
  border-radius: 25px; /* Macht die Ecken rund */
  cursor: pointer; /* Ändert den Cursor beim Hover */
  font-size: 16px; /* Setzt die Schriftgröße */
}

.next-button:hover {
  background-color: #c395d8; /* Dunklere Farbe bei Hover */
}

.back-button {
  font-family: "Montserrat", sans-serif; /* Setzt die Schriftart auf "Montserrat" */
  float: right; /* Lässt den Button nach rechts floaten */
  color: #000000; /* Setzt die Schriftfarbe auf Schwarz */
  background-color: rgb(189, 189, 196); /* Setzt die Hintergrundfarbe */
  padding: 10px 20px; /* Fügt Padding hinzu */
  border: none; /* Entfernt die Rahmenlinie */
  border-radius: 25px; /* Macht die Ecken rund */
  cursor: pointer; /* Ändert den Cursor beim Hover */
  font-size: 16px; /* Setzt die Schriftgröße */
}

/* Style the error messages */
.error-text {
  color: #f00; /* Setzt die Textfarbe auf Rot */
  font-size: 14; /* Setzt die Schriftgröße */
}

/* Style the header */
.header {
  color: #00c; /* Setzt die Schriftfarbe auf Blau */
}

/* Style the footer */

.background-image {
  width: 100%; /* Das Bild nimmt 100% der Fensterbreite ein */
  height: auto; /* Die Höhe wird automatisch basierend auf dem Seitenverhältnis des Bildes angepasst */
  display: block; /* Verhindert unerwünschte Abstände um das Bild */
}

.footer {
  text-align: center; /* Zentriert den Text und das Logo im Footer */
}

.footer-line {
  border-top: 1px solid black; /* Schwarze Linie über dem Footer */
}

.footer-content {
  display: flex; /* Verwendet Flexbox zur Layoutgestaltung */
  justify-content: space-between; /* Verteilt den Inhalt gleichmäßig zwischen den Elementen */
  align-items: center; /* Zentriert die Elemente vertikal */
}

.footer-text {
  text-align: left; /* Linksbündiger Text */
}

.footer-logo img {
  max-width: 40vw; /* Maximale Breite des Logos auf 40% der Bildschirmbreite begrenzen */
  height: auto; /* Automatische Anpassung der Höhe basierend auf dem Seitenverhältnis */
}

.header {
  position: relative; /* Positionierung relativ zum übergeordneten Element */
}

.container {
  position: relative; /* Positionierung relativ zum übergeordneten Element */
}

.background-image {
  width: 100%; /* Vollständige Breite des Bildes */
  height: auto; /* Automatische Höhe basierend auf dem Seitenverhältnis */
}

.logo {
  position: absolute; /* Positionierung relativ zum übergeordneten Element */
  top: 50%; /* Zentriert das Logo vertikal */
  left: 50%; /* Zentriert das Logo horizontal */
  transform: translate(-50%, -50%); /* Zentriert das Logo genau in der Mitte */
  max-width: 100%; /* Maximale Breite des Logos auf 100% des Containers begrenzen */
  height: auto; /* Automatische Anpassung der Höhe basierend auf dem Seitenverhältnis */
  z-index: 1; /* Stellt sicher, dass das Logo über dem Hintergrundbild liegt */
}

.progress-bar {
  position: relative; /* Positionierung relativ zum übergeordneten Element */
  display: flex; /* Verwendet Flexbox zur Layoutgestaltung */
  justify-content: space-between; /* Verteilt den Inhalt gleichmäßig zwischen den Elementen */
  align-items: center; /* Zentriert die Elemente vertikal */
  width: 100%; /* Setzt die Breite auf 100% */
  max-width: 600px; /* Maximale Breite auf 600px begrenzen */
  margin: 0 auto; /* Zentriert die Fortschrittsanzeige horizontal */
  padding: 0 10px; /* Fügt Padding links und rechts hinzu */
  box-sizing: border-box; /* Bezieht Padding und Rahmen in die Breite ein */
}

.step {
  display: flex; /* Verwendet Flexbox zur Layoutgestaltung */
  align-items: center; /* Zentriert die Elemente vertikal */
  z-index: 1; /* Stellt sicher, dass die Schritte über anderen Elementen liegen */
  flex: 1; /* Jeder Schritt nimmt gleich viel Platz ein */
  text-align: center; /* Zentriert den Text innerhalb des Schritts */
}

.circle {
  width: 40px; /* Setzt die Breite auf 40px */
  height: 40px; /* Setzt die Höhe auf 40px */
  border: 1px solid black; /* Setzt eine schwarze Rahmenlinie */
  border-radius: 50%; /* Macht die Ecken rund */
  background-color: #ffffff; /* Setzt die Hintergrundfarbe auf Weiß */
  display: flex; /* Verwendet Flexbox zur Layoutgestaltung */
  justify-content: center; /* Zentriert den Inhalt horizontal */
  align-items: center; /* Zentriert den Inhalt vertikal */
  overflow: hidden; /* Verhindert Überlauf */
  position: relative; /* Positionierung relativ zum übergeordneten Element */
}

.circle img {
  width: 100%; /* Bildbreite auf 100% setzen */
  height: 100%; /* Bildhöhe auf 100% setzen */
  object-fit: cover; /* Bild skalieren und zuschneiden, um den gesamten Raum zu füllen */
}

.circle.active {
  background-color: #d3e5ff; /* Setzt die Hintergrundfarbe für aktive Kreise */
  border: 1px solid black; /* Setzt eine schwarze Rahmenlinie */
}

.circle.completed {
  background-color: #d3e5ff; /* Highlight-Farbe für abgeschlossene Schritte */
}

@media (min-width: 768px) {
  .progress-bar {
    width: 90%; /* Setzt die Breite auf 90% */
  }

  .circle {
    width: 35px; /* Setzt die Breite auf 35px */
    height: 35px; /* Setzt die Höhe auf 35px */
  }
}

@media (min-width: 1024px) {
  .progress-bar {
    width: 80%; /* Setzt die Breite auf 80% */
  }

  .circle {
    width: 40px; /* Setzt die Breite auf 40px */
    height: 40px; /* Setzt die Höhe auf 40px */
  }
}

/* Container für PLZ und Ort */
.plz-ort-container {
  display: flex; /* Verwendet Flexbox zur Layoutgestaltung */
  flex-direction: column; /* Stellt die Elemente untereinander dar */
  gap: 10px; /* Fügt einen Abstand zwischen den Elementen hinzu */
}

@media (min-width: 768px) {
  .plz-ort-container {
    flex-direction: row; /* Stellt die Elemente nebeneinander dar */
  }
}


/*bezieht sich auf reiseinformationen:
/* Stile für die Formularreihe */
.form-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.form-row>div {
  flex: 0 0 48%;
  margin-bottom: 1rem;
}

/* Stil für Platzhalter in Eingabefeldern */
input::placeholder {
  font-style: italic;
  color: #d3d3d3;
}

/* Medienabfragen für kleinere Bildschirme */
@media (max-width: 768px) {
  .form-row>div {
      flex: 0 0 100%;
  }
}

/*bezieht sich auf persoenliche-informationen:

 /* Stile für die Formularreihe */
 .form-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.form-row>div {
  flex: 0 0 48%;
  margin-bottom: 1rem;
}

#zip {
  width: 80px;
  text-align: center;
  margin-right: 5px;
}

input::placeholder {
  font-style: italic;
  color: #d3d3d3;
}

@media (max-width: 768px) {
  .form-row>div {
      flex: 0 0 100%;
  }
}