* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	line-height: 1;
	background-image: linear-gradient(rgb(215,250,230), rgb(0,95,110));
	font-family: 'Archivo Narrow', sans-serif;
}

.wrapper {
	background-image: url(../images/Rippenblume_blur_gruen.png);
	background-repeat: no-repeat;
	background-size: 50em;
	background-position: bottom right;
}

h1, h2 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 900;
	font-size: 4rem;
	width: 100%;
	justify-content: center;
	display: flex;
	margin-top: 5rem;
	margin-left: 50%;
	margin-right: 50%;
	}

#box_item_h1 {
	font-size: 0;
}

h3, h4, h5, h6 {
	font-family: 'Archivo Narrow', sans-serif;
	font-weight: 700;
	}

p {
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-moz-hyphens:auto;
	hyphens: auto;
}
	
main {
	max-width: 1420px;
	margin: 0 auto;
	flex-direction: column;
}
	
ol, ul {
	list-style: none;
}

#flexbox_container_header {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	max-width: 1420px;
}
	

nav {
	position: fixed;
	margin-top: 2%;
	margin-right: 2%;
	margin-bottom: 2%;
	margin-left: 2%;
	z-index: 5;
}
	
/*-----------------HAMBURGER------------------*/

#menuToggle {
	display: block;
	z-index: 1;
	-webkit-user-select: none;
	user-select: none;
}

#menuToggle input {
	display: inline-block;
	width: 37px;
	height: 35px;
	position: fixed;
	cursor: pointer;
	opacity: 0;
	z-index: 2;
	-webkit-touch-callout: none;
}

#menuToggle span {
	display: block;
	width: 36px;
	height: 0px;
	margin-bottom: 5px;
	position: relative;
	border: 4px dotted rgb(0,95,110);
	background: rgb(160,190,10);
	border-radius: 3px;
	z-index: 1;
	transform-origin: 4px 0px;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: rgb(0,95,110);
    border: dotted rgb(160,190,10);
}

#menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
	position: absolute;
	width: auto;
	margin: -100px 0 0 -150px;
	padding: 3em 3em 3em 10em;
	padding-top: 125px;
	background: rgba(0,0,0,0.6);
	border-bottom-right-radius: 45px;
	border-bottom-left-radius: 45px;
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	transform-origin: 0% 0%;
	transform: translate(-200%, 0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
	padding-top: 15px;
	padding-right: 0;
	padding-left: 0;
	font-size: 22px;
	line-height: 1rem;
}

/*transition hilfe mit dank an https://www.14all.eu/programmierung/css-tutorial-hover-effekte-buttons/*/
a {
	color: rgba(160,190,10,1.00);
	text-decoration: none;
	transition: color 0.7s ease-in-out;
	font-size: 1.5rem;
	line-height: 1.35rem;
}

a:hover {
	color: rgba(226,255,150,1.00);
}

#menuToggle input:checked ~ ul {
    transform: none;
}
/*---------------------------BURGER ENDE----------------------------*/	
	
#box_item_logo {
	background-image: -webkit-linear-gradient(270deg,rgba(210,247,227,0.00) 0%,rgba(210,247,227,1.00) 3.63%,rgba(255,255,255,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(210,247,227,0.00) 0%,rgba(210,247,227,1.00) 3.63%,rgba(255,255,255,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(210,247,227,0.00) 0%,rgba(210,247,227,1.00) 3.63%,rgba(255,255,255,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(210,247,227,0.00) 0%,rgba(210,247,227,1.00) 3.63%,rgba(255,255,255,1.00) 100%);
	max-width: 300px;
	width: 50%;
	border-bottom-left-radius: 45px;
	height: auto;
	align-self: flex-end;
	z-index: 50;
	margin-top: 4%;
}
	
#logorechts a img {
	max-width: 100%;
	height: auto;
}

#box_logo_tierchen {
	align-self: flex-end;
	background-image: -webkit-linear-gradient(270deg,rgba(215,250,230,1.00) 0%,rgba(0,0,0,0.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(215,250,230,1.00) 0%,rgba(0,0,0,0.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(215,250,230,1.00) 0%,rgba(0,0,0,0.00) 100%);
	background-image: linear-gradient(180deg,rgba(215,250,230,1.00) 0%,rgba(0,0,0,0.00) 100%);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	position: fixed;
	z-index: 10;
	margin-top: 5%;
	width: 5rem;
}

#logo-tierchen {
    width:100%;
    animation-name: tierchen;                
    animation-duration: 21s; 
    animation-iteration-count: infinite;
}

@keyframes tierchen {
    animation-iteration-count: infinite;
    transform-origin: 40% 20%;
}

@keyframes tierchen {
    0% {
        transform:  translate(0px,0px) scale(0.8);
    }
    2% {
        transform:  translate(-15px,-9px) scale(1.1) rotateX(-70deg);
    }
    7% {
        transform:  translate(7px,-20px) rotateZ(60deg) scale(0.9) rotateX(-40deg);
    }
    10% {
        transform:  translate(10px,-120px) rotateZ(40deg) rotateX(10deg);
    }
    18% {
        transform:  translate(0px,-100px) rotateZ(20deg) rotateY(30deg);
    }
    23% {
        transform:  translate(-10px,-30px) rotateZ(30deg) rotateX(-80deg);
    }
    33% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(0.8);
    }
}

