* {
            box-sizing: border-box;
        }

       

        /* DER ÄUSSERE RAHMEN: Steuert das globale Spaltenraster */
        .ZBA-gesamt-rahmen {
            border: 2px solid #333333;
            padding: 20px;
            border-radius: 16px;
            background-color: #ffffff;
            
            /* CSS Grid für synchrone Spalten auf großen Bildschirmen */
            display: grid;
            grid-template-columns: minmax(0, 1fr) fit-content(45%) minmax(0, 1fr) minmax(0, 1fr); 
            gap: 20px;
        }

        /* Haupt-Container klinkt sich in das Raster des Elternelements ein */
        .ZBA-haupt-container {
            display: grid;
            grid-template-columns: subgrid; 
            grid-column: 1 / -1; 
            gap: 15px;
            border-bottom: 2px solid #666666;
        }

        /* Gemeinsames Design für die Boxen A, B, C und D */
        .ZBA-box {
            padding: 5px 15px; 
            font-weight: bold;
            text-decoration: none;
            display: block;
            word-break: break-word; 
            overflow-wrap: break-word;
        }

        
        /* Spezifische Anpassung für C und D, um zwei Texte getrennt zu positionieren */
        .ZBA-box-c, .ZBA-box-d {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding-top: 15px; /* Kleinerer Abstand nach oben für den oberen Text */
        }

        /* Styling für den Text am oberen Rand */
        .ZBA-text-oben {
            font-size: 14px;
            font-weight: normal;
            opacity: 0.9;
            margin-bottom: 10px;
        }

        /* Styling für den Text, der vertikal zentriert sein soll */
        .ZBA-text-mitte {
            font-weight: bold;
            margin-top: auto; /* Schiebt das Element zusammen mit dem ::after in die Mitte */
            margin-bottom: auto;
        }
        
        
        
        
        
        /* Individuelle Hintergrundfarben */
        .ZBA-box-a { text-align: center; align-content: center;} /* Rot */
        .ZBA-box-b {  } /* Blau */
        .ZBA-box-c { text-align: center; align-content: center;} /* Grün */
        .ZBA-box-d { text-align: center; align-content: center;} /* Gelb */
        
        /* Visuelles Feedback beim Drüberfahren für die verlinkten Boxen */
        .ZBA-box-a:hover, .ZBA-box-b:hover {
            opacity: 0.85;
            cursor: pointer;
        }

        /* Neuer Container für die 3er-Boxen am Ende */
        .ZBA-dreier-container {
            grid-column: 1 / -1; 
            display: flex;
            flex-wrap: wrap; /* Erlaubt Zeilenumbrüche für die Boxen darin */
            gap: 15px;
        }

        /* Design für die neuen 3er-Boxen */
        .ZBA-box-3er {
            flex: 1; /* Standard: Teilt sich den Platz auf Desktops drittelweise */
            padding: 0px 0;
            text-align: center;
            align-content: center;
            font-weight: bold;
        }
.ZBA-abschluss-text {
            grid-column: 1 / -1; /* Nimmt im Grid die volle Breite ein */
            width: 100%;        /* Nimmt im Flex-Modus die volle Breite ein */
            text-align: right;
            font-size: 16px;
            line-height: 1.5;
        }
        .ZBA-top-text {
            grid-column: 1 / -1; /* Nimmt im Grid die volle Breite ein */
            width: 100%;        /* Nimmt im Flex-Modus die volle Breite ein */
            text-align: left;
            font-size: 16px;
            line-height: 1.5;
        }
        /* --- RESPONSIVE REGELN --- */

        /* 1. STUFE: Unter 1000px Bildschirmbreite */
        @media (max-width: 1000px) {
            .ZBA-gesamt-rahmen {
                display: flex;
                flex-direction: column;
            }

            .ZBA-haupt-container {
                display: flex;
                flex-wrap: wrap;
            }

            .ZBA-box-b {
                flex: 0 0 100%; 
                max-width: 100%; 
                order: -1; /* B rutscht nach ganz oben */
            }
            
            .ZBA-box-a, .ZBA-box-c, .ZBA-box-d {
                flex: 1; /* A, C, D stehen nebeneinander darunter */
            }
        }

        /* 2. STUFE: Unter 800px Bildschirmbreite */
        @media (max-width: 600px) {
            /* 4er-Gruppe Anpassungen */
            .ZBA-box-a {
                flex: 0 0 100%;
                max-width: 100%;
            }
            .ZBA-box-c, .ZBA-box-d {
                flex: 1 0 calc(50% - 8px); 
            }

            /* NEU: 3er-Gruppe Anpassungen unter 800px */
            /* Box 1 und Box 2 erhalten per CSS-Selektor jeweils die halbe Breite */
            .ZBA-box-3er:nth-child(1), 
            .ZBA-box-3er:nth-child(2) {
                flex: 1 0 calc(50% - 8px);
            }

            /* Box 3 erhält die volle Breite zugewiesen und bricht nach unten um */
            .ZBA-box-3er:nth-child(3) {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }