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

/*

0.  VARIABLES
1.  DEV
2.  TYPOGRPAHY
3.  MODULES
    3.1  SIGN-UP
4   MISC.
5.  COMPONENTS
    5.1  COLLAPSIBLES 
    5.2  PAGE CONTROLD 
    5.3  VERSION INFO 
    5.4  COOKIE ALERT 
    5.5  SMILEY
6.  RESPONSIVE BEHAVIOR

*/

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

/* -------------------------------- 0. VARIABLES */
/* --------------------------------------------- */

:root {
  --sizeUnit: 20px;

  --borderWidth: 1.5px;
  --borderWidth_btn: 3px;
  --border_b: var(--borderWidth) solid black;
  --border_link: var(--borderWidth_btn) solid black;
  --border_btn: var(--borderWidth_btn) dashed blue;

  --color_text_dark: #cfd0d1;
  --color_active_light: #0000ff;
  --color_active_dark: #00ff00;

  --trans_width: width 0.5s ease;
  --trans_opacity: opacity 0.3s ease;
}

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

/* -------------------------------- 1. DEV */
/* --------------------------------------- */

body {
  max-height: 100vh;
  max-width: 100vw;
  overflow: hidden;
}

#mainContent {
  width: 55.5%;
}
#resources,
#glossary {
  width: 25%;
}

.sectionWrapper {
  height: 609.5px;
  padding-top: 230px;
}

