/* Nav-Window-editiert - 09-2020 */

@charset "UTF-8";

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f01
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
} 

html {
	-webkit-text-size-adjust: 100%;col logo
	-ms-text-size-adjust:     100%;
}
body {
  margin: 0;
  line-height: 1.375;
  font-family: Avenir Next, Avenir, Franklin Gothic, Arial, sans-serif;
  background: #f4f4f4;
}


h1,h2,h3,h4,h5,h6 {
  margin: 0;
}
h2,aside h3, article h3 {
  text-align: center;
}
h3 {
  padding-top: 1.5em;
}


a {
  color: rgb(0, 76, 152);
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}
a:link, a:visited {
	-webkit-transition: color .2s linear;
	}
a:hover {
	color: rgba(55,146,179,.8);
	}
	.active {
    background-color: #5487ba;
    color: white;
}
*:focus:not(.focus-visible) {
  outline: none;
}
.focus-visible {
  outline: lightgreen solid 2px;
}
      .wrapper {
        max-width: 40em;
        width: 95%;
        margin: 0 auto;
      }
      @media only all {
        .wrapper {
          max-width: 85.375em;
      }

.masterhead {
  background-color: rgb(255, 193, 037);
	display: flex;
}
.masterhead h1 {
  padding: 0.5em 0;
  color: #fff;
  text-shadow: -.1em .1em 0 rgba(0,0,0,0.3);
 margin: auto;
font-size: 24px;
font-size: 1.5rem;
}
.masterhead h1 span {
  font-size: 85%;
}
.logo {
  width: 20%;
}

figure {
  margin: 1em 0;
}
img {
  border-style: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
		  footer {
  border-top: 1px solid #004C98;
			  margin: 1em;
}
		  		  footer p {
			  padding-top: 1em;
}
		  
.navbar {
  background-color: rgb(255, 185, 015);
  margin-bottom: 1.375em;
}
nav {
  display: block;
}
.navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: rgb(255, 128, 0);
  display: flex;
  overflow: hidden;
}
.navbar li {
  float: left;
  text-transform: uppercase;
  text-align: center;
  box-sizing: border-box;
  flex: 1 1 auto;
  border-left: 1px solid #fff;
}
.navbar li:first-child {
  border-left: 0;
}
.navbar li a {
  display: block;
  text-decoration: none;
  line-height: 1.75em;
  padding: 1em .25em;
  color: #fff;
}

.navbar li > a:hover {
  background-color: rgba(255, 185, 015,.8);
}
.navbar .active a {
 
}
		  @media screen and (max-width: 40em) {
	.navbar {
		display: none;
	}}
.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	width: auto;
}
ul ul  {
	list-style: none;
}
		  .menu li {
border-bottom: 1px solid #fff;	  
}
		  		  .menu li a:link, .menu li a:visited {
			display: block;
			  text-decoration: none;
					  padding: 0.5em;
					  
}
		  		  		  .menu li a:hover {
			  text-decoration: underline;			  
}
}
		  
@media only screen and (min-width: 40em) {
  .navbar li a {
    padding: 1em 2em;
  }
}
	a.toggle-nav {
	position: absolute;
	top: 0.4rem;
	right: 0.5rem;
	display: inline-block;
	padding: 0.357em;
	font-weight: 600;
	border-radius: 0.2em;
	text-decoration: none;
	cursor: pointer;
}

a.toggle-nav:hover {
	background: #004C98;
	border: 1px solid #fff;
	color: #fff;
}

a.toggle-nav:link,
a.toggle-nav:visited,
a.toggle-nav:active,
a.toggle-nav:focus {
	background: #fff;
	border: 1px solid #004C98;
	color: #004C98;
}
      .row-duo > * {
        width: 50%;
      }
@media screen and (min-width: 40em) {
	a.toggle-nav, .menu {
		display: none;
	}
	
	h2:after {
  display: block;
  margin: .75em auto;
  width: 100px;
  content: "";
  border-bottom: 6px solid #004C98;
}
	.masterhead h1 {
font-size: 49px;
font-size: 3.0625rem;
}
.masterhead h1 span {
  font-size: 85%;
}
}
		  @media screen and (max-width: 40em) {

.masterhead .logo {
  max-width: 150px;
}
}
    .row {
      list-style: none; 
      padding: 0; 
      margin: 0 -.6875em; 
    }

    .row:after {
      content: '';
      display: block;
      clear: both;
    }

    .row-wrapping {
      font-size: 0; 
      margin: 0 -11px; 
      margin: 0 -.6875rem; 
    }

    .row-wrapping > .col {
      float: none;
      vertical-align: top;
      display: inline-block;
      font-size: 16px;
      font-size: 1rem;
    }

    .col {
      -moz-box-sizing: border-box;
           box-sizing: border-box;
      padding: 0 .6875em 1.375em;
      float: left; 
      width: 100%; 
    }
	aside .col {
	background-color: white;
	border-radius: 15px;
	margin-top: 2em;
	}

    .flexwrap .row {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
    }

    .flexwrap .col {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
    }
    .flexwrap .col > * {
      -webkit-flex: 1;
      -ms-flex: 1 0 auto;
      flex: 1;
    }

    @media only screen and (min-width: 50em) {
		.section {
	width: 75%;
	}
	.logo {
  width: 20%;
}
.title {
  width: 80%;
}
		.aside {
	width: 25%;
	}
	}
    .col:last-child {
      float: right;  
      }
  .grid-dl dt {
    border-top: 1px solid #ccc;
    padding: 0.5em 0 0.5em 0;
	margin: 0;
    font-weight: 600;
  }

  .grid-dl dd {
    margin: 0;
    padding: 0.5em 0 0.5em 0;
  }

  @media (min-width: 550px) { 

    .grid-dl {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .grid-dl dt {
      grid-column-start: 1;
		padding-right: 1em;
    }

    .grid-dl dd {
     grid-column-start: 2;
    }

    .grid-dl dt+dd {
      border-top: 1px solid #ccc;
    }

@supports (display: grid) {
	section {
    display: grid;
    grid-template-columns: 80px 1fr 80px;
    grid-column-gap: 10px;
}

section > * {
    grid-column: 1 / -1;
    min-width: 0;
}
section > p, section > h3, section > dl, section > ul {
    grid-column: 2;
    min-width: 0;
}

section > figure {
    grid-column: 1 / -1;
    margin: 20px 0;
}

section h2 {
font-size: 37px;
font-size: 2.3125rem;
  line-height: 3rem;
  margin-top: 3rem;
} 
section h3 {
    font-size: 28px;
font-size: 1.75rem;
  line-height: 1.25;
}
section p, section li, section dt, section dd {
  font-size: 1.5rem;
	line-height: 1.5;
}
section img {
  margin: 2em 0;
} 
article {
  display: grid;
  grid-column-gap: 2em;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: ".article-1 .article-2";
} 
#startseite section img {
  margin-top: 0;
} 
}
		  
  }
}