Design etwas angepasst. Nur zum ausprobieren!

css/style.css

@@ -1,9 +1,23 @@
 /* =========================
-   GLOBAL
+   DESIGN SYSTEM
 ========================= */
-body {
+:root {
-    background-color: red;
+    --bg: #0b1220;
+    --surface: #111a2e;
+    --surface-light: #16213a;
+
+    --primary: #4ade80;   /* Snack / Chips Grün */
+    --accent: #60a5fa;    /* Snake Blue */
+
+    --text: #e5e7eb;
+    --muted: #94a3b8;
+
+    --border: #1f2a44;
 }
+
+/* =========================
+   GLOBAL RESET
+========================= */
 * {
     margin: 0;
     padding: 0;
@@ -11,243 +25,136 @@ body {
 }
 
 body {
-    font-family: 'Poppins', sans-serif;
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
-    background-color: #f4f7fb;
+    background-color: var(--bg);
-    color: #1e293b;
+    color: var(--text);
     line-height: 1.6;
 }
 
-/* =========================
-   CONTAINER
-========================= */
-
-.container {
-    width: 90%;
-    max-width: 1200px;
-    margin: auto;
-}
-
 /* =========================
    HEADER
 ========================= */
-
 header {
-    background: #0f172a;
-    padding: 20px 0;
     position: sticky;
     top: 0;
     z-index: 1000;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    background: var(--surface);
-}
+    border-bottom: 1px solid var(--border);
-
+    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
-header .container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
 }
 
 /* =========================
-   LOGO
+   NAVIGATION (modern + clean)
 ========================= */
-
-.logo {
-    font-size: 1.8rem;
-    font-weight: 700;
-    color: white;
-}
-
-/* =========================
-   NAVIGATION
-========================= */
-
 nav {
     display: flex;
     justify-content: center;
-    gap: 20px;
+    gap: 10px;
-    padding: 20px;
+    padding: 14px;
-    background-color: #f5f5f5;
+    flex-wrap: wrap;
 }
 
 nav a {
     text-decoration: none;
-    padding: 10px 18px;
+    color: var(--text);
-    border-radius: 8px;
+    padding: 8px 14px;
-    background-color: #ffffff;
+    border-radius: 999px;
-    color: #333;
+    background: var(--surface-light);
-    font-weight: 500;
+    border: 1px solid var(--border);
-    transition: 0.3s;
+    transition: 0.2s ease;
-    border: 1px solid #ddd;
+    font-size: 0.95rem;
 }
 
 nav a:hover {
-    background-color: #333;
+    background: var(--primary);
-    color: white;
+    color: #0b1220;
     transform: translateY(-2px);
 }
-/* =========================
-   HERO SECTION
-========================= */
 
+/* =========================
+   MAIN LAYOUT
+========================= */
+main {
+    max-width: 900px;
+    margin: 40px auto;
+    padding: 20px;
+}
+
+/* =========================
+   HEADINGS (Snack Glow)
+========================= */
+h1, h2 {
+    color: var(--primary);
+    margin-bottom: 10px;
+}
+
+/* =========================
+   LINKS
+========================= */
+a {
+    color: var(--accent);
+}
+
+a:hover {
+    color: var(--primary);
+}
+
+/* =========================
+   HERO (falls vorhanden)
+========================= */
 .hero {
-    padding: 120px 20px;
+    padding: 100px 20px;
     text-align: center;
-    background: linear-gradient(
+    background: linear-gradient(135deg, #1d4ed8, #0b1220);
-        135deg,
-        #2563eb,
-        #1d4ed8
-    );
-    color: white;
 }
 
 .hero h1 {
     font-size: 3rem;
-    margin-bottom: 20px;
 }
 
 .hero p {
-    max-width: 700px;
+    color: var(--muted);
-    margin: auto;
-    font-size: 1.1rem;
-    opacity: 0.9;
 }
 
 /* =========================
    BUTTONS
 ========================= */
-
+button, .btn {
-.btn {
+    padding: 10px 16px;
-    display: inline-block;
-    margin-top: 30px;
-    padding: 14px 28px;
-    background: white;
-    color: #2563eb;
     border-radius: 10px;
-    text-decoration: none;
+    border: none;
+    background: var(--primary);
+    color: #0b1220;
     font-weight: 600;
-    transition: 0.3s ease;
+    cursor: pointer;
+    transition: 0.2s;
 }
 
-.btn:hover {
+button:hover, .btn:hover {
-    transform: translateY(-3px);
+    transform: translateY(-2px);
-    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
 }
 
 /* =========================
-   CONTENT SECTIONS
+   CARD SYSTEM (Snack Boxes)
 ========================= */
-
-section {
-    padding: 80px 0;
-}
-
-.section-title {
-    text-align: center;
-    margin-bottom: 50px;
-}
-
-.section-title h2 {
-    font-size: 2.2rem;
-    margin-bottom: 10px;
-}
-
-.section-title p {
-    color: #64748b;
-}
-
-/* =========================
-   CARD LAYOUT
-========================= */
-
-.cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 30px;
-}
-
 .card {
-    background: white;
+    background: var(--surface);
-    padding: 30px;
+    border: 1px solid var(--border);
-    border-radius: 18px;
+    border-radius: 16px;
-    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
+    padding: 20px;
-    transition: 0.3s ease;
+    transition: 0.2s ease;
 }
 
 .card:hover {
-    transform: translateY(-6px);
+    transform: translateY(-4px);
-}
-
-.card h3 {
-    margin-bottom: 15px;
-}
-
-.card p {
-    color: #475569;
 }
 
 /* =========================
-   FOOTER
+   IMAGES
 ========================= */
-
-footer {
-    background: #0f172a;
-    color: white;
-    text-align: center;
-    padding: 30px 20px;
-    margin-top: 80px;
-}
-
-/* =========================
-   RESPONSIVE
-========================= */
-
-@media (max-width: 768px) {
-
-    header .container {
-        flex-direction: column;
-        gap: 20px;
-    }
-
-    nav ul {
-        flex-direction: column;
-        text-align: center;
-    }
-
-    .hero h1 {
-        font-size: 2.2rem;
-    }
-
-    .hero {
-        padding: 90px 20px;
-    }
-}
-
-Für Bilder 
-
 img {
     max-width: 100%;
     height: auto;
+    border-radius: 12px;
 }
-
-Für fallende Chips
-
-.chip {
-    position: fixed;
-    top: -100px;
-    width: 80px;
-    height: auto;
-    pointer-events: none;
-    animation: fall linear forwards;
-    z-index: 9999;
-}
-
-@keyframes fall {
-    0% {
-        transform: translateY(0) rotate(0deg);
-        opacity: 1;
-    }
-
-    100% {
-        transform: translateY(110vh) rotate(360deg);
-        opacity: 0;
-    }
-}