*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0px;
  list-style: none;
  padding: 0;
}

:root {
  /* colors */
  --prim-color-white: #ffffff;
  --prim-color-black: #040506;
  --prim-color-lessblack: #0c1012;
  --prim-color-green: #7BFFB9;
  --prim-color-darkgreen: #00D977;
  --prim-color-red: #FF1A4C;
  --prim-color-blue: #3B4AE5;

  --prim-color-gold-light: #FFEFC2;
  --prim-color-gold-normal: #BE9A3E;
  --prim-color-gold-dark: #2B2215;

  --prim-color-gradient-selected: linear-gradient(158deg, #F3FFD3 0%, #FFB6B6 20.23%, #C131FF 36.69%, #13006A 56.91%, #9AE7FF 66.79%, rgb(4, 42, 95) 88.9%);

  /* font-sizes */
  /* 7.7px */
  --font-size-2xs: 0.579rem;
  /* 9.3px */
  --font-size-xs: 0.694rem;
  /* 11.1px */
  --font-size-s: 0.833rem;
  /* 13.3px */
  --font-size-base: 1rem;
  /* 16.0px */
  --font-size-l: 1.2rem;
  /* 19.2px */
  --font-size-xl: 1.44rem;
  /* 23.0px */
  --font-size-2xl: 1.728rem;
  /* 27.6px */
  --font-size-3xl: 2.074rem;
  /* 33.2px */
  --font-size-4xl: 2.488rem;
  /* 39.8px */
  --font-size-5xl: 2.986rem;
  /* 47.8px */
  --font-size-6xl: 3.583rem;
  /* 57.3px */
  --font-size-7xl: 4.3rem;
  /* 68.8px */

  /* spacings */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-base: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5rem;
  --space-4xl: 7.5rem;
  --space-5xl: 11.5rem;
  --space-6xl: 17rem;

  /* borders */
  --border-radius-standard: 20px;

  /* transition */
  --transition-standard: .2s ease;
  --transition-bezier: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2);

  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-size: 110%;
  overflow-x: clip;
}

body {
  --color-stroke: var(--prim-color-gold-normal);
  --color-muted: var(--prim-color-gold-dark);
  --color-text: var(--prim-color-gold-light);
  --color-bg: var(--prim-color-black);
  --color-accent: var(--prim-color-green);

  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  width: 100%;

  overflow-x: clip;
}

body.custom-cursor--active * {
  cursor: none !important;
}

.hidden {
  display: none !important;
}

.hidden-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.maxwidth-handler,
.width--full {
  --mw-padding-inline: 1rem;
  --mw-content-maxwidth: 90ch;
  --mw-breakout-maxwidth: 95ch;

  --temp-mw-breakout-size: calc((var(--mw-breakout-maxwidth) - var(--mw-content-maxwidth)) / 2);

  display: grid;
  /* place-items: center start !important; */
  grid-template-columns:
    [fullwidth-start] minmax(var(--mw-padding-inline), 1fr) [breakout-start] minmax(0, var(--temp-mw-breakout-size)) [content-start] min(100% - (var(--mw-padding-inline) * 2), var(--mw-content-maxwidth)) [content-end] minmax(0, var(--temp-mw-breakout-size)) [breakout-end] minmax(var(--mw-padding-inline), 1fr) [fullwidth-end];
}

.maxwidth-handler>:not(.width--breakout, .width--full),
.width--full>:not(.width--breakout, .width--full) {
  grid-column: content;
}

.width--breakout {
  grid-column: breakout;
}

.width--full {
  grid-column: fullwidth;
}

.width--content {
  grid-column: content;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "tuppence-variable", "Montserrat", sans-serif;
  font-variation-settings: "wght" 800;
}

h1 {
  font-size: var(--font-size-4xl);
}

h2 {
  font-size: clamp(var(--font-size-xl), 5vmin, var(--font-size-3xl));
  text-wrap: nowrap;
}

h3 {
  font-size: clamp(var(--font-size-xl), 5vmin, var(--font-size-3xl));
  text-wrap: nowrap;
}

h4 {
  font-size: var(--font-size-base);
}

h5 {
  font-size: var(--font-size-l);
}

.image-wrapper {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  img,
  picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* object-fit: contain; */
  }
}

img {
  -webkit-user-drag: none;
  /* Verhindert das Ziehen in Webkit-Browsern */
  user-drag: none;

  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Standard */

  /* Verhindert das Standard-Kontextmenü auf mobilen Geräten (iOS) */
  -webkit-touch-callout: none;
}

/* ######################################## */
/* ########          Buttons       ######## */
/* ######################################## */

a {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  color: inherit;
}

button {
  outline: none;
  background: transparent;
  border: none;
  cursor: pointer;
}

[class*="button--"] {
  border: none;
  stroke: none;
  background: transparent;
  color: inherit;
  font-size: var(--font-size-base);
  line-height: 1.5;
  width: fit-content;
  cursor: pointer;
  color: var(--color-text);
  font-weight: 600;
  position: relative;
  transition: all var(--transition-standard);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);

  &:hover {
    color: var(--color-accent);
  }

  &.button-size--big {
    scale: 1.5;
  }
}


/* ########################################## */
/* ########      Style classes       ######## */
/* ########################################## */

/* --- global KEYFRAMES --- */

@keyframes slidetopdown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideleftright {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-.5rem);
  }

  100% {
    transform: translateY(0);
  }
}

/* Controlled intense jitter without rotation */
@keyframes time-shake {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  5%,
  25%,
  45%,
  65%,
  85% {
    transform: translate3d(-10px, -5px, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(12px, 8px, 0);
  }

  15%,
  35%,
  55%,
  75%,
  95% {
    transform: translate3d(-15px, 2px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate3d(15px, -8px, 0);
  }
}


.timeshake-active {
  /* Set the 3s duration here as requested */
  animation: time-shake 0.15s linear infinite;
  /* speed of the individual jitter loop */

  /* Use a secondary class or JS to handle the overall 3s lifecycle */
  /* display: inline-block; */
  will-change: transform;

  text-shadow: 2px 0 var(--prim-color-red), -2px 0 var(--prim-color-blue);
}


/* ######## Glitch Name ######## */

.glitched-name {
  position: relative;
  font-family: 'tuppence-variable', sans-serif;
  font-weight: bold;
  color: var(--color-text);
  /* #FFEFC2 */
  display: inline-block;
  will-change: transform;

  /* Haupt-Wackeln inkl. 3-Farben-Schatten */
  animation: time-shake-burst 2s steps(1) infinite;

  &::before,
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-repeat: no-repeat;
  }

  /* Roter Layer + Basis-Rahmen */
  &::before {
    z-index: -1;
    /* Nutzt deine fancyborder--title1 als Standard-Zustand */
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/title--type1.svg');
    background: var(--color-stroke);
    animation: extreme-glitch-1-burst 2s steps(1) infinite;
  }

  /* Blauer Layer + Accent-Rahmen */
  &::after {
    z-index: -2;
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/title--type1-accent.svg');
    background: currentColor;
    animation: extreme-glitch-2-burst 2s steps(1) infinite;
  }
}

/* 1. Haupt-Animation (Wackeln & 3-Farben-Schatten) */
@keyframes time-shake-burst {

  0%,
  70%,
  76%,
  100% {
    transform: translate3d(0, 0, 0) skew(0deg);
    text-shadow: none;
  }

  71% {
    transform: translate3d(-12px, 6px, 0) skew(5deg);
    text-shadow: 4px 0 var(--prim-color-red), -4px 0 var(--prim-color-blue);
  }

  73% {
    transform: translate3d(10px, -8px, 0) skew(-5deg);
    text-shadow: -3px 0 var(--color-accent), 3px 0 var(--prim-color-red);
  }

  90% {
    transform: translate3d(15px, 0px, 0) skew(15deg);
    text-shadow: 5px 0 var(--prim-color-red), -5px 0 var(--prim-color-blue), 0 3px var(--color-accent);
  }

  93% {
    transform: translate3d(-15px, -5px, 0) skew(-15deg);
    text-shadow: -5px 0 var(--color-accent), 5px 0 var(--prim-color-blue);
  }
}

/* 2. Roter Layer: Wechsel zwischen Rahmen und Glitch-Cuts */
@keyframes extreme-glitch-1-burst {

  0%,
  70%,
  76%,
  100% {
    content: "";
    opacity: 1;
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/title--type1.svg');
    background: var(--color-stroke);
    clip-path: none;
    transform: translate(0);
  }

  71% {
    content: "@YOU?";
    opacity: 0.8;
    -webkit-mask-box-image-source: none;
    background: transparent;
    color: var(--prim-color-red);
    clip-path: inset(20% 0 40% 0);
    transform: translate(-15px, 0);
  }

  90% {
    content: "@YOU?";
    opacity: 1;
    -webkit-mask-box-image-source: none;
    background: transparent;
    color: var(--prim-color-red);
    clip-path: inset(40% 0 10% 0);
    transform: translate(10px, 10px);
  }
}

/* 3. Blauer Layer: Wechsel zwischen Accent-Rahmen und Glitch-Cuts */
@keyframes extreme-glitch-2-burst {

  0%,
  72%,
  78%,
  100% {
    content: "";
    opacity: 1;
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/title--type1-accent.svg');
    background: currentColor;
    clip-path: none;
    transform: translate(0);
  }

  73% {
    content: "@YOU?";
    opacity: 0.8;
    -webkit-mask-box-image-source: none;
    background: transparent;
    color: var(--prim-color-blue);
    clip-path: inset(10% 0 70% 0);
    transform: translate(15px, 0);
  }

  92% {
    content: "@YOU?";
    opacity: 1;
    -webkit-mask-box-image-source: none;
    background: transparent;
    color: var(--prim-color-blue);
    clip-path: inset(70% 0 5% 0);
    transform: translate(-10px, -10px);
  }
}


/* ######## Custom Cursor ######## */

.cursor-part svg path,
.cursor-part svg circle,
.cursor-part svg rect,
.cursor-part svg polygon {
  /* Verhindert das Skalieren der Kontur */
  vector-effect: non-scaling-stroke;
}

#custom-cursor {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  /* mix-blend-mode: difference; */
  /* Optional: Macht den Cursor auf jedem Grund sichtbar */

  body.custom-cursor--active & {
    display: block;
  }

  body:has(iframe:hover) & {
    display: none;
  }
}

