* {
  --padding-side: calc(20vw / 393 * 100);
   
  --wp--preset--spacing--small: var(--padding-side);
  --wp--preset--spacing--medium: var(--padding-side);
  --wp--preset--spacing--large: var(--padding-side);
  --wp--preset--spacing--x-large: calc(73vw / 393 * 100);
  }
  
BODY.show-grid {
  background: url('../img/grid-mobile.png') repeat-y;
  background-size: 100% auto;
  }    
  
A {
  transition: 0;
  }  
  
IMG {
  vertical-align: baseline;
  }  
  
.editor-styles-wrapper {
  font-size: calc(20vw / 393 * 100);
  }

#page {
  margin-bottom: 0;
  min-height: 0;
  }

HEADER {
  padding-top: var(--padding-side);
  }
  
HEADER #logo {
  position: static;
  }

HEADER #logo IMG {
  position: static;
  height: calc(63vw / 393 * 100);
  }
  
/* HEADINGS
------------------------------------------------------------------------- */   
  
H1.page-title,
H1.wp-block-heading {
  font-size: calc(38vw / 393 * 100);
  padding-top: calc(36vw / 393 * 100);
  margin-bottom: calc(40vw / 393 * 100) !important;
  }
  
H2.wp-block-heading {
  font-size: calc(28vw / 393 * 100);
  margin-bottom: calc(30vw / 393 * 100);
  }
  
H3.wp-block-heading {
  font-size: calc(16vw / 393 * 100);
  margin-top: calc(50vw / 393 * 100);
  }  
  
.metadata,
.has-nitti-font-family {
  font-size: calc(16vw / 393 * 100);
  margin-bottom: calc(35vw / 393 * 100) !important;
  }
  
A.button {
  height: calc(30vw / 393 * 100);
  line-height: calc(26vw / 393 * 100);
  font-size: calc(16vw / 393 * 100);
  padding: 0 calc(15vw / 393 * 100);
  }

/* HOME
------------------------------------------------------------------------- */      

BODY.home HEADER #logo IMG {
  width: calc(298vw / 393 * 100);
  height: auto;
  }
  
BODY.home MAIN {
  width: 100vw;
  padding: var(--padding-side);
  padding-top: calc(50vw / 393 * 100);
  }  
  
BODY.home #slider {
  padding: 0;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  }   
  
BODY.home #slider IMG {
  float: left;
  aspect-ratio: 354 / 524;
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: auto;
  }  
  
/* BURGER
------------------------------------------------------------------------- */   

#burger {
  top: var(--padding-side);
  right: var(--padding-side);
  width: calc(38vw / 393 * 100);
  z-index: 11;
  }
  
#burger span {
  width: calc(38vw / 393 * 100);
  height: calc(8vw / 393 * 100);
  }
  
BODY.menu #burger span {
  background: #fff;
  height: calc(1vw / 393 * 100);
  }  
  
#burger span:nth-child(1) {
  top: calc(2vw / 393 * 100);
  }  
  
#burger span:nth-child(2) {
  top: calc(18vw / 393 * 100);
  }  
  
BODY.menu #burger span:nth-child(1),
BODY.menu #burger span:nth-child(2) {
  top: calc(15vw / 393 * 100);
  }  
  
/* MENÜ
------------------------------------------------------------------------- */  
  
#menu {
  width: 100vw;
  padding-left: calc(32vw / 393 * 100);
  background: var(--blue);
  padding-top: 0;
  }
  
#menu NAV.main {
  position: absolute;
  top: 50%;
  left: calc(32vw / 393 * 100);
  margin-top: calc(230vw / 393 * -100);
  }
  
#menu UL LI A {
  font-family: Nitti;
  font-size: calc(40vw / 393 * 100);
  padding: calc(10vw / 393 * 100);
  }  
  
#menu #symbols {
  padding: calc(40vw / 393 * 100) 0;
  }  
  
#menu #symbols I {
  font-size: calc(20vw / 393 * 100);
  }  
  
#menu .bottom {
  left: calc(32vw / 393 * 100);
  bottom: calc(32vw / 393 * 100);
  }  
  
#menu NAV.secondary UL LI A {
  font-size: calc(16vw / 393 * 100);
  }  
  
