feat: animiertes Knoten-Mesh im Hero (v1.5.0)

Greift das Logo-Motiv (vernetzte Knotenpunkte) als ganzflaechiges Hero- Hintergrundelement auf — transportiert visuell die Netzwerk-/MSP-Kompetenz. - 12 Knoten in CI-Sonith-Gelb mit asynchroner Pulse-Animation (skaliert zwischen 1.0 und 1.6, drop-shadow-Glow) - 17 Verbindungslinien in CI-Petrol mit stroke-dasharray-Datenfluss (drei Geschwindigkeiten und Phasen, zufaellig wirkend) - mix-blend-mode: screen fuer weiches Aufblenden auf den Orbs - prefers-reduced-motion respektiert (Animation aus, Mesh bleibt sichtbar) - Orb-Opazitaeten reduziert, damit das Mesh den primaeren Akzent setzt Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
feat: Würzburg-Adresse, Fernwartung & lebendigere Optik (v1.4.0)
2026-05-04 23:50:14 +02:00 · 2026-05-04 23:43:51 +02:00 · 2026-05-04 23:30:35 +02:00 · 2026-05-04 23:12:17 +02:00 · 2026-05-04 23:05:38 +02:00
12 changed files with 2678 additions and 163 deletions
@@ -23,21 +23,41 @@ sonith-website/
 ├── js/
 │   └── main.js         # Mobile Menu, Smooth Scroll, Scroll-Spy
 ├── img/
