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


@font-face {
	font-display: swap; 
	font-family: Raleway;
	src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype');
	}
@font-face {
	font-display: swap;
	font-family: encode;
	src: url('../fonts/EncodeSansSC-VariableFont_wdth,wght.ttf') format('truetype');
	}
@font-face {
	font-display: swap;
	font-family: navada;
	src: url('../fonts/navada_outline_demo-webfont.woff2') format('woff2'),               
		 url("../fonts/navada_outline_demo-webfont.woff") format('woff');
	}

/* universal selektor */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

/*type-selektoren---------------------*/
img {
	max-width: 100%;
	height: auto;
	display: block;
	}
html {
	font: 1rem Raleway, sans-serif;
	font-variation-settings: 'wght' 400;
	line-height: 140%;
	scroll-behavior: smooth;
	}

/*Mobile VERSION*/
@media (max-width: 600px) {
h1 {
	font: clamp(1rem, 2vw, 2rem) encode, sans-serif;
	font-variation-settings: 'wght' 700;
	}
h2{
	font: 2rem navada, sans-serif;
	font-variation-settings: 'wght' 700;
	}
h3 {
	font: 1.5rem encode, sans-serif;
	font-variation-settings: 'wght' 600;
	}

/*inhalte von oben---------------------*/
body {background: rgba(226,222,213,1.00)}
#checkernav {display: none;}
#navlabel {display: none;}
#logo {
	max-height: 50px;
	max-width: 50px;
	top: 110px;
	left: 10%;
	}
#topheader {
	display: flex;
	align-items: center;
	line-height: 70px;
	border-bottom: 3px solid black
	}
#topheader > div {
	flex-basis: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
/*COOKIE COOKIE COOKIE*/
#cookie a {color:rgba(226,222,213,1.00); text-decoration:none;}
#cookie a:hover {text-decoration:underline;}
#cookie div {padding:10px;}
#cookie { 
	outline: 1px solid black; 
	text-align: center; 
	border-top:1px solid;
	background: black;
	color: rgba(226,222,213,1.00); 
	position:fixed;
	bottom:0px; 
	z-index:101; 
	width:100%; 
	font-size:14px; 
	line-height:40px;
	padding: 4%;
	}
.cookieCloser {
	color: black;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid black; 
	padding: 4px 10px;
	margin-left:10px;
	margin-right: 50px;
	background: rgba(226,222,213,1.00);
	}
.cookieCloser:hover {border: 2px solid rgba(226,222,213,1.00);}
.weg {display: none;}

/*NAVIGATION*/
/************************************************/
#menu {
	position: fixed;
	top: 80px;
	right: -250px;
	width: 250px;
	z-index: 101;
	padding-bottom: 20px;
	transition: 1s;
	}
.paper {
	display: none;
	}
#checkernav:checked ~ #menu {
	right:0px;
	}
#menu ul {
	list-style: none;
	}
#menu p {
	background: black;
	position: absolute;
	left: -85px;
	top:0;
	width: 80px;
	line-height: 48px;
	text-align: center;
	font-size: 1rem;
	color: rgba(226,222,213,1.00);
	display: block;
	}
#menu p:hover {
	transform: scale(1.1);
	cursor: pointer;
	}
#menu label {
	display: block;
	transition: 1s;
	}
#checkernav:checked ~ #menu label {
	transform: rotate(360deg) scale(0.6);
	}
#checkernav {
	display: none;
	}
#menu a {
	text-decoration: none;
	color: rgba(226,222,213,1.00);
	background: black;
	display: block;
	text-align: center;
	padding: 18px 5px;
	margin-left: 8px;
	margin-right: 8px;
	margin-bottom: 5px;
	line-height: 48px;
	font: 0.9rem encode, sans-serif;
	font-variation-settings: 'wght' 500;
	}
#menu a:hover {
	border: 2px solid black;
	}
	
/*STARTSEITE*/
.bannertext {
	font: 4rem navada, sans-serif;
	font-variation-settings: 'wght' 900;
	}
#bannercontainer1 {
	overflow: hidden;
	}
#bannercontainer2 {
	display: flex;
	}
.banner {
	flex-shrink: 0;
	margin: 0;
	padding: 32px 0 0;
	min-width: 100%;
	white-space: nowrap;
	animation-name: Textbanner;
	animation-duration: 15s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	}	
#animationcontainer {
	display: block;
	top: 0px;
	left:0px;
	right: 0px;
	}
#animationcontainer2 {
	display: block;
	}
#Linoprints {
	max-width: 200px;
	margin: auto;
	}
img[src*="Linotext."] {
	position: relative;
	top:190px;
	left: calc(50% - 70px);
	max-width: 150px;
	animation-name: Linotextanimation;
	animation-duration: 5s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	}
