/* Schriftart */
@font-face {
  font-family: 'Indie Flower'; /* Schriftartname */
  src: url('IndieFlower-Regular.ttf') format('truetype'); /* Quelle der Schriftart */
  font-weight: normal;
  font-style: normal;
}

/* Grundlegende Formatierungen */
body {
  font-family: 'Indie Flower', cursive; /* Schriftart des gesamten Textes */
  margin: 0; /* Kein Abstand außerhalb des Körpers */
  padding: 0 1rem; /* Padding links und rechts */
  background-color: #fdfbf9; /* Hintergrundfarbe des Körpers */
  color: #333; /* Textfarbe */
  font-size: 26px; /* Schriftgröße des Textes */
  box-sizing: border-box; /* Boxmodell anpassen, damit Padding und Border in die Größe einfließen */
}


a {
  text-decoration: none; /* Keine Unterstreichung der Links */
  color: inherit; /* Links übernehmen die Textfarbe des umgebenden Elements */
}

img {
  max-width: 100%; /* Bilder passen sich der Breite des Containers an */
  height: auto; /* Die Höhe der Bilder wird automatisch angepasst, um das Seitenverhältnis zu wahren */
}

header {
  background: linear-gradient(to bottom, #f7f7f7 70%, #c25ba2 100%);
  padding: 2rem 1rem;
  text-align: center;
  position: relative;
  margin-bottom: 0; /* Kein Abstand zum Nav */
  z-index: 1;
  overflow: hidden;
}

.header-content {
  display: flex; /* Flexbox zur Ausrichtung der Inhalte */
  flex-direction: row; /* Inhalt wird vertikal angeordnet */
  align-items: center; /* Inhalt wird horizontal zentriert */
  padding: 20px; /* Innenabstand */
}

.logo {
  max-width: 250px; /* Maximale Breite des Logos */
  height: auto; /* Höhe des Logos passt sich proportional an */
  margin-top: 1rem; /* Abstand nach oben */
}

.header-text {
  max-width: 60%; /* Maximale Breite des Textes */
  margin: 0 auto; /* Zentriert den Text horizontal */
}

.titel {
  font-size: 2.5rem; /* Schriftgröße des Titels */
  font-weight: bold; /* Fettschrift */
  margin-bottom: 0.5rem; /* Abstand nach unten */
  color: #2f4f4f; /* Farbe des Titels */
}

.untertitel {
  font-size: 3.5rem; /* Schriftgröße des Untertitels */
  color: #c94f7c; /* Farbe des Untertitels */
  margin-bottom: 0.5rem; /* Abstand nach unten */
}

.begrüßung {
  font-size: 1.4rem; /* Schriftgröße der Begrüßung */
  color: #000; /* Textfarbe der Begrüßung */
  margin-top: 1rem; /* Abstand nach oben */
}

/* Navigation */
nav {
  background-color: #c94f7c; /* Hintergrundfarbe der Navigation */
  padding: 0.5rem 1rem; /* Innenabstand der Navigation */
  display: flex; /* Flexbox-Layout für Navigationselemente */
  align-items: center; /* Vertikale Zentrierung der Navigationselemente */
  flex-wrap: wrap; /* Erlaubt den Umbruch der Navigationselemente */
  box-sizing: border-box; /* Boxmodell für die Navigation */
}


nav {
  /* Magenta-Farbverlauf: petrol zu magenta */
  background: linear-gradient(to bottom,  #c25ba2,#1a5f63);

  /* Weicher Schatten für Tiefe */
  box-shadow: 0 4px 8px rgba(194, 91, 162, 0.2);

  /* Abgerundete untere Ecken für fließenden Übergang */
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;

  /* Etwas Luft nach innen */
  padding: 0.5rem 0;

  /* Weicher Übergang bei Animationen */
  transition: all 0.3s ease;
}
.burger {
  display: none; /* Burger-Menü standardmäßig ausblenden */
  font-size: 2rem; /* Schriftgröße des Burger-Menüs */
  padding: 1rem; /* Innenabstand */
  cursor: pointer; /* Zeiger wird zum Hand-Cursor beim Hover */
}

.nav-label {
  margin-left: 0.5rem; /* Abstand links vom Label */
  font-size: 2rem; /* Schriftgröße des Navigation-Labels */
  font-family: 'Indie Flower', sans-serif; /* Schriftart für das Label */
  font-weight: bold; /* Fettschrift */
  color: white; /* Textfarbe */
}

.nav-links {
  list-style: none; /* Keine Aufzählungszeichen für die Navigation */
  display: flex; /* Flexbox für horizontale Anordnung der Links */
  flex-wrap: wrap; /* Umbrüche der Navigationselemente bei Bedarf */
  justify-content: center; /* Zentrierung der Navigationselemente */
  margin: 0; /* Kein äußerer Abstand */
  padding: 0; /* Kein innerer Abstand */
  flex-grow: 1; /* Flexibilität für das Wachstum der Navigation */
  box-sizing: border-box; /* Boxmodell für die Navigation */
}

.nav-links li {
  margin: 0.75rem 1.2rem; /* Abstand der Listenelemente */
}

.nav-links a {
  padding: 0.6rem 1.2rem; /* Innenabstand der Links */
  background-color: #ffffff; /* Hintergrundfarbe des Links */
  border-radius: 2rem; /* Abgerundete Ecken der Links */
  color: #2e3d3d; /* Textfarbe der Links */
  font-weight: 500; /* Schriftstärke der Links */
  border: 2px solid #c94f7c; /* Rahmen um die Links */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Übergangseffekte */
}

.nav-links a:hover {
  background-color: #fbeaf0; /* Hintergrundfarbe bei Hover */
  transform: scale(1.05); /* Vergrößerung bei Hover */
}

.nav-links a.active {
  color: #8a3e74; /* dunkles Magenta */
  font-weight: bold;
}


/* Preisliste */
.preisliste {
  max-width: 1000px; /* Maximale Breite der Preisliste */
  margin: 2rem auto; /* Automatischer Abstand nach oben und unten */
  padding: 2rem; /* Innenabstand */
  background-color: #fff; /* Hintergrundfarbe */
  border-radius: 1rem; /* Abgerundete Ecken */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Schlagschatten */
}

.preisbox {
  display: flex; /* Flexbox-Layout für die Preisbox */
  flex-wrap: wrap; /* Umbrüche bei Bedarf */
  gap: 2rem; /* Abstand zwischen den Elementen */
  justify-content: center; /* Zentrierung der Elemente */
  margin-bottom: 2rem; /* Abstand nach unten */
}

.leistung {
  flex: 1 1 300px; /* Flex-Element mit Mindestbreite von 300px */
  background-color: #fbeaf0; /* Hintergrundfarbe der Leistung */
  border: 2px solid #c94f7c; /* Rahmenfarbe */
  border-radius: 1rem; /* Abgerundete Ecken */
  padding: 1.5rem; /* Innenabstand */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Schlagschatten */
  text-align: center; /* Zentrierter Text */
}

.leistung h2 {
  font-size: 2rem; /* Schriftgröße des Titelbereichs */
  margin-bottom: 0.5rem; /* Abstand nach unten */
  color: #4c7c8c; /* Farbe des Titels */
}

.preis {
  font-size: 2rem; /* Schriftgröße des Preises */
  font-weight: bold; /* Fettschrift */
  margin-bottom: 0.5rem; /* Abstand nach unten */
}

.dauer {
  font-size: 1.2rem; /* Schriftgröße der Dauer */
  color: #555; /* Farbe der Dauer */
}

.anfahrt {
  background-color: #e6f1f2; /* Hintergrundfarbe der Anfahrt */
  border: 2px solid #4c7c8c; /* Rahmenfarbe */
  border-radius: 1rem; /* Abgerundete Ecken */
  padding: 1.5rem; /* Innenabstand */
  max-width: 600px; /* Maximale Breite */
  margin: 0 auto; /* Zentriert das Element */
  text-align: center; /* Zentrierter Text */
  font-size: 1.2rem; /* Schriftgröße */
}

/* Zurück-Button */
.zurueck-wrapper {
  text-align: center; /* Zentrierter Text */
  margin-top: 3rem; /* Abstand nach oben */
}

.zurueck-button {
  background-color: #c94f7c; /* Hintergrundfarbe des Buttons */
  color: white; /* Textfarbe des Buttons */
  padding: 0.75rem 1.5rem; /* Innenabstand */
  border-radius: 1rem; /* Abgerundete Ecken */
  font-weight: bold; /* Fettschrift */
  display: inline-block; /* Der Button verhält sich wie ein Block-Element */
  transition: background-color 0.3s ease; /* Übergangseffekt */
}

.zurueck-button:hover {
  background-color: #b43d64; /* Hintergrundfarbe beim Hover */
}

/* Galerie */
.galerie-grid {
  display: grid; /* Grid-Layout */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Automatische Spaltenfüllung */
  gap: 1rem; /* Abstand zwischen den Bildern */
  padding: 2rem 1rem; /* Innenabstand */
}

.bildkachel {
  position: relative; /* Positionierung für das Bild */
  overflow: hidden; /* Überschüssiges Bild wird abgeschnitten */
  border-radius: 1rem; /* Abgerundete Ecken */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Schlagschatten */
  transition: transform 0.3s ease; /* Übergangseffekt bei Hover */
}

.bildkachel:hover {
  transform: scale(1.05); /* Vergrößerung bei Hover */
}

.bildtext {
  position: absolute; /* Positionierung innerhalb des Bildes */
  bottom: 10px; /* Abstand zum unteren Rand */
  left: 50%; /* Zentrierung horizontal */
  transform: translateX(-50%); /* Genaues Zentrieren */
  background-color: rgba(0, 0, 0, 0.6); /* Hintergrundfarbe mit Transparenz */
  color: white; /* Textfarbe */
  padding: 0.5rem; /* Innenabstand */
  border-radius: 0.5rem; /* Abgerundete Ecken */
  font-size: 1rem; /* Schriftgröße */
  width: 100%; /* Breite des Textcontainers */
  text-align: center; /* Zentrierter Text */
}

/* Footer */
footer {
  background-color: #2f4f4f; /* Hintergrundfarbe des Footers */
  padding: 2rem 1rem; /* Innenabstand */
  margin-top: 4rem; /* Abstand nach oben */
  color: #fff; /* Textfarbe */
}

.footer-container {
  max-width: 1000px; /* Maximale Breite des Containers */
  margin: 0 auto; /* Zentriert den Footer */
  display: flex; /* Flexbox-Layout */
  flex-wrap: wrap; /* Erlaubt Umbrüche der Elemente */
  justify-content: space-between; /* Verteilt die Elemente */
  gap: 2rem; /* Abstand zwischen den Elementen */
}

.footer-content,
.footer-links,
.footer-social {
  flex: 1 1 200px; /* Flex-Elemente mit Mindestbreite von 200px */
}

.footer-links ul,
.footer-social ul {
  list-style: none; /* Keine Aufzählungszeichen */
  padding: 0; /* Kein Innenabstand */
}

.footer-links li,
.footer-social li {
  margin: 0.5rem 0; /* Abstand der Listenelemente */
}

.footer-links a,
.footer-social a {
  color: #fff; /* Textfarbe der Links */
  text-decoration: none; /* Keine Unterstreichung */
}

.footer-links a:hover,
.footer-social a:hover {
  color: #c94f7c; /* Textfarbe bei Hover */
}

.footer-social p {
  font-size: 1.1em; /* Schriftgröße der sozialen Links */
}

.footer-social li {
  display: inline; /* Inline-Darstellung der sozialen Links */
  margin-right: 15px; /* Abstand zwischen den sozialen Links */
}

/* Gästebuch */

/* Formularstile */
form {
  display: flex; /* Flexbox für die Anordnung der Formularelemente */
  flex-direction: column; /* Vertikale Anordnung */
  gap: 1rem; /* Abstand zwischen den Formularfeldern */
  max-width: 600px; /* Maximale Breite des Formulars */
  margin: 0 auto; /* Zentriert das Formular */
  padding: 2rem; /* Innenabstand des Formulars */
  background-color: #fff; /* Hintergrundfarbe des Formulars */
  border-radius: 1rem; /* Abgerundete Ecken */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Schlagschatten */
}

/* Eingabefelder */
input[type="text"],
input[type="email"],
textarea {
  width: 100%; /* Volle Breite der Felder */
  padding: 1rem; /* Innenabstand */
  font-size: 1rem; /* Schriftgröße */
  border: 2px solid #c94f7c; /* Randfarbe */
  border-radius: 0.5rem; /* Abgerundete Ecken */
  background-color: #f9f9f9; /* Hintergrundfarbe */
  color: #333; /* Textfarbe */
  transition: border-color 0.3s ease, background-color 0.3s ease; /* Übergangseffekte */
}

/* Focus-Effekte */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: #4c7c8c; /* Randfarbe im Fokus */
  background-color: #fff; /* Hintergrundfarbe im Fokus */
  outline: none; /* Entfernt den Standard-Fokusrahmen */
}
/* Beschriftungen */
label {
  font-size: 1.2rem; /* Schriftgröße der Beschriftungen */
  margin-bottom: 0.5rem; /* Abstand nach unten */
  color: #333; /* Textfarbe */
}

/* Absende-Button */
button {
  padding: 1rem 2rem; /* Innenabstand */
  font-size: 1.2rem; /* Schriftgröße */
  background-color: #c94f7c; /* Hintergrundfarbe */
  color: white; /* Textfarbe */
  border: none; /* Kein Rand */
  border-radius: 1rem; /* Abgerundete Ecken */
  cursor: pointer; /* Cursor als Hand */
  transition: background-color 0.3s ease; /* Übergang */
}

button:hover {
  background-color: #b43d64; /* Hover-Hintergrundfarbe */
}

/* Bewertungscontainer */
.bewertung-container {
  width: 60%; /* Standard: 60% der Bildschirmbreite */
  max-width: 800px; /* Maximalbreite, um es nicht zu breit werden zu lassen */
  margin: 20px auto; /* Zentriert mit vertikalem Abstand */
  padding: 20px; /* Innenabstand */
  background-color: #f9f9f9; /* Hintergrundfarbe */
  border: 2px solid #c94f7c; /* Sichtbarer Rahmen */
  border-radius: 10px; /* Abgerundete Ecken */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
}

/* Responsives Verhalten bei kleinen Bildschirmen */
@media (max-width: 768px) {
  .bewertung-container {
    width: 90%; /* Auf kleinen Bildschirmen fast volle Breite */
    padding: 15px; /* Etwas weniger Innenabstand */
  }
}

/* Bewertungstext */
.bewertung-text {
  word-wrap: break-word; /* Zeilenumbruch bei langen Wörtern */
  overflow-wrap: break-word; /* Unterstützung in modernen Browsern */
  white-space: pre-wrap; /* Zeilenumbrüche UND Leerzeichen beibehalten */
  font-size: 16px; /* Schriftgröße */
  line-height: 1.5; /* Zeilenhöhe */
  color: #333; /* Textfarbe */
}

/* Name des Rezensenten */
.bewertung-ueberschrift {
  font-size: 18px; /* Schriftgröße */
  font-weight: bold; /* Fettdruck */
  margin-bottom: 10px; /* Abstand nach unten */
  color: #555; /* Schriftfarbe */
}

/* Datum */
.bewertung-datum {
  font-size: 14px; /* Kleinere Schrift */
  color: #777; /* Grauton */
  text-align: right; /* Rechtsbündig */
  margin-top: 10px; /* Abstand nach oben */
}

.überschriftengästebuch {
  color: #006d64; /* Petrol-Farbe */
  text-align: center; /* zentrieren */
  text-decoration: underline;
}
/* Bildpositionen Was dich erwartet */

/* Container für Text und Bilder nebeneinander */
.inhalt-mit-bildern {
  display: flex; /* Flexbox: Elemente nebeneinander anordnen */
  flex-wrap: wrap; /* Wenn zu wenig Platz ist, Elemente umbrechen */
  justify-content: space-between; /* Platz zwischen Text- und Bildbereich */
  align-items: flex-start; /* Obere Ausrichtung der Elemente */
  gap: 2rem; /* Abstand zwischen den Spalten */
  margin: 2rem 0; /* Abstand oben und unten vom gesamten Abschnitt */
}

/* Bereich für die Aufzählung (linke Spalte) */
.textbereich {
  flex: 1 1 55%; /* Nimmt mindestens 55% des Platzes ein, passt sich an */
}

/* Bereich für die Bilder (rechte Spalte) */
.bilderbereich {
  flex: 1 1 40%; /* Nimmt mindestens 40% des Platzes ein, passt sich an */
  display: flex; /* Flexbox für vertikale Bildanordnung */
  flex-direction: column; /* Bilder untereinander anordnen */
  gap: 1rem; /* Abstand zwischen den Bildern */
}

/* Gestaltung der Befundbilder */
.befundbild {
  width: 100%; /* Bild füllt den gesamten zur Verfügung stehenden Bereich */
  height: auto; /* Höhe passt sich proportional an die Breite an */
  border-radius: 1rem; /* Abgerundete Ecken */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten für mehr Tiefe */
}
/* Responsive */
@media (max-width: 768px) {
  .header {
    flex-direction: column; /* Elemente untereinander anordnen */
    text-align: center; /* Text zentrieren */
  }

  .header-content {
    flex-direction: column; /* Inhalte untereinander anordnen */
    align-items: center; /* Elemente horizontal zentrieren */
    padding: 20px;
  }

  .logo {
    max-width: 150px; /* Logo maximal auf 150px Breite begrenzen */
    margin-top: 1rem; /* Abstand nach oben für das Logo */
    margin-bottom: 1rem; /* Abstand nach unten für das Logo */
  }

  .titel {
    font-size: 2rem; /* Schriftgröße des Titels bei kleinen Bildschirmen */
  }

  .untertitel {
    font-size: 2.5rem; /* Schriftgröße des Untertitels bei kleinen Bildschirmen */
  }

  .begrüßung {
    font-size: 1.2rem; /* Schriftgröße der Begrüßung bei kleinen Bildschirmen */
  }

  .burger {
    display: block; /* Sichtbarkeit: Burger-Icon wird sichtbar (für mobile Navigation) */
  }

  .nav-links {
    flex-direction: column; /* Layout-Richtung: Navigationselemente untereinander anordnen */
    display: none;          /* Standardmäßig ausgeblendet */
    width: 100%;            /* Breite: nimmt die volle Breite ein */
  }

  .nav-links.show {
    display: flex; /* Sichtbarkeit: zeigt die Navigationselemente an (z. B. wenn Burger-Menü geklickt wurde) */
  }

  .nav-links li {
    text-align: center;     /* Textausrichtung: zentriert */
    margin: 0.3rem 0.3rem;  /* Außenabstand oben/unten + seitlich */
    padding: 0.5rem 0.5rem; /* Innenabstand oben/unten + seitlich */
    width: 100%;            /* Volle Breite für jeden Navigationspunkt */
    box-sizing: border-box; /* Boxmodell inklusive Padding */
  }

  .nav-links a {
    display: block;             /* Block-Element für bessere Klickfläche */
    text-align: center;         /* Zentrierter Text */
    padding: 0.75rem 1rem;      /* Innenabstand */
    font-size: 1.2rem;          /* Schriftgröße */
    white-space: normal;        /* Erlaubt Zeilenumbruch */
    word-break: break-word;     /* Trennt lange Wörter */
  }

  .preisbox {
    flex-direction: column; /* Layout-Richtung: Preisboxen untereinander anordnen */
    align-items: center;    /* Zentrierung der Boxen horizontal */
  }

  .footer-container {
    flex-direction: column; /* Layout-Richtung: Footer-Inhalte untereinander anordnen */
    align-items: center;    /* Zentrierung der Inhalte horizontal */
    text-align: center;     /* Textausrichtung: zentriert */
  }

  .lightbox {
    display: none; /* bleibt so, damit die Box initial unsichtbar ist */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    display: flex; /* NEU: Flexbox aktivieren */
  }
}
/* Bild in der Lightbox */
.lightbox-content {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain; /* Bild wird proportional skaliert */
  z-index: 1001; /* Sicherstellen, dass das Bild über der Lightbox liegt */
margin-top: 40px;
}

/* Schließen Button */
.close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 50px;
  cursor: pointer;
  z-index: 1100; /* Sicherstellen, dass der Schließen-Button oben liegt */
}

