@font-face {
  font-family: 'GillSansMTPro-Book';
  src: url('../fonts/GillSansMTPro-Book/font.woff2') format('woff2'), url('../fonts/GillSansMTPro-Book/font.woff') format('woff');
}
@font-face {
  font-family: 'GillSansMTPro-Medium';
  src: url('../fonts/GillSansMTPro-Medium/font.woff2') format('woff2'), url('../fonts/GillSansMTPro-Medium/font.woff') format('woff');
}
@font-face {
  font-family: 'GillSansMTPro-MediumItalic';
  src: url('../fonts/GillSansMTPro-MediumItalic/font.woff2') format('woff2'), url('../fonts/GillSansMTPro-MediumItalic/font.woff') format('woff');
}
@font-face {
  font-family: 'GillSansMTPro-Bold';
  src: url('../fonts/GillSansMTPro-Bold/font.woff2') format('woff2'), url('../fonts/GillSansMTPro-Bold/font.woff') format('woff');
}

@font-face {
	font-family: 'krebsicons';
	src:	url('../fonts/krebsicons-webfont.woff2') format('woff2'),
			url('../fonts/krebsicons-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

* {
	margin: 0;
	padding: 0;
	outline: none;
}

body {
	color: #000000;
	font-size: 16px;
	line-height: 1.25em;
	font-family: GillSansMTPro-Medium;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 0.04em;	
}

a:link, a:visited, a:active, li.projPub, li.projFachpl {color: #aaaaaa; text-decoration: none;}
a:hover { color: #000000; /* color: #691e23; */ }

#pub #content-1 a:link, #pub #content-1 a:visited, #pub #content-1 a:active, #content .pp a.namelink:link, #content .pp a.namelink:visited, #content .pp a.namelink:active,
#ausz .main a:link, #ausz .main a:visited, #ausz .main a:active, a.wraplink:link, a.wraplink:visited, a.wraplink:active, a.wraplink:hover {color: #000000;}
a#x.arrowBack:hover {color: #000000;}

#pub #content-1 a:hover, #ausz .main a:hover {color: #aaaaaa;}

i { 
	font-family: GillSansMTPro-MediumItalic;
	font-style: normal;
	letter-spacing: 0.06em;
	}
	
strong {
	font-family: GillSansMTPro-Bold;
	font-weight: normal;
	letter-spacing: 0.08em;
	}

#flex-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: #ffffff;
	
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#flex-container>div, #flex-container>ul {
	width: 80%;
	max-width: 900px;
	overflow: auto;
}

div#content, div#content-proj {
	display: flex;
	height: 70vh;
	max-height: 550px;
	flex-direction: row;
	margin-top: 5%;
}

div#content-proj div.detail div {
	height: 534px;
	}

#content h4, #content .side label, #content-proj .side label {
	font-family: GillSansMTPro-Bold;
	font-weight: normal;
	letter-spacing: 0.08em;
	font-size: 16px;
	line-height: 1.25em;
	margin-bottom: 1.25em;
	padding-right: 30px;
}

#content-proj .main div.detail ul.head li, #content-proj .side ul.head li {
	padding-right: 30px;
}

#content p {
	font-size: 16px;
}

#content .side, #content-proj .main div.detail ul.head {
	display: block;
	flex: 24%;
}

#content-proj .side {
	display: none;
	flex: 24%;
}

#personen #content {
	flex-direction: column;
}

#content input[type=radio] {position: absolute; left: -9999px;}

#content .side label {
	cursor: pointer;
	display: inline-block;
	opacity: 0.3;
}

.person-detail #content .side label.arrows { display: none; }

#content .side label.arrows {
	opacity: 1;
}

#content .side label.selected {
	cursor: default;
	opacity: 1;
}

#r-1:checked ~ .side label#label-1, #r-2:checked ~ .side label#label-2, #r-3:checked ~ .side label#label-3 {
	cursor: default;
	opacity: 1;
}

.side label#label-1:hover, .side label#label-2:hover, .side label#label-3:hover, #content .side a:hover {
/*	color: #691e23;*/
	color: #000000;
	opacity: 1;
}

#r-1:checked ~ .side label#label-1:hover, #r-2:checked ~ .side label#label-2:hover, #r-3:checked ~ .side label#label-3:hover {
	color: #000000;
}

.main div#content-1, .main div#content-2, .main div#content-3 {
	display: none;
}

