diff --git a/website-7sys/css/accessibility.css b/website-7sys/css/accessibility.css
index 2d0c74a..d9a614d 100644
--- a/website-7sys/css/accessibility.css
+++ b/website-7sys/css/accessibility.css
@@ -1,4 +1,22 @@
-/* Accessibility */
+/* Skip Link */
+.skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: var(--accent-color);
+    color: white;
+    padding: var(--space-sm) var(--space-md);
+    z-index: var(--z-maximum);
+    transition: top var(--transition-base);
+}
+
+.skip-link:focus {
+    top: 0;
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+}
+
+/* Screen Reader Only */
 .sr-only {
     position: absolute;
     width: 1px;
@@ -7,5 +25,217 @@
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
     border: 0;
 }
+
+/* Focus Styles */
+:focus {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {
+    outline: none;
+}
+
+:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+}
+
+/* Interactive Elements */
+button,
+a,
+input,
+textarea,
+select {
+    cursor: pointer;
+}
+
+button:disabled,
+input:disabled,
+textarea:disabled,
+select:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+/* Form Validation */
+input:invalid,
+textarea:invalid {
+    border-color: var(--error-red);
+}
+
+.input-wrapper {
+    position: relative;
+}
+
+.error-message {
+    color: var(--error-red);
+    font-size: var(--font-size-sm);
+    margin-top: var(--space-xs);
+}
+
+/* High Contrast Mode */
+@media (forced-colors: active) {
+    :root {
+        --accent-color: CanvasText;
+        --text-color: CanvasText;
+        --bg-primary: Canvas;
+    }
+    
+    .service-card,
+    .vision-item {
+        border: 1px solid CanvasText;
+    }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+    
+    .animate-in,
+    .fade-in-scroll,
+    .service-card:hover,
+    .shooting-star {
+        animation: none !important;
+        transform: none !important;
+    }
+}
+
+/* Color Contrast */
+.light-theme {
+    --text-color: #333333; /* WCAG AAA compliant */
+}
+
+.dark-theme {
+    --text-color: #F2F2F2; /* WCAG AAA compliant */
+}
+
+/* Form Labels */
+label {
+    display: block;
+    margin-bottom: var(--space-xs);
+    font-weight: 500;
+}
+
+/* ARIA States */
+[aria-invalid="true"] {
+    border-color: var(--error-red);
+}
+
+[aria-busy="true"] {
+    cursor: progress;
+}
+
+[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+/* Keyboard Navigation */
+a:focus,
+button:focus,
+input:focus,
+textarea:focus,
+select:focus,
+[tabindex="0"]:focus {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px rgba(21, 52, 209, 0.2);
+}
+
+/* Form Feedback */
+.form-feedback {
+    padding: var(--space-sm);
+    border-radius: var(--border-radius-sm);
+    margin-top: var(--space-md);
+}
+
+.form-feedback.success {
+    background-color: rgba(76, 175, 80, 0.1);
+    color: var(--success-green);
+}
+
+.form-feedback.error {
+    background-color: rgba(244, 67, 54, 0.1);
+    color: var(--error-red);
+}
+
+/* Loading States */
+.loading {
+    position: relative;
+}
+
+.loading::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Input Icons */
+.input-wrapper i {
+    position: absolute;
+    left: var(--space-sm);
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-color);
+    opacity: 0.7;
+}
+
+.input-wrapper input,
+.input-wrapper textarea {
+    padding-left: calc(var(--space-lg) + var(--space-sm));
+}
+
+/* Cookie Consent */
+.cookie-consent {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--bg-primary);
+    padding: var(--space-lg);
+    box-shadow: var(--shadow-lg);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    gap: var(--space-md);
+    z-index: var(--z-modal);
+}
+
+.cookie-buttons {
+    display: flex;
+    gap: var(--space-sm);
+}
+
+.cookie-button {
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--border-radius-sm);
+    border: none;
+    font-weight: 500;
+    transition: var(--transition-base);
+}
+
+.cookie-button.accept {
+    background: var(--accent-color);
+    color: white;
+}
+
+.cookie-button.reject {
+    background: transparent;
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+}
diff --git a/website-7sys/css/animations.css b/website-7sys/css/animations.css
index c10f8f1..fbcffb0 100644
--- a/website-7sys/css/animations.css
+++ b/website-7sys/css/animations.css
@@ -1,9 +1,181 @@
-/* Animations */
+/* Base Animations */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
 }
 
