finsh landingpage style

static/style.css

@@ -16,6 +16,7 @@
 
     /* Hero & Akzente */
     --accent: #667eea;
+    --accent-text: #ffffff;
     --accent-dark: #764ba2;
     --hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     --hero-text: #ffffff;
@@ -42,6 +43,7 @@
 
     /* Hero & Akzente (Im Darkmode etwas entspannter) */
     --accent: #39348c;
+    --accent-text: #ffffff;
     --accent-dark: #3d4593;
     --hero-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
     --hero-text: #e2e8f0;
@@ -132,74 +134,43 @@ nav {
     color: var(--accent);
 }
 
-/* Theme Switcher */
-.theme-switch { position: relative; }
-.theme-btn {
-    background: none;
-    border: 1px solid var(--border-color);
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    cursor: pointer;
-    font-size: 1.2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-main);
+
+/* Container für die Header-Buttons */
+.theme-header-btn {
+    position: relative;
 }
 
-.theme-dropdown {
-    position: absolute;
-    top: 120%;
-    right: 0;
-    background-color: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    box-shadow: 0 5px 15px var(--card-shadow);
-    display: none;
-    flex-direction: column;
-    min-width: 130px;
-    z-index: 2000;
-    overflow: hidden;
-}
-
-.theme-dropdown.show { display: flex; }
-.theme-dropdown button {
-    background: none;
-    border: none;
-    padding: 12px 15px;
-    text-align: left;
-    cursor: pointer;
-    color: var(--text-main);
-}
-.theme-dropdown button:hover {
-    background-color: var(--accent);
-    color: white;
-}
-
-/* --- Language Switcher --- */
-.lang-switch { position: relative; }
-.lang-btn {
+/* Gemeinsames Styling für die Haupt-Buttons im Header */
+.lang-btn, .theme-btn {
     background: none;
     border: 1px solid var(--border-color);
-    border-radius: 20px;
-    padding: 8px 15px;
+    border-radius: 20px; /* Einheitliche Rundung */
+    padding: 8px 12px;
     cursor: pointer;
-    font-size: 0.9rem;
+    font-size: 1.1rem;
     color: var(--text-main);
     transition: all 0.2s;
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 5px;
 }
-.lang-btn:hover {
+
+.theme-btn {
+    border-radius: 50%; /* Runde Form für Theme-Btn */
+    width: 40px;
+    height: 40px;
+}
+
+.lang-btn:hover, .theme-btn:hover {
     border-color: var(--accent);
     background: rgba(102, 126, 234, 0.1);
 }
 
-.lang-dropdown {
+/* Gemeinsames Styling für die Dropdowns */
+.lang-dropdown, .theme-dropdown {
     position: absolute;
-    top: 120%;
+    top: calc(100% + 10px); /* Leicht abgesetzt */
     right: 0;
     background-color: var(--card-bg);
     border: 1px solid var(--border-color);
@@ -207,27 +178,37 @@ nav {
     box-shadow: 0 5px 15px var(--card-shadow);
     display: none;
     flex-direction: column;
-    min-width: 150px;
+    min-width: 140px;
     z-index: 2000;
+    overflow: hidden;
 }
-.lang-dropdown.show { display: flex; }
-.lang-dropdown a {
+
+.lang-dropdown.show, .theme-dropdown.show {
+    display: flex;
+}
+
+/* Einheitliche Optionen im Dropdown */
+.lang-dropdown a.theme-option,
+.theme-dropdown .theme-option {
+    background: transparent;
+    border: none;
+    width: 100%;
     padding: 10px 15px;
-    text-decoration: none;
+    text-align: left;
+    cursor: pointer;
     color: var(--text-main);
     font-size: 0.9rem;
+    text-decoration: none;
     transition: background 0.2s;
-    /* ANPASSUNG 2: Flexbox für Links, damit Flagge/Text nebeneinander bleiben */
     display: flex;
     align-items: center;
-    gap: 10px; /* Abstand zwischen Flagge und Text */
-    
-    /* ANPASSUNG 3: Verhindern, dass der Text umbricht */
-    white-space: nowrap;
+    gap: 10px;
 }
-.lang-dropdown a:hover {
+
+.lang-dropdown a.theme-option:hover,
+.theme-dropdown .theme-option:hover {
     background-color: var(--accent);
-    color: white;
+    color: var(--accent-text);
 }
 
 
@@ -282,7 +263,7 @@ nav {
 .cta-button {
     display: inline-block;
     background-color: var(--accent);
-    color: white;
+    color: var(--accent-text);
     padding: 1rem 2rem;
     text-decoration: none;
     border-radius: 50px;
@@ -307,7 +288,7 @@ nav {
 
 .demo-button {
     background-color: var(--accent);
-    color: white;
+    color: var(--accent-text);
     padding: 0.6rem 1.4rem;
     text-decoration: none;
     border-radius: 25px;
@@ -411,6 +392,8 @@ footer {
     color: var(--footer-link-hover);
 }
 
+
+
 /* ==========================================
    7. RESPONSIVENESS
    ========================================== */
@@ -425,24 +408,11 @@ footer {
         overflow: hidden;
         transition: max-height 0.4s ease;
     }
-    .nav-links.mobile-open { max-height: 500px; }
+    .nav-links.mobile-open { max-height: 300px; }
     .nav-links li { border-bottom: 1px solid var(--border-color); }
-    .nav-links a { padding: 1.2rem; display: block; }
+    /*.nav-links a { padding: 0.1rem; display: block; }*/
     .hero h1 { font-size: 2.2rem; }
-    .nav-links {
-        position: absolute;
-        top: 100%;
-        left: 0;
-        width: 100%;
-        background-color: var(--header-bg);
-        display: flex;
-        flex-direction: column;
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height 0.4s ease-in-out;
-        box-shadow: 0 10px 15px var(--card-shadow);
-        
-        /* Nav-Links müssen über dem Content, aber unter dem Dropdown sein */
-        z-index: 999; 
-    }
-}
+
+}
+
+