/* Pfeiltasten Position */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 40px;
  cursor: pointer;
  z-index: 1100; /* Sicherstellen, dass sie über dem Bild liegen */
}

.prev {
  left: 15px;
}

.next {
  right: 15px;
}

/* Beschriftungen über den Eingabefeldern */
label {
  display: block; /* Block-Element, damit das Label über dem Eingabefeld steht */
  font-size: 16px; /* Schriftgröße */
  margin-bottom: 0.5rem; /* Abstand nach unten */
  font-family: inherit; /* Schriftart vom übergeordneten Element übernehmen */
}

/* Eingabefelder (Text, E-Mail, Textarea) */
input[type="text"],
input[type="email"],
textarea {
  width: 100%; /* Volle Breite */
  padding: 1rem; /* Innenabstand */
  margin-bottom: 1.5rem; /* Abstand nach unten */
  border: 2px solid #c94f7c; /* Magentafarbene Umrandung */
  border-radius: 8px; /* Abgerundete Ecken */
  background-color: #f9f9f9; /* Heller Hintergrund */
  font-size: 16px; /* Schriftgröße */
  font-family: inherit; /* Schriftart übernehmen */
  transition: border-color 0.3s ease; /* Sanfter Übergang bei Fokus */
}

/* Allgemeiner Stil für Checkboxen und Radiobuttons */
input[type="checkbox"],
input[type="radio"] {
  appearance: none; /* Standarddesign entfernen */
  -webkit-appearance: none; /* Für WebKit-Browser */
  -moz-appearance: none; /* Für Firefox */
  width: 20px; /* Breite */
  height: 20px; /* Höhe */
  margin-right: 8px; /* Abstand zum Text */
  border: 2px solid #999; /* Graue Umrandung */
  border-radius: 6px; /* Leicht abgerundet (Checkbox) */
  background-color: #f0f0f0; /* Heller Hintergrund */
  cursor: pointer; /* Zeiger als Hand */
  transition: all 0.2s ease-in-out; /* Sanfter Übergang */
  position: relative; /* Für das Häkchen */
  top: 1px; /* Leichte Anhebung für bessere Ausrichtung */
}

