@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700&display=swap");

/*---------------
Table of contents:
01. Global
02. Preloader
03. Scroll Up
04. Navigation
05. Banner
06. About
07. Feature
08. Service
09. Counter
10. Menu
11. Faq
12. Blog
13. Review
14. Events
15. Footer
16. Inner Page
17. About Us Page
18. Menu Page
19. Blog Page
20. Contact Page
---------------*/
/*--------------------------------------------------------------------
Global
---------------------------------------------------------------------*/
body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  background: #fff; }

body::-webkit-scrollbar {
  width: 12px; }

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 5px; }

body::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #cee1fb, #00429b);
  border-radius: 5px; }

h1 {
  font-size: 48px; }

h2 {
  font-size: 36px;
  margin-bottom: 15px; /* Abstand nach unten */}

h3 {
  font-size: 28px; }

h4 {
  font-size: 22px; }

h5 {
  font-size: 18px; }

h6 {
  font-size: 16px; }

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
  margin: 0; }

small {
  font-size: 12px; }

h5.title {
    font-size: 20px; /* kleinere Schriftgröße */
    /*font-weight: normal;  optional, falls es nicht fett sein soll */
    line-height: 1.4; /* optional für besseren Zeilenabstand */
}

h2.subtitle {
    margin-bottom: 10px; /* Abstand nach unten */
}

@media (max-width: 768px) {
    body {
        font-size: 14px; /* Kleinere Schrift für mobilen Text */
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 26px; /* Verkleinert große Überschriften */
    }
    
    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 16px;
    }

    h5, h6 {
        font-size: 14px;
    }
}

.slogan {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  display: inline-block; }

i,
svg {
  display: inline-block;
  pointer-events: none; }

img {
  max-width: 100%; }

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0; }

.content ul,
.content ol {
  list-style: disc;       /* normale Punkte */
  padding-left: 5px;     /* Einrückung */
  margin-left: 20px;
  color: #333333;
  margin-bottom: 10px; /* Abstand nach der gesamten Liste */
}

iframe {
  width: 100%; }

figure {
  position: relative; }
  figure img {
    display: block;
    width: 100%;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; }

hr {
  height: 2px !important;
  opacity: 1; }

.blockquote-footer {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #333333;
  text-align: right;
  margin: 0; }

.btn:focus,
.navbar-toggler i {
  /*color: black !important; */      /* Farbe auf Schwarz setzen */
  color: #555555 !important; /* Dunkelgrau */
  font-size: 48px !important; /* Größe der Striche erhöhen */
  font-weight: bold !important; /* Falls das Icon dünn wirkt, macht es dicker */
  z-index: 99999 !important; /* Bringt das Menü in den Vordergrund */
}

.form-control:focus,
.accordion-button:focus {
 z-index: 2300; 
 box-shadow: none; }

.card {
  border-radius: 5px; }

