@import url("reset.css");
@import url("rechnung.css");

/* Palette: http://paletton.com/#uid=c0p023G2K0kKNnvvQASFPsnPyiGUscP */

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

	/*Grün:#355E3B*/
	/*Blau:#305070*/

@media all {

	/* Farben */
	body {
		background-color:#FFF;
		color:#333;
	}

	a, a:hover, h1, h2, h3 {
		color:#305070;
	}

	.link {
		background-color:#305070;
	}

	.link a {
		color:floralwhite;
	}

	.column.hover .content {
		border:1px solid #305070;
	}

	.column.hover .cover h1, .column.hover .cover h2, .column.hover .cover h3 {
    	text-shadow: 2px 2px 2px floralwhite, -2px 2px 2px floralwhite, -2px -2px 2px floralwhite, 2px -2px 2px floralwhite;
	}

	#head, .column.hover.flat, .column.hover .content {
		background-color:floralwhite;
	}

	.column.hover .cover {
		border:5px solid floralwhite;
	}

	.column.hover {
		background-color:transparent;
	}

	.column.hover.flat .cover{
		border:none;
	}

	.column.hover .content q {
		color:#666;
	}

	/* Farben Ende*/

	body {
		padding:0;
		background: url("../img/sea.jpg") no-repeat center center fixed;
		-webkit-background-size: cover;
  		moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		font-size:18px;
	}

	* {
		box-sizing:border-box;
	}

	div {
		clear:both;
		font-family:lucida sans, helvetica, arial;
		text-align:center;
	}

	li {
		clear:both;
		text-align:left;
	}

	h1,h2,h3 {
		font-weight:bold;
	}

	h1 {
		margin-top:0;
		margin-bottom:.5em;	
		font-size:1.5em;
	}

	h2 {
		margin-top:0;
		margin-bottom:.25em;
		font-size:1.3em;
		/*border-bottom:2px solid rgba(255,0,0,0.6);*/
	}

	h3 {
		margin-top:0;
		margin-bottom:0;
		font-size:1.2em;
		/*border-bottom:2px solid rgba(255,0,0,0.3);*/
	}

	p {
		margin-bottom:.5em;
		line-height:1.1em;
	}

	a {
		font-weight:inherit;
		text-decoration:none;
		background-color:transparent;
	}

	/*a#current, a:hover {
		color:#BB4C00;
	}*/

	strong {
		font-weight:bold;
	}	

	#head {
		z-index:0;
		position:relative;
		margin-left:auto;
		margin-right:auto;
		margin-top:0px;
		padding:.7em;
		max-width:85em;
		box-shadow:8px 8px 8px rgba(0,0,0,0.3);
		transition: all 1s ease-in-out;
	}

	#head h1, #head h1 a, #head h2, #head h2 a {
		margin-bottom:0.5em;
	}

	#head h1 {
		font-size:2em;
	}

	#head h2 {
		font-size:1.5em;
	}

	#main {
		display:flex;
		justify-content:space-around;
		flex-wrap: wrap;
		z-index:0;
		position:relative;
		margin-left:auto;
		margin-right:auto;
		max-width:30em;
		background-color:transparent;
	}

	.column.hover {
		position:relative;
		min-width:0;
		max-width:17em;
		min-height:17em;
		max-height:17em;
		box-shadow:8px 8px 8px rgba(0,0,0,0.3);
		margin: 20px 10px;
		transition-property: all, box-shadow, visibility;
		transition-duration: 1s, 0s, .5s;
		overflow:hidden;
	}

	.column.hover.flat {
		width:100%;
		max-width:85em;
		min-height:4em;
		max-height:4em;
		flex-basis:100%;
	}

	.column.hover:focus, .column.hover.flat:focus {
		max-width:30em;
		max-height:85em;
		flex-grow:10;
		z-index:4;
		overflow:visible;
		box-shadow:none;
		transition-property: all, box-shadow, visibility;
		transition-duration: 1s, .5s, .5s;
	}

	.column.hover .cover {
		position:absolute;
		width:100%;
		height:100%;
		transition: all 1s ease-in-out;
		text-align:center;
		cursor:pointer;
	}

	.column.hover:focus .cover {
		opacity:0;
		transition: all .5s ease-in-out;
	}

	.column.hover .cover a {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		font-size:1.5em;
		padding:0.5em;
	}

	.column.hover.flat .cover a {
		padding:0.2em;
	}

	.column.hover.flat .cover a h1 {
		margin-top:0px;
		margin-bottom:5px;
	}

	.column.hover .cover a h1 {
		margin-top:46%;
		transition: all 1s ease-in-out;
	}

	.column.hover:focus .cover a h1 {
	    margin-top: 10px;
	}

	.column.hover.flat:focus .cover a h1 {
	    margin-top: 5px;
	}

	#Impressum.column.hover.flat .cover a {
		font-size:1em;
	}

	#Impressum.column.hover.flat .cover a h1 {
		margin-top:5px;
		margin-bottom:0;
	}

	#Impressum.column.hover.flat .cover a h2 {
		margin-top:0;
		transition: all 1s ease-in-out;
	}

	#Impressum.column.hover.flat:focus .cover a h2 {
		margin-top:-10px;
	}

	.column.hover .content {
		opacity:0;
		visibility: hidden;
		min-width:100%;
		min-height:100%;
		padding:1em;
		transition-property: all, box-shadow, visibility;
		transition-duration: 1s, 0s, .5s;
	}

	.column.hover:focus .content {
		opacity:1;
		visibility: visible;
		transition: all 1s ease-in-out;
	}

	.column.hover .content h1 {
		font-size:2.25em;
	}

	.column.hover .content q {
		font-size:1.1em;
	}

	.column.hover .content a {
		font-weight:bold;
		text-decoration:underline;
	}

	.column.hover .content img {
		width:100%;
		max-width:400px;
		margin-bottom:1em;
	}

	.column.hover .content ul {
		padding-left:1.5em;
		margin-bottom:1em;
		list-style-type:disc;
	}

	.menu {
		margin-right:0;
		transition: margin-right 1s;
	}

	.link {
		display:block;
		float:none;
		margin-top:2px;
		margin-bottom:2px;
		height:29px;
		height:calc(1em + 14px);
		text-align:left;
		font-size:100%;
		font-weight:bold;
	}

	.menu .link:first-child {
		margin-right:65px;
		transition: margin-right 1s;
	}

	#head .logo {
		background-color:transparent;
		position:absolute;
		right:0;
		bottom:8px;
		transition: all .5s ease-in-out;
	}

	#head .logo svg {
		height:180px;
		width:150px;
	}

	.link.filler {
		display:none;
	}

	.link a {
		width:100%;
		display:block;
		padding:top-and-bottom left-and-right;
		padding:7px 1.5em;
	}

	.link a:hover {
		background:rgba(255,255,255,0.2);
	}

	.linkrest {
		float:none;
		text-align:center;
	}

@media screen and (min-width:30em) {

	body {
		font-size:13px;
	}

	div {
		clear:none;
		text-align:left;
	}

	#head h1 {
		font-size:3em;
	}

	#head h2 {
		font-size:2em;
	}

	#head {
		margin-top:20px;
	}

	#head h2 {
		margin-right:100px;
	}

	.menu {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		margin-right:65px;
		transition: margin-right 1s;
	}

	.link {
		margin:0;
		flex-grow: 1;
	}

	.menu .link:first-child {
		margin-right:0;
		transition: margin-right 0s;
	}

	.menu .link:last-child {
		text-align:left;
		min-width: 115px;
		margin-right:65px;
		transition: margin-right 1s;
	}

	.link.filler {
		flex-grow: 100;
		display:block;
	}

	.link a {
		display:inline-block;
	}

	#head .logo {
		bottom:-90px;
	}

	#main {
		max-width:85em;
	}

	.column.hover {
		min-width:24em;
		max-width:24em;
		min-height:24em;
		max-height:24em;
	}

	.column.hover:focus, .column.hover.flat:focus, .column.hover:hover, .column.hover.flat:hover {
		max-height:85em;
		flex-grow:10;
		z-index:4;
		overflow:visible;
		box-shadow:none;
		transition-property: all, box-shadow, visibility;
		transition-duration: 1s, .5s, .5s;
	}

	.column.hover:focus, .column.hover:hover {
		max-width:32em;
	}

	.column.hover.flat:focus, .column.hover.flat:hover {
		max-width:85em;
	}

	.column.hover .cover a{
		font-size:2em;
	}

	.column.hover:focus .cover, .column.hover:hover .cover {
		opacity:0;
		transition: all .5s ease-in-out;
	}

	.column.hover:focus .cover a h1, .column.hover:hover .cover a h1 {
		margin-top: 10px;
	    margin-right: 50%;
	}

	.column.hover.flat:focus .cover a h1, .column.hover.flat:hover .cover a h1 {
		margin-top: 5px;
	    margin-right: 0;
	}

	#Impressum.column.hover.flat:focus .cover a h2, #Impressum.column.hover.flat:hover .cover a h2{
		margin-top:-10px;
		margin-right: 50%;
	}

	.column.hover .content {
		position:absolute;
		box-shadow:8px 8px 8px rgba(0,0,0,0.3);
		max-height:24em;
	}

	.column.hover:focus .content, .column.hover:hover .content {
		opacity:1;
		visibility: visible;
		transition: all 1s ease-in-out;
		max-width:100%;
		max-height:none;
	}

	.column.hover .content h1 {
		font-size:3em;
	}

}