@charset "UTF-8";
/* CSS Document */

html {
      scroll-behavior: smooth;
    }

body {
  margin: 0;
  font-family: "Lato", Arial, sans-serif !important;
  font-style: normal;
  color: #005971 !important;
  text-align: center;
  font-size: 1em !important;
}

::selection {
  background-color: rgba(152, 195, 182, 0.3); 
}

::-moz-selection {
  background-color: rgba(152, 195, 182, 0.3);
}

/* Schriftgröße und Schriftstil übernehmen für alle relevanten Elemente */
body,
h1, h2, h3, h4, h5, h6,
p, span, a,
strong, em,
.teaser,
.box-text,
.box-text h3,
.box-text p,
.leistungen,
.leistungen h2,
.leistungen p,
.section,
.section h2,
.section p,
.footer,
.footer p,
.navbar-menu nav ul li a,
.navbar-menu nav.active ul li a {
  font-family: "Lato", Arial, sans-serif !important;
}

a:link, a:active, a:visited {text-decoration: none; color: #005971}
a:hover {text-decoration:underline; color: #98c3b6; font-weight: 500;}

/* Schriftgröße auf Tablets */
@media screen and (min-width: 768px) {
  body {
    font-size: 1.2em !important;
  }
}

/* Schriftgröße auf großen Bildschirmen */
@media screen and (min-width: 992px) {
  body {
    font-size: 1.5em !important;
  }
  .navbar-menu nav ul li a {
    font-size: 0.8em !important;
  }
}

/* Schriftgröße auf sehr großen Bildschirmen */
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em !important;
  }
 
}


h1, h2, h3 {font-weight: normal !important;}

h1 {font-family: 'Runalto', serif !important;  font-size: 2em;}

@media screen and (max-width: 768px) {
h1 {font-size: 1.8em !important;}
}


.gold-list {
  list-style: none;
  padding-left: 0;
}

.gold-list li {
  position: relative;
  margin-left: 1.2em; /* Abstand vom Punkt zum Text */
  margin-bottom: 0.8em;
}

.gold-list li::before {
  content: '';
  position: absolute;
  left: -1.2em;
  top: 0.25em;
  width: 0.6em;
  height: 0.6em;
  background: linear-gradient(45deg, #cb903b, #c2a963);
  border-radius: 50%;
}





.hero-wrapper {
  width: 100%;
  background-color: #b0d9d0; 
  overflow: hidden;
}

.hero {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}


.hero img {
  max-height: 250px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Größeres Hero-Bild nur auf Startseite */
body.startseite .hero img {
  max-height: 600px; /* oder deine gewünschte Höhe */
}


/* Mobil-Version: mehr Höhe, links beschnitten */
@media screen and (max-width: 767px) {
  .hero {
    height: 250px;
    overflow: hidden;
  }

  .hero img {
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }
	
}




.teaser {max-width: 500px !important; text-align: center; margin: 0 auto; padding: 40px 20px 20px 20px; font-family: 'Runalto', serif !important;  font-size: 1.2em; font-weight: 600 !important; }


@media screen and (min-width: 767px) {
.teaser {font-size: 1.1em; font-weight: normal !important; }
}

@media screen and (min-width: 992px) {
.teaser {max-width: 650px !important;}
}



#start-bereiche {
  max-width: 1366px !important;
  margin: 0 auto;
  padding-bottom: 100px;
}


@media screen and (max-width: 767px) {
 #start-bereiche {margin-bottom: 40px; }
}



#start-bereich-psychotherapie, #start-bereich-maternity { outline: 10px solid #b0d9d0; outline-offset: -10px; background-color: white;}

#start-bereich-maternity { background-color: #007494; color: white;}

#start-bereich-maternity img { padding-top: 50px;}

#start-bereich-psychotherapie img { padding-top: 20px;}

#start-bereich-psychotherapie .box-text, #start-bereich-maternity .box-text { margin-top: -20px;}

@media screen and (max-width: 919px) {
 #start-bereich-psychotherapie .box-text, #start-bereich-maternity .box-text { margin-top: 0px;}
}




#start-psychotherapie, #start-fuer, #start-ueber, #start-elbsterfahrung, #start-publikationen, #start-kontakt, #start-impressum, #start-datenschutz { outline: 10px solid #b0d9d0; outline-offset: -10px; background-color: white; margin: 20px;}

/* Kontaktseite: Begrenzung auf 950px */
#start-kontakt .kontakt-inhalt {
  max-width: 950px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

#start-datenschutz {font-size: 0.7em;}


.box-text {margin: auto auto 0 auto; max-width: 450px;}

#psychotherapie .box-text, #selbsterfahrung .box-text {margin: auto auto 0 auto; max-width: 950px;}
#fuer .box-text, #start-ueber .box-text, #publikationen .box-text, #start-kontakt .box-text, #start-impressum .box-text, #start-datenschutz .box-text {margin: auto auto 0 auto; max-width: 950px; text-align: left;}

#fuer li, #ueber li, #datenschutz {text-align: left}


.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.grid-item {
  background: #fff;
  padding: 20px;
  margin-bottom: 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.box-bild img {
  width: 100% !important;
  max-width: 400px !important;
  height: auto;
  margin-bottom: 20px;
}


.box-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-top: 20px;
}

.box-spalte {
  text-align: left;
}


@media screen and (max-width: 768px) {
  .box-spalten {
    grid-template-columns: 1fr; 
  }
  .box-spalte {
  text-align: center !important;
	}
}

#fuer .box-spalte, #ueber .box-spalte, #publikationen .box-spalte, #kontakt .box-spalte {font-size: 0.8em}

@media screen and (max-width: 768px) {
	#fuer .box-spalte, #ueber .box-spalte, #publikationen .box-spalte, #kontakt .box-spalte {font-size: 1em}
}


/* Nur die untere Bildreihe in #start-ueber zweispaltig (auch mobil) */
#start-ueber .bilderreihe {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Zwei gleich breite Spalten */
  gap: 20px;
  padding-top: 20px;
}

