/*

The Standard Breakpoints. But possibly this is a slightly complicated situation.
@media all and (min-width:1200px){ ... }
@media all and (min-width: 960px) and (max-width: 1199px) { ... }
@media all and (min-width: 768px) and (max-width: 959px) { ... }
@media all and (min-width: 480px) and (max-width: 767px){ ... }
@media all and (max-width: 599px) { ... }
@media all and (max-width: 479px) { ... }

.mitfoto
	nav
	#mit-foto
	#ohne-foto
		.taetigkeit
		.oeffentlich
	.footer
	
*/

/********************************************************************
								fade
				http://jsfiddle.net/SO_AMK/VV2ek/
********************************************************************/


#wrapper {
	background-size: cover;
	opacity: 0;
}
#wrapper2 {
	background-color: gray;
	opacity: 0.5;	
}
.erscheine {
    animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}


/********************************************************************
								TEST
********************************************************************/

.info {
	display: none;
}

.info {
	color: white;
	background-color: transparent;
	padding: 10px;
	position: fixed;
	right: 2px;
	top: 2px;
}

#px768	{display: none;}
#px960	{display: none;}
#px1200	{display: none;}

@media screen and (max-width: 1200px) {
	#px768	{display: none;}
	#px960	{display: none;}
	#px1200	{display: block;}
}
@media screen and (max-width: 960px) {
	#px768	{display: none;}
	#px960	{display: block;}
	#px1200	{display: none;}
}
@media screen and (max-width: 768px) {
	#px768	{display: block;}
	#px960	{display: none;}
	#px1200	{display: none;}
}

/*
#mit-foto,
#ohne-foto {
	border: 1px solid red;
}
.vita,
.taetigkeit,
.oeffentlich {
	border: 1px solid blue;
}
*/
	
/********************************************************************
								diverse
********************************************************************/

body {
	overflow-x: hidden;
}
	
@media screen and (max-width: 960px) {
	.focus {
		display: none;
	}
}
.round {
    border: 5px solid #fff;
    border-radius: 50%;
    max-width: 300px;
}

section .content p {
	margin: 0;
	padding: 0 0 0.5em 0;
}


/********************************************************************
								border
/********************************************************************/

.vita,
.taetigkeit,
.oeffentlich,
.angebot {
    border-radius: 20px;
}
.vita .header,
.taetigkeit .header,
.oeffentlich .header,
.angebot .header {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.vita .header {
	border-bottom: 1px solid #aaaaaacc;
}

#mit-foto .spruch p {
    border-bottom: 1px solid #fff1a3;
    border-top: 1px solid #fff1a3;
}


/********************************************************************
							background-color
/********************************************************************/

/* body {
    background: url(img/huette50.jpg) fixed center center;
    background-size: cover;
} */

body {
	background-color: #421606;
}

@media screen and (min-width: 1200px) {
	#wrapper {
		background: url(img/huette-1024x768.jpg) fixed center center;
		background-size: cover;
		background-position-y: -60px;
	}
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
	#wrapper {
		background: url(img/huette-512x384.jpg) fixed center center;
		background-size: cover;
		background-position-y: -60px;
	}
}
@media screen and (max-width: 768px) {
	#wrapper {
		background: url(img/huette-256x192.jpg) fixed center center;
		background-size: cover;
		background-position-y: -60px;
	}
}

#ohne-foto {
	background-color: #a4aec1; /* #ddd; */
}

.impressum {
	background-color: #344461; /* #162130; #222; */
}

/*
	#cc9274;
	#562d14b5;	braun
	#110f0896;	schwarzbraun
	#49745dcc;	grün
	#2e4261cc;	blaugrau
	#555555cc;	grau
*/

.vita {
	background-color: #ffeda1dd; /* #2e4261cc; */
}
.vita .header {
	background-color: #fedc4988;
}

.taetigkeit,
.taetigkeit .header {
	background-color: #fedc4988; /* #2e4261cc; */
}

.angebot,
.angebot .header {
	background-color: #2e4261cc; /* #49745dcc; */
}

.oeffentlich,
.oeffentlich .header {
	background-color: #c4cee1cc;
}



/********************************************************************
								color
/********************************************************************/

body,
nav ul li a,
#mit-foto .name,
.impressum {
    color: #eee;
}

nav ul li a:hover,
.taetigkeit .header,
.angebot .header {
    color: #ffeda1; /* #fff1a3; */
}

.oeffentlich {
	color: #333;
}

.vita,
.vita .header {
	color: #333;
}


/********************************************************************
								font
/********************************************************************/

