Project_Periodensystem.Model/ElementModel.cs

@@ -1,25 +0,0 @@
-namespace Project_Periodensystem.Model
-{
-    public class ElementModel
-    {
-        public string Symbol { get; set; } = "";
-        public int Number { get; set; }
-        public int Row { get; set; }
-        public int Column { get; set; }
-        public ElementSeries Series { get; set; }
-    }
-
-    public enum ElementSeries
-    {
-        Alkali,
-        AlkalineEarth,
-        Transition,
-        PostTransition,
-        Metalloid,
-        Nonmetal,
-        Halogen,
-        NobleGas,
-        Lanthanide,
-        Actinide
-    }
-}

Project_Periodensystem.View/AboutPage.axaml

@@ -2,18 +2,13 @@
 <UserControl xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:i="using:Avalonia.Interactivity"
-             x:Class="Project_Periodensystem.View.AboutPage">
+             x:Class="Project_Periodensystem.View.AboutPage"
+             Background="#5C5144">
              
     <UserControl.Styles>
         <Style Selector="Button">
             <Setter Property="Background" Value="Black"/>
             <Setter Property="Foreground" Value="White"/>
-            <Setter Property="FontFamily" Value="Arial"/>
-            <Setter Property="FontWeight" Value="Bold"/>
-            <Setter Property="Width" Value="250"/>
-            <Setter Property="Height" Value="40"/>
-            <Setter Property="HorizontalContentAlignment" Value="Center"/>
-            <Setter Property="VerticalContentAlignment" Value="Center"/>
         </Style>
         <Style Selector="Button:pointerover /template/ ContentPresenter">
             <Setter Property="Background" Value="DarkRed"/>
@@ -21,11 +16,6 @@
         <Style Selector="Button:pressed /template/ ContentPresenter">
             <Setter Property="Background" Value="Red"/>
         </Style>
-        <Style Selector="Button TextBlock">
-            <Setter Property="FontSize" Value="16"/>
-            <Setter Property="FontFamily" Value="Arial"/>
-            <Setter Property="FontWeight" Value="Bold"/>
-        </Style>
     </UserControl.Styles>
 
     <Grid>
@@ -39,32 +29,47 @@
                     VerticalAlignment="Center" 
                     HorizontalAlignment="Center">
             <TextBlock Text="Author: Oliver Träger"
-                      FontSize="24"
+                      FontSize="20"
-                      Margin="0,0,0,20"/>
+                      HorizontalAlignment="Center"
+                      Margin="0,0,0,10"/>
             <TextBlock Text="Klasse: ITFS2"
-                      FontSize="24"
+                      FontSize="20"
-                      Margin="0,0,0,20"/>
+                      HorizontalAlignment="Center"
+                      Margin="0,0,0,10"/>
+            <TextBlock Text="SS2025"
+                     FontSize="20"
+                     Foreground="White"
+                     HorizontalAlignment="Center"
+                     Margin="0,0,0,40"/>
         </StackPanel>
 
         <!-- Footer with Buttons -->
         <Grid Grid.Row="1" 
-              HorizontalAlignment="Stretch"
               Margin="20,0,20,20">
             <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto"/>
                 <ColumnDefinition Width="*"/>
-                <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="Auto"/>
             </Grid.ColumnDefinitions>
 
-            <Button Grid.Column="0"
+            <Button Name="ThemeButton"
-                    HorizontalAlignment="Left"
+                    Grid.Column="0"
-                    Click="ThemeButton_Click">
+                    Click="ThemeButton_Click"
-                <TextBlock Text="Theme wechseln"/>
+                    Width="250"
+                    Height="40">
+                <TextBlock Text="Theme wechseln"
+                          FontSize="16"
+                          HorizontalAlignment="Center"/>
             </Button>
 