#Illustration {
	margin: auto;
	z-index: 100;
	max-width: 200px;
	}		
#webdesignillu {
	z-index: 100;
	max-width: 145px;
	margin: auto;
	}
#River {
	position: relative;
	top: -90px;
	left: calc(50% - 65px);
	width: 7em;
	height: 3em;
	background: url("../animation/River.png");
	animation-name: River;
	animation-duration: 17s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	}
#Dune {
	z-index: 100;
	max-width: 150px;
	margin: auto;
	}
#Planet {
	position: relative;
	z-index: -1;
	left: calc(50% - 35px);
	top: -80px ;
	max-width: 70px;
	animation-name: Planet;
	animation-duration: 20s;
	animation-fill-mode: forwards;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	}
.cover {
	height: 100%;
	width: 100%;
	object-fit: cover;
	}
	
/*LINOPRINT - BILDERGALERIE*/
.container {
	display: flex;
	width: 100%;
	padding: 2%;
	margin-top: 150px;
	box-sizing: border-box;
	height: 50vh;
	}	
.container2 {
	display: flex;
	width: 100%;
	padding: 2%;
	margin-top: 30px;
	box-sizing: border-box;
	height: 100vh;
	}
.box {
	flex: 1;
	overflow: hidden;
	transition: 0.5s;
	margin: 0;
	line-height: 0;
	}
.box > img {
	width: 100%;
	height: 100%;
	object-fit: cover; 
	transition: 0.5s;
	}
.box h2 {
	text-align: center;
	font-size: 1.3rem;
	}
.textbox p {
	line-height: 1rem;
	padding: 4%;
	}
.box:hover { flex: 1 1 25%; }
.box:hover > img {
	box: active;
	width: 100%;
	height: 100%;
	object-fit: contain;
	}
#lino a {
	color: black;
	}
	
/**ILLUSTRATION - SLIDER ILLUSTRATION/
/*Slider für Illustrationen*/
.Desktopillu {
	display: none;
	}
.Mobileillu {
	text-align: center;
	margin: 10px;
	padding: 4%;
	}
.Mobileillu h2, p {
	margin: 5px;
	padding: 4%;
	}
.Mobileillu a {
	color: black;
	}
.columnillu {
	column-count: 2;
	column-width: 200px;
	}
.columnillu img {
	padding-bottom: 10px;
	}
/*Hover Box - Gig Poster*/
#gigposter h2 {
	text-align: center;
	margin-top: 150px;
	margin-bottom: 50px;
	}
#gigposter p {
	text-align: center;
	margin: auto;
	padding: 4%;
	}
#Hovercontainer {
	margin: 10%;
	display: block;
	}
.rahmen {
	box-shadow: 0px 0px 10px silver;
	max-width: 600px;
	max-height: 750px;
	position: relative;
	overflow: hidden;
	margin: 50px 10px;
	}
.rahmentransp {
	max-width: 600px;
	max-height: 750px;
	position: relative;
	overflow: hidden;
	margin:10px;
	}
.rahmentransp .hoverimg {
	position: relative;
	top: 15%;
	left: 0;
	opacity: 1;
	transition: 2s;
	}
.rahmentransp h3 {
	position: relative;
	bottom: 100%;
	left: 0px;
	right: 0px;
	text-align: center;
	background: rgba(148,73,73,1.00);
	padding: 0.5rem 1rem;
	opacity: 1;
	}

/*PDF DATEI*/
.PDF a {
	color: black;
	}
.PDF {
	padding: 4%;
	}
	
/*WEBDESIGN*/
#Ueberschrift {
	text-align: center;
	margin: 100px 0;
	}
#Ueberschrift h2 {
	margin: 50px 0;
	}
/*Webdesign Hover Box*/
.card {
	box-shadow: 0px 0px 10px silver;
	max-width: 400px;
	max-height: 400px;
	position: relative;
	overflow: hidden;
	margin: auto;
	margin-bottom: 10px;
	}
.card .secondimg {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: 2s;
	}
.card:hover .secondimg {
	opacity: 1;
	}
.card h3 {
	position: relative;
	bottom: 10px;
	left: 0px;
	right: 0px;
	background: rgba(226,222,213,1.00);
	text-align: center;
	transition: 1.6s;
	}
.card:last-of-type h3 {
	bottom: 60px
	}
.card:hover h3 {
	top: 60px;
	transition: 0.5s;
	}
.card p {
	position: absolute;
	left: 0px;
	bottom: -130px;
	right: 0px;
	padding: 0.5rem 1rem;
	background: rgba(226,222,213,1.00);
	border: 3px solid;
	font-size: 1.2rem;
	transition: 2s;
	opacity: 0;
	}
.card a {
	color: black;
	}
.card:hover p {
	bottom: 5px;
	transition: 0.5s;
	opacity: 1;
	}