body {
    font-family: 'Raleway', sans-serif;
	font-size: 1em;
    line-height: 1.8em;
}
/*
.vita .header,
.taetigkeit .header,
.oeffentlich .header,
.angebot .header {
*/
article .header {
	font-size: 1.5em;
	text-align: center;
}
#mit-foto .name {
    font-weight: 400;
    font-size: 4em;
    font-style: italic;
    line-height: 1.1em;
    text-align: right;
    text-shadow: 4px 2px 14px #000;
}
#mit-foto .willkommen {
    font-size: 1.4em;
    line-height: 1.4em;
	letter-spacing: 1px;
	padding: 10px;
    text-shadow: 2px 1px 7px #000;	
}
#mit-foto .willkommen p {
	margin: 0;
}
#mit-foto .spruch {
    font-family: 'Playfair Display', serif;
	font-size: 2.2em;
    font-style: italic;
    font-weight: 600;
    line-height: 1.26em;
    text-align: center;
    text-shadow: 2px 1px 7px #000;	
}
.oeffentlich {
	line-height: 1.4em;	
}
.oeffentlich .unter {
	font-size: 0.9em;
	line-height: 1.4em;	
}
.angebot {
	line-height: 1.4em;	
}

.impressum {
	text-align: center;
}

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 960px) {
	#mit-foto .name							{font-size: 2.5em;}
	#mit-foto .willkommen					{font-size: 1.2em;}
	#mit-foto .willkommen p {
		background-color: rgba(0, 0, 0, 0.3);
		box-shadow: 0 0 30px 30px rgba(0, 0, 0, 0.3);
	}
	#mit-foto .spruch						{font-size: 1.4em;}
}
@media screen and (max-width: 768px) {
	#mit-foto .name							{font-size: 2em;}
	#mit-foto .willkommen {
		font-size: 1.0em;
		line-height: 1.6em;
	}
	#mit-foto .spruch						{font-size: 1.3em;}
}


/********************************************************************
								height
/********************************************************************/

body {
    height: 100%;
}

footer {
	min-height: 130px;
}


/********************************************************************
								margin
/********************************************************************/

body										{margin: 0;}
#mit-foto									{margin: 0 auto;}
#ohne-foto									{margin: 0 auto;}
#ohne-foto > article,
#ohne-foto > div							{margin: 0 10%;}
article										{margin-top: 40px !important;}
article.angebot								{margin-bottom: 30px !important;}
article.willkommen p						{-webkit-margin-before: 0;}
article .header								{margin: -20px -40px 20px;}

.content > div								{margin-top: 20px;}
.content .first								{margin-top: 0;}

@media screen and (max-width: 1200px) {
	article,
	section > div							{margin: 0 5%}
	#ohne-foto > article,
	#ohne-foto > div						{margin: 0 5%;}
}

@media screen and (max-width: 768px) {
	article,
	section > div							{margin: 0 5px}
	article .header							{margin: -20px -20px 20px;}
	#ohne-foto								{margin: 0px auto 0;}
	#ohne-foto > article,
	#ohne-foto > div						{margin: 0 5px;}
}


/********************************************************************
								padding
/********************************************************************/

body										{padding: 0;}
#ohne-foto									{padding: 20px 0 40px 0;}
article,
section > div								{padding: 20px 40px;}
article .header								{padding: 10px 0;}
#mit-foto .name								{padding-top: 300px !important;}
#mit-foto .spruch p							{padding: 30px 0;}

@media screen and (max-width: 960px) {
	#mit-foto .name							{padding-top: 200px !important;}
}

@media screen and (max-width: 768px) {
	#mit-foto .name							{padding-top: 100px !important;}
	article,
	section > div							{padding: 20px 20px;}
	#mit-foto .spruch p						{padding: 15px 0;}
	.impressum								{padding: 10px 10px 5px;}
	#ohne-foto								{padding: 5px 0;}
}


/********************************************************************
								width
/********************************************************************/

body										{width: 100%;}
#mit-foto									{width: 80%;}
#ohne-foto									{width: 100%;}

@media screen and (max-width: 1200px) {
	#mit-foto								{width: 100%;}	
}


/********************************************************************
							>>>	nav <<<
/********************************************************************/

nav {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 100%);
    border-bottom: solid #999 1px;
    height: 60px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
nav ul {
    list-style-type: none;
}
nav ul li {
    display: inline;
}
nav ul li a {
    color: #fff;
    margin: auto 0 0 10px;
    padding: 5px;
    text-decoration: none;
    transition: all 0.5s;
}
nav ul li a:hover {
    color: #ffeda1;
}

/*
nav {
	text-align: center;
}
nav img {
	width: 15%;
	margin-top: -10px;
}
nav ul {
    -webkit-padding-start: 0;
}	
*/

