@charset "utf-8";


/*** Reset */

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
fieldset,img{
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
	font-weight:300;
}
ol,ul{
	list-style:none;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:300;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}
a{
	text-decoration:none;
}
a:active,a:focus{
	outline:none;
} 
header,footer,aside,nav,article,figure,figcaption{
	display:block;
	margin:0;
	padding:0;
}
*,*::before,*::after{
	box-sizing:border-box;
}


/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype and/or its suppliers. You may not attempt to copy, install,
redistribute, convert, modify or reverse engineer this font software. Please contact Monotype
with any questions regarding Web Fonts:	http://www.linotype.com
*/

@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=dfc5b484-f246-46c6-80e2-a60cc88a640e&fontids=724815,724839");
@font-face{
	font-family:"Frutiger Light";
	font-display: auto;
	src:	url("../fonts/724815/99f761bf-9f30-4bdd-b284-ee7038dc52c9.eot?#iefix");
	src:	url("../fonts/724815/99f761bf-9f30-4bdd-b284-ee7038dc52c9.eot?#iefix") format("eot"),
				url("../fonts/724815/59d9a83f-4045-4d43-af46-655f845461ee.woff") format("woff"),
				url("../fonts/724815/f901b503-9104-414a-a856-af9bcc802b5c.ttf") format("truetype"),
				url("../fonts/724815/e4d07d96-8993-47b9-9f1d-1e228bf1c529.svg#e4d07d96-8993-47b9-9f1d-1e228bf1c529") format("svg");
}
@font-face{
	font-family:"Frutiger Bold";
	font-display: auto;
	src:	url("../fonts/724839/4d38d09a-3017-4733-a624-366fb9a71388.eot?#iefix");
	src:	url("../fonts/724839/4d38d09a-3017-4733-a624-366fb9a71388.eot?#iefix") format("eot"),
				url("../fonts/724839/3c514636-142f-43f9-983f-76110a86b424.woff") format("woff"),
				url("../fonts/724839/f147a146-bb13-4102-a482-bbad38d9fcc0.ttf") format("truetype"),
				url("../fonts/724839/10c3886a-7856-45f7-951d-24230bc1491a.svg#10c3886a-7856-45f7-951d-24230bc1491a") format("svg");
}


/*** Page */