.column {
	column-count: 1;
	column-width: 200px;
	}
.column img {
	padding-bottom: 10px;
	}

/*CONTACT & ABOUT ME*/
.shadowframe1 {
	padding: 30px;
	margin: 30px;
	box-shadow: 0px 0px 10px grey;
	border-radius: 5px;
	background:  rgba(253,249,247,0.7);
	}
.shadowframe {
	padding: 30px;
	margin: 30px;
	box-shadow: 0px 0px 10px grey;
	border-radius: 5px;
	background: rgba(253,249,247,0.6);
	}
form input, form textarea {
	background: none;
	border: none;
	outline: none;
	border-bottom: 1px solid black;
	width: 200px;
	font: 0.9rem Raleway, sans-serif;
	font-variation-settings: 'wght' 400;
	transition: 1s;
	}
form textarea {
	border: 1px solid black;
	transition: 1s;
	}
form input:focus, form textarea:focus {
	border-bottom-width: 3px;
	border-width: 3px;
	}
form input[type="submit"] {
	border-radius: 50%;
	border: 1px solid;
	box-shadow: 0px 0px 10px silver;
	width: 70px;
	height: 70px;
	font: 0.9rem Raleway, sans-serif;
	font-variation-settings: 'wght' 400;
	line-height: 30px;
	margin-bottom: 40px;
	cursor: pointer;
	}
#contact a {
	color: black;
	}
#aboutme {
	display: block;
	justify-content: center;
	align-items: center;
	padding: 60px 30px;
	}
#aboutme h2 {
	margin-top: 20px;
	}

/*IMPRESSUM & DATA PRIVACY POLICY*/
pre {
	font: 0.8rem Raleway, sans-serif;
	font-variation-settings: 'wght' 400;
	}			
.Impressumlayout {
	text-align: justify;
	padding: 4%;
	}
.Impressumlayout p {
	padding: 2%;
	font: 0.8rem Raleway, sans-serif;
	font-variation-settings: 'wght' 400;
	}

/*BACK TO TOP*/
#top a {display: none;}

/*FOOTER*/
footer {
	border-top: 3px solid;
	height: 100px;
	color: black;
	display: block;
	text-align: center;
	}		
footer a {
	color: black;
	}
footer > * {
	padding: 10px;
	}
#Insta img{
	width: 48px;
	height: 48px;
	margin: auto;
	}

/*freie klassen------------------------*/
/*WRAPPER*/
.wrap900 {max-width: 900px; margin-left: auto; margin-right: auto;}
.wrap500 {max-width: 500px; margin-left: auto; margin-right: auto;}
/*ABSTÄNDE*/
.pad2 {padding: 2%;}
.matop20 {margin-top: 20px;}
.mabot20 {margin-bottom: 20px;}
/*FLEX*/
.flexcontainer {display: flex; flex-wrap: wrap;}
.flexcontainer > * { 
	flex-basis: 0;
	flex-grow: 1;
	}
/*COLOR*/
.bg05 {background: rgba(226,222,213,0.5)}
/*BORDER*/
.square {height: 100px; background: rgba(253,249,247,0.6); border-top: 3px solid; border-bottom: 3px solid;}
}		

/*Tablet VERSION*/
@media (min-width: 601px) and (max-width: 900px) {
h1 {
	font: clamp(1rem, 2vw, 2rem) encode, sans-serif;
	font-variation-settings: 'wght' 700;
	}
h2{
	font: 2rem navada, sans-serif;
	font-variation-settings: 'wght' 700;
	}
h3 {
	font: 1.5rem encode, sans-serif;
	font-variation-settings: 'wght' 600;
	}

/*inhalte von oben---------------------*/
body {background: rgba(226,222,213,1.00)}
#checkernav {display: none;}
#navlabel {display: none;}
#logo {
	max-height: 50px;
	max-width: 50px;
	top: 110px;
	left: 10%;
	}
#topheader {
	display: flex;
	align-items: center;
	line-height: 70px;
	border-bottom: 3px solid black
	}
#topheader > div {
	flex-basis: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
/*COOKIE COOKIE COOKIE*/
#cookie a {color:rgba(226,222,213,1.00); text-decoration:none;}
#cookie a:hover {text-decoration:underline;}
#cookie div {padding:10px;}
#cookie { 
	outline: 1px solid black; 
	text-align: center; 
	border-top:1px solid;
	background: black;
	color: rgba(226,222,213,1.00); 
	position:fixed;
	bottom:0px; 
	z-index:101; 
	width:100%; 
	font-size:14px; 
	line-height:40px;
	padding: 4%;
	}
.cookieCloser {
	color: black;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid black; 
	padding: 4px 10px;
	margin-left:10px;
	margin-right: 50px;
	background: rgba(226,222,213,1.00);
	}
