From ec8686761ccf71cc0d7f46abaaeff95049fdb6aa Mon Sep 17 00:00:00 2001
From: TheOnlyMace <0815cracky@gmail.com>
Date: Thu, 9 Apr 2026 21:31:32 +0200
Subject: [PATCH] Enhance IT services section: Updated index.php to include new
 CSS classes for the IT services section, improving layout and responsiveness.
 Added styles for a 3x2 grid layout in custom.css, ensuring better
 presentation across different screen sizes.

---
 public/assets/css/custom.css | 24 ++++++++++++++++++++++++
 public/index.php             |  4 ++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/public/assets/css/custom.css b/public/assets/css/custom.css
index 0642a97..687f75d 100644
--- a/public/assets/css/custom.css
+++ b/public/assets/css/custom.css
@@ -16,6 +16,30 @@
     margin-top: 2rem;
 }
 
+/* IT-Dienstleistungen auf Startseite: ausgewogenes 3x2-Grid */
+.it-services-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    max-width: 980px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.it-services-grid .feature-item {
+    height: 100%;
+}
+
+@media (max-width: 1024px) {
+    .it-services-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 640px) {
+    .it-services-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
 /* Animierter Farbverlauf für "Beliebt"-Badge */
 .featured-badge {
     background: linear-gradient(135deg, #ff51f9 0%, #a348ff 50%, #3978ff 100%);
diff --git a/public/index.php b/public/index.php
index 8dc7f6a..1211e46 100644
--- a/public/index.php
+++ b/public/index.php
@@ -156,7 +156,7 @@ includeHeader($page_title, $page_description, $current_page);
     </section>
 
     <!-- IT Services Section -->
-    <section class="features">
+    <section class="features it-services-section">
         <div class="container">
             <div class="section-header">
                 <h2 class="section-title">IT-Dienstleistungen für Privat und ergänzend Gewerblich</h2>
@@ -164,7 +164,7 @@ includeHeader($page_title, $page_description, $current_page);
                     Ergänzend zu unseren Hosting-Angeboten unterstützen wir Sie mit persönlicher IT-Betreuung.
                 </p>
             </div>
-            <div class="features-grid">
+            <div class="features-grid it-services-grid">
                 <div class="feature-item glass-card">
                     <h3>IT-Beratung</h3>
                     <p>Individuelle Beratung für sinnvolle und wirtschaftliche IT-Entscheidungen.</p>