-│   ├── logo.png        # Sonith Logo (wird später ersetzt)
-│   └── team/           # Team-Fotos (Platzhalter SVGs)
+│   ├── logo.svg        # Original-Logo (CI-konform, fuer hellen BG)
+│   └── logo-light.svg  # Helle Variante fuer dunklen BG (auf der Seite verwendet)
+├── src/                # CI-Quelldateien (nicht oeffentlich serven)
+│   ├── Logo und CI Handbuch.pdf
+│   └── logo.svg        # Original-SVG vom Designer
+├── fonts/              # Inter-Font (lokal gehostet, DSGVO-konform)
 ├── .gitignore
 └── README.md
 ```

-## Farbschema
+**Hinweis:** `src/` enthält interne CI-Quelldateien und sollte vom Webserver
+ausgeschlossen werden (z. B. via Nginx-`location /src { deny all; }`).

- **Primär/Akzent**: #DEDC1B (Sonith Gelb-Grün)
- **Dunkel**: #0f172a / #1e293b (Hintergründe)
- **Text hell**: #f1f5f9
- **Text dunkel**: #1e293b
- **Grau**: #64748b (Subtexte)
+## Farbschema (CI-konform)

-Grundstimmung: Dunkel-modern mit Sonith-Gelb als Akzent.
+Quelle: `src/Logo und CI Handbuch.pdf` (Sonith UG, Apr 2019).
+
+**Logofarben** (Primär):
+- `#DEDC1E` — Sonith Gelb-Grün (Pantone 381 C) — Hauptakzent
+- `#848687` — CI-Grau (Pantone 424 C) — Subtexte
+- `#C8C9CA` — CI-Hellgrau (Pantone Coolgray 5 C) — Fließtext auf dunkel
+
+**Störer-/Gegenfarbe** (Sekundär):
+- `#067391` — Petrol (Gegenfarbe Logo) — Sekundär-Buttons, Borders, Akzente
+- `#3a96b0` — Petrol hell (Hover)
+- `#045066` — Petrol dunkel (Borders/Töne)
+
+**Hintergrund** (petrol-getöntes Dunkel statt generisches Slate):
+- `#0a1f28` — Basis (`bg-dark`)
+- `#102b38` — Sektion alternierend (`bg-dark-light`)
+- `#1a3d4d` — Akzent-Hintergrund (`bg-dark-lighter`)
+
+Tailwind-Tokens: `sonith`, `petrol`, `ci-gray`, `dark` — siehe Tailwind-Config inline in den HTML-Dateien.
+
+Grundstimmung: Dunkel-modern, Sonith-Gelb als Hauptakzent, Petrol als Sekundärakzent (entspricht der CI-Vorgabe „Störer- und Gegenfarbe Logo").

 ## Konventionen

@@ -53,4 +73,4 @@ Statische Dateien direkt auf Nginx ausliefern. Kein Build-Step notwendig.

 ---

-*Zuletzt aktualisiert: März 2026 — v1.0.0*
+*Zuletzt aktualisiert: Mai 2026 — v1.5.0 (animiertes Knoten-Mesh im Hero)*
@@ -1,5 +1,7 @@
 /* ============================================================
   sonith.de — Custom Styles
+   CI-konform: Logo-Gelb #DEDC1E, Petrol #067391, CI-Grau #848687/#C8C9CA
+   Hintergrund: petrol-getoentes Dunkel #0a1f28 / #102b38
   ============================================================ */

 /* Smooth scrolling offset for fixed nav */
@@ -9,19 +11,39 @@ html {

 /* ---- Navbar ---- */
 #navbar {
-    background: rgba(15, 23, 42, 0.8);
+    background: rgba(10, 31, 40, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
 }

 #navbar.scrolled {
-    background: rgba(15, 23, 42, 0.95);
-    box-shadow: 0 1px 0 rgba(100, 116, 139, 0.1);
+    background: rgba(10, 31, 40, 0.95);
+    box-shadow: 0 1px 0 rgba(6, 115, 145, 0.2);
+}
+
+/* Header schrumpft beim Scrollen: gross & einladend oben, kompakt waehrend des Lesens */
+.nav-row {
+    height: 6rem;
+    transition: height 0.3s ease;
+}
+.nav-logo {
+    height: 3.5rem;
+    transition: height 0.3s ease;
+}
+@media (min-width: 1024px) {
+    .nav-row { height: 7rem; }
+    .nav-logo { height: 4.5rem; }
+}
+#navbar.scrolled .nav-row { height: 4rem; }
+#navbar.scrolled .nav-logo { height: 2.25rem; }
+@media (min-width: 1024px) {
+    #navbar.scrolled .nav-row { height: 5rem; }
+    #navbar.scrolled .nav-logo { height: 2.5rem; }
 }

 /* Active nav link */
 .nav-link.active {
-    color: #DEDC1B;
+    color: #DEDC1E;
 }

 /* ---- Fade-in Animation ---- */
@@ -62,10 +84,87 @@ html {
 .service-card:nth-child(6) { transition-delay: 0.40s; }

 .service-card:hover {
-    box-shadow: 0 0 24px rgba(222, 220, 27, 0.06);
+    box-shadow: 0 0 24px rgba(222, 220, 30, 0.08),
+                0 0 48px rgba(6, 115, 145, 0.06);
 }

-/* ---- USP Cards ---- */
+/* ---- Hero Mesh: animiertes Knoten-Netz im Logo-Stil ---- */
+.hero-mesh {
+    opacity: 0.55;
+    mix-blend-mode: screen;
+}
+
+.mesh-lines line {
+    stroke-opacity: 0.25;
+    stroke-dasharray: 4 8;
+    animation: line-flow 6s linear infinite;
+}
+
+.mesh-lines line:nth-child(3n)   { animation-duration: 9s;  stroke-opacity: 0.18; }
+.mesh-lines line:nth-child(3n+1) { animation-duration: 7s;  animation-delay: -2s; }
+.mesh-lines line:nth-child(3n+2) { animation-duration: 11s; animation-delay: -4s; stroke-opacity: 0.30; }
+
+@keyframes line-flow {
+    to { stroke-dashoffset: -48; }
+}
+
+.node {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: node-pulse 3.6s ease-in-out infinite;
+    filter: drop-shadow(0 0 4px rgba(222, 220, 30, 0.6));
+}
+
+.node:nth-child(2n)   { animation-delay: -0.8s; animation-duration: 4.2s; }
+.node:nth-child(3n)   { animation-delay: -1.6s; animation-duration: 5.0s; }
+.node:nth-child(4n+1) { animation-delay: -2.4s; }
+.node:nth-child(5n+2) { animation-delay: -3.0s; animation-duration: 4.8s; }
+
+@keyframes node-pulse {
+    0%, 100% { transform: scale(1);   opacity: 0.55; }
+    50%      { transform: scale(1.6); opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .mesh-lines line,
+    .node { animation: none !important; }
+}
+
+/* ---- Floating Orbs (Hero) ---- */
+.orb {
+    filter: blur(64px);
+    pointer-events: none;
+    will-change: transform;
+}
+
+.orb-petrol {
+    background: radial-gradient(circle, #067391 0%, transparent 70%);
+    animation: drift 14s ease-in-out infinite;
+}
+
+.orb-petrol-2 {
+    background: radial-gradient(circle, #045066 0%, transparent 70%);
+    animation: drift 18s ease-in-out infinite reverse;
+}
+
+.orb-sonith {
+    background: radial-gradient(circle, #DEDC1E 0%, transparent 70%);
+    animation: drift 20s ease-in-out infinite;
+    animation-delay: -6s;
+}
+
+@keyframes drift {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    33%      { transform: translate(40px, -30px) scale(1.08); }
+    66%      { transform: translate(-30px, 25px) scale(0.95); }
+}
+
+/* Auf reduzierten Bewegungswunsch achten (a11y) */
+@media (prefers-reduced-motion: reduce) {
+    .orb { animation: none !important; }
+}
+
+/* ---- USP Cards (mit subtiler Pulse-Aura auf Icon-Kreisen) ---- */
 .usp-card {
    transition: transform 0.3s ease;
 }
@@ -74,6 +173,31 @@ html {
    transform: translateY(-4px);
 }

+.usp-card > div:first-child {
+    position: relative;
+}
+
+.usp-card > div:first-child::before {
+    content: "";
+    position: absolute;
+    inset: -6px;
+    border-radius: 9999px;
+    background: radial-gradient(circle, rgba(222, 220, 30, 0.18) 0%, transparent 70%);
+    opacity: 0;
+    transition: opacity 0.4s ease;
+    z-index: -1;
+}
+
+.usp-card:hover > div:first-child::before {
+    opacity: 1;
+    animation: pulse-soft 2.4s ease-in-out infinite;
+}
+
+@keyframes pulse-soft {
+    0%, 100% { transform: scale(1);    opacity: 0.6; }
+    50%      { transform: scale(1.18); opacity: 1; }
+}
+
 /* ---- Team Cards ---- */
 .team-card {
    transition: transform 0.3s ease;
@@ -94,32 +218,32 @@ html {

 /* ---- Selection Color ---- */
 ::selection {
-    background: rgba(222, 220, 27, 0.3);
+    background: rgba(222, 220, 30, 0.3);
    color: #fff;
 }

-/* ---- Scrollbar ---- */
+/* ---- Scrollbar (CI-Petrol-Toene) ---- */
 ::-webkit-scrollbar {
    width: 8px;
 }

 ::-webkit-scrollbar-track {
-    background: #0f172a;
+    background: #0a1f28;
 }

 ::-webkit-scrollbar-thumb {
-    background: #334155;
+    background: #1a3d4d;
    border-radius: 4px;
 }

 ::-webkit-scrollbar-thumb:hover {
-    background: #475569;
+    background: #045066;
 }

 /* ---- Focus Styles ---- */
 a:focus-visible,
 button:focus-visible {
-    outline: 2px solid #DEDC1B;
+    outline: 2px solid #DEDC1E;
    outline-offset: 2px;
    border-radius: 4px;
 }
@@ -5,15 +5,18 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datenschutz — sonith</title>
    <meta name="robots" content="noindex">
-    <link rel="icon" type="image/png" href="img/logo.png">
+    <link rel="icon" type="image/svg+xml" href="img/logo.svg">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
+        // CI-Farben (Logo & CI Handbuch, Sonith UG)
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
-                        'sonith': { DEFAULT: '#DEDC1B', dark: '#c5c318', light: '#e8e64d' },
-                        'dark': { DEFAULT: '#0f172a', light: '#1e293b', lighter: '#334155' },
+                        'sonith': { DEFAULT: '#DEDC1E', dark: '#bdbb1a', light: '#e8e74a' },
+                        'petrol': { DEFAULT: '#067391', light: '#3a96b0', dark: '#045066', 900: '#033b4b' },
+                        'ci-gray': { DEFAULT: '#848687', light: '#C8C9CA' },
+                        'dark': { DEFAULT: '#0a1f28', light: '#102b38', lighter: '#1a3d4d' },
                    },
                    fontFamily: { sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'] },
                },
@@ -23,16 +26,16 @@
    <link rel="stylesheet" href="fonts/inter.css">
    <link rel="stylesheet" href="css/style.css">
 </head>
-<body class="bg-dark text-slate-200 font-sans antialiased">
+<body class="bg-dark text-ci-gray-light font-sans antialiased">

    <!-- Navigation -->
-    <nav class="fixed top-0 left-0 right-0 z-50 bg-dark/95 backdrop-blur-md border-b border-slate-700/50">
+    <nav class="fixed top-0 left-0 right-0 z-50 bg-dark/95 backdrop-blur-md border-b border-petrol-dark/30">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16 lg:h-20">
-                <a href="index.html" class="flex items-center gap-3">
-                    <span class="text-2xl font-extrabold text-white">son<span class="text-sonith">i</span>th</span>
+                <a href="index.html" class="flex items-center" aria-label="sonith Startseite">
+                    <img src="img/logo-light.svg" alt="sonith" class="h-9 lg:h-10 w-auto">
                </a>
-                <a href="index.html" class="text-sm font-medium text-slate-300 hover:text-sonith transition-colors">&larr; Zurück zur Startseite</a>
+                <a href="index.html" class="text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">&larr; Zurück zur Startseite</a>
            </div>
        </div>
    </nav>
@@ -42,7 +45,7 @@
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <h1 class="text-3xl sm:text-4xl font-extrabold text-white mb-8">Datenschutzerklärung</h1>

-            <div class="space-y-6 text-slate-300 leading-relaxed">
+            <div class="space-y-6 text-ci-gray-light leading-relaxed">

                <h2 class="text-xl font-bold text-white mt-8">1. Datenschutz auf einen Blick</h2>

@@ -192,7 +195,7 @@
                    Diese Website nutzt die Schriftart „Inter", die lokal auf unserem Server gehostet wird. Es wird keine Verbindung zu externen Servern (z.&nbsp;B. Google) für die Schriftartendarstellung hergestellt.
                </p>

-                <p class="text-slate-500 text-sm mt-12 pt-8 border-t border-slate-700/50">
+                <p class="text-ci-gray text-sm mt-12 pt-8 border-t border-petrol-dark/30">
                    Stand: März 2026
                </p>
            </div>
@@ -200,15 +203,15 @@
    </main>

    <!-- Footer -->
-    <footer class="py-8 bg-dark-light border-t border-slate-700/50">
+    <footer class="py-8 bg-dark-light border-t border-petrol-dark/30">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="flex items-center gap-3">
-                    <p class="text-slate-500 text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
-                    <span class="text-slate-600 text-xs">v1.0.0</span>
+                    <p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
+                    <span class="text-ci-gray/60 text-xs">v1.5.0</span>
                </div>
                <div class="flex items-center gap-6">
-                    <a href="impressum.html" class="text-slate-500 text-sm hover:text-sonith transition-colors">Impressum</a>
+                    <a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>
                    <a href="datenschutz.html" class="text-sonith text-sm">Datenschutz</a>
                </div>
            </div>
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Helle Variante fuer dunklen Hintergrund: CI-Logo mit aufgehellten Schrift-Grautoenen.
+     Original: src/logo.svg. Aenderungen nur an den Schrift-Fuellfarben:
+       #828585 (CI Pantone 424 C) -> #C8C9CA (CI Pantone Coolgray 5 C)
+       #c7c7ca                    -> #FFFFFF
+     Logo-Gelb #DEDC1C bleibt unveraendert (Hauptakzent). -->
+<svg version="1.1" viewBox="0 0 71.26 40.215" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-61.706 -57.262)">
+  <path class="svg-elem-1" d="m88.165 77.957c0 1.9485-1.5792 3.5278-3.5278 3.5278s-3.5278-1.5792-3.5278-3.5278 1.5792-3.5278 3.5278-3.5278 3.5278 1.5792 3.5278 3.5278" fill="#dedc1c"/>
+  <g fill="none" stroke="#dedc1c" stroke-width=".70556px">
+   <path class="svg-elem-2" d="m89.928 77.959c0 2.9214-2.3688 5.2917-5.2917 5.2917-2.9228 0-5.2917-2.3702-5.2917-5.2917 0-2.9228 2.3688-5.2917 5.2917-5.2917 2.9228 0 5.2917 2.3688 5.2917 5.2917z"/>
+   <path class="svg-elem-3" d="m87.988 73.783 16.111-12.994"/>
+   <path class="svg-elem-4" d="m89.928 77.959 38.336-0.58842"/>
+   <path class="svg-elem-5" d="m79.345 77.959-12.7 0.23427"/>
+   <path class="svg-elem-6" d="m81.697 73.371-9.6421-11.876"/>
+   <path class="svg-elem-7" d="m85.464 83.055 1.4042 9.2094"/>
+  </g>
+  <g>
+   <path class="svg-elem-8" d="m72.053 80.836c0.5705 0.339 1.5448 0.71934 2.4763 0.71934 1.3326 0 1.9678-0.65595 1.9678-1.5241 0-0.88883-0.52917-1.3546-1.8838-1.8617-1.8617-0.67799-2.7299-1.6729-2.7299-2.8994 0-1.6509 1.3546-3.0055 3.5347-3.0055 1.0363 0 1.9472 0.27423 2.497 0.6339l-0.44373 1.3546c-0.40238-0.25356-1.1438-0.61323-2.096-0.61323-1.1011 0-1.6936 0.63528-1.6936 1.3973 0 0.84611 0.59256 1.2265 1.9265 1.7556 1.757 0.65594 2.6886 1.5462 2.6886 3.0703 0 1.819-1.418 3.0896-3.8103 3.0896-1.1217 0-2.1594-0.29628-2.8787-0.71934z" fill="#C8C9CA"/>
+   <path class="svg-elem-9" d="m91.603 75.248c0-1.079-0.02067-1.9251-0.08406-2.7726h1.6509l0.10473 1.6936h0.04272c0.50849-0.95222 1.6936-1.9044 3.3872-1.9044 1.418 0 3.6187 0.84612 3.6187 4.3587v6.0964h-1.8631v-5.9049c0-1.6509-0.61323-3.0276-2.3702-3.0276-1.2058 0-2.158 0.86816-2.497 1.9058-0.08544 0.23289-0.12678 0.54984-0.12678 0.86679v6.1598h-1.8631z" fill="#C8C9CA"/>
+   <path class="svg-elem-10" d="m102.65 72.476h1.8617v10.244h-1.8617z" fill="#FFFFFF"/>
+   <path class="svg-elem-11" d="m109.49 70.02v2.4557h2.6665v1.418h-2.6665v5.5246c0 1.2706 0.35967 1.9899 1.3973 1.9899 0.50711 0 0.80339-0.04272 1.079-0.12678l0.0841 1.418c-0.35967 0.12678-0.93017 0.25356-1.6509 0.25356-0.86678 0-1.5654-0.29628-2.0106-0.78273-0.50712-0.57189-0.71933-1.4814-0.71933-2.6886v-5.5879h-1.5875v-1.418h1.5875v-1.9044z" fill="#FFFFFF"/>
+   <path class="svg-elem-12" d="m113.55 67.692h1.8631v6.4134h0.0413c0.29627-0.52917 0.76205-1.0156 1.3339-1.3339 0.54983-0.31695 1.2058-0.50712 1.9044-0.50712 1.3767 0 3.5774 0.84612 3.5774 4.3587v6.0964h-1.8631v-5.8842c0-1.6509-0.61323-3.0262-2.3702-3.0262-1.2058 0-2.1373 0.84612-2.497 1.8411-0.10611 0.27561-0.12678 0.54984-0.12678 0.88883v6.1805h-1.8631z" fill="#C8C9CA"/>
+  </g>
+  <g fill="#dedc1c">
+   <path class="svg-elem-13" d="m106.69 60.671c0 1.4607-1.1851 2.6458-2.6458 2.6458s-2.6458-1.1851-2.6458-2.6458c0-1.4607 1.1851-2.6458 2.6458-2.6458s2.6458 1.1851 2.6458 2.6458"/>
+   <path class="svg-elem-14" d="m73.229 59.908c0 1.4607-1.1837 2.6458-2.6458 2.6458-1.4607 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1851-2.6458 2.6458-2.6458 1.4621 0 2.6458 1.1837 2.6458 2.6458"/>
+   <path class="svg-elem-15" d="m66.997 78.193c0 1.4607-1.1837 2.6458-2.6445 2.6458-1.4621 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1837-2.6458 2.6458-2.6458 1.4607 0 2.6445 1.1837 2.6445 2.6458"/>
+   <path class="svg-elem-16" d="m89.869 94.832c0 1.4621-1.1851 2.6458-2.6458 2.6458-1.4607 0-2.6458-1.1837-2.6458-2.6458 0-1.4607 1.1851-2.6458 2.6458-2.6458 1.4607 0 2.6458 1.1851 2.6458 2.6458"/>
+   <path class="svg-elem-17" d="m132.97 77.311c0 1.4607-1.1837 2.6458-2.6444 2.6458-1.4621 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1837-2.6458 2.6458-2.6458 1.4607 0 2.6444 1.1837 2.6444 2.6458"/>
+  </g>
+ </g>
+</svg>
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 71.26 40.215" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-61.706 -57.262)">
+  <path class="svg-elem-1" d="m88.165 77.957c0 1.9485-1.5792 3.5278-3.5278 3.5278s-3.5278-1.5792-3.5278-3.5278 1.5792-3.5278 3.5278-3.5278 3.5278 1.5792 3.5278 3.5278" fill="#dedc1c"/>
+  <g fill="none" stroke="#dedc1c" stroke-width=".70556px">
+   <path class="svg-elem-2" d="m89.928 77.959c0 2.9214-2.3688 5.2917-5.2917 5.2917-2.9228 0-5.2917-2.3702-5.2917-5.2917 0-2.9228 2.3688-5.2917 5.2917-5.2917 2.9228 0 5.2917 2.3688 5.2917 5.2917z"/>
+   <path class="svg-elem-3" d="m87.988 73.783 16.111-12.994"/>
+   <path class="svg-elem-4" d="m89.928 77.959 38.336-0.58842"/>
+   <path class="svg-elem-5" d="m79.345 77.959-12.7 0.23427"/>
+   <path class="svg-elem-6" d="m81.697 73.371-9.6421-11.876"/>
+   <path class="svg-elem-7" d="m85.464 83.055 1.4042 9.2094"/>
+  </g>
+  <g>
+   <path class="svg-elem-8" d="m72.053 80.836c0.5705 0.339 1.5448 0.71934 2.4763 0.71934 1.3326 0 1.9678-0.65595 1.9678-1.5241 0-0.88883-0.52917-1.3546-1.8838-1.8617-1.8617-0.67799-2.7299-1.6729-2.7299-2.8994 0-1.6509 1.3546-3.0055 3.5347-3.0055 1.0363 0 1.9472 0.27423 2.497 0.6339l-0.44373 1.3546c-0.40238-0.25356-1.1438-0.61323-2.096-0.61323-1.1011 0-1.6936 0.63528-1.6936 1.3973 0 0.84611 0.59256 1.2265 1.9265 1.7556 1.757 0.65594 2.6886 1.5462 2.6886 3.0703 0 1.819-1.418 3.0896-3.8103 3.0896-1.1217 0-2.1594-0.29628-2.8787-0.71934z" fill="#828585"/>
+   <path class="svg-elem-9" d="m91.603 75.248c0-1.079-0.02067-1.9251-0.08406-2.7726h1.6509l0.10473 1.6936h0.04272c0.50849-0.95222 1.6936-1.9044 3.3872-1.9044 1.418 0 3.6187 0.84612 3.6187 4.3587v6.0964h-1.8631v-5.9049c0-1.6509-0.61323-3.0276-2.3702-3.0276-1.2058 0-2.158 0.86816-2.497 1.9058-0.08544 0.23289-0.12678 0.54984-0.12678 0.86679v6.1598h-1.8631z" fill="#828585"/>
+   <path class="svg-elem-10" d="m102.65 72.476h1.8617v10.244h-1.8617z" fill="#c7c7ca"/>
+   <path class="svg-elem-11" d="m109.49 70.02v2.4557h2.6665v1.418h-2.6665v5.5246c0 1.2706 0.35967 1.9899 1.3973 1.9899 0.50711 0 0.80339-0.04272 1.079-0.12678l0.0841 1.418c-0.35967 0.12678-0.93017 0.25356-1.6509 0.25356-0.86678 0-1.5654-0.29628-2.0106-0.78273-0.50712-0.57189-0.71933-1.4814-0.71933-2.6886v-5.5879h-1.5875v-1.418h1.5875v-1.9044z" fill="#c7c7ca"/>
+   <path class="svg-elem-12" d="m113.55 67.692h1.8631v6.4134h0.0413c0.29627-0.52917 0.76205-1.0156 1.3339-1.3339 0.54983-0.31695 1.2058-0.50712 1.9044-0.50712 1.3767 0 3.5774 0.84612 3.5774 4.3587v6.0964h-1.8631v-5.8842c0-1.6509-0.61323-3.0262-2.3702-3.0262-1.2058 0-2.1373 0.84612-2.497 1.8411-0.10611 0.27561-0.12678 0.54984-0.12678 0.88883v6.1805h-1.8631z" fill="#828585"/>
+  </g>
+  <g fill="#dedc1c">
+   <path class="svg-elem-13" d="m106.69 60.671c0 1.4607-1.1851 2.6458-2.6458 2.6458s-2.6458-1.1851-2.6458-2.6458c0-1.4607 1.1851-2.6458 2.6458-2.6458s2.6458 1.1851 2.6458 2.6458"/>
+   <path class="svg-elem-14" d="m73.229 59.908c0 1.4607-1.1837 2.6458-2.6458 2.6458-1.4607 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1851-2.6458 2.6458-2.6458 1.4621 0 2.6458 1.1837 2.6458 2.6458"/>
+   <path class="svg-elem-15" d="m66.997 78.193c0 1.4607-1.1837 2.6458-2.6445 2.6458-1.4621 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1837-2.6458 2.6458-2.6458 1.4607 0 2.6445 1.1837 2.6445 2.6458"/>
+   <path class="svg-elem-16" d="m89.869 94.832c0 1.4621-1.1851 2.6458-2.6458 2.6458-1.4607 0-2.6458-1.1837-2.6458-2.6458 0-1.4607 1.1851-2.6458 2.6458-2.6458 1.4607 0 2.6458 1.1851 2.6458 2.6458"/>
+   <path class="svg-elem-17" d="m132.97 77.311c0 1.4607-1.1837 2.6458-2.6444 2.6458-1.4621 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1837-2.6458 2.6458-2.6458 1.4607 0 2.6444 1.1837 2.6444 2.6458"/>
+  </g>
+ </g>
+</svg>
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
-  <rect width="256" height="256" fill="#334155"/>
-  <circle cx="128" cy="100" r="40" fill="#475569"/>
-  <ellipse cx="128" cy="210" rx="65" ry="50" fill="#475569"/>
-</svg>
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
-  <rect width="256" height="256" fill="#334155"/>
-  <circle cx="128" cy="100" r="40" fill="#475569"/>
-  <ellipse cx="128" cy="210" rx="65" ry="50" fill="#475569"/>
-</svg>
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
-  <rect width="256" height="256" fill="#334155"/>
-  <circle cx="128" cy="100" r="40" fill="#475569"/>
-  <ellipse cx="128" cy="210" rx="65" ry="50" fill="#475569"/>
-</svg>
@@ -5,15 +5,18 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Impressum — sonith</title>
    <meta name="robots" content="noindex">
-    <link rel="icon" type="image/png" href="img/logo.png">
+    <link rel="icon" type="image/svg+xml" href="img/logo.svg">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
+        // CI-Farben (Logo & CI Handbuch, Sonith UG)
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
-                        'sonith': { DEFAULT: '#DEDC1B', dark: '#c5c318', light: '#e8e64d' },
-                        'dark': { DEFAULT: '#0f172a', light: '#1e293b', lighter: '#334155' },
+                        'sonith': { DEFAULT: '#DEDC1E', dark: '#bdbb1a', light: '#e8e74a' },
+                        'petrol': { DEFAULT: '#067391', light: '#3a96b0', dark: '#045066', 900: '#033b4b' },
+                        'ci-gray': { DEFAULT: '#848687', light: '#C8C9CA' },
+                        'dark': { DEFAULT: '#0a1f28', light: '#102b38', lighter: '#1a3d4d' },
                    },
                    fontFamily: { sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'] },
                },
@@ -23,16 +26,16 @@
    <link rel="stylesheet" href="fonts/inter.css">
    <link rel="stylesheet" href="css/style.css">
 </head>
-<body class="bg-dark text-slate-200 font-sans antialiased">
+<body class="bg-dark text-ci-gray-light font-sans antialiased">

    <!-- Navigation -->
-    <nav class="fixed top-0 left-0 right-0 z-50 bg-dark/95 backdrop-blur-md border-b border-slate-700/50">
+    <nav class="fixed top-0 left-0 right-0 z-50 bg-dark/95 backdrop-blur-md border-b border-petrol-dark/30">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16 lg:h-20">
-                <a href="index.html" class="flex items-center gap-3">
-                    <span class="text-2xl font-extrabold text-white">son<span class="text-sonith">i</span>th</span>
+                <a href="index.html" class="flex items-center" aria-label="sonith Startseite">
+                    <img src="img/logo-light.svg" alt="sonith" class="h-9 lg:h-10 w-auto">
                </a>
-                <a href="index.html" class="text-sm font-medium text-slate-300 hover:text-sonith transition-colors">&larr; Zurück zur Startseite</a>
+                <a href="index.html" class="text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">&larr; Zurück zur Startseite</a>
            </div>
        </div>
    </nav>
@@ -42,7 +45,7 @@
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <h1 class="text-3xl sm:text-4xl font-extrabold text-white mb-8">Impressum</h1>

-            <div class="prose prose-invert prose-slate max-w-none space-y-6 text-slate-300 leading-relaxed">
+            <div class="prose prose-invert max-w-none space-y-6 text-ci-gray-light leading-relaxed">
                <h2 class="text-xl font-bold text-white mt-8">Angaben gemäß § 5 DDG</h2>
                <p>
                    sonith UG (haftungsbeschränkt)<br>
@@ -52,8 +55,7 @@

                <h2 class="text-xl font-bold text-white mt-8">Vertreten durch</h2>
                <p>
-                    <!-- Name des Geschäftsführers hier eintragen -->
-                    Geschäftsführer: [Name eintragen]
+                    Geschäftsführer: Dominik Knapp
                </p>

                <h2 class="text-xl font-bold text-white mt-8">Kontakt</h2>
@@ -84,16 +86,16 @@
    </main>

    <!-- Footer -->
-    <footer class="py-8 bg-dark-light border-t border-slate-700/50">
+    <footer class="py-8 bg-dark-light border-t border-petrol-dark/30">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="flex items-center gap-3">
-                    <p class="text-slate-500 text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
-                    <span class="text-slate-600 text-xs">v1.0.0</span>
+                    <p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
+                    <span class="text-ci-gray/60 text-xs">v1.5.0</span>
                </div>
                <div class="flex items-center gap-6">
                    <a href="impressum.html" class="text-sonith text-sm">Impressum</a>
-                    <a href="datenschutz.html" class="text-slate-500 text-sm hover:text-sonith transition-colors">Datenschutz</a>
+                    <a href="datenschutz.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Datenschutz</a>
                </div>
            </div>
        </div>
@@ -16,24 +16,37 @@
    <meta property="og:locale" content="de_DE">

    <!-- Favicon -->
-    <link rel="icon" type="image/png" href="img/logo.png">
+    <link rel="icon" type="image/svg+xml" href="img/logo.svg">

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
+        // CI-Farben (Quelle: Logo & CI Handbuch, Sonith UG)
+        // Logofarben:    #DEDC1E (Pantone 381 C), #848687 (Pantone 424 C), #C8C9CA (Pantone Coolgray 5 C)
+        // Stoererfarbe:  #067391 (Gegenfarbe zum Logo, Pantone-Petrol)
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'sonith': {
-                            DEFAULT: '#DEDC1B',
-                            dark: '#c5c318',
-                            light: '#e8e64d',
+                            DEFAULT: '#DEDC1E',
+                            dark: '#bdbb1a',
+                            light: '#e8e74a',
+                        },
+                        'petrol': {
+                            DEFAULT: '#067391',
+                            light: '#3a96b0',
+                            dark: '#045066',
+                            900: '#033b4b',
+                        },
+                        'ci-gray': {
+                            DEFAULT: '#848687',
+                            light: '#C8C9CA',
                        },
                        'dark': {
-                            DEFAULT: '#0f172a',
-                            light: '#1e293b',
-                            lighter: '#334155',
+                            DEFAULT: '#0a1f28',
+                            light: '#102b38',
+                            lighter: '#1a3d4d',
                        },
                    },
                    fontFamily: {
@@ -50,26 +63,26 @@
    <!-- Custom Styles -->
    <link rel="stylesheet" href="css/style.css">
 </head>
-<body class="bg-dark text-slate-200 font-sans antialiased">
+<body class="bg-dark text-ci-gray-light font-sans antialiased">

    <!-- ============================================================
         NAVIGATION
         ============================================================ -->
    <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex items-center justify-between h-16 lg:h-20">
+            <div class="nav-row flex items-center justify-between">
                <!-- Logo -->
-                <a href="#hero" class="flex items-center gap-3 shrink-0">
-                    <span class="text-2xl font-extrabold text-white">son<span class="text-sonith">i</span>th</span>
+                <a href="#hero" class="flex items-center shrink-0" aria-label="sonith Startseite">
+                    <img src="img/logo-light.svg" alt="sonith" class="nav-logo w-auto">
                </a>

                <!-- Desktop Menu -->
                <div class="hidden lg:flex items-center gap-8">
-                    <a href="#leistungen" class="nav-link text-sm font-medium text-slate-300 hover:text-sonith transition-colors">Leistungen</a>
-                    <a href="#warum-sonith" class="nav-link text-sm font-medium text-slate-300 hover:text-sonith transition-colors">Warum sonith</a>
-                    <a href="#team" class="nav-link text-sm font-medium text-slate-300 hover:text-sonith transition-colors">Team</a>
-                    <a href="#kontakt" class="nav-link text-sm font-medium text-slate-300 hover:text-sonith transition-colors">Kontakt</a>
-                    <a href="https://helpdesk.sonith.de" target="_blank" rel="noopener"
+                    <a href="#leistungen" class="nav-link text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">Leistungen</a>
+                    <a href="#warum-sonith" class="nav-link text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">Warum sonith</a>
+                    <a href="#team" class="nav-link text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">Team</a>
+                    <a href="#kontakt" class="nav-link text-sm font-medium text-ci-gray-light hover:text-sonith transition-colors">Kontakt</a>
+                    <a href="https://hilfe.sonith.de" target="_blank" rel="noopener"
                       class="inline-flex items-center gap-2 px-5 py-2.5 bg-sonith text-dark font-semibold text-sm rounded-lg hover:bg-sonith-light transition-colors">
                        <!-- External Link Icon -->
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
@@ -80,7 +93,7 @@
                </div>

                <!-- Mobile Menu Button -->
-                <button id="mobile-menu-btn" class="lg:hidden p-2 text-slate-300 hover:text-white" aria-label="Menü öffnen">
+                <button id="mobile-menu-btn" class="lg:hidden p-2 text-ci-gray-light hover:text-white" aria-label="Menü öffnen">
                    <svg id="menu-icon-open" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
                    </svg>
@@ -92,14 +105,16 @@
        </div>

        <!-- Mobile Menu -->
-        <div id="mobile-menu" class="lg:hidden hidden bg-dark-light/95 backdrop-blur-md border-t border-slate-700/50">
+        <div id="mobile-menu" class="lg:hidden hidden bg-dark-light/95 backdrop-blur-md border-t border-petrol-dark/30">
            <div class="px-4 py-4 space-y-1">
-                <a href="#leistungen" class="mobile-nav-link block px-4 py-3 text-slate-300 hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Leistungen</a>
-                <a href="#warum-sonith" class="mobile-nav-link block px-4 py-3 text-slate-300 hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Warum sonith</a>
-                <a href="#team" class="mobile-nav-link block px-4 py-3 text-slate-300 hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Team</a>
-                <a href="#kontakt" class="mobile-nav-link block px-4 py-3 text-slate-300 hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Kontakt</a>
-                <a href="https://helpdesk.sonith.de" target="_blank" rel="noopener"
+                <a href="#leistungen" class="mobile-nav-link block px-4 py-3 text-ci-gray-light hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Leistungen</a>
+                <a href="#warum-sonith" class="mobile-nav-link block px-4 py-3 text-ci-gray-light hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Warum sonith</a>
+                <a href="#team" class="mobile-nav-link block px-4 py-3 text-ci-gray-light hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Team</a>
+                <a href="#kontakt" class="mobile-nav-link block px-4 py-3 text-ci-gray-light hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Kontakt</a>
+                <a href="https://hilfe.sonith.de" target="_blank" rel="noopener"
                   class="block px-4 py-3 text-sonith font-semibold hover:bg-dark/50 rounded-lg transition-colors">Helpdesk</a>
+                <a href="https://fernwartung.sonith.de/start/ISLLightClient" target="_blank" rel="noopener"
+                   class="block px-4 py-3 text-petrol-light font-semibold hover:bg-dark/50 rounded-lg transition-colors">Fernwartung</a>
            </div>
        </div>
    </nav>
@@ -108,9 +123,56 @@
         HERO
         ============================================================ -->
    <section id="hero" class="relative min-h-screen flex items-center overflow-hidden">
-        <!-- Background Pattern -->
-        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_rgba(222,220,27,0.08)_0%,_transparent_60%)]"></div>
-        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_rgba(222,220,27,0.04)_0%,_transparent_50%)]"></div>
+        <!-- Background: Petrol/Sonith-Gradients + animierte Floating-Orbs -->
+        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_rgba(222,220,30,0.09)_0%,_transparent_60%)]"></div>
+        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_rgba(6,115,145,0.20)_0%,_transparent_55%)]"></div>
+
+        <!-- Floating Orbs: lebendige unscharfe Lichtpunkte in CI-Farben -->
+        <div class="orb orb-petrol absolute top-[15%] left-[8%] w-72 h-72 rounded-full opacity-30"></div>
+        <div class="orb orb-sonith absolute top-[55%] right-[12%] w-80 h-80 rounded-full opacity-20"></div>
+        <div class="orb orb-petrol-2 absolute bottom-[12%] left-[35%] w-64 h-64 rounded-full opacity-25"></div>
+
+        <!-- Animiertes Knoten-Mesh: greift das Logo-Motiv (Netzwerk-Knoten) auf
+             und transportiert visuell die MSP-/Netzwerk-Kompetenz.
+             Linien pulsieren mit Datenfluss-Effekt, Knoten leuchten zyklisch auf. -->
+        <svg class="hero-mesh absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
+            <!-- Verbindungslinien (CI-Petrol) -->
+            <g class="mesh-lines" stroke="#067391" stroke-width="0.9" stroke-linecap="round" fill="none">
+                <line x1="180"  y1="140" x2="380"  y2="90"/>
+                <line x1="180"  y1="140" x2="140"  y2="380"/>
+                <line x1="180"  y1="140" x2="300"  y2="540"/>
+                <line x1="380"  y1="90"  x2="620"  y2="180"/>
+                <line x1="620"  y1="180" x2="880"  y2="110"/>
+                <line x1="620"  y1="180" x2="520"  y2="460"/>
+                <line x1="880"  y1="110" x2="1080" y2="280"/>
+                <line x1="1080" y1="280" x2="980"  y2="480"/>
+                <line x1="980"  y1="480" x2="740"  y2="540"/>
+                <line x1="740"  y1="540" x2="520"  y2="460"/>
+                <line x1="740"  y1="540" x2="860"  y2="720"/>
+                <line x1="520"  y1="460" x2="300"  y2="540"/>
+                <line x1="520"  y1="460" x2="560"  y2="700"/>
+                <line x1="300"  y1="540" x2="140"  y2="380"/>
+                <line x1="300"  y1="540" x2="560"  y2="700"/>
+                <line x1="560"  y1="700" x2="860"  y2="720"/>
+                <line x1="1080" y1="280" x2="740"  y2="540"/>
+            </g>
+
+            <!-- Knoten (CI-Sonith-Gelb) mit asynchroner Pulse-Animation -->
+            <g class="mesh-nodes" fill="#DEDC1E">
+                <circle class="node" cx="180"  cy="140" r="4"/>
+                <circle class="node" cx="380"  cy="90"  r="3"/>
+                <circle class="node" cx="620"  cy="180" r="5"/>
+                <circle class="node" cx="880"  cy="110" r="3.5"/>
+                <circle class="node" cx="1080" cy="280" r="4"/>
+                <circle class="node" cx="980"  cy="480" r="3"/>
+                <circle class="node" cx="740"  cy="540" r="4.5"/>
+                <circle class="node" cx="520"  cy="460" r="3.5"/>
+                <circle class="node" cx="300"  cy="540" r="3"/>
+                <circle class="node" cx="140"  cy="380" r="4"/>
+                <circle class="node" cx="560"  cy="700" r="3"/>
+                <circle class="node" cx="860"  cy="720" r="3.5"/>
+            </g>
+        </svg>

        <!-- Grid Pattern Overlay -->
        <div class="absolute inset-0 opacity-[0.03]" style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23ffffff&quot; fill-opacity=&quot;1&quot;%3E%3Cpath d=&quot;M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
