*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.4;
}

li {
  margin-left: 1rem;
}

li::marker {
  color: var(--color-pink);
}

ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

a {
  color: var(--color-pink);
}

a:hover {
  color: var(--color-pink-dark);
  text-decoration-color: var(--color-pink-dark);
  text-decoration-style: dashed;
}

a[href^="mailto:"] {
  word-break: break-all; /* Bricht an jeder Stelle um */
  /* oder */
  overflow-wrap: break-word; /* Bricht nur bei Bedarf um */
}

small {
  font-size: 0.9rem;
}

:root {
  --color-bg: #eeeeee;
  --color-bg-cards: #f5f5f5;
  --color-text: #686868;
  --color-text-button: #ffffff;

  --color-green: #a1c049;
  --color-orange: #d87e32;
  --color-blue: #586eb0;
  --color-darkblue: #394770;
  --color-pink: #cc3577;
  --color-pink-dark: #a32655; /* für button:hover etwas dunkleres Pink */

  --font-body: "Source Sans 3", sans-serif;
  --font-heading: "Source Sans 3", sans-serif;

  --border-radius-btn: 5rem;
  --border-radius-default: 1rem;
  --box-shadow: 0px 1px 12px rgba(3, 7, 18, 0.1);

  --padding: 2rem;
  --section-gap: 6rem;
  --max-width: 1200px;
  --half-max-width: 600px;
  --min-width: 300px;
}

html {
  scroll-behavior: smooth; /* Sanftes Scrollen für Ankerlinks */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.outter-wrapper {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
  max-width: var(--max-width);
  padding: var(--padding);
}

.outter-wrapper.section-gap {
  gap: var(--section-gap);
}

.headline-wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: var(--max-width);
  padding: 0 var(--padding);
}

.button-wrapper {
  display: flex;
  width: max-content;
}

/* INTRO SECTION: Mütter brauchen Energie. Viel Energie!
======================================================================= */

.intro-section-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

@media (max-width: 1200px) {
  .intro-section-container {
    flex-direction: column;
  }
}

.intro-section-container--text,
.intro-section-container--image {
  flex: 1;
  min-width: var(--min-width);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: var(--border-radius-default);
}

.intro-section-container--image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  border-radius: var(--border-radius-default);
}

/* KURKLINIKEN SECTION: Unsere Evangelischen Kurkliniken
======================================================================= */

.kurkliniken-section,
#unser-Angebot,
#kurtermine,
.bildergalerie-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.kurkliniken-section-grid-container {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  flex-wrap: wrap;
}

.kurkliniken-section-grid-container--element {
  flex: 1;
  min-width: var(--min-width);
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 0.75rem;
  border-radius: var(--border-radius-default);
  transition: transform 300ms ease;
}

.kurkliniken-section .kurkliniken-section-grid-container--element:hover {
  transform: scale(1.02);
  transition: all 300ms ease-in;
}

.kurkliniken-section-grid-container--element a {
  text-decoration: none;
  color: inherit;
  display: block;
  flex: 1;
}

.kurkliniken-section-grid-container--element--img {
  aspect-ratio: 1/1;
  border-radius: var(--border-radius-default);
  display: flex;
  flex-direction: column;
}

.kurkliniken-section-grid-container--element--text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  justify-content: flex-start;
}

.kurkliniken-section-grid-container--element--text.centered {
  align-items: center;
  text-align: center;
}

.mutter-kind-icons-container {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  padding: 0.5rem;
}

.kurkliniken-section .mutter-kind-icons-container {
  margin-top: auto;
}

.mutter-kind-icons-container.centered {
  justify-content: center;
}

.mutter-kind-icons-container--element {
  background-color: white;
  padding: 0.25rem;
  border-radius: 100%;
}

/* USP SECTION: Das Besondere an unseren Kuren für Sie auf einen Blick
======================================================================= */

#usp-section {
  margin-top: var(--section-gap);
  background-image: url("../images/hintergrundbild_usp.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.usp-section-content {
  /* + outter-wrapper für Ausrichtung und Abstand*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.usp-section-content--button,
.usp-section-content--container {
  flex: 1;
}

.spenden-button-headline {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.usp-section-content--button a {
  all: unset;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  gap: 0.5rem;
  aspect-ratio: 1/1;
  border-radius: 100%;
  padding: 2rem;
  width: 200px;
  text-align: center;
  justify-content: center;
  color: white;
  background-color: var(--color-pink);
}

.usp-section-content--button span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.usp-section-content--container {
  background-color: white;
  border-radius: var(--border-radius-default);
  box-shadow: 0px 1px 12px rgba(3, 7, 18, 0.1);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: var(--half-max-width);
}

.usp-section-content--container-grid {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  flex-wrap: wrap;
}

/*.usp-section-content--container-grid > * 
<= das heißt alle direkten Kinder von der Eltern-Klasse */
.usp-section-content--container-grid--element {
  flex: 1;
  min-width: 45%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Diverse Layout-Elemente
======================================================================= */

.simple-content-container.centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
}

.simple-content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background-color: white;
  border-radius: var(--border-radius-default);
  padding: 2rem;
}

