@charset "UTF-8";
/* CSS Document */

/*
@font-face {
	font-family: 'Haas Grotesk Display Web';
	src: url('NeueHaasGroteskDisplay-55Roman-Web.woff2') format('woff2'),
		 url('NeueHaasGroteskDisplay-55Roman-Web.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	}

.NeueHaasGroteskDisplay-55Roman-Web {
	font-family: 'Haas Grotesk Display Web';
	font-weight: 500;
	font-style: normal;
	}
*/
	
	
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


.logo-img{
	display:flex;
	align-items:center;
	gap:40px;
}

.startleft{
	flex:0 0 auto;
	padding: 70px 70px 66px 0px;
}

.startright{
	flex:1;
	font-size:32px;
	line-height:1.4;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
  font-family: "Josefin Sans", sans-serif;
	font-weight: 200	;
    font-size: 1em;
	letter-spacing: 0.04em;
}

/* Main Color ------------------------- */
.dividing-line { border: none; border-top-width: 1px; border-top-style: solid; width: 100%; margin: 15px 0 0 0; }
.cls-1 {  } /* Logo SVG, plus-thumb-select SVG */
.cls-2, .cls-3, .st0 { fill: none; stroke-miterlimit: 10; stroke-width: 1px; } /* Pfeil SVG, Map SVG */

a {
	text-decoration: none;
	border-bottom: none;
}
a:hover {
	text-decoration: none;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}
.thumbnail a, .thumbnail a:hover {
	text-decoration: none;
	border-bottom: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
	padding: 15px 20px 0 40px;
}


/* Header ------------------------- */

