/* Variablen für Farben */
:root {
  --darkgreen: #13251e;
  --dustyolive: #7d8b7a;
  --goldenchestnut: #bd944b;
  --darkblue: #2e3b44;
  --alabaster: #e2e2df;
  --lavendergray: #938ea0;
}

/* Schriftarten */
@font-face {
  font-family: syne;
  src: url(../fonts/Syne-ExtraBold.ttf);
}

@font-face {
  font-family: eb-garamond;
  src: url(../fonts/EBGaramond-BoldItalic.ttf);
}

@font-face {
  font-family: garamond;
  src: url(../fonts/GARAIT.TTF);
}

@font-face {
  font-family: urban-bold;
  src: url(../fonts/Urbanist-Bold.ttf);
}

@font-face {
  font-family: urban-regular;
  src: url(../fonts/Urbanist-Regular.ttf);
}

.bold {
  font-family: urban-bold;
}

/*Grundeinstellungen*/
* {
  font-family: urban-regular;
  font-size: 16px;
  color: var(--darkblue);

  /*Quellenangabe 3 Anfang*/
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Dieser Block wurde selbst gecoded. Er definiert den Style für die H1-Überschriften */
h1 {
  font-family: eb-garamond;
  font-size: 18px;
}

body {
  min-height: 100vh; /* Volle Breite und Höhe */
  background-color: var(--alabaster);
}

.login-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

/* Header mit dem Bild */
.header-section {
  height: 35vh; /* Nimmt 35% der aktuellen Bildschirmhöhe ein */
  background-image: url(../media/lake.webp);
  background-size: 100%;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  overflow: hidden;
}

/* Das Logo wechselt ab einer Bildschirmgrösse von 600px die Position von rechts nach links */
@media (min-width: 600px) {
  .header-section {
    align-items: flex-start;
  }
}

/* Einstellungen zum Logo, selbständig gecodeder Block */
.logo {
  width: 10vh;
  height: auto;
  margin: 20px;
}

/*Quellenangabe 1 Anfang*/
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Linksbündig, wie im Bild */
}

/* Der obere Schriftzug */
.text-top {
  font-family: garamond;
  font-size: 8.5rem;
  background-color: transparent;
  color: var(--darkgreen);
  margin-bottom: -14mm; /* Der negative Margin zieht das nachfolgende Element um 6mm nach oben */
  z-index: 2; /* Sorgt dafür, dass der kursive Text im Vordergrund steht */
}

/* Der untere Schriftzug */
.text-bottom {
  font-family: syne;
  font-size: 4rem;
  background-color: transparent;
  color: var(--darkgreen);
  transform-origin: top left;
  z-index: 1;
  line-height: 0.9; /* Reuziert den Zeilenabstand, damit die beiden Zeilen näher beieinander liegen */
}
/*Quellenangabe 1 Ende*/

/* Allgemeine Einstellungen für den weissen Bereich der Seite (section + footer) */
.main-body {
  flex: 1;
  background-color: var(--alabaster);
  border-top-left-radius: 30px; /*rundet die obere Kante ab*/
  border-top-right-radius: 30px; /*rundet die obere Kante ab*/
  margin-top: -25px; /* Schiebt den Container hoch, um den Header zu überlappen */
  padding: 45px 30px 30px 30px;
  z-index: 2;
}

form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Eingabefelder Einstellungen */
.input-group {
  margin-bottom: 25px;
}

/* Darstellung der Labels über den Eingabefeldern */
.input-group label {
  display: block;
  margin-bottom: 5px;
}

/* Einstellungen für das Div um die Eingabefelder */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Darstellung der Eingabefelder */
.input-wrapper input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--darkblue);
  padding: 8px 30px 8px 0;
  outline: none;
  background: transparent;
}

/* Fokus-Effekt */
.input-wrapper input:focus {
  border-bottom: 1.5px solid var(--goldenchestnut);
}

/* Geordnete Darstellung für die Radio-Buttons */
/* Quellenangabe 4 Anfang */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  margin-top: 10px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
/* Quellenangabe 4 Ende */

/* Kleinere Schrift für die Auswahlmöglichkeiten bei Radio-Buttons, selbständig gecodeder Block */
.radio-group label {
  font-size: 14px;
}

/* Absende Button */
.button {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 25px;
  background: var(--darkgreen);
  color: var(--alabaster);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 5px 15px var(--darkblue);
  margin-bottom: 20px;
}
/* Quellenangabe 3 Ende*/

fieldset {
  padding: 20px;
  margin-bottom: 15px;
  border: 0.5px solid var(--lavendergray);
}

fieldset:focus-within {
  border: 2px solid var(--goldenchestnut);
}

legend {
  font-family: urban-bold;
}

textarea {
  padding: 5px;
  border: 0.5px solid;
  background-color: var(--alabaster);
}

textarea::placeholder {
  color: var(--lavendergray);
  font-size: 14px;
}

.error {
  color: red;
  font-size: 14px;
  margin-bottom: 10px;
}

.general-error {
  font-family: urban-bold;
  color: red;
  margin-bottom: 20px;
}

footer {
  text-align: center;
  padding-bottom: 20px;
}