/*
   ===========================
   RESET & BASE
   =========================== */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scroll-padding-top: 100px;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: var(--text);        /* KORREKTUR: Variable statt Hex-Code */
  line-height: 1.7;
  background: var(--cream);  /* KORREKTUR: Variable statt Hex-Code */
  /* Verhindert horizontales Scrollen durch unsaubere Breiten auf Mobilgeräten */
  overflow-x: hidden; 
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  color: #4a5043; /* Hinweis: Falls Sie hierfür --sage-dark nutzen wollen, ebenfalls austauschen */
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto; /* Wichtig für responsive Skalierung */
  display: block;
}

.profile-img {
  border-radius: 20px;
}

/* ===========================
   FARBEN (Palette: Salbei, Rosé, Creme)
   =========================== */
:root {
  --sage:       #8a9a7b;
  --sage-light: #d4dece;
  --sage-dark:  #5c6b52;
  --rose:       #c9a59a;
  --rose-light: #f0ddd6;
  --cream:      #fdfaf6;
  --warm:       #f5ece3;
  --text:       #3a3a3a;
  --text-light: #6b6b6b;
  --white:      #ffffff;
}

/* ===========================
   PAGE HEADER (NEU EINGEFÜGT)
   =========================== */
.page-header {
  /* Schiebt den Text 180 Pixel nach unten, weit unter die feste Navbar */
  padding-top: 180px; 
  padding-bottom: 40px;
  padding-left: 20px;
  padding-right: 20px;
  background: var(--warm); /* Gibt dem Header dieselbe gemütliche Hintergrundfarbe */
  
  /* NEU: Richtet den gesamten verschachtelten Inhalt mittig aus */
  text-align: center; 
}

.page-header h2 {
  font-family: 'Playfair Display', serif;
  color: var(--sage-dark);
  font-size: 1.8rem;
  line-height: 1.5;
  max-width: 850px; 
  margin: 0 auto; 
  text-align: center; 
}

/* NEU: Überschreibt das text-indent aus dem HTML und zentriert die Box */
.page-header h2 div {
  text-indent: 0 !important; /* Löscht die 200px Verschiebung auf allen Geräten */
  text-align: center !important; /* Erzwingt die mittige Ausrichtung */
  display: inline-block; /* Sorgt dafür, dass sich die Box wie Text verhält */
}

/* ===========================
   HEADER / NAVIGATION RESPONSIVE
   =========================== */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  width: 100%;
  box-sizing: border-box;
}

/* Container für das Logo und den Text "Bauch & Balance" */
.logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 80%; /* Verhindert das Rausrutschen aus dem Bildschirm */
}

.logo-container img {
  height: 50px; /* Passt die Grafik für Mobilgeräte an */
  width: auto;
}

.logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--sage-dark);
  white-space: normal; /* Erlaubt Zeilenumbruch bei sehr kleinen Displays */
}

/* Standard-Navigation für Desktop ausblenden auf Mobilgeräten */
.main-nav {
  display: none;
}

/* AB TABLET / DESKTOP (Größer als 768px) */
@media (min-width: 768px) {
  .logo-text {
    font-size: 1.5rem;
  }
  
  /* Blendet die normale Navigation auf großen Bildschirmen wieder ein */
  .main-nav {
    display: flex;
    gap: 2rem;
  }
}


/* ===========================
   NAVIGATION
   =========================== */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  /* Hinweis: Da CSS-Variablen mit Hex-Codes (#fdfaf6) nicht nativ in rgba() umgewandelt werden können, 
     bleibt rgba hier bestehen. Es ist technisch kein Fehler, bricht aber die strikte Variablen-Trennung. */
  background: rgba(253, 250, 246, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari Support */
  z-index: 1000;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.nav-container .nav-title,
.nav-container h1 {
  flex-grow: 1;
  flex-shrink: 1 !important;
  white-space: normal !important; 
  text-align: left;
  margin-left: 1.5rem;
  margin-right: 2rem !important; 
  /* KORREKTUR: Schriftgröße von 1.5rem auf 1.8rem erhöht für mehr Präsenz */
  font-size: 1.8rem !important; 
  font-family: 'Playfair Display', serif;
  color: var(--sage-dark) !important;
  line-height: 1.2 !important; 
}

@media (max-width: 1024px) {
  .nav-container {
    flex-wrap: wrap !important; 
  }
}


.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
  align-items: center;
}

.nav-links a {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text);
  transition: color 0.3s;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--sage);
  transition: width 0.3s;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--sage-dark);
  padding: 0.5rem;
}
a .nav-title,
a h1 {
  color: var(--sage-dark) !important;
}

