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

:host {
  --swiper-theme-color: var(--tk-blue);
}

@font-face {
  font-family: "Press Start 2P";
  src: url(../font/PressStart2P-Regular.ttf);
}
.sz {
  --asv: 60px;
}

/* 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;
}

.no-break {
  white-space: nowrap;
}

.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 h2.gaming-ifa {
  font-family: "Press Start 2P", Arial, sans-serif;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.format h3 {
  font-size: 19px;
  color: var(--text);
}
.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;
}

.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 !important;
  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;
}

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

.cta button {
  color: #fff;
}

.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 button {
  margin: 0;
  border-radius: 0;
  font-size: 1.1em;
  text-decoration: none;
  animation: show-later 10s 1;
}
.format aside.fixed button a.cta {
  display: block;
  margin: 2em auto;
  text-decoration: none;
}

@keyframes show-later {
  0%, 45% {
    opacity: 0;
  }
  60%, 100% {
    opacity: 1;
  }
}
/* Format */
.format .background {
  padding: 3em 0;
  gap: 3em;
  z-index: 1;
}
.format header {
  z-index: 6;
}
.format header figure picture {
  height: 100svh;
}
.format header h1 {
  font-size: 3.5em;
  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.gradient article .header-content, .format header.textbox-bottom article .header-content {
  margin-bottom: 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-bottom.gaming-ifa figure img {
  object-position: 74%;
}
.format header.textbox-bottom.gaming-ifa article {
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
}
.format header.textbox-bottom.gaming-ifa article .header-title {
  padding: 1.5em 0;
}
.format header.textbox-bottom.gaming-ifa article h1 {
  margin-bottom: 0;
  font-size: 2.8rem;
  padding: 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.textbox-center.dark article .header-content {
  background: rgba(2, 9, 28, 0.8);
  color: #fff;
}
.format header.textbox-center.dark article .header-content h1 {
  font-weight: normal;
}
.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 .trenner {
  text-align: center;
  font-size: 3rem;
  font-family: var(--serif);
  margin-bottom: 2rem;
}
.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: 2em;
  margin-top: 1em;
}
.format section.copy *:not(.cta):first-of-type, .format section.infobox *:not(.cta):first-of-type, .format section .textbox *:not(.cta):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.copy.quote, .format section.infobox.quote, .format section .textbox.quote {
  max-width: 700px;
}
.format section.copy.quote blockquote, .format section.infobox.quote blockquote, .format section .textbox.quote blockquote {
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.3;
  text-align: center;
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
  color: #fff;
}
.format section.copy.quote blockquote span, .format section.infobox.quote blockquote span, .format section .textbox.quote blockquote span {
  font-size: 0.9rem;
}
.format section.quote {
  max-width: 500px;
  margin: 0 auto;
}
.format section.quote blockquote {
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.3;
  text-align: center;
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
}
.format section.quote blockquote span {
  font-size: 0.9rem;
}
.format section.quote.sohnemann blockquote {
  color: var(--text);
}
.format section.quote.sohnemann::before, .format section.quote.sohnemann::after {
  content: "";
  height: 3px;
  background: var(--grey-700);
  width: 60%;
  max-width: 280px;
  display: block;
  margin: auto;
}
.format section.big-quote {
  font-family: var(--serif);
}
.format section.big-quote blockquote {
  font-size: 1.4rem;
  font-style: italic;
  color: #fff;
}
.format section .origin {
  font-family: var(--sans-serif);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.2em !important;
  font-style: normal;
  text-align: center;
}
.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 section.parallax .wrapper .textbox.white {
  background: rgba(255, 255, 255, 0.8);
}
.format .fader-wrapper::after {
  background: var(--bg);
}
.format .overtext {
  padding-left: 25%;
  padding-right: 25%;
}
.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);
}

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

.interview {
  border-left: 2px solid var(--tk-blue);
  padding: 0.5rem 1.5rem;
  margin-left: -1.5rem !important;
}
.interview .sup {
  color: var(--tk-blue);
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 0.5rem !important;
}
.interview .strong {
  font-weight: bold;
  margin-bottom: 0.5rem !important;
  margin-top: 1rem !important;
}

