/*
-----------------------------------------------
	www.berchtoldkrass.de
 by Christina Schmid www.christinaschmid.de
and Simon Malz www.lichtsignale.de
----------------------------------------------- */


/*		R E S E T
----------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
	font-variant-ligatures: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	height: 100%;
	-ms-text-size-adjust: none;
	-webkit-text-size-adjust: none;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    outline: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input, select {
    vertical-align: middle;
}

em, i {
	font-style: normal;
}


/*		W E B F O N T S
----------------------------------------------- */

@font-face {
	font-family: "BK ROM";
	src: url("fonts/ABCROM-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


/*		B A S I C S
----------------------------------------------- */

:root {
	--color-text: #141414;
	--color-grey: #999;
	--spacing: 1.25em;
}

body {
	color: var(--color-text);
	background: var(--color-bg);
	font-family: "BK ROM", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
	font-size: 17px;
	line-height: var(--spacing);
	letter-spacing: 0.01em;
	text-align: left;
	font-feature-settings: "ss05" 1;
	font-variant-alternates: stylistic(ss05);
}

a:link, a:visited {
	color: var(--color-text);
	text-decoration: none;
}

a:hover, a:active,  {
	color: var(--color-two);
}

main a:link, main a:visited, #contact a:link, #contact a:visited, .linkit a:link, .linkit a:visited {
	border-bottom: 1px solid var(--color-two);
	padding-bottom: 1px;
}


main a:hover, main a:active, #contact a:hover, #contact a:active, .linkit a:hover, .linkit a:active {
	color: var(--color-two);
}

*:focus {
	outline: none;
}

*::-moz-selection {
		background: var(--color-one);
}

*::selection {
	background: var(--color-one);
}

img, video {
	max-inline-size: 100%;
	block-size: auto;
	object-fit: contain;
	object-position: center center;
	height: auto;
}

b, strong {
	font-weight: normal;
	color: var(--color-grey);
}

i, em {
	font-style: normal;
}

h1, h2, h3 {
	font-weight: normal;
	font-size: 135%;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

h2, h3 {
	position: relative;
	left: -1px;
}

h3 {
	padding-top: calc(var(--spacing) * 1);
}

#expertise {
	padding-top: calc(var(--spacing) * 2);
}

h3.more a:link, h3.more a:visited {
	color: var(--color-grey);
	border-bottom: none;
	float: right;
}

h3.more a:hover, h3.more a:active {
	color: var(--color-two);
}

.fancybox__container {
	--fancybox-color: var(--color-text) !important;
	--fancybox-bg: #fff !important;
	--f-spinner-color-1: rgba(0, 0, 0, 0.1) !important;
	--f-spinner-color-2: rgba(17, 24, 28, 0.8) !important;
	z-index: 9009 !important;
}

.fancybox__toolbar {
	--f-button-bg: #fff !important;
	--f-button-hover-bg: #fff !important;
	--f-button-active-bg: #fff !important;
	--f-button-color: var(--color-text) !important;
	--f-button-hover-color: var(--color-two) !important;
}

.f-button {
	--fancybox-color: var(--color-text) !important;
	background: none !important;
}

.fancybox__nav {
	--f-button-color: var(--color-text) !important;
	--f-button-hover-color: var(--color-two) !important;
	--f-button-svg-filter: none !important;
}


/*		H E A D E R
----------------------------------------------- */

header {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9000;
	width: 100%;
	background: #fff;
}

header .wrapper-inner {
	padding: calc(var(--spacing) * 0.65) var(--spacing) calc(var(--spacing) * 0.8) var(--spacing);
}

header h1 span svg {
	width: auto;
	height: 20px;
	display: inline-block;
	padding-right: 8px;
	position: relative;
	top: 4px;
}

#mobilenav {
	position: fixed;
	z-index: 9990;
	right: calc(var(--spacing) * 1);
	top: calc(var(--spacing) * 0.8);
	width: 20px;
	height: 20px;
	cursor: pointer;
	text-align: right;
}