-            <Button Grid.Column="1"
+            <Button x:Name="BackButton" 
-                    HorizontalAlignment="Right"
+                    Grid.Column="2"
-                    Click="BackButton_Click">
+                    Click="BackButton_Click"
-                <TextBlock Text="Zurück"/>
+                    Width="200"
+                    Height="40">
+                <TextBlock Text="Back"
+                          FontSize="16"
+                          HorizontalAlignment="Center"/>
             </Button>
         </Grid>
     </Grid>

Project_Periodensystem.View/AboutPage.axaml.cs

@@ -1,5 +1,4 @@
 using System;
-using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
@@ -15,16 +14,6 @@ namespace Project_Periodensystem.View
             InitializeComponent();
         }
 
-        protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
-        {
-            base.OnAttachedToVisualTree(e);
-            
-            if (this.GetVisualRoot() is MainWindow mainWindow)
-            {
-                mainWindow.UpdateTheme(MainWindow.CurrentTheme);
-            }
-        }
-
         private void InitializeComponent()
         {
             AvaloniaXamlLoader.Load(this);
@@ -32,20 +21,24 @@ namespace Project_Periodensystem.View
 
         private void BackButton_Click(object? sender, RoutedEventArgs e)
         {
-            if (MainWindow.Instance != null)
+            if (this.Parent is ContentControl content && content.Parent is MainWindow mainWindow)
             {
-                MainWindow.Instance.ShowLandingPage();
+                mainWindow.ShowLandingPage();
             }
         }
 
         private void ThemeButton_Click(object? sender, RoutedEventArgs e)
         {
-            var themes = Enum.GetValues<AppTheme>();
+            var nextTheme = MainWindow.CurrentTheme switch
-            MainWindow.CurrentTheme = themes[(Array.IndexOf(themes, MainWindow.CurrentTheme) + 1) % themes.Length];
-            
-            if (MainWindow.Instance != null)
             {
-                MainWindow.Instance.UpdateTheme(MainWindow.CurrentTheme);
+                AppTheme.Dark => AppTheme.Light,
+                AppTheme.Light => AppTheme.Classic,
+                _ => AppTheme.Dark
+            };
+
+            if (this.Parent is ContentControl content && content.Parent is MainWindow mainWindow)
+            {
+                mainWindow.UpdateTheme(nextTheme);
             }
         }
     }

Project_Periodensystem.View/LandingPage.axaml

@@ -1,15 +1,11 @@
 <UserControl xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             x:Class="Project_Periodensystem.View.LandingPage">
+             x:Class="Project_Periodensystem.View.LandingPage"
-    
+             Background="#5C5144">
     <UserControl.Styles>
         <Style Selector="Button">
             <Setter Property="Background" Value="Black"/>
             <Setter Property="Foreground" Value="White"/>
-            <Setter Property="FontFamily" Value="Arial"/>
-            <Setter Property="FontWeight" Value="Bold"/>
-            <Setter Property="HorizontalContentAlignment" Value="Center"/>
-            <Setter Property="VerticalContentAlignment" Value="Center"/>
         </Style>
         <Style Selector="Button:pointerover /template/ ContentPresenter">
             <Setter Property="Background" Value="DarkRed"/>
@@ -29,24 +25,18 @@
         <Grid Grid.Row="0">
             <StackPanel VerticalAlignment="Center" 
                        Margin="0,-100,0,0">
-                <TextBlock Text="Willkommen zum"
+                <TextBlock Text="Willkommen zum Periodensystem der Elemente!" 
                           FontSize="36" 
-                         FontWeight="Light"
                           HorizontalAlignment="Center"
-                         Margin="0,0,0,10"/>
+                          Margin="0,0,0,20"/>
-                         
-                <TextBlock Text="Periodensystem der Elemente!"
-                         FontSize="72"
-                         FontWeight="Bold"
-                         HorizontalAlignment="Center"
-                         Margin="0,0,0,40"/>
-                
                 <Button Name="StartButton" 
-                        Width="200"
+                        Click="StartButton_Click"
-                        Height="60"
                         HorizontalAlignment="Center" 