header nav, .footer-content, h3, h2.logo-kontakt  { font-size: 1.9em; }	
.footer-content  { font-size: 0.9em; }	
header nav, .footer-content, .line-box, section .logo-img, .copy-txt { 
	padding-right: 20px; 
}
header nav, .footer-content  {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header a, header a.logo-home, header a.logo-home h1, h2.logo-kontakt   { 
	display: inline-block;
	height: 1em;
	line-height: 0.9;
	font-weight: 200 !important;
	margin-left: 0px;
}

header a.logo-home h1.sub {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	overflow: hidden;
}
header h1 {
	font-size: 1em;
	margin: 0 0 0 0;
	letter-spacing: 0.05em;
}
header a.logo-home { 
	display: inline-block;
}
header .pfeil-box { 
	position: relative;
	width: 104px;
	height: 0.85em;
	padding: 0;
	margin: 0 0 0 0.5em;
	vertical-align: middle;
	display: inline-block;
}
header .pfeil { 
	position: absolute;
	top: 0;
	left: 0;
	width: 104px;
	height: 0.85em;
}

a {
	color: red !important;
}


/* Logo Title ------------------------- */

section .logo-img { 
	margin: 63px 0 0 0; 
}
section .logo-img svg {
	width: 100%;
	height: auto;
	margin-bottom: 3em;
}
h1, h2 { 
	font-size: 20px; 
}
h1 {
	line-height: 0.9;
	letter-spacing: -0.01em;
}
h2, .title-s {
	line-height: 1;
	letter-spacing: -0.01em;
}
h1, h2, h3 {
    font-weight: normal;
	margin-bottom: 20px;
}
h1 { margin: 0.82em 0 40px -12px; }
h2 { margin: 0.7em 0 0.12em -12px; }
h3 { margin-top: -20px; }

header h1, header nav, .footer-content, h3 {
	letter-spacing: 0.02em;
}
.title-s {
	display: none;
}
.copy-txt, .project-descr, .project-txt, .kontakt-txt, .size0, .sizeS, .sizeM, .sizeL, .sizeXL, .impressum-txt p {
	font-size: 1.4em;
	line-height: 1.3em;
	overflow: hidden;
}

.project-descr {
	  font-family: "Montserrat", sans-serif;
}


.impressum-txt p {
	overflow: visible;
}
.copy-txt p, .project-descr p, .project-txt p, .kontakt-txt p, .size0 p, .sizeS p, .sizeM p, .sizeL p, .sizeXL p {
	margin: 0 0 1em 0;
}
.copy-txt, .kontakt-txt { 
	margin: 1.3em 20px 0 0; 
}
.kontakt-txt {
	padding: 0;
	width: 100%;
}
.kontakt-1 {
	width: 40%;
	float: left;
	padding-right: 20px;
}
.kontakt-2 {
	position: relative;
 	width: 20%;
	float: left;
	padding-right: 20px;
}
.kontakt-map {
	width: 40%;
	padding: 5px 20px 0 0;
	float: left;
}
.kontakt-map svg {
	width: 100%;
	height: auto;
}
.location-marker {
	display: block;
	position: absolute;
	width: 0.85em;
	top: 0.01em;
	left: -1.1em;
	margin-right: 5px;
	border: none;
}
.location-marker svg {
	width: 100%;
	height: auto;
}


/* Arbeiten ------------------------- */

.arbeiten {
	margin: 2em 0 0 0; 
	padding-right: 0;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
}
.thumbnail {
	width: 20%; 
	aspect-ratio: 1;
    padding: 0 20px 16px 0;
	float: left;
}
.thumbnail a, .th-sel {
	position: relative;
	display: inline-block; 
	text-decoration: none;
}
.th-sel {
	display: block;
	width: 100%;
	aspect-ratio: 1;
}
.thumbnail .th-sel svg {
	display: block; 
}
.thumbnail a:hover svg {
	opacity: 100%;
}
.thumbnail a img, .thumbnail a svg {
	display: block;
	width: 100%;
	height: auto;
}

.thumbnail a svg  {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0%;
}
.thumbnail .th-sel svg  {
	opacity: 100%;
}
.thumbnail a:hover, .th-sel {
	border-style: solid;
	border-width: 2px;
}
.thumbnail a:hover img {
	opacity: 0%;
}


/* Footer ------------------------- */

footer {
	margin: 11em 0px 1em 0;
	font-family: "Montserrat", sans-serif;
	

}

.footer-content {
    margin-top: 0.5em;
	margin-bottom: 3em;
}


/* Projektseite ------------------------- */

section.project {
}

.line-box { padding-right: 20px; }

h1.project-title {
	font-size: 6em;
	margin: 0.55em 0 0 0;
	padding: 0;
	letter-spacing: 0.01em;
	font-weight: 200;
}
h2.project-subtitle {
	font-size: 4em;
	margin: 0.25em 0 0 0;
	padding: 0;
	letter-spacing: 0.01em;
	font-weight: 100;
}
.project-line {
	margin: 35px 0 30px 0;
}
.project-descr {
	padding-right: 40px; 
	padding-bottom: 70px;
}
.project-txt {
	width: 100%;
	float: right;	
	padding: 30px 0 50px 0;
}

.project-gallery {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 20px;
}

/* Projekt Zitate ------------------------- */

.size0, .sizeS, .sizeM, .sizeL, .sizeXL { 
	float: left; 
	padding: 30px 40px 0 0;
}
.size0 { }
.sizeS { width: calc(20% - 20px); }
.sizeM { width: calc(40% - 20px); }
.sizeL { width: calc(60% - 20px); }
.sizeXL { width: calc(100% - 20px); padding-bottom: 50px; }


/* Projekt img ------------------------- */

.project-header, .project-image {
	position: relative;
}
.project-header { padding: 60px 20px 0 0; }
.project-gallery > .project-image { 
	display: block;
}

.project-header img {
	width: 100%;
	height: auto;
	display: block;
}
.project-gallery > .project-image img {
	xxxdisplay: block;
	width: 100%;
	height: auto;
}

.project-arbeiten {
	margin-top: 15em;
}

.size-40 { width: calc(20% - 20px) !important; }
.size-60 { width: calc(40% - 20px) !important; }
.size-80 { width: calc(80% - 20px) !important; }
.size-100 { width: calc(100% - 20px) !important; }


/*
.size-40 { width: calc(40% - 20px); }
.size-60 { width: calc(60% - 20px); }
.size-80 { width: calc(80% - 20px); }
.size-100 { width: calc(100% - 20px); }
*/

.tag-txt {
	display: inline-block;
	border-radius: 10px;
	font-size: 0.6em;
	line-height: 1.2em;
	padding: 2px 8px 1px 10px;
	margin-right: 7px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.tag-line {
	margin: 20px 0 0 0;
}

.fotocredit {
	margin-top: 0;
    padding-top: 5px;
/*
	position: absolute;
	font-size: 0.65em;
	line-height: 1.4em;
	text-align: right;
	width: 100%;
	bottom: -1.5em;
*/
}
.project-header > .fotocredit {
	width: calc(100% - 20px);
}


/* Impressum ------------------------- */

.impressum-txt h1.impr-top {
}
.impressum-txt h3 {
	margin-top: 2em; margin-bottom: 1em;
}
.impressum-txt h3.impr {
	margin-top: 2em; margin-bottom: 2em;
}
.impressum-txt p {
	margin-top: 1em;
}


/* Cookie Banner ------------------------- */

.cc_container {
	border: none !important;
	border-top: 1px solid #ccc !important;
}
.cc_btn {
	 color: #fff !important;
}
.cc_btn { 
	background-color: #000 !important; 
}
.cc_btn:hover {
	border-bottom: none !important;
}
.cc_banner p, a.cc_more_info, a.cc_more_info:visited {
	color: #000 !important;
  font-family: "Josefin Sans", sans-serif;
	font-weight: 300 !important;
}
a.cc_more_info {
	border-bottom: solid 1px #000 !important;
}




/* Responsive Breakpoints ------------------------- */

.media-q { display: none; position: fixed; z-index: 1; width: 2.6em; height: 2.6em; background-color: #fff; padding-top: 0.3em; font-size: 1em; text-align: center; line-height: 1.9em; font-weight: bold; border-radius: 0 1.3em 1.3em 0; opacity: 85%; top: 3em; left: 0;}

	.XL { display: block; color: dodgerblue } .XS, .S, .M, .L { display: none; }

@media (max-width: 1200px) {
	.L { display: block; color: purple; } .XS, .S, .M, .XL { display: none; }
	.container { padding: 15px 0 0 2.2vw; }
	.dividing-line { margin: 1.2vw 0 0 0; }
	header nav, .footer-content, .line-box, .thumbnail, section .logo-img, .copy-txt { margin-right: 0; padding-right: 2.2vw; }
	.thumbnail { margin-right: 0; padding-right: 1.7vw; }
	h1, h2 { font-size: 15.5vw; }
	h1.scroll-title { font-size: 16.1vw; transform: translateX(-640px); }
	h1 { margin: 12.5vw 0 3.7vw -8px; }
	h2 { margin: 10vw 0 2vw -8px; }
	h3 { margin-top: -2vw; margin-bottom: 0; }
	.arbeiten { margin: 2.6vw 0.5vw 0 0; }  /* rechts Ausgleich vom geringeren thumbnail Abstand */
	.copy-txt { margin: 2vw 20px 0 0; }
	.kontakt-txt { margin: 2vw 0 0 0; }
	.kontakt-1 { width: 40%; float: left; padding-right: 20px; }
	.kontakt-2 { width: 20%; float: left; padding-right: 20px; }
	.kontakt-map { width: 40%; padding: 5px 20px 0 0; }
	.kontakt-map svg { width: 100%; height: auto; }
	h1.project-title { font-size: calc(7.5vw + 10px); font-weight: 100 }
	h2.project-subtitle { font-size: calc(4vw + 10px); font-weight: 300}
	
	
	h1.project-title { letter-spacing: 0em;}
	h2.project-subtitle { letter-spacing: 0em;}
	.project-line { margin: 3.5vw 0 2.5vw 0; }
	.size0, .sizeS, .sizeM, .sizeL, .sizeXL { padding: 1.5vw 2.6vw 2.6vw 0; } /* zitate */
	
	.project-gallery { gap: 1.7vw; padding-right: 0.5vw; }
	.size-40 { width: calc(40% - 1.7vw); }
	.size-60 { width: calc(60% - 1.7vw); }
	.size-80 { width: calc(80% - 1.7vw); }
	.size-100 { width: calc(100% - 1.7vw); }
	
	.project-descr { padding-right: 2.2vw; }
	.project-header { padding: 5vw 2.2vw 0 0; }
	.project-header > .fotocredit { width: calc(100% - 2.2vw); }

	footer { margin: 14vw 0px 1em 0; }
}

@media (max-width: 992px) {
	.M { display: block; color: limegreen; } .XS, .S, .L, .XL { display: none; }
	.container { padding: 12px 0 0 2.2vw; }
	.thumbnail { width: 25%; padding-bottom: 0; }
	h3 { margin-top: -1.6vw; }
	.size0, .sizeS, .sizeM, .sizeL, .sizeXL { width: 100%; padding: 1.5vw 2.2vw 2.6vw 0; } /* zitate */

	.project-gallery { gap: calc(1vw + 12px) 2.2vw; padding-right: 0; }
	.size-60, .size-80, .size-100 { width: calc(100% - 2.2vw); }
	.size-40 { width: calc(50% - 2.2vw); }
	
	.project-arbeiten { margin-top: 14vw; }

	.kontakt-1 { width: 50%; float: left; padding-right: 20px; }
	.kontakt-2 { width: 50%; float: left; padding-right: 20px; }
	.kontakt-map { width: 100%; padding: 1em 20px 0 0; }
	.kontakt-map svg { width: 75%; height: auto; }
}

@media (max-width: 768px) {
	.S { display: block; color: hotpink; } .XS, .M, .L, .XL { display: none; }
	body { font-size: 0.85em; }
	header nav, .footer-content, h3 { font-size: calc(1vw + 1.1em); }	/* 1.7em */
	header nav, .footer-content, .line-box, .project .line-box, .thumbnail, section .logo-img, .copy-txt { margin-right: 0; padding-right: 2.2vw; }
	.container { padding: 14px 0 0 2.2vw; }
	.thumbnail { width: calc(100% / 3); }
	section .logo-img { margin: 5vw 0 0 0; }
	h1, h2 { margin-left: -4px; }
	h3 { margin-top: -1vw; }
	.arbeiten { margin: 3vw 0 0 0; }
	.project-line { margin: 4vw 0 3vw 0; }
	.project-descr { padding-bottom: 5vw }
	.project-header { padding-right: 2.2vw; padding-bottom: 3.5em; }
	.project-header > .fotocredit { bottom: 3.75em; }

	.copy-txt, .kontakt-1, .kontakt-2, .kontakt-map { margin-top: 1.3em; }
	.kontakt-1 { width: calc((100% / 3) * 2); }
	.kontakt-2 { width: calc(100% / 3); }
	.kontakt-map { width: calc((100% / 3) * 2); padding: 1em 20px 0 0; }
	.kontakt-map svg { width: 100%; height: auto; }
	
	.footer-content { font-size: 1.0em; display: block; margin: 20px 0; } /* untereinander anordnen */
}
@media (max-width: 640px) {
	.S { display: block; color: pink; } .XS, .M, .L, .XL { display: none; }
	header .pfeil-box { width: 104px; }
	.kontakt-map { width: 100%; }
}
@media (max-width: 500px) {
	.S { display: block; color: orange; } .XS, .M, .L, .XL { display: none; }
	header .pfeil-box { width: 14vw; }
	.copy-txt, .kontakt-1, .kontakt-2, .kontakt-map { margin-top: 1.3em; }
	.kontakt-1 { width: 100%; }
	.kontakt-2 { width: 100%; }
}

@media (max-width: 390px) {
	.XS { display: block; color: red; } .S, .M, .L, .XL { display: none; }
	body { font-size: 0.85em; font-size: calc(1.2vw + 10px); }
	.title, section .logo-img { display: none; }
	.title-s { display: block; font-size: calc(9vw + 20px); margin: 5vw 20px 3.7vw -2px; }
	.container { padding: 10px 0 0 3vw; }
	.thumbnail { width: 50%; padding-bottom: 1.8vw; }
	header nav, .footer-content, .line-box, .thumbnail, section .logo-img, .copy-txt { padding-right: 3vw; }
	header .pfeil-box { display: none; }
	header nav, .footer-content, h3  { font-size: 1.5em; }
	h1, h2 { font-size: calc(10vw + 20px); margin-left: -2px; }
	h2 { margin-top: 0.75em; }
	.arbeiten { margin-top: 5vw; } /* oben mehr abstand */

	h1.project-title { font-size: calc(8vw + 10px); }
	h2.project-subtitle { font-size: calc(5.5vw + 10px); }

	.kontakt-map { display: none; }
}