@charset "UTF-8";

/* Raster */

	/* vertikale Zeilen */
	.row{
		width: 90%;
		float: left;
	}

	/* horizontale Spalten */
	.columns{
		float: left;
	}

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

		/* 2 spaltiges Raster im kleinsten Layout */
		.small-1 {width: 50%;}
		.small-2 {width: 100%;}
	}

	@media screen and (min-width: 500px){
		/* 12 spaltiges Raster im groessten Layout */
		.large-1 {width: 8.333333%;}
		.large-2 {width: 16.666666%;}
		.large-3 {width: 25%;}
		.large-4 {width: 33.333333%;}
		.large-5 {width: 41.666666%;}
		.large-6 {width: 50%;}
		.large-7 {width: 58.333333%;}
		.large-8 {width: 66.666666%;}
		.large-9 {width: 75%;}
		.large-10 {width: 83.333333%;}
		.large-11 {width: 91.666666%;}
		.large-12 {width: 100%;}
	}

/* ENDE Raster */

/* Schrifftarten */

	/* Serifenlos */
	@font-face {
	  font-family: 'Lato';
	  font-style: normal;
	  font-weight: 400;
	  src: local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v11/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
	}

	/* Serifen mit Kapitälchen */
	@font-face {
	  font-family: 'Playfair Display SC';
	  font-style: normal;
	  font-weight: 400;
	  src: local('Playfair Display SC'), local('PlayfairDisplaySC-Regular'), url(http://fonts.gstatic.com/s/playfairdisplaysc/v4/G0-tvBxd4eQRdwFKB8dRkRUcjaGRfmzOW8pfsS-qBq8.woff2) format('woff2'), url(http://fonts.gstatic.com/s/playfairdisplaysc/v4/G0-tvBxd4eQRdwFKB8dRkf5twPfG3l5Gc3nk2Vyncrg.woff) format('woff');
}

	body {
		font-family: Lato, Arial,'Helvetica Neue',Helvetica,sans-serif; 
	}

	h1, h2, header ul, section#contact h3{
		font-family: 'Playfair Display SC',TimesNewRoman,'Times New Roman',Times,Baskerville,Georgia,serif; 
		font-variant: small-caps;
	}

/* Schrifftarten */

html{
	background-color: #f3f3eb;
}

body{
	height: 100%;
	width: 90%;
	max-width: 75em;
	margin: 0 auto;
}

/* Header mit Menü */
	header.row {
		width: 100%;
		margin-bottom: 1em;
		float: right;
	}

	header ul {
		list-style: none;
		font-size: 1.375em;
		color: #8a8875;
	}

	header li {
		float: right;
		padding-right: 0.5em;
	}

	nav a:link, nav a:focus, nav a:visited, nav a:hover, nav a:active{
		text-decoration:none;
		color: #8a8875;
	}
/* ENDE Header mit Menü */

/* Zentrale Formatierung der drei Sektionen */
	section{
		padding-top: 4.6875em;
		padding-bottom: 4.6875em;
		padding-left: 1em;
		padding-right: 2em;
		font-size: 0.6em;
	}

	.break{
		display: none;
	}

	p .aus{
		font-size: 0.4em;
	}

	li{
		margin-bottom: 0.5em;
	}

	@media screen and (min-width: 450px){

		section{
			font-size: 0.7em;
		}

		p .aus{
			font-size: 0.5em;
		}
	}

	@media screen and (min-width: 600px){

		section{
			font-size: 0.8em;
		}
		p .aus{
			font-size: 0.6em;
		}
	}

	@media screen and (min-width: 710px){

		section{
			padding-left: 2em;
			font-size: 0.9em;
		}
		p .aus{
			font-size: 0.7em;
		}
	}

	@media screen and (min-width: 790px){

		section{
			padding-left: 3em;
			font-size: 1em;
		}
		p .aus{
			font-size: 0.8em;
		}
	}

	@media screen and (min-width: 1024px){

		section{
			padding-left: 4em;
			font-size: 1.125em;
		}

		p .aus{
			font-size: 0.8em;
		}

		.break{
			display: inherit;
		}
	}
