/* ==================== 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;
    }
}