/* lato-300 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../Fonts/lato-v24-latin-300.woff2') format('woff2'); 
}
/* lato-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../Fonts/lato-v24-latin-regular.woff2') format('woff2'); 
}
/* lato-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../Fonts/lato-v24-latin-700.woff2') format('woff2'); 
}

.frame-background-primary {
  --frame-background: #0f577f;
}


main .frame {
  padding-left: 1rem;
  padding-right: 1rem;
}
div.news-list-view
{
display:flex;
  flex-wrap:wrap;
  gap: 1rem;
}

div.news-list-view div.article {
  width: calc(25% - 1rem);
  margin: 0 0rem 2rem 0;
  background: #fff;
  border-radius: 1rem;
  padding: 1rem;
  border: solid 1px #ccc;
}
div.news-list-view div.article div.header, div.news-list-view div.article div.news-img-wrap, div.news-list-view div.article div.teaser-text {
  width: 100%;margin:0;
}
div.news-list-view div.article div.header h3 a {
color: #000;text-decoration: none;margin: .5rem 0 1rem 0;display:block;
}
div.news-list-view div.article div.news-img-wrap a, div.news-list-view div.article div.news-img-wrap img {
  width: 100%;margin:0;
}
div.news div.article:last-child {
  padding-bottom: auto;
  margin-bottom: auto;
}
* {margin:0;padding:0;box-sizing: border-box}
header#pageHeader div.zeile {
        position:relative;
		}
header#pageHeader nav {
        position:relative;
}
header#pageHeader div#aufZu {
        position:absolute;right:1.5rem;top: 2em;z-index: 100;display:block;
}
header#pageHeader div#aufZu img {
        height: 2em;width:auto;
}
	header#pageHeader div.zeile #logo {
       position:absolute;
      left: 0%; top: 0em;width: 100%;
		}
	header#pageHeader div.zeile #mainNav {
        position:absolute;
      left: -110%; top: 5em;
      background: #0f577f;
      padding: 2rem 0 1rem 0;width: 100%;
      transition: all .5s;
      min-height: 66vh;
		}
input:checked ~ header#pageHeader #mainNav {
  left:0;
}
header#pageHeader #hamburger {
  display: block;
}
header#pageHeader #ix {
  display:none;
}
input:checked ~ header#pageHeader #hamburger {
  display: none;
}
input:checked ~ header#pageHeader #ix {
  display:block;
}
		header#pageHeader div.zeile #mainNav > ul  {
           list-style: circle;
		}
		header#pageHeader div.zeile  #mainNav > ul > li >  a  {
			display:inline-block;
			color: #fff;
            font-size: 1em;
			font-weight: 600;
			text-decoration: none;
		}


	html {

		}
		html, body  {
			font-family: 'Lato', sans-serif;
          line-height: 1.35;
		}
  body {
    background: #e7eef2;
  }

 
 .frame-header > h2:last-child, h2 {font-size: 1.618em; margin: 0 0 .75em -.05em;font-weight: 400;}
input {display:none;}
		header#pageHeader {
			background-color: #e7eef2;
          background-repeat:no-repeat;
            background-size: 100% auto, cover;
          background-position: left bottom, right center;
			color: #fff;
          margin-bottom: -2.5em;
          text-shadow: rgba(15,87,127,.5)
		}
		header#pageHeader  a  {
			padding: 0em 0 0 .25em;
			color: #0f577f;
            font-size: 1em;
			font-weight: 600;
			text-decoration: none;
		}
		header#pageHeader #logo  a  {
			color: #fff;
		}
		header#pageHeader  a:hover  {
			text-decoration: underline;
		}
		header#pageHeader		h1 {
			font-size: 2em;
          font-weight: 400;
			line-height: 1.5;
			margin: 0 0 1.5rem 0;
          display: inline;
          background: #fff;
          color: #0f577f;
          padding: .25rem 1.5rem .5rem 1.5rem;
          border-top-left-radius: 1rem;
          border-bottom-right-radius: 1rem;
          box-shadow: 5px 5px 10px rgba(0,0,0,0.25)
		}		


		header#pageHeader		 h1 .hSpace {
			margin-left: 1.5rem;
		}	

header#pageHeader		p {
			font-size: 1.35em;
			line-height: 1.5;
			margin: 0 0 1.5rem 0;
            background: #fff;
          color: #000;
          padding: 1rem 1.5rem;
		}
		header#pageHeader		strong {
			text-transform:uppercase;
		}
		header#pageHeader #info {
			padding: .5em 1.35em .5em 1rem;
          	margin-bottom: 1px;
          text-align: right;
		}
		header#pageHeader #info a {
			color: #fff;
		}
		#logo  {
          font-size: 2em; font-weight: 600;
          padding: .65em 0 0 1rem;
		}
		#logo  img {
			width: 80px; height:auto;margin: 0 .125em  0em -.125em ;

  vertical-align: middle;

		}





	
		header#pageHeader #pageHeading {
			padding: 15em 25% 7.5em 0rem;
		}
		.zeile {
			margin:0 auto;
			display:flex;flex-wrap:wrap;
		}
		.col-12 {
			width: 100%
		}
		.col-9 {
			width: 75%
		}	
        .col-8 {
			width: 66.6666%
		}
        .col-4 {
			width: 33.3333%
		}
        .col-3 {
			width: 25%
		}

		.white {
			background: #0f577f;
			color: #fff;
		}
.align-right {
  text-align: right;
}

.button {
  background: #0f577f;
  color: #fff;padding: .4em 1em .5em; border-radius:.5em;
  text-decoration: none;
  display:inline-block;
}

.card-title {
  font-size: 1.618rem;
  color: #000;
  margin-bottom: 0.75rem;
}

.frame-background-light {
  --frame-color: #212121;
  --frame-background: #fff;
  --frame-link-color: #577760;
  --frame-link-hover-color: #465f4d;
}
.space {padding-left:1rem;padding-right:1rem}
footer {
  color:#fff;
  background-color: #0f577f;
  padding: 1em 0 5em 0;
}
footer   .frame {
    --frame-spacing: 0;
  }
footer   h3, footer  .h3 {
    font-size: 1.618rem;
  font-weight: 400;
  margin-bottom: .75em;
  }
footer ul {
  margin-left: -.75rem;
}
footer hr {
  margin-top: 1.25rem;
}
footer .frame a[class=""], .frame a:not([class]) {
  color: #fff;
}
footer .nav-link {
  color: #fff;
}
footer .nav-link:hover {
  color: #fff;
}
.kontainer {
  position: relative;
}
.vorne {
  z-index: 100;
}
.hinten {
  z-index: 1;
}
@media screen and  (min-width: 576px) {
  .zeile{
    max-width: 540px;
  }
  header#pageHeader		h1 {
			font-size: 2.618em;}
}
@media screen and  (min-width: 768px) {
  .zeile {
    max-width: 720px;
  }
  .col-md-6 {
    width: 50%;
  }
}
@media screen and  (min-width: 992px) {

    	header#pageHeader div.zeile #logo {
      position: relative; left:auto; top: auto; width: 33.3333%;
		}
  header#pageHeader #logo a {
  color: #0f577f;
}
  header#pageHeader div#aufZu {
        display: none;
}
    	header#pageHeader  nav  {
      background: rgba(255,255,255,0.9); color: #000;
		}
  	header#pageHeader  div.zeile #mainNav {
			text-align: right;z-index: 100;      padding:0rem 0 0rem 0;width: 100%;
      position: relative;left:auto; top: auto; width: auto;width: 66.6666%; margin:auto;background: transparent;min-height: auto;
		}
		header#pageHeader div.zeile #mainNav ul, header#pageHeader div.zeile #mainNav ul li  {
			display:inline-block;
          position:relative;
          margin-bottom:0;
		}

		header#pageHeader div.zeile #mainNav ul li ul, header#pageHeader div.zeile #mainNav ul li ul li  {
    		display:block;
            min-width: 10em;
          margin:0;
		}
		header#pageHeader div.zeile #mainNav ul li ul  {
			display:none;
text-align: left;
          position:absolute;
          padding:0 0 0 1.25rem;
		}
		header#pageHeader div.zeile #mainNav ul li:hover ul  {
			display:block;
		}
		header#pageHeader div.zeile #mainNav ul li ul li:first-child a {
          border-top: solid 1px #80c8dd;
		}
		header#pageHeader div.zeile #mainNav ul li ul li a {
                     background:#fff;  
          color: #0f577f;
             
          border-bottom: solid 1px #80c8dd;
            display:block;
          
          padding: .125em 1em .25em 1em;
            font-size: 1rem;
			font-weight: 400;
            text-transform: none;
          transition: all .5s;
		}
		header#pageHeader div.zeile #mainNav ul li ul li a:hover {
            background: #0f577f; 
          color: #fff;
		}
  
  .zeile, main .frame-layout-0, footer .frame-layout-0 {
    max-width: 960px;
    margin-left:auto;
    margin-right:auto;
  }
    .col-lg-4 {
    width: 33.3333%;
  }
  header#pageHeader div.zeile  #mainNav ul li  a  {
	padding: 1.75em 1em 1.7em;
    font-size: 1.125em;
    color: #0f577f;
  }
}
@media screen and (min-width: 1200px) {
  .zeile, main .frame-layout-0, footer .frame-layout-0 {
    max-width: 1140px;
  }
  header#pageHeader  #mainNav ul li  a  {
	padding: 1.5em 1em 1.75em;
    font-size: 1.25em;
  }
}
@media screen and (min-width: 1400px) {
  .zeile, main .frame-layout-0, footer .frame-layout-0 {
    max-width: 1320px;
  }
}