/* ================================================================
   Responsive Overrides — Desktop → Tablet → Mobile
   ================================================================ */

/* -- Tablet (max 1024px) ---------------------------------------- */
@media (max-width: 1024px) {
  /* Browser tabs scroll */
  .browser-tabs { padding: 6px 8px 0; }
  .browser-tab { padding: 7px 14px; min-width: 70px; font-size: 0.78rem; }
  .toolbar-btn--contact { padding: 5px 10px; font-size: 0.75rem; }

  /* Sidebar collapse */
  .app-sidebar { width: 160px; }
  .app-sidebar__item { padding: 8px 14px; font-size: 0.82rem; }

  /* Dashboard */
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-row { grid-template-columns: 1fr; }

  /* ERP */
  .erp-kpis { grid-template-columns: repeat(2, 1fr); }
  .erp-project-grid { grid-template-columns: 1fr; }

  /* CRM Kanban scroll */
  .crm-kanban-col { min-width: 220px; width: 220px; }

  /* Website pages */
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
  .ref-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
  .site-contact-grid { grid-template-columns: 1fr; }
  .site-form-grid { grid-template-columns: 1fr; }

  /* Immobilien */
  .im-obj-grid { grid-template-columns: 1fr; }
  .im-steps { grid-template-columns: repeat(2, 1fr); }
  .im-detail-features { grid-template-columns: 1fr; }

  /* Praxis */
  .px-info-grid { grid-template-columns: 1fr; }

  /* Friseur hero single column */
  #tab-friseur .site-hero { grid-template-columns: 1fr; }
  .fr-contact-bar { flex-wrap: wrap; gap: 12px; }

  /* Forecast/Report */
  .crm-forecast-grid { grid-template-columns: repeat(2, 1fr); }
  .crm-report-kpis { grid-template-columns: repeat(2, 1fr); }

  /* Detail grids */
  .detail-grid { grid-template-columns: 1fr; }
}

/* -- Mobile (max 768px) ----------------------------------------- */
@media (max-width: 768px) {
  html { font-size: 13px; }

  /* Toolbar compact */
  .browser-toolbar { gap: 4px; padding: 4px 8px; }
  .toolbar-btn { width: 28px; height: 28px; }
  .toolbar-btn--contact { display: none; }
  .address-bar { padding: 5px 10px; }

  /* Sidebar hidden — becomes off-canvas or hidden */
  .app-sidebar { display: none; }
  .app-with-sidebar { display: block; }

  /* Dashboard */
  .dash { padding: 16px; }
  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .dash-chart-wrap canvas { height: 200px; }

  /* KPI cards smaller */
  .kpi-card__value { font-size: 1.2rem; }

  /* Tables as horizontal scroll */
  .data-table { display: block; overflow-x: auto; }

  /* Service grid single column */
  .service-grid { grid-template-columns: 1fr; }
  .trust-bar { grid-template-columns: 1fr 1fr; }

  /* Website navs stack */
  .site-nav { flex-direction: column; gap: 8px; align-items: flex-start; padding: 10px 16px; }
  .site-nav__links { flex-wrap: wrap; gap: 4px; }
  .site-nav__cta { align-self: stretch; text-align: center; }

  /* Hero compact */
  .site-hero { padding: 32px 20px; }
  .site-hero__title { font-size: 1.4rem; }
  .site-hero__actions { flex-direction: column; }
  .site-hero__actions .btn { width: 100%; }

  /* Friseur */
  .fr-quick-contact { grid-template-columns: 1fr; }

  /* Contact dialog full width */
  .contact-dialog { width: 100%; }
  .contact-form__grid { grid-template-columns: 1fr; }

  /* Immobilien */
  .im-steps { grid-template-columns: 1fr 1fr; }
  .im-filter-bar { flex-direction: column; }
  .im-stats { flex-direction: column; gap: 16px; }

  /* ERP settings */
  .erp-settings-grid { grid-template-columns: 1fr; }

  /* CRM kanban minimal */
  .crm-kanban-col { min-width: 200px; width: 200px; }
  .crm-forecast-grid { grid-template-columns: 1fr; }
}

/* -- Small Mobile (max 480px) ----------------------------------- */
@media (max-width: 480px) {
  .browser-tab { padding: 6px 10px; font-size: 0.72rem; min-width: 60px; }
  .dash-kpis { grid-template-columns: 1fr; }
  .trust-bar { grid-template-columns: 1fr; }
  .im-steps { grid-template-columns: 1fr; }
}

/* -- Reduced Motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1ms !important;
  }
}

/* -- Print (hide chrome) ---------------------------------------- */
@media print {
  .browser-tabs, .browser-toolbar, .app-sidebar, .site-nav, .site-footer { display: none; }
  .browser-frame { height: auto; overflow: visible; }
  .browser-viewport { overflow: visible; position: static; }
  .tab-panel { position: static; overflow: visible; }
}