#mobilenav svg {
	width: auto;
	height: 12px;
	fill: var(--color-text);
}

#mobilenav em, #mobilenav.active strong {
	display: none;
}

#mobilenav.active em, #mobilenav strong {
	display: block;
}

#menu {
	display: none;
	position: fixed;
	z-index: 9999;
	width: 100vw;
	background: #fff;
}

header nav ul {
	padding: calc(var(--spacing) * 1) 0 calc(var(--spacing) * 1) 0;
}

header nav ul ul {
	padding: 0;
}

header nav li {
	list-style: none;
}

header nav a {
	padding: calc(var(--spacing) * 0.25) 0 calc(var(--spacing) * 0.25) 30px;
	display: block;
}

header nav li li {
	display: inline-block;
}

header nav li ul a {
	padding-left: 5px;
}

header nav li ul li:first-of-type a {
	padding-left: calc(var(--spacing) * 1 + 30px);
}

header a:link, header a:visited, footer a:link, footer a:visited {
	color: var(--color-grey);
}

header a:hover, header a:active, footer a:hover, footer a:active {
	color: var(--color-two);
}

header .active, footer .active span {
	color: var(--color-text) !important;
}

header a.active:hover, header a.active:active {
	color: var(--color-two) !important;
}

#heroimage img {
	height: 33vh;
	object-fit: cover;
	object-position: center top;
}

#heroimagehome {
	aspect-ratio: 30 / 18;
	overflow-y: hidden;
}

#heroimagehome a {
	margin-top: 5px;
	margin-bottom: 150px;
	display: block;
	max-width: 100%;
	overflow: hidden;          
	white-space: nowrap;       
	text-overflow: ellipsis;   
}

#heroimagehome a em {
	display: none;
	color: var(--color-grey);
}

#heroimagehome a:hover, #heroimagehome a:active, #heroimagehome a:hover em, #heroimagehome a:active em {
	color: var(--color-two);
}

#heroimagehome .rsOverflow {
	padding-bottom: calc(var(--spacing) * 1.25);
}


/*		B A S I C S
----------------------------------------------- */

#homepage .wrapper-grid a {
	border-bottom: none;
}

#auftraggebende {
	display: grid;
	column-gap: calc(var(--spacing) * 1);
	row-gap: calc(var(--spacing) * 0.8);
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

#auftraggebende div {
	display: flex;
	padding: var(--spacing);
	justify-content: center;
	align-items: center;
	aspect-ratio: 2 / 1;
}

#auftraggebende img {
	width: 100%;
	max-width: 100%;
	max-height: 50px;
	object-fit: contain;
}

#morespace #wrapper-outer {
	padding-top: calc(var(--spacing) * 4);
}

#wrapper-outer {
	margin: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1);
	margin-top: calc(var(--spacing) * 2.7);
}

main {
	margin-top: calc(var(--spacing) * 0.5);
}

main h2, main h3, main p, main figure, main ul, main dl, main blockquote, #firstnews p, #contact p, .catintro p {
	margin-bottom: var(--spacing);
}

h2 em {
	font-style: normal;
	color: var(--color-grey);
}

main figure span, .wrapper-grid span, .add-bg {
	display: block;
	line-height: 0;
	margin-bottom: calc(var(--spacing) * 0.33);
}

.add-bg {
	background: #f7f7f7;
}

.add-bg img {
	mix-blend-mode: multiply;
}

.add-space img {
	padding: calc(var(--spacing) * 0.5);
	max-width: calc(100% - var(--spacing));
}

main figure figcaption {
	font-size: 80%;
	letter-spacing: 0.02em;
	line-height: 1.25;
	color: var(--color-grey);
}

main figure a {
	border: none !important;
}

main ul {
	margin-left: calc(var(--spacing) * 0.75);
}

main li {
	list-style: none;
	text-indent: -15px;
}

main li:before {
	content: "–";
	padding-right: 5px;
}

#showme, #showmef {
	cursor: pointer;
}

#showme span, #showmef span {
	padding-bottom: 1px;
	border-bottom: 1px solid var(--color-two);
}

