From 0b7c186ec09fe695d7f1a60dfa187fdeba5bb849 Mon Sep 17 00:00:00 2001
From: kreidler90 <Tobias.Weidler90@gmail.com>
Date: Sat, 4 Jul 2026 09:36:11 +0000
Subject: [PATCH] Add Carbon and Nitrogen elements, new reactions, and grid
 background

---
 app.js     | 15 +++++++++++++++
 index.html |  2 ++
 style.css  |  2 ++
 3 files changed, 19 insertions(+)

diff --git a/app.js b/app.js
index 1d612c8..8186204 100644
--- a/app.js
+++ b/app.js
@@ -22,6 +22,21 @@ const recipes = [
         ingredients: ['O', 'O'], // 2x Sauerstoff
         result: 'O₂ (Sauerstoff-Molekül)',
         color: '#bdc3c7'
+    },
+    {
+        ingredients: ['C', 'O', 'O'], // 1x Kohlenstoff, 2x Sauerstoff
+        result: 'CO₂ (Kohlendioxid)',
+        color: '#7f8c8d'
+    },
+    {
+        ingredients: ['C', 'H', 'H', 'H', 'H'], // 1x Kohlenstoff, 4x Wasserstoff
+        result: 'CH₄ (Methan)',
+        color: '#f39c12'
+    },
+    {
+        ingredients: ['N', 'H', 'H', 'H'], // 1x Stickstoff, 3x Wasserstoff
+        result: 'NH₃ (Ammoniak)',
+        color: '#9b59b6'
     }
 ];
 
diff --git a/index.html b/index.html
index ab7b474..9c32966 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,8 @@
         <p>Klicke, um Atome zu spawnen.</p>
         <div class="spawn-btn" data-element="H" data-color="#ff9999">Wasserstoff (H)</div>
         <div class="spawn-btn" data-element="O" data-color="#99ccff">Sauerstoff (O)</div>
+        <div class="spawn-btn" data-element="C" data-color="#bdc3c7">Kohlenstoff (C)</div>
+        <div class="spawn-btn" data-element="N" data-color="#cc99ff">Stickstoff (N)</div>
         <div class="spawn-btn" data-element="Na" data-color="#ffcc99">Natrium (Na)</div>
         <div class="spawn-btn" data-element="Cl" data-color="#99ff99">Chlor (Cl)</div>
     </div>
diff --git a/style.css b/style.css
index 048253a..5f68abd 100644
--- a/style.css
+++ b/style.css
@@ -35,6 +35,8 @@ body {
 #workspace {
     flex-grow: 1;
     background-color: #ecf0f1;
+    background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
+    background-size: 20px 20px;
     border-radius: 10px;
     position: relative;
     overflow: hidden;