/* ===============================
   GLOBAL RESET
   =============================== */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --neon:#00f7ff;
  --neon-soft:rgba(0,247,255,.45);
  --bg-dark:#050712;
  --bg-card:rgba(0,0,0,.65);
  --danger:#ff1744;
  --success:#00e676;
}

/* ===============================
   BODY / LAYOUT
   =============================== */
body{
  font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at top,#1e90ff 0%,#050712 45%,#000 100%);
  color:#fff;
  min-height:100vh;
}

.main{
  max-width:1200px;
  margin:40px auto;
  padding:20px;
}

/* ===============================
   LINKS
   =============================== */
a{
  color:var(--neon);
  text-decoration:none;
}
a:hover{
  text-shadow:0 0 8px var(--neon);
}

/* ===============================
   CARD
   =============================== */
.card{
  background:var(--bg-card);
  border:1px solid var(--neon);
  border-radius:18px;
  padding:20px;
  margin-bottom:20px;
  box-shadow:0 0 18px var(--neon-soft);
}

.card h1,
.card h2,
.card h3{
  margin-bottom:12px;
  text-shadow:0 0 10px var(--neon);
}

/* ===============================
   GRID
   =============================== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}

/* ===============================
   BUTTONS
   =============================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 22px;
  border-radius:999px;
  border:2px solid var(--neon);
  background:
    linear-gradient(180deg,#001d2e,#000c14);
  color:#e7fcff;
  font-weight:bold;
  letter-spacing:.5px;
  cursor:pointer;
  box-shadow:
    0 0 10px var(--neon-soft),
    inset 0 0 10px rgba(0,247,255,.25);
  transition:.25s ease;
}

.btn:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    0 0 22px var(--neon),
    inset 0 0 14px rgba(0,247,255,.35);
}

.btn:active{
  transform:scale(.97);
}

/* Button Farben */
.btn-danger{
  border-color:var(--danger);
  color:#fff;
}
.btn-success{
  border-color:var(--success);
  color:#000;
}

/* ===============================
   FORMS
   =============================== */
input,
select,
textarea{
  width:100%;
  padding:10px;
  margin-bottom:12px;
  border-radius:10px;
  border:1px solid var(--neon);
  background:#000;
  color:#fff;
  outline:none;
}

input:focus,
select:focus,
textarea:focus{
  box-shadow:0 0 10px var(--neon);
}

/* ===============================
   TABLES
   =============================== */
.table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}

.table th,
.table td{
  padding:10px;
  text-align:left;
  border-bottom:1px solid rgba(0,247,255,.25);
}

.table th{
  color:var(--neon);
  font-size:13px;
  text-transform:uppercase;
}

/* ===============================
   BADGES
   =============================== */
.badge{
  display:inline-block;
  padding:4px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:bold;
}

.badge-ok{
  background:var(--success);
  color:#000;
}

.badge-off{
  background:var(--danger);
  color:#fff;
}

/* ===============================
   HEADER / NAV
   =============================== */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 22px;
  border-radius:20px;
  border:2px solid var(--neon);
  box-shadow:0 0 22px var(--neon);
  margin-bottom:25px;
}

.header strong{
  font-size:20px;
  text-shadow:0 0 12px var(--neon);
}

.header nav a{
  margin-left:14px;
  font-weight:bold;
}

/* ===============================
   ON AIR
   =============================== */
.onair{
  display:inline-block;
  padding:5px 16px;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-weight:bold;
  letter-spacing:1px;
  animation:pulse 1.2s infinite alternate;
}

@keyframes pulse{
  from{box-shadow:0 0 8px rgba(255,23,68,.6);}
  to{box-shadow:0 0 18px rgba(255,23,68,1);}
}

/* ===============================
   FOOTER
   =============================== */
footer{
  margin-top:60px;
  padding:20px;
  text-align:center;
  font-size:12px;
  color:#7fdfff;
  background:#000;
  border-top:1px solid var(--neon);
}

/* ===============================
   RESPONSIVE
   =============================== */
@media(max-width:800px){
  .main{margin:20px auto}
  .header{flex-direction:column;gap:10px}
}