@charset "utf-8";
/* Raleway - Fließtext und Navi */

@font-face { font-family: 'Raleway';
             src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype'); }
@font-face { font-family: 'Libre Baskerville';
             src: url('../fonts/LibreBaskerville-Regular.ttf') format('truetype'); }


/*******************************************************
*
    CSS Reset und universelle CSS-Regeln
*
*******************************************************/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html,body {
	font:1.1rem 'Raleway', sans-serif;
	scroll-behavior: smooth;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
p {
    line-height: 1.7rem;	
}
div,header {
	position: relative;
	justify-content: center;
}
footer {
	background: #33333;
}

/*******************************************************
*
    Allgemeine angaben zu Farben, Font und abständen = p,h1,h2,h3,h4,h5,h6,p a
*
*******************************************************/

p 				{color: #424242;}
p a 			{color: black;}
h1,h3,h4,h5,h6	{color: #128065; font-family: 'Libre Baskerville', serif;}
h1 				{font-size: 2.6rem;padding-bottom: 2rem;}
h3 				{font-size: 2rem;padding: 1rem 0rem;}
h2	{
	color: white; 
	font-family: 'Libre Baskerville', serif;
	font-size: 4rem;
	line-height: 11rem;
	text-align: center;
	}

/* ---Figure-Elemente -----------------------------------*/

figure img {
    width: 100%;
	opacity: 0.5;
	transition: 0.5s;
}
figure img:hover {opacity: 1;}

/*******************************************************
*
    Wrapper Klassen
*
*******************************************************/
.wrapper1000 {
    margin: auto;
    max-width: 1000px;
    padding: 5vw 2%;
}
.wrapper1600 {
    margin: auto;
    max-width: 1600px;
	padding: 1vw 2%;
}
#uebermich p:last-of-type{
	padding-bottom: 300px;
}
.wrapperfull {
    margin: auto;
    max-width: 100%;
	padding-bottom: 3rem;
}
.wrappergrey > div {
	margin: 0rem 1rem;
	padding: 2rem;
	background: #f6f6f6;
	border-radius: 4px;
}
.wrappergrey {
	margin-bottom: 3rem;
}
.figcaption1000 {
	padding: 1vw 2%;
	text-align: center;
	font-weight: 400;
}
.je2 {
    display: flex;
    flex-wrap: wrap;
}
.je2 div,
.je2 figure {
    flex-basis: 401px;
    flex-grow: 1;
	padding:0.3% 1.2%;
}
/* 8 Fotos zu je 4 ------*/
.je4Img {
    display: flex;
    flex-wrap: wrap;
}
.je4Img > figure {
    flex-basis: 401px;
    flex-grow: 2;
    padding:0.3% 1.2%;
}

/*******************************************************
*
    Typ-Auszeichnungen in der Bildergalerie
*
*******************************************************/

/* --- Elemente Legende -----------------------------------*/
.square {
	height: 20px;
	width: 20px;
	float: left;
	transform: rotate(45deg);
	margin-right: 15px;
}

/* --- Typ Auszeichnung auf den Bildern -----------------------------------*/
.pastell 		{background: #de6449;}
.mixed 			{background: #09827a;}
.acryl 			{background: #2f6b99;}
.digital 		{background: #87ac65;}
.druck 			{background: #b59946;}

.type {
	height: 40px;
	width: 90px;
	position: absolute;
	margin: 30px 10px 10px 0;
	transform: rotate(90deg) scale(0.7);
	transition: 1s;
	z-index: 999;	
}
.type p {
	padding: 10px;
	color: white;
	opacity: 0;
	transition: 1s;
	display: block;
	font:1rem 'Libre Baskerville', serif;
	text-align: center;
}
.type:hover, .type p:hover {
	transform: rotate(0deg);
	background: #14393a;
	opacity: 1;
}

/*******************************************************
*
    Hintergrundbilder der Artikel-Überschriften
*
*******************************************************/
#kunst > header,
#poetry > header,
#kontakt > header,
#uebermich > header {background-size: cover;}

#kunst > header 		{background: url("../img/trenner/trenner1.jpg") center top fixed;}
#poetry > header 		{background: url("../img/trenner/trenner2.jpg") center top fixed;}
#kontakt > header 		{background: url("../img/trenner/trenner3.jpg") center top fixed;}
#uebermich > header 	{background: url("../img/trenner/trenner4.jpg") center top fixed;}

#me {
	margin: 0 auto;
	z-index: 996;
	}

/*******************************************************
*
    Startseite topheader
*
*******************************************************/
#topheader {
    background: url(../img/portrait1.jpg) fixed;
    background-size: cover;
    min-height: 100vh;
	display: flex;
}

#topheader p {
	position: absolute;
	right: 5%;
	text-align: right;
	color: white;
	font-family: 'Libre Baskerville', serif;
}
/* --- Pfeil-Element "Nach unten zur Einleitung scrollen" -----------------------------------*/
/* --- Pfeil-Element "Nach unten zur Einleitung scrollen" -----------------------------------*/	
	#pfeil {
		bottom: 25%;
		position: absolute;
		transition: 1s;
		width: 120px;
	}
#pfeil:hover{
	transform: scale(0.8);
}

/*******************************************************
*
    Kontaktformular und Buttons
*
*******************************************************/

input[type=text], select, textarea,
input[type=date] {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #f6f6f6;
	font-size: 1.1rem;
	margin-bottom: 13px;
	margin-top: 5px;
	font-family: 'Raleway', sans-serif;
}

/* --- Submit-Buttons und Buttons -----------------------------------*/
input[type=submit],
button{
	cursor: pointer;
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding: 0.5rem 1rem;
	background: #f1c343;
	border: none;
	border-radius: 4px;
	color: #505050;
	font:0.9rem 'Raleway', sans-serif;
	transition: 0.5s;
}
button:hover,
input[type=submit]:hover {background: #ffe161;}
form input[type=submit]{float: right;}

/* --- Ausklappbarer Bereich im Formular -----------------------------------*/
#checkbox {
	background: #128065;
	color: white;
	padding: 1.5rem;
	margin-top: 1rem;
	border-radius: 4px;
}
#checkbox p {color: white;}
span.bigform {display:none;}
input.checkbox:checked ~ span.bigform {display:block;} 

/*******************************************************
*
    Über Mich Seite
*
*******************************************************/

#uebermich p {color: #ededed;padding-bottom: 1rem;}
#uebermich h3,
#uebermich h4{color: #fff;}
#uebermich h4{
	color: #fff;
	font-size: 1.3rem;
	font-weight: 300;
	padding-bottom: 2rem;
}
#uebermich {
	background: url("../img/uebermich.jpg") center top fixed;
	background-size: cover;
}
#uebermich img {display: none;}

/*******************************************************
*
    Sonstige ID-Elemente
*
*******************************************************/

/*---- Legende Kunst-Seite ----------------------------------------*/
#legende {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	font:1rem 'Libre Baskerville', serif;
	list-style: none;
	background: #ededed;
	padding: 2%;
	margin-top: 1rem;
}

