@charset "utf-8";

@font-face {
  font-family: 'Kievit-Bold';
  src: url('https://media.wub-service.de/common/fonts/Kievit/1473259/bb94c1b9-8e3a-4be4-9806-a334a6211ddc.eot'); /* IE9 Compat Modes */
  src: url('https://media.wub-service.de/common/fonts/Kievit/1473259/bb94c1b9-8e3a-4be4-9806-a334a6211ddc.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://media.wub-service.de/common/fonts/Kievit/1473259/0d096877-d31b-4b43-b54c-18eefae0a26a.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://media.wub-service.de/common/fonts/Kievit/1473259/a2dc5105-304a-4e4a-8b33-afb9153b36cc.woff') format('woff'), /* Pretty Modern Browsers */
       url('https://media.wub-service.de/common/fonts/Kievit/1473259/23954f93-7c28-47d1-ba24-1684bfa076e0.ttf')  format('truetype'); /* Safari, Android, iOS */
	   font-weight: bold;
}
@font-face {
  font-family:"Kievit-Medium";
  src:url("https://media.wub-service.de/common/fonts/Kievit/1473295/2adcd26a-1976-42fe-a53b-58b4bb023e71.eot"); /* IE9 Compat Modes */
  src:url("https://media.wub-service.de/common/fonts/Kievit/1473295/2adcd26a-1976-42fe-a53b-58b4bb023e71.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("https://media.wub-service.de/common/fonts/Kievit/1473295/ada2ab33-e8a1-46ad-bb29-7f14c50209db.woff2") format("woff2"), /* Super Modern Browsers */
  url("https://media.wub-service.de/common/fonts/Kievit/1473295/828846f6-6e09-4745-82a9-a17c1042e12b.woff") format("woff"), /* Pretty Modern Browsers */
  url("https://media.wub-service.de/common/fonts/Kievit/1473295/9c713b73-bc7c-4e97-a956-19d38b6b950d.ttf")  format("truetype"); /* Safari, Android, iOS */
  font-weight: medium;
}
@font-face {
  font-family: 'Kievit-Regular';
  src: url('https://media.wub-service.de/common/fonts/Kievit/1473320/1aa8755b-3491-4d68-9249-915b84637e5c.eot'); /* IE9 Compat Modes */
  src: url('https://media.wub-service.de/common/fonts/Kievit/1473320/1aa8755b-3491-4d68-9249-915b84637e5c.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://media.wub-service.de/common/fonts/Kievit/1473320/a2ad63a7-56d4-4ef1-bbd2-936695fc7b1f.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://media.wub-service.de/common/fonts/Kievit/1473320/ce815d31-f40f-4377-af70-aae345bea5cf.woff') format('woff'), /* Pretty Modern Browsers */
       url('https://media.wub-service.de/common/fonts/Kievit/1473320/345cadd5-fd66-45aa-8735-e5ddf6457d54.ttf')  format('truetype'); /* Safari, Android, iOS */
	   font-weight: normal;
}


* {
	box-sizing: border-box;
}

body, html {
	background-color: #EDE3E3;
	font-family: 'Kievit', sans-serif;

}
h1 {
font-family: Kievit-Medium;
font-size: 36px;
color: #535253;
text-align: center;
line-height: 46px;

}
h2 {
font-family: Kievit-Bold;
font-size: 24px;
color: #535253;
text-align: center;
line-height: 30px;
}
p {
font-family: Kievit-Regular;
font-size: 18px;
color: #535253;
text-align: left;
line-height: 30px;
}
a { 
text-decoration:none; color:#DA3F6F;transition: all 0.3s;
}
a:hover { 
text-decoration:underline; color:#DA3F6F
}
nav .active, a:active { 
text-decoration:none; color:#DA3F6F;
}
a:focus { 
text-decoration:none; color:#DA3F6F;
}
img {
	max-width: 100%;
	height: auto;
}
video,
audio {
	width: 100%;
	height: auto;
}
header {
	background-color:#fff; 
	position: fixed;
	top:0;
	height: auto;
	width: 100%;
	text-align: center;
	z-index: 10;
	padding-top: 20px;
	padding-bottom: 10px;
	transition: 0.2s;
	box-shadow: 3px 3px 4px 0 rgba(0,0,0,0.20), -2px 2px 4px 0 rgba(0,0,0,0.30);
}

header img.logo {
	width: 200px;
}

header.smaller {
    height: 80px;
	transition: all .4s;
}
	
header.smaller .logo {
    width: 160px;
}	

header.smaller .nav-toggle {
	top:16px;
}


/******************* mobil Menü ******************/

header nav {
	background-color:#fff;
	width:100%;
	max-height:0;
	overflow:hidden;
	transition: max-height .2s ease-in-out;
	padding-top: 10px;
}

header nav ul {
	padding-inline-start: 0;
}

header nav ul li {
	width:100%;
	list-style:none;
}

header nav a {
	display:block;
	height:100%;
	width:100%;
	padding:1em;
	text-decoration:none;
	color:#535253;
	border-bottom: 2px solid #979797;
}
header nav ul li:last-child a {
    border-bottom: none;
}

header nav a:hover {
	text-decoration: none;
	color: #DA3F6F;
}

.nav-toggle {
	display:block;
	position:absolute;
	right:20px;
	top:22px;
	padding:1em;
	color:white;
	cursor:pointer;
	text-decoration:none;
}

body .nav-closed{
	display: none;
}
body.nav-open .nav-closed{
	display: block;
}
body.nav-open .nav-open{
	display: none;
}

body.nav-open nav,
	#nav-open:target nav {
		max-height:  400px;
	}