.nav-title {
  font-weight: 700 !important;
}

/* Szenario B: Der Link liegt innerhalb des h1/Titels */
.nav-title a,
h1 a {
  color: var(--sage-dark) !important;
}

/* Für das Element selbst (falls es kein Link ist) */
.nav-container h1,
.nav-container .nav-title {
  color: var(--sage-dark) !important;
}

/* ===========================
   HERO
   =========================== */
.hero {
  /* Stellt sicher, dass Padding die Gesamthöhe nicht vergrößert */
  box-sizing: border-box; 
  position: relative;
  /* dvh verhindert die CSS-Lücke durch mobile Browser-Leisten */
  height: 100dvh; 
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, var(--sage-light) 0%, var(--rose-light) 50%, var(--warm) 100%);
  overflow: hidden;
  /* Schafft Platz für den fixierten Header (80px) */
  padding-top: 80px; 
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(253, 250, 246, 0.4) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 2rem;
  max-width: 900px;
}

.hero h1 {
  font-size: 3.5rem;
  color: var(--sage-dark);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.hero p {
  font-size: 1.3rem;
  /* PRÜFEN: Nutzen Sie hier lieber eine dunkle Textfarbe für besseren Kontrast */
  color: var(--text-dark, #333333); 
  margin-bottom: 2.5rem;
  letter-spacing: 1px;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap; 
}

/* ===========================
   BUTTONS
   =========================== */
.btn {
  display: inline-block;
  padding: 0.85rem 2.2rem; 
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
  border: 2px solid transparent;
  white-space: nowrap;
  text-align: center;
}

.btn:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--sage);
  color: var(--white);
  border-color: var(--sage); /* Gleiche Box-Größe wie Secondary */
}

.btn-primary:hover {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(92, 107, 82, 0.3);
}

.btn-secondary {
  background: transparent;
  color: var(--sage-dark);
  border-color: var(--sage);
}

.btn-secondary:hover {
  background: var(--sage);
  color: var(--white);
  /* KORREKTUR: Gleicher Hover-Effekt wie beim Primary Button für Konsistenz */
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(92, 107, 82, 0.15); 
}

/* ===========================
   SECTIONS
   =========================== */
.section {
  padding: 6rem 2rem;
}

.section-light { background: var(--cream); }
.section-sage { background: var(--sage-light); }
.section-warm { background: var(--warm); }

/* KORREKTUR: Erzwingt helle Schrift für ALLE Elemente in dieser dunklen Sektion */
.section-contact { 
  background: var(--sage-dark); 
  color: var(--cream); 
}

/* KORREKTUR: Zentrierung gilt für den normalen UND den schmalen Container */
.container,
.narrow {
  margin-left: auto;
  margin-right: auto;
  width: 100%; /* Verhindert Layout-Fehler auf sehr kleinen Bildschirmen */
}

.container { max-width: 1100px; }
.narrow { max-width: 780px; }

.section-title {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 3rem;
  color: var(--sage-dark);
}

/* KORREKTUR: Der Titel wird automatisch hell, wenn er in der Kontakt-Sektion liegt */
.section-contact .section-title,
.section-title.light { 
  color: var(--cream); 
}

/* ===========================
   TWO-COL LAYOUT
   =========================== */
.two-col {
  display: grid;
  /* KORREKTUR: Standardmäßig einspaltig für Mobilgeräte */
  grid-template-columns: 1fr; 
  gap: 2rem;
  align-items: center;
}

@media (max-width: 767px) {
  .two-col.reverse > .placeholder-img {
    order: -1; 
  }
}

/* KORREKTUR: Ab Tablet-Größe (768px) wird das Layout zweispaltig */
@media (min-width: 768px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  /* KORREKTUR: Alle alten grid-column/row Befehle komplett gelöscht.
     Nur diese zwei sauberen 'order'-Regeln steuern den Tausch perfekt. */
  .two-col.reverse > *:nth-child(1) {
    order: 2; /* Erstes Element wandert nach rechts */
  }
  
  .two-col.reverse > *:nth-child(2) {
    order: 1; /* Zweites Element wandert nach links */
  }
}

.text-block p {
  margin-bottom: 1rem;
  color: var(--text-light);
}

.text-block p:last-child {
  margin-bottom: 0;
}

.placeholder-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--sage-light);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--sage-dark);
  border: 2px dashed var(--sage);
}

.placeholder-img.accent {
  background: var(--rose-light);
  border-color: var(--rose);
  color: var(--rose);
}

/* ===========================
   CHECK LIST
   =========================== */
