/*made by www.ClaxDesign.com*/

/* =============================================================================
   KONTAKTSEKTION – Hauptcontainer
   =============================================================================
   Hier definiere ich den Hauptcontainer für die gesamte Kontaktsektion.
   - 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.
   - text-align: center;: Zentriert den Text innerhalb des Containers.
   - max-width: 1700px;: Begrenzt die maximale Breite auf 1700px.
   - margin: 0 auto;: Zentriert den Container horizontal.
   ============================================================================= */
.contact-container {
    position: relative;
    padding: 6rem 2rem;
    text-align: center;
    max-width: 1700px;
    margin: 0 auto;
}

/* =============================================================================
   KONTAKTSEKTION – Überschrift
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Überschrift der Kontaktsektion.
   - margin-top: 70px !important;: Erzwingt einen Abstand von 70px von oben.
   - margin-bottom: 3rem;: Abstand von 3rem nach unten.
   - font-size: clamp(2.4rem, 6vw, 3.2rem);: Responsive Schriftgröße (mindestens 2.4rem, maximal 3.2rem, dazwischen 6vw).
   - background: linear-gradient(...);: Definiert einen Farbverlauf als Hintergrund für den Text (Türkis, Lila, Pink, Blau, Türkis).
   - -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.
   - 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.
   - letter-spacing: -0.5px;: Leichter negativer Buchstabenabstand für bessere Lesbarkeit.
   - text-align: center;: Zentriert den Text.
   ============================================================================= */
.contact-container h2,
.contact-titel h2 {
    margin-top: 70px !important;
    margin-bottom: 3rem;
    font-size: clamp(2.4rem, 6vw, 3.2rem);
    background: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb, #0a3cff, #00ffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% 300%;
    animation: textGradient 12s ease infinite;
    font-weight: 900;
    letter-spacing: -0.5px;
    text-align: center;
}

/* =============================================================================
   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 textGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =============================================================================
   KONTAKTFORMULAR – Container
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Container des Kontaktformulars.
   - width: 100%;: Der Container nimmt die volle Breite ein.
   - max-width: 1100px;: Begrenzt die maximale Breite auf 1100px.
   - margin: 4rem auto;: Zentriert den Container horizontal mit einem Abstand von 4rem oben und unten.
   - padding: 3rem 4rem;: Setzt Innenabstände von 3rem oben/unten und 4rem links/rechts.
   - background: rgba(30, 30, 45, 0.75);: Halbtransparenter dunkler Hintergrund.
   - backdrop-filter: blur(2px);: Wendet einen Unschärfe-Filter auf den Hintergrund an.
   - -webkit-backdrop-filter: blur(2px);: Fallback für den Unschärfe-Filter.
   - border-radius: 30px;: Abgerundete Ecken.
   - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);: Schatten für Tiefe.
   - border: 5px solid transparent;: Transparenter Rahmen für spätere Effekte.
   - position: relative;: Ermöglicht die Positionierung von Pseudo-Elementen relativ zum Container.
   - background-clip: padding-box;: Beschränkt den Hintergrund auf den Padding-Bereich.
   - color: white;: Weiße Textfarbe.
   - font-size: 1.2rem;: Schriftgröße von 1.2rem.
   - line-height: 1.8;: Zeilenhöhe von 1.8 für bessere Lesbarkeit.
   - text-align: left;: Linksbündiger Text.
   ============================================================================= */
.contact-box {
    width: 100%;
    max-width: 1100px;
    margin: 4rem auto;
    padding: 3rem 4rem;
    background: rgba(30, 30, 45, 0.75);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    border: 5px solid transparent;
    position: relative;
    background-clip: padding-box;
    color: white;
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: left;
}

/* =============================================================================
   KONTAKTFORMULAR – Dekoratives Pseudo-Element für animierten Rahmen
   =============================================================================
   Hier füge ich ein Pseudo-Element hinzu, das einen animierten Rahmen um den Formular-Container erzeugt.
   - content: '';: Erzeugt ein leeres Pseudo-Element.
   - position: absolute;: Positioniert das Element absolut innerhalb des Containers.
   - inset: -5px;: Positioniert das Element 5px außerhalb des Containers.
   - border-radius: 35px;: Abgerundete Ecken für den Rahmen.
   - border: 10px solid;: Fester Rahmen mit 10px Breite.
   - border-image: linear-gradient(...);: Definiert einen Farbverlauf als Rahmen (Türkis, Lila, Pink, Blau, Türkis).
   - border-image-slice: 1;: Teilt den Rahmen in 1 Segment.
   - background-size: 400% 400%;: Vergrößert den Hintergrund für die Animation.
   - animation: borderFlow 12s linear infinite;: Wendet eine Animation auf den Rahmen an.
   - z-index: -1;: Positioniert den Rahmen hinter dem Inhalt des Containers.
   ============================================================================= */
.contact-box::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 35px;
    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 – Rahmen-Farbverlauf
   =============================================================================
   Hier definiere ich die Keyframes für die Animation des Rahmen-Farbverlaufs.
   - 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%; }
}

/* =============================================================================
   KONTAKTFORMULAR – Layout
   =============================================================================
   Hier definiere ich das Grid-Layout für das Kontaktformular.
   - display: grid;: Aktiviert das CSS-Grid-Layout.
   - grid-template-columns: 1fr 1fr;: Erstellt zwei Spalten mit gleicher Breite.
   - gap: 2rem;: Abstand von 2rem zwischen den Grid-Elementen.
   - max-width: 100%;: Begrenzt die maximale Breite auf 100% des Eltern-Containers.
   - margin: 0 auto;: Zentriert das Formular horizontal.
   - align-items: start;: Richtet die Grid-Elemente am oberen Rand aus.
   ============================================================================= */