.sectionWrapper.scrollShadow::before,
.sectionWrapper.scrollShadow::after {
  content: "";
  position: absolute;
  top: 0;

  z-index: 999;
  pointer-events: none;
}
.sectionWrapper.scrollShadow::before {
  width: 99%;
  height: calc(var(--sizeUnit) * 3.5);
  background: linear-gradient(0deg, rgba(245, 245, 245, 0) -10%, #f5f5f5 100%);
}
.dark .sectionWrapper.scrollShadow::before {
  background: linear-gradient(0deg, rgba(245, 245, 245, 0) -10%, #1f2227 100%);
}
.sectionWrapper.scrollShadow::after {
  height: 285px;
  width: 1%;
  right: 0;
  background: linear-gradient(0deg, rgba(245, 245, 245, 0) -20%, #f5f5f5 60%);
  transition: var(--trans_opacity);
}
.sectionWrapper.scrollShadow.scrolling::after {
  opacity: 0;
}
.dark .sectionWrapper.scrollShadow::after {
  background: linear-gradient(0deg, rgba(245, 245, 245, 0) -20%, #1f2227 60%);
}

.pageHeader,
.pageWrapper {
  padding: calc(var(--sizeUnit) * 1.25);
}

.pageHeader {
  z-index: 9999;
}
.pageWrapper {
  display: flex;
  height: auto;
  position: relative;
  margin-top: calc(-1 * (var(--sizeUnit) * 3));
}

.pageHeader,
footer {
  width: 100vw;
}
.pageHeader img {
  display: inline;
  pointer-events: none;
}

.content {
  margin-bottom: calc(var(--sizeUnit) * 3);
}

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

/* -------------------------------- 2. TYPOGRAPHY */
/* ---------------------------------------------- */

@font-face {
  font-family: "Monument Grotesk Mono";
  font-weight: normal;
  src: url("../fonts/monument-grotesk_mono.woff") format("woff");
}

body {
  font-family: "Monument Grotesk Mono";
  font-size: 22px;
  letter-spacing: -0.6px;
}

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

/* -------------------------------- 3. MISC. */
/* ----------------------------------------- */

hr,
.line {
  margin: calc(var(--sizeUnit) * 1.5) 0;
}

.line.top::before {
  content: "";
  width: 100%;
  border-top: 2px dashed;
  display: block;
}
.line.bottom::before {
  content: "";
  width: 100%;
  border-top: 2px dashed;
  display: block;
}

.pageWrapper .os-scrollbar.os-scrollbar-vertical {
  /* margin-top: calc(var(--sizeUnit) * 3); */
  padding: 0 0 0 7px !important;
}
.pageWrapper .os-scrollbar-handle {
  border-radius: 0 !important;
  background: black !important;
}
.pageWrapper .os-host-scrolling .os-scrollbar-handle {
  background: var(--color_active_light) !important;
}
.dark .pageWrapper .os-scrollbar-handle {
  background: var(--color_text_dark) !important;
}
.dark .pageWrapper .os-host-scrolling .os-scrollbar-handle {
  background: var(--color_active_dark) !important;
}

.hidden-vis {
  visibility: hidden;
}
.hidden-dis {
  display: none !important;
}

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

/* -------------------------------- 4. MODUELS */
/* ------------------------------------------- */

/* -------------------------------- 4.1 SIGN-UP */
/* -------------------------------------------- */

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: calc(var(--sizeUnit) * 1.25);
}

form {
  display: inline-flex;
  align-items: flex-end;
}
.signUpWrapper {
  position: relative;
}

.signUpInfo button {
  color: var(--color_active_light);
}
.dark .signUpInfo button {
  color: var(--color_active_dark);
}

.signUpInfo,
.signUpForm,
[class*="MsgWrapper"] {
  display: none;
}

.signUpWrapper.closed > .signUpInfo,
.signUpWrapper.open > .signUpForm,
.signUpWrapper.success > .successMsgWrapper,
.signUpWrapper.final > .finalMsgWrapper,
.signUpWrapper.final2 > .final2MsgWrapper {
  display: inline-block;
}

footer.confirmingSignUp > .signUpWrapper > button.close {
  display: none;
}

.inputWrapper {
  display: inline-block;
  margin-bottom: 5px;
}
.inputWrapper > span:first-of-type {
  color: black !important;
  pointer-events: none;
}
.dark .inputWrapper > span:first-of-type {
  color: var(--color_text_dark) !important;
}

.cursorWrapper {
  display: inline-flex;
  cursor: pointer;
}
.cursorWrapper:hover {
  color: var(--color_active_light);
}
.dark .cursorWrapper:hover {
  color: var(--color_active_dark);
}
.cursorWrapper > input {
  border: none;
  margin: 0px;
  padding: 0px;
  transform: translateY(-4px);
  background: transparent;
  caret-color: transparent;
  cursor: pointer;
  color: var(--color_active_light);
  letter-spacing: 0.5px;

  width: calc((14.141px * 14) + 1px);
}
.dark .cursorWrapper > input {
  color: var(--color_active_dark);
}
.cursorWrapper > span:first-of-type {
  margin-right: 4px;
}
.cursorWrapper > input:focus {
  outline: none;
}
.cursorWrapper > .inputUnderline {
  position: absolute;

  display: flex;
  pointer-events: none;
  letter-spacing: 0.5px;
}

[class*="MsgWrapper"] > .message > p {
  display: inline;
}

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

/* -------------------------------- 5. COMPONTENTS */
/* ----------------------------------------------- */

/* -------------------------------- 5.1 COLLAPSIBLES */
/* ------------------------------------------------- */

.collapseParent {
}
.collapseParent > .title:hover,
.collapseParent.open > .title {
  cursor: pointer;
  color: var(--color_active_light);
  text-decoration: underline;
  text-decoration-style: dashed;
}
.dark .collapseParent > .title:hover,
.dark .collapseParent.open > .title {
  color: var(--color_active_dark);
}

.collapseParent.closed {
}
.collapseParent.open {
  margin-bottom: 1.2em;
  color: var(--color_active_light);
}
.dark .collapseParent.open {
  color: var(--color_active_dark);
}
.collapseParent.disabled {
  opacity: 0.5;
}
.collapseParent > .title {
  display: inline-block;
}
.collapseParent > .title::after {
  float: right;
  margin-left: calc(var(--sizeUnit) * 0.5);
}

.collapseParent > .brackets {
  display: inline-flex;
}
.collapseParent.open > .brackets > .bracket-closed,
.collapseParent.open > .brackets > .dots {
  display: none;
}

.collapseParent > .title:hover + .brackets {
  color: var(--color_active_light);
}
.dark .collapseParent > .title:hover + .brackets {
  color: var(--color_active_dark);
}
.collapseParent > .brackets > .bracket-open::after {
  content: "{";
  letter-spacing: -3px;
}
.collapseParent > .brackets > .bracket-closed::after {
  content: "}";
}
.collapseParent > .brackets > .dots {
  display: inline-flex;
  margin-right: 5px;
}
.collapseParent > .brackets > .dots > span {
  letter-spacing: -8px;
}

.collapseChild {
  padding: 0 calc(var(--sizeUnit) * 1.5);
}
.collapseParent.closed + .collapseChild {
  display: none;
}
.collapseParent.open + .collapseChild {
  display: block;
  margin-bottom: 1.2em;
}
.collapseParent.open + .collapseChild::after {
  content: "}";
  margin-left: calc(-1 * (var(--sizeUnit) * 1.5));
  margin-top: 1.2em;
  color: var(--color_active_light);
  display: block;
}
.dark .collapseParent.open + .collapseChild::after {
  color: var(--color_active_dark);
}

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

/* -------------------------------- 5.2 PAGE CONTROLS */
/* -------------------------------------------------- */

.pageControlsWrapper {
  display: inline;
  float: right;
  line-height: 1;
}
.pageControlsWrapper span {
  user-select: none;
}
[class*="Controls"],
[class*="Controls"] span::after,
[class*="Controls"] a::after {
  display: inline-block;
}

[class*="Controls"] > .parent > span:first-of-type:hover {
  color: var(--color_active_light);
  cursor: pointer;
}
.dark [class*="Controls"] > .parent > span:first-of-type:hover {
  color: var(--color_active_dark);
  cursor: pointer;
}

.modeControls {
  float: right;
}
.langControls > .parent > span:nth-of-type(2)::after {
  transform: translateY(1px);
}
.modeControls > .parent > span:nth-of-type(2)::after {
  transform: translateY(2px);
}
.modeControls.light > .parent > span:nth-of-type(2)::after {
  content: "🌞";
}
.modeControls.dark > .parent > span:nth-of-type(2)::after {
  content: "🌛";
}
[class*="Controls"].closed > .parent > span:nth-of-type(3)::after {
  content: "}";
}
[class*="Controls"].open > .parent > span:nth-of-type(3)::after {
  content: ",";
}
.langControls.de > .parent > span:nth-of-type(2)::after {
  content: "DE";
}
.langControls.en > .parent > span:nth-of-type(2)::after {
  content: "EN";
}

[class*="Controls"] > .child {
  float: right;
  margin-top: 6px;
}
[class*="Controls"].closed > .child {
  display: none;
}
.modeControls > .child > span:first-of-type::after {
  transform: translateY(3px);
}
.modeControls.light > .child > span:first-of-type::after {
  content: "🌛";
}
.modeControls.dark > .child > span:first-of-type::after {
  content: "🌞";
}
.langControls.de > .child > a:first-of-type::after {
  content: "EN";
}
.langControls.en > .child > a:first-of-type::after {
  content: "DE";
}
.dark .langControls.open > .child > a:first-of-type:hover::after {
  color: var(--color_active_dark);
  text-decoration: underline;
}
.modeControls > .parent > span:not(:last-of-type):hover::after,
.modeControls > .child > span:first-of-type:hover::after,
.langControls > .parent > span:not(:last-of-type):hover::after {
  cursor: pointer;
  opacity: 0.5;
}

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

/* -------------------------------- 5.3 VERSION INFO */
/* ------------------------------------------------- */

.versionInfoWrapper {
  position: absolute;
  transform-origin: left bottom;
  bottom: calc(var(--sizeUnit) * 1.25);
  right: calc(var(--sizeUnit) * 1.25);
  opacity: 0.05;
  cursor: pointer;
}
.versionInfoWrapper:hover {
  opacity: 0.25;
}

.versionInfoWrapper > span::before {
  content: attr(data-version);
}
.versionInfoWrapper:hover > span::before {
  content: "";
}
.versionInfoWrapper:hover > span::after {
  content: "Impressum";
}

footer.imprintOpen .versionInfoWrapper {
  opacity: 0;
  pointer-events: none;
}

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

/* -------------------------------- 5.4 COOKIE ALERT */
/* ------------------------------------------------- */

footer.cookiesAllowed #cookieAlert {
  display: none;
}

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

/* -------------------------------- 5.5 SMILEY */
/* ------------------------------------------- */

.smiley {
  display: inline-flex;
  cursor: pointer;
}

.dark .smiley:hover {
  color: var(--color_active_dark);
}

.smiley > .animation {
  display: flex;
  pointer-events: none;
}
.smiley > .animation > span#eyes::before {
  content: ":";
}
.smiley > .animation > span#nose::before {
  content: "-";
}
.smiley > .animation > span#mouth {
  position: relative;
}
.smiley > .animation > span#mouth > span:first-of-type::before {
  content: ")";
}
.smiley > .animation > span#mouth > span:last-of-type {
  position: absolute;
  left: 0;
  opacity: 0;
}
.smiley > .animation > span#mouth > span:last-of-type::before {
  content: "°";
}
.smiley > .animation > .notes {
  display: flex;
  margin-left: 6px;
}
.smiley > .animation > .notes > span::before {
  content: "♪";
  font-family: "Arial";
  display: block;
}
.smiley > .animation > .notes > span:nth-of-type(1)::before {
  transform: translateY(-12px) translateX(0px);
}
.smiley > .animation > .notes > span:nth-of-type(2)::before {
  transform: translateY(-2px) translateX(3px);
}
.smiley > .animation > .notes > span:nth-of-type(3)::before {
  transform: translateY(-12px) translateX(11px);
}

