/* =======================================================
   theme.css - Farbvariablen für Light & Dark Mode
   ======================================================= */

/* -----------------------
   Light Mode (Standard)
   ----------------------- */
:root {
    --bg-color: #f0f0f0;  /*  Hintergrund  */
    --text-color: #333333;   /* Schriftfarbe  */
    --header-bg: #d9d9d9;  /*  Hintergrund Header */
    --control-color: #fff;
    --nav-bg: #cfcfcf;  /*  Hintergrund Navigation */
    --footer-bg: #d9d9d9;  /*  Hintergrund Fußzeile */
    --link-color: #333333;
    --link-hover-border: #333333;
    --post-bg: #FdFdFd;  /* Hintergrund Blogartikel*/
    --equipment-bg: #ffffff;
    --card-bg: #FdFdFd;  /* Hintergrund Ausrüstungsartikel*/
    --card-shadow: 0 2px 8px rgba(0,0,0,0.1);
    --equipment-shadow: rgba(0,0,0,0.1);
    --lightbox-bg: rgba(0,0,0,0.95);
    --control-bg: rgba(0,0,0,0.25);
    --control-hover-bg: rgba(0,0,0,0.6);
    --position-info-bg: rgba(0,0,0,0.4);
}

/* -----------------------
   Dark Mode (automatisch)
   ----------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #404040;
        --text-color: #e0e0e0;
        --header-bg: #1e1e1e;
        --control-color: #A0A0A0;
        --nav-bg: #303030;
        --footer-bg: #1e1e1e;
        --link-color: #e0e0e0;
        --link-hover-border: #ffffff;
        --post-bg: #1e1e1e;
        --equipment-bg: #2a2a2a;
        --card-bg: #2a2a2a;
        --card-shadow: 0 2px 12px rgba(0,0,0,0.5);
        --equipment-shadow: rgba(0,0,0,0.5);
        --lightbox-bg: rgba(0,0,0,0.95);
        --control-bg: rgba(0,0,0,0.25);
        --control-hover-bg: rgba(0,0,0,0.6);
        --position-info-bg: rgba(0,0,0,0.4);
    }
}