.cursor-part {

  --cursor-size: 20px;

  height: var(--cursor-size);
  aspect-ratio: 1/1;

  position: absolute;
  top: 0;
  left: 0;
  translate: var(--x, 0) var(--y, 0);
  transform: translate(-50%, -50%);
  will-change: translate, height;
  transition:
    translate var(--transition-speed, 0.1s) cubic-bezier(0.23, 1, 0.32, 1),
    height var(--transition-standard);


  svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    transition: stroke var(--transition-standard);
  }

  /* star */
  &:nth-child(1) {
    --cursor-size: 30px;
    z-index: 2;

    svg {
      fill: var(--color-text);
    }
  }

  /* square */
  &:nth-child(2) {
    --cursor-size: 50px;
    z-index: 1;

    svg {
      stroke: var(--color-stroke);
      stroke-width: 1.5px;
      rotate: 45deg;
    }
  }

  /* circle */
  &:nth-child(3) {
    --cursor-size: 90px;
    z-index: 0;

    svg {
      stroke: var(--color-stroke);
      stroke-width: 1.5px;
    }
  }

  /* make cursor circle black on specific elements */
  :has(:is(.theme--red, .theme--green, .keyfacts__fact):hover) &:is(:nth-child(2), :nth-child(3)) {
    svg {
      stroke: var(--prim-color-black);
    }
  }

  /* make cursor star light gold on navbar when not hovering clickable elements and theme is sketch */
  body:not(.is-clickable):has(.theme--sketch, :is(.navbar):hover) &:is(:nth-child(1)) {
    svg {
      fill: var(--prim-color-gold-light);
    }
  }

}


/* Der Clickable State */
body.is-clickable .cursor-part {

  --transition-speed: 0;
  transition:
    translate var(--transition-speed, 0.1s) cubic-bezier(0.23, 1, 0.32, 1),
    height 0.3s ease-out;

  /* star */
  &:nth-child(1) {
    --cursor-size: 50px;

    svg {
      fill: var(--color-accent);
    }
  }

  /* square */
  &:nth-child(2) {
    --cursor-size: 20px;
  }

  /* circle */
  &:nth-child(3) {
    --cursor-size: 40px;

    /* svg {
      stroke: var(--color-accent);
    } */
  }

}

/* ######## Themes ######## */

[class*="theme--"] {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.theme--black {
  --color-stroke: var(--prim-color-gold-normal);
  --color-muted: var(--prim-color-gold-dark);
  --color-text: var(--prim-color-gold-light);
  --color-bg: var(--prim-color-black);
  --color-accent: var(--prim-color-green);
}

.theme--black--transparent {
  /* standard */
  background-color: transparent;
}

.theme--red {
  --color-bg: var(--prim-color-red);
  --color-text: var(--prim-color-black);
  --color-stroke: var(--prim-color-black);
}

.theme--green {
  --color-bg: var(--prim-color-green);
  --color-text: var(--prim-color-black);
  --color-stroke: var(--prim-color-black);
}

.theme--sketch {
  transition: all var(--transition-standard);
  --color-bg: var(--prim-color-white);
  --color-text: var(--prim-color-black);
  --color-stroke: var(--prim-color-black);
  --color-accent: var(--prim-color-darkgreen);

  .navbar {
    --color-stroke: var(--prim-color-gold-normal);
    --color-text: var(--prim-color-gold-light);
    --color-bg: var(--prim-color-black);
    --color-accent: var(--prim-color-green);
  }

  section,
  footer {
    --color-bg: var(--prim-color-white);
    --color-text: var(--prim-color-black);
    --color-stroke: var(--prim-color-black);
    --color-accent: var(--prim-color-darkgreen);
  }
}


/* ######## Fancy Borders ######## */

[class*="fancyborder--"] {
  padding-block: 0.7em;
  padding-inline: 1.9em;
  position: relative;

  &[class*="fancyborder--button"]:hover {
    padding-inline: 2.2em;
  }

  &[class*="fancyborder--button"]:active {
    padding-inline: 1.5em;
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-stroke);

    --temp-clip-size: 38;
    -webkit-mask-box-image-slice: 0 var(--temp-clip-size) 0 var(--temp-clip-size) fill;
    mask-border-slice: 0 var(--temp-clip-size) 0 var(--temp-clip-size) fill;

    -webkit-mask-box-image-width: auto;
    mask-border-width: auto;

    -webkit-mask-box-image-repeat: stretch;
    mask-border-repeat: stretch;

    transition: background-color 0.3s ease;

    pointer-events: none;
  }

  &::after {
    background-color: var(--color-accent);
  }

}

.fancyborder--button1 {
  &::before {
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/button--type1.svg');
    mask-border-source: url('../assets/images/fance-borders/button--type1.svg');
  }

  &::after {
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/button--type1-accent.svg');
    mask-border-source: url('../assets/images/fance-borders/button--type1-accent.svg');
  }
}

.fancyborder--button2 {
  &::before {
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/button--type2.svg');
    mask-border-source: url('../assets/images/fance-borders/button--type2.svg');
  }

  &::after {
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/button--type2-accent.svg');
    mask-border-source: url('../assets/images/fance-borders/button--type2-accent.svg');
  }
}

.fancyborder--button3 {
  &::before {
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/button--type3.svg');
    mask-border-source: url('../assets/images/fance-borders/button--type3.svg');
  }

  &::after {
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/button--type3-accent.svg');
    mask-border-source: url('../assets/images/fance-borders/button--type3-accent.svg');
  }
}

.fancyborder--title1 {
  padding-block: 0.2em;
  padding-inline: 1.2em;

  &::before {
    margin-top: .6em;
    margin-bottom: -.1em;
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/title--type1.svg');
    mask-border-source: url('../assets/images/fance-borders/title--type1.svg');
  }

  &::after {
    margin-top: .6em;
    margin-bottom: -.1em;
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/title--type1-accent.svg');
    mask-border-source: url('../assets/images/fance-borders/title--type1-accent.svg');
    background: currentColor;
  }
}

.fancyborder--title2 {
  padding-block: 0.2em;
  padding-inline: 1.2em;

  &::before {
    margin-top: .6em;
    margin-bottom: -.1em;
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/title--type2.svg');
    mask-border-source: url('../assets/images/fance-borders/title--type2.svg');
    background: var(--color-stroke);
  }

  &::after {
    margin-top: .6em;
    margin-bottom: -.1em;
    display: none;
  }
}

.fancyborder--card {
  /* padding-block: 0.2em;
  padding-inline: 1.2em; */

  &::before,
  &::after {
    --temp-clip-size: 50;
    /* -webkit-mask-box-image-slice: var(--temp-clip-size) var(--temp-clip-size) var(--temp-clip-size) var(--temp-clip-size) fill; */
    mask-border-slice: var(--temp-clip-size);
  }

  &::before {
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/card.svg');
    mask-border-source: url('../assets/images/fance-borders/card.svg');
  }

  &::after {
    -webkit-mask-box-image-source: url('../assets/images/fance-borders/card-accent.svg');
    mask-border-source: url('../assets/images/fance-borders/card-accent.svg');
  }
}


/* ######## StyleSVGs ######## */

.stylesvg-wrapper {
  width: 90vmin;
  overflow: hidden;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 1;
}

[class*="stylesvg--"] {}