#contact form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 100%;
    margin: 0 auto;
    align-items: start;
}

/* =============================================================================
   KONTAKTFORMULAR – Eingabefelder, Textarea und Dropdown
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für Eingabefelder, Textarea und Dropdown im Formular.
   - padding: 1.5rem;: Innenabstände von 1.5rem für bessere Lesbarkeit.
   - border: 1px solid rgba(255, 255, 255, 0.22);: Halbtransparenter weißer Rahmen.
   - border-radius: 30px;: Abgerundete Ecken.
   - background: rgba(40, 40, 55, 0.75);: Halbtransparenter dunkler Hintergrund.
   - color: white;: Weiße Textfarbe.
   - font-size: 1.1rem;: Schriftgröße von 1.1rem.
   - transition: all 0.3s ease;: Ermöglicht sanfte Übergänge bei Fokus.
   ============================================================================= */
#contact input,
#contact textarea,
#contact select {
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 30px;
    background: rgba(40, 40, 55, 0.75);
    color: white;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

/* =============================================================================
   KONTAKTFORMULAR – Fokus-Effekte für Eingabefelder, Textarea und Dropdown
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Fokus-Zustand der Eingabefelder, Textarea und Dropdown.
   - border-color: #00ffff;: Türkisfarbener Rahmen.
   - box-shadow: 0 0 15px rgba(0, 255, 255, 0.35);: Türkisfarbener Glow-Effekt.
   - outline: none;: Entfernt die Standard-Umrandung bei Fokus.
   ============================================================================= */
#contact input:focus,
#contact textarea:focus,
#contact select:focus {
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.35);
    outline: none;
}

/* =============================================================================
   KONTAKTFORMULAR – Platzhaltertext
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Platzhaltertext in den Eingabefeldern und Textarea.
   - color: rgba(255, 255, 255, 0.55);: Halbtransparente weiße Farbe.
   ============================================================================= */
#contact input::placeholder,
#contact textarea::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

/* =============================================================================
   KONTAKTFORMULAR – Textarea
   =============================================================================
   Hier definiere ich die spezifischen Stil-Eigenschaften für die Textarea.
   - grid-column: 1 / -1;: Spannt die Textarea über die gesamte Grid-Breite.
   - min-height: 160px;: Mindesthöhe von 160px.
   - resize: vertical;: Erlaubt nur vertikales Skalieren.
   - border-radius: 30px;: Abgerundete Ecken.
   ============================================================================= */
#contact textarea {
    grid-column: 1 / -1;
    min-height: 160px;
    resize: vertical;
    border-radius: 30px;
}

/* =============================================================================
   KONTAKTFORMULAR – Submit-Button
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Submit-Button des Formulars.
   - grid-column: 2;: Positioniert den Button in der zweiten Spalte.
   - justify-self: end;: Richtet den Button am rechten Rand aus.
   - padding: 1.3rem 3.5rem;: Innenabstände von 1.3rem oben/unten und 3.5rem links/rechts.
   - background: linear-gradient(90deg, #00ffff, #0a3cff);: Farbverlauf von Türkis zu Blau.
   - color: white;: Weiße Textfarbe.
   - border: none;: Entfernt den Standard-Rahmen.
   - border-radius: 50px;: Abgerundete Ecken.
   - font-size: 1.2rem;: Schriftgröße von 1.2rem.
   - font-weight: 700;: Fettgedruckte Schrift.
   - cursor: pointer;: Zeigt an, dass der Button klickbar ist.
   - transition: all 0.35s ease;: Ermöglicht sanfte Übergänge bei Hover-Effekten.
   - box-shadow: 0 8px 25px rgba(0, 255, 255, 0.35);: Türkisfarbener Schatten für Tiefe.
   ============================================================================= */
#contact button[type="submit"] {
    grid-column: 2;
    justify-self: end;
    padding: 1.3rem 3.5rem;
    background: linear-gradient(90deg, #00ffff, #0a3cff);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.35s ease;
    box-shadow: 0 8px 25px rgba(0, 255, 255, 0.35);
}

/* =============================================================================
   KONTAKTFORMULAR – Hover-Effekt für Submit-Button
   =============================================================================
   Hier definiere ich den Hover-Effekt für den Submit-Button.
   - transform: translateY(-3px);: Hebt den Button um 3px nach oben an.
   - box-shadow: 0 15px 40px rgba(0, 255, 255, 0.5);: Verstärkt den türkisfarbenen Schatten für mehr Tiefe.
   - background: linear-gradient(90deg, #00ffff, #00ff9d);: Ändert den Farbverlauf zu Türkis-Grün.
   ============================================================================= */
#contact button[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 255, 255, 0.5);
    background: linear-gradient(90deg, #00ffff, #00ff9d);
}

/* =============================================================================
   KONTAKTFORMULAR – Container für Anliegen-Auswahl
   =============================================================================
   Hier definiere ich den Container für die Anliegen-Auswahl.
   - grid-column: 1 / -1;: Spannt den Container über die gesamte Grid-Breite.
   ============================================================================= */
.anliegen-container {
    grid-column: 1 / -1;
}

/* =============================================================================
   KONTAKTFORMULAR – Dropdown für Anliegen
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für das Dropdown zur Auswahl des Anliegens.
   - width: 100%;: Volle Breite des Containers.
   - padding: 1.5rem;: Innenabstände von 1.5rem.
   - border: 1px solid rgba(255, 255, 255, 0.22);: Halbtransparenter weißer Rahmen.
   - border-radius: 30px;: Abgerundete Ecken.
   - background: rgba(40, 40, 55, 0.75);: Halbtransparenter dunkler Hintergrund.
   - color: white;: Weiße Textfarbe.
   - font-size: 1.1rem;: Schriftgröße von 1.1rem.
   - appearance: none;: Entfernt die Standard-Darstellung des Dropdown-Pfeils.
   - cursor: pointer;: Zeigt an, dass das Dropdown klickbar ist.
   - transition: all 0.3s ease;: Ermöglicht sanfte Übergänge bei Fokus.
   ============================================================================= */