/*---- Böbbel Startseite ----------------------------------------*/
#boebbel{	
	position:absolute;
	bottom:65px;
	left:-1vw;
	border-radius: 50%;
	text-decoration: none;
	color:#fff;
	display: flex;
	align-items: center;
	background: #128065;
	transition: 0.5s;
	justify-content: center;
	text-align: center;
	font-family: 'Libre Baskerville', serif;
	transform: rotate(-10deg);
	height: 160px;
	width: 160px;
}
#boebbel:hover {
	background: #00563e;
	transform: scale(1.1) rotate(-5deg);
}

/*---- Akkordeon Liste "Über Mich" ----------------------------------------*/
#accordion {
	padding-bottom: 3rem;
	margin: 0 auto;
	width: 80%;
}
#accordion div {
	background: #128065; /*Fallback*/
	background: linear-gradient(to right, #31343c, #128065, #31343c);
	background: linear-gradient(to right, rgba(255,0,0,0), #128065, rgba(255,0,0,0));
	height:50px;
	transition: height 0.5s ease-in-out;
	border-radius: 4px;
	margin-bottom: 3px;	
}
#accordion div:nth-child(1):hover {height:100px;}
#accordion div:nth-child(2):hover {height:200px;}
#accordion div:nth-child(3):hover {height:150px;}
#accordion div:nth-child(4):hover {height:120px;}
#accordion div:nth-child(5):hover {height:100px;}
#accordion div:nth-child(6):hover {height:120px;}
#accordion div p:first-of-type {
	color: #fff;
	font-family: 'Libre Baskerville', serif;
	font-size: 1.2rem;
	line-height: 2rem;
	padding: 0.5rem 1rem;
	text-align: center;
}
#accordion div p:first-of-type::after {content: '\25BC';font-size: 1rem;}
#accordion div ul {margin-left: 40px;}

.antwort {
	opacity: 0;
	transition: 1s ease-in-out;
	color: #fff;
	margin-left: 20px;
	margin-top: 5px;
	line-height: 1.4rem;
}
#accordion div:hover {background: #128065;}
#accordion div:hover .antwort {opacity: 1;}


/*******************************************************
*
    Footer > Socialmedia - Impressum - PDF Download - Cookies 
*
*******************************************************/

#footer {
	background:#1b1b1b;
	display: flex;
	position: fixed;
	bottom: 0;
	width: 100%;
	justify-content: space-between;	
	z-index: 1001;
	align-items: center;
	height: 80px;
	font-size: 0.8rem;
	text-align: left;
}
#footer div,
#footer ul, 
#footer li,
#footer img{  
	display: flex;
	margin-left: 1%;
	margin-right: 1%;
}
#footer img {width: 30px;height: 30px;}