:root{
	font-size:10px;
	
	--grau-1:#f5f5f5;
	--grau-2:#eeeeee;
	--grau-3:#fafafa;
	--grau-4:#cccccc;
	--grau-5:#999999;
	--schwarz:#000000;
	--weiss:#ffffff;
	--blau:#14B1E7;
	--blau-2:#d9f2fb;
	--blau-3:#edf9fd;

	--content-padding:5rem;
	--projekte-padding:5rem;
	--header-height:11rem;
}
html,
body,
#page{
	height:100.1%;
	-ms-text-size-adjust:none;
}
body{
	background-color:var(--grau-1);
	color:var(--schwarz);
	font-family:'Frutiger Light',sans-serif;
	font-size:1.8rem;
	line-height:1.4;
	font-weight:300;
}
::selection
{
	color:var(--weiss);
	background-color:var(--schwarz);
}
::-moz-selection
{
	color:var(--weiss);
	background-color:var(--schwarz);
}
a{
	color:var(--schwarz);
}
body{
	background-color:var(--grau-1);
}
main{
	max-width:150rem;
	margin:0 auto;
	position:relative;
	background-color:var(--weiss);
}
main.open > *:not(header){
	animation-duration:4s;
	animation-name:blur;
	animation-delay:1s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes blur{
	0%{
		filter:blur(0);
	}
	100%{
		filter:blur(10px);
	}
}


/*** Loader */

.loader{
	background-color:var(--weiss);
	position:fixed;
	top:0;
	left:0;
	z-index:9999;
	width:100%;
	height:100%;
	opacity:1;
}
.loader .spinner{
	width:6rem;
	height:6rem;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
.spinner div{
	box-sizing:border-box;
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	border:1px solid var(--schwarz);
	border-radius:50%;
	animation:lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color:var(--schwarz) transparent transparent transparent;
}
.spinner div:nth-child(1){
	animation-delay:-0.45s;
}
.spinner div:nth-child(2){
	animation-delay:-0.3s;
}
.spinner div:nth-child(3){
	animation-delay:-0.15s;
}
@keyframes lds-ring{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}
.old-browser{
	background-color:rgba(20,177,231,0.9);
	color:#ffffff;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:10000;
	text-align:center;
	padding-top:100px;
	font-family:arial;
}
.old-browser p{
	margin-bottom:40px;
}
.old-browser p strong{
	font-weight:700;
}
.old-browser p a{
	color:#ffffff;
	text-decoration:underline;
}
#turn-your-phone{
	display:none;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:var(--blau);
	z-index:20000;
	text-align:center;
	grid-template-columns:1fr;
	align-items:center;
	justify-items:center;
}
#turn-your-phone .icon{
	width:30rem;
	padding-top:6rem;
	padding-bottom:3rem;
	background-image:url('../images/turn-your-phone.svg');
	background-size:4rem 4rem;
	background-position:center 1rem;
	background-repeat:no-repeat;
	color:var(--weiss);
	font-size:2.2rem;
}
.video-container{
	position:relative;
	padding-bottom:56.25%;
	padding-top:3rem;
	height:0;
	overflow:hidden;
}
.video-container iframe,
.video-container object,
.video-container embed{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


/*** Header */

header{
	position:fixed;
	width:100%;
	max-width:150rem;
	height:var(--header-height);
	left:50%;
	top:0;
	transform:translateX(-50%);
	transition:all 0.5s ease-in-out;
	z-index:2;
	background-color:rgba(255,255,255,1);
}
header.down{
	transform:translateX(-50%) translate3d(0,-11rem,0);
}
header nav{
	display:none;
}
header h3{
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%);
}
header h3 a{
	display:block;
	width:24rem;
	height:11rem;
	background-image:url('../images/logo.svg');
	background-repeat:no-repeat;
	background-size:55%;
	background-position:right var(--content-padding) center;
}
header h3 a span{
	display:none;
}
header.open,
header.open > *{
	filter:blur(0px) !important;
	z-index:9989;
}


/*** keyvisual */

.keyvisual{
	position:relative;
	background-color:var(--grau-3);
	padding-top:var(--header-height);
}
body.projekte.uebersicht .keyvisual{
	padding-top:0;
}
body.datenschutz .keyvisual{
	padding-top:4rem;
}
.keyvisual li{
	width:100%;
	height:65vh;
	min-height:70rem;
	max-height:85rem;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
	display:grid;
	justify-content:center;
	align-items:center;
}
body.projekte .keyvisual li{
	background-position:center center;
}
.keyvisual li .container{
	text-align:center;
	color:#fff;
}
.keyvisual li .container h2{
	font-size:5vw;
}
.keyvisual li .container h3{
	font-size:3vw;
}


/*** Content */

#content{
	padding:9rem var(--content-padding);
	text-align:center;
	margin-bottom:10rem;
}
p{
	margin-bottom:1.5rem;
}
p.teaser{
	font-size:2.4rem;
}
h1{
	font-size:5rem;
	margin-bottom:1rem;
}
h2{
	font-size:4rem;
	margin-bottom:3rem;
}
.button{
	display:inline-block;
	border-radius:1.5rem;
	border:1px solid var(--blau);
	padding:0.75rem 2rem;
	color:var(--blau);
	transition:all 0.2s ease-in;
}


/*** Grid */

.grid{
	display:grid;
	grid-gap:1rem;
	margin-bottom:8rem;
}
.grid.grid-2{
	grid-template-columns:1fr 1fr;
}
.grid.grid-3{
	grid-template-columns:1fr 1fr 1fr;
}


/*** Galerie */

