



body {
  background-image: linear-gradient(to bottom, #4677bc, #4e7fc1, #5787c5, #5f8fca, #6897ce, #719fd2, #7aa6d6, #83aeda, #8fb7de, #9bc1e2, #a8cae6, #b5d3ea);
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vH;
}


#logo {
  justify-content: center;
	margin-top: 25px;
	margin-bottom: 36px;
}
#logo img {
	max-width: 200px;
}
#logo a {
  width: 200px;
}




#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 {
  padding: 0 40px 80px 40px;

}


#inhalt {
  background: rgba(255,255,255,0.75);
  margin-top: 44px;
}

/*######################  FUSS ####*/
#fuss {
  display: none;
  position: fixed;
  left:0;
  bottom:0;
  height: 30px;
  background: #ddd;
}


/*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;
}


/* STARTSEITE ### */

#page-2 #inhalt {
  background: none;
}

#c25 {
  background: rgba(255,255,255,0.5);
  padding-left: 20px;
  margin-top: 10px;
}
#c27 p {
  color: #fff;
}
#c27 h4 {
  text-transform: uppercase;
  margin: 30px 0 20px 0;
  color: #fff;
  font-weight: 200;
}


.startseitenlistencontainer {
  display: flex;
  gap: 20px;
}
.startseitenliste {
  background: rgba(255,255,255,0.8);
  width: 33%;
  max-width: 33%;
}
.startseitenliste {
  padding: 0;
  margin: 8px 0;
  align-content: space-between;
}

.startseitenliste .PageTeaser {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  aspect-ratio: 1.7;
  max-width: 100%;
}
.startseitenliste .PageTeaserText {
  padding: 12px;
}
.startseitenliste .PageImage {
  aspect-ratio: 1.5;
  overflow: hidden;
  object-fit: cover;
}


.startseitenliste .PageTeaserTitle a, .blogitem .PageTeaserTitle a {
  text-decoration: none;
  /* font-family: 'IBM Plex Sans'; */
  font-family: 'IBM Plex Serif';
  font-size: 1.3em;
  font-weight: 400;
  color: #5f8fca;
}
.startseitenliste .PageTeaserSubtitle, .blogitem .PageTeaserSubtitle {
  font-family: 'IBM Plex Serif';
  text-transform: uppercase;
  font-size: 0.9em;
  font-weight: 400;
  color: #5f8fca;
  margin: 5px 0 8px 0;
}
.startseitenliste .PageTeaserAbstract {
  font-size: 0.9em;
}


.startseitenliste .PageWithoutImage {
  aspect-ratio: 1 / 0.646;
  width: 100%;

  background-image: linear-gradient(to right top, #83aeda, #86b0db, #89b3dc, #8cb5dd, #8fb7de);
  padding: 12px;
  color: #fff;
}

@media (max-width: 500px) {
  .startseitenlistencontainer {
    flex-wrap: wrap;
  }
  .startseitenliste {
    width: 100%;
    max-width: 100%;
  }
  .startseitenliste .PageTeaser {
    aspect-ratio: auto;
  }
}
@media (max-width: 768px) {
  .startseitenliste .PageWithoutImage {
    aspect-ratio: auto;
    padding-top: 36px;
  }
}
.startseitenliste a.PageWithoutImage {
  text-decoration: none;
  display:flex;
  flex-wrap: wrap;
  align-content: end;
  position: relative;
}
.startseitenliste a.PageWithoutImage span {
  display: block;
  width: 100%;
}
.startseitenliste .PageWithoutImage .PageTeaserTitle {
  text-decoration: none;
  /* font-family: 'IBM Plex Sans'; */
  font-family: 'IBM Plex Serif';
  font-size: 1.35em;
  font-weight: 400;
  color: #fff;
}
.startseitenliste .PageWithoutImage .PageTeaserSubtitle {
  padding-top: 12px;
  font-family: 'IBM Plex Serif';
  text-transform: uppercase;
  font-size: 0.9em;
  font-weight: 400;
  color: #fff;
  margin: 5px 0 8px 0;
}


.startseitenlistenlinie {
  border: none;
  border-bottom: solid 1px #354f74;
  margin: 0 8px;
}
.startseitenliste .morebutton, .blogitem .morebutton {
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'IBM Plex Sans';
  font-size: 0.66em;
  padding: 2px 12px;
  border: solid 1px #354f74;
  border-radius: 3px;
  width: 70px;
  /* float: right; */
  display: inline-block;
  margin: 12px 12px 14px 12px;;
}
.row.startseitenliste .col-lg-6 {
  padding: 8px;
}


/* BLOG LISTE ########### */

.blogitem {
  background: rgba(255,255,255,0.8);
  margin-bottom: 24px;
  padding: 0;
}
.blogitem  .col-lg-3 {
  margin:0;
  padding:0;
  background-image: linear-gradient(to right top, #83aeda, #86b0db, #89b3dc, #8cb5dd, #8fb7de);
}
.blogitem .morebutton {
  margin: 12px 0 24px 0;
}
.blogitem .PageTeaser {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  min-height: 178px;
}
.blogitem a {
  display: block;
}
.blogitem  div {
  width: 100%;
}

.blogitem .PageImage {
  aspect-ratio: 1;
  overflow: hidden;
  object-fit: cover;
}
.blogitem .PageImage img, .blogitem .PageImage a {
  min-height: 100%;
  width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
}


/* BLOG Detail ################## */

.detail.col-lg-12 {
  padding:0;
  margin:0;
}


.detail #PageTitel h1{
  /* padding: 0 36px; */
  color: #fff;
  font-family: 'IBM Plex Serif';
  font-size: 4em;
  font-weight: 300;
  margin-top: 24px;
}

.detail #PageUntertitel {
  /* padding: 6px 36px; */
  font-size: 1.4em;
  font-weight: 300;
  margin-top: 16px;
}
.detail #PageUntertitel, .detail #PageLeadin p{
  color: #fff;
}

.detail #PageLeadin {
  padding: 12px 36px;
}



.detail-content {
  background: rgba(255,255,255,0.8);
  margin-top: 12px;
  padding-bottom: 36px;
}
.detail-content .ce-bodytext, .detail-content header {
  padding: 12px 36px 12px 36px;
}

.detail-image {
  margin: 36px 0;
  /* border: 12px solid rgba(255,255,255,0.8); */
  padding: 36px;
  text-align: center;
  background: rgba(255,255,255,0.8);
  margin-bottom: -12px;
}
.detail-image-copyright {
  position: relative;
  top: -20px;
  font-size: 0.6em;
  font-family: 'IBM Plex Sans';
  color: #fff;
  padding-right: 36px;
  text-align: right;
}
.detail-image-copyright::before {
  content:"\00a9";
}