/* ------------------------------------------------------------------------- *\

css layout formatting for Content First, static footer, sections, responsive! · template
written by the left hand of mtness

2012-02-23
2017-03-22
2020-11-03

*/
/* ------------------------------------------------------------------------- */ /* global */

* { margin: 0; padding: 0; } img, div { border: 0; }

html {
	overflow-x: hidden; /* due to .start.deco.h1 */
	overflow-y: scroll;
	scroll-behavior: smooth;
}

body {
	height:100%;
	font-family: 'Inter', Arial, sans serif;
	background: #fff;
	color: #0E0B0B;
	opacity: 1;
	transition: 1s opacity;
	display: flex;
	flex-flow: column;
	position: relative;
}

@media screen and (max-width: 768px) {
	body {
		font-size: 14px;
		/*line-height: 1.5;*/
	}
}
@media screen and (min-width: 769px) {
	body {
		font-size: 16px;
		/*line-height: 1.7;*/
	}
}

#header {
	order: 1;
}
main {
	order: 2;
}
#footer {
	order: 3;
}

a { color: inherit; transition: .2s all ease-in; }
a:hover { color: #888; }


.deco {
	position: absolute;
	content: " ";
	bottom: -130px;
	background-color: #E5007C;
	width: 20px;
	height: 20px;
	opacity: 0.33;
	z-index: 0;
}

#stage section.pillar {

	position: relative;
	display: block;
	margin: 0 auto; /* mind the header height! */
	padding: 0;
	width: 1424px;
	line-height: 1.7;
}

.main {

	background: #fff;
	padding: 0 0 84px 0;
}

main > h1 {
	position: absolute;
	bottom: 0;
	font-size: .75rem;
	font-weight: normal;
	width: 100%;
	z-index: 1;
	background-color: #0004;
	text-align: center;
	padding: 0.25rem 0;
}

.center {

	position: relative;
	/* height: 100%; */
	margin: 0 auto;
	/* background-color: #666; */
}
@media (max-width: 768px) {
	.center {
		width: 100%;
	}
}
@media (min-width: 769px) {
	/*.start header > .center,*/
	.center.wide {
		max-width: 2560px;
		width: 100%;
		max-height: 100vh;
		overflow: hidden;
	}

	.center.wide .img {
		text-align: center;
	}
}
@media (min-width: 1101px) {
	/*.start.sticky header > .center,*/
	.center {
		max-width: 1424px;
	}
}

.intro {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.intro .bgimg {
	position: absolute;
	top: -24px;
	left: -24px;
	display: block;
	width: calc(100% + 48px);
	height: calc(100% + 48px);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(6px);
	opacity: 0.33;
}
.intro .center {
	/* overflow: hidden; */
}
.intro .center .txt {
	position: absolute;
	padding: min(23vh, 205px) 90px 125px;
	width: 100%;
	max-width: calc(56px * 15.1);
	z-index: 1;
}
.intro .center .txt .header {
	display: flex;
	flex-flow: column-reverse;
}


.intro .center .txt h1 {
	color: #F6EEE6;
	font-family: Cala;
	font-size: 52px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 61.6px;
	text-shadow: 24px 24px 48px 0 #000000;
	margin-bottom: calc(56px * 1);
}
@media (max-width: 1024px) {
	.intro .center .txt h1 {
		font-size: 21px;
		font-weight: 300;
		letter-spacing: 0;
		line-height: 30.8px;
		text-shadow: 8px 8px 16px 0 #000000;
	}
}
.intro .center .txt h3 {
	padding-bottom: 40px;
	color: #fff;
	font-family: Inter;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 0.01em;
	line-height: 21px;
}
.intro .center .txt p {
	color: #FFFFFF;
	font-family: Inter;
	font-size: 18px;
	letter-spacing: 0;
	line-height: 25.2px;
	max-width: calc(56px * 11);
}
.l1 .intro .center .txt h1,
.l1 .intro .center .txt h3,
.l1 .intro .center .txt p,
.glossar .intro .center .txt h1,
.glossar .intro .center .txt p {
	color: #1E1B1B;
}

@media (max-width: 768px) {
	.intro {
		display: flex;
		flex-flow: column-reverse;
		overflow: visible;
	}
	.intro .bgimg {
		display: none;
	}

	.intro .center .txt {
		position: relative;
		box-sizing: border-box;
		padding: 30px;
	}
	.intro .center .txt h3 {
		padding-bottom: 1.33rem;
		font-size: 16px;
	}

	.intro .center .txt .header + p {
		display: none;
	}

	.intro .center .txt h1,
	.intro .center .txt h3,
	.intro .center .txt p,
	.glossar .intro .center .txt h1,
	.glossar .intro .center .txt p {
		color: #1E1B1B;
	}

}


.intro .img {
	position: relative;
	display: block;
	background-color: #000;
	z-index: 0;
}
.intro .img img {
	position: relative;
	/*filter: grayscale(0.33);*/
	/* opacity: 0.9; */
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width: 768px) {
	.intro .img img {
		width: 100%;
		margin-left: 0%;
	}
}
.intro .img img:before {
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-color: red;
}



#atf {
	max-height: 100vh;
	position: relative;
	overflow: hidden;
}