.galerie{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:1rem;
	padding-top:4rem;
}
.galerie > *{
	position:relative;
}
.galerie > *.portrait{
	grid-row:span 2;
}
.galerie > *.landscape{
	grid-column:span 2;
}
.galerie > * > img{
	object-fit:cover;
	height:100%;
	width:100%;
	display:block;
}
.galerie > * > figcaption{
	position:absolute;
	left:0;
	bottom:0;
	padding:1rem;
	background-color:var(--grau-1);
}


/*** Start */

body.start #content h2{
	font-size:3rem;
	margin-bottom:8rem;
}
body.start #content p a{
	font-size:3rem;
}


/*** Agentur */

section.agentur{
	margin-bottom:8rem;
}
section.agentur p{
	font-size:2.6rem;
	padding:0 20rem;
}

section.team{
	border-top:1px solid var(--grau-2);
	padding:8rem 0;
}

section.impressionen{
	border-top:1px solid var(--grau-2);
	padding:8rem 0;
}

section.positionierung{
	border-top:1px solid var(--grau-2);
	padding:8rem 0;
}
section.positionierung p{
	font-size:2.6rem;
	padding:0 14rem;
	margin-bottom:3rem;
}
section.positionierung p:last-child{
	padding-top:4rem;
}

/*** Interview */

section.interview h1{
	margin-bottom:8rem;
}
section.interview h4{
	font-size:2.2rem;
	margin:0 25rem;
	color:var(--grau-5);
	text-align:left;
}
section.interview p{
	font-size:2.6rem;
	padding:0 25rem;
	margin-bottom:5rem;
	text-align:left;
}


/*** Kunden */

section.kunden{
	border-top:1px solid var(--grau-2);
	padding:8rem 0;
}
section.kunden ul{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	grid-gap:1rem;
}
section.kunden ul li{
	background-color:var(--grau-3);
	padding:2rem;
}
section.kunden ul li img{
	display:block;
	width:100%;
	height:auto;
}


/*** Leistungen */

section.leistungen.grid .col{
	background-color:var(--grau-1);
	padding:8rem 4rem;
}
section.leistungen.grid .col figure{
	display:inline-block;
	width:8rem;
	margin-bottom:3rem;
}
section.leistungen.grid .col h3{
	font-size:3rem;
}
section.leistungen.grid .col h4{
	font-size:2rem;
	margin-bottom:3rem;
	color:var(--grau-5);
}
section.leistungen.grid .col ul li{
	padding:1rem 0;
	border-bottom:1px solid var(--weiss);
}
section.leistungen.grid .col ul li:last-child{
	padding:1rem 0 0 0;
	border-bottom:none;
}
section.leistungen > h3{
	margin-bottom:4rem;
	font-size:2.4rem;
	padding:0 24rem;
}


/*** Leistungsspektrum */

section.leistungsspektrum{
	padding:8rem 0;
}
section.leistungsspektrum h2{
	margin-bottom:3rem;
}
section.leistungsspektrum h3{
	margin-bottom:5rem;
	padding:0 20rem;
}
section.leistungsspektrum figure{
	padding:5rem;
}
section.leistungsspektrum figure{
	background-color:var(--grau-1);
}


/*** Projekte */

section.projekte h1{
	margin-bottom:5rem;
	padding-top:5rem;
}
section.projekte ul{
	display:grid;
	grid-gap:1rem;
	grid-template-columns:repeat(3, 1fr);
	margin-bottom:8rem;
}
section.projekte ul li{
	background-color:var(--grau-1);
}
body.start section.projekte ul li:nth-child(4){
	display:none;
}
section.projekte ul li a{
	display:block;
	background-color:var(--grau-1);
	text-align:left;
	transition:all 0.3s ease-in;
	box-shadow:none;
	height:100%;
	position:relative;
}
section.projekte ul li a::after{
	content:'';
	position:absolute;
	width:1rem;
	height:1rem;
	right:2rem;
	bottom:2rem;
	border:solid var(--blau);
	border-width:0 0.2rem 0.2rem 0;
	transition:all 0.3s ease-in;
	transform:rotate(-45deg);
}
section.projekte ul li a figure img{
	display:block;
	width:100%;
	height:auto;
}
section.projekte ul li a h3{
	padding:var(--projekte-padding) var(--projekte-padding) 0 var(--projekte-padding);
	font-size:2.8rem;
	line-height:1.2;
}
section.projekte ul li a h4{
	padding:0 var(--projekte-padding) 2rem var(--projekte-padding);
	font-size:1.6rem;
	font-family:'Frutiger Bold';
}
section.projekte ul li a p{
	padding:0 var(--projekte-padding) var(--projekte-padding) var(--projekte-padding);
	margin:0;
	color:#666;
}