@@ -123,7 +185,7 @@
                        IT-Lösungen.<br>
                        <span class="text-sonith">Sicher verwaltet.</span>
                    </h1>
-                    <p class="mt-6 text-lg sm:text-xl text-slate-400 leading-relaxed max-w-2xl">
+                    <p class="mt-6 text-lg sm:text-xl text-ci-gray leading-relaxed max-w-2xl">
                        Wir sind Ihr Managed Service Provider — proaktive IT-Betreuung, eigene Infrastruktur, persönlicher Ansprechpartner.
                    </p>
                    <div class="mt-10 flex flex-col sm:flex-row gap-4">
@@ -131,8 +193,8 @@
                           class="inline-flex items-center justify-center px-8 py-4 bg-sonith text-dark font-bold rounded-lg hover:bg-sonith-light transition-all hover:shadow-lg hover:shadow-sonith/20 text-center">
                            Kontakt aufnehmen
                        </a>
-                        <a href="https://helpdesk.sonith.de" target="_blank" rel="noopener"
-                           class="inline-flex items-center justify-center gap-2 px-8 py-4 border-2 border-slate-600 text-slate-200 font-semibold rounded-lg hover:border-sonith hover:text-sonith transition-all text-center">
+                        <a href="https://hilfe.sonith.de" target="_blank" rel="noopener"
+                           class="inline-flex items-center justify-center gap-2 px-8 py-4 border-2 border-petrol text-petrol-light font-semibold rounded-lg hover:bg-petrol/10 hover:border-petrol-light hover:text-white transition-all text-center">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
                            </svg>
