:root {
  --bg: #285513;
  --card: #6c3d53;
  --accent: #ceebf1;
  --muted: #e0b58f;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
  font-family: Arial, sans-serif;
  display: block;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.5rem;
  min-height: 100vh;
  color: #e6eef6;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* mehrschichtiger Feuer-Hintergrund */
  background: radial-gradient(circle at 50% 50%, rgba(255, 0, 0, 0.896), transparent 70%),
              radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.853), transparent 80%),
              radial-gradient(circle at 60% 40%, rgba(255, 0, 157, 0.885), transparent 70%),
              radial-gradient(circle at 50% 50%, rgba(80, 4, 173, 0.697), transparent 90%),
              linear-gradient(160deg, #1a0a00, #370114, #a06c4e);

  background-blend-mode: screen, screen, lighten, overlay, normal;
  background-size: 200% 200%;
  animation: fireFlame 4s ease-in-out infinite alternate;
}

/* Feuerbewegung */
@keyframes fireFlame {
  0% {
    background-position: 45% 55%, 50% 50%, 55% 45%, 50% 50%, 50% 50%;
    filter: brightness(0.9) saturate(1);
  }
  20% {
    background-position: 48% 52%, 52% 48%, 60% 55%, 48% 50%, 52% 48%;
    filter: brightness(1.1) saturate(1.3);
  }
  40% {
    background-position: 50% 50%, 55% 45%, 45% 55%, 50% 52%, 48% 48%;
    filter: brightness(1.25) saturate(1.4) hue-rotate(10deg);
  }
  60% {
    background-position: 52% 48%, 47% 53%, 50% 50%, 52% 50%, 50% 52%;
    filter: brightness(1.15) saturate(1.25) hue-rotate(-10deg);
  }
  80% {
    background-position: 53% 47%, 45% 55%, 48% 52%, 50% 50%, 48% 50%;
    filter: brightness(1.05) saturate(1.15) hue-rotate(20deg);
  }
  100% {
    background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    filter: brightness(1.3) saturate(1.5) hue-rotate(30deg);
  }
}

#centerImageContainer {
          /* Abstand zum oberen Rand */
  display: flex;               /* zentriert das Bild */
  justify-content: center;     /* horizontal zentrieren */
  align-items: center;         /* vertikal in Container zentrieren */
  height:300px;
}

#centerImageContainer img {
  width: 300px;                /* gewünschte Bildbreite */
  height: 40px;                /* Proportionen beibehalten */
  display: block;
}

.wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  padding: 32px;
  gap: 28px;
  min-height: 100vh;
  box-sizing: border-box;
}

.title h1 {
  margin: 0;
     position: fixed;
  top: 10px; 
  left: 20px;
  font-size: 40px;
  font-weight: 600;
}

.subtitle {
  color: black;
  font-size: 20px;
  margin-top: 6px;
     position: fixed;
  top: 40px; 
  left: 20px;
}

.card {
  background: rgba(99, 24, 24, 0.03);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* Kalender */
.calendar {
   position: fixed;
  top: 100px;   /* unter dem Titel */
  left: 20px;
  z-index: 1000;
  max-width: 400px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 12px;
}

.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button.icon {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.weekdays,
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.day {
  min-height: 60px;
  padding: 8px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: 0.2s;
}

.day:hover {
  background: rgba(6, 182, 212, 0.1);
}

.today {
  background: rgba(6, 212, 130, 0.2);
  border: 1px solid rgba(217, 251, 185, 0.516);
}

.selected {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid var(--accent);
}

.muted {
  color: #ff0000;
}


/* Uhr oben rechts fixiert */
.clock-wrap {
  position: fixed;       /* bleibt beim Scrollen sichtbar */
  top: 20px;             /* Abstand vom oberen Rand */
  right: 20px;           /* Abstand vom rechten Rand */
  z-index: 1000;         /* über anderen Elementen */
}

.analog-card {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Optik der Uhr */
canvas {
  background: radial-gradient(circle at center, #b7a114, #960dc4);
  border-radius: 50%;
}

/* Container für das zentrale PNG */
#centerImageContainer {
  width: 200px;
  margin: 40px auto 0 auto; /* 40px Abstand vom oberen Rand, zentriert */
  display: flex;
  justify-content: center;
  align-items: center;
}

#centerImageContainer img {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive Anpassung */
@media (max-width: 900px) {
  .analog-card {
    width: 250px;
    height: 250px;
  }
}

/* 🎮 PING PONG GAME STYLING */
.game-section {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}

#pongContainer {
  margin-top: 10px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 140, 0, 0.15), rgba(0, 0, 0, 0.9));
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
  padding: 10px;
}

