/*made by www.ClaxDesign.com*/

/* =============================================================================
   FOOTER – Grundstruktur und Hintergrund
   =============================================================================
   Hier definiere ich die grundlegenden Stile für den Footer-Bereich der Webseite.
   - background: blur rgba(0, 0, 0, 0.8);: Definiert einen halbtransparenten, dunklen Hintergrund mit Unschärfe-Effekt.
   - backdrop-filter: blur(15px);: Wendet einen Unschärfe-Filter auf den Hintergrund an, um einen "Glassmorphism"-Effekt zu erzeugen.
   - padding: 2rem 2rem 2rem;: Setzt Innenabstände von 2rem oben, rechts, unten und links.
   - width: 100%;: Der Footer nimmt die volle Breite der Webseite ein.
   - text-align: center;: Zentriert den Text innerhalb des Footers.
   - color: white;: Setzt die Standard-Textfarbe auf Weiß.
   - position: relative;: Ermöglicht die Positionierung von Kind-Elementen relativ zum Footer.
   - overflow: hidden;: Verhindert, dass Inhalte außerhalb des Footers sichtbar sind.
   - border-top: 1px solid rgba(255, 255, 255, 0.1);: Fügt eine dünne, halbtransparente obere Rahmenlinie hinzu.
   - margin-top: auto;: Drückt den Footer nach unten, falls der Inhalt der Seite kürzer als die Viewport-Höhe ist.
   ============================================================================= */
footer {
    background: blur rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(15px);
    padding: 2rem 2rem 2rem;
    width: 100%;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
}

/* =============================================================================
   FOOTER – Dekoratives Pseudo-Element für obere Linie
   =============================================================================
   Hier füge ich ein dekoratives Pseudo-Element hinzu, das eine horizontale Linie mit Farbverlauf oben im Footer darstellt.
   - content: '';: Erzeugt ein leeres Pseudo-Element.
   - position: absolute;: Positioniert das Element absolut innerhalb des Footers.
   - top: 0; left: 0;: Platziert das Element oben links im Footer.
   - width: 100%;: Das Element nimmt die volle Breite des Footers ein.
   - height: 2px;: Die Höhe der Linie beträgt 2 Pixel.
   - background: linear-gradient(90deg, transparent, #00ffff, transparent);: Definiert einen horizontalen Farbverlauf von transparent zu türkis und zurück zu transparent.
   ============================================================================= */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
}

/* =============================================================================
   FOOTER – Container für den Inhalt
   =============================================================================
   Hier definiere ich den Container, der den gesamten Inhalt des Footers umschließt.
   - max-width: 1200px;: Begrenzt die maximale Breite auf 1200px.
   - margin: 0 auto;: Zentriert den Container horizontal.
   - display: flex;: Aktiviert das Flexbox-Layout.
   - flex-direction: column;: Ordnet die Kind-Elemente vertikal an.
   - align-items: center;: Zentriert die Kind-Elemente horizontal.
   - gap: 2rem;: Setzt einen Abstand von 2rem zwischen den Kind-Elementen.
   ============================================================================= */
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

/* =============================================================================
   FOOTER – Container für Links
   =============================================================================
   Hier definiere ich den Container für die Navigationslinks im Footer.
   - display: flex;: Aktiviert das Flexbox-Layout.
   - gap: 2rem;: Setzt einen Abstand von 2rem zwischen den Links.
   - flex-wrap: wrap;: Erlaubt das Umbrechen der Links in die nächste Zeile, falls der Platz nicht ausreicht.
   - justify-content: center;: Zentriert die Links horizontal.
   ============================================================================= */
.footer-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* =============================================================================
   FOOTER – Stil für einzelne Links
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die einzelnen Links im Footer.
   - color: white;: Weiße Textfarbe für die Links.
   - text-decoration: none;: Entfernt die Standard-Unterstreichung der Links.
   - font-weight: 500;: Mittlere Schriftstärke.
   - transition: all 0.3s ease;: Ermöglicht sanfte Übergänge bei Änderungen (z.B. Hover-Effekte).
   - position: relative;: Ermöglicht die Positionierung von Pseudo-Elementen relativ zum Link.
   - padding: 0.5rem 0;: Setzt Innenabstände oben und unten.
   - cursor: pointer;: Zeigt an, dass der Link klickbar ist.
   ============================================================================= */
