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

https://engageinteractive.co.uk/blog/em-vs-rem-vs-px
https://elementor.com/help/whats-the-difference-between-px-em-rem-vw-and-vh/#:~:text=VW%20is%20useful%20for%20creating,up%20the%20entire%20viewport's%20height.

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

/*html {
		font-size: 62.5%;
		line-height: 62.5%;
	  	height: 100%;
	  	width: 100%;
	  	overflow: hidden;	  	
	}	
	body {
		margin: 0;
		-webkit-overflow-scrolling: touch;
		height: 100%;  
		overflow-y: auto;	
		overflow-x: hidden;	
		color: var(--n20);
	}
	*/

/*5.6 rem - 600 */
@font-face {
  font-family: "BarlowSemiCondensedExtraBold";
  src: url(../fonts/BarlowSemiCondensed-ExtraBold.ttf);
}

/*3.6 rem - 500*/
@font-face {
  font-family: "BarlowSemiCondensedSemiBold";
  src: url(../fonts/BarlowSemiCondensed-SemiBold.ttf);
}

/*2.4 rem - 600*/
@font-face {
  font-family: "BarlowSemiCondensedMedium";
  src: url(../fonts/BarlowSemiCondensed-Medium.ttf);
}

/*2.4 rem - 400*/
@font-face {
  font-family: "BarlowSemiCondensedRegular";
  src: url(../fonts/BarlowSemiCondensed-Regular.ttf);
}

/*1.8 rem - 500*/
@font-face {
  font-family: "BarlowMedium";
  src: url(../fonts/Barlow-Medium.ttf);
}

/*1.8 rem - 400*/
@font-face {
  font-family: "BarlowRegular";
  src: url(../fonts/Barlow-Regular.ttf);
}

html {
  font-size: 62.5%;
  line-height: 62.5%;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--n20);
}

/* This makes the \n in the lang.js json part break into a new line */
.lang {
  white-space: pre-line;
}

/* ------------------------------ */
/* FONTS & TYPOGRAPHY */
/* ------------------------------ */

h1 {
  font-family: "BarlowSemiCondensedSemiBold", sans-serif;
  font-size: 5.6rem;
  font-weight: 600;
  line-height: 7.2rem;
  margin: 0;
}
h1.accent {
  font-weight: 800;
}

h2 {
  font-family: "BarlowSemiCondensedMedium", sans-serif;
  font-size: 3.6rem;
  font-weight: 500;
  line-height: 4.8rem;
  margin: 0;
}

h3 {
  font-family: "BarlowSemiCondensedSemiBold", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 3.8rem;
  margin: 0;
}

h4 {
  font-family: "BarlowMedium", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.4rem;
  margin: 0;
}

h2.accent,
h3.accent,
h4.accent {
  font-weight: 700;
}
p.accent {
  font-weight: 700;
}

p {
  font-family: "BarlowRegular", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 3.2rem;
  margin: 0;
}
p.small {
  font-family: "BarlowRegular", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.2rem;
  margin: 0;
}

.subline {
  font-family: "BarlowSemiCondensedRegular", sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 3.8rem;
}
a {
  text-decoration: none;
}

.list ul li {
  margin-bottom: var(--sp100);
  padding-left: var(--sp100);
}

ul {
  padding-left: 15px;
  list-style-position: outside;
}

li::marker {
  margin-bottom: 10px;
}

/* ------------------------------ */
/* TEXTLINK */
/* ------------------------------ */
a.link {
  font-family: "BarlowSemiCondensedRegular", sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 3.8rem;
  color: var(--n60);
  position: relative;
}

a.inline-link {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
a {
  color: var(--h100);
  position: relative;
}
a:hover {
  color: var(--h100);
}
a.link:hover {
  color: var(--n20);
}

a:hover,
a.link:hover {
  cursor: pointer;
}

a:hover:after {
  background-color: var(--h100);
}
a.link:hover:after {
  background-color: var(--n20);
}
a:hover:after,
a.link:hover:after {
  position: absolute;
  content: "";
  height: var(--l100);
  width: 100%;
  left: 0px;
  bottom: -6px;

  animation-name: moveScale;
  animation-duration: var(--a100);
  transform-origin: left;
  animation-timing-function: ease;
}

a.link:active {
  opacity: 0.75;
}
a:active {
  opacity: 0.75;
}

a.resetLink:after {
  height: 0;
}

.download {
  color: var(--h100) !important;
  display: flex;
  font-family: "BarlowRegular", sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 400 !important;
  line-height: 3.2rem !important;

  width: fit-content;
}

.download:hover {
  color: var(--h100) !important;
}

.download:hover:after {
  background-color: var(--h100) !important;
}

.et-toggle-label {
  display: inline;
  padding-left: 8px;
}

.et-slider::after {
  display: none;
}

/* ------------------------------ */
/* KEYFRAMES */
/* ------------------------------ */

@keyframes moveScale {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

:root {
  /* ------------------------------ */
  /* BREAKPOINTS */
  /* ------------------------------ */
  --smartphone: 640px;
  --tablet-portrait: 768px;
  --tablet-landscape: 1024px;
  --desktop: 1280px;
  --desktop-hd: 1920px;
  --desktop-4k: 2560px;

  /* ------------------------------ */
  /* Lines */
  /* ------------------------------ */
  --l50: 0.1px;
  --l100: 1px;
  --l200: 2px;

  /* ------------------------------ */
  /* ANIMATION */
  /* ------------------------------ */
  --a100: 0.25s;
  --a200: 0.5s;
  --a300: 0.75s;
  --a400: 1s;
  --a800: 2s;
  --a1600: 4s;

  /* ------------------------------ */
  /* ABSTAENDE */
  /* ------------------------------ */
  --sp50: 0.8rem;
  --sp100: 1.4rem;
  --sp200: 2.4rem;
  --sp300: 3.2rem;
  --sp400: 4rem;
  --sp450: 4.8rem;
  --sp500: 6.4rem;
  --sp600: 8rem;
  --sp700: 10rem;
  --sp1400: 20rem;

  /* ------------------------------ */
  /* FARBEN */
  /* ------------------------------ */
  --h100: #146fff;
  --h40: #083a65;
  --n20: #081433;
  --n60: #838c99;
  --n80: #ccced1;
  --n90: #e0e2e5;
  --n96: #f2f3f5;
  --n100: #ffffff;
  --b96: #a2d2f5;
  --t96: #a2e1f5;
  --y98: #faeb9b;
  --r96: #feada8;
  /* ------------------------------ */
  --b84: #101867;
}