.start .hero {
	position: relative;
	max-width: 100%;
}

.start .hero .bgwrap {
	position: absolute;
	top: 0;
	left: 0	;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.start .hero .bgimg {
	position: absolute;
	top: -24px;
	left: -24px;
	display: block;
	width: calc(100% + 48px);
	height: calc(100% + 48px);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(6px);
	opacity: 0.33;
}

.start .hero .center.claim {
	z-index: 3;
	position: relative;
}
@media screen and (max-width: 768px) {
	#atf {
		max-height: unset;
	}
	.start .hero .center.claim {
		top: 0;
		left: 0;
	}
	.start #hero {
		max-width: 130vw;
		height: auto;
	}
}
@media screen and (min-width: 769px) {
	.start .hero .center.claim {
		top: 90vh;
		left: 63px;
	}
	.start #hero {
		max-width: 130vw;
		height: auto;
	}

}

/*

.start header > .center .img img {
    width: 100%;
    height: auto;
	visibility: hidden;
}
@media (max-width: 768px) {
	.start .hero .center {
		max-width: 100vw;
		overflow-x: hidden;
	}
	.start .hero .bgimg {
		background-position: top right;
		height: calc(60% + 48px);
	}
}
*/


.start .deco.h1 {
	bottom: -268px;
	left: calc(50% + 382px);
	background-color: #E7DDD4;
	opacity: 0.2;
	z-index: 0;
}
@media screen and (max-width: 768px) {
	.start .deco.h1 {
		transform: scale(20) rotate(-45deg) skew(12deg,12deg);
	}
}
@media screen and (min-width: 769px) {
	.start .deco.h1 {
		transform: scale(60) rotate(-45deg) skew(12deg,12deg);
	}
}

.start .hero .center .txt {
	position: absolute;
	display: flex;
	flex-flow: column;
}
.start .hero .center .txt h1 {
	color: #F6EEE6;
	font-family: Inter;
	font-weight: bold;
}
@media (max-width: 768px) {
	.start .hero .center .txt {
		top: 180px;
		left: 16px;
		padding: 0 0 0;
		width: 100%;
		max-width: 100%;
		text-align: left;
		z-index: 2;
	}
	.start .hero .center .txt h1 {
		font-size: 32px;
		letter-spacing: 0;
		line-height: 28px;
		padding-bottom: 100px;
	}
}
@media (min-width: 769px) {
	.start .hero .center .txt {
		top: -39vh;
		right: 0;
		padding: 0;
		width: 50%;
		max-width: 50%;
		text-align: center;
	}
	.start .hero .center .txt h1 {
		font-size: 72px;
		letter-spacing: 0;
		line-height: 72px;
		padding-bottom: 100px;
	}
}
@media (max-width: 768px) {
	.start .hero .center .txt h3 {
		display: none;
	}
}
.start .hero .center .txt h3 {
	padding-bottom: 40px;
	color: #F6EEE6;
	font-family: Inter;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 20px;
	text-align: center;
	text-shadow: 0 0 6px 0 rgba(30,27,27,1);
}
.start .hero .center .txt h3 a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease-in-out;
}
.start .hero .center .txt h3 a:hover {
	color: #e7107d;
}
.start .hero .center .img img {
	display: block;
}
@media (max-width: 768px) {
	.start .hero .center .img img {
		position: relative;
		left: -50%;
		width: 200%;
		height: auto;
	}
}
@media (min-width: 769px) {
	.start .hero .center .img img {
		min-width: 1440px;
		width: 100%;
		height: auto;
	}
}


.start .quickstart {
	position: absolute;
	width: 100%;
}

.start .quickstart .center {
	z-index: 1;
}
.start .quickstart .txt {
	box-sizing: border-box;
	z-index: 1;
}
@media (max-width: 575px) {
	.start .quickstart {
		position: relative;
	}
	.start .quickstart .txt {
		width: 100%;
		padding: 0 16px 0;
		position: relative;
		top: -80px;
	}

	.start .common.content {
		padding-top: 0;
		display: flex;
		flex-flow: column-reverse;
	}
	.start .common.content .first {
		margin-bottom: 50px;
	}
}

@media (min-width: 576px) and (max-width: 1280px) {
	.start .quickstart {
		top: 28%;
	}
	.start .quickstart .txt {
		width: 75%;
		padding: 0 90px;
		position: relative;
		top: -5vh;
	}
}