.icon-and-text--container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

.icon-and-text--container-icon img {
  width: 70px;
  height: auto;
}

.neuigkeiten-banner {
  display: flex;
  flex-direction: column;
  gap: var(--padding);
}

/* HINTERGRUND BEREICHE 
======================================================================= */

#zertifizierungen,
#christliches-profil {
  padding: var(--section-gap) 0;
  margin: var(--padding) 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#zertifizierungen {
  background-image: url("../images/hintergrundbild_zertifizierung.jpg");
}

#christliches-profil {
  background-image: url("../images/hintergrundbild_christlichesprofil.jpg");
}

@media (max-width: 700px) {
  #zertifizierungen,
  #christliches-profil {
    padding: 0;
    margin: 0;
  }
}

/* SPALTEN UND GRIDS   
======================================================================= */

.two-column-text--container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.two-column-text--container--text {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 768px) {
  .two-column-text--container {
    flex-direction: column;
    gap: 1.5rem;
  }

  .two-column-text--container--text {
    min-width: unset; /* Entfernt die 300px Mindestbreite */
    width: 100%;
  }

  /* Falls der Text trotzdem überläuft: */
  .two-column-text--container--text p,
  .two-column-text--container--text li {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

.three-column--container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 0;
}

.zertifizierung-logo {
  max-width: 100%;
  height: auto;
  min-width: 200px;
  aspect-ratio: 9 /6;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.four-grid--container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (max-width: 700px) {
  .four-grid--container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}

.four-grid--container img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  border-radius: var(--border-radius-default);
}

.kurtermine-section-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 1100px) {
  .kurtermine-section-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .kurtermine-section-grid-container {
    grid-template-columns: 1fr;
  }
}

.kurtermine-section-grid-container--element {
  flex: 1;
  min-width: var(--min-width);
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 0.75rem;
  border-radius: var(--border-radius-default);
}

.kurtermine-section-grid-container--element.impressionen {
  padding: 0;
  aspect-ratio: 1/1;
}

.kurtermine-section-grid-container--element.impressionen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--border-radius-default);
}

.kurtermine-section-grid-container--element a {
  text-decoration: none;
  color: inherit;
  display: block;
  flex: 1;
}

.stellenanzeige-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 2rem;
  gap: 0.5rem;
  border-radius: var(--border-radius-default);
}

/* ÜBER UNS
======================================================================= */

.team-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5rem 3rem; /* zwischen den Spalten & zwischen den Zeilen*/
}

.team-section-grid--element {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
  text-align: center;
}

.team-section-grid--element--text-container {
  display: flex;
  flex-direction: column;
  gap: 0rem;
}

.team-section-grid--element--bild {
  border-radius: 50%;
  width: 200px;
  aspect-ratio: 1/1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.team-section-grid--element--bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-section-grid--element--name p {
  font-weight: bold;
  font-size: 1.25rem;
}

#unsere-auftrag,
#team {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
#vom-verein-zur-ggmbh {
  background-image: url("../images/hintergrundbild_zertifizierung.jpg");
  padding: var(--section-gap) 0;
  margin: var(--padding) 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.intro-section-container--text.vom-verein-zur-ggmbh {
  background-color: white;
  border-radius: var(--border-radius-default);
  padding: var(--padding);
}

/* ÜBER UNS - Responsive
======================================================================= */

@media (max-width: 1200px) {
  .team-section-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem 2rem;
  }
}

@media (max-width: 900px) {
  .team-section-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
  }

  .team-section-grid--element--bild {
    width: 150px;
  }
}

@media (max-width: 600px) {
  .team-section-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .team-section-grid--element--bild {
    width: 120px;
  }
}

/* BLOG 
======================================================================= */

.kurkliniken-section-grid-container--element--blog-img {
  width: 100%;
  aspect-ratio: 9/6;
}

.kurkliniken-section-grid-container--element--blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--border-radius-default);
}

/* RECHTLICHE UNTERSEITEN 
======================================================================= */

.container-rechtliches {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 800px;
}

/* GÄSTEBUCH & ANMELDEFORMULAR 
======================================================================= */

#gaestebucheintrag-section {
  background-image: url(../images/illustration_gb_background.svg);
  background-repeat: no-repeat;
  background-position: bottom;
}

.gaestebucheintrag-container,
.form-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem; /* Einheitlicher Abstand zwischen Containern */
  background-color: white;
  border-radius: var(--border-radius-default);
  padding: 2rem;
  width: 800px;
  margin: 0 auto;
  box-shadow: var(--box-shadow);
}