.check-list {
  list-style: none;
  /* KORREKTUR: Setzt das versteckte Browser-Standardpadding zurück, 
     damit die Liste bündig mit dem normalen Text abschließt */
  padding-left: 0; 
  margin: 1.5rem 0;
}

.check-list li {
  /* KORREKTUR: Schafft links Platz für das Häkchen-Icon */
  padding: 0.4rem 0 0.4rem 1.8rem; 
  color: var(--sage-dark);
  font-weight: 600;
  position: relative;
  line-height: 1.4;
}

/* ERGÄNZUNG: Erzeugt das grüne Häkchen-Icon automatisch vor jedem Listenpunkt */
.check-list li::before {
  content: "✓"; /* Oder nutze ein SVG/Icon-Symbol */
  position: absolute;
  left: 0;
  top: 0.35rem; /* Richtet das Häkchen vertikal mittig zur ersten Textzeile aus */
  color: var(--sage); /* Nutzt dein Salbeigrün für das Icon */
  font-size: 1.1rem;
  font-weight: 900;
}

/* ===========================
   CARD GRID
   =========================== */
.card-grid {
  display: grid;
  /* KORREKTUR: Standardmäßig einspaltig für Mobilgeräte */
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* KORREKTUR: Erst ab Tablet/Desktop wird das Grid zweispaltig */
@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  background: var(--white);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.card-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  /* KORREKTUR: Mindestgrößen statt fixer Höhen, um Abschneiden zu verhindern */
  min-height: 60px;
  min-width: 60px;
  font-size: 2.5rem; 
  margin: 0 auto 1.5rem auto; 
}

.card h3 {
  /* KORREKTUR: Leicht vergrößert für eine bessere visuelle Hierarchie */
  font-size: 1.4rem;
  color: var(--sage-dark); /* Konsistente Farbe zu den anderen Sektions-Titeln */
  margin-bottom: 0.8rem;
}

.card p {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.5; /* Ergänzung: Erhöht die Lesbarkeit von mehrzeiligem Text */
}

/* ===========================
   PHILOSOPHIE
   =========================== */
.philosophy-quote {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-style: italic;
  text-align: center;
  color: var(--sage-dark);
  padding: 1rem 0;
  margin: 0 auto 2rem;
  max-width: 650px;
  line-height: 1.4;
  position: relative;
}

/* ERGÄNZUNG: Elegante Anführungszeichen als optisches Highlight */
.philosophy-quote::before {
  content: "„";
  font-size: 4rem;
  color: var(--sage-light);
  line-height: 0;
  display: block;
  margin-bottom: 1.5rem;
  margin-left: -650px;
}


/* ===========================
   TESTIMONIALS
   =========================== */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.testimonial {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  position: relative;
}

.testimonial::before {
  content: '❝';
  font-size: 3rem;
  color: var(--sage-light); /* Hier brach Ihr Code ab – jetzt repariert */
  position: absolute;
  top: 10px;
  left: 16px;
  line-height: 1;
}

.testimonial-text {
  font-style: italic;
  color: var(--text-light);
  margin-bottom: 1rem;
  padding-top: 1.5rem;
}

.testimonial-author {
  font-weight: 600;
  color: var(--sage-dark);
  font-size: 0.9rem;
}

/* ===========================
   KONTAKTFORMULAR
   =========================== */
/* Grund-Layout des Formulars */
.form-card-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Ersetzt alle unschönen <br> Tags automatisch */
  font-family: sans-serif;
  color: #333;
}

/* Raster für die zweispaltigen Zeilen (wird auf Mobilgeräten automatisch einspaltig) */
.form-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* Formularfelder Styling */
.form-card-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-card-field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4a5a54; /* Sanfter Salbei-Dunkelton */
}

.form-card-field .optional {
  font-weight: normal;
  color: #889890;
  font-size: 0.85rem;
}

/* Input, Select & Textarea Style */
.form-card-field input,
.form-card-field select,
.form-card-field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #c2cfc8;
  border-radius: 8px;
  background-color: #fbfcfb;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

/* Fokus-Effekt für Interaktion */
.form-card-field input:focus,
.form-card-field select:focus,
.form-card-field textarea:focus {
  outline: none;
  border-color: #769788; /* Salbeigrün */
  box-shadow: 0 0 0 3px rgba(118, 151, 136, 0.15);
  background-color: #fff;
}

/* Datenschutz Checkbox */
.form-card-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.form-card-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: #769788; /* Färbt die Checkbox salbeigrün */
  cursor: pointer;
}

.form-card-checkbox label {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
  cursor: pointer;
}

.text-link {
  color: #769788;
  text-decoration: underline;
}