@media screen and (max-width: 768px) {
	nav {
		display: none;
	}
}


/*###################################################################
								FLEX
###################################################################*/


body {
	display:flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}


/*###################################################################
							GRID > 1200
###################################################################*/

/********************************************************************
								person
/*******************************************************************/

/*	person
	+-----------+-----------+-----------+
	|				header				|
	+-----------+-----------+-----------+
	|			| 		willkommen		|
	+-----------+-----------+-----------+
	|				vita				|
	+-----------+-----------+-----------+
	| focus		|		 spruch			|
	+-----------+-----------+-----------+
*/		

#mit-foto {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 33.3% 33.3% auto;
	grid-template-areas:
		"header		header		header"
		".			willkommen	willkommen"
		"vita		vita		vita"
		"focus		spruch		spruch";
}
#mit-foto .name {
	grid-area: header;
}
#mit-foto .willkommen {
	grid-area: willkommen;
}
#mit-foto .vita {
	grid-area: vita;
}
#mit-foto .spruch {
	grid-area: spruch;
	align-self: center;
	justify-self: center;
}
#mit-foto .focus {
	grid-area: focus;
	align-self: center;
	justify-self: center;
}

/*	vita
	+-----------+-----------+-----------+
	|			vita-header				|
	+-----------+-----------+-----------+
	|			vita-content			|
	+-----------+-----------+-----------+
*/		

.vita {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto;
	grid-template-areas:
		"vita-header"
		"vita-content";
}
.vita .header {
	grid-area: vita-header;
}
.vita .content {
	grid-area: vita-content;
	column-count: 3;
	column-gap: 65px;
}

/*	taetigkeit
	+-----------+-----------+-----------+
	|		taetigkeit-header			|
	+-----------+-----------+-----------+
	|		taetigkeit-content			|
	+-----------+-----------+-----------+
*/		

.taetigkeit {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto;
	grid-template-areas:
		"taetigkeit-header"
		"taetigkeit-content";
}
.taetigkeit .header {
	grid-area: taetigkeit-header;
}
.taetigkeit .content {
	grid-area: taetigkeit-content;
	column-count: 3;
	column-gap: 65px;
}

	
/*	oeffentlich
	+-----------+-----------+-----------+
	|		oeffentlich-header			|
	+-----------+-----------+-----------+
	|		oeffentlich-content			|
	+-----------+-----------+-----------+
*/		

.oeffentlich {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto;
	grid-template-areas:
		"oeffentlich-header"
		"oeffentlich-content";
}
.oeffentlich .header {
	grid-area: oeffentlich-header;
}
.oeffentlich .content {
	grid-area: oeffentlich-content;
	column-count: 3;
	column-gap: 65px;
}



/*	angebot
	+-----------+-----------+-----------+
	|		angebot-header				|
	+-----------+-----------+-----------+
	|		angebot-content				|
	+-----------+-----------+-----------+
*/		

.angebot {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto;
	grid-template-areas:
		"angebot-header"
		"angebot-content";
}
.angebot .header {
	grid-area: angebot-header;
}
.angebot .content {
	grid-area: angebot-content;
	column-count: 3;
	column-gap: 65px;
}


/*###################################################################
							GRID < 1200
###################################################################*/

/*	person
	+-----------+-----------+
	|		header			|
	+-----------+-----------+
	| 		willkommen		|
	+-----------+-----------+
	| 		vita			|
	+-----------+-----------+
	| focus		| spruch	|
	+-----------+-----------+
*/	

@media screen and (max-width: 1200px) {
	#mit-foto {
		grid-template-rows: auto;
		grid-template-columns: 50% 50%;
		grid-template-areas:
			"header header"
			"willkommen willkommen"
			"vita vita"
			"focus spruch";
	}
	#mit-foto			.willkommen,
	.vita			.content,
	.taetigkeit		.content,
	.oeffentlich	.content,
	.angebot		.content {
		column-count: 2; /**/
	}

}


/*###################################################################
							GRID < 960 768
###################################################################*/

/*	person
	+-----------+-----------+
	|		header			|
	+-----------+-----------+
	| 		willkommen		|
	+-----------+-----------+
	| 		vita			|
	+-----------+-----------+
	|		spruch			|
	+-----------+-----------+
*/

@media screen and (max-width: 960px) {
	
	#mit-foto {
		grid-template-rows: auto;
		grid-template-columns: auto;
		grid-template-areas:
			"header"
			"willkommen"
			"vita"
			"spruch";
	}
	#mit-foto			.willkommen,
	.vita			.content,
	.taetigkeit		.content,
	.oeffentlich	.content,
	.angebot		.content {
		column-count: 1;
	}

}