/* ==================== MOBILE.CSS KOMPLETT ==================== */

/* Allgemeine Anpassungen für mobile Geräte <= 768px */
@media (max-width: 768px) {
    body {
        font-size: 13px !important;
        padding: 10px !important;
    }

    /* ==================== Top-Nav ==================== */
    .top-nav {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0.8rem 1rem !important;
        gap: 0.5rem;
    }

    /* Logo + Seitentitel links oben */
    .top-nav-left {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem;
    }

    /* Admin / Logout Buttons rechts neben Titel */
    .top-nav-right {
        display: flex !important;
        flex: 0 0 auto;
        align-items: center !important;
        gap: 0.5rem;
        margin-left: auto; /* schiebt Admin/Logout nach rechts */
    }

    /* Andere Links unterhalb */
    .top-nav-right-bottom {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        margin-top: 0.5rem;
        gap: 0.4rem;
    }

    .top-nav-right-bottom a {
        display: inline-block;
        padding: 0.4rem 0.8rem !important;
        font-size: 0.85rem !important;
        border-radius: 6px;
        background: rgba(255,255,255,0.03);
        transition: all 0.3s ease;
    }
    .top-nav-right-bottom a:hover {
        background: rgba(255,255,255,0.15);
    }

    /* ==================== Boxen untereinander ==================== */
    .box, .news, .stufenbeitrag, .currentPoints, 
    .admin-section, .minus-15-lk, .learnhelper-courses .course,
    .pointSystem, .changelog {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Tabellen scrollbar */
    table, .points-table, .stufenbeitrag-table, .course-table, .pointSystem-container table {
        font-size: 0.8rem !important;
        overflow-x: auto;
        display: block;
        width: 100% !important;
    }
    th, td {
        padding: 6px 8px !important;
        text-align: left;
    }

    /* Flex-Container */
    .admin-container, .pointSystem-dashboard, .minus15-container, .learnhelper-courses {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* Buttons & Links */
    button, .open-modal-btn, .modal-btn, .save-btn, 
    .top-nav a, .lk-actions a, .news-header a, .minus-15-header a,
    .learnhelper-courses .course a {
        padding: 0.4rem 0.7rem !important;
        font-size: 0.8rem !important;
    }

    /* Modals */
    .modal-content {
        width: 90% !important;
        padding: 15px !important;
    }

    /* Kalender */
    #calendar-container {
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 3px !important;
    }
    .calendar-day {
        padding: 6px 0 !important;
        font-size: 0.75rem !important;
    }

    /* Login */
    .login-container {
        width: 90% !important;
        padding: 30px 20px !important;
    }
    .login-container h1 { font-size: 1.4rem !important; }
    .login-container input[type="text"], .login-container input[type="password"] {
        padding: 10px !important;
        font-size: 0.9rem !important;
    }

    /* Footer */
    .footer-content {
        flex-direction: column !important;
        text-align: center !important;
    }

    /* Learnhelper-Courses */
    .learnhelper-courses {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* Punktesystem Tabellen */
    .pointSystem-container table {
        font-size: 0.9rem !important;
    }

    /* Minus15 Container */
    .minus15-container, .minus-15-lk {
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Boxen-Inhaltstexte */
    .news p, .stufenbeitrag p, .currentPoints p {
        font-size: 0.95rem !important;
    }

    /* News-Link */
    .news-header a {
        display: inline-block;
        margin-top: 0.5rem;
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem !important;
    }

    /* Überschriften anpassen */
    h1 { font-size: 1.3rem !important; }
    h2 { font-size: 1.1rem !important; }
    h3 { font-size: 1rem !important; }
}

/* ==================== Smartphones <=480px ==================== */
@media (max-width: 480px) {
    body { font-size: 12px !important; }

    /* Boxen noch kompakter */
    .box, .news, .stufenbeitrag, .currentPoints, 
    .minus-15, .learnhelper, .calendar, .pointSystem, .changelog,
    .learnhelper-courses .course {
        padding: 0.6rem !important;
    }

    /* Überschriften kleiner */
    h1 { font-size: 1.2rem !important; }
    h2 { font-size: 1rem !important; }
    h3 { font-size: 0.95rem !important; }

    /* Buttons & Links kleiner */
    button, .open-modal-btn, .modal-btn, .save-btn, 
    .top-nav a, .lk-actions a, .news-header a, .minus-15-header a,
    .learnhelper-courses .course a {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.75rem !important;
    }
}