/* Grundgerüst
-----------------------------------------------------------*/

/* source-sans-3-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url('webfonts/source-sans-3-v9-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url('webfonts/source-sans-3-v9-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Grundgerüst
-----------------------------------------------------------*/
html {
	-webkit-text-size-adjust: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 101%;
}

body {
	font-family: 'Source Sans Pro', sans-serif;
	color: #000;
	font-size: 18px;
	font-weight: 200;
}	

.outherFrame {
	position: relative;
	width: 90%;
	max-width: 1194px;
	max-width: 1194px;
	margin: 0 auto;
}

.frame {
	width: 90%;
	max-width: 1200px;
	max-width: 1194px;
	margin: 0 auto;
}

#siteHeader {
	position: relative;
	width: 90%;
	max-width: 1200px;
	max-width: 1194px;
	margin: 25px auto 0 auto;
	height: 262px;
	font-size: 1.2em;
}

.outherFrame>.frame {
	position: relative;
	width: 100%;
	padding: 0;
}

.outherFrame>section>.frame {
	position: relative;
	width: 100%;
}

#siteHeader .content {
	background: #000;
}

.introText {
	font-family: FFScalaWeb, Georgia, "Times New Roman", Times, serif;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 2em;
	line-height: 1.1111111111em;
	padding: 0 5% 0.75em 1.675041876%;
	font-weight: normal;
	letter-spacing: 0.015em;
}

h1.introText {
	font-weight: 600;
}

/* Allgemeine Formatierungen
-----------------------------------------------------------*/
img {
	max-width: 100%;
}

p {
	padding: 0 0 1.2em 0;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 1em;
	letter-spacing: 0.01em;
}

a {
	color: #000;
	text-decoration: none;
}

h2 {
	line-height: 1.2em;
	padding: 0 0 0.25em 0;
	background: #fff;
	font-weight: 600;
}

h4 {
	padding: 1em 0 0 0;
	font-size: 0.6666666667em;
	line-height: 1.2em;
	height: 3em;
	background: #fff;
}

h3 {
	font-family: 'Source Sans Pro', sans-serif;
	line-height: 1.2em;
	font-weight: normal;
	background: #fff;
	padding: 0 0 0.5em 0;
	letter-spacing: 0;
}


.outherFrame ul,
.outherFrame ol
{
	line-height: 1.2em;
	margin-bottom: 1.2em;
}

.outherFrame ul li {
	padding: 0 0 0 1em;
}

.outherFrame ul li:before {
	content: "– ";
	position: relative;
	margin-left: -0.7em;
} 

/* Boxen
-----------------------------------------------------------*/
.box3, .box4, .box6, .box8, .box10 {
	float: left;
	width: 23.1155778894%;
	margin: 0 2.5125628141% 0 0;
	position: relative;
/* 	background: #eee; */
}

/* Box3 Spalten
-----------------------------*/
.box3:nth-child(4n) {
	margin-right: 0;
}

.arbeitenHome .box3:before {
	content: "";
	display: block;
	padding-top: 120%; 	/* initial ratio of 1:1.1*/
	margin: 1em 0;
	margin: 0.3em 0;
}

.arbeitenHome .box3 .content {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding: 0 7.2463768116%;
	display: block;
	width: 85.507246377%; /* (100%-2*7.2463768116%) */
}

.box3 .overText {
	position: absolute;
	background: #fff;
	display: none;
	width: 85.507246377%;
	z-index: 4;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}


/* Box4 Spalten
-----------------------------*/
.box4 {
	width: 31.6582914573%;
}

.box4:nth-child(3n) {
	margin-right: 0;
}

.box4 .content {
	padding: 2.75em 5.291005291% 1.5em 5.291005291%;
	display: block;
	position: relative;
}

/* Margin zurücksetzen für masonry */
.box4.arbeitGrid {
	margin: 0;
}

/* Margin für masonry */
.gutter-sizer {
	width: 2.5125628141%;
}

/* Margin zurücksetzen wenn nur 2 Float Boxen vorhanden – gebastel */
.doppelBox .box4 {
	margin-right: 0;
}