/* LEGENDE / SYMBOLERKLÄRUNG
------------------------------------------------------------------------- */  
  
#explanation {
  padding-top: var(--padding-side);
  padding-bottom: var(--padding-side);
  overflow-y: scroll;
  z-index: 12;
  }
  
#explanation .close {
  top: calc(120vw / 393 * 100);
  right: var(--padding-side);
  }
  
#explanation .close I {
  font-size: calc(26vw / 393 * 100);
  width: calc(28vw / 393 * 100);;
  }

#explanation .logo {
  margin-top: var(--padding-side);
  font-size: calc(100vw / 393 * 100);
  position: static;
  }
  
#explanation H1 {
  display: none;
  }  
  
#explanation .categories {
  flex-direction: column;
  padding-top: calc(100vw / 393 * 100);
  gap: calc(60vw / 393 * 100); 
  } 
  
#explanation .category .symbol {
  font-size: calc(40vw / 393 * 100);
  height: calc(40vw / 393 * 100);
  }
  
  
#explanation .category .title {
  font-size: calc(28vw / 393 * 100);
  margin-bottom: calc(40vw / 393 * 100);
  }  
  
#explanation .category .description {
  font-size: calc(20vw / 393 * 100);
  }
  
.wp-block-post-content > * { 
  max-width: 100%;
  padding-left: var(--padding-side);
  padding-right: var(--padding-side);
  }
  
/* PROJEKTE ÜBERSICHT
------------------------------------------------------------------------- */  
  
#tools {
  margin-bottom: calc(48vw / 393 * 100);
  align-items: center;
  }

#tools .filter .button {   
  margin-bottom: 0;
  }
  
#tools #view {
  gap: calc(15vw / 393 * 100);
  }  
  
#tools #view A {
  width: calc(38vw / 393 * 100);
  height: calc(38vw / 393 * 100);
  }  
  
#tools #view I:before {
  font-size: calc(38vw / 393 * 100); 
  }  

#filter {
  overflow: hidden;
  padding-bottom: calc(27vw / 393 * 100);
  margin: 0;
  text-align: left;
  }  
 
#filter A {
  font-size: calc(16vw / 393 * 100); 
  width: 50%;
  float: left;
  margin-top: calc(-7vw / 393 * 100);
  margin-left: 0;
  text-align: left;
  } 
  
#filter A:nth-child(even) {  
  padding-left: calc(32vw / 393 * 100);
  }
  
#filter I {
  font-size: calc(30vw / 393 * 100);
  top: calc(9vw / 393 * 100);
  }
  
/* PROJEKTE GRID VIEW
------------------------------------------------------------------------- */  

#projects {
  padding-bottom: calc(var(--padding-side)*2);
  }
  
#projects #view-grid {
  margin-left: calc(15vw / 393 * -100);
  margin-right: calc(15vw / 393 * -100);
  }

#projects #view-grid .project, 
#projects #view-grid .grid-sizer {
  width: 33.3%;
  }
  
#projects #view-grid.bigger .project, 
#projects #view-grid.bigger .grid-sizer {
  width: 100%;
  } 
  
#projects #view-grid .project FIGURE {
  top: calc(15vw / 393 * 100);
  left: calc(15vw / 393 * 100);
  right: calc(15vw / 393 * 100);
  bottom: calc(15vw / 393 * 100);
  }
  
#projects #view-grid .project FIGURE .overlay {   
  transition: 0;
  }  
  
#projects #view-grid.bigger .project {
  display: block;
  aspect-ratio: auto;
  margin-bottom: calc(30vw / 393 * 100);
  }       
  
#projects #view-grid.bigger .project FIGURE {
  position: static;
  display: block;
  } 
  
#projects #view-grid.bigger .project FIGURE.landscape {
  padding-left: calc(53vw / 393 * 100);
  padding-right: calc(53vw / 393 * 100);
  }  
  
#projects #view-grid.bigger .project FIGURE.portrait {
  padding-left: calc(87vw / 393 * 100);
  padding-right: calc(87vw / 393 * 100);
  }   
  
#projects #view-grid.bigger .project .title {
  opacity: 1;
  font-size: calc(16vw / 393 * 100);
  padding: calc(13vw / 393 * 100);
  }
  
