/* ==========================================================================
   Hebammenhaus Goslar – Stylesheet
   --------------------------------------------------------------------------
   Diese eine Datei enthaelt das komplette Aussehen der Website.
   Aufbau (in dieser Reihenfolge):

     1. Farben und Grundwerte
     2. Grundlagen (Schrift, Ueberschriften, Links)
     3. Raster (Container, Zeilen, Spalten)
     4. Bausteine (Buttons, Trennlinie, Abschnitte)
     5. Kopfbereich und Menue
     6. Startbild (Hero)
     7. Inhalts-Bausteine (Karten, Bilderraster, Slider)
     8. Kontaktbereich und Formular
     9. Vorfussbereich und Fussbereich
    10. Fenster (Modals)
    11. Einblend-Animationen
    12. Handy und Tablet (Anpassungen fuer kleine Bildschirme)

   Farben aendern? -> Abschnitt 1. Alles andere greift automatisch darauf zu.
   ========================================================================== */


/* ==========================================================================
   1. Farben und Grundwerte
   ========================================================================== */

:root {
  --gruen:        #586d3b;  /* Hauptfarbe: Ueberschriften, Links, Vorfuss */
  --gruen-dunkel: #445632;  /* Fussbereich */
  --gold:         #efbb6a;  /* Buttons, Akzente */
  --braun:        #956231;  /* Ueberschrift Startbild, Menue-Symbol */
  --salbei:       #a4a684;  /* Akzentfarbe einzelner Ueberschriften */
  --creme:        #f2e2ce;  /* Hintergrund des Menues */
  --text:         #3e3e3e;  /* normale Fliesstexte in h3 */
  --link-hover:   #c5a47e;  /* Linkfarbe beim Darueberfahren */

  --schrift: "Lucida Sans Unicode", sans-serif, Arial, Helvetica, sans-serif;

  --breite:  1200px;        /* maximale Inhaltsbreite */
  --abstand: 12px;          /* Grundabstand des Rasters */

  --kopf-hoehe: 162px;      /* Hoehe des Kopfbereichs (Logo 144px + 2x9px) */
}


/* ==========================================================================
   2. Grundlagen
   ========================================================================== */

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

html { scroll-behavior: smooth; }

/* Kein seitliches Verschieben auf dem Handy.
   Das Menue (.menue-panel) parkt zugeklappt rechts neben dem Bildschirm.
   Ohne diese Zeile laesst sich die Seite auf dem Handy nach rechts
   wegschieben und es entsteht ein leerer weisser Streifen. */
html, body { overflow-x: hidden; }

body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: var(--schrift);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7em;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; border: 0; }

