@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');





@charset "UTF-8";

.clear{ clear:both; border:0; opacity:0; height:0; font-size:0; visibility: hidden; }


/* =====================  kalibrierung  ===================== */

body{ font-family: "Nunito", sans-serif;}

p{}

a{}

a:hover{}

h1{ }

h2{ }

h3{ }

.head{position: fixed; top: 0; left: 0;width: 100%; text-align: center; z-index: 2; background: rgba(255,255,255, 0.7);}
.head #nav{list-style: none; margin: 0; padding: 0;}
.head #nav li{display: inline-block;}
.head #nav li a{padding:15px 20px 7px 20px; text-decoration: none; color: rgb(60,60,60); display: block;}
.head #nav li a span{border-bottom: 2px solid transparent; padding-bottom: 5px; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.head #nav li a:hover span, .head #nav li a.act span{border-color: rgba(60,60,60, 0.4);}

canvas{    position: absolute;
    width: 100vw;
    height: 60vh;
    left: 0;
    top: 0;}

#bkg{position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; background: url(../Images/sun.jpg) center center; background-size: cover; z-index: -9; opacity: 0.25;}

.container{overflow: hidden;max-width: 1280px; margin: 0 auto;}

.frame{height: 60vh; width: 100%; display: inline-table;}
.fr{display: table-cell; text-align: center; vertical-align: middle; position: relative;}

.baby{background: url(../Images/baby.jpg) center center; background-size: cover; width: 100vw; height: 100vh; left: 0; top: 0; position: absolute; opacity: 0.8;}

#container{ position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: -999; background: url(../Images/bkg.svg) center center; background-size: 30%; opacity: 0.3;}

ul.filter{list-style: none; padding: 0; display: flex; gap: 8px;}
ul.filter li{}
ul.filter h3{padding: 5px 20px; background: rgba(0,0,0,0.5); color: white; cursor:pointer; margin: 0;}
ul.filter h3.active{background: rgba(255,255,255,0.5); color: black;}

ul.shop{list-style: none; padding: 0; display: flex; gap: 8px; flex-wrap:wrap;}
ul.shop li{ background: rgba(255,255,255,0.7)}

ul.shop li a{text-decoration: none;}
ul.shop li a img{width: 100%;height: auto;}

ul.shop li a h3{color: rgb(60,60,60); margin: 0; padding: 8px 20px; font-weight: normal;}

.top{display: inline-table; width: 180px; height: 120px; margin-top: 5px;}

#logo {display: table-cell; vertical-align: middle; text-align: center; background: url(../Images/i.svg) no-repeat bottom right; background-size: contain; padding-right: 40px;}



.clock {display: inline-block; font-size: 16px; padding-left: 10px; color: #575756; margin-bottom: 10px;}

.clock div{display: inline-block;}



.clock ul {list-style: none; padding: 0; margin: 0; display: inline-block;}



.clock ul li{display: inline-block;}



.swiper {

  width: 18vw;  height: 50vh;

}

.weater {

 margin-bottom: 40px;

}



    .autoplay-progress {

      position: absolute;

      right: 16px;

      bottom: 16px;

      z-index: 10;

      width: 48px;

      height: 48px;

      display: flex;

      align-items: center;

      justify-content: center;

      font-weight: bold;

      color: var(--swiper-theme-color);

    }



    .autoplay-progress svg {

      --progress: 0;

      position: absolute;

      left: 0;

      top: 0px;

      z-index: 10;

      width: 100%;

      height: 100%;

      stroke-width: 4px;

      stroke: var(--swiper-theme-color);

      fill: none;

      stroke-dashoffset: calc(125.6px * (1 - var(--progress)));

      stroke-dasharray: 125.6;

      transform: rotate(-90deg);

    }



.content{display: flex;  gap: 40px;}

.fitem{flex-basis: auto;}



.entry{padding: 40px; background: rgba(235,235,243, 0.8);}
.entry img{width: 100%; height: auto;}

.entry .im{display: flex; gap: 5px;}
.entry .im a{flex-shrink: 1; flex}