/* lato-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/lato-v24-latin-regular.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lato-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/lato-v24-latin-700.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lato-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('assets/fonts/lato-v24-latin-900.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  --color-hue-brand: 210;
  --color-hue-accent: 77;
  --color-hue-neutral: 0;
  --color-background: hsl(var(--color-hue-brand), 100%, 24%);
  --color-background-light: hsl(var(--color-hue-brand), 100%, 50%);
  --color-background-rect: hsla(var(--color-hue-brand), 100%, 24%, 0.3);
  --color-background-tabs: hsl(var(--color-hue-neutral), 0%, 43%);
  --color-background-tabs-hover: hsl(var(--color-hue-neutral), 0%, 53%);
  --color-foreground-tabs: hsl(var(--color-hue-neutral), 0%, 100%);
  --color-background-marker: hsl(var(--color-hue-accent), 100%, 38%);
  --color-foreground-marker: hsl(var(--color-hue-accent), 100%, 100%);
  --color-border-marker: hsl(var(--color-hue-brand), 100%, 100%);
  --color-shadow-marker: hsl(var(--color-hue-brand), 100%, 5%);
  --color-background-layer: hsla(var(--color-hue-brand), 100%, 2.4%, 0.96);
  --color-foreground-layer: hsl(var(--color-hue-brand), 100%, 100%);
  --color-h1: hsl(var(--color-hue-accent), 100%, 38%);
  --size-marker: 40px;
  --z-index-hidden: -1;
  --z-index-rect: 1;
  --z-index-tab: 2;
  --z-index-nav: 3;
  --z-index-layer: 4;
  /* --- */
  height: 100dvh;
  overflow: hidden;
  background-color: #000;
  font-size: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 1.6rem;
}

h1 {
  margin-block: 0 0.25em;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-h1);
}

p {
  margin-block: 0;
}

::backdrop {
  background-color: transparent;
}

.app {
  height: 100dvh;
  background-color: var(--color-background);
  background-image: radial-gradient(circle at 70% 70%, var(--color-background-light) 0%, var(--color-background) 40%);
}

.logo {
  position: absolute;
  top: 45px;
  left: 50px;
  z-index: 20;
  width: 320px;
}

.fullscreenbutton {
  display: none;
}

/* Background rect */
.slanted-rect {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-index-rect);
  mask-image: url('assets/images/shape-slanted-bar.svg');
  mask-repeat: no-repeat;
  mask-position: 42% 0%;
  mask-size: auto 100%;
  /* background-color: var(--color-background-rect); */
  background-image: linear-gradient(38.3deg, hsla(var(--color-hue-brand), 100%, 24%, 0) 0%, hsla(var(--color-hue-brand), 100%, 24%, 0.25) 100%);
  mix-blend-mode: multiply;
}

.slanted-rect-small {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-index-rect);
  mask-image: url('assets/images/shape-slanted-bar.svg');
  mask-repeat: no-repeat;
  mask-position: 60% 100%;
  mask-size: auto 60%;
  background-color: var(--color-background-marker);
  /* mix-blend-mode: screen; */
}

/* Tab-Navigation */
.tab-navigation {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-index-nav);
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: transparent;
  pointer-events: none;
}

.tab-navigation button {
  border: none;
  padding: 14px 20px;
  cursor: pointer;
  color: var(--color-foreground-tabs);
  background: var(--color-background-tabs);
  font-family: inherit;
  font-size: inherit;
  pointer-events: all;
}

.tab-navigation button:hover {
  background-color: var(--color-background-tabs-hover);
}

.tab-navigation button.active {
  background-color: var(--color-background-tabs-hover);
}

/* Bilder Container */
.tab-content {
  position: absolute;
  z-index: var(--z-index-hidden);
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
}

.tab-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tab-description {
  position: absolute;
  bottom: 86px;
  right: 40px;
  width: 37%;
  color: var(--color-foreground-layer);
}


/* Marker Kreise */
.marker {
  --offset-marker: calc(-0.5 * var(--size-marker));
  position: absolute;
  width: var(--size-marker);
  height: var(--size-marker);
  background-color: var(--color-background-marker);
  border-radius: 50%;
  /* border: 2px solid var(--color-border-marker); */
  cursor: pointer;
  transform: translate(var(--offset-marker), var(--offset-marker));
  filter: drop-shadow(0 0 1rem var(--color-shadow-marker));
  animation: marker-pulse 2s ease 0s infinite normal forwards;
}

@keyframes marker-pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.325);
  }

  100% {
    transform: scale(1);
  }
}

/* Layer mit Video */
.layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index-hidden);
  /* display: flex;
  justify-content: center;
  align-items: center; */
  display: grid;
  grid-template-rows: 80px auto;
  row-gap: 30px;
  width: 100dvw;
  height: 100dvh;
  padding-block: 50px;
  padding-inline: 67px;
  background-color: var(--color-background-layer);
  opacity: 0;
}

.layer.active {
  z-index: var(--z-index-layer);
  opacity: 1;
}

/* .layer iframe {
  width: 80%;
  height: 80%;
} */

.layer video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.close-layer {
  /* position: absolute;
  top: 57px;
  right: 62px; */
  justify-self: end;
  color: var(--color-foreground-layer);
  cursor: pointer;
  font-size: 60px;
  line-height: 1;
}