:root{
  --bg1:#0f1220;
  --bg2:#141a2f;
  --acc1:#ff3b3b;
  --acc2:#6c5ce7;
  --glass-bg: rgba(255,255,255,.05);
  --glass-bd: rgba(255,255,255,.18);
  --text-on-glass: #eef1ff;
  --muted-on-glass: rgba(240,243,255,.78);
  --shadow: 0 14px 40px rgba(0,0,0,.45);
}
html,body{
  background:
    radial-gradient(1200px 600px at 15% 0%, #1a1f35 0%, transparent 60%),
    radial-gradient(800px 500px at 85% 20%, #0e1323 0%, transparent 55%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  color: #e9ecff;
}
#preloader{position:fixed;inset:0;background:#0f0f12;display:flex;align-items:center;justify-content:center;z-index:9999}
#preloader .dot{width:12px;height:12px;border-radius:50%;margin:0 6px;background:#fff;animation:b 1s infinite alternate}
#preloader .dot:nth-child(2){animation-delay=.15s}
#preloader .dot:nth-child(3){animation-delay:.3s}
@keyframes b{to{transform:translateY(-10px);opacity:.5}}
.bg-gradient{
  background: conic-gradient(from 210deg at 60% 40%, #202651, #14193a, #202651);
  animation: hueRoll 12s ease-in-out infinite alternate;
}
@keyframes hueRoll { to { filter:hue-rotate(10deg) saturate(1.05);} }
.card, .glass{
  background: var(--glass-bg)!important;
  border: 1px solid var(--glass-bd)!important;
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  color: var(--text-on-glass);
  position: relative;
  overflow: hidden;
}
.card h5, .glass h5, .card .card-title{ color: #ffffff; }
.card p, .glass p, .card .text-secondary, .glass .text-secondary{ color: var(--muted-on-glass)!important; }
.table.table-dark{
  --bs-table-bg: rgba(255,255,255,.04);
  --bs-table-striped-color: #eef1ff;
  --bs-table-striped-bg: rgba(255,255,255,.06);
  --bs-table-color: #eef1ff;
  border-color: rgba(255,255,255,.15);
}
.table thead th{ color:#fff; border-bottom-color: rgba(255,255,255,.2); }
.table tfoot th{ color:#fff; }
.form-control, .form-select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.form-control:focus, .form-select:focus{
  background: rgba(255,255,255,.1);
  border-color: #8f87ff;
  color: #fff;
  box-shadow: 0 0 0 .2rem rgba(108,92,231,.25);
}
.btn-primary{
  background-image: linear-gradient(135deg,var(--acc1),var(--acc2));
  border: 0; color: #fff;
}
.btn-primary:hover{ filter:brightness(1.07) contrast(1.05); transform: translateY(-1px); }
.btn-outline-light{ border-color: rgba(255,255,255,.6); color:#fff; }
.btn-outline-light:hover{ background: rgba(255,255,255,.1); }
.card::before, .glass::before{
  content:"";
  position:absolute; inset:-2px;
  background: conic-gradient(from 180deg, var(--acc1), var(--acc2), var(--acc1));
  z-index: 0; opacity:0; transition: opacity .35s ease;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
  border-radius: 18px;
}
.card:hover::before, .glass:hover::before{ opacity:.55; }
.card::after, .glass::after{
  content:"";
  position:absolute; top:-40%; left:-60%;
  width:40%; height:180%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  opacity:0; transition: opacity .2s ease, left .8s ease;
  z-index:0;
}
.card:hover::after, .glass:hover::after{ opacity:1; left:120%; }
.card > *, .glass > *{ position:relative; z-index:1; }
.reveal{opacity:0; transform: translateY(18px); transition: all .6s ease;}
.reveal.revealed{opacity:1; transform: none;}
.card:hover{transform: translateY(-3px); transition: transform .22s ease;}
.navbar .nav-link{ color: rgba(255,255,255,.85)!important; }
.navbar .nav-link:hover{ color: #fff!important; text-shadow: 0 0 6px rgba(255,255,255,.25); }
a{ color:#cfd5ff; }
a:hover{ color:#ffffff; text-decoration: underline; }


/* Modal polish */
.modal-content{ background: rgba(20,22,34,.96)!important; backdrop-filter: blur(8px); border-radius: 16px; }
.modal .btn-close{ filter: invert(1); }
.modal .widefat{ background: transparent; color:#e9ecff; }
.modal .widefat td, .modal .widefat th{ border-color: rgba(255,255,255,.15); }


/* ==== NAV: Abstände, Lesbarkeit, Hover (Patch) ==== */
.navbar .navbar-nav{
  gap: .6rem;
  flex-wrap: wrap; /* verhindert 'Zusammenquetschen' */
}
@media (min-width: 992px){
  .navbar .navbar-nav{ gap: 1.1rem; }
}
.navbar .nav-item .nav-link{
  padding: .35rem .8rem;
  border-radius: 999px;
  color: rgba(255,255,255,.88) !important;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
  letter-spacing: .02em;
}
.navbar .nav-item .nav-link:hover,
.navbar .nav-item .nav-link:focus{
  color: #fff !important;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 18px rgba(0,0,0,.25);
  text-decoration: none;
  transform: translateY(-1px);
}
.navbar .current-menu-item > .nav-link,
.navbar .current_page_item > .nav-link,
.navbar .nav-item .nav-link.active{
  background-image: linear-gradient(135deg,var(--acc1),var(--acc2));
  color:#fff !important;
  box-shadow: 0 6px 22px rgba(108,92,231,.35);
}
@media (min-width: 992px){
  .navbar .nav-item .nav-link{ position: relative; }
  .navbar .nav-item .nav-link::after{
    content:"";
    position:absolute; left:.8rem; right:.8rem; bottom:.25rem;
    height:2px; border-radius:2px;
    background: linear-gradient(90deg,var(--acc1),var(--acc2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
    opacity:.85;
  }
  .navbar .nav-item .nav-link:hover::after,
  .navbar .current-menu-item > .nav-link::after{ transform: scaleX(1); }
}
.navbar .btn{ margin-left: .25rem; }
@media (min-width: 992px){
  .navbar .btn{ margin-left: .5rem; }
}