/***************************************************************/


section {
	background-color: #EDE3E3;
}

.container {
	margin: 0 auto;
	max-width: 1440px;
	position: relative;
}



/****************  Magazin ********************/

section#magazin {
	padding: 80px 20px 0;
}


section#magazin h1 {
	font-family: Kievit-Bold;
	font-size: 24px;
	color: #fff;
	text-align: center;
	line-height: 30px;
	margin-bottom: 40px;
	margin-top: 0;

}
section#magazin .HeftvorschauContainer {
		width: 280px;
		height: 372px;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
	    margin: 0 auto;
}

.slide-in-fwd-top {
	-webkit-animation: slide-in-fwd-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-fwd-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-fwd-top {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(-800px);
            transform: translateZ(-1400px) translateY(-800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-top {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(-800px);
            transform: translateZ(-1400px) translateY(-800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

section#magazin article {
	background-color: #fff;
	padding: 20px ;
	margin-top: -25px;
}

section#magazin article h2 {
font-family: Kievit-Bold;
font-size: 26px;
color: #535253;
text-align: center;
line-height: 30px;
margin-top: 35px;
}

section#magazin article p {
font-family: Kievit-Regular;
font-size: 18px;
color: #2a2a2a;
text-align: left;
line-height: 30px;
height: 90px;
overflow: hidden;
}

section#magazin .showmore {
	border-radius: 50%;
	border: none;
	width: 40px;
	height: 40px;
	padding: 5px;
	color: #fff;
	background: #DA3F6F;
	margin: 0 auto;
	display: block;
}


/********************  Cards ********************/


#cards {
	padding: 20px;
}


#cards article {
	background-color: #fff;
	padding: 10px 20px 40px;
	margin-bottom: 20px;
}

a.button-red {
	font-family: Kievit-Regular;
	font-size: 17px;
	border-radius: 50px;
    padding: 12px;
    width: 175px;
    color: #fff;
    background-color: #DA3F6F;
    text-align: center;
    display: block;
	margin: 0 auto;
}