.smiley > .hoverLayer {
  color: var(--color_active_light);
  position: absolute;
  visibility: hidden;
}
.smiley:hover > .animation {
  visibility: hidden;
}
.smiley:hover > .hoverLayer {
  visibility: visible;
}

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

/* -------------------------------- 5.6 IMPRINT */
/* -------------------------------------------- */

#imprint {
  display: none;
}
footer.imprintOpen #imprint {
  display: block;
}

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

/* -------------------------------- 6.  RESPONSIVE BEHAVIOR */
/* -------------------------------------------------------- */

@media only screen and (min-width: 961px) {
  .pageHeader img {
    position: absolute;
    z-index: 9999;
    width: calc((100vw - (var(--sizeUnit) * 2)) / 2);
    transition: var(--trans_opacity);
  }
  .pageHeader img.scrolling {
    opacity: 0;
  }
  footer {
  }
}

@media only screen and (min-width: 1800px) {
  body {
    font-size: 30px;
  }

  .sectionWrapper {
    height: 889.5px;
    padding-top: 283px;
  }

  .cursorWrapper > span:last-of-type {
    transform: translateX(3px);
  }

  .cursorWrapper > input {
    width: calc((19px * 14) + 1px);
  }

  .collapseParent > .brackets > .bracket-open::after {
    letter-spacing: -5px;
  }
  .collapseParent > .brackets > .dots > span {
    letter-spacing: -10px;
  }

  .line.top::before,
  .line.bottom::before {
    border-top: 3px dashed;
  }
}
/* ------------------------------ */
/* ------------------------------ */