@charset "UTF-8";
:root {
  /* Font */ 
  --copy-size: 16px;
  --sans-serif: Arial, sans-serif;
  /* Colors */
  --text: #29293A;
  --bg: #f6f8f7;
  --footer-color: #b8c4c0;
  --tk-blue: #00a0e3;
  --asv: 112px;
}

@font-face {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}
/* Reset */
body .doc-container {
  font-family: Arial, sans-serif;
}
body .doc-container .doc-content {
  padding-bottom: 0 !important;
}
body .doc-container .footer-asv-disclaimer {
  background: var(--footer-color);
  padding: 10px 0;
}
body .doc-container .header-asv {
  z-index: 101;
  position: relative;
}

.format, .background {
  color: var(--text);
  background: var(--bg);
}

.format h1 {
  font-weight: normal;
}
.format h2, .format h3, .format h4, .format h5, .format h6 {
  margin-bottom: 0.5em;
  font-weight: bold;
  font-family: var(--sans-serif);
}
.format h2 {
  font-size: 1.25em;
}
.format h3 {
  font-size: 19px;
}
.format h4, .format h5, .format h6 {
  font-size: 17px;
}
.format hr {
  background: var(--grey-700);
  height: 3px;
  width: 50px;
}
.format p {
  line-height: 1.5;
  margin: 1.5rem auto;
}
.format aside.fixed {
  position: fixed;
  display: block;
  z-index: 5;
  top: calc((100vh - 46px) / 3);
  transform: rotate(90deg);
  left: 37px;
  transform-origin: 0 0;
}
.format aside.fixed .cta {
  display: block;
  margin: 0 auto;
  text-decoration: none;
}
.format aside.fixed .cta button {
  margin: 0;
  border-radius: 0;
  font-size: 1.1em;
  text-decoration: none;
  animation: show-later 10s 1;
}

@keyframes show-later {
  0%, 45% {
    opacity: 0;
  }
  60%, 100% {
    opacity: 1;
  }
}
.progress-container {
  top: 58px;
}
.progress-container .progress-bar {
  background: var(--tk-blue);
}

/* Images */
.format figure .image-source {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-family: var(--sans-serif);
}
.format figure figcaption {
  font-size: 0.8em;
  margin: 0.5rem 0;
  font-family: var(--sans-serif);
  line-height: 140%;
}

/* Teaser */
.teaser article {
  padding: 1rem;
}
.teaser article h2 {
  font-weight: bold;
  margin: 0;
  font-size: 1.25em;
}
.teaser article p {
  margin: 1.5rem 0;
}
.teaser article button {
  border: 0;
  background: 0;
  padding: 0 0 0.5rem 0;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 0.085em;
  position: relative;
  font-size: 0.85em;
  color: var(--text);
}
.teaser article button::after {
  content: "";
  border-bottom: 2px solid #000;
  left: 0;
  bottom: 0;
  width: 100%;
  position: absolute;
}

.teaser-3 {
  gap: 1.5rem;
}
.teaser-3 h3 {
  grid-column: 1/span 3;
  text-align: center;
  margin: 0;
  width: 100%;
  position: relative;
}
.teaser-3 h3 span {
  background: var(--bg);
  z-index: 100;
  position: relative;
  padding: 0 1em;
  white-space: pre-wrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.teaser-3 h3 span a {
  text-decoration: none;
  color: var(--text);
}
.teaser-3 h3::after {
  content: "";
  height: 2px;
  background: var(--text);
  width: 100%;
  position: absolute;
  left: 0;
  top: 0.5em;
}

/* CTA */
.format p > a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid;
}

.cta {
  display: block;
  margin: 2em auto;
  text-decoration: none;
}
.cta button {
  padding: 0.5em 1em;
  font-size: 1.1em;
  border-radius: 3px;
  background: var(--tk-blue);
  color: #fff;
}
.cta button:hover {
  opacity: 0.8;
}

