/* =====================================================================
   WBA UNIFIED DESIGN SYSTEM  ·  wba-design.css   (Apple-inspired)
   ---------------------------------------------------------------------
   Vereinheitlicht das Erscheinungsbild aller WBA-Portale und bringt
   Tiefe, Materialitaet und lebendige, feder-basierte Bewegung nach
   Apples Fluid-Interface-Prinzipien: Reaktion auf Druck, transluzente
   Materialien, kontextbezogene Schatten, gestaffelte Einblendung,
   optische Typografie. Die AKZENTFARBE bleibt pro App unterschiedlich:
     Website Blau · Demo Indigo · Lizenz Rot · Update Gruen · Support Tuerkis
   Wird NACH der bestehenden style.css geladen. Hook: body.wba-theme-*
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root{
  --wba-font:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wba-font-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --wba-bg:#f3f5fa; --wba-surface:#fff; --wba-surface-2:#f7f9fc;
  --wba-ink:#0f172a; --wba-ink-soft:#334155; --wba-muted:#64748b;
  --wba-line:rgba(15,23,42,.08); --wba-line-strong:rgba(15,23,42,.14);
  --wba-r-sm:11px; --wba-r:15px; --wba-r-lg:22px; --wba-r-pill:999px;
  /* Weiche, gestapelte Schatten (Ambient + Direktlicht) */
  --wba-shadow-sm:0 1px 2px rgba(15,23,42,.05), 0 2px 8px rgba(15,23,42,.05);
  --wba-shadow:0 2px 4px rgba(15,23,42,.04), 0 10px 26px -6px rgba(15,23,42,.12);
  --wba-shadow-hi:0 4px 10px rgba(15,23,42,.06), 0 22px 48px -10px rgba(15,23,42,.20);
  --wba-shadow-lg:0 30px 70px -20px rgba(15,23,42,.28);
  /* Heller Materialrand (Licht faengt sich an der Oberkante) */
  --wba-edge:inset 0 1px 0 rgba(255,255,255,.65);
  /* Apple-Federn: kritisch gedaempft (kein Ueberschwingen) + verspielt */
  --wba-spring:cubic-bezier(.32,.72,0,1);
  --wba-spring-soft:cubic-bezier(.22,1,.36,1);
  --wba-dur:.42s; --wba-dur-fast:.16s;
}
/* Akzent je Theme */
.wba-theme-website{--wba-accent:#2563eb;--wba-accent-strong:#1d4ed8;--wba-accent-soft:rgba(37,99,235,.08)}
.wba-theme-demo   {--wba-accent:#6366f1;--wba-accent-strong:#4f46e5;--wba-accent-soft:rgba(99,102,241,.08)}
.wba-theme-license{--wba-accent:#dc2626;--wba-accent-strong:#b91c1c;--wba-accent-soft:rgba(220,38,38,.08)}
.wba-theme-update {--wba-accent:#059669;--wba-accent-strong:#047857;--wba-accent-soft:rgba(5,150,105,.08)}
.wba-theme-support{--wba-accent:#0891b2;--wba-accent-strong:#0e7490;--wba-accent-soft:rgba(8,145,178,.08)}

/* ---- Basis / optische Typografie (Tracking groessenabhaengig) ---- */
body[class*="wba-theme"]{
  font-family:var(--wba-font)!important;color:var(--wba-ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
}
body[class*="wba-theme"] h1{letter-spacing:-.022em;line-height:1.06;font-weight:700}
body[class*="wba-theme"] h2{letter-spacing:-.016em;line-height:1.15}
body[class*="wba-theme"] h3{letter-spacing:-.012em;line-height:1.2}
body[class*="wba-theme"] .page-header h1,body[class*="wba-theme"] .topbar h1{font-weight:700}
body[class*="wba-theme"] table,body[class*="wba-theme"] .kv-val,body[class*="wba-theme"] .license-kpi,
body[class*="wba-theme"] .kpi strong,body[class*="wba-theme"] .stat-card,body[class*="wba-theme"] .mono{font-variant-numeric:tabular-nums}
body[class*="wba-theme"] .mono,body[class*="wba-theme"] .license-key-row .input,body[class*="wba-theme"] code{font-family:var(--wba-font-mono)}

/* ---- Sidebar als dunkles Material mit Tiefe + hellem Innenrand ---- */
body[class*="wba-theme"] .app-sidebar,body[class*="wba-theme"] .sidebar{
  box-shadow:inset -1px 0 0 rgba(255,255,255,.05), 2px 0 30px -8px rgba(2,6,23,.35);
}
body[class*="wba-theme"] .sidebar-link,body[class*="wba-theme"] .nav-item{
  border-radius:var(--wba-r-sm);font-weight:550;
  transition:background var(--wba-dur-fast) var(--wba-spring),
             color var(--wba-dur-fast) var(--wba-spring),
             transform var(--wba-dur-fast) var(--wba-spring);
}
/* Hover „waechst" leicht in Richtung Inhalt (Hint) */
body[class*="wba-theme"] .sidebar-link:hover,body[class*="wba-theme"] .nav-item:hover{
  background:var(--wba-accent-soft);transform:translateX(2px)}
body[class*="wba-theme"] .sidebar-link:active,body[class*="wba-theme"] .nav-item:active{transform:translateX(2px) scale(.99)}
body[class*="wba-theme"] .sidebar-section-title,body[class*="wba-theme"] .nav-section{
  text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;font-weight:600}
body[class*="wba-theme"] .sidebar-brand-icon,body[class*="wba-theme"] .brand-icon{
  border-radius:var(--wba-r);box-shadow:var(--wba-edge), 0 8px 20px -6px rgba(2,6,23,.5)}

/* ---- Header / Eyebrow ---- */
body[class*="wba-theme"] .page-eyebrow,body[class*="wba-theme"] .eyebrow{
  text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;font-weight:700}

/* ---- Karten: gestapelte Schatten + heller Rand, Lift beim Hover ---- */
body[class*="wba-theme"] .card,
body[class*="wba-theme"] .content-card,
body[class*="wba-theme"] .stat-card,
body[class*="wba-theme"] .public-card{
  border:1px solid var(--wba-line);border-radius:var(--wba-r-lg);
  box-shadow:var(--wba-edge), var(--wba-shadow);
  transition:transform var(--wba-dur) var(--wba-spring), box-shadow var(--wba-dur) var(--wba-spring);
}
body[class*="wba-theme"] .card:hover,
body[class*="wba-theme"] .content-card:hover,
body[class*="wba-theme"] .stat-card:hover{transform:translateY(-2px);box-shadow:var(--wba-edge), var(--wba-shadow-hi)}
body[class*="wba-theme"] .license-kpi,body[class*="wba-theme"] .kpi{
  border-radius:var(--wba-r);border:1px solid var(--wba-line);box-shadow:var(--wba-edge), var(--wba-shadow-sm);
  transition:transform var(--wba-dur) var(--wba-spring), box-shadow var(--wba-dur) var(--wba-spring)}
body[class*="wba-theme"] .license-kpi:hover,body[class*="wba-theme"] .kpi:hover{transform:translateY(-2px);box-shadow:var(--wba-edge), var(--wba-shadow)}

/* ---- Buttons: Druck-Feedback sofort, Hover-Lift federnd ---- */
body[class*="wba-theme"] .btn{
  border-radius:var(--wba-r-sm);font-family:var(--wba-font);font-weight:650;
  transition:transform var(--wba-dur-fast) var(--wba-spring), box-shadow var(--wba-dur) var(--wba-spring), filter var(--wba-dur-fast) var(--wba-spring)}
body[class*="wba-theme"] .btn:hover{transform:translateY(-1px)}
body[class*="wba-theme"] .btn:active{transform:scale(.97);transition:transform 90ms ease-out}

/* ---- Inputs ---- */
body[class*="wba-theme"] .input,body[class*="wba-theme"] input,body[class*="wba-theme"] select,body[class*="wba-theme"] textarea{
  border-radius:var(--wba-r-sm);font-family:var(--wba-font);
  transition:border-color var(--wba-dur-fast) var(--wba-spring), box-shadow var(--wba-dur-fast) var(--wba-spring)}
body[class*="wba-theme"] input[type=checkbox],body[class*="wba-theme"] input[type=radio]{accent-color:var(--wba-accent)}
body[class*="wba-theme"] :focus-visible{outline:2px solid var(--wba-accent);outline-offset:2px}

/* ---- Tabellen ---- */
body[class*="wba-theme"] .table-wrapper,body[class*="wba-theme"] .table-wrap{
  border-radius:var(--wba-r);border:1px solid var(--wba-line);box-shadow:var(--wba-shadow-sm);overflow:hidden}
body[class*="wba-theme"] table th,
body[class*="wba-theme"] .data-table th,
body[class*="wba-theme"] table.data th{
  text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;font-weight:600;background:var(--wba-surface-2)!important;color:var(--wba-muted)!important}
body[class*="wba-theme"] table tbody tr,body[class*="wba-theme"] .data-table tbody tr{transition:background var(--wba-dur-fast) var(--wba-spring)}
body[class*="wba-theme"] table tbody tr:hover,body[class*="wba-theme"] .data-table tbody tr:hover{background:var(--wba-accent-soft)}

/* ---- Badges / Pills / Alerts / Empty ---- */
body[class*="wba-theme"] .pill,body[class*="wba-theme"] .chip,body[class*="wba-theme"] .badge{border-radius:var(--wba-r-pill)}
body[class*="wba-theme"] .badge{padding:3px 10px;font-weight:700}
body[class*="wba-theme"] .chip{transition:transform var(--wba-dur) var(--wba-spring), box-shadow var(--wba-dur) var(--wba-spring)}
body[class*="wba-theme"] .chip:hover{transform:translateY(-2px);box-shadow:var(--wba-shadow)}
body[class*="wba-theme"] .alert{border-radius:var(--wba-r-sm)}
body[class*="wba-theme"] .empty-state{border:1px dashed var(--wba-line-strong);border-radius:var(--wba-r);color:var(--wba-muted);background:var(--wba-surface-2)}

/* ---- Website (Marketing): transluzentes Header-Material ---- */
body[class*="wba-theme"] .site-header{
  background:rgba(255,255,255,.62)!important;
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.5);box-shadow:0 1px 0 rgba(15,23,42,.05)}
body[class*="wba-theme"] .brand-badge{border-radius:var(--wba-r-sm);box-shadow:var(--wba-edge), 0 8px 20px -6px rgba(2,6,23,.28)}

/* ---- Materialize: gestaffelte, feder-artige Einblendung ---- */
@keyframes wba-rise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
body[class*="wba-theme"] .card,
body[class*="wba-theme"] .content-card,
body[class*="wba-theme"] .public-card,
body[class*="wba-theme"] .stat-card,
body[class*="wba-theme"] .license-kpi,
body[class*="wba-theme"] .kpi,
body[class*="wba-theme"] .chip{animation:wba-rise .5s var(--wba-spring-soft) both}
body[class*="wba-theme"] .license-kpi:nth-child(2),body[class*="wba-theme"] .kpi:nth-child(2),body[class*="wba-theme"] .stat-card:nth-child(2),body[class*="wba-theme"] .chip:nth-child(2){animation-delay:.05s}
body[class*="wba-theme"] .license-kpi:nth-child(3),body[class*="wba-theme"] .kpi:nth-child(3),body[class*="wba-theme"] .stat-card:nth-child(3),body[class*="wba-theme"] .chip:nth-child(3){animation-delay:.10s}
body[class*="wba-theme"] .license-kpi:nth-child(4),body[class*="wba-theme"] .kpi:nth-child(4),body[class*="wba-theme"] .stat-card:nth-child(4),body[class*="wba-theme"] .chip:nth-child(4){animation-delay:.15s}
body[class*="wba-theme"] .card:nth-of-type(2){animation-delay:.06s}
body[class*="wba-theme"] .card:nth-of-type(3){animation-delay:.12s}

/* ---- Barrierefreiheit: Bewegung / Transparenz / Kontrast respektieren ---- */
@media (prefers-reduced-motion:reduce){
  body[class*="wba-theme"] *{animation:none!important;transition:opacity .2s ease!important}
  body[class*="wba-theme"] .card,body[class*="wba-theme"] .btn,body[class*="wba-theme"] .kpi,
  body[class*="wba-theme"] .content-card,body[class*="wba-theme"] .stat-card,body[class*="wba-theme"] .chip{transform:none!important}
}
@media (prefers-reduced-transparency:reduce){
  body[class*="wba-theme"] .site-header{background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
@media (prefers-contrast:more){
  body[class*="wba-theme"] .card,body[class*="wba-theme"] .content-card,body[class*="wba-theme"] .stat-card{border-color:rgba(15,23,42,.30)}
}

/* ---- Login-Seiten: Akzent generisch aus --wba-accent ---- */
body[class*="wba-theme"] .wba-login-actions .primary-btn{
  background:linear-gradient(135deg,var(--wba-accent),var(--wba-accent-strong))!important;
  border-color:var(--wba-accent-strong)!important;color:#fff!important}
body[class*="wba-theme"] .wba-login-form .input:focus{
  border-color:var(--wba-accent)!important;box-shadow:0 0 0 4px var(--wba-accent-soft)!important}
body[class*="wba-theme"] .wba-login-brand-logo{background:linear-gradient(135deg,var(--wba-accent),var(--wba-accent-strong))!important;color:#fff!important}
body[class*="wba-theme"] .wba-login-brand-panel .page-eyebrow{color:var(--wba-accent)!important}
body[class*="wba-theme"] .wba-login-security-badge i,
body[class*="wba-theme"] .wba-login-feature i{color:var(--wba-accent)!important}