/*made by www.ClaxDesign.com*/

/* =============================================================================
   ÜBER UNS – HAUPT-CONTAINER FÜR DIE SEKTION
   =============================================================================
   Hier definiere ich den Haupt-Container für die "Über uns"-Sektion der Webseite.
   Dieser Container ist relativ positioniert, um absolute Positionierungen von Kind-Elementen
   zu ermöglichen. Er hat Innenabstände von 6rem oben/unten und 2rem links/rechts, um den Inhalt
   optisch ansprechend zu platzieren. Der Text innerhalb des Containers ist zentriert.

   - position: relative;: Ermöglicht die absolute Positionierung von Kind-Elementen innerhalb dieses Containers.
   - padding: 6rem 2rem;: Setzt Innenabstände von 6rem oben/unten und 2rem links/rechts, um den Inhalt
     optisch ansprechend zu platzieren und ausreichend Abstand zum Rand zu gewährleisten.
   - text-align: center;: Zentriert den Text innerhalb des Containers horizontal.
   ============================================================================= */
.about-container {
    position: relative;
    padding: 6rem 2rem;
    text-align: center;
}

/* =============================================================================
   ÜBER UNS – ÜBERSCHRIFT MIT FARBVERLAUF UND KONTUR
   =============================================================================
   Hier definiere ich die Überschrift der "Über uns"-Sektion. Die Überschrift hat einen negativen
   oberen Abstand, um sie näher an den oberen Rand des Containers zu ziehen. Sie ist groß (60px),
   hat einen Farbverlauf als Hintergrund und eine weiße Kontur, die den Text umrandet. Der Farbverlauf
   wird animiert, um einen dynamischen Effekt zu erzeugen. Zusätzlich gibt es mehrere Textschatten,
   um einen Glow-Effekt und Tiefe zu erzeugen.

   - margin-top: -50px !important;: Verschiebt die Überschrift um 50 Pixel nach oben, um sie näher
     an den oberen Rand des Containers zu ziehen und optisch ansprechender zu platzieren.
   - font-size: 60px !important;: Setzt die Schriftgröße auf 60 Pixel, um die Überschrift prominent
     und auffällig zu gestalten.
   - margin-bottom: 50px !important;: Fügt einen unteren Abstand von 50 Pixel hinzu, um ausreichend
     Platz zwischen der Überschrift und dem folgenden Inhalt zu schaffen.
   - line-height: 1.2;: Setzt die Zeilenhöhe auf 1.2, um die Lesbarkeit zu verbessern und
     die Überschrift kompakt zu halten.
   - background: linear-gradient(90deg, red, yellow, #00ffff, #b08aff, #ff6bcb, #0a3cff);:
     Definiert einen horizontalen Farbverlauf als Hintergrund der Überschrift, der von Rot über Gelb,
     Türkis, Lila, Pink zu Blau verläuft. Dies erzeugt einen auffälligen, dynamischen Look.
   - -webkit-background-clip: text;: Beschränkt den Farbverlauf auf den Textbereich, sodass nur
     der Text den Farbverlauf zeigt und nicht der gesamte Hintergrund.
   - -webkit-text-fill-color: transparent;: Macht den Text transparent, sodass der Farbverlauf
     durch den Text sichtbar wird.
   - background-size: 300% 300%;: Vergrößert den Hintergrund des Farbverlaufs, um den Animationsbereich
     zu definieren und einen fließenden Übergang zu ermöglichen.
   - animation: textGradient 7s ease infinite;: Wendet eine Animation auf den Farbverlauf an,
     die den Verlauf langsam von links nach rechts und zurück bewegt, um einen dynamischen Effekt zu erzeugen.
   - -webkit-text-stroke: 1.5px #b08aff;: Fügt eine 1.5 Pixel dicke Kontur in Lila um den Text hinzu,
     um ihn besser vom Hintergrund abzuheben und einen modernen Look zu erzeugen.
   - text-stroke: 2.5px #000;: Fallback für die Text-Kontur, falls -webkit-text-stroke nicht unterstützt wird.
   - paint-order: stroke fill;: Bestimmt die Reihenfolge, in der der Text gezeichnet wird: zuerst die Kontur,
     dann die Füllung. Dies stellt sicher, dass der Farbverlauf innerhalb der Kontur sichtbar ist.
   - text-shadow: Definiert mehrere Textschatten, um einen Glow-Effekt und Tiefe zu erzeugen. Die Schatten
     bestehen aus einem leichten weißen Glow, einem dunklen Schatten für Kontrast und mehreren farbigen
     Glow-Effekten in Türkis, Lila, Pink und Blau, um den Text auffälliger und dynamischer wirken zu lassen.
   ============================================================================= */
