body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.logo-wrapper {
    position: relative;
    display: inline-block;
    width: clamp(300px, 70vw, 800px); /* passt sich der Bildschirmgröße an */
}

/* Basis-Logo: b4dto */
.logo-base {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
}

/* Flackerndes X (Position: überlagert das rechte Ende) */
.logo-x {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    animation: flackern 6s infinite;
    filter: drop-shadow(0 0 10px #00ff00);
    pointer-events: none;
    user-select: none;
}

/* Flacker-Animation */
@keyframes flackern {
  0%   { opacity: 1; filter: drop-shadow(0 0 16px #00ff00); }
  10%  { opacity: 0.2; filter: none; }
  12%  { opacity: 0.7; filter: drop-shadow(0 0 4px #00ff00); }
  14%  { opacity: 0.1; filter: none; }
  17%  { opacity: 1; filter: drop-shadow(0 0 18px #00ff00); }
  20%  { opacity: 0.5; filter: drop-shadow(0 0 2px #00ff00); }
  23%  { opacity: 1; filter: drop-shadow(0 0 20px #00ff00); }
  60%  { opacity: 1; filter: drop-shadow(0 0 14px #00ff00); }
  80%  { opacity: 0.2; filter: none; }
  100% { opacity: 1; filter: drop-shadow(0 0 12px #00ff00); }
}