.cookieCloser:hover {border: 2px solid rgba(226,222,213,1.00);}
.weg {display: none;}

/*NAVIGATION*/
/************************************************/
#menu {
	position: fixed;
	top: 80px;
	right: -250px;
	width: 250px;
	z-index: 101;
	padding-bottom: 20px;
	transition: 1s;
	}
.paper {
	display: none;
	}
#checkernav:checked ~ #menu {
	right:0px;
	}
#menu ul {
	list-style: none;
	}
#menu p {
	background: black;
	position: absolute;
	left: -85px;
	top:0;
	width: 80px;
	line-height: 48px;
	text-align: center;
	font-size: 1rem;
	color: rgba(226,222,213,1.00);
	display: block;
	}
#menu p:hover {
	transform: scale(1.1);
	cursor: pointer;
	}
#menu label {
	display: block;
	transition: 1s;
	}
#checkernav:checked ~ #menu label {
	transform: rotate(360deg) scale(0.6);
	}
#checkernav {
	display: none;
	}
#menu a {
	text-decoration: none;
	color: rgba(226,222,213,1.00);
	background: black;
	display: block;
	text-align: center;
	padding: 18px 5px;
	margin-left: 8px;
	margin-right: 8px;
	margin-bottom: 5px;
	line-height: 48px;
	font: 0.9rem encode, sans-serif;
	font-variation-settings: 'wght' 500;
	}
#menu a:hover {
	border: 2px solid black;
	}
/*STARTSEITE*/
.bannertext {
	font: 8rem navada, sans-serif;
	font-variation-settings: 'wght' 900;
	}
#bannercontainer1 {
	overflow: hidden;
	}
#bannercontainer2 {
	display: flex;
	}
.banner {
	flex-shrink: 0;
	margin: 0;
	padding: 410px 0;
	min-width: 100%;
	white-space: nowrap;
	animation-name: Textbanner;
	animation-duration: 15s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	}
#animationcontainer {
	position: absolute;
	top: 0px;
	left:0px;
	right: 0px;
	}
#animationcontainer2 {
	position: relative;
	}
#Linoprints {
	position: absolute;
	top: 190px;
	left: 2em;
	z-index: 100;
	max-width: 300px;
	margin: 2%;
	}
img[src*="Linotext."] {
	position: absolute;
	top: 210px;
	left: 20%;
	max-width: 200px;
	animation-name: Linotextanimation;
	animation-duration: 5s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	}
#Illustration {
	position: absolute;
	top: 575px;
	left: 55%;
	z-index: 100;
	max-width: 400px;
	}		
#webdesignillu {
	position: absolute;
	z-index: 100;
	top: 200px;
	left: 60%;
	max-width: 200px;
	}
#River {
	position: absolute;
	left: 60.2%;
	top: 350px;
	width: 12em;
	height: 5em;
	background: url("../animation/River.png");
	animation-name: River;
	animation-duration: 17s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	}
#Dune {
	position: absolute;
	z-index: 100;
	top: 560px;
	left: 20%;
	max-width: 200px;
	}
#Planet {
	position: absolute;
	z-index: 99;
	left: 23%;
	max-width: 100px;
	top: 700px;
	animation-name: Planettablet;
	animation-duration: 20s;
	animation-fill-mode: forwards;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	}
.cover {
	height: 100%;
	width: 100%;
	object-fit: cover;
	}
	
/*LINOPRINT - BILDERGALERIE*/
.container {
	display: flex;
	width: 100%;
	padding: 2%;
	margin-top: 150px;
	box-sizing: border-box;
	height: 50vh;
	}	
.container2 {
	display: flex;
	width: 100%;
	padding: 2%;
	margin-top: 30px;
	box-sizing: border-box;
	height: 100vh;
	}
.box {
	flex: 1;
	overflow: hidden;
	transition: 0.5s;
	margin: 0;
	line-height: 0;
	}
.box > img {
	width: 100%;
	height: 100%;
	object-fit: cover; 
	transition: 0.5s;
	}
.box h2 {
	text-align: center;
	font-size: 1.3rem;
	}
.textbox p {
	line-height: 1rem;
	padding: 4%;
	}
.box:hover { flex: 1 1 25%; }
.box:hover > img {
	box: active;
	width: 100%;
	height: 100%;
	object-fit: contain;
	}
#lino a {
	color: black;
	}
	
/**ILLUSTRATION - SLIDER ILLUSTRATION/
/*Slider für Illustrationen*/
.Desktopillu {
	display: none;
	}
.Mobileillu {
	text-align: center;
	margin: 10px;
	padding: 4%;
	}
.Mobileillu h2, p {
	margin: 5px;
	padding: 4%;
	}
.Mobileillu a {
	color: black;
	}
.columnillu {
	column-count: 2;
	column-width: 200px;
	}