-                        Click="StartButton_Click">
+                        Width="200"
-                    <TextBlock Text="Start" FontSize="24"/>
+                        Height="50">
+                    <TextBlock Text="Start" 
+                              FontSize="24" 
+                              HorizontalAlignment="Center"/>
                 </Button>
             </StackPanel>
         </Grid>
@@ -60,7 +50,9 @@
                 Width="250"
                 Height="40"
                 Margin="20,0,0,20">
-            <TextBlock Text="Theme wechseln" FontSize="16"/>
+            <TextBlock Text="Theme wechseln"
+                      FontSize="16"
+                      HorizontalAlignment="Center"/>
         </Button>
     </Grid>
 </UserControl>

Project_Periodensystem.View/LandingPage.axaml.cs

@@ -1,10 +1,8 @@
 using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
 using Avalonia.Media;
-using Avalonia.VisualTree;
 using Project_Periodensystem.Model;
 using System;
 using System.Collections.Generic;
@@ -15,6 +13,8 @@ namespace Project_Periodensystem.View
     {
         private readonly Random random = new();
         private readonly Dictionary<AppTheme, string> themeColors;
+        private AppTheme currentTheme;
+        private Button? startButton;
         private DateTime lastClickTime = DateTime.MinValue;
         private const int DEBOUNCE_MS = 500;
 
@@ -30,7 +30,19 @@ namespace Project_Periodensystem.View
                 { AppTheme.Classic, "#7B8B6F" }
             };
             
-            Logger.Log("LandingPage initialisiert");
+            SetRandomTheme();
+            startButton = this.Find<Button>("StartButton");
+            
+            if (startButton != null)
+            {
+                Logger.Log("StartButton gefunden und wird initialisiert");
+                startButton.Click += StartButton_Click;
+                Logger.Log("Click-Handler wurde registriert");
+            }
+            else
+            {
+                Logger.Log("FEHLER: StartButton nicht gefunden!");
+            }
         }
 
         private void InitializeComponent()
@@ -38,42 +50,51 @@ namespace Project_Periodensystem.View
             AvaloniaXamlLoader.Load(this);
         }
 
+        private void SetRandomTheme()
+        {
+            var themes = Enum.GetValues<AppTheme>();
+            currentTheme = themes[random.Next(themes.Length)];
+            this.Background = new SolidColorBrush(Color.Parse(themeColors[currentTheme]));
+            Logger.Log($"Theme gewählt: {currentTheme}");
+        }
+
         private void ThemeButton_Click(object? sender, RoutedEventArgs e)
         {
             var themes = Enum.GetValues<AppTheme>();
-            MainWindow.CurrentTheme = themes[(Array.IndexOf(themes, MainWindow.CurrentTheme) + 1) % themes.Length];
+            currentTheme = themes[(Array.IndexOf(themes, currentTheme) + 1) % themes.Length];
             
-            if (MainWindow.Instance != null)
+            if (this.Parent is ContentControl content && content.Parent is MainWindow mainWindow)
             {
-                MainWindow.Instance.UpdateTheme(MainWindow.CurrentTheme);
+                mainWindow.UpdateTheme(currentTheme);
             }
         }
 
         private void StartButton_Click(object? sender, RoutedEventArgs e)
         {
-            // Add multiple ways to see if this method is called
+            // Stop event propagation
-            System.Diagnostics.Debug.WriteLine("StartButton_Click CALLED!");
+            e.Handled = true;
-            Console.WriteLine("StartButton_Click CALLED!");
-            // Remove the MessageBox line - it's not available
 
-            Logger.Log("=== StartButton_Click CALLED ===");
+            var now = DateTime.Now;
+            // Prüfe ob genug Zeit seit dem letzten Klick vergangen ist
+            if ((now - lastClickTime).TotalMilliseconds < DEBOUNCE_MS)
+            {
+                Logger.Log("Click ignoriert (Debounce)");
+                return;
+            }
+            lastClickTime = now;
+
+            Logger.Log("StartButton_Click wurde aufgerufen");
             
             try 
             {
-                if (MainWindow.Instance != null)
+                if (this.Parent is ContentControl content && content.Parent is MainWindow mainWindow)
                 {
-                    Logger.Log("Found MainWindow instance - calling ShowPeriodicTable");
+                    mainWindow.ShowPeriodicTable();
-                    MainWindow.Instance.ShowPeriodicTable();
-                    Logger.Log("ShowPeriodicTable called successfully");
-                }
-                else
-                {
-                    Logger.Log("MainWindow.Instance is null!");
                 }
             }
             catch (Exception ex)
             {
-                Logger.Log($"ERROR in StartButton_Click: {ex.Message}");
+                Logger.Log($"FEHLER im Click-Handler: {ex.Message}");
             }
         }
     }