/* Footer & Absendebutton */
.form-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eef2f0;
}

.form-card-note {
  font-size: 0.85rem;
  color: #889890;
  margin: 0;
}

/* Button Design */
.btn-sage-send {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #769788; /* Hauptfarbe Salbei */
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 30px; /* Abgerundeter, moderner Button */
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(118, 151, 136, 0.15);
}

.btn-sage-send:hover {
  background-color: #5f7d70; /* Dunklerer Ton beim Drüberfahren */
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(118, 151, 136, 0.25);
}

.btn-sage-send svg {
  transition: transform 0.3s ease;
}

.btn-sage-send:hover svg {
  transform: translate(2px, -2px); /* Lässt das Papierflieger-Icon leicht fliegen */
}


/* ===========================
   MEDIA QUERIES (RESPONSIVE)
   =========================== */

/* Für Tablets und kleinere Bildschirme (max. 992px) */
@media (max-width: 992px) {
  .two-col {
    grid-template-columns: 1fr; /* Wechselt von 2 Spalten auf 1 Spalte */
    gap: 2.5rem;
  }
  
  .card-grid {
    grid-template-columns: 1fr; /* Karten stehen untereinander */
    gap: 1.5rem;
  }
}

/* Für Smartphones (max. 768px) */
@media (max-width: 768px) {
  /* Globale Anpassungen */
  html {
    font-size: 15px; /* Verkleinert die Basis-Schriftgröße leicht */
    scroll-padding-top: 70px; /* Passt den Scroll-Abstand an kleinere Navbars an */
  }

  .section {
    padding: 4rem 1.5rem; /* Weniger Abstand an den Seiten und oben/unten */
  }

  /* Navigation & Header */
  .nav-toggle {
    display: block; /* Aktiviert den Hamburger-Button */
  }

  .nav-links {
    display: none; /* Versteckt die Links (müssen per JavaScript/Klasse geöffnet werden) */
  }

  .page-header {
    padding-top: 130px; /* Weniger Abstand nach oben auf kleinen Bildschirmen */
  }

  .page-header h2 {
    font-size: 1.4rem;
  }

  /* Hero-Bereich */
  .hero {
    height: auto; /* Verhindert abgeschnittenen Text bei langen Inhalten */
    min-height: 500px;
    padding: 120px 1rem 4rem 1rem;
  }

  .hero h1 {
    font-size: 2.3rem; /* Kleinere Überschrift für Smartphones */
  }

  .hero p {
    font-size: 1.1rem;
    margin-bottom: 1.8rem;
  }

  /* Text & Listen */
  .section-title {
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }

  .text-block h2 {
    font-size: 1.6rem;
  }

  .philosophy-quote {
    font-size: 1.3rem;
    padding: 0.5rem 0 0.5rem 1.2rem;
  }
}

/* ===========================
   FOOTER
   =========================== */
.footer {
  background: var(--warm);
  padding: 2rem 0; /* Vertikales Padding exakt auf 2rem gesetzt, horizontales Padding entfernt da nav-container greift */
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 4rem;
  width: 100%;
}

/* KORREKTUR: footer-content durch nav-container ersetzt, damit die Kanten links und rechts exakt wie oben einrasten */
.footer .nav-container {
  display: flex;
  justify-content: space-between; /* Schiebt Text nach links, Links nach rechts */
  align-items: center;
  flex-wrap: wrap; /* Sorgt für automatischen Umbruch auf Smartphones */
  gap: 1.5rem;
  margin: 0 auto;
  width: 100%;
}

.footer p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-light, #666);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  list-style: none; /* Entfernt eventuelle Listenpunkte */
  padding: 0;
  margin: 0;
}

.footer-links a {
  font-size: 0.9rem;
  color: inherit;
  text-decoration: none; /* Entfernt die Standardunterstreichung im normalen Zustand */
  transition: color 0.3s;
}

.footer-links a:hover {
  color: var(--sage-dark);
  text-decoration: underline; /* Unterstreichung erscheint elegant erst beim Drüberfahren (Hover) */
}



/* ==========================================
   RESPONSIVE ANPASSUNGEN (Ganz unten anfügen)
   ========================================== */

/* MOBIL-ANSICHT (Standard für Smartphones) */
@media (max-width: 767px) {
  .nav-container {
    padding: 0.5rem 1rem;
  }

  .logo {
    order: 1;
  }

  .logo img {
    height: 40px;
    width: auto;
  }

  .nav-container .nav-title {
    order: 2;
    margin-left: 0.75rem;
    font-size: 1.2rem;
    white-space: nowrap;
  }

  .nav-links {
    display: none; 
  }
} /* <-- KORREKTUR: Hier hat die Klammer gefehlt! */

