* {
            box-sizing: border-box;
        }
   /* DER ÄUSSERE RAHMEN: Steuert das globale Spaltenraster (angepasst auf 3 Spalten) */
        .SB-gesamt-rahmen {         
            /* CSS Grid für synchrone Spalten auf großen Bildschirmen */
            display: grid;
            grid-template-columns: minmax(0, 1fr) fit-content(45%) minmax(0, 1fr); 
            gap: 20px;
        }

        /* Haupt-Container klinkt sich in das Raster des Elternelements ein und fungiert nun als Link */
        .SB-haupt-container {
            display: grid;
            grid-template-columns: subgrid; 
            grid-column: 1 / -1; 
            border: 2px solid var(--linkcolor);
            border-radius: 12px;
            gap: 15px;
            text-decoration: none; /* Verhindert ungewollte Unterstreichungen der inneren Boxen */
        }
        .SB-haupt-container:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.1);
            border-color: #007bff; 
        }
        /* Gemeinsames Design für die Boxen A, B und C */
        .SB-box {
            padding: 10px 15px; 
            text-align: center;
            font-weight: bold;
            font-size: var(--LiButFS); 
            color: #333333;
            border-radius: 8px;
            text-decoration: none;
            display: block;
            word-break: break-word; 
            overflow-wrap: break-word;
        }

        /* Spezifische Anpassung für C (Nutzt Flexbox-Säule) */
        .SB-box-c {
            display: flex;
            flex-direction: column;
            padding: 15px;
        }

        /* NEU: Das mittlere Div belegt jetzt die gesamte restliche Fläche und zentriert seinen Inhalt perfekt */
        .SB-text-mitte-wrapper {
            flex-grow: 1;          /* Belegt die gesamte restliche Fläche */
            display: flex;
            justify-content: center;
            align-items: center;   /* Zentriert den Text absolut in dieser Fläche */
        }

        /* Styling für den Haupttext in Box C */
        .SB-text-mitte {
            font-size: 24px;
            font-weight: bold;
        }

        /* Styling für den Text am unteren Rand */
        .SB-text-unten {
            font-size: 14px;
            font-weight: normal;
            opacity: 0.9;
            margin-top: 15px;      /* Mindestabstand nach oben, falls der Platz knapp wird */
        }

        /* Individuelle Hintergrundfarben */
        .SB-box-a { border: 1px solid #eee; border-radius: 10px; display: flex; justify-content: center; align-items: center; background-color: #FFFFFF;} /* Rot */
        .SB-box-b { color: var(--linkcolor2); } /* Blau */
        .SB-box-c {  } /* Grün */
        
        /* Visuelles Feedback beim Drüberfahren für die gesamte Zeile / den gesamten Container */
        .SB-haupt-container:hover {
            opacity: 0.9;
            cursor: pointer;
        }

        /* Neuer Container für die 3er-Boxen am Ende */
        .SB-dreier-container {
            grid-column: 1 / -1; 
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            padding: 20px;
            background-color: #e0e0e0;
            border-radius: 12px;
        }

        /* Design für die neuen 3er-Boxen */
        .SB-box-3er {
            flex: 1;
            padding: 40px 0;
            text-align: center;
            font-weight: bold;
            font-size: 24px;
            color: white;
            border-radius: 8px;
            background-color: #9b59b6; /* Lila */
        }

        /* Styling für den finalen Text ganz unten */
        .SB-abschluss-text {
            grid-column: 1 / -1; 
            width: 100%;        
            padding: 15px;
            background-color: #333333;
            color: #ffffff;
            text-align: center;
            font-size: 16px;
            border-radius: 8px;
            line-height: 1.5;
        }
        .SB-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) {
            .SB-gesamt-rahmen {
                display: flex;
                flex-direction: column;
            }

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

            .SB-box-b {
                flex: 0 0 100%; 
                max-width: 100%; 
                order: -1;
            }
            
            .SB-box-a, .SB-box-c {
                flex: 1;
            }
        }

        /* 2. STUFE: Unter 800px Bildschirmbreite */
        @media (max-width: 500px) {
            .SB-box-a {
                flex: 0 0 100%;
                max-width: 100%;
            }
            .SB-box-c {
                flex: 0 0 100%; 
                max-width: 100%;
            }

            .SB-box-3er:nth-child(1), 
            .SB-box-3er:nth-child(2) {
                flex: 1 0 calc(50% - 8px);
            }

            .SB-box-3er:nth-child(3) {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }