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

@font-face {
    font-family: 'journalregular';
    src: url('journal-webfont.eot');
    src: url('journal-webfont.eot?#iefix') format('embedded-opentype'),
         url('journal-webfont.woff') format('woff'),
         url('journal-webfont.ttf') format('truetype'),
         url('journal-webfont.svg#journalregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html {

		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		/*Graue fläche im Hintergrund/Logo*/
		background-color:#666;
}

body {
	/*zurücksetzen der browservoreinstellungen*/
	padding: 0;
	margin: 0 auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	line-height: 1.25em;
	letter-spacing: 0.03em;
}

h1 {
	font: 600 normal 4.5em/1em journalregular;
	color: #FFF;
	text-decoration: none;
	display: block;
	background-color: #929292;
	text-align: center;
	letter-spacing: 0.1vw;
	margin: 0 0;
	padding-top: 4vw;
	padding-bottom: 3vw;
	background-repeat: space;
}


h1 em {
	font-size: 6vw;
	color:#99FF00;
	position: relative;
	top: 0.5vw;
}

h2 {
	margin-top: 0;
	color:#333;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0em;
	text-align: left;
	font-size: 1.4em;
	font-style: normal;
	line-height: 1.4em;
	font-weight: bold;
	text-decoration: none;
	}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	background-color: #929292;
	text-align: left;
	margin: 0 0;
	padding-left: 6vw;
	padding-bottom: 30em;
	vertical-align: 0.2vw;
	font-variant: normal;
	letter-spacing: 0.01em;
	word-spacing: 0.01em;
	font-weight: lighter;
	line-height: 1.4em;
}

#h4 {
	color:#fff;
	background-color:#777;
	font-size: 1.2em;
	text-align:center;
	letter-spacing: 1em;
}

.box p {	
	overflow: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	line-height: 1.2em;
	font-weight: normal;
	color:#333;
	text-decoration: none;
}


span {
	color: #52687E;
	font-size: 4em;
	position: relative;
	top: 0.28em;
	font-weight: 600;
}

/*link + box*/
.box span {
	font-size: 3em;
	line-height: 0.2em;
	top: 0.25em;
	position: relative;
	display: inline-block;
}
	
a span:hover {
	color:#FFF;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
}

hr {
	height: 1px;
	widht: 100%;
	margin: 0 -40px;
	background: #fff;
	display:none;
}

/* Flexbox-Container gesamte Breite VW = box1+box2 Standard 
/Achtung: box-sizing prefix?*/

#container {
	width:980px;
	-webkit-display: flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
}
/* entspricht box1*/
#nav{
	background-color:#54677e;
	width:37.8vw;
}

/*entspricht box2*/
#figure {
	width:62.2vw;
	}	
	
	img { width:100%;
	height:auto;
}

ul {
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2vw;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	line-height: 3.8vw;
	list-style-type: none;
	letter-spacing: 0.1em;
	padding-left: 3em;
}

a {
	color: #ccc;
	text-decoration: none;
}
	
#nav a	{
	display:block;
	}
		
a:hover	{color:#FFF;
	transition:all 0.3s ease-out;
	
	-webkit-transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;


}

/*kontext selektoren aktuelle seite*/
#kanzlei #navkanzlei a,
#taetigkeit #navtaetigkeit a,
#veroeffentlicht #navveroeffentlicht a {
	color: #fff;
	cursor: default;
	}

header img{
	max-width: 100%;
	left: auto;
	right: auto;
	display: block;
}

/* Kacheln__________________________________________________________ */
.square-box{
	/* box-sizing = tatsächlichen boxmaße*/
	box-sizing: border-box;
	position: relative;
	/*Teilung der VW-Breite*/
	width: 25%;
	float: left;
	overflow: hidden;
	background-color: #EEE;
	padding: 0.4em;
	border-left-width: 1.2vw;
	border-left-style: solid;
	border-left-color: #ABB925;
}
/*2/5*/
.square-box:nth-child(5n+4){
	background-color:#BBB;
	
}
/*3/5*/
.square-box:nth-child(5n+5){
	background-color:#DDD;
	
}