a {
  color: var(--gruen);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover { color: var(--link-hover); }

p { margin: 0 0 1rem; }

hr {
  border: 0;
  border-top: 1px solid rgba(0,0,0,.12);
  margin: 1rem 0;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 8px; font-family: var(--schrift); }

h1 {
  color: var(--gruen);
  font-weight: 100;
  text-transform: uppercase;
  font-size: 3em;
  letter-spacing: .1em;
  line-height: 1.4em;
}

h2 {
  color: var(--gruen);
  font-weight: 100;
  text-transform: uppercase;
  font-size: 2.3em;
  letter-spacing: 0;
  line-height: 1.4em;
}

h3 {
  color: var(--text);
  font-weight: 300;
  font-size: 1.5em;
  line-height: 1.4em;
}

h4 {
  color: var(--braun);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2em;
}

h5 {
  color: var(--gruen);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2em;
  margin-bottom: 18px;
}

/* Hilfsklassen, die im Text haeufig gebraucht werden */
.mittig      { text-align: center; }
.weiss       { color: #fff; }
.nur-desktop { display: block; }


/* ==========================================================================
   3. Raster
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--abstand);
}

.container-weit {
  width: 100%;
  padding: 0 var(--abstand);
}

.zeile {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--abstand) * -1);
}

.spalte      { padding: 0 var(--abstand); width: 100%; }
.spalte-4    { padding: 0 var(--abstand); width: 33.3333%; }
.spalte-6    { padding: 0 var(--abstand); width: 50%; }
.spalte-8    { padding: 0 var(--abstand); width: 66.6667%; }
.spalte-12   { padding: 0 var(--abstand); width: 100%; }


/* ==========================================================================
   4. Bausteine
   ========================================================================== */

/* --- Abschnitte ------------------------------------------------------- */
.abschnitt { position: relative; }

/* Hintergrundbaender mit Parallax-Effekt */
.band {
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  padding: 140px 0;
}
.band-zitat {
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  margin: 27px 0;
  padding: 9%;
}

/* --- Buttons ---------------------------------------------------------- */
.knopf {
  display: inline-block;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 6px;
  color: #fff;
  font-family: var(--schrift);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  padding: 8px 32px;
  margin: 3px 0;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.knopf:hover {
  background: #e9a93f;
  border-color: #e9a93f;
  color: #fff;
}
.knopf-klein { font-size: 14px; padding: 5px 20px; }
.knopf-abstand { margin-top: 3px; }   /* wie im Original: Buttons sitzen dicht am Text */

/* --- Trennlinie mit Blueten-Symbol ------------------------------------ */
.trenner img {
  width: 270px;
  margin: 12px 0 27px;
}


/* ==========================================================================
   5. Kopfbereich und Menue
   ========================================================================== */

.kopf {
  position: relative;
  z-index: 20;
  padding: 9px 0;
  background: transparent;
}

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img { height: 144px; width: auto; display: block; }

/* Mitfahrender Kopfbereich, erscheint beim Scrollen */
.kopf-sticky {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  background: #fff;
  padding: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
  transform: translateY(-100%);
  transition: transform .3s ease;
}
.kopf-sticky.sichtbar { transform: translateY(0); }
.kopf-sticky .logo img { height: 72px; padding: 6px 0; }

/* --- Menue-Symbol (Burger) -------------------------------------------- */
.burger {
  background: none;
  border: 0;
  padding: 0;
  width: 30px;
  height: 24px;
  position: relative;
  cursor: pointer;
}
.burger span,
.burger span::before,
.burger span::after {
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--braun);
  transition: transform .3s ease, opacity .3s ease;
}
.burger span { top: 11px; }
.burger span::before { content: ""; top: -9px; }
.burger span::after  { content: ""; top:  9px; }

/* --- Ausklapp-Menue rechts -------------------------------------------- */
.menue-panel {
  position: fixed;
  top: 0; right: 0;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: var(--creme);
  color: #444;
  z-index: 1100;
  transform: translateX(100%);
  transition: transform .5s ease;
  overflow-y: auto;
  padding: 0 0 40px;
}
.menue-panel.offen { transform: translateX(0); }

.menue-schliessen {
  background: none;
  border: 0;
  padding: 20px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.menue-schliessen span,
.menue-schliessen span::before,
.menue-schliessen span::after {
  display: block;
  width: 30px;
  height: 2px;
  background: var(--gold);
  position: relative;
}
.menue-schliessen span::before { content: ""; position: absolute; top: -9px; }
.menue-schliessen span::after  { content: ""; position: absolute; top:  9px; }

.menue-panel ul { list-style: none; margin: 0; padding: 0; }

.menue-panel > .menue-liste > li > a {
  display: block;
  padding: 10px 20px;
  color: var(--gruen);
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.6em;
}
.menue-panel > .menue-liste > li.aktiv { background: var(--gold); }
.menue-panel > .menue-liste > li.aktiv > a { color: #444; }

.menue-panel .unter-menue li a {
  display: block;
  padding: 5px 20px 5px 36px;
  color: var(--gruen);
  font-size: 15px;
  text-transform: none;
}
.menue-panel .unter-menue li.aktiv > a { font-weight: 600; }

.menue-kontakt {
  padding: 1rem 20px;
  margin-top: .5rem;
  font-size: 14px;
  line-height: 1.6;
}
.menue-kontakt p { margin-bottom: 9px; }
.menue-kontakt img { width: 30px; }

/* Abdunklung hinter dem geoeffneten Menue */
.menue-schatten {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1090;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.menue-schatten.offen { opacity: 1; visibility: visible; }


/* ==========================================================================
   6. Startbild (Hero)
   ========================================================================== */

.hero {
  position: relative;
  margin-top: calc(var(--kopf-hoehe) * -1);
  height: 100vh;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero-bild {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
}
.hero::after {              /* heller Schleier ueber dem Foto */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.18);
}
.hero-inhalt {
  position: relative;
  z-index: 2;
  max-width: 90%;
  padding: 1.5rem;
}
.hero-inhalt h1 { color: var(--braun); }
.hero-inhalt h3 { color: var(--gruen); }
.hero-pfeil img { width: 54px; margin: 12px 0 27px; }

/* Kleinerer Kopfbereich fuer alle Seiten ausser der Startseite */
.seitenkopf {
  position: relative;
  margin-top: calc(var(--kopf-hoehe) * -1);
  height: 66vh;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.seitenkopf .hero-bild { position: absolute; inset: 0; background-size: cover; background-position: center center; }
.seitenkopf::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.18); }


/* ==========================================================================
   7. Inhalts-Bausteine
   ========================================================================== */

/* --- Einleitungsblock ------------------------------------------------- */
.einleitung { padding: 1% 0 8%; background: #fff; }
.einleitung-innen { padding: 0 18%; text-align: center; }

/* Der Begruessungsblock auf der Startseite: gleich viel Luft oben wie unten,
   damit der Text mittig zwischen Startbild und Bildband sitzt. */
.einleitung-start { padding: 72px 0; }

/* Gleicher Abstand zwischen allen Zeilen des Blocks:
   Ueberschrift - Trennlinie - Text - Button */
.einleitung-start .einleitung-innen > * {
  margin-top: 0;
  margin-bottom: 27px;
}
.einleitung-start .einleitung-innen > *:last-child { margin-bottom: 0; }
.einleitung-start .trenner img { margin: 0; }
.einleitung-start .knopf { margin: 0; }

/* Aktuelle Hinweise ueber dem Begruessungsblock ("News").
   Gruen und fett wie der Workshop-Hinweis auf der alten Seite. */
.news {
  color: var(--gruen);
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.4em;
}

.leistungen-kopf { padding-top: 5%; }
.leistungen-kopf-innen { padding: 0 18%; text-align: center; }

/* --- Karten mit rundem Symbolbild ------------------------------------- */
.karten { padding: 1% 0; }

/* Die Karten einer Reihe sind gleich hoch, damit die "weiterlesen"-Buttons
   unten alle auf einer Linie sitzen - auch wenn die Texte verschieden
   lang sind. */
.karten .zeile > [class^="spalte"] { display: flex; }

.karte {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
  text-align: center;
}
.karte img.symbol { width: 180px; margin: 9px 0; }
/* Platz fuer zwei Zeilen Ueberschrift: Eine Karte hat einen Zusatz unter dem
   Titel ("bis ..."). Damit die Texte aller Karten trotzdem auf gleicher Hoehe
   beginnen, bekommen alle Ueberschriften die Hoehe von zwei Zeilen. */
.karte h4 { margin: 0 0 8px; min-height: 2.4em; }
.karte > p:last-child { margin-top: auto; margin-bottom: 0; }

/* --- Bilderraster mit Aufblende beim Darueberfahren ------------------- */
.raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.kachel {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
}
.kachel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.kachel-schleier {
  position: absolute;
  inset: 15px;
  background: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s ease;
}
.kachel:hover .kachel-schleier { opacity: 1; }
.kachel-schleier h4 {
  margin: 0;
  text-align: center;
  line-height: 1.3;
  color: var(--braun);
}

/* --- Stimmen von Eltern (Slider) -------------------------------------- */
.stimmen-abschnitt { padding-bottom: 54px; }
.stimmen { position: relative; }
.stimmen-buehne {
  position: relative;
  aspect-ratio: 8 / 3;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stimme {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.stimme.aktiv { opacity: 1; pointer-events: auto; }
.stimme-innen { max-width: 81%; }
.stimme-innen p { margin: 12px 0 63px; }

.stimmen-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  background: rgba(0,0,0,.3);
  color: rgba(255,255,255,.9);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: background .1s ease-in-out;
  opacity: 0;
}
.stimmen:hover .stimmen-pfeil { opacity: 1; }
.stimmen-pfeil:hover { background: rgba(0,0,0,.5); color: #fff; }
.stimmen-pfeil.links  { left: 0; }
.stimmen-pfeil.rechts { right: 0; }

/* --- Team ------------------------------------------------------------- */
.team-abschnitt { padding: 2% 0; text-align: center; }
.team-abschnitt > .container > img { margin: 45px 0; }

.team-mitglied { text-align: center; padding: 20px; }
.team-mitglied img { border-radius: 50%; margin-bottom: 1rem; }
.team-mitglied h4 { font-size: 1.3rem; }

.bild-rund { border-radius: 50%; }


/* ==========================================================================
   8. Kontaktbereich und Formular
   ========================================================================== */

.kontakt-abschnitt { padding: 5% 0; }
.kontakt-daten { padding: 20px; }
.kontakt-daten p { margin-bottom: 9px; }
.kontakt-daten img { width: 30px; }
.kontakt-daten .instagram img { width: 45px; }

.formular { padding: 20px; }
.formular-zeile { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.feld { padding: 0 8px; margin-bottom: 12px; width: 100%; }
.feld-halb { width: 50%; }

.formular label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--text);
}

.formular input[type="text"],
.formular input[type="email"],
.formular input[type="tel"],
.formular input[type="date"],
.formular textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-family: var(--schrift);
  font-size: 15px;
  font-weight: 300;
  color: var(--text);
  background: #fff;
}
.formular textarea { height: 108px; resize: vertical; }

.formular input:focus,
.formular textarea:focus {
  outline: 0;
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(239,187,106,.25);
}

.auswahl-liste { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.auswahl-liste label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 207px;
  margin: 0;
  font-weight: 300;
}
.auswahl-liste input { accent-color: var(--gold); }

.formular-hinweis { font-size: 13px; color: #6c757d; margin-top: 10px; }

.meldung {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.meldung-ok    { background: #e6efdc; color: #3f5228; border: 1px solid #c5d8ad; }
.meldung-fehler{ background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }


/* ==========================================================================
   9. Vorfussbereich und Fussbereich
   ========================================================================== */

.vorfuss {
  background: var(--gruen);
  color: #fff;
  padding: 3% 0;
}
.vorfuss h3 { color: var(--gold); }
.vorfuss a  { color: var(--gold); }
.vorfuss a:hover { color: var(--creme); }
.vorfuss .knopf { color: #fff; }          /* Button behaelt weisse Schrift */
.vorfuss .knopf:hover { color: #fff; }
.vorfuss ul { list-style: none; margin: 0; padding: 0; }
.vorfuss ul li { margin-bottom: 4px; }
.vorfuss-spalte { padding: 20px; }
.vorfuss hr { border-top-color: rgba(255,255,255,.25); }

.fuss {
  background: var(--gruen-dunkel);
  color: #fff;
  padding: 10px 0;
  text-align: center;
}
.fuss a { color: #fff; }
.fuss a:hover { color: var(--creme); }
.fuss-innen { padding: 4px 0; }

/* Nach-oben-Knopf */
.nach-oben {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.49);
  color: #fff;
  font-size: 20px;
  line-height: 42px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.nach-oben.sichtbar { opacity: 1; visibility: visible; }

/* Wie im Original: den Knopf gibt es nur auf grossen Bildschirmen */
@media (max-width: 767.98px) {
  .nach-oben { display: none; }
}


/* ==========================================================================
   10. Fenster (Modals)
   ========================================================================== */

.fenster {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0,0,0,.6);
  display: none;
  overflow-y: auto;
}
.fenster.offen { display: block; }

.fenster-inhalt {
  background: #fff;
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.fenster-bild {
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}
.fenster-text { padding: 70px; }
.fenster-text h1 { color: var(--gruen); }

/* kleines, mittiges Fenster (z. B. Karte) */
.fenster-klein .fenster-inhalt {
  display: block;
  min-height: 0;
  max-width: 600px;
  margin: 60px auto;
  padding: 30px;
  border-radius: 4px;
}
.fenster-klein iframe { width: 100%; height: 450px; border: 0; }

.fenster-zu {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 0;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  color: #000;
  cursor: pointer;
}

body.fenster-offen { overflow: hidden; }


/* ==========================================================================
   11. Einblend-Animationen
   ========================================================================== */

.einblenden {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}
.einblenden.sichtbar { opacity: 1; transform: none; }

/* Wer Animationen im System abgeschaltet hat, bekommt keine */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .einblenden { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   12. Handy und Tablet
   ========================================================================== */

@media (max-width: 991.98px) {
  body { font-size: 14px; line-height: 1.7em; }
  h1 { font-size: 3rem; letter-spacing: 0; line-height: 1.3em; }
  h2 { font-size: 30px; line-height: 1.3em; }
  h3 { font-size: 24px; line-height: 1.3em; }
  h4 { font-size: 20px; line-height: 1.2em; }

  .spalte-4, .spalte-6, .spalte-8 { width: 100%; }
  .karte > p:last-child { margin-top: 0; }

  .einleitung-innen,
  .leistungen-kopf-innen { padding: 0 2%; }
  .karte { padding: 20px 3%; }

  .raster { grid-template-columns: repeat(2, 1fr); }

  .fenster-inhalt { grid-template-columns: 1fr; }
  .fenster-bild { min-height: 40vh; }
  .fenster-text { padding: 40px 24px; }

  .band, .band-zitat { background-attachment: scroll; }
  .nur-desktop { display: none; }
}

@media (max-width: 767.98px) {
  /* "HEBAMMENHAUS" passt bei 48px nicht in eine Handy-Zeile und wuerde
     ueber den Rand hinauslaufen. */
  h1 { font-size: 2rem; line-height: 1.25em; }
  h3 { font-size: 20px; line-height: 1.2em; }
  h4 { font-size: 18px; }

  /* Formularfelder mindestens 16px: Kleinere Schrift laesst iPhones beim
     Antippen in das Feld hineinzoomen, und die Seite bleibt verschoben. */
  .formular input,
  .formular textarea,
  .formular select { font-size: 16px; }

  .einleitung-innen,
  .leistungen-kopf-innen { padding: 0 1%; }

  .logo img { height: 108px; }
  .kopf-sticky .logo img { height: 60px; }

  .hero { margin-top: -126px; }
  .seitenkopf { margin-top: -126px; height: 50vh; min-height: 300px; }

  .raster { grid-template-columns: 1fr; }

  .feld-halb { width: 100%; }
  .auswahl-liste label { width: 100%; }

  .stimme-innen { max-width: 90%; }
  .stimmen-pfeil { opacity: 1; }

  .fenster-text { padding: 30px 20px; }
  .kontakt-daten, .formular, .vorfuss-spalte { padding: 20px 0; }
}

@media (max-width: 660px) {
  h3 { font-size: 1.1em; }
  .hero h1 { font-size: 2rem; }
}

/* Startbild-Text: auf sehr kleinen Bildschirmen ausgeblendet
   (so war es auch auf der alten Seite – dort zeigt das Handy nur das Foto) */
@media (max-width: 639.98px) {
  .hero-inhalt { display: none; }
}


/* ==========================================================================
   13. Unterseiten
   --------------------------------------------------------------------------
   Bausteine, die nur auf den Unterseiten vorkommen.
   ========================================================================== */

/* --- Kopfbild der Unterseiten (16:9 wie im Original) ------------------- */
.seitenkopf {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.seitenkopf .hero-inhalt { max-width: 50%; }

@media (max-width: 959.98px) {
  .seitenkopf .hero-inhalt { display: none; }
}

/* --- Fliesstext der Unterseiten --------------------------------------- */
.inhalt { max-width: 100%; }
.inhalt h2 { margin-top: 36px; }
.inhalt img { height: auto; }
.inhalt ul, .inhalt ol { padding-left: 1.4em; }
.inhalt li { margin-bottom: .4em; }

/* --- Grosse Uebersichts-Karten (Leistungen) --------------------------- */
.karten-gross { padding-bottom: 54px; }
.karten-gitter {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 140px;
  row-gap: 0;
}
/* durchgehende Trennlinie in der Mitte */
.karten-gitter::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: rgba(0,0,0,.08);
}
/* waagerechte Trennlinie zwischen den Zeilen */
.karte-gross:nth-child(n+3) {
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 35px;
  margin-top: 35px;
}
.karte-gross img { width: 66%; display: block; margin-bottom: 1rem; }
.karte-gross h3 { font-size: 1.5em; margin-bottom: .6rem; }

/* Die Karten einer Reihe sind gleich hoch, damit die "Weiterlesen"-Buttons
   unten auf einer Linie sitzen - auch bei unterschiedlich langen Texten. */
.karte-gross { display: flex; flex-direction: column; }
.karte-gross-text { display: flex; flex-direction: column; flex: 1; }
.karte-gross-text > p:last-child {
  margin-top: auto;      /* schiebt den Button nach unten */
  margin-bottom: 0;
  padding-top: 27px;     /* Mindestabstand zum Text darueber */
}

/* --- Aufklappbare Kursliste ------------------------------------------- */
.aufklapp-abschnitt { padding-bottom: 54px; }
.aufklapp { list-style: none; margin: 0; padding: 0; }

.aufklapp-titel {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 1rem;
  border: 0;
  background: rgba(242,226,207,.5);
  color: var(--braun);
  font-family: var(--schrift);
  font-size: 23px;
  line-height: 23px;
  font-weight: 300;
  text-align: left;
  cursor: pointer;
}
.aufklapp-titel:hover { background: rgba(242,226,207,.9); }

.aufklapp-inhalt {
  display: none;
  padding: 1rem;
  background: rgba(242,226,207,.5);
  overflow: hidden;
}
.aufklapp-posten.offen .aufklapp-inhalt { display: block; }
.aufklapp-inhalt::after { content: ""; display: block; clear: both; }

.aufklapp-bild {
  float: left;
  max-width: 36%;
  margin: 0 2em .5rem 0;
}

@media (max-width: 767.98px) {
  .karten-gitter { grid-template-columns: 1fr; column-gap: 0; }
  .karte-gross-text > p:last-child { margin-top: 0; }
  .karten-gitter::before { display: none; }
  .karte-gross:nth-child(n+2) { border-top: 1px solid rgba(0,0,0,.08); padding-top: 40px; margin-top: 40px; }
  .karte-gross:nth-child(n+3) { padding-top: 40px; margin-top: 40px; }
  .karte-gross img { width: 55%; }
  .aufklapp-bild { float: none; max-width: 100%; margin: 0 0 1rem; }
  .aufklapp-titel { font-size: 19px; line-height: 1.3; }
}

/* --- Aktuelle Kurstermine (zwei Spalten, aufklappbar) ------------------
   Nachbau der Hebamio-Kursliste im Design der Seite. Die Balken sind
   schmaler als bei der grossen Aufklapp-Liste darueber, damit zwei
   Spalten nebeneinander passen. */
.kurstermine-abschnitt { padding-bottom: 54px; }

.kurstermine-titel {
  color: var(--gruen);
  font-weight: 600;
  font-size: 1.2em;
  margin-bottom: .6rem;
}

.kurstermine { list-style: none; margin: 0; padding: 0; }
.kurs-posten { margin-bottom: 12px; }

.kurs-knopf {
  display: block;
  width: 100%;
  padding: 14px 40px 14px 16px;
  border: 0;
  border-radius: 6px;
  background: var(--gruen);
  color: #fff;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.kurs-knopf:hover { background: var(--gruen-dunkel); }

/* Pfeil rechts, dreht sich beim Aufklappen */
.kurs-knopf::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  transition: transform .2s;
}
.kurs-posten.offen .kurs-knopf::after {
  transform: rotate(-135deg);
  margin-top: -3px;
}

.kurs-datum {
  display: block;
  font-weight: 300;
  font-size: 15px;
  margin-top: 2px;
}

.kurs-inhalt {
  display: none;
  padding: 16px;
  border: 1px solid rgba(88,109,59,.25);
  border-top: 0;
  border-radius: 0 0 6px 6px;
}
.kurs-posten.offen .kurs-inhalt { display: block; }

.kurs-daten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .8rem;
  margin: 0 0 .8rem;
}
.kurs-daten dt { font-weight: 600; color: var(--gruen); }
.kurs-daten dd { margin: 0; }

.kurs-status { font-weight: 600; margin: 0 0 .6rem; }
.kurs-status.frei  { color: var(--gruen); }
.kurs-status.belegt { color: var(--braun); }

.kurs-termine-titel,
.kurs-hinweis-titel {
  font-weight: 600;
  color: var(--gruen);
  margin: 1rem 0 .3rem;
}
.kurs-termine { list-style: none; margin: 0; padding: 0; }
.kurs-termine li { padding-left: 1rem; position: relative; }
.kurs-termine li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--salbei);
}

/* --- Kontaktangaben auf der Kontaktseite ------------------------------ */
.kontakt-liste {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: .4rem 1rem;
  margin: 1.5rem 0 0;
  max-width: 640px;
}
.kontakt-liste dt { font-weight: 600; color: var(--gruen); }
.kontakt-liste dd { margin: 0; }

@media (max-width: 575.98px) {
  .kontakt-liste { grid-template-columns: 1fr; gap: 0; }
  .kontakt-liste dt { margin-top: 1rem; }
}

/* --- Zweispaltiger Block (z. B. Text neben Foto auf der Team-Seite) ---- */
.zwei-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin: 0;
}
.zwei-spalten > *:last-child {
  padding-left: 30px;
  border-left: 1px solid rgba(0,0,0,.08);
}
.zwei-spalten img { display: block; }

@media (max-width: 639.98px) {
  .zwei-spalten { grid-template-columns: 1fr; }
  .zwei-spalten > * { padding: 0; border-left: 0; }
  .zwei-spalten > *:last-child { border-left: 0; margin-top: 1.5rem; }
}