﻿@font-face {
    font-family: 'Lexend';
    src: url(../fonts/'Lexend-Regular.woff2') format('woff2'),
        url(../fonts/'Lexend-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url(../fonts/'Lexend-Bold.woff2') format('woff2'),
        url(../fonts/'Lexend-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url(../fonts/'Lexend-Light.woff2') format('woff2'),
        url(../fonts/'Lexend-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat Alternates';
    src: url(../fonts/'MontserratAlternates-Bold.woff2') format('woff2'),
        url(../fonts/'MontserratAlternates-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url(../fonts/'MontserratAlternates-Regular.woff2') format('woff2'),
        url(../fonts/'MontserratAlternates-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url(../fonts/'MontserratAlternates-SemiBold.woff2') format('woff2'),
        url(../fonts/'MontserratAlternates-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url(../fonts/'MontserratAlternates-Medium.woff2') format('woff2'),
        url(../fonts/'MontserratAlternates-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
body{
    margin: 0;
    padding: 0;
    background: rgb(255,255,255);
    font-family: Lexend, sans-serif;
    color: #212529;
    font-size: 1.1rem;
}
.clear{

}

.clear::after{
    display: block;
content: " ";
clear: both;
height: 0;
overflow: hidden;
}
h1{
    margin: 1.5rem 0 1.5rem 0;
    padding: 0;
    color:#58A6DA;
    position: relative;
    text-align: center;
    font-weight: 600;
    font-style: normal;
    font-size: 2.2rem;
    font-family: 'Montserrat Alternates',sans-serif;
}
h1 span{
    position: relative;
}

/*h1 span::after{
  content: "";
width: 60px;
height: 4px;
background: #58A6DA;
position: absolute;
left: 3px;
bottom: -5px;
}
*/
h2{
    margin: 1.5rem 0 1.5rem 0;
    padding: 0;
    color: #58A6DA;
    font-weight: 500;
    font-style: normal;
    font-size: 1.8rem;
    font-family: 'Montserrat Alternates',sans-serif;
}
div.datum{
   /*idth: 20%;*/
    width: 260px;
    float: left;
}
div.beschreibung{
     width: calc(100% - 260px);
    overflow: hidden;
    float: right;
    box-sizing: border-box;
    padding: 0 0 20px 20px;
    border-left: 1px solid #ACAAAA;
    border-bottom: 1px solid #ACAAAA;
    position: relative;
    margin: 0;
}
@media (max-width:800px){
 div.datum{
     width: 100%;
     float: none;
 }
 div.beschreibung{
     width: 100%;
     float: none;
 }

}
.datum h3{
    position: relative;
}
.datum h3::after{
   content: "";
   width: 18px;
   height: 18px;
   border: 1px solid #000;
   background: #319418;
   border-radius: 50%;
   position: absolute;
   top: 9px;
   right: -9px;
   z-index: 10000;
   transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
}
.clear:hover .datum h3::after{
  background: #58A6DA;
  width: 22px;
   height: 22px;
   top: 9px;
   right: -11px;
}
 @media (max-width:800px){
  .datum h3::after{
      display: none;
  }

 }

.clear:hover .beschreibung{
  color: #4B4B4B;
}

h3{
    margin: 1.5rem 0 1.5rem 0;
    padding: 0;
    color: #190B88;
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-size: 1.2rem;
    font-family: 'Montserrat Alternates',sans-serif;
}
h3.tagebuch{
  margin:1.5rem 0 0 0;
    padding: 0;
    color: #190B88;
    font-weight: normal;
    font-size: 2rem;
    font-family: 'Montserrat Alternates',sans-serif;
    }
h3.tagebuch span{
      border-bottom: 5px solid #ACAAAA;

    }

@media (max-width:800px){
h3.tagebuch{
    margin: 0 auto;
}

}
p{
    line-height: 160%;
}
p.readmore a{
    color: #fff;
    background: #190B88;
    position: relative;
padding: 8px;
display: inline-block;
margin: 0;
letter-spacing: 1px;
text-decoration: none;
transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-webkit-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
}
p.readmore a:hover{
    background: linear-gradient(180deg, rgba(25,11,136,1) 0%, rgba(56,39,189,1) 100%);
}



strong{
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
img{
    max-width: 100%;
  height: auto;
}

img.randunten{
  border-bottom: 5px solid #43BBCD;
  height: auto;
}

.abstand{
    margin-bottom: 4.5rem;
    margin-top: 4.5rem;
    position: relative;
}
.abstand img{
    height: auto;
}
 /*--------Bilder rechts- und linksbuendig-------*/
.rechtsbuendig, .linksbuendig{
   width: 35%;
    height: auto;
position: relative;
}
.rechtsbuendig{
    float: right;
    margin: 0 1px 1.5rem 1.5rem;
}
.linksbuendig{
    float: left;
    margin: 0 1.5rem 1.5rem 0;
}
.rechtsbuendig img, .linksbuendig img{
    width: 100%;
    height: auto;
    box-sizing: border-box;
    display: block;
   border: 5px solid #190B88;
}
@media (max-width:800px){
   .rechtsbuendig, .linksbuendig{
       width: 100%;
       display: block;
       float: none;
       margin: 0;
   }
 }

/*------ Bilder Dreispaltig-----*/
 ul.dreispaltig{
  list-style: none;
  list-style-image: none;
  margin: 1.5rem 0 0 0;
  padding: 0px;
}
ul.dreispaltig::after, ul.dreispaltig::before{
  content: " ";
  clear: both;
  display: block;
}
ul.dreispaltig li{
  width: calc(30% + 10px);
  margin: 0 calc(5% - 20px) 5% 0;
  padding: 0;
  float: left;
box-sizing: border-box;
}
@media (max-width:800px){
ul.dreispaltig li{
 display: block;
 width: 100%;
 margin: 0 0 10px 0;
}
}
ul.dreispaltig li:nth-child(3n+0){
  margin-right: 0;
}
ul.dreispaltig li img{
 max-width: 100%;
 height: auto;
 box-sizing: border-box;
 display: block;
  border: 5px solid #190B88;
}
@media (max-width:800px){
 ul.dreispaltig li img{
width: 100%;
border-radius: 5px;
height: auto;
box-sizing: border-box;
display: block;
}
}
ul.dreispaltig li a{
    position: relative;
    display: block;
     overflow: hidden;
}

ul.dreispaltig li a:after{
    background: rgba(25,11,136,0.5) url("../images/lupe.png") no-repeat center center;
content: " ";
left: 0;
opacity: 0;
position: absolute;
bottom: 0;
transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
width: 100%;
height: 100%;
}
ul.dreispaltig li a:hover:after{
    background: rgba(25,11,136,0.5) url("../images/lupe.png") no-repeat center center;
content: " ";
left: 0;
opacity: 1;
position: absolute;
bottom: 0;
width: 100%;
height: 100%;

}
/*---- Bilder dreispaltig Ende----------*/
.bilder {
  -webkit-column-count: 3;
  -webkit-column-width: 33%;
  -webkit-column-gap: 10px;
  -webkit-column-rule: 0px choose rgba(25,11,136,0.5);
  -moz-column-count: 3;
  -moz-column-width: 33%;
  -moz-column-gap: 10px;
  -moz-column-rule: 0px choose rgba(25,11,136,0.5);
  -o-column-count: 3;
  -o-column-width: 33%;
  -o-column-gap: 10px;
  -o-column-rule: 0px choose rgba(25,11,136,0.5);
  column-count: 3;
  column-width: 33%;
  column-gap: 10px;
  column-rule: 0px choose rgba(25,11,136,0.5);
  box-sizing: border-box;
}
.bilder span{
  padding-left: 10px;
}
@media (max-width:800px){
  .bilder {
  -webkit-column-count: 1;
  -webkit-column-width: 100%;
  -webkit-column-gap: 0px;
  -webkit-column-rule: 0px choose rgba(25,11,136,0.5);
  -moz-column-count: 1;
  -moz-column-width: 100%;
  -moz-column-gap: 0px;
  -moz-column-rule: 0px choose rgba(25,11,136,0.5);
  -o-column-count: 1;
  -o-column-width: 100%;
  -o-column-gap: 0px;
  -o-column-rule: 0px choose rgba(25,11,136,0.5);
  column-count: 1;
  column-width: 100%;
  column-gap: 0px;
  column-rule: 0px choose rgba(25,11,136,0.5);
  box-sizing: border-box;
}
}
.bilder img, .bilder video {
/*  - border: 8px solid #fff;
    border-radius: 5px;
  webkit-box-shadow:  0 0 0 1px rgba(53,56,56,1);
-moz-box-shadow:  0 0 0 1px rgba(53,56,56,1);
box-shadow:  0 0 0 1px rgba(53,56,56,1); */
border: 5px solid rgba(25,11,136,1);
height: auto;
max-width: 100%;
box-sizing: border-box;
  position: relative;
  display: block;
}
.bilder p, .bilder div{
line-height: 0;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;

}
.bilder div{
  display: inline-block;
}
.zoom{

}

a.zoom, .bilder a{
    position: relative;
    display: block;
    overflow: hidden;
}

/*article a.zoom img{
  box-sizing: border-box;
  position: relative;
} */
a.zoom::after, .bilder a::after{
    background: rgba(25,11,136,0.5) url("../imgages/lupe.png") no-repeat center center;
content: " ";
left: 0;
opacity: 0;
position: absolute;
bottom: 0;
transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
width: 100%;
height: 100%;
}
a.zoom:hover::after, .bilder a:hover::after{
    background: rgba(25,11,136,0.5) url("../images/lupe.png") no-repeat center center;
content: " ";
opacity: 1;
position: absolute;
bottom: 0;
transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
width: 100%;
height: 100%;
}
#logo_navi{
    margin: 0 auto 0 auto;
    width: 90%;
    max-width: 1500px;
    height: 113px;
}
#logo_navi::after{
 display: block;
content: " ";
clear: both;
height: 0;
overflow: hidden;
}
#logo{
    float: left;
    width: 381px;
    position: relative;
    height: 113px;
}
#logo::after{
    content: '';
    height: 1px;
    background: #ACAAAA;
    position: absolute;
    width: 221px;
    bottom: -1px;
    right: 0;
    left: 160px;
}

@media (max-width:800px){
  #logo{
      width: 100%;
      text-align: center;
  }
    #logo::after{
      content: '';
    height: 0px;
    }

}
#navigation{
    float: right;
    height: 114px;
    border-bottom: 1px solid #ACAAAA;
    width: calc(100% - 381px);
    position: relative;
}
@media (max-width:800px){
 #navigation{
     display: none;
 }

}
#navigation nav ul{
   list-style-image: none;
   list-style: none;
margin: 0;
padding: 0;
width: auto;
float: right;
position: absolute;
bottom: 10px;
right: 0;
display: block;
}
#navigation nav ul li{
    float: left;
