:root {
  /* HAUPTFARBEN */
  --f0: #524f46;
  --f1: #c0c7b7;
  --f2: #94a89c;
  --f3: #6b8884;
  --f4: #48686f;
  --f5: #2f4858;
  /* extrahell */
  --f0a: #e5e6d8;
  --f0b: #DADBCF;
  /* WARNEN (gelb) */
  --fg0: #f7edbd;
  --fg1: #f5e7a5;
  /* TYPO */
  --serif: 'IBM Plex Sans', serif;
  --sansserif: 'IBM Plex Sans', sans-serif;
  --shareIcon: #883557;
  --shareIconHover: #23acd7;
}


body {
  background: #e5e0cc;
  /* background: #dad4be; */
}

#topnavi, #logo {
  justify-content: center;
}

#logo a {
  color: #fff;
  font-size: 1.8em;
  margin: 50px 0 50px 0;
  font-weight: 400;
  text-decoration: none;
}
#logo a:hover {
  color: var(--f0);
  text-decoration: none;
}

#ganzebreiteoben .frame {
  margin-bottom: 0;
}
#ganzebreiteoben {
  margin-bottom: 40px;
  margin-top: 30px;
}
#ganzebreiteoben figure.image {
  margin:0;
  padding:0;
}
#ganzebreiteoben .ce-above .ce-gallery {
  margin-bottom:0;
}
/*######################  MITTE  ##*/
#mitte, #inhalt {
  margin-bottom: 150px;
}

#unten {
  margin-bottom: 66px;
}

/*######################  FUSS ####*/
#fuss {
  display: none;
  position: fixed;
  left:0;
  bottom:0;
  height: 30px;
  background: #ddd;
}


/* Social Share ######################### */

 p#socialshareheader {
  margin-top: 40px;
  clear: both;
 }

 #socialshare {
  display: flex;
  justify-content: space-between;
  gap: 20px;
 }

 a.socialshare svg {
  fill: var(--f0);
  width: 30px;
  height: 30px;
}
a.socialshare:hover svg {
  fill: var(--shareIconHover);
}

a.socialshare.bluesky:hover svg {
  fill: #0085ff;
}
a.socialshare.facebook:hover svg {
  fill: #0866ff;
}
a.socialshare.whatsapp:hover svg {
  fill: rgb(29, 170, 97);
}
a.socialshare.instagramm:hover svg {
  fill: #f5253d;
}
a.socialshare.twitter:hover svg {
  fill: #000000;
}


/*Fancy box weiß ############*/

.pagelayout-1 .fancybox-bg {
    background: #fff;
  }
.pagelayout-1 .fancybox-caption {
    background: none;
    color: #aaa;
  }
.pagelayout-1 .fancybox-button {
    background: none;
    color: #aaa;
}
.pagelayout-1 .fancybox-button:hover {
  color: #666;
}
.pagelayout-1 .fancybox-is-open .fancybox-bg {
  opacitiy: 1;
}


#infobox {
  display: none;
  position: absolute;
  background: #fff;
  box-shadow: 3px 3px 7px rgba(0,0,0,0.2);
  padding: 10px;
  width: 400px;
  max-width: 400px;
  border: 1px solid #000;
}


/* SCROLLING ################## */
@media (prefers-reduced-motion:no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
html {
  /* Abstand fixes Top-Menu: */
  scroll-padding: 0px;
}


/* Newsletter Liste ## */

 a.PageTeaser {
  display: inline-block;
  background: #fff;
  padding: 20px 20px 10px 20px;
  width: 250px;
  max-width: 250px;
  margin: 0 25px 25px 0;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  text-decoration: none;
  vertical-align: top;
  height: 315px
 }
 a.PageTeaser:hover {
  color: var(--f0);
  /* opacity: 0.9; */
  box-shadow: none;
 }
a.PageTeaser:hover img {
  filter: grayscale(0);
 }
span.bild {
  display: block;
  width: 100%;
  text-align: center;
  padding-top: 42px;
  padding-bottom: 42px;
 }
 span.bild img {
  margin: auto;
  filter: grayscale(1);
 }
span.title {
  display: block;
  text-transform: uppercase;
  font-size: 0.8em;
  text-align: center;
  font-weight: 400;
  padding-bottom: 12px;
}
span.subtitle {
  display: block;
  text-align: center;
}


/* Newsletter Detail #### */

#PageUntertitel {
  margin-top: 66px;
}
.Newsletter h1, .Newsletter h2 {
  font-size: 1.8em;
  font-weight: 300;
  color: var(--f0);
}

#NextPage {
  background: rgba(255, 255, 255, 0.4);
  position: absolute;
  padding: 10px 20px;
  /* margin-top: 50vH; */
  left: 0;
  bottom: 200px;
  width: 100%;
  font-size: 0.8em;
}



/* Newsletter Detail Link NEXTPAGE ### */

a#NextPage {
  display: block;
  text-decoration: none;
  color: var(--f0);
}

#NextPage span {
  display: block;
}

a#NextPage:hover {
  background: #cdc8b8;
  color: #fff;
}
a:hover #NextPage {
  color: #fff;
}
.NextPageText {
  opacity: 0.5;
}
.NextPageSubtitle {
  font-style: italic;
}