-@keyframes spin {
-    to { transform: translateY(-50%) rotate(360deg); }
+@keyframes fadeInLeft {
+    from { opacity: 0; transform: translateX(-20px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes fadeInRight {
+    from { opacity: 0; transform: translateX(20px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes scaleIn {
+    from { opacity: 0; transform: scale(0.9); }
+    to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Loading Spinner */
+@keyframes spinnerRotate {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Shooting Star Animation */
+@keyframes shootingStar {
+    0% {
+        transform: translateX(-100%) translateY(0) rotate(-45deg);
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(200%) translateY(300%) rotate(-45deg);
+        opacity: 0;
+    }
+}
+
+/* Stars Twinkling */
+@keyframes twinkle {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
+}
+
+/* Scroll Progress */
+@keyframes progressGrow {
+    from { transform: scaleX(0); }
+    to { transform: scaleX(1); }
+}
+
+/* Button Hover Effect */
+@keyframes buttonPulse {
+    0% { box-shadow: 0 0 0 0 rgba(21, 52, 209, 0.4); }
+    70% { box-shadow: 0 0 0 10px rgba(21, 52, 209, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(21, 52, 209, 0); }
+}
+
+/* Service Card Hover */
+@keyframes cardFloat {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+    100% { transform: translateY(0); }
+}
+
+/* Icon Animations */
+@keyframes iconBounce {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.2); }
+}
+
+/* Form Success Animation */
+@keyframes checkmark {
+    0% { transform: scale(0); }
+    50% { transform: scale(1.2); }
+    100% { transform: scale(1); }
+}
+
+/* Cookie Consent Slide */
+@keyframes slideUp {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+}
+
+/* Animation Classes */
+.animate-in {
+    opacity: 0;
+    animation: fadeIn 0.6s var(--transition-base) forwards;
+}
+
+.delay-1 {
+    animation-delay: 0.2s;
+}
+
+.delay-2 {
+    animation-delay: 0.4s;
+}
+
+.delay-3 {
+    animation-delay: 0.6s;
+}
+
+/* Scroll Animations */
+.fade-in-scroll {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.fade-in-scroll.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Loading States */
+.loading-spinner {
+    display: none;
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--text-color);
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: spinnerRotate 0.8s linear infinite;
+}
+
+/* Interactive Elements */
+.service-card {
+    transition: transform var(--transition-base);
+}
+
+.service-card:hover {
+    animation: cardFloat 2s ease-in-out infinite;
+}
+
+.service-icon i {
+    transition: transform var(--transition-base);
+}
+
+.service-card:hover .service-icon i {
+    animation: iconBounce 0.5s ease-in-out;
+}
+
+/* Stars Background */
+.stars {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.star {
+    position: absolute;
+    background: white;
+    border-radius: 50%;
+    animation: twinkle 1.5s infinite;
+}
+
+.shooting-star {
+    position: absolute;
+    width: 100px;
+    height: 2px;
+    background: linear-gradient(90deg, white, transparent);
+    animation: shootingStar 2s linear infinite;
+    animation-delay: 1s;
+}
+
+/* Scroll Progress Bar */
+.scroll-progress {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: var(--accent-color);
+    transform-origin: left;
+    z-index: var(--z-maximum);
 }
diff --git a/website-7sys/css/buttons.css b/website-7sys/css/buttons.css
index d7ba04d..0b0b6c5 100644
--- a/website-7sys/css/buttons.css
+++ b/website-7sys/css/buttons.css
@@ -1,42 +1,201 @@
-/* Buttons */
-.cta-button {
-    display: inline-block;
-    padding: 1rem 2rem;
-    background-color: var(--accent-color);
-    color: white;
-    text-decoration: none;
-    border-radius: 5px;
-    transition: var(--transition);
+/* Base Button Styles */
+.button,
+.cta-button,
+.submit-button,
+.icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-sm) var(--space-lg);
+    border-radius: var(--border-radius-md);
     font-weight: 600;
+    transition: all var(--transition-base);
+    border: none;
+    cursor: pointer;
+    font-family: var(--font-primary);
+    position: relative;
+    overflow: hidden;
+}
+
+/* CTA Button */
+.cta-button {
+    background: var(--accent-color);
+    color: white;
+    font-size: var(--font-size-lg);
+    padding: var(--space-md) var(--space-xl);
+    text-decoration: none;
+    gap: var(--space-sm);
 }
 
 .cta-button:hover {
     transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 12px rgba(21, 52, 209, 0.2);
 }
 
-.cta-button:focus {
-    outline: 2px solid var(--text-color);
-    outline-offset: 2px;
+.cta-button:active {
+    transform: translateY(0);
 }
 
+.cta-button i {
+    transition: transform var(--transition-base);
+}
+
+.cta-button:hover i {
+    transform: translateX(4px);
+}
+
+/* Submit Button */
 .submit-button {
-    padding: 1rem;
-    background-color: var(--accent-color);
+    background: var(--accent-color);
     color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: var(--transition);
+    width: 100%;
+    padding: var(--space-md);
     position: relative;
-    font-weight: 600;
 }
 
 .submit-button:hover {
-    transform: translateY(-2px);
+    background: var(--accent-blue);
 }
 
 .submit-button:disabled {
-    opacity: 0.7;
+    background: var(--border-color);
     cursor: not-allowed;
 }
+
+.submit-button .button-text {
+    transition: opacity var(--transition-base);
+}
+
+.submit-button .loading-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* Icon Button */
+.icon-button {
+    background: transparent;
+    color: var(--text-color);
+    padding: var(--space-sm);
+    border-radius: var(--border-radius-full);
+    width: 40px;
+    height: 40px;
+}
+
+.icon-button:hover {
+    background: var(--card-bg);
+}
+
+.icon-button i {
+    font-size: var(--font-size-lg);
+}
+
+/* Cookie Consent Buttons */
+.cookie-button {
+    font-size: var(--font-size-sm);
+    padding: var(--space-sm) var(--space-lg);
+    border-radius: var(--border-radius-sm);
+    font-weight: 500;
+    transition: var(--transition-base);
+}
+
+.cookie-button.accept {
+    background: var(--accent-color);
+    color: white;
+}
+
+.cookie-button.accept:hover {
+    background: var(--accent-blue);
+}
+
+.cookie-button.reject {
+    background: transparent;
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+}
+
+.cookie-button.reject:hover {
+    background: var(--card-bg);
+}
+
+/* Footer Links */
+.footer-link {
+    color: var(--text-color);
+    text-decoration: none;
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--border-radius-sm);
+    transition: var(--transition-base);
+}
+
+.footer-link:hover {
+    background: var(--card-bg);
+}
+
+/* Button Ripple Effect */
+.button::after,
+.cta-button::after,
+.submit-button::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.3s ease-out, height 0.3s ease-out;
+}
+
+.button:active::after,
+.cta-button:active::after,
+.submit-button:active::after {
+    width: 200%;
+    height: 200%;
+    opacity: 0;
+}
+
+/* Focus States */
+.button:focus-visible,
+.cta-button:focus-visible,
+.submit-button:focus-visible,
+.icon-button:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+}
+
+/* Loading State */
+.submit-button[aria-busy="true"] {
+    cursor: progress;
+}
+
+.submit-button[aria-busy="true"] .button-text {
+    opacity: 0;
+}
+
+.submit-button[aria-busy="true"] .loading-spinner {
+    display: block;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .cta-button {
+        padding: var(--space-sm) var(--space-lg);
+        font-size: var(--font-size-base);
+    }
+    
+    .cookie-button {
+        padding: var(--space-xs) var(--space-md);
+    }
+}
+
+/* High Contrast Mode Support */
+@media (forced-colors: active) {
+    .button,
+    .cta-button,
+    .submit-button,
+    .icon-button {
+        border: 1px solid currentColor;
+    }
+}
diff --git a/website-7sys/css/contact.css b/website-7sys/css/contact.css
index 826e733..7455edb 100644
--- a/website-7sys/css/contact.css
+++ b/website-7sys/css/contact.css
@@ -1,112 +1,398 @@
 /* Contact Section */
 .contact {
-    padding: 5rem 0;
+    padding: var(--space-2xl) 0;
+    background: var(--bg-primary);
+    position: relative;
 }
 
+/* Section Title */
+.contact .section-title {
+    text-align: center;
+    font-size: var(--font-size-3xl);
+    margin-bottom: var(--space-2xl);
+    color: var(--text-color);
+    position: relative;
+    display: inline-block;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.contact .section-title::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        var(--accent-color),
+        transparent
+    );
+}
+
+/* Contact Grid */
 .contact-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
-    margin-top: 3rem;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-2xl);
+    padding: 0 var(--space-md);
 }
 
+/* Contact Form */
 .contact-form {
-    display: grid;
-    gap: 1.5rem;
+    background: var(--card-bg);
+    padding: var(--space-xl);
+    border-radius: var(--border-radius-lg);
+    border: 1px solid var(--border-color);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+}
+
+.contact-form:hover {
+    transform: translateY(-2px);
 }
 
 .form-group {
-    display: flex;
-    flex-direction: column;
+    margin-bottom: var(--space-lg);
+    position: relative;
 }
 
 .form-group label {
-    margin-bottom: 0.5rem;
-    font-weight: 600;
-}
-
-.form-group input,
-.form-group textarea {
-    padding: 0.8rem;
-    border: 1px solid var(--accent-color);
-    border-radius: 5px;
-    background-color: var(--card-bg);
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    margin-bottom: var(--space-xs);
     color: var(--text-color);
-    transition: var(--transition);
+    font-weight: 500;
 }
 
-.form-group input:focus,
-.form-group textarea:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--accent-color);
+.required-field::after {
+    content: '*';
+    color: var(--error-red);
+    margin-left: var(--space-xs);
 }
 
-.form-group input:invalid,
-.form-group textarea:invalid {
-    border-color: #ff4444;
+.field-hint {
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+    margin-top: var(--space-xs);
 }
 
-.loading-spinner {
-    display: none;
-    width: 20px;
-    height: 20px;
-    border: 2px solid #ffffff;
-    border-radius: 50%;
-    border-top-color: transparent;
-    animation: spin 1s linear infinite;
+.input-wrapper {
+    position: relative;
+}
+
+.input-wrapper i {
     position: absolute;
-    right: 1rem;
+    left: var(--space-md);
     top: 50%;
     transform: translateY(-50%);
+    color: var(--text-color);
+    opacity: 0.7;
+    transition: color var(--transition-base);
 }
 
+.input-wrapper textarea + i {
+    top: var(--space-md);
+    transform: none;
+}
+
+.input-wrapper input,
+.input-wrapper textarea {
+    width: 100%;
+    padding: var(--space-md);
+    padding-left: calc(var(--space-md) * 2 + 16px);
+    background: var(--bg-primary);
+    border: 2px solid var(--border-color);
+    border-radius: var(--border-radius-md);
+    color: var(--text-color);
+    font-family: var(--font-primary);
+    transition: all var(--transition-base);
+}
+
+.input-wrapper textarea {
+    min-height: 150px;
+    resize: vertical;
+}
+
+.input-wrapper input:hover,
+.input-wrapper textarea:hover {
+    border-color: var(--accent-color);
+}
+
+.input-wrapper input:focus,
+.input-wrapper textarea:focus {
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px rgba(21, 52, 209, 0.1);
+}
+
+.input-wrapper input:focus + i,
+.input-wrapper textarea:focus + i {
+    color: var(--accent-color);
+}
+
+/* Character Counter */
+.char-counter {
+    position: absolute;
+    right: var(--space-sm);
+    bottom: var(--space-xs);
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+}
+
+/* Input States */
+.input-wrapper.valid input,
+.input-wrapper.valid textarea {
+    border-color: var(--success-green);
+}
+
+.input-wrapper.invalid input,
+.input-wrapper.invalid textarea {
+    border-color: var(--error-red);
+}
+
+.error-message {
+    color: var(--error-red);
+    font-size: var(--font-size-sm);
+    margin-top: var(--space-xs);
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+}
+
+/* Submit Button */
+.submit-button {
+    width: 100%;
+    padding: var(--space-md) var(--space-lg);
+    background: var(--accent-color);
+    color: white;
+    border: none;
+    border-radius: var(--border-radius-md);
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-sm);
+    transition: all var(--transition-base);
+    position: relative;
+    overflow: hidden;
+}
+
+.submit-button:hover {
+    background: var(--accent-color-dark);
+    transform: translateY(-1px);
+}
+
+.submit-button:active {
+    transform: translateY(1px);
+}
+
+/* Form Feedback */
 .form-feedback {
+    margin-top: var(--space-md);
+    padding: var(--space-md);
+    border-radius: var(--border-radius-md);
+    font-weight: 500;
     display: none;
-    padding: 1rem;
-    border-radius: 5px;
-    margin-top: 1rem;
+    animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .form-feedback.success {
-    display: block;
-    background-color: rgba(40, 167, 69, 0.1);
-    border: 1px solid #28a745;
-    color: #28a745;
+    background: rgba(76, 175, 80, 0.1);
+    color: var(--success-green);
+    border: 1px solid var(--success-green);
 }
 
 .form-feedback.error {
-    display: block;
-    background-color: rgba(220, 53, 69, 0.1);
-    border: 1px solid #dc3545;
-    color: #dc3545;
+    background: rgba(244, 67, 54, 0.1);
+    color: var(--error-red);
+    border: 1px solid var(--error-red);
 }
 
+/* Contact Info */
 .contact-info {
-    padding: 2rem;
-    background-color: var(--card-bg);
-    border-radius: 10px;
+    padding: var(--space-xl);
+    background: var(--card-bg);
+    border-radius: var(--border-radius-lg);
+    border: 1px solid var(--border-color);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+}
+
+.contact-info:hover {
+    transform: translateY(-2px);
 }
 
 .contact-info h3 {
-    margin-bottom: 1.5rem;
-    color: var(--accent-color);
-}
-
-.contact-info p {
-    margin-bottom: 1rem;
-}
-
-.contact-info i {
-    margin-right: 0.5rem;
-    color: var(--accent-color);
-}
-
-.contact-info a {
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--space-xl);
     color: var(--text-color);
-    text-decoration: none;
-    transition: var(--transition);
+    position: relative;
+    display: inline-block;
 }
 
-.contact-info a:hover {
-    color: var(--accent-color);
+.contact-info h3::after {
+    content: '';
+    position: absolute;
+    bottom: -8px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--accent-color);
+    opacity: 0.7;
+}
+
+.info-grid {
+    display: grid;
+    gap: var(--space-lg);
+}
+
+.info-item {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-md);
+    transition: transform var(--transition-base);
+    padding: var(--space-sm);
+    border-radius: var(--border-radius-md);
+}
+
+.info-item:hover {
+    transform: translateX(var(--space-xs));
+    background: var(--bg-primary);
+}
+
+.info-item i {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    background: var(--accent-color);
+    border-radius: var(--border-radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    transition: transform var(--transition-base);
+}
+
+.info-item:hover i {
+    transform: scale(1.1);
+}
+
+.info-content {
+    flex: 1;
+}
+
+.info-content p {
+    color: var(--text-color);
+    margin-bottom: var(--space-xs);
+    line-height: 1.5;
+}
+
+.info-content p:last-child {
+    margin-bottom: 0;
+}
+
+.info-subtitle {
+    color: var(--text-muted);
+    font-size: var(--font-size-sm);
+    font-style: italic;
+}
+
+.info-item a {
+    color: var(--accent-color);
+    text-decoration: none;
+    transition: color var(--transition-base);
+    font-weight: 500;
+}
+
+.info-item a:hover {
+    color: var(--accent-color-dark);
+    text-decoration: underline;
+}
+
+/* Loading State */
+.submit-button .loading-spinner {
+    display: none;
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: white;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 968px) {
+    .contact-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-xl);
+    }
+
+    .info-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    }
+}
+
+@media (max-width: 768px) {
+    .contact {
+        padding: var(--space-xl) 0;
+    }
+
+    .contact .section-title {
+        font-size: var(--font-size-2xl);
+        margin-bottom: var(--space-xl);
+    }
+
+    .contact-form,
+    .contact-info {
+        padding: var(--space-lg);
+    }
+
+    .info-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* High Contrast Mode */
+@media (forced-colors: active) {
+    .contact-form,
+    .contact-info {
+        border: 1px solid CanvasText;
+    }
+
+    .info-item i {
+        border: 1px solid CanvasText;
+    }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    .input-wrapper input,
+    .input-wrapper textarea,
+    .contact-form,
+    .contact-info,
+    .info-item,
+    .info-item i {
+        transition: none;
+    }
 }
diff --git a/website-7sys/css/footer.css b/website-7sys/css/footer.css
index b666cf5..daeb526 100644
--- a/website-7sys/css/footer.css
+++ b/website-7sys/css/footer.css
@@ -1,22 +1,180 @@
 /* Footer */
 footer {
-    padding: 2rem 0;
-    background-color: var(--card-bg);
-    text-align: center;
+    background: var(--bg-primary);
+    border-top: 1px solid var(--border-color);
+    padding: var(--space-xl) 0;
+    margin-top: var(--space-2xl);
 }
 
-footer .container {
+/* Footer Content */
+.footer-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-md);
 }
 
