/* 10 selectable site themes. Each overrides the same CSS custom properties already defined in style.css's :root — no structural changes, just colors and background image swap. Applied via data-theme="themeN" on . */ body[data-theme="theme1"] { --bg1---img: linear-gradient(rgba(6, 147, 128, 0.864), rgba(36, 10, 10, 0.914)), url(../image/bg1.jpg); ---titelText--color: #2600fc; ---titelText2--color: #fcc100; ---ptext--color: #06e3f3; ---btn--color: #e306f3; ---bgHover--color: magenta; } body[data-theme="theme2"] { --bg1---img: linear-gradient(rgba(10, 20, 60, 0.75), rgba(5, 5, 20, 0.9)), url(../image/bg2.jpg); ---titelText--color: #ffffff; ---titelText2--color: #00d4ff; ---ptext--color: #a0e9ff; ---btn--color: #007bff; ---bgHover--color: #00b4ff; } body[data-theme="theme3"] { --bg1---img: linear-gradient(rgba(60, 20, 10, 0.7), rgba(20, 5, 5, 0.9)), url(../image/bg3.jpg); ---titelText--color: #ffd166; ---titelText2--color: #ef476f; ---ptext--color: #ffe8c9; ---btn--color: #ef476f; ---bgHover--color: #ff8fa3; } body[data-theme="theme4"] { --bg1---img: linear-gradient(rgba(6, 90, 60, 0.75), rgba(5, 20, 15, 0.9)), url(../image/bg4.jpg); ---titelText--color: #06ffa5; ---titelText2--color: #ffffff; ---ptext--color: #b6ffe0; ---btn--color: #06ffa5; ---bgHover--color: #00e28a; } body[data-theme="theme5"] { --bg1---img: linear-gradient(rgba(40, 10, 60, 0.75), rgba(15, 5, 25, 0.9)), url(../image/bg5.jpg); ---titelText--color: #d0a2ff; ---titelText2--color: #ffd6ff; ---ptext--color: #f2c6ff; ---btn--color: #a742f5; ---bgHover--color: #c77dff; } body[data-theme="theme6"] { --bg1---img: linear-gradient(rgba(10, 10, 10, 0.55), rgba(0, 0, 0, 0.85)), url(../image/bg6.jpg); ---titelText--color: #ffffff; ---titelText2--color: #fca311; ---ptext--color: #cccccc; ---btn--color: #fca311; ---bgHover--color: #ffb84d; } body[data-theme="theme7"] { --bg1---img: linear-gradient(rgba(6, 60, 100, 0.75), rgba(5, 15, 30, 0.9)), url(../image/bg7.jpg); ---titelText--color: #a8dadc; ---titelText2--color: #ffffff; ---ptext--color: #e0fbfc; ---btn--color: #457b9d; ---bgHover--color: #78c1e0; } body[data-theme="theme8"] { --bg1---img: linear-gradient(rgba(90, 40, 10, 0.75), rgba(30, 10, 5, 0.9)), url(../image/bg8.png); ---titelText--color: #ffb703; ---titelText2--color: #fb8500; ---ptext--color: #ffe8c9; ---btn--color: #fb8500; ---bgHover--color: #ffa938; } body[data-theme="theme9"] { --bg1---img: linear-gradient(rgba(15, 15, 25, 0.7), rgba(5, 5, 10, 0.92)), url(../image/bg9.jpg); ---titelText--color: #e5e5e5; ---titelText2--color: #ff006e; ---ptext--color: #cfcfcf; ---btn--color: #ff006e; ---bgHover--color: #ff5c9d; } body[data-theme="theme10"] { --bg1---img: linear-gradient(rgba(6, 60, 30, 0.75), rgba(5, 25, 15, 0.92)), url(../image/bg10.jpg); ---titelText--color: #ffffff; ---titelText2--color: #95d5b2; ---ptext--color: #d8f3dc; ---btn--color: #2d6a4f; ---bgHover--color: #52b788; }