/* mobile-optimierung.css */
@media (max-width: 768px) {
    .app-view { padding: 15px 10px; margin-top: 65px; padding-bottom: 95px !important; }
    .content-card { padding: 20px 15px; border-radius: 16px; }
    .header-nav { height: 65px; display: flex; justify-content: center; }
    .nav-container { justify-content: center !important; }
    .nav-brand { font-size: 1.5rem; margin: 0 auto; text-align: center; }
    #navLinks {
        position: fixed; bottom: 0; left: 0; right: 0; height: 75px;
        background: rgba(10, 10, 12, 0.98); backdrop-filter: blur(15px);
        border-top: 1px solid rgba(157, 78, 221, 0.4);
        display: flex !important; justify-content: space-around !important;
        align-items: center; padding: 0 5px; margin: 0; z-index: 1050;
        box-shadow: 0 -5px 25px rgba(0,0,0,0.8); border-radius: 20px 20px 0 0;
        flex-wrap: nowrap !important;
    }
    .right-side-nav { width: 100%; display: flex; justify-content: space-around; align-items: center; }
    .nav-item-mobile { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; transition: transform 0.1s ease; }
    .nav-item-mobile:active { transform: scale(0.9); opacity: 0.7; }
    .nav-item-mobile i { margin-bottom: 4px; font-size: 1.4rem !important; }
    .nav-text-mobile { font-size: 0.65rem; text-transform: uppercase; font-weight: 800; letter-spacing: 0.5px; display: block !important; }
    #onlineSidebarToggle { bottom: 90px !important; left: 15px !important; }
    #eventsSidebarToggle { bottom: 90px !important; right: 15px !important; }
    .feature-card { padding: 20px 15px; }
    .map-sidebar, .category-sidebar { padding: 15px; margin-bottom: 15px; }
    #map, #gpxPreviewMap, #meetingMap { height: 350px !important; }
    .modal-dialog { margin: 0.5rem; }
    .table-custom-glass thead { display: none; }
    .table-custom-glass tbody tr { display: block; margin-bottom: 15px; border: 1px solid rgba(157, 78, 221, 0.3); border-radius: 12px; padding: 10px; background: rgba(10, 10, 12, 0.95) !important; }
    .table-custom-glass tbody td { display: flex; justify-content: space-between; align-items: center; border: none !important; padding: 8px 5px !important; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
    .table-custom-glass tbody td:last-child { border-bottom: none !important; justify-content: center; margin-top: 10px; flex-direction: column; gap: 10px; }
    .table-custom-glass tbody td select, .table-custom-glass tbody td button, .table-custom-glass tbody td .d-flex { width: 100%; margin-bottom: 5px; flex-direction: column; gap: 5px; }
    .table-custom-glass tbody td::before { content: attr(data-label); font-weight: 800; color: var(--brand-gold); text-transform: uppercase; font-size: 0.8rem; margin-right: 15px; text-align: left; }
    .chat-bubble { max-width: 95%; }
    .carousel-item img { height: 40vh !important; }
    .crew-flip-card { max-width: 100% !important; margin-bottom: 1rem; }
}

@media (min-width: 769px) {
    #navLinks { flex-grow: 1; justify-content: flex-end !important; display: flex; align-items: center; }
    .desktop-center-nav { position: absolute; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); padding: 8px 30px; border-radius: 30px; box-shadow: inset 0 0 10px rgba(0,0,0,0.2); z-index: 10; }
    .desktop-nav-link { color: rgba(255, 255, 255, 0.6); font-weight: 700; text-transform: uppercase; font-size: 0.95rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; letter-spacing: 0.5px; text-decoration: none; }
    .desktop-nav-link:hover { color: var(--brand-gold-glow); text-shadow: 0 0 10px rgba(197, 160, 26, 0.3); transform: translateY(-1px); }
    .desktop-nav-link i { font-size: 1.1rem; color: var(--brand-purple-glow); }
    .right-side-nav { display: flex; align-items: center; gap: 15px; }
    .nav-item-mobile { display: flex; align-items: center; cursor: pointer; padding: 6px 12px; border-radius: 20px; transition: background 0.2s; }
    .nav-item-mobile:hover { background: rgba(255,255,255,0.05); }
    .nav-item-mobile i { font-size: 1.3rem; }
    .nav-text-mobile { display: none !important; }
}