.footer-links a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    padding: 0.5rem 0;
    cursor: pointer;
}

/* =============================================================================
   FOOTER – Pseudo-Element für Unterstreichungseffekt bei Links
   =============================================================================
   Hier füge ich ein Pseudo-Element hinzu, das eine animierte Unterstreichung unter den Links darstellt.
   - content: '';: Erzeugt ein leeres Pseudo-Element.
   - position: absolute;: Positioniert das Element absolut innerhalb des Links.
   - bottom: 0; left: 0;: Platziert das Element unten links im Link.
   - width: 0;: Anfangsbreite des Elements ist 0, sodass es unsichtbar ist.
   - height: 1px;: Höhe der Unterstreichung beträgt 1 Pixel.
   - background: #00ffff;: Türkisfarbene Unterstreichung.
   - transition: width 0.3s ease;: Ermöglicht eine sanfte Animation der Breite beim Hovern.
   ============================================================================= */
.footer-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #00ffff;
    transition: width 0.3s ease;
}

/* =============================================================================
   FOOTER – Hover-Effekt für Links
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Links im Footer.
   - color: #00ffff;: Ändert die Textfarbe zu Türkis beim Hovern.
   ============================================================================= */
.footer-links a:hover {
    color: #00ffff;
}

/* =============================================================================
   FOOTER – Animation der Unterstreichung beim Hovern
   =============================================================================
   Hier definiere ich die Animation der Unterstreichung, wenn der Link gehovert wird.
   - width: 100%;: Die Unterstreichung nimmt die volle Breite des Links ein.
   ============================================================================= */
.footer-links a:hover::after {
    width: 100%;
}

/* =============================================================================
   FOOTER – Copyright-Text
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Copyright-Text im Footer.
   - font-size: 0.9rem;: Schriftgröße von 0.9rem.
   - color: rgba(255, 255, 255, 0.8);: Halbtransparente weiße Textfarbe.
   - margin-top: -1rem;: Negativer Abstand von oben, um den Text näher an das vorherige Element zu rücken.
   - position: relative;: Ermöglicht die Positionierung von Pseudo-Elementen relativ zum Copyright-Text.
   - display: inline-block;: Macht das Element zu einem Inline-Block, um Pseudo-Elemente korrekt zu positionieren.
   - padding-bottom: -10px;: Negativer Innenabstand unten (wird durch andere Stile überschrieben).
   ============================================================================= */
.copyright {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: -1rem;
    position: relative;
    display: inline-block;
    padding-bottom: -10px;
}

/* =============================================================================
   FOOTER – Pseudo-Element für Unterstreichungseffekt beim Copyright
   =============================================================================
   Hier füge ich ein Pseudo-Element hinzu, das eine animierte Unterstreichung unter dem Copyright-Text darstellt.
   - content: '';: Erzeugt ein leeres Pseudo-Element.
   - position: absolute;: Positioniert das Element absolut innerhalb des Copyright-Texts.
   - bottom: 0; left: 0;: Platziert das Element unten links im Copyright-Text.
   - width: 0;: Anfangsbreite des Elements ist 0, sodass es unsichtbar ist.
   - height: 2px;: Höhe der Unterstreichung beträgt 2 Pixel.
   - background: linear-gradient(90deg, #00ffff, #0a3cff);: Definiert einen horizontalen Farbverlauf von türkis zu blau für die Unterstreichung.
   - transition: width 0.3s ease;: Ermöglicht eine sanfte Animation der Breite beim Hovern.
   ============================================================================= */
.copyright::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00ffff, #0a3cff);
    transition: width 0.3s ease;
}

/* =============================================================================
   FOOTER – Hover-Effekt für Copyright-Unterstreichung
   =============================================================================
   Hier definiere ich die Animation der Unterstreichung, wenn der Copyright-Text gehovert wird.
   - width: 100%;: Die Unterstreichung nimmt die volle Breite des Copyright-Texts ein.
   ============================================================================= */