@media (min-width: 1281px) {
	.start .quickstart {
		top: 111px;
	}
	.start .quickstart .txt {
		width: 60%;
		padding: 24px 90px 0;
	}
}


.start .quickstart .txt .header {
	display: flex;
	flex-flow: column-reverse;
}
.start .quickstart .txt .header h2 {
	color: #1E1B1B;
	font-family: Cala;
	font-size: 40px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 44px;
}
.start .quickstart .txt .header h2 strong {
	text-transform: lowercase;
	background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0) 6px, #e7107d 6px , #e7107d 12px, rgba(255,255,255,0) 12px, rgba(255,255,255,0) 100%);
}

.start .quickstart .txt .header h3 {
	font-family: Inter;
	font-weight: 300;
}
@media (max-width: 768px) {
	.start .quickstart .txt .header h3 {
		color: #A09695;
		font-size: 14px;
		letter-spacing: 0;
		line-height: 18px;
		padding-bottom: 20px;
	}
}
@media (min-width: 769px) {
	.start .quickstart .txt .header h3 {
		font-size: 16px;
		line-height: 20px;
		letter-spacing: 0;
		padding-bottom: 16px;
	}
}

.start .quickstart ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: 18px 0;
}
.start .quickstart ul li {
	margin: 6px 12px 6px 0;
}
.start .quickstart ul li a {
	display: inline-block;
	padding: 10px 20px;
	background-color: #F6EEE6;
	border-radius: 2px;
	/*color: #e7107d;*/
	font-family: Inter;
	font-size: 16px;
	letter-spacing: 0;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease-in-out, color .1s ease-in-out;
}

.start .quickstart ul li a:hover {
	background-color: #e7107d;
	color: #F6EEE6;
}
@media (max-width: 768px) {
	.start .quickstart ul {
		gap: .1rem .75rem;
	}
	.start .quickstart ul li {
		margin: 6px 0;
	}
	.start .quickstart ul li a {
		width: 100%;
		box-sizing: border-box;
	}
}




.start .quickstart p {
	color: #1E1B1B;
	font-family: Inter;
	font-size: 16px;
	letter-spacing: 0;
	line-height: 20px;
}
.start .quickstart p a {
	text-decoration: none;
	color: inherit;
	/*transition: color .2s ease-in-out;*/
	background: linear-gradient(#e7107d 0 0) calc(100% - var(--p,0%)) / var(--p,0%) no-repeat;
	transition: .4s,background-position 0s;
	padding: 4px 8px 4px 0;
}
.start .quickstart p a:before {
	position: relative;
	top: 4px;
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	-webkit-mask: url(/typo3conf/themes/dru2024/img/arrow-right.svg) no-repeat 50% 50% / 100% auto;
	mask: url(/typo3conf/themes/dru2024/img/arrow-right.svg) no-repeat 50% 50% / 100% auto;
	background-color: #aaa;
	margin-right: 4px;
}
.start .quickstart p a:hover {
	color: #fff;
	--p: 100%;
}
.start .quickstart p a:hover:before {
	background-color: #fff;
}

.start .quickstart p a em {
	font-style: inherit;
	text-decoration: none;
	border-bottom: 1px solid #aaa;
}

.start .quickstart .deco.qs1 {
	bottom: unset;
	background-color: #fff;
	opacity: 1;
}
.start .quickstart .deco.qs2 {
	background-color: #fff;
}
@media (max-width: 768px) {
	.start .quickstart .deco.qs1 {
		top: 100px;
		left: 100px;
		transform: scale(25) rotate(-45deg) skew(12deg,12deg);
	}
	.start .quickstart .deco.qs2 {
		top: 110px;
		left: 130px;
		transform: scale(25) rotate(-45deg) skew(12deg,12deg);
	}

}
@media (min-width: 769px) {
	.start .quickstart .deco.qs1 {
		bottom: unset;
		top: -70px;
		left: calc(50% - 390px);
		transform: scale(56) rotate(-45deg) skew(12deg,12deg);
	}
	.start .quickstart .deco.qs2 {
		bottom: unset;
		top: -100px;
		left: calc(50% - 290px);
		transform: scale(56) rotate(-45deg) skew(12deg,12deg);
	}

}



.common.content .center {
	box-sizing: border-box;
}
@media (max-width: 575px) {
	.common.content {
		padding-top: calc(16px * 2);
	}
	.detail .common.content {
		padding-top: calc(16px * 4);
	}
	.common.content .center {
		padding: 0 16px;
	}
}
@media (min-width: 576px) {
	.common.content {
		padding-top: calc(56px * 2);
		position: relative;
		z-index: 23;
	}
	.common.content .center {
		padding: 0 90px;
	}
}

.common.content p + p {
	margin-top: 2em;
}



.grid7 {
	display: block;
}
@media (max-width: 768px) {
	.grid7 {
		width: 100%;
	}
}
@media (min-width: 769px) {
	.grid7 {
		width: calc( 56px * 14);
		max-width: calc(100% - 180px);
	}
}

.centered {
	margin: 0 auto;
}
@media (max-width: 768px) {
	.centered {
		max-width: 90vw;
	}
}


.common.content .first > .mask-ce,
.common.content .default {
	margin-bottom: calc( 56px * 2);
}
@media screen and (max-width: 768px) {
	.common.content .first > .mask-ce,
	.common.content .default {
		margin-bottom: calc( 16px * 2);
	}
}

.common.content h2 {
	margin: 0 0 18px;
}

.start .common.content h2 {
	color: #1E1B1B;
	font-family: Inter;
	font-weight: bold;
	letter-spacing: 0;
	position: relative;
}
@media (max-width: 575px) {
	.start .common.content h2 {
		font-size: 1.25rem;
		line-height: 1.5rem;
	}
}
@media (min-width: 576px) {
	.start .common.content h2 {
		font-size: 40px;
		line-height: 44px;
	}
}

.common.content h2 span,
.common.content h2 b,
.common.content h2 strong {
	font-weight: inherit;
	position: relative;
	padding: 0 1px;
	background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0) 6px, #aaa 6px , #aaa 16px, rgba(255,255,255,0) 16px, rgba(255,255,255,0) 100%);
}
@media (max-width: 768px) {
	.common.content h2 span,
	.common.content h2 b,
	.common.content h2 strong {
		background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0) 3px, #aaa 3px , #aaa 9px, rgba(255,255,255,0) 9px, rgba(255,255,255,0) 100%);
	}
}

