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


/* GENERAL
----------------------------------------------*/
:root {

    /* Colors */
    --black: #000;
    --white: #fff;
	--accent: blue;


    /* Typography */
    --font: SansFlex;
    --text: 0.8rem;
	--textM: 2.2rem;
	--textXL: 4rem;
	--indent: 0;


    /* Layout */
    --padding: 15px;
	--margin: 25dvh 0 5% 0;
	--gap: 2px;
	--grid: repeat(2, 1fr);

}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    }


html {
   font-size: 100%;
}


body {
    background: var(--white);
    color: var(--black);

    font-family: var(--font);
    font-size: var(--text);
    line-height: 1;
}


img,
video {
    display: block;
    max-width: 100%;
}

video::-webkit-media-controls {
    display: none !important;
}

video::-webkit-media-controls-start-playback-button {
    display: none !important;
}

button, .button{
	display: inline-block;
	min-width: 90px;
	padding: var(--padding);
  	cursor: pointer;
	text-align: center;
  
  	border: 1px solid var(--black);
  	border-radius: 50px;
	background-color: var(--accent);	
}

button:hover, .button:hover {
	background-color: var(--black);	
  	color: #ffffff;
}

.hidden {
	position: absolute;
  	width: 1px;
  	height: 1px;
  	padding: 0;
  	margin: -1px;
  	overflow: hidden;
  	clip: rect(0, 0, 0, 0);
  	white-space: nowrap;
  	border: 0;
}

.hideMobile {
	display: none;
}

/* TYPO
----------------------------------------------*/
@font-face {
    font-family: 'SansFlex';
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;

    src: url("fonts/GoogleSansFlex-VariableFont_GRAD,ROND,opsz,slnt,wdth,wght.ttf")
}

html {
    font-family: 'SansFlex', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, p, span {
	font-size: var(--text);
    font-weight: 400;
	}

a {
    color: inherit;
    text-decoration: none;
}

a:hover, .about-btn:hover {
	color: var(--accent);
	cursor: pointer;
}

.fontSizeXL {
	font-size: var(--textXL);
	font-weight: 500;
}

/* HEADER
----------------------------------------------*/

header {
    display: flex;
    justify-content: space-between;

    padding: var(--padding);
    gap: var(--padding);
	
    border: 1px solid var(--black);
    border-radius: 50px;
    background-color: var(--white);

    position: fixed;
    top: var(--padding);
    left: var(--padding);
    width: calc(100% - (var(--padding) * 2));
    box-sizing: border-box;
    z-index: 900;
}


header > div {
    justify-self: flex;
}

/* MAIN
----------------------------------------------*/

main {
	margin: var(--margin);
}

main h2 {
	padding: var(--padding);
	margin-bottom: 3%;
}

.project {
    display: grid;
    grid-auto-rows: auto;
    gap: var(--gap);
	margin-top: var(--gap);
}

.grid {
	grid-template-columns: var(--grid);
}


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

.media img, .media video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
    display: block;
	transform: scale(1.01);
}

.aspect-ratio169 {
	aspect-ratio: 16 / 9; 
}

.aspect-ratio179 {
	aspect-ratio: 17 / 9; 
}

.aspect-ratio219 {
	aspect-ratio: 2.35 / 1; 
}

.aspect-ratio43{
	aspect-ratio: 4 / 3; 
}


/* ABOUT
----------------------------------------------*/

.modal {
  	position: fixed;
  	top: 0;
  	left: 0;
  	width: 100%;
  	min-height: 100dvh;
	height: auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
  	background-color: var(--black);
  	z-index: 1000;
  
  display: flex;
  justify-content: center;
  align-items: flex-start;
  
  transform: translateX(100%);
  pointer-events: none;
  
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.modal.is-open {
  transform: translateX(0);
  pointer-events: auto;
}

.modal-wrapper {
 	width: 100%;
  	min-height: 100dvh;
  	display: flex;
  	justify-content: center;
 	align-items: center;
 	position: relative;
	padding: var(--padding);
	
	color: var(--white);
  
  	opacity: 0;
  	transition: opacity 0.75s ease-in-out;
  	transition-delay: 0s; 
}

.modal.is-open .modal-wrapper {
  opacity: 1;
  transition-delay: 0.4s;
}

.modal-content .lead-text {
	font-size: var(--textM);
	text-indent: var(--indent);
	position: relative;
	text-align: left;
}

.close-btn {
  	position: absolute;
  	top: var(--padding);
 	right: var(--padding);
}

.close-btn:hover {
	color: var(--accent);
	cursor: pointer;
}

/* FOOTER
----------------------------------------------*/
footer {
	display: flex;
	justify-content: space-between;
	
	padding: var(--padding);
	margin: var(--padding);
    gap: var(--padding);
	
    border-radius: 50px;
    background-color: var(--black);
	color: var(--white);
}


/* Impressum und Datenschutz
----------------------------------------------*/
.legalNotice {
	margin: var(--margin);
}

.legalNotice h1 {
	font-size: var(--textM);
	margin-bottom: 80px;
}

/* ==========================================================================
   1. MEDIUM SCREENS / TABLETS (Ab 768px Breite)
   ========================================================================== */
@media (min-width: 768px) {
    :root {
		--text: 1rem;
        --textM: 4rem;          
        --textXL: 12rem;
        --indent: 15vw;         
        --grid: repeat(3, 1fr); 
    }
	
	header {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: start;
    }

    header > div {
        align-self: auto; 
        justify-self: end;
    }
	
	.hideMobile {display: inherit;}
	
	.legalNotice {width: 50%;}
}


/* ==========================================================================
   2. LARGE SCREENS / DESKTOP (Ab 1024px Breite)
   ========================================================================== */
@media (min-width: 1024px) {
    :root {
        --textM: 6rem;          
        --textXL: 15rem;        
        --indent: 25vw;         
        --grid: repeat(4, 1fr); 
    }
	
}


/* ==========================================================================
   3. EXTRA LARGE SCREENS / WIDESCREEN (Ab 1600px Breite)
   ========================================================================== */
@media (min-width: 1600px) {
    :root {
		--textXL: 25rem; 
        --indent: 400px; 
    }
}