:root{
    /* einheitliche Variablen für die Komplette Website */
    --accent-color: #d52c3a;
    --primary-color: #1B1C1F;
    --secondary-color: #101113;
    --text-color: #d9d9d9;
    --secondary-text-color: #7f8082;
    --light-secondary-color: #7f8082;
}


/* Basierend auf deinem vorhandenen CSS, mit Verbesserungen */

#about_me_section {
    position: relative;
    padding: 100px 0;
    background-color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    flex-wrap: wrap-reverse;
    background-image: url('../Bilder/hintergrund/stra.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    color: white;
}

#about_me_section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Schwarzes Overlay mit 50% Transparenz */
    z-index: 1;
}

#about_me_section > * {
    position: relative;
    z-index: 2;
}


.about_me_container {
    width: 100%; /* Flexibler für Responsive Design */
    max-width: 1000px; /* Behält Maximalbreite bei, aber lässt Flexibilität zu */
    padding: 0 0 60px 0px; /* Etwas Innenabstand für kleinere Bildschirme */
    background-color: rgba(255, 255, 255, 0.00); /* Weiß mit 50% Transparenz */
}

#about_me_section img {
    width: 100%; /* Macht das Bild responsive */
    max-width: 400px; /* Maximale Breite beibehalten */
    border: 15px solid var(--text-color);
    height: auto; /* Behält das Seitenverhältnis bei */
}

.about_me_container h3 {
    font-size: 1.75rem; /* Basisschriftgröße */
    /* Mindest- und Höchstgrenzen für Schriftgröße mit calc() können hier nicht direkt angewendet werden. */
}

.about_me_container p {
    text-align: justify;
    line-height: 175%;
}

@media(max-width: 1000px) {
    #about_me_section {
        padding: 50px 20px; /* Etwas mehr Polsterung für kleinere Bildschirme */
    }
    .about_me_container h3 {
        text-align: center;
        font-size: calc(5vw + 10px); /* Dynamische Schriftgröße mit einem Basiswert */
        /* Beispiel für eine dynamische Anpassung, mit einem Minimum und einem Maximum */
    }
}

/* Zusätzliche Media Queries für weitere Feinabstimmungen */

@media(max-width: 600px) {
    .about_me_container h3 {
        font-size: calc(4vw + 10px); /* Kleinere Bildschirme, kleinere Basis für Schriftgrößen */
    }
}

/* Beispiel für eine Maximalgrenze für Schriftgrößen, die über eine spezifischere Regel implementiert werden könnte */

.about_me_container h3 {
    font-size: 1.75rem; /* Standardgröße */
}

@media(min-width: 1001px) {
    .about_me_container h3 {
        font-size: 2rem; /* Etwas größer für sehr große Bildschirme, als Beispiel */
        color: var(--text-color);
    }
    .about_me_container p {
        color: var(--secondary-color);
        font-size: 1.3rem;
        color: var(--text-color);
    }
}