@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,600,600i,700,700i,800,800i');

@font-face {
    font-family: 'josefin_sansitalic';
    src: url('josefinsans-italic-webfont.woff2') format('woff2'),
         url('josefinsans-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'josefin_sansthin';
    src: url('josefinsans-thin-webfont.woff2') format('woff2'),
         url('josefinsans-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'josefin_sansbold';
    src: url('josefinsans-bold-webfont.woff2') format('woff2'),
         url('josefinsans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'josefin_sanslight';
    src: url('josefinsans-light-webfont.woff2') format('woff2'),
         url('josefinsans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'josefin_sanslight_italic';
    src: url('josefinsans-lightitalic-webfont.woff2') format('woff2'),
         url('josefinsans-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'josefin_sanssemibold';
    src: url('josefinsans-semibold-webfont.woff2') format('woff2'),
         url('josefinsans-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'josefin_sansregular';
    src: url('josefinsans-regular-webfont.woff2') format('woff2'),
         url('josefinsans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'josefin_sansbold_italic';
    src: url('josefinsans-bolditalic-webfont.woff2') format('woff2'),
         url('josefinsans-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'josefin_sansthin_italic';
    src: url('josefinsans-thinitalic-webfont.woff2') format('woff2'),
         url('josefinsans-thinitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'josefin_sanssemibold_italic';
    src: url('josefinsans-semibolditalic-webfont.woff2') format('woff2'),
         url('josefinsans-semibolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'josefin_sansbold';
    src: url('josefinsans-bold-webfont.woff2') format('woff2'),
         url('josefinsans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'josefin_sansbold_italic';
    src: url('josefinsans-bolditalic-webfont.woff2') format('woff2'),
         url('josefinsans-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
* {
	margin: 0;
	padding:0;
}

/*================================================*/
/* Farbpaletten */
/*================================================*/
/*https://coolors.co/ef798a-f7a9a8-613f75-e5c3d1-e2dfdf*/
/*https://coolors.co/dde8b9-e8d2ae-d7b29d-cb8589-796465*/

html {
	overflow-y: scroll; /*Rechte Scrollbar immer einblenden*/
	font: 100%;
	background-color: #E2DFDF;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: grayscale;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #000;
    margin: 2em 0;
    padding: 0;
}

.fineline {
	border-top: 2px solid #E2DFDF;
	margin: 0;
}

/*================================================*/
/* TYPOGRAFIE */
/*================================================*/
h1, h2, h3, h4, h5, h6 {
	font-family: 'josefin_sansbold', sans-serif;
	text-align: left;
	line-height: 1.3;
	color: #413A3B;
}

h1 {
	font-size: 2.75rem;
	padding-top: 1.5em;
	padding-bottom: 0.75em;
}

h2 {
	font-size: 1.625rem;
	margin-top: 1em;
	padding-bottom: 0.5em;
}

h3 {
	font-size: 1.25rem;
	margin-top: 1em;
	padding-bottom: 0.25em;
}

h4 {
	font-family: 'Nothing You Could Do', cursive;
	font-size: 2rem;
	padding-bottom: 0.75em;
}

h5 {
	font-size: 1.25rem;
	padding-top: 1.5em;
	padding-bottom: 0.5em;
}

h6 {
	font-size: 1rem;
	padding-top: 1em;
	padding-bottom: 0.5em;
}

p {
	font-family: 'josefin_sansregular', sans-serif;
	font-size: 1.1rem;
	font-variant-ligatures: common-ligatures;
	line-height: 1.5;
	margin-bottom: 0.5em;
}

main ul > li {
	font-family: 'josefin_sansregular', sans-serif;
	font-weight: normal;
	font-size: 1.15rem;
	line-height: 1.5;
	list-style-position: inside;
	list-style-image: url(../images/aufz.gif);
	margin-bottom: 0.25em;
}

section > ul > li:last-child {
	margin-bottom: 0.5em;
}

strong {
	font-family: 'josefin_sansbold', sans-serif;
}

em {
	font-family: 'josefin_sansitalic';
}

small {
	font-size: 0.7rem;
}

mark {
	padding: 0.15em;
	background: #F0E9DE;
}

.wichtig {
	padding: 1em;
	border: 1px dashed #000;
	margin-top: 1em;
	margin-bottom: 1em;
}

.credit {
	font-size: 0.8rem;
	font-weight: 600;
	margin-top: -0.5em;
	margin-bottom: 1em;
}

blockquote {
	clear: both;
	font-size: 1.35rem;
	line-height: 1.3;
	font-family: 'Fredericka the Great', cursive;
	border-left: 10px double #000;
	padding-left: 1em;
	margin-left: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	width: 75%;
}

cite {
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 0.75rem;
}

figcaption {
	font: 0.85rem 'Josefin Sans', sans-serif;
	font-weight: 600;
	line-height: 1.25;
	margin-top: 0.25em;
	margin-bottom: 0.75em;
}

/*================================================*/
/* VERLINKUNGEN IM TEXT */
/*================================================*/

p a, p a:visited, figcaption a, figcaption a:visited {
	color: #413A3B;
	text-decoration: none;
	border-bottom: 1px solid #413A3B;
	padding-left: 0.15em;
	padding-right: 0.15em;
	padding-top: 0.15em;
}

p a:hover, figcaption a:hover {
	color: #E2DFDF;
	background-color: #413A3B;
	border-bottom: 1px solid #E2DFDF;
}

a.liste {
	font-size: 1rem;
	font-weight: 800;
	margin-right: 0.5em;
	padding: 0.15em;
}

a:hover.liste {
	color: #E2DFDF;
	background-color: #413A3B;
	border-bottom: 1px solid #E2DFDF;
}

.fixliste {
	line-height: 2;
}

/*================================================*/
/* TOPBUTTON */
/*================================================*/

.topbutton a {
	position: fixed;
	bottom: 2%;
	right: 1%;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 0.8rem;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	color: #000;
	background-color: #fff;
	border: 2px solid #000;
	border-radius: 50%;
	padding: 0.5em;
	z-index: 100;
}

.topbutton a:hover {
	color: #E2DFDF;
	border: 2px solid #E2DFDF;
}

/*================================================*/
/* BILDER */
/*================================================*/
img {
	max-width: 100%;/*Bilder werden skaliert*/
	height: auto;
}

img.left {
	float: left;
	margin-right: 1em;
	margin-bottom: 0.5em;
}

img.right {
	position: absolute;
	top:500px;
	right: 5em;
	width: 300px;
	margin-left: 1em;
	margin-bottom: 0.5em;
	border: 2px solid #413A3B;
	border-radius: 2.5em;
	z-index: 1;
}

a:hover img {
	transition: .5s filter;
	-webkit-filter: sepia(1);
	filter: sepia(1);/* Verlinkte Bilder erhalten Sepia-Filter bei Mouseover */
}

figure {
	margin: 0;
}

.logo {
	padding: 1em;
}

iframe {
	margin: 0 auto;
	display: block;
}

.round {
	display: block;
	border-radius: 50%;
	border: 0.25em solid #413A3B;
	width: 150px;
	height: 150px;
	transition: transform 0.8s;
	-moz-transition: transform 0.8s;
	-webkit-transition: transform 0.8s;
	-o-transition: transform 0.8s;
	-ms-transition: transform 0.8s;
}

/*================================================*/
/* VIDEOS */
/*================================================*/
/*iframe {
	margin-top: 0.5em;
	margin-bottom: 1em;
}*/

.responsive-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.responsive-video {
	position: relative;
	padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
	padding-top: 0px;
	height: 0;
	overflow: hidden;
	margin-top: 0.5em;
	margin-bottom: 0.75em;
}

/*================================================*/
/* ANIMATION: weiches ein-/ausblenden */
/*================================================*/
.smooth1 {
	-webkit-animation: fadeIn 1s;
	-moz-animation: fadeIn 1s;
	-o-animation: fadeIn 1s;
	animation: fadeIn 1s;
}

.smooth2 {
	-webkit-animation: fadeIn 2s;
	-moz-animation: fadeIn 2s;
	-o-animation: fadeIn 2s;
	animation: fadeIn 2s;
}

.smooth3 {
	-webkit-animation: fadeIn 3s;
	-moz-animation: fadeIn 3s;
	-o-animation: fadeIn 3s;
	animation: fadeIn 3s;
}

/*================================================*/
/* HEADER */
/*================================================*/
header {
	background: #988B8E;
	padding: 1em;
}

.name {
	text-align: right;
}

/*================================================*/
/* NAVIGATION */
/*================================================*/
.navmain {
	background: #988B8E;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.5em;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 1px;
}

.navmain > ul {
	list-style: none;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.navmain > ul > li {
	padding-bottom: 1em;
	width: 19%;
	text-align: center;
}

.navmain > ul > li > a {
	display: block;
	text-decoration: none;
	color: #E2DFDF;
	border: 2px solid #E2DFDF;
	border-radius: 5em;
	padding: 0.5em;
}

.navmain ul li a:hover {
	color: #413A3B;
	background-color: #E2DFDF;
	border: 2px solid #413A3B;
}

.navmain ul li a.current, .navmain ul li a.current:hover {
	color: #413A3B;
	background-color: #E2DFDF;
	border: 2px solid #E2DFDF;
	cursor:  not-allowed;
}

/*================================================*/
/* HAUPTINHALT */
/*================================================*/
#maincontent {
	max-width: 950px;
	margin: 0 auto;/*Hauptinhalt wird zentriert*/
}

section {
	max-width: 635px;
	margin: 0 auto;
}

 ul.tipps li {
	border-bottom: 1px solid #000;
}

ul.tipps li a {
	text-decoration: none;
	color: #000;
	padding: 0.15em;
}

ul.tipps li a:hover {
	color: #fff;
	background-color: #000;
}

/*================================================*/
/* ARTIKEL im FLEXBOX-Modell mit Seitenleiste */
/*================================================*/

article {
	border: 1px solid #000;
	padding: 1em;
	margin: 2em auto;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-shrink: 2;
}

article:last-of-type {
	margin-bottom: 3.5em;
}

.content {
	border-right: 1px solid #000;
	padding-right: 1em;
}

.info {
	width: 250px;
	flex-shrink: 0;
	padding-left: 1em;
}

.info p, .info ul li {
	font-family: 'Josefin Slab', serif;
	font-size: 1rem;
}

.info ul li {
	border-bottom: 1px solid #000;
}

.info ul li a {
	text-decoration: none;
	color: #000;
	padding: 0.15em;
}

.info ul li a:hover {
	color: #fff;
	background-color: #000;
}

/*================================================*/
/* FOTOWAND IM FLEXBOX-MODELL (innerhalb eines Artikels */
/*================================================*/
.fotowand {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.fotowand > img {
/*	width: 32%;*/
	margin-bottom: 1em;
}

/*================================================*/
/* TEASERBOXEN IM FLEXBOX-MODELL */
/*================================================*/
.teaser-flexbox {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.teaserbox {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 32%;
	margin-bottom: 1em;
	background-color: #e5e5e5;
	text-align: center;
}

.teaserbox img {
	margin-bottom: 0.5em;
}

.teasercontent {
	flex: 1;
	padding: 0 0.75em;
}

.teasercontent > p {
	font-size: 1rem;
	line-height: 1.4;
}

.teaserfooter {
	border-top: none;
	margin-bottom: 1em;
}

.teaserfooter a, .teaserfooter a:visited {
	display: block;
	width: 75%;
	text-decoration: none;
	color: #000;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 0.9rem;
	letter-spacing: 1px;
	border: 2px solid #000;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin: 0 auto;
}

.teaserfooter a:hover {
	color: #e5e5e5;
	background-color: #000;
	border: 2px solid #000;
}

.teaserfooter a:active {
	background-color: #b22222;
	border: 2px solid #b22222;
}

.abstand {
	padding-bottom: 0.5em;
}

/*================================================*/
/* FOOTER */
/*================================================*/
footer {
	background-color: #413A3B;
	color: #988B8E;
	padding: 1em;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	font-size: 0.8rem;
	letter-spacing: 1px;
	line-height: 1.3em;
	text-align: center;
	margin-top: 1em;
}

footer a, footer a:visited {
	color: #E2DFDF;
	padding: 0.15em;
}

footer a:hover {
	color: #e5e5e5;
	background-color: #988B8E;
	border: 2px solid #988B8E;
}

footer a:active {
	background-color: #151313;
	border: 2px solid #151313;
}


/*===============================================================================*/
/* MEDIA QUERIES */
/*===============================================================================*/

@media screen and (max-width: 1300px){

/*================================================*/
/* MAINCONTENT benötigt Abstand links/rechts */
/*================================================*/
#maincontent {
	max-width: 900px;
}

.teaserbox {
	width: 32%;
}

.navmain ul li {
	width: 48%;
}

img.right {
	right: 3em;
	width: 200px;
}


}

@media screen and (max-width: 1000px){

/*================================================*/
/* MAINCONTENT benötigt Abstand links/rechts */
/*================================================*/
#maincontent {
	max-width: 85%;
}

.teaserbox {
	width: 49%;
}

/*================================================*/
/* SCHRIFTANPASSUNG: Verkleinerung der Typo */
/*================================================*/
h1 {
	font-size: 1.625rem;
	padding-bottom: 0.5em;
}

h2 {
	font-size: 1.25rem;
	line-height: 1.5em;
	padding-bottom: 0.25ems;
}

p, main ul li {
	font-size: 1rem;
}

figcaption {
	max-width: 75%;
}

}

@media screen and (max-width: 800px){

/*================================================*/
/* Umstellung der Navigation: alle Spalten untereinander */
/*================================================*/
.navmain {
	padding: 0;
	padding-bottom: 0.5em;
}

.navmain ul {
	list-style: none;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.navmain ul li {
	text-align: center;
	margin-left: 1em;
	padding-bottom: 0.25em;
	padding-top: 0.25em;
	width: 95%;
}

.navmain ul li a, .navmain ul li a:hover, .navmain ul li a.current:hover {
	display: block;
	border: none;
}

#maincontent {
	max-width: 80%;
}

.teaserbox {
	width: 100%;
}
	
section {
	max-width: 100%;
}

section .fotowand {
	max-width: 420px;
	margin: 0 auto;
}
	


/*================================================*/
/* ARTIKEL: Seitenleiste wird unten angeordnet */
/*================================================*/
article {
	flex-direction: column;
}

.content {
	border: none;
	padding-right: 0;
	padding-bottom: 0.5em;
}

.info {
	border-top: 1px solid #000;
	padding-left: 0;
	width: 100%;
}

.info ul {
	margin: 0 auto;
	width: 66%;
}

figure {
	text-align: center;
}

figcaption {
	max-width: 66%;
	margin: 0.25em auto 0.75em;
}



}

@media screen and (max-width: 650px){

img.right {
	display: none;
}
}

/*================================================*/
/* ANIMATIONEN */
/*================================================*/
@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}