/* ==========================================================================
   Reverse – Responsive Anpassungen
   ========================================================================== */

/* Topbar: Labels zuerst ausblenden, dann Icons behalten */
@media (max-width: 1680px) {
    .top-action .label { display: none; }
}

@media (max-width: 1280px) {
    :root { --inspector-width: 320px; --sidebar-width: 250px; }
    .split-3 { grid-template-columns: 200px minmax(0, 1fr); }
    .split-3 > :nth-child(3) { grid-column: 1 / -1; max-height: 45vh; }
}

/* Inspector wird zum ausklappbaren Overlay */
@media (max-width: 1100px) {
    .workspace,
    .app.inspector-collapsed .workspace { grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 0; }
    .app.sidebar-collapsed .workspace { grid-template-columns: 0 minmax(0, 1fr) 0; }
    .inspector {
        position: fixed;
        top: var(--topbar-height);
        right: 0;
        bottom: var(--footer-height);
        width: min(var(--inspector-width), 92vw);
        z-index: 40;
        box-shadow: var(--shadow-pop);
        transform: translateX(105%);
        transition: transform var(--transition), visibility var(--transition);
        visibility: hidden;
    }
    .app.inspector-open .inspector { transform: none; visibility: visible; }
    .grid-2 { grid-template-columns: 1fr; }
    .status-btn { max-width: 160px; }
}

/* Sidebar wird Off-Canvas */
@media (max-width: 860px) {
    :root { --topbar-height: auto; }
    .app { grid-template-rows: auto minmax(0, 1fr) auto; }
    .workspace,
    .app.sidebar-collapsed .workspace,
    .app.inspector-collapsed .workspace { grid-template-columns: minmax(0, 1fr); }
    .sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: min(300px, 88vw);
        z-index: 45;
        box-shadow: var(--shadow-pop);
        transform: translateX(-105%);
        transition: transform var(--transition);
        visibility: visible !important;
    }
    .app.sidebar-open .sidebar { transform: none; }
    .app.sidebar-collapsed .sidebar { transform: translateX(-105%); }
    .app.sidebar-open.sidebar-collapsed .sidebar { transform: none; }
    .inspector { top: 0; bottom: 0; }

    .topbar { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
    .topbar-main { display: contents; }
    #btn-toggle-sidebar { order: 0; }
    .brand { order: 1; flex: 1; width: auto; padding: 0; }
    .logo { font-size: 22px; }
    .logo .icon { width: 26px; height: 26px; }
    .topbar-actions { order: 2; flex: 0 0 100%; margin: 0; gap: 6px; flex-wrap: wrap; }
    .url-form { order: 3; flex: 0 0 100%; max-width: none; min-width: 0; }
    .url-form .btn { padding: 7px 10px; }
    .icon-circle { width: 36px; height: 36px; }
    .status-btn { max-width: 150px; order: 10; }
    .preview-notices { max-height: 92px; overflow-y: auto; }
    .preview-notices .notice { font-size: var(--text-xs); }
    .panel-toolbar { gap: 6px; }

    .center { padding: var(--space-3) var(--space-3) 0; }
    .split, .split-3 { grid-template-columns: 1fr; }
    .split > :first-child { max-height: 180px; }
    .editor-pair, .component-editors, .compare-stage { grid-template-columns: 1fr; }
    .tab-panels { min-height: 70vh; }
    .site-footer { flex-direction: column; justify-content: center; padding: 8px 12px; gap: 4px; min-height: var(--footer-height); }
    .modal-body { padding: var(--space-4); }
    .stat-card { padding: var(--space-4); }
    .grid-cards { gap: var(--space-3); }
}

@media (max-width: 860px) {
    .app { height: auto; min-height: 100dvh; overflow: visible; }
    .tab-panels { height: 75vh; }
}

.sidebar-backdrop { display: none; }
@media (max-width: 1100px) {
    .app.inspector-open .sidebar-backdrop,
    .app.sidebar-open .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 35;
        background: rgba(0, 0, 0, 0.45);
    }
}