:root {
    --yellow: #f9c736;
    --yellow-radial: #ffde88;
    --yellow-light: #fdf1b9;
    --wirkungstyp: #fffcef;
    --brand-bg: #fdf1b9; /* Seitenhintergrund */
    --brand-card: #fffbe8; /* Karten-Panels */
    --brand-text: #212529; /* Standard-Textfarbe */
    --brand-muted: #5c5f64; /* Sekundärtext */
    --brand-gold: #f9c736; /* Button-Hintergrund */
    --brand-gold-600: #ffde77; /* Button Hover */
    --brand-gold-200: #fce289; /* hellere Akzente */
    --brand-outline: rgba(249, 199, 54, .45);
}

#img-ramona-sparring {
    object-position: center;
    width: auto;
    height: 330px;
    margin-bottom: -30px;
    margin-left: -20px;
}

#img-03-tuev-sparring {
    position: absolute;
    right: 0;
    top: 0px;

    img {
        width: 65%;
    }
}

.bg-ramona-image {
    position: relative; /* Wichtig für absolute Positionierung des Pseudo-Elements */
    /* Entferne oder kommentiere background-image hier heraus */
    /* background-image: url(/images/ueber-mich-2.png); */
}

.bg-ramona-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/images/ueber-mich-2.png);
    background-repeat: no-repeat;
    background-size: 600px;
    opacity: 0.3; /* Nur das Bild ist transparent */
    z-index: -1; /* Bild hinter Inhalt */
}

#img-quali-tuev-ws {
    width: 180px;
}

#img-quali-herk-ws {
    height: 90px;
}

#img-quali-ifv-ws {
    height: 90px;
}

#img-quali-emtrace-ws {
    width: 180px;
}

.ablauf-section {

    .ablauf-line-top {
        width: 10px;
        height: 80px
    }

    .ablauf-line {
        width: 10px;
        height: 80px
    }

    .ablauf-circle {
        width: 80px;
        height: 80px;
        transform: translateY(-50%);
        margin-bottom: -30px;

        h2 {
            color: var(--wirkungstyp);
            font-size: 80px;
            margin-top: -8px;
        }
    }
}

.card-headline {
    font-size: 19px;
}

.yellow-stripe {

}

@media (min-width: 768px) {

}

@media (min-width: 992px) {


    #img-ramona-sparring {
        position: absolute;
        right: -70px;
        bottom: 0px;
        height: 600px;
        width: auto;
    }

    #img-03-tuev-sparring {
        position: absolute;
        right: 10px;
        top: 10px;
        width: auto;
        height: 100px;

        img {
            width: auto;
        }
    }

    .ablauf-section {
        .ablauf-line-top {
            width: 10px;
            height: 150px
        }

        .ablauf-line {
            width: 10px;
            height: 100px
        }

        .ablauf-circle {
            width: 100px;
            height: 100px;
            transform: translateY(-50%);
            margin-bottom: -30px;

            h2 {
                color: var(--wirkungstyp);
                font-size: 100px;
                margin-top: -8px;
            }
        }
    }
}

@media screen and (min-width: 1200px) {

    .bg-ramona-image::before {
        opacity: 1;
    }

    .circle-content {
        height: 570px;
    }

    #img-ramona-sparring {
        right: 75px;
    }

    .card-headline {
        font-size: 19px;
        position: absolute;
    }

    .yellow-stripe {
        margin-top: 150px;
    }
}