/* ### rotate cirlce ### */
.stylesvg--rotate {
  animation: rotate 100s linear infinite;
  stroke: var(--color-stroke);
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

/* ### rotate cirlce ### */
.stylesvg--fancy-corners {
  position: absolute;
  display: flex;
  inset: -1.2rem;
  z-index: 3;

  svg {
    --temp-corner-size: 3.6rem;

    display: block;
    position: absolute;
    width: var(--temp-corner-size);
    height: var(--temp-corner-size);
    stroke: var(--color-stroke);

    &.fancy-corner--tl {
      top: 0;
      left: 0;
    }

    &.fancy-corner--tr {
      top: 0;
      right: 0;
    }

    &.fancy-corner--bl {
      bottom: 0;
      left: 0;
    }

    &.fancy-corner--br {
      bottom: 0;
      right: 0;
    }

    .stroke--gold {
      stroke: var(--color-stroke);
    }
  }
}

/* ################################## */
/* ########     Navbar       ######## */
/* ################################## */

.navbar {
  position: fixed;
  background: var(--color-bg);
  padding-inline: var(--space-3xl);
  height: 4.5rem;
  z-index: 1000;
  width: 100%;
  transition: width var(--transition-bezier), margin var(--transition-bezier);

  display: grid;
  grid-template-columns: 1fr [place1-start] 6rem [place1-end place2-start] minmax(auto, calc(var(--mw-content-maxwidth) - 12rem)) [place2-end place3-start] 6rem [place3-end] 1fr;
  /* grid-template-rows: 1fr; */
  place-items: center;
  align-items: center;

  /* .maxwidth-wrapper {
    display: grid;
    grid-template-columns: 5rem 1fr 5rem;
    place-items: center;
  } */

  &> :nth-child(1) {
    grid-column: place1;
  }

  &> :nth-child(2) {
    grid-column: place2;
  }

  &> :nth-child(3) {
    grid-column: place3;
  }

  .button--timeswitch {
    max-height: 3rem;
    aspect-ratio: 1/1;
    top: 0;
    margin: 0;
    position: relative;
    line-height: 0;
    overflow: hidden;

    svg {
      height: 100%;
      display: block;
      object-fit: contain;
    }
  }

  .navbar__navigation {
    display: flex;
    flex-direction: row;
    gap: var(--space-l);
    width: 36rem;
    /* padding-block: var(--space-base); */
    position: relative;
    justify-content: center;
    transition: width var(--transition-bezier);
    /* grid-column: 2/3; */

    .nav__item {
      position: relative;
      animation: slidetopdown .3s cubic-bezier(0.25, 1, 0.5, 1) forwards calc(var(--delay-id)*.05s);


      &:not(.nav__item--active):hover::before {
        content: "";
        position: absolute;
        bottom: 0;
        width: .4em;
        height: .4em;
        border: 2px solid var(--color-stroke);
        border-radius: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-200%);
        transform-origin: center;
        animation: slidetopdown .2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
      }

      a {
        padding-block: var(--space-xs);
        position: relative;
      }
    }

    .nav__item--active {
      position: relative;

      a {
        color: var(--color-accent);
      }
    }

    .nav__item--jump {
      animation: jump .4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
      /* transition: transform ; */
    }

    .nav__item--indicator {
      position: absolute;
      bottom: -.1em;
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
      stroke: var(--color-stroke);

      /* --- 1. DER KREIS (Bewegung) --- */
      .draw-circle {
        /* Wichtig: Der Kreis muss sofort sichtbar sein (Strich voll da) */
        stroke-dasharray: 20;
        stroke-dashoffset: 0;
        /* Kein Offset, also voll gezeichnet */

        /* Wir müssen die Rotation aus dem SVG (rotate 180) hier beibehalten! */
        transform-origin: 3.5px 12.5px;
        /* Drehpunkt des Kreises im SVG */

        /* Animation: Rutschen */
        /* Dauer: 0.5s */
        animation: navindicatorSlideCircle 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
      }

      /* --- 2. DIE LINIE (Wartet auf den Kreis) --- */
      .draw-path {
        /* Setup wie gehabt: Linie unsichtbar machen */
        stroke-dasharray: 60;
        stroke-dashoffset: 60;
        opacity: 0;
        /* Sicherstellen, dass sie am Anfang weg ist */

        /* Animation: Zeichnen */
        /* WICHTIG: delay muss so lang sein wie die Kreis-Animation (0.5s) */
        animation: navindicatorDrawStroke 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.1s;
      }
    }
  }

  &.navbar--small {
    border-radius: var(--border-radius-standard);
    left: var(--space-s);
    right: var(--space-s);
    margin: var(--space-s) auto;
    transform: translateX(0%);
    width: fit-content;
    padding: 0;
    padding-inline: var(--space-l);

    grid-template-columns: 5rem 1fr 5rem;

    grid-template-columns: [place1-start] 5rem [place1-end place2-start] 1fr [place2-end place3-start] 5rem [place3-end];

    transition: all var(--transition-bezier);

    /* &:has(.navbar__navigation:hover):hover {
      .navbar__navigation {
        width: 30rem;
      }
    } */

    .navbar__navigation {
      width: 9rem;

      &:has(.nav__item--active:nth-child(1)) {
        --delay-id-active: 1
      }

      &:has(.nav__item--active:nth-child(2)) {
        --delay-id-active: 2
      }

      &:has(.nav__item--active:nth-child(3)) {
        --delay-id-active: 3
      }

      &:has(.nav__item--active:nth-child(4)) {
        --delay-id-active: 4
      }

      &:has(.nav__item--active:nth-child(5)) {
        --delay-id-active: 5
      }

      &:has(.nav__item--active:nth-child(6)) {
        --delay-id-active: 6
      }

      &:has(.nav__item--active:nth-child(7)) {
        --delay-id-active: 7
      }

      &:has(.nav__item--active:nth-child(8)) {
        --delay-id-active: 8
      }

      &:has(.nav__item--active:nth-child(9)) {
        --delay-id-active: 9
      }

      &:has(.nav__item--active:nth-child(10)) {
        --delay-id-active: 10
      }

      &.navigation--extended {
        width: 32rem;

        .nav__item {
          /* --delay-id-distance: calc(abs(var(--delay-id-active) - var(--delay-id))); */
          opacity: 0;
          transform: translateY(-50%);
          animation: slidetopdown .3s cubic-bezier(0.25, 1, 0.5, 1) forwards calc(calc(abs(var(--delay-id-active) - var(--delay-id)))*.05s);
        }
      }

      &:not(.navigation--extended) .nav__item:not(.nav__item--active) {
        display: none;
      }

    }

    [class*="button--"] span {
      display: none;
    }
  }

  #toggle-navigation {
    display: none;
  }
}

/* A. Bewegung für den Kreis */
@keyframes navindicatorSlideCircle {
  0% {
    /* Startposition: 
       24px nach rechts verschoben (ca. Mitte der 55px ViewBox) 
       Wir behalten die Rotation bei, falls nötig.
    */
    transform: translateX(24px) rotate(180deg);
    opacity: 0;
    /* Kurzer Fade-In wirkt weicher */
  }

  30% {
    opacity: 1;
  }

  100% {
    /* Endposition: 0px Verschiebung (Originalplatz) */
    transform: translateX(0px) rotate(180deg);
    opacity: 1;
  }
}

/* B. Zeichnen für die Linie */
@keyframes navindicatorDrawStroke {
  to {
    stroke-dashoffset: 0;
    /* Strich wird sichtbar */
    opacity: 1;
  }
}

/* ######################################## */
/* ########     Hero Section       ######## */
/* ######################################## */

section {
  /* min-height: 50rem; */
  display: grid;
  place-items: center;
  position: relative;
  /* width: 100%; */
  /* z-index: 1; */

  section {
    height: fit-content;
  }
}

