:root {
    /* ---background---*/
    --base-clr: #fff;
    --back: #F2F2F2;
    --background-2: #1E1E1E;
    --line-clr: #42434a;
    --hover-clr: #222533;
    --text-clr: #0D0D0D;
    --text-clr-back: #fff;
    --accent-clr: #74060F;
    --secondary-text-clr: #b0b3c1;
    --accent-clr-3: #74060F;

    /* ---icon---- */
    --icon-color: #ffffff;


    --card-head-titel: 20px;

        /* ---Shadow---*/
    --shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;


}

.darkmode {
    --base-clr: #222533;
    --back: #121212;
    --secondary-background: #1E1E1E;
    --line-clr: #42434a;
    --hover-clr: #222533;
    --text-clr: #ffffff;
    --secondary-text-clr: #B3B3B3;
    /* Akzent*/
    --accent-clr: #74060F;
    --accent-clr-2: #22C55E;
    --accent-clr-3: #F97316;


    /* ---Shadow---*/
    --shadow: rgba(255, 255, 255, 0.2) 0px 8px 24px;

}