#footer a {
	color: white;
	text-decoration: none;
	opacity: 0.5;
	transition: 0.5s;
	margin: 5px;
}
#footer a:hover {opacity: 1;}
#footer img:hover {opacity: 1;}

#footer div{
	justify-content: flex-start;
	flex-wrap: wrap;
}

/*---- Cookie Abfrage ----------------------------------------*/
#cookiedingsbums a {color:#000; text-decoration:none;}
#cookiedingsbums a:hover {text-decoration:underline;}
#cookiedingsbums > div {padding:0.2rem 1rem; display: flex;align-items: center;}
#cookiedingsbums { 
	text-align:center; 
	background: #f1c343; 
	position:fixed;
	z-index:10000; 
	width:100%; 
	font-size:0.8rem; 
	line-height: 1rem;
	display: flex;
	bottom: 80px;
}
#cookiedingsbumsCloser {
	color: #fff;
	border-radius: 4px;	
	cursor:pointer;
	background: #128065; 
	display: flex;
	padding: 4px 10px;
	margin-left: 10px;
 }
#cookiedingsbumsCloser:hover {background: #305455;}

/*******************************************************
*
    Texte auslaufen lassen und ausklappbar machen 
*
*******************************************************/
.shortText.small {
	-webkit-mask-image: -webkit-gradient(linear, left top,
	left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}
.shortText span.more 				{display: inline;}
.shortText.small span.more 			{display: none;}
.shortText:not(.small) span.dots 	{display: none;}
.shortText:first-letter				{font-size:1.6rem; color: #14393a;}

/*******************************************************
*
    'Back to top' button 
*
*******************************************************/
#back-top {
	position: fixed;
	bottom: 6.5rem;
	right: 1.5rem;
	display: none;
	transition: 0.5s;
	z-index: 998;
}
#back-top:hover {transform: scale(0.9);}
#back-top a {
	padding: .7rem 1.5rem 1rem;
	display: block;
}

/*--- YouTube Video Responsive --------*/
.respVideo iframe {
    top: 0;
    left: 0;
    width: 100%;
	height: 415px;
}
/* --- freie Klassen ----------------------*/
.clearfix:after {
	content:"";
	display: block;
	clear: both;
}

/*******************************************************
*
    MOBILE ----  max-width:799px
*
*******************************************************/
@media (max-width:799px) {
	
	/*******************************************************
	*
		Überschriften Anpassung
	*
	*******************************************************/	
	h2 {
		font-size: 2.5rem;
		line-height: 6rem;
		margin-top: 4rem;
	}
	h3 {font-size: 1.8rem;}
	
	/*******************************************************
	*
		Mobile Navigation
	*
	*******************************************************/
	#topnav {
		background: #000;
		position: fixed;
		right: 6%;
		top: -800px;
		width: 88%;
		transition: 0.5s;
		z-index: 1000;
		text-align: center;
		border-radius: 5px;
	}
	#topnav:target {top: 50px;}

	#topnav p a {
		position: fixed;
		right:45.4%;
		top:5px;
		background: #000;
		color: #fff;
		text-decoration: none;
		font-size: 3rem;
		width: 55px;
		line-height: 51px;
		text-align: center;
		display: block;
		border-radius: 5px;
	}
	#topnav p a[href="#close"] {display: none;}

	#topnav:target p a[href="#close"] {display: block;}

	#topnav ul {list-style: none;}

	#topnav ul a {
		text-decoration: none;
		color: #fff;
		padding: 10px 0px;
		display: block;
		border-bottom: 1px solid #262626;
		line-height: 40px;
	}
	#topnav .mobile {
		margin: 0 auto;
		padding: 20px;
		max-width: 68%;
	}
	/*******************************************************
	*
		Startseite Anpassungen
	*
	*******************************************************/	
	#topheader p {
		position: absolute;
		font-size: 1.2rem;
		line-height: 1.7rem;
		width: 95%;
		top: 30%;
	}
	#topheader {
		background: url(../img/portrait2.jpg) fixed;
		min-height: 100vh;
	}
	/* --- Pfeil-Element "Nach unten zur Einleitung scrollen" -----------------------------------*/	
	#pfeil {
		bottom: 34%;
		position: absolute;
		transition: 1s;
		width: 90px;
	}

	/*---- Böbbel Startseite ----------------------------------------*/
	#boebbel{	
		height: 120px;
		width: 120px;
		font-size: 1rem;
		bottom: 25%;
	}

	#kunst > header 		{background: url("../img/trenner/trenner1m.jpg") center top;}
	#poetry > header 		{background: url("../img/trenner/trenner2m.jpg") center top;}
	#kontakt > header 		{background: url("../img/trenner/trenner3m.jpg") center top;}
	#uebermich > header 	{background: url("../img/trenner/trenner4m.jpg") center top;}

	#legende {
		display: block;
		padding-bottom: 2rem;
		padding-left: 7%;
	}
	#legende li{margin-top: 1rem;}

	/* --- Submit-Buttons und Buttons -----------------------------------*/
	form input[type=submit],
	button{
		margin: 2rem auto;
		display: flex;
		width: 100%;
		justify-content: center;
	}
	/*******************************************************
	*
		Über Mich Seite
	*
	*******************************************************/
	#uebermich {background: #31343c;}
	#uebermich img {
		display: block;
		max-width: 100%;
	}
	#accordion div {
		background: #128065; /*Fallback*/
		background: linear-gradient(to right, #31343c, #128065, #31343c);
	}
	/*******************************************************
	*
		Klassen > Wrapper - Video - NoDesktop
	*
	*******************************************************/
	.wrappergrey > div {
		margin: 0;
		padding: 0;
		background: #fff;
	}

	/*--- YouTube Video Responsive --------*/
	.respVideo iframe {height: 250px;}
	.desk {display: none;}
}
/*******************************************************
*
    DESKTOP ----  min-width:800px
*
*******************************************************/
@media (min-width:800px) and (max-width:1299px) {
/*******************************************************
*
    Desktop Navigation
*
*******************************************************/
#topnav {
	position: fixed;
	width: 100%;
	height: 80px;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 1.2rem;
	transition: 1s;
}
#topnav.sticky {
	height: 90px;
	font-size: 1.0rem;
	background: #00563e;
}