.section--start {
  height: 100svh;
  /* transition: height var(--transition-standard); */
  /* min-height: 100vh; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;

  .hero-cover {
    position: absolute;
    inset: 0;
    object-fit: cover;
    z-index: -1;
  }

  .logo {
    width: clamp(15rem, 80vmin, 50rem);
    margin-top: -3rem;
  }

  .hero-text {
    max-width: 35ch;
    text-align: center;
    margin-top: -2.5rem;
    margin-bottom: .5rem;
    margin-inline: var(--space-l);
    font-size: clamp(var(--font-size-l), 8vmin, var(--font-size-3xl));
    text-wrap: wrap;
  }
}

/* ######################################## */
/* ########  SuperTracers Section  ######## */
/* ######################################## */

.section--supertracers {
  margin-top: -6rem;

  .keyframe-screenshot {
    border-radius: var(--border-radius-standard);
  }

  .advertising-summery {

    width: 100%;
    /* border-radius: var(--border-radius-standard); */
    padding: var(--space-xl);
    padding-bottom: var(--space-2xl);
    margin-top: var(--space-4xl);
    margin-bottom: var(--space-xl);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-s);
    position: relative;

    background-color: transparent;

    body:not(.theme--sketch) &::before {
      content: "";
      background: linear-gradient(color-mix(in srgb, var(--color-bg), transparent 20%),
          color-mix(in srgb, var(--color-bg), transparent 20%)),
        url(../assets/images/screenshots/ingame-solution_2-timeswitch.webp);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      width: 150%;
      height: min(28rem, 120%);
      top: 50%;
      transform: translateY(-50%) rotate(-2deg);
      position: absolute;
      z-index: -1;
      /* opacity: .2; */
    }

    body:not(.theme--sketch) &::after {
      content: "";
      background-color: var(--color-bg);
      background: url(../assets/images/screenshots/ingame-solution_2-timeswitch.webp);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      width: 160%;
      height: min(30rem, 130%);
      top: 50%;
      transform: translateY(-50%) rotate(2deg);
      position: absolute;
      z-index: -2;
      opacity: 1;
    }

    .advertising__title {
      width: fit-content;
    }

    .advertising__content {
      display: flex;
      flex-direction: column;
      gap: var(--space-s);
      max-width: 70ch;
      text-align: center;
      margin-top: var(--space-s);
      gap: var(--space-l);
      font-size: var(--font-size-l);

      .advertising__hero {
        font-size: var(--font-size-xl);
      }
    }
  }

  .keyfacts ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 var(--space-2xl);
    align-items: center;
    justify-content: center;
    padding-block: var(--space-2xl);
    text-align: center;

    .keyfacts__fact {
      display: inline-flex;
      flex-direction: column-reverse;
      justify-content: center;
      align-items: center;
      padding: var(--space-base);
      width: 12.5rem;
      gap: var(--space-2xs);
      height: 15rem;
      border-radius: var(--border-radius-standard);
      transition: all var(--transition-standard);

      &:hover {
        background-color: var(--prim-color-red);
        transform: scale(1.1) rotate(-3deg);
        color: var(--prim-color-black);

        .fact__title {
          color: var(--prim-color-black);
        }

        svg :first-child,
        svg :last-child {
          stroke: var(--prim-color-black) !important;
        }
      }

      .fact__title {
        width: fit-content;
        padding-inline: .5em;
        color: var(--color-stroke);
        font-family: "Montserrat", sans-serif;
        font-weight: 500;
        font-size: var(--font-size-l);
      }

      .fact__content {
        font-size: var(--font-size-l);
        font-weight: bold;
        font-family: "tuppence-variable", "Montserrat", sans-serif;
        font-weight: 700;
        font-size: var(--font-size-xl);

        .fact__content--big {
          font-size: var(--font-size-4xl);
        }

        svg {
          margin-top: var(--space-l);
          rotate: 180deg;

          :first-child {
            stroke: var(--color-stroke);
          }

          :last-child {
            stroke: var(--color-text);
          }
        }
      }
    }
  }

  .section--eventlogo {
    /* width: 120vw; */
    z-index: 1;
    margin-bottom: var(--space-2xl);
    overflow: visible;

    .image-wrapper {
      width: clamp(30rem, 170vw, 100rem);
      height: 100%;
      overflow: visible;

      .event-logo-main {
        width: clamp(30rem, 170vw, 100rem);
        height: 100%;
        overflow: visible;

        .welcometo-text {
          fill: var(--color-muted);
        }

        .logo-star,
        .logo-orbit,
        .logo-trophy :not(.trophy-star) {
          stroke: var(--color-stroke);
        }

        .presentedby-text {
          fill: var(--color-stroke);
        }

        .tracers-text,
        .paradox-text {
          fill: var(--color-text);
        }

        .trophy-star,
        .super-text {
          fill: var(--color-accent);
        }

        body.theme--sketch & .logo-glow {
          display: none !important;
        }

      }
    }
  }
}



/* ####################################################### */
/* ########         Animated Event Logo           ######## */
/* ####################################################### */


/* Animation erst starten, wenn die Sektion aktiv ist */
.section--eventlogo.is-animated .event-logo-main {
  --anim-speed: 10s;
}

/* ###### orbital planet ###### */
#orbit-planet {
  opacity: 0;
}

.section--eventlogo.is-animated #orbit-planet {
  /* Wir kopieren den d-Pfad des Ovals direkt hier hinein */
  offset-path: path("M711.5 51.75C907.912 51.75 1085.7 80.5633 1214.35 127.125C1278.68 150.407 1330.69 178.112 1366.6 208.839C1402.51 239.568 1422.25 273.249 1422.25 308.5C1422.25 343.751 1402.51 377.432 1366.6 408.161C1330.69 438.888 1278.68 466.593 1214.35 489.875C1085.7 536.437 907.912 565.25 711.5 565.25C515.088 565.25 337.303 536.437 208.648 489.875C144.318 466.593 92.3107 438.888 56.4004 408.161C20.4874 377.432 0.75 343.751 0.75 308.5C0.75 273.249 20.4874 239.568 56.4004 208.839C92.3107 178.112 144.318 150.407 208.648 127.125C337.303 80.5633 515.088 51.75 711.5 51.75Z");
  animation: orbit-rotation var(--anim-speed) linear infinite;
  animation-delay: .7s;
  will-change: offset-distance;
  transform-origin: 0 0 !important;
  transition: all 4s ease;
  opacity: 1;
}

#orbit-path {
  transform-origin: 711px 308px;
}

@keyframes orbit-rotation {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

/* ###### Glow ###### */
.logo-glow {
  transform-origin: center;
  animation: glow-pulse 2s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes glow-pulse {
  from {
    transform: scale(0.95);
    opacity: 0.3;
  }

  to {
    transform: scale(1.05);
    opacity: 0.6;
  }
}


/* ###### Wordmark + Stars + Trophy ###### */

#logo-content-group {
  /* Das Zentrum deines Logos (ca. 711 / 308) */
  transform-origin: 711px 308px;
}

.logo-star,
.logo-text,
.logo-trophy,
.logo-orbit {
  opacity: 0;
  transform: scale(0);
  /* WICHTIG: Aus der Mitte des Logos heraus */
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;

  &:not(.logo-orbit) {
    transform-origin: 711px 308px;
  }
}

/* Animation trigger via Klasse aus main.js */
.section--eventlogo.is-animated .logo-star,
.section--eventlogo.is-animated .logo-text,
.section--eventlogo.is-animated .logo-trophy,
.section--eventlogo.is-animated .logo-orbit {
  opacity: 1;
  transform: scale(1);
}

/* Stagger-Effekt: Text kommt kurz nach den Sternen */
.section--eventlogo.is-animated .logo-star {
  &:nth-of-type(1) {
    transition-delay: 0.2s;
  }

  &:nth-of-type(2) {
    transition-delay: 0.3s;
  }
}

.section--eventlogo.is-animated .logo-text {
  transition-delay: 0.5s;
}

.section--eventlogo.is-animated .logo-trophy {
  transition-delay: 0.7s;
  animation: floatingelement 2s ease-in-out infinite alternate;
  animation-delay: 1.5s;
}

@keyframes floatingelement {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(-3%) scale(1.05);
  }
}


/* ####################################################### */
/* ########     Growing Keyframe Screenshot       ######## */
/* ####################################################### */

@supports (animation-timeline: view()) {
  .keyframe-screenshot {
    animation: grow ease-in-out both;
    animation-timeline: view();
    animation-range: entry 30% cover 35%;
    transform: scale(0.9) translateY(10%);
    /* Justierung je nach Scrolltiefe */
  }

  @keyframes grow {
    from {
      transform: scale(0.9) translateY(10%);
    }

    to {
      transform: scale(1) translateY(0%);
    }
  }
}


/* ######################################## */
/* ########     Menu Section       ######## */
/* ######################################## */