/*** Projekt */

section.projekt-infos{
	text-align:left;
	grid-gap:2rem;
}
section.projekt-infos h1{
	margin:0 0 3rem 0;
	padding:0;
	line-height:1.2;
}
section.projekt-infos h2{
	margin-bottom:0.5rem;
	color:var(--grau-5);
}
section.projekt-infos ul{
	display:flex;
	flex-wrap:wrap;
}
section.projekt-infos ul li{
	margin:0 1rem 1rem 0;
	padding:0.5rem 1rem;
	background-color:var(--grau-1);
	border-radius:1rem;
}
section.projekt-infos p{
	font-size:2.2rem;
}
section.projekt-infos div:last-child{
	align-self:end;
}
section.projekt .galerie div.landscape{
	padding:6rem;
	background-color:var(--grau-1);
	font-size:2.6rem;
}
section.projekt .galerie div.landscape.video{
	padding:0;
}
section.projekt .galerie figure figcaption{
	box-shadow:0.2rem -0.2rem 0.2rem rgba(150,150,150,0.1);
}
section.projekt nav{
	padding-top:8rem;
}
section.projekt nav ul{
	display:flex;
	justify-content:center;
}
section.projekt nav ul li{
	margin:0 1rem;
}
section.projekt nav ul li a{
	display:block;
	width:5rem;
	height:5rem;
	background-color:#f5f5f5;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	position:relative;
}
section.projekt nav ul li a.projekt-zurueck{
	background-image:url('../images/projekt-zurueck.svg');
}
section.projekt nav ul li a.projekt-uebersicht{
	background-image:url('../images/projekt-uebersicht.svg');
}
section.projekt nav ul li a.projekt-naechstes{
	background-image:url('../images/projekt-naechstes.svg');
}
section.projekt nav ul li a span{
	display:none;
	position:absolute;
	left:50%;
	top:-5rem;
	background-color:var(--schwarz);
	color:var(--weiss);
	transform:translateX(-50%);
	white-space:nowrap;
	padding:0.5rem 1rem;
	border-radius:0.5rem;
	z-index:1;
}
section.projekt nav ul li a span::after{
	content:'';
	position:absolute;
	left:50%;
	bottom:-2rem;
	width:1px;
	height:2rem;
	transform:translateX(-50%);
	background-color:var(--schwarz);
}
section.projekt nav ul li a.projekt-zurueck span{
	left:auto;
	right:0;
	transform:translateX(0);
}
section.projekt nav ul li a.projekt-zurueck span::after{
	left:auto;
	right:2.5rem;
	transform:translateX(0);
}
section.projekt nav ul li a.projekt-naechstes span{
	left:0;
	transform:translateX(0);
}
section.projekt nav ul li a.projekt-naechstes span::after{
	left:2.5rem;
	transform:translateX(0);
}


/*** Karriere */

section.jobs-intro{
	margin-bottom:4rem;
}
section.jobs-intro p{
	padding-left:10rem;
	padding-right:10rem;
}
section.jobs{
	display:grid;
	grid-gap:2rem;
	grid-template-columns:1fr 1fr;
	margin-bottom:5rem;
}
p.block-234{
	font-size:2.4rem;
	padding-left:13rem;
	padding-right:13rem;
	margin-bottom:5rem;
}