#anliegenSelect {
    width: 100%;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 30px;
    background: rgba(40, 40, 55, 0.75);
    color: white;
    font-size: 1.1rem;
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* =============================================================================
   KONTAKTFORMULAR – Fokus-Effekt für Anliegen-Dropdown
   =============================================================================
   Hier definiere ich den Fokus-Effekt für das Anliegen-Dropdown.
   - border-color: #00ffff;: Türkisfarbener Rahmen.
   - box-shadow: 0 0 15px rgba(0, 255, 255, 0.35);: Türkisfarbener Glow-Effekt.
   ============================================================================= */
#anliegenSelect:focus {
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.35);
}

/* =============================================================================
   KONTAKTFORMULAR – Optionen im Anliegen-Dropdown
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Optionen im Anliegen-Dropdown.
   - background: #1a1a2e;: Dunkler Hintergrund.
   - color: white;: Weiße Textfarbe.
   ============================================================================= */
#anliegenSelect option {
    background: #1a1a2e;
    color: white;
}

/* =============================================================================
   KONTAKTFORMULAR – Container für benutzerdefiniertes Anliegen
   =============================================================================
   Hier definiere ich den Container für das benutzerdefinierte Anliegen-Feld.
   - grid-column: 1 / -1;: Spannt den Container über die gesamte Grid-Breite.
   - margin-top: 1rem;: Abstand von 1rem von oben.
   - display: none;: Verbirgt den Container standardmäßig.
   ============================================================================= */
#anliegenCustomWrapper {
    grid-column: 1 / -1;
    margin-top: 1rem;
    display: none;
}

/* =============================================================================
   KONTAKTFORMULAR – Eingabefeld für benutzerdefiniertes Anliegen
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für das Eingabefeld des benutzerdefinierten Anliegens.
   - width: 100%;: Volle Breite des Containers.
   - padding: 1.5rem;: Innenabstände von 1.5rem.
   - border: 1px solid rgba(255, 255, 255, 0.22);: Halbtransparenter weißer Rahmen.
   - border-radius: 30px;: Abgerundete Ecken.
   - background: rgba(40, 40, 55, 0.75);: Halbtransparenter dunkler Hintergrund.
   - color: white;: Weiße Textfarbe.
   - font-size: 1.1rem;: Schriftgröße von 1.1rem.
   ============================================================================= */
#anliegenCustom {
    width: 100%;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 30px;
    background: rgba(40, 40, 55, 0.75);
    color: white;
    font-size: 1.1rem;
}

/* =============================================================================
   KONTAKTFORMULAR – Platzhaltertext für benutzerdefiniertes Anliegen
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Platzhaltertext im benutzerdefinierten Anliegen-Feld.
   - color: rgba(255, 255, 255, 0.55);: Halbtransparente weiße Farbe.
   ============================================================================= */
#anliegenCustom::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für den Formular-Container
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für den Formular-Container im Light-Mode.
   - background: rgba(255, 255, 255, 0.88);: Fast weißer Hintergrund mit leichter Transparenz.
   - backdrop-filter: blur(2px);: Wendet einen Unschärfe-Filter auf den Hintergrund an.
   - border: 5px solid transparent;: Transparenter Rahmen.
   - position: relative;: Ermöglicht die Positionierung von Pseudo-Elementen relativ zum Container.
   - background-clip: padding-box;: Beschränkt den Hintergrund auf den Padding-Bereich.
   - color: blur;: Textfarbe wird unscharf dargestellt (wird durch andere Stile überschrieben).
   - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);: Leichter Schatten für Tiefe.
   ============================================================================= */
