/*
==============================================================================
SCHADENSMELDUNGSSEITE - GRUNDLEGENDES LAYOUT UND STYLING
==============================================================================
Spezifische Styling-Definitionen für die Schadensmeldungsseite mit
professionellem Formular-Design, Validierung und responsiver Darstellung.
Die Seite verwendet ein einheitliches Farbschema für optimale
Benutzerfreundlichkeit und professionelle Präsentation.

FARBPALETTE:
- Primary: #0d6efd (Professionelles Blau - Primäre Aktionen, Hervorhebungen)
- Dark: #0C0C0C (Nahezu Schwarz - Text, Überschriften, dunkle Oberflächen)
- Light Gray: #D6D6D6 (Rahmen, gedämpfter Text, inaktive Zustände)
- White: #FFFFFF (Hintergründe, Karten, Formularfelder)
- Success: #198754 (Professionelles Grün - Erfolgszustände)
- Warning: #ffc107 (Warnung-Alerts)
*/

/*
------------------------------------------------------------------------------
FORMULAR-SICHTBARKEIT UND NAVIGATION
------------------------------------------------------------------------------
Standardmäßige Ausblendung des Schadensmeldungsformulars und
transparente Navigation für nahtlose Benutzerführung.
*/
#damage-form {
    display: none;
}

.collapse.navbar-collapse[style] {
    background: transparent !important;
}

/*
==============================================================================
BODY UND HAUPTCONTAINER-STYLING
==============================================================================
Grundlegende Seitendarstellung mit Gradient-Hintergrund und optimierter
Vollbild-Darstellung für eine moderne und professionelle Präsentation
der Schadensmeldungsseite.
*/