#pong {
  display: block;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
}
/* Grund-Hintergrund */
.thunderstorm {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 200vh;
  background: linear-gradient(to bottom, #0a0a0f, #1a1a2e);
  overflow: hidden;
  z-index: 10;
}

/* Wolken */
.cloud {
  position: absolute;
  background: rgba(200,200,200,0.2);
  border-radius: 50%;
  filter: blur(30px);
  animation: moveClouds 60s linear infinite;
}

.cloud1 {
  width: 200px;
  height: 80px;
  top: 20%;
  left: -250px;
}

.cloud2 {
  width: 300px;
  height: 100px;
  top: 50%;
  left: -350px;
  animation-duration: 80s;
}

/* Wolkenbewegung */
@keyframes moveClouds {
  0% { transform: translateX(0); }
  100% { transform: translateX(120vw); }
}

/* Blitz */
.lightning {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0);
  animation: flash 5s infinite;
}

/* Blitz-Funktion */
@keyframes flash {
  0%, 85%, 100% { background: rgba(255,255,255,0); }
  86% { background: rgba(255,255,255,0.7); }
  87% { background: rgba(255,255,255,0); }
  88% { background: rgba(255,255,255,0.5); }
  89% { background: rgba(255,255,255,0); }
}
/* Schalter unten links */
#stormControl {
  position: sticky;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  color: #02102c;
  font-family: "Segoe UI", sans-serif;
  z-index: 1001;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin-right: 10px;
}

.switch input { display: none; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #fefea0;
  transition: 0.4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px; width: 20px;
  left: 2px; bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #d406c6;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* Gewitter-Container */
.thunderstorm {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 200vh;
  background: linear-gradient(to bottom, #0a0a0f, #1a1a2e);
  overflow: hidden;
  z-index: -1;
  opacity: 0; /* standardmäßig aus */
  transition: opacity 0.5s ease-in-out;
}

/* Wolken */
.cloud {
  position: absolute;
  background: rgba(200,200,200,0.2);
  border-radius: 50%;
  filter: blur(30px);
}

.cloud1 {
  width: 200px; height: 80px;
  top: 20%; left: -250px;
}

.cloud2 {
  width: 300px; height: 100px;
  top: 50%; left: -350px;
}

/* Wolkenbewegung */
.cloud.animate { 
  animation: moveClouds 60s linear infinite; 
}
@keyframes moveClouds {
  0% { transform: translateX(0); }
  100% { transform: translateX(120vw); }
}

/* Blitz */
.lightning { 
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0);
}

.lightning.animate {
  animation: flash 5s infinite;
}

@keyframes flash {
  0%, 85%, 100% { background: rgba(255,255,255,0); }
  86% { background: rgba(255,255,255,0.7); }
  87% { background: rgba(255,255,255,0); }
  88% { background: rgba(255,255,255,0.5); }
  89% { background: rgba(255,255,255,0); }
}

#pongContainer {
  margin-top: 10px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;

  /* Hintergrundbild */
  background: url('background.jpg') no-repeat center center;
  background-size: cover;

  box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
  padding: 10px;
}
.arcade-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px; /* Abstand zwischen Canvas und Button */
}

/* 🎯 Individueller Maus-Cursor */
body {
  cursor: url('cursor.png') 8 8, auto; /* PNG-Cursor + Hotspot-Koordinaten */
}

/* Falls du bestimmte Bereiche mit normalem Cursor willst */
.no-custom {
  cursor: auto;
}