/* ==========================================================================
   1. ROOT TOKENS (Variables)
   ========================================================================== */

:root {
    /* Colors */
    --primary: #1f3c72;
    --primary-light: #2192cd;
    --accent: #2192cd;
    --accent-hover: #1a7ba9;
    --primary-rgb: 31, 60, 114;
    --accent-rgb: 33, 146, 205;
    --white: #FFFFFF;
    --text: #333;
    --text-color: #333;
    --light-bg: #f7f9fc;
    --gray-light: #f7f9fc;
    --gray-medium: #e6e9f0;
    --gray-dark: #5a6a8a;
    --gray-text: #5a6a8a;

    /* Motion */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --dur-fast: 150ms;
    --dur-med: 220ms;
    --dur-slow: 320ms;

    /* Sizing & Spacing */
    --radius: 10px;
    --border-radius: 10px;
    --radius-card: 16px;
    --gap-sm: 8px;
    --gap-md: 16px;
    --gap-lg: 24px;
    --container-width: 1400px;

    /* Effects */
    --box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    --card-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 4px 10px rgba(0,0,0,0.06);
    --shadow-md: 0 8px 20px rgba(0,0,0,0.10);
    --transition-speed: 0.6s;

    /* Buttons */
    --button-transform: translateY(-1px);
    --button-shadow-hover: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   2. LEGAL CONTENT (AGB, Privacy, Impressum)
   ========================================================================== */

.legal-content { padding-top: 120px; padding-bottom: 60px; }
.legal-content .container { max-width: 1000px; }

.legal-content h1 { font-size: 3rem; margin-bottom: 2rem; margin-top: 2rem; }

.legal-section { margin-bottom: 3rem; line-height: 1.8; }
.legal-section h2 { font-size: 2rem; margin-bottom: 1.5rem; text-align: left; }
.legal-section h3 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; }
.legal-section p { margin-bottom: 1.5rem; }

/* ==========================================================================
   3. RESPONSIVE & MOBILE NAVIGATION
   ========================================================================== */

/* Medium Devices */
@media (max-width: 1200px) {
    .container { padding: 0 15px; }
    .nav-container { padding: 15px 20px; }
}

/* Tablet / Layout Collapse */
@media (max-width: 1024px) {
    .footer-content { flex-direction: column; gap: 30px; }
    .footer-left, .footer-right { flex: 0 0 100%; }
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.95);
        flex-direction: column;
        align-items: center;
        padding: 90px 0 40px;
        transition: left 0.3s ease;
        z-index: 999;
        display: flex;
        gap: 20px;
    }

    .nav-menu.active { left: 0; }
    .mobile-menu-toggle { display: block; }

    /* Footer adjustments for small screens */
    .footer-content { flex-direction: column; gap: 30px; }
    .footer-left, .footer-right { flex: 0 0 100%; }
}

/* Hide UI elements on small mobile */
@media (max-width: 767px) {
    .social-sidebar { display: none; }
}