* {
  margin: 0;
  padding:0;
  outline: none;
}

body {
  font-family: 'Montserrat';
  font-size: 1.5em;
  font-size: clamp(0.5rem, 3vw + 1rem, 1.4rem); /* min, flex, max */
  font-weight: 300;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('../images/background-ferienhaus-am-haff.png');
  background-size: cover;
  background-position: center;
  z-index: -1;
  pointer-events: none;
}



.clr, .clearfix {
  display: block;
  float: none;
  height: 0px;
  line-height: 0px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Nothing You Could Do';
}

.mainbox-out {
  width: 100vw;
  max-width: 100%;
  height: auto;
  min-height: 100vh;
  display: inline-block;
  background: rgba(255, 255, 255, 0.5);

}


.container-header {
  background: rgba(255, 255, 255, 0.99);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
}






/*
.headbox {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: 90%;
  margin: 0px auto;
  padding: 20px 0;
}

.headbox-box {
    flex: 1 0 auto;
    border: 1px solid gray;
}

.headbox-box:nth-child(1) {
  flex-grow: 1;
}

.headbox-box:nth-child(2) {
  flex-grow:1;
  align-self: flex-end;
}

.headbox-box:nth-child(3) {
  flex-grow:1;
}
*/



.container-header .headerlogo img {
  width: 100%;
  max-width: 550px;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: all ease 0.5s;
}
.container-header .headerlogo.small img {
  width: 100%;
  max-width: 350px;
  height: auto;
  x-display: inline;
  x-margin: 0 0;
}
/*
.container-header .headertext img {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 20px auto;
  transition: all ease 0.5s;
}
.container-header .headertext.small img {
  width: 100%;
  max-width: 40%;
  height: auto;
  display: inline;
  margin: 20px auto;
}
*/

.mobilemenuck-bar {
  position: fixed !important;
  z-index: 99999;
}

.container-header .headermenu.desktop .mod-menu,
.container-header .headermenu.desktop nav.maximenuck div#maximenuck129 ul.maximenuck {
  x-display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  display: flex !important;
  padding: 20px 0;
  list-style: none;
}
.container-header .headermenu.desktop .mod-menu li,
.container-header .headermenu.desktop nav.maximenuck div#maximenuck129 ul.maximenuck li {
  display: inline-block !important;
  flex: 1; /* Gibt allen Punkten exakt die gleiche Breite */
  text-align: center; /* Optional: Text zentrieren */
  background: none;
  transition: all ease 0.5s;
}
.container-header .headermenu.desktop .mod-menu li:hover,
.container-header .headermenu.desktop nav.maximenuck div#maximenuck129 ul.maximenuck li:hover {
  background: rgba(190, 152, 107, 0.4);
}
.container-header .headermenu.desktop .mod-menu li.active,
.container-header .headermenu.desktop nav.maximenuck div#maximenuck129 ul.maximenuck li.active {
  background: rgba(101, 138, 141, 0.4);
}
.container-header .headermenu.desktop .mod-menu li img,
.container-header .headermenu.desktop nav.maximenuck div#maximenuck129 ul.maximenuck li img,
.mobilemenuck img {
  width: 5vw;
  min-width: 65px;
  height: auto;
}
.container-header .headermenu.desktop .mod-menu li span,
.container-header .headermenu.desktop nav.maximenuck div#maximenuck129 ul.maximenuck li span {
  display: block;
}
.container-header .headermenu.desktop .mod-menu li a,
.container-header .headermenu.desktop nav.maximenuck div#maximenuck129 ul.maximenuck li a {
  text-decoration: none;
  color: #000;
}

.mobilemenuck {
  background: rgba(255, 255, 255, 0.6) !important;
}
.mobilemenuck .mobilemenuck-title {
  background: rgba(101, 138, 141, 0.9);
}
.mobilemenuck .menuck {
  background: rgba(255, 255, 255, 0.5) !important;
  transition: all ease 0.5s;
  padding: 5px 0;
}
.mobilemenuck .menuck:hover {
  background: rgba(190, 152, 107, 0.5) !important;
}
.mobilemenuck .menuck.active {
  background: rgba(101, 138, 141, 0.5) !important;
}
.mobilemenuck .menuck .titreck-title {
  font-family: 'Montserrat';
  font-size: clamp(0.5rem, 3vw + 1rem, 1.4rem); /* min, flex, max */
  font-weight: 300;
  display: block;
  text-align: center;
  color: rgba(86, 94, 68, 0.9);
  transition: all ease 0.5s;
}
.mobilemenuck .menuck:hover .titreck-title,
.mobilemenuck .menuck.active .titreck-title {
  color: #fff;
}
.mobilemenuck-bar .mobilemenuck-bar-title {
  display: none;
}