.section--gamemenu {

  display: flex;
  flex-direction: column;
  gap: var(--space-xl);

  .section--map-selection {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    gap: var(--space-xl);

    h2 {
      z-index: 1
    }

    .map-selection {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: var(--mw-padding-inline);
      height: 30vmax;
      z-index: 0;
      position: relative;
      z-index: 0;

      .map {
        flex-shrink: 0;
        aspect-ratio: 1/1;
        margin: -2rem;
        z-index: 2;
        cursor: pointer;
        will-change: transform, width, filter;
        backface-visibility: hidden;
        transform: translateZ(0);
        position: static;
        transition: transform var(--transition-standard), width var(--transition-standard), filter var(--transition-standard);

        /* fall back size */
        width: clamp(6vmax, 10vmax, 12rem);

        /* &:hover::after {
          font-family: "tuppence-variable", sans-serif;
          font-variation-settings: "wght" 800;
          content: attr(data-mapname);
          font-size: clamp(2rem, 15vw, 15rem);
          position: absolute !important;
          left: 50%;
          top: -8rem;
          transform: translateX(-50%);
          color: var(--color-muted);
          z-index: -1;
        } */

        &:has(+*+.map--active) {
          width: clamp(6vmax, 10vmax, 12rem);
          margin: calc(var(--space-3xs)*-1);
          z-index: 1;
          filter: brightness(0.2);
          transform: perspective(1000px) rotateY(50deg);

          &:hover {
            width: clamp(7vmax, 12vw, 14rem);
            transform: perspective(1000px) rotateY(30deg);
          }
        }

        &:has(+.map--active) {
          width: clamp(10vmax, 20vmax, 20rem);
          transform: perspective(1000px) rotateY(20deg);
          filter: brightness(0.6);

          &:hover {
            width: clamp(12vmax, 22vmax, 22rem);
            transform: perspective(1000px) rotateY(10deg);
          }
        }

        &.map--active {
          width: clamp(15vmax, 30vmax, 25rem);
          margin: var(--space-xs);
          z-index: 3;
          overflow: visible;
          filter: brightness(1);
          cursor: default;

          &:hover {
            width: clamp(16vmax, 32vmax, 27rem);

            &::before {
              width: 110%;
              height: 110%;
            }
          }

          :has(body.theme--black) &::before {
            content: "";
            position: absolute;
            background: #000;
            width: 120%;
            height: 120%;
            z-index: -1;
            filter: blur(5rem);
            pointer-events: none;
            transition: width var(--transition-standard), height var(--transition-standard);
          }
        }

        .map--active+& {
          width: clamp(10vmax, 20vmax, 20rem);
          filter: brightness(0.6);
          transform: perspective(1000px) rotateY(-20deg);

          &:hover {
            width: clamp(12vmax, 22vmax, 22rem);
            transform: perspective(1000px) rotateY(-10deg);
          }
        }

        .map--active+*+& {
          width: clamp(6vmax, 10vmax, 12rem);
          margin: calc(var(--space-3xs)*-1);
          z-index: 1;
          filter: brightness(0.2);
          transform: perspective(1000px) rotateY(-50deg);

          &:hover {
            width: clamp(7vmax, 12vmax, 14rem);
            transform: perspective(1000px) rotateY(-30deg);
          }
        }


      }
    }
  }

  .section--char-selection {

    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin-block: var(--space-2xl);
    padding-block: var(--space-2xl);
    position: relative;

    .char-overview {
      height: fit-content;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-3xl);
      margin-left: -1rem;

      .char__card {
        height: 26rem;
        width: 17rem;
        border-radius: var(--border-radius-standard);
        overflow: visible;

        img {
          border-radius: var(--border-radius-standard);

          :has(.char__card__image--notreleased:not(.hidden)) & {
            border: 1px solid var(--color-stroke);
          }
        }
      }

      .char__details {
        height: 100%;
        max-height: 22rem;
        max-width: 20rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .char__details__header {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          .header__name {
            width: fit-content;
            margin-top: -1rem;
          }

          .typeicon {
            display: none;
            fill: none !important;
            stroke: var(--color-stroke);
            background: none;
            width: 5rem;
            height: 5rem;
            margin-right: -1.5rem;

            .stroke--light {
              stroke: var(--color-text);
            }

            &.typeicon--active {
              display: inline;
            }
          }
        }


        .char__details__stats,
        .char__details__lore {
          transition: height var(--transition-standard), opacity var(--transition-standard);
          overflow-y: clip;

          &:not(.screen--opened) {
            height: 0rem;
            opacity: 0;
          }

          &.screen--opened {
            height: 13rem;
            opacity: 1;
          }
        }

        .char__details__stats {
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: var(--space-xl);
          color: var(--color-stroke);
          font-size: var(--font-size-l);

          .char__details__stat {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            gap: var(--space-xl);
            width: 100%;

            .stat__value {
              display: flex;
              flex-direction: row-reverse;
              position: relative;
              align-items: center;
              color: var(--color-text);
              gap: var(--space-2xs);

              svg.stat__value__curve {
                --temp-svg-spacing: -.8rem;

                stroke: var(--color-stroke);
                position: absolute;
                right: var(--temp-svg-spacing);
                bottom: var(--temp-svg-spacing);
                width: 115%;
                height: 100%;
                stroke-width: 1;

                .char__details__stat--speed & {
                  top: var(--temp-svg-spacing);
                }
              }

              .stat__value__indicator {
                border-radius: 100%;
                border: 2px solid var(--color-muted);
                height: 1.2rem;
                aspect-ratio: 1/1;

                &.stat__value__indicator--active {
                  border-color: var(--color-text);
                }
              }
            }
          }
        }

        .char__details__lore {
          width: 100%;
          max-width: 18rem;
          display: flex;
          flex-wrap: wrap;
          text-wrap: wrap;
        }
      }

      .char-overview__name {

        font-family: "tuppence-variable", "Montserrat", sans-serif;
        font-size: 10rem;
        color: var(--color-muted);
        position: absolute;
        top: 50%;
        right: -2rem;
        transform: translateY(-50%) rotate(90deg);
        z-index: -1;
      }
    }

    .char-selection {
      position: absolute;
      left: var(--space-2xs);

      z-index: 1;
      /* transform: rotate(90deg); */
      /* scale: .7; */

      .char-selection__ticker {
        height: 30rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        /* flex-wrap: wrap; */
        /* scale: .7; */

        .character-card-wrapper {

          --temp-transition-duration: .15s;
          --temp-transition-type: ease;

          height: 5rem;
          width: 12rem;

          padding: var(--space-2xs);
          transition: width var(--temp-transition-duration) var(--temp-transition-type), height var(--temp-transition-duration) var(--temp-transition-type), border var(--temp-transition-duration), margin var(--temp-transition-duration);

          .character-card {
            height: 100%;
            width: 100%;
            border-radius: calc(var(--border-radius-standard) - 5px);
            /* rotate: 90deg; */

            img {
              height: auto;
              width: auto;
              transform: rotate(90deg);
              object-fit: cover;
              min-height: 100%;
              min-width: 100%;
              scale: 0.65;
              /* padding: var(--space-2xs) */
            }
          }

          &::before {
            content: "";
            background: transparent;
            transition: all var(--transition-standard);
            z-index: -1;
            inset: 0px;
            position: absolute;
            border-radius: calc(var(--border-radius-standard) - 3px + var(--space-2xs));
          }

          &.character-card--active {
            height: 7rem;
            width: 13rem;
            position: relative;
            background-color: var(--color-bg);
            border-radius: var(--border-radius-standard);

            &::before {
              inset: -1px;
              background: var(--prim-color-gradient-selected);
            }



            /* Wichtig: Sagt dem Browser, wie der Gradient verteilt wird */
          }

          &.char--not-released .character-card,
          &.char--not-unlocked .character-card {
            border: 1px solid var(--color-stroke);
          }

          /* das item vor dem item vor hover, das nach dem item nach hover */
          &:has(+*+:hover),
          &:hover+*+& {
            height: 5rem;
            width: 13rem;
            transition: width calc(var(--temp-transition-duration)*4) var(--temp-transition-type), height calc(var(--temp-transition-duration)*4) var(--temp-transition-type);
          }

          /* das item vor hover, das item nach hover */
          &:has(+ :hover),
          &:hover+& {
            height: 8rem;
            width: 15rem;
            transition: width calc(var(--temp-transition-duration)*2) var(--temp-transition-type), height calc(var(--temp-transition-duration)*2) var(--temp-transition-type);
          }

          &:hover {
            height: 10.5rem;
            width: 16rem;

            /* &::after {
              font-family: "tuppence-variable", sans-serif;
              font-variation-settings: "wght" 800;
              content: attr(data-charactername);
              font-size: clamp(2rem, 15vw, 15rem);
              position: absolute;
              top: 50%;
              top: -8rem;
              transform: translateY(-50%);
              color: var(--color-muted);
              z-index: -1;
              rotate: 90deg;
            } */
          }


        }
      }
    }
  }

}

/* #### Splitscreen Sequences #### */

.splitscreen--opened .ui-overlay {
  display: none !important;
}

.splitscreen {
  width: 100%;
  aspect-ratio: 600 / 270;
  display: flex;
  justify-content: center;
  align-items: center;

  .ui-overlay {
    position: relative;
    z-index: 2;
    width: 55%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .ui-overlay__text {
      z-index: 2;
      position: absolute;
      height: 100%;
      width: 100%;
      top: 50%;
      left: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translate(-50%, -50%);

      .ui-overlay__text__players {
        position: absolute;
        height: 96%;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -52%);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        font-size: 4vw;
        font-family: "tuppence-variable", "Montserrat", sans-serif;
        font-weight: 700;

        :first-child {
          margin-left: -30%;
        }

        :last-child {
          margin-left: 30%;
        }
      }

      .ui-overlay__text__title {
        margin-top: -3%;
        font-size: 8.5vw;
        font-family: "tuppence-variable", "Montserrat", sans-serif;
        font-weight: 700;
      }
    }

    svg {
      width: 100%;
      height: 100%;
      stroke: var(--color-stroke);

      .svg-fill-gold {
        fill: var(--color-stroke);
      }

      .svg-fill-lightgold {
        fill: var(--color-text);
        stroke: none;
      }

    }
  }

  .image-wrapper {
    position: absolute;
    transform: translateX(0%);
    transition: transform .2s ease-in;
  }

  body:has(&:not(.splitscreen--opened)) {
    /* animation: time-shake .5s .2; */
  }

  &.splitscreen--opened {
    .left-character {
      transform: translateX(-100%);
    }

    .right-character {
      transform: translateX(100%);
    }
  }
}


