/* Styles über die ganze Website */
/* Alles*/
* {
  margin: 0px;
  padding: 0px;
}

/* Körper der Website */
body {
  font-family: "inter-tight-variable", sans-serif;
  font-variation-settings: "wght" 100;
}

/* Formular */
main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}

/* Styles für die verschiedenen Dinge */
button,
fieldset,
input,
option,
output,
select,
textarea {
  padding: 10px;
  font-size: 1em;
  font-family: "inter-tight-variable", sans-serif;
  font-variation-settings: "wght" 400;
}

/* Textdesign Titel */
h2 {
  font-family: "bebas-neue-pro", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 190%;
  margin-bottom: 4%;
}

/* Textdesign Untertitel */
h3 {
  font-variation-settings: "wght" 400;
  font-size: 110%;
  margin-bottom: 3%;
}

/* Styles für den Header */
header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 1em 2em 1em 2em;
  background-color: #ffe4db;
}

/* Style für die Worte "Video Room @ Rotkreuz" */
header h1 {
  font-family: "bebas-neue-pro", sans-serif;
  font-size: 2em;
  color: #8d4b4c;
}

/* Style Logo */
.header-logo {
  height: 10vh;
}

/* Styles für den Footer */
footer {
  width: 100%;
  position: static; /* Change position to static */
  margin-top: auto; /* Push footer to the bottom */
  bottom: 0;
  background-color: #ffe4db;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 5px;
}

/* Style für die alle 4 Informationen  */
footer .info {
  width: 40%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
}

/* Style der einzelnen Elemente */
.grid-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
}

/* Style für p und Links innerhalb des Footers */
footer p,
footer a {
  font-variation-settings: "wght" 400;
  color: #8d4b4c;
}

/* Icons im Footer */
.footer-icon {
  width: 4.5vh;
  padding-right: 1vh;
  justify-self: flex-end;
}

/* Horizontallinie innerhalb des footers */
footer .horizontalline {
  width: 40%;
  height: 2px;
  background-color: #da9d9c;
  margin: 5px 0px 5px 0px;
}
/* Version */
footer .version {
  width: 40%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

/* Style für p in der Version */
.version p {
  justify-self: center;
  font-size: x-small;
}

/* Vertikallinie innerhalb des footers */
footer .verticalline {
  height: 100%;
  width: 2px;
  background-color: #da9d9c;
  justify-self: center;
}

/* Styles für den Index */

/* Styles für das Formular allgemein */
/* Formular HG */
fieldset {
  background-color: #f2f2f2;
  border: 2px solid #f2f2f2;
  border-radius: 50px;
}

/* Formular Inhalt */
.form-content {
  clear: both;
  width: 800px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* Navigationsbar */
.navbar {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center; /* Zentrieren der Navigationsleiste */
  position: relative; /* Relativ positionieren, um sie zwischen Header und Main zu platzieren */
  margin-top: 20px; /* Abstand vom Header */
  margin-bottom: 20px; /* Abstand zum Main-Element */
}

/* Navigationsbar Items */
.nav-item {
  margin: 0 10px;
}

/* Kreis um die Zahl im Navbar */
.circle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #da9d9c;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
}

/* Auf der jeweiligen Seite befindender Kreis des Navbars */
.current {
  background-color: #8d4b4c; /* Farbe für die aktuelle Position */
  color: white;
  opacity: 100%;
}

/* Linie zwischen den Kreisen */
.nav-item:not(:last-child) .circle::after {
  content: "";
  position: absolute;
  width: 50px; /* Länge der Linie */
  height: 3px; /* Dicke der Linie */
  background-color: #8d4b4c; /* Farbe der Linie */
  top: 50%; /* Vertikale Ausrichtung */
  left: 100%; /* Beginn der Linie am rechten Rand des Kreises */
  transform: translateY(-1px); /* Vertikale Ausrichtung */
}

/* Navigations Bar Links */
.link-navbar {
  text-decoration: none;
  font-family: "bebas-neue-pro", sans-serif;
  font-weight: 600;
  font-style: normal;
}

/* Style für alle labels */
label {
  font-size: 1em;
}

/* Style für alle Fehermeldungen */
.error-text {
  color: #f00;
  font-style: italic;
  grid-column-start: 2;
}

/* Linie unterhalb des Titels */
.linie {
  border: 0;
  border-top: 1px solid black;
  margin-top: 5px;
  margin-bottom: 20px;
}

/* Continue Button */
.button-container {
  display: flex;
  justify-content: center;
}

.submit-button {
  background: #8d4b4c;
  color: #f3d0c4;
  border-radius: 20px;
  border: none;
  padding: 10px 20px;
  margin: 0 5px;
}

/* Während dem darüber "hovern" soll es dies anzeigen */
.submit-button:hover,
.back-button:hover {
  color: #ffffff;
  font-weight: bold;
  transition: 0.6s ease;
}
/*Back Button*/
.back-button {
  background: #7e726e;
  color: #f3d0c4;
  border-radius: 20px;
  border: none;
  padding: 10px 20px;
  margin: 0 5px;
}

/* Design für Sections */
section {
  margin-bottom: 25px;
}

/* Letztes element von diesem Abschnitt */
section:last-child {
  margin-bottom: 0;
}

/* Styles für den Step 1 */
.step1 {
  margin: 5px 0px;
}
/* Script für die Switch Ja/Nein */
.switch {
  display: flex;
  align-items: center;
}

/* Label Ja oder Nein Style */
.switch-label {
  margin-left: 10px;
  margin-right: 10px;
}

/* Input style, für den PHP Code um diesen später wiederzugeben */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Switch selbst */
.slider {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  background-color: #da9d9c;
  border-radius: 34px;
  transition: background-color 0.4s;
}

/* Switch selbst vor der Transition */
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.4s;
}