#box_logo_tierchen a {
    width: 100%;
}

#box_logo_tierchen img {
    width: 100%;
    height:100%;
}
main article section {
	border-radius: 0px 0px 150px 150px;
	padding-bottom: 3em;
	width: 100%;
	align-content: center;
}

main article section:nth-child(2n) {
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.70) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.70) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.70) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.70) 100%);
}

main article section:nth-child(2n+1) {
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(10,50,50,0.70) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(10,50,50,0.70) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(10,50,50,0.70) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,0.00) 0%,rgba(10,50,50,0.70) 100%);
}
	
#container_digitales, #container_illustration, #container_schmuck, #container_objekt, #container_ueber, #container_kontakt, #container_ende {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	z-index: -3;
	max-width: none;
}

#digitales {
	background-image: url(../images/TA-XI.jpg);
	-webkit-text-fill-color: rgba(0,0,0,0.25);
	-webkit-background-clip: text;
	padding-bottom: 8px;
	background-repeat: no-repeat;
	background-position: 80% 63%;
	background-size: 189% auto;
}

#illustration {
	background-image: url(../images/Communitier-Fisch.jpg);
	-webkit-text-fill-color: rgba(0,0,0,0.2);
	-webkit-background-clip: text;
	padding-bottom: 8px;
	background-repeat: no-repeat;
	background-position: 69% 43%;
	background-size: 137% auto;
}

#schmuck {
	background-image: url(../images/Brosche-Jaspis.jpg);
	-webkit-text-fill-color: rgba(0,0,0,0.15);
	-webkit-background-clip: text;
	background-size: 179% auto;
	padding-bottom: 8px;
	background-position: 62% 67%;
	background-repeat: no-repeat;
}

#objekt {
	background-image: url(../images/IMG_1083_90deg.jpg);
	-webkit-text-fill-color: rgba(0,0,0,0.1);
	-webkit-background-clip: text;
	background-size: 153% auto;
	padding-bottom: 8px;
	background-repeat: no-repeat;
	background-position: 39% 12%;
}

#container_ueber {
	font-weight: 600;
	line-height: 1.35rem;
	font-size: 1.01rem;
}

#uebertibimar {
	background-image: url(../images/Bewerbungsbild.jpg);
	-webkit-text-fill-color: rgba(0,0,0,0.1);
	-webkit-background-clip: text;
	background-size: 571% auto;
	padding-bottom: 8px;
	background-repeat: no-repeat;
	background-position: 87% 91%;
	line-height: 3.7rem;
}

	
figure {
	display: flex;
	padding-top: 3em;
	align-items: flex-end;
	align-content: space-around;
	padding: 2%;
}

figure img {
	border-radius: 10px;
	height: 200px;
	width: 200px;
	object-fit: cover;
	object-position: left center;
	-webkit-box-shadow: 23px 28px 170px 15px rgba(255,255,255,1.00);
	box-shadow: 23px 28px 170px 15px rgba(255,255,255,1.00);
}

figure figcaption {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 0px;
	background-color: rgba(0,0,0,0.6);
	color: rgba(255,255,255,1.00);
	margin: 0 1.5rem 1rem -0.8rem;
	border-radius: 50% 50% 50% 0;
	z-index: 10;
	transform-origin: left;
	transform: rotate(-10deg);
	transition: width 1s;
	transition-timing-function: ease-in-out;
	-webkit-box-shadow: -1px 7px 6px -2px rgba(4,36,42,0.77);
	box-shadow: -1px 7px 6px -2px rgba(4,36,42,0.77);
}

figure figcaption:hover {
	width: 200px;
	max-width: 12rem;
	max-height: 180px;
	height: auto;
	background-color: rgba(0,0,0,0.3);
	color: rgba(255,255,255,1.00);
	font-size: inherit;
	overflow: visible;
	padding: 0.5rem 0.5rem 0.5rem 2rem;
	border-top-left-radius: 40px;
	border-bottom-right-radius: 15px;
	border-top-right-radius: 15px;
	z-index: 10;	
	transition-timing-function: ease-out;
	transform-origin: left;
	transform: rotate(0deg);
}

