body {
    margin: 0;
    font-family: Arial, sans-serif;
}

nav a {
  font-family: 'Fira Code', monospace;
}


@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

/* Optional: kleiner Glitch-Effekt */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  color: #00fff0;
  text-shadow:
    -1px 0 red,
    1px 2px blue;
  clip: rect(0, 900px, 0, 0);
  animation: glitch 2s infinite linear alternate-reverse;
}

@keyframes glitch {
  0% { clip: rect(2px, 9999px, 44px, 0); transform: translate(0); }
  10% { clip: rect(10px, 9999px, 50px, 0); transform: translate(-2px, -2px); }
  20% { clip: rect(20px, 9999px, 60px, 0); transform: translate(2px, 2px); }
  30% { clip: rect(5px, 9999px, 30px, 0); transform: translate(-2px, 1px); }
  40% { clip: rect(15px, 9999px, 50px, 0); transform: translate(1px, -1px); }
  50% { clip: rect(10px, 9999px, 45px, 0); transform: translate(0); }
  100% { clip: rect(0, 9999px, 44px, 0); transform: translate(0); }
}

/* Hauptinhalt nur sichtbar, wenn verifiziert */
.content {
display: <?php echo $_SESSION['verified'] ? 'block' : 'none';
?>;
    padding: 50px;
}
/* Overlay für Popup */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Glas-Effekt */
    background: rgba(0,0,0,0.3); /* halbtransparent */
    backdrop-filter: blur(8px);        /* alles dahinter verschwommen */
    -webkit-backdrop-filter: blur(10px); /* Safari-Unterstützung */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
/* Popup */
.popup {
    background: #333;
    padding: 35px;
    border-radius: 15px;
    width: 550px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    z-index: 10000;
}
.popup input {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    font-size: 16px;
    color: #313131;
    background: gray;
}
.popup button {
    margin-top: 15px;
    padding: 12px;
    width: 100%;
    background: #444;
    color: white;
    border: none;
    cursor: pointer;
}
.popup button:hover {
    background: #222222;
}
/* Canvas als Hintergrund fixieren */
#bgCanvas {
    position: fixed;      /* bleibt an der gleichen Stelle beim Scrollen */
    top: 0;
    left: 0;
    width: 100vw;         /* volle Breite */
    height: 100vh;        /* volle Höhe */
    z-index: -1;          /* hinter den anderen Inhalten */
}
/* Gradient Text */
.cyber-text {
    font-size: 4rem;
    font-weight: bold;
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
/* Cursor */
.cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: #00f0ff;
    margin-left: 5px;
    animation: blink 1s infinite;
    vertical-align: bottom;
}
@keyframes panelLoad {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
#logout-toggle .dot {
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
#logout-toggle.active .dot {
    transform: translateX(100%);
}
#cyberGrid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* hinter allem */
  background: #02060a;
}