Project_Periodensystem.View/MainWindow.axaml.cs

@@ -2,7 +2,6 @@ using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Media;
 using Avalonia.VisualTree;
-using Avalonia.Threading;
 using Project_Periodensystem.Model;
 using System;
 using System.Collections.Generic;
@@ -15,19 +14,17 @@ namespace Project_Periodensystem.View
     {
         private ContentControl? mainContent;
         public static AppTheme CurrentTheme { get; set; } = AppTheme.Dark;
-        public static MainWindow? Instance { get; private set; } // Add this line
         
         public static Dictionary<AppTheme, (string Background, string Foreground)> ThemeColors { get; } = new()
         {
-            { AppTheme.Dark, ("#2F2F2F", "#FFFFFF") },
+            { AppTheme.Dark, ("#2F2F2F", "#FFFFFF") },    // Dunkles Anthrazit & Weiß
-            { AppTheme.Light, ("#FFFFFF", "#000000") },
+            { AppTheme.Light, ("#FFFFFF", "#000000") },   // Weiß & Schwarz
-            { AppTheme.Classic, ("#E8E8E8", "#000000") }
+            { AppTheme.Classic, ("#E8E8E8", "#000000") }  // Stylisches Grau & Schwarz
         };
 
         public MainWindow()
         {
             InitializeComponent();
-            Instance = this; // Set the static reference
             mainContent = this.FindControl<ContentControl>("MainContent");
             ShowLandingPage();
         }
@@ -35,29 +32,19 @@ namespace Project_Periodensystem.View
         public void ShowLandingPage()
         {
             mainContent!.Content = new LandingPage();
-            Dispatcher.UIThread.Post(() => UpdateTheme(CurrentTheme), DispatcherPriority.Loaded);
+            UpdateTheme(AppTheme.Dark);
         }
 
         public void ShowPeriodicTable()
-        {
-            Logger.Log("ShowPeriodicTable called");
-            try
         {
             mainContent!.Content = new PeriodicTablePage();
-                Logger.Log("PeriodicTablePage created and set");
+            UpdateTheme(AppTheme.Dark);
-                Dispatcher.UIThread.Post(() => UpdateTheme(CurrentTheme), DispatcherPriority.Loaded);
-                Logger.Log("Theme update posted");
-            }
-            catch (Exception ex)
-            {
-                Logger.Log($"Error in ShowPeriodicTable: {ex.Message}");
-            }
         }
 
         public void ShowAboutPage()
         {
             mainContent!.Content = new AboutPage();
-            Dispatcher.UIThread.Post(() => UpdateTheme(CurrentTheme), DispatcherPriority.Loaded);
+            UpdateTheme(AppTheme.Dark);
         }
 
         public void UpdateTheme(AppTheme theme)
@@ -68,85 +55,20 @@ namespace Project_Periodensystem.View
                 var (background, foreground) = ThemeColors[theme];
                 control.Background = new SolidColorBrush(Color.Parse(background));
                 
-                // For PeriodicTablePage, use a timer to ensure visual tree is ready
+                // Update text colors for all direct TextBlocks
-                if (control is PeriodicTablePage)
+                foreach (var textBlock in control.GetVisualDescendants().OfType<TextBlock>())
-                {
-                    // Wait a bit longer for the visual tree to be fully constructed
-                    var timer = new System.Timers.Timer(100); // 100ms delay
-                    timer.Elapsed += (sender, e) =>
-                    {
-                        timer.Stop();
-                        timer.Dispose();
-                        
-                        Dispatcher.UIThread.Post(() =>
-                        {
-                            try
-                            {
-                                var allButtons = control.GetVisualDescendants().OfType<Button>().ToList();
-                                Logger.Log($"Timer: Found {allButtons.Count} buttons in PeriodicTablePage");
-                                
-                                foreach (var button in allButtons)
-                                {
-                                    // Skip navigation buttons
-                                    if ((button.Width == 250 && button.Height == 40) || 
-                                        (button.Width == 200 && button.Height == 40))
-                                    {
-                                        continue;
-                                    }
-                                    
-                                    // Force white text for element tiles
-                                    button.Foreground = new SolidColorBrush(Colors.WhiteSmoke);
-                                    
-                                    // Force white for TextBlocks inside
-                                    var buttonTextBlocks = button.GetVisualDescendants().OfType<TextBlock>().ToList();
-                                    foreach (var tb in buttonTextBlocks)
-                                    {
-                                        tb.Foreground = new SolidColorBrush(Colors.White);
-                                        Logger.Log($"Timer: Set element tile text to white: '{tb.Text}'");
-                                    }
-                                }
-                            }
-                            catch (Exception ex)
-                            {
-                                Logger.Log($"Timer error: {ex.Message}");
-                            }
-                        });
-                    };
-                    timer.Start();
-                }
-                
-                // Update regular text colors
-                var textBlocks = control.GetVisualDescendants().OfType<TextBlock>().ToList();
-                foreach (var textBlock in textBlocks)
                 {
                     var parent = textBlock.Parent;
-                    if (parent is Button)
+                    if (parent == null || 
+                        parent is Button || 
+                        parent?.GetType().ToString().Contains("ElementTile") == true)
+                    {
                         continue;
+                    }
+                    
                     textBlock.Foreground = new SolidColorBrush(Color.Parse(foreground));
                 }
             }
         }