@@ -145,7 +207,7 @@

        <!-- Scroll Indicator -->
        <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
-            <svg class="w-6 h-6 text-slate-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <svg class="w-6 h-6 text-ci-gray" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </div>
@@ -159,74 +221,74 @@
            <div class="text-center max-w-3xl mx-auto mb-16 fade-in">
                <p class="text-sonith font-semibold text-sm tracking-widest uppercase mb-3">Was wir tun</p>
                <h2 class="text-3xl sm:text-4xl font-extrabold text-white">Unsere Leistungen</h2>
-                <p class="mt-4 text-slate-400 text-lg">IT-Infrastruktur aus einer Hand — von der Planung bis zum laufenden Betrieb.</p>
+                <p class="mt-4 text-ci-gray text-lg">IT-Infrastruktur aus einer Hand — von der Planung bis zum laufenden Betrieb.</p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
                <!-- Managed Services -->
-                <div class="service-card group bg-dark rounded-xl p-8 border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
+                <div class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-sonith/30 transition-all duration-300">
                    <div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Managed Services</h3>
-                    <p class="text-slate-400 leading-relaxed">Proaktive IT-Betreuung: Monitoring, Patch-Management, Wartung — bevor Probleme entstehen.</p>
+                    <p class="text-ci-gray leading-relaxed">Proaktive IT-Betreuung: Monitoring, Patch-Management, Wartung — bevor Probleme entstehen.</p>
                </div>

                <!-- Managed Backup -->