.columnillu img {
	padding-bottom: 10px;
	}
/*Hover Box - Gig Poster*/
#gigposter h2 {
	text-align: center;
	margin-top: 150px;
	margin-bottom: 50px;
	}
#gigposter p {
	text-align: center;
	margin: auto;
	padding: 4%;
	}
#Hovercontainer {
	margin: 10%;
	display: block;
	}
.rahmen {
	box-shadow: 0px 0px 10px silver;
	max-width: 600px;
	max-height: 750px;
	position: relative;
	overflow: hidden;
	margin: 50px 10px;
	}
.rahmentransp {
	max-width: 600px;
	max-height: 750px;
	position: relative;
	overflow: hidden;
	margin:10px;
	}
.rahmentransp .hoverimg {
	position: relative;
	top: 15%;
	left: 0;
	opacity: 1;
	transition: 2s;
	}
.rahmentransp h3 {
	position: relative;
	bottom: 100%;
	left: 0px;
	right: 0px;
	text-align: center;
	background: rgba(148,73,73,1.00);
	padding: 0.5rem 1rem;
	opacity: 1;
	}

/*PDF DATEI*/
.PDF a {
	color: black;
	}
.PDF {
	padding: 4%;
	}
	
/*WEBDESIGN*/
#Ueberschrift {
	text-align: center;
	margin: 100px 0;
	}
#Ueberschrift h2 {
	margin: 50px 0;
	}
/*Webdesign Hover Box*/
.card {
	box-shadow: 0px 0px 10px silver;
	max-width: 400px;
	max-height: 400px;
	position: relative;
	overflow: hidden;
	margin: auto;
	margin-bottom: 10px;
	}
.card .secondimg {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: 2s;
	}
.card:hover .secondimg {
	opacity: 1;
	}
.card h3 {
	position: relative;
	bottom: 10px;
	left: 0px;
	right: 0px;
	background: rgba(226,222,213,1.00);
	text-align: center;
	transition: 1.6s;
	}
.card:last-of-type h3 {
	bottom: 60px
	}
.card:hover h3 {
	top: 60px;
	transition: 0.5s;
	}
.card p {
	position: absolute;
	left: 0px;
	bottom: -130px;
	right: 0px;
	padding: 0.5rem 1rem;
	background: rgba(226,222,213,1.00);
	border: 3px solid;
	font-size: 1.2rem;
	transition: 2s;
	opacity: 0;
	}
.card a {
	color: black;
	}
.card:hover p {
	bottom: 5px;
	transition: 0.5s;
	opacity: 1;
	}
.column {
	column-count: 1;
	column-width: 200px;
	}
.column img {
	padding-bottom: 10px;
	}

/*CONTACT & ABOUT ME*/
.shadowframe1 {
	padding: 30px;
	margin: 30px;
	box-shadow: 0px 0px 10px grey;
	border-radius: 5px;
	background:  rgba(253,249,247,0.7);
	}
.shadowframe {
	padding: 30px;
	margin: 30px;
	box-shadow: 0px 0px 10px grey;
	border-radius: 5px;
	background: rgba(253,249,247,0.6);
	}
form input, form textarea {
	background: none;
	border: none;
	outline: none;
	border-bottom: 1px solid black;
	width: 200px;
	font: 0.9rem Raleway, sans-serif;
	font-variation-settings: 'wght' 400;
	transition: 1s;
	}
form textarea {
	border: 1px solid black;
	transition: 1s;
	}
form input:focus, form textarea:focus {
	border-bottom-width: 3px;
	border-width: 3px;
	}
form input[type="submit"] {
	border-radius: 50%;
	border: 1px solid;
	box-shadow: 0px 0px 10px silver;
	width: 70px;
	height: 70px;
	font: 0.9rem Raleway, sans-serif;
	font-variation-settings: 'wght' 400;
	line-height: 30px;
	margin-bottom: 40px;
	cursor: pointer;
	}
#contact a {
	color: black;
	}
#aboutme {
	display: block;
	justify-content: center;
	align-items: center;
	padding: 60px 30px;
	}
#aboutme h2 {
	margin-top: 20px;
	}

/*IMPRESSUM & DATA PRIVACY POLICY*/
pre {
	font: 0.8rem Raleway, sans-serif;
	font-variation-settings: 'wght' 400;
	}			
.Impressumlayout {
	text-align: justify;
	padding: 4%;
	}
.Impressumlayout p {
	padding: 2%;
	font: 0.8rem Raleway, sans-serif;
	font-variation-settings: 'wght' 400;
	}

/*BACK TO TOP*/
#top a {display: none;}

/*FOOTER*/
footer {
	border-top: 3px solid;
	height: 100px;
	color: black;
	display: block;
	text-align: center;
	}		
footer a {
	color: black;
	}
footer > * {
	padding: 10px;
	}
#Insta img{
	width: 48px;
	height: 48px;
	margin: auto;
	}

/*freie klassen------------------------*/
/*WRAPPER*/
.wrap900 {max-width: 900px; margin-left: auto; margin-right: auto;}
.wrap500 {max-width: 500px; margin-left: auto; margin-right: auto;}
/*ABSTÄNDE*/
.pad2 {padding: 2%;}
.matop20 {margin-top: 20px;}
.mabot20 {margin-bottom: 20px;}
/*FLEX*/
.flexcontainer {display: flex; flex-wrap: wrap;}
.flexcontainer > * { 
	flex-basis: 0;
	flex-grow: 1;
	}
/*COLOR*/
.bg05 {background: rgba(226,222,213,0.5)}
/*BORDER*/
.square {height: 100px; background: rgba(253,249,247,0.6); border-top: 3px solid; border-bottom: 3px solid;}
}


/*DESKTOP VERSION*/
@media (min-width: 901px) {
h1 {
	font: clamp(1rem, 2vw, 2rem) encode, sans-serif;
	font-variation-settings: 'wght' 700;
	}
h2{
	font: 3rem navada, sans-serif;
	font-variation-settings: 'wght' 700;
	}
h3 {
	font: 1.5rem encode, sans-serif;
	font-variation-settings: 'wght' 600;
	}

/*inhalte von oben---------------------*/
body {background: rgba(226,222,213,1.00)}
#checkernav {display: none;}
#navlabel {display: none;}
#logo {
	max-height: 50px;
	max-width: 50px;
	top: 110px;
	left: 10%;
	}
#topheader {
	display: flex;
	align-items: center;
	line-height: 70px;
	border-bottom: 3px solid black
	}
#topheader > div {
	flex-basis: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
/*COOKIE COOKIE COOKIE*/
#cookie a {color:rgba(226,222,213,1.00); text-decoration:none;}
#cookie a:hover {text-decoration:underline;}
#cookie div {padding:10px;}
#cookie { 
	outline: 1px solid black; 
	text-align:right; 
	border-top:1px solid;
	background: black;
	color: rgba(226,222,213,1.00); 
	position:fixed;
	bottom:0px; 
	z-index:101; 
	width:100%; 
	font-size:14px; 
	line-height:40px;
	}
.cookieCloser {
	color: black;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid black; 
	padding: 4px 10px;
	margin-left:10px;
	margin-right: 50px;
	background: rgba(226,222,213,1.00);
	}
.cookieCloser:hover {border: 2px solid rgba(226,222,213,1.00);}
.weg {display: none;}

/*NAVIGATION*/
/************************************************/
#menu {
	border-left: 3px solid;
	border-right: 3px solid;
	}
#menu ul {
	list-style: none;
	display: flex;
	gap: 1.2rem;
	}
#menu a {
	text-decoration: none;
	color: black;
	padding: 1rem 2rem;
	display: block;
	}
#menu a:hover {
	transform: scale(1.2);
	text-decoration: underline;
	text-underline-offset: 4px;
	}
#menu li {
	position: relative;
	top: -1.4px;
	}
#menu ul ul {
	display: block;
	list-style: none;
	position: absolute;
	z-index: 99;
	min-width: 100%;
	transform: translateY(-20px);
	opacity: 0;
    visibility: hidden;
	transition: 1s;
	}
#menu li:hover ul {
	display: block;
	transform: translateY(0);
	opacity: 1;
	visibility: visible;				
	}
#menu ul ul a {
	font-size: 0.9rem;
	border: 3px solid;
	border-top: 3px solid rgba(226,222,213,1.00);
	padding: 1rem 1rem;
	margin: 2%;
	text-align: center;
	transition: 0.5s;
	line-height: 48px;
	}
#menu ul ul a:hover {
	font-size: 1rem;
	transform: scale(1);
	}

/*STARTSEITE*/
.bannertext {
	font: 8rem navada, sans-serif;
	font-variation-settings: 'wght' 900;
	}
#bannercontainer1 {
	overflow: hidden;
	}
#bannercontainer2 {
	display: flex;
	}
.banner {
	flex-shrink: 0;
	margin: 0;
	padding: 450px 0;
	min-width: 100%;
	white-space: nowrap;
	animation-name: Textbanner;
	animation-duration: 15s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	}
#animationcontainer {
	position: absolute;
	top: 0px;
	left:0px;
	right: 0px;
	}
#animationcontainer2 {
	position: relative;
	}
#Linoprints {
	position: absolute;
	top: 190px;
	left: 2em;
	z-index: 100;
	max-width: 400px;
	margin: 2%;
	}
img[src*="Linotext."] {
	position: absolute;
	top: 275px;
	left: 15%;
	max-width: 300px;
	animation-name: Linotextanimation;
	animation-duration: 5s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	}
