Add files via upload

Signed-off-by: wfxey <158351052+wfxey@users.noreply.github.com>

CSS/style.css

@@ -0,0 +1,385 @@
+:root {
+    --bg-color: #1a1a1a;
+    --text-color: #f0f0f0;
+    --header-color: #f0f0f0;
+    --primary-color: #333;
+    --secondary-color: #2a2a2a;
+    --border-color: #555;
+    --hover-bg-color: #444;
+    --link-color: #ffffff;
+    --link-hover-color: #ddd;
+    --table-alt-row-color: #333;
+    --button-color: #f0f0f0; 
+}
+
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: var(--bg-color);
+    margin: 0;
+    padding: 0;
+    display: flex;
+    height: 100vh;
+    box-sizing: border-box;
+    color: var(--text-color);
+    position: relative;
+    overflow-x: hidden;
+}
+
+.cookie-banner {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: rgb(1, 0, 0, 0.9);
+    color: white;
+    padding: 20px 0;
+    z-index: 9999;
+    display: none;
+}
+
+.cookie-content {
+    max-width: 600px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.cookie-content p {
+    margin-bottom: 10px;
+}
+
+.button_accept {
+    background-color: #ffffff;
+    color: rgb(0, 0, 0);
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 15px;
+}
+
+.button_leave {
+    background-color: hsl(0, 85%, 37%);
+    color: rgb(255, 255, 255);
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 15px;
+}
+
+.button_accept:hover {
+    background-color: #c9c9c9;
+}
+
+.button_leave:hover {
+    background-color: #751414;
+}
+
+section p {
+    margin: 0.625rem 0;
+    line-height: 1.6;
+    color: var(--text-color);
+}
+
+b {
+    line-height: 1.6;
+    color: var(--text-color);
+}
+
+footer {
+    margin-top: 1.25rem;
+    position: absolute;
+    bottom: 10px;
+}
+
+.black {
+    color: var(--link-color);
+    text-decoration: none;
+    margin: 0 0.625rem;
+    font-weight: bold;
+    transition: color 0.3s ease;
+}
+
+.black:hover {
+    color: var(--link-hover-color);
+}
+
+body.light-mode {
+    --bg-color: #f0f0f0;
+    --text-color: #444;
+    --header-color: #333;
+    --primary-color: #4CAF50;
+    --secondary-color: whitesmoke;
+    --border-color: black;
+    --hover-bg-color: #ddd;
+    --link-color: rgb(4, 85, 10);
+    --link-hover-color: #333;
+    --table-alt-row-color: #f2f2f2;
+    --button-color: #1a1a1a; 
+}
+
+body.light-mode .program_table {
+    color: white;
+}
+
+body.light-mode .program_table th,
+body.light-mode .program_table td {
+    border-color: var(--border-color);
+    color: white;
+}
+
+body.light-mode .program_table tr:nth-child(even) {
+    background-color: var(--table-alt-row-color);
+}
+
+body.light-mode .program_table tr:hover {
+    background-color: var(--hover-bg-color);
+}
+
+pre {
+    background-color: #282c34;
+    color: #abb2bf;
+    border-radius: 5px;
+    padding: 10px;
+    overflow-x: auto;
+    font-family: 'Courier New', Courier, monospace;
+    line-height: 1.5;
+    margin: 20px 0;
+}
+
+code {
+    background-color: #3e4451; 
+    color: #e06c75;
+    padding: 2px 4px; 
+    border-radius: 10px;
+    font-family: 'Courier New', Courier, monospace;
+}
+
+pre code {
+    background: transparent;
+    color: inherit;
+    padding: 0;
+    border: none;
+}
+
+.light-mode-btn {
+    position: absolute;
+    top: 10px;
+    right: 14px;
+    background: var(--secondary-color);
+    border: none;
+    padding: 10px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
+    transition: background 0.3s ease, box-shadow 0.3s ease;
+    z-index: 1000;
+}
+
+::-webkit-scrollbar {
+    width: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-color);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+.sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 280px;
+    height: calc(100% - 10px);
+    background-color: var(--bg-color);
+    border-right: 1px solid var(--secondary-color);
+    padding: 20px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.sidebar .bottom-element {
+    margin-top: auto;
+}
+
+.sidebar button {
+    display: block;
+    width: 230px;
+    margin: 4px 0;
+    background-color: var(--button-color);
+    border-radius: 15px;
+    border: none;
+    padding: 11px;
+    box-sizing: border-box;
+    color: var(--bg-color);
+    position: relative;
+}
+
+.sidebar a {
+    text-decoration: none;
+    color: var(--link-color);
+}
+
+.sidebar button:hover {
+    background-color: var(--link-hover-color);
+}
+
+.content {
+    position: absolute;
+    margin-left: 300px;
+    top: 10px;
+    padding: 20px;
+    flex-grow: 1;
+    height: calc(100vh - 20px);
+    overflow: auto; 
+}
+.content a {
+    color : var(--link-color);
+}
+
+.impressum-link {
+    bottom: 10px;
+}
+
+.light-mode-btn i {
+    color: var(--header-color);
+    font-size: 1.2rem;
+}
+
+.light-mode-btn:hover {
+    background: var(--hover-bg-color);
+    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
+}
+
+.light-mode-btn .fa-sun {
+    display: none;
+}
+
+body.light-mode .light-mode-btn .fa-moon {
+    display: none;
+}
+
+body.light-mode .light-mode-btn .fa-sun {
+    display: block;
+}
+
+@media screen and (max-width: 955px) {
+    .sidebar {
+        display: none;
+    }
+
+    .show-sidebar-btn {
+        display: block;
+    }
+
+    .close-sidebar-btn {
+        display: block;
+    }
+
+    .content {
+        width: 100%;
+        margin-left: 0;
+    }
+}
+
+.sidebar.active {
+    display: block;
+}
+
+.show-sidebar-btn {
+    display: none;
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    z-index: 1000;
+    background-color: #333;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+}
+
+.close-sidebar-btn {
+    display: none;
+    background-color: #333;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    margin-bottom: 10px;
+}
+
+@media (max-width: 768px) {
+    .program_table th,
+    .program_table td {
+        padding: 0.5rem 0.625rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .program_table th,
+    .program_table td {
+        padding: 0.375rem 0.5rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .program_table {
+        font-size: 0.75rem;
+        border-radius: 0;
+    }
+}
+
+@media (max-width: 414px), (max-width: 375px), (max-width: 360px) {
+    body {
+        padding: 0.5rem;
+    }
+
+    .program_table th,
+    .program_table td {
+        padding: 0.25rem 0.4375rem;
+    }
+
+    .program_table {
+        font-size: 0.6875rem;
+        border-radius: 0;
+    }
+
+    .status, .impressum {
+        padding: 0.625rem;
+        margin: 0.625rem;
+    }
+
+    header h1 {
+        font-size: 1.25rem;
+    }
+
+    section p, b {
+        font-size: 0.75rem;
+    }
+}
+
+@media (max-width: 360px) {
+    .program_table {
+        font-size: 0.5rem;
+    }
+
+    .program_table th,
+    .program_table td {
+        padding: 0.5rem;
+        font-size: 12px;
+    }
+}