/*4/5*/
.square-box:nth-child(5n+6){
	background-color:#AAA;
	/*border-left-color:#CF7799;*/
}

/*5/5*/
.square-box:nth-child(5n+7){
	background-color:#CCC;
	/*border-left-color:#CF7799;*/
}

/*border zwei*/
.square-box:nth-child(7n+4){
border-left-color:#886C67;
}

/*border drei*/
.square-box:nth-child(7n+5){
border-left-color:#BF3346;
}

/*border vier */
.square-box:nth-child(7n+6){
border-left-color:#54677e;
}

/*border fünf*/
.square-box:nth-child(7n+7){
border-left-color:#E27A3F;
}

/*border sechs*/
.square-box:nth-child(7n+8){
border-left-color:#910043;
}

/*border sieben*/
.square-box:nth-child(7n+9){
border-left-color:#F9C237;
}

/* HeadText font-size releativ zu body*/
.square-box em {font-family: "Arial Black", Gadget, sans-serif;
	font-size: 1.25em;
	font-style: normal;	
}

.square-box:before{
content: "";
display: block;
padding-top: 100%; /*die Höhe 100% = Quadrat*/
float:left;
}
.square-content{
position: absolute;
top: 10px;
left: 0;
bottom: 0;
right: 0;

}
.square-content div {
display: table;
width: 100%;
height: 100%;
}

/* Ende float*/
.clear {
	content: ".";
	clear: both;
	display: block;
	visibility: hidden;
	/*height: 30px;*/
}



/*--------------------------------------------------------------*/	

.footer {
	position: fixed;
	height: 45px;
	width: 980px;
	background-color: #54677e;
	bottom: 0;
	left: auto;
	right: auto;
	font-size: 1.2em;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #EEE;
	line-height: 3em;
	float: none;
	word-spacing: 0.2em;
	letter-spacing: 0.1em;
}

/*verschleiern*/
.ema {
	unicode-bidi: bidi-override;
	direction: rtl;
	font-style:normal;
	display: inline;
}


/*Höhe fixen-footer - Text nicht verdeckt*/
.space {
	display: block;
	height: 3em;
}

/* overlay + boxen */

/*overlay sichtbarkeit hintergrund*/
.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	transition: opacity 500 ms;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	height: 220%; /*Abdunklung Hintergrund*/
}

.overlay:target {
	visibility: visible;
	opacity: 1;
	font-size: 1em;
}
.box {
	padding: 2em;
	background: #C0C0C0;
	border-radius: 2em;
	width: 60vw;
	position: relative;
	transition: all 2s ease-in-out;
	-webkit-transition: all 2s ease-in-out;
	-moz-transition: all 2s ease-in-out;
	-o-transition: all 2s ease-in-out;
	margin-top: 5em;
	margin-right: auto;
	margin-left: auto;
	height: auto;
}

	
/*position aktives kreuz*/
.box .close {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	transition: all 2ms;
	font-size: 4em;
	font-weight: bold;
	text-decoration: none;
	color: #FFF;
}

.box .close:hover {
	color: red;
	transition: all 2ms;
}

.box a {
	color: #52687e;
}

.box a:hover {
	color: #FFF;
}

.box a.select {
	color: #fff;
	font-size: 3em;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	position: relative;
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	top: 0.1em;
}

.box a.select:hover {
	color:red;
	transition: all 2ms;
}



@media only screen and (min-width:981px) {
	
	body {
		width: 980px;
	

}

#container {
	width: 980px;
	height: 150px;
	overflow: hidden;
	
}
#nav{
	width:595px;

}

ul {
	font-size:1.55em;
	line-height: 1.9em;

}


/*entspricht box2*/
#figure {
	/*background-size: 100%;*/
	/*background-image: url(images/_DSC0097_WEB_800x200.jpg);*/
	/*float: left;*/
	width: 100%;
	
	}	

}


@media only screen and (max-width:980px) {
body {
		max-width: 100vw;
		font-size: 1.21vw;
		line-height: 1.3em;
		letter-spacing: 0.03em;
}

#container {
	width: 980px;
	height: 15.3vw;
	overflow: hidden;
	}
	