-.impressum {
+/* Footer Left */
+.footer-left {
+    color: var(--text-color);
+    opacity: 0.9;
+}
+
+/* Footer Right */
+.footer-right {
+    display: flex;
+    gap: var(--space-lg);
+}
+
+/* Footer Links */
+.footer-link {
     color: var(--text-color);
     text-decoration: none;
-    transition: var(--transition);
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--border-radius-sm);
+    transition: all var(--transition-base);
+    position: relative;
 }
 
-.impressum:hover {
+.footer-link::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: var(--space-sm);
+    right: var(--space-sm);
+    height: 2px;
+    background: var(--accent-color);
+    transform: scaleX(0);
+    transform-origin: center;
+    transition: transform var(--transition-base);
+}
+
+.footer-link:hover {
     color: var(--accent-color);
 }
+
+.footer-link:hover::after {
+    transform: scaleX(1);
+}
+
+/* Social Links */
+.social-links {
+    display: flex;
+    gap: var(--space-md);
+    margin-top: var(--space-lg);
+}
+
+.social-link {
+    width: 36px;
+    height: 36px;
+    border-radius: var(--border-radius-full);
+    background: var(--card-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-color);
+    text-decoration: none;
+    transition: all var(--transition-base);
+}
+
+.social-link:hover {
+    background: var(--accent-color);
+    color: white;
+    transform: translateY(-2px);
+}
+
+/* Back to Top Button */
+.back-to-top {
+    position: fixed;
+    bottom: var(--space-lg);
+    right: var(--space-lg);
+    width: 44px;
+    height: 44px;
+    background: var(--accent-color);
+    color: white;
+    border: none;
+    border-radius: var(--border-radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(10px);
+    transition: all var(--transition-base);
+    z-index: var(--z-sticky);
+}
+
+.back-to-top.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.back-to-top:hover {
+    background: var(--accent-blue);
+    transform: translateY(-2px);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .footer-content {
+        flex-direction: column;
+        text-align: center;
+        gap: var(--space-lg);
+    }
+
+    .footer-right {
+        flex-direction: column;
+        gap: var(--space-md);
+    }
+
+    .back-to-top {
+        bottom: var(--space-md);
+        right: var(--space-md);
+    }
+}
+
+/* High Contrast Mode */
+@media (forced-colors: active) {
+    footer {
+        border-top: 1px solid CanvasText;
+    }
+
+    .footer-link::after {
+        background: CanvasText;
+    }
+
+    .social-link {
+        border: 1px solid CanvasText;
+    }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    .footer-link,
+    .social-link,
+    .back-to-top {
+        transition: none;
+    }
+
+    .footer-link:hover::after {
+        transition: none;
+    }
+
+    .social-link:hover,
+    .back-to-top:hover {
+        transform: none;
+    }
+}
+
+/* Dark Theme Specific */
+.dark-theme footer {
+    background: var(--dark-main);
+}
+
+/* Light Theme Specific */
+.light-theme footer {
+    background: var(--light-main);
+}
diff --git a/website-7sys/css/header.css b/website-7sys/css/header.css
index 5b17602..9681527 100644
--- a/website-7sys/css/header.css
+++ b/website-7sys/css/header.css
@@ -1,55 +1,171 @@
-/* Header and Navigation */
+/* Header */
 header {
     position: fixed;
-    width: 100%;
     top: 0;
-    z-index: 1000;
-    background: linear-gradient(to bottom, 
-        rgba(20, 20, 20, 0.95) 0%,
-        var(--bg-primary) 100%
-    );
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-
-/* Light theme gradient override */
-.light-theme header {
-    background: linear-gradient(to bottom, 
-        rgba(255, 255, 255, 0.95) 0%,
-        var(--bg-primary) 100%
-    );
+    left: 0;
+    width: 100%;
+    z-index: var(--z-sticky);
+    background: rgba(var(--bg-primary), 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--border-color);
+    transition: all var(--transition-base);
 }
 
+/* Main Navigation */
 .main-nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem;
-    max-width: 1200px;
+    height: 70px;
+    padding: 0 var(--space-xl);
+    max-width: 1400px;
     margin: 0 auto;
 }
 
+/* Logo */
 .logo {
-    font-size: 2rem;
-    font-weight: bold;
+    font-size: var(--font-size-2xl);
+    font-weight: 700;
+    color: var(--text-color);
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+}
+
+.logo-text {
     color: var(--accent-color);
 }
 
+.logo-sys {
+    background: linear-gradient(
+        135deg,
+        var(--accent-color) 0%,
+        var(--accent-purple) 100%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* Navigation Controls */
+.nav-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+}
+
+/* Theme Toggle */
 #theme-toggle {
-    background: none;
+    background: transparent;
     border: none;
     color: var(--text-color);
-    font-size: 1.5rem;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--border-radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
-    padding: 0.5rem;
-    transition: var(--transition);
+    transition: all var(--transition-base);
 }
 
 #theme-toggle:hover {
-    color: var(--accent-color);
-    transform: scale(1.1);
+    background: var(--card-bg);
 }
 
-#theme-toggle:focus {
-    outline: 2px solid var(--accent-color);
-    border-radius: 4px;
+#theme-toggle i {
+    font-size: var(--font-size-lg);
+    transition: transform var(--transition-base);
+}
+
+#theme-toggle:hover i {
+    transform: rotate(15deg);
+}
+
+/* Scroll Progress */
+.scroll-progress {
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--accent-color);
+    transform-origin: left;
+    transform: scaleX(0);
+    transition: transform var(--transition-base);
+}
+
+/* Header Scroll State */
+header.scrolled {
+    box-shadow: var(--shadow-md);
+    background: var(--bg-primary);
+}
+
+/* Skip Link */
+.skip-link {
+    position: fixed;
+    top: -100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--accent-color);
+    color: white;
+    padding: var(--space-sm) var(--space-md);
+    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
+    text-decoration: none;
+    z-index: var(--z-maximum);
+    transition: top var(--transition-base);
+}
+
+.skip-link:focus {
+    top: 0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .main-nav {
+        padding: 0 var(--space-md);
+    }
+
+    .logo {
+        font-size: var(--font-size-xl);
+    }
+}
+
+/* High Contrast Mode */
+@media (forced-colors: active) {
+    header {
+        border-bottom: 1px solid CanvasText;
+    }
+
+    .logo-text,
+    .logo-sys {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    header,
+    .scroll-progress,
+    #theme-toggle,
+    .skip-link {
+        transition: none;
+    }
+
+    #theme-toggle:hover i {
+        transform: none;
+    }
+}
+
+/* Dark Theme Specific */
+.dark-theme header {
+    background: rgba(10, 10, 10, 0.8);
+}
+
+/* Light Theme Specific */
+.light-theme header {
+    background: rgba(242, 242, 242, 0.8);
 }
diff --git a/website-7sys/css/hero.css b/website-7sys/css/hero.css
index 7c886ec..862a97d 100644
--- a/website-7sys/css/hero.css
+++ b/website-7sys/css/hero.css
@@ -1,37 +1,175 @@
 /* Hero Section */
 .hero {
     position: relative;
-    height: 100vh;
+    min-height: 80vh;
     display: flex;
     align-items: center;
+    justify-content: center;
     text-align: center;
+    padding: var(--space-2xl) 0;
+    background: linear-gradient(
+        135deg,
+        var(--bg-primary) 0%,
+        rgba(21, 52, 209, 0.1) 100%
+    );
     overflow: hidden;
-    padding-top: 60px;
 }
 
+/* Stars Background */
 .stars {
     position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    background: radial-gradient(circle at center, var(--accent-color) 0.1px, transparent 1px);
-    background-size: 50px 50px;
-    animation: stars 20s linear infinite;
-    opacity: 0.3;
+    pointer-events: none;
+    z-index: var(--z-negative);
 }
 
-@keyframes stars {
-    0% { transform: translateY(0); }
-    100% { transform: translateY(-50px); }
+.star {
+    position: absolute;
+    background: white;
+    border-radius: 50%;
+    opacity: 0.5;
+}
+
+.shooting-star {
+    position: absolute;
+    top: 20%;
+    left: -100px;
+    width: 100px;
+    height: 2px;
+    background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0.8),
+        transparent
+    );
+    transform: rotate(-45deg);
+    z-index: var(--z-negative);
+}
+
+/* Hero Content */
+.hero .container {
+    position: relative;
+    z-index: var(--z-elevate);
+    max-width: 800px;
 }
 
 .hero h1 {
-    font-size: clamp(2rem, 5vw, 3rem);
-    margin-bottom: 1rem;
-    animation: fadeIn 1s ease-out;
+    font-size: clamp(2rem, 5vw, var(--font-size-4xl));
+    font-weight: 700;
+    margin-bottom: var(--space-lg);
+    line-height: 1.2;
+    background: linear-gradient(
+        135deg,
+        var(--text-color) 0%,
+        var(--accent-color) 100%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
 }
 
 .hero p {
-    font-size: clamp(1.2rem, 3vw, 1.5rem);
-    margin-bottom: 2rem;
+    font-size: clamp(1.125rem, 2.5vw, var(--font-size-xl));
+    color: var(--text-color);
     opacity: 0.9;
+    margin-bottom: var(--space-xl);
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* CTA Container */
+.cta-container {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-md);
+}
+
+/* Animated Elements */
+.hero .animate-in {
+    opacity: 0;
+    transform: translateY(20px);
+}
+
+.hero .animate-in.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Gradient Overlay */
+.hero::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 150px;
+    background: linear-gradient(
+        to bottom,
+        transparent,
+        var(--bg-primary)
+    );
+    pointer-events: none;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .hero {
+        min-height: 70vh;
+        padding: var(--space-xl) 0;
+    }
+
+    .hero h1 {
+        font-size: var(--font-size-2xl);
+    }
+
+    .hero p {
+        font-size: var(--font-size-lg);
+        padding: 0 var(--space-md);
+    }
+
+    .cta-container {
+        flex-direction: column;
+        align-items: center;
+        padding: 0 var(--space-md);
+    }
+}
+
+/* Dark Theme Specific */
+.dark-theme .hero {
+    background: linear-gradient(
+        135deg,
+        var(--dark-main) 0%,
+        rgba(21, 52, 209, 0.15) 100%
+    );
+}
+
+/* Light Theme Specific */
+.light-theme .hero {
+    background: linear-gradient(
+        135deg,
+        var(--light-main) 0%,
+        rgba(21, 52, 209, 0.1) 100%
+    );
+}
+
+/* High Contrast Mode */
+@media (forced-colors: active) {
+    .hero h1 {
+        background: none;
+        color: CanvasText;
+    }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    .hero .animate-in {
+        transition: none;
+    }
+    
+    .shooting-star {
+        display: none;
+    }
 }
