body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #fff;
            color: #000;
        }
        header {
            background-color: #000;
            color: #fff;
            padding: 18px 20px;
            padding-bottom: 0px;
        }
        .bg-green {
            background-color: #78A75A; /* Adjust the color as needed */
        }
        .text-green {
            color: #78A75A !important; /* Adjust the color as needed */
        }
        nav {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        nav a {
            color: #fff;
            margin-right: 20px;
            text-decoration: none;
            text-transform: lowercase;
            font-size: 0.9rem;
        }
        .logo {
            font-size: 2.5rem;
            font-weight: bold;
            text-transform: uppercase;
            margin-right: auto; /* Pushes the logo to the left */
            transition: opacity 0.5s ease; /* Smooth transition for opacity */
        }
        .hero {
            height: 100vh;
            text-align: center;
            background-color: black;
            position: relative;
            overflow: hidden; /* Verhindert, dass Bilder über die Sektion hinausragen */
        }
        .herotext {
            position: absolute;
            text-align: left;
            top: 70%;
            left: 35%;
            transform: translate(-50%, -50%);
            color: #fff;
            text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
            z-index: 3;
        }
        .herotext h1 {
            font-size: 8rem;
            margin: 0;
            font-weight: bold;
            z-index: 3;
        }
        .herotext p {
            font-size: 2.1em;
            margin: 10px 0;
            text-shadow: none;
            font-weight: bold;
        } 
        .heropara {
            opacity: 0; /* Initially hidden */
            background-color: #000;
            padding: 40px 80px;
            color: #000; /* Initial color: black */
            transition: opacity 0.3s ease, color 0.8s ease; /* Smooth color transition */
        }
        .heroimg {
            width: 100%;
            margin: 20px auto;
            display: block;
            z-index: 2;
        }
        .hero img {
            transition: transform 0.5s ease-out, opacity 0.8s ease-out;
        }
        .hero img.scatter {
            opacity: 0;
        }
        .gborder-l{
            border-left: 18px solid #78A75A; /* Adjust the color and width as needed */
        }
        .gborder-r{
            border-right: 8px solid #78A75A; /* Adjust the color and width as needed */
        }
        .gborder-t{
            border-top: 18px solid #78A75A; /* Adjust the color and width as needed */
        }
        .c-topics__marquee {
            width: 100%;
            overflow: hidden;
            padding: 20px 0 6px 0;
            margin: 10px 0;
        }

        .marquee-row {
            display: flex;
            white-space: nowrap;
            margin-bottom: 10px;
        }

        .marquee-content {
            display: flex;
            animation: scroll 30s linear infinite;
        }

        .marquee-content span {
            font-size: 3rem;
            font-weight: bold;
            text-transform: uppercase;
            margin: 0 10px;
            color: black;
        }
        .services {
            padding: 50px 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .service-card {
            background-color: #000;
            color: #fff;
            width: 300px;
            margin: 10px;
            padding: 20px;
            text-align: center;
        }
        .service-card:nth-child(even) {
            background-color: #fff;
            color: #000;
        }
        .service-card i {
            color: #00ff00;
            font-size: 24px;
        }
        .process {
            padding: 50px 20px;
            text-align: center;
            background-color: #fff;
        }
        .process ul {
            list-style: none;
            padding: 0;
            max-width: 600px;
            margin: 0 auto;
            text-align: left;
        }
        .process li {
            /*
            margin: 10px 0;
            padding-left: 30px;
            position: relative;
            */
            background-image: url('../assets/icons/addicon.png'); /* Pfad zu deinem PNG */
            background-repeat: no-repeat;
            background-position: 0 0; /* Icon links, vertikal zentriert */
            background-size: 30px 30px; /* Größe des Icons anpassen (Breite x Höhe) */
            padding-left: 40px; /* Abstand zwischen Icon und Text */
            line-height: 1.5; /* Optional: Zeilenhöhe für bessere Lesbarkeit */
            margin-bottom: 10px;
        }
        .process li h3 {
            text-transform: uppercase;
            font-weight: bold;
        }
        .process li h3 img{
            display: none;
        }
        .trusted-by {
            padding: 50px 20px;
            text-align: center;
            background-color: #fff;
        }
        .trusted-by img {
            max-width: 100px;
            margin: 10px;
        }
        .trusted-by .customer {
            font-size: 0.8rem;
            margin-left: 10px;
            padding-left: 4px;
            border-left: #78A75A 2px solid;
        }
        .customer-wrapper {
            max-width: 620px;
            margin: 0 auto;
        }
        .btn-primary {
            background-color: #78A75A !important;
        }
        footer a {
            color: #78A75A;
            text-decoration: none;
        }
        footer {
            background-color: #000;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        footer button {
            background-color: #78A75A;
            color: #000;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            animation: pulse 2s infinite;
        }
        .footer-int, .footer-int a {
            font-size: 0.9rem;
            color: #627e54 !important;
        }
        .kontakt-info {
            text-align: left;
            color: #fff;
            font-size: 0.9rem;
            text-transform: uppercase;
        }
        #leistungen {
            margin-top:240px;
        }
        .maintop {
            font-size: clamp(3rem, 18vw, 8rem);
            text-transform: capitalize;
        }
        .service-icon img {
            width: auto;
            height: 120px;
            margin-bottom: 20px;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        @media (max-width: 768px) {
            .service-card { width: 100%; }
            .herotext h1 {
                font-size: 4rem; /* Adjusted for smaller screens */
                margin-bottom: 30px;
            }
            .herotext p {
                font-size: 1.5em; /* Adjusted for smaller screens */        
            }
            .herotext {
                top: 70%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .heropara {
                padding: 20px;  
            }
            .marquee-content span {
                font-size: 1.5rem;
                margin: 0 20px;
            }
            #leistungen {
                margin-top:170px;
            }
            .c-topics__marquee {
                padding-bottom: 10px;
                margin: 0px 0;
            }
            .marquee-content span {
                font-size: 1.3rem;
                font-weight: bold;
                text-transform: uppercase;
                margin: 0 10px;
                color: black;
            }
        }
        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        /* Hover effect to pause animation */
        .marquee-row:hover .marquee-content {
            animation-play-state: paused;
        }

        @media (max-width: 768px) {
            .heroimg {
                width: 100%;
                object-fit: cover;
                object-position: center;
            }
            
            /* Erstes Bild (Hero Image 1) - 100% Höhe */
            .col-6:first-child .heroimg {
                height: 100vh;
                max-height: 100vh;
            }
            
            /* Zweites Bild (Hero Image 2) in der rechten Spalte - 35% */
            .col-6:last-child .heroimg:first-child {
                height: 35vh;
                max-height: 35vh;
            }
            
            /* Drittes Bild (Hero Image 3) in der rechten Spalte - 65% */
            .col-6:last-child .heroimg:last-child {
                height: 65vh;
                max-height: 65vh;
            }
            
            .hero .row {
                flex-direction: column;
                height: 100vh;
            }
            
            .hero .col-6 {
                flex: 0 0 auto;
                max-width: 100%;
                height: auto;
            }
            
            /* Optional: Herotext anpassen für mobile Ansicht */
            .herotext {
                position: absolute;
                z-index: 10;
                top: 70%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
                width: 90%;
            }
        }

        /* Animated text styling */
        .animated-text {
            font-weight: bold;
            margin: 20px 0;
        }

        .animated-text span {
            opacity: 0;
            /* Animation applied only when start-animation class is added */
        }

        .animated-text.start-animation span {
            animation: blinkReveal 0.8s ease-out forwards;
        }

        /* Accent color for the word "digital" */
        .animated-text .accent {
            color: #78A75A; /* Green accent color */
        }

        /* Keyframes for blinking reveal animation */
        @keyframes blinkReveal {
            0% { opacity: 0; }
            20% { opacity: 0.4; }
            40% { opacity: 0; }
            60% { opacity: 0.6; }
            80% { opacity: 0.2; }
            100% { opacity: 1; }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .animated-text {
                font-size: 3.5rem;
            }
            .hero h1 {
                font-size: 3.8rem;
            }
        }

        @media (max-width: 480px) {
            .hero {
                text-align: left;
            }
            .animated-text {
                font-size: 2.8rem;
            }
            .hero h1 {
                font-size: 3.8rem;
            }
        }

        #impressum {
            display: none;
            background: #444;
            color: white;
            padding: 2rem;
            text-align: left;
        }
        #impressum.show {
            display: block;
        }
        #impressum-toggle {
            cursor: pointer;
            text-decoration: underline;
        }
        #impressum-toggle:hover {
            color: #ddd;
        }
        #form-response {
            margin-top: 10px;
            color: #779e6b;
        }