.card-title {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  z-index: 900; 
  color: #363637; }

.pagination .page-link {
  color: #363637;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }
.pagination .page-link:hover,
.pagination .page-link.active {
  color: #393939;
  background: #e8f5fc; }

.accordion-item {
  border: 1px solid #e8f5fc;
  border-radius: 5px; }

.accordion-item:not(:last-child) {
  margin-bottom: 16px; }

.accordion-button {
  font-weight: 500;
  color: #99231f !important;   /* color: #e8f5fc */
  border: none;
  background: transparent; }

.accordion-button:not(.collapsed) {
  background: transparent; }

.accordion-button:not(.collapsed)::after {
  background-image: url(../css/chevron-down.svg); }

.accordion-button::after {
  background-image: url(../css/chevron-down.svg); }

.accordion-body {
  padding-top: 0; }

.owl-carousel .owl-item img {
  width: fit-content; }

.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 30px; }

.section-padding, .banner-part, .about-single, .feature-part, .service-part, .foodmenu-part, .faq-part, .blog-part, .review-part, .event-part, .contact {
  padding: 30px 0; }

.about-single h2 {
    margin-bottom: 30px; /* Abstand zwischen h2 und h5 */
}

.about-single h5.title {
    margin-bottom: 25px; /* Abstand zwischen h5 und dem <p>-Text */
}

.display-flex, .blog-single .card-footer, .blog-single .card-footer .blog-author, .blog-single .card-footer .blog-date {
  display: flex;
  align-items: center;
  justify-content: space-between; }

.button, .btn-brown, .btn-brown-outline, .btn-coffee-outline {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff       !important;  /*--  bitte nicht ändern Button Hintergrundfarbe  --*/
  letter-spacing: 2px;
  /*--   text-transform: uppercase;  --*/
  padding: 12px 24px;
  min-width: 180px;
  overflow: hidden;
  position: relative;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }

.button::after, .btn-brown::after, .btn-brown-outline::after, .btn-coffee-outline::after {
  content: "\f0a4";
  font-family: "Font Awesome 5 Free";  /*-- Nicht ändern -  Handpfeil --*/
  font-size: 16px;
  font-weight: 400;
  color: #fff;  /*--   Button Handpfeil Farbe --*/
  position: absolute;
  top: 50%;
  right: -20px;
  opacity: 0;
  transform: translateY(-50%);
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }

.button:hover, .btn-brown:hover, .btn-brown-outline:hover, .btn-coffee-outline:hover {
  padding-right: 24px;
  padding-left: 8px; }

.button:hover::after, .btn-brown:hover::after, .btn-brown-outline:hover::after, .btn-coffee-outline:hover::after {
  opacity: 1;
  right: 10px; }

.btn-brown {
  background: #00429b; }

.btn-brown-outline {
  background: transparent;
  border: 1px solid #00429b; }

.btn-brown-outline:hover {
  background: #00429b; }

.btn-coffee-outline {
  color: #1a1b1b !important;
  background: transparent;
  border: 1px solid #00429b; }

.btn-coffee-outline:hover {
  color: #fff !important;
  background: #00429b; }

.subtitle {
  font-family: "Nunito", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #363637;
  letter-spacing: 2px;
  /*--  text-transform: uppercase; --*/
  margin-bottom: 16px; }

.title {
  font-family: "Nunito", sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #333333;
  text-transform: none; }

@media (max-width: 991.98px) {
    .navmenu {
        margin-top: 20px; /* Mehr Abstand zwischen Logo und Menü */
    }

    .navmenu li {
        border-bottom: 2px solid #ddd; /* Trennstrich zwischen den Menüpunkten */
        padding: 10px 0; /* Etwas mehr Platz pro Menüpunkt */
    }

    .navmenu li:last-child {
        border-bottom: none; /* Entfernt den Strich unter dem letzten Menüpunkt */
    }

    .navmenu li a {
        padding: 12px 15px; /* Mehr Platz für bessere Lesbarkeit */
        display: block;
        color: #373837; /* Standardfarbe */
        text-align: left;
        transition: color 0.3s ease-in-out, border-bottom 0.3s ease-in-out;
    }

    /* AKTIVER & HOVER-EFFEKT */
    .navmenu li a:hover,
    .navmenu li a.active {
        color: #00429b !important; /* Blau für aktiven und hover Link */
        background-color: rgba(0, 66, 155, 0.1); /* Leichter blauer Hintergrund */
        /*border-left: 4px solid #00429b; */      /* Blaue Markierung links für aktive/hovers */
        border-left: none !important; /* Entfernt den Balkenstrich */
        padding-left: 0 !important;  /* Falls Abstand durch border-left entstanden ist */
    }
}
  .subtitle {
    font-size: 16px; } 
.title-gradient, .banner-wrapper .coffeeshop {
  background: linear-gradient(#4283dc, #00429b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

.headline {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #171717;
  text-transform: none;
  margin-bottom: 16px;
  max-height: 24px;
  overflow: hidden; }

.load-more {
  margin-top: 50px;
  text-align: center; }

.box, .service-single, .menu-single, .blog-single, .event-single, .team-single {
  text-align: center;
  margin-top: 50px;
  border: 1px solid #d5d5d5;
  border-radius: 5px;
  position: relative;
  z-index: 1;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .box figure, .service-single figure, .menu-single figure, .blog-single figure, .event-single figure, .team-single figure {
    overflow: hidden; }
  .box p, .service-single p, .menu-single p, .blog-single p, .event-single p, .team-single p {
    height: 90px;
    overflow: hidden; }

/*--------------------------------------------------------------------
Preloader
---------------------------------------------------------------------*/
#preloader {
  background: #fff;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; }

.loader-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.loader {
  width: 120px;
  height: 120px;
  margin: 30px auto 0;
  position: relative;
  animation: rotate 3s ease-out infinite; }
  .loader div {
    background-color: #00429b;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%);
    position: absolute;
    animation: scale 2s ease-in infinite; }
  .loader div:nth-child(1) {
    top: 0%;
    left: 50%; }
  .loader div:nth-child(2) {
    top: 9%;
    left: 78%;
    animation-delay: 0.4s; }
  .loader div:nth-child(3) {
    top: 30%;
    left: 96%;
    animation-delay: 0.8s; }
  .loader div:nth-child(4) {
    top: 58%;
    left: 100%;
    animation-delay: 1.2s; }
  .loader div:nth-child(5) {
    top: 84%;
    left: 88%;
    animation-delay: 1.6s; }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  65% {
    transform: rotate(180deg); }
  95%,
    100% {
    transform: rotate(360deg); } }
@keyframes scale {
  0%,
    60%,
    100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%); }
  30% {
    border-radius: 10%;
    opacity: 0.5;
    transform: scale(1.5) translate(-50%, -50%); } }

/*--------------------------------------------------------------------
Scroll Up
---------------------------------------------------------------------*/
#scrollUp {
  color: #fff;/*-----------ScrollUp Balken rechts ------*/
  line-height: 30px;
  padding: 0;
  border-radius: 5px 5px 0 0;
  background: #00429b;
  height: 30px;
  margin-bottom: 0;
  z-index: 100 !important;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }

#scrollUp:hover {
  height: 50px; }

/*--------------------------------------------------------------------
Navigation
---------------------------------------------------------------------*/
/* ======================
   NAVIGATION (Fixiert & Sichtbar)
   ====================== */
.main-header {
    background-image: url('../images/background/banner.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 100vh; /* Höhe des Headers */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Inhalt mittig */
    padding-top: 120px; /* Abstand für Desktop */
}

/* Desktop: Text weiter oben */
.index-page .banner-wrapper {
    padding-top: 40px;
    background-color: rgba(255, 255, 255, 0.6); /* Web 2.0 halbtransparenter Hintergrund */
    padding: 20px;
    border-radius: 8px;
    max-width: 600px; /* Textblock begrenzen */
}

/* Tablet */
@media (max-width: 991px) {
    .main-header {
        min-height: 70vh;
        background-position: top center;
    }
}

/* Mobile: Abstand, kleinere Höhe, mobiles Bannerbild */
@media (max-width: 768px) {
    .main-header {
        min-height: 60vh;
        padding-top: 80px;
        background-image: url('../images/background/banner-mobile.jpg'); /* Optimiertes Mobile-Bild */
    }

    .index-page .banner-wrapper {
        padding-top: 120px;
        padding: 15px;
        font-size: 0.95rem;
    }
}
/* ======================
   NAVIGATION (Fixiert)
   ====================== */
.navigation {
    padding: 20px 0; /* Mehr Abstand, falls Logo groß ist */
}

/* ======================
   NAVIGATIONSMENÜ
   ====================== */
.navmenu li a {
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #373837;
    letter-spacing: 2px;
    padding: 0 !important;
    margin: 0 20px;
    position: relative;
    z-index: 1200;
    transition: all 0.3s ease;
}

.navmenu li:last-child a {
    margin-right: 0 !important;
}

/* Hover-Effekt */
.navmenu li a::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00429b;
    height: 2px;
    transform: translateY(4px) scale(0);
    transition: all 0.3s ease;
}

.navmenu li a:hover,
.navmenu li a.active {
    color: #00429b;
}

.navmenu li a:hover::before,
.navmenu li a.active::before {
    transform: translateY(4px) scale(1);
}

/* ======================
   BANNER-TEXTBLOCK WEITER NACH UNTEN VERSCHIEBEN
   ====================== */
.banner-wrapper {
    color: #333333;
    position: relative;
    z-index: 20;
    margin-top: 100px; /* TEXTBLOCK WEITER NACH UNTEN VERSCHIEBEN */
    text-align: left;
}

/* Banner-Text */
.banner-wrapper .typedText {
    font-family: "Nunito", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #171717;
    letter-spacing: 2px;
    z-index: 20; 
    margin-bottom: 16px;
    display: block;
}

/* Banner-Ãœberschrift */
.banner-wrapper h1 {
    font-family: "Nunito", sans-serif;
    font-size: 55px;
    font-weight: 700;
    color: #171717;
    margin-bottom: 16px;
    padding-top: 20px; /* Noch etwas mehr Abstand nach oben */
}

/* Untertitel-Text */
.banner-wrapper p {
    margin-bottom: 20px;
    max-width: 400px;
}

/* Button-Styling */
.banner-wrapper .btn-brown-outline::after {
    content: '\f562';
    font-weight: 900;
}

/* ======================
   RESPONSIVE DESIGN (MOBILE FIX)
   ====================== */
@media (max-width: 767.98px) {
    .banner-wrapper .typedText {
        min-height: 60px;
    }

    .banner-wrapper h1 {
        font-size: 30px;
        max-width: 450px;
    }

    .main-header {
        padding-top: 100px; /* Auch auf mobilen Geräten mehr Abstand */
    }

    .banner-wrapper {
        margin-top: 80px; /* Auch auf mobilen Geräten mehr Abstand */
    }
}
/*--------------------------------------------------------------------
YouTube video 
---------------------------------------------------------------------*/
/* Styling für das YouTube-Video-Thumbnail */
.video-thumbnail {
    text-align: center;
    margin: 15px 0; /* Abstand oben und unten */
}

.video-img {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Abgerundete Ecken für modernes Design */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.video-thumbnail a:hover .video-img {
    transform: scale(1.05); /* Leichtes Vergrößern beim Hover */
    opacity: 0.85; /* Leichte Abdunklung für einen schönen Effekt */
}


/*--------------------------------------------------------------------
Menu
---------------------------------------------------------------------*/
.menu-single {
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }

.price-tag {
  color: #fff;
  text-align: center;
  padding: 8px;
  min-width: 80px;
  border-radius: 0 30px 30px 0;
  display: inline-block;
  position: absolute;

  top: 10px;
  left: 0;
  background: linear-gradient(#00429b, #5d6684); }

.menu-single:hover {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }
  .menu-single:hover img {
    transform: scale(1.2); }

/*--------------------------------------------------------------------*/
 /*--------------------------------------------------------------------
Footer
---------------------------------------------------------------------*/
footer {
    margin-top: 0;
    width: 100%;
    background-image: url('../images/background/footer-balken.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    background-color: #fff;
    padding-top: 100px;
    padding-bottom: 60px;
}

/* Tablet */
@media (max-width: 991px) {
    footer {
        background-size: cover;  /* Bild passt sich an Höhe an */
        background-position: top;
        padding-top: 80px;
    }
}

/* Smartphone */
@media (max-width: 576px) {
    footer {
        background-size: contain; /* Bild vollständig anzeigen */
        background-position: top center;
        padding-top: 60px;
        padding-bottom: 40px;
    }
}

.footer-logo {
    display: flex;
    align-items: flex-start;  /* Logo oben ausrichten */
    justify-content: center;
    padding-top: 0;  /* Falls extra Padding stört */
}

.footer-row {
    display: flex;
    align-items: flex-start; /* Alle Elemente oben ausrichten */
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-contact,
.footer-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-links h2 {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.footer-links ul li a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 5px 0;
}

.footer-links ul li a:hover {
    color: #333333;
}

/* Mobile */
@media (max-width: 768px) {
    .footer-row {
        flex-direction: column;
        text-align: center;
    }
    .footer-logo {
        margin-bottom: 20px;
    }
    .footer-links {
        margin-top: 20px;
    }
}
/*--------------------------------------------------------------------*/

/* ======================
   HEADER FÃœR COACHING-SEITE FIXEN
   ====================== */
/* .inner-header-coaching {
    background-image: url("../images/background/banner-coaching.jpg"); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 70vh; 
    position: relative;
    z-index: 1;
    padding-top: 150px; 
} */

.inner-header-coaching {
    background-image: url("../images/background/banner-coaching-large.jpg"); /* Korrektes Bannerbild */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 70vh; /* Banner größer machen */
    position: relative;
    z-index: 1;
    padding-top: 150px; /* Verschiebt das Bild weiter nach unten */
}


/* Tablet */
@media (max-width: 991px) {
  .inner-header-coaching {
    min-height: 50vh;   /* statt 70% nur 50% Bildschirmhöhe */
    padding-top: 100px; /* Text etwas weiter nach oben */
  }
}

/* Handy */
@media (max-width: 576px) {
  .inner-header-coaching {
    min-height: 30vh;   /* auf Handy noch kleiner */
    padding-top: 60px;  /* Text weiter nach oben */
    background-position: top center; /* Bild oben zentrieren */
  }
}
/* ======================
   HEADER FÃœR QUALIFIKATION-SEITE FIXEN
   ====================== */
.inner-header-qualifikation {
    background-image: url("../images/background/banner-qualifikation-large.jpg"); /* Korrektes Bannerbild */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 70vh; /* Banner größer machen */
    position: relative;
    z-index: 1;
    padding-top: 150px; /* Verschiebt das Bild weiter nach unten */
}


/* Tablet */
@media (max-width: 991px) {
  .inner-header-qualifikation {
    min-height: 50vh;   /* statt 70% nur 50% Bildschirmhöhe */
    padding-top: 100px; /* Text etwas weiter nach oben */
  }
}

/* Handy */
@media (max-width: 576px) {
  .inner-header-qualifikation {
    min-height: 30vh;   /* auf Handy noch kleiner */
    padding-top: 60px;  /* Text weiter nach oben */
    background-position: top center; /* Bild oben zentrieren */
  }
}

/* ======================
   HEADER FÃœR Mediation-SEITE FIXEN
   ====================== */
.inner-header-mediation {
    background-image: url("../images/background/inner-mediation.jpg"); /* Korrektes Bannerbild */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 70vh; /* Banner größer machen */
    position: relative;
    z-index: 1;
    padding-top: 150px; /* Verschiebt das Bild weiter nach unten */
}
/* Tablet */
@media (max-width: 991px) {
  .inner-header-mediation {
    min-height: 50vh;   /* statt 70% nur 50% Bildschirmhöhe */
    padding-top: 100px; /* Text etwas weiter nach oben */
  }
}

/* Handy */
@media (max-width: 576px) {
  .inner-header-mediation {
    min-height: 30vh;   /* auf Handy noch kleiner */
    padding-top: 60px;  /* Text weiter nach oben */
    background-position: top center; /* Bild oben zentrieren */
  }
}

/* ======================
   HEADER FÃœR IMPRESSUM-SEITE FIXEN
   ====================== */
.inner-header-impressum {
    background-image: url("../images/background/banner-impressum.jpg"); /* Korrektes Bannerbild */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 70vh; /* Banner größer machen */
    position: relative;
    z-index: 1;
    padding-top: 150px; /* Verschiebt das Bild weiter nach unten */
}
/* Tablet */
@media (max-width: 991px) {
  .inner-header-impressum {
    min-height: 50vh;   /* statt 70% nur 50% Bildschirmhöhe */
    padding-top: 100px; /* Text etwas weiter nach oben */
  }
}

/* Handy */
@media (max-width: 576px) {
  .inner-header-impressum {
    min-height: 30vh;   /* auf Handy noch kleiner */
    padding-top: 60px;  /* Text weiter nach oben */
    background-position: top center; /* Bild oben zentrieren */
  }
}
/* ======================
   HEADER FÃœR DATENSCHUTZ-SEITE FIXEN
   ====================== */
.inner-header-datenschutz {
    background-image: url("../images/background/banner-datenschutz.jpg"); /* Korrektes Bannerbild */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 70vh; /* Banner größer machen */
    position: relative;
    z-index: 1;
    padding-top: 150px; /* Verschiebt das Bild weiter nach unten */
}
/* Tablet */
@media (max-width: 991px) {
  .inner-header-datenschutz {
    min-height: 50vh;   /* statt 70% nur 50% Bildschirmhöhe */
    padding-top: 100px; /* Text etwas weiter nach oben */
  }
}

/* Handy */
@media (max-width: 576px) {
  .inner-header-datenschutz {
    min-height: 30vh;   /* auf Handy noch kleiner */
    padding-top: 60px;  /* Text weiter nach oben */
    background-position: top center; /* Bild oben zentrieren */
  }
}

/* ======================
   BANNER & TEXTBLOCK KORRIGIEREN
   ====================== */
.inner-header-coaching .inner-banner-coaching .inner-header-qualifikation .inner-banner-qualifikation .inner-banner-mediation .inner-header-mediation {
    height: 100vh; /* Bannerhöhe */
    max-height: 400px;
    display: flex;
    align-items: center; /* Zentriert den Text vertikal */
    justify-content: center; /* Zentriert den Text horizontal */
    position: relative;
    z-index: 3; /* Über dem weißen Streifen */
}

/* Handy */
@media (max-width: 576px) {
  .inner-header-mediation,
  .inner-header-qualifikation,
  .inner-header-coaching {
      margin-top: 70px;  /* kleinere Höhe für Smartphone */
  }
}

/* Tablet */
@media (max-width: 991px) {
  .inner-header-mediation,
  .inner-header-qualifikation,
  .inner-header-coaching {
      margin-top: 80px;  /* etwas mehr für Tablet */
  }
}
/* ======================
   NAVIGATION FIXIEREN, ABER MITSROLLEN LASSEN
   ====================== */
.navbar {
    position: absolute; /* NICHT fixed, damit es mitscrollt */
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95); /* Leicht transparent */
    z-index: 5000; /* Ãœber allem */
}



/* ======================
   HEADER & NAVIGATION FIX
   ====================== */

.navbar {
    position: fixed;    /* bleibt immer oben sichtbar */
    top: 0;
    width: 100%;
    z-index: 5000;
}

.logo img {
    display: block;
    margin: 0 auto;
    z-index: 3200; /* Sicherstellen, dass das Logo über dem Balken bleibt */
    position: relative;
}


/* ======================
   BANNER & BREADCRUMB FIX
   ====================== */
.banner-wrapper {
    text-align: left;
    padding: 380px 0 0px;
    z-index: 2500; /* Ãœber dem Logo und Balken */
}

.breadcrumb {
    position: relative; /* Positionieren im normalen Fluss */
    margin-top: 5px; /* Etwas Abstand über dem Breadcrumb */
    z-index: 2700; /* Ãœber dem Banner, aber unter der Navbar */
    color: #212020;
    font-size: 12px; /* Noch kleinere Schrift */
    padding: 3px 6px; /* Weniger Innenabstand */
    /*padding: 5px 10px;*/

    /*text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);*/
    background: rgba(255, 255, 255, 0.5); /* Halbdurchsichtiger Hintergrund für bessere Lesbarkeit */

    border-radius: 5px;
}

.breadcrumb-item {
    color: #212020;
    position: relative;
    z-index: 2800;
}

.breadcrumb-item a {
    color: #212020;
    text-decoration: none;
    position: relative;
    z-index: 2800;
}

/* ======================
   MOBILE FIXES
   ====================== */
@media (max-width: 991.98px) {
    .inner-header-milch {
        min-height: 50vh; /* Kleineres Banner für mobile Ansicht */
        padding-top: 90px; /* Headerbild weiter runter auf Mobil */
    }
}
@media (max-width: 991.98px) {
    .inner-header-hof {
        min-height: 50vh; /* Kleineres Banner für mobile Ansicht */
        padding-top: 90px; /* Headerbild weiter runter auf Mobil */
    }

    .inner-banner {
        height: 40vh;
    }
}

/*--------------------------------------------------------------------
Inner Page ENDE
---------------------------------------------------------------------*/

/*--------------------------------------------------------------------
About Us Page
---------------------------------------------------------------------*/
.about-img {
  animation: floating 2s ease infinite alternate; }

.team-part {
  padding: 0 0 100px; }

.team-single .team-socialmedia {
  text-align: center;
  padding: 10px 8px;
  background: #363637;
  border-radius: 5px 5px 0 0;
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 2;
  bottom: -100px;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .team-single .team-socialmedia ul li a {
    color: #363637;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; }
  .team-single .team-socialmedia ul li a:hover {
    transform: rotate(360deg); }
.team-single .headline {
  margin-bottom: 12px; }

.team-single p {
  /* Entfernen der festen Höhe um den Text vollständig anzuzeigen */
  color: #363637;
  margin-top: 10px; /* Optionaler Abstand zwischen Ãœberschrift und Text */
 }

.team-single:hover .team-socialmedia {
  bottom: 0; }

  
  @media (max-width: 768px) {
    /* Ãœberschrift H2 in der team-part verkleinern */
    .team-part .subtitle {
        font-size: 16px; /* Statt normal 24-26px */
        text-align: center;
    }

    /* Ãœberschrift H3 in der team-part verkleinern */
    .team-part .title {
        font-size: 18px; /* Statt normal 28-32px */
        text-align: center;
        margin-bottom: 10px;
    }

    /* Text in .team-part anpassen */
    .team-part p {
        font-size: 14px; /* Statt normal 16px */
        line-height: 1.3; /* Etwas kompaktere Zeilenhöhe */
        text-align: center;
        padding: 0 10px; /* Etwas mehr Platz für kleinere Bildschirme */
    }

    /* Team-Elemente zentrieren und optimieren */
    .team-single {
        text-align: center;
        padding: 15px;
    }

    /* Team-Bilder anpassen */
    .team-single img {
        width: 100%; /* Volle Breite auf mobilen Geräten */
        max-width: 250px; /* Verhindert zu große Bilder */
        margin: 0 auto;
        display: block;
        border-radius: 10px; /* Leichte Abrundung für ein modernes Design */
    }

    /* Team-Beschreibung anpassen */
    .team-single .card-body {
        padding: 10px;
    }

    /* Headlines in der Team-Sektion optimieren */
    .team-single .headline {
        font-size: 16px; /* Statt normal 20px */
        color: #333333; /* Beibehaltung des Corporate Designs */
        margin-bottom: 5px;
    }
}

/*--------------------------------------------------------------------
Menu Page
---------------------------------------------------------------------*/
.menu-page .menu-single {
  margin-top: 0;
  margin-bottom: 50px; }

.menu-category ul li:not(:last-child) {
  margin-bottom: 6px; }
.menu-category ul li label {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #333333; }  /* color: #e8f5fc; */

@media (max-width: 767.98px) {
  .menu-category {
    margin-bottom: 50px; } }
/*--------------------------------------------------------------------
Blog Detail Page
---------------------------------------------------------------------*/
.blog-detail .card-body {
  margin-top: 20px; }
.blog-detail .posted-date {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  background: #00429b;
  text-transform: none;
  padding: 8px 16px;
  border-radius: 5px;
  position: absolute;
  bottom: -10px;
  right: 15px; }
.blog-detail p {
  margin-bottom: 16px; }

.blog-sidebar-single h4 {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #363637;
  margin-bottom: 8px; }

.blog-sidebar-single:not(:last-child) {
  margin-bottom: 12px; }

@media (max-width: 767.98px) {
  .blog-sidebar {
    margin-top: 50px; } }
/*--------------------------------------------------------------------
Contact Page
---------------------------------------------------------------------*/
.contact-single {
  margin-top: 50px; }
  
/*--------------------------------------------------------------------
Ergänzungen
---------------------------------------------------------------------*/ 
.slogan {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.themenliste {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.themenliste li {
  margin-bottom: 0.4rem;
}
  
  .about-part ul.bullet-list {
  list-style-type: disc;
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}

.about-part ul.bullet-list li 
  {
  margin-bottom: 0.5rem;
  color: #333333;
  font-size: 1rem;
  line-height: 1.6;
}
  

  
  /* Nur im About-Bereich erzwingen */
.about-part .about-single ul.bullet-list,
.about-part .about-single ul.themenliste {
  list-style: disc !important;
  padding-left: 1.5rem !important;
  margin: 0 0 1.2rem 0;
	 margin-top: 10px; /* Abstand oberhalb der Liste */
}

.about-part .about-single ul.bullet-list li,
.about-part .about-single ul.themenliste li {
  display: list-item;          /* falls irgendwo flex/inline gesetzt war */
  margin-bottom: 0.5rem;
  color: #333333;
  font-size: 1rem;
  line-height: 1.6;
}

/* Optional: Marker-Farbe angleichen */
.about-part .about-single ul.bullet-list li::marker,
.about-part .about-single ul.themenliste li::marker 
  {  color: #333333;
}

/* Mediation: Bild auf großen Bildschirmen weiter nach unten setzen */
@media (min-width: 992px) {
  .about-part .profile-img {
    margin-top: 40px; /* oder 50–60px, je nachdem wie bündig es wirken soll */
  }
}

/* Mediation: Abstand zwischen Text und Bild mobil reduzieren */
@media (max-width: 768px) {
  /* 1) Oberes Padding im Bild-Wrapper entfernen */
  .about-part .col-lg-6.text-center.text-lg-end .about-single {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 2) Spaltenabstand oberhalb der Bildspalte minimieren */
  .about-part .col-lg-6.text-center.text-lg-end {
    margin-top: 0 !important;   /* übersteuert mt-4 */
  }

  /* 3) Vertikale Gutters in der Row verkleinern */
  .about-part .row {
    --bs-gutter-y: .25rem;       /* oder 0 */
  }

  /* 4) Bild selbst bündig halten (falls irgendwo Margin gesetzt ist) */
  .about-part .profile-img {
    margin-top: 0 !important;
  }
}

/* ============================================
   Profilbild (Cathrin Henke) – Abstände steuern
   ============================================ */

/* Desktop: Bild bündig mit Textbeginn */
@media (min-width: 992px) {
  .about-part .profile-img {
    margin-top: 40px;  /* ggf. 50–60px ausprobieren */
  }
}

/* Tablet & Handy: kleinerer Abstand */
@media (max-width: 991.98px) {
  .about-part .profile-img {
    margin-top: 10px !important;
  }
}


/* ============================================
   About-Bilder (Lösung & Profil)  Abstände steuern
   ============================================ */

/* Desktop: Bild bündig mit Textbeginn */
@media (min-width: 992px) {
  .about-part .profile-img {
    margin-top: 40px;  /* ggf. 50–60px ausprobieren */
  }
}

/* Tablet & Handy: Abstand kleiner halten */
@media (max-width: 991.98px) {
  .about-part .col-lg-6.text-center.text-lg-end .about-single {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .about-part .col-lg-6.text-center.text-lg-end {
    margin-top: 0 !important;   /* übersteuert mt-4 */
  }


  .about-part .profile-img {
    margin-top: 10px !important; /* enger am Text */
  }
}