/* Bildspalten zentrieren den Inhalt */
#start-ueber .bilderreihe .box-spalte {
  display: flex;
  justify-content: center; /* Bild horizontal zentriert */
  align-items: flex-start; /* Oben ausgerichtet */
}

/* Bilder selbst: volle Breite innerhalb der Spalte */
#start-ueber .bilderreihe .box-spalte img {
  width: 100%;
  max-width: 100% !important; /* überschreibt das globale 400px-Limit */
  height: auto;
  display: block;
  margin: 0;
}

/* Bildunterschrift stilisieren */
#start-ueber .bilderreihe figure {
  margin: 0;
}

#start-ueber .bilderreihe figcaption {
  font-size: 0.75em !important;
  margin-top: 8px;
  line-height: 1.4;
  font-style: italic !important;
  font-weight: 500 !important;
}


#start-ueber h2, #start-fuer h2, #start-kontakt h2 {
  text-align: left;
}

@media screen and (max-width: 768px) {
	#start-kontakt h2 {text-align: center !important;}
}



/* Ab Tablet-Größe nebeneinander: 2/3 – 1/3 */
@media screen and (min-width: 768px) {
  #publikationen .box-spalten {
    grid-template-columns: 2fr 1fr;
  }
}


#publikationen .box-spalte:nth-child(1) {
  /* linke Spalte */
 
}

#publikationen .box-spalte:nth-child(2) {
  /* rechte Spalte 	*/
  color: #007494 !important;
  font-weight: 500 !important;
}

#publikationen .box-spalte:nth-child(2) h2 {
  color: #98c3b6 !important;
}


/* Mobil: Bild zentriert */
#publikationen .box-spalte:nth-child(2) .box-bild {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

#publikationen .box-spalte:nth-child(2) .box-bild img {
  max-width: 60% !important;
  height: auto !important;
}

/* Ab Tablet: Bild linksbündig und halb so breit */
@media screen and (min-width: 768px) {
  #publikationen .box-spalte:nth-child(2) .box-bild {
    display: block !important;
  }

  #publikationen .box-spalte:nth-child(2) .box-bild img {
    max-width: 50% !important;
    display: block !important;
    margin: 0 !important;
  }
}



/* Ab Tablet: Button linksbündig */
@media screen and (min-width: 768px) {
  #publikationen .box-spalte:nth-child(2) .box-button {
    display: inline-block;
    margin-left: 0;
    margin-right: 0;
  }
}

#publikationen hr {background-color: #98c3b6 !important; margin-bottom: 25px; border: none; height:2px; width: 50%}

@media screen and (min-width: 768px) {
  #publikationen hr {width: 100%}
}


.box-button {
  background-color: #b0d9d0; 
  border: none;
  padding: 10px 20px;
  margin:20px;
  color: #005971;
  font-size: 1em;
  cursor: pointer;
  margin-top: 20px;
  align-self: center;
  text-decoration: none;
  display: inline-block;
}


.box-button:hover, .box-button:focus, .box-button:active {
  background-color: #b0d9d0;
  text-decoration: none;
  color: white;
}



.box-zitat {
  max-width: 800px;
  margin: 20px auto;
  text-align: center;
}

.zitat-text {
  color: #98c3b6;
  font-style: italic;
  font-size: 1em;
  font-weight: 400 !important; 
  margin-bottom: 10px;
}

.zitat-author {
  font-size: 0.7em;
  color: #005971;
  font-weight: 400;
}


address {
  font-style: normal;
}


/* Credits Block */
.credits {
    max-width: 992px;
    margin: 0 auto;
    margin-top: 40px;
    text-align: center;
    
}

/* Credits Text: p, strong, a → explizit überschreiben */
.credits p,
.credits p strong,
.credits p a {
    font-size: 1em !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

@media (min-width: 992px) {
    .credits p,
    .credits p strong,
    .credits p a {
    font-size: 0.85em !important;
    }
}


/* Credits HR → Bootstrap komplett übersteuern */
.credits hr {
    display: block !important;
    background-color: #98c3b6 !important;
    height: 2px !important;
    width: 50% !important;
    margin: 25px auto !important;
    border: none !important;
    padding: 0 !important;
    box-sizing: content-box !important;
    overflow: visible !important;
}



/* Footer Layout */
footer {
  background-color: rgba(152, 195, 182, 0.3);
  padding: 40px 20px;
  text-align: left;
  font-size: 0.8em !important; 
}

footer a:link, footer a:active, footer a:visited, footer a:hover {color: #005971 !important; text-decoration: none !important; }

footer a:hover {font-weight: 500;}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
}

.footer-col {
  flex: 1 1 30%;
  min-width: 200px;
}

.footer-col h4 {
  margin-bottom: 10px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 5px;
}

.footer-col a {
  color: white;
  text-decoration: none;
}

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

.footer-col:nth-child(2) {
  text-align: center;
}

.footer-col:nth-child(3) {
  text-align: right;
}


@media screen and (max-width: 768px) {
	footer {font-size: 1em !important; }
	
  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .footer-col {
    margin-bottom: 30px;
	text-align: center !important;
	order: initial; /* Reihenfolge zurücksetzen auf Mobil */
  }
	
.footer-col:nth-child(2) {
  order: 3; /* Mittlere Spalte zuletzt */
}

.footer-col:nth-child(3) {
  order: 2;
}
	
p, span, li, a {
    font-weight: 500 !important;
}

	
}