/* ######################################## */
/* ########    InGame Section      ######## */
/* ######################################## */

.section--ingame {

  width: 100%;
  padding-bottom: var(--space-2xl);
  display: flex;
  flex-direction: column;

  .section--startgame {
    width: 100%;
  }

  .section--ingame-promo {

    height: fit-content;
    display: block;
    position: relative;
    padding-top: var(--space-l);
    /* padding-bottom: 10rem; */

    h2 {
      top: 6rem;
      position: sticky;
      margin-bottom: var(--space-4xl);
    }

    .promo__item:nth-child(2) {
      margin-top: calc((var(--space-4xl) - 3rem) * -1);
    }

    .promo__item {
      position: sticky;
      display: block;
      top: 13rem;
      margin-bottom: var(--space-3xl);
      overflow: clip;

    }

    .figma-prototype {
      overflow: visible;
      border-radius: var(--border-radius-standard);

      .prototype__disclaimer {
        position: absolute;
        padding: var(--space-base);

        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
        background-color: #000000cc;
        border-radius: var(--border-radius-standard);
        border: 1px solid var(--color-muted);

        body.theme--sketch & {
          background-color: #ffffffcc;
        }

        .prototype__disclaimer__text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          max-width: 29rem;
          gap: var(--space-s);
          margin-bottom: var(--space-base);

          p {
            display: inline;

            &:first-of-type {
              font-size: var(--font-size-xl);
              /* font-weight: bolder; */
            }

            a {
              display: inline;
              color: var(--color-accent);
            }
          }
        }

        .prototype__disclaimer__buttons {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          gap: var(--space-base);
          flex-wrap: wrap;
          /* bottom: -4rem; */
          /* position: absolute; */

        }
      }

      .iframe-container {
        width: clamp(20rem, 80vw, var(--mw-content-maxwidth) + 4rem);
        aspect-ratio: 600 / 270;

        overflow: hidden;
        position: relative;

        background-color: var(--color-bg);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;

        outline: none;
        border-radius: var(--border-radius-standard);
        border: 1px solid var(--color-muted);

        .loader-overlay {
          position: absolute;
          inset: 0;
          background: var(--color-accent);
          color: var(--color-muted);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          z-index: 2;
          transition: opacity 0.5s ease;
          opacity: 1;
          pointer-events: none;

          .fade-out {
            opacity: 0;
          }

          &:not(.fade-out)+iframe {
            pointer-events: none;
          }
        }

        iframe {
          border: none;
          outline: none;
          width: 100%;
          aspect-ratio: 1/1;
          border-radius: var(--border-radius-standard);
          overflow: clip;
          margin-inline: -50px;
          padding: -50px;

          opacity: 1;
          transition: opacity 0.3s;

          -webkit-user-select: none;
          /* Safari */
          -ms-user-select: none;
          /* IE 10+ */
          user-select: none;
        }
      }

      .trigger-fullscreen {
        margin-top: 3rem;
      }
    }


    .promo-screenshot {
      width: clamp(20rem, 80vw, var(--mw-content-maxwidth));
      display: flex;

      border-radius: var(--border-radius-standard);

      body:not(.theme--sketch) & {
        box-shadow: 0px -40px 60px 10px color-mix(in srgb, var(--prim-color-black), transparent 30%);
      }

      .promo__content {
        position: absolute;
        display: flex;
        width: 25rem;
        flex-direction: column;
        justify-content: center;
        gap: var(--space-xs);

        /* color: var(--prim-color-gold-light); */

        &.promo__content-position--bl {
          align-items: flex-start;
          left: var(--space-xl);
          margin-right: var(--space-xl);
          bottom: var(--space-xl);
          text-align: left;
        }

        &.promo__content-position--br {
          align-items: flex-end;
          margin-left: var(--space-xl);
          right: var(--space-xl);
          bottom: var(--space-xl);
          text-align: right;
        }

        .promo__title {
          z-index: 1;
          font-size: var(--font-size-xl);
        }

        .promo__subtitle {
          color: var(--color-accent);
          font-size: var(--font-size-l);
          z-index: 1;
          padding-inline: var(--space-base);
        }

        .promo__text {
          padding-inline: var(--space-base);
          z-index: 1;
          font-size: var(--font-size-base);
        }

        &::before {
          --temp-shadow-size: -2rem;
          content: "";
          position: absolute;
          background: black;
          opacity: .8;
          filter: blur(20px);
          border-radius: 30%;
          z-index: 0;
          /* inset: var(--temp-shadow-size); */

          /* :has(.promo__content-position--bl)+& {
            inset: var(--temp-shadow-size);
          } */
        }

        body.theme--sketch &::before {
          background: white;
        }

        &.promo__content-position--bl::before {
          inset: var(--temp-shadow-size);
          left: -10rem;
          bottom: -10rem;
        }

        &.promo__content-position--br::before {
          inset: var(--temp-shadow-size);
          right: -10rem;
          bottom: -10rem;
        }


      }

      &.promo-screenshot--timelink {
        .promo__content {
          width: 18rem;
        }
      }
    }

  }

}

@supports (animation-timeline: view()) {
  .promo-screenshot {
    animation: shrink ease-in-out both;
    animation-timeline: view();
    animation-range: entry 100% cover 40%;
    /* Justierung je nach Scrolltiefe */
  }

  @keyframes shrink {
    from {
      transform: scale(1);
    }

    to {
      transform: scale(0.9);
    }
  }
}


/* ######################################## */
/* ########    EndGame Section     ######## */
/* ######################################## */

