/* --- PAGE WRAPPER & BASIS --- */
.legal-page-wrapper { 
    background: #0f001a; 
    color: #b0b3b8; 
    min-height: 100vh; 
    padding: 120px 0 80px 0; 
    position: relative; 
    overflow-x: hidden; 
}

/* --- NEON BACKGROUND EFFECTS --- */
.legal-orb { 
    position: absolute; 
    border-radius: 50%; 
    filter: blur(120px); 
    opacity: 0.15; 
    z-index: 0; 
    pointer-events: none; 
}
.lo-1 { width: 600px; height: 600px; background: #bf00ff; top: -10%; right: -10%; }
.lo-2 { width: 400px; height: 400px; background: #2c0b4a; bottom: 10%; left: -10%; }

/* --- LAYOUT & SIDEBAR --- */
.legal-container { 
    display: flex; 
    gap: 50px; 
    position: relative; 
    z-index: 2; 
}

/* Sidebar: Hidden on mobile, sticky on desktop */
.legal-sidebar { 
    flex: 1; 
    min-width: 240px; 
    position: sticky; 
    top: 140px; 
    height: fit-content; 
    display: none; 
} 
@media(min-width: 1200px) { 
    .legal-sidebar { display: block; } 
}

.legal-nav-box {
    background: rgba(255, 255, 255, 0.03); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 15px; 
    padding: 25px;
}

.legal-nav-link { 
    display: flex; 
    align-items: center; 
    color: #b0b3b8; 
    padding: 12px 0; 
    text-decoration: none; 
    transition: 0.3s; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
}
.legal-nav-link i { 
    margin-right: 15px; 
    color: #bf00ff; 
    opacity: 0.7; 
    transition: 0.3s; 
    width: 20px; /* Fixed width for alignment */
    text-align: center;
}
.legal-nav-link:hover { color: #fff; }
.legal-nav-link:hover i { opacity: 1; text-shadow: 0 0 10px #bf00ff; }
.legal-nav-link:last-child { border-bottom: none; }

/* --- MAIN CONTENT AREA --- */
.legal-content-area { flex: 3; }

.legal-main-title { 
    font-size: 3.5rem; 
    font-weight: 800; 
    margin-bottom: 20px; 
    background: linear-gradient(135deg, #ffffff 0%, #e0b0ff 100%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

.legal-intro { 
    font-size: 1.1rem; 
    color: #b0b3b8; 
    margin-bottom: 60px; 
}

/* --- SECTIONS --- */
.agb-section { 
    margin-bottom: 80px; 
    scroll-margin-top: 150px; /* Offset for sticky header */
}

.agb-section-header { 
    display: flex; 
    align-items: center; 
    margin-bottom: 30px; 
}

.agb-icon-wrapper {
    width: 60px; 
    height: 60px; 
    background: rgba(191, 0, 255, 0.1); 
    border-radius: 15px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-right: 25px;
    border: 1px solid rgba(191, 0, 255, 0.3); 
    box-shadow: 0 0 30px rgba(191, 0, 255, 0.2);
}
.agb-icon-wrapper i { 
    font-size: 1.5rem; 
    color: #e0b0ff; 
}

.agb-h2 { 
    color: #fff; 
    font-size: 1.8rem; 
    font-weight: 700; 
    margin: 0; 
}

.legal-text { 
    font-size: 1.05rem; 
    line-height: 1.8; 
    color: #c0c3c8; 
}

/* --- VISUAL ELEMENT: DUTY CARDS (Split view) --- */
.duty-card-wrapper { 
    display: flex; 
    gap: 25px; 
    margin-top: 30px; 
    flex-wrap: wrap; 
}
.duty-card { 
    flex: 1; 
    min-width: 300px; 
    background: rgba(255,255,255,0.03); 
    padding: 30px; 
    border-radius: 15px; 
    border: 1px solid rgba(255,255,255,0.08); 
}
.duty-title { 
    font-size: 1.2rem; 
    color: #fff; 
    margin-bottom: 15px; 
    display: flex; 
    align-items: center; 
}
.duty-title i { margin-right: 10px; }

.duty-veliy i { color: #00d2ff; } /* Blue for provider */
.duty-client i { color: #ff00d4; } /* Pink for client */

/* --- VISUAL ELEMENT: SEO INFO BOX --- */
.seo-box { 
    display: flex; 
    gap: 20px; 
    background: rgba(0, 210, 255, 0.05); 
    border: 1px solid rgba(0, 210, 255, 0.2); 
    padding: 25px; 
    border-radius: 15px; 
    margin-top: 30px; 
    align-items: flex-start; 
}
.seo-icon { 
    font-size: 2rem; 
    color: #00d2ff; 
    opacity: 0.8; 
}

/* --- VISUAL ELEMENT: PROCESS TIMELINE (Abnahme) --- */
.process-timeline { 
    display: flex; 
    justify-content: space-between; 
    margin-top: 40px; 
    position: relative; 
    flex-wrap: wrap; 
    gap: 20px; 
}
/* The connecting line */
.process-timeline::before { 
    content: ''; 
    position: absolute; 
    top: 40px; 
    left: 50px; 
    right: 50px; 
    height: 2px; 
    background: rgba(191, 0, 255, 0.3); 
    z-index: 0; 
    display: none; 
} 
@media(min-width: 768px) { 
    .process-timeline::before { display: block; } 
}

.process-step { 
    flex: 1; 
    text-align: center; 
    position: relative; 
    z-index: 1; 
    min-width: 150px; 
}

.step-icon { 
    width: 80px; 
    height: 80px; 
    background: #0f001a; 
    border: 2px solid #bf00ff; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto 20px auto; 
    box-shadow: 0 0 20px rgba(191, 0, 255, 0.4); 
}
.step-icon i { font-size: 2rem; color: #fff; }
.step-title { color: #fff; font-weight: 700; margin-bottom: 10px; }
.step-desc { font-size: 0.9rem; }

/* --- VISUAL ELEMENT: RED ALERT (Leasing) --- */
.legal-alert-danger { 
    background: rgba(255, 0, 85, 0.08); 
    border: 2px solid #ff0055; 
    padding: 30px; 
    border-radius: 15px; 
    color: #fff; 
    margin-top: 40px; 
    position: relative; 
    overflow: hidden; 
    box-shadow: 0 0 40px rgba(255, 0, 85, 0.2); 
    display: flex; 
    gap: 25px; 
    align-items: flex-start;
}
.alert-icon-danger { 
    font-size: 3rem; 
    color: #ff0055; 
    text-shadow: 0 0 20px #ff0055; 
}
.alert-content strong { 
    color: #ff5599; 
    font-size: 1.2rem; 
    display: block; 
    margin-bottom: 10px; 
}

/* --- VISUAL ELEMENT: THE "KILL SWITCH" LOCK --- */
.lock-visual-wrapper { 
    display: flex; 
    gap: 30px; 
    margin-top: 30px; 
    align-items: center; 
    background: linear-gradient(to right, rgba(255,0,85,0.1), rgba(0,255,136,0.1)); 
    padding: 30px; 
    border-radius: 20px; 
    border: 1px solid rgba(255,255,255,0.1); 
}
.lock-state { 
    text-align: center; 
    flex: 1; 
    opacity: 0.5; 
    transition: 0.3s; 
}
.lock-state.active { 
    opacity: 1; 
    transform: scale(1.05); 
}
.lock-icon-large { 
    font-size: 4rem; 
    margin-bottom: 15px; 
    display: block; 
    text-shadow: 0 0 30px currentColor; 
}
.lock-red { color: #ff0055; }
.lock-green { color: #00ff88; }
.lock-arrow i { font-size: 2rem; color: #fff; opacity: 0.3; }

/* Mobile Response */
@media (max-width: 768px) { 
    .legal-main-title { font-size: 2.5rem; } 
    .agb-section-header { flex-direction: column; align-items: flex-start; gap: 15px; } 
    .lock-visual-wrapper { flex-direction: column; } 
    .lock-arrow { transform: rotate(90deg); } 
    .legal-alert-danger { flex-direction: column; }
}