:root {
  --primary:#ff4d4d;
  --accent:#00ff88;
  --glass:rgba(26,26,26,.82);
  --text:#c9f1ff;
  --radius:14px;
}

body {
  margin:0;
  font-family:'Segoe UI',Arial,sans-serif;
  background:url('boxen/background.jpg') center/cover fixed no-repeat;
  color:var(--text);
}

h1,h2 {
  text-align:center;
  color:var(--accent);
  text-shadow:0 0 12px rgba(0,255,136,.4);
}

/* Tabs */
.tabs {
  display:flex;
  justify-content:center;
  gap:.6rem;
  flex-wrap:wrap;
  margin:2rem 0;
}

.tab {
  padding:.6rem 1.4rem;
  background:var(--glass);
  border-radius:var(--radius) var(--radius) 0 0;
  cursor:pointer;
  font-weight:700;
  transition:transform .25s,box-shadow .25s;
}

.tab.active {
  background:linear-gradient(90deg,var(--primary),var(--accent));
  color:#000;
  transform:scale(1.05);
  box-shadow:0 0 25px rgba(0,255,136,.7);
}

/* Content */
.tab-content {
  max-width:900px;
  margin:0 auto 2rem;
  background:var(--glass);
  border-radius:var(--radius);
  padding:1.6rem;
  box-shadow:0 0 25px rgba(0,255,136,.2);
  animation:fade .4s ease;
}

@keyframes fade {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1;}
}

/* Tabelle */
table {
  width:100%;
  border-collapse:collapse;
}

thead {
  background:linear-gradient(90deg,var(--primary),var(--accent));
}

th,td {
  padding:.8rem;
}

tbody tr:hover {
  background:rgba(0,255,136,.08);
}

/* Mobile */
@media(max-width:768px){
  table,thead,tbody,tr,td {display:block}
  thead{display:none}
  tr{
    margin-bottom:1rem;
    background:rgba(26,26,26,.6);
    border-radius:var(--radius);
    padding:1rem;
  }
  td{
    display:flex;
    justify-content:space-between;
  }
  td:before{
    content:attr(data-label);
    color:var(--accent);
    font-weight:700;
  }
}