-                <div class="service-card group bg-dark rounded-xl p-8 border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
-                    <div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
-                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <div class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/50 transition-all duration-300">
+                    <div class="w-12 h-12 rounded-lg bg-petrol/15 flex items-center justify-center mb-6 group-hover:bg-petrol/25 transition-colors">
+                        <svg class="w-6 h-6 text-petrol-light" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Managed Backup</h3>
-                    <p class="text-slate-400 leading-relaxed">Automatische Datensicherung in unser eigenes Rechenzentrum. Backup as a Service — DSGVO-konform, in Deutschland gehostet.</p>
+                    <p class="text-ci-gray leading-relaxed">Automatische Datensicherung in unser eigenes Rechenzentrum. Backup as a Service — DSGVO-konform, in Deutschland gehostet.</p>
                </div>

                <!-- Hosting -->
-                <div class="service-card group bg-dark rounded-xl p-8 border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
+                <div class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-sonith/30 transition-all duration-300">
                    <div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Hosting</h3>
-                    <p class="text-slate-400 leading-relaxed">Webhosting, E-Mail und Applikationen auf unserer eigenen Infrastruktur. Persönlicher Support statt Ticket-Warteschlange.</p>
+                    <p class="text-ci-gray leading-relaxed">Webhosting, E-Mail und Applikationen auf unserer eigenen Infrastruktur. Persönlicher Support statt Ticket-Warteschlange.</p>
                </div>

                <!-- Nextcloud -->
