From 460c3f987e2501574b3ab505d55df35baa0e69cf Mon Sep 17 00:00:00 2001
From: Till Tomczak <till.tmk@gmail.com>
Date: Fri, 2 May 2025 18:14:04 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20update=20base=20styles?=
 =?UTF-8?q?=20and=20database=20schema=20for=20improved=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 database/systades.db       | Bin 139264 -> 147456 bytes
 static/css/base-styles.css |  80 +++++++++++++++++++++++++++----------
 templates/base.html        |  16 ++------
 3 files changed, 63 insertions(+), 33 deletions(-)

diff --git a/database/systades.db b/database/systades.db
index bc618e706ca6dea95b6907af75734f115be6d303..59f8166af1e0a6710ad792617be43323238dff6a 100644
GIT binary patch
delta 819
zcmY*WO=}ZT6n!^oIv<_PYt&GsU|vis4TRD}6gN_)WsJpq=$L8?Li&;nW$Gj;$(SzN
z@uMpjtriBl@dwxnp~x&$aN|aV{(vs@AJ~Ps5y3ZYGgTh<%{}+bz4sj6+9!T(P1qQY
zBoIO)Ec#dkS;RI|SE30tzMc#*6u`gOjYjZq{A({lp5w^S1%}Us!|Vn;hwxn2F5rkg
z3NjiVwdWNf>NTJ}BjyYa9;Ivw`+BnzY{YlGcQ_e2jN!LP48@VWC0C{Wf!E@oAad{e
zxBBmf;@)w|1iS|(DtOcVmWKVXr%!VZCLtzf9=G+Dhm$VDNpeYoZ6rSmOVXQx4!_Su
z_!l8LSb^=}sQf`7!dG!%)6Tl}1=!_TTi~H{(SRR;zOIXxU=iGdG-QMB#|BJyUvBUL
z{Ge;+@frIvVBy3P&z2$dig`L8=2gUT5|TfM?@8lgMpzfJoWx08`)9xS<XW5?ibmmC
z(V3Zm_^MGOGli0xRW)))o5?HMJh`pTr-)~uLF+oXuV~Y^6m9JKM3NMWB~qBp<x)hi
zQ^WMRbml*DnYP<2%~s9luckBqHdk9Zwe(t<TEy8|0x@B<%d~149i2=Si#b&(q)4l2
zp6+Jjof~POt4a2xfuUFop5`rDF?CC?FPA;3ev+8hRHdYnk}{Q3iC-QQ2|2c!VwrEQ
zq|TMR!m*tm^7Z!$J;AF?abY&^b(~5*DI5vzHF#{TZZvv-SBxg<ab~khEu-1+3oCl1
vZCJXGX@^?0<wKLUt+Lr%WYdCdm-EE{#UTdlxM!E(54fEL7y%cXup9Ub93R$b

delta 286
zcmZo@;A}X+F+o~To`Hcu35a1pdZLc8usnlan<gtzh>`y{NJ5<d_hvzb9)2DXL0+(E
z3<H16#>OCi-bO`6E(U4U#z;p_QI5@-^3w&lxWFntFz|oaEZFdjfAa@>!4Du?1R3lZ
z80`74^RMHZ!k5f*o_ju*04EpwR<<c@f!h@f7<V(WG#Lr9Z@+KIc%GL{otaJCT6Frx
z97b6lqtfEkA{KQfxXAWj_KaK#N_-5Z3>@d#1vz?H`IwU!XECet?cr_Y;b$o266RFk
zJj0MXvC(~dZUW<44i+wM2Da&PnT+q57&x}`XECNTPXBMq$TfX~J(KSAGuBMW+e2)b
N)-Y|~lgH??5dcIYM3w*m

diff --git a/static/css/base-styles.css b/static/css/base-styles.css
index 40bb4da..4bb2600 100644
--- a/static/css/base-styles.css
+++ b/static/css/base-styles.css
@@ -460,17 +460,53 @@ body:not(.dark) button:not(.toggle) {
     background-color: var(--light-primary);
     color: white;
     border: none;
-    box-shadow: var(--light-shadow);
-    border-radius: 0.375rem;
-    padding: 0.5rem 1rem;
-    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    padding: 0.625rem 1.25rem;
+    transition: all 0.2s ease;
+    font-weight: 600;
+    letter-spacing: 0.02em;
 }
 
 body:not(.dark) .btn:hover,
 body:not(.dark) button:not(.toggle):hover {
     background-color: var(--light-primary-hover);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Dark/Light Mode Switch Button */
+.theme-toggle {
+    position: relative;
+    width: 48px;
+    height: 24px;
+    background: linear-gradient(to right, #7c3aed, #3b82f6);
+    border-radius: 24px;
+    padding: 2px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.theme-toggle::after {
+    content: '';
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border-radius: 50%;
+    top: 2px;
+    left: 2px;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.theme-toggle.dark::after {
+    transform: translateX(24px);
+}
+
+.theme-toggle:hover::after {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }
 
 /* Light Mode Cards und Panels */
@@ -547,33 +583,37 @@ body:not(.dark) .card:hover {
 
 /* Light Mode Buttons mit verbesserter Lesbarkeit */
 body:not(.dark) .btn-primary {
-    background: linear-gradient(135deg, var(--light-primary), var(--light-primary-hover));
+    background: linear-gradient(135deg, #7c3aed, #6d28d9);
     color: white;
     border: none;
     transition: all 0.2s ease;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-    font-weight: 500;
-    letter-spacing: 0.01em;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    box-shadow: 0 2px 4px rgba(109, 40, 217, 0.2);
+    border-radius: 8px;
 }
 
 body:not(.dark) .btn-primary:hover {
-    background: linear-gradient(135deg, var(--light-primary-hover), var(--light-primary));
-    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
-    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px);
 }
 
 body:not(.dark) .btn-secondary {
-    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
-    color: var(--light-text);
-    border: 1px solid #e5e7eb;
-    font-weight: 500;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    background: white;
+    color: #1f2937;
+    border: 2px solid #e5e7eb;
+    font-weight: 600;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    border-radius: 8px;
 }
 
 body:not(.dark) .btn-secondary:hover {
-    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
+    background: #f9fafb;
     border-color: #d1d5db;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px);
 }
 
 body:not(.dark) .btn-outline {
diff --git a/templates/base.html b/templates/base.html
index 0ebfb63..d3b5c78 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -326,20 +326,10 @@
                     <!-- Dark/Light Mode Schalter -->
                     <button
                         @click="toggleDarkMode()"
-                        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-300 focus:outline-none"
-                        :class="darkMode ? 'bg-purple-600' : 'bg-gray-200'"
+                        class="theme-toggle"
+                        :class="{ 'dark': darkMode }"
+                        aria-label="Dark Mode umschalten"
                     >
-                        <span class="sr-only">Dark Mode umschalten</span>
-                        <!-- Schieberegler -->
-                        <span
-                            class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-300"
-                            :class="darkMode ? 'translate-x-6' : 'translate-x-1'"
-                        ></span>
-                        <!-- Icons -->
-                        <i class="fas fa-sun absolute left-1 text-yellow-400 transition-opacity duration-300"
-                           :class="darkMode ? 'opacity-0' : 'opacity-100'"></i>
-                        <i class="fas fa-moon absolute right-1 text-gray-100 transition-opacity duration-300"
-                           :class="darkMode ? 'opacity-100' : 'opacity-0'"></i>
                     </button>
                     <!-- Profil-Link oder Login -->
                     {% if current_user.is_authenticated %}