From da3feb012e6a2175c7831fd583ec8aaed4791243 Mon Sep 17 00:00:00 2001
From: kreidler90 <Tobias.Weidler90@gmail.com>
Date: Sat, 4 Jul 2026 14:59:16 +0000
Subject: [PATCH] refactor: Bohr model centering and orbit fix

---
 app.js    |  2 ++
 style.css | 20 +++++++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/app.js b/app.js
index aa40f7f..3d79669 100644
--- a/app.js
+++ b/app.js
@@ -1177,6 +1177,8 @@ function renderBohrModel(electronsArray) {
         const diameter = 40 + (shellIndex * 30);
         shellDiv.style.width = diameter + 'px';
         shellDiv.style.height = diameter + 'px';
+        shellDiv.style.left = `calc(50% - ${diameter / 2}px)`;
+        shellDiv.style.top = `calc(50% - ${diameter / 2}px)`;
         
         // Geschwindigkeit variieren für coole Dynamik
         shellDiv.style.animationDuration = (6 + shellIndex * 4) + 's';
diff --git a/style.css b/style.css
index 52f9bc8..f86737e 100644
--- a/style.css
+++ b/style.css
@@ -1014,20 +1014,26 @@ body {
     z-index: 5;
 }
 
+#bohr-shells {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .bohr-shell {
     position: absolute;
     border: 1px dashed rgba(255,255,255,0.15);
     border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     animation: rotate-shell 20s linear infinite;
+    transform-origin: center;
 }
 
-.bohr-shell:nth-child(1) { width: 50px; height: 50px; animation-duration: 8s; }
-.bohr-shell:nth-child(2) { width: 90px; height: 90px; animation-duration: 15s; }
-.bohr-shell:nth-child(3) { width: 130px; height: 130px; animation-duration: 25s; }
-
 .bohr-electron {
     width: 6px;
     height: 6px;