/*
********************************CSS by Lazlo Weiss***********************************
 */
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("../fonts/Inter.var.woff2") format("woff2");
}

/*
******************************Variables************************************+
 */
:root {
  font-size: calc(.5rem + .1vmin + .125vmax);
  /* Root Font Size */
  --ff: "Inter var";
  /*Font (Google Font Inter)*/
  --fs: 2rem;
  /*normal Fontsize (2rem = 32px)*/
  --fs-s: 1rem;
  /*small Fontsize*/
  --space: 2rem;
  /*normal Spacing*/
  --space-l: calc(var(--space)*2);
  /*large Spacing*/
  --space-s: calc(var(--space)/2);
  /*small Spacing*/
  --transform-time: 300ms;
  /* Fixing mobile height */
  --vh:
}

/*
********************************Style for Everything*****************************
 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--ff);
}

video::-webkit-media-controls-panel {
  display: none !important;
  opacity: 0 !important;
}

/*

**************************************Navbar*****************************************************

 */
#navbar {
  position: fixed;
  height: var(--space-l);
  width: 100%;
}

.nav-hover {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.bar {
  height: 100%;
  margin-left: var(--space);
  margin-right: var(--space);
  padding-top: 1rem;
  padding-bottom: 1rem;
  transform: rotate(0deg);
  transition: transform var(--transform-time) ease;
}

#nav {
  overflow: hidden;
  display: flex;
  list-style-type: none;
  height: var(--space-l);
  justify-content: space-between;
  align-items: center;
  padding-left: var(--space);
  padding-right: var(--space);
  transform: translateY(-8rem);
  transition: transform var(--transform-time) ease;
}

a {
  text-decoration: none;
  font-size: var(--space);
  color: #000;
  /* font-variation-settings: 'wght'500;
  transition: font-variation-settings var(--transform-time) ease; */
}

.linkhover {
  display: block;
  font-variation-settings: 'wght'500;
  transition: font-variation-settings var(--transform-time) ease;
}

/*Font weight incresing while hovering*/
.linkhover:hover {
  font-variation-settings: 'wght'700;
}

/*Bar rotating by 90degres while hovering*/
#navbar:hover .bar {
  transform: rotate(90deg);
}

/*Navbar moving in while hovering*/
#navbar:hover #nav {
  transform: translateY(-4rem);
}

/*

**************************************Content*****************************************************

 */
#wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: auto;
}

#content {
  list-style-type: none;
  padding-top: 8rem;
  padding-bottom: 8rem;
  display: flex;
  width: 100vw;
  height: 100vh;
}

.inhalte {
  height: 100%;
  padding-left: var(--space);
  padding-right: var(--space);
}

.header-inhalt {
  overflow: hidden;
  display: flex;
  height: var(--space-l);
  align-items: center;
}

.bar-content {
  height: 100%;
  width: auto;
  margin-left: var(--space);
  margin-right: var(--space);
  padding-top: 1rem;
  padding-bottom: 1rem;
  transform: rotate(0deg);
  transition: transform var(--transform-time) ease;
}

/*Bar rotating by 90degres while hovering*/
.inhalte:hover .bar-content {
  transform: rotate(90deg);
}

.headline {
  font-size: var(--space);
  line-height: var(--space);
  font-weight: 500;
  transform: translateY(var(--space-l));
  transition: all var(--transform-time) ease;
}

.inhalte:hover .headline {
  transform: translateY(0px);
}

.img {
  max-height: calc(100% - 4rem);
  width: auto;
  min-width: 100%;
  max-width: calc(100vw - var(--space-l));
}



/*

**************************************Footer*****************************************************

 */
#footer {
  background-color: #fff;
  align-items: center;
  bottom: 0;
  position: fixed;
  width: 100%;
  transform: translateY(calc(100% - var(--space-l)));
  transition: transform var(--transform-time) ease;
  padding-bottom: var(--space-s);
}

/*Footer moving in while hovering*/
#footer:hover {
  transform: translateY(0);
}

.foot-hover {
  height: var(--space-l);
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.bar-footer {
  height: 100%;
  margin-left: var(--space);
  margin-right: var(--space);
  padding-top: 1rem;
  padding-bottom: 1rem;
  transform: rotate(0deg);
  transition: transform var(--transform-time) ease;
}

/*Bar rotating by 90degres while hovering*/
#footer:hover .bar-footer {
  transform: rotate(90deg);
}

/*pushing footer-content same position as navbar-content*/
#foot {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

#foot>li {
  margin-left: auto;
  margin-right: auto;
}

.footer-left {
  line-height: var(--space);
}

.footer-center {
  line-height: var(--space);
}

.footer-right {
  line-height: var(--space);
}

/* Media Queries
*********************Note: Media queries aren't working at the moment (02.12.21)**************

*/
@media (max-width: 1500px) {}

@media (max-width: 1300px) {}

@media (max-width: 500px) {}

/* UPGRADES */
@media (hover: hover) {
  #wrapper {
    overflow-x: hidden;
  }

}

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.switcher>* {
  flex-grow: 1;
  flex-basis: calc((150ch - 100%) * 999);
}

.switcher> :nth-last-child(n+ 5),
.switcher> :nth-last-child(n+ 5)~* {
  flex-basis: 100%;
}