@font-face {
  font-family: 'NeonFont';
  src: url('fonts/font.ttf') format('truetype');
}

body {
  margin: 0;
  height: 100vh;
  background: #000 url('https://www.transparenttextures.com/patterns/dark-mosaic.png');
  background-size: cover;
  background-position: center;
  font-family: 'NeonFont', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.neon-outline {
  font-size: 6rem;
  max-width: 90%;
  color: transparent;
  -webkit-text-stroke: 1.5px #ff6600;
  position: relative;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  margin: 0 auto;
  width: fit-content;
}

/* Ab Handygröße: Max-Breite z. B. auf 95% Viewport begrenzen */
@media (max-width: 600px) {
  .neon-outline {
    font-size: 4rem;
    max-width: 95vw;
  }
}

@keyframes chaotic-flicker-long {
  0%, 100% { 
    opacity: 1;
    text-shadow:
      0 0 5px #ff6600,
      0 0 10px #ff6600,
      0 0 20px #ff3300,
      0 0 40px #ff3300;
  }
  5%   { opacity: 0.2; text-shadow: none; }
  10%  { opacity: 1; text-shadow: 0 0 10px #ff3300; }
  15%  { opacity: 0.1; text-shadow: none; }
  20%  { opacity: 1; text-shadow: 0 0 20px #ff6600; }
  30%  { opacity: 0.3; text-shadow: none; }
  35%  { opacity: 1; text-shadow: 0 0 15px #ff3300; }
  45%  { opacity: 0.1; text-shadow: none; }
  50%  { opacity: 1; text-shadow: 0 0 40px #ff6600; }
  60%  { opacity: 0.3; text-shadow: none; }
  65%  { opacity: 1; text-shadow: 0 0 10px #ff3300; }
  75%  { opacity: 0.2; text-shadow: none; }
  80%  { opacity: 1; text-shadow: 0 0 20px #ff6600; }
  90%  { opacity: 0.4; text-shadow: none; }
}

.neon-outline::before {
  content: "RockSolution";
  position: absolute;
  top: 0;
  left: 0;
  color: #ff6600;
  filter: blur(6px);
  z-index: -1;
  animation: chaotic-flicker-long 6s infinite ease-in-out;
}

.neon-outline::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: #ff6600;
  filter: blur(6px);
  z-index: -1;
  opacity: 80%;
}

h1.neon-outline::before {
  content: "RockSolution"; /* hier muss der Text nochmal stehen */
}

.button-wrapper {
  position: relative;
  top: 100px;
  text-align: center;
}

.neon-button {
  display: inline-block;
  padding: 1rem 2rem;
  color: #ff6600;
  border: 2px solid #ff6600;
  text-decoration: none;
  font-size: 1.5rem;
  text-shadow:
    0 0 5px #ff6600,
    0 0 10px #ff6600,
    0 0 20px #ff3300;
  box-shadow:
    0 0 5px #ff6600,
    0 0 10px #ff6600,
    inset 0 0 5px #ff3300;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
  background-color: transparent;
}

.neon-button:hover {
  background-color: rgba(255, 102, 0, 0.1);
  box-shadow:
    0 0 10px #ff6600,
    0 0 20px #ff3300,
    inset 0 0 10px #ff3300;
}