-                <div class="service-card group bg-dark rounded-xl p-8 border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
-                    <div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
-                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <div class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/50 transition-all duration-300">
+                    <div class="w-12 h-12 rounded-lg bg-petrol/15 flex items-center justify-center mb-6 group-hover:bg-petrol/25 transition-colors">
+                        <svg class="w-6 h-6 text-petrol-light" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Nextcloud</h3>
-                    <p class="text-slate-400 leading-relaxed">Ihre private Cloud — Dateien, Kalender, Kontakte. Von uns gehostet und gewartet. Die sichere Alternative zu US-Cloud-Diensten.</p>
+                    <p class="text-ci-gray leading-relaxed">Ihre private Cloud — Dateien, Kalender, Kontakte. Von uns gehostet und gewartet. Die sichere Alternative zu US-Cloud-Diensten.</p>
                </div>

                <!-- Netzwerk & Infrastruktur -->
-                <div class="service-card group bg-dark rounded-xl p-8 border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
+                <div class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-sonith/30 transition-all duration-300">
                    <div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 017.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 011.06 0z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Netzwerk & Infrastruktur</h3>
-                    <p class="text-slate-400 leading-relaxed">Von der Bürovernetzung bis zur standortübergreifenden Infrastruktur. VPN, Firewall, WLAN — sicher und maßgeschneidert.</p>
+                    <p class="text-ci-gray leading-relaxed">Von der Bürovernetzung bis zur standortübergreifenden Infrastruktur. VPN, Firewall, WLAN — sicher und maßgeschneidert.</p>
                </div>

                <!-- ERP-Systeme -->
-                <div class="service-card group bg-dark rounded-xl p-8 border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
-                    <div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
-                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <div class="service-card group bg-dark rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/50 transition-all duration-300">
+                    <div class="w-12 h-12 rounded-lg bg-petrol/15 flex items-center justify-center mb-6 group-hover:bg-petrol/25 transition-colors">
+                        <svg class="w-6 h-6 text-petrol-light" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">ERP-Systeme</h3>
-                    <p class="text-slate-400 leading-relaxed">Einführung und Betreuung von Open-Source-ERP. Kaufmännische Prozesse digitalisiert und integriert.</p>
+                    <p class="text-ci-gray leading-relaxed">Einführung und Betreuung von Open-Source-ERP. Kaufmännische Prozesse digitalisiert und integriert.</p>
                </div>
            </div>
        </div>
@@ -240,7 +302,7 @@
            <div class="text-center max-w-3xl mx-auto mb-16 fade-in">
                <p class="text-sonith font-semibold text-sm tracking-widest uppercase mb-3">Unsere Stärken</p>
                <h2 class="text-3xl sm:text-4xl font-extrabold text-white">Warum sonith?</h2>
-                <p class="mt-4 text-slate-400 text-lg">Was uns von anderen IT-Dienstleistern unterscheidet.</p>
+                <p class="mt-4 text-ci-gray text-lg">Was uns von anderen IT-Dienstleistern unterscheidet.</p>
            </div>

            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
@@ -252,7 +314,7 @@
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-white mb-2">Eigenes Rechenzentrum</h3>
-                    <p class="text-slate-400 text-sm leading-relaxed">Ihre Daten bleiben in Deutschland, auf unserer Hardware.</p>
+                    <p class="text-ci-gray text-sm leading-relaxed">Ihre Daten bleiben in Deutschland, auf unserer Hardware.</p>
                </div>

                <!-- Proaktiv -->
@@ -263,7 +325,7 @@
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-white mb-2">Proaktiv statt reaktiv</h3>
-                    <p class="text-slate-400 text-sm leading-relaxed">Wir beheben Probleme, bevor Sie sie bemerken.</p>
+                    <p class="text-ci-gray text-sm leading-relaxed">Wir beheben Probleme, bevor Sie sie bemerken.</p>
                </div>

                <!-- Persönlich -->
@@ -274,7 +336,7 @@
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-white mb-2">Persönlicher Ansprechpartner</h3>
-                    <p class="text-slate-400 text-sm leading-relaxed">Kein Callcenter. Sie erreichen uns direkt.</p>
+                    <p class="text-ci-gray text-sm leading-relaxed">Kein Callcenter. Sie erreichen uns direkt.</p>
                </div>

                <!-- Sicherheit -->
@@ -285,7 +347,7 @@
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-white mb-2">Sicherheit als Standard</h3>
-                    <p class="text-slate-400 text-sm leading-relaxed">Verschlüsselung, Backups, VPN — bei uns selbstverständlich.</p>
+                    <p class="text-ci-gray text-sm leading-relaxed">Verschlüsselung, Backups, VPN — bei uns selbstverständlich.</p>
                </div>
            </div>
        </div>
@@ -299,35 +361,35 @@
            <div class="text-center max-w-3xl mx-auto mb-16 fade-in">
                <p class="text-sonith font-semibold text-sm tracking-widest uppercase mb-3">Wer wir sind</p>
                <h2 class="text-3xl sm:text-4xl font-extrabold text-white">Unser Team</h2>
-                <p class="mt-4 text-slate-400 text-lg">Kurze Wege, direkte Kommunikation — bei uns kennen Sie Ihren Ansprechpartner.</p>
+                <p class="mt-4 text-ci-gray text-lg">Kurze Wege, direkte Kommunikation — bei uns kennen Sie Ihren Ansprechpartner.</p>
            </div>

            <div class="grid sm:grid-cols-3 gap-8 max-w-4xl mx-auto">
-                <!-- Team Member 1 -->
+                <!-- Dominik Knapp — Geschaeftsfuehrung -->
                <div class="team-card text-center fade-in">
-                    <div class="w-32 h-32 rounded-full bg-dark-lighter mx-auto mb-5 overflow-hidden border-2 border-slate-600/50">
-                        <img src="img/team/placeholder-1.svg" alt="Teammitglied" class="w-full h-full object-cover">
+                    <div class="w-32 h-32 rounded-full bg-petrol mx-auto mb-5 flex items-center justify-center border-2 border-petrol-light/30 shadow-lg shadow-petrol/20">
+                        <span class="text-3xl font-extrabold text-white tracking-wide">DK</span>
                    </div>
-                    <h3 class="text-lg font-bold text-white">Max Mustermann</h3>
+                    <h3 class="text-lg font-bold text-white">Dominik Knapp</h3>
                    <p class="text-sonith text-sm font-medium">Geschäftsführung</p>
                </div>

-                <!-- Team Member 2 -->
+                <!-- Dominik Hoefling — Administration & Entwicklung -->
                <div class="team-card text-center fade-in">
-                    <div class="w-32 h-32 rounded-full bg-dark-lighter mx-auto mb-5 overflow-hidden border-2 border-slate-600/50">
-                        <img src="img/team/placeholder-2.svg" alt="Teammitglied" class="w-full h-full object-cover">
+                    <div class="w-32 h-32 rounded-full bg-petrol mx-auto mb-5 flex items-center justify-center border-2 border-petrol-light/30 shadow-lg shadow-petrol/20">
+                        <span class="text-3xl font-extrabold text-white tracking-wide">DH</span>
                    </div>
-                    <h3 class="text-lg font-bold text-white">Erika Musterfrau</h3>
-                    <p class="text-sonith text-sm font-medium">Systemadministration</p>
+                    <h3 class="text-lg font-bold text-white">Dominik Höfling</h3>
+                    <p class="text-sonith text-sm font-medium">Administration &amp; Entwicklung</p>
                </div>

-                <!-- Team Member 3 -->
+                <!-- Stefan Riederer — Support -->
                <div class="team-card text-center fade-in">