/* DESKTOP-ANSICHT (Ab Tablet aufwärts) */
@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
  
  .nav-links {
    display: flex;
  }
} /* <-- KORREKTUR: Hier hat die Klammer gefehlt! */

/* ==========================================
   ERZWUNGENES MOBIL-LAYOUT (ZITATE)
   ========================================== */
@media screen and (max-width: 767px) {
  
  /* 
     KORREKTUR: ':not(.navbar):not(.nav-container)' sorgt dafür, dass dieser 
     Befehl deine Navigation und das Logo oben absolut unberührt lässt!
  */
  .section div:not(.navbar):not(.nav-container), 
  .container:not(.nav-container), 
  [class*="-col"], 
  [class*="grid"] {
    display: block !important;
    width: 100% !important;
  }

  /* Zwingt die weißen Zitat-Karten untereinander und gibt ihnen Abstand */
  .section div:not(.navbar):not(.nav-container) > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 2.5rem !important;
    display: block !important;
    box-sizing: border-box !important;
  }
/* ========================================================
   REPARATUR-BLOCK (Schließt eventuell offene Regeln darüber)
   ======================================================== */
} } 

/* ==========================================
   FINALER FIX: CTA-BOX & CONTAINER ZENTRIEREN
   ========================================== */

/* 1. Zwingt den umschließenden Container, mittig auf der Seite zu stehen */
.section .container.narrow {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 780px !important;
  width: 100% !important;
}

/* 2. Zentriert den Inhalt (Titel, Text, Button) exakt in der Mitte des Containers */
.cta-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;    
  justify-content: center !important;
  text-align: center !important;     
  width: 100% !important;
  margin: 0 auto !important;
}

/* 3. Sichert die Text-Zentrierung für die einzelnen Elemente */
.cta-box h2,
.cta-box p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4. Sichert die kompakte Button-Form in der Mitte */
.cta-box .btn {
  display: inline-block !important;
  width: fit-content !important;
  margin: 1.5rem auto 0 auto !important;
}

/* ========================================================
   ABSOLUTER MOBIL-FIX FÜR DIE IMPRESSUMS-ÜBERSCHRIFT
   ======================================================== */
@media (max-width: 1024px) {
  /* Greift das ALLERERSTE Element direkt unter dem Body an */
  body > *:nth-child(2),
  main,
  section:first-of-type,
  h1:first-of-type {
    /* Zwingt die Sektion mit brutaler Gewalt nach unten */
    margin-top: 140px !important; 
    padding-top: 40px !important;
  }

/* ========================================================
   REPARATUR-BLOCK (Fängt fehlende Klammern von weiter oben ab)
   ======================================================== */
} } 

/* ==========================================
   STANDARD-ABSTAND NACH OBEN FÜR SEITEN-HEADER
   ========================================== */

/* Sorgt auf großen Desktop-Bildschirmen für einen edlen, luftigen Abstand */
.section,
.section-warm,
.section-light,
.page-header {
  /* Schafft Platz für die schwebende Navbar + Atemraum */
  padding-top: 140px !important; 
}

/* Passt den Abstand an, wenn das Fenster kleiner gezogen wird 
   und das Menü zweizeilig nach unten klappt */
@media (max-width: 1024px) {
  .section,
  .section-warm,
  .section-light,
  .page-header {
    padding-top: 190px !important; 
  }
}

/* Regelt den Abstand für Smartphones */
@media (max-width: 767px) {
  .section,
  .section-warm,
  .section-light,
  .page-header {
    padding-top: 110px !important; 
  }

/* ==========================================================================
   FIX: GOOGLE MAPS AN MOBILEN RAHMEN ANPASSEN
   ========================================================================== */

/* Zwingt die Karte, innerhalb des grünen Rahmens zu bleiben */
iframe {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Gibt dem grünen Rahmen auf Handys etwas Luft zum Bildschirmrand */
@media (max-width: 480px) {
  .container.narrow {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ==========================================================================
   KORRIGIERTER FIX FÜR DAS MOBILE MENÜ (open)
   ========================================================================== */

@media (max-width: 767px) {
  .nav-toggle {
    display: block !important; 
    z-index: 2001;            
    position: relative;
  }

  .nav-container .nav-links {
    display: none; 
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: 250px; 
    height: 100vh;
    background-color: var(--cream);
    padding: 80px 2rem 2rem 2rem;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    z-index: 2000;
  }

  .nav-container .nav-links.open {
    display: flex !important;
  }
}