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

#about_me_section {
    padding: 100px 0;
    background-color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    flex-wrap: wrap-reverse;
}

.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 15px; /* Etwas Innenabstand für kleinere Bildschirme */
}

#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 */
    }
}