#Illustration {
	position: absolute;
	top: 656px;
	left: 55%;
	z-index: 100;
	max-width: 400px;
	}		
#webdesignillu {
	position: absolute;
	z-index: 100;
	top: 200px;
	left: 60%;
	max-width: 280px;
	}
#River {
	position: absolute;
	left: 60.2%;
	top: 410px;
	width: 17em;
	height: 7em;
	background: url("../animation/River.png");
	animation-name: River;
	animation-duration: 17s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	}
#Dune {
	position: absolute;
	z-index: 100;
	top: 650px;
	left: 20%;
	max-width: 300px;
	}
#Planet {
	position: absolute;
	z-index: 99;
	left: 23%;
	top: 855px;
	max-width: 150px;
	animation-name: Planetdesktop;
	animation-duration: 20s;
	animation-fill-mode: forwards;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	}
.cover {
	height: 100%;
	width: 100%;
	object-fit: cover;
	}
	
/*LINOPRINT - BILDERGALERIE*/
.container {
	display: flex;
	width: 100%;
	padding: 2%;
	margin-top: 300px;
	box-sizing: border-box;
	height: 100vh;
	}	
.container2 {
	display: flex;
	width: 100%;
	padding: 2%;
	margin-top: 50px;
	box-sizing: border-box;
	height: 100vh;
	}
.box {
	flex: 1;
	overflow: hidden;
	transition: 0.5s;
	margin: 0;
	line-height: 0;
	}
.box > img {
	width: 100%;
	height: 100%;
	object-fit: cover; 
	transition: 0.5s;
	}
.box h2 {
	text-align: center
	}
.textbox p {
	line-height: 1.6rem;
	padding: 4%;
	}

.box:hover { flex: 1 1 25%; }
.box:hover > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	}
#lino a {
	color: black;
	}
/**ILLUSTRATION - SLIDER ILLUSTRATION/
/*Slider für Illustrationen*/
#illustration {
	margin-top: 150px;
	margin-bottom: 150px;
	}
#illustration h2, #illustration p {
	text-align: center;
	margin: 10%;
	}
.Mobileillu {
	display: none;
	}
/*Hover Box - Gig Poster*/
#gigposter h2 {
	text-align: center;
	margin-top: 150px;
	margin-bottom: 50px;
	}
#Hovercontainer {
	margin: 50px 50px;
	}
.rahmen {
	box-shadow: 0px 0px 10px silver;
	max-width: 600px;
	max-height: 750px;
	position: relative;
	overflow: hidden;
	margin:10px;
	}
.rahmentransp {
	max-width: 600px;
	max-height: 750px;
	position: relative;
	overflow: hidden;
	margin:10px;
	}
.rahmentransp .hoverimg {
	position: absolute;
	top: 15%;
	left: 0;
	opacity: 0;
	transition: 2s;
	}
.rahmentransp:hover .hoverimg {
	opacity: 1;
	}
.rahmentransp h3 {
	position: absolute;
	top: 50%;
	left: 0px;
	right: 0px;
	text-align: center;
	background: rgba(148,73,73,1.00);
	padding: 0.5rem 1rem;
	opacity: 1;
	transition: 1.6s;
	}
.rahmentransp:hover h3 {
	opacity: 0;
	}
.rahmen p {
	position: absolute;
	left: 0px;
	bottom: -130px;
	right: 0px;
	padding: 0.5rem 1rem;
	background: rgba(208,225,210,0.7);
	font-size: 1.2rem;
	transition: 2s;
	opacity: 0;
	}
.rahmen:hover p {
	bottom: 130px;
	transition: 0.5s;
	opacity: 1;
	}
/*PDF DATEI*/
.PDF a {
	color: black;
	}
.PDF {
	padding: 4%;
	}
/*WEBDESIGN*/
#Ueberschrift {
	text-align: center;
	margin: 100px 0;
	}
#Ueberschrift h2 {
	margin: 50px 0;
	}
/*Webdesign Hover Box*/
.card {
	box-shadow: 0px 0px 10px silver;
	width: 400px;
	height: 400px;
	position: relative;
	overflow: hidden;
	margin:10px
		10px 40px;
	
	}
.card .secondimg {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: 2s;
	}
.card:hover .secondimg {
	opacity: 1;
	}
.card h3 {
	position: absolute;
	top: 340px;
	left: 0px;
	right: 0px;
	background: rgba(226,222,213,1.00);
	text-align: center;
	transition: 1.6s;
	}
.card:hover h3 {
	top: 300px;
	transition: 0.5s;
	}
.card p {
	position: absolute;
	left: 0px;
	bottom: -130px;
	right: 0px;
	padding: 0.5rem 1rem;
	background: rgba(226,222,213,1.00);
	font-size: 1.2rem;
	transition: 2s;
	opacity: 0;
	}