/* Switch, nachdem sie umgestellt wurde Hintergrundfarbe*/
input:checked + .slider {
  background-color: #8d4b4c;
}

/* Switch Kreis, Position, an der dieser gehen muss nach dem Übergang */
input:checked + .slider:before {
  transform: translateX(26px);
}

/* Design Checkbox */
.checkbox-list-step-1 label {
  display: block;
}

/* Aussehen radio und checkbox */
.checkbox-list-step-1 input[type="checkbox"],
.radio-step-1 input[type="radio"] {
  margin-right: 5px;
}

/* Aussehen sobald die Option "checked" ist */
.checkbox-list-step-1 input[type="checkbox"]:checked,
.radio-step-1 input[type="radio"]:checked {
  accent-color: #8d4b4c;
}

/* Textdesign Vision */
.step-1-text-design p {
  margin: 5px 0px;
}

/* Service Textdesign */
.radio-step-1 input[type="radio"] {
  margin-bottom: 15px;
}

/* Design der Textarea */
textarea {
  width: 95%;
  max-width: 100%;
}

/* Styles für den Step 2 */
.step2 {
  display: flex;
  flex-direction: column;
}

/* Style von Zeit und Datum */
.time-date {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

/* Zeit und Datum Überschrift */
.time-date label {
  margin-bottom: 5px;
}

/* Datum input type date */
.time-date input[type="date"] {
  width: 25vh;
  padding: 10px;
  box-sizing: border-box;
}

.time-slot {
  display: flex;
  width: 25vh;
  gap: 10px;
}

.time-slot .time-date {
  flex: 1;
}

/* Zeit input type time */
.time-slot input[type="time"] {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}



/* Styles für den Step 3 */
.personal-data {
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Design Email Step 3 */
.step3 input[type="email"] {
  width: 25vh;
}

/* Inputfeldergrösse des Schrittes 3 */
.input-field {
  width: 25vh;
  max-width: 700px;
}

/* Styles für die Verifikation */
/* Verfikitaionsformular */
.verification {
  list-style: none;
  padding-left: 20px;
}
/* Listenstyle */
.verification li {
  padding-bottom: 1vh;
  margin-left: 2vh;
}

/* Style p Verification */
.verification-p {
  color: #8d4b4c;
  font-weight: bold;
}

/* Style h3 Verification */
.verification-h3 {
  font-family: "bebas-neue-pro", sans-serif;
  color: #7e726e;
  font-weight: 600;
  font-size: 140%;
  margin-bottom: 0%;
}

/* Media Queries */
/* Media Queries für die Anpassung bei Mobilgeräten */
@media screen and (max-width: 800px) {
  .header-logo {
    height: 7vh;
  }
  .form-content {
    width: 90%; /* Anpassen der Breite des Formularinhalts */
    max-width: 100%; /* Hinzufügen von max-width, um sicherzustellen, dass das Formular nicht breiter als der Bildschirm ist */
  }
  main {
    display: block;
  }
  /* Die Zeiten des Step-2 werden untereinander dargestellt*/
  .time-slot {
    flex-direction: column; /* Elemente untereinander anordnen */
    margin-bottom: 0;
  }
  /* Feldgrösse des Datums */
  .time-date input[type="date"] {
    width: 19vh;
  }
  /* Feldgrösse der Zeitangaben */
  .time-date{
    width: 15vh;
  }
  /* Abstand zwischen den drei Slots */
  .step2 {
    margin-bottom: 2vh;
  }
  /* Abstand verkleinern in der Handyansicht zum nächsten Slot*/
  span.error-text {
    margin-bottom: -2vh;
  }
}

/* Media Queries für die Anpassung bei der Desktopansicht */
@media screen and (min-width: 800px) {
  /* Abstand zwischen den Slots verringern */ 
  div.time-slot {
    margin-bottom: 0;
  }
}