.common.content h3 {
	margin: 0 0 18px;
	color: #1E1B1B;
	font-family: Cala;
	font-size: 29px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 36px;
}

.common.content h4 {
	color: #A09695;
	font-family: Inter;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 20px;
	padding-bottom: 10px;
}

.common.content .header h2 {
	margin-bottom: calc( 56px / .75);
}

.common.content .col-2 {
	display: flex;
	gap: 56px;
}

@media (max-width: 1100px) {
	.common.content .col-2 {
		flex-flow: column;
	}
	.common.content .col-2 > div {
		width: 100%;
		margin-left: 0;
		margin-bottom: 64px;
	}
	.common.content .header h2 {
		margin-bottom: calc( 16px / .75);
	}

}
@media (min-width: 1101px) {
	.common.content .col-2 {
		flex-flow: row;
	}
	.common.content .col-2 > div {
		width: calc(54px * 11);
		margin-left: 0;
	}
}

.txtimg {
	display: flex;
	flex-flow: row-reverse;
}
@media (max-width: 768px) {
	.txtimg {
		flex-flow: column-reverse;
	}
}
.txtimg .txt {
	padding-top:  calc(56px / 2);
	padding-right:  calc(56px / 4);
}
.txtimg .img {
	margin-right:  calc(56px / 1);
}


.detail .col-2 {
	margin-bottom: calc(56px * 0);
}

.detail .content .grid-ce .mask-ce {
	background-color: #FAF6F2;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.detail .content .grid-ce .mask-ce {
		padding: 16px;
		margin-bottom: 16px;
	}
	.txtimg .img {
		margin-right:  0;
	}
	.txtimg .img img {
		width: 100%;
		height: auto;
	}

}
@media (min-width: 769px) {
	.detail .content .grid-ce .mask-ce {
		padding: 54px;
		margin-bottom: 54px;
	}
}

.detail .mask-ce .header {
	display: flex;
	flex-flow: column-reverse;
}
.detail .col-2 .mask-ce .header h2 {
	color: #1E1B1B;
	font-family: Cala;
	font-size: 27px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 36px;
}
.detail .mask-ce .header h4 {
	color: #e7107d;
}

.detail .common.content h2 {
	font-weight: bold;
	letter-spacing: 0;
}
@media (max-width: 768px) {
	.detail .common.content h2 {
		font-size: 24px;
		line-height: 30px;
	}
}
@media (min-width: 769px) {
	.detail .common.content h2 {
		font-size: 40px;
		line-height: 44px;
	}
}









footer {

	position: relative;
	bottom: 0;
	width: 100%;
	height: 300px;
	/* background: #f8f8f8; */
	box-sizing: border-box;
	padding-top: 150px;
	padding-top: 1.33rem;
	overflow: hidden;
}
footer .center {
	width: calc(100% - 180px);
	max-width: min(90vw, 1254px);
	border-top: 1px solid #1E1B1B;
	display: flex;
	z-index: 23;
}
footer .center > div {
	flex-grow: 1;
	padding: 4rem 0;
}