diff --git a/website-7sys/css/responsive.css b/website-7sys/css/responsive.css
index 187bbec..e5da7d1 100644
--- a/website-7sys/css/responsive.css
+++ b/website-7sys/css/responsive.css
@@ -1,51 +1,244 @@
-/* Responsive Design */
-@media (max-width: 768px) {
-    html {
-        font-size: 14px;
-    }
-    
-    .hero h1 {
-        font-size: 2rem;
-    }
-    
-    .hero p {
-        font-size: 1.2rem;
-    }
-    
-    .contact-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    footer .container {
-        flex-direction: column;
-        gap: 1rem;
+/* Base Responsive Design */
+html {
+    font-size: 16px;
+}
+
+@media (max-width: 1400px) {
+    .container {
+        max-width: 1140px;
     }
 }
 
-@media (max-width: 480px) {
+@media (max-width: 1200px) {
     .container {
-        padding: 0 15px;
+        max-width: 960px;
     }
-    
-    .service-card,
-    .vision-item {
-        padding: 1.5rem;
+
+    /* Service Grid */
+    .service-grid {
+        gap: var(--space-lg);
+    }
+}
+
+@media (max-width: 992px) {
+    .container {
+        max-width: 720px;
+    }
+
+    /* Typography */
+    h1 {
+        font-size: var(--font-size-3xl);
+    }
+
+    h2 {
+        font-size: var(--font-size-2xl);
+    }
+
+    h3 {
+        font-size: var(--font-size-xl);
+    }
+
+    /* Hero Section */
+    .hero {
+        min-height: 70vh;
+    }
+
+    /* Contact Grid */
+    .contact-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-xl);
+    }
+}
+
+@media (max-width: 768px) {
+    html {
+        font-size: 15px;
+    }
+
+    .container {
+        max-width: 540px;
+        padding: 0 var(--space-md);
+    }
+
+    /* Header */
+    .main-nav {
+        padding: 0 var(--space-md);
+    }
+
+    /* Hero Section */
+    .hero {
+        min-height: 60vh;
+        padding: var(--space-2xl) var(--space-md);
+    }
+
+    .hero h1 {
+        font-size: var(--font-size-2xl);
+    }
+
+    .hero p {
+        font-size: var(--font-size-lg);
+    }
+
+    /* Service Grid */
+    .service-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-lg);
+    }
+
+    /* Vision Grid */
+    .vision-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-lg);
+    }
+
+    /* Contact Form */
+    .contact-form,
+    .contact-info {
+        padding: var(--space-lg);
+    }
+
+    /* Footer */
+    .footer-content {
+        flex-direction: column;
+        text-align: center;
+        gap: var(--space-lg);
+    }
+
+    .footer-right {
+        flex-direction: column;
+        gap: var(--space-md);
+    }
+}
+
+@media (max-width: 576px) {
+    html {
+        font-size: 14px;
+    }
+
+    .container {
+        padding: 0 var(--space-md);
+    }
+
+    /* Header */
+    .logo {
+        font-size: var(--font-size-xl);
+    }
+
+    /* Hero Section */
+    .hero {
+        text-align: center;
+        padding: var(--space-xl) var(--space-md);
+    }
+
+    .hero h1 {
+        font-size: var(--font-size-xl);
+    }
+
+    .hero p {
+        font-size: var(--font-size-base);
+    }
+
+    .cta-button {
+        width: 100%;
+        justify-content: center;
+    }
+
+    /* Service Cards */
+    .service-card {
+        padding: var(--space-lg);
+    }
+
+    /* Contact Section */
+    .contact-form {
+        padding: var(--space-md);
+    }
+
+    .form-group {
+        margin-bottom: var(--space-md);
+    }
+
+    .input-wrapper input,
+    .input-wrapper textarea {
+        padding: var(--space-sm);
+        padding-left: calc(var(--space-sm) * 2 + 16px);
+    }
+
+    /* Cookie Consent */
+    .cookie-consent {
+        flex-direction: column;
+        text-align: center;
+        padding: var(--space-md);
+    }
+
+    .cookie-buttons {
+        width: 100%;
+        flex-direction: column;
+        gap: var(--space-sm);
+    }
+
+    .cookie-button {
+        width: 100%;
+    }
+}
+
+/* Height-based Media Queries */
+@media (max-height: 700px) {
+    .hero {
+        min-height: auto;
+        padding: var(--space-2xl) 0;
     }
 }
 
 /* Print Styles */
 @media print {
-    .hero {
-        height: auto;
-        padding: 2rem 0;
-    }
-    
-    .stars {
+    .hero,
+    .contact-form,
+    .cookie-consent,
+    #theme-toggle,
+    .back-to-top {
         display: none;
     }
-    
+
+    body {
+        color: black;
+        background: white;
+    }
+
+    .container {
+        max-width: none;
+        width: 100%;
+        padding: 0;
+        margin: 0;
+    }
+
+    a {
+        text-decoration: none;
+        color: black;
+    }
+
     .service-card,
-    .vision-item {
+    .vision-item,
+    .contact-info {
         break-inside: avoid;
+        page-break-inside: avoid;
+        border: 1px solid #ddd;
+    }
+}
+
+/* High Contrast Support */
+@media (forced-colors: active) {
+    .service-card,
+    .vision-item,
+    .contact-form,
+    .contact-info {
+        border: 1px solid CanvasText;
+    }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation: none !important;
+        transition: none !important;
     }
 }
diff --git a/website-7sys/css/services.css b/website-7sys/css/services.css
index d3cf01d..c550c96 100644
--- a/website-7sys/css/services.css
+++ b/website-7sys/css/services.css
@@ -1,22 +1,167 @@
 /* Services Section */
 .services {
-    padding: 5rem 0;
+    padding: var(--space-2xl) 0;
+    background: var(--bg-primary);
+    position: relative;
 }
 
+/* Section Title */
+.services .section-title {
+    text-align: center;
+    font-size: var(--font-size-3xl);
+    margin-bottom: var(--space-2xl);
+    color: var(--text-color);
+    position: relative;
+    display: inline-block;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.services .section-title::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        var(--accent-color),
+        transparent
+    );
+}
+
+/* Service Grid */
 .service-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
-    margin-top: 3rem;
+    gap: var(--space-xl);
+    padding: 0 var(--space-md);
 }
 
+/* Service Card */
+.service-card {
+    background: var(--card-bg);
+    border-radius: var(--border-radius-lg);
+    padding: var(--space-xl);
+    transition: all var(--transition-base);
+    position: relative;
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+}
+
+.service-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        135deg,
+        transparent 0%,
+        rgba(21, 52, 209, 0.05) 100%
+    );
+    opacity: 0;
+    transition: opacity var(--transition-base);
+}
+
+.service-card:hover::before {
+    opacity: 1;
+}
+
+/* Service Icon */
+.service-icon {
+    width: 60px;
+    height: 60px;
+    background: var(--accent-color);
+    border-radius: var(--border-radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: var(--space-lg);
+    position: relative;
+    overflow: hidden;
+}
+
+.service-icon i {
+    font-size: var(--font-size-2xl);
+    color: white;
+    position: relative;
+    z-index: 1;
+}
+
+.service-icon::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        135deg,
+        transparent,
+        rgba(255, 255, 255, 0.2)
+    );
+}
+
+/* Service Title */
+.service-card h3 {
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--space-md);
+    color: var(--text-color);
+    position: relative;
+}
+
+/* Service List */
+.service-card ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.service-card li {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    margin-bottom: var(--space-sm);
+    color: var(--text-color);
+    opacity: 0.9;
+}
+
+.service-card li i {
+    color: var(--accent-color);
+    font-size: var(--font-size-sm);
+}
+
+/* Hover Effects */
+.service-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+}
+
+.service-card:hover .service-icon {
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(21, 52, 209, 0.4);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(21, 52, 209, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(21, 52, 209, 0);
+    }
+}
+
+/* Animation on Scroll */
 .service-card {
-    background-color: var(--card-bg);
-    padding: 2rem;
-    border-radius: 10px;
-    transition: var(--transition);
     opacity: 0;
     transform: translateY(20px);
+    transition: opacity 0.6s ease, transform 0.6s ease;
 }
 
 .service-card.visible {
@@ -24,35 +169,45 @@
     transform: translateY(0);
 }
 
-.service-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+/* Responsive Design */
+@media (max-width: 768px) {
+    .service-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-lg);
+    }
+
+    .services {
+        padding: var(--space-xl) 0;
+    }
+
+    .services .section-title {
+        font-size: var(--font-size-2xl);
+        margin-bottom: var(--space-xl);
+    }
 }
 
