/*
==============================================================================
KONTAKTSEITE - GRUNDLEGENDES LAYOUT UND BODY-STYLING
==============================================================================
Spezifische Anpassungen für die Kontaktseite mit primärem Gradient-Hintergrund
und Vollbild-Darstellung. Das Layout ist optimiert für Formulare und 
Kontaktinformationen.
*/

body {
    background: var(--gradient-primary);
    min-height: 100vh;
    padding: 0;
}

/*
==============================================================================
FORMULAR CONTAINER
==============================================================================
Hauptcontainer für alle Formulare auf der Kontaktseite mit modernem
Glasmorphismus-Effekt, abgerundeten Ecken und dezenten Schatten für
eine ansprechende Benutzeroberfläche.
*/

.form-container {
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 20px 40px rgba(34, 38, 42, 0.1);
    border: 1px solid var(--light-gray);
}

.form-container h1 {
  margin-bottom: 2rem;
}

/*
==============================================================================
LOGO-DARSTELLUNG IM KONTAKTBEREICH
==============================================================================
Responsive Logo-Gestaltung für den Kontaktbereich mit prozentualer
Breitenangabe und minimaler Höhe für optimale Darstellung auf
verschiedenen Bildschirmgrößen.
*/

.contact-logo {
    width: 60%;
    max-width: 60%;
    min-height: 48px;
    margin-bottom: 2vw;
}

/*
==============================================================================
FORMULAR-ELEMENTE UND EINGABEFELDER
==============================================================================
Styling für alle Formulareingaben mit einheitlichem Design, abgerundeten
Ecken, Übergängen und optimierter Benutzerinteraktion.
*/

.form-label {
  margin-bottom: 0.5rem;
}

.form-control, .form-select {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.form-control::placeholder {
    color: var(--light-gray);
}

.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/*
------------------------------------------------------------------------------
CHECKBOX UND RADIO BUTTON STYLING
------------------------------------------------------------------------------
Vergrößerte Checkboxen und Radio-Buttons für bessere Benutzerfreundlichkeit
mit angepasstem Cursor-Verhalten.
*/

.form-check-input {
    transform: scale(1.2);
}

.form-check-label {
    margin-left: 0.5rem;
    cursor: pointer;
}

/*
==============================================================================
FORMULAR-VALIDIERUNG
==============================================================================
Visuelle Rückmeldung für Benutzer bei der Formulareingabe mit
unterschiedlichen Zuständen für gültige und ungültige Eingaben.
*/

.form-control.is-invalid,
.form-select.is-invalid {
    box-shadow: 0 0 0 0.2rem var(--overlay-dark);
}

.form-control.is-valid,
.form-select.is-valid {
    box-shadow: 0 0 0 0.2rem var(--overlay-dark);
}

.invalid-feedback {
    margin-top: 0.25rem;
}

/*
==============================================================================
ALERT UND BENACHRICHTIGUNGSSYSTEM
==============================================================================
Einheitliche Gestaltung für verschiedene Arten von Benachrichtigungen
(Erfolg, Fehler, Information) mit farbcodierten Rahmen.
*/

.alert {
    border-radius: 10px;
    border: none;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.alert-success {
    border: 2px solid #198754;
}

.alert-danger {
    border: 2px solid #dc3545;
}

.alert-info {
    border: 2px solid #0d6efd;
}

/*
==============================================================================
KONTAKTSEITEN-SPEZIFISCHE KOMPONENTEN
==============================================================================
Individuelle Gestaltung für Kontaktinformationen und Formularbereiche
mit modernem Card-Design und subtilen Schatten-Effekten.
*/

/*
------------------------------------------------------------------------------
KONTAKT-INFORMATIONSBEREICH
------------------------------------------------------------------------------
Hintergrundcontainer für Kontaktdaten mit hellem Hintergrund und
durchgehender Höhe für einheitliche Darstellung.
*/

.contact-info {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 15px;
    height: 100%;
}

/*
------------------------------------------------------------------------------
EINZELNE KONTAKT-ELEMENTE
------------------------------------------------------------------------------
Card-basierte Darstellung für individuelle Kontaktinformationen mit
Flexbox-Layout und Icon-Integration.
*/

.contact-item {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.contact-item i {
    font-size: 1.2rem;
    margin-top: 0.2rem;
}

/*
------------------------------------------------------------------------------
KONTAKT-FORMULAR CONTAINER
------------------------------------------------------------------------------
Separater Container für das Kontaktformular mit weißem Hintergrund
und verstärktem Schatten-Effekt zur Abgrenzung.
*/

.contact-form {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

/*
------------------------------------------------------------------------------
ERWEITERTE CHECKBOX-VALIDIERUNG
------------------------------------------------------------------------------
Spezielle Validierungsstyles für Checkboxen mit Fehlerbehandlung
und Label-Farbänderungen.
*/

.form-check-input.is-invalid {
    border-color: #dc3545;
}

.form-check-input.is-invalid ~ .form-check-label {
    color: #dc3545;
}

/*
==============================================================================
RESPONSIVE DESIGN - KONTAKTSEITE
==============================================================================
Umfassende responsive Anpassungen für optimale Darstellung auf allen
Endgeräten von Desktop bis Mobile mit spezifischen Breakpoints.
*/

/*
------------------------------------------------------------------------------
DESKTOP DARSTELLUNG (AB 1025PX)
------------------------------------------------------------------------------
Spezielle Anpassungen für Desktop-Ansicht mit ausgeblendeten
Mobile-Navigation-Elementen.
*/

@media (min-width: 1025px) {
    #stickyNav .navbar-toggler {
        display: none !important;
    }
}

/*
------------------------------------------------------------------------------
TABLET UND MOBILE BASIS (MAX-WIDTH: 1024PX)
------------------------------------------------------------------------------
Grundlegende Anpassungen für Tablet- und Mobile-Geräte mit
zurückgesetztem Padding für bessere Platznutzung.
*/

@media (max-width: 1024px) {
    body {
        padding: 0;
    }
}

/*
------------------------------------------------------------------------------
TABLET SPEZIFISCH (769PX - 1024PX)
------------------------------------------------------------------------------
Optimierte Darstellung für Tablet-Geräte mit angepassten
Container-Abständen und Padding-Werten.
*/

@media (min-width: 769px) and (max-width: 1024px) {
    .form-container {
        margin: 1.5rem;
        padding: 2rem;
    }
}

/*
------------------------------------------------------------------------------
MOBILE DARSTELLUNG (MAX-WIDTH: 768PX)
------------------------------------------------------------------------------
Mobile-optimierte Anpassungen mit reduzierten Abständen und
angepasster Typografie für kleinere Bildschirme.
*/

@media (max-width: 768px) {
    .form-container {
        margin: 1rem;
        padding: 1.5rem;
    }
    
    .form-container h1 {
        font-size: 2rem;
    }
    
    /*
    --------------------------------------------------------------------------
    MOBILE PORTRAIT (MAX-WIDTH: 576PX)
    --------------------------------------------------------------------------
    Weitere Optimierungen für sehr kleine Bildschirme mit
    minimal reduziertem Padding für maximale Platznutzung.
    */
    
    @media (max-width: 576px) {
        .form-container {
            padding: 1rem;
        }
    }
}