.card a {
	color: black;
	}
.card:hover p {
	bottom: 5px;
	transition: 0.5s;
	opacity: 1;
	}
.column {
	column-count: 2;
	column-width: 200px;
	}
.column img {
	padding-bottom: 10px;
	}

/*CONTACT & ABOUT ME*/
.shadowframe1 {
	padding: 30px;
	margin: 100px;
	box-shadow: 0px 0px 10px grey;
	border-radius: 5px;
	background:  rgba(253,249,247,0.7);
	}
.shadowframe {
	padding: 30px;
	margin: 30px;
	box-shadow: 0px 0px 10px grey;
	border-radius: 5px;
	background: rgba(253,249,247,0.6);
	}
form input, form textarea {
	background: none;
	border: none;
	outline: none;
	border-bottom: 1px solid black;
	width: 300px;
	font: 0.9rem Raleway, sans-serif;
	font-variation-settings: 'wght' 400;
	transition: 1s;
	}
form textarea {
	border: 1px solid black;
	transition: 1s;
	}
form input:focus, form textarea:focus {
	border-bottom-width: 3px;
	border-width: 3px;
	}
form input[type="submit"] {
	border-radius: 50%;
	border: 1px solid;
	box-shadow: 0px 0px 10px silver;
	width: 70px;
	height: 70px;
	font: 0.9rem Raleway, sans-serif;
	font-variation-settings: 'wght' 400;
	line-height: 30px;
	margin: 40px 0;
	cursor: pointer;
	}
#aboutme {
	justify-content: center;
	align-items: center;
	padding: 60px 60px;
	}
#contact a {
	color: black;
	padding: 4%;
	}

/*IMPRESSUM & DATA PRIVACY POLICY*/
pre {
	font: 0.8rem Raleway, sans-serif;
	font-variation-settings: 'wght' 400;
	}			
.Impressumlayout {
	text-align: justify;
	padding: 4%;
	}
.Impressumlayout p {
	padding: 2%;
	font: 0.8rem Raleway, sans-serif;
	font-variation-settings: 'wght' 400;
	}

/*BACK TO TOP*/
#top {
	position: fixed;
	bottom: 9rem;
	right: 3rem;
	z-index: 100;
	display: none;
	}
#top a {
	width: 48px;
	line-height:48px;
	background: black;
	display: block;
	color: rgba(226,222,213,1.00);
	text-align: center;
	text-decoration: none;
	border-radius: 50%;
	}
/*FOOTER*/
/****************************************************************/
footer {
	border-top: 3px solid;
	height: 100px;
	color: black;
	display: flex;
	align-items: center;
	justify-content: space-around;
	}		
footer a {
	color: black;
	}
#Insta {
	max-width: 40px;
	max-height: 40px;
	}

/*freie klassen------------------------*/
/*WRAPPER*/
.wrap900 {max-width: 900px; margin-left: auto; margin-right: auto;}
.wrap500 {max-width: 500px; margin-left: auto; margin-right: auto;}
/*ABSTÄNDE*/
.pad2 {padding: 2%;}
.matop20 {margin-top: 20px;}
.mabot20 {margin-bottom: 20px;}
/*FLEX*/
.flexcontainer {display: flex;}
.flexcontainer > * { 
	flex-basis: 0;
	flex-grow: 1;
	}
/*COLOR*/
.bg05 {background: rgba(226,222,213,0.5)}
/*BORDER*/
.square {height: 100px; background: rgba(253,249,247,0.6); border-top: 3px solid; border-bottom: 3px solid;}
}

/*Keyframes*/
@keyframes Textbanner {
	from {transform: translateX(0%);} 
	to {transform: translateX(-100%);}
	}
@keyframes Linotextanimation {
	0% {transform: rotate(0deg);}
	50% {transform: rotate(3deg);}
	100% {transform: rotate(-3deg);}
	}
@keyframes River {
	0% { background-position: left top;}
	100% { background-position: right top;}
	}
@keyframes Planet {
	0% { transform: translateY(-40px);}
	40% { transform: translateY(-120px);} 
	60% { transform: translateY(-120px);}
	100% {transform: translateY(-40px);}
	}
@keyframes Planettablet {
	0% { transform: translateY(0px);}
	40% { transform: translateY(-120px);} 
	60% { transform: translateY(-120px);}
	100% {transform: translateY(0px);}
	}
@keyframes Planetdesktop {
	0% { transform: translateY(10px);}
	40% { transform: translateY(-190px);} 
	60% { transform: translateY(-190px);}
	100% {transform: translateY(10px);}
	}
@keyframes Planetdesktop {
	0% { transform: translateY(10px);}
	40% { transform: translateY(-190px);} 
	60% { transform: translateY(-190px);}
	100% {transform: translateY(10px);}
	}