#r-1:checked ~ .main div#content-1, #r-2:checked ~ .main div#content-2, #r-3:checked ~ .main div#content-3 {
	display: block;
}

#content .main {
	display: block;
	flex: 76%;
	text-align: left;
}

#content .pp {
	display: block;
	flex: 100%;
	text-align: left;
}	
	
#content .pp {
	column-count: 3;
	column-gap: 30px;
	column-rule: none;
	column-fill: balance;
	text-align: left;
}

#content .pp {
	flex-direction: column;
}


#content .main div, #content div.detail, #content .main div ul.detailInfo {
	column-count: 2;
	column-gap: 30px;
	column-rule: none;
	column-fill: balance;
	text-align: left;
/*	min-height: 100%; /* fix for Safari bug */
}

#pub .main div#content-1 p, #ausz .main div#content-1 p, #ausz .main div#content-2 p { padding-right: 15px; } /* for not to touch scroll bar */

#content .main div.extra {
	column-count: 1;
	column-gap: 0px;
	column-fill: auto;
	text-align: left;
}

#content .main div.extra div {
	column-count: 2;
	column-gap: 30px;
	column-rule: none;
	column-fill: balance;
	text-align: right;

	width: 100%;
	margin-bottom: 1.25em; /* 0.625em; */
}

#content .main div.extra b {
	font-family: GillSansMTPro-Bold;
	font-weight: normal;
	font-size: 16px;
	display: block;
	text-align: right;
	margin-bottom: 0;
}

#content .main div.extra b.zeroHeight {
	height: initial;
	margin: initial;
}

#content .main div.extra p {
	display: block;
	text-align: left;
	margin: 0 0 0 0;
}

#personen #content .main div {
	column-fill: auto;
}

#content .main .rtl {
	column-fill: auto;
	direction: rtl;
}

#content .main .ltr {
	column-fill: auto;
	direction: ltr;
}

#content .main .avoid-break {
/*	-webkit-column-break-inside: avoid; */
	break-inside: avoid-column;	
}

#content .main p, #content .pp>div, .main div.detail ul, #content-proj .main div.detail ul.detailInfo li {
/*	-webkit-column-break-inside: avoid; */
	break-inside: avoid-column;	
	display: block;
	margin-bottom: 0.625em;
}

#pub #content .main #content-2 p, #pub #content .main #content-3 p {
	margin-bottom: 1.25em;
}

#content-proj .main div.detail ul.detailInfo li {
	margin-bottom: 0;
}


#content.ppc {
	overflow: hidden;
}

#content .pp>div {
	margin-bottom: 45px;
	overflow: hidden;
}

#content .main p.margin-top {
	margin-top: 1.875em; /* 3.75em; */
}

#content .main p.newcolumn {
	break-before: column;
}

#content .main img, #content .pp img, #content .side img {
	display: block;
	border: none;
	width: 14.3em; /* 8.345em; */
	height: 10em;
	margin-bottom: 1.25em;
	background-color: #cccccc;
}

#content .pp img {
	width: 18em;
}

#content #buero.side img {
	position: static;
	width: 8.345em;
	height: 12.476em;
	background-color: transparent;
}

#content .main img {
	width: 100%;
	height: initial;
}

.strip div {
	position: relative;
	top: -534px;
	left: 0;
	width: 100%;
}
	
.strip img {
	cursor: pointer;
	position: relative;
	z-index: 10;
	-o-transition-property: opacity;
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	transition-property: opacity;
	-o-transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	transition-duration: 0.3s;	
}

#content-proj .main div.strip ul,
#content-proj .main div.detail ul {
	font-size: 16px;
	list-style-type: none;
	padding: 0 1px 0 1px;
}

ul.head {
	padding-left: 1px;
}

#content-proj .main div.detail ul {
	padding: 0;
	column-count: 1;
	break-inside: avoid;
}

#content-proj .main div.detail ul.head {
	padding-left: 1px;
}

a.arrowBack, a.arrowDetail {
	font-family: GillSansMTPro-Medium;
}

a.arrowBack:before, i.closeX:before, a.arrowDetail:before, i.arrow:before, ul#proj-nav li button.slickPrevArr, ul#proj-nav li button.slickNextArr, ul#proj-nav li button.invisible, #content-proj .side label button.slickPrevArr, #content-proj .side label button.slickNextArr, a.extLink {
	font-family: 'krebsicons';
    font-style: normal;
    font-weight: normal;
   	font-size: 24px;
}