/*
------------------------------------------------------------------------------
BODY GRUNDSTYLING MIT GRADIENT-HINTERGRUND
------------------------------------------------------------------------------
Sanfter Verlauf von Hell- zu Weißgrau für eine elegante und
professionelle Seitengestaltung mit Vollbild-Darstellung.
*/
body {
    background: linear-gradient(135deg, #D6D6D6 0%, #FFFFFF 100%);
    min-height: 100vh;
    padding: 0;
}

/*
------------------------------------------------------------------------------
FORMULAR-HAUPTCONTAINER
------------------------------------------------------------------------------
Zentraler Container für alle Formulare mit modernem Glasmorphismus-Effekt,
abgerundeten Ecken und subtilen Schatten für eine ansprechende
Benutzeroberfläche und optimale Lesbarkeit.
*/
.form-container {
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid #D6D6D6;
}

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

/*
==============================================================================
WARNHINWEISE UND ALERT-SYSTEME
==============================================================================
Professionelle Gestaltung von Warnmeldungen und Hinweisen mit
eindeutiger visueller Kennzeichnung und optimaler Benutzerführung
für wichtige Informationen und Sicherheitshinweise.
*/

/*
------------------------------------------------------------------------------
HAUPT-WARNBEREICH
------------------------------------------------------------------------------
Zentraler Warnhinweis-Container mit dezenter Hintergrundfarbe und
deutlichem Rahmen für wichtige Benutzerinformationen.
*/
.warning-alert {
    background-color: rgba(255, 195, 7, 0.1);
    border: 2px solid #ffc107;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

/*
------------------------------------------------------------------------------
WARNINHALT UND LAYOUT
------------------------------------------------------------------------------
Flexbox-Layout für optimale Anordnung von Icon und Textinhalt
mit angemessenen Abständen für beste Lesbarkeit.
*/
.warning-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/*
------------------------------------------------------------------------------
WARNICON UND VISUELLE KENNZEICHNUNG
------------------------------------------------------------------------------
Prominent platziertes Warnicon mit einheitlicher Farbgebung
und flexibler Positionierung für sofortige Erkennbarkeit.
*/
.warning-icon {
    color: #856404;
    font-size: 1.5rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

/*
------------------------------------------------------------------------------
TEXTBEREICH FÜR WARNINHALTE
------------------------------------------------------------------------------
Flexibler Textcontainer für mehrzeilige Warninhalte mit
automatischer Breitenverteilung.
*/
.black {
    flex: 1;
}

/*
------------------------------------------------------------------------------
WARNÜBERSCHRIFT UND TEXTFORMATIERUNG
------------------------------------------------------------------------------
Einheitliche Typografie für Warnüberschriften und Textinhalte
mit konsistenter Farbgebung und optimalen Abständen.
*/
.warning-title {
    color: #856404;
    margin-bottom: 1rem;
}

.black p {
    color: #856404;
    margin-bottom: 1.5rem;
}

/*
==============================================================================
FORMULAR-SEKTIONEN UND STRUKTURIERUNG
==============================================================================
Organisierte Gliederung des Schadensmeldungsformulars in logische
Bereiche mit klarer visueller Trennung und benutzerfreundlicher
Navigation durch die verschiedenen Eingabebereiche.
*/

/*
------------------------------------------------------------------------------
FORMULAR-HAUPTSEKTIONEN
------------------------------------------------------------------------------
Abgetrennte Bereiche für verschiedene Eingabekategorien mit
ausreichendem Abstand für übersichtliche Darstellung.
*/
.form-section {
    margin-bottom: 2.5rem;
}

/*
------------------------------------------------------------------------------
SEKTIONS-ÜBERSCHRIFTEN UND VISUELLE TRENNUNG
------------------------------------------------------------------------------
Hervorgehobene Bereichstitel mit farbiger Unterstreichung und
Icon-Integration für intuitive Benutzerführung.
*/
.section-title {
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #0d6efd;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*
==============================================================================
EINGABEFELDER UND FORMULARELEMENTE
==============================================================================
Einheitliche Gestaltung aller Formulareingaben mit optimierter
Benutzerinteraktion, Validierung und responsiver Darstellung
für verschiedene Eingabetypen und Geräte.
*/

/*
------------------------------------------------------------------------------
LABEL UND EINGABEFELD-ABSTÄNDE
------------------------------------------------------------------------------
Konsistente Abstände zwischen Labels und Eingabefeldern
für optimale Lesbarkeit und Benutzerführung.
*/
.form-label {
    margin-bottom: 0.5rem;
}

/*
------------------------------------------------------------------------------
STANDARD-EINGABEFELDER
------------------------------------------------------------------------------
Einheitliches Styling für alle Textfelder, Textareas und Selects
mit abgerundeten Ecken und sanften Übergangseffekten.
*/
.form-control {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
}

/*
------------------------------------------------------------------------------
VALIDIERUNG UND FEHLERZUSTÄNDE
------------------------------------------------------------------------------
Visuelle Rückmeldung für ungültige Eingaben mit farbigen
Rahmen und Schatten-Effekten für sofortige Erkennbarkeit.
*/
.form-control.is-invalid {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/*
------------------------------------------------------------------------------
HILFSTEXT UND ZUSATZINFORMATIONEN
------------------------------------------------------------------------------
Dezente Formatierung für erklärende Texte und Eingabehilfen
mit reduzierter Farbsättigung.
*/
.form-text {
    color: #D6D6D6;
}

/*
==============================================================================
DATEI-UPLOAD UND ERWEITERTE EINGABEELEMENTE
==============================================================================
Spezialisierte Styling-Definitionen für Datei-Upload-Felder mit
angepassten Browser-Buttons und einheitlicher Designsprache
für optimale Benutzerfreundlichkeit bei Bild- und Dokumenten-Uploads.
*/

/*
------------------------------------------------------------------------------
DATEI-EINGABEFELD GRUNDSTYLING
------------------------------------------------------------------------------
Angepasstes Padding für Datei-Upload-Felder zur Harmonisierung
mit anderen Formularelementen.
*/
input[type="file"].form-control {
    padding: 0.375rem 0.75rem;
}

/*
------------------------------------------------------------------------------
WEBKIT DATEI-UPLOAD BUTTON ANPASSUNG
------------------------------------------------------------------------------
Individuelle Gestaltung des nativen Datei-Auswahl-Buttons mit
Brand-konformem Design und Hover-Effekten für verbesserte UX.
*/
input[type="file"].form-control::-webkit-file-upload-button {
    background: linear-gradient(90deg, #0d6efd, #0d6dfdcd);
    color: white;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    margin-right: 0.75rem;
    cursor: pointer;
    font-weight: 600;
}

input[type="file"].form-control::-webkit-file-upload-button:hover {
    background: linear-gradient(90deg, #0b5ed7, #0b5ed7cd);
}

/*
==============================================================================
FORMULAR-SUBMIT BEREICH UND ABSCHLUSS-ELEMENTE
==============================================================================
Gestaltung des Absendebereichs mit visueller Trennung vom restlichen
Formular und zentrierter Ausrichtung für intuitive Benutzerführung
beim Formular-Abschluss.
*/

/*
------------------------------------------------------------------------------
SUBMIT-BEREICH LAYOUT UND TRENNUNG
------------------------------------------------------------------------------
Zentraler Absendebereich mit oberer Rahmenlinie zur visuellen
Trennung und zentrierter Ausrichtung der Aktions-Buttons.
*/
.form-submit {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #D6D6D6;
}

/*
==============================================================================
ANIMATIONEN UND ÜBERGANGSEFFEKTE
==============================================================================
Sanfte Einblendungsanimationen für das Schadensmeldungsformular
zur Verbesserung der Benutzererfahrung und professioneller
Präsentation der Inhalte.
*/

/*
------------------------------------------------------------------------------
FORMULAR EINBLENDUNGSANIMATION
------------------------------------------------------------------------------
Smooth Fade-In Effekt mit vertikaler Bewegung für eine
elegante Darstellung beim Öffnen des Formulars.
*/
.damage-form {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/*
==============================================================================
RESPONSIVE DESIGN - SCHADENSMELDUNGSSEITE
==============================================================================
Umfassende Anpassungen für optimale Darstellung auf allen Endgeräten
von Desktop bis Mobile mit spezifischen Breakpoints und angepassten
Layouts für verschiedene Bildschirmgrößen und Touch-Interfaces.
*/

/*
------------------------------------------------------------------------------
DESKTOP DARSTELLUNG (AB 1025PX)
------------------------------------------------------------------------------
Optimierungen für große Bildschirme mit ausgeblendeter mobiler
Navigation und erweiterten Container-Abständen.
*/
@media (min-width: 1025px) {
    #stickyNav .navbar-toggler {
        display: none !important;
    }
    
    .form-container {
        padding: 2.5rem;
    }
}

/*
------------------------------------------------------------------------------
ALLGEMEINE TABLET/MOBILE BASIS (MAX-WIDTH: 1024PX)
------------------------------------------------------------------------------
Grundlegende Anpassungen für Touch-Geräte mit reduzierten
Container-Abständen für bessere Platznutzung.
*/
@media (max-width: 1024px) {
    .form-container {
        margin: 1.5rem;
    }
}

/*
------------------------------------------------------------------------------
TABLET SPEZIFISCH (769PX - 1024PX)
------------------------------------------------------------------------------
Optimierte Darstellung für Tablet-Geräte mit angepasster
Typografie und Sektions-Überschriften.
*/
@media (min-width: 769px) and (max-width: 1024px) {
    .form-container h1 {
        font-size: 2.2rem;
    }
    
    .section-title {
        font-size: 1.15rem;
    }
}

/*
------------------------------------------------------------------------------
MOBILE DARSTELLUNG (MAX-WIDTH: 768PX)
------------------------------------------------------------------------------
Mobile-optimierte Anpassungen mit reduzierten Abständen,
angepasster Typografie und Touch-optimierten Eingabefeldern.
*/
@media (max-width: 768px) {
    /*
    ..................................................................
    MOBILE CONTAINER UND LAYOUT-ANPASSUNGEN
    ..................................................................
    Reduzierte Abstände und Padding für optimale Platznutzung
    auf kleinen Bildschirmen.
    */
    .form-container {
        margin: 1rem;
        padding: 1.5rem;
    }
    
    .form-container h1 {
        font-size: 2rem;
    }
    
    /*
    ..................................................................
    MOBILE SEKTIONS-TITEL UND NAVIGATION
    ..................................................................
    Angepasste Darstellung der Bereichstitel mit vertikaler
    Ausrichtung für bessere Lesbarkeit.
    */
    .section-title {
        font-size: 1.1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    /*
    ..................................................................
    MOBILE WARNBEREICH-OPTIMIERUNG
    ..................................................................
    Vertikale Anordnung der Warnelemente mit zentrierter
    Ausrichtung für Touch-optimierte Darstellung.
    */
    .warning-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .warning-icon {
        font-size: 2rem;
        align-self: center;
    }
    
    /*
    ..................................................................
    MOBILE EINGABEFELD-OPTIMIERUNGEN
    ..................................................................
    Verhindert automatisches Zooming auf iOS-Geräten durch
    optimierte Schriftgröße für Eingabefelder.
    */
    .form-control {
        font-size: 16px;
    }
    /*
    ..................................................................
    MOBILE FOOTER-ANPASSUNGEN
    ..................................................................
    Optimierte Footer-Darstellung für mobile Geräte mit reduziertem
    Padding und zentrierter Ausrichtung aller Elemente.
    */
    .footer {
        padding: 2rem 0 1rem 0;
    }
    
    .footer .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .footer-title {
        font-size: 1.3rem;
        text-align: center;
    }
    
    .footer-text {
        font-size: 0.9rem;
        text-align: center;
    }
    
    .footer-contact {
        text-align: center;
    }
    
    .footer-contact p {
        justify-content: center;
        font-size: 0.9rem;
    }
    
    .footer-links {
        text-align: center;
    }
    
    .footer-links a {
        font-size: 0.9rem;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .footer-legal a {
        font-size: 0.8rem;
    }
    
    .footer-copyright {
        font-size: 0.8rem;
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .col-md-6.text-md-end {
        text-align: center !important;
        margin-top: 1rem;
    }
    
    /*
    ..................................................................
    MOBILE PORTRAIT OPTIMIERUNGEN (MAX-WIDTH: 576PX)
    ..................................................................
    Weitere Reduzierungen für sehr kleine Bildschirme mit
    minimal angepassten Abständen und Schriftgrößen.
    */
    @media (max-width: 576px) {
        .form-container {
            padding: 1rem;
        }
        
        .section-title {
            font-size: 1rem;
        }
        
        .footer {
            padding: 1.5rem 0 1rem 0;
        }
        
        .footer-title {
            font-size: 1.2rem;
        }
        
        .footer-logo {
            height: 30px;
        }
        
        .footer-social a {
            width: 40px;
            height: 40px;
            font-size: 1.3rem;
        }
    }
}

/*
==============================================================================
FOOTER-DESIGN UND BRANDING
==============================================================================
Professionelle Footer-Gestaltung mit Gradient-Hintergrund und
einheitlichem Design-System für konsistente Markenpräsenz
und optimale Benutzerführung am Seitenende.
*/

/*
------------------------------------------------------------------------------
FOOTER HAUPTCONTAINER UND HINTERGRUND
------------------------------------------------------------------------------
Eleganter Gradient-Hintergrund mit Glasmorphismus-Effekt und
animierter Einblendung für professionelle Seitendarstellung.
*/
.footer {
    background: linear-gradient(135deg, #0C0C0C 0%, #0d6efd 100%);
    backdrop-filter: blur(10px);
    color: #FFFFFF;
    margin-top: 3rem;
    padding: 3rem 0 1.5rem 0;
    border-top: 3px solid #0d6efd;
    box-shadow: 0 -5px 20px rgba(13, 110, 253, 0.1);
    animation: footerSlideUp 0.6s ease-out;
}

/*
------------------------------------------------------------------------------
FOOTER CONTENT-SEKTIONEN
------------------------------------------------------------------------------
Strukturierte Bereiche für verschiedene Footer-Inhalte mit
einheitlichen Abständen und konsistenter Formatierung.
*/
.footer-section {
    margin-bottom: 2rem;
}

/*
------------------------------------------------------------------------------
FOOTER ÜBERSCHRIFTEN UND AKZENTE
------------------------------------------------------------------------------
Hervorgehobene Titel mit Gradient-Unterstrichen und
professioneller Typografie für klare Hierarchie.
*/
.footer-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #FFFFFF;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #FFFFFF, transparent);
    border-radius: 2px;
}

/*
------------------------------------------------------------------------------
FOOTER FLIESSTEXT UND BESCHREIBUNGEN
------------------------------------------------------------------------------
Optimierte Lesbarkeit für Footer-Texte mit angenehmer
Zeilenhöhe und gedämpfter Farbgebung.
*/
.footer-text {
    font-family: 'Lato', sans-serif;
    line-height: 1.8;
    color: #D6D6D6;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

/*
------------------------------------------------------------------------------
FOOTER LOGO UND BRANDING-ELEMENTE
------------------------------------------------------------------------------
Responsive Logo-Darstellung mit Hover-Effekten für
konsistente Markenpräsenz im Footer-Bereich.
*/
.footer-logo {
    height: 40px;
    width: auto;
    opacity: 0.95;
    transition: opacity 0.3s ease;
    margin-bottom: 1rem;
}

.footer-logo:hover {
    opacity: 1;
}

/*
------------------------------------------------------------------------------
FOOTER KONTAKTINFORMATIONEN
------------------------------------------------------------------------------
Strukturierte Darstellung der Kontaktdaten mit Icons und
Hover-Effekten für verbesserte Benutzerinteraktion.
*/
.footer-contact {
    margin-bottom: 1.5rem;
}

.footer-contact p {
    margin-bottom: 0.75rem;
    color: #D6D6D6;
    display: flex;
    align-items: center;
    font-family: 'Lato', sans-serif;
    transition: color 0.3s ease;
}

.footer-contact p:hover {
    color: #FFFFFF;
}

.footer-contact i {
    margin-right: 0.75rem;
    width: 20px;
    color: #0d6efd;
    font-size: 1.1rem;
    text-align: center;
}

/*
------------------------------------------------------------------------------
FOOTER NAVIGATIONLINKS
------------------------------------------------------------------------------
Stilvolle Link-Navigation mit Unterstrichen und sanften
Übergangseffekten für professionelle Benutzerführung.
*/
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: #D6D6D6;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    position: relative;
    padding: 0.25rem 0;
    display: inline-block;
}

.footer-links a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #0d6efd, #FFFFFF);
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: #FFFFFF;
    transform: translateX(5px);
}

.footer-links a:hover::before {
    width: 100%;
}

/*
------------------------------------------------------------------------------
FOOTER BOTTOM-BEREICH UND RECHTLICHES
------------------------------------------------------------------------------
Abgetrennter unterer Footer-Bereich für Copyright und
rechtliche Links mit subtiler Hintergrund-Hervorhebung.
*/
.footer-bottom {
    border-top: 1px solid rgba(214, 214, 214, 0.2);
    margin-top: 2rem;
    padding-top: 1.5rem;
    background: rgba(12, 12, 12, 0.3);
}

.footer-copyright {
    color: #D6D6D6;
    margin: 0;
    font-size: 0.9rem;
    font-family: 'Lato', sans-serif;
}

/*
------------------------------------------------------------------------------
RECHTLICHE LINKS UND IMPRESSUM
------------------------------------------------------------------------------
Flexibles Layout für rechtliche Navigationslinks mit
Hover-Effekten und responsiver Anordnung.
*/
.footer-legal {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-legal a {
    color: #D6D6D6;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-family: 'Lato', sans-serif;
    position: relative;
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
}

.footer-legal a:hover {
    color: #FFFFFF;
    background: rgba(13, 110, 253, 0.2);
}

/*
------------------------------------------------------------------------------
SOCIAL MEDIA INTEGRATION
------------------------------------------------------------------------------
Stilvolle Social Media Icons mit Hover-Effekten und
animierten Transformationen für moderne Markenpräsenz.
*/
.footer-social {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.footer-social a {
    color: #D6D6D6;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(214, 214, 214, 0.1);
}

.footer-social a:hover {
    color: #FFFFFF;
    background: rgba(13, 110, 253, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
}

/*
------------------------------------------------------------------------------
FOOTER SLIDE-UP ANIMATION
------------------------------------------------------------------------------
Elegante Einblendungsanimation für den Footer-Bereich mit
vertikaler Bewegung und Opacity-Übergang.
*/
@keyframes footerSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
==============================================================================
FOOTER RESPONSIVE DESIGN
==============================================================================
Umfassende Anpassungen des Footer-Bereichs für verschiedene
Bildschirmgrößen mit optimierter Darstellung auf mobilen
Geräten und Tablets für konsistente Benutzererfahrung.
*/

/*
------------------------------------------------------------------------------
FOOTER MOBILE ANPASSUNGEN (MAX-WIDTH: 768PX)
------------------------------------------------------------------------------
Mobile-optimierte Footer-Darstellung mit zentrierter Ausrichtung
und angepassten Abständen für Touch-Geräte.
*/
@media (max-width: 768px) {
    .footer {
        padding: 2rem 0 1rem 0;
    }
    
    .footer .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .footer-title {
        font-size: 1.3rem;
        text-align: center;
    }
    
    .footer-text {
        font-size: 0.9rem;
        text-align: center;
    }
    
    .footer-contact {
        text-align: center;
    }
    
    .footer-contact p {
        justify-content: center;
        font-size: 0.9rem;
    }
    
    .footer-links {
        text-align: center;
    }
    
    .footer-links a {
        font-size: 0.9rem;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .footer-legal a {
        font-size: 0.8rem;
    }
    
    .footer-copyright {
        font-size: 0.8rem;
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .col-md-6.text-md-end {
        text-align: center !important;
        margin-top: 1rem;
    }
}

/*
------------------------------------------------------------------------------
FOOTER MOBILE PORTRAIT (MAX-WIDTH: 576PX)
------------------------------------------------------------------------------
Weitere Optimierungen für sehr kleine Bildschirme mit
minimal reduzierten Abständen und angepassten Icon-Größen.
*/
@media (max-width: 576px) {
    .footer {
        padding: 1.5rem 0 1rem 0;
    }
    
    .footer-title {
        font-size: 1.2rem;
    }
    
    .footer-logo {
        height: 30px;
    }
    
    .footer-social a {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }
}