section.job{
	background-color:var(--grau-1);
	padding:3rem;
	border-top:1rem solid var(--blau-2);
}
section.job h2{
	font-size:3rem;
}
h4.block-247{
	font-size:2rem;
	margin-bottom:1rem;
}
p.notice{
	color:var(--grau-5);
}


/*** Kontakt */

section.anschrift{
	padding:6rem 0;
	font-size:2.6rem;
}
section.anschrift h1{
	margin-bottom:4rem;
}
section.anschrift p{
	margin-bottom:2rem;
}
section.anschrift p a{
	border-bottom:0.1rem solid var(--schwarz);
}
section.anfahrt p{
	padding:5rem;
	background-color:var(--grau-1);
}
section.anfahrt p a{
	font-size:2rem;
	padding:0.5rem 1.5rem;
	border-radius:1rem;
	border:0.1rem solid var(--blau);
	color:var(--blau);
	display:inline-block;
}
section.anfahrt figure{
	grid-column:span 2;
}
section.anfahrt figure img{
	width:100%;
	height:auto;
	display:block;
}


section.impressum{
	padding-left:20%;
	padding-right:20%;
	text-align:left;
}
section.impressum h2{
	margin-bottom:0;
}
section.impressum h3{
	font-size:2.5rem;
}
section.impressum h4{
	font-size:2.1rem;
}
section.impressum ul{
	list-style-type:disc;
	padding-left:2rem;
	margin-bottom:2rem;
}
section.impressum p a{
	text-decoration:underline;
}


/*** Footer */

footer{
	border-top:0.1rem solid var(--grau-4);
	padding:1rem 0 10rem 0;
	margin:0 var(--content-padding) 0;
}
footer nav ul{
	display:grid;
	grid-template-columns:1fr auto auto auto;
	grid-column-gap:2rem;
}
footer nav ul li{
	color:var(--grau-5);
}
footer nav ul li a{
	color:var(--grau-5);
}


/*** Mobile Menu */

#mobile-menu{
	position:absolute;
	left:var(--content-padding);
	top:50%;
	transition:all 0.4s ease-in;
	transform:translateY(-50%);
	z-index:10;
}
#mobile-menu a{
	display:block;
	width:3rem;
	height:3rem;
	position:relative;
	border:0;
}
#mobile-menu a span{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	transform-origin:0 0;
	background-color:var(--schwarz);
	width:calc(3rem * 0.8);
	height:calc(3rem * 0.06);
	height:0;
	border-bottom:1px solid var(--schwarz);
	transition:all 0.5s ease-in-out;
}
#mobile-menu a span:nth-of-type(1){
	top:20%;
}
#mobile-menu a span:nth-of-type(2){
	top:50%;
}
#mobile-menu a span:nth-of-type(3){
	top:80%;
}
#mobile-menu.open a span:nth-of-type(1){
	top:50%;
	transform:rotate(45deg) translate(-50%,-50%);
}
#mobile-menu.open a span:nth-of-type(2){
	opacity:0;
	transition:all 0.1s ease-in-out;
}
#mobile-menu.open a span:nth-of-type(3){
	top:50%;
	transform:rotate(-45deg) translate(-50%,-50%);
}
#mobile-menu-plain{
	width:100%;
	height:11rem;
	background-color:var(--weiss);
	position:fixed;
	top:0;
	left:-100%;
	z-index:5;
	display:flex;
	align-items:center;
	transition:left 0.7s ease-in-out;
}
#mobile-menu-content{
	width:100%;
	height:100vh;
	background-color:rgba(0,0,0,0.8);
	position:fixed;
	top:0;
	left:-100%;
	z-index:4;
	display:flex;
	align-items:center;
	transition:left 0.7s ease-in-out;
}
#mobile-menu-content.open,
#mobile-menu-plain.open{
	left:0;
}
#mobile-menu-content ul{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	margin-top:var(--header-height);
}
#mobile-menu-content ul li{
	flex:0 0 100%;
	transition:all 0.5s ease-in-out;
}
#mobile-menu-content ul li.page-2,
#mobile-menu-content ul li.page-3{
	display:none;
}
#mobile-menu-content ul li a{
	display:block;
	padding:0;
	font-size:5rem;
	padding:0.5rem 0;
	text-align:center;
	color:var(--weiss);
	position:relative;
}
#mobile-menu-content ul li ul{
	display:none;
}