/* Format */ 
.format .background {
  padding: 3em 0;
  gap: 3em;
  z-index: 1;
}
.format header h1 {
  font-size: 2.95em;
  margin-bottom: 1em;
  font-weight: normal;
}
.format header article .header-title {
  gap: 32px;
}
.format header.gradient {
  color: #fff;
}
.format header.gradient::after {
  content: "";
  width: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  min-height: 40vh;
  position: absolute;
  bottom: 0;
  z-index: 1;
}
.format header.gradient article .header-title, .format header.textbox-bottom article .header-title {
  padding: 1em 0;
}
.format header.textbox-bottom article {
  background: rgba(255, 255, 255, 0.6);
}
.format header.textbox-bottom .header-title {
  padding: 2em 0;
}
.format header.textbox-center article .header-content {
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
  padding: 1.5rem 1rem;
}
.format header.textbox-center article .header-content > * {
  margin: 0;
}
.format header.small {
  color: var(--text);
  gap: 3em;
  margin-top: 3em;
}
.format header.small .header-content {
  text-align: center;
}
.format header.small .header-content h1 {
  font-weight: bold;
  margin-bottom: 0;
}
.format section.copy.intro {
  font-style: italic;
  text-align: center;
}
.format section.copy.intro hr {
  width: 25%;
  margin: 1.5em auto;
  height: 4px;
  background: var(--text);
  border: 0;
}
.format section.copy.initial p:first-of-type:first-letter {
  float: left;
  font-size: 3.4rem;
  margin-right: 0.5rem;
  text-transform: uppercase;
  margin-top: 1rem;
}
.format section.copy p:not(:last-of-type), .format section.infobox p:not(:last-of-type), .format section .textbox p:not(:last-of-type) {
  margin-bottom: 1em;
}
.format section.copy *:first-of-type, .format section.infobox *:first-of-type, .format section .textbox *:first-of-type {
  margin-top: 0;
}
.format section.copy *:last-child, .format section.infobox *:last-child, .format section .textbox *:last-child {
  margin-bottom: 0;
}
.format section.quote {
  max-width: 500px;
}
.format section.quote blockquote {
  font-size: calc(2 * var(--space));
  text-align: center;
  display: flex;
  flex-flow: column;
  gap: calc(2 * var(--space));
}
.format section.quote blockquote::before, .format section.quote blockquote::after {
  content: "";
  height: 3px;
  background: var(--grey-700);
  width: 60%;
  max-width: 280px;
  display: block;
  margin: auto;
}
.format section.quote blockquote span {
  font-family: var(--sans-serif);
  font-size: 14px;
}
.format section.image-2 {
  gap: 1em 2em;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.format section.image-2 > * {
  min-width: calc(50% - 2em);
}
.format section.image-2 p {
  width: 100%;
  grid-column: 1/span 2;
  margin: 0;
}
.format section.parallax .wrapper {
  padding: 2rem;
}
.format section.parallax .wrapper .textbox {
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
  padding: 1.5rem;
}
.format section.parallax .wrapper .textbox *:last-child {
  margin-bottom: 0;
}
.format .fader-wrapper::after {
  background: var(--bg);
}
.format .overtext {
  padding: 2rem;
}
.format .overtext .textbox {
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
  padding: 1.5rem;
}
.format .overtext .textbox *:not(h3):last-child {
  margin-bottom: 0;
}

/* Video */
.video [id^=play-button-] .circle {
  fill: var(--tk-blue);
}
.video [id^=play-button-] .arrow {
  fill: #fff;
}

.social h2 {
  text-align: center;
  margin: 1.5rem auto !important;
  width: 100%;
  font-size: 1rem;
}
.social .social-buttons {
  gap: 3em;
  margin: 1rem;
  justify-content: center;
}
.social .social-buttons a {
  text-decoration: none;
}
.social .social-buttons a svg {
  width: 50px;
  height: 50px;
  fill: var(--text);
}

.infobox {
  padding: 1.5em;
  background: #fff;
}
.infobox h2:not(:first-of-type) {
  margin-top: 2em;
}
.infobox .info-logo {
  max-width: 100px;
  width: 100%;
  margin: 2em auto 0 !important;
  display: block;
}
.infobox .image {
  margin-bottom: 1em !important;
}
.infobox.border {
  border: 2px solid var(--tk-blue);
  background: transparent;
}
.infobox.blue {
  background: var(--tk-blue);
  color: #fff;
}
.infobox ul {
  margin-top: 1em !important;
}
.infobox ul li {
  margin-bottom: 0.5em;
}

.format {
  /** Zocken für die Gesundheit */
}
.format footer {
  background: linear-gradient(0deg, rgba(147, 167, 160, 0.63) 0%, rgba(246, 248, 247, 0.2) 100%);
  padding: 0 0 5em;
}
.format footer > main {
  max-width: 750px;
}
.format.gaming .progress-container {
  height: 15px;
  box-shadow: 2px 0px #000, 0px -2px #000, -2px 0px #000, 0px 2px #000;
  background: #fff;
  left: 2px;
  width: calc(100% - 4px);
  top: 54px;
}
.format.gaming .progress-container .progress-bar {
  height: 15px;
  box-shadow: -3px -3px 0px inset #fff, 3px 3px 0px inset #fff;
  max-width: 100%;
}
.format.gaming header article {
  bottom: 0;
  top: auto;
  align-items: flex-end;
}
.format.gaming header article .header-title .header-content {
  max-width: 80%;
  border-radius: 1rem;
  border: 4px solid #1b669f;
  margin: 2em auto;
  padding: 2.5em 2em;
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.6);
}
.format.gaming header article .header-title .header-content h1 {
  font-family: "Press Start 2P", Arial, sans-serif;
  letter-spacing: 0.25em;
  line-height: 1.5em;
  font-size: 3.5rem;
  text-transform: uppercase;
  color: #00a0e3;
  word-spacing: -0.5em;
  text-shadow: -0.05em 0 #0077a9, 0 0.05em #0077a9, 0.05em 0 #0077a9, 0 -0.05em #0077a9;
}
.format.gaming header article .header-title .header-content p {
  font-size: 1.5em;
  font-weight: bold;
}
.format.gaming .level-button {
  text-align: center;
}
.format.gaming .level-button div {
  background: #28456d;
  padding: 1rem;
  border-radius: 7px;
  border: 4px outset #1b669f;
  color: #e4ff3a;
  font-family: "Press Start 2p", cursive;
  font-size: 2rem;
  line-height: 1em;
  text-shadow: -0.05em 0 #009544, 0 0.05em #009544, 0.05em 0 #009544, 0 -0.05em #009544;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  word-spacing: -0.5em;
  margin: 2em auto;
  display: inline-block;
  transition: background 0.25s ease-in-out;
}
.format.gaming .level-button div:hover {
  background: #0c304b;
  border: 4px outset #28456d;
}
.format.gaming .parallax {
  text-align: center;
}
.format.gaming .parallax .wrapper .textbox {
  max-width: 900px;
  width: 80%;
  padding: 2rem;
  border-radius: 1rem;
  border: 4px solid #1b669f;
  color: #00a0e3;
  font-family: "Press Start 2p", cursive;
  font-size: 3rem;
  line-height: 1.25em;
  text-align: center;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 4rem auto;
  text-shadow: -0.05em 0 #0077a9, 0 0.05em #0077a9, 0.05em 0 #0077a9, 0 -0.05em #0077a9;
  backdrop-filter: blur(30px);
  background: rgba(255, 255, 255, 0.3);
}
.format.gaming .parallax .wrapper .textbox.right {
  margin-right: 5%;
}
.format.gaming .parallax .wrapper .textbox.left {
  margin-left: 5%;
  max-width: min-content;
}
.format.gaming .parallax .wrapper .textbox h2 {
  font-family: "Press Start 2p", cursive;
  font-size: 2rem;
  margin-top: 0;
  line-height: 1.75;
  animation: blinker 2s ease-in-out infinite;
}
.format.gaming .parallax .wrapper .textbox p.subline {
  font-size: 1.25rem;
  text-transform: none;
  line-height: 2rem;
  letter-spacing: 1px;
  text-shadow: -0.02em 0 #0077a9, 0 0.02em #0077a9, 0.02em 0 #0077a9, 0 -0.02em #0077a9;
  margin-bottom: 0;
}
.format.gaming .parallax img.player {
  content: url("../gaming-players_@2x.webp");
}
.format.gaming .copy.level {
  padding: 2rem;
  border-radius: 1rem;
  border: 4px solid #1b669f;
  color: #00a0e3;
  font-family: "Press Start 2p", cursive;
  font-size: 3rem;
  line-height: 1.25em;
  text-align: center;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 4rem auto;
  text-shadow: -0.05em 0 #0077a9, 0 0.05em #0077a9, 0.05em 0 #0077a9, 0 -0.05em #0077a9;
  backdrop-filter: blur(30px);
  background: rgba(255, 255, 255, 0.3);
}
.format.gaming .copy.level h2 {
  font-family: "Press Start 2p", cursive;
  font-size: 2rem;
  margin-top: 0;
  line-height: 1.75;
  animation: blinker 2s ease-in-out infinite;
}
.format.gaming .copy.level p.subline {
  font-size: 1.25rem;
  text-transform: none;
  line-height: 2rem;
  letter-spacing: 1px;
  text-shadow: -0.02em 0 #0077a9, 0 0.02em #0077a9, 0.02em 0 #0077a9, 0 -0.02em #0077a9;
  margin-bottom: 0;
}
.format.raus-und-los header article .header-title {
  max-width: none;
}
.format.raus-und-los header article .header-title .header-content {
  margin: auto 5rem 7rem auto;
  max-width: 400px;
}
.format.raus-und-los header article .header-title .header-content h1 {
  font-size: 6em;
  font-weight: bold;
  margin: 0;
  text-align: center;
}
.format.raus-und-los header.gradient::after {
  background: linear-gradient(0deg, rgba(36, 36, 36, 0.8) 20%, rgba(255, 255, 255, 0.001) 100%);
}
.format.raus-und-los header .logo {
  position: absolute;
  top: 6em;
  right: 3em;
  width: 100px;
  max-height: 100px;
}
.format.raus-und-los header .logo img {
  width: 100%;
}