footer .center .footer-menu {
	display: flex;
	justify-content: flex-end;
}
footer .center .footer-menu ul {
	list-style: none;
	display: flex;
	gap: 1.5rem;
}
footer .center .footer-menu ul li {
}
footer .center .footer-menu ul ul {
	flex-direction: column;
}
footer .center .footer-menu ul li a {
	display: block;
	color: #1E1B1B;
	font-family: Inter;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.075em;
	line-height: 17px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .2s ease-in-out;
}
footer .center .footer-menu ul li a:hover {
	color: #e7107d;
}

footer .center .legal {
	display: flex;
}

footer .center .address {
	color: #A09695;
	margin-right: 20px;
	font-family: Inter;
	font-size: 12px;
	letter-spacing: 0;
	line-height: 16.8px;
	text-align: center;
	position: absolute;
	left: -9999em;
}
footer .center .address span {
	padding: 0 2px;
}

footer .center .footer-logo {
	margin: 0 auto;
	padding-bottom: 32px;
	width: 180px;

	text-indent: -9999px;
	background: top left no-repeat;
	background-size: 100% auto;
		background-image: url(/typo3conf/themes/dru2024/img/notar-dr-urban-logo.svg);
	display: none;
}

footer .center .address p {
	padding: 6px 0;
}
footer .center .address p.phone {
	display: none;
}
footer .center .address a {
	text-decoration: none;
	color: inherit;
}

footer .deco {
	bottom: -280px;
}
footer .deco.d1 {
	left: calc(50% - 400px);
	background-color: #F6EEE6;
	transform: scale(35) rotate(-45deg) skew(12deg,12deg);
}
footer .deco.d2 {
	left: calc(50%);
	background-color: #F6EEE6;
	transform: scale(40) rotate(-45deg) skew(12deg,12deg);
;
}
footer .deco.d3 {
	left: calc(50% + 400px);
	background-color: #F6EEE6;
	transform: scale(48) rotate(-45deg) skew(12deg,12deg);
}
@media (max-width: 768px) {
	footer {
		height: 100px;
		padding-top: 0;
	}
	footer .center {
		width: 100%;
		padding: 2rem 0;
	}
	footer .center > div {
		padding: .33rem 0;
	}
}
@media (max-width: 575px) {
	footer .center .footer-menu,
	footer .center .legal {
		justify-content: center;
	}
	footer .center {
		padding: .5rem 0;
		flex-flow: column-reverse;
	}

}


#mtness{}




header {

	position: fixed;
	top: 0;
	width: 100%;
	height: 105px;
	/* background: #333; */
	z-index: 123;
	transition: background-color .2s ease-in-out;
	/*background-image: linear-gradient(to bottom, #FFFFFF44 0%, #FFFFFF44 40%, #FFFFFF00 100%);*/
}
/*
.start header {
	position: absolute;
	height: auto;
	min-height: 105px;
}
*/
.sticky header {
	position: fixed;
	height: 105px;
	background-color: #fff;
	/*border-bottom: 1px solid #F6EEE6;*/
}
@media (max-width: 768px) {
	header,
	.sticky header {
		height: 80px;
		width: 100vw;
	}
}

header .center {
}

#logo {
	position: absolute;
	top: 20px;
	left: 94px;
	z-index: 123;
}
@media (max-width: 1100px) {
	#logo {
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		text-align: center;
		padding: 16px 0;
	}
	.menu-open #logo {
		background-color: #fff;
	}
}



@media (min-width: 1101px) {
}


#logo a {
	display: block;
	overflow: hidden;
	width: 200px;
	height: 60px;
	text-indent: -9999px;
	background:  top 0 left no-repeat;
	background-size: 100% auto;
	background-image: url(/typo3conf/themes/dru2024/img/notar-dr-urban-logo-white.svg);
	/* transition: all .2s ease-in-out; */
}
.start #logo a,
.glossar:not(.menu-open) #logo a,
.l1:not(.menu-open) #logo a,
.sticky:not(.menu-open) #logo a {
	background-image: url(/typo3conf/themes/dru2024/img/notar-dr-urban-logo.svg);
}
@media (max-width: 575px) {
	#logo a {
		width: 150px;
		height: 45px;
		margin: 0 auto;
	}
	.start #logo a {
		background-image: url(/typo3conf/themes/dru2024/img/notar-dr-urban-logo-white.svg);
	}
	.menu-open #logo a {
		background-image: url(/typo3conf/themes/dru2024/img/notar-dr-urban-logo.svg);
	}
}

