@charset "utf-8";
/* CSS Document */

/* Angaben für ganze Seite */
html {
	min-height: 100%;
	}
body {
	min-height: 100%;
	margin: 0;
	padding: 0;
	background: url(bilder/karo.svg);
	color: #000;
	font-family: 'Rokkitt', serif;
	font-size: 1.1em;
	font-variation-settings: 'wght' 300;
	line-height: 1.3;
	hyphens: auto;
	word-wrap: break-word;
	}
@font-face {
	 font-family: 'Rokkitt';
	 src: url('fonts/Rokkitt/Rokkitt-VariableFont_wght.ttf') format('truetype');
	 font-weight: 100 1000;
	 font-stretch: 25% 150%;
	 font-style: normal;
	}
@font-face {
	 font-family: 'FrederickatheGreat';
	 src: url('fonts/Fredericka_the_Great/FrederickatheGreat-Regular.ttf') format('truetype');
	 font-weight: normal;
	}
ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
	}
a {
	color: #FFF;
	text-decoration: none;
	}
a:hover {
	opacity: 0.6;
	}
a.active {
	opacity: 0.6;
	}
.popup-gallery a {
	cursor: -moz-zoom-in;
	cursor: -webkit-zoom-in;
	cursor: zoom-in;
	}
h1 {
	font-variation-settings: 'wght' 100; 
	font-size: 2em;
	max-width: 100%;
	margin: 0.4em 0;
	}
h2 {
	font-variation-settings: 'wght' 400;	
	font-size: 1.1em;
	}	
.einzug_links {
	margin: 0 0 0 11px;
	text-indent: -11px;
	}
.einzug_links_startseite {
	margin-left: 11px;
	text-indent: -11px;
	}
span.kontakt {
	display: block;
	width: 64px;
	float: left;
	}
img {
	border: none;
	margin: 0;
	padding: 0;
	border-radius: 0.5em
	}

/* Wrapper und Header */
#wrapper {
	width: 80%;
	max-width: 900px;
	min-width: 200px;
	margin: auto;
	border-radius: 0.5em;
	}
header {
	width: 100%;
	margin-top: 2%;
	background-color: #FFF;
	border-radius: 0.5em;
	box-shadow:  0 0 0 2px #C20069, 0 0 7px 0 #000;
	text-align: center;
	}
header img {
	width: 100%;
	height: auto;
	border-radius: 0.5em;
	}

/* Kopfmenü */
nav {
	width: 92%;
	margin-top: 2%;
	padding: 1% 4%;
	background-color: rgba(194,0,105, 0.9);
	border-radius: 0.5em;
	box-shadow:  0 0 0 2px #FFF, 0 0 7px 0 #000;
	}
nav ul {
	display: flex;
    justify-content: space-between;
	align-items: center;
	}
nav li {
	display: flex;
	align-items: center;
	}	
nav a {
	font-variation-settings: 'wght' 400;
	font-size: 1.4em;
	}
		
/* Inhaltsbereich */
article {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
	}
.content {
	width: 41%;
	margin-top: 2%;
	}
.content_breit {
	width: 92%;
	margin-top: 2%;
	}
.spalten {
	column-count: 2;
	column-gap: 4%;
	column-rule: 1px #F2A800 dashed;
	}
.content, .content_breit, #content_1, #content_2a, #content_2b, #content_3 {
	padding: 2% 4%;
	background-color: rgba(255,255,255, 1);
	border-radius: 0.5em;
	box-shadow: 0 0 0 2px #F2A800, 0 0 7px 0 #000;
	}	
.mit_bild {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #C20069 10%, #F2A800 90%);
	}	
.mit_bild img {
	max-width: 100%;
	}
article a  {
	color: #C20069;
	}
.wiea {
	color: #C20069;
	cursor: pointer;
	}
.wiea:hover {
	opacity: 0.6;
	}
.wiea.active {
	opacity: 0.6;
	}	
div.popup-gallery1 a img, div.popup-gallery2 a img {
	width: 88px;
	height: 88px;
	}
div.popup-gallery3 a img {
	width: auto;
	height: 88px;
	}	

/* Sonderregeln für Startseite */
#links, #rechts {
	width: 49%;
	display: flex; 
	flex-direction: column;
	justify-content: space-between;
	}
#content_1 {
	width: 92%;
	flex-grow: 1;
	margin-top: 4%;
	}
#content_2a {
	display: none;
	}
#content_2b {
	flex-grow: 1;
	margin-top: 4%;
	}
#content_3 {
	width: 92%;
	flex-grow: 1;
	margin-top: 4%;
	}

/* Fußmenü */
footer {
	width: 96%;
	margin: 2% 0;
	padding: 1% 2%;
	background-color: rgba(246,168,0, 0.9);
	border-radius: 0.5em;
	box-shadow:  0 0 0 2px #FFF, 0 0 7px 0 #000;
	text-align: center;
	}
footer a {
	margin: 0 3%;
	font-variation-settings: 'wght' 400;
	font-size: 1.4em;
	}
	
@media screen and (max-width: 800px) {	
header {
	display: none;
	}
.header_klein {
	display: block;
	width: 100%;
	margin-top: 4%;
	background-color: #FFF;
	border-radius: 0.5em;
	box-shadow:  0 0 0 2px #C20069, 0 0 7px 0 #000;
	text-align: center;
	}
.header_klein img {
	width: 100%;
	height: auto;
	border-radius: 0.5em;
	}
#nav_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 4%;
	}
nav {
	width: 96%;
	margin-top: 4%;
	padding: 1% 2%;
	background-color: rgba(194,0,105, 0.9);
	border-radius: 1em;
	}
nav ul {
	flex-direction: column;
	}
nav ul li {
	width: 100%;
	}
nav a {
	display: block;
	width: 100%;
	margin: 0;
	padding: 1% 2%;
	text-align: center;
	font-variation-settings: 'wght' 400;
	font-size: 1.4em;
	}
article {
	flex-direction: column;
	}
.content, .content_breit {
	width: 92%;
	margin-top: 4%;
	}
.spalten {
	column-count: 1;
	}	
#links, #rechts {
	width: 100%;	
	}
#rechts, #rechts {
	margin-left: 0;
	}
#rechts {
	display: none;
	}
#content_2a {
	display: flex;
	width: 92%;
	margin-top: 4%;
	}
footer {
	margin: 4% 0;
	}
div.popup-gallery1 a img, div.popup-gallery2 a img {
	width: 46px;
	height: 46px;
	}
div.popup-gallery3 a img {
	width: auto;
	height: 46px;
	}
}
	
@media screen and (min-width: 801px) {		
.header_klein {
	display: none;
	}	
#nav_icon {
	display: none;
	}
}