a.button-blue {
	font-family: Kievit-Regular;
	font-size: 17px;
	border-radius: 50px;
    padding: 12px;
    width: 175px;
    color: #fff;
    background-color: #247BBC;
    text-align: center;
    display: block;
	margin: 0 auto;
}

a.button-red:hover, a.button-blue:hover {
	text-decoration: none;
	color: fff;
}




/********************  Footer ********************/


footer {
	padding: 20px;
	text-align: center;
	background-color: #43434D;
}
footer nav {
	text-align:center;
}
footer span {
	font-family: Kievit-Bold;
	font-size: 13px;
	color: #fff;
	font-weight: normal;
}
footer nav ul {
	margin-bottom: 20px;
	padding-inline-start: 0;
}	
footer nav ul li {
	padding:10px;
	list-style: none;
}

footer ul.portale li {
    padding: 10px 0;
}
footer ul.portale li a{
    color: #fff;
}
footer nav a {
	font-family: Kievit-Regular;
	font-size: 15px;
	color:#fff;
	cursor: pointer;
}
footer nav a:hover {
	color:#DA3F6F;
	cursor: pointer;
	text-decoration: none;
}

footer h4 {
	font-family: Kievit-Bold;
	font-size: 14px;
	color: #fff;
	font-weight: normal;
	clear: both;
	padding-top: 40px;
}
	
.overlay {
    height: 100%;
    width: 100%;
    position: fixed; 
    z-index: 99; 
    left: 0;
    top: 110%;
    background-color: #fff;
    overflow-x: hidden; 
    transition: 0.5s; 
}

.overlay-content {
	margin: 0 auto;
    position: relative;
    width: 100%; 
	padding: 20px;
    margin-top: 30px;
}

.overlay-content h2 {
	margin-bottom: 70px;
}

.overlay-content p ,
.overlay-content ul {
	color:#2a2a2a;
    text-align: left; 
}
.overlay-content ul {
    padding-left: 1em;
}

#datenschutz .overlay-content p strong, #impress .overlay-content p strong {
	font-family: Kievit-Bold; 
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
	color: #DA3F6F;
	text-decoration: none;
	z-index: 1000;
}



/******************************************************************/



@media screen and (min-width: 480px) {

h1 {
    font-size: 36px;
    line-height: 46px;	
	width: 340px;
	margin: 0.67em auto;
}
	
}

@media screen and (min-width: 550px) {
	
h1 {
    font-size: 40px;
    line-height: 50px;	
	width: 400px;
	margin: 0.67em auto;
}
	
h2 {
    font-family: Kievit-Bold;
    font-size: 26px;
    line-height: 32px;
}

article {
    margin: 0 auto;
    max-width: 460px;
}
	
section#magazin h1 {
    font-size: 28px;
    line-height: 34px;
}	
	
}

@media screen and (min-width: 600px) {

section {
    padding: 60px 20px;
}
	
h2 {
    font-family: Kievit-Bold;
    font-size: 26px;
    line-height: 34px;
}
	
section#magazin h1 {
    font-size: 30px;
    line-height: 36px;
}

section#magazin .HeftvorschauContainer {
    width: 380px;
	height: 505px;
}
	
}

@media screen and (min-width: 768px) {

h1 {
    font-size: 50px;
    line-height: 62px;
    width: 650px;
    margin: 0.67em auto;
}
	
article {
    max-width: 560px;
}
	
h2 {
    font-family: Kievit-Bold;
    font-size: 30px;
    line-height: 36px;
}

	
section#magazin h1 {
    font-size: 30px;
    line-height: 36px;
}

	
}