#showme:hover span, #showmef:hover span {
	color: var(--color-two);
}

#showme:after, #showmef:after {
	content: "↓";
	padding-left: 5px;
}

#showme.active:after, #showmef.active:after {
	content: "↑" !important;
}

#eckdaten {
	font-size: 80%;
	letter-spacing: 0.02em;
	line-height: 1.25;
	margin-bottom: calc(var(--spacing) * 2);
}

#eckdaten dl {
	padding-top: calc(var(--spacing) * 2);
	display: none;
}

#eckdaten dt {
	color: var(--color-grey);
}

#eckdaten dd {
	margin-bottom: calc(var(--spacing) * 0.8);
}

.img-1, .img-2, .img-3 {
	padding: calc(var(--spacing) * 1.5) 0 calc(var(--spacing) * 1) 0;
}

.open {
	margin-bottom: var(--spacing);
	padding-left: calc(var(--spacing) * 0.65);
	padding-right: calc(var(--spacing) * 0.65);
	border-radius: var(--radius-small);
	border: 1.5px solid var(--color-text);
	background: var(--color-violet);
}

.open .noshow {
	padding: 0;
	display: none;
}

.open h5 {
	font-weight: normal;
	padding-top: calc(var(--spacing) * 0.25);
	margin-bottom: calc(var(--spacing) * 0.25);
}

.open h5:hover {
	cursor: pointer;
}

.open h5:before {
	content: "↑";
	float: left;
	transform: rotate(180deg);
	position: relative;
	margin-right: 9px;
	display: inline-block;
	position: relative;
	top: -3px;
}

.open h5.ui-state-active:before {
	transform: inherit;
	top: inherit;
	bottom: 1px;
}

.open div {
	padding: calc(var(--spacing) * 1) calc(var(--spacing) * 0.25) calc(var(--spacing) * 0.5) calc(var(--spacing) * 1);
}

.open div p:last-of-type {
	margin-bottom: 0;
}

.open ul {
	border-top: 1.5px solid var(--color-text);
}

.open li {
	border-bottom: 1.5px solid var(--color-text);
	list-style: none;
	padding: calc(var(--spacing) * 0.5) 0 calc(var(--spacing) * 0.5);
}

#sidebar {
	display: grid;
	row-gap: calc(var(--spacing) * 2);
	padding-top: calc(var(--spacing) * 2);
}

#filter ul {
	padding-top: calc(var(--spacing) * 1);
	list-style: none;
	display: none;
}

#filter a:link, #filter a:visited {
	color: var(--color-grey);
}

#filter a:hover, #filter a:active {
	color: var(--color-two);
}

main + .wrapper-grid {
	margin-top: calc(var(--spacing) * 3);
}

.wrapper-grid {
	display: grid;
	row-gap: calc(var(--spacing) * 3);
	column-gap: var(--spacing);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.wrapper-grid em {
	display: block;
	font-style: normal;
	color: var(--color-grey);
}

.wrapper-grid a:hover, .wrapper-grid a:active, .wrapper-grid a:hover em, .wrapper-grid a:active em {
	color: var(--color-two);
}

#firstnews, #contact {
	display: grid;
	margin-bottom: calc(var(--spacing) * 3);
}

#firstnews span {
	color: var(--color-grey);
}

.catintro {
	margin-bottom: calc(var(--spacing) * 0.5);
}

.catintro h2 {
	margin-bottom: calc(var(--spacing) * 0.25);
}

#team {
	display: grid;
	column-gap: calc(var(--spacing) * 1);
	row-gap: calc(var(--spacing) * 2);
	margin-top: calc(var(--spacing) * 2);
}

#team div {
	min-width: 0;
}

.smallportrait {
	max-width: 319px;
}

main dt {
	color: var(--color-grey);
}

main dd {
	margin-bottom: calc(var(--spacing) * 1);
}

.email {
	display: block;
	max-width: 100%;
	overflow: hidden;          
	white-space: nowrap;       
	text-overflow: ellipsis;   
}

