@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: #171717;
  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; }

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; }

@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;
    }
}

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; }

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: #00429b;
  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: 60px 0; }

.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: #00429b;
  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; /* MEHR Abstand nach oben für den gesamten Textblock */
}

/* Auf Desktop den Text weiter nach oben verschieben */
.index-page .banner-wrapper {
    padding-top: 40px; /* Weniger Abstand nach oben */
}

/* ABER: Auf mobilen Geräten mehr Abstand lassen, damit das Menü nicht überlappt */
@media (max-width: 768px) {
    .index-page .banner-wrapper {
        padding-top: 120px; /* Mehr Abstand auf kleineren Bildschirmen */
    }
}


/* ======================
   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: #00429b;
    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 */
}

/*--------------------------------------------------------------------
About
---------------------------------------------------------------------*/
.about-single p {
  margin-top: 20px; }
/*  .about-single a {
  margin-top: 30px; }--*/

.about-part {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}


 
@media (max-width: 768px) {
    /* Überschrift H2 in der about-part verkleinern */
    .about-part .subtitle {
        font-size: 20px; /* Statt normal 26-30px */
    }

    /* Überschrift H3 in der about-part verkleinern */
    .about-part .title {
        font-size: 16px; /* Statt normal 24px */
    }

    /* Standard-Text in .about-part verkleinern */
    .about-part p {
        font-size: 12px; /* Statt normal 16px */
        line-height: 1.3; /* Etwas kompaktere Zeilenhöhe */
    }
}

/*--------------------------------------------------------------------
Feature
---------------------------------------------------------------------*/
.feature-part {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url(../images/background/feature.jpg); 
}

@media (max-width: 768px) {
    /* Hauptüberschrift H2 verkleinern */
    .feature-part h2 {
        font-size: 22px; /* Statt normal 26-30px */
    }

    /* Unterüberschrift H3 verkleinern */
    .feature-part .title {
        font-size: 18px; /* Statt normal 22-24px */
    }

    /* Text in .feature-part verkleinern */
    .feature-part p,
    .feature-part ul,
    .feature-part li {
        font-size: 14px; /* Statt normal 16px */
    }

    /* Buttons in der Navigation verkleinern */
    .feature-part .nav-tabs .nav-link {
        font-size: 14px; /* Statt normal 16px */
        padding: 8px 12px; /* Kleinere Innenabstände */
    }
}


.feature-part img {
  animation: floating 2s ease infinite alternate;
}