body.light-mode .contact-box {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(2px);
    border: 5px solid transparent;
    position: relative;
    background-clip: padding-box;
    color: blur;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für den animierten Rahmen des Formular-Containers
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für den animierten Rahmen des Formular-Containers im Light-Mode.
   - border-image: linear-gradient(...);: Definiert einen Farbverlauf als Rahmen (Blau, Lila, Pink, Blau).
   - inset: -5px;: Positioniert das Element 5px außerhalb des Containers.
   - border-radius: 35px;: Abgerundete Ecken für den Rahmen.
   - border: 10px solid;: Fester Rahmen mit 10px Breite.
   ============================================================================= */
body.light-mode .contact-box::before {
    border-image: linear-gradient(90deg, #3b82f6, #8b5cf6, #c084fc, #a78bfa, #3b82f6) 1;
    inset: -5px;
    border-radius: 35px;
    border: 10px solid;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Eingabefelder, Textarea und Dropdown
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für Eingabefelder, Textarea und Dropdown im Light-Mode.
   - background: rgba(255, 255, 255, 0.9);: Fast weißer Hintergrund mit leichter Transparenz.
   - color: #1e293b;: Dunkle Textfarbe.
   - border: 1px solid rgba(0, 0, 0, 0.18);: Subtiler schwarzer Rahmen.
   - border-radius: 30px;: Abgerundete Ecken.
   ============================================================================= */
body.light-mode #contact input,
body.light-mode #contact textarea,
body.light-mode #contact select,
body.light-mode #anliegenSelect,
body.light-mode #anliegenCustom {
    background: rgba(255, 255, 255, 0.9);
    color: #1e293b;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 30px;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Platzhaltertext
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für den Platzhaltertext im Light-Mode.
   - color: rgba(30, 41, 59, 0.6);: Halbtransparente dunkle Farbe.
   ============================================================================= */
body.light-mode #contact input::placeholder,
body.light-mode #contact textarea::placeholder,
body.light-mode #anliegenCustom::placeholder {
    color: rgba(30, 41, 59, 0.6);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für den Submit-Button
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für den Submit-Button im Light-Mode.
   - background: linear-gradient(90deg, #3b82f6, #8b5cf6);: Farbverlauf von Blau zu Lila.
   - box-shadow: 0 8px 25px rgba(59, 130, 246, 0.35);: Blau-Glow-Effekt.
   ============================================================================= */
body.light-mode #contact button[type="submit"] {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.35);
}

/* =============================================================================
   LIGHT MODE – Hover-Effekt für den Submit-Button
   =============================================================================
   Hier überschreibe ich den Hover-Effekt für den Submit-Button im Light-Mode.
   - background: linear-gradient(90deg, #60a5fa, #a78bfa);: Farbverlauf von Hellblau zu Lila.
   - box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);: Blau-Glow-Effekt.
   ============================================================================= */
body.light-mode #contact button[type="submit"]:hover {
    background: linear-gradient(90deg, #60a5fa, #a78bfa);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
}

/* =============================================================================
   RESPONSIVE – Anpassungen für Tablets (bis 900px)
   =============================================================================
   Hier passe ich die Stil-Eigenschaften für die Kontaktsektion auf Tablets an.
   - padding: 4rem 1.5rem;: Reduziert die Innenabstände.
   - padding: 2.5rem 2.5rem;: Reduziert die Innenabstände des Formular-Containers.
   - margin: 3rem auto;: Reduziert die Abstände des Formular-Containers.
   - grid-template-columns: 1fr;: Ändert das Grid-Layout auf eine Spalte.
   - gap: 1.8rem;: Reduziert den Abstand zwischen den Grid-Elementen.
   - grid-column: 1;: Positioniert den Button in der ersten Spalte.
   - justify-self: stretch;: Dehnt den Button auf die volle Breite aus.
   ============================================================================= */
@media (max-width: 900px) {
    .contact-container {
        padding: 4rem 1.5rem;
    }

    .contact-box {
        padding: 2.5rem 2.5rem;
        margin: 3rem auto;
    }

    #contact form {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    #contact button[type="submit"] {
        grid-column: 1;
        justify-self: stretch;
    }
}

/* =============================================================================
   RESPONSIVE – Anpassungen für Mobilgeräte (bis 600px)
   =============================================================================
   Hier passe ich die Stil-Eigenschaften für die Kontaktsektion auf Mobilgeräten an.
   - padding: 2rem 1.8rem;: Reduziert die Innenabstände des Formular-Containers weiter.
   - border-radius: 25px;: Abgerundete Ecken.
   - font-size: 2.4rem;: Schriftgröße der Überschrift.
   ============================================================================= */
@media (max-width: 600px) {
    .contact-box {
        padding: 2rem 1.8rem;
        border-radius: 25px;
    }

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

/* =============================================================================
   KONTAKTINFO – Hauptcontainer für Kontaktinformationen und Karte
   =============================================================================
   Hier definiere ich den Hauptcontainer für die Kontaktinformationen und die Karte.
   - padding: 0 4rem 6rem;: Setzt Innenabstände von 0 oben, 4rem links/rechts und 6rem unten.
   - background: rgba(30, 30, 40, 0.85);: Halbtransparenter dunkler Hintergrund.
   - border-radius: 35px;: Abgerundete Ecken.
   - margin: 5rem auto;: Zentriert den Container horizontal mit einem Abstand von 5rem oben und unten.
   - max-width: 1700px;: Begrenzt die maximale Breite auf 1700px.
   - box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);: Schatten für Tiefe.
   ============================================================================= */
.contact-section {
    padding: 0 4rem 6rem;
    background: rgba(30, 30, 40, 0.85);
    border-radius: 35px;
    margin: 5rem auto;
    max-width: 1700px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
}

/* =============================================================================
   KONTAKTINFO – Blur-Karte für Kontaktinformationen
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Blur-Karte mit Kontaktinformationen.
   - background: rgba(30, 30, 45, 0.75);: Halbtransparenter dunkler Hintergrund.
   - backdrop-filter: blur(2px);: Wendet einen Unschärfe-Filter auf den Hintergrund an.
   - -webkit-backdrop-filter: blur(2px);: Fallback für den Unschärfe-Filter.
   - border-radius: 30px;: Abgerundete Ecken.
   - border: 5px solid transparent;: Transparenter Rahmen für spätere Effekte.
   - position: relative;: Ermöglicht die Positionierung von Pseudo-Elementen relativ zur Karte.
   - background-clip: padding-box;: Beschränkt den Hintergrund auf den Padding-Bereich.
   - padding: 4rem 5rem;: Setzt Innenabstände von 4rem oben/unten und 5rem links/rechts.
   - margin: 0 auto 5rem auto;: Zentriert die Karte horizontal mit einem Abstand von 5rem unten.
   - width: 100%;: Volle Breite.
   - max-width: 1100px;: Begrenzt die maximale Breite auf 1100px.
   - text-align: center;: Zentriert den Text.
   - color: white;: Weiße Textfarbe.
   - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);: Schatten für Tiefe.
   ============================================================================= */
.contact-blur-card {
    background: rgba(30, 30, 45, 0.75);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 30px;
    border: 5px solid transparent;
    position: relative;
    background-clip: padding-box;
    padding: 4rem 5rem;
    margin: 0 auto 5rem auto;
    width: 100%;
    max-width: 1100px;
    text-align: center;
    color: white;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

/* =============================================================================
   KONTAKTINFO – Dekoratives Pseudo-Element für animierten Rahmen der Blur-Karte
   =============================================================================
   Hier füge ich ein Pseudo-Element hinzu, das einen animierten Rahmen um die Blur-Karte erzeugt.
   - content: '';: Erzeugt ein leeres Pseudo-Element.
   - position: absolute;: Positioniert das Element absolut innerhalb der Karte.
   - inset: -5px;: Positioniert das Element 5px außerhalb der Karte.
   - border-radius: 35px;: Abgerundete Ecken für den Rahmen.
   - border: 10px solid;: Fester Rahmen mit 10px Breite.
   - border-image: linear-gradient(...);: Definiert einen Farbverlauf als Rahmen (Türkis, Lila, Pink, Blau, Türkis).
   - border-image-slice: 1;: Teilt den Rahmen in 1 Segment.
   - background-size: 400% 400%;: Vergrößert den Hintergrund für die Animation.
   - animation: borderFlow 12s linear infinite;: Wendet eine Animation auf den Rahmen an.
   - z-index: -1;: Positioniert den Rahmen hinter dem Inhalt der Karte.
   ============================================================================= */
.contact-blur-card::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 35px;
    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;
}

/* =============================================================================
   KONTAKTINFO – Überschrift in der Blur-Karte
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Überschrift in der Blur-Karte.
   - margin-top: 60px !important;: Erzwingt einen Abstand von 60px von oben.
   - font-size: 60px !important;: Schriftgröße von 60px.
   - margin-bottom: 50px !important;: Erzwingt einen Abstand von 50px nach unten.
   - font-weight: 700;: Fettgedruckte Schrift.
   - line-height: 1.2;: Zeilenhöhe von 1.2 für bessere Lesbarkeit.
   - background: linear-gradient(...);: Definiert einen Farbverlauf als Hintergrund für den Text (Rot, Gelb, Türkis, Lila, Pink, Blau).
   - -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.
   - background-size: 300% 300%;: Vergrößert den Hintergrund, um den Animationsbereich zu definieren.
   - animation: textGradient 7s ease infinite;: Wendet eine Animation auf den Hintergrund an, die den Farbverlauf bewegt.
   - -webkit-text-stroke: 1.5px #b08aff;: Fügt einen lila Umriss (Stroke) um den Text hinzu.
   - text-stroke: 2.5px #000;: Fallback für den Text-Umriss.
   - paint-order: stroke fill;: Bestimmt die Reihenfolge des Zeichnens: zuerst der Umriss, dann die Füllung.
   - text-shadow: Mehrere Schatteneffekte für Glow- und Tiefeneffekte (weißer Glow, dunkler Schatten, Türkis-, Lila-, Pink- und Blau-Glow).
   ============================================================================= */
.contact-titel h2 {
    margin-top: 60px !important;
    font-size: 60px !important;
    margin-bottom: 50px !important;
    font-weight: 700;
    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;
    -webkit-text-stroke: 1.5px #b08aff;
    text-stroke: 2.5px #000;
    paint-order: stroke fill;
    text-shadow:
        1px 0 1px rgba(255,255,255,0.6),
        0 0 1px rgba(0,0,0,0.85),
        0 0 8px #00ffff,
        0 0 16px #00ffff,
        0 0 32px #b08aff,
        0 0 48px #ff6bcb,
        0 0 64px #0a3cff;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die Überschrift in der Blur-Karte
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Überschrift in der Blur-Karte im Light-Mode.
   - margin-top: 60px !important;: Erzwingt einen Abstand von 60px von oben.
   - font-size: 60px !important;: Schriftgröße von 60px.
   - margin-bottom: 50px !important;: Erzwingt einen Abstand von 50px nach unten.
   - line-height: 1.2;: Zeilenhöhe von 1.2 für bessere Lesbarkeit.
   - background: linear-gradient(...);: Definiert einen Farbverlauf als Hintergrund für den Text (Rot, Gelb, Türkis, Lila, Pink, Blau).
   - -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.
   - background-size: 300% 300%;: Vergrößert den Hintergrund, um den Animationsbereich zu definieren.
   - animation: textGradient 7s ease infinite;: Wendet eine Animation auf den Hintergrund an, die den Farbverlauf bewegt.
   - -webkit-text-stroke: 1.5px #b08aff;: Fügt einen lila Umriss (Stroke) um den Text hinzu.
   - text-stroke: 2.5px #000;: Fallback für den Text-Umriss.
   - paint-order: stroke fill;: Bestimmt die Reihenfolge des Zeichnens: zuerst der Umriss, dann die Füllung.
   - text-shadow: Mehrere Schatteneffekte für Glow- und Tiefeneffekte (weißer Glow, dunkler Schatten, Türkis-, Lila-, Pink- und Blau-Glow).
   ============================================================================= */
body.light-mode .contact-titel h2 {
    margin-top: 60px !important;
    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;
    -webkit-text-stroke: 1.5px #b08aff;
    text-stroke: 2.5px #000;
    paint-order: stroke fill;
    text-shadow:
        1px 0 1px rgba(255,255,255,0.6),
        0 0 1px rgba(0,0,0,0.85),
        0 0 8px #00ffff,
        0 0 16px #00ffff,
        0 0 32px #b08aff,
        0 0 48px #ff6bcb,
        0 0 64px #0a3cff;
}

/* =============================================================================
   KONTAKTINFO – Grid für Kontaktinformationen
   =============================================================================
   Hier definiere ich das Grid-Layout für die Kontaktinformationen.
   - display: grid;: Aktiviert das CSS-Grid-Layout.
   - grid-template-columns: repeat(3, 1fr);: Erstellt drei Spalten mit gleicher Breite.
   - gap: 2.5rem;: Abstand von 2.5rem zwischen den Grid-Elementen.
   - margin: 0 auto;: Zentriert das Grid horizontal.
   - max-width: 1100px;: Begrenzt die maximale Breite auf 1100px.
   ============================================================================= */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin: 0 auto;
    max-width: 1100px;
}

/* =============================================================================
   KONTAKTINFO – Einzelne Grid-Items
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die einzelnen Grid-Items der Kontaktinformationen.
   - background: rgba(25, 25, 40, 0.8);: Halbtransparenter dunkler Hintergrund.
   - border-radius: 30px;: Abgerundete Ecken.
   - padding: 2.5rem 2rem;: Setzt Innenabstände von 2.5rem oben/unten und 2rem links/rechts.
   - border: 1px solid rgba(255, 255, 255, 0.35);: Halbtransparenter weißer Rahmen.
   - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);: Schatten für Tiefe.
   - transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);: Ermöglicht sanfte Übergänge bei Hover-Effekten.
   - display: flex;: Aktiviert das Flexbox-Layout.
   - flex-direction: column;: Ordnet die Kind-Elemente vertikal an.
   - align-items: center;: Zentriert die Kind-Elemente horizontal.
   - text-align: center;: Zentriert den Text.
   ============================================================================= */
.contact-grid-item {
    background: rgba(25, 25, 40, 0.8);
    border-radius: 30px;
    padding: 2.5rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* =============================================================================
   KONTAKTINFO – Hover-Effekt für Grid-Items
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Grid-Items der Kontaktinformationen.
   - transform: translateY(-12px) scale(1.03);: Hebt das Item um 12px nach oben an und skaliert es leicht.
   - box-shadow: 0 20px 50px rgba(0, 255, 255, 0.35);: Türkisfarbener Schatten für Tiefe.
   - background: rgba(30, 40, 60, 0.9);: Dunklerer Hintergrund beim Hovern.
   ============================================================================= */
.contact-grid-item:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 20px 50px rgba(0, 255, 255, 0.35);
    background: rgba(30, 40, 60, 0.9);
}

/* =============================================================================
   KONTAKTINFO – Icons in den Grid-Items
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Icons in den Grid-Items.
   - font-size: 4.5rem;: Schriftgröße von 4.5rem.
   - color: #00ffff;: Türkisfarbene Icons.
   - margin-bottom: 1.5rem;: Abstand von 1.5rem nach unten.
   - text-shadow: 0 0 15px rgba(0, 255, 255, 0.6);: Türkisfarbener Glow-Effekt.
   ============================================================================= */
.contact-grid-item i {
    font-size: 4.5rem;
    color: #00ffff;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}

/* =============================================================================
   KONTAKTINFO – Beschriftung in den Grid-Items
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Beschriftung in den Grid-Items.
   - font-size: 1.4rem;: Schriftgröße von 1.4rem.
   - font-weight: 700;: Fettgedruckte Schrift.
   - color: white;: Weiße Textfarbe.
   - margin-bottom: 0.8rem;: Abstand von 0.8rem nach unten.
   ============================================================================= */
.contact-grid-item .label {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.8rem;
}

/* =============================================================================
   KONTAKTINFO – Werte in den Grid-Items
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Werte in den Grid-Items.
   - font-size: 1.05rem;: Schriftgröße von 1.05rem.
   - color: rgba(255, 255, 255, 0.95);: Fast weiße Textfarbe mit leichter Transparenz.
   - line-height: 1.6;: Zeilenhöhe von 1.6 für bessere Lesbarkeit.
   ============================================================================= */
.contact-grid-item .value {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
}

/* =============================================================================
   KONTAKTINFO – Links in den Grid-Items
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Links in den Grid-Items.
   - color: #a5f3fc;: Hellblau-türkisfarbene Links.
   - text-decoration: none;: Entfernt die Standard-Unterstreichung der Links.
   - transition: color 0.3s;: Ermöglicht sanfte Farbänderungen bei Hover-Effekten.
   ============================================================================= */
.contact-grid-item a.value {
    color: #a5f3fc;
    text-decoration: none;
    transition: color 0.3s;
}

/* =============================================================================
   KONTAKTINFO – Hover-Effekt für Links in den Grid-Items
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Links in den Grid-Items.
   - color: #00ffff;: Türkisfarbene Links beim Hovern.
   - text-shadow: 0 0 12px rgba(0, 255, 255, 0.5);: Türkisfarbener Glow-Effekt.
   ============================================================================= */
.contact-grid-item a.value:hover {
    color: #00ffff;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
}

/* =============================================================================
   KONTAKTINFO – Öffnungszeiten
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Öffnungszeiten.
   - margin: 2rem 0 4rem 0;: Setzt Abstände von 2rem oben, 0 links/rechts und 4rem unten.
   - font-size: 1.35rem;: Schriftgröße von 1.35rem.
   - color: rgba(255, 255, 255, 0.9);: Fast weiße Textfarbe mit leichter Transparenz.
   - max-width: 1100px;: Begrenzt die maximale Breite auf 1100px.
   - margin-left: auto; margin-right: auto;: Zentriert den Container horizontal.
   ============================================================================= */
.opening-hours {
    margin: 2rem 0 4rem 0;
    font-size: 1.35rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* =============================================================================
   KONTAKTINFO – Überschrift für Öffnungszeiten
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für die Überschrift der Öffnungszeiten.
   - font-size: 1.8rem;: Schriftgröße von 1.8rem.
   - margin-bottom: 1rem;: Abstand von 1rem nach unten.
   - background: linear-gradient(...);: Definiert einen Farbverlauf als Hintergrund für den Text (Türkis, Lila, Pink, Blau, Türkis).
   - -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.
   - 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.
   ============================================================================= */
.opening-hours h4 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, #00ffff, #b08aff, #ff6bcb, #0a3cff, #00ffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% 300%;
    animation: textGradient 12s ease infinite;
    font-weight: 900;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Blur-Karte und Kontaktsektion
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Blur-Karte und die Kontaktsektion im Light-Mode.
   - background: rgba(255, 255, 255, 0.82);: Fast weißer Hintergrund mit leichter Transparenz.
   - backdrop-filter: blur(2px);: Wendet einen Unschärfe-Filter auf den Hintergrund an.
   - border: 5px solid transparent;: Transparenter Rahmen.
   - position: relative;: Ermöglicht die Positionierung von Pseudo-Elementen relativ zum Container.
   - background-clip: padding-box;: Beschränkt den Hintergrund auf den Padding-Bereich.
   - color: blur;: Textfarbe wird unscharf dargestellt (wird durch andere Stile überschrieben).
   - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);: Leichter Schatten für Tiefe.
   ============================================================================= */
body.light-mode .contact-blur-card,
body.light-mode .contact-section {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(2px);
    border: 5px solid transparent;
    position: relative;
    background-clip: padding-box;
    color: blur;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für den animierten Rahmen der Blur-Karte
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für den animierten Rahmen der Blur-Karte im Light-Mode.
   - border-image: linear-gradient(...);: Definiert einen Farbverlauf als Rahmen (Blau, Lila, Pink, Blau).
   - inset: -5px;: Positioniert das Element 5px außerhalb der Karte.
   - border-radius: 35px;: Abgerundete Ecken für den Rahmen.
   - border: 10px solid;: Fester Rahmen mit 10px Breite.
   ============================================================================= */
body.light-mode .contact-blur-card::before,
body.light-mode .contact-section::before {
    border-image: linear-gradient(90deg, #3b82f6, #8b5cf6, #c084fc, #a78bfa, #3b82f6) 1;
    inset: -5px;
    border-radius: 35px;
    border: 10px solid;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Grid-Items
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Grid-Items im Light-Mode.
   - background: rgba(255, 255, 255, 0.9);: Fast weißer Hintergrund mit leichter Transparenz.
   - border: 5px solid #111111;: Dunkle Umrandung.
   - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);: Leichter Schatten für Tiefe.
   - border-radius: 30px;: Abgerundete Ecken.
   ============================================================================= */
body.light-mode .contact-grid-item {
    background: rgba(255, 255, 255, 0.9);
    border: 5px solid #111111;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-radius: 30px;
}

/* =============================================================================
   LIGHT MODE – Hover-Effekt für Grid-Items
   =============================================================================
   Hier überschreibe ich den Hover-Effekt für die Grid-Items im Light-Mode.
   - background: rgba(240, 245, 255, 0.95);: Fast weißer Hintergrund mit leichter Transparenz.
   - box-shadow: 0 20px 50px rgba(59, 130, 246, 0.25);: Blau-Glow-Effekt.
   - transform: translateY(-12px) scale(1.03);: Hebt das Item um 12px nach oben an und skaliert es leicht.
   ============================================================================= */
body.light-mode .contact-grid-item:hover {
    background: rgba(240, 245, 255, 0.95);
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.25);
    transform: translateY(-12px) scale(1.03);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Icons in den Grid-Items
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Icons in den Grid-Items im Light-Mode.
   - color: #3b82f6;: Blau-türkisfarbene Icons.
   - text-shadow: 0 0 12px rgba(59, 130, 246, 0.3);: Blau-Glow-Effekt.
   ============================================================================= */
body.light-mode .contact-grid-item i {
    color: #3b82f6;
    text-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

/* =============================================================================
   LIGHT MODE – Anpassungen für Beschriftung und Werte in den Grid-Items
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Beschriftung und Werte in den Grid-Items im Light-Mode.
   - color: #0f172a !important;: Sehr dunkle Textfarbe für bessere Lesbarkeit.
   - text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);: Leichter Schatten für bessere Lesbarkeit.
   ============================================================================= */
body.light-mode .contact-grid-item .label,
body.light-mode .contact-grid-item .value,
body.light-mode .contact-grid-item a.value {
    color: #0f172a !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* =============================================================================
   LIGHT MODE – Hover-Effekt für Links in den Grid-Items
   =============================================================================
   Hier überschreibe ich den Hover-Effekt für die Links in den Grid-Items im Light-Mode.
   - color: #1d4ed8 !important;: Dunkelblaue Links beim Hovern.
   ============================================================================= */
body.light-mode .contact-grid-item a.value:hover {
    color: #1d4ed8 !important;
}

/* =============================================================================
   LIGHT MODE – Anpassungen für die Überschrift der Öffnungszeiten
   =============================================================================
   Hier überschreibe ich die Stil-Eigenschaften für die Überschrift der Öffnungszeiten im Light-Mode.
   - background: linear-gradient(...);: Definiert einen Farbverlauf als Hintergrund für den Text (Dunkelblau, 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.
   ============================================================================= */
body.light-mode .opening-hours h4 {
    background: linear-gradient(90deg, #1e40af, #7c3aed, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =============================================================================
   GOOGLE MAPS – Container für die Karte
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für den Container der Google Maps-Karte.
   - max-width: 1090px !important;: Erzwingt eine maximale Breite von 1090px.
   - margin: 0 auto;: Zentriert den Container horizontal.
   - margin-left: 30px !important;: Erzwingt einen linken Außenabstand von 30px.
   ============================================================================= */
.map-wrapper {
    max-width: 1090px !important;
    margin: 0 auto;
    margin-left: 30px !important;
}

/* =============================================================================
   GOOGLE MAPS – Iframe für die Karte
   =============================================================================
   Hier definiere ich die Stil-Eigenschaften für das Iframe der Google Maps-Karte.
   - width: 100%;: Volle Breite des Containers.
   - height: 480px;: Feste Höhe von 480px.
   - border: 0;: Entfernt den Standard-Rahmen.
   - border-radius: 30px;: Abgerundete Ecken.
   - box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);: Schatten für Tiefe.
   - transition: all 0.4s ease;: Ermöglicht sanfte Übergänge bei Hover-Effekten.
   ============================================================================= */
.map iframe {
    width: 100%;
    height: 480px;
    border: 0;
    border-radius: 30px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);
    transition: all 0.4s ease;
}

/* =============================================================================
   GOOGLE MAPS – Hover-Effekt für die Karte
   =============================================================================
   Hier definiere ich den Hover-Effekt für die Google Maps-Karte.
   - transform: scale(1.015);: Skaliert die Karte leicht.
   - box-shadow: 0 35px 90px rgba(0, 0, 0, 0.7);: Verstärkt den Schatten für mehr Tiefe.
   ============================================================================= */
.map:hover iframe {
    transform: scale(1.015);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.7);
}

/* =============================================================================
   RESPONSIVE – Anpassungen für Tablets (bis 1100px)
   =============================================================================
   Hier passe ich die Stil-Eigenschaften für die Kontaktinformationen und die Karte auf Tablets an.
   - grid-template-columns: repeat(2, 1fr);: Ändert das Grid-Layout auf zwei Spalten.
   - gap: 2rem;: Reduziert den Abstand zwischen den Grid-Elementen.
   - max-width: 100%;: Begrenzt die maximale Breite auf 100% des Eltern-Containers.
   - padding-left: 2rem; padding-right: 2rem;: Setzt Innenabstände links und rechts.
   ============================================================================= */
@media (max-width: 1100px) {
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .contact-section,
    .map-wrapper,
    .contact-box,
    .contact-blur-card {
        max-width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* =============================================================================
   RESPONSIVE – Anpassungen für kleinere Tablets (bis 768px)
   =============================================================================
   Hier passe ich die Stil-Eigenschaften für die Kontaktinformationen und die Karte auf kleineren Tablets an.
   - padding: 4rem 1.5rem 5rem;: Reduziert die Innenabstände.
   - margin: 3rem 1rem;: Reduziert die Außenabstände.
   - border-radius: 25px;: Abgerundete Ecken.
   - padding: 3rem 2rem;: Reduziert die Innenabstände der Blur-Karte.
   - margin-bottom: 4rem;: Abstand von 4rem nach unten.
   - grid-template-columns: 1fr;: Ändert das Grid-Layout auf eine Spalte.
   - font-size: 4rem;: Schriftgröße der Icons.
   - height: 420px;: Reduziert die Höhe der Karte.
   - margin-top: 100px !important;: Erzwingt einen Abstand von 100px von oben für die Überschrift.
   - margin-bottom: -2rem;: Erzwingt einen negativen Abstand von 2rem nach unten für die Überschrift.
   ============================================================================= */
@media (max-width: 768px) {
    .contact-section {
        padding: 4rem 1.5rem 5rem;
        margin: 3rem 1rem;
        border-radius: 25px;
    }

    .contact-blur-card {
        padding: 3rem 2rem;
        margin-bottom: 4rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-grid-item {
        padding: 2.5rem 1.8rem;
    }

    .contact-grid-item i {
        font-size: 4rem;
    }

    .map iframe {
        height: 420px;
    }

    .contact-titel h2 {
        margin-top: 100px !important;
        margin-bottom: -2rem;
    }
}

/* =============================================================================
   RESPONSIVE – Anpassungen für Mobilgeräte (bis 480px)
   =============================================================================
   Hier passe ich die Stil-Eigenschaften für die Kontaktinformationen und die Karte auf Mobilgeräten an.
   - padding: 2.5rem 1.8rem;: Reduziert die Innenabstände der Blur-Karte weiter.
   - padding: 2rem 1.5rem;: Reduziert die Innenabstände der Grid-Items weiter.
   - height: 360px;: Reduziert die Höhe der Karte weiter.
   - font-size: 2.5rem !important;: Schriftgröße der Überschrift.
   - margin-top: 165px !important;: Erzwingt einen Abstand von 165px von oben für die Überschrift.
   - text-align: center;: Zentriert den Text der Überschrift.
   - margin-bottom: 20px !important;: Erzwingt einen Abstand von 20px nach unten für die Überschrift.
   - width: 435px !important;: Erzwingt eine Breite von 435px für den Karten-Container.
   - margin-left: -30px !important;: Erzwingt einen negativen linken Außenabstand von 30px für den Karten-Container.
   - border-radius: 25px;: Abgerundete Ecken der Karte.
   ============================================================================= */
@media (max-width: 480px) {
    .contact-blur-card {
        padding: 2.5rem 1.8rem;
    }

    .contact-grid-item {
        padding: 2rem 1.5rem;
    }

    .map iframe {
        height: 360px;
    }

    .contact-titel h2 {
       font-size: 2.5rem !important;
        margin-top: 165px !important;
        text-align: center;
        margin-bottom: 20px !important;
    }

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

    .map-wrapper {
    width: 435px !important;
    margin-left: -30px !important;
}

    .map iframe {
        border-radius: 25px;
    }
}