/* Rundes Design für Radiobuttons */
input[type="radio"] {
  border-radius: 50%; /* Vollständig rund */
}

/* Aktivierter Zustand für Checkboxen */
input[type="checkbox"]:checked {
  background-color: #a3d2ca; /* Farbiger Hintergrund */
  border-color: #5eaaa8; /* Farbige Umrandung */
}

input[type="checkbox"]:checked::after {
  content: "✓"; /* Häkchen-Symbol */
  color: #fff; /* Weißes Häkchen */
  font-size: 14px; /* Größe des Häkchens */
  position: absolute; /* Position innerhalb der Checkbox */
  top: 0;
  left: 4px;
}

/* Aktivierter Zustand für Radiobuttons */
input[type="radio"]:checked {
  background-color: #a3d2ca; /* Farbiger Hintergrund */
  border: 6px solid #5eaaa8; /* Dickere Umrandung */
}

/* Anordnung von Checkboxen und Radiobuttons in einer Reihe */
.radio-gruppe,
.checkbox-gruppe {
  display: flex;
  flex-wrap: wrap; /* Umbruch bei kleinen Bildschirmen */
  gap: 1.2em; /* Abstand zwischen den Elementen */
  margin-top: 0.5em;
  margin-bottom: 1em;
}

/* Stil für die Labels der Gruppen */
.radio-gruppe label,
.checkbox-gruppe label {
  display: inline-flex; /* Flexibles Layout */
  align-items: center; /* Vertikale Ausrichtung */
  font-size: 16px; /* Schriftgröße */
  margin-bottom: 3px; /* Abstand nach unten */
  gap: 0.4em; /* Abstand zwischen Button und Text */
  cursor: pointer; /* Zeiger als Hand */
}

