/* ===== OPPRO NET – Design Overhaul (keine inhaltlichen Änderungen) =====
   - behält bestehende Struktur und Klassen bei
   - modernisiert Farben, Typografie, Buttons, Karten, Tabellen, Formular-Styling
   - dunkler, kontrastreicher Look mit weichen Kanten
*/
:root{
  --bg: #0a0f1e;
  --fg: #e7eaf3;
  --muted:#9aa4bf;
  --card: rgba(255,255,255,0.06);
  --stroke: rgba(255,255,255,0.08);
  --brand: #4ea8de;
  --brand-2:#6c63ff;
  --danger:#ef4444;
  --success:#10b981;
  --radius: 16px;
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 800px at 0% -10%, rgba(78,168,222,.14), transparent),
    radial-gradient(1000px 600px at 120% 120%, rgba(108,99,255,.12), transparent),
    var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height: 1.6;
}

/* Typo */
h1,h2,h3,h4{line-height:1.2;color:#fff}
h1{font-weight:700}
h2,h3{font-weight:600}
p,li{color:var(--fg)}
small,.muted{color:var(--muted)}

/* Layout helpers */
.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.section{padding:clamp(2rem,6vw,4rem) 0}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  padding:clamp(1rem,2.5vw,1.5rem);
}
.card:hover{transform:translateY(-1px);transition:transform .2s ease}

/* Navbar */
header, .navbar, .topbar{
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, #ffffff 8%, transparent);
  border-bottom: 1px solid var(--stroke);
}
nav a, .nav a, .navbar a{color:#d8def0;text-decoration:none}
nav a:hover, .navbar a:hover{color:#fff}

/* Buttons */
.btn, button, [type=submit], .button{
  appearance:none;
  border:none;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.1rem;
  border-radius: calc(var(--radius) - 4px);
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#fff;
  font-weight:600;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(78,168,222,.25);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover, button:hover, .button:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(108,99,255,.28)}
.btn.secondary{background:#20283f;border:1px solid var(--stroke);color:#e7eaf3;box-shadow:none}
a.button-link{color:#cbe4ff;text-underline-offset:4px}

/* Forms */
input, textarea, select{
  width:100%;
  background:#0f1831;
  border:1px solid var(--stroke);
  color:var(--fg);
  padding:.75rem .9rem;
  border-radius: calc(var(--radius) - 6px);
  outline:none;
}
input:focus, textarea:focus, select:focus{border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 35%, transparent)}

/* Tables */
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden}
th, td{padding:0.85rem 1rem;border-bottom:1px solid var(--stroke)}
th{text-align:left;color:#cfe6ff;font-weight:600;background:color-mix(in oklab, var(--card) 70%, #ffffff 8%)}
tr:hover td{background-color:rgba(255,255,255,.02)}

/* Messages / badges */
.badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:color-mix(in oklab, var(--brand) 24%, transparent);color:#dff1ff;border:1px solid var(--stroke)}

/* Links */
a{color:#99d1ff}
a:hover{color:#c7e4ff}

/* Images */
img{border-radius:12px}

/* Footer */
footer{border-top:1px solid var(--stroke);color:var(--muted)}
footer a{color:#aeb8d4}
footer a:hover{color:#fff}

/* Utility without class conflicts */
.shadow-soft{box-shadow:0 10px 30px rgba(0,0,0,.28)}
.rounded-xl{border-radius:var(--radius)}
.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}