.section--endgame {
  width: 100%;
  display: flex;
  flex-direction: column;

  .endgame__end-screen {
    width: 100%;
  }

  .section--endgame-resultandleaderboard {
    overflow-y: clip;

    .stylesvg-wrapper {
      position: absolute;
      top: 50%;

      &:nth-child(1) {
        left: 0;
        transform: translateY(-50%) translateX(-85%);

        svg {
          animation-direction: reverse;
        }
      }

      &:nth-child(2) {
        right: 0;
        transform: translateY(-50%) translateX(85%);
      }

      &:nth-child(3) {
        top: 0;
        transform: translateY(-85%);
        z-index: 5;
      }
    }

    .endgame__result,
    .endgame__leaderboard {
      transition: height var(--transition-standard), opacity var(--transition-standard);
      height: 0px;
      opacity: 0;
    }

    .screen--opened {
      height: 40rem;
      opacity: 1;
    }

    .deco-borders {
      position: absolute;
      height: 60%;
      width: 135%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      top: 50%;
      transform: translateY(-50%);

      svg {
        stroke: var(--color-stroke);
        stroke-width: 1px;

        height: 100%;
        width: 8%;

        * {
          vector-effect: non-scaling-stroke;
        }
      }
    }

    .endgame__result {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow-y: clip;
      max-width: calc(var(--mw-content-maxwidth) + 20ch);
      /* padding-block: var(--space-4xl); */

      .result__title {
        font-size: clamp(9rem, 20vw, 14rem);
        margin-bottom: -7rem;
        color: var(--color-muted);
        position: absolute;
        left: 50%;
        top: -15%;
        transform: translateX(-50%);
        z-index: -1;
      }

      .result__content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        max-width: var(--mw-content-maxwidth);

        &>* {
          height: 100%;
          aspect-ratio: 1/1;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          z-index: 1;

          &.result__data {
            width: fit-content;
            margin-inline: var(--space-3xl);
            aspect-ratio: auto;
            /* gap: var(--space-base); */
            position: relative;

            svg.result__trophy {
              height: 8rem;
              width: 8rem;
            }

            .result__playerranking {
              font-size: var(--font-size-6xl);
            }

            .result__playerranking-adjustment {
              font-size: var(--font-size-3xl);
              color: var(--color-accent);
              margin-bottom: var(--space-2xl);
              font-family: "tuppence-variable", "Montserrat", sans-serif;
            }

            &::after {
              content: "";
              height: 5rem;
              width: 20rem;
              z-index: -1;
              filter: blur(40px);
              border-radius: 100%;
              background: var(--prim-color-green);
              opacity: 63%;
              position: absolute;
              bottom: -15%;
              left: 50%;
              transform: translate(-50%, 0%);
            }
          }

          &.result__character-card {
            position: relative;

            .stylesvg--fancy-corners {
              margin-left: 35.5%;
            }

            .image-wrapper {
              border-radius: var(--border-radius-standard);
              align-self: flex-end;
            }
          }
        }
      }
    }

    .endgame__leaderboard {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow-y: clip;
      width: calc(var(--mw-content-maxwidth) + 20ch);
      /* padding-block: var(--space-3xl); */

      &.opened {
        height: 40rem;
      }

      &::before {
        content: "";
        height: 10rem;
        width: 30rem;
        z-index: 1;
        filter: blur(40px);
        border-radius: 100%;
        background: var(--prim-color-gradient-selected);
        opacity: 63%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -40%);
      }

      .stylesvg-wrapper {
        position: absolute;
        top: 50%;


        &:nth-child(1) {
          left: 0;
          transform: translateY(-50%) translateX(-85%);

          svg {
            animation-direction: reverse;
          }
        }

        &:nth-child(2) {
          right: 0;
          transform: translateY(-50%) translateX(85%);
        }
      }

      .leaderboard__title {
        font-size: clamp(4rem, 20vw, 14rem);
        margin-bottom: -7rem;
        color: var(--color-muted);
        position: absolute;
        left: 50%;
        top: -15%;
        transform: translateX(-50%);
        z-index: -1;
      }

      .leaderboard__toplistpart {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        z-index: 2;
        /* overflow: visible; */
        max-width: var(--mw-content-maxwidth);
        justify-content: space-between;

        .leaderboard__placing {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          position: relative;
          order: 1;
          margin: var(--space-xl);

          &.leaderboard__place1 {
            padding-inline: 1rem;
          }

          .deco-borders {
            width: 160%;
          }

          .leaderboard__placelabel {
            height: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-7xl);
            color: var(--color-stroke);
            font-family: "tuppence-variable", "Montserrat", sans-serif;

            svg& {
              height: 8rem;
              width: 8rem;
              margin-bottom: 5rem;
            }

          }

          .leaderboard__playername {
            width: fit-content;
            font-size: var(--font-size-4xl);

            .leaderboard__place1 & {
              position: absolute;
              bottom: 4.5rem;
            }
          }

          .leaderboard__playerranking {
            font-family: "tuppence-variable", "Montserrat", sans-serif;
            font-size: var(--font-size-4xl);
            color: var(--color-stroke);
          }

        }

        &.leaderboard__top5 {
          flex-direction: column;
          z-index: 2;
          gap: var(--space-2xs);
          position: relative;
          width: 100%;
          margin-top: calc(var(--space-base) * -1);
          padding-inline: var(--space-3xl);

          .leaderboard__placing {
            flex-direction: row;
            width: 100%;
            justify-content: center;
            margin: 0;
            font-size: var(--font-size-xl);

            .leaderboard__placelabel {
              font-size: var(--font-size-4xl);
              margin-right: var(--space-2xl);
            }

            .leaderboard__playername {
              font-size: var(--font-size-4xl);
              margin-right: auto;
            }

            .leaderboard__playerranking {
              font-size: var(--font-size-4xl);
            }

          }

          .deco-borders {
            width: 100%;
            height: 100%;
          }
        }
      }

      .button--primary {
        margin-top: var(--space-xl);
      }
    }
  }
}


/* ######################################## */
/* #######     Download Section     ####### */
/* ######################################## */

.section--download {
  height: 20rem;
  min-height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .button--primary {
    z-index: 10;
  }

  .characterimg--moon {
    height: 100%;
    position: absolute;
    right: 0rem;
    align-items: flex-start;

    img {
      height: 150%;
      margin-top: var(--space-base);
      margin-right: var(--space-base);
      transform: scale(-1, 1);
    }
  }
}


/* ######################################## */
/* #######    Articles Section      ####### */
/* ######################################## */

.section--articles {
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  padding-bottom: var(--space-3xl);

  .articles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-xl) 0;
    transition: background var(--transition-standard), opacity var(--transition-standard);

    &:has(.article-card:hover) .article-card:not(:hover) {

      .article__content,
      .article__img {
        opacity: .5;
      }

      &::before {
        background: var(--color-muted);
      }

      &::after {
        background: var(--color-stroke);
      }
    }

    .article-card {
      display: flex;
      flex-direction: column;
      height: fit-content;
      /* width: 18rem; */
      position: relative;
      padding: 2rem;
      padding-block: .55rem;
      text-align: left;
      transition: transform var(--transition-standard);

      &:hover {
        transform: rotate(2deg) scale(1.05);
      }

      .article__img {
        width: 100%;
        height: 9rem;
        border-radius: 10px;
      }

      .article__content {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        margin-top: var(--space-s);
        margin-bottom: var(--space-xs);
        padding-inline: var(--space-xs);

        * {
          order: 1;
        }

        .article__type {
          order: 0;
          margin-bottom: -.6rem;
          color: var(--color-accent);
          font-family: "Montserrat", sans-serif;
          font-weight: 400;
        }

        .article__title {
          font-size: var(--font-size-xl);
          line-height: 1.2;
          min-height: 3.5rem;
          text-wrap: wrap;

          /* Required for line-clamp to work */
          display: -webkit-box;
          -webkit-box-orient: vertical;

          /* Number of lines you want to show */
          -webkit-line-clamp: 2;

          /* Hides the text that goes beyond the limit */
          overflow: hidden;

          padding-bottom: .1rem;
        }

        .article__text {
          /* Required for line-clamp to work */
          display: -webkit-box;
          -webkit-box-orient: vertical;

          /* Number of lines you want to show */
          -webkit-line-clamp: 4;

          /* Hides the text that goes beyond the limit */
          overflow: hidden;
        }

        .article__readbutton {
          color: var(--color-accent);
          padding-bottom: var(--space-s);
        }
      }
    }
  }

}

.section--kickstarterqrcode {
  padding-block: var(--space-3xl);
  margin-block: var(--space-2xl);
  margin-bottom: var(--space-3xl);

  body:not(.theme--sketch) &::before {
    content: "";
    margin-top: -1rem;
    height: 100%;
    width: 130%;
    /* inset: 0; */
    position: absolute;
    z-index: -1;
    transform: rotate(-2deg);
    /* filter: blur(10px); */

    background: linear-gradient(color-mix(in srgb, var(--color-bg), transparent 20%),
        color-mix(in srgb, var(--color-bg), transparent 20%)),
      url(../assets/images/screenshots/ingame-solution_2-timeswitch.webp);
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  img:first-child {
    height: clamp(10rem, 20vw, 20rem);
  }

  img:last-child {
    margin-top: var(--space-base);
    width: clamp(10rem, 20vw, 20rem);
  }
}


/* ######################################## */
/* ########         Footer         ######## */
/* ######################################## */

.section--footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: fit-content;
  padding-bottom: var(--space-l);
  overflow-y: clip;
  flex-wrap: wrap;

  .footer-links {
    display: flex;
    flex-direction: column;
    height: 19rem;
    justify-content: space-between;

    .footer-nav {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);

      ul {
        display: inline-flex;
        flex-direction: column;
        padding-left: var(--space-base);
        transition: all var(--transition-standard);

        .footer-nav__item {

          a {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            gap: var(--space-xs);
            transition: all var(--transition-bezier);
            position: relative;
            padding-block: var(--space-2xs);

            &:hover {
              padding-left: var(--space-base);

              &::before {
                transition: all var(--transition-standard);
                position: absolute;
                content: "";
                width: .4em;
                height: .4em;
                border: 2px solid var(--color-stroke);
                border-radius: 50%;
                transform: translateX(200%);
                left: 0;
                opacity: 0;
                animation: slideleftright .4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
              }
            }
          }
        }
      }
    }

    .footer-nav2 {
      display: flex;
      flex-direction: row;
      gap: var(--space-base);
      padding-left: var(--space-base);
    }
  }

  .logo {
    transform: translateY(3rem);
    flex-shrink: 1;
  }

  .stylesvg-wrapper {
    right: -15rem;
    bottom: -20rem;
  }
}




/* ############################################### */
/* ########        Mobile Support         ######## */
/* ############################################### */

@media screen and (width < 1370px) {
  .section--gamemenu {
    & .section--char-selection {
      & .char-overview {
        gap: var(--space-2xl);

        .char__card {
          height: 20rem;
          width: 13rem;
        }
      }
    }
  }
}

@media screen and (width < 1260px) {
  .section--char-selection {
    .char-overview {
      align-self: flex-end;
      margin-right: var(--space-2xl);
    }

    .char-overview__name {
      display: none;
    }
  }
}

