/* SPACE GROTESK VARIABLE */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Variable.woff2') format('woff2'),
       url('../fonts/SpaceGrotesk-Variable.woff') format('woff'),
       url('../fonts/SpaceGrotesk-Variable.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}



/* SPACE MONO STATIC */

@font-face {
  font-display: swap; 
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/space-mono-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap; 
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/space-mono-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* POPPINS VARIABLE */

@font-face {
  font-display: swap; 
  font-family: "Poppins";
  src: url("../fonts/Poppins-VariableFont_wght.otf") format("opentype-variations");
  font-weight: 100 900;
}

@font-face {
  font-display: swap; 
  font-family: "Poppins Italic";
  src: url("../fonts/Poppins-Italic-VariableFont_wght.otf") format("opentype-variations");
  font-weight: 100 900;
}














/* 

	middlegray: #cdcecf;



	specialblack: #191b1d; SCHRIFT und BACKGROUND

*/

/* Color schemes */
.demo-1 {
	--color-text: #efedeb;
	--color-bg: #0e0e0e;
	--color-link: #1920f3;
	--color-link-hover: #fe4357;
	--color-info: #fff;
	--color-main-text: #1d1c1c;
	--color-scroll-text: #efedeb;
	--font-scroll-text: 'Space Grotesk', monospace;
	--fontsize-scroll-text: 8vw;
}

.content__main {
	color: var(--color-main-text);
}

p {
	font-family: 'Poppins', sans-serif;
}
/*
.js .content__text::before {
	content: '';
	position: absolute;
	right: 0;
	height: 1.3em;
	width: 1.3em;
	top: 0;
	background: yellow;
  width: 5vmax;
  height: 5vmax;
  box-shadow: calc(8px + (24 - 8) * ((100vw - 300px) / (1600 - 300))) calc(6px + (18 - 6) * ((100vw - 300px) / (1600 - 300))) calc(4px + (8 - 4) * ((100vw - 300px) / (1600 - 300))) rgba(0,0,0,0.15) !important;
}
*/
.js .content__text::after {
	content: '';
	position: absolute;
	height: 130%;
	top: 0.136em;
	margin-left:-100px;
	width: 100%;
  right: 0;
	margin-left: -6vmax;
	height: 100%;
	background:  url("../arrow-right.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 5vmax;
  transform: rotateY(180deg);
}
.content__text {
	text-align: right;
	font-size: 70px;
	font-family: 'Space Mono', monospace;
	font-weight: 500;
	text-shadow: 40px 30px 12px rgba(0,0,0,0.25);
	text-shadow: 24px 20px 8px rgba(0,0,0,0.25);
}
.content_section {
	background: #3e3e3e !important;
	height: 400vh !important;
	position: relative;
	display: block;
}
.spread {
 	height: 200vh;
 	background-color: darkgoldenrod;
 	padding-left: 4%;
 	background-image: linear-gradient( 111.4deg,  rgba(209,231,235,1) 7.4%, rgba(238,219,199,1) 51.4%, rgba(255,159,122,1) 82.6%, rgba(255,109,58,1) 100.2% );
 	background-image: linear-gradient(58.2deg, rgba(40, 91, 212, 0.73) -3%, rgba(171, 53, 163, 0.45) 49.3%, rgba(255, 204, 112, 0.37) 97.7%);
  background: conic-gradient(from 3.1416rad at 22% 50%, #e66465, #9198e5);
    background: conic-gradient(from 1.572rad at 50% 22%, #9198e5, #e66465);

  padding: calc(100px + (150 - 100) * ((100vw - 300px) / (1600 - 300))) 0 !important;
  min-height: auto; 
  height: auto;
}
.spread p.intent, .spread ul li {
	text-align: left;
	max-width: 800px;
	margin: 0 auto 0 auto !important;
	padding: 50px 0;
	color: #000;
}
.spread p.intent {
  font-size: calc(17px + (22 - 17) * ((100vw - 300px) / (1600 - 300))) !important;;
}
.spread ul {
  padding-left: calc(10px + (60 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
  margin-left: 17px;
  max-width: 800px;
  margin: 0 auto;
}
@media screen and (max-width: 800px) {
  .spread ul {
    margin-left: 17px !important;
    margin-right: 17px;
    font-size: 15px;
  }
  .spread p.intent {
    margin-right: 17px !important;
    hyphens: auto !important;
  }
}
.spread ul li {
	padding: 0;
  font-family: 'Poppins';
}
h1 {
	position: fixed;
	top: 38px;
	left: 160px;
	font-size: 23px;
	color: #fff;
  color: #000;
	z-index: 999999;
}
.content__section h1 {
  position: relative;
  padding: 80px 0 0px 0px;
  padding-top: calc(30px + (80 - 30) * ((100vw - 300px) / (1600 - 300))) !important;
  padding-top: 0 !important;
  padding-top: calc(20px + (0 - 20) * ((100vw - 300px) / (1600 - 300))) !important;
  padding-left: calc(10px + (60 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
  padding-bottom: calc(20px + (60 - 20) * ((100vw - 300px) / (1600 - 300))) !important;
  left: 0;
  top: 0;
  float: none !important;
  text-align: left;
  margin: 0 !important;
}
.content__section p {
  text-align: left;
  margin: 0em;
  color: #000;
  
}
p.intent {
  padding-left: calc(10px + (60 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
}
.navicon {
	width: 50px;
	height: auto;
	top: 175px;
	right: 28px;
	z-index: 999999999;
	position: fixed;
}





/* SERVICES UL */



.white {
  width: 100%;
  padding: calc(30px + (200 - 30) * ((100vw - 300px) / (1600 - 300))) 0 calc(50px + (200 - 50) * ((100vw - 300px) / (1600 - 300))) 0!important;
  overflow-x: hidden;
  background: conic-gradient(from 3.1416rad at 22% 50%, #e66465, #9198e5);
  background: #0e0e0e;
  background: rgba(0,0,0,0.78);
}
/*
.white::before {
	content: " ";
	position: absolute;
	z-index: -999;
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	right: 0;
	background-image: url(../test.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center center;
	background-attachment: fixed;
	opacity: 0.3;
}
*/
.white ul {
  text-decoration: none;
  float: left;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  font-weight: bold;
  font-family: sans-serif;
}
.white ul .alist {
  border: none;
  color: blue;
  color: #f66456;
  float: left;
  letter-spacing: 0;
  padding-right: 100px;
  border-right: 1px solid #6e80de;

  text-decoration: none;
  color: #6e80de;
  outline: none;
  cursor: pointer;
}

.white ul .alist span {
  position: absolute;
  display: block;
  background: #fff; /* ADJUST LIKE BG! */
  background: #0e0e0e;
  padding: 0 25px 0 60px;
  padding-left: calc(10px + (60 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
  border: none;
  z-index: 999;
  color: #f66456;
}

.white ul li:hover .alist span {
  border-right: 1px solid blue;
  border-right: 1px solid #6e80de;;
} 
.white ul li {
  font-size: 90px;
  font-size: calc(24px + (70 - 24) * ((100vw - 300px) / (1600 - 300))) !important; 
  line-height: 140px;
  line-height: calc(38px + (120 - 38) * ((100vw - 300px) / (1600 - 300))) !important;
  padding: 20px 0;
  float: left;
  display: block;
  color: blue;
  z-index: 999;
  border-bottom: 1px solid blue !important;
  border-bottom: 1px solid #6e80de !important;
}
.white ul li:last-child {
	border-bottom: none !important;
}
.white ul li ul {
  width: auto;
  height: 1.4em;
}
.white ul li ul li {
  float: left;
  padding: 0 0 0 0;
  background: hotpink;
  border: none !important;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-stroke: 1px #f66456;
  color: transparent;
}
.white ul li ul li {
  border: none;
}

/* Animated Part */








.ticker-wrap {
  width: 100%;
  font-size: 90px;
  font-size: calc(24px + (70 - 24) * ((100vw - 300px) / (1600 - 300))) !important;
  border-right: 1px solid blue;
  line-height: 140px;
  line-height: calc(38px + (120 - 38) * ((100vw - 300px) / (1600 - 300))) !important;
  /*
  height: 140px;
 height: calc(38px + (140 - 38) * ((100vw - 300px) / (1600 - 300))) !important;
 */
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.ticker {
  display: inline-block;
  font-size: 90px;
  font-size: calc(24px + (70 - 24) * ((100vw - 300px) / (1600 - 300))) !important;
  line-height: 140px;
   line-height: calc(38px + (120 - 38) * ((100vw - 300px) / (1600 - 300))) !important;
  height: 140px;
   height: calc(38px + (120 - 38) * ((100vw - 300px) / (1600 - 300))) !important;
  opacity: 0;
  animation: marquee 16s linear infinite;
}


ul li:hover .ticker {
  opacity: 1;
  transition: 0.4s;
  cursor: pointer;
}
.item-collection-1 {
  position: relative;
  heigth: 140px;
   height: calc(38px + (120 - 38) * ((100vw - 300px) / (1600 - 300))) !important;
  line-height: 140px;
  line-height: calc(38px + (120 - 38) * ((100vw - 300px) / (1600 - 300))) !important;
  font-size: 90px;
   font-size: calc(24px + (70 - 24) * ((100vw - 300px) / (1600 - 300))) !important;
  padding: 0;
  margin: 0;
  left: 0%;
  animation: swap 16s linear infinite;
}

.item {
  display: inline-block;
  padding: 0;
  font-size: 90px;
  font-size: calc(24px + (70 - 24) * ((100vw - 300px) / (1600 - 300))) !important;
  color: black;   
  font-weight: 800;
  font-family: sans-serif;
  line-height: 140px;
  line-height: calc(38px + (120 - 38) * ((100vw - 300px) / (1600 - 300))) !important;
  padding: 0;

  -webkit-text-stroke: 1px white;
  color: transparent;
}

/* Transition */
@keyframes marquee {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100%)
  }
}

@keyframes swap {
  0%, 50% {
    left: 0%;
  }
  50.01%,
  100% {
    left: 100%;
  }
}


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

  .ticker {
    display: inline-block;
    font-size: 90px;
    font-size: calc(24px + (70 - 24) * ((100vw - 300px) / (1600 - 300))) !important;
    line-height: 140px;
     line-height: calc(38px + (120 - 38) * ((100vw - 300px) / (1600 - 300))) !important;
    height: 140px;
     height: calc(38px + (120 - 38) * ((100vw - 300px) / (1600 - 300))) !important;
    opacity: 1;
    animation: marquee 16s linear infinite;
    /* margin-top: calc(38px + (140 - 38) * ((100vw - 300px) / (1600 - 300))) !important; */
  }
  ul li .ticker {
    opacity: 1 !important;
    transition: 0.4s;
  }
.item {
  display: inline-block;
  padding: 0;
  font-size: 90px;
  font-size: calc(10px + (70 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
  color: black;   
  font-weight: 600;
  font-family: sans-serif;
  line-height: 140px;
  line-height: calc(38px + (120 - 38) * ((100vw - 300px) / (1600 - 300))) !important;
  padding: 2em 0 0 0;
  -webkit-text-stroke: 0 white;
  color: #f0f0f0;
  letter-spacing: 0 !important;
}

}






/*

GRID SECTION MODULES REFERENZEN


*/



.homepage {
	background-color: #ffffff;
	position: relative;
	z-index: 2;
}



/*--------------------------------------------------------------
## Grid mode
--------------------------------------------------------------*/
.homepage {
	background-color: #ffffff;
	padding: 0;
	margin: 0 50px;
	padding: 50px;
	/* not nessesary??  overflow: hidden; */

	/* NEW */
	background: #2e2e2e;
	margin:0;
}

.night-mode-on {
	background-color: black;
	color: white;
}

.grid::after {
	content: '';
	display: block;
	clear: both;
}

.grid-item {
	float: left;

  /*overflow: hidden; removed */
    position: absolute; /*this is required for clip-paths to work*/
    -webkit-clip-path: inset(0); /* safari*/
    clip-path: inset(0);
    clip: rect(0px, auto, auto, 0px); /* IE11/Edge (not that IE11 supports sticky anyway!) */
	position: absolute;
	/* z-index: 4; */
}

.post-title {
	position: absolute;
	cursor: none;
	font-size: 6vw;
  font-size: calc(40px + (100 - 40) * ((100vw - 300px) / (1600 - 300))) !important;
	color: #ffffff;
	line-height: 0.75;
	letter-spacing: calc(0px + (-4 - 0) * ((100vw - 300px) / (1600 - 300))) !important;;
	width: 100%;
	margin: 0;
	z-index: 1;
	will-change: left, top, scroll-position;
	-webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); 
    font-family: 'Space Grotesk';
    text-align: left !important;
}



.postTitle,
.postTitle .en_text,
.contact__join__text .en_text,
.postTitle .gr_text,
.contact__join__text .gr_text {
	height: 100%;
	width: 100%;
	cursor: none;
	    cursor: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUwLjk3MSA1N0w4LjAzNDc5IDE0LjA2MzdMOC41NjIwMyA0NC4xOTcxTDAgMzUuNjM1VjBIMzUuNjM1TDQ0LjE5NzEgOC41NjIwM0wxMy45NjA2IDguMDM0NzlMNTcgNTAuOTcxTDUwLjk3MSA1N1oiIGZpbGw9IiNGRkY4NEIiLz4KPC9zdmc+Cg==) 10 10, pointer;

	line-height: 0.77;
	/* white-space: nowrap; */
}

.page-id-19391 .postTitle {
	white-space: nowrap
}

img.postTitle {
	max-width: max-content;
	max-height: max-content;
	display: block;
}

.en_text:lang(el) {
	display: none;
}

.gr_text:lang(en) {
	display: none;
}

.post-link {
	display: block;
}

.post-image {
	z-index: 3;
	width: 100%;
	max-width: 100%;
}

.hover-image {
	display: block;
	cursor: none;
	    cursor: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUwLjk3MSA1N0w4LjAzNDc5IDE0LjA2MzdMOC41NjIwMyA0NC4xOTcxTDAgMzUuNjM1VjBIMzUuNjM1TDQ0LjE5NzEgOC41NjIwM0wxMy45NjA2IDguMDM0NzlMNTcgNTAuOTcxTDUwLjk3MSA1N1oiIGZpbGw9IiNGRkY4NEIiLz4KPC9zdmc+Cg==) 10 10, pointer;

	pointer-events: none;
	position: absolute !important;
	width: 100%;
	left: 0;
	top: 0;
}

.title-behind-image {
	z-index: 2 !important;
}

.title-behind-video {
	z-index: 2 !important;
}

.title-over-hover-image {
	z-index: 6 !important;
}



.outline-title {
	color: transparent !important;
	-webkit-text-stroke-width: 1.7px;
	-webkit-text-stroke-color: #000000;
}



.gridit {
	align-items: flex-start;
}
.lll {
	display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 16px;
  left: 0;
 	cursor: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUwLjk3MSA1N0w4LjAzNDc5IDE0LjA2MzdMOC41NjIwMyA0NC4xOTcxTDAgMzUuNjM1VjBIMzUuNjM1TDQ0LjE5NzEgOC41NjIwM0wxMy45NjA2IDguMDM0NzlMNTcgNTAuOTcxTDUwLjk3MSA1N1oiIGZpbGw9IiNGRkY4NEIiLz4KPC9zdmc+Cg==) 10 10, pointer;
} 



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

  .lll {
    width: 100% !important;
    padding: 16px 16px 16px 16px !important;
  }
  .grid-item {
    /* margin-bottom: 20px !important; */
  }

 }

/*
 .rrr {
	display: grid;
	width: 30%;
	gap: 5px;
	gap: 5px;
  position: sticky;
  width: 20%;
  display: grid;
  position: sticky;
  top: 0;
  display: grid;
  gap: 5px;

  position: sticky;
  bottom: 0;
  right: 0;
  z-index: 9999999;
}

*/

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


.lll {
  width: 100%;
  padding: 16px;
}
/*
.rrr {
  width: 35% !important;
}
*/
.grid-item {
  width: calc(50% - 8px);
}
.content__section p {
    text-align: left;
    margin: 1em 60px 1em 0 !important;
  }

}


@media screen and (max-width: 1000px) {
  .lll {
    width: calc(100% - 16px);
  }
  /*
  .rrr {
    display: none;
  }
  */
}


/* --------------------------------  */


 .tab-content {
      color: #d0d0d0;
      color: #a6a6a6;
      transition: all .8s;
   }

   .tab-content.active {
      color: #000;
      color: #000;
      transition: all .8s;
   }


/* --------------------------------- */




/* CONTENTS STYLE2.CSS  */


.gridit {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    /* width: calc(100% - 2em); */
    width: 100%;
    margin: 0 auto;
    /* background: deeppink; */
    box-sizing: border-box;
    padding: 0 0 0 0;
    /* max-width: 1000px; */

}
.gridit .grid-item {
  /* width: calc(50% - 0.5em); */
  width: calc(50% - 9px);
  float: left;
  list-style: none;
  box-sizing: border-box;
/*overflow: hidden; removed */
    position: absolute; /*this is required for clip-paths to work*/
    -webkit-clip-path: inset(0); /* safari*/
    clip-path: inset(0);
    clip: rect(0px, auto, auto, 0px); /* IE11/Edge (not that IE11 supports sticky anyway!) */
  cursor: none;
  position: relative;
 cursor: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUwLjk3MSA1N0w4LjAzNDc5IDE0LjA2MzdMOC41NjIwMyA0NC4xOTcxTDAgMzUuNjM1VjBIMzUuNjM1TDQ0LjE5NzEgOC41NjIwM0wxMy45NjA2IDguMDM0NzlMNTcgNTAuOTcxTDUwLjk3MSA1N1oiIGZpbGw9IiNGRkY4NEIiLz4KPC9zdmc+Cg==) 10 10, pointer;

}
@media screen and (max-width: 1000px) {
  .gridit .grid-item {
    width: 100%;
  }
}
 .gridit .grid-item img {
    width: 100%;
    height: auto !important;
    float: left;
    display: block;
    cursor: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUwLjk3MSA1N0w4LjAzNDc5IDE0LjA2MzdMOC41NjIwMyA0NC4xOTcxTDAgMzUuNjM1VjBIMzUuNjM1TDQ0LjE5NzEgOC41NjIwM0wxMy45NjA2IDguMDM0NzlMNTcgNTAuOTcxTDUwLjk3MSA1N1oiIGZpbGw9IiNGRkY4NEIiLz4KPC9zdmc+Cg==) 10 10, pointer;
   }
.hover-image {
 top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
 }
}
 img {
    height: auto;
    /* Make sure images are scaled correctly. */
}
}

html {
    box-sizing: border-box;
}


/* CONTENTS STYLE.CSS  */

:root {
  --x: 0px;
  --y: 0px;
}

.homepage {
  width: 100%;
  background: #fff;
  padding: 150px 0 150px 0px;
  padding-top: calc(10px + (100 - 10) * ((100vw - 300px) / (1600 - 450))) !important;
  padding-right: 0 !important;
  padding-bottom: calc(10px + (100 - 10) * ((100vw - 300px) / (1600 - 450))) !important;
  padding-left: 0 !important;
  background: #191b1d;
  background: lightgray;
  position: relative;
}



/* OUTLINED  */




.grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  width: calc(100% - 2em);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: deeppink;
  padding: 1em;
}



.sticky {
	gap: 5px;margin-top: auto;
  position: sticky;
  width: 100%
  display: grid;
  color: #b5b5b5;
    position: sticky;
    top: 0;
    bottom: 0;

    display: grid;
  gap: 5px;
  /* margin-top: auto; */
  position: sticky;
  top: 70vh;
  right: 0;
  margin-left: auto;
  z-index: 9999999;
}
.sticky p {
	color: #a7a7a7;
	line-height: 1.1em;
	font-size: 16px;
	font-weight: 450;
	text-align: left !important;
	}


.grid-item:hover .info2 {
	opacity: 1;
	transition: opacity 0.4s;
}
.info2 {
	opacity: 0;
	width: 50%;
	height: auto;
	background: #191b1d;
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-top: -25%;
	margin-left: -25%;
	display: block;
	padding: 0;
	transition: opacity 0.4s;
}
.info2 p {
	color: #d0d0d0;
	color: #fff;
	font-family: 'Space Grotesk';
	font-size: 14px;
	margin: 0;
	padding: 15px 15px 50px 15px !important;
}

.circle {
	border: 1px solid yellow;
	border-radius: 40px;
	display: inline-block !important;
	width: auto !important;
	max-width: auto !important;
	padding: 4px 8px;
}






/* FLUID FLUID FLUID */




.content-w p, .content-w ul li {
font-size: clamp(0.938rem, 0.636vw + 0.818rem, 1.375rem) !important;
line-height: clamp(1.266rem, 1.395vw + 1.004rem, 2.225rem) !important;
}

/*
body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

body {
  font-size: calc(15px + (22 - 15) * ((100vw - 300px) / (1600 - 300)));
}
*/


/* P & UL FLUID SIZES */


.content-w p, .content-w ul li {
  font-size: calc(15px + (20 - 15) * ((100vw - 300px) / (1600 - 300))) !important;
  line-height: calc(21px + (32 - 21) * ((100vw - 300px) / (1600 - 300))) !important;
  color: red !important;
  font-weight: 316 !important;
}
@media screen and (min-width:1601px) {
  .content-w p, .content-w ul li {
    font-size: 20px !important;
    line-height: 1.618em !important;
    color: blue !important;
  }
}
@media screen and (max-width: 299px) {
  .content-w p, .content-w ul li {
    font-size: 15px !important;
    line-height: 1.4em !important;
    color: orange !important;
  }
}
.content-w p + p, .content-w p + ul, .content-w ul + p {
  margin-top: calc(21px + (32 - 21) * ((100vw - 300px) / (1600 - 300))) !important;
}

.content-w ul {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1.1rem !important;
  margin-left: 0 !important;
}
.content ul li {
  padding-left: calc(2px + (4 - 2) * ((100vw - 300px) / (1600 - 300))) !important;
}
@media screen and (max-width:800px) {
    .content-w p {
      hyphens: auto;
    }
}


/* 
H2 + COMBINATIONS 
*/
.content__main span {
	font-size: 120px;
  	font-family: var(--font-scroll-text);
  	line-height: 1;
  	text-transform: lowercase;
  	font-weight: normal;
  	max-width: 80%;
	   font-size: calc(40px + (100 - 40) * ((100vw - 300px) / (1600 - 300))) !important;
  	line-height: 1em;
  	/* margin-top: calc(18px + (0 - 18) * ((100vw - 300px) / (1600 - 300))) !important; */ /* Np padding needed for big screens, section padding is sufficiant */ 
  	letter-spacing: -0.047em !important;
}
.content__main p {
	margin: 0 !important;
	padding: 0;
}
.content__main p span {
	font-size: calc(19px + (28 - 19) * ((100vw - 300px) / (1600 - 300))) !important;
}

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

	.content__main span {
		max-width: 100% !important;
	}

}


h2.content__text {
  font-size: calc(25px + (70 - 25) * ((100vw - 300px) / (1600 - 300))) !important;
  line-height: 1em;
  margin-top: calc(18px + (0 - 18) * ((100vw - 300px) / (1600 - 300))) !important; /* Np padding needed for big screens, section padding is sufficiant */
  padding-top: 0;
  letter-spacing: -0.047em;
  text-shadow: calc(8px + (24 - 8) * ((100vw - 300px) / (1600 - 300))) calc(6px + (18 - 6) * ((100vw - 300px) / (1600 - 300))) calc(4px + (8 - 4) * ((100vw - 300px) / (1600 - 300))) rgba(0,0,0,0.25) !important;
  word-spacing: -0.2em;
}
h2.content__text + p {
 margin-top: calc(21px + (32 - 21) * ((100vw - 300px) / (1600 - 300))) !important;
}


p.big {

  font-size: calc(17px + (24 - 17) * ((100vw - 300px) / (1600 - 300))) !important;
  line-height: 1.46em;
  padding: calc(17px + (8 - 17) * ((100vw - 300px) / (1600 - 300))) calc(10px + (60 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
  letter-spacing: 0;
  color:#fff;
  max-width: 900px;
  margin: 0 !important;
}
@media screen and (max-width: 800px) {

  p.big {
    hyphens: auto;
  }

}

.content-w h3 {
  font-size: calc(23px + (35 - 23) * ((100vw - 300px) / (1600 - 300))) !important;
  line-height: 1.2em;
  margin-top: 0;
  padding: 0;
}
.content-w p + h3 {
  padding-top: 2.3em !important;  /* 3x lineheight */
}
.content-w h3 + p {
  margin-top: calc(21px + (32 - 21) * ((100vw - 300px) / (1600 - 300))) !important; /* 1x p-line-height */
}


/* FLUID SECTION PADDINGS */

.section, .content-w {
  padding: calc(33px + (120 - 33) * ((100vw - 450px) / (1600 - 450))) !important;
}
@media screen and (max-width: 499px) {
  .section .content-w {
    padding: 1.4rem !important;
    background: lightgreen !important;
  }
}

/* FONT PADDING 3-times own line-height OR metric x-times fluid p line-height? */


.content-w p, .content-w ul li {
  color: #000 !important;
}


img.logo {
	width: calc(50px + (120 - 50) * ((100vw - 300px) / (1600 - 450))) !important;
	top: calc(30px + (80 - 30) * ((100vw - 300px) / (1600 - 450))) !important;
	left: calc(20px + (40 - 20) * ((100vw - 300px) / (1600 - 450))) !important;
  height: auto !important;
}
h2.content__text {
	top: calc(30px + (80 - 30) * ((100vw - 300px) / (1600 - 450))) !important;
	margin-top: 0 !important;
}



h1 {
  font-size: calc(45px + (120 - 45) * ((100vw - 300px) / (1600 - 300))) !important;
}



/* ACC  */

.mast {
  position: relative;
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100%;
  color: #fff;
  margin-bottom: 1px;
}

/* PROBLEMATIC WITH SLIDER */
.mast:after {
  content: "";
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.mast.normal:after {
  content: "";
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 00%;
  background: rgba(0, 0, 0, 0.0);
}


/* NORMAL CONTENT SECTION */

.normal {
  height: auto !important;
  max-height: auto !important;
  padding: calc(100px + (150 - 100) * ((100vw - 300px) / (1600 - 300))) 0 !important;
  display: block;
  float: left;
  width: 100%;

  background: #f3f3f3;
}

@media screen and (max-width: 850px) {
  .normal p, .normal h2 {
    padding-left: 50px;
    padding-right: 50px;
  }
}
@media screen and (max-width: 650px) {
  .normal p, .normal h2 {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.normal h2, .normal p {
  color: #000;
  width: 100%;
  margin: 0 auto;
  max-width: 800px;
}
.button {
  margin: 100px 0 0 0;
 /*
  background-color: #6309e1;
  background-color: #6e80de; */
  background-color: #556AD8;
  color: #fff;
  font: 20px 'Poppins';
    font-weight: normal;
    line-height: normal;
    line-height: 77px;
    display: block;
  font-weight: 600;
  border-style: none;
  border-width: 0;
  border-radius: 99px;
  transition: background-color 0.3s;
  padding: 0 40px;
  margin-top: 50px;
  float: left;
}
.button a {
  width: 100%;
  height: 100%;
  color: #fff;
}
.button:hover a {
  color: #fff;
}

/* ACC END  */


.tags {
  color: #fff;
  width: 50%;
  display: block;
  height: auto;
  position: absolute;
  z-index: 999999;
  line-height: 1.2em;
  padding: 0;
  margin: 20px auto;
  text-align: left;
  font-size: 14px;
  font-size: calc(11px + (14 - 11) * ((100vw - 300px) / (1600 - 300))) !important;
  width: auto;
  display: block;
  letter-spacing: 0;
  line-height: 1em;
  font-family: 'Poppins', sans-serif;
  -webkit-text-stroke-width: 0;
  -webkit-text-stroke-color: transparent;
  top: 50%;
  right: 0;
  transform: translateY(-0%) !important;
  display: block;
  visibility: visible;
  left: 0;
  margin: 4em 0 0 0;
  padding: 0;
}
.content .tags li {
  list-style: none;
  margin-bottom: 0.25em;
  padding: 4px 4px 5px 4px !important;
  background: #fe4357;
  color: #000;
  width: auto;
  float: right;
  clear: both;
  line-height: 0.88em;
  display: block;
}
.grid-item:hover .tags, .grid-item:active .tags {
  display: block;
  visibility: visible;
}



.slippery {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  pointer-events: none;
}

.clippy {
  padding: 0 0 0 0; 
  height: auto;
  position: sticky;
  top: 40vh; /* Former: 50vh  */
  margin: -100vh 16px 0 16px; /* Former: -50vh  */
  max-width: 100%;
  display: block;
}


.clippy h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 33px;
  font-size: calc(28px + (44 - 28) * ((100vw - 300px) / (1600 - 300))) !important;
  line-height: 0.88em;
  margin: 0;
  padding: 0 0 16px 16px;
  text-align: right;
  text-shadow: 5px 10px 40px rgba(0,0,0,0.4);
  color: #fff !important;
  opacity: 1 !important;
}


@media screen and (max-width: 1100px) {
  .grid-item {
    width: 100% !important;
  }
}

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


  .info {
    bottom: 20px;
    text-align: left;
    transform: rotate(180deg);
  }

}


.grid-item {
  width: 100%;
}


@media (hover:hover) {
  .grid-item {
    width: calc(50% - 8px);
  }

  .clippy h3 {
    display: none;
    line-height: 0;
    visibility: hidden;
  }
}

@media (pointer:coarse) {
  .clippy h3 {
    display: block;
    line-height: auto;
    visibility: visible;
    z-index: 999999 !important;
  }
}

.footnote {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  font-family: 'Poppins', sans-serif;
  position: absolute;
  bottom: 20px;
  color: #999 !important;
}
.footnote a {
  display: inline-block;
  line-height: 3em;
  padding: 12px 24px 12px 0;
  width: auto;
  float: left;
  text-transform: uppercase;
}


@media (hover: coarse) {
  p {
    hyphens: auto !important;
  }
}

.hello {
  font-size: calc(34px + (70 - 34) * ((100vw - 300px) / (1600 - 300))) !important;
}




.datenschutz {
  padding-left: calc(10px + (60 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
  color: #000;
  max-width: 800px;
  margin-left: 17px;
  font-family: 'Poppins';
}