.about-container h2 {
    margin-top: -50px !important; /* noch mehr Abstand nach oben zum Text */
    font-size: 60px !important;
    margin-bottom: 50px !important;
    line-height: 1.2;
    background: linear-gradient(90deg, red, yellow, #00ffff, #b08aff, #ff6bcb, #0a3cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% 300%;
    animation: textGradient 7s ease infinite;
    /* Farbverlauf + weiße Kontur für DEN GESAMTEN TEXT (nicht nur strong) */
    -webkit-text-stroke: 1.5px #b08aff;     /* weißer Outline / Stroke um den gesamten Text */
    text-stroke: 2.5px #000;             /* Fallback */
    paint-order: stroke fill;               /* Kontur zuerst malen → Verlauf innen sichtbar */
    text-shadow:
        1px 0 1px rgba(255,255,255,0.6),     /* leichter weißer Glow um die Kontur */
        0 0 1px rgba(0,0,0,0.85),           /* dunkler Innen-Schatten für Kontrast */
        0 0 8px #00ffff,
        0 0 16px #00ffff,
        0 0 32px #b08aff,
        0 0 48px #ff6bcb,
        0 0 64px #0a3cff;
}

/* =============================================================================
   ANIMATION – FARBVERLAUF FÜR DIE ÜBERSCHRIFT
   =============================================================================
   Hier definiere ich die Keyframes für die Animation des Farbverlaufs in der Überschrift.
   Die Animation bewegt den Hintergrund des Farbverlaufs von links nach rechts und zurück,
   um einen dynamischen, fließenden Effekt zu erzeugen.

   - 0%: Startposition des Farbverlaufs (0% horizontal, 50% vertikal).
   - 50%: Mittlere Position des Farbverlaufs (100% horizontal, 50% vertikal).
   - 100%: Endposition des Farbverlaufs (0% horizontal, 50% vertikal), kehrt also zur Startposition zurück.
   ============================================================================= */
@keyframes textGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =============================================================================
   LIGHT MODE – ANPASSUNGEN FÜR DIE ÜBERSCHRIFT
   =============================================================================
   Hier definiere ich Anpassungen für die Überschrift im Light-Mode. Die Überschrift behält ihren
   Farbverlauf und ihre Kontur, aber der obere Abstand wird leicht angepasst, um optisch besser
   zum hellen Hintergrund zu passen.

   - margin-top: -60px !important;: Verschiebt die Überschrift um 60 Pixel nach oben, um sie im Light-Mode
     optisch ansprechender zu platzieren.
   - font-size: 60px !important;: Behält die Schriftgröße von 60 Pixel bei.
   - margin-bottom: 50px !important;: Behält den unteren Abstand von 50 Pixel bei.
   - line-height: 1.2;: Behält die Zeilenhöhe von 1.2 bei.
   - background: linear-gradient(90deg, red, yellow, #00ffff, #b08aff, #ff6bcb, #0a3cff);:
     Behält den horizontalen Farbverlauf bei.
   - -webkit-background-clip: text;: Behält die Beschränkung des Farbverlaufs auf den Textbereich bei.
   - -webkit-text-fill-color: transparent;: Behält die Transparenz des Textes bei.
   - background-size: 300% 300%;: Behält die Vergrößerung des Hintergrunds bei.
   - animation: textGradient 7s ease infinite;: Behält die Animation des Farbverlaufs bei.
   - -webkit-text-stroke: 1.5px #b08aff;: Behält die lila Kontur um den Text bei.
   - text-stroke: 2.5px #000;: Behält den Fallback für die Text-Kontur bei.
   - paint-order: stroke fill;: Behält die Reihenfolge des Zeichnens bei.
   ============================================================================= */
body.light-mode .about-container h2 {
    margin-top: -60px !important; /* noch mehr Abstand nach oben zum Text */
    font-size: 60px !important;
    margin-bottom: 50px !important;
    line-height: 1.2;
    background: linear-gradient(90deg, red, yellow, #00ffff, #b08aff, #ff6bcb, #0a3cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% 300%;
    animation: textGradient 7s ease infinite;
    /* Farbverlauf + weiße Kontur für DEN GESAMTEN TEXT (nicht nur strong) */
    -webkit-text-stroke: 1.5px #b08aff;     /* weißer Outline / Stroke um den gesamten Text */
    text-stroke: 2.5px #000;             /* Fallback */
    paint-order: stroke fill;               /* Kontur zuerst malen → Verlauf innen sichtbar */
}

/* =============================================================================
   ÜBER UNS – INHALTS-BOX MIT GLAS-EFFEKT UND RAHMEN
   =============================================================================
   Hier definiere ich die Inhalts-Box der "Über uns"-Sektion. Diese Box hat einen halbtransparenten,
   dunklen Hintergrund mit einem Unschärfe-Effekt (Glas-Effekt), abgerundete Ecken, einen Schatten
   für Tiefe und einen animierten Rahmen. Der Text innerhalb der Box ist linksbündig, weiß und
   hat eine angenehme Lesbarkeit durch ausreichende Zeilenabstände.

   - max-width: 1100px;: Begrenzt die maximale Breite der Box auf 1100 Pixel, um sie auf großen Bildschirmen
     nicht zu breit wirken zu lassen.
   - margin: 0 auto;: Zentriert die Box horizontal innerhalb des Eltern-Containers.
   - padding: 3rem 4rem;: Fügt Innenabstände von 3rem oben/unten und 4rem links/rechts hinzu, um den Inhalt
     optisch ansprechend zu platzieren.
   - background: rgba(30, 30, 45, 0.7);: Setzt einen halbtransparenten, dunklen Hintergrund (RGBA: 30, 30, 45, 70% Deckkraft),
     um einen modernen Glas-Effekt zu erzeugen.
   - backdrop-filter: blur(15px);: Wendet einen Unschärfe-Filter auf den Hintergrund an, um den Glas-Effekt
     zu verstärken und den Hintergrund leicht durchscheinen zu lassen.
   - -webkit-backdrop-filter: blur(15px);: Fallback für den Unschärfe-Filter in Safari.
   - border-radius: 0 0 25px 25px;: Rundet die unteren Ecken der Box mit einem Radius von 25 Pixel ab,
     um ein weiches, modernes Erscheinungsbild zu erzeugen.
   - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);: Fügt einen Schatten hinzu, der der Box Tiefe verleiht.
     Der Schatten hat eine vertikale Ausdehnung von 15 Pixel, eine Unschärfe von 40 Pixel und eine Deckkraft von 30%.
   - border: 5px solid transparent;: Setzt einen transparenten Rahmen mit einer Breite von 5 Pixel,
     der später durch ein Pseudo-Element mit einem Farbverlauf ersetzt wird.
   - position: relative;: Ermöglicht die absolute Positionierung von Pseudo-Elementen innerhalb der Box.
   - background-clip: padding-box;: Beschränkt den Hintergrund auf den Padding-Bereich der Box.
   - color: white;: Setzt die Textfarbe auf weiß, um einen guten Kontrast zum dunklen Hintergrund zu bieten.
   - font-size: 1.2rem;: Setzt die Schriftgröße auf 1.2rem für eine gute Lesbarkeit.
   - line-height: 1.9;: Setzt die Zeilenhöhe auf 1.9, um den Text angenehm lesbar zu machen.
   - text-align: left;: Richtet den Text linksbündig aus, um eine bessere Lesbarkeit zu gewährleisten.
   ============================================================================= */
.about-box {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 4rem;
    background: rgba(30, 30, 45, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 0 0 25px 25px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    border: 5px solid transparent;
    position: relative;
    background-clip: padding-box;
    color: white;
    font-size: 1.2rem;
    line-height: 1.9;
    text-align: left;
}

/* =============================================================================
   ÜBER UNS – ANIMIERTER RAHMEN FÜR DIE INHALTS-BOX
   =============================================================================
   Hier definiere ich ein Pseudo-Element, das einen animierten Rahmen um die Inhalts-Box erzeugt.
   Der Rahmen hat einen Farbverlauf, der sich langsam bewegt, um einen dynamischen Effekt zu erzeugen.
   Der Rahmen liegt hinter der Box und ist leicht größer, um einen 3D-Effekt zu erzeugen.

   - content: '';: Erzeugt ein leeres Pseudo-Element.
   - position: absolute;: Positioniert das Pseudo-Element absolut innerhalb der Inhalts-Box.
   - inset: -5px;: Positioniert das Pseudo-Element 5 Pixel außerhalb der Inhalts-Box (oben, rechts, unten, links).
   - border-radius: 30px;: Rundet die Ecken des Rahmens mit einem Radius von 30 Pixel ab,
     um ein weiches Erscheinungsbild zu erzeugen.
   - border: 10px solid;: Setzt einen festen Rahmen mit einer Breite von 10 Pixel.
   - border-image: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb, #0a3cff, #00ffff) 1;:
     Definiert einen horizontalen Farbverlauf als Rahmen (Türkis, Lila, Pink, Blau, Türkis).
   - border-image-slice: 1;: Teilt den Rahmen in 1 Segment, um den Farbverlauf gleichmäßig zu verteilen.
   - background-size: 400% 400%;: Vergrößert den Hintergrund des Farbverlaufs, um den Animationsbereich
     zu definieren.
   - animation: borderFlow 12s linear infinite;: Wendet eine Animation auf den Rahmen an, die den
     Farbverlauf langsam von links nach rechts und zurück bewegt.
   - z-index: -1;: Positioniert den Rahmen hinter dem Inhalt der Inhalts-Box.
   ============================================================================= */
.about-box::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 30px;
    border: 10px solid;
    border-image: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb, #0a3cff, #00ffff) 1;
    border-image-slice: 1;
    background-size: 400% 400%;
    animation: borderFlow 12s linear infinite;
    z-index: -1;
}

/* =============================================================================
   ANIMATION – FARBVERLAUF FÜR DEN RAHMEN
   =============================================================================
   Hier definiere ich die Keyframes für die Animation des Farbverlaufs im Rahmen der Inhalts-Box.
   Die Animation bewegt den Hintergrund des Farbverlaufs von links nach rechts und zurück,
   um einen fließenden, dynamischen Effekt zu erzeugen.

   - 0%: Startposition des Farbverlaufs (0% horizontal, 50% vertikal).
   - 50%: Mittlere Position des Farbverlaufs (100% horizontal, 50% vertikal).
   - 100%: Endposition des Farbverlaufs (0% horizontal, 50% vertikal), kehrt also zur Startposition zurück.
   ============================================================================= */
@keyframes borderFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =============================================================================
   ÜBER UNS – HOVER-EFFEKT FÜR DIE INHALTS-BOX
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Inhalts-Box. Beim Hovern wird die Box leicht nach oben
   verschoben, um einen interaktiven Effekt zu erzeugen und die Box hervorzuheben.

   - transform: translateY(-15px);: Verschiebt die Box um 15 Pixel nach oben, um einen Schwebe-Effekt
     zu erzeugen, der die Box optisch näher an den Betrachter heranrückt.
   ============================================================================= */
.about-box:hover {
    transform: translateY(-15px);
}

/* =============================================================================
   ÜBER UNS – ABSATZ-FORMATIERUNG IN DER INHALTS-BOX
   =============================================================================
   Hier definiere ich die Formatierung für Absätze innerhalb der Inhalts-Box. Die Absätze haben einen
   unteren Abstand, um den Text optisch ansprechend zu strukturieren, und einen Textschatten für bessere
   Lesbarkeit.

   - margin-bottom: 1.8rem;: Fügt einen unteren Abstand von 1.8rem hinzu, um die Absätze klar voneinander
     zu trennen und die Lesbarkeit zu verbessern.
   - text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);: Fügt einen Textschatten hinzu, der den Text vom Hintergrund
     abhebt und die Lesbarkeit verbessert. Der Schatten hat eine vertikale Ausdehnung von 1 Pixel,
     eine Unschärfe von 4 Pixel und eine Deckkraft von 80%.
   ============================================================================= */
.about-box p {
    margin-bottom: 1.8rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* =============================================================================
   ÜBER UNS – HERVORGEHOBENER TEXT IN ABSÄTZEN
   =============================================================================
   Hier definiere ich die Formatierung für hervorgehobenen Text (z. B. wichtige Begriffe oder Schlüsselwörter)
   innerhalb der Absätze. Der hervorgehobene Text ist türkisfarben, fett und hat einen Glow-Effekt,
   um ihn optisch hervorzuheben.

   - color: #00ffff;: Setzt die Textfarbe auf Türkis, um den Text auffällig zu gestalten.
   - font-weight: 800;: Setzt die Schrift auf extra-fett, um den Text stark hervorzuheben.
   - text-shadow: 0 0 15px rgba(0, 255, 255, 0.7);: Fügt einen türkisfarbenen Glow-Effekt hinzu,
     der den Text leuchten lässt und ihn optisch auffälliger macht. Der Glow hat eine Unschärfe von 15 Pixel
     und eine Deckkraft von 70%.
   ============================================================================= */
.about-box p strong {
    color: #00ffff;
    font-weight: 800;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
}

/* =============================================================================
   LIGHT MODE – ANPASSUNGEN FÜR DIE INHALTS-BOX
   =============================================================================
   Hier definiere ich Anpassungen für die Inhalts-Box im Light-Mode. Die Box hat einen fast weißen,
   leicht transparenten Hintergrund, eine dunkle Textfarbe und einen subtilen Rahmen für einen
   sauberen Look.

   - background: rgba(255, 255, 255, 0.92) !important;: Setzt einen fast weißen, leicht transparenten
     Hintergrund (RGBA: 255, 255, 255, 92% Deckkraft), um einen hellen, aber nicht blendenden Look zu erzeugen.
   - color: #111111 !important;: Setzt die Textfarbe auf ein sehr dunkles Grau, um einen guten Kontrast
     zum hellen Hintergrund zu bieten und die Lesbarkeit zu gewährleisten.
   - border: 1px solid rgba(0, 0, 0, 0.12);: Fügt einen subtilen, dunklen Rahmen mit 12% Deckkraft hinzu,
     um die Box optisch abzugrenzen, ohne zu dominant zu wirken.
   - text-shadow: none;: Entfernt den Textschatten, da er im Light-Mode nicht benötigt wird und die
     Lesbarkeit beeinträchtigen könnte.
   ============================================================================= */
body.light-mode .about-box {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #111111 !important;
    border: 1px solid rgba(0, 0, 0, 0.12);
    text-shadow: none;
}

/* =============================================================================
   LIGHT MODE – ANPASSUNGEN FÜR HERVORGEHOBENEN TEXT
   =============================================================================
   Hier definiere ich Anpassungen für hervorgehobenen Text im Light-Mode. Der Text ist dunkelblau
   und hat einen subtilen Glow-Effekt, um ihn optisch hervorzuheben, ohne zu grell zu wirken.

   - color: #0a3cff;: Setzt die Textfarbe auf Dunkelblau, um einen guten Kontrast zum hellen Hintergrund
     zu bieten und den Text auffällig, aber nicht zu grell zu gestalten.
   - text-shadow: 0 2px 10px rgba(10, 60, 255, 0.25);: Fügt einen subtilen, dunkelblauen Glow-Effekt hinzu,
     der den Text leicht leuchten lässt. Der Glow hat eine vertikale Ausdehnung von 2 Pixel, eine Unschärfe
     von 10 Pixel und eine Deckkraft von 25%, um einen dezenten Effekt zu erzeugen.
   ============================================================================= */
body.light-mode .about-box p strong {
    color: #0a3cff;
    text-shadow: 0 2px 10px rgba(10, 60, 255, 0.25);
}

/* =============================================================================
   LIGHT MODE – ANPASSUNGEN FÜR DEN RAHMEN DER INHALTS-BOX
   =============================================================================
   Hier definiere ich Anpassungen für den animierten Rahmen der Inhalts-Box im Light-Mode.
   Der Rahmen wird auf einen einfachen, weißen Farbverlauf reduziert, um einen sauberen Look
   zu gewährleisten, der zum hellen Hintergrund passt.

   - background: linear-gradient(90deg, white);: Setzt den Farbverlauf des Rahmens auf Weiß,
     um einen sauberen, minimalistischen Look zu erzeugen, der zum hellen Hintergrund passt.
   ============================================================================= */
body.light-mode .about-box::before {
    background: linear-gradient(90deg, white);
}

/* =============================================================================
   RESPONSIVE ANPASSUNGEN FÜR TABLETS (BIS 900PX)
   =============================================================================
   Hier definiere ich Anpassungen für die "Über uns"-Sektion auf Tablets mit einer Bildschirmbreite
   von bis zu 900 Pixel. Die Innenabstände werden reduziert, die Überschrift kleiner und die Inhalts-Box
   kompakter gestaltet, um auf kleineren Bildschirmen besser lesbar und nutzbar zu sein.

   - padding: 4rem 1.5rem;: Reduziert die Innenabstände des Containers auf 4rem oben/unten und 1.5rem links/rechts,
     um auf kleineren Bildschirmen Platz zu sparen.
   - font-size: 2.4rem;: Reduziert die Schriftgröße der Überschrift auf 2.4rem, um sie auf kleineren
     Bildschirmen besser lesbar zu machen.
   - padding: 2.5rem 3rem;: Reduziert die Innenabstände der Inhalts-Box auf 2.5rem oben/unten und 3rem links/rechts.
   - font-size: 1.05rem;: Reduziert die Schriftgröße des Textes in der Inhalts-Box auf 1.05rem.
   - line-height: 1.8;: Passt die Zeilenhöhe auf 1.8 an, um die Lesbarkeit auf kleineren Bildschirmen zu verbessern.
   - border-radius: 0 0 20px 20px;: Reduziert den Radius der abgerundeten Ecken auf 20 Pixel, um die Box
     kompakter wirken zu lassen.
   - font-size: 1.05rem;: Reduziert die Schriftgröße der Absätze auf 1.05rem, um sie auf kleineren Bildschirmen
     besser lesbar zu machen.
   ============================================================================= */
@media (max-width: 900px) {
    .about-container {
        padding: 4rem 1.5rem;
    }

    .about-container h2 {
        font-size: 2.4rem;
    }

    .about-box {
        padding: 2.5rem 3rem;
        font-size: 1.05rem;
        line-height: 1.8;
        border-radius: 0 0 20px 20px;
    }

    .about-box p {
        font-size: 1.05rem;
    }
}

/* =============================================================================
   RESPONSIVE ANPASSUNGEN FÜR MOBILE GERÄTE (BIS 600PX)
   =============================================================================
   Hier definiere ich weitere Anpassungen für die "Über uns"-Sektion auf mobilen Geräten mit einer
   Bildschirmbreite von bis zu 600 Pixel. Die Innenabstände und Schriftgrößen werden weiter reduziert,
   und die Inhalts-Box wird noch kompakter gestaltet, um auf sehr kleinen Bildschirmen optimal
   nutzbar zu sein.

   - padding: 2rem 1.8rem;: Reduziert die Innenabstände der Inhalts-Box weiter auf 2rem oben/unten und 1.8rem links/rechts.
   - font-size: 0.95rem;: Reduziert die Schriftgröße des Textes in der Inhalts-Box auf 0.95rem.
   - line-height: 1.75;: Passt die Zeilenhöhe auf 1.75 an, um die Lesbarkeit auf sehr kleinen Bildschirmen zu optimieren.
   - border-radius: 0 0 15px 15px;: Reduziert den Radius der abgerundeten Ecken weiter auf 15 Pixel.
   - font-size: 2.5rem !important;: Reduziert die Schriftgröße der Überschrift auf 2.5rem und zentriert sie,
     um sie auf mobilen Geräten besser lesbar und optisch ansprechender zu gestalten.
   - margin-top: 20px !important;: Passt den oberen Abstand der Überschrift auf 20 Pixel an, um sie auf
     mobilen Geräten optimal zu platzieren.
   - text-align: center;: Zentriert die Überschrift horizontal, um sie auf mobilen Geräten optisch ansprechender zu gestalten.
   - margin-bottom: 50px !important;: Behält den unteren Abstand der Überschrift bei, um ausreichend Platz
     zum folgenden Inhalt zu schaffen.
   - margin-top: 60px;: Fügt einen oberen Abstand von 60 Pixel zum Container hinzu, um auf mobilen Geräten
     ausreichend Platz zum oberen Rand zu gewährleisten.
   - font-size: 0.95rem;: Reduziert die Schriftgröße der Absätze auf 0.95rem.
   - margin-bottom: 1.4rem;: Reduziert den unteren Abstand der Absätze auf 1.4rem, um den Text kompakter zu gestalten.
   ============================================================================= */
@media (max-width: 600px) {
    .about-box {
        padding: 2rem 1.8rem;
        font-size: 0.95rem;
        line-height: 1.75;
        border-radius: 0 0 15px 15px;
    }

    .about-container h2 {
        font-size: 2.5rem !important;
        margin-top: 20px !important;
        text-align: center;
        margin-bottom: 50px !important;
    }

    body.light-mode .about-container h2 {
        font-size: 2.5rem !important;
        margin-top: 20px !important;
        text-align: center;
        margin-bottom: 50px !important;
    }

    .about-container {
        margin-top: 60px; /* Korrigiert auf 60px, da "60px;0" ein Tippfehler zu sein scheint */
    }

    .about-box p {
        font-size: 0.95rem;
        margin-bottom: 1.4rem;
    }
}