@media screen and (width < 1000px) {

  /* ########   Navbar   ######## */
  .navbar {
    border-radius: var(--border-radius-standard);
    left: var(--space-s);
    right: var(--space-s);
    bottom: 0;
    margin: var(--space-s) auto;
    transform: translateX(0%);
    padding-inline: var(--space-l);
    width: auto;
    grid-template-columns: [place1-start] 5rem [place1-end place2-start] 1fr [place2-end place3-start] 5rem [place3-end];
    /* position: relative; */
    /* transition: all var(--transition-bezier); */

    [class*="button--"] span {
      display: none;
    }

    &.navbar--small {
      width: auto;
    }

    .navbar__navigation-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &:not(.mobilemenu--opened) .navbar__navigation {
        height: 0;
        padding: 0;

        a {
          visibility: hidden;
          /* Verhindert, dass Screenreader oder das Audit die Links erfassen */
          pointer-events: none;
        }
      }

      .navbar__navigation {
        overflow: clip;
        width: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        bottom: 100%;
        margin-bottom: var(--space-s);
        background-color: var(--color-bg);
        border-radius: var(--border-radius-standard);
        width: 100% !important;
        gap: var(--space-base);
        padding-block: var(--space-xl);

        transition: height var(--transition-bezier), padding var(--transition-bezier);

        &:active,
        &:hover {
          width: 100% !important;
        }

        .nav__item {
          display: flex !important;


        }
      }

      #toggle-navigation {
        display: inline-block;
        width: 4rem;
        height: 4rem;
        position: relative;

        div {
          position: absolute;
          left: .5rem;
          right: .5rem;
          transform: translateY(-50%);
          top: 50%;
          height: .2rem;
          background-color: var(--color-accent);
          transition: transform var(--transition-standard), opacity var(--transition-standard);

          &:first-child {
            top: 1rem;
            transform: translateY(0%);
          }

          &:last-child {
            top: auto;
            bottom: 1rem;
            transform: translateY(0%);
          }
        }
      }

      &.mobilemenu--opened #toggle-navigation {
        div {
          position: absolute;
          left: .5rem;
          right: .5rem;
          transform: translateY(-50%);
          top: 50%;
          height: .2rem;
          /* width: 100%; */
          background-color: var(--color-accent);
          transform: rotate(45deg);

          &:first-child {
            opacity: 0;
          }

          &:last-child {
            transform: rotate(-45deg);
          }
        }
      }
    }
  }

  .section--footer {
    padding-bottom: 10rem;

    .footer-links {
      height: 14rem;
    }
  }

  .section--char-selection {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: auto;

    .char-overview {
      align-self: auto;
      margin: 0;
      padding: 0;
      margin-top: -5rem;
    }

    .char-selection {
      left: auto;
      top: auto;
      margin: auto;

      position: static !important;
      bottom: -100%;
      top: 50%;
      transform: rotate(-90deg) translateY(0);
      margin-top: -5rem;
      margin-bottom: -12rem;
    }
  }

  .section--ingame {
    .section--ingame-promo {

      .promo__item {
        padding-bottom: 8lh;
        background-color: #000000;

        .promo__image {
          width: 100%;
          height: auto;
          margin-bottom: auto;
          display: block;
          /* height: 20rem; */
          aspect-ratio: 600 / 270 !important;
          border-radius: var(--border-radius-standard);
        }

        .promo__content {
          width: auto !important;

          &::before {
            inset: -10rem !important;
            top: -2rem !important;
          }
        }
      }

      .figma-prototype {
        .prototype__disclaimer {
          .prototype__disclaimer__text {
            gap: var(--space-2xs);
            margin-bottom: var(--space-base);
          }
        }
      }
    }
  }


  .section--endgame {
    .section--endgame-resultandleaderboard {

      .screen--opened {
        height: 30rem;
      }

      .endgame__result {
        &>* {
          height: 15rem;
          overflow: visible;
          aspect-ratio: 1/1;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          z-index: 1;
          flex-shrink: 1;

          &.result__content {
            height: 20rem;

            .result__data {

              .result__playerranking {
                font-size: var(--font-size-4xl);
              }
            }
          }
        }
      }

      .endgame__leaderboard {
        .leaderboard__toplistpart {
          &.leaderboard__top3 {

            .leaderboard__place2,
            .leaderboard__place3 {
              scale: .8;
              margin: 0;
            }

            margin-bottom: -2rem;
          }

          &.leaderboard__top5 {
            display: none;
          }
        }
      }
    }
  }

  .section--download {
    .characterimg--moon {
      right: -10rem;
    }
  }
}

@media screen and (width < 730px) {

  .section--gamemenu {
    .section--char-selection {
      margin-bottom: 0;
      padding-bottom: 0;

      .char-overview {
        margin-left: 0;
        display: grid;
        place-items: center;
        padding-bottom: var(--space-2xl);

        .char-overview__name {
          display: none;
        }
      }

      .char-selection {
        height: fit-content;
        flex-wrap: wrap;
        transform: rotate(0deg);
        margin: 0;
        padding: 0;

        .char-selection__ticker {
          height: fit-content;
          width: fit-content;
          flex-direction: row;
          align-items: center;
          flex-wrap: wrap;
          margin: 0;
          padding: 0;

          .character-card-wrapper {
            width: 7rem !important;
            height: 8rem !important;
            display: flex;
            justify-content: center;
            align-items: center;

            /* ! needs to be 1rem to prevent slipping ui */
            margin: 1rem;

            &.character-card--active {
              width: 8rem !important;
              height: 9rem !important;
              /* ! needs to be .5rem to prevent slipping ui */
              margin: .5rem;
            }

            & .character-card {
              width: 100%;
              height: 100%;
              object-fit: cover;

              img {
                width: auto;
                height: auto;
                transform: rotate(0deg);
                width: 100%;
                height: 100%;
                scale: 1;
                object-fit: cover;
              }
            }
          }
        }
      }
    }
  }

  .section--ingame {
    .section--ingame-promo {
      .promo__item {

        &.figma-prototype {
          .prototype__disclaimer {
            justify-content: flex-end;
            padding-bottom: var(--space-xl);

            /* .prototype__disclaimer__buttons {
              align-items: ;
            } */

            .prototype__disclaimer__text {
              p {
                display: inline;

                &:first-of-type {
                  font-size: inherit;
                }
              }
            }
          }
        }

        .promo__content {}
      }
    }
  }

  .section--endgame {
    .section--endgame-resultandleaderboard {

      .result__character-card,
      .result__map-card {
        display: none !important;
      }

      .endgame__leaderboard {
        .leaderboard__title {
          top: -5%;
        }

        .leaderboard__toplistpart {
          &.leaderboard__top3 {

            scale: .7;
            flex-wrap: wrap;
            width: 120vw;
            gap: 0;
            margin: -4rem;

            .leaderboard__place1 {
              order: 0;
              margin: 0;
              width: 100%;
            }

            .leaderboard__place2,
            .leaderboard__place3 {
              /* scale: .3; */
              margin: 0;
            }
          }
        }
      }
    }
  }
}

@media screen and (width < 450px) {


  h2 {
    font-size: var(--font-size-l) !important;
  }

  :not(.fact__content)>p {
    /* font-size: var(--font-size-s) !important; */
  }

  .section--gamemenu {
    .section--map-selection {
      .map-selection {
        scale: .8;
      }
    }

    .section--char-selection {
      .char-overview {
        .char__card {
          scale: .9;
        }

        .char__details {
          width: 100%;

          .char__details__body {
            .char__details__stats {
              .char__details__stat:not(.char__details__stat--type) {
                .stat__value {
                  scale: .7;
                }
              }
            }
          }
        }
      }
    }
  }

  .section--ingame {

    h1,
    h2,
    h3 {
      font-size: var(--font-size-l) !important;
    }

    h4,
    p {
      /* font-size: var(--font-size-s) !important; */
    }

    .section--ingame-promo {

      .promo__item:not(.figma-prototype) {

        .promo__image {}

        .promo__content {
          margin: 0 !important;
          left: var(--space-s) !important;
          right: var(--space-s) !important;
          bottom: var(--space-l) !important;
        }
      }
    }
  }

  .section--endgame-resultandleaderboard {
    height: 60rem;

    .endgame__result {
      height: 25rem !important;

      .result__playerranking-adjustment {
        font-size: var(--font-size-3xl) !important;
      }

      .button--primary {
        display: none;
      }
    }

    .endgame__leaderboard {
      height: 35rem !important;
      opacity: 1 !important;
      align-items: center;
      justify-content: center;

      .leaderboard__placing {
        width: 100%;
      }

      .button--primary {
        display: none;
      }
    }
  }
}

@media (hover: none) {

  #custom-cursor {
    display: none !important;
  }

  .iframe-container::before {
    display: none;
    content: "";

    iframe {
      opacity: 1;
    }
  }
}





/* ############################################### */
/* ########     Lenis Smooth Scroll       ######## */
/* ############################################### */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
  /* WICHTIG: Überschreibt natives Smooth Scroll */
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
  /* Performance-Boost beim Scrollen über Iframes */
}