/* Formularlayout */
form {
  display: flex;
  flex-wrap: wrap; /* Elemente umbrechen bei Bedarf */
  gap: 1rem; /* Abstand zwischen den Feldern */
}

/* Bereich "Über mich" mit Bild */
.über-mich-mit-bild {
  display: flex; /* Horizontales Layout */
  flex-wrap: wrap; /* Umbruch bei kleineren Bildschirmen */
  gap: 2rem; /* Abstand zwischen Text und Bild */
  align-items: center; /* Vertikale Zentrierung */
  justify-content: flex-start; /* Linksbündige Ausrichtung */
  margin-bottom: 2rem; /* Abstand nach unten */
}
.über-mich-mit-bild p {
  flex: 1 1 50%;                      /* Text bekommt 50% des verfügbaren Platzes */
}

.über-mich-mit-bild figure {
  flex: 1 1 40%;                      /* Bild bekommt 40% des verfügbaren Platzes */
  margin: 0;                          /* Entfernen des standardmäßigen Außenabstands des Figures */
  text-align: center;                 /* Bild wird horizontal im Container zentriert */
}

.über-mich-mit-bild img {
  max-width: 100%;                    /* Bild maximal auf die Breite des Containers skalieren */
  height: auto;                       /* Höhe wird proportional zur Breite angepasst */
  border-radius: 1rem;                /* Abgerundete Ecken für das Bild */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Leichter Schatten für das Bild */
}


