* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-transform: uppercase;
}

body {
  font-family: "PS2P", sans-serif; /* Mit Anführungszeichen sicherer */
  line-height: 1.6;
  color: black;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  /* 1. Zuerst die Farbe als Fallback */
  background-color: darkgrey;

  /* 2. Dann das Bild (überschreibt die Farbe nur dort, wo das Bild ist) */
  background-image: url("/img/scanlines.webp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

h1 {
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  padding-bottom: 10px;
  color: white;
  animation: glitch 4s infinite;
}
h2 {
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  color: white;
  padding-bottom: 10px;
  animation: glitch 4s infinite;
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: black;
}

p.small {
  font-size: 12px;
  font-weight: 400;
}
p.a {
  white-space: pre;
}

header {
  /* Positionierung */
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;

  /* Optik */
  width: 100%;
  height: 55px;
  padding: 10px;
  background-color: black;
  border-bottom: 10px groove lime;
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.3s, top 0.3s;

  /* Layout */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Animationen entfernt */
}

header:hover {
  opacity: 1;
  top: 13px;
  transform: translateX(-50%) scale(1.5);
}

header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 0px;
}

header nav ul li a {
  text-decoration: none;
  color: lime;
  font-size: 14px;
  padding: 15px 6px;
  transition: all 0.2s;
}

header nav ul li a:hover, a:hover {
  color: black;
  background-color: lime;
  animation: glitch 5s;
}

section {
  min-height: 100vh;
  padding: 80px 40px 60px;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 0px 0px 15px 0px;
}
#karte_01 {
  background: hsla(60, 100%, 50%, 0.5);
  border: 8px groove yellow;
}
#karte_02 {
  background: hsla(300, 100%, 50%, 0.5);
  border: 8px groove magenta;
}
#karte_03 {
  background: hsla(240, 100%, 50%, 0.5);
  border: 8px groove blue;
}
#karte_04 {
  background: hsla(120, 100%, 50%, 0.5);
  border: 8px groove lime;
}
#karte_05 {
  background: hsla(0, 100%, 50%, 0.5);
  border: 8px groove red;
}

#camcam {
  max-width: 480px; /* wird nie breiter als 480 px */
  width: 100%; /* wird schmaler, wenn der Container kleiner ist */
  height: auto; /* Proportionen bleiben erhalten – KEIN Verzerren! */
  border: 3px solid magenta;
  float: left;
  margin-right: 10px;
  transition: transform 0.3s; /* Animation */
}

#camcam:hover {
  transform: scale(1.5) rotate(-2deg);
}

#filterSelect {
  margin-bottom: 5px;
  /* Entfernt den Standard-Pfeil und das OS-Design */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Dein eigenes Design */
  width: 270px;
  padding: 10px 15px;
  font-size: 16px;
  color: white;
  font-family: PS2P;
  background-color: #000;
  border: 2px solid black;
  border-radius: 0px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s, background-color 0.3s;
}

/* Hover-Effekt für das Dropdown-Menü */
#filterSelect:hover {
  border-color: lime;
  background-color: #000;
}

#filterSelect option:hover {
  background-color: lime !important;
}

/* Canvas für SNAKE */
canvas {
  border: 1px solid black;
  background-color: #f0f0f0;
  display: block;
  margin: 0 auto;
}
/* MARQUEE AB HIER */
/* Der Container, der den Text begrenzt */
.marquee-container {
  width: 100%;
  overflow: hidden; /* Versteckt den Text außerhalb der Box */
  background: #222;
  border-top: 2px solid lime;
  border-bottom: 2px solid lime;
  padding: 10px 0;
  margin-bottom: 20px;
}

/* Die Animation */
.marquee-text {
  display: inline-block;
  white-space: nowrap; /* Kein Zeilenumbruch */
  font-family: "PS2P";
  color: magenta;
  font-size: 16px;
  text-transform: uppercase;
  animation: scroll-left 25s linear infinite; /* Geschwindigkeit hier anpassen */
}

@keyframes scroll-left {
  from {
    transform: translateX(55%);
  }
  to {
    transform: translateX(-100%);
  }
}
/* MARQUEE ENDET HIER */

footer {
  /* Positionierung */
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* Zentriert das Element exakt */
  z-index: 100;

  /* Optik */
  width: 100%;
  height: 55px;
  padding: 10px;
  background-color: black;
  border-top: 10px groove lime;
  opacity: 0.75;
  transition: opacity 0.2s;

  /* Layout: Elemente nebeneinander */
  display: flex;
  justify-content: center;
  align-items: center;
}

footer:hover {
  opacity: 1;
}
footer p {
  color: lime;
  font-size: 8px;
  font-weight: 400;
}

@keyframes glitch {
  0% { transform: translate(0); text-shadow: none; }
  1% { transform: translate(-4px, -2px) skewX(5deg); text-shadow: 7px 0 red, -7px 0 red; }
  2% { transform: translate(4px, 2px) skewX(-5deg); text-shadow: -7px 0 red, 7px 0 blue; }
  3% { transform: translate(-4px, 1px); text-shadow: 5px 0, -5px 0 magenta; }
  4% { transform: translate(0); scale: 1.05; }
  5% { transform: translate(3px, -3px); text-shadow: -5px 0 cyan, 5px 0 yellow; }
  6% { transform: translate(0); scale: 1; text-shadow: none; }
  /* Kurze Ruhephasen dazwischen für den Überraschungseffekt */
  30% { transform: translate(0); }
  31% { transform: scaleY(2) skewX(20deg); }
  32% { transform: scaleY(1) skewX(0deg); }
  100% { transform: translate(0); }
}

video {
  width: 100%;           /* Passt die Breite an den Container an */
  max-width: 1000px;      /* Begrenzt die maximale Größe */
  border-radius: 0px;   /* Abgerundete Ecken */
  box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Schatteneffekt */
  outline: none;         /* Entfernt den Standard-Fokusrahmen */
}

#adventure-frame {
  width: 100%;
  height: 550px;
  border: none;
  border-radius: 0px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.9);
  overflow: hidden; 
  display: block;
}