.copyright:hover::after {
    width: 100%;
}

/* =============================================================================
   FOOTER – Stil für den "Clax Design"-Text
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den "Clax Design"-Text im Copyright-Bereich.
   - font-weight: 600;: Fettgedruckte Schrift.
   - transition: color 0.3s ease;: Ermöglicht eine sanfte Farbänderung beim Hovern.
   ============================================================================= */
.clax-design {
    font-weight: 600;
    transition: color 0.3s ease;
}

/* =============================================================================
   FOOTER – Stil für den Link innerhalb von "Clax Design"
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Link innerhalb des "Clax Design"-Texts.
   - color: inherit;: Erbt die Textfarbe vom Eltern-Element.
   - text-decoration: none;: Entfernt die Standard-Unterstreichung des Links.
   ============================================================================= */
.clax-design a {
    color: inherit;
    text-decoration: none;
}

/* =============================================================================
   FOOTER – Hover-Effekt für "Clax Design"
   =============================================================================
   Hier definiere ich den Hover-Effekt für den "Clax Design"-Text.
   - color: #00ffff;: Ändert die Textfarbe zu Türkis beim Hovern.
   ============================================================================= */
.copyright:hover .clax-design {
    color: #00ffff;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für den Footer
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für den Footer im Light-Mode.
   - background: blur rgba(0, 0, 0, 0.8);: Behält den halbtransparenten, dunklen Hintergrund bei.
   - backdrop-filter: blur(15px);: Behält den Unschärfe-Filter bei.
   - padding: 2rem 2rem 2rem;: Behält die Innenabstände bei.
   - width: 100%;: Behält die volle Breite bei.
   - text-align: center;: Behält die Textzentrierung bei.
   - color: white;: Behält die weiße Textfarbe bei.
   - position: relative;: Behält die relative Positionierung bei.
   - overflow: hidden;: Behält das Verbergen von überlaufenden Inhalten bei.
   - border-top: 1px solid rgba(255, 255, 255, 0.1);: Behält die obere Rahmenlinie bei.
   - margin-top: auto;: Behält die untere Ausrichtung bei.
   ============================================================================= */
body.light-mode footer {
     background: blur rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(15px);
    padding: 2rem 2rem 2rem;
    width: 100%;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die obere Linie im Footer
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die obere Linie im Footer im Light-Mode.
   - background: linear-gradient(90deg, transparent, #0a3cff, transparent);: Ändert den Farbverlauf zu blau.
   ============================================================================= */
body.light-mode footer::before {
    background: linear-gradient(90deg, transparent, #0a3cff, transparent);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Links im Footer
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Links im Footer im Light-Mode.
   - color: white;: Behält die weiße Textfarbe bei.
   - font-weight: 700;: Ändert die Schriftstärke zu fett.
   ============================================================================= */
body.light-mode .footer-links a {
    color: white;
    font-weight: 700;
}

/* =============================================================================
   LIGHT MODE – Hover-Effekt für Links im Footer
   =============================================================================
   Hier überschreibe ich den Hover-Effekt für die Links im Footer im Light-Mode.
   - color: #0a3cff;: Ändert die Textfarbe zu blau beim Hovern.
   ============================================================================= */
body.light-mode .footer-links a:hover {
    color: #0a3cff;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die Unterstreichung der Links
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Unterstreichung der Links im Light-Mode.
   - background: #0a3cff;: Ändert die Farbe der Unterstreichung zu blau.
   ============================================================================= */
body.light-mode .footer-links a:hover::after {
    background: #0a3cff;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für den Copyright-Text
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für den Copyright-Text im Light-Mode.
   - color: black;: Ändert die Textfarbe zu schwarz.
   - font-weight: 700;: Ändert die Schriftstärke zu fett.
   ============================================================================= */
body.light-mode .copyright {
    color: black;
    font-weight: 700;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die Unterstreichung des Copyright-Texts
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Unterstreichung des Copyright-Texts im Light-Mode.
   - background: linear-gradient(90deg, #0a3cff, #007bff);: Ändert den Farbverlauf der Unterstreichung zu blau.
   ============================================================================= */
body.light-mode .copyright::after {
    background: linear-gradient(90deg, #0a3cff, #007bff);
}

/* =============================================================================
   MODAL – Grundstruktur und Positionierung
   =============================================================================
   Hier definiere ich die grundlegenden Stile für das Modal-Fenster.
   - display: none;: Verbirgt das Modal standardmäßig.
   - position: fixed;: Positioniert das Modal fixiert auf dem Bildschirm.
   - z-index: 2000;: Setzt eine hohe z-Index-Ebene, um sicherzustellen, dass das Modal über allen anderen Elementen liegt.
   - left: 0; top: 0;: Positioniert das Modal oben links auf dem Bildschirm.
   - width: 100%; height: 100%;: Das Modal nimmt die volle Breite und Höhe des Bildschirms ein.
   - overflow: auto;: Ermöglicht das Scrollen, falls der Inhalt des Modals zu groß ist.
   - background-color: rgba(0, 0, 0, 0.8);: Halbtransparenter schwarzer Hintergrund.
   - backdrop-filter: blur(10px);: Wendet einen Unschärfe-Filter auf den Hintergrund an.
   ============================================================================= */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

/* =============================================================================
   MODAL – Inhalt des Modals
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Inhalt des Modals.
   - background-color: #fefefe;: Weißer Hintergrund.
   - margin: 5% auto;: Zentriert das Modal vertikal und horizontal mit einem Abstand von 5% von oben.
   - padding: 3rem 2rem;: Setzt Innenabstände von 3rem oben/unten und 2rem links/rechts.
   - border-radius: 15px;: Abgerundete Ecken.
   - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);: Schatten für Tiefe.
   - width: 90%;: Breite von 90% des Eltern-Containers.
   - max-width: 800px;: Maximale Breite von 800px.
   - position: relative;: Ermöglicht die Positionierung von Kind-Elementen relativ zum Modal-Inhalt.
   - color: #333;: Dunkle Textfarbe.
   - max-height: 90vh;: Maximale Höhe von 90% der Viewport-Höhe.
   - overflow-y: auto;: Ermöglicht vertikales Scrollen, falls der Inhalt zu groß ist.
   ============================================================================= */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 3rem 2rem;
    border-radius: 15px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 800px;
    position: relative;
    color: #333;
    max-height: 90vh;
    overflow-y: auto;
}

/* =============================================================================
   MODAL – Überschrift im Modal
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Überschrift im Modal.
   - margin: 0 0 2.5rem;: Setzt Abstände oben, rechts/links und unten.
   - font-size: clamp(1.4rem, 4.5vw, 1.4rem);: Responsive Schriftgröße (minimal 1.4rem, maximal 1.4rem, skaliert dazwischen).
   - background: linear-gradient(90deg, yellow, red, black, #2443ab, #7a4cc9, #c712ca);: Definiert einen Farbverlauf als Hintergrund für den Text.
   - -webkit-background-clip: text;: Beschränkt den Hintergrund auf den Textbereich.
   - -webkit-text-fill-color: transparent;: Macht den Text transparent, sodass der Farbverlauf sichtbar wird.
   - text-shadow: 0 6px 25px rgba(0, 0, 0, 0.65);: Fügt einen starken schwarzen Glow-Effekt hinzu.
   - background-size: 300% 300%;: Vergrößert den Hintergrund, um den Animationsbereich zu definieren.
   - animation: textGradient 12s ease infinite;: Wendet eine Animation auf den Hintergrund an, die den Farbverlauf bewegt.
   - font-weight: 900;: Sehr fettgedruckte Schrift.
   - text-align: center;: Zentriert den Text.
   ============================================================================= */
.modal h2 {
    margin: 0 0 2.5rem;
    font-size: clamp(1.4rem, 4.5vw, 1.4rem);
    background: linear-gradient(90deg,yellow, red, black, #2443ab, #7a4cc9, #c712ca);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 6px 25px rgba(0, 0, 0, 0.65);
    background-size: 300% 300%;
    animation: textGradient 12s ease infinite;
    font-weight: 900;
    text-align: center;
}

/* =============================================================================
   MODAL – Unterüberschrift im Modal
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Unterüberschrift im Modal.
   - font-size: 1.65rem;: Schriftgröße von 1.65rem.
   - margin: 3rem 0 1.4rem;: Setzt Abstände oben, rechts/links und unten.
   - color: #1d4ed8;: Dunkelblaue Textfarbe.
   - text-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);: Fügt einen subtilen Schatten hinzu.
   ============================================================================= */
.modal h3 {
    font-size: 1.65rem;
    margin: 3rem 0 1.4rem;
    color: #1d4ed8;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

/* =============================================================================
   MODAL – Fließtext im Modal
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Fließtext im Modal.
   - margin-bottom: 1.6rem;: Abstand nach unten.
   - color: #1e293b;: Dunkle Textfarbe.
   - text-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);: Fügt einen subtilen Schatten hinzu.
   ============================================================================= */
.modal p {
    margin-bottom: 1.6rem;
    color: #1e293b;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die Modal-Überschrift
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Modal-Überschrift im Light-Mode.
   - background: linear-gradient(90deg, #2443ab, #7a4cc9, #c712ca);: Definiert einen Farbverlauf als Hintergrund für den Text (Blau, Lila, Pink).
   - -webkit-background-clip: text;: Beschränkt den Hintergrund auf den Textbereich.
   - -webkit-text-fill-color: transparent;: Macht den Text transparent, sodass der Farbverlauf sichtbar wird.
   - text-shadow: 0 6px 25px rgba(0, 0, 0, 0.65);: Fügt einen starken schwarzen Glow-Effekt hinzu.
   ============================================================================= */
body.light-mode .modal h2 {
    background: linear-gradient(90deg, #2443ab, #7a4cc9, #c712ca);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 6px 25px rgba(0, 0, 0, 0.65);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die Modal-Unterüberschrift
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Modal-Unterüberschrift im Light-Mode.
   - color: #1d4ed8;: Behält die dunkelblaue Textfarbe bei.
   - text-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);: Behält den subtilen Schatten bei.
   ============================================================================= */
body.light-mode .modal h3 {
    color: #1d4ed8;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für den Modal-Fließtext
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für den Fließtext im Modal im Light-Mode.
   - color: #1e293b;: Behält die dunkle Textfarbe bei.
   - text-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);: Behält den subtilen Schatten bei.
   ============================================================================= */
body.light-mode .modal p {
    color: #1e293b;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

/* =============================================================================
   ANIMATION – Farbverlauf für Text
   =============================================================================
   Hier definiere ich die Keyframes für die Animation des Farbverlaufs im Text.
   - 0%: Startposition des Farbverlaufs (0% 50%).
   - 50%: Mittlere Position des Farbverlaufs (100% 50%).
   - 100%: Endposition des Farbverlaufs (0% 50%).
   ============================================================================= */
@keyframes borderFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =============================================================================
   MODAL – Schließen-Button
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Schließen-Button im Modal.
   - color: #aaa;: Graue Textfarbe.
   - position: absolute;: Positioniert den Button absolut innerhalb des Modals.
   - right: 2rem; top: 1.5rem;: Platziert den Button oben rechts.
   - font-size: 2rem;: Schriftgröße von 2rem.
   - font-weight: bold;: Fettgedruckte Schrift.
   - transition: color 0.3s;: Ermöglicht eine sanfte Farbänderung beim Hovern.
   - cursor: pointer;: Zeigt an, dass der Button klickbar ist.
   ============================================================================= */
.close {
    color: #aaa;
    position: absolute;
    right: 2rem;
    top: 1.5rem;
    font-size: 2rem;
    font-weight: bold;
    transition: color 0.3s;
    cursor: pointer;
}

/* =============================================================================
   MODAL – Hover-Effekt für den Schließen-Button
   =============================================================================
   Hier definiere ich den Hover-Effekt für den Schließen-Button im Modal.
   - color: #333;: Ändert die Textfarbe zu dunkelgrau beim Hovern.
   ============================================================================= */
.close:hover {
    color: #333;
}

/* =============================================================================
   MODAL – Header-Bereich
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Header-Bereich im Modal.
   - text-align: center;: Zentriert den Text.
   - margin-bottom: 2rem;: Abstand nach unten.
   ============================================================================= */
.modal-header {
    text-align: center;
    margin-bottom: 2rem;
}

/* =============================================================================
   MODAL – Bild im Header-Bereich
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für das Bild im Header-Bereich des Modals.
   - width: 150px; height: 150px;: Feste Breite und Höhe von 150px.
   - border-radius: 50%;: Abgerundete Ecken für ein kreisförmiges Bild.
   - object-fit: cover;: Bilder werden beschnitten, um den Container zu füllen.
   - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);: Schatten für Tiefe.
   - margin-bottom: 1rem;: Abstand nach unten.
   ============================================================================= */
.modal-header img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
}

/* =============================================================================
   MODAL – Text im Header-Bereich
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Text im Header-Bereich des Modals.
   - margin-top: 1rem;: Abstand von oben.
   - font-weight: 600;: Fettgedruckte Schrift.
   ============================================================================= */
.modal-header p {
    margin-top: 1rem;
    font-weight: 600;
}

/* =============================================================================
   MODAL – Hauptinhalt
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Hauptinhalt des Modals.
   - text-align: left;: Linksbündiger Text.
   - line-height: 1.6;: Zeilenhöhe für bessere Lesbarkeit.
   ============================================================================= */
.modal-body {
    text-align: left;
    line-height: 1.6;
}

/* =============================================================================
   MODAL – Überschriften im Hauptinhalt
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für Überschriften im Hauptinhalt des Modals.
   - margin: 1.5rem 0 1rem;: Setzt Abstände oben, rechts/links und unten.
   - color: #333;: Dunkle Textfarbe.
   ============================================================================= */
.modal-body h3 {
    margin: 1.5rem 0 1rem;
    color: #333;
}

/* =============================================================================
   MODAL – Fließtext im Hauptinhalt
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Fließtext im Hauptinhalt des Modals.
   - margin-bottom: 1rem;: Abstand nach unten.
   ============================================================================= */
.modal-body p {
    margin-bottom: 1rem;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für den Modal-Inhalt
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für den Modal-Inhalt im Light-Mode.
   - background-color: #f8f9fa;: Heller Hintergrund.
   - color: #212529;: Dunkle Textfarbe.
   ============================================================================= */
body.light-mode .modal-content {
    background-color: #f8f9fa;
    color: #212529;
}

/* =============================================================================
   RESPONSIVE – Anpassungen für Tablets (bis 900px)
   =============================================================================
   Hier passe ich die Stil-Eigenschaften für den Footer auf Tablets an.
   - padding: 2.5rem 1rem 1.5rem;: Reduziert die Innenabstände.
   - gap: 1.5rem;: Reduziert den Abstand zwischen den Links.
   ============================================================================= */
@media (max-width: 900px) {
    footer {
        padding: 2.5rem 1rem 1.5rem;
    }

    .footer-links {
        gap: 1.5rem;
    }
}

/* =============================================================================
   RESPONSIVE – Anpassungen für Mobilgeräte (bis 600px)
   =============================================================================
   Hier passe ich die Stil-Eigenschaften für den Footer und das Modal auf Mobilgeräten an.
   - padding: 2rem 0.5rem 1rem;: Weiter reduzierte Innenabstände für den Footer.
   - gap: 1rem;: Reduziert den Abstand zwischen den Links.
   - flex-direction: row;: Ändert die Anordnung der Links in eine Zeile.
   - flex-wrap: wrap;: Erlaubt das Umbrechen der Links in die nächste Zeile.
   - justify-content: center;: Zentriert die Links.
   - padding: 2rem 1rem;: Reduziert die Innenabstände für das Modal.
   - margin: 10% auto;: Zentriert das Modal vertikal und horizontal mit einem Abstand von 10% von oben.
   ============================================================================= */
@media (max-width: 600px) {
    footer {
        padding: 2rem 0.5rem 1rem;
    }

    .footer-links {
        gap: 1rem;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .modal-content {
        padding: 2rem 1rem;
        margin: 10% auto;
    }
}