/* ------------------------------------ */
/* Allgemein */
/* ------------------------------------ */

body {
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
  padding-bottom: 150px; /* Add padding equal to footer height */
  margin: 0;
}

h1 {
  padding-top: 40px;
  font-size: 30px;
}

h2 {
  font-size: 20px;
  font-weight: 700;
  color: #272DCA;
  margin-top: 2rem;
  margin-bottom: 0.3rem;  /* kleiner Abstand unter dem Titel */
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
}

p {
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 400;
}

/* ------------------------------------ */
/* Med. Behandlung */
/* ------------------------------------ */

.med-behandlung p {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left; /* Ändere auf "left" statt "justify" */
  margin: 0 0 2rem 0;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  max-width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

input[type="radio"]:checked {
  accent-color: #272DCA; /* Blau */
}

/* ------------------------------------ */
/* Header */
/* ------------------------------------ */

header {
  position: relative;
  text-align: center;
  padding: 3rem 0 0.5rem;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;

}

.info-button {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.next-button{
  position: absolute;
  font-size: 20px;
  right: 1rem;
  top: 3rem;
  color: #3b3bbf;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

.back-button {
  position: absolute;
  font-size: 20px;
  left: 1rem;
  top: 3rem;
  color: #3b3bbf;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

.header-line {
  margin-top: 1rem;
  height: 3px;
  background-color: #3b3bbf; /* Blau */
  width: 100%;
}

/* ------------------------------------ */
/* Footer */
/* ------------------------------------ */

footer {
  border-top: 2px solid #4A2ACC;
  background-color: #E9EAFA;
  padding: 15px 0px 30px 0px;
  height: 50px;
  display: flex;
  align-items: center;     /* vertikal zentriert die .footer-nav */
  justify-content: center; /* zentriert horizontal */
    position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
}

.footer-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  line-height: 0.5;
}


.nav-item {
  display: flex;
  color: #272DCA;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  flex: 1; /* Gleicher Platz für alle Navigationspunkte */
  text-align: center; /* Zentriert den Text innerhalb des flex-Containers */
}

.nav-item img {
  width: 50px;
  margin-bottom: 5px;
}


.SaveButtons, #medbehandlung2-form {
  margin-top: 40px;
  display: flex;
  flex-direction: column; /* Buttons untereinander anordnen */
  align-items: center;    /* Buttons horizontal zentrieren */
  justify-content: center; /* Buttons vertikal zentrieren */
  gap: 1rem;              /* Abstand zwischen den Buttons */
  cursor: pointer;
}

.btnSave, #saveAndNextBtn{
  background-color: #272DCA;
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin-top: 5px;
  text-align: center;     
  border: none;
  border-radius: 20px;  
  cursor: pointer;
  height: 60px;
  width: 80%;
}

.btnSaveBack, #saveAndExitBtn{
  color: #272DCA;
  background-color: transparent;
  border: none;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}


/* ------------------------------------ */
/* Login & Register */
/* ------------------------------------ */

.loginHeader, .registerHeader{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.loginHeader h1, .registerHeader h1 {
  justify-content: center;
  text-align: center;
}

.logoHerz {
  margin-top: 150px;
  display: flex;
  justify-content: center;
}


#loginForm, #registerForm {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
}

.loginEmail, .loginPassword, .registerEmail, .registerPassword {
  padding-left: 20px;
  padding-right: 20px;
}

.loginPassword p, .loginEmail p, .registerEmail p, .registerPassword p {
  font-size: 20px;
  margin-bottom: 15px;
  margin-top: 30px;
}

.loginPassword input, .loginEmail input, .registerPassword input, .registerEmail input {
  border: #272DCA;
  border-style: solid;
  border-radius: 20px;
  color: gray;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center; 
  box-sizing: border-box; 
  padding-left: 20px;
}

.btnSubmit,
.btnRegister,
.btnaccount {
  background-color: #272DCA;
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  margin: 80px auto 30px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 80%;
  max-width: 350px;
}


button[type="submit"] {
  background-color: #272DCA;
  color: white;
  font-weight: bold;
  border-radius: 25px;
  height: 60px;
  width: 60%;
}


.btnOtherOption {
  color: #272DCA;
  background-color: transparent;
  border: none;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  text-align: center; /* Text zentrieren */
  display: flex; /* Flexbox verwenden */
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
}

/* ------------------------------------ */
/* Übersicht */
/* ------------------------------------ */

.logout-button {
  position: absolute;
  font-size: 20px;
  left: 1rem;
  top: 3rem;
  color: #3b3bbf;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

.uebersicht{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
} 

ul.list {
  list-style: none;
  padding: 0;
}

ul.list li {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  margin: 0.5rem auto;
  padding: 0 1rem;
  max-width: 300px; 
  height: 75px;
  background: rgba(39, 45, 202, 0.10);
  border: 1px solid #272DCA;
  border-radius: 20px;
  font-size: 20px;
  font-weight: 700;
  color: #000;
  letter-spacing: -0.38px;
  line-height: 150%; 
  position: relative;
 

}              
  
ul.list li a {
  all: unset;         
  cursor: pointer;      
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 20px;
  font-weight: 700;
  color: inherit;   
  text-decoration: none; 
  display: block;      
  width: 100%;        
} 

form input, textarea {
  display: block;
  width: 80%;
  margin-bottom: 2rem;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border-radius: 16px;           /* Mehr abgerundet */
  border: 1.5px solid #272DCA;   /* Dünner blauer Rand */
  background-color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}


.zwischenspeicher {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}


.finish-button {
  background-color: #272DCA;
  color: white !important;
  font-size: 20px !important;
  font-weight: bold;
  border-radius: 20px;
  border: none;
  height: 65px;
  width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  cursor: pointer;
}

/* ------------------------------------ */
/* Personalien */
/* ------------------------------------ */

#personalien{
  padding-left: 20px;
  padding-right: 65px;
}