/* Für kleinere Bildschirme (z. B. Smartphones) */
@media (max-width: 768px) {
  .über-mich-mit-bild {
    flex-direction: column;           /* Elemente untereinander anordnen bei kleinen Bildschirmen */
    text-align: center;               /* Text und Bild werden zentriert */
  }

  .über-mich-mit-bild p,
  .über-mich-mit-bild figure {
    flex: 1 1 100%;                   /* Beide Elemente (Text und Bild) erhalten 100% Breite */
    margin-bottom: 1rem;              /* Abstand nach unten zwischen Text und Bild */
  }

  .über-mich-mit-bild img {
    max-width: 80%;                   /* Bildgröße bei kleinen Geräten auf 80% der Containerbreite beschränken */
  }
}

/* Formatierungen für den Abschnitt Werdegang */


.externer-link {
  color: #006666; /* Petrol-Farbton */
  font-weight: 600; /* Etwas dicker */
  text-decoration: none; /* Optional: Unterstreichung entfernen */
}

.externer-link:hover {
  text-decoration: underline; /* Optional: Unterstreichung beim Hover */
}
#uebermich {
  font-size: 2rem; /* Beispielgröße, kannst du nach Bedarf anpassen */
}
/* Einstellungen fürs Impressum */

.impressum, .datenschutz {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  line-height: 1.6;
}
.impressum p, .datenschutz p {
  margin-bottom: 1em;
}
/* Abstand für die Abschnitte hinzufügen */


