From c6b483ca25b58787171877ecf5b22ad4539a304b Mon Sep 17 00:00:00 2001
From: smueller <smueller+vm@hexahost.de>
Date: Tue, 2 Jun 2026 16:22:21 +0200
Subject: [PATCH] fix(it-dienstleistungen): zentriere zielgruppen-karten mit
 1:1 layout

stabilisiert das layout der zielgruppen-karten auf der it-dienstleistungen-seite durch seitenlokale overrides ohne auswirkungen auf andere seiten.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 public/assets/css/custom.css   | 25 +++++++++++++++++++++++++
 public/it-dienstleistungen.php |  2 +-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/public/assets/css/custom.css b/public/assets/css/custom.css
index 2e353a9..74b45c0 100644
--- a/public/assets/css/custom.css
+++ b/public/assets/css/custom.css
@@ -16,6 +16,26 @@
     margin-top: 2rem;
 }
 
+/* IT services page: center target-group cards without affecting other pages */
+.it-services-page .values .values-grid {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    justify-content: center !important;
+    align-items: stretch;
+    grid-template-columns: none !important;
+    gap: 1.5rem !important;
+}
+
+.it-services-page .values .value-item {
+    flex: 0 1 320px !important;
+    max-width: 360px;
+    aspect-ratio: 1 / 1;
+    margin: 0 !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 /* Legal pages: plain white content with black text */
 .legal-hero,
 .legal-content {
@@ -142,4 +162,9 @@
     .footer-content {
         grid-template-columns: 1fr;
     }
+
+    .it-services-page .values .value-item {
+        flex-basis: 100%;
+        max-width: 100%;
+    }
 }
diff --git a/public/it-dienstleistungen.php b/public/it-dienstleistungen.php
index 7cd8237..3824675 100644
--- a/public/it-dienstleistungen.php
+++ b/public/it-dienstleistungen.php
@@ -10,7 +10,7 @@ $current_page = 'it-dienstleistungen';
 includeHeader($page_title, $page_description, $current_page);
 ?>
 
-<main id="main-content">
+<main id="main-content" class="it-services-page">
     <!-- Services Hero -->
     <section class="about-hero">
         <div class="container">