#lebenslauf_section {
	display: flex;
	flex-direction: column;
	color: rgba(211,211,211,1.00);
	padding-top: 0%;
	padding-right: 3%;
	padding-left: 3%;
	padding-bottom: 3%;
	margin: 0 auto;
	max-width: 50rem;
}

#lebenslauf_section section {
	margin-bottom: 10px;
}

#lebenslauf_section h3 {
	margin-top: 4%;
	margin-right: 0;
	margin-left: 15%;
	font-size: 2.2rem;
	font-weight: 400;
}

#lebenslauf_section h4 {
	margin-top: 9%;
	margin-right: 0;
	margin-left: 10%;
	margin-bottom: 5%;
	font-size: 2.2rem;
	font-weight: 400;
}

#lebenslauf_section h5 {
	font-weight: normal;
	font-size: 1.5rem;
	padding-bottom: 6px;
	padding-top: 3px;
}

#ichbiete .raster h5 {
	padding-left: 3%;
	padding-right: 3%;
	color: rgba(10,50,50,0.90);
}

#ichbiete .raster h5:nth-of-type(n+2) {
    padding-top: 5%;
}

#lebenslauf_section em {
	font-style: normal;
	font-weight: bold;
	font-size: 1.3rem;
}

#lebenslauf_section h3 {
	padding: 3% 0;
}

#lebenslauf_section ul li {
	text-align: center;
}

#lebenslauf_section p {
	padding-top: 0.5rem;
	padding-right: 5rem;
	padding-left: 10rem;
	padding-bottom: 1.5rem;
	color: rgba(0,0,0,1.00);
	text-align: left;
	letter-spacing: -0.022rem;
	word-spacing: 0.08rem;
}

/* ----Anfang CSS für "fähigkeiten" in raster! :) ------ */
		.raster {
			display: grid;
			line-height: 12px;
			grid-gap: 5px;
			width: 100%;
			padding-right: 5%;
			padding-bottom: 10%;
		}
				
		.divfaehig {
			display: flex;
			padding: 5px 0;
			align-items: center;
		}
		
		.raster p {
			width: 30%;
			min-width: 15rem;
			font-size: 1.3rem;
			float: left;
			padding: 0 5% 0 5%!important;
			text-align: right!important;
		}
		
		.a {
			width: 65%;
			border: 2px solid rgba(49,51,1.00);
			background-color: rgba(10,50,50,0.80);
			border-radius: 0.3em;
			float: left;
		}
		
		.i{
			border: 2px solid rgba(49,51,1.00);
			background-color: rgb(160,190,10);
			width: auto;
    		grid-template-columns:minmax(300px, 0.7fr);
			border-radius: 0.3em;
			font-size: 1rem;
		}
	
		.ganzgut {
			width: 60%;
		}
		
		.dreiviertel {
			width: 75%;
		}

		.achtzig {
			width: 85%;
		}

		.sehrgut {
			width: 95%;
		}

#container_kontakt {
	padding: 5rem 0;
}

#container_kontakt h2 {
	font-size: 4.5rem;
	font-weight: 900;
	line-height: 5rem;
	margin-top: 0;
	font-family: 'Archivo Narrow', sans-serif!important;
	color: rgba(160,190,10,1.00)!important;
}

main #container_kontakt p {
	font-size: 3rem;
	font-weight: 400;
	line-height: 5rem;
	font-style: italic;
	font-family: 'Titillium Web', sans-serif;
	color: rgba(160,190,10,1.00);
}
/* ----Ende CSS für "fähigkeiten" in raster! :) ------ */



/* ------CSS container_ende------------------ */
#container_ende{
	display: flex;
	flex-wrap: wrap;
	align-items:flex-end;
	align-content: center;
	max-width: 1420px;
	background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.70) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.70) 100%);
	background-image: -o-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.70) 100%);
	background-image: linear-gradient(0deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.70) 100%);
	padding:3rem 1rem;
	border-radius: 150px 150px 0px 0px ;
	margin: 0 auto;
	z-index: 1000;
}

aside {
	background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.70) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.70) 100%);
	background-image: -o-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.70) 100%);
	background-image: linear-gradient(0deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.70) 100%);
	display: flex;
	flex-direction: row;
	align-self: stretch;
	align-items: center;
	align-content: space-around;
	border-radius: 150px 150px 0px 0px;
	padding-top: 3rem;
	padding-right: 2rem;
	padding-left: 2rem;
	padding-bottom: 0;
	margin-top: 0px;
}

footer {
	padding:0;
}

aside figure {
	align-self: center;
}

aside figure img {
	width:250px;
	height:auto;
	display: inline-block;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	border-bottom-left-radius: 50%;
	vertical-align: middle;
}

#philosophie {
	color: rgba(11,101,116,1.00);
	max-width: 15rem;
	padding-top: 15px;
	margin-lef: 10px;
}

