/* Mobile Responsive Base Styles */
/* Diese Datei enthält generelle responsiven Regeln für alle Geräte */

/* Mobile Base Styles - Verhindert horizontales Scrollen */
html, body {
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Main Container Responsive */
.main {
    max-width: calc(100% - 260px);
    overflow-x: hidden;
}

/* Container Responsive */
.container {
    max-width: 100%;
    padding: 0 15px;
}

/* Tablet Breakpoint (768px) */
@media (max-width: 768px) {
    .main {
        margin-left: 0;
        padding: 15px;
        max-width: 100%;
        width: 100%;
    }

    .container {
        padding: 0 12px;
    }

    /* Cards */
    .card,
    .card-vm,
    .card-panel {
        margin-bottom: 15px;
        border-radius: 10px;
    }

    .card-body,
    .card-panel-body {
        padding: 15px;
    }

    .card-header,
    .card-panel-header {
        padding: 15px;
    }

    /* Tables */
    .table,
    .table-vm,
    .archive-table,
    .template-table {
        font-size: 0.85rem;
    }

    .table th,
    .table td,
    .table-vm th,
    .table-vm td,
    .archive-table th,
    .archive-table td,
    .template-table th,
    .template-table td {
        padding: 8px 6px;
    }

    /* Buttons */
    .btn,
    .btn-vm-primary,
    .btn-vm-outline,
    .btn-glow,
    .btn-ghost,
    .btn-sm-ghost {
        font-size: 0.85rem;
        padding: 8px 12px;
    }

    /* Forms */
    .form-control,
    .form-select {
        font-size: 0.9rem;
        padding: 10px 12px;
    }

    /* Grid Layouts */
    .tpl-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Page Header */
    .page-header {
        margin-bottom: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header h2 {
        font-size: 20px;
    }

    /* Table Responsive Wrapper */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Steps */
    .steps {
        margin-bottom: 16px;
    }

    .step {
        padding: 10px 12px;
    }

    .step-num {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    /* Filter Bar */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar .form-control,
    .filter-bar .form-select {
        width: 100%;
    }
}

/* Mobile Breakpoint (480px) */
@media (max-width: 480px) {
    .main {
        padding: 12px;
    }

    .container {
        padding: 0 10px;
    }

    /* Cards */
    .card-body,
    .card-panel-body {
        padding: 12px;
    }

    .card-header,
    .card-panel-header {
        padding: 12px;
    }

    /* Tables */
    .table,
    .table-vm,
    .archive-table,
    .template-table {
        font-size: 0.8rem;
    }

    .table th,
    .table td,
    .table-vm th,
    .table-vm td,
    .archive-table th,
    .archive-table td,
    .template-table th,
    .template-table td {
        padding: 6px 4px;
    }

    /* Buttons */
    .btn,
    .btn-vm-primary,
    .btn-vm-outline,
    .btn-glow,
    .btn-ghost,
    .btn-sm-ghost {
        font-size: 0.8rem;
        padding: 6px 10px;
    }

    /* Forms */
    .form-control,
    .form-select {
        font-size: 0.85rem;
        padding: 8px 10px;
    }

    /* Grid Layouts */
    .tpl-grid {
        grid-template-columns: 1fr;
    }

    /* Page Header */
    .page-header h2 {
        font-size: 18px;
    }

    /* Badges */
    .badge,
    .badge-count,
    .badge-wv {
        font-size: 11px;
        padding: 3px 8px;
    }

    /* Status Badges */
    .status-badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    /* Modals */
    .modal-content {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 12px !important;
    }

    /* Template Cards */
    .tpl-card {
        padding: 14px;
    }

    /* Template Preview */
    .template-preview {
        padding: 12px;
    }

    .template-preview-content {
        font-size: 13px;
    }

    /* Preview Frame */
    .preview-frame {
        height: 350px;
    }
}

/* Landscape Orientation (Querformat) */
@media (orientation: landscape) and (max-height: 500px) {
    /* Cards */
    .card-body,
    .card-panel-body {
        padding: 12px;
    }

    .card-header,
    .card-panel-header {
        padding: 12px;
    }

    /* Tables */
    .table th,
    .table td,
    .table-vm th,
    .table-vm td,
    .archive-table th,
    .archive-table td,
    .template-table th,
    .template-table td {
        padding: 6px 4px;
    }

    /* Grid Layouts */
    .tpl-grid {
        gap: 6px;
    }

    .tpl-card {
        padding: 10px;
    }

    /* Modals */
    .modal-content {
        max-height: 90vh;
    }

    .modal-body {
        max-height: 50vh;
        overflow-y: auto;
    }

    /* Preview Frame */
    .preview-frame {
        height: 300px;
    }
}