-.service-card i {
-    font-size: 2.5rem;
-    color: var(--accent-color);
-    margin-bottom: 1rem;
+/* High Contrast Mode */
+@media (forced-colors: active) {
+    .service-card {
+        border: 1px solid CanvasText;
+    }
+
+    .service-icon {
+        border: 1px solid CanvasText;
+    }
 }
 
-.service-card h3 {
-    margin-bottom: 1rem;
-    color: var(--accent-color);
-}
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    .service-card {
+        transition: none;
+    }
 
-.service-card ul {
-    list-style: none;
-}
+    .service-card:hover {
+        transform: none;
+    }
 
-.service-card ul li {
-    margin-bottom: 0.5rem;
-    padding-left: 1.5rem;
-    position: relative;
-}
-
-.service-card ul li::before {
-    content: "•";
-    color: var(--accent-color);
-    position: absolute;
-    left: 0;
+    .service-card:hover .service-icon {
+        animation: none;
+    }
 }
diff --git a/website-7sys/css/variables.css b/website-7sys/css/variables.css
index e0f07a9..882bd5c 100644
--- a/website-7sys/css/variables.css
+++ b/website-7sys/css/variables.css
@@ -1,22 +1,81 @@
 :root {
+    /* Color Palette */
+    --primary-blue: #1534D1;
+    --primary-dark: #0A0A0A;
+    --primary-light: #F2F2F2;
+    --accent-blue: #2196F3;
+    --accent-purple: #7C4DFF;
+    --success-green: #4CAF50;
+    --warning-yellow: #FFC107;
+    --error-red: #F44336;
+    
     /* Dark Theme Variables */
-    --dark-main: #0A0A0A;
-    --dark-accent: #1534D1;
-    --dark-text: #F2F2F2;
+    --dark-main: var(--primary-dark);
+    --dark-accent: var(--primary-blue);
+    --dark-text: var(--primary-light);
     --dark-card: rgba(255, 255, 255, 0.05);
+    --dark-card-hover: rgba(255, 255, 255, 0.08);
+    --dark-border: rgba(255, 255, 255, 0.1);
     
     /* Light Theme Variables */
-    --light-main: #F2F2F2;
-    --light-accent: #1534D1;
-    --light-text: #333333;
-    --light-card: rgba(0, 0, 0, 0.05);
+    --light-main: #FFFFFF;
+    --light-accent: #0D47A1;
+    --light-text: #1A1A1A;
+    --light-card: rgba(0, 0, 0, 0.03);
+    --light-card-hover: rgba(0, 0, 0, 0.06);
+    --light-border: rgba(0, 0, 0, 0.15);
     
     /* Current Theme Variables */
     --bg-primary: var(--dark-main);
     --accent-color: var(--dark-accent);
     --text-color: var(--dark-text);
     --card-bg: var(--dark-card);
-    --transition: all 0.3s ease;
+    --card-hover: var(--dark-card-hover);
+    --border-color: var(--dark-border);
+    
+    /* Typography */
+    --font-primary: 'Inter', system-ui, sans-serif;
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 1.875rem;
+    --font-size-4xl: 2.25rem;
+    
+    /* Spacing */
+    --space-xs: 0.25rem;
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+    --space-2xl: 3rem;
+    
+    /* Borders */
+    --border-radius-sm: 4px;
+    --border-radius-md: 8px;
+    --border-radius-lg: 12px;
+    --border-radius-full: 9999px;
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+    
+    /* Transitions */
+    --transition-fast: 150ms ease;
+    --transition-base: 300ms ease;
+    --transition-slow: 500ms ease;
+    
+    /* Z-index */
+    --z-negative: -1;
+    --z-elevate: 1;
+    --z-sticky: 100;
+    --z-drawer: 200;
+    --z-modal: 300;
+    --z-popover: 400;
+    --z-maximum: 999;
 }
 
 /* Theme Classes */
@@ -25,4 +84,6 @@
     --accent-color: var(--light-accent);
     --text-color: var(--light-text);
     --card-bg: var(--light-card);
+    --card-hover: var(--light-card-hover);
+    --border-color: var(--light-border);
 }
diff --git a/website-7sys/css/vision.css b/website-7sys/css/vision.css
index 9fe6729..50b82c0 100644
--- a/website-7sys/css/vision.css
+++ b/website-7sys/css/vision.css
@@ -1,22 +1,186 @@
 /* Vision Section */
 .vision {
-    padding: 5rem 0;
-    background-color: var(--card-bg);
+    padding: var(--space-2xl) 0;
+    background: var(--bg-primary);
+    position: relative;
+    overflow: hidden;
 }
 
+/* Section Title */
+.vision .section-title {
+    text-align: center;
+    font-size: var(--font-size-3xl);
+    margin-bottom: var(--space-2xl);
+    color: var(--text-color);
+    position: relative;
+    display: inline-block;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.vision .section-title::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        var(--accent-color),
+        transparent
+    );
+}
+
+/* Vision Grid */
 .vision-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 2rem;
-    margin-top: 3rem;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--space-xl);
+    padding: 0 var(--space-md);
 }
 
+/* Vision Item */
 .vision-item {
+    background: var(--card-bg);
+    border-radius: var(--border-radius-lg);
+    padding: var(--space-xl);
+    transition: all var(--transition-base);
+    position: relative;
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     text-align: center;
-    padding: 2rem;
+}
+
+.vision-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        135deg,
+        transparent 0%,
+        rgba(21, 52, 209, 0.05) 100%
+    );
+    opacity: 0;
+    transition: opacity var(--transition-base);
+}
+
+.vision-item:hover::before {
+    opacity: 1;
+}
+
+/* Vision Icon */
+.vision-icon {
+    width: 80px;
+    height: 80px;
+    background: var(--accent-color);
+    border-radius: var(--border-radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: var(--space-lg);
+    position: relative;
+    overflow: hidden;
+}
+
+.vision-icon i {
+    font-size: var(--font-size-3xl);
+    color: white;
+    position: relative;
+    z-index: 1;
+}
+
+.vision-icon::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        135deg,
+        transparent,
+        rgba(255, 255, 255, 0.2)
+    );
+}
+
+/* Vision Content */
+.vision-item h3 {
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--space-md);
+    color: var(--text-color);
+    position: relative;
+}
+
+.vision-item p {
+    color: var(--text-color);
+    opacity: 0.9;
+    margin-bottom: var(--space-lg);
+}
+
+/* Vision Details */
+.vision-details {
+    margin-top: auto;
+    width: 100%;
+}
+
+.vision-details ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    text-align: left;
+}
+
+.vision-details li {
+    color: var(--text-color);
+    opacity: 0.9;
+    padding: var(--space-xs) 0;
+    position: relative;
+    padding-left: var(--space-lg);
+}
+
+.vision-details li::before {
+    content: '→';
+    position: absolute;
+    left: 0;
+    color: var(--accent-color);
+    font-weight: bold;
+}
+
+/* Hover Effects */
+.vision-item:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+}
+
+.vision-item:hover .vision-icon {
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(21, 52, 209, 0.4);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(21, 52, 209, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(21, 52, 209, 0);
+    }
+}
+
+/* Animation on Scroll */
+.vision-item {
     opacity: 0;
     transform: translateY(20px);
-    transition: var(--transition);
+    transition: opacity 0.6s ease, transform 0.6s ease;
 }
 
 .vision-item.visible {
@@ -24,8 +188,54 @@
     transform: translateY(0);
 }
 
-.vision-item i {
-    font-size: 3rem;
-    color: var(--accent-color);
-    margin-bottom: 1rem;
+/* Responsive Design */
+@media (max-width: 768px) {
+    .vision-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-lg);
+    }
+
+    .vision {
+        padding: var(--space-xl) 0;
+    }
+
+    .vision .section-title {
+        font-size: var(--font-size-2xl);
+        margin-bottom: var(--space-xl);
+    }
+
+    .vision-icon {
+        width: 60px;
+        height: 60px;
+    }
+
+    .vision-icon i {
+        font-size: var(--font-size-2xl);
+    }
+}
+
+/* High Contrast Mode */
+@media (forced-colors: active) {
+    .vision-item {
+        border: 1px solid CanvasText;
+    }
+
+    .vision-icon {
+        border: 1px solid CanvasText;
+    }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    .vision-item {
+        transition: none;
+    }
+
+    .vision-item:hover {
+        transform: none;
+    }
+
+    .vision-item:hover .vision-icon {
+        animation: none;
+    }
 }