@keyframes floating {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.feature-single .nav {
  margin: 50px 0 20px;
  border-bottom: none;
}

.feature-single .nav-link {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #434343; /*-- Milch Touren Button --*/
  text-transform: none;
  margin: 0 5px;
  border: 1px solid #d5d5d5;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.feature-single .nav-item:first-child .nav-link {
  margin-left: 0;
}

.feature-single .nav-item:last-child .nav-link {
  margin-right: 0;
}

.feature-single .nav-link:hover,
.feature-single .nav-link.active {
  color: #fff;
  background: #00429b;
  border-color: #00429b;
}

.feature-single .tab-pane h4 {
  color: #434343;
}

.feature-single .tab-pane p {
  color: #434343;
  margin-bottom: 20px;
}

.btn-brown-outline {
  color: #434343; /* Textfarbe der Schaltfläche in Grau */
  border: 2px solid #00429b; /* Beispiel für einen blauen Rand */
  background-color: transparent;
  padding: 10px 20px;
  /*--   text-transform: uppercase;  --*/
  transition: all 0.3s ease;
}

.btn-brown-outline:hover {
  background-color: #00429b; /* Blauer Hintergrund beim Hover */
  color: #fff; /* Weißer Text beim Hover */
}

@media (max-width: 991.98px) {
  .feature-single .nav {
    flex-direction: column;
  }

  .feature-single .nav-item .nav-link {
    margin: 0 0 8px;
    width: 100%;
  }
}

/*--------------------------------------------------------------------
Service
---------------------------------------------------------------------*/
.service-single {
  padding: 30px 16px;
  background: #00429b; 
}
@media (max-width: 768px) {
    /* Hauptüberschrift H2 verkleinern */
    .service-part .subtitle {
        font-size: 22px; /* Statt normal 26-30px */
    }

    /* Unterüberschrift H3 verkleinern */
    .service-part .title {
        font-size: 18px; /* Statt normal 22-24px */
    }

    /* Kleinere H4-Überschriften */
    .service-part .headline {
        font-size: 14px; /* Statt normal 18-20px */
    }

    /* Text in .service-part verkleinern */
    .service-part p {
        font-size: 14px; /* Statt normal 16px */
        line-height: 1.4; /* Etwas kompaktere Zeilenhöhe */
    }
}


  .service-single .headline,
  .service-single i,
  .service-single p {
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .service-single .headline {
    color: #363637; /* H4 mit der Klasse headline ist jetzt grau */
  }
  .service-single i {
    font-size: 60px;
    color: #00429b; 
  }

.service-single::before,
.service-single::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.service-single:hover {
  transform: translateY(8px); 
}
  .service-single:hover .headline,
  .service-single:hover i,
  .service-single:hover p {
    color: #fff; /* Farbe der Klasse headline ändert sich bei hover auf weiß */
  }

.service-single:hover::before {
  transform: scale(1, 0); 
}

.service-single:hover::after {
  transform: scale(0, 1); 
}


/*--------------------------------------------------------------------
Counter
---------------------------------------------------------------------*/
.counter-part {
  padding: 50px 0;
  background-image: url(../images/background/counter.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }

.counter-single {
  text-align: center;
  margin-top: 50px;
  color: #cf15c0; }
  .counter-single i {
    font-size: 60px; }
  .counter-single .timer {
    font-family: "Open Sans", sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #fff; }
  .counter-single hr {
    width: 80px;
    margin: 8px auto;
    background: #00429b; }
  .counter-single p {
    font-size: 20px;
    text-transform: none; }

/*--------------------------------------------------------------------
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); }

/*--------------------------------------------------------------------
Faq
---------------------------------------------------------------------*/
.faq-part {
  background-image: url(../images/background/faq.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }
  .faq-part img {
    animation: scale-up-center 5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite alternate both; }
  .faq-part .section-title {
    margin-bottom: 50px; }

@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }
/*--------------------------------------------------------------------
Blog
---------------------------------------------------------------------*/
.blog-single {
  text-align: left; }
  .blog-single .headline {
    text-transform: none;
    line-height: 25px;
    height: 50px;
    max-height: 50px; }
  .blog-single span {
    font-size: 14px; }
  .blog-single .card-footer .blog-author img {
    width: 50px;
    margin-right: 12px; }
  .blog-single .card-footer .blog-author span {
    text-transform: none; }
  .blog-single .card-footer .blog-date i {
    margin-right: 6px; }

/* Stil für h3-Titel in der Blog-Sektion */
.blog-part .title {
    font-size: 22px; /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
    color: #00429b; /* Dunkelblau */
    margin-top: 20px; /* Abstand nach oben */
    margin-bottom: 15px; /* Abstand nach unten */
    text-transform: uppercase; /* Optional: Großbuchstaben */
    text-align: left; /* Links ausgerichtet */
}

/* Stil für h4-Überschriften in der Blog-Sektion */
.blog-part .headline {
    font-size: 20px; /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
    color: #00429b; /* Blau */
    margin-top: 15px; /* Abstand nach oben */
    margin-bottom: 10px; /* Abstand nach unten */
    text-transform: none; /* Keine Großbuchstaben */
    text-align: left; /* Links ausgerichtet */
}

@media (max-width: 768px) {
    /* Hauptüberschrift H2 verkleinern */
    .blog-part .subtitle {
        font-size: 22px; /* Statt normal 26-30px */
    }

    /* Unterüberschrift H3 verkleinern */
    .blog-part .title {
        font-size: 18px; /* Statt normal 22-24px */
    }

    /* Kleinere H4-Überschriften (z. B. Blog-Titel) */
    .blog-part h4 {
        font-size: 16px; /* Statt normal 18-20px */
    }

    /* Text in .blog-part verkleinern */
    .blog-part p {
        font-size: 14px; /* Statt normal 16px */
        line-height: 1.4; /* Etwas kompaktere Zeilenhöhe */
    }

    /* Kleinere Schrift in der Blog-Kachel */
    .blog-single .card-body {
        font-size: 14px;
    }
}


/*--------------------------------------------------------------------
Review
---------------------------------------------------------------------*/
.review-part {
  background-image: url(../images/background/faq.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }

.review-single {
  margin: 50px auto 0;
  padding: 30px;
  border: 1px solid;
  border-radius: 5px;
  max-width: 600px;
  position: relative; }

.client-img {
  border: 1px solid;
  border-radius: 5px;
  width: 100px !important;
  position: absolute;
  left: -50px; }

.review-user {
  padding-left: 50px; }
  .review-user p {
    font-weight: 500;
    color: #00429b; }
  .review-user q {
    font-style: italic;
    margin-top: 16px;
    display: block; }

@media (max-width: 767.98px) {
  .review-single {
    margin: 100px auto 0; }

  .client-img {
    top: -50px;
    left: 50%;
    transform: translateX(-50%); }

  .review-user {
    padding: 50px 0 0; } }
/*--------------------------------------------------------------------
Events
---------------------------------------------------------------------*/
.event-single {
  text-align: left; }
  .event-single .headline {
    line-height: 30px;
    max-height: fit-content; }
  .event-single hr {
    width: 200px;
    background: #e8f5fc; }
  .event-single p {
    margin-bottom: 16px; }
  .event-single .nav-item:not(:last-child) {
    margin-bottom: 12px; }
  .event-single .nav-item i {
    min-width: 20px;
    margin-right: 8px; }


@media (max-width: 768px) {
    /* Hauptüberschrift H2 verkleinern */
    .event-part .subtitle {
        font-size: 22px; /* Statt normal 26-30px */
    }

    /* Unterüberschrift H3 verkleinern */
    .event-part .title {
        font-size: 18px; /* Statt normal 22-24px */
    }

    /* Kleinere H4-Überschriften (z. B. Zeitungs-Titel) */
    .event-part .headline {
        font-size: 16px; /* Statt normal 18-20px */
    }

    /* Kleinere Schrift für den normalen Text */
    .event-part p {
        font-size: 14px; /* Statt normal 16px */
        line-height: 1.4; /* Etwas kompaktere Zeilenhöhe */
    }

    /* Kleinere Schrift für die Quelle & Links */
    .event-part .nav li,
    .event-part .nav a {
        font-size: 13px; /* Links und Quelle kleiner */
    }

    /* Kleinere Schrift im Card-Body */
    .event-part .card-body {
        font-size: 14px;
    }
}


/*--------------------------------------------------------------------
Footer
---------------------------------------------------------------------*/
footer {
  padding: 150px 0 100px;
  background: url(../images/background/footer.png) no-repeat top left/cover;
  position: relative; }

.footer-single .headline {
  margin-bottom: 30px; }
.footer-single .nav-link {
  color: #363637      ;
  padding: 8px 0;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }
.footer-single .nav-link:hover,
.footer-single .social-icon a:hover i {
  color: #00429b; }

.footer-quicklink .nav-link i {
  font-size: 12px;
  margin-right: 4px; }

.footer-contact .nav-link i {
  font-size: 16px;
  margin-right: 8px;
  min-width: 20px; }

.social-icon li:not(:first-child) .nav-link {
  padding-left: 20px; }

@media (max-width: 767.98px) {
  footer {
    text-align: center;
    padding: 150px 0 0;
    background: url(../images/background/footer.png) no-repeat top/cover; }

  .footer-logo {
    display: none; }

  .footer-single {
    margin-bottom: 50px; } }
/*--------------------------------------------------------------------
Inner Page
---------------------------------------------------------------------*/
/*--.inner-header {
  background: url(../images/background/inner-banner.jpg) no-repeat center/cover; }

.inner-banner {
  padding: 25px 0 50px; }

.breadcrumb .breadcrumb-item {
  color: rgba(81, 83, 81, 0.9); }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(81, 83, 81, 0.9); }
.breadcrumb .breadcrumb-item a {
  font-weight: 600;
  color: #00429b; } --*/

/* ======================
   HEADER FÜR MILCH-SEITE
   ====================== */
/* .inner-header-milch {
    background-image: url("../images/background/banner-milch.jpg"); */            /* Bannerbild */
    /*background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 100vh; */                   /* Banner auf der Milchseite kleiner */
    /*position: relative;
    z-index: 1;
}*/  

/* ======================
   HEADER FÜR Liefertour/ Kontakt CONACT-SEITE FIXEN
   ====================== */
.inner-header-liefertour {
    background-image: url("../images/background/banner-liefertour.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 */
}
/* ======================
   HEADER FÜR MILCH-SEITE FIXEN
   ====================== */
.inner-header-milch {
    background-image: url("../images/background/banner-milch.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 */
}
/* ======================
   HEADER FÜR MILCH-SEITE FIXEN
   ====================== */
.inner-header-hof {
    background-image: url("../images/background/inner-banner.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 */
}

/* ======================
   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 */
}


/* ======================
   BANNER & TEXTBLOCK KORRIGIEREN
   ====================== */
.inner-header-milch .inner-banner .inner-header-hof .inner-banner-hof {
    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 */
}

/* ======================
   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 */
}

/* ======================
   WEISSER TRANSPARENTER BALKEN FIX
   ====================== */
/*.milch-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4); */            /* 40% Weiß für bessere Lesbarkeit */
    /*z-index: 2; */                                /* Bleibt über dem Bild, aber unter dem Menü */
    /*pointer-events: none;} */                    /* Damit Klicks durchgehen */


/* ======================
   WEISSER TRANSPARENTER BALKEN FIX
   ====================== */
/*  .milch-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);*/                 /* 40% Weiß für bessere Lesbarkeit */
    /*  z-index: 2; */                          /* Bleibt über dem Bild, aber unter dem Menü */
    /*  pointer-events: none; }*/            /* Damit Klicks durchgehen */



/* ======================
   HEADER & NAVIGATION FIX
   ====================== */
.navbar-brand {
    position: relative;
    display: inline-block;
    z-index: 3100; /* Logo bleibt über dem Balken */
}

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

/* ======================
   VERTIKALER BALKEN (HINTER LOGO & BREADCRUMBS)
   ====================== */
/*.vertical-line {
    position: absolute;*/
    /*  top: 80px; */     /* Direkt unter dem Logo */
    /*left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 470px;
    background-color: rgba(255, 255, 255, 0.9); */                  /* Weißer Balken */
    /*z-index: 100; */                           /* Weiter unten als Logo & Breadcrumbs */
    /*pointer-events: none;} */              /* Kein Einfluss auf Klicks */


/* ======================
   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: #00429b; /* 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: #99231f; }  /* 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; }