#divaside #philosophie h3 {
	line-height: 5rem;
	font-size: 2.7rem;
}

#divaside #philosophie q {
	font-family: 'Titillium Web', sans-serif;
	font-size: 1.7rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.9rem;
	margin-left: 10px;
	color: rgba(51,45,47,1.00);
	display: inline-block;
	margin-top: -2.5rem;
	padding-left: 14px;
}

#zitatanfang p {
	font-weight: 400;
	font-style: italic;
	line-height: 1.5rem;
	color: rgba(11,101,116,0.52);
	font-size: 8rem;
	width: 1rem;
	display: inline-block;
	float: left;
	padding-left: 7px;
	padding-top: 23px;
	text-indent: -6px;
}

#container_ul{
	background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(10,50,50,0.70) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(10,50,50,0.70) 100%);
	background-image: -o-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(10,50,50,0.70) 100%);
	background-image: linear-gradient(0deg,rgba(255,255,255,0.00) 0%,rgba(10,50,50,0.70) 100%);
	max-height: 180px;
	border-radius: 50px 50px 0px 0px ;
	padding:2rem;
	margin: 3rem 2rem 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-end; 
	align-items: center;
}

#container_ul li {
	color: rgba(160,190,10,1.00);
	font-size: 1.5rem;
	line-height: 1.5rem;
}
/* ----Ende CSS container_ende -------------------------------- */


/* ------CSS IMPRESSUM----------------------------------------- */
main #impressum {
	text-align: center;
	z-index: auto;
}
#impressum li {
	font-size: 1.2rem;
}

.impressum {
	position: relative;
	margin: 0 auto;
	padding: 1em;
	font-size: 2rem;
}

#impressum h1 {
	font-weight: 900;
}

#impressum h2, h3 {
	font-size: 174%;
}
/* ----Ende---CSS IMPRESSUM------------------ */


/*---------------anfang MEDIAQUERY MOBILE---------------------------------------------------------------*/	
@media (max-width: 480px){

#container_kontakt {
	margin:1.5rem 0;
	}

main #container_kontakt h2, main #container_kontakt p {
	font-size: 2.2rem;
	line-height: 3rem;
	}
	
main #container_kontakt h2 {
	margin-top: 0;
	}
	
aside, footer {
	display:block;
	}
	
aside {
	padding-bottom: 2rem;	
	}
	
#impressum h1 {
	font-size: 200%;
	font-weight: 600;
	line-height: 1.2rem;
	padding: 50px 5px 15px;
	}
	
#impressum h2 {
	font-size: 120%;
	font-weight: 600;
	padding:15px 5px 5px;
	line-height: 1.2rem;
}

#impressum h3 {
	padding:15px 5px 5px;
	font-size: 120%;
	
}
	
#impressum li {
	font-weight:400;
	line-height: 1.2rem;
	}

nav {
	display: inline-flex;
	position: fixed;
	margin-top: 2%;
	margin-right: 2%;
	margin-bottom: 2%;
	margin-left: 2%;
}
	
#menu{
	padding: 6rem 2rem 2rem 10rem;
}
	
#menu a{
	line-height: 1rem;
}
	
nav a {
	font-size: 1.2rem;
}
	
#flexbox_container_header {
	display: flex;
	flex-direction: column;
}
	
#box_item_logo {
	background-image: -webkit-linear-gradient(270deg,rgba(215,250,230,1.00) 0%,rgba(255,255,255,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(215,250,230,1.00) 0%,rgba(255,255,255,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(215,250,230,1.00) 0%,rgba(255,255,255,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(215,250,230,1.00) 0%,rgba(255,255,255,1.00) 100%);
	max-width: 300px;
	width: 50%;
	border-bottom-left-radius: 45px;
	height: auto;
	min-width: 160px;
	align-self: flex-end;
	z-index: 50;
}
	
#logorechts a img {
	max-width: 100%;
	height: auto;
}
	
#box_logo_tierchen {
	display: none;
}
	
#container_ueber {
	width: 98%;
	padding-top: 1%;
	padding-bottom: 1%;
	padding-left: 1%;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
	
#menuToggle span {
	display: block;
	width: 25px;
	height: 0px;
	margin-bottom: 4px;
	position: relative;
	border: 2px dotted rgb(0,95,110);
	background: rgb(160,190,10);
	border-radius: 3px;
	z-index: 1;
	transform-origin: -4px 0px;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        opacity 0.55s ease;
}
	
h2, #uebertibimar {
	font-size: 3rem;
	line-height: 2.8rem;
}
	
	#lebenslauf_section p {
	padding-left: 5rem;
	padding-right: 2rem;
}
	
#container_kontakt {
	padding: 2rem 0;
}
}/* ----------------ende MEDIAQUERY MOBILE------------------*/