/*
====================================================
MOBILE CSS — Pitlane
Breakpoints: 1200px  1024px  768px  480px
====================================================
*/

/* ══════════════════════════════════════════════════
   1. ADMIN FORM — editGrid / raweGrid
══════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .editGrid { grid-template-columns: 130px 1fr 140px 1fr 140px 1fr; }
    .editGrid > div[style*="grid-column: 9"],
    .editGrid > div[style*="grid-column:9"] {
        grid-column: 1 / -1 \!important;
        grid-row: auto \!important;
        margin-top: 8px;
    }
}
@media (max-width: 1024px) {
    .editGrid { grid-template-columns: 120px 1fr 130px 1fr; }
    .raweGrid { grid-template-columns: 110px 1fr 120px 1fr; }
    .raweGrid .rg-span7 { grid-column: 2 / span 3 \!important; }
}

/* ══════════════════════════════════════════════════
   HOME — KPI-Kacheln (ersetzt Inline-Grid)
══════════════════════════════════════════════════ */
.home-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
    .home-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════
   MOBIL <= 768px
══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Page Wrapper — Hamburger endet bei ~58px, Inhalt ab 70px */
    .page-wrapper {
        top: 70px; bottom: 54px;
        width: calc(100% - 12px);
        padding: 12px; border-radius: 10px;
    }
    .pages-wrapper {
        top: 70px; bottom: 54px;
        width: calc(100% - 12px);
        padding: 12px; border-radius: 10px;
    }
    .pages-wrapper.profil-page,
    .pages-wrapper.profil-edit-page { padding: 14px 12px; }
    .galerie-wrap {
        padding-top: 76px \!important;
        padding-left: 10px \!important;
        padding-right: 10px \!important;
    }

    /* iOS-Zoom verhindern */
    input, select, textarea,
    .editGrid input, .editGrid select, .editGrid textarea,
    .searchbox input, .msg-reply-ta,
    .msg-compose-select, .msg-compose-ta,
    .galerie-search-input { font-size: 16px \!important; }

    /* editGrid: 2 Spalten */
    .editGrid { grid-template-columns: 110px 1fr; gap: 4px; padding: 10px; }
    .editGrid label { font-size: 11px; }
    .editGrid > div[style*="grid-column"],
    .editGrid > label[style*="grid-column"],
    .editGrid > textarea[style*="grid-column"] {
        grid-column: auto \!important; grid-row: auto \!important;
    }
    .editGrid > textarea { grid-column: 1 / -1 \!important; }
    .editGrid > label[style*="grid-column:1"] { grid-column: 1 \!important; }

    /* Bilder */
    .bildGrid { gap: 10px; }
    .bild { width: 145px; }
    .bild img { width: 135px; height: 105px; }

    /* Speichern */
    .saveBtn { right: 10px; bottom: 60px; width: 150px; font-size: 13px; padding: 10px; min-height: 44px; }

    /* raweGrid: 2 Spalten */
    .raweGrid { grid-template-columns: 100px 1fr; gap: 4px; padding: 10px; }
    .raweGrid > div[style*="grid-column"],
    .raweGrid > input[style*="grid-column"],
    .raweGrid > textarea[style*="grid-column"] {
        grid-column: auto \!important; grid-row: auto \!important;
    }
    .raweGrid .rg-span7,
    .raweGrid .rg-span3 { grid-column: 1 / -1 \!important; }
    .raweGrid .rg-section { font-size: 10px; padding: 8px 0 2px; }
    .raweGrid label { font-size: 11px; }

    /* Suche */
    .layout { grid-template-columns: 1fr \!important; }
    .preview-box { display: none \!important; }
    .tablebox { height: 320px; overflow-x: auto; }
    .tablebox table { min-width: 520px; }
    .detail-standalone-wrap { padding: 0 4px; }
    #zoomResult { display: none \!important; }

    /* Benutzerverwaltung */
    .ua-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -12px; padding: 0 12px; }
    .ua-table { min-width: 580px; }
    .ua-table th, .ua-table td { padding: 8px 10px; font-size: 0.82rem; }
    .ua-header { flex-wrap: wrap; gap: 8px; }
    .ua-title  { font-size: 1.1rem; }

    /* Profil */
    .profil-hero { flex-direction: column; gap: 14px; align-items: flex-start; }
    .profil-name { font-size: 1.3rem; }
    .profil-edit-actions { flex-wrap: wrap; }

    /* Statistik */
    .stats-kpi-grid { grid-template-columns: repeat(2, 1fr) \!important; }
    .stats-title { font-size: 1.6rem; }

    /* Modal / Popup */
    .modal-content {
        width: 97% \!important; margin: 1vh auto 0 \!important;
        padding: 12px \!important; height: 97vh \!important;
        overflow-y: auto \!important;
    }
    .popup-layout { padding: 10px; }
    .popup-title  { font-size: 1rem; letter-spacing: 1px; }
    .popup-tabs   { gap: 3px; flex-wrap: wrap; }
    .ptab         { padding: 8px 10px; font-size: 0.72rem; min-height: 36px; }
    .popup-images { padding: 8px; gap: 6px; }
    .popup-thumb  { width: 100px; height: 75px; }

    /* Detail-Tabelle gestapelt */
    .detail-table,
    .detail-table tbody,
    .detail-table tr { display: block; width: 100%; }
    .detail-table tr { margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 4px; }
    .detail-table tr:last-child { border-bottom: none; margin-bottom: 0; }
    .detail-table td.empty { display: none \!important; }
    .detail-table td.label {
        display: block; width: 100% \!important; font-size: 10px \!important;
        min-width: 0 \!important; white-space: normal \!important;
        border: none \!important; background: transparent \!important;
        padding: 6px 4px 2px \!important; color: rgba(200,200,220,0.45) \!important;
        text-transform: uppercase; letter-spacing: 0.08em;
    }
    .detail-table td:not(.label):not(.empty) {
        display: block; width: 100% \!important; font-size: 13px \!important;
        border: none \!important; border-bottom: 1px solid rgba(255,255,255,0.07) \!important;
        padding: 2px 4px 6px \!important; background: transparent \!important;
    }

    /* Galerie-Detail */
    .gd-outer { grid-template-columns: 1fr \!important; }
    .gd-images { position: static \!important; }
    .gd-title  { font-size: 1.4rem; }
    .gd-field-label { min-width: 90px; }

    /* Galerie-Grid (alt + neu) */
    .mg-gal-grid       { justify-content: center; gap: 8px; }
    .mg-gal-img-wrap   { width: 108px; height: 82px; }
    .mg-gal-thumb-info { width: 108px; }
    .mg-gal-header     { flex-wrap: wrap; gap: 0.5rem; padding: 0.8rem; }
    .galerie-grid      { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .galerie-header    { padding: 14px 14px 12px; }
    .galerie-title     { font-size: 1.4rem; }
    .galerie-search-row { flex-direction: column; gap: 8px; }
    .galerie-search-input,
    .galerie-search-btn,
    .galerie-reset-btn { width: 100%; box-sizing: border-box; }

    /* Nachrichten */
    .msg-header { flex-wrap: wrap; gap: 0.5rem; padding: 0.8rem; }
    .msg-title  { font-size: 1rem; }
    .msg-thread { max-height: 200px; }
    .msg-bubble { max-width: 94%; }
    .msg-reply-form { flex-direction: column; gap: 8px; }
    .msg-reply-btn  { width: 100%; justify-content: center; }
    .msg-compose    { padding: 1rem; }

    /* Mitglieder */
    .mitgl-grid { grid-template-columns: 1fr \!important; }

    /* Footer */
    .footer { font-size: 10px; padding: 6px 0; }

    /* Feedback-Button */
    #fb-btn {
        bottom: 62px \!important; right: 14px \!important;
        width: 42px \!important; height: 42px \!important;
        font-size: 1.1rem \!important;
    }
}