.format {
  /** Zocken für die Gesundheit */
  /* Raus und Los */
  /* Auf dem Karriereweg */
  /* OMR */
  /* Tempo in die digitale Zukunft*/
  /* TK Coach */
  /* ePA in Sicht */
}
.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 .fader-wrapper .textbox.tk, .format .fader-wrapper .wrapper .textbox.tk, .format .parallax .textbox.tk, .format .parallax .wrapper .textbox.tk {
  background: rgba(0, 160, 227, 0.75);
  color: #fff;
}
.format .fader-wrapper .textbox.tk .cta button, .format .fader-wrapper .wrapper .textbox.tk .cta button, .format .parallax .textbox.tk .cta button, .format .parallax .wrapper .textbox.tk .cta button {
  background: #fff;
  color: var(--tk-blue);
}
.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%;
}
.format.karriereweg header {
  width: 100%;
  margin-top: 69px;
  background-color: #fff;
  padding-bottom: 24px;
  height: auto;
}
.format.karriereweg header .grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 0 30px;
  max-width: 80%;
  margin: auto;
  align-items: end;
}
.format.karriereweg header .grid .image-wrapper {
  position: relative;
  margin-bottom: -4px;
}
.format.karriereweg header .grid .image-wrapper .img-01 {
  width: 100%;
}
.format.karriereweg header .grid .image-wrapper .images, .format.karriereweg header .grid .image-wrapper .images img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  object-position: bottom;
}
.format.karriereweg header .grid .image-wrapper .img-02 {
  animation: 3s header-image-02 forwards;
}
.format.karriereweg header .grid .image-wrapper .img-03 {
  animation: 3s header-image-03 forwards;
}
.format.karriereweg header .grid .image-wrapper .img-04 {
  animation: 3s header-image-04 forwards;
}
.format.karriereweg header .grid article {
  grid-column: 2;
}
.format.karriereweg header .grid article h1 {
  font-weight: bold;
  font-size: 60px;
  line-height: 1em;
  margin-bottom: -7px;
  max-width: 250px;
}
.format.karriereweg .scroll-headline {
  width: 100%;
  max-width: 100% !important;
  background: #fff;
  margin: auto;
  padding-top: 30px;
  margin-bottom: 3rem;
  position: relative;
}
.format.karriereweg .scroll-headline .scroll-wrapper {
  width: 60%;
  margin: auto;
  position: relative;
  display: flex;
  flex-flow: row;
  align-items: flex-start;
}
.format.karriereweg .scroll-headline .scroll-wrapper .scroll-image {
  width: 70%;
  display: inline-block;
  vertical-align: top;
  text-align: right;
}
.format.karriereweg .scroll-headline .scroll-wrapper .scroll-image img {
  width: 100%;
}
.format.karriereweg .scroll-headline .scroll-wrapper .scroll-image .scroll-img-01 {
  z-index: 1;
  position: sticky;
  top: 2rem;
}
.format.karriereweg .scroll-headline .scroll-wrapper .scroll-image .scroll-img-02 {
  z-index: 5;
}
.format.karriereweg .scroll-headline .scroll-wrapper .scroll-image .scroll-img-03, .format.karriereweg .scroll-headline .scroll-wrapper .scroll-image .scroll-img-04 {
  z-index: 10;
}
.format.karriereweg .scroll-headline .scroll-wrapper .scroll-image .scroll-img-02, .format.karriereweg .scroll-headline .scroll-wrapper .scroll-image .scroll-img-03, .format.karriereweg .scroll-headline .scroll-wrapper .scroll-image .scroll-img-04 {
  position: relative;
  opacity: 0;
}
.format.karriereweg .scroll-headline .scroll-wrapper .scroll-image .scroll-img-02.show, .format.karriereweg .scroll-headline .scroll-wrapper .scroll-image .scroll-img-03.show, .format.karriereweg .scroll-headline .scroll-wrapper .scroll-image .scroll-img-04.show {
  opacity: 1 !important;
  position: sticky !important;
  top: 2rem;
}
.format.karriereweg .scroll-headline .scroll-sticky {
  top: 2rem;
  display: inline-block;
  vertical-align: top;
  position: sticky;
  max-width: 300px;
  height: 100vh;
}
.format.karriereweg .scroll-headline .scroll-sticky h2 {
  margin-left: 30px;
  margin-bottom: auto;
  margin-top: 25%;
  font-weight: bold;
  font-size: 60px;
  line-height: 1em;
}
.format.karriereweg .scroll-headline.headline-1:not(.revealed) .img-02, .format.karriereweg .scroll-headline.headline-1:not(.revealed) .img-03, .format.karriereweg .scroll-headline .headline-2:not(.revealed) .img-02, .format.karriereweg .scroll-headline .headline-2:not(.revealed) .img-03, .format.karriereweg .scroll-headline .headline-3:not(.revealed) .img-02, .format.karriereweg .scroll-headline .headline-3:not(.revealed) .img-03 {
  opacity: 0;
}
.format.karriereweg .scroll-headline.headline-1.revealed .img-02, .format.karriereweg .scroll-headline .headline-2.revealed .img-02, .format.karriereweg .scroll-headline .headline-3.revealed .img-02 {
  animation: 3s header-image-02 forwards;
}
.format.karriereweg .scroll-headline.headline-1.revealed .img-03, .format.karriereweg .scroll-headline .headline-2.revealed .img-03, .format.karriereweg .scroll-headline .headline-3.revealed .img-03 {
  animation: 3s header-image-03 forwards;
}
.format.karriereweg .scroll-headline.headline-2 .scroll-wrapper, .format.karriereweg .scroll-headline .headline-3 .scroll-wrapper {
  padding-bottom: 2rem;
}
.format.karriereweg .scroll-headline.headline-2 .scroll-sticky {
  max-width: 410px;
}
.format.karriereweg .scroll-headline.headline-2 .scroll-sticky h2 {
  margin-top: 75%;
}
.format.karriereweg .scroll-headline.headline-3 h2 {
  margin-top: 75%;
}
.format.omr header {
  background: #060505;
}
.format.omr header.textbox-bottom {
  z-index: 10;
}
.format.omr header.textbox-bottom article {
  background: none;
  color: #fff;
}
.format.omr header.textbox-bottom article .header-content {
  text-align: center;
}
.format.omr header.textbox-bottom article .header-content h1 {
  margin-bottom: 0;
}
.format.omr header.textbox-bottom article .header-content .intro-text {
  font-style: italic;
}
.format.omr header.textbox-bottom article .header-content .intro-text hr {
  width: 25%;
  margin: auto;
  height: 4px;
  background: #fff;
  border: 0;
}
.format.omr header.textbox-bottom article .header-content .intro-text p:not(.article-info) {
  margin-top: 0;
}
.format.omr header.textbox-bottom figure video {
  min-height: 560px;
  height: calc(100svh - var(--asv));
}
.format.omr header.textbox-bottom::after {
  content: "";
  width: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0));
  min-height: 40vh;
  position: absolute;
  bottom: 0;
  z-index: 1;
}
.format.omr .omr-intro {
  z-index: 10;
  padding: 2em 0;
  text-align: center;
  color: #fff;
  background: #060505;
  display: flex;
  justify-content: center;
  width: 100% !important;
}
.format.omr .omr-intro .intro-text {
  max-width: 650px;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.format.omr .omr-intro .intro-text p:not(.article-info) {
  margin-top: 0;
}
.format.omr .omr-intro .intro-text .article-info {
  margin-bottom: 0;
}
.format.omr .omr-intro .intro-text hr {
  width: 25%;
  margin: auto;
  height: 4px;
  background: #fff;
  border: 0;
}
.format.omr .mobile-only {
  display: none;
}
.format.omr .mobile-no {
  display: block;
}
.format.omr .fader-wrapper .textbox, .format.omr .fader-wrapper .wrapper .textbox, .format.omr .parallax .textbox, .format.omr .parallax .wrapper .textbox {
  background: rgba(0, 160, 227, 0.75);
  color: #fff;
}
.format.omr .fader-wrapper .textbox .cta button, .format.omr .fader-wrapper .wrapper .textbox .cta button, .format.omr .parallax .textbox .cta button, .format.omr .parallax .wrapper .textbox .cta button {
  background: #fff;
  color: var(--tk-blue);
}
.format.omr .width-full {
  padding: 0 2rem;
}
.format.tempo header h1 {
  text-align: center;
  margin-bottom: 1rem;
}
.format.tempo header .subheadline {
  margin-top: 0;
}
.format.tk-coach .coach-slider {
  margin-bottom: 1.5em !important;
}
.format.tk-coach .coach-slider figure img {
  max-height: 500px;
  width: auto !important;
  margin: auto;
  margin-bottom: 1.5em !important;
}
.format.tk-coach header a.logo {
  position: absolute;
  top: 2rem;
  right: 2rem;
}
.format.tk-coach header a.logo img {
  max-height: 80px;
}
.format.tk-coach header h1 {
  font-weight: bold;
  margin-bottom: 0rem;
}
.format.tk-coach .mobile-only {
  display: none;
}
.format.tk-coach .mobile-no {
  display: block;
}
.format.epa header a.logo {
  position: absolute;
  top: 2rem;
  left: 2rem;
}
.format.epa header a.logo img {
  max-height: 80px;
}

/* Land der Sportmuffel */
iframe.embed.svelte-x6n0fq, iframe.embed.svelte-x6n0fq {
  width: 0;
  min-width: 100% !important;
  border: none;
  height: 578px;
}

/* Zocken für die Gesundheit */
@keyframes blinker {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
/* Auf dem Karriereweg */
@keyframes header-image-02 {
  0%, 24% {
    opacity: 0;
  }
  25%, 100% {
    opacity: 1;
  }
}
@keyframes header-image-03 {
  0%, 49% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}
@keyframes header-image-04 {
  0%, 74% {
    opacity: 0;
  }
  75%, 100% {
    opacity: 1;
  }
}
@keyframes header-image-02 {
  0%, 24% {
    opacity: 0;
  }
  25%, 100% {
    opacity: 1;
  }
}
@keyframes header-image-03 {
  0%, 49% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}
@keyframes header-image-04 {
  0%, 74% {
    opacity: 0;
  }
  75%, 100% {
    opacity: 1;
  }
}
/* Slider / Swiper */
:root {
  --swiper-navigation-color: #fff;
  --swiper-theme-color: #333333;
  --swiper-navigation-size: 3em;
  --swiper-navigation-sides-offset: 2rem;
  --swiper-pagination-bullet-inactive-color: #333333;
  --swiper-pagination-bottom: 0.5rem;
  --swiper-pagination-top: 0.5rem;
}

.swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 0.5rem;
  overflow: hidden;
}
.swiper-container figcaption {
  text-align: center;
}

.swiper-pagination {
  position: relative;
}

.swiper-button-prev, .swiper-button-next {
  z-index: 100;
  margin-top: -2ch;
}
.swiper-button-prev svg, .swiper-button-next svg {
  display: none;
}

/* 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: 2000px) {
  /* Auf dem Karriereweg */
  .format.karriereweg header .grid {
    max-width: 65%;
  }
  .format section.parallax .wrapper, .format .overtext {
    padding-left: 10%;
    padding-right: 10%;
  }
}
@media screen and (max-width: 1400px) {
  /* Auf dem Karriereweg */
  .format.karriereweg header {
    padding-bottom: 30px;
    min-height: auto;
  }
  .format.karriereweg header .grid {
    grid-template-columns: 1fr;
    grid-gap: 20px 0;
    max-width: 60%;
  }
  .format.karriereweg header .grid article {
    grid-column: 1;
    padding: 0;
  }
  .format.karriereweg header .grid article h1 {
    max-width: 100%;
    text-align: center;
  }
  .format.karriereweg .scroll-wrapper h1, .format.karriereweg .scroll-wrapper h2, .format.karriereweg header h1, .format.karriereweg header h2 {
    font-size: 35px !important;
  }
  .format.karriereweg .scroll-wrapper h2, .format.karriereweg header h2 {
    max-width: 100% !important;
    text-align: center;
  }
  .format.karriereweg .scroll-headline .scroll-wrapper {
    flex-flow: column;
    max-width: 660px;
    width: 90%;
  }
  .format.karriereweg .scroll-headline .scroll-wrapper .scroll-image {
    width: 100%;
  }
  .format.karriereweg .scroll-headline .scroll-wrapper .scroll-sticky {
    height: auto;
    margin: 2rem 0;
    max-width: 100% !important;
    width: 100%;
    text-align: center;
  }
  .format.karriereweg .scroll-headline .scroll-wrapper .scroll-sticky h2 {
    margin: 0 !important;
  }
}
@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 {
    /* Auf dem Karriereweg */
  }
  .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;
  }
  .format.karriereweg .scroll-wrapper h1, .format.karriereweg .scroll-wrapper h2, .format.karriereweg header h1, .format.karriereweg header h2 {
    font-size: 45px !important;
  }
  .format header.textbox-bottom.gaming-ifa figure img {
    object-position: 50%;
  }
}
/* 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;
  }
  .format .fader-wrapper img {
    transform: scale(1.5);
  }
  .format .overtext {
    align-items: flex-end !important;
    flex-direction: row !important;
  }
  .format .overtext .textbox {
    margin: 0;
  }
}
@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-1, .teaser.teaser-image-left, .teaser.teaser-image-right, .teaser.teaser-2, .teaser.teaser-3 {
    padding: 0;
  }
  .teaser-3 h3 {
    grid-column: 1;
  }
  .format {
    /* Zocken für die Gesundheit */
    /* Auf dem Karriereweg */
    /* TK Coach */
    /* TK OMR 2025 */
    /* IFA 2025 */
  }
  .format .background {
    padding: 2em 0;
    gap: 2em;
  }
  .format header.small {
    padding: 0;
    width: 90%;
    min-height: auto;
  }
  .format header h1 {
    font-size: 2em;
  }
  .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 [class^=pinfader] {
    width: 100%;
  }
  .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;
  }
  .format.karriereweg header .grid article h1 {
    font-size: 2em !important;
  }
  .format.tk-coach .mobile-only {
    display: block;
  }
  .format.tk-coach .mobile-only .textbox .big-quote blockquote {
    color: var(--text);
    font-size: 1.2rem;
    hyphens: auto;
  }
  .format.tk-coach .mobile-no {
    display: none;
  }
  .format.omr header.textbox-bottom::after {
    background: linear-gradient(0deg, rgb(6, 5, 5), rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0));
    min-height: 20vh;
  }
  .format.omr .mobile-only {
    display: block;
  }
  .format.omr .mobile-no {
    display: none;
  }
  .format section.quote blockquote {
    font-size: 1.7rem;
    line-height: 1em;
    gap: 10px;
  }
  .format .fader-wrapper img {
    transform: scale(1.5);
  }
  .format .overtext {
    align-items: flex-end !important;
    flex-direction: row !important;
  }
  .format .overtext .textbox {
    margin: 0;
  }
  .format header.textbox-bottom.gaming-ifa figure img {
    object-position: 25%;
  }
}
@media screen and (max-width: 720px) {
  /* Auf dem Karriereweg */
  .format.karriereweg header .grid {
    max-width: 80%;
  }
}
/* Mobil */
@media screen and (max-width: 700px) {
  :root {
    --swiper-navigation-color: inherit;
    --swiper-navigation-size: 1.25em;
    --swiper-navigation-sides-offset: 0;
  }
  section.infobox, iframe.infobox {
    width: 90%;
  }
  iframe.infobox {
    min-height: 480px;
  }
  .pagination-wrapper {
    display: flex;
    flex-flow: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 90%;
    margin: auto;
  }
  .swiper-pagination {
    margin-top: 0.75em;
    width: auto !important;
  }
  .swiper-button-prev, .swiper-button-next {
    position: relative;
    margin: 0;
  }
  .format header.textbox-bottom.gaming-ifa article h1 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 605px) {
  .format header.textbox-bottom.gaming-ifa figure img {
    object-position: left;
  }
  .format section.copy.quote, .format section.infobox.quote, .format section .textbox.quote {
    max-width: 700px;
  }
  .format section.copy.quote blockquote, .format section.infobox.quote blockquote, .format section .textbox.quote blockquote {
    font-size: 1.25rem;
  }
  iframe.infobox {
    min-height: 540px;
  }
}
@media screen and (max-width: 504px) {
  iframe.infobox {
    min-height: 580px;
  }
}
@media screen and (max-width: 470px) {
  iframe.infobox {
    min-height: 650px;
  }
}
@media screen and (max-width: 390px) {
  iframe.infobox {
    min-height: 700px;
  }
}
@media screen and (max-width: 360px) {
  iframe.infobox {
    min-height: 750px;
  }
}
@media screen and (max-width: 335px) {
  iframe.infobox {
    min-height: 800px;
  }
}
@media screen and (max-width: 323px) {
  iframe.infobox {
    min-height: 850px;
  }
}
@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: 550px) {
  /* Auf dem Karriereweg */
  .format.karriereweg header .grid {
    max-width: 90%;
  }
}
@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;
  }
  .format header.textbox-bottom.gaming-ifa .header-content h1 {
    font-size: 1.75rem;
  }
  .format header.textbox-bottom.gaming-ifa article .header-title {
    padding: 1em 0;
  }
}
@media screen and (max-width: 350px) {
  /* Zocken für die Gesundheit */
  .format.gaming header article .header-title .header-content h1 {
    font-size: 1.25rem;
  }
}