:root {
    --font-main: "Trispace Variable";
    --text-color: black;
    --text-size: 1rem;
    --grid-gap: 1.25rem;
    --page-padding: 2rem;
    --line-height: 1.4;
}
.about-grid {
    /* Grid Layout */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gap);
    padding: 0 var(--page-padding);
    margin-top: 10vh;
    margin-bottom: 50vh;
    align-items: start;

    @media (max-width: 768px) {
        display: flex;
        flex-direction: column; /* Alles untereinander */
        margin-top: 2rem;
        margin-bottom: 10rem;
        padding: 0 var(--page-padding);
    }
    .about-label {
        grid-column: 2 / 12;
        font-family: var(--font-main);
        font-size: var(--text-size);
        font-weight: bold;
        text-transform: uppercase;
        color: var(--text-color);
        margin: 0;
        margin-bottom: 2rem;

        @media (max-width: 768px) {
            width: 100%;
            margin-bottom: 1rem;
        }
    }
    .about-text {
        grid-column: 2 / 6;
        font-family: var(--font-main);
        font-size: var(--text-size);
        line-height: var(--line-height);

        @media (max-width: 768px) {
            width: 100%; /* Volle Breite nutzen */
            margin-bottom: 3rem; /* Abstand zum Bild */
        }
    }
    .about-img {
        grid-column: 8 / 12;
        margin: 0;
        margin-top: -3rem;

        img {
            width: 100%;
            height: auto;
            display: block;
        }
        @media (max-width: 768px) {
            width: 50%;
            margin: 0 auto; /* zentrieren */
            align-self: center;
        }
    }
}