/* Der graue Container erzeugt die 1px Trennlinien */
        .crosscert-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Genau 3 Spalten */
            gap: 1px; /* Die Breite der Trennlinie */
            background-color: #e0e0e0; /* Die Farbe der Trennlinie */
            width: 100%;
            max-width: 900px;
            border: 1px solid #e0e0e0; /* Außenrahmen */
        }

        /* Basis-Styling für jede Box (im Normalzustand weiß) */
        .grid-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #ffffff; /* Startfarbe: Weiß */
            color: #333333; /* Textfarbe: Dunkelgrau */
            text-decoration: none;
            height: 180px;
            padding: 20px;
            box-sizing: border-box;
            text-align: center;
            font-weight: 500;
            font-size: 1.1rem;
            /* Sanfter Übergang für Text, Hintergrund und Icon */
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Die Icons (Emoticons als Platzhalter) */
        .grid-box .icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            transition: transform 0.3s ease;
        }

        /* HOVER-EFFEKTE (Individuelle Farben beim Drüberfahren) */

        /* Box 1: Blau */
        .box-blue:hover {
            background-color: #0056b3;
            color: #ffffff;
        }

        /* Box 2: Grün */
        .box-green:hover {
            background-color: #28a745;
            color: #ffffff;
        }

        /* Box 3: Orange/Rot */
        .box-orange:hover {
            background-color: #dc3545;
            color: #ffffff;
        }

        /* Box 4: Türkis */
        .box-teal:hover {
            background-color: #17a2b8;
            color: #ffffff;
        }

        /* Box 5: Violett */
        .box-purple:hover {
            background-color: #6f42c1;
            color: #ffffff;
        }

        /* Box 6: Gelb/Gold */
        .box-gold:hover {
            background-color: #ffc107;
            color: #212529; /* Dunkler Text für besseren Kontrast auf Gelb */
        }

        /* Icon-Animation beim Hover (optional) */
        .grid-box:hover .icon {
            transform: scale(1.1);
        }

        /* Responsive Design: Auf kleinen Bildschirmen untereinander */
        @media (max-width: 768px) {
            .crosscert-grid {
                grid-template-columns: 1fr; /* Nur 1 Spalte auf Handys */
            }
        }