a.extLink {
    content: "\004c";
	padding-left: 6px;	
   	font-size: 16px;
   	line-height: 0.5em;
}

a.arrowBack:before, i.closeX:before, a.arrowDetail:before, i.arrow:before {
    content: "\0078";
	padding-right: 10px;	
}

a.arrowBack:hover, i.closeX:hover, a.arrowDetail:hover {
    color: #000000;	
}

a.arrowDetail:before {
	content: "\00bb";
	font-size: 20px;
}

i.arrow:before {
	color: #909090;
	content: "\0077";
	padding-left: 10px;	
}

.slickPrevArr:before {
	padding-right: 30px;	
	content: "\0077";
/*	margin: 0 0.6em 0 -1.2em; */
	}
	
.slickNextArr:after {
	padding-right: 6px;
	padding-left: 30px;
	content: "\0079";
/*	margin: 0 0.6em 0 -1.2em; */
	}
	
#content-proj .side label button.slickPrevArr:before {
	padding-right: 10px;	
}

#content-proj .side label button.slickNextArr:after {
	padding-left: 10px;	
}

#content-proj .main div.detail ul.detailInfo {
	column-count: 2;
}

#content-proj .main div.strip ul {
	opacity: 0;
}

#content-proj .main div.strip li,
#content-proj .main div.detail li,
#content-proj .side label li, #content .side label li  {
	margin-top: 0.625em;
	font-family: GillSansMTPro-MediumItalic;
	font-weight: normal;
	font-style: normal;
	letter-spacing: 0.06em;
}

#content-proj .main div.detail li.detailText, #content-proj .main div.detail li.projPub {
	font-family: GillSansMTPro-Medium;
}

#content-proj .main div.detail li:first-child  {
	margin-top: 0;
}

#content-proj .main div.strip li.jahr, #content-proj .main div.strip li.titel, #content-proj .main div.strip li.ort, #content-proj .main div.strip li.zusatz,
#content-proj .main div.detail li.jahr, #content-proj .main div.detail li.titel, #content-proj .main div.detail li.ort, #content-proj .main div.detail li.zusatz,
#content-proj .side label li.jahr, #content-proj .side label li.titel, #content-proj .side label li.ort, #content-proj .side label li.zusatz {
	margin-top: 0;
	font-family: GillSansMTPro-Medium;
}

#content-proj .main div.strip li.jahr,
#content-proj .main div.detail li.jahr,
#content-proj .side label li.jahr {
	margin-bottom: 0.625em;
	font-family: GillSansMTPro-Bold;
	font-weight: normal;
	letter-spacing: 0.2em;
}

#content-proj .main div.strip li.wettErgebnis, #content-proj .main div.strip li.no-margin,
#content-proj .main div.detail li.wettErgebnis, #content-proj .main div.detail li.no-margin,
#content-proj .side label li.no-margin, #content-proj .side label li.wettErgebnis {
	margin-top: 0;
}

#content-proj .main div.strip, #content-proj .main div.detail {
	display: block;
	position: relative;
	border: none;
	padding: 0;
	margin: 0 8px 0 2px;
}

#content-proj .main div.strip img, #content-proj .main div.strip div.proj.text,
#content-proj .main div.detail img, #content-proj .main div.detail div.proj.text {
	width: 100%;
}

#content-proj, #content-proj .main, #content-proj .main div.detail {
	display: flex;
	flex-direction: row;
	overflow: hidden;
}

#content-proj .main div.detail ul {
	flex: 30%;
}

#content-proj .main div.detail ul.head, #content-proj .main div.detail ul.detailInfo li.skip {
	display: block;
}

#content-proj .main div.detail ul.detailInfo {
	flex: 76%;
}

ul#nav, ul#proj-nav {
	margin: 1% 0 3% 0;
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;	
	overflow: hidden;
}

ul#proj-nav {
	margin: 0.7% 0 1.3% 0;
}

ul#nav li, ul#proj-nav li {
	display: inline;
	flex-grow: 1;	
	font-family: GillSansMTPro-Book;
	font-size: 16px;
	letter-spacing: 0.4em;
}

ul#nav li:last-child, ul#proj-nav li:last-child {
	flex-grow: 0;
}