/* Alternativ kannst du nur den linken und rechten Abstand anpassen */
#übermich, #abschnitt2, #aufzählung, #kontakttext {
  padding-left: 4rem;   /* Abstand von links */
  padding-right: 1rem;  /* Abstand von rechts */
}

#abschnitt1, #abschnitt2, #ablauf, #titelkontakt {
font-size: 2.5rem; /* Schriftgröße des Titels */
  font-weight: bold; /* Fettschrift */
  margin-bottom: 0.5rem; /* Abstand nach unten */
  color: #2f4f4f; /* Farbe des Titels */
text-align: center; /* Text zentriert */
text-decoration: underline;
}

.faq-inhalt {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 2rem;
}

.faq-inhalt h2 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
  color: #006d64; /* Petrol */
  text-decoration: underline;
}

.faq-punkt {
  margin-bottom: 2rem;
  background-color: #e6f1f2; /* Helles Petrol */
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.faq-punkt h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #c94f7c; /* Magenta */
  font-weight: bold;
}

.faq-punkt p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
}

.faq-punkt a {
  color: #8b4c39;
  text-decoration: underline;
}

@media (max-width: 768px) {
  #übermich, #abschnitt2, #aufzählung, #kontakttext {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (max-width: 768px) {
  .header-text {
    max-width: 90%;
    text-align: center;
  }
}

.lightbox {
  display: none; /* standardmäßig versteckt */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);

  display: flex; /* ← wichtig! */
  justify-content: center;
  align-items: center;
  flex-direction: column; /* optional: Bild & Text untereinander */
  z-index: 9999;
  text-align: center;
}