@charset "UTF-8";
/*
Variables
*/
/* 
Fonts
*/
@import url("https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap");
body {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; }

body.home .center-me {
  width: 100vw;
  overflow-y: scroll;
  height: 650px; }

/* ===== Scrollbar CSS ===== */
/* Firefox */
body.home .center-me .styled-scrollbars {
  /* Foreground, Background */
  scrollbar-color: #999 #333; }

.styled-scrollbars::-webkit-scrollbar {
  width: 3px;
  height: 3px; }

.styled-scrollbars::-webkit-scrollbar-thumb {
  /* Foreground */
  background: gray; }

.styled-scrollbars::-webkit-scrollbar-track {
  /* Background */
  background: #fbf9f9; }

body.home .main-box {
  width: 1150px;
  margin: auto; }

.position-absolute {
  position: absolute; }

.main-box {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
  height: 647px;
  margin-top: 10px; }

.home .main-box {
  width: 1170px; }

.subpage .navbar {
  margin-bottom: 20px; }

.navbar-brand img {
  max-width: 110px; }

@media (min-width: 576px) {
  .subpage .col-xs-12.col-sm-6.col-lg-4 .img-container {
    height: 224px; }
  .subpage .col-md-6 .img-container {
    height: 473px; } }

@media (min-width: 768px) {
  .home .container {
    width: 750px; }
  .subpage .main-box {
    width: 360px;
    display: block; }
  .subpage .col-xs-12.col-sm-6.col-lg-4 .img-container {
    height: 314px; }
  .subpage .col-md-6 .img-container {
    height: 314px; } }

@media (min-width: 992px) {
  .home .container {
    width: 1170px; }
  .subpage .col-xs-12.col-sm-6.col-lg-4 .img-container {
    height: 281px; }
  .subpage .col-md-6 .img-container {
    height: 205px; }
  .subpage .col-lg-3 .img-container {
    height: 205px; } }

@media (min-width: 1150px) {
  .subpage .col-xs-12.col-sm-6.col-lg-4 .img-container {
    height: 345px; }
  .subpage .col-md-6 .img-container {
    height: 205px; }
  .subpage .col-lg-3 .img-container {
    height: 252px; } }

@media (min-width: 1200px) {
  .home .container {
    width: 1170px; } }

/*Ernas 6 geburtstag*/
.home .ernas-geb {
  top: 398px;
  left: 470px;
  position: absolute;
  transform: rotate(-7deg);
  display: block;
  font-size: 153%;
  width: 223px;
  color: #af3524;
  background-color: #af3524;
  backdrop-filter: blur(10px);
  padding: 13px;
  border-radius: 29px; }

.bistro .ernas-geb {
  top: 384px;
  left: 547px;
  display: block;
  font-size: 153%;
  width: 223px;
  color: #af3524;
  background-color: rgba(0, 146, 95, 0.47);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 13px;
  border-radius: 29px;
  margin: auto; }

.home .ernas-geb img {
  width: 195px;
  display: block; }

/*Ernas 6 geburtstag END*/
/*coloring*/
.dot-1-forground-color {
  color: #eb7a29; }

.dot-2-forground-color {
  color: #df1e3c; }

.dot-3-forground-color {
  color: #1e94d3; }

.dot-4-forground-color {
  color: #fcd326; }

.dot-5-forground-color {
  color: #8cba3a; }

.dot-6-forground-color {
  color: #e86f24; }

.dot-7-forground-color {
  color: #812b79; }

.subpage .main-box {
  width: 100vw;
  height: auto;
  text-align: justify; }

@media (min-width: 1150px) {
  .subpage .container {
    max-width: 1150px; } }

.subpage .container {
  width: 100vw; }

@media (min-width: 768px) {
  .subpage .main-box {
    display: block; } }

@media (min-width: 992px) {
  .subpage .main-box {
    display: block; } }

@media (min-width: 1200px) {
  .subpage .main-box {
    display: block; } }

div.read_more + [data-readmore-toggle],
div.read_more[data-readmore] {
  display: block;
  width: 100%; }

div.read_more[data-readmore] {
  transition: height 75ms;
  overflow: hidden; }

/*
all
*/
@media (min-width: 640px) {
  .col-md-4 {
    width: 33.33333333%; } }

.footer.row .col-xs-12 {
  margin-bottom: 20px; }

.footer.row {
  background-color: #fbf9f9;
  color: #2d2d2d;
  padding: 15px;
  position: initial;
  width: 90vw;
  margin-left: auto;
  margin-right: auto;
  /*margin-top:20px;*/ }

.footer address {
  margin-bottom: 0px; }

.footer.row {
  padding: 20px; }

@media (min-width: 992px) {
  .home .footer.row {
    width: 100vw;
    position: absolute; }
  .subpage .footer.row {
    width: 100vw;
    position: absolute;
    margin-top: 20px; }
  .footer.row .col-xs-12 {
    margin: 0px; }
  .footer.row .col-xs-12 {
    margin: 0px; } }

/*
home 
*/
.panel-section.intro {
  background-color: #ffd500;
  width: 80vw;
  margin: auto;
  border-radius: 25px;
  padding: 20px;
  position: absolute;
  z-index: 45;
  display: none; }

#trigger-el {
  overflow: hidden;
  width: 100%;
  height: 100vh; }

.headlines,
img.main-image {
  height: 647px;
  width: 1150px; }

img.main-image {
  display: block;
  z-index: 10; }

.animations {
  z-index: 21;
  position: absolute;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 647px;
  width: 1150px; }
  .animations_bistro {
    width: 250px;
    height: 100px;
    display: block;
    left: 544px;
    top: 201px;
    position: absolute; }
    .animations_bistro img {
      width: 250px;
      display: none; }
  .animations_bistro:hover img {
    display: block; }
  .animations_veranstaltungen {
    width: 250px;
    height: 310px;
    display: block;
    left: 879px;
    top: 11px;
    position: absolute;
    border: 1px solid red; }
    .animations_veranstaltungen img {
      display: none; }
  .animations_veranstaltungen:hover img {
    display: block; }

.headlines img {
  display: none; }

.headlines {
  z-index: 30;
  position: absolute;
  display: block;
  color: red;
  margin-left: auto;
  margin-right: auto;
  font-family: "Fredericka the Great"; }
  .headlines_bistro {
    top: 578px;
    left: 833px;
    font-size: 33px;
    position: absolute;
    transform: rotate(39deg); }
    .headlines_bistro a {
      color: #8cba3a; }
  .headlines_bistro:hover ~ img.image_bistro,
  .headlines_bistro:focus ~ img.image_bistro {
    display: block; }
  .headlines_laden {
    top: 325px;
    left: 596px;
    position: absolute;
    transform: rotate(-3deg);
    font-size: 34px; }
    .headlines_laden a {
      color: #00925f; }
  .headlines_laden:hover ~ img.image_laden,
  .headlines_laden:focus ~ img.image_laden {
    display: block; }
  .headlines_packservice {
    top: 384px;
    left: 404px;
    position: absolute;
    transform: rotate(325deg);
    font-size: 15px; }
    .headlines_packservice a {
      color: #af3524; }
  .headlines_ehrenernies {
    top: 385px;
    left: 402px;
    position: absolute;
    transform: rotate(325deg);
    font-size: 14px; }
    .headlines_ehrenernies a {
      color: #af3524; }
  .headlines_veranstaltungen {
    top: 52px;
    left: 914px;
    font-size: 24px;
    position: absolute; }
    .headlines_veranstaltungen a {
      color: #af3524; }
  .headlines_veranstaltungen:hover ~ img.image_veranstaltungen,
  .headlines_veranstaltungen:focus ~ img.image_veranstaltungen {
    display: block; }
  .headlines_team {
    top: 110px;
    left: 156px;
    font-size: 24px;
    position: absolute;
    transform: rotate(-4deg); }
    .headlines_team a {
      color: #1e94d3; }
  .headlines_faq {
    top: 427px;
    left: 294px;
    font-size: 18px;
    position: absolute; }
    .headlines_faq a {
      color: #f8ec22; }
  .headlines_bunte_butze {
    top: 420px;
    left: 174px;
    font-size: 19px;
    position: absolute; }
    .headlines_bunte_butze a {
      color: #00925f; }
  .headlines_aktuelles {
    top: 420px;
    left: 19px;
    font-size: 19px;
    position: absolute;
    transform: rotate(-35deg); }
    .headlines_aktuelles a {
      color: #af3524; }

/* 
sub pages
*/
.bg-light {
  --bs-bg-opacity: 1;
  background-color: #fff !important; }

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  color: #555;
  background-color: #fff; }

ul.dropdown-menu {
  border-radius: 0px;
  border: 0px;
  padding-left: 15px; }

#navbar {
  padding-left: 30px; }

.copyright {
  color: grey;
  font-size: 10px;
  display: block; }

.subpage h1 {
  font-size: 25.2px; }

.subpage h2 {
  font-size: 21.6px; }

.subpage h3 {
  font-size: 18px; }

.subpage h4 {
  font-size: 14.4px; }

@media (min-width: 992px) {
  .subpage .h1 {
    font-size: 36px; }
  .subpage h2 {
    font-size: 28.8px; }
  .subpage h3 {
    font-size: 25.2px; }
  .subpage h4 {
    font-size: 21.6px; } }

.subpage h1,
.subpage h2,
.subpage h3,
.subpage h4,
.subpage h5 {
  font-family: "Fredericka the Great";
  margin-bottom: 20px; }

.subpage h1,
.subpage h2,
.subpage h3,
.subpage h4,
.subpage h5,
.subpage li {
  text-align: left; }

.subpage li {
  list-style-position: outside;
  list-style-type: symbols(cyclic "○" "●"); }

.subpage ul {
  padding-inline-start: 13px; }

.subpage .content-img {
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
  max-height: 500px; }

.subpage .product-img,
.subpage .insta-image,
.subpage .table-img {
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */ }

.subpage .img-container {
  max-width: 100%;
  width: auto\9;
  padding-bottom: 9px;
  overflow: hidden;
  /* this ensures that the image doesn't spill outside the container */ }

.subpage .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* this will ensure that the aspect ratio is maintained while covering the entire container */ }

.subpage .product-gallery .img-container {
  width: 100%;
  position: relative;
  padding-bottom: 100%; }
  .subpage .product-gallery .img-container img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.subpage .insta-caption {
  margin: 5px;
  font-size: 90%;
  margin-bottom: 10px;
  /* height: 124px; */
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
  position: relative;
  max-height: 7.5em;
  overflow: hidden;
  line-height: 1.5em; }

.subpage .insta-caption::after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
  background-color: white;
  padding-right: 7em;
  /* Space for 'Read more' link */ }

.subpage .insta-caption-read-more {
  position: absolute;
  bottom: 0;
  right: 0;
  background: linear-gradient(to right, transparent, white 50%);
  /* Match the background */
  padding-left: 1em;
  /* Some space before the text */
  z-index: 2; }

.subpage .product-gallery .col-xs-3,
.subpage .product-gallery .col-md-3 {
  padding: 5px; }

.subpage .event-hashtag {
  color: #1e94d3;
  font-weight: bold; }

.subpage .event-title {
  color: #00925f; }

.subpage .event-date {
  color: #eb7a29; }

.subpage.veranstaltungen .sub-page-main li {
  padding: 15px;
  list-style-type: disc; }

.subpage .row .col-md-6 {
  margin-top: 20px; }
  .subpage .row .col-md-6 h3 {
    margin-top: 0px; }

.subpage.laden h3,
.subpage h2 {
  margin-bottom: 0px;
  padding-top: 30px; }

.subpage.veranstaltungen .events-list li {
  margin-bottom: 15px; }

.subpage.veranstaltungen #events-container {
  /* Adjust this value based on your item's height to show only 2 items */
  overflow: hidden;
  transition: height 0.3s ease;
  /* Smooth transition for expanding */ }

.subpage.veranstaltungen #more-events-action {
  border-radius: 40px;
  background: #aee691;
  height: 40px;
  width: 300px;
  margin: 40px 0px; }

.subpage.veranstaltungen #more-events-action.more::after {
  content: 'Zeige mehr Veranstalltungen'; }

.subpage.veranstaltungen #more-events-action.more .fa-angle-up {
  display: none; }

.subpage.veranstaltungen #more-events-action.less::after {
  content: 'Zeige weniger Veranstalltungen'; }

.subpage.veranstaltungen #more-events-action.less .fa-angle-down {
  display: none; }

.sub-page-frame {
  padding-top: 50px;
  padding-left: 27px;
  padding-right: 22px;
  padding-bottom: 63px;
  margin-bottom: 10px; }

.sub-page-frame {
  background-image: url(../images/final/top-left.png), url(../images/final/top-right.png), url(../images/final/bottom-right.png), url(../images/final/bottom-left.png);
  background-position: left top, right top, right bottom, left bottom;
  background-repeat: no-repeat;
  background-size: 100px; }

.container.sub-page-bg {
  padding-left: 3px;
  padding-right: 15px; }

.laden .sub-page-bg {
  background-image: url(../images/final/leguan.png);
  background-position: right 30px bottom 13px;
  background-repeat: no-repeat;
  background-size: 100px; }

.veranstaltungen .sub-page-bg {
  background-image: url(../images/final/musik.png);
  background-position: right 30px bottom 13px;
  background-repeat: no-repeat;
  background-size: 100px; }

.bistro .sub-page-bg,
.veganer-brunch .sub-page-bg {
  background-image: url(../images/final/bistro.png);
  background-position: right 30px bottom 13px;
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: right 30px bottom 3px; }

.family-breakfast .autumn-book-button {
  background-color: #d98233;
  color: white;
  padding: 4px 4px;
  font-size: 15px;
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  border: 2px solid #b5651d;
  border-radius: 8px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-family: Arial, sans-serif;
  position: absolute;
  transform: rotate(5deg);
  transform-origin: right center; }

.family-breakfast .autumn-book-button {
  right: 1%;
  top: 59px; }

@media (max-width: 768px) {
  .family-breakfast .autumn-book-button {
    right: 0%;
    top: 75px; }
  .family-breakfast .autumn-book-button-parent-container {
    position: relative;
    /* notwendig, um Button am rechten Rand auszurichten */ } }

.family-breakfast .autumn-book-button:hover {
  background-color: #b5651d;
  /* etwas dunkler für den Hover-Effekt */
  transform: scale(1.05) rotate(5deg);
  cursor: pointer; }

.family-breakfast .autumn-book-button-parent-container {
  position: relative;
  /* notwendig, um Button am rechten Rand auszurichten */ }

.aktuelles .sub-page-bg {
  background-image: url(../images/final/aktuelles.png);
  background-position: right 30px bottom 13px;
  background-repeat: no-repeat;
  background-size: 100px; }

.team .sub-page-bg {
  background-image: url(../images/final/team.png);
  background-position: right 30px bottom 13px;
  background-repeat: no-repeat;
  background-size: 100px; }

.team.subpage .people li {
  list-style-type: none;
  padding-top: 10px; }

.faq .sub-page-bg {
  background-image: url(../images/final/faq.png);
  background-position: right 30px bottom 13px;
  background-repeat: no-repeat;
  background-size: 100px; }

.bunte_butze .sub-page-bg {
  background-image: url(../images/final/blume.png);
  background-position: right 30px bottom 13px;
  background-repeat: no-repeat;
  background-size: 100px; }

.bunte_butze .sub-page-frame {
  padding-bottom: 77px; }

.packservice .sub-page-bg {
  background-image: url(../images/final/packservice.png);
  background-position: right 30px bottom 13px;
  background-repeat: no-repeat;
  background-size: 100px; }

.ehrenernies .sub-page-bg {
  background-image: url(../images/final/packservice.png);
  background-position: right 30px bottom 13px;
  background-repeat: no-repeat;
  background-size: 100px; }

.bistro .insta-image {
  max-width: 100%; }

.bistro .bistro-description {
  padding-top: 20px; }

.subpage.glightbox-mobile .glightbox-container .gslide-description {
  background: black;
  background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.493435) 31%, rgba(0, 0, 0, 0.274947) 69%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.493435) 31%, rgba(0, 0, 0, 0.274947) 69%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.493435) 31%, rgba(0, 0, 0, 0.274947) 69%, rgba(0, 0, 0, 0) 100%); }

.subpage.glightbox-mobile .glightbox-container .gslide-desc {
  color: white; }

.home.glightbox-mobile .gslide-media.gslide-image {
  margin-top: 38px; }

.home.glightbox-mobile .glightbox-container .ginner-container.desc-bottom {
  justify-content: start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  overflow-y: scroll; }

.home.glightbox-mobile .glightbox-container .gslide-description {
  position: relative; }

.home.glightbox-mobile .glightbox-clean .gdesc-inner {
  padding: 2px 2px; }

.home.glightbox-mobile .gslide-image img {
  -ms-touch-action: inherit;
  touch-action: inherit; }

.slider-more {
  max-width: 375px;
  max-height: 500px;
  margin: auto; }

.slider {
  margin: auto; }

.slick-slider {
  touch-action: auto !important; }

.family-breakfast a:has(.content-img) {
  width: 100%;
  display: inline-block; }

.family-breakfast .content-img {
  margin: auto;
  display: block; }

.family-breakfast .copyright {
  text-align: center; }

.mobile-version .homepage-bistro {
  margin: auto;
  width: 90vw; }
  .mobile-version .homepage-bistro a img {
    width: 100%; }
  .mobile-version .homepage-bistro .insta-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%; }
  .mobile-version .homepage-bistro .glightbox {
    display: block;
    width: 100%;
    max-width: 100%; }

.mobile-content img {
  width: 90vw; }

/* Mobile version styles */
@media (max-width: 992px) {
  .navbar-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1; }
  .navbar-toggler {
    margin-right: auto;
    z-index: 2; } }

/* Mobile version styles */
@media (max-width: 767px) {
  .desktop-version {
    display: none; }
  .mobile-version {
    display: block;
    background-color: transparent; }
  .mobile-version.sub-page-frame {
    padding-top: 15px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 63px;
    margin-bottom: 10px;
    margin-top: 4px;
    margin-left: 2px;
    margin-right: 2px; }
  .mobile-version .navbar-toggler {
    margin-left: 18px;
    margin-top: 5px; }
  .navbar-brand {
    background-color: transparent; }
  .mobile-version .navbar {
    background-color: transparent !important; }
  .navbar-nav .dropdown-menu {
    display: block !important; }
  .mobile-header img {
    max-width: 150px;
    margin: auto;
    display: block; }
  .mobile-content {
    padding: 5px 20px; }
  .mobile-content h2 {
    font-size: 24px;
    margin-top: 10px;
    font-family: "Fredericka the Great"; }
  .mobile-content p {
    font-size: 16px;
    margin-bottom: 20px; } }

@media (min-width: 768px) {
  .desktop-version {
    display: block; }
  .mobile-version {
    display: none; } }

/*# sourceMappingURL=main.css.map */