@media (min-width: 576px) and (max-width: 768px) {
	#logo a {
		margin: 0 auto;
	}
	.start #logo a {
		background-image: url(/typo3conf/themes/dru2024/img/notar-dr-urban-logo-white.svg);
	}
	.menu-open #logo a {
		background-image: url(/typo3conf/themes/dru2024/img/notar-dr-urban-logo.svg);
	}
}

@media (min-width: 769px) and (max-width: 1100px) {
	#logo a {
		margin: 0 auto;
	}
	.menu-open #logo a {
		background-image: url(/typo3conf/themes/dru2024/img/notar-dr-urban-logo.svg);
	}
}


#dl-menu {
	display: none;
}




#langswitch {
	position: absolute;
	top: -42px;
	right: -120px;
}
#langswitch a {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 0 0 2px 2px;
	text-transform: lowercase;
	background-color: #FAF6F2;
	color: #4A4547;
	font-size: 12px;
	letter-spacing: 0;
	text-decoration: none;
}
#langswitch a:hover {
	background-color: #e7107d;
	color: #FAF6F2;

}

@media (max-width: 1100px) {
	#langswitch {
		visibility: hidden;
		z-index: 123;
		top: 82px;
		right: unset;
	}
	#langswitch a {
		background-color: #eae6e2;
	}
	.menu-open #langswitch {
		visibility: visible;
		display: block;
		width: 100vw;
		text-align: center;
	}
}

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

@media (max-width: 1100px) {
	#dl-layer {
		display: block;
	}
}
@media (min-width: 1101px) {
	#dl-layer {
		display: none;
	}
}

#dl-layer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 123456;
	float: none;
	width: 100%;
	height:auto; /* iOS position:fixed; elements fix (not 100%) */
	transition: all .2s ease-in-out;
}
/*

.menu-open #dl-layer {
	position: fixed;
	min-height:100%;
	background-color: rgba(255, 255, 255, 0.95);
}
*/


#dl-menu {
	position: absolute;
	top: 20px;
	right: 20px;
	height: 32px;
	width: 32px;
	background-color: #fff;
	border-radius: 50%;
	z-index: 23456;
	box-shadow: 0 0 2px rgba(0,0,0,0.2);

	cursor: pointer;
	margin: 0;
	/* background: #000; */
	transition: background 0.35s;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	color: #000;
}
#dl-layer button {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	width: 12px;
	height: 12px;
	margin: 0 auto;
	border: none;
	cursor: pointer;
	background: currentColor;
	color: inherit;
	font-size: 0;
	transition: 0.35s;
	outline: 0;
}
#dl-layer button {
	background: transparent;
	border-top: 2px solid;
	border-bottom: 2px solid;
	border-color: #181818;
	outline: 0;
}
#dl-layer button:focus { outline: 0; }
#dl-layer button:before,
#dl-layer button:after {
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	width: 100%;
	height: 2px;
	background: #181818;
	content: "";
	transition: transform 0.35s;
}

#dl-layer button:before,
#dl-layer button:after {
	top: 50%;
	transform: translate(-50%, -50%);
}
#dl-layer button.active {
	border-color: transparent;
}
#dl-layer button.active:before {
	transform: translate(-50%, -50%) rotate(45deg);
	background: #181818;
}
#dl-layer button.active:after {
	transform: translate(-50%, -50%) rotate(-45deg);
	background: #181818;
}

/* menu layer */
@media (max-width: 1100px) {
	/* menu overflow magic */
	html.menu-open {
		overflow: hidden;
	}
	body.menu-open {
		/*overflow: scroll;*/
		height: 100%;
	}

	.menu-open #nav,
	.sticky.menu-open #nav {
		position: fixed;
		top: 0;
		left: 0;
		overflow-x: hidden;
		overflow-y: auto;
		visibility: visible;
		opacity: 1;
	}

	header #nav {
		border: 0;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100vw;
		padding-top: 0;
		/*background-color: rgba(29,82,135,.95);*/
		background-color: rgba(255, 255, 255, 0.95);
		visibility: hidden;
		opacity: 0;
		transition: all .23s ease-out;
		transition-delay: 0s;
	}
	header #nav.active {
		visibility: visible;
		opacity: 1;
		transition: all .23s ease-in;
	}


}

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

@media screen and (max-width: 1100px) {
	header nav {
		position: absolute;
		z-index: 123;
	}
	.start header nav #menu {
		padding-right: 0;
	}
	header nav #menu {
		padding-top: 40px;
	}

}
@media screen and (min-width: 1101px) {
	header nav {
		position: absolute;
		top: 42px;
		right: 140px;
		/* background: #555; */
	}
}

@media (max-width: 1100px) {
	.start header nav {
		width: 100%;
	}
	.start header nav #menu {
		padding-right: 0;
	}
}
.start.sticky header nav {
	transform: unset !important;
}

