/* ============================================
   Mobile Module
   ============================================
   Breakpoints:
     Mobile:  max-width: 480px
     Tablet:  max-width: 768px
     Laptop:  max-width: 1024px
     Desktop: min-width: 1025px
   ============================================ */

/* --------------------------------------------
   1. Global responsive defaults (alle Viewports)
   -------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

img, video, canvas, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Tabellen horizontal scrollbar */
.table-wrapper,
.responsive-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fluid body font using clamp */
body {
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Touch targets: mindestens 44×44px */
a, button, [role="button"], input[type="submit"], input[type="button"],
label[for], .clickable {
    min-height: 44px;
    min-width: 44px;
}

/* Bilder: lazy-loading global */
img:not([loading]) {
    loading: lazy; /* hint for browsers that support it natively */
}

/* Font-Swap für alle @font-face */
/* (Einzelne @font-face Deklarationen in fonts müssen font-display: swap nutzen) */

/* --------------------------------------------
   2. Tablet (max-width: 768px)
   -------------------------------------------- */
@media (max-width: 768px) {
    /* Flex statt Float */
    .float-left, .float-right {
        float: none !important;
    }

    /* Columns: stacking */
    .col, [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Modals: max 95vw */
    .modal, .modal-overlay, .dialog, [role="dialog"] {
        max-width: 95vw !important;
        width: 95vw !important;
        margin: 0 auto !important;
    }

    /* Navigation: volle Breite */
    nav, .nav, .navbar {
        width: 100%;
    }

    /* Feste Pixel-Breiten in Containern aufheben */
    .container, .page-container, .content-wrapper {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* --------------------------------------------
   3. Mobile (max-width: 480px)
   -------------------------------------------- */
@media (max-width: 480px) {
    body {
        font-size: clamp(13px, 3.5vw, 16px);
    }

    h1 { font-size: clamp(18px, 5vw, 28px); }
    h2 { font-size: clamp(16px, 4.5vw, 24px); }
    h3 { font-size: clamp(14px, 4vw, 20px); }

    /* Volle Breite für Karten/Panels */
    .card, .panel, .box, .widget {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
    }

    /* Modals: volle Breite */
    .modal, .modal-overlay, .dialog, [role="dialog"] {
        max-width: 100vw !important;
        width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Buttons: volle Breite auf Mobile */
    .btn-block-mobile,
    .btn-fullwidth {
        display: block !important;
        width: 100% !important;
    }

    /* Padding reduzieren */
    .container, .page-container, .content-wrapper {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Tabellen: horizontal scrollbar */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    /* Input-Felder: volle Breite */
    input, select, textarea {
        max-width: 100%;
        width: 100%;
    }
}

/* --------------------------------------------
   4. Landscape Mobile (max-height: 500px, Querformat)
   -------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce vertical spacing */
    .modal, .dialog, [role="dialog"] {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Hide desktop controls on mobile (but keep nav island visible) */