/*
.container-header .mobilemenu {
  display: none;
}
*/
@media (max-width: 1199px) {
  body {
    padding-top: 0px !important;
  }
  .container-header .headermenu.desktop {
    display: none;
  }
/*
  .container-header .mobilemenu .mobilemenubutton {
    position: absolute;
    top: 3%;
    right: 15%;
  }
  .container-header .headermenu.mobile {
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.7);
  }
  .container-header .headermenu.mobile ul li {
    text-align: center;
    margin: 15px 0;
  }
  .container-header .headermenu.mobile ul li img {
    width: 10vw;

    height: auto;
  }
  .container-header .headermenu.mobile ul li span {
    display: block;
  }
  */
}



main {
  width: 1200px;
  max-width: 95vw;
  margin: 0 auto;
}

main .page-header h1 {
  font-size: 4em;
  font-size: clamp(2.5rem, 3vw + 1rem, 3.5rem); /* min, flex, max */
  margin: 50px 0;
  text-align: center;
}


.modbpslider {
  max-width: 1200px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.modbpslider .modbpslider-padding {
  background: rgba(190, 152, 107, 0.6);
  position: absolute;
  top: 40%;
  text-align: center;
  width: 100%;
  padding: 20px 0 40px 0;
}
.modbpslider .modbpslider-padding .title {
  margin: 0% 0 0 0;
  background: none;
  text-align: center;
  font-size: 4.8em;
  font-size: clamp(2.5rem, 3vw + 1rem, 4.5rem); /* min, flex, max */
  width: 100%;
  display: inline-block;
  color: rgba(101, 138, 141, 1);
  color: rgba(86, 94, 68, 1);
  text-shadow: 3px -3px 8px #fff;
}
.modbpslider .modbpslider-padding .text {
  padding: 10px 5%;
  font-size: 1.7em;
  font-size: clamp(0.5rem, 3vw + 1rem, 1.5rem); /* min, flex, max */
}
.modbpslider .swiper-button-next, .modbpslider .swiper-button-prev {
  color: #64898C;
}

main .blog .blog-item {
  margin: 30px 0;
}

main .blog .blog-item.item-no1 {
  background: rgba(190, 152, 107, 0.4);
  border-width: 4px 0 0 4px;
  border-color: rgba(190, 152, 107, 1);
  border-style: solid;
}
main .blog .blog-item.item-no1 figure {
  float: left;
  margin: auto;
}
main .blog .blog-item.item-no2 {
  background: rgba(86, 94, 68, 0.4);
  border-width: 4px 0 0 4px;
  border-color: rgba(86, 94, 68, 1);
  border-style: solid;
}
main .blog .blog-item.item-no2 figure {
  float: left;
  margin: auto;
}
main .blog .blog-item.item-no3 {
  background: rgba(101, 138, 141, 0.4);
  border-width: 4px 0 0 4px;
  border-color: rgba(101, 138, 141, 1);
  border-style: solid;
}
main .blog .blog-item.item-no3 figure {
  float: right;
  margin: auto;
}


main .blog .blog-item {
  display: flex;
    flex-wrap: wrap; /* Aktiviert den automatischen Umbruch */
    gap: 10px;
}

main .blog .blog-item > * {
  x-flex: 1 0 30%;
}

main .blog .blog-item .item-image {
  flex: 0 1 auto;
}
main .blog .blog-item .item-content {
  flex: 1 0 50%;
}











main .blog .blog-item .item-content {
  padding: 5%;
  color: #59584F;
  overflow: hidden;
}
main .blog .blog-item .item-content .page-header h2 {
  margin: 0 0 20px 0;
  -webkit-hyphens: auto; /* Für Safari */
  hyphens: auto;
  line-height: 1.5em;
}
main .blog .blog-item .item-content .page-header h2 a {
  text-decoration: none;
  color: #64898C;
  font-size: 1.8em;
}









/*
.logobox-start {
  display: inline-block;
  width: 100vw;
  height: 100vh;
  transition: all ease 2s;
  opacity: 1;
}
.logobox-start.hide {
  opacity: 0;
}
.logobox-start img {
  width: auto;
  max-width: 100vw;
  height: auto;
  max-height: 100vh;
  display: block;
  margin: 0 auto;
  float: center;
}



main {
  min-height: 180vh;
}

*/

footer {
  margin: 0 0 15vh 0;
}


/* waves */
.ocean {
  height: 80px; /* change the height of the waves here */
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
}

.wave {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%2364898c'/%3E%3C/svg%3E");
  position: absolute;
  width: 200%;
  height: 100%;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
}

.wave:nth-of-type(2) {
  bottom: 0;
  animation: wave 18s linear reverse infinite;
  opacity: 0.5;
}

.wave:nth-of-type(3) {
  bottom: 0;
  animation: wave 20s -1s linear infinite;
  opacity: 0.5;
}

@keyframes wave {
    0% {transform: translateX(0);}
    50% {transform: translateX(-25%);}
    100% {transform: translateX(-50%);}
}

Resources