@font-face { font-family:'Masque'; src:url('Fonts/masque.ttf') format('truetype'); }

body { 
  font-family:'Roboto', sans-serif; 
  background:black; 
  color:white; 
  margin:0; 
  padding:0; 
}

.container {
  max-width:1200px;
  margin:0 auto;
  padding:20px;
}

/* Hero */
.hero {
  text-align:center;
  padding:50px 20px;
}
.hero h1 {
  color:orange;
  font-family:'Masque',sans-serif;
  font-size:2.8rem;
  margin-bottom:10px;
}
.hero p {
  font-size:1.2rem;
  margin-bottom:20px;
}
.btn {
  background:orange;
  color:black;
  padding:10px 15px;
  border-radius:5px;
  text-decoration:none;
  display:inline-block;
  margin:5px;
  transition:0.3s;
  font-family:'Masque',sans-serif;
}
.btn:hover {
  background:black;
  color:orange;
  border:1px solid orange;
}

/* Packages */
.packages {
  text-align:center;
  margin-top:40px;
}
.packages h2 {
  color:orange;
  font-family:'Masque',sans-serif;
  margin-bottom:30px;
}
.cards {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
}
.card {
  background:#111;
  padding:25px;
  border-radius:12px;
  flex:1 1 260px;
  max-width:280px;
  text-align:center;
  transition:transform 0.2s;
  position:relative;
}
.card:hover {
  transform:translateY(-5px);
}
.card h3 {
  color:orange;
  font-family:'Masque',sans-serif;
  font-size:1.5rem;
}
.card p {
  margin:8px 0;
}
.card .price {
  font-size:20px;
  font-weight:bold;
  color:#fff;
  margin:15px 0;
}

/* Highlight Business Card mit Impuls-Effekt */
.highlight {
  border:2px solid orange;
  position: relative;
  overflow: hidden;
}
.highlight::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  border:2px solid transparent;
  background: linear-gradient(90deg,
    rgba(255,140,0,0) 0%,
    orange 40%,
    #ffcc33 60%,
    rgba(255,140,0,0) 100%);
  background-size:200% 100%;
  animation: border-pulse 5s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}
@keyframes border-pulse {
  from { background-position:200% 0; }
  to   { background-position:-200% 0; }
}

/* Footer */
footer { 
  background:#111; 
  padding:20px 0; 
  border-top:2px solid orange; 
  text-align:center; 
  color:#ccc; 
}

/* Responsive */
@media screen and (max-width:768px){
  .cards { flex-direction:column; align-items:center; }
  .hero h1 { font-size:2rem }
  .hero p { font-size:1rem }
}

/* Neon Wave Background */
.bg-waves {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.bg-waves svg { width:100%; height:100%; display:block; }

.wave {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3;
  opacity: 0.8;
  filter: url(#glow);
  animation: pulse 10s ease-in-out infinite alternate;
}
.wave-group {
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--angle, 0));
  transform-origin: 50% 50%;
  transition: transform 20s ease-in-out;
}
.wave-group:nth-child(1) {
  animation: drift1 40s linear infinite;
}
.wave-group:nth-child(2) {
  animation: drift2 55s linear infinite reverse;
}
.wave-group:nth-child(3) {
  animation: drift3 65s linear infinite;
}
@keyframes drift1 {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  25%  { transform: translate(100px, -80px) rotate(120deg); }
  50%  { transform: translate(-120px, 100px) rotate(240deg); }
  75%  { transform: translate(80px, 120px) rotate(300deg); }
  100% { transform: translate(0px, 0px) rotate(360deg); }
}
@keyframes drift2 {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  20%  { transform: translate(-150px, 90px) rotate(100deg); }
  50%  { transform: translate(130px, -100px) rotate(200deg); }
  80%  { transform: translate(-120px, -120px) rotate(320deg); }
  100% { transform: translate(0px, 0px) rotate(360deg); }
}
@keyframes drift3 {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  30%  { transform: translate(140px, 140px) rotate(150deg); }
  60%  { transform: translate(-160px, -120px) rotate(250deg); }
  90%  { transform: translate(120px, -160px) rotate(330deg); }
  100% { transform: translate(0px, 0px) rotate(360deg); }
}
@keyframes pulse {
  from { stroke-width: 3; opacity: .7; }
  to   { stroke-width: 4.5; opacity: 1; }
}