#nav{
	width:37.5vw;
}

	
ul {
	font-size: 1.84vw;
	line-height: 3.6vw;
	letter-spacing: 0.2vw;
	padding-left: 5.5vw;
	padding-top: 0.2vw;
	position: absolute;
}

#h4 {
	font-size:1.5vw;
	text-align:center;
	letter-spacing: 1.5vw;
}

.box p {	
	overflow: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	line-height: 1.2em;
	font-weight: normal;
	color:#333;
	text-decoration: none;
}

.box {
width: 95%;	
}

.footer {
	width: 100%;

}

}

@media only screen and (max-width:768px)   {

	
body {
		max-width: 768px;
		padding: 0;
		margin: 0 auto;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.7em;
		line-height: 1.1em;
		letter-spacing: 0.03em;
}

ul {
	font-size: 1.2em;
	line-height: 3.5vw;
	
}

.square-box{
	/* box-sizing verwendet die tatsächlichen boxmaße*/
	box-sizing: border-box;
	position: relative;
	/* Aufteilung der Breite*/
	width: 33.333333%;
	border-left-width: 3vw;
}

.box {
	width: 90%;
}


.footer {
	
	font-size: 1em;
	line-height: 3.5em;
	
}


}

/*nur footer*/

@media only screen and (max-width:615px)   {
	
.footer {
	height: 45px;
	font-size: 1em;
	line-height: 1.5em;
	border-top-width: 0.5em;
	border-top-style: solid;
	border-top-color: #54677e;	
}

	
	

@media only screen and (max-width:568px)   {

	
body {
		max-width: 568px;
		padding: 0;
		margin: 0 auto;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.65em;
		line-height: 1em;
		letter-spacing: 0.03em;
}

ul {
	font-size: 1.2em;
	line-height: 3.5vw;

	
}

.square-box{
	/* box-sizing verwendet die tatsächlichen boxmaße*/
	box-sizing: border-box;
	position: relative;
	/* Aufteilung der Breite*/
	width: 33.333333%;
	border-left-width: 3vw;
}

.box {
	width: 85%;
}


.footer {
	height: 45px;
	line-height: 1.5em;
	border-top-width: 0.5em;
	border-top-style: solid;
	border-top-color: #54677e;	
}


}

@media only screen and (max-width: 480px) {
	
body {
		max-width: 480px;
		font-size: 0.8em;
		line-height: 1.2em;
		letter-spacing: 0.03em;
}
/*flexbox Richtung*/
#container {
	width:100%;
	height:auto;
	-webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

#figure {
	display:block;
	background-image: url(images/_DSC0097_WEB_800x204.jpg);
	width: 100%;
	}

	/* entspricht box1*/
#nav{
	background-color:#54677e;
	width:100%;
	height: 9em;		
}
	
	img { width:100%;
	height:auto;
}

ul {
	font-size: 1.4em;
	line-height: 2em;
	padding: 0;
	letter-spacing: 0.1em;
	text-align: center;
	position: relative;
	top: -0.9em;
	left: auto;
	right: auto;
	height: auto;
	width: auto;
	display: list-item;
}

hr {
	height: 1px;
	widht: 100%;
	margin: 0 -40px;
	background: #fff;
	display:list-item;
}
	
	h1{
		font-size: 2.8em;
		line-height: 0.7em;
	}
	
	h1 em {
	font-size: 1.5em;
	color:#99FF00;
	position: relative;
	top: 0.5vw;
}
	
	h3{
		font-size: 1.1em;
		line-height:1.3em;
	}
	
	#h4 {
	font-size: 0.8em;
	letter-spacing: 0.6em;
}



.square-box{
	/* box-sizing verwendet die tatsächlichen boxmaße*/
	box-sizing: border-box;
	position: relative;
	/* Aufteilung der Breite*/
	width: 50%;
	border-left-width: 4.5vw;
}

.box {

	width: 100%;
	position: relative;
	transition: all 2s ease-in-out;
	margin-top: 5em;

}

.footer {
	height: 55px;
	font-size: 0.9em;
	max-width: 480px;
	line-height: 1.5em;	
}