position: relative;
margin-left: 15px;
}
#navigation nav ul li a{
 font-size: 1.1rem;
font-family: 'Lexend', sans-serif;
font-weight: normal;
    font-style: normal;
    font-display: swap;
color: #ACAAAA;
text-decoration: none;
}
#navigation nav ul li a:hover{
    color: #212529;
}

#navigation nav ul li ul{
  visibility: hidden;
  opacity: 0;
  height: auto;
  position: absolute;
  left: 0;
  top: 0rem;
  background: #fff;
  padding-top: 0px;
  z-index: 10000;
  transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
}
#navigation nav ul li ul li a{
   border-left: 1px solid #ACAAAA;
  border-right: 1px solid #ACAAAA;
  border-bottom: 1px solid #ACAAAA;
  background: #fff;
   display: block;
   color: #ACAAAA
}
 #navigation nav ul li ul li.active > a, #navigation nav ul li.active > a  {
     color: #212529
 }

#navigation nav ul li:hover a+ul{
  visibility: visible;
  top: 3rem;
  opacity: 1;
}
@media (max-width:800px){
 #navigation nav ul li a ul{
  visibility: visible;
  height: auto;
  position: relative;
  left: 0;
  top: 110px;
  background: #fff;
  padding-top: 0px;
  z-index: 0;
}
}
#navigation nav ul li ul li{
  display: block;
  float: none;
  height: auto;
  line-height: 1rem;
  margin-left: 0;
}
#navigation nav ul li ul a{
  border-radius: 0;
  padding: 10px;
  display: block;
  line-height: 1rem;
  white-space: nowrap;
}
@media (max-width:800px){
  #navigation nav ul li ul a{
    padding: 10px 0 10px 20px;
  }
}
#headerbildstartseite{
   width: 100%;
   overflow: hidden;
   border-bottom: 5px solid rgba(25,11,136,1);
   position: relative;
   z-index: 2 !important;
}
#headerbild{
    width: 100%;
   overflow: hidden;
  height: 47vh;
  overflow: hidden;
   border-bottom: 5px solid rgba(25,11,136,1);
   position: relative;
   z-index: 2 !important;
   display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