@media screen and (min-width:768px)
{
	.keyvisual::before{
		content:'';
		position:absolute;
		left:50%;
		bottom:4rem;
		width:2.4rem;
		height:4rem;
		border-radius:9px;
		border:2px solid var(--weiss);
		transform:translateX(-50%);
		z-index:2;
	}
	.keyvisual::after{
		content:'';
		position:absolute;
		left:50%;
		bottom:7rem;
		width:0.2rem;
		height:0.6rem;
		background-color:var(--weiss);
		transform:translate(-50%,0);
		z-index:2;
		border-radius:0.3rem;
		animation-duration:1s;
		animation-fill-mode:both;
		animation-iteration-count:infinite;
		animation-name:scroll;
	}
	@keyframes scroll{
		0%{
			opacity:1;
		}
		100%{
			opacity:0;
			transform:translate(-50%,1rem);
		}
	}
	section.projekte ul{
		display:grid;
		grid-gap:1rem;
		grid-template-columns:repeat(2, 1fr);
		margin-bottom:8rem;
	}
}


@media screen and (min-width:1024px)
{
	.button:hover{
		border:1px solid var(--blau);
		background-color:var(--blau);
		color:var(--weiss);
	}
	section.projekte ul{
		grid-template-columns:repeat(3, 1fr);
	}
	section.projekte ul li a:hover{
		opacity:0.7;
	}
	section.projekte ul li a:hover::after{
		right:1rem;
	}
	section.projekte ul li a h3{
		hyphens:auto;
	}
	section.projekte ul li a p{
		hyphens:auto;
	}
	section.projekt nav ul li a:hover span{
		display:block;
	}
	footer nav ul li a:hover{
		border-bottom:1px solid var(--grau-5);
	}
}


@media screen and (min-width:1024px) and (max-width:1380px){
	:root{
		--projekte-padding:2.5rem;
	}
	section.projekte ul li a h3{
		font-size:2.2rem;
	}
	section.projekte ul li a p{
		font-size:1.5rem;
	}
	#mobile-menu-content ul li a{
		font-size:4rem;
	}
}


@media screen and (max-width:1023px){
	body.start section.projekte ul li:nth-child(4){
		display:block;
	}
}

@media screen and (min-width:769px) and (max-width:1024px){
	section.leistungen > h3,
	section.leistungsspektrum h3{
		padding:0 10rem;
	}
}

@media only screen and (min-device-width:768px) and (max-device-width: 1024px) and (orientation:landscape){
	.keyvisual li{
		min-height:calc(100vh - var(--header-height));
	}
}

@media screen and (max-width:950px){
	section.leistungen.grid .col{
		padding: 8rem 2rem;
	}
}

/*@media screen and (max-width:768px){*/
@media screen and (max-width:900px){
	:root{
		font-size:8px;
		--content-padding:4rem;
	}
	.keyvisual li{
		height:50vh;
		min-height:0;
	}
	#content{
		padding:11rem var(--content-padding);
	}
	section.agentur p,
	section.positionierung p,
	section.leistungen > h3,
	section.leistungsspektrum h3{
		padding:0;
	}
	section.team .galerie{
		grid-template-columns:1fr;
	}
	section.kunden ul{
		display:grid;
		grid-template-columns:repeat(3, 1fr);
		grid-gap:1rem;
	}
	section.projekt-infos{
		margin-bottom:4rem;
	}
	section.projekt-infos.grid.grid-2{
		grid-template-columns:1fr;
	}
	section.leistungen .grid div{
		padding:8rem 3rem;
	}
}

@media screen and (max-device-width:767px) and (orientation:landscape){
	#turn-your-phone{
		display:grid;
	}
}

