/*
 * dunkel-style.css – Hell/Dunkel Theme Completions
 * Dark-Mode ist Standard (html:not(.light)).
 * Light-Mode via html.light.
 * Hintergrund liegt auf html-Element – zuverlässig bei background-attachment:fixed.
 */

/* ── Dark Mode sichern (Standard – auch ohne Klasse) ─────── */
html:not(.light) {
  --primary:      #F97316;
  --primary-dark: #EA580C;
  --secondary:    #818CF8;
  --accent:       #F97316;
  --bg:           #0B0C1D;
  --surface:      #0F1128;
  --surface-2:    #141630;
  --text:         #F1F5FF;
  --muted:        #8896B3;
  --line:         rgba(255,255,255,.07);
  --glass:        rgba(15,17,40,0.75);
  --glass-h:      rgba(20,22,48,0.92);
  --border:       rgba(129,140,248,.14);
  --shadow:       0 8px 40px rgba(0,0,0,.60);
  --shadow-s:     0 4px 18px rgba(0,0,0,.40);
  --craft:        #818CF8;
  --grad:         linear-gradient(135deg, #F97316 0%, #FB923C 100%);
  --grad-hero:    linear-gradient(135deg, #6366F1 0%, #818CF8 50%, #A78BFA 100%);
  --grad-text:    linear-gradient(135deg, #818CF8 0%, #A78BFA 60%, #F97316 100%);
}

/* ── Light Mode Hintergrund direkt auf html (überschreibt body) ── */
html.light {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(79,70,229,.08) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 65%, rgba(124,58,237,.05) 0%, transparent 50%),
    #F8F9FF !important;
  background-attachment: fixed !important;
}

/* ── Light Mode: Noise + Dot-Grid hell ───────────────────── */
html.light body::before {
  opacity: .015; /* Noise etwas schwächer im Hellen */
}
html.light body::after {
  background-image: radial-gradient(circle, rgba(79,70,229,.05) 1px, transparent 1px) !important;
}

/* ── Light Mode: Formular-Inputs ─────────────────────────── */
html.light .form-group input,
html.light .form-group textarea,
html.light .form-group select {
  background: rgba(255,255,255,.90);
  border-color: rgba(79,70,229,.18);
  color: var(--text);
}
html.light .form-group input:focus,
html.light .form-group textarea:focus,
html.light .form-group select:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.10);
}

/* ── Light Mode: Admin ───────────────────────────────────── */
html.light .admin-layout { background: #F0F1FF; }
html.light .admin-sidebar {
  background: #FFFFFF;
  border-right-color: rgba(79,70,229,.10);
}
html.light .admin-main { background: #F8F9FF; }
html.light .admin-main .card { background: #FFFFFF; border-color: rgba(79,70,229,.10); }
html.light .form-group input,
html.light .form-group select,
html.light .form-group textarea { background: #FFFFFF; }
html.light .toggle-slider { background: rgba(0,0,0,.15); }

/* ── Light Mode: Login ───────────────────────────────────── */
html.light .login-wrap {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(79,70,229,.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(124,58,237,.05) 0%, transparent 55%),
    #F8F9FF;
}
html.light .login-card {
  background: rgba(255,255,255,.95);
  border-color: rgba(79,70,229,.16);
  box-shadow: 0 8px 40px rgba(79,70,229,.12), 0 2px 8px rgba(0,0,0,.06);
}

/* ── Light Mode: Navigation ─────────────────────────────── */
html.light nav {
  background: rgba(255,255,255,0.92);
  border-color: rgba(79,70,229,.14);
}
html.light .nav-links a:hover,
html.light .nav-links a.active {
  background: rgba(79,70,229,.08);
  color: var(--secondary);
}
html.light .mobile-menu a:hover,
html.light .mobile-menu a.active {
  background: rgba(79,70,229,.06);
  color: var(--secondary);
}

/* ── Light Mode: Buttons ─────────────────────────────────── */
html.light .btn-ghost {
  background: rgba(79,70,229,.06);
  border-color: rgba(79,70,229,.15);
  color: var(--text);
}
html.light .btn-ghost:hover { background: rgba(79,70,229,.10); }
html.light .btn-sm {
  background: rgba(79,70,229,.08);
  color: var(--secondary);
  border-color: rgba(79,70,229,.15);
}
html.light .btn-sm:hover { background: rgba(79,70,229,.14); }

/* ── Light Mode: Announcement Bar ───────────────────────── */
html.light .announcement-bar {
  background: var(--grad-hero);
  color: #fff;
}

/* ── Light Mode: Cookie Banner ───────────────────────────── */
html.light #cookieBanner {
  background: rgba(255,255,255,0.96);
  border-top-color: rgba(79,70,229,.20);
}
html.light .cookie-text { color: var(--text); }
html.light .cookie-accept { background: var(--grad); color: #fff; }

/* ── Light Mode: Upload Zone ─────────────────────────────── */
html.light .upload-zone {
  background: rgba(79,70,229,.03);
  border-color: rgba(79,70,229,.20);
}
html.light .upload-zone:hover {
  background: rgba(79,70,229,.06);
  border-color: var(--secondary);
}

/* ── Light Mode: Kleingewerbe Note ──────────────────────── */
html.light .kleingewerbe-note {
  background: rgba(79,70,229,.05);
  border-color: rgba(79,70,229,.12);
}

/* ── Light Mode: Page Hero ───────────────────────────────── */
html.light .page-hero {
  background: linear-gradient(135deg, #EEEFFE 0%, #F8F9FF 55%, #FFF8F5 100%);
  border-bottom-color: rgba(79,70,229,.10);
}

/* ── Light Mode: Toast ───────────────────────────────────── */
html.light .toast-added {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 8px 24px rgba(234,88,12,.25);
}