body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
    
        .container {
            display: grid;
            grid-template-columns: repeat(6, 1fr); /* Sechs gleichmäßige Spalten */
            gap: 20px; /* Abstand zwischen den Elementen */
            max-width: 1200px; /* Maximale Breite */
            margin: auto; /* Zentriert den Container */
            padding: 20px;
        }
    
        .step {
            text-align: center;
            border-radius: 8px;
            padding: 10px;
            box-shadow: rgba(0, 0, 0, 0.15) -2px -2px, rgba(255, 255, 255, 0.15) -2px -2px; /* Leichte Schatten für Tiefe */
        }
    
        /* Hintergrundfarbe für jedes zweite Element */
        .step:nth-child(even) {
            background-color: #8ed1fc; /* Blau für gerade Elemente */
        }
    
        /* Hintergrundfarbe für jedes ungerade Element */
        .step:nth-child(odd) {
            background-color: #ffffff; /* Weiß für ungerade Elemente */
        }
    
        @media (max-width: 768px) {
            .container {
                grid-template-columns: repeat(2, 1fr); /* Zwei Spalten auf mobilen Geräten */
            }
        }
    
        @media (max-width: 480px) {
            .container {
                grid-template-columns: repeat(1, 1fr); /* Eine Spalte auf Handys */
            }
        }