/* Google Fonts import */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Basic+Sans&display=swap");

/* Grundlayout für die Seite mit Hintergrundbild */
body {
  font-family: "Basic Sans", sans-serif;
  background: url("../media/Wasserblasen_Vektorelement.png") no-repeat left top
      fixed,
    url("../media/Wasserblasen_Vektorelement.png") no-repeat right bottom fixed,
    url("../media/meeresschutz.jpg") no-repeat center center fixed, #e0f7fa;
  background-size: 350px, 350px, cover, cover;
  color: black;
  margin: 0;
  padding: 20px;
  line-height: 1.5;
  position: relative;
}

/* Weisser Overlay für bessere Lesbarkeit */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(
    255,
    255,
    255,
    0.5
  ); /* Weisser Schleier, 0.5 = 50% Deckkraft */
  z-index: 0;
  pointer-events: none;
}

/* Hauptbereiche nach vorne holen */
main,
header,
footer {
  position: relative;
  z-index: 1;
}

/* Header und Footer */
header,
footer {
  text-align: center;
  margin-bottom: 20px;
}

/* Logo im Header*/
.logo {
  max-width: 150px;
  height: auto;
  margin-bottom: 10px;
}

/* Übertitel */
h1 {
  font-family: "Poppins", sans-serif;
  color: #006eb6; /* Farbe der Übertitel */
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Hover-Effekt für Übertitel */
h1:hover {
  color: #a790a5; /* Hover-Farbe */
  transition: color 0.5s ease; /* Weicher Übergang */
  cursor: default; /* Mauszeiger bleibt normal */
}

/* Hauptbereich (weisser Kasten) */
main {
  max-width: 700px;
  margin: 0 auto;
  background: #ffffff;
  padding: 25px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 10px black(0, 77, 64, 0.1);
}

/* Rahmen um jede Feldgruppe */
form fieldset {
  border: 2px solid #62b8e8; /* Linien ausserhalb der Boxen */
  border-radius: 6px;
  margin-bottom: 25px;
  padding: 15px 20px;
}

/* Titel der Feldgruppe */
form legend {
  font-weight: 600;
  color: #62b8e8; /* Farbe der Boxentitel */
  padding: 0 8px;
}

/* Beschriftungen für Felder */
label {
  display: block;
  margin-top: 12px;
  font-weight: 600;
}

/* Eingabefelder, Auswahlfelder und Textfelder */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 8px 10px;
  margin-top: 5px;
  border: 1.5px solid #62b8e8; /* Boxfarbe */
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

/* Fokus-Effekt für Eingabefelder */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: #acfcd9; /* Farbe beim Antippen */
  outline: none;
  background-color: #e0f2f1;
}

/* Gruppe für Radio- und Checkboxen */
.option-group {
  margin-top: 8px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* Einzelne Option in der Gruppe */
.option-group label {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Textfeld für Nachricht */
textarea {
  resize: vertical;
  min-height: 80px;
}

/* Hilfetext bei Mindestalter */
.helper-text {
  font-size: 0.85rem;
  color: #fc6471; /* Hilfestellung Mindestalter 18 */
  margin-top: 3px;
}

/* Haupt-Button */
button.btn-primary {
  background-color: #006eb6; /* Farbe des Buttons */
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 12px 25px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 10px;
  width: 100%;
}

/* Button Hover- und Fokus-Effekt */
button.btn-primary:hover,
button.btn-primary:focus {
  background-color: #a790a5; /* Farbe, wenn man drauf klickt beim Button */
  outline: none;
}

/* Footer-Text */
footer p {
  font-size: 0.9rem;
  color: black;
  margin: 5px 0;
}

/* Footer Links */
footer a {
  color: #006eb6;
  text-decoration: none;
  font-weight: 600;
  margin: 0 10px;
  transition: color 0.3s ease;
}

footer a:hover,
footer a:focus {
  color: #a790a5; /* Hover-Farbton wie bei h1 */
  text-decoration: underline;
}

/* Responsive: Option-Gruppen untereinander auf kleinen Geräten */
@media (max-width: 600px) {
  .option-group {
    flex-direction: column;
    gap: 10px;
  }
}

/* Responsive: Hauptbereich und Titel kleiner */
@media (max-width: 900px) {
  main {
    padding: 18px 10px;
    max-width: 98vw;
  }
  h1 {
    font-size: 1.5rem;
  }
}

@media (max-width: 600px) {
  body {
    padding: 10px;
  }
  main {
    padding: 15px 4vw;
    border-radius: 0;
    box-shadow: none;
  }
  h1 {
    font-size: 1.1rem;
    margin-bottom: 0.7rem;
  }
  label,
  input,
  select,
  textarea,
  button {
    font-size: 1rem;
  }
  .option-group {
    flex-direction: column;
    gap: 8px;
  }
  form fieldset {
    padding: 10px 5px;
    margin-bottom: 15px;
  }
}

/* Buttons und Inputs auf kleinen Geräten */
@media (max-width: 400px) {
  button.btn-primary {
    font-size: 1rem;
    padding: 10px 5px;
  }
  input,
  select,
  textarea {
    font-size: 0.95rem;
    padding: 6px 6px;
  }
}

/* Fehlerboxen und Hilfetexte anpassen */
@media (max-width: 600px) {
  .error-messages {
    font-size: 0.95rem;
    padding: 6px 6px;
  }
  .helper-text {
    font-size: 0.8rem;
  }
}

/* Logo kleiner auf kleinen Geräten */
@media (max-width: 600px) {
  .logo {
    max-width: 90px;
    margin-bottom: 5px;
  }
}

/* Links */
a.btn-primary2 {
  color: #006eb6; /* Normale Farbe */
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease; /* Weicher Übergang */
}

a.btn-primary2:hover,
a.btn-primary2:focus {
  color: #a790a5; /* Farbe beim Hover */
  text-decoration: underline; /* Unterstrich beim Hover */
}

/* Falls ein Feld nicht korrekt ausgefüllt wurde beim Eingabefeld */
.input-error {
  border-color: #fc6471 !important;
  background: #fff0f3;
}

/* Fehlermeldungen */
.error-messages {
  background: #fff0f3;
  border: 1.5px solid #fc6471;
  color: #fc6471;
  font-weight: 600;
  font-size: 1rem;
  margin-top: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px #fc647133;
}
.error-messages::before {
  content: "⚠️";
  font-size: 1.2rem;
  margin-right: 6px;
}