-                    <div class="w-32 h-32 rounded-full bg-dark-lighter mx-auto mb-5 overflow-hidden border-2 border-slate-600/50">
-                        <img src="img/team/placeholder-3.svg" alt="Teammitglied" class="w-full h-full object-cover">
+                    <div class="w-32 h-32 rounded-full bg-petrol mx-auto mb-5 flex items-center justify-center border-2 border-petrol-light/30 shadow-lg shadow-petrol/20">
+                        <span class="text-3xl font-extrabold text-white tracking-wide">SR</span>
                    </div>
-                    <h3 class="text-lg font-bold text-white">Alex Beispiel</h3>
-                    <p class="text-sonith text-sm font-medium">IT-Support</p>
+                    <h3 class="text-lg font-bold text-white">Stefan Riederer</h3>
+                    <p class="text-sonith text-sm font-medium">Support</p>
                </div>
            </div>
        </div>
@@ -341,54 +403,103 @@
            <div class="text-center max-w-3xl mx-auto mb-16 fade-in">
                <p class="text-sonith font-semibold text-sm tracking-widest uppercase mb-3">Sprechen Sie uns an</p>
                <h2 class="text-3xl sm:text-4xl font-extrabold text-white">Kontakt</h2>
-                <p class="mt-4 text-slate-400 text-lg">Wir freuen uns auf Ihre Anfrage.</p>
+                <p class="mt-4 text-ci-gray text-lg">Wir freuen uns auf Ihre Anfrage.</p>
            </div>

-            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
+            <!-- Direktkontakt -->
+            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
                <!-- Telefon -->
-                <a href="tel:+4993130699090" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
+                <a href="tel:+4993130699090" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-sonith/40 transition-all duration-300">
                    <div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-sonith/20 transition-colors">
                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/>
                        </svg>
                    </div>
                    <h3 class="text-sm font-semibold text-white mb-1">Telefon</h3>
-                    <p class="text-slate-400 text-sm">0931 30 69 90 90</p>
+                    <p class="text-ci-gray text-sm">0931 30 69 90 90</p>
                </a>

                <!-- E-Mail -->
-                <a href="mailto:mail@sonith.de" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
+                <a href="mailto:mail@sonith.de" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-sonith/40 transition-all duration-300">
                    <div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-sonith/20 transition-colors">
                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/>
                        </svg>
                    </div>
                    <h3 class="text-sm font-semibold text-white mb-1">E-Mail</h3>
-                    <p class="text-slate-400 text-sm">mail@sonith.de</p>
+                    <p class="text-ci-gray text-sm">mail@sonith.de</p>
                </a>

-                <!-- Adresse -->
-                <div class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-slate-700/50">
-                    <div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4">
-                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
-                        </svg>
-                    </div>
-                    <h3 class="text-sm font-semibold text-white mb-1">Adresse</h3>
-                    <p class="text-slate-400 text-sm">Kleinheubacher Str. 7<br>63924 Rüdenau</p>
-                </div>
-
-                <!-- Remote-Support -->
-                <a href="https://helpdesk.sonith.de" target="_blank" rel="noopener" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
-                    <div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-sonith/20 transition-colors">
-                        <svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <!-- Helpdesk / Ticket-System -->
+                <a href="https://hilfe.sonith.de" target="_blank" rel="noopener" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-petrol/50 transition-all duration-300">
+                    <div class="w-12 h-12 rounded-full bg-petrol/15 flex items-center justify-center mx-auto mb-4 group-hover:bg-petrol/25 transition-colors">
+                        <svg class="w-6 h-6 text-petrol-light" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z"/>
                        </svg>
                    </div>
                    <h3 class="text-sm font-semibold text-white mb-1">Helpdesk</h3>
-                    <p class="text-slate-400 text-sm">Support-Ticket erstellen</p>
+                    <p class="text-ci-gray text-sm">Support-Ticket erstellen</p>
                </a>
+
+                <!-- Fernwartung (ISL Light) -->
+                <a href="https://fernwartung.sonith.de/start/ISLLightClient" target="_blank" rel="noopener" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-petrol-dark/30 hover:border-petrol/50 transition-all duration-300">
+                    <div class="w-12 h-12 rounded-full bg-petrol/15 flex items-center justify-center mx-auto mb-4 group-hover:bg-petrol/25 transition-colors">
+                        <svg class="w-6 h-6 text-petrol-light" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m0-3.75V12a2.25 2.25 0 00-2.25-2.25h-4.5A2.25 2.25 0 006 12v1.5m9 0H6m9 0v.75A2.25 2.25 0 0112.75 16.5h-1.5A2.25 2.25 0 019 14.25v-.75M12 7.5V4.5m-3 3h6"/>
+                        </svg>
+                    </div>
+                    <h3 class="text-sm font-semibold text-white mb-1">Fernwartung</h3>
+                    <p class="text-ci-gray text-sm">ISL Light starten</p>
+                </a>
+            </div>
+
+            <!-- Standorte: zweimal in Franken -->
+            <div class="text-center max-w-3xl mx-auto mt-20 mb-10 fade-in">
+                <p class="text-petrol-light font-semibold text-sm tracking-widest uppercase mb-3">Vor Ort</p>
+                <h3 class="text-2xl sm:text-3xl font-bold text-white">Unsere Standorte</h3>
+                <p class="mt-3 text-ci-gray">Zweimal in Franken — kurze Wege zu unseren Kunden.</p>
+            </div>
+
+            <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+                <!-- Standort Wuerzburg -->
+                <div class="contact-card group bg-dark-light rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/60 transition-all duration-300">
+                    <div class="flex items-start gap-4">
+                        <div class="w-12 h-12 rounded-full bg-petrol/15 flex items-center justify-center shrink-0 group-hover:bg-petrol/25 transition-colors">
+                            <svg class="w-6 h-6 text-petrol-light" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
+                            </svg>
+                        </div>
+                        <div class="text-left">
+                            <p class="text-petrol-light text-xs font-semibold tracking-widest uppercase mb-1">Niederlassung</p>
+                            <h4 class="text-xl font-bold text-white mb-2">Würzburg</h4>
+                            <p class="text-ci-gray-light text-sm leading-relaxed">
+                                Am Schlossgarten 1<br>
+                                97076 Würzburg
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Standort Ruedenau (Hauptsitz lt. Handelsregister) -->
+                <div class="contact-card group bg-dark-light rounded-xl p-8 border border-petrol-dark/30 hover:border-petrol/60 transition-all duration-300">
+                    <div class="flex items-start gap-4">
+                        <div class="w-12 h-12 rounded-full bg-petrol/15 flex items-center justify-center shrink-0 group-hover:bg-petrol/25 transition-colors">
+                            <svg class="w-6 h-6 text-petrol-light" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
+                            </svg>
+                        </div>
+                        <div class="text-left">
+                            <p class="text-petrol-light text-xs font-semibold tracking-widest uppercase mb-1">Hauptsitz</p>
+                            <h4 class="text-xl font-bold text-white mb-2">Rüdenau</h4>
+                            <p class="text-ci-gray-light text-sm leading-relaxed">
+                                Kleinheubacher Str. 7<br>
+                                63924 Rüdenau
+                            </p>
+                        </div>
+                    </div>
+                </div>
            </div>
        </div>
    </section>
@@ -396,16 +507,16 @@
    <!-- ============================================================
         FOOTER
         ============================================================ -->
-    <footer class="py-8 bg-dark-light border-t border-slate-700/50">
+    <footer class="py-8 bg-dark-light border-t border-petrol-dark/30">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="flex items-center gap-3">
-                    <p class="text-slate-500 text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
-                    <span class="text-slate-600 text-xs">v1.0.0</span>
+                    <p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
+                    <span class="text-ci-gray/60 text-xs">v1.5.0</span>
                </div>
                <div class="flex items-center gap-6">