@media screen and (min-width: 960px) {
		
	
section {
	padding:115px 20px;
}
	
h1 {
font-family: Kievit-Bold;
font-size: 61px;
color: #43434D;
text-align: center;
line-height: 85px;
width: 760px;
margin: 0 auto 70px

}
h2 {
font-family: Kievit-Bold;
font-size: 30px;
color: #43434D;
text-align: center;
line-height: 40px;
}

header img.logo {
	width: auto;
	transition: all .4s;
}
	
.nav-toggle {
	top:35px;
}
	
header.smaller {
    height: 90px;
	padding-top: 20px;
	transition: all .4s;
}
	
header.smaller .logo {
    width: 190px;
}
	
header.smaller .nav-toggle {
	top:20px;
}
	
	
/*********************** Magazin **************************/	


section#magazin {
    padding: 120px 20px 0;
}	
	
section#magazin h1 {
	font-family: Kievit-Bold;
	font-size: 40px;
	color: #43434D;
	text-align: center;
	line-height: 30px;
	margin-bottom: 70px;
}
	
section#magazin article {
	margin: 0 auto;
	max-width: 880px;
	text-align: center;
	background-color: #fff;
	padding: 100px;
	margin-top: -60px;
	box-shadow: 3px 3px 4px 0 rgba(0,0,0,0.20), -2px 2px 4px 0 rgba(0,0,0,0.30);
}
	
section#magazin article p {
font-family: Kievit-Regular;
font-size: 20px;
color: #2a2a2a;
text-align: left;
line-height: 30px;
height: auto;
overflow: visible;
}
	
section#magazin .HeftvorschauContainer {
		width: 446px;
		height: 595px;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
	    margin: 0 auto;
}
	
section#magazin article h2 {
	font-family: Kievit-Bold;
	font-size: 46px;
	color: #43434D;
	text-align: center;
	line-height: 30px;
}
	
section#magazin .showmore {
	display: none;
}

	
/*********************** Cards **************************/	
	

#cards {
	padding-top: 30px;
	}
	
	
#cards .container {
	display:flex;
	max-width: 880px;
}


#cards article {
	background-color: #fff;
	padding: 10px 30px 40px;
	margin-bottom: 20px;
	margin-right: 30px;
	box-shadow: 3px 3px 4px 0 rgba(0,0,0,0.20), -2px 2px 4px 0 rgba(0,0,0,0.30);
	width: 100%;
}

#cards article:last-child {
	margin-right: 0;
}
	
	
	
/*********************** Footer **************************/	

	
footer {
	margin: 0 auto;
	padding:50px;
}
footer nav {
	text-align: left;
}
footer span {
	font-family: Kievit-Regular;
	font-size: 16px;
	color: #fff;
	font-weight: normal;
	float: right;
	margin-top: -7px;
}
footer nav ul {
	
}	
footer nav ul li {
	display: inline-block;
	margin-right: 40px;
	list-style: none;
	padding:0
}
footer nav ul li:last-child {
    float: right;
    position: relative;
    top: 12px;
}

footer nav a {
	color:#fff;
	transition: all 0.3s;
}
footer nav a:hover {
	color:#DA3F6F;
}
	
footer h4 {
	font-family: Kievit-Bold;
	font-size: 14px;
	color: #fff;
	font-weight: normal;
	clear: both;
	padding-top: 40px;
}
	
footer ul.portale {	
	margin-top: 20px;
}
	
footer ul.portale li {
	display: inline-block;
	margin-right: 20px;
	list-style: none;
}
footer ul.portale li a {
	font-family: Kievit-Regular;
	font-size: 14px;
	color: #fff;
	font-weight: normal;
	transition: all 0.3s;
}
footer ul.portale li a:hover {
	color:#F29512;
	text-decoration: none;
}
	
.overlay-content {
    position: relative;
    width: 880px; 
	padding: 20px;
    text-align: center; 
    margin-top: 30px;
}

.overlay-content p ,
.overlay-content ul {
	font-family: Kievit-Regular;
	font-size: 18px;
	font-weight: normal;
	color:#2a2a2a;
    text-align: left; 
	margin-top: 20px;
}

	
}

.andreas {
	font-family: Kievit-Medium;
	font-size: 36px;
	color: #535253;
	text-align: center;
	line-height: 46px;

}