ul#nav li a, ul#proj-nav li a {
	font-family: GillSansMTPro-Book;
	color: #000000;
	text-decoration: none;
	opacity: 0.4;
}

ul#nav li a:hover, ul#proj-nav li a:hover {
	opacity: 1;
}

#proj-nav button, .side button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	line-height: 1.25em;
}

.light {
	opacity: 0.4;
}

h4.light {
	opacity: 0.3;
}

.soft-hyphen { display: none; }

#content-proj .main {
	width: 100%;
	float: none;
}

#x {
	position: fixed;
	display: block;
}

@media (max-width: 1199px) {
	
}

@media (max-width: 1050px) {
	#flex-container>div, #flex-container>ul {
		width: 84%;
	}

	ul#nav li {
		letter-spacing: 0.3em;
	}
}

@media (max-width: 991px) {
	#flex-container>div, #flex-container>ul {
		max-height: initial;
		width: 86%;
	}

	#content .side, #content-proj .side, #content-proj .main div.detail ul.head {
		flex: 36%;
		width: 36%;
	}
	
	#content h4, #content .side label, #content-proj .main div.detail ul.head li {
		padding-right: 60px;
	}

	#content-proj .side label {
		padding-right: 0;
	}

	.soft-hyphen { display: inline; }
	
	#content .main, #content-proj .main div.detail ul.detailInfo {
		flex: 64%;
		width: 64%;
	}

	#content-proj .main {
		width: 100%;
		float: none;
	}

	#content .main div, #content-proj .main div.detail ul.detailInfo {
		column-count: initial;
		overflow: auto;
	}

	#content .main div.extra div {
		column-count: 1;
	}

#content .main img {
	width: 94%;
}

	#content .main div.extra b {
		text-align: left;
		margin: 1.25em 0 1.25em 0;
	}

	#content .main div.extra b.zeroHeight {
		height: 0;
		margin: 0;
	}

	#content .main div:first-child>b {
		margin-top: 0;
	}

	ul#nav li {
		font-size: 14px;
/*		letter-spacing: 3px; */
	}

}

@media (max-width: 767px) {
	#content h4, #content-proj .main div.detail ul.head li {
		padding-right: 30px;
	}

	div#content, div#content-proj {
		margin-top: 3vh;
		height: 87vh;
	}

	#content-proj .main, #content-proj .main div.detail ul.detailInfo {
		flex: 64%;
		width: 64%;
	}

	#content-proj .side, .person-detail #content .side label.arrows {
		display: block;
	}

	#content-proj .main div.detail ul.head, #content-proj .main div.detail ul.detailInfo li.skip {
		display: none;
	}

	#flex-container>div, #flex-container>ul {
		width: 94%;
	}
	
	#personen #content {
		margin-left: 36%;
		width: 64%;
	}
	
	#content.ppc {
		overflow: scroll;
	}

	#content .pp {
		column-count: 1;
		column-fill: auto;
	}

#content .main img {
	width: 96%;
}

	ul#nav {
		flex-direction: column;
		width: 34%;
		flex: 34%;
		margin: 0;
		position: fixed;
		bottom: 4vh;
		left: 3%;
	}

	ul#nav li {
		display: block;
		line-height: 1.875em;
		letter-spacing: 0.2em;
	}
	
	ul#proj-nav {
	display: none;
/*		flex-direction: row;
		width: 46%;
		flex: 46%;
		margin: 0;
		position: fixed;
		bottom: 4vh;
		right: 3%;
*/	}

	#content-proj .main div.strip ul, #content-proj .main div.detail ul, 
	#content h4, #content .side label, #content-proj .side label,	
	#content p, #content .main div.extra b {
		font-size: 14px;
	}
	
	#x {
		display: none;
	}
}

@media (max-width: 420px) {

	div#content, div#content-proj {
		margin-top: 0;
		height: 90vh;
	}

	#content #buero.side img {
		width: 6.666em;
		height: 10em;
	}

	#proj #content-proj .main {
		flex: 48%;
		width: 48%;
	}

	#proj #content-proj .side {
		flex: 50%;
	}
}

@media (max-height: 420px) {

	#content #buero.side img {
		position: absolute;
		top: 8vh;
		right: 2%;
	}
	
	div#content-proj div.detail div {
		height: 380px;
		}

}

@media (max-height: 390px) {

	div#content-proj div.detail div {
		height: 360px;
		}
}