-                    <a href="impressum.html" class="text-slate-500 text-sm hover:text-sonith transition-colors">Impressum</a>
-                    <a href="datenschutz.html" class="text-slate-500 text-sm hover:text-sonith transition-colors">Datenschutz</a>
+                    <a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>
+                    <a href="datenschutz.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Datenschutz</a>
                </div>
            </div>
        </div>
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 71.26 40.215" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-61.706 -57.262)">
+  <path class="svg-elem-1" d="m88.165 77.957c0 1.9485-1.5792 3.5278-3.5278 3.5278s-3.5278-1.5792-3.5278-3.5278 1.5792-3.5278 3.5278-3.5278 3.5278 1.5792 3.5278 3.5278" fill="#dedc1c"/>
+  <g fill="none" stroke="#dedc1c" stroke-width=".70556px">
+   <path class="svg-elem-2" d="m89.928 77.959c0 2.9214-2.3688 5.2917-5.2917 5.2917-2.9228 0-5.2917-2.3702-5.2917-5.2917 0-2.9228 2.3688-5.2917 5.2917-5.2917 2.9228 0 5.2917 2.3688 5.2917 5.2917z"/>
+   <path class="svg-elem-3" d="m87.988 73.783 16.111-12.994"/>
+   <path class="svg-elem-4" d="m89.928 77.959 38.336-0.58842"/>
+   <path class="svg-elem-5" d="m79.345 77.959-12.7 0.23427"/>
+   <path class="svg-elem-6" d="m81.697 73.371-9.6421-11.876"/>
+   <path class="svg-elem-7" d="m85.464 83.055 1.4042 9.2094"/>
+  </g>
+  <g>
+   <path class="svg-elem-8" d="m72.053 80.836c0.5705 0.339 1.5448 0.71934 2.4763 0.71934 1.3326 0 1.9678-0.65595 1.9678-1.5241 0-0.88883-0.52917-1.3546-1.8838-1.8617-1.8617-0.67799-2.7299-1.6729-2.7299-2.8994 0-1.6509 1.3546-3.0055 3.5347-3.0055 1.0363 0 1.9472 0.27423 2.497 0.6339l-0.44373 1.3546c-0.40238-0.25356-1.1438-0.61323-2.096-0.61323-1.1011 0-1.6936 0.63528-1.6936 1.3973 0 0.84611 0.59256 1.2265 1.9265 1.7556 1.757 0.65594 2.6886 1.5462 2.6886 3.0703 0 1.819-1.418 3.0896-3.8103 3.0896-1.1217 0-2.1594-0.29628-2.8787-0.71934z" fill="#828585"/>
+   <path class="svg-elem-9" d="m91.603 75.248c0-1.079-0.02067-1.9251-0.08406-2.7726h1.6509l0.10473 1.6936h0.04272c0.50849-0.95222 1.6936-1.9044 3.3872-1.9044 1.418 0 3.6187 0.84612 3.6187 4.3587v6.0964h-1.8631v-5.9049c0-1.6509-0.61323-3.0276-2.3702-3.0276-1.2058 0-2.158 0.86816-2.497 1.9058-0.08544 0.23289-0.12678 0.54984-0.12678 0.86679v6.1598h-1.8631z" fill="#828585"/>
+   <path class="svg-elem-10" d="m102.65 72.476h1.8617v10.244h-1.8617z" fill="#c7c7ca"/>
+   <path class="svg-elem-11" d="m109.49 70.02v2.4557h2.6665v1.418h-2.6665v5.5246c0 1.2706 0.35967 1.9899 1.3973 1.9899 0.50711 0 0.80339-0.04272 1.079-0.12678l0.0841 1.418c-0.35967 0.12678-0.93017 0.25356-1.6509 0.25356-0.86678 0-1.5654-0.29628-2.0106-0.78273-0.50712-0.57189-0.71933-1.4814-0.71933-2.6886v-5.5879h-1.5875v-1.418h1.5875v-1.9044z" fill="#c7c7ca"/>
+   <path class="svg-elem-12" d="m113.55 67.692h1.8631v6.4134h0.0413c0.29627-0.52917 0.76205-1.0156 1.3339-1.3339 0.54983-0.31695 1.2058-0.50712 1.9044-0.50712 1.3767 0 3.5774 0.84612 3.5774 4.3587v6.0964h-1.8631v-5.8842c0-1.6509-0.61323-3.0262-2.3702-3.0262-1.2058 0-2.1373 0.84612-2.497 1.8411-0.10611 0.27561-0.12678 0.54984-0.12678 0.88883v6.1805h-1.8631z" fill="#828585"/>
+  </g>
+  <g fill="#dedc1c">
+   <path class="svg-elem-13" d="m106.69 60.671c0 1.4607-1.1851 2.6458-2.6458 2.6458s-2.6458-1.1851-2.6458-2.6458c0-1.4607 1.1851-2.6458 2.6458-2.6458s2.6458 1.1851 2.6458 2.6458"/>
+   <path class="svg-elem-14" d="m73.229 59.908c0 1.4607-1.1837 2.6458-2.6458 2.6458-1.4607 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1851-2.6458 2.6458-2.6458 1.4621 0 2.6458 1.1837 2.6458 2.6458"/>
+   <path class="svg-elem-15" d="m66.997 78.193c0 1.4607-1.1837 2.6458-2.6445 2.6458-1.4621 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1837-2.6458 2.6458-2.6458 1.4607 0 2.6445 1.1837 2.6445 2.6458"/>
+   <path class="svg-elem-16" d="m89.869 94.832c0 1.4621-1.1851 2.6458-2.6458 2.6458-1.4607 0-2.6458-1.1837-2.6458-2.6458 0-1.4607 1.1851-2.6458 2.6458-2.6458 1.4607 0 2.6458 1.1851 2.6458 2.6458"/>
+   <path class="svg-elem-17" d="m132.97 77.311c0 1.4607-1.1837 2.6458-2.6444 2.6458-1.4621 0-2.6458-1.1851-2.6458-2.6458 0-1.4621 1.1837-2.6458 2.6458-2.6458 1.4607 0 2.6444 1.1837 2.6444 2.6458"/>
+  </g>
+ </g>
+</svg>
Author	SHA1	Message	Date
techadmin	82cea98b52	feat: animiertes Knoten-Mesh im Hero (v1.5.0) Greift das Logo-Motiv (vernetzte Knotenpunkte) als ganzflaechiges Hero- Hintergrundelement auf — transportiert visuell die Netzwerk-/MSP-Kompetenz. - 12 Knoten in CI-Sonith-Gelb mit asynchroner Pulse-Animation (skaliert zwischen 1.0 und 1.6, drop-shadow-Glow) - 17 Verbindungslinien in CI-Petrol mit stroke-dasharray-Datenfluss (drei Geschwindigkeiten und Phasen, zufaellig wirkend) - mix-blend-mode: screen fuer weiches Aufblenden auf den Orbs - prefers-reduced-motion respektiert (Animation aus, Mesh bleibt sichtbar) - Orb-Opazitaeten reduziert, damit das Mesh den primaeren Akzent setzt Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-05-04 23:50:14 +02:00
techadmin	8e729905f7	feat: Würzburg-Adresse, Fernwartung & lebendigere Optik (v1.4.0) - Würzburger Niederlassung: Am Schlossgarten 1, 97076 Würzburg - Helpdesk-URL korrigiert: helpdesk.sonith.de → hilfe.sonith.de - Fernwartungs-Link (ISL Light Client) als 4. Direktkontakt-Karte und zusätzlich im Mobile-Menü - Hero: drei animierte Floating-Orbs (Petrol & Sonith) für mehr Lebendigkeit, prefers-reduced-motion respektiert - Service-Cards: Akzentfarbe alterniert zwischen Sonith-Gelb und Petrol — bricht den monotonen Eindruck, beide CI-Farben kommen zur Geltung - USP-Cards: subtile Pulse-Aura beim Hover über den Icon-Kreisen Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-05-04 23:43:51 +02:00
techadmin	f879f1cda6	feat: Standorte Würzburg/Rüdenau & dynamischer Header (v1.3.0) - Header wächst beim ersten Eindruck auf 7rem (Logo h-18) und schrumpft beim Scrollen auf 5rem (Logo h-10) — Logo gewinnt oben mehr Praesenz, bleibt beim Lesen aber kompakt - Kontakt-Sektion umstrukturiert: - Direktkontakt (Telefon, E-Mail, Helpdesk) als 3er-Grid - Neue Untersektion „Unsere Standorte" mit zwei Karten - Standorte: Würzburg (Niederlassung, Adresse als TODO-Platzhalter) und Rüdenau (Hauptsitz lt. Handelsregister) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-05-04 23:30:35 +02:00
techadmin	380924ffdb	feat: echtes Logo, Team-Mitglieder & CI-Quelldateien (v1.2.0) - CI-Logo (img/logo.svg) eingebunden, helle Variante (img/logo-light.svg) fuer dunklen Hintergrund mit aufgehellten Schrift-Grautoenen - Wordmark-Text in Navbar durch echtes SVG-Logo ersetzt (Index, Impressum, Datenschutz) - Favicon von logo.png (entfernt) auf logo.svg umgestellt - Team-Sektion mit echten Mitgliedern: Dominik Knapp (Geschaeftsfuehrung), Dominik Hoefling (Administration & Entwicklung), Stefan Riederer (Support) - Foto-Platzhalter durch Initialen-Avatare in CI-Petrol ersetzt - Geschaeftsfuehrer im Impressum eingetragen (Dominik Knapp) - src/ mit CI-Handbuch und Original-Logo-SVG ins Repo aufgenommen (privat, vom Webserver auszuschliessen) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-05-04 23:12:17 +02:00
techadmin	6662ba2dd1	feat: CI-konformes Farbschema gemäß Logo & CI Handbuch (v1.1.0) - Logo-Gelb auf #DEDC1E korrigiert (Pantone 381 C) - Petrol #067391 als Sekundärakzent eingeführt (CI-Störer-/Gegenfarbe) - Generische Slate-Töne durch CI-Grautöne (#848687, #C8C9CA) ersetzt - Hintergrund von Slate-Navy auf petrol-getöntes Dunkel umgestellt - Sekundär-Button (Helpdesk im Hero) nutzt jetzt Petrol-Outline - Hero-Gradient mit Petrol-Akzent unten links ergänzt - CLAUDE.md mit CI-Quelle und Pantone-Referenzen dokumentiert Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-05-04 23:05:38 +02:00