@media (min-width: 1101px) {
	nav ul { list-style: none; }
	nav li { display: inline; }
}

nav * :focus { outline: 0; }


/* ------------------------------------------------------------------------- */ /* main navigation: son of suckerfish dropdowns */

nav ul {
	list-style: none;
	/* background: #111; */
	padding: 0;
	border: 0;
	margin: 0 20px 0 0;
}

nav a {
	display: block;
	padding: 0 16px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.125em;
	line-height: 17px;
	transition: color .1s ease-in-out;
}
nav ul li a.selected {
	/*color: #e7107d;*/
}
nav ul li a.selected span {
	padding-bottom: 4px;
	border-bottom: 1px solid #fff;
	transition: border-color .1s ease-in-out;
}

#nav ul li a.selected:hover span,
#nav ul li:hover a.selected span {
	border-color: #e7107d;
}


.start nav li a,
.glossar nav li a,
.l1 nav li a,
.sticky nav li a {
	color: inherit;
}

.start nav ul li a.selected span,
.glossar nav ul li a.selected span,
.l1 nav ul li a.selected span,
.sticky nav ul li a.selected span {
	border-color: #000;
}


nav li {
	float: left;
	padding: 0;
}

nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 12em;
	font-weight: normal;
	border-width: 1px;
	margin: 0;
	padding: 0;

}

nav li li {
	margin: 0;
	padding-right: 0em;
	width: 12em;
}

nav li ul ul {
	margin: 0;
	position: relative;
	left: 0;
}

nav li:hover ul, nav li li:hover ul, nav li li li:hover ul, nav li.sfhover ul, nav li li.sfhover ul, nav li li li.sfhover ul {
	left: auto;
}

nav li:hover, nav li.sfhover {
	/* background: #2b2b2b; */
}
nav > ul > li:hover > a, nav li a:hover, nav li.sfhover a {
	color: #e7107d;
}

@media screen and (max-width: 1100px) {
	nav ul {
		margin-top: 80px;
	}
	.sticky nav ul#menu {
		margin-top: 160px;
	}

	/* nav */
	header #nav {
		visibility: hidden;
		opacity: 0;
		transition: all .125s ease-in-out;
	}
	.sticky header #nav {
		padding-top: 0;
	}
	header #nav.active {
		opacity: 1;
		visibility: visible;
		border: 0;
		transform: translate(0,0) !important;
	}

	.dd #nav > ul {
		margin-left: 0;
	}
	#nav > ul > li {
		display: block;
		float: left;
		overflow: hidden;
	}
	#nav ul {
		margin-left: 0;
		height: unset;
		width: 100%;
		/* background-color: #fff; */
		box-shadow: 0 0 4px rgba(88,88,90,.1);
		list-style: none;
	}
	#nav ul li {
		float: none;
		padding: 0;
		text-transform: none;
		text-align: left;
		/* border-bottom: 1px solid #e6e6e6; */
		line-height: unset;
		display: inline;
	}
	header #nav ul li:last-child {
		border-bottom: 0;
	}

	#nav ul li a {
		display: inline-block;
		color: inherit;
		font-family: Inter;
		font-size:   14px;
		font-weight: 600;
		line-height: 60px;
		padding: 0 0 0 20px;
		/* border-top: 1px solid #dcdcdc; */
		width: 100%;
		width: calc( 100% - 60px );
		text-transform: uppercase;
		text-decoration: none;
	}
	#nav > ul > li > a > span {
		padding-left: 20px;
	}

	#nav ul ul {
		position: relative;
		top: -6px;
		max-height: 0;
		overflow: hidden;
		transition: all .5s ease-in-out;
		left: auto;
		opacity: 1;
		padding: 0 0 0 20px;
		box-shadow: unset;
	}

	#nav ul ul li a {
		display: block;
		padding: 4px 10px;
		/* border-bottom: 1px solid #efefef; */
		text-transform: unset;
		text-align: center;
		font-weight: 500;
		line-height: 30px;
		min-height:  30px;
		letter-spacing: 0;
	}

	#nav ul ul ul {
		top: 0;
		padding: 0 0 20px;
		max-height: unset;
		max-width: 90vw;
		display: flex;
		gap: .5rem;
		justify-content: center;
		flex-flow: wrap;
	}
	#nav ul ul ul li {
		width: auto;
	}


	#nav ul ul ul li a {
		width: auto;
		display: inline-block;

		padding: 12px 24px;
		background-color: #F6EEE6;
		border-radius: 2px;
		/*color: #e7107d;*/
		font-family: Inter;
		font-size: 16px;
		line-height: unset;
		min-height: unset;
		letter-spacing: 0;
		text-align: center;
		text-decoration: none;
		text-transform: initial;
		transition: background-color .2s ease-in-out, color .2s ease-in-out;
	}
	#nav ul ul ul li a:hover {
		background-color: #e7107d;
		color: #F6EEE6;
	}

	#nav ul li span.trigger {
		display: inline-block;
		width:  40px;
		height: 40px;
		cursor: pointer;
		background-size: 50%;
		background-position: center;
		position: relative;
		top:   14px;
		right: 16px;
		transition: all .125s ease-in-out;
		padding: 0;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e7107d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		transform: rotate(-90deg);
	}
	#nav ul li span.trigger.active {
		transform: rotate(0);
	}

	#nav ul li span.trigger.active + ul {
		display: block;
		max-height: 100vh;
	}

	#nav ul li.icon-arrow-small_solid_invers,
	#nav ul li.icon-arrow-small_solid {
		background: none;
	}
}