-
-        private bool IsElementTileButton(Button button)
-        {
-            // Check if this button has element-related content or styling
-            if (button.Content is StackPanel stackPanel)
-            {
-                var textBlocks = stackPanel.Children.OfType<TextBlock>().ToList();
-                if (textBlocks.Count >= 2) // Element tiles typically have symbol and number
-                {
-                    return true;
-                }
-            }
-            
-            // Check if button content is directly a TextBlock with short text
-            if (button.Content is TextBlock textBlock && 
-                textBlock.Text?.Length <= 3)
-            {
-                return true;
-            }
-            
-            return false;
-        }
     }
 }

Project_Periodensystem.View/PeriodicTablePage.axaml

@@ -2,18 +2,13 @@
 <UserControl xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:conv="clr-namespace:Project_Periodensystem.View.Converters"
-             x:Class="Project_Periodensystem.View.PeriodicTablePage">
+             x:Class="Project_Periodensystem.View.PeriodicTablePage"
+             Background="#5C5144">
 
     <UserControl.Styles>
         <Style Selector="Button">
             <Setter Property="Background" Value="Black"/>
             <Setter Property="Foreground" Value="White"/>
-            <Setter Property="FontFamily" Value="Arial"/>
-            <Setter Property="FontWeight" Value="Bold"/>
-            <Setter Property="Width" Value="250"/>
-            <Setter Property="Height" Value="40"/>
-            <Setter Property="HorizontalContentAlignment" Value="Center"/>
-            <Setter Property="VerticalContentAlignment" Value="Center"/>
         </Style>
         <Style Selector="Button:pointerover /template/ ContentPresenter">
             <Setter Property="Background" Value="DarkRed"/>