/* Tablet */
@media (max-width: 900px) {
  .gaestebucheintrag-container,
  .form-container {
    width: 90%;
    padding: 1.5rem;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .gaestebucheintrag-container,
  .form-container {
    width: 95%;
    padding: 1rem;
    gap: 1.5rem;
  }
}

form {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* Gleicher Abstand wie oben */
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* Mehr Abstand zwischen Label und Input */
}

legend {
  font-weight: 600;
}

.form-field :is(input, textarea, select) {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  background-color: white;
  transition: all 0.2s ease;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.checkbox-option input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex-shrink: 0;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  /* margin-bottom entfernt - Abstand wird durch fieldset gap übernommen */
}

fieldset {
  border: 2px solid #e0e0e0;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin: 0;
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Einheitlicher Abstand zwischen Radio-Optionen */
}

.fieldset-datenschutz {
  border: none;
}

.form-actions.kuranfrage {
  margin: 0 auto;
}

/* Formular-Zeilen für nebeneinander liegende Felder */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Placeholder Styling */
.form-field textarea::placeholder {
  color: #b7b7b7;
  font-style: italic;
}

#koerpergroesse,
#gewicht {
  -moz-appearance: textfield;
}

#koerpergroesse::-webkit-outer-spin-button,
#koerpergroesse::-webkit-inner-spin-button,
#gewicht::-webkit-outer-spin-button,
#gewicht::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#kinder-felder {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* GÄSTEBUCH 
======================================================================= */
.outter-wrapper.gaestebucheintraege {
  flex: 1;
  gap: 2rem;
}

.gaestebucheintrag {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: white;
  border-radius: var(--border-radius-default);
  padding: 2rem;
  min-width: 300px;
  max-width: 800px;
  margin: 0 auto;
}

/* JOB Unterseite 
======================================================================= */

.job-aufgaben-section {
  padding: 2rem;
  margin-top: 2rem;
}

#behandlungsschwerpunkt-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* BLOG Mailingliste 
======================================================================= */

.mailingliste-outter-container {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

@media (max-width: 900px) {
  .mailingliste-outter-container {
    flex-direction: column;
  }
}

.mailingliste-container--bild,
.mailingliste-container--text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mailingliste-container--bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mailingliste-container--text {
  gap: 1rem;
}

/* FAQ
======================================================================= */
/* Hauptcontainer */
.fragen-container {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background-color: white;
  border-radius: var(--border-radius-default);
}

/* Kategorie-Überschrift */
summary.fragen-kategorie > h2 {
  font-size: 1.2rem;
}

/* Summary: Hauptfrage (Kategorie) */
summary.fragen-kategorie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

/* Kategorie: Plus-Symbol */
summary.fragen-kategorie::after {
  content: "+";
  font-size: 2.25rem; /* größer */
  color: var(--color-pink);
  transition: transform 150ms ease-in-out;
}

/* Kategorie: Drehung bei geöffnetem Zustand */
details[open] > summary.fragen-kategorie::after {
  transform: rotate(45deg);
}

/* Unterfrage-Container */
.fragen-container--element {
  padding: 1rem 1.5rem;
  background: #fff8fd;
  border-radius: var(--border-radius-default);
  margin-top: 1rem;
}

/* Unterfrage-Summary */
.fragen-container--element > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

/* Unterfrage: Plus-Symbol */
.fragen-container--element > summary::after {
  content: "+";
  font-size: 1.6rem; /* etwas kleiner als bei Hauptfrage */
  color: var(--color-pink);

  transition: transform 150ms ease-in-out;
  margin-left: 0.5rem;
}

/* Unterfrage: Drehung bei geöffnetem Zustand */
.fragen-container--element[open] > summary::after {
  transform: rotate(45deg);
}

/* Optional: globale Drehung blockieren, wenn nötig */
[open] summary::after {
  transform: none;
}

/* JOB Unterseite - Gründe für uns
======================================================================= */

#gruende-fuer-uns {
  margin-top: 4rem;
}

/* JOB SEITE - Mobile Optimierungen */
@media (max-width: 768px) {
  .job-aufgaben-section .four-grid--container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .job-aufgaben-section .kurkliniken-section-grid-container--element {
    width: 100%;
  }

  .job-aufgaben-section .kurkliniken-section-grid-container--element--text {
    padding: 1.5rem;
  }
}

/* Für sehr kleine Smartphones */
@media (max-width: 480px) {
  .job-aufgaben-section .outter-wrapper {
    padding: 1rem;
  }

  .job-aufgaben-section .kurkliniken-section-grid-container--element--text {
    padding: 1rem;
  }
}

/* JOB Ansprechpartnerin
======================================================================= */

.ansprechpartnerin-container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-top: 1rem;

  align-items: center;
}

.ansprechpartnerin-element {
  flex: 1;
}

.ansprechpartnerin-element.team-section-grid--element--bild {
  width: 100px;
  height: 100px; /* wichtig für Quadrat */
  border-radius: 50%; /* macht es rund */
  overflow: hidden;
  flex: 0 0 auto; /* Flexbox darf die Größe nicht überschreiben */
}

.ansprechpartnerin-element.team-section-grid--element--bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* IHR WEG ZUR KUR  
======================================================================= */

.fuenf-schritte-container {
  display: flex;
  flex-direction: column;
  gap: var(--padding);
  text-align: center;
  padding-top: var(--section-gap);
}

.fuenf-schritte-container--reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--padding);
}

.fuenf-schritte-container--reihe-element {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  border-radius: var(--border-radius-default);
  padding: var(--padding);
  background-color: var(--color-bg-cards);
}