diff --git a/website-7sys/datenschutz.html b/website-7sys/datenschutz.html
new file mode 100644
index 0000000..c209c13
--- /dev/null
+++ b/website-7sys/datenschutz.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="7SYS - Datenschutzerklärung und Informationen zum Umgang mit Ihren Daten">
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔒</text></svg>">
+    
+    <!-- Preload Critical Assets -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    
+    <title>Datenschutzerklärung - 7SYS</title>
+    
+    <!-- CSS Files -->
+    <link rel="stylesheet" href="css/variables.css">
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/accessibility.css">
+    <link rel="stylesheet" href="css/animations.css">
+    <link rel="stylesheet" href="css/header.css">
+    <link rel="stylesheet" href="css/buttons.css">
+    <link rel="stylesheet" href="css/footer.css">
+    <link rel="stylesheet" href="css/responsive.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    <style>
+        .datenschutz-section {
+            padding: 80px 0;
+            min-height: calc(100vh - 200px);
+        }
+
+        .datenschutz-content {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .datenschutz-section h1 {
+            font-size: 2.5rem;
+            margin-bottom: 2rem;
+            color: var(--text-primary);
+        }
+
+        .datenschutz-section h2 {
+            font-size: 1.5rem;
+            margin: 2rem 0 1rem;
+            color: var(--text-primary);
+        }
+
+        .datenschutz-section p {
+            margin-bottom: 1rem;
+            line-height: 1.6;
+            color: var(--text-secondary);
+        }
+
+        .privacy-section {
+            background: var(--bg-secondary);
+            padding: 20px;
+            border-radius: 8px;
+            margin: 20px 0;
+        }
+
+        .privacy-section ul {
+            list-style-type: disc;
+            margin-left: 20px;
+            margin-bottom: 1rem;
+            color: var(--text-secondary);
+        }
+
+        .privacy-section li {
+            margin-bottom: 0.5rem;
+        }
+    </style>
+</head>
+<body class="dark-theme">
+    <!-- Skip to main content -->
+    <a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
+
+    <!-- Progress Bar -->
+    <div class="scroll-progress" aria-hidden="true"></div>
+
+    <header>
+        <nav class="main-nav">
+            <div class="logo" role="banner">
+                <a href="index.html">
+                    <span class="logo-text">7</span>
+                    <span class="logo-sys">SYS</span>
+                </a>
+            </div>
+            <div class="nav-controls">
+                <button id="theme-toggle" class="icon-button" aria-label="Theme wechseln" title="Zwischen Hell- und Dunkel-Modus wechseln">
+                    <i class="fas fa-moon"></i>
+                    <span class="sr-only">Theme wechseln</span>
+                </button>
+            </div>
+        </nav>
+    </header>
+
+    <main id="main-content">
+        <section class="datenschutz-section">
+            <div class="datenschutz-content">
+                <h1>Datenschutzerklärung</h1>
+
+                <div class="privacy-section">
+                    <h2>1. Datenschutz auf einen Blick</h2>
+                    <p>Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.</p>
+                </div>
+
+                <div class="privacy-section">
+                    <h2>2. Allgemeine Hinweise</h2>
+                    <p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.</p>
+                </div>
+
+                <div class="privacy-section">
+                    <h2>3. Datenerfassung auf unserer Website</h2>
+                    <h3>Cookies</h3>
+                    <p>Unsere Website verwendet Cookies. Das sind kleine Textdateien, die Ihr Webbrowser auf Ihrem Endgerät speichert. Cookies helfen uns dabei, unser Angebot nutzerfreundlicher, effektiver und sicherer zu machen.</p>
+                    <p>Einige Cookies sind "Session-Cookies." Solche Cookies werden nach Ende Ihrer Browser-Sitzung von selbst gelöscht. Hingegen bleiben andere Cookies auf Ihrem Endgerät bestehen, bis Sie diese selbst löschen.</p>
+                </div>
+
+                <div class="privacy-section">
+                    <h2>4. Ihre Rechte</h2>
+                    <p>Sie haben folgende Rechte:</p>
+                    <ul>
+                        <li>Recht auf Auskunft</li>
+                        <li>Recht auf Berichtigung oder Löschung</li>
+                        <li>Recht auf Einschränkung der Verarbeitung</li>
+                        <li>Recht auf Widerspruch gegen die Verarbeitung</li>
+                        <li>Recht auf Datenübertragbarkeit</li>
+                    </ul>
+                </div>
+
+                <div class="privacy-section">
+                    <h2>5. Kontakt</h2>
+                    <p>Bei Fragen zur Erhebung, Verarbeitung oder Nutzung Ihrer personenbezogenen Daten, bei Auskünften, Berichtigung, Sperrung oder Löschung von Daten wenden Sie sich bitte an:</p>
+                    <p>7SYS GmbH<br>
+                    Musterstraße 123<br>
+                    12345 Stadt<br>
+                    Deutschland</p>
+                    <p>E-Mail: datenschutz@7sys.de<br>
+                    Telefon: +49 123 456789</p>
+                </div>
+
+                <div class="privacy-section">
+                    <h2>6. Aktualität und Änderung dieser Datenschutzerklärung</h2>
+                    <p>Diese Datenschutzerklärung ist aktuell gültig und hat den Stand Januar 2024. Durch die Weiterentwicklung unserer Website und Angebote oder aufgrund geänderter gesetzlicher beziehungsweise behördlicher Vorgaben kann es notwendig werden, diese Datenschutzerklärung zu ändern.</p>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer role="contentinfo">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-left">
+                    <p>&copy; 2024 7SYS GmbH. Alle Rechte vorbehalten.</p>
+                </div>
+                <div class="footer-right">
+                    <a href="impressum.html" class="footer-link">Impressum</a>
+                    <a href="datenschutz.html" class="footer-link">Datenschutz</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/website-7sys/impressum.html b/website-7sys/impressum.html
new file mode 100644
index 0000000..869c7a6
--- /dev/null
+++ b/website-7sys/impressum.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="7SYS - Impressum und rechtliche Informationen">
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔒</text></svg>">
+    
+    <!-- Preload Critical Assets -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    
+    <title>Impressum - 7SYS</title>
+    
+    <!-- CSS Files -->
+    <link rel="stylesheet" href="css/variables.css">
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/accessibility.css">
+    <link rel="stylesheet" href="css/animations.css">
+    <link rel="stylesheet" href="css/header.css">
+    <link rel="stylesheet" href="css/buttons.css">
+    <link rel="stylesheet" href="css/footer.css">
+    <link rel="stylesheet" href="css/responsive.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    <style>
+        .impressum-section {
+            padding: 80px 0;
+            min-height: calc(100vh - 200px);
+        }
+
+        .impressum-content {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .impressum-section h1 {
+            font-size: 2.5rem;
+            margin-bottom: 2rem;
+            color: var(--text-primary);
+        }
+
+        .impressum-section h2 {
+            font-size: 1.5rem;
+            margin: 2rem 0 1rem;
+            color: var(--text-primary);
+        }
+
+        .impressum-section p {
+            margin-bottom: 1rem;
+            line-height: 1.6;
+            color: var(--text-secondary);
+        }
+
+        .contact-details {
+            background: var(--bg-secondary);
+            padding: 20px;
+            border-radius: 8px;
+            margin: 20px 0;
+        }
+
+        .contact-details p {
+            margin-bottom: 0.5rem;
+        }
+
+        .disclaimer {
+            font-size: 0.9rem;
+            padding: 20px;
+            background: var(--bg-secondary);
+            border-radius: 8px;
+            margin-top: 2rem;
+        }
+    </style>
+</head>
+<body class="dark-theme">
+    <!-- Skip to main content -->
+    <a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
+
+    <!-- Progress Bar -->
+    <div class="scroll-progress" aria-hidden="true"></div>
+
+    <header>
+        <nav class="main-nav">
+            <div class="logo" role="banner">
+                <a href="index.html">
+                    <span class="logo-text">7</span>
+                    <span class="logo-sys">SYS</span>
+                </a>
+            </div>
+            <div class="nav-controls">
+                <button id="theme-toggle" class="icon-button" aria-label="Theme wechseln" title="Zwischen Hell- und Dunkel-Modus wechseln">
+                    <i class="fas fa-moon"></i>
+                    <span class="sr-only">Theme wechseln</span>
+                </button>
+            </div>
+        </nav>
+    </header>
+
+    <main id="main-content">
+        <section class="impressum-section">
+            <div class="impressum-content">
+                <h1>Impressum</h1>
+
+                <h2>Angaben gemäß § 5 TMG</h2>
+                <div class="contact-details">
+                    <p>7SYS GmbH</p>
+                    <p>Musterstraße 123</p>
+                    <p>12345 Stadt</p>
+                    <p>Deutschland</p>
+                </div>
+
+                <h2>Kontakt</h2>
+                <div class="contact-details">
+                    <p>Telefon: +49 123 456789</p>
+                    <p>Fax: +49 123 456788</p>
+                    <p>E-Mail: info@7sys.de</p>
+                </div>
+
+                <h2>Vertreten durch</h2>
+                <div class="contact-details">
+                    <p>Geschäftsführer: Max Mustermann</p>
+                </div>
+
+                <h2>Registereintrag</h2>
+                <div class="contact-details">
+                    <p>Handelsregister: HRB 12345</p>
+                    <p>Registergericht: Amtsgericht Stadt</p>
+                </div>
+
+                <h2>Umsatzsteuer-ID</h2>
+                <div class="contact-details">
+                    <p>Umsatzsteuer-Identifikationsnummer gemäß §27 a Umsatzsteuergesetz:</p>
+                    <p>DE123456789</p>
+                </div>
+
+                <div class="disclaimer">
+                    <h2>Haftungsausschluss</h2>
+                    <p><strong>Haftung für Inhalte</strong></p>
+                    <p>Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen.</p>
+                    
+                    <p><strong>Haftung für Links</strong></p>
+                    <p>Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.</p>
+                    
+                    <p><strong>Urheberrecht</strong></p>
+                    <p>Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.</p>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer role="contentinfo">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-left">
+                    <p>&copy; 2024 7SYS GmbH. Alle Rechte vorbehalten.</p>
+                </div>
+                <div class="footer-right">
+                    <a href="impressum.html" class="footer-link">Impressum</a>
+                    <a href="#" class="footer-link">Datenschutz</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/website-7sys/index.html b/website-7sys/index.html
index b5714ee..c2ffb11 100644
--- a/website-7sys/index.html
+++ b/website-7sys/index.html
@@ -5,6 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="7SYS - Professionelle IT-Beratung und Sicherheitslösungen für kleine Unternehmen">
     
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔒</text></svg>">
+    
+    <!-- Preload Critical Assets -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    
     <!-- Social Media Meta Tags -->
     <meta property="og:title" content="7SYS - IT-Beratung & Sicherheitslösungen">
     <meta property="og:description" content="Zukunftssichere IT-Lösungen für Ihr Unternehmen">
@@ -13,6 +21,7 @@
     <meta name="twitter:card" content="summary_large_image">
     
     <title>7SYS - IT-Beratung & Sicherheitslösungen</title>
+    
     <!-- CSS Files -->
     <link rel="stylesheet" href="css/variables.css">
     <link rel="stylesheet" href="css/reset.css">
@@ -29,67 +38,92 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body class="dark-theme">
+    <!-- Skip to main content -->
+    <a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
+
+    <!-- Progress Bar -->
+    <div class="scroll-progress" aria-hidden="true"></div>
+
     <header>
         <nav class="main-nav">
-            <div class="logo" role="banner">7SYS</div>
-            <button id="theme-toggle" aria-label="Theme wechseln" title="Zwischen Hell- und Dunkel-Modus wechseln">
-                <i class="fas fa-moon"></i>
-                <span class="sr-only">Theme wechseln</span>
-            </button>
+            <div class="logo" role="banner">
+                <a href="index.html">
+                    <span class="logo-text">7</span>
+                    <span class="logo-sys">SYS</span>
+                </a>
+            </div>
+            <div class="nav-controls">
+                <button id="theme-toggle" class="icon-button" aria-label="Theme wechseln" title="Zwischen Hell- und Dunkel-Modus wechseln">
+                    <i class="fas fa-moon"></i>
+                    <span class="sr-only">Theme wechseln</span>
+                </button>
+            </div>
         </nav>
     </header>
 
-    <main>
+    <main id="main-content">
         <section class="hero" role="banner">
             <div class="stars"></div>
+            <div class="shooting-star"></div>
             <div class="container">
-                <h1>IT-Beratung und Sicherheitslösungen</h1>
-                <p>Zukunftssichere IT-Lösungen für Ihr Unternehmen</p>
-                <a href="#contact" class="cta-button" role="button">Kontakt aufnehmen</a>
+                <h1 class="animate-in">IT-Beratung und Sicherheitslösungen</h1>
+                <p class="animate-in delay-1">Zukunftssichere IT-Lösungen für Ihr Unternehmen</p>
+                <div class="cta-container animate-in delay-2">
+                    <a href="#contact" class="cta-button" role="button">
+                        <span>Kontakt aufnehmen</span>
+                        <i class="fas fa-arrow-right"></i>
+                    </a>
+                </div>
             </div>
         </section>
 
         <section id="services" class="services" role="region" aria-labelledby="services-title">
             <div class="container">
-                <h2 id="services-title">Unsere Dienstleistungen</h2>
+                <h2 id="services-title" class="section-title">Unsere Dienstleistungen</h2>
                 
                 <div class="service-grid">
                     <article class="service-card" role="article">
-                        <i class="fas fa-laptop-code" aria-hidden="true"></i>
+                        <div class="service-icon">
+                            <i class="fas fa-laptop-code" aria-hidden="true"></i>
+                        </div>
                         <h3>IT-Beratung und Sicherheitslösungen</h3>
                         <ul>
-                            <li>Fokus auf kleine Unternehmen</li>
-                            <li>IT-Infrastruktur Beratung</li>
-                            <li>Hardware-Empfehlungen</li>
-                            <li>Netzwerkoptimierung</li>
-                            <li>Firewall-Management</li>
-                            <li>Datenschutz und Zertifizierung</li>
+                            <li><i class="fas fa-check"></i> Fokus auf kleine Unternehmen</li>
+                            <li><i class="fas fa-check"></i> IT-Infrastruktur Beratung</li>
+                            <li><i class="fas fa-check"></i> Hardware-Empfehlungen</li>
+                            <li><i class="fas fa-check"></i> Netzwerkoptimierung</li>
+                            <li><i class="fas fa-check"></i> Firewall-Management</li>
+                            <li><i class="fas fa-check"></i> Datenschutz und Zertifizierung</li>
                         </ul>
                     </article>
 
                     <article class="service-card" role="article">
-                        <i class="fas fa-shield-alt" aria-hidden="true"></i>
+                        <div class="service-icon">
+                            <i class="fas fa-shield-alt" aria-hidden="true"></i>
+                        </div>
                         <h3>Netzwerk- und Datensicherheit</h3>
                         <ul>
-                            <li>Sichere Netzwerkkonfiguration</li>
-                            <li>VPN-Einrichtung</li>
-                            <li>Zugriffskontrolle</li>
-                            <li>Firewall-Management</li>
-                            <li>NIS-2-Regelung Implementation</li>
-                            <li>Bedrohungsschutz</li>
+                            <li><i class="fas fa-check"></i> Sichere Netzwerkkonfiguration</li>
+                            <li><i class="fas fa-check"></i> VPN-Einrichtung</li>
+                            <li><i class="fas fa-check"></i> Zugriffskontrolle</li>
+                            <li><i class="fas fa-check"></i> Firewall-Management</li>
+                            <li><i class="fas fa-check"></i> NIS-2-Regelung Implementation</li>
+                            <li><i class="fas fa-check"></i> Bedrohungsschutz</li>
                         </ul>
                     </article>
 
                     <article class="service-card" role="article">
-                        <i class="fas fa-chart-line" aria-hidden="true"></i>
+                        <div class="service-icon">
+                            <i class="fas fa-chart-line" aria-hidden="true"></i>
+                        </div>
                         <h3>Proaktives Monitoring</h3>
                         <ul>
-                            <li>System-Überwachung</li>
-                            <li>Automatisierte Backups</li>
-                            <li>Systemupdates</li>
-                            <li>Frühwarnsystem</li>
-                            <li>Ausfallsicherheit</li>
-                            <li>Verfügbarkeitsoptimierung</li>
+                            <li><i class="fas fa-check"></i> System-Überwachung</li>
+                            <li><i class="fas fa-check"></i> Automatisierte Backups</li>
+                            <li><i class="fas fa-check"></i> Systemupdates</li>
+                            <li><i class="fas fa-check"></i> Frühwarnsystem</li>
+                            <li><i class="fas fa-check"></i> Ausfallsicherheit</li>
+                            <li><i class="fas fa-check"></i> Verfügbarkeitsoptimierung</li>
                         </ul>
                     </article>
                 </div>
@@ -98,17 +132,35 @@
 
         <section id="vision" class="vision" role="region" aria-labelledby="vision-title">
             <div class="container">
-                <h2 id="vision-title">Unsere Zukunftsvision</h2>
+                <h2 id="vision-title" class="section-title">Unsere Zukunftsvision</h2>
                 <div class="vision-grid">
                     <div class="vision-item">
-                        <i class="fas fa-server" aria-hidden="true"></i>
+                        <div class="vision-icon">
+                            <i class="fas fa-server" aria-hidden="true"></i>
+                        </div>
                         <h3>Desaster Recovery Rechenzentrum</h3>
                         <p>Maximale Ausfallsicherheit für Ihre geschäftskritischen Systeme</p>
+                        <div class="vision-details">
+                            <ul>
+                                <li>24/7 Verfügbarkeit</li>
+                                <li>Redundante Systeme</li>
+                                <li>Automatische Failover</li>
+                            </ul>
+                        </div>
                     </div>
                     <div class="vision-item">
-                        <i class="fas fa-leaf" aria-hidden="true"></i>
+                        <div class="vision-icon">
+                            <i class="fas fa-leaf" aria-hidden="true"></i>
+                        </div>
                         <h3>Sustainable & Renewable IT-Infrastructure</h3>
                         <p>Nachhaltige IT-Lösungen für eine grünere Zukunft</p>
+                        <div class="vision-details">
+                            <ul>
+                                <li>Energieeffiziente Hardware</li>
+                                <li>CO2-neutrale Rechenzentren</li>
+                                <li>Nachhaltige Beschaffung</li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -116,41 +168,119 @@
 
         <section id="contact" class="contact" role="region" aria-labelledby="contact-title">
             <div class="container">
-                <h2 id="contact-title">Kontakt</h2>
+                <h2 id="contact-title" class="section-title">Kontakt</h2>
                 <div class="contact-grid">
                     <form class="contact-form" role="form" aria-label="Kontaktformular">
+                        <p class="field-hint">* Pflichtfelder</p>
+                        
                         <div class="form-group">
-                            <label for="name">Name</label>
-                            <input type="text" id="name" name="name" required 
-                                   aria-required="true" minlength="2"
-                                   pattern="[A-Za-zÄäÖöÜüß\s]+"
-                                   title="Bitte geben Sie Ihren Namen ein (nur Buchstaben und Leerzeichen)">
+                            <label for="name" class="required-field">Name</label>
+                            <div class="input-wrapper">
+                                <input type="text" id="name" name="name" required 
+                                       aria-required="true" minlength="2"
+                                       pattern="[A-Za-zÄäÖöÜüß\s]+"
+                                       title="Bitte geben Sie Ihren Namen ein (nur Buchstaben und Leerzeichen)"
+                                       placeholder="Max Mustermann">
+                                <i class="fas fa-user" aria-hidden="true"></i>
+                            </div>
+                            <p class="field-hint">Mindestens 2 Zeichen, nur Buchstaben erlaubt</p>
                         </div>
+
                         <div class="form-group">
-                            <label for="email">E-Mail</label>
-                            <input type="email" id="email" name="email" required 
-                                   aria-required="true"
-                                   pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
-                                   title="Bitte geben Sie eine gültige E-Mail-Adresse ein">
+                            <label for="email" class="required-field">E-Mail</label>
+                            <div class="input-wrapper">
+                                <input type="email" id="email" name="email" required 
+                                       aria-required="true"
+                                       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
+                                       title="Bitte geben Sie eine gültige E-Mail-Adresse ein"
+                                       placeholder="ihre.email@beispiel.de">
+                                <i class="fas fa-envelope" aria-hidden="true"></i>
+                            </div>
+                            <p class="field-hint">Beispiel: name@domain.de</p>
                         </div>
+
                         <div class="form-group">
-                            <label for="message">Nachricht</label>
-                            <textarea id="message" name="message" required 
-                                      aria-required="true" minlength="10"
-                                      title="Bitte geben Sie Ihre Nachricht ein (mindestens 10 Zeichen)"></textarea>
+                            <label for="phone">Telefon (optional)</label>
+                            <div class="input-wrapper">
+                                <input type="tel" id="phone" name="phone"
+                                       pattern="[0-9\s\-\+]+"
+                                       title="Bitte geben Sie eine gültige Telefonnummer ein"
+                                       placeholder="+49 123 45678900">
+                                <i class="fas fa-phone" aria-hidden="true"></i>
+                            </div>
+                            <p class="field-hint">Format: +49 123 45678900</p>
                         </div>
+
+                        <div class="form-group">
+                            <label for="message" class="required-field">Nachricht</label>
+                            <div class="input-wrapper">
+                                <textarea id="message" name="message" required 
+                                          aria-required="true" minlength="10"
+                                          maxlength="1000"
+                                          placeholder="Ihre Nachricht an uns..."
+                                          title="Bitte geben Sie Ihre Nachricht ein (mindestens 10 Zeichen)"></textarea>
+                                <i class="fas fa-comment" aria-hidden="true"></i>
+                            </div>
+                            <span class="char-counter" aria-live="polite">0 / 1000</span>
+                            <p class="field-hint">Mindestens 10 Zeichen, maximal 1000 Zeichen</p>
+                        </div>
+
                         <button type="submit" class="submit-button">
-                            <span class="button-text">Absenden</span>
+                            <span class="button-text">Nachricht senden</span>
                             <span class="loading-spinner" aria-hidden="true"></span>
                         </button>
                         <div class="form-feedback" role="alert" aria-live="polite"></div>
                     </form>
+
                     <div class="contact-info">
                         <h3>Geschäftsdaten</h3>
-                        <p><i class="fas fa-building" aria-hidden="true"></i> 7SYS GmbH</p>
-                        <p><i class="fas fa-map-marker-alt" aria-hidden="true"></i> Musterstraße 123, 12345 Stadt</p>
-                        <p><i class="fas fa-phone" aria-hidden="true"></i> <a href="tel:+49123456789">+49 123 456789</a></p>
-                        <p><i class="fas fa-envelope" aria-hidden="true"></i> <a href="mailto:info@7sys.de">info@7sys.de</a></p>
+                        <div class="info-grid">
+                            <div class="info-item">
+                                <i class="fas fa-building" aria-hidden="true"></i>
+                                <div class="info-content">
+                                    <p>7SYS GmbH</p>
+                                    <p class="info-subtitle">IT-Sicherheit & Beratung</p>
+                                </div>
+                            </div>
+                            <div class="info-item">
+                                <i class="fas fa-map-marker-alt" aria-hidden="true"></i>
+                                <div class="info-content">
+                                    <p>Musterstraße 123</p>
+                                    <p>12345 Stadt</p>
+                                    <p>Deutschland</p>
+                                </div>
+                            </div>
+                            <div class="info-item">
+                                <i class="fas fa-clock" aria-hidden="true"></i>
+                                <div class="info-content">
+                                    <p>Geschäftszeiten:</p>
+                                    <p>Mo-Fr: 09:00 - 17:00 Uhr</p>
+                                    <p>24/7 Support für Bestandskunden</p>
+                                </div>
+                            </div>
+                            <div class="info-item">
+                                <i class="fas fa-phone" aria-hidden="true"></i>
+                                <div class="info-content">
+                                    <p>Tel: <a href="tel:+49123456789">+49 123 456789</a></p>
+                                    <p>Fax: +49 123 456788</p>
+                                </div>
+                            </div>
+                            <div class="info-item">
+                                <i class="fas fa-envelope" aria-hidden="true"></i>
+                                <div class="info-content">
+                                    <p>E-Mail: <a href="mailto:info@7sys.de">info@7sys.de</a></p>
+                                    <p>Support: <a href="mailto:support@7sys.de">support@7sys.de</a></p>
+                                </div>
+                            </div>
+                            <div class="info-item">
+                                <i class="fas fa-info-circle" aria-hidden="true"></i>
+                                <div class="info-content">
+                                    <p>Handelsregister: HRB 12345</p>
+                                    <p>USt-IdNr: DE123456789</p>
+                                    <p>Geschäftsführer: Max Mustermann</p>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -159,11 +289,27 @@
 
     <footer role="contentinfo">
         <div class="container">
-            <p>&copy; 2024 7SYS GmbH. Alle Rechte vorbehalten.</p>
-            <a href="#" class="impressum">Impressum</a>
+            <div class="footer-content">
+                <div class="footer-left">
+                    <p>&copy; 2024 7SYS GmbH. Alle Rechte vorbehalten.</p>
+                </div>
+                <div class="footer-right">
+                    <a href="impressum.html" class="footer-link">Impressum</a>
+                    <a href="datenschutz.html" class="footer-link">Datenschutz</a>
+                </div>
+            </div>
         </div>
     </footer>
 
+    <!-- Cookie Consent -->
+    <div id="cookie-consent" class="cookie-consent" role="alert" aria-live="polite">
+        <p>Wir verwenden Cookies, um Ihre Erfahrung zu verbessern.</p>
+        <div class="cookie-buttons">
+            <button id="accept-cookies" class="cookie-button accept">Akzeptieren</button>
+            <button id="reject-cookies" class="cookie-button reject">Ablehnen</button>
+        </div>
+    </div>
+
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/website-7sys/script.js b/website-7sys/script.js
index 3543ce7..9aa8e76 100644
--- a/website-7sys/script.js
+++ b/website-7sys/script.js
@@ -3,6 +3,9 @@ document.addEventListener('DOMContentLoaded', () => {
     initSmoothScroll();
     initFormValidation();
     initAnimations();
+    initScrollProgress();
+    initStarryBackground();
+    initCookieConsent();
 });
 
 function initThemeToggle() {
@@ -26,6 +29,36 @@ function initThemeToggle() {
 
     function updateIcon(isLight) {
         icon.className = isLight ? 'fas fa-moon' : 'fas fa-sun';
+        icon.style.animation = 'iconBounce 0.5s ease';
+        setTimeout(() => icon.style.animation = '', 500);
+    }
+}
+
+function initScrollProgress() {
+    const progressBar = document.querySelector('.scroll-progress');
+    
+    window.addEventListener('scroll', () => {
+        const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+        const scrolled = (winScroll / height) * 100;
+        progressBar.style.transform = `scaleX(${scrolled / 100})`;
+    });
+}
+
+function initStarryBackground() {
+    const starsContainer = document.querySelector('.stars');
+    const numStars = 50;
+
+    // Create stars
+    for (let i = 0; i < numStars; i++) {
+        const star = document.createElement('div');
+        star.className = 'star';
+        star.style.width = Math.random() * 3 + 'px';
+        star.style.height = star.style.width;
+        star.style.left = Math.random() * 100 + '%';
+        star.style.top = Math.random() * 100 + '%';
+        star.style.animationDelay = Math.random() * 2 + 's';
+        starsContainer.appendChild(star);
     }
 }
 
@@ -52,35 +85,125 @@ function initFormValidation() {
     const form = document.querySelector('.contact-form');
     if (!form) return;
 
-    const nameInput = form.querySelector('#name');
-    const emailInput = form.querySelector('#email');
-    const messageInput = form.querySelector('#message');
+    const inputs = {
+        name: form.querySelector('#name'),
+        email: form.querySelector('#email'),
+        phone: form.querySelector('#phone'),
+        message: form.querySelector('#message')
+    };
     const submitButton = form.querySelector('.submit-button');
     const buttonText = submitButton.querySelector('.button-text');
     const loadingSpinner = submitButton.querySelector('.loading-spinner');
     const feedbackDiv = form.querySelector('.form-feedback');
+    const messageCounter = form.querySelector('.char-counter');
 
-    const validateInput = (input) => {
-        const isValid = input.checkValidity();
-        input.classList.toggle('invalid', !isValid);
-        return isValid;
-    };
+    // Initialize character counter
+    if (inputs.message && messageCounter) {
+        const maxLength = inputs.message.getAttribute('maxlength');
+        updateCharCounter(inputs.message.value.length, maxLength);
 
-    [nameInput, emailInput, messageInput].forEach(input => {
-        input.addEventListener('input', () => validateInput(input));
-        input.addEventListener('blur', () => validateInput(input));
+        inputs.message.addEventListener('input', (e) => {
+            const length = e.target.value.length;
+            updateCharCounter(length, maxLength);
+        });
+    }
+
+    function updateCharCounter(current, max) {
+        messageCounter.textContent = `${current} / ${max}`;
+        // Add visual feedback when approaching limit
+        if (current >= max * 0.9) {
+            messageCounter.style.color = 'var(--error-red)';
+        } else if (current >= max * 0.8) {
+            messageCounter.style.color = 'var(--warning-yellow)';
+        } else {
+            messageCounter.style.color = 'var(--text-muted)';
+        }
+    }
+
+    // Real-time validation
+    Object.values(inputs).forEach(input => {
+        if (!input) return;
+        
+        ['input', 'blur'].forEach(eventType => {
+            input.addEventListener(eventType, () => {
+                validateInput(input);
+                updateSubmitButton();
+            });
+        });
+
+        // Add focus effects
+        input.addEventListener('focus', () => {
+            input.closest('.input-wrapper').classList.add('focused');
+        });
+
+        input.addEventListener('blur', () => {
+            input.closest('.input-wrapper').classList.remove('focused');
+        });
     });
 
+    function validateInput(input) {
+        if (!input.required && input.value === '') {
+            // Optional fields are valid when empty
+            const wrapper = input.closest('.input-wrapper');
+            wrapper.classList.remove('invalid', 'valid');
+            return true;
+        }
+
+        const isValid = input.checkValidity();
+        const wrapper = input.closest('.input-wrapper');
+        
+        wrapper.classList.toggle('invalid', !isValid);
+        wrapper.classList.toggle('valid', isValid);
+        
+        // Show validation message
+        let errorMessage = '';
+        if (!isValid) {
+            if (input.validity.valueMissing) {
+                errorMessage = 'Dieses Feld ist erforderlich';
+            } else if (input.validity.typeMismatch) {
+                errorMessage = 'Bitte geben Sie ein gültiges Format ein';
+            } else if (input.validity.patternMismatch) {
+                errorMessage = input.title;
+            } else if (input.validity.tooShort) {
+                const minLength = input.getAttribute('minlength');
+                errorMessage = `Mindestens ${minLength} Zeichen erforderlich`;
+            }
+        }
+        
+        let errorElement = wrapper.querySelector('.error-message');
+        if (!errorElement && errorMessage) {
+            errorElement = document.createElement('div');
+            errorElement.className = 'error-message';
+            wrapper.appendChild(errorElement);
+        }
+        
+        if (errorElement) {
+            if (errorMessage) {
+                errorElement.textContent = errorMessage;
+                errorElement.style.display = 'flex';
+            } else {
+                errorElement.style.display = 'none';
+            }
+        }
+        
+        return isValid;
+    }
+
+    function updateSubmitButton() {
+        const requiredInputs = Object.values(inputs).filter(input => input && input.required);
+        const isFormValid = requiredInputs.every(input => input.checkValidity());
+        submitButton.disabled = !isFormValid;
+        
+        // Visual feedback
+        submitButton.classList.toggle('ready', isFormValid);
+    }
+
     form.addEventListener('submit', async (e) => {
         e.preventDefault();
 
-        // Validate all inputs
-        const isNameValid = validateInput(nameInput);
-        const isEmailValid = validateInput(emailInput);
-        const isMessageValid = validateInput(messageInput);
-
-        if (!isNameValid || !isEmailValid || !isMessageValid) {
-            showFeedback('Bitte füllen Sie alle Felder korrekt aus.', false);
+        const requiredInputs = Object.values(inputs).filter(input => input && input.required);
+        if (!requiredInputs.every(input => validateInput(input))) {
+            showFeedback('Bitte füllen Sie alle Pflichtfelder korrekt aus.', false);
             return;
         }
 
@@ -95,6 +218,22 @@ function initFormValidation() {
             
             showFeedback('Vielen Dank für Ihre Nachricht! Wir werden uns in Kürze bei Ihnen melden.', true);
             form.reset();
+            
+            // Reset validation states
+            Object.values(inputs).forEach(input => {
+                if (!input) return;
+                const wrapper = input.closest('.input-wrapper');
+                wrapper.classList.remove('valid', 'invalid', 'focused');
+                const errorElement = wrapper.querySelector('.error-message');
+                if (errorElement) {
+                    errorElement.style.display = 'none';
+                }
+            });
+
+            // Reset character counter
+            if (messageCounter) {
+                updateCharCounter(0, inputs.message.getAttribute('maxlength'));
+            }
         } catch (error) {
             showFeedback('Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.', false);
         } finally {
@@ -102,16 +241,27 @@ function initFormValidation() {
             submitButton.disabled = false;
             buttonText.style.opacity = '1';
             loadingSpinner.style.display = 'none';
+            submitButton.classList.remove('ready');
         }
     });
 
     function showFeedback(message, isSuccess) {
         feedbackDiv.textContent = message;
         feedbackDiv.className = `form-feedback ${isSuccess ? 'success' : 'error'}`;
+        feedbackDiv.style.display = 'block';
+        
+        // Scroll feedback into view
+        feedbackDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        
+        // Animate feedback
+        feedbackDiv.style.animation = 'scaleIn 0.3s ease forwards';
         
         // Auto-hide feedback after 5 seconds
         setTimeout(() => {
-            feedbackDiv.style.display = 'none';
+            feedbackDiv.style.animation = 'fadeOut 0.3s ease forwards';
+            setTimeout(() => {
+                feedbackDiv.style.display = 'none';
+            }, 300);
         }, 5000);
     }
 }
@@ -126,13 +276,53 @@ function initAnimations() {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
                 entry.target.classList.add('visible');
-                observer.unobserve(entry.target); // Stop observing once animated
+                
+                // Add stagger effect to child elements
+                const children = entry.target.querySelectorAll('.animate-stagger');
+                children.forEach((child, index) => {
+                    child.style.animationDelay = `${index * 0.1}s`;
+                    child.classList.add('visible');
+                });
+                
+                observer.unobserve(entry.target);
             }
         });
     }, observerOptions);
 
-    // Observe all service cards and vision items
-    document.querySelectorAll('.service-card, .vision-item').forEach(el => {
+    // Observe elements
+    document.querySelectorAll('.service-card, .vision-item, .fade-in-scroll').forEach(el => {
         observer.observe(el);
     });
 }
+
+function initCookieConsent() {
+    const cookieConsent = document.getElementById('cookie-consent');
+    const acceptButton = document.getElementById('accept-cookies');
+    const rejectButton = document.getElementById('reject-cookies');
+
+    // Check if user has already made a choice
+    const cookieChoice = localStorage.getItem('cookieChoice');
+    if (!cookieChoice) {
+        setTimeout(() => {
+            cookieConsent.style.display = 'flex';
+            cookieConsent.style.animation = 'slideUp 0.5s ease forwards';
+        }, 1000);
+    }
+
+    acceptButton.addEventListener('click', () => {
+        localStorage.setItem('cookieChoice', 'accepted');
+        hideCookieConsent();
+    });
+
+    rejectButton.addEventListener('click', () => {
+        localStorage.setItem('cookieChoice', 'rejected');
+        hideCookieConsent();
+    });
+
+    function hideCookieConsent() {
+        cookieConsent.style.animation = 'slideDown 0.5s ease forwards';
+        setTimeout(() => {
+            cookieConsent.style.display = 'none';
+        }, 500);
+    }
+}