@@ -21,71 +16,6 @@
         <Style Selector="Button:pressed /template/ ContentPresenter">
             <Setter Property="Background" Value="Red"/>
         </Style>
-        <Style Selector="Button TextBlock">
-            <Setter Property="FontSize" Value="16"/>
-            <Setter Property="FontFamily" Value="Arial"/>
-            <Setter Property="FontWeight" Value="Bold"/>
-            <Setter Property="Foreground" Value="White"/>
-        </Style>
-        
-        <!-- Separate styles for navigation buttons -->
-        <Style Selector="Button.NavigationButton">
-            <Setter Property="Width" Value="250"/>
-            <Setter Property="Height" Value="40"/>
-            <Setter Property="HorizontalContentAlignment" Value="Center"/>
-            <Setter Property="VerticalContentAlignment" Value="Center"/>
-        </Style>
-
-        <!-- Element tile specific styles - ALWAYS white text -->
-        <Style Selector="Button.ElementTile">
-            <Setter Property="Width" Value="55"/>
-            <Setter Property="Height" Value="55"/>
-            <Setter Property="Margin" Value="2"/>
-        </Style>
-
-        <!-- Specific styles for element tile content -->
-        <Style Selector="Button.ElementTile > StackPanel > TextBlock">
-            <Setter Property="Foreground" Value="White"/>
-            <Setter Property="FontWeight" Value="Bold"/>
-        </Style>
-        
-        <!-- Different sizes for symbol and number -->
-        <Style Selector="Button.ElementTile > StackPanel > TextBlock.Symbol">
-            <Setter Property="FontSize" Value="16"/>
-            <Setter Property="Foreground" Value="White"/>
-        </Style>
-        
-        <Style Selector="Button.ElementTile > StackPanel > TextBlock.Number">
-            <Setter Property="FontSize" Value="10"/>
-            <Setter Property="Foreground" Value="White"/>
-        </Style>
-        
-        <!-- Force white text for element tiles and their content -->
-        <Style Selector="Grid#PeriodicGrid Button">
-            <Setter Property="Foreground" Value="White"/>
-        </Style>
-        <Style Selector="Grid#PeriodicGrid Button TextBlock">
-            <Setter Property="Foreground" Value="White"/>
-        </Style>
-        <Style Selector="Grid#PeriodicGrid Button > StackPanel > TextBlock">
-            <Setter Property="Foreground" Value="White"/>
-        </Style>
-
-        <!-- Legend styles -->
-        <Style Selector="Border.LegendItem">
-            <Setter Property="Width" Value="120"/>
-            <Setter Property="Height" Value="30"/>
-            <Setter Property="Margin" Value="5"/>
-            <Setter Property="CornerRadius" Value="4"/>
-        </Style>
-        
-        <Style Selector="Border.LegendItem TextBlock">
-            <Setter Property="Foreground" Value="White"/>
-            <Setter Property="FontSize" Value="11"/>
-            <Setter Property="FontWeight" Value="Bold"/>
-            <Setter Property="HorizontalAlignment" Value="Center"/>
-            <Setter Property="VerticalAlignment" Value="Center"/>
-        </Style>
     </UserControl.Styles>
 
     <UserControl.Resources>
@@ -95,57 +25,21 @@
     <Grid Margin="20">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
-            <RowDefinition Height="20"/>
             <RowDefinition Height="*"/>
             <RowDefinition Height="Auto"/>
         </Grid.RowDefinitions>
 
-        <!-- Legend - ohne dunklen Hintergrund -->
+        <!-- Header -->
-        <WrapPanel Grid.Row="0" 
+        <TextBlock Grid.Row="0" 
+                  Text="Periodensystem der Elemente"                   
+                  FontSize="36"
+                    FontWeight="Bold" 
+                  Foreground="White"
                   HorizontalAlignment="Center"
