@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); /* import font */
body {
    background-color: #f5f5f5;
    font-family: "Open Sans", sans-serif;
    color: #F752E0;
}


/* Allgemeine Stildefinitionen für den Header */
.header {
   
    padding: 10px 20px; /* Innenabstand */
    display: flex; /* Flexbox-Layout für Elemente innerhalb des Headers */
    justify-content: space-between; /* Elemente gleichmäßig im Header verteilen */
    align-items: center; /* Vertikal zentrierte Ausrichtung der Elemente */

}


/* Stil für den Zurück-Link */
.back {
    font-size: 18px; /* Schriftgröße */
    text-decoration: none; /* Keine Unterstreichung des Links */
    background-color: #F752E0;
    color: white;
    border: #F752E0 2px solid;
    border-radius: 15px;
    padding: 10px;
  
}


/* Logo */
.logo{
  display: inline-block;
  color: var(--pink);
  font-size: 60px;
  margin-left: 10px;
  height: 50px;
  width: auto;
  padding: 10px;
}



/* Verwende Flexbox, um Elemente untereinander anzuzeigen */
#login-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
 
  
}

.form-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1800px; /* Breite anpassen, falls nötig */

}

h1 {
  margin-bottom: 20px;
}

input {
  width: 90%;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: #F752E0 3px solid;
  border-radius: 15px;
  background-color: white;
}

.label {
 font-size: 15px;
}




button {
  width: 90%;
  margin-bottom: 10px;
  padding: 10px;
  background-color: white;
  border: none;
  text-decoration: underline;
 
}



#signUp,
#signIn {
   background-color: #F752E0;
   color: white;
}

.bottomButtom {
    margin-top: 20px;
    border: none;
    text-decoration: underline;
}

/* Stile für die linke (Registrierungs-) Box */
.left {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  width: 60%;
  height: 65vh;
  margin: 10px;
 
}
.container {
    margin-left: 5%;
    display: flex; /* Container als Flexbox */
}

.leftside {
    width: 50%; /* 50% Breite für den linken Abschnitt */
}

.imageright {
    width: 50%; /* 50% Breite für den rechten Abschnitt */
    text-align: center;
}

.imageright img {
    width: 80%; /* Beispielhafte Größe für das Bild */
    height: auto;
}

/* Stile für die rechte (Anmelde-) Box */
.right {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  width: 60%;
  height: 65vh;
  
  margin: 10px;
  display: none;
}


#signup-type {
padding: 10px;
font-size: 16px;
margin-bottom: 10px;
margin-top: 5px;

padding-left: 20px;
padding-right: 20px;
border: #F752E0 3px solid;
border-radius: 15px;
}

/* Stil für den ausgewählten Zustand */
#signup-type option:checked {
background-color: #007BFF;
color: #fff;
}

/* Allgemeiner Stil für die Optionen */
#signup-type option {
background-color: #fff;
color: #000;
}

/* Stil für Hover-Effekt */
#signup-type option:hover {
background-color: #f0f0f0;
}


.signup-verify{
  
  width: 90%;
  margin-bottom: 10px;
  text-align: center;
  box-sizing: border-box;
  border: #F752E0 3px solid;
  border-radius: 15px;
  background-color: white;
  
}


.imageright2 {
  width: 50%;
 
 text-align: center;
 
}


.imageright2 img {
  width: 80%; /* Beispielhafte Größe für das Bild */
  height: auto;
}



@media(max-width:768px) {

  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); /* import font */
  body {
      background-color: white;
      font-family: "Open Sans", sans-serif;
      color: #F752E0;
  }
 /* Allgemeine Stildefinitionen für den Header */
.header {
   
  padding: 10px 20px; /* Innenabstand */
  display: flex; /* Flexbox-Layout für Elemente innerhalb des Headers */
  justify-content: space-between; /* Elemente gleichmäßig im Header verteilen */
  align-items: center; /* Vertikal zentrierte Ausrichtung der Elemente */

}
  /* Logo */
  .logo{
    display: inline-block;
    color: var(--pink);
    font-size: 60px;
    margin-left: 10px;
    height: 50px;
    width: auto;
    padding: 10px;
  }
  
  
  
  
  /* Verwende Flexbox, um Elemente untereinander anzuzeigen */
  #login-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
   
    
  }
  
  .form-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1800px; /* Breite anpassen, falls nötig */
  
  }
  
  h1 {
    margin-bottom: 20px;
  }
  
  input {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    border: #F752E0 3px solid;
    border-radius: 15px;
  }
  
  
  button {
    width: 100%;
    margin-bottom: 10px;
    padding: 5px;
    border: none;
   
  }
  
  
  
 
/* Stile für die linke (Registrierungs-) Box */
.left {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  width: 80%;
  height: 75vh;
  margin: 5px;
 
}
/* Stile für die rechte (Anmelde-) Box */
.right {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  width: 80%;
  height: 75vh;
  
  margin: 10px;
  display: none;
}

  
  
  #signup-type {
  padding: 10px;
  font-size: 16px;
  
  padding-left: 20px;
  padding-right: 20px;
  border: #F752E0 3px solid;
  border-radius: 15px;
  }
  
  /* Stil für den ausgewählten Zustand */
  #signup-type option:checked {
  background-color: #007BFF;
  color: #fff;
  }
  
  /* Allgemeiner Stil für die Optionen */
  #signup-type option {
  background-color: #fff;
  color: #000;
  }
  
  /* Stil für Hover-Effekt */
  #signup-type option:hover {
  background-color: #f0f0f0;
  }
  
  
  
  

  .signup-verify{
    border: #F752E0 3px solid;
    border-radius: 15px;
    padding: 20px;
    width: 100%;

  }

  .container {
    margin-left: 5%;
   display: block;
}

.leftside {
    width: 100%; /* 50% Breite für den linken Abschnitt */
}

.imageright {
    width: 100%; /* 50% Breite für den rechten Abschnitt */
    text-align: center;
    display: flex; /* Füge Flex-Layout hinzu */
    justify-content: center; /* Zentriere horizontal */
}

.imageright img {
    width: 60%; /* Beispielhafte Größe für das Bild */
    height: auto;
}

.imageright2 {
  display: none;
}

}




#frage {
  margin: 0;
}