/* ══════════════════════════════════════════════════
   Small Mobile <= 480px
══════════════════════════════════════════════════ */
@media (max-width: 480px) {

    .page-wrapper  { top: 65px; padding: 8px; }
    .pages-wrapper { top: 65px; padding: 8px; }
    .galerie-wrap  { padding-top: 70px \!important; padding-left: 8px \!important; padding-right: 8px \!important; }

    .editGrid { grid-template-columns: 95px 1fr; }
    .raweGrid { grid-template-columns: 90px 1fr; }

    .popup-thumb       { width: 86px; height: 65px; }
    .mg-gal-img-wrap   { width: 92px; height: 70px; }
    .mg-gal-thumb-info { width: 92px; }

    .bild { width: 125px; }
    .bild img { width: 115px; height: 90px; }

    .saveBtn { width: 130px; font-size: 12px; padding: 9px; }

    .home-kpi-grid > div { padding: 0.7rem 0.8rem \!important; }

    .stats-kpi-grid { grid-template-columns: repeat(2, 1fr) \!important; gap: 0.6rem; }

    .galerie-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
    .galerie-card-img-wrap { height: 96px; }

    .msg-thread { max-height: 160px; }

    .profil-name   { font-size: 1.15rem; }
    .profil-avatar { width: 70px; height: 70px; }

    .ua-table { min-width: 500px; }

    .footer { font-size: 9px; }
}