-                   Orientation="Horizontal">
+                  Margin="0,0,0,20"/>
-            
-            <!-- Farben aus SeriesToColorConverter verwenden -->
-            <Border Classes="LegendItem" Background="#6c3b01">
-                <TextBlock Text="Alkalimetalle"/>
-            </Border>
-            
-            <Border Classes="LegendItem" Background="#846011">
-                <TextBlock Text="Erdalkalimetalle"/>
-            </Border>
-            
-            <Border Classes="LegendItem" Background="#402c17">
-                <TextBlock Text="Lanthanoide"/>
-            </Border>
-            
-            <Border Classes="LegendItem" Background="#732e4c">
-                <TextBlock Text="Actinoide"/>
-            </Border>
-            
-            <Border Classes="LegendItem" Background="#711019">
-                <TextBlock Text="Übergangsmetalle"/>
-            </Border>
-            
-            <Border Classes="LegendItem" Background="#555555">
-                <TextBlock Text="Post-Übergang"/>
-            </Border>
-            
-            <Border Classes="LegendItem" Background="#015146">
-                <TextBlock Text="Halbmetalle"/>
-            </Border>
-            
-            <Border Classes="LegendItem" Background="#3e6418">
-                <TextBlock Text="Nichtmetalle"/>
-            </Border>
-            
-            <Border Classes="LegendItem" Background="#3a2151">
-                <TextBlock Text="Edelgase"/>
-            </Border>
-            
-        </WrapPanel>
 
         <!-- Periodic Table Grid -->
-        <ScrollViewer Grid.Row="2" 
+        <ScrollViewer Grid.Row="1" 
                      HorizontalScrollBarVisibility="Auto" 
                      VerticalScrollBarVisibility="Auto">
             <Grid Name="PeriodicGrid"
@@ -187,7 +81,7 @@
         </ScrollViewer>
 
         <!-- Footer with Buttons -->
-        <Grid Grid.Row="3" 
+        <Grid Grid.Row="2" 
               Margin="0,20,0,0">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto"/>
@@ -217,4 +111,3 @@
         </Grid>
     </Grid>
 </UserControl>
-

Project_Periodensystem.View/PeriodicTablePage.axaml.cs

@@ -3,7 +3,7 @@ using Avalonia.Controls;
 using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
 using Avalonia.Media;
-using Project_Periodensystem.Model;  // ElementModel should be here
+using Project_Periodensystem.Model;
 using Project_Periodensystem.Persistence;
 using Project_Periodensystem.View.Converters;
 using System;
@@ -48,33 +48,51 @@ namespace Project_Periodensystem.View
                     return;
                 }
 