.box4 img {
	padding: 0 0 1em 0;
}


/* Box6 Spalten
-----------------------------*/
.box6 {
/* 	padding: 2.75em 0 1.5em 0; */
	width: 48.743718593%;
}

.box6:nth-child(even) {
	margin-right: 0;
}

.box6 .content {
	padding: 0 3.4364261168%;
}

.autoGrid6 {
	padding: 2.75em 0 1.5em 0;
}

.autoGrid6 .box6 {
	margin: 0 0 2.5445292621% 0;
}

/* Box8 Spalten
-----------------------------*/
.box8 {
	padding: 2.75em 0 1.5em 0;
	width: 65.8291457286%;
}

.box8 .content {
	padding: 0 2.5445292621%;
}

/* Box12 Spalten
-----------------------------*/
.box12 {
	padding: 0 1.675041876%;
}


/* Zitat
-----------------------------------------------------------*/
.box4.zitat {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: normal;
	text-align: center;
	padding: 0;
	margin: 0;
	position: relative;
}


/* Quadrat erstellen */
.box4.zitat:before {
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}

.zitat .content {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding: 0;
	width: 100%;
}

.zitat p {
	padding: 1.2em 10%;
	border-top: 1px solid #079dd4;
	border-bottom: 1px solid #079dd4;
	font-size: 1.2em;
}

.zitat em {
	display: block;
	font-style: normal;
	font-size: 0.833333333333em;
	font-size: 0.72em;
	line-height: 1.5em;
}


/* Arbeiten Detail Intro
-----------------------------------------------------------*/
.introIMG {
	width: 60%;
	padding: 0 0 0 2.5%;
}

.arbeitIntro {
	padding: 2em 0;
	line-height: 1.2em;
}

.arbeitIntro h2 {
	padding: 0;
}

.arbeitIntro h3 {
	font-family: "akzidenz-grotesk", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-family: 'Source Sans Pro', sans-serif;
	padding: 0 0 0.1em 0;
}


/* Spezifische Formatierungen
-----------------------------------------------------------*/
.serif {
	font-family: FFScalaWeb, Georgia, "Times New Roman", Times, serif;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: normal;
	margin: 0.15em 0 0 0; /* Zeilenhöhe Anpassen, gebastel*/
	letter-spacing: 0;
}

/* Schrift grösser */
.bigger {
	font-size: 1.2em;
	line-height: 1.2em;
}

/* Bereich mit Trennline oben */
.borderSection {
	border-top: 1px solid #000;
	padding: 1.8em 0 0 0;
}

/* Text und Bild Box, z.B. Personen*/
.textImg p {
	font-family: FFScalaWeb, Georgia, "Times New Roman", Times, serif;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: normal;
}

.textImg { /* für Personenbeschrieb und Foto */
	margin: 5.4em 0 2.4em 0;
}

/* Abstand h2 Personenbox */
.about h2 {
	padding: 0 0 1.2em 0;
}

/* Zusatz bei Person */
.personZusatz p {
	font-style: normal;
	font-size: 0.7272727273em;
	line-height: 1.2em;
}

.h1Abstand {
	padding-bottom: 1.2em;
}

#googleMaps {
	width: 100%;
	height: 18em;
	margin: 0;
	padding: 0;
}

/* Zusatz bei Arbeiten (In Zusammenarbeit)*/
/*
.arbeitIntro .serif p em {
	font-style: normal;
	font-size: 0.8888888889em;
}
*/

.workZusatz {
	font-style: normal;
	font-size: 0.8888888889em;
	margin-top: -0.8888888889em;
}

/* Text kleiner bei Impressum, usw. */
.body-smallTxt .box6 .bigger {
	font-size: 0.8888888889em;	
}

/* Icons
-----------------------------*/
.printIcon, .upIcon {
	display: block;
	position: absolute;
	right: -130px;
	bottom: 40px;
	bottom: 0;
	text-align: center;
	width: 120px;
	font-family: FFScalaWeb, Georgia, "Times New Roman", Times, serif;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: normal;
}