#personalien input {
  border: #272DCA;
  border-style: solid;
  border-radius: 20px;
  padding-left: 20px;
  padding-right: 20px;
  color: gray;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 60px;
}

#personalien p {
  margin-bottom: 15px;
  margin-top: 30px;
}



/* ------------------------------------ */
/* Medizinische Behandlung 1 */
/* ------------------------------------ */

form textarea {
  margin-bottom: 1.6rem; /* Erhöht den Abstand zwischen den Feldern */
}

main form {
  margin-top: 0.5rem; /* Weniger Abstand nach oben */
  margin-left: 0.5rem; 
}

/* ------------------------------------ */
/* Medizinische Behandlung 2 */
/* ------------------------------------ */


/* Fragenblock nach rechts einrücken und schöner gestalten */
#form-container {
  margin-top: 1rem; /* Weniger Abstand nach oben, Wert ggf. noch kleiner wählen */
  margin-left: 0.65rem;      /* Abstand vom linken Rand */
  max-width: 650px;         /* Optional: maximale Breite */
}

/* Jede Frage mit Abstand und linksbündigem Text */
.question {
  margin-top: 1rem;
  margin-bottom: 0rem;
  text-align: left;
  padding: 0rem 0.55rem;
  padding-left: 0.5rem;   /* rückt alles nach rechts */
}

/* Frage-Text (p) linksbündig und etwas größer */
.question p {
  margin: 0 0 0.7rem 0;
  font-size: 1.2rem;
  color: #222;
  text-align: left;
  
}

#medbehandlung2 h2 {
  color: #272DCA;
  margin-left: 0.75rem;
}

.unterzeile {
  display: block;
  margin-left: 0.75rem;
  margin-right: 1rem;
  font-size: 1rem;
  font-weight: 400;
  color: #222;
  margin-top: 0.5em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2;
  word-spacing: normal; /* oder z.B. 0.05em, falls du es noch enger willst */
}


/* ------------------------------------ */
/* Fertig ausgefüllt, Abschluss E-Mail und Abschluss Download */
/* ------------------------------------ */

.fertigHeader, .abschlussHeaderMail, .abschlussHeaderDownload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 20px
}

.fertigHeader h1, .abschlussHeaderMail h1, .abschlussHeaderDownload h1 {
  text-align: center;
}

.fertigHeader p, .abschlussHeaderDownload p {
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
}

.abschlussHeaderMail p {
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 200px
}


.btnEmail, .btnUebersicht {
  background-color: #272DCA;
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  border: none;
  border-radius: 45px;  
  cursor: pointer;
  margin: 60px auto 20px auto; 
  width: 80%;
  height: 60px;
}

.btnDownload{
  color: #272DCA;
  background-color: transparent;
  border: none;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 100px;
  cursor: pointer;
}

.btnDownloadPdf {
  background-color: transparent;
  color: #272DCA;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  border-color: #272DCA;
  border-style: solid;
  border-radius: 20px;  
  cursor: pointer;
  margin-top: 70px;
  margin-bottom: 100px;
  height: 60px;
  width: 100%;
  padding: 20px;
}
/* ------------------------------------ */
/* Willkommensseite & Startseite */
/* ------------------------------------ */

.zentriert {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  max-width: 80%;
}

/* Basis-Stil für alle Seiten */
.zentriert-alles {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0; /* Standard */
}

.zentriert-alles h1,
.zentriert-alles p {
  text-align: center;
  max-width: 600px;
  width: 100%;
}

.zentriert-alles img.zentriert {
  margin-top: 24px;
  max-width: 80%;
  height: auto;
}

.zentriert-alles h1 {
  margin-top: 0px;
  margin-bottom: 20px;
  font-size: 1.8rem;
}

.zentriert-alles p {
  margin-top: 0;
  margin-bottom: 40px;
  font-size: 20px;
}

.btnaccount,
.btnSubmit,
.btnRegister {
  margin-top: 16px;
  margin-bottom: 20px;
}

/* Willkommensseite */
body.willkommen .zentriert-alles {
  margin-top: 5rem; /* Abstand zum oberen Rand */
  padding: 2rem 1rem;
  justify-content: center;
}

/* Startseite */
body.startseite .zentriert-alles {
  padding: 1rem 1rem;
  justify-content: flex-start;
}

/* ------------------------------------ */
/* Buttons */
/* ------------------------------------ */

.primary-button {
  background-color: #272DCA;
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 0 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  margin: 10px auto 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 80%;
  max-width: 350px;
}

.secondary-button {
  color: #272DCA;
  background-color: transparent;
  border: none;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -2px; /* ✅ kleiner Abstand zum Button darüber */
}

/* Bild-Container Startseite */
.bild-container {
  width: 100%;
  height: 55vh;
  max-width: 100vw;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: env(safe-area-inset-top);
  background-color: white;
}

#willkommen-bild {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: top left;
  display: block;
}

/* Videoseite */

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;     /* zentriert Inhalt horizontal */
  justify-content: center;
  padding: 2rem 1rem;
  max-width: 900px;
  margin: 0 auto;
  margin-top: 11rem;
  text-align: center;
}

.video-container video {
  width: 100%;
  max-width: 100%;          /* verhindert Überbreite */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 2rem;
  display: block;
}