/* PROJEKTE LIST VIEW
------------------------------------------------------------------------- */  
  
#projects #view-list .project {
  padding: calc(20vw / 393 * 100) 0;
  border-top: 1px solid #000;
  margin-top: -1px;
  }  
  
#projects #view-list .project FIGURE {
  min-width: calc(142vw / 393 * 100);
  }  
  
#projects #view-list .project FIGURE IMG {
  width: calc(143vw / 393 * 100);
  height: calc(105vw / 393 * 100);
  object-fit: cover;
  object-position: center center;
  }  
 
#projects #view-list .project .titles {
  font-size: calc(16vw / 393 * 100);
  padding-left: calc(15vw / 393 * 100);
  line-height: 1.2;
  }   

#projects #view-list .project .metadata {
  display: none;
  }
  
#projects #view-list .category-symbols {
  font-size: calc(24vw / 393 * 100);
  }  
  
#projects #view-list .project .category-symbols .terms {
  bottom: calc(15vw / 393 * -100);
  }  
  
/* PROJEKT DETAILSEITE
------------------------------------------------------------------------- */  

.single-project MAIN {
  position: relative;
  padding-bottom: calc(100vw / 393 * 100);
  }
  
.single-project MAIN * {
  --wp--preset--spacing--x-large: var(--padding-side);
  }

.single-project .has-nitti-font-family {
  display: flex;
  flex-direction: column;
  }

.single-project .has-nitti-font-family .wp-block-lazyblock-filter {
  order: 1;
  margin-top: 0;
  margin-bottom: calc(20vw / 393 * 100);
  }
  
.single-project .has-nitti-font-family P {
  order: 2;
  }  
  
.single-project .wp-block-lazyblock-next {
  position: absolute;
  bottom: calc(var(--padding-side)*2);
  left: 0;
  text-align: center;
  width: 100vw;
  }
  
.single-project .wp-block-lazyblock-next A.button {  
  height: calc(38vw / 393 * 100);
  line-height: calc(34vw / 393 * 100);
  padding: 0 calc(20vw / 393 * 100);
  }
  
.category-symbols {
  font-size: calc(30vw / 393 * 100);
  }  
  
/* BLOCK GROUP
------------------------------------------------------------------------- */    
  
.wp-block-group.is-layout-constrained {
  font-size: calc(16vw / 393 * 100);
  } 
  
.wp-block-group.is-layout-constrained + .wp-block-image {  
  margin-top: calc(40vw / 393 * 100) !important;
  }
  
/* BLOCK COLUMNS
------------------------------------------------------------------------- */    
  
.wp-block-columns {
  margin-top: calc(50vw / 393 * 100);
  }

.wp-block-columns.alignwide {
  gap: calc(40vw / 393 * 100) !important;
  font-size: calc(16vw / 393 * 100);
  }
  
.wp-block-table TD {
  font-size: calc(16vw / 393 * 100);
  }  
  
/* BLOCK IMAGE
------------------------------------------------------------------------- */  
  
.wp-block-image {
  width: 100% !important;
  margin: var(--padding-side) 0 !important;
  overflow: hidden;
  }
  
.wp-block-image IMG {  
  float: left;
  }
  
/* BLOCK GALLERY
------------------------------------------------------------------------- */    
  
.wp-block-gallery {
  flex-direction: column;
  gap: 0 !important
  }
  
.wp-block-gallery .wp-block-image {
  margin-top: 0 !important;
  } 
  
.wp-block-gallery .wp-block-image:last-child {
  margin-bottom: 0 !important;
  }     
  
/* MENÜ
------------------------------------------------------------------------- */   
  
FOOTER {
  height: auto;
  font-size: calc(20vw / 393 * 100);
  line-height: 1.25;
  padding: calc(15vw / 393 * 100) 0;
  background-size: auto calc(5vw / 393 * 100);
  background-position: calc(7vw / 393 * -100) top;
  }
  
#push {
  display: none;
  }
  
FOOTER .container {
  flex-direction: column;
  align-items: flex-start;
  gap: 2em;
  padding: var(--padding-side);
  }
  
FOOTER .container .imprint {
  order: 4;
  font-size: calc(16vw / 393 * 100);
  }