.printIcon img, .upIcon img {
	width: 40px;
	padding: 0 0 12px 0;
	display: block;
	margin: 0 auto;
}

.printIcon {
	bottom: 100px;
/* 	display: none; */
}

.nextPrevNav {
	padding: 1.2em 0;
	float: right;
}

.nextPrevNav.footerNext {
	padding: 1.2em 0;
	float: left;
}

.prevLink, .nextLink {
	width: 40px;
	height: 40px;
	float: left;
	text-indent: -9999em;
	overflow: hidden;
	background: url(../_img/iconPrev.png) no-repeat center center;
	background-size: 100% 100%;
	margin: 0 0 0 1em;
	text-align: left;
}

.nextLink {
	background: url(../_img/iconNext.png) no-repeat center center;
	background-size: 100% 100%;
	float: right;
}

.outherIcons.prevNext {
	float: left;
	display: none;
}

/* Logo
-----------------------------*/
.logo {
	float: left;
/* 	width: 48.743718593%; */
	width: 65.8291457286%;
/* 	margin: 0 0 0 3.4364261168%; */
	margin: 0 0 0 1.675041876%;
}

#logo {
	display: block;
	width: 6.0301507538%;
	width: 250px;
	padding: 6px 20px 0 0;
	float: left;
}

#siteHeader h2, #siteHeader h3 {
	font-size: 1em;
	font-weight: normal;
	line-height: 1.2272727273em;
	font-family: "akzidenz-grotesk", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-family: 'Source Sans Pro', sans-serif;
	letter-spacing: 0.01em;
}

#siteHeader h2 {
/* 	color: #079dd4; */
	color: #079dd4;
	padding: 0;
}



/* Footer und Kontakt
-----------------------------------------------------------*/
.siteFooter {
	position: relative;
	width: 90%;
	max-width: 1194px;
	clear: both;
	margin: 4em auto 0 auto;
	border-top: 1px solid #000;
}

.siteFooter .box3 {
	line-height: 1.2222222222em;
	letter-spacing: 0.01em;
}

.kontaktBlock .box3 {
	letter-spacing: 0.01em;
}

.siteFooter .personen .box3:nth-child(3n),
.kontaktBlock .personen .box3:nth-child(3n)
{
	margin-right: 0;
}

.siteFooter .box3 .content {
	padding: 0 7.2463768116%;
}

.kontaktBlock .box3 .content {
	padding: 0 7.2463768116% 2.75em 7.2463768116%;
}

.adressBlock {
	margin: 0.75em 0 2.25em 0;
}

.impressumBox {
	clear: both;
	font-family: FFScalaWeb, Georgia, "Times New Roman", Times, serif;
	font-family: 'Source Sans Pro', sans-serif;
	padding: 0 1.675041876% 0 1.675041876%;
	font-weight: normal;
	margin: 0.75em 0 3em 0;
	line-height: 1.2em;
}

/* Footer Adressen ausblenden*/
.body-kontakt .siteFooter .adressBlock {
	display: none;
}



/* Main Navigation
-----------------------------------------------------------*/
.mainNav {
	float: right;
	width: 31.6582914573%;
	letter-spacing: 0.01em;
}

/*.mainNav li:nth-child(3) {
	border-bottom: 1px solid #000;
	padding: 0 0 0.613636364em 0;
	margin: 0 0 0.613636364em 0;
}*/

.mainNav a {
	display: block;
	line-height: 1.2272727273em;
	margin: 0 5.291005291%;
	text-transform: uppercase; 
}

.mainNav a:hover {
/*	color: #079dd4;
	-webkit-transition: color 0.15s ease-in-out; 
	-moz-transition: color 0.15s ease-in-out; 
	-o-transition: color 0.15s ease-in-out; 
	transition: color 0.15s ease-in-out;*/
}

.mainNav .selected a {
	font-weight: 600;
}




/*-----------------------------------------------------------------------------------
-------------------------------------------------------------------------------------
MediaQueries 
-------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------*/

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