#video{
width: 100%;
   height: calc(100vh - 113px);
   overflow: hidden;
   border-bottom: 5px solid rgba(25,11,136,1);
   position: relative;
   z-index: 2 !important;
}
#video video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
  object-position: center center;
}
@media (max-width:800px){
  #headerbild, #video{
      display: none;
  }

}
#headerbild img{
/* width: 5000px;
  height: auto;
   object-fit: cover;
object-position: 50% 50%;*/

}
main{
 margin: 50px auto 50px auto;

 box-sizing: border-box;
 position: relative;
 }
 main::after{
     content: '';
     width: 10px;
     height: 100%;
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     background:#58A6DA;
 }
 article{
  width: 90%;
  max-width: 1500px;
   padding-left: 160px;
   box-sizing: border-box;
  margin: 0 auto;
 }
 @media (max-width:800px){
  article{
    padding-left: 0px;
  }
 }


#video + main{

    z-index: 100 !important;
    position: relative;
}

#video + main > article{
    padding-top: 1rem;
}

article a{
    color: #43BBCD;
    text-decoration: none;
}


.schmall{
    width: 80%;
    margin: 0 auto;
}

#top{
  text-align: center;
   position: relative;
}
#top img{
position: absolute;
  top: -15px;
  z-index: 2000;
}
div.bottom{
  box-sizing: border-box;
  width: 90%;
  max-width: 1500px;
  padding-left: 160px;
  margin: 0 auto;
}
 @media (max-width:800px){
     div.bottom{
         padding-left: 0;
     }

 }