.email a {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tooltip-bubble {
	position: absolute;
	background-color: var(--color-one);
	color: #fff;
	padding: calc(var(--spacing) * 0.35) calc(var(--spacing) * 0.5) calc(var(--spacing) * 0.5) calc(var(--spacing) * 0.5);
	border-radius: 5px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s;
	z-index: 9000;
	max-width: 400px;
	hyphens: auto;
	overflow-wrap: break-word;
	word-break: normal;
}

.tooltip-bubble::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 20px;
	border-style: solid;
	border-color: var(--color-one) transparent transparent transparent;
}

.accordion-trigger {
	all: unset;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	cursor: pointer;
}

.accordion-content {
	padding-bottom: calc(var(--spacing) * 3);
}

.leaflet-control-attribution {
	display: none !important;
}

.accordion-icon {
	color: var(--color-grey);
}

.accordion-trigger:hover, .accordion-trigger:hover .accordion-icon {
	color: var(--color-two) !important;
}


/*		F O O T E R
----------------------------------------------- */

footer {
	padding: calc(var(--spacing) * 5) 0 var(--spacing) 0;
	position: relative;
	z-index: 100;
}

footer .wrapper-inner div:first-of-type {
	margin-bottom: calc(var(--spacing) * 0.5);
}

footer span {
	display: inline-block;
	margin-right: 3px;
}

footer em {
	font-style: normal;
	position: relative;
	top: 1px;
}

#random {
	height: 400px;
	overflow: hidden;
	position: relative;
	margin-top: -100px;
}

#random #figure {
	width: 200px;
	height: auto;
	margin-top: 100px;
}

#random #ground svg {
	width: auto;
	height: 700px;
	position: absolute;
	left: 5vw;
	top: 0;
	opacity: 0.1;
}


/*		R E S P O N S I V E
----------------------------------------------- */

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

#team {
	grid-template-columns: 1fr 1fr;
}

}


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

#heroimage img {
	height: auto;
	object-fit: contain;
	object-position: center center;
}

#heroimagehome {
	aspect-ratio: 30 / 15;
}

#heroimagehome a {
	margin-top: 5px;  
}

#heroimagehome a em {
	display: inline;
}

#heroimagehome .rsOverflow {
	padding-bottom: calc(var(--spacing) * 1.5);
}

.img-2, .img-3, #firstnews, #contact {
	display: grid;
	column-gap: var(--spacing);
	grid-template-columns: 1fr 1fr;
}

#mobilenav {
	display: none;
}

header .wrapper-inner {
	display: flex;
	justify-content: space-between;
}

#menu {
	display: block !important;
	position: inherit;
	width: auto;
	background: transparent;
}

#menu ul {
	padding: 0;
}

#menu li {
	display: inline-block;
	vertical-align: top;
	font-weight: normal;
	font-size: 135%;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

#menu li a {
	padding: 0 0 0 3px;
}

#menu ul ul {
	display: none;
}

#menu .topactive + ul {
	display: block;
}

#menu ul ul li {
	display: block;
	font-size: 1em;
}

#menu > ul > li {
	position: relative;
	display: inline-block;
	vertical-align: top;
}

#menu > ul > li > ul {
	position: absolute;
	top: 100%;
	left: 0;
	white-space: nowrap;
	display: none;
}

}


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

#auftraggebende {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

#auftraggebende img {
	max-height: 75px;
}

}


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

header h1 span svg {
	height: 28px;
	padding-right: 8px;
	top: 7px;
}

h1, h2, h3, #menu li, footer {
	font-size: 175%;
	letter-spacing: -0.015em;
}

footer {
	padding-bottom: calc(var(--spacing) * 0.5);
}

footer .wrapper-inner {
	display: flex;
	justify-content: space-between;
}

footer .wrapper-inner div:first-of-type {
	margin-bottom: 0;
}

footer em {
	top: 2px;
}

.img-2 {
	grid-template-columns: 1fr 1fr;
}