@media screen and (min-width: 1101px) {
	#nav > ul > li > a {
		padding-bottom: 46px;
	}

	nav li ul a {
		text-align: left;
		padding: 12px 24px;
		color: #1E1B1B;
		font-family: Cala;
		font-size: 22px;
		font-weight: 300;
		letter-spacing: 0;
		line-height: 30.8px;
		text-transform: initial;
	}

	nav > ul > li > ul {
		top: 30px;
		background: rgba(255,255,255,0.95);
		width: 40vw;
		min-width: 740px;
		padding-top: 8px;
		padding-bottom: 24px;
		box-shadow: 8px 12px 256px rgba(0,0,0,0.2);
		transition: all .25s ease-in-out;
	}
	nav > ul > li:nth-child(3) > ul {
		max-width: 12vw;
	}


	nav > ul > li > ul > li {
		float: none;
	}

	nav > ul > li > ul > li > a {
		padding: 12px 24px;
	}

	nav > ul > li > ul > li > ul  {
		/*background: blue;*/
		width: unset;
		padding: 0 24px
	}

	nav li ul ul li {
		float: none;
		display: inline;
	}

	nav li ul.dl-submenu ul li a {
		width: auto;
		display: inline-block;

		margin-right: 12px;
		margin-bottom: 12px;
		padding: 12px 24px;
		background-color: #F6EEE6;
		border-radius: 2px;
		/*color: #e7107d;*/
		font-family: Inter;
		font-size: 16px;
		letter-spacing: 0;
		line-height: 20px;
		text-align: center;
		text-decoration: none;
		text-transform: initial;
		transition: background-color .2s ease-in-out, color .2s ease-in-out;
	}
	nav li ul.dl-submenu ul li a:hover {
		background-color: #e7107d;
		color: #F6EEE6;
	}



}


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

dialog::backdrop {
	backdrop-filter: blur(25px);
}
dialog {
	display: grid;
	margin: auto;
	padding: 2rem;
	border: 0;
	position: fixed;
	inset: 0;
	box-shadow: #00000028 2px 2px 5px 0;
	z-index: 12345;
}
dialog:not([open]) {
	pointer-events: none;
	opacity: 0;
}
html:has(dialog[open]) {
	overflow: hidden;
}
dialog > div {
	display: flex;
	flex-flow: column;
	gap: 1rem;
}
dialog > button {
	position: absolute;
	top: .5rem;
	right: .5rem;
}

.close {
	overflow: hidden;
	border: none;
	padding: 0;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: transparent;
	color: #000;
	font: inherit;
	text-indent: 100%;
	cursor: pointer;
}
.close:focus {
	outline: solid 0 transparent;
	box-shadow: 0 0 0 2px #8ed0f9;
}
.close:hover {
	color: #e7107d;
	background: #00000008;
}
.close:before, .close:after {
	position: absolute;
	top: 15%;
	left: calc(50% - .0625em);
	width: 0.125em;
	height: 70%;
	border-radius: 0.125em;
	transform: rotate(45deg);
	background: currentcolor;
	content: "";
}
.close:after {
	transform: rotate(-45deg);
}


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



#test {
	box-sizing: border-box;
	min-height: 40vw;
	padding: 30vw 0 5vw;
	position: relative;
	-webkit-transform-style: inherit;
	transform-style: inherit;
	width: 100vw;
}
#test, #test:before {
	background: 50% 50% / cover;
}
#test::before {
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	background-color: #8a8;
	background-image: var(--bgImage);
	background-size: cover;
	-webkit-transform-origin: center center 0;
	-webkit-transform: translateZ(-1px) scale(2);
	transform-origin: center center 0;
	transform: translateZ(-1px) scale(2);
	z-index: -1;
	min-height: 100vh;
}
#test * {
	font-weight: normal;
	letter-spacing: 0.2em;
	text-align: center;
	margin: 0;
	padding: 1em 0;
}
#test p {
	background-color: hsla(0, 0%, 100%,0.1);
}