.service-tab {
    background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(2)::before {
     background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .feature-list {
         flex-direction: column;
     }
     
     .feature {
         width: 100%;
     }
 }
 
 @media (max-width: 768px) {
     .features {
         padding: 70px 0;
     }
     
     .features-heading h2 {
         font-size: 32px;
     }
     
     .features-heading p {
         font-size: 18px;
     }
     
     .feature {
         padding: 30px 25px;
     }
     
     .feature-icon {
         width: 90px;
         height: 90px;
         margin-bottom: 20px;
     }
     
     .feature-icon img {
         width: 45px;
         height: 45px;
     }
     
     .feature h3 {
         font-size: 20px;
         margin-bottom: 10px;
     }
     
     .feature p {
         font-size: 15px;
     }
 }
 
 /* Verbesserte Dropdown-Auswahl für den dunklen Modus */
 .form-group select {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b3b3b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     cursor: pointer;
 }
 
 .form-group select:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group select option {
     background-color: #1a1a1a;
     color: #e6e6e6;
     padding: 10px;
 }
 
 .form-group select:hover {
     background: rgba(40, 40, 40, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Honeypot-Feld zum Schutz vor Spam-Bots */
 .honeypot-field {
     display: none !important;
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     height: 0;
     width: 0;
     margin: 0;
     padding: 0;
     border: none;
     z-index: -1;
 }
 
 /* Styling für Formularvalidierung und Danke-Nachricht */
 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--error-color);
     background-color: rgba(220, 53, 69, 0.05);
 }
 
 .error-message {
     color: var(--error-color);
     font-size: 14px;
     margin-top: 5px;
     font-weight: 500;
 }
 
 .thank-you-message {
     background: rgba(40, 167, 69, 0.1);
     border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: 12px;
     padding: 40px;
     text-align: center;
     animation: fadeIn 0.5s ease;
 }
 
 .thank-you-message h3 {
     color: var(--success-color);
     margin-bottom: 20px;
     font-size: 28px;
 }
 
 .thank-you-message p {
     color: var(--text-color);
     margin-bottom: 30px;
     font-size: 18px;
 }
 
 .new-message-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
 }
 
 .new-message-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Styling für das Quiz-CAPTCHA */
 .captcha-container {
     margin-bottom: 25px;
     background: rgba(51, 153, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(51, 153, 255, 0.1);
 }
 
 .captcha-container label {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
 }
 
 #captcha-question {
     color: var(--primary-color);
     cursor: pointer;
     padding: 2px 5px;
     border-radius: 4px;
     transition: all 0.3s ease;
     font-weight: 700;
 }
 
 #captcha-question:hover {
     background-color: rgba(51, 153, 255, 0.1);
 }
 
 #captcha-question::after {
     content: " 🔄";
     font-size: 0.8em;
     opacity: 0.7;
 }
 
 .captcha-container input[type="text"] {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .captcha-container input[type="text"]:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 /* Hinweis unter dem CAPTCHA */
 .captcha-container::after {
     content: "Klicken Sie auf die Frage, um eine neue zu generieren";
     display: block;
     font-size: 12px;
     color: var(--text-color-light);
     margin-top: 8px;
     font-style: italic;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .captcha-container {
         padding: 15px;
     }
     
     .captcha-container input[type="text"] {
         padding: 12px;
     }
 }
 
 /* Blauer "Über uns"-Bereich */
 .about-section {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 80px 0;
     position: relative;
     margin: 100px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .about-section::before,
 .about-section::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 50px;
 }
 
 .about-section::before {
     top: -25px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .about-section::after {
     bottom: -25px;
     background: linear-gradient(315deg, transparent 25px, #0066cc 0) bottom left,
                 linear-gradient(45deg, transparent 25px, #004080 0) bottom right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 /* Verbesserte dekorative Kurven im Hintergrund */
 .about-section .curve {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     transition: all 15s ease-in-out;
 }
 
 .about-section .curve-1 {
     top: -50px;
     right: -50px;
     width: 400px;
     height: 400px;
     opacity: 0.08;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s infinite alternate;
 }
 
 .about-section .curve-2 {
     bottom: -100px;
     left: -100px;
     width: 500px;
     height: 500px;
     opacity: 0.05;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 15s infinite alternate-reverse;
 }
 
 .about-section .curve-3 {
     top: 40%;
     left: 45%;
     width: 800px;
     height: 300px;
     opacity: 0.03;
     background: #ffffff;
     border-radius: 100%;
     transform: translate(-50%, -50%) rotate(30deg);
     animation: rotate-slow 30s infinite linear;
 }
 
 .about-section .curve-4 {
     top: 15%;
     left: 5%;
     width: 200px;
     height: 200px;
     opacity: 0.1;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(60px);
     animation: pulse 8s infinite alternate;
 }
 
 .about-section .curve-5 {
     bottom: 20%;
     right: 5%;
     width: 150px;
     height: 150px;
     opacity: 0.07;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 12s infinite alternate-reverse;
 }
 
 @keyframes float-slow {
     0% {
         transform: translateY(0) translateX(0);
     }
     100% {
         transform: translateY(30px) translateX(20px);
     }
 }
 
 @keyframes rotate-slow {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 @keyframes pulse {
     0% {
         opacity: 0.04;
         transform: scale(1);
     }
     100% {
         opacity: 0.1;
         transform: scale(1.2);
     }
 }
 
 .about-section .container {
     position: relative;
     z-index: 2;
 }
 
 /* Anpassung der Statistik für "Langjährige Erfahrung" */
 .stat-item:first-child .stat-number {
     font-size: 36px;
     letter-spacing: 1px;
 }
 
 .about-section h2 {
     color: #ffffff;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .about-section h2::after {
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.3));
 }
 
 .about-section h3 {
     color: #ffcc00;
     font-size: 1.4rem;
     margin-bottom: 25px;
     letter-spacing: 1px;
 }
 
 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }
 
 .about-text {
     flex: 1;
     min-width: 300px;
 }
 
 .about-text p {
     .contact {
     margin-bottom: 25px;
     font-size: 17px;
     line-height: 1.8;
 }
 
 .about-text strong {
     color: #ffcc00;
     font-weight: 600;
 }
 
 .about-text p:last-child {
     margin-bottom: 0;
 }
 
 /* Bildslider im Über uns-Bereich */
 .about-image-slider {
     flex: 1;
     min-width: 300px;
     position: relative;
 }
 
 .slider-container {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     height: 400px;
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease;
 }
 
 .slide.active {
     opacity: 1;
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }
 
 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.3);
     border: none;
     margin: 0 5px;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: #ffcc00;
     transform: scale(1.2);
 }
 
 .slider-dot:hover {
     background-color: rgba(255, 204, 0, 0.7);
 }
 
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 /* Verbesserte Hauptüberschrift */
 .services h2.main-title {
     font-size: 48px;
     font-weight: 700;
     color: #ffffff;
     text-align: center;
     margin-bottom: 15px;
     position: relative;
     display: inline-block;
     left: 50%;
     transform: translateX(-50%);
 }
 
 .services h2.main-title::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .services .subtitle {
     font-size: 20px;
     color: #b3b3b3;
     text-align: center;
     max-width: 800px;
     margin: 30px auto 60px;
     line-height: 1.7;
 }
 
 /* Kategorie-Überschriften */
 .services .category-title {
     font-size: 36px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 50px;
     position: relative;
     display: inline-block;
     padding-bottom: 15px;
 }
 
 .services .category-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(to right, var(--primary-color), transparent);
     border-radius: 1.5px;
 }
 
 /* Nebeneinander-Anordnung der Leistungskategorien */
 .services-categories-container {
     display: flex;
     gap: 40px;
     margin-top: 60px;
 }
 
 .services-category {
     flex: 1;
     margin-bottom: 0;
 }
 
 .services-category-title {
     font-size: 32px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Anpassung der Service-Karten für die neue Anordnung */
 .service-cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     margin-top: 40px;
 }
 
 /* Responsive Anpassungen für die Service-Karten */
 @media (max-width: 992px) {
     .service-cards {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
 @media (max-width: 768px) {
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Verbesserte Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);
 }
 
 .service-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
     border-color: var(--primary-light);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;
     height: 90px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.2);
     border: 3px solid rgba(255, 255, 255, 0.2);
 }
 
 .service-card:hover .service-icon {
     transform: scale(1.1) rotate(5deg);
     box-shadow: 0 12px 25px rgba(0, 102, 204, 0.3);
 }
 
 /* Unterschiedliche Farben für die Sicherheitsleistungen */
 #security-category .service-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 8px 20px rgba(255, 204, 0, 0.2);
 }
 
 #security-category .service-card:hover .service-icon {
     box-shadow: 0 12px 25px rgba(255, 204, 0, 0.3);
 }
 
 /* Über uns */
 .about {
     padding: 100px 0;
     background-color: var(--background-color);
 }
 
 .about-content {
     display: flex;
     gap: 50px;
     margin-top: 40px;
 }
 
 .about-text {
     flex: 1;
 }
 
 .about-text h3 {
     color: var(--primary-color);
     margin-bottom: 20px;
     font-size: 1.4rem;
 }
 
 .about-text > p {
     margin-bottom: 30px;
     line-height: 1.6;
     font-size: 1.1rem;
 }
 
 .about-section {
     margin-bottom: 25px;
 }
 
 .about-section h4 {
     color: var(--text-color);
     margin-bottom: 10px;
     font-size: 1.2rem;
 }
 
 .about-section p {
     margin-bottom: 15px;
     line-height: 1.6;
 }
 
 .about-cta {
     margin-top: 30px;
 }
 
 /* Bildwechsel-Slider */
 .about-image-slider {
     flex: 1;
     position: relative;
 }
 
 .slider-container {
     width: 100%;
     height: 450px;
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
     transform: scale(1.05);
 }
 
 .slide.active {
     opacity: 1;
     transform: scale(1);
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
     gap: 12px;
 }
 
 .slider-dot {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background-color: var(--border-color);
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
 }
 
 .slider-dot::before {
     content: '';
     position: absolute;
     top: -4px;
     left: -4px;
     right: -4px;
     bottom: -4px;
     border-radius: 50%;
     border: 2px solid transparent;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: var(--primary-color);
 }
 
 .slider-dot.active::before {
     border-color: var(--primary-color);
 }
 
 .slider-dot:hover {
     transform: scale(1.2);
 }
 
 .about-images {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 
 .about-image {
     border-radius: var(--radius-medium);
     overflow: hidden;
     box-shadow: 0 10px 30px var(--shadow-color);
     height: calc(50% - 10px);
 }
 
 .about-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform var(--transition-speed);
 }
 
 .about-image:hover img {
     transform: scale(1.05);
 }
 
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 /* Reset und Grundeinstellungen */
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
 :root {
     --primary-color: #0066cc; /* Blau - steht für Sauberkeit, Frische */
     --primary-dark: #004d99;
     --primary-light: #3399ff;
     --secondary-color: #ffcc00; /* Gelb - steht für Sauberkeit, Hygiene */
     --secondary-dark: #e6b800;
     --secondary-light: #ffdb4d;
     --accent-color: #00cc99; /* Türkis - steht für Frische */
     --accent-dark: #009973;
     --accent-light: #33ffcc;
     --text-color: #333333;
     --text-color-light: #666666;
     --background-color: #ffffff;
     --background-alt: #f5f8fc;
     --border-color: #e0e0e0;
     --shadow-color: rgba(0, 0, 0, 0.1);
     --success-color: #28a745;
     --error-color: #dc3545;
     --warning-color: #ffc107;
     --info-color: #17a2b8;
     --font-main: 'Roboto', sans-serif;
     --transition-speed: 0.3s;
     --container-width: 1200px;
     --radius-small: 4px;
     --radius-medium: 8px;
     --radius-large: 12px;
     --header-height: 80px;
     --footer-bg: #222;
     --footer-text: #eee;
     
     /* RGB-Varianten für Transparenz */
     --primary-color-rgb: 0, 102, 204;
     --secondary-color-rgb: 255, 204, 0;
     --accent-color-rgb: 0, 204, 153;
 }
 
 /* Dark Mode Variablen */
 body.dark-mode {
     --primary-color: #3399ff;
     --primary-dark: #0066cc;
     --primary-light: #66b3ff;
     --secondary-color: #00cc99;
     --secondary-dark: #009973;
     --secondary-light: #33ffcc;
     --accent-color: #ffcc00;
     --accent-dark: #e6b800;
     --accent-light: #ffdb4d;
     --text-color: #e0e0e0;
     --text-color-light: #b3b3b3;
     --background-color: #121212;
     --background-alt: #1e1e1e;
     --border-color: #333333;
     --shadow-color: rgba(0, 0, 0, 0.3);
     --footer-bg: #111;
     --footer-text: #ddd;
 }
 
 /* Barrierefreiheit: Größere Schrift */
 .large-font {
     font-size: 110%;
 }
 
 /* Barrierefreiheit: Sehr große Schrift */
 .x-large-font {
     font-size: 120%;
 }
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 body {
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
     line-height: 1.6;
     color: var(--text-color);
     background-color: var(--background-color);
     transition: background-color var(--transition-speed), color var(--transition-speed);
 }
 
 /* Bessere Fokus-Stile für die Tastaturnavigation */
 :focus-visible {
     outline: 3px solid var(--primary-color);
     outline-offset: 2px;
 }
 
 /* Container für Content-Bereiche */
 .container {
     max-width: var(--container-width);
     margin: 0 auto;
     padding: 0 20px;
 }
 
 /* Typografie */
 h1, h2, h3, h4, h5, h6 {
     font-weight: 700;
     line-height: 1.3;
     margin-bottom: 1rem;
     color: var(--text-color);
 }
 
 h1 {
     font-size: 3rem;
     margin-bottom: 1.5rem;
     letter-spacing: -0.5px;
 }
 
 h2 {
     font-size: 2.5rem;
     margin-bottom: 2rem;
     text-align: center;
     position: relative;
     padding-bottom: 1rem;
 }
 
 h2::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
     background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
     border-radius: 3px;
 }
 
 h3 {
     font-size: 1.75rem;
     color: var(--primary-dark);
 }
 
 h4 {
     font-size: 1.25rem;
     font-weight: 600;
 }
 
 p {
     margin-bottom: 1.5rem;
 }
 
 a {
     color: var(--primary-color);
     text-decoration: none;
     transition: color var(--transition-speed);
 }
 
 a:hover {
     color: var(--secondary-color);
 }
 
 img {
     max-width: 100%;
     height: auto;
 }
 
 ul, ol {
     margin-left: 1.5rem;
     margin-bottom: 1rem;
 }
 
 /* Buttons und Links */
 .btn {
     display: inline-block;
     padding: 14px 30px;
     border-radius: 30px;
     font-weight: 600;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
     transition: all 0.3s ease;
     border: none;
     font-size: 1rem;
     letter-spacing: 0.5px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     position: relative;
     overflow: hidden;
     z-index: 1;
 }
 
 .btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.7s ease;
     z-index: -1;
 }
 
 .btn:hover::before {
     left: 100%;
 }
 
 .primary-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
 }
 
 .primary-btn:hover {
     background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
     transform: translateY(-3px);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
 }
 
 .secondary-btn {
     background: transparent;
     color: var(--primary-color);
     border: 2px solid var(--primary-color);
 }
 
 .secondary-btn:hover {
     background-color: var(--primary-color);
     color: white;
     transform: translateY(-3px);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
 }
 
 .cta-btn {
     font-weight: 700;
     padding: 15px 32px;
 }
 
 /* Animierter CTA-Button */
 .cta-btn {
     position: relative;
     overflow: hidden;
     z-index: 1;
 }
 
 .cta-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.7s ease;
     z-index: -1;
 }
 
 .cta-btn:hover::before {
     left: 100%;
 }
 
 /* Header und Navigation */
 header {
     position: sticky;
     top: 0;
     background-color: var(--background-color);
     box-shadow: 0 2px 10px var(--shadow-color);
     z-index: 100;
     transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
 }
 
 .header-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: var(--header-height);
 }
 
 .logo img {
     max-height: 50px;
     transition: filter var(--transition-speed);
 }
 
 .dark-mode .logo img {
     filter: brightness(1.2);
 }
 
 nav {
     display: flex;
     align-items: center;
 }
 
 .nav-links {
     display: flex;
     gap: 25px;
 }
 
 .nav-links a {
     color: var(--text-color);
     font-weight: 500;
     position: relative;
 }
 
 .nav-links a:hover {
     color: var(--primary-color);
 }
 
 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     background-color: var(--primary-color);
     transition: width var(--transition-speed);
 }
 
 .nav-links a:hover::after {
     width: 100%;
 }
 
 .accessibility-controls {
     margin-left: 20px;
     display: flex;
     align-items: center;
 }
 
 .dark-mode-toggle {
     background: none;
     border: none;
     cursor: pointer;
     padding: 5px;
     color: var(--text-color);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: color 0.3s ease;
 }
 
 .dark-mode-toggle:hover {
     color: var(--primary-color);
 }
 
 .dark-mode-toggle svg {
     width: 24px;
     height: 24px;
 }
 
 /* Scroll-Indikator */
 .scroll-indicator {
     position: sticky;
     top: var(--header-height);
     height: 3px;
     background-color: var(--primary-color);
     width: 0;
     z-index: 100;
     transition: width 0.1s ease-out;
 }
 
 /* Parallax-Effekte */
 .parallax-element {
     will-change: transform;
     transition: transform 0.1s ease-out;
 }
 
 .parallax-bg {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }
 
 /* Hero-Bereich */
 .hero {
     position: relative;
     padding: 120px 0 100px;
     background: linear-gradient(135deg, #004d99, #0066cc);
     color: white;
     overflow: hidden;
 }
 
 .hero-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/cleaning-pattern.png');
     background-size: cover;
     opacity: 0.08;
     z-index: 1;
 }
 
 .hero .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 30% 50%, rgba(0, 102, 204, 0.4) 0%, rgba(0, 51, 102, 0.8) 100%);
     z-index: 2;
 }
 
 .hero .container {
     position: relative;
     z-index: 3;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 60px;
 }
 
 .hero-content {
     flex: 1;
     max-width: 600px;
 }
 
 .hero-badge {
     display: inline-block;
     background: linear-gradient(135deg, rgba(255, 204, 0, 0.9), rgba(230, 184, 0, 0.9));
     color: #333;
     padding: 8px 16px;
     border-radius: 30px;
     font-size: 0.9rem;
     font-weight: 600;
     margin-bottom: 20px;
     box-shadow: 0 4px 10px rgba(255, 204, 0, 0.3);
 }
 
 .hero h1 {
     font-size: 3.2rem;
     line-height: 1.2;
     margin-bottom: 20px;
     color: white;
 }
 
 .hero h1 .highlight {
     color: var(--secondary-color);
     position: relative;
     display: inline-block;
 }
 
 .hero h1 .highlight::after {
     content: '';
     position: absolute;
     bottom: 5px;
     left: 0;
     width: 100%;
     height: 8px;
     background-color: rgba(255, 204, 0, 0.3);
     z-index: -1;
     border-radius: 4px;
 }
 
 .hero-subtitle {
     font-size: 1.2rem;
     margin-bottom: 30px;
     color: rgba(255, 255, 255, 0.9);
     line-height: 1.6;
 }
 
 .hero-features {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
     margin-bottom: 40px;
 }
 
 .hero-feature {
     display: flex;
     align-items: center;
     gap: 10px;
     background: rgba(255, 255, 255, 0.1);
     padding: 10px 15px;
     border-radius: 8px;
     border-left: 3px solid var(--secondary-color);
     transition: all 0.3s ease;
 }
 
 .hero-feature:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .feature-icon-small {
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--secondary-color);
     width: 24px;
     height: 24px;
     border-radius: 50%;
 }
 
 .feature-icon-small img {
     width: 14px;
     height: 14px;
     filter: brightness(0);
 }
 
 .hero-feature span {
     font-weight: 500;
     font-size: 0.95rem;
 }
 
 .hero-cta {
     display: flex;
     gap: 20px;
 }
 
 .hero-cta .primary-btn {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 10px 20px rgba(255, 204, 0, 0.3);
 }
 
 .hero-cta .primary-btn:hover {
     background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-color));
     box-shadow: 0 15px 25px rgba(255, 204, 0, 0.4);
     transform: translateY(-3px);
 }
 
 .hero-cta .secondary-btn {
     background: rgba(255, 255, 255, 0.1);
     color: white;
     border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 .hero-cta .secondary-btn:hover {
     background: rgba(255, 255, 255, 0.2);
     border-color: rgba(255, 255, 255, 0.5);
     transform: translateY(-3px);
 }
 
 .hero-image-container {
     flex: 1;
     position: relative;
     max-width: 500px;
 }
 
 .hero-image {
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     position: relative;
     height: 400px;
     border: 5px solid white;
 }
 
 .hero-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }
 
 .hero-image:hover img {
     transform: scale(1.05);
 }
 
 .image-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
 }
 
 .hero-image-badge {
     position: absolute;
     bottom: -25px;
     right: -25px;
     width: 120px;
     height: 120px;
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     animation: pulse 2s infinite ease-in-out;
     border: 3px solid white;
 }
 
 .badge-content {
     text-align: center;
     color: #333;
 }
 
 .badge-number {
     font-size: 2rem;
     font-weight: 700;
     display: block;
     line-height: 1;
 }
 
 .badge-text {
     font-size: 0.8rem;
     font-weight: 500;
 }
 
 .hero-wave {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100px;
     z-index: 4;
 }
 
 .hero-wave svg {
     width: 100%;
     height: 100%;
 }
 
 .hero-wave path {
     fill: var(--background-color);
 }
 
 /* Responsive Anpassungen für den Hero-Bereich */
 @media (max-width: 1200px) {
     .hero h1 {
         font-size: 2.8rem;
     }
     
     .hero-image {
         height: 350px;
     }
 }
 
 @media (max-width: 992px) {
     .hero {
         padding: 100px 0 80px;
     }
     
     .hero h1 {
         font-size: 2.4rem;
     }
     
     .hero-subtitle {
         font-size: 1.1rem;
     }
     
     .hero-image {
         height: 320px;
     }
     
     .hero-image-badge {
         width: 100px;
         height: 100px;
         bottom: -20px;
         right: -20px;
     }
     
     .badge-number {
         font-size: 1.8rem;
     }
     
     .badge-text {
         font-size: 0.7rem;
     }
 }
 
 @media (max-width: 768px) {
     .hero {
         padding: 80px 0 60px;
     }
     
     .hero .container {
         flex-direction: column;
         gap: 40px;
     }
     
     .hero-content {
         max-width: 100%;
         text-align: center;
     }
     
     .hero h1 {
         font-size: 2.2rem;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .hero-image-container {
         max-width: 100%;
     }
     
     .hero-image {
         height: 300px;
     }
 }
 
 @media (max-width: 576px) {
     .hero {
         padding: 60px 0 40px;
     }
     
     .hero h1 {
         font-size: 1.8rem;
     }
     
     .hero-subtitle {
         font-size: 1rem;
     }
     
     .hero-features {
         flex-direction: column;
         align-items: center;
     }
     
     .hero-cta {
         flex-direction: column;
         width: 100%;
     }
     
     .hero-image {
         height: 250px;
     }
     
     .hero-image-badge {
         width: 80px;
         height: 80px;
         bottom: -15px;
         right: -15px;
     }
     
     .badge-number {
         font-size: 1.5rem;
     }
     
     .badge-text {
         font-size: 0.6rem;
     }
 }
 
 /* Neues professionelles Design für den Leistungsbereich */
 .services {
     padding: 120px 0;
     background-color: #1a1a1a;
     position: relative;
     overflow: hidden;
 }
 
 /* Eleganter Hintergrund mit Farbverlauf */
 .services::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 10% 10%, rgba(0, 102, 204, 0.1), transparent 40%),
                 radial-gradient(circle at 90% 90%, rgba(0, 204, 153, 0.1), transparent 40%);
     z-index: 0;
 }
 
 .services .container {
     position: relative;
     z-index: 1;
 }
 
 /* Verbesserte Hauptüberschrift */
 .services h2.main-title {
     font-size: 48px;
     font-weight: 700;
     color: #ffffff;
     text-align: center;
     margin-bottom: 15px;
     position: relative;
     display: inline-block;
     left: 50%;
     transform: translateX(-50%);
 }
 
 .services h2.main-title::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .services .subtitle {
     font-size: 20px;
     color: #b3b3b3;
     text-align: center;
     max-width: 800px;
     margin: 30px auto 60px;
     line-height: 1.7;
 }
 
 /* Kategorie-Überschriften */
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .feature-list {
         flex-direction: column;
     }
     
     .feature {
         width: 100%;
     }
 }
 
 @media (max-width: 768px) {
     .features {
         padding: 70px 0;
     }
     
     .features-heading h2 {
         font-size: 32px;
     }
     
     .features-heading p {
         font-size: 18px;
     }
     
     .feature {
         padding: 30px 25px;
     }
     
     .feature-icon {
         width: 90px;
         height: 90px;
         margin-bottom: 20px;
     }
     
     .feature-icon img {
         width: 45px;
         height: 45px;
     }
     
     .feature h3 {
         font-size: 20px;
         margin-bottom: 10px;
     }
     
     .feature p {
         font-size: 15px;
     }
 }
 
 /* Verbesserte Dropdown-Auswahl für den dunklen Modus */
 .form-group select {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b3b3b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     cursor: pointer;
 }
 
 .form-group select:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group select option {
     background-color: #1a1a1a;
     color: #e6e6e6;
     padding: 10px;
 }
 
 .form-group select:hover {
     background: rgba(40, 40, 40, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Honeypot-Feld zum Schutz vor Spam-Bots */
 .honeypot-field {
     display: none !important;
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     height: 0;
     width: 0;
     margin: 0;
     padding: 0;
     border: none;
     z-index: -1;
 }
 
 /* Styling für Formularvalidierung und Danke-Nachricht */
 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--error-color);
     background-color: rgba(220, 53, 69, 0.05);
 }
 
 .error-message {
     color: var(--error-color);
     font-size: 14px;
     margin-top: 5px;
     font-weight: 500;
 }
 
 .thank-you-message {
     background: rgba(40, 167, 69, 0.1);
     border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: 12px;
     padding: 40px;
     text-align: center;
     animation: fadeIn 0.5s ease;
 }
 
 .thank-you-message h3 {
     color: var(--success-color);
     margin-bottom: 20px;
     font-size: 28px;
 }
 
 .thank-you-message p {
     color: var(--text-color);
     margin-bottom: 30px;
     font-size: 18px;
 }
 
 .new-message-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
 }
 
 .new-message-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Styling für das Quiz-CAPTCHA */
 .captcha-container {
     margin-bottom: 25px;
     background: rgba(51, 153, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(51, 153, 255, 0.1);
 }
 
 .captcha-container label {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
 }
 
 #captcha-question {
     color: var(--primary-color);
     cursor: pointer;
     padding: 2px 5px;
     border-radius: 4px;
     transition: all 0.3s ease;
     font-weight: 700;
 }
 
 #captcha-question:hover {
     background-color: rgba(51, 153, 255, 0.1);
 }
 
 #captcha-question::after {
     content: " 🔄";
     font-size: 0.8em;
     opacity: 0.7;
 }
 
 .captcha-container input[type="text"] {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .captcha-container input[type="text"]:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 /* Hinweis unter dem CAPTCHA */
 .captcha-container::after {
     content: "Klicken Sie auf die Frage, um eine neue zu generieren";
     display: block;
     font-size: 12px;
     color: var(--text-color-light);
     margin-top: 8px;
     font-style: italic;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .captcha-container {
         padding: 15px;
     }
     
     .captcha-container input[type="text"] {
         padding: 12px;
     }
 }
 
 /* Blauer "Über uns"-Bereich */
 .about-section {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 80px 0;
     position: relative;
     margin: 100px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .about-section::before,
 .about-section::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 50px;
 }
 
 .about-section::before {
     top: -25px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .about-section::after {
     bottom: -25px;
     background: linear-gradient(315deg, transparent 25px, #0066cc 0) bottom left,
                 linear-gradient(45deg, transparent 25px, #004080 0) bottom right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 /* Verbesserte dekorative Kurven im Hintergrund */
 .about-section .curve {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     transition: all 15s ease-in-out;
 }
 
 .about-section .curve-1 {
     top: -50px;
     right: -50px;
     width: 400px;
     height: 400px;
     opacity: 0.08;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s infinite alternate;
 }
 
 .about-section .curve-2 {
     bottom: -100px;
     left: -100px;
     width: 500px;
     height: 500px;
     opacity: 0.05;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 15s infinite alternate-reverse;
 }
 
 .about-section .curve-3 {
     top: 40%;
     left: 45%;
     width: 800px;
     height: 300px;
     opacity: 0.03;
     background: #ffffff;
     border-radius: 100%;
     transform: translate(-50%, -50%) rotate(30deg);
     animation: rotate-slow 30s infinite linear;
 }
 
 .about-section .curve-4 {
     top: 15%;
     left: 5%;
     width: 200px;
     height: 200px;
     opacity: 0.1;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(60px);
     animation: pulse 8s infinite alternate;
 }
 
 .about-section .curve-5 {
     bottom: 20%;
     right: 5%;
     width: 150px;
     height: 150px;
     opacity: 0.07;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 12s infinite alternate-reverse;
 }
 
 @keyframes float-slow {
     0% {
         transform: translateY(0) translateX(0);
     }
     100% {
         transform: translateY(30px) translateX(20px);
     }
 }
 
 @keyframes rotate-slow {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 @keyframes pulse {
     0% {
         opacity: 0.04;
         transform: scale(1);
     }
     100% {
         opacity: 0.1;
         transform: scale(1.2);
     }
 }
 
 .about-section .container {
     position: relative;
     z-index: 2;
 }
 
 /* Anpassung der Statistik für "Langjährige Erfahrung" */
 .stat-item:first-child .stat-number {
     font-size: 36px;
     letter-spacing: 1px;
 }
 
 .about-section h2 {
     color: #ffffff;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .about-section h2::after {
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.3));
 }
 
 .about-section h3 {
     color: #ffcc00;
     font-size: 1.4rem;
     margin-bottom: 25px;
     letter-spacing: 1px;
 }
 
 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }
 
 .about-text {
     flex: 1;
     min-width: 300px;
 }
 
 .about-text p {
     margin-bottom: 25px;
     font-size: 17px;
     line-height: 1.8;
 }
 
 .about-text strong {
     color: #ffcc00;
     font-weight: 600;
 }
 
 .about-text p:last-child {
     margin-bottom: 0;
 }
 
 /* Bildslider im Über uns-Bereich */
 .about-image-slider {
     flex: 1;
     min-width: 300px;
     position: relative;
 }
 
 .slider-container {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     height: 400px;
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease;
 }
 
 .slide.active {
     opacity: 1;
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }
 
 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.3);
     border: none;
     margin: 0 5px;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: #ffcc00;
     transform: scale(1.2);
 }
 
 .slider-dot:hover {
     background-color: rgba(255, 204, 0, 0.7);
 }
 
 /* Anpassung der Statistik-Sektion */
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
 .services .category-title {
     font-size: 36px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 50px;
     position: relative;
     display: inline-block;
     padding-bottom: 15px;
 }
 
 .services .category-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(to right, var(--primary-color), transparent);
     border-radius: 1.5px;
 }
 
 /* Nebeneinander-Anordnung der Leistungskategorien */
 .services-categories-container {
     display: flex;
     gap: 40px;
     margin-top: 60px;
 }
 
 .services-category {
     flex: 1;
     margin-bottom: 0;
 }
 
 .services-category-title {
     font-size: 32px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Anpassung der Service-Karten für die neue Anordnung */
 .service-cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     margin-top: 40px;
 }
 
 /* Responsive Anpassungen für die Service-Karten */
 @media (max-width: 992px) {
     .service-cards {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
 @media (max-width: 768px) {
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Verbesserte Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);
 }
 
 .service-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
     border-color: var(--primary-light);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;
     height: 90px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.2);
     border: 3px solid rgba(255, 255, 255, 0.2);
 }
 
 .service-card:hover .service-icon {
     transform: scale(1.1) rotate(5deg);
     box-shadow: 0 12px 25px rgba(0, 102, 204, 0.3);
 }
 
 /* Unterschiedliche Farben für die Sicherheitsleistungen */
 #security-category .service-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 8px 20px rgba(255, 204, 0, 0.2);
 }
 
 #security-category .service-card:hover .service-icon {
     box-shadow: 0 12px 25px rgba(255, 204, 0, 0.3);
 }
 
 /* Über uns */
 .about {
     padding: 100px 0;
     background-color: var(--background-color);
 }
 
 .about-content {
     display: flex;
     gap: 50px;
     margin-top: 40px;
 }
 
 .about-text {
     flex: 1;
 }
 
 .about-text h3 {
     color: var(--primary-color);
     margin-bottom: 20px;
     font-size: 1.4rem;
 }
 
 .about-text > p {
     margin-bottom: 30px;
     line-height: 1.6;
     font-size: 1.1rem;
 }
 
 .about-section {
     margin-bottom: 25px;
 }
 
 .about-section h4 {
     color: var(--text-color);
     margin-bottom: 10px;
     font-size: 1.2rem;
 }
 
 .about-section p {
     margin-bottom: 15px;
     line-height: 1.6;
 }
 
 .about-cta {
     margin-top: 30px;
 }
 
 /* Bildwechsel-Slider */
 .about-image-slider {
     flex: 1;
     position: relative;
 }
 
 .slider-container {
     width: 100%;
     height: 450px;
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
     transform: scale(1.05);
 }
 
 .slide.active {
     opacity: 1;
     transform: scale(1);
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
     gap: 12px;
 }
 
 .slider-dot {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background-color: var(--border-color);
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
 }
 
 .slider-dot::before {
     content: '';
     position: absolute;
     top: -4px;
     left: -4px;
     right: -4px;
     bottom: -4px;
     border-radius: 50%;
     border: 2px solid transparent;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: var(--primary-color);
 }
 
 .slider-dot.active::before {
     border-color: var(--primary-color);
 }
 
 .slider-dot:hover {
     transform: scale(1.2);
 }
 
 .about-images {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 
 .about-image {
     border-radius: var(--radius-medium);
     overflow: hidden;
     box-shadow: 0 10px 30px var(--shadow-color);
     height: calc(50% - 10px);
 }
 
 .about-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform var(--transition-speed);
 }
 
 .about-image:hover img {
     transform: scale(1.05);
 }
 
 /* Anpassung der Statistiken nach dem Bild-Beispiel */
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren Rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(2)::before {
     background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(2)::before {
     background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .feature-list {
         flex-direction: column;
     }
     
     .feature {
         width: 100%;
     }
 }
 
 @media (max-width: 768px) {
     .features {
         padding: 70px 0;
     }
     
     .features-heading h2 {
         font-size: 32px;
     }
     
     .features-heading p {
         font-size: 18px;
     }
     
     .feature {
         padding: 30px 25px;
     }
     
     .feature-icon {
         width: 90px;
         height: 90px;
         margin-bottom: 20px;
     }
     
     .feature-icon img {
         width: 45px;
         height: 45px;
     }
     
     .feature h3 {
         font-size: 20px;
         margin-bottom: 10px;
     }
     
     .feature p {
         font-size: 15px;
     }
 }
 
 /* Verbesserte Dropdown-Auswahl für den dunklen Modus */
 .form-group select {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b3b3b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     cursor: pointer;
 }
 
 .form-group select:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group select option {
     background-color: #1a1a1a;
     color: #e6e6e6;
     padding: 10px;
 }
 
 .form-group select:hover {
     background: rgba(40, 40, 40, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Honeypot-Feld zum Schutz vor Spam-Bots */
 .honeypot-field {
     display: none !important;
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     height: 0;
     width: 0;
     margin: 0;
     padding: 0;
     border: none;
     z-index: -1;
 }
 
 /* Styling für Formularvalidierung und Danke-Nachricht */
 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--error-color);
     background-color: rgba(220, 53, 69, 0.05);
 }
 
 .error-message {
     color: var(--error-color);
     font-size: 14px;
     margin-top: 5px;
     font-weight: 500;
 }
 
 .thank-you-message {
     background: rgba(40, 167, 69, 0.1);
     border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: 12px;
     padding: 40px;
     text-align: center;
     animation: fadeIn 0.5s ease;
 }
 
 .thank-you-message h3 {
     color: var(--success-color);
     margin-bottom: 20px;
     font-size: 28px;
 }
 
 .thank-you-message p {
     color: var(--text-color);
     margin-bottom: 30px;
     font-size: 18px;
 }
 
 .new-message-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
 }
 
 .new-message-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
 }
 
 @keyframes fadeIn {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .feature-list {
         flex-direction: column;
     }
     
     .feature {
         width: 100%;
     }
 }
 
 @media (max-width: 768px) {
     .features {
         padding: 70px 0;
     }
     
     .features-heading h2 {
         font-size: 32px;
     }
     
     .features-heading p {
         font-size: 18px;
     }
     
     .feature {
         padding: 30px 25px;
     }
     
     .feature-icon {
         width: 90px;
         height: 90px;
         margin-bottom: 20px;
     }
     
     .feature-icon img {
         width: 45px;
         height: 45px;
     }
     
     .feature h3 {
         font-size: 20px;
         margin-bottom: 10px;
     }
     
     .feature p {
         font-size: 15px;
     }
 }
 
 /* Verbesserte Dropdown-Auswahl für den dunklen Modus */
 .form-group select {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b3b3b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     cursor: pointer;
 }
 
 .form-group select:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group select option {
     background-color: #1a1a1a;
     color: #e6e6e6;
     padding: 10px;
 }
 
 .form-group select:hover {
     background: rgba(40, 40, 40, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Honeypot-Feld zum Schutz vor Spam-Bots */
 .honeypot-field {
     display: none !important;
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     height: 0;
     width: 0;
     margin: 0;
     padding: 0;
     border: none;
     z-index: -1;
 }
 
 /* Styling für Formularvalidierung und Danke-Nachricht */
 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--error-color);
     background-color: rgba(220, 53, 69, 0.05);
 }
 
 .error-message {
     color: var(--error-color);
     font-size: 14px;
     margin-top: 5px;
     font-weight: 500;
 }
 
 .thank-you-message {
     background: rgba(40, 167, 69, 0.1);
     border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: 12px;
     padding: 40px;
     text-align: center;
     animation: fadeIn 0.5s ease;
 }
 
 .thank-you-message h3 {
     color: var(--success-color);
     margin-bottom: 20px;
     font-size: 28px;
 }
 
 .thank-you-message p {
     color: var(--text-color);
     margin-bottom: 30px;
     font-size: 18px;
 }
 
 .new-message-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
 }
 
 .new-message-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Styling für das Quiz-CAPTCHA */
 .captcha-container {
     margin-bottom: 25px;
     background: rgba(51, 153, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(51, 153, 255, 0.1);
 }
 
 .captcha-container label {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
 }
 
 #captcha-question {
     color: var(--primary-color);
     cursor: pointer;
     padding: 2px 5px;
     border-radius: 4px;
     transition: all 0.3s ease;
     font-weight: 700;
 }
 
 #captcha-question:hover {
     background-color: rgba(51, 153, 255, 0.1);
 }
 
 #captcha-question::after {
     content: " 🔄";
     font-size: 0.8em;
     opacity: 0.7;
 }
 
 .captcha-container input[type="text"] {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .captcha-container input[type="text"]:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 /* Hinweis unter dem CAPTCHA */
 .captcha-container::after {
     content: "Klicken Sie auf die Frage, um eine neue zu generieren";
     display: block;
     font-size: 12px;
     color: var(--text-color-light);
     margin-top: 8px;
     font-style: italic;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .captcha-container {
         padding: 15px;
     }
     
     .captcha-container input[type="text"] {
         padding: 12px;
     }
 }
 
 /* Blauer "Über uns"-Bereich */
 .about-section {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 80px 0;
     position: relative;
     margin: 100px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .about-section::before,
 .about-section::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 50px;
 }
 
 .about-section::before {
     top: -25px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .about-section::after {
     bottom: -25px;
     background: linear-gradient(315deg, transparent 25px, #0066cc 0) bottom left,
                 linear-gradient(45deg, transparent 25px, #004080 0) bottom right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 /* Verbesserte dekorative Kurven im Hintergrund */
 .about-section .curve {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     transition: all 15s ease-in-out;
 }
 
 .about-section .curve-1 {
     top: -50px;
     right: -50px;
     width: 400px;
     height: 400px;
     opacity: 0.08;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s infinite alternate;
 }
 
 .about-section .curve-2 {
     bottom: -100px;
     left: -100px;
     width: 500px;
     height: 500px;
     opacity: 0.05;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 15s infinite alternate-reverse;
 }
 
 .about-section .curve-3 {
     top: 40%;
     left: 45%;
     width: 800px;
     height: 300px;
     opacity: 0.03;
     background: #ffffff;
     border-radius: 100%;
     transform: translate(-50%, -50%) rotate(30deg);
     animation: rotate-slow 30s infinite linear;
 }
 
 .about-section .curve-4 {
     top: 15%;
     left: 5%;
     width: 200px;
     height: 200px;
     opacity: 0.1;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(60px);
     animation: pulse 8s infinite alternate;
 }
 
 .about-section .curve-5 {
     bottom: 20%;
     right: 5%;
     width: 150px;
     height: 150px;
     opacity: 0.07;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 12s infinite alternate-reverse;
 }
 
 @keyframes float-slow {
     0% {
         transform: translateY(0) translateX(0);
     }
     100% {
         transform: translateY(30px) translateX(20px);
     }
 }
 
 @keyframes rotate-slow {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 @keyframes pulse {
     0% {
         opacity: 0.04;
         transform: scale(1);
     }
     100% {
         opacity: 0.1;
         transform: scale(1.2);
     }
 }
 
 .about-section .container {
     position: relative;
     z-index: 2;
 }
 
 /* Anpassung der Statistik für "Langjährige Erfahrung" */
 .stat-item:first-child .stat-number {
     font-size: 36px;
     letter-spacing: 1px;
 }
 
 .about-section h2 {
     color: #ffffff;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .about-section h2::after {
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.3));
 }
 
 .about-section h3 {
     color: #ffcc00;
     font-size: 1.4rem;
     margin-bottom: 25px;
     letter-spacing: 1px;
 }
 
 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }
 
 .about-text {
     flex: 1;
     min-width: 300px;
 }
 
 .about-text p {
     margin-bottom: 25px;
     font-size: 17px;
     line-height: 1.8;
 }
 
 .about-text strong {
     color: #ffcc00;
     font-weight: 600;
 }
 
 .about-text p:last-child {
     margin-bottom: 0;
 }
 
 /* Bildslider im Über uns-Bereich */
 .about-image-slider {
     flex: 1;
     min-width: 300px;
     position: relative;
 }
 
 .slider-container {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     height: 400px;
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease;
 }
 
 .slide.active {
     opacity: 1;
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }
 
 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.3);
     border: none;
     margin: 0 5px;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: #ffcc00;
     transform: scale(1.2);
 }
 
 .slider-dot:hover {
     background-color: rgba(255, 204, 0, 0.7);
 }
 
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Styling für das Quiz-CAPTCHA */
 .captcha-container {
     margin-bottom: 25px;
     background: rgba(51, 153, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(51, 153, 255, 0.1);
 }
 
 .captcha-container label {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
 }
 
 #captcha-question {
     color: var(--primary-color);
     cursor: pointer;
     padding: 2px 5px;
     border-radius: 4px;
     transition: all 0.3s ease;
     font-weight: 700;
 }
 
 #captcha-question:hover {
     background-color: rgba(51, 153, 255, 0.1);
 }
 
 #captcha-question::after {
     content: " 🔄";
     font-size: 0.8em;
     opacity: 0.7;
 }
 
 .captcha-container input[type="text"] {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .captcha-container input[type="text"]:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 /* Hinweis unter dem CAPTCHA */
 .captcha-container::after {
     content: "Klicken Sie auf die Frage, um eine neue zu generieren";
     display: block;
     font-size: 12px;
     color: var(--text-color-light);
     margin-top: 8px;
     font-style: italic;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .captcha-container {
         padding: 15px;
     }
     
     .captcha-container input[type="text"] {
         padding: 12px;
     }
 }
 
 /* Blauer "Über uns"-Bereich */
 .about-section {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 80px 0;
     position: relative;
     margin: 100px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .about-section::before,
 .about-section::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 50px;
 }
 
 .about-section::before {
     top: -25px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .about-section::after {
     bottom: -25px;
     background: linear-gradient(315deg, transparent 25px, #0066cc 0) bottom left,
                 linear-gradient(45deg, transparent 25px, #004080 0) bottom right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 /* Verbesserte dekorative Kurven im Hintergrund */
 .about-section .curve {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     transition: all 15s ease-in-out;
 }
 
 .about-section .curve-1 {
     top: -50px;
     right: -50px;
     width: 400px;
     height: 400px;
     opacity: 0.08;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s infinite alternate;
 }
 
 .about-section .curve-2 {
     bottom: -100px;
     left: -100px;
     width: 500px;
     height: 500px;
     opacity: 0.05;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 15s infinite alternate-reverse;
 }
 
 .about-section .curve-3 {
     top: 40%;
     left: 45%;
     width: 800px;
     height: 300px;
     opacity: 0.03;
     background: #ffffff;
     border-radius: 100%;
     transform: translate(-50%, -50%) rotate(30deg);
     animation: rotate-slow 30s infinite linear;
 }
 
 .about-section .curve-4 {
     top: 15%;
     left: 5%;
     width: 200px;
     height: 200px;
     opacity: 0.1;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(60px);
     animation: pulse 8s infinite alternate;
 }
 
 .about-section .curve-5 {
     bottom: 20%;
     right: 5%;
     width: 150px;
     height: 150px;
     opacity: 0.07;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 12s infinite alternate-reverse;
 }
 
 @keyframes float-slow {
     0% {
         transform: translateY(0) translateX(0);
     }
     100% {
         transform: translateY(30px) translateX(20px);
     }
 }
 
 @keyframes rotate-slow {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 @keyframes pulse {
     0% {
         opacity: 0.04;
         transform: scale(1);
     }
     100% {
         opacity: 0.1;
         transform: scale(1.2);
     }
 }
 
 .about-section .container {
     position: relative;
     z-index: 2;
 }
 
 /* Anpassung der Statistik für "Langjährige Erfahrung" */
 .stat-item:first-child .stat-number {
     font-size: 36px;
     letter-spacing: 1px;
 }
 
 .about-section h2 {
     color: #ffffff;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .about-section h2::after {
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.3));
 }
 
 .about-section h3 {
     color: #ffcc00;
     font-size: 1.4rem;
     margin-bottom: 25px;
     letter-spacing: 1px;
 }
 
 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }
 
 .about-text {
     flex: 1;
     min-width: 300px;
 }
 
 .about-text p {
     margin-bottom: 25px;
     font-size: 17px;
     line-height: 1.8;
 }
 
 .about-text strong {
     color: #ffcc00;
     font-weight: 600;
 }
 
 .about-text p:last-child {
     margin-bottom: 0;
 }
 
 /* Bildslider im Über uns-Bereich */
 .about-image-slider {
     flex: 1;
     min-width: 300px;
     position: relative;
 }
 
 .slider-container {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     height: 400px;
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease;
 }
 
 .slide.active {
     opacity: 1;
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }
 
 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.3);
     border: none;
     margin: 0 5px;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: #ffcc00;
     transform: scale(1.2);
 }
 
 .slider-dot:hover {
     background-color: rgba(255, 204, 0, 0.7);
 }
 
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(2)::before {
     background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .feature-list {
         flex-direction: column;
     }
     
     .feature {
         width: 100%;
     }
 }
 
 @media (max-width: 768px) {
     .features {
         padding: 70px 0;
     }
     
     .features-heading h2 {
         font-size: 32px;
     }
     
     .features-heading p {
         font-size: 18px;
     }
     
     .feature {
         padding: 30px 25px;
     }
     
     .feature-icon {
         width: 90px;
         height: 90px;
         margin-bottom: 20px;
     }
     
     .feature-icon img {
         width: 45px;
         height: 45px;
     }
     
     .feature h3 {
         font-size: 20px;
         margin-bottom: 10px;
     }
     
     .feature p {
         font-size: 15px;
     }
 }
 
 /* Verbesserte Dropdown-Auswahl für den dunklen Modus */
 .form-group select {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b3b3b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     cursor: pointer;
 }
 
 .form-group select:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group select option {
     background-color: #1a1a1a;
     color: #e6e6e6;
     padding: 10px;
 }
 
 .form-group select:hover {
     background: rgba(40, 40, 40, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Honeypot-Feld zum Schutz vor Spam-Bots */
 .honeypot-field {
     display: none !important;
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     height: 0;
     width: 0;
     margin: 0;
     padding: 0;
     border: none;
     z-index: -1;
 }
 
 /* Styling für Formularvalidierung und Danke-Nachricht */
 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--error-color);
     background-color: rgba(220, 53, 69, 0.05);
 }
 
 .error-message {
     color: var(--error-color);
     font-size: 14px;
     margin-top: 5px;
     font-weight: 500;
 }
 
 .thank-you-message {
     background: rgba(40, 167, 69, 0.1);
     border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: 12px;
     padding: 40px;
     text-align: center;
     animation: fadeIn 0.5s ease;
 }
 
 .thank-you-message h3 {
     color: var(--success-color);
     margin-bottom: 20px;
     font-size: 28px;
 }
 
 .thank-you-message p {
     color: var(--text-color);
     margin-bottom: 30px;
     font-size: 18px;
 }
 
 .new-message-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
 }
 
 .new-message-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Styling für das Quiz-CAPTCHA */
 .captcha-container {
     margin-bottom: 25px;
     background: rgba(51, 153, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(51, 153, 255, 0.1);
 }
 
 .captcha-container label {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
 }
 
 #captcha-question {
     color: var(--primary-color);
     cursor: pointer;
     padding: 2px 5px;
     border-radius: 4px;
     transition: all 0.3s ease;
     font-weight: 700;
 }
 
 #captcha-question:hover {
     background-color: rgba(51, 153, 255, 0.1);
 }
 
 #captcha-question::after {
     content: " 🔄";
     font-size: 0.8em;
     opacity: 0.7;
 }
 
 .captcha-container input[type="text"] {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .captcha-container input[type="text"]:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 /* Hinweis unter dem CAPTCHA */
 .captcha-container::after {
     content: "Klicken Sie auf die Frage, um eine neue zu generieren";
     display: block;
     font-size: 12px;
     color: var(--text-color-light);
     margin-top: 8px;
     font-style: italic;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .captcha-container {
         padding: 15px;
     }
     
     .captcha-container input[type="text"] {
         padding: 12px;
     }
 }
 
 /* Blauer "Über uns"-Bereich */
 .about-section {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 80px 0;
     position: relative;
     margin: 100px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .about-section::before,
 .about-section::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 50px;
 }
 
 .about-section::before {
     top: -25px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .about-section::after {
     bottom: -25px;
     background: linear-gradient(315deg, transparent 25px, #0066cc 0) bottom left,
                 linear-gradient(45deg, transparent 25px, #004080 0) bottom right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 /* Verbesserte dekorative Kurven im Hintergrund */
 .about-section .curve {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     transition: all 15s ease-in-out;
 }
 
 .about-section .curve-1 {
     top: -50px;
     right: -50px;
     width: 400px;
     height: 400px;
     opacity: 0.08;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s infinite alternate;
 }
 
 .about-section .curve-2 {
     bottom: -100px;
     left: -100px;
     width: 500px;
     height: 500px;
     opacity: 0.05;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 15s infinite alternate-reverse;
 }
 
 .about-section .curve-3 {
     top: 40%;
     left: 45%;
     width: 800px;
     height: 300px;
     opacity: 0.03;
     background: #ffffff;
     border-radius: 100%;
     transform: translate(-50%, -50%) rotate(30deg);
     animation: rotate-slow 30s infinite linear;
 }
 
 .about-section .curve-4 {
     top: 15%;
     left: 5%;
     width: 200px;
     height: 200px;
     opacity: 0.1;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(60px);
     animation: pulse 8s infinite alternate;
 }
 
 .about-section .curve-5 {
     bottom: 20%;
     right: 5%;
     width: 150px;
     height: 150px;
     opacity: 0.07;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 12s infinite alternate-reverse;
 }
 
 @keyframes float-slow {
     0% {
         transform: translateY(0) translateX(0);
     }
     100% {
         transform: translateY(30px) translateX(20px);
     }
 }
 
 @keyframes rotate-slow {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 @keyframes pulse {
     0% {
         opacity: 0.04;
         transform: scale(1);
     }
     100% {
         opacity: 0.1;
         transform: scale(1.2);
     }
 }
 
 .about-section .container {
     position: relative;
     z-index: 2;
 }
 
 /* Anpassung der Statistik für "Langjährige Erfahrung" */
 .stat-item:first-child .stat-number {
     font-size: 36px;
     letter-spacing: 1px;
 }
 
 .about-section h2 {
     color: #ffffff;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .about-section h2::after {
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.3));
 }
 
 .about-section h3 {
     color: #ffcc00;
     font-size: 1.4rem;
     margin-bottom: 25px;
     letter-spacing: 1px;
 }
 
 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }
 
 .about-text {
     flex: 1;
     min-width: 300px;
 }
 
 .about-text p {
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(2)::before {
     background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .feature-list {
         flex-direction: column;
     }
     
     .feature {
         width: 100%;
     }
 }
 
 @media (max-width: 768px) {
     .features {
         padding: 70px 0;
     }
     
     .features-heading h2 {
         font-size: 32px;
     }
     
     .features-heading p {
         font-size: 18px;
     }
     
     .feature {
         padding: 30px 25px;
     }
     
     .feature-icon {
         width: 90px;
         height: 90px;
         margin-bottom: 20px;
     }
     
     .feature-icon img {
         width: 45px;
         height: 45px;
     }
     
     .feature h3 {
         font-size: 20px;
         margin-bottom: 10px;
     }
     
     .feature p {
         font-size: 15px;
     }
 }
 
 /* Verbesserte Dropdown-Auswahl für den dunklen Modus */
 .form-group select {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b3b3b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     cursor: pointer;
 }
 
 .form-group select:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group select option {
     background-color: #1a1a1a;
     color: #e6e6e6;
     padding: 10px;
 }
 
 .form-group select:hover {
     background: rgba(40, 40, 40, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Honeypot-Feld zum Schutz vor Spam-Bots */
 .honeypot-field {
     display: none !important;
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     height: 0;
     width: 0;
     margin: 0;
     padding: 0;
     border: none;
     z-index: -1;
 }
 
 /* Styling für Formularvalidierung und Danke-Nachricht */
 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--error-color);
     background-color: rgba(220, 53, 69, 0.05);
 }
 
 .error-message {
     color: var(--error-color);
     font-size: 14px;
     margin-top: 5px;
     font-weight: 500;
 }
 
 .thank-you-message {
     background: rgba(40, 167, 69, 0.1);
     border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: 12px;
     padding: 40px;
     text-align: center;
     animation: fadeIn 0.5s ease;
 }
 
 .thank-you-message h3 {
     color: var(--success-color);
     margin-bottom: 20px;
     font-size: 28px;
 }
 
 .thank-you-message p {
     color: var(--text-color);
     margin-bottom: 30px;
     font-size: 18px;
 }
 
 .new-message-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
 }
 
 .new-message-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Styling für das Quiz-CAPTCHA */
 .captcha-container {
     margin-bottom: 25px;
     background: rgba(51, 153, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(51, 153, 255, 0.1);
 }
 
 .captcha-container label {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
 }
 
 #captcha-question {
     color: var(--primary-color);
     cursor: pointer;
     padding: 2px 5px;
     border-radius: 4px;
     transition: all 0.3s ease;
     font-weight: 700;
 }
 
 #captcha-question:hover {
     background-color: rgba(51, 153, 255, 0.1);
 }
 
 #captcha-question::after {
     content: " 🔄";
     font-size: 0.8em;
     opacity: 0.7;
 }
 
 .captcha-container input[type="text"] {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .captcha-container input[type="text"]:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 /* Hinweis unter dem CAPTCHA */
 .captcha-container::after {
     content: "Klicken Sie auf die Frage, um eine neue zu generieren";
     display: block;
     font-size: 12px;
     color: var(--text-color-light);
     margin-top: 8px;
     font-style: italic;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .captcha-container {
         padding: 15px;
     }
     
     .captcha-container input[type="text"] {
         padding: 12px;
     }
 }
 
 /* Blauer "Über uns"-Bereich */
 .about-section {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 80px 0;
     position: relative;
     margin: 100px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .about-section::before,
 .about-section::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 50px;
 }
 
 .about-section::before {
     top: -25px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .about-section::after {
     bottom: -25px;
     background: linear-gradient(315deg, transparent 25px, #0066cc 0) bottom left,
                 linear-gradient(45deg, transparent 25px, #004080 0) bottom right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 /* Verbesserte dekorative Kurven im Hintergrund */
 .about-section .curve {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     transition: all 15s ease-in-out;
 }
 
 .about-section .curve-1 {
     top: -50px;
     right: -50px;
     width: 400px;
     height: 400px;
     opacity: 0.08;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s infinite alternate;
 }
 
 .about-section .curve-2 {
     bottom: -100px;
     left: -100px;
     width: 500px;
     height: 500px;
     opacity: 0.05;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 15s infinite alternate-reverse;
 }
 
 .about-section .curve-3 {
     top: 40%;
     left: 45%;
     width: 800px;
     height: 300px;
     opacity: 0.03;
     background: #ffffff;
     border-radius: 100%;
     transform: translate(-50%, -50%) rotate(30deg);
     animation: rotate-slow 30s infinite linear;
 }
 
 .about-section .curve-4 {
     top: 15%;
     left: 5%;
     width: 200px;
     height: 200px;
     opacity: 0.1;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(60px);
     animation: pulse 8s infinite alternate;
 }
 
 .about-section .curve-5 {
     bottom: 20%;
     right: 5%;
     width: 150px;
     height: 150px;
     opacity: 0.07;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 12s infinite alternate-reverse;
 }
 
 @keyframes float-slow {
     0% {
         transform: translateY(0) translateX(0);
     }
     100% {
         transform: translateY(30px) translateX(20px);
     }
 }
 
 @keyframes rotate-slow {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 @keyframes pulse {
     0% {
         opacity: 0.04;
         transform: scale(1);
     }
     100% {
         opacity: 0.1;
         transform: scale(1.2);
     }
 }
 
 .about-section .container {
     position: relative;
     z-index: 2;
 }
 
 /* Anpassung der Statistik für "Langjährige Erfahrung" */
 .stat-item:first-child .stat-number {
     font-size: 36px;
     letter-spacing: 1px;
 }
 
 .about-section h2 {
     color: #ffffff;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .about-section h2::after {
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.3));
 }
 
 .about-section h3 {
     color: #ffcc00;
     font-size: 1.4rem;
     margin-bottom: 25px;
     letter-spacing: 1px;
 }
 
 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }
 
 .about-text {
     flex: 1;
     min-width: 300px;
 }
 
 .about-text p {
     margin-bottom: 25px;
     font-size: 17px;
     line-height: 1.8;
 }
 
 .about-text strong {
     color: #ffcc00;
     font-weight: 600;
 }
 
 .about-text p:last-child {
     margin-bottom: 0;
 }
 
 /* Bildslider im Über uns-Bereich */
 .about-image-slider {
     flex: 1;
     min-width: 300px;
     position: relative;
 }
 
 .slider-container {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     height: 400px;
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease;
 }
 
 .slide.active {
     opacity: 1;
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }
 
 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.3);
     border: none;
     margin: 0 5px;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: #ffcc00;
     transform: scale(1.2);
 }
 
 .slider-dot:hover {
     background-color: rgba(255, 204, 0, 0.7);
 }
 
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 /* Reset und Grundeinstellungen */
 :root {
     --primary-color: #0066cc; /* Blau - steht für Sauberkeit, Frische */
     --primary-dark: #004d99;
     --primary-light: #3399ff;
     --secondary-color: #ffcc00; /* Gelb - steht für Sauberkeit, Hygiene */
     --secondary-dark: #e6b800;
     --secondary-light: #ffdb4d;
     --accent-color: #00cc99; /* Türkis - steht für Frische */
     --accent-dark: #009973;
     --accent-light: #33ffcc;
     --text-color: #333333;
     --text-color-light: #666666;
     --background-color: #ffffff;
     --background-alt: #f5f8fc;
     --border-color: #e0e0e0;
     --shadow-color: rgba(0, 0, 0, 0.1);
     --success-color: #28a745;
     --error-color: #dc3545;
     --warning-color: #ffc107;
     --info-color: #17a2b8;
     --font-main: 'Roboto', sans-serif;
     --transition-speed: 0.3s;
     --container-width: 1200px;
     --radius-small: 4px;
     --radius-medium: 8px;
     --radius-large: 12px;
     --header-height: 80px;
     --footer-bg: #222;
     --footer-text: #eee;
     
     /* RGB-Varianten für Transparenz */
     --primary-color-rgb: 0, 102, 204;
     --secondary-color-rgb: 255, 204, 0;
     --accent-color-rgb: 0, 204, 153;
 }
 
 /* Dark Mode Variablen */
 body.dark-mode {
     --primary-color: #3399ff;
     --primary-dark: #0066cc;
     --primary-light: #66b3ff;
     --secondary-color: #00cc99;
     --secondary-dark: #009973;
     --secondary-light: #33ffcc;
     --accent-color: #ffcc00;
     --accent-dark: #e6b800;
     --accent-light: #ffdb4d;
     --text-color: #e0e0e0;
     --text-color-light: #b3b3b3;
     --background-color: #121212;
     --background-alt: #1e1e1e;
     --border-color: #333333;
     --shadow-color: rgba(0, 0, 0, 0.3);
     --footer-bg: #111;
     --footer-text: #ddd;
 }
 
 /* Barrierefreiheit: Größere Schrift */
 .large-font {
     font-size: 110%;
 }
 
 /* Barrierefreiheit: Sehr große Schrift */
 .x-large-font {
     font-size: 120%;
 }
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 body {
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
     line-height: 1.6;
     color: var(--text-color);
     background-color: var(--background-color);
     transition: background-color var(--transition-speed), color var(--transition-speed);
 }
 
 /* Bessere Fokus-Stile für die Tastaturnavigation */
 :focus-visible {
     outline: 3px solid var(--primary-color);
     outline-offset: 2px;
 }
 
 /* Container für Content-Bereiche */
 .container {
     max-width: var(--container-width);
     margin: 0 auto;
     padding: 0 20px;
 }
 
 /* Typografie */
 h1, h2, h3, h4, h5, h6 {
     font-weight: 700;
     line-height: 1.3;
     margin-bottom: 1rem;
     color: var(--text-color);
 }
 
 h1 {
     font-size: 3rem;
     margin-bottom: 1.5rem;
     letter-spacing: -0.5px;
 }
 
 h2 {
     font-size: 2.5rem;
     margin-bottom: 2rem;
     text-align: center;
     position: relative;
     padding-bottom: 1rem;
 }
 
 h2::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
     background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
     border-radius: 3px;
 }
 
 h3 {
     font-size: 1.75rem;
     color: var(--primary-dark);
 }
 
 h4 {
     font-size: 1.25rem;
     font-weight: 600;
 }
 
 p {
     margin-bottom: 1.5rem;
 }
 
 a {
     color: var(--primary-color);
     text-decoration: none;
     transition: color var(--transition-speed);
 }
 
 a:hover {
     color: var(--secondary-color);
 }
 
 img {
     max-width: 100%;
     height: auto;
 }
 
 ul, ol {
     margin-left: 1.5rem;
     margin-bottom: 1rem;
 }
 
 /* Buttons und Links */
 .btn {
     display: inline-block;
     padding: 14px 30px;
     border-radius: 30px;
     font-weight: 600;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
     transition: all 0.3s ease;
     border: none;
     font-size: 1rem;
     letter-spacing: 0.5px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     position: relative;
     overflow: hidden;
     z-index: 1;
 }
 
 .btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.7s ease;
     z-index: -1;
 }
 
 .btn:hover::before {
     left: 100%;
 }
 
 .primary-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
 }
 
 .primary-btn:hover {
     background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
     transform: translateY(-3px);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
 }
 
 .secondary-btn {
     background: transparent;
     color: var(--primary-color);
     border: 2px solid var(--primary-color);
 }
 
 .secondary-btn:hover {
     background-color: var(--primary-color);
     color: white;
     transform: translateY(-3px);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
 }
 
 .cta-btn {
     font-weight: 700;
     padding: 15px 32px;
 }
 
 /* Animierter CTA-Button */
 .cta-btn {
     position: relative;
     overflow: hidden;
     z-index: 1;
 }
 
 .cta-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.7s ease;
     z-index: -1;
 }
 
 .cta-btn:hover::before {
     left: 100%;
 }
 
 /* Header und Navigation */
 header {
     position: sticky;
     top: 0;
     background-color: var(--background-color);
     box-shadow: 0 2px 10px var(--shadow-color);
     z-index: 100;
     transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
 }
 
 .header-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: var(--header-height);
 }
 
 .logo img {
     max-height: 50px;
     transition: filter var(--transition-speed);
 }
 
 .dark-mode .logo img {
     filter: brightness(1.2);
 }
 
 nav {
     display: flex;
     align-items: center;
 }
 
 .nav-links {
     display: flex;
     gap: 25px;
 }
 
 .nav-links a {
     color: var(--text-color);
     font-weight: 500;
     position: relative;
 }
 
 .nav-links a:hover {
     color: var(--primary-color);
 }
 
 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     background-color: var(--primary-color);
     transition: width var(--transition-speed);
 }
 
 .nav-links a:hover::after {
     width: 100%;
 }
 
 .accessibility-controls {
     margin-left: 20px;
     display: flex;
     align-items: center;
 }
 
 .dark-mode-toggle {
     background: none;
     border: none;
     cursor: pointer;
     padding: 5px;
     color: var(--text-color);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: color 0.3s ease;
 }
 
 .dark-mode-toggle:hover {
     color: var(--primary-color);
 }
 
 .dark-mode-toggle svg {
     width: 24px;
     height: 24px;
 }
 
 /* Scroll-Indikator */
 .scroll-indicator {
     position: sticky;
     top: var(--header-height);
     height: 3px;
     background-color: var(--primary-color);
     width: 0;
     z-index: 100;
     transition: width 0.1s ease-out;
 }
 
 /* Parallax-Effekte */
 .parallax-element {
     will-change: transform;
     transition: transform 0.1s ease-out;
 }
 
 .parallax-bg {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }
 
 /* Hero-Bereich */
 .hero {
     position: relative;
     padding: 120px 0 100px;
     background: linear-gradient(135deg, #004d99, #0066cc);
     color: white;
     overflow: hidden;
 }
 
 .hero-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/cleaning-pattern.png');
     background-size: cover;
     opacity: 0.08;
     z-index: 1;
 }
 
 .hero .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 30% 50%, rgba(0, 102, 204, 0.4) 0%, rgba(0, 51, 102, 0.8) 100%);
     z-index: 2;
 }
 
 .hero .container {
     position: relative;
     z-index: 3;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 60px;
 }
 
 .hero-content {
     flex: 1;
     max-width: 600px;
 }
 
 .hero-badge {
     display: inline-block;
     background: linear-gradient(135deg, rgba(255, 204, 0, 0.9), rgba(230, 184, 0, 0.9));
     color: #333;
     padding: 8px 16px;
     border-radius: 30px;
     font-size: 0.9rem;
     font-weight: 600;
     margin-bottom: 20px;
     box-shadow: 0 4px 10px rgba(255, 204, 0, 0.3);
 }
 
 .hero h1 {
     font-size: 3.2rem;
     line-height: 1.2;
     margin-bottom: 20px;
     color: white;
 }
 
 .hero h1 .highlight {
     color: var(--secondary-color);
     position: relative;
     display: inline-block;
 }
 
 .hero h1 .highlight::after {
     content: '';
     position: absolute;
     bottom: 5px;
     left: 0;
     width: 100%;
     height: 8px;
     background-color: rgba(255, 204, 0, 0.3);
     z-index: -1;
     border-radius: 4px;
 }
 
 .hero-subtitle {
     font-size: 1.2rem;
     margin-bottom: 30px;
     color: rgba(255, 255, 255, 0.9);
     line-height: 1.6;
 }
 
 .hero-features {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
     margin-bottom: 40px;
 }
 
 .hero-feature {
     display: flex;
     align-items: center;
     gap: 10px;
     background: rgba(255, 255, 255, 0.1);
     padding: 10px 15px;
     border-radius: 8px;
     border-left: 3px solid var(--secondary-color);
     transition: all 0.3s ease;
 }
 
 .hero-feature:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .feature-icon-small {
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--secondary-color);
     width: 24px;
     height: 24px;
     border-radius: 50%;
 }
 
 .feature-icon-small img {
     width: 14px;
     height: 14px;
     filter: brightness(0);
 }
 
 .hero-feature span {
     font-weight: 500;
     font-size: 0.95rem;
 }
 
 .hero-cta {
     display: flex;
     gap: 20px;
 }
 
 .hero-cta .primary-btn {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 10px 20px rgba(255, 204, 0, 0.3);
 }
 
 .hero-cta .primary-btn:hover {
     background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-color));
     box-shadow: 0 15px 25px rgba(255, 204, 0, 0.4);
     transform: translateY(-3px);
 }
 
 .hero-cta .secondary-btn {
     background: rgba(255, 255, 255, 0.1);
     color: white;
     border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 .hero-cta .secondary-btn:hover {
     background: rgba(255, 255, 255, 0.2);
     border-color: rgba(255, 255, 255, 0.5);
     transform: translateY(-3px);
 }
 
 .hero-image-container {
     flex: 1;
     position: relative;
     max-width: 500px;
 }
 
 .hero-image {
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     position: relative;
     height: 400px;
     border: 5px solid white;
 }
 
 .hero-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }
 
 .hero-image:hover img {
     transform: scale(1.05);
 }
 
 .image-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
 }
 
 .hero-image-badge {
     position: absolute;
     bottom: -25px;
     right: -25px;
     width: 120px;
     height: 120px;
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     animation: pulse 2s infinite ease-in-out;
     border: 3px solid white;
 }
 
 .badge-content {
     text-align: center;
     color: #333;
 }
 
 .badge-number {
     font-size: 2rem;
     font-weight: 700;
     display: block;
     line-height: 1;
 }
 
 .badge-text {
     font-size: 0.8rem;
     font-weight: 500;
 }
 
 .hero-wave {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100px;
     z-index: 4;
 }
 
 .hero-wave svg {
     width: 100%;
     height: 100%;
 }
 
 .hero-wave path {
     fill: var(--background-color);
 }
 
 /* Responsive Anpassungen für den Hero-Bereich */
 @media (max-width: 1200px) {
     .hero h1 {
         font-size: 2.8rem;
     }
     
     .hero-image {
         height: 350px;
     }
 }
 
 @media (max-width: 992px) {
     .hero {
         padding: 100px 0 80px;
     }
     
     .hero h1 {
         font-size: 2.4rem;
     }
     
     .hero-subtitle {
         font-size: 1.1rem;
     }
     
     .hero-image {
         height: 320px;
     }
     
     .hero-image-badge {
         width: 100px;
         height: 100px;
         bottom: -20px;
         right: -20px;
     }
     
     .badge-number {
         font-size: 1.8rem;
     }
     
     .badge-text {
         font-size: 0.7rem;
     }
 }
 
 @media (max-width: 768px) {
     .hero {
         padding: 80px 0 60px;
     }
     
     .hero .container {
         flex-direction: column;
         gap: 40px;
     }
     
     .hero-content {
         max-width: 100%;
         text-align: center;
     }
     
     .hero h1 {
         font-size: 2.2rem;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .hero-image-container {
         max-width: 100%;
     }
     
     .hero-image {
         height: 300px;
     }
 }
 
 @media (max-width: 576px) {
     .hero {
         padding: 60px 0 40px;
     }
     
     .hero h1 {
         font-size: 1.8rem;
     }
     
     .hero-subtitle {
         font-size: 1rem;
     }
     
     .hero-features {
         flex-direction: column;
         align-items: center;
     }
     
     .hero-cta {
         flex-direction: column;
         width: 100%;
     }
     
     .hero-image {
         height: 250px;
     }
     
     .hero-image-badge {
         width: 80px;
         height: 80px;
         bottom: -15px;
         right: -15px;
     }
     
     .badge-number {
         font-size: 1.5rem;
     }
     
     .badge-text {
         font-size: 0.6rem;
     }
 }
 
 /* Neues professionelles Design für den Leistungsbereich */
 .services {
     padding: 120px 0;
     background-color: #1a1a1a;
     position: relative;
     overflow: hidden;
 }
 
 /* Eleganter Hintergrund mit Farbverlauf */
 .services::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 10% 10%, rgba(0, 102, 204, 0.1), transparent 40%),
                 radial-gradient(circle at 90% 90%, rgba(0, 204, 153, 0.1), transparent 40%);
     z-index: 0;
 }
 
 .services .container {
     position: relative;
     z-index: 1;
 }
 
 /* Verbesserte Hauptüberschrift */
 .services h2.main-title {
     font-size: 48px;
     font-weight: 700;
     color: #ffffff;
     text-align: center;
     margin-bottom: 15px;
     position: relative;
     display: inline-block;
     left: 50%;
     transform: translateX(-50%);
 }
 
 .services h2.main-title::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .services .subtitle {
     font-size: 20px;
     color: #b3b3b3;
     text-align: center;
     max-width: 800px;
     margin: 30px auto 60px;
     line-height: 1.7;
 }
 
 /* Kategorie-Überschriften */
 .services .category-title {
     font-size: 36px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 50px;
     position: relative;
     display: inline-block;
     padding-bottom: 15px;
 }
 
 .services .category-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(to right, var(--primary-color), transparent);
     border-radius: 1.5px;
 }
 
 /* Nebeneinander-Anordnung der Leistungskategorien */
 .services-categories-container {
     display: flex;
     gap: 40px;
     margin-top: 60px;
 }
 
 .services-category {
     flex: 1;
     margin-bottom: 0;
 }
 
 .services-category-title {
     font-size: 32px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Anpassung der Service-Karten für die neue Anordnung */
 .service-cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     margin-top: 40px;
 }
 
 /* Responsive Anpassungen für die Service-Karten */
 @media (max-width: 992px) {
     .service-cards {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
 @media (max-width: 768px) {
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Verbesserte Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);
 }
 
 .service-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
     border-color: var(--primary-light);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;
     height: 90px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.2);
     border: 3px solid rgba(255, 255, 255, 0.2);
 }
 
 .service-card:hover .service-icon {
     transform: scale(1.1) rotate(5deg);
     box-shadow: 0 12px 25px rgba(0, 102, 204, 0.3);
 }
 
 /* Unterschiedliche Farben für die Sicherheitsleistungen */
 #security-category .service-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 8px 20px rgba(255, 204, 0, 0.2);
 }
 
 #security-category .service-card:hover .service-icon {
     box-shadow: 0 12px 25px rgba(255, 204, 0, 0.3);
 }
 
 /* Über uns */
 .about {
     padding: 100px 0;
     background-color: var(--background-color);
 }
 
 .about-content {
     display: flex;
     gap: 50px;
     margin-top: 40px;
 }
 
 .about-text {
     flex: 1;
 }
 
 .about-text h3 {
     color: var(--primary-color);
     margin-bottom: 20px;
     font-size: 1.4rem;
 }
 
 .about-text > p {
     margin-bottom: 30px;
     line-height: 1.6;
     font-size: 1.1rem;
 }
 
 .about-section {
     margin-bottom: 25px;
 }
 
 .about-section h4 {
     color: var(--text-color);
     margin-bottom: 10px;
     font-size: 1.2rem;
 }
 
 .about-section p {
     margin-bottom: 15px;
     line-height: 1.6;
 }
 
 .about-cta {
     margin-top: 30px;
 }
 
 /* Bildwechsel-Slider */
 .about-image-slider {
     flex: 1;
     position: relative;
 }
 
 .slider-container {
     width: 100%;
     height: 450px;
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
     transform: scale(1.05);
 }
 
 .slide.active {
     opacity: 1;
     transform: scale(1);
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
     gap: 12px;
 }
 
 .slider-dot {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background-color: var(--border-color);
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
 }
 
 .slider-dot::before {
     content: '';
     position: absolute;
     top: -4px;
     left: -4px;
     right: -4px;
     bottom: -4px;
     border-radius: 50%;
     border: 2px solid transparent;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: var(--primary-color);
 }
 
 .slider-dot.active::before {
     border-color: var(--primary-color);
 }
 
 .slider-dot:hover {
     transform: scale(1.2);
 }
 
 .about-images {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 
 .about-image {
     border-radius: var(--radius-medium);
     overflow: hidden;
     box-shadow: 0 10px 30px var(--shadow-color);
     height: calc(50% - 10px);
 }
 
 .about-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform var(--transition-speed);
 }
 
 .about-image:hover img {
     transform: scale(1.05);
 }
 
 /* Anpassung der Statistiken nach dem Bild-Beispiel */
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren Rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(2)::before {
     background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .feature-list {
         flex-direction: column;
     }
     
     .feature {
         width: 100%;
     }
 }
 
 @media (max-width: 768px) {
     .features {
         padding: 70px 0;
     }
     
     .features-heading h2 {
         font-size: 32px;
     }
     
     .features-heading p {
         font-size: 18px;
     }
     
     .feature {
         padding: 30px 25px;
     }
     
     .feature-icon {
         width: 90px;
         height: 90px;
         margin-bottom: 20px;
     }
     
     .feature-icon img {
         width: 45px;
         height: 45px;
     }
     
     .feature h3 {
         font-size: 20px;
         margin-bottom: 10px;
     }
     
     .feature p {
         font-size: 15px;
     }
 }
 
 /* Verbesserte Dropdown-Auswahl für den dunklen Modus */
 .form-group select {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b3b3b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     cursor: pointer;
 }
 
 .form-group select:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group select option {
     background-color: #1a1a1a;
     color: #e6e6e6;
     padding: 10px;
 }
 
 .form-group select:hover {
     background: rgba(40, 40, 40, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Honeypot-Feld zum Schutz vor Spam-Bots */
 .honeypot-field {
     display: none !important;
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     height: 0;
     width: 0;
     margin: 0;
     padding: 0;
     border: none;
     z-index: -1;
 }
 
 /* Styling für Formularvalidierung und Danke-Nachricht */
 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--error-color);
     background-color: rgba(220, 53, 69, 0.05);
 }
 
 .error-message {
     color: var(--error-color);
     font-size: 14px;
     margin-top: 5px;
     font-weight: 500;
 }
 
 .thank-you-message {
     background: rgba(40, 167, 69, 0.1);
     border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: 12px;
     padding: 40px;
     text-align: center;
     animation: fadeIn 0.5s ease;
 }
 
 .thank-you-message h3 {
     color: var(--success-color);
     margin-bottom: 20px;
     font-size: 28px;
 }
 
 .thank-you-message p {
     color: var(--text-color);
     margin-bottom: 30px;
     font-size: 18px;
 }
 
 .new-message-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
 }
 
 .new-message-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Styling für das Quiz-CAPTCHA */
 .captcha-container {
     margin-bottom: 25px;
     background: rgba(51, 153, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(51, 153, 255, 0.1);
 }
 
 .captcha-container label {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
 }
 
 #captcha-question {
     color: var(--primary-color);
     cursor: pointer;
     padding: 2px 5px;
     border-radius: 4px;
     transition: all 0.3s ease;
     font-weight: 700;
 }
 
 #captcha-question:hover {
     background-color: rgba(51, 153, 255, 0.1);
 }
 
 #captcha-question::after {
     content: " 🔄";
     font-size: 0.8em;
     opacity: 0.7;
 }
 
 .captcha-container input[type="text"] {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .captcha-container input[type="text"]:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 /* Hinweis unter dem CAPTCHA */
 .captcha-container::after {
     content: "Klicken Sie auf die Frage, um eine neue zu generieren";
     display: block;
     font-size: 12px;
     color: var(--text-color-light);
     margin-top: 8px;
     font-style: italic;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .captcha-container {
         padding: 15px;
     }
     
     .captcha-container input[type="text"] {
         padding: 12px;
     }
 }
 
 /* Blauer "Über uns"-Bereich */
 .about-section {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 80px 0;
     position: relative;
     margin: 100px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .about-section::before,
 .about-section::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 50px;
 }
 
 .about-section::before {
     top: -25px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .about-section::after {
     bottom: -25px;
     background: linear-gradient(315deg, transparent 25px, #0066cc 0) bottom left,
                 linear-gradient(45deg, transparent 25px, #004080 0) bottom right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 /* Verbesserte dekorative Kurven im Hintergrund */
 .about-section .curve {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     transition: all 15s ease-in-out;
 }
 
 .about-section .curve-1 {
     top: -50px;
     right: -50px;
     width: 400px;
     height: 400px;
     opacity: 0.08;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s infinite alternate;
 }
 
 .about-section .curve-2 {
     bottom: -100px;
     left: -100px;
     width: 500px;
     height: 500px;
     opacity: 0.05;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 15s infinite alternate-reverse;
 }
 
 .about-section .curve-3 {
     top: 40%;
     left: 45%;
     width: 800px;
     height: 300px;
     opacity: 0.03;
     background: #ffffff;
     border-radius: 100%;
     transform: translate(-50%, -50%) rotate(30deg);
     animation: rotate-slow 30s infinite linear;
 }
 
 .about-section .curve-4 {
     top: 15%;
     left: 5%;
     width: 200px;
     height: 200px;
     opacity: 0.1;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(60px);
     animation: pulse 8s infinite alternate;
 }
 
 .about-section .curve-5 {
     bottom: 20%;
     right: 5%;
     width: 150px;
     height: 150px;
     opacity: 0.07;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 12s infinite alternate-reverse;
 }
 
 @keyframes float-slow {
     0% {
         transform: translateY(0) translateX(0);
     }
     100% {
         transform: translateY(30px) translateX(20px);
     }
 }
 
 @keyframes rotate-slow {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 @keyframes pulse {
     0% {
         opacity: 0.04;
         transform: scale(1);
     }
     100% {
         opacity: 0.1;
         transform: scale(1.2);
     }
 }
 
 .about-section .container {
     position: relative;
     z-index: 2;
 }
 
 /* Anpassung der Statistik für "Langjährige Erfahrung" */
 .stat-item:first-child .stat-number {
     font-size: 36px;
     letter-spacing: 1px;
 }
 
 .about-section h2 {
     color: #ffffff;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .about-section h2::after {
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.3));
 }
 
 .about-section h3 {
     color: #ffcc00;
     font-size: 1.4rem;
     margin-bottom: 25px;
     letter-spacing: 1px;
 }
 
 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }
 
 .about-text {
     flex: 1;
     min-width: 300px;
 }
 
 .about-text p {
     margin-bottom: 25px;
     font-size: 17px;
     line-height: 1.8;
 }
 
 .about-text strong {
     color: #ffcc00;
     font-weight: 600;
 }
 
 .about-text p:last-child {
     margin-bottom: 0;
 }
 
 /* Bildslider im Über uns-Bereich */
 .about-image-slider {
     flex: 1;
     min-width: 300px;
     position: relative;
 }
 
 .slider-container {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     height: 400px;
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease;
 }
 
 .slide.active {
     opacity: 1;
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }
 
 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.3);
     border: none;
     margin: 0 5px;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: #ffcc00;
     transform: scale(1.2);
 }
 
 .slider-dot:hover {
     background-color: rgba(255, 204, 0, 0.7);
 }
 
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(2)::before {
     background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .feature-list {
         flex-direction: column;
     }
     
     .feature {
         width: 100%;
     }
 }
 
 @media (max-width: 768px) {
     .features {
         padding: 70px 0;
     }
     
     .features-heading h2 {
         font-size: 32px;
     }
     
     .features-heading p {
         font-size: 18px;
     }
     
     .feature {
         padding: 30px 25px;
     }
     
     .feature-icon {
         width: 90px;
         height: 90px;
         margin-bottom: 20px;
     }
     
     .feature-icon img {
         width: 45px;
         height: 45px;
     }
     
     .feature h3 {
         font-size: 20px;
         margin-bottom: 10px;
     }
     
     .feature p {
         font-size: 15px;
     }
 }
 
 /* Verbesserte Dropdown-Auswahl für den dunklen Modus */
 .form-group select {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b3b3b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     cursor: pointer;
 }
 
 .form-group select:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group select option {
     background-color: #1a1a1a;
     color: #e6e6e6;
     padding: 10px;
 }
 
 .form-group select:hover {
     background: rgba(40, 40, 40, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Honeypot-Feld zum Schutz vor Spam-Bots */
 .honeypot-field {
     display: none !important;
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     height: 0;
     width: 0;
     margin: 0;
     padding: 0;
     border: none;
     z-index: -1;
 }
 
 /* Styling für Formularvalidierung und Danke-Nachricht */
 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--error-color);
     background-color: rgba(220, 53, 69, 0.05);
 }
 
 .error-message {
     color: var(--error-color);
     font-size: 14px;
     margin-top: 5px;
     font-weight: 500;
 }
 
 .thank-you-message {
     background: rgba(40, 167, 69, 0.1);
     border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: 12px;
     padding: 40px;
     text-align: center;
     animation: fadeIn 0.5s ease;
 }
 
 .thank-you-message h3 {
     color: var(--success-color);
     margin-bottom: 20px;
     font-size: 28px;
 }
 
 .thank-you-message p {
     color: var(--text-color);
     margin-bottom: 30px;
     font-size: 18px;
 }
 
 .new-message-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
 }
 
 .new-message-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Styling für das Quiz-CAPTCHA */
 .captcha-container {
     margin-bottom: 25px;
     background: rgba(51, 153, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(51, 153, 255, 0.1);
 }
 
 .captcha-container label {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
 }
 
 #captcha-question {
     color: var(--primary-color);
     cursor: pointer;
     padding: 2px 5px;
     border-radius: 4px;
     transition: all 0.3s ease;
     font-weight: 700;
 }
 
 #captcha-question:hover {
     background-color: rgba(51, 153, 255, 0.1);
 }
 
 #captcha-question::after {
     content: " 🔄";
     font-size: 0.8em;
     opacity: 0.7;
 }
 
 .captcha-container input[type="text"] {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .captcha-container input[type="text"]:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 /* Hinweis unter dem CAPTCHA */
 .captcha-container::after {
     content: "Klicken Sie auf die Frage, um eine neue zu generieren";
     display: block;
     font-size: 12px;
     color: var(--text-color-light);
     margin-top: 8px;
     font-style: italic;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .captcha-container {
         padding: 15px;
     }
     
     .captcha-container input[type="text"] {
         padding: 12px;
     }
 }
 
 /* Blauer "Über uns"-Bereich */
 .about-section {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 80px 0;
     position: relative;
     margin: 100px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .about-section::before,
 .about-section::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 50px;
 }
 
 .about-section::before {
     top: -25px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .about-section::after {
     bottom: -25px;
     background: linear-gradient(315deg, transparent 25px, #0066cc 0) bottom left,
                 linear-gradient(45deg, transparent 25px, #004080 0) bottom right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 /* Verbesserte dekorative Kurven im Hintergrund */
 .about-section .curve {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     transition: all 15s ease-in-out;
 }
 
 .about-section .curve-1 {
     top: -50px;
     right: -50px;
     width: 400px;
     height: 400px;
     opacity: 0.08;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s infinite alternate;
 }
 
 .about-section .curve-2 {
     bottom: -100px;
     left: -100px;
     width: 500px;
     height: 500px;
     opacity: 0.05;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 15s infinite alternate-reverse;
 }
 
 .about-section .curve-3 {
     top: 40%;
     left: 45%;
     width: 800px;
     height: 300px;
     opacity: 0.03;
     background: #ffffff;
     border-radius: 100%;
     transform: translate(-50%, -50%) rotate(30deg);
     animation: rotate-slow 30s infinite linear;
 }
 
 .about-section .curve-4 {
     top: 15%;
     left: 5%;
     width: 200px;
     height: 200px;
     opacity: 0.1;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(60px);
     animation: pulse 8s infinite alternate;
 }
 
 .about-section .curve-5 {
     bottom: 20%;
     right: 5%;
     width: 150px;
     height: 150px;
     opacity: 0.07;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 12s infinite alternate-reverse;
 }
 
 @keyframes float-slow {
     0% {
         transform: translateY(0) translateX(0);
     }
     100% {
         transform: translateY(30px) translateX(20px);
     }
 }
 
 @keyframes rotate-slow {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 @keyframes pulse {
     0% {
         opacity: 0.04;
         transform: scale(1);
     }
     100% {
         opacity: 0.1;
         transform: scale(1.2);
     }
 }
 
 .about-section .container {
     position: relative;
     z-index: 2;
 }
 
 /* Anpassung der Statistik für "Langjährige Erfahrung" */
 .stat-item:first-child .stat-number {
     font-size: 36px;
     letter-spacing: 1px;
 }
 
 .about-section h2 {
     color: #ffffff;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .about-section h2::after {
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.3));
 }
 
 .about-section h3 {
     color: #ffcc00;
     font-size: 1.4rem;
     margin-bottom: 25px;
     letter-spacing: 1px;
 }
 
 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }
 
 .about-text {
     flex: 1;
     min-width: 300px;
 }
 
 .about-text p {
     margin-bottom: 25px;
     font-size: 17px;
     line-height: 1.8;
 }
 
 .about-text strong {
     color: #ffcc00;
     font-weight: 600;
 }
 
 .about-text p:last-child {
     margin-bottom: 0;
 }
 
 /* Bildslider im Über uns-Bereich */
 .about-image-slider {
     flex: 1;
     min-width: 300px;
     position: relative;
 }
 
 .slider-container {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     height: 400px;
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease;
 }
 
 .slide.active {
     opacity: 1;
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }
 
 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.3);
     border: none;
     margin: 0 5px;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: #ffcc00;
     transform: scale(1.2);
 }
 
 .slider-dot:hover {
     background-color: rgba(255, 204, 0, 0.7);
 }
 
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 /* Verbesserte Hauptüberschrift */
 .services h2.main-title {
     font-size: 48px;
     font-weight: 700;
     color: #ffffff;
     text-align: center;
     margin-bottom: 15px;
     position: relative;
     display: inline-block;
     left: 50%;
     transform: translateX(-50%);
 }
 
 .services h2.main-title::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .services .subtitle {
     font-size: 20px;
     color: #b3b3b3;
     text-align: center;
     max-width: 800px;
     margin: 30px auto 60px;
     line-height: 1.7;
 }
 
 /* Kategorie-Überschriften */
 .services .category-title {
     font-size: 36px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 50px;
     position: relative;
     display: inline-block;
     padding-bottom: 15px;
 }
 
 .services .category-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(to right, var(--primary-color), transparent);
     border-radius: 1.5px;
 }
 
 /* Nebeneinander-Anordnung der Leistungskategorien */
 .services-categories-container {
     display: flex;
     gap: 40px;
     margin-top: 60px;
 }
 
 .services-category {
     flex: 1;
     margin-bottom: 0;
 }
 
 .services-category-title {
     font-size: 32px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Anpassung der Service-Karten für die neue Anordnung */
 .service-cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     margin-top: 40px;
 }
 
 /* Responsive Anpassungen für die Service-Karten */
 @media (max-width: 992px) {
     .service-cards {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
 @media (max-width: 768px) {
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Verbesserte Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);
 }
 
 .service-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
     border-color: var(--primary-light);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;
     height: 90px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.2);
     border: 3px solid rgba(255, 255, 255, 0.2);
 }
 
 .service-card:hover .service-icon {
     transform: scale(1.1) rotate(5deg);
     box-shadow: 0 12px 25px rgba(0, 102, 204, 0.3);
 }
 
 /* Unterschiedliche Farben für die Sicherheitsleistungen */
 #security-category .service-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 8px 20px rgba(255, 204, 0, 0.2);
 }
 
 #security-category .service-card:hover .service-icon {
     box-shadow: 0 12px 25px rgba(255, 204, 0, 0.3);
 }
 
 /* Über uns */
 .about {
     padding: 100px 0;
     background-color: var(--background-color);
 }
 
 .about-content {
     display: flex;
     gap: 50px;
     margin-top: 40px;
 }
 
 .about-text {
     flex: 1;
 }
 
 .about-text h3 {
     color: var(--primary-color);
     margin-bottom: 20px;
     font-size: 1.4rem;
 }
 
 .about-text > p {
     margin-bottom: 30px;
     line-height: 1.6;
     font-size: 1.1rem;
 }
 
 .about-section {
     margin-bottom: 25px;
 }
 
 .about-section h4 {
     color: var(--text-color);
     margin-bottom: 10px;
     font-size: 1.2rem;
 }
 
 .about-section p {
     margin-bottom: 15px;
     line-height: 1.6;
 }
 
 .about-cta {
     margin-top: 30px;
 }
 
 /* Bildwechsel-Slider */
 .about-image-slider {
     flex: 1;
     position: relative;
 }
 
 .slider-container {
     width: 100%;
     height: 450px;
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
     transform: scale(1.05);
 }
 
 .slide.active {
     opacity: 1;
     transform: scale(1);
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
     gap: 12px;
 }
 
 .slider-dot {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background-color: var(--border-color);
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
 }
 
 .slider-dot::before {
     content: '';
     position: absolute;
     top: -4px;
     left: -4px;
     right: -4px;
     bottom: -4px;
     border-radius: 50%;
     border: 2px solid transparent;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: var(--primary-color);
 }
 
 .slider-dot.active::before {
     border-color: var(--primary-color);
 }
 
 .slider-dot:hover {
     transform: scale(1.2);
 }
 
 .about-images {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 
 .about-image {
     border-radius: var(--radius-medium);
     overflow: hidden;
     box-shadow: 0 10px 30px var(--shadow-color);
     height: calc(50% - 10px);
 }
 
 .about-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform var(--transition-speed);
 }
 
 .about-image:hover img {
     transform: scale(1.05);
 }
 
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .feature-list {
         flex-direction: column;
     }
     
     .feature {
         width: 100%;
     }
 }
 
 @media (max-width: 768px) {
     .features {
         padding: 70px 0;
     }
     
     .features-heading h2 {
         font-size: 32px;
     }
     
     .features-heading p {
         font-size: 18px;
     }
     
     .feature {
         padding: 30px 25px;
     }
     
     .feature-icon {
         width: 90px;
         height: 90px;
         margin-bottom: 20px;
     }
     
     .feature-icon img {
         width: 45px;
         height: 45px;
     }
     
     .feature h3 {
         font-size: 20px;
         margin-bottom: 10px;
     }
     
     .feature p {
         font-size: 15px;
     }
 }
 
 /* Verbesserte Dropdown-Auswahl für den dunklen Modus */
 .form-group select {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b3b3b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     cursor: pointer;
 }
 
 .form-group select:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group select option {
     background-color: #1a1a1a;
     color: #e6e6e6;
     padding: 10px;
 }
 
 .form-group select:hover {
     background: rgba(40, 40, 40, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Honeypot-Feld zum Schutz vor Spam-Bots */
 .honeypot-field {
     display: none !important;
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     height: 0;
     width: 0;
     margin: 0;
     padding: 0;
     border: none;
     z-index: -1;
 }
 
 /* Styling für Formularvalidierung und Danke-Nachricht */
 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--error-color);
     background-color: rgba(220, 53, 69, 0.05);
 }
 
 .error-message {
     color: var(--error-color);
     font-size: 14px;
     margin-top: 5px;
     font-weight: 500;
 }
 
 .thank-you-message {
     background: rgba(40, 167, 69, 0.1);
     border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: 12px;
     padding: 40px;
     text-align: center;
     animation: fadeIn 0.5s ease;
 }
 
 .thank-you-message h3 {
     color: var(--success-color);
     margin-bottom: 20px;
     font-size: 28px;
 }
 
 .thank-you-message p {
     color: var(--text-color);
     margin-bottom: 30px;
     font-size: 18px;
 }
 
 .new-message-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
 }
 
 .new-message-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Styling für das Quiz-CAPTCHA */
 .captcha-container {
     margin-bottom: 25px;
     background: rgba(51, 153, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(51, 153, 255, 0.1);
 }
 
 .captcha-container label {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
 }
 
 #captcha-question {
     color: var(--primary-color);
     cursor: pointer;
     padding: 2px 5px;
     border-radius: 4px;
     transition: all 0.3s ease;
     font-weight: 700;
 }
 
 #captcha-question:hover {
     background-color: rgba(51, 153, 255, 0.1);
 }
 
 #captcha-question::after {
     content: " 🔄";
     font-size: 0.8em;
     opacity: 0.7;
 }
 
 .captcha-container input[type="text"] {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .captcha-container input[type="text"]:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 /* Hinweis unter dem CAPTCHA */
 .captcha-container::after {
     content: "Klicken Sie auf die Frage, um eine neue zu generieren";
     display: block;
     font-size: 12px;
     color: var(--text-color-light);
     margin-top: 8px;
     font-style: italic;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .captcha-container {
         padding: 15px;
     }
     
     .captcha-container input[type="text"] {
         padding: 12px;
     }
 }
 
 /* Blauer "Über uns"-Bereich */
 .about-section {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 80px 0;
     position: relative;
     margin: 100px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .about-section::before,
 .about-section::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 50px;
 }
 
 .about-section::before {
     top: -25px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .about-section::after {
     bottom: -25px;
     background: linear-gradient(315deg, transparent 25px, #0066cc 0) bottom left,
                 linear-gradient(45deg, transparent 25px, #004080 0) bottom right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 /* Verbesserte dekorative Kurven im Hintergrund */
 .about-section .curve {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     transition: all 15s ease-in-out;
 }
 
 .about-section .curve-1 {
     top: -50px;
     right: -50px;
     width: 400px;
     height: 400px;
     opacity: 0.08;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s infinite alternate;
 }
 
 .about-section .curve-2 {
     bottom: -100px;
     left: -100px;
     width: 500px;
     height: 500px;
     opacity: 0.05;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 15s infinite alternate-reverse;
 }
 
 .about-section .curve-3 {
     top: 40%;
     left: 45%;
     width: 800px;
     height: 300px;
     opacity: 0.03;
     background: #ffffff;
     border-radius: 100%;
     transform: translate(-50%, -50%) rotate(30deg);
     animation: rotate-slow 30s infinite linear;
 }
 
 .about-section .curve-4 {
     top: 15%;
     left: 5%;
     width: 200px;
     height: 200px;
     opacity: 0.1;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(60px);
     animation: pulse 8s infinite alternate;
 }
 
 .about-section .curve-5 {
     bottom: 20%;
     right: 5%;
     width: 150px;
     height: 150px;
     opacity: 0.07;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 12s infinite alternate-reverse;
 }
 
 @keyframes float-slow {
     0% {
         transform: translateY(0) translateX(0);
     }
     100% {
         transform: translateY(30px) translateX(20px);
     }
 }
 
 @keyframes rotate-slow {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 @keyframes pulse {
     0% {
         opacity: 0.04;
         transform: scale(1);
     }
     100% {
         opacity: 0.1;
         transform: scale(1.2);
     }
 }
 
 .about-section .container {
     position: relative;
     z-index: 2;
 }
 
 /* Anpassung der Statistik für "Langjährige Erfahrung" */
 .stat-item:first-child .stat-number {
     font-size: 36px;
     letter-spacing: 1px;
 }
 
 .about-section h2 {
     color: #ffffff;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .about-section h2::after {
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.3));
 }
 
 .about-section h3 {
     color: #ffcc00;
     font-size: 1.4rem;
     margin-bottom: 25px;
     letter-spacing: 1px;
 }
 
 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }
 
 .about-text {
     flex: 1;
     min-width: 300px;
 }
 
 .about-text p {
     margin-bottom: 25px;
     font-size: 17px;
     line-height: 1.8;
 }
 
 .about-text strong {
     color: #ffcc00;
     font-weight: 600;
 }
 
 .about-text p:last-child {
     margin-bottom: 0;
 }
 
 /* Bildslider im Über uns-Bereich */
 .about-image-slider {
     flex: 1;
     min-width: 300px;
     position: relative;
 }
 
 .slider-container {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     height: 400px;
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease;
 }
 
 .slide.active {
     opacity: 1;
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }
 
 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.3);
     border: none;
     margin: 0 5px;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: #ffcc00;
     transform: scale(1.2);
 }
 
 .slider-dot:hover {
     background-color: rgba(255, 204, 0, 0.7);
 }
 
 /* Anpassung der Statistik-Sektion */
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 /* Reset und Grundeinstellungen */
 :root {
     --primary-color: #0066cc; /* Blau - steht für Sauberkeit, Frische */
     --primary-dark: #004d99;
     --primary-light: #3399ff;
     --secondary-color: #ffcc00; /* Gelb - steht für Sauberkeit, Hygiene */
     --secondary-dark: #e6b800;
     --secondary-light: #ffdb4d;
     --accent-color: #00cc99; /* Türkis - steht für Frische */
     --accent-dark: #009973;
     --accent-light: #33ffcc;
     --text-color: #333333;
     --text-color-light: #666666;
     --background-color: #ffffff;
     --background-alt: #f5f8fc;
     --border-color: #e0e0e0;
     --shadow-color: rgba(0, 0, 0, 0.1);
     --success-color: #28a745;
     --error-color: #dc3545;
     --warning-color: #ffc107;
     --info-color: #17a2b8;
     --font-main: 'Roboto', sans-serif;
     --transition-speed: 0.3s;
     --container-width: 1200px;
     --radius-small: 4px;
     --radius-medium: 8px;
     --radius-large: 12px;
     --header-height: 80px;
     --footer-bg: #222;
     --footer-text: #eee;
     
     /* RGB-Varianten für Transparenz */
     --primary-color-rgb: 0, 102, 204;
     --secondary-color-rgb: 255, 204, 0;
     --accent-color-rgb: 0, 204, 153;
 }
 
 /* Dark Mode Variablen */
 body.dark-mode {
     --primary-color: #3399ff;
     --primary-dark: #0066cc;
     --primary-light: #66b3ff;
     --secondary-color: #00cc99;
     --secondary-dark: #009973;
     --secondary-light: #33ffcc;
     --accent-color: #ffcc00;
     --accent-dark: #e6b800;
     --accent-light: #ffdb4d;
     --text-color: #e0e0e0;
     --text-color-light: #b3b3b3;
     --background-color: #121212;
     --background-alt: #1e1e1e;
     --border-color: #333333;
     --shadow-color: rgba(0, 0, 0, 0.3);
     --footer-bg: #111;
     --footer-text: #ddd;
 }
 
 /* Barrierefreiheit: Größere Schrift */
 .large-font {
     font-size: 110%;
 }
 
 /* Barrierefreiheit: Sehr große Schrift */
 .x-large-font {
     font-size: 120%;
 }
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 body {
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
     line-height: 1.6;
     color: var(--text-color);
     background-color: var(--background-color);
     transition: background-color var(--transition-speed), color var(--transition-speed);
 }
 
 /* Bessere Fokus-Stile für die Tastaturnavigation */
 :focus-visible {
     outline: 3px solid var(--primary-color);
     outline-offset: 2px;
 }
 
 /* Container für Content-Bereiche */
 .container {
     max-width: var(--container-width);
     margin: 0 auto;
     padding: 0 20px;
 }
 
 /* Typografie */
 h1, h2, h3, h4, h5, h6 {
     font-weight: 700;
     line-height: 1.3;
     margin-bottom: 1rem;
     color: var(--text-color);
 }
 
 h1 {
     font-size: 3rem;
     margin-bottom: 1.5rem;
     letter-spacing: -0.5px;
 }
 
 h2 {
     font-size: 2.5rem;
     margin-bottom: 2rem;
     text-align: center;
     position: relative;
     padding-bottom: 1rem;
 }
 
 h2::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
     background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
     border-radius: 3px;
 }
 
 h3 {
     font-size: 1.75rem;
     color: var(--primary-dark);
 }
 
 h4 {
     font-size: 1.25rem;
     font-weight: 600;
 }
 
 p {
     margin-bottom: 1.5rem;
 }
 
 a {
     color: var(--primary-color);
     text-decoration: none;
     transition: color var(--transition-speed);
 }
 
 a:hover {
     color: var(--secondary-color);
 }
 
 img {
     max-width: 100%;
     height: auto;
 }
 
 ul, ol {
     margin-left: 1.5rem;
     margin-bottom: 1rem;
 }
 
 /* Buttons und Links */
 .btn {
     display: inline-block;
     padding: 14px 30px;
     border-radius: 30px;
     font-weight: 600;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
     transition: all 0.3s ease;
     border: none;
     font-size: 1rem;
     letter-spacing: 0.5px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     position: relative;
     overflow: hidden;
     z-index: 1;
 }
 
 .btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.7s ease;
     z-index: -1;
 }
 
 .btn:hover::before {
     left: 100%;
 }
 
 .primary-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
 }
 
 .primary-btn:hover {
     background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
     transform: translateY(-3px);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
 }
 
 .secondary-btn {
     background: transparent;
     color: var(--primary-color);
     border: 2px solid var(--primary-color);
 }
 
 .secondary-btn:hover {
     background-color: var(--primary-color);
     color: white;
     transform: translateY(-3px);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
 }
 
 .cta-btn {
     font-weight: 700;
     padding: 15px 32px;
 }
 
 /* Animierter CTA-Button */
 .cta-btn {
     position: relative;
     overflow: hidden;
     z-index: 1;
 }
 
 .cta-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.7s ease;
     z-index: -1;
 }
 
 .cta-btn:hover::before {
     left: 100%;
 }
 
 /* Header und Navigation */
 header {
     position: sticky;
     top: 0;
     background-color: var(--background-color);
     box-shadow: 0 2px 10px var(--shadow-color);
     z-index: 100;
     transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
 }
 
 .header-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: var(--header-height);
 }
 
 .logo img {
     max-height: 50px;
     transition: filter var(--transition-speed);
 }
 
 .dark-mode .logo img {
     filter: brightness(1.2);
 }
 
 nav {
     display: flex;
     align-items: center;
 }
 
 .nav-links {
     display: flex;
     gap: 25px;
 }
 
 .nav-links a {
     color: var(--text-color);
     font-weight: 500;
     position: relative;
 }
 
 .nav-links a:hover {
     color: var(--primary-color);
 }
 
 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     background-color: var(--primary-color);
     transition: width var(--transition-speed);
 }
 
 .nav-links a:hover::after {
     width: 100%;
 }
 
 .accessibility-controls {
     margin-left: 20px;
     display: flex;
     align-items: center;
 }
 
 .dark-mode-toggle {
     background: none;
     border: none;
     cursor: pointer;
     padding: 5px;
     color: var(--text-color);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: color 0.3s ease;
 }
 
 .dark-mode-toggle:hover {
     color: var(--primary-color);
 }
 
 .dark-mode-toggle svg {
     width: 24px;
     height: 24px;
 }
 
 /* Scroll-Indikator */
 .scroll-indicator {
     position: sticky;
     top: var(--header-height);
     height: 3px;
     background-color: var(--primary-color);
     width: 0;
     z-index: 100;
     transition: width 0.1s ease-out;
 }
 
 /* Parallax-Effekte */
 .parallax-element {
     will-change: transform;
     transition: transform 0.1s ease-out;
 }
 
 .parallax-bg {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }
 
 /* Hero-Bereich */
 .hero {
     position: relative;
     padding: 120px 0 100px;
     background: linear-gradient(135deg, #004d99, #0066cc);
     color: white;
     overflow: hidden;
 }
 
 .hero-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/cleaning-pattern.png');
     background-size: cover;
     opacity: 0.08;
     z-index: 1;
 }
 
 .hero .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 30% 50%, rgba(0, 102, 204, 0.4) 0%, rgba(0, 51, 102, 0.8) 100%);
     z-index: 2;
 }
 
 .hero .container {
     position: relative;
     z-index: 3;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 60px;
 }
 
 .hero-content {
     flex: 1;
     max-width: 600px;
 }
 
 .hero-badge {
     display: inline-block;
     background: linear-gradient(135deg, rgba(255, 204, 0, 0.9), rgba(230, 184, 0, 0.9));
     color: #333;
     padding: 8px 16px;
     border-radius: 30px;
     font-size: 0.9rem;
     font-weight: 600;
     margin-bottom: 20px;
     box-shadow: 0 4px 10px rgba(255, 204, 0, 0.3);
 }
 
 .hero h1 {
     font-size: 3.2rem;
     line-height: 1.2;
     margin-bottom: 20px;
     color: white;
 }
 
 .hero h1 .highlight {
     color: var(--secondary-color);
     position: relative;
     display: inline-block;
 }
 
 .hero h1 .highlight::after {
     content: '';
     position: absolute;
     bottom: 5px;
     left: 0;
     width: 100%;
     height: 8px;
     background-color: rgba(255, 204, 0, 0.3);
     z-index: -1;
     border-radius: 4px;
 }
 
 .hero-subtitle {
     font-size: 1.2rem;
     margin-bottom: 30px;
     color: rgba(255, 255, 255, 0.9);
     line-height: 1.6;
 }
 
 .hero-features {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
     margin-bottom: 40px;
 }
 
 .hero-feature {
     display: flex;
     align-items: center;
     gap: 10px;
     background: rgba(255, 255, 255, 0.1);
     padding: 10px 15px;
     border-radius: 8px;
     border-left: 3px solid var(--secondary-color);
     transition: all 0.3s ease;
 }
 
 .hero-feature:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .feature-icon-small {
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--secondary-color);
     width: 24px;
     height: 24px;
     border-radius: 50%;
 }
 
 .feature-icon-small img {
     width: 14px;
     height: 14px;
     filter: brightness(0);
 }
 
 .hero-feature span {
     font-weight: 500;
     font-size: 0.95rem;
 }
 
 .hero-cta {
     display: flex;
     gap: 20px;
 }
 
 .hero-cta .primary-btn {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 10px 20px rgba(255, 204, 0, 0.3);
 }
 
 .hero-cta .primary-btn:hover {
     background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-color));
     box-shadow: 0 15px 25px rgba(255, 204, 0, 0.4);
     transform: translateY(-3px);
 }
 
 .hero-cta .secondary-btn {
     background: rgba(255, 255, 255, 0.1);
     color: white;
     border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 .hero-cta .secondary-btn:hover {
     background: rgba(255, 255, 255, 0.2);
     border-color: rgba(255, 255, 255, 0.5);
     transform: translateY(-3px);
 }
 
 .hero-image-container {
     flex: 1;
     position: relative;
     max-width: 500px;
 }
 
 .hero-image {
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     position: relative;
     height: 400px;
     border: 5px solid white;
 }
 
 .hero-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }
 
 .hero-image:hover img {
     transform: scale(1.05);
 }
 
 .image-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
 }
 
 .hero-image-badge {
     position: absolute;
     bottom: -25px;
     right: -25px;
     width: 120px;
     height: 120px;
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     animation: pulse 2s infinite ease-in-out;
     border: 3px solid white;
 }
 
 .badge-content {
     text-align: center;
     color: #333;
 }
 
 .badge-number {
     font-size: 2rem;
     font-weight: 700;
     display: block;
     line-height: 1;
 }
 
 .badge-text {
     font-size: 0.8rem;
     font-weight: 500;
 }
 
 .hero-wave {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100px;
     z-index: 4;
 }
 
 .hero-wave svg {
     width: 100%;
     height: 100%;
 }
 
 .hero-wave path {
     fill: var(--background-color);
 }
 
 /* Responsive Anpassungen für den Hero-Bereich */
 @media (max-width: 1200px) {
     .hero h1 {
         font-size: 2.8rem;
     }
     
     .hero-image {
         height: 350px;
     }
 }
 
 @media (max-width: 992px) {
     .hero {
         padding: 100px 0 80px;
     }
     
     .hero h1 {
         font-size: 2.4rem;
     }
     
     .hero-subtitle {
         font-size: 1.1rem;
     }
     
     .hero-image {
         height: 320px;
     }
     
     .hero-image-badge {
         width: 100px;
         height: 100px;
         bottom: -20px;
         right: -20px;
     }
     
     .badge-number {
         font-size: 1.8rem;
     }
     
     .badge-text {
         font-size: 0.7rem;
     }
 }
 
 @media (max-width: 768px) {
     .hero {
         padding: 80px 0 60px;
     }
     
     .hero .container {
         flex-direction: column;
         gap: 40px;
     }
     
     .hero-content {
         max-width: 100%;
         text-align: center;
     }
     
     .hero h1 {
         font-size: 2.2rem;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .hero-image-container {
         max-width: 100%;
     }
     
     .hero-image {
         height: 300px;
     }
 }
 
 @media (max-width: 576px) {
     .hero {
         padding: 60px 0 40px;
     }
     
     .hero h1 {
         font-size: 1.8rem;
     }
     
     .hero-subtitle {
         font-size: 1rem;
     }
     
     .hero-features {
         flex-direction: column;
         align-items: center;
     }
     
     .hero-cta {
         flex-direction: column;
         width: 100%;
     }
     
     .hero-image {
         height: 250px;
     }
     
     .hero-image-badge {
         width: 80px;
         height: 80px;
         bottom: -15px;
         right: -15px;
     }
     
     .badge-number {
         font-size: 1.5rem;
     }
     
     .badge-text {
         font-size: 0.6rem;
     }
 }
 
 /* Neues professionelles Design für den Leistungsbereich */
 .services {
     padding: 120px 0;
     background-color: #1a1a1a;
     position: relative;
     overflow: hidden;
 }
 
 /* Eleganter Hintergrund mit Farbverlauf */
 .services::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 10% 10%, rgba(0, 102, 204, 0.1), transparent 40%),
                 radial-gradient(circle at 90% 90%, rgba(0, 204, 153, 0.1), transparent 40%);
     z-index: 0;
 }
 
 .services .container {
     position: relative;
     z-index: 1;
 }
 
 /* Verbesserte Hauptüberschrift */
 .services h2.main-title {
     font-size: 48px;
     font-weight: 700;
     color: #ffffff;
     text-align: center;
     margin-bottom: 15px;
     position: relative;
     display: inline-block;
     left: 50%;
     transform: translateX(-50%);
 }
 
 .services h2.main-title::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .services .subtitle {
     font-size: 20px;
     color: #b3b3b3;
     text-align: center;
     max-width: 800px;
     margin: 30px auto 60px;
     line-height: 1.7;
 }
 
 /* Kategorie-Überschriften */
 .services .category-title {
     font-size: 36px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 50px;
     position: relative;
     display: inline-block;
     padding-bottom: 15px;
 }
 
 .services .category-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(to right, var(--primary-color), transparent);
     border-radius: 1.5px;
 }
 
 /* Nebeneinander-Anordnung der Leistungskategorien */
 .services-categories-container {
     display: flex;
     gap: 40px;
     margin-top: 60px;
 }
 
 .services-category {
     flex: 1;
     margin-bottom: 0;
 }
 
 .services-category-title {
     font-size: 32px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Anpassung der Service-Karten für die neue Anordnung */
 .service-cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     margin-top: 40px;
 }
 
 /* Responsive Anpassungen für die Service-Karten */
 @media (max-width: 992px) {
     .service-cards {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
 @media (max-width: 768px) {
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Verbesserte Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);
 }
 
 .service-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
     border-color: var(--primary-light);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;
     height: 90px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.2);
     border: 3px solid rgba(255, 255, 255, 0.2);
 }
 
 .service-card:hover .service-icon {
     transform: scale(1.1) rotate(5deg);
     box-shadow: 0 12px 25px rgba(0, 102, 204, 0.3);
 }
 
 /* Unterschiedliche Farben für die Sicherheitsleistungen */
 #security-category .service-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 8px 20px rgba(255, 204, 0, 0.2);
 }
 
 #security-category .service-card:hover .service-icon {
     box-shadow: 0 12px 25px rgba(255, 204, 0, 0.3);
 }
 
 /* Über uns */
 .about {
     padding: 100px 0;
     background-color: var(--background-color);
 }
 
 .about-content {
     display: flex;
     gap: 50px;
     margin-top: 40px;
 }
 
 .about-text {
     flex: 1;
 }
 
 .about-text h3 {
     color: var(--primary-color);
     margin-bottom: 20px;
     font-size: 1.4rem;
 }
 
 .about-text > p {
     margin-bottom: 30px;
     line-height: 1.6;
     font-size: 1.1rem;
 }
 
 .about-section {
     margin-bottom: 25px;
 }
 
 .about-section h4 {
     color: var(--text-color);
     margin-bottom: 10px;
     font-size: 1.2rem;
 }
 
 .about-section p {
     margin-bottom: 15px;
     line-height: 1.6;
 }
 
 .about-cta {
     margin-top: 30px;
 }
 
 /* Bildwechsel-Slider */
 .about-image-slider {
     flex: 1;
     position: relative;
 }
 
 .slider-container {
     width: 100%;
     height: 450px;
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
     transform: scale(1.05);
 }
 
 .slide.active {
     opacity: 1;
     transform: scale(1);
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
     gap: 12px;
 }
 
 .slider-dot {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background-color: var(--border-color);
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
 }
 
 .slider-dot::before {
     content: '';
     position: absolute;
     top: -4px;
     left: -4px;
     right: -4px;
     bottom: -4px;
     border-radius: 50%;
     border: 2px solid transparent;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: var(--primary-color);
 }
 
 .slider-dot.active::before {
     border-color: var(--primary-color);
 }
 
 .slider-dot:hover {
     transform: scale(1.2);
 }
 
 .about-images {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 
 .about-image {
     border-radius: var(--radius-medium);
     overflow: hidden;
     box-shadow: 0 10px 30px var(--shadow-color);
     height: calc(50% - 10px);
 }
 
 .about-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform var(--transition-speed);
 }
 
 .about-image:hover img {
     transform: scale(1.05);
 }
 
 /* Anpassung der Statistiken nach dem Bild-Beispiel */
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren Rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(2)::before {
     background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .feature-list {
         flex-direction: column;
     }
     
     .feature {
         width: 100%;
     }
 }
 
 @media (max-width: 768px) {
     .features {
         padding: 70px 0;
     }
     
     .features-heading h2 {
         font-size: 32px;
     }
     
     .features-heading p {
         font-size: 18px;
     }
     
     .feature {
         padding: 30px 25px;
     }
     
     .feature-icon {
         width: 90px;
         height: 90px;
         margin-bottom: 20px;
     }
     
     .feature-icon img {
         width: 45px;
         height: 45px;
     }
     
     .feature h3 {
         font-size: 20px;
         margin-bottom: 10px;
     }
     
     .feature p {
         font-size: 15px;
     }
 }
 
 /* Verbesserte Dropdown-Auswahl für den dunklen Modus */
 .form-group select {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b3b3b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     cursor: pointer;
 }
 
 .form-group select:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group select option {
     background-color: #1a1a1a;
     color: #e6e6e6;
     padding: 10px;
 }
 
 .form-group select:hover {
     background: rgba(40, 40, 40, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Honeypot-Feld zum Schutz vor Spam-Bots */
 .honeypot-field {
     display: none !important;
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     height: 0;
     width: 0;
     margin: 0;
     padding: 0;
     border: none;
     z-index: -1;
 }
 
 /* Styling für Formularvalidierung und Danke-Nachricht */
 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--error-color);
     background-color: rgba(220, 53, 69, 0.05);
 }
 
 .error-message {
     color: var(--error-color);
     font-size: 14px;
     margin-top: 5px;
     font-weight: 500;
 }
 
 .thank-you-message {
     background: rgba(40, 167, 69, 0.1);
     border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: 12px;
     padding: 40px;
     text-align: center;
     animation: fadeIn 0.5s ease;
 }
 
 .thank-you-message h3 {
     color: var(--success-color);
     margin-bottom: 20px;
     font-size: 28px;
 }
 
 .thank-you-message p {
     color: var(--text-color);
     margin-bottom: 30px;
     font-size: 18px;
 }
 
 .new-message-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
 }
 
 .new-message-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Styling für das Quiz-CAPTCHA */
 .captcha-container {
     margin-bottom: 25px;
     background: rgba(51, 153, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(51, 153, 255, 0.1);
 }
 
 .captcha-container label {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
 }
 
 #captcha-question {
     color: var(--primary-color);
     cursor: pointer;
     padding: 2px 5px;
     border-radius: 4px;
     transition: all 0.3s ease;
     font-weight: 700;
 }
 
 #captcha-question:hover {
     background-color: rgba(51, 153, 255, 0.1);
 }
 
 #captcha-question::after {
     content: " 🔄";
     font-size: 0.8em;
     opacity: 0.7;
 }
 
 .captcha-container input[type="text"] {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .captcha-container input[type="text"]:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 /* Hinweis unter dem CAPTCHA */
 .captcha-container::after {
     content: "Klicken Sie auf die Frage, um eine neue zu generieren";
     display: block;
     font-size: 12px;
     color: var(--text-color-light);
     margin-top: 8px;
     font-style: italic;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .captcha-container {
         padding: 15px;
     }
     
     .captcha-container input[type="text"] {
         padding: 12px;
     }
 }
 
 /* Blauer "Über uns"-Bereich */
 .about-section {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 80px 0;
     position: relative;
     margin: 100px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .about-section::before,
 .about-section::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 50px;
 }
 
 .about-section::before {
     top: -25px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .about-section::after {
     bottom: -25px;
     background: linear-gradient(315deg, transparent 25px, #0066cc 0) bottom left,
                 linear-gradient(45deg, transparent 25px, #004080 0) bottom right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 /* Verbesserte dekorative Kurven im Hintergrund */
 .about-section .curve {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     transition: all 15s ease-in-out;
 }
 
 .about-section .curve-1 {
     top: -50px;
     right: -50px;
     width: 400px;
     height: 400px;
     opacity: 0.08;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s infinite alternate;
 }
 
 .about-section .curve-2 {
     bottom: -100px;
     left: -100px;
     width: 500px;
     height: 500px;
     opacity: 0.05;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 15s infinite alternate-reverse;
 }
 
 .about-section .curve-3 {
     top: 40%;
     left: 45%;
     width: 800px;
     height: 300px;
     opacity: 0.03;
     background: #ffffff;
     border-radius: 100%;
     transform: translate(-50%, -50%) rotate(30deg);
     animation: rotate-slow 30s infinite linear;
 }
 
 .about-section .curve-4 {
     top: 15%;
     left: 5%;
     width: 200px;
     height: 200px;
     opacity: 0.1;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(60px);
     animation: pulse 8s infinite alternate;
 }
 
 .about-section .curve-5 {
     bottom: 20%;
     right: 5%;
     width: 150px;
     height: 150px;
     opacity: 0.07;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 12s infinite alternate-reverse;
 }
 
 @keyframes float-slow {
     0% {
         transform: translateY(0) translateX(0);
     }
     100% {
         transform: translateY(30px) translateX(20px);
     }
 }
 
 @keyframes rotate-slow {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 @keyframes pulse {
     0% {
         opacity: 0.04;
         transform: scale(1);
     }
     100% {
         opacity: 0.1;
         transform: scale(1.2);
     }
 }
 
 .about-section .container {
     position: relative;
     z-index: 2;
 }
 
 /* Anpassung der Statistik für "Langjährige Erfahrung" */
 .stat-item:first-child .stat-number {
     font-size: 36px;
     letter-spacing: 1px;
 }
 
 .about-section h2 {
     color: #ffffff;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .about-section h2::after {
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.3));
 }
 
 .about-section h3 {
     color: #ffcc00;
     font-size: 1.4rem;
     margin-bottom: 25px;
     letter-spacing: 1px;
 }
 
 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }
 
 .about-text {
     flex: 1;
     min-width: 300px;
 }
 
 .about-text p {
     margin-bottom: 25px;
     font-size: 17px;
     line-height: 1.8;
 }
 
 .about-text strong {
     color: #ffcc00;
     font-weight: 600;
 }
 
 .about-text p:last-child {
     margin-bottom: 0;
 }
 
 /* Bildslider im Über uns-Bereich */
 .about-image-slider {
     flex: 1;
     min-width: 300px;
     position: relative;
 }
 
 .slider-container {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     height: 400px;
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease;
 }
 
 .slide.active {
     opacity: 1;
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }
 
 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.3);
     border: none;
     margin: 0 5px;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: #ffcc00;
     transform: scale(1.2);
 }
 
 .slider-dot:hover {
     background-color: rgba(255, 204, 0, 0.7);
 }
 
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(2)::before {
     background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .feature-list {
         flex-direction: column;
     }
     
     .feature {
         width: 100%;
     }
 }
 
 @media (max-width: 768px) {
     .features {
         padding: 70px 0;
     }
     
     .features-heading h2 {
         font-size: 32px;
     }
     
     .features-heading p {
         font-size: 18px;
     }
     
     .feature {
         padding: 30px 25px;
     }
     
     .feature-icon {
         width: 90px;
         height: 90px;
         margin-bottom: 20px;
     }
     
     .feature-icon img {
         width: 45px;
         height: 45px;
     }
     
     .feature h3 {
         font-size: 20px;
         margin-bottom: 10px;
     }
     
     .feature p {
         font-size: 15px;
     }
 }
 
 /* Verbesserte Dropdown-Auswahl für den dunklen Modus */
 .form-group select {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b3b3b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     cursor: pointer;
 }
 
 .form-group select:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group select option {
     background-color: #1a1a1a;
     color: #e6e6e6;
     padding: 10px;
 }
 
 .form-group select:hover {
     background: rgba(40, 40, 40, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Honeypot-Feld zum Schutz vor Spam-Bots */
 .honeypot-field {
     display: none !important;
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     height: 0;
     width: 0;
     margin: 0;
     padding: 0;
     border: none;
     z-index: -1;
 }
 
 /* Styling für Formularvalidierung und Danke-Nachricht */
 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--error-color);
     background-color: rgba(220, 53, 69, 0.05);
 }
 
 .error-message {
     color: var(--error-color);
     font-size: 14px;
     margin-top: 5px;
     font-weight: 500;
 }
 
 .thank-you-message {
     background: rgba(40, 167, 69, 0.1);
     border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: 12px;
     padding: 40px;
     text-align: center;
     animation: fadeIn 0.5s ease;
 }
 
 .thank-you-message h3 {
     color: var(--success-color);
     margin-bottom: 20px;
     font-size: 28px;
 }
 
 .thank-you-message p {
     color: var(--text-color);
     margin-bottom: 30px;
     font-size: 18px;
 }
 
 .new-message-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
 }
 
 .new-message-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Styling für das Quiz-CAPTCHA */
 .captcha-container {
     margin-bottom: 25px;
     background: rgba(51, 153, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(51, 153, 255, 0.1);
 }
 
 .captcha-container label {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
 }
 
 #captcha-question {
     color: var(--primary-color);
     cursor: pointer;
     padding: 2px 5px;
     border-radius: 4px;
     transition: all 0.3s ease;
     font-weight: 700;
 }
 
 #captcha-question:hover {
     background-color: rgba(51, 153, 255, 0.1);
 }
 
 #captcha-question::after {
     content: " 🔄";
     font-size: 0.8em;
     opacity: 0.7;
 }
 
 .captcha-container input[type="text"] {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .captcha-container input[type="text"]:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 /* Hinweis unter dem CAPTCHA */
 .captcha-container::after {
     content: "Klicken Sie auf die Frage, um eine neue zu generieren";
     display: block;
     font-size: 12px;
     color: var(--text-color-light);
     margin-top: 8px;
     font-style: italic;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .captcha-container {
         padding: 15px;
     }
     
     .captcha-container input[type="text"] {
         padding: 12px;
     }
 }
 
 /* Blauer "Über uns"-Bereich */
 .about-section {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 80px 0;
     position: relative;
     margin: 100px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .about-section::before,
 .about-section::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 50px;
 }
 
 .about-section::before {
     top: -25px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .about-section::after {
     bottom: -25px;
     background: linear-gradient(315deg, transparent 25px, #0066cc 0) bottom left,
                 linear-gradient(45deg, transparent 25px, #004080 0) bottom right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 /* Verbesserte dekorative Kurven im Hintergrund */
 .about-section .curve {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     transition: all 15s ease-in-out;
 }
 
 .about-section .curve-1 {
     top: -50px;
     right: -50px;
     width: 400px;
     height: 400px;
     opacity: 0.08;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s infinite alternate;
 }
 
 .about-section .curve-2 {
     bottom: -100px;
     left: -100px;
     width: 500px;
     height: 500px;
     opacity: 0.05;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 15s infinite alternate-reverse;
 }
 
 .about-section .curve-3 {
     top: 40%;
     left: 45%;
     width: 800px;
     height: 300px;
     opacity: 0.03;
     background: #ffffff;
     border-radius: 100%;
     transform: translate(-50%, -50%) rotate(30deg);
     animation: rotate-slow 30s infinite linear;
 }
 
 .about-section .curve-4 {
     top: 15%;
     left: 5%;
     width: 200px;
     height: 200px;
     opacity: 0.1;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(60px);
     animation: pulse 8s infinite alternate;
 }
 
 .about-section .curve-5 {
     bottom: 20%;
     right: 5%;
     width: 150px;
     height: 150px;
     opacity: 0.07;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 12s infinite alternate-reverse;
 }
 
 @keyframes float-slow {
     0% {
         transform: translateY(0) translateX(0);
     }
     100% {
         transform: translateY(30px) translateX(20px);
     }
 }
 
 @keyframes rotate-slow {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 @keyframes pulse {
     0% {
         opacity: 0.04;
         transform: scale(1);
     }
     100% {
         opacity: 0.1;
         transform: scale(1.2);
     }
 }
 
 .about-section .container {
     position: relative;
     z-index: 2;
 }
 
 /* Anpassung der Statistik für "Langjährige Erfahrung" */
 .stat-item:first-child .stat-number {
     font-size: 36px;
     letter-spacing: 1px;
 }
 
 .about-section h2 {
     color: #ffffff;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .about-section h2::after {
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.3));
 }
 
 .about-section h3 {
     color: #ffcc00;
     font-size: 1.4rem;
     margin-bottom: 25px;
     letter-spacing: 1px;
 }
 
 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }
 
 .about-text {
     flex: 1;
     min-width: 300px;
 }
 
 .about-text p {
     margin-bottom: 25px;
     font-size: 17px;
     line-height: 1.8;
 }
 
 .about-text strong {
     color: #ffcc00;
     font-weight: 600;
 }
 
 .about-text p:last-child {
     margin-bottom: 0;
 }
 
 /* Bildslider im Über uns-Bereich */
 .about-image-slider {
     flex: 1;
     min-width: 300px;
     position: relative;
 }
 
 .slider-container {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     height: 400px;
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease;
 }
 
 .slide.active {
     opacity: 1;
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }
 
 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.3);
     border: none;
     margin: 0 5px;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: #ffcc00;
     transform: scale(1.2);
 }
 
 .slider-dot:hover {
     background-color: rgba(255, 204, 0, 0.7);
 }
 
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 /* Verbesserte Hauptüberschrift */
 .services h2.main-title {
     font-size: 48px;
     font-weight: 700;
     color: #ffffff;
     text-align: center;
     margin-bottom: 15px;
     position: relative;
     display: inline-block;
     left: 50%;
     transform: translateX(-50%);
 }
 
 .services h2.main-title::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .services .subtitle {
     font-size: 20px;
     color: #b3b3b3;
     text-align: center;
     max-width: 800px;
     margin: 30px auto 60px;
     line-height: 1.7;
 }
 
 /* Kategorie-Überschriften */
 .services .category-title {
     font-size: 36px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 50px;
     position: relative;
     display: inline-block;
     padding-bottom: 15px;
 }
 
 .services .category-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(to right, var(--primary-color), transparent);
     border-radius: 1.5px;
 }
 
 /* Nebeneinander-Anordnung der Leistungskategorien */
 .services-categories-container {
     display: flex;
     gap: 40px;
     margin-top: 60px;
 }
 
 .services-category {
     flex: 1;
     margin-bottom: 0;
 }
 
 .services-category-title {
     font-size: 32px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Anpassung der Service-Karten für die neue Anordnung */
 .service-cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     margin-top: 40px;
 }
 
 /* Responsive Anpassungen für die Service-Karten */
 @media (max-width: 992px) {
     .service-cards {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
 @media (max-width: 768px) {
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Verbesserte Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);
 }
 
 .service-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
     border-color: var(--primary-light);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;
     height: 90px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.2);
     border: 3px solid rgba(255, 255, 255, 0.2);
 }
 
 .service-card:hover .service-icon {
     transform: scale(1.1) rotate(5deg);
     box-shadow: 0 12px 25px rgba(0, 102, 204, 0.3);
 }
 
 /* Unterschiedliche Farben für die Sicherheitsleistungen */
 #security-category .service-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 8px 20px rgba(255, 204, 0, 0.2);
 }
 
 #security-category .service-card:hover .service-icon {
     box-shadow: 0 12px 25px rgba(255, 204, 0, 0.3);
 }
 
 /* Über uns */
 .about {
     padding: 100px 0;
     background-color: var(--background-color);
 }
 
 .about-content {
     display: flex;
     gap: 50px;
     margin-top: 40px;
 }
 
 .about-text {
     flex: 1;
 }
 
 .about-text h3 {
     color: var(--primary-color);
     margin-bottom: 20px;
     font-size: 1.4rem;
 }
 
 .about-text > p {
     margin-bottom: 30px;
     line-height: 1.6;
     font-size: 1.1rem;
 }
 
 .about-section {
     margin-bottom: 25px;
 }
 
 .about-section h4 {
     color: var(--text-color);
     margin-bottom: 10px;
     font-size: 1.2rem;
 }
 
 .about-section p {
     margin-bottom: 15px;
     line-height: 1.6;
 }
 
 .about-cta {
     margin-top: 30px;
 }
 
 /* Bildwechsel-Slider */
 .about-image-slider {
     flex: 1;
     position: relative;
 }
 
 .slider-container {
     width: 100%;
     height: 450px;
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
     transform: scale(1.05);
 }
 
 .slide.active {
     opacity: 1;
     transform: scale(1);
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
     gap: 12px;
 }
 
 .slider-dot {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background-color: var(--border-color);
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
 }
 
 .slider-dot::before {
     content: '';
     position: absolute;
     top: -4px;
     left: -4px;
     right: -4px;
     bottom: -4px;
     border-radius: 50%;
     border: 2px solid transparent;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: var(--primary-color);
 }
 
 .slider-dot.active::before {
     border-color: var(--primary-color);
 }
 
 .slider-dot:hover {
     transform: scale(1.2);
 }
 
 .about-images {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 
 .about-image {
     border-radius: var(--radius-medium);
     overflow: hidden;
     box-shadow: 0 10px 30px var(--shadow-color);
     height: calc(50% - 10px);
 }
 
 .about-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform var(--transition-speed);
 }
 
 .about-image:hover img {
     transform: scale(1.05);
 }
 
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .feature-list {
         flex-direction: column;
     }
     
     .feature {
         width: 100%;
     }
 }
 
 @media (max-width: 768px) {
     .features {
         padding: 70px 0;
     }
     
     .features-heading h2 {
         font-size: 32px;
     }
     
     .features-heading p {
         font-size: 18px;
     }
     
     .feature {
         padding: 30px 25px;
     }
     
     .feature-icon {
         width: 90px;
         height: 90px;
         margin-bottom: 20px;
     }
     
     .feature-icon img {
         width: 45px;
         height: 45px;
     }
     
     .feature h3 {
         font-size: 20px;
         margin-bottom: 10px;
     }
     
     .feature p {
         font-size: 15px;
     }
 }
 
 /* Verbesserte Dropdown-Auswahl für den dunklen Modus */
 .form-group select {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b3b3b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     cursor: pointer;
 }
 
 .form-group select:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group select option {
     background-color: #1a1a1a;
     color: #e6e6e6;
     padding: 10px;
 }
 
 .form-group select:hover {
     background: rgba(40, 40, 40, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Honeypot-Feld zum Schutz vor Spam-Bots */
 .honeypot-field {
     display: none !important;
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     height: 0;
     width: 0;
     margin: 0;
     padding: 0;
     border: none;
     z-index: -1;
 }
 
 /* Styling für Formularvalidierung und Danke-Nachricht */
 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--error-color);
     background-color: rgba(220, 53, 69, 0.05);
 }
 
 .error-message {
     color: var(--error-color);
     font-size: 14px;
     margin-top: 5px;
     font-weight: 500;
 }
 
 .thank-you-message {
     background: rgba(40, 167, 69, 0.1);
     border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: 12px;
     padding: 40px;
     text-align: center;
     animation: fadeIn 0.5s ease;
 }
 
 .thank-you-message h3 {
     color: var(--success-color);
     margin-bottom: 20px;
     font-size: 28px;
 }
 
 .thank-you-message p {
     color: var(--text-color);
     margin-bottom: 30px;
     font-size: 18px;
 }
 
 .new-message-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
 }
 
 .new-message-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Styling für das Quiz-CAPTCHA */
 .captcha-container {
     margin-bottom: 25px;
     background: rgba(51, 153, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(51, 153, 255, 0.1);
 }
 
 .captcha-container label {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
 }
 
 #captcha-question {
     color: var(--primary-color);
     cursor: pointer;
     padding: 2px 5px;
     border-radius: 4px;
     transition: all 0.3s ease;
     font-weight: 700;
 }
 
 #captcha-question:hover {
     background-color: rgba(51, 153, 255, 0.1);
 }
 
 #captcha-question::after {
     content: " 🔄";
     font-size: 0.8em;
     opacity: 0.7;
 }
 
 .captcha-container input[type="text"] {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .captcha-container input[type="text"]:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 /* Hinweis unter dem CAPTCHA */
 .captcha-container::after {
     content: "Klicken Sie auf die Frage, um eine neue zu generieren";
     display: block;
     font-size: 12px;
     color: var(--text-color-light);
     margin-top: 8px;
     font-style: italic;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .captcha-container {
         padding: 15px;
     }
     
     .captcha-container input[type="text"] {
         padding: 12px;
     }
 }
 
 /* Blauer "Über uns"-Bereich */
 .about-section {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 80px 0;
     position: relative;
     margin: 100px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .about-section::before,
 .about-section::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 50px;
 }
 
 .about-section::before {
     top: -25px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .about-section::after {
     bottom: -25px;
     background: linear-gradient(315deg, transparent 25px, #0066cc 0) bottom left,
                 linear-gradient(45deg, transparent 25px, #004080 0) bottom right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 /* Verbesserte dekorative Kurven im Hintergrund */
 .about-section .curve {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     transition: all 15s ease-in-out;
 }
 
 .about-section .curve-1 {
     top: -50px;
     right: -50px;
     width: 400px;
     height: 400px;
     opacity: 0.08;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s infinite alternate;
 }
 
 .about-section .curve-2 {
     bottom: -100px;
     left: -100px;
     width: 500px;
     height: 500px;
     opacity: 0.05;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 15s infinite alternate-reverse;
 }
 
 .about-section .curve-3 {
     top: 40%;
     left: 45%;
     width: 800px;
     height: 300px;
     opacity: 0.03;
     background: #ffffff;
     border-radius: 100%;
     transform: translate(-50%, -50%) rotate(30deg);
     animation: rotate-slow 30s infinite linear;
 }
 
 .about-section .curve-4 {
     top: 15%;
     left: 5%;
     width: 200px;
     height: 200px;
     opacity: 0.1;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(60px);
     animation: pulse 8s infinite alternate;
 }
 
 .about-section .curve-5 {
     bottom: 20%;
     right: 5%;
     width: 150px;
     height: 150px;
     opacity: 0.07;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 12s infinite alternate-reverse;
 }
 
 @keyframes float-slow {
     0% {
         transform: translateY(0) translateX(0);
     }
     100% {
         transform: translateY(30px) translateX(20px);
     }
 }
 
 @keyframes rotate-slow {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 @keyframes pulse {
     0% {
         opacity: 0.04;
         transform: scale(1);
     }
     100% {
         opacity: 0.1;
         transform: scale(1.2);
     }
 }
 
 .about-section .container {
     position: relative;
     z-index: 2;
 }
 
 /* Anpassung der Statistik für "Langjährige Erfahrung" */
 .stat-item:first-child .stat-number {
     font-size: 36px;
     letter-spacing: 1px;
 }
 
 .about-section h2 {
     color: #ffffff;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .about-section h2::after {
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.3));
 }
 
 .about-section h3 {
     color: #ffcc00;
     font-size: 1.4rem;
     margin-bottom: 25px;
     letter-spacing: 1px;
 }
 
 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }
 
 .about-text {
     flex: 1;
     min-width: 300px;
 }
 
 .about-text p {
     margin-bottom: 25px;
     font-size: 17px;
     line-height: 1.8;
 }
 
 .about-text strong {
     color: #ffcc00;
     font-weight: 600;
 }
 
 .about-text p:last-child {
     margin-bottom: 0;
 }
 
 /* Bildslider im Über uns-Bereich */
 .about-image-slider {
     flex: 1;
     min-width: 300px;
     position: relative;
 }
 
 .slider-container {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     height: 400px;
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease;
 }
 
 .slide.active {
     opacity: 1;
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }
 
 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.3);
     border: none;
     margin: 0 5px;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: #ffcc00;
     transform: scale(1.2);
 }
 
 .slider-dot:hover {
     background-color: rgba(255, 204, 0, 0.7);
 }
 
 /* Anpassung der Statistik-Sektion */
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(2)::before {
     background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .feature-list {
         flex-direction: column;
     }
     
     .feature {
         width: 100%;
     }
 }
 
 @media (max-width: 768px) {
     .features {
         padding: 70px 0;
     }
     
     .features-heading h2 {
         font-size: 32px;
     }
     
     .features-heading p {
         font-size: 18px;
     }
     
     .feature {
         padding: 30px 25px;
     }
     
     .feature-icon {
         width: 90px;
         height: 90px;
         margin-bottom: 20px;
     }
     
     .feature-icon img {
         width: 45px;
         height: 45px;
     }
     
     .feature h3 {
         font-size: 20px;
         margin-bottom: 10px;
     }
     
     .feature p {
         font-size: 15px;
     }
 }
 
 /* Verbesserte Dropdown-Auswahl für den dunklen Modus */
 .form-group select {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b3b3b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     cursor: pointer;
 }
 
 .form-group select:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group select option {
     background-color: #1a1a1a;
     color: #e6e6e6;
     padding: 10px;
 }
 
 .form-group select:hover {
     background: rgba(40, 40, 40, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Honeypot-Feld zum Schutz vor Spam-Bots */
 .honeypot-field {
     display: none !important;
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     height: 0;
     width: 0;
     margin: 0;
     padding: 0;
     border: none;
     z-index: -1;
 }
 
 /* Styling für Formularvalidierung und Danke-Nachricht */
 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--error-color);
     background-color: rgba(220, 53, 69, 0.05);
 }
 
 .error-message {
     color: var(--error-color);
     font-size: 14px;
     margin-top: 5px;
     font-weight: 500;
 }
 
 .thank-you-message {
     background: rgba(40, 167, 69, 0.1);
     border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: 12px;
     padding: 40px;
     text-align: center;
     animation: fadeIn 0.5s ease;
 }
 
 .thank-you-message h3 {
     color: var(--success-color);
     margin-bottom: 20px;
     font-size: 28px;
 }
 
 .thank-you-message p {
     color: var(--text-color);
     margin-bottom: 30px;
     font-size: 18px;
 }
 
 .new-message-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
 }
 
 .new-message-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Styling für das Quiz-CAPTCHA */
 .captcha-container {
     margin-bottom: 25px;
     background: rgba(51, 153, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(51, 153, 255, 0.1);
 }
 
 .captcha-container label {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
 }
 
 #captcha-question {
     color: var(--primary-color);
     cursor: pointer;
     padding: 2px 5px;
     border-radius: 4px;
     transition: all 0.3s ease;
     font-weight: 700;
 }
 
 #captcha-question:hover {
     background-color: rgba(51, 153, 255, 0.1);
 }
 
 #captcha-question::after {
     content: " 🔄";
     font-size: 0.8em;
     opacity: 0.7;
 }
 
 .captcha-container input[type="text"] {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .captcha-container input[type="text"]:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 /* Hinweis unter dem CAPTCHA */
 .captcha-container::after {
     content: "Klicken Sie auf die Frage, um eine neue zu generieren";
     display: block;
     font-size: 12px;
     color: var(--text-color-light);
     margin-top: 8px;
     font-style: italic;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .captcha-container {
         padding: 15px;
     }
     
     .captcha-container input[type="text"] {
         padding: 12px;
     }
 }
 
 /* Blauer "Über uns"-Bereich */
 .about-section {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 80px 0;
     position: relative;
     margin: 100px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .about-section::before,
 .about-section::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 50px;
 }
 
 .about-section::before {
     top: -25px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .about-section::after {
     bottom: -25px;
     background: linear-gradient(315deg, transparent 25px, #0066cc 0) bottom left,
                 linear-gradient(45deg, transparent 25px, #004080 0) bottom right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 /* Verbesserte dekorative Kurven im Hintergrund */
 .about-section .curve {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     transition: all 15s ease-in-out;
 }
 
 .about-section .curve-1 {
     top: -50px;
     right: -50px;
     width: 400px;
     height: 400px;
     opacity: 0.08;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s infinite alternate;
 }
 
 .about-section .curve-2 {
     bottom: -100px;
     left: -100px;
     width: 500px;
     height: 500px;
     opacity: 0.05;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 15s infinite alternate-reverse;
 }
 
 .about-section .curve-3 {
     top: 40%;
     left: 45%;
     width: 800px;
     height: 300px;
     opacity: 0.03;
     background: #ffffff;
     border-radius: 100%;
     transform: translate(-50%, -50%) rotate(30deg);
     animation: rotate-slow 30s infinite linear;
 }
 
 .about-section .curve-4 {
     top: 15%;
     left: 5%;
     width: 200px;
     height: 200px;
     opacity: 0.1;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(60px);
     animation: pulse 8s infinite alternate;
 }
 
 .about-section .curve-5 {
     bottom: 20%;
     right: 5%;
     width: 150px;
     height: 150px;
     opacity: 0.07;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 12s infinite alternate-reverse;
 }
 
 @keyframes float-slow {
     0% {
         transform: translateY(0) translateX(0);
     }
     100% {
         transform: translateY(30px) translateX(20px);
     }
 }
 
 @keyframes rotate-slow {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 @keyframes pulse {
     0% {
         opacity: 0.04;
         transform: scale(1);
     }
     100% {
         opacity: 0.1;
         transform: scale(1.2);
     }
 }
 
 .about-section .container {
     position: relative;
     z-index: 2;
 }
 
 /* Anpassung der Statistik für "Langjährige Erfahrung" */
 .stat-item:first-child .stat-number {
     font-size: 36px;
     letter-spacing: 1px;
 }
 
 .about-section h2 {
     color: #ffffff;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .about-section h2::after {
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.3));
 }
 
 .about-section h3 {
     color: #ffcc00;
     font-size: 1.4rem;
     margin-bottom: 25px;
     letter-spacing: 1px;
 }
 
 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }
 
 .about-text {
     flex: 1;
     min-width: 300px;
 }
 
 .about-text p {
     margin-bottom: 25px;
     font-size: 17px;
     line-height: 1.8;
 }
 
 .about-text strong {
     color: #ffcc00;
     font-weight: 600;
 }
 
 .about-text p:last-child {
     margin-bottom: 0;
 }
 
 /* Bildslider im Über uns-Bereich */
 .about-image-slider {
     flex: 1;
     min-width: 300px;
     position: relative;
 }
 
 .slider-container {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     height: 400px;
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease;
 }
 
 .slide.active {
     opacity: 1;
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }
 
 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.3);
     border: none;
     margin: 0 5px;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: #ffcc00;
     transform: scale(1.2);
 }
 
 .slider-dot:hover {
     background-color: rgba(255, 204, 0, 0.7);
 }
 
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(2)::before {
     background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .feature-list {
         flex-direction: column;
     }
     
     .feature {
         width: 100%;
     }
 }
 
 @media (max-width: 768px) {
     .features {
         padding: 70px 0;
     }
     
     .features-heading h2 {
         font-size: 32px;
     }
     
     .features-heading p {
         font-size: 18px;
     }
     
     .feature {
         padding: 30px 25px;
     }
     
     .feature-icon {
         width: 90px;
         height: 90px;
         margin-bottom: 20px;
     }
     
     .feature-icon img {
         width: 45px;
         height: 45px;
     }
     
     .feature h3 {
         font-size: 20px;
         margin-bottom: 10px;
     }
     
     .feature p {
         font-size: 15px;
     }
 }
 
 /* Verbesserte Dropdown-Auswahl für den dunklen Modus */
 .form-group select {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23b3b3b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 16px;
     cursor: pointer;
 }
 
 .form-group select:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group select option {
     background-color: #1a1a1a;
     color: #e6e6e6;
     padding: 10px;
 }
 
 .form-group select:hover {
     background: rgba(40, 40, 40, 0.9);
     border-color: rgba(255, 255, 255, 0.2);
 }
 
 /* Honeypot-Feld zum Schutz vor Spam-Bots */
 .honeypot-field {
     display: none !important;
     position: absolute;
     left: -9999px;
     top: -9999px;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     height: 0;
     width: 0;
     margin: 0;
     padding: 0;
     border: none;
     z-index: -1;
 }
 
 /* Styling für Formularvalidierung und Danke-Nachricht */
 .form-group.has-error input,
 .form-group.has-error textarea,
 .form-group.has-error select {
     border-color: var(--error-color);
     background-color: rgba(220, 53, 69, 0.05);
 }
 
 .error-message {
     color: var(--error-color);
     font-size: 14px;
     margin-top: 5px;
     font-weight: 500;
 }
 
 .thank-you-message {
     background: rgba(40, 167, 69, 0.1);
     border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: 12px;
     padding: 40px;
     text-align: center;
     animation: fadeIn 0.5s ease;
 }
 
 .thank-you-message h3 {
     color: var(--success-color);
     margin-bottom: 20px;
     font-size: 28px;
 }
 
 .thank-you-message p {
     color: var(--text-color);
     margin-bottom: 30px;
     font-size: 18px;
 }
 
 .new-message-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3);
 }
 
 .new-message-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Styling für das Quiz-CAPTCHA */
 .captcha-container {
     margin-bottom: 25px;
     background: rgba(51, 153, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(51, 153, 255, 0.1);
 }
 
 .captcha-container label {
     display: block;
     margin-bottom: 10px;
     font-weight: 600;
     color: var(--text-color);
 }
 
 #captcha-question {
     color: var(--primary-color);
     cursor: pointer;
     padding: 2px 5px;
     border-radius: 4px;
     transition: all 0.3s ease;
     font-weight: 700;
 }
 
 #captcha-question:hover {
     background-color: rgba(51, 153, 255, 0.1);
 }
 
 #captcha-question::after {
     content: " 🔄";
     font-size: 0.8em;
     opacity: 0.7;
 }
 
 .captcha-container input[type="text"] {
     width: 100%;
     padding: 15px;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .captcha-container input[type="text"]:focus {
     background: rgba(40, 40, 40, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 /* Hinweis unter dem CAPTCHA */
 .captcha-container::after {
     content: "Klicken Sie auf die Frage, um eine neue zu generieren";
     display: block;
     font-size: 12px;
     color: var(--text-color-light);
     margin-top: 8px;
     font-style: italic;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .captcha-container {
         padding: 15px;
     }
     
     .captcha-container input[type="text"] {
         padding: 12px;
     }
 }
 
 /* Blauer "Über uns"-Bereich */
 .about-section {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 80px 0;
     position: relative;
     margin: 100px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }
 
 .about-section::before,
 .about-section::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 50px;
 }
 
 .about-section::before {
     top: -25px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .about-section::after {
     bottom: -25px;
     background: linear-gradient(315deg, transparent 25px, #0066cc 0) bottom left,
                 linear-gradient(45deg, transparent 25px, #004080 0) bottom right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 /* Verbesserte dekorative Kurven im Hintergrund */
 .about-section .curve {
     position: absolute;
     pointer-events: none;
     z-index: 1;
     transition: all 15s ease-in-out;
 }
 
 .about-section .curve-1 {
     top: -50px;
     right: -50px;
     width: 400px;
     height: 400px;
     opacity: 0.08;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s infinite alternate;
 }
 
 .about-section .curve-2 {
     bottom: -100px;
     left: -100px;
     width: 500px;
     height: 500px;
     opacity: 0.05;
     background: radial-gradient(circle at center, #ffffff 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 15s infinite alternate-reverse;
 }
 
 .about-section .curve-3 {
     top: 40%;
     left: 45%;
     width: 800px;
     height: 300px;
     opacity: 0.03;
     background: #ffffff;
     border-radius: 100%;
     transform: translate(-50%, -50%) rotate(30deg);
     animation: rotate-slow 30s infinite linear;
 }
 
 .about-section .curve-4 {
     top: 15%;
     left: 5%;
     width: 200px;
     height: 200px;
     opacity: 0.1;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(60px);
     animation: pulse 8s infinite alternate;
 }
 
 .about-section .curve-5 {
     bottom: 20%;
     right: 5%;
     width: 150px;
     height: 150px;
     opacity: 0.07;
     background: #ffcc00;
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 12s infinite alternate-reverse;
 }
 
 @keyframes float-slow {
     0% {
         transform: translateY(0) translateX(0);
     }
     100% {
         transform: translateY(30px) translateX(20px);
     }
 }
 
 @keyframes rotate-slow {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 @keyframes pulse {
     0% {
         opacity: 0.04;
         transform: scale(1);
     }
     100% {
         opacity: 0.1;
         transform: scale(1.2);
     }
 }
 
 .about-section .container {
     position: relative;
     z-index: 2;
 }
 
 /* Anpassung der Statistik für "Langjährige Erfahrung" */
 .stat-item:first-child .stat-number {
     font-size: 36px;
     letter-spacing: 1px;
 }
 
 .about-section h2 {
     color: #ffffff;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .about-section h2::after {
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.3));
 }
 
 .about-section h3 {
     color: #ffcc00;
     font-size: 1.4rem;
     margin-bottom: 25px;
     letter-spacing: 1px;
 }
 
 .about-content {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }
 
 .about-text {
     flex: 1;
     min-width: 300px;
 }
 
 .about-text p {
     margin-bottom: 25px;
     font-size: 17px;
     line-height: 1.8;
 }
 
 .about-text strong {
     color: #ffcc00;
     font-weight: 600;
 }
 
 .about-text p:last-child {
     margin-bottom: 0;
 }
 
 /* Bildslider im Über uns-Bereich */
 .about-image-slider {
     flex: 1;
     min-width: 300px;
     position: relative;
 }
 
 .slider-container {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     height: 400px;
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease;
 }
 
 .slide.active {
     opacity: 1;
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }
 
 .slider-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.3);
     border: none;
     margin: 0 5px;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: #ffcc00;
     transform: scale(1.2);
 }
 
 .slider-dot:hover {
     background-color: rgba(255, 204, 0, 0.7);
 }
 
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
 }
 
 /* Container für Content-Bereiche */
 .container {
     max-width: var(--container-width);
     margin: 0 auto;
     padding: 0 20px;
 }
 
 /* Typografie */
 h1, h2, h3, h4, h5, h6 {
     font-weight: 700;
     line-height: 1.3;
     margin-bottom: 1rem;
     color: var(--text-color);
 }
 
 h1 {
     font-size: 3rem;
     margin-bottom: 1.5rem;
     letter-spacing: -0.5px;
 }
 
 h2 {
     font-size: 2.5rem;
     margin-bottom: 2rem;
     text-align: center;
     position: relative;
     padding-bottom: 1rem;
 }
 
 h2::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
     background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
     border-radius: 3px;
 }
 
 h3 {
     font-size: 1.75rem;
     color: var(--primary-dark);
 }
 
 h4 {
     font-size: 1.25rem;
     font-weight: 600;
 }
 
 p {
     margin-bottom: 1.5rem;
 }
 
 a {
     color: var(--primary-color);
     text-decoration: none;
     transition: color var(--transition-speed);
 }
 
 a:hover {
     color: var(--secondary-color);
 }
 
 img {
     max-width: 100%;
     height: auto;
 }
 
 ul, ol {
     margin-left: 1.5rem;
     margin-bottom: 1rem;
 }
 
 /* Buttons und Links */
 .btn {
     display: inline-block;
     padding: 14px 30px;
     border-radius: 30px;
     font-weight: 600;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
     transition: all 0.3s ease;
     border: none;
     font-size: 1rem;
     letter-spacing: 0.5px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     position: relative;
     overflow: hidden;
     z-index: 1;
 }
 
 .btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.7s ease;
     z-index: -1;
 }
 
 .btn:hover::before {
     left: 100%;
 }
 
 .primary-btn {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
 }
 
 .primary-btn:hover {
     background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
     transform: translateY(-3px);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
 }
 
 .secondary-btn {
     background: transparent;
     color: var(--primary-color);
     border: 2px solid var(--primary-color);
 }
 
 .secondary-btn:hover {
     background-color: var(--primary-color);
     color: white;
     transform: translateY(-3px);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
 }
 
 .cta-btn {
     font-weight: 700;
     padding: 15px 32px;
 }
 
 /* Animierter CTA-Button */
 .cta-btn {
     position: relative;
     overflow: hidden;
     z-index: 1;
 }
 
 .cta-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.7s ease;
     z-index: -1;
 }
 
 .cta-btn:hover::before {
     left: 100%;
 }
 
 /* Header und Navigation */
 header {
     position: sticky;
     top: 0;
     background-color: var(--background-color);
     box-shadow: 0 2px 10px var(--shadow-color);
     z-index: 100;
     transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
 }
 
 .header-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: var(--header-height);
 }
 
 .logo img {
     max-height: 50px;
     transition: filter var(--transition-speed);
 }
 
 .dark-mode .logo img {
     filter: brightness(1.2);
 }
 
 nav {
     display: flex;
     align-items: center;
 }
 
 .nav-links {
     display: flex;
     gap: 25px;
 }
 
 .nav-links a {
     color: var(--text-color);
     font-weight: 500;
     position: relative;
 }
 
 .nav-links a:hover {
     color: var(--primary-color);
 }
 
 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     background-color: var(--primary-color);
     transition: width var(--transition-speed);
 }
 
 .nav-links a:hover::after {
     width: 100%;
 }
 
 .accessibility-controls {
     margin-left: 20px;
     display: flex;
     align-items: center;
 }
 
 .dark-mode-toggle {
     background: none;
     border: none;
     cursor: pointer;
     color: var(--text-color);
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: var(--background-alt);
     transition: background-color var(--transition-speed);
 }
 
 .dark-mode-toggle:hover {
     background-color: var(--border-color);
 }
 
 /* Scroll-Indikator */
 .scroll-indicator {
     position: sticky;
     top: var(--header-height);
     height: 3px;
     background-color: var(--primary-color);
     width: 0;
     z-index: 100;
     transition: width 0.1s ease-out;
 }
 
 /* Parallax-Effekte */
 .parallax-element {
     will-change: transform;
     transition: transform 0.1s ease-out;
 }
 
 .parallax-bg {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }
 
 /* Hero-Bereich */
 .hero {
     position: relative;
     padding: 120px 0 100px;
     background: linear-gradient(135deg, #004d99, #0066cc);
     color: white;
     overflow: hidden;
 }
 
 .hero-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/cleaning-pattern.png');
     background-size: cover;
     opacity: 0.08;
     z-index: 1;
 }
 
 .hero .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 30% 50%, rgba(0, 102, 204, 0.4) 0%, rgba(0, 51, 102, 0.8) 100%);
     z-index: 2;
 }
 
 .hero .container {
     position: relative;
     z-index: 3;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 60px;
 }
 
 .hero-content {
     flex: 1;
     max-width: 600px;
 }
 
 .hero-badge {
     display: inline-block;
     background: linear-gradient(135deg, rgba(255, 204, 0, 0.9), rgba(230, 184, 0, 0.9));
     color: #333;
     padding: 8px 16px;
     border-radius: 30px;
     font-size: 0.9rem;
     font-weight: 600;
     margin-bottom: 20px;
     box-shadow: 0 4px 10px rgba(255, 204, 0, 0.3);
 }
 
 .hero h1 {
     font-size: 3.2rem;
     line-height: 1.2;
     margin-bottom: 20px;
     color: white;
 }
 
 .hero h1 .highlight {
     color: var(--secondary-color);
     position: relative;
     display: inline-block;
 }
 
 .hero h1 .highlight::after {
     content: '';
     position: absolute;
     bottom: 5px;
     left: 0;
     width: 100%;
     height: 8px;
     background-color: rgba(255, 204, 0, 0.3);
     z-index: -1;
     border-radius: 4px;
 }
 
 .hero-subtitle {
     font-size: 1.2rem;
     margin-bottom: 30px;
     color: rgba(255, 255, 255, 0.9);
     line-height: 1.6;
 }
 
 .hero-features {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
     margin-bottom: 40px;
 }
 
 .hero-feature {
     display: flex;
     align-items: center;
     gap: 10px;
     background: rgba(255, 255, 255, 0.1);
     padding: 10px 15px;
     border-radius: 8px;
     border-left: 3px solid var(--secondary-color);
     transition: all 0.3s ease;
 }
 
 .hero-feature:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .feature-icon-small {
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--secondary-color);
     width: 24px;
     height: 24px;
     border-radius: 50%;
 }
 
 .feature-icon-small img {
     width: 14px;
     height: 14px;
     filter: brightness(0);
 }
 
 .hero-feature span {
     font-weight: 500;
     font-size: 0.95rem;
 }
 
 .hero-cta {
     display: flex;
     gap: 20px;
 }
 
 .hero-cta .primary-btn {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 10px 20px rgba(255, 204, 0, 0.3);
 }
 
 .hero-cta .primary-btn:hover {
     background: linear-gradient(135deg, var(--secondary-dark), var(--secondary-color));
     box-shadow: 0 15px 25px rgba(255, 204, 0, 0.4);
     transform: translateY(-3px);
 }
 
 .hero-cta .secondary-btn {
     background: rgba(255, 255, 255, 0.1);
     color: white;
     border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 .hero-cta .secondary-btn:hover {
     background: rgba(255, 255, 255, 0.2);
     border-color: rgba(255, 255, 255, 0.5);
     transform: translateY(-3px);
 }
 
 .hero-image-container {
     flex: 1;
     position: relative;
     max-width: 500px;
 }
 
 .hero-image {
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     position: relative;
     height: 400px;
     border: 5px solid white;
 }
 
 .hero-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }
 
 .hero-image:hover img {
     transform: scale(1.05);
 }
 
 .image-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
 }
 
 .hero-image-badge {
     position: absolute;
     bottom: -25px;
     right: -25px;
     width: 120px;
     height: 120px;
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     animation: pulse 2s infinite ease-in-out;
     border: 3px solid white;
 }
 
 .badge-content {
     text-align: center;
     color: #333;
 }
 
 .badge-number {
     font-size: 2rem;
     font-weight: 700;
     display: block;
     line-height: 1;
 }
 
 .badge-text {
     font-size: 0.8rem;
     font-weight: 500;
 }
 
 .hero-wave {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100px;
     z-index: 4;
 }
 
 .hero-wave svg {
     width: 100%;
     height: 100%;
 }
 
 .hero-wave path {
     fill: var(--background-color);
 }
 
 /* Responsive Anpassungen für den Hero-Bereich */
 @media (max-width: 1200px) {
     .hero h1 {
         font-size: 2.8rem;
     }
     
     .hero-image {
         height: 350px;
     }
 }
 
 @media (max-width: 992px) {
     .hero {
         padding: 100px 0 80px;
     }
     
     .hero h1 {
         font-size: 2.4rem;
     }
     
     .hero-subtitle {
         font-size: 1.1rem;
     }
     
     .hero-image {
         height: 320px;
     }
     
     .hero-image-badge {
         width: 100px;
         height: 100px;
         bottom: -20px;
         right: -20px;
     }
     
     .badge-number {
         font-size: 1.8rem;
     }
     
     .badge-text {
         font-size: 0.7rem;
     }
 }
 
 @media (max-width: 768px) {
     .hero {
         padding: 80px 0 60px;
     }
     
     .hero .container {
         flex-direction: column;
         gap: 40px;
     }
     
     .hero-content {
         max-width: 100%;
         text-align: center;
     }
     
     .hero h1 {
         font-size: 2.2rem;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .hero-image-container {
         max-width: 100%;
     }
     
     .hero-image {
         height: 300px;
     }
 }
 
 @media (max-width: 576px) {
     .hero {
         padding: 60px 0 40px;
     }
     
     .hero h1 {
         font-size: 1.8rem;
     }
     
     .hero-subtitle {
         font-size: 1rem;
     }
     
     .hero-features {
         flex-direction: column;
         align-items: center;
     }
     
     .hero-cta {
         flex-direction: column;
         width: 100%;
     }
     
     .hero-image {
         height: 250px;
     }
     
     .hero-image-badge {
         width: 80px;
         height: 80px;
         bottom: -15px;
         right: -15px;
     }
     
     .badge-number {
         font-size: 1.5rem;
     }
     
     .badge-text {
         font-size: 0.6rem;
     }
 }
 
 /* Neues professionelles Design für den Leistungsbereich */
 .services {
     padding: 120px 0;
     background-color: #1a1a1a;
     position: relative;
     overflow: hidden;
 }
 
 /* Eleganter Hintergrund mit Farbverlauf */
 .services::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 10% 10%, rgba(0, 102, 204, 0.1), transparent 40%),
                 radial-gradient(circle at 90% 90%, rgba(0, 204, 153, 0.1), transparent 40%);
     z-index: 0;
 }
 
 .services .container {
     position: relative;
     z-index: 1;
 }
 
 /* Verbesserte Hauptüberschrift */
 .services h2.main-title {
     font-size: 48px;
     font-weight: 700;
     color: #ffffff;
     text-align: center;
     margin-bottom: 15px;
     position: relative;
     display: inline-block;
     left: 50%;
     transform: translateX(-50%);
 }
 
 .services h2.main-title::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .services .subtitle {
     font-size: 20px;
     color: #b3b3b3;
     text-align: center;
     max-width: 800px;
     margin: 30px auto 60px;
     line-height: 1.7;
 }
 
 /* Kategorie-Überschriften */
 .services .category-title {
     font-size: 36px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 50px;
     position: relative;
     display: inline-block;
     padding-bottom: 15px;
 }
 
 .services .category-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(to right, var(--primary-color), transparent);
     border-radius: 1.5px;
 }
 
 /* Nebeneinander-Anordnung der Leistungskategorien */
 .services-categories-container {
     display: flex;
     gap: 40px;
     margin-top: 60px;
 }
 
 .services-category {
     flex: 1;
     margin-bottom: 0;
 }
 
 .services-category-title {
     font-size: 32px;
     font-weight: 600;
     color: var(--primary-color);
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Anpassung der Service-Karten für die neue Anordnung */
 .service-cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     margin-top: 40px;
 }
 
 /* Responsive Anpassungen für die Service-Karten */
 @media (max-width: 992px) {
     .service-cards {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
 @media (max-width: 768px) {
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Verbesserte Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);
 }
 
 .service-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
     border-color: var(--primary-light);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;
     height: 90px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.2);
     border: 3px solid rgba(255, 255, 255, 0.2);
 }
 
 .service-card:hover .service-icon {
     transform: scale(1.1) rotate(5deg);
     box-shadow: 0 12px 25px rgba(0, 102, 204, 0.3);
 }
 
 /* Unterschiedliche Farben für die Sicherheitsleistungen */
 #security-category .service-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 8px 20px rgba(255, 204, 0, 0.2);
 }
 
 #security-category .service-card:hover .service-icon {
     box-shadow: 0 12px 25px rgba(255, 204, 0, 0.3);
 }
 
 /* Über uns */
 .about {
     padding: 100px 0;
     background-color: var(--background-color);
 }
 
 .about-content {
     display: flex;
     gap: 50px;
     margin-top: 40px;
 }
 
 .about-text {
     flex: 1;
 }
 
 .about-text h3 {
     color: var(--primary-color);
     margin-bottom: 20px;
     font-size: 1.4rem;
 }
 
 .about-text > p {
     margin-bottom: 30px;
     line-height: 1.6;
     font-size: 1.1rem;
 }
 
 .about-section {
     margin-bottom: 25px;
 }
 
 .about-section h4 {
     color: var(--text-color);
     margin-bottom: 10px;
     font-size: 1.2rem;
 }
 
 .about-section p {
     margin-bottom: 15px;
     line-height: 1.6;
 }
 
 .about-cta {
     margin-top: 30px;
 }
 
 /* Bildwechsel-Slider */
 .about-image-slider {
     flex: 1;
     position: relative;
 }
 
 .slider-container {
     width: 100%;
     height: 450px;
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }
 
 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
     transform: scale(1.05);
 }
 
 .slide.active {
     opacity: 1;
     transform: scale(1);
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
 .slider-controls {
     display: flex;
     justify-content: center;
     margin-top: 20px;
     gap: 12px;
 }
 
 .slider-dot {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background-color: var(--border-color);
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
 }
 
 .slider-dot::before {
     content: '';
     position: absolute;
     top: -4px;
     left: -4px;
     right: -4px;
     bottom: -4px;
     border-radius: 50%;
     border: 2px solid transparent;
     transition: all 0.3s ease;
 }
 
 .slider-dot.active {
     background-color: var(--primary-color);
 }
 
 .slider-dot.active::before {
     border-color: var(--primary-color);
 }
 
 .slider-dot:hover {
     transform: scale(1.2);
 }
 
 .about-images {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 
 .about-image {
     border-radius: var(--radius-medium);
     overflow: hidden;
     box-shadow: 0 10px 30px var(--shadow-color);
     height: calc(50% - 10px);
 }
 
 .about-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform var(--transition-speed);
 }
 
 .about-image:hover img {
     transform: scale(1.05);
 }
 
 /* Anpassung der Statistiken nach dem Bild-Beispiel */
 .about-stats {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 50px;
     width: 100%;
 }
 
 .stat-item {
     flex: 0 0 auto;
     width: 220px;
     text-align: center;
     padding: 30px 20px;
     background: rgba(0, 102, 204, 0.7);
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow: hidden;
 }
 
 .stat-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 .stat-number {
     font-size: 48px;
     font-weight: 700;
     color: #ffcc00;
     margin-bottom: 15px;
     display: block;
 }
 
 .stat-label {
     font-size: 18px;
     font-weight: 500;
     color: #ffffff;
 }
 
 /* Entfernung aller Sterne und dekorativen Elemente */
 .stat-item:first-child .stat-number::before,
 .stat-item .stat-number::before,
 .stat-item .stat-number::after {
     content: none;
     display: none;
 }
 
 .bubble-1, .bubble-2, .bubble-3 {
     display: none;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }
 
 .about-certifications {
     display: flex;
     gap: 20px;
     margin-top: 30px;
 }
 
 .about-certifications img {
     height: 60px;
 }
 
 .about::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/about-bg-pattern.svg');
     background-size: cover;
     background-position: center;
     opacity: 0.5;
     z-index: 1;
 }
 
 /* Anpassungen für echte Bilder */
 .about-image img {
     max-width: 100%;
     height: auto;
     border-radius: var(--radius-medium);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }
 
 /* Verbesserte Kontaktsektion mit zentrierter Überschrift */
 .contact {
     padding: 100px 0;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     position: relative;
     overflow: hidden;
 }
 
 .contact::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.05) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 30%);
     z-index: 0;
 }
 
 .contact .container {
     position: relative;
     z-index: 1;
 }
 
 .contact h2 {
     text-align: center;
     margin-bottom: 50px;
     font-size: 42px;
     font-weight: 800;
     color: #e6e6e6;
     position: relative;
 }
 
 .contact h2::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     border-radius: 2px;
 }
 
 .contact-container {
     display: flex;
     gap: 50px;
     background: rgba(42, 42, 42, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info {
     flex: 1;
     padding: 50px;
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 204, 153, 0.1));
     border-right: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .contact-info h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .contact-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: all 0.3s ease;
 }
 
 .contact-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .contact-item img {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     filter: brightness(0) invert(1);
     opacity: 0.8;
 }
 
 .contact-item a,
 .contact-item p {
     color: #b3b3b3;
     font-size: 18px;
     margin-bottom: 0;
     transition: color 0.3s ease;
 }
 
 .contact-item:hover a,
 .contact-item:hover p {
     color: #ffffff;
 }
 
 .contact-item div p {
     margin-bottom: 5px;
 }
 
 .contact-item div p:last-child {
     margin-bottom: 0;
 }
 
 .contact-form {
     flex: 1.5;
     padding: 50px;
 }
 
 .contact-form h3 {
     font-size: 28px;
     margin-bottom: 30px;
     color: #e6e6e6;
     text-align: center;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 .form-group label {
     display: block;
     margin-bottom: 8px;
     color: #b3b3b3;
     font-size: 16px;
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     color: #e6e6e6;
     font-size: 16px;
     transition: all 0.3s ease;
 }
 
 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
     outline: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: flex-start;
 }
 
 .form-group.checkbox input {
     width: auto;
     margin-right: 10px;
     margin-top: 5px;
 }
 
 .form-group.checkbox label {
     margin-bottom: 0;
     font-size: 14px;
 }
 
 .form-submit {
     text-align: center;
     margin-top: 30px;
 }
 
 .form-submit .btn {
     padding: 15px 40px;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3);
 }
 
 .form-submit .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 102, 204, 0.4);
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 992px) {
     .contact-container {
         flex-direction: column;
     }
     
     .contact-info {
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }
 }
 
 @media (max-width: 768px) {
     .contact {
         padding: 70px 0;
     }
     
     .contact h2 {
         font-size: 32px;
     }
     
     .contact-info,
     .contact-form {
         padding: 30px;
     }
     
     .contact-info h3,
     .contact-form h3 {
         font-size: 24px;
         margin-bottom: 20px;
     }
     
     .contact-item {
         padding: 12px;
         margin-bottom: 15px;
     }
     
     .contact-item img {
         width: 24px;
         height: 24px;
         margin-right: 10px;
     }
     
     .contact-item a,
     .contact-item p {
         font-size: 16px;
     }
     
     .form-group {
         margin-bottom: 20px;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         padding: 12px;
         font-size: 15px;
     }
     
     .form-submit .btn {
         padding: 12px 30px;
         font-size: 16px;
     }
 }
 
 /* Professioneller Footer mit blauem Farbschema */
 footer {
     background: linear-gradient(135deg, #004080, #0066cc);
     color: #ffffff;
     padding: 70px 0 30px;
     position: relative;
     margin-top: 100px;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
 }
 
 footer::before {
     content: '';
     position: absolute;
     top: -25px;
     left: 0;
     right: 0;
     height: 50px;
     background: linear-gradient(135deg, transparent 25px, #004080 0) top left,
                 linear-gradient(225deg, transparent 25px, #0066cc 0) top right;
     background-size: 50% 100%;
     background-repeat: no-repeat;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 50px;
     position: relative;
 }
 
 .footer-content::after {
     content: '';
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     width: 70%;
     height: 1px;
     background: linear-gradient(to right, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.3), 
         rgba(255,255,255,0));
 }
 
 .footer-logo {
     flex: 0 0 100%;
     max-width: 280px;
     margin-bottom: 40px;
     position: relative;
 }
 
 .footer-logo::after {
     content: '';
     position: absolute;
     top: 0;
     right: -30px;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, 
         rgba(255,255,255,0), 
         rgba(255,255,255,0.2), 
         rgba(255,255,255,0));
 }
 
 .footer-logo img {
     max-width: 200px;
     height: auto;
     margin-bottom: 20px;
     filter: brightness(1.2) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
     transition: all 0.4s ease;
 }
 
 .footer-logo img:hover {
     transform: scale(1.05) translateY(-5px);
     filter: brightness(1.3) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
 }
 
 .footer-logo p {
     font-size: 15px;
     line-height: 1.6;
     opacity: 0.9;
     margin-top: 15px;
     padding-right: 20px;
     position: relative;
 }
 
 .footer-logo p::before {
     content: '"';
     font-size: 40px;
     color: #ffcc00;
     opacity: 0.5;
     position: absolute;
     left: -15px;
     top: -15px;
 }
 
 .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     flex: 1;
     margin-left: 50px;
 }
 
 .footer-column {
     flex: 0 0 30%;
     margin-bottom: 30px;
 }
 
 .footer-column h3 {
     color: #ffcc00;
     font-size: 20px;
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 12px;
     letter-spacing: 0.5px;
 }
 
 .footer-column h3::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(to right, #ffcc00, rgba(255,255,255,0.1));
     border-radius: 3px;
 }
 
 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .footer-column ul li {
     margin-bottom: 12px;
     position: relative;
 }
 
 .footer-column ul li a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
     position: relative;
     padding-left: 0;
     font-weight: 400;
 }
 
 .footer-column ul li a::before {
     content: '›';
     position: absolute;
     left: -18px;
     opacity: 0;
     transition: all 0.3s ease;
     color: #ffcc00;
     font-size: 18px;
     font-weight: bold;
 }
 
 .footer-column ul li a:hover {
     color: #ffcc00;
     padding-left: 18px;
     transform: translateX(2px);
 }
 
 .footer-column ul li a:hover::before {
     opacity: 1;
     left: 0;
 }
 
 .footer-column ul li a.active {
     color: #ffcc00;
     font-weight: 500;
 }
 
 .footer-column ul li a.active::before {
     content: '•';
     opacity: 1;
     left: -15px;
     color: #ffcc00;
 }
 
 .footer-column address {
     font-style: normal;
     line-height: 1.8;
     margin-bottom: 20px;
     position: relative;
 }
 
 .footer-column address a {
     color: #ffffff;
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-block;
 }
 
 .footer-column address a:hover {
     color: #ffcc00;
     transform: translateX(3px);
 }
 
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 25px;
     margin-top: 20px;
     text-align: center;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.8);
     position: relative;
 }
 
 .footer-bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 3px;
     background: #ffcc00;
     border-radius: 3px;
     margin-top: -2px;
 }
 
 .footer-bottom p {
     margin-bottom: 8px;
     transition: all 0.3s ease;
 }
 
 .footer-bottom p:hover {
     opacity: 1;
 }
 
 /* Responsive Anpassungen für den Footer */
 @media (max-width: 1100px) {
     .footer-links {
         margin-left: 30px;
     }
     
     .footer-logo::after {
         display: none;
     }
 }
 
 @media (max-width: 992px) {
     .footer-links {
         margin-left: 0;
     }
     
     .footer-column {
         flex: 0 0 48%;
     }
 }
 
 @media (max-width: 768px) {
     footer {
         padding: 50px 0 20px;
         margin-top: 80px;
     }
     
     footer::before {
         top: -20px;
         height: 40px;
     }
     
     .footer-content {
         flex-direction: column;
     }
     
     .footer-logo {
         margin: 0 auto 40px;
         text-align: center;
         max-width: 100%;
     }
     
     .footer-logo p {
         padding-right: 0;
     }
     
     .footer-logo p::before {
         left: 50%;
         transform: translateX(-50%);
         top: -25px;
     }
     
     .footer-links {
         width: 100%;
     }
     
     .footer-column {
         flex: 0 0 100%;
         text-align: center;
         margin-bottom: 40px;
     }
     
     .footer-column h3::after {
         left: 50%;
         transform: translateX(-50%);
         background: linear-gradient(to right, transparent, #ffcc00, transparent);
     }
     
     .footer-column ul li a::before {
         display: none;
     }
     
     .footer-column ul li a:hover {
         padding-left: 0;
         transform: none;
     }
     
     .footer-column ul li a.active::before {
         display: inline-block;
         position: static;
         margin-right: 5px;
     }
     
     .footer-column address a:hover {
         transform: none;
     }
 }
 
 @media (max-width: 480px) {
     footer {
         padding: 40px 0 20px;
     }
     
     .footer-logo img {
         max-width: 160px;
     }
     
     .footer-column h3 {
         font-size: 18px;
     }
     
     .footer-bottom p {
         font-size: 12px;
     }
 }
 
 /* Reduzierte Bewegung für Nutzer, die das bevorzugen */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
     
     .parallax-element,
     .bubble,
     .hero,
     .parallax-bg {
         transition: none !important;
         animation: none !important;
         transform: none !important;
         background-attachment: scroll !important;
     }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
     h1 {
         font-size: 2.5rem;
     }
     
     h2 {
         font-size: 2rem;
     }
     
     .container {
         padding: 0 30px;
     }
 }
 
 @media (max-width: 992px) {
     .about-content {
         flex-direction: column;
         gap: 40px;
     }
     
     .slider-container {
         height: 400px;
     }
     
     .service-categories {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 768px) {
     h1 {
         font-size: 2rem;
     }
     
     h2 {
         font-size: 1.75rem;
     }
     
     .hero .container {
         flex-direction: column;
     }
     
     .hero-content {
         margin-bottom: 40px;
         text-align: center;
     }
     
     .hero-features {
         justify-content: center;
     }
     
     .hero-cta {
         justify-content: center;
     }
     
     .slider-container {
         height: 350px;
     }
     
     .contact-container {
         grid-template-columns: 1fr;
     }
 }
 
 @media (max-width: 576px) {
     .container {
         padding: 0 20px;
     }
     
     h1 {
         font-size: 1.75rem;
     }
     
     h2 {
         font-size: 1.5rem;
     }
     
     .hero-cta {
         flex-direction: column;
         gap: 15px;
     }
     
     .hero-cta .btn {
         width: 100%;
     }
     
     .slider-container {
         height: 300px;
     }
     
     .service-cards {
         grid-template-columns: 1fr;
     }
 }
 
 /* Icon-Animationen */
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
     50% {
         transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 102, 204, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 5px 15px rgba(0, 102, 204, 0.2);
     }
 }
 
 .service-card:hover .service-icon {
     animation: pulse 1.5s infinite ease-in-out;
 }
 
 /* Verbesserte Animationen */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 .animate-fadeInUp {
     animation: fadeInUp 0.8s ease forwards;
 }
 
 .animate-fadeIn {
     animation: fadeIn 1s ease forwards;
 }
 
 /* Entfernung der Bubble-Stile */
 .bubbles {
     display: none; /* Versteckt die Bubbles vollständig */
 }
 
 .bubble {
     display: none; /* Versteckt die einzelnen Bubbles */
 }
 
 /* Entfernung des CSS-Grid-Hintergrunds */
 body::before, 
 main::before, 
 .services::before,
 section::before,
 .container::before {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 body::after, 
 main::after, 
 .services::after,
 section::after,
 .container::after {
     display: none !important;
     content: none !important;
     background: none !important;
 }
 
 /* Entfernung aller Grid-Linien */
 .grid-line, 
 .grid-background, 
 .background-grid {
     display: none !important;
 }
 
 /* Größere Überschriften für die Leistungsbereiche */
 .services-heading h2 {
     font-size: 36px;
     margin-bottom: 20px;
 }
 
 .services-heading p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 50px;
 }
 
 /* Bessere Hervorhebung der Leistungskategorien */
 .services-category-title {
     font-size: 28px;
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 3px solid var(--primary-color);
     display: inline-block;
 }
 
 /* Größerer Abstand zwischen den Kategorien */
 .services-category {
     margin-bottom: 60px;
 }
 
 /* Größere Darstellung der Service-Karten */
 .service-card {
     background-color: var(--background-color);
     border-radius: 12px;
     padding: 40px;  /* Erhöhtes Padding */
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);  /* Stärkerer Schatten */
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     transform: translateY(0);  /* Für Hover-Animation */
 }
 
 .service-card:hover {
     transform: translateY(-10px);  /* Stärkere Hover-Animation */
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }
 
 /* Größere Icons */
 .service-icon {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     width: 90px;  /* Größeres Icon */
     height: 90px;  /* Größeres Icon */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;  /* Mehr Abstand */
     transition: all 0.3s ease;
 }
 
 .service-icon img,
 .service-icon svg {
     width: 45px;  /* Größeres Icon-Bild */
     height: 45px;  /* Größeres Icon-Bild */
     filter: brightness(0) invert(1);
 }
 
 /* Größere Überschriften und Text */
 .service-card h4 {
     font-size: 24px;  /* Größere Überschrift */
     margin-bottom: 20px;  /* Mehr Abstand */
     transition: color 0.3s ease;
 }
 
 .service-card p {
     color: var(--text-color-light);
     margin-bottom: 0;
     flex-grow: 1;
     font-size: 17px;  /* Größerer Text */
     line-height: 1.7;  /* Bessere Lesbarkeit */
 }
 
 /* Größere Kategorie-Überschriften */
 .service-tab {
     font-size: 20px;  /* Größere Tabs */
     padding: 15px 30px;  /* Größere Tabs */
 }
 
 /* Mehr Abstand zwischen den Karten */
 .service-cards {
     gap: 30px;  /* Mehr Abstand zwischen den Karten */
 }
 
 /* Tabs für die Leistungskategorien */
 .service-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 40px;
     flex-wrap: wrap;
 }
 
 .service-tab {
     background-color: var(--background-alt);
     border: 2px solid transparent;
     border-radius: 30px;
     padding: 15px 30px;
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .service-tab:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .service-tab.active {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     color: white;
     border-color: transparent;
     box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
 }
 
 /* Verstecken der inaktiven Kategorie */
 .services-category {
     display: none;
 }
 
 .services-category.active {
     display: block;
     animation: fadeIn 0.5s ease forwards;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* Professioneller CTA-Bereich */
 .services-cta {
     background: linear-gradient(135deg, rgba(0, 102, 204, 0.95), rgba(0, 77, 153, 0.95));
     border-radius: 16px;
     padding: 50px;
     margin-top: 70px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .services-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('assets/images/pattern-light.svg');
     opacity: 0.05;
     z-index: 0;
 }
 
 .services-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .services-cta h3 {
     color: white;
     font-size: 32px;
     margin-bottom: 25px;
     font-weight: 600;
 }
 
 .services-cta p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 18px;
     max-width: 700px;
     margin: 0 auto 30px;
     line-height: 1.7;
 }
 
 .services-cta .btn {
     background: white;
     color: var(--primary-dark);
     font-weight: 700;
     padding: 16px 36px;
     font-size: 18px;
     border-radius: 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }
 
 .services-cta .btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
     background: transparent;
     color: white;
     border-color: white;
 }
 
 /* Responsive Anpassungen für den CTA-Bereich */
 @media (max-width: 768px) {
     .services-cta {
         padding: 40px 30px;
         margin-top: 50px;
     }
     
     .services-cta h3 {
         font-size: 26px;
     }
     
     .services-cta p {
         font-size: 16px;
     }
     
     .services-cta .btn {
         padding: 14px 30px;
         font-size: 16px;
     }
 }
 
 /* Verbesserte Feature-Sektion für dunklen Modus */
 .features {
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 }
 
 /* Dynamischer Hintergrund mit Wellen und Partikeln für dunklen Modus */
 .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(51, 153, 255, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 30%),
         radial-gradient(circle at 50% 50%, rgba(0, 204, 153, 0.05) 0%, transparent 50%);
     z-index: 0;
 }
 
 /* Animierte Partikel im Hintergrund */
 .features::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('assets/images/pattern-dots-dark.svg');
     background-size: 20px;
     opacity: 0.1;
     z-index: 0;
     animation: backgroundMove 60s linear infinite;
 }
 
 @keyframes backgroundMove {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 1000px 1000px;
     }
 }
 
 /* Welleneffekt am oberen Rand für dunklen Modus */
 .features-wave-top {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-top-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 /* Welleneffekt am unteren rand für dunklen Modus */
 .features-wave-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     background-image: url('assets/images/wave-bottom-dark.svg');
     background-size: cover;
     background-repeat: no-repeat;
     z-index: 1;
 }
 
 .features .container {
     position: relative;
     z-index: 2;
 }
 
 .features-heading {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .features-heading h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent; /* Ersatz für text-fill-color */
 }
 
 .features-heading p {
     font-size: 20px;
     color: #b3b3b3;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.7;
 }
 
 /* Feature-Liste in einer Zeile */
 .feature-list {
     display: flex;
     justify-content: space-between;
     gap: 30px;
     margin-top: 30px;
 }
 
 /* Verbesserte Feature-Karten für dunklen Modus */
 .feature {
     flex: 1;
     background: rgba(42, 42, 42, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     text-align: center;
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 6px;
     background: linear-gradient(to right, var(--primary-color), var(--accent-color));
     transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     opacity: 0.9;
     z-index: 0;
 }
 
 .feature:nth-child(2)::before {
     background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
 }
 
 .feature:nth-child(3)::before {
     background: linear-gradient(to right, var(--accent-color), var(--secondary-color));
 }
 
 .feature:hover {
     transform: translateY(-20px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
 }
 
 .feature:hover::before {
     height: 100%;
     opacity: 0.1;
 }
 
 /* Verbesserte Feature-Icons für dunklen Modus */
 .feature-icon {
     width: 110px;
     height: 110px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     box-shadow: 0 15px 35px rgba(51, 153, 255, 0.25);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
     border: 4px solid rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
 }
 
 .feature:nth-child(2) .feature-icon {
     background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
     box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25);
 }
 
 .feature:nth-child(3) .feature-icon {
     background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
     box-shadow: 0 15px 35px rgba(0, 204, 153, 0.25);
 }
 
 .feature:hover .feature-icon {
     transform: scale(1.15) rotate(8deg);
 }
 
 .feature-icon::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 
 .feature:hover .feature-icon::after {
     opacity: 1;
     animation: rotateGlow 3s linear infinite;
 }
 
 @keyframes rotateGlow {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .feature-icon img {
     width: 55px;
     height: 55px;
     filter: brightness(0) invert(1);
     transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .feature:hover .feature-icon img {
     transform: scale(1.2);
     animation: pulse 2s infinite;
 }
 
 .feature h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 15px;
     color: #e6e6e6;
     transition: color 0.3s ease;
 }
 
 .feature:hover h3 {
     color: var(--primary-color);
 }
 
 .feature:nth-child(2):hover h3 {
     color: var(--secondary-color);
 }
 
 .feature:nth-child(3):hover h3 {
     color: var(--accent-color);
 }
 
 .feature p {
     color: #b3b3b3;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 0;
 }
 
 /* Responsive Anpassungen */
 @media (max-width: 768px) {
     .stat-item {
         width: 180px;
         padding: 25px 15px;
     }
     
     .stat-number {
         font-size: 36px;
     }
     
     .stat-label {
         font-size: 16px;
     }
 }
 
 @media (max-width: 576px) {
     .about-stats {
         flex-direction: column;
         align-items: center;
     }
     
     .stat-item {
         width: 100%;
         max-width: 250px;
     }
 }