.img-3 {
	grid-template-columns: 1fr 1fr 1fr;
}

main h2, main h3, main p, main ul, main dl, .catintro p {
	width: calc(100% / 3 * 2 - var(--spacing));
}

#homepage .hquote {
	margin-left: calc(100% / 3 * 1 + var(--spacing) * 0.2);
	width: calc(100% / 3 * 2 - 5px);
}

#homepage h3.more {
	width: 100%;
}

main #firstcontent p, main #firstcontent ul {
	width: auto;
	margin-right: var(--spacing);
}

#aufteilung {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: var(--spacing);
}

#firstcontent {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
}

#eckdaten {
	grid-column-start: 3;
	grid-row-start: 1;
}

#showme {
	display: none !important;
}

#eckdaten dl {
	display: block !important;
	padding-top: 0;
}

#team {
	grid-template-columns: 1fr 1fr 1fr;
}

#auftraggebende {
	grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
}

#random #figure {
	width: 250px;
}

}


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

header h1 span svg {
	height: 32px;
	padding-right: 10px;
	top: 8px;
}

h1, h2, h3, #menu li, footer {
	font-size: 200%;
	letter-spacing: -0.02em;
}

h2, h3 {
	position: relative;
	left: -3px;
}

header .wrapper-inner {
	padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 2) calc(var(--spacing) * 0.8) calc(var(--spacing) * 2);
}

#wrapper-outer {
	margin: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
	margin-top: calc(var(--spacing) * 3.25);
}

.wrapper-grid {
	grid-template-columns: 1fr 1fr 1fr;
}

#auftraggebende img {
	max-height: 100px;
}

}


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

#heroimagehome a {
	margin-left: calc(100% / 4 + var(--spacing) / 2);
}

#heroimagehome .rsBullets {
	position: relative;
	top: calc(var(--spacing) * -1.5);
	background: #fff;
	float: right;
	width: auto;
}

header .wrapper-inner {
	margin-left: calc(100% / 4 + var(--spacing) / 2 - 66px)
}

#wrapper-outer .wrapper-inner {
	margin-left: calc(100% / 4 + var(--spacing) / 2);
}

#wrapper-outer footer .wrapper-inner {
	margin-left: calc(100% / 4 + var(--spacing) / 2 - 13px);
}

#sidebar {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: var(--spacing);
	padding-top: calc(var(--spacing) * 5);
}

#sidebar .wrapper-inner {
	grid-column: span 3;
	margin-left: 5.5px !important;
}

#showmef {
	display: none;
}

#filter ul {
	display: block !important;
	padding-top: 0;
}

#team {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

}


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

:root {
	--spacing: 1.35em;
}

body {
	font-size: 22px;
	line-height: var(--spacing);
	letter-spacing: 0.005em;
}

header h1 span svg {
	height: 40px;
	padding-right: 15px;
	top: 9px;
}

header .wrapper-inner {
	margin-left: calc(100% / 4 + var(--spacing) / 2 - 85px);
}

#wrapper-outer footer .wrapper-inner {
	margin-left: calc(100% / 4 + var(--spacing) / 2 - 17px);
}

main h2, main h3, main p, main ul, main dl, .catintro p {
	width: calc(95% / 3 * 2);
}

#firstcontent {
	padding-right: 5%;
}

#sidebar .wrapper-inner {
	margin-left: 7.5px !important;
}

#sidebar {
	padding-top: calc(var(--spacing) * 7);
}

.add-space img {
	padding: var(--spacing);
	max-width: calc(100% - var(--spacing) * 2);
}

#heroimagehome {
	aspect-ratio: 30 / 13;
}

#heroimagehome .rsBullets {
	top: calc(var(--spacing) * -1.3);
	padding-bottom: 10px;
}

#random #figure {
	width: 300px;
	margin-top: 50px;
	margin-left: 25px;
}

}


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

header .wrapper-inner {
	width: 1418px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	left: 207px;
}

#wrapper-outer {
	width: 1830px;
	margin-left: auto;
	margin-right: auto;
}

}