/* Anglegung der Farben als CSS-Variablen, Quellenangabe 4 Start*/
:root {
  --kaffeebraun: #6c4a31;
  --cremeweiss: #ffffff;
  --tiefenschwarz: #1d1d1b;
  --latte-macchiato: #dacab8;
  --fehler-rot: #a94442; /* Variable für Fehlermeldungen */
}
/* Quellenangabe 4 Ende */

/* --------------------------------------------------
   SCHRIFTARTEN
-------------------------------------------------- */

/* Einbindung der Titelschriftart */
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Zeigt temporär eine Ersatzschrift an */
}

/* Einbindung der Standardschriftart */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Zeigt temporär eine Ersatzschrift an */
}

/* --------------------------------------------------
   RESET & GRUNDLAYOUT
-------------------------------------------------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  background-color: var(--latte-macchiato);
  color: var(--tiefenschwarz);
  line-height: 1.6;
  padding: 0 20px;
}

/* --------------------------------------------------
   TYPOGRAFIE
-------------------------------------------------- */

h1,
h2,
h3 {
  font-family: "Fredoka", sans-serif; /* sans-serif dient als Fallback */
}

h1 {
  font-weight: bolder;
  font-size: clamp(32px, 8vw, 90px);
  color: var(--kaffeebraun);
  text-align: center;
}

h2 {
  font-weight: bold;
  font-size: clamp(26px, 5vw, 55px);
  color: var(--kaffeebraun);
  text-align: center;
  margin-bottom: 20px;
}

h3 {
  font-weight: bold;
  font-size: clamp(20px, 4vw, 40px);
}

/* --------------------------------------------------
   HEADER
-------------------------------------------------- */

header {
  /* Gleicht die 20px des Bodys links und rechts wieder aus, Quellenangabe 7 Start*/
  width: calc(100% + 40px);
  /* Quellenangabe 7 Ende */

  margin: 0 -20px 30px -20px;
  padding: 40px 0;
  background-color: var(--cremeweiss);
  text-align: center;
}

header img {
  width: clamp(250px, 35vw, 1100px);
  height: auto;
}

/* --------------------------------------------------
   HERO-BEREICH
-------------------------------------------------- */

/* Hero-Bereich auf der Startseite */
.hero-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 30px;
  background-color: var(--cremeweiss);
}

/* Hero-Bild */
.hero-image-box img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* Inhalt unterhalb des Hero-Bildes */
.hero-content {
  padding: 20px;
  text-align: center;
}

/* --------------------------------------------------
   FORMULAR
-------------------------------------------------- */

/* Formular-Styling */
form {
  background-color: var(--cremeweiss);
  padding: 20px;
  border-radius: 12px; /* Ecken-Rundungen */
  max-width: 900px;
  margin: 0 auto;
}

fieldset {
  border: 2px solid var(--latte-macchiato);
  padding: 20px;
  margin-bottom: 25px;
  border-radius: 8px; /* Ecken-Rundungen */
}

/* Styling für die Beschriftung vom Fieldset */
legend {
  padding: 0 10px; /* Abstand links und rechts, damit der Text nicht direkt am Rahmen klebt */
}

/* Allgemeine Styling-Regeln für Formular-Labels */
label {
  display: block;
  margin-top: 15px;
  font-weight: bold;
}

/* Styling der Eingabefelder */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border: 1.5px solid var(--latte-macchiato);
  border-radius: 6px; /* Ecken-Rundungen */
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}

/* Textfeld darf nur vertikal vergrössert werden */
textarea {
  min-height: 100px;
  resize: vertical;
}

/* Container für Radiobuttons und Checkboxen */
.radio-group,
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* Korrektur für Labels innerhalb von Radio-/Checkbox-Gruppen */
.radio-group label,
.checkbox-group label {
  margin-top: 0;
  font-weight: normal;
}

/* --------------------------------------------------
   BUTTONS
-------------------------------------------------- */

/* Styling für den Absende-Button */
button {
  background-color: var(--kaffeebraun);
  color: var(--cremeweiss);
  padding: 15px 30px;
  border: none;
  border-radius: 8px; /* Ecken-Rundungen */
  font-family: "Fredoka", sans-serif;
  font-size: 1.2rem;
  width: 100%;
  margin-top: 10px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

button:hover {
  opacity: 0.8;
}

/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */

footer {
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  font-size: 0.9rem;
}

/* Verlinkungen im Footer */
footer a {
  color: var(--kaffeebraun);
  text-decoration: none;
  font-weight: bold;
}

footer a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------
   BESTÄTIGUNGSSEITE
-------------------------------------------------- */

/* Layout der Bestätigungsseite */
.bestaetigung-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--cremeweiss);
  padding: 40px 20px;
  border-radius: 12px; /* Ecken-Rundungen */
  max-width: 900px;
  margin: 0 auto;
}

.bestaetigung-container h1,
.bestaetigung-container h2,
.bestaetigung-container h3 {
  color: var(--kaffeebraun);
  display: inline-block;
  margin-bottom: 15px;
}

.bestaetigung-container p {
  max-width: 900px;
  margin-top: 15px;
}

.bestaetigung-container img {
  width: clamp(150px, 40vw, 300px);
  max-width: 100%;
  height: auto;
  margin: 20px 0;
}

/* Navigation auf der Bestätigungsseite */
.back-link-container {
  margin-top: 30px;
}

.back-link {
  color: var(--kaffeebraun);
}

/* --------------------------------------------------
   FEHLERMELDUNGEN
-------------------------------------------------- */

.error-message {
  color: var(--fehler-rot);
  font-size: 0.85rem;
  margin-top: 5px;
  display: block;
  font-weight: bold;
}

/* Accessibility: Sichtbarer Fokus für Tastatur-Navigation, Quellenangabe 32 Start */
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 3px solid var(--kaffeebraun);
  outline-offset: 2px;
}
/* Quellenangabe 32 Ende */

/* --------------------------------------------------
   RESPONSIVE 
-------------------------------------------------- */
/* Quellenangabe 6 Start*/
@media screen and (min-width: 768px) {
  body {
    padding-bottom: 40px;
  }

  .hero-container {
    max-width: 900px; /* ist gleich Breite wie das Formular */
    margin: 0 auto 30px; /* Zentriert den Container */
    border-radius: 12px; /* Ecken-Rundungen */
    overflow: hidden; /* Verhindert Überlagerung der Rundungen */
  }

  .hero-image-box img {
    height: 350px;
  }

  form {
    margin: 50px auto;
    padding: 40px;
  }

  /* Strukturwechsel: Wir nutzen CSS Grid für das Formular-Layout */
  fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
  }

  /* Legende und volle Breite für spezielle Elemente */
  legend,
  .grid-full {
    grid-column: span 2;
  }

  /* Grid übernimmt die Abstände */
  label {
    margin-top: 0;
  }

  /* Desktop-Button nicht über volle Breite */
  button {
    width: auto;
    display: block;
    margin-left: auto;
  }
}
/* Quellenangabe 6 Ende */

/* --------------------------------------------------
   DATUM STYLING
-------------------------------------------------- */

/* Start Quellenangabe 36 */
/* Blendet die Tage des vorherigen und nächsten Monats komplett aus */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  visibility: hidden !important;
}
/* Ende Quellenangabe 36 */