/* ENDE Zentrale Formatierung der drei Sektionen */

/* Intro-Bereich */
	section#intro {
		background: url(../images/kanzlei-hey-bgr.jpg) bottom left no-repeat;
		background-size: cover;
		color: #25332f;
		}

	section#intro h1 {
		color: #fff;
		letter-spacing: 0.03em;
	}

	h1 .aus{
		font-size: 0.6em;
	}

	section#intro ul {
		padding-left: 1.2em;
		color: #25332f;
		line-height: 1.5em;
	}
/* ENDE Intro-Bereich */

/* Kontakt Bereich */

section#contact, section#datenschutz {
	background-color: #b9d6ca;
	color: #25332f;
}

section#contact h3, section#datenschutz h3 {
	font-family: Lato, Arial,'Helvetica Neue',Helvetica,sans-serif;
	letter-spacing: 0.05em;
	margin-bottom: 0.4em;
}

section#contact .bln, .wbrg{
	width: 90%;
}

section#contact .bln-tel span{
	float: right;
	margin-right: 30%;
}

section#contact .wbrg span{
	float: right;
	margin-right: 23%;
}

@media screen and (min-width: 480px){

	section#contact .bln-tel span, section#contact .wbrg-tel span{
		margin-right: 45%;
	}
}

@media screen and (min-width: 500px){

	section#contact .bln-tel span, section#contact .wbrg-tel span{
		margin-right: 12%;
	}
}

@media screen and (min-width: 600px){

	section#contact .bln-tel span, section#contact .wbrg-tel span{
		margin-right: 0%;
	}
}

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

	section#contact .bln-tel span, section#contact .wbrg-tel span{
		margin-right: 9%;
	}
}

@media screen and (min-width: 800px){

	section#contact .bln-tel span, section#contact .wbrg-tel span{
		margin-right: 3%;
	}
}

@media screen and (min-width: 1024px){

	section#contact .bln-tel span, section#contact .wbrg-tel span{
		margin-right: 19%;
	}
}

@media screen and (min-width: 1280px){

	section#contact .bln-tel span, section#contact .wbrg-tel span{
		margin-right: 32%;
	}
}

@media screen and (min-width: 1920px){

	section#contact .bln-tel span, section#contact .wbrg-tel span{
		margin-right: 35%;
	}
}

section#contact strong {
    color: #777;
    float: right;
    font-weight: normal;
}

@media screen and (min-width: 1080px){

	section#contact strong {
    	margin-right: 1.4em;
	}
}

section#contact .email {
	display: none;
}

section#contact .form input, section#contact .form textarea {
	width: 98%;
	height: 2.5em;
	margin-bottom: 0.625em;
	padding-left: 0.5em;
	border: none;
}

section#contact .form textarea {
	width: 99%;
	padding-left: 0.3em;
	height: 13em;
}

section#contact .form input[type="button"]{
	width: 50%;
	background-color: #8a8875;
	color: #fff;
}

section#contact #info{
	font-weight: bold;
	color: #777;
	text-align: center;
}

@media screen and (min-width: 1050px){
	section#contact .form input[name="fname"], section#contact .form input[name="lname"]{
		width: 45%;
		float: left;
	}

	section#contact .form input[name="lname"]{
		float: right;
		margin-right: 1.2em;
	}

	section#contact .form input {
		width: 94%;
		height: 2em;
	}

	section#contact .form textarea {
		width: 94%;
		height: 13em;
	}

	section#contact .form input[type="submit"]{
		width: 95.2%;
	}
}

@media screen and (min-width: 1280px){

	section#contact .form input[name="lname"]{
		margin-right: 1.3em;
	}
}

/* ENDE Kontaktbereich */

/* Impressum */

	section#imprint a:link, a:focus, a:visited, a:hover, a:active{
		color: #DDD;
	}

	section#imprint {
		background-color: #8a8875;
		color: #FFF;
	}

	section#imprint h1, h2{
		letter-spacing: 0.03em;
	}
/* ENDE Impressum */