/* CLAUDE: Partikel-Container Styles */
/* CLAUDE: Fixed positioniert hinter dem Content */
/* CLAUDE: Anpassen: z-index, opacity für Sichtbarkeit */

/* ===========================================
   CLAUDE: PARTIKEL-CONTAINER
   =========================================== */

#pvm-particles {
    position: fixed;                      /* CLAUDE: Fixed für Scroll-unabhängigkeit */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;                          /* CLAUDE: Hinter allem Content */
    pointer-events: none;                 /* CLAUDE: Keine Interaktion blockieren */
    opacity: 0.5;                         /* CLAUDE: Dezent im Hintergrund */
    background: transparent;
}

/* CLAUDE: Performance: GPU-Beschleunigung */
#pvm-particles canvas {
    transform: translateZ(0);             /* CLAUDE: Hardware-Beschleunigung */
    will-change: transform;               /* CLAUDE: Optimierung hint */
}

/* ===========================================
   CLAUDE: RESPONSIVE ANPASSUNGEN
   =========================================== */

/* CLAUDE: Tablet - etwas weniger prominent */
@media (max-width: 1024px) {
    #pvm-particles {
        opacity: 0.4;
    }
}

/* CLAUDE: Mobile - sehr dezent */
@media (max-width: 768px) {
    #pvm-particles {
        opacity: 0.25;
    }
}

/* ===========================================
   CLAUDE: REDUCED MOTION
   =========================================== */

@media (prefers-reduced-motion: reduce) {
    #pvm-particles {
        display: none !important;          /* CLAUDE: Komplett ausblenden */
    }
}

/* ===========================================
   CLAUDE: DARK MODE ANPASSUNGEN
   CLAUDE: Dual-Selector Pattern
   =========================================== */

/* CLAUDE: Manueller Toggle */
html[data-theme="dark"] #pvm-particles {
    opacity: 0.35;
}

/* CLAUDE: System-Präferenz - Fallback */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) #pvm-particles {
        opacity: 0.35;
    }
}

/* ===========================================
   CLAUDE: PRINT
   =========================================== */

@media print {
    #pvm-particles {
        display: none !important;
    }
}