#topnav.sticky .desk {
	transform: translateY(calc(50% + -20px));
	height: 50px;
}
#topnav p a {display: none;}
#topnav ul {list-style: none;}

#topnav li {float: left;padding: 0 1.2vw;}

#topnav a{
	text-decoration: none;
	color: #fff;
	display: block;

}
#topnav a:hover,
#topnav a.akt {color:#CDCDCD;}
#topnav a:after {
	content:"";
	display: block;
	height: 2px;
	width: 0%;
	background: #f1c343;
	margin-top: 1px;
	transition:1s;
}
#topnav a:hover:after,
#topnav a.akt:after {width: 100%;}

#topheader p {
	font-size: 1.8rem;
	line-height: 2.3rem;
	width: 48%;
	top: 45%;
}

	#topheader {
		background: url(../img/portrait3.jpg) fixed;
		min-height: 100vh;
	}
	#topheader p {
		position: absolute;
		font-size: 1.3rem;
		line-height: 1.7rem;
		width: 95%;
		top: 45%;
	}
/* --- Submit-Buttons und Buttons -----------------------------------*/
	form input[type=submit],
	button{
		margin: 2rem auto;
		display: flex;
		width: 50%;
		justify-content: center;
	}
	#kontakt {
		padding-bottom: 50px;
	}
	
	#accordion div {
		background: #128065; /*Fallback*/
		background: linear-gradient(to right, #31343c, #128065, #31343c);
	}
	/*******************************************************
	*
		Über Mich Seite
	*
	*******************************************************/
	#uebermich {background: #31343c;}
	#uebermich img {
		display: block;
		max-width: 100%;
	}
	/*--- YouTube Video Responsive --------*/
	.respVideo iframe {height: 350px;}
	.mobile {display: none;}
}

/*******************************************************
*
    DESKTOP ----  min-width:800px
*
*******************************************************/
@media (min-width:1300px) {
/*******************************************************
*
    Desktop Navigation
*
*******************************************************/
#topnav {
	position: fixed;
	width: 100%;
	height: 80px;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 1.2rem;
	transition: 1s;
}
#topnav.sticky {
	height: 90px;
	font-size: 1.0rem;
	background: #00563e;
}

#topnav.sticky .desk {
	transform: translateY(calc(50% + -20px));
	height: 50px;
}
#topnav p a {display: none;}
#topnav ul {list-style: none;}

#topnav li {float: left;padding: 0 1.2vw;}

#topnav a{
	text-decoration: none;
	color: #fff;
	display: block;

}
#topnav a:hover,
#topnav a.akt {color:#CDCDCD;}
#topnav a:after {
	content:"";
	display: block;
	height: 2px;
	width: 0%;
	background: #f1c343;
	margin-top: 1px;
	transition:1s;
}
#topnav a:hover:after,
#topnav a.akt:after {width: 100%;}

#topheader p {
	font-size: 1.8rem;
	line-height: 2.3rem;
	width: 48%;
	top: 45%;
}

.desk {
	transform: translateY(calc(50% + -25px));
	height: 55px;
	transition: 1s;
	padding-left: 3rem;
}
/*---- No Mobile ----------------------------------------*/
.mobile {display: none;}
}