@media screen and (max-width: 624px) {


/* Force full vertical stretch on small screens */
@media (max-width: 768px) {
    .video-background {
        position: absolute;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fill while preserving aspect ratio */
  object-position: center;/* keep the subject centered */
}


.site-intro {
  grid-template-columns: 1fr;
  height: fit-content;
  position: unset;
  
}

.footer-intro {
  position: unset;
}

.menu-intro {
  position: unset;
}



.intro-button {
  height: 20vh;
}


.fill-height {
	height: auto !important;
	bottom: 0 !important;
	top: unset;
}
.button-darkmode {
	display: none;
}

.button-mail {
	margin-left: auto;
}


.box-double {
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
}

#projectNav a:hover {
    transform: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
}




.letter {
	font-size: 70vw !important;
}
#boxmedium {
	grid-column: span 1;
}

.letters {
	    font-size: 22vw !important;

    grid-template-columns: 1fr 1fr;
}



img {
	border-radius: 10px;
}

video {
	border-radius: 10px;
}




.name-intro {
  display: flex;
  text-align: left;
  align-items: center;
}

.name-intro h1 {
	font-size: 14vw;
}




	:root {
	  --gutter: 4vw;
	  --padding: 20px;
	}


	section {
  		padding-bottom: 20px;
	}


.projects {
	    grid-gap: var(--padding);
	    grid-template-columns: 1fr;
	}

#boxbig {
	  grid-column: span 1;
}
	.projects-headline {
    	grid-column: 1 / 1;
    	margin-bottom: 40px;
	}




	#boxempty {
    	display: none;
	}
	

	section.blog {
	  display: grid;
	  grid-template-columns: 1fr;
	  grid-gap: 20px;
	  grid-template-areas:  
	  "box" 
	  "box";
	  text-align: center;
	 }

	 .blog-headline {
    	grid-column: 1 / 1;
    	margin-bottom: 40px;
    }

    .blogBoxInner {
    	margin-bottom: 20px;
    }

.dossier {
	display: none;
}

.full-height {
	display: none;
}

.dossier-link {
	display: none !important;
}
	 section.blogSingle {
		display: grid;
	  	grid-template-columns: 1fr;
	  	grid-gap: 20px;
	  	grid-template-areas:  
	  	"title-box" 
	  	"facts-box"
	  	"intro-text-box"
	  	"blogSingleContent";
	  	text-align: center;
	}

	section.blogContent {
	    display: grid;
	    grid-template-columns: 1fr;
	    grid-gap: 20px;
	    padding-top: 0;
	}

	.avatar {
		display: none;
	}

.box-headline {
	grid-row: span 1 !important;
	grid-column: auto !important;
}
	.column-avatar {
		flex-direction: column;
	}

	.column-avatar-image {
		width:  6vh;
	}

	.contentOutside {
		display:  none;
	}

	.related {
	    display: grid;
	    grid-template-columns: 1fr;
	    grid-gap: 20px;
	    z-index: 90000000;
	    background-color: white;
	    color: black;
	    text-align: center;
	}

	.relatedHeadline {
    	grid-column: 1 / 2;
	}

	.wp-block-columns {
	    display: flex;
	    gap: 40px !important;
	    flex-wrap: nowrap;
	    align-items: center;
	    margin-bottom: 40px;
	    text-align: center;
	}

	.blogBoxWrapper {
		margin-bottom: 40px;
	}


	.column-avatar {
    	gap: 10px;
	}

	section.profile-intro {
	  display: grid;
	  grid-template-columns: 1fr;
	  grid-gap: 10px;
	  grid-template-areas:  
	  "box" 
	  "box";
	 }

	section.profile {
	  display: grid;
	  grid-template-columns: 1fr;
	  grid-gap: 20px;
	  grid-template-areas:  
	  "box" 
	  "box";
	 }

	.a {
	  grid-column: 1 / 1;
	}

	.b {
	      flex-direction: column;
    grid-gap: 10px;

	}

	.c {
	   grid-column: 1 / 1;
	}

	.d {
		grid-column: 1/1;
	}

	.nav-links {
		gap: 20px;
	}

	.page-numbers {
		font-size: 34px;
	}


	.call-to-action {
	    grid-template-columns: 1fr;
	    padding-top: 20px;
    	padding-bottom: 20px;
	}

.projects-info {
	    	bottom: 0px;
	    	width: -webkit-fill-available;
	    	width: -moz-avialable;
	    	 grid-template-columns: 1fr;
	    	 grid-auto-rows: auto !important;
	    	 grid-template-rows: auto !important;
	    	 grid-gap: 20px;
	    	 height: fit-content;
    	    grid-template-areas:
        "headline"
        "keywords"
        "description";
}

.keywords {
    display: none !important;
}

.column-inner {
	grid-gap: 0px;
}



	.button {
  		font-size: 1.2em;
	}


	.clock {
  width: 34.46vw; /* Converted from 350px */
  height: 34.46vw; /* Converted from 350px */
}

.clock:before {
  width: 2vw; /* Converted from 15px */
  height: 2vw; /* Converted from 15px */
}

.clock .hour, .hr {
  width: 14.67vw; /* Converted from 160px */
  height: 14.67vw; /* Converted from 160px */
}

.clock .min, .mn {
  width: 17.79vw; /* Converted from 190px */
  height: 17.79vw; /* Converted from 190px */
}

.clock .sec, .sc {
  width: 21.96vw; /* Converted from 230px */
  height: 21.96vw; /* Converted from 230px */
}

.hr:before {
  width: 0.6334vw; /* Converted from 8px */
  height: 6.334vw; /* Converted from 80px */
}

.mn:before {
  width: 0.4167vw; /* Converted from 4px */
  height: 8.375vw; /* Converted from 90px */
}

.sc:before {
  width: 0.484vw; /* Converted from 2px */
  height: 13.63vw; /* Converted from 150px */
}



#projectNavWrapper {
	width: -webkit-fill-available;
	width: -moz-avialable;
	left: unset;
	bottom: 0;
	height: auto;
	height: fit-content;
	top: unset;
	margin: 20px;
}

#projectNav {
    display: flex;
    flex-direction: row;
    text-align: center;
    display: flex;
    cursor: pointer;
    grid-gap: 2px;
    justify-content: space-between;
    vertical-align: middle;
    align-items: center;
    width: -webkit-fill-available;
    height: unset;
}

.grid-icon {
	display: none;
}

.grid {
 display: none;   
}

#clock {
	display: none;
}


.sticky {
  position: unset !important;

}


}

}