@media screen and (max-width:767px){
	:root{
		--projekte-padding:3rem;
	}
	section.projekte ul{
		grid-template-columns:1fr 1fr;
	}
	section.projekte ul li a h3{
		hyphens:auto;
	}
	section.projekte ul li a h4{
		hyphens:auto;
	}
	section.jobs-intro p{
		padding-left:0;
		padding-right:0;
	}
	section.jobs{
		grid-template-columns:1fr;
	}
	footer{
		margin:0;
	}
	footer nav ul{
		grid-template-columns:1fr;
		grid-column-gap:2rem;
		font-size:2rem;
	}
	footer nav ul li{
		text-align:center;
		margin:0;
		padding-left:0;
		padding-right:0;
	}
	footer nav ul li:first-child{
		padding:2rem var(--content-padding);
	}
	footer nav ul li:not(:first-child) a{
		text-align:center;
		padding:2rem 0;
		display:block;
		border-top:1px solid var(--grau-2);
	}
	footer nav ul li:last-child a{
		border-bottom:1px solid var(--grau-2);
	}
}

@media screen and (max-width:710px){
	section.leistungen.grid .col {
		padding: 8rem 2rem;
	}
	.grid.grid-3{
		grid-template-columns:1fr;
	}
}

@media screen and (max-width:470px){
	:root{
		font-size:8.5px;
		--content-padding:2rem;
		--header-height:10rem;
	}
	main.open > *:not(header){
		animation-name:none;
	}
	.keyvisual li{
		height:60vh;
	}
	.grid.grid-3{
		grid-template-columns:1fr;
	}
	.galerie{
		grid-gap:0.5rem;
	}
	header{
		border-bottom:1px solid var(--grau-2);
		height:var(--header-height);
	}
	header h3 a{
		width:24rem;
		height:var(--header-height);
	}
	#mobile-menu-plain{
		height:var(--header-height);
	}
	#mobile-menu-content ul li a{
		font-size:4rem;
	}
	#content{
		padding:8rem var(--content-padding) 2rem var(--content-padding);
		margin-bottom:5rem;
	}
	body.projekte.uebersicht #content{
		padding-top:var(--header-height);
	}
	h1{
		font-size:4rem;
	}
	h2{
		font-size:2.7rem;
	}
	body.start #content h2{
		font-size:2.6rem;
		hyphens:auto;
	}
	section.agentur p,
	section.positionierung p{
		font-size:2.3rem;
	}
	section.projekte ul{
		grid-template-columns:1fr;
	}
	section.projekte ul li a h4{
		padding-bottom:var(--projekte-padding);
	}
	section.projekte ul li a p{
		display:none;
	}
	section.projekt-infos h1{
		hyphens:auto;
		font-size:4rem;
	}
	section.projekt-infos h2{
		hyphens:auto;
		font-size:3rem;
		margin-bottom:0;
	}
	section.projekt-infos p{
		hyphens:auto;
	}
	section.projekt .galerie figure figcaption{
		display:none;
	}
	section.kunden ul{
		grid-template-columns:1fr 1fr;
		grid-gap:0.5rem;
	}
	section.kunden ul li{
		padding:1rem;
	}
	section.agentur p.block-9{
		hyphens:auto;
	}
	section.leistungen.grid .col h4{
		font-size:2.3rem;
	}
	section.leistungen.grid .col ul li{
		font-size:2rem;
	}
	section.anfahrt.grid.grid-2{
		grid-template-columns:1fr;
	}
	section.anfahrt figure{
		grid-column:1;
	}
	section.anfahrt p{
		margin:0;
	}
	section.impressum{
		padding-left:0;
		padding-right:0;
	}
	section.impressum h2{
		font-size:3rem;
	}
	body.datenschutz section.impressum h1{
		font-size:3.7rem;
	}
	footer{
		padding-top:0;
	}
}

@media screen and (max-width:320px){
	:root{
		font-size:7px;
		--content-padding:2rem;
	}
}