/* Icons innerhalb
-----------------------------*/
.outherIcons {
	float: right;
	padding: 2.4em 1.675041876% 2.4em 0;
}

.printIcon, .upIcon {
	position: static;
	float: left;
	width: auto;
	padding: 0 0 0 2em;
	width: auto;
}

.printIcon img, .upIcon img, .prevLink, .nextLink {
	width: 30px;
	height: 30px;
}


} /* Ende 1475 */



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

/* Adresse bei Kontakt
-----------------------------------------------------------*/
.kontaktBlock .box3 { /* 4er Block */
	width: 31.6582914573%;
/* 	padding: 0 5.291005291%; */
}

.kontaktBlock>.box3:first-child { /* Adresse ganze Zeile */
	width: 100%;
	float: none;
}

.kontaktBlock .box3:nth-child(3n) { /* 4. Box margin rechts weg… */
	margin: 0;
}

.kontaktBlock .box3:nth-child(3n) {
	margin: 0 0 0 0; /* …dafür braucht es neu bei der 3. Box (Julia R.) das margin */
}

/* Adresse ganze breite */
.kontaktBlock>.box3:first-child .content { /* Padding anpassen ganze Breite */
	padding: 0 1.675041876% 0 1.675041876%;
}

.kontaktBlock .box3 .content { /* Padding anpassen 4er Block*/
	padding: 0 5.291005291% 2.75em 5.291005291%;
}

}



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


.body-home .introText { /* Text etwas kleiner */
	padding: 0 1.675041876% 0.75em 1.675041876%;
	font-size: 1.75em;
}


/* Box4 Spalten auch für Box3
-----------------------------*/
.box3 {
	width: 31.6582914573%;
}

.box3:nth-child(4n) {
	margin: 0 2.5125628141% 0 0;
}

.box3:nth-child(3n) {
	margin-right: 0;
}

.box3 .content {
	padding: 2.75em 5.291005291%;
}

.box3 .overText {
	width: 89.417989418%;
}

.introIMG {
	width: 70%;
}


/* Footer (Alle Adressen)
-----------------------------------------------------------*/
.adressBlock.fullAdress>.box3:first-child { /* Adresse ganze Breite */
	width: 100%;
	float: none;
}

.adressBlock.fullAdress>.box3:first-child .content { /* Padding anpasen auf ganze Breite */
	padding: 0 1.675041876%;
}

.adressBlock .box3 .content { /* Padding anapssen 4er Block*/
	padding: 0 5.291005291%;
}




} /* Ende 1000 */



@media screen and (max-width: 900px) {
.outherFrame,
.frame,
#siteHeader,
.siteFooter
{
	width: 95%;
}

} /* Ende 900 */


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

/* Adressen
-----------------------------------------------------------*/
/* Personen rechts */
.kontaktBlock .box3 {
	width: 100%;
}

.kontaktBlock .box3 .content {
	padding: 0 1.675041876%;
}

} /* Ende 800 */


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

.outherFrame,
.frame,
#siteHeader,
.siteFooter
{
	width: 90%;
}

.body-home .introText { /* Text etwas kleiner */
	font-size: 1.5em;
}

/* Icons
-----------------------------*/
.printIcon { /* Druck-Icon wird ausgeblendet */
	display: none;
}


/* Boxen
-----------------------------------------------------------*/
.box3, .box4, .box8, .box10 { /* Alle Boxen 6er Block (50%) */
	width: 48.743718593%;
}

.box3:nth-child(even),
.box4:nth-child(even),
.box8:nth-child(even),
.box10:nth-child(even)
{
	margin-right: 0; /* bei geraden Boxen das Margin rechts wegnehmen */
}

.box3 .content { /* Padding anapssen 6er Block*/
	padding: 2.75em 3.4364261168%;
}

.box4 .content { /* Padding anapssen 6er Block*/
	padding: 2.75em 3.4364261168% 1.5em 3.4364261168%;
}

.box3 .overText {
	width: 93.127147766%;
}

/* Margin zurücksetzen für masonry */
.box4.arbeitGrid {
	margin-bottom: 1.5em;
}