footer{
   background:#58A6DA;
   background: linear-gradient(180deg, rgba(25,11,136,1) 0%, rgba(56,39,189,1) 100%);
   border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
text-align: center;
}
footer nav{
    padding: 35px 0 35px 0;
}

footer > nav > ul.navbar-nav{
    display: inline;
vertical-align: middle;
text-align: center;
list-style: none;
  list-style-image: none;
}
footer > nav > ul.navbar-nav li {
  display: inline;
  margin: 0;
}
footer > nav > ul.navbar-nav > li > a {
  display: inline-block;
}
footer > nav > ul.navbar-nav li a {
    font-family: Lexend,sans-serif;
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  color: #fff;
  font-size: 1rem;
  padding: 0px 15px 0px 15px;
  text-decoration: none;
  text-transform: none;
  border-right: 1px solid #fff;
  transition: all 800ms ease-out;
  -moz-transition: all 800ms ease-out;
  -webkit-transition: all 800ms ease-out;
  -o-transition: all 800ms ease-out;
}
footer nav ul.navbar-nav li:last-child a {
  border: none;
}
footer nav ul.navbar-nav li a.hover, footer nav ul.navbar-nav li.active  a{
    color: #fff;
}
.item-content{
    position: relative;
}

/*----Mobiles Menue----*/
.sidenav,#open{
    display: none;
}
@media (max-width:800px){
.sidenav {
    width: 0;
    position: absolute;
    z-index: 10000;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y:auto;
    transition: 0.5s;
    display: block;
    padding-top: 60px;
    padding-bottom: 0px;
    border-bottom: 1px solid #fff;
    box-shadow: 0px 1px 10px 0px #968c8c; -moz-box-shadow: 0px 1px 10px 0px #968c8c; -webkit-box-shadow: 0px 1px 10px 0px #968c8c;
}
.sidenav h3{
    color: #fff;
    font-size: 1.2rem;

}

.sidenav .closebtn{
     position: absolute;
    top: 0;
    right: 0;
}

.sidenav ul{
    margin: 0 0 0 5px;
    border: none;
}
.sidenav ul{
  list-style: none;
  list-style-image: none;
  margin: 0 0 0 0;
  padding: 0;
}
.sidenav li{
  display: block;
  border-bottom: 1px dotted #ACAAAA;
    padding: 2px 0;
}
.sidenav li ul li{
  padding: 2px 0 2px 20px;
}
.sidenav a{
    color: #ACAAAA;
    margin: 8px 8px 8px 0;
    padding: 5px;
  border-left:none;
    font-size: 0.9rem;
    display: block;
    text-decoration: none;
    text-transform: none;
}
.sidenav a.closebtn{
    padding: 0;
    margin: 0;
}

/*.sidenav a[href^="#"]{
    display: none;
}*/

.sidenav a:hover{
  background-color: #fff;
  color: #000;
}
.sidenav ul ul{
  display: block;
  visibility: visible;
  background: #fff;
}


#open{
    background: #173C43;
    text-align: right;
    cursor:pointer;
    display: block;
    margin-bottom: 0px;
}
#mobilediv::after{
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}
}
/*--------Pagination-----*/
.pagination__wrapper {
  display: flex;
  padding-left:2px;
  list-style: none;

}
.com-content-category-blog__pagination{
    margin-top: 15px;
}

.ms-0 {
  margin-left: 0 !important;
}
.mb-4 {
  margin-bottom: 1.5rem !important;
}
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #43bbcd;
  border-color: #43bbcd;
}

.page-item .page-link {
    padding: 10px;
  position: relative;
  display: block;
  color: #43bbcd;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #43bbcd;
  transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
}
.disabled{
    display: none;
}
li.page-item:last-child {
    display: none;
}
li.page-item:nth-child(1) {
    display: none;
}
li.page-item:nth-child(2) {
    display: none;
}
li.page-item:nth-last-child(2) {
    display: none;
}
.pagination li{
    margin-right: 10px;
}

@media (max-width:800px){
   .pagination{
       flex-direction: column;
   }

}