-                // Debug: Alle Elemente ausgeben
+                var converter = new SeriesToColorConverter();
-                Logger.Log($"Anzahl Elemente: {PeriodicTableData.Elements.Count()}");
-                var firstFew = PeriodicTableData.Elements.Take(5);
-                foreach (var el in firstFew)
-                {
-                    Logger.Log($"Element: {el.Symbol} - Row: {el.Row}, Column: {el.Column}");
-                }
-                
-                // Speziell nach H und He suchen
-                var hydrogen = PeriodicTableData.Elements.FirstOrDefault(e => e.Symbol == "H");
-                var helium = PeriodicTableData.Elements.FirstOrDefault(e => e.Symbol == "He");
-                
-                if (hydrogen != null)
-                    Logger.Log($"Wasserstoff gefunden: Row {hydrogen.Row}, Column {hydrogen.Column}");
-                else
-                    Logger.Log("Wasserstoff NICHT gefunden!");
-                    
-                if (helium != null)
-                    Logger.Log($"Helium gefunden: Row {helium.Row}, Column {helium.Column}");
-                else
-                    Logger.Log("Helium NICHT gefunden!");
-
                 // Elemente hinzufügen
                 foreach (var element in PeriodicTableData.Elements)
                 {
                     Logger.Log($"Füge Element hinzu: {element.Symbol} ({element.Row},{element.Column})");
-                    CreateElementButton(element);
+                    
+                    var border = new Border
+                    {
+                        Width = 58,
+                        Height = 58,
+                        Margin = new Thickness(1),
+                        CornerRadius = new CornerRadius(4),
+                        BorderThickness = new Thickness(1),
+                        BorderBrush = new SolidColorBrush(Colors.Gray),
+                        Background = converter.Convert(element.Series, typeof(IBrush), null!, CultureInfo.CurrentCulture) as IBrush // Hier wird die Farbe gesetzt
+                    };
+
+                    var stackPanel = new StackPanel();
+                    
+                    // Symbol
+                    stackPanel.Children.Add(new TextBlock
+                    {
+                        Text = element.Symbol,
+                        FontSize = 20,
+                        Foreground = new SolidColorBrush(Colors.White),
+                        HorizontalAlignment = Avalonia.Layout.HorizontalAlignment.Center
+                    });
+
+                    // Atomic Number
+                    stackPanel.Children.Add(new TextBlock
+                    {
+                        Text = element.AtomicNumber.ToString(),
+                        FontSize = 12,
+                        Foreground = new SolidColorBrush(Colors.White),
+                        HorizontalAlignment = Avalonia.Layout.HorizontalAlignment.Center
+                    });
+
+                    border.Child = stackPanel;
+
+                    // Position setzen
+                    Grid.SetRow(border, Math.Max(0, element.Row - 1));
+                    Grid.SetColumn(border, Math.Max(0, element.Column - 1));
+                    
+                    periodicGrid.Children.Add(border);
+                    Logger.Log($"Element {element.Symbol} wurde hinzugefügt");
                 }
 
                 Logger.Log("PeriodicTable wurde initialisiert");
@@ -86,54 +104,6 @@ namespace Project_Periodensystem.View
             }
         }
 
-        private void CreateElementButton(Element element)
-        {
-            var button = new Button { Classes = { "ElementTile" } };
-            var panel = new StackPanel();
-
-            // Set background color based on element series
-            var backgroundColor = new SeriesToColorConverter().Convert(element.Series, typeof(Brush), null, CultureInfo.InvariantCulture) as Brush;
-            if (backgroundColor != null)
-            {
-                button.Background = backgroundColor;
-            }
-
-            var symbolText = new TextBlock 
-            { 
-                Text = element.Symbol,
-                Classes = { "Symbol" },
-                Foreground = new SolidColorBrush(Colors.White),
-                HorizontalAlignment = Avalonia.Layout.HorizontalAlignment.Center
-            };
-            
-            var numberText = new TextBlock 
-            { 
-                Text = element.AtomicNumber.ToString(),
-                Classes = { "Number" },
-                Foreground = new SolidColorBrush(Colors.White),
-                HorizontalAlignment = Avalonia.Layout.HorizontalAlignment.Center
-            };
-            
-            panel.Children.Add(numberText);  // Number on top
-            panel.Children.Add(symbolText);  // Symbol below
-            button.Content = panel;
-
-            // FIX: Korrekte Grid-Positionierung ohne Math.Max für Spalten!
-            int gridRow = element.Row;     // Row direkt verwenden (0-basiert)
-            int gridColumn = element.Column; // Column direkt verwenden (0-basiert)
-            
-            Logger.Log($"Element {element.Symbol}: Original({element.Row},{element.Column}) -> Grid({gridRow},{gridColumn})");
-            
-            Grid.SetRow(button, gridRow);
-            Grid.SetColumn(button, gridColumn);
-            
-            if (periodicGrid != null)
-            {
-                periodicGrid.Children.Add(button);
-                Logger.Log($"Element {element.Symbol} wurde zum Grid hinzugefügt an Position ({gridRow},{gridColumn})");
-            }
-        }
-
         private void ThemeButton_Click(object? sender, RoutedEventArgs e)
         {
             var nextTheme = MainWindow.CurrentTheme switch