@keyframes blinker {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
/* Desktop */
@media screen and (min-width: 768px) {
  .format .copy, .format .teaser-2 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
}
@media screen and (max-width: 1300px) {
  /* Zocken für die Gesundheit */ 
  .format.gaming header article .header-title .header-content {
    max-width: 100%;
    margin: 2em;
  }
}
@media screen and (max-width: 1100px) {
  /* Zocken für die Gesundheit */
  .format.gaming header article .header-title .header-content h1 {
    font-size: 2.5em;
    letter-spacing: 0.15em;
  }
}
/* Tablet */
@media screen and (max-width: 1060px) {
  .format header article {
    padding: 0 2rem;
  }
  .format header.small {
    padding: 0 3em;
  }
  .format header.small figure {
    width: 100%;
    min-height: auto;
  }
  .format header.small figure picture {
    min-height: auto;
  }
  .format .image-2, .format .teaser-3 {
    padding: 0 2rem;
  }
  .format section.parallax .wrapper, .format .overtext {
    padding: 2rem;
  }
}
/* Tablet */
@media screen and (max-width: 999px) and (min-width: 768px) {
  .teaser.teaser-3 a:nth-of-type(3n) {
    align-items: center;
    justify-content: space-between;
  }
  .teaser.teaser-3 a:nth-of-type(3n) figure {
    width: calc(50% - 0.75rem);
  }
  .teaser.teaser-3 a:nth-of-type(3n) article {
    width: 50%;
    padding: 1rem 2rem 1rem 1rem;
    align-items: flex-start;
  }
  .teaser-3 h3 {
    grid-column: 1/span 2;
  }
}
@media screen and (max-width: 900px) {
  /* Zocken für die Gesundheit */
  .format.gaming .parallax .wrapper .textbox {
    font-size: 2rem;
    width: 90%;
  }
  .format.gaming .parallax .wrapper .textbox.right {
    margin: auto;
  }
  .format.gaming .parallax .wrapper .textbox h2 {
    font-size: 1rem;
  }
  .format.gaming .parallax .wrapper .textbox p.subline {
    font-size: 1rem;
  }
  .format.gaming .copy.level {
    font-size: 2rem;
  }
  .format.gaming .copy.level h2 {
    font-size: 1rem;
  }
  .format.gaming .copy.level p.subline {
    font-size: 1rem;
  }
  .format.gaming .parallax-group.players {
    background: #fff;
  }
  .format.gaming .parallax-group.players figure img.player {
    content: url("../gaming-players-mobil.webp");
    object-fit: contain;
  }
}
/* Mobil */
@media screen and (max-width: 767px) {
  .progress-container {
    top: 52px;
  }
  .teaser.teaser-2, .teaser.teaser-3 {
    padding: 0;
  }
  .teaser-3 h3 {
    grid-column: 1;
  }
  .format {
    /* Zocken für die Gesundheit */
  }
  .format .background {
    padding: 2em 0;
    gap: 2em;
  }
  .format header.small {
    padding: 0;
    width: 90%;
    min-height: auto;
  }
  .format header h1 {
    font-size: 2rem;
  }
  .format header.textbox-center article .header-content {
    max-height: none;
  }
  .format header.textbox-center article .arrow {
    bottom: var(--space);
  }
  .format section:not(.parallax, .parallax-group, .fixed-image, .fader-wrapper, .width-full, .infobox, .social-buttons, .image-2) {
    width: 90%;
  }
  .format section.image-2 {
    gap: 1em;
  }
  .format section.image-2 > * {
    min-width: calc(50% - 0.5em);
  }
  .format.gaming header article .header-title .header-content {
    padding: 1.5rem 1rem;
  }
  .format.gaming header article .header-title .header-content h1 {
    font-size: 2em;
  }
}
/* Mobil */
@media screen and (max-width: 700px) {
  section.infobox {
    width: 90%;
  }
}
@media screen and (max-width: 600px) {
  /* Zocken für die Gesundheit */
  .format.gaming header {
    background: #9AA3C1;
    margin: 0 2rem;
  }
  .format.gaming header figure img {
    object-fit: contain;
    object-position: bottom;
    content: url("../gaming_header_mobil_@2x.webp");
  }
  .format.gaming header article {
    align-items: flex-start;
    padding-top: 150px;
  }
  .format.gaming header article .header-title .header-content h1 {
    font-size: 2em;
    text-transform: none;
    letter-spacing: 0.05em;
  }
  .format.gaming .parallax .wrapper .textbox {
    font-size: 1.5rem;
    letter-spacing: 0.15em;
    width: 100%;
  }
  .format.gaming .copy.level {
    font-size: 1.5rem;
    letter-spacing: 0.15em;
  }
  .format.gaming .copy.level h2 {
    font-size: 1rem;
  }
  .format.gaming .copy.level p.subline {
    line-height: 1.5rem;
  }
  .format.gaming .copy.level-button div {
    font-size: 1.5rem;
    letter-spacing: 0.15em;
  }
  .format.raus-und-los header article .header-title {
    max-width: none;
  }
  .format.raus-und-los header article .header-title .header-content {
    margin: 3rem auto;
    max-width: 100%;
  }
  .format.raus-und-los header article .header-title .header-content h1 {
    font-size: 4.5em;
  }
}
@media screen and (max-width: 500px) {
  /* Zocken für die Gesundheit */
  .format.gaming header article .header-title .header-content h1 {
    font-size: 1.75rem;
  }
}
@media screen and (max-width: 400px) {
  /* Zocken für die Gesundheit */
  .format.gaming header article .header-title .header-content h1 {
    font-size: 1.5em;
  }
  .format.gaming .copy.level {
    letter-spacing: 0.015em;
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 350px) {
  /* Zocken für die Gesundheit */
  .format.gaming header article .header-title .header-content h1 {
    font-size: 1.25rem;
  }
}