/* 6er Block (50%) schon hier auf ganze Breite
-----------------------------*/
.box6,
.doppelBox .box8, /* Doppelbox auch 100% */
.doppelBox .box4
{
	width: 100%;
	margin: 0;
}

.box6 .content, /* Padding auf ganze Breite einstellen */
.doppelBox .box8 .content, 
.doppelBox .box4 .content
{ 
	padding: 0 1.675041876%;
}

.box6 img { /* Padding für Arbeiten-Bilder */
	padding: 0.6em 0;
}

.introIMG { /* 1. Bild bei Arbeit zentrieren */
	width: 80%;
	margin: 0 10% 1.2em 10%;
}

.arbeitIntro { /* Padding-Bottom rausnehmen */
	padding: 2em 0 0 0;
}

.autoGrid6 { /* Paddign-Top verkleinern */
	padding: 1.5em 0 1.5em 0;
}



/* Footer
-----------------------------------------------------------*/
/* Personen rechts */
.adressBlock .box3 {
	width: 100%;
}

.adressBlock .box3 .content {
	padding: 0 1.675041876%;
}

.outherIcons.prevNext {
	display: block;
}

.nextPrevNav {
	display: none;
}

} /* Ende 700 */


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

#siteHeader {
	height: 202px;
}


.logo {
	width: 100%;
}

/* Navigation
-----------------------------------------------------------*/
.mainNav {
	width: 100%;
/* 	display: none; */
}

.mainNav>ul {
	display: none;
}

.mainNav a {
	margin: 0 1.675041876%;
}

.mainNav label {
	display: block;
	line-height: 34px;
	padding: 0 0 0 0;
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 30px;
	margin: 0 0 0 -20px;
}

.mainNav label span {
	display: none;
}

.mainNav label:before {
	position: absolute;
	right: 0;
	top: -0.05em;
	content: "\2261";
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: bold;
	font-size: 1.8em;
	z-index: 100;
}

.mainNav input[type=checkbox]:checked ~ ul {
	display: block;
	position: absolute;
	width: 100%;
	top: 0px;
	background: #fff;
}


/* Adressen bei Kontakt
-----------------------------------------------------------*/
/* Personen rechts */
.kontaktBlock .box3 {
	text-align: left;
}

/* Adresse links */
.kontaktBlock>.box3:first-child {
	width: 100%;
	float: none;
}

/* Personen-Block */
.kontaktBlock .personen {
	width: 100%;
	float: none;
}

.kontaktBlock .box3 .content,
.kontaktBlock>.box3:first-child .content
{
	padding: 0 1.675041876%;
}


}

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

.outherFrame,
.frame,
#siteHeader,
.siteFooter
{
	width: 90%;
}

/* Logo
-----------------------------*/
#logo {
	width: 250px;
	padding: 6px 10px 0 0;
}

.body-home .introText { /* Text etwas kleiner */
	font-size: 1.25em;
	padding: 0 1.675041876% 3em 1.675041876%;
}

/* Boxen
-----------------------------------------------------------*/
.box3, .box4, .box6, .box8, .box10 {
	width: 100%;
	margin: 0;
}

.box3 .content {
	padding: 0.6em 1.675041876%;
}

.box4 .content {
	padding: 0.6em 1.675041876% 0.6em 1.675041876%;
}

.box3 .overText {
	width: 96.649916248%;
}

.introIMG {
	width: 100%;
	margin: 0 0 1.2em 0;
}


} /* Ende 500 */


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


body {
	font-size: 16px;
}


.mainNav label:before {
	top: -0.15em;
	content: "\2261";
	font-size: 1.7em;
}


} /* Ende 360 */


/* Advanced Checkbox Hack */
body {
	-webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
	from {
		padding: 0;
	}
	to {
	padding: 0;
	}
}

input[type=checkbox] {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

label {
	display: none;
	cursor: pointer;
	user-select: none;